/* ============================================================
   familign. common.css
   - destyle.css (v4.0.1) を先に読み込んでからこのファイルを読み込む
   - html { font-size: 62.5%; } により 1rem = 10px 相当
   - 単位は基本 rem / vw / em を使用。px は境界線(border)のみ
   - ブレイクポイントは em 基準
     36em = 576px（スマホ〜）/ 48em = 768px（タブレット）
     64em = 1024px（PC小）/ 90em = 1440px（PC大）/ 120em = 1920px
   - 全ページ共通（フォント・変数・リセット・背景・ヘッダー・
     ドロワー・フッター等）。トップページ固有のスタイルは index.css へ
   ============================================================ */

/* ------------------------------------------------------------
   Font
   - 明朝体：Noto Serif JP Medium
   - ゴシック体：游ゴシック（Medium / Bold）
     Windows は「游ゴシック」を font-weight だけで指定すると
     Medium が反映されず細く表示されるため、Windows にのみ存在する
     "Yu Gothic Medium" というファミリー名を明示的に指定して回避する。
     ただし "Yu Gothic Medium" は weight:500 の実体しか持たないため、
     そのまま font-weight:700 を指定しても Bold 化されず Medium のまま
     表示されてしまう。そこで下の @font-face で "YuGothicM" という
     別名ファミリーを定義し、weight:500 は Yu Gothic Medium、
     weight:700 は Yu Gothic の Bold 実体を参照させることで解決する
   - Noto Serif JP は HTML 側で <link> 読み込み（preconnect付き）
   ------------------------------------------------------------ */
@font-face {
    font-family: "YuGothicM";
    font-weight: 500;
    src: local("Yu Gothic Medium"), local("游ゴシック Medium");
}

@font-face {
    font-family: "YuGothicM";
    font-weight: 700;
    src: local("Yu Gothic Bold"), local("游ゴシック Bold"), local("Yu Gothic");
}

/* ------------------------------------------------------------
   Custom Properties
   ------------------------------------------------------------ */
:root {
    /* color */
    --color-primary: #bf5749;      /* ワインレッド（CTA・アクセント） */
    --color-primary-dark: #bf5749;
    --color-accent: rgba(153,120,61,0.7);  /* ゴールド（実測値：ボタン・装飾に使用） */
    --color-accent-dark: #8f7a56;  /* ゴールドの濃色（hover等） */
    --color-accent-circle: #d2b97b;  /* ゴールドの濃色（hover等） */
    --color-bg-card: #fbf7f2;      /* カード背景（クリーム） */
    --color-bg-card-alt: #ffffff;
    --color-text: #444;         /* 基本テキスト */
    --color-text-sub: #444;     /* サブテキスト */
    --color-white: #ffffff;
    --color-line: #e4dcd3;
    --color-header-accent: #7c783b; /* SPヘッダー（ご相談・MENU）用オリーブ */

    /* font */
    --font-serif: "Noto Serif JP", serif;                 /* 明朝体：Medium固定 */
    --font-sans:
        Avenir,
        "Avenir Next",
        Arial,
        "YuGothicM",
        "YuGothic",
        "Yu Gothic",
        "游ゴシック体",
        "游ゴシック",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;

    /* layout */
    --container-width: 140rem;     /* 1400px 相当 */
    --container-padding: 4vw;
    --radius-s: 0.4rem;
    --radius-m: 1.2rem;
    --radius-full: 999rem;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    position: relative;
    font-family: var(--font-sans);
    /* 游ゴシックMedium(500)はWindowsのみ。Mac/iOS/Androidの代替フォントは
       500指定だと太すぎる(Hiragino SansがW6に丸められる等)ため通常は400 */
    font-weight: 400;
    /* 1200px=18px 〜 1400px=20px を線形補間、1400px以上は20pxで頭打ち */
    font-size: clamp(1.8rem, 0.6rem + 1vw, 2rem);
    line-height: 2;
    color: var(--color-text);
    background-color: var(--color-bg-card);
    overflow-x: hidden;
    text-shadow: 0 0 .3em rgba(255,255,255,1),
        0 0 .3em rgba(255,255,255,1),
        0 0 .3em rgba(255,255,255,1),
        0 0 .3em rgba(255,255,255,1),
        0 0 .3em rgba(255,255,255,1);
}

