:root {
	--asahido-black: #000;
	--asahido-white: rgba(255, 255, 255, 0.9);
	--asahido-sans: "Noto Sans JP", sans-serif;
}

html {
	scroll-behavior: smooth;
}

body.home {
	background: var(--asahido-black);
	color: var(--asahido-white);
	font-family: var(--asahido-sans);
}

.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-frontAsahido {
	/* clip にしないと子の position: sticky（ヒーローのパララックス固定）が効かない */
	overflow: clip;
	background: #000;
}

.p-asahidoHero {
	position: relative;
	overflow: hidden;
	height: min(56.25vw, 1080px);
	min-height: 720px;
	background: #000;
	/* ロゴ群を画面中央に配置するため flex コンテナ化。
	   __bg (fixed) / __news (absolute) / __language (absolute) は
	   フロー外なのでこの flex の影響を受けない */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 固定背景（p-asahidoHero__bg）より前面でスクロールさせる。
   ロゴバンドは footer.php へ移したため、common.css 側で同じ指定を持たせている。 */
.p-asahidoConcept,
.p-asahidoShops {
	position: relative;
	z-index: 2;
}

.p-asahidoHero__bg {
	/* 背景画像だけをビューポートに固定するパララックス。
	   ロゴ・お知らせ等のヒーロー内コンテンツは通常どおりスクロールする */
	position: fixed;
	inset: 0;
	background-image: url("../images/asahido/mv.png");
	background-position: center top;
	background-size: cover;
}

/* 背景（動画・画像）全体を暗くして、上に乗る白文字を読みやすくする。
   この固定レイヤーは「京都を、味わう。」のセクションの背景も兼ねているので、
   ここに掛けるとキャッチ・リード文の可読性も同時に上がる。 */
.p-asahidoHero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.38);
	pointer-events: none;
}

/* 背景動画。__bg（固定レイヤー）を満たすだけなのでレイアウトには影響しない。
   読み込み前・再生できない場合は下の背景画像が見える。 */
.p-asahidoHero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	/* 装飾なので操作対象にしない */
	pointer-events: none;
}

.p-asahidoHero__language {
	position: absolute;
	top: min(1.35vw, 26px);
	right: min(3.6vw, 69px);
	z-index: 2;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-family: "Shippori Mincho", serif;
	font-size: clamp(0.5rem, 0.38vw, 0.625rem);
	line-height: 1;
}

.p-asahidoHero__logos {
	position: relative;
	z-index: 2;
	/* 3 店舗ロゴの行 + 朝日堂マークを縦に積む */
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 1920px 基準で行間 87px（= 4.53vw）。狭幅は vw で追随 */
	gap: var(--hero-logo-gap);
}

/* 3 つの店舗ロゴを 1 行に横並び。高さがバラバラなので下端で揃える */
.p-asahidoHero__logoRow {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 1920px 基準でロゴ間 195px（= 10.16vw） */
	gap: min(10.16vw, 195px);
}

.p-asahidoHero__shopLogo,
.p-asahidoHero__brand {
	display: block;
	height: auto;
}

/* ロゴを包むリンク。flex の子が <a> に変わっても並びが変わらないようにする */
.p-asahidoHero__shopLink {
	display: block;
	line-height: 0;
	transition: opacity 0.2s ease;
}

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

.p-asahidoHero__brandWrap {
    position: relative;
}

/* ロゴ下の縦棒。上から線が伸び、そのまま下へ抜けていくのを繰り返す
   （scroll down の定番の動き）。伸び切った瞬間に transform-origin を
   下端へ入れ替えることで「伸びる → 下へ消える」を 1 本の線で表現する。
   scaleY(1) の間の入れ替えなので、見た目には切り替わりが出ない。 */
