/* ===== RESET & BASE ===== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --green-dark: #4f6842;
    --green-mid: #556a4a;
    --green-light: #728f62;
    --gold: #c4a756;
    --amber: #db9d00;
    --orange: #ff6f00;
    --cream: #f5f4f0;
    --page-width: 1350px;
    --font-ja: 'Zen Old Mincho', serif;
    --font-gothic: 'Zen Kaku Gothic Antique', sans-serif;
    --font-en: 'Baskervville', serif;
}

html {}

body {
    position: relative;
    background-color: var(--cream);
    font-family: var(--font-ja);
    color: var(--green-light);
    overflow-x: hidden;
}


/* Hidden defs SVG (clipPath) — layout に影響しない */

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url('../images/bg-paper.png');
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

body.page-loaded::before {
    opacity: 0.55;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}


/* ===== SECTION SHELL ===== */

.section {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    padding: 0;
}

.section--about {
    margin-top: -25vh;
    padding-bottom: 0px;
}


/* ===== HEADER / NAV ===== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 54px 88px 0 72px;
}


/* ロゴ クロスフェード */

.logo-wrap {
    position: relative;
    display: inline-block;
    width: 195px;
    transform: translateY(-4px);
}


/* 2枚を重ねる */

.logo-img {
    display: block;
    width: 195px;
    height: 53px;
}

.logo-img--scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 194px;
    height: 53px;
    opacity: 0;
    /* JS でスクロール量に応じて変化 */
}


/* ロゴ + SNSアイコンのグループ */

.logo-group {
    display: flex;
    align-items: center;
    gap: 0;
    /* 個別に margin で制御 */
}

.logo {
    font-family: 'Analogue', 'Baskervville', serif;
    font-size: 52px;
    font-weight: 400;
    color: var(--green-light);
    letter-spacing: 2px;
    line-height: 1;
}


/* SNSアイコン共通 */

.header-icon {
    display: flex;
    align-items: center;
    transform: translateY(-7px);
    transition: opacity 0.2s;
}

.header-icon:hover {
    opacity: 0.65;
}


/* Instagram: ロゴから49px */

.header-icon:nth-child(2) {
    margin-left: 49px;
}


/* Note: Instagramから36px */

.header-icon:nth-child(3) {
    margin-left: 36px;
}

.nav {
    display: flex;
    gap: 32px;
    transform: translateY(-7px);
}

.nav a {
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 600;
    color: var(--green-light);
    letter-spacing: 0.72px;
    transition: opacity 0.2s;
}

.nav a:hover {
    opacity: 0.65;
}


/* ===== SCROLL INDICATOR ===== */


/* 画像と 3px ラインを同じ縦軸に揃える（右端は right: 19px のまま） */

.scroll-indicator {
    position: fixed;
    right: 65px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    z-index: 100;
    pointer-events: none;
}


/* scroll ラベル（SVG）— ラインの真上 */

.scroll-text {
    display: block;
    width: 17px;
    height: auto;
    margin-bottom: 12px;
    margin-left: 4px;
}


/* Line container — 3px × 170px、画像と水平中央で一致 */

.scroll-border {
    position: relative;
    width: 3px;
    height: 170px;
    flex-shrink: 0;
}

.scroll-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--green-dark);
    opacity: 0.6;
}


/* Animated Union dot — centered on the 3px line */

.scroll-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 25px;
    top: 0;
    animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollDot {
    0% {
        top: 0;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 25px);
        opacity: 0;
    }
}


/* ===== COPYRIGHT FIXED (copyright-001) ===== */


/* Figma: x=79, group height=306.42px
   icons: 17.72×17.72px × 2、gap 8px
   text: vertical, 18px, height 249px、アイコンから14px下 */

.copyright-fixed {
    position: fixed;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    pointer-events: none;
}

.copyright-fixed__icon {
    width: 14px;
    height: 14px;
    display: block;
    color: #97B487;
}

.copyright-fixed__icon+.copyright-fixed__icon {
    margin-top: 6px;
}

.copyright-fixed__text {
    margin-top: 14px;
    writing-mode: vertical-rl;
    font-family: 'Zen Old Mincho', serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--green-light);
    opacity: 0.75;
    letter-spacing: 1px;
    line-height: 20px;
}


/* ===== SECTION LABEL ===== */


/* 固定ヘッダー分（約110px）のスクロール余白 — アンカー移動時に隠れないよう */

.section:not(.section--hero) {
    scroll-margin-top: 110px;
}

.section.section--about {
    scroll-margin-top: 50px;
}

.section.section--profile {
    scroll-margin-top: 50px;
}

.section.section--menu {
    scroll-margin-top: 50px;
}


/* MENU〜RETREAT を覆う背景レイヤー（和紙と乗算合成） */

