:root {
    --hero-bg: #F5F7F7;
    --text: #4A3A17;
    --muted: rgba(90, 70, 32, .75);
    --accent: #ED895E;
    /* 例：アクセント */
    --card-radius: 18px;
    --max: 1100px;
    /* テクスチャの濃さ（0.08〜0.18くらいで調整） */
    --paper-opacity: .14;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--text);
    font-family: "Zen Old Mincho", serif;
    line-height: 1.7;
    background: #F5F7F7;
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
}

html,
body {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden;
}

img {
    height: auto;
    display: block;
}


/* これがあると「はみ出し由来の横スクロール」も防げます */
body {
    overflow-x: hidden;
}

.section {
    padding: 120px 0;
    /* PC基準 */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.sub-header {
    overflow: hidden;
}

/* 共通ボタン */
.btn {
    display: inline-block;
    padding: 8px 60px;
    border: 1px solid #4A3A17;
    background: #ffffff;
    color: #4A3A17;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: .05em;
    transition: transform .18s ease, background-color .18s ease;
    margin-top: 40px;
}

.btn:hover {
    transform: translateY(-2px);
}

.flow>.btn {
    display: block;
    width: fit-content;
    margin: 30px auto 0;
    margin-top: 60px;
}

/* ===== ハンバーガー本体 ===== */
.nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(237, 137, 94, .45);
    background: rgba(255, 255, 255, .85);
    place-items: center;
    cursor: pointer;
    position: relative;
    z-index: 100;
    display: none;
}

/* 真ん中の線 */
.nav-toggle__bar {
    width: 18px;
    height: 2px;
    background: #4A3A17;
    border-radius: 999px;
    position: relative;
    transition: .3s ease;
}

/* 上下の線 */
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: #4A3A17;
    border-radius: 999px;
    transition: .3s ease;
}

.nav-toggle__bar::before {
    top: -6px;
}

.nav-toggle__bar::after {
    top: 6px;
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.modal.is-open {
    display: block;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* ← 追加 */
    background: rgba(219, 237, 225, 0.75);
    /* #DBEDE1 */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal__panel {
    position: relative;
    z-index: 1;
    /* ← すでにあればOK */
}

.modal__panel {
    position: relative;
    max-width: min(920px, 92vw);
    max-height: 88vh;
    margin: 6vh auto 0;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    overflow: auto;
}

.modal__title {
    margin: 0 0 10px;
    font-size: 14px;
    opacity: .85;
}

.modal__figure {
    margin: 0;
}

.modal__figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal__panel {
    transform: translateY(10px) scale(.98);
    transition: transform .25s ease;
}

.modal.is-open .modal__panel {
    transform: translateY(0) scale(1);
}

.modal__panel {
    position: relative;
    width: min(960px, 92vw);
    max-height: 88vh;
    background: #fff;
    border-radius: 18px;
    padding: 18px 18px 22px;
    overflow: auto;
    z-index: 1;
}

.modal__figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 52vh;
    object-fit: contain;
    border-radius: 12px;
}

.modal__title {
    margin: 30px 0 30px;
    text-align: center;
    font-size: 18px;
    letter-spacing: .06em;
}

.modal__detail,
.modal__point {
    margin: 8px 0 14px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 6px;
    opacity: .9;
    text-decoration-color: #ED895E;
}

.modal__meta {
    margin: 0 auto 14px;
    /* ← すでにあればOK */
    max-width: 520px;
    line-height: 2.2;
    text-align: center;
    /* ← 追加 */
}

.modal__row {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0;
    justify-content: center;
}

.modal__row dt {
    margin-right: .3em;
    /* ← コロンの後ろだけ少し空ける */
    text-align: right;
    white-space: nowrap;
}

.modal__meta dd {
    margin-left: 0;
    /* ← これで隙間が消える */
}

.modal__desc {
    max-width: 640px;
    margin: 0 auto;
    line-height: 2.0;
    text-align: center;
}

/* 閉じるボタン */
.modal__close {
    position: sticky;
    top: 0;
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: #DBEDE1;
    cursor: pointer;
    font-size: 22px;
    z-index: 3;
    color: #ED895E;
}

/* 左右矢印 */
.modal__nav {
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    z-index: 2;
    color: #ED895E;
}

.modal__nav--prev {
    left: 12px;
}

.modal__nav--next {
    right: 12px;
}

#web-design {
    scroll-margin-top: 120px;
    /* ヘッダーの高さ分 */
}

#web-recipe {
    scroll-margin-top: 120px;
}

/* ===== FV ===== */
.hero {
    position: relative;
    background: #F5F7F7;
    min-height: clamp(710px, 70vh, 900px);
    /* 大小両方安定 */
    overflow: visible;
    margin-top: 0;
    height: clamp(680px, 85vh, 900px);
    /* 680〜900の間で伸びる */
}

/* 画像の土台：heroの高さに追従させる */
.hero__media {
    position: relative;
    width: 100%;
    height: 100%;
    /* ← autoじゃなく100% */
}

/* FV画像：heroの高さにフィット */
.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* あしらい（境目に繋げる） */
.hero-deco {
    position: absolute;
    top: 100%;
    pointer-events: none;
}

.hero-deco--green {
    left: 2%;
    top: 100%;
    width: 40%;
    z-index: 2;
    opacity: .8;
}

.hero-deco--pink {
    right: 0;
    top: 100%;
    width: 80%;
    z-index: 1;
}

/* ヘッダーナビ
.header-nav {
    position: absolute;
    top: 60px;
    right: 140px;
    transform: translateY(-50%);
} */

/* 横並び */
.header-nav__list {
    display: flex;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* リンクデザイン */
.header-nav__list a {
    font-family: "Zen Old Mincho", serif;
    font-size: 16px;
    letter-spacing: 0.12em;
    color: #4A3A17;
    text-decoration: none;
    position: relative;
}

/* ホバー時（さりげなく） */
.header-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: #ED895E;
    transition: width .3s;
}

.header-nav__list a:hover::after {
    width: 100%;
}

.sub-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 80px;
}

.header-logo {
    margin: 0;
    font-family: "Zen Old Mincho", serif;
    font-weight: 500;
    z-index: 1;
}

.header-logo a {
    position: relative;
    /* ← これがないと::afterが迷子 */
    display: inline-block;
    /* ← 文字幅に合わせる */
    text-decoration: none;
    color: #37383C;
    line-height: 1.2;
    padding-bottom: 10px;
    /* ← 線と文字の距離 */
}

.header-logo a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    /* or -2px でもOK */
    width: 0;
    height: 1px;
    background: #ED895E;
    transition: width .25s;
}

.header-logo a:hover::after {
    width: 100%;
}

.header-logo__first {
    display: block;
    font-size: 24px;
    letter-spacing: .15rem;
    color: #4A3A17;
}

.header-logo__last {
    display: block;
    font-size: 24px;
    letter-spacing: .15rem;
    color: #4A3A17;
}

.header-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav a {
    position: relative;
    /* ← これが必須 */
    display: inline-block;
    /* ← 下線の幅を文字幅に合わせやすい */
    padding-bottom: 6px;
    /* ← 線との間隔 */
    text-decoration: none;
    color: #4A3A17;
    font-family: "Zen Old Mincho", serif;
    font-size: 16px;
}

.header-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #ED895E;
    /* ← 線の色はここ */
    transition: width .25s;
}

.header-nav a:hover::after {
    width: 100%;
}

.header-deco {
    position: absolute;
    width: 600px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    pointer-events: none;
}

/* 左上の波 */
.header-deco--left {
    top: 0;
    left: 0;
    background-image: url("../img/pink⑥.png");
}

/* 右上の波 */
.header-deco--right {
    top: 0;
    right: 0;
    background-image: url("../img/green④.png");
}

.site {
    position: relative;
}

/* ページ全体に紙 */
.site::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("../img/backgraoud.jpg");
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    opacity: 0.12;
    pointer-events: none;
    z-index: -1;
}

/* 中身を前面に */
.site>* {
    position: relative;
    z-index: 1;
}

/* セクション共通 */
.section {
    width: min(var(--max), 92vw);
    margin: 0 auto;
    padding: 40px 0 10px;
    position: relative;

}

.section>*:not(.deco) {
    position: relative;
    z-index: 1;
}

/* タイトル下の短めライン（中央） */
.section__kicker::after {
    content: "";
    display: block;
    width: 90px;
    /* ラインの長さ */
    height: 1px;
    background: #ED895E;
    margin: 16px auto 0;
    /* タイトルとの余白 */
}

.deco {
    position: absolute;
    z-index: 0;
}

.deco--green {
    top: 0;
    left: -500px;
    width: 900px;
    z-index: 1;
}

.deco--pink {
    top: -5px;
    right: -100px;
    width: 1440px;
    z-index: 0;
}

