/* ========================================
   有限会社第一印刷 - index.css（トップページ）
======================================== */

/* ========================================
   ① FV
======================================== */
.fv {
    position: relative;
    height: var(--fv-height, 100svh);
    min-height: 667px;
    display: flex;
    align-items: stretch;
    padding: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 201, 60, 0.18), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(31, 166, 110, 0.12), transparent 45%),
        var(--color-bg);
    overflow: hidden;
}

@media (min-width: 768px) {
    .fv {
        min-height: 812px;
    }
}

.fv__deco {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.fv__deco--dot1 {
    width: 16px; height: 16px;
    background: var(--color-primary);
    top: 20%; left: 8%;
    opacity: 0.5;
}
.fv__deco--dot2 {
    width: 24px; height: 24px;
    background: var(--color-cyan);
    bottom: 18%; right: 12%;
    opacity: 0.4;
}
.fv__deco--circle {
    width: 180px; height: 180px;
    border: 12px solid var(--color-yellow);
    opacity: 0.25;
    top: -40px; right: -40px;
}

.fv__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.fv__lead {
    display: inline-block;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-primary);
    background-color: var(--color-white);
    padding: 0.375rem 1rem;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
}
.fv__catch {
    font-size: clamp(2.25rem, 9vw, 3.75rem);
    font-weight: 900;
    line-height: 1.3;
    color: var(--color-title);
    letter-spacing: 0.01em;
    margin-bottom: 1.5rem;
}
.fv__catch-line {
    display: block;
}
.fv__catch-accent {
    font-style: normal;
    color: var(--color-primary);
    position: relative;
}
.fv__catch-accent::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0.05em;
    width: 100%; height: 0.25em;
    background: var(--color-yellow);
    z-index: -1;
}
.fv__sub {
    color: var(--color-text);
    margin-bottom: 2rem;
    font-weight: 500;
}
.fv__sub strong {
    color: var(--color-cyan);
    font-weight: 900;
}
.fv__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* FVビジュアル：FV枠（画面いっぱい）を画像が満たす。
   額縁（四隅トンボ＋CMYKバー）は画像の上に重ねて残す。 */
.fv__visual {
    width: 100%;
    height: 100%;
}
.fv__visual-frame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 5.25rem 2rem 6.5rem;
    background-color: var(--color-primary);
    overflow: hidden;
}
/* ※ iPad/iOS Safari は repeat 背景だと background-blend-mode を無視するため、
   柄を ::before に分離し mix-blend-mode で下地の緑に重ねる。 */
.fv__visual-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/repeat-bg-02.webp');
    background-repeat: repeat;
    background-size: 400px auto;
    mix-blend-mode: multiply;
}
/* 額縁の子要素（トンボ・画像・CMYKバー）は柄の上に */
.fv__visual-frame > * {
    position: relative;
    z-index: 1;
}

/* 四隅のトンボ（コーナートンボ）・緑額縁の上なので白線
   --------------------------------------------------------------------
   現在は【シンプル版】＝1本のL字（border で描画）。
   後で本式の二重線トンボ（同形SVG）に差し替えたいときは、
   HTMLの各 .fv__trim を
     <svg class="fv__trim fv__trim--tl" viewBox="0 0 120 120" aria-hidden="true">
       <path d="M20 0 V80 H100 M40 20 V100 H120" fill="none" stroke="currentColor" stroke-width="2"/>
     </svg>
   に置き換え、各隅の border 2本指定を transform: rotate(...) に戻す。
   （回転角：tl=270deg / tr=0deg / bl=180deg / br=90deg）
   位置（top/left の calc）・サイズは共通なので、描画方法だけ切り替えればよい。
   -------------------------------------------------------------------- */
.fv__trim {
    position: absolute;
    width: 18px;
    height: 18px;
    color: var(--color-white);
    pointer-events: none;
    opacity: 0.9;
    z-index: 2;
}
/* 【シンプル版】1本のL字（border 描画・現在有効）
   ※ ステージ（.fv__visual-stage）の四隅・枠外に出す。画像の clip-path の外なので切れない。 */
