/* =============================================================
   about_layout.css
   店主のこだわりページ専用レイアウト
   MakeShop アップロード先: /udnm/shared/css/about_layout.css
============================================================= */

/* ====================================
   RESET & BASE
==================================== */
.about-wrap *, .about-wrap *::before, .about-wrap *::after {
    box-sizing: border-box;
}
.about-wrap {
    background: #fcfaf2;
    color: #1c1917;
    font-family: 'Noto Serif JP', "Hiragino Mincho ProN", "Yu Mincho", serif;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 96px;
}
/* ====================================
   はみ出し防止 — flex子要素 & 縦書きコンテナ
==================================== */
.about-sec1-inner > *,
.about-sec3-inner > *,
.about-sec4-inner > * {
    min-width: 0;
    min-height: 0;
}
.about-sec1-text,
.about-sec2-text,
.about-sec3-text,
.about-sec4-text {
    overflow: hidden;
}
.about-sec1-imgwrap,
.about-sec4-imgwrap {
    flex-shrink: 0;
}
.about-wrap img {
    display: block;
    max-width: 100%;
}

/* ====================================
   FADE-IN ANIMATION (FadeIn コンポーネント再現)
==================================== */
.fi {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
                transform 0.8s cubic-bezier(.22,1,.36,1);
}
.fi.dir-up    { transform: translateY(40px); }
.fi.dir-down  { transform: translateY(-40px); }
.fi.dir-left  { transform: translateX(40px); }
.fi.dir-right { transform: translateX(-40px); }
.fi.visible   { opacity: 1; transform: none; }
.fi.d02 { transition-delay: 0.2s; }
.fi.d04 { transition-delay: 0.4s; }
.fi.d06 { transition-delay: 0.6s; }

/* ====================================
   HERO  (h-[80vh] min-h-[600px])
==================================== */
.about-hero {
    position: relative;
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.about-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.about-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}
.about-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 70% at 50% 45%,
            rgba(28,25,23,0.05) 0%,
            rgba(28,25,23,0.55) 100%),
        linear-gradient(180deg,
            rgba(28,25,23,0.35) 0%,
            rgba(28,25,23,0.05) 35%,
            rgba(28,25,23,0.05) 65%,
            rgba(28,25,23,0.55) 100%);
    z-index: 1;
}

/* ====================================
   HERO SLIDESHOW — Professional Ken Burns
   ─────────────────────────────────────
   総サイクル 20s / 4枚 / 各スライド 5s（クロスフェード 1s）
   s0  0 –  5s   息を呑む接近   ズームイン + 上昇パン
   s1  4 –  9s   引き潮の開放   ズームアウト + 左流れ
   s2  9 – 14s   水平の流れ     右→左ドリフト + わずかなズーム
   s3 14 – 20s   静寂の緊張     極めてゆっくりなズームイン
==================================== */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    will-change: opacity;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    will-change: transform;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.hero-slide.s0 img { animation-name: hKB0; }
.hero-slide.s1 img { animation-name: hKB1; }
.hero-slide.s2 img { animation-name: hKB2; }
.hero-slide.s3 img { animation-name: hKB3; }

/* s0: 息を呑む接近 — ズームイン＋上昇 */
@keyframes hKB0 {
    0%   {
        transform: scale(1.00) translate( 0.0%,  2.5%);
        animation-timing-function: cubic-bezier(0.08, 0, 0.30, 1);
    }
    25%  { transform: scale(1.13) translate(-1.5%, -0.5%); }
    100% { transform: scale(1.13) translate(-1.5%, -0.5%); }
}

/* s1: 引き潮の開放感 — ズームアウト＋左流れ */
@keyframes hKB1 {
    0%   { transform: scale(1.15) translate( 2.5%,  1.0%); }
    20%  {
        transform: scale(1.15) translate( 2.5%,  1.0%);
        animation-timing-function: cubic-bezier(0.40, 0, 0.10, 1);
    }
    45%  { transform: scale(1.02) translate(-0.5%, -1.5%); }
    100% { transform: scale(1.02) translate(-0.5%, -1.5%); }
}

/* s2: 水平の流れ — 右→左ドリフト */
@keyframes hKB2 {
    0%   { transform: scale(1.05) translate( 3.0%,  0.5%); }
    45%  {
        transform: scale(1.05) translate( 3.0%,  0.5%);
        animation-timing-function: linear;
    }
    70%  { transform: scale(1.11) translate(-2.0%,  0.5%); }
    100% { transform: scale(1.11) translate(-2.0%,  0.5%); }
}

/* s3: 静寂の緊張 — 極超スローズームイン */
@keyframes hKB3 {
    0%   { transform: scale(1.00) translate( 0.5%,  1.5%); }
    70%  {
        transform: scale(1.00) translate( 0.5%,  1.5%);
        animation-timing-function: cubic-bezier(0.05, 0, 0.45, 1);
    }
    100% { transform: scale(1.10) translate(-0.5%, -0.5%); }
}

