@charset "UTF-8";

body, html { font-size: 16px;}
ol, p, ul { margin: 0;}
.footer__copy { white-space: nowrap;}
.customer__item, .customer__nav { float: left;}
.btn, .pagetop, .slick__nav { cursor: pointer;}

body { color: #565656; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; line-height: 2.4}
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.3;}
ol, ul { padding: 0; list-style-type: none;}
a { text-decoration: none; color: inherit;}
img { max-width: 100%; vertical-align: bottom;}

.l-container {
	max-width: 1140px;
	margin: 0 auto;
	padding-right: 20px;
	padding-left: 20px
}

.btn--contact:not(:last-child), .btn--spnav:first-child {
	margin-bottom: 15px
}

.header__container {
	width: auto;
	max-width: unset;
}

.btn {
	display: inline-block;
	-webkit-transition: all .3s;
	transition: all .3s;
	border-radius: 5px;
	line-height: 1;
	text-align: center;
}

.btn--header {
	display: block;
	padding: 5px 0;
	font-size: 12px
}

.btn--big {
	display: block;
	max-width: 400px;
	margin-right: auto;
	margin-left: auto;
	padding: 11px 0;
	letter-spacing: .2em;
	font-size: 16px
}

.btn--contact, .btn--spnav {
	max-width: 400px;
	margin-right: auto;
	margin-left: auto
}

.btn--contact {
	display: block;
	padding: 11px 0;
	width: 100%;
	letter-spacing: .2em;
	font-size: 17px
}

.btn--footer {
	display: none
}

.btn--spnav {
	display: block;
	padding: 10px 0
}

.intro__btns {
	font-size: 0;
	text-align: center;
}

.intro__btn {
	margin-bottom: 14px
}

.section__heading {
	margin-bottom: 17px;
	color: #e30070;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.slick, .slick__item {
	position: relative
}
.slick-slide:not(.slick-active) {
	pointer-events: none
}
.slick__item {
	height: 385px
}
.slick__img, .slick__nav {
	position: absolute;
	top: 50%
}
.slick__img {
	left: 50%;
	width: 200px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}
.slick__nav {
	width: 22px
}
.slick__nav--prev {
	left: 0;
	-webkit-transform: translate(20px, -50%);
	transform: translate(20px, -50%)
}
.slick__nav--next {
	right: 0;
	-webkit-transform: translate(-20px, -50%);
	transform: translate(-20px, -50%)
}

.course {
	padding-top: 51px
}
.footer__customer, .footer__descs, .footer__logo, .footer__section:nth-child(1), .footer__section:nth-child(2), .footer__text {
	display: none
}
.contact, .footer, .footer__bottom, .footer__section:nth-child(3) {
	text-align: center
}
.contact {
	padding: 54px 0
}
.contact__heading {
	margin-bottom: 26px
}
.contact__text {
	margin-bottom: 28px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.6
}
.footer {
	background-color: #d1d4db;
	line-height: 1.8
}
.footer ul a {
	-webkit-transition: color .3s;
	transition: color .3s
}
.footer ul a:hover {
	opacity: .7
}
.footer__box {
	font-size: 0
}
.footer__nav {
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%
}
.footer__copy {
	margin-top: 35px;
	padding-bottom: 15px;
	font-size: 10px;
	line-height: 1.2
}
.customer__title {
	float: left;
	margin-right: 15px;
	color: #eb4197;
	font-size: 16px
}
.customer__item {
	position: relative;
	padding-left: 15px
}
.customer__item::before {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -7px;
	content: '';
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid #8d8d8d
}
.customer__item:not(:last-child) {
	margin-right: 10px
}
.tel__heading {
	font-size: 22px;
	font-weight: 700
}
.tel__number {
	display: inline-block;
	margin-top: 9px;
	padding-left: 49px;
	color: #de618b;
	background-image: url(../images/icon--tel.png);
	background-position: left center;
	background-size: 35px 23px;
	font-size: 24px;
	font-weight: 700
}
.nav {
	display: none
}
.spnav__heading {
	padding: 11px 0;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 17px;
	font-weight: 700
}
.spnav__item {
	border-top: 1px solid #fff
}
.spnav__item:last-child {
	border-bottom: 1px solid #fff
}
.spnav__link {
	display: block;
	padding: 12px 0;
	letter-spacing: 1px;
	font-size: 16px;
	line-height: 1
}
.spnav__btns {
	margin: 45px 0 40px
}
.pagetop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #7e7f83;
	background-image: url(../images/pagetop.png);
	background-position: center 20px;
	background-size: 28px
}
.cf::after {
	display: block;
	clear: both;
	content: ''
}
@-webkit-keyframes shine {
100% {
left:100%
}
}
@keyframes shine {
100% {
left:100%
}
}
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp
}
@-webkit-keyframes fadeInUp {
0% {
-webkit-transform:translateY(30px);
transform:translateY(30px);
opacity:0
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0);
opacity:1
}
}
@keyframes fadeInUp {
0% {
-webkit-transform:translateY(30px);
transform:translateY(30px);
opacity:0
}
100% {
-webkit-transform:translateY(0);
transform:translateY(0);
opacity:1
}
}
.hidden-sm {
	display: none
}
.hidden-pc {
	display: block
}


