@charset "UTF-8";
:root {
	--navy: #3D4494;
	--smokeblue: #D1E9EC;
	--orange: #F8B62D;
}

.bg_white { background: white;}
.pd_cmn, #mainContent .pd_cmn { padding: clamp( 1em, 3vw, 2em );}

#mainvisual { z-index: 0; background: #fff8f2;}
#mainvisual::after { background: url(../images/main_visual.png) no-repeat center center; background-size: cover; height: 100%; right: 2vw; width: 70vw; transform: none; top: 0; z-index: -1;}
#mainvisual .txt_area { background: rgba(255,248,242,.9); padding: 3vw;}
#mainvisual .txt_area h1 span { background: var(--navy);}
#mainvisual .txt_area .course li { color: var(--navy); border-color: currentColor;}
#mainvisual .txt_area h2 { color: #111; letter-spacing: 0.05em; text-shadow: 0 0 0.1em #fff8f2, 0 0 0.1em #fff8f2;}
#mainvisual .txt_area .hashtag li { color: #111; text-shadow: 0 0 0.1em #fff8f2, 0 0 0.1em #fff8f2;}
@media(max-width: 599px) {
	#mainvisual .txt_area { top: 2vw; right: 2vw; bottom: 2vw; left: 2vw; transform: none; padding: 4vw; background: rgba(255,248,242,.8);}
	#mainvisual::after { width: 100%; height: auto;}
	#mainvisual .txt_area h1 span { font-size: 5vw;}
	#mainvisual .txt_area h2 { font-size: clamp( 36px, 12vw, 60px); margin: 0;}
	#mainvisual .txt_area .hashtag li { font-size: 4vw;}
}


.campaign_bnr > p.center { font-weight: bold; font-size: clamp( 1rem, 3vw, 1.5rem ); margin: 1em auto;}


