@charset "utf-8";
/*
=====================================================================
*
*    common
*
* =================================================================== 
*/
html {font-size: 62.5%; /*デフォルトのサイズ＝10pxに指定*/

  overflow: auto;

    }

body {

    font-family :YuMincho,    /* Mac用 */
    'Yu Mincho', /* Windows用 */
    serif;

    font-weight: 500;
    font-size: 1.4rem;
    color: #333;
    width:100%;
    height:100%;
}

html.open,
body.open {
  overflow: hidden;
}

a {
    color: inherit;
    transition: all 0.5s ease-in-out;
}

a>*{
    transition: all 0.5s ease-in-out;    
}

h2{
    text-align: center;
}


@media screen and (min-width:769px) {
    a:hover {
        opacity: 0.7;
    }


    a>*:hover {
        opacity: 0.7;
    }
}
.sp_br{
    display: none;
}
@media screen and (max-width:768px) {
    .sp_br{
        display: block;
    }
}

/*--------------------------------
 ローダー 
---------------------------------*/

.progress_logo {
    display: none;
    position: fixed;
    top: calc(50% - 63px);
    left: calc(50% - 50px);
    width: 100px;
    height: 134px;
    z-index: 103;
    background-image: url(../images/loader/loader_logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
}



.progress {

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    background-image: url(../images/loader/loader_bg.gif);
    background-size: cover;

    z-index: 102;
}

.progress_bar {
    display: block;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;

    height: 9px;
    position: fixed;
    bottom:12px;
    width: 0%;
}


.mid_bar{
    display: block;
    border-top: 1px solid #333;

    margin-top: 4px;

    margin-bottom: 3px;

    width: 100%;
}
.progress_complete .progress_bar {
    border-top-color: rgb(255, 255, 255);
}



/*--------------------------------
PAGE TOP（上へ）
---------------------------------*/
.page{
    position: relative;



width: 100vw;
width: calc(var(--vw,1vw)*100);

}

.page-top {
display: none;/*最初は非表示*/

    position: fixed;
    z-index: 2;
    bottom: 20px;
    right: 20px;
}
.page-top a {
    width: 30px;
    height: 30px;
    text-decoration: none;
    background-image: url(../images/common/page_top.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    padding: 0;
    text-align: center;
    display: block;    
}


/*fadeInクラスが付与された後のボタンの出現アニメーション設定*/
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1.0s;
    animation-timing-function: 1.0s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: block;
    transition: all 0.5 ease-in-out;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*-----------------------
    ファーストビュー
------------------------*/
.main_v{
    width: 100%;
    background-color: #333;
}

.main_v {
    width: 100%;

    height: 100vh;
    overflow: hidden;
    position: relative;
}

.main_v1{
    width: 100%;
    height: 100vh;
    background-image: url('../images/top/main_v01.jpg');

}
.main_v2{
    width: 100%;
    height: 100vh;
    background-image: url('../images/top/main_v02.jpg');

}
.main_v3{
    width: 100%;
    height: 100vh;
    background-image: url('../images/top/main_v03.jpg');

}


/*Ken Burns効果*/
.sl_img {
    z-index:10;
    opacity: 0;
    background-color: #000;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    transform: scale(1.2) ;

    left: 0;
    top: 0;
    -webkit-animation: anime 30s 0s infinite ease-in-out;
    animation: anime 30s 0s infinit ease-in-out;
}


.sl_img:nth-of-type(2) {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

.sl_img:nth-of-type(3) {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}


@keyframes anime {

  0% {
        opacity: 0;
    }
  8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    34% {
        opacity: 1;
        transform: scale(1.0) ;
    }
    50% {
        opacity: 0;
        transform: scale(1.0) ;
         z-index:9;
    }
    100% { opacity: 0;
        transform: scale(1.2) ;

    }

}


@media screen and (max-width:768px) {
    .main_v {
        height: calc(100vh - 145px);
    }

    .main_v1,
    .main_v2,
    .main_v3{
        height: calc(100vh - 145px);
    }


        .main_v1{
            background-image: url('../images/top/sp_main_v01.jpg');

        }
        .main_v2{
            background-image: url('../images/top/sp_main_v02.jpg');

        }
        .main_v3{
            background-image: url('../images/top/sp_main_v03.jpg');
        }
}



/*-----------------------
    MENUボタン
------------------------*/

/*ボタン全体の形状*/
.openbtn{
    /*はじめは非表示に*/
    display: none;
    /*ボタンの位置*/
    position:fixed;
    top:25px;
    right: 25px;
    z-index: 98;
    /*ボタンの形状*/
    cursor: pointer;
    width: 20px;
    height:20px;
}

/*ボタンのアイコン設定*/
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0px;
    height: 1px;
    border-radius: 2px;
    background-color: #333;
    width: 20px;
  }

.openbtn span:nth-of-type(1) {
    top:0;   
}

.openbtn span:nth-of-type(2) {
    top:6px;   
}

.openbtn span:nth-of-type(3) {
    top:12px;   
}

/*activeクラスが付与された後のボタンのアイコン設定*/
.openbtn.active span:nth-of-type(1) {
    top: 0;
    left: 0;
    transform: translateY(6px) rotate(-45deg);
    background-color: #fff!important;
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
    background-color: #fff!important;
}

.openbtn.active span:nth-of-type(3){
    top: 12px;
    left: 0;
    transform: translateY(-6px) rotate(45deg);
    background-color: #fff!important;
}

/*fadeDownクラスが付与された後のボタンの出現アニメーション設定*/
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: block;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/*-----------------------
    header
------------------------*/
#header{
    width: 230px;
    height: 100vh;

    position: fixed;
    top: 0;
    right: 0;
    z-index: 80;
    background-color: rgba(0,0,0,0.6);
    transition: all 0.5s;/*アニメーション設定*/

    text-align: center;

    color: #fff;

    display: flex;
    justify-content: center;
}


.menu-content{
    height: 100vh;
    width: 100%;
    position: relative;
}

#header a {
    color: #fff;
    transition: all 0.5s ease-in-out;
}
@media screen and (min-width:769px) {
    #header a:hover {
        opacity: 0.7;
    }
}