@media (min-width:769px) {
	body {
		margin: 0
	}
	.btn--big {
		padding: 14px 0;
		font-size: 20px
	}
	.btn--contact {
		display: inline-block;
		width: 280px;
		margin: 15px;
		padding: 15px 0;
		letter-spacing: .1em;
		font-size: 22px
	}
	.btn--footer {
		display: block;
		width: 100%;
		max-width: 300px;
		margin: 0 auto 16px;
		padding: 8px 0;
		letter-spacing: .1em;
		font-size: 14px
	}
	.intro__btn {
		display: inline-block;
		width: 100%;
		max-width: 270px;
		margin: 15px 20px
	}
	.section__heading {
		margin-bottom: 48px;
		font-size: 34px
	}
	.footer__item--nowrap, .footer__text {
		white-space: nowrap
	}
	.slick__item {
		height: 371px
	}
	.slick__img {
		width: 50%
	}
	.footer__item::before, .footer__place::before {
		top: 0;
		content: '';
		border-top: 5.4px solid transparent;
		border-bottom: 5.4px solid transparent
	}
	.course {
		padding-top: 98px
	}
	.support {
		padding-top: 93px
	}
	.contact {
		padding: 107px 0 120px
	}
	.contact__heading {
		margin-bottom: 66px
	}
	.contact__text {
		margin-bottom: 55px;
		font-size: 32px;
		font-weight: 400;
		line-height: 1.5
	}
	.footer {
		padding: 47px 0 30px;
		text-align: left;
		background-color: #cdcbd6
	}
	.footer__customer {
		display: block;
		margin-bottom: 33px
	}
	.footer__top {
		display: table;
		width: 100%;
		margin-bottom: 35px;
		table-layout: fixed
	}
	.footer__bottom {
		margin-top: -14px
	}
	.footer__section:nth-child(1) {
		display: block;
		float: left
	}
	.footer__section:nth-child(2) {
		display: block;
		float: left;
		width: 50%
	}
	.footer__section:nth-child(3) {
		float: right;
		width: 50%
	}
	.footer__heading {
		margin-bottom: 35px;
		font-size: 16px;
		font-weight: 700
	}
	.footer__list {
		display: inline-block;
	width:calc((100% - 20px * 2)/ 3);
		height: auto;
		margin-right: 20px;
		padding-left: 16px;
		text-align: left;
		vertical-align: top
	}
	.footer__list:nth-of-type(3n) {
		margin-right: 0
	}
	.footer__list:nth-child(-n+4) {
		margin-bottom: 20px
	}
	.footer__title {
		margin-bottom: 5px;
		font-size: 14px;
		font-weight: 700
	}
	.footer__item {
		position: relative;
		margin-bottom: 7px;
		padding-left: 15px;
		font-size: 12px
	}
	.footer__link, .footer__place {
		display: inline-block;
		text-align: left;
		font-size: 14px
	}
	.footer__item::before {
		position: absolute;
		left: 0;
		margin-top: 5px;
		border-left: 9px solid #8d8d8d
	}
	.footer__classroom {
		margin-bottom: 30px
	}
	.footer__place {
		position: relative;
		margin-right: 10px;
		margin-bottom: 8px;
		padding-left: 15px
	}
	.footer__place::before {
		position: absolute;
		left: 0;
		margin-top: 6px;
		border-left: 9px solid #de618b
	}
	.footer__link {
		position: relative;
		margin-right: 15px;
		margin-bottom: 11px;
		padding-left: 18px;
		font-weight: 700;
		line-height: 1
	}
	.footer__link::before {
		position: absolute;
		top: 2px;
		left: 0;
		content: url(../images/icon--arrow.png)
	}
	.footer__text {
		display: block;
		margin-bottom: 20px;
		text-align: center;
		color: #de618b;
		font-size: 12px;
		line-height: 1
	}
	.footer__logo {
		display: inline-block;
		margin-bottom: 27px
	}
	.footer__tel {
		display: inline-block;
		margin-top: 9px;
		text-align: initial
	}
	.footer__descs {
		display: block;
		margin-bottom: 54px;
		text-align: left
	}
	.footer__copy, .footer__nav, .nav {
		display: inline-block
	}
	.footer__desc {
		margin-bottom: 5px;
		font-size: 10px;
		line-height: 1.3
	}
	.footer__last {
		text-align: center;
		line-height: 1
	}
	.footer__nav {
		position: static;
		width: auto;
		margin: 5px;
		vertical-align: middle
	}
	.footer__copy {
		margin: 5px 0 5px 30px;
		padding-bottom: 0;
		vertical-align: middle;
		font-size: 14px
	}
	.tel__heading {
		margin-bottom: 3px;
		font-size: 14px
	}
	.tel__text {
		margin-bottom: 2px;
		font-size: 12px;
		line-height: 1
	}
	.tel__number {
		margin-top: -16px;
		margin-bottom: 5px;
		padding-left: 0;
		letter-spacing: 0;
		background-image: none;
		font-size: 20px
	}
	.nav__item {
		float: left;
		padding: 0;
		border-bottom: none;
		font-size: 14px;
		line-height: 1
	}
	.nav__item:nth-child(-n+3) {
		margin-right: 12px;
		padding-right: 12px;
		border-right: 1px solid #000
	}
	.pagetop, .spnav {
		display: none
	}
	.shine {
		position: relative;
		overflow: hidden
	}
	.shine::before {
		position: absolute;
		z-index: 1;
		top: 0;
		left: -55%;
		width: 50%;
		height: 100%;
		content: '';
		-webkit-transform: skewX(-25deg);
		transform: skewX(-25deg);
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%);
		background: linear-gradient(to right, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%)
	}
	.shine:hover::before {
		-webkit-animation: shine .7s;
		animation: shine .7s
	}
	.hidden-sm {
		display: block
	}
	.hidden-pc {
		display: none
		}
}

