@charset "utf-8";

/* ---------------------------------------------------------
■ ヘッダー
--------------------------------------------------------- */
header {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    background-color: #002b69;
    overflow: hidden;
	position: fixed;
    z-index: 15;
    transition:0.2s;
}

#head_btnbox {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    background-color: #002b69;
    overflow: hidden;
    padding: 5px;
}

/*追従ヘッダー*/
header #head_btnbox{
	position: fixed;
	height: 65px;
    top: 0;
	width: 100%;
	z-index: 500;
}
@media screen and (max-width: 767px){
	header #head_btnbox{
		height: 43px;
	}
}

/* ---------------------------------------------------------
■ TOPボタン
--------------------------------------------------------- */

#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100;
}
#page-top a {
	text-decoration: none;
	text-align: center;
	color: #444;
	font-size: 70%;
	font-weight: bold;
	background: rgba(237, 237, 237,.8);
	width: 60px;
	aspect-ratio:3/2;
	border-radius: 15px;
	display: flex;
	transition: .1s;
}
#page-top a span{
	display: block;
	margin: auto;
}
@media screen and (min-width: 767px) {
	#page-top a:hover{
		opacity: .7;
	}
}


/* ---------------------------------------------------------
■ フッター
--------------------------------------------------------- */
footer {
	width: 100%;
	text-align: center;
  	background-color:#002B69;
	color:#fff;
	padding:60px 0;
}
footer a{
	color:#fff;
}
footer .logo{
	width:50%;
	max-width: 570px;
}

footer ul {
    margin: 40px auto 0;
    text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}
footer ul div {
    display: inline-block;
}
footer ul li {
    display: inline-block;
    color: #fff;
    letter-spacing: -0.01em;
}
footer ul li::before {
	content: "｜";
    padding: 0 10px;
}
footer ul li:first-child:before {
    content: "";
    padding: 0;
}


/* ---------------------------------------------------------
■ ライトボックス
--------------------------------------------------------- */
.featherlight{ padding: 2%}

.lightbox{ 
	display: none;
	width: 100%;
	height: 100%;
	overflow: auto;
	text-align: left;
    padding: 20px;
	background-color:#fff;
}

@media screen and (max-width: 767px){
	.lightbox {
	    padding: 25px 20px;
	}
}


/* ---------------------------------------------------------
■ フェードイン
--------------------------------------------------------- */
.fadein {
  visibility: hidden; }

.fadein_delay {
	-webkit-animation-delay: 0.8s;
	-ms-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

.fadeInDown {
  visibility: visible !important;
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.5s;
  -ms-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }


/* ---------------------------------------------------------
■ フェードインｊｓ
--------------------------------------------------------- */
.Fade_In{
	opacity: 0;
  	transition: all .5s ease;
	transform: translate(0, 100px);
}

.Fade_In.show{
  opacity: 1;
  transform: none;
}

/*----------------------------------------------------------
ハンバーガーメニュー
----------------------------------------------------------*/

.head-02.open {
  transform: translateX(10%);
  visibility: visible;
}
.lp-header__trigger.open span:nth-child(1) {
  transform: rotate(45deg);
}

.lp-header__trigger.open span:nth-child(2) {
  opacity: 0;
}

.lp-header__trigger.open span:nth-child(3) {
  transform: rotate(-45deg);
}
.head-wrap {
  position: relative;
}
.head-nav {
  display: flex;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
	padding:8px 0;
}
.head-nav img {
  margin: 0 auto;
  display: block;
}
.head-items {
  display: flex;
  list-style: none;
  color: #ffffff;
  padding: 0;
  margin: 0 0 0 auto;
}
.head-items li {
  margin-right: 3em;
}
@media screen and (max-width: 1000px) {
  .head-items li {
    margin-right: 1.8em;
  }
}

.head-items a {
  text-decoration: none;
  color: #ffffff;
}
.head-items a:hover {
  color: #c6c6c6;
}
.lp-header__trigger {
  position: absolute;
  z-index: 5;
  top: 16px;
  right: 10px;
  background: none;
  border: none;
  padding: 0;
  height: 24px;
  cursor: pointer;
  margin: 0 0 0 auto;
  display: none;
}
.lp-header__trigger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #e6e6e6;
  margin-bottom: 7px;
  transform-origin: center left;
  border-radius: 1px;
  transition: all 600ms ease;
}
.lp-header__trigger.open span{
  width: 25px;
}

.head-02 {
  width: 100%;
  transform: translateX(100%);
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  padding-top: 50px;
  padding-bottom: 21px;
  top: 0;
  right: 0;
  height: 100vh;
  z-index: 1;
  transition: all 600ms ease;
  visibility: hidden;
}
.head-02__wrap {
  padding: 0 10px;
}
.head-02 hr {
  margin: 0;
}
hr {
  border: none;
  border-top: 1px solid #888888;
  background: transparent;
}
.head-02__item {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 33%;
  color: #c6c6c6!important;
  padding: 17px;
}

