@charset "UTF-8";

/* 変数定義
----------------------------------------------------------- */
:root {
    /* メインカラー */
    --color-primary: #7273AA;
    --color-primary-hover: #62639A;

    /* サブカラー */
    --color-secondary: #FFFFFF;

    /* アクセントカラー */
    --color-accent: #EBFECF;

    /* テキスト */
    --color-text: #000000;

    --color-cream: #f5f2ec;
    --color-gray: #6b7280;

    /* 背景 */
    --color-body: #FFFFFF;
    --color-bg-blue: #E6F0FF;
    --color-bg-purple: #E4E8FF;
    --color-bg-yellow: #FFFFF7;

    /* footer */
    --color-footer: #F0EFFF;

    /* card
    ----------------------------------------------------------- */
    /* LOGO STORY・VISION */
    --color-card: #FAF5F4;

    /* APPROACH・症例セクションの外枠 */
    --color-card-light: #F9F8FF;

    /* PRICE */
    --color-card-white: #FFFFFF;

    /* PROFILEのプロフィールカード */
    --color-card-profile: #F0EFFF;

    /* Cases card
    ----------------------------------------------------------- */
    /* 整形外科疾患 */
    --color-card-orthopedic: #F4F3FE;

    /* 中枢神経疾患 */
    --color-card-neuro: #ECF4DF;

    /* スポーツ障害・スポーツ外傷 */
    --color-card-sports:#E6F0FF;

    /* 脊髄疾患 */
    --color-card-sekizui: #F7F1F6;

    /* その他 */
    --color-card-sonota:#EEEEEE;

    /* Tab
    ----------------------------------------------------------- */
    /* ABOUT */
    --color-tab: #F9F8FF;

    /* CONCEPT */
    --color-tab-active: #E7E2FF;

    /* CASES */
    --color-tab-sub: #F0EFFF;

    /* FLOW
    ----------------------------------------------------------- */
    /* アイコンの丸背景 */
    --color-flow-icon-bg: #F4F3F8;

    /* レイアウト
    ----------------------------------------------------------- */
    --width-mid: 1150px;
    --width-narrow: 800px;
    --space-unit: 15px;
    --space-section: 160px;
    --header-height: 90px; /* fixedヘッダーの高さ（body padding-topに使用） */

    /* その他
    ----------------------------------------------------------- */
    --gap: 32px;
    --duration: 0.3s;
}

/* ベース
----------------------------------------------------------- */
html {
    font-size: 100%;
    overflow-x: clip;
}

/* 固定ヘッダーの高さ分、アンカーリンクのジャンプ先をずらす */
section[id] {
    scroll-margin-top: var(--header-height);
}

body {
    font-family: "LINE Seed JP", "Noto Sans JP", "Hiragino Sans", sans-serif;
    overflow-x: clip;
    padding-top: var(--header-height);
    background: var(--color-body);
    color: var(--color-text);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* レイアウト
----------------------------------------------------------- */
.wrapper {
    width: 100%;
    padding-inline: var(--space-unit);
    box-sizing: border-box;
}

.wrapper-mid {
    max-width: var(--width-mid);
    margin-inline: auto;
    padding-inline: var(--space-unit);
    box-sizing: border-box;
}

.wrapper-narrow {
    max-width: var(--width-narrow);
    margin-inline: auto;
    padding-inline: var(--space-unit);
    box-sizing: border-box;
}

/* ユーティリティ - Flex
----------------------------------------------------------- */
.flex {
    display: flex;
}

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

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.gap {
    gap: var(--gap);
}

/* ユーティリティ - Grid
----------------------------------------------------------- */
.grid {
    display: grid;
}

.grid-3col {
    grid-template-columns: repeat(3, 1fr);
}

.grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

/* 共通コンポーネント
----------------------------------------------------------- */
.sec-ttl {
    font-size: 50px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    padding-bottom: 30px;
}

.lead {
    font-size: 13px;
    line-height: 2;
    color: var(--color-text);
    text-align: center;
    padding-bottom: 80px;
}

/* ボタン共通 */
.btn {
    display: block;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    transition: all var(--duration);
    margin: 0 auto;
    cursor: pointer;
}

/* プライマリーボタン */
.btn-primary {
    width: 300px;
    height: 60px;
    line-height: 58px; /* border分1px引く */
    background: var(--color-primary);
    color: var(--color-secondary);
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    transition: background var(--duration), color var(--duration);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

/* セカンダリーボタン */
.btn-secondary {
    width: 150px;
    height: 45px;
    line-height: 44px; /* border分1px引く */
    border-radius: 999px;
    font-size: 15px;
    color: var(--color-secondary);
    border: 1px solid var(--color-text);
    transition: background var(--duration), color var(--duration);
}

/* ページトップボタン */
.pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    background-color: var(--color-secondary);
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: background var(--duration), color var(--duration), border-color var(--duration), opacity 0.5s, visibility 0.5s;
}

/* 表示状態 */
.pagetop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 矢印：borderのtransparentトリックで上向き三角形を作る */
.pagetop:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid var(--color-primary);
    transform: translate(-50%, -50%);
}

/* カード画像ズーム用 */
.card figure {
    overflow: hidden;
    margin-bottom: var(--space-unit);
}

.card figure img {
    transition: transform 0.4s ease;
}

