/* ======================================================================
   page.css — 固定ページ・404 ページ専用
   ====================================================================== */

/* --- 汎用固定ページ（旧 page.css） --- */
main.p-contact{
    padding: 5.75rem 0 6rem;
    @media (max-width: 768px) {
        padding: 4rem 0 4.125rem;
    }
    & .p-contact__sectionTitle {
        padding-bottom: .75rem;
        color: var(--color-main04);
        font-weight: 700;
    }
    & .p-contact__addressBlock {
        display: inline-block;
        padding: 1rem;
        background: #f5f5f5;
        @media (max-width: 768px) {
            margin-bottom: 2rem;
            padding: 1.5rem 0 1.75rem;
        }
    }
    & .p-contact__addressInner {
        text-align: left;
    }
    & .p-contact__addressLine {
        padding-bottom: 0!important;
        font-size: 0.9375rem!important;
        font-weight: 500;
        line-height: calc(26 / 15);
        letter-spacing: 0.05em;
        color: #191c35;
        &:last-child {
            margin-bottom: 0;
        }
    }
    & .l-inner {
        max-width: 750px;
    }
    & .wpcf7 {
        max-width: 750px;
    }
    & .p-contact__items {
        display: flex;
        gap: 1.875rem;
        @media (max-width: 768px) {
            flex-direction: column;
            gap: 0;
            margin-bottom: 1rem;
        }
        & .p-contact__item {
            width: 50%;
            @media (max-width: 768px) {
                width: 100%;
            }
        }
    }
    & .p-contact__item {
        &:not(:last-of-type) {
            margin-bottom: 1.25rem;
        }
        + p {
            text-align: center;
        }
        &.address {
            display: flex;
            flex-wrap: wrap;
            /* row-gap: 1.25rem; */
            @media (max-width: 768px) {
                /* flex-direction: column; */
                row-gap: .5rem;
            }
            p {
                @media (max-width: 768px) {
                    flex-direction: row;
                }
                &:first-of-type {
                    display: block;
                    width: 100%;
                }
                &:nth-of-type(2) {
                    @media (max-width: 768px) {
                        display: flex;
                    }
                }
                &:last-of-type {
                    display: flex;
                    width: auto;
                    margin: 0 5px;
                    @media (max-width: 768px) {
                        width: auto
                    }
                }
                > span.mark {
                    font-size: 1.25rem;
                    align-content: center;
                }
            }
            span.wpcf7-form-control-wrap {
                width: 100%;
                @media (max-width: 768px) {
                    width: auto;
                }
            }
        }
        & .wpcf7-select {
            display: block;
            @media (max-width: 768px) {
                width: 100%;
            }
        }
        p {
            label {
                display: inline-block;
                margin: 0 1.25rem .25rem 0;
                align-content: center;
                color: var(--color-main04);
                font-weight: 700;
                @media (max-width: 768px) {
                    width: auto;
                    margin-right: 0;
                    margin-bottom: .5rem;
                }
                &.required {
                    > span {
                        position: relative;
                        color: var(--color-main04);
                        font-weight: 700;
                        &::after {
                            position: absolute;
                            content: "必須";
                            top: 50%;
                            right: -55px;
                            transform: translateY(-50%);
                            padding: .25rem .375rem;
                            border-radius: .625rem;
                            font-size: .75rem;
                            line-height: 1;
                            display: block;
                            background: #FF0000;
                            color: var(--color-wh);
                            @media (max-width: 768px) {
                                right: -45px;
                            }
                        }
                    }
                }
                span.subject {
                    color: var(--color-main04);
                    font-weight: 700;
                }
            }
            span.wpcf7-form-control-wrap {
                /* width: calc(100% - 244px); */
                @media (max-width: 768px) {
                    width: 100%;
                }
                label {
                    position: static;
                    &::after {
                        content: none;
                    }
                }
                input[type="text"] ,input[type="tel"],input[type="number"] ,input[type="email"] {
                    width: 100%;
                    height: 50px;
                    padding: 5px;
                    /* background: var(--color-bg); */
                    border: 1px solid #555656;
                    border-radius: 3px;
                    &.postNum {
                        display: block;
                        width: 135px;
                    }
                }
                .wpcf7-list-item {
                    margin: 0;
                    line-height: 1;
                }
                .wpcf7-form-control.wpcf7-radio {
                    display: flex;
                    border: 1px solid #023f73;
                    padding: 1rem .5rem;
                    border-radius: 5px;
                    @media (max-width: 768px) {
                        flex-direction: column;
                    }
                    label {
                        width: auto;
                    }
                }
            }
        }
    }
    input[type="submit"] {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        width: 327px;
        padding: 1.875rem 3.5rem 1.875rem 4rem;
        border: 1px solid #0e1a82;
        background: #fff;
        color: #0e1a82;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.1em;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
        &:hover {
            opacity: 0.85;
        }
    }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    & .wpcf7-not-valid-tip {
        font-size: .875rem;
    }
    .wpcf7-spinner, .wpcf7-response-output {
        display: none!important;
    }
    & .p-contact__btn {
        margin-top: 4.5rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        > p {
            position: relative;
            display: inline-block;
            &::after {
                position: absolute;
                content: "";
                top: 50%;
                right: 2.375rem;
                transform: translateY(-50%);
                width: 21px;
                height: 21px;
                background: url(../images/icon-arrow-right.png) top center / cover no-repeat;
                border-radius: 0;
            }
        }
        &:hover {
            > p {
                &::before {
                    background: var(--color-wh);
                }
                &::after {
                    border-right-color: var(--color-wh);
                    border-bottom-color: var(--color-wh);
                }
            }
        }
    }
    & .p-contact__back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 220px;
        padding: 1rem 1.5rem;
        border: 1px solid #b4b4b4;
        border-radius: 5.625rem;
        color: var(--color-main);
        background: var(--color-wh);
        text-decoration: none;
        transition: .3s ease;
        &:hover {
            background: #f4f4f4;
        }
    }
    & .p-contactAgree__title {
        text-align: center;
        margin-bottom: .625rem;
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-main04);
    }
    & .p-contactAgree__box {
        overflow-y: scroll;
        width: 100%;
        max-width: 700px;
        height: 180px;
        padding: 1.25rem 1.5rem;
        margin: 0 auto;
        border: 1px solid var(--color-dark03);
        h4 {
            margin: 0 0 1.125rem;
            font-size: .9375rem;
        }
        ol {
           padding-left: 1.25rem;
        }
        li {
            font-size: .9375rem;
            font-weight: 500;
            @media (max-width: 768px) {
                font-size: .875rem;
            }
        }
        p {
            padding-bottom: .75rem;
            font-size: .9375rem;
            @media (max-width: 768px) {
                font-size: .875rem;
            }
        }
        & .p-contactAgree__subTitle {
            padding-bottom: 0;
        }
        + p {
            margin-top: .75rem;
            text-align: center;
        }
    }
}

main.p-confirm{
    padding: 5.75rem 0 8.75rem;
    @media (max-width: 768px) {
        padding: 4rem 0 6rem;
    }
    & .p-contact__items, .p-contact__item, .wpcf7-form-control-wrap, .p-contactAgree, .p-contact__sectionTitle {
        display: none;
    }
    & .p-contact__item {
        label {
            span.subject {
                color: var(--color-main04);
                font-weight: 700;
            }
        }
    }
    & .l-inner {
        max-width: 970px;
    }
    & .p-contactConfirm {
        margin-top: 2rem;
    }
    & .p-contactConfirm__items {
        display: flex;
        gap: 1.875rem;
        @media (max-width: 768px) {
            flex-direction: column;
            gap: 0;
        }
        & .p-contactConfirm__row {
            width: 50%;
            border-bottom: 1px solid #878787;
            @media (max-width: 768px) {
                width: 100%;
            }
            &:last-child {
                @media (max-width: 768px) {
                    /* border-bottom: 0; */
                }
            }
        }
    }
    & .wpcf7 form.sent .wpcf7-response-output, .wpcf7-response-output, .wpcf7-response-invalid .wpcf7-spinner {
        display: none;
    }
    & .p-contactConfirm__row {
        display: grid;
        gap: .5rem;
        padding: 1.125rem 0;
        border-bottom: 1px solid #878787;
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            gap: .625rem;
            padding: 1rem 0;
        }
    }
    & .p-contactConfirm__label {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--color-main04);
    }
    & .p-contactConfirm__value {
        line-height: 1.8;
        white-space: pre-wrap;
        word-break: break-word;
    }
    & form.is-confirm-view {
        & .p-contact__item.is-confirm-hidden {
            display: none;
        }
    }
    & .p-contactConfirm__notice {
        margin-top: 1.5rem;
        color: #d13b3b;
    }
    input[type="submit"] {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        width: 327px;
        padding: 1.875rem 3.5rem 1.875rem 4rem;
        border: 1px solid #0e1a82;
        background: #fff;
        color: #0e1a82;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.1em;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
        &:hover {
            opacity: 0.85;
        }
    }
    & .p-contact__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        flex-wrap: wrap;
        margin-top: 3.5rem;
        @media (max-width: 768px) {
            flex-direction: column-reverse;
        }
        > p {
            position: relative;
            display: inline-block;
            &::after {
                position: absolute;
                content: "";
                top: 50%;
                right: 2.375rem;
                transform: translateY(-50%);
                width: 21px;
                height: 21px;
                background: url(../images/icon-arrow-right.png) top center / cover no-repeat;
                border-radius: 0;
            }
        }
    }
    & .p-contact__back {
        color: var(--color-bk);
    }
}

main.p-thanks{
    text-align: center;
    padding: 5.75rem 0 8.75rem;
    @media (max-width: 768px) {
        padding: 4rem 0 6rem;
    }
}