.head-nav .head-logo{
	margin-left: 10px;
	height:40px;
	width:auto;
}

@media screen and (max-width: 799px) {
  .head-items {
    display: none;
    color: #dadada;
  }
  .lp-header__trigger{
    top: 20px;
    right: 20px;
    display: block;
  }
}

.header_after{
	height:56px;
}


/*----------youtube動画---------*/
.youtube{
	
}
.youtube iframe{
	aspect-ratio: 16 / 9;
	width:100%;
	height:auto;
}



/*=======================================
 ■ 追加分
=========================================*/

body{
	background-color:#ffffd9;
}


/*----------メインビジュアル---------*/
.mv_area{
	width:100%;
	position: relative;
	background-color:#d63838;
}

.mv_box{
	width:100%;
	position: relative;
	background-image:url("../images/main_visual_bk.webp");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.mv_img{
	margin:auto;
	padding-top:30px;
	max-width:1100px;
}

.mv_title_box{
	margin:auto;
	max-width:1100px;
	display:flex;
	flex-wrap:wrap;
	gap:0 2%;
	padding:20px 30px;
}
.mv_title_box img{margin:auto;}
.mv_title_box img[src*="title"]{
	width:67%;
}
.mv_title_box img[src*="period"]{
	width:31%;
}

.mv_title_comment{
	width:100%;
	color:#222;
	letter-spacing:0.05em;
	font-weight:600;
	padding:10px 0 0;
}



/*--------------導入テキスト--------------------*/
.introduction{
	width:100%;
	padding:80px 0 100px;
}

.introduction_box{
	width: 100%;
	max-width: 1360px;
	margin: auto;
	padding:0 20px;
}

.introduction_wrap{
	display: flex;
	flex-wrap:wrap;
}
.intro_mv{
	width:50%;
}
.intro_text{
	width: 50%;
	padding:0 0 0 30px;
}

.intro_text h2{
	width:100%;
	color:#222;
	font-size: 2em;
	font-weight:600;
}
.intro_text p{
	width:100%;
	color: #222;
	text-align: center;
	margin: auto;
	padding-top: 20px;
	line-height: 1.7em;
	font-size: 1.1em;
	font-weight:600;
}

/*----------導入テキスト（文字のみ）---------*/

.introduction_wrap.single{
	
}

.introduction_wrap.single .intro_mv{
	display: none;
}
.introduction_wrap.single .intro_text{
	margin: auto;
	padding:0;
	width:70%;
}



/*----------ここがすごい！---------*/
.point{
	width:100%;
	background-color:#d63939;
}

.point_bk{
	background-image:url("../images/dot.webp");
	background-size:60px;
}
.point_white{
	background:linear-gradient(to bottom,rgba(214,57,57,.85) 30%,rgba(25,255,255,0));
}


.point_wrap{
	padding:100px 0 80px;
}

.point_box{
	width: 100%;
	max-width: 1160px;
	margin: auto;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

.point_mvclass{
	width:49%;
	background-image: url("../images/point_bk.webp");
	background-size: 400px;
	background-repeat: no-repeat;
	background-position: right top;
	background-color:#fffce3;
	padding:0 0 30px;
}
.point_mvclass h2{
	display: flex;
	flex-wrap: wrap;
	padding: 25px 0;
	border-bottom:#d63939 6px dotted;
}
.point_mvclass h2 img[src*="atwill"]{
		width:90%;
		margin: auto;
	}
.point_mvclass h2 span{
	display: block;
	position: relative;
	width:75%;
	margin:16px auto 0;
}
.point_mvclass h2 span img[src*="line"]{
	position: absolute;
	transform: rotate(-62deg);
    top: auto;
	bottom: -9%;
	left: -12%;
	width: 12%;
}
	

.point_mvclass_inner{
	display: flex;
	flex-wrap:wrap;
	flex-direction: column-reverse;
	max-width: 1200px;
	margin: auto;
	padding:30px 20px 20px;
	justify-content: center;
}

.point_mvclass_text_box{
	padding-top:20px;
	width:80%;
	margin: auto;
}

.point_mvclass_img_box{
	width: 80%;
	margin: auto;
}

.point_mvclass_inner_box{
	display: flex;
	flex-wrap:wrap;
	padding:10px 0 20px ;
}
.point_mvclass_num{
	display: flex;
	flex-wrap:wrap;
	width:50px;
	margin-right: 10px;
}

.point_mvclass_num img{
	margin: auto;
}
.point_mvclass_text{
	width:calc(100% - 60px);
}
.point_mvclass_text p{
	color: #222;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.3em;
}

.point_mvclass_text p:nth-child(2){
	color:#d63939;
	font-size: 2em;
}


.point_counselor{
	width:49%;
	background-image: url("../images/point_bk.webp");
	background-size: 400px;
	background-repeat: no-repeat;
	background-position: right top;
	background-color:#fffce3;
	padding:0 0 30px;
}
.point_counselor h2{
	display: flex;
	flex-wrap: wrap;
	padding: 25px 0;
	border-bottom:#d63939 6px dotted;
}
.point_counselor h2 span{
	display: block;
	position: relative;
	width:90%;
	margin: auto;
}
.point_counselor h2 span img[src*="good"]{
	position: absolute;
    top: auto;
	bottom:-130%;
	left: -1%;
	width: 11%;
}
.point_counselor h2 span img[src*="teaching"]{
	width: 72%;
}

.point_counselor h2 img[src*="relieved"]{
	width:71%;
	margin:0 auto;
}

.point_counselor_inner{
	display: flex;
	flex-wrap:wrap;
	max-width: 1200px;
	margin: auto;
	padding:30px 20px 20px;
	justify-content: center;
}

.point_counselor_text_box{
	padding-top:20px;
	width:90%;
	margin: auto;
}

.point_counselor_text_box p{
	text-align: center;
	color: #222;
	font-size: 1.3em;
	font-weight: 600;
	line-height: 1.75em;
	padding-bottom: 20px;
}
.point_counselor_text_box p span{
	color:#d63939;
	font-size: 1.5em;
	letter-spacing: 0.04em;
}

.point_counselor_img_box{
	width:80%;
	margin: auto;
}



/*------------おすすめ講座---------------------*/
.recommend{
	padding:100px 0 60px;
}
.recommend_box{
	width: 100%;
	max-width: 1360px;
	margin: auto;
	padding:0 20px;
}

.recommend_box h2{
	text-align:center;
	font-size:70px;
	font-weight:600;
	color:#d63939;
}
.recommend_h2sub{
	text-align: center;
	color: #222;
    font-size: 1.8em;
    font-weight: 600;
	padding-bottom:50px;
}
.recommend_h2sub span{
	color:#d63939;
}

.recommend_bottom{
	text-align: center;
	color: #222;
    font-size: 1.3em;
    font-weight: 600;
}

.campaign_spr .att{
	color: #222;
    font-size: 0.9em;
	font-weight:600;
	padding-top:10px;
}


/*--------タブ切り替え部分-----------*/

.tab_container {
	padding-bottom: 1em;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.tab_item{
	display: block;
	width: calc((100% - 40px) / 3);
	margin:auto 20px 0 0;
	padding:15px 0;
	background-color: #ececec;
	text-align: center;
	color:#fffce3;
	font-size: 26px;
	font-weight: bold;
	border-radius: 3px 3px 0 0;
	transition: all 0.2s ease;
}

.tab_item[for="tab1"]{
	background-color: #ea5514;
}
.tab_item[for="tab2"]{
	background-color: #d63939;
}
.tab_item[for="tab3"]{
	background-color: #ab1616;
	margin-right: 0;
}
@media screen and (min-width: 768px) {
	.tab_item:hover {
		padding-bottom: 1.4em;
	}
}
input[name="tab_item"] {
	display: none;
}

.tab_content {
  display: none;
}

#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content{
	display: block;
}
.tab_container input:checked + .tab_item {
	padding-bottom: 1.4em;
}

.tab_content{
	width:100%;
	padding: 2em;
	margin-top: -2px;
}
.tab_content h3{
	font-weight:600;
	color:#fff;
	display: inline-block;
	padding:8px 40px 1px;
	letter-spacing: 0.06em;
}
.tab_content h3 img[src*="h2a"]{
	max-width: 800px;
	margin-bottom: -10px;
}
.tab_content h3 img[src*="h3"]{
	max-width: 900px;
}

.tab_content h3 span{
	display:block;
	font-size:1.8em;
	letter-spacing: -0.02em;
	padding: 5px 0 0;
}

.course_h3sub{
	text-align: center;
	padding-top: 15px;
	font-size:1.2em;
	line-height: 1.2em;
	font-weight:600;
	letter-spacing: -0.02em;
}

#tab1_content{
	background-color:#ea5514;
}
#tab1_content .course_h3sub{
	color:#ea5514;
}
#tab1_content h3 span{
	color:#ea5514;
}

