/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--base-color: #ffffff;					/*テンプレートの土台となる色（主に背景カラー）*/
	--base-inverse-color: #323232;		/*上のbase-colorの対となる色（主にテキストカラー）*/

	--primary-color: #F1EFD2;			/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #717824;	/*上のprimary-colorの対となる色*/

	--accent-color: #FF6060;			/*テンプレートのメインまたはアクセントカラー*/
	--accent-inverse-color: #FFFFFF;	/*上のprimary-colorの対となる色*/
	--accent-color-pale: #FCC2C3;

	--color-header:#717824;
	--color-darkred: #b83c38; 

	--course-1-dark: #BC1724;
	--course-1-light:#ffd4d5;
	--course-2-dark:#076191;
	--course-2-light:#d6ecfd;
	--course-3-dark:#575757;
	--course-3-light:#d6d6d6;
}

/* フェードインアニメーション
-------------------------------------------*/
.fadeIn_item.offs,
.offs .fadeIn_item{
    opacity: 0;
/*     transform: translateY(150px); */
    transform: translate(0%, 150px); /* センタリングのためx軸も動かしてます */
}
.fadeIn_item.ons,
.ons .fadeIn_item{
/*     transition: all 1s cubic-bezier(0, 0, 0.13, 0.79); */
    transition: all 0.5s cubic-bezier(.45,-0.01,.14,1.1);
    opacity: 1;
/*     transform: translateY(0); */
    transform: translate(0%, 0); /* センタリングのためx軸も動かしてます */
}
/* ここまで ------------------------------*/


@media screen and (max-width: 767px) {
section.gutter {
    width:95%;
}
}
.content_light-green {
	background-color: var(--primary-color);
    margin: 0px auto;
    width: 100%;
    display: table;
}
.content_light-green-dot {
	background-color: var(--primary-color);
	background-image: url(../../../img/common/bg_dot_lightgreen.png);
    margin: 0px auto;
    width: 100%;
    display: table;
}

.py_l {padding: 30px 0;}

	/* PCサイズ */
	@media all and (min-width: 768px), print {
	.py_l {padding:100px 0;}
	}


h3 {
    position: relative;
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0 0 20px;
    background: transparent;
    text-align: center;
    color: var(--color-header);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    line-height: 180%;
}
h3::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: 0;
    border: transparent;
    border-top: transparent;
}

	@media all and (min-width: 768px), print {
		h3 {
			font-size:25px;
		}
	}


/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg {
    margin: 0px auto;
    width: 100%;
    display: table;
    background-image: url("../../../img/school/school_kids_main_sp.webp");
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
	background-color:var(--base-color);
}

    @media all and (min-width: 768px), print {
	#mainimg {
		background: url("../../../img/school/school_kids_main.webp");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		padding-top:200px;
    }
	}

#mainimg > div {
	margin-top:100px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media all and (min-width: 768px), print {
#mainimg > div {
	margin-top:0;
}
}

/*テキストのブロック*/
#mainimg p {margin: 0;}
#mainimg .text {
    color: var(--color-darkred);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	-webkit-text-stroke: 4px #fff; /* 線の太さと色（白） */
    paint-order: stroke fill; /* 線を背景側に回す魔法のプロパティ */
}

    @media all and (min-width: 768px), print {
	#mainimg .text {
		font-size:2.8vw;
	}
	}

/*アートくんのブロック*/
        #mainimg .arty {
            width:100%;
            height:auto;
            text-align: center;
			margin-top:20px;
        }
        #mainimg .arty img {
            display:block;
            width:70%;
            height:auto;
            margin:0 auto;
        }

	/* PCサイズ */
    @media all and (min-width: 768px), print {
        #mainimg .arty {
            height:130px;
        }
        #mainimg .arty img {
            display:block;
            height:100%;
            width:auto;
        }
    }

#mainimg .btn_wrap {
    max-width:90%;
    background-color:var(--base-color);
    text-align:center;
    padding:1.5vw;
	box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);
}

	/*画面420px以上の追加指定*/
    @media all and (min-width: 768px), print {
#mainimg .btn_wrap {
    max-width:950px;
    }
    }