/* ホバー制御（PCのみ） */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        background: transparent;
        color: var(--color-primary);
    }

    .btn-secondary:hover {
        background: var(--color-text);
        color: var(--color-secondary);
    }

    .card figure img:hover {
        transform: scale(1.08);
    }

    .sec-01-img img:hover,
    .cases-photo img:hover,
    .profile-photo img:hover {
        transform: scale(1.08);
    }

    .pagetop:hover {
        background: var(--color-primary);
    }

    .pagetop:hover::before {
        border-bottom-color: var(--color-secondary);
    }
}


/*
ローディング
----------------------------------------------------------- */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-body);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1.2s ease;
}
#loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.loading-logo {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.loading-logo img {
    width: 120px;
    height: 120px;
}
.loading-logo.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*
header
----------------------------------------------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 100;
    /* backdrop-filterを::beforeに分離することで、スタッキングコンテキスト(ブラウザが「どの要素を手前に表示するか」を判断するための重なり順の管理単位)の生成を防ぐ */
    /* → header内のdrawer・overlay・menuがz-indexで自由に重なれるようになる */
}
/* ガラス効果（すりガラス）は::beforeで独立させる */
/* トップでは透明、スクロールしたら(.is-scrolledが付いたら)フェードインする */
.header::before {
    content: "";
    position: absolute;
    inset: 0; /* top/right/bottom/left: 0 の省略形 */
    z-index: -1; /* header内で一番奥に配置 */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity var(--duration);
}

.header.is-scrolled::before {
    opacity: 1;
}
/* wrapperの高さをヘッダーに合わせる */
.header .wrapper {
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
/* ロゴ */
.logo img {
    height: 80px;
    margin: 0 60px;
    display: block;
}
/* SP専用の常時表示ロゴ（PC/タブレットではnav内のロゴを使うので非表示） */
.header-logo {
    display: none;
}
/* グローバルナビ（PC） */
.nav {
    width: 100%;
}
.nav-link {
    display: block;
    padding: 0 16px;
    height: calc(var(--header-height) - 20px);
    line-height: calc(var(--header-height) - 20px);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--color-primary);
    position: relative; /* ::afterの基準 */
}
.nav-list {
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
/* 下線：通常時はscaleX(0)で非表示（widthではなくtransformでアニメーションさせ、再レイアウトを避ける） */
.nav-link::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}
/* ホバー時：中央から両端に向かって伸びる */
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover::after {
        transform: scaleX(1);
    }
}
/* オーバーレイ・ハンバーガーボタン（PCでは非表示） */
.nav-overlay,
.menu {
    display: none;
}

/*
main visual
----------------------------------------------------------- */
.mv {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-blue); /* 波のマスクで切り取った部分に見える色（次のABOUTセクションと同色） */
}

/* 波の形はCSSマスクで作る（写真自体は普通の四角い写真）
   SVGはdata URIで直接埋め込み（file://で開いた時に外部SVGのマスク読み込みが
   ブロックされてしまう問題を避けるため） */
