@charset "utf-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');



/*--------------------------------------

リセット

---------------------------------------*/

/*フォントチラつきなくす*/
html {
    visibility: hidden;
    font-size:62.5%;
  }
  
  html.wf-active,
  html.loading-delay {
    visibility: visible;
    /* background:#efefef; */
  }

  
/**/
html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd,section{
    margin:0;
    padding: 0;
    font-family:"游ゴシック体", YuGothic,"游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    letter-spacing: 1px;
    line-height: 1.5;
    font-weight: normal;
}

*{
    box-sizing: border-box;

}

ul{
    list-style: none;
}

a{
    text-decoration: none;
    color:inherit;
}

img{
 max-width:100%;
 vertical-align: bottom;
}

/*---------------------------------------------
 共通
----------------------------------------------*/

.block{
    max-width:1200px;
    width:94%;
    margin:0 auto;
    padding:10% 0;
    /* border-bottom:1px solid #ccc;    */
}

.noborder{
    border-bottom:0; 
}

.block-border{
    display: block;
    width:100%;
    height:1px;
    background:#ccc;
}

/*明朝フォント*/
.fontM{
    font-family: a-otf-ud-reimin-pr6n, sans-serif;
    font-weight: 300;
    font-style: normal;
}

/*テキストスペース*/
.txtSP{
    letter-spacing: 6px;
}

.txt{
    font-size:1.4rem;
    line-height: 1.5;
}


.br-pc{
    display: none;
    }
    


/*    PC版    */
@media screen and (min-width: 768px) {
    .block{
        padding:3% 0; 
    }
    
    .txtSP{
        letter-spacing: 10px;
    }

    .txt{
        font-size:1.6rem;
        line-height: 1.7;
    }

    .br-pc{
        display: block;
        }
}


/*---------------------------------------------
 キービジュアル
----------------------------------------------*/
header{
    height:100px;
    background:#fff;
}

header h1{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width:100px;
    height:100px;
    margin:0 auto;
    background:url(../img/logo.png) no-repeat center/contain;
    }


.mv-img{
    width:100%;
    height:60vh;
    background:url(../img/main.jpg) no-repeat center center/cover;
}

.mv-img p{
    width:30%;
    height:50px;
    margin:0 auto;

}