.fv__trim--tl {
    top: -14px; left: -14px;
    border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor;
}
.fv__trim--tr {
    top: -14px; right: -14px;
    border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
}
.fv__trim--bl {
    bottom: -14px; left: -14px;
    border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor;
}
.fv__trim--br {
    bottom: -14px; right: -14px;
    border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
}
@media (min-width: 768px) {
    .fv__trim {
        width: 22px;
        height: 22px;
    }
}

/* 画像とトンボを束ねるステージ（最大1600px・中央寄せ）。
   トンボはこのステージの四隅・枠外に出す（画像の clip-path の外なので切れない）。 */
.fv__visual-stage {
    position: relative;
    width: 100%;
    max-width: 1600px;
    height: 100%;
    margin: 0 auto;
}
.fv__visual-img {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg-light);
}
.fv__visual-img img:not(.fv__visual-logo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* FV画像スライドショー（複数枚を重ねてフェード切り替え） */
.fv__slides {
    position: relative;
    width: 100%;
    height: 100%;
}
.fv__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.fv__slide.is-active {
    opacity: 1;
}
/* 画像中央に重ねる白ロゴ */
.fv__visual-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(160px, 33%, 360px) !important;
    height: auto !important;
    object-fit: contain !important;
    z-index: 2;
    pointer-events: none;
}

/* CMYKカラーバー（刷見本の色帯のような・画像エリアの左下に重ねる） */
.fv__cmyk {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    gap: 0;
    width: 96px;
    height: 8px;
    z-index: 2;
}
.fv__cmyk-bar {
    flex: 1;
}
/* サイトの4色をベースに、緑額縁の上で締まるよう
   緑系1本を白に置き換え（グリーン・ティール・白・イエロー） */
.fv__cmyk-bar--c { background: var(--color-primary); }
.fv__cmyk-bar--m { background: var(--color-cyan); }
.fv__cmyk-bar--y { background: var(--color-white); }
.fv__cmyk-bar--k { background: var(--color-yellow); }

.fv__scroll {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 1;
}
.fv__scroll-text {
    font-family: var(--font-en);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-white);
}
/* スクロール装飾：トンボ（見当線）風。
   白の見当線の上下端に短い直交マークを出し、
   線の中を黄色インクが下に流れる。 */
.fv__scroll-line {
    width: 1px;
    height: 48px;
    background: var(--color-white);
    position: relative;
    overflow: visible;
}
/* 上端のトンボ（水平の見当線・白） */
.fv__scroll-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 1px;
    background: var(--color-white);
    opacity: 0.9;
}
/* 下端のトンボ（水平の見当線・白） */
.fv__scroll-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 1px;
    background: var(--color-white);
    opacity: 0.9;
}
/* 線の中を下に流れる黄色インク（内側の要素で描画）
   線は overflow:visible だが、インク自身のクリップで
   見当線の縦範囲内だけ見えるようにする。 */
.fv__scroll-ink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.fv__scroll-ink::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--color-yellow);
    animation: scrollInk 1.8s ease-in-out infinite;
}
@keyframes scrollInk {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
}

/* 768px以上：左右の緑額縁を4remに広げる。上は5.25rem、下は6.5remを維持。
   ※ トンボ・CMYKバーは画像エリア基準になったため、额縁paddingに依存した再配置は不要。 */
@media (min-width: 768px) {
    .fv__visual-frame {
        padding: 5.25rem 4rem 6.5rem;
    }
}

/* 1024px以上：上・左・右の緑額縁を6remに広げる。下は6.5remを維持。 */
@media (min-width: 1024px) {
    .fv__visual-frame {
        padding: 6rem 6rem 6.5rem;
    }
}

