/* ======================================================================
   common.css — 全ページ共通
   旧 style.css / footer.css / nav-drawer.css / logo-band.css を統合
   ====================================================================== */

/* --- ベース・共通コンポーネント（旧 style.css） --- */
/* 変数設定（theme.json の preset / custom と同期。フォールバックはエディタ外でも表示用） */
:root{
    --color-main: var(--wp--preset--color--main, #0e1a82);
    --color-main02: var(--wp--preset--color--main-02, #191c35);
    --color-main03: var(--wp--preset--color--main-03, #a4acf4);
    --color-main04: var(--wp--preset--color--main-04, #023f73);
    --color-sub: var(--wp--preset--color--sub, #3AAFC9);
    --color-sub02: var(--wp--preset--color--sub-02, #e8330a);
    --color-yellow: var(--wp--preset--color--yellow, #ffd501);
    --color-wh: var(--wp--preset--color--white, #ffffff);
    --color-bk: var(--wp--preset--color--bk, #191c35);
    --color-dark: var(--wp--preset--color--dark, #c1c1c1);
    --color-dark02: var(--wp--preset--color--dark-02, #656565);
    --color-dark03: var(--wp--preset--color--dark-03, #555656);
    --color-bg: var(--wp--preset--color--bg, #E9E9E9);
    --color-bg02: var(--wp--preset--color--bg-02, #f2f3f7);
    --color-bg03: var(--wp--preset--color--bg-03, #e9eaef);
    --color-hover: var(--wp--preset--color--hover, #eceef6);
    --color-hover02: var(--wp--preset--color--hover-02, #f5f9fd);
    --color-border02: var(--wp--preset--color--border-02, #d9d9d9);
    --color-border03: var(--wp--preset--color--border-03, #D9D9D9);
    --color-feature-yellow: var(--wp--preset--color--feature-yellow, #fff2b0);
    --font-main: var(--wp--preset--font-family--noto-sans-jp, "Noto Sans JP", sans-serif);
    --leading-trim: var(--wp--custom--leading--trim, calc((1rem - 1lh) / 2));
}

::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-track{
    padding: 1px 0;
    background-color: var(--color-border02);
}

::-webkit-scrollbar-thumb{
    background-color: var(--color-dark);
    border: none;
    border-radius: 5rem;
}

/* タップするとホバー状態が張り付く端末で、ホバー演出を止めるための打ち消し。
   対象を * にすると、タップした要素の opacity / transform まで強制的に上書きしてしまう。
   （例: .p-yurai__section-bg は opacity 0.27 の背景レイヤーなので、
     タップした瞬間に 1 になって見え方が変わってしまっていた）
   本来の目的はリンク・ボタンのホバー演出を止めることなので、対象を絞る。 */
@media (hover: none){
    a:hover,
    button:hover,
    [role="button"]:hover,
    summary:hover {
      transform: none !important;
      transition: none !important;
      opacity: 1 !important;
    }
}

.wpcf7-spinner{
    display: none!important;
}

.entry-content{
    > p:first-of-type {
        line-height: calc(28/15);
    }
    .no-post {
        padding: 3rem 0;
    }
}

.site-branding{
    width: 100%;
    max-width: 360px;
    @media (max-width: 1024px) {
        max-width: 300px;
    }
    @media (max-width: 768px) {
        width: calc(100% - 140px);
        max-width: 180px;
    }
}

.breadcrumb{
    padding-top: 1rem;
    @media (max-width: 768px) {
        width: 100%;
        margin-left: 0;
        padding-top: .875rem;
    }
    #breadcrumbs {
        display: flex;
        justify-content: left;
        align-items: center;
    }
    a, span {
        font-size: .875rem;
        color: var(--color-wh);
        @media (max-width: 768px) {
            font-size: .75rem;
        }
    }
    .breadcrumb_last {
        /* overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        height: 20px; */
        color: var(--color-wh);
    }
}

/* 店舗3ページ（音羽茶寮 / 336 / 器楽）は独自デザインなので対象外にする。
   除外条件は :where() に入れて詳細度を (0,1,0) のまま保つ。
   店舗側の .l-inner は page.css で完結して定義している。 */
:where(body:not(.p-otowasaryo, .p-sansaro, .p-kiraku)) .l-inner{
    box-sizing: border-box;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.c-pagination{
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    text-align: center;
    margin-top: 6.25rem;
    @media (max-width: 768px) {
        margin-top: 3.75rem;
    }
    a {
        display: block;
        align-content: center;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        border: 1px solid var(--color-main);
        background: var(--color-wh);
        color: var(--color-main);
        &.current {
            background: var(--color-main);
            color: var(--color-wh);
        }
    }

    span {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 42px;
        z-index: 0;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            transform: skewX(-15deg); /* 角度はお好みで調整 */
            z-index: -1;
            background: var(--color-main);
        }

        em {
            font-style: normal;
            color: var(--color-wh);
            position: relative;
            z-index: 1;
        }
    }
}

.c-button--back{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 327px;
    margin: 2rem auto 0;
    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;
    transform: skewX(-11deg);
    transition: background 0.2s ease, color 0.2s ease;
    &::after {
        position: absolute;
        content: "";
        top: 50%;
        right: 2.375rem;
        transform: translateY(-50%) skewX(11deg);
        width: 21px;
        height: 21px;
        background: url(../images/icon-arrow-right.png) top center / cover no-repeat;
        border-radius: 0;
    }
}

.u-text--center{
    text-align: center;
}

.u-pc--hidden{
    display: none!important;
    @media (max-width: 768px) {
        display: block!important;
    }
}

.u-sp--hidden{
    display: block!important;
    @media (max-width: 768px) {
        display: none!important;
    }
}


/* --- フッター（旧 footer.css） --- */
/* ==========================================================================
   Shared: 朝日堂 フッター（画像から HTML/CSS に置き換え）
   全ページ共通で読み込む。デザインカンプ準拠、プレーン CSS、ネストなし。
   ========================================================================== */

/* 店舗ページは ress を読まないため、フッターの基準値をここで明示して
   どのページでも同じ見え方にする（店舗ページの表示を正とする）。 */
.l-footerAsahido,
.l-footerAsahido * {
	box-sizing: border-box;
}

.l-footerAsahido{
    z-index: 2;
	position: relative;
	background: #0b191c;
	color: rgba(255, 255, 255, 0.88);
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	line-height: 1.6;
	padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 3vw, 3rem) 0;
}

.l-footerAsahido__inner{
	display: grid;
    grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 6rem);
	max-width: 60rem;
	margin: 0 auto;
	align-items: center;
	padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

/* ロゴエンブレム ------------------------------------------------------ */

.l-footerAsahido__brand{
	display: grid;
	place-items: center;
	text-decoration: none;
}

.l-footerAsahido__brand img{
	display: block;
	width: 130px;
	height: auto;
	filter: brightness(0) invert(1);
}

/* 会社情報 ---------------------------------------------------------- */

.l-footerAsahido__body{
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	color: rgba(255, 255, 255, 0.88);
}

.l-footerAsahido__company{
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	font-weight: 500;
	letter-spacing: 0.18em;
	color: #fff;
}

.l-footerAsahido__address{
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-style: normal;
	font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
	line-height: 1.9;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.8);
}

.l-footerAsahido__address a{
	color: inherit;
	text-decoration: none;
}

.l-footerAsahido__siteLink{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 22.625rem;   /* 店舗ページでの実寸 362px に合わせる */
	margin-top: 0.5rem;
	padding: 0.7rem 1.25rem;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(0.75rem, 0.85vw, 0.8125rem);
	letter-spacing: 0.12em;
	text-decoration: none;
	transition: background 0.3s ease, border-color 0.3s ease;
}

@media (any-hover: hover){
	.l-footerAsahido__siteLink:hover {
		background: rgba(255, 255, 255, 0.08);
		border-color: rgba(255, 255, 255, 0.9);
	}
}

/* サブナビ ----------------------------------------------------------- */

.l-footerAsahido__nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	padding: 1.25rem 0 clamp(1.5rem, 2vw, 2rem);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	max-width: 60rem;
	margin: 0 auto;
}

.l-footerAsahido__navLink{
	color: rgba(255, 255, 255, 0.75);
	font-size: clamp(0.72rem, 0.8vw, 0.8125rem);
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: color 0.3s ease;
}

@media (any-hover: hover){
	.l-footerAsahido__navLink:hover {
		color: #fff;
	}
}

/* Responsive -------------------------------------------------------- */

@media (max-width: 768px){
	.l-footerAsahido {
		padding: 3rem 1.25rem 0;
                padding-top: 2.8rem;
	}
	.l-footerAsahido__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 1.75rem;
		text-align: center;
	}
	.l-footerAsahido__brand {
		width: 8rem;
	}

	/* SP では朝日堂ロゴが大きすぎるためひと回り小さく */
	.l-footerAsahido__brand img {
		width: 120px;
	}
	.l-footerAsahido__address {
		align-items: center;
	}
	.l-footerAsahido__siteLink {
		max-width: 100%;
		width: 100%;
	}
	.l-footerAsahido__nav {
		gap: 0.75rem 1.25rem;
		padding: 1rem 0 1.5rem;
	}
}


/* --- ナビゲーションドロワー・言語切替（旧 nav-drawer.css） --- */
/* ==========================================================================
   共通 ナビゲーションドロワー
   - スマホ: ヘッダー右上のハンバーガー → 全画面ドロワー
   - PC   : 右上のハンバーガーは表示、開くと全画面オーバーレイ
   - 言語切替をメニュー内に含む
   ========================================================================== */

/* ボタン共通 -------------------------------------------------------------- */

.c-menuOpen{
	position: fixed;
	z-index: 1000;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: opacity 0.2s ease;
	padding: 0;
}

.c-menuOpen__wrap{
    z-index: 3;
    position: fixed;
    top: 0;
    left: 0;
    width: 80px;
    height: 100vh;
    border-right: 1px solid #fff;
}

/* 店舗ページ・メニューページのみ。帯の中でハンバーガーの上に店舗ロゴを置く。

   既定はハンバーガーを基準にした配置。ハンバーガーは top: 50% 中央合わせで
   高さがおよそ 38px なので、上端は 50% から 19px 上。そこからさらに 80px 空ける。 */
.c-menuOpen__logo{
	position: absolute;
	bottom: calc(50% + 99px);
	left: 50%;
	transform: translateX(-50%);
	display: block;
	line-height: 0;
	transition: opacity 0.2s ease;
}

/* 音羽茶寮のロゴだけ縦に長い（52x288）ため、帯の上部から吊る。 */
.c-menuOpen__logo--otowasaryo{
	top: clamp(3.5rem, 9vh, 7rem);
	bottom: auto;
}

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

.c-menuOpen__logo img{
	display: block;
	width: auto;
	/* 帯幅 80px（枠線を除いた内側）に収める */
	max-width: 2.75rem;
	max-height: min(22vh, 13.5rem);
	height: auto;
}

/* ドロワーを開いている間はロゴを伏せる（× と重なって見えるため） */
body.is-nav-open .c-menuOpen__logo{
	opacity: 0;
	pointer-events: none;
}

.c-menuOpen__bar{
	display: block;
	background: rgba(255, 255, 255, 0.92);
	transition: transform 0.28s ease, opacity 0.2s ease, background 0.2s ease;
	transform-origin: center;
}

/* 開いている間はハンバーガーを × に変形（そのまま閉じるボタンとして機能） */
body.is-nav-open .c-menuOpen{
	z-index: 1100;   /* ドロワーより前面 */
}

/* .c-menuOpen__wrap は position: fixed + z-index でスタッキングコンテキストを
   作るため、内側の .c-menuOpen の z-index はこの箱の中だけの順序になる。
   ドロワー(z-index: 999)より前面に来られるよう、開いている間は wrap 自体を
   ドロワーより上に持ち上げる */
body.is-nav-open .c-menuOpen__wrap{
	z-index: 1100;
    border-right: none;
}

/* PC 2本線 → × */
body.is-nav-open .c-menuOpen--pc .c-menuOpen__bar:nth-child(1){
	transform: translateY(calc(min(0.83vw, 16px) / 2 + 0.5px)) rotate(45deg);
}

body.is-nav-open .c-menuOpen--pc .c-menuOpen__bar:nth-child(2){
	transform: translateY(calc(min(0.83vw, 16px) / -2 - 0.5px)) rotate(-45deg);
}

/* SP 3本線 → ×
   3 本とも中央（top/left 50%）に重ねてから回転させるので、
   ボタンの高さやパディングが変わっても交点がずれない。 */
body.is-nav-open .c-menuOpen--sp .c-menuOpen__bar:nth-child(1){
	transform: translate(-50%, -50%) rotate(45deg);
}

body.is-nav-open .c-menuOpen--sp .c-menuOpen__bar:nth-child(2){
	opacity: 0;
}

body.is-nav-open .c-menuOpen--sp .c-menuOpen__bar:nth-child(3){
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* PC (≥768px)：FV 左端の 2 本線 --------------------------------------- */

.c-menuOpen--pc{
	top: 50%;
	left: min(0.83vw, 16px);
    transform: translateY(-50%);
	width: min(2.5vw, 48px);
	height: auto;
	display: flex;
	flex-direction: column;
	gap: min(0.83vw, 16px);
	padding: 0.75rem 0.5rem;
}

.c-menuOpen--pc .c-menuOpen__bar{
	width: min(2.292vw, 44px);
	height: 2px;
	background: rgba(255, 255, 255, 0.72);
}

.c-menuOpen--pc:hover .c-menuOpen__bar{
	background: #fff;
}

/* スマホ (<768px)：ヘッダー右上の ≡ ------------------------------------ */

.c-menuOpen--sp{
	top: 1rem;
	right: 1rem;
	display: none;                     /* PC では隠す */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

/* グリッド/フレックスの行送りは行の伸縮で変わるため、× の交点計算に使えない。
   3 本ともボタン中央を基準に置き、間隔は transform で作る。 */
.c-menuOpen--sp .c-menuOpen__bar{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.35rem;
	height: 1px;
}

.c-menuOpen--sp .c-menuOpen__bar:nth-child(1){
	transform: translate(-50%, -50%) translateY(-0.4rem);
}

.c-menuOpen--sp .c-menuOpen__bar:nth-child(2){
	transform: translate(-50%, -50%);
}

.c-menuOpen--sp .c-menuOpen__bar:nth-child(3){
	transform: translate(-50%, -50%) translateY(0.4rem);
}

.c-menuOpen--sp:hover{
	background: rgba(0, 0, 0, 0.75);
}

@media (max-width: 768px){
    .c-menuOpen__wrap {
        display: none;
    }
	.c-menuOpen--pc {
		display: none;
	}
	.c-menuOpen--sp {
		display: block;
	}
}

/* Drawer -------------------------------------------------------------- */

/* ドロワー本体は左寄せパネル。背景はパネル内側のみ。
   パネル外はクリックを通し、色も付けない（ユーザー要望：背景はメニュー部分だけ） */


.c-navDrawer{
	position: fixed;
	inset: 0;
	z-index: 999;
	pointer-events: none;
	color: rgba(255, 255, 255, 0.92);
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}

/* 開閉は横スライドではなく、その場でのフェード（ふわっと表示）。
   状態はハンバーガーのアニメーションと同じ body.is-nav-open を基準にする。
   閉じた状態は .c-navDrawer__panel の基本スタイル側で定義。 */
body.is-nav-open .c-navDrawer__panel{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* 全面オーバーレイは廃止 */
.c-navDrawer__bg{
	display: none;
}

/* Close button は共用ハンバーガーで代替するため非表示 */
.c-navDrawer__close{
	display: none;
}

/* Panel — 左端に張り付くドロワー ------------------------------------- */

.c-navDrawer__panel *,
.c-menuOpen,
.c-menuOpen__wrap {
	box-sizing: border-box;
}


.c-navDrawer__panel{
	/* 店舗ページは ress を読まない（content-box）ため、
	   どちらのページでも同じ幅になるよう box-sizing を明示する。
	   数値は店舗ページの見え方（内容 22rem + 左右パディング）に合わせている。 */
	box-sizing: border-box;
	width: min(26rem, 92vw);       /* 内容 22rem + 左右 2rem */
	/* 開いたときは画面の縦いっぱいに広げる。
	   dvh は SP のアドレスバー出入りで高さが変わるのを吸収する。 */
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	/* アコーディオン開閉でスクロールバーが出入りしても内容が がたつかないよう幅を常に確保 */
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
	/* 左パディングを詰めてメニューを左寄せ（× はパネル上部へ移動済みなので重ならない） */
	padding: clamp(4rem, 6vw, 5rem) 2rem;
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	/* 背景はパネル自身に持たせる（メニュー部分だけ塗る）。
	   右半分に和柄画像を重ね、その上にベースの濃色を敷く */
	background:
		linear-gradient(90deg, rgba(11, 25, 28, 1) 0%, rgba(11, 25, 28, 1) 50%, rgba(11, 25, 28, 0.72) 62%, rgba(11, 25, 28, 0.35) 100%),
		url("../images/asahido/nav-drawer-bg.png") right center / auto 100% no-repeat,
		linear-gradient(180deg, #0b191c 0%, #0b191c 100%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
	pointer-events: none;
	box-shadow: 0.35rem 0 1.5rem rgba(0, 0, 0, 0.35);
	text-align: left;               /* 内側を左寄せに */
	align-items: stretch;
}

.c-navDrawer__main{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.c-navDrawer__main > li{
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.c-navDrawer__link,
.c-navDrawer__group{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.1rem 0.35rem;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.92);
	font-family: "Hina Mincho", serif;
	font-size: 1.25rem;
	letter-spacing: 0.14em;
	text-decoration: none;
	cursor: pointer;
	text-align: left;
}

/* 子を持つ項目は「文字＝ページへ移動」「右の ＞＝下層の開閉」に分かれている */
.c-navDrawer__groupRow{
	display: flex;
	align-items: stretch;
}

.c-navDrawer__groupLink{
	flex: 1;
	min-width: 0;
}

.c-navDrawer__groupToggle{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	/* 文字リンクと押し分けられるよう、指で押せる幅を確保する */
	width: 3rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.92);
	cursor: pointer;
}

/* hover 時は 60% 透過（ドロワー内の項目で共通） */
.c-navDrawer__link,
.c-navDrawer__group,
.c-navDrawer__groupToggle,
.c-navDrawer__subLink,
.c-navDrawer__langBtn,
.c-navDrawer__foot a{
	transition: opacity 0.2s ease;
}

.c-navDrawer__link:hover,
.c-navDrawer__group:hover,
.c-navDrawer__groupToggle:hover,
.c-navDrawer__subLink:hover,
.c-navDrawer__langBtn:hover,
.c-navDrawer__foot a:hover{
	opacity: 0.6;
}

/* Chevron for expandable items */
.c-navDrawer__chevron{
	position: relative;
	flex-shrink: 0;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-0.15em);
	transition: transform 0.25s ease;
}

.c-navDrawer__group[aria-expanded="true"] .c-navDrawer__chevron,
.c-navDrawer__groupToggle[aria-expanded="true"] .c-navDrawer__chevron{
	transform: rotate(225deg) translateY(-0.15em);
}

/* Sub list */
.c-navDrawer__sub{
	list-style: none;
	margin: 0;
	padding: 0 0.4rem;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.32s ease;
}

/* トグルボタンと <ul> が兄弟ではないので、開閉状態は親の li のクラスで見る */
.c-navDrawer__group[aria-expanded="true"] + .c-navDrawer__sub,
.c-navDrawer__item--group.is-open > .c-navDrawer__sub{
	max-height: 30rem;
	padding-bottom: 1rem;
}

.c-navDrawer__subLink{
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.c-navDrawer__subMark{
	width: 0.75rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.55);
	flex-shrink: 0;
}

/* Language switcher — 左寄せ。
   言語が 5 つあり横並びでは幅に収まらないので縦に積む（区切りの / は出さない）。 */
.c-navDrawer__lang{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.35rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.c-navDrawer__langBtn{
	display: inline-block;
	background: transparent;
	border: 0;
	text-decoration: none;   /* Bogo 有効時は a 要素になる */
	color: rgba(255, 255, 255, 0.65);
	font-family: "EB Garamond", "Times New Roman", serif;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	cursor: pointer;
	padding: 0.2rem 0.35rem;
	transition: color 0.2s ease;
}

.c-navDrawer__langBtn.is-active{
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.c-navDrawer__langSep{
	display: none;
}

/* Foot links */
.c-navDrawer__foot{
	list-style: none;
	margin: 0;
	padding: 11vw 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.c-navDrawer__foot a{
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-decoration: none;
}

/* 全ページ共通 言語切替（PC のみ右上に固定） --------------------------
   同じ .c-navDrawer__lang を PC は右上固定・SP はドロワー内で使い分ける。 */

.c-langSwitchFixed{
	position: fixed;
	top: 20px;
	right: 34px;
	z-index: 1000;
}

/* 固定表示側はドロワー内向けの余白・区切り線を打ち消す */
.c-langSwitchFixed .c-navDrawer__lang{
	padding: 0;
	border-bottom: 0;
}

/* --- 「Language」プルダウン（PC 右上） --------------------------------- */

.c-langSwitch{
	position: relative;
	/* 文字色は下層ページごとに上書きされるので currentColor で受ける */
	color: rgba(255, 255, 255, 0.72);
}

.c-langSwitch__toggle{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.2rem 0.35rem;
	background: transparent;
	border: 0;
	color: #fff;
	font-family: "EB Garamond", "Times New Roman", serif;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

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

/* 下向きの山形。開いている間は上を向く */
.c-langSwitch__chevron{
	width: 0.4rem;
	height: 0.4rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.1rem) rotate(45deg);
	transition: transform 0.2s ease;
}

.c-langSwitch.is-open .c-langSwitch__chevron{
	transform: translateY(0.05rem) rotate(-135deg);
}

.c-langSwitch__list{
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 1;
	min-width: 7.5rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	background: rgba(11, 25, 28, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.18);
	/* 閉じている間は a11y ツリーからも外す */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-0.25rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.c-langSwitch.is-open .c-langSwitch__list{
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.c-langSwitch__item{
	margin: 0;
}

.c-langSwitch__link{
	display: block;
	width: 100%;
	padding: 0.5rem 1rem;
	white-space: nowrap;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: "EB Garamond", "Times New Roman", serif;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	line-height: 1;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

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

/* 選択中は白 + 下線（ドロワー内の言語切替と同じ見せ方） */
.c-langSwitch__link.is-active{
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.7);
	text-underline-offset: 0.3em;
}

/* SP は右上に出さず、ドロワー内のものを使う */
@media (max-width: 768px){
	.c-langSwitchFixed {
		display: none;
	}
}
/* PC はドロワー内には出さず、右上固定の「Language」プルダウンを使う */
.c-navDrawer__panel .c-navDrawer__lang {
	display: none;
}


/* Body lock while nav open */
body.is-nav-open{
	overflow: hidden;
}

/* メニュー開閉でスクロールバーが消えてもページ幅が変わらないよう、
   ガター（スクロールバー分の幅）を常に確保して がたつきを防ぐ */
html{
	scrollbar-gutter: stable;
}
/* Responsive: PC はメニューをやや広く、右寄せパネルにも変更可能 */
/* 旧 min-width 指定を通常指定に移した（980px 以下は直後で打ち消す） */
.c-navDrawer__panel {
		gap: 1.5rem;
		/* 総幅 37rem = 内容 22rem + 左右 7.5rem（店舗ページの見え方に合わせる） */
		width: min(37rem, 60vw);
		max-width: 510px;
		padding: clamp(4rem, 6vw, 5rem) 7.5rem clamp(3.5rem, 5vw, 5rem);
	}
	.c-navDrawer__link,
	.c-navDrawer__group {
        line-height: 1;
		padding: 1rem 0.35rem;
	}


    @media (max-width: 768px){
        .c-navDrawer__panel {
            padding: clamp(4rem, 6vw, 5rem) 2rem clamp(3.5rem, 5vw, 5rem);
        }
    }


/* SP は右上固定を出さないので、ドロワー内のものを使う */
@media (max-width: 768px){
    .c-navDrawer__panel {
        width: 100%;
    }
	.c-navDrawer__panel .c-navDrawer__lang {
		display: flex;
	}
}

/* --- 店舗ロゴバンド（旧 logo-band.css） --- */
/* ==========================================================================
   Shared: 店舗ロゴバンド（音羽茶寮 / 336 / 器楽）
   全ページの下部に共通で読み込む。既存 top.css からロジックを分離。
   ========================================================================== */

/* 店舗ページは ress を読まないため box-sizing を明示する。
   z-index はフロントの固定背景より前面に出すため（旧 top.css の指定を移設）。 */
.p-asahidoLogoBand,
.p-asahidoLogoBand * {
	box-sizing: border-box;
}

.p-asahidoLogoBand{
	position: relative;
	z-index: 2;
	background: #f2eee6;
}

.p-asahidoLogoBand__list{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: min(7.55vw, 145px);
	min-height: min(17.24vw, 331px);
	margin: 0;
	padding: 0 min(2.08vw, 40px);
	list-style: none;
}

/* li は並びの制御だけ。見た目のレイアウトはリンク（__item）側が持つ */
.p-asahidoLogoBand__list > li{
	display: flex;
	flex: 0 0 auto;
}

.p-asahidoLogoBand__item{
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.p-asahidoLogoBand__item:hover{
	opacity: 0.6;
}

.p-asahidoLogoBand__copy{
	color: #333;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	font-size: min(0.99vw, 19px);
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.p-asahidoLogoBand__divider{
	display: block;
	width: 1px;
	height: min(1.93vw, 37px);
	margin: 0 min(1.35vw, 26px);
	background: rgba(0, 0, 0, 0.75);
}

.p-asahidoLogoBand__mark{
	display: flex;
	align-items: center;
	gap: min(0.63vw, 12px);
}

.p-asahidoLogoBand__mark img{
	display: block;
	/* 表示サイズは width / height 属性（inc/logo-band.php で 75% に縮小済み）に任せるため、
	   width / height は CSS で指定しない（auto を書くと属性の指定を打ち消してしまう）。
	   % 指定にすると、親（__mark）は「茶寮」などの接頭辞を含む幅なので
	   ロゴごとに縮小率がずれてしまう。 */
	max-width: none;
}

.p-asahidoLogoBand__prefix{
	color: #333;
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	font-size: min(0.83vw, 16px);
	font-weight: 600;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

@media (max-width: 768px){
	.p-asahidoLogoBand {
		overflow: hidden;
		padding: 2rem 0;
	}
	/* 各行を [文字 | 縦線 | ロゴ] の3カラムグリッドにして、
	   文字の左端と縦線の位置を全行で揃える。
	   list-item ではなく item 側をグリッド化することで、
	   コピー幅がバラついても左端＆縦線位置は固定される。 */
	.p-asahidoLogoBand__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 2rem;
		min-height: 10rem;
		overflow-x: auto;
		padding: 0 1.25rem;
	}
	.p-asahidoLogoBand__list > li {
		display: block;
		width: 100%;
	}
	.p-asahidoLogoBand__item {
		display: grid;
		/* [文字 | 縦線 | ロゴ] の3カラム。ロゴ列は 1fr にして、
		   幅が違う3つのロゴでも列の左右中央に揃うようにする。 */
		grid-template-columns: 9em auto 1fr;
		align-items: center;
		width: 100%;
		max-width: 22rem;
		margin: 0 auto;
	}

	.p-asahidoLogoBand__item .p-asahidoLogoBand__mark {
        justify-content: space-around;
		justify-self: center;
        width: 116px;
	}
	.p-asahidoLogoBand__copy {
		justify-self: start;
		font-size: 0.82rem;
	}
	.p-asahidoLogoBand__divider {
		height: 1.8rem;
		margin: 0 .5rem;
	}
	.p-asahidoLogoBand__mark {
		justify-self: start;
	}
	.p-asahidoLogoBand__mark img {
		max-height: 2.4rem;
		width: auto;
	}
	/* ロゴの大きさは店舗ごとに指定する。並び順は管理画面（TOP ページの
	   「店舗の並び順」）で変わるため、位置（nth-child）では指定しない。 */
	.p-asahidoLogoBand__shop--otowasaryo .p-asahidoLogoBand__mark img {
		max-height: 2.6rem;
	}
	/* 336（77×132 の縦長）だけアスペクト比が違うので、
	   他の横長ロゴと視覚的にバランスを取るため大きめにする */
	.p-asahidoLogoBand__shop--sansaro .p-asahidoLogoBand__mark img {
		max-height: 4.5rem;
	}
	.p-asahidoLogoBand__prefix {
		font-size: 0.75rem;
	}
}


/* --- 一覧・TOP へ戻るリンク（お知らせ詳細 / 完了ページで共用） --- */
.c-backLink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	min-width: 13.75rem;
	padding: 1.125rem 2rem;
	border-top: 1px solid rgba(11, 25, 28, 0.55);
	border-bottom: 1px solid rgba(11, 25, 28, 0.55);
	color: #0b191c;
	font-family: "Shippori Mincho", "Hina Mincho", serif;
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

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

.c-backLink__arrow {
	width: 0.4rem;
	height: 0.4rem;
	border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}

/* MOD: 携帯／英語でフッター前の店舗へのリンク文字がはみ出すのを修正 */
@media (max-width: 768px) {
  .p-asahidoLogoBand__copy {
    overflow-wrap: break-word;
    /* word-break: break-all; */
    white-space: normal;
    line-height: 1.55;
  }
}