.menu-wrap {
    position: relative;
}

.menu-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.menu-bg__top,
.menu-bg__bottom {
    display: block;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    mix-blend-mode: multiply;
}

.menu-bg__top {
    margin-top: -100px;
}

.menu-bg__bottom {
    margin-bottom: -100px;
}

.menu-bg__main {
    flex: 1 1 auto;
    background-image: url('../images/menu-bg-main.png');
    background-repeat: repeat;
    mix-blend-mode: multiply;
}

.menu-wrap>.section {
    position: relative;
    z-index: 1;
}

.section-label {
    position: relative;
    z-index: 5;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 64px 72px 0;
}

.section-title-en {
    font-family: 'Analogue', 'Baskervville', serif;
    font-size: 48px;
    font-weight: 400;
    color: var(--green-light);
    letter-spacing: 1.2px;
}


/* ===========================
   ANIMATIONS
   =========================== */


/* --- Phase 1: エンブレム（雲のようにふわっと） --- */

@keyframes emblemReveal {
    0% {
        opacity: 0;
        transform: scale(1.04) translateY(-8px);
        filter: blur(12px);
    }
    60% {
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}


/* --- Phase 2a: ヘッダー・タグライン（フェードイン + 微スライド） --- */

@keyframes uiFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- Phase 2b: 固定要素（opacity のみ — transform: translateY(-50%) を守る） --- */

@keyframes uiFadeInFixed {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* --- スクロール時: 下からふわっと --- */

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ローディング完了前は全入場アニメーション要素を非表示 */

body:not(.page-loaded) .header,
body:not(.page-loaded) .hero-emblem,
body:not(.page-loaded) .hero-tagline-block,
body:not(.page-loaded) .copyright-fixed,
body:not(.page-loaded) .scroll-indicator {
    animation: none !important;
    opacity: 0 !important;
}


/* エンブレム */

.hero-emblem {
    animation: emblemReveal 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}


/* ヘッダー・タグライン（微スライドあり） */

.header,
.hero-tagline-block {
    animation: uiFadeIn 1s ease-out 1.6s both;
}


/* 固定要素はopacityのみ（transform: translateY(-50%)を保護） */

.copyright-fixed,
.scroll-indicator {
    animation: uiFadeInFixed 1s ease-out 1.6s both;
}


/* スクロールリビール — JS で .is-visible を付与 */

.anim-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.anim-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ストagger用ディレイ */

.anim-reveal[data-delay="1"] {
    transition-delay: 0.15s;
}

.anim-reveal[data-delay="2"] {
    transition-delay: 0.30s;
}

.anim-reveal[data-delay="3"] {
    transition-delay: 0.45s;
}


/* ===========================
   HERO
   =========================== */

.hero-scroll-spacer {
    height: 200vh;
}

.section--hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: unset;
    overflow: hidden;
    z-index: 1;
}

.layer-full {
    opacity: 0;
}

.section--hero .hero-content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-emblem {
    width: 482px;
    /* animation は上記 .hero-emblem { animation: emblemReveal ... } で定義済み */
}

.hero-emblem img {
    width: 482px;
    height: 510px;
    object-fit: contain;
}

@keyframes sunRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(396deg);
    }
}

.hero-emblem-layers {
    position: relative;
    width: 482px;
    height: 510px;
}

.hero-emblem-layers img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.layer-arc-group {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 90%;
    /* y は上端固定、x は中央揃え（残り 10% を左右 5% ずつ）。サイズだけ 90% */
}

.layer-sun {
    animation: sunRotate 8s steps(12, end) infinite;
    /* transform-origin は親 .layer-arc-group が 90% に縮んだ後の image box（433.8×459）基準 */
    transform-origin: 215.82px 164.16px;
}


/* Group 35: 縦ライン + タグライン — セクション下合わせ、スクロールで消える */

.hero-tagline-block {
    position: absolute;
    left: 78px;
    bottom: 66px;
    /* Vector 7(y=1008) - テキスト下端(y=942) = 66px */
    z-index: 5;
}


/* Vector 15: 3px × 40px 縦ライン、テキスト上端から6px下に開始 */

.hero-tagline-line {
    position: absolute;
    left: 0;
    top: 6px;
    width: 3px;
    height: 40px;
    background: var(--green-dark);
    opacity: 0.6;
}

.hero-tagline {
    margin-left: 22px;
    /* テキスト x=100 - ライン x=78 = 22px */
    font-family: var(--font-ja);
    font-size: 22px;
    font-style: normal;
    color: var(--green-light);
    line-height: 24px;
    letter-spacing: -0.44px;
    white-space: nowrap;
}


/* ===========================
   ABOUT
   =========================== */