.mv-photo {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%221920%22%20height%3D%22900%22%20viewBox%3D%220%200%201920%20900%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cpath%20d%3D%22M0%2C0%20H1920%20V760%20C1750%2C830%201600%2C700%201420%2C760%20C1240%2C820%201100%2C700%20920%2C750%20C740%2C800%20600%2C690%20420%2C740%20C240%2C790%20120%2C700%200%2C750%20Z%22%20fill%3D%22%23fff%22/%3E%20%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%221920%22%20height%3D%22900%22%20viewBox%3D%220%200%201920%20900%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cpath%20d%3D%22M0%2C0%20H1920%20V760%20C1750%2C830%201600%2C700%201420%2C760%20C1240%2C820%201100%2C700%20920%2C750%20C740%2C800%20600%2C690%20420%2C740%20C240%2C790%20120%2C700%200%2C750%20Z%22%20fill%3D%22%23fff%22/%3E%20%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ズーム演出：ゆっくり拡大・縮小を繰り返すループ（呼吸するような動き） */
.mv-photo img {
    display: block;
    width: 100%;
    height: auto;
    animation: mvBreathe 10s ease-in-out infinite alternate;
}

@keyframes mvBreathe {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* 見出し・本文・ボタンをまとめて1つの塊として配置 */
.mv-text {
    position: absolute;
    top: 32%;
    left: 8%;
    z-index: 2;
}

.mv-text h1 {
    margin-bottom: 20px;
    font-size: clamp(28px, 2.8vw, 52px);
    font-weight: 400;
    line-height: 1.4;
    color: #666666;
}

.mv-text p {
    margin-bottom: 24px;
    font-size: clamp(12px, 0.9vw, 16px);
    color: var(--color-text);
}

.mv-text .btn {
    margin: 0;
}

/*
section01
----------------------------------------------------------- */
.sec-01 {
    padding: 80px 0 160px;
    background-color: var(--color-bg-blue);
    background-image: url("../img/bg-01.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

/* タブ付きカードを重ねる（バインダーの仕切り方式）
----------------------------------------------------------- */
.sec-01-stack {
    position: relative;
}

/* カード＝タブ＋パネルの1枚。3枚とも同じ幅で、縦に20pxずつズラして重ねる */
/* ズレ幅(20px)はタブの高さ(約64px)より小さくしてあるので、
   手前のパネルに覆われても各タブの上端が必ず覗いてクリックできる */
.sec-01-card {
    position: absolute;
    left: 0;
    width: 100%;
    /* カード自体はクリックを素通しにする。
       タブボタン横の透明な余白が、奥のカードのタブへのクリックを妨げないようにするため */
    pointer-events: none;
}

/* 目に見えるパーツ(タブとパネル)だけがクリックを受け取る */
.sec-01-card .tab-btn,
.sec-01-card .sec-01-panel {
    pointer-events: auto;
}

.sec-01-card[data-tab="cases"] {
    top: 0;
    z-index: 1;
}

.sec-01-card[data-tab="concept"] {
    top: 20px;
    z-index: 2;
}

.sec-01-card[data-tab="about"] {
    top: 40px;
    z-index: 3;
}

/* クリックされたカードは常に最前面（＝そのパネルが他のタブを覆う） */
.sec-01-card.is-active {
    z-index: 10;
}

.tab-btn {
    /* inline-blockだとベースライン揃えで下に数pxの隙間が出るためblockにする */
    /* blockは幅が親いっぱいに広がるのでfit-contentで中身なりの幅を維持 */
    display: block;
    width: fit-content;
    min-width: 300px;
    padding: 20px 40px;
    border: none;
    border-radius: 20px 20px 0 0;
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--duration);
}

/* タブの横位置：カードごとに階段状にズラす */
.tab-btn[data-tab="cases"] {
    margin-left: 0;
    background: var(--color-tab-sub);
}

.tab-btn[data-tab="concept"] {
    margin-left: 280px;
    background: var(--color-tab-active);
}

.tab-btn[data-tab="about"] {
    margin-left: 560px;
    background: var(--color-tab);
}

/* パネル 
----------------------------------------------------------- */
.sec-01-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 20px;
    margin-top: -1px;
    border-radius: 10px;
}

/* 左右レイアウト */
.sec-01-content {
    flex: 0 0 45%;
}

.sec-01-img {
    flex: 0 0 55%;
    overflow: hidden; /* ホバーズームが枠からはみ出さないように */
    border-radius: 20px;
}

.sec-01-img img {
    width: 90%;
    display: block;
    margin-left: auto;
    transition: transform 0.4s ease;
}

/* 小見出し */
.sub-ttl {
    margin-bottom: 30px;
    font-size: 21px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: left;
    line-height: 1.4;
}

/* リスト */
.sec-01-list,
.sec-01-panel p {
    font-size: 12px;
    line-height: 2;
}

/* CASES見出し */
.case-text {
    margin: 40px 0 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

/* パネル内テキスト */
.sec-01-panel p {
    margin-bottom: 24px;
    line-height: 2;
}

/* ABOUT */
.sec-01-panel[data-panel="about"] {
    background: var(--color-tab);
}
.sec-01-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sec-01-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    line-height: 1.8;
    font-weight: 700;
    font-size:larger;
}

.sec-01-list li::before {
    content: "\2713";
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 700;
}

/* CONCEPT */
.sec-01-panel[data-panel="concept"] {
    background: var(--color-tab-active);
}

/* CASES */
.sec-01-panel[data-panel="cases"] {
    background: var(--color-tab-sub);
}

/* CASESパネル内レイアウト
----------------------------------------------------------- */
.cases-inner {
    width: 100%;
}

/* 整形外科(2列+点線) / 中枢 / スポーツ / 写真 の4カラム */
.cases-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 30px;
    /* align-itemsは指定なし(stretch)：点線区切り・写真・ボタンを列の高さいっぱいに使うため */
}

/* 各グループを縦flexにして、ボタンをmargin-top:autoで下端に送れるようにする */
.cases-group {
    display: flex;
    flex-direction: column;
}

/* 整形外科疾患ブロック：内部2列＋右端に点線区切り */
.cases-group--ortho {
    padding-right: 30px;
}
/* 整形外科疾患（PC） */
.cases-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.case-item .case-sub {
    flex: 0 0 170px;
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 700;
}

.case-item .sec-01-list {
    flex: 1;
    margin: 0;
}

/* 症例の小見出し(部位名) */
.cases-grid .case-sub {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.cases-grid .case-text {
    margin: 0;
}

/* リストの点(見本の「*」風) */
.cases-grid .sec-01-list li::before {
    content: "\ff65 ";
    color: var(--color-primary);
}

/* 写真：パネルの高さいっぱいに */
.cases-photo {
    overflow: hidden;
    border-radius: 8px;
}

.cases-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* 症例一覧ボタン：margin-top:autoで列の下端に固定、左右autoで中央寄せ */
.cases-btn {
    width: 200px;
    height: 48px;
    line-height: 46px;
    margin: auto auto 0;
    font-size: 14px;
}

/* CASES：病名をボタン風に */
.cases-grid .sec-01-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 10px 0 24px;
    padding: 0;
}

.cases-grid .sec-01-list li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background-color: #fff; /* ←追加・変更 */
    color: var(--color-primary);
    font-size: 10px;
    line-height: 1.4;
}

/* 箇条書きの「・」を消す */
.cases-grid .sec-01-list li::before {
    content: none;
}


/*
LOGO STORY
----------------------------------------------------------- */
.sec-01-story {
    margin-top: 20px;
    padding: 40px;
    background: var(--color-card);
    border-radius: 25px;
}

.sec-01-story .sec-ttl {
    font-size:20px
}
.sec-01-story > img:first-of-type{
    display: block;
    width: 48px;
    height: auto;
    margin: 8px auto 24px;
}
.sec-01-story .lead {
    padding-bottom: 30px;
}
/* 下のレイアウト */
.story-wrapper{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:40px;
}

/* 左のレイアウト */
.story-logo{
    flex:1;
    text-align:center;
}

.story-logo img{
    width:80%;
    margin:auto;
}

