@charset "UTF-8";
html {overflow-y: visible;}
body{font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-size: 15px;font-weight: 400;font-style: normal;color: #525252;line-height: 1.8;letter-spacing: .025em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-size-adjust: 100%;word-wrap: break-word;overflow-wrap: break-word;}



.font-f-serif{font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-weight: normal;}
.txt{
    text-align: justify;
    line-height: 2.0;
}
.txt-en{
    text-align: left;
    margin-top: 32px;
}
.txt-center{text-align: center}
.sp{display:block!important}
.tb{display:none!important}
.pc{display:none!important}

.list-common{
    margin-left: 1.5em;
}
.list-common li{
    list-style: disc;
    margin-top: 8px;
}
.list-common li:first-child{
    margin-top: 0;
}

.page__header a,.footer a,.privacy li a{-webkit-transition: opacity .3s ease-out;transition: opacity .3s ease-out;}
.page__header a:hover,.footer a:hover,.privacy li a:hover{opacity: .5}
.privacy li a{
    text-decoration: underline;
}
.privacy a:hover{}


@media (min-width: 768px) {
body{font-size: 16px;letter-spacing: .05em;}
.txt-en{
    margin-top: 52px;
}
.sp{display:none!important}
.tb{display:block!important}
.tb.pc{display:block!important}
	
.list-common{}
.list-common li{}
.list-common li:first-child{}
}

@media (min-width: 992px) {
.sp.tb{display:none!important}
.tb{display:none!important}
.pc{display:block!important}
}

@media (min-width: 1500px) {
body{font-size: 18px;}
}

.scroll_up{transition:.8s ease-in-out;transform:translateY(30px);opacity:0}
.scroll_up.on{transform:translateY(0);opacity:1}

/*header{width: 100%;height: 80px;box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), 0px 1px 6px 0px rgba(0,0,0,0.16);position: fixed;top: 0;z-index: 50;}*/
/*.header-cheese{display: none;}*/


/* fvスクロールダウン
==================================================*/
/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
    position:absolute;
    left:50%;
    bottom: 0;
    /*全体の高さ*/
    height: 50px;
    z-index: 10;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
    position: absolute;
    left: -6px;
    top: -50px;
    /*テキストの形状*/
    color: #fff;
    /* font-size: 1rem; */
    width: 12px;
    letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

@media (min-width: 768px) {
.scrolldown{bottom: 30px;height:60px;}
.scrolldown span{/* font-size: 1.5rem; */top: -76px;left: -8px;width: 18px;}
.scrolldown::after{height: 50px;}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	30%{
		height:50px;
		opacity: 1;
	}
	100%{
		height:0;
		top:80px;
		opacity: 0;
	}
}
}

  /*==================================================
  スタート時は要素自体を透過0にするためのopacity:0;を指定する
  ===================================*/
  
  .box{
    opacity: 0;
  }
  
  /*==================================================
  動き自体の指定：今回は「ふわっ」
  ===================================*/
  /* その場で */
  .fadeOpen {
  animation-name:fadeOpenAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  @keyframes fadeOpenAnime{
    from {
			opacity: 0;
			transform: translateY(0);
    }
  
    to {
			opacity: 1;
			transform: translateY(0);
    }
  }

/* 下から */
  .fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }

  /* 上から */
.fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeDownAnime{
    from {
      opacity: 0;
    transform: translateY(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }

/* アニメーションスタートの遅延時間を決めるCSS*/

  .delay-time01{
  animation-delay: 0.5s;
  }
  .delay-time02{
  animation-delay: 1s;
  }
  .delay-time03{
  animation-delay: 1.5s;
  }
  .delay-time04{
  animation-delay: 2s;
  }


/* ボタン
  ================================================ */
.btn-box{-ms-flex-pack:center;-ms-flex-align:center;align-items:center;background-color: #000;color:#fff!important;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-weight: 600;font-size:14px;height: 52px;justify-content:center;letter-spacing: .75px;line-height:1;max-width: 280px;overflow:hidden;position:relative;text-align:center;text-decoration:none!important;transition-duration:.5s;vertical-align:middle;width:100%;z-index:1}
.btn-box:before{background:0 0;content:"";display:inline-block;height:100%;pointer-events:none;position:absolute;top:0;transition-duration:.5s;width:100%;z-index:-1}
.btn-box:not(.reverse):before {left: -100%;}
.btn-box:hover:not(.reverse):before, a:hover .btn-box:not(.reverse):before {left: 0;}
.btn-box:before,.btn-box:hover, a:hover .btn-box {background-color: #333;color: #fff !important;text-decoration: none;}
.btn-box .left-icon, .btn-box .right-icon {font-size: 14px;pointer-events: none;position: absolute;top: 50%;transform: translateY(-50%);transition: color 0s;z-index: 10;width: 12px;}
.btn-box .right-icon {right: 16px;transition: right .5s;}
.btn-box:hover .right-icon:not(.stay), a:hover .btn-box .right-icon:not(.stay) {right: 12px;}
.btn-box.-btn-sm{height: 44px;width: 200px;}
.btn-box.-round{border-radius: 30px;}
.btn-box.-round-4{border-radius: 4px;}
.btn-box.-border{border: 2px solid #222 !important;}
.btn-box.-border:before, .btn-box.-border:hover, a:hover .btn-box.-border {background-color: #222;color: #fff;}
.btn-box.-order{background-color: #1e81ff;background-image: linear-gradient(180deg, rgba(30, 129, 255, 1), rgba(40, 177, 244, 1));font-size: 20px;font-weight: 700;height: 62px;border-radius: 40px;}
.btn-box.-order::before{background-color: #27aef2;}
.btn-box.food{background-color: #4599c5;}
.btn-box.food::before{background-color: #5db3e0;}
.btn-wrap-1{display:flex;flex-flow:column;align-items:center;margin-top: 80px;}
.btn-wrap-1.-order{margin-top: 40px;}
.btn-wrap-1.lineup-back{margin-top:40px}
.btn-wrap-1-2{display:flex;flex-flow:column;align-items:center;gap:16px;margin-top:40px}
.btn-wrap-1-2 .btn-box{width:280px}

.btn-detail{
    color: #009944;
    color: #8bc63e;
    font-size: 14px;
    font-weight: 600;
}
.btn-detail__i{font-size: 14px;margin-left: 16px;transition: .5s;}
a:hover .btn-detail__i{transform: translateX(12px);}

@media screen and (min-width: 768px) {
.btn-wrap-1{margin-top: 120px;}
.btn-wrap-1.-order{margin-top: 60px;}
.btn-wrap-1.lineup-back{margin-top:40px}
.btn-wrap-1-2{flex-flow: wrap;justify-content: center;gap: 24px;margin-top: 60px;}
.btn-wrap-1-2 .btn-box{}
}


/* header
  ================================================ */
.page__header{
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}
.page__header__ttl{
    width: 160px;
}
.page__header__ttl a{}
.page__header__ttl img{}
@media (min-width: 768px) {
.page__header{
    height: 100px;
}
.page__header__ttl{
    width: 180px;
}
.page__header__ttl a{}
.page__header__ttl img{}
}

/* fv
  ================================================ */
.fv{
    height: 100dvh;
    background-color: #000;
    position: relative;
}
.fv__inner{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 12% 0 0;
    position: relative;
    z-index: 10;
}
.fv__logo{
    width: 200px;
}
.fv__logo__img{}
.fv__scroll{}
.fv__scroll__span{}
.fv__scroll__img{width: 12px;}

#video-area{/* position: fixed; *//* z-index: -1; *//*最背面に設定*/top: 0;right:0;left:0;bottom:0;/* overflow: hidden; */background-color: #ddd;position: absolute;/* will-change: transform,clip-path; */overflow: hidden;width: 100%;height: 100%;opacity: 1;visibility: visible;/* -webkit-transform: translate3d(0,0,0); *//* transform: translate3d(0,0,0); *//* -webkit-transition: opacity .5s cubic-bezier(.39,.575,.565,1),-webkit-transform 1.5s cubic-bezier(.19,1,.22,1); *//* transition: opacity .5s cubic-bezier(.39,.575,.565,1),-webkit-transform 1.5s cubic-bezier(.19,1,.22,1); *//* transition: transform 1.5s cubic-bezier(.19,1,.22,1),opacity .5s cubic-bezier(.39,.575,.565,1); *//* transition: transform 1.5s cubic-bezier(.19,1,.22,1),opacity .5s cubic-bezier(.39,.575,.565,1),-webkit-transform 1.5s cubic-bezier(.19,1,.22,1); *//* -webkit-animation: kf-clip-path 1s linear forwards; *//* animation: kf-clip-path 1s linear forwards; */z-index: 5;}

.video-wrap{/* position: relative; *//* z-index: 5; */}
.video-wrap::after{content: "";position: absolute;top: 0;left: 0;z-index: 6;background-color: rgb(0 0 0 / 30%);width: 100%;height: 100%;}
.video {
    -o-object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
    }
.video-sm {display: block}
.video-lg {display: none}

@media (min-width: 768px) {
.fv{}
.fv__inner{
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}
.fv__logo{
    width: 28vw;
    margin-left: 8vw;
}
.fv__logo__img{}
.fv__scroll{
    left: auto;
    right: 3%;
    bottom: 0;
}
.fv__scroll__span{}
.fv__scroll__img{
    width: 16px;
}
.video-sm {display: block}
.video-lg {display: none}
}

@media (min-width: 992px) {
.video-sm {display: none}
.video-lg {display: block}
}


/* copy
  ================================================ */
.copy{
    height: 180px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.copy__1st{
    font-size: 18px;
    letter-spacing: .06em;
}
.copy__2nd{
    font-size: 20px;
    letter-spacing: .06em;
    line-height: 1.5;
}
.copy__2nd__line{
    font-size: 24px;
    vertical-align: baseline;
}
@media (min-width: 768px) {
.copy{
    height: 500px;
}
.copy__1st{
    font-size: 28px;
}
.copy__2nd{
    font-size: 40px;
}
.copy__2nd__line{
    font-size: 52px;
}
}

/* visual
  ================================================ */
.visual{background-image: url(../images/visual_01_sm.jpg);background-position: center;background-size: cover;/* vertical-align:middle; *//* margin-right:8px; *//* margin-top:-3px; */height: 400px;padding: 0;}
.visual-02{background-image: url(../images/visual_02_sm.jpg);}
@media (min-width: 768px) {
.visual{background-image: url(../images/visual_01_lg.jpg);height: 500px;}
.visual-02{background-image: url(../images/visual_02_lg.jpg);}
}
@media (min-width: 992px) {
.visual{height: 700px;}
.visual-02{}
}


/* feature
  ================================================ */
section .container{max-width: 100%;padding: 0 20px;margin: auto;}


/*.feature,.detail{background: linear-gradient(135deg, red,  orange);background: -webkit-linear-gradient(-45deg, #acdbe4, #fffcf7, #a3b1cc);background: -moz-linear-gradient(-45deg, red,  orange);background-size: 150% 150%;animation-name: gradation;animation-duration: 5.0s;animation-iteration-count: infinite;animation-direction: alternate;animation-timing-function: ease-in-out;padding: 100px 0;}*/


/*@keyframes gradation{
0%{background-position: 0% 0%;}
100%{background-position: 100% 100%;}
}*/

.feature {
background: linear-gradient(220deg, #acdbe4, #fffcf7, #a3b1cc);
background-size: 300% 300%;
animation: gradation 20s ease infinite;
padding: 100px 0;}
@keyframes gradation {
0%{background-position:90% 0%}
50%{background-position:11% 100%}
100%{background-position:90% 0%}
}

.detail {
background: linear-gradient(150deg, #acdbe4, #fffcf7, #a3b1cc);
background-size: 300% 300%;
animation: gradation2 20s ease infinite;
padding: 100px 0;}
@keyframes gradation2 {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}

.feature__container{}
.feature__header{
    position: relative;
    margin: 0 -20px;
}
.feature__header__img{margin-right: 25vw;}
.feature__header__img img{}
.feature__header__ttl{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0,-50%);
    left: auto;
    color: #fff;
    font-size: 32px;
    letter-spacing: .15em;
}
.feature__txt{
    padding: 12vw;
}
.feature__img-box{}
.feature__img-02{}
.feature__img-02 img{
    padding-left: 20vw;
}
.feature__img-03{
    margin-top: -8vw;
}
.feature__img-03 img{
    padding-right: 20vw;
}


.detail{}
.detail__container{}
.detail__header{}
.detail__header__img{
    margin-right: 0;
    margin-left: 25vw;
}
.detail__header__img img{}
.detail__header__ttl{
    right: 0;
    left: 20px;
}
.detail__footer{}
.detail__txt{}
.detail__img-box{}
.detail__img-02{}
.detail__img-02 img{padding-left: 0;padding-right: 20vw;}
.detail__img-03{}
.detail__img-03 img{
    padding-right: 0;
    padding-left: 20vw;
}

@media(min-width: 767px) {
section .container{
    padding: 0;
}
.feature,.detail{
    padding: 120px 0;
}
.feature__container{}
.feature__header{
    margin: 0;
}
.feature__header__img{}
.feature__header__img img{}
.feature__header__ttl{
    font-size: 60px;
    right: 40px;
}
.feature__txt{
    padding: 10vw;
    margin: auto;
}
.feature__img-box{
    padding: 0 10vw;
}
.feature__img-box{}
.feature__img-02{}
.feature__img-02 img{}
.feature__img-03{
    margin: -200px 0 0;
}
.feature__img-03 img{
    padding-right: 40vw;
}

.detail{}
.detail__container{}
.detail__header{}
.detail__header__img{}
.detail__header__img img{}
.detail__header__ttl{
    right: 0;
    left: 40px;
}
.detail__footer{}
.detail__txt{}
.detail__img-box{
    padding: 0  10vw;
}
.detail__img-02{}
.detail__img-02 img{}
.detail__img-03{
    margin-top: -40px;
}
.detail__img-03 img{
    padding-right: 0;
    padding-left: 20vw;
}
}

@media(min-width: 992px) {
section .container{}
.feature,.detail{
    padding: 12vw 0;
}
.feature__container{}
.feature__header{}
.feature__header__img{
    margin-right: 32vw;
}
.feature__header__img img{}
.feature__header__ttl{
    font-size: 6vw;
    right: 4vw;
}
.feature__txt{
    padding: 100px 0;
    margin: auto;
    width: 724px;
}
.feature__img-box{}
.feature__img-box{}
.feature__img-02{
}
.feature__img-02 img{
    padding-left: 30vw;
}
.feature__img-03{
    margin-top: -260px;
}
.feature__img-03 img{
    padding-right: 54vw;
}

.detail{}
.detail__container{}
.detail__header{}
.detail__header__img{
    margin-right: 0;
    margin-left: 32vw;
}
.detail__header__img img{}
.detail__header__ttl{}
.detail__footer{
    display: flex;
    flex-flow: row-reverse;
    gap: 10%;
    align-items: center;
    justify-content: space-between;
    padding: 7vw 5vw 0;
}
.detail__txt{
    flex: 1;
    padding: 0;
    width: 100%;
}
.detail__img-box{
    padding: 0;
    width: 50%;
}
.detail__img-02{
    margin-right: 18%;
}
.detail__img-02 img{
    padding: 0;
}
.detail__img-03{
    margin: -80px 0 0 18%;
    padding: 0;
}
.detail__img-03 img{
    padding: 0;
}
}

@media(min-width: 1500px) {
section .container{
    /* max-width: 1500px; */
}
.feature,.detail{
    padding: 180px 0;
}
.feature__container{}
.feature__header{}
.feature__header__img{
    margin-right: 32vw;
    margin-left: calc((100vw - 1500px) / 2);
}
.feature__header__img img{}
.feature__header__ttl{
    font-size: 90px;
    right: 4vw;
}
.feature .feature__txt{
    width: 812px;
}
.feature .feature__img-box{
    max-width: 1184px;
    padding: 0;
    margin: auto;
}
.feature__img-box{}
.feature__img-02{}
.feature .feature__img-02 img{
    padding-left: 450px;
}
.feature__img-03{}
.feature .feature__img-03 img{
    padding-right: 810px;
}

.detail{}
.detail__container{}
.detail__header{}
.detail__header__img{
    margin-left: 32vw;
    margin-right: calc((100vw - 1500px) / 2);
}
.detail__header__img img{}
.detail__header__ttl{
    right: 0;
    left: 4vw;
}
.detail__footer{
    width: 1336px;
    margin: auto;
    padding: 100px 0 0;
}
.detail__txt{
    width: 100%;
}
.detail__img-box{}
.detail__img-02{}
.detail__img-02 img{}
.detail__img-03{}
.detail__img-03 img{}
}


/* spaec
  ================================================ */
.spec{
    padding: 80px 0;
    background-image: linear-gradient(0deg, rgba(245, 245, 245, 1), rgba(255, 255, 255, 1)70%);
}
.spec__container{
    max-width: 960px !important;
}
.spec__ttl{
    font-size: 28px;
    margin-bottom: 28px;
    letter-spacing: 0.075em;
    text-align: center;
}
.spec__common{
    margin-bottom: 40px;
}
.spec__common__ttl{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    position: relative;
    padding-left: 52px;
}
.spec__common__ttl::before{position: absolute;top: 50%;left: 0;width: 40px;height: 1px;content: '';background: #525252;}
.spec__common__box{}
.spec__common__list{}
.spec__common__list__li{
    margin-top: 16px;
}
.spec__common__list__li:first-child{margin-top: 0}

.spec__list__lengs{
    width: 4.5em;
}

.table-responsive{display: block;
    width: 100%;
    overflow-x: auto;}
.spec__table{
    background-color: #fff;
    border-collapse: collapse;
    border: 1px solid #ddd;
    width: 100%;
    margin-bottom: 4px;
}
.spec__thead{}
.spec__thead th,.spec__thead td{
	border: 1px solid #ddd;
	padding: 12px;
	/* background-color: #fff; */
}
.spec__thead th{}
.spec__thead td{
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}
.spec__tbody{}
.spec__tbody th,.spec__tbody td{
    border: 1px solid #ddd;
    font-size: 14px;
    padding: 16px;
}
.spec__tbody th{
    text-align: center;
    width: 6em;
}
.spec__tbody td{vertical-align: top;}
.spec__list{}
.spec__list__li{
    font-size: 14px;
    margin-top: 8px;
}
.spec__list__li:first-child{margin: 0;}

.spec__color{
}
.spec__color__li{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.spec__color__swatch{
    font-size: 28px;
}
.spec__color__swatch.fw{
    color: #eaeaea;
}
.spec__color__swatch.reb{
    color: #9adac8;
}
.spec__color__swatch.mb{color: #075c96;}
.spec__color__swatch.bo{color: #e5651f;}
.spec__color__swatch.od{color: #6f7552;}
.spec__color__swatch.cg{color: #474747;}
.spec__color__name{}
.nowrap{white-space: nowrap;}
.spec__att{display: block;margin-top: 8px;font-size: 12px;font-weight: 500;}
.spec__tag{
    display: flex;
    flex-flow: wrap;
    gap: 12px;
    margin-top: 20px;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
}
.spec__tag__li{width: 220px;}
.spec__tag__li img{
}
.spec__tag__li.tag-01{
}
.spec__tag__li.tag-02{
}
.spec__tag__li.tag-03{width: 180px;}
.spec__att2{display: block;margin-top: 8px;margin-left: 20px;font-size: 12px;font-weight: 500;list-style-type: disc;}
.spec__att2__li{
    margin-top: 4px;
}
.spec__att2__li:first-child{
    margin-top: 0;
}
.spec__size{}
.spec__size__list{}
.spec__size__comp{
    margin-top: 20px;
    padding-right: 40px;
}
.spec__size__comp img{}
.spec__size__comp__txt{
    margin-top: 12px;
}
.pricelist-ttl{
    font-size: 16px;
    font-weight: 600;
    margin: 40px 0 8px;
}
.pricelist-ttl span{
    font-size: 12px;
    vertical-align: text-bottom;
    margin-left: 4px;
}
.pricelist-tax{
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
}
.pricelist-custom{
    margin-top: 12px;
}
.pricelist__color-th{
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    gap: 4px;
}
.pricelist__color-ttl{
}
.pricelist__color-wrap{
    display: flex;
    gap: 8px;
}
.pricelist__color-wrap .spec__color__swatch{
    font-size: 26px;
}
.pricelist__tbody td{
    text-align: center;
}
.pricelist__tag-wrap{display: flex;align-items: center;gap: 8px;}
.pricelist__tag-wrap .tag{
    width: 100px;
}
.pricelist__tag-wrap .tag.tag-03{
    width: 84px;
}

.order{
    margin-top: 80px;
    padding: 40px 20px;
    background-color: #fff;
    border: 1px solid #ddd;
}
.order__ttl{
    background-color: #525252;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin: -40px -20px 20px;
    padding: 15px;
}
.order__lead{
    color: #ef4e0a;
    font-weight: 600;
}
.order__att__list{
    margin-top: 20px;
    margin-bottom: 32px;
}
.order__att__li{
    margin-top: 8px;
}
.order__att__li:first-child{
    margin-top: 0;
}
.order__att__index{
    font-weight: 600;
    /* width: 5em; */
}
.order__submit-att{
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.notes{
    margin-top: 80px;
    background-color: #f5f5f5;
    border: 1px solid #dddddd;
    padding: 20px 16px;
}
.notes__ttl{
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding-bottom: 4px;
}
.notes__txt{
    font-size: 13px;
}
.notes__list{
    list-style-type: disc;
    margin: 20px 0 0 20px;
    font-size: 13px;
}
.notes__list__li{
    margin-top: 8px;
}
.notes__list__li:first-child{
    margin-top: 0;
}
.notes__list__index{font-weight: 700;display: block;}

span.notes__list__index {}

@media (min-width: 768px) {
.spec{
    padding: 120px 0;
}
.spec__container{
    padding: 0 40px !important;
}
	
.spec__ttl{
    font-size: 40px;
    margin-bottom: 60px;
}
.spec__common{
    margin-bottom: 60px;
}
.spec__common__ttl{
    font-size: 20px;
    margin-bottom: 24px;
    padding-left: 80px;
}
.spec__common__ttl::before{
    width: 68px;
}
.spec__common__box{}
.spec__common__list{}
.spec__common__list__li{
    font-size: 16px;
}
	
.spec__list__lengs{
    width: 5.5em;
}
	
	
.spec__table{margin-bottom: 0;}
.spec__thead{}
.spec__thead th,.spec__thead td{}
.spec__thead th{}
.spec__thead td{}
.spec__tbody{}
.spec__tbody th,.spec__tbody td{
    padding: 24px;
    /* background-color: #fff; */
}
.spec__tbody th{
    width: 14em;
}
.spec__tbody td{}
.spec__list{}
.spec__list__li{margin-top: 0;}
.spec__color{
    display: flex;
    flex-flow: wrap;
    gap: 0;
}
.spec__color__li{
    width: calc(100% / 3);
    gap: 12px;
}
.spec__color__swatch{
    font-size: 36px;
}
.spec__color__swatch.fw{}
.spec__color__swatch.reb{}
.spec__color__swatch.md{}
.spec__color__swatch.bo{}
.spec__color__swatch.od{}
.spec__color__swatch.cg{}
.spec__color__name{}
.spec__att{
    font-size: 12px;
}
.spec__tag{
    display: flex;
    flex-flow: wrap;
    gap: 16px;
    font-size: 12px;
}
.spec__tag__li{width: 210px;}
.spec__tag__li img{
}
.spec__tag__li.tag-01{
}
.spec__tag__li.tag-02{
}
.spec__tag__li.tag-03{width: 170px;}
.spec__att2{}
.spec__att2__li{
    margin-top: 4px;
}

.spec__size{display: flex;gap: 32px;}
.spec__size__list{width: 300px;}
.spec__size__comp{flex: 1;margin: 0;padding: 0;}
.spec__size__comp img{
}
.spec__size__comp__txt{
    margin-top: 40px;
}
.pricelist-ttl{
    font-size: 20px;
}
.pricelist-ttl span{
    font-size: 14px;
}
.pricelist-tax{
    text-align: right;
}
.pricelist-custom{}
.pricelist__color-th{
    justify-content: space-between;
    padding: 0 28px;
    gap: 20px;
}
.pricelist__color-ttl{
    margin-right: auto;
}
.pricelist__color-wrap{}
.pricelist__color-wrap .spec__color__swatch{}
.pricelist__tbody td{}
.pricelist__tag-wrap{
}
.pricelist__tag-wrap .tag{}
.pricelist__tag-wrap .tag.tag-03{}

.order{
    padding: 60px;
}
.order__ttl{
    margin: -60px -60px 40px;
    font-size: 20px;
}
.order__lead{
    text-align: center;
}
.order__att__list{
    margin-top: 32px;
    margin-bottom: 52px;
}
.order__att__li{
}
.order__att__index{
    width: 6em;
}
.order__submit-att{}
.notes{
    margin-top: 120px;
    padding: 40px;
}
.notes__ttl{
    font-size: 15px;
}
.notes__txt{}
.notes__list{}
.notes__list__li{}
.notes__list__li:first-child{}
.notes__list__index{}
}
 
/* 特定商取引法に基づく表記
  ================================================ */
.about-law{}
.about-law__dt{
    font-weight: 600;
    margin-top: 20px;
}
.about-law__dd{}
.about-law__ttl{
    margin-top: 12px;
}
@media (min-width: 768px) {
.about-law{
    display: flex;
    flex-flow: wrap;
}
.about-law__dt{
    width: 30%;
    margin-top: 40px;
}
.about-law__dd{
    width: 70%;
    margin-top: 40px;
}
.about-law__ttl{}
}

/* privacy poricy
  ================================================ */
.privacy{
    padding: 80px 0;
    background-image: linear-gradient(0deg, rgba(245, 245, 245, 1), rgba(255, 255, 255, 1) 70%);
}

.privacy__container{
    max-width: 960px !important;
    margin: auto !important;
    padding: 0 20px !important;
}
.privacy__ttl{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: center;
}
.privacy__intro{
    margin-bottom: 24px;
}
.privacy__wrap{}
.privacy__wrap:first-child{}
.privacy__wrap__ttl{
    font-weight: 700;
    margin-top: 24px;
}
.privacy__wrap__ttl:first-child{
    margin-top: 0;
}
.privacy__wrap__txt{}
.privacy__wrap__txt.ttl{
    margin-top: 20px;
}
.privacy__wrap__list{
    margin-top: 4px;
    margin-left: 1.5em;
}
.privacy__wrap__list li{overflow-wrap: anywhere;list-style-type: disc;margin-top: 4px;}
.privacy__wrap__list li:first-child{
    margin-top: 0;
}
ol.privacy__wrap__list{
    margin-left: 2.5em;
    margin-top: 12px;
}
ol.privacy__wrap__list li {
	list-style-type: none;
	counter-increment: cnt;
}
ol.privacy__wrap__list li:first-child {
}
ol.privacy__wrap__list li::before {
	content: "（" counter(cnt) "）";
	display: inline-block;
	margin-left: -3em; /* サイトに合せて調整 */
	width: 3em; /* サイトに合せて調整 */
}


@media (min-width: 768px) {
.privacy{
    padding: 120px 0;
}
.privacy__container{
    padding: 0 40px !important;
}
.privacy__ttl{
    font-size: 24px;
    margin-bottom: 80px;
}
.privacy__intro{
    margin-bottom: 40px;
}
.privacy__wrap{}
.privacy__wrap:first-child{}
.privacy__wrap__ttl{
    margin-top: 40px;
}
.privacy__wrap__txt{}
.privacy__wrap__txt.ttl{}
.privacy__wrap__list li{}
.privacy__wrap__list li:first-child{}
ol.privacy__wrap__list{}
ol.privacy__wrap__list li{}
ol.privacy__wrap__list li::before {}
}

@media (min-width: 992px) {
.privacy{}
.privacy__container{}
.privacy__ttl{}
.privacy__intro{}
.privacy__wrap{}
.privacy__wrap:first-child{}
.privacy__wrap__ttl{}
.privacy__wrap__txt{}
.privacy__wrap__list li{}
.privacy__wrap__list li:first-child{}
ol.privacy__wrap__list{}
ol.privacy__wrap__list li{}
ol.privacy__wrap__list li::before {}
}


/* footer
  ================================================ */
.footer{
    padding: 40px 0;
}
.footer__container{}
.footer__left{}
.footer__left__ttl{
    width: 140px;
    margin: 0 auto 20px;
}
.footer__left__ttl img{
    width: 140px;
}
.footer__left__ig{
    width: 30px;
    margin: 0 auto 20px;
    text-align: center;
    margin-bottom: 52px;
}
.footer__left__ig a{}
.footer__left__ig img{width: 30px;}
.footer__left__link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.footer__left__link__index{
    font-size: 12px;
}
.footer__left__link__index a{}
.footer__right{
    margin-top: 12px;
}
.footer__right__ig{
    display: none;
}
.footer__right__ig a{}
.footer__right__ig img{
    width: 28px;
}
.footer__right__copyright{
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.1em;
}
.copyright{}


@media(min-width: 992px) {
.footer{
    padding: 60px 40px;
}
.footer__container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer__left{
    display: flex;
    align-items: center;
    gap: 32px;
}
.footer__left__ttl{
    margin: 0;
}
.footer__left__ttl img{}
.footer__left__ig{
    margin: 0;
    width: 28px;
    height: 28px;
}
.footer__left__ig a{}
.footer__left__ig img{
    width: 28px;
}
.footer__left__link{}
.footer__left__link__index{
}
.footer__left__link__index a{}
.footer__right{
    margin: 0;
}
.footer__right__ig{}
.footer__right__ig a{}
.footer__right__ig img{}
.footer__right__copyright{}
.copyright{}
}