/* コンテナ：997px固定・中央揃え */

.about-content {
    position: relative;
    z-index: 5;
    width: 1040px;
    margin: 71px auto 0;
    transform: translateX(30px);
    /* section-label下端からのFigma差分 */
    display: flex;
    align-items: flex-start;
}


/* 左：画像コンテナ */

.about-image {
    flex-shrink: 0;
    position: relative;
    width: 490px;
    height: 489px;
}


/* 写真：petal-clip.svg でクリッピング（枠線の外にはみ出た部分を非表示） */

.about-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 490px;
    height: 489px;
    display: block;
    clip-path: url(#petal);
    -webkit-clip-path: url(#petal);
}


/* 枠線SVG：写真と同サイズ・同位置に重ねる */

.about-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 490px;
    height: 489px;
    display: block;
    pointer-events: none;
}


/* 右：テキストブロック — 画像右端から89px（490px幅コンテナ込み）、画像上端から44px下 */

.about-text {
    margin-left: 88px;
    margin-top: 44px;
    width: 398px;
}


/* Group 14：logo2.svg 幅258.6px×高さ71px、about-text左から11px */

.about-logo {
    margin-left: -4px;
}

.about-logo img {
    width: 258.6px;
    height: 71px;
    display: block;
}


/* 【 ターラトリップ 】 — logo下から19px、左に-10px */

.about-subtitle {
    margin-top: 19px;
    margin-left: -15px;
    font-family: var(--font-ja);
    font-size: 22px;
    font-style: normal;
    color: var(--green-dark);
    letter-spacing: -1.1px;
    line-height: 28px;
}


/* 本文 — subtitle下から47px */

.about-body {
    margin-top: 47px;
    font-family: var(--font-ja);
    font-size: 17px;
    font-style: normal;
    color: var(--green-dark);
    line-height: 32px;
    letter-spacing: -0.34px;
    width: 385px;
}


/* ===========================
   PROFILE
   =========================== */


/* テキスト（左）+ 写真（右） — Figma: 918px コンテンツ幅 */

.profile-content {
    position: relative;
    z-index: 5;
    width: 918px;
    margin: 0px auto 0;
    display: flex;
    align-items: flex-start;
}


/* 写真: PNG をそのまま表示（clip-path は使わず、下のレイヤーに配置） */

.profile-photo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 398px;
    height: 388px;
    display: block;
    object-fit: cover;
}


/* ベクター枠線: 写真と同サイズ・同位置で上に重ねる */

.profile-border {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 398px;
    height: 388px;
    display: block;
    pointer-events: none;
}


/* 左: テキスト — Figma: text left=296px (content area start) / top=2143px */

.profile-text {
    width: 422px;
    margin-top: 65px;
}


/* Atsuko Satori SVG: 7px 上にオフセット */

.profile-name-en-img {
    margin-top: -7px;
}


/* 名前行: Atsuko Satori SVG (268×37px) + 佐取 温子 — 同じtop=2143px */

.profile-name-row {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    /* Atsuko Satori SVG 幅268px + gap28px → 佐取温子 left=296px offset (page x 592px) */
}


/* 佐取 温子: Zen Old Mincho Medium 22px / #728f62 / leading 28px / tracking 0.66px */

.profile-name-ja {
    font-family: var(--font-ja);
    font-size: 22px;
    font-weight: 500;
    color: #728f62;
    letter-spacing: 0.66px;
    line-height: 28px;
    margin-top: 4px;
}


/* 本文: Zen Old Mincho Regular 18px / #4f6842 / leading 32px / tracking -0.36px */

.profile-bio {
    margin-top: 28px;
    font-family: var(--font-ja);
    font-size: 17px;
    font-weight: 400;
    color: #4f6842;
    line-height: 32px;
    letter-spacing: -0.34px;
    width: 422px;
}


/* 右: 写真 — Figma: photo left=816px (page) = text left(296)+bio width(451)+gap(69)=816px */

.profile-image-wrap {
    flex-shrink: 0;
    position: relative;
    width: 398px;
    height: 388px;
    margin-left: 97px;
}


/* ===== CERTIFICATIONS ===== */


/* ラッパー: margin は profile bottom → cert-box top (2524-2468=56px) */

.certifications-section {
    position: relative;
    z-index: 5;
    width: 944px;
    margin: 56px auto 0;
}


/* ボックス: w944 h152 / tr:76px br:13px / bg #f5f4f0 opacity0.8 / border 2px #5e814b / mix-blend-multiply */

.cert-box {
    position: relative;
    width: 944px;
    height: 152px;
    border-radius: 0 76px 13px 0;
    /* overflow: hidden なし — バッジ画像がボックス上部から飛び出すため */
}