#tab2_content{
	background-color:#d63939;
}
#tab2_content .course_h3sub{
	color:#d63939;
}
#tab2_content h3 span{
	color:#d63939;
}

#tab3_content{
	background-color:#ab1616;
}
#tab3_content .course_h3sub{
	color:#ab1616;
}
#tab3_content h3 span{
	color:#ab1616;
}

.tab_content_inner{
	background-color:#ffffd9;
	border-radius: 20px;
	padding:70px 20px 30px;
}

.course_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding:0 20px 70px;
}
.course_wrap.jtfy_left{
	justify-content:flex-start;
}


/*------------------------------*/
.course_inner{
	cursor: pointer;
	display: block;
	width:calc((100% - 40px) / 3);
	margin:20px 20px 0 0;
	background-color: #fff;
	transition: .2s;
}
.course_inner img{
	transition: .2s;
	box-shadow: 2px 2px 8px rgba(0,0,0,.25);
}
@media screen and (min-width: 1101px){
	.course_inner:nth-child(3n){
		margin-right: 0;
	}
}
@media screen and (min-width: 768px){
	.course_inner:hover img{
		box-shadow:none;
	}
}
/*------------------------------*/

.course_inner_box{
	position: relative;
	cursor: pointer;
	display: block;
	width:calc((100% - 40px) / 3);
	margin:20px 20px 0 0;
	box-shadow: 2px 2px 8px rgba(0,0,0,.25);
	transition: .2s;
}
.double .course_inner_box{
	width:calc((100% - 20px) / 2);
}
.double .course_inner_box:nth-child(2n){
		margin-right: 0;
	}

