/*
Theme Name:   elegram_renew260427
Author:       Yuichi Haraguchi
Description:  これは自作のWordPressテーマです。
Version:      1.0.0
*/


/* =========================================================
  BASE (Desktop-first)
========================================================= */

body{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-style: normal;
}
p,
a,
h1,
h2,
h3,
h4,
li,
dt,
dd,
th,
td{
	color: #707070;
}
p{
	margin-bottom: 0;
}
.times{
	font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.mincho{
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.section-ttl{
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight:600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
	letter-spacing: .25rem;
	font-size: 2rem;
}
header{
	background: rgba(255,255,255,.3);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
}
.navbar-brand{
	width: 150px;
	height: auto;
}
.navbar-nav .nav-item a.nav-link{
	font-size: 14px;
	text-align: center;
	padding-left: 1rem;
	padding-right: 1rem;
}
.nav-item a.nav-link span.times{
	font-size: 18px;
}
/*==============
MV
==================*/
#mv{position: relative;}
#mv #mv_text{
	position: absolute;
	top: 50%;
	left: 5vw;
	transform: translateY(-50%);
	
}
#mv #mv_text #main_copy{
	color: #fff;
	font-weight: 500;
	font-size: 58px;
	text-shadow: 2px 2px 6px rgba(0,0,0,.3);
	margin-bottom: 1rem;
}
#mv #mv_text #main_copy span{
	font-size: 42px;
}

#mv #mv_text #mv_link{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap:20px;
}
#mv #mv_text #mv_link li{
	width: 200px;
}

#mv #mv_text #mv_link li a{
	display: block;
	padding: .5rem;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	border-radius: 4px;
	text-decoration: none;
}

#mv #mv_text #mv_link li:first-child a{
	background: #D6A59F;
}
#mv #mv_text #mv_link li:last-child a{
	background: #E5D8D7;
}

/*==============
about
==================*/
#about{
	padding: 80px 0;
	background: #F4F3F1;
}
#about .about_flex{
	display: flex;
	gap:80px;
}
#about .about_flex .item{
	width: 50%;
	align-self: center;
}

#about .about_flex .item h2{
	color: #D6A59F;
	font-size: 24px;
	font-weight:bold;
}
#about .about_flex .item p.big{
	font-size: 36px;
	margin-bottom: 1rem;
	font-weight:bold;
}
#about .about_flex .item p.bigger{
	font-size: 24px;
	margin-bottom: 1rem;
	font-weight:bold;
}
#about .about_flex .item p{
	line-height: 2.5;
}

/*==============
whats
==================*/
#whats{
	padding: 80px 0;
	background-color: #fff;
}
#whats h2{
	text-align: center;
	font-size: 48px;
	margin-bottom: 1.5rem;
	font-weight: bold;
}
#whats h2 + p{
	text-align: center;
	line-height: 2;
	margin-bottom: 3rem;
}
#whats .whats_flex{
	display: flex;
	flex-wrap: wrap;
	gap:20px;
}

#whats .whats_flex .item{
	width: calc((100% - 40px)/3);
}

#whats .whats_flex .item .inner_flex{
	display: flex;
	gap:15px;
}

#whats .whats_flex .item .inner_flex .left{
	width: 30%;
}
#whats .whats_flex .item .inner_flex .right{
	width: calc(70% - 15px);
}
#whats .whats_flex .item .inner_flex p.num{
	font-size: 3rem;
	margin-bottom: .1rem;
	color: #d38d86;
	line-height: 1;
	font-weight: bold;
}
#whats .whats_flex .item .inner_flex h3{
	border-bottom: 2px dashed #d38d86;
	padding-bottom: .25rem;
	margin-bottom: .5rem;
	font-weight: bold;
	font-size: 1.25rem;
} 
/*==============
reason
==================*/
#reason{
	padding: 80px 0;
	background: #E9E8E5;
}
#reason h2{
	color: #D6A59F;
	font-size: 4rem;
}
#reason h2 + p{
	margin-bottom: 5rem;
}
#reason h3{
	font-size: 24px;
	margin-bottom: .5rem;
	color: #D6A59F;
	font-weight: bold;
	background: rgba( 255,255,255,.3);
	text-align: center;
	padding: .25em 0;
}
#reason img{
	margin-bottom: 1rem;
}
#reason h4{
	font-size: 18px;
	margin-bottom: 1.5rem;
	line-height: 1.75;
}
#reason p{
	line-height: 2;
}