/*    PC版    */
@media screen and (min-width: 768px) {

    header h1{
        width:120px;
        }

    .mv-img{
        height:90vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}
/*---------------------------------------------
 コンセプト・特徴
----------------------------------------------*/
.wrapper{
    /* max-width:1000px;
    margin:0 auto; */
}

.c-ttl{
    font-size:2rem;
    padding:5% 0;
    text-align: center;
}

.c-ttl span{
    display: inline-block;
    vertical-align: top;
    color:#777;
    font-size:1.3rem;
    letter-spacing: 1px;
    line-height: 1.3;
}

.c-txt{
    line-height: 1.8;
}

.f-img{
    margin:0 auto 5%;
}

.c-image{
    margin:0 auto 2%;
}

.c-image img{
    width:100%;
    height:250px;
    object-fit: cover;
    
}

.hanshinyoku{
    width:90%;
    margin:0 auto;
}

.hanshinyoku p{
    margin:9% 0;
}

/*    PC版    */
@media screen and (min-width: 768px) {
    .c-ttl{
        font-size:3rem;
        padding:3% 0;
    }

    .c-txt{
     text-align: center;
     line-height:2.5;
    }

    .f-img{
        max-width:50%;
    }

    .c-image{
        margin:0 auto 3%;
    }

    .c-image img{
        height:350px;
    }

    .hanshinyoku{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    
    .hanshinyoku p{
        width:47%;
        margin:9% 0;
    }
    

}

/*---------------------------------------------
 ラインナップ
----------------------------------------------*/


.l-ttl{
    position: relative;
    padding:5% 0;
    line-height: 1.0;
  }
  
  .l-ttl:before {
    position: absolute;
    bottom: 0;
    left: 0;
    bottom:0;
    width: 100%;
    height: 5px;
    content: '';
    background-image: -webkit-repeating-linear-gradient(135deg, #ccc, #999da0 1px, transparent 2px, transparent 5px);
    background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .l-ttl:after {
    position: absolute;
    bottom: 0;
    left: 0;
    top:0;
    width: 100%;
    height: 5px;
    content: '';
    background-image: -webkit-repeating-linear-gradient(135deg, #ccc, #999da0 1px, transparent 2px, transparent 5px);
    background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

.l-ttl{
    text-align: center;
    letter-spacing: 3px;
    font-size: 3rem;
}

.lineup-wrap{
    background:#ccc;
}

.item-flex{
    margin-bottom:10%;
}

.item-imgbox{
    margin-bottom:9%;
}


.i-ttl{
    font-size:1.6rem;
}

.i-ttl span{
background:linear-gradient(transparent 60%, rgb(170, 186, 0, 0.2) 60%);
}

.item-name-wrap{
    display: flex;
    align-items: flex-end;
}

.i-name{
    width:80%;
    font-weight: bold;
    font-size:1.8rem;
    margin:3% 0;
}

.i-name.mist{
    width:100%;
    font-weight: bold;
    font-size:2.4rem;
    margin:3% 0;
}

.i-name span{
    font-size:1.2rem;
    font-weight:normal;
    border:1px solid #000;
    padding:1% 3%;
}

.i-name.mist span{
    display: inline-block;
    margin-bottom:2%;
}

.item-detail{
    width:20%;
    max-width:55px;
}

.item-txt{
    font-size: 1.3rem;
}

.item-spec{
    width:70%;
    font-size: 1.3rem;
    margin:3% 0;
}

.fra-box{
    border:1px solid #aaba00;
    padding:3% 2%;
}
.fra-ttl{
    font-size:1.5rem;
    color:#aaba00;
    text-align: center;
    margin-bottom:4%;
}

.fra-list{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}

.fra-list li{
    width:25%;
    text-align: center;
} 

.fra-img{
width:75%;
margin:0 auto 3%;
}

.fra-txt{
    font-size:1.1rem;
    line-height: 1.3;
}

.item-txt span{
    display: inline-block;
    color:#777;
    font-size:1rem;
    vertical-align: top;
}


.hosoku-box{
    color:#777;
    font-size:1rem;
    line-height: 1.3;
    margin-top:3%;
}

.online{
    width:70%;
    margin:0 auto;
    text-align: center;
    border:1px solid #000;
    margin:6% auto 15%;
}

.online a{
    display: block;
    padding:4% 2%;
    font-size:1.4rem;
}

/*    PC版    */
@media screen and (min-width: 768px) {

.l-ttl{
padding:2% 0;
}   

.item-flex{
    display: flex;
    justify-content: space-between;
    margin-bottom:4%;
}


.item-imgbox{
    width:45%;
}

.item-txtbox{
width:53%;
}

.i-ttl{
    font-size:2.4rem;
}

.i-name{
    width:15em;
    font-size:2rem;
    margin:2% 0;
}

.i-name span{
    font-size:1.4rem;
}

.item-detail{
    max-width:70px;
}

.fra-box, .hosoku-box{
    width:100%;
    padding:0;
}

.fra-list li{
    width:15%;
    margin-bottom:2%;
    text-align: center;
} 

.fra-box{
    border:inherit;
}

.fra-ttl{
    font-size:1.7rem;
    text-align: left;
    margin-bottom:4%;
    border-bottom:2px solid #aaba00;
    padding:0 0 1% 1%;
}

.fra-txt{
    font-size:1.1rem;
    margin-top:10px;
}

.item-flex.re{
    flex-direction: row-reverse;
}

.online{
    width:40%;
    text-align: center;
    border:1px solid #000;
    margin:4% 0 0;
}

.online a{
 transition: 0.4s;
}

.online a:hover{
background:#000;
color:#fff;
}:

}

/*
個別調整分
--------------------------   */

.item-detail.item02, .item-detail.item03, .item-detail.item04{
    width:40%;
    max-width:105px;
}

.item-detail.item04{
    width:30%;
    max-width:80px;
}

.item-detail.item05{
    width:30%;
    max-width:40px;
}

/*item 02*/
.i-ttl.item02 span{
    background:linear-gradient(transparent 60%, rgb(182, 186, 214, 0.2) 60%);
}

.fra-box.item02{
    border:1px solid #b6bad6;
}
.fra-ttl.item02{
    color:#878cb4;
}

/*item 03*/
.i-ttl.item03 span{
    background:linear-gradient(transparent 60%, rgb(248, 179, 0, 0.2) 60%);
}

.fra-box.item03{
    border:1px solid #f8b300;
}
.fra-ttl.item03{
    color:#f8b300;
}

/*item 04*/
.i-ttl.item04 span{
    background:linear-gradient(transparent 60%, rgb(242, 163, 197, 0.2) 60%);
}

.fra-box.item04{
    border:1px solid #f2a3c5;
}
.fra-ttl.item04{
    color:#f2a3c5;
}

/*item 05*/
.i-ttl.item05 span{
    background:linear-gradient(transparent 60%,rgb(242, 152, 115, 0.2) 60%);
}

.fra-box.item05{
    border:1px solid #f29873;
}
.fra-ttl.item05{
    color:#f29873;
}

/*item 06*/
.i-ttl.item06 span{
    background:linear-gradient(transparent 60%, rgb(196, 158, 200, 0.2) 60%);
}

.fra-box.item06{
    border:1px solid #c49ec8;
}
.fra-ttl.item06{
    color:#c49ec8;
}

/*mist item 02*/
.i-ttl.mistitem02 span{
    background:linear-gradient(transparent 60%, rgb(166, 215, 199, 0.3) 60%);
}

.fra-box.mistitem02{
    border:1px solid #95ccba;
}
.fra-ttl.mistitem02{
    color:#95ccba;
}

/*mist item 03*/
.i-ttl.mistitem03 span{
    background:linear-gradient(transparent 60%, rgb(252, 203, 0, 0.2) 60%);
}

.fra-box.mistitem03{
    border:1px solid #fccb00;
}
.fra-ttl.mistitem03{
    color:#fccb00;
}

/*mist item 04*/
.i-ttl.mistitem04 span{
    background:linear-gradient(transparent 60%, rgb(235, 175, 147, 0.2) 60%);
}

.fra-box.mistitem04{
    border:1px solid #ebaf93;
}
.fra-ttl.mistitem04{
    color:#ebaf93;
}


/*    PC版    */
@media screen and (min-width: 768px) {

    .item-detail.item02, .item-detail.item03{
        max-width:125px;
    }
    
    .item-detail.item04{
        max-width:100px;
    }
    

    .fra-box.item02, .fra-box.item03, .fra-box.item04, .fra-box.item05, 
    .fra-box.item06, .fra-box.mistitem02, .fra-box.mistitem03,.fra-box.mistitem04 {
        border:inherit;
    }

    .fra-ttl.item02{
        border-bottom:2px solid #878cb4;
    }

    .fra-ttl.item03{
        border-bottom:2px solid #f8b300;
    }

    .fra-ttl.item04{
        border-bottom:2px solid #f2a3c5;
    }

    .fra-ttl.item05{
        border-bottom:2px solid #f29873;
    }

    .fra-ttl.item06{
        border-bottom:2px solid #c49ec8;
    }

    .fra-ttl.mistitem02{
        border-bottom:2px solid #95ccba;
    }

    .fra-ttl.mistitem03{
        border-bottom:2px solid #fccb00;
    }

    .fra-ttl.mistitem04{
        border-bottom:2px solid #ebaf93;
    }
}


/*---------------------------------------------
動画部分
----------------------------------------------*/

.video-wrapper{
    background:#f1f1f1;
    height:400px;
}


/*---------------------------------------------
フッター 
----------------------------------------------*/


.footer{
background:#efefef;
padding:8% 0 3%;
}
.footer-logo{
    width:30%;
    max-width:100px;
    margin: 0 auto 5%;
}

.copy{
    font-size:1.2rem;
    text-align: center;
    margin-top:2%;
}

/*    PC版    */
@media screen and (min-width: 768px) {
    .footer{
        padding:4% 0 3%;
        }

        .footer-logo{
            margin: 0 auto 2%;
        }

}