/*.doneクラスがついたヘッダー*/
#header.dnone {
    opacity: 0;/*透過0にして非表示に*/
    z-index: -101;
}

/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
#header.dnone.panelactive {
    opacity: 1;/*不透明にして出現*/
    z-index: 80;
}

/*.doneクラスがついたヘッダーのテキストナビゲーションの形状*/
#header.dnone #g-navi{
    /*最背面に*/
    z-index: -1;
/*    z-index: -100;*/
    opacity: 0;
    transition: all 0.4s;
}

/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたナビゲーションの形状*/
#header.dnone.panelactive #g-navi{
    opacity: 1;/*不透明に*/
    z-index:3;/*最前面に*/
}


/*MENU内容*/
h1.title{
    display: inline-block;
    margin-top: 58px;
    text-align: center;
    width: 100%;
    height: auto;
}

.nav_title{
    width: 78px;
    height: auto;
}

nav{
    width: 100%;
    text-align: center;

    position: absolute;
    bottom: 0;
}

.main_menu{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-start;

}
.main_menu li{
    margin-bottom: 20px;
    /*縦書き*/
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #fff;
    font-size: 1.5rem;

    display: inline;

    margin-left: 22px;
}

.main_menu li:last-child{
    margin-left: 0;
}

.main_menu a{
    color: #fff;
}

/*サブメニュー（SNSなどアイコン）*/
.sub_menu{
    display: flex;
    width: 100%;
    /*margin:100px auto 10px;*/
    margin:120px auto 20px;
    justify-content: center;

}

@media screen and (max-height:600px) {
    .sub_menu{
        margin:10px auto 20px;
    }
}


.sub_menu li{
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    margin-left: 10px;
}
.sub_menu li:nth-of-type(1){
    margin-left: 0;
}