.deco--green2 {
    top: 320px;
    right: 260px;
    width: 150px;
    z-index: 1;
    opacity: .5;
}

.deco--pink2 {
    top: 230px;
    right: 350px;
    width: 150px;
    z-index: 0;
    opacity: .4;
}

.section--footer {
    background-image: url("../img/backgraoud.jpg");
    background-repeat: repeat;
}

.section__head {
    margin-bottom: 26px;
}

.section__title {
    font-size: 45px;
    margin: 0;
    letter-spacing: .02em;
    margin-top: 80px;
}

.section__sub {
    margin: 4px 0 0;
    font-size: 16px;
}

.section__kicker {
    text-align: center;
    margin: 50px 0 100px;
    letter-spacing: 0.15em;
    font-weight: 400;
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN", Meiryo, sans-serif;
    font-size: 24px;
    margin-top: 200px;
}

.section__lead {
    margin: 0 0 28px;
    text-align: center;
}

.works {
    color: #4A3A17;
}


.works .section__title {
    color: #4A3A17;
}

.works .section__sub {
    color: #4A3A17;
}

.card>a {
    border-radius: inherit;
    overflow: hidden;
}

.card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.about img {
    width: 180px;
    /* 好きなサイズに変更OK */
    max-width: none;
    /* 念のため */
    border-radius: 16px;
    margin-top: -100px;
}

.about-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    /* ←画像幅と揃える */
    gap: 70px;
    padding: 50px;
    align-items: center;

}

.about-card .about__img {
    width: 160px;
    max-width: none;
    margin-top: -100px;
}

.about-card img {
    margin-top: 0;
}

#about .about-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 70px;
    padding: 50px;
    align-items: center;
}

.about__text {
    text-align: left;
    justify-self: start;
    /* ←右列の左に寄せる */
}

.work-card,
.banner-card,
.recipe-card {
    transition: transform .18s ease, box-shadow .18s ease;

}

.work-card:hover,
.banner-card:hover,
.recipe-card:hover {
    transform: translateY(-3px);
}

/* 画像 */
.work-card__thumb,
.banner-card__thumb,
.recipe-card__thumb {
    width: 100%;
    height: auto;
    display: block;
}


/* Webカード：2列 */
.works__grid {
    display: grid;
    gap: 5px;
}

.works__grid--web {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.work-card__meta {
    padding: 14px 16px 16px;
    text-align: center;
}

.work-card__title {
    margin: 10px 0 0;
    font-size: 16px;
    letter-spacing: .03em;
    font-weight: 300;
}

/* バナー：4列 */
.works__grid--banner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.banner-card__meta {
    padding: 12px 12px 14px;
    text-align: center;
}

.banner-card__title {
    margin: 10px 0 0;
    font-size: 16px;
    font-weight: 300;
}

/* レシピ：4列（必要なら横スクロールにもできる） */
.works__grid--recipe {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.recipe-card {
    padding: 5px;
    background: rgba(255, 255, 255, .05);
}

.recipe-card__thumb {
    border-radius: 12px;
}

.recipe-card__title {
    margin: 10px 2px 6px;
    font-size: 13px;
    letter-spacing: .02em;
    font-weight: 300;
}

.deco--pink3 {
    top: 1400px;
    left: 10px;
    width: 250px;
    z-index: 0;
    opacity: .4;
}

.deco--green3 {
    top: 1600px;
    right: 260px;
    width: 150px;
    z-index: 1;
    opacity: .5;
}

.deco--pink4 {
    top: 1500px;
    right: 350px;
    width: 150px;
    z-index: 0;
    opacity: .4;
}

.deco--green4 {
    top: 1600px;
    right: 250px;
    width: 150px;
    z-index: 1;
    opacity: .5;
}


/* タグ */
.tags {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.tag {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #DBEDE1;
}

.tag--accent {
    background: rgba(243, 164, 102, .18);
}

.tag-banner {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(194, 225, 236, .3);
}

.divider {
    height: 1px;
    width: min(900px, 92vw);
    margin: 40px auto;
    background: rgba(255, 255, 255, .10);
}

.section--service {
    position: relative;
    padding: 120px 0;
}

.section--service::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/service-bg.jpg") center / cover no-repeat;
    opacity: .35;
    z-index: -1;
}

/* サービス */
.service__list {
    display: grid;
    grid-template-columns: 1fr;
    /* ← 1列にする */
    gap: 100px;
    margin: 500px 0;
    justify-items: center;
    /* カードを中央寄せ */
}

/* サービスカード */
.service-card-design {
    width: min(900px, 92vw);
    /* 好みで調整OK（カード幅） */
    background: #FFFAF4;
    /* ← カード背景 */
    border-radius: 18px;
    padding: 56px 40px;
    text-align: center;
    overflow: hidden;
}

.service-card-recipe {
    width: min(600px, 92vw);
    /* 好みで調整OK（カード幅） */
    background: #FFFAF4;
    /* ← カード背景 */
    border-radius: 18px;
    padding: 56px 40px;
    text-align: center;
    overflow: hidden;
}

.service-card__title {
    font-size: 20px;
    margin: 0 0 14px;
    letter-spacing: .03em;
    font-weight: 300;
}

/* タイトル下の短めライン（中央） */
.service-card__title::after {
    content: "";
    display: block;
    width: 90px;
    /* ラインの長さ */
    height: 1px;
    background: #ED895E;
    margin: 16px auto 0;
    /* タイトルとの余白 */
}

/* 本文 */
.service-card__text {
    font-size: 15px;
    margin: 40px 0 26px;
    /* ライン〜本文、本文〜ボタン */
}

/* 「詳しく見る」ボタン */
.service-card-design .btn {
    display: inline-block;
    padding: 8px 60px;
    border: 1px solid #4A3A17;
    /* 枠線 */
    background: #ffffff;
    /* 中の色 */
    color: #4A3A17;
    border-radius: 999px;
    /* 角丸（好みで18pxでもOK） */
    text-decoration: none;
    letter-spacing: .05em;
    transition: transform .18s ease, background-color .18s ease;
    margin-top: 30px;
}

.service-card .btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .75);
}

.card.service-card {
    background: #FFFAF4;
}

.section--service {
    position: relative;
    width: 100%;
    margin-top: 200px;
    padding: 100px 0 160px;
    overflow: hidden;
}

.section--service::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("../img/service_background.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    opacity: .3;
    pointer-events: none;
}

.section--service__inner {
    width: min(var(--max), 92vw);
    margin: 0 auto;
    padding: 0 40px;
    /* ← ここを追加 */
    position: relative;
    z-index: 1;
}

.section--service__inner {
    position: relative;
    z-index: 1;
    /* ←中身を前に */
}

.service-head {
    position: relative;
    min-height: 260px;
    /* ここは好みで調整 */
    padding-top: 40px;
}

/* 右寄せ：Service & Flow */
.service-title {
    margin-left: auto;
    text-align: right;
    max-width: 720px;
}

.service-title__main {
    margin-top: 50px;
    font-size: 45px;
    letter-spacing: .02em;
    margin: 0;
}

.service-title__sub {
    margin: 4px 0 0;
    font-size: 16px;
}

/* 右側の縦ラベル（サービスについて / service） */
.service-vert {
    position: absolute;
    top: 330px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    /* ← 上揃え（これが重要） */
    position: absolute;
    right: -270px;
    /* 右端からの距離（調整OK） */
    position: relative;

}

.service-vert--sub {
    position: absolute;
    top: 500px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    /* ← 上揃え（これが重要） */
    position: absolute;
    right: -70px;
    /* 右端からの距離（調整OK） */
    position: relative;

}

/* 縦書きは子に付ける */
.service-vert__jp,
.service-vert__en {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .08em;
}

/* 英字（左側） */
.service-vert__en {
    font-size: 13px;
    margin-top: 6px;
    /* 念のため */
    line-height: 2;
    /* 英字がズレる時に効く */
    letter-spacing: 0.8rem;
}

/* 日本語（右側） */
.service-vert__jp {
    font-size: 20px;
    margin-top: 0;
    letter-spacing: 0.5rem;
}

