@charset "UTF-8";

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    margin: 0 auto;
    padding: 0;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

a {
    display: block;
    width: 100%;
    transition: 0.5s;
    text-decoration: none;
}
a:hover {
    opacity: 0.5;
}

li {
    list-style-type: none;
}

#wrapper {
    max-width: 100%;
    min-width: 100%;
    font-size: 1.6em;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "メイリオ", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'Zen Kaku Gothic New', 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 400;
    color: #414141;
    letter-spacing: 0.1rem;
}


/**共通**/
img {
    max-width: 100%;
}

p {
    font-size: 1.8rem;
    line-height: 1.8;
    text-align: justify;
}
span{
    display: block;
}

.noto{
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.yugo{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'Noto Sans JP', sans-serif;
}

.mincho {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.hiragino{
    font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.Avenir{
    font-family: Avenir, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'Noto Sans JP', sans-serif;
}

.shippori, h3, h5, #bland .price, #bland .size, footer, #news .area dt{
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
}

.rltive{
    position: relative;
}



/**トップに戻るボタン**/
.topBtn {
    position:fixed;
    bottom:30px;
    right:15px;
    display:block;
    background-color:rgb(51, 51, 51);
    font-size:22px;
    width:44px;
    height:44px;
    text-align:center;
    border-radius: 4px;
    line-height: 44px;
    text-decoration: none;
    z-index: 9;
  }
  
  .topBtn:link, .topBtn:visited{
    color: #fff;
  }
  
  .topBtn:hover{
    color: rgb(204, 204, 204);
  }



/*----------------------------------------------------
.wrapper
----------------------------------------------------*/
/**header**/
header{
    overflow: hidden;
    position: relative;
    background-image: url(../img/top_img.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

h1{
    position: absolute;
    top: 1rem;
    left: 2rem;
    max-width: 40%;
    z-index: 9;
}

.head_ttl{
    position: absolute;
    top: 50%;
    left: 22%;
    text-align: center;
    font-size: 2.8rem;
    letter-spacing: 2px;
    transform: translate(-50%, -50%);
}

/*スクロールダウン全体の場所*/
   .scrolldown4{
    /*描画位置※位置は適宜調整してください*/
	position:relative;
	right:50%;
    bottom: -50px;
   }
/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	right: -20px;
	bottom:100px;
    /*テキストの形状*/
	color: #707070;
	font-size: 1.2rem;
}
/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #707070;
    transform: skewX(-31deg);
}
.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 100px;
	background:#707070;
}



/**main**/
main {
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;
    display: block;
    background-color: #fff;
    margin: auto;
}

section{
    position: relative;
    z-index: 1;
}

section .inner{
    width: 1100px;
    max-width: 90%;
    margin: auto;
    padding: 7.5rem 0 10rem;
}


.flex_area{
    display: flex;
    margin: 0 auto 8rem;
    justify-content: space-between;
}
h3{
    font-size: 5.2rem;
    color: #CC8888;
}
h3 span{
    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "メイリオ";
    color: #B5AEAE;
}

h3.center{
    text-align: center;
    margin-bottom: 6rem;
}


/** intro **/
h2{
    text-align: center;
    font-size: 2.3rem;
    margin: 3rem auto 10rem;
    color: #0a0a0a;
    font-weight: 500;
    line-height: 2.0;

}
h2 span{
    font-size: 1.7rem;
    font-weight: 300;
    margin-top: 2.5rem;
}

#intro .inner{
    max-width: 100%;
}
#intro .img_area{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#intro .img_area img{
    width: 45%;
}
#intro .img_area img:last-of-type{
    padding-top: 5%;
}


/** About Us **/
#aboutus .flex_area .txt_area{
    flex-basis: 66%;
}

#aboutus .flex_area .txt_area span{
    font-size: 1.45rem;
}

video{
    display: block;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}


/** Bland **/
#bland {
    background-color: #fafaf7;
}

#bland .area .box{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10rem;
}
#bland .area .box:last-of-type{
    margin-bottom: 0;
}

#bland .area .box .img_area a{
    text-align: right;
    color: #0A0A0A;
}

#bland .area .box .txt_area{
    flex-basis: 75%;
    margin-left: 4.5rem;
}

#bland .area .box .txt_area p span{
    font-size: 1.2rem;
    line-height: 1.6;
    letter-spacing: 0;
    margin-bottom: 1.5rem;
}

#bland h4{
    font-size: 4.3rem;
    margin-bottom: 5rem;
    font-weight: 500;
}
#bland h4 span.shrink{
    font-size: 4.3rem;
    letter-spacing: 0;
    display: inline;
}
#bland h4 span{
    font-size: 2.9rem;
}
#bland h4 span.sub{
    font-size: 2.0rem;
    color: #B5AEAE;
}

#bland .seibun{
    color: #1078af;
    text-decoration: underline;
    margin: 1.5rem 0;
}

#bland .price, #bland .size{
    font-size: 2.1rem;
}