/* ========================================
   ② お知らせ
======================================== */
.sec-news__inner {
    max-width: var(--section-width-lg);
    margin: 0 auto;
}
.news-list {
    border-top: 2px dotted var(--color-border);
}
.news-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 1.125rem 0.5rem;
    border-bottom: 2px dotted var(--color-border);
    transition: background-color 0.2s ease;
}
.news-list__item:hover {
    background-color: var(--color-bg-light);
}
.news-list__date {
    font-family: var(--font-en);
    font-weight: 600;
    color: var(--color-text-light);
    font-size: 0.875rem;
}
.news-list__cat {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-cyan);
    padding: 0.125rem 0.75rem;
    border-radius: var(--radius-pill);
}
.news-list__text {
    flex: 1 1 100%;
    font-weight: 500;
}
@media (min-width: 768px) {
    .news-list__text {
        flex: 1;
    }
}

/* ========================================
   ③ 会社案内リード
======================================== */
/* トップ独自セクションのタイトルブロック余白（1024px未満2rem／以上2.5rem） */
.sec-about .sec-heading,
.sec-service .sec-heading {
    margin-bottom: 2rem;
}
@media (min-width: 1024px) {
    .sec-about .sec-heading,
    .sec-service .sec-heading {
        margin-bottom: 2.5rem;
    }
}
/* about / products セクションの上下パディング：
   576px未満は4.5rem、576px以上は5.5rem（=88px）。 */