/* 見出し＋あしらいの基準箱 */
.service-vert {
    position: relative;
    /* ← ここが基準になる */
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* 輪のあしらい（トップ・下層 共通） */
.service-vert .service-rings {
    position: absolute;
    left: -120px;
    /* ← ここを1回だけ調整 */
    top: -70px;
    /* ← ここを1回だけ調整 */
    width: 160px;
    height: auto;
    opacity: .9;
    pointer-events: none;
    z-index: -1;
}

.deco--pink5 {
    right: 100px;
    width: 200px;
    z-index: 0;
    opacity: .3;
}

/* Flow */
.deco--pink6 {
    top: 200px;
    right: 100px;
    width: 200px;
    z-index: -1;
    opacity: .3;
}

.deco--pink7 {
    top: 600px;
    right: -710px;
    width: 150px;
    z-index: 0;
    opacity: .3;
    transform: scale(-1, 1);
}

.deco--pink8 {
    top: 1600px;
    right: 100px;
    width: 200px;
    z-index: 0;
    opacity: .3;
}

.flow-rings② {
    position: absolute;
    right: 250px;
    top: 300px;
    width: 130px;
    /* 好みで */
    height: auto;
    opacity: .4;
    pointer-events: none;
    z-index: -1;
}

.deco--green5 {
    position: absolute;
    top: 900px;
    left: 50%;
    transform: translateX(-50vw);
    width: 150px;
    z-index: 1;
    opacity: .8;
}

.flow-rings {
    position: absolute;
    left: 0;
    top: 1900px;
    width: 160px;
    /* 好みで */
    height: auto;
    opacity: .4;
    pointer-events: none;
}

.flow__list {
    display: flex;
    justify-content: center;
    gap: 60px;
    list-style: none;
    padding-left: 120px;
    /* 縦ラベル分 */
    margin: 0;
}

.flow__list li {
    text-align: center;
    font-size: 14px;
}

.flow__list span {
    display: block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    margin: 0 auto 10px;
}

.flow {
    position: relative;
    width: min(var(--max), 92vw);
    margin-top: -200px;
}

/* 画像（任意） */
.flow__media {
    display: flex;
    justify-content: center;
    margin: 0 0 18px;
}

.flow__media img {
    width: min(520px, 90%);
    height: auto;
    display: block;
}

/* 1ステップ：円＋テキスト */
.flow__item {
    position: relative;
    text-align: center;
}

/* 円 */
.flow__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    background: #ffffff;
    border: 1px solid #ED895E;
    color: #4A3A17;
    font-weight: 600;
    font-size: 20px;
}

/* 文言 */
.flow__text {
    font-size: 16px;
    line-height: 1.6;
}

/* 円と円の間の「・・・・」 */
.flow__item:not(:last-child)::after {
    content: "‥‥‥‥";
    position: absolute;
    top: 40px;
    right: -58px;
    color: #ED895E;
}

.flow__num {
    display: grid;
    place-items: center;
}

.flow__num-text {
    font-size: 20px;
    letter-spacing: 0.2em;
    /* 控えめ */
}

/* Flow 縦ラベル（Web制作の流れ / Flow） */
.flow-vert {
    position: absolute;
    left: 70px;
    /* 位置はここで調整 */
    top: 10px;
    display: flex;
    /* ← 横並び */
    gap: 10px;
    align-items: flex-start;
    /* ← 上揃え（重要） */
}

/* 日本語・英字 共通：縦書き */
.flow-vert__jp,
.flow-vert__en {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .08em;
}

/* 英字（左側） */
.flow-vert__en {
    font-size: 13px;
    margin-top: 3px;
    line-height: 2;
    letter-spacing: 0.8em;
}

/* 日本語（右側） */
.flow-vert__jp {
    font-size: 20px;
    letter-spacing: 0.5em;
}

/* 共通 */
.flow-vert__jp {
    writing-mode: vertical-rl;
    font-size: 20px;
    letter-spacing: 0.5em;
}

/* 日本語 */
.flow-vert__jp .jp {
    text-orientation: mixed;
}

/* webだけ縦向きに */
.flow-vert__jp .jp-web {
    text-orientation: upright;
    letter-spacing: 0.3em;
    /* 英字は少し詰めるときれい */
}

/* アバウト　*/
.about-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 70px;
    padding: 50px;
    align-items: center;
}

.about__text h3 {
    margin: 0 0 12px;
    font-weight: 300;
}

.about__text p {
    margin-top: 40px;
}

.about {
    padding: 120px 0;
}

/* ピンクの背景ボックス */
.about-bg {
    margin: 0 auto;
    padding: 80px 100px;
    background: #F6BCAC;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-bg {
    background: rgba(246, 188, 172, 0.2);
}

.about-hero {
    margin-top: 200px;
}

/* contact */
.deco--pink9 {
    top: 700px;
    right: 100px;
    width: 200px;
    z-index: 0;
    opacity: .3;
}

.deco--green6 {
    position: absolute;
    top: -400px;
    left: 50%;
    transform: translateX(-50vw);
    width: 200px;
    opacity: .5;
}

.deco--pink10 {
    top: 5px;
    right: 700px;
    width: 200px;
    z-index: -2;
    opacity: .3;
}

.deco--green7 {
    position: absolute;
    top: 120px;
    right: 800px;
    width: 150px;
    z-index: -1;
    opacity: .8;
}

.section--contact .section__head {
    transform: translateY(-70px);
}

.section--contact {
    margin: 100px auto 0;
    margin-bottom: 300px;
}

.contact-line {
    width: 1000px;
    height: 1px;
    background-color: #ED895E;
    margin: 60px auto 0;
    /* 上に余白、中央寄せ */
}

/* 2カラムの親 */
.contact-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* ← centerだと縦位置がずれやすい */
    gap: 80px;
}

/* 左：見出し */
.contact-left {
    flex: 0 0 240px;
    /* お好みで調整OK */
}

/* 右：本文＋ボタン */
.contact-right {
    flex: 1;
}

/* 行間や余白（必要なら） */
.section--contact .section__lead {
    margin: 0 0 24px;
    text-align: left;
}

/* ✅ ボタン下のライン（中央・1000px・#ED895E） */
.contact-line {
    width: 1000px;
    max-width: 100%;
    height: 1px;
    background: #ED895E;
    margin: 60px auto 0;
    /* 上の余白は好みで */
}

/* 左右セット（Contact見出し＋文章＋ボタン）を中央に */
.contact-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    /* ← ここがポイント（セットを中央へ） */
    align-items: center;
    gap: 80px;
}

/* 左右の幅バランス（好みで調整OK） */
.contact-left {
    flex: 0 0 260px;
    /* 見出しカラムの固定幅 */
}

.contact-right {
    flex: 0 1 520px;
    /* 右カラムは縮められる */
}

/* ライン：1000pxを中央に（画面が狭い時は100%まで） */
.contact-line {
    width: min(1000px, 100%);
    height: 1px;
    background: #ED895E;
    margin: 50px auto 0;
    /* 中央配置 */
}

/* フッター */
.footer {
    position: relative;
    padding: 240px 0 20px;
    text-align: center;
    background-image: url("../img/fotter.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-top: 280px;
}

/* 紙テクスチャを半透明で重ねる */
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: var(--paper-opacity);
    pointer-events: none;
}

.footer__nav {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-bottom: 60px;
    /* ← ここを増やす */
    letter-spacing: 0.12em;
}

.footer__copy {
    font-size: 13px;
}

.footer__nav a,
.footer__nav a:visited,
.footer__nav a:hover,
.footer__nav a:active,
.footer__nav a:focus {
    color: #4A3A17;
    text-decoration: none;
    /* 下線を消す */
}

.footer__nav a {
    color: #4A3A17;
    text-decoration: none;
    position: relative;
}

.footer__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .25s;
    color: #ED895E;
}

.footer__nav a:hover::after {
    width: 100%;
}

/* =========================
   About page
========================= */

.main--sub {
    padding-top: 10px;
    /* 上が詰まる場合は 30px などに */
}

/* 下層ヘッダー */
.subhero {
    position: relative;
}

.subhero__bar {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- About hero block --- */
.about-hero {
    position: relative;
    padding: 60px 20px 90px;
}

.about-hero__inner {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}

.about-hero__head {
    margin-bottom: 26px;
}

.about-hero__title {
    font-size: 45px;
    margin: 0;
    line-height: 1.15;
}

.about-hero__sub {
    margin: 6px 0 0;
    font-size: 16px;
}

/* カード（中央の白い箱） */
.about-card {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: 44px 56px 46px;
    border-radius: 26px;
    text-align: center;
    overflow: hidden;
}

.about-card__photo {
    width: 120px;
    margin: 0 auto 14px;
}


.about-card__name {
    margin: 10px 0 18px;
    font-size: 14px;
    letter-spacing: .05em;
}

.about-card__sep {
    opacity: .6;
    margin: 0 6px;
}

.about-card__text {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
    line-height: 1.9;
    font-size: 14px;
}

.about-card__text p {
    margin: 0 0 14px;
}

/* 右側の縦書きコピー */
.about-card__vert {
    position: absolute;
    right: 56px;
    top: 96px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .12em;
    font-size: 12px;
    opacity: .75;
}

/* 小さな写真（左右） */
.about-card__thumb {
    position: absolute;
    width: 125px !important;
    height: 125px !important;
    object-fit: cover;
    border-radius: 12px;
    opacity: .95;
}

.about-card__thumb--right {
    right: 70px;
    bottom: 330px;
}

.about-card__thumb--left {
    left: 120px;
    bottom: 80px;
}

/* --- Story block --- */
.about-story {
    position: relative;
    padding: 90px 20px 120px;
}

.about-story__inner {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    min-height: 760px;
    /* PNGの“縦に長い余白感”を作る */
}

.about-story__center {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 14px;
    letter-spacing: .08em;
    width: min(560px, 90%);
}

.about-story__vert {
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .12em;
    font-size: 12px;
    opacity: .7;
}

.about-story__vert--left {
    left: 18px;
    top: 110px;
}

.about-story__vert--right {
    right: 18px;
    bottom: 150px;
}

/* 下部のステップ */
.about-steps {
    position: absolute;
    left: 50%;
    bottom: -800px;
    transform: translateX(-50%);
    width: min(820px, 92%);
}

.about-steps__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px;
}