/* バッジ画像: ボックスより 22px 左・16px 上 (Figma: badge top=2508, box top=2524, badge left=274, box left=296) */

.cert-label-badge {
    position: absolute;
    top: -16px;
    left: -22px;
    width: 164px;
    height: 31px;
    display: block;
    z-index: 2;
}


/* 疑似要素で背景・枠線を描画（テキストの opacity に影響させないため分離） */

.cert-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/cert-rect-pc.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}


/* テキストグリッド: 2列 / col1=457px (text at 63px from box) / col2=1fr (text at 519px from box) */

.cert-list-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 457px 1fr;
    padding: 39px 0 0 40px;
    height: 100%;
    box-sizing: border-box;
}


/* 各列 */

.cert-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* 右列: col1 item1 が box-top+39px (2563px) に対し col2 item1 は box-top+63px (2587px) → 24px下 */

.cert-col:last-child {
    margin-top: 24px;
}


/* 各リスト項目: ico-union.svg (13×13px) + テキスト */

.cert-col li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-gothic);
    font-size: 17px;
    font-weight: 500;
    color: #728f62;
    letter-spacing: -0.51px;
    line-height: 22px;
}

.cert-col li img {
    flex-shrink: 0;
    margin-top: 6px;
    /* #97B487 → #668953: 同一ヒュー(99°)のまま輝度↓・彩度↑ */
    filter: brightness(0.70) saturate(1.5);
}


/* プロフィールセクション下部余白 (Figma: cert-box bottom 2676px → menu top 2863px = 187px) */

.section--profile {
    padding-bottom: 187px;
}


/* ===========================
   MEDITATION
   =========================== */


/* 全体: 左画像 + 右テキスト */

.meditation-block {
    position: relative;
    z-index: 5;
    width: 973px;
    margin: 48px auto 0;
    display: flex;
    align-items: flex-start;
}


/* ---- LEFT: 画像 ---- */

.meditation-image-wrap {
    flex-shrink: 0;
    margin-top: 12px;
}

.meditation-photo {
    display: block;
    width: 507px;
    height: 599px;
    object-fit: cover;
    border-radius: 0;
}


/* ---- RIGHT: テキスト ---- */

.meditation-text {
    width: 363px;
    margin-left: 104px;
}


/* 見出し行: Meditation 【 瞑想 】 */

.meditation-heading {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 5px;
    margin-bottom: 25px;
}

.meditation-title-img {
    display: block;
    width: 185px;
    height: 30px;
}

.meditation-title-ja-label {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--green-light);
    letter-spacing: 0.48px;
    line-height: 1;
    align-self: flex-end;
}


/* --- 各アイテム --- */

.meditation-item+.meditation-item {
    /* セパレータ後に続く場合はセパレータで間隔管理 */
}


/* 名前行: [ico-union] [朝の瞑想] */

.meditation-item-name-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 1px;
}


/* ico-union をオレンジ(#FF6F00)に変換 */


/* #97B487 → #FF6F00 への正確な変換 */


/* brightness(0)→黒 / invert(40%)→灰(0.4,0.4,0.4) / sepia(100%)→(0.540,0.481,0.375) / saturate(1000%)→(1.0,0.437,0)=RGB(255,111,0) */

.ico-union--orange {
    flex-shrink: 0;
}

.meditation-item-name-ja {
    font-family: var(--font-ja);
    font-size: 24px;
    color: var(--green-dark);
    line-height: 35px;
}


/* サブタイトル行: [Morning Meditation｜30min] [【平日】] */

.meditation-item-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.meditation-item-title {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-dark);
    line-height: normal;
}

.meditation-item-day {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--green-dark);
    line-height: 28px;
    white-space: nowrap;
}


/* 説明文 */

.meditation-item-desc {
    font-family: var(--font-ja);
    font-size: 17px;
    color: var(--green-light);
    line-height: 1.6;
    width: 358px;
    margin-bottom: 40px;
}


/* 料金行: [icon] [ONLINE] [オンライン] [¥X,XXX] */

.meditation-price-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.meditation-price-row:last-of-type {
    margin-bottom: 0;
}

.meditation-price-row+.meditation-price-row {
    margin-top: -8px;
}


/* 夜の瞑想: ONLINE行の上マージンを5px削る */

.meditation-divider~.meditation-item .meditation-price-row:first-child {
    margin-top: -5px;
}

.meditation-price-row img {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    object-fit: contain;
    /* 各アイコンを25×25のスロット内で中央に収める */
    margin-right: 10px;
}

.meditation-mode-en {
    font-family: var(--font-gothic);
    font-size: 18px;
    font-weight: 900;
    line-height: 28px;
    position: relative;
    top: -2px;
}

.meditation-mode-en.online {
    color: var(--amber);
}