.sub_menu img{
    width: 25px;;
    height: auto;
}

.nav_title._sp{

    display: none;
}


@media screen and (max-width:768px) {
    #header{
        width: 100%;
        height: 100vh;

        background-color: rgba(0,0,0,1);

        color: #fff;
    }

    /*MENU内容*/
    h1.title{
        display: inline-block;
        margin-top: 33px;
        text-align: center;
        width: 100%;
        height: auto;
    }

    .nav_title._pc{
        display: none;
    }

    .nav_title._sp{
        display: inline-block;
        width: 77px;
        margin-right:0;
        height: auto;
    }



    nav{
        width: 100%;
        text-align: center;

        margin-top: 149px;
    }

    .main_menu{
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: flex-start;

    }
    .main_menu li{
        font-size: 1.8rem;
        margin-left: 44px;
    }
    .main_menu li:last-child{
        margin-left: 0;
    }

    .main_menu a{
        color: #fff;
    }

    /*サブメニュー（SNSなどアイコン）*/
    .sub_menu{
        display: flex;
        width: 100%;
        margin:204px 0 42px;
        justify-content: center;

    }


    .sub_menu li{
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        margin-left: 10px;
    }
    .sub_menu li:nth-child(1){
        margin-left: 0;
    }

    .sub_menu img{
        width: 30px;
        height: auto;
    }

}




/*-----------------------
    下層ページ、sp版のヘッダ
------------------------*/

.sub_page_h{
    width: 100%;
    height: 145px;
    background-color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sub_header .h_logo{
    width: 73px;
    height: auto;
}

@media screen and (max-width:768px) {
    .sub_page_h{
        width: 100%;
        height: 145px;
        background-color:#fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .h_logo{
        width: 77px;
        height: auto;
    }
}


/*コンテンツエリア 幅の設定*/
.container{
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
}

.article_area{
    max-width: 1000px;
    width: 87%;
    margin: 0 auto;
}
@media screen and (max-width:768px) {
    .article_area{
        width: 90%;
        margin: 0 auto;
    }
}

/*-----------------------
　各セクション　メインコンテンツ（共通スタイル）
------------------------*/

.main{
    display: flex;
    justify-content: center;
    width: 100%;
}

.main_l{
    width: 34%;
    text-align: center;
}

.main_l img{
    width: 50px;
    height: auto;
}

.main_r{
    width: 66%;
}


.slidewrap{
    width: 100%;
}

.main_r .slide{
    width: 100%;    
}

.main_r img{
    margin-top: 38px;
    width: 100%;
    height: auto;
}

.main_txt{
    box-sizing: border-box;
    margin: 56px auto 100px;
    width: 650px;

}
.keikoba .main_txt{
    margin: 80px auto 60px;
}

.main_catch{
    margin-bottom: 36px;

    font-size: 2.5rem;
}
.main_r .main_catch{
    margin-top: 35px;

}


.main_body{
    font-size: 1.3rem;
    line-height: 1.8;
}

.main_img{
    width: 100%;
    height: auto;
}

.content_sub{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 110px;

    width: 100%;
}

#lesson .content_sub{
    margin-bottom: 50px;
}

.content_sub:last-child(),
#lesson .content_sub:last-child(){
    margin-bottom: 0;
}

.row_rev{
    flex-direction: row-reverse;
}

#about .row_rev .sub_txt{
    margin-left: 0;
}
.sub_txt{
    box-sizing: border-box;
    max-width: 458px;
    width: 46%;
    font-size: 1.3rem;
    line-height: 1.8;
}


.sub_title{
    font-size: 2.5rem;
    line-height: 1.4;
    margin-top:28px;
    margin-bottom:32px;
}

#lesson .sub_title{
    font-size: 2.0rem;
    line-height: 2.0;
    margin-top:0;
    margin-bottom:12px;
}

#offer .main_r{
    max-width: 730px;
    width: 55%;
    margin: 0 auto 0 0;
}