/* クロスフェード */
.hero-slide.s0 { animation: hSlide0 20s infinite; }
.hero-slide.s1 { animation: hSlide1 20s infinite; }
.hero-slide.s2 { animation: hSlide2 20s infinite; }
.hero-slide.s3 { animation: hSlide3 20s infinite; }

@keyframes hSlide0 {
    0%   { opacity: 1; }
    15%  { opacity: 1; }
    20%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes hSlide1 {
    0%,  20% { opacity: 0; }
    25%      { opacity: 1; }
    40%      { opacity: 1; }
    45%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes hSlide2 {
    0%,  45% { opacity: 0; }
    50%      { opacity: 1; }
    65%      { opacity: 1; }
    70%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes hSlide3 {
    0%,  70% { opacity: 0; }
    75%      { opacity: 1; }
    95%      { opacity: 1; }
    100%     { opacity: 0; }
}

.about-hero-inner {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 32px 32px 160px; /* bottom: hook(84px) + scroll(~46px) + 余裕 */
    width: 100%;
    height: 100%;
}
.about-hero-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: clamp(36px, 6vw, 60px);
    font-weight: 700;
    letter-spacing: .15em;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 24px rgba(0,0,0,.4);
    margin: 0;
}
.about-hero-sub {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: clamp(14px, 2vw, 24px);
    color: rgba(255,255,255,.90);
    letter-spacing: .15em;
    line-height: 1.8;
    margin: 0;
}
.about-hero-hook {
    position: absolute;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(12px, 1.3vw, 15px);
    color: rgba(255,255,255,.95);
    letter-spacing: .2em;
    border-bottom: 1px solid rgba(200,168,130,.8);
    padding-bottom: 10px;
}
.about-hero-hook em {
    font-style: normal;
    color: #c8a882;
}

/* --- HERO スクロール誘導 --- */
.hero-scroll {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
    text-decoration: none;
    opacity: .75;
    transition: opacity .3s ease;
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll-label {
    font-size: 10px;
    letter-spacing: .35em;
    color: rgba(255,255,255,.65);
    font-family: 'Noto Serif JP', serif;
    text-transform: uppercase;
}
.hero-scroll-track {
    width: 1px;
    height: 40px;
    background: rgba(200,168,130,.25);
    position: relative;
    overflow: hidden;
}
.hero-scroll-drop {
    position: absolute;
    top: -14px;
    left: 0;
    width: 1px;
    height: 14px;
    background: linear-gradient(to bottom, transparent, #c8a882);
    animation: heroScrollDrop 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes heroScrollDrop {
    0%   { top: -14px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: 40px;  opacity: 0; }
}

.about-page-context {
    text-align: center;
    padding: 28px 16px 0;
    font-size: 12px;
    letter-spacing: .25em;
    color: #a8a29e;
    font-family: 'Noto Serif JP', serif;
}
.about-page-context span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.about-page-context span::before,
.about-page-context span::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: #d6d3d1;
}

/* ====================================
   CONTAINER
==================================== */
.about-container {
    max-width: 1280px;
    margin: -80px auto 0;
    padding: 0 16px;
    position: relative;
    z-index: 20;
}

/* ====================================
   SECTION 1 — コシへの誤解
==================================== */
.about-sec1 {
    background: #fff;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
    border-radius: 2px;
    margin-bottom: 96px;
    position: relative;
    overflow: hidden;
}
.about-sec1-corner {
    position: absolute;
    top: 0; right: 0;
    width: 128px; height: 128px;
    background: #f5f5f4;
    border-bottom-left-radius: 100%;
    margin-right: -64px;
    margin-top: -64px;
    opacity: .5;
    pointer-events: none;
}
.about-sec1-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
}
.about-sec1-imgwrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 400px;
    flex-shrink: 0;
}
.about-sec1-imgframe {
    position: absolute;
    inset: 0;
    background: #e7e5e4;
    padding: 8px;
}
.about-sec1-imgframe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes borderSpin {
    0%   { outline-color: #d6d3d1; }
    50%  { outline-color: #a8a29e; }
    100% { outline-color: #d6d3d1; }
}
.about-sec1-imgframe {
    animation: borderSpin 4s ease-in-out infinite;
}
.about-sec1-h2wrap {
    display: flex;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
}
.about-sec1-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #292524;
}
.about-sec1-h2 {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.3;
    white-space: nowrap;
    margin-left: 32px;
    margin-bottom: 0;
}
.about-sec1-body {
    font-size: clamp(14px, 1.5vw, 18px);
    letter-spacing: .1em;
    line-height: 1.9;
    color: #44403c;
    margin-left: 24px;
}
.about-sec1-body p {
    margin-bottom: 1em;
}
/* PC/スマホ本文の表示切り替え */
.about-sec1-body--sp { display: none; }
.about-sec1-body--pc { display: block; }
.about-sec1-em {
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 20px);
    color: #1c1917;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #d6d3d1;
    margin-left: 24px;
    writing-mode: vertical-rl;
}

/* ====================================
   SECTION 2 — 理想の麺とは
==================================== */
.about-sec2 {
    margin-bottom: 128px;
    position: relative;
    padding: 64px 0;
    overflow: hidden;
}
.about-sec2-wm {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 0;
    font-size: clamp(100px, 15vw, 160px);
    font-weight: 700;
    color: #e7e5e4;
    white-space: nowrap;
    opacity: .6;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}
.about-sec2-inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}
.about-sec2-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #292524;
    padding: 32px 0;
}
.about-sec2-h2 {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.3;
    white-space: nowrap;
    margin-left: 32px;
    margin-bottom: 0;
}
/* PC/スマホ本文の表示切り替え */
.about-sec2-body--sp { display: none; }
.about-sec2-body--pc { display: block; }
.about-sec2-body {
    font-size: clamp(14px, 1.5vw, 18px);
    letter-spacing: .1em;
    line-height: 1.9;
    color: #44403c;
    margin-left: 24px;
}
.about-sec2-body p {
    margin-bottom: 1em;
}
.about-sec2-em {
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 20px);
    color: #1c1917;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #d6d3d1;
    margin-left: 24px;
    writing-mode: vertical-rl;
}