@media (min-width:800px) {
	body {
		margin: 0
	}
	.logo {
		display: inline-block;
		vertical-align: middle
	}
	.logo__img {
		width: 109px
	}
	.btn--header {
		padding: 12px 0;
		letter-spacing: .28em;
		font-size: 17px
	}
}

@media (max-width:329px) {
	.course__btn{width: 100%;}
}

/* --- 20171020 追加記述 --- */
.mt_30{margin_top:30px;}
.h_300{height: 300px;}
ul.cf li ul{
	text-align: left;
	margin: 10px 0;
}
ul.cf li ul li{
	display: inline-block;
	border-radius: 30px;
  background-color: #eee;
  padding: 0 15px;
	margin-bottom: 10px;
}
ul.cf li ul li:last-child{background:none;}
ul.cf li:first-child ul li{margin-bottom: 0;}
ul.cf{
	display: flex;
	display: -webkit-flex; /* Safari */
}
.slick_img3 img:nth-child(n+2){
	display: inline-block;
	width: 49%;
}
.course_lead{
	font-weight: bold;
	font-size: 17px;
}

@media (max-width:768px) {
	ul.cf{display: inherit;}
	ul.cf li ul{text-align: center;}
}
@media (max-width:499px) {
	.slick_img3 img:nth-child(n+2){display: block; width: 100%; width: 90%;margin: 10px auto 0;}
}


.bnr{text-align: center;padding-top:50px;}
@media (max-width:599px) {
	.bnr{padding-top:25px;}
}


/* ここから20230703作成 ChatGPT LP用 */