/*************** アイコン *****************/
@font-face {
    font-family: 'icomoon';
    src:
      url('../fonts/icomoon.ttf?lu5w87') format('truetype'),
      url('../fonts/icomoon.woff?lu5w87') format('woff'),
      url('../fonts/icomoon.svg?lu5w87#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
.icon {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'icomoon' !important;
 speak: never;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

 /* Enable Ligatures ================ */
 letter-spacing: 0;
 -webkit-font-feature-settings: "liga";
 -moz-font-feature-settings: "liga=1";
 -moz-font-feature-settings: "liga";
 -ms-font-feature-settings: "liga" 1;
 font-feature-settings: "liga";
 -webkit-font-variant-ligatures: discretionary-ligatures;
 font-variant-ligatures: discretionary-ligatures;

 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}


button{
    border: 1px solid #CC8888;
    background-color: #CC8888;
    color: #fff;
    font-size: 2.0rem;
    width: 340px;
    max-width: 80%;
    padding: 1.2rem 0;
    margin-top: 5rem;
    position: relative;
}
button::after{
    content: "\e900";
    font-weight: 900;
    position: absolute;
    top: 51%;
    transform: translateY(-50%);
    right: 20%;
    transition: 0.3s;

}
button:hover::after{
    right: 15%;
}


/* モーダルウィンドウ */
 .modaal-inner-wrapper{
    padding: 0 !important;
}
.modaal-close{
    top: 0 !important;
    right: 0 !important;
    margin-top: 0 !important;
}
.modaal-close:after, .modaal-close:before{
    background: #d3d3d3 !important;
}

.modaal-content-container{
    width: 450px;
    max-width: 80%;
    margin: 0 auto;
    padding: 0 !important;
}

.modaal-container{
    max-width: 80% !important;
    margin: 2rem auto !important;
}
.modaal-gallery-item img{
    width: 500px !important;
    max-width: 100%;
}

.modaal-inline .modaal-content-container{
    width: 100%;
    max-width: 100%;
}
.modaal-inline .modaal-container{
    width: 750px;
    max-width: 100% !important;
}

.modaal-inline video{
    max-width: 100%;
}




/** Store **/
#store .area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#store .area .box{
    flex-basis: 23%;
}
#store h5{
    font-size: 1.9rem;
    letter-spacing: -2px;
    margin: 1rem auto;
    font-weight: 700;
}
#store .area .box p{
    line-height: 1.8;
    font-size: 1.5rem;
}


/** item **/
#item .area{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* 最後のコンテンツを左寄せにする指定 */
#item .area::after, #item .area::before{
    content: "";
    display: block;
    width: 22%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}
#item .area::before {
    order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}

#item .area .box{
    text-align: center;
    flex-basis: 22%;
    margin-bottom: 6rem;
}
#item .area .box h6{
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 1rem;
}
#item .area .box h6 span{
    display: inline;
}
#item .area .box .txt{
    line-height: 1.5;
    font-size: 1.4rem;
    margin: 1.25rem auto;
    color: #717171;
}
#item .area .box .price{
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    line-height: 1.25;
}
#item .area .box .price span.red{
    color: #E92600;
    font-size: 1.5rem;
}
#item .area .box .price span.empha{
    display: inline;
    font-size: 2.5rem;
    font-weight: 600;
}

#item button{
    width: 95%;
    max-width: 95%;
    margin-top: 2rem;
    font-size: 1.65rem;
}
#item button::after{
    right: 10%;
}
#item button:hover::after{
    right: 7%;
}

.sp_br, .sp_br480{
    display: none;
}


/** 差し背景 **/
.bg{
    background-image: url(../img/bg_img01.webp);
    background-size: cover;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    
}


/** sns **/
#sns .inner{
    width: 1400px;
    max-width: 100%;
}

.insta_logo{
    display: inline-block;
}
#sns .hashtag{
    width: 200px;
    margin: 3rem auto 0;
    line-height: 1.5;
}
#sns .hashtag a{
    display: block;
    color: #B5AEAE;
    font-size: 1.6rem;
}

/**スライダー**/
.slick img{
    width: 100%;
}

.slick-slide{
   outline: none;
   margin: 0 10px;
}


/** News **/
#news .pre_area{
    display: flex;
    justify-content: right;
}
#news .area{
    width: 1020px;
    max-width: 100%;
}

#news .area dl{
    padding: 4%;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
}
#news .area dl:first-of-type{
    border-top: 1px solid #E5E5E5;
}
#news .area dt{
    padding-right: 3.0rem;
    color: #B5AEAE;
}
#news .area dd{
    text-align: justify;
}


/** contact **/
#contact{
    background: #fff;
}
#contact .inner{
    padding-bottom: 5rem;
}

#contact iframe{
    width: 100%;
    height: 600px;
}