@media screen and (max-width:768px) {
    .main{
        display: block;
        padding-top: 0;
        text-align: center;
    }

    .main_l{
        width: 100%;
        text-align: center;
    }

   .main_r{
    width: 100%;
    }

    #offer .main_r{
        width: 95%;
        margin: 0 auto;
    }

    .main_r img{
        margin-top: 58px;
        width: 100%;
        height: auto;
    }
 

    .main_txt{
        box-sizing: border-box;
        margin: 20px auto 42px;
        width: 90%;


    }
    .main_catch{
        margin-bottom: 24px;
        line-height: 1.4;
        font-size: 2.0rem;
        text-align: left;
    }
    .main_body{
        font-size: 1.2rem;
        line-height: 1.8;
        text-align: left;
    }

    .content_sub{
        display: block;
        margin-bottom: 48px;
    }


    .row_rev{
        flex-direction: unset;
    }

    .row_rev .sub_txt{
        margin-left: 0;
        margin-right: 0;
    }

    .sub_txt{
        max-width: unset;
        width: 100%;
        margin-left: 0;
        margin-top: 18px;

        font-size: 1.2rem;
        line-height: 2.0;
    }

    .sub_title,
    #lesson .sub_title{
        margin-top:unset;
        font-size: 2.0rem;
        line-height: 1.4;

        margin-bottom: 12px;

    }




}



/*-----------------------
　ボタンスタイル（共通スタイル）
------------------------*/


.btn{
    margin:54px auto 0;

    display: block;
    background-color: #a53636;
    color: #fff;
    box-sizing: border-box;
    height: 45px;
    line-height: 45px;
    font-size: 1.3rem;
    padding-left: 15px;

    position: relative;
}

.btn:after{
  content: '';
  width: 9px;
  height: 9px;
  border: 0px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -4px;
}


#profile .btn{
    margin:30px auto 0;
    width: 130px;
}

#lesson .btn{
    width: 323px;
    margin-top: -8px;
}
#offer .btn{
    width: 238px;
}


@media screen and (max-width:768px) {

    #profile .btn,
    #lesson .btn,
    #offer .btn{
        width: 100%;
        text-align: center;
    }

    #profile .btn,
    #lesson .btn{
        margin-top: 28px;
    }


    #offer .btn{
        margin-top: 34px;
    }


}
/*-----------------------
　背景制御　              
-----------------------*/


#bg_change{
   color: #1c0903;
}


#bg_change.about{
    color: #fff !important;    
}

#bg_change.profile{
    color: #fff !important;    
}


#bg_change.lesson{
    color: #333 !important;


}
#bg_change.offer{
    color:#fff !important;
}


/*読み込みのために一時的に設定　loadng直後にnoneにする */
#bg_change{
    background-image: url(../images/top/bg_kanenomisaki.png),url(../images/top/bg_offer.png);
}



#bg_change:before,
#bg_change.default:before{

    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;

    background-size:cover;

    background-color: #fff;
    background-image: none;
    color: #1c0903;
    transition: all  0.8s ease-in-out;
}


#bg_change.about:before{
    background-color: #1c0903 !important;
    background-image: url(../images/top/bg_kanenomisaki.png) !important;
    background-size: cover !important;
    color: #fff !important;    
}

#bg_change.profile:before{
    background-color: #020b1b !important;
    background-image: url(../images/top/bg_kanenomisaki.png) !important;
    background-size: cover !important;
    color: #fff !important;    
}


#bg_change.lesson:before{
    background-color: #fff !important;
    background-image: none !important;
    color: #333 !important;


}
#bg_change.offer:before{
    background-color: #000 !important;
    background-image: url(../images/top/bg_offer.png) !important;
    color:#fff !important;
}



/* タイトルSVG */
/*背景に合わせて色を反転させる*/
.title_svg{
    fill: #1e0903;
    transition: all 2.0s;
}

#bg_change.about .title_svg,
#bg_change.profile .title_svg,
#bg_change.offer .title_svg{
    fill: #fff;
}

#bg_change.lesson .title_svg{
    fill: #333;
}