/* ====================================
   SECTION 3 — 運命の出会いと師匠の教え
==================================== */
.about-sec3 {
    margin-bottom: 96px;
}
.about-sec3-inner {
    background: #1c1917;
    color: #e7e5e4;
    padding: 32px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
}
.about-sec3-h2wrap {
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    justify-content: flex-start;
}
.about-sec3-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #e7e5e4;
    padding: 32px 0;
}
/* PC/スマホ本文の表示切り替え */
.about-sec3-body--sp { display: none; }
.about-sec3-body--pc { display: block; }
.about-sec3-h2 {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff;
    margin-left: 32px;
    margin-bottom: 0;
}
.about-sec3-body {
    font-size: clamp(14px, 1.5vw, 18px);
    letter-spacing: .1em;
    line-height: 1.9;
    color: #e7e5e4;
    opacity: .9;
    margin-left: 24px;
}
.about-sec3-body p {
    margin-bottom: 1em;
}
.about-sec3-quote {
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 700;
    color: #fff;
    writing-mode: vertical-rl;
    margin: 0 16px;
}
.about-sec3-note {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    line-height: 2;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.15);
    margin-left: 24px;
    writing-mode: vertical-rl;
}
.about-sec3-imgwrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    flex-shrink: 0;
    aspect-ratio: 4 / 5;
}
.about-sec3-imgframe {
    position: absolute;
    inset: 0;
    background: #292524;
    padding: 8px;
    box-shadow: 0 16px 64px rgba(0,0,0,.5);
}
.about-sec3-imgframe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.5s ease;
}
.about-sec3-imgframe:hover img {
    filter: grayscale(0);
}
.about-sec3-caption {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: 11px;
    letter-spacing: .15em;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.about-sec3-caption::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #c8a882;
    flex-shrink: 0;
}

/* --- SEC3 スライドショー --- */
.about-sec3-imgframe {
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.about-sec3-imgframe.s3-active {
    opacity: 1;
    pointer-events: auto;
}
.sec3-dots {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    gap: 7px;
}
.sec3-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, transform 0.2s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.sec3-dot.s3-active {
    background: #c8a882;
    border-color: #c8a882;
    transform: scale(1.25);
}

/* ====================================
   SECTION 5 — こだわりの出汁
==================================== */
.about-sec4 {
    background: #fdf8f3;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
    border-radius: 2px;
    border-left: 6px solid #c8a882;
    margin-bottom: 96px;
    position: relative;
    overflow: hidden;
}
.about-sec4-wm {
    position: absolute;
    left: 20px;
    bottom: -20px;
    z-index: 0;
    font-size: clamp(80px, 12vw, 140px);
    font-weight: 700;
    color: #f0e8dc;
    opacity: .7;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}
.about-sec4-inner {
    position: relative;
    z-index: 1;
    /* モバイル: textcol(縦書き2カラム) → 画像 の縦積み */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.about-sec4-imgwrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 1.178;
    flex-shrink: 0;
    order: 1; /* モバイル: imgwrap は textcol の下 */
}
.about-sec4-textcol { order: -1; } /* モバイル: textcol が先(上) */
.about-sec4-imgframe {
    position: absolute;
    inset: 0;
    background: #e7e5e4;
    padding: 8px;
}
.about-sec4-imgframe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 縦書き2カラム（右: H2、左: キャッチ）— PC/タブレット・モバイル共通 */
.about-sec4-textcol {
    display: flex;
    flex-direction: row-reverse; /* 右: h2wrap、左: catchwrap */
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: 100%;
    color: #292524;
}
.about-sec4-h2wrap {
    writing-mode: vertical-rl;
    text-orientation: upright;
    flex-shrink: 0;
    border-left: 1px solid #ddd0be;
    padding-left: 20px;
}
.about-sec4-catchwrap {
    writing-mode: vertical-rl;
    text-orientation: upright;
    flex-shrink: 0;
    padding-right: 20px;
}
.about-sec4-h2 {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.3;
    color: #1c1917;
}
.about-sec4-catch {
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 700;
    letter-spacing: .12em;
    color: #5d4037;
    line-height: 1.8;
}
/* 横書き本文（全幅・inner の外側） */
.about-sec4-body-wrap {
    position: relative;
    z-index: 1;
    margin-top: 32px;
    width: 100%;
}
.about-sec4-body {
    font-size: clamp(14px, 1.5vw, 17px);
    letter-spacing: .08em;
    line-height: 1.95;
    color: #44403c;
}
.about-sec4-body p {
    margin-bottom: 0.9em;
}

/* ====================================
   SECTION 4 — 修行と故郷への想い
==================================== */
.about-sec-training {
    margin-bottom: 96px;
    position: relative;
    padding: 64px 0;
    overflow: hidden;
}
.about-sec-training-wm {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 0;
    font-size: clamp(100px, 15vw, 160px);
    font-weight: 700;
    color: #e7e5e4;
    white-space: nowrap;
    opacity: .5;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}
.about-sec-training-inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}
.about-sec-training-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #292524;
    padding: 32px 0;
}
.about-sec-training-h2 {
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.3;
    white-space: nowrap;
    margin-left: 32px;
    margin-bottom: 0;
}
.about-sec-training-body {
    font-size: clamp(14px, 1.5vw, 18px);
    letter-spacing: .1em;
    line-height: 2;
    color: #44403c;
    margin-left: 24px;
}
.about-sec-training-body p {
    margin-bottom: 1em;
}
.about-sec-training-quote {
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 700;
    color: #5d4037;
    margin-left: 24px;
    writing-mode: vertical-rl;
}
.about-sec-training-quote-attr {
    font-size: 13px;
    color: #78716c;
    letter-spacing: .1em;
    margin-left: 8px;
}
.about-sec-training-em {
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 20px);
    color: #1c1917;
    padding-top: 24px;
    border-top: 1px solid #d6d3d1;
    margin-left: 24px;
    writing-mode: vertical-rl;
}