#mainimg .btn_wrap h3 {
    margin:0;
    color:var(--color-header);
    line-height:1.5;
}


/*ボタン*/
#mainimg .btn {
	font-size: 15rem;	/*文字サイズ*/
	font-weight: 600;	/*少し太字に*/
	margin-top: 20px;	/*上のテキストとボタンの間のスペース。*/
	display: flex;
    flex-direction: column;
	gap: 15rem;	/*ボタン同士の余白*/
    justify-content: center;
}
#mainimg .btn a {
	display: block;text-decoration: none;
	padding: 1em;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	margin-bottom: 10px;	/*ボタン同士の隙間*/
}

/*マウスオン時*/
#mainimg .btn a:hover {
	opacity: 1;
	transform: scale(1.05);	/*105%に拡大*/
}

	/*画面420px以上の追加指定*/
    @media all and (min-width: 768px), print {

	/*ボタン*/
	#mainimg .btn {
		font-size: 1.4vw;	/*文字サイズ*/
        flex-direction:row;
        gap: 1rem;	/*ボタン同士の余白*/
        justify-content: center;
	}
	
	#mainimg .btn a {
		margin: 0;
		padding: 0.6rem 3rem;	/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
	}

    #mainimg .btn a[href^="tel:"] {
        pointer-events: auto;
	}
	}/*追加指定ここまで*/

/*1つ目のボタン（無料体験お申込み）の追加設定*/
#mainimg .btn p a {
	background: var(--accent-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/*ボタン内のアイコン*/
#mainimg .btn i {
	transform: scale(1.4);	/*140%に拡大*/
	padding-right: 0.8em;	/*アイコンとテキストとの間の余白*/
}


/*POINT（特徴）
---------------------------------------------------------------------------*/
#feature {
	display:flex;
	flex-direction: column;
	gap:20px;
}
/* PCサイズ */
	@media all and (min-width: 768px), print {
		#feature {
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	}


#feature li {
	background-color: var(--base-color);
	padding:20px;
	display:flex;
	align-items: center;
}
/* PCサイズ */
@media all and (min-width: 768px), print {
	#feature li {
		width:48.5%;
	}
}

#feature .point {
	width:100px;
}
#feature .point figure {
	background-color: var(--base-color);
	text-align:center;
	height:20px;
	width:100%;
}
#feature .point figure img {
	height:100%;
	width:auto;
	padding-bottom:3px;
}
#feature .point p {
	background-color: var(--primary-inverse-color);
	text-align: center;
	color:#FFFFFF;
	font-size:18px;
	font-weight:700;
	line-height:1em;
	padding:8px;
}
#feature .point p span {
	display:block;
	font-size:10px;
	font-weight:normal;
}

#feature .text {
	margin-left:1em;
	font-size:12px;
	line-height:1.5;
	width:calc(100% - 100px);
}

	/* PCサイズ */@media all and (min-width: 768px), print {
		#feature .text {
			font-size:15px;
		}
	}

/*ボタン*/
.feature_btn {
	font-size: 12rem;
	font-weight: normal;
	margin-top: 30px;
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
}
.feature_btn a {
	display: block;
	text-decoration: none;
	padding: 0.5em 1.5em;
	margin-bottom: 10px;
	border-radius: 100px;
	border:1px solid var(--primary-inverse-color);
}

	/* PCサイズ */
	@media all and (min-width: 768px), print {
		.feature_btn {
				font-size: 1.4vw;
			}
		.feature_btn a {
				margin: 0;
				padding: 0.6em 3em;
			}
	}

.feature_btn p a {
	background: var(--base-color);
	color: var(--base-inverse-color);
}
.feature_btn i {
	transform: scale(1.3);
	padding-right: 0.3em;
	color:var(--primary-inverse-color);
}


/*体験バナー
---------------------------------------------------------------------------*/
.trial_banner {
	display:flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--accent-color-pale);
	text-align: center;
	position:relative;
}
.trial_banner .text {
	font-size:12px;
	margin-top:20px;
}
	/* PCサイズ */
	@media all and (min-width: 768px), print {
	.trial_banner .text {
		font-size:18px;
		margin-top:30px;
	}
	}