.meditation-mode-en.inperson {
    color: var(--green-light);
}

.meditation-mode-ja {
    font-family: var(--font-gothic);
    font-size: 15px;
    font-weight: 500;
    line-height: 28px;
    margin-left: 8px;
    position: relative;
    top: -2px;
}

.meditation-mode-ja.online {
    color: var(--amber);
}

.meditation-mode-ja.inperson {
    color: var(--green-light);
}

.meditation-price {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-dark);
    margin-left: auto;
    margin-right: 30px;
}


/* セパレータ */

.meditation-divider {
    width: 342px;
    height: 1.5px;
    background: var(--green-mid);
    opacity: 0.5;
    margin: 25px 0 22px;
}


/* 注釈 */

.meditation-note {
    font-family: var(--font-gothic);
    font-size: 16px;
    font-weight: 500;
    color: var(--green-light);
    line-height: normal;
    width: 309px;
    margin-top: -5px;
    margin-left: 0px;
}


/* ===========================
   FULL SESSION BLOCK
   =========================== */

.fullsession-block {
    position: relative;
    z-index: 5;
    width: 997px;
    margin: 70px auto 80px;
    display: flex;
    align-items: flex-start;
}


/* 左：画像 */

.fullsession-image-wrap {
    flex-shrink: 0;
}

.fullsession-photo {
    display: block;
    width: 589px;
    height: 266px;
    object-fit: cover;
    border-radius: 0;
}


/* 右：テキスト */

.fullsession-text {
    position: relative;
    width: 329px;
    flex-shrink: 0;
    margin-left: 79px;
}


/* ico-tara — テキスト右上に絶対配置 */

.ico-tara {
    position: absolute;
    top: 58px;
    right: -7px;
    width: 24px;
    height: 49px;
    object-fit: contain;
}


/* セクション見出し: Special Session 【 施術 】 */

.fullsession-section-heading {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 12px;
}

.fullsession-section-title-img {
    display: block;
}

.fullsession-section-title-ja {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--green-light);
    letter-spacing: 0.48px;
    line-height: 1;
    align-self: flex-end;
    position: relative;
    bottom: 11px;
}


/* 見出し行 */

.fullsession-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}

.fullsession-name-ja {
    font-family: var(--font-ja);
    font-size: 24px;
    color: var(--green-dark);
    line-height: 35px;
}


/* サブタイトル */

.fullsession-title {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-dark);
    margin-bottom: 14px;
}


/* 説明文 */

.fullsession-desc {
    font-family: var(--font-ja);
    font-size: 17px;
    color: var(--green-light);
    letter-spacing: -0.34px;
    line-height: normal;
    margin-bottom: 29px;
}


/* 価格行 */

.fullsession-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fullsession-label {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-dark);
}

.fullsession-price-group {
    display: flex;
    align-items: center;
    gap: 13px;
}

.fullsession-price {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-dark);
}


/* ===========================
   SESSION BLOCK
   =========================== */

.session-block {
    position: relative;
    z-index: 5;
    width: 990px;
    margin: 120px auto 0;
    display: flex;
    align-items: flex-start;
}


/* 左：テキスト */

.session-text {
    width: 326px;
    flex-shrink: 0;
}


/* 右：画像 */

.session-image-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin-left: 85px;
    margin-top: 34px;
}

.session-photo {
    display: block;
    width: 579px;
    height: 437px;
    object-fit: cover;
    border-radius: 0;
}


/* 見出し */

.session-heading {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 29px;
    /* Figma: 見出し下端からicon上端まで32px → -3px調整 */
}

.session-title-img {
    display: block;
}

.session-title-ja-label {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--green-light);
    letter-spacing: 0.48px;
    line-height: 1;
    align-self: flex-end;
}


/* アイテム名行 */

.session-item-name-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 2px;
}

.session-item-name-row .ico-union--orange {
    margin-top: 10px;
}

.session-item-name-row:has(.session-item-name-ja--cranio) .ico-union--orange {
    margin-top: 7px;
}

.session-item-name-ja {
    font-family: var(--font-ja);
    font-size: 24px;
    color: var(--green-dark);
    letter-spacing: -10%;
    line-height: 35px;
}


/* クラニオは2行・別スタイル */

.session-item-name-ja--cranio {
    color: var(--green-mid);
    letter-spacing: -1.2px;
    line-height: 30px;
}


/* タイトル行 */

.session-item-title-row {
    display: flex;
    align-items: baseline;
    gap: 1px;
    margin-bottom: 8px;
}

.session-item-title {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-mid);
}

.session-item-day {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--green-dark);
    white-space: nowrap;
}


/* 説明文 */

.session-item-desc {
    font-family: var(--font-ja);
    font-size: 17px;
    color: var(--green-light);
    line-height: 1.6;
    margin-bottom: 20px;
}

