/*--------------------------------------------
 色 ・　文字
----------------------------------------------*/
:root{
    --color1: #fc5858;/*#fda65b*/
    --color2: #ffd6c3;
    --color3: #2b317b;
    --color4: #ddceba;
	--text: #111111;
	--black: #111111;
	--red: #C12326;
    --base: #ffffff;
    
    --font1: 16px;
    --font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;
}
/* --------------------------------------------
 イントロ
---------------------------------------------*/
.intro_more a{
    color: var(--text);
    border-radius: 50px;
    border: 1px solid;
        text-align: center;
    margin: 20px auto 0;
    display: block;
    width: 200px;
    padding: 5px 0;
}
.intro_more a:hover i{
    transform: translateX(5px);
}

/* スマホ */
@media screen and (max-width: 667px){
    #intro .txt_wrap{
        padding: 0 8% 60px;
    }
    #intro h2,.intro_txt{letter-spacing: 0em;}
}

/* --------------------------------------------
 TOPよくある質問
---------------------------------------------*/
#top_QA {
    padding-top: 200px;
    padding-bottom: 0px;
}
#top_QA .top_cms_title p{
    font-size: 80px;
    opacity: 0.35;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    letter-spacing: 6px;
}

.qa_type4 .cate_box{
	background-color: #edede9;
}
.qa_type4 .box_title1{
	cursor: pointer;
	letter-spacing: 0.5px;
	padding: 12px 36px 12px 50px;
	background-image: url(./Dup/img/faq_q.png);
	background-position: 10px 13px;
	background-repeat: no-repeat;
	background-size: 32px 32px;
}
.qa_type4 .box_title1:after{
	font-size: 20px;
	font-weight: bold;
	position: absolute;
	top: 5px;
	right: 10px;
	content: '\2b';
	display: inline-block;
	-webkit-transition: transform 0.4s;
	transition: transform 0.4s;
}
.qa_type4 .box_title1.open:after{
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}
.qa_type4 .box_txt1 p{
	background-image: url(./Dup/img/faq_a.png);
	background-position: 6px 13px;
	background-repeat: no-repeat;
	background-size: 30px 30px;
	padding: 10px 10px 10px 46px;
}
.qa_type4 .box_title1:empty{
	height: 24px;
}
/* スマホ */
@media screen and (max-width: 667px){
    #top_QA .top_cms_title p{
        font-size: 35px;
        letter-spacing: 2px;
        opacity: 1;
    }
    .qa_type4 .box_title1{
        letter-spacing: 0em;
        padding: 12px 23px 12px 50px;
    }
}
/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
#main_img{
    background-size: cover!important;
    background-position-x: 30%!important;
}
#main_img .main_dec_l img,#main_img .main_dec_r img{
    width: auto;
    height: 100%;
}
#main_img .main_dec_l{
    height: 100%;
    left: 0;
    z-index: 2;
}
#main_img .main_dec_r{
    height: 100%;
    right: -4%;
    z-index: 2;
}
#main_img .main_dec_bg{
    z-index: 1;
    height: 100%;
    width: 100%;
    background-image: url(./Dup/img/main_dec_bg.png);
    background-size: cover;
}
#main_img .catch {
    z-index: 3;
    position: absolute;
    /*top: 50%;*/
    /*left: max(560px, 50%);*/
    /*transform: translate(-50%, -50%);*/
    bottom: 2%;
    right: 2%;
    /*width: min(40%, 630px);*/
    height: 50%;
    max-height: 40vh;
}
#main_img .catch img{
    width: auto;
    height: 100%;
}
#pc_nav{
    background-color: rgba(255,255,255,0.2);
}
@media screen and (max-width: 1200px){
    #main_img{background-position-x: 10%!important;}
}

/* タブレット */
@media screen and (max-width: 768px){
    #main_img{
        background-position-x: 50%!important;
    }
    #main_img .catch {
        height: 40%;
        /*left: 50%;*/
        /*top: 55%;*/
    }
}
/* スマホ */
@media screen and (max-width: 667px){
        #main_img{
            height: 62vW!important;
        }
}



/*--------------------------------------------
 閉じるボタン付き追従バナー 
----------------------------------------------*/
.fix_banner{
	max-width: 200px;
	position: fixed;
	bottom: 30px;
	left: 10px;
	z-index: 10;
	transition: 0.5s;
}
.fix_banner.close{opacity: 0;z-index: -1;}
@media  screen and (max-width: 768px){
.fix_banner{max-width: 200px;}
}