#about{
    padding-top: 100px;
    padding-bottom: 20px;
}
#gallery{
    padding-bottom: 200px;
}

#offer{
    padding-bottom: 110px;
}


#profile{
    padding-bottom: 198px;
}



@media screen and (max-width:768px) {
    #about{
        padding-top: 55px;
        padding-bottom: 66px;
    }

    #profile .sub_img{
        width: 100%;
        height: auto;
    }

    #profile{
        padding-bottom: 55px;
    }

    #gallery{
        padding-bottom: 114px;
    }
    #offer{
        padding-bottom: 66px;
    }

/*    #bg_change.offer{
        background-image: url(../images/top/sp_bg_offer.png) !important;
    }*/

    /*読み込みのために一時的に設定　loadng直後にnoneにする */
    #bg_change{
        background-image: url(../images/top/bg_kanenomisaki.png),url(../images/top/sp_bg_offer.png);
    }

    #bg_change.offer:before{
        background-image: url(../images/top/sp_bg_offer.png) !important;
    }

    svg{
       width: 36px;
       height: auto;
    }
}
/*-----------------------
 お知らせ
-----------------------*/
#information{
    background-image: url(../images/top/bg_info.jpg);
    background-repeat: repeat;
    background-size: 64px;
    padding-top: 85px;
    padding-bottom: 92px;

}


.h_info{
    width: 109px;
    height: auto;

    margin-bottom: 50px;
}

.info_content{
    width: 100%;
    display: flex;
/*    justify-content: space-between;*/
    justify-content: flex-start;
    flex-wrap: wrap;
}

.info_box{
    max-width: 220px;
    width: 22%;

    position: relative;

    margin-top: 50px;

    margin-right: 4%;
}

.info_box:nth-of-type(-n+4){
    margin-top: 0;
}
.info_box:nth-of-type(4n){
    margin-right: 0;
}


#information .info_box{
    margin-top: 0;
}


.info_img{
    width: 100%;
    height: auto;
    margin-bottom: 14px;
}

.info_title{
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: 8px;

    font-family :YuMincho,    /* Mac用 */
    'Yu Mincho', /* Windows用 */
    serif;

}


.info_text{
    font-size: 1.2rem;
    line-height: 1.4;
    font-family: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;

}


.info_link{
    font-size: 1.2rem;
    line-height: 1.0;
    font-family: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;    

    width: 46px;
    margin: 8px 0 0 auto;
    display: block;
    background-color: #1c0903;
    padding: 5px 0;
    text-align: center;
    color: #fff;
}
@media screen and (max-width:768px) {
    #information{
        padding-top: 46px;
        padding-bottom: 60px;

    }

    .info_box{
        max-width: unset;
        width: 100%;
        margin-right: 0;
    }

    .info_title{
        font-size: 1.6rem;
    }
    .info_text{
        font-size: 1.3rem !important;
        font-family: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif !important;
    }
    .info_link{
        font-size: 1.3rem;
        font-family: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;

        width: 60px;
        margin: 8px 0 0 50%;
        transform: translateX(-50%);
    }

    .info_content{
        display: block;
    }


    .h_info{
        width: 78px;
        margin-bottom: 40px;

    }


/*slick用*/
.infoDots{
    margin: 24px auto 0;
    display: flex;
    justify-content: space-between;
    width: 70px;
    height: 9px;
}

.infoDots li{ 
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
        background-color: rgba(150,145,138,0.5);
    border: none;
}
.infoDots li.slick-active{ 
    background-color: rgba(150,145,138,1.0);
}

    .infoDots li button {
position: absolute;
top: 0;
left: 0;
opacity: 0;

        padding: 0;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: rgba(150,145,138,0.5);
        border: none;


        font-size: 0; 
    } 
    .infoDots li.slick-active button{ 
        background-color: rgba(150,145,138,1.0);
    }

}



/*-----------------------
  プロフィール
-----------------------*/

.prof_img{
    max-width: 500px;
    width: 50%;
    height: auto;
}