.session-item-desc2 {
    font-family: var(--font-ja);
    font-size: 17px;
    color: var(--green-light);
    line-height: 1.6;
    margin-bottom: 20px;
    width: 324px;
}


/* 価格行 */

.session-price-row {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-left: 187px;
    margin-bottom: 4px;
}

.ico-session {
    flex-shrink: 0;
    width: 27px;
    height: 30px;
    object-fit: contain;
}

.session-price {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-dark);
}


/* モニターセッション注記 */

.session-monitor-note {
    font-family: var(--font-gothic);
    font-size: 16px;
    font-weight: 500;
    color: var(--green-light);
    margin-top: 4px;
    margin-left: 144px;
}


/* 区切り線 */

.session-divider {
    width: 300px;
    height: 1.5px;
    background: var(--green-mid);
    opacity: 0.5;
    margin: 20px 0 19px 6px;
}


/* フッター（施術についてもっと知る + noテバッジ） */

.session-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: 269px;
    margin-top: 35px;
}

.session-more-link {
    font-family: var(--font-ja);
    font-size: 17px;
    color: var(--green-mid);
    text-decoration: none;
    transition: opacity 0.2s;
}

.session-more-link:hover {
    opacity: 0.65;
}

.ico-note2 {
    width: 97px;
    height: 28px;
    object-fit: contain;
    display: block;
}


/* ===========================
   MENU
   =========================== */

.menu-layout {
    position: relative;
    z-index: 5;
    max-width: var(--page-width);
    margin: 60px auto 0;
    padding: 0 72px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}


/* Shared menu-block */

.menu-block {
    display: grid;
    gap: 64px;
    align-items: center;
}

.menu-block--meditation {
    grid-template-columns: 530px 1fr;
}

.menu-block--session {
    grid-template-columns: 1fr 530px;
}

.menu-block--full {
    grid-template-columns: 1fr 530px;
}


/* Images */

.menu-block__image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 16px;
}

.menu-block__image--right img,
.menu-block__image--full img {
    border-radius: 16px;
}


/* Heading */

.menu-block__heading {
    margin-bottom: 32px;
}

.menu-title-ja {
    font-size: 24px;
    color: var(--green-dark);
    letter-spacing: -0.6px;
    margin-bottom: 4px;
}

.menu-title-en {
    font-family: 'Analogue', 'Baskervville', serif;
    font-size: 38px;
    color: var(--green-light);
    letter-spacing: 1.2px;
}

.menu-subtitle {
    font-size: 16px;
    color: var(--green-light);
    letter-spacing: 0.48px;
    margin-top: 4px;
}


/* Menu item */

.menu-item {
    margin-bottom: 24px;
}

.menu-item__header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 8px;
}

.menu-item__title {
    font-size: 19px;
    color: var(--green-mid);
    letter-spacing: -0.38px;
}

.menu-item__day {
    font-size: 15px;
    color: var(--green-dark);
}

.menu-item__desc {
    font-size: 16px;
    color: var(--green-light);
    line-height: 1.8;
    margin-bottom: 12px;
}

.menu-item__price-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
}

.menu-item__mode {
    font-family: var(--font-gothic);
    font-size: 16px;
    font-weight: 900;
}

.menu-item__mode.online {
    color: var(--amber);
}

.menu-item__mode.inperson {
    color: var(--green-light);
}

.mode-label {
    font-weight: 500;
    font-size: 14px;
    margin-left: 4px;
}

.menu-item__price {
    font-size: 19px;
    color: var(--green-dark);
    margin-left: auto;
}

.menu-item__label {
    font-size: 19px;
    color: var(--green-dark);
}

.menu-item__title-block {
    margin-bottom: 8px;
}

.menu-divider {
    width: 100%;
    height: 1px;
    background: var(--green-light);
    opacity: 0.4;
    margin: 24px 0;
}

.menu-note {
    font-family: var(--font-gothic);
    font-size: 14px;
    color: var(--green-light);
    margin-top: 16px;
}

.menu-note-inline {
    font-size: 14px;
    color: var(--green-light);
}

.menu-more-link {
    display: inline-block;
    font-size: 16px;
    color: var(--green-mid);
    border-bottom: 1px solid var(--green-mid);
    margin-top: 8px;
    transition: opacity 0.2s;
}

.menu-more-link:hover {
    opacity: 0.65;
}


/* ===========================
   YOGA
   =========================== */

.yoga-block {
    position: relative;
    z-index: 5;
    width: 995px;
    margin: 172px auto 0;
    display: flex;
    align-items: flex-start;
}


/* 左：テキスト */

.yoga-text {
    width: 303px;
    flex-shrink: 0;
    margin-top: 6px;
}