/*==============
trainer
==================*/
#trainer{
	padding: 80px 0;
	background: #FAF9F6;
}
#trainer h2{
	text-align: end;
	color: #D6A59F;
	font-size: 4rem;
}
#trainer p.des{
	margin-bottom: 4rem;
	text-align: end;
}
#trainer h2 + p{
	text-align: end;
	line-height: 2;
	margin-bottom: 2rem;
}
#trainer h3{
	text-align: center;
	margin-top: 1rem;
}
#trainer p.position{
	font-size: 14px;
	text-align: center;
	margin-bottom: 1rem;
}

/*==============
trial
==================*/
#trial{
	padding: 80px 0;
	background: #F4F3F1;
}

#trial h2{
	text-align: left;
	color: #D6A59F;
	font-size: 4rem;
}
#trial h2 + p{
	text-align: left;
	line-height: 2;
	margin-bottom: 4rem;
}
#trial .step{
	text-align: center;
	
}
#trial img{
	width: 50%!important;
	margin: 0 auto 1rem;
	display: block;
}
#trial h3{
	text-align: center;
	font-size: 24px;
	margin-bottom: 1rem;
	font-weight: bold;
}
#trial th{
	width: 8rem;
	background: #E58C85;
	text-align: center;
	color: #fff;
	font-weight: bold;

}
#trial td{
	padding-left: 1rem;
	padding-right: 1rem;
}
#trial tr:not(:last-child) th{
	border-bottom: 1px solid #fff;
}
#trial tr:not(:last-child) td{
	border-bottom: 1px solid #707070;
}
/*==============
price
==================*/
#price{
	padding: 80px 0;
	background: #FAF9F6;
}
#price h2{
	text-align: end;
	color: #D6A59F;
	font-size: 4rem;
}
#price p.des{
	margin-bottom: 4rem;
	text-align: center;
}
#price h2 + p{
	text-align: end;
	line-height: 2;
	margin-bottom: 2rem;
}
#price .admission{
	margin-bottom: 2rem;
	background: #fff;
	border-radius: 10px;
	padding: .75rem 0;
}

#price .admission p{
	text-align: center;
	margin-bottom: 0;
}
#price .admission p span.fee_label{
	font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 2.4px;
    line-height: 1.6;
	display: inline-block;
	margin-right: 1rem;
}
#price .admission p span.fee_price{
	font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.4;
    color: #343331;
}
#price .admission p span.fee_tax{
	font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 2.4px;
    line-height: 1.6;
}
#price .special_offer{
	margin-bottom: 4rem;
}
.course_wrap h3{
	text-align: center;
	font-size: 32px;
	margin-bottom: 1rem;
	font-weight: bold;
}
.course_wrap h3 + p{
	text-align: center;
	margin-bottom: 4rem;
}
.course_wrap h4,
.plan_wrap h4{
	text-align: center;
	font-size: 24px;
	margin-bottom: 2rem;
}
.course_wrap .course_flex{
	display: flex;
	background: #fff;
	height: 100%;
	margin-bottom: 3rem;
}
.course_wrap .course_flex .item{
	width: calc(100% / 4);
}
.course_wrap .course_flex .item p{
	padding: 1rem;
	line-height: 2;
}
.plan_wrap h5{
	text-align: center;
	padding-bottom: .5rem;
	margin-bottom: 1.5rem;
	font-size: 2rem;
}
.plan_wrap h5 span.small{
	font-size: 1rem;
}
.monthly_item{
	border-radius: 10px;
    overflow: hidden;
    background-color: white;
}
.monthly_ttl{
	background-color: #ffe0e3;
    padding: 20px;
    text-align: center;
    font-family: 'Zen Old Mincho', serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.8;
    color: #343331;
}
.monthly_price{
	padding: 10px 0px;
    margin: 0 20px;
    border-bottom: 1px solid #a1a1a1;
    text-align: center;
	font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: #333333;
}
.monthly_price span.small{
	font-size: 1rem;
}
.monthly_cont{
	padding: 20px;
	line-height: 2;
}
.monthly_plan{
	margin-bottom: 3rem;
}
.special_offer2{
	background: #fff;
	position: relative;
	padding: 2rem 1rem 1rem;
	border: 5px solid #ffe0e3;
}

