@charset "utf-8";

/* =========================================================
   common.css
   base.css + custom.css を統合（WAOHS-67）
   読み込み順は統合前と同一。custom.css が完全に上書きしていて
   効果のなかった base.css 側の指定 8件 を削除。
   ========================================================= */

/* ===== base.css ここから ===== */
/*---------------------------------------------------------------------------------------
	Overall settings
----------------------------------------------------------------------------------------*/

body{
	color:#333;
	text-align:center;
}
a{ color:#333; text-decoration:none; -webkit-transition: all .2s; transition: all .2s;}
a:hover{ opacity: .7; text-decoration:none;}
img.imgalpha, .svg path, .svg polygon{ -webkit-transition: all .2s; transition: all .2s;}
.svg{ vertical-align: middle;}
/* font */
.montserrat{ font-family: 'Montserrat', sans-serif;}
.gothic{ font-family:"Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
.mincho{ font-family:"Noto Sans JP", "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS明朝E", "メイリオ", "Meiryo", serif;}

.subtitle{
	font-size: 2.4rem;
	font-weight: bold;
	padding: 0 10%;
	position: relative;
}
.subtitle.is-large {
	font-size: 2.8rem;
}
.subtitle span:not(.note){
	display: block;
	padding-bottom: 10px;
	border-bottom: 1px solid #9f9f9f;
}
.subtitle .note {
	position: absolute;
	font-weight: normal;
	font-size: 13px;
	width: 100%;
	left: 0;
	bottom: -28px;
	text-align: center;
}
.btn{
	display: block;
	border: 1px solid #9f9f9f;
	padding: 5px 30px 5px 10px;
	position: relative;
}
.btn:after{
	position: absolute;
	content: ">";
	right: 5px;
	top: 50%;
	transform: translate(-50%, -50%);
}
span.cate{
	display: inline-block;
	padding: 2px 1.5rem;
	font-size: 1.3rem;
	background: #e7e7e7;
	margin-right: 3px;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	a:hover{ opacity: 1;}
	.subtitle{
		font-size: 2.0rem;
		padding: 0 5%;
	}
	.subtitle span:not(.note){
		padding-bottom: 5px;
	}
	.subtitle .note {
		font-size: 11px;
		bottom: -24px;
	}
}

.pc {
  display: inherit !important;
}
@media only screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

.sp {
  display: none !important;
}
@media only screen and (max-width: 768px) {
  .sp {
    display: inherit !important;
  }
}


/*---------------------------------------------------------------------------------------
	header
----------------------------------------------------------------------------------------*/
header {
	background-color:#fff;
}
#header-fixed {
	position: sticky;
	background-color: #fff;
    width: 100%;
    top: 0;
    left: 0;
	z-index: 1000;
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);

	.header-top {
		height: 80px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #fabe00;
		.inner {
			max-width:1280px;
			width: 95%;
			margin:0 auto;
			display:flex;
			justify-content:space-between;
			align-items:center;
			.logo {
				width:226px;
				margin-right:30px;
				img {
					height: auto;
				}
				@media only screen and (min-width: 769px) and (max-width: 1279px) {
					width: calc(240/1280 * 100vw);
					margin-right: calc(30/1280 * 100vw);
				}
			}
		}

		& .site-h1 {
			font-size: 13px;
			font-weight: bold;
			margin-right: auto;
			font-feature-settings: "palt";
			letter-spacing: .05em;
			line-height: 1.25;
			@media only screen and (min-width: 1280px) {
				br.pc {
					display: none !important;
				}
			}
			@media only screen and (min-width: 769px) and (max-width: 1279px) {
				font-size: min(12px, calc(16/1280 * 100vw));
			}
			@media only screen and (max-width: 768px) {
				line-height: calc(34/26);
				margin-top: 8px;
				font-size: 10px;
			}
		}
		#sticky-headers {
			@media only screen and (max-width: 768px) {
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 1002;
				width: 100%;
				& .sticky-boxs {
					display: flex;
					background-color: #fff4d3;
					padding-bottom: env(safe-area-inset-bottom);
					&::after {
						content: "";
						position: absolute;
						top: 100%;
						left: 0;
						width: 100%;
						height: 20px;
						background-color: inherit;
					}
				}
			}

			& .sticky-boxs {
				display: flex;
				gap: 20px;
				@media only screen and (max-width: 1279px) {
					gap: min(calc(12/1280 * 100vw), 16px);
				}
				& .sticky-menu:not(.sticky-menu-line) {
					display: flex;
					background: #00baff;
					color: #fff;
					font-size: 14px;
					font-weight: bold;
					height: 48px;
					align-items: center;
					padding: 0 12px 0 10px;

					& span {
						position: relative;
						display: block;
						padding: 0 16px 0 22px;
						&:before {
							content: "";
							display: block;
							width: 17px;
							height: 16px;
							background-position: center;
							background-repeat: no-repeat;
							background-size: contain;
							left: 0;
							position: absolute;
							top: calc(50% - 8px);
						}
						@media only screen and (min-width: 769px) and (max-width: 1279px) {
							padding-right: calc(18/1280 * 100vw);
							&:before {
								width: calc(24/1280* 100vw);
								height: calc(22/1280* 100vw);
							}
						}
						&.icon-request {
							padding-left: 19px;
							&:before {
								background-image: url(../images/icon-file.svg);
								width: 13px;
							}
							@media only screen and (min-width: 769px) and (max-width: 1279px) {
								padding-left: calc(24/1280 * 100vw);
								&:before {
									width: calc(17/1280* 100vw);
								}
							}
						}
						&.icon-school {
							padding-left: 24px;
							letter-spacing: -.05em;
							&:before {
								background-image: url(../images/icon-school.svg);
								width: 20px;
							}
							@media only screen and (min-width: 769px) and (max-width: 1279px) {
								padding-left: calc(30/1280 * 100vw);
								&:before {
									width: calc(24/1280* 100vw);
								}
							}
						}
						&.icon-kobetsu {
							padding-left: 26px;
							&:before {
								background-image: url(../images/icon-kobetsu.svg);
							}
							@media only screen and (min-width: 769px) and (max-width: 1279px) {
								padding-left: calc(30/1280 * 100vw);
							}
						}
						&.icon-tel {
							&:before {
								background-image: url(../images/icon-tel.svg);
							}
						}
						&.icon-entry {
							&:before {
								background-image: url(../images/icon-entry.svg);
							}
						}
						&.icon-event {
							letter-spacing: -.05em;
							&:before {
								background-image: url(../images/icon-event.svg);
							}
						}
						&:after {
							content: "";
							display: block;
							width: 5px;
							height: 5px;
							border-right: 1px solid #fff;
							border-bottom: 1px solid #fff;
							position: absolute;
							top: calc(50% - 2px);
							transform: rotate(-45deg);
							right: 0;
						}						
					}
					@media only screen and (min-width: 769px) and (max-width: 1279px) {
						font-size: min(13px, calc(17/1280 * 100vw));
						height: min(48px, calc(58/1280 * 100vw));
						padding-left: min(8px, calc(10/1280 * 100vw));
						padding-right: min(10px, calc(12/1280 * 100vw));
					}
					@media screen and (max-width: 768px) {
						padding: 0;
						justify-content: center;
						& span {
							padding: 20px 0 0 !important;
							&:before {
								top: 0;
								left: 50%;
								transform: translateX(-50%);
							}
							&:after {
								display: none;
							}
						}
					}
				}
				& .sticky-menu-line {
					background-color: #06c755;
					border: 2px solid #06c755;
					height: 48px;
					display: flex;
					color: #fff;
					font-weight: bold;
					font-size: 14px;
					border-top-left-radius: 2px;
					border-bottom-left-radius: 2px;
					> span {
						padding: 0 10px;
						display: flex;
						align-items: center;
						&.line-logo {
							background: #fff;
							img {
								width: 27px;
								height: auto;
							}
						}
					}
					@media only screen and (min-width: 769px) and (max-width: 1279px) {
						font-size: min(13px, calc(17/1280 * 100vw));
						height: min(48px, calc(58/1280 * 100vw));
						span {
							padding-left: min(10px, calc(10/1280 * 100vw));
							padding-right: min(10px, calc(10/1280 * 100vw));
							&.line-logo {
								img {
									width: min(27px, calc(36/1280 * 100vw));
								}
							}
						}
					}
				}
				@media screen and (max-width: 768px) {
					gap: 4px;
					padding: 4px;
					& .sticky-menu:not(.sticky-menu-line),
					& .sticky-menu-line {
						font-size: 11px;
						line-height: calc(26/22);
						height: 53px;
					}
					& .sticky-menu:not(.sticky-menu-line) {
						flex: 1;
						background-color: #ec6a3e;
						/* &:nth-of-type(3) {
							width: auto;
							flex: 1;
						} */
						& span {
							padding:  0 5px;
							letter-spacing: 0;
						}
					}
					& .sticky-menu-line {
						border-width: 1px;
						> span {
							padding: 0 6px;
							flex-direction: column;
							justify-content: center;
							.big {
								font-size: 14px;
							}
						}
					}
				}
			}
		}

		#menu-sp-btn {
			display: none;
			@media only screen and (max-width: 768px) {
				display: block;
				position: relative;
				width: 80px;
				height: 100%;
			}
			
			.navToggle {
				display: block;
				position: absolute;
				left: 20px;
				top: calc(50% - 25px);
				width: 36px;
				height: 36px;
				cursor: pointer;
				z-index: 9999;
				text-align: center;
			}

			.navToggle span {
				display: block;
				position: absolute;    /* .navToggleに対して */
				width: 36px;
				background: #000;
				height: 4px;
				transition: .35s ease-in-out;
				left: 0;
			}
			
			.navToggle span:nth-child(1) {
				top: calc(50% - 13px);
			}
			
			.navToggle span:nth-child(2) {
				top: calc(50% - 2px);
			}
			
			.navToggle span:nth-child(3) {
				top: calc(50% + 9px);
			}

			/* 最初のspanをマイナス45度に */
			.navToggle.active span:nth-child(1) {
			top: calc(50% - 2px);
			left: 0;
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			transform: rotate(-45deg);
			}
			
			/* 2番目と3番目のspanを45度に */
			.navToggle.active span:nth-child(2),
			.navToggle.active span:nth-child(3) {
			top: calc(50% - 2px);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			transform: rotate(45deg);
			}

			.menu-btn-text {
				font-size: 10px;
				font-weight: bold;
				position: absolute;
				top: calc(50% + 11px);
				left: 20px;
				width: 36px;
				display: block;
				text-align: center;
			}

		}
		@media only screen and (max-width: 768px) {
			height: 88px;
			.inner {
				display: block;
				text-align: center;
				height: 88px;
				padding: 16px 8px 12px;
				width: auto;
				margin: 0 auto 0 0;
				.logo {
					margin-right: 0;
					width: 100%;
					img {
						max-width: 190px;
					}
				}
			}
		}

			
	}

	/*グローバルナビ*/
    & .dropmenu {
		position:relative;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 40px;
		@media only screen and (max-width: 1024px) {
			gap: calc(40/1280 * 100vw);
		}
		li {
			.in > ul {
				position:static !important;
				display:flex;
				flex-wrap:wrap;
				box-sizing:border-box;
				justify-content: center;
			}
		}
       & li:hover>a {
          color: initial;
          background-color: initial;
       }

       & li>div.more-menu {
			z-index: -1;
			pointer-events: none;
			opacity: 0;
			visibility: hidden;
			transition: .5s;
			position: absolute;
			left: 0;
			right: 0;
			background: rgba(255,255,255,.96);
			border-top: 2px solid #fabe00;
			box-shadow: 0px 1px 1px rgba(0,0,0,.2);
			padding: 12px 56px;
			& .in > ul {
				display: grid;
				li {
					margin-bottom: 0;
				}
				a {
					display: block;
					text-align: left;
					padding: 4px 0 4px 12px;
					position: relative;
					&:before {
						content: "";
						display: block;
						width: 5px;
						height: 5px;
						border-right: 1px solid #333;
						border-bottom: 1px solid #333;
						position: absolute;
						top: calc(50% - 2px);
						transform: rotate(-45deg);
						left: -2px;
					}
				}
			}
			& .in.about > ul {
				grid-template-columns: 25% 33% 1fr 15%;
			}
			& .in.campus > ul {
				grid-template-columns: 1fr 1fr 1fr;
			}
			& .in.admission > ul {
				display: flex;
				gap: 40px;
				flex-wrap: wrap;
			}
			& .in.daiju > ul {
				grid-template-columns: 1fr 2fr;
				gap: 40px;
				dt {
					background: #fabe00;
					color: #fff;
					font-size: 12px;
					text-align: left;
					font-weight: 600;
					padding: 4px 8px;
					margin-bottom: 8px;
				}
				dd {
					.header-child {
						padding-left: 1rem;
						li {
							a {
								&:before {
									background: #000;
									width: 3px;
									height: 3px;
									border-radius: 3px;
									border: 0;
									position: absolute;
									top: calc(50% - 1.5px);
									left: -2px;
								}
							}
						}
					}
				}
				.program {
					display: flex;
					flex-wrap: wrap;
					dt {
						width: 100%;
					}
					dd {
						flex-basis: 49%;
						text-align: left;
						font-size: 14px;
						&.no-arrow {
							margin: .25rem 0;
						}
					}
				}
			}
       }
       & li:hover>div.more-menu {
			top: 100%;
			z-index: 100;
			pointer-events: auto;
			visibility: visible;
			opacity: 1;

       }
       & li a {
          font-size: 14px !important;
          font-weight: normal !important;
          color: #333;
		  display: block;
		  text-align: left;
 
          &:hover {
             color: initial;
             background-color: initial;
          }
       }
        
        & .dropdown__flex {
            display: flex;
            justify-content: center;
            cursor: pointer;
        }

        & .dropdown__child {
            position: relative !important;
        }

        & .dropdown__child a  {
            text-align: left;
        }
 
       &>li {
			padding: 0!important;
			z-index:1001 !important;
			> a  {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 59px;
				span {
					position: relative;
					font-weight: 500;
					&::after {
						content: "";
						position: relative;
						display: block;
						width: 100%;
						height: 3px;
						transition-duration: 0.3s;
						margin-top: 2px;
					}
				}
			}
			&:hover {
				> a {
					span::after {
						background: #fabe00;
					}
				}
				.link-dropmenu {
					position: relative;
					&::before {
						content: "";
						display: block;
						background: #fabe00;
						width: 12px;
						height: 9px;
						clip-path: polygon(50% 0, 0 100%, 100% 100%);
						position: absolute;
						left: calc(50% - 6px);
						bottom: 0;
					}
				}
			}
			&:active {
				> a {
					span::after {
						background: #fabe00;
					}
				}
			}
       }
    }
}

.header-btm {
	display: flex;
	justify-content: center;
	@media screen and (max-width: 768px) {
		display: none;
	}
}


/*---------------------------------------------------------------------------------------
	contents
----------------------------------------------------------------------------------------*/

.wrap{
	clear: both;
	box-sizing: content-box;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5%;
	padding-right: 5%;
}

/* 下層ページ */
.pageInclude {
	margin: 1em auto 2em auto !important;
	text-align: left;
	font-size: 18px;
	.wrap {
		max-width: 960px;
	}
}

/* pan */
ol#pan{
	font-size: 1.4rem;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	padding-top: 15px;
	margin: 0 0 30px;
}
ol#pan li:before{
	content: ">";
	margin: 0 10px;
}
ol#pan li:first-child:before{
	content: none;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	ol#pan{
		font-size: 1.2rem;
		padding-top: 10px;
		margin: 0 0 15px;
	}
	.pageInclude .wrap {
		padding-left: 0;
		padding-right: 0;
	}
}

/* nav */
/* ul.nav1{
	clear: both;
	display: flex;
	border-top: 1px solid #d2d2d2;
	border-bottom: 1px solid #d2d2d2;
}
ul.nav1 li{
	display: flex;
	flex: 1;
	vertical-align: middle;
}
ul.nav1 li:not(:last-child){ border-right: 1px solid #d2d2d2;}
ul.nav1 li a{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	line-height: 1.4;
	padding: 8px 5px;
}
ul.nav1 li a.disabled{
	pointer-events: none;
	background-color: #dfdfdf;
	color: #aaa;
}
ul.nav1 li a.comingsoon {
	pointer-events: none;
	background-color: #efefef;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	color: #bbb;
}
ul.nav2{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	background: #fff;
	border-top: 1px solid #d2d2d2;
	z-index: 9999;
}
ul.nav2 li{
	display: flex;
	width: 25%;
	vertical-align: middle;
}
ul.nav2 li:not(:last-child){ border-right: 1px solid #d2d2d2;}
ul.nav2 li a,
ul.nav2 li #menu-sp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	font-size: 1.3rem;
	line-height: 1.2;
	padding: 8px 5px;
}
ul.nav2 li a:before,
ul.nav2 li #menu-sp-btn:before {
	content: "";
	display: inline-block;
	width: 100%;
	margin: 0 auto;
}
ul.nav2 li a.icon1:before{ height: 22px; background: url("../images/nav2-icon1.svg") center / 14px auto no-repeat;}
ul.nav2 li a.icon2:before{ height: 22px; background: url("../images/nav2-icon5.svg") center / 16px auto no-repeat;}
ul.nav2 li a.icon3:before{ height: 22px; background: url("../images/nav2-icon3.svg") center / 20px auto no-repeat;}
ul.nav2 li .icon4:before{ height: 22px; background: url("../images/nav2-icon4.svg") center / 25px auto no-repeat;}
ul.nav2 li .icon6:before{ height: 26px; background: url("../images/nav2-icon6.svg") center / 25px auto no-repeat;}
ul.nav2 li a.comingsoon{
	pointer-events: none;
	background-color: #efefef;
	filter: grayscale(100%);
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	color: #bbb;
	position: relative;
}
ul.nav2 li a.comingsoon:before{
	opacity: .5;
}
ul.nav2 li a.comingsoon:after{
	content: "近日公開";
	color: #333;
	font-size: 1.3rem;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% - .65rem);
} */

/* btn */
.btn-more{
	display: inline-block;
	min-width: 250px;
	color: #fff;
	line-height: 1.4;
	padding: 20px 30px;
	background: url("../images/arrows-right-white.svg") right 20px center / 7px auto no-repeat #faab00;
	@media screen and (max-width: 768px) {
		padding: 15px 30px;
	}
}


/*---------------------------------------------------------------------------------------
	footer
----------------------------------------------------------------------------------------*/

footer{
	clear: both;
	padding-top: 60px;
}

footer div.fnav.pconly{
	padding: 0 3%;
	overflow: hidden;
}
footer div.fnav.pconly ul.fnav1{
	display: table;
	table-layout: fixed;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 20px;
}
footer div.fnav.pconly ul.fnav1 li{
	display: table-cell;
	border-right: 1px solid #575757;
}
footer div.fnav.pconly ul.fnav1 li:first-child{ border-left: 1px solid #575757;}
footer div.fnav.pconly ul.fnav1 a{
	display: block;
	line-height: 30px;
}
footer div.fnav.pconly ul.fnav1 a.disabled{
	pointer-events: none;
	opacity: .3;
}
footer div.fnav.pconly ul.fnav2{
	margin-bottom: 30px;
}
footer div.fnav.pconly ul.fnav2 li{
	display: inline-block;
	vertical-align: top;
}
footer div.fnav.pconly ul.fnav2 li a{
	display: inline-block;
	font-size: 1.4rem;
	line-height: 30px;
	padding: 0 1em;
}
footer div.fnav.pconly ul.fnav2 a.disabled{
	pointer-events: none;
	opacity: .3;
}
footer dl.about{
	border-top: 1px solid #a0a0a0;
	padding: 40px 5% 20px;
}
footer dl.about dt{
	display: inline-block;
	vertical-align: middle;
	max-width: 250px;
	padding-bottom: 20px;
}
footer dl.about dt .ninka{
	font-size: 12px;
	display: inline-block;
	padding-left: 48px;
	margin-top: 4px;
}
footer dl.about dd{
	display: inline-block;
	vertical-align: middle;
	padding-left: 30px;
	font-size: 1.4rem;
	text-align: left;
	padding-bottom: 20px;
}


footer dl.about dd dl{
	width: 100%;
	margin: 0;
	padding: 0;
}

footer dl.about dd dl dt{
	width: 16rem;
	margin: 0 0 5px;
	padding: 0;
}

footer dl.about dd dl dd{
	width: 67%;
	margin: 0 0 5px;
	padding: 0;
}

@media screen and (max-width: 768px) {
	footer dl.about dd {
		width: 100%;
	}
}




footer p.copy{
	clear: both;
	color: #fff;
	background: #faab00;
	font-size: 1.3rem;
	line-height: 40px;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	footer{
		padding-top: 30px;
		margin-bottom: 100px;
	}
	footer ul.fnav.sponly{
		border-top: 1px solid #161616;
	}
	footer ul.fnav.sponly li{
		border-bottom: 1px solid #161616;
	}
	footer ul.fnav.sponly li a{
		display: block;
		font-size: 1.7rem;
		text-align: left;
		padding: 10px 1rem;
	}
	footer dl.about{
		border-top: none;
		padding: 30px 5% 20px;
	}
	footer dl.about dt{
		display: block;
		max-width: 250px;
		margin: 0 auto;
	}
	footer dl.about dd{
		display: block;
		padding-left: 0;
		font-size: 1.4rem;
		text-align: center;
		padding-bottom: 0;
	}
	footer p.copy{
		color: #323232;
		background: none;
		font-size: 1.2rem;
		line-height: 1.4;
	}
}


/* 新着情報 */

#top-cont2 dl{
	clear: both;
	padding: 20px 0;
	text-align: left;
	border-bottom: 1px solid #d2d2d2;
}
#top-cont2 dl dt{
	font-size: 1.4rem;
	margin-bottom: 10px;
}
#top-cont2 dl dt span.cate{
	display: inline-block;
	padding: 2px 1.5rem;
	margin-left: 1rem;
	color: #fff;
	font-size: 1.3rem;
	background: #575757;
}
#top-cont2 dl dt span.new{
	display: inline-block;
	padding: 2px 1.5rem;
	margin-left: 1rem;
	color: #fff;
	font-size: 1.3rem;
	background: #faab00;
}
#top-cont2 p{
	clear: both;
	padding: 40px 0 0;
}
#top-cont3{
	margin-bottom: 80px;
	margin-top: 60px;
}
#top-cont3 img{
	width: 100%;
	max-width: 1400px;
}
#top-cont4{
	padding: 0 3%;
}
#top-cont4 ul{
	max-width: 1100px;
	margin: 0 auto;
}
#top-cont4 ul li{
	float: left;
	width: 49%;
	margin-bottom: 2%;
}
#top-cont4 ul li:nth-child(2n+1){ clear: left; margin-right: 2%;}
#top-cont4 ul li p{
	font-size: 1.8rem;
	line-height: 1.4;
	padding: 5px 30px 5px 1.5rem;
	background: url("../images/arrows-right.svg") right 20px center / 5px auto no-repeat;
}
#top-cont5{
	display: table;
	width: 90%;
	padding-top: 60px;
	padding-bottom: 80px;
}
#top-cont5 h2{
	display: table-cell;
	vertical-align: middle;
	font-size: 2.4rem;
	font-weight: normal;
	margin-bottom: 30px;
}
#top-cont5 h2 strong{
	font-size: 4.7rem;
	font-weight: normal;
}
#top-cont5 div{
	display: table-cell;
	vertical-align: middle;
	width: 51%;
	line-height: 2.3;
}
#top-cont5 div p{
	text-align: left;
	margin-bottom: 15px;
}
#top-cont5 div dl{
	font-size: 1.7rem;
	text-align: left;
}
#top-cont6{
	clear: both;
	position: relative;
	padding: 50px 0;
}