.course_inner_detail{
	display: flex;
	flex-wrap: wrap;
	padding: 15px 20px 18px;
}
.double .course_inner_detail{
	max-width:540px;
	margin: auto;
}

/*.course_inner_img{width:90px;}*/

.course_inner_title{
	width:100%;
	text-align: left;
}

/*
.course_inner_title .subject{
	display: inline-block;
	background-color: #fff;
	font-weight:600;
	font-size:1.6em;
	letter-spacing: 0.02em;
	padding: 4px 9px 0;
}*/

.course_inner_title .title{
	display:block;
	color:#fffce3;
	font-weight:600;
	font-size:1.45em;
	line-height: 1em;
	letter-spacing: 0.02em;
	padding: 8px 0 0;
}
.course_inner_text{
	width:calc(100% - 60px);
	text-align: left;
	color: #fff;
	font-size:1.15em;
	line-height: 1.2em;
	letter-spacing: 0.05em;
	padding: 10px 0 5px;
}

.course_inner_box img[src*="arrow"]{
	position: absolute;
	width:40px;
	right:18px;
	bottom:15px;
	transition: .2s;
}


#tab1_content .course_inner_box{
	background: linear-gradient(45deg,#ea5514 60%,#ff8c12);
}
#tab1_content .course_inner_title .subject{
	color:#ea5514;
}

#tab2_content .course_inner_box{
	background: linear-gradient(45deg,#d63939 60%,#ef5800);
}
#tab2_content .course_inner_title .subject{
	color:#ef5800;
}

#tab3_content .course_inner_box{
	background: linear-gradient(45deg,#ab1616 60%,#ea5514);
}
#tab3_content .course_inner_title .subject{
	color:#ab1616;
}

@media screen and (min-width: 1101px){
	.triple .course_inner_box:nth-child(3n){
		margin-right: 0;
	}
	.double .course_inner_box:nth-child(2n){
		margin-right: 0;
	}
}

@media screen and (min-width: 768px){
	.course_inner_box:hover{
		box-shadow:none;
	}
	.course_inner_box:hover img[src*="arrow"]{
		right:8px;
	}
}


/*--------POPUP部分-----------*/

.pop_box{
	max-width: 740px;
}

.atwill_detail{
	display: flex;
	flex-wrap: wrap;
	background-color:#fffce3;
	border-radius: 20px;
	padding:25px;
	color: #222;
}
.atwill_detail_img{
	width:140px;	
}
.atwill_detail_text{
	width:calc(100% - 140px);
	padding:0 0 0 20px;
	display: flex;
	flex-wrap: wrap;
}

.atwill_detail_text-inner{
	display: contents;
}

.atwill_tit{
	
}
.atwill_detail_text .subject{
	display:inline-block;
	background:#222;
	color:#fff;
	font-size:.95em;
	margin-bottom: auto;
	padding: 5px 17px 2px;
	font-weight:600;
	order:1;
}
.atwill_detail_text h3{
	display:block;
	width:100%;
	font-size: 1.5em;
	line-height:1.2em;
	font-weight:600;
	padding: 15px 0 5px;
	order:2;
}

.atwill-teacher{
	width:100%;
	font-weight:600;
	order:3;
}
.atwill-teacher span.teacher_bfr{
	background-color:#e6e6e6;
	padding:0 8px;
	font-size: .9em;
	font-weight:600;
	margin-right: 5px;
}
.atwill-teacher span.teacher_aft{
	font-size: .85em;
	font-weight:600;
}

.atwill_detail_main{
	width:100%;
	position: relative;
	padding:15px 10px 0;
}
.atwill_detail_main::before{
	content: "";
	width: 100%;
	height:2px;
	position: absolute;
	top:0;
	left:0;
}

.atwill_catch{
	font-weight:600;
}