.prof_img img{
    vertical-align: top;
}

.prof_name{
/*    margin: 112px auto;
    width: 390px;*/

    margin: 0 auto;
    max-width: 390px;
    width: 39%;
    text-align: center;
}

.prof_name img{
    width: 68px;
    height: auto;
    vertical-align: top;
}


.prof_content{
    display: flex;
    justify-content: flex-end;
/*    align-items: flex-start;*/
    align-items: center;

    flex-wrap: wrap;

    margin-bottom: 44px;
}


    .prof_text.sub_txt{
         margin-top: -184px;
    }


    .prof_text p{
        margin-bottom: 10px;
    }
    .prof_text p:last-of-type{
        margin-bottom: 0;
    }


@media screen and (max-width:768px) {
    .prof_name{
        order: 1;
        margin-top: 0;
        margin-bottom: 50px;
        width: 100%;
    }
    .prof_name img{
        width: 47px;
        height: auto;
    }

    .prof_img{
        order: 2;
        max-width: unset;
        width: 100%;
        margin-bottom: 20px;
    }

    .prof_text{
        order: 3;
        width: 100%;
        margin-left: 0;
    }
    .prof_text p{
        margin-top: 0;
        margin-bottom: 10px;
    }

    .prof_text.sub_txt{
         margin-top: 0;
    }

}


/*-----------------------
  レッスン
-----------------------*/
.price{
    margin:1em auto 1em 1em;
}

/*-----------------------
  ギャラリー
-----------------------*/