/* 中央：ロゴとコンテンツの区切り(縦の破線) */
.line {
    align-self: stretch;
    border-left: 1px dashed var(--color-gray);
}

/* 右のレイアウト */
.story-content{
    flex:2;
    display:flex;
    flex-direction:column;
    gap:36px;
}

.story-item{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.story-item h4{
    margin-bottom:10px;
    color:var(--color-primary);
    font-size:15px;
    font-weight:700;
}
.story-item p{
    font-size:12px;
    line-height:2;
}
.story-icon{
    width:90px;
    height:90px;
    flex-shrink:0;
}

.story-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.story-border{
    width:1px;
    height:250px;
    border-left:2px dashed #2a2727;
}

/*
section02
----------------------------------------------------------- */
.sec-02 {
    padding: 120px 0 60px;
    background: var(--color-bg-purple);
    position: relative;
}

/* 上端の波帯：前セクションとの境目に固定の高さで重ねる（セクションの高さに依存しない） */
.sec-02::before,
.sec-02::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 80px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.sec-02::before {
    top: -80px;
    background-image: url("../img/bg-02-top.svg");
}

.sec-02::after {
    bottom: -80px;
    background-image: url("../img/bg-02-bottom.svg");
}

/* タイトル */
.sec-02 .sec-ttl {
    text-align: center;
}

/* 飾り */
.ttl-deco,
.sec-02 > .wrapper-mid > img:first-of-type {
    display: block;
    width: 48px;
    margin: 0 auto 24px;
}

/* サブセクション見出し(APPROACH等) */
.sub-sec-ttl {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 10px;
}

/* セクション区切りのカメ飾り(通常時：カードの外で使う場合の余白) */
.sec-02-deco {
    display: block;
    width: 90px;
    margin: 0 auto 60px;
}

/* vision-card直後だけ、カードの下端に半分乗るよう例外的にネガティブマージンで引き上げる */
/* (親要素の高さに依存しないので、カード内の項目数が変わっても自動で追従する) */
.vision-card + .sec-02-deco {
    margin: -25px auto 20px;
    position: relative;
    z-index: 1;
}

/* approach直後は逆に、下のtaiouカードの上端に半分乗るようネガティブマージン(下側)で引き寄せる */
.approach + .sec-02-deco {
    margin: -30px auto -25px;
    position: relative;
    z-index: 1;
}

/* リード文 */
.sec-02 .lead {
    max-width: 760px;
    margin-inline: auto; /* 中央寄せはmarginでしかできないための例外 */
    padding-bottom: 60px;
    text-align: center;
}

/* お悩み・目標カード
----------------------------------------------------------- */
.vision-card {
    display: flex;
    align-items: stretch;
    gap: 40px;
    padding: 50px 40px;
    background: var(--color-card);
    border-radius: 25px;
    text-align: center;
}

.vision-col {
    flex: 1;
}

/* 真ん中の点線区切り */
.vision-divider {
    border-left: 2px dashed var(--color-gray);
}

/* ラベル(お悩み/目標) */
.vision-label {
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
}

.vision-question {
    margin-bottom: 30px;
    font-size: 13px;
    color: var(--color-gray);
}

/* イラスト＋チェックリストの横並び */
.vision-body {
    display: flex;
    align-items: center;
    gap: 20px;
}

.vision-body img {
    width: 40%;
    max-width: 180px;
}

/* VISIONのリストだけチェックアイコン＋下線スタイルに上書き（症例セクションのピルとは別デザイン） */
.vision-body .sec-02-list {
    display: block;
    flex: 1;
    margin-bottom: 0;
}

.vision-body .sec-02-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 26px;
    background: none;
    border: none;
    border-bottom: 1px dotted var(--color-primary);
    border-radius: 0;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.vision-body .sec-02-list li:last-child {
    margin-bottom: 0;
}

/* チェックアイコン(丸+チェックマーク) */
.vision-body .sec-02-list li::before {
    content: "\2713";
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 700;
}

/* ピルリスト共通(症例セクション用) */
.sec-02-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.sec-02-list li {
    padding: 10px 20px;
    background: var(--color-secondary);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
}

/* APPROACH
----------------------------------------------------------- */
.approach {
    text-align: center;
}

.approach-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    text-align: center;
}

.approach-card {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    background: var(--color-secondary);
    border-radius: 25px;
}

.approach-text {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.approach-card img {
    width: 100%;
    max-width: 180px;
    margin: 0 auto 20px;
}

.approach-card p:last-child {
    margin-top: auto;
    font-size: 12px;
    line-height: 1.9;
    text-align: left;
}

/* こんな症例に対応しています
----------------------------------------------------------- */
.taiou {
    padding: 60px 40px;
    background: var(--color-card-light);
    border-radius: 25px;
    margin-top: -120px;
    margin-bottom: 80px;
    text-align: center;
}
.taiou-grid {
    display: grid;
    grid-template-columns:2fr 1fr;
    gap: 24px;
    align-items: start;
    text-align: left;
}

/* 左：整形外科 */
.taiou-card--ortho{
    height: 100%;
    grid-column:1;
    grid-row:1 / span 2;
}

/* 左下：脊髄疾患　*/
.taiou-card--sekizui{
    height: 100%;
}

/* 相談メッセージ */
.taiou-note{
    grid-column:1 / -1;
}

/* 下のメッセージ */
.sec-02-message,
.taiou-grid > .lead{
    grid-column:1 / -1;
    text-align:center;
}

.taiou-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 25px;
}