html.is-win body {
    font-weight: 500; /* 游ゴシック Medium 相当 */
}

/* 375px=15px 〜 1200px=18px を線形補間 */
@media (max-width: 1200px) {
    body {
        font-size: clamp(1.5rem, 1.364rem + 0.364vw, 1.8rem);
    }
}

/* 320px=12px 〜 375px=15px を線形補間、320px以下は12pxで頭打ち */
@media (max-width: 375px) {
    body {
        font-size: clamp(1.2rem, -0.545rem + 5.455vw, 1.5rem);
    }
}

/* 太字はゴシックBold（"YuGothicM" の @font-face 定義により
   weight:700 は自動的に Yu Gothic の Bold 実体を参照する） */
strong,
b {
    font-weight: 700;
}

img {
    width: 100%;
    height: auto;
    display: block;
}
h2 .-color{
    color: var(--color-primary);
}

.link{
    text-decoration: underline;
}
.link:hover{
    text-decoration: none;
    opacity: 1;
}

/* ------------------------------------------------------------
   ふわっと登場（JS無効時は即表示のまま）
   - .js-reveal        : 要素単体をふわっと（下から少し浮き上がる）
   - .js-reveal-group   : 直下の子要素(h2の次のli等)を1つずつ時間差でふわっと
   - 末尾に --onload を付けると、スクロール判定を待たずページ読み込み時に
     ふわっと登場する（MV等ファーストビュー用）
   ------------------------------------------------------------ */
.js .js-reveal,
.js .js-reveal-group > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1.1s ease, transform 1.1s ease;
}
.js .js-reveal.is-visible,
.js .js-reveal-group.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* グループ内の時間差（1番目→2番目→…の順にふわっと） */
.js .js-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0s; }
.js .js-reveal-group.is-visible > *:nth-child(2) { transition-delay: 0.25s; }
.js .js-reveal-group.is-visible > *:nth-child(3) { transition-delay: 0.5s; }
.js .js-reveal-group.is-visible > *:nth-child(4) { transition-delay: 0.75s; }
.js .js-reveal-group.is-visible > *:nth-child(5) { transition-delay: 1s; }
.js .js-reveal-group.is-visible > *:nth-child(6) { transition-delay: 1.25s; }

@media (prefers-reduced-motion: reduce) {
    .js .js-reveal,
    .js .js-reveal-group > * {
        transition: none;
        transform: none;
    }
}

h2{
    line-height: 1.5;
}

h2>span{
    display: inline-block;
}

/* picture要素自体はボックスを持たせず、直下のimgがそのまま
   親のflex/grid/aspect-ratioレイアウトに乗るようにする */