.special_offer2 .ttl{
	font-family: "Apple Chancery", "Segoe Script", "Comic Sans MS", cursive;
	transform: rotate(-10deg);
	color: #D6A59F;
	font-size: 2rem;
	display: inline-block;
	position: absolute;
	top: -1rem;
	left: -.5rem;
	text-shadow: 1px 1px 1px rgba(0,0,0,.1);
}

.special_offer2 p{
	text-align: center;
}

.special_offer2 p.offer_ttl{
	margin-top: 1.5rem;
	color: #fff;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding: .1rem 6rem;
	background: #D6A59F;
	font-weight: bold;
	margin-bottom: .5rem;
}
.special_offer2 p.offer_cont{
	color: #D6A59F;
	font-weight: bold;
	margin-bottom: 2rem;
	font-size: 1.5rem;
}
#price .cabizero_area{
	margin-top: 50px;
}
#price .cabizero_bnr{
	margin-bottom: 30px;
}
#price .cabizero_area h3{
	text-align: center;
	position: relative;
	margin-bottom: 1rem;
	font-weight: bold;
}
#price .cabizero_area h3::before{
	content: "";
	width: 100%;
	height: 1px;
	background: #b26364;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

#price .cabizero_area h3 span{
	padding: 0 1rem;
	background: #FAF9F6;
	display: inline-block;
	position: relative;
	z-index: 1;
	color:  #b26364;
}
#price .cabizero_area .cabizero_flex{
	display: flex;
	gap:15px;
	margin-bottom:30px;
}

#price .cabizero_area .cabizero_flex .item{
	border: 1px solid #b26364;
	padding: 1.5rem;
	width: calc(100%/3);
	background: #fdf6f5;
}

#price .cabizero_area .cabizero_flex .item h4{
	text-align: center;
	color: #b26364;
	letter-spacing: .1rem;
	font-size: 1.25rem;
	font-weight: bold;
}

#price .cabizero_area .cabizero_flex .item .cabizero_price_flex{
	display: flex;
	justify-content: space-between;
}

#price .cabizero_area .cabizero_flex .item .cabizero_price_flex:not(:last-child){
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #b26364;
}
#price .cabizero_area .cabizero_flex .item .cabizero_price_flex .cabizero_price{
	color: #b26364;
	font-weight: bold;
}

#price .cabizero_area .cabizero_flex .item .cabizero_price_flex .cabizero_price,
#price .cabizero_area .cabizero_flex .item .cabizero_price_flex .cabizero_cont{
	font-size: 1.25rem;
}
#price .cabizero_area .cabizero_extension{
	margin-bottom: 30px;
	border: 1px solid #b26364;
	padding: 1.5rem;
	background: #fdf6f5;
}
#price .cabizero_area .cabizero_extension h4.cabizero_ttl2{
	color: #b26364;
	margin-bottom: .5rem;
	font-weight: bold;
}

#price .cabizero_area .cabizero_extension h4.cabizero_ttl2 + small{
	margin-bottom: 1.5rem;
}
#price .cabizero_area .cabizero_extension .cabizero_price_extension{
	display: flex;
	justify-content: center;
}
#price .cabizero_area .cabizero_extension .cabizero_price_extension .left{
	border-right: 1px solid #b26364;
}

#price .cabizero_area .cabizero_extension .cabizero_price_extension > div{
	width: 30%;
	padding: 0 3rem;
}
#price .cabizero_area .cabizero_extension .cabizero_price_flex{
	display: flex;
	justify-content: center;
	gap:20px;
}
#price .cabizero_area .cabizero_extension .cabizero_price_flex .cabizero_cont,
#price .cabizero_area .cabizero_extension .cabizero_price_flex .cabizero_price
{font-size: 1.25rem;
}

