@charset "utf-8";

/* ============================= Variables ============================= */
:root {
    --primary-white: #FFF;
    --primary-lightBeige: #E3DFD9;
    --primary-beige: #D0C8B6;
    --primary-black: #302C28;
    --primary-gray: rgba(48, 44, 40, 0.70);
    --primary-pink: #D85D7E;
    --contentPadding-sp: 6.6%;
    --contentPadding-pc: 8.3%;
    --dark-mode-opacity: 0;
}

/* ============================= Reset & Base ============================= */
* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: "lato", "zen-kaku-gothic-new", "shippori-antique", sans-serif;
    font-style: normal;
    color: var(--primary-black);
    background-image: url(../images/bg_lightBeige.png);
    line-height: 1.8;
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-black);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

body.dark-mode::before {
    opacity: 1;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.4s ease;
}

a:hover {
    color: var(--primary-pink);
}

/* ============================= Typography ============================= */
.topic {
    font-family: "shippori-antique";
    font-size: 2.8rem;
    line-height: 1;
    font-weight: 400;
}

.subTopic {
    font-family: "optima-nova-lt-pro";
    color: var(--primary-gray);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 1.12px;
    margin-top: 12px;
    opacity: 0.7;
}

.topic__box {
    text-align: left;
}

/* ============================= Display Utilities ============================= */
.only-pc {
    display: none;
}

.only-sp {
    display: block;
}

/* ============================= PC Typography ============================= */

@media screen and (min-width: 769px) {
    .topic {
        font-size: 3.8rem;
    }

    .subTopic {
        font-size: 1.6rem;
        letter-spacing: 1.28px;
        margin-top: 16px;
    }

    .only-pc {
        display: block;
    }

    .only-sp {
        display: none !important;
    }
}

/* ============================= Loading Screen ============================= */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    background-image: url('../images/bg_lightBeige.png');
    background-repeat: repeat;
    background-size: 600px 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: opacity 0.5s ease;
}

#loading-screen.fade-out {
    opacity: 0;
}

.loading__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading__text {
    font-size: 1.6rem;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    color: var(--primary-black);
    font-family: "shippori-antique";
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.loading__text.show {
    opacity: 1;
}

#loading-logo {
    margin-top: 48px;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    width: 204px;
    height: 48px;
    padding-right: 8px;
}

#loading-logo.show {
    opacity: 1;
}

/* ============================= PC Loading Screen ============================= */
@media screen and (min-width: 769px) {
    .loading__text {
        font-size: 1.8rem;
        line-height: 1.8;
    }

    #loading-logo {
        margin-top: 80px;
        width: 253px;
        height: 60px;
        padding-right: 16px;
    }
}

/* ============================= Header ============================= */
.header {
    padding: 0 var(--contentPadding-sp);
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header__list--pc {
    display: none;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    padding: 0 5.8%;
    border-radius: 10px;
    position: relative;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
    z-index: 999;
}

.header__inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/bg.png');
    opacity: 0.7;
    background-repeat: repeat;
    background-size: 600px 600px;
    border-radius: 10px;
    z-index: -998;
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .header__inner::before {
    background-color: var(--primary-black);
}

.header__logo {
    margin: 0;
    z-index: 999;
}

.header__logo img {
    height: 32px;
    width: auto;
    transition: filter 0.6s ease;
}

body.dark-mode .header__logo img {
    filter: brightness(0) invert(1);
}

.header__inner.nav-open .header__logo img {
    filter: none !important;
}

.header__inner.nav-open .hamburger__bar {
    background-color: var(--primary-black) !important;
}

/* Hamburger Menu */
.hamburger {
    position: relative;
    width: 25px;
    height: 13px;
    cursor: pointer;
    z-index: 1001;
}

.hamburger__bar {
    position: absolute;
    left: 0;
    width: 25px;
    height: 1px;
    background: var(--primary-black);
    transition: all 0.4s ease, background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger__bar:nth-child(1) {
    top: 0;
}

.hamburger__bar:nth-child(2) {
    top: 6px;
}

.hamburger__bar:nth-child(3) {
    top: 12px;
}

.hamburger.active .hamburger__bar:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.hamburger.active .hamburger__bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger__bar:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

body.dark-mode .hamburger__bar {
    background-color: var(--primary-white);
}

/* Navigation */
.header__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../images/bg_lightBeige.png);
    padding: 100px var(--contentPadding-sp) 0;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    z-index: 998;
    line-height: 1;
}

.header__nav.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.header__list {
    background-image: url(../images/bg_beige.png);
    border-radius: 10px;
    list-style: none;
    margin: 0;
    padding: 24px var(--contentPadding-sp);
    font-family: "shippori-antique";
    line-height: 1;
}

.link--category {
    display: block;
    font-size: 1.6rem;
    text-align: left;
    width: 100%;
    color: var(--primary-gray);
    margin-top: 40px;
}

.link--categoryTop {
    margin-top: 0;
}

.link--category--item {
    display: flex;
    align-content: left;
    gap: 24px;
    align-self: stretch;
    flex-wrap: wrap;
    margin-top: 24px;
}

.link--category--item span {
    border-bottom: 1px solid var(--primary-gray);
    padding-bottom: 8px;
}

.link--item {
    display: inline-block;
}

.header__nav--bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 40px var(--contentPadding-sp) 24px;
}

.header__listOutbound {
    margin-left: 0;
    list-style: none;
    padding: 0;
}

.header__listOutbound--item {
    display: block;
    margin-bottom: 24px;
}

.header__listOutbound--item a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--primary-gray);
    padding-bottom: 8px;
    transition: color 0.3s ease;
}