picture {
    display: contents;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
a:hover {
    opacity: 0.7;
}

ul,
ol {
    list-style: none;
}

.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

h3>span{
    display: inline-block;
}

/* ------------------------------------------------------------
   Background（sticky 1枚背景）
   position: sticky + margin-bottom: -100vh のテクニックで
   position: fixed のような見た目を維持しつつ transform 等の
   干渉を避ける

   従来は bg-main-pc.webp / bg-main-sp.webp の1枚絵を敷いていたが、
   グラデーション部分は CSS の mesh gradient（radial-gradientを
   複数重ねる手法）に置き換え、花・柄オブジェクトのみ透過画像を
   .bg__object として個別に配置し、CSSアニメーションで
   ゆらめかせる構成に変更。画像1枚（数百KB）を排除できるため
   軽量化にもなる。
   ------------------------------------------------------------ */
.bg {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin-bottom: calc(-100vh);
    z-index: -1;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 45% at 88% 66%,
            rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(ellipse 60% 55% at 92% 90%,
            rgba(253, 225, 235, 0.75) 0%, rgba(253, 225, 235, 0) 65%),
        radial-gradient(ellipse 65% 55% at 85% 8%,
            rgba(213, 214, 241, 0.9) 0%, rgba(213, 214, 241, 0) 65%),
        radial-gradient(ellipse 60% 55% at 6% 88%,
            rgba(228, 206, 219, 0.85) 0%, rgba(228, 206, 219, 0) 65%),
        linear-gradient(160deg,
            #f4f2f7 0%,
            #ece6f4 28%,
            #ddd8ee 52%,
            #ecdde9 76%,
            #f6e6ea 100%);
}

/* ------------------------------------------------------------
   Background Objects（花・柄）
   .bg 内に絶対配置。位置・サイズは % 指定なのでビューポート幅に
   追従する。花3点・シボリ（金ドット）2点・麻の葉2点、計7点。
   ------------------------------------------------------------ */
.bg__object {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.bg__object img,
.bg__object svg {
    display: block;
    width: 100%;
    height: auto;
}

/* 麻の葉のみ：外側(.bg__object)＝拡大縮小の揺れ／
   内側(.bg__object__spin)＝ゆっくり回転、の2階層構成。
   同じ transform に複数の animation を重ねると上書きされて
   しまうため、階層を分けて掛け合わせている。 */
.bg__object__spin {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

.bg__object--shibori-1 {
    top: -4%;
    left: -3%;
    width: 19%;
    animation-name: bg-yurameku-shibori;
    animation-duration: 5s;
}

.bg__object--asanoha-1 {
    top: -3%;
    left: 63%;
    width: 16%;
    animation-name: bg-yurameku-b;
    animation-duration: 4s;
    animation-delay: -2s;
}
.bg__object--asanoha-1 .bg__object__spin {
    animation-name: bg-rotate;
    animation-duration: 40s;
}

.bg__object--flower-1 {
    top: 2%;
    right: -6%;
    width: 21%;
    animation-name: bg-yurameku-flower;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    animation-duration: 9.5s;
    animation-delay: -1s;
}

.bg__object--flower-2 {
    top: 43%;
    left: -6%;
    width: 21%;
    animation-name: bg-yurameku-flower;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    animation-duration: 10.5s;
    animation-delay: -6s;
}

.bg__object--shibori-2 {
    top: 55%;
    right: -3%;
    width: 20%;
    animation-name: bg-yurameku-shibori;
    animation-duration: 6s;
    animation-delay: -5s;
}

.bg__object--asanoha-2 {
    bottom: -6%;
    left: 24%;
    width: 21%;
    animation-name: bg-yurameku-b;
    animation-duration: 3.8s;
    animation-delay: -1.5s;
}
.bg__object--asanoha-2 .bg__object__spin {
    animation-name: bg-rotate-reverse;
    animation-duration: 55s;
}

/* 揺らぎキーフレーム：シボリ以外の下地（拡大縮小 ±2〜4% + 数pxの移動、控えめ） */
@keyframes bg-yurameku-a {
    0%, 100% { transform: scale(1)     translate(0, 0); }
    50%      { transform: scale(1.04)  translate(3px, -4px); }
}
@keyframes bg-yurameku-b {
    0%, 100% { transform: scale(1)     translate(0, 0); }
    33%      { transform: scale(1.02)  translate(-4px, 3px); }
    66%      { transform: scale(0.985) translate(3px, -3px); }
}

/* シボリ（金ドット）：ゆっくり大きく・小さく、をはっきり感じさせる単発の拡縮 */
@keyframes bg-yurameku-shibori {
    0%, 100% { transform: scale(1)    translate(0, 0); }
    50%      { transform: scale(1.06) translate(4px, -5px); }
}

/* 麻の葉の回転：かなりゆっくり1周。要素ごとに向き違い・速度違いで単調にならないように */
@keyframes bg-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes bg-rotate-reverse {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* 花：大きさの変化はごく控えめ（±1.5〜2%程度）にし、代わりに移動＋
   移動方向に合わせた微回転で「ぬるぬる」とした有機的な動きを出す */
@keyframes bg-yurameku-flower {
    0%   { transform: scale(1)     translate(0, 0)      rotate(0deg); }
    20%  { transform: scale(1.015) translate(6px, -7px)  rotate(1.5deg); }
    40%  { transform: scale(0.99)  translate(-7px, 4px)  rotate(-1.5deg); }
    60%  { transform: scale(1.02)  translate(4px, 7px)   rotate(1deg); }
    80%  { transform: scale(0.995) translate(-4px, -5px) rotate(-1deg); }
    100% { transform: scale(1)     translate(0, 0)       rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bg__object,
    .bg__object__spin {
        animation: none !important;
    }
}

/* タブレット〜SP（64em=1024px以下）：ヘッダーがコンパクト表示になる幅。
   上部に配置している柄はヘッダー（高さ約71〜80px）の下に隠れてほぼ見えなく
   なってしまうため、top をヘッダー下まで固定値で下げてクリアさせる。
   あわせて全体的にサイズも拡大し、視認性を上げる。 */
@media (max-width: 64em) {
    .bg__object--shibori-1 {
        display: none;
    }
    .bg__object--flower-1 {
        top: 4rem;
        right: -8%;
        width: 30%;
    }
    .bg__object--flower-2 {
        width: 28%;
    }
    .bg__object--shibori-2 {
        width: 36%;
        top: -6%;
        left: -10%;
    }
    .bg__object--asanoha-2 {
        width: 28%;
    }
}

/* SP（48em=768px未満）：端に近い要素は間引いて画面を整理しつつ、
   残す柄はさらに大きくして存在感を出す */
@media (max-width: 48em) {
    .bg__object--asanoha-1 {
        top: 50%;
        left: auto;
        right: 60%;
        width: 55%;
    }
    .bg__object--flower-2,
    .bg__object--asanoha-2 {
        display: none;
    }
    .bg__object--shibori-1 {
        top: 80%;
        left: auto;
        right: -6%;
        width: 47%;
    }
    .bg__object--flower-1 {
        width: 34%;
        right: -6%;
    }
    .bg__object--shibori-2 {
        width: 50%;
    }
}

/* ------------------------------------------------------------
   Layout helper
   ------------------------------------------------------------ */
[class$="__inner"] {
    width: min(var(--container-width), 92%);
    margin-inline: auto;
}

/* SP（48em=768px以下）：.works-swiperを除く全コンテンツ幅を500pxに固定。
   499px以下は幅がディスプレイ幅95%に収まるようさらに調整（下の@media参照） */
@media (max-width: 48em) {
    [class$="__inner"] {
        width: 92.5%;
        max-width: 500px;
    }
}

/* 499px以下：500px固定だと画面からはみ出すため、ディスプレイ幅92.5%に収める */
@media (max-width: 499px) {
    [class$="__inner"] {
        width: 92.5%;
    }
}

/* section同士だけでなく、記事ページの<article>（.article-title〜
   .article-bodyをまとめて囲む記事本体）との境目にも同じ余白を効かせるため、
   section + article / article + section も併記する */
.main section + section,
.main section + article,
.main article + section {
    margin-top: clamp(6.8rem, 5.1rem + 5.1vw, 17rem);
}

/* 下層ページ（<main class="main main--lower">）は、TOPページより控えめな
   セクション間余白にする。上のベース値（100%）に対して75%の値 */
.main--lower section + section,
.main--lower section + article,
.main--lower article + section {
    margin-top: clamp(5.1rem, 3.825rem + 3.825vw, 12.75rem);
}

/* 下層ページ共通：page-title直後のセクションだけは、通常のセクション間余白
   （75%）よりさらに狭く、現行値（about.cssの.profile用だった値）の50%にする */
.main--lower .page-title + section,
.main--lower .page-title + article {
    margin-top: clamp(1.275rem, 0.95625rem + 0.95625vw, 3.1875rem);
}

/* 下層ページのコンテンツ幅：TOP用の--container-width（1400px）を
   980pxに上書きする。[class$="__inner"]や.page-title__inner等、
   var(--container-width)を参照する要素はすべて自動で追従する */
.main--lower {
    --container-width: 98rem;
}

/* ============================================================
   Header
   ============================================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 199;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(0.4rem);
    border-bottom: 1px solid var(--color-line);
    transition: transform 0.35s ease;
}

/* 下スクロールで隠れる／上スクロールで現れる */
.header.is-hidden {
    transform: translateY(-100%);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2vw;
    padding-block: 2rem;
}

.header__logo img {
    width: 6em;
}

.header__nav {
    flex: 1;
}

.header__nav-list {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: clamp(1.2rem, 2vw, 4em);
}

.header__nav-link {
    position: relative;
    display: inline-block;
    font-size: clamp(1.4rem, 0.68rem + 0.8vw, 1.8rem);
}

.header__nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.2em;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.header__nav-link:hover::after {
    transform: scaleX(1);
}

.header__cta-link {
    display: inline-block;
    padding: .15em 1.8em;
    background-image: url(../img/common/cta-bg.jpg);
    background-image: -webkit-image-set(
        url(../img/common/cta-bg.webp) 1x,
        url(../img/common/cta-bg.jpg) 1x
    );
    background-image: image-set(
        url(../img/common/cta-bg.webp) type("image/webp"),
        url(../img/common/cta-bg.jpg) type("image/jpeg")
    );
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: .85em;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: none;
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
}

.header__hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18em;
    flex: 0 0 auto;
    width: clamp(5.6rem, 4.4rem + 3vw, 7.2rem);
    aspect-ratio: 6 / 5;
    background: none;
    cursor: pointer;
    z-index: 301;
}

.header__hamburger-icon {
    position: relative;
    display: block;
    width: 2.65em;
    height: 0.9em;
}

.header__hamburger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: var(--color-header-accent);
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.header__hamburger-line:first-child {
    top: 0;
}

.header__hamburger-line:last-child {
    top: 80%;
}

.header__hamburger-label {
    font-family: var(--font-serif);
    font-size: 0.9em;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-header-accent);
}

/* メニューを開いた状態：線がバツ印になる */
.header__hamburger.is-active .header__hamburger-line:first-child {
    top: 50%;
    transform: translateY(-50%) rotate(30deg);
}

.header__hamburger.is-active .header__hamburger-line:last-child {
    top: 50%;
    transform: translateY(-50%) rotate(-30deg);
}

/* SP／タブレット時のみ表示する「ご相談」リンク（アイコン＋テキスト） */
.header__cta-mobile {
    display: none;
}

.header__cta-mobile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
}

.header__cta-mobile-icon {
    width: 2.2em;
    height: auto;
}

.header__cta-mobile-label {
    font-family: var(--font-serif);
    font-size: .85em;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-header-accent);
}

@media (max-width: 64em) {
    .header__inner {
        padding: .8em .5em .3em;
        display: flex;
        align-items: center;
    }
    .header__logo {
        padding-bottom: 0.3em;
        order: 2;
        margin-inline: auto;
    }
    .header__nav,
    .header__cta {
        display: none;
    }
    .header__cta-mobile {
        display: flex;
        order: 1;
    }
    .header__hamburger {
        display: flex;
        order: 3;
    }
}

/* ドロワー展開中：.header自体を.drawerより前面に出し、
   ハンバーガー以外（ロゴ・ご相談）は見えないようにする */
body.is-drawer-open .header {
    z-index: 301;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
}

body.is-drawer-open .header__logo,
body.is-drawer-open .header__cta-mobile {
    visibility: hidden;
}

/* ============================================================
   Page Title（下層ページ共通のページ見出し。二重リングの円形画像＋
   縦書きラベル付きの箱）。1文字目の色付けなど、ページ固有の装飾は
   各ページのCSS（about.css等）側で追加する
   ============================================================ */
.page-title {
    padding-block: clamp(1.5rem, 1.1rem + 2vw, 3.5rem);
    padding-bottom: .5em;
}

/* .page-title__inner は js-reveal-group 等のクラスが付与されており、
   common.cssの`[class$="__inner"]`（クラス属性が"__inner"で終わる要素に
   コンテンツ幅を当てる共通ルール）が末尾一致しなくなりマッチしないため、
   個別にコンテンツ幅を指定する */
.page-title__inner {
    width: min(var(--container-width), 92%);
    margin-inline: auto;
}

@media (max-width: 48em) {
    .page-title__inner {
        width: 92.5%;
        max-width: 500px;
    }
}

@media (max-width: 499px) {
    .page-title__inner {
        width: 92.5%;
    }
}

.page-title__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2.4rem, 1.6rem + 4vw, 6rem);
}