.sec-about,
.sec-service {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
@media (min-width: 576px) {
    .sec-about,
    .sec-service {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}
@media (min-width: 1200px) {
    .sec-about,
    .sec-service {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
.sec-about {
    background-color: var(--color-bg-light);
}
.sec-about__inner {
    max-width: 576px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .sec-about__inner {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .sec-about__inner {
        max-width: 1200px;
    }
}
.sec-about__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}
/* 1024px未満：テキストを上、画像を下に */
.sec-about__image {
    order: 2;
}
.sec-about__content {
    order: 1;
}
@media (min-width: 1024px) {
    .sec-about__body {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 3.5rem;
        align-items: stretch;
    }
    /* 1024px以上：テキスト左・画像右 */
    .sec-about__content {
        order: 1;
    }
    .sec-about__image {
        order: 2;
        height: 100%;
    }
    /* 1024px以上：アスペクト比を解除してテキスト列の高さに合わせる */
    .sec-about__image-main {
        height: 100%;
        aspect-ratio: auto;
    }
}
.sec-about__image {
    position: relative;
}
.sec-about__image-main {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
}
/* 576px以上：16/11 */
@media (min-width: 576px) {
    .sec-about__image-main {
        aspect-ratio: 16 / 11;
    }
}
/* 768px以上：16/10 */
@media (min-width: 768px) {
    .sec-about__image-main {
        aspect-ratio: 16 / 10;
    }
}
.sec-about__badge {
    position: absolute;
    right: -1rem;
    bottom: -1rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    width: 104px;
    height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 初期：透明・大きめ・回転多めで待機。
       is-stamped で本来の位置（rotate(-8deg)・等倍）にスタンプ着地。 */
    opacity: 0;
    transform: rotate(-32deg) scale(1.5);
}
.sec-about__badge.is-stamped {
    animation: badgeStamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes badgeStamp {
    0% {
        opacity: 0;
        transform: rotate(-32deg) scale(1.5);
    }
    60% {
        opacity: 1;
        transform: rotate(-4deg) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: rotate(-8deg) scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sec-about__badge {
        opacity: 1;
        transform: rotate(-8deg) scale(1);
    }
    .sec-about__badge.is-stamped {
        animation: none;
    }
}
/* 576px以上：バッジを元のサイズ（120px）に */
@media (min-width: 576px) {
    .sec-about__badge {
        width: 120px;
        height: 120px;
    }
}
.sec-about__badge-num {
    font-weight: 900;
    font-size: 0.975rem;
}
.sec-about__badge-text {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 0.25rem;
}
/* 576px以上：補助テキストを元のサイズ（0.6875rem）に */
@media (min-width: 576px) {
    .sec-about__badge-text {
        font-size: 0.6875rem;
    }
}
.sec-about__catch {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    font-weight: 900;
    line-height: 1.5;
    color: var(--color-title);
    margin-bottom: 1.25rem;
}
.sec-about__lead {
    font-weight: 500;
    margin-bottom: 1.25rem;
}
.sec-about__text {
    margin-bottom: 2rem;
}
.sec-about__text strong {
    color: var(--color-cyan);
    font-weight: 900;
}
.sec-about__more {
    text-align: right;
}

/* ========================================
   ③ 事業内容メイン（全幅・左画像／右テキスト・緑背景）
======================================== */
/* sectionのデフォルト余白を打ち消して全幅に */
.sec-service-main {
    padding: 0;
    overflow: hidden;
}
/* モバイル：テキスト上・画像下の縦積み */
.sec-service-main__hero {
    display: flex;
    flex-direction: column;
    background-color: var(--color-primary);
}
.sec-service-main__image {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: row;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}
.sec-service-main__image img {
    flex: 1 1 0;
    width: 0;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sec-service-main__content {
    order: 1;
    position: relative;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 4.5rem var(--section-pad-x);
}
/* 緑地に柄を乗算（::beforeに分離し opacity で元の緑をある程度保つ）
   ※ iPad/iOS Safari は repeat 背景だと background-blend-mode を無視するため、
     mix-blend-mode（要素間合成）で下地の緑（本体の background-color）に重ねる。 */
.sec-service-main__content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/repeat-bg-02.webp');
    background-repeat: repeat;
    background-size: 400px auto;
    mix-blend-mode: multiply;
    opacity: 0.8;
}
.sec-service-main__content-inner {
    position: relative;
    z-index: 1;
    max-width: 576px;
    margin: 0 auto;
}
/* テキストブロックの上下パディング：576px以上は5.5rem（576px未満は4.5rem）。 */
@media (min-width: 576px) {
    .sec-service-main__content {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}
@media (min-width: 768px) {
    .sec-service-main__content-inner {
        max-width: 768px;
    }
}
/* 見出し：緑背景の上なので白抜き・白文字に（円は共通 .sec-heading__en::before を使用） */
.sec-service-main .sec-heading {
    margin-bottom: 2rem;
}
.sec-service-main .sec-heading__en {
    display: inline-block;
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    padding: 0.2em 0.6em;
    border-radius: var(--radius-xs);
}
.sec-service-main .sec-heading__ja {
    color: var(--color-white);
}
.sec-service-main__catch {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 900;
    line-height: 1.5;
    color: var(--color-white);
    letter-spacing: 0.02em;
    margin-top: 0.25rem;
    margin-bottom: 0;
}
.sec-service-main__lead {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    margin-bottom: var(--spacing-lg);
}
.sec-service-main__more {
    text-align: right;
}
/* ボタン：緑背景の上なので白ボタンに */
.sec-service-main__more .btn--primary {
    background-color: var(--color-white);
    color: var(--color-primary);
    box-shadow: none;
}
.sec-service-main__more .btn--primary:hover {
    filter: brightness(0.95);
}

/* 1024px以上：左画像・右テキストの横並び */
@media (min-width: 1024px) {
    .sec-service-main__hero {
        flex-direction: row;
        align-items: stretch;
    }
    .sec-service-main__image {
        order: 1;
        flex: 1;
        min-height: 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }
    .sec-service-main__image img {
        flex: 1 1 0;
        width: 100%;
        height: 0;
        min-height: 0;
        aspect-ratio: auto;
        object-fit: cover;
    }
    .sec-service-main__content {
        order: 2;
        flex: 0 0 50%;
        display: flex;
        align-items: center;
        padding: 6.5rem 4rem;
    }
    .sec-service-main__content-inner {
        max-width: 1200px;
        margin: 0;
    }
    .sec-service-main .sec-heading {
        margin-bottom: 2.5rem;
    }
}

/* 1200px以上：テキストブロックの上下パディングを128pxに、左右を元の5.5remに戻す */
@media (min-width: 1200px) {
    .sec-service-main__content {
        padding-top: var(--spacing-3xl);
        padding-bottom: var(--spacing-3xl);
        padding-left: var(--spacing-xxl);
        padding-right: var(--spacing-xxl);
    }
}

/* 1440px以上：テキスト4・画像6の比率に */
@media (min-width: 1440px) {
    .sec-service-main__content {
        flex: 0 0 40%;
    }
    .sec-service-main__image {
        flex: 0 0 60%;
    }
}

/* 1600px以上：画像2枚を横並び（左右half&half）に */
@media (min-width: 1600px) {
    .sec-service-main__image {
        flex-direction: row;
    }
    .sec-service-main__image img {
        width: 0;
        height: 100%;
    }
}

/* ========================================
   ④ 事業内容（A判分割レイアウト）
   全体を 1.414:1 の横長にし、半分ずつの入れ子で
   A2→A8 と分割していく。各マスは自動的にA判比になる。
======================================== */
/* 背景：repeat-bg-01 を 400px auto でリピートし、白地と乗算合成
   ※ iPad/iOS Safari は repeat 背景だと background-blend-mode を無視するため、
     柄を ::before に分離し mix-blend-mode で白地に重ねる。 */
.sec-service {
    position: relative;
    background-color: var(--color-white);
}
.sec-service::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/repeat-bg-01.webp');
    background-repeat: repeat;
    background-size: 400px auto;
    mix-blend-mode: multiply;
}
.sec-service__inner {
    position: relative;
    z-index: 1;
    max-width: 1024px;
    margin: 0 auto;
}

/* A判分割コンテナ：横長（1.414:1）。線・枠は付けずさりげなく。 */
/* トンボを四隅に出すためのラッパー（paper-splitと同幅） */
.paper-frame {
    position: relative;
    width: 100%;
    max-width: 576px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .paper-frame {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .paper-frame {
        max-width: 1200px;
    }
}
/* 四隅のコーナートンボ・緑色
   --------------------------------------------------------------------
   現在は【シンプル版】＝1本のL字（border で描画）。
   後で本式の二重線トンボ（トップFVと同形SVG）に差し替えたいときは、
   HTMLの各 .paper-trim を
     <svg class="paper-trim paper-trim--tl" viewBox="0 0 120 120" aria-hidden="true">
       <path d="M20 0 V80 H100 M40 20 V100 H120" fill="none" stroke="currentColor" stroke-width="2"/>
     </svg>
   に置き換え、CSSは【SVG版】ブロックを有効化（border 4本を消し rotate を戻す）。
   位置・サイズは共通なので、描画方法だけ切り替えればよい。
   -------------------------------------------------------------------- */
.paper-trim {
    position: absolute;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    pointer-events: none;
    z-index: 2;
}
/* 【シンプル版】1本のL字（border 描画・現在有効） */
.paper-trim--tl { top: -14px; left: -14px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.paper-trim--tr { top: -14px; right: -14px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.paper-trim--bl { bottom: -14px; left: -14px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.paper-trim--br { bottom: -14px; right: -14px; border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
@media (min-width: 768px) {
    .paper-trim { width: 22px; height: 22px; }
}
/* 【SVG版】本式の二重線トンボ（現在は無効）
   有効化するには上の border 指定を消し、HTMLをSVGに置き換えて下記を有効化。
.paper-trim--tl { top: -28px; left: -28px; transform: rotate(270deg); }
.paper-trim--tr { top: -28px; right: -28px; transform: rotate(0deg); }
.paper-trim--bl { bottom: -28px; left: -28px; transform: rotate(180deg); }
.paper-trim--br { bottom: -28px; right: -28px; transform: rotate(90deg); }
*/
.paper-split {
    display: flex;
    width: 100%;
    max-width: 576px;
    margin: 0 auto;
    aspect-ratio: 1.414 / 1;
    overflow: hidden;
}
@media (min-width: 768px) {
    .paper-split {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .paper-split {
        max-width: 1200px;
    }
}

/* 入れ子：列（上下分割）と行（左右分割）を交互に */
.paper-split__col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}
.paper-split__row {
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* 各マス共通（線なし・背景は薄いトーンのみ） */
.paper-cell {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem;
    text-align: center;
    color: var(--color-title);
    /* ラベルをマス自身の幅（cqw）に連動させるためコンテナ化 */
    container-type: inline-size;
}

/* 画像マス：マス全体に画像をしきつめる */
.paper-cell--photo {
    padding: 0;
    overflow: hidden;
}
.paper-cell__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
/* 緑オーバーレイ */
.paper-cell__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        color-mix(in srgb, color-mix(in srgb, var(--color-primary) 80%, #000) 70%, transparent),
        color-mix(in srgb, var(--color-primary) 35%, transparent)
    );
    transition: background 0.2s ease;
    z-index: 1;
}
/* オーバーレイの上の白ラベル（左下配置）
   マス左下に絶対配置し、キャプションらしく決める。
   角からの逸げ（padding）は cqw 基準で、小さいマスでは余白も自動で縮む。
   デフォルトは大きめ表示（折り返し許容）。JSが折り返しを検知したマスには
   .is-wrapped が付き、下記でフォントを落として1行に収める。 */
.paper-cell--photo .paper-cell__label {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    text-align: left;
    color: var(--color-white);
    padding: clamp(0.4rem, 7cqw, 1rem);
}

.paper-cell__label {
    font-weight: 900;
    line-height: 1.35;
    /* マス幅（cqw）に連動してサイズ可変。
       下限・上限で極端に小さい/大きいマスでも破綻させない。 */
    font-size: clamp(0.7rem, 9cqw, 1.375rem);
}
.paper-cell__size {
    font-family: var(--font-en);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-text-light);
    opacity: 0.6;
}

/* サイズ別の背景トーン（ごく薄く・大→小で濃淡をつける程度） */
.paper-cell--a2 { flex: 1; background: var(--color-bg-light); }
.paper-cell--a3 { background: var(--color-bg-cyan); }
.paper-cell--a4 { background: #F6FBF3; }
.paper-cell--a5 { background: #FFF6DE; }

/* A2「パンフレット・カタログ」・A3「リーフレット・会社案内」のラベルを個別指定。
   mobile-first：ベース（768px未満）は固定値、768px以上はデフォルトの clamp に戻す。 */
.paper-cell--a2 .paper-cell__label { font-size: 1.125rem; }
.paper-cell--a3 .paper-cell__label { font-size: 0.9rem; }
/* 475px以上：A3「リーフレット・会社案内」を通常サイズ（1rem）に。 */
@media (min-width: 475px) {
    .paper-cell--a3 .paper-cell__label { font-size: 1rem; }
}
/* ラベル中の中点（・）：デフォルトはそのまま表示。 */
.paper-cell__sep {
    /* inline のまま（576px未満で折り返しに切り替え） */
}
@media (min-width: 768px) {
    .paper-cell--a2 .paper-cell__label,
    .paper-cell--a3 .paper-cell__label {
        font-size: clamp(0.625rem, 9cqw, 1.375rem);
    }
}
/* 576px未満：A2・A3 は中点を消して2行にする（中点 span を block 化して改行扱い）。
   並びは「パンフレット→カタログ」「リーフレット→会社案内」のまま。 */
@media (max-width: 575px) {
    .paper-cell--a2 .paper-cell__label,
    .paper-cell--a3 .paper-cell__label {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .paper-cell--a2 .paper-cell__sep,
    .paper-cell--a3 .paper-cell__sep {
        font-size: 0;
        line-height: 0;
    }
}

/* ラベルのサイズは .paper-cell__label の clamp(cqw) でマス幅に自動追従。
   マスごとの固定サイズ指定とブレークポイント切り替えは不要になったため削除。 */

.sec-service__note {
    margin-top: 2rem;
    text-align: center;
    font-weight: 500;
    color: var(--color-text);
}
@media (min-width: 1024px) {
    .sec-service__note {
        margin-top: 2.5rem;
    }
}
.sec-service__more {
    margin-top: 1.25rem;
    text-align: center;
}
@media (min-width: 1024px) {
    .sec-service__more {
        margin-top: 1.5rem;
    }
}