#top-cont6 dl{
	clear: both;
	padding: 20px 0;
	text-align: left;
	border-bottom: 1px solid #d2d2d2;
}
#top-cont6 dl dt{
	font-size: 1.4rem;
	margin-bottom: 10px;
}
#top-cont6 dl dt span.new{
	display: inline-block;
	padding: 2px 1.5rem;
	margin-left: 1rem;
	color: #fff;
	font-size: 1.3rem;
	background: #faab00;
}
#top-cont6 p{
	clear: both;
	padding: 40px 0 0;
}

#contact{
	padding-top: 50px;
	padding-bottom: 70px;
	color: #fff;
	background: url("../images/top-cont6-bg.png") center top / 1100px auto no-repeat #575757;
}
#contact h3{
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 1.4;
	margin-bottom: 30px;
}
#contact h3 span{
	font-size: 1.6rem;
}
#contact ul{
	overflow: hidden;
}
#contact ul li{
	float: left;
	width: 23.5%;
}
#contact ul li:not(:last-child){ margin-right: 2%;}
#contact ul li a{
	display: block;
	text-align: left;
	padding: 25px 30px 25px 50px;
}
#contact ul li a.comingsoon{
	pointer-events: none;
	background-color: rgba(255,255,255,.2);
	position: relative;
}
#contact ul li a.comingsoon:after{
	content: "近日開始";
	position: absolute;
	color: #fff;
	font-size: 1.5rem;
	letter-spacing: .1rem;
	text-align: center;
	left: 0;
	right:0;
	top: calc(50% - 1rem);
}
#contact .m-contact__btns__item {
	margin-bottom: 10px;
	margin: 30px auto;
}
#contact .m-contact__btns__item__text {
	font-size: 2rem;
	line-height: 1;
	color: #fff;
	width: 37%;
}
#contact .m-contact__btn {
	width: 100%;
	height: 56px;
	font-weight: 700;
}
#contact .m-contact__btn--low.c-btn {
	height: 65px;
	margin: 0 5px 0;
}
#contact .m-contact__btn {
	width: 60%;
	font-weight: 700;
}
#contact .c-btn__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
	height: 100%;
}
#contact .c-btn__item--blue:visited {
	color: #fff;
}
#contact .c-btn__item--bdwhite {
	border: 2px solid #fff;
	border-radius: 10px;
}
#contact .c-btn__ic {
	display: inline-block;
	position: relative;
	color: #fff;
	font-size: 23px;
	padding: -4px 0px;
	margin-left: 30px;
}
#contact .m-contact__btn__call:after {
	background-image: url("../images/tel_icon.png");
	background-size: 35px;
	background-repeat: no-repeat;
}
#contact .c-btn__ic:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-47%);
	left: -40px;
	width: 15%;
	height: 36px;
}

#contact .m-contact__btns__item__note {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1;
	color: #b6bbe0;
}
#contact .m-contact__btn a[href*="tel:"] {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}
#contact .m-contactflex {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 62%;
	margin: auto;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 1000px) {
	#contact ul li{
		float: left;
		width: 48%;
		margin-bottom: 2%;
	}
	#contact ul li:nth-child(2n){ margin-right: 2%;}
}
@media screen and (max-width: 768px) {
	#top-cont1 .slick-slide p{
		padding: 7.5px 0;
		color: #fff;
		font-size: 1.7rem;
		line-height: 1.4;
		background: #faab00;
	}
	#top-cont1 .slick-slide p.oc{
		padding: 7px 0;
		color: #fff;
		font-size: 1.7rem;
		line-height: 1.4;
		background: #DF1111;
	}
	#top-cont1 .slick-dots li{
		margin: 0 4px;
	}
	#top-cont1 .slick-dots li button:before{
		line-height: 10px;
		width: 10px;
		height: 10px;
	}
	#top-cont2 dl{
		padding: 15px 0;
	}
	#top-cont2 p{
		padding: 20px 0 50px;
	}
	#top-cont3{
		margin-bottom: 10px;
		margin-top: 10px;
	}
	#top-cont3 img{
		max-width: inherit;
	}
	#top-cont4{
		padding: 0;
	}
	#top-cont4 ul li{
		float: none;
		width: auto;
		margin-bottom: 2%;
	}
	#top-cont4 ul li:nth-child(2n+1){ margin-right: 0;}
	#top-cont4 ul li p{
		font-size: 1.8rem;
		line-height: 1.4;
		padding: 5px 30px 5px 1.5rem;
		background: url("../images/arrows-right.svg") right 20px center / 5px auto no-repeat;
	}
	#top-cont5{
		display: block;
		width: auto;
		padding-top: 50px;
		padding-bottom: 60px;
	}
	#top-cont5 h2{
		display: block;
		font-size: 2.1rem;
		margin-bottom: 20px;
	}
	#top-cont5 div{
		display: block;
		width: auto;
		line-height: 1.8;
	}

	#top-cont6 dl{
		padding: 15px 0;
	}
	#top-cont6 p{
		padding: 10px 0;
	}
	#contact{
		padding-top: 30px;
		padding-bottom: 30px;
		background: url("../images/top-cont6-bg-sp.png") right top / 170px auto no-repeat #575757;
	}
	#contact h3{
		font-size: 2.2rem;
		margin-bottom: 20px;
	}
	#contact h3 span{
		font-size: 1.3rem;
	}
	#contact ul li{
		float: none;
		width: auto;
		margin-bottom: 10px;
	}
	#contact ul li:nth-child(2n),
	#contact ul li:not(:last-child){margin-right: 0;}
	#contact ul li a.icon1{ background: url("../images/contact-icon1.svg") left 30px center / 16px auto no-repeat, url("../images/arrows-right.svg") right 20px center / 8px auto no-repeat #fff;}
	#contact ul li a.icon2{ background: url("../images/contact-icon2.svg") left 29px center / 18px auto no-repeat, url("../images/arrows-right.svg") right 20px center / 8px auto no-repeat #fff;}
	#contact ul li a.icon3{ background: url("../images/contact-icon3.svg") left 26px center / 23px auto no-repeat, url("../images/arrows-right.svg") right 20px center / 8px auto no-repeat #fff;}
	#contact ul li a.icon4{ background: url("../images/contact-icon4.svg") left 28px center / 20px auto no-repeat, url("../images/arrows-right.svg") right 20px center / 8px auto no-repeat #fff;}
	#contact ul li a.comingsoon{
		background-color: rgba(255,255,255,.2);
	}
	#contact .m-contact__btns__item {
		width: 252px;
		margin-bottom: 10px;
	}
	#contact .m-contact__btns__item__text {
		font-size: 2rem;
		line-height: 1;
		color: #fff;
		width: auto;
	}
	#contact .m-contact__btn {
		width: 100%;
		height: 56px;
		font-weight: 700;
	}
	#contact .m-contact__btn--low.c-btn {
		margin: 12px 0 0;
		height: 57px;
		/* border-radius: 9px; */
	}
	#contact .m-contact__btn {
		width: 100%;
		font-weight: 700;
	}
	#contact .c-btn__item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		height: 100%;
	}
	#contact .c-btn__item--blue:visited {
		color: #fff;
	}
	#contact .c-btn__item--bdwhite {
		border: 2px solid #fff;
		border-radius: 10px;
	}
	#contact .c-btn__ic {
		display: inline-block;
		position: relative;
		color: #fff;
		font-size: 20px;
	}
	#contact .m-contact__btn__call:after {
		background-image: url("../images/tel_icon.png");
		background-size: 35px;
		/* background: bottom; */
		background-repeat: no-repeat;
	}
	#contact .c-btn__ic:after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-47%);
		left: -39px;
		width: 15%;
		height: 35px;
	}
	#contact .m-contact__btns__item__note {
		margin-top: 12px;
		font-size: 14px;
		line-height: 1;
		color: #b6bbe0;
	}
	#contact .m-contact__btns__item {
		width: 100%;
	}
	#contact .c-btn__ic--call {
    padding-left: 0px;
 }
 #contact .m-contact__btn a[href*="tel:"] {
	pointer-events: auto;
	cursor: pointer;
	text-decoration: none;
}
}






/*---------------------------------------------------------------------------------------
	about
----------------------------------------------------------------------------------------*/

/* index */
#about h2{
	font-size: 1.6rem;
	line-height: 2;
	font-weight: bold;
	margin-bottom: 10px;
}
#about h2 strong{
	font-size: 2rem;
}
#about h3{
	font-size: 1.8rem;
	line-height: 2;
	font-weight: bold;
	margin-bottom: 30px;
}
#about h3 strong{
	font-size: 2.2rem;
}
#about p{
	text-align: left;
}
#about p .btn{
	text-align: center;
}
#about .outline h3{
	font-size: 2.2rem;
	text-align: left;
}
#about .outline ul{
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 5%;
}
#about .outline ul li{
	text-align: left;
	padding-left: 50px;
	position: relative;
	margin-bottom: 40px;
}
#about .outline ul li:before{
	content: "";
	position: absolute;
	top: 5px;
	left: 20px;
	display: block;
	width: 16px;
	height: 16px;
	background: #FABE00;
}
#about .wrap_about_linkmenu {
	display: flex;
	flex-wrap: wrap;
}
#about .blk_about_linkmenu {
	width: 44%;
	background-color: #e7e7e7;
	padding: 10px 10px 15px;
	margin-bottom: 48px;
	margin-left: 3%;
	margin-right: 3%;
}
#about .blk_about_linkmenu .wrap_thumb {
	background-color: #fff;
	padding: 10px;
	display: flex;
	align-items: center;
	margin-bottom: 15px
}
#about .blk_about_linkmenu figure {
	width: 30%;
}
#about .blk_about_linkmenu figure img {
	width: 100%;
}
#about .blk_about_linkmenu .ttl_about_linkmenu {
	flex: 1;
	text-align: left;
	padding-left: 20px;
}
#about .blk_about_linkmenu .ttl_about_linkmenu h3 {
	margin-bottom: 0;
	font-size: 24px;
	line-height: 1.4;
}
#about .blk_about_linkmenu .ttl_about_linkmenu h3 big {
	font-size: 72px;
	color: #faab00;
	font-weight: normal;
	vertical-align: -12px;
	margin-left: 4px;
}
#about .blk_about_linkmenu .ttl_about_linkmenu p {
	font-weight: bold;
}
#about .blk_about_linkmenu .lead_about_linkmenu {
	text-align: left;
	margin-bottom: 10px;
	font-size: 16px;
	padding: 0 10px;
}
#about .blk_about_linkmenu .txt_about_linkmenu {
	font-size: 14px;
	padding: 0 10px;
	margin-bottom: 10px;
}
#about .blk_about_linkmenu .btn_wrap {
	text-align: right;
}
#about .blk_about_linkmenu .btn_wrap .btn_readmore {
	text-align: right;
	font-size: 18px;
	padding: .3em 3em .3em 0;
	position: relative;
	display: inline-block;
}
#about .blk_about_linkmenu .btn_wrap .btn_readmore:after {
	content: ">>";
  display: inline-block;
  font-size: 18px;
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translate(0, -50%);
  transition: .2s;
}
#about .blk_about_linkmenu .btn_wrap .btn_readmore:hover:after {
	transform: translate(0.2em, -50%);
}


/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#about h2{
		font-size: 1.4rem;
	}
	#about h2 strong{
		font-size: 1.8rem;
	}
	#about h3{
		font-size: 1.6rem;
		margin-bottom: 15px;
	}
	#about h3 strong{
		font-size: 2.0rem;
	}
	#about .outline h4{
		font-size: 2.0rem;
	}
	#about .outline ul li{
		padding-left: 40px;
		margin-bottom: 20px;
	}
	#about .outline ul li:before{
		top: 5px;
		width: 16px;
		height: 16px;
		left: 8px;
	}

	#about .wrap_about_linkmenu {
		display: block;
		margin-bottom: 40px;
		margin-top: 40px;
	}
	#about .blk_about_linkmenu {
		width: 100%;
		padding: 10px;
		margin:0 0 24px;
	}
	#about .blk_about_linkmenu .ttl_about_linkmenu {
		padding-left: 15px;
	}
	#about .blk_about_linkmenu .ttl_about_linkmenu h3 {
		font-size: 22px;
	}
	#about .blk_about_linkmenu .ttl_about_linkmenu h3 big {
		font-size: 56px;
	}
	#about .blk_about_linkmenu .lead_about_linkmenu {
		font-size: 18px;
		padding: 0 10px;
	}
	#about .blk_about_linkmenu .txt_about_linkmenu {
		font-size: 16px;
		padding: 0 10px;
	}

}



/* chairman */
#about-chairman .wrap{
	text-align: left;
}
#about-chairman h3{
	font-size: 2.2rem;
	line-height: 1.8;
	font-weight: bold;
	text-align: center;
}
#about-chairman figure{
	text-align: center;
	padding: 0 10%;
}
#about-chairman figure img{
	margin-bottom: 10px;
}
#about-chairman figure figcaption{
	font-size: 2rem;
	text-align: left;
	display: inline-block;
}
#schoollife .box,
#about-chairman .box,
#about-headmaster .box,
#about-message .box {
	clear: both;
	overflow: hidden;
	padding: 0 20px;
}
#about-chairman .box p,
#about-headmaster .box p {
	margin-right: 5px;
	margin-left: 5px;
}
#about-chairman .box .leftcol,
#about-headmaster .box .leftcol,
#about-message .box .leftcol {
	float: left;
	width: 40%;
}
#about-chairman .box .rightcol,
#about-headmaster .box .rightcol,
#about-message .box .rightcol {
	float: right;
	/* float: none; */
	width: 60%;
	/* width: 100%; */
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#about-chairman h3{
		font-size: 2rem;
	}
	#about-chairman figure{
		text-align: center;
		padding: 0 10%;
	}
	#about-chairman figure img{
		margin-bottom: 5px;
	}
	#about-chairman figure figcaption{
		font-size: 1.8rem;
	}
	#schoollife .box,
	#about-chairman .box,
	#about-headmaster .box,
	#about-message .box {
    padding: 0;
}
#about-chairman .box .leftcol,
#about-headmaster .box .leftcol,
#about-message .box .leftcol {
	width: 100%;
}
#about-chairman .box .rightcol,
#about-headmaster .box .rightcol,
#about-message .box .rightcol {
	float: none;
	width: 100%;
}
}



/* headmaster */
#about-headmaster .wrap{
	text-align: left;
}
#about-headmaster h3{
	font-size: 2.2rem;
	line-height: 1.8;
	font-weight: bold;
	text-align: center;
}
#about-headmaster figure{
	text-align: center;
	padding: 0 10%;
}
#about-headmaster figure img{
	margin-bottom: 10px;
	width: 100%;
	max-width: 500px;
}
#about-headmaster figure figcaption{
	font-size: 2rem;
	text-align: left;
	display: inline-block;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#about-headmaster h3{
		font-size: 2rem;
	}
	#about-headmaster figure img{
		margin-bottom: 5px;
	}
	#about-headmaster figure figcaption{
		font-size: 1.8rem;
	}
}



/* feature */
#about-feature .wrap{
	text-align: left;
}
#about-feature h3{
	font-size: 2.2rem;
	font-weight: normal;
}
#about-feature .wrap figure{
	text-align: center;
}
#about-feature .box1 {
	display: flex;
	-webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
	justify-content: space-between;
}
#about-feature .box1_center {
	align-items: center;
}
#about-feature .box1_last {
	margin-top: 50px;
}
#about-feature .photo-area {
	max-width: 100%;
	/* margin-top: 20px; */
	flex: 1;
	margin-right: 40px;
}
#about-feature .photo-area img {
	padding-bottom: 5px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
img.wauto {
	width: auto;
	max-width: 100%;
	height: auto;
}
#about-feature .box1 .contents {
	flex-basis: 50%;
	text-align: left;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#about-feature h3{
		font-size: 2rem;
		margin-top: 0;
	}
	#about-feature .box1 {
    flex-direction: column;
}
#about-feature .box1_last {
	margin-top: 0px;
}
#about-feature .box1:nth-child(2) {
	flex-direction: column-reverse;
}
#about-feature .photo-area {
	margin-right: 0;
	margin-left: 0 !important;
}
#about-feature .photo-area img {
	padding-bottom: 0px;
}
}



/* qualification */
#about-qualification .wrap{
	text-align: left;
}
#about-qualification h3{
	font-size: 2.2rem;
	font-weight: bold;
}
#about-qualification .read{
	font-size: 2.2rem;
	font-weight: bold;
	border: 3px solid #fabe00;
	padding: 15px 20px;
}
#about-qualification h4{
	font-size: 2.2rem;
	text-align: left;
	padding-right: 15%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#about-qualification h4 span{
	padding: 0 3% 5px;
	display: block;
	border-bottom: 1px solid #9f9f9f;
	box-sizing: content-box;
}
#about-qualification ul{
	padding: 0 5%;
	overflow: hidden;
	margin-bottom: 1em;
}
#about-qualification ul li{
	margin: 0 0 1em 1em;
	list-style: disc;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#about-qualification h3{
		font-size: 2rem;
	}
	#about-qualification .read{
		font-size: 2rem;
		padding: 5px 10px;
		border: 2px solid #fabe00;
	}
	#about-qualification h4{
		font-size: 2rem;
		text-align: left;
		padding-bottom: 5px;
	}
	#about-qualification h4 span{
		padding: 0 6% 5px;
	}
}



/* message */
#about-message .wrap{
	text-align: left;
}
#about-message h3{
	font-size: 1.6rem;
	text-align: left;
	padding-right: 2%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#about-message h3 span{
	padding: 0 2% 15px;
	display: block;
	border-bottom: 1px solid #9f9f9f;
	box-sizing: content-box;
}
#about-message h3 strong{
	font-size: 2.2rem;
}
#about-message figure{
	text-align: center;
	padding: 0 10%;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#about-message h3{
		font-size: 1.4rem;
		text-align: left;
		padding-bottom: 5px;
	}
	#about-message h3 span{
		padding: 0 6% 10px;
	}
	#about-message h3 strong{
		font-size: 2rem;
	}
	#about-message figure {
    padding: 0 2%;
}
}



/* staff */
#about-staff{
	text-align: left;
}
#about-staff h2{
	text-align: center;
}
#about-staff h3{
	font-size: 2.2rem;
}
#about-staff h4{
	font-size: 1.6rem;
	font-weight: bold;
	text-align: left;
	padding-right: 2%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#about-staff h4 span{
	padding: 0 2% 10px;
	display: block;
	border-bottom: 1px solid #9f9f9f;
	box-sizing: content-box;
}
#about-staff h4 em{
	font-size: 2.2rem;
	font-weight: bold;
	color: #004098;
}
#about-staff h4 strong{
	font-size: 2.2rem;
}
#about-staff figure{
	text-align: center;
}


#about-staff .box1 {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}
#about-staff .photo-area {
	max-width: 100%;
	/* margin-top: 20px; */
	flex: 1;
	margin-right: 20px;
}
#about-staff .photo-area img {
	padding-bottom: 5px;
}
#about-staff .box1 .contents {
	flex-basis: 50%;
	text-align: left;
}
#about-staff .box1 p {
	margin-right: 5px;
	margin-left: 5px;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#about-staff h3{
		font-size: 1.8rem;
	}
	#about-staff h4{
		font-size: 1.4rem;
		text-align: left;
		padding-right: 0%;
		padding-bottom: 5px;
	}
	#about-staff h4 span{
		padding: 0 2% 10px;
	}
	#about-staff h4 em{
		font-size: 1.8rem;
	}
	#about-staff h4 strong{
		font-size: 1.8rem;
	}
	#about-staff .box1 {
    flex-direction: column-reverse;
}
#about-staff .box1:nth-of-type(2n) {
	flex-direction: column;
}
#about-staff .photo-area {
	margin-right: 0;
}
#about-staff .photo-area img {
	padding-bottom: 0px;
}
}