@media  screen and (max-width: 667px){
.fix_banner{max-width: 150px;bottom: 10px;}
}
/*--------------------------------------------
 TOPコンテンツ動画販売について
----------------------------------------------*/
#contents2_wrap{
    padding: 100px 18% 0;
}
#contents2_wrap .con2_box{
    position: relative;
    padding: 40px 20px 30px;
    background-color: var(--color4);
    border-radius: 15px;
}
#contents2_wrap .con2_box::before{
    content: "";
    background-image: url(./Dup/img/movie.png);
    width: 90px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
}
#contents2_wrap .con2_box p{
    font-size: 1rem;
    line-height: 2.2;
}
#contents2_wrap .con2_box a{
    padding: 5px;
    border-radius: 5px;
    padding-top: 3px;
}
/* タブレット */
@media screen and (max-width: 768px){
    #contents2_wrap .con2_box{
        padding: 40px 0px 30px;
    }
    #contents2_wrap .con2_box p{
        line-height: 2;
    }
    #contents2_wrap .con2_box p:nth-child(2){
        margin-top: 10px;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    #contents2_wrap{
        padding: 100px 5% 0;
    }
    #contents2_wrap .con2_box p{
        line-height: 1.7;
    }
}

/*--------------------------------------------
 お問い合わせ
----------------------------------------------*/
#contact_wrap .line{
    width: clamp(290px, 80%, 600px);
    margin: 20px auto;
}
#contact_wrap .contact_bnr_box{}
#contact_wrap .contact_bnr{
    width: clamp(200px, 30%, 700px);
}
/* スマホ */
@media screen and (max-width: 667px){}
/*--------------------------------------------
 レッスンプログラム（旧：スクールについて、オンラインレッスン、マンツーマンレッスン）
----------------------------------------------*/
#cms_2-g .cate_title{
    color: var(--color3);
    line-height: 1.5;
}
#cms_2-g .sub_cate_title{
    font-size: 1.8rem;
}
/* スマホ */
@media screen and (max-width: 667px){
    #cms_2-g .box_description1{
        padding: 0 0 20px;
    }
}
/*--------------------------------------------
 スクールについて　バナー
----------------------------------------------*/
.bnr_01,.bnr_02{
    width: max(300px, 47%);
        margin: 10px auto;
}
.bnr_01 a,.bnr_02 a{
    padding: 15px 0;
}
.bnr_01 a:hover,.bnr_02 a:hover{
    background-color: var(--color3);
}

.bnr_01 a{}
.bnr_02 a{}

/*--------------------------------------------
 youtube埋め込み
----------------------------------------------*/
.youtube_box{}
.youtube_box p{
        width: 100%;
    font-size: 80px;
    opacity: 0.35;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    letter-spacing: 6px;
}

.youtube_box iframe{
    display: block;
    margin: 0 auto;
    width: 70vw;
    height: calc(70vw * 0.5625);
}

/* タブレット */
@media screen and (max-width: 768px){
    .youtube_box p{
        font-size: 70px;
        letter-spacing: 2px;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    .youtube_box iframe{
        width: 90vw;
        height: calc(90vw * 0.5625);
    }
    .youtube_box p{
        font-size: 35px;
        letter-spacing: 2px;
        opacity: 1;
        bottom: 20px!important;
    }
}

/*--------------------------------------------
 TOPオンラインレッスン、マンツーマン
----------------------------------------------*/
.link_type1 .link_top .link_title {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 50px!important;
    margin-bottom: 30px;
    color: #474521;
    font-weight: normal;
    background-image: url("../dup/img/link_type1_icon.png");
    background-size: 50px;
    background-position: top center;
    background-repeat: no-repeat;
}
.link_type1 .link_top .link_title{
    font-size: 20px;
    margin-bottom: 20px;
}
.link_type1 .link_top a{
	padding-top: 40px;
	padding-bottom: 40px;
	border: 1px solid #e5e0de;
	background-color: #f3ede8;
}
.link_type1 .link_top a p{
    border-color: #e5e0de;
}
.link_type1 .link_top a:hover{
    background-color: #fff;
}
.link_type1 .link_top a:hover .link_img1{
    transform: translate(-50%, -50%) scale(1.1,1.1);
    opacity: 0.3;
}

.link_type1.one_to .link_top:nth-child(1),
.link_type1.one_to .link_top:nth-child(2){
    display: none;
}
.link_type1.one_to .link_top:nth-child(4) .link_title{
    width: 340px;
    margin: 0 auto 20px;
}
/* タブレット */
@media screen and (max-width: 768px){
    .link_type1.one_to .link_top{justify-content: space-between!important;}
    .link_type1.one_to .link_top{
        width: calc(50% - 5px)!important;
    }
    .link_type1.one_to .link_top:nth-child(3) .link_title{
        width: 200px;
        margin: 0 auto 20px;
    }
    .link_type1.one_to .link_top:nth-child(4) .link_title{
        width: 270px;
        margin: 0 auto 20px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .link_type1.one_to .link_top{
        width: 100%!important;
    }
    .link_type1 .link_top .link_title{
        font-size: 15px;
        width: min(210px, 100%);
        margin: 0 auto 20px;
    }
    .link_type1.one_to .link_top:nth-child(3) .link_title{
        width: 140px;
    }
    .link_type1.one_to .link_top:nth-child(4) .link_title{
        width: 260px;
    }
}

/*--------------------------------------------
 ハンバーガーメニュー
----------------------------------------------*/
#overlay > div{height: 100vh;}
.overlay .menu_bg_box{position: absolute;width: 100%;height: 100%;}
.overlay .menu_bg_box_wrap,
.overlay .menu_bg_box {
	transform: none!important;
    background-color: #feaeae;
}
.overlay .menu_bg_box {
    opacity: 0.3;
}
.overlay.open .menu_box{
    height: 100vh;
    background-color: rgba(255,255,255,0.9);
    z-index: 2;
    padding: 140px 10vw 0;
}
/* タブレット */
@media screen and (max-width: 768px){
    .overlay.open .menu_box{
        max-width: 100%;
        width: 100vw;
        opacity: 0.6;
    }
    .overlay .menu_bg_box {
        background-position-x: 94%!important;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    .overlay.open .menu_box{
        padding: 90px 10vw 50px;
    }
}

/*--------------------------------------------
 フッターにイラスト
----------------------------------------------*/
#footer .info_txt .zindex1{
    position: relative;
    z-index: 1;
}
#footer .info_txt .info_bg{
    opacity: 0.07;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    z-index: 0;
}


/*--------------------------------------------
 色 ・　文字
----------------------------------------------*/
html,body,.font_10,.font_11,.font_12,.font_13,.font_14,.font_15{font-size: var(--font1);}
.font_2up{font-size: max(calc(var(--font1) + 2px), calc(1rem  + 2px));}
.font_4up{font-size: max(calc(var(--font1) + 4px), calc(1rem  + 4px));}
.font_2dw{font-size: max(calc(var(--font1) - 2px), calc(1rem  - 2px));}
.font_4dw{font-size: max(calc(var(--font1) - 4px), calc(1rem  - 4px));}
.font_6dw{font-size: max(calc(var(--font1) - 6px), calc(1rem  - 6px));}

.font_shippori,.cate_title,#contents_links .box_wrap .box a h4,.sub_cate_title{
    font-family: 'Yeseva One', cursive,'Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    /*font-family: 'Katibeh', cursive,'Shippori Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";*/
}