/* ====================================
   SECTION 6 — 決意
==================================== */
.about-sec5 {
    background: #fff;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
    border-radius: 2px;
    border-top: 8px solid #292524;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}
.about-sec5-inner {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #292524;
    padding-top: 32px;
    border-top: 1px solid #e7e5e4;
    min-height: 500px;
}
.about-sec5-h2 {
    font-size: clamp(28px, 4vw, 42px); /* ms-h2-lg と統一 */
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.3;
    white-space: nowrap;
    margin-left: 40px;
    margin-bottom: 0;
}
/* PC/スマホ本文の表示切り替え */
.about-sec5-body--sp { display: none; }
.about-sec5-body--pc { display: block; }
.about-sec5-body {
    font-size: clamp(15px, 1.6vw, 20px);
    letter-spacing: .1em;
    line-height: 2.5;
    color: #44403c;
    margin-left: 24px;
}
.about-sec5-body p {
    margin-bottom: 1.5em;
}
.about-sec5-sign {
    writing-mode: vertical-rl;
    text-align: center;
    margin-top: 48px;
    margin-left: 24px;
}
.about-sec5-sign-label {
    font-size: 13px;
    color: #78716c;
    letter-spacing: .15em;
    display: block;
    margin-bottom: 16px;
}
.about-sec5-sign-name {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    letter-spacing: .2em;
    color: #1c1917;
    display: block;
}

/* ====================================
   橋渡し一文 + 矢印
==================================== */
.about-bridge {
    text-align: center;
    padding: 0 16px 72px;
    position: relative;
}
.about-bridge-text {
    display: inline-block;
    text-align: left;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(13px, 1.3vw, 15px);
    color: #44403c;
    letter-spacing: .12em;
    line-height: 1.9;
    padding: 20px 32px;
    border-top: 1px solid #c8c4c0;
    border-bottom: 1px solid #c8c4c0;
    position: relative;
}
.about-bridge-arrow {
    display: block;
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, #c8a882 0%, rgba(200,168,130,0.3) 100%);
    margin: 0 auto;
    position: relative;
    animation: bridgeArrowBob 2.4s ease-in-out infinite;
}
.about-bridge-arrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #c8a882;
}
@keyframes bridgeArrowBob {
    0%, 30%, 100% { transform: translateY(0);    opacity: 1;   }
    65%           { transform: translateY(8px);  opacity: .55; }
}

/* ====================================
   出汁3素材カード（インフォグラフィック）
==================================== */
.about-dashi-ingredients {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 48px 24px 0;
    flex-wrap: nowrap;
}
.about-dashi-card {
    flex: 1;
    min-width: 0;
    max-width: 220px;
    background: rgba(255,255,255,.7);
    border: 1px solid #e8ddd0;
    padding: 32px 16px 24px;
    text-align: center;
    position: relative;
}
.about-dashi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #c8a882;
}
.about-dashi-card-kanji {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 700;
    color: #c8a882;
    display: block;
    line-height: 1;
    margin-bottom: 12px;
    font-family: 'Noto Serif JP', serif;
    letter-spacing: 0;
}
.about-dashi-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #292524;
    letter-spacing: .12em;
    margin-bottom: 8px;
    font-family: 'Noto Serif JP', serif;
}
.about-dashi-card-desc {
    font-size: 12px;
    color: #78716c;
    letter-spacing: .08em;
    line-height: 1.8;
}
.about-dashi-plus {
    display: flex;
    align-items: center;
    color: #c8a882;
    font-size: 24px;
    font-weight: 300;
    align-self: center;
    flex-shrink: 0;
}