/* concept */
#about-concept h3{
	font-size: 2.0rem;
}
#about-concept h4{
	font-size: 2.0rem;
	padding: 0 ;
	margin-top: 40px;
}
#about-concept h4 span{
	display: block;
	padding-top: 30px;
	border-top: 4px solid #FFC000;
}
#about-concept h4.bd-blue span{
	border-top: 4px solid #2F5597;
}
#about-concept p{
	text-align: left;
}
#about-concept .f-blue{
	color: #2F5597;
	font-weight: bold;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#about-concept h3{
		font-size: 1.8rem;
	}
	#about-concept h4{
		font-size: 1.8rem;
		padding: 0;
	}
	#about-concept h4 span{
		border-top: 2px solid #FFC000;
		padding-top: 20px;
	}
	#about-concept h4.bd-blue span{
		border-top: 2px solid #2F5597;
	}
}


/*---------------------------------------------------------------------------------------
	schoollife
----------------------------------------------------------------------------------------*/
/* index */
#schoollife > h2:not(.subtitle){
	font-size: 1.6rem;
	line-height: 2;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}
#schoollife > h2 strong{
	font-size: 2rem;
}
#schoollife .subtitle {
	text-align: center;
}
#schoollife .course_certification {
	display: flex;
	margin-bottom: 40px;
}
#schoollife .heading_certification {
	color: #004098;
	border-left: 1px solid #004098;
	border-right: 1px solid #004098;
	padding: 0 20px;
	width: 25%;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-weight: bold;
	text-align: center;
	margin-right: 30px;
}
#schoollife .content_certification {
	flex:1;
}
#schoollife .content_certification small {
	font-size: 13px;
}
#schoollife.dataSchientist_wrap .note_right{
	text-align: right;
	font-size: 14px;
	margin-top: 50px;
}

#schoollife .box1 {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
  	-webkit-box-direction: reverse;
  	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin-bottom: 40px;
}
#schoollife .box3 {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}
#schoollife .photo-area {
	max-width: 100%;
	/* margin-top: 20px; */
	margin-right: 40px;
	flex: 1;
}
#schoollife .photo-area img {
	padding-bottom: 5px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
#schoollife .box1 .contents {
	-ms-flex-preferred-size:47%;
	flex-basis: 47%;
	/* width: 47%; */
	text-align: left;
	margin-left: 20px;
}
#schoollife .box3 p,
#schoollife .box1 p {
	margin-right: 5px;
	margin-left: 5px;
}
#schoollife ul.box2 {
		display:-webkit-box;
  	display:-ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
	-ms-flex-pack: justify;
		justify-content: space-between;
		/* align-items: center; */
		max-width: 100%;
}
#schoollife ul.box2 li {
	width: 48%;
	text-align: center;
	font-weight: bold;
	padding: 1.6em 1em 2em;
	box-sizing: border-box;
	margin: 1.3em 0;
	position: relative;
	height: 105px;
}
.child {
	display: inline-block;
	vertical-align: middle;
}
#schoollife ul.pageInclude__dl {
	flex-direction: initial;
	flex-wrap: wrap;
}
#schoollife ul.pageInclude__dl li {
	width: 48%;
}
#schoollife .pageInclude__txt {
	margin-top: 0;
}
.left_pc {
	padding-left: 0%!important;
	transform: translateX(0)!important;
}
.box1_dummy {
	width: 90%;
}
#schoollife p.pageInclude__dt {
	margin-left: 0;
}
.pageInclude__catch3-point {
	margin-left: 1em;
}



/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#schoollife.daijuProgram_wrap h2 {
		margin-bottom: 40px;
	}
	#schoollife.studyAbroad_wrap h2 {
		margin-bottom: 40px;
	}
	#schoollife.dataSchientist_wrap h2 {
		margin-bottom: 40px;
	}
	#schoollife.entrePlanner_wrap h2 {
		margin-bottom: 40px;
	}
	#schoollife .course_certification {
		display: block;
	}
	#schoollife .heading_certification {
		border-top: 1px solid #004098;
		border-bottom: 1px solid #004098;
		padding: 8px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 0;
		margin-bottom: 10px;
	}
	#schoollife .content_certification {
		flex:1;
	}
	#schoollife .content_certification small {
		font-size: 13px;
	}
	#schoollife.dataSchientist_wrap .note_right{
		text-align: left;
		font-size: 12px;
	}
	#schoollife .box1 {
		flex-direction: column-reverse;
		margin-bottom: 30px;
}
#schoollife .box3 {
	flex-direction: column;
	margin-bottom: 30px;
}
/* #schoollife .box1:nth-of-type(2n) {
	flex-direction: column;
} */
#schoollife .photo-area {
	margin-right: 0!important;
	margin-left: 0!important;
}
#schoollife .photo-area img {
	padding-bottom: 0px;
}
#schoollife .box1 .contents {
	margin-left: 0;
}
#schoollife ul.box2 li {
	width: 100%;
	margin: 0.8em 0;
	padding: 1em;
	height: auto;
}

#schoollife ul.pageInclude__dl li {
	width: 100%;
	margin: 0 auto 15px;
	padding: .75em 0;
}
#schoollife .pageInclude__txt {
	margin-top: 1em;
}
.left_pc {
	padding-left: 5%!important;
	transform: translateX(-5%)!important;
}
.box1_dummy {
	width: 100%;
}
p.pageInclude__dt {
	margin-bottom: 1em;
}
#schoollife .pageInclude__catch3 {
	width: 111%;
}
.pageInclude__catch3-point {
	margin-left: 0;
}
}

/*---------------------------------------------------------------------------------------
	admission
----------------------------------------------------------------------------------------*/
#about-info > h2.subtitle strong{
	font-size: 2.4rem;
}
#about-info .subtitle {
	text-align: center;
}
#about-info span.caution {
	color: red;
}
#about-info .application_btn {
	cursor: pointer;
	width: 33%;
	padding: 15px 24px 15px 0px;
	background: #FFD966;
	text-align: center;
	position: relative;
	font-weight: bold;
	font-size: 1.7rem;
	margin: 5% auto 1%;
	letter-spacing: 0.08em;
}
#about-info .application_btn a {
	color: #000;
	padding: 14px 28px;
	background: url(../images/arrows-right_bl.svg) right center / 7px auto no-repeat;
}

#about-info .application_btn:hover {
	opacity: 0.8;
	-webkit-transition: all .2s;
	transition: all .2s;
}
@media screen and (max-width: 768px) {
	#about-info .application_btn {
    width: 85%;
    padding: 12px 16px 12px 0px;
    font-size: 1.6rem;
    margin: 12% auto 6%;
    letter-spacing: 0.08em;
 }
 #about-info .application_btn a {
	color: #000;
	padding: 14px 20px;
	background: url(../images/arrows-right_bl.svg) right center / 7px auto no-repeat;
}
}


/*---------------------------------------------------------------------------------------
	policy
----------------------------------------------------------------------------------------*/

/* index */
#policy h2{
	font-size: 1.6rem;
	line-height: 2;
	font-weight: bold;
	margin-bottom: 10px;
}
#policy h2 strong{
	font-size: 2rem;
}
#policy p{
	text-align: left;
}
#policy ol{
	text-align: left;
}
#policy ol li{
	position:relative;
	padding-left:1.5em;
	text-align: left;
	box-sizing:border-box;
}
#policy ol li:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 1.5em;
	height: 1.5em;
}
#policy ol.plan + p{
	text-align: right;
}
#policy ol.plan li:nth-of-type(1):before{ content: "1.";}
#policy ol.plan li:nth-of-type(2):before{ content: "2.";}
#policy ol.plan li:nth-of-type(3):before{ content: "3.";}
#policy ol.plan li:nth-of-type(4):before{ content: "4.";}
#policy ol.plan li:nth-of-type(5):before{ content: "5.";}
#policy ol.purpose li:nth-of-type(1):before{ content: "①";}
#policy ol.purpose li:nth-of-type(2):before{ content: "②";}
#policy ol.purpose li:nth-of-type(3):before{ content: "③";}
#policy ol.purpose li:nth-of-type(4):before{ content: "④";}

#policy ol.purpose ul li{
	position:relative;
	padding-left:1em;
	text-align: left;
	box-sizing:border-box;
}
#policy ol.purpose ul li:before{
	content: "・" !important;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 1em;
	height: 1.5em;
}

#policy .outline dl{
	width: 96%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	border: solid 1px #cccccc;
}
#policy .outline dl dt{
	text-align: center;
	padding: 1em;
	background: #eeeeee;
	box-sizing: border-box;
	font-size: 125%;
	font-weight: bold;
}
#policy .outline dl dd{
	text-align: left;
	padding: 0.5em 2em;
	background: #ffffff;
	box-sizing: border-box;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#policy h2{
		font-size: 1.6rem;
	}
	#policy h2 strong{
		font-size: 2rem;
	}
}






/*---------------------------------------------------------------------------------------
	sitemap
----------------------------------------------------------------------------------------*/

/* index */
#sitemap h2{
	font-size: 1.6rem;
	line-height: 2;
	font-weight: bold;
	margin-bottom: 10px;
}
#sitemap h2 strong{
	font-size: 2rem;
}
#sitemap ul li{
	position:relative;
	padding-left:1em;
	line-height: 2.0;
	text-align: left;
	box-sizing:border-box;
}
#sitemap ul li:first-of-type:before{
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0.375em;
	display: block;
	width: 0.25em;
	height: 1.5em;
	background: #FABE00;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#sitemap h2{
		font-size: 1.6rem;
	}
	#sitemap h2 strong{
		font-size: 2rem;
	}
}





/*---------------------------------------------------------------------------------------
	corporation
----------------------------------------------------------------------------------------*/

/* index */
#corporation h2{
	font-size: 1.6rem;
	line-height: 2;
	font-weight: bold;
	margin-bottom: 10px;
}
#corporation h2 strong{
	font-size: 2rem;
}
#corporation p{
	text-align: left;
}
#corporation ul{
	text-align: left;
}
#corporation ul li{
	position:relative;
	padding:1.5em;
	text-align: left;
	box-sizing:border-box;
	border-bottom: solid 1px #cccccc;
}
#corporation ul li dl{
	display:flex;
}
#corporation ul li dl dt{
	width: 20%;
	font-weight: bold;
}
#corporation ul li dl dd{
	width: 80%;
}

#corporation .outline dl{
	width: 96%;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	border: solid 1px #cccccc;
}
#corporation .outline dl dt{
	text-align: center;
	padding: 1em;
	background: #eeeeee;
	box-sizing: border-box;
	font-weight: bold;
}
#corporation .outline dl dd{
	text-align: center;
	padding: 2em;
	font-size: 125%;
	background: #ffffff;
	font-weight: bold;
	box-sizing: border-box;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#corporation h2{
		font-size: 1.6rem;
	}
	#corporation h2 strong{
		font-size: 2rem;
	}
}
#corporation ul li dl{
	display:block;
}
#corporation ul li dl dt{
	width: 100%;
	font-weight: bold;
}
#corporation ul li dl dd{
	width: 100%;
}



/*---------------------------------------------------------------------------------------
	SP メニュー
----------------------------------------------------------------------------------------*/
.sp_gnav {
	position: fixed;
}
.sp_gnav.hide{
	opacity: 0;
	visibility: hidden !important;
	overflow: hidden !important;
	transition: all .3s ease-in;
}
.sp_gnav.head_animation {
	transition: all .3s ease-in;
	display: block;
	opacity: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	overflow: auto;
	width: 100%;
	height: 100%;
}
.sp_gnav .sp_gnav-head {
	display: flex;
	align-items: center;
	padding: 1.2rem 2rem;
	.logo {
		display: block;
		width: 140px;
	}
	.sp_gnav-close {
		margin-left: auto;
		font-size: 15px;
		font-weight: 500;
		span {
			position: relative;
			display: block;
			padding-left: 25px;
			&:before, &:after {
				content: "";
				display: block;
				position: absolute;
				width: 16px;
				height: 1px;
				background: #000;
				left: 0;
				top: 50%;
			}
			&:before {
				transform: rotate(45deg);
			}
			&:after {
				transform: rotate(-45deg);
			}
		}
	}

}
.sp_gnav-menu {
	border-bottom: 1px solid #fabe00;
}
.sp_gnav-menu > li {
	border-top: 1px solid #fabe00;
	> a {
		background: #fff9e9;
		font-weight: bold;
		&.link-blog, &.link-junior {
			padding: 1.5rem 2rem 1.5rem 5rem;
			background-color: #f9f9f9;
			background-size: auto 20px;
			background-position: 20px center;
			background-repeat: no-repeat;
		}
		&.link-blog {
			background-image: url(../images/icon-blog.svg);
		}
		&.link-junior {
			background-image: url(../images/icon-junior.svg);
		}
	}
}
.sp_gnav-menu li a{
	display: block;
	text-align: left;
	padding: 1.3rem 2rem;
	font-size: 1.6rem;
}
.sp_gnav-menu2 {
	display: none;
	background-color: #fff;
}
.sp_gnav-menu2 li {
	background-color: #fff;
	border-top: 1px solid #fabe00;
	padding-left: 1.2rem;
}

.sp_gnav-menu3 {
	background-color: #fff;
}
.sp_gnav-menu3 li {
	background-color: #fff;
	border-top: 1px solid #fabe00;
	padding-left: 2rem;
	a {
		font-weight: 500;
		padding-left: 3rem;
	}
}

.sp_gnav-menu4 {
	background-color: #fff;
	margin-left: -1.2rem;
}
.sp_gnav-menu4 li {
	background-color: #fff;
	border-top: 1px solid #fabe00;
	padding-left: 1.2rem;
}

.sp_gnav-menu4 li a {
	padding: 1.1rem 3.5rem;
	letter-spacing: -1px;
}

.sp_gnav-menu-course {
	dl {
		dt {
			background: #fabe00;
			color: #fff;
			padding: 1.1rem 2rem 1.1rem 5rem;
			font-size: 1.6rem;
			text-align: left;
			font-weight: 500;
		}
		dd {
			padding-left: 5rem;
			text-align: left;
			a {
				font-weight: 500;
				&:before {
					content: "・";
					margin-right: .5rem;
				}
			}
			> span {
				font-weight: 500;
				display: block;
				padding:1.3rem 0;
			}
			+ dd {
				border-top: 1px solid #e4e4e4;
			}
			&.gnavi-child {
				padding-left: 8rem;
			}
		}
	}
}
.accordion_wrap {
	display: flex;
}
.accordion_wrap a{
	flex: 1;
}
.accordion_wrap .arrow {
	display: block;
	width: 52px;
	background-color: #999;
	position: relative;
}
.accordion_wrap .arrow:before {
	content: "";
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
	left: calc(50% - 5px);
	top: calc(50% - 5px);
}
.accordion_wrap .arrow.open:before {
	transform: rotate(135deg);
}

.sp_other-menu1 {
	background: #fff9e9;
	text-align: center;
	padding: 40px 0;
	border-bottom: 1px solid #fabe00;
	li {
		&:before {
			content: "";
			width: 16px;
			height: 1px;
			background: #000;
			display: block;
			margin: 0 auto;
		}
		a {
			display: block;
			padding: 1.8rem 2rem;
			font-size: 1.5rem;
		}
		&:last-of-type {
			&:after {
				content: "";
				width: 16px;
				height: 1px;
				background: #000;
				display: block;
				margin: 0 auto;
			}

		}
	}
}

.sp_gnav .sp_other-menu {
	background: #fcfcfc;
	padding: 60px 0;
	display: flex;
	flex-direction: column;
	gap: 35px;
	border-bottom: 12px solid #fabe00;
	li {
		width: 80%;
		max-width: 550px;
		margin: 0 auto;
	}
}

.sp_gnav .sp_other-menu li a {
	display: block;
	padding: 1.2rem;
	font-size: 1.6rem;
	font-weight: 500;
	background-color: #ec6a3e;
	background-repeat: no-repeat;
	background-size: auto 26px;
	background-position: 20%;
	color: #fff;
	position: relative;
	text-align: left;
	padding-left: 36%;
	&.link-request {
		background-image: url(../images/icon-file.svg);
	}
	&.link-event {
		background-image: url(../images/icon-event.svg);
	}
	&.link-entry {
		background-image: url(../images/icon-entry.svg);
	}
	&.link-kobetsu {
		background-image: url(../images/icon-kobetsu.svg);
	}
	&.link-tel {
		background-image: url(../images/icon-tel.svg);
	}
	&.link-openschool {
		background-image: url(../images/icon-school.svg);
	}

}

.sp_gnav .sp_other-menu li a.btn_line {
	border-color: #06c755;
	background: #06c755;
	background-size: 18px auto;
	color: #fff;
	border-radius: 2px;
	position: relative;
	padding-left: 32%;
	padding-right: 0;
	text-align: center;
	&:before {
		content: "";
		display: block;
		position: absolute;
		left: 1px;
		top: 1px;
		bottom: 1px;
		width:32%;
		background: #fff url(../images/icon_line.png) center no-repeat;
		background-size: 28px auto;
	}
}
/* about-info */
#about-info .wrap{
	text-align: left;
}
#about-info h3{
	font-size: 2.0rem;
	font-weight: bold;
	text-align: center;
}
#about-info h4{
	font-size: 1.8rem;
	text-align: center;
	background: #eee;
	padding: 5px 10px;
}
#about-info h5{
	font-size: 1.7rem;
	text-align: center;
}
#about-info h4 small{
	font-size: 1.6rem;
}
#about-info ul.tab-group{
	list-style: none;
	display: flex;
	justify-content: space-between;
}
#about-info ul.tab-group li{
	cursor: pointer;
	width: 28%;
	padding: 15px 20px;
	background: #ddd;
	text-align: center;
	position: relative;
}
#about-info ul.tab-group li.is-active{
	color: #fff;
	background: #faab00;
}
#about-info ul.tab-group li:hover{
	opacity: 0.9;
}
#about-info ul.tab-group li:after{
	content: ">";
	position: absolute;
	top: 0;
	right: 5px;
	bottom: 0;
	height: 1em;
	text-align: center;
	vertical-align: middle;
	margin: auto 0;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
#about-info ul.anc2{
	list-style: none;
	display: flex;
	justify-content: space-between;
}
#about-info ul.anc2 li{
	cursor: pointer;
	width: 48%;
	background: #ddd;
	text-align: center;
	position: relative;
}
#about-info ul.anc2 li a{
	padding: 10px 20px;
	display: block;
}
#about-info ul.anc2 li:after{
	content: ">";
	position: absolute;
	top: 0;
	right: 5px;
	bottom: 0;
	height: 1em;
	text-align: center;
	vertical-align: middle;
	margin: auto 0;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
#about-info .panel{
	display: none;
}
#about-info .panel.is-show{
	display: block;
}
#about-info table{
	width: 100%;
	border: 1px solid #ccc;
}
#about-info table th,#about-info table td{
	padding: 10px 1.5em;
	border: 1px solid #ccc;
}
#about-info table th{
	width: 15%;
	padding: 10px .5em;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	background: #eee;
}
#about-info table th.w100{
	width: 100%;
	background: #ccc;
}
#about-info table td{
	width: 85%;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#about-info h3{
		font-size: 1.8rem;
	}
	#about-info h4{
		font-size: 1.6rem;
	}
	#about-info h4 small{
		font-size: 1.4rem;
	}
	#about-info h5{
		font-size: 1.5rem;
	}
	#about-info ul.tab-group{
		flex-wrap: wrap;
	}
	#about-info ul.tab-group li{
		width: 100%;
		padding: 10px 20px;
		margin-bottom: 10px;
	}
	#about-info table th,#about-info table td{
		display: block;
		width: 100%;
	}
}

/*---------------------------------------------------------------------------------------
	news
----------------------------------------------------------------------------------------*/
#news-detail {
	padding-bottom: 40px;
	h2 {
		font-size: 1.6rem;
		line-height: 2;
		font-weight: bold;
		margin-bottom: 10px;
		strong {
			font-size: 2rem;
		}
	}
	.box {
		text-align: left;
		display: flex;
		flex-wrap: wrap;
		max-width: 800px;
		margin: 0 auto;
		.news-ttl {
			width: 100%;
			font-size: 24px;
			color: #000;
			margin-top: 10px;
			border-bottom: 1px solid #000;
			padding-bottom: 5px;
			line-height: 1.5;
		}
		.news-content {
			width: 100%;
			margin-top: 32px;
			p {
				margin-bottom: 15px;
				line-height: 1.8;
			}
			span {
				font-size: 16px;
			}
		}
	}
	a {
		word-break: break-all;
		&.link_blue {
			color: #3366ff;
			text-decoration: underline;
		}
	}
	#top-cont2 {
		padding-top: 10px !important;
		dl {
			border-bottom: none;
			padding: 25px 0;
		}
		dt {
			border-bottom: 1px solid #d2d2d2;
			padding-bottom: 10px;
		}
	}
}

#news-list {
	.info {
		.label {
			padding: 3px 1.5rem !important;
			margin-left: 1rem;
		}
	}
	.list {
		padding-left: 5% !important;
		padding-right: 5% !important;
		max-width: 800px;
		margin: 0 auto;
	}
	.item {
		margin: 0 0 40px;
		text-align: left;
		.info {
			margin: 0 0 10px;
			padding: 0 0 10px;
			border-bottom: solid 1px #000000;
		}
	}
}