.header__listOutbound--item a::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url(../images/link_icon_b.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.header__listOutbound--item a:hover::after {
    filter: invert(51%) sepia(21%) saturate(1508%) hue-rotate(294deg) brightness(89%) contrast(88%);
}

.nav__tel {
    text-align: left;
}

.nav__tel--numBox {
    border-bottom: 1px solid var(--primary-pink);
    padding-bottom: 6px;
}

.nav__tel--icon {
    display: inline-block;
    width: 17px;
    height: 16px;
    background-image: url(../images/tel_icon_pink.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.nav__tel--number {
    font-size: 2rem;
    margin-left: 4px;
    color: var(--primary-pink);
    display: inline-block;
}

.nav__tel--time {
    display: block;
    margin-top: 8px;
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--primary-gray);
}

/* ============================= PC Header Navigation ============================= */

@media screen and (min-width: 769px) {
    .header {
        padding: 0 3.3%;
        height: 128px;
    }

    .header__inner {
        width: 100%;
        height: 80px;
        padding: 0 2.9%;
        border-radius: 16px;
    }

    .header__inner::before {
        border-radius: 16px;
    }

    .header__logo img {
        height: 43px;
    }

    .hamburger {
        display: none;
    }

    .header__nav {
        display: none;
    }

    /* PC Navigation */
    .header__list--pc {
        display: block;
    }

    .header__list--pc--item {
        display: flex;
        gap: 2.7vw;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .header__list--pc--item--category {
        position: relative;
    }

    .header__list--pc--item--category .link--item--pc {
        position: relative;
    }

    /* Navigation links styling */
    .link--category--pc,
    .header__list--pc--item--category > a {
        font-family: "shippori-antique";
        font-weight: 500;
        font-size: 1.6rem;
        cursor: pointer;
        padding: 26px 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .link--category--pc:hover,
    .link--category--pc.active,
    .header__list--pc--item--category > a:hover {
        color: var(--primary-pink);
    }

    body.dark-mode .link--category--pc,
    body.dark-mode .header__list--pc--item--category > a {
        color: var(--primary-white);
    }

    body.dark-mode .link--category--pc:hover,
    body.dark-mode .link--category--pc.active,
    body.dark-mode .header__list--pc--item--category > a:hover {
        color: var(--primary-pink);
    }

    /* Dropdown icon (+) */
    .dropdown-icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        position: relative;
        transition: all 0.3s ease;
    }

    .dropdown-icon::before,
    .dropdown-icon::after {
        content: '';
        position: absolute;
        background: currentColor;
        transition: all 0.3s ease;
    }

    .dropdown-icon::before {
        width: 12px;
        height: 1.5px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    .dropdown-icon::after {
        width: 1.5px;
        height: 12px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .link--category--pc:hover .dropdown-icon::after,
    .link--category--pc.active .dropdown-icon::after {
        transform: translateX(-50%) rotate(90deg);
        opacity: 0;
    }

    /* Dropdown menu */
    .header__list--pc--item--list {
        position: fixed;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
        min-width: 160px;
        padding: 16px 0;
        list-style: none;
        z-index: 1001;
        border-radius: 8px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .header__list--pc--item--list::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../images/bg.png');
        opacity: 0.7;
        background-repeat: repeat;
        background-size: 600px 600px;
        border-radius: 8px;
        z-index: -1;
        pointer-events: none;
        transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.dark-mode .header__list--pc--item--list::before {
        background-color: var(--primary-black);
    }

    .header__list--pc--item--list.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .header__list--pc--item--list li {
        margin: 0;
    }

    .header__list--pc--item--list a {
        display: block;
        padding: 6px 24px;
        font-size: 1.6rem;
        font-family: "shippori-antique";
        transition: color 0.3s ease;
    }

    .header__list--pc--item--list a:hover {
        color: var(--primary-pink);
        background: rgba(216, 93, 126, 0.05);
    }
}

/* ============================= Fixed Tel Button ============================= */
.tel {
    position: fixed;
    padding: 16px;
    border-radius: 10px;
    text-align: center;
    bottom: 24px;
    right: var(--contentPadding-sp);
    backdrop-filter: blur(12px);
    z-index: 990;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tel:hover::after {
    background: rgba(216, 93, 126, 0.05);
}

.tel.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.tel::before,
.tel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: -1;
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tel::after {
    background-image: url(../images/bg_lightBeige.png);
    opacity: 0.7;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.06);
}

.tel::before {
    background-image: url('../images/bg.png');
    opacity: 0.5;
    background-repeat: repeat;
    background-size: 600px 600px;
}

body.dark-mode .tel::after {
    background-color: var(--primary-black);
}

.tel__numBox {
    width: 20px;
    height: 20px;
}

.tel__icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(../images/tel_icon_pink.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: filter 0.6s ease;
}

body.dark-mode .tel__icon {
    filter: brightness(0) invert(1);
}

.tel__number,
.tel__time {
    display: none;
}

/* ============================= PC Tel Button ============================= */

@media screen and (min-width: 768px) {
    .tel {
        padding: 16px 28px 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        right: 3.3%;
    }

    .tel__numBox {
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .tel__icon {
        width: 20px;
        height: 20px;
        padding-top: 8px;
        background-image: url(../images/tel_icon.svg);
    }

    .tel__number {
        display: inline-block;
        color: var(--primary-black);
        line-height: 1;
        font-size: 2rem;
        transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tel__time {
        font-size: 1.4rem;
        line-height: 1.4;
        display: block;
        transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.dark-mode .tel__number,
    body.dark-mode .tel__time {
        color: var(--primary-white);
    }
}

/* ============================= Key Visual ============================= */
.kv__frame {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.kv__inner {
    position: relative;
    margin: 0 auto;
    width: calc(100% - var(--contentPadding-sp) * 2);
    height: calc(100vh - 128px);
    overflow: hidden;
    border-radius: 20px;
}

.kv__inner:nth-child(2) {
    position: absolute;
    top: 0;
    right: 50%;
    translate: calc(-50% - 10px) 0;
}

.kv__inner:nth-child(3) {
    position: absolute;
    top: 0;
    left: 50%;
    translate: calc(50% + 10px) 0;
}

.kv__item {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 50%;
    translate: 50%;
    top: 0;
    margin: 0 auto;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.kv__item.active,
.kv__item.sliding,
.kv__item.sliding-out,
.kv__item.next {
    opacity: 1;
    visibility: visible;
}

.kv__item.active {
    z-index: 2;
}

.kv__item.sliding {
    animation: slideIn 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    z-index: 3;
}

.kv__item.sliding-out {
    animation: slideOut 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    z-index: 2;
}

@keyframes slideIn {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.kv__item.next,
.kv__item.sliding {
    opacity: 1;
}

.kv__item .img {
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 1.6s cubic-bezier(0.33, 1, 0.68, 1);
    transform-origin: 0 0;
    border-radius: 20px;
}

.kv__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    object-position: center;
}

.kv__item .img span {
    display: block;
    z-index: 1;
    translate: 0px 0px;
    transition: all 0.1s linear;
    width: 100%;
    height: calc(100svh - 72px);
    aspect-ratio: auto;
}

.kv__item.next {
    opacity: 1;
    visibility: visible;
    z-index: 3;
    transform: translateX(100%);
}

.kv__titleBox {
    position: absolute;
    writing-mode: vertical-rl;
    align-items: flex-end;
    z-index: 10;
    top: 10%;
    left: 1.8%;
    color: var(--primary-white);
}

.kv__title--txt {
    display: block;
    font-family: "shippori-antique";
    font-size: 3.4rem;
    line-height: 1;
    margin-right: 12px;
    white-space: nowrap;
    letter-spacing: 0.06em;
}

/* ============================= PC Key Visual ============================= */
@media screen and (min-width: 769px) {
    .kv__inner {
        width: calc(100% - 3.3% * 2);
        height: calc(100vh - 152px);
        border-radius: 30px;
    }

    .kv__inner:nth-child(2) {
        right: 51%;
        translate: calc(-50% - 10px) 0;
    }

    .kv__inner:nth-child(3) {
        left: 51%;
        translate: calc(50% + 10px) 0;
    }


    .kv__item .img {
        border-radius: 30px;
    }

    .kv__item img {
        border-radius: 30px;
    }

    .kv__item .img span {
        height: calc(100svh - 128px);
    }

    .kv__titleBox {
        top: 50%;
        transform: translateY(-50%);
        left: 5.3%;
    }

    .kv__title--txt {
        font-size: 4.4rem;
        line-height: 1;
        margin-right: 24px;
        letter-spacing: 0.08em;
    }
}

/* ============================= News Section ============================= */
.section--news {
    padding: 64px var(--contentPadding-sp);
}

.news--icon {
    position: absolute;
    display: inline-block;
    right: var(--contentPadding-sp);
    width: 66px;
    height: 15px;
    background-image: url(../images/note_icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.news__content {
    margin-top: 48px;
}

.news__content--item {
    border-bottom: 1px solid var(--primary-gray);
}

.news__link {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    transition: background-color 0.4s;
    display: flex;
    flex-direction: column;
}

.news__meta {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.news__content--item--date {
    font-size: 1.4rem;
    color: var(--primary-gray);
    flex-shrink: 0;
}

.news__content--item--title {
    font-size: 1.6rem;
}

.news__loading,
.news__error {
    text-align: center;
    padding: 40px 0;
    color: var(--primary-gray);
}

/* ============================= PC News Section ============================= */

@media screen and (min-width: 769px) {
    .section--news {
        padding: 80px var(--contentPadding-pc) 120px;
        position: relative;
    }

    .section--news .news__title_content {
        position: absolute;
        top: 80px;
        left: var(--contentPadding-pc);
    }

    .news--icon {
        position: absolute;
        width: 80px;
        height: 18px;
        bottom: 120px;
        left: var(--contentPadding-pc);
    }

    .news__content {
        display: flex;
        flex-direction: column; /* 項目は縦に並べる */
        align-items: flex-end; /* 子要素 (news__content--item) を右寄せにする */
        margin-top: 0;
    }

    .news__link {
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 24px 0;
    }

    .news__content--item {
        width: 56.3%; /* 56.2% または 56.3% を適用 */
        display: flex;
    }

    .news__meta {
        margin-bottom: 0;
        width: 105px;
        flex-shrink: 0;
    }

    .news__content--item--date {
        font-size: 1.6rem;
    }

    .news__content--item--title {
        flex-grow: 1;
    }

}

/* ============================= Feature Section ============================= */
.section--feature {
    padding: 32px var(--contentPadding-sp) 64px;
}

.topic--feature {
    line-height: 1.2;
}

.topic--feature .num {
    font-family: "lato";
    font-size: 3.4rem;
    font-weight: 400;
}

.feature__contentBox {
    margin-top: 40px;
}

.feature__content {
    margin-top: 64px;
}

.feature__content:first-of-type {
    margin-top: 0;
}

.feature__content--imgBox {
    position: relative;
}

.feature__content--img {
    width: 100%;
    height: 32.9vh;
    object-fit: cover;
    border-radius: 10px;
}

/* 2. num をアイコン全体を覆うコンテナとして定義 */
.feature__content--num {
    /* 【位置指定】imgBoxの右下 10px の位置に配置 */
    position: absolute;
    bottom: 10px; 
    right: 10px;
    z-index: 100;
    width: 60px;  
    height: 60px; 
    display: flex; /* Flexboxで中の数字（テキスト）を中央に寄せる */
    align-items: center;
    justify-content: center;
    font-size: 1.8rem; 
    line-height: 1;
    color: var(--primary-gray);
}

.feature__content--num::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: -1; /* 数字の背後に隠す */
    background-image: url(../images/sakura_icon.svg);
    background-size: 85%; /* 桜アイコンを num 要素の85%サイズに縮小/調整 */
    background-repeat: no-repeat;
    background-position: center; /* 桜アイコンを num 要素の中心に配置 */
}

.feature__content--titleBox {
    display: flex;
    align-items: center;
    margin-top: 32px;
}

.feature__content--icon {
    flex-shrink: 0;
}

.feature__content--icon img {
    width: 68px;
    height: 68px;
}

.feature__content--title {
    font-family: "shippori-antique";
    font-size: 2rem;
    line-height: 1.6;
    font-weight: 400;
    margin-left: 8px;
}

.feature__content--txt {
    margin-top: 24px;
}

/* ============================= PC Feature Section ============================= */
@media screen and (min-width: 769px) {
    .section--feature {
        padding: 40px var(--contentPadding-pc) 120px;
    }

    .feature__content--reverse {
        flex-direction: row-reverse;
    }

    .feature__contentBox {
        margin-top: 80px;
    }

    .feature__content {
        margin-top: 80px;
        display: flex;
        align-items: center;
        gap: 4.1vw;
    }

    .feature__content--imgBox {
        width: 39.5vw;
    }

    .feature__content--img {
        height: 37.7vh;
        object-fit: cover;
        border-radius: 16px;
    }

    .feature__content--txtBox {
        width: 39.5vw;
    }

    .feature__content--titleBox {
        margin-top: 0;
    }

    .feature__content--title {
        font-size: 2.4rem;
        margin-left: 16px;
    }
}

/* ============================= Product Section ============================= */
.section--product {
    padding: 64px var(--contentPadding-sp);
    background-image: url(../images/bg_beige.png);
}

.product__tab--list {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 5.3vw;
    flex-wrap: wrap;
    margin-top: 56px;
    line-height: 1;
}

.product__tab {
    display: inline-block;
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--primary-black);
    padding-bottom: 8px;
    font-family: "shippori-antique";
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 17.6vw;
}

.product__tab:hover {
    color: var(--primary-pink);
    background: rgba(216, 93, 126, 0.05);
}

.product__content {
    margin-top: 40px;
    position: static; /* position: relative; を解除 */
    min-height: auto; /* min-height: 500px; を解除 */
}

.product__item {
    opacity: 1; /* 常に表示 */
    visibility: visible; /* 常に表示 */
    position: static; /* position: absolute; を解除し、縦に並ぶようにする */
    top: auto;
    left: auto;
    width: 100%;
    transition: none; /* トランジションを解除 */
    pointer-events: auto;
    padding-top: 64px; /* 上部に区切りとなる余白 */
}

.product__item:first-of-type {
    padding-top: 0;
}

.product__imgBox {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: 32.9vh;
    min-height: 200px;
    border-radius: 10px;
    position: relative;
}

.product__imgBox span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.product__imgBox span.current {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2;
}

.product__imgBox span.sliding,
.product__imgBox span.sliding-out,
.product__imgBox span.next {
    opacity: 1;
    visibility: visible;
}

.product__imgBox span.sliding {
    animation: slideIn 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    z-index: 3;
}

.product__imgBox span.sliding-out {
    z-index: 2;
}

.product__imgBox span.next {
    opacity: 1;
    visibility: visible;
    z-index: 3;
    transform: translateX(100%);
}

.product__imgBox img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product__txtContainer {
    margin-top: 32px;
}

.product__titleBox {
    display: flex;
    align-items: baseline;
    position: relative;
}

.product__title {
    font-family: "shippori-antique";
    font-size: 2.4rem;
    font-weight: 500;
}

.product__subTitle {
    display: inline-block;
    margin-left: 16px;
    font-size: 1.4rem;
    font-weight: 500;
}

.product__titleBox::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background-color: var(--primary-gray);
    opacity: 0.5;
}

.product__txtBox {
    margin-top: 32px;
}

.product__menu {
    display: flex;
    font-family: "shippori-antique";
    font-weight: 500;
}

.product__menuTitle {
    position: relative;
}

.product__menu .line {
    flex-grow: 1;
    height: 1px;
    margin: 0 4px;
    padding-top: 0.9em;
    border-bottom: 1px dotted var(--primary-gray);
}

.product__price {
    display: inline-block;
    margin-left: 4px;
    width: 72.6%;
}

.product__detail {
    margin-top: 16px;
}

.product__detailTxt {
    display: block;
    position: relative;
    padding-left: 1.6em;
    font-size: 1.6rem;
}

.product__detailTxt::before {
    content: "・";
    font-size: 1.6rem;
    color: var(--primary-black);
    margin-right: 8px;
    width: 8px;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.6;
}

/* ============================= PC Product Section ============================= */
@media screen and (min-width: 769px) {
    .section--product {
        position: relative;
        padding: 120px var(--contentPadding-pc);
        display: flex; 
        gap: 4.1vw; /* タブリストとコンテンツ間のガター（1カラム分） */
    }

    .section--product > .topic__box {
        position: absolute;
        top: 120px;
        left: var(--contentPadding-pc);
    }

    /* タブリスト全体を縦並びに変更 */
    .product__tab--list {
        display: block; 
        flex-wrap: nowrap;
        width: 7.2vw;
        flex-shrink: 0;
        flex-grow: 0;
        margin-top: 170px; /* タイトル分を避ける */
        position: sticky; 
        top: 170px; /* 画面上端から120pxの位置で固定を開始 */
        height: fit-content; 
    }
    
    .product__tab {
        width: 100%; /* 親要素(45px)に合わせて幅いっぱい */
        text-align: left;
        padding-bottom: 12px;
        margin-bottom: 16px;
        font-family: "shippori-antique";
        padding: 8px 0;
        border-bottom: 1px solid var(--primary-black);
        font-size: 1.6rem;
    }

    .product__content {
        width: auto;
        flex-grow: 1;
        margin-top: 170px;
        display: grid; /* ⭐ Gridに変更 */
        grid-template-columns: 1fr 1fr; /* ⭐ 1fr 1fr で2等分 */
        gap: 4.1vw; /* ⭐ grid-gap (row-gap, column-gap) を設定 */
    }

    .product__item {
        padding-top: 80px; 
    }
    
    .product__content > .product__item:nth-child(-n + 2) {
        padding-top: 0;
    }
    
    .product__imgBox {
        height: 250px; /* PC版に適した固定高さを設定 */
        min-height: auto;
        border-radius: 14px;
    }

    .product__imgBox img {
        border-radius: 14px;
    }
}

/* ============================= Work Section ============================= */
.section--work {
    position: relative;
    margin: 0;
    padding: 0 0 64px;
    overflow: hidden;
}

.work__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/work_bg.png);
    background-size: cover;
    background-position: left;
    z-index: 1;
}

.work__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.work__content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.work__textArea {
    padding: 64px var(--contentPadding-sp);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.work__textArea .topic__box {
    color: var(--primary-white);
    text-align: center;
}

.work__textArea .topic {
    color: var(--primary-white);
}

.work__textArea .subTopic {
    color: var(--primary-white);
}

.btn__work {
    display: inline-block;
    margin-top: 56px;
    position: relative;
    padding-right: 22px;
    color: var(--primary-white);
}

.btn__work::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 14px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../images/link_icon_w.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 8px;
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn__work:hover::after {
    filter: invert(51%) sepia(21%) saturate(1508%) hue-rotate(294deg) brightness(89%) contrast(88%);
}

.btn__work::before {
    content: '';
    position: absolute;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background-color: var(--primary-white);
}

.work__slideshow {
    flex: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.work__slideshow--track {
    display: flex;
    gap: 16px;
    animation: scrollHorizontal 60s linear infinite; /* ⭐ scrollVertical → scrollHorizontal */
    will-change: transform;
}

.work__slideshow--item {
    flex-shrink: 0;
    width: 259px;
    height: 313px;
    border-radius: 8px;
    overflow: hidden;
}

.work__slideshow--item:first-child {
    margin-left: var(--contentPadding-sp);
}

.work__slideshow--item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* SP版 横スクロールアニメーション（12枚分） */
@keyframes scrollHorizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1 * ((259px + 16px) * 6))); /* ⭐ 12 → 6 に戻す */
    }
}

/* PC版 縦スクロールアニメーション（12枚すべて表示） */
@keyframes scrollVertical {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-1 * ((34vh + 40px) * 6))); /* ⭐ 12 → 6 に変更（シームレスループ） */
    }
}

/* ============================= PC Work Section ============================= */
@media screen and (min-width: 769px) {
    .section--work {
        margin: 0;
        padding: 0 var(--contentPadding-pc);
        height: 100vh;
        min-height: 720px;
    }

    .work__content {
        flex-direction: row;
        gap: 0; /* gap を削除 */
        height: 100%;
        min-width: 0;
        padding-left: 11.3vw;
    }

    .work__textArea {
        order: 2;
        height: 100%;
        justify-content: center;
        padding: 0;
        text-align: left;
        align-items: flex-start;
        flex-grow: 1;
        min-width: 0;
        margin-left: 11.4vw;/* ⭐ 左側に11.4vwのマージン */
    }

    .work__textArea .topic__box {
        text-align: left;
    }

    .work__slideshow {
        order: 1;
        width: 33.9vw;
        height: 100%;
        overflow: visible;
        display: flex; 
        justify-content: flex-start; 
        align-items: center;
        min-width: 33.9vw;
        flex-shrink: 0;
    }

    .work__slideshow--track {
        flex-shrink: 0;
        width: 33.9vw;
        flex-direction: column;
        gap: 40px;
        animation: scrollVertical 120s linear infinite; /* ⭐ 60s → 120s （12枚分の時間） */
    }

    .work__slideshow--item {
        flex-shrink: 0;
        width: 33.9vw; /* ⭐ 画像の幅を直接指定 */
        height: 34vh;
        margin: 0;
        border-radius: 14px;
        overflow: hidden;
    }

    .work__slideshow--item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 14px;
    }

    .work__slideshow--item:first-child {
        margin-left: 0;
        margin-top: 40px;
    }

    .btn__work {
        margin-top: 48px;
        font-size: 1.8rem;
    }
}

/* ============================= Flow Section ============================= */
.section--flow {
    padding: 64px var(--contentPadding-sp);
}

.flow__box {
    margin-top: 56px;
}

.flow__box--item {
    display: flex;
    gap: 6.1%;
    margin-top: 40px;
}

.flow__box--itemNum {
    flex-shrink: 0;
    width: 66px;
    position: relative;
    min-height: calc(66px + 66px / 2 + 10px);
}

.flow__box--itemNum span {
    display: block;
    position: absolute;
    z-index: 10;
    top: calc(54px / 2 + 2px);
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

.flow__box--itemNum::before {
    content: '';
    position: absolute;
    width: 66px;
    height: 54px;
    top: 0;
    left: 0;
    background-image: url(../images/sakura_icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.flow__box--itemIcon {
    position: absolute;
    width: 38px;
    height: 38px;
    z-index: 20;
    right: calc((38px - 66px) / 2);
    right: 0;
    top: 40px;
}

.flow__box--itemTitle {
    font-family: "shippori-antique";
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.1px;
}

.flow__box--itemDetail {
    display: block;
    font-size: 1.4rem;
    margin-top: 16px;
}

/* ============================= PC Flow Section ============================= */
@media screen and (min-width: 769px) {
    .section--flow {
        padding: 120px var(--contentPadding-pc);
        display: flex;
        gap: 7.2vw;
    }

    .section--flow .topic__box {
        width: 21.8vw;
        flex-shrink: 0; /* ⭐ 縮小を禁止する */
        flex-grow: 0;   /* ⭐ 拡大を禁止する */
    }

    .topic--flow {
        white-space: nowrap; /* ⭐ topic (h3) のみ折り返し禁止 */
    }

    .flow__box {
        margin-top: 0;
    }

    .flow__box--item {
        display: flex;
        gap: 4.1vw;
        margin-top: 80px;
    }

    .flow__box--item:first-of-type {
        margin-top: 0;
    }

    .flow__box--itemNum {
        width: 135px;
        position: relative;
    }

    .flow__box--itemNum span {
        top: calc(103px / 2 + 2px);
        left: 40px;
        transform: translate(0, -50%);
        font-size: 2rem;
        line-height: 1;
    }

    .flow__box--itemNum::before {
        width: 105px;
        height: 103px;
    }

    .flow__box--itemIcon {
        width: 63px;
        height: 68px;
        z-index: 20;
        right: calc((38px - 66px) / 2);
        right: 0;
        top: 48px;
    }

    .flow__box--itemTitle {
        font-size: 2.4rem;
    }

    .flow__box--itemDetail {
        font-size: 1.6rem;
        margin-top: 24px;
    }
}


/* ============================= Detail Section ============================= */
.section--detail {
    padding: 40px var(--contentPadding-sp) 64px;
    position: relative;
}

.section--detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-black);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

body.dark-mode .section--detail::before {
    opacity: var(--dark-mode-opacity);
}

.section--detail > * {
    position: relative;
    z-index: 1;
}

.detail__box {
    margin-top: 56px;
}

.detail__box--item {
    padding: 24px 0;
    position: relative;
    border-bottom: 1px solid var(--primary-gray);
    transition: border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail__box--item:first-of-type {
    padding-top: 0;
}

.detail__box--itemTitle {
    font-family: "shippori-antique";
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1px;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail__box--itemTxt {
    display: block;
    font-size: 1.4rem;
    margin-top: 16px;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .section--detail .topic,
body.dark-mode .section--detail .subTopic,
body.dark-mode .section--detail .detail__box--itemTitle,
body.dark-mode .section--detail .detail__box--itemTxt,
body.dark-mode .detail__box--item a {
    color: var(--primary-white);
}

body.dark-mode .detail__box--item {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .detail__box--item a:hover {
    color: var(--primary-pink);
}

/* ============================= PC Detail Section ============================= */
@media screen and (min-width: 769px) {
    .section--detail {
        padding: 40px var(--contentPadding-pc) 120px;
        display: flex;
        gap: 7.2vw;
    }

    .section--detail .topic__box {
        width: 21.8vw;
        flex-shrink: 0; /* ⭐ 縮小を禁止する */
        flex-grow: 0;   /* ⭐ 拡大を禁止する */
    }

    .topic--detail {
        white-space: nowrap; /* ⭐ topic (h3) のみ折り返し禁止 */
    }

    .detail__box {
        margin-top: 0;
    }

    .detail__box--item {
        padding: 32px 0;
    }

    .detail__box--item:first-of-type {
        margin-top: 0;
    }

    .detail__box--itemTitle {
        font-size: 2.4rem;
    }

    .detail__box--itemTxt {
        font-size: 1.6rem;
        margin-top: 24px;
    }
}

/* ============================= Philosophy Section ============================= */
.section--philosophy {
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.section--philosophy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-black);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

body.dark-mode .section--philosophy::before {
    opacity: var(--dark-mode-opacity);
}

.section--philosophy > * {
    position: relative;
    z-index: 1;
}

.section--philosophy .topic__box {
    text-align: center;
}

.section--philosophy img {
    margin-top: 56px;
    width: 100vw;
    height: 280px;
    object-fit: cover;
}

.philosophy__title {
    margin-top: 56px;
    position: relative;
    padding-left: 12px;
}

.philosophy__bg--right {
    position: absolute;
    background-image: url(../images/philosopht_sakura_right.svg);
    top: 0;
    right: -20px;
    width: 15.7px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.philosophy__bg--left {
    position: absolute;
    background-image: url(../images/philosopht_sakura_left.svg);
    bottom: 0;
    left: -42px;
    width: 26.5px;
    height: 41.6px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.philosophy__title p {
    font-family: "shippori-antique";
    font-size: 2.8rem;
    font-weight: 500;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.philosophy__txtBox {
    margin-top: 56px;
    padding: 0 var(--contentPadding-sp);
    text-align: left;
}

.philosophy__txtBox p {
    margin-top: 16px;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.philosophy__txtBox p:first-of-type {
    margin-top: 0;
}

body.dark-mode .section--philosophy .topic,
body.dark-mode .section--philosophy .subTopic,
body.dark-mode .section--philosophy .philosophy__title p,
body.dark-mode .section--philosophy .philosophy__txtBox,
body.dark-mode .section--philosophy .philosophy__txtBox p {
    color: var(--primary-white);
}

/* ============================= PC Philosophy Section ============================= */
@media screen and (min-width: 769px) {
    .section--philosophy {
        padding: 120px 0;
    }

    .section--philosophy img {
        margin-top: 80px;
        width: 100vw;
        height: 50vh;
        object-fit: cover;
    }

    .philosophy__title {
        width: 68.7vw;
        text-align: left;
        margin-top: 120px;
    }

    .philosophy__title p {
        font-size: 3.8rem;
    }

    .philosophy__bg--right {
        top: 0;
        left: 330px;
        width: 26px;
        height: 40px;
    }

    .philosophy__bg--left {
        bottom: 0;
        left: -80px;
        width: 45px;
        height: 70px;
    }

    .philosophy__txtBox {
        text-align: left;
        margin-top: 80px;
        padding: 0 15.6vw 0 44.7vw;
    }

    .philosophy__txtBox p {
        margin-top: 24px;
        font-size: 1.8rem;
        line-height: 2.2;
    }
}

/* ============================= Message Section ============================= */
.section--message {
    padding: 40px var(--contentPadding-sp) 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.section--message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-black);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

body.dark-mode .section--message::before {
    opacity: var(--dark-mode-opacity);
}

.section--message > * {
    position: relative;
    z-index: 1;
}

.message__border {
    border: 1px solid var(--primary-gray);
    border-radius: 8px;
    padding: 40px var(--contentPadding-sp);
    transition: border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .message__border {
    border-color: var(--primary-white);
}

.section--message .topic__box {
    text-align: center;
}

.message__people {
    text-align: right;
}

.message__people .people__img {
    width: 100%;
    height: 30vh;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 56px;
}

.message__people p {
    display: block;
    margin-top: 16px;
    font-size: 1.4rem;
    line-height: 1;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.message__people .sign__img {
    width: 80px;
    height: 20px;
    object-fit: cover;
    margin-top: 16px;
}

.message__txtBox {
    display: block;
    margin-top: 40px;
    text-align: left;
}

.message__title {
    font-family: "shippori-antique";
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.6;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.message__txt {
    display: block;
    margin-top: 24px;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .section--message .topic,
body.dark-mode .section--message .subTopic,
body.dark-mode .section--message .message__people p,
body.dark-mode .section--message .message__title,
body.dark-mode .section--message .message__txt {
    color: var(--primary-white);
}

/* ============================= Message Section ============================= */
@media screen and (min-width: 769px) {
    .section--message {
        padding: 40px 15.6vw 120px;
    }

    .message__border {
        border-radius: 16px;
        padding: 80px 7.2vw;
    }

    .topic__container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 80px;
        gap: 7.2vw;
    }

    .message__people {
        width: 21.8vw;
        /* text-align: left;
        align-items: flex-start; */
    }

    .message__people .people__img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 10px;
        margin-top: 0;
    }

    .message__people p {
        margin-top: 24px;
    }

    .message__people .sign__img {
        width: 105px;
        height: 26px;
    }

    .message__txtBox {
        width: 25vw;
        margin-top: 0;
    }

    .message__title {
        font-size: 3rem;
    }

    .message__txt {
        margin-top: 24px;
        transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ============================= Store Section ============================= */
.section--store {
    padding: 40px var(--contentPadding-sp) 64px;
    position: relative;
}

.section--store::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-black);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

body.dark-mode .section--store::before {
    opacity: var(--dark-mode-opacity);
}

.section--store > * {
    position: relative;
    z-index: 1;
}

.store__box {
    margin-top: 56px;
}

.store__box--item {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    border-bottom: 1px solid rgba(45, 45, 45, 0.4);
    transition: border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.store__box--item:first-of-type {
    padding-top: 0;
}

.store__box--itemTitle {
    line-height: 1;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.store__box--itemTxt {
    display: block;
    margin-top: 16px;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.store__box--itemTxt--link {
    position: relative;
}

.store__box--itemTxt--link::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 14px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../images/link_icon_b.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 8px;
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.store__box--itemTxt--link:hover::after {
    filter: invert(51%) sepia(21%) saturate(1508%) hue-rotate(294deg) brightness(89%) contrast(88%);
}

body.dark-mode .section--store .topic,
body.dark-mode .section--store .subTopic,
body.dark-mode .section--store .store__box--itemTitle,
body.dark-mode .section--store .store__box--itemTxt,
body.dark-mode .store__box--item a {
    color: var(--primary-white);
}

body.dark-mode .store__box--item {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .store__box--item a:hover {
    color: var(--primary-pink);
}

body.dark-mode .store__box--itemTxt--link::after {
    filter: brightness(0) invert(1);
}

/* ============================= PC Store Section ============================= */
@media screen and (min-width: 769px) {
    .section--store {
        padding: 40px var(--contentPadding-pc) 120px;
        display: flex;
        gap: 7.2vw;
    }

    .section--store .topic__box {
        width: 21.8vw;
        flex-shrink: 0; /* ⭐ 縮小を禁止する */
        flex-grow: 0;   /* ⭐ 拡大を禁止する */
    }

    .topic--store {
        white-space: nowrap; /* ⭐ topic (h3) のみ折り返し禁止 */
    }

    .store__box {
        margin-top: 0;
        width: 100%;
    }

    .store__box--item {
        padding: 32px 0;
        flex-direction: row;
    }

    .store__box--item:first-of-type {
        margin-top: 0;
    }

    .store__box--itemTitle {
        line-height: 1.8;
        display: inline-block;
        width: 14.5vw;
        flex-shrink: 0; /* タイトル幅を固定 */
        flex-grow: 0;
    }

    .store__box--itemTxt {
        display: inline-block;
        margin-top: 0;
        min-width: 0;
    }

    .store__box--itemTxt--link {
        display: block;
    }
}

/* ============================= FAQ Section ============================= */
.section--faq {
    padding: 64px var(--contentPadding-sp);
    position: relative;
}

.section--faq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-black);
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

body.dark-mode .section--faq::before {
    opacity: var(--dark-mode-opacity);
}

.section--faq > * {
    position: relative;
    z-index: 1;
}

.faq__list--box {
    margin-top: 64px;
}

.faq__right > .faq__list--box:first-of-type {
    margin-top: 56px;
}

.faq__left {
    display: none;
}

.faq__right {
    width: 100%;
}

.faq__list--title {
    font-family: "shippori-antique";
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1px;
    margin-bottom: 8px;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-accordion__details {
    border-bottom: 1px solid var(--primary-gray);
    transition: border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-accordion__summary {
    display: flex;
    align-items: baseline;
    padding: 24px 36px 24px 0;
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
    transition: color 0.4s ease, color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-accordion__summary p {
    display: inline-block;
}

.c-accordion__summary .Q {
    font-size: 1.8rem;
    line-height: 1.2;
    width: 32px;
}

.c-accordion__summary::-webkit-details-marker {
    display: none;
}

.c-accordion__summary:hover {
    color: var(--primary-pink);
}

.c-accordion__summary .icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-image: url(../images/sakura_icon.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.c-accordion__summary .icon::before,
.c-accordion__summary .icon::after {
    content: '';
    position: absolute;
    background: var(--primary-gray);
    transition: transform 0.4s ease;
}

.c-accordion__summary .icon::before {
    width: 16px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c-accordion__summary .icon::after {
    width: 2px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c-accordion__details[open] .c-accordion__summary .icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.c-accordion {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.c-accordion__details[open] .c-accordion {
    grid-template-rows: 1fr;
}

.c-accordion__inner {
    overflow: hidden;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-accordion__details[open] .c-accordion__inner {
    padding: 0 0 24px 32px;
}

body.dark-mode .section--faq .topic,
body.dark-mode .section--faq .subTopic,
body.dark-mode .section--faq .faq__list--title,
body.dark-mode .section--faq .c-accordion__summary,
body.dark-mode .section--faq .c-accordion__inner {
    color: var(--primary-white);
}

body.dark-mode .c-accordion__details {
    border-bottom-color: var(--primary-white);
}

body.dark-mode .c-accordion__summary .icon::before,
body.dark-mode .c-accordion__summary .icon::after {
    background: var(--primary-white);
}

/* ============================= PC FAQ Section ============================= */

@media screen and (min-width: 769px) {
    .section--faq {
        position: relative;
        padding: 120px var(--contentPadding-pc);
        display: flex;
        gap: 7.2vw;
    }

    .section--faq > .topic__box {
        position: absolute;
        top: 120px;
        left: var(--contentPadding-pc);
    }

    /* タブリスト全体を縦並びに変更 */
    .faq__left {
        display: block; 
        flex-wrap: nowrap;
        flex-shrink: 0;
        flex-grow: 0;
        margin: 170px 0 0 0; /* ⭐ margin-top のみに変更 */
        padding: 0; /* ⭐ 追加：デフォルトのpadding削除 */
        list-style: none; /* ⭐ 追加：リストマーカー削除 */
        position: sticky; 
        top: 170px;
        width: 21.8vw;
        height: fit-content; 
    }
    
    .faq__left--stickyItem {
        display: block;
        width: 100%; /* ⭐ 14.5vw → 100% に変更（親要素に合わせる） */
        text-align: left;
        padding: 8px 0;
        cursor: pointer;
        border: none;
        background: transparent;
        border-bottom: 1px solid var(--primary-black);
        font-family: "shippori-antique";
        transition: all 0.4s ease;
    }

    .faq__left--stickyItem:hover {
        color: var(--primary-pink);
        background: rgba(216, 93, 126, 0.05);
    }

    .faq__right {
        width: auto;
        flex-grow: 1;
        margin-top: 180px;
    }

    .faq__list--box {
        margin-top: 80px;
    }

    .faq__right > .faq__list--box:first-of-type {
        margin-top: 0;
    }

    .c-accordion__summary {
        padding: 32px 45px 32px 0;
    }

    .c-accordion__details[open] .c-accordion__inner {
        padding: 0 0 32px 32px;
    }

    .c-accordion__summary {
        font-size: 1.8rem;
    }

    .c-accordion__summary .icon {
        width: 45px;
        height: 45px;
    }
}
/* ============================= Contact Section ============================= */
.section--contact {
    text-align: center;
    padding: 32px var(--contentPadding-sp) 24px;
    color: var(--primary-white);
}

.contact__bg {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-image: url(../images/contact_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 56px var(--contentPadding-sp);
}

.section--contact .topic__box {
    text-align: center;
}

.section--contact .subTopic {
        color: var(--primary-white);
    }

.contact--txtBox {
    margin-top: 120px;
}

.contact__tel--link {
    display: inline-block;
    font-size: 3rem;
    font-weight: 500;
    color: var(--primary-white);
    transition: transform 0.3s ease;
}

.contact__tel--txt {
    font-size: 1.4rem;
    margin-top: 24px;
}

/* ============================= PC Contact Section ============================= */
@media screen and (min-width: 769px) {
    .section--contact {
        text-align: left;
        padding: 40px 3.3% 80px;
        color: var(--primary-white);
    }

    .section--contact .topic__box {
        text-align: left;
    }

    .contact__bg {
        width: 100%;
        height: 100%;
        padding: 120px 100px;
        border-radius: 30px;
    }

    .contact__tel--link {
        font-size: 4rem;
        padding: 0;
    }

    .contact__tel--txt {
        font-size: 1.6rem;
    }
}

/* ============================= Footer ============================= */
.section--footer {
    padding: 0 var(--contentPadding-sp) 24px;
}

.footer__left {
    display: none;
}

.footer__right {
    text-align: center;
}

.footer__right img {
    width: 152px;
    height: 36px;
    padding-right: 8px;
}

.footer__right small {
    display: block;
    font-size: 1rem;
    opacity: 0.7;
    margin-top: 8px;
}

/* ============================= PC Footer ============================= */
@media screen and (min-width: 769px) {
    .section--footer {
        padding: 0 var(--contentPadding-pc) 40px;
        display: flex;
        flex-direction: column; /* ⭐ 縦並びに変更 */
        gap: 0; /* ⭐ 間隔なし */
    }

    /* 上側：footer__left */
    .footer__left {
        display: block;
        width: 100%;
    }

    .footer__listBox {
        width: 100%;
    }

    .footer__list {
        display: flex;
        gap: 7.2vw; /* ⭐ リストアイテム間の間隔 */
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .footer__list--item {
        width: 14.5vw; /* ⭐ 各カテゴリの幅 */
        flex-shrink: 0;
    }

    .link--category {
        display: block;
        font-family: "shippori-antique";
        font-size: 1.6rem;
        color: var(--primary-gray);
        margin: 0 0 16px;
        font-weight: 500;
    }

    .link--itemBox {
        display: grid;
        grid-template-columns: 7.2vw 7.2vw; /* ⭐ 2列グリッド */
        gap: 16px 0; /* ⭐ 縦の間隔16px、横の間隔0 */
    }

    /* ⭐ 2番目（ご利用案内）と3番目（さくら堂について）のリンクボックスを1列にする */
    /* nth-child(2) -> ご利用案内 */
    /* nth-child(3) -> さくら堂について */
    .footer__list--item:nth-child(2) .link--itemBox,
    .footer__list--item:nth-child(3) .link--itemBox {
        grid-template-columns: 1fr; /* 1列に上書き */
    }
    
    .footer__list--item:nth-child(2) .link--itemBox .link--item,
    .footer__list--item:nth-child(3) .link--itemBox .link--item {
        width: 100%; /* 1列表示の場合、幅を親要素に合わせる（fit-contentから変更） */
    }

    .link--itemBox .link--item {
        display: block;
        font-size: 1.6rem;
        border: none;
        padding-bottom: 4px;
        width: fit-content;
    }

    /* 施工実績とお知らせ（リンクのみ） */
    .footer__list--item > .link--item {
        display: block;
        font-size: 1.6rem;
        border: none;
        padding: 8px 0;
        width: fit-content;
    }

    .footer__list--item > .link--item:first-child {
        padding-top: 0;
    }

    /* 下側：footer__right */
    .footer__right {
        width: 100%;
        text-align: right;
        margin-top: 0;
    }

    .footer__right img {
        width: 204px;
        height: 48px;
    }

    .footer__right small {
        margin-top: 16px;
        font-size: 1.2rem;
    }
}
/* ============================= Keyframes ============================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}