.p-asahidoHero__brandWrap::after {
    position: absolute;
    content: "";
    bottom: -130px;
    left: 50%;
    width: 1px;
    height: 83px;
    background-color: #fff;
    transform: translateX(-50%) scaleY(0);
    transform-origin: 50% 0;
    animation: p-asahidoHeroScrollLine 2.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

@keyframes p-asahidoHeroScrollLine {
    0% {
        transform: translateX(-50%) scaleY(0);
        transform-origin: 50% 0;
    }
    45% {
        transform: translateX(-50%) scaleY(1);
        transform-origin: 50% 0;
    }
    55% {
        transform: translateX(-50%) scaleY(1);
        transform-origin: 50% 100%;
    }
    100% {
        transform: translateX(-50%) scaleY(0);
        transform-origin: 50% 100%;
    }
}

/* 動きを抑える設定の環境では線を出したままにする */
@media (prefers-reduced-motion: reduce) {
    .p-asahidoHero__brandWrap::after {
        transform: translateX(-50%) scaleY(1);
        animation: none;
    }
}

.p-asahidoHero__shopLogo--kiraku {
	width: min(4.12vw, 79px);
}

.p-asahidoHero__shopLogo--336 {
	width: min(4.58vw, 88px);
}

.p-asahidoHero__shopLogo--otowa {
	width: var(--hero-logo-otowa-w);
}

.p-asahidoHero__brand {
	width: var(--hero-brand-w);
}

/* ロゴ列の寸法。「重要なお知らせ」の頭をここから導くため変数にしている。
   otowa ロゴ（52x288）が 3 つの中で一番背が高く、行の高さを決める。
   朝日堂マークの実画像は 274x280。 */
.p-asahidoHero {
	--hero-logo-gap: min(4.53vw, 87px);
	--hero-logo-otowa-w: min(2.71vw, 52px);
	--hero-brand-w: min(5.06vw, 97px);
	--hero-logo-row-h: calc(var(--hero-logo-otowa-w) * 288 / 52);
	/* 実画像は 274x280。デザイン上の 97x85 とは比率が違うので実物に合わせる */
	--hero-brand-h: calc(var(--hero-brand-w) * 280 / 274);
}

.p-asahidoHero__news {
	position: absolute;
	right: 0;
	z-index: 2;
	width: min(30.42vw, 584px);
	/* PC は朝日堂マーク（ロゴ列の最下段）と頭を揃える。
	   ロゴ列は FV の上下中央にあるので、
	   中央 + (ロゴ行 + 行間 - マーク高さ) / 2 がマークの上端になる。 */
	top: calc(50% + (var(--hero-logo-row-h) + var(--hero-logo-gap) - var(--hero-brand-h)) / 2);
	bottom: auto;
}

/* FV の重要なお知らせ（店舗ページの .p-fv__news-box と同じ見た目に揃える） */
.p-asahidoHero__news .p-fv__news-box {
	display: grid;
	gap: 1.125rem;
    max-height: 160px;
	padding: 2.75rem 2.75rem 3.25rem 2.75rem;
	background-color: #0b191c;
	color: #fff;
	font-size: 1.125rem;
}

.p-asahidoHero__news .p-fv__label {
	width: fit-content;
	padding: 0.25rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.5);
	font-size: 0.7rem;
	letter-spacing: 0.05rem;
}

.p-asahidoHero__news .p-fv__news-title {
	font-size: 0.9rem;
	letter-spacing: 0.1rem;
}

.p-asahidoHero__news .p-fv__news-title a {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
	color: inherit;
	text-decoration: none;
}

.p-asahidoHero__news .p-fv__news-title a:hover {
	text-decoration: underline;
}
/* .l-footerAsahido > img legacy rule dropped — footer is now HTML/CSS */

.p-asahidoConcept {
	position: relative;
    padding: 12rem 0 14rem;
	/* 背景は敷かず、固定されたヒーロー（パララックス背景）を透かす */
}

.p-asahidoConcept__layout {
    display: flex;
    flex-direction: row-reverse;
	width: min(46.35vw, 890px);
	height: min(21.65vw, 416px);
	margin: 0 auto;
}

.p-asahidoConcept__title {
    display: inline-block;
    margin-left: 6rem;
	color: rgba(255, 255, 255, 0.9);
	font-family: "Hina Mincho", serif;
	font-size: min(1.5625vw, 30px);
	font-weight: 400;
	line-height: 1.13;
	letter-spacing: 0.05em;
	writing-mode: vertical-rl;
}

.p-asahidoConcept__text {

	color: rgba(255, 255, 255, 0.9);
        /* MOD: カンマの位置がおかしくなるのを修正 */
        /* font-family: "Hina Mincho", serif; */
        font-family: "Hina Mincho", "Shippori Mincho", serif;
	font-size: min(0.94vw, 18px);
	font-weight: 400;
	line-height: 4;
	letter-spacing: 0.08em;
	writing-mode: vertical-rl;
}

.p-asahidoConcept__text p {
	margin: 0;
	white-space: nowrap;
}

/* --- スクロールで順番に表示（No.9 キャッチ・リード文 / No.11 店舗カード）---
   .p-asahidoReveal を assets/js/top-reveal.js が画面到達時に is-inview へ切り替える。
   --reveal-index が指定されていれば、その順に遅らせて 1 つずつ出す。 */
