@charset "UTF-8";
/* ==========================================================================
   梅乃宿 高島雄町 ARS / SOL
   PC：2400px幅 / SP：780px幅
   ========================================================================== */

.p_takashimaomachi {
    --u: calc(100cqw / 780);
    --font-body: "Noto Sans JP", sans-serif;
    --font-serif: "Shippori Mincho", serif;
    --c-text: #707070;
    --c-white: #fff;
    --ease: cubic-bezier(0.25, 1, 0.5, 1);
    container-type: inline-size;
    padding: 0;
    overflow-x: clip;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--c-text);
}
.p_takashimaomachi img { display: block; width: 100%; height: auto; max-width: none; }
.p_takashimaomachi picture { display: block; }
.p_takashimaomachi figure { margin: 0; }
.p_takashimaomachi p { white-space: nowrap; }

.p_takashimaomachi .forPC { display: none; }
.p_takashimaomachi .forSP { display: inline; }

/* 和紙調の背景（イントロ / Brand Story 共通） */
.p_takashimaomachi .paper { background: #f5f5f3 url(../image/bg_intro_sp.jpg) no-repeat center top / cover; }


/* --------------------------------------------------------------------------
   KV
   -------------------------------------------------------------------------- */
.p_takashimaomachi .kv { position: relative; aspect-ratio: 780 / 1240; overflow: hidden; background: #3b2c3c; }
.p_takashimaomachi .kv__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p_takashimaomachi .kv__layer { position: absolute; top: 0; left: 0; width: 100%; }
.p_takashimaomachi .kv__bg,
.p_takashimaomachi .kv__bg img { height: 100%; }
.p_takashimaomachi .kv__bg img { object-fit: cover; }

/* コピー：1行ずつ上から書き下ろすように表示（clip-pathの範囲は画像内の文字位置） */
.p_takashimaomachi .kv__copy { --t: 6.29%; --b: 45%; clip-path: inset(var(--t) var(--r) var(--b) var(--l)); }
.p_takashimaomachi .kv__copy--1 { --l: 67.82%; --r: 25.64%; }
.p_takashimaomachi .kv__copy--2 { --l: 46.54%; --r: 46.92%; }
.p_takashimaomachi .kv__copy--3 { --l: 25.26%; --r: 68.08%; }


/* --------------------------------------------------------------------------
   イントロ
   -------------------------------------------------------------------------- */
.p_takashimaomachi .intro { padding: calc(var(--u) * 100) 0 calc(var(--u) * 109); text-align: center; }
.p_takashimaomachi .intro__title { margin: 0 auto; width: calc(var(--u) * 780); }
.p_takashimaomachi .intro__text { margin-top: calc(var(--u) * 75); font-size: max(11px, calc(var(--u) * 24)); line-height: 2.79; letter-spacing: 0.14em; }


/* --------------------------------------------------------------------------
   ARS / SOL
   -------------------------------------------------------------------------- */
.p_takashimaomachi .product { position: relative; overflow: hidden; padding-bottom: calc(var(--u) * 86); color: var(--c-white); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; }
.p_takashimaomachi .product--ars { background-image: url(../image/bg_ars_sp.jpg); margin-bottom: 1px; }
.p_takashimaomachi .product--sol { background-image: url(../image/bg_sol_sp.jpg); padding-bottom: calc(var(--u) * 83); }
.p_takashimaomachi .product__img { position: relative; height: calc(var(--u) * 1110); }
.p_takashimaomachi .product__logo { position: absolute; top: calc(var(--u) * 1117); left: calc(var(--u) * 445); width: calc(var(--u) * 273); }
.p_takashimaomachi .product--sol .product__logo { top: calc(var(--u) * 1126); }
.p_takashimaomachi .product__body { position: relative; z-index: 1; margin-top: calc(var(--u) * 31); padding-left: calc(var(--u) * 62); }
.p_takashimaomachi .product__name { width: calc(var(--u) * 416); }
.p_takashimaomachi .product--sol .product__name { width: calc(var(--u) * 384); }
.p_takashimaomachi .product__text { margin-top: calc(var(--u) * 39); font-size: max(11px, calc(var(--u) * 24)); line-height: 2.75; letter-spacing: 0.14em; }


/* --------------------------------------------------------------------------
   Brand Story
   -------------------------------------------------------------------------- */
.p_takashimaomachi .story { padding: calc(var(--u) * 144) 0 calc(var(--u) * 120); text-align: center; }
.p_takashimaomachi .story__title { font-family: var(--font-serif); font-size: calc(var(--u) * 88); line-height: 1; letter-spacing: 0.14em; color: #8a8a8a; }
.p_takashimaomachi .story__img { margin: calc(var(--u) * 56) auto 0; width: calc(var(--u) * 780); }
.p_takashimaomachi .story__text { margin-top: calc(var(--u) * 47); font-size: max(11px, calc(var(--u) * 24)); line-height: 2.73; letter-spacing: 0.14em; }
.p_takashimaomachi .story__text p + p { margin-top: 2.73em; }


/* --------------------------------------------------------------------------
   ラインナップ
   -------------------------------------------------------------------------- */
.p_takashimaomachi .lineup { color: var(--c-white); }
.p_takashimaomachi .lineup__item { padding: calc(var(--u) * 137) calc(var(--u) * 68) calc(var(--u) * 148); background: no-repeat center top / cover; }
.p_takashimaomachi .lineup__item--ars { background-image: url(../image/bg_ars_sp.jpg); }
.p_takashimaomachi .lineup__item--sol { background-image: url(../image/bg_sol_sp.jpg); }
.p_takashimaomachi .lineup__bottle { margin: 0 auto; width: calc(var(--u) * 263); }
.p_takashimaomachi .lineup__title { margin-top: calc(var(--u) * 57); font-size: calc(var(--u) * 48); line-height: 1.5; letter-spacing: 0.06em; }
.p_takashimaomachi .lineup__title small { font-size: 0.5em; font-weight: 400; letter-spacing: 0.1em; }
.p_takashimaomachi .lineup__text { margin-top: calc(var(--u) * 17); font-size: max(11px, calc(var(--u) * 25)); line-height: 2.4; letter-spacing: 0.17em; text-align: justify; white-space: normal; }
.p_takashimaomachi .lineup__spec { margin: calc(var(--u) * 37) 0 0; padding: 0; list-style: none; }
.p_takashimaomachi .lineup__spec li { display: flex; align-items: center; min-height: calc(var(--u) * 114); border-top: 1px solid rgba(255, 255, 255, 0.5); font-size: max(10px, calc(var(--u) * 22)); line-height: 1.6; letter-spacing: 0.1em; }
.p_takashimaomachi .lineup__label { flex-shrink: 0; }
.p_takashimaomachi .lineup__item--ars .lineup__label { color: #c1a7c3; }
.p_takashimaomachi .lineup__item--sol .lineup__label { color: #cfb98f; }


/* ==========================================================================
   PC（2400px幅）
   ========================================================================== */
@media (min-width: 768px) {
    .p_takashimaomachi { --u: calc(100cqw / 2400); }
    .p_takashimaomachi .forPC { display: inline; }
    .p_takashimaomachi .forSP { display: none; }

    /* KV */
    .p_takashimaomachi .kv { aspect-ratio: 2400 / 1350; }
    .p_takashimaomachi .kv__copy { --t: 11.11%; --b: 40%; }
    .p_takashimaomachi .kv__copy--1 { --l: 61.25%; --r: 36.42%; }
    .p_takashimaomachi .kv__copy--2 { --l: 48.75%; --r: 48.92%; }
    .p_takashimaomachi .kv__copy--3 { --l: 36.25%; --r: 61.33%; }
    .p_takashimaomachi .kv__bottle { top: 5.41%; width: 15.21%; }
    .p_takashimaomachi .kv__bottle--ars { left: 17.17%; }
    .p_takashimaomachi .kv__bottle--sol { left: 67.92%; }
    .p_takashimaomachi .kv__logo { top: 9.26%; width: 8.75%; }
    .p_takashimaomachi .kv__logo--ars { left: 5.25%; }
    .p_takashimaomachi .kv__logo--sol { left: 86.04%; }
    .p_takashimaomachi .kv__name { top: 46%; width: 1.42%; }
    .p_takashimaomachi .kv__name--ars { left: 8.75%; }
    .p_takashimaomachi .kv__name--sol { left: 89.71%; top: 46.07%; }

    /* イントロ */
    .p_takashimaomachi .intro { padding: calc(var(--u) * 140) 0 calc(var(--u) * 125); }
    .p_takashimaomachi .intro__title { width: calc(var(--u) * 1218); }
    .p_takashimaomachi .intro__text { margin-top: calc(var(--u) * 71); font-size: max(12px, calc(var(--u) * 24)); line-height: 3.33; letter-spacing: 0.16em; }

    .p_takashimaomachi .paper { background-image: url(../image/bg_intro.jpg); }

    /* ARS / SOL */
    .p_takashimaomachi .product { height: calc(var(--u) * 1143); padding: 0; background-position: center; background-size: cover; }
    .p_takashimaomachi .product--ars { background-image: url(../image/bg_ars.jpg); }
    .p_takashimaomachi .product--sol { height: calc(var(--u) * 1147); padding: 0; background-image: url(../image/bg_sol.jpg); }
    .p_takashimaomachi .product__img { position: absolute; top: 0; left: calc(var(--u) * 122); width: calc(var(--u) * 630); height: auto; }
    .p_takashimaomachi .product__logo { top: calc(var(--u) * 278); left: calc(var(--u) * 1914); }
    .p_takashimaomachi .product--sol .product__logo { top: calc(var(--u) * 280); }
    .p_takashimaomachi .product__body { position: absolute; top: calc(var(--u) * 337); left: calc(var(--u) * 797); margin: 0; padding: 0; }
    .p_takashimaomachi .product--sol .product__body { top: calc(var(--u) * 318); }
    .p_takashimaomachi .product__name { width: calc(var(--u) * 425); }
    .p_takashimaomachi .product--sol .product__name { width: calc(var(--u) * 400); }
    .p_takashimaomachi .product__text { margin-top: calc(var(--u) * 43); font-size: max(12px, calc(var(--u) * 24)); line-height: 2.73; letter-spacing: 0.16em; }

    /* Brand Story */
    .p_takashimaomachi .story { padding: calc(var(--u) * 148) 0 calc(var(--u) * 136); }
    .p_takashimaomachi .story__img { margin-top: calc(var(--u) * 68); width: calc(var(--u) * 550); }
    .p_takashimaomachi .story__text { margin-top: calc(var(--u) * 71); font-size: max(12px, calc(var(--u) * 24)); line-height: 3.08; letter-spacing: 0.16em; }
    .p_takashimaomachi .story__text p + p { margin-top: calc(var(--u) * 70); }

    /* ラインナップ */
    .p_takashimaomachi .lineup { display: flex; background: url(../image/kb_bg.jpg) no-repeat center / 100% 100%; }
    .p_takashimaomachi .lineup__item { width: 50%; padding: calc(var(--u) * 160) 0 calc(var(--u) * 124); background: none; }
    .p_takashimaomachi .lineup__inner { width: calc(var(--u) * 838); }
    .p_takashimaomachi .lineup__item--ars .lineup__inner { margin-left: calc(var(--u) * 217); }
    .p_takashimaomachi .lineup__item--sol .lineup__inner { margin-left: calc(var(--u) * 145); }
    .p_takashimaomachi .lineup__bottle { margin-left: calc(50% - var(--u) * 145.5); width: calc(var(--u) * 247); }
    .p_takashimaomachi .lineup__title { margin-top: calc(var(--u) * 54); font-size: max(16px, calc(var(--u) * 52)); text-align: center; }
    .p_takashimaomachi .lineup__text { margin-top: calc(var(--u) * 22); font-size: max(12px, calc(var(--u) * 24)); line-height: 2.5; letter-spacing: 0.14em; }
    .p_takashimaomachi .lineup__spec { margin-top: calc(var(--u) * 67); }
    .p_takashimaomachi .lineup__spec li { font-size: max(11px, calc(var(--u) * 22)); }

    /* フッター */
    .c_footer.takashimaomachi { padding-top: 25px; }
    .c_footer.takashimaomachi .c_footer__content { display: flex; }
    .c_footer.takashimaomachi .c_footer__content__column.address { width: 50%; }
    .c_footer.takashimaomachi .c_footer__content__column.copyright { width: 50%; margin-bottom: 0; text-align: right; }
    .c_footer.takashimaomachi .c_footer__txt.copyright { padding-top: 30px; }
}

/* タブレット幅で文字の最小サイズが効いたとき、ロゴと重ならないよう折り返す */
@media (min-width: 768px) and (max-width: 1099px) {
    .p_takashimaomachi .product__text { width: calc(var(--u) * 1080); white-space: normal; }
    .p_takashimaomachi .product__text br { display: none; }
}

@media (max-width: 767px) {
    .c_footer.takashimaomachi { padding-top: 25px; text-align: center; }
}


/* ==========================================================================
   アニメーション（JS有効時のみ初期状態を隠す）
   ========================================================================== */

/* KV：読み込み後に .is-start を付与
   コピー3行（0.5s〜3.3sで書き終わり）→ ボトル ARS（3.5s〜）/ SOL（4.5s〜）→ ロゴと商品名を同時にフェードイン（5.1s〜） */
.js .p_takashimaomachi .kv__bg { opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 3.2s var(--ease); }
.js .p_takashimaomachi .kv__copy { clip-path: inset(var(--t) var(--r) calc(100% - var(--t)) var(--l)); transition: clip-path 1.6s cubic-bezier(0.45, 0, 0.25, 1); }
.js .p_takashimaomachi .kv__copy--1 { transition-delay: 0.5s; }
.js .p_takashimaomachi .kv__copy--2 { transition-delay: 1.1s; }
.js .p_takashimaomachi .kv__copy--3 { transition-delay: 1.7s; }
.js .p_takashimaomachi .kv__bottle { opacity: 0; transform: translateY(4%); transition: opacity 1.6s ease, transform 1.8s var(--ease); }
.js .p_takashimaomachi .kv__bottle--ars { transition-delay: 3.5s; }
.js .p_takashimaomachi .kv__bottle--sol { transition-delay: 4.5s; }
.js .p_takashimaomachi .kv__logo,
.js .p_takashimaomachi .kv__name { opacity: 0; transition: opacity 2s ease 5.1s; }

.js .p_takashimaomachi .kv.is-start .kv__bg { opacity: 1; transform: none; }
.js .p_takashimaomachi .kv.is-start .kv__copy { clip-path: inset(var(--t) var(--r) var(--b) var(--l)); }
.js .p_takashimaomachi .kv.is-start .kv__bottle,
.js .p_takashimaomachi .kv.is-start .kv__logo,
.js .p_takashimaomachi .kv.is-start .kv__name { opacity: 1; transform: none; }

/* スクロールで表示：画面に入ったら .is-inview を付与 */
.js .p_takashimaomachi [data-anim="fade-up"] { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .p_takashimaomachi [data-anim="fade-up"].is-inview { opacity: 1; transform: none; }
.js .p_takashimaomachi .intro__text[data-anim] { transition-delay: 0.3s; }

.js .p_takashimaomachi [data-anim="zoom"] { opacity: 0; transform: scale(0.92); transition: opacity 1.4s ease, transform 1.8s var(--ease); }
.js .p_takashimaomachi [data-anim="zoom"].is-inview { opacity: 1; transform: none; }

/* ARS / SOL：ボトルが入り、ロゴが上から描かれ、テキストが続く */
.js .p_takashimaomachi [data-anim="product"] .product__img { opacity: 0; transform: translateX(-6%); transition: opacity 1.4s ease, transform 1.8s var(--ease); }
.js .p_takashimaomachi [data-anim="product"] .product__logo { opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 0.8s ease 0.6s, clip-path 2.2s cubic-bezier(0.45, 0, 0.25, 1) 0.6s; }
.js .p_takashimaomachi [data-anim="product"] .product__name,
.js .p_takashimaomachi [data-anim="product"] .product__text { opacity: 0; transform: translateY(30px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .p_takashimaomachi [data-anim="product"] .product__name { transition-delay: 0.4s; }
.js .p_takashimaomachi [data-anim="product"] .product__text { transition-delay: 0.7s; }
.js .p_takashimaomachi [data-anim="product"].is-inview .product__img,
.js .p_takashimaomachi [data-anim="product"].is-inview .product__name,
.js .p_takashimaomachi [data-anim="product"].is-inview .product__text { opacity: 1; transform: none; }
.js .p_takashimaomachi [data-anim="product"].is-inview .product__logo { opacity: 1; clip-path: inset(0); }

/* ラインナップ */
.js .p_takashimaomachi [data-anim="lineup"] .lineup__bottle { opacity: 0; transform: translateY(40px); transition: opacity 1.4s ease, transform 1.6s var(--ease); }
.js .p_takashimaomachi [data-anim="lineup"] .lineup__title,
.js .p_takashimaomachi [data-anim="lineup"] .lineup__text,
.js .p_takashimaomachi [data-anim="lineup"] .lineup__spec { opacity: 0; transform: translateY(20px); transition: opacity 1.2s var(--ease) 0.4s, transform 1.2s var(--ease) 0.4s; }
.js .p_takashimaomachi .lineup__item--sol[data-anim="lineup"] .lineup__bottle { transition-delay: 0.2s; }
.js .p_takashimaomachi .lineup__item--sol[data-anim="lineup"] :is(.lineup__title, .lineup__text, .lineup__spec) { transition-delay: 0.6s; }
.js .p_takashimaomachi [data-anim="lineup"].is-inview :is(.lineup__bottle, .lineup__title, .lineup__text, .lineup__spec) { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .p_takashimaomachi *,
    .js .p_takashimaomachi *::before,
    .js .p_takashimaomachi *::after { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}