/* ====================================
   SECTION 7 — 店舗を広げない理由・お取り寄せ
==================================== */
.about-sec-shop {
    background: #fdf8f3;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
    border-radius: 2px;
    border-right: 6px solid #c8a882;
    margin-bottom: 96px;
    position: relative;
    overflow: hidden;
}
.about-sec-shop-wm {
    position: absolute;
    right: 20px;
    bottom: -20px;
    z-index: 0;
    font-size: clamp(80px, 12vw, 140px);
    font-weight: 700;
    color: #f0e8dc;
    opacity: .7;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}
.about-sec-shop-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
}
.about-sec-shop-imgwrap {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 400px;
    flex-shrink: 0;
}
.about-sec-shop-imgframe {
    position: absolute;
    inset: 0;
    background: #e7e5e4;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-sec-shop-imgframe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-sec-shop-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #292524;
    flex-shrink: 0;
}
.about-sec-shop-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    flex: 1;
    min-width: 0;
}
.about-sec-shop-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    writing-mode: horizontal-tb;
}
.about-sec-shop-h2 {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.3;
    white-space: nowrap;
    margin-left: 32px;
    margin-bottom: 0;
}
.about-sec-shop-catch {
    font-size: clamp(12px, 1.3vw, 15px);
    font-weight: 700;
    letter-spacing: .1em;
    color: #5d4037;
    margin-left: 24px;
    line-height: 1.8;
    border-top: 1px solid #ddd0be;
    padding-top: 20px;
    margin-top: 16px;
}
.about-sec-shop-h3 {
    font-size: clamp(14px, 1.6vw, 17px);
    font-weight: 700;
    letter-spacing: .12em;
    color: #292524;
    border-left: 3px solid #c8a882;
    padding-left: 10px;
    margin-bottom: 10px;
    margin-top: 24px;
}
.about-sec-shop-h3:first-child {
    margin-top: 0;
}
.about-sec-shop-body {
    font-size: clamp(13px, 1.4vw, 16px);
    letter-spacing: .08em;
    line-height: 1.9;
    color: #44403c;
}
.about-sec-shop-body p {
    margin-bottom: 0.6em;
}

/* ====================================
   MID CTA
==================================== */
.about-mid-cta {
    background: #1c1917;
    padding: 64px 24px;
    text-align: center;
    margin-bottom: 96px;
    position: relative;
    overflow: hidden;
}
.about-mid-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(200,168,130,.08) 0%, transparent 60%);
    pointer-events: none;
}
.about-mid-cta-label {
    font-size: 11px;
    letter-spacing: .3em;
    color: #c8a882;
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}
.about-mid-cta-lead {
    font-size: clamp(16px, 2vw, 22px);
    color: #f5f0eb;
    font-family: 'Noto Serif JP', serif;
    letter-spacing: .12em;
    line-height: 1.8;
    margin-bottom: 36px;
}
.about-mid-cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.about-mid-cta-btn-primary {
    display: inline-block;
    background: #c8a882;
    color: #1c1917 !important;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 700;
    letter-spacing: .14em;
    padding: 16px 48px;
    text-decoration: none;
    transition: background .2s, transform .2s;
}
.about-mid-cta-btn-primary:hover {
    background: #d4b896;
    transform: translateY(-3px);
}
.about-mid-cta-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #c8a882 !important;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 700;
    letter-spacing: .14em;
    padding: 15px 40px;
    text-decoration: none;
    border: 1px solid #c8a882;
    transition: background .2s, color .2s, transform .2s;
}
.about-mid-cta-btn-secondary:hover {
    background: rgba(200,168,130,.12);
    transform: translateY(-3px);
}

/* ====================================
   BOTTOM CTA
==================================== */
.about-cta {
    text-align: center;
    padding: 96px 16px 48px;
}
.about-cta-lead {
    font-size: clamp(14px, 1.5vw, 18px);
    color: #57534e;
    letter-spacing: .15em;
    margin-bottom: 24px;
    font-family: 'Noto Serif JP', serif;
}
.about-cta-btn {
    display: inline-block;
    background: #5d4037;
    color: #fff !important;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 700;
    letter-spacing: .14em;
    padding: 24px 64px;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(93,64,55,.35);
    border-radius: 0;
    transition: background .2s, transform .2s, box-shadow .2s;
}
.about-cta-btn:hover {
    background: #4e342e;
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(93,64,55,.45);
}
.about-cta-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.about-cta-btn-sub {
    display: inline-block;
    color: #5d4037 !important;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 700;
    letter-spacing: .12em;
    padding: 12px 40px;
    text-decoration: none;
    border: 1px solid #5d4037;
    transition: background .2s, color .2s;
}
.about-cta-btn-sub:hover {
    background: #5d4037;
    color: #fff !important;
}