.p-asahidoReveal {
	--reveal-index: 0;
	opacity: 0;
	transform: translateY(1.25rem);
	transition-property: opacity, transform;
	/* 1 行ずつ読ませたいので、店舗ページの本文リビール（1.5s）よりさらにゆっくり出す。 */
	transition-duration: 1.8s;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	/* 遅延だけ個別プロパティで指定する。
	   transition ショートハンドの中に var()/calc() を書くと
	   Safari で宣言ごと無効になることがあるため。 */
	transition-delay: calc(var(--reveal-index) * 0.28s);
	will-change: opacity, transform;
}

/* 縦書きの本文は、下からではなく右から流れ込ませる */
.p-asahidoConcept__text .p-asahidoReveal,
.p-asahidoConcept__title.p-asahidoReveal {
	transform: translateX(1.25rem);
}

.p-asahidoReveal.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.p-asahidoReveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.p-asahidoConcept__button {
    position: relative;
    text-decoration: none;
	display: block;
    margin: 6rem auto 0;
	align-items: center;
	width: min(12.24vw, 235px);
	height: min(3.23vw, 62px);
	padding: 0 min(0.94vw, 18px);
	border-top: 1px solid rgba(255, 255, 255, 0.58);
	border-bottom: 1px solid rgba(255, 255, 255, 0.58);
	color: rgba(255, 255, 255, 0.82);
	font-family: "Shippori Mincho", serif;
	font-size: min(0.94vw, 18px);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: min(3.23vw, 62px);
	/* ホバーで薄い白背景を左から伸ばす。
	   ::before / ::after は矢印と丸で使っているので、背景画像の幅で表現する。 */
	background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 100%;
	transition: background-size 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-asahidoConcept__button:hover {
	background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
	.p-asahidoConcept__button {
		transition: none;
	}
}

.p-asahidoConcept__button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 13px;
	width: 24px;
	height: 24px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	transform: translateY(-50%);
}

.p-asahidoConcept__button::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 23px;
	width: 6px;
	height: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.82);
	border-right: 1px solid rgba(255, 255, 255, 0.82);
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* No.10 ホバーで矢印だけ少し右へ動かす（丸は動かさない） */
.p-asahidoConcept__button:hover::before {
	transform: translateY(-50%) translateX(3px) rotate(45deg);
}

.p-asahidoConcept__button::after {
	transition: border-color 0.3s ease;
}

.p-asahidoConcept__button:hover::after {
	border-color: rgba(255, 255, 255, 0.9);
}

.p-asahidoShops {
	padding: 0 0 min(12.4vw, 238px) min(7.8125vw, 150px);
	/* 背景は敷かず、固定されたヒーロー（パララックス背景）を透かす */
}

.p-asahidoShops__inner {
	display: grid;
	gap: min(6.46vw, 124px);
	max-width: 1770px;
	margin: 0;
}

.p-asahidoShop {
	display: grid;
	grid-template-columns: minmax(0, 912fr) minmax(0, 858fr);
	overflow: hidden;
	width: 100%;
	height: min(27.92vw, 536px);
	max-height: 536px;
	background: #ededed;
}

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

.p-asahidoShop__body {
	position: relative;
	padding: min(4.79vw, 92px) min(3.39vw, 65px) 0 min(4.95vw, 95px);
	background:
		linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.34)),
		url("../images/asahido/shop-paper-bg.png") center / cover,
		#ededed;
	color: #333;
}

.p-asahidoShop:nth-child(2) .p-asahidoShop__body {
	padding-top: min(4.58vw, 88px);
}

.p-asahidoShop:nth-child(3) .p-asahidoShop__body {
	padding-top: min(5.83vw, 112px);
}

.p-asahidoShop__body h2 {
	margin: 0 0 min(2.4vw, 46px);
	font-family: "Hina Mincho", serif;
	font-size: min(1.46vw, 28px);
	font-weight: 400;
	line-height: 1.64;
	letter-spacing: 0.1em;
}

.p-asahidoShop__body p {
	max-width: min(35.31vw, 678px);
	margin: 0 0 min(2.66vw, 51px);
	font-family: var(--asahido-sans);
	font-size: min(0.94vw, 18px);
	font-weight: 400;
	line-height: 2.11;
	letter-spacing: 0.015em;
}

.p-asahidoShop__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(11.55vw, 222px);
	height: min(2.97vw, 57px);
	padding: 0 min(0.78vw, 15px) 0 min(1.3vw, 25px);
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	color: #333;
	font-family: var(--asahido-sans);
	font-size: min(0.83vw, 16px);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
}