/* About / 機械本部（Figma node 757:9927） */
main.p-about{
    padding: 3.625rem 0 10.5rem;
    background: url(../images/about-bg.png) top 0% center / 100% auto no-repeat;
    background-attachment: fixed;
    @media (max-width: 768px) {
        padding: 2.5rem 0 6rem;
        background: url(../images/about-bg-sp.png) top -30% center / 100% auto no-repeat;
    }
    & .p-about__inner {
        max-width: 1140px;
    }
    & .p-about__intro {
        margin: 0 0 9rem;
        max-width: 66rem;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: calc(30 / 18);
        letter-spacing: 0.05em;
        color: var(--color-bk);
        @media (max-width: 768px) {
            margin-bottom: 2.5rem;
            font-size: 1rem;
        }
        &.entry-content > *:first-child {
            margin-top: 0;
        }
    }
    & .p-about__section {
        margin-bottom: 4.5rem;
        @media (max-width: 768px) {
            margin-bottom: 3.5rem;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
    & .p-about__heading {
        margin: 0 0 2.25rem;
        font-size: clamp(1.875rem, 4.5vw, 2.7625rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0.1em;
        color: var(--color-main04);
        @media (max-width: 768px) {
            margin-bottom: 1.5rem;
            letter-spacing: 0.06em;
        }
    }
    & .p-about__headingInner {
        display: block;
        line-height: calc(68/44);
    }
    /* 見出し直下 90px のアクセントライン（Figma Line 61） */
    & .p-about__headingLine {
        display: block;
        width: 5.625rem;
        max-width: 90px;
        height: 2px;
        margin-top: 2.25rem;
        background: var(--color-main04);
        @media (max-width: 768px) {
            margin-top: 1rem;
        }
    }
    & .p-about__heading--single .p-about__headingInner {
        display: inline;
    }
    & .p-about__body {
        max-width: 66.25rem;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: calc(30 / 18);
        letter-spacing: 0.05em;
        color: var(--color-main02);
        @media (max-width: 768px) {
            font-size: 1rem;
        }
        & p {
            margin: 0 0 1.5rem;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}


/* ==========================================================================
   お問い合わせ
   1rem = 16px で換算
   PC はドロワーの左帯（80px）を避けるため、その内側で中央寄せする。
   ========================================================================== */

.p-contactPage {
	--contact-ink: #0b191c;
	--contact-ink-deep: #01171F;
	--contact-bg: #f8f5ee;
	--contact-line: #000;
	--contact-note-bg: #ededef;
	--contact-check-line: #707070;
	--contact-width: 48.375rem;
	/* PC 左端のメニュー帯 */
	--contact-band: 5rem;

	background: var(--contact-bg);
	color: var(--contact-ink);
	font-family: "Noto Sans JP", sans-serif;
}

/* --- ヒーロー ------------------------------------------ */

/* 明るい背景のページなので、白ロゴの共通ヘッダーは出さない（concept と同じ扱い） */
body:has(.p-contactPage) .l-headerAsahido,
body:has(.p-sitemapPage) .l-headerAsahido,
body:has(.p-menuPage) .l-headerAsahido {
	display: none;
}

/* 生成りの背景では白いハンバーガー・言語切替が見えないため濃色に反転する */
body:has(.p-contactPage) .c-menuOpen__wrap,
body:has(.p-sitemapPage) .c-menuOpen__wrap,
body:has(.p-menuPage) .c-menuOpen__wrap {
	border-right-color: rgba(11, 25, 28, 0.14);
}

/* 濃色にするのは閉じている間だけ。開くと濃色のドロワーに重なり
   × が見えなくなるため、共通 CSS の白へ戻す（:not(.is-nav-open)）。 */
body:not(.is-nav-open):has(.p-contactPage) .c-menuOpen--pc .c-menuOpen__bar,
body:not(.is-nav-open):has(.p-sitemapPage) .c-menuOpen--pc .c-menuOpen__bar,
body:not(.is-nav-open):has(.p-menuPage) .c-menuOpen--pc .c-menuOpen__bar {
	background: rgba(11, 25, 28, 0.72);
}

body:not(.is-nav-open):has(.p-contactPage) .c-menuOpen--pc:hover .c-menuOpen__bar,
body:not(.is-nav-open):has(.p-sitemapPage) .c-menuOpen--pc:hover .c-menuOpen__bar,
body:not(.is-nav-open):has(.p-menuPage) .c-menuOpen--pc:hover .c-menuOpen__bar {
	background: #0b191c;
}

/* 白背景のページでは左帯のロゴ（白の PNG）が飛ぶので濃色に落とす。
   ハンバーガーを濃色にしているのと同じ理由。
   invert() だと朱印が水色に転ぶため、明度を落として単色にする。 */
body:has(.p-menuPage) .c-menuOpen__logo img {
	filter: brightness(0);
	opacity: 0.82;
}



/* 「Language」の文字色。開いた一覧は濃色の箱なので白のままでよい。 */
body:has(.p-contactPage) .c-langSwitchFixed .c-langSwitch,
body:has(.p-sitemapPage) .c-langSwitchFixed .c-langSwitch,
body:has(.p-menuPage) .c-langSwitchFixed .c-langSwitch {
	color: rgba(11, 25, 28, 0.72);
}

.p-contactHero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(18.75vw, 22.5rem);
	overflow: hidden;
}

.p-contactHero__bg {
	position: absolute;
	inset: 0;
	background: url("../images/asahido/contact/hero.jpg") center 14% / cover no-repeat;
}

.p-contactHero__breadcrumb {
	position: absolute;
	top: min(4.44vw, 3.1875rem);
	left: min(6.82vw, 8.1875rem);
	z-index: 1;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	line-height: 1;
}

.p-contactHero__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.p-contactHero__breadcrumb a:hover {
	text-decoration: underline;
}

.p-contactHero__title {
	position: relative;
	z-index: 1;
	margin: 0 0 0 var(--contact-band);
	padding-bottom: 1.375rem;
	color: #fff;
	font-family: "EB Garamond", "Shippori Mincho", serif;
	font-size: clamp(2rem, 3.4vw, 3.375rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1;
}

.p-contactHero__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 6.875rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.85);
	transform: translateX(-50%);
}

/* --- 本文ラッパー ------------------------------------------------------ */

.p-contactBody {
	padding: clamp(3.75rem, 8.3vw, 10rem) 1.5rem clamp(5rem, 15vw, 18rem);
	padding-left: max(1.5rem, var(--contact-band));
}

.p-contactBody__inner {
	width: 100%;
	max-width: var(--contact-width);
	margin-inline: auto;
}

/* --- リード文 ---------------------------------------------------------- */

.p-contactLead {
	font-size: 1.125rem;
	line-height: 1.5556;
	letter-spacing: 0.02em;
}

.p-contactLead p {
	margin: 0;
}

.p-contactLead p + p {
	margin-top: 1.75rem;
}

.p-contactLead__faqList {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin-top: 1.9375rem;
}

.p-contactLead__faq {
	display: flex;
	margin: 0 !important;
}

/* 3本を 1 行に収めるため、リード本文よりひと回り小さくする */
.p-contactLead__faq .c-arrowLink {
	font-size: 0.8125rem;
	gap: 0.5rem;
	white-space: nowrap;
}

.c-arrowLink {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	color: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.c-arrowLink:hover {
	opacity: 0.6;
}

.c-arrowLink__icon {
	position: relative;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var(--contact-ink);
	border-radius: 50%;
}

.c-arrowLink__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 44%;
	width: 0.3125rem;
	height: 0.3125rem;
	border-top: 1px solid var(--contact-ink);
	border-right: 1px solid var(--contact-ink);
	transform: translate(-50%, -50%) rotate(45deg);
}

/* --- フォーム ---------------------------------------------------------- */

.p-contactForm {
	margin-top: 5.9375rem;
}

.p-contactField {
	margin: 0;
	padding: 0;
	border: 0;
}

.wpcf7-form .p-contactField--shop p.p-contactField__label,
.wpcf7-form .p-contactField--privacy p.p-contactField__label {
    margin: 0 0 1rem;
}

/* 各項目の間隔 89px */
.p-contactField + .p-contactField {
	margin-top: 5.5625rem;
}

.p-contactField__label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/* ラベル頭の縦バー */
.p-contactField__label::before {
	content: "";
	flex-shrink: 0;
	width: 0.9375rem;
	height: 1.5rem;
	background: var(--contact-ink-deep);
}

.p-contactField__req {
	margin-left: 0.125em;
}

.p-contactInput {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 3.5rem;
	padding: 0 1.25rem;
	border: 1px solid var(--contact-line);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.6);
	color: var(--contact-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.75;
	transition: background 0.2s ease;
}

.p-contactInput:focus {
	background: #fff;
	outline: 2px solid rgba(11, 25, 28, 0.35);
	outline-offset: -2px;
}

.p-contactInput--area {
	height: 26.1875rem;
	padding: 1.25rem;
	resize: vertical;
}

/* --- 店舗選択 ---------------------------------------------------------- */

.p-contactShops {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.p-contactShop,
.p-contactAgree {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	cursor: pointer;
}

.p-contactShop input,
.p-contactAgree input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.p-contactShop__box,
.p-contactAgree__box {
	position: relative;
	flex-shrink: 0;
	width: 1.3125rem;
	height: 1.3125rem;
	border: 1px solid var(--contact-check-line);
	background: #fff;
}

.p-contactShop__box::after,
.p-contactAgree__box::after {
	content: "";
	position: absolute;
	top: 45%;
	left: 50%;
	width: 0.4375rem;
	height: 0.75rem;
	border-right: 2px solid var(--contact-ink-deep);
	border-bottom: 2px solid var(--contact-ink-deep);
	opacity: 0;
	transform: translate(-50%, -50%) rotate(45deg);
	transition: opacity 0.15s ease;
}

.p-contactShop input:checked + .p-contactShop__box::after,
.p-contactAgree input:checked + .p-contactAgree__box::after {
	opacity: 1;
}

.p-contactShop input:focus-visible + .p-contactShop__box,
.p-contactAgree input:focus-visible + .p-contactAgree__box {
	outline: 2px solid rgba(11, 25, 28, 0.5);
	outline-offset: 2px;
}

.p-contactShop__name {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.c-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5.75rem;
	height: 1.3125rem;
	margin-left: 0.5rem;
	padding: 0 0.5rem;
	border-radius: 3px;
	background: var(--contact-ink-deep);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.045em;
	line-height: 1;
	white-space: nowrap;
}

/* --- 個人情報の取り扱い ------------------------------------------------ */

.p-contactPrivacy {
	box-sizing: border-box;
	min-height: 10.375rem;
	padding: 2.9375rem 2.8125rem 2.1875rem;
	background: var(--contact-note-bg);
}

.p-contactPrivacy p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.75;
	letter-spacing: 0.02em;
}

.p-contactAgree {
	margin-top: 1.5rem;
}

.p-contactAgree__text {
	font-size: 1rem;
	letter-spacing: 0.02em;
	line-height: 1.75;
}

/* --- 確認ボタン -------------------------------------------------------- */

.p-contactActions {
	margin-top: 4.25rem;
}

.c-formButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13.75rem;
	height: 3.8125rem;
	padding: 0;
	border: 1px solid var(--contact-line);
	border-radius: 0;
	background: var(--contact-ink-deep);
	color: #fff;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.21em;
	text-indent: 0.21em;   /* letter-spacing の分の視覚的なずれを戻す */
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.c-formButton:hover {
	opacity: 0.75;
}

/* --- reCAPTCHA の注記 -------------------------------------------------- */

.p-contactRecaptcha {
	margin: 8.375rem 0 0;
	font-size: 0.875rem;
	line-height: 2;
	letter-spacing: 0.02em;
}

/* --- Contact Form 7 の既定構造をデザインに合わせる --------------------- */

.p-contactForm .wpcf7-form p {
	margin: 0;
}

/* CF7 が入力欄を包む span はレイアウトに影響させない */
.p-contactForm .wpcf7-form-control-wrap {
	display: block;
}

.p-contactForm .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.5rem;
	color: #b3261e;
	font-size: 0.875rem;
	line-height: 1.6;
}

.p-contactForm .wpcf7-response-output {
	margin: 2rem 0 0;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(11, 25, 28, 0.3);
	font-size: 0.9375rem;
	line-height: 1.8;
}

.p-contactForm .wpcf7-spinner {
	margin-left: 1rem;
}

/* 店舗選択（CF7 の checkbox リスト） */
.p-contactForm .wpcf7-checkbox {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.p-contactForm .wpcf7-checkbox .wpcf7-list-item {
	margin: 0;
}

.p-contactForm .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	cursor: pointer;
}

.p-contactForm .wpcf7-list-item input[type="checkbox"] {
	appearance: none;
	flex-shrink: 0;
	width: 1.3125rem;
	height: 1.3125rem;
	margin: 0;
	border: 1px solid var(--contact-check-line);
	border-radius: 0;
	background: #fff;
	cursor: pointer;
}

.p-contactForm .wpcf7-list-item input[type="checkbox"]:checked {
	/* input には疑似要素が使えないので、チェックマークは背景画像で描く。
	   枠線を残したいのでマスクではなく background-image にする。 */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.3 12.3 13.5 3.9' fill='none' stroke='%2301171F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 72% 72%;
}

.p-contactForm .wpcf7-list-item input[type="checkbox"]:focus-visible {
	outline: 2px solid rgba(11, 25, 28, 0.5);
	outline-offset: 2px;
}

.p-contactForm .wpcf7-list-item-label {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* 「予約不可」バッジは店舗名の後ろに付与 */
.p-contactForm .wpcf7-checkbox .wpcf7-list-item label::after {
	content: "予約不可";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5.75rem;
	height: 1.3125rem;
	margin-left: 0.5rem;
	padding: 0 0.5rem;
	border-radius: 3px;
	background: var(--contact-ink-deep);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.045em;
	line-height: 1;
	white-space: nowrap;
}

/* 同意チェック（acceptance） */
.p-contactForm .wpcf7-acceptance {
	display: block;
	margin-top: 1.5rem;
}

.p-contactForm .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.p-contactForm .wpcf7-acceptance .wpcf7-list-item-label {
	font-weight: 400;
	white-space: normal;
}

.p-contactForm .wpcf7-acceptance .wpcf7-list-item label::after {
	content: none;
}

/* 確認前の入力チェックで出すエラー文 */
.p-contactError {
	margin: 0.5rem 0 0;
	color: #b3261e;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* --- 確認画面 ---------------------------------------------------------- */

/* 確認中は入力欄を隠し、確認内容と送信ボタンだけを見せる */
.p-contactPage.is-confirm .p-contactForm .wpcf7-form > .p-contactField,
.p-contactPage.is-confirm .p-contactLead {
	display: none;
}

.p-contactPage.is-confirm [data-contact-confirm] {
	display: none;
}

/* 入力中は送信ボタンと「修正する」を隠す */
.p-contactPage:not(.is-confirm) .p-contactSubmit,
.p-contactPage:not(.is-confirm) .c-formButton--ghost {
	display: none;
}

.p-contactReview {
	margin-top: 1rem;
}

.p-contactReview__lead {
	margin: 0 0 2.5rem;
	font-size: 1rem;
	line-height: 1.9;
	letter-spacing: 0.02em;
}

.p-contactReview__list {
	margin: 0;
	border-top: 1px solid rgba(11, 25, 28, 0.16);
}

.p-contactReview__list dt {
	padding: 1.5rem 0 0.5rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.p-contactReview__list dd {
	margin: 0;
	padding: 0 0 1.5rem;
	border-bottom: 1px solid rgba(11, 25, 28, 0.16);
	font-size: 1rem;
	line-height: 1.9;
	letter-spacing: 0.02em;
	white-space: pre-wrap;
	word-break: break-word;
}

.p-contactReview__list dd.is-empty {
	color: #8a8f91;
}

/* 確認画面のボタン並び */
.p-contactPage.is-confirm .p-contactActions > p {
	display: flex;
    justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-top: 3.5rem;
}

.p-contactPage.is-confirm .p-contactActions > p br {
    display: none;
}

.c-formButton--ghost {
	background: transparent;
	color: var(--contact-ink-deep);
}

/* --- 完了ページ -------------------------------------------------------- */

.p-thanks {
	text-align: center;
}

.p-thanks__heading {
	margin: 0 0 2.5rem;
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.7;
}

.p-thanks__body {
	font-size: 1rem;
	line-height: 2.1;
	letter-spacing: 0.02em;
}

.p-thanks__body p + p {
	margin-top: 1.75rem;
}

.p-thanks__actions {
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

@media (max-width: 768px) {
	.p-contactForm .wpcf7-list-item label {
		flex-wrap: wrap;
	}
    .p-contactForm .wpcf7-acceptance .wpcf7-list-item label {
        flex-wrap: nowrap;
    }
	.p-contactPage.is-confirm .p-contactActions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* --- SP ---------------------------------------------------------------- */

@media (max-width: 768px) {
	.p-contactPage {
		--contact-band: 0rem;
	}

	.p-contactHero {
		min-height: 13.75rem;
	}

	.p-contactHero__breadcrumb {
		top: 1.75rem;
		left: 1.5rem;
		font-size: 0.75rem;
	}

	.p-contactBody {
		padding-inline: 1.5rem;
	}

	.p-contactLead {
		font-size: 1rem;
	}

	.p-contactLead__faqList {
		flex-direction: column;
		justify-content: flex-start;
		gap: 0.875rem;
	}

	.p-contactLead__faq {
		justify-content: flex-start;
	}

	.p-contactForm {
		margin-top: 3.5rem;
	}

	.p-contactField + .p-contactField {
		margin-top: 3rem;
	}

	.p-contactField__label {
        margin: 0;
		font-size: 1rem;
	}

	.p-contactInput--area {
		height: 15rem;
	}

	.p-contactShop {
		flex-wrap: wrap;
	}

	.p-contactPrivacy {
		padding: 1.5rem 1.25rem;
	}

	.p-contactActions {
		margin-top: 2.5rem;
		text-align: center;
	}

	.c-formButton {
		width: 100%;
		max-width: 13.75rem;
	}

	.p-contactRecaptcha {
		margin-top: 4rem;
		font-size: 0.75rem;
	}
}


/* --- コンセプトページ（旧 concept.css） --- */

:root{
	--concept-bg-page:        #f4f0ea;
	--concept-bg-hero:        #0b0b0e;
	--concept-bg-vessel:      #1b0d0f;
	--concept-bg-stores:      #281A3B;
	--concept-bg-closing:     #d7c4d9;
	--concept-bg-craft-card:  rgba(52, 30, 10, 0.702);
	--concept-text-on-dark:   rgba(255, 255, 255, 0.92);
	--concept-text-wh: rgba(255, 255, 255, 1);
	--concept-text-brown:     #341E0A;
	--concept-border-light:   rgba(255, 255, 255, 0.5);
	--concept-border-dim:     rgba(255, 255, 255, 0.35);

    --font-shippori-mincho:  "Shippori Mincho", serif;
    --font-hina-mincho:  "Hina Mincho", serif;
    --font-yu-mincho:  "Yu Mincho", serif;
    /* 未定義のまま参照されていたため補完（明朝の本文用） */
    --font-jp-serif:  "Shippori Mincho", "Hina Mincho", serif;
	--font-jp-gothic:   "Noto Sans JP", sans-serif;
    --font-jp-sans:   "Noto Sans JP", sans-serif;
	--font-jp-round:  "Zen Maru Gothic", sans-serif;

	--concept-max: 78rem;
	--concept-pad-pc: clamp(1.25rem, 3vw, 3rem);
	--concept-pad-sp: 1.25rem;
}

body:has(.p-conceptAsahido){
	background: var(--concept-bg-page);
	color: var(--concept-text-on-dark);
}

body:has(.p-conceptAsahido) .l-headerAsahido{
	display: none;
}

.u-visuallyHidden{
	position: absolute !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

.p-conceptAsahido{
	overflow: hidden;
	background: var(--concept-bg-page);
	font-family: var(--font-jp-sans);
	color: var(--concept-text-on-dark);
}

/* Reveal on scroll ---------------------------------------------------------- */

.p-conceptReveal{
	opacity: 0;
	transform: translateY(2rem);
	/* 落ち着いた印象にしたいので、TOP と同程度までゆっくり出す */
	transition: opacity 1.6s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-conceptReveal.is-inview{
	opacity: 1;
	transform: translateY(0);
}

/* Shared arrow chevron ------------------------------------------------------ */

.p-conceptArrow{
	flex-shrink: 0;
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	color: currentColor;
	transform: rotate(45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.p-conceptHero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: min(85vw, 1630px);
	/* 上は 1920px 時に 2.875rem（46px）。下は余白戻しを受けて広めに */
	padding: 0 0 clamp(4rem, 8vw, 8rem);
	display: flex;
	flex-direction: column;
	background: var(--concept-bg-hero);
	color: var(--concept-text-on-dark);
}

.p-conceptHero__bg{
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: url("../images/asahido/concept/xd/hero-bg.jpg");
	background-image: image-set(
		url("../images/asahido/concept/xd/hero-bg.jpg") 1x,
		url("../images/asahido/concept/xd/hero-bg@2x.jpg") 2x
	);
	background-size: cover;
	background-position: center right;
}

/* 左帯（80px）のぶんだけ視覚上の中央が右にずれるため、
   中央揃えの主要コンテンツを帯の半分（最大 40px）だけ右へ寄せる。
   コンテンツ幅に余裕がない幅では 0 に近づき、はみ出さない。 */
/* 左帯（80px）のぶんだけ視覚上の中央が右にずれるため、
   中央揃えの主要コンテンツを帯の半分（最大 40px）だけ右へ寄せる。
   コンテンツ幅に余裕がない幅では 0 に近づき、はみ出さない。
   980px 以下は帯が出ないので直後で打ち消す。 */
.p-conceptVessel__inner{
	transform: translateX(clamp(0px, (100vw - 88rem) / 4, 40px));
}

.p-conceptStores__title,
.p-conceptStores__grid{
	transform: translateX(clamp(0px, (100vw - 60rem) / 4, 40px));
}

.p-conceptCraft__inner{
	transform: translateX(clamp(0px, (100vw - 1630px) / 4, 40px));
}

.p-conceptClosing__copy{
	transform: translateX(clamp(0px, (100vw - 40rem) / 4, 40px));
}

@media (max-width: 980px){
	.p-conceptVessel__inner,
	.p-conceptStores__title,
	.p-conceptStores__grid,
	.p-conceptCraft__inner,
	.p-conceptClosing__copy{
		transform: none;
	}
}



.p-conceptHero__shade{
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 100%);
}

.p-conceptHero__top{
    position: relative;
    width: calc(100vw - 80px);
    /* 1920px 時に 360px。狭い幅では vw で比例縮小 */
    height: min(18.75vw, 360px);
    margin-left: 80px;
    align-content: center;
	padding: 0 var(--concept-pad-pc);
    background: rgba(0, 0, 0, 0.7);
}

.p-conceptHero__breadcrumb{
    z-index: 4;
    position: absolute;
    bottom: 70px;
    left: 32px;
	margin: 0;
	/* パンくずは News & Topics ページと同じゴシック・非 bold で主張を抑える */
	font-family: var(--font-jp-gothic);
	font-weight: 400;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--concept-text-dark);
    a {
        text-decoration: none;
        color: var(--concept-text-dark);
    }
}

.p-conceptHero__title{
    z-index: 4;
    position: relative;
	margin: 0;
	grid-column: 2;
	font-family: var(--font-hina-mincho);
    font-size: clamp(1.5rem, 1.1966rem + 1.2945vw, 2.75rem);
	font-weight: 400;
	letter-spacing: 0.2em;
	text-align: center;
	color: var(--concept-text-wh);
}

.p-conceptHero__title::after{
	content: "";
	display: block;
	width: 120px;
	height: 1px;
	margin: 0.85rem auto 0;
	background: var(--concept-text-wh);
}

.p-conceptHero__copy{
    z-index: 1;
    position: relative;
	max-width: 42rem;
	/* 1920px 基準で上に 262px（= 13.65vw）あける。狭幅は vw で追随
	   （デザイン指定値・line-height 込み） */
	margin-top: min(13.65vw, 262px);
	/* 1920px 基準で左端から 330px（= 17.1875vw）あける。
	   狭い幅では vw で比例縮小、広くても 330px を超えない */
	margin-left: min(17.1875vw, 330px);
	padding: 0 var(--concept-pad-pc);
}

.p-conceptHero__heading{
	/* 見出しの白は stores タイトルと同じ純白に統一する */
	color: #fff;
	/* 見出しとリード文の間。指定の 68px から「まだ余裕がない」戻しを受けて 96px へ */
	margin: 0 0 min(5vw, 96px);
	font-family: var(--font-hina-mincho);
	font-size: clamp(1.75rem, 2.75vw, 2.6rem);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

.p-conceptHero__body{
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	max-width: 34rem;
}

.p-conceptHero__body p{
	margin: 0;
	font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
	font-weight: 400;
	line-height: 2.0;
	letter-spacing: 0.04em;
}

.p-conceptVessel{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--concept-bg-vessel);
	color: var(--concept-text-on-dark);
	/* 上下の余白。指定の 150px から「まだ余裕がない」戻しを受けて 200px へ */
	padding: min(10.4vw, 200px) 0;
	display: flex;
	align-items: center;
}

.p-conceptVessel__bg{
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("../images/asahido/concept/xd/vessel-bg.jpg");
	background-image: image-set(
		url("../images/asahido/concept/xd/vessel-bg.jpg") 1x,
		url("../images/asahido/concept/xd/vessel-bg@2x.jpg") 2x
	);
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
}

/* 背景をビューポート固定にすると画像の明るい部分が出ることがあるため、
   セクションの地色を薄く重ねて文字の読みやすさを保つ */
.p-conceptVessel__bg::after{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(27, 13, 15, 0.45);
}

.p-conceptVessel__inner{
    z-index: 1;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2rem, 6vw, 8rem);
	max-width: 88rem;
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--concept-pad-pc);
}

.p-conceptVessel__copy{
    z-index: 1;
    position: relative;
	grid-column: 2;
	max-width: 34rem;
}

.p-conceptVessel__heading{
	/* 見出しの白は hero・stores タイトルと同じ純白に統一する */
	color: #fff;
	/* 見出しとリード文の間。指定の 68px から「まだ余裕がない」戻しを受けて 96px へ */
	margin: 0 0 min(5vw, 96px);
	font-family: var(--font-hina-mincho);
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

.p-conceptVessel__lead{
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.p-conceptVessel__lead p{
	margin: 0;
	font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
	font-weight: 400;
    font-family: var(--font-jp-gothic);
	line-height: 2.0;
	letter-spacing: 0.05em;
	color: var(--concept-text-on-dark);
}

/* hero / vessel の背景も店舗内写真と同じパララックスにする。
   background-attachment: fixed は環境により効かないため、
   店舗ページ（c-para / FV）と同じ「fixed レイヤー + セクション側 clip-path」方式を使う。
   clip-path は fixed の包含ブロックを作らないので、背景だけがビューポートに固定され、
   セクションの範囲外は切り抜かれる。 */
/* hero / vessel の背景も店舗内写真と同じパララックスにする。
   background-attachment: fixed は環境により効かないため、
   店舗ページ（c-para / FV）と同じ「fixed レイヤー + セクション側 clip-path」方式を使う。
   clip-path は fixed の包含ブロックを作らないので、背景だけがビューポートに固定され、
   セクションの範囲外は切り抜かれる。SP でも同じ動きにする（幅で打ち消さない）。 */
.p-conceptHero,
.p-conceptVessel{
	clip-path: inset(0);
}

.p-conceptHero__bg,
.p-conceptHero__shade,
.p-conceptVessel__bg{
	position: fixed;
}

/* ==========================================================================
   Store scene band
   ========================================================================== */

/* 帯写真も hero / vessel と同じ「fixed レイヤー + セクション側 clip-path」方式。
   background-attachment: fixed は iOS Safari が無視するため使わない。 */
.p-conceptBand{
	position: relative;
	overflow: hidden;
	clip-path: inset(0);
	background: var(--concept-bg-hero);
	height: min(28vw, 34rem);
}

.p-conceptBand::before{
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("../images/asahido/concept/xd/store-band.jpg");
	background-image: image-set(
		url("../images/asahido/concept/xd/store-band.jpg") 1x,
		url("../images/asahido/concept/xd/store-band@2x.jpg") 2x
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.p-conceptBand__image{
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Stores — three columns of text on purple watercolor bg (no card boxes)
   ========================================================================== */

.p-conceptStores{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--concept-bg-stores);
	padding: min(15.1vw, 290px) var(--concept-pad-pc) min(12.76vw, 245px);
	color: var(--concept-text-on-dark);
}

.p-conceptStores__bg{
	position: absolute;
	inset: 0;
	z-index: -3;
	background-color: var(--concept-bg-stores);
	background-image: url("../images/asahido/concept/xd/stores-bg-clean.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.p-conceptStores__decor{
	display: none;
}

.p-conceptStores__decor--a{
	top: -6%;
	left: -14%;
	width: 46%;
	aspect-ratio: 1 / 1;
	background-image: url("../images/asahido/concept/xd/decor-1.png");
	transform: rotate(6deg);
}

.p-conceptStores__decor--b{
	top: 32%;
	right: -18%;
	width: 54%;
	aspect-ratio: 1 / 1;
	background-image: url("../images/asahido/concept/xd/decor-2.png");
	transform: rotate(-14deg);
}

.p-conceptStores__decor--c{
	bottom: -22%;
	left: 22%;
	width: 60%;
	aspect-ratio: 1 / 1;
	background-image: url("../images/asahido/concept/xd/decor-3.png");
	transform: rotate(8deg);
	opacity: 0.55;
}

.p-conceptStores__title{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: min(1.67vw, 32px);
	width: min(6.09vw, 117px);
	margin: 0 auto min(11.3vw, 313px);
	color: #fff;
	font-family: var(--font-hina-mincho);
	font-size: min(1.77vw, 34px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.15em;
}

.p-conceptStores__title span{
	display: block;
	writing-mode: vertical-rl;
	text-orientation: upright;
}

.p-conceptStores__grid{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 384px));
	/* head / title / body / cta の 4 行を全カードで共有し、
	   subgrid で横方向に揃える。body 行は auto（内容依存）で全カードの最大に自動追随 */
	grid-template-rows: auto auto auto auto;
	justify-content: center;
	/* 列方向のみのギャップ。行間は各セルの margin で制御するので row-gap は 0 */
	column-gap: min(9.48vw, 182px);
	row-gap: 0;
	max-width: min(79.01vw, 1517px);
	margin: 0 auto;
}

.p-conceptStore{
	position: relative;
	width: 100%;
	color: var(--concept-text-on-dark);
	/* 親グリッドの行をそのまま継承（subgrid）することで、
	   同じ行同士（head / title / body / cta）が全カードで同じ高さになる */
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
}

/* .p-conceptStore::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	display: none;
	background: rgba(255, 255, 255, 0.386);
} */

.p-conceptStore__head{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.p-conceptStore__label{
	display: block;
}

.p-conceptStore__eyebrow{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	margin: 0;
	font-family: var(--font-jp-round);
	font-size: min(14px, 18px);
	font-weight: 500;
	line-height: 2.111;
	letter-spacing: 0.03em;
	color: var(--concept-text-on-dark);
}

.p-conceptStore__name{
	position: absolute;
	top: min(3.07vw, 59px);
	left: 0;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	font-family: var(--font-jp-round);
	font-weight: 500;
	color: var(--concept-text-on-dark);
	padding-top: 0.6rem;
}

/* 見出し下の罫線。店舗名の有無に関わらず出したいので eyebrow 側に持たせる。
   eyebrow と name はどちらも .p-conceptStore__label 起点の絶対配置で
   eyebrow が top: 0 なので、name の元の位置指定をそのまま使えば
   見た目の位置は変わらない。
   幅は eyebrow の 4 文字分（font-size 14px → 56px）で固定。 */
.p-conceptStore__eyebrow::after{
	content: "";
	position: absolute;
	top: calc(min(2.37vw, 59px) + max(0.1vw, -17px));
	left: min(0.1vw, 2px);
	width: 4em;
	height: 1px;
	background: var(--concept-text-wh);
}

/* 336 は「日本酒と器を楽しむ」の「日本酒と器」まで＝5文字分 */
.p-conceptStore--336 .p-conceptStore__eyebrow::after{
	width: 5em;
}

.p-conceptStore__prefix{
	font-size: min(12px, 15px);
	letter-spacing: 0.14em;
	font-weight: 400;
}

.p-conceptStore__nameMain{
	font-size: min(4.94vw, 28px);
	line-height: 1.357;
	letter-spacing: 0.14em;
}

.p-conceptStore__icon{
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	margin-left: auto;
	color: var(--concept-text-on-dark);
	/* 1・3 は 1920px 時 157px（= 8.18vw）を上限に、狭幅は vw で追随 */
	width: min(8.18vw, 157px);
}

.p-conceptStore--336 .p-conceptStore__icon{
	/* 336 のみ 1920px 時 105px（= 5.47vw） */
	width: min(5.47vw, 105px);
}

.p-conceptStore__icon img,
.p-conceptStore__icon svg{
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	/* MOD: */
	opacity: 0;
}

.p-conceptStore__title{
    white-space: nowrap;
	font-family: var(--font-jp-serif);
	font-size: min(1.25vw, 24px);
	font-weight: 400;
	line-height: 1.625;
	letter-spacing: 0.03em;
	color: var(--concept-text-on-dark);
	/* 店名との間を空ける（戻し指定: margin: 2.5rem 0 0） */
	margin: 2.5rem 0 0;
}

.p-conceptStore__body{
	width: min(19.27vw, 370px);
	margin: 0;
    padding-top: 1.25rem;
	font-size: min(0.83vw, 16px);
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: 0.1em;
	color: var(--concept-text-on-dark);
	/* subgrid の 3 行目（1fr）に配置され、余剰スペースは body 行が吸収する */
}

/* CTA button — outlined rectangle, label left, chevron right, tight height */
.p-conceptStore__cta{
    position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	width: min(11.51vw, 221px);
	height: min(2.97vw, 57px);
	min-width: 0;
	/* subgrid の 4 行目に配置されるため CTA 位置は自動で全カード揃う */
    margin-top: 1.25rem;
	align-self: end;
	padding: 0 min(1.2vw, 23px) 0 min(1.25vw, 24px);
	background: rgba(255, 255, 255, 0.1);
	color: var(--concept-text-on-dark);
	font-family: var(--font-jp-sans);
	font-size: min(0.83vw, 16px);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.p-conceptStore__ctaLabel{
	flex: 1;
	text-align: left;
	white-space: nowrap;
}

.p-conceptStore__cta .p-conceptArrow{
	position: absolute;
	top: 50%;
	right: 22px;
	width: 8px;
	height: 8px;
	transform: translateY(-50%) rotate(45deg);
}

@media (any-hover: hover){
	.p-conceptStore__cta:hover {
		background: rgba(255, 255, 255, 0.2);
		border-color: rgba(255, 255, 255, 0.9);
	}
}

.p-conceptCraft{
    position: relative;
	background: linear-gradient(180deg, #f4f4ef 0%, #fbf2fa 52.28%, rgba(252, 242, 252, 0.902) 61.43%, rgba(255, 255, 255, 0) 100%);
	padding: min(9.32vw, 179px) 0 min(9.38vw, 180px);
	/* 1920px 基準で高さ約 1100px（= 57.29vw）を確保。内容が多ければ自動で伸びる */
	min-height: min(57.29vw, 1100px);
}

.p-conceptCraft__inner{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 783px));
	gap: min(3.33vw, 64px);
	max-width: min(84.9vw, 1630px);
	margin: 0 auto;
	padding: 0;
}

.p-conceptCraftItem{
	z-index: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	color: #f7f2e8;
}

.p-conceptCraftItem::before{
	content: "";
	position: absolute;
	inset: min(1.56vw, 30px) min(1.56vw, 30px) min(1.61vw, 31px);
	z-index: 3;
	border: 1px solid rgba(255, 255, 255, 0.902);
	pointer-events: none;
}

.p-conceptCraftItem__card{
	position: relative;
	overflow: hidden;
	height: min(40.78vw, 783px);
	padding: 0;
	background-color: var(--concept-bg-craft-card);
	background-image: url("../images/asahido/concept/xd/paper-life.jpg");
	background-image: image-set(
		url("../images/asahido/concept/xd/paper-life.jpg") 1x,
		url("../images/asahido/concept/xd/paper-life@2x.jpg") 2x
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-blend-mode: soft-light;
	color: rgba(255, 255, 255, 0.902);
}

.p-conceptCraftItem__card::before{
	content: none;
}

.p-conceptCraftItem--life .p-conceptCraftItem__card{
	background-image: url("../images/asahido/concept/xd/paper-food.jpg");
	background-image: image-set(
		url("../images/asahido/concept/xd/paper-food.jpg") 1x,
		url("../images/asahido/concept/xd/paper-food@2x.jpg") 2x
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-blend-mode: soft-light;
}

.p-conceptCraftItem__title{
	position: absolute;
	top: min(5.47vw, 105px);
	left: min(5.36vw, 103px);
	margin: 0;
	writing-mode: vertical-rl;
	font-family: var(--font-hina-mincho);
	font-size: min(1.88vw, 36px);
	font-weight: 400;
	line-height: 1;
    letter-spacing: 4.2px;
	color: rgba(255, 255, 255, 0.902);
	white-space: nowrap;
	inline-size: max-content;
	block-size: auto;
	max-inline-size: none;
	overflow: visible;
}

.p-conceptCraftItem--life .p-conceptCraftItem__title{
	left: min(5.78vw, 111px);
}

.p-conceptCraftItem__body{
	position: absolute;
	top: min(7.92vw, 152px);
	left: min(10.99vw, 211px);
	display: flex;
	flex-direction: column;
	gap: min(1.15vw, 22px);
	color: rgba(255, 255, 255, 0.902);
}

.p-conceptCraftItem--life .p-conceptCraftItem__body{
	left: min(11.41vw, 219px);
	width: min(20.57vw, 395px);
}

.p-conceptCraftItem__body p{
	margin: 0;
	font-size: min(0.94vw, 18px);
	font-weight: 400;
	line-height: 2.111;
	letter-spacing: 0;
	color: inherit;
}

.p-conceptCraftItem__ctaRow{
	position: absolute;
	top: min(32.76vw, 629px);
	left: min(11.41vw, 219px);
	display: flex;
	flex-wrap: wrap;
	gap: min(0.57vw, 11px);
	margin: 0;
}

.p-conceptCraftItem__cta{
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: min(11.67vw, 224px);
	height: min(3.54vw, 68px);
	padding: 0 min(1.09vw, 21px) 0 min(3.28vw, 63px);
	background: rgba(255, 255, 255, 0.902);
	border: 1px solid #707070;
	color: #756658;
	font-family: var(--font-hina-mincho);
	font-size: min(0.94vw, 18px);
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
	transition: 0.3s ease;
}

.p-conceptCraftItem__cta::before{
	content: "";
	position: absolute;
	inset: min(0.36vw, 7px);
	z-index: -1;
	background: rgba(255, 255, 255, 0.902);
	border: 1px solid #786A5C;
}

.p-conceptCraftItem__cta .p-conceptArrow{
	color: #786A5C;
	width: 8px;
	height: 8px;
}

@media (any-hover: hover){
	.p-conceptCraftItem__cta:hover {
		opacity: .6;
	}
}

.p-conceptCraftItem__media{
	margin: 0;
	overflow: hidden;
	aspect-ratio: 783 / 720;
}

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

/* ==========================================================================
   Closing — pale purple sky, pagoda scene
   ========================================================================== */

.p-conceptClosing{
    z-index: 1;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* 1920px 基準で高さ約 1100px（= 57.29vw）を確保。内容が多ければ自動で伸びる */
	min-height: min(57.29vw, 1100px);
	/* 1920px 基準で上に 290px（= 15.1vw）あける。狭幅では vw で追随、床は 3rem */
    padding: clamp(3rem, 15.1vw, 290px) 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--concept-text-brown);
}

.p-conceptClosing__scene{
	position: absolute;
	inset: 0;
	z-index: 0;
	/* craft セクション全体を覆う装飾レイヤー。リビールで craft__inner に transform が
	   掛かると、その中の z-index が外に効かなくなり、この層がリンクの上に乗ってしまう。
	   装飾（aria-hidden）なのでクリックは素通りさせる。 */
	pointer-events: none;
	background-image: url("../images/asahido/concept/xd/closing-bg.jpg");
	background-image: image-set(
		url("../images/asahido/concept/xd/closing-bg.jpg") 1x,
		url("../images/asahido/concept/xd/closing-bg@2x.jpg") 2x
	);
	background-size: contain;
	background-position: bottom center;
	background-repeat: no-repeat;
    opacity: 0.6;
}

/* 背景画像の上端がページ背景（--concept-bg-page）の上でエッジとして見えるため、
   ページ背景色 → 透明のグラデーションを画像の上半分に重ねて自然に溶かす。
   scene の opacity(0.6) の影響を受けないよう、scene とは別レイヤーで敷く
   （::after は DOM 上 scene より後に描画され、copy の z-index:1 よりは下）。 */
.p-conceptClosing::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	/* 画像の上端位置は幅によって変わるため、深めのグラデーションで確実に覆う。
	   下 1/4 は透明にして、画像の見どころ（清水寺）はそのまま残す。 */
	background: linear-gradient(
		180deg,
		var(--concept-bg-page) 0%,
		var(--concept-bg-page) 30%,
		rgba(244, 240, 234, 0.55) 55%,
		rgba(244, 240, 234, 0) 78%
	);
	pointer-events: none;
}

.p-conceptClosing__copy{
	position: relative;
	z-index: 1;
	max-width: 30rem;
	margin: 0 auto;
	padding: 0 var(--concept-pad-pc);
	text-align: center;
	color: var(--concept-text-brown);
}

.p-conceptClosing__title{
    writing-mode: vertical-rl;
    margin: 0 auto 1.5rem;
	font-family: var(--font-hina-mincho);
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.18em;
}

.p-conceptClosing__lead{
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 2.0;
	letter-spacing: 0.1em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px){
	.p-conceptStores__grid {
		gap: 2rem;
	}
}

@media (max-width: 768px){
	.p-conceptHero {
		min-height: 100vh;
		padding: 0 0 3rem;
	}
	.p-conceptHero__top {
        width: 100%;
        height: 220px;
        margin-left: 0;
		grid-template-columns: 1fr;
		gap: 1rem;
		text-align: center;
	}
	.p-conceptHero__breadcrumb,
	.p-conceptHero__title,
	.p-conceptHero__language {
		grid-column: 1;
		justify-self: center;
	}
    .p-conceptHero__title::after {
        width: 80px;
    }
    .p-conceptHero__breadcrumb {
        bottom: 20px;
    }
	.p-conceptHero__heading {
		font-size: 1.5rem;
		line-height: 1.65;
	}
	.p-conceptHero__copy {
		margin-left: 0;   /* SP では PC 用の 330px オフセットを打ち消す */
		padding: 0 var(--concept-pad-sp);
	}

	.p-conceptVessel {
		min-height: 0;
	}
	.p-conceptVessel__bg {
		background-position: center 20%;
		background-size: 100% auto;
		opacity: 0.35;
	}
	.p-conceptVessel__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.p-conceptVessel__copy {
		grid-column: 1;
	}
	.p-conceptVessel__heading {
		font-size: 1.5rem;
	}

	.p-conceptBand {
		height: 46vw;
	}

	.p-conceptStores {
		padding: 3.5rem var(--concept-pad-sp);
		min-height: 0;
	}
	.p-conceptStores__title {
		position: relative;
		top: auto;
		left: auto;
		width: fit-content;
		height: auto;
		margin: 0 auto 3rem;
		font-size: 1.5rem;
		gap: 1.5rem;
	}
	/* PC は 1 行前提で nowrap にしているが、幅が狭い SP では折り返す */
	.p-conceptStore__title,
	.p-conceptStore__ctaLabel {
		white-space: normal;
	}

	.p-conceptStores__grid {
		position: relative;
		inset: auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr);   /* 1fr だと最小値が min-content になり内容の実寸で広がる */
		gap: 2.5rem;
		max-width: 26rem;
	}
	.p-conceptStore {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		height: auto;
        gap: 1rem;
		min-height: 27rem;
		padding: 1rem 0;
	}
	.p-conceptStore::before {
		display: block;
	}
	.p-conceptStore__head {
        justify-content: center;
        gap: 1rem;
		min-height: 0;
	}
	.p-conceptStore__eyebrow,
	.p-conceptStore__name,
	.p-conceptStore__icon,
	.p-conceptStore__title,
	.p-conceptStore__body,
	.p-conceptStore__cta {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}
	/* SP は eyebrow が通常フローに戻るので、罫線もその直下へ置き直す */
	.p-conceptStore__eyebrow {
		padding-bottom: 0.5rem;
	}
	.p-conceptStore__eyebrow::after {
		top: auto;
		bottom: 8px;
		left: 0;
	}
	.p-conceptStore__icon {
		margin: 1rem 0;
		width: 8rem;
	}
	.p-conceptStore--336 .p-conceptStore__icon {
		width: 6rem;
	}
	.p-conceptStore__title {
		margin-top: .5rem;
		font-size: 1.35rem;
	}
	.p-conceptStore__body {
		width: auto;
        padding-top: .5rem;
		font-size: 0.875rem;
	}
	.p-conceptStore__cta {
		width: 13.75rem;
		height: 3.5rem;
		margin: 1.5rem auto 0;
		padding: 0 1.5rem;
		font-size: 0.875rem;
	}

	.p-conceptCraft__inner {
		grid-template-columns: minmax(0, 1fr);   /* 1fr だけだと最小値が min-content になり画像の実寸で広がる */
		gap: 2.5rem;
        max-width: none;
		padding: 0 var(--concept-pad-sp);
	}
	.p-conceptCraftItem__card {
		height: auto;
		min-height: 0;
		padding: 2.5rem 1.25rem;
	}
	.p-conceptCraftItem__title {
		position: relative;
		top: auto;
		left: auto;
		writing-mode: horizontal-tb;
		/* PC は縦書き 1 行なので nowrap + max-content だが、横書きにする SP では折り返す */
		white-space: normal;
		inline-size: auto;
		font-size: 1.375rem;
        line-height: 1.5;
	}
    .p-conceptCraftItem--life .p-conceptCraftItem__title {
        left: 0;
    }
	.p-conceptCraftItem__body {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		margin-top: 1.5rem;
	}
	.p-conceptCraftItem__body p {
		font-size: 0.875rem;
	}
    .p-conceptCraftItem--life .p-conceptCraftItem__body {
        position: static;
        width: auto;
    }
	.p-conceptCraftItem__ctaRow {
		position: relative;
		top: auto;
		left: auto;
		margin-top: 1.5rem;
	}
	.p-conceptCraftItem__cta {
		width: 9rem;
		height: 3.5rem;
		padding: 0 1.25rem 0 2rem;
		font-size: 0.875rem;
	}
	.p-conceptClosing {
		min-height: 70vh;
	}
    .p-conceptClosing::after {
        background: linear-gradient(
            180deg,
            var(--concept-bg-page) 0%,
            var(--concept-bg-page) 65%,
            rgba(244, 240, 234, 0.55) 80%,
            rgba(244, 240, 234, 0) 95%
           );
    }
	.p-conceptClosing__title {
		font-size: 1.5rem;
	}

}

/* ==========================================================================
   全セクション共通の暗化オーバーレイ（背景の上に #000 16%）
   セクションの背景画像/色の上、既存 shade/overlay の上、コンテンツの下に配置。
   ::after は DOM 上の最後に追加されるので、z-index: -1 で他の負値レイヤーより
   前面（コンテンツより背面）に来る。
   ========================================================================== */
.p-conceptHero,
.p-conceptVessel,
.p-conceptBand{
	position: relative;    /* ::after が section 基準で positioning されるよう保証 */
	isolation: isolate;    /* 負値 z-index が他セクションへ漏れないよう stacking context を閉じる */
}

.p-conceptHero::after,
.p-conceptVessel::after,
.p-conceptBand::after{
	content: "";
	/* position: absolute; */
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.64);
}


/* --- 404 ページ（旧 404.css） --- */
@charset "UTF-8";

/* =========================================================
   404 Not Found Page
   ========================================================= */

.p-error404{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding-block: clamp(4rem, 10vw, 8rem);
    overflow: hidden;
}

.p-error404::before,
.p-error404::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.p-error404::before{
    top: -120px;
    left: -120px;
    width: 380px;
    height: 380px;
    background: rgba(164, 172, 244, 0.35);
}

.p-error404::after{
    bottom: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    background: rgba(14, 26, 130, 0.18);
}

.p-error404__inner{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.p-error404__number{
    position: relative;
    font-family: "Shippori Mincho", "Hina Mincho", "游明朝", serif;
    font-weight: 700;
    font-size: clamp(5rem, 22vw, 8rem);
    line-height: 1;
    letter-spacing: 0.02em;
    color: #0b191c;
    margin-bottom: 1.5rem;
    user-select: none;
}

.p-error404__number::after{
    content: "";
    display: block;
    width: 3.5rem;
    height: 2px;
    margin: 1.25rem auto 0;
    background: linear-gradient(90deg, transparent, #0e1a82, transparent);
}

.p-error404__title{
    font-family: "Shippori Mincho", "Hina Mincho", "游明朝", serif;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 600;
    color: #0b191c;
    letter-spacing: 0.12em;
    margin: 0 0 1rem;
}

.p-error404__subtitle{
    font-family: "Shippori Mincho", "Hina Mincho", "游明朝", serif;
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    font-weight: 500;
    line-height: 1.7;
    color: #191c35;
    letter-spacing: 0.08em;
    margin: 0 0 2rem;
}

.p-error404__lead{
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 2;
    color: #555656;
    letter-spacing: 0.06em;
    margin: 0 0 3rem;
}

.p-error404__actions{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.p-error404__actions .c-button--back{
    margin: 0;
}

.p-error404__contact{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #0e1a82;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.p-error404__contact::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0.6);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.p-error404__contact:hover{
    opacity: 0.75;
}

.p-error404__contact:hover::after{
    transform: scaleX(1);
}

@media (max-width: 768px){
    .p-error404 {
        min-height: auto;
        padding-block: clamp(3rem, 12vw, 5rem);
    }

    .p-error404::before,
    .p-error404::after {
        width: 260px;
        height: 260px;
        filter: blur(60px);
    }

    .p-error404__lead {
        text-align: left;
    }
}


/* ==========================================================================
   店舗ページ（音羽茶寮 / 336 sansaro / 茶寮 器楽）
   page/*.html 由来のデザイン。共通 CSS と .l-inner 等が衝突するため、
   すべて body クラスでスコープしている。
   ※ 店舗ページには ress を読み込まない（このデザインは content-box 前提。
     header.php 側で読み込みを分岐している）。
   ========================================================================== */

/* --- リセット（旧 assets/shop/css/reset.css） --- */
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku),
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) div,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) span,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) applet,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) object,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) iframe,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) h1,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) h2,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) h3,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) h4,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) h5,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) h6,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) p,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) blockquote,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) pre,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) a,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) abbr,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) acronym,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) address,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) big,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) cite,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) code,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) del,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) dfn,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) em,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) img,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) ins,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) kbd,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) q,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) s,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) samp,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) small,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) strike,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) strong,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) sub,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) sup,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) tt,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) var,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) b,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) u,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) i,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) center,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) dl,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) dt,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) dd,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) ol,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) ul,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) li,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) ol fieldset,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) form,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) label,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) legend,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) table,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) caption,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) tbody,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) tfoot,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) thead,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) tr,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) th,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) td,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) article,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) aside,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) canvas,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) details,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) embed,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) figure,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) figcaption,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) footer,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) header,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) hgroup,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) menu,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) nav,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) output,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) ruby,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) section,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) summary,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) time,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) mark,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) audio,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) /* HTML5 display-role reset for older browsers */
article,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) aside,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) details,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) figcaption,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) figure,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) footer,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) header,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) hgroup,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) menu,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) nav,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) section{
    display: block;
}

:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku){
    line-height: 1;
}

:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) ol,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) ul,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) li{
    list-style: none;
}

:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) blockquote,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) q{
    quotes: none;
}

:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) blockquote:before,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) blockquote:after,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) q:before,
:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) q:after{
    content: '';
    content: none;
}

:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) a{
    text-decoration: none;
}

:where(body.p-otowasaryo,body.p-sansaro,body.p-kiraku) table{
    border-collapse: collapse;
    border-spacing: 0;
}


/* --- 店舗デザイン本体（旧 assets/shop/css/style.css） --- */
@charset "UTF-8";
html{
  scroll-behavior: smooth;
}

body:where(.p-otowasaryo,.p-sansaro,.p-kiraku){
  color: #333;
  background-color: #f8f5ee;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:where(.p-otowasaryo,.p-sansaro,.p-kiraku) img:where(:not(.p-asahidoLogoBand__mark img, .l-footerAsahido__brand img)){
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

body:where(.p-otowasaryo,.p-sansaro,.p-kiraku) a{
  color: inherit;
  text-decoration: none;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .l-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100vh;
  }

@media (max-width: 980px) {
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .l-header {
	position: static;
	top: auto;
	left: auto;
	width: auto;
	height: auto;
}
}

/* 店舗ページの .l-inner。共通 CSS を効かせていないので、ここで完結させる。
   旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す）。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .l-inner{
    box-sizing: border-box;
    width: calc(100% - 100px);
    margin: 0 0 0 auto;
    padding: 0;
  }


@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .l-inner{
    width: 90%;
    margin-inline: auto;
  }
}

@media (min-width: 1920px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .l-inner{
    max-width: 1920px;
    margin-inline: auto;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-button{
  display: flex;
  justify-content: center;
  padding: 16px 0;
  margin-top: 40px;
  width: 100%;
  max-width: 360px;
  background-color: #2f2911;
  border: 1px solid #707070;
  color: #fff;
  font-family: "Hina Mincho", serif;
  font-size: 16px;
  align-items: center;
  gap: 16px;
  transition: all 0.4s;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-button:after{
  content: "";
  width: 9px;
  height: 18px;
  background-image: url(../shop/images/arrow.svg);
  background-size: contain;
  display: block;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-button{
    font-size: 14px;
    padding: 12px 0;
    margin-top: 24px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-button:hover{
  opacity: 0.6;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-para{
  min-height: 560px;
  width: 100%;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-para{
    min-height: 300px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-para--grid3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-para--grid3 .c-para--grid{
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100dvh;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-para--grid3 .c-para--grid:nth-child(1){
  background-image: url(../shop/images/para3_1.png);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-para--grid3 .c-para--grid:nth-child(2){
  background-image: url(../shop/images/para3_2.png);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .c-para--grid3 .c-para--grid:nth-child(3){
  background-image: url(../shop/images/para3_3.png);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .para3{
  opacity: 0;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .para3.is-visible{
  opacity: 1;
}

/* パララックス（para1 / para2）
   background-attachment: fixed は iOS Safari が無視し、
   macOS Safari も cover との組み合わせで拡大率が崩れる。
   代わりに、画面いっぱいの固定レイヤー（擬似要素）を敷き、
   この要素の clip-path で切り抜くことで同じ見え方を作る。
   clip-path は position: fixed の包含ブロックを作らないので、
   レイヤーはビューポート基準のまま固定され、枠だけが動く。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .para1,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .para2{
  position: relative;
  clip-path: inset(0);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .para1::before,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .para2::before{
  content: "";
  position: fixed;
  inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .para1::before{
  background-image: url(../shop/images/para1.png);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .para2::before{
  background-image: url(../shop/images/para2.png);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv{
  position: relative;
  padding: 11.875rem 0 10.625rem;
  background-image: url(../shop/images/fv_bg.png);
  background-size: cover;
  background-position: center;
}

/* FV 背景の動画レイヤー。背景画像の上に重ねるだけで、余白や中身の位置は変えない。
   読み込み前・再生できない環境では下の背景画像がそのまま見える。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 装飾なので操作対象にしない */
  pointer-events: none;
}