/* SECTION 7 内 CTA ボタン */
.about-sec-shop-cta {
    writing-mode: horizontal-tb;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #d6d3d1;
}
.about-sec-shop-cta-btn {
    display: inline-block;
    background: #c8a882;
    color: #1c1917 !important;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(14px, 1.5vw, 17px);
    font-weight: 700;
    letter-spacing: .12em;
    padding: 16px 48px;
    text-decoration: none;
    transition: background .2s, transform .2s;
}
.about-sec-shop-cta-btn:hover {
    background: #b8916a;
    transform: translateY(-3px);
}

/* blockquote — 師匠の言葉 */
.about-sec3-master-quote {
    font-size: clamp(15px, 1.8vw, 19px);
    font-weight: 700;
    color: rgba(255,255,255,.85);
    writing-mode: vertical-rl;
    border-right: 3px solid #c8a882;
    padding-right: 16px;
    margin: 0 16px;
    font-style: normal;
    letter-spacing: .12em;
    line-height: 1.8;
}

/* ====================================
   RESPONSIVE
==================================== */
/* md: 768px 以上でサイドバイサイドレイアウト */
@media (min-width: 768px) {
    .about-sec1 { padding: 48px; }
    .about-sec1-inner {
        display: grid;
        grid-template-columns: 300px 1fr;
        grid-template-rows: 1fr;
        gap: 0 48px;
        align-items: stretch;
    }
    /* 左カラム: 画像 */
    .about-sec1-imgwrap {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
        width: 300px;
        height: auto;
        min-height: unset;
        aspect-ratio: unset;
        align-self: stretch;
    }
    /* 右カラム: H2 + 本文を縦書き横並び */
    .about-sec1-textcol {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: row-reverse; /* 右: H2、左: 本文 */
        align-items: stretch;
        gap: 32px;
    }
    .about-sec1-h2wrap {
        writing-mode: vertical-rl;
        text-orientation: upright;
        justify-content: flex-start;
        order: unset;
    }
    .about-sec1-textwrap {
        flex: 1;
        order: unset;
    }
    .about-sec3-inner {
        display: grid;
        grid-template-columns: 1fr 300px;
        grid-template-rows: 1fr;
        padding: 48px;
        gap: 0 48px;
        align-items: stretch;
    }
    /* 左カラム: H2 + 本文を縦書き横並び */
    .about-sec3-textcol {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: row-reverse; /* 右: H2、左: 本文 */
        align-items: stretch;
        gap: 32px;
    }
    .about-sec3-h2wrap  { order: unset; }
    .about-sec3-bodywrap { order: unset; flex: 1; }
    /* 右カラム: 画像 */
    .about-sec3-imgwrap { grid-column: 2; grid-row: 1; max-width: none; width: 300px; aspect-ratio: unset; order: unset; align-self: stretch; }
    .about-sec4 { padding: 48px 48px 48px 54px; }
    /* PC/タブレット: 2カラムグリッド（左: 画像、右: textcol縦書き横並び） */
    .about-sec4-inner {
        display: grid;
        grid-template-columns: 420px 1fr;
        align-items: start;
        gap: 0 48px;
    }
    .about-sec4-imgwrap { grid-column: 1; grid-row: 1; order: unset; max-width: none; width: 420px; height: auto; aspect-ratio: 1.178; align-self: start; }
    .about-sec4-textcol { grid-column: 2; grid-row: 1; order: unset; justify-content: flex-start; gap: 24px; align-items: stretch; }
    .about-sec4-h2wrap { align-self: stretch; }
    .about-sec4-catchwrap { align-self: stretch; }
    .about-sec5 { padding: 64px; }
    .about-sec5-inner { padding-top: 64px; }
    .about-sec5-h2 { margin-left: 64px; }
    .about-sec-shop { padding: 48px 48px 48px 42px; }
    .about-sec-shop-inner { flex-direction: row; gap: 64px; }
    .about-sec-shop-imgwrap { order: -1; }
    .about-sec-shop-content { order: 1; }
}