.trial_banner figure img{
	display: block;
	margin:0 auto;
	width:200px;
	height:auto;
}
/* PCサイズ */@media all and (min-width: 768px), print {
	.trial_banner figure img{
	width:350px;
	}
}
.trial_banner > div {
	background-color: var(--accent-color);
	padding:20px 0;
}

.trial_btn p {
	padding:10px;
}

.trial_btn p a {
	text-decoration: none;

}

/* 体験申し込み */
.trial_btn p:nth-of-type(1) a {
	background: var(--base-color);
	color: var(--accent-color);
	font-weight:600;
	border-radius: 100px;
	padding:10px;
}

/*電話番号*/
.trial_btn p:nth-of-type(2) a {
	color: var(--base-inverse-color);
	font-size:12px;
}

/* PCサイズ */
@media all and (min-width: 768px), print {
	.trial_btn p:nth-of-type(1) a {
		font-size:150%;
	}
	.trial_btn p:nth-of-type(2) a {
		font-size:120%;
	}
}

/*コースリスト
---------------------------------------------------------------------------*/
#course_list h4 {
	background-color: var(--primary-inverse-color);
	color:#FFFFFF;
	padding:10px;
	margin:20px 0;
}
/* PCサイズ */@media all and (min-width: 768px), print {
	#course_list h4 {
	font-size: 25px;
	padding: 15px;
	letter-spacing: 0.05em;
	}
}

#course_list ul.wrap {
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:20px 10px;
	margin-bottom:50px;
}

#course_list ul.wrap > li {
	background-color: var(--base-color);
	padding:0 8px;
}

#course_list li img {
	display:block;
	width:100%;
	height:auto;
	clip-path: circle(35% at 50% 50%);	
}
/* PCサイズ */@media all and (min-width: 768px), print {
	#course_list li img {
	width: 60%;
	margin: 0 auto;
	}
}

#course_list li h5 {
	margin-top:8px;
	text-align:center;
}
/* PCサイズ */@media all and (min-width: 768px), print {
	#course_list li h5 {
	font-size:150%;
	margin-top:20px;
}
}

#course_list li > div {
	text-align: left;
	padding:8px;
	margin-top:8px;
	font-size:11px;
}
/* PCサイズ */
@media all and (min-width: 768px), print {
	#course_list li > div {
		font-size:16px;
	}
	}

#course_list li > div dl {
	display:flex;
	flex-wrap: wrap;
	gap:10px;
}

#course_list li ul {
	margin-top:8px;
	font-size:90%;
	line-height:150%;
}

#course_list .text {
	margin-top:8px;
	text-align:left;
	font-size:12px;
	line-height:150%;
}
/* PCサイズ */
@media all and (min-width: 768px), print {
	#course_list .text {
	font-size: 18px;
	}
}

#course_list li .btn {
	display:block;
	text-align: center;
	margin:8px 0;
	font-size:12px;
	text-decoration: none;
	border:1px solid #cfcfcf;
	border-radius: 100px;
}
/* PCサイズ */
@media all and (min-width: 768px), print {
	#course_list li .btn {
	margin:20px 0;
	padding:15px;
	font-size:18px;
	}
}