/* カテゴリごとの背景色(外枠) */
.taiou-card--ortho {
    background: var(--color-card-orthopedic);
}

.taiou-card--neuro {
    background: var(--color-card-neuro);
}

.taiou-card--sports {
    background: var(--color-card-sports);
}
.taiou-card--sekizui {
    background: var(--color-card-sekizui);
}

.taiou-card--sonota {
    background: var(--color-card-sonota);
}

/* 内側の白い箱：ここに外枠のパディング分だけ色が「枠」として見える */
.taiou-inner {
    flex: 1;
    padding: 20px;
    background: var(--color-card-white);
    border-radius: 25px;
    box-sizing: border-box;
}

/* カテゴリ見出し(アイコン＋タイトル)：白い箱の外＝色付き背景に直置き */
.taiou-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 16px;
}

.taiou-head img {
    width: 28px;
    height: 28px;
    margin: 0;
    flex-shrink: 0;
}

.taiou-head h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
}

/* 部位名 */
.sec-02-text {
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 700;
}

.taiou-card .sec-02-list {
    justify-content: flex-start;
    gap: 8px;
}

.taiou-card .sec-02-list li {
    padding: 8px 14px;
    font-size: 12px;
}

/* 相談メッセージ */
.taiou-note {
    padding: 24px;
    background: var(--color-secondary);
    border-radius: 25px;
    text-align: center;
}

.taiou-note h4 {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.taiou-note p {
    font-size: 13px;
}

/* 締めのメッセージ */
.sec-02-message {
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
}
/*
section03（FLOW）
----------------------------------------------------------- */
.sec-03 {
    position: relative;
    /* background: var(--color-body); */
    padding: var(--space-section) 0;
    text-align: center;
}

.sec-03 > .wrapper-mid > img:first-of-type {
    display: block;
    width: 48px;
    margin: 0 auto 24px;
}

.sec-03 .lead {
    padding-bottom: 80px;
}

.flow-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

.flow-item {
    width: 220px;
}

.flow-item img {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    padding: 10px;
    background: var(--color-flow-icon-bg);
    border-radius: 50%;
    box-sizing: border-box;
    object-fit: contain;
}

.flow-ttl {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.flow-text {
    font-size: 13px;
    line-height: 1.8;
}

.flow-icon {
    display: flex;
    align-items: center;
    padding-top: 40px;
    font-size: 24px;
    color: var(--color-primary);
}

/*
section04（PRICE）
----------------------------------------------------------- */
.sec-04 {
    position: relative;
    padding: var(--space-section) 0;
    background-color: var(--color-bg-blue);
    text-align: center;
}

.sec-04::before,
.sec-04::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 70px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.sec-04::before {
    top: -70px;
    background-image: url("../img/bg-03-top.svg");
}

.sec-04::after {
    bottom: -70px;
    background-image: url("../img/bg-03-bottom.svg");
}

.sec-04 > .wrapper-mid > img:first-of-type {
    display: block;
    width: 48px;
    margin: 0 auto 24px;
}

.sec-04 .lead {
    padding-bottom: 60px;
}

/* 料金カード：木 / 価格 / チェックリスト の3カラム */
.price-card {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 50px 60px;
    background: var(--color-card-white);
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(114, 115, 170, 0.12);
    text-align: left;
}

.price-deco {
    flex: 0 0 140px;
}

.price-main {
    flex: 0 0 auto;
    text-align: center;
}

.price-time {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.price-value {
    margin-bottom: 16px;
    font-size: 48px;
    font-weight: 700;
    color: var(--color-primary);
}

.price-note {
    font-size: 12px;
    line-height: 1.9;
    color: var(--color-text);
}

.sec-04-list {
    flex: 1;
    padding: 0;
    list-style: none;
}

.sec-04-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.sec-04-list li:last-child {
    margin-bottom: 0;
}

.sec-04-list li i {
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 18px;
}

/*
section05（PROFILE）
----------------------------------------------------------- */
.sec-05 {
    padding: var(--space-section) 0 0;
    background: var(--color-bg-yellow);
    text-align: center;
}

.sec-05 .lead {
    padding-bottom: 60px;
}

.sec-05 > .wrapper-mid > img:first-of-type {
    display: block;
    width: 48px;
    margin: 0 auto 24px;
}

/* 左テキスト / 写真 / 右テキストの3列グリッド */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: left;
}

.profile-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ブロック共通：各要素が独立したカード */
.profile-block {
    position: relative;
    padding: 20px;
    background: var(--color-card-profile);
    border-radius: 25px;
}

/* 名前・基本情報ブロックだけ白背景+枠線 */
.profile-block--info {
    background: var(--color-secondary);
    border: 1px solid var(--color-primary);
}

/* Off timeブロックだけ背景色を変える */
.profile-block--offtime {
    background: var(--color-card-light);
}

/* 左カラム：基本情報ブロック */
.profile-deco {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    margin: 0;
}

.profile-name {
    margin-bottom: 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
}

.profile-name-en {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--color-primary);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--color-gray);
}

.profile-data-item {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
}

.profile-data-item:last-child {
    margin-bottom: 0;
}

.profile-data-item dt {
    flex: 0 0 60px;   /* ←ラベルの幅を固定 */
    font-weight: 700;
    color: var(--color-primary);
}

.profile-data-item dd {
    flex: 1;
    font-size:12px;
}

/* 中央：写真（カード枠なし） */
.profile-photo {
    overflow: hidden;
    border-radius: 20px;
}