.yoga-top-line {
    width: 299.5px;
    height: 2px;
    background: var(--green-light);
    opacity: 1;
}

.yoga-heading {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 25px;
}

.yoga-title-img {
    display: block;
}

.yoga-title-ja {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--green-light);
    letter-spacing: 0.48px;
    line-height: 1;
    align-self: flex-end;
    position: relative;
    bottom: 12px;
}

.yoga-item-name-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 25px;
}

.yoga-item-name-row .ico-union--orange {
    margin-top: 8px;
}

.yoga-item-name-ja {
    font-family: var(--font-ja);
    font-size: 23px;
    color: var(--green-dark);
}

.yoga-item-title {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-dark);
    margin-top: -3px;
}

.yoga-item-desc {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--green-light);
    letter-spacing: -0.32px;
    width: 286px;
    line-height: normal;
    margin-top: 20px;
    margin-bottom: 50px;
}

.yoga-price-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.yoga-price-row:first-of-type {
    margin-top: 4px;
}

.yoga-price-row img {
    flex-shrink: 0;
    margin-right: 8px;
}

.yoga-mode-en {
    font-family: var(--font-gothic);
    font-size: 18px;
    font-weight: 900;
    line-height: 28px;
}

.yoga-mode-en.online {
    color: var(--amber);
}

.yoga-mode-en.inperson {
    color: var(--green-light);
}

.yoga-mode-ja {
    font-family: var(--font-gothic);
    font-size: 15px;
    font-weight: 500;
    line-height: 28px;
    margin-left: 8px;
}

.yoga-mode-ja.online {
    color: var(--amber);
}

.yoga-mode-ja.inperson {
    color: var(--green-light);
}

.yoga-price {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-dark);
    margin-left: auto;
}


/* 右：画像 */

.yoga-image-wrap {
    flex-shrink: 0;
    margin-left: 113px;
}

.yoga-photo {
    display: block;
    width: 579px;
    height: 399px;
    object-fit: cover;
    border-radius: 0;
}


/* ===========================
   RETREAT
   =========================== */

.retreat-block {
    position: relative;
    z-index: 5;
    width: 1001px;
    margin: 265px auto 200px;
    display: flex;
    align-items: flex-start;
}


/* 左：画像 */

.retreat-image-wrap {
    flex-shrink: 0;
    margin-top: 13px;
}

.retreat-photo {
    display: block;
    width: 520px;
    height: 600px;
    object-fit: cover;
    border-radius: 0;
}


/* 右：テキスト */

.retreat-text {
    position: relative;
    width: 376px;
    flex-shrink: 0;
    margin-left: 105px;
}

.retreat-top-line {
    width: 374px;
    height: 2px;
    background: var(--green-light);
    opacity: 1;
}

.retreat-heading {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 23px;
}

.retreat-title-img {
    display: block;
}

.retreat-title-ja {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--green-light);
    letter-spacing: 0.48px;
    line-height: 1;
    align-self: flex-end;
    margin-left: 8px;
    position: relative;
    bottom: 9px;
}

.retreat-coming-badge {
    position: absolute;
    right: 0;
    top: 5px;
    width: 105px;
    height: 42px;
    border: 2px solid var(--green-dark);
    border-radius: 30px;
    font-family: var(--font-ja);
    font-size: 22px;
    color: var(--green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.retreat-item-name-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
}

.retreat-item-name-row .ico-union--orange {
    margin-top: 8px;
}

.retreat-item-name-ja {
    font-family: var(--font-ja);
    font-size: 23px;
    color: var(--green-dark);
}

.retreat-item-subtitle {
    font-family: var(--font-ja);
    font-size: 20px;
    color: var(--green-dark);
    margin-top: 6px;
}

.retreat-item-desc {
    font-family: var(--font-ja);
    font-size: 16px;
    color: var(--green-dark);
    letter-spacing: -0.32px;
    width: 269px;
    line-height: normal;
    margin-top: 7px;
}

.retreat-image-grid {
    display: grid;
    grid-template-columns: 179px 179px;
    grid-template-rows: 178px 179px;
    gap: 20px 18px;
    margin-top: 53px;
}

.retreat-grid-item {
    border-radius: 10px;
}

.retreat-grid-item--border {
    border: 3px solid var(--green-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.retreat-coming-soon {
    font-family: var(--font-ja);
    font-size: 25px;
    color: var(--green-light);
    line-height: 26px;
    text-align: center;
}

.retreat-grid-item--light {
    background: #a7c09a;
}

.retreat-grid-item--green {
    background: var(--green-light);
}

.retreat-grid-item--dark {
    background: var(--green-dark);
}


/* ===========================
   CONTACT
   =========================== */

.contact-layout {
    position: relative;
    z-index: 5;
    width: 524px;
    margin: 28px auto 0;
    padding: 0 0 150px;
    box-sizing: border-box;
}

.contact-subtitle {
    font-family: var(--font-ja);
    font-size: 18px;
    color: #4f6842;
    letter-spacing: 0.48px;
    margin-bottom: 18px;
    margin-left: -8px;
}


/* Form */

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
}

.form-select-wrap {
    position: relative;
    width: 100%;
}

.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    border: 2px solid #4f6842;
    border-radius: 5px;
    background: transparent;
    font-family: var(--font-gothic);
    font-size: 15px;
    color: var(--green-light);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.form-input,
.form-select {
    height: 46px;
    padding: 0 14px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--green-light);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--green-light);
    font-family: var(--font-gothic);
    font-size: 15px;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    color: var(--green-light);
}

