/** Shopify CDN: Minification failed

Line 16:113 "font-wegiht" is not a known CSS property
Line 94:27 "margin-tpo" is not a known CSS property
Line 133:51 Expected ":"

**/
.conts-width { width: 90%; max-width: 1200px; margin: 0 auto; }
.view-more { color:#000; background: #F9E24C; color: .8375rem; font-weight: bold; padding: .5em 1em; display: block; width: fit-content; text-decoration: none;  }

.sp-only { display: none; }
@media screen and (max-width: 900px) {
.sp-only { display: initial; }
}

details[open]>.header__submenu { padding: 1em; background: #222222;color: #FFF; font-family: 'Lato', sans-serif; font-wegiht: 400; }
details[open]>.header__submenu > li + li { border-top: 1px solid #707070; }
.header__submenu .header__menu-item { color: #FFF; text-decoration: none; padding-left: 0; }

.coolknot-page-title { background: url(/cdn/shop/files/main-coolknot.jpg?v=1774764119) no-repeat center center / cover; text-align: center; height: calc(100Vh - 110px); display: flex; flex-direction: column;justify-content: center; align-items: center; }
.coolknot-page-title h1 { font-size: 13vw; color: #FFF;  margin: 0; line-height:1; font-family: 'Lato', sans-serif;  }
.coolknot-page-title h1 span { font-size: .3em; display: block; }
.coolknot-page-title .btn-block { margin-top: 1em; }

.coolknot-page-title.slim { background-image: url(/cdn/shop/files/main-cool-knot-slim.jpg?v=1774764119); }
.coolknot-page-title.slim h1 { font-size: 9vw;}

@media screen and (max-width: 900px) {
    .coolknot-page-title .btn-block { font-size: 1.3rem; width: 60%;  }
    .coolknot-page-title.slim h1  { font-size: 12vw; }
}

.page-lead { margin: 100px 0 80px; } 
.page-lead h2 { font-size: 2.8rem; margin: 0 0 .5em; font-weight: bold; }

@media screen and (max-width: 900px) {
.page-lead { margin: 60px 0 50px; } 
.page-lead h2 { font-size: 2.5rem; }
}

.title-section { text-align: center; margin-top: 0; }
.title-section .en { text-align: center; font-size: 6rem; text-transform: uppercase; font-family: 'Lato', sans-serif; font-weight: bold;  }
.title-section .ja { font-size: 2.6rem; font-weight: bold; display: block; }

@media screen and (max-width: 900px) {
    .title-section .en { font-size: 4rem; }
    .title-section .ja { font-size: 2rem; }
}
@media screen and (max-width: 600px) {
    .title-section .en { font-size: 3rem; }
    .title-section .ja { font-size: 1.8rem; }

}


.conts-feature { background: #FAFAFA; padding: 80px 0 8vw; position: relative; overflow: hidden; }
.conts-feature::after { content: 'COOL KNOT'; font-size: 16.5vw; position: absolute; left: 0; bottom: 0; margin: auto;
opacity: .07; line-height: .8;  font-family: 'Lato', sans-serif; white-space: nowrap; }
.conts-feature.slim::after { content: 'COOL KNOT SLIM'; font-size: 12vw; }
.list-feature { position: relative; z-index: 2; padding: 0; }
.list-feature > li { padding: 0; margin: 32px 0 0; display: flex; border-radius: 20px; overflow: hidden; }
.list-feature > li:nth-child(2n) {flex-direction: row-reverse; }
.list-feature .img { width :50%; }
.list-feature .img img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom;  }
.list-feature .text { width: 50%; background: #F9E24C; font-size: 3.2rem; padding: 1em; display: flex; align-items: center;  }
.list-feature .text p { margin: 0;line-height: 1.4;  }

@media screen and (max-width: 1200px) {
  .list-feature .text { font-size: 2.8rem; }
}
@media screen and (max-width: 900px) {
  .conts-feature  { padding: 50px 0 8vw; }
  .list-feature > li { display: block; }
  .list-feature .img { width :100%; }
  .list-feature .img img {}
  .list-feature .text { width :100%; font-size: 2.5rem; }

}
@media screen and (max-width: 600px) {
  .list-feature .text { width :100%; font-size: 1.8rem; }
}


.conts-for-people { margin: 60px 0 110px; padding-bottom: 60px;  position: relative; overflow: hidden;}
.conts-for-people::after { content: ''; width: 45%; height: calc(100% - 60px); background: #F9E24C; border-radius: 50px 0 0 50px; display: block; z-index: -1; 
position: absolute; top: 60px; right: 0; margin: auto; }

.conts-for-people .inner { display: flex; justify-content: space-between; }
.conts-for-people .text { width: 45%; }
.conts-for-people .img { width: 52%; }
.conts-for-people .img1 { width: 100%; margin-bottom: 23px; border-radius: 20px; }
.conts-for-people .img2 { width: 50%; border-radius: 20px; }

.conts-for-people .title { margin-tpo: 1em; }
.conts-for-people .title .sub { font-size: 4rem; font-weight: bold;font-family: 'Lato', sans-serif; line-height: 1;   }
.conts-for-people .title .main { font-size: 12.5rem; font-weight: bold;font-family: 'Lato', sans-serif; display: block; line-height: .9;  }
.conts-for-people .title .ja { background: #F9E24C; font-size: 1.8rem; padding: .2em .5em; width: fit-content; display: block; }

.conts-for-people .list-dot { font-size: 3.2rem; }
.conts-for-people .list-dot > li { margin-bottom: 1em; line-height: 1.5; font-weight: bold; }

@media screen and (max-width: 900px) {
    .conts-for-people .inner { flex-direction: column; }
    .conts-for-people .img { width: 100%; }
    .conts-for-people .text { width: 100%; }

    .conts-for-people .title .sub { font-size: 3rem; }
    .conts-for-people .title .main { font-size: 10rem;  }
    .conts-for-people .list-dot { font-size: 2.7rem; }

    .conts-for-people::after { width: 80%; height: 100vw; top: auto; bottom: 0; }
}
@media screen and (max-width: 600px) {
    .conts-for-people .title .sub { font-size: 2.5rem; }
    .conts-for-people .title .main { font-size: 7rem;  }
    .conts-for-people .list-dot { font-size: 2rem; }
}
.buynow-wrap { margin: 100px 0; text-align: center; }
.btn-block { background: #000; color: #F9E24C; font-size: 1.7rem; text-align: center; display: inline-block; padding: 1em; width: 300px; max-width: 90%;
text-decoration: none;font-family: 'Lato', sans-serif; font-weight: bold;  }

.list-faq dt,
.list-faq dd .inner { padding: 1.5rem 6rem; position: relative; }
.list-faq dt { font-size: 2rem; font-weight: 600; background: #F9E24C; border-radius: 10px; margin-top: 20px; cursor: pointer; }
.list-faq dt::after { content: '＋'; position: absolute; right: 2rem; top: 1.2rem; margin: auto; font-size: 2rem; font-family: 'Noto Sans JP', sans-serif; font-weight: normal; }
.list-faq dt.open { border-radius: 10px 10px 0 0; }
.list-faq dt.open::after { content: 'ー'; }
.list-faq dd { display: none; background:#F9E76E; margin: 0; border-radius: 0 0 10px 10px; }
.list-faq dd .inner  { padding-right: 1rem; border-top: 1px solid #FFF; min-height: 4em; font-weight: 500; }
.list-faq dt::before,
.list-faq dd .inner::before { position: absolute; top: 1.3rem; left: 2rem; margin: auto; font-size: 3.6rem; font-family: 'Figtree', sans-serif; line-height: 1; }
.list-faq dt::before { content: 'Q';  }
.list-faq dd .inner::before { content: 'A'; opacity.6;  }

@media screen and (max-width:900px) {
    .list-faq dt { font-size: 1.5rem; }
    .list-faq dt,
    .list-faq dd .inner { padding: 1.5rem 4rem;}
    .list-faq dt::before,
    .list-faq dd .inner::before { font-size: 2.5rem; left: 1rem; top: 1.5rem; }
}


.scroll-area { width: 100%; height: 140px; overflow: hidden; position: relative;  margin-top: 60px; }
.scroll-track { display: flex; animation: scroll-left 40s linear infinite; width: fit-content; }
.scroll-track img { height: 140px; width: auto; flex-shrink: 0; max-width: none; }


@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); 
  }
}

@media screen and (max-width: 900px) {
    .scroll-area { height: 100px; }
    .scroll-track { display: flex; animation: scroll-left 20s linear infinite; }
    .scroll-track img { height: 100px; }
}