.lightbox[id*="high1"]{
	background: linear-gradient(90deg,#ea5514,#ffb03f,#ea5514);
}
.lightbox[id*="high1"] .atwill_detail_text .subject{
	background:#ea5514;
}
.lightbox[id*="high1"] .atwill_detail_main::before{
	background: linear-gradient(90deg,#ea5514,#ffdf22,#ea5514);
}


.lightbox[id*="high2"]{
	background: linear-gradient(75deg,#d63939,#ef5800,#d63939);
}
.lightbox[id*="high2"] .atwill_detail_text .subject{
	background:#d63939;
}
.lightbox[id*="high2"] .atwill_detail_main::before{
	background: linear-gradient(90deg,#d63939,#ef5800,#d63939);
}

 
.lightbox[id*="high3"]{
	background: linear-gradient(75deg,#ab1616,#ea5514,#ab1616);
}
.lightbox[id*="high3"] .atwill_detail_text .subject{
	background:#ab1616;
}
.lightbox[id*="high3"] .atwill_detail_main::before{
	background: linear-gradient(90deg,#ab1616,#ea5514,#ab1616);
}




/*---------------春の学習特典------------------*/

.campaign{
	padding: 120px 0 100px;
}
.campaign_box{
	width: 100%;
	max-width: 1360px;
	margin: auto;
	padding:10px 20px 0;
}

.campaign h2{
	background-color:#FFD500;
	color:#b22c2d;
	font-size:4.4em;
	padding:8px 0 0;
	font-weight:600;
	letter-spacing: 0.2em;
}
.campaign_h2sub{
	margin-top: 10px;
	text-align: center;
	color: #d63939;
	font-size:1.8em;
	font-weight:600;
	padding:10px;
	background-color: #dcf0fb;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.campaign_h2sub img{
	width:100px;
	margin: auto 0;
}
.campaign_h2sub span{
	margin: auto 12px;
}

.campaign_spr{
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	padding:0 0 70px;
}
.campaign_spr_inner{
	width:calc((100% - 40px) / 3);
	margin:10px 20px auto 0;
}
.campaign_spr_inner:nth-child(3n){
	margin-right: 0;
}
.campaign_spr_inner img{
	
}
.campaign_spr_inner p{
	padding:10px 20px 20px;
	color: #3a3a3a;
	font-size:14px;
}

.campaign_intr_box{
	margin: 0 auto 70px;
}
.campaign_intr_box-inner{
	margin: 0 auto;
	border: 6px #ee8aac solid;
	background: linear-gradient(to bottom,#f7c9dd,#fff);
}
.campaign_intr_box h3{
	color: #fff;
    font-weight: 600;
    font-size: 3em;
    line-height: 1.2em;
	letter-spacing: 0.03em;
	background-color: #ee8aac;
	padding:5px 0 3px;
}

.campaign_intr{
	max-width: 767px;
	margin: auto;
	padding:20px 20px 10px;
	position: relative;
}

.campaign_intr_terms{
	color:#222;
	font-weight:600;
	font-size: 1.35em;
	text-align: left;
}
.campaign_intr_quo{
	color:#ee8aac;
	font-weight:600;
	font-size: 3em;
	text-shadow: 1px 1px 2px rgba(0,0,0,.2);
}
.campaign_intr_quo span{
	font-size: 0.8em;
}

.campaign_intr img[src*="quo"]{
	position: absolute;
	width:160px;
	top:0;
	right:0;
}

.campaign_intr_box .att{
	color: #222;
	font-size:.9em;
	line-height: 1.5em;
	font-weight:600;
}



.campaign_hnk_box{
	margin: 0 auto;
	max-width: 1360px;
	padding:30px 20px 50px;
	background-color:#ee8aac;
	border-radius: 30px;
}
.campaign_hnk_box h3{
	width:100%;
	color:#fff;
	font-weight:600;
	font-size:3.4em;
	line-height: 1.2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.campaign_hnk_box h3 img{
	width:0.9em;
	margin: auto 0 auto;
}
.campaign_hnk_box h3 span{
	margin:9px 20px 0;
}
.campaign_hnk_h3sub{
	width: 100%;
	text-align: center;
	color:#fff;
	letter-spacing: 0.03em;
}

.campaign_hnk_wrap{
	max-width: 1200px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.campaign_hnk_inner{
	position: relative;
	width:calc((100% - 50px) / 2);
	margin:10px 0 0;
	background-color:#fff;
	padding:3% 4%;
}
.campaign_hnk_inner img[src*="tbimg"]{
	position: absolute;
	top:2%;
	right:-3.5%;
	width:23%;
}

.campaign_hnk_btmtxt{
	width: 100%;
	text-align: center;
	color:#fff;
	font-weight:600;
	font-size:3em;
	padding-top:20px;
	letter-spacing: 0.08em;
	text-shadow:2px 2px 3px rgba(228, 108, 140,.5);
}



/*-----------60thキャンペーン----------------*/

.campaign_60th{
	padding: 120px 20px 100px;
	background: linear-gradient(166deg, #e50012, #e50012 25%, #bb121a 45%, #E95533 50%, #e50012, 61%, #e50012);
}

.campaign_60th_box{
	position: relative;
	width: 100%;
	max-width: 1360px;
	margin: auto;
	padding:40px 40px;
	background-color: #fff;
	border:#b1643a solid 5px;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,.4));
}

.campaign_60th_box img[src*="logo"]{
	position: absolute;
	max-width: 460px;
	width: 100%;
	top: -129px;
	left: -40px;
}

.campaign_60th_box img[src*="ribbon"]{
	position: absolute;
	max-width:600px;
	width:100%;
	top:-80px;
	left:50%;
	transform: translateX(-50%);
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,.4));
}

.campaign_60th_box img[src*="new-student"]{
	position: absolute;
	max-width:340px;
	width:100%;
	top:-50px;
	right:-20px;
}

.campaign_60th_box-h3area{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	z-index: 2;
}

.campaign_60th_box-h3{
	display: flex;
	flex-wrap: wrap;
	width:78%;
	padding:35px 10px 20px;
	background: linear-gradient(to bottom,rgba(255,255,255,0) 70%,#fff33f 70%,#fff33f 90%,rgba(255,255,255,0) 90%);
}
.campaign_60th_box-h3 span{
	display: block;
	display: flex;
	flex-wrap: wrap;
}
.campaign_60th_box-h3 span img{
	margin-top: auto;
}

.campaign_60th_box-h3 span:nth-child(1){
	width:19%;
	padding:0 0.5% 0.5% 0;
}
.campaign_60th_box-h3 span:nth-child(2){
	width:42%;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,.4));
}
.campaign_60th_box-h3 span:nth-child(3){
	width:39%;
	padding-bottom: 0.5%;
}

.campaign_60th_wrap{
	display: flex;
	flex-wrap: wrap;
	gap:10px;
	padding:20px 0 0;
}

.campaign_60th_inner{
	width:calc((100% - 20px)/ 3);
}

.campaign_60th_note{
	padding-top: 20px;
	color: #222;
    font-size: 0.9em;
    font-weight: 600;
}


/*-----------受講までの流れ----------------*/

.flow{
	padding: 100px 0 60px;
}

.flow_box{
	width: 100%;
	max-width: 1360px;
	margin: auto;
	padding:0 20px;
}
.flow_box h2{
	color: #d63939;
	font-size: 4.2em;
    letter-spacing: 0.06em;
	font-weight:600;
}

.flow_inner{
	position: relative;
	max-width: 900px;
	margin:60px auto 100px;
	border:4px solid #d63939;
	border-radius: 25px;
	padding:20px;
}
.flow_inner_num{
	position: absolute;
	display: inline-block;
	width:220px;
	background-color:#ffffd9;
	top:-1em;
	left:0;
	right:0;
	margin: auto;
	color:#d63939;
	font-size: 2.5em;
	font-weight:600;
}
.flow_inner h3{
	color: #222;
	font-size: 1.8em;
	font-weight:600;
}

.flow_inner_img{
	display: flex;
	flex-wrap: wrap;
	width:140px;
	height:140px;
	margin: auto;
	padding:20px;
	margin-bottom: 15px;
}
.flow_inner_img.step_1{
	padding:10px 20px 20px;
}
.flow_inner_img.step_2{
	padding:20px 20px 15px;
}
.flow_inner_img.step_3{
	padding:12px 20px 20px;
}

.flow_inner_img img{
	margin: auto;
}

.flow_inner_links{
	
}
.flow_inner_links a{
	display: block;
	position: relative;
	background-color:#d63939;
	color:#ffffd9;
	font-size: 1.2em;
	font-weight:600;
	border: #d63939 3px solid;
	border-radius: 3em;
	padding:.5em 0 .4em;
	letter-spacing: 0.02em;
	margin-bottom: 13px;
	transition: .2s;
}
.flow_inner_links a::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    right: 15px;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    z-index: 1;
    border-top: 3px solid #ffffd9;
    border-right: 3px solid #ffffd9;
	transition: .2s;
}
@media screen and (min-width: 768px) {
	.flow_inner_links a:hover{
		color:#d63939;
		background-color:rgba(255,255,255,0);
	}
	.flow_inner_links a:hover::after {
		border-color:#d63939;
	}
}

.flow_inner_text{

}

.flow_inner_menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top:15px;
}
.flow_inner_menu-detail{
	width: 48.5%;
	background-color:rgba(233,71,9,.1);
}
.flow_inner_menu-detail h4{
	background-color:#d63939;
	color:#fff;
	font-size:1.2em;
	font-weight:600;
	letter-spacing: 0.08em;
	padding:0.25em 0 0.05em;
}
.flow_inner_menu-detail p{
	padding:.8em 1.4em 1em;
	font-size: 0.92em;
}





/*-----------ガイダンス---------------*/
.guidance{
	padding: 0 0 60px;
}

.guidance_box{
	width: 100%;
	max-width: 1360px;
	margin: auto;
	padding:0 20px;
}

.guidance_box h2{
	color: #d63939;
	font-size: 2.6em;
    letter-spacing: 0.06em;
	font-weight:600;
}

.guidance_wrap{
	margin: 10px auto 0;
	display: flex;
	flex-wrap: wrap;
	padding:0 0 30px;
	justify-content:flex-start;
}
.guidance_inner{
	width:calc((100% - 40px) / 3);
	margin:10px 20px 60px 0;
	display: flex;
	flex-wrap: wrap;
}
.guidance_inner:nth-child(3n){
	margin-right: 0;
}

.guidance_inner_img{
	margin: 0;
	width: 100%;
}
.guidance_inner_text{
	margin:0;
	width: 100%;
	padding:10px 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.guidance_inner_text span{
	display: block;
	width:100%;
	padding-bottom: 10px;
}

.guidance_inner a{
	transition: .2s;
}

.guidance_inner a.guidance_btn{
	display: block;
    width: 100%;
    margin: auto auto 0;
    position: relative;
    text-align: center;
    font-size: 110%;
    padding: 8px;
    font-weight: bold;
    color: #002b69;
    border: solid 3px #002b69;
    transition: .2s;
}
.guidance_inner a.guidance_btn::after{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    right: 15px;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    z-index: 1;
    border-top: 3px solid #002b69;
    border-right: 3px solid #002b69;
}
.guidance_inner.gray a{
	pointer-events:none;
}
.guidance_inner a img{
	transition: .2s;
}

.guidance_inner.gray a.guidance_btn{
	color:#1a1a1a;
	background: #ddd;
	border: solid 3px #ddd;
}
.guidance_inner.gray a.guidance_btn::after{
	content: none;
}


@media screen and (min-width: 768px){
	.guidance_inner a img:hover{
		opacity: .7;
	}
	.guidance_inner.gray a img:hover{
		opacity: 1;
	}
	
	.guidance_inner a.guidance_btn:hover {
		background-color: #002b69;
		color:#ffffd9;
	}
	.guidance_inner a.guidance_btn:hover::after{
		border-top: 3px solid #ffffd9;
    	border-right: 3px solid #ffffd9;
	}
	.guidance_inner.gray a.guidance_btn:hover{
		color:#1a1a1a;
		background: #ddd;
	}
}



/*--------申し込みボタン-----------*/
.admission_btn_area{
	width: 100%;
	max-width: 1360px;
	margin: auto;
	padding:0 20px;
}
.admission_btn{
	width: 100%;
	max-width: 800px;
	margin: auto;
	padding:40px 0 0;
}

.admission_btn a{
	display: block;
	overflow: hidden;
    position: relative;
    color:#fff;
    border: rgba(255,255,255,0) 4px solid;
    border-radius: 1.5em;
    padding: 0.75em 0 0.4em;
    letter-spacing: 0.02em;
    box-shadow: 2px 2px 8px rgba(0,0,0,.25);
    transition: .2s;
}

.admission_btn a::before{
	position: absolute;
	content: "";
    top: 0;
    bottom: 0;
	left:0;
	right:0;
	margin: auto;
	width:100%;
	height:100%;
	background:linear-gradient(45deg,#d63939 20%,#ea5514, #d63939 80%);
	z-index: 0;
	transition: .2s;
}

.admission_btn a::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    right: 50px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    z-index: 1;
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
    transition: .2s;
}

.admission_btn_inner{
	position: relative;
	z-index: 3;
}

.admission_btn_head{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.admission_btn_head span{
	display: block;
}
.admission_btn_head span:nth-child(1){
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	font-size: 1.5em;
	letter-spacing: -0.04em;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	padding:0.2em 0.8em 0;
	margin: 0.5em 0.5em 0.5em 0;
	
}
.admission_btn_head span:nth-child(2){
	font-size: 4.5em;
	padding-top:0.1em;
	line-height: 1em;
	font-weight: 600;
	text-shadow: 2px 2px 6px rgba(37, 66, 169,.3);
}

.admission_btn_period{
	background-color: #fff;
	margin: auto;
	color:#ea5514;
	font-weight: 600;
	font-size: 1.4em;
	width:570px;
	padding:0.05em 0;
	transition: .2s;
}

.admission_btn_text{
	font-weight: 600;
	font-size: 2.8em;
	letter-spacing: 0.1em;
	padding:0.25em 0 0;
	text-shadow: 2px 2px 7px rgba(31, 42, 82,.6);
}

@media screen and (min-width: 768px){
	.admission_btn a:hover{
		color:#d63939;
		border-color:#d63939;
		box-shadow: 2px 2px 8px rgba(0,0,0,0);
	}
	.admission_btn a:hover::before{
		opacity: 0;
	}
	.admission_btn a:hover::after{
		border-color:#d63939;
		right: 15px;
	}
	.admission_btn a:hover .admission_btn_head span:nth-child(1){
		border-color:#d63939;
	}
	.admission_btn a:hover .admission_btn_head span:nth-child(2){
		text-shadow: 2px 2px 6px rgba(222, 27, 124,0);
	}
	.admission_btn a:hover .admission_btn_period{
		background-color: #d63939;
		color:#fffce3;
	}
	.admission_btn a:hover .admission_btn_text{
		text-shadow: 2px 2px 7px rgba(222, 27, 124,0);
	}
}



/*--------申し込みボタン（固定）-----------*/

.fixed_btn{
	position: fixed;
	bottom:80px;
	right:0;
	z-index: 10;
}

.fixed_btn a{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	background-color:#fcf1e1;
	color:#222;
	font-size:1.5em;
	font-weight:600;
	box-shadow: 2px 3px 8px rgba(0,0,0,.3);
	transition: .2s;
}

.fixed_btn a::before{
	position: absolute;
    content: "";
    top: 0;
    right: 0;
    width:100%;
    height:calc(100% - 4px);
	border:#222 solid 2px;
	border-right:none;
    transition: .2s;
}

.fixed_btn_icon{
	display: flex;
	flex-wrap: wrap;
	background-color:#d63939;
	padding:0.5em;
	transition: .2s;
}

.fixed_btn_text span{
	display: block;
	line-height: 1em;
}

.fixed_btn_text{
	padding:15px;
}
.fixed_btn_text span:nth-child(1){
	background-color:#d63939;
	color:#fcf1e1;
	font-size: 0.7em;
	padding:0.2em 0.4em;
	margin-bottom:0.4em;
}
.fixed_btn_text span:nth-child(2){
	font-size: 1.3em;
	color:#d63939;
	padding-bottom:0.2em;
}

.fixed_btn .cls-1{
	fill:#fffce3;
	transition: .2s;
}
.fixed_btn svg{
	margin: auto;
	width:1em;
	transition: .2s;
}

@media screen and (min-width: 768px){
	.fixed_btn a:hover{
		background-color:rgba(255,255,255,0);
		color:#fff;
		box-shadow: 2px 3px 8px rgba(0,0,0,0);
	}
	.fixed_btn a:hover .fixed_btn_text span:nth-child(1){
		background-color:#fff;
		color:#d63939;
		transition: .2s;
	}
	.fixed_btn a:hover .fixed_btn_text span:nth-child(2){
		color:#fff;
		transition: .2s;
	}
	.fixed_btn a:hover::before{
		top:5px;
		border-color:#d63939;
    	height:calc(100% - 12px);
	}
	.fixed_btn a:hover .fixed_btn_icon{
		background-color:rgba(255,255,255,0);
	}
	.fixed_btn a:hover .fixed_btn_text{
		background-color:#d63939;
	}
	.fixed_btn a:hover .cls-1{
		fill:#d63939;
	}
}
@media screen and (max-width: 1200px) and (min-width: 768px){
	.fixed_btn a:hover::before{
    	height:calc(100% - 5px);
	}
}


/*
.fixed_btn a{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	text-decoration: none;
    text-align: center;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(45deg,#002b69,#2542a9 28%,#efa5bf);
	box-shadow: 0 0 8px rgba(0,0,0,.25);
    width: 140px;
    aspect-ratio: 1/1;
    border-radius: 50%;
	overflow: hidden;
    transition: .2s;
}

.fixed_btn a::after{
	position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,#002b69,#2542a9 28%,#efa5bf);
    z-index: 0;
    transition: .2s;
}

.fixed_btn a::before{
	position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
    height: 90%;
	border:#fad416 solid 2px;
	border-radius: 50%;
    z-index: 4;
    transition: .2s;
}

.fixed_btn svg{
	position: relative;
	width:40px;
	margin:auto auto 8px;
	z-index: 3;
}

.fixed_btn .cls-1{
	fill:#fff;
}

.fixed_btn a span{
	position: relative;
	display: block;
	width:100%;
	margin:0 auto auto;
	z-index: 3;
}

@media screen and (min-width: 768px){
	.fixed_btn a:hover{
		transform: scale(1.1);
		background: #fff;
		color:#ea5514;
	}
	.fixed_btn a:hover::before{
		transform: scale(1.06);
		border: #ea5514 solid 6px;
	}
	.fixed_btn a:hover::after{
		opacity: 0;
	}
	.fixed_btn a:hover .cls-1{
		fill: #ea5514;
	}
}
*/