.btn_area{
    text-align: center;
    padding: 1.5rem 0;
    border: 1px solid #CC8888;
    border-radius: 2px;
    display: block;
    margin: auto;
    width: 350px;
    max-width: 50%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.btn_area a{
    color: #CC8888;
    position: relative;
}

.btn_area a::after{
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 6%;
    transition: right 0.3s;
    width: 7px;
    height: 7px;
    border-top: solid 1px currentColor;
    border-right: solid 1px currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.btn_area a:hover::after{
    right: 5%;
}



/*** footer ***/
footer {
    border-top: 1px solid #FAFAF8;
    background-color: #FAFAF8;
    text-align: right;
    color:#0a0a0a;
    padding: 5rem 2% 2rem;
    font-size: 1.5rem;
    margin-top: 20rem;
}

footer a{
    color: #B5AEAE;
}

footer .footer_icon{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 6rem;
}
footer .footer_icon li{
    margin: 0 1rem;
}

footer .box{
    display: flex;
    justify-content: space-between;
}

footer .footer_list{
    display: flex;
}
footer .footer_list.f02{
    font-size: 1.4rem;
    font-weight: 500;
}
footer .footer_list li{
    margin: 0 1rem;
}
small{
    color: #B5AEAE;
}

/*----------------------------------------------------
エフェクト  
----------------------------------------------------*/


/*----------------------------------------------------
レスポンシブ用
----------------------------------------------------*/
@media screen and (max-width:950px) {
    html{
        font-size: 1.05vw;
    }


    /**header**/
    header{
        background-image: url(../img/top_img_sp.webp);
        height: auto;
    }
    header::before{
        content: "";
        display: block;
        padding-top: 90vh;
    }
    h1{
        left: 1rem;
    }
    .head_ttl{
        top: 30%;
        left: 30%;
    }

    .scrolldown4{
        bottom: -40px;
    }
    
}


@media screen and (max-width:768px) {
    html{
        font-size: 1.45vw;
    }



    /** main **/
    
    .flex_area{
        flex-direction: column;
        align-items: center;
    }
    h3{
        text-align: center;
        margin-bottom: 5rem;
    }
    .pc_br{
        display: none;
    }

    /** intro **/
    #intro .sp_br{
        display: inline;
    }
    h2 span{
        margin-top: 3rem;
    }

    /** About Us **/
    #aboutus .flex_area .txt_area span{
        text-align: left;
    }

    /** Bland **/
    #bland h4{
        margin-bottom: 3rem;
    }
    button{
        margin: 3rem auto 0;
        display: block;
    }
    #bland .flex_area, #news .flex_area{
        margin-bottom: 0;
    }
    #bland .area .box{
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin: 0 auto 10rem;
    }
    #bland .area .box .img_area{
        margin-bottom: 2rem;
    }
    #bland .area .box .txt_area{
        margin-left: 0;
        max-width: 100%;
    }

    .modaal-inline .modaal-container{
        width: auto;
        max-width: 90% !important;
    }

    /** Store **/
    #store .area{
        justify-content: space-evenly;
    }
    #store .area .box{
        flex-basis: 37%;
        margin-bottom: 2.7rem;
    }
  
    #store .area .box:nth-of-type(3n), #store .area .box:last-of-type{
        margin-bottom: 0;
    }
    #store h5{
        font-size: 2.3rem;
        letter-spacing: 0;
    }

    /** item **/
    #item .area .box{
        flex-basis: 46%;
    }


    .bg{
        background-image: url(../img/bg_img01_sp.webp);
    }

    /* モーダル */
    .modaal-video-wrap{
        margin: auto 5% !important;
    }
    
    /** footer **/
    footer{
        text-align: center;
    }
    footer a{
        font-size: 15px;        
    }
    footer .footer_icon{
        margin-bottom: 3rem;
    }
    footer .box .footerLogo{
        margin-bottom: 6rem;
    }

    footer .box{
        flex-direction: column;
        align-items: center;
    }
    footer .footer_list{
        flex-direction: column;
        text-align: left;
        margin:0 auto 3rem;
        width: 60%;
    }
    footer .footer_list li{
        margin-bottom: 2rem;
    }


}

@media screen and (max-width:480px) {
    html {
        font-size: 2.0vw;
    }

    .sp_br480{
        display: inline;
    }

    .head_ttl{
        top: 30%;
        left: 32%;
        font-size: 2.2rem;
    }

    /** intro  **/
    h2 {
        width: 90%;
    }

    /** Bland **/
    #bland h4, #bland h4 span.shrink{
        font-size: 3.7rem;
    }

    /** Item **/
    #item .area .box{
        flex-basis: 47%;
    }
    #item .area .box h6{
        letter-spacing: 0;
    }
    #item .area .box h6 .shrink{
        display: inline;
        letter-spacing: -1px;
        font-weight: 500;
    }
    #item .area .box .price{
        margin-top: 1rem;
        line-height: 1.4;
    }
    #item .sp_br{
        display: inline;
        font-size: 1.5rem;
    }

    /** contact **/
    .btn_area{
        max-width: 80%;
    }


    .bg{
        height: 350px;
    }

    /** footer **/


}