.profile-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ブロック内の見出し */
.profile-card-ttl {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
}

.profile-sub-ttl {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
}

.profile-block p {
    font-size: 13px;
    line-height: 1.9;
}

.profile-block-deco {
    position: absolute;
    top: -10px;
    right: 10px;
    width: 120px;
    margin: 0;
}

/*
section06（CONTACT）
----------------------------------------------------------- */
.sec-06 {
    position: relative;
    padding: var(--space-section) 0;
    background-color: var(--color-bg-yellow);
    background-image: url("../img/bg-05-fixed.svg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 300px; /* 波のカーブ+下の単色部分を合わせて300px。封筒(bottom:100px)まで届く高さ */
    text-align: center;
}

.contact-sub-ttl {
    margin-bottom: 8px;
    font-size: 14px;
    font-style: italic;
    color: var(--color-primary);
}

.sec-06 .lead {
    padding-bottom: 40px;
}

.contact {
    padding-bottom: 200px; /* 下に絶対配置する封筒エリアの分だけスペースを確保 */
}

/* 封筒＋吹き出しをまとめて、セクション下端の波にまたがる位置に固定配置 */
.envelope-area {
    position: absolute;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
}

/* 吹き出しは封筒の右側（右上）に配置 */
.contact-balloon {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 2;
    margin-left: 20px;
    width: 175px;
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--color-accent);
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    box-sizing: border-box;
}

/* しっぽ：borderのtransparentトリックで三角形を作る（上下を透明にして、右だけ色を付けると左向きの三角になる） */
/* しっぽの縁取り：本体より1px大きい同じ形を、アウトライン色で下に敷く */
.contact-balloon::before {
    content: "";
    position: absolute;
    bottom: 28px;
    left: -2px;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 16px solid var(--color-primary);
    transform: rotate(-30deg);
}

.contact-balloon::after {
    content: "";
    position: absolute;
    bottom: 28px;
    left: 1px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 18px solid var(--color-accent);
    transform: rotate(-36deg);
}

.envelope-wrapper {
    position: relative;
    display: block;
    text-decoration: none;
}

.envelope-img {
    display: block;
    width: 300px;
    transition: transform var(--duration);
}

/* 手紙の紙の上に重ねる実テキスト（画像内の紙の位置に合わせて配置） */
.envelope-letter-text {
    position: absolute;
    top: 10%;
    left: 45%;
    width: 45%;
    transform: translateX(-50%);
    text-align: center;
}

.envelope-letter-logo {
    display: block;
    width: 55%;
    margin: 0 auto 8px;
}

.envelope-letter-text p {
    font-size: 11px;
    line-height: 1.6;
    color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
    .envelope-wrapper:hover .envelope-img {
        transform: translateY(-8px);
    }
}

/*
footer
----------------------------------------------------------- */
.footer {
    padding: 60px 0 var(--space-unit);
    background: var(--color-footer);
    text-align: center;
}

/* 横並び・中央寄せの箱（PC） */
.footer-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

/* ナビリンクとSNSアイコンをまとめて縦積み・中央寄せ */
.footer-nav-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-logo {
    width: 140px;
    margin: 0;
}

.footer-sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-primary);
    color: var(--color-secondary);
    text-decoration: none;
    transition: background var(--duration);
}

.footer-sns a:hover {
    background: var(--color-primary);
}