/* 円のリング：TOP（.mv__visual）と全く同じ比率の二重リング構造
   （外側=::beforeの1px細線・inset-2.3%／内側=クリップ側の6px太線）
   1280px表示で直径400px程度になるサイズ */
.page-title__image {
    position: relative;
    z-index: 0;
    flex: 0 0 auto;
    width: min(34%, 460px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.page-title__image::before {
    content: "";
    position: absolute;
    inset: -2.3%;
    border: 1px solid var(--color-accent-circle);
    border-radius: 50%;
    pointer-events: none;
}

.page-title__image-clip {
    width: 100%;
    height: 100%;
    border: 4px solid var(--color-accent-circle);
    border-radius: 50%;
    overflow: hidden;
}

.page-title__image-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画像左下に重ねる麻の葉パターン。common.cssの@keyframes bg-rotateを流用してゆっくり回転させる
   ビジュアル400pxに対して223px程度になるよう、ビジュアル幅の56%で配置する */
.page-title__asanoha {
    position: absolute;
    z-index: 2;
    left: -27%;
    bottom: -5%;
    width: 60%;
    pointer-events: none;
}

.page-title__asanoha img {
    display: block;
    width: 100%;
    height: auto;
    animation: bg-rotate 40s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .page-title__asanoha img {
        animation: none;
    }
}

.page-title__box {
    position: relative;
    z-index: 1;
    line-height: 1.6;
    padding: 1.3em .2em 1.3em .2em;
    background-color: var(--color-white);
    writing-mode: vertical-rl;
}

/* 箱の上から伸びる、点のない細いゴールドの一本線。箱の白地に少し重なるように配置する */
.page-title__box::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% - 0.8em);
    width: 1px;
    height: clamp(2.4rem, 1.8rem + 3vw, 5rem);
    background-color: var(--color-accent-circle);
    transform: translateX(-50%);
}