h3.bg_navy { background: var(--navy); color: #fff !important; padding: .25em; font-weight: bold; text-align: center; margin-bottom: 1.5em; font-size: 1.35rem;}

#mainContent .inner > h2:first-of-type { margin-bottom: 50px;}

#reasonArea { background: var(--smokeblue);}
#reasonArea p { font-size: 1rem;}
.reasonList { justify-content: center; flex-wrap: nowrap; column-gap: clamp( 1em, 3vw, 2em ); padding-inline: 3vw;}
.reasonList > div { max-width: 500px;}
.reasonList .imgArea { width: 80%; margin: 0 auto 20px;}
@media(max-width: 1099px) {
	.reasonList { flex-wrap: wrap; grid-gap: 2em;}
	.reasonList > div { width: calc( 50% - 1em );}
}

@media(max-width: 799px) {
	.reasonList > div { width: 100%; max-width: unset;}
}




.voice_wrap:not(:last-of-type) { margin-bottom: 2em;}
.voice_wrap .img_area { width: 25%;}
.voice_wrap .txt_area { width: calc( 75% - clamp( 1.5em, 3vw, 3em ) ); margin-left: auto;}
.voice_wrap .txt_area h3 { font-size: 180%; border-bottom: solid 1px currentColor; margin-bottom: 0.8em;}
.voice_wrap .txt_area .history { margin-bottom: 0.8em;}
.voice_wrap .txt_area .history .before, .voice_wrap .txt_area .history .after { display: inline-block; color: #fff; padding-inline: 0.5em;}
.voice_wrap .txt_area .history .before { background: #387d7b; margin-right: 0.5em;}
.voice_wrap .txt_area .history .after { background: #e2a701;}
.voice_wrap .txt_area .rishu { margin-bottom: 1em;}
.voice_wrap .txt_area .rishu li { padding-left: 1.3em; position: relative;}
.voice_wrap .txt_area .rishu li::before { content: "○"; position: absolute; left: 0; top: 0;}
.voice_wrap .comment { background: var(--smokeblue); padding: 1.5em; border-radius: 1em;}
@media(max-width: 599px) {
	.voice_wrap { display: block;}
	.voice_wrap .img_area { width: 40%; float: left; margin: 0 1.5em 1em 0;}
	.voice_wrap .txt_area { width: 100%;}
	.voice_wrap .txt_area h3, .voice_wrap .txt_area .history, .voice_wrap .txt_area .rishu { width: calc( 60% - 1.5em ); display: inline-block;}
	.voice_wrap .txt_area .history { text-align: center;}
	.voice_wrap .txt_area .history .before, .voice_wrap .txt_area .history .after { width: 100%; padding: 0.3em;}
	.voice_wrap .txt_area .history .arrow { display: inline-block; transform: rotate(90deg) translateX(0.25em);}
	.voice_wrap .comment { clear: both;}
}





#courseArea { background: var(--smokeblue);}
.course_wrap { overflow: hidden;}
.course_wrap:not(:last-of-type) { margin-bottom: 2em;}
.course_hdr { position: relative; overflow: hidden; z-index: 0; margin-top: -3em;}
.course_hdr .course_icon { display: block; width: 25%; height: auto; aspect-ratio: 1 / 1; padding: 2em 2em 2em 0; border-radius: 0 50% 50% 0; background: white;}
#courseArea .course_hdr h3 { background: var(--orange); color: #fff; text-align: left; margin: 0; position: absolute; z-index: -1; left: 0; right: 0; padding: 1.5em 1.5em 1.5em calc( 25% + 2em ); top: 50%; transform: translateY( -50% ); font-size: 150%;}
#courseArea #course01 .course_hdr h3 { background: var(--navy);}
.course_summary { font-size: 150%; font-weight: bold; color: var(--navy); margin-top: -1em; position: relative;}
.course_contents .basic, .course_contents .standard { width: 50%;}
.course_contents .basic { background: #FFF6E1;}
.course_contents .standard { background: #FFE299;}
.course_contents dl { padding: 1.5em 2em 2em; margin-top: 1em;}
.course_contents dt { font-weight: bold; text-align: center; font-size: 150%;}
.course_contents dd { background: #1a7ec3; color: #fff; margin-top: 0.8em; padding: 1em 1em 1em 4em; position: relative;}
.course_contents dd .icon { display: block; height: 3em; width: auto; aspect-ratio: 1 / 1; position: absolute; left: 0.5em; top: 0.5em;}
.course_contents .advanced { width: 100%; background: #F7C548; margin-top: 0; column-gap: 2em;}
.course_contents .advanced dt { width: 100%;}
.course_contents .advanced dd { width: calc( 50% - 1em );}
@media(max-width: 799px) {
	#courseArea .course_hdr h3 { padding-block: 1em;}
}
@media(max-width: 599px) {
	.course_hdr { margin-block: -1.5em 1em;}
	.course_hdr .course_icon { width: 30%; padding-right: 1em;}
	#courseArea .course_hdr h3 { padding: 0.5em 0.5em 0.5em calc( 30% + 1em );}
	.course_summary { font-size: 120%;}
	.course_contents .basic, .course_contents .standard, .course_contents .advanced { column-gap: 1em;}
	.course_contents .basic, .course_contents .standard { width: 100%; display: flex; flex-wrap: wrap;}
	.course_contents .standard { margin-top: 0;}
	.course_contents .basic dt, .course_contents .standard dt { width: 100%;}
	.course_contents .basic dd, .course_contents .standard dd, .course_contents .advanced dd { width: calc( 50% - 0.5em );}
}
@media(max-width: 499px) {
	#courseArea .course_hdr h3 { font-size: clamp( 1rem, 5.5vw, 1.25rem );}
	.course_contents .basic dd, .course_contents .standard dd, .course_contents .advanced dd { width: 100%;}
}



.developer_voice { margin-bottom: 2em;}
#courseArea .developer_voice h3 { font-size: clamp( 18px, 3vw, 30px ); color: var(--navy);}
.developer_voice h3 .en { font-size: 70%;}
.developer_wrap .img_area { width: 25%; float: left; margin: 0 clamp( 1.5em, 4vw, 3em ) 1em 0;}
.developer_wrap .txt_area .prof { clear: both;}
#courseArea .developer_hdr h4 { font-size: clamp( 18px, 3vw, 30px ); text-align: left; font-weight: bold;}
.developer_hdr h4 br { display: none;}
.developer_hdr h4 .small { display: inline-block; margin-left: 0.8em;}
.developer_wrap .comment { margin-block: 1.5em;}
.developer_wrap .prof { background: #f7f7f7; padding: 1.5em;}
.developer_wrap .prof dt { font-weight: bold; font-size: 125%; padding-bottom: 0.3em; border-bottom: solid 1px currentColor; margin-bottom: 0.8em;}
.developer_wrap .prof dd { margin-top: 0.5em; padding-left: 1.3em; position: relative;}
.developer_wrap .prof dd::before { content: "\025b6"; position: absolute; left: 0; top: 0;}
@media(max-width: 699px) {
	.developer_wrap .img_area { width: 40%;}
	.developer_wrap .comment { clear: both;}
}
@media(max-width: 499px) {
	.developer_hdr h4 br, .developer_hdr h4 .small { display: inline; fonr-size: 70%;}
}
@media(max-width: 399px) {
	.developer_wrap .img_area { float: none; width: 50%; margin: 0 auto 1em;}
}