.gallery_images{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.gallery_images li{
    max-width: 180px;
    width: 18%;
    margin-bottom: 2%;
}

.gallery_images img{
    width: 100%;
    height: auto;
}

@media screen and (max-width:768px) {
    .gallery_images li{
        max-width: unset;
        width: 48%;
        margin-bottom: 4%;
    }

}
/*-----------------------
  出演依頼
-----------------------*/
.offer_images{
    box-sizing: border-box;
/*    margin: 58px 16px 0;*/
    margin: 58px 0 0;
    width: 100%;
    margin-top: 58px;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.offer_images li{
    max-width:220px;
    width: 22%;
}


.offer_images li.low{
    padding-top: 57px; 
}


.offer_images img{
    width: 100%;
    height: auto;
    margin-bottom: 16px;
}


@media screen and (max-width:768px) {

    #offer .main_catch{
        margin-top: 74px;
        margin-bottom: 16px;
    }

    .offer_images{
        margin: 40px 0 0;
        flex-wrap: wrap;
    }

    .offer_images ul{
        width: 100%;
    }
    .offer_images li.low{
        padding-top: 0; 
    }

    .offer_images li{
        max-width:unset;
        width: 48%;

        margin-bottom: 20px;
    }

    figcaption{
        font-size:1.2rem;
    }



}

.keikoba .main_img{
    width: 765px;
}

.keikoba .slide img{
    width: 100%;
    height: auto;

}

/* 地図 */
iframe.sub_img{
    max-width: 500px;
    width: 50%;
    height: 390px;

}
 iframe.googlemaps{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}


.access{
    box-sizing: border-box;
    border:1px solid #ccc;
    padding: 15px;
    margin-top: 30px;
    font-size: 1.3rem;

}

@media screen and (max-width:768px) {
    .keikoba .main_txt{
        margin-top:90px;
        margin-bottom:0;
    }

    iframe.sub_img{
        width: 100%;
        height: 228px;

    }

    .access{
        margin-top: 21px;
        margin-bottom: 24px;
        font-size: 1.1rem;
        line-height: 1.6;

    }

}

/*-----------------------
  footer
-----------------------*/
footer{
    padding: 72px 0 80px;
    text-align: center;

    background-color: #000;
    background-image: url(../images/top/bg_footer.jpg);
    background-size: cover;
/*    background-size: 100vw auto;*/
    background-attachment: fixed;

    color:#fff;
    font-size: 1.0rem;
    font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;

}

footer img{
    margin-bottom: 50px;
    width: 96px;
    height: auto;
}
.credit{
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.credit a{
    text-decoration: underline;
}



.credit li{
   margin-left: 18px; 
}

.credit li:last-child(){
   margin-left: 0; 
}

@media screen and (max-width:768px) {

    footer{
        background-size: cover;
    /*    background-size: 100vw auto;*/
        background-attachment: scroll;
        background-position: center top;

        color:#fff;
        font-size: 1.0rem;
        font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;

    }


    .credit{
        margin-top: 14px;
        display: block;
    }

    .credit li{
       margin-left: 0; 
       margin-top: 14px; 
    }

}

/*-----------------------
  モーダル：実績
-----------------------*/

.modalArea {
    display: none;
    position: fixed;
    z-index: 99; /*サイトによってここの数値は調整 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.modalBg {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    min-height: calc(var(--vh,1vh)*100);

    background-color: #333;

    position: relative;
}

.modalWrapper {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 50%;
    transform:translate(-50%,0);

    max-width: 1300px;
    width: 100%;
    height: 100%;
    padding: 0 0 0;
    background-color: #fff;

    overflow-y: scroll;
}

/*閉じるボタン*/
.closeModal {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 25px;
    left: calc(100% - 45px);
    cursor: pointer;

    width: 20px;
    height: 20px;
}




.closeModal span{
    display: inline-block;
    position: absolute;
    height: 1px;
    border-radius: 2px;
    background-color: #333;
    width: 20px;
  }

.closeModal span:nth-of-type(1) {
    top: 0;
    left: 0;
    transform: translateY(6px) rotate(-45deg);
}


.closeModal span:nth-of-type(2) {
    top: 12px;
    left: 0;
    transform: translateY(-6px) rotate(45deg);
}


/*モーダル内コンテンツ部分*/
.modalContents{
    padding: 68px 240px 247px;
}

.modalContents h4{
    font-size: 2.5rem;
    margin-bottom: 40px;
}
.modalContents h5{
    font-size: 1.8rem;
    margin-bottom: 25px;
}

.activity{
    width: 100%;
    border-top: #333 solid 1px;
    padding: 24px 0 42px 8px; 
}

.activity dl{
    display: flex;
    justify-content: flex-start;
    color: #333;
    margin-bottom: 18px;
    width: 100%;
}
.activity dl:last-child(){
    margin-bottom: 0;
}


.activity dt{
    font-weight: normal;
    font-size: 1.3rem;
    max-width: 60px;
    width: 20%;
    box-sizing: border-box;
}


.activity dd{
    box-sizing: border-box;
    margin-left: 28px;
    font-weight: normal;
    font-size: 1.3rem;
    max-width: 760px;
    width: 80%;
}

@media screen and (max-width:1000px) {
    .modalContents{
        padding: 68px 10% 247px;
    }


}

@media screen and (max-width:768px) {



    .modalWrapper {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        transform:none;

        max-width: unset;
        width: 100%;
        height: 100vh;
    }


    /*閉じるボタン*/
    .closeModal {
    display: block;
    position: -webkit-sticky;
    position: sticky;
      top: 25px;
      left: calc(100% - 45px);
      cursor: pointer;
    }


    .closeModal span{
        display: inline-block;
        position: absolute;
        height: 1px;
        border-radius: 2px;
        background-color: #333;
        width: 20px;
      }

    .closeModal span:nth-of-type(1) {
        top: 0;
        left: 0;
        transform: translateY(6px) rotate(-45deg);
    }


    .closeModal span:nth-of-type(2) {
        top: 12px;
        left: 0;
        transform: translateY(-6px) rotate(45deg);
    }


    /*モーダル内コンテンツ部分*/
    .modalContents{
        width: 90%;
        padding: 10% 5%;
    }

    .modalContents h4{
        font-size: 2.5rem;
        margin-bottom: 40px;
    }
    .modalContents h5{
        font-size: 1.8rem;
        margin-bottom: 25px;
    }

    .activity{
        width: 100%;
        border-top: #333 solid 1px;
        padding: 24px 0 42px; 
    }

    .activity dl{
        display: block;
        line-height: 1.5;
    }


    .activity dt{
        font-size: 1.2rem;
        max-width: unset;
        width: 100%;
    }


    .activity dd{
        margin-left: 0;
        font-size: 1.2rem;
        width: 100%;
    }






}


/*-----------------------
  パララックス
-----------------------*/

.parallax_area {
    width: 50%;
}

.parallax {
    background-position-x:0;
    background-position-y:0;
    background-repeat: no-repeat;
    background-size: cover;

    max-width: 500px;
    width: 100%;
    height: 300px;



/*    transition: all 0.2s ease-in-out;*/



}


/*  縦長の表示エリア　*/
.parallax_vertical {
    height: 600px;
    background-size: cover;



/*    transition: all 0.2s ease-in-out;*/



}





.parallax.pFadeIn {
    animation-name: paraFadeInAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: block;
}
@keyframes paraFadeInAnime{
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.parallax.about_sub01 {
    background-image: url(../images/top/about_sub01.jpg);
}
.parallax.about_sub02 {
    background-image: url(../images/top/about_sub02.jpg);
}
.parallax.about_sub03 {
    background-image: url(../images/top/about_sub03.jpg);
}
.parallax.about_sub04 {
    background-image: url(../images/top/about_sub04.jpg);
}

.parallax.lesson_sub01 {
    background-image: url(../images/top/lesson_sub01.jpg);
}
.parallax.lesson_sub02 {
    background-image: url(../images/top/lesson_sub02.jpg);
}
.parallax.lesson_sub03 {
    background-image: url(../images/top/lesson_sub03.jpg);
}

@media screen and (max-width:768px) {
    .parallax_area {
        width: 100%;
    }
    .parallax {
        width: 100%;
        max-width: unset;

    }

}


.about_dl{
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.about_dl dt{
    box-sizing: border-box;
    width: 110px;    
    position: relative;
}
.about_dl dt:after{
    content: ':';
    position: absolute;
    right: 0;
}
.about_dl dd{
    box-sizing: border-box;
    width: 100%;
    padding-left: 0.5em;
}

.about_midshi{
    margin-top: 18px;
}

.about_p_right{
    margin-top: 18px;
    text-align: right;
}



.infolist_btn{
    text-align: right;
}
.infolist_btn .btn{
    display: inline-block;
    text-align: left;
    width: 150px;
}
.info_area{
    padding-top: 70px;
    padding-bottom: 70px;
}

@media screen and (max-width:768px) {

    .infolist_btn .btn{
        text-align: left;
        width: 100%;
    }
    .info_area .info_box{
        margin-top: 70px;
    }

    .info_area .info_box:nth-of-type(1){
        margin-top: 0;
    }

}

/*動画*/
#video-area{
/*    position: fixed;
    z-index: -1;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;*/
    position: relative;
    width: 100vw;
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
}

#video {
    /*天地中央配置*/
    position: absolute;
    /*z-index: -1;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
/*    width: 177.77777778vh; *//* 16:9 の幅→16 ÷ 9＝ 177.77% */
    width: 100vw;
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}


.video_title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    width: 100%;
}
.title_main{
    color: #fff;
    font-size: 2.5rem;
}
.title_sub{
    margin-top: 20px;
    color: #fff;
    font-size: 1.2rem;
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.btn_mv{
    margin-top: 25px;
    width: 72px;
    height: auto;

    transition: all ease-in-out .1s;
}

.btn_mv:hover{
    transform: scale(1.075);
}

@media screen and (max-width:768px) {

#video-area{
    width: 100%;
    height: 50vh;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    /*z-index: -1;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
/*    width: 177.77777778vh; *//* 16:9 の幅→16 ÷ 9＝ 177.77% */
    width: auto;
    height: 100%; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}
.title_main{
    font-size: 2.0rem;
}

.title_sub{
    font-size: 1.0rem;
}



}