.page-title__label {
    position: absolute;
    top: .3em;
    right: -28%;
    writing-mode: vertical-rl;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.1em;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    text-shadow: none;
}

.page-title__heading {
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 1.9rem + 1.8vw, 4rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-text);
}

/* 見出しの1文字目だけ赤に（下層ページ共通） */
.page-title__heading::first-letter {
    color: var(--color-primary);
}

@media (max-width: 48em) {
    .page-title__asanoha {
        left: auto;
        right: -22%;
        bottom: -30%;
        width: 68%;
    }
    .page-title__inner {
        gap: clamp(1.2rem, 0.4rem + 3vw, 2.8rem);
    }
    .page-title__image {
        width: min(74%, 280px);
    }
    .page-title__box {
        padding-left: 0.1em;
        padding-right: 0.1em;
    }
    .page-title__label {
        font-size: 1em;
    }
    .page-title__box {
        margin-right: 0.8em;
    }
}

/* 320px前後の極小幅では、画像を少し控えめにしてAboutの見切れを防ぐ */
@media (max-width: 359px) {
    .page-title__image {
        width: min(66%, 280px);
    }
    .page-title__label {
        right: -0.4em;
    }
}

/* ============================================================
   Breadcrumb（下層ページ共通のパンくずリスト。旧サイト familign.com の
   マークアップ・ホームアイコン・構造化データ(BreadcrumbList)を
   このサイトのBEM記法に合わせて移植したもの）
   ============================================================ */