.about-steps__list {
    max-width: 720px;
    margin: 0 auto;
    justify-content: center;
}

.about-steps__item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 100px;
    align-items: start;

    display: flex;
    align-items: flex-start;
}

.about-steps__iconWrap {
    width: 56px;
    display: flex;
    justify-content: center;
}

.about-steps__icon {
    width: 80px;
    height: auto;
}

.about-steps__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    position: relative;
}

.about-steps__badge {
    font-size: 18px;
    letter-spacing: .12em;
    margin-bottom: 8px;
}

.scroll-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* ドット間隔 */
    margin-top: 8px;
}

.scroll-line span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #d6b48c;
    opacity: .7;
}

.about-steps__item:last-child .scroll-line {
    display: none;
}

.about-steps__badge {
    width: 85px;
    height: 85px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 20px;
    letter-spacing: .09em;
    background: rgba(255, 255, 255, .75);
    border: 1px solid #ED895E;
}

.about-steps__title {
    margin: 0 0 6px;
    font-size: 20px;
}

.about-steps__text {
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .06em
}

.subhero {
    position: relative;
}

.green1 {
    position: absolute;
    top: 400px;
    left: -10px;
    /* 左右位置はお好みで */
    width: 150px;
    opacity: .4;
    z-index: 1;
}

.green2 {
    position: absolute;
    top: 60px;
    left: 20px;
    /* 左右位置はお好みで */
    width: 300px;
    opacity: .5;
    z-index: -1;
}

.green3 {
    position: absolute;
    top: 300px;
    right: 200px;
    /* 左右位置はお好みで */
    width: 250px;
    opacity: .7;
    transform: scale(-1, 1);
}

.green4 {
    position: absolute;
    top: 900px;
    left: 0;
    /* 左右位置はお好みで */
    width: 150px;
    opacity: .7;
}

.green5 {
    position: absolute;
    top: 1900px;
    right: 50px;
    /* 左右位置はお好みで */
    width: 300px;
    opacity: .8;
}

.green6 {
    position: absolute;
    top: 150px;
    right: 800px;
    /* 左右位置はお好みで */
    width: 250px;
    opacity: .8;
    transform: scale(-1, 1);
    transform: rotate(12deg);
}

.green7 {
    position: absolute;
    top: 1100px;
    right: 0;
    /* 左右位置はお好みで */
    width: 150px;
    opacity: .8;
    transform: scale(-1, 1);
}



.pink1 {
    position: absolute;
    top: -90px;
    right: 60px;
    /* 左右位置はお好みで */
    width: 250px;
    opacity: .3;
}

.pink2 {
    position: absolute;
    top: 200px;
    right: 300px;
    /* 左右位置はお好みで */
    width: 250px;
    opacity: .2;
}

.pink3 {
    position: absolute;
    top: 500px;
    right: 0;
    /* 左右位置はお好みで */
    width: 150px;
    opacity: .2;
    transform: scale(-1, 1);
}

.pink4 {
    position: absolute;
    top: 400px;
    right: 300px;
    /* 左右位置はお好みで */
    width: 150px;
    opacity: .2;
}

.pink5 {
    position: absolute;
    top: 1300px;
    right: 800px;
    /* 左右位置はお好みで */
    width: 300px;
    opacity: .3;
    transform: scale(-1, 1);

}

.pink6 {
    position: absolute;
    top: 10px;
    right: 900px;
    /* 左右位置はお好みで */
    width: 250px;
    opacity: .3;
}

.pink7 {
    position: absolute;
    top: 600px;
    left: 0;
    /* 左右位置はお好みで */
    width: 150px;
    opacity: .2;
}



.blob--p3 {
    left: 120px;
    bottom: 220px;
    width: 200px;
    height: 200px;
    background: rgba(246, 188, 172, .55);
}

/* ドット（右上・右下の点々っぽい要素） */
.dot {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 999px;
    background:
        radial-gradient(rgba(236, 105, 46, .25) 18%, transparent 19%) 0 0 / 14px 14px;
    opacity: .55;
    pointer-events: none;
}

.about-service {
    position: relative;
    padding: 80px 20px 90px;
    position: relative;
    /* ← これがないと ::before が効きません */
    overflow: hidden;
    /* はみ出し防止（角丸がある場合も◎） */
}


.about-service__inner {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    margin-top: 400px;
}

.about-service__title {
    font-size: 18px;
    letter-spacing: .10em;
    margin: 0 0 26px;
    text-align: center;
    opacity: .9;
}

/* 左の縦「サービスについて」 */
.about-service__vert {
    position: absolute;
    left: 18px;
    top: 40px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .12em;
    font-size: 12px;
    opacity: .7;
}

.about-service__list {
    display: grid;
    gap: 200px;
    /* カード間の余白（縦積み） */
    place-items: center;
}

/* カード本体 */
.svc-card {
    width: min(820px, 92%);
    padding: 28px 34px 26px;
    border-radius: 22px;
    background: #FFFAF4;
}

.svc-card__top {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 18px;
    align-items: start;
}

.svc-card__icon-box {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #FFFAF4;
}

/* 右側テキスト */
.svc-card__title {
    margin-top: 30px;
    font-size: 20px;
    letter-spacing: .06em;
    margin-left: 100px;
}

.svc-card__lead {
    margin-top: 40px;
    font-size: 15px;
    line-height: 1.9;

}

/* 薄い区切り線 */
.svc-card__line {
    height: 1px;
    background: rgba(236, 105, 46, .20);
    margin: 18px 0 14px;
}

/* 箇条書き */
.svc-card__points {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.9;
}

.about-card {
    padding: 48px 56px 52px;
    text-align: center;
}

/* 上段：横並び */
.about-card__top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin-bottom: 28px;
}

/* プロフィール写真 */
.about-card__photo {
    width: 210px;
    margin-left: 30px;
}

/* 縦テキスト＋ライン */
.about-card__vert-wrap {
    display: flex;
    flex-direction: column;
    /* ← 縦並びにする */
    align-items: center;
    gap: 10px;
    /* 上下の間隔 */
}

.about-card__vert-line {
    width: .5px;
    height: 48px;
    background: #4A3A17;
    opacity: .5;
    margin-right: 200px;
}

.about-card__vert-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 16px;
    letter-spacing: .5em;
    line-height: 1.9;
    margin: 0;
    margin-right: 200px;
}

/* 下段：中央テキスト */
.about-card__bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 外側は中央 */
}

.about-card__name {
    margin: 0 0 18px;
    font-size: 20px;
    letter-spacing: .08em;
}

.about-card__text {
    max-width: 520px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 2;
}

.about-card__text p {
    margin: 20px 0 20px;
    letter-spacing: .15rem;
    margin-left: 90px;
}

.about-card__name,
.about-card__text {
    max-width: 520px;
    /* ← 本文と同じ幅 */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.svc-card__points li::marker {
    color: #ED895E;
    opacity: 0.5;
}

/* ===== Aboutプロフィール：上段→下段が必ず縦に積まれるように固定 ===== */
.about-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 上→下に並べる */
    align-items: center;
    /* カード内を中央寄せ */
    gap: 28px;
    /* 上段と下段の間隔 */
}

/* 上段：写真＋縦テキストを中央に */
.about-card__top {
    position: static !important;
    /* absoluteを無効化 */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    width: 100%;
}