.linkStyle{
	color: var(--color1);
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	opacity: 0.7;
	text-decoration: none;
}

.shop_link{
    width: 190px;
}
.shop_link p{
    width: 90%;
}
#contents_wrap .con_item{
    opacity: 0.25;
}

#contents_links .box_wrap .box a{
    background-color: #fff7f4;
    border: 1px solid #e1e3f9;
}
#contents_links .box_wrap .box a::after{
    opacity: 0.2;
}
#contents_links .box_wrap .box a h4{
    background-color: transparent;
    transition: all 0.5s;
    color: var(--color3);
}
#contents_links .box_wrap .box a:hover h4{
    background-color: rgba(255,255,255,0.8);
} 

#contents_links .box_wrap h3{
    color: var(--color3);
    font-family: 'Yeseva One', cursive;
}
#top_cms1 .top_cms_title p, #top_cms2 .top_cms_title p,.youtube_box p,#top_QA .top_cms_title p{
    width: 100%;
    bottom: 40px;
}

#footer{
    background-color: #ffffff!important;
}
#page_title{
    background-position-y: 75%!important;
    background-position-x: 11%!important;
}
#page_title::before{
    background: transparent;
}
#page_title h2 span.font_anim span:nth-child(even){
    color: var(--color1);
}
#page_title h2 span.font_anim span:nth-child(odd){
    color: var(--color3);
}

/* タブレット */
@media screen and (max-width: 768px){
    #overlay ul {font-size: 15px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #header #logo{
        width: calc(100% - 40px - 120px - 71px)!important;/* padding、shop_link、button_container */
        padding: 0px 20px;
    }
    #nav_menu{width: calc(120px + 71px)!important;}
    .shop_link{width: 120px;}
    .button_container{width: 71px;}
    #contents_wrap h2{
        font-size: 32px;
        letter-spacing: 0em;
    }
}


/* --------------------------------------------
 お客さまの声　23/07/14修正
---------------------------------------------*/
.v_type1 .triangle {
    display: block;
    border: var(--color3) solid 2px;
    box-shadow: 5px 5px 0 0 #e2e2e2;
    border-radius: 15px;
}
.v_type1 .triangle:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #FFF transparent;
    border-width: 13px 13px 0 0;
    bottom: -13px;
    left: 50%;
    margin-left: -9px;
}
.v_type1 .triangle:after {
    content: '';
    position: absolute;
    display: block;
    z-index: 0;
    border-style: solid;
    border-color: var(--color3) transparent;
    border-width: 15px 15px 0 0;
    bottom: -17px;
    left: 50%;
    margin-left: -11px;
}

/* --------------------------------------------
 レッスンプログラム　23/07/14修正
---------------------------------------------*/
#cms_2-g .sub_cate_title{
    color: var(--color1);
}