#top-cont2 {
	.list {
		padding-left: 5% !important;
		padding-right: 5% !important;
	}
}

#news-list .list li .label-blog,
#news-detail .box .label-blog {
	background: #faab00;
}

#news-list .list li .label,
#news-detail .box .label {
	width: 8em;
	text-align: center;
	margin-left: 1em;
	font-size: 12px;
	padding: 3px;
	color: #fff;
}

.pagenavi {
	display: flex;
	justify-content: center;
	margin-top: 80px;
	margin-bottom: 40px;
	 > a, .pagenavi > span {
		color: #28305b;
		display: inline-block;
		padding: 8px 8px;
		min-width: 16px;
		margin: 3px;
		font-size: 14px;
		text-align: center;
		border: 1px solid #ccc;
	}
}

.list-title-link {
	float: right;
	padding-left: 20px;
	margin-top: 15px;
	a {
		padding-right: 25px;
		background: url(../images/icon_arrow01.png?200923) 100% 50% no-repeat;
		background-size: 14px;
	}
}

.news-content{
	overflow:hidden;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#news-detail .box .news-ttl {
		font-size: 21px;
	}
	#news-detail .box .news-content {
		margin-top: 12px;
	}
	.list-title-link {
		float: right;
	}
	#top-cont2 .list {
		padding-left: 0% !important;
		padding-right: 0% !important;
	}
}

#news-detail #blognav {
	text-align: left;
    margin: 0 0 45px;
    background: #f7f7f7;
    font-size: 1.4rem;
}
#news-detail #blognav #blognav-inner {
    max-width: 960px;
	width: 90%;
    margin: 0 auto;
    padding: 0 0;
    font-size: 1.5rem;
}
#news-detail #blognav .blognav-box.cat {
    margin: 0 0 10px;
    padding: 10px 0 0;
    border-bottom: solid 1px #949494;
}
#news-detail #blognav .blognav-box .btn {
    display: inline-block;
    margin: 0 6px 10px 0;
    padding: 0;
    color: #000;
    font-family: "AxisStd-Regular", sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
#news-detail #blognav .blognav-box .btn a{
    padding: 10px 15px;
	display: block;
}
#news-detail #blognav .blognav-box .btn{
	border: none;
}
#news-detail #blognav .blognav-box .btn:after{
	content: none;
}
#news-detail #blognav .blognav-box .btn:hover,
#news-detail #blognav .blognav-box .btn:hover a,
#news-detail #blognav .blognav-box .btn.current,
#news-detail #blognav .blognav-box .btn.current a{
    background: #faab00;
    color: #ffffff;
}
@media print, screen and (max-width: 768px) {
    #news-detail #blognav {
        display: none;
    }
}
/**/
#news-detail #blognav-sp {
    display: none;
}
@media print, screen and (max-width: 768px) {
    #news-detail #blognav-sp {
        display: block;
		margin-bottom: 30px;
    }
    #news-detail #blognav-sp #blognav-sp-inner {
        position: relative;
    }
    #news-detail #blognav-sp #blognav-sp-current {
        height: 45px;
        overflow: hidden;
        padding: 7px 0 2px;
        background: #faab00 url("../images/icon_arrow01_down_white03.png") 97% 50% no-repeat;
        background-size: 12px 6px;
        color: #ffffff;
        font-size: 1.8rem;
        text-align: center;
        white-space: normal;
    }
    #news-detail #blognav-sp #blognav-sp-current.open {
        background-image: url("../images/icon_arrow01_up_white03.png");
    }
    #news-detail #blognav-sp #blognav-sp-menu {
        display: none;
        position: absolute;
        left: 0;
        top: 45px;
        z-index: 10;
        width: 100%;
        background: #ffffff;
    }
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-box {
        display: flex;
        flex-wrap: wrap;
    }
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-box:nth-of-type(2) {
        margin: -1px 0 0;
    }
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-box .btn {
        width: 50%;
        min-height: 50px;
        padding: 0;
        border: none;
        border-bottom: solid 1px #e1e1e1;
        font-size: 1.4rem;
        font-style: normal;
        text-align: center;
        vertical-align: middle;
    }
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-box .btn a{
        padding: 13px 2px 12px;
		display: block;
	}
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-box .btn.current {
        background: #faab00;
        color: #ffffff;
    }
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-box .btn.current a{
		color: #fff;
	}
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-box .btn:nth-of-type(odd) {
        border-right: solid 1px #e1e1e1;
    }
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-box:nth-of-type(2) .btn:nth-of-type(1),
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-box:nth-of-type(2) .btn:nth-of-type(2) {
        border-top: solid 1px #faab00;
    }
    #news-detail #blognav-sp #blognav-sp-menu .blognav-sp-close {
        height: 45px;
        padding: 9px 0 2px;
        background: #808080 url("../images/icon_cross01_white01.png") 97% 50% no-repeat;
        background-size: 12px 12px;
        color: #ffffff;
        text-align: center;
    }
}

/* pager */
.pager{
	clear: both;
	text-align: center;
}
.pager li{
	display: inline-block;
	margin: 0 5px;
}
.pager li a{
	display: block;
	line-height: 2;
	width: 2em;
	color: #fff;
	font-size: 16px;
	background: #faab00;
	border: 1px solid #faab00;
}
.pager li.active a{
	color: #faab00;
	background: #fff;
	border: 1px solid #faab00;
}
.page-numbers{
	clear: both;
	text-align: center;
}
.page-numbers li{
	display: inline-block;
	margin: 0 5px;
}
.page-numbers li a{
	display: block;
	line-height: 2;
	width: 2em;
	color: #fff;
	font-size: 16px;
	background: #faab00;
	border: 1px solid #faab00;
}
.page-numbers li .current {
	color: #faab00;
	background: #fff;
	border: 1px solid #faab00;
	display: block;
	line-height: 2;
	width: 2em;
	font-size: 16px;
}
.news-content a:link{
    color: #3366ff;
    text-decoration: underline;
}
.news-content a:visited{
    color: #3366ff;
    text-decoration: underline;
}
.news-content ul li{
	margin-left: 2.5em;
	list-style: disc;
}
.news-content ol li{
	margin-left: 2.5em;
	list-style: decimal;
}
.news-content em{
	font-style: italic;
}
.news-content blockquote {
	padding: 0px 40px 0px 40px;
}
.news-content h4{
	font-size: 22px;
}
.news-content h5{
	font-size: 20px;
}
.news-content h6{
	font-size: 18px;
}

/* Block: Code, Verse and Preformatted ------- */

.news-content .wp-block-code {
	color: inherit;
}

.news-content .wp-block-code,
.news-content .wp-block-preformatted pre,
.news-content .wp-block-verse pre {
	border: 1px solid #dcd7ca;
	border-radius: 0;
	padding: 30px;
}

.news-content .wp-block-freeform.block-library-rich-text__tinymce pre,
.news-content .wp-block-preformatted pre,
.news-content .wp-block-code .block-editor-plain-text,
.news-content .wp-block-verse pre {
	background: transparent;
	color: inherit;
	font-size: 14px;
}
/* Block: Verse ------------------------------ */

.news-content .wp-block-verse pre,
.news-content pre.wp-block-verse {
	font-size: 0.9em;
}
.news-content .wp-block-quote {
	border-color: #faab00;
	border-style: solid;
	border-width: 0 0 0 2px;
	margin: 10px 0;
}
.news-content .wp-block-pullquote {
	border-color: #faab00;
	border-style: solid;
	border-width: 2px 0 2px 0;
	margin: 10px 0;
}




/*---------------------------------------------------------------------------------------
	blog
----------------------------------------------------------------------------------------*/
#blog .blog-wrap {
	display:flex;
	max-width: 990px;
    margin: 0 auto;
    padding: 0;
	flex-wrap:wrap;
	text-align:left;
}
#blog .blog-wrap>.blog-wrap-left {
	width:66%;
	margin-right:4%;
}
#blog .blog-wrap>.blog-wrap-right {
	width:30%;
}
#blog .blog-wrap>.pager-conts {
	width:100%;
}
#blog .blog-wrap>.blog-wrap-left h3.blog-title-h3 {
	display:none;
}
#blog #blog-sidebar .blog-search {
    margin: 0 auto 40px;
    padding: 15px 20px 0px;
    background-color: #fff;
    border: 1px solid #808080;
    border-radius: 8px;
    font-size: 16px;
    font-weight: normal;
}
#blog #blog-sidebar .blog-recommend {
    margin: 0 auto;
    padding: 15px 20px 0px;
    background-color: #fff;
    border: 1px solid #808080;
    border-radius: 8px;
    font-size: 16px;
    font-weight: normal;
}
#blog #blog-sidebar h3.unity {
	width: 100%;
    margin: 0 auto 20px;
    padding: 0 0 10px;
    border-bottom: 3px solid #ffdc91;
    color: #333;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    position: relative;
	&:after {
		content: none;
	}
}
#blog #blog-sidebar h3.unity:before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 30%;
    height: 3px;
    content: '';
    background: #faab00;
}
#blog #blog-sidebar select {
	width:100%;
}
#blog #blog-sidebar .cat-list {
	display:flex;
	flex-wrap:wrap;
	margin:20px 0 35px;
}
#blog #blog-sidebar .cat {
	display: inline-block;
    padding: 2px 1.5rem;
    color: #fff;
    font-size: 1.3rem;
    background: #faab00;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 6px;
}
#blog #blog-sidebar .search-input {
	width : 100% ;
}
#blog #blog-sidebar .searc-keyword {
	margin-bottom:20px;
	position:relative;
}
#blog #blog-sidebar .submit-btn {
	position:absolute;
	right: 8px;
    top: 50%;
	margin-top: -11px;
}
#blog #blog-sidebar .submit-btn:after {
	content:'';
	height: 20px;
	width:20px;
    margin: 0 auto;
    background-image: url("../images/blog-search-icon.png");
	background-size:100% auto;
    text-align: center;
    text-decoration: none;
    background-repeat: no-repeat;
	display:inline-block;
}
#blog #blog-sidebar .blog-recommend ul li {
	margin-bottom:20px;
}
#blog #blog-sidebar .rec-list-conts {
	display:flex;
}
#blog #blog-sidebar .rec-list-conts>.img {
	width: 80px;
	height: 80px;
	margin-right:10px;
	position:relative;
	overflow:hidden;
}
#blog #blog-sidebar .rec-list-conts>.img img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
}
#blog #blog-sidebar .rec-list-conts>.txt .note {
	font-size: 1.3rem;
	margin:  0;
}
#blog #blog-sidebar .rec-list-conts>.txt {
	text-align:left;
	flex-grow: 1;
	width: calc(100% - 150px);
}
#blog .news-ttl {
	width: 100%;
	font-size: 24px;
	color: #000;
	margin-top: 30px;
	padding-bottom: 15px;
	line-height: 1.5;
	text-align: center;
}
#blog h2.unity {
    max-width: 1100px;
    margin: 80px auto;
    padding: 0 10%;
    color: #333;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    position: relative;
	color:#faab00;
}

#blog h2 strong{
	font-size: 2rem;
}
#blog .wrap{
	text-align: left;
}
#blog .bd-btm{
	padding-bottom: 25px;
	border-bottom: 1px solid #e1e1eb;
	margin-bottom: 30px;
}
#blog ul.list{
	display: flex;
	flex-wrap: wrap;
}
#blog ul.list.sp {
	display: none !important;
}
#blog .blog-other ul.list {
	text-align:left;
}
#blog ul.list li{
	width: 30%;
	margin: 0 5% 50px 0;
	display: block;
}
#blog ul.list li:nth-child(3n){
	margin-right: 0;
}
#blog .blog-wrap>.blog-wrap-left ul.list li {
	width: 48%;
	margin: 0 4% 50px 0;
	text-align:left;
}
#blog .blog-wrap>.blog-wrap-left ul.list li:nth-child(3n){
	margin-right:4%;
}
#blog .blog-wrap>.blog-wrap-left ul.list li:nth-child(2n){
	margin-right:0;
}
#blog ul.list li.is-hidden{
	display: none;
}
#blog ul.list li a{
	display: block;
}
#blog ul.list li a:hover{
	opacity: 1;
}
#blog ul.list li figure{
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 55%;
	overflow: hidden;
	border-radius: 6px;
	margin-bottom: 20px;
}
#blog ul.list li figure img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:.3s all;
	border-radius:5px;
}
#blog ul.list li:hover figure img{
	transform: scale(1.07);
}
#blog ul.list li .category{
	font-size: 1.5rem;
	margin-bottom: 5px;
}
#blog ul.list li .note{
	line-height: 2;
	margin-bottom: 10px;
}
#blog .blog-wrap>.blog-wrap-left ul.list li .note {
	line-height:1.5;
	margin-top:8px;
	font-weight:bold;
}
#blog .blog-other ul.list .note {
	line-height:1.5;
	margin-top:8px;
	font-weight:bold;
}
#blog ul.list li .txt{
	font-size: 1.4rem;
	margin-bottom: 10px;
	text-align:left;
}
#blog ul.list li .date{
	color: #8d959c;
	font-size: 1.3rem;
}
#blog .back1{
	font-size: 1.7rem;
	margin-bottom: .8em;
}
#blog .back1 a:before{
	content: "←";
	margin-right: .5em;
	display: inline-block;
}
#blog .back2{
	text-align: center;
	margin-bottom: 90px;
}
#blog .back2 a{
	color: #faab00;
	display: inline-block;
	max-width: 335px;
	width: 100%;
	padding: 12px 45px;
	border-radius: 5px;
	border: 1px solid #faab00;
	cursor: pointer;
	position: relative;
	transition: opacity .2s ease-in-out;
}
#blog .back2 a:before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	display: block;
	height: 100%;
	background: #FFF0D2;
	z-index: -1;
	transition: .2s;
}
#blog .back2 a:hover:before{
	width: 100%;
}
#blog .blig-back-link {
	width: 100%;
}
#blog .bd-top{
	border-top: 1px solid #0f0f0f;
	padding-top: 10px;
	overflow: hidden;
}
#blog .bd-top .leftcol{
	float: left;
}
#blog .bd-top .category{
	display: inline-block;
}
#blog .bd-top .date{
	color: #8d959c;
	display: inline-block;
	margin-right: 1em;
}
#blog .bd-top ul.sns{
	float: right;
}
#blog .bd-top ul.sns li{
	float: left;
	margin: 0 0 5px 5px;
}
#blog .other{
	font-size: 2.2rem;
    width: 100%;
    margin: 0 auto 20px;
    padding: 0 0 10px;
    border-bottom: 3px solid #ffdc91;
    color: #333;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    position: relative;
}
#blog .other:before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 30%;
    height: 3px;
    content: '';
    background: #faab00;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 768px) {
	#blog .blog-wrap {
		text-align: left;
	}
	#blog .blog-wrap>.blog-wrap-left {
		width:100%;
		margin-right:0;
		padding-left: 5%;
		padding-right: 5%;
		order: 0;
	}
	#blog .blog-wrap>.blog-wrap-right {
		width:100%;
		margin-right:0;
		padding-left: 5%;
		padding-right: 5%;
		margin-top:40px;
		order: 2;
	}
	#blog .blog-wrap>.pager-conts {
		order: 1;
	}
	#blog .blog-other {
		padding-left: 5%;
		padding-right: 5%;
		order: 4;
	}
	#blog .blog-wrap>.blog-wrap-left h3.blog-title-h3 {
		width: 100%;
		margin: 0 auto 20px;
		padding: 0;
		font-size: 22px;
		display:block;
		text-align:center;
	}
	#blog h2.unity {
		width: 90%;
		margin: 40px auto;
		padding: 0;
		font-size: 28px;
		text-align: center;
	}
	#blog .news-ttl {
		font-size: 21px;
	}
	#blog .bd-btm{
		padding-bottom: 15px;
		margin-bottom: 20px;
	}
	#blog .bd-btm select{
		height: 40px;
		line-height: 40px;
	}
	#blog ul.list li{
		width: 100%;
		margin: 0 0 35px;
	}
	#blog ul.list.sp {
		display: flex !important;
	}
	#blog .blog-wrap>.blog-wrap-left ul.list li {
		width: 100%;
		margin: 0 0 35px;
	}
	#blog ul.list li .note{
		margin-bottom: 5px;
		margin-top:5px;
	}
	#blog .more span:before{
		background: #fff;
	}
	#blog .back1{
		font-size: 1.5rem;
		margin-bottom: .6em;
	}
	#blog .back2{
		margin-bottom: 30px;
	}
	#blog .back2 a:before{
		background: #fff;
	}
	#blog .bd-top{
		border-top: 1px solid #e1e1e1;
		margin-bottom: 30px;
	}
	#blog .bd-top .leftcol{
		margin-bottom: 5px;
	}
	#blog .bd-top ul.sns{
		float: left;
	}
	#blog .bd-top ul.sns li{
		height: 22px;
		margin: 0 5px 5px 0;
	}
	#blog .blog-title{
		margin-bottom: 10px;
	}
	#blog .other{
		font-size: 1.8rem;
	}
	#blog #blog-sidebar .blog-search {
		padding: 15px 0 0px;
		border: none;
	}
	#blog #blog-sidebar .submit-btn:after {
		width:16px !important;
		height:16px !important;
	}
	#blog .blog-archive-conts #blog-sidebar .blog-recommend {
		display:none;
	}
	#blog #blog-sidebar .blog-recommend {
		padding: 15px 0 0px;
		border: none;
		margin-bottom:40px;
	}
}