/* 下段：必ず下に */
.about-card__bottom {
    position: static !important;
    /* absoluteを無効化 */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 下段の本文は読みやすく左揃え */
.about-card__text {
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
}

/* カード本体 */
.svc-card.card {
    max-width: 980px;
    /* Figmaの中央カード感 */
    margin: 0 auto;
    padding: 64px 84px;
    /* 余白大きめがポイント */
    border-radius: 24px;
    background: #FFFAF4;
}

/* タイトル中央＋短い下線 */
.svc-card__titleArea {
    text-align: left;
    padding-left: 42%;
}

.svc-card__title {
    display: inline-block;
    /* ← 重要 */
    margin: 0;
    font-weight: 300;
}

.svc-card__titleLine {
    display: block;
    width: 120px;
    height: 1px;
    background: #ED895E;
    margin-top: 14px;
    /* ← 左揃えのまま下に */
}

/* 上段：左アイコン＋右テキスト */
.svc-card__top {
    display: grid;
    grid-template-columns: 240px 1fr;
    /* 左余白がしっかりあるのがFigmaっぽい */
    gap: 44px;
    align-items: start;
    margin-bottom: 46px;
}

.svc-card__icon {
    display: grid;
    place-items: center;
}

.svc-card__icon img {
    width: 150px;
    /* 画像に合わせて調整 */
    height: auto;
    display: block;
}

.svc-card__lead {
    line-height: 2.1;
    font-size: 15px;
    letter-spacing: .06em;
    color: #4A3A17;
}

/* 横線 */
.svc-card__line {
    height: 1px;
    background: #e9a98e;
    margin: 0;
    /* 線の上下余白は bottom で作る */
}

/* 下段：強み＋縦点線＋リスト */
.svc-card__bottom {
    display: grid;
    grid-template-columns: 180px 40px 1fr;
    align-items: start;
    padding-top: 34px;
}

.svc-card__badge {
    display: flex;
    flex-direction: column;
    /* 縦並び */
    align-items: center;
    /* 中央揃え（←これがズレ解消の鍵） */
    padding-top: 8px;
}

.svc-card__badgeText {
    font-size: 20px;
    letter-spacing: .10em;
    position: relative;
    display: inline-block;
    padding-top: 10px;
}

.svc-card__titleArea {
    text-align: left;
    /* ← 中央寄せをやめる */
    transform: translateX(12px);
    /* 右にずらす */
}

.svc-card__badge img {
    width: 60px;
    height: auto;
    display: block;
    margin-top: -10px;
}


.svc-card__bottom {
    display: grid;
    grid-template-columns: 180px 40px 1fr;
    /* 強み / 点線 / リスト */
    align-items: start;
    padding-top: 34px;
}

/* 点線（真ん中列で中央寄せ） */
.scroll-lines {
    align-self: stretch;
    /* 高さを親に合わせる */
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    /* ← これ重要（ズレ原因） */
    padding-top: 8px;
    /* 必要なら微調整 */
}

/* ドット */
.scroll-lines span {
    display: block;
    width: 2px;
    height: 2px;
    border-radius: 999px;
    background-color: #ED895E;
    /* 色はお好みで */
    opacity: 0.5;
}

/* 箇条書き */
.svc-card__points {
    margin: 0;
    padding-left: 1.2em;
    line-height: 2.2;
    font-size: 14px;
    letter-spacing: .06em;
    color: #3a3532;
}

.svc-card__points li {
    margin: 0;
}

/* ===== 2枚目（recipe）上段レイアウト ===== */
.svc-card--recipe .svc2-head {
    display: grid;
    grid-template-columns: 1fr 220px;
    /* 左：文章 / 右：アイコン */
    gap: 48px;
    align-items: start;
}

/* 左側：全部左揃え */
.svc-card--recipe .svc2-head__left {
    text-align: left;
}

.svc-card--recipe .svc2-head__title {
    margin: 0;
    font-size: 20px;
    letter-spacing: .08em;
    font-weight: 300;
}

/* ライン：テキスト左揃えで、その下に配置 */
.svc-card--recipe .svc2-head__line {
    display: block;
    width: 120px;
    height: 1px;
    background: #ED895E;
    margin-top: 14px;
}

/* 小見出し（任意） */
.svc-card--recipe .svc2-head__kicker {
    margin: 28px 0 0;
    font-size: 14px;
    letter-spacing: .06em;
}

/* 本文 */
.svc-card--recipe .svc2-head__lead {
    margin: 18px 0 0;
    line-height: 2.1;
    font-size: 14px;
    letter-spacing: .06em;
}

/* 右側：アイコンを右寄せ */
.svc-card--recipe .svc2-head__right {
    justify-self: end;
    transform: translateX(-70px);
}

.svc-card--recipe .svc2-head__right img {
    width: 150px;
    height: auto;
    display: block;
}

.about-bgWrap {
    position: relative;
    overflow: visible;
    /* 念のため（hiddenだと切れる） */
}

.about-bgWrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/service_background.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 120% auto;
    opacity: .4;
    pointer-events: none;
    z-index: 0;
}

/* 中身を背景より前に出す（大事） */
.about-bgWrap>section {
    position: relative;
    z-index: 1;
}

/* about-story の親が基準になるように */
.about-story__inner {
    position: relative;
}

.about-story {
    padding-bottom: 1000px;
    /* 足りない分を確保 */
}

/* 右側の縦ラベル本体 */
.story-vert {
    position: absolute;
    right: 150px;
    /* 右端からの距離：お好みで */
    top: 80px;
    /* 上からの距離：お好みで */
    display: flex;
    gap: 10px;
    /* EN と JP の間隔 */
    align-items: flex-start;
    z-index: 2;
}

/* 縦書き（EN/JP共通） */
.story-vert__en,
.story-vert__jp {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .08em;
}

/* EN（左側） */
.story-vert__en {
    font-size: 13px;
    letter-spacing: 0.8rem;
}

/* JP（右側） */
.story-vert__jp {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 20px;
    letter-spacing: 0.5rem;
}

/* あしらい画像（2つ） */
.story-vert__deco {
    position: absolute;
    z-index: -1;
    /* 文字の後ろへ */
    opacity: .9;
    /* お好みで */
    pointer-events: none;
}

/* 1つ目 */
.story-vert__deco--1 {
    top: -50px;
    left: 25px;
    width: 100px;
    opacity: 0.5;
}

/* 2つ目（少しずらす） */
.story-vert__deco--2 {
    top: 5px;
    left: 5px;
    width: 150px;
    opacity: 0.4;
    transform: rotate(-90deg);
}

/* =================================
  Works page
================================= */
.works-green1 {
    position: absolute;
    top: 500px;
    right: 0;
    width: 150px;
    opacity: .5;
    transform: scale(-1, 1);
}

.works-green2 {
    position: absolute;
    top: 1200px;
    left: 0;
    width: 150px;
    opacity: .5;
}

.works-green3 {
    position: absolute;
    top: 1600px;
    right: 80px;
    width: 150px;
    opacity: .5;
}


.works-pink1 {
    position: absolute;
    top: 1650px;
    right: 500px;
    width: 300px;
    opacity: .3;
    transform: rotate(45deg);
}

.works-pink2 {
    position: absolute;
    top: 1500px;
    right: 160px;
    width: 150px;
    opacity: .5;
    z-index: -1;
}

.works-pink3 {
    position: absolute;
    top: 2000px;
    right: 0;
    width: 150px;
    opacity: .2;
    transform: scale(-1, 1);
}


.works-hero {
    position: relative;
    padding: 90px 0 40px;
}

.works-hero__inner {
    width: min(1000px, 92%);
    margin: 0 auto;
    position: relative;
}

.works-hero__head {
    text-align: center;
    margin-bottom: 28px;
}

.works-hero__title {
    font-size: 48px;
    letter-spacing: .06em;
    margin: 0;
}

.works-hero__sub {
    margin-top: 8px;
    font-size: 14px;
    opacity: .8;
}

/* あしらい（位置だけ調整） */
.works-deco {
    position: absolute;
    z-index: 0;
    opacity: .35;
    pointer-events: none;
}

.works-deco--p1 {
    top: 40px;
    left: 0;
    width: 160px;
}

/* 作品カード */
.works-project {
    position: relative;
    z-index: 1;
    padding: 28px 28px 34px;
    border-radius: 26px;
    text-align: center;
}

.works-project__meta {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.works-chip {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(237, 137, 94, 0.2);
    /* ← 背景だけ薄く */
    color: #4A3A17;
    /* ← 文字はくっきり */
}

.works-chip2 {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(219, 237, 225, 0.6);
    color: #4A3A17;
}


.works-project__name {
    margin: 0;
    font-size: 20px;
    letter-spacing: .08em;
}

.works-project__line {
    display: block;
    width: 54px;
    height: 1px;
    margin: 12px auto 40px;
    background: #ED895E;
}

.works-project__thumb img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

/* グレー枠 */
.works-gallery {
    margin: 28px auto 0;
    width: 100%;
    min-height: 360px;
    border-radius: 26px;
    display: grid;
    /* place-content: center; ← これを消す or コメントアウト */
    gap: 12px;
    text-align: center;
    padding: 24px;
    /* ← 余白ついでに入れるときれい */
}

.works-gallery__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    /* 角丸（世界観に合わせて） */
}


.works-gallery__btn {
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    opacity: .85;
}

.works-gallery__btn:hover {
    opacity: 1;
}

.works-gallery__slash {
    opacity: .4;
}