#course_list li .btn::after {
    font-family: 'Font Awesome 6 Free';
    content: '\f0a9';
    margin-left:0.3em;
    font-weight:600;
	color:var(--primary-inverse-color);
}

	/* カードごとのカラー */
	/* 乳幼児 */
	#course_list ul.wrap:nth-of-type(1) > li {
		border-top: 5px solid var(--course-1-dark);	/* フチ部分 */
	}
	#course_list ul.wrap:nth-of-type(1) h5 {
		color:var(--course-1-dark);					/* 年齢 */
	}
	#course_list ul.wrap:nth-of-type(1) img {
		background-color: var(--course-1-light);	/* 画像の背景色 */
	}
	#course_list ul.wrap:nth-of-type(1) li > div {
		background-color: var(--course-1-light);	/* 料金背景色 */
	}

	/* 小学生 */
	#course_list ul.wrap:nth-of-type(2) > li {
		border-top: 5px solid var(--course-2-dark);	/* フチ部分 */
	}
	#course_list ul.wrap:nth-of-type(2) h5 {
		color:var(--course-2-dark);					/* 年齢 */
	}
	#course_list ul.wrap:nth-of-type(2) img {
		background-color: var(--course-2-light);	/* 画像の背景色 */
	}
	#course_list ul.wrap:nth-of-type(2) li > div {
		background-color: var(--course-2-light);	/* 料金背景色 */
	}

	/* 中学生 */
	#course_list ul.wrap:nth-of-type(3) > li {
		border-top: 5px solid var(--course-3-dark);	/* フチ部分 */
	}
	#course_list ul.wrap:nth-of-type(3) h5 {
		color:var(--course-3-dark);					/* 年齢 */
	}
	#course_list ul.wrap:nth-of-type(3) img {
		background-color: var(--course-3-light);	/* 画像の背景色 */
	}
	#course_list ul.wrap:nth-of-type(3) li > div {
		background-color: var(--course-3-light);	/* 料金背景色 */
	}


/*生徒さんの声
---------------------------------------------------------------------------*/
#voice .voice_wrap {
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap:2em;
	margin-bottom:50px;
}
#voice .card {
	display:flex;
	flex-direction: column;
	gap:1em;
	font-size:12px;
	line-height:1.5;
	background-color: var(--base-color);
	padding:1.5em;
	border-radius: 16px;
	box-shadow: 0 0px 10px  rgba(0, 0, 0, 0.08);
}
/* PCサイズ */
@media all and (min-width: 768px), print {
	#voice .card {
	font-size:15px;
}
}

#voice .card .stars {
	color: #f5a623;
	letter-spacing: 0.15em;
}

#voice .card .comment {
	font-size:1em;
}

#voice .card .student {
	display:grid;
	grid-template-columns: 50px 1fr;
	gap:10px;
}

#voice .card .student figure {
	width: 48px;	/*写真の幅*/
	height: 48px;	/*写真の高さ*/
	border-radius: 50%;	/*円形にする*/
	overflow: hidden;
	flex-shrink: 0;	/*写真が縮まないようにする*/
}
#voice .card .student figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;	/*コンテナいっぱいにカバー、余分な部分はカット*/
}

#voice .card .student div p {
	margin:5px 0;
}

#voice .card .student .name {
	font-weight:600;
}

#voice .card .student .school {
	opacity: 0.6;
	font-size:0.9em;
}

#voice .card .student .result {
	display:inline-block;
	font-size:0.9em;
	color:var(--color-header);
	font-weight:500;
	padding:0.3em 1em;
	border:1px solid var(--primary-inverse-color);
	background-color: var(--primary-color);
	border-radius: 100px;
}
#voice .card .student .result::before {
	font-family: 'Font Awesome 6 Free';
	content: "\f00c";
    margin-right:0.3em;
    font-weight:600;
	color:var(--primary-inverse-color);
}


/*FAQ
---------------------------------------------------------------------------*/

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	.faq {
		font-size: 1.2em;	/*文字サイズを120%*/
	}

	}/*追加指定ここまで*/

/*質問*/
.faq dt {
	display: flex;
	align-items: flex-start;
	border-radius: 3px;		/*角を少しだけ丸く*/
	margin-bottom: 1em;	/*下に空けるスペース。質問ブロック同士の余白です。*/
	background: var(--base-color);		/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 1em;	/*ブロック内の余白。１文字分。*/
}

/*「Q」アイコン*/
.faq dt::before {
	font-family: "Font Awesome 6 Free";
	content: "\51";	/*アイコン画像の指定*/
	margin-right: 0.5em;	/*右側に空けるスペース*/
	background: var(--primary-color);		/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	border-radius: 50%;	/*角を丸くする*/
	width: 30px;		/*幅*/
	line-height: 30px;	/*高さ*/
	text-align: center;
	flex-shrink: 0;
	margin-top: 0.2em;	/*微調整*/
}

/*回答*/
.faq dd {
	padding: 0 1em 1em 3.7em;	/*ボックス内の余白。上、右、下、左への順番。*/
	font-size:0.9em;
	line-height:180%;
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}