/*---------------------------------------------------------------------------------------
	voice
----------------------------------------------------------------------------------------*/
#voice {
	h2.unity {
		color:#faab00;
	}
	.voice-wrap {
		display:flex;
		max-width: 990px;
		margin: 0 auto;
		padding: 0;
		flex-wrap:wrap;
		text-align:left;
		row-gap: 16px;
		.voice-tag {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			li {
				a {
					cursor: pointer;
				}
				span {
					background: #fff;
					border-radius: 4px;
					display: block;
					font-size: 12px;
					padding: 4px 6px;
					line-height: 1.2;
					color: #333;
					border: 1px solid #acacac;
					&:before {
						content: "#";
						color: #faab00;
					}
				}
				.active span {
					background :#faab00;
					border-color: #faab00;
					color: #fff;
					&:before {
						color: #fff;
					}
				}
			}
		}
		.list {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 24px;
			> li {
				> a {
					display: flex;
					flex-direction: column;
					height: 100%;
					background: #f5f5f7;
					border-radius: 8px;
					padding: 24px;
					&:hover {
						background: #faab00;
						color: #fff;
						opacity: 1;
					}
				}
				.voice-info {
					display: flex;
					gap: 20px;
					margin-bottom: 20px;
					align-items: center;
					margin-bottom: 20px;
					.voice-img {
						background-color: #3eaad6;
						background-repeat: no-repeat;
						background-size: cover;
						border-radius: 100%;
						overflow: hidden;
						aspect-ratio: 1 / 1;
						width: 80px;
						height: 80px;
						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					.student-info {
						flex: 1;
						li {
							font-size: 13px;
							line-height: 1.4;
							&.name {
								font-size: 14px;
								margin-bottom: 4px;
							}
						}
					}
				}
				.voice-title {
					font-size: 18px;
					line-height: calc(28/18);
					margin-bottom: 20px;
				}

			}

			.voice-tag {
				margin-top: auto;
				li {
					span {
						border: 0;
					}
				}
			}
		}
		.order-0 {
			.voice-img {
				background-image: url(../images/ambiguous1.png);
			}
		}
		.order-1 {
			.voice-img {
				background-image: url(../images/ambiguous2.png);
			}
		}
		.order-2 {
			.voice-img {
				background-image: url(../images/ambiguous3.png);
			}
		}
		.order-3 {
			.voice-img {
				background-image: url(../images/ambiguous4.png);
			}
		}
		.order-4 {
			.voice-img {
				background-image: url(../images/ambiguous5.png);
			}
		}		
		.male {
			&.order-0 {
				.voice-img {
					background-image: url(../images/male1.png);
				}
			}
			&.order-1 {
				.voice-img {
					background-image: url(../images/male2.png);
				}
			}
			&.order-2 {
				.voice-img {
					background-image: url(../images/male3.png);
				}
			}
			&.order-3 {
				.voice-img {
					background-image: url(../images/male4.png);
				}
			}
			&.order-4 {
				.voice-img {
					background-image: url(../images/male5.png);
				}
			}
		}
		.female {
			&.order-0 {
				.voice-img {
					background-image: url(../images/female1.png);
				}
			}
			&.order-1 {
				.voice-img {
					background-image: url(../images/female2.png);
				}
			}
			&.order-2 {
				.voice-img {
					background-image: url(../images/female3.png);
				}
			}
			&.order-3 {
				.voice-img {
					background-image: url(../images/female4.png);
				}
			}
			&.order-4 {
				.voice-img {
					background-image: url(../images/female5.png);
				}
			}
		}		
		> .voice-wrap-left {
			width:66%;
			margin-right:4%;
			margin-bottom: 48px;
			.list {
				grid-template-columns: 1fr 1fr;
			}
			.voice-info {
				display: flex;
				gap: 20px;
				margin-bottom: 20px;
				align-items: center;
				.voice-img {
					background-color: #3eaad6;
					background-repeat: no-repeat;
					background-size: cover;
					border-radius: 100%;
					overflow: hidden;
					aspect-ratio: 1 / 1;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}

			.detail {
				.voice-info {
					align-items: flex-start;
					gap: 24px;
					.voice-img {
						width: 128px;
					}
					.voice-info-right {
						flex: 1;
					}
					.voice-title {
						font-size: 28px;
						line-height: calc(38/28);
						margin-bottom: 12px;
					}
					.student-info {
						display: flex;
						font-size: 14px;
						margin-bottom: 12px;
						.name {
							margin-right: 24px;
						}
						> li {
							&:last-of-type {
								&:before {
									content: "｜";
								}
							}
						}
					}
				}
				.voice-section {
					font-size: 1.6rem;
					+ .voice-section {
						margin-top: 40px;
					}
					.unity {
						border-bottom: 3px solid #ffdc91;
						position: relative;
						padding: 12px 0;
						&:before {
							position: absolute;
							bottom: -3px;
							left: 0;
							width: 30%;
							height: 3px;
							content: '';
							background: #faab00;
						}
					}
					.voice-content {
						figure, .youtube {
							margin: 24px 0;
						}
					}
				}
			}
		}
		> .voice-wrap-right {
			width:30%;
		}
		> .pager-conts {
			width:100%;
		}

		> .voice-pickup {
			width: 100%;
			.fukidashi {
				color: #faad0a;
				font-size: 32px;
				font-family: 'Montserrat';
				text-align: center;
				span {
					display: inline-block;
					padding: 0 24px;
					position: relative;
					margin-bottom: 20px;
					&:before, &:after {
						content: "";
						display: block;
						width: 2px;
						height: 40px;
						background: #faad0a;
						position: absolute;
						top: 8px;
					}
					&:before {
						left: 0;
						transform: rotate(-30deg);
					}
					&:after {
						right: 0;
						transform: rotate(30deg);
					}
				}
			}
		}
		#voice-sidebar {
			.voice-search {
				margin: 0 auto 40px;
				padding: 20px 20px;
				background-color: #fff;
				border: 1px solid #808080;
				border-radius: 8px;
				font-size: 16px;
				font-weight: normal;
				h3.unity {
					width: 100%;
					margin: 0 auto 20px;
					padding: 0 0 10px;
					border-bottom: 3px solid #ffdc91;
					color: #333;
					font-size: 18px;
					font-weight: 700;
					line-height: 1.2;
					text-align: center;
					position: relative;
					&:after {
						content: none;
					}
				}
				.voice-tag + h3.unity {
					margin-top: 40px;
				}
			}
		}
	}
	/*------------------------------ responsive ------------------------------*/
	@media screen and (max-width: 768px) {
		text-align: left;
		flex-direction: column;
		h2.unity {
			width: 90%;
			margin: 40px auto;
			padding: 0;
			font-size: 28px;
			text-align: center;
		}
		.voice-wrap {
			.list {
				grid-template-columns: 1fr;
				gap: 16px;
				> li {
					> a {
						padding: 20px;
					}
					.voice-info {
						margin-bottom: 16px;
						gap: 16px;
					}
					.voice-title {
						margin-bottom: 16px;
						font-size: 16px;
					}
				}
			}
			> .voice-wrap-left {
				width:100%;
				margin-right:0;
				padding-left: 5%;
				padding-right: 5%;
				order: 0;
				margin-bottom: 16px;
				.list {
					grid-template-columns: 1fr;
					gap: 16px;
					> li {
						> a {
							padding: 20px;
						}
						.voice-info {
							margin-bottom: 16px;
							gap: 16px;
						}
						.voice-title {
							margin-bottom: 16px;
							font-size: 16px;
						}
					}
				}
				.detail {
					.voice-info {
						display: block;
						.voice-img {
							margin: 0 auto 20px;
							width: 112px;
						}
						.voice-title {
							font-size: 24px;
						}
						.student-info {
							flex-wrap: wrap;
							.name {
								width: 100%;
							}
						}
					}
					.voice-section {
						.unity {
							font-size: 21px;
							padding: 10px 0;
						}
						.voice-content {
							figure, .youtube {
								margin: 20px 0;
							}
						}
					}
				}
			}
			> .voice-wrap-right {
				width:100%;
				margin-right:0;
				padding-left: 5%;
				padding-right: 5%;
				margin-top:24px;
				order: 2;
				#voice-sidebar {
					.voice-search {
						padding: 15px 0 0px;
						border: none;
					}
				}
			}
			> .pager-conts {
				order: 1;
			}
			> .voice-pickup {
				width: 90%;
				margin: 0 auto;
				.fukidashi {
					font-size: 24px;
					span:before, span:after {
						height: 32px;
						top: 4px;
					}
				}
			}
		}
	}
}





iframe {
	max-width: 100%;
}

.lp-banner {
	padding-left: 20px;
	padding-bottom: 10px;
	width: 270px;
	float: left;
}

.lp-banner__picture {
}

.lp-banner__anker {

}

.lp-banner__img {
	max-width: 100%;
	height: auto;
}

.nav2 {
	flex-wrap: wrap;
}

.nav2__item--full {
	width: 100% !important;
}

.nav2__img--full {
	max-width: 100%;
	height: auto;
}

.list-brackets,
#policy .list-brackets {
	counter-reset: brackets;
}

.list-brackets > li,
#policy .list-brackets > li {
	padding-left: 2em;
	position: relative;
}

.list-brackets > li::before,
#policy .list-brackets > li::before {
	counter-increment: brackets;
	content: "(" counter(brackets) ")" !important;
	position: absolute;
    top: 0;
    left: 0;
    display: block;
}

/*---------------------------------------------------------------------------------------
	フォーム埋め込み
----------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
	#siryou-form.contact-form.shiryou {
		height:1850px !important;
		position:relative;
		z-index: 0!important;
	}
	#siryou-form.contact-form.contact {
		height:1550px !important;
		position:relative;
		z-index: 0!important;
	}
}


/*--------------------------------------------------------------
　　2022/09/06追記
--------------------------------------------------------------*/



.top-about {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.top-about>div {
	width:48%;
}
.top-about>div ul.menu {
	margin:0;
	padding:0;
}
.top-about>div ul.menu li {
	border-bottom:1px solid #a0a0a0;
	list-style:none;
}
.top-about>div ul.menu li a {
	padding:20px 10px 20px 40px;
	position:relative;
	box-sizing:border-box;
	width: 100%;
    display: block;
    text-align: left;
}
.top-about>div ul.menu li a:before {
	background: url(../images/top-icon_arrow-yellow.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
	margin-top:-7px;
    left: 10px;
}
.top-about>div.img a figure {
	position: relative;
    width: 100%;
    height: 0;
    padding-top: 55%;
    overflow: hidden;
	margin-bottom:10px;
}
.top-about>div.img a figure img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: .3s all;
}
.top-about>div.img a:hover figure img{
	transform: scale(1.07);
}
.top-about>div.img a figure .link-title {
	position:absolute;
	bottom:0;
	color:#fff;
	width:100%;
	box-sizing:border-box;
	padding:0 10px;
	display:flex;
	align-items:baseline;
	justify-content:space-between;
}
.top-about>div.img a figure .link-title>span.title {
	font-size:22px;
}
.top-about>div.img a figure .link-title>span.more {
	font-size:14px;
}

/*タブ実装*/
.tab_box .btn_area {
	margin:0 10px;
	display: -webkit-box;
	display: flex;
	justify-content:center;
}

.tab_box .tab_btn {
	padding: 8px 20px !important;
	color: #333;
	background: #f5f5f7;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease 0s;
}

.tab_box .tab_btn + .tab_btn {
	margin-left: 2px;
}

.tab_box .tab_btn:hover {
	background-color: #dce1e4;
}

.tab_box .tab_btn.active {
    background:rgba(250, 171, 0, 1);
    color:#fff;
}

.tab_box .panel_area {
    padding: 20px;
}

.tab_box .tab_panel {
    display:none;
}

.tab_box .tab_panel.active {
    display:block;
}
#top-cont2 dl {
	max-width:1000px !important;
	box-sizing:border-box;
}

.siryou-note {
	float:left;
	width:250px;
	margin:0 30px 30px 0;
}

.thanks-page {
	text-align:center;
	margin:60px auto;
}
.thanks-page p {
	margin-bottom:40px;
}
.thanks-page-h1 {
	margin-bottom:40px;
	font-size:32px;
	font-weight:bold;
}

footer .contactArea-conts {
	background: #ffefcb;
	padding:50px 0;
}
footer h4 {
    color: #323232;
    font-size: 20px;
    margin: 0 auto;
    padding: 15px 0;
    font-weight: bold;
    text-align: center;
}
footer .contactArea {
	width: 95%;
	max-width: 900px;
	margin: 0 auto;
	padding: 30px;
	background-color: #fff;
	border-radius: 10px;
}
footer .contactArea .flex {
	display:flex;
	margin-top:30px;
}
footer .contactArea .flex>.w50 {
	width:50%;
	box-sizing:border-box;
	padding:15px;
}
footer .contactArea .flex>.w50.br {
	border-right:1px solid #323232;
}
footer .contactArea .flex>.w50 .footer-logo {
	text-align: center;
    width: 90%;
    margin-bottom: 30px;
    margin-top: 15px;
}
footer .contactArea .flex>.w50 .footer-title {
	text-align:center;
	margin:5px 0 5px;
}
footer .contactArea .flex>.w50 .footer-link {
	width:100%;
	display:block;
	margin:5px 0 5px;
	border:1px solid #000;
	padding:10px;
	color:#323232;
	border-radius:5px;
	text-align:center;
}
footer .contactArea .flex>.w50 .footer-link.tel {
	font-weight:bold;
	font-size:18px;
}
footer .contactArea .flex>.w50 .footer-link.tel img {
	vertical-align:middle;
	margin-right:5px;
	width: 30px;
}
footer .contactArea .flex>.w50 .time {
	font-size:11px;
	margin-bottom:15px;
	text-align:center;
}
footer .snsArea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  padding: 0;
}

footer .snsArea h4 {
  width: 18%;
  margin: 0 auto;
  padding: 0 0 25px;
  color: #000;
  font-size: 16px;
  text-align: center;
}

footer .snsArea .contentsBox {
  width: 20%;
  margin: 0 auto;
  padding: 0;
  color: #000;
  font-size: 10px;
  line-height: 2;
  text-align: center;
}
footer .snsArea .contentsBoxTxt {
	transform: scale(0.8, 0.8);
}

footer .snsArea .contentsBoxPic {
  width: 40px;
  margin: 0 auto;
  padding: 0;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
 
.clearfix:before {
　　　　content: "";
	display: block;
	clear: both;
}
 
.clearfix {
	display: block;
}

@media screen and (max-width: 768px) {
	#headerWrap2 {
		top:0;
		margin-top:0 !important;
		padding: 15px 0 !important;
		height: auto !important;
	}
	#headerWrap2 .logo {
		width: 230px;
		margin-top: 0;
		margin-left: 20px;
		padding:0;
	}
	#top-cont1 {
		width:100% !important;
	}
	#top-cont1 {
		width: 90%;
		margin: 0 auto;
		padding: 0 0 10px;
	}
	.top-about {
		display:block;
	}
	.top-about>div {
		width:100%;
	}
	.top-about>div.img {
		margin-top:20px;
	}
	.top-about>div ul.menu li {
		font-size:14px;
	}
	.tab_box .btn_area {
		flex-wrap:wrap;
	}
	.tab_box .tab_btn {
		padding: 8px 20px !important;
		margin-bottom:5px;
		font-size:14px;
	}
	.sp_gnav.head_animation {
		z-index:1001;
	}
	.siryou-note {
		width:140px;
		margin-right:15px;
	}
	.thanks-page-h1 {
		font-size:20px;
	}
	footer {
		z-index: 1!important;
		position: relative;
		margin-bottom:51px;
	}
	footer p.copy {
		padding-bottom:20px;
	}
	footer.ft2 {
		margin-bottom:63px;
	}
	footer .contactArea-conts {
		padding:30px 0;
	}
	footer .contactArea {
		margin: 0 auto;
	}
	footer .contactArea .flex.sp-no-flex {
		display:block;
	}
	footer .contactArea .flex>.w50 {
		width:100%;
		padding:15px 0;
	}
	footer .contactArea .flex.sp-no-flex {
		margin-top:10px;
	}
	footer h4 {
		font-size: 14px;
		line-height: 1.2;
		margin: 10px auto;
		padding: 0 0 15px;
		text-align: center;
		color:#323232;
		padding-bottom:5px;
	}
	footer .logoBox {
		width: 90%;
		max-width: 500px;
		margin: 0 auto 10px;
		padding: 0;
	}

	footer .snsArea .contentsBoxPic {
  		width: 34px;
  		margin: 0 auto;
  		padding: 0;
	}
}

/*--------------------------------------------------------------
　　2022/10/24追記
--------------------------------------------------------------*/
html {
	overflow-x:hidden;
	scroll-padding-top: 140px;
}
/*サイトヘッダー*/
#site-header {
	background:#fff;
}
#site-header .in {
	max-width:1280px;
	margin:0 auto;
	padding:15px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	box-sizing:border-box;
}
#site-header .in .site-h1 {
	font-size:14px;
	margin:0;
	padding:0;
	font-weight:normal;
}
#site-header .in ul.site-nav {
	padding:0;
	margin:0;
	display:flex;
	align-items:center;
}
@media screen and (max-width: 768px) {
	#site-header .in {
		padding:10px;
		font-size:12px;
	}
	#site-header .in ul.site-nav {
		display:none;
	}
}
#site-header .in ul.site-nav li {
	list-style:none;
	font-size:14px;
}
#site-header .in ul.site-nav li img {
	margin-right:3px;
	width:18px;
}
#site-header .in ul.site-nav li + li {
	margin-left:30px;
	border:none !important;
}
#site-header .in ul.site-nav li a {
	text-decoration:none;
	display:flex;
	align-items:center;
}
@media screen and (max-width: 900px) {
	#site-header .in ul.site-nav li a {
		font-size:12px;
	}
}

header {
	background-color: transparent;
}

header .inner {
	max-width: 1280px;
}
#headerWrap2 {
	background-color: transparent !important;
}
h1.gnaviSP {
	position:absolute;
	top:44px;
	width:100% !important;
}
h1.gnaviSP a {
	display:block;
	width: 50vw;
}


.gnaviArea {
	position:relative;
}


/* animation */
.load-fade {
    opacity: 0;
    -webkit-transform: translate3d(0,2rem,0);
    transform: translate3d(0,2rem,0);
    transition: .9s cubic-bezier(.215,.61,.355,1);
    transition-property: opacity,-webkit-transform;
    transition-property: opacity,transform;
    transition-property: opacity,transform,-webkit-transform;
}
.load-fade.done {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.load-up{
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}
.load-up.done{
    opacity : 1; 
    transform : translate(0, 0);
}


.updown1 {
    animation-name:updown1;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 8s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
.updown2 {
    animation-name:updown1;   /* アニメーション名の指定 */
    animation-delay:1s;   /* アニメーションの開始時間指定 */
    animation-duration: 8s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
.updown3 {
    animation-name:updown2;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 8s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
.updown4 {
    animation-name:updown2;   /* アニメーション名の指定 */
    animation-delay:1s;   /* アニメーションの開始時間指定 */
    animation-duration: 8s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
.updown5 {
    animation-name:updown3;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 4s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
.rotation1 {
    animation-name:rotation;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 2s;   /* アニメーション動作時間の指定 */
    animation-iteration-count: infinite; 
}
.rotation2 {
    animation-name:rotation;   /* アニメーション名の指定 */
    animation-delay:1s;   /* アニメーションの開始時間指定 */
    animation-duration: 2s;   /* アニメーション動作時間の指定 */
    animation-iteration-count: infinite; 
}
@keyframes updown1 {
  0% {
    transform: translateY(10px);
  }
  16% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0);
  }
  66% {
    transform: translateY(10px);
  }
  83% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px)
  }
}

@keyframes updown2 {
  0% {
    transform: translateY(-10px);
  }
  16% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  66% {
    transform: translateY(-10px);
  }
  83% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px)
  }
}

@keyframes updown3 {
  0% {
    transform: translateY(-10px);
  }
  16% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  66% {
    transform: translateY(-10px);
  }
  83% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px)
  }
}

@keyframes rotation{
  0%{ transform:rotate(0);}
  49%{ transform:rotate(0);}
  50%{ transform:rotate(5deg);}
  99%{ transform:rotate(5deg);}
  100%{ transform:rotate(0); }
}

.topics-conts .message {
	transition: all 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
}
.topics-conts .message.hide {
	opacity: 0;
	transform: translateY(50px);
}

.fuwafuwa {
  animation: 8s fuwafuwa infinite;
}
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}



/*バナーエリア*/
.breadArea {
	max-width: 960px;
	width: 90%;
	margin: 0 auto;
	padding: 0;
}

/*新着情報*/
#top-cont2 h2 span.list-title-link-new {
	position:absolute;
	font-weight:normal;
	top:5px;
}
#top-cont2 h2 .sub {
	font-size: 12px;
    font-weight: normal;
    margin-top: 10px;
}
#top-cont2 h2:after {
    content: '';
    width: 40px;
    height: 2px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
	top:58px;
    background-color: #000;
}
.h2-news-img {
    position: absolute;
    width: 166px;
    right: -210px;
    top: -58px;
}
@media (max-width: 765px) {
    .h2-news-img {
        width: 66px;
        left: -100px;
        top: -28px;
    }
}

/*キャンパス（リアル×オンライン）*/
#top-cont7 h2 {
    font-family: 'Montserrat';
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    position: relative;
    color: #000;
    margin-bottom: 60px;
}
#top-cont7 h2 span {
    position: relative;
}
#top-cont7 h2 .sub {
	font-size: 12px;
	font-weight:normal;
	margin-top: 10px;
}
#top-cont7 h2:after {
    content: '';
    width: 40px;
    height: 2px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    top: 58px;
    background-color: #000;
}
.h2-campus-img {
    position: absolute;
    width: 166px;
    right: -210px;
    top: -58px;
}
@media (max-width: 765px) {
    .h2-campus-img {
        width: 88px;
        right: -100px;
        top: -28px;
    }
}
#top-cont7 {
    max-width: 1280px !important;
    width: 90%;
	margin: 120px auto 80px !important;
}
#top-cont7 .in {
	max-width:1280px;
	margin:0 auto;
	width:100%;
}
#top-cont7 .in .bnr-list {
	display:flex;
	margin:50px auto 30px;
	-webkit-justify-content: space-between;
    justify-content: space-between;
}
#top-cont7 .in .bnr-list>div {
	width:48%;
	text-align:center;
	font-size:15px;
}
#top-cont7 .in .bnr-list>div a {
	display:block;
	width:100%;
}
#top-cont7 .in .bnr-list>div a figure {
	position: relative;
    width: 100%;
    height: 0;
    padding-top: 55%;
    overflow: hidden;
	margin-bottom:10px;
}
#top-cont7 .in .bnr-list>div a figure img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: .3s all;
	border-radius:5px;
}
#top-cont7 .in .bnr-list>div a:hover figure img{
	transform: scale(1.07);
}
/* responsive */
@media screen and (max-width: 768px) {
	#top-cont7 {
		margin-top:80px !important;
		margin-bottom:60px !important;
	}
	#top-cont7 .in .bnr-list {
		flex-wrap:wrap;
	}
	#top-cont7 .in .bnr-list>div {
		width:100%;
	}
	#top-cont7 .in .bnr-list>div:first-child {
		margin-bottom:20px;
	}
}

/* ワオ高の特徴 */
#top-cont8.new {
	max-width: 1280px;
	margin:80px auto;
}


#top-cont8.new h2:after {
    content: '';
    width: 40px;
    height: 2px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
	top:58px;
    background-color: #000;
}
#top-cont8.new h2 .sub {
    font-size: 12px;
    font-weight: normal;
    margin-top: 10px;
}
#top-cont8.new ul li figure img {
	border-radius:5px;
}

/* ブログ */
#blog.new {
	margin:80px auto;
}
#blog.new ul.list {
	display: grid;
    column-gap: calc(8% / 3);
    row-gap: 32px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	li {
		width: 100%;
		margin:0 !important;
	}
	@media screen and (max-width: 768px) {
		column-gap: 7%;
		row-gap: 20px;
		grid-template-columns: 1fr 1fr;
	}
}


#blog.new h2 .sub {
	font-size: 12px;
    font-weight: normal;
    margin-top: 10px;
}
#blog.new h2:after {
    content: '';
    width: 40px;
    height: 2px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
	top:58px;
    background-color: #000;
}
.h2-blog-img {
    position: absolute;
    width: 126px;
    right: -170px;
    top: -78px;
}
#blog ul.list.top-blog-list li p {
	padding: 0 !important;
}
@media (max-width: 765px) {
	#blog.new h2 span:first-child {
		line-height:1.2;
		display:inline-block;
	}
	#blog.new h2:after {
		top: 106px;
		bottom:auto;
	}
	#blog.new h2 span.list-title-link-new {
		bottom:-25px;
	}
	.h2-blog-img {
		display:none;
	}
}