/* モバイル調整 (max-width: 767px) */
@media (max-width: 767px) {
    /*
     * HEROモバイル:
     * iOS Safari バグ対策: writing-mode:vertical-rl の要素を flex/inline-block で
     * 自動サイズ計算させると幅が0になり重なる。
     * → flex itemに明示的なwidthを与えて強制的にサイズを確定させる。
     *   (h1: 36px font × 1.2 line-height × 2列 ≈ 87px → 90px)
     *   (sub: 14px font × 1.8 line-height × 3列 ≈ 76px → 80px)
     */
    .about-hero-inner {
        align-items: flex-start;
        padding: 64px 16px 130px; /* bottom: hookとscrollが重ならないよう確保 */
    }
    .about-hero-inner > .fi:nth-child(1) {
        width: 90px;
        flex-shrink: 0;
    }
    .about-hero-inner > .fi:nth-child(2) {
        width: 80px;
        flex-shrink: 0;
    }
    .about-hero-title { font-size: 36px; }
    .about-hero-sub { font-size: 14px; }
    .about-hero-hook {
        white-space: nowrap;
        font-size: 10px;
        letter-spacing: .05em;
        transform: translateX(-50%) scaleX(0.9);
    }
    .about-container { margin-top: -48px; }
    .about-sec1-imgwrap { height: 280px; }
    .about-sec-training-h2 { margin-left: 16px; font-size: 22px; }
    .about-sec2-h2, .about-sec5-h2 { font-size: 22px; }
    .about-sec1-body, .about-sec2-body, .about-sec3-body, .about-sec5-body,
    .about-sec-training-body { margin-left: 12px; font-size: 14px; }
    .about-sec-training-quote { margin-left: 16px; font-size: 16px; }
    .about-sec-training-em { margin-left: 12px; font-size: 14px; }
    .about-sec4-imgwrap { height: auto; }
    .about-sec4-catch { font-size: 12px; }
    .about-sec4-h2 { font-size: 20px; }
    .about-sec4 { border-left: 4px solid #c8a882; padding-left: 28px; }
    .about-sec2 { padding: 32px 0; margin-bottom: 64px; }
    .about-sec2-text { padding: 12px 0; }
    .about-sec2-wm { font-size: 80px; }
    .about-cta-btn { padding: 20px 40px; font-size: 16px; }
    .about-sec-shop { padding: 24px 20px 24px 14px; border-right: 4px solid #c8a882; }
    .about-sec-shop-imgwrap { height: auto; aspect-ratio: 6/5; max-width: 100%; }
    .about-sec-shop-content { flex-direction: column; gap: 20px; }
    .about-sec-shop-text { align-self: flex-start; }
    .about-sec-shop-h2 { font-size: 20px; margin-left: 20px; }
    .about-sec-shop-catch { font-size: 12px; margin-left: 16px; padding-top: 14px; }
    .about-sec-shop-h3 { font-size: 14px; margin-top: 16px; }
    .about-sec-shop-body { font-size: 13px; }
    .about-sec-shop-cta-btn { display: block; text-align: center; padding: 14px 24px; font-size: 14px; }
    .about-dashi-ingredients { gap: 6px; padding: 28px 0 0; }
    .about-dashi-card { padding: 16px 6px 12px; }
    .about-dashi-card-kanji { font-size: 26px; margin-bottom: 6px; }
    .about-dashi-card-name { font-size: 12px; margin-bottom: 4px; letter-spacing: 0.05em; }
    .about-dashi-card-desc { font-size: 10px; line-height: 1.6; }
    .about-dashi-plus { font-size: 14px; flex-shrink: 0; }

    /* Section 1: モバイル — H2縦書き上部 → 画像 → 本文横書き */
    .about-sec1-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    /* ラッパーを透明化: 子要素が about-sec1-inner の flex に直接参加 */
    .about-sec1-textcol {
        display: contents;
    }
    .about-sec1-h2wrap {
        order: 1;
        writing-mode: vertical-rl;
        text-orientation: upright;
        display: flex;
        justify-content: center;
    }
    .about-sec1-imgwrap {
        order: 2;
    }
    .about-sec1-textwrap {
        order: 3;
        width: 100%;
    }
    .about-sec1-h2 {
        writing-mode: vertical-rl;
        text-orientation: upright;
        margin-left: 0;
        margin-bottom: 0;
        white-space: nowrap;
        font-size: 22px;
    }
    .about-sec1-text {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        overflow: visible;
    }
    .about-sec1-body {
        margin-left: 0;
        margin-top: 0;
        font-size: 14px;
    }
    .about-sec1-body--pc { display: none; }
    .about-sec1-body--sp { display: block; }
    .about-sec1-em {
        writing-mode: horizontal-tb;
        margin-left: 0;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #d6d3d1;
        border-left: none;
    }

    /* Section 3: モバイル — H2縦書き上部 → 画像 → 本文横書き */
    .about-sec3-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 32px 24px;
    }
    /* ラッパーを透明化: 子要素が about-sec3-inner の flex に直接参加 */
    .about-sec3-textcol {
        display: contents;
    }
    .about-sec3-h2wrap {
        order: 1;
        writing-mode: vertical-rl;
        text-orientation: upright;
        display: flex;
        justify-content: center;
    }
    .about-sec3-imgwrap {
        order: 2;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }
    .about-sec3-bodywrap {
        order: 3;
        width: 100%;
    }
    .about-sec3-h2 {
        writing-mode: vertical-rl;
        text-orientation: upright;
        margin-left: 0;
        margin-bottom: 0;
        white-space: nowrap;
        font-size: 22px;
    }
    .about-sec3-text {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        overflow: visible;
        padding: 0;
    }
    .about-sec3-quote {
        writing-mode: horizontal-tb;
        margin: 16px 0;
        font-size: 16px;
    }
    .about-sec3-body {
        margin-left: 0;
        font-size: 14px;
    }
    .about-sec3-body--pc { display: none; }
    .about-sec3-body--sp { display: block; }
    .about-sec2-body--pc { display: none; }
    .about-sec2-body--sp { display: block; }
    .about-sec5-body--pc { display: none; }
    .about-sec5-body--sp { display: block; }

    /* Section 2: H2縦書き右上・本文/em 縦書き段組み */
    .about-sec2-inner {
        width: 100%;
        padding: 0 24px;
    }
    /* flexで中央寄せ: bodyは横書きなのでSafari writing-mode+flexバグは起きない */
    .about-sec2-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        writing-mode: horizontal-tb;
        text-orientation: initial;
        overflow: visible;
        width: 100%;
    }
    .about-sec2-h2 {
        writing-mode: vertical-rl;
        text-orientation: upright;
        align-self: center;
        margin-left: 0;
        margin-bottom: 24px;
        white-space: nowrap;
        font-size: clamp(24px, 6.5vw, 30px);
    }
    /* 本文: モバイルは横書き（--spのみ表示、display:blockはここで上書きしない） */
    .about-sec2-body--sp {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        margin-left: 0;
        width: 100%;
        overflow: visible;
    }
    /* em: 縦書き・CSS段組み・区切り線付き */
    .about-sec2-em {
        writing-mode: vertical-rl;
        text-orientation: upright;
        column-count: 2;
        column-gap: 12px;
        margin-left: 0;
        width: 100%;
        height: auto;
        overflow: visible;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #d6d3d1;
        border-left: none;
    }

    /* Section 6（決意）: flexで中央寄せ: bodyは横書きなのでSafari writing-mode+flexバグは起きない */
    .about-sec5-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        writing-mode: horizontal-tb;
        text-orientation: initial;
        min-height: unset;
        padding: 0 24px;
        border-top: none;
    }
    .about-sec5-h2 {
        writing-mode: vertical-rl;
        text-orientation: upright;
        align-self: center;
        margin-left: 0;
        margin-bottom: 24px;
        font-size: clamp(28px, 8vw, 36px);
        white-space: nowrap;
    }
    .about-sec5-body--sp {
        writing-mode: horizontal-tb;
        text-orientation: initial;
        margin-left: 0;
        width: 100%;
        font-size: 14px;
        margin-bottom: 24px;
        text-align: left;
    }
    .about-sec5-sign {
        /* サインは横書きで中央揃え（縦書きでの重なりを解消） */
        writing-mode: horizontal-tb;
        text-orientation: initial;
        text-align: center;
        margin-top: 24px !important;
    }
    .about-sec5-sign-label {
        display: block;
        text-align: center;
        margin-bottom: 8px;
    }
    .about-sec5-sign-name {
        display: block;
        text-align: center;
        font-size: 24px;
    }
}

