section.message {
    padding: 8% 0% 3%;
    margin: 0 auto 7%;
    position: relative;
    display: flex;
    justify-content: center;
}
.kotohira-container {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.kotohira-container img {
    display: block;
    width: 60%;
    height: auto;
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto;
    padding-top: 5%;
}
.line {
    position: absolute;
    width: 0;
    height: 50px;
    background-color: #f5f5f5;
    transition: width 1s ease;
    z-index: 0;
    visibility: hidden;
}
p.pcOnly.last {
    margin-bottom: -2%;
}
section.classic {
    padding: 8% 0% 4%;
    margin: 0 auto 3%;
    position: relative;
    display: flex;
    justify-content: center;
}
section.classic h2 {
    font-family: Bebas Neue, sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: .05em;
    border-left: solid 3px #000;
    position: absolute;
    top: -2rem;
    left: 12.5%;
    writing-mode: vertical-rl;
    z-index: 1;
}
.leftbox {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    transition: transform 0.3s ease !important, box-shadow 0.3s ease !important;
}
@media screen and (max-width: 768px) {
    .kotohira-container img {
        display: block;
        width: 85%;
        height: auto;
        position: relative;
        z-index: 1;
        text-align: center;
        margin: 0 auto;
        padding-top: 25%;
    }
}
.fexbox {
    width: calc(100vw - 50px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    margin-top: -8%;
    z-index: 0;
}
.i-section1__flexbox {
    flex: 1 1 30%;
    margin: 0 10px;
    box-sizing: border-box;
}
.leftbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.image {
    flex-grow: 1;
    width: 100%;
    height: auto;
    display: block;
}
.text.pconly {
    text-align: center;
    margin: 15px 0;
}
.leadfonttext {
    padding-left: 10%;
}
section.message::after {
    content: "";
    width: 460px;
    height: 3px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: calc(50% - 230px);
}
.wrap {
    max-width: 50vw !important;
    display: flex;
}
@media screen and (max-width: 768px) {
    .fexbox {
        display: flex;
        justify-content: center;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
    .i-section1__flexbox {
        flex: 0 0 70vw;
        margin: 0 10px;
        height: auto;
        scroll-snap-align: start;
    }
    .kotohira-container img {
        width: 70%;
        height: auto;
        margin: 0 auto;
        padding-top: 5%;
    }
}
.message-sec.fixed {
    position: fixed;
    top: 1rem;
    left: 0;
    right: 0;
    width: 100vw;
    z-index: 9999;
    display: flex;
    height: calc(100vh - 1rem);
    overflow: hidden;
}
.sec-main {
    overflow-y: auto;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.message-sec .sec-main-cnt {
    margin-bottom: 50px;
    height: 69vh;
}
@media (max-width: 768px) {
    .message-sec {
        flex-direction: column;
    }
    .message-sec.fixed {
        height: auto;
    }
    .sec-side {
        width: 100%;
        position: relative;
    }
    .sec-main {
        width: 100%;
        margin-left: 0;
    }
}
h2.message.order {
    font-family: Bebas Neue, sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: .05em;
    z-index: 1;
    margin-bottom: 12%;
}
.sec-side-nav__btn a {
    font-family: Bebas Neue, sans-serif;
    color: #6c6c6c;
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: 1px;
    font-weight: 500;
    transition: color 0.3s ease;
}
.sec {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.sec-main {
    flex: 0 0 70%;
    height: 100vh;
    overflow-y: auto;
    padding-left: 1rem;
}
.sec-main-cnt {
    height: calc(60vh - 50px);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}
.sec-main {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
.sec-main-cnt {
    scroll-snap-align: start;
}
.active {
    color: #000;
}
@media screen and (max-width: 768px) {
    .sec {
        flex-direction: column;
    }
    .sec-side {
        position: relative;
        width: 100%;
        top: auto;
    }
    .sec-main {
        width: 100%;
    }
}
.message-sec .sec {
    display: flex;
    width: 100%;
}
.sec-main {
    flex: 0 0 72%;
    overflow-y: auto;
    height: calc(75vh - 2rem);
    scroll-snap-type: y mandatory;
}
.sec-main-cnt {
    height: 60vh;
    margin-bottom: 50px;
    scroll-snap-align: start;
    position: relative;
}
.sec-main {
    scroll-behavior: smooth;
}
.sec-main-cnt__in {
    padding: 3rem 20% 0 0;
    height: 100%;
}
.sec-side-nav__btn a.active {
    font-weight: bold;
    border-left: 4px solid #000;
    color: #000;
}
.message-sec {
    display: flex;
    width: 100vw;
    height: 82vh;
    margin: 0 auto 10%;
    background: #f5f5f5;
}
.message-sec .sec {
    display: flex;
    width: calc(100vw - 50px);
    margin: 3% auto 5%;
}
.message-sec .btn01__link, .message-sec .btn02__link, .message-sec .btn03__link, .message-sec .btn04__link {
    display: block;
    padding: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.message-sec .btn01__link.active, .message-sec .btn02__link.active, .message-sec .btn03__link.active, .message-sec .btn04__link.active {
    font-weight: bold;
    border-left: 6px solid #f5f5f5;
}
@media (max-width: 768px) {
    .message-sec {
        flex-direction: column;
    }
    .message-sec .sec-side {
        position: relative;
        width: 100%;
        height: auto;
        overflow-y: visible;
    }
    .message-sec .sec-main {
        width: 100%;
        margin-left: 0;
    }
}
.sec-side-nav__btn {
    margin-bottom: 10px;
}
.sec-side-nav__btn a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}
.sec-side-nav__btn a:hover {
    color: #000;
    animation: shake 0.5s;
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.sec-side {
    position: sticky;
    top: 5rem;
    flex: 0 0 25%;
    height: auto;
}
.sec-side {
    top: 5rem;
    left: 0;
    width: 25% !important;
    overflow-y: auto;
    background: #f5f5f5;
    padding: 11% 0 0 5.5%;
}
.sec-side {
    overflow-x: hidden; /* 横方向のスクロールを非表示にする */
}
/* sec-mainを70%幅にして、固定されたsec-sideの隣に表示 */
.sec-main {
  width: 72%!important;
  overflow-y: auto;
  padding-left: 1rem;
  box-sizing: border-box;
}
.sec-main {
  overflow-y: auto;
  height: 100%;     /* 適切な高さを指定 */
  scroll-behavior: smooth;  /* スムーズなスクロール効果 */
}

.sec-main {
  overflow-y: scroll;  /* 縦方向のスクロールを有効にする */
  scrollbar-width: none;  /* Firefox用：スクロールバーの幅を非表示にする */
  -ms-overflow-style: none;  /* Internet ExplorerとEdge用：スクロールバーを非表示にする */
}

.sec-main::-webkit-scrollbar {
  display: none;  /* Chrome、Safari、Opera用：スクロールバーを非表示にする */
}

/* コンテンツ全体のレイアウト */
.content-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* 子要素を縦方向に中央揃え */
}

/* PCレイアウト */
@media (min-width: 769px) {
  .image-gallery {
    flex: 0 0 67%;
    max-width: 67%;
  }
    .text-content {
        flex: 0 0 33%;
        max-width: 33%;
        padding-left: 5%;
    }
}

/* メイン画像コンテナ */
.main-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}
.main-image {
  width: 100%;
  height: auto;
  transition: transform 1.5s ease-in-out;
}

/* ホバー時の拡大効果 */
.main-image-container:hover .main-image {
  transform: scale(1.05);
}

/* サムネイルのスタイル */
.thumbnails {
  display: flex;
  margin: 10px 0 0 15px;
}

.thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 15px;
}

.thumbnail:last-child {
  margin-right: 0;
}

/* サムネイルのホバー効果 */
.thumbnail:hover {
  transform: scale(1.05);
}

/* サムネイルがホバーされたときに左右に動く */
.thumbnail:hover ~ .thumbnail {
  transform: translateX(10px);
}

.thumbnail.active {
  border: 2px solid #000;
}

.subtei {
    font-size: 1em;
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.7em;
    margin: 0 auto 2em;
    /* white-space: nowrap; */
}
.lead {
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.7em;
    margin: 0 auto 1em;
}
.message-sec-placeholder {
  height: 0vh; /* 固定の高さを設定 */
}
.md {
    display: inline-block;
}
@media (max-width: 768px) {
.subtei {
    font-size: 1em;
    line-height: 1.6;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.7em;
    margin: 0 auto 2em;
    /* white-space: nowrap; */
}

.wrap {
    max-width: 100%;
    display: inline-block;
    max-width: 65vw !important;
}
.leadfonttext {
    padding-left: 0%;
}
section.message::after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    position: absolute;
    bottom: 0;
    left: calc(50% - 230px);
}
  section.classic {
    padding: 0% 5% 7%;
    margin: 0 auto 10%;
    position: relative;
    display: block;
    justify-content: center;
  }
    section.classic h2 {
        font-family: Bebas Neue, sans-serif;
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: .05em;
        border-left: none;
        position: relative;
        top: 0;
        left: auto;
        display: block;
        margin: 2% 0 10% 0%;
        writing-mode: horizontal-tb;
    }
  .fexbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    margin-top: 0;
  }
  .i-section1__flexbox {
        flex: none;
        width: 90%;
        margin: 10px auto;
  }
section.message {
    padding: 8% 0% 0%;
    margin: 0 auto 0%;
    position: relative;
    display: flex;
    justify-content: center;
}

h2.message.order {
z-index: 1;
    font-family: Bebas Neue, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .05em;
    border-left: none;
    position: relative;
    top: 0;
    left: auto;
    display: block;
    margin: 30% 0 5% 0%;
    writing-mode: horizontal-tb;
    margin-bottom: 6%;
}
.sec-main-cnt__in {
    padding: 0rem 0% 0 0;
    height: 100%;
}
    section.message div {
        width: 100%;
        max-width: fit-content;
        margin: 0 auto 15%;
        height: auto;
    }
    .tb-none {
        display: flow-root;
    }
.sec-side {
    top: -5rem;
    left: 0;
    width: 100% !important;
    overflow-y: auto;
    background: none;
    padding: 10% 0 0 0%;
}
.message-sec .btn01__link, .message-sec .btn02__link, .message-sec .btn03__link, .message-sec .btn04__link {
    display: block;
    padding: 0px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.sec-side-nav__btn {
    margin-bottom: 7px;
}
.sec-side-nav__btn a {
    font-family: Bebas Neue, sans-serif;
    color: #6c6c6c;
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 500;
    transition: color 0.3s ease;
}
.message-sec {
    height: auto;
    margin: 0 auto 35%;
}
.message-sec .sec {
display: block;
        width: calc(100vw - 50px);
        margin: 3% auto 5%;
        height: calc(86vh - 1rem);
        overflow: hidden;
    }

.sec-main {
    width: 100% !important;
    overflow-y: auto;
    padding-left: 1rem;
    box-sizing: border-box;
}
.message-sec {
  position: static;
  width: 100%;
}
.message-sec-placeholder {
  display: none;
  width: 100%;
  height: 0; /* JavaScriptで高さを設定します */
}
  .message-sec.fixed {
  position: fixed;
  top: 0; /* 上端に固定 */
  left: 0;
  width: 100%;
  z-index: 10; /* フッターより手前に表示 */
  }
.sec-main {
    margin-top: -3rem;
}
  .sec-main {
    overflow-y: auto;
    height: calc(75vh - 2rem); /* 必要に応じて調整 */
    scroll-snap-type: y mandatory; /* スムーズなスクロールを実現 */
  }

  .sec-main-cnt {
    height: 100%; /* 各セクションがsec-mainの全高さを占める */
    scroll-snap-align: start; /* 各セクションの開始位置にスナップ */
  }
.lead {
    margin-bottom: 10px;
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.7em;
    margin: 2% auto 3%;
}
.thumbnails {
    display: flex;
    margin: 20px 0 20px 15px;
}
.thumbnail {
    width: 35px;
    height: 35px;
    object-fit: cover;
    margin-right: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 5px;
}
.md {
    display: flex;
}
}

.container-faq {
    display: block;
    width: 60vw;
    text-align: left;
    overflow: hidden;
}

section.faq {
    width: 100%;
    margin: 0 auto;
    padding-top: 1%;
    margin-bottom: 7%;
}
h2.faq {
    font-family: Bebas Neue, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .05em;
    border-left: solid 3px #000;
    position: absolute;
    writing-mode: vertical-rl;
    left: 12.5%;
}
.wrap.howto {
    width: 60vw;
    max-width: 60vw;
    min-width: fit-content;
    margin: 0 auto;
}
.accordion-item .accordion-title.open .open-close-btn {
    background-color: #a8de00;
}
.accordion-item .accordion-title::before {
    content: "Q.";
    position: absolute;
    top: 50%;
    left: 41px;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: bold;
    color: #6D86A5;
}
.accordion-item .accordion-title .open-close-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 2px;
    height: 15px;
    background: #FFF;
    transition: all 0.2s 0s ease;
}
.accordion-item .accordion-title.open .open-close-btn::before {
    opacity: 0;
    transition: all 0.2s 0s ease;
}
.accordion-item .accordion-title.open .open-close-btn::after {
    content: "";
    transform: translate(50%, -50%) rotate(180deg);
    transition: all 0.2s 0s ease;
}
*:before, *:after {
    box-sizing: border-box;
}
.accordion-item .accordion-title .open-close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 15px;
    height: 2px;
    background: #FFF;
    transition: all 0.2s 0s ease;
}
.accordion-item .accordion-title.open .open-close-btn::after {
    content: "";
    transform: translate(50%, -50%) rotate(180deg);
    transition: all 0.2s 0s ease;
}

.accordion-title {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 1.5rem 0px 1.5rem 5rem;
    cursor: pointer;
    font-size: 1rem;
    position: relative;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
.accordion-item {
    margin-bottom: 2%;
}

.accordion-title:hover {
    background-color: #ccc;
}

.open-close-btn {
    position: absolute;
    top: 50%;
    right: 5%; /* 右端からの距離 */
    transform: translateY(-50%);
    font-size: 18px;
    width: 40px;  /* 円の直径 */
    height: 40px; /* 円の直径 */
    background-color: black; /* 背景を黒に設定 */
    border-radius: 50%; /* 円形にする */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* ホバー時のスケール変化をスムーズに */
}

.open-close-btn::before {
    content: "+";
    color: white; /* プラスの文字色を白に */
    font-size: 18px;
}
.accordion-title:hover .open-close-btn {
    transform: translateY(-50%) scale(1.2);
}
.accordion-content {
    display: none;
    padding: 2% 20% 2% 5rem;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 1rem;
    font-weight:500;
    line-height: 1.8rem;
}

.accordion-title.open .open-close-btn::before {
    content: "-";
}

.accordion-title.open {
    background-color: #e2e2e2;
}
.message.shop dd {
    width: 60%;
    margin-left: 0;
    font-size: 1rem;
    font-family: YakuHanJP, Zen Kaku Gothic New, sans-serif !important;
    letter-spacing: 0.1rem;
    font-weight: 500;
}
span.leadtitle {
    font-size: 1rem;
    font-family: YakuHanJP, Zen Kaku Gothic New, sans-serif !important;
    font-weight: 500;
    letter-spacing: 0.1rem;
}
p.right__text1 {
    clear: both;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
}
p.right__text2 {
    margin-top: 2% !important;
    font-size: 1rem !important;
    line-height: 1.4rem !important;
    font-weight:500!important;
}

@media only screen and (max-width: 768px) {
    .message.shop dd {
        width: 100% !important;
    }
section.faq {
    width: 100%;
    margin: 0 auto;
    padding-top: 0%;
    margin-bottom: 20%;
}
p.right__text2 {
    margin-top: 2% !important;
    font-size: 0.9rem !important;
    line-height: 1.6rem !important;
}
.accordion-item .accordion-title::before {
    content: "Q.";
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    font-weight: bold;
    color: #6D86A5;
}
.accordion-title {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 1.5rem 5rem 1.5rem 4rem;
    cursor: pointer;
    font-size: 0.9rem;
    position: relative;
    font-weight: 500;
    transition: background-color 0.3s ease;
    text-align: left;
    line-height: 1.3rem;
}
h4.accordion-title.js-accordion-title.open {
    line-height: 1.6rem !important;
}
h2.faq {
    font-family: Bebas Neue, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .05em;
    border-left: none;
    position: relative;
    top: 0;
    left: auto;
    margin: 2% 0 4% 5%;
    writing-mode: horizontal-tb;        text-decoration: underline;
}
.accordion-content {
    display: none;
padding: 4% 20% 5% 4rem;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        transition: max-height 0.3s ease;
        font-weight: 500;
        font-size: 0.9rem !important;
        line-height: 1.6rem !important;
}
.open-close-btn {
    width: 30px;
    height: 30px;
}
.container-faq {
    display: block;
    width: 100%;
    text-align: left;
    overflow: hidden;
}
.faq .wrap {
        margin: 8% 5% 0 !important;
}
.faq .wrap.howto {
        width: 100% !important;
        max-width: 90%;
        min-width: fit-content;
        margin: 0 auto;
    }
    p.right__text1 {
        font-size: 1rem !important;
        margin: 3% 0 1% 0 !important;
        line-height: 2rem !important;
    }
    section.message p {
        font-size: 1.1em;
        font-weight: 500;
        letter-spacing: .05em;
        line-height: 2.5em;
        margin: 0 auto 2em;
        white-space: nowrap;
        display: inline;
        font-size: 0.9rem;
    }
.message.shop dd {
    width: 60%;
    margin-left: 0;
    font-size: 0.9rem;
    font-family: YakuHanJP, Zen Kaku Gothic New, sans-serif !important;
    letter-spacing: 0.1rem;
    font-weight: 500;
}
section.message p {
        font-size: 0.9rem;
}
}

    .kn-container { width: 80vw; max-width: 80vw; margin: 0 auto; }
    .kn-inner    { width: 80vw; max-width: 80vw; margin: 0 auto; }
    .kn-base {
        font-size: clamp(0.8rem, 0.76rem + 0.23vw, 0.94rem);
        line-height: 1.8;
        color: #444;
        margin-top: 6rem;
    }
    .kn-base.classic { margin-top: 0rem; }
    
    .kn-section      { padding: 1% 0 6rem; background: #ffffff; }
    .kn-section-full {
        padding: 5rem 0 7rem;
        background: #f1f1f1;
        margin-bottom: 4rem;
    }
    
    .kn-section-wide {
        padding: 0rem 0 0rem;
        background: #ffffff;
        margin-bottom: 0rem;
    }
    .kn-section-wide .lead,
    .kn-section-wide h2 { /* .kn-section / .kn-section-full と同 spec を適用 */ }
    .kn-section .lead,
    .kn-section-full .lead { margin-top: 12px; }
    .kn-concept-tagline {
        font-size: clamp(1.3rem, 1.05rem + 1vw, 1.55rem);
        line-height: 1.7;
        color: #111;
        font-weight: 600;
        letter-spacing: 0.06em;
        margin-bottom: 2.2rem;
        margin-top: 2rem;
    }
    .kn-concept .lead {
        font-size: clamp(0.8rem, 0.76rem + 0.23vw, 0.94rem);
        line-height: 2.4;
        color: #333;
        max-width: 100%;
    }

    .kn-section h2, .kn-section-full h2, .kn-section-wide h2 {
        margin-right: 1%;
        font-family: 'Bebas Neue', sans-serif;
        padding-left: 0%;
        margin-bottom: 4%;
        margin-top: 2%;
        font-size: 2.2rem;
        letter-spacing: 2px;
        color: #000000 !important;
        margin-right: 1%;
        font-family: Bebas Neue, sans-serif;
        padding-left: 0%;
        margin-bottom: 0%;
        margin-top: 0%;
    }

    /* CLASSIC */
    .kn-classic-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        margin-top: 36px;
    }
    .kn-classic-card { text-align: left; }
    .kn-classic-card .img-ph {
        aspect-ratio: 4 / 2.6;
        background: #ffffff;
        border-radius: 24px;
    }
    .kn-classic-card .name {
        font-weight: 600;
        margin-top: 16px;
        color: #222;
        font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.1rem);
        font-weight: 600;
        letter-spacing: 1px;
    }
    .kn-classic-card .desc {
        font-size: clamp(0.8rem, 0.76rem + 0.23vw, 0.94rem);
        color: #666;
        line-height: 1.75;
        margin-top: 0.5rem;
        font-weight: 500;
    }
    .kn-classic-card .price { font-weight: 600; margin-top: 10px; color: #222; }

    .kn-feature-list {
        margin-top: 28px;
        border-top: 1px solid #b8b8b8;
    }
    .kn-feature-item {
        border-bottom: 1px solid #b8b8b8;
    }
    .kn-feature-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 0;
        cursor: pointer;
        user-select: none;
        color: #545454;
        padding-right: 1rem;
    }
    .kn-feature-head .num {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2.1em;
        letter-spacing: 2px;
        color: #000000;
        margin-right: 25px;
        line-height: 1;
        position: relative;
        display: inline-flex;
        align-items: center;
        padding-left: 1rem;
    }
    
    .kn-feature-head .num::before {
        content: '';
        display: inline-block;
        width: 9px;
        height: 9px;
        background: #000000;
        border-radius: 50%;
        margin-right: 0;
        vertical-align: middle;
    }
    /* hover フィードバック:item を薄く塗り、+ が黒に、num がわずかに右へ */
    .kn-feature-item { transition: background 0.3s ease; }
    .kn-feature-item:hover { background: #fafafa; }
    .kn-feature-head:hover .num { transform: translateX(4px); transition: transform 0.3s ease; }
    .kn-feature-head:hover .toggle { color: #000; }
    .kn-feature-head .title-txt {
        flex: 1;
        font-weight: 600;
        font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
        letter-spacing: 0.04em;
    }
    .kn-feature-head .toggle {
        font-size: 1.4rem;
        font-weight: 300;
        color: #555;
        transition: transform 0.4s ease;
        line-height: 1;
    }
    .kn-feature-item.open .kn-feature-head .toggle { transform: rotate(45deg); }
    .kn-feature-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
    }
    .kn-feature-item.open .kn-feature-body { max-height: 600px; }
    
    .kn-feature-body-inner {
        padding: 1rem 3rem 3rem 3rem;
    }
    .kn-feature-imgs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
        margin-bottom: 2rem;
    }
    .kn-feature-imgs img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 14px;
        display: block;
    }

    .kn-lazy-wrap {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 14px;
        background: linear-gradient(135deg, #f3f3f3, #ececec);
    }
    .kn-feature-imgs .kn-lazy-wrap { aspect-ratio: 4 / 3; }
    .kn-howto .step .imgs .kn-lazy-wrap { aspect-ratio: 4 / 3; }
    .kn-lazy-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .kn-lazy-wrap::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 28px;
        height: 28px;
        margin: -14px 0 0 -14px;
        border: 2px solid rgba(0,0,0,0.08);
        border-top-color: rgba(0,0,0,0.42);
        border-radius: 50%;
        animation: kn-spin 0.9s linear infinite;
        z-index: 1;
        opacity: 1;
        transition: opacity 0.25s ease;
    }
    .kn-lazy-wrap.is-loaded::before { opacity: 0; }
    .kn-lazy-wrap img {
        opacity: 0;
        transition: opacity 0.45s ease;
        position: relative;
        z-index: 2;
    }
    .kn-lazy-wrap.is-loaded img { opacity: 1; }
    @keyframes kn-spin { to { transform: rotate(360deg); } }
    .kn-feature-body-inner .text {
        color: #494949;
        line-height: 2;
        padding-right: 20%;
        padding-top: 1%;
        padding-bottom: 0%;
    }
    .kn-feature-body-inner .text p {
        margin: 0;
        font-size: clamp(0.8rem, 0.76rem + 0.23vw, 0.94rem);
        line-height: 2.4;
        letter-spacing: 1px;
        /* font-size: 0.94rem; */
        line-height: 2;
        color: #000000;
        font-weight: 400;
        -webkit-text-stroke: 0.0vw;
    }
    .kn-feature-body-inner a {
        display: inline-block;
        margin-top: 18px;
        color: #333;
        border-bottom: 1px solid #333;
        padding-bottom: 2px;
        text-decoration: none;
        font-size: 0.92em;
        letter-spacing: 0.05em;
    }
    .kn-feature-body-inner a:hover { opacity: 0.7; }
    
    .kn-feature-body-inner .text a { display: none; }
    
    .kn-feature-body-inner .text p + p { margin-top: 0em; }

    .kn-feature-slider { position: relative; }
    .kn-feature-slider-img {
        width: 100%;
        aspect-ratio: 5 / 4;  /* 正方形よりわずかに縦短い */
        object-fit: cover;
        border-radius: 14px;
        display: block;
        transition: opacity 0.45s ease;
    }
    .kn-feature-slider-track {
        margin-top: 14px;
        height: 2px;
        background: #e0e0e0;
        position: relative;
        overflow: hidden;
        border-radius: 2px;
    }
    .kn-feature-slider-bar {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background: #000;
        width: 0;
    }
    @media (max-width: 768px) {
        .kn-feature-body-inner { padding: 4px 1rem 32px 1rem; }
        .kn-feature-imgs { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
        .kn-feature-head .num { font-size: 1.8em; margin-right: 14px; }
    }

    .kn-howto-wrap { margin-top: 36px; }
    .kn-howto {
        display: grid;
        grid-template-columns: 3.4fr 1fr 1fr 1fr;
        gap: 10px;
        transition: grid-template-columns 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .kn-howto .step {
        background: #ededed;
        color: #222;
        padding: 32px 28px;
        border-radius: 24px;
        transition: background 0.5s ease, padding 0.5s ease;
        cursor: pointer;
        min-height: 33rem;
        max-height: 33rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .kn-howto .step.is-active {
        background: #f7f7f7;
        padding: 40px 36px;
    }
    .kn-howto .step .no {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 2.6em;
        letter-spacing: 2px;
        color: #000;
        line-height: 1;
    }
    .kn-howto .step .title {
        font-size: 1.05em;
        font-weight: 600;
        margin: 14px 0 0;
        letter-spacing: 0.05em;
        color: #111;
    }
    .kn-howto .step .imgs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 24px;
        opacity: 0;
        /* 中央から左右に開くカーテンアニメ:左右各 50% を削った状態 → 全表示 */
        clip-path: inset(0 50% 0 50%);
        transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0.45s ease 0.1s;
        pointer-events: none;
    }
    .kn-howto .step.is-active .imgs {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        pointer-events: auto;
    }
    .kn-howto .step .imgs img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 14px;
        display: block;
    }
    .kn-howto .step .desc {
        font-size: 0.94rem;
        line-height: 2;
        color: #000000;
        margin-top: 2rem;
        letter-spacing: 1px;
        opacity: 0;
        clip-path: inset(0 50% 0 50%);
        transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, opacity 0.45s ease 0.25s;
        pointer-events: none;
    }
    .kn-howto .step.is-active .desc {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        pointer-events: auto;
    }
    .kn-howto-note {
        margin-top: 22px;
        font-size: 0.8em;
        color: #999;
        text-align: center;
        letter-spacing: 0.05em;
    }

    /* STORY:section-wide(白背景)の中、画像は CLASSIC と同じ 4:2.6 + 角丸 24px */
    .kn-story-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        margin-top: 36px;
    }
    .kn-story-grid .ph {
        aspect-ratio: 4 / 2.6;
        background: #ebe5d5;
        border-radius: 24px;
    }
    
    .kn-story-card {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: transform 0.3s ease;
    }
    .kn-story-card .ph {
        transition: transform 0.4s ease, filter 0.4s ease;
    }
    .kn-story-card:hover .ph {
        transform: translateY(-2px);
        filter: brightness(0.96);
    }
    .kn-story-card-title {
        margin: 14px 0 0;
        font-size: clamp(0.85rem, 0.78rem + 0.3vw, 0.98rem);
        line-height: 1.7;
        letter-spacing: 0.02em;
        color: #2d2a25;
        font-weight: 500;
        word-break: break-word;
    }
    .kn-story-note {
        margin-top: 14px;
        font-size: 0.78em;
        color: #aaa;
        letter-spacing: 0.05em;
    }

    /* BUY */
    .kn-buy-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 36px;
    }
    .kn-buy-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 11% 4%;
        border: 1px solid #222;
        text-align: center;
        color: #222;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 0.1em;
        transition: background 0.3s ease, color 0.3s ease;
        min-height: 140px;
    }
    .kn-buy-btn:hover { background: #222; color: #fff; }

    .kn-section-faq { padding: 1rem 0 5rem; }
    nav[aria-label="Breadcrumb"] { margin: 0 0 6rem; }
    .kn-faq-list { margin-top: 28px; border-top: 1px solid #e5e5e5; }
    .kn-faq-item { border-bottom: 1px solid #e5e5e5; }
    .kn-faq-head {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 30px 1rem;
        cursor: pointer;
        color: #222;
        user-select: none;
    }
    .kn-faq-q-mark {
        font-family: inherit;
        font-size: clamp(1rem, 0.85rem + 0.5vw, 1.2rem);
        font-weight: 700;
        color: #555;
        line-height: 1;
        min-width: 2rem;
        letter-spacing: 0.05em;
    }
    .kn-faq-q-text {
        flex: 1;
        font-size: clamp(0.8rem, 0.76rem + 0.23vw, 0.94rem);
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.6;
        color: #222;
    }
    .kn-faq-toggle {
        font-size: 1.05rem;
        font-weight: 300;
        color: #aaa;
        transition: transform 0.4s ease, color 0.3s ease;
        line-height: 1;
    }
    .kn-faq-head:hover .kn-faq-toggle { color: #555; }
    .kn-faq-head.open .kn-faq-toggle { transform: rotate(45deg); color: #333; }
    .kn-faq-body {
        display: none;
        padding: 0 4px 24px 1rem;  /* Q と左端揃え */
    }
    .kn-faq-body-row {
        display: flex;
        align-items: baseline;          /* テキスト baseline で揃える(Q マークと A 本文の頭が揃う)*/
        gap: 16px;
    }
    .kn-faq-a-mark {
        font-family: inherit;
        font-size: clamp(1rem, 0.85rem + 0.5vw, 1.2rem);  /* Q マークと同サイズ・クランプ化 */
        font-weight: 700;
        color: #555;
        line-height: 2;                  /* A 本文と同じ line-height で 1 行目高さを揃える */
        min-width: 2rem;                 /* Q マークと同じ幅で左端揃え */
        letter-spacing: 0.05em;
        margin: 0;
        padding: 0;
    }
    .kn-faq-a-text {
        flex: 1;
        color: #666;
        line-height: 2;
        font-size: clamp(0.8rem, 0.76rem + 0.23vw, 0.94rem);
        letter-spacing: 0.02em;
        font-weight: 500;
        margin: 0;                       /* <div> のブラウザ既定を打ち消し */
        padding: 0;
    }
    
    .kn-faq-a-text .kn-faq-a-para {
        margin: 0;
        padding: 0;
    }
    .kn-faq-a-text .kn-faq-a-para + .kn-faq-a-para {
        margin-top: 0;
    }
    /* PC / SP 出し分け(Q1 のみ pc/sp 構造を持つ)*/
    .kn-faq-a-text-pc { display: block; }
    .kn-faq-a-text-sp { display: none; }
    @media (max-width: 768px) {
        .kn-faq-a-text-pc { display: none; }
        .kn-faq-a-text-sp { display: block; }
    }

    .kn-faq-a-list {
        margin: 1em 0 0;
        padding: 0;
    }
    .kn-faq-a-list-title {
        font-weight: 600;
        color: #333;
        margin-top: 1.2em;
        line-height: 1.7;
    }
    .kn-faq-a-list-title:first-child { margin-top: 0.4em; }
    .kn-faq-a-list-desc {
        margin: 0 0 0 1.2em;
        color: #666;
        line-height: 2;
    }
    .kn-faq-a-list-desc::before {
        content: "└ ";
        color: #b3aca0;
        margin-left: -1.2em;
        margin-right: 0.4em;
    }
    /* 注釈(※で始まる補足)*/
    .kn-faq-a-note {
        margin: 1.4em 0 0;
        padding: 0;
        color: #888;
        font-size: 0.92em;
        line-height: 1.9;
    }
    @media (max-width: 768px) {
        .kn-faq-a-list-title { margin-top: 0.8em; }
        .kn-faq-a-list-desc { margin-left: 0; line-height: 1.9; }
        .kn-faq-a-list-desc::before { display: none; }
        .kn-faq-a-note { margin-top: 1em; }
    }

    .kn-faq-a-contacts {
        list-style: none;
        margin: 1.4em 0 0;
        padding: 1.2em 1.4em;
        background: #f7f6f3;
        border-radius: 12px;
    }
    .kn-faq-a-contact {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.4em 1em;
        line-height: 2;
    }
    .kn-faq-a-contact + .kn-faq-a-contact {
        margin-top: 0.5em;
        padding-top: 0.5em;
        border-top: 1px dashed #e0dcd2;
    }
    .kn-faq-a-contact-label {
        font-weight: 600;
        color: #3a3530;
        min-width: 9em;
    }
    .kn-faq-a-contact-value {
        color: #1a1814;
        font-weight: 500;
        letter-spacing: 0.04em;
    }
    .kn-faq-a-contact-sub {
        color: #888;
        font-size: 0.9em;
    }
    .kn-faq-a-contact-link {
        color: #0f1115;
        text-decoration: underline;
        text-underline-offset: 3px;
        font-weight: 500;
    }
    .kn-faq-a-contact-link:hover { color: #555; }
    @media (max-width: 768px) {
        .kn-faq-a-contacts { padding: 1em 1em; }
        .kn-faq-a-contact { flex-direction: column; align-items: flex-start; gap: 0.1em; line-height: 1.9; }
        .kn-faq-a-contact-label { min-width: 0; font-size: 0.9em; color: #6d655a; }
        .kn-faq-a-contact-value { font-size: 1rem; }
        .kn-faq-a-contact + .kn-faq-a-contact { margin-top: 0.8em; padding-top: 0.8em; }
    }
    @media (max-width: 768px) {
        .kn-faq-head { gap: 12px; padding: 18px 4px; }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .kn-container { width: 88vw; }
        .kn-inner { width: 88vw; }
        .kn-classic-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
        .kn-story-grid   { grid-template-columns: 1fr 1fr; gap: 20px; }
        .kn-feature-imgs { grid-template-columns: 1fr 1fr; }
        .kn-howto        { grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; }
        .kn-howto .step  { min-height: 28rem; padding: 24px 20px; }
        .kn-feature-body-inner { padding: 4px 1.5rem 28px 1.5rem; }
        .kn-feature-body-inner .text { padding-right: 8%; }
        .kn-divider-cta { width: 88vw; max-width: 88vw; }
        .kn-feature-head .num { font-size: 1.7em; margin-right: 18px; padding-left: 0.5rem; }
        .kn-feature-head .title-txt { font-size: 1rem; }
    }

    /* SP */
    @media (max-width: 768px) {
        
        .kn-base {
            font-size: clamp(0.8rem, 0.76rem + 0.23vw, 0.94rem);
            line-height: 1.8;
            color: #444;
            margin-top: 1rem;
        }
        .kn-container { width: 86vw; max-width: 86vw; margin: 0 auto; }
        .kn-inner    { width: 90vw; }
        .kn-section { padding: 12% 0 10%; }
        /* h2 共通(SP)— margin-bottom/top を 0 まで詰める後勝ち上書き含め貼付値そのまま */
        .kn-section h2, .kn-section-full h2, .kn-section-wide h2 {
            margin-right: 1%;
            font-family: 'Bebas Neue', sans-serif;
            padding-left: 0%;
            margin-bottom: 4%;
            margin-top: 2%;
            font-size: 1.6rem;
            letter-spacing: 2px;
            color: #000000 !important;
            margin-right: 1%;
            font-family: Bebas Neue, sans-serif;
            padding-left: 0%;
            margin-bottom: 0%;
            margin-top: 0%;
        }
        /* コンセプト・タグライン(SP)*/
        .kn-concept-tagline {
            font-size: 1.2rem;
            line-height: 1.7;
            color: #111;
            font-weight: 600;
            letter-spacing: 0.06em;
            margin-bottom: 1rem;
            margin-top: 1rem;
        }
        /* コンセプト・リード(SP)+ <br> を無効化して自動改行のみに */
        .kn-concept .lead {
            font-size: 0.84rem;
            line-height: 2.4;
            color: #333;
            max-width: 100%;
        }
        .kn-concept .lead br { display: none; }

        .kn-buy-grid { grid-template-columns: 1fr; }

        .kn-classic-grid,
        .kn-story-grid,
        .kn-feature-imgs,
        .kn-howto.js-kn-howto {
            display: flex !important;
            grid-template-columns: none !important;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            align-items: stretch;
            margin-left: -7.5%;
            margin-right: -7.5%;
            padding: 0 7.5% 8px;
            scroll-padding-left: 7.5%;
        }
        .kn-classic-grid::-webkit-scrollbar,
        .kn-story-grid::-webkit-scrollbar,
        .kn-feature-imgs::-webkit-scrollbar,
        .kn-howto.js-kn-howto::-webkit-scrollbar { display: none; }

        /* CLASSIC:カード 1.5 枚見える(幅 65%)*/
        .kn-classic-grid { gap: 14px; }
        .kn-classic-card { flex: 0 0 65%; scroll-snap-align: start; }

        /* STORY:カード 1.5 枚見える(幅 65%)*/
        .kn-story-grid { gap: 14px; }
        .kn-story-card { flex: 0 0 65%; scroll-snap-align: start; }

        /* FEATURE 画像 3 枚:1.8 枚見える(幅 55%)*/
        .kn-feature-imgs { gap: 14px; padding-bottom: 8px; margin: 0; }
        .kn-feature-imgs > * { flex: 0 0 55%; scroll-snap-align: start; }

        /* HOW TO ORDER:カード 1 枚 + 次がちら見え(幅 80%)で 01→04 を順に snap */
        .kn-howto.js-kn-howto { gap: 12px; }
        .kn-howto .step {
            flex: 0 0 80%;
            scroll-snap-align: start;
            min-height: 28rem;
            max-height: none !important;
            padding: 24px 20px;
        }
        .kn-howto .step.is-active { padding: 24px 20px; }
        /* SP では PC 用の clip-path アニメを解除(全 step 常時 visible)*/
        .kn-howto .step .imgs,
        .kn-howto .step .desc {
            opacity: 1 !important;
            clip-path: none !important;
            pointer-events: auto !important;
            transition: none !important;
        }
    }

    .kn-divider {
        padding: 0rem 0 0rem;
        text-align: center;
        background: #ffffff;
    }
    .kn-divider-line {
        width: 2px;
        height: 6rem;
        background: #000;
        margin: 0 auto;
    }
    .kn-divider-cta {
        width: 80vw;
        max-width: 80vw;
        margin: 3rem auto 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .kn-divider-cta-item {
        display: block;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        transform: translateZ(0);
    }
    .kn-divider-cta-item img {
        width: 100%;
        height: auto;
        display: block;
        aspect-ratio: 16 / 8;
        object-fit: cover;
        transition: transform 0.5s ease, opacity 0.4s ease;
    }
    
    .kn-divider-cta-item:hover img { transform: scale(1.03); }

    .kn-divider-cta-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 38%, rgba(0,0,0,0) 60%);
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .kn-divider-cta-item:hover::after { opacity: 0.85; }
    /* 非リンク版は cursor を default に(リンクではないことを示す)*/
    .kn-divider-cta-item--nolink { cursor: default; }
    .kn-divider-cta-overlay {
        position: absolute;
        right: clamp(14px, 2.4vw, 36px);
        bottom: clamp(14px, 2.4vw, 32px);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        text-align: right;
        color: #fff;
        /* text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); */
        pointer-events: none;
        z-index: 2;
    }
    .kn-divider-cta-heading {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(1.5rem, 1.27rem + 0.97vw, 2rem);
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1.2;
        color: #fff;
        text-transform: uppercase;
    }
    .kn-divider-cta-sub {
        font-size: clamp(0.8rem, 0.76rem + 0.23vw, 0.94rem);
        font-weight: 500;
        letter-spacing: 0.03em;
        opacity: 0.92;
        color: #fff;
        text-transform: uppercase;       /* 日本語には影響なし、英字混在時のみ作用 */
    }

    @media (max-width: 768px) {
        .kn-divider-cta { width: 90vw; grid-template-columns: 1fr; }
        .kn-divider-cta-overlay { right: 14px; bottom: 14px; gap: 4px; }
    }


.kn-divider-cta-coming {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    border-radius: 999px;
    margin-bottom: 6px;
    opacity: 0.95;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
}
@media (max-width: 768px) {
    .kn-divider-cta-coming { font-size: 0.68rem; padding: 3px 8px; }
}