/* topics */
#topics {
    padding: 180px 0 70px;
    background-color: #f6f4ee;
}
@media (max-width: 765px) {
    #topics {
        padding: 80px 0 70px;
    }
}
#topics h2 {
    font-family: 'Montserrat';
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    position: relative;
    color: #000;
    margin-bottom: 60px;
}
#topics h2 span {
    position: relative;
}
#topics h2 .sub {
    font-size: 12px;
    font-weight: normal;
    margin-top: 10px;
}
#topics h2:after {
    content: '';
    width: 40px;
    height: 2px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    top: 58px;
    background-color: #000;
}
.h2-topics-img {
    position: absolute;
    width: 126px;
    left: -170px;
    top: -78px;
}
@media (max-width: 765px) {
    .h2-topics-img {
        width: 50px;
        left: -100px;
        top: -28px;
    }
}
.topics-conts {
    background-image: url("../images/top/topics-bg.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 1200px;
    margin: 80px auto 0;
}
@media (max-width: 765px) {
    .topics-conts {
        background-size: 120%;
    }
}
.topics-conts .inner {
    max-width: 1060px;
    margin: 0 auto;
    padding: 60px;
    position: relative;
}
@media (max-width: 765px) {
    .topics-conts .inner {
        padding: 0 3%;
    }
}
.topics-conts .inner .fl {
    float: left;
    max-width: 493px;
    width: 48%;
    margin-bottom: 140px;
}
.topics-conts .inner .fr {
    float: right;
    max-width: 493px;
    width: 48%;
    margin-top: 70px;
}
@media (max-width: 900px) {
    .topics-conts .inner .fl {
        margin-bottom: 100px;
    }
}
@media (max-width: 765px) {
    .topics-conts .inner .fl {
        width: 75%;
        margin-bottom: 30px;
    }
    .topics-conts .inner .fr {
        width: 75%;
        margin-bottom: 30px;
        margin-top: 0;
    }
}
.topics-conts .inner .rocket {
    position: absolute;
    max-width: 176px;
    bottom: 70px;
    left: -20px;
}
@media (max-width: 765px) {
    .topics-conts .inner .rocket {
        max-width: 90px;
        left: -10px;
    }
}
#topics .topics-bg {
    width: 100%;
    height: 90px;
    background: url("../images/top/bg-logo.png")repeat-x;
    background-position: bottom;
    -webkit-animation: bgroop 40s linear infinite;
    animation: bgroop 40s linear infinite;
}
@media (max-width: 765px) {
    #topics .topics-bg {
        height: 45px;
        background-size: auto 100%;
    }
}
@-webkit-keyframes bgroop {
    from {
        background-position: 0  0;
    }
    to {
        background-position: -1956px 0;
    }
}
@keyframes bgroop {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1956px 0;
    }
}

/* message */
#message {
    padding: 0 0 100px;
}
@media (max-width: 765px) {
    #message {
        padding: 0 0 40px;
    }
}
#message h2 {
    font-family: 'Montserrat';
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    position: relative;
    color: #000;
    margin-bottom: 60px;
}
#message h2 span {
    position: relative;
}
#message h2:after {
    content: '';
    width: 40px;
    height: 2px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    top: 58px;
    background-color: #000;
}
#message h2 .sub {
	font-size: 12px;
    font-weight: normal;
    margin-top: 10px;
}
.h2-message-img {
    position: absolute;
    width: 182px;
    left: -272px;
    top: -78px;
}
#message .panel-group {
	text-align:left;
}
@media (max-width: 765px) {
    .h2-message-img {
        width: 73px;
        left: -109px;
        top: -31px;
    }
}
#message .inner {
    max-width: 1000px;
    margin: 0 auto;
    width: 92%;
}
#message .tab-group{
    display: flex;
    position: relative;
    z-index: 1;
    justify-content: center;
}
#message .tab{
    flex-grow: 1;
    padding:10px 5px;
    list-style:none;
    background-color: #cac7b8;
    border-radius: 10px 10px 0 0;
    margin-right: 10px;
    text-align:center;
    cursor:pointer;
    font-weight: bold;
    color: #1a1a1a;
    box-sizing: border-box;
    font-size: 20px;
    border:3px solid #cac7b8;
}
@media (max-width: 765px) {
    #message .tab{
        font-size: 14px;
        line-height: 1.4;
    }
    #message .tab.hogosya {
        padding-top: 19px;
    }
}
#message .tab:last-child {
    margin-right: 0;
}
#message .panel-group{
    padding: 75px;
    border:solid 3px #1a1a1a;
    position: relative;
    top:-3px;
    font-size: 18px;
    z-index: 2;
    background: #fff;
    color: #1a1a1a;
}
@media (max-width: 765px) {
    #message .panel-group{
        padding: 20px;
        font-size: 14px;
    }
}
#message .panel-group p {
    margin-bottom: 35px;
}
@media (max-width: 765px) {
    #message .panel-group p {
        margin-bottom: 20px;
    }
}
#message .panel-group .flex {
    display: flex;
    justify-content: center;
}
@media (max-width: 765px) {
    #message .panel-group .flex {
        display: block;
        text-align: center;
    }
}
#message .panel-group .flex .btn {
    margin: 0;
}
@media (max-width: 765px) {
    #message .panel-group .flex .btn {
        margin: 0 auto;
    }
}
#message .panel-group .flex .btn:first-child {
    margin-right: 25px;
}
@media (max-width: 765px) {
    #message .panel-group .flex .btn:first-child {
        margin-right: auto;
        margin-bottom: 15px;
    }
}
#message .panel-group .btn {
    width: 262px;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    background-color: #fefcc6;
    border:solid 3px #1a1a1a;
    border-radius: 10px;
    color: #1a1a1a;
    display: block;
    text-decoration: none;
    box-shadow: 4px 4px rgba(0,0,0,0.2);
    margin: 0 auto;
    font-weight: bold;
}
#message .panel-group .btn:after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 10px;
    background-image: url("../images/btn-arrow.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    top:50%;
    margin-top: -5px;
    right: 10px;
    position: absolute;
}
#message .panel{
    display:none;
}
#message .tab.is-active{
    background:#ffc80b;
    border:3px solid #1b1b1b;
    color:#1b1b1b;
    transition: all 0.2s ease-out;
}
#message .panel.is-show{
    display:block;
}
#message h3 {
    position: relative;
    background-color: #f46e07;
    max-width: 760px;
    color: #fff;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    padding: 30px;
    margin: 0 auto;
    border-radius: 10px;
    line-height: 1.6;
}
@media (max-width: 765px) {
    #message h3 {
        font-size: 15px;
        padding: 18px
    }
}
#message h3:before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 0;
    right: 0;
    bottom: -15px;
    margin: 0 auto;
    border-top: 15px solid #f46e07;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}
.h3-message-img {
    position: absolute;
    width: 186px;
    left: -88px;
    top: -78px;
}
@media (max-width: 765px) {
    .h3-message-img {
        width: 81px;
        left: 0;
        top: -50px;
    }
}
#message .bg-y {
    background-color: #f9be00;
    margin: 52px auto 0;
    padding-bottom: 50px;
}
@media (max-width: 765px) {
    #message .bg-y {
        padding-bottom: 30px;
    }
}
#message .bg-y .img {
    width: 105.9%;
    margin-top: -25px;
    margin-left: -1.7%;
}
@media (max-width: 765px) {
    #message .bg-y .img {
        margin-top: -11px;
        margin-left: -1.7%;
    }
}
#message .bg-y .title {
    font-weight: bold;
    font-size: 28px;
    text-align: center;
    margin: 35px auto;
    color: #fff;
}
@media (max-width: 765px) {
    #message .bg-y .title {
        font-size: 16px;
        margin: 15px auto;
    }
}
#message .bg-y .btn {
    width: 262px;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    color: #1a1a1a;
    display: block;
    text-decoration: none;
    box-shadow: 4px 4px rgba(0,0,0,0.2);
    margin: 0 auto;
    font-weight: bold;
}
@media (max-width: 765px) {
    #message .bg-y .btn {
        width: 200px;
    }
}
#message .bg-y .btn:after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 10px;
    background-image: url("../images/btn-arrow.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    top:50%;
    margin-top: -5px;
    right: 10px;
    position: absolute;
}

.modaal-container {
    max-width: 660px;
    margin: 0 auto;
}
.modaal-container .modaal-inner01 {
    background: #ffc80b;
    border: 3px solid #231815;
    padding: 35px;
    box-sizing: border-box;
    max-width: 660px;
    margin: 0 auto;
    border-radius: 10px;
    color: #231815;
    font-size: 16px;
    line-height: 1.4;
}
@media (max-width: 765px) {
    .modaal-container .modaal-inner01 {
        font-size: 13px;
        width: 92%;
    }
}
.modaal-container .modaal-inner01 .title {
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: bold;
}
.modaal-container .modaal-inner01 .title span {
    background: linear-gradient(transparent 70%, #ff8991 70%);
}
@media (max-width: 765px) {
    .modaal-container .modaal-inner01 .title {
        font-size: 17px;
    }
}
.modaal-container .modaal-inner01 .sub {
    font-size: 15px;
}
@media (max-width: 765px) {
    .modaal-container .modaal-inner01 .sub {
        font-size: 12px;
    }
}
.modaal-container .modaal-inner01 img {
    margin-bottom: 25px;
    width: 100%;
}
.modaal-container .modaal-inner01 p {
    margin-bottom: 25px;
}
.modaal-container .modaal-inner01 p span {
    color: #e05300;
    font-weight: bold;
}
.modaal-container .modaal-inner01 .btn-more {
	display:block;
	max-width:280px;
	border-radius:30px;
	background:#000;
	text-align:center;
	color:#fff;
	text-decoration:none;
	margin:20px auto;
}

/* 2022/12/12追記 */
.footer-info {
	width: 95%;
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 30px;
}
.footer-info .title {
	color:#faab00;
	border-bottom:1px solid #faab00;
	font-size:24px;
	font-weight:bold;
	margin-bottom:30px;
	padding-bottom:10px;
}
.footer-hukidasi {
	display:inline-block;
	position:relative;
	color:#faab00;
	font-size:18px;
	font-weight:bold;
	margin-bottom:10px;
}
.footer-hukidasi:before {
	content:'';
	position:absolute;
	left:-26px;
	top:50%;
	width:22px;
	height:20px;
	margin-top:-10px;
	background-image:url('../images/footer-hukidashi01.png');
	background-repeat:no-repeat;
	background-size:100% auto;
}
.footer-hukidasi:after {
	content:'';
	position:absolute;
	right:-26px;
	top:50%;
	width:22px;
	height:20px;
	margin-top:-10px;
	background-image:url('../images/footer-hukidashi02.png');
	background-repeat:no-repeat;
	background-size:100% auto;
}
.footer-flex {
	display:flex;
	justify-content:space-between;
	max-width:800px;
	margin:0 auto;
}
.footer-flex>div {
	width:48%;
}
.footer-flex.event>div:first-child {
	width:40%;
}
.footer-flex.event>div:last-child {
	width:56%;
}
.btn01 {
	display:block;
	max-width:320px;
	width:100%;
	margin:0 auto;
	border-radius:15px;
	text-align:center;
	font-weight:bold;
	color:#faab00;
	font-size:18px;
	height:78px;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
.btn01:after {
	content:'';
	position:absolute;
	right:15px;
	top:50%;
	width:18px;
	height:26px;
	margin-top:-13px;
	background-image:url('../images/footer-arrow-btn.png');
	background-repeat:no-repeat;
	background-size:100% auto;
	box-sizing:border-box;
}
.btn01.siryou {
	background-color:#fff;
	border:2px solid #faab00;
	position:relative;
	margin-bottom:40px;
}
.btn01.siryou:before {
	content:'';
	position:absolute;
	left:30px;
	top:50%;
	width:30px;
	height:40px;
	margin-top:-20px;
	background-image:url('../images/nav2-icon1.svg');
	background-repeat:no-repeat;
	background-size:100% auto;
	box-sizing:border-box;
}
.btn01.soudan {
	background-color:#fff;
	border:2px solid #faab00;
	position:relative;
}
.btn01.soudan:before {
	content:'';
	position:absolute;
	left:20px;
	top:50%;
	width:44px;
	height:36px;
	margin-top:-18px;
	background-image:url('../images/nav2-icon3.svg');
	background-repeat:no-repeat;
	background-size:100% auto;
	box-sizing:border-box;
}
.btn01.setsumei {
	background-color:#fff;
	border:2px solid #faab00;
	position:relative;
	margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
	.footer-info .title {
		font-size:19px;
	}
	.footer-hukidasi{
		font-size:16px;
	}
	.footer-flex {
		display:block;
	}
	.footer-flex>div {
		width:100%;
	}
	.footer-flex.event>div:first-child {
		width:100%;
	}
	.footer-flex.event>div:last-child {
		width:100%;
	}
	.footer-flex>div:first-child {
		margin-bottom:20px;
	}
}



/* footer上 */
.contactArea-conts {
	 font-family: "Noto Sans JP", sans-serif;
	 padding: 60px 0;
	 background: #ffefcb;
	 margin-top: 90px;

	 @media screen and (max-width: 768px) {
			padding: calc(80px / 2) 0;
			margin-top: calc(100px / 2);
	 }
	 & .sttl {
			position: relative;
	 }

	 & .lnk {
			width: 100%;
			border-radius: 5px;
			position: relative;
			display: grid;
			place-items: center;
			padding: 24px;
			background-color: #00BAFF;
			color: #fff;
			border: 2px solid #00BAFF;

          @media screen and (max-width: 768px) {
            padding: 12px 24px;
         }

			& span {
				 font-size: 14px;
			}

			& h3 {
				 font-size: 30px;
 				 display: flex;
 				 flex-direction: row;
 				 flex-wrap: wrap;
 				 align-items: center;
 				 margin-top: 8px;
            @media screen and (max-width: 768px) {
               font-size: 23px;
            }

				 &:before {
						content: "";
						position: relative;
						top: 0;
						height: 1px;
						display: inline-block;
						width: 100%;
						transition-duration: 0.3s;
						background: #fff;
				 }
			}

			&::after {
				 content: '';
				 position: absolute;
				 top: 50%;
				 right: 8.5px;
				 width: 10px;
				 height: 10px;
				 border-right: 2px solid #fff;
				 border-bottom: 2px solid #fff;
				 transform: translate(-50%, -50%) rotate(315deg);
			}
	 }

	 & .row {
			display: flex;
			align-items: stretch;
			gap: 16px;
			flex-wrap: nowrap;
			justify-content: space-between;

			&:not(:first-of-type) {
            margin-top: 16px;
            & .lnk {
               @media screen and (max-width: 768px) {
                  padding: 16px 24px;
               }
            }
				 & .lnk h3:before {
						background: #fff;
				 }

				 & .lnk:hover {
						background: #fff;
						color: #000;
						opacity: 1;

						& h3:before {
							 background: #000;
						}

						&::after {
							 border-right: 2px solid #00BAFF;
							 border-bottom: 2px solid #00BAFF;
						}
				 }

            & .lnk-line {
               border-color: #06C755;
               background-color: #fff;
               color: #06C755;
               max-width: 432px;
               margin: 0 auto;
               padding-left: 64px;
               position: relative;
			   @media screen and (max-width: 768px) {
				padding-left: 48px;
			   }
               &:before {
                  content: "";
                  display: block;
                  position: absolute;
                  left: 20px;
                  background: url(../images/icon_line.svg) no-repeat center;
                  background-size: contain;
                  width: 48px;
                  height: 48px;
                  @media screen and (max-width: 768px) {
                     width: 32px;
                     height: 32px;
                     left: 12px;
                  }
               }
				& span {
					position: relative;
					left: -6px;
					font-size: 16px;
					letter-spacing: -.05em;
					small {
						font-size: .85em;
						margin-left: -.5em;
					}
					@media screen and (max-width: 768px) {
						font-size: 13px;
					}
				}
               & h3 {
                  font-size: 28px;
                  font-feature-settings: "palt";
                  letter-spacing: .025em;
                  @media screen and (max-width: 768px) {
                     font-size: 22px;
					 letter-spacing: .05em;
                  }

               }
               & h3:before {
                     background: #06C755;
               }

               &::after {
                     border-right: 2px solid #06C755;
                     border-bottom: 2px solid #06C755;
               }

               &:hover {
                  border-color: #05b34c;
                     background: #05b34c;
                     color: #fff;
                     opacity: 1;
                     position: relative;

                     &:before {
                        filter: brightness(90%);
                     }

                     & h3:before {
                        background: #fff;
                     }

                     &::after {
                        border-right: 2px solid #fff;
                        border-bottom: 2px solid #fff;
                     }
               }
               &:active {
                  border-color: #048b3b;
                  background: #048b3b;
                     &:before {
                        filter: brightness(70%);
                     } 
               }
            }

			}

			&:nth-of-type(2) {

				 & .lnk {
						background-color: #fff;
						color: #000;

						& h3:before {
							 background: #00BAFF;
						}

						&::after {
							 border-right: 2px solid #00BAFF;
							 border-bottom: 2px solid #00BAFF;
						}

						&:hover {
							 background: #00BAFF;
							 color: #fff;
							 opacity: 1;

							 & h3:before {
									background: #fff;
							 }

							 &::after {
									border-right: 2px solid #fff;
									border-bottom: 2px solid #fff;
							 }
						}
				 }
			}

			@media screen and (max-width: 768px) {
				 display: block;

				 & .lnk:not(:last-child) {
					 margin-bottom: 12px;
				 }
			}
	 }
}

.contact-sns {
	 margin: 90px auto 80px !important;
	 @media screen and (max-width: 768px) {
		margin: calc(100px / 2) auto 80px !important;
	}
	 & .sttl {
			position: relative;
	 }
	 & .snsArea .contentsBox {
     width: 20%;
     margin: 0 auto;
     padding: 0;
     color: #000;
     font-size: 10px;
     line-height: 2;
     text-align: center;
	 }
	 .snsArea .contentsBoxPic {
	    width: 40px;
	    margin: 0 auto;
	    padding: 0;
       a {
         &:hover {
            opacity: 1;
            img {
               filter: brightness(90%);
            }
         }
         &:active {
            img {
              filter: brightness(70%);
            }
         }
       }

			@media screen and (max-width: 768px) {
				width: 34px;
				margin: 0 auto;
				padding: 0;
			}
		}

	 & .snsArea {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			width: 100%;
			max-width: 850px;
			margin: 0 auto;
			padding: 0;
	 }
	 .snsArea .contentsBox {
			width: 5% !important;
			margin: 0 20px !important;

			@media screen and (max-width: 575px) {
				 width: auto !important;
				 margin: 0 auto !important;
			}
	 }
}

.section-hdng {
   font-family: 'Montserrat';
   font-size: 38px;
   font-weight: bold;
   text-align: center;
   position: relative;
   color: #000;
   margin-bottom: initial !important;
   display: flex;
   align-items: center;
   flex-direction: column;
   z-index: 1;
   padding-bottom: 40px !important;

   @media screen and (max-width: 768px) {
     padding-bottom: calc(63px / 2) !important;
   }

   &::after {
      content: initial !important;
   }

   & .sttl {
      font-size: 12px !important;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 700;
      color: #333333;
	  position: relative;

      &::before {
         content: "";
         width: 22px;
         height: 50px;
         border-top: 27px solid #f1c40f;
         border-right: 27px solid transparent;
         position: absolute;
         left: -7px;
         top: -3px;
         z-index: -1;
      }
   }

   & .ttl {
      font-size: 34px;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 700;
      letter-spacing:.025em;
      font-style: normal;
      color: #333333;
      line-height: 40px;
      margin-top: 16px;
      @media screen and (max-width: 768px) {
         font-size: calc(60px / 2);
         margin-top: calc(35px / 2);
         & .btn_area {
            font-size: 30px;
         }
      }
   }

   & .ttl,
     .sttl {
      margin-left: initial;
   }
}

/* ===== custom.css ここから（GROPによる追加CSS） ===== */
/*---------------------------------------------------------------------------------------
	Custom settings GROPによる追加CSS
----------------------------------------------------------------------------------------*/

/* ■■■既存CSS修正■■■ */
/* フッター */
footer dl.fsns{
	padding: 0 5% 65px;
}

footer dl.fsns dt{
    display: inline-block;
	padding: 6px 40px;
	margin-bottom: 20px;
	position: relative;
	font-size: 1.8rem;
}
footer dl.fsns dt:before,
footer dl.fsns dt:after{
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	width: 20px;
	height: 42px;
}
footer dl.fsns dt:before{ left: 0; background: url("../images/fsns-left.png") no-repeat;}
footer dl.fsns dt:after{ right: 0; background: url("../images/fsns-right.png") no-repeat;}

footer dl.fsns li:not(:last-child) {
  margin-right: 5%;
}

footer dl.fsns li {
  display: inline-block;
  width: 18%;
  max-width: 50px;
}

footer dl.fsns li a {
  display: block;
  background: none;
}


ul.nav2 li .icon4:before {
  height: 22px;
   background: url("../images/nav2-icon4.svg") center / 25px auto no-repeat;
}

@media screen and (max-width: 1100px) {
  footer dl.fsns {
    padding: 0;
  }

  footer dl.fsns li {
    display: inline-block;
    width: 20%;
    max-width: 50px;
    margin: 0;
  }
}

@media screen and (max-width: 768px) {
  footer dl.fsns {
    padding: 0;
  }

  footer dl.fsns li {
    display: inline-block;
    width: 20%;
    max-width: 60px;
    margin: 0 5vw;
  }

  footer dl.fsns li:not(:last-child) {
    margin-right: 1.25%;
  }
}


/* ■■■共通部分■■■ */

.mb40imp {
    margin-bottom: 40px !important;
}


/* PC限定改行（<br class="brPc">と記述） */
@media screen and (max-width: 768px) {
  .brPc {
    display:none; 
  }
}

/* SP限定改行（<br class="brSp">と記述） */
.brSp {
  display:none; 
}

@media screen and (max-width: 768px) {
  .brSp {
    display:block; 
  }
}

.fs12 {
  display:block;
  font-size: 12px;
  line-height: 1.5;
}

/* ■■■申込みボタン■■■ */
.btn_tell a {
  display: flex;
  align-items: center;
  margin: 10px auto;
  padding: 1em 1.3em;
  width: 300px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  background-color: #fa8100;
  border-radius: 50vh;	
  box-shadow:0 6px 0 0 #d46110;/*cssの影の機能を利用してボタンの側面を描いています。ボタンの色より暗い色を指定しましょう*/
  transform: translateY(-6px);/*影を使って側面を描いた分、ボタンを上に移動しています*/
}

.btn_tell img {
  width: 30px;
}

.btn_web a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px auto;
  padding: 1em 2em;
  width: 300px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background-color: #faab00;
  border-radius: 50vh;	
  box-shadow:0 6px 0 0 #e07e15;/*cssの影の機能を利用してボタンの側面を描いています。ボタンの色より暗い色を指定しましょう*/
  transform: translateY(-6px);/*影を使って側面を描いた分、ボタンを上に移動しています*/
}

.btn_web a:hover {
  text-decoration: none;
  opacity: 70%;
}

.btn_web img {
  width: 30px;
}

.btn_web img.btnarrow {
  width: 18px;
}


/* ■■■トップページ■■■ */




/* ブログ */
#blog h2.toppage {
  font-size: 2.8rem;
  font-weight: normal;
  text-align: left;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #d2d2d2;
}