.intro__btns { margin: 50px auto 70px;}
main > section, .contact { padding: 70px 0;}
.c_pink { color: #e30070;}
.underline { background: linear-gradient(transparent 70%, #ffeb3b 0%); display: inline;}

.course_detail {
	margin-bottom: 40px;
	padding: 50px;
}
#course01 { background: #e1f5fe;}

.course_detail h3 {
	color: #fff;
	padding: 30px;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 30px;
}
#course01 h3 { background: #4FC3F7;}

.course_detail .offer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	background: #666;
	padding: 2px;
	align-items: center;
	margin: 0 auto 20px;
}

.course_detail .offer dt {
	width: 200px;
	text-align: center;
	color: #fff;
	font-weight: bold;
}

#course01 .offer dt { color: #81d4fa;}

.course_detail .offer dd {
	background: #fff;
	padding: 20px 30px;
	width: calc( 100% - 200px );
	margin: auto;
}

.course_detail .offer dd li, .study_style .checkList li{
	padding-left: 1.3em;
	text-indent: -1.3em;
	font-weight: bold;
}

.course_detail .offer dd li:before, .study_style .checkList li:before{
	margin-right: 0.3em;
	font-family: "Font Awesome 5 Free";
	content: '\f14a';
	font-weight: 400;
}


.chatgpt_course_lineup > li:not(:last-of-type) { margin-bottom: clamp( 1em, 3vw, 2em );}
.chatgpt_course_wrap { background: #fff; padding: clamp( 1em, 3vw, 2em ); box-shadow: 0 0.5vw 0.5vw rgba(0,0,0,0.15);}
.chatgpt_course_name { font-size: clamp( 21px, 4vw, 40px ); font-weight: bold; margin: 0 0 0.5em; line-height: 1.4; padding: 0.3em; border-bottom: solid 3px;}
#course01 .chatgpt_course_name { border-bottom-color: #4FC3F7;}
.chatgpt_course_wrap > dl { display: inline-flex; flex-wrap: wrap; margin: 0 3em 0 0;}
.chatgpt_course_wrap > dl.chatgpt_course_outline { width: 100%; margin: 0;}
.chatgpt_course_wrap dt { font-weight: bold;}
.chatgpt_course_wrap dt::after { content: "：";}
.chatgpt_course_wrap dd { margin: 0;}
.chatgpt_course_wrap > dl.chatgpt_course_outline dd { width: 100%; display: flex; flex-wrap: wrap;align-items: center;}
.chatgpt_course_outline dd > .img_area { width: 40%;}
.chatgpt_course_outline .txt_area { width: 60%; padding: 1em;}
.course_detail h4 { text-align: center; margin-bottom: 20px; color: #fff; padding: 10px; font-size: 20px; font-weight: bold;}
#course01 h4 { background: #81d4fa;}

#study_style {
	background: url(../images/studystyle-bg.jpg) no-repeat center center / cover;
}

#study_style .l-container {
	background: rgb(255 255 255 / 60%);
	padding: 40px;
}

.study_style li {
	margin-bottom: 30px;
}

.study_style h3 {
	color: #fff;
	padding: 30px;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 30px;
}
.study_style li:first-child h3 { background: #8bc34a url(../images/icon_style01.png) no-repeat center right 70% / 100px;}
.study_style li:nth-of-type(2) h3 { background: #7787de url(../images/icon_style02.png) no-repeat center right 70% / 120px;}

.study_style li h3 span {
	font-size: 70%;
	display: block;
	text-align: center;
	font-weight: normal;
	margin-top: 10px;
}

.study_style li dl {
	margin: 0;
}

.study_style li dt {
	font-weight: bold;
	text-align: center;
	font-size: 22px;
	margin-bottom: 10px;
}

.study_style li dd {
	margin: 0;
}
.study_style .checkList{
	max-width: 600px;
    margin: 0 auto;
}
.study_style .checkList li{
	margin-bottom: 10px;
    line-height: 1.6;
}

#study_style .bnrOnline ul { display: flex; flex-wrap: nowrap; justify-content: center;}
#study_style .bnrOnline li { padding: 1%;}

@media (max-width: 999px){
	.comment_wrap { padding-bottom: 25vw;}
	.comment_wrap .img_area { height: 35vw;}
}

@media (max-width: 799px){
	.course_detail { padding: 5vw;}
	.course_detail h3, .study_style h3 { font-size: 24px;}
	.course_detail .offer dt { width: 100%;}
	.course_detail .offer dd { width: 100%; padding: 20px;}
	.chatgpt_course_outline dd > .img_area { width: 100%;}
	.chatgpt_course_outline .txt_area { width: 100%; padding: 0; line-height: 1.8;}
}

@media (max-width: 599px){
	.bnr { padding-top: 0;}
}

@media (max-width: 499px){
	.intro__btns { padding: 0 20px;margin:30px 0;}
	.study_style li:first-child h3, .study_style li:nth-of-type(2) h3 { background-position: center center;padding: 10px;}
	main > section, .contact{padding: 20px 0;}
	.l-container{padding-right: 10px;padding-left: 10px;}
	body{line-height: 2;}
	#study_style .l-container{padding: 20px;}
	.course_detail .example1{padding: 15px;}
	.course_detail .example2 .img_area{height: auto;overflow: inherit;}
	.course_detail .example2 .img_area img{position: static;-webkit-transform:inherit;transform: inherit;}
}

@media (max-width: 399px){
	.course_detail .example2 > li .img_area, .course_detail .example2 > li .txt_area { width: 100%;}
	.course_detail h3, .study_style h3{font-size: 22px;margin-bottom: 15px;}
	.course_detail{padding: 3vw;}
}


.bnrOnline{text-align: center;margin-bottom: 30px;padding: 1%;}
.bnrOnline dd {margin: 0;}
.bnrOnline dd ul{display: flex;justify-content: center;}
.bnrOnline dd ul li{padding:1%;}

.trainingList{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.trainingList li{
	width: 24%;
    margin: 3%;
    max-width: 250px;
}
#trainingArea .section__heading .txtS{
    font-size: 85%;
}


@font-face { font-family:"FontAwesome"; src:url("./fa-solid-900.woff") format("woff"); }

.course_list h3{
text-align: center;
    margin-bottom: 1em;
    font-size: 180%;
    font-weight: bold;
    border-bottom: 3px #e30070 solid;
}
.course_list li{
    background: #f5f5f5;
	margin-bottom: 10px;
}
.course_list .box{
	padding:30px;
}
.course_list .box, .course_list .box .course_content{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.course_list .box .img_area{
	width:150px;
}
.course_list .box .course_content{
	width:calc(100% - 150px - 30px);
	margin: 0;
}
.course_list .box .course_content dt{
	width: 7em;
    text-align: center;
    background: #565656;
    color:#fff;
	border-bottom: 1px #ccc dotted;
	line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.course_list .box .course_content dd{
	width:calc(100% - 7em);
	margin-left: 0;
	border-bottom: 1px #ccc dotted;
    background: #fff;
    padding:0.75em 1em;
    line-height: 1.6;
}

.course_list .box.sub_wrap:not(:last-of-type) {
	border-bottom: 1px #ccc dotted;
}

.course_list .accbox .accshow p.course_ttl {
	padding-left: 1.3em;
	font-size: 1.125rem;
	font-weight: bold;
	position: relative;
	width: 100%;
}

.course_list .accbox .accshow p.course_ttl::before {
	content: "\025a0";
	position: absolute;
	left: 0;
	top: 0;
}

@media (max-width:699px) {
	.course_list .box .img_area{text-align: center; margin-bottom: 1em;}
	.course_list .box .img_area, .course_list .box .course_content{width: 100%;}
	.course_list .box{padding: 15px;}
}
@media (max-width:399px) {
	.course_list li{margin-bottom:5px;}
	.course_list .box .course_content dt{width: 6em;}
	.course_list .box .course_content dd{width: calc(100% - 6em);padding: 0.75em;}
	.course_list .box .img_area, .course_list .box .course_content{font-size: 0.9rem;}
	.course_list h3{font-size: 150%;margin-bottom: 0.5em;}

}

/* -----アコーディオン----- */
/*ボックス全体*/
.course_list .accbox {
    max-width: 100%;/*最大幅*/
}

/*ラベル*/
.course_list .accbox label {
    display: block;
    /*margin: 1.5px 0;*/
    cursor :pointer;
    transition: all 0.5s;
    position: relative;
}

/*アイコンを表示*/
.course_list .accbox label:before {
    content: "\f13a";
    font-family:"FontAwesome";
    font-weight: 900;
	position: absolute;
    right: 1.5%;
    top: 0;
    bottom: 0;
    color: #e30070;
    font-size: 1.5em;
    height: 21px;
    margin: auto;
    line-height: 1;
}

/*チェックは隠す*/
.course_list .accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.course_list .accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.course_list .cssacc:checked + label + .accshow {
    height: auto;
    padding: 0;
    opacity: 1;
}

.course_list .accbox .accshow p {
    margin: 5px 10px;
    text-align: justify;
	text-justify: inter-ideograph;
}

/*アイコンを入れ替える*/
.course_list .cssacc:checked + label:before {
    content:"\f139";
}


@media (max-width:599px) {
	.course_list .accbox label:before{font-size: 110%;}
}


@media (max-width:399px) {
	.course_list .accbox label:before {font-size: 1.2em;}
}

.call { text-align: center; margin: 10px;}
.call dt { font-weight: bold; font-size: 20px;}
.call dd { margin: 0;}
.call dd a { display: inline-block; font-weight: bold; font-size: 36px; color: #0E6EB8; position: relative; line-height: 1;}
.call dd a:before { content: ""; display: block; width: 1em; height: 1.5em; background: url(../images/call.png) no-repeat right bottom; background-size: contain; position: absolute; bottom: 0; left: -1.2em;}
.call dd .dib { font-size: 16px; display: inline-block; margin: 0 1em;}
@media (max-width:399px) {
	.call dt { font-size: 16px;}
	.call dd a { font-size: 30px;}
}

#test_cycle li img { width: 100%; height: auto;}



.jumppoint { margin-top: -80px; padding-top:80px; display:block; }
@media (max-width:499px) {
	.jumppoint { margin-top: -50px; padding-top:50px; display:block; }
}


.section__heading.single_line { font-size: clamp( 11px, 3.5vw, 2.25rem );}
.trainingList.trainingList_new { padding: 30px;}
.trainingList.trainingList_new li { width: auto; max-width: unset;height: 70px; margin: 15px 20px;}
.trainingList.trainingList_new li img { height: 100%; width: auto;}
@media (max-width: 999px){
	.trainingList.trainingList_new { padding: 3vw;}
	.trainingList.trainingList_new li { height: 6vw; margin: 1.5vw;}
}
@media (max-width: 599px){
	.trainingList.trainingList_new { padding: 3.5vw;}
	.trainingList.trainingList_new li {height: 8vw;}
}






/* ここから230720追記（レイアウト変更） */

/* 999px以下 */
/*
.pc { display: none;}
.sp { display: inherit;}
*/
.header { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; padding: 6px 0; background: #fff; box-shadow: rgba(0,0,0,.2) 0 2px 4px 0;}
.header .pc { display: none;}
.header .sp { display: inherit;}
.header h1 { text-align: center;}
.header .logo__img { width: 109px; display: block;}
.header__btns { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.header__btn { float: left; width: clamp( 140px, 15vw, 160px );}
.header__btn:not(:last-child) { margin-right: 15px;}
.btn--request { color: #fff; border-bottom: 2px solid #09807c; background-color: #12b5b0;}
.btn--reserve { color: #fff; border-bottom: 2px solid #a80057; background-color: #e6006f;}
.btn--request:hover { background-color: #14c8c2;}
.btn--reserve:hover { background-color: #ff1083;}

@media (max-width:799px) {
	.header { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; padding: 4px 0; background: #fff; box-shadow: rgba(0,0,0,.2) 0 2px 4px 0;}
	.header h1 { text-align: left;}
	.header .logo__img { width: 63px;}
	.header__btn { width: 95px;}
	.header__btn:not(:last-child) { margin-right: 9px;}
}


/* PC */
@media (min-width:1000px) {
/*
	.pc { display: inherit;}
	.sp { display: none;}
*/
	body { background: url(../images/wrapper_bg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;}
	.wrapper { padding-left: 50%; padding-right: 3%; overflow: hidden; background: rgb(0,212,255); background: linear-gradient(100deg, rgba(0,212,255,0.5) 0%, rgba(9,9,121,0.5) 70%, rgba(2,0,36,0.5) 100%);}
	.header { color: #fff; height: 100vh; width: 50%; padding: 0; background: none; box-shadow: none; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
	.header .pc { display: inherit;}
	.header .sp { display: none;}
	.l-container.header__container { margin: 0; padding: clamp( 60px, 3vw, 150px ) 4% 4%; text-align: center;}
	.header .logo { position: absolute; left: 1vw; top: 1vw;}
	.header .logo__img { width: clamp( 70px, 5vw, 109px );}
	.page_ttl { font-weight: bold; margin: 0 auto 2vh; line-height: 1; font-size: clamp( 40px, 5vw, 10vh );}
	.local_nav { margin: auto; max-width: 20em; font-size: clamp( 18px, 2vw, 3vh ); font-weight: bold;}
	.local_nav li { text-align: left; padding-left: 1.3em; position: relative; line-height: 1.4; margin: 1vh 0;}
	.local_nav li::before { content: "\f4ad"; font-family: FontAwesome; font-weight: 900; position: absolute; top: 0; left: 0;}
	.hdr_bnr { width: 60%; max-width: 400px; margin: 2vh auto;}
	.header__btns { position: static; transform: none; width: calc( 60% + 2vw); max-width: calc( 400px + 2vw ); margin: auto;}
	.header__btns ul { display: flex;}
	.header__btn.header__btn, .header__btn.header__btn:not(:last-child) { float: none; margin: 0 1vw 2vh; width: auto;}
	.header__btn.header__btn img { width: 100%;}
	.header .btn--request, .header .btn--reserve { border: none; background: none;}
	.header .btn--request:hover, .header .btn--reserve:hover { background: none;}
	.btn--header { padding: 0; border-radius: 10px;}
	.hdr_tel { max-width: 24em; margin: auto; background: rgba(255,255,255,0.15); border: solid 2px #fff; box-shadow: 0 10px 20px -10px rgba(0,82,152,0.6); font-weight: bold; padding: 1vh; color: #fff; line-height: 1.6;}
	.hdr_tel dl { margin: 0;}
	.hdr_tel dt { font-weight: bold; font-size: 110%; margin: 0;}
	.hdr_tel dd { margin: 0;}
	.hdr_tel dd.num { font-weight: bold; font-size: 180%;}
	.hdr_tel dd.num span::before { content: "\f2a0"; font-family: FontAwesome; font-weight: 900; display: inline-block; transform: rotate( -30deg );}
	.hdr_tel dd.open span { margin: 0 0.5em;}
	.advantageList { justify-content: space-between;}
	.advantageList li { width: 31%; font-size: 16px; margin: 0; text-indent: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
	.advantageList li::before { display: none;}
	main { width: 100%; background: #fff;}
	.l-container { padding-left: 10px; padding-right: 10px;}
	main > section, .contact { padding: 20px 0;}
	.bnr { padding-top: 0;}
	.intro__btns { padding: 0 20px; margin: 30px 0;}
	.intro__btn { max-width: unset; margin: 0 0 14px;}
	.section__heading { margin-bottom: 17px; color: #e30070; font-size: 20px; font-weight: 700;}
	.course_detail h3, .study_style h3 { font-size: 22px; margin-bottom: 15px;}
	.course_detail { padding: 12px;}
	.course_detail .offer dt, .course_detail .offer dd { width: 100%;}
	.chatgpt_course_outline dd > .img_area { width: 100%;}
	.chatgpt_course_outline .txt_area { width: 100%; padding: 0; line-height: 1.8;}
	.study_style li:first-child h3, .study_style li:nth-of-type(2) h3 { background-position: center center; padding: 10px;}
	.section__heading.single_line { font-size: 14px;}
	.trainingList.trainingList_new { padding: 14px;}
	.trainingList.trainingList_new li { margin: 6px; height: 32px;}
	.contact__text { margin-bottom: 28px; font-size: 21px; font-weight: 700; line-height: 1.6;}
	.contact__text .hidden-pc { display: inline;}
	.btn--contact { width: 100%; letter-spacing: .2em; font-size: 17px; margin: 0;}
	.btn--contact:not(:last-child), .btn--spnav:first-child { margin-bottom: 15px;}
	.pagetop, .spnav { display: inherit;}
	.footer { background-color: #d1d4db; line-height: 1.8; text-align: center;}
	.footer__customer, .footer__descs, .footer__logo, .footer__section:nth-child(1), .footer__section:nth-child(2), .footer__text, .btn--footer, .nav { display: none;}
	.footer__section:nth-child(3) { width: 100%; float: none;}
	.tel__heading { font-size: 22px; font-weight: 700;}
	.tel__number { display: inline-block; margin-top: 9px; padding-left: 49px; color: #de618b; background-image: url(../images/icon--tel.png); background-position: left center; background-size: 35px 23px; font-size: 24px; font-weight: 700;}
	.tel__text.hidden-sm { display: none;}
	.tel__text.hidden-pc { display: block;}
	.contact, .footer, .footer__bottom, .footer__section:nth-child(3) { text-align: center;}
	.footer__tel { margin-top: 0; text-align: center;}
	.tel__text { font-size: 16px; line-height: 1.8;}
}

@media (min-width:1500px) {
	main > section, .contact { padding: clamp( 40px, 4vw, 70px ) 0;}
	.l-container { padding-left: 2vw; padding-right: 2vw;}
	.section__heading { font-size: clamp( 24px, 2vw, 36px );}
	.course_detail { margin-bottom: clamp( 20px, 2vw, 40px ); padding: clamp( 1em, 2vw, 50px );}
	.course_detail .offer dt { width: 200px;}
	.course_detail .offer dd { width: calc( 100% - 200px );}
	.chatgpt_course_outline dd > .img_area { width: 40%;}
	.chatgpt_course_outline .txt_area { width: 60%; padding: 1em;}
	.study_style h3 { padding: 1em; font-size: 30px;}
	.section__heading.single_line { font-size: clamp( 24px, 1.75vw, 36px );}
}






















.hero { background: url(../images/hero-bg.jpg) no-repeat center top / cover;}
.heroTxt { width: 100%; position: relative;}
.heroTxt .stamp { }
.catchcopy p { color: #fff; font-weight: bold; line-height: 1;}
.catchcopy p > .dib { margin-bottom: 0.3em;}
.catchcopy p .underline { background: linear-gradient(transparent 70%, rgba(225,255,31,.6) 0%); text-shadow: 3px 3px 0 #010833;}
.catchcopy p .small { font-size: 80%;}
.article_hdr h1 { font-weight: bold; line-height: 1.2; color: #28f09e; text-shadow: 2px 2px 0 black, 0 0 0.8em #010834;}
.advantageList > li { width: 30%; margin: 1.5%; color: #fff; text-align: center; line-height: 1.2; font-weight: bold;}
.advantageList > li .icon { margin: auto auto 0.5em;}
.advantageList > li .c_yellow { color: yellow;}
.advantageList > li .small { font-size: 80%;}
.textbook_info { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 3em;}
.textbook_info .txt { width: 17em; margin: 1em; line-height: 1.8; font-weight: bold; font-size: 120%;}
.textbook_info .img_area { margin: 0; width: clamp( 120px, 30%, 180px ); margin: 1em;}

@media(max-width: 999px) {
	.hero { padding: 3vw; margin-top: 74px;}
	.hero .intro { padding: 0;}
	.heroTxt { padding-top: 5vw; margin-bottom: 2vw;}
	.heroTxt .stamp { width: 30vw; position: absolute; left: 0; top: -3vw; transform: rotate( -15deg );}
	.catchcopy p { width: 58vw; margin: 0 0 auto auto; font-size: 7vw;}
	.article_hdr h1 { font-size: 10vw;}
	.advantageList > li { padding: 1em; font-size: 2vw; background: rgba(18,27,81,.6); border: solid 3px #fff;}
	.advantageList > li .icon { width: clamp( 80px, 50%, 120px );}
}
@media(max-width: 799px) {
	.hero { margin-top: 43px;}
	.advantageList > li { padding: 0.5em; font-size: 2.5vw;}
}
@media (max-width:699px) {
	.textbook_info .txt { width: auto; max-width: 17em; margin: 0 auto 0 0;}
	.textbook_info .txt .dib { display: inline;}
	.textbook_info .img_area { width: 25vw; margin: -16vw 0 0 auto;}
}

@media(max-width: 499px) {
	.heroTxt .stamp { top: 4vw;}
	.article_hdr h1 { font-size: 11vw;}
	.advantageList { border: solid 2px #fff; background: rgba(18,27,81,.6); margin-top: 3vw; padding: 2vw;}
	.advantageList > li { width: 100%; border: none; background: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0; padding: 1vw;}
	.advantageList > li .icon { width: 15%; margin: 0;}
	.advantageList > li p { width: calc( 85% - 1em ); font-size: clamp( 14px, 4vw, 21px ); text-align: left;}
}
@media (max-width:399px) {
	.textbook_info { background: #b9e9ff; border-radius: 1em; padding: 1em 1.5em;}
	.textbook_info .txt { background: none; max-width: unset; auto auto 0.5em; padding: 0; font-size: 100%; line-height: 1.6; border-radius: 0;}
	.textbook_info .img_area { width: clamp( 120px, 50vw, 150px ); margin: 0 auto;}
}

@media(min-width: 999.1px) {
	.hero { padding: 3vw;}
	.hero .intro { padding: 0;}
	.heroTxt { padding-top: 2vw; margin-bottom: 2vw;}
	.heroTxt .stamp { width: 15vw; position: absolute; left: -5vw; top: 2vw; transform: rotate( -15deg );}
	.catchcopy p { margin: 0 0 auto auto; width: calc( 100% - 13vw); font-size: 3.5vw;}
	.catchcopy p > .dib { white-space: nowrap;}
	.catchcopy .small { font-size: 60%; letter-spacing: 0; margin: 0 0.1em;}
	.article_hdr h1 { font-size: 5vw;}
	.advantageList { border: solid 2px #fff; background: rgba(18,27,81,.6); margin-top: 1vw; padding: 0.5vw;}
	.advantageList > li { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0; padding: 0.5vw;}
	.advantageList > li .icon { width: 15%; margin: 0;}
	.advantageList > li p { width: calc( 85% - 1em ); font-size: clamp( 18px, 2vw, 24px ); text-align: left;}
	.textbook_info .txt { width: 100%;}
	.textbook_info .txt .dib { display: inline;}
}

@media (min-width:1500px) {
	.heroTxt .stamp { width: 20vw; left: -10vw; top: -4vw;}
	.advantageList { border: none; background: none; margin-top: 1vw; padding: 0;}
	.advantageList > li { display: block; width: 30%; margin: 1.5%; padding: 1em; background: rgba(18,27,81,.6); border: solid 3px #fff; font-size: 1.125vw;}
	.advantageList > li .icon { width: clamp( 80px, 50%, 120px ); margin: auto auto 0.5em;}
	.advantageList > li p { width: 100%; font-size: inherit; text-align: center;}
	.textbook_info .txt { width: calc( 100% - 180px - 4em ); max-width: 23em;}
}

@media (min-width:2000px) {
	.hero { padding: 2vw;}
	.heroTxt { padding-top: 5vw;}
	.heroTxt .stamp { width: 15vw; max-width: 320px; top: -2vw; left: unset; right: 82%;}
	.catchcopy p { width: calc( 100% - 10vw); font-size: 2vw;}
	.article_hdr h1 { font-size: 3.5vw;}
	.advantageList { margin-top: 0.5vw;}
	.advantageList > li { font-size: clamp( 20px, 0.8vw, 24px);}
}






#ask_chatgpt { background: #e3f3ed;}
.chat_wrap { background: #fff; font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; border: solid 1px #343541; max-width: 750px; margin: auto;}
.chat_wrap h2 { background: #343541; color: #d9d9e3; text-align: center; padding: 0.3em 1.5em; position: relative;}
.chat_wrap h2::before, .chat_wrap h2::after { content: ""; position: absolute; top: 50%; transform: translateY( -50% ); opacity: 0.8;}
.chat_wrap h2::before { content: "≡"; left: 0.3em;}
.chat_wrap h2::after { content: "＋"; right: 0.3em;}
.chat_wrap h2 .c_yellow { color: yellow;}
.chat_image .message { border-bottom: solid 1px rgba(0,0,0,.1); padding: 1em; display: flex; flex-wrap: wrap; justify-content: space-between; line-height: 1.75; color: #374151;}
.chat_image .message.from_user {}
.chat_image .message.from_ai { background: #f7f7f8;}
.chat_image .icon { width: 36px; height: 36px;}
.chat_image .txt_area { width: calc( 100% - 36px - 1em );}
.gpt_input_area { padding: 10px; align-items: center;}
.gpt_input_area > .flex { width: calc( 100% - 40px ); justify-content: space-between; align-items: center; background: #fff; box-shadow: 0 0 10px rgba( 0,0,0,0.2 ); padding: 0.3em 0.5em; border-radius: 0.8em; color: #aaa;}
.gpt_input_area img { display: block;}
.gpt_input_area .regenerate_btn { width: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}


.merit_list > li { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse; margin-bottom: 2em;}
.merit_list .txt_area { width: 60%;}
.merit_list .img_area { width: calc( 40% - 2em );}
.merit_list h3 { font-weight: bold; font-size: clamp( 18px, 1.125vw, 24px ); margin-bottom: 0.8em; background: yellow; padding: 0.3em 0.3em 0.1em 1.8em; position: relative;}
.merit_list h3 .num { position: absolute; left: -0.2em; top: 0; transform: rotate(-5deg); display: flex; justify-content: center; align-items: center; width: 1.2em; height: 1.2em; background: #e30070; color: white; line-height: 1; font-size: 150%;}
.merit_list h3 .txt {}
.merit_list .txt_area p { line-height: 1.75; font-size: clamp( 14px, 0.75vw, 18px );}
.merit_list + .cta_btns { display: flex; flex-wrap: wrap; justify-content: center;}
.merit_list + .cta_btns > li { width: 100%; max-width: 400px; margin: 10px;}


@media(max-width: 999px) {
	.merit_list h3 { font-size: clamp( 16px, 2.5vw, 24px );}
	.merit_list .txt_area p { font-size: clamp( 14px, 1.75vw, 18px );}
}

@media(max-width: 799px) {
	.merit_list .txt_area { width: 96%; max-width: 640px; margin: auto;}
	.merit_list .img_area { width: 80%; max-width: 400px; margin: 1em auto;}
	.merit_list h3 { font-size: clamp( 16px, 4vw, 24px );}
	.merit_list .txt_area p { font-size: clamp( 14px, 3vw, 18px );}
}