.breadcrumb {
    width: min(var(--container-width), 92%);
    margin-inline: auto;
    /* page-titleを持たないページ（privacypolicy等）でbreadcrumbが
       <main>直下の先頭要素になる場合のデフォルト上余白。page-title直後に
       置かれる場合は下の .page-title + .breadcrumb で0に上書きする */
    margin-top: clamp(1.5rem, 1.1rem + 2vw, 3.5rem);
    margin-bottom: 1.6em;
}

@media (max-width: 48em) {
    .breadcrumb {
        width: 92.5%;
        max-width: 500px;
    }
}

@media (max-width: 499px) {
    .breadcrumb {
        width: 92.5%;
    }
}

/* page-title直後・breadcrumb直後の余白は、page-title直後セクションと
   同じ値（.main--lower .page-title + section）に揃える */
.main--lower .page-title + .breadcrumb {
    margin-top: 0;
}

.main--lower .breadcrumb + section,
.main--lower .breadcrumb + article,
.main--lower .breadcrumb + .article {
    margin-top: clamp(1.275rem, 0.95625rem + 0.95625vw, 3.1875rem);
}

.breadcrumb__list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    font-size: .8em;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    color: var(--color-text-sub);
}

.breadcrumb__item:not(:last-child)::after {
    content: ">";
    display: inline-block;
    padding: 0 0.6em;
    color: var(--color-text-sub);
}