#blog .bd-btm {
  border-bottom: none;
  padding-bottom: 0;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  #blog h2.toppage {
    font-size: 2rem;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  #blog .bd-btm {
    border-bottom: none;
    padding-bottom: 0;
  }
}



/* ■■■中学生の皆さん■■■ */
.headFeature {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .headFeature {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}


/* スマホ用 */
@media screen and (max-width: 768px) {
  #headerWrap2{
    height: 13vw;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(255, 255, 255, 1);
  }

  #fade-in2{
    display: none;
  }

  #headerWrap2 .infoArea{
    display: none;
  }

  #headerWrap2 .gnaviArea{
    display: none;
  }
}
/* PC GlobalMenu END*/


/* SP GlobalMenu */
/* nav.globalMenuSp {
  position: absolute;
  overflow-y: scroll;
  z-index: 9998;
  top: 0;
  right: 0;
  background: #FFF;
  color: #FFF;
  text-align:left;
  transform: translateY(-100%);
  transition: all 0.6s;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}
 
nav.globalMenuSp ul {
  background: #FFF;
  color: #333;
  margin: 16vw auto 0;
  padding: 0;
  width: 100%;
}
 
nav.globalMenuSp ul li {
  font-size: 1.1em;
  list-style-type: none;
  padding: 0;
  width: 100%;
}
 
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
 
nav.globalMenuSp ul li a {
  display: block;
  color: #333;
  padding: 1.5em 2em;
  text-decoration: none;
}
 
nav.globalMenuSp.active {
  transform: translateY(0%);
} */


ul#pMenu li a{/* ここがすべてに影響 */
  border-bottom:  solid 1px #333;
}

ul#pMenu li a:last-child{/* すべてに影響 
  border-bottom:  none;*/
}

/*SERVICEメニュー*/
h3.open_h3{
  border-bottom: solid 1px #999;
  padding: 1.9em 2em 1.6em 1.9em;
  font-size: 1.1em;
  font-weight: normal;
  margin: 0;
}

/*サービス子メニュー*/
#sMenu.ul_open.open-5{
  margin: 0 auto;
}

ul#sMenu.ul_open.open-5 li{
  background-color: #ffeec9;
  padding: 0 0 0 1em;
}


ul#sMenu.ul_open.open-5 li a{
  border-bottom: none;
  padding: 1.1em 0 1.1em 2em;/*サービス子メニュー高さ調整*/
}

.open_h3:after, 
.open_h3.active:after {
  float: right;   /*▲位置指定　paddingは129行で調整*/
}
.open_h3.active::after {
  content: "▲";
}
.open_h3::after {
  content: "▼"
}
.info{
  font-size: 13px;
}
.title{
  /*margin-top: 50px;
  margin-bottom: 10px;*/
  font-size: 22px;
  font-weight: lighter;
}
.img-close,
.img-close img{
  width: 50px;
  height: 50px;
}

/* タブレット用 */
@media screen and (max-width: 1100px) and (min-width: 768px) {
  h1.gnaviSP {
    width: 30vw;
    z-index: 0;
    margin: 0;
    padding: 1vw 0.5rem;
  }
}

/* スマホ用 */
@media screen and (max-width: 767px) {
  h1.gnaviSP {
    width: 50vw;
    z-index: 0;
    margin: 0;
    padding: 1vh 0.5rem;
	z-index:1;
  }
  h1.gnaviSP-new {
    top: 0;
  }
  h1.gnaviSP-new a {
    margin: 0 auto;
  }
  .navToggle {
    right: 3rem;
    top: 0.7vw;/* 12px */
    background-color: rgba(255, 255, 255, 0);
  }
}

/* オリジナルから移植したメニュー */
.globalMenuSp .sp_other-menu {
	width: 80%;
	margin: 30px auto 100px;
}
.globalMenuSp .sp_other-menu li {
	margin-bottom: 10px;
}
.globalMenuSp .sp_other-menu li a {
	display: block;
    padding: 1.2rem 0 1.2rem 5rem;
	font-size: 1.7rem;
	background-color: #fff;
	border: 1px solid #d2d2d2;
	position: relative;
}
.globalMenuSp .sp_other-menu li a.btn_request {
	background: #fff url("../images/contact-icon1.svg") no-repeat left 20px center;
	background-size: 15px auto;
}
.globalMenuSp .sp_other-menu li a.btn_contact {
	background: #fff url("../images/contact-icon5.svg?201130") no-repeat left 20px center;
	background-size: 18px auto;
}
.globalMenuSp .sp_other-menu li a.btn_application {
	background: #fff url("../images/contact-icon4.svg") no-repeat left 20px center;
	background-size: 18px auto;
}

/*---------------------------------------------------------------------------------------
	2021/12/23　トップページ改修による追加＆新規CSS
----------------------------------------------------------------------------------------*/
/* ■■■既存CSS修正 ヘッダー■■■ */
header.pconly .headerwrap {
	position:relative;
	max-width: 1000px;
	padding: 15px 3% 15px;
}
header.pconly .headerwrap .hnav {
	float: none;
    position: absolute;
    right: 0;
}
header.pconly .headerwrap h1 {
	float: none;
    width: 100%;
    text-align: center;
    margin-top: 65px;
	margin-bottom:20px
}
header.pconly .headerwrap h1 a img {
	width: 386px;
}
header.pconly .headerwrap .hnav li {
	border:none;
}
header.pconly .headerwrap .hnav li:first-child {
	border:none;
}
header.pconly .headerwrap .hnav li a {
	font-size:12px;
}
#headerWrap2 {
	height: 45px;
    padding: 2px 0;
}
/* responsive */
@media screen and (max-width: 768px) {
	#headerWrap2 {
		margin-top:12px;
	}
	#headerWrap2.headerWrap2-top {
		position:fixed;
		left:0;
		top:0;
		padding: 0;
		margin-top:0;
	}
	header.pconly .headerwrap h1 {
		text-align:left;
	}
	header.pconly .headerwrap h1 a img {
		width:60%;
	}	
}

/* ■■■既存CSS修正 メインビジュアル■■■ */

/* ■■■新規CSS追加 トップページサブナビ追加■■■ */
#top-sub-nav {
	width:96%;
	max-width:800px;
	margin:0 auto;
}
#top-sub-nav ul {
	display:flex;
}
#top-sub-nav ul li {
	width:33.33%;
	font-size:15px;
}
#top-sub-nav ul li:first-child {
	border-left: 1px solid #323232;
}
#top-sub-nav ul li {
    border-left: 0;
    border-right: 1px solid #323232;
}
/* responsive */
@media screen and (max-width: 768px) {
	#top-sub-nav ul li {
		font-size:12px;
	}
	#top-sub-nav ul li span {
		font-size:10px;
	}
}
/* ■■■新規CSS追加 #top-cont9■■■ */
#top-cont9 {
	max-width:720px;
	margin:40px auto;
	width:90%;
}
/* ■■■新規CSS追加 トップページサブナビ追加■■■ */
#top-cont7 {
	max-width:580px;
	width:84%;
	display:flex;
	margin:50px auto 30px;
	-webkit-justify-content: space-between;
    justify-content: space-between;
}
#top-cont7>div {
	width:48%;
	text-align:center;
	font-size:15px;
}
#top-cont7>div a {
	display:block;
	width:100%;
}
#top-cont7>div a figure {
	position: relative;
    width: 100%;
    height: 0;
    padding-top: 55%;
    overflow: hidden;
	margin-bottom:10px;
}
#top-cont7>div a figure img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: .3s all;
}
#top-cont7>div a:hover figure img{
	transform: scale(1.07);
}
/* responsive */
@media screen and (max-width: 768px) {
	#top-cont7 {
		margin-top:0;
		margin-bottom:20px;
	}
	#top-cont7 {
		display:block;
	}
	#top-cont7>div {
		width:100%;
	}
	#top-cont7>div:first-child {
		margin-bottom:20px;
	}
}
/* ■■■既存CSS修正 トップページタイトル■■■ */
#top-cont2 h2.top-h2-title {
	color:#faab00;
	border:none;
}
#top-cont2 h2.top-h2-title span {
	color:#323232;
	font-size:12px;
}
#top-cont8 h2.top-h2-title {
    font-size: 2.8rem;
    font-weight: normal;
    text-align: left;
    padding-bottom: 20px;
    margin-bottom: 30px;
	color:#faab00;
}
#top-cont8 h2.top-h2-title span {
	color:#323232;
	font-size: 12px;
    margin-left: 1.5rem;
}
#blog h2.toppage {
	color:#faab00;
	border:none;
}
#blog h2.toppage span {
	color:#323232;
}
.list-title-link.list-title-link-new a {
	background: url(../images/top-icon_arrow-yellow.png);
    padding-left: 35px;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 20px 20px;
	padding-right:0;
}
#contact.top-contact h3.top-h3-title {
	font-size: 2.8rem;
    font-weight: normal;
    text-align: left;
    padding-bottom: 20px;
    margin-bottom: 30px;
	color: #faab00;
}
#contact.top-contact h3.top-h3-title span {
	font-size: 1.6rem;
    margin-left: 1.5rem;
	color:#323232;
}
/* responsive */
@media screen and (max-width: 768px) {

	#top-cont8 h2.top-h2-title {
		font-size: 2rem;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	#top-cont8 h2.top-h2-title span {
		font-size: 1.3rem;
		margin-left: 1rem;
		margin-top: 8px;
	}
	#blog h2.toppage {
		font-size: 2rem;
		padding-bottom: 10px;
	}
	#blog h2.toppage span {
		font-size: 1.3rem;
		margin-left: 1rem;
		margin-top: 8px;
	}
	#contact.top-contact {
		margin-bottom:10px;
	}
	#contact.top-contact h3.top-h3-title {
		font-size: 2rem;
		padding-bottom: 10px;
		margin-bottom:10px;
	}
	#contact.top-contact h3.top-h3-title span {
		font-size: 1.3rem;
		margin-left: 1rem;
		margin-top: 8px;
	}
}
/* ■■■既存CSS修正 トップページ共通■■■ */
.wrap.wrap800 {
	max-width:800px;
}
/* ■■■既存CSS修正 トップページ新着情報■■■ */
#top-cont2 {
	margin-bottom:10px;
}
#top-cont2 dl {
	max-width: 580px;
	width:100%;
    margin: 0 auto;
	border:none;
}
#top-cont2 dl dt span.new {
	background: #fff;
	border: 1px solid #faab00;
	color:#323232;
}
#top-cont2 dl dd a {
	text-decoration:underline;
}
/* responsive */
@media screen and (max-width: 768px) {
	#top-cont2 dl dd a {
		font-size:14px;
	}
}
/* ■■■新規CSS追加 トップページワオ高の特徴■■■ */
#top-cont8 {
	max-width:800px;
	width:90%;
	margin:0 auto;
	padding: 50px 0 10px;
}

#top-cont8 ul li a {
	display:block;
	width:100%;
}
#top-cont8 ul li a {
	display:block;
	width:100%;
}
#top-cont8 ul li a .new-ttl {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
	  text-align: center;
}
#top-cont8 ul li a figure {
	position: relative;
    width: 100%;
    height: 0;
    padding-top: 55%;
    overflow: hidden;
}
#top-cont8 ul li figure img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transition: .3s all;
}
#top-cont8 ul li:hover figure img{
	transform: scale(1.07);
}
#top-cont8 ul li .contents {
	width:100%;
	box-sizing:border-box;
	padding:10px;
	font-size:12px;
	text-align:left;
}
#top-cont8 ul li .contents.new {
	padding: 20px 10px 10px 10px;
}
#top-cont8 ul li .contents .title {
	font-size:18px;
	font-weight:bold;
	margin-bottom:10px;
}
#top-cont8 ul li .contents .link {
	text-align:right;
	display:block;
}
#top-cont8 ul li .contents .link.yellow {
	color: #E6B92C;
    font-size: 14px;
    margin-top: 25px;
    font-weight: bold;
}
/* responsive */
@media screen and (max-width: 768px) {
	#top-cont8 ul li .contents {
		font-size:13px;
	}
	#top-cont8 ul li .contents .title {
		font-size:20px;
	}
}
/* ■■■既存CSS修正 トップページブログリスト■■■ */

#blog ul.list.top-blog-list li figure {
	border-radius:0;
}
#blog ul.list.top-blog-list li.top-blog-item span.cate {
	background: #fff;
    border: 1px solid #faab00;
    color: #323232;
}
#blog ul.list.top-blog-list li p {
	padding:10px 0 0;
	font-size: 14px;
    line-height: 1.6;
}

/* ■■■既存CSS修正 トップページ学びに、自由を■■■ */
#top-cont5 {
	max-width:580px;
	display: block;
	padding-top:20px;
	padding-bottom:50px;
}
#top-cont5 h2 {
	display: block;
}
#top-cont5 h2 strong {
	color:#faab00;
}
#top-cont5 div {
	width:100%;
	display: block;
}
/* responsive */
@media screen and (max-width: 768px) {
	#top-cont5 {
		padding-bottom:20px;
	}
	#top-cont5 h2 {
		font-size:15px;
	}
	#top-cont5 h2 strong {
		font-size:22px;
	}
	#top-cont5 div p {
		font-size:14px;
	}
	#top-cont5 div dl {
		font-size:14px;
	}
}
/* ■■■既存CSS修正 トップページお問い合わせ■■■ */
#contact .wrap {
	padding-left: 5%;
    padding-right: 5%;
}
#contact.top-contact {
	background:none;
	color:#323232;
	padding-bottom:10px;
}
#contact.top-contact h3.top-h3-title {
	margin-bottom:0;
}
#contact.top-contact .tel-contact {
	text-align:center;
	margin-bottom: 20px;
}
#contact.top-contact .tel-contact>div {
	display:inline-block;
	text-align:left;
}
#contact.top-contact .tel-contact>div .title {
	display: inline-block;
    padding: 2px 1.5rem;
    font-size: 1.3rem;
	border: 1px solid #faab00;
    color: #323232;
}
#contact.top-contact .tel-contact>div .number {
	font-size:38px;
	letter-spacing: 4px;
}
#contact ul li {
	border-left: 1px solid;
	font-size:13px;
}
#contact ul li:last-child {
    border-right: 1px solid;
}
#contact ul li a {
	padding: 10px 30px 10px 50px;
}
#contact ul li a.icon1{ 
	background: url("../images/contact-icon1-yellow.svg") left 23px center / 12px auto no-repeat, url("../images/arrows-right-yellow.svg") right 20px center / 6px auto no-repeat #fff;
}
#contact ul li a.icon2{ 
	background: url("../images/contact-icon2-yellow.svg") left 22px center / 14px auto no-repeat, url("../images/arrows-right-yellow.svg") right 20px center / 6px auto no-repeat #fff;
}
#contact ul li a.icon3{ 
	background: url("../images/contact-icon3-yellow.svg") left 20px center / 17px auto no-repeat, url("../images/arrows-right-yellow.svg") right 20px center / 6px auto no-repeat #fff;
}
#contact ul li a.icon4{ 
	background: url("../images/contact-icon4-yellow.svg") left 21px center / 15px auto no-repeat, url("../images/arrows-right-yellow.svg") right 20px center / 6px auto no-repeat #fff;
}
/* responsive */
@media screen and (max-width: 1000px) {
	#contact ul li:nth-child(2n) {
		border-right: 1px solid;
	}
}
@media screen and (max-width: 768px) {
	#contact.top-contact .tel-contact>div .number {
		font-size:26px;
	}
	#contact ul {
		width:240px;
		margin:0 auto;
	}
	#contact ul li {
		border-left:none;
		border-top:1px solid;
		margin-bottom: 0;
	}
	#contact ul li:nth-child(2n) {
		border-right: none;
	}
	#contact ul li:last-child {
		border-right:none;
		border-bottom: 1px solid;
	}
	#contact ul li a {
		font-size:14px;
		padding: 15px 30px 15px 50px;
	}
}
/* ■■■既存CSS修正 トップページフッターSNS■■■ */
footer dl.fsns.fsns-new {
	max-width: 800px;
    margin: 0 auto;
    padding: 0 0 65px;
}
footer dl.fsns.fsns-new dt {
	display: block;
    text-align: left;
	padding: 0;
}
footer dl.fsns.fsns-new dt:before,footer dl.fsns.fsns-new dt:after {
	content:none;
}
footer dl.fsns.fsns-new dt .title {
	font-size: 2.8rem;
    font-weight: normal;
    text-align: left;
    padding-bottom: 20px;
    margin-bottom: 0;
    color: #faab00;
}
footer dl.fsns.fsns-new dt .title span {
	font-size: 1.6rem;
    margin-left: 1.5rem;
    color: #323232;
}
/* responsive */
@media screen and (max-width: 768px) {
	footer dl.fsns.fsns-new {
		width:90%;
		padding: 0 0 10px;
	}
	footer dl.fsns.fsns-new li {
		width:15%;
	}
	footer dl.fsns.fsns-new dt {
		margin-bottom:10px;
	}
	footer dl.fsns.fsns-new dt .title {
		font-size: 2rem;
		padding-bottom: 10px;
	}
	footer dl.fsns.fsns-new dt .title span {
		font-size: 1.3rem;
		margin-left: 1rem;
		margin-top: 8px;
	}
}
/* ■■■新規CSS追加 フッターメニュー■■■ */
#footer {
	background:#f5f5f7;
}
#footer .footer-conts {
	max-width:800px;
	width:96%;
	padding:40px 20px;
	box-sizing:border-box;
	display:flex;
	margin: 0 auto;
	text-align:left;
	font-size: 14px;
	-webkit-justify-content: space-between;
    justify-content: space-between;
}
#footer .footer-conts>div ul {
	list-style:none;
	padding:0;
	margin:0;
}
#footer .footer-conts>div ul li {
	margin-bottom:40px;
	list-style:none;
}
#footer .footer-conts>div ul li a {
	color:#faab00;
	text-decoration:none;
}
#footer .footer-conts>div ul li ul,
#footer .footer-conts>div ul li dl {
	list-style:none;
	padding-left:20px;
	margin:10px 0 0;
}
#footer .footer-conts>div ul li dl {
  margin-top: 0;
}
#footer .footer-conts>div ul li dl dt {
	background: #faab00;
  color: #fff;
  display: inline-block;
  text-align: center;
  width: 200px;
  padding: 2px;
  margin: 10px 0;
  position: relative;
  left: -20px;
}
#footer .footer-conts>div ul li ul li,
#footer .footer-conts>div ul li dl dd {
	list-style:none;
	margin-bottom:5px;
	position:relative;
}
#footer .footer-conts>div ul li dl dd.no-arrow {
  position: relative;
  left: -20px;
}
#footer .footer-conts>div ul li dl dd + .no-arrow {
  margin-top: 1.25rem;
}
#footer .footer-conts>div ul li ul li:before,
#footer .footer-conts>div ul li dl dd:not(.no-arrow):before  {
	background: url(../images/top-icon_arrow-yellow.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
	content:'';
	width: 14px;
  height: 14px;
  position: absolute;
  top: 4px;
  left: -20px;
}
#footer .footer-conts>div ul li ul li a,
#footer .footer-conts>div ul li dl dd a {
	color:#231815;
}
#footer .footer-conts>div ul li ul li.coming {
	opacity:0.5;
}
#footer .footer-conts>div ul li ul li span {
	color:#231815;
}
#footer .footer-conts>div ul li ul li span.fs10 {
	font-size:10px;
	display:inline-block;
}

#footer .footer-conts>div ul li ul.footer-child li:before {
    background: unset;
    background-repeat: unset;
    background-size: unset;
    content: unset;
    width: unset;
    height: unset;
    position: unset;
    top: unset;
    left: unset;
 }
 .footer-child li {
    color: #FABE00;
    list-style-type: disc !important;
 }
 .footer-child-sp {
    padding-left: 55px;
 }
 .footer-child-sp li {
    padding: 0;
    border: 0;
    list-style-type: disc !important;
 }
 .footer-child-sp li a {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
 }
 .footer-child-sp li:last-child a {
    padding-bottom: 1.1rem;
 }