.footer-links {
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-links a {
    font-size: 13px;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color var(--duration);
}

.footer-links a:hover {
    color: var(--color-primary);
}

/* コピーライト */
.footer-copyright {
    display: block;
    margin-top: 24px;
    font-size: 11px;
    color: var(--color-gray);
    text-align: center;
}

/*
共通ユーティリティ：SP限定の改行・PC限定の改行
----------------------------------------------------------- */
/* SPだけ表示 */
.sp-only {
    display: none;
}

/* PCだけ表示 */
.pc-only {
    display: inline;
}

/*
共通ユーティリティ：スクロールフェードイン
----------------------------------------------------------- */
.f-up {
    opacity: 0;
}

.f-up.fadeup {
    animation: fadeupanime 1s forwards;
}

@keyframes fadeupanime {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
レスポンシブ tablet
----------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    /* PCのカラム構成は維持したまま、余白を詰めて1200px未満に収める */

    /* ヘッダー：グロナビの間隔を詰めてはみ出しを防ぐ */
    .nav-list {
        gap: 20px;
    }
    .nav-link {
        padding: 0 8px;
        font-size: 13px;
    }

    /* MV：テキストが下にはみ出さないよう上に詰める */
    .mv-text {
        top: 13%;
    }

    /* ABOUT：左右2カラムのまま、余白だけ縮小 */
    .sec-01-panel {
        gap: 20px;
    }

    /* CASESの症例グリッド：4カラム→2カラム */
    .cases-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .cases-group--ortho {
        grid-column: 1 / -1;
        padding-right: 0;
        border-right: none;
        padding-bottom: 20px;
        border-bottom: 1px dashed var(--color-gray);
    }
    .cases-photo {
        grid-column: 1 / -1;
    }

    /* LOGO STORY：横並びのまま、余白だけ縮小 */
    .story-wrapper {
        gap: 24px;
    }

    /* お悩み・目標カード：2カラム→1カラム、区切りは縦→横に */
    .vision-card {
        flex-direction: column;
    }
    .vision-divider {
        border-left: none;
        border-top: 2px dashed var(--color-gray);
    }

    /* APPROACH：4カラム→2カラム */
    .approach-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* 症例カード：3カラムのまま、gapだけ縮小 */
    .taiou-grid {
        gap: 16px;
    }
    
    /* PRICE：横並びのまま、余白だけ縮小 */
    .price-card {
        gap: 24px;
        padding: 30px 32px;
    }

    /* PROFILE：3カラムのまま、gapだけ縮小 */
    .profile-grid {
        gap: 20px;
    }
    .profile-block {
        padding: 20px;
    }

    /* FLOW：横並びのまま、gapだけ縮小 */
    .flow-list {
        gap: 12px;
    }
    .flow-item {
        width: 180px;
    }
}

/*
レスポンシブ tablet + mobile 共通（ABOUTタブ：PCの重なるバインダー方式をやめて、
シンプルな「横並びタブ→クリックで切り替え」にする）
----------------------------------------------------------- */
@media screen and (max-width: 1199px) {
    .sec-01-stack {
        display: flex;
        flex-wrap: wrap;
        height: auto !important;
    }
    /* カード自体の箱としての見た目を消して、中の子要素(タブ・パネル)を
       stackの直接の子であるかのように扱う（HTML構造は変えずに済む） */
    .sec-01-card {
        display: contents;
    }
    .tab-btn {
        position: static;
        order: -1; /* パネルより先＝上の行に来るように */
        flex: 1;
        min-width: 0;
        margin-left: 0 !important;
        top: auto !important;
    }
    .sec-01-panel {
        display: none;
        width: 100%;
        order: 2;
    }
    .sec-01-card.is-active .sec-01-panel {
        display: flex;
    }
}

/*
レスポンシブ mobile（ハンバーガー/ドロワー）
----------------------------------------------------------- */
@media screen and (max-width: 767px) {
    /* .navをドロワーとして使用（PC横並びからドロワーに切り替え） */
    .nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100%;
        background: var(--color-secondary);
        transform: translateX(100%); /* 閉じた状態：画面外に隠す */
        transition: transform 0.4s ease;
        z-index: 1000;
        overflow-y: auto;
        padding-top: var(--header-height);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    }
    /* 開いた状態：スライドイン */
    body.open .nav {
        transform: translateX(0);
    }
    /* SP/TB時のnav-list：縦並びに変更 */
    .nav-list {
        flex-direction: column;
        gap: 0;
    }
    /* ドロワー内：ロゴをリストの一番上に配置 */
    .logo-item {
        order: -1;
        text-align: center;
        padding: 20px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .logo-item .logo img {
        height: 50px;
        margin: 0 auto;
    }
    /* SP/TB時のnav-link：ドロワーリンクのスタイルに変更 */
    .nav-link {
        height: 55px;
        line-height: 55px;
        padding: 0 var(--space-section);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    /* ドロワー時はホバー下線アニメーションを無効化 */
    .nav-link::after {
        display: none;
    }
    /* オーバーレイ */
    .nav-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    /* 開いた状態：オーバーレイ表示 */
    body.open .nav-overlay {
        opacity: 1;
        visibility: visible;
    }
    /* ハンバーガーメニュー：ページトップボタンと同じ白丸+紫枠線のデザインに統一 */
    .menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
        z-index: 1001;
        background-color: var(--color-secondary);
        border: 1px solid var(--color-primary);
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    .menu span {
        display: block;
        height: 2px;
        width: 20px;
        background: var(--color-primary);
        position: absolute;
        left: 50%;
        top: 24px;
        transform: translate(-50%, calc(var(--y, 0px))) rotate(var(--r, 0deg));
        transition: transform 0.5s ease-in-out;
        border-radius: 2px;
    }
    .menu span:nth-child(1) { --y: -6px; }
    .menu span:nth-child(2) { --y: 0px; }
    .menu span:nth-child(3) { --y: 6px; }
    body.open .menu span:nth-child(1) { --y: 0px; --r: 135deg; }
    body.open .menu span:nth-child(2) { width: 0; }
    body.open .menu span:nth-child(3) { --y: 0px; --r: -135deg; }
}

/*
レスポンシブ mobile
----------------------------------------------------------- */
@media screen and (max-width: 767px) {
    :root {
        --header-height: 80px; /* SPではヘッダーを少し低く */
    }
    .sec-ttl {
        font-size: 24px;
        padding-bottom: var(--space-unit);
    }
    .lead {
        font-size: 15px;
        text-align: center;
        padding: 0 25px;
        padding-bottom: 40px;
        line-height: 2;
    }

    .sec-01 .lead,
    .sec-02 .lead{
        font-size: 15px;
        text-align: left;
        padding: 0 25px;
        padding-bottom: 40px;
        line-height: 2;
    }

    /* グリッド → 1カラムに変更（SP） */
    .grid-3col,
    .grid-2col {
        grid-template-columns: 1fr;
    }
    /* ページトップ（SP） */
    .pagetop {
        bottom: 20px;
        right: 10px;
    }
    /* ヘッダー（SP） */
    .header .wrapper {
        padding: 10px var(--space-unit);
    }
    /* ロゴ画像をヘッダーの内側に収める */
    .logo img {
        max-height: calc(var(--header-height) - 20px);
        width: auto;
        margin: 0;
    }

    /* SP専用：常時表示のヘッダーロゴ */
    .header-logo {
        display: block;
    }
    .header-logo img {
        height: calc(var(--header-height) - 10px);
        width: auto;
    }

    /* SP限定の改行を表示 */
    .sp-only {
        display: inline;
    }
    /* PC限定の改行を非表示 */
    .pc-only {
        display: none;
    }

    /* MV：比率を保たず、縦型に良い感じの高さでクロップ */
    .mv-photo {
        height: 480px;
    }
    .mv-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.6) 45%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}
    .mv-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 75% 20%; /* 施術者の上半身・顔まわりが見えるように右上寄りをクロップ */
    }
    .mv-text {
        top: auto;
        bottom: 160px;
        left: 15px;
        right: 15px;
    }
    .mv-text h1 {
        margin-bottom: 20px;
        color: #7273AA;
        font-size: 22px;
    }
    .mv-text p {
        margin-bottom: 25px;
        font-size: 12px;
    }

    /* セクション01（SP） */
    .sec-01 {
        padding: 40px 0 60px;
    }
    /* タブボタン：余白を大幅に縮小、文字サイズは読みやすさ優先で調整 */
    .tab-btn {
        padding: 12px 8px;
        font-size: 14px;
        border-radius: 12px 12px 0 0;
    }
    .sec-01-panel {
        flex-direction: column;
        gap: 20px;
    }
    /* CASESの症例グリッド：SPは1カラム */
    .cases-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .cases-group--ortho {
        padding-right: 0;
        border-right: none;
        padding-bottom: 20px;
    }
    .cases-photo img {
        height: auto;
    }
    .sec-01-content,
    .sec-01-img {
        width: 100%;
    }
    .sec-01-img img {
        width: 100%;
        margin: 0 auto;
    }
    .sec-01-story {
        margin-inline: 15px;
        padding: 24px;
    }
    .story-wrapper {
        flex-direction: column;
        gap: 24px;
    }
    .story-logo {
        width: 100%;
        text-align: center;
    }
    .story-logo img {
        display: block;
        margin: 0 auto;
    }
    .line {
        width: 100%;
        border-left: none;
        border-top: 1px dashed var(--color-gray);
    }

    /* セクション02（SP） */
    .sec-02 {
        padding: 60px 0;
    }

    .lead-bold {
        font-weight: 600;
    }
    .sec-02-list {
        gap: 8px;
    }
    
    /* お悩み・目標：縦積み(区切りは横点線に) */
    .vision-card {
        flex-direction: column;
        padding: 30px 20px;
        gap: 30px;
    }
    .vision-divider {
        border-left: none;
        border-top: 2px dashed var(--color-primary);
    }
    .vision-body {
        flex-direction: column;
    }
    .vision-body img {
        width: 60%;
    }
    /* APPROACH：1カラム */
    .approach-list {
        grid-template-columns: 1fr;
    }
    .approach-card {
        align-items: center;
    }

    /* 症例カード：1カラム */
    .taiou {
        padding: 30px 20px;
        margin-top: -60px; /* ←追加 */
    }
    .taiou-grid {
        grid-template-columns: 1fr;
    }
    .sec-02-message {
        font-size: 18px;
    }

    /* セクション03・FLOW（SP） */
    .sec-03 {
        padding: 60px 0;
    }
    .flow-list {
        flex-direction: column;
        align-items: center;
    }
    .flow-icon {
        padding-top: 0;
        transform: rotate(90deg);
    }

    /* セクション04・PRICE（SP） */
    .sec-04 {
        padding: 60px 0;
    }
    .price-card {
        flex-direction: column;
        padding: 30px 20px;
        gap: 24px;
    }
    .price-deco {
        flex: 0 0 auto;
        width: 100px;
    }
    .price-value {
        font-size: 36px;
    }

    /* セクション05・PROFILE（SP） */
    .sec-05 {
        padding: 60px 0;
    }
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .profile-photo {
        order: -1;
    }
    .profile-photo img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 360px; /* 280 → 340 */
        margin: 0 auto;
    }
    .profile-block {
        padding: 20px;
    }

    /* セクション06・CONTACT（SP） */
    .sec-06 {
        padding: 60px 0;
    }
    .sec-06 .lead {
        padding-bottom: 160px;
    }
    /* 吹き出しが封筒の上に乗る分、確保する余白を広げる */
    .contact {
        padding-bottom: 260px;
    }
    .envelope-area {
        bottom: 40px;
    }
    /* 吹き出し：封筒の真上・中央に配置 */
    .contact-balloon {
        top: auto;
        bottom: 100%;
        left: 50%;
        width: 140px;
        height: 140px;
        margin-left: 0;
        margin-bottom: 24px;
        transform: translateX(-50%);
    }
    /* しっぽ：左向き(border-right)から下向き(border-top)に描き直す */
    .contact-balloon::before {
        top: auto;
        left: 50%;
        bottom: -15px;
        border-top: 16px solid var(--color-primary);
        border-bottom: none;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        transform: translateX(-50%);
    }
    .contact-balloon::after {
        top: auto;
        left: 50%;
        bottom: -14px;
        border-top: 15px solid var(--color-accent);
        border-bottom: none;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        transform: translateX(-50%);
    }
    /* 封筒の写真を大きく */
    .envelope-img {
        width: 300px;
        max-width: 400px;
    }

    /* 手紙の紙の上に重ねるテキストの位置調整（SP） */
    .envelope-letter-text {
        position: absolute;
        top: 8%;
        left: 45%;
        width: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    /* フッター（SP） */
    .footer-inner {
        flex-direction: column;
        gap: 24px;
    }
    .footer-links {
        gap: 16px;
    }
    .footer-sns {
        gap: 16px;
    }
}