.breadcrumb__item:last-child {
    color: currentColor;
}

.breadcrumb__link {
    display: inline-flex;
    align-items: center;
}

.breadcrumb__link:hover {
    text-decoration: underline;
}

.breadcrumb__link svg{
    filter: drop-shadow(#fff 0 0 .3rem);
    padding-bottom: 0.08em;
    width: 1.05em;
    aspect-ratio: 1;
}

/* ============================================================
   Title Bar（左に縦バーが入る見出し。サイト内の各所で共通使用）
   ============================================================ */
.title-bar {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: clamp(2.4rem, 2.1rem + 0.75vw, 3rem);
    padding-left: 1em;
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 1.6rem + 0.5vw, 2.2rem);
    font-weight: 500;
    line-height: 1.6;
}

.title-bar::before {
    content: "";
    display: block;
    position: absolute;
    top: .15em;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: var(--color-primary);
}

/* ============================================================
   Drawer Menu（ハンバーガーで開くフルスクリーンメニュー）
   ============================================================ */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: clamp(7rem, 6rem + 5vw, 10rem);
    background:
        radial-gradient(ellipse 55% 45% at 88% 66%,
            rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(ellipse 60% 55% at 92% 90%,
            rgba(253, 225, 235, 0.75) 0%, rgba(253, 225, 235, 0) 65%),
        radial-gradient(ellipse 65% 55% at 85% 8%,
            rgba(213, 214, 241, 0.9) 0%, rgba(213, 214, 241, 0) 65%),
        radial-gradient(ellipse 60% 55% at 6% 88%,
            rgba(228, 206, 219, 0.85) 0%, rgba(228, 206, 219, 0) 65%),
        linear-gradient(160deg,
            #f4f2f7 0%,
            #ece6f4 28%,
            #ddd8ee 52%,
            #ecdde9 76%,
            #f6e6ea 100%);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}

.drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.drawer__list {
    margin-top: -4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.6rem, 1.2rem + 1.5vw, 3rem);
}

.drawer__link {
    font-family: var(--font-serif);
    font-size: 1.5em;
    font-weight: 500;
}

.drawer__link--top {
    text-transform: uppercase;
}

.drawer__cta {
    text-align: center;
    font-size: 1.3em;
    margin-top: clamp(2.4rem, 2rem + 1.5vw, 4rem);
}

.drawer__cta-link {
    margin-top: .5em;
    display: inline-block;
    padding: .3em 3em;
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-weight: 700;
    background-image: url(../img/common/cta-bg.jpg);
    background-image: -webkit-image-set(
        url(../img/common/cta-bg.webp) 1x,
        url(../img/common/cta-bg.jpg) 1x
    );
    background-image: image-set(
        url(../img/common/cta-bg.webp) type("image/webp"),
        url(../img/common/cta-bg.jpg) type("image/jpeg")
    );
    background-size: cover;
    background-repeat: no-repeat;
    text-shadow: none;
}

/* ドロワー展開中は背景スクロールを止める */
body.is-drawer-open {
    overflow: hidden;
}

/* ============================================================
   CTA（ご依頼・お問い合わせ）
   ============================================================ */
.cta {
    position: relative;
    z-index: 1;
    /* .cta__innerをtransform: translateY(50%)で下にずらして丸く
       見せているため、.cta自体のレイアウト上の箱は見た目より上まで
       広がっている。前セクションにmargin-topのマイナス値で重なる
       構成（例：.article-nav__link）だと、この見えない部分が
       z-index:1でタップを奪ってしまうため、ここではクリックを
       素通りさせ、実際に見えている.cta__inner側でのみ受け付ける */
    pointer-events: none;
}

.main section + .cta {
    margin-top: 0;
}

/* CTAだけは下層ページでも.main--lowerの--container-width上書き（980px）を
   受けず、TOPページと同じコンテンツ幅（1400px）にする */
.main--lower .cta__inner {
    --container-width: 140rem;
}

.cta__inner {
    pointer-events: auto;
    transform: translateY(50%);
    padding: clamp(3rem, 2.4rem + 2vw, 5rem) clamp(3rem, 2rem + 4vw, 6rem);
    border-radius: 10em;
    background-image: url(../img/common/contact-bg.jpg);
    background-image: -webkit-image-set(
        url(../img/common/contact-bg.webp) 1x,
        url(../img/common/contact-bg.jpg) 1x
    );
    background-image: image-set(
        url(../img/common/contact-bg.webp) type("image/webp"),
        url(../img/common/contact-bg.jpg) type("image/jpeg")
    );
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0.6rem 1rem rgba(0, 0, 0, 0.25);
    color: var(--color-white);
    text-align: left;
    text-shadow: none;
    max-width: 1200px;
}

.cta__body{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em 4em;
}
.cta__box-button{
    text-align: center;
}

.cta__title {
    margin-bottom: 0.5em;
    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 2.4rem + 1vw, 3.6rem);
    font-weight: 500;
}