/* タブレット調整 (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .about-sec1 { padding: 32px; }
    .about-sec1-inner { grid-template-columns: 300px 1fr; gap: 0 32px; }
    .about-sec1-textcol { gap: 24px; }
    .about-sec3-inner { grid-template-columns: 1fr 300px; padding: 32px; gap: 0 32px; }
    .about-sec3-textcol { gap: 24px; }
    .about-sec3-imgwrap { width: 300px; }
    .about-sec4 { padding: 32px; }
    .about-sec4-inner { grid-template-columns: 380px 1fr; gap: 0 32px; }
    .about-sec4-imgwrap { width: 380px; }
    .about-sec4-textcol { gap: 20px; }
    .about-sec-shop-inner { flex-direction: column !important; gap: 32px; }
    .about-sec-shop-imgwrap { order: 0 !important; max-width: 100%; height: 280px; }
    .about-sec-shop-content { order: 0 !important; }
}

/* PC lg 調整 (1024px – 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .about-container { padding: 0 8px; }
    .about-sec1 { padding: 32px; }
    .about-sec1-inner { grid-template-columns: 300px 1fr; gap: 0 40px; }
    .about-sec1-textcol { gap: 28px; }
    .about-sec3-inner { grid-template-columns: 1fr 320px; padding: 40px; gap: 0 40px; }
    .about-sec3-textcol { gap: 28px; }
    .about-sec3-imgwrap { width: 320px; }
    .about-sec4 { padding: 32px 32px 32px 38px; }
    .about-sec4-inner { grid-template-columns: 400px 1fr; gap: 0 32px; }
    .about-sec4-imgwrap { width: 400px; }
    .about-sec4-textcol { gap: 20px; }
    .about-sec-shop-inner { flex-direction: column !important; gap: 32px; }
    .about-sec-shop-imgwrap { order: 0 !important; max-width: 100%; height: 280px; }
    .about-sec-shop-content { order: 0 !important; }
    .about-hero-hook { font-size: 12px; }
}

/* PC xl 調整 (1280px 以上) */
@media (min-width: 1280px) {
    .about-sec3-inner { grid-template-columns: 1fr 400px; padding: 64px; gap: 0 64px; }
    .about-sec3-textcol { gap: 40px; }
    .about-sec3-imgwrap { width: 400px; }
    .about-sec-shop-inner { flex-direction: column; gap: 48px; }
    .about-sec-shop-imgwrap { order: 0; max-width: 560px; height: 320px; }
    .about-sec-shop-content { order: 0; }
    .about-sec4 { padding: 40px 40px 40px 46px; }
    .about-sec4-inner { grid-template-columns: 480px 1fr; gap: 0 48px; }
    .about-sec4-imgwrap { width: 480px; }
    .about-sec4-textcol { gap: 28px; }
}