.form-select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 9.5px solid transparent;
    border-right: 9.5px solid transparent;
    border-top: 10.5px solid #4f6842;
    pointer-events: none;
}

.form-textarea {
    height: 239px;
    padding: 14px 14px;
    line-height: 25px;
    resize: none;
    margin-top: -2px;
}

.form-note {
    font-family: var(--font-gothic);
    font-size: 17px;
    color: var(--green-light);
    margin-top: -7px;
    white-space: nowrap;
    align-self: center;
}

.form-submit-wrap {
    display: flex;
    justify-content: center;
    margin-top: 27px;
}

.form-submit {
    width: 150px;
    height: 39px;
    background: var(--green-light);
    color: #fff;
    border: none;
    border-radius: 40px;
    font-family: var(--font-ja);
    font-weight: 100;
    font-size: 22px;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
}

.form-submit:hover {
    opacity: 0.8;
}


/* Footer tagline — Hero と同じ縦ライン + タグラインをページ最下部に配置 */

.footer-tagline-block {
    position: absolute;
    left: 78px;
    bottom: 66px;
    z-index: 5;
}

.footer-tagline-line {
    position: absolute;
    left: 0;
    top: 6px;
    width: 3px;
    height: 40px;
    background: var(--green-dark);
    opacity: 0.6;
}

.footer-tagline {
    margin-left: 22px;
    font-family: var(--font-ja);
    font-size: 22px;
    font-style: normal;
    color: var(--green-light);
    line-height: 24px;
    letter-spacing: -0.44px;
    white-space: nowrap;
}


/* ===========================
   COLOR SCHEME
   =========================== */

.color-scheme {
    position: relative;
    z-index: 5;
    max-width: var(--page-width);
    margin: 80px auto 0;
    padding: 0 72px;
}

.color-scheme__title {
    font-size: 36px;
    color: var(--green-mid);
    margin-bottom: 16px;
}

.color-scheme__swatches {
    display: flex;
    gap: 0;
}

.swatch {
    width: 247px;
    height: 87px;
}


/* ===========================
   LOADING SCREEN
   =========================== */

@keyframes loading-logo-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loading-star-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--cream);
    transition: opacity 0.7s ease-out;
}


/* loading-overlay は bg-paper.png 読み込み前のため疑似要素なし */

.loading-logo {
    width: 272px;
    height: 75px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -37.5px;
    margin-left: -136px;
    z-index: 1;
    animation: loading-logo-in 0.9s ease-out 0.35s both;
}

.loading-star {
    width: 33px;
    height: 33px;
    position: absolute;
    left: 50%;
    /* ロゴ上端(50% - 37.5px) から Figma実測の隙間(27px) + Union自身(33px) 上 */
    top: calc(50% - 37.5px - 27px - 33px);
    margin-left: -16.5px;
    z-index: 1;
    animation: loading-logo-in 0.9s ease-out both, loading-star-spin 3s linear 1s infinite;
}

.loading-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}


/* ===== FIXED SECTION TITLE ===== */


/* ヘッダー下フェードオーバーレイ — 背景と同素材でコンテンツを自然に隠す */

.header-fade {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--header-h, 128px) / 2 + 140px);
    background: linear-gradient(to bottom, var(--cream) calc(var(--header-h, 128px) / 2 + 20px), transparent 100%);
    z-index: 50;
    pointer-events: none;
}

.header-fade::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/bg-paper.png');
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to bottom, black calc(var(--header-h, 128px) / 2 + 20px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(var(--header-h, 128px) / 2 + 20px), transparent 100%);
}


/* 既存セクションタイトル画像を非表示（スペースは維持） */

.section-title-img {
    visibility: hidden;
}

#fixed-section-title {
    position: fixed;
    left: 72px;
    top: 115px;
    width: 165px;
    height: 51px;
    z-index: 9998;
    pointer-events: none;
}

#fixed-section-title img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}