#price .cabizero_area .cabizero_extension .cabizero_price_flex .cabizero_price{
	color: #b26364;
	font-weight: bold;
}
#price .cabizero_area .cabizero_extension small{
	color: #b26364;
	text-align: center;
	display: block;

}
/*===============================
access
================================*/
#access{
	padding: 80px 0;
	background: #F4F3F1;
}
#access h2{
	text-align: left;
	color: #D6A59F;
	font-size: 4rem;
}
#access h2 + p{
	text-align: left;
	line-height: 2;
	margin-bottom: 2rem;
}
#access .access_item:not(:last-child){
	margin-bottom: 1rem;
}

#access .access_item .ttl{
	margin-bottom: .5rem;
	padding-left: 35px;
	position: relative;
	font-weight: bold;
}

#access .access_item .ttl::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 30px;
	aspect-ratio:1/1;
}

#access .access_item:first-child .ttl::before{
	background-image: url('./images/access_icon1.svg');
}
#access .access_item:nth-child(2) .ttl::before{
	background-image: url('./images/access_icon2.svg');
}
#access .access_item:nth-child(3) .ttl::before{
	background-image: url('./images/access_icon3.svg');
}
#access .access_item:nth-child(4) .ttl::before{
	background-image: url('./images/access_icon4.svg');
}
#access .access_item .detail{
	line-height: 2;
}
#access .access_item .detail a{
	text-decoration: none;
}
#access iframe{
	width: 100%;
	aspect-ratio:16/9;
	border-radius: 20px;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
}


#contact{
	padding: 80px 0;
	background: #E9E8E5;
}
#contact h2{
	text-align: left;
	color: #D6A59F;
	font-size: 4rem;
}
#contact h2 + p{
	text-align: left;
	line-height: 2;
	margin-bottom: 2rem;
}
#contact p.des{
	margin-bottom: 4rem;
}
#contact p.line_ttl{
	font-size:2rem;
	margin-bottom: .5rem;
	font-weight: bold;
}

#contact p.line_ttl + a{
	width: 200px;
	display: block;
}
#contact .contact_wrap{
	border: 3px solid #E58C85;
	border-radius: 20px;
	background: #fff;
	padding: 2rem 1.5rem;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
}
#contact .contact_wrap table{
	width: 100%;
}
#contact .contact_wrap th{
	font-weight: bold;
	padding: 10px;
	display: block;
	width: 100%;
}
#contact .contact_wrap td{
	padding: 10px 0;
	display: block;
	width: 100%;
}
#contact .contact_wrap tr:not(:last-child){
	border-bottom:1px solid #E58C85;
}
#contact .contact_wrap td input,
#contact .contact_wrap td textarea{
	border: none;
	background: #F8F8F8;
	padding: 5px;
	border-radius: 5px;
	width: 100%;
}
.cf_submit{
	text-align: center;
}
.cf_submit input{
	width: 200px;
	padding: 5px 0;
	border: 1px solid #E58C85;
	background: #fff;
	color: #E58C85;
	transition: all .2s;
}