.cta__title-icon {
    display: block;
    margin: 0 auto 0.3em;
    width: 1.15em;
}

.cta__title-icon img {
    display: block;
    width: 100%;
    height: auto;
}


@media (min-width: 500px) and (max-width: 48em) {
    .cta__title {
        font-size: 3rem;
    }
}

.cta__reason{
    position: relative;
    display: inline-block;
    padding: .5em .8em;
}

.cta__reason::before,
.cta__reason::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
    background-image: radial-gradient(circle, var(--color-white) 1.5px, transparent 1.6px);
    background-size: 8px 5px;
    background-repeat: repeat-x;
    background-position: center;
}

.cta__reason::before {
    top: 0;
}

.cta__reason::after {
    bottom: 0;
}

.cta__text {
    margin-top: 0.6em;
    margin-left: -.5em;
    font-size: 1.4em;
    font-family: var(--font-serif);
    font-weight: 500;
}

.cta__note {
    margin-top: 0.3em;
}

.cta__button{
    margin: 0 auto;

}
.cta__button-link {
    display: inline-block;
    padding: .3em 4em;
    background-color: var(--color-white);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-weight: 700;
    white-space: nowrap;
    width: 90%;
    max-width: 400px;
}

@media (max-width: 48em) {
    .main section + .cta{
        margin-top: -6em;
    }
    .cta__body {
        flex-direction: column;
        flex-wrap: wrap;
    }
    .cta__inner{
        padding: 2.5em .6em;
        max-width: 450px;
        transform: translateY(45%);
        text-align: center;
        border-radius: 5rem;
    }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
    padding-block: clamp(9rem, 5rem + 10vw, 16rem) clamp(3rem, 2.4rem + 2vw, 5rem);
    padding-top: 10em;
    text-align: center;
    background-color:  #efefef;
    text-shadow: none;
}

.footer__logo {
    width: clamp(12.4rem, 11.2rem + 4vw, 17.4rem);
    margin-inline: auto;
}

.footer__nav-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2em;
}

.footer__nav-link {
    font-size: clamp(1.76rem, 1.6rem + 0.2vw, 2.08rem);
}

.footer__nav-item::after{
    display: inline-block;
    margin: 0 .8em;
    content: '/';
}
.footer__nav-item:last-of-type::after{
    content: '';
}

.footer__copyright {
    margin-top: 2em;
    font-size: clamp(1.6rem, 1.44rem + 0.2vw, 1.92rem);
    opacity: 0.8;
}

@media (max-width: 48em){
    .footer{
        padding-top: 14em;
    }
    .footer__nav-link{
        font-size: .95em;
    }
    .footer__nav-item::after{
        margin: 0 .3em;
    }
}