/* responsive */
@media screen and (max-width: 768px) {
	#footer .footer-conts {
		display:block;
	}
	#footer .footer-conts>div {
		width:100%;
		margin:0;
	}
}
/* ■■■既存CSS修正 フッターナビ■■■ */
footer ul.fnav {
	display:flex;
	margin: 30px auto;
	-webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
footer ul.fnav li {
	font-size: 14px;
	text-align: center;
	border-left:1px solid;
	padding:5px 30px;
}
footer ul.fnav li:last-child {
	border-right:1px solid;
}
/* responsive */
@media screen and (max-width: 768px) {
	footer ul.fnav {
		width: 80%;
		display:block;
		margin: 30px auto 0;
	}
	footer ul.fnav li {
		border-top:1px solid;
		border-left:none;
		padding:15px;
	}
	footer ul.fnav li:last-child {
		border-right:none;
		border-bottom:1px solid;
	}
	footer ul.fnav li a {
		font-size: 14px;
		text-align: center;
	}
	ul.nav2 li a {
		font-size: 12px;
		padding: 8px 3px;
	}
}
/* ■■■既存CSS修正 スマホ用メニュー■■■ */
.sp_gnav-menu li.coming {
	opacity: 0.5;
}
.sp_gnav-menu li span {
	display: block;
    text-align: left;
    padding: 1.1rem 1.5rem 0;
    font-size: 1.7rem;
}
.sp_gnav-menu li span.fs10 {
	font-size:10px;
	padding:0 1.5rem 1.1rem;
}
/* ■■■各タイトルセンタリング■■■ */
#top-cont8 h2.top-h2-title {
	text-align: center;
}
#blog h2.toppage {
	position:relative;
    text-align: center;
}
#contact.top-contact h3.top-h3-title {
	text-align: center;
}
#contact.top-contact .tel-contact>div {
	text-align: center;
}
footer dl.fsns.fsns-new dt .title {
	text-align: center;
}
.list-title-link {
	position: absolute;
	right: 0;
}

header.pconly .headerwrap .hnav {
	left: 0;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
@media screen and (max-width: 768px) {
	#top-cont8 h2.top-h2-title {
		text-align:left;
	}
	#blog h2.toppage {
		text-align:left;
	}
	#contact.top-contact h3.top-h3-title {
		text-align:left;
	}
	#contact.top-contact .tel-contact>div {
		text-align:left;
	}
	footer dl.fsns.fsns-new dt .title {
		text-align:left;
	}
}


/* ■■■LINE風チャット画面■■■ */

.lineContainer {
  padding:0;
  background: #fff5cc;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
}

/* タイトル部分 */
.lineContainer .lineTitle {
  background: #faab00;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  color: #ffffff;
}

/* 会話部分 */
.lineContainer .lineContents {
  padding: 20px 15px;
  overflow: hidden;
  line-height: 1.4;
}

.lineContainer .scroll {
  height: 500px;
  overflow-y: scroll;
}

/* 左側の会話 */
.lineContainer .lineLeft {
  position: relative;
  display: block;
  margin: 5px 0;
  max-width: 75%;
  float: left;
  clear: both;
}

/* アイコン画像 */
.lineContainer .lineLeft figure {
  width: 50px;
  position: absolute;
  top: 15px;
  left: 0;
  padding: 0;
  margin: 0;
}

/* アイコン画像（正方形）を円形に切り抜き */
.lineContainer .lineLeft figure img{
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.lineContainer .lineLeft .lineLeftText {
  margin-left: 70px;
}

.lineContainer .lineLeft .lineLeftText .name {
  font-size: 14px;
  color: #333;
}

.lineContainer .lineLeft .lineLeftText .picture img {
  border-radius: 8px;
  width: 65%;
}

/* コメントエリア */
.lineContainer .lineLeft .textA {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #ffffff;
}

/* 吹き出し */
.lineContainer .lineLeft .textA::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineLeft .textB {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #8de055;
}

/* 吹き出し */
.lineContainer .lineLeft .textB::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #8de055;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineLeft .textC {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #fde16b;
}

/* 吹き出し */
.lineContainer .lineLeft .textC::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #fde16b;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineLeft .textD {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #7ecef4;
}

/* 吹き出し */
.lineContainer .lineLeft .textD::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #7ecef4;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineLeft .textE {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #ffb2c9;
}

/* 吹き出し */
.lineContainer .lineLeft .textE::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #ffb2c9;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineLeft .textF {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #bfb2ff;
}

/* 吹き出し */
.lineContainer .lineLeft .textF::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #bfb2ff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineLeft .textAll {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #fffbeb;
}

/* 吹き出し */
.lineContainer .lineLeft .textAll::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #fffbeb;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}


/* 右側の会話 */
.lineContainer .lineRight {
  position: relative;
  display: block;
  margin: 5px 0;
  max-width: 75%;
  float: right;
  clear: both;
}

/* アイコン画像 */
.lineContainer .lineRight figure {
  width: 50px;
  position: absolute;
  top: 15px;
  right: 0;
  padding: 0;
  margin: 0;
}

/* アイコン画像（正方形）を円形に切り抜き */
.lineContainer .lineRight figure img{
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.lineContainer .lineRight .lineRightText {
  margin-right: 70px;
}

.lineContainer .lineRight .lineRightText .name {
  font-size: 14px;
  color: #333;
  text-align: right;
}

.lineContainer .lineRight .lineRightText .picture {
  text-align: right;
}

.lineContainer .lineRight .lineRightText .picture img {
  border-radius: 8px;
  width: 65%;
  text-align: right;
}

/* コメントエリア */
.lineContainer .lineRight .textA {
  padding: 10px;
  border-radius: 20px;
  background-color: #ffffff;
  margin: 0;
}

/* 吹き出し */
.lineContainer .lineRight .textA::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 60px;
  top: 30px;
  border-left: 20px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineRight .textB {
  padding: 10px;
  border-radius: 20px;
  background-color: #8de055;
  margin: 0;
}

/* 吹き出し */
.lineContainer .lineRight .textB::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 60px;
  top: 30px;
  border-left: 20px solid #8de055;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineRight .textC {
  padding: 10px;
  border-radius: 20px;
  background-color: #fde16b;
  margin: 0;
}

/* 吹き出し */
.lineContainer .lineRight .textC::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 60px;
  top: 30px;
  border-left: 20px solid #fde16b;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineRight .textD {
  padding: 10px;
  border-radius: 20px;
  background-color: #7ecef4;
  margin: 0;
}

/* 吹き出し */
.lineContainer .lineRight .textD::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 60px;
  top: 30px;
  border-left: 20px solid #7ecef4;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineRight .textE {
  padding: 10px;
  border-radius: 20px;
  background-color: #ffb2c9;
  margin: 0;
}

/* 吹き出し */
.lineContainer .lineRight .textE::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 60px;
  top: 30px;
  border-left: 20px solid #ffb2c9;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineRight .textF {
  padding: 10px;
  border-radius: 20px;
  background-color: #bfb2ff;
  margin: 0;
}

/* 吹き出し */
.lineContainer .lineRight .textF::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 60px;
  top: 30px;
  border-left: 20px solid #bfb2ff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* コメントエリア */
.lineContainer .lineRight .textAll {
  padding: 10px;
  border-radius: 20px;
  background-color: #fffbeb;
  margin: 0;
}

/* 吹き出し */
.lineContainer .lineRight .textAll::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 60px;
  top: 30px;
  border-left: 20px solid #fffbeb;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 中央の会話（ナレーション） */
.lineContainer .lineCenter {
  position: relative;
  display: block;
  margin: 30px auto;
  width: 100%;
  max-width: 800px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  float: left;
  clear: both;
}

/* コメントエリア */
.lineContainer .lineCenter .textCenter {
  width: 100%;
  padding: 0;
  margin: 0;
}


/* タブレット用 */
@media screen and (max-width: 1100px) {

}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .lineContainer .lineLeft {
    max-width: 90%;
  }
  
  .lineContainer .lineLeft .lineLeftText .picture img {
    width: 100%;
  }
  
  .lineContainer .lineRight {
    max-width: 90%;
  }
  
  .lineContainer .lineRight .lineRightText .picture img {
    width: 100%;
  }

  .lineContainer .lineCenter {
    font-size: 15px;
  }
}

/* ■■■スマホ用位置固定ヘッダー■■■ */

.fheaderArea {
  display:none; 
}

/* スマホ用 */
@media screen and (min-width:480px) and ( max-width:768px) {
  .fheaderArea {
    display: flex;
    align-items: center;
    width: 100%;
    height: 9vw;
    background: rgba(255,255,255,255);
    position: fixed;
    top: 0px;
    z-index:9999;
  } 

  .fheaderBox {
    width: 40%;
    max-width: 250px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  } 

  .fheaderBox img {
    width: 100%;
    margin: 0 10px;
    padding: 0;
    text-align: left;
  }

  .fheaderBox img:hover {
    filter: brightness(120%);
  }
}

@media screen and (min-width:376px) and ( max-width:479px) {
  .fheaderArea {
    display: flex;
    align-items: center;
    width: 100%;
    height: 14vw;
    background: rgba(255,255,255,255);
    position: fixed;
    top: 0px;
    z-index:9999;
  } 

  .fheaderBox {
    width: 45%;
    max-width: 250px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  } 

  .fheaderBox img {
    width: 100%;
    margin: 0 10px;
    padding: 0;
    text-align: left;
  }

  .fheaderBox img:hover {
    filter: brightness(120%);
  }
}

@media screen and ( max-width:375px) {
  .fheaderArea {
    display: flex;
    align-items: center;
    width: 100%;
    height: 18vw;
    background: rgba(255,255,255,255);
    position: fixed;
    top: 0px;
    z-index:9999;
  } 

  .fheaderBox {
    width: 45%;
    max-width: 250px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  } 

  .fheaderBox img {
    width: 100%;
    margin: 0 10px;
    padding: 0;
    text-align: left;
  }

  .fheaderBox img:hover {
    filter: brightness(120%);
  }
}

/* ■■■ブログ追加機能用■■■ */
.waoblog .mvBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  width: 90%;
  margin: 20px auto;
}

.waoblog .sampleBox {
  margin: 0;
  padding: 0;
  flex-basis: 100%;
}

.waoblog .ytb {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  overflow: hidden;
}

.waoblog .ytb iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .waoblog .mvBox {
    width: 100%;
    margin: 0 auto;
  }

  .waoblog .sampleBox {
    margin: 0 auto 20px;
    padding: 0;
    flex-basis: 100%;
  }
}

/* ■■■コンテンツ幅修正■■■ */
#headerWrap2 .gnaviArea {
	max-width:1080px;
}
#top-cont1 {
	width:100%;
}
#top-cont5 {
	max-width: 800px;
}
#top-cont9 {
	max-width:1080px;
}
#top-cont7 {
	max-width:1080px;
	width:90%;
}
#top-cont7>div a figure {
	padding-top: 46.2%;
}
#top-cont7>div a figure .link-title {
	position:absolute;
	bottom:0;
	color:#fff;
	width:100%;
	box-sizing:border-box;
	padding:0 10px;
	display:flex;
	align-items:baseline;
	justify-content:space-between;
}
#top-cont7>div a figure .link-title>span.title {
	font-size:22px;
}
#top-cont7>div a figure .link-title>span.more {
	font-size:14px;
}
#top-cont10 {
	max-width:960px;
	width:90%;
	margin:0 auto;
}
#top-cont8 {
	max-width:960px;
}
.wrap.wrap800 {
	max-width:960px;
}
@media screen and (max-width: 768px)  {
	.top-about>div.img a figure .link-title>span.title {
		font-size:16px;
	}
	#top-cont7>div a figure .link-title>span.title {
		font-size:16px;
	}
}

#top-cont11 {
  background-color: #F0F0F0;
  padding: 100px 0 10px;
}
#top-cont11>div a figure {
	padding-top: 46.2%;
}
#top-cont11>div a figure .link-title {
	position:absolute;
	bottom:0;
	color:#fff;
	width:100%;
	box-sizing:border-box;
	padding:0 10px;
	display:flex;
	align-items:baseline;
	justify-content:space-between;
}
#top-cont11>div a figure .link-title>span.title {
	font-size:22px;
}
#top-cont11>div a figure .link-title>span.more {
	font-size:14px;
}

@media screen and (max-width: 768px)  {
  #top-cont8.new {
    margin: 100px auto 60px;
  }

  #top-cont8.new h2:after {
    top: 45px;
  }
  .h2-option-img {
    left: 38%;
    top: -80px;
    width: 80px;
  }
  .h2-news-img {
    top: -80px;
    left: 15%;
  }
  #blog.new h2:after {
    top: 52px;
  }
  .h2-blog-img-new {
    left: 6%;
    top: -100px;
    width: 80px;
  }
  #message h2 {
    font-size: 30px;
  }
  #message h2:after {
    top: 48px;
  }
  .h2-message-img-new {
    right: 16%;
    top: -68px;
    width: 100px;
  }
}

#banner {
  background-color: #faab00;
}
#banner .banner-content {
  margin: 0 auto;
  max-width: 1280px;
  padding: 25px 0 80px;
  position: relative;
}
@media (max-width: 767px) {
  #banner .banner-content {
    max-width: 100%;
    padding: 15px 0 35px;
  }
}
#banner .banner-content figure {
  width: 100%;
}
#banner .banner-content figure img {
  width: 100%;
}
#banner .banner-content .banner-list {
	display:flex;
	-webkit-justify-content: space-between;
  justify-content: space-between;
  position: absolute;
  bottom: -150px;
}
@media (max-width: 1024px) {
  #banner .banner-content .banner-list {
    bottom: -120px;
  }
}
@media (max-width: 960px) {
  #banner .banner-content .banner-list {
    bottom: -90px;
  }
}
@media (max-width: 767px) {
  #banner .banner-content .banner-list {
    flex-wrap: wrap;
    bottom: -40px;
  }
}
#banner .banner-content .banner-list>li {
	width:24%;
	text-align:center;
}

@media (max-width: 767px) {
  #banner .banner-content .banner-list>li {
	  width:49%;
  }
}

#banner .banner-content .banner-list>li a figure img {
	width: 100%;
}

#introduction .introduction-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  max-width: 700px;
  /* padding-top: 180px; */
}
@media (max-width: 1024px) {
  #introduction .introduction-content {
    max-width: 90%;
    /* padding-top: 170px; */
  }
}
@media (max-width: 767px) {
  #introduction .introduction-content {
    max-width: 90%;
    padding-top: 70px;
  }
}
#introduction .introduction-content h2 {
  font-size: 23px;
  font-weight: bold;
}
@media (max-width: 767px) {
  #introduction .introduction-content h2 {
    font-size: 21px;
  }

  #introduction .introduction-content h2 span {
    display: block;
  }
}
#introduction .introduction-content .introduction-container {
  align-items: flex-start;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin: 50px auto 0;
}
@media (max-width: 767px) {
  #introduction .introduction-content .introduction-container {
    flex-direction: column;
    margin: 30px auto 0;
  }
}
#introduction .introduction-content .introduction-container figure, 
#introduction .introduction-content .introduction-container .introduction-desc {
  text-align: right;
  width: 48%;
}
@media (max-width: 767px) {
  #introduction .introduction-content .introduction-container figure, 
  #introduction .introduction-content .introduction-container .introduction-desc {
    width: 100%;
  }
}
#introduction .introduction-content .introduction-container figure img {
  width: 100%;
}
#introduction .introduction-content .introduction-container .introduction-desc p {
  line-height: 1.8;
  padding-bottom: 10px;
  text-align: left;
}
@media (max-width: 767px) {
  #introduction .introduction-content .introduction-container .introduction-desc p {
    padding: 20px 10px 10px 10px;
  }
}
#introduction .introduction-content .introduction-container .introduction-desc .link.yellow {
	color: #E6B92C;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
}
@media (max-width: 767px) {
  #introduction .introduction-content .introduction-container .introduction-desc .link.yellow {
    padding: 0 20px;
  }
}
#top-cont11 .in {
}
@media (max-width: 767px) {
  #top-cont11 h2 {
    font-size: 30px;
  }
  #top-cont11 h2:after {
    top: 45px;
  }
  .h2-message-img {
    width: 73px;
    left: 38%;
    top: -80px;
  }
}
#top-cont11 .in .course-list {
	display:flex;
  flex-wrap: wrap;
	-webkit-justify-content: space-between;
  justify-content: space-between;
  margin:50px auto 30px;
  width: 1000px;
}
@media (max-width: 1024px) {
  #top-cont11 .in .course-list {
    width: 80%;
  }
}
@media (max-width: 767px) {
  #top-cont11 .in .course-list {
    width: 80%;
  }
}
#top-cont11 .in .course-list>li {
	width:48%;
  margin-bottom: 50px;
	text-align:center;
}
@media (max-width: 767px) {
  #top-cont11 .in .course-list>li {
    width:100%;
  }
}
#top-cont11 .in .course-list>li figure {
	width:100%;
}
#top-cont11 .in .course-list>li figure img {
	width:100%;
}
#top-cont11 .in .course-list>li .course-details {
	text-align: right;
}
#top-cont11 .in .course-list>li .course-details h3 {
  border-bottom: 1px solid #251E1C;
  color: #251E1C;
	font-size: 16px;
  font-weight: 600;
  padding: 35px 0 30px;
  text-align: left;
}
@media (max-width: 767px) {
  #top-cont11 .in .course-list>li .course-details h3 {
    font-size: 15px;
    padding: 15px 0 10px;
  }
}
#top-cont11 .in .course-list>li .course-details p {
  color: #595858;
	font-size: 14px;
  padding: 20px 0 10px;
  text-align: left;
}
@media (max-width: 767px) {
  #top-cont11 .in .course-list>li .course-details p {
    font-size: 13px;
    padding: 10px 0 5px;
  }
}
#top-cont11 .in .course-list>li .course-details .link.yellow {
	color: #E6B92C;
  font-size: 14px;
  font-weight: bold;
}
#top-cont2 .news-wrap820 .tab_box .btn_area {
  margin: 0 40px;
}
@media (max-width: 767px) {
  #top-cont2 .news-wrap820 .tab_box .btn_area {
    justify-content: space-between;
    margin: 0 10px;
  }
}
#top-cont2 .news-wrap820 .tab_box .btn_area .tab_btn {
  width: 20%;
}
@media (max-width: 767px) {
  #top-cont2 .news-wrap820 .tab_box .btn_area .tab_btn {
    width: 48%;
  }
  #top-cont2 .news-wrap820 .tab_box .btn_area .tab_btn:first-child {
    width: 100%;
  }
}
#site-header .in .header-nav .header-nav-wrap {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  position: relative;
  width: 650px;
}
@media (max-width: 980px) {
  #site-header .in .header-nav .header-nav-wrap {
    width: 530px;
  }
}
@media (max-width: 767px) {
  #site-header .in .header-nav .header-nav-wrap {
    display: none;
  }
}
#site-header .in .header-nav .header-nav-wrap .header-nav-left a {
  padding: 0 30px;
}
@media (max-width: 980px) {
  #site-header .in .header-nav .header-nav-wrap .header-nav-left a {
    padding: 0 15px;
  }
}
#site-header .in .header-nav .header-nav-wrap .header-nav-right {
  background-color: #fff;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  padding: 20px;
  position: absolute;
  left: 315px;
  top: -20px;
  width: 1000px;
  z-index: 10;
}
@media (max-width: 980px) {
  #site-header .in .header-nav .header-nav-wrap .header-nav-right {
    padding: 15px;
    left: 226px;
    top: -15px;
    width: 500px;
  }
}
#site-header .in .header-nav .header-nav-wrap .header-nav-right a {
  align-items: center;
  background-color: #faab00;
  box-shadow: 8px 10px 11px -7px rgba(0,0,0,0.52);
  -webkit-box-shadow: 8px 10px 11px -7px rgba(0,0,0,0.52);
  -moz-box-shadow: 8px 10px 11px -7px rgba(0,0,0,0.52);
  border-radius: 50px;
  color: #fff;
  display: flex;
  font-weight: bold;
  height: 40px;
  justify-content: center;
  margin-right: 15px;
  padding: 15px;
  width: 160px;
}@media (max-width: 980px) {
  #site-header .in .header-nav .header-nav-wrap .header-nav-right a {
    margin-right: 10px;
    padding: 5px;
    width: 140px;
  }
}

#main-v .main-v-cover {
  margin: -40px auto 0;
  max-width: 1280px;
  width: 100%;
}

@media (max-width: 767px) {
  #main-v .main-v-cover {
    margin: 10px auto 0;
  }
  
}

#main-v .header-nav {
  bottom: -30px;
  display: none;
  position: absolute;
  width: 100%;
}

@media (max-width: 767px) {
  #main-v .header-nav {
    margin-top: 10px;
    display: block;
  }
}

#main-v .header-nav .header-nav-wrap {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  position: relative;
}
#main-v .header-nav .header-nav-wrap .header-nav-right {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  z-index: 10;
  width: 90%;
}
#main-v .header-nav .header-nav-wrap .header-nav-right .nav-cont {
  border-radius: 50px;
  background-color: #fff;
  padding: 10px;
  width: 48%;
}
#main-v .header-nav .header-nav-wrap .header-nav-right a {
  align-items: center;
  background-color: #faab00;
  box-shadow: 8px 10px 11px -7px rgba(0,0,0,0.52);
  -webkit-box-shadow: 8px 10px 11px -7px rgba(0,0,0,0.52);
  -moz-box-shadow: 8px 10px 11px -7px rgba(0,0,0,0.52);
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  display: flex;
  font-weight: bold;
  height: 40px;
  justify-content: center;
  margin-right: 15px;
  padding: 15px;
  width: 100%;
}

@media (max-width: 767px) {
  .main-v-new {
    padding: 40px 0 40px !important;
    position: relative;
  }
}

@media (max-width: 767px) {
  .main-v-bnr-area-new {
    margin-top: 50px !important;
  }
}


@media (max-width: 767px) {
  #message {
    padding-top: 68px;
    overflow: hidden;
  }
}