/* 二重山括弧。「》」の文字で出すとフォント次第で字形が崩れる（豆腐になる）ため、
   画像で描いて環境差を無くす。差し替えは assets/images/asahido/arrow-double.svg。 */
.p-asahidoShop__link::after {
	content: "";
	display: inline-block;   /* transform を効かせるため */
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: center / contain no-repeat url("../images/asahido/arrow-double.svg");
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* No.12 ホバーで ＞＞ が右へ進む */
.p-asahidoShop__link:hover::after {
	transform: translateX(5px);
}

/* .p-asahidoLogoBand rules moved to assets/css/logo-band.css (loaded site-wide) */

/* .l-footerAsahido* rules moved to assets/css/footer.css (loaded site-wide) */

@media (max-width: 768px) {
	.p-asahidoHero {
		height: 46rem;
		min-height: 0;
	}

	.p-asahidoHero__bg {
		background-position: 42% top;
		background-size: auto 100%;
	}

	.p-asahidoHero__language {
		top: 1.25rem;
		right: 1.25rem;
		font-size: 0.625rem;
	}

	/* SP は flex レイアウトのまま、サイズと行間だけ調整 */
	.p-asahidoHero__logos {
		gap: 3rem;
	}
	.p-asahidoHero__logoRow {
		gap: 2.75rem;
	}
	.p-asahidoHero__shopLogo--kiraku { width: 3rem;   }
	.p-asahidoHero__shopLogo--336    { width: 3.4rem; }
	.p-asahidoHero__shopLogo--otowa  { width: 2rem;   }
	.p-asahidoHero__brand            { width: 4.5rem; }

	.p-asahidoHero__news {
		right: 0;
		/* SP はロゴ列と横並びにならないので、従来どおり下端基準 */
		top: auto;
		bottom: 1.5rem;
		width: min(88vw, 584px);
	}

	.p-asahidoHero__news .p-fv__news-box {
		gap: 0.5rem;
		padding: 1rem 1.5rem;
		font-size: 0.75rem;
	}

	.p-asahidoHero__news .p-fv__label {
		padding: 0.25rem 0.5rem;
		font-size: 0.625rem;
	}

	.p-asahidoHero__news .p-fv__news-title {
		font-size: 0.75rem;
		letter-spacing: 0.05rem;
	}

	.p-asahidoConcept {
		min-height: 0;
		/* 重要なお知らせと近すぎて忙しく見えるため、上下をゆったり空ける */
        padding: 6.5rem 0 8.5rem;
	}

	.p-asahidoConcept__layout {
		justify-content: center;
		/* 中身（縦書きタイトル + 本文）の実幅で中央を取る。
		   固定幅だと title の margin ぶん視覚的な中心がずれる。 */
		width: fit-content;
		height: auto;
		margin-inline: auto;
	}

	.p-asahidoConcept__title {
        margin-left: 3rem;
		font-size: 1.75rem;
	}

	.p-asahidoConcept__text {
        align-content: center;
		top: 0.4rem;
		width: min(68vw, 25rem);
		height: 20rem;
		font-size: 0.875rem;
		line-height: 1.6;
		letter-spacing: 0.04em;
	}

	.p-asahidoConcept__button {
		width: 12rem;
		height: 3.25rem;
        margin: 1.5rem auto 0;
		font-size: 1rem;
		line-height: 3rem;
	}

	.p-asahidoConcept__button::after {
		right: 1rem;
		width: 1.65rem;
		height: 1.65rem;
	}

	.p-asahidoConcept__button::before {
		right: 1.65rem;
		width: 0.38rem;
		height: 0.38rem;
	}

	.p-asahidoShops {
		padding: 0 1.25rem 4rem;
	}

	.p-asahidoShops__inner {
		gap: 2.25rem;
	}

	.p-asahidoShop {
		display: block;
		height: auto;
		max-height: none;
	}

	.p-asahidoShop__photo {
		height: auto;
	}

	.p-asahidoShop__body {
		padding: 2.25rem 1.5rem 2.5rem;
	}

	.p-asahidoShop:nth-child(2) .p-asahidoShop__body,
	.p-asahidoShop:nth-child(3) .p-asahidoShop__body {
		padding-top: 2.25rem;
	}

	.p-asahidoShop__body h2 {
		margin-bottom: 1.4rem;
		font-size: 1.35rem;
		line-height: 1.65;
	}

	.p-asahidoShop__body p {
		max-width: none;
		margin-bottom: 1.75rem;
		font-size: 0.95rem;
		line-height: 1.9;
	}

	.p-asahidoShop__link {
		width: 12.5rem;
		height: 3.25rem;
        margin: 0 auto;
		padding: 0 1rem 0 1.35rem;
		font-size: 0.95rem;
	}

	.p-asahidoShop__link::after {
		font-size: 1rem;
	}

	/* .p-asahidoLogoBand mobile rules moved to assets/css/logo-band.css */

	/* .l-footerAsahido mobile rules removed — footer now handled by footer.css */
}

/*
MOD:
お店のロゴを中央に合わせる
*/
.p-asahidoHero__shopLink {
  width: min(4.58vw, 88px);
}

.p-asahidoHero__shopLogo--kiraku,
.p-asahidoHero__shopLogo--otowa,
.p-asahidoHero__shopLogo--336 {
  margin: 0 auto 0;
}

.p-asahidoHero__shopLogo--336 {
  /* margin-left: 0.5px; */
}

@media (max-width: 768px) {
  .p-asahidoHero__logoRow {
    gap: 3.5rem;
  }

  .p-asahidoHero__shopLink {
    width: min(10vw, 88px);
  }

  .p-asahidoHero__shopLogo--336 {
    margin-left: -8px;
  }

  .p-asahidoHero__shopLogo--otowa {
    margin: 0 auto 0 0;
  }
}

/* MOD: arrowの表示 */
@media (max-width: 768px) {
  .p-asahidoShop__link::after {
    font-size: 1rem;
    width: 18px;
    height: 18px;
  }
}

/* MOD: ymizutani */
html[lang="en-US"] .p-asahidoConcept__title {
  margin-left: 0;
  margin-bottom: 2rem;
  writing-mode: horizontal-tb;
  text-align: center;
}
html[lang="en-US"] .p-asahidoConcept__text {
  line-height: 2;
  writing-mode: horizontal-tb;
  text-align: center;
}
html[lang="en-US"] .p-asahidoConcept__layout {
  flex-direction: column;
}
html[lang="en-US"] .p-asahidoShop:nth-child(2) {
  max-height: none;
  overflow: visible;
}
html[lang="en-US"] .p-asahidoShop:nth-child(2) .p-asahidoShop__body {
  /* padding: min(4.79vw, 92px) min(3.39vw, 65px) min(4.79vw, 92px)
    min(4.95vw, 95px); */
  height: auto;
}


html[lang="en-US"] .p-asahidoConcept__button {
  margin-top: 5rem;
}
@media (min-width: 769px) {
  html[lang="en-US"] .p-asahidoShop:nth-child(3) .p-asahidoShop__body {
    padding: min(2.00vw, 24px) min(3.39vw, 65px) 0 min(4.95vw, 95px);
  }
}
@media (min-width: 769px) {
  html[lang="ko-KR"] .p-asahidoShop:nth-child(3) .p-asahidoShop__body {
    padding: min(3.00vw, 36px) min(3.39vw, 65px) 0 min(4.95vw, 95px);
  }
}
@media (max-width: 768px) {
  html[lang="en-US"] .p-asahidoConcept__title {
    margin-left: 0;
    font-size: 1.75rem;
  }
  html[lang="en-US"] .p-asahidoConcept__text {
    margin: auto;
  }

  html[lang="en-US"] .p-asahidoConcept__button {
    margin-top: 3rem;
  }
}

html[lang="ko-KR"] .p-asahidoConcept__title {
  margin-left: 0;
  margin-bottom: 2rem;
  writing-mode: horizontal-tb;
  text-align: center;
}
html[lang="ko-KR"] .p-asahidoConcept__text {
  line-height: 2;
  writing-mode: horizontal-tb;
  text-align: center;
}
html[lang="ko-KR"] .p-asahidoConcept__layout {
  flex-direction: column;
}


html[lang="ko-KR"] .p-asahidoConcept__button {
  margin-top: 8rem;
}

@media (max-width: 768px) {
  html[lang="ko-KR"] .p-asahidoConcept__title {
    margin-left: 0;
    font-size: 1.75rem;
  }
  html[lang="ko-KR"] .p-asahidoConcept__text {
    margin: auto;
  }
  html[lang="ko-KR"] .p-asahidoConcept__text {
    height: auto;
  }

  html[lang="ko-KR"] .p-asahidoConcept__button {
    margin-top: 3.5rem;
  }
}


html[lang="zh-Hans"] .p-asahidoConcept__text,
html[lang="zh-TW"] .p-asahidoConcept__text {
  font-family: "Shippori Mincho", serif;
}