.cf_submit input:hover{
	transition: all .2s;
	
	border: 1px solid #fff;
	background: #E58C85;
	color: #fff;
}
footer #sns{
	padding: 50px 0;
	background: #333333;
}
footer #sns h2{
	text-align: center;
	color: #fff;
	margin-bottom:2rem;
	font-size: 16px;
}
footer #sns .sns_wrap{
	list-style: none;
	display: flex;
	padding: 0;
	margin: 0;
	justify-content: center;
	gap:10px;
}
footer #sns .sns_wrap li{
	width: 30px;
}
footer #copyright{
	padding: 20px 0;
	background: #000;
	text-align: center;
	color: #fff;
}
.wpcf7-spinner{
	display: none!important;
}
@media (max-width: 1025px) {
	.nav-item a.nav-link span.times{
		font-size: 16px;
	}
	.navbar-nav .nav-item a.nav-link{
		padding-left: .5rem;
		padding-right: .5rem;
	}
	#mv #mv_text #main_copy{
		font-size: 48px;
	}
	#about .about_flex .item p.big {
    font-size: 32px;
	}
	#about .about_flex .item p.bigger {
    font-size: 20px;
	}
	#trial h3{
		font-size: 20px;
	}
	.monthly_price{
		margin: 0 10px;
	}
	.monthly_cont,
	.monthly_ttl{
		padding: 10px;
	}
	#price .admission p{
		font-size: 13px;
	}
}
@media (min-width: 576px) {
	.plan_slider,
	.price-nav1,
	.plan_slider2,
	.price-nav2{
		display: none!important;
	}
}
@media (max-width: 576px) {
	
header{
	background: rgba(255,255,255,.7);
	}
	#mv #mv_text #main_copy {
        font-size: 28px;
    }
	#mv #mv_text #main_copy span {
    font-size: 20px;
}
	#mv #mv_text {
    position: absolute;
    top: 85%;
    left: 5vw;
	}
	#mv #mv_text #mv_link{
	}
	#mv #mv_text #mv_link li{
		width: 50%;
	}
	#about .about_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
	#about .about_flex .item{
		width: 100%;
	}
	#about,
	#whats,
	#reason,
	#trainer,
	#trial,
	#price,
	#access,
	#contact{
		padding: 50px 0;
	}
	#about .about_flex .item p.big {
        font-size: 26px;
		line-height: 1.5;
    }
	#whats h2 {
    font-size: 24px;
	}
	#whats h2 + p{
		text-align: left;
	}

#whats .whats_flex .item{
	width: 100%;
}

#whats .whats_flex .item .inner_flex{
	display: flex;
	gap:15px;
}

#whats .whats_flex .item .inner_flex .left{
	width: 40%;
}
#whats .whats_flex .item .inner_flex .right{
	width: calc(60% - 15px);
}
#whats .whats_flex .item .inner_flex p.num{
	font-size: 2.5rem;
}
	#reason h2 + p{
		margin-bottom: 3rem;
	}
	#reason h4{
		text-align: center;
		margin-bottom: 1rem;
	}
	#trainer .col-sm-3:not(:last-child),
	#trial .col-sm-3:not(:last-child){
		margin-bottom: 1.5rem;
	}
	#trial h2 + p{
		margin-bottom: 3rem;
	}
	#trial th,
	#trial td{
	display: block;
		width: 100%;
	}
	#price .admission p{
		font-size: 12px;
	}
	.course_wrap h3{
		font-size: 24px;
	}
	.course_wrap h4, .plan_wrap h4{
		font-size: 20px;
	}
	.course_wrap .course_flex{
		flex-wrap: wrap;
	}
	.course_wrap .course_flex .item{
		width: 100%;
	}
	.price-nav1, .price-nav2 {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
		margin-bottom: 30px;
    }
	.slick-arrow {
        cursor: pointer;
    }
	.special_offer2 .ttl{
		font-size: 2.5rem;
		top: -2.5rem;
	}
	.special_offer2{
		margin-top: 1rem;
	}
	#price .cabizero_area .cabizero_flex{
		flex-wrap: wrap;
	}
	
	#price .cabizero_area .cabizero_flex .item{
		width: 100%;
	}
	#price .cabizero_area .cabizero_extension .cabizero_price_extension{
		flex-wrap: wrap;
	}
	#price .cabizero_area .cabizero_extension .cabizero_price_extension > div {
    width: 100%;
    padding: 0;
}
	#price .cabizero_area .cabizero_extension .cabizero_price_extension .left{
		border-right: none;
		border-bottom: 1px solid #b26364;
		margin-bottom: 1rem;
		padding-bottom: 1rem;
	}
	#access .access_item{
		margin-bottom:1rem;
	}
	#access iframe{
		aspect-ratio:1/1;
		border-radius: 5px;
	}
	#about h2,
	#reason h2,
	#trial h2,
	#trainer h2,
	#price h2,
	#access h2,
	#contact h2{
		font-size: 36px;
		letter-spacing: .1rem;
	}
	#contact p.des{
		margin-bottom: 2rem;
	}
	#contact p.line_ttl {
    font-size: 1.25rem;
	}
	
	#contact .contact_wrap{
		padding: 1rem;
	}
	footer #sns{
		padding: 30px 0;
	}
}