/* 説明文 */
.works-lead {
    text-align: center;
    margin: 80px 0 80px;
    font-size: 15px;
    line-height: 2.1;
}

/* 概要テーブル */
.works-sheet {
    margin: 0 auto;
    width: min(920px, 94%);
    padding: 18px 0 10px;
}

.works-dl {
    margin: 0;
}

.works-row {
    position: relative;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    padding: 30px 0;
    border-bottom: 1px solid #ED895E;
}


.works-row dt::before {
    color: #ED895E;
    /* ・も同色に */
    opacity: 1;
}

/* 左側（dt）を上下ラインの真ん中に */
.works-row dt {
    align-self: center;
    /* ←これが縦中央の決め手 */
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* 「・」を付ける */
.works-row dt::before {
    content: "・";
}

.works-row dd {
    margin: 0;
    line-height: 2;
}


/* 「・・・」を縦に（縦書き） */
.works-row::after {
    content: "・・・・・・・・・・";
    position: absolute;
    color: #ED895E;
    left: calc(140px + 9px);
    top: 50%;
    transform: translate(-50%, -50%);

    writing-mode: vertical-rl;
    /* 縦配置 */
    text-orientation: upright;
    font-size: 7px;
    letter-spacing: -0.2em;
    opacity: .6;
}

.works-row a {
    text-decoration: none !important;
    /* 下線を消す */
    padding-bottom: 2px;
    transition: opacity .2s ease;
    color: #4A3A17;
}

.works-row a:hover {
    opacity: 1;
}

.works-row dd a {
    display: inline-block;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 999px;

    border: 1px solid #ED895E;
    /* ← 枠線にする */
    background: transparent;

    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.works-row dd a:hover {
    background: rgba(237, 137, 94, 0.18);
    border-color: transparent;
}

/* モーダル */
.works-modal {
    border: none;
    border-radius: 18px;
    padding: 18px;
    width: min(1000px, 94vw);
}

.works-modal::backdrop {
    background: rgba(0, 0, 0, .55);
}

.works-modal img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.works-modal__close {
    position: sticky;
    top: 0;
    margin-left: auto;
    display: block;
    border: none;
    background: rgba(0, 0, 0, .06);
    border-radius: 999px;
    width: 38px;
    height: 38px;
    cursor: pointer;
}

/* ===== URL行だけ中央寄せ ===== */
.works-row--center {
    grid-template-columns: 1fr;
    /* 1カラムにする */
    text-align: center;
}

/* 「・」を消す */
.works-row--center dt::before {
    content: none;
}

/* 縦の点線・・・・を消す */
.works-row--center::before,
.works-row--center::after {
    display: none;
}

/* dt / dd を中央に */
.works-row--center dt,
.works-row--center dd {
    justify-self: center;
}

/* URLの見た目を少し整える（任意） */
.works-row--center a {
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* =================================
   Contact page
================================= */
.contact-pink1 {
    position: absolute;
    top: 200px;
    left: 30px;
    width: 250px;
    opacity: .3;
}

.contact-pink2 {
    position: absolute;
    top: 600px;
    left: 0;
    width: 150px;
    opacity: .3;
}


.contact-green1 {
    position: absolute;
    top: 200px;
    right: 0;
    width: 150px;
    opacity: .6;
    transform: scale(-1, 1);

}


.contact-hero {
    position: relative;
    padding: 90px 0 120px;
}

.contact-hero__inner {
    width: min(920px, 92%);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.contact-hero__head {
    text-align: center;
    margin-bottom: 40px;
}

.contact-hero__title {
    font-size: clamp(34px, 4vw, 46px);
    letter-spacing: .12em;
    font-weight: 500;
    margin: 0;
}

.contact-hero__sub {
    margin: 10px 0 18px;
    font-size: 14px;
    letter-spacing: .18em;
}

.contact-hero__lead {
    font-size: 15px;
    line-height: 2.0;
    margin-top: 60px;
    text-align: left;
    /* ← 文字だけ左揃え */
    max-width: 600px;
    /* ← 横幅を制限して読みやすく */
    margin-left: auto;
    /* ← ブロック自体は中央 */
    margin-right: auto;
    font-family: "Zen Old Mincho", serif;
    padding-left: 30px;

}

/* 背景のにじみ（配置だけ上書き） */
.contact-blob {
    position: absolute;
    z-index: 0;
    opacity: .35;
}

.contact-blob--gL {
    left: -140px;
    top: 160px;
    width: 340px;
    height: 340px;
}

.contact-blob--pL {
    left: 120px;
    top: 260px;
    width: 240px;
    height: 240px;
    opacity: .28;
}

.contact-blob--gR {
    right: -160px;
    top: 220px;
    width: 360px;
    height: 360px;
}

.contact-blob--pB {
    left: 60px;
    bottom: -120px;
    width: 260px;
    height: 260px;
    opacity: .22;
}

/* フォーム */
.contact-form {
    width: min(560px, 92%);
    margin: 0 auto;
    display: grid;
    gap: 26px;
}

.contact-form__row {
    display: grid;
    gap: 30px;
    margin-top: 50px;
}

.contact-form__label {
    font-size: 15px;
    letter-spacing: .12em;
}

.req {
    margin-left: 6px;
    font-size: 15px;
    opacity: .75;
}

/* 入力の見た目（Figmaの薄ピンク帯っぽく） */
.contact-form__input,
.contact-form__textarea {
    width: 100%;
    border: 1px solid rgba(55, 56, 60, .12);
    background: rgba(246, 188, 172, .35);
    /* ここを好みで微調整OK */
    border-radius: 12px;
    padding: 14px 14px;
    font-size: 15px;
    outline: none;
    font-family: inherit;
}

.contact-form__textarea {
    padding: 16px 14px;
    resize: vertical;
    min-height: 170px;
    font-family: inherit;

}


/* フォーカス */
.contact-form__input:focus,
.contact-form__textarea:focus {
    border-color: rgba(55, 56, 60, .25);
    box-shadow: 0 0 0 3px rgba(246, 188, 172, .25);
}

/* ラジオ */
.contact-form__row--radio {
    border: 0;
    padding: 0;
    margin-top: 50px;
}

.contact-form__radios {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 40px;
}

.contact-radio {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: 15px;
}

.contact-radio input {
    width: 14px;
    height: 14px;
}

/* 送信ボタン（中央の小さめピル） */
.contact-form__actions {
    display: grid;
    place-items: center;
    margin-top: 6px;
}

.contact-form__btn {
    display: inline-block;
    padding: 8px 60px;
    border: 1px solid #4A3A17;
    /* 枠線 */
    background: #ffffff;
    /* 中の色 */
    color: #4A3A17;
    border-radius: 999px;
    /* 角丸（好みで18pxでもOK） */
    text-decoration: none;
    letter-spacing: .05em;
    transition: transform .18s ease, background-color .18s ease;
    margin-top: 30px;
}

.contact-form__btn:hover {
    background: rgba(255, 255, 255, .75);
}

.contact-form__btn {
    font-family: inherit;
}

.sub-header {
    position: relative;
    z-index: 10;
    /* ★追加：ヘッダー一式を前へ */
}

.header-deco {
    z-index: 0;
    /* ★装飾は後ろ */
}

/* ===== About steps：番号の下に縦ドットを出す ===== */
.about-steps__center {
    display: flex;
    flex-direction: column;
    /* ← 01の下に積む */
    align-items: center;
}

/* about-steps の中の scroll-lines だけ縦にする */
.about-steps__center .scroll-lines {
    display: flex;
    flex-direction: column;
    /* ← ドットを縦に並べる */
    gap: 7px;
    margin-top: 14px;
    /* ← 01とドットの距離（好みで） */
    margin-left: 20px;
}

/* 最後の行はドットを消す（05の下に出ないように） */
.about-steps__item:last-child .scroll-lines {
    display: none;
}

.about-steps__center .scroll-lines {
    margin-top: 10px;
    margin-left: 27px;
    /* ← ここを追加 */
}

.footer {
    position: relative;
    text-align: center;
    background: none;
    /* ← 背景は消す */
}

.footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    /* 画像 1200×296 の比率で高さを確保（画面が広いほど高く） */
    height: clamp(260px, calc(100vw * 296 / 1200), 680px);

    background: url("../img/fotter.png") center bottom / 100% 100% no-repeat;
    z-index: -2;
    pointer-events: none;
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: var(--paper-opacity);
    pointer-events: none;
    z-index: -1;
}

.hero {
    overflow: visible !important;
}


.nav-toggle {
    display: none !important;
}

.hero-deco--green {
    left: 2%;
    bottom: -80px;
    width: clamp(320px, 38vw, 1200px);
    transform-origin: left bottom;
    opacity: .8;
}

.hero-deco--pink {
    right: 0;
    bottom: -120px;
    width: clamp(520px, 100vw, 2600px);
}

.site {
    position: relative;
    /* ← これ追加（なければ） */
}

.site::before {
    content: "";
    position: absolute;
    /* ★ fixed → absolute に変更 */
    inset: 0;
    background-image: url("../img/backgraoud.jpg");
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
    opacity: 0.12;
    pointer-events: none;
    z-index: -1;
}



/* --- Responsive --- */
@media (min-width: 1600px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 2000px) {
    .container {
        max-width: 1400px;
    }
}

@media (min-width: 1600px) {
    .footer {
        padding-top: 320px;
    }
}

@media (min-width: 2000px) {
    .footer {
        padding-top: 360px;
    }
}

/* 1920px以上は、あしらい全体を少し拡大 */
@media (min-width: 1920px) {
    .hero-deco--green {
        transform: translateY(6%) scale(1.06);
        transform-origin: left bottom;
    }

    .hero-deco--pink {
        transform: translateY(12%) scale(1.12);
        transform-origin: right bottom;
    }
}

@media (min-width: 2520px) {
    .hero-deco--green {
        transform: translateY(2%) scale(1.02);
    }

    .hero-deco--pink {
        transform: translateY(-20%) scale(0.8);
    }
}


@media (max-width: 900px) {
    .about-card {
        padding: 36px 22px 34px;
    }

    .about-card__vert {
        right: 18px;
        top: 86px;
    }

    .about-card__thumb--right {
        right: 18px;
        bottom: 22px;
        width: 56px;
        height: 56px;
    }

    .about-card__thumb--left {
        left: 18px;
        bottom: 18px;
        width: 56px;
        height: 56px;
    }

    .about-story__inner {
        min-height: 720px;
    }

    .about-story__center {
        top: 180px;
    }
}

@media (min-width: 768px) {
    .header-nav {
        position: fixed;
        /* ←これでFVを押さない */
        top: 18px;
        right: clamp(16px, 4vw, 140px);
        /* 画面幅で自然に */
        left: auto;
        /* 念のため */
        transform: none;
        /* ←重要（-50%やめる） */
        z-index: 1000;
        display: block;
        /* noneにしない */
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: transparent;
    }

    .header-nav ul {
        display: flex;
        gap: 48px;
        /* お好みで */
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

/* ===== Responsive ===== */
@media (max-width: 767px) {

    .main,
    .section--service__inner {
        padding-left: 0;
    }

    .section--service {
        position: relative;
    }

    .section--service::before {
        inset: auto;
        /* ← ★ここが超重要 */
        top: 0;
        bottom: 0;

        left: 50%;
        transform: translateX(-50%);
        width: 100vw;

        background-position: center top;
        background-size: cover;

        z-index: -1;
        opacity: .3;
    }

    .hero {
        height: auto;
    }


    .hero__img {
        content: url("../img/main-sp.png");
        /* ← スマホ用 */
        width: 100%;
        height: auto;
        object-fit: contain;
        /* ← 切らない */
    }

    .header-nav__list {
        gap: 24px;
    }

    .header-nav__list a {
        font-size: 14px;
    }

    .works__grid--web,
    .works__grid--banner,
    .works__grid--recipe {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 40px 0 20px;
        margin: 0 auto;
        position: relative;
    }

    .section__title {
        font-size: 32px;
        margin-top: 40px;
    }

    .section__sub {
        font-size: 14px;
    }

    .section__kicker {
        font-size: 18px;
        margin: 60px 0 60px;
    }

    .sub-header {
        display: flex;
        align-items: center;
        /* ← 高さを中央で揃える */
        justify-content: space-between;
        padding: 20px 16px;
        position: relative;
    }

    .works-pink2,
    .works-green3 {
        display: none;
    }

    #about .about-card {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 28px 20px;
    }

    .about__img {
        width: 120px;
        margin: 0 auto;
    }

    .about__text {
        text-align: left;
    }

    .about-bg {
        padding: 40px 20px;
    }

    .service-vert,
    .flow-vert {
        writing-mode: horizontal-tb;
        margin: 20px 0 0;
        text-align: right;
    }

    .flow__list {
        flex-direction: column;
        gap: 32px;
        padding-left: 0;
    }

    .flow__item:not(:last-child)::after {
        content: none;
    }

    .contact-inner {
        flex-direction: column;
        gap: 40px;
    }

    .contact-left,
    .contact-right {
        flex: 1;
    }

    .section--contact .section__lead {
        text-align: center;
    }

    .contact-line {
        width: 100%;
    }

    .deco {
        opacity: .5;
    }

    .deco--green6 {
        top: -200px;
        width: 120px;
    }

    .deco--pink9 {
        top: 400px;
        width: 120px;
    }

    .header-nav__list {
        display: flex;
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .header-nav__list a {
        font-size: 18px;
    }

    .footer__nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* ← 2列 */
        gap: 16px 8px;
        margin-bottom: 32px;
    }

    .footer__nav a {
        font-size: 14px;
        padding: 6px 0;
    }

    .footer__copy {
        font-size: 12px;
        opacity: .8;
    }

    .recipe-card__title {
        text-align: center;
    }

    .service-title__main {
        font-size: 32px;
        margin-top: 90px;
    }

    .service-title__sub {
        font-size: 14px;
    }

    .service-cards {
        display: block;
        /* ←これが重要 */
    }

    .service-card-design {
        width: calc(100% - 32px);
        /* 左右16px余白 */
        margin-top: -150px;
        padding: 32px 20px;
    }

    .service-card-recipe {
        width: calc(100% - 32px);
        margin: 0 auto;
        /* ←中央寄せ（これが効きます） */
        padding: 32px 20px;
        /* designに合わせたいなら */
        left: 0;
        right: 0;
    }

    .section--service__inner {
        padding: 0 16px;
        /* ←40pxをスマホでは小さくする */
    }

    /* 1) 親：static→absolute に戻して、PC同様に配置できるようにする */
    .service-vert {
        position: absolute;
        left: 100px;
        top: 120px;
        display: flex;
        gap: 10px;
        align-items: flex-start;
        writing-mode: initial;
        text-align: initial;
        margin: 0;
    }

    .flow-vert {
        position: absolute;
        left: 40px;
        top: -50px;
        display: flex;
        gap: 10px;
        align-items: flex-start;
        writing-mode: initial;
        text-align: initial;
        margin: 0;
    }

    .green1 {
        z-index: -1;
    }

    /* 2) 子：縦書きに戻す（これが本体） */
    .service-vert__jp,
    .service-vert__en,
    .flow-vert__jp,
    .flow-vert__en {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        letter-spacing: .12em;
    }

    /* 3) あしらい：表示されるように位置調整（SPは左に出過ぎやすい） */
    .service-vert .service-rings {
        position: absolute;
        left: -70px;
        /* ←PCの -120px だとSPで外に出がち。まず -70px くらいから */
        top: -50px;
        /* ←少し詰める */
        width: 120px;
        /* ←SPは少し小さく */
        z-index: -1;
        opacity: .9;
        pointer-events: none;
    }

    .about-card .about__img {
        width: 160px;
        max-width: none;
        margin-top: -20px;
    }

    #about .about__text .btn,
    #contact .contact-right .btn--primary {
        display: flex;
        /* ここを flex に */
        width: fit-content;
        /* ボタン幅を中身に合わせる */
        margin-left: auto;
        margin-right: auto;
    }

    .deco--green {
        width: 270px;
    }

    .deco--pink {
        width: 500px;
        top: -10px;
        right: -20px;
    }

    .green7,
    .pink7,
    .green1,
    .pink3,
    .deco--pink2,
    .deco--pink3,
    .deco--pink5,
    .deco--pink8,
    .deco--pink6,
    .deco--pink9,
    .flow-rings②,
    .deco--green2,
    .deco--green5,
    .deco--green4,
    .works-deco--p1,
    .works-green1,
    .works-green2,
    .works-pink3,
    .contact-green1,
    .contact-pink2 {
        display: none;
    }

    .flow-rings {
        top: 1500px;
        /* ← 例：PCより上に */
    }

    .deco--green7 {
        transform: none;
        right: 180px;
        top: -5px;
        width: 140px;
        opacity: .6;
        z-index: -1;
    }

    .footer {
        background-image: none;
        /* ← 背景画像を消す */
    }

    .site,
    .hero {
        height: auto;
        min-height: 0;
    }

    .hero__img {
        display: block;
    }

    .contact-hero {
        padding: 70px 0 100px;
    }

    .contact-form__radios {
        gap: 18px;
    }

    .contact-blob--gL {
        left: -220px;
    }

    .contact-blob--gR {
        right: -220px;
    }

    /* Contactを基準にする */
    .section--contact {
        position: relative;
        overflow: hidden;
        margin-top: 100px;
    }

    /* Contact内のあしらいはセクション基準でabsolute */
    .section--contact .deco {
        position: absolute;
        pointer-events: none;
        z-index: 0;
        /* -1だと消えることがあるので基本0推奨 */
    }

    /* 右上にふわっと置く（pink10） */
    .section--contact .deco--pink10 {
        top: -20px;
        right: 140px;
        left: auto;
        /* 念のため打ち消し */
        width: 180px;
        /* 好みで調整 */
        opacity: .35;
        /* 好みで */
        z-index: -1;
    }

    /* 左上に置く（green7） */
    .section--contact .deco--green7 {
        top: -10px;
        left: 5px;
        right: auto;
        /* 念のため打ち消し */
        width: 140px;
        /* 好みで調整 */
        opacity: .6;
        z-index: -1;
        transform: none;
        /* ←これ超重要（PCのtranslateX等を無効化） */
    }


    /* セクション余白を少し詰める */
    .about-hero {
        padding: 40px 16px 70px;
    }

    /* カード余白をスマホ向けに */
    .about-card {
        padding: 28px 18px 30px;
        border-radius: 20px;
    }

    /* ★上段：写真＋縦コピー → 縦並び */
    .about-card__top {
        flex-direction: column;
        gap: 18px;
        margin-bottom: 18px;
    }

    /* 写真サイズ調整 */
    .about-card__photo {
        width: 140px;
        margin-left: 0;
    }

    .about-card__img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 縦コピー周り：SPは中央に */
    .about-card__vert-wrap {
        gap: 10px;
    }

    /* ★PCで入れている右マージンがSPで悪さするのでリセット */
    .about-card__vert-line {
        margin-right: 0;
        height: 36px;
    }

    .about-card__vert-text {
        margin-right: 0;
        font-size: 14px;
        letter-spacing: .35em;
    }

    /* 下段の名前と本文 */
    .about-card__name {
        font-size: 16px;
    }

    .about-card__text {
        max-width: 100%;
        font-size: 13px;
        line-height: 2.0;
    }

    /* ★本文pに入っている margin-left:90px を解除（これがズレの原因になりやすい） */
    .about-card__text p {
        margin-left: 0;
        letter-spacing: .08em;
    }

    /* 左右サムネはスマホでは非表示 or 小さくする */
    .about-card__thumb {
        display: none;
    }


    /* =========================
     Service cards (SP)
  ========================= */
    .scroll-lines {
        display: none;
    }

    /* カードのパディングを縮める */
    .svc-card.card {
        padding: 28px 18px;
    }

    .svc-card__title {
        font-weight: 300;
    }


    .svc-card__titleArea {
        padding-left: 0;
        transform: none;
        text-align: center;
    }

    .svc-card__titleLine {
        display: block;
        width: 120px;
        height: 1px;
        background: #ED895E;
        margin: 14px auto 0;
    }

    /* 上段：アイコン + 文章 → 縦並び */
    .svc-card__top {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 22px;
    }

    .svc-card__icon {
        display: flex;
        justify-content: center;
        /* ← 横中央 */
    }

    .svc-card__icon img {
        width: 120px;
        margin-top: 30px;
    }

    /* 下段：強み / 点線 / リスト → 1列に */
    .svc-card__bottom {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-top: 22px;
    }

    .about-steps__center .scroll-lines {
        display: none;
    }

    .svc-card__badgeText {
        margin-top: 10px;
    }

    .svc-card__points {
        margin-top: 20px;
    }

    /* 2枚目：縦並びに変更 */
    .svc-card--recipe .svc2-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 中央寄せ */
        gap: 20px;
    }

    /* 右側アイコンを中央に */
    .svc-card--recipe .svc2-head__right {
        transform: none;
        justify-self: unset;
    }

    .svc-card--recipe .svc2-head__right img {
        width: 120px;
        display: block;
        margin: 0 auto;
    }

    /* テキストも中央寄せに */
    .svc-card--recipe .svc2-head__left {
        text-align: center;
    }

    /* ラインを中央に */
    .svc-card--recipe .svc-card__titleLine {
        margin: 14px auto 0;
    }

    .about-service__list {
        gap: 100px;
    }

    /* =========================
     Recipe card (SP)
  ========================= */
    .svc-card--recipe .svc2-head {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .svc-card--recipe .svc2-head__right {
        justify-self: start;
        transform: none;
    }

    .svc-card--recipe .svc2-head__right img {
        width: 120px;
    }


    /* =========================
     Flow steps (SP)
  ========================= */
    .story-vert {
        margin-top: -150px;
        right: 70px;
    }

    .about-steps {
        position: static;
        /* ← absolute解除 */
        transform: none;
        margin: 60px auto 0;
        /* 上に余白 */
        width: 100%;
    }

    .about-steps__item:nth-child(1) {
        margin-top: 280px;
        /* ← 好きな値に調整 */
    }

    .about-steps__list {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .about-steps__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 全体中央 */
        gap: 12px;
    }

    /* 上段（アイコン＋番号）を横並びにまとめる */
    .about-steps__iconWrap,
    .about-steps__center {
        display: inline-flex;
    }

    /* アイコンと番号を横並びに */
    .about-steps__item>.about-steps__iconWrap,
    .about-steps__item>.about-steps__center {
        margin: 0;
    }

    /* アイコン＋番号を包むように */
    .about-steps__item {
        align-items: center;
    }

    /* アイコン */
    .about-steps__icon {
        width: 60px;
    }

    /* 番号 */
    .about-steps__badge {
        width: 54px;
        height: 54px;
        font-size: 14px;
    }

    /* アイコンと番号の距離を詰める */
    .about-steps__iconWrap {
        margin-right: 8px;
        /* ← 距離調整ここ */
    }

    /* 本文は中央 */
    .about-steps__body {
        text-align: center;
        max-width: 320px;
    }

    .about-steps__dots {
        display: none;
    }

    .about-steps__center {
        width: auto;
        flex-direction: row;
        gap: 12px;
        align-items: center;
    }


    .about-steps__title {
        font-size: 18px;
    }

    .about-steps__text {
        font-size: 13px;
    }

    .about-hero__title {
        font-size: 35px;
        margin-top: -100px;
    }

    .footer::after {
        display: none;
    }

    /* 縦コピー：スマホだけ横書きにする */
    .about-card__vert-text {
        writing-mode: horizontal-tb;
        /* 横書き */
        text-orientation: mixed;
        /* 念のため */
        letter-spacing: .12em;
        /* 横書き用に調整 */
        line-height: 1.7;
        font-size: 14px;
        text-align: center;
        margin: 0;
    }

    /* 縦ライン：横書きに合わせて「横線」に変更 */
    .about-card__vert-line {
        width: 64px;
        height: 1px;
        margin-right: 0;
        /* PC用の右マージン解除 */
        background: #4A3A17;
        opacity: .4;
    }

    .about-card__vert-wrap {
        display: flex;
        flex-direction: column-reverse;
        /* ← これが重要 */
        align-items: center;
        gap: 10px;
    }

    .about-card__photo {
        width: 160px;
        /* 好きなサイズに調整 */
        margin: 0 auto;
        /* ← これが中央配置のポイント */
    }

    .about-card__img {
        width: 100%;
        height: auto;
        display: block;
    }

    .about-story {
        padding-bottom: 200px;
    }

    .about-bgWrap::before {
        display: none;
    }


    .flow__list span {
        display: block;
        width: 80px;
        height: 80px;
        line-height: 70px;
        border-radius: 50%;
        margin: 0 auto 10px;
    }

    .header-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }


    .banner-card {
        width: 80%;
        /* ← 少し小さくする */
        margin: 0 auto;
        /* ← 中央寄せ */
        display: block;
    }

    .service-title {
        margin-right: -10px;
        /* ← 右に余白を作る */
        margin-top: 80px;
    }


    /* ハンバーガー（ボタン） */
    .nav-toggle {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid rgba(237, 137, 94, .45);
        background: rgba(255, 255, 255, .85);
        cursor: pointer;
        position: fixed;
        top: 18px;
        right: 16px;
        z-index: 2147483647;
        pointer-events: auto;
    }

    .nav-toggle {
        display: grid !important;
    }

    .header-nav {
        position: fixed;
        inset: 0;
        background: rgba(245, 247, 247, .95);
        z-index: 2147483646;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 140px 20px 40px;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s ease;
    }

    /* スマホ：開いてる状態 */
    .header-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .header-nav__list {
        width: 100%;
        max-width: 420px;
        /* 任意：横幅を整える */
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

    .header-nav__list a {
        display: block;
        padding: 14px 0;
    }

    .header-deco--left {
        left: 0;
    }

    .header-deco--right {
        right: 0;
    }

    .site,
    .sub-header {
        overflow: visible !important;
    }

    .hero-deco--green {
        bottom: -8vw;
        width: 45vw;
        max-width: 420px;
        left: 0;
    }
}