/* 中身を動画レイヤーより前に出す */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__inner{
  position: relative;
  z-index: 1;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv{
    padding:  7rem 0 7.5rem;
  }
}



body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__inner{
  display: grid;
  gap: 180px;
  /* ロゴ・見出し・リード文は、左帯（.c-menuOpen__wrap 80px）を除いた
     コンテンツエリアの左右中央に置く。
     他セクションの .l-inner は右寄せ（左 100px 空け）のままにしたいので、
     FV だけここで上書きする。 */
  width: calc(100% - 80px);
  margin: 0 0 0 80px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__inner{
    gap: 1.25rem;
    /* この幅では他セクションと同じ扱い（画面中央）に戻す */
    width: 90%;
    margin-inline: auto;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__logo{
  width: 75px;
  margin-inline: auto;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__logo{
    width: 32px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__title{
  font-size: 2rem;
  line-height: 1.44;
  text-align: center;
  font-family: "Hina Mincho", serif;
  color: #fff;
  padding: 17px 220px 15px 220px;
  width: fit-content;
  margin-inline: auto;
  background: linear-gradient(to right, transparent, rgba(25, 19, 19, 0.64), transparent);
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__title{
    font-size: 1.125rem;
    padding: 16px 0;
  }
}

/* FV のリード文。画像から本文テキストに置き換えたので、
   デザインどおり縦書き（右→左）で組む。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__lead{
  display: flex;
  /* 縦書きでは flex の主軸が 90 度回る。
     column が「右から左」＝段落の並び、row が「上から下」＝行方向になる。 */
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  writing-mode: vertical-rl;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__lead p{
  margin: 0;
}



@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__lead{
    margin-top: 80px;
    gap: 1.25rem;
    font-size: 14px;
    line-height: 2;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__news-box{
  background-color: #0b191c;
  padding: 48px;
  color: #fff;
  font-size: 1.125rem;
  display: grid;
  gap: 18px;
  width: fit-content;
  position: absolute;
  right: 0;
  top: calc(100vh - 160px - 100px);
  max-width: 584px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__news-box{
    padding: 16px 24px;
    max-width: 240px;
    top: auto;
    bottom: 16px;
    gap: 8px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__label{
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  width: fit-content;
  font-size: 0.7rem;
  letter-spacing: 0.05rem;
}

/* TOP の重要なお知らせと同じ字送りに揃える */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__news-title{
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__label{
    font-size: 0.625rem;
    padding: 4px 8px;
  }
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__news-title{
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__news-title a{
  color: inherit;
  text-decoration: none;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__news-title a:hover{
  text-decoration: underline;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about-inner,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu-free-inner,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel-inner{
  padding: 8.75rem 0;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about-inner,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu-free-inner,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel-inner{
    padding: 5rem 0;
    width: 80%;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu-free-inner{
  display: flex;
  flex-direction: column;
  gap: 8.75rem;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu-free-inner{
    gap: 80px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__free,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel{
  font-size: 1.125rem;
  line-height: 1.56;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__free,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel{
    font-size: 0.875rem;
  }
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about .p-contents__wrap-text,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap-text,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__free .p-contents__wrap-text,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__wrap-text{
    width: 100%;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about{
  background-image: url("../shop/images/contents_bg1.png");
  background-size: cover;
  background-position: center;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about .p-contents__wrap{
    justify-content: right;
    margin-right: 96px;
  }

@media (max-width: 980px) {
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about .p-contents__wrap {
	justify-content: normal;
	margin-right: 0;
}
}

/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about .p-contents__wrap-text{
    align-items: center;
  }

@media (max-width: 980px) {
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about .p-contents__wrap-text {
	align-items: normal;
}
}


body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu-free{
  background-image: url("../shop/images/contents_bg2.png");
  background-size: cover;
  background-position: center;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel{
  background-image: url("../shop/images/contents_bg3.png");
  background-size: cover;
  background-position: center;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__wrap{
  display: flex;
  align-items: flex-start;
  /* 写真と本文の間。デザイン相当まで詰める（戻し対応） */
  gap: clamp(24px, 2vw, 40px);
  margin-left: auto;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__wrap{
    flex-wrap: wrap;
    width: 100%;
  }
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__wrap-text{
    display: flex;
    align-items: flex-end;
    gap: 32px;
  }

@media (max-width: 980px) {
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__wrap-text {
	display: block;
	align-items: normal;
	gap: normal;
}
}


/* 画像は 1920px 時の実寸（815 / 648 / 541px）で置かれており、
   幅が狭くなっても縮まないためノート PC 幅では大きすぎた。
   1920px の値を上限に vw で比例縮小させる。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__wrap-image img{
  max-width: 100%;
  height: auto;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about .p-contents__wrap-image{
  width: min(42.45vw, 815px);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__free .p-contents__wrap-image{
  width: min(28.18vw, 541px);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap-image,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__wrap-image{
  width: min(33.75vw, 648px);
}

/* 2x2 は列を固定 320px にしていたので、親幅に追随させる */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .u-grid-2x2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1360px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__wrap-image{
    width: 50%;
  }
}

@media (max-width: 980px){
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__wrap-image,
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__about .p-contents__wrap-image,
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap-image, 
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__wrap-image,
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__free .p-contents__wrap-image {
    width: 100%;
  }
}

/* 336・器楽は節ごとに画像の組み方が違うので、上の共通指定ではなく
   節単位で 1920px 時の実寸を上限にした vw 指定を当てる。
   1360px 以下は既存の 100% 指定に任せるため min-width で切る。 */
/* 336・器楽は節ごとに画像の組み方が違うので、上の共通指定ではなく
   節単位で 1920px 時の実寸を上限にした vw 指定を当てる。
   1360px 以下は既存の 100% 指定に任せるため、直後で打ち消す。 */
#sansaro .p-contents__contents1 .p-contents__wrap-image{
  width: min(42.4vw, 813px);
}

#sansaro .p-contents__contents3 .p-contents__wrap-image{
  width: min(68.07vw, 1307px);
}
/* 2節目・4節目と器楽は 1360px 以下の指定も上書きする必要があるので、
   この下の #sansaro / #kiraku ブロックで別途指定している。 */

@media (max-width: 1360px){
#sansaro .p-contents__contents1 .p-contents__wrap-image{
    width: 50%;
  }

#sansaro .p-contents__contents3 .p-contents__wrap-image{
    width: 100%;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__heading{
  font-size: 2.25rem;
  letter-spacing: 0.2em;
  font-family: "Hina Mincho", serif;
  border-right: 1px solid #000;
  padding-right: 4px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__heading.writing_rl{
    writing-mode: horizontal-tb;
    /* 横書きに戻すここでは、幅に応じて折り返してよい */
    white-space: normal;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    margin-bottom: 16px;
    font-size: 1.25rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__text{
  font-family: var(--font-jp-gothic);
  font-weight: 400;
  font-size: 1rem;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__text{
    font-size: 0.875rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__text,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__free .p-contents__text,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__text{
  max-width: 360px;
}



body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__free .p-contents__wrap,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__wrap{
  width: 90%;
  max-width: 1200px;
  /* space-between だと写真を小さくしたぶんがそのまま隙間に回って
     写真と読み文字が離れてしまうので、間隔は gap だけで決める。 */
  justify-content: center;
  margin: 0 auto;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__free .p-contents__wrap,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__wrap{
    width: 100%;
    flex-direction: column;
  }
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu-free .p-contents__menu .p-contents__wrap {
    flex-direction: column-reverse;
}
}

/* SP は「見出し → 写真 → 本文」の順に並べ替える。
   見出しと本文は .p-contents__wrap-text に入れ子になっていて写真と兄弟ではないため、
   その箱を display: contents で外し、3 つを同じ並びに出してから order で入れ替える。 */
@media (max-width: 768px){
  /* 980px 以下で menu-free 内は column-reverse になっているので、
     同じ詳細度で打ち消してから order で並べる。 */
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap,
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu-free .p-contents__menu .p-contents__wrap{
    flex-direction: column;
  }

  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap-text{
    display: contents;
  }

  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__heading{
    order: 1;
  }

  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap-image{
    order: 2;
  }

  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__text{
    order: 3;
  }
}


body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__wrap{
  flex-direction: row-reverse;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__menu .p-contents__wrap,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__wrap{
    flex-direction: column;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel{
  margin-top: 560px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel{
    margin-top: 300px;
  }
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__wrap{
    align-items: flex-end;
  }

@media (max-width: 980px) {
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-contents__vessel .p-contents__wrap {
	align-items: flex-start;
}
}


body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button{
  position: relative;
  height: 25rem;
  background-image: url("../shop/images/menu_bg.png");
  background-size: cover;
  background-position: center left -2vw;
  display: flex;
}

/* hover 時に背景全体をうすくする白のオーバーレイ（円の拡大と併用） */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.28);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button:hover::after{
  opacity: 1;
}

/* 文字・円はオーバーレイより前に */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__link{
  position: relative;
  z-index: 1;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button{
    height: 7.5rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__link{
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: clamp(155px, 12.5vw, 240px);
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__link{
    padding-left: 24px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__text{
  font-family: "Hina Mincho", serif;
  color: #fff;
  font-size: 1.5rem;
  position: relative;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__text{
    font-size: 1rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__text:before{
  content: "";
  width: 150px;
  height: 1px;
  background-color: #fff;
  position: absolute;
  right: -182px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__text:before{
    width: 80px;
    right: -100px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__text:after{
  content: "";
  width: 44px;
  height: 44px;
  border: 1px solid #fff;
  border-radius: 100vmax;
  position: absolute;
  right: -204px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__text:after{
    width: 32px;
    height: 32px;
    right: -120px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-menu-button__link:hover .p-menu-button__text:after{
  transform: translateY(-50%) scale(1.5);
}

/* 背景はパララックス。para1 / para2 と同じく、画面いっぱいの固定レイヤーを
   セクションの clip-path で切り抜く方式にする
   （background-attachment: fixed は iOS Safari が無視するため使わない）。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka{
  position: relative;
  padding: 120px 0 0 0;
  clip-path: inset(0);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("../shop/images/asahizaka_bg.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* 背景レイヤーより前に出す。
   レイヤー側を z-index: -1 にする手もあるが、祖先に背景があると
   その下に隠れてしまうため、中身を上げる形にしている。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka__inner{
  position: relative;
  z-index: 1;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka{
    padding: 40px 0 0;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka__box{
  text-align: center;
  width: 90%;
  max-width: 870px;
  margin-inline: auto;
  padding: 64px 0 160px 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: grid;
  gap: 80px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka__box{
    gap: 32px;
    padding: 32px 0 64px 0;
    max-width: 400px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka__box p{
  padding: 0 140px;
  line-height: calc(42/20);
  font-size: 1rem;
  font-family: var(--font-jp-gothic);
  color: #0b191c;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka__box p{
    text-align: left;
    padding: 0 16px;
    font-size: 0.875rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka__heading{
  justify-self: center;
  font-size: 2.5rem;
  font-family: "Hina Mincho", serif;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka__heading{
    font-size: 1.5rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka__heading-indent{
  display: inline-block;
  margin-top: 5em;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka__map{
  width: 90%;
  justify-self: center;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-slider{
  overflow: hidden;
  pointer-events: none;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-slider__track{
  display: flex;
  width: max-content;
  animation: p-slider-scroll 40s linear infinite;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-slider__group{
  display: flex;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-slider__item{
  width: auto;
  height: 310px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-slider__item{
    height: 200px;
  }
}

/* SP は 200px だと画面幅の半分を占めてしまうので、画面幅に対する比率で縮める */
@media (max-width: 768px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-slider__item{
    height: clamp(110px, 34vw, 170px);
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-slider__item img{
  width: auto;
  height: 100%;
  object-fit: cover;
}

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

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq{
  padding: 8.75rem 0;
  background-color: #f8f5ee;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq{
    padding: 80px 0;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__inner{
  display: grid;
  justify-items: center;
  gap: 64px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__inner{
    gap: 32px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__heading{
  font-size: 4rem;
  text-align: center;
  font-family: "EB Garamond", serif;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__heading{
    font-size: 1.5rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 980px;
  gap: .625rem;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__item a{
  display: block;
  padding: .75rem 2rem;
  background-color: #fff;
  color: #333;
  font-size: 0.9rem;
  border: 1px solid #c8c7a4;
  font-weight: 700;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__item a{
    padding: .5rem .75rem;
    font-size: 0.875rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-wrapper{
  display: grid;
  gap: 56px;
  max-width: 1200px;
  width: 90%;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-wrapper{
    gap: 24px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-wrap{
  scroll-margin-top: 40px;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-item{
  padding: 20px 56px 24px;
  border-top: 1px solid #c8c7a4;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-item{
    padding: 8px 16px 12px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-title{
  position: relative;
  padding-left: 20px;
  /* 区切り線は見出し側に持たせる（閉じている時も線が見えるように） */
  margin-bottom: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid #c8c7a4;
  font-size: 1.5rem;
  font-family: "Hina Mincho", serif;
}

/* 左の縦棒。border-left だと padding-bottom まで伸びてしまうため、
   疑似要素で文字サイズと同じ長さ（1em）にする */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-title::before{
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 4px;
  height: 1em;
  background: #333;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-list .p-faq__qa-item:first-child{
  border-top: 0;
}

/* --- カテゴリー単位の開閉（既定は閉） --- */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-groupToggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-groupChevron{
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-groupToggle[aria-expanded="true"] .p-faq__qa-groupChevron{
  transform: rotate(225deg);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-wrap .p-faq__qa-list{
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-wrap.is-open .p-faq__qa-list{
  max-height: 400rem;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-title{
    padding-left: 8px;
    margin-bottom: 0;
    padding-bottom: 8px;
    font-size: 1.125rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-right: 36px;
  cursor: pointer;
  list-style: none;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question{
    gap: 8px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question::-webkit-details-marker{
  display: none;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question::before,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  background-color: #000;
  transition: transform 0.3s;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question::before{
  width: 14px;
  height: 2px;
  transform: translateY(-50%);
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question::before{
    width: 12px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question::after{
  width: 2px;
  height: 14px;
  right: 6px;
  transform: translateY(-50%) rotate(0deg);
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question::after{
    height: 12px;
    right: 5px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question .p-faq__qa-text{
  font-weight: 700;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-question .p-faq__qa-text{
    font-size: 0.875rem;
    padding-top: 4px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-detail[open] .p-faq__qa-question::after{
  transform: translateY(-50%) rotate(90deg);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-answer{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 24px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-answer{
    padding-top: 12px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-answer .p-faq__qa-text{
  font-weight: 400;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-answer .p-faq__qa-text{
    font-size: 0.875rem;
    padding-top: 4px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-label{
  font-size: 1.125rem;
  font-weight: 700;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-label{
    font-size: 1rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__qa-text{
  padding-top: 8px;
  font-size: 1rem;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop{
  background-image: url(../shop/images/shop_bg.png);
  background-size: cover;
  background-position: center;
  padding: 120px 0;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop{
    padding: 60px 0;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__wrap{
  display: flex;
  align-items: center;
  /* 写真と概要をひとかたまりで中央に置き、間隔は詰める（戻し対応）。
     概要側が余白を吸って横いっぱいに広がらないよう幅を内容ぶんに抑える。 */
  justify-content: center;
  gap: clamp(24px, 2vw, 40px);
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

@media (max-width: 1280px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__wrap{
    flex-direction: column;
    gap: 56px;
  }
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__wrap{
    flex-direction: column;
    gap: 40px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__figure{
  flex: 0 1 auto;
  max-width: 560px;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__image{
  width: 100%;
  height: auto;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__access{
  /* 余白を吸って横に広がらないよう内容幅で置く。写真との間隔は wrap の gap で管理 */
  flex: 0 1 auto;
  color: #fff;
  padding: 0;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__access{
    padding: 0 24px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__heading{
  color: #967830;
  width: fit-content;
  padding: 0 90px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__heading:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 78px;
  height: 1px;
  background-color: #967830;
  transform: translateY(-50%);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__heading:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 78px;
  height: 1px;
  background-color: #967830;
  transform: translateY(-50%);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__title{
  font-family: "EB Garamond", serif;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__lead{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.2em;
  line-height: 1.8;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__list{
  margin-top: 50px;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  width: fit-content;
  margin-inline: auto;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__list{
    margin-top: 24px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__item{
  display: flex;
  font-size: 1.125rem;
  line-height: 2.375rem;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__item{
    font-size: 0.875rem;
    line-height: 1.5rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__label{
  flex-shrink: 0;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__item.no_reservation{
  align-items: center;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__item.no_reservation:after{
  content: "予約不可";
  font-size: 0.8rem;
  background-color: #fff;
  color: #333;
  font-weight: 700;
  padding: 4px;
  height: fit-content;
  display: block;
  line-height: 1;
  margin-left: 8px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-shop__item.no_reservation:after{
    font-size: 0.75rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-map{
  height: 750px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-map{
    height: 320px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news{
  padding: 160px 0;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news{
    padding: 80px 0;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__heading{
  text-align: center;
  font-size: 3rem;
  font-family: "EB Garamond", serif;
  margin-bottom: 80px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__heading{
    font-size: 1.5rem;
    margin-bottom: 24px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__list{
  display: grid;
  flex-wrap: wrap;
  /* PC は 5 件を 1 行に並べる（戻し対応） */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px 40px;
  margin: 0 auto;
  width: 90%;
}

/* Instagram フィード（プラグインのショートコード出力）を入れる枠。
   中の見た目はプラグイン側の設定に任せ、ここは幅と余白だけ揃える。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__feed{
  width: 90%;
  margin: 0 auto;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(125px, 100%), 1fr));
    gap: 24px 8px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__date{
  font-size: 0.9375rem;
  color: #8c8d8d;
  padding-top: 8px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__date{
    font-size: 0.5rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__text{
  position: relative;
  font-size: 1.125rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-top: 16px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__text{
    font-size: 0.75rem;
    padding-top: 4px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__more{
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  color: #8c8d8d;
  background-color: #f8f5ee;
  padding: 0 4px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__more{
    font-size: 0.625rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__more.is-visible{
  display: block;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__instagram{
  position: relative;
  display: grid;
  /* ID と「Instagramを見る」はもっと近づける（戻し対応: gap 16px → 0） */
  gap: 0;
  width: fit-content;
  margin: 54px auto 0;
  padding-bottom: 12px;
  color: #0b191c;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__instagram::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 80%;
  height: 1px;
  background-color: #0e1c1f;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__instagram::before{
  content: "";
  position: absolute;
  right: 10%;
  bottom: 0;
  width: 12px;
  height: 1px;
  transform-origin: right bottom;
  background-color: #0e1c1f;
  transform: rotate(30deg);
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__instagram-id{
  font-size: 1.5rem;
  font-weight: 700;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__instagram-id{
    font-size: 1.5rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__instagram-text{
  font-size: 0.9rem;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-news__instagram-text{
    font-size: 0.875rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture{
  padding: 100px 0 160px;
  background-color: #fff;
  overflow: hidden;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture{
    padding: 0 0 80px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__title-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading{
  font-family: "Hina Mincho", serif;
  font-size: 2rem;
  padding: 200px 0 24px;
  position: relative;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading:before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 75vw;
  height: 100%;
  background-image: url(../shop/images/sansaro/illust_image.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading:before{
    width: 106.6666666667vw;
    max-width: 800px;
    top: 15%;
  }
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading{
    font-size: 1.25rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading-indent{
  display: inline-block;
  margin-top: 3em;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__text{
  margin-top: 24px;
  /* 音羽茶寮のあさひ坂本文と同じサイズに統一 */
  font-size: 1rem;
  line-height: 1.8;
  max-width: 700px;
  font-weight: 400;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__text{
    font-size: 0.875rem;
    padding: 0 24px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__list{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
  margin-top: 80px;
  width: fit-content;
  margin-inline: auto;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__list{
    grid-template-columns: repeat(3, 1fr);
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__list li{
  max-width: 200px;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai{
  position: relative;
  padding: 64px 0;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai:before,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai:after{
  content: "";
  background-color: #011753;
  position: absolute;
  width: 100%;
  height: 1px;
  z-index: 1;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai__section-bg{
  position: absolute;
  inset: 0;
  opacity: 0.27;
  z-index: 0;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai__section-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai__text{
  display: flex;
  align-items: center;
  justify-content: center;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai__text img{
  padding: 64px 0;
  width: 80%;
  max-width: 800px;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about{
  background-color: #161e34;
  padding: 200px 0;
  color: #fff;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai__text img {
    width: 100%;
    padding: 24px 0;
}
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about{
    padding: 80px 0;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__wrapper{
  display: grid;
  gap: 100px;
  width: fit-content;
  margin-inline: auto;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__wrap{
  display: flex;
  align-items: center;
  gap: 48px;
  /* 写真を小さくしたぶんが隙間に回らないよう、間隔は gap だけで決める */
  justify-content: space-between;
  max-width: 1080px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__wrap{
    flex-direction: column;
    gap: 32px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__text-wrap{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__text-wrap{
    padding-left: 40px;
  }


@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__text-wrap{
    padding: 0 0 0 32px;
    gap: 16px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__heading{
  font-family: "Hina Mincho", serif;
  /* 音羽茶寮の見出し感に合わせてひと回り小さく */
  font-size: 1.5rem;
  position: relative;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__heading{
    /* padding-left: 1.5rem; */
    font-size: 1.25rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__heading:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -88px;
  width: 68px;
  height: 86px;
  transform: translateY(-50%);
  /* MOD: */
  /* background-image: url(../shop/images/sansaro/about_icon1.svg); */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__heading:before{
    width: 56px;
    height: 80px;
    left: -42px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__text{
  font-size: 1rem;
  font-weight: 400;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__text{
    font-size: 0.875rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__text span{
  font-weight: 700;
  line-height: 3;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__image{
    width: 40%;
  }


@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__image{
    width: 80%;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__image img{
  border-radius: 20px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__image img{
    border-radius: 8px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-about__wrap:nth-of-type(2) .p-about__heading:before{
  /* MOD: */
  /* background-image: url(../shop/images/sansaro/about_icon2.svg); */
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept{
  position: relative;
  overflow: hidden;
  padding: 260px 0;
  text-align: center;
  color: #fff;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept{
    padding: 120px 0;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__heading{
  font-family: "Hina Mincho", serif;
  font-size: 2.5rem;
  position: relative;
  z-index: 2;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__heading{
    font-size: 1.5rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__heading-sub{
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__heading-sub{
    font-size: 0.75rem;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__text{
  margin-top: 64px;
  font-weight: 400;
  max-width: 470px;
  margin-inline: auto;
  font-size: 1rem;
  width: 80%;
  position: relative;
  z-index: 2;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__text{
    width: 86%;
    font-size: 0.75rem;
    margin-top: 40px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__image{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 37.5vw;
  max-width: 720px;
  z-index: 0;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__image{
    width: 70%;
    max-width: 320px;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__image img{
  width: 100%;
  height: auto;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__image--left{
  /* 本文から遠すぎたので右へ寄せる（戻し対応: -100px → -40px） */
  left: -40px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__image--left{
    top: 20%;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__image--right{
  right: -100px;
}

@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-concept__image--right{
    top: 80%;
  }
}

#sansaro .p-fv{
  background-image: url(../shop/images/sansaro/fv_bg.png);
  padding: 370px 0 230px;
}

@media (max-width: 980px){
#sansaro .p-fv{
    padding: 240px 0 120px;
  }
}

#sansaro .p-fv__inner{
  gap: 80px;
}

@media (max-width: 980px){
#sansaro .p-fv__inner{
    gap: 120px;
  }
}

#sansaro .p-fv__lead{
  margin-top: 80px;
}

@media (max-width: 980px){
#sansaro .p-fv__logo{
    width: 56px;
  }
}

#sansaro .p-menu-button{
  background-image: url(../shop/images/sansaro/menu_button.png);
}

#sansaro .p-contents{
  background-image: url(../shop/images/sansaro/contents_bg.png);
  background-size: cover;
  background-position: center;
  padding: 240px 0;
  color: #fff;
  display: grid;
  gap: 240px;
}

@media (max-width: 980px){
#sansaro .p-contents{
    gap: 120px;
    padding: 120px 0;
  }
}

#sansaro .p-contents__heading{
  border-color: #fff;
}

#sansaro .p-contents__text{
  max-width: 440px;
}

#sansaro .p-contents__wrap{
  align-items: flex-end;
  margin-left: 0;
  width: 90%;
  max-width: 1400px;
}

@media (max-width: 980px){
#sansaro .p-contents__wrap{
    margin-inline: auto;
    align-items: flex-start;
    gap: 32px;
  }
}

#sansaro .p-contents__contents1,
#sansaro .p-contents__contents2,
#sansaro .p-contents__contents3,
#sansaro .p-contents__contents4{
  /* 音羽茶寮のコンテンツと文字サイズを統一 */
  font-size: 1rem;
  line-height: 1.56;
}

@media (max-width: 980px){
#sansaro .p-contents__contents1,
#sansaro .p-contents__contents2,
#sansaro .p-contents__contents3,
#sansaro .p-contents__contents4{
    font-size: 0.875rem;
  }
}

#sansaro .p-contents__contents1-inner,
#sansaro .p-contents__contents2-inner,
#sansaro .p-contents__contents3-inner,
#sansaro .p-contents__contents4-inner{
  display: flex;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
#sansaro .p-contents__contents1,
#sansaro .p-contents__contents3{
    padding-right: 5%;
  }

@media (max-width: 980px) {
#sansaro .p-contents__contents1 {
	padding-right: 0;
}
#sansaro .p-contents__contents3 {
	padding-right: 0;
}
}

/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
#sansaro .p-contents__contents1-inner,
#sansaro .p-contents__contents3-inner{
    justify-content: flex-end;
  }

@media (max-width: 980px) {
#sansaro .p-contents__contents1-inner {
	justify-content: normal;
}
#sansaro .p-contents__contents3-inner {
	justify-content: normal;
}
}

/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
#sansaro .p-contents__contents2-inner{
    justify-content: flex-start;
    margin: 0 auto 0 0;
  }

@media (max-width: 980px) {
#sansaro .p-contents__contents2-inner {
	justify-content: normal;
	margin: 0 auto;
}
}


@media (min-width: 1921px){
#sansaro .p-contents__contents2-inner{
    margin-inline: auto;
  }
}

#sansaro .p-contents__contents4-inner{
  justify-content: center;
}

#sansaro .p-contents__contents2-inner .p-contents__wrap,
#sansaro .p-contents__contents4-inner .p-contents__wrap{
  flex-direction: row-reverse;
}

@media (max-width: 980px){
#sansaro .p-contents__contents2-inner .p-contents__wrap,
#sansaro .p-contents__contents4-inner .p-contents__wrap{
    flex-direction: column;
  }
}

#sansaro .p-contents__contents2 .p-contents__wrap-image,
#sansaro .p-contents__contents3 .p-contents__wrap-image{
  display: flex;
  gap: 12px;
}

@media (max-width: 1360px){
#sansaro .p-contents__contents2 .p-contents__wrap-image,
#sansaro .p-contents__contents3 .p-contents__wrap-image{
    width: 100%;
  }
}

/* 2節目と4節目は 1360px 以下の 100% / 50% 指定だと逆に大きくなってしまうので、
   980px までは 1920px 時の実寸を上限にした vw 指定で通す（上の指定より後に置いて優先）。 */
/* 2節目と4節目は 1360px 以下の 100% / 50% 指定だと逆に大きくなってしまうので、
   1920px 時の実寸を上限にした vw 指定で通す（上の指定より後に置いて優先）。
   980px 以下は縦積みになるため直後で打ち消す。 */
#sansaro .p-contents__contents2 .p-contents__wrap-image{
    /* 指定幅より本文側が優先されて縮むので、ここだけ flex-shrink を止める */
    width: min(45.52vw, 874px);
    flex-shrink: 0;
  }

#sansaro .p-contents__contents4 .p-contents__wrap-image{
    width: min(34.9vw, 670px);
  }

@media (max-width: 980px){
#sansaro .p-contents__contents2 .p-contents__wrap-image{
    width: 100%;
    flex-shrink: 1;
  }

#sansaro .p-contents__contents4 .p-contents__wrap-image{
    width: 100%;
  }
}

@media (max-width: 980px){
#sansaro .p-contents__contents2 .p-contents__wrap-image,
#sansaro .p-contents__contents3 .p-contents__wrap-image{
    gap: 4px;
  }
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
#sansaro .p-contents__contents2 .p-contents__image,
#sansaro .p-contents__contents3 .p-contents__image{
    min-height: 480px;
    width: 100%;
  }

@media (max-width: 980px) {
#sansaro .p-contents__contents2 .p-contents__image {
	min-height: auto;
	width: auto;
}
#sansaro .p-contents__contents3 .p-contents__image {
	min-height: auto;
	width: auto;
}
}


#sansaro .p-contents__contents2 .p-contents__image img,
#sansaro .p-contents__contents3 .p-contents__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#sansaro .p-contents__wrap-body{
  display: grid;
  gap: 40px;
}

@media (max-width: 980px){
#sansaro .p-contents__wrap-body{
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
  }
}

#sansaro .p-contents__contents4 .p-contents__wrap-text{
  position: relative;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
#sansaro .p-contents__map{
    position: absolute;
    top: 24px;
    right: 0;
    width: 540px;
  }

@media (max-width: 980px) {
#sansaro .p-contents__map {
	position: static;
	top: auto;
	right: auto;
	width: auto;
}
}


#kiraku .p-fv{
  background-image: url(../shop/images/kiraku/fv_bg.png);
}

#kiraku .p-fv__title{
  background: linear-gradient(to right, transparent, rgba(25, 19, 19, 0.27), transparent);
}

#kiraku .p-fv__inner{
  gap: 96px;
}

#kiraku .p-fv__title span{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.125rem;
}

#kiraku .p-fv__lead{
  margin-top: 80px;
}

#kiraku .p-menu-button{
  background-image: url(../shop/images/kiraku/menu_bg.png);
}

#kiraku .p-concept{
  background-image: url(../shop/images/kiraku/consept_bg.png);
  background-size: cover;
  background-position: center;
}

#kiraku .p-contents{
  background-image: url(../shop/images/kiraku/contents_bg.png);
  background-size: cover;
  background-position: center;
  display: grid;
  gap: 120px;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
#kiraku .p-contents{
    padding: 160px 0;
  }


@media (max-width: 980px){
#kiraku .p-contents{
    padding: 80px 0;
  }
}

#kiraku .p-contents__wrap-body{
  display: grid;
  gap: 40px;
}

@media (max-width: 980px){
#kiraku .p-contents__wrap-body{
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
  }
}

#kiraku .p-contents__heading{
  position: relative;
}

#kiraku .p-contents__heading:after{
  font-size: 18px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  position: absolute;
  top: 0;
  right: -40px;
  letter-spacing: 0.1em;
}

@media (max-width: 980px){
#kiraku .p-contents__heading:after{
    font-size: 12px;
    right: inherit;
    top: -24px;
    left: 0;
  }
}

#kiraku .p-contents__contents1 .p-contents__heading:after{
  content: "京都の食を楽しむ";
}

#kiraku .p-contents__contents1 .p-contents__wrap{
  flex-direction: column;
  max-width: 1200px;
  margin-inline: auto;
  width: 90%;
}

@media (max-width: 980px){
#kiraku .p-contents__contents1 .p-contents__wrap{
    gap: 0;
    display: grid;
  }
}

#kiraku .p-contents__contents1 .p-contents__wrap-image{
  gap: 12px;
}

@media (max-width: 980px){
#kiraku .p-contents__contents1 .p-contents__wrap-image{
    gap: 4px;
  }
}

#kiraku .p-contents__contents1 .p-contents__wrap-text{
  gap: 64px;
  align-items: flex-start;
}

@media (max-width: 980px){
#kiraku .p-contents__contents1 .p-contents__wrap-text{
    display: contents;
  }
}

@media (max-width: 980px){
#kiraku .p-contents__contents1 .p-contents__text{
    grid-row: 2/3;
    margin-bottom: 32px;
  }
}

#kiraku .p-contents__contents2 .p-contents__heading:after{
  content: "京都の食を楽しむ";
}

#kiraku .p-contents__contents2 .p-contents__wrap{
  justify-content: left;
  max-width: 1825px;
  /* flex-wrap: wrap; */
  width: 100%;
  margin-inline: auto;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
#kiraku .p-contents__contents2 .p-contents__wrap{
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: center;
  }

@media (max-width: 980px) {
#kiraku .p-contents__contents2 .p-contents__wrap {
	flex-direction: row;
	align-items: flex-start;
	justify-content: normal;
}
}


@media (max-width: 980px){
#kiraku .p-contents__contents2 .p-contents__wrap{
    width: 80%;
  }
}

#kiraku .p-contents__contents2 .p-contents__wrap-image{
  max-width: 1040px;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
#kiraku .p-contents__contents3{
    margin-top: 200px;
  }

@media (max-width: 980px) {
#kiraku .p-contents__contents3 {
	margin-top: 0;
}
}


#kiraku .p-contents__contents3 .p-contents__wrap{
  flex-direction: column;
  width: 90%;
  max-width: 1625px;
  margin-inline: auto;
}

@media (max-width: 980px){
#kiraku .p-contents__contents3 .p-contents__wrap{
    gap: 32px;
  }
}

#kiraku .p-contents__contents3 .p-contents__heading{
  border: solid #000;
  border-width: 1px 0 0 0;
  letter-spacing: 0.1em;
}

@media (max-width: 980px){
#kiraku .p-contents__contents3 .p-contents__heading{
    font-size: 20px;
    border-width: 0 0 1px 0;
    margin-bottom: 16px;
  }
}

#kiraku .p-contents__contents3 .p-contents__heading:after{
  content: "清水寺門前で過ごす";
  right: inherit;
  left: 0;
  top: -40px;
}

@media (max-width: 980px){
#kiraku .p-contents__contents3 .p-contents__heading:after{
    font-size: 12px;
    right: inherit;
    top: -24px;
    left: 0;
  }
}

#kiraku .p-contents__contents3 .p-contents__wrap-text{
  flex-direction: column;
  align-items: flex-start;
}

#kiraku .p-contents__contents1 .p-contents__wrap-image,
#kiraku .p-contents__contents2 .p-contents__wrap-image,
#kiraku .p-contents__contents3 .p-contents__wrap-image{
  display: flex;
}

#kiraku .p-contents__contents1 .p-contents__image img,
#kiraku .p-contents__contents2 .p-contents__image img,
#kiraku .p-contents__contents3 .p-contents__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 980px){
#kiraku .p-contents__contents2 .p-contents__wrap-image,
#kiraku .p-contents__contents3 .p-contents__wrap-image{
    display: grid;
  }
}

@media (max-width: 1360px){
#kiraku .p-contents__wrap-image{
    width: 100%;
  }
}

/* 上の 100% だと 1360px 以下でかえって大きくなるので、980px までは
   1920px 時の実寸を上限にした vw 指定で通す（上の指定より後に置いて優先）。 */
/* 上の 100% だと 1360px 以下でかえって大きくなるので、
   1920px 時の実寸を上限にした vw 指定で通す（上の指定より後に置いて優先）。
   980px 以下は縦積みになるため直後で打ち消す。 */
#kiraku .p-contents__contents1 .p-contents__wrap-image{
    width: min(53.91vw, 1035px);
  }

#kiraku .p-contents__contents2 .p-contents__wrap-image{
    width: min(54.17vw, 1040px);
  }
  /* 3節目は画像2枚が既にほぼ比例縮小するので指定しない */

@media (max-width: 980px){
#kiraku .p-contents__contents1 .p-contents__wrap-image,
#kiraku .p-contents__contents2 .p-contents__wrap-image{
    width: 100%;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .u-fw-bold{
  font-weight: 700;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .u-fw-medium{
  font-weight: 400;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .u-font-mincho{
  font-family: "Hina Mincho", serif;
}
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .u-sp-only{
    display: none !important;
  }

@media (max-width: 980px) {
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .u-sp-only {
	display: revert;
}
}


@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .u-pc-only{
    display: none !important;
  }
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .u-grid-2x2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* 縦書きの見出し。
   縦書きは親に対して直交フローになるため、親の高さが決まっていないと
   「行の長さ」を確定できない。仕様ではこの場合ビューポートの高さを使うと定められており、
   Safari はそれに従うのでウィンドウの高さ次第で途中折り返しが起きる
   （Chrome は内容の長さを優先するため起きない）。
   いずれも 1 行組みの見出しなので、自動折り返しを禁止して高さに依存させない。
   意図した改行は <br> で入れているのでそちらは残る。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .writing_rl{
  writing-mode: vertical-rl;
  white-space: nowrap;
}



/* --- FV の全画面固定化（PC）------------------------------------------------
   動画が中途半端な位置で切れないよう、FV を画面いっぱいにし、
   動画・背景画像はビューポートに固定（TOP と同じパララックス）。
   固定レイヤーは clip-path でこのセクションの範囲だけに切り抜く（c-para と同じ方式）。 */
/* --- FV の全画面固定化 ---------------------------------------------------
   動画が中途半端な位置で切れないよう、FV を画面いっぱいにし、
   動画・背景画像はビューポートに固定（TOP と同じパララックス）。
   固定レイヤーは clip-path でこのセクションの範囲だけに切り抜く（c-para と同じ方式）。
   980px 以下は従来の縦積みレイアウトに戻すため、直後でまとめて打ち消す。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv{
  height: 100svh;
  min-height: 620px;
  padding: 0;
  display: flex;
  align-items: center;
  clip-path: inset(0);
  background-attachment: fixed;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__bg{
  position: fixed;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__inner{
  /* 100svh に収まるよう、ロゴ・キャッチ・リード文の間隔を画面高さに追随させる */
  gap: clamp(24px, 5svh, 120px);
}

/* ロゴとリード文は縦長なので、画面が低いと FV からはみ出して
   clip-path で下が切れてしまう。画面高さに応じた上限を持たせて、
   横幅・高さのどちらか厳しい方で自動的に縮むようにする
   （width を auto にしないと max-height が効いて縦だけ潰れる）。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__logo,
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__lead{
  display: flex;
  justify-content: center;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__logo img{
  width: auto;
  max-width: 100%;
  max-height: 20svh;
}

/* リード文は縦書き。高さは画面に追随させ、文字サイズも少し絞って
   1 段落が何列にも割れないようにする。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__lead{
  height: 42svh;
  max-height: 420px;
  font-size: clamp(12px, 1.6svh, 16px);
  gap: clamp(1.75rem, 4.4svh, 2.25rem);
}

/* 器楽はキャッチが 2 行あるぶん、リード文の高さをさらに詰める */
#kiraku .p-fv__lead{
  height: 36svh;
}

/* 音羽茶寮はロゴ・リード文が縦長の SVG なので、全画面に収まるようひと回り縮める */
body.p-otowasaryo .p-fv__logo{
  width: 48px;
}

body.p-otowasaryo .p-fv__lead{
  height: 40svh;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__news-box{
  top: auto;
  bottom: 40px;
}

/* 店舗別の ID 上書き（padding 370px 等）よりも強く効かせるため ID でも指定する */
#sansaro .p-fv,
#kiraku .p-fv{
  padding: 0;
  height: 100svh;
}

#sansaro .p-fv__inner,
#kiraku .p-fv__inner{
  gap: clamp(24px, 5svh, 120px);
}

.p-fv__lead,
#sansaro .p-fv__lead,
#kiraku .p-fv__lead{
  margin: 0 auto;
}

/* --- 980px 以下は従来の縦積みレイアウトに戻す --- */
@media (max-width: 980px){
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv{
    height: auto;
    min-height: 0;
    padding: 7rem 0 7.5rem;
    display: block;
    clip-path: none;
    background-attachment: scroll;
  }

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__bg{
    position: absolute;
  }

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__inner{
    gap: 1.25rem;
  }

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__logo{
    display: block;
    width: 32px;
  }

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__logo img{
    width: 100%;
    max-height: none;
  }

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__lead,
#kiraku .p-fv__lead,
body.p-otowasaryo .p-fv__lead{
    height: auto;
    max-height: none;
    font-size: 14px;
    gap: 1.25rem;
    writing-mode: horizontal-tb;
  }

body.p-otowasaryo .p-fv__logo{
    width: 32px;
  }

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__news-box{
    bottom: 16px;
  }

#sansaro .p-fv,
#kiraku .p-fv{
    height: auto;
    padding: 120px 0;
  }

#sansaro .p-fv__inner,
#kiraku .p-fv__inner{
    gap: 40px;
  }

#sansaro .p-fv__logo{
    width: 56px;
  }
}

/* 動画の上に TOP と同じ暗幕を掛けて文字を読みやすくする */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-fv__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

/* 336・器楽はキャッチ・リード文が大きすぎる指摘への対応（音羽茶寮は現状維持） */
/* 336・器楽はキャッチ・リード文が大きすぎる指摘への対応（音羽茶寮は現状維持）。
   980px 以下は上の共通 SP 指定に戻すため直後で打ち消す。 */
body:is(.p-sansaro,.p-kiraku) .p-fv__title{
  font-size: 1.5rem;
}

body:is(.p-sansaro,.p-kiraku) .p-fv__lead{
  font-size: clamp(12px, 1.5svh, 15px);
}

@media (max-width: 980px){
body:is(.p-sansaro,.p-kiraku) .p-fv__title{
    font-size: 1.125rem;
  }

body:is(.p-sansaro,.p-kiraku) .p-fv__lead{
    font-size: 14px;
  }
}


/* --- スクロールで順番に表示 ---------------------------------------------
   data-reveal を付けたブロックが画面に入ると assets/shop/js/main.js が
   is-inview を付け、中の要素が役割ごとの動きで現れる。
   html.is-reveal は header.php のインラインスクリプトが付けるので、
   JS が無効・読み込み失敗の場合はここの指定が一切当たらず最初から表示されたままになる。
   data-reveal は店舗ページのテンプレートにしか無いので、他のページには影響しない。

   動きの方針（ブランドイメージに合わせて静かに・ゆっくり）
     - 移動量は 0.75rem 程度まで。跳ねる動きや飛び出す拡大は使わない。
     - 縦書きの見出しは掛け軸のように上から下へ現れる（SP で横書きになる時は左から右へ）。
     - 写真は下から上へ開きながら、1.06 → 1 へゆっくり収まる。
     - 一覧の項目は並び順に少しずつ遅らせる（--rv-i は JS が渡す）。 */
.is-reveal [data-reveal] {
	/* 基本の尺と間。ゆっくり始まってゆっくり止まるイージング。 */
	--rv-dur: 1.5s;
	--rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rv-shift: 0.75rem;
	--rv-step: 0.12s;
	--rv-i: 0;
}

/* 縦書きの見出し：掛け軸のように上から下へ */
.is-reveal [data-reveal] :is(
	.p-contents__heading,
	.p-asahizaka__heading
) {
	clip-path: inset(0 0 100% 0);
	opacity: 0;
	/* 遅延だけ個別プロパティで指定する。transition ショートハンドの中に
	   var()/calc() を書くと Safari で宣言ごと無効になることがあるため。 */
	transition-property: opacity, clip-path;
	transition-duration: 1.7s;
	transition-timing-function: var(--rv-ease);
	transition-delay: 0s;
}

.is-reveal [data-reveal].is-inview :is(
	.p-contents__heading,
	.p-asahizaka__heading
) {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

/* 980px 以下では見出しが横書きになるので、筆を運ぶ向きに合わせて左から右へ */
@media (max-width: 980px) {
	.is-reveal [data-reveal] :is(
		.p-contents__heading,
		.p-asahizaka__heading
	) {
		clip-path: inset(0 100% 0 0);
	}
}

/* 横書きの見出し：静かに浮き上がる */
.is-reveal [data-reveal] :is(
	.p-news__heading,
	.p-concept__heading,
	.p-about__heading,
	.p-shop__heading,
	.p-culture__heading
) {
	opacity: 0;
	transform: translateY(var(--rv-shift));
	transition-property: opacity, transform;
	transition-duration: var(--rv-dur);
	transition-timing-function: var(--rv-ease);
	transition-delay: 0s;
}

/* 本文・リード：見出しのあとに続く */
.is-reveal [data-reveal] :is(
	.p-contents__text,
	.p-culture__text,
	.p-asahizaka__text,
	.p-concept__text,
	.p-about__text,
	.p-shop__lead,
	.p-yurai__text
) {
	opacity: 0;
	transform: translateY(var(--rv-shift));
	transition-property: opacity, transform;
	transition-duration: var(--rv-dur);
	transition-timing-function: var(--rv-ease);
	transition-delay: calc(var(--rv-step) * 2);
}

.is-reveal [data-reveal].is-inview :is(
	.p-news__heading,
	.p-concept__heading,
	.p-about__heading,
	.p-shop__heading,
	.p-culture__heading,
	.p-contents__text,
	.p-culture__text,
	.p-asahizaka__text,
	.p-concept__text,
	.p-about__text,
	.p-shop__lead,
	.p-yurai__text
) {
	opacity: 1;
	transform: none;
}

/* 写真：下から上へ開き、ゆっくり収まる */
.is-reveal [data-reveal] :is(
	.p-contents__image,
	.p-about__image,
	.p-shop__figure,
	.p-asahizaka__map
) {
	clip-path: inset(100% 0 0 0);
	transition-property: clip-path;
	transition-duration: 1.6s;
	transition-timing-function: var(--rv-ease);
	transition-delay: var(--rv-step);
}

.is-reveal [data-reveal] :is(
	.p-contents__image,
	.p-about__image,
	.p-shop__figure,
	.p-asahizaka__map
) img {
	/* clip-path 側で切り抜かれるので、はみ出しは見えない */
	transform: scale(1.06);
	transition-property: transform;
	transition-duration: 2.1s;
	transition-timing-function: var(--rv-ease);
	transition-delay: var(--rv-step);
}

.is-reveal [data-reveal].is-inview :is(
	.p-contents__image,
	.p-about__image,
	.p-shop__figure,
	.p-asahizaka__map
) {
	clip-path: inset(0 0 0 0);
}

.is-reveal [data-reveal].is-inview :is(
	.p-contents__image,
	.p-about__image,
	.p-shop__figure,
	.p-asahizaka__map
) img {
	transform: none;
}

/* 一覧の項目：並び順に一つずつ */
.is-reveal [data-reveal] :is(
	.p-news__item,
	.p-culture__item,
	.p-shop__item
) {
	opacity: 0;
	transform: translateY(var(--rv-shift));
	transition-property: opacity, transform;
	transition-duration: 1.2s;
	transition-timing-function: var(--rv-ease);
	transition-delay: calc((var(--rv-i) + 2) * var(--rv-step));
}

.is-reveal [data-reveal].is-inview :is(
	.p-news__item,
	.p-culture__item,
	.p-shop__item
) {
	opacity: 1;
	transform: none;
}

/* メニューボタン */
.is-reveal [data-reveal] .p-menu-button__link {
	opacity: 0;
	transform: translateY(var(--rv-shift));
	transition-property: opacity, transform;
	transition-duration: var(--rv-dur);
	transition-timing-function: var(--rv-ease);
}

.is-reveal [data-reveal].is-inview .p-menu-button__link {
	opacity: 1;
	transform: none;
}

/* 文字の右へ伸びる罫線は、文字が出たあとに左から右へ引く。
   上の .p-menu-button__text:before が translateY(-50%) で上下中央を取っているので、
   打ち消さないように translateY を残したまま scaleX を足す。 */
.is-reveal [data-reveal] .p-menu-button__text::before {
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	transition-property: transform;
	transition-duration: 1.4s;
	transition-timing-function: var(--rv-ease);
	transition-delay: 0.35s;
}

.is-reveal [data-reveal].is-inview .p-menu-button__text::before {
	transform: translateY(-50%) scaleX(1);
}

/* FV：読み込み直後にロゴ→見出し→リード文の順で現れる */
.is-reveal [data-reveal] :is(
	.p-fv__logo,
	.p-fv__title,
	.p-fv__lead
) {
	opacity: 0;
	transform: translateY(var(--rv-shift));
	transition-property: opacity, transform;
	transition-duration: 1.8s;
	transition-timing-function: var(--rv-ease);
}

.is-reveal [data-reveal] .p-fv__title {
	transition-delay: 0.3s;
}

.is-reveal [data-reveal] .p-fv__lead {
	transition-delay: 0.6s;
}

.is-reveal [data-reveal].is-inview :is(
	.p-fv__logo,
	.p-fv__title,
	.p-fv__lead
) {
	opacity: 1;
	transform: none;
}

/* 動きを抑える設定のときは一切動かさない */
@media (prefers-reduced-motion: reduce) {
	.is-reveal [data-reveal] *,
	.is-reveal [data-reveal] :is(
		.p-contents__image,
		.p-about__image,
		.p-shop__figure,
		.p-asahizaka__map
	) img {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	/* 疑似要素は * では拾えないので個別に戻す（translateY は元の指定に合わせる） */
	.is-reveal [data-reveal] .p-menu-button__text::before {
		transform: translateY(-50%) !important;
		transition: none !important;
	}
}


/* ==========================================================================
   サイトマップ
   ========================================================================== */

.p-sitemapPage {
	--sitemap-ink: #0b191c;
	--sitemap-muted: #6f7477;
	--sitemap-rule: rgba(11, 25, 28, 0.16);

	padding-bottom: clamp(5rem, 9vw, 8.75rem);
	padding-left: max(0rem, 5rem);   /* PC 左端のメニュー帯を避ける */
	background: #f8f5ee;
	color: var(--sitemap-ink);
	font-family: "Noto Sans JP", sans-serif;
}

.p-sitemapPage__head {
	padding-block: clamp(5rem, 10vw, 8.75rem) clamp(2.5rem, 4vw, 3.75rem);
	text-align: center;
}

.p-sitemapPage__breadcrumb {
	margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
	color: var(--sitemap-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
}

.p-sitemapPage__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.p-sitemapPage__breadcrumb a:hover {
	text-decoration: underline;
}

.p-sitemapPage__en {
	margin: 0 0 0.875rem;
	color: var(--sitemap-muted);
	font-family: "EB Garamond", "Shippori Mincho", serif;
	font-size: 0.8125rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.p-sitemapPage__title {
	position: relative;
	margin: 0;
	padding-bottom: 1.5rem;
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 400;
	letter-spacing: 0.22em;
}

.p-sitemapPage__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 2.5rem;
	height: 1px;
	background: rgba(11, 25, 28, 0.4);
	transform: translateX(-50%);
}

.p-sitemapPage__inner {
	width: min(88vw, 56.25rem);
	margin-inline: auto;
}

/* --- 一覧 --------------------------------------------------------------- */

.p-sitemapList {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4.5rem);
}

.p-sitemapGroup {
	min-width: 0;
}

.p-sitemapGroup__head {
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 0.875rem 1.125rem;
	border-bottom: 1px solid var(--sitemap-rule);
	color: inherit;
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.6;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

/* 見出し頭の短い罫（ドロワーのサブ項目と同じ記号づかい） */
.p-sitemapGroup__head::before {
	content: "";
	position: absolute;
	top: 0.75em;
	left: 0;
	width: 0.5rem;
	height: 1px;
	background: rgba(11, 25, 28, 0.55);
}

a.p-sitemapGroup__head:hover {
	opacity: 0.6;
}

/* リンクではない見出し（「その他」など） */
.p-sitemapGroup__head--plain {
	color: var(--sitemap-muted);
}

.p-sitemapGroup__list {
	margin: 1.25rem 0 0;
	padding: 0 0 0 1.125rem;
	list-style: none;
}

.p-sitemapGroup__list li + li {
	margin-top: 0.875rem;
}

.p-sitemapGroup__list a {
	display: inline-block;
	color: var(--sitemap-ink);
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	line-height: 1.7;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.p-sitemapGroup__list a::before {
	content: "―";
	margin-right: 0.5rem;
	color: rgba(11, 25, 28, 0.45);
}

.p-sitemapGroup__list a:hover {
	opacity: 0.6;
}

@media (max-width: 768px) {
	.p-sitemapPage {
		padding-left: 0;
	}

	.p-sitemapPage__inner {
		width: min(88vw, 30rem);
	}

	.p-sitemapList {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.25rem;
	}

	.p-sitemapGroup__head {
		font-size: 1.0625rem;
	}
}


/* ==========================================================================
   店舗メニューページ
   1rem = 16px で換算。
   ========================================================================== */

.p-menuPage {
	--menu-ink: #0b191c;
	--menu-paper: #F8F5EE;    /* 地色。反転表示の抜き文字にも使う */
	--menu-marker: #d6c9aa;   /* 品名の頭に付く小さな四角 */
	--menu-nav-line: #d6c9aa;   /* ページ内メニューの丸と矢印 */
	--menu-nav-fill: #d6c9aa;   /* hover 時の塗り（336 だけ紺） */
	--menu-rule: rgba(11, 25, 28, 0.14);
	--menu-width: 75rem;
	/* PC 左端のメニュー帯 */
	--menu-band: 5rem;

	padding-bottom: clamp(5rem, 9vw, 9.375rem);
	background: var(--menu-paper);
	color: var(--menu-ink);
	font-family: "Noto Sans JP", sans-serif;
}

.p-menuPage,
.p-menuPage * {
	box-sizing: border-box;
}

/* --- ヒーロー ------------------------------------------- */

.p-menuHero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: min(22.92vw, 27.5rem);
	padding-block: clamp(3rem, 5vw, 4.5rem);
	overflow: hidden;
}

.p-menuHero__bg {
	position: absolute;
	inset: 0;
	/* 背景画像はブロックの設定から inline style で入る */
	background: #1a1a1a center / cover no-repeat;
}

.p-menuHero__breadcrumb {
	position: absolute;
	top: min(4.58vw, 3.4375rem);
	left: min(6.82vw, 8.1875rem);
	z-index: 1;
	margin: 0;
	color: var(--menu-ink);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	line-height: 1;
}

.p-menuHero__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.p-menuHero__breadcrumb a:hover {
	text-decoration: underline;
}

.p-menuHero__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 左のメニュー帯の分だけ中央をずらす */
	margin-left: var(--menu-band);
}

.p-menuHero__logo {
	margin: 0;
}

.p-menuHero__logo img {
	display: block;
	width: auto;
	height: min(11.93vw, 14.3125rem);
}

.p-menuHero__title {
	position: relative;
	margin: 1.75rem 0 0;
	padding-bottom: 0.5rem;
	font-family: "EB Garamond", "Shippori Mincho", serif;
	font-size: clamp(1.75rem, 2.5vw, 2.75rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1;
}

/* 見出し下の帯（薄い金色の下線） */
.p-menuHero__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100%;
	height: 17px;
	background: url(../images/asahido/menu-title.png), top center / cover no-repeat;
	transform: translateX(-50%);
}

/* --- カテゴリーナビ -------------------------------------- */

.p-menuNav {
	width: min(88vw, var(--menu-width));
	margin: clamp(3rem, 5vw, 5rem) auto 0;
	padding-left: max(0rem, var(--menu-band));
}

.p-menuNav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-menuNav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--menu-ink);
	font-size: 1.125rem;
    font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* 丸に下向き矢印。hover でネガポジ反転させる（塗り＝線色 / 矢印＝地色）。 */
.p-menuNav__icon {
	position: relative;
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	border: 1px solid var(--menu-nav-line);
	border-radius: 50%;
	background-color: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.p-menuNav__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 46%;
	width: 0.3125rem;
	height: 0.3125rem;
	border-right: 1px solid var(--menu-nav-line);
	border-bottom: 1px solid var(--menu-nav-line);
	transform: translate(-50%, -50%) rotate(-45deg);
	transition: border-color 0.2s ease;
}

.p-menuNav__link:hover .p-menuNav__icon,
.p-menuNav__link:focus-visible .p-menuNav__icon {
	border-color: var(--menu-nav-fill);
	background-color: var(--menu-nav-fill);
}

.p-menuNav__link:hover .p-menuNav__icon::before,
.p-menuNav__link:focus-visible .p-menuNav__icon::before {
	border-color: var(--menu-paper);
}

/* --- セクション -------------------------------------------------------- */

.p-menuSection {
	width: min(88vw, var(--menu-width));
	margin: clamp(3.5rem, 6vw, 5.75rem) auto 0;
	padding-left: max(0rem, var(--menu-band));
	scroll-margin-top: 2rem;
}

/* 見出し帯（石テクスチャ + 右はグラデーション） */
.p-menuSection__head {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 12.625rem;
	/* 左半分（見出し側）は支給の暗い石テクスチャをそのまま敷く。
	   右半分は写真（__bandPhoto）が乗るので、下地として同じ色で埋めておく。 */
	background-color: #1e1e1e;
	background-image: url("../images/asahido/otowasaryo-menu/section-band-dark.png");
	background-size: 39.5% 100%;
	background-position: left center;
	background-repeat: no-repeat;
}

.p-menuSection__title {
	/* 背景テクスチャ（background-size: 39.5%）と同じ幅にして、
	   その中で中央寄せする。固定幅にすると帯の幅とずれる。 */
	width: 39.5%;
	margin: 0;
	color: #fff;
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	/* 帯が狭くなると最長の見出し（ハラール・ベジタリアン対応＝13文字）が
	   折り返すので、帯幅に合わせて字を詰める。1364px 以上は帯幅が固定なので 24px。 */
	font-size: clamp(1rem, calc(2.5vw - 2.4px), 1.5rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-align: center;
}

/* --- 品目 -------------------------------------------------------------- */

.p-menuSection__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 写真つき 3列（幅・横 30px / 縦 23px の間隔） */
.p-menuSection--grid .p-menuSection__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.4375rem 1.875rem;
	margin-top: clamp(2.5rem, 4vw, 4.25rem);
}

/* 写真なし 2列（アルコール） */
.p-menuSection--list .p-menuSection__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 3.5rem;
	margin-top: clamp(2.5rem, 4vw, 4.25rem);
}

.p-menuItem__photo {
	margin: 0 0 0.3125rem;
}

.p-menuItem__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 380 / 250;
	object-fit: cover;
}

/* 品名の頭に付く小さな四角 */
.p-menuItem__body {
	position: relative;
	padding-left: 1.5625rem;
}

/* 品名と補足の間で改行させない。<p> のままだとブロックで縦に積まれるので、
   インライン化して 1 つの文章として流す（長ければ自然に折り返す）。 */
.p-menuItem__name,
.p-menuItem__note {
	display: inline;
}

.p-menuItem__name + .p-menuItem__note::before {
	content: "　";
}

.p-menuItem__body::before {
	content: "";
	position: absolute;
	top: 0.25rem;
	left: 0;
	width: 0.9375rem;
	height: 1.5rem;
	background: var(--menu-marker);
}

.p-menuItem__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0.02em;
}

.p-menuItem__note {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: 0.02em;
}

/* 写真なしリストは 1 行で見せる */
.p-menuSection--list .p-menuItem__name {
    line-height: 1.5;
	font-size: 1.4375rem;
	font-weight: 700;
}

.p-menuSection--list .p-menuItem__body::before {
	top: 0.375rem;
}

/* 写真なしで 1 コマに収めた品名は、写真なしリストと同じ大きさで見せる。
   写真つきの品名（1rem）は変えない。 */
/* MOD:
.p-menuItem--stack .p-menuItem__name {
    line-height: 1.5;
	font-size: 1.4375rem;
	font-weight: 700;
}
*/

.p-menuItem--stack .p-menuItem__body::before {
	top: 0.375rem;
}

/* --- 濃色の見出し帯を使うメニュー（336）------------------------------- */

/* 地色は生成り。本文の文字色・ナビは白背景版と同じ（base の指定をそのまま使う）。 */
.p-menuPage:has(.p-menuSection--dark) {
	background: #f8f5ee;
}

/* ヒーローの背景写真だけは濃色のままなので、この中の文字は白で置く。 */
.p-menuPage:has(.p-menuSection--dark) .p-menuHero {
	color: #fff;
}

.p-menuPage:has(.p-menuSection--dark) .p-menuHero__breadcrumb {
	color: #fff;
}

/* 品名の頭に付く小さな四角は紺 */
.p-menuSection--dark .p-menuItem__body::before {
	background: #011753;
}

/* 見出し帯の右側が写真になるパターン。
   写真は右 60.5% を覆うだけなので、左ブロックの下地（白背景版の石テクスチャ）は
   そのまま活かす。単色に潰すのは黒背景版だけ。 */
.p-menuSection__head--photo {
	overflow: hidden;
}

.p-menuSection--dark .p-menuSection__head--photo {
	background-image: none;
	background-color: #191919;
}

.p-menuSection__head--photo .p-menuSection__bandPhoto {
	position: absolute;
	top: 0;
	left: 39.5%;
	width: 60.5%;
	height: 100%;
	object-fit: cover;
}

/* 写真の上に #525252 73% を重ねて暗くする（見出しの白文字を読みやすくする） */
.p-menuSection__head--photo::after {
	content: "";
	position: absolute;
	top: 0;
	left: 39.5%;
	width: 60.5%;
	height: 100%;
	background: rgba(82, 82, 82, 0.73);
	pointer-events: none;
}

.p-menuSection__head--photo .p-menuSection__title {
	position: relative;
	z-index: 1;
}

/* 写真なしの品を 1 コマにまとめたとき、中で縦に積む */
.p-menuItem--stack {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	justify-content: flex-start;
}

body.p-shop-kiraku .p-menuPage {
	--menu-marker: #c7cbae;
}

/* 336 だけページ内メニューが紺（丸・矢印も hover 時の塗りも。他店は金のまま） */
body.p-shop-sansaro .p-menuPage {
	--menu-nav-line: var(--menu-ink);
	--menu-nav-fill: var(--menu-ink);
}

/* 336・器楽は両端揃えだと間延びするので左詰めにする */
body.p-shop-sansaro .p-menuNav__list,
body.p-shop-kiraku .p-menuNav__list {
	justify-content: flex-start;
}

/* 2列・説明つき */
.p-menuSection--grid2 .p-menuSection__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3rem 1.875rem;
	margin-top: clamp(2.5rem, 4vw, 4.25rem);
}

.p-menuSection--grid2 .p-menuItem__photo img {
	aspect-ratio: 585 / 395;
}

.p-menuSection--grid2 .p-menuItem__photo {
	margin-bottom: 0.625rem;
}

.p-menuSection--grid2 .p-menuItem__name {
    padding-top: 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}

.p-menuSection--grid2 .p-menuItem__note {
	margin-top: 0.375rem;
	font-size: 1rem;
	line-height: 1.75;
}

/* --- おすすめ（帯写真 + 2カラム紹介）----------------------------------- */

.p-menuIntro {
	width: min(88vw, var(--menu-width));
	margin: clamp(3rem, 5vw, 5rem) auto 0;
	padding-left: max(0rem, var(--menu-band));
}

.p-menuIntro__band {
	margin: 0;
}

.p-menuIntro__band img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 292;
	object-fit: cover;
}

.p-menuIntro__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 4.25rem);
	margin-top: clamp(2.5rem, 4vw, 4.75rem);
}

/* 見出しの後ろに敷くオレンジのもや（装飾）。2 カラムそれぞれに 1 つ。 */
.p-menuIntroItem {
	position: relative;
	z-index: 0;
}

.p-menuIntroItem__title {
	position: relative;
	z-index: 0;
}

.p-menuIntroItem__title::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: -.5rem;
	width: 24.625rem;
	max-width: 100%;
	aspect-ratio: 394 / 339;
	transform: translateY(-50%);
	background: url("../images/asahido/sansaro-menu/howa.png") no-repeat center left 0px / 50% auto;
	opacity: 0.7;
	pointer-events: none;
}

.p-menuIntroItem__logo {
	margin: 0 0 1.25rem;
}

.p-menuIntroItem__logo img {
	display: block;
	width: auto;
	max-width: 12.3125rem;
	height: auto;
}

.p-menuIntroItem__title {
	margin: 0 0 0.75rem;
	font-family: "Hina Mincho", serif;
	font-size: clamp(1.5rem, 2.8vw, 2.5rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.45;
}

.p-menuIntroItem__body {
	/* MOD */
	position: relative;
	z-index: 0;

	margin: 0;
	font-size: 1rem;
	line-height: 1.75;
	letter-spacing: 0.02em;
}

@media (max-width: 768px) {
	.p-menuSection--grid2 .p-menuSection__list,
	.p-menuIntro__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.p-menuSection--grid2 .p-menuItem__name {
        padding-top: .125rem;
		font-size: 1.0625rem;
	}

	.p-menuIntroItem__title {
		font-size: 1.375rem;
	}
    .p-menuItem__body::before {
        top: .125rem;
    }
}

/* --- SP ---------------------------------------------------------------- */

@media (max-width: 768px) {
	.p-menuPage {
		--menu-band: 0rem;
	}

	.p-menuHero {
		min-height: 15rem;
	}

	.p-menuHero__breadcrumb {
		top: 1.5rem;
		left: 1.5rem;
		font-size: 0.75rem;
	}

	.p-menuHero__logo img {
		height: 8.75rem;
	}

	.p-menuNav__list {
        justify-content: center;
		gap: 1rem;
	}

	.p-menuSection__head {
		min-height: 7.5rem;
	}

	.p-menuSection__title {
		width: 100%;
		font-size: 1.25rem;
	}

	.p-menuSection--grid .p-menuSection__list,
	.p-menuSection--list .p-menuSection__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.p-menuItem__name,
	.p-menuItem__note {
		font-size: 0.9375rem;
	}

	.p-menuSection--list .p-menuItem__name,
	.p-menuItem--stack .p-menuItem__name {
        line-height: 2;
		font-size: 1rem;
	}
}

/* MOD: Our Concept 英語と韓国語を横書きに */
html[lang="en-US"] body:is(.p-concept) .p-conceptStores__title,
html[lang="ko-KR"] body:is(.p-concept) .p-conceptStores__title {
  flex-direction: column;
  width: fit-content;
  transform: translateX(40px);
  margin-bottom: min(14.4vw, 250px);
}

html[lang="en-US"] body:is(.p-concept) h3.p-conceptStore__title,
html[lang="ko-KR"] body:is(.p-concept) h3.p-conceptStore__title {
  overflow-wrap: break-word;
  white-space: normal;
  min-width: 26vw;
}

html[lang="en-US"] body:is(.p-concept) .p-conceptStores__title span,
html[lang="ko-KR"] body:is(.p-concept) .p-conceptStores__title span {
  writing-mode: horizontal-tb;
}

html[lang="en-US"] body:is(.p-concept) .p-conceptCraftItem__card {
  height: 44rem;
}

html[lang="en-US"] body:is(.p-concept) .p-conceptCraftItem__ctaRow {
  top: min(43vw, 700px);
}

html[lang="en-US"] body:is(.p-concept) .p-conceptCraftItem__cta {
  line-height: 1.05;
}

html[lang="en-US"]
  body:is(.p-concept)
  .p-conceptCraftItem__card
  .p-conceptCraftItem__title {
  overflow-wrap: break-word;
  /* word-break: break-all; */
  max-height: 24rem;
  white-space: normal;
  line-height: 1.35;
  left: min(4.24vw, 90px);
}

/*
html[lang="en-US"]
  body:is(.p-concept)
  .p-conceptCraftItem__card
  .p-conceptCraftItem__body,
html[lang="ko-KR"]
  body:is(.p-concept)
  .p-conceptCraftItem__card
  .p-conceptCraftItem__body {
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 25vw;
}
*/
body:is(.p-concept) .p-conceptCraftItem__card .p-conceptCraftItem__body {
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 25vw;
}

@media (max-width: 768px) {
  html[lang="en-US"] body:is(.p-concept) .p-conceptStores__title,
  html[lang="ko-KR"] body:is(.p-concept) .p-conceptStores__title {
    transform: translateX(0);
  }

  html[lang="en-US"]
    body:is(.p-concept)
    .p-conceptCraftItem__card
    .p-conceptCraftItem__title {
    left: auto;
  }

  html[lang="en-US"] body:is(.p-concept) .p-conceptCraftItem__card {
    height: auto;
  }

  body:is(.p-concept) .p-conceptCraftItem__card .p-conceptCraftItem__body {
    max-width: none;
  }

  html[lang="en-US"] body:is(.p-concept) .p-conceptCraftItem__ctaRow {
    top: auto;
  }
}

/* MOD: 店舗トップページ 英語と韓国語を横書きに */
html[lang="en-US"] body:is(.p-otowasaryo, .p-sansaro, .p-kiraku) .p-fv__lead,
html[lang="ko-KR"] body:is(.p-otowasaryo, .p-sansaro, .p-kiraku) .p-fv__lead {
  writing-mode: horizontal-tb;
  text-align: center;
  line-height: 2;
  /* display: block; */
}

/* MOD: 音羽茶寮と336 ページ中ほどの縦書きを横書きに */
html[lang="en-US"] body:is(.p-otowasaryo) .p-asahizaka h2.writing_rl,
html[lang="ko-KR"] body:is(.p-otowasaryo) .p-asahizaka h2.writing_rl {
  writing-mode: horizontal-tb;
  margin-top: 4rem;
  margin-bottom: 9rem;
}

html[lang="en-US"] body:is(.p-sansaro) .p-culture__title-wrap .writing_rl,
html[lang="ko-KR"] body:is(.p-sansaro) .p-culture__title-wrap .writing_rl {
  writing-mode: horizontal-tb;
  /* margin-top: 4rem; */
  margin-bottom: 9rem;
}

/* 336は背景画像の真ん中の隙間に文字が入るように */
html[lang="en-US"] body:is(.p-sansaro) .p-culture__heading:before,
html[lang="ko-KR"] body:is(.p-sansaro) .p-culture__heading:before {
  transform: translate(-50%, 95px);
}

@media (max-width: 768px) {
  html[lang="en-US"] body:is(.p-sansaro) .p-culture__title-wrap .writing_rl,
  html[lang="ko-KR"] body:is(.p-sansaro) .p-culture__title-wrap .writing_rl {
    /* margin-top: 4rem; */
    margin-bottom: 6.25rem;
  }

  html[lang="en-US"] body:is(.p-sansaro) .p-culture__heading:before,
  html[lang="ko-KR"] body:is(.p-sansaro) .p-culture__heading:before {
    transform: translate(-50%, 56px);
  }
}

/* MOD: 音羽茶寮 縦書きが長過ぎるのを修正 */
html[lang="en-US"]
  body:is(.p-otowasaryo, .p-sansaro, .p-kiraku)
  .p-contents__wrap-text
  .writing_rl,
html[lang="ko-KR"]
  body:is(.p-otowasaryo, .p-sansaro, .p-kiraku)
  .p-contents__wrap-text
  .writing_rl {
  overflow-wrap: break-word;
  /* word-break: break-all; */
  max-height: 42rem;
  white-space: normal;
}

@media (max-width: 768px) {
  html[lang="en-US"] body:is(.p-otowasaryo) .p-asahizaka h2.writing_rl,
  html[lang="ko-KR"] body:is(.p-otowasaryo) .p-asahizaka h2.writing_rl {
    writing-mode: horizontal-tb;
    /* margin-top: 4rem; */
    margin-bottom: 4.5rem;
  }
  html[lang="ko-KR"] body:is(.p-otowasaryo) .p-asahizaka h2.writing_rl {
    writing-mode: horizontal-tb;
    overflow-wrap: break-word;
    /* word-break: break-all; */
    white-space: normal;
  }
}

/* MOD: 音羽茶寮 コンセプト タイトル下部マージンの調整 */
@media (max-width: 980px) {
  body:is(.p-otowasaryo, .p-sansaro, .p-kiraku)
    #concept
    .p-contents__heading.writing_rl {
    /* margin-bottom: 0; */
  }
}

/* MOD: 簡体字と繁体字でカンマの位置がおかしくなるのでフォントを変更 */
/* html[lang="zh-Hans"]
  body:is(.p-top)
  .p-asahidoConcept__layout
  .p-asahidoConcept__title,
html[lang="zh-Hans"]
  body:is(.p-top)
  .p-asahidoConcept__layout
  .p-asahidoConcept__text
  .p-asahidoReveal, */

@media (min-width: 768px) {
  html[lang="zh-Hans"]
    body:is(.p-concept)
    .p-conceptCraftItem__card
    .p-conceptCraftItem__title,
  html[lang="zh-TW"]
    body:is(.p-concept)
    .p-conceptCraftItem__card
    .p-conceptCraftItem__title {
    font-family: "Shippori Mincho", serif;
  }

  html[lang="zh-Hans"]
    body:is(.p-otowasaryo, .p-sansaro, .p-kiraku)
    .p-contents__heading,
  html[lang="zh-TW"]
    body:is(.p-otowasaryo, .p-sansaro, .p-kiraku)
    .p-contents__heading {
    font-family: "Shippori Mincho", serif;
  }
}

html[lang="zh-Hans"]
  body:is(.p-otowasaryo, .p-sansaro, .p-kiraku)
  .p-culture__heading,
html[lang="zh-TW"]
  body:is(.p-otowasaryo, .p-sansaro, .p-kiraku)
  .p-culture__heading {
  font-family: "Shippori Mincho", serif;
}

/* お問い合わせ */
html[lang="en-US"] .p-contactForm .wpcf7-checkbox .wpcf7-list-item label::after {
  content: "No Reservations";
}
html[lang="zh-Hans"] .p-contactForm .wpcf7-checkbox .wpcf7-list-item label::after {
  content: "不可预约";
}
html[lang="zh-TW"] .p-contactForm .wpcf7-checkbox .wpcf7-list-item label::after {
  content: "不可預約";
}
html[lang="ko-KR"] .p-contactForm .wpcf7-checkbox .wpcf7-list-item label::after {
  content: "예약 불가";
}


.p-faq__qa-text a:link {
  color: #296ba4;
}
.p-faq__qa-text a:visited {
  color: #296ba4;
}
.p-faq__qa-text a:hover {
  color: #6295c0;
}
.p-faq__qa-text a:focus {
  color: #6295c0;
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai__text img {
  padding-top: 32px;
}

/* MOD: */
@media (max-width: 768px) {
  .p-conceptStore__eyebrow {
    padding-bottom: 0.75rem;
  }
  .p-conceptStore__name {
    padding-top: 0;
  }
  .p-conceptStore__nameMain {
    font-size: 26px;
  }
  .p-conceptStore__head {
    justify-content: center;
    gap: 0;
  }
  .p-conceptStore__icon {
    display: none;
  }
  .p-conceptStore__title {
    margin-top: 1.05rem;
  }
}

/* ==========================================================================
   page-add.css — page.css への追加・上書き分
   page.css の直後に読み込む（functions.php の hybrid_theme_style_files()）。

   対象セレクタについては page.css 側のプロパティも含めた「ルール全体」を
   ここに書き出してある。page-add.css だけを見れば最終的な指定が分かり、
   page.css の該当ルールが変わってもここが優先される。
   ※ page.css から複製した値には「page.css 由来」と注記している。
      page.css 側でデザインを変えるときは、ここも合わせて直すこと。
   ========================================================================== */

/* --------------------------------------------------------------------------
   336「茶わん坂」+「由来」を 1 つの続きのセクションにする
   .p-culture と .p-yurai の両方に同じ固定レイヤーを敷き、それぞれを
   clip-path で切り抜くことで、境目のない 1 枚の背景に見せる。
   para1 / para2・p-asahizaka と同じ方式
   （background-attachment: fixed は iOS Safari が無視するため使わない）。
   -------------------------------------------------------------------------- */

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) :is(.p-culture, .p-yurai){
  position: relative;
  clip-path: inset(0);
}

/* page.css の .p-yurai:before は 1px の罫線なので、
   width / height / background-color をここで打ち消してから背景レイヤーにする。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) :is(.p-culture, .p-yurai)::before{
  content: "";
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  background: url(../shop/images/sansaro/chawanzaka-history_bg.png) center top / cover no-repeat;
}

/* SP は画像を高さ基準で原寸表示し、左側を画面外へ送って見せ場を右に寄せる。
   横向きは画面が低く画像の拡大率が足りず、-500px ずらすと右端に隙間が出るため
   portrait のみに限定し、横向きは上の cover 指定に任せる。 */
@media (max-width: 980px) and (orientation: portrait){
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) :is(.p-culture, .p-yurai)::before{
    background: url(../shop/images/sansaro/chawanzaka-history_bg.png) center left -500px / auto 100% no-repeat;
  }
}

/* 独立バンド時代の下側の罫線は 1 セクション化により不要 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai::after{
  content: none;
}

/* 背景レイヤーより前に出す */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) :is(.p-culture__inner, .p-yurai__inner){
  position: relative;
  z-index: 1;
}

/* 白背景をやめてパララックスを見せる */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture{
  padding: 80px 0 100px;
  background-color: transparent;
  overflow: hidden;            /* page.css 由来 */
}

@media (max-width: 980px){
  /* page.css は SP で padding: 0 0 80px。PC と同値に揃える */
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture{
    padding: 80px 0 100px;
  }
}

/* 1 セクションになったので上側の余白は .p-culture 側に任せる */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai{
  padding: 0 0 120px;
}

/* 見出し：白地に黒文字で抜く。
   page.css の padding（200px 0 24px）のままだと余白まで白く塗られてしまうので、
   padding を打ち消して margin に置き換え、パネルが文字に密着するようにする。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading{
  margin: 80px 0 16px;
  padding: 0;
  font-family: "Hina Mincho", serif;   /* page.css 由来 */
  font-size: 2rem;                     /* page.css 由来 */
  position: relative;                  /* page.css 由来 */
}

@media (max-width: 980px){
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading{
    font-size: 1.25rem;                /* page.css 由来 */
  }
}

/* .writing_rl との 2 クラス指定なので、上の .p-culture__heading より優先される */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading.writing_rl{
  /* 縦書きなので、これはパネル上端と行頭の間の余白になる */
  padding-top: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #000000;
}

/* 英語・韓国語は縦書きでも欧文グリフが横向きに積まれ、上端の 8px が
   余白として目立つため詰める。代わりに行方向（左右）に 4px の余白を持たせる。 */
html:is([lang="en-US"], [lang="ko-KR"]) body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading.writing_rl{
  padding: 0 4px;
}

/* 見出し背後の茶わんイラストは非表示にする。
   page.css 側の .p-culture__heading:before はローカルではコメントアウト済みだが、
   本番の page.css では有効なままの可能性があるため、page.css を触らずに
   ここで確実に消す（page-add.css だけで最終状態が決まるようにする）。

   再表示したい場合は content: none を外し、下の filter を有効にする。
   線が #011753（濃紺）なので、暗い写真の上ではそのままだと見えないため。 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__heading:before{
  content: none;
  /* filter: brightness(0) invert(1);
     opacity: 0.55; */
}

/* 本文：背景が茶わん坂の写真（暗い）になったので白 */
body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__text{
  color: #fff;
  margin-top: 24px;            /* page.css 由来 */
  font-size: 1rem;             /* page.css 由来（あさひ坂本文と同サイズ） */
  line-height: 1.8;            /* page.css 由来 */
  max-width: 700px;            /* page.css 由来 */
  font-weight: 400;            /* page.css 由来 */
}

@media (max-width: 980px){
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-culture__text{
    font-size: 0.875rem;       /* page.css 由来 */
    padding: 0 24px;           /* page.css 由来 */
  }
}

/* --------------------------------------------------------------------------
   あさひ坂の背景イラスト（音羽茶寮）

   page.css は 1 枚絵（asahizaka_bg.png）を cover / top center で敷いていたが、
   その絵は上 39% が「空」なので、画面が横に広くなるほど空ばかりが映って
   地図が見えなくなっていた。空を持たない 2 枚に差し替え、金雲の下に地図を置く。
     ・asahizaka_clouds.png   … 金雲のあしらい（透過 / 1726x495）  → 手前
     ・asahizaka_map_only.png … 地図（白地・不透過 / 1920x1351）   → 奥
   全画面幅で共通（page.css の 1 枚絵指定を上書きする）。

   2 枚を縦に積むと 1920x1846（縦横比 1.0401）の 1 枚絵とみなせる。
   これに cover 相当をかけたいが、cover は 1 枚ごとの指定なので
   縦横比で場合分けして「2 枚に同じ倍率」を与える。
     ・画面が 1.0401 より横長 → 幅基準。地図が画面幅いっぱい（倍率 W/1920）
     ・それより縦長           → 高さ基準。2 枚の合計が画面高さ（倍率 H/1846）
   どちらも雲と地図が必ず同じ倍率になるので、地図だけ小さくなることがない。
   雲は上端、地図は下端に置くので、地図の下部（三年坂の階段）が必ず残る。
   はみ出した余白は地図と同じ白で埋める（元画像も不透過の白地）。
   -------------------------------------------------------------------------- */

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka::before{
  content: "";                    /* page.css 由来 */
  position: fixed;                /* page.css 由来 */
  inset: 0;                       /* page.css 由来 */
  z-index: 0;                     /* page.css 由来 */
  background-image:
    url("../shop/images/asahizaka_clouds.png"),     /* 金雲（手前・透過） */
    url("../shop/images/asahizaka_map_only.png");   /* 地図（奥・白地） */
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center bottom;
  background-color: #fff;
}

/* 大きさの方針（オーナー判断：横幅優先・重なりは許容）
   PC のような横長画面では
     「重ならない」「地図全体を見せる」「横幅いっぱい」
   の 3 つが同時に成立しない（地図を幅 1920px にすると高さ 1351px、
   雲 495px と足して 1846px となり、画面高さ 900px に収まらない）。
   → 横幅を優先し、雲と地図が重なることを許容する。

   2 枚には常に同じ倍率を掛ける（地図だけ縮む／伸びるのを防ぐ）。
   上限は等倍（倍率 1.0 = 地図 1920px 幅）。これ以上引き伸ばすと
   絵が大きくなりすぎるうえ、元画像の解像度を超えてぼやけるため。 */

/* 横長側：雲は画面幅基準（倍率 = 画面幅 / 1920、上限 1.0）。
   雲は 1726/1920 = 89.896% で画面幅と同じ倍率になる。
   地図はそこから 90% に縮め、12vw + 金雲の高さぶん下げて置く（オーナー指定）。

   金雲の描画高さは「雲の幅 x 495/1726」。雲の幅は min(89.896% x 画面幅, 1726px)
   なので、高さは min(25.78125vw, 495px) になる。これを下げ幅に足している。
   下げたぶん地図の下端は画面外に出る。 */
@media (min-aspect-ratio: 1920/1846){
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka::before{
    background-size:
      min(89.896%, 1726px) auto,
      min(90%, 1728px) auto;
    background-position:
      center top,
      center bottom calc(-12vw - min(25.78125vw, 495px));
  }
}

/* 縦長側（スマホ・タブレット）：2 枚の合計が画面高さぴったりになるよう配分。
   495 : 1351 = 26.8147% : 73.1853%。この範囲は現状のままで良好。 */
@media (max-aspect-ratio: 1920/1846){
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-asahizaka::before{
    background-size:
      auto min(26.8147%, 495px),
      auto min(73.1853%, 1351px);
  }
}

/* --------------------------------------------------------------------------
   縦書き見出し：スマホでは折り返しを許可する
   page.css の nowrap は「Safari が行の長さにビューポート高さを使う」問題への
   対策で、高さに余裕のある PC 向け。スマホは画面高さが足りず画面外まで伸びる。
   -------------------------------------------------------------------------- */

@media (max-width: 980px){
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .writing_rl{
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   由来のテキスト画像：英語以外はスマホで画面幅いっぱいに
   英語以外は 1 行あたりの文字数が多く、90% 幅の .l-inner に収めると
   文字が小さくなりすぎるため。
   -------------------------------------------------------------------------- */

@media (max-width: 980px){
  html:not([lang="en-US"]) body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-yurai__text img{
    width: 100vw;
    max-width: 100vw;
  }
}

/* --------------------------------------------------------------------------
   FAQ カテゴリーボタン：スマホで高さを揃える
   枠線・背景を持つのは li ではなく a。page.css では a が display: block の
   ままなので、ラベルが 1 行の項目だけボタンが低くなっていた。
   li を flex にして a を align-self: stretch（既定）で伸ばす。
   a 側に height: 100% を当てると行の高さが決まる前にパーセントを解決できず
   （循環参照）セルからはみ出すため使わない。
   -------------------------------------------------------------------------- */

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__list{
  display: flex;               /* page.css 由来 */
  flex-wrap: wrap;             /* page.css 由来 */
  justify-content: center;     /* page.css 由来 */
  max-width: 980px;            /* page.css 由来 */
  gap: .625rem;                /* page.css 由来 */
}

body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__item a{
  display: block;              /* page.css 由来 */
  padding: .75rem 2rem;        /* page.css 由来 */
  background-color: #fff;      /* page.css 由来 */
  color: #333;                 /* page.css 由来 */
  font-size: 0.9rem;           /* page.css 由来 */
  border: 1px solid #c8c7a4;   /* page.css 由来 */
  font-weight: 700;            /* page.css 由来 */
}

@media (max-width: 980px){
  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__list{
    display: grid;                    /* page.css 由来 */
    grid-template-columns: 1fr 1fr;   /* page.css 由来 */
    gap: 4px;                         /* page.css 由来 */
    /* 行ごとに高さが変わらないよう、全行を一番高い行に揃える */
    grid-auto-rows: 1fr;
  }

  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__item{
    display: flex;
  }

  body:is(.p-otowasaryo,.p-sansaro,.p-kiraku) .p-faq__item a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    padding: .5rem .375rem;     /* page.css 由来 */
    font-size: 0.8125rem;       /* page.css 由来 */
  }
}