@charset "UTF-8";

/* ============================================================
   溝田建築設計 TOP 手書き再現 style.css
   実測元: sites/0012（本番ミラー）basic.css + DOM実測（PC1400 / SP375）
   規約: web-coding-rules（margin/padding 4値・4/8倍数・bottom余白・
         PC/SP 別ブロック・CSS変数なし・px統一・!important禁止）
   フォント: 見出し = YakuHanMP + Shippori Mincho（本家同一）
             本文   = Zen Kaku Gothic New（本家 FP-こぶりなゴシックの代替）
             英字   = Helvetica Neue 系フォールバック
   イージング: cubic-bezier(0.165, 0.84, 0.44, 1)（本家 --easing-default）
   ============================================================ */

/* ------------------------------------------------------------
   リセット（web-coding-rules §19）
   ------------------------------------------------------------ */
* {
    box-sizing: border-box;
}
html,
body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
a {
    text-decoration: none;
    color: inherit;
}
button {
    font-family: inherit;
    cursor: pointer;
    border: 0px;
    background: transparent;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
ul,
ol,
li {
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
p,
h1,
h2,
h3,
address {
    margin: 0px 0px 0px 0px;
    font-style: normal;
}

/* ------------------------------------------------------------
   ベース
   ------------------------------------------------------------ */
html {
    overscroll-behavior: none;
    /* アンカーリンク（目次→各方針など）ジャンプ時のスムーズスクロール */
    scroll-behavior: smooth;
}
body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
    line-height: 1;
    color: #362e26;
    background-color: #fcf5eb;
    background-image: url("../images/noise.svg");
    font-feature-settings: "palt" on;
    -webkit-font-smoothing: antialiased;
}
::selection {
    background: #926f4b;
    color: #ffffff;
}

/* ユーティリティ */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (min-width: 768px) {
    .u-sp-on {
        display: none;
    }
    .u-tab-off {
        display: inline;
    }
}
@media (max-width: 767px) {
    .u-sp-on {
        display: block;
    }
    .u-tab-off {
        display: none;
    }
}

/* 登場アニメーション（本家 keyframes 転記） */
@keyframes fade-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes fade-tilt {
    from {
        opacity: 0;
        -webkit-mask-image: linear-gradient(
            135deg,
            rgb(0, 0, 0) 30%,
            rgba(0, 0, 0, 0.4) 45%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0) 100%
        );
        mask-image: linear-gradient(
            135deg,
            rgb(0, 0, 0) 30%,
            rgba(0, 0, 0, 0.4) 45%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0) 100%
        );
        -webkit-mask-size: 250% 250%;
        mask-size: 250% 250%;
        -webkit-mask-position: 130% 130%;
        mask-position: 130% 130%;
    }
    to {
        opacity: 1;
        -webkit-mask-image: linear-gradient(
            135deg,
            rgb(0, 0, 0) 30%,
            rgba(0, 0, 0, 0.4) 45%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0) 100%
        );
        mask-image: linear-gradient(
            135deg,
            rgb(0, 0, 0) 30%,
            rgba(0, 0, 0, 0.4) 45%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0) 100%
        );
        -webkit-mask-size: 250% 250%;
        mask-size: 250% 250%;
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
    }
}
@keyframes heading-flash {
    0% {
        background-position: 150% 50%;
    }
    22% {
        background-position: -50% 50%;
    }
    100% {
        background-position: -50% 50%;
    }
}
@keyframes top-slide {
    from {
        transform: scale(1.02) translateX(1%);
    }
    to {
        transform: scale(1.02) translateX(-1%);
    }
}
@keyframes top-slide-sp {
    from {
        transform: scale(1.04) translateX(2%);
    }
    to {
        transform: scale(1.04) translateX(-2%);
    }
}

/* ------------------------------------------------------------
   共通: セクション見出し（本家 c-heading-top）
   ------------------------------------------------------------ */
.heading-top-sub {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #a7917b;
}
.heading-top-main {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #7f4d1b;
}
@media (min-width: 768px) {
    .heading-top-sub {
        padding: 0px 0px 20px 0px;
        font-size: 18px;
    }
    .heading-top-main {
        font-size: 36px;
    }
}
@media (max-width: 767px) {
    .heading-top-sub {
        padding: 0px 0px 12px 0px;
        font-size: 12px;
    }
    .heading-top-main {
        font-size: 28px;
    }
}

/* ------------------------------------------------------------
   共通: 矢印リンク（本家 c-link）
   アイコン内の矢印2枚が hover で右へスライドして入れ替わる
   ------------------------------------------------------------ */
.link-more {
    display: inline-flex;
    align-items: center;
    column-gap: 12px;
}
.link-more-icon {
    display: grid;
    place-content: center;
    width: 38px;
    height: 27px;
    border: 1px solid #ded5cb;
    border-radius: 999px;
    overflow: hidden;
}
.link-more-icon-inner {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 10px;
    height: 7px;
}
.link-more-icon-inner img {
    width: 10px;
    height: 7px;
}
.link-more-icon-inner img + img {
    position: absolute;
    top: 0px;
    right: calc(100% + 4px);
}
.link-more-icon-inner img {
    transition: transform 0s linear;
}
.link-more:hover .link-more-icon-inner img {
    transform: translateX(calc(100% + 4px));
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.link-more-label {
    font-size: 12px;
    letter-spacing: 0.03em;
    color: #362e26;
    padding: 0px 0px 2px 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #83776a 0%);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0px 1px;
    transition: background-size 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.link-more:hover .link-more-label {
    background-position: bottom left;
    background-size: 100% 1px;
}
.link-more.-large .link-more-icon {
    width: 45px;
    height: 33px;
}
.link-more.-large .link-more-icon-inner,
.link-more.-large .link-more-icon-inner img {
    width: 13px;
    height: 9px;
}
.link-more.-large .link-more-label {
    font-size: 16px;
}
.link-more.-white .link-more-icon {
    width: 56px;
    height: 43px;
    border-color: rgba(255, 255, 255, 0.2);
}
.link-more.-white .link-more-icon-inner,
.link-more.-white .link-more-icon-inner img {
    width: 13px;
    height: 9px;
}
.link-more.-white .link-more-label {
    font-size: 16px;
    letter-spacing: 0.12em;
    color: #ffffff;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.5) 0%);
}

/* テキストリンク（footer 住所 / Instagram）: 常時下線・hoverで消える */

/* ------------------------------------------------------------
   header（ロゴ・ナビ・CV・ハンバーガーは個別 fixed。本家準拠）
   ------------------------------------------------------------ */
.site-header-logo {
    position: fixed;
    z-index: 30;
    animation: fade-down 0.6s cubic-bezier(0, 0.25, 1, 1) 1.8s backwards;
}
/* header ロゴ: 統一ブランドロゴ（img）。CSSマスク廃止。暗ヒーロー上(-white)は白版・明背景では濃色版へ差し替える */
.site-header-logo a {
    display: inline-block;
}
.site-header-logo img {
    display: block;
    height: 32px;
    width: auto;
}
/* 既定（明背景）は濃色ロゴを表示し、白版は隠す */
.site-header-logo img.site-header-logo-white {
    display: none;
}
/* -white（暗ヒーロー上）では白ロゴへ差し替え。詳細度を img まで上げて表示切替を確実にする */
.site-header.-white .site-header-logo img.site-header-logo-dark {
    display: none;
}
.site-header.-white .site-header-logo img.site-header-logo-white {
    display: block;
}

/* ナビだけは absolute（本家 -nav-over: スクロールでヒーローと一緒に流れて消える） */
.site-header {
    position: relative;
}

.site-header-link {
    position: fixed;
    z-index: 30;
    display: flex;
    column-gap: 12px;
    animation: fade-down 0.6s cubic-bezier(0, 0.25, 1, 1) 1.8s backwards;
}

/* お問い合わせボタン */
.button-cv {
    display: grid;
    place-content: center;
    width: 195px;
    height: 63px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #7f4d1b;
    border: 1px solid rgba(127, 77, 27, 0.2);
    border-radius: 999px;
    transition:
        background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.button-cv:hover {
    background-color: #926f4b;
    color: #ffffff;
}
.site-header.-white .button-cv {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}
.site-header.-white .button-cv:hover {
    background-color: #ffffff;
    color: #926f4b;
}
@media (min-width: 768px) {
    .site-header-logo {
        top: 32px;
        left: 40px;
        width: 240px;
    }

    .site-header-link {
        top: 32px;
        right: 32px;
    }
}
/* 本家は 1024px 以下でヘッダーナビ非表示（TAB帯の崩れ防止で踏襲） */

@media (max-width: 767px) {
    .site-header-logo {
        top: 32px;
        left: 20px;
        width: 192px;
    }

    .site-header-link {
        top: 16px;
        right: 16px;
    }
    .button-cv {
        display: none;
    }
}
/* ------------------------------------------------------------
   hero（100svh・Splide フェード背景 + スローガン + NEWSカード）
   ------------------------------------------------------------ */
.section-hero {
    position: relative;
    width: 100%;
    height: 100svh;
}
.section-hero-text {
    position: absolute;
    z-index: 1;
}
.section-hero-slogan {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    line-height: 1.45;
    background-image: linear-gradient(
        300deg,
        rgb(255, 255, 255) 35%,
        rgb(255, 230, 173) 50%,
        rgb(255, 255, 255) 65%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
        fade-tilt 1.5s cubic-bezier(0, 0.25, 1, 1) both,
        heading-flash 6s linear infinite 1.5s;
}
.section-hero-slogan img {
    width: 100%;
    height: auto;
}

.section-hero-background {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}
/* 全面の薄暗幕（フラットな黒・25%） */
.section-hero-background::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 10;
    pointer-events: none;
}
.section-hero-background .splide__track,
.section-hero-background .splide__list,
.section-hero-background .splide__slide {
    height: 100%;
}
.section-hero-background .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02) translateX(-1%);
}
.section-hero-background .splide__slide.is-active img {
    animation: top-slide 5.5s linear both;
}

/* hero 内 NEWS カード（本家 c-card-fv） */

/* 記事メタ（タグ・日付） */

@media (min-width: 768px) {
    .section-hero-text {
        left: 80px;
        bottom: 72px;
    }
    .section-hero-slogan {
        font-size: 48px;
        margin: 0px 0px 32px 0px;
    }
}
@media (max-width: 767px) {
    /* スローガンは PC 同様に画面下部へ寄せる（上下中央をやめる） */
    .section-hero-text {
        left: 20px;
        bottom: 48px;
    }
    .section-hero-slogan {
        font-size: 32px;
        margin: 0px 0px 24px 0px;
    }

    .section-hero-background .splide__slide img {
        transform: scale(1.04) translateX(-2%);
    }
    .section-hero-background .splide__slide.is-active img {
        animation: top-slide-sp 5.5s linear both;
    }
}

/* ------------------------------------------------------------
   concept（暗背景 #544B42 + 5枚のパララックス画像）
   ------------------------------------------------------------ */
.section-concept {
    position: relative;
    color: #ffffff;
    text-align: center;
}
.section-concept-background {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #544b42;
    overflow: hidden;
    z-index: -1;
}
.section-concept-title-sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    opacity: 0;
}
.section-concept-title-sub::after {
    content: "";
    width: 1px;
    height: 24px;
    background-color: #ffffff;
}
.section-concept-title-main {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.06em;
    background-image: linear-gradient(
        300deg,
        rgb(255, 255, 255) 35%,
        rgb(255, 230, 173) 50%,
        rgb(255, 255, 255) 65%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
}
.section-concept-title.is-visible .section-concept-title-sub {
    animation: fade-tilt 0.6s cubic-bezier(0, 0.25, 1, 1) both;
}
.section-concept-title.is-visible .section-concept-title-main {
    animation:
        fade-tilt 1.6s cubic-bezier(0, 0.25, 1, 1) both,
        heading-flash 16s linear infinite 3s;
}
.section-concept-description p {
    letter-spacing: 0.16em;
}

/* 背景いっぱいに敷く1枚（旧: 5枚バラバラのパララックス配置） */
.concept-media {
    position: absolute;
    overflow: hidden;
    opacity: 0;
}
.concept-media.-cover {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 0px;
}
.concept-media-inner {
    width: 100%;
    height: 110%;
}
/* cover は上端固定で高さを大きめに取り、パララックスで上へ最大12%動いても
   下端に下地（#544b42）が覗かない（茶色帯にならない）だけのオーバースキャンを確保 */
.concept-media.-cover .concept-media-inner {
    height: 132%;
}
.concept-media-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 画像の上に暗幕を重ね、金グラデ見出し・白本文の可読性を担保 */
.section-concept-background::after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #544b42;
    opacity: 0.62;
    pointer-events: none;
}
.section-concept-background.is-visible .concept-media {
    animation: fade-tilt 1.3s cubic-bezier(0, 0.25, 1, 1) both;
}

@media (min-width: 768px) {
    .section-concept {
        padding: 160px 60px 160px 60px;
    }
    .section-concept-title {
        padding: 0px 0px 80px 0px;
    }
    .section-concept-title-sub {
        padding: 0px 0px 28px 0px;
    }
    .section-concept-title-main {
        font-size: 40px;
    }
    .section-concept-description {
        padding: 0px 0px 60px 0px;
    }
    .section-concept-description p {
        font-size: 16px;
        line-height: 2.35;
    }
    .section-concept-description p + p {
        padding: 32px 0px 0px 0px;
    }
}
@media (max-width: 767px) {
    .section-concept {
        padding: 120px 20px 120px 20px;
    }
    .section-concept-title {
        padding: 0px 0px 52px 0px;
    }
    .section-concept-title-sub {
        padding: 0px 0px 20px 0px;
        font-size: 12px;
    }
    .section-concept-title-main {
        font-size: 24px;
    }
    .section-concept-description {
        padding: 0px 0px 52px 0px;
    }
    .section-concept-description p {
        font-size: 14px;
        line-height: 2.3;
        letter-spacing: 0.08em; /* PC の 0.16em のままだと1行の文字数が減り改行が増えるため詰める */
    }
    .section-concept-description p + p {
        padding: 24px 0px 0px 0px;
    }
}

/* ------------------------------------------------------------
   case（施工事例カルーセル）
   カード幅・gap・paddingは Splide 側（main.js）で本家と同値
   ------------------------------------------------------------ */

/* スライダー矢印ボタン */

/* ------------------------------------------------------------
   information / blog（2カラム記事リスト）
   ------------------------------------------------------------ */

/* hover: 右から帯が走る + 画像ズーム（本家 c-card-article） */

/* ------------------------------------------------------------
   大型ページリンク（About us / For sale）
   ------------------------------------------------------------ */
.page-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}
.page-link-sub {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #ffffff;
    opacity: 0.8;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    padding: 0px 0px 20px 0px;
}
.page-link-main {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    padding: 0px 0px 48px 0px;
}
.page-link-background {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
}
.page-link-background::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(54, 54, 54, 0.5);
    z-index: 1;
}
.page-link-background::after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 0%;
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 2;
    transition: width 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.page-link:hover .page-link-background::after {
    right: auto;
    left: 0px;
    width: 100%;
}
.page-link-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.page-link:hover .page-link-background img {
    transform: scale(1.03);
}

@media (min-width: 768px) {
    .section-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16px;
        padding: 120px 60px 120px 60px;
    }
    .page-link {
        height: 380px;
        padding: 28px 60px 0px 60px;
    }
    .page-link-main {
        font-size: 44px;
    }
}
@media (max-width: 767px) {
    .section-links {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 12px;
        padding: 60px 20px 60px 20px;
    }
    .page-link {
        height: 220px;
        padding: 12px 20px 0px 20px;
    }
    .page-link-main {
        font-size: 32px;
        padding: 0px 0px 28px 0px;
    }
    .page-link-sub {
        padding: 0px 0px 16px 0px;
    }
}

/* 注目ボタン（お問い合わせフォームはこちら） */
.button-attention {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 20px;
    width: min(100%, 368px);
    padding: 16px 24px 16px 32px;
    font-size: 16px;
    line-height: 1.4;
    color: #ffffff;
    background-color: #bd7833;
    border-radius: 999px;
    transition: background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.button-attention:hover {
    background-color: #da6d00;
}
.button-attention-icon {
    display: grid;
    place-content: center;
    width: 45px;
    height: 33px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    overflow: hidden;
}
.button-attention-icon-inner {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 13px;
    height: 9px;
}
.button-attention-icon-inner img {
    width: 13px;
    height: 9px;
}
.button-attention-icon-inner img + img {
    position: absolute;
    top: 0px;
    right: calc(100% + 4px);
}
.button-attention-icon-inner img {
    transition: transform 0s linear;
}
.button-attention:hover .button-attention-icon-inner img {
    transform: translateX(calc(100% + 4px));
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.button-attention.-small {
    font-size: 12px;
    padding: 12px 16px 12px 24px;
}
.button-attention.-small .button-attention-icon {
    width: 36px;
    height: 27px;
}

/* ------------------------------------------------------------
   footer
   ------------------------------------------------------------ */
/* footer ロゴ: 統一ブランドロゴ（img）。明るいクリーム背景なので濃色版を使用。CSSマスク廃止 */
.site-footer-logo a {
    display: inline-block;
}
.site-footer-logo img {
    display: block;
    height: 36px;
    width: auto;
}
.site-footer-address {
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.03em;
}

.site-footer-nav {
    display: flex;
    align-items: flex-start;
}
.site-footer-nav-list {
    display: flex;
    flex-direction: column;
    row-gap: 28px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 12px;
}
.site-footer-nav-list > li {
    display: flex;
    flex-direction: column;
    row-gap: 28px;
}
.site-footer-nav-list a {
    padding: 0px 0px 2px 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #83776a 0%);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0px 1px;
    transition: background-size 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.site-footer-nav-list a:hover {
    background-position: bottom left;
    background-size: 100% 1px;
}

.site-footer-copyright {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: #362e26;
    opacity: 1;
}

@media (min-width: 768px) {
    .site-footer {
        display: grid;
        grid-template-areas: "info nav pagetop" ". copyright copyright";
        grid-template-columns: 1fr auto auto;
        row-gap: 80px;
        column-gap: min(6.25vw, 90px);
        padding: 60px 140px 60px 140px;
    }
    .site-footer-info {
        grid-area: info;
    }
    .site-footer-logo {
        width: 260px;
        margin: 0px 0px 32px 0px;
    }
    .site-footer-address {
        margin: 0px 0px 20px 0px;
    }

    .site-footer-nav {
        grid-area: nav;
        column-gap: min(5.2vw, 76px);
    }

    .site-footer-copyright {
        grid-area: copyright;
        text-align: right;
    }
}
@media (max-width: 767px) {
    .site-footer {
        position: relative;
        display: grid;
        grid-template-areas: "nav" "info" "copyright";
        row-gap: 48px;
        padding: 60px 32px 32px 32px;
    }
    .site-footer-info {
        grid-area: info;
    }
    .site-footer-logo {
        width: 220px;
        margin: 0px 0px 24px 0px;
    }
    .site-footer-address {
        margin: 0px 0px 16px 0px;
    }

    .site-footer-nav {
        grid-area: nav;
        flex-wrap: wrap;
        gap: 40px 40px;
    }

    .site-footer-copyright {
        grid-area: copyright;
    }
}

/* ============================================================
   施工事例アーカイブ（施工事例一覧ページ / case/index.html）
   本家 https://mizota-ks.com/case/ の
   「ページ見出し + カテゴリ絞り込み(左) + 事例グリッド(右)」構成を再現
============================================================ */

/* 下層ページのページ見出し（本家 c-heading-major2）
   site-header は高さ0の relative で子要素が本文に被さるため、上 padding で逃がす */
.page-hero {
    text-align: center;
    background-color: #fcf5eb;
    background-image: url("../images/noise.svg");
}
.page-hero-en {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.12em;
    color: #a7917b;
}
.page-hero-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #7f4d1b;
}

/* アーカイブ本体（施工事例・土地分譲で共用するレイアウト） */

/* --- PC --- */
@media (min-width: 768px) {
    .page-hero {
        padding: 176px 60px 72px 60px;
    }
    .page-hero-en {
        font-size: 14px;
        padding: 0px 0px 16px 0px;
    }
    .page-hero-title {
        font-size: 40px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .page-hero {
        padding: 128px 20px 48px 20px;
    }
    .page-hero-en {
        font-size: 12px;
        padding: 0px 0px 12px 0px;
    }
    .page-hero-title {
        font-size: 30px;
    }
}

/* --- PC --- */
/* --- SP --- */
/* ============================================================
   会社案内（company/index.html）
   本家 company: ページ見出し + ワイド写真 + 会社概要テーブル + アクセス地図
============================================================ */
/* ページ見出し下のワイド写真バンド */
.company-hero-media {
    position: relative;
    overflow: hidden;
}
.company-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 写真の上にフラットな黒暗幕（グラデ無し・25%） */
.company-hero-media::after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
/* オンラインレッスンのワイド写真は上部寄りを見せる（上端から少し下） */
.page-onlinelesson .company-hero-media img {
    object-position: center 20%;
}
/* ヒーロー帯の流れるグラデーション（flow-gradient.js が描画） */
.flow-gradient {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0b0b12;
}
.flow-gradient__canvas {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
}
.flow-gradient__grain {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
    opacity: 0;
}

/* ============================================================
   ヒーロー帯にオーバーレイ見出し（service / usecases）
   flow-gradient を背面に敷き、その上に Service/サービス等の文字を重ねる。
   .page-hero を継承しつつ背景をグラデに差し替え、文字を中央に配置。
============================================================ */
.page-hero--media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #0b0b12;
    background-image: none;
}
.page-hero--media .flow-gradient {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
}
/* グラデと文字の間に薄いスクリムを敷いて可読性を確保 */
.page-hero--media::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    pointer-events: none;
}
.page-hero--on-dark::before {
    background-image: linear-gradient(
        180deg,
        rgba(6, 8, 24, 0.34) 0%,
        rgba(6, 8, 24, 0.12) 46%,
        rgba(6, 8, 24, 0.46) 100%
    );
}
.page-hero--on-light::before {
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.34) 0%,
        rgba(255, 255, 255, 0.04) 46%,
        rgba(255, 255, 255, 0.4) 100%
    );
}
.page-hero__inner {
    position: relative;
    z-index: 2;
}
.page-hero--on-dark .page-hero-en {
    color: rgba(255, 255, 255, 0.82);
}
.page-hero--on-dark .page-hero-title {
    color: #ffffff;
    text-shadow: 0px 2px 26px rgba(0, 0, 0, 0.38);
}
.page-hero--on-light .page-hero-en {
    color: #4a5a7a;
}
.page-hero--on-light .page-hero-title {
    color: #23305a;
    text-shadow: 0px 2px 22px rgba(255, 255, 255, 0.55);
}
/* --- PC --- */
@media (min-width: 768px) {
    .page-hero--media {
        min-height: 540px;
        padding: 200px 60px 96px 60px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .page-hero--media {
        min-height: 380px;
        padding: 150px 20px 64px 20px;
    }
}

.section-company {
    position: relative;
    background-color: #fcf5eb;
    background-image: url("../images/noise.svg");
}

/* 会社概要テーブル */
.company-table {
    width: 100%;
    border-collapse: collapse;
}
.company-table th,
.company-table td {
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #ded5cb;
}
.company-table th {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
    white-space: nowrap;
}
.company-table td {
    color: #46463e;
}
/* 登録・許可など複数行の値 */
.company-table td p {
    margin: 0px 0px 4px 0px;
}

/* アクセス */
.company-access-text {
    color: #46463e;
    line-height: 1.9;
}
.company-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
}
.company-map iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0px;
}

/* --- PC --- */
@media (min-width: 768px) {
    .company-hero-media {
        height: 420px;
        margin: 0px 0px 0px 0px;
    }
    .section-company {
        padding: 80px 60px 120px 60px;
    }
    .company-inner {
        max-width: 960px;
        margin: 0px auto 0px auto;
    }
    .company-block {
        padding: 0px 0px 96px 0px;
    }
    .company-block-title {
        padding: 0px 0px 40px 0px;
    }
    .company-table th {
        width: 208px;
        padding: 20px 24px 20px 0px;
    }
    .company-table td {
        padding: 20px 0px 20px 0px;
    }
    .company-access-text {
        font-size: 16px;
        padding: 0px 0px 32px 0px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .company-hero-media {
        height: 240px;
        margin: 0px 0px 0px 0px;
    }
    .section-company {
        padding: 48px 20px 80px 20px;
    }
    .company-block {
        padding: 0px 0px 64px 0px;
    }
    .company-block-title {
        padding: 0px 0px 28px 0px;
    }
    .company-table th {
        display: block;
        padding: 16px 0px 4px 0px;
        border-bottom: 0px;
    }
    .company-table td {
        display: block;
        padding: 0px 0px 16px 0px;
    }
    .company-access-text {
        font-size: 15px;
        padding: 0px 0px 24px 0px;
    }
}

/* ============================================================
   サービス（sale/index.html を ZeroTake のサービス一覧に）
   4事業（AI・データ活用／システム開発・Web制作／インフラ・クラウド構築／経営DX・伴走支援）
============================================================ */
.section-service {
    position: relative;
    background-color: #fcf5eb;
    background-image: url("../images/noise.svg");
}
.section-service-lead {
    text-align: center;
    color: #46463e;
    line-height: 1.9;
}

/* サービス内訳（—付きリスト） */

/* --- PC --- */
@media (min-width: 768px) {
    .section-service {
        padding: 80px 60px 120px 60px;
    }
    .section-service-lead {
        font-size: 16px;
        max-width: 720px;
        margin: 0px auto 0px auto;
        padding: 0px 0px 64px 0px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .section-service {
        padding: 48px 20px 80px 20px;
    }
    .section-service-lead {
        font-size: 15px;
        padding: 0px 0px 40px 0px;
    }
}

/* --- PC --- */

/* --- SP --- */

/* --- PC --- */
/* --- SP --- */
/* ============================================================
   個人情報保護方針 / よくある質問（company と共通シェル・本文レイアウト）
   見出しは heading-top（js-trigger の金フラッシュ）、表は company-table を流用。
   ここは本文（リード・目次・条文リスト・FAQアコーディオン）用の追加分。
============================================================ */
.section-legal,
.section-faq {
    position: relative;
    background-color: #fcf5eb;
    background-image: url("../images/noise.svg");
}

/* 制定・改定日 */
.legal-meta {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.04em;
    color: #a7917b;
}
.legal-meta span + span {
    margin: 0px 0px 0px 16px;
}

/* リード文 */
.legal-lead {
    color: #46463e;
    line-height: 1.9;
}

/* 目次（各方針へジャンプ） */

/* 各方針ブロック（上罫線で区切り・固定ロゴ分の scroll-margin） */

.legal-subtitle {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
    line-height: 1.6;
}
.legal-text {
    color: #46463e;
    line-height: 1.9;
}
.legal-text + .legal-text {
    padding: 12px 0px 0px 0px;
}

/* 番号付きリスト（1）（2）… */
.legal-list {
    counter-reset: legal;
}
.legal-list > li {
    position: relative;
    counter-increment: legal;
    color: #46463e;
    line-height: 1.9;
    padding: 0px 0px 0px 36px;
}
.legal-list > li + li {
    margin: 12px 0px 0px 0px;
}
.legal-list > li::before {
    content: "（" counter(legal) "）";
    position: absolute;
    top: 0px;
    left: 0px;
    color: #926f4b;
}

/* サブ（—付き） */
.legal-sublist > li {
    position: relative;
    color: #645a50;
    line-height: 1.9;
    padding: 0px 0px 0px 20px;
}
.legal-sublist > li::before {
    content: "—";
    position: absolute;
    top: 0px;
    left: 0px;
    color: #926f4b;
}

/* 問い合わせ窓口の囲み（border-left → 角丸なし §10） */

/* CVカードのメール（cv-card-tel の大きさだと溢れるため別サイズ） */

/* ---- FAQ（<details> アコーディオン・JS不要） ---- */
.faq-list {
    border-top: 1px solid #ded5cb;
}
.faq-item {
    border-bottom: 1px solid #ded5cb;
}
.faq-item summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    column-gap: 16px;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-q {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #926f4b;
    line-height: 1.6;
}
.faq-question {
    font-family: "Noto Sans JP", sans-serif;
    color: #46463e;
    line-height: 1.7;
}
/* ＋（閉）→ −（開）: 横棒は常時・縦棒を開時に消す */
.faq-toggle {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 6px 0px 0px 0px;
}
.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    width: 16px;
    height: 1px;
    background-color: #926f4b;
    transition: opacity 0.3s ease;
}
.faq-toggle::after {
    transform: rotate(90deg);
}
.faq-item[open] .faq-toggle::after {
    opacity: 0;
}
.faq-answer {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
}
.faq-a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #a7917b;
    line-height: 1.6;
}
.faq-a-text {
    color: #46463e;
    line-height: 1.9;
}
.faq-a-text + .faq-a-text {
    padding: 8px 0px 0px 0px;
}
.faq-a-text a {
    color: #da6d00;
}

/* --- PC --- */
@media (min-width: 768px) {
    .section-legal,
    .section-faq {
        padding: 80px 60px 120px 60px;
    }
    .legal-inner,
    .faq-inner {
        max-width: 1200px;
        margin: 0px auto 0px auto;
    }

    .legal-meta {
        font-size: 13px;
        padding: 0px 0px 40px 0px;
    }
    .legal-lead {
        font-size: 16px;
        padding: 0px 0px 40px 0px;
    }

    .legal-subtitle {
        font-size: 20px;
        padding: 40px 0px 16px 0px;
    }
    .legal-text {
        font-size: 15px;
    }
    .legal-list {
        padding: 12px 0px 0px 0px;
    }
    .legal-sublist {
        padding: 8px 0px 0px 0px;
    }

    /* FAQ */
    .faq-group {
        padding: 64px 0px 0px 0px;
    }
    .faq-item summary {
        padding: 28px 0px 28px 0px;
    }
    .faq-q {
        font-size: 20px;
    }
    .faq-question {
        font-size: 17px;
        padding: 2px 0px 0px 0px;
    }
    .faq-answer {
        padding: 0px 0px 28px 0px;
    }
    .faq-a {
        font-size: 20px;
    }
    .faq-a-text {
        font-size: 15px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .section-legal,
    .section-faq {
        padding: 48px 20px 80px 20px;
    }

    .legal-meta {
        font-size: 12px;
        padding: 0px 0px 32px 0px;
    }
    .legal-lead {
        font-size: 15px;
        padding: 0px 0px 32px 0px;
    }

    .legal-subtitle {
        font-size: 18px;
        padding: 32px 0px 12px 0px;
    }
    .legal-text {
        font-size: 14px;
    }
    .legal-list {
        padding: 12px 0px 0px 0px;
    }
    .legal-list > li {
        padding: 0px 0px 0px 32px;
    }
    .legal-sublist {
        padding: 8px 0px 0px 0px;
    }

    /* FAQ */
    .faq-group {
        padding: 48px 0px 0px 0px;
    }
    .faq-item summary {
        padding: 20px 0px 20px 0px;
    }
    .faq-q {
        font-size: 18px;
    }
    .faq-question {
        font-size: 15px;
        padding: 1px 0px 0px 0px;
    }
    .faq-answer {
        padding: 0px 0px 20px 0px;
    }
    .faq-a {
        font-size: 18px;
    }
    .faq-a-text {
        font-size: 14px;
    }
}

/* ============================================================
   お問い合わせフォーム（contact/index.html・company と共通シェル）
   送信ボタンは button-attention を流用。ここはフォーム部品の追加分。
============================================================ */
.section-contact {
    position: relative;
    background-color: #fcf5eb;
    background-image: url("../images/noise.svg");
}
.contact-lead {
    text-align: center;
    color: #46463e;
    line-height: 1.9;
}
.contact-form {
    background-color: #fffcf7;
    border: 1px solid #ebe4db;
    border-radius: 8px;
}
.contact-field {
    display: flex;
    flex-direction: column;
}
/* ハニーポット（スパムbot対策）: 人間には見えない website 欄。bot が埋めたら send.php が送信せず弾く。
   display:none だと入力を省略する bot がいるため、画面外に飛ばして「見えないが存在する」状態にする */
.contact-field--hp {
    position: absolute;
    left: -9999px;
    top: 0px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contact-label {
    font-family: "Noto Sans JP", sans-serif;
    color: #7f4d1b;
}
.contact-required {
    color: #da6d00;
    margin: 0px 0px 0px 8px;
}
.contact-optional {
    color: #a7917b;
    margin: 0px 0px 0px 8px;
}
.contact-input,
.contact-select,
.contact-textarea {
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    color: #362e26;
    background-color: #fcf5eb;
    border: 1px solid #ded5cb;
    border-radius: 8px;
    transition: border-color 0.3s ease;
}
.contact-input::placeholder,
.contact-textarea::placeholder {
    color: #a7917b;
}
.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
    outline: none;
    border-color: #926f4b;
}
.contact-textarea {
    resize: vertical;
}
.contact-select-wrap {
    position: relative;
}
.contact-select {
    appearance: none;
    cursor: pointer;
}
.contact-select-arrow {
    position: absolute;
    top: 50%;
    color: #8a8578;
    pointer-events: none;
    transform: translateY(-50%);
}
.contact-agree {
    display: flex;
    align-items: flex-start;
}
.contact-agree input {
    flex: none;
    margin: 5px 12px 0px 0px;
    accent-color: #926f4b;
}
.contact-agree-text {
    color: #46463e;
    line-height: 1.8;
}
.contact-agree-text a {
    color: #da6d00;
}
.contact-submit {
    display: flex;
    justify-content: center;
}

/* --- PC --- */
@media (min-width: 768px) {
    .section-contact {
        padding: 80px 60px 120px 60px;
    }
    .contact-inner {
        max-width: 720px;
        margin: 0px auto 0px auto;
    }
    .contact-lead {
        font-size: 16px;
        padding: 0px 0px 56px 0px;
    }
    .contact-form {
        padding: 48px 56px 48px 56px;
    }
    .contact-field {
        padding: 0px 0px 32px 0px;
    }
    .contact-label {
        font-size: 15px;
        padding: 0px 0px 12px 0px;
    }
    .contact-input,
    .contact-select {
        height: 56px;
        padding: 0px 20px 0px 20px;
        font-size: 15px;
    }
    .contact-textarea {
        min-height: 160px;
        padding: 16px 20px 16px 20px;
        font-size: 15px;
    }
    .contact-select-arrow {
        right: 20px;
        font-size: 16px;
    }
    .contact-agree {
        padding: 8px 0px 32px 0px;
    }
    .contact-agree-text {
        font-size: 14px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .section-contact {
        padding: 48px 20px 80px 20px;
    }
    /* 可読性優先で 15px を保つ（8/4 倍数の例外＝SP改行制御用）。メール行は u-sp-on の追加改行で分ける */
    .contact-lead {
        font-size: 15px;
        padding: 0px 0px 40px 0px;
    }
    .contact-form {
        padding: 32px 24px 32px 24px;
    }
    .contact-field {
        padding: 0px 0px 24px 0px;
    }
    .contact-label {
        font-size: 14px;
        padding: 0px 0px 10px 0px;
    }
    .contact-input,
    .contact-select {
        height: 52px;
        padding: 0px 16px 0px 16px;
        font-size: 15px;
    }
    .contact-textarea {
        min-height: 140px;
        padding: 14px 16px 14px 16px;
        font-size: 15px;
    }
    .contact-select-arrow {
        right: 16px;
        font-size: 15px;
    }
    .contact-agree {
        padding: 4px 0px 24px 0px;
    }
    .contact-agree-text {
        font-size: 13px;
    }
}

/* ============================================================
   TOP ページ: サービス3区分（section-service を流用・中央見出し＋3列）
============================================================ */
.section-service-title {
    text-align: center;
}
/* --- PC --- */
@media (min-width: 768px) {
    .section-service-title {
        padding: 0px 0px 24px 0px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .section-service-title {
        padding: 0px 0px 16px 0px;
    }
}

/* TOP サービス: 3フェーズ（Phaseチップの色は参考図に準拠）＋規模別の補足 */

/* --- PC --- */

/* --- SP --- */

/* ============================================================
   オンラインレッスン（onlinelesson/index.html・company 共通シェル）
   章見出しは heading-top を流用。各レッスンは 動画(16:9) ＋ 説明。
============================================================ */
.section-lesson {
    position: relative;
    background-color: #fcf5eb;
    background-image: url("../images/noise.svg");
}
.lesson-lead {
    text-align: center;
    color: #46463e;
    line-height: 1.9;
}
/* 動画エリア: iframe(YouTube/Vimeo) か video を差し込む。未設定時はプレースホルダ表示 */

.lesson-en {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #a7917b;
}
.lesson-title {
    font-family: "Noto Sans JP", sans-serif;
    color: #7f4d1b;
    line-height: 1.6;
}
.lesson-text {
    color: #46463e;
    line-height: 1.9;
}
.lesson-text + .lesson-text {
    padding: 8px 0px 0px 0px;
}
.lesson-price {
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #da6d00;
    letter-spacing: 0.03em;
}

/* --- PC --- */
@media (min-width: 768px) {
    .section-lesson {
        padding: 80px 60px 120px 60px;
    }
    .lesson-inner {
        max-width: 1040px;
        margin: 0px auto 0px auto;
    }
    .lesson-lead {
        font-size: 20px;
        padding: 0px 0px 24px 0px;
    }
    .lesson-chapter {
        padding: 48px 0px 0px 0px;
    }
    .lesson {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 40px;
        align-items: center;
        padding: 0px 0px 48px 0px;
    }
    .lesson:last-child {
        padding: 0px 0px 0px 0px;
    }
    .lesson-en {
        padding: 0px 0px 8px 0px;
    }
    .lesson-title {
        font-size: 24px;
        padding: 0px 0px 16px 0px;
    }
    .lesson-text {
        font-size: 15px;
    }
    .lesson-price {
        padding: 16px 0px 0px 0px;
        font-size: 15px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .section-lesson {
        padding: 48px 20px 80px 20px;
    }
    /* 可読性優先で 15px を保つ（8/4 倍数の例外＝SP改行制御用） */
    .lesson-lead {
        font-size: 15px;
        padding: 0px 0px 16px 0px;
    }
    .lesson-chapter {
        padding: 40px 0px 0px 0px;
    }
    .lesson {
        display: block;
        padding: 0px 0px 40px 0px;
    }

    .lesson-en {
        padding: 0px 0px 8px 0px;
    }
    .lesson-title {
        font-size: 20px;
        padding: 0px 0px 12px 0px;
    }
    .lesson-text {
        font-size: 14px;
    }
    .lesson-price {
        padding: 12px 0px 0px 0px;
        font-size: 14px;
    }
}
/* ハンバーガー本体: 背景は透明。円ボタンは廃止し、バーの色を背景に応じて切り替えて視認性を確保する
   （明ヘッダー／ドロワーの明パネル上＝濃茶、暗ヒーロー上(-white)＝生成り。下の __bar 定義参照） */
.hamburger {
    position: relative;
    flex: none;
    width: 63px;
    height: 63px;
    padding: 0px;
    background-color: transparent;
    border: 0px;
    border-radius: 999px;
    cursor: pointer;
}
.hamburger__container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 27px;
    height: 1px;
    transform: translate(-50%, -50%);
}
/* バーは既定を濃茶（明ヘッダー・明ドロワーパネル上で見えるよう）。暗ヒーロー上(-white)だけ生成りへ */
.hamburger__bar {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1px;
    background-color: #7f4d1b;
    transform-origin: center center;
    transition:
        transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        top 0.3s ease;
}
.site-header.-white .hamburger__bar {
    background-color: #fcf5eb;
}
/* ドロワー内の閉じる✕は常に明パネル（生成り）上に乗るため、ヘッダーが -white でも濃茶で固定して埋もれさせない */
.site-header.-white .l-drawer .hamburger__bar {
    background-color: #7f4d1b;
}
.hamburger__bar:first-child {
    transform: translateY(-6px);
}
.hamburger__bar:last-child {
    transform: translateY(6px);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
    transform: scaleX(0);
}
.hamburger[aria-expanded="true"] .hamburger__bar:first-child {
    top: 0px;
    transform: rotate(-40deg);
}
.hamburger[aria-expanded="true"] .hamburger__bar:last-child {
    top: 0px;
    transform: rotate(40deg);
}

/* 全画面ドロワー */
.l-drawer {
    display: none;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 10000;
    overflow: hidden;
}
.l-drawer.is-open {
    display: block;
}
.l-drawer__overlay {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(11, 9, 8, 0.45);
    opacity: 0;
}
.l-drawer.is-open .l-drawer__overlay {
    animation: drawerFade 0.6s ease forwards;
}
.l-drawer__panel {
    position: fixed;
    overflow: hidden;
    background-color: #fcf5eb;
    background-image: url("../images/noise.svg");
    border-radius: 20px;
    opacity: 0;
}
.l-drawer.is-open .l-drawer__panel {
    animation: drawerScale 0.7s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes drawerFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes drawerScale {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.l-drawer__scroll {
    position: relative;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}
.l-drawer__scroll::-webkit-scrollbar {
    display: none;
}
.l-drawer__close {
    position: absolute;
    z-index: 2;
}
.l-drawer__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
}
.l-drawer__link {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    color: #7f4d1b;
    line-height: 1.2;
}
.l-drawer__link:hover {
    opacity: 0.75;
}
.l-drawer__sublink {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    color: #83776a;
}
.l-drawer__sublink:hover {
    color: #926f4b;
}
/* 副メニュー群の見出し「その他」を primary の項目タイトル（l-drawer__link）と同じ体裁に */
.l-drawer__secondary-title {
    font-family: "Noto Sans JP", sans-serif;
    color: #7f4d1b;
    line-height: 1.2;
}
.l-drawer__secondary-link {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    color: #83776a;
}
.l-drawer__secondary-link:hover {
    color: #926f4b;
}
.l-drawer__mail a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #da6d00;
    letter-spacing: 0.03em;
}
.l-drawer__policy-link {
    color: #83776a;
    letter-spacing: 0.03em;
}
.l-drawer__policy-link:hover {
    color: #926f4b;
}

/* --- PC --- */
@media (min-width: 768px) {
    .l-drawer__panel {
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 30px;
    }
    .l-drawer__close {
        top: 30px;
        right: 44px;
    }
    .l-drawer__body {
        padding: 120px 80px 60px 80px;
    }
    .l-drawer__primary > li:not(:last-child) {
        margin: 0px 0px 40px 0px;
    }
    .l-drawer__link {
        font-size: 40px;
    }
    .l-drawer__sub {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 28px;
        margin: 20px 0px 0px 0px;
    }
    .l-drawer__sublink {
        font-size: 20px;
    }
    /* 「その他」を primary の項目タイトルと同じ大きさに、リンク群は sublink と同じ体裁に */
    .l-drawer__secondary-title {
        margin: 24px 0px 0px 0px;
        font-size: 40px;
    }
    .l-drawer__secondary {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 28px;
        margin: 16px 0px 0px 0px;
        padding: 0px 0px 24px 0px;
        border-bottom: 1px solid #e5d9c7;
    }
    .l-drawer__secondary-link {
        font-size: 20px;
    }
    .l-drawer__foot {
        margin: 56px 0px 0px 0px;
    }
    .l-drawer__mail a {
        font-size: 24px;
    }
    .l-drawer__policy {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 28px;
        margin: 24px 0px 0px 0px;
    }
    .l-drawer__policy-link {
        font-size: 14px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .l-drawer__panel {
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;
    }
    .l-drawer__close {
        top: 14px;
        right: 14px;
    }
    /* 閉じるボタン（48px）＋ top 14px を避ける逃がし。ボタン縮小に合わせて詰める */
    .l-drawer__body {
        padding: 72px 24px 40px 24px;
    }
    .l-drawer__primary > li:not(:last-child) {
        margin: 0px 0px 28px 0px;
    }
    .l-drawer__link {
        font-size: 30px;
    }
    .l-drawer__sub {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 12px 0px 0px 0px;
    }
    .l-drawer__sublink {
        font-size: 14px;
    }
    /* 「その他」を primary の項目タイトルと同じ大きさに、リンク群は sublink と同じ体裁に */
    .l-drawer__secondary-title {
        margin: 18px 0px 0px 0px;
        font-size: 30px;
    }
    .l-drawer__secondary {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 12px 0px 0px 0px;
        padding: 0px 0px 18px 0px;
        border-bottom: 1px solid #e5d9c7;
    }
    .l-drawer__secondary-link {
        font-size: 14px;
    }
    .l-drawer__foot {
        margin: 40px 0px 0px 0px;
    }
    .l-drawer__mail a {
        font-size: 20px;
    }
    .l-drawer__policy {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 24px 0px 0px 0px;
    }
    .l-drawer__policy-link {
        font-size: 13px;
    }
}

/* FAQ リード（中央寄せ・最大1200px。faq-inner の外に出して幅を広げる） */
.faq-lead {
    max-width: 1200px;
    margin: 0px auto 0px auto;
    text-align: center;
}
.faq-lead p {
    color: #46463e;
    line-height: 1.9;
}
/* --- PC --- */
@media (min-width: 768px) {
    .faq-lead {
        padding: 0px 0px 24px 0px;
    }
    .faq-lead p {
        font-size: 20px;
    }
}
/* --- SP --- */
@media (max-width: 767px) {
    .faq-lead {
        padding: 0px 0px 16px 0px;
    }
    .faq-lead p {
        font-size: 15px;
    }
}

/* FAQ: スクロールでフェードイン（js-trigger → is-visible）＋タップでゆっくり開閉 */
.faq-item {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}
.faq-item.is-visible {
    opacity: 1;
    transform: translateY(0px);
}
/* 回答は height を JS でアニメーション（overflow hidden で滑らかに開く） */
.faq-answer {
    overflow: hidden;
    transition: height 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* AIKK 支給ロゴ（ロゴ漢字.png・横長2段）に合わせたサイズ調整 */
.site-header-logo {
    width: auto;
}
.site-header-logo img {
    height: 60px;
    width: auto;
    max-width: none;
}
.site-footer-logo {
    width: auto;
}
.site-footer-logo img {
    height: 72px;
    width: auto;
    max-width: none;
}
@media (max-width: 767px) {
    /* SP はヘッダーを薄くするため、ロゴもバー内（48px）に収まる高さへ抑える */
    .site-header-logo img {
        height: 36px;
    }
    .site-footer-logo img {
        height: 56px;
    }
}

/* ============================================================
   ドロワー: 各liにアンダーライン ＋ 開いた時に順番に出るアニメーション
============================================================ */
.l-drawer__primary > li {
    border-bottom: 1px solid #e5d9c7;
}
@media (min-width: 768px) {
    .l-drawer__primary > li {
        padding: 0px 0px 24px 0px;
    }
    .l-drawer__primary > li:not(:last-child) {
        margin: 0px 0px 24px 0px;
    }
}
@media (max-width: 767px) {
    .l-drawer__primary > li {
        padding: 0px 0px 18px 0px;
    }
    .l-drawer__primary > li:not(:last-child) {
        margin: 0px 0px 18px 0px;
    }
}
/* 開いた瞬間に下から順に出る（primary→secondary→foot） */
.l-drawer__primary > li {
    opacity: 0;
}
.l-drawer__secondary-title,
.l-drawer__secondary {
    opacity: 0;
}
.l-drawer__foot {
    opacity: 0;
}
@keyframes drawerItemIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}
.l-drawer.is-open .l-drawer__primary > li {
    animation: drawerItemIn 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.l-drawer.is-open .l-drawer__primary > li:nth-child(1) {
    animation-delay: 0.2s;
}
.l-drawer.is-open .l-drawer__primary > li:nth-child(2) {
    animation-delay: 0.3s;
}
.l-drawer.is-open .l-drawer__primary > li:nth-child(3) {
    animation-delay: 0.4s;
}
.l-drawer.is-open .l-drawer__primary > li:nth-child(4) {
    animation-delay: 0.5s;
}
.l-drawer.is-open .l-drawer__secondary-title,
.l-drawer.is-open .l-drawer__secondary {
    animation: drawerItemIn 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s both;
}
.l-drawer.is-open .l-drawer__foot {
    animation: drawerItemIn 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s both;
}

/* 閉じる: 項目がパラパラと消えてから、パネル/オーバーレイが閉じる（is-closing 中は表示維持） */
@keyframes drawerItemOut {
    from {
        opacity: 1;
        transform: translateY(0px);
    }
    to {
        opacity: 0;
        transform: translateY(16px);
    }
}
/* 開き（計約1.4s）に対して閉じが速すぎると唐突に消えて見えるため、
   1枚あたりの時間と時差を広げて「パラパラ畳む」がゆっくり目で追える速度にする */
.l-drawer.is-closing .l-drawer__primary > li,
.l-drawer.is-closing .l-drawer__secondary-title,
.l-drawer.is-closing .l-drawer__secondary,
.l-drawer.is-closing .l-drawer__foot {
    animation: drawerItemOut 0.6s cubic-bezier(0.4, 0, 0.9, 0.6) both;
}
.l-drawer.is-closing .l-drawer__primary > li:nth-child(1) {
    animation-delay: 0s;
}
.l-drawer.is-closing .l-drawer__primary > li:nth-child(2) {
    animation-delay: 0.12s;
}
.l-drawer.is-closing .l-drawer__primary > li:nth-child(3) {
    animation-delay: 0.24s;
}
.l-drawer.is-closing .l-drawer__primary > li:nth-child(4) {
    animation-delay: 0.36s;
}
.l-drawer.is-closing .l-drawer__secondary-title,
.l-drawer.is-closing .l-drawer__secondary {
    animation-delay: 0.48s;
}
.l-drawer.is-closing .l-drawer__foot {
    animation-delay: 0.6s;
}
@keyframes drawerPanelOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}
@keyframes drawerOverlayOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* パネルは項目が畳み終わる頃（0.6s+0.6s=1.2s）に重なるよう遅らせて、ゆっくり消す */
.l-drawer.is-closing .l-drawer__panel {
    animation: drawerPanelOut 0.55s cubic-bezier(0.19, 1, 0.22, 1) 0.75s both;
}
.l-drawer.is-closing .l-drawer__overlay {
    animation: drawerOverlayOut 0.55s ease 0.75s both;
}
/* 動きを控える設定では閉じアニメも無効（即時） */
@media (prefers-reduced-motion: reduce) {
    .l-drawer.is-closing .l-drawer__primary > li,
    .l-drawer.is-closing .l-drawer__secondary-title,
    .l-drawer.is-closing .l-drawer__secondary,
    .l-drawer.is-closing .l-drawer__foot,
    .l-drawer.is-closing .l-drawer__panel,
    .l-drawer.is-closing .l-drawer__overlay {
        animation: none;
    }
}

/* ============================================================
   サービス｜3フェーズ: スクロール到達で3枚が縦に順番にスライドイン
============================================================ */

/* ============================================================
   フッター: 最大幅 1400px で中央寄せ
============================================================ */
@media (min-width: 768px) {
    .site-footer {
        max-width: none;
        margin: 0px auto 0px auto;
    }
}
/* ============================================================
   TOP: 選ばれる理由（強み）＋ 実績バッジ ＋ 大型リンク3列
============================================================ */
/* しましま（交互背景）: テクスチャ面 */
.section-strength {
    position: relative;
    background-color: #f7efe2;
}
@media (min-width: 768px) {
    .section-strength {
        padding: 120px 60px 120px 60px;
    }
    .section-links--3 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}
@media (max-width: 767px) {
    .section-strength {
        padding: 72px 20px 72px 20px;
    }
}

/* ============================================================
   細部調整（FAQ開閉回転・フッター拡大・FAQ画像・方針文字・page-linkホバー）
============================================================ */
/* FAQ: ＋→− を回転で（縦棒が90°→0°へ回転して重なり「−」に） */
.faq-toggle::before,
.faq-toggle::after {
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.faq-item[open] .faq-toggle::after {
    opacity: 1;
    transform: rotate(0deg);
}

/* フッター: 文字を大きく・ホバー下線を少し下へ */
.site-footer-nav-list {
    font-size: 18px;
}

.site-footer-address {
    font-size: 18px;
}
.site-footer-copyright {
    font-size: 16px;
}

.site-footer-nav-list a {
    padding: 0px 0px 7px 0px;
}

/* FAQ等のワイド画像: ズームを緩和（バンドを高く） */
@media (min-width: 768px) {
    .company-hero-media {
        height: 560px;
    }
}
@media (max-width: 767px) {
    .company-hero-media {
        height: 320px;
    }
}

/* 方針ページ: 文字を大きく */
@media (min-width: 768px) {
    .legal-lead {
        font-size: 17px;
    }
    .legal-text {
        font-size: 16px;
    }
    .legal-list > li {
        font-size: 16px;
    }
    .legal-sublist > li {
        font-size: 15px;
    }
    .legal-subtitle {
        font-size: 22px;
    }
}
@media (max-width: 767px) {
    .legal-lead {
        font-size: 16px;
    }
    .legal-text {
        font-size: 15px;
    }
    .legal-list > li {
        font-size: 15px;
    }
    .legal-subtitle {
        font-size: 19px;
    }
}

/* 大型リンク: ホバーで暗幕を薄くして明るく */
.page-link-background::before {
    transition: background-color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.page-link:hover .page-link-background::before {
    background-color: rgba(54, 54, 54, 0.12);
}

/* ============================================================
   沿革（History）: 中央見出し（沿革｜縦線｜History）＋ 年表テーブル
============================================================ */
.history-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.history-head-main {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #7f4d1b;
    letter-spacing: 0.16em;
}
.history-head-line {
    display: block;
    width: 1px;
    background-color: #c9b79e;
}
.history-head-sub {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.12em;
    color: #a7917b;
}
/* 沿革は li の縦タイムライン。左に点線＋ドット、スクロールで1件ずつ出す */

@media (min-width: 768px) {
    .history-head {
        padding: 0px 0px 48px 0px;
    }
    .history-head-main {
        font-size: 34px;
    }
    .history-head-line {
        height: 32px;
        margin: 20px 0px 16px 0px;
    }
    .history-head-sub {
        font-size: 12px;
    }
}
@media (max-width: 767px) {
    .history-head {
        padding: 0px 0px 32px 0px;
    }
    .history-head-main {
        font-size: 26px;
    }
    .history-head-line {
        height: 24px;
        margin: 16px 0px 12px 0px;
    }
    .history-head-sub {
        font-size: 12px;
    }
}

/* ============================================================
   フッター: 横並び（情報＝左 / ナビ＝右、著作権は下段いっぱい）
============================================================ */
@media (min-width: 768px) {
    .site-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left;
        column-gap: 64px;
        row-gap: 48px;
    }
    .site-footer-info {
        text-align: left;
    }
    .site-footer-logo {
        display: block;
    }
    .site-footer-copyright {
        width: 100%;
        text-align: left;
    }
}
@media (max-width: 767px) {
    .site-footer {
        text-align: left;
    }
}

/* ============================================================
   提供サービス スライダー（題名左＋無限オートスライド＋矢印下）
============================================================ */
/* 提供サービス: 画像＋タイトル＋説明のカード（perPage=3 で幅はスライドに追従） */
/* 下部: 長い区切りライン（———）＋大きめの丸型矢印 */
/* 矢印横の進捗ライン（———）: bar が現在位置まで伸びる（JS で scaleX 更新） */

/* ============================================================
   ⑩ 標準ヘッダー: ロゴ｜ナビ｜ボタンを1つのflex行に。スクロール時（明背景）は下地
============================================================ */
.site-header {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.site-header-logo,
.site-header-link {
    position: static;
    animation: none;
}
/* 明背景（=not -white）は生成りの紙テクスチャ（footer-bg）を敷く。暗ヒーロー上（-white）は透明 */
.site-header:not(.-white) {
    background-color: #f7efe2;
    background-image: url("../images/footer-bg.png?v=2");
    background-size: 900px auto;
    background-position: center;
    box-shadow: 0px 6px 24px -8px rgba(127, 77, 27, 0.22);
}
.site-header.-white {
    background-color: transparent;
}
@media (min-width: 768px) {
    .site-header {
        padding: 20px 48px 20px 48px;
    }
}
@media (max-width: 767px) {
    /* SP は画面が狭いのでヘッダーを薄く（48px ハンバーガー + 上下 8px = 全高 64px） */
    .site-header {
        padding: 8px 16px 8px 16px;
    }
}

/* ============================================================
   Service / Strength: 3枚を縦に積み、カード間を下向き矢印でつなぐ
   （差別化は内容で: Service=対象企業別＋要点 / Strength=3本柱＋当社の強み）
============================================================ */

/* カード間の下向き矢印（最後のカードの下には出さない） */

/* ============================================================
   TOP 当社の強み（companypr より）: 3価値を横並び（SP縦）
============================================================ */
.strength-values {
    text-align: center;
}
@media (min-width: 768px) {
    .strength-values {
        padding: 72px 0px 0px 0px;
    }
}
@media (max-width: 767px) {
    .strength-values {
        padding: 48px 0px 0px 0px;
    }
}

/* ============================================================
   TOP 選ばれる理由: 大きな番号＋見出し＋説明の縦リスト（参照 image copy 6）
============================================================ */
.reason-list {
    display: grid;
    row-gap: 16px;
    text-align: left;
    margin: 0px auto 0px auto;
}
.reason-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
}
/* しましま: 交互に薄いバンドを敷いて番号リストにリズムを出す */
.reason-item {
    background-color: rgba(255, 255, 255, 0.4);
}
.reason-num {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #dcc19a;
    line-height: 1;
}
.reason-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #362e26;
    line-height: 1.5;
}
.reason-key {
    color: #b06a3a;
}
.reason-text {
    color: #5b5346;
    line-height: 1.9;
}
@media (min-width: 768px) {
    .reason-list {
        max-width: 900px;
    }
    .reason-item {
        column-gap: 28px;
        padding: 32px 28px 32px 28px;
    }
    .reason-num {
        font-size: 60px;
    }
    .reason-title {
        font-size: 22px;
        padding: 6px 0px 14px 0px;
    }
    .reason-text {
        font-size: 15px;
    }
}
@media (max-width: 767px) {
    .reason-item {
        column-gap: 16px;
        padding: 24px 16px 24px 16px;
    }
    .reason-num {
        font-size: 40px;
    }
    .reason-title {
        font-size: 18px;
        padding: 2px 0px 10px 0px;
    }
    .reason-text {
        font-size: 14px;
    }
}

/* ============================================================
   TOP 当社の強み: canvas で有機的に流動する3ブロブ＋テキスト（WebGL 風）
============================================================ */
.strength-orbs {
    position: relative;
    width: 100%;
    aspect-ratio: 100 / 92;
    margin: 0px auto 0px auto;
}
.strength-orbs-canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
}
.strength-orbs-labels {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.strength-orb {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
}
/* canvas 側のブロブ中心（bx/by）に合わせて配置 */
.strength-orb--1 {
    top: 34%;
    left: 50%;
}
.strength-orb--2 {
    top: 66%;
    left: 30%;
}
.strength-orb--3 {
    top: 66%;
    left: 70%;
}
.strength-orb-num {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.1em;
    color: #c9a45f;
}
.strength-orb-text {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #46463e;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .strength-orbs {
        max-width: 780px;
    }
    .strength-orb-num {
        font-size: 32px;
        padding: 0px 0px 10px 0px;
    }
    .strength-orb-text {
        font-size: 24px;
    }
}
@media (max-width: 767px) {
    .strength-orbs {
        max-width: 390px;
    }
    /* SP は円が小さくラベルが被さるため、円（canvas ブロブ＝main.js updateOrbCenters）ごと
       外周側へ広げる。座標は必ず JS のブロブ中心と一致させ、ラベルは円の中心に置く */
    .strength-orb--1 {
        top: 30%;
    }
    .strength-orb--2 {
        top: 70%;
        left: 26%;
    }
    .strength-orb--3 {
        top: 70%;
        left: 74%;
    }
    .strength-orb-num {
        font-size: 13px;
        padding: 0px 0px 6px 0px;
    }
    .strength-orb-text {
        font-size: 15px;
        white-space: nowrap; /* 端寄せで shrink-to-fit により<br>指定以外の位置で折れるのを防ぐ */
    }
}

/* ============================================================
   TOP 会社案内: 会社概要を通常表示＋ボタンで /company/ へ
============================================================ */
/* しましま（交互背景）: テクスチャ面 */
.section-company-brief {
    position: relative;
    background-color: #f7efe2;
    text-align: center;
}
.company-brief-lead {
    color: #5b5346;
    line-height: 1.9;
}
.company-brief-list {
    text-align: left;
    margin: 0px auto 0px auto;
}
.company-brief-row {
    display: grid;
    border-bottom: 1px solid #e7ddd0;
}
.company-brief-term {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
}
.company-brief-desc {
    color: #46463e;
    line-height: 1.8;
}
.button-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #7f4d1b;
    color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    border-radius: 999px;
    transition: background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.button-more:hover {
    background-color: #926f4b;
}
@media (min-width: 768px) {
    .section-company-brief {
        padding: 120px 60px 120px 60px;
    }
    .company-brief-lead {
        max-width: 720px;
        margin: 0px auto 0px auto;
        font-size: 16px;
        padding: 0px 0px 40px 0px;
    }
    .company-brief-list {
        max-width: 720px;
    }
    .company-brief-row {
        grid-template-columns: 160px 1fr;
        padding: 20px 0px 20px 0px;
        column-gap: 24px;
    }
    .company-brief-term {
        font-size: 16px;
    }
    .company-brief-desc {
        font-size: 16px;
    }
    .company-brief-action {
        padding: 48px 0px 0px 0px;
    }
    .button-more {
        padding: 16px 48px 16px 48px;
        font-size: 16px;
    }
}
@media (max-width: 767px) {
    .section-company-brief {
        padding: 72px 20px 72px 20px;
    }
    .company-brief-lead {
        font-size: 15px;
        padding: 0px 0px 32px 0px;
    }
    .company-brief-row {
        grid-template-columns: 1fr;
        padding: 16px 0px 16px 0px;
        row-gap: 4px;
    }
    .company-brief-term {
        font-size: 14px;
    }
    .company-brief-desc {
        font-size: 15px;
    }
    .company-brief-action {
        padding: 36px 0px 0px 0px;
    }
    .button-more {
        padding: 15px 40px 15px 40px;
        font-size: 15px;
    }
}

/* ============================================================
   大型リンク（section-links--3）: 矢印廃止＋全幅（左右余白・gap・角丸なし、上下余白のみ）
============================================================ */

.section-links--3 {
    max-width: none;
}
.section-links--3 .page-link {
    border-radius: 0px;
}
/* 背景画像はホバー前をぼかし、カーソルを合わせるとフォーカスする。
   わずかに拡大してぼかしで生じる画像端の透け（薄い縁）をクリップ外へ逃がす */
.section-links--3 .page-link-background img {
    filter: blur(6px);
    transform: scale(1.06);
    transition:
        transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
        filter 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.section-links--3 .page-link:hover .page-link-background img {
    filter: blur(0px);
    transform: scale(1.1);
}
/* お問い合わせタイルは画像の下部寄りを見せる（下端から少し上） */
.section-links--3 .page-link--contact .page-link-background img {
    object-position: center 85%;
}
@media (min-width: 768px) {
    .section-links--3 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        column-gap: 0px;
        padding: 0px 0px 0px 0px;
    }
    /* 高さを短く（共通 380px → 260px） */
    .section-links--3 .page-link {
        height: 260px;
    }
}
@media (max-width: 767px) {
    .section-links--3 {
        grid-template-columns: 1fr;
        row-gap: 0px;
        padding: 60px 0px 60px 0px;
    }
    /* 高さを短く（共通 220px → 170px） */
    .section-links--3 .page-link {
        height: 170px;
    }
}

/* ============================================================
   統合ポリシーページ（/policy/）: 目次＋各方針の見出し＋アンカー位置補正
============================================================ */
/* 固定ヘッダー分アンカー位置を下げる（各方針へジャンプ時に隠れない） */
.section-legal[id] {
    scroll-margin-top: 96px;
}
/* セクション間の境界だけ上罫線（先頭セクションには付けない＝policy/insights 共通） */
.section-legal[id] + .section-legal[id] {
    border-top: 1px solid #ece3d6;
}
/* 各方針の見出し（英字サブ＋日本語タイトル） */
.legal-head {
    display: flex;
    flex-direction: column;
}
.legal-head-en {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.12em;
    color: #a7917b;
}
.legal-head-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
    line-height: 1.4;
}
/* 目次（ポリシー一覧） */
.legal-toc {
    background-color: #fffdf9;
    border: 1px solid #ece3d6;
    border-radius: 8px;
    margin: 0px auto 0px auto;
}
.legal-toc-link {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    color: #7f4d1b;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #a7917b 0%);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0px 1px;
    /* テキスト下端と下線の間隔（下線を少し下げて表示する） */
    padding: 0px 0px 4px 0px;
    transition: background-size 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* hover に加え、選択（クリック/タップ/キーボード）時もアンダーラインを表示 */
.legal-toc-link:hover,
.legal-toc-link:focus,
.legal-toc-link:active {
    background-size: 100% 1px;
}
@media (min-width: 768px) {
    .legal-head {
        padding: 0px 0px 24px 0px;
    }
    .legal-head-en {
        font-size: 12px;
        padding: 0px 0px 8px 0px;
    }
    .legal-head-title {
        font-size: 32px;
    }
    .legal-toc {
        max-width: 1040px;
        padding: 32px 40px 32px 40px;
        margin: 64px auto 0px auto;
    }
    /* 4項目を折り返さず横1列に並べる（policy/insights で行数を揃える） */
    .legal-toc-list {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0px 40px;
    }
    .legal-toc-link {
        font-size: 16px;
    }
}
@media (max-width: 767px) {
    .legal-head {
        padding: 0px 0px 20px 0px;
    }
    .legal-head-en {
        font-size: 11px;
        padding: 0px 0px 6px 0px;
    }
    .legal-head-title {
        font-size: 24px;
    }
    .legal-toc {
        padding: 24px 20px 24px 20px;
        margin: 40px 20px 0px 20px;
    }
    .legal-toc-list {
        display: flex;
        flex-direction: column;
        gap: 14px 0px;
    }
    .legal-toc-link {
        font-size: 15px;
    }
}

/* ============================================================
   対象企業別サービス（/service 準拠: カード＋詳細モーダル）
============================================================ */
/* しましま（交互背景）: 無地クリーム面 */
.section-solutions {
    position: relative;
    background-color: #fffdf9;
    background-image: url("../images/noise.svg");
}
/* 見出し・リードを会社案内（Company）と同じく中央寄せに（文字サイズは Service のまま） */
.solutions-head {
    text-align: center;
}
.solutions-lead {
    text-align: center;
    color: #46463e;
    line-height: 1.9;
}
/* 対象企業別ピッカー: PC＝左に画像・右に3ブロックの2カラム／SP＝画像をブロック全面の背景に敷く。
   選択が自動で送られ、画像が下からめくり上がって切り替わる。スクロールで浮き上がる */
.solutions-picker {
    display: grid;
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.solutions-picker.is-visible {
    opacity: 1;
    transform: translateY(0px);
}
.solutions-figure-img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    z-index: 1; /* 使っていない画像は完全背面で非表示 */
}
/* 直前まで表示していた画像。新画像がめくり終わるまで全面表示のまま下地に残す
   ＝切替中もどこかが常にフル表示になり「一瞬消える」を防ぐ（フェードしない） */
.solutions-figure-img.is-leaving {
    opacity: 1;
    z-index: 2;
}
/* アクティブ画像は最前面・不透明のまま、下端から段々とめくり上がって下地(is-leaving)を覆う
   （clip-path で下→上へリビール。opacity は動かさないので半透明にならない） */
.solutions-figure-img.is-active {
    opacity: 1;
    z-index: 3;
    animation: solutions-figure-reveal 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes solutions-figure-reveal {
    from {
        clip-path: inset(100% 0px 0px 0px);
    } /* 上を100%クリップ＝下端だけ見える状態から */
    to {
        clip-path: inset(0px 0px 0px 0px);
    } /* 全面表示へ（下→上に開く） */
}
/* モーション控えめ設定では、めくり上げを止めて静かなフェードのみに */
@media (prefers-reduced-motion: reduce) {
    .solutions-figure-img.is-active {
        animation: none;
    }
}
/* 右: 対象企業別の下線タブ（背景・角丸・影を持たず、状態は「色＋伸びる下線」で表す） */
.solutions-tabs {
    display: flex;
    flex-direction: column;
}
.solutions-tab {
    position: relative; /* ::after 下線のアンカー */
    display: block;
    width: 100%;
    text-align: left;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #a08f7c; /* 未選択 */
    background: transparent; /* 塗らない（editorial 下線 UI の不変条件） */
    border: 0px solid transparent;
    border-bottom: 1px solid #e4d9cc; /* 行のベースライン */
    cursor: pointer;
    transition: color 0.3s ease;
}
.solutions-tab::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 0px; /* 選択で 0 → 100% に「実幅で」伸びる */
    height: 2px;
    background-color: #c9a45f;
    transition: width 0.5s ease;
}
.solutions-tab.is-active {
    color: #7f4d1b;
}
.solutions-tab.is-active::after {
    width: 100%;
    box-shadow: 0 0 10px rgba(201, 164, 95, 0.6); /* 選択中の下線をほのかに光らせる */
}
/* 右: 詳細は3つとも常時表示。選択中／非選択の差だけを色で付け、選択中は光らせる */
.solutions-detail-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #bfae97; /* 非選択はくすませる */
    line-height: 1.5;
    transition: color 0.4s ease;
}
/* 選択中: 金の光がタイトルを左右に走る（本家 heading-flash を流用）＝「光る」 */
.solutions-detail.is-active .solutions-detail-title {
    background-image: linear-gradient(
        300deg,
        rgb(74, 54, 30) 30%,
        rgb(201, 141, 32) 50%,
        rgb(74, 54, 30) 70%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: heading-flash 6s linear infinite;
}
.solutions-detail-text {
    color: #8b8478; /* 非選択はくすませる（可読性は保つ） */
    line-height: 1.9;
    transition: color 0.4s ease;
}
.solutions-detail.is-active .solutions-detail-text {
    color: #4f4740;
}

.solutions-note {
    text-align: center;
    color: #83776a;
    line-height: 1.9;
}

@media (min-width: 768px) {
    /* 画像を大きくした分、左右パディングを詰めて本文の幅を確保する */
    .section-solutions {
        padding: 120px 48px 120px 48px;
    }
    /* 見出し「サービス｜対象企業別のご支援」の下に余白を確保 */
    .solutions-head {
        padding: 0px 0px 32px 0px;
    }
    .solutions-lead {
        font-size: 16px;
        padding: 0px 0px 56px 0px;
    }
    /* PC: 左＝画像（平行四辺形マスク）・右＝3ブロックの2カラム（従来レイアウト） */
    .solutions-picker {
        grid-template-columns: minmax(320px, 460px) 1fr;
        gap: 0px 80px;
        align-items: center; /* 左画像を右カラムに対して上下中央に */
        max-width: 1280px;
        margin: 0px auto 0px auto;
    }
    .solutions-figure {
        position: relative;
        width: 100%;
        max-width: 460px;
        justify-self: center; /* カラム内で左右中央に置く */
        aspect-ratio: 947 / 897;
        -webkit-mask-image: url("../images/seg-shape-mask.png");
        mask-image: url("../images/seg-shape-mask.png");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    /* 3ブロックの間隔（広め） */
    .solutions-tab-item {
        margin: 0px 0px 52px 0px;
    }
    .solutions-tab-item:last-child {
        margin: 0px 0px 0px 0px;
    }
    .solutions-tab {
        padding: 20px 0px 20px 0px;
        font-size: 19px;
    }
    /* タブ見出しと本文タイトルの間隔 */
    .solutions-detail-inner {
        padding: 16px 0px 0px 0px;
    }
    /* ホバーで伸びる下線は PC だけ有効にする */
    .solutions-tab:hover {
        color: #7f4d1b;
    }
    .solutions-tab:hover::after {
        width: 100%;
    }
    .solutions-detail-title {
        font-size: 26px;
        padding: 0px 0px 16px 0px;
    }
    .solutions-detail-text {
        font-size: 16px;
        padding: 0px 0px 12px 0px;
    }
    .solutions-note {
        font-size: 15px;
        padding: 48px 0px 0px 0px;
    }
}
@media (max-width: 767px) {
    .section-solutions {
        padding: 72px 24px 72px 24px;
    }
    /* 見出し「サービス｜対象企業別のご支援」の下に余白を確保 */
    .solutions-head {
        padding: 0px 0px 20px 0px;
    }
    /* 14文字と長い見出しのため、28px のままだと「サービス｜」で折れる。1行に収める */
    .solutions-head .heading-top-main {
        font-size: 20px;
    }
    .solutions-lead {
        font-size: 15px;
        padding: 0px 0px 40px 0px;
    }
    /* SP: 上下に分けず、画像をブロック全面の背景に敷く。高さは前面の solutions-content が決める */
    .solutions-picker {
        position: relative;
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0px auto 0px auto;
        overflow: hidden;
        border-radius: 8px;
    }
    .solutions-figure {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        z-index: 0;
        /* clip-path の合成アニメ中に親の角丸クリップが外れても四隅が丸く保たれるよう、figure 自身でもクリップする */
        overflow: hidden;
        border-radius: 8px;
        /* PC と同じ平行四辺形マスクで背景を切り抜く（スクリム ::after ごと同じ形になる） */
        -webkit-mask-image: url("../images/seg-shape-mask.png");
        mask-image: url("../images/seg-shape-mask.png");
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    /* 生成りの半透明スクリム: 画像の切替は透かしつつ、茶系の文字色の可読性を保つ */
    .solutions-figure::after {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        z-index: 4; /* 重ねた画像3枚（z-index 1〜3）より前面 */
        background-color: rgba(252, 245, 235, 0.82);
        pointer-events: none;
    }
    .solutions-content {
        position: relative;
        z-index: 1; /* 背景画像（solutions-figure）より前面 */
        padding: 24px 20px 24px 20px;
    }
    .solutions-tab-item {
        margin: 0px 0px 36px 0px;
    }
    .solutions-tab-item:last-child {
        margin: 0px 0px 0px 0px;
    }
    .solutions-tab {
        padding: 16px 0px 16px 0px;
        font-size: 17px;
    }
    .solutions-detail-inner {
        padding: 14px 0px 0px 0px;
    }
    .solutions-detail-title {
        font-size: 21px;
        padding: 0px 0px 12px 0px;
    }
    .solutions-detail-text {
        font-size: 15px;
        padding: 0px 0px 12px 0px;
    }
    .solutions-note {
        font-size: 14px;
        padding: 36px 0px 0px 0px;
    }
}

/* ============================================================
   フッター背景: 生成りの紙テクスチャ（footer-bg）。ヘッダーと統一
============================================================ */
.site-footer {
    background-color: #f7efe2;
    background-image: url("../images/footer-bg.png?v=2");
    background-size: cover;
    background-position: center;
}

/* ============================================================
   サービスページ（/service/）
============================================================ */
/* 共通リビール（js-trigger → is-visible） */
.philosophy-body {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.philosophy-body.is-visible {
    opacity: 1;
    transform: translateY(0px);
}

/* 対象企業別: service-block はブロック一斉ではなく、丸写真＋service-body の中身を
   パラパラ（時間差）に表示する。親はフェードさせず、図と本文の各要素をリビール */
.service-figure,
.service-body > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.service-block.is-visible .service-figure,
.service-block.is-visible .service-body > * {
    opacity: 1;
    transform: translateY(0px);
}
.service-block.is-visible .service-figure {
    transition-delay: 0s;
}
.service-block.is-visible .service-body > *:nth-child(1) {
    transition-delay: 0.12s;
}
.service-block.is-visible .service-body > *:nth-child(2) {
    transition-delay: 0.2s;
}
.service-block.is-visible .service-body > *:nth-child(3) {
    transition-delay: 0.28s;
}
.service-block.is-visible .service-body > *:nth-child(4) {
    transition-delay: 0.36s;
}
.service-block.is-visible .service-body > *:nth-child(5) {
    transition-delay: 0.44s;
}
.service-block.is-visible .service-body > *:nth-child(6) {
    transition-delay: 0.52s;
}

/* セクション背景をシマシマ（ゼブラ）に。奇数=薄クリーム / 偶数=濃クリーム。
   ページ順: 理念 → 事業内容 → 対象企業別 → 提供サービス一覧 → 経営戦略メニュー → ご契約フェーズ。
   セクションの増減に追従するよう nth-of-type で自動的に縞を割り当てる（noise 画像は各 base 側で維持） */
.page-service main > section:nth-of-type(odd) {
    background-color: #fffdf9;
}
.page-service main > section:nth-of-type(even) {
    background-color: #f6ede0;
}
/* 導入事例ページはシマシマ: セクションを交互に「薄クリーム平面」と
   「実績・導入事例(section-works)と同じ紙テクスチャ画像 footer-bg.png」で敷き分ける。
   一部（偶数）のセクションだけ背景画像 → 明暗の帯（シマシマ）になる。
   section-usecase/philosophy の noise 背景より高詳細度で上書きされる。*/
.page-usecases main > section:nth-of-type(odd) {
    background-color: #fffdf9;
    background-image: url("../images/noise.svg");
}
.page-usecases main > section:nth-of-type(even) {
    background-color: #f7efe2;
    background-image: url("../images/footer-bg.png?v=2");
    background-size: cover;
    background-position: center;
}

/* 理念（風の時代のAI経営戦略） */
.section-philosophy {
    position: relative;
    background-color: #fffdf9;
    background-image: url("../images/noise.svg");
    text-align: center;
}
.philosophy-body {
    margin: 0px auto 0px auto;
}
.philosophy-catch {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
    line-height: 1.7;
}
.philosophy-text {
    color: #46463e;
    line-height: 2;
}

/* 対象企業別のご支援 */
.section-segments {
    position: relative;
    background-color: #fcf5eb;
    background-image: url("../images/noise.svg");
}
.segments-lead {
    text-align: center;
    color: #46463e;
    line-height: 1.9;
}
/* 画像＋テキストを左右交互に並べる（sample-3 の service-block を AIKK 配色へ調整）。
   写真は真円クロップ、和名／英名は radial-gradient のドットラベルに載せる */
.service-blocks {
    margin: 0px auto 0px auto;
}
.service-figure {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 50%;
}
.service-figure img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* 対象企業別の画像（3ブロック共通）: image copy.png の平行四辺形（斜め skewX 17.5°）で
   マスク。枠比を image copy.png(947×897)に合わせて形を歪ませない。各 seg 画像は cover。*/
.section-segments .service-figure {
    max-width: 460px;
    aspect-ratio: 947 / 897;
    overflow: hidden;
    border-radius: 0px; /* ベースの真円(border-radius:50%)を解除（残るとマスクと交差して丸まる） */
    -webkit-mask-image: url("../images/seg-shape-mask.png");
    mask-image: url("../images/seg-shape-mask.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
@media (max-width: 767px) {
    .section-segments .service-figure {
        max-width: 320px;
    }
}
.service-label-jp {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #7f4d1b;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.service-label-en {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #a7917b;
    letter-spacing: 0.08em;
    line-height: 1;
}
.service-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #362e26;
    line-height: 1.5;
}
.service-text {
    color: #5b5346;
    line-height: 1.9;
}
.service-text + .service-text {
    padding-top: 12px;
}
.segment-services-title {
    font-family: "Noto Sans JP", sans-serif;
    color: #926f4b;
    border-top: 1px solid #ece3d6;
}
.segment-services > li {
    position: relative;
    color: #46463e;
    line-height: 1.7;
}
.segment-services > li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: #c9a45f;
}

/* 提供サービス一覧（11） */
.section-svc-list {
    position: relative;
    background-color: #fffdf9;
    background-image: url("../images/noise.svg");
}
.svc-list-lead {
    text-align: center;
    color: #46463e;
    line-height: 1.9;
}

/* TOP solutions セクションの「詳細を見る」ボタン */
.solutions-action {
    text-align: center;
}

@media (min-width: 768px) {
    .section-philosophy {
        padding: 120px 60px 120px 60px;
    }
    .philosophy-head {
        padding: 0px 0px 40px 0px;
    }
    .philosophy-body {
        max-width: 760px;
    }
    .philosophy-catch {
        font-size: 22px;
        padding: 0px 0px 12px 0px;
    }
    .philosophy-text {
        font-size: 16px;
        padding: 0px 0px 18px 0px;
    }

    .section-segments {
        padding: 120px 60px 120px 60px;
    }
    .segments-lead {
        font-size: 16px;
        padding: 0px 0px 56px 0px;
    }
    .service-blocks {
        max-width: 1080px;
        margin: 0px auto 0px auto;
    }
    .service-block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        column-gap: 64px;
    }
    .service-block:not(:last-child) {
        margin: 0px 0px 72px 0px;
    }
    .service-block--reverse .service-figure {
        order: 2;
    }
    .service-block--reverse .service-body {
        order: 1;
    }
    .service-figure {
        max-width: 460px;
        margin: 0px auto 0px auto;
        aspect-ratio: 1 / 1;
    }
    .service-label {
        margin: 0px 0px 18px 0px;
    }
    .service-label-jp {
        font-size: 22px;
        margin: 0px 0px 6px 0px;
    }
    .service-label-en {
        font-size: 14px;
    }
    .service-title {
        font-size: 24px;
        padding: 0px 0px 20px 0px;
    }
    .service-text {
        font-size: 15px;
    }
    .segment-services-title {
        font-size: 14px;
        padding: 24px 0px 12px 0px;
        margin: 12px 0px 0px 0px;
    }
    .segment-services {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 32px;
    }
    .segment-services > li {
        font-size: 15px;
        padding: 0px 0px 0px 18px;
    }

    .section-svc-list {
        padding: 120px 60px 120px 60px;
    }
    .svc-list-lead {
        font-size: 16px;
        padding: 0px 0px 56px 0px;
    }

    .solutions-action {
        padding: 48px 0px 0px 0px;
    }
}
@media (max-width: 767px) {
    .section-philosophy {
        padding: 72px 24px 72px 24px;
    }
    .philosophy-head {
        padding: 0px 0px 32px 0px;
    }
    .philosophy-catch {
        font-size: 18px;
        padding: 0px 0px 10px 0px;
    }
    /* 可読性優先で 15px を保つ（8/4 倍数の例外＝SP改行制御用）。収まらない長文は u-sp-on の追加改行で分ける */
    .philosophy-text {
        font-size: 15px;
        padding: 0px 0px 16px 0px;
    }

    .section-segments {
        padding: 72px 24px 72px 24px;
    }
    .segments-lead {
        font-size: 15px;
        padding: 0px 0px 40px 0px;
    }
    /* SP: 文章を上・画像を下に積む（結論から読ませる）。DOM は 画像 → 文章 のため order で入れ替える */
    .service-block {
        display: flex;
        flex-direction: column;
        row-gap: 24px;
    }
    .service-block:not(:last-child) {
        margin: 0px 0px 48px 0px;
    }
    .service-figure {
        order: 2;
        max-width: 280px;
        margin: 0px auto 0px auto;
        aspect-ratio: 1 / 1;
    }
    .service-body {
        order: 1;
    }
    .service-label {
        margin: 0px 0px 14px 0px;
    }
    .service-label-jp {
        font-size: 19px;
        margin: 0px 0px 4px 0px;
    }
    .service-label-en {
        font-size: 13px;
    }
    .service-title {
        font-size: 20px;
        padding: 0px 0px 16px 0px;
    }
    .service-text {
        font-size: 14px;
    }
    .segment-services-title {
        font-size: 13px;
        padding: 20px 0px 12px 0px;
        margin: 12px 0px 0px 0px;
    }
    .segment-services {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }
    .segment-services > li {
        font-size: 14px;
        padding: 0px 0px 0px 18px;
    }
    .segment-services > li::before {
        top: 10px;
    }

    .section-svc-list {
        padding: 72px 24px 72px 24px;
    }
    /* 可読性優先で 15px を保つ（8/4 倍数の例外＝SP改行制御用）。長い行は u-sp-on の追加改行で分ける */
    .svc-list-lead {
        font-size: 15px;
        padding: 0px 0px 40px 0px;
    }

    .solutions-action {
        padding: 36px 0px 0px 0px;
    }
}

/* 固定ヘッダー分、アンカージャンプ位置を補正（コンセプト・サービス各所） */
#concept,
#service,
.section-segments .service-block[id] {
    scroll-margin-top: 96px;
}

/* ============================================================
   見出しの金フラッシュ（各クラスの color 定義より後に置き後勝ちさせる）
   ここを最後に定義することで下層の color: #7f4d1b 等を上書きしグローを効かせる
============================================================ */
/* 金色の光が一定間隔で繰り返し走る（本家 heading-flash を無限化・茶系見出し共通） */
.heading-top-main,
.page-hero-title,
.lesson-title,
.legal-head-title,
.history-head-main,
.problem-hook,
.works-card-title,
/* 濃茶の見出しは地色を保って金の光を走らせる */
.service-title {
    background-image: linear-gradient(
        300deg,
        rgb(54, 46, 38) 30%,
        rgb(197, 136, 23) 50%,
        rgb(54, 46, 38) 70%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: heading-flash 6s linear infinite;
}

/* ============================================================
   提供サービス slider: スクロールで1枚ずつパラパラと表示
   loop のクローンにも掛かるが画面外のため不可視。実スライドの
   transition-delay は main.js で登場順に付与する（クローンは0）
============================================================ */

/* 会社案内の見出し→リード間隔を「選ばれる理由」と同じに揃える */
@media (min-width: 768px) {
    .company-brief-head {
        padding: 0px 0px 24px 0px;
    }
}
@media (max-width: 767px) {
    .company-brief-head {
        padding: 0px 0px 16px 0px;
    }
}

/* problem: concept-title-main と同じ登場（fade-tilt の斜めマスクワイプ＋金フラッシュ16s）。
   .problem-inner は js-trigger（is-visible 付与）のトリガー役のみで、自身はフェードさせない */
.problem-en,
.problem-hook,
.problem-lead {
    opacity: 0;
}
.problem-inner.is-visible .problem-en {
    animation: fade-tilt 0.6s cubic-bezier(0, 0.25, 1, 1) both;
}
.problem-inner.is-visible .problem-hook {
    animation:
        fade-tilt 1.6s cubic-bezier(0, 0.25, 1, 1) both,
        heading-flash 16s linear infinite 3s;
}
.problem-inner.is-visible .problem-lead {
    animation: fade-tilt 1s cubic-bezier(0, 0.25, 1, 1) 0.3s both;
}

/* ------------------------------------------------------------
   Hero 追加: 実績バッジ帯 + 主CTA（暗いヒーロー上＝白文字）
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   problem（なぜ今、AI経営か）: 明るい生成り面に大きな危機感コピー
   ------------------------------------------------------------ */
.section-problem {
    position: relative;
    background-color: #fffdf9;
    background-image: url("../images/noise.svg");
    text-align: center;
}
.problem-en {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.24em;
    color: #a7917b;
}
.problem-hook {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
    line-height: 1.7;
}
.problem-hook-line {
    display: block;
}
.problem-lead {
    color: #5b5346;
    line-height: 2;
}

/* ------------------------------------------------------------
   works（実績・導入事例）: 一段濃い生成り面に4枚の実績カード
   ------------------------------------------------------------ */
/* しましま（交互背景）: テクスチャ面 */
.section-works {
    position: relative;
    background-color: #f7efe2;
    background-image: url("../images/footer-bg.png?v=2");
    background-size: cover;
    background-position: center;
    text-align: center;
}
.works-head {
    text-align: center;
}
.works-lead {
    color: #5b5346;
    line-height: 1.9;
}
.works-list {
    display: grid;
    text-align: left;
}
.works-card {
    background-color: #fffdf9;
    border: 1px solid #e7ddd0;
    border-radius: 8px;
}
.works-card-en {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.12em;
    color: #c9a45f;
}
.works-card-client {
    color: #8a7f70;
}
.works-card-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
    line-height: 1.5;
}
.works-card-text {
    color: #46463e;
    line-height: 1.9;
}

/* ------------------------------------------------------------
   message（代表メッセージ）: 左に肖像・右に本文の2カラム（SPは縦積み）
   ------------------------------------------------------------ */
.section-message {
    position: relative;
    background-color: #fffdf9;
    background-image: url("../images/noise.svg");
}
.message-inner {
    display: grid;
    align-items: center;
    margin: 0px auto 0px auto;
}
.message-portrait {
    overflow: hidden;
    border-radius: 8px;
}
.message-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.message-text p {
    color: #46463e;
    line-height: 2;
}
.message-name-role {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.08em;
    color: #a7917b;
}
.message-name-main {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #362e26;
}
.message-name-note {
    display: block;
    color: #8a7f70;
    line-height: 1.7;
}

/* 副導線（オンラインレッスン / FAQ）2列: 既存 --3 と同じ全幅・角丸なし */

/* ------------------------------------------------------------
   PC（min-width: 768px）
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    /* Hero 追加 */

    /* problem */
    .section-problem {
        padding: 120px 60px 120px 60px;
    }
    .problem-inner {
        max-width: 900px;
        margin: 0px auto 0px auto;
    }
    .problem-en {
        font-size: 13px;
        padding: 0px 0px 28px 0px;
    }
    .problem-hook {
        font-size: 40px;
        padding: 0px 0px 40px 0px;
    }
    .problem-lead {
        max-width: 720px;
        margin: 0px auto 0px auto;
        font-size: 17px;
    }
    .problem-lead p:not(:last-child) {
        padding: 0px 0px 12px 0px;
    }

    /* works */
    .section-works {
        padding: 120px 60px 120px 60px;
    }
    .works-head {
        padding: 0px 0px 40px 0px;
    }
    .works-lead {
        font-size: 16px;
        padding: 0px 0px 28px 0px;
    }
    .works-list {
        grid-template-columns: 1fr;
        gap: 20px 0px;
        max-width: 1120px;
        margin: 0px auto 0px auto;
    }
    .works-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 48px;
        padding: 36px 48px 36px 48px;
    }
    .works-card-en {
        grid-row: 1 / span 3;
        align-self: center;
        font-size: 64px;
        color: #dcc19a;
        padding: 0px 24px 0px 0px;
    }
    .works-card-client {
        font-size: 13px;
        padding: 0px 0px 8px 0px;
    }
    .works-card-title {
        font-size: 20px;
        padding: 0px 0px 16px 0px;
    }
    .works-card-text {
        font-size: 14px;
    }

    /* message */
    .section-message {
        padding: 120px 60px 120px 60px;
    }
    .message-inner {
        max-width: 1200px;
        grid-template-columns: 420px 1fr;
        column-gap: 64px;
    }
    .message-portrait {
        aspect-ratio: 4 / 5;
    }
    .message-head {
        padding: 0px 0px 32px 0px;
    }
    .message-text {
        padding: 0px 0px 32px 0px;
    }
    .message-text p {
        font-size: 16px;
    }
    .message-text p:not(:last-child) {
        padding: 0px 0px 16px 0px;
    }
    .message-name {
        padding: 0px 0px 40px 0px;
    }
    .message-name-role {
        font-size: 13px;
        padding: 0px 0px 8px 0px;
    }
    .message-name-main {
        font-size: 24px;
        padding: 0px 0px 12px 0px;
    }
    .message-name-note {
        font-size: 13px;
    }

    /* ステップ間の右向き矢印（gap の中に置く。最後は無し） */

    /* 副導線 2列 */
}

/* ------------------------------------------------------------
   SP（max-width: 767px）
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* ヘッダー常設CTA は SP では隠す（ドロワー＋最終CTAへ集約し、はみ出しを防ぐ） */
    .site-header-link .button-cv {
        display: none;
    }

    /* Hero テキスト枠に右端を与え、バッジ・ボタンを折り返させる */
    .section-hero-text {
        right: 20px;
    }

    /* problem */
    .section-problem {
        padding: 72px 20px 72px 20px;
    }
    .problem-en {
        font-size: 12px;
        padding: 0px 0px 20px 0px;
    }
    .problem-hook {
        font-size: 24px;
        padding: 0px 0px 28px 0px;
    }
    /* フック2行はSPで詰まらないよう見出しより一段小さい指定サイズにする */
    .problem-hook-line {
        font-size: 18px;
    }
    .problem-lead {
        font-size: 15px;
    }
    .problem-lead p:not(:last-child) {
        padding: 0px 0px 12px 0px;
    }

    /* works */
    .section-works {
        padding: 72px 20px 72px 20px;
    }
    .works-head {
        padding: 0px 0px 16px 0px;
    }
    .works-lead {
        font-size: 15px;
        padding: 0px 0px 18px 0px;
    }
    .works-list {
        grid-template-columns: 1fr;
        gap: 16px 16px;
    }
    .works-card {
        padding: 28px 20px 28px 20px;
    }
    .works-card-en {
        font-size: 24px;
        padding: 0px 0px 14px 0px;
    }
    .works-card-client {
        font-size: 12px;
        padding: 0px 0px 6px 0px;
    }
    .works-card-title {
        font-size: 18px;
        padding: 0px 0px 12px 0px;
    }
    .works-card-text {
        font-size: 14px;
    }

    /* message */
    .section-message {
        padding: 72px 20px 72px 20px;
    }
    .message-inner {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    /* 文章を上・画像を下へ積み替え（結論から読ませる）。縦長写真を 4/3 で切ると
       人物が途中で切れるため、原寸比のまま全体を見せる */
    .message-portrait {
        order: 2;
        aspect-ratio: auto;
    }
    .message-body {
        order: 1;
    }
    .message-head {
        padding: 0px 0px 24px 0px;
    }
    .message-text {
        padding: 0px 0px 24px 0px;
    }
    .message-text p {
        font-size: 15px;
    }
    .message-text p:not(:last-child) {
        padding: 0px 0px 14px 0px;
    }
    .message-name {
        padding: 0px 0px 28px 0px;
    }
    .message-name-role {
        font-size: 12px;
        padding: 0px 0px 6px 0px;
    }
    .message-name-main {
        font-size: 20px;
        padding: 0px 0px 10px 0px;
    }
    .message-name-note {
        font-size: 12px;
    }

    /* ステップ間の下向き矢印（縦積み時。最後は無し） */

    /* 副導線 2列（SPは縦積み） */
}

/* ============================================================
   所在地マップ: 会社案内の下にグレースケール（グレーアウト）で表示
============================================================ */
.map-frame {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0px auto 0px auto;
    overflow: hidden;
    border-radius: 8px;
    filter: grayscale(1);
    transition: filter 0.5s ease;
}
.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0px;
}
@media (min-width: 768px) {
    .company-brief-map {
        padding: 48px 0px 0px 0px;
    }
    .map-frame {
        height: 520px;
    }
}
@media (max-width: 767px) {
    .company-brief-map {
        padding: 36px 0px 0px 0px;
    }
    .map-frame {
        height: 380px;
    }
}

/* SP はヘッダー全体を薄く保つため、ハンバーガーはタップ最小サイズ（44px）を満たす 48px に抑える */
@media (max-width: 767px) {
    .hamburger {
        width: 48px;
        height: 48px;
    }
}

/* problem-hook: concept 見出しと同じ金の光（明背景のため茶→金グラデ）。末尾で color を上書き */
.problem-hook {
    background-image: linear-gradient(
        300deg,
        rgb(127, 77, 27) 30%,
        rgb(197, 136, 23) 50%,
        rgb(127, 77, 27) 70%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.06em;
    animation: heading-flash 6s linear infinite;
}

/* 会社概要の各行をスクロールでばらばらにフェードイン（list に js-trigger→is-visible）*/
.company-brief-list .company-brief-row {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.company-brief-list.is-visible .company-brief-row {
    opacity: 1;
    transform: translateY(0px);
}
.company-brief-list.is-visible .company-brief-row:nth-child(2) {
    transition-delay: 0.12s;
}
.company-brief-list.is-visible .company-brief-row:nth-child(3) {
    transition-delay: 0.24s;
}
.company-brief-list.is-visible .company-brief-row:nth-child(4) {
    transition-delay: 0.36s;
}

/* マップ: カーソルを合わせるとグレースケール解除（色付き）*/
.map-frame:hover {
    filter: grayscale(0);
}

/* 代表メッセージ本文の各文をスクロールで1つずつ表示（message-inner に is-visible）*/
.message-text p {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.message-inner.is-visible .message-text p {
    opacity: 1;
    transform: translateY(0px);
}
.message-inner.is-visible .message-text p:nth-child(2) {
    transition-delay: 0.12s;
}
.message-inner.is-visible .message-text p:nth-child(3) {
    transition-delay: 0.24s;
}
.message-inner.is-visible .message-text p:nth-child(4) {
    transition-delay: 0.36s;
}
.message-inner.is-visible .message-text p:nth-child(5) {
    transition-delay: 0.48s;
}

/* ドロワー詳細リンクのジャンプ先が固定ヘッダーに隠れないよう余白確保 */
#problem,
#svc-list,
#company-profile,
#company-representative,
#company-history,
#company-access {
    scroll-margin-top: 96px;
}

/* フッターナビのフォント（太さ・色・字面）を住所に合わせる（body=300, #362e26 を明示）*/
.site-footer-nav-list {
    font-weight: 300;
    color: #362e26;
    letter-spacing: 0.03em;
}

/* ============================================================
   TOP インサイト（現行 idea を再編集）: コラムカード（しましま=無地面）
============================================================ */
.section-insights {
    position: relative;
    background-color: #fffdf9;
    background-image: url("../images/noise.svg");
    text-align: center;
}
.insights-head {
    text-align: center;
}
.insights-lead {
    color: #5b5346;
    line-height: 1.9;
}
.insights-list {
    display: grid;
    text-align: left;
}
.insight-card {
    background-color: #ffffff;
    border: 1px solid #e7ddd0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.insight-card:hover {
    transform: translateY(-4px);
}
.insight-card-link {
    display: grid;
    height: 100%;
}
.insight-card-cat {
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.08em;
    color: #c58817;
}
.insight-card-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #7f4d1b;
    line-height: 1.5;
}
.insight-card-text {
    color: #46463e;
    line-height: 1.9;
}
.insight-card-more {
    display: inline-block;
    color: #926f4b;
    padding: 0px 0px 2px 0px;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #926f4b 0%);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 1px;
}
@media (min-width: 768px) {
    .section-insights {
        padding: 120px 60px 120px 60px;
    }
    .insights-head {
        padding: 0px 0px 20px 0px;
    }
    .insights-lead {
        font-size: 16px;
        padding: 0px 0px 56px 0px;
    }
    .insights-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 24px;
        max-width: 1000px;
        margin: 0px auto 0px auto;
    }
    .insight-card-link {
        grid-template-columns: 42% 1fr;
    }
    .insight-card-cat {
        font-size: 12px;
        padding: 0px 0px 16px 0px;
    }
    .insight-card-title {
        font-size: 18px;
        padding: 0px 0px 14px 0px;
    }
    .insight-card-text {
        font-size: 14px;
        padding: 0px 0px 16px 0px;
    }
    .insight-card-more {
        font-size: 13px;
    }
    .insights-action {
        padding: 56px 0px 0px 0px;
    }
}
@media (max-width: 767px) {
    .section-insights {
        padding: 72px 20px 72px 20px;
    }
    .insights-head {
        padding: 0px 0px 16px 0px;
    }
    .insights-lead {
        font-size: 15px;
        padding: 0px 0px 32px 0px;
    }
    .insights-list {
        grid-template-columns: 1fr;
        gap: 16px 0px;
    }
    .insight-card-link {
        grid-template-columns: 1fr;
    }
    .insight-card-cat {
        font-size: 11px;
        padding: 0px 0px 12px 0px;
    }
    .insight-card-title {
        font-size: 17px;
        padding: 0px 0px 12px 0px;
    }
    .insight-card-text {
        font-size: 14px;
        padding: 0px 0px 12px 0px;
    }
    .insight-card-more {
        font-size: 13px;
    }
    .insights-action {
        padding: 36px 0px 0px 0px;
    }
}

/* ============================================================
   インサイト: 反転フリップカード（sample.html「top-company」レイアウトを AIKK 配色へ移植）
   背面に画像、前面は白カード（番号＋カテゴリ＋記事タイトル＋矢印）。ホバーで前面が
   ダークブラウンに反転しつつ画像がスライドし、番号・文字・矢印が反転する。PC は段違い配置。
============================================================ */
.insight-flip {
    display: grid;
    margin: 0px auto 0px auto;
    text-align: left;
}
.insight-flip__item {
    position: relative;
}
.insight-flip__link {
    display: block;
    position: relative;
    height: 100%;
}
.insight-flip__back {
    z-index: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 15px;
    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.insight-flip__img {
    position: relative;
    height: 100%;
    margin: 0px 0px 0px 0px;
}
.insight-flip__img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.insight-flip__front {
    display: flex;
    z-index: 1;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #ece3d6;
    border-radius: 15px;
    transition:
        transform 0.6s cubic-bezier(0.86, 0, 0.07, 1),
        background-color 0.6s cubic-bezier(0.86, 0, 0.07, 1),
        border-color 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.insight-flip__num {
    display: inline-block;
    position: relative;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    text-align: center;
}
.insight-flip__num::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(
        to right,
        #e7d6b0 0%,
        rgba(240, 233, 220, 0.78) 40%,
        rgba(250, 240, 225, 0.76) 60%,
        #fff9e5 100%
    );
    transition: opacity 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.insight-flip__num-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #7f4d1b;
    font-size: 15px;
    transition: color 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.insight-flip__title {
    color: #46463e;
    line-height: 1.5;
    transition: color 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.insight-flip__title-en {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.04em;
    color: #a7917b;
    transition: color 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.insight-flip__title-ja {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}
.insight-flip__arrow {
    position: relative;
    width: 75px;
    height: 25px;
    margin: 0px 0px 0px auto;
    overflow: hidden;
    border: 1px solid #ece3d6;
    border-radius: 14px;
    transition:
        border-color 0.6s cubic-bezier(0.86, 0, 0.07, 1),
        background-color 0.6s cubic-bezier(0.86, 0, 0.07, 1);
}
.insight-flip__arrow svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 11px;
    transform: translate(-50%, -50%);
    transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.insight-flip__arrow svg:last-child {
    left: -100%;
}
.insight-flip__arrow svg path {
    fill: #7f4d1b;
    transition: fill 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* ホバー: 前面がダークに反転しながら下へ、背面画像が上へスライド */
.insight-flip__item:hover .insight-flip__back {
    transform: translate(10px, -100px) rotate(4deg);
}
.insight-flip__item:hover .insight-flip__front {
    transform: translate(-10px, 60px) rotate(-4deg);
    background-color: #3f342a;
    border-color: #3f342a;
}
.insight-flip__item:hover .insight-flip__num::before {
    opacity: 0.15;
}
.insight-flip__item:hover .insight-flip__num-txt {
    color: rgba(255, 255, 255, 0.7);
}
.insight-flip__item:hover .insight-flip__title {
    color: #ffffff;
}
.insight-flip__item:hover .insight-flip__title-en {
    color: rgba(255, 255, 255, 0.55);
}
.insight-flip__item:hover .insight-flip__arrow {
    border-color: #7f4d1b;
    background-color: #7f4d1b;
}
.insight-flip__item:hover .insight-flip__arrow svg:first-child {
    left: 200%;
}
.insight-flip__item:hover .insight-flip__arrow svg:last-child {
    left: 50%;
}
.insight-flip__item:hover .insight-flip__arrow svg path {
    fill: #ffffff;
}
/* スクロール到達でカードが1枚ずつパラパラと浮き上がる（PC/SP 共通。ul に js-trigger→is-visible） */
.insight-flip__item {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.insight-flip.is-visible .insight-flip__item {
    opacity: 1;
    transform: translateY(0px);
}
.insight-flip.is-visible .insight-flip__item:nth-child(2) {
    transition-delay: 0.15s;
}
.insight-flip.is-visible .insight-flip__item:nth-child(3) {
    transition-delay: 0.3s;
}
.insight-flip.is-visible .insight-flip__item:nth-child(4) {
    transition-delay: 0.45s;
}
/* PC: 4列＋段違い（1〜3枚目を少しずつ下げてダイナミックに） */
@media (min-width: 768px) {
    .insight-flip {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px 16px;
        max-width: 1200px;
    }
    .insight-flip__item {
        height: 352px;
    }
    .insight-flip__item:nth-child(1) {
        margin: 90px 0px 0px 0px;
    }
    .insight-flip__item:nth-child(2) {
        margin: 60px 0px 0px 0px;
    }
    .insight-flip__item:nth-child(3) {
        margin: 30px 0px 0px 0px;
    }
    .insight-flip__front {
        padding: 30px 30px 30px 30px;
    }
    .insight-flip__title {
        padding: 0px 0px 15px 0px;
    }
    .insight-flip__title-en {
        font-size: 13px;
        padding: 0px 0px 6px 0px;
    }
    .insight-flip__title-ja {
        font-size: 20px;
    }
}
/* SP: 2列・反転移動は無効化（素直に）。矢印/番号を小さく */
@media (max-width: 767px) {
    .insight-flip {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 10px;
    }
    .insight-flip__item {
        height: 200px;
    }
    .insight-flip__front {
        padding: 14px 14px 14px 14px;
    }
    .insight-flip__num {
        width: 40px;
        height: 40px;
    }
    .insight-flip__num-txt {
        font-size: 12px;
    }
    .insight-flip__title {
        padding: 0px 0px 10px 0px;
    }
    .insight-flip__title-en {
        font-size: 12px;
        padding: 0px 0px 4px 0px;
    }
    .insight-flip__title-ja {
        font-size: 15px;
    }
    .insight-flip__arrow {
        width: 49px;
        height: 16px;
    }
    .insight-flip__arrow svg {
        width: 13px;
        height: 8px;
    }
    .insight-flip__item:hover .insight-flip__back {
        transform: none;
    }
    .insight-flip__item:hover .insight-flip__front {
        transform: none;
    }
}
/* 動きを控える設定では反転移動なし（色反転のみ） */
@media (prefers-reduced-motion: reduce) {
    .insight-flip__item:hover .insight-flip__back,
    .insight-flip__item:hover .insight-flip__front {
        transform: none;
    }
    .insight-flip__img img {
        transition: none;
    }
}

/* ------------------------------------------------------------
   経営戦略メニュー（/service/）: 価格表風の縦カラム（pricing table）
   1枚ずつ 番号→名称→価格（主役）→区切り線→説明 を縦に積む
   ------------------------------------------------------------ */
.plan-table {
    margin: 0px auto 0px auto;
}
.plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #fffcf7;
    border: 1px solid #e7ddd0;
    border-radius: 12px;
}
.plan__no {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.12em;
    color: #c9a45f;
}
.plan__name {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #7f4d1b;
    line-height: 1.3;
    letter-spacing: 0.02em;
}
.plan__sub {
    color: #83776a;
    line-height: 1.5;
}
.plan__price {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #7f4d1b;
    line-height: 1.1;
    letter-spacing: 0.02em;
}
.plan__unit {
    font-weight: 400;
    color: #926f4b;
}
.plan__text {
    width: 100%;
    color: #5b5346;
    line-height: 1.9;
    border-top: 1px solid #ece3d6;
}
@media (min-width: 768px) {
    .plan-table {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 28px;
        max-width: 1200px;
    }
    .plan {
        padding: 48px 36px 48px 36px;
    }
    .plan__no {
        font-size: 30px;
        padding: 0px 0px 18px 0px;
    }
    .plan__name {
        font-size: 28px;
    }
    .plan__sub {
        font-size: 16px;
        padding: 8px 0px 0px 0px;
    }
    .plan__price {
        font-size: 36px;
        padding: 28px 0px 28px 0px;
    }
    .plan__unit {
        font-size: 20px;
    }
    .plan__text {
        font-size: 17px;
        padding: 28px 0px 0px 0px;
    }
}
@media (max-width: 767px) {
    .plan-table {
        display: flex;
        flex-direction: column;
        gap: 16px 0px;
    }
    .plan {
        padding: 36px 28px 36px 28px;
    }
    .plan__no {
        font-size: 15px;
        padding: 0px 0px 14px 0px;
    }
    .plan__name {
        font-size: 24px;
    }
    .plan__sub {
        font-size: 15px;
        padding: 6px 0px 0px 0px;
    }
    .plan__price {
        font-size: 32px;
        padding: 22px 0px 22px 0px;
    }
    .plan__unit {
        font-size: 18px;
    }
    .plan__text {
        font-size: 16px;
        padding: 22px 0px 0px 0px;
    }
}

/* 見出し（heading-top-main）は常時表示＋金フラッシュ（別ルール）。
   以前は opacity:0＋.heading-top.is-visible の fade-tilt で表示していたが、
   ラッパーに js-trigger が無い見出し（当社の強み・代表メッセージ等）が
   永久に非表示になる不具合があったため撤去した。 */

/* 全セクション見出し（heading-top ラッパー）を中央寄せに統一 */
.heading-top {
    text-align: center;
}

/* svc-list-head / segments-head に下余白を追加（中央化で詰まって見えるのを解消）*/
@media (min-width: 768px) {
    .svc-list-head,
    .segments-head {
        padding: 0px 0px 40px 0px;
    }
}
@media (max-width: 767px) {
    .svc-list-head,
    .segments-head {
        padding: 0px 0px 32px 0px;
    }
}

/* policy 本文をスクロールで段々とフェードイン（各ブロックに js-trigger）*/
.section-legal .legal-meta,
.section-legal .legal-lead,
.section-legal .legal-subtitle,
.section-legal .legal-text,
.section-legal .legal-list,
.section-legal .legal-sublist,
.section-legal .company-table {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}
.section-legal .legal-meta.is-visible,
.section-legal .legal-lead.is-visible,
.section-legal .legal-subtitle.is-visible,
.section-legal .legal-text.is-visible,
.section-legal .legal-list.is-visible,
.section-legal .legal-sublist.is-visible,
.section-legal .company-table.is-visible {
    opacity: 1;
    transform: translateY(0px);
}

/* reason-item を角丸の分離カードに（間に余白）*/
.reason-item {
    border-radius: 8px;
}

/* 実績カードをスクロールで1つずつバラバラにフェードイン */
.works-card {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.works-card.is-visible {
    opacity: 1;
    transform: translateY(0px);
}

/* レッスン本文は左寄せ */
.lesson-body {
    text-align: left;
}

/* インサイトカード: 画像（左）＋文章（右）の横並び（参考: ブログカード）*/
.insight-card-media {
    overflow: hidden;
}
.insight-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    .insight-card-body {
        padding: 28px 28px 28px 28px;
    }
}
@media (max-width: 767px) {
    .insight-card-media img {
        height: 200px;
    }
    .insight-card-body {
        padding: 20px 20px 20px 20px;
    }
}

/* lesson-body の中身（Lesson番号→タイトル→本文→価格）をスクロールで1つずつ順番に表示
   （lesson に js-trigger→is-visible。TOP の代表メッセージ本文と同じパラパラ表示） */
.lesson-body > * {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.lesson.is-visible .lesson-body > * {
    opacity: 1;
    transform: translateY(0px);
}
.lesson.is-visible .lesson-body > *:nth-child(2) {
    transition-delay: 0.12s;
}
.lesson.is-visible .lesson-body > *:nth-child(3) {
    transition-delay: 0.24s;
}
.lesson.is-visible .lesson-body > *:nth-child(4) {
    transition-delay: 0.36s;
}
.lesson.is-visible .lesson-body > *:nth-child(5) {
    transition-delay: 0.48s;
}

/* インストラクター本文をスクロールでフェードイン */
.lesson-text.js-trigger {
    max-width: 1200px;
    margin: 0px auto 0px auto;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.lesson-text.js-trigger.is-visible {
    opacity: 1;
    transform: translateY(0px);
}

/* 続き（レッスンが続くことを示す縦の「・・・」）*/
.lesson-continue {
    text-align: center;
    padding: 120px 0px 0px 0px;
}
@keyframes lesson-continue-pulse {
    0%,
    70%,
    100% {
        opacity: 0.25;
        transform: translateY(0px);
    }
    35% {
        opacity: 1;
        transform: translateY(4px);
    }
}
.lesson-continue-dot {
    display: block;
    color: #c9a45f;
    font-size: 40px;
    line-height: 1.1;
    animation: lesson-continue-pulse 1.4s ease-in-out infinite;
}
.lesson-continue-dot:nth-child(2) {
    animation-delay: 0.2s;
}
.lesson-continue-dot:nth-child(3) {
    animation-delay: 0.4s;
}
/* SP は縦に長くなるため「・・・」の続きサインは出さない */
@media (max-width: 767px) {
    .lesson-continue {
        display: none;
    }
}

/* reason-item をスクロールで1つずつフェードイン */
.reason-item {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.reason-item.is-visible {
    opacity: 1;
    transform: translateY(0px);
}

/* ============================================================
   サービス資料（PDF）反映で追加した各セクション
   代表紹介 / 導入事例 / 事業内容 / 契約フェーズ / 実績ロゴ
============================================================ */

/* 共通リビール（js-trigger → is-visible）。box-shadow も遷移対象に含めカードのホバー演出を滑らかに */
.profile,
.profile-panel,
.usecase,
.usecase-dept,
.plan,
.phase-item,
.career-group {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.45s ease;
}
.profile.is-visible,
.profile-panel.is-visible,
.usecase.is-visible,
.usecase-dept.is-visible,
.plan.is-visible,
.phase-item.is-visible,
.career-group.is-visible {
    opacity: 1;
    transform: translateY(0px);
}

/* 事業内容: business-item はブロックごと一斉に出さず、中身（見出し→説明→画像）を
   時間差でバラバラに表示する。親自体はフェードさせず、子要素それぞれをリビールする */
.business-item__head,
.business-item__msg,
.business-item__image {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.business-item.is-visible .business-item__head,
.business-item.is-visible .business-item__msg,
.business-item.is-visible .business-item__image {
    opacity: 1;
    transform: translateY(0px);
}
.business-item.is-visible .business-item__msg {
    transition-delay: 0.15s;
}
.business-item.is-visible .business-item__image {
    transition-delay: 0.3s;
}

/* 画面には出さず読み上げにだけ残すテキスト（難易度ラベル等） */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0px 0px 0px -1px;
    padding: 0px 0px 0px 0px;
    border: 0px;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   会社案内: 代表紹介（Profile）
   ------------------------------------------------------------ */
.profile-portrait {
    border-radius: 8px;
    overflow: hidden;
    background-color: #efe7db;
}
.profile-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.profile-name {
    display: flex;
    flex-direction: column;
}
.profile-name-main {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #362e26;
}
.profile-name-role {
    font-family: "Noto Sans JP", sans-serif;
    color: #926f4b;
}
.profile-name-en {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.08em;
    color: #a7917b;
}
.profile-lead p {
    color: #46463e;
    line-height: 2;
}
.profile-meta-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    border-bottom: 1px solid #ded5cb;
}
.profile-meta-row dt {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
}
.profile-meta-row dd {
    color: #46463e;
}
/* 主な実績 / スキルの小見出し（左に金のバー） */
.profile-sub {
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
    border-left: 3px solid #c9a45f;
}
.profile-achievements > li {
    position: relative;
    color: #46463e;
    line-height: 1.8;
}
.profile-achievements > li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: #c9a45f;
}
.profile-skill-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    border-bottom: 1px solid #ece3d6;
}
.profile-skill-row dt {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #926f4b;
}
.profile-skill-row dd {
    color: #46463e;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .profile {
        display: grid;
        grid-template-columns: 280px 1fr;
        column-gap: 48px;
        align-items: start;
        padding: 0px 0px 48px 0px;
    }
    .profile-name-main {
        font-size: 28px;
        padding: 0px 0px 12px 0px;
    }
    .profile-name-role {
        font-size: 14px;
    }
    .profile-name-en {
        font-size: 13px;
        padding: 8px 0px 0px 0px;
    }
    .profile-body > .profile-lead {
        padding: 24px 0px 24px 0px;
    }
    .profile-lead p {
        font-size: 16px;
    }
    .profile-meta-row {
        padding: 12px 0px 12px 0px;
    }
    .profile-meta-row dt,
    .profile-meta-row dd {
        font-size: 15px;
    }
    .profile-panel {
        padding: 40px 0px 0px 0px;
    }
    .profile-sub {
        font-size: 18px;
        padding: 0px 0px 0px 16px;
        margin: 0px 0px 20px 0px;
    }
    .profile-achievements > li {
        font-size: 16px;
        padding: 0px 0px 12px 20px;
    }
    .profile-skill-row {
        padding: 14px 0px 14px 0px;
    }
    .profile-skill-row dt,
    .profile-skill-row dd {
        font-size: 15px;
    }
}
@media (max-width: 767px) {
    .profile {
        padding: 0px 0px 32px 0px;
    }
    .profile-portrait {
        max-width: 240px;
        margin: 0px auto 24px auto;
    }
    .profile-name-main {
        font-size: 24px;
        padding: 0px 0px 4px 0px;
    }
    .profile-name-role {
        font-size: 14px;
    }
    .profile-name-en {
        font-size: 12px;
        padding: 6px 0px 0px 0px;
    }
    .profile-body > .profile-lead {
        padding: 20px 0px 20px 0px;
    }
    .profile-lead p {
        font-size: 15px;
    }
    .profile-meta-row {
        grid-template-columns: 80px 1fr;
        padding: 10px 0px 10px 0px;
    }
    .profile-meta-row dt,
    .profile-meta-row dd {
        font-size: 14px;
    }
    .profile-panel {
        padding: 32px 0px 0px 0px;
    }
    .profile-sub {
        font-size: 16px;
        padding: 0px 0px 0px 12px;
        margin: 0px 0px 16px 0px;
    }
    .profile-achievements > li {
        font-size: 15px;
        padding: 0px 0px 10px 18px;
    }
    .profile-skill-row {
        grid-template-columns: 64px 1fr;
        padding: 12px 0px 12px 0px;
    }
    .profile-skill-row dt,
    .profile-skill-row dd {
        font-size: 14px;
    }
}

/* ------------------------------------------------------------
   サービス: 事業内容（4事業・1件ずつ縦積み: 見出し→説明→大画像）
   ※ sample-4 の section-business レイアウトを AIKK 配色へ調整
   ------------------------------------------------------------ */
.business-list {
    margin: 0px auto 0px auto;
    max-width: 980px;
}
.business-item {
    scroll-margin-top: 96px;
}
.business-item__head {
    border-bottom: 1px solid #d8c9b4;
}
.business-item__en {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #a7917b;
    letter-spacing: 0.08em;
}
.business-item__title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
    line-height: 1.4;
}
.business-item__msg {
    color: #5b5346;
    line-height: 1.9;
}
.business-item__image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.business-item__image::before {
    content: "";
    display: block;
    padding-top: 42%;
}
.business-item__image img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
@media (min-width: 768px) {
    .business-item:not(:last-child) {
        margin: 0px 0px 72px 0px;
    }
    .business-item__head {
        padding: 0px 0px 18px 0px;
        margin: 0px 0px 28px 0px;
    }
    .business-item__en {
        font-size: 14px;
        padding: 0px 0px 8px 0px;
    }
    .business-item__title {
        font-size: 30px;
    }
    .business-item__msg {
        font-size: 15px;
        margin: 0px 0px 40px 0px;
    }
}
@media (max-width: 767px) {
    /* SP は「見出し → 画像 → 文章」の順（画像を上・文章を下）。DOM は head → msg → image のため order で入れ替える */
    .business-item {
        display: flex;
        flex-direction: column;
    }
    .business-item:not(:last-child) {
        margin: 0px 0px 48px 0px;
    }
    .business-item__head {
        order: 1;
        padding: 0px 0px 12px 0px;
        margin: 0px 0px 18px 0px;
    }
    .business-item__image {
        order: 2;
        margin: 0px 0px 20px 0px;
    }
    .business-item__en {
        font-size: 12px;
        padding: 0px 0px 6px 0px;
    }
    .business-item__title {
        font-size: 21px;
    }
    .business-item__msg {
        order: 3;
        font-size: 14px;
        margin: 0px 0px 0px 0px;
    }
}

/* ============================================================
   事業内容: スクロールで各カードが sticky で止まり、次のカードが
   上に重なって積み上がるスタッキング（greenops 風）。
   カード化（背景・枠・影・余白）＋段違いの top で、重なっても
   各カードの上端（見出し）が少しずつ見える。PC のみ。
============================================================ */
@media (min-width: 768px) {
    .business-item {
        position: sticky;
        background-color: #fffdf9;
        border: 1px solid #e7dcc9;
        border-radius: 18px;
        box-shadow: 0px -12px 44px rgba(80, 60, 30, 0.12);
        padding: 36px 48px 44px 48px;
    }
    /* カードごとに sticky 位置を段違いにして、重なった上端を見せる */
    #business-komon {
        top: 96px;
    }
    #business-training {
        top: 122px;
    }
    #business-consulting {
        top: 148px;
    }
    #business-dev {
        top: 174px;
    }
    /* 重なりの間隔（スクロール量を確保） */
    .business-item:not(:last-child) {
        margin: 0px 0px 56px 0px;
    }
}

/* 事業内容: 研修事業の4研修（①〜④ 用語＋説明を区切り線で並べる） */
.biz-training__item + .biz-training__item {
    border-top: 1px solid #ece3d6;
}
.biz-training__term {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
    line-height: 1.5;
}
.biz-training__desc {
    color: #5b5346;
    line-height: 1.9;
}
@media (min-width: 768px) {
    .biz-training {
        margin: 20px 0px 0px 0px;
    }
    .biz-training__item + .biz-training__item {
        margin: 16px 0px 0px 0px;
        padding: 16px 0px 0px 0px;
    }
    .biz-training__term {
        font-size: 16px;
    }
    .biz-training__desc {
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .biz-training {
        margin: 16px 0px 0px 0px;
    }
    .biz-training__item + .biz-training__item {
        margin: 14px 0px 0px 0px;
        padding: 14px 0px 0px 0px;
    }
    .biz-training__term {
        font-size: 15px;
    }
    .biz-training__desc {
        font-size: 13px;
    }
}

/* ------------------------------------------------------------
   サービス: ご契約フェーズ（多段階契約）
   ------------------------------------------------------------ */
.section-phase {
    position: relative;
    background-color: #fffdf9;
    background-image: url("../images/noise.svg");
}
.phase-list {
    margin: 0px auto 0px auto;
}
.phase-item {
    display: flex;
    align-items: baseline;
    background-color: #fffcf7;
    border: 1px solid #e7ddd0;
    border-radius: 8px;
}
.phase-no {
    flex: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.06em;
    color: #c9a45f;
}
.phase-name {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
}
.phase-text {
    color: #5b5346;
    line-height: 1.8;
}
.phase-notes {
    margin: 0px auto 0px auto;
}
.phase-notes > li {
    position: relative;
    color: #5b5346;
    line-height: 1.8;
}
.phase-notes > li::before {
    content: "※";
    position: absolute;
    left: 0px;
    top: 0px;
    color: #926f4b;
}
@media (min-width: 768px) {
    .section-phase {
        padding: 120px 60px 120px 60px;
    }
    .phase-list {
        display: flex;
        flex-direction: column;
        row-gap: 12px;
        max-width: 1040px;
    }
    .phase-item {
        column-gap: 32px;
        padding: 24px 32px 24px 32px;
    }
    .phase-no {
        width: 88px;
        font-size: 15px;
    }
    .phase-name {
        font-size: 18px;
        padding: 0px 0px 6px 0px;
    }
    .phase-text {
        font-size: 15px;
    }
    .phase-notes {
        max-width: 1040px;
        padding: 40px 0px 0px 0px;
    }
    .phase-notes > li {
        font-size: 16px;
        padding: 0px 0px 8px 24px;
    }
}
@media (max-width: 767px) {
    .section-phase {
        padding: 72px 24px 72px 24px;
    }
    .phase-list {
        display: flex;
        flex-direction: column;
        row-gap: 12px;
    }
    .phase-item {
        flex-direction: column;
        padding: 20px 20px 20px 20px;
    }
    .phase-no {
        font-size: 13px;
        padding: 0px 0px 6px 0px;
    }
    .phase-name {
        font-size: 16px;
        padding: 0px 0px 6px 0px;
    }
    .phase-text {
        font-size: 14px;
    }
    .phase-notes {
        padding: 32px 0px 0px 0px;
    }
    .phase-notes > li {
        font-size: 13px;
        padding: 0px 0px 8px 22px;
    }
}

/* ============================================================
   導入事例（usecases/index.html）
   部門ごとに Copilot 活用 ＋ Claude Code 開発の2カード
============================================================ */
.section-usecase {
    position: relative;
    background-color: #fffdf9;
    background-image: url("../images/noise.svg");
}
/* 交互に敷く生成りの面 */
.section-usecase--alt {
    background-color: #fcf5eb;
}
/* 部門見出し: 大きな番号に部門名を重ねる */
.usecase-dept {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0px auto 0px auto;
}
.usecase-dept-no {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #af9571;
}
.usecase-dept-name {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
}

/* 事例カード（背景はセクションに任せ、白パネルは敷かない） */
.usecase {
    margin: 0px auto 0px auto;
}

.usecase-head {
    border-bottom: 1px solid #efe7db;
}
.usecase-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #362e26;
    line-height: 1.5;
}
.usecase-tool {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.usecase-tool-name {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    border-radius: 999px;
}
.usecase-tool-name--copilot {
    color: #7a5a2e;
    background-color: #f3e8d4;
}
.usecase-tool-name--claude {
    color: #ffffff;
    background-color: #7f4d1b;
}

/* 課題／活用の2カラム */
.usecase-cols {
    display: grid;
}
/* 各カラム（現状／AI活用）に外枠を付けてカード化 */
.usecase-col {
    background-color: #ffffff;
    border: 1px solid #ece3d6;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* AI活用側（グレーアウトでない右カラム）は影で前に出して強調 */
.usecase-col:not(.usecase-col--muted) {
    border-color: #e6d6ba;
    box-shadow: 0px 16px 38px rgba(127, 77, 27, 0.13);
}
/* usecase-cols を左→右へパラパラと表示 */
.usecase.is-visible .usecase-col {
    opacity: 1;
    transform: translateY(0px);
}
.usecase.is-visible .usecase-cols .usecase-col:nth-child(2) {
    transition-delay: 0.16s;
}
.usecase-label {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
}
.usecase-label--problem {
    color: #9a6b4a;
}
/* 左カラム（現状の課題）はグレーアウトして「今の状態」を表現 */
.usecase-col--muted {
    /* 退色は filter 側で行い、opacity プロパティはリビール用に空ける */
    filter: grayscale(0.5) opacity(0.72);
}
.usecase-points > li {
    position: relative;
    color: #46463e;
    line-height: 1.7;
}
.usecase-points--problem > li::before {
    content: "!";
    position: absolute;
    left: 0px;
    top: 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #c08a5a;
}
.usecase-points--check > li::before {
    content: "✓";
    position: absolute;
    left: 0px;
    top: 0px;
    font-weight: 700;
    color: #b3873f;
}

/* Before / After テーブル */

/* 進め方（STEP） */
.usecase-step-list {
    counter-reset: none;
}
.usecase-step {
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #e0d3bc;
}
.usecase-step:first-child {
    border-top: 0px;
}
/* リストの最後は下線で閉じる */
.usecase-step:last-child {
    border-bottom: 1px solid #e0d3bc;
}
.usecase-step-no {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
    background-color: #c9a45f;
    border-radius: 999px;
}

.usecase-step-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
}
.usecase-step-text {
    color: #5b5346;
    line-height: 1.7;
}

/* 追加の3カラム（導入で得られる効果 等） */
.usecase-add-grid {
    display: grid;
}
.usecase-add-card {
    background-color: #ffffff;
    border: 1px solid #e7dcca;
    border-radius: 12px;
    box-shadow: 0px 8px 22px rgba(127, 77, 27, 0.06);
}
.usecase-add-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #7f4d1b;
}
.usecase-add-text {
    color: #5b5346;
    line-height: 1.8;
}

/* リビール: 事例カードをスクロールでフェード */
.usecase {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.usecase.is-visible {
    opacity: 1;
    transform: translateY(0px);
}

@media (min-width: 768px) {
    .section-usecase {
        padding: 112px 60px 112px 60px;
    }
    .usecase-dept {
        max-width: 1200px;
        column-gap: 20px;
        padding: 0px 0px 40px 0px;
    }
    .usecase-dept-no {
        font-size: 72px;
    }
    .usecase-dept-name {
        font-size: 32px;
    }
    .usecase {
        max-width: 1200px;
        margin: 0px auto 32px auto;
    }
    .usecase-head {
        padding: 8px 0px 24px 0px;
    }
    .usecase-title {
        font-size: 24px;
        padding: 0px 0px 16px 0px;
    }
    .usecase-tool {
        column-gap: 16px;
    }

    .usecase-tool-name {
        font-size: 13px;
        padding: 6px 16px 6px 16px;
    }
    .usecase-cols {
        grid-template-columns: 1fr 1fr;
        gap: 0px 40px;
        padding: 32px 0px 8px 0px;
    }
    .usecase-col {
        padding: 28px 30px 18px 30px;
    }
    .usecase-label {
        font-size: 15px;
        padding: 0px 0px 16px 0px;
    }
    .usecase-points > li {
        font-size: 15px;
        padding: 0px 0px 12px 24px;
    }

    .usecase-add {
        padding: 24px 0px 8px 0px;
    }
    .usecase-add .usecase-label {
        padding: 0px 0px 16px 0px;
    }
    .usecase-add-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .usecase-add-card {
        padding: 24px 24px 26px 24px;
    }
    .usecase-add-title {
        font-size: 16px;
        padding: 0px 0px 10px 0px;
    }
    .usecase-add-text {
        font-size: 14px;
    }
    .usecase-steps {
        padding: 24px 0px 8px 0px;
    }
    .usecase-steps .usecase-label {
        padding: 0px 0px 8px 0px;
    }
    .usecase-step {
        column-gap: 20px;
        padding: 20px 0px 20px 0px;
    }
    .usecase-step-no {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .usecase-step-title {
        font-size: 16px;
        padding: 4px 0px 6px 0px;
    }
    .usecase-step-text {
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .section-usecase {
        padding: 64px 20px 64px 20px;
    }
    .usecase-dept {
        column-gap: 12px;
        padding: 0px 0px 28px 0px;
    }
    .usecase-dept-no {
        font-size: 48px;
    }
    .usecase-dept-name {
        font-size: 24px;
    }
    .usecase {
        margin: 0px auto 20px auto;
    }
    .usecase-head {
        padding: 4px 0px 18px 0px;
    }
    .usecase-title {
        font-size: 19px;
        padding: 0px 0px 14px 0px;
    }
    .usecase-tool {
        column-gap: 12px;
        row-gap: 8px;
    }

    .usecase-tool-name {
        font-size: 12px;
        padding: 5px 14px 5px 14px;
    }
    .usecase-cols {
        grid-template-columns: 1fr;
        gap: 24px 0px;
        padding: 24px 0px 4px 0px;
    }
    .usecase-col {
        padding: 22px 22px 12px 22px;
    }
    .usecase-label {
        font-size: 14px;
        padding: 0px 0px 12px 0px;
    }
    .usecase-points > li {
        font-size: 14px;
        padding: 0px 0px 10px 22px;
    }

    .usecase-add {
        padding: 16px 0px 4px 0px;
    }
    .usecase-add .usecase-label {
        padding: 0px 0px 12px 0px;
    }
    .usecase-add-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .usecase-add-card {
        padding: 18px 18px 20px 18px;
    }
    .usecase-add-title {
        font-size: 15px;
        padding: 0px 0px 8px 0px;
    }
    .usecase-add-text {
        font-size: 13px;
    }
    .usecase-steps {
        padding: 16px 0px 8px 0px;
    }
    .usecase-steps .usecase-label {
        padding: 0px 0px 4px 0px;
    }
    .usecase-step {
        column-gap: 14px;
        padding: 16px 0px 16px 0px;
    }
    .usecase-step-no {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }
    .usecase-step-title {
        font-size: 15px;
        padding: 2px 0px 4px 0px;
    }
    .usecase-step-text {
        font-size: 13px;
    }
}

/* 導入事例の部門アンカー: 固定ヘッダー分の位置補正 */
#soumu,
#gijutsu,
#kanko {
    scroll-margin-top: 96px;
}

/* ============================================================
   会社案内: 経歴（Career）— グループ＋ナレッジタグの独自レイアウト
============================================================ */
.career {
    margin: 0px auto 0px auto;
}
.career-group:not(:last-child) {
    border-bottom: 1px solid #ded5cb;
}
.career-phase-label {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #ffffff;
    background-color: #7f4d1b;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.career-org-name {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #362e26;
    line-height: 1.5;
    border-left: 3px solid #c9a45f;
}
.career-org-note {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #926f4b;
}
.career-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px dashed #ece3d6;
}
.career-org .career-item:last-child {
    border-bottom: 0px;
}
.career-item-text {
    color: #46463e;
    line-height: 1.7;
}
.career-tag {
    flex: none;
    font-family: "Noto Sans JP", sans-serif;
    color: #7a5a2e;
    background-color: #f3e8d4;
    border-radius: 999px;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .career {
        max-width: 820px;
    }
    .career-group {
        padding: 0px 0px 40px 0px;
        margin: 0px 0px 40px 0px;
    }
    .career-group:last-child {
        margin: 0px 0px 0px 0px;
    }
    .career-phase-label {
        font-size: 14px;
        padding: 6px 20px 6px 20px;
        margin: 0px 0px 24px 0px;
    }
    .career-org {
        padding: 0px 0px 24px 0px;
    }
    .career-org:last-child {
        padding: 0px 0px 0px 0px;
    }
    .career-org-name {
        font-size: 17px;
        padding: 0px 0px 4px 16px;
        margin: 0px 0px 12px 0px;
    }
    .career-org-note {
        font-size: 13px;
        padding: 0px 0px 0px 12px;
    }
    .career-item {
        column-gap: 24px;
        padding: 12px 0px 12px 16px;
    }
    .career-item-text {
        font-size: 15px;
    }
    .career-tag {
        font-size: 12px;
        padding: 4px 12px 4px 12px;
    }
}
@media (max-width: 767px) {
    .career-group {
        padding: 0px 0px 32px 0px;
        margin: 0px 0px 32px 0px;
    }
    .career-group:last-child {
        margin: 0px 0px 0px 0px;
    }
    .career-phase-label {
        font-size: 13px;
        padding: 5px 16px 5px 16px;
        margin: 0px 0px 20px 0px;
    }
    .career-org {
        padding: 0px 0px 20px 0px;
    }
    .career-org-name {
        font-size: 16px;
        padding: 0px 0px 4px 12px;
        margin: 0px 0px 10px 0px;
    }
    .career-org-note {
        display: block;
        font-size: 12px;
        padding: 4px 0px 0px 12px;
    }
    .career-item {
        flex-direction: column;
        row-gap: 6px;
        padding: 12px 0px 12px 12px;
    }
    .career-item-text {
        font-size: 14px;
    }
    .career-tag {
        font-size: 11px;
        padding: 3px 10px 3px 10px;
    }
}

/* ============================================================
   演出: 子要素のスタッガー表示（親の is-visible で順番に立ち上がる）
   ＋ カードのホバー演出（浮き上がり）
============================================================ */
.usecase-points > li,
.usecase-step,
.career-item {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.usecase.is-visible .usecase-points > li,
.career-group.is-visible .career-item {
    opacity: 1;
    transform: translateY(0px);
}
/* nth-child のディレイでカスケード（各リスト内で順番に） */
.usecase.is-visible .usecase-points > li:nth-child(2),
.career-group.is-visible .career-items .career-item:nth-child(2) {
    transition-delay: 0.05s;
}
.usecase.is-visible .usecase-points > li:nth-child(3),
.career-group.is-visible .career-items .career-item:nth-child(3) {
    transition-delay: 0.1s;
}
.usecase.is-visible .usecase-points > li:nth-child(4),
.career-group.is-visible .career-items .career-item:nth-child(4) {
    transition-delay: 0.15s;
}
.usecase.is-visible .usecase-points > li:nth-child(5),
.career-group.is-visible .career-items .career-item:nth-child(5) {
    transition-delay: 0.2s;
}
.usecase.is-visible .usecase-points > li:nth-child(n + 6),
.career-group.is-visible .career-items .career-item:nth-child(n + 6) {
    transition-delay: 0.25s;
}

/* step はスクロールで各自 is-visible になり、1つずつ表示する（個別トリガー） */
.usecase-step.is-visible {
    opacity: 1;
    transform: translateY(0px);
}

/* ホバーで浮き上がり（PC・リビール後のみ）。同レイアウトの反復に動きを添える */
@media (min-width: 768px) {
    .plan.is-visible:hover,
    .phase-item.is-visible:hover {
        box-shadow: 0px 12px 30px rgba(127, 77, 27, 0.1);
    }
}

/* 動きを控える設定のユーザーにはスタッガーを無効化（静止表示） */
@media (prefers-reduced-motion: reduce) {
    .usecase-col,
    .usecase-points > li,
    .usecase-step,
    .career-item,
    .business-item__head,
    .business-item__msg,
    .business-item__image,
    .service-figure,
    .service-body > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ------------------------------------------------------------
   TOP works: ロゴ見出し・注記・「すべて見る」ボタン
   （TOPは代表例のみ掲載し、全体は会社案内へ遷移させる）
   ------------------------------------------------------------ */

.works-note {
    color: #5b5346;
    line-height: 1.9;
    margin: 0px auto 0px auto;
}
@media (min-width: 768px) {
    .works-note {
        font-size: 14px;
        max-width: 760px;
        padding: 48px 0px 0px 0px;
    }
    .works-action {
        padding: 24px 0px 0px 0px;
    }
}
@media (max-width: 767px) {
    .works-note {
        font-size: 13px;
        padding: 36px 0px 0px 0px;
    }
    .works-action {
        padding: 24px 0px 0px 0px;
    }
}

/* ------------------------------------------------------------
   1文＝1<p> に分割した段落の行間調整
   （「。」ごとに <p> を分けた箇所が詰まらないよう最小限の余白）
   ------------------------------------------------------------ */
.profile-lead p:not(:last-child) {
    padding: 0px 0px 8px 0px;
}
.works-note + .works-note {
    padding-top: 8px;
}
.business-item__msg p + p {
    padding-top: 8px;
}

/* アクセス: 連続する説明文（例「〜対応いたします。」「〜スムーズです。」）の行間を詰める。
   最後の1文は地図前の余白として基本パディングを維持 */
.company-access-text:not(:last-of-type) {
    padding-bottom: 4px;
}

/* works 注記内の「会社案内」リンク（実績詳細への導線） */
.works-note-link {
    color: #7f4d1b;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}
.works-note-link:hover {
    color: #926f4b;
}

/* ============================================================
   ご契約フェーズ: 6項目を順番にライトアップ（非アクティブは少しグレーアウト）
   opacity/transform はリビール用に温存し、glow は filter/border/box-shadow で表現
============================================================ */
.phase-item {
    /* 6項目 × 1.8s ＝ 10.8s で一巡。both で待機中もキーフレーム状態を保持 */
    animation: phase-glow 10.8s ease-in-out infinite both;
}
.phase-item:nth-child(1) {
    animation-delay: 0s;
}
.phase-item:nth-child(2) {
    animation-delay: 1.8s;
}
.phase-item:nth-child(3) {
    animation-delay: 3.6s;
}
.phase-item:nth-child(4) {
    animation-delay: 5.4s;
}
.phase-item:nth-child(5) {
    animation-delay: 7.2s;
}
.phase-item:nth-child(6) {
    animation-delay: 9s;
}

@keyframes phase-glow {
    /* 非アクティブ: 少しグレーアウト */
    0% {
        filter: grayscale(0.6) opacity(0.55);
        border-color: #e7ddd0;
        box-shadow: 0px 0px 0px rgba(201, 164, 95, 0);
    }
    /* 立ち上がり → ライトアップ（原色＋金の光）。隣とわずかに重ね、常に1つは点灯 */
    4% {
        filter: grayscale(0) opacity(1);
        border-color: #c9a45f;
        box-shadow: 0px 10px 30px rgba(201, 164, 95, 0.45);
    }
    16% {
        filter: grayscale(0) opacity(1);
        border-color: #c9a45f;
        box-shadow: 0px 10px 30px rgba(201, 164, 95, 0.45);
    }
    /* 次の項目へバトンタッチ → グレーアウトへ戻る */
    22% {
        filter: grayscale(0.6) opacity(0.55);
        border-color: #e7ddd0;
        box-shadow: 0px 0px 0px rgba(201, 164, 95, 0);
    }
    100% {
        filter: grayscale(0.6) opacity(0.55);
        border-color: #e7ddd0;
        box-shadow: 0px 0px 0px rgba(201, 164, 95, 0);
    }
}

/* 動きを控える設定では点滅させず、全項目を通常表示に */
@media (prefers-reduced-motion: reduce) {
    .phase-item {
        animation: none;
        filter: none;
    }
}

/* ============================================================
   導入事例: ClaudeCode カードを「設計図調」レイアウトに
   （Copilot カードは現状の情報カードのまま。内容/HTMLは変えず CSS の order とグリッドで型を変える）
   PC のみ適用。SP はベースの縦積みレイアウトを踏襲
============================================================ */

/* ============================================================
   導入事例 ClaudeCode: 「入力 → エンジン → 出力」フロー図解
   手作業の限界(課題) → Claude Code で自動化(構築システム) → 自動アウトプット(効果)
============================================================ */

/* ノード間の矢印（右向き三角。SPは下向き） */

/* ============================================================
   サービス「提供サービス一覧」: section-work 風カードグリッド
   （グロー＋アイコン＋番号＋名前＋説明＋矢印／ホバーで浮上／色サイクル）
============================================================ */
/* 白カードが映えるよう、この節だけ背景を少し深い暖色に */
#svc-list {
    background-color: #f5f0e6;
}

.svc-cards {
    margin: 0px auto 0px auto;
}
.svc-card {
    position: relative;
    /* リビール（js-trigger → is-visible） */
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.25, 0, 0, 1);
}
.svc-card.is-visible {
    opacity: 1;
    transform: translateY(0px);
}
.svc-card__inner {
    position: relative;
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #ece3d6;
    border-radius: 10px;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
/* ホバーで動くのは「中の色（グロー）」だけ。カード枠・アイコン・文字は動かさない。 */
.svc-card__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52%;
    height: 52%;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.25;
    background-color: var(--c, #c9a45f);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.7);
    transform-origin: center center;
    transition:
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.1s ease;
}
/* ホバー: カード枠は同じサイズのまま、中の色（グロー）が中央から大きく広がる */
.svc-card:hover .svc-card__glow {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(2.1);
}
.svc-card__icon {
    position: relative;
    display: block;
    color: var(--c, #c9a45f);
}
.svc-card__icon svg {
    display: block;
}
.svc-card__num {
    position: relative;
    display: block;
    font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
    color: #b7b09a;
    letter-spacing: 0.06em;
}
.svc-card__name {
    position: relative;
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #46463e;
    line-height: 1.5;
}
.svc-card__text {
    position: relative;
    display: block;
    color: #6b6656;
}

/* 色サイクル（sample パレット・8色を11枚に循環） */
.svc-card:nth-child(8n + 1) {
    --c: #f2ac57;
}
.svc-card:nth-child(8n + 2) {
    --c: #f299a8;
}
.svc-card:nth-child(8n + 3) {
    --c: #7fc174;
}
.svc-card:nth-child(8n + 4) {
    --c: #a483ba;
}
.svc-card:nth-child(8n + 5) {
    --c: #d8c832;
}
.svc-card:nth-child(8n + 6) {
    --c: #4c8bbf;
}
.svc-card:nth-child(8n + 7) {
    --c: #66c9bb;
}
.svc-card:nth-child(8n) {
    --c: #68dde8;
}

@media (min-width: 768px) {
    .svc-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px 16px;
        max-width: 1200px;
    }
    .svc-card__inner {
        padding: 24px 24px 46px 24px;
        min-height: 226px;
    }
    .svc-card__icon {
        height: 60px;
        margin: 4px 0px 18px 0px;
    }
    .svc-card__icon svg {
        width: 44px;
        height: 44px;
    }
    .svc-card__num {
        font-size: 15px;
        margin: 0px 0px 2px 0px;
    }
    .svc-card__name {
        font-size: 18px;
        margin: 0px 0px 8px 0px;
    }
    .svc-card__text {
        font-size: 13px;
        line-height: 1.8;
    }
}
@media (max-width: 767px) {
    .svc-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 12px;
    }
    .svc-card__inner {
        padding: 18px 16px 38px 16px;
        min-height: 182px;
    }
    .svc-card__icon {
        height: 46px;
        margin: 2px 0px 14px 0px;
    }
    .svc-card__icon svg {
        width: 38px;
        height: 38px;
    }
    .svc-card__num {
        font-size: 12px;
        margin: 0px 0px 2px 0px;
    }
    .svc-card__name {
        font-size: 15px;
        margin: 0px 0px 6px 0px;
    }
    .svc-card__text {
        font-size: 12px;
        line-height: 1.7;
    }
}

/* ============================================================
   サービス: 提供サービスカード / 経営戦略プランを「1つずつ順番」に表示
   （コンテナに js-trigger、子を nth-child ディレイでカスケード）
============================================================ */
/* --- 提供サービスカード（11枚） --- */
.svc-cards.is-visible .svc-card {
    opacity: 1;
    transform: translateY(0px);
}
.svc-cards.is-visible .svc-card:nth-child(1) {
    transition-delay: 0s;
}
.svc-cards.is-visible .svc-card:nth-child(2) {
    transition-delay: 0.08s;
}
.svc-cards.is-visible .svc-card:nth-child(3) {
    transition-delay: 0.16s;
}
.svc-cards.is-visible .svc-card:nth-child(4) {
    transition-delay: 0.24s;
}
.svc-cards.is-visible .svc-card:nth-child(5) {
    transition-delay: 0.32s;
}
.svc-cards.is-visible .svc-card:nth-child(6) {
    transition-delay: 0.4s;
}
.svc-cards.is-visible .svc-card:nth-child(7) {
    transition-delay: 0.48s;
}
.svc-cards.is-visible .svc-card:nth-child(8) {
    transition-delay: 0.56s;
}
.svc-cards.is-visible .svc-card:nth-child(9) {
    transition-delay: 0.64s;
}
.svc-cards.is-visible .svc-card:nth-child(10) {
    transition-delay: 0.72s;
}
.svc-cards.is-visible .svc-card:nth-child(11) {
    transition-delay: 0.8s;
}

/* 矢印を撤去したぶん、カード下パディングを詰める */
@media (min-width: 768px) {
    .svc-card__inner {
        padding: 24px 24px 24px 24px;
    }
}
@media (max-width: 767px) {
    .svc-card__inner {
        padding: 18px 16px 18px 16px;
    }
}

/* --- 経営戦略プラン（plan-table・3枚） --- */
.plan {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.25, 0, 0, 1);
}
.plan-table.is-visible .plan {
    opacity: 1;
    transform: translateY(0px);
}
.plan-table.is-visible .plan:nth-child(1) {
    transition-delay: 0s;
}
.plan-table.is-visible .plan:nth-child(2) {
    transition-delay: 0.14s;
}
.plan-table.is-visible .plan:nth-child(3) {
    transition-delay: 0.28s;
}

/* 動きを控える設定では即時表示 */
@media (prefers-reduced-motion: reduce) {
    .svc-card,
    .plan {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   サービスページ: 見出し・事業タイトルを「AIを採用するか否か…」と同じ
   斜めワイプ登場（fade-tilt）＋金フラッシュで表示
   body.page-service 限定・js-trigger 付きラッパーのみ（非表示バグ回避）
============================================================ */
.page-service .heading-top-main,
.page-service .business-item__title {
    opacity: 0;
}
/* 事業タイトルにも金フラッシュ用グラデ文字（茶→金→茶）を付与 */
.page-service .business-item__title {
    background-image: linear-gradient(
        300deg,
        rgb(54, 46, 38) 30%,
        rgb(197, 136, 23) 50%,
        rgb(54, 46, 38) 70%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* is-visible で斜めワイプ登場 → 以後は金フラッシュを無限ループ */
.page-service .heading-top.is-visible .heading-top-main,
.page-service .business-item.is-visible .business-item__title {
    animation:
        fade-tilt 1.4s cubic-bezier(0, 0.25, 1, 1) both,
        heading-flash 6s linear infinite;
}
/* 動きを控える設定では即時表示（ワイプなし） */
@media (prefers-reduced-motion: reduce) {
    .page-service .heading-top-main,
    .page-service .business-item__title {
        opacity: 1;
        animation: none;
    }
}

/* ============================================================
   会社案内: company-table の行をスクロールで1つずつ表示。
   各 company-block の見出しもフェードインさせ、ブロックごとにバラっと出す。
============================================================ */
.company-table.js-trigger tr {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.company-table.is-visible tr {
    opacity: 1;
    transform: translateY(0px);
}
.company-table.is-visible tr:nth-child(1) {
    transition-delay: 0s;
}
.company-table.is-visible tr:nth-child(2) {
    transition-delay: 0.08s;
}
.company-table.is-visible tr:nth-child(3) {
    transition-delay: 0.16s;
}
.company-table.is-visible tr:nth-child(4) {
    transition-delay: 0.24s;
}
.company-table.is-visible tr:nth-child(5) {
    transition-delay: 0.32s;
}
.company-table.is-visible tr:nth-child(6) {
    transition-delay: 0.4s;
}
.company-table.is-visible tr:nth-child(7) {
    transition-delay: 0.48s;
}
.company-table.is-visible tr:nth-child(8) {
    transition-delay: 0.56s;
}
.company-table.is-visible tr:nth-child(9) {
    transition-delay: 0.64s;
}
.company-table.is-visible tr:nth-child(10) {
    transition-delay: 0.72s;
}
.company-table.is-visible tr:nth-child(n + 11) {
    transition-delay: 0.8s;
}

/* ============================================================
   全ページ共通: section 見出し（heading-top）をスクロールで fade-tilt 登場。
   以後は heading-top-main が金フラッシュを無限ループ。js-trigger のものだけ対象。
   （ページ固有の scoped ルールは特異度で上書きされる）
============================================================ */
.heading-top.js-trigger .heading-top-sub,
.heading-top.js-trigger .heading-top-main {
    opacity: 0;
}
.heading-top.js-trigger.is-visible .heading-top-sub {
    animation: fade-tilt 0.6s cubic-bezier(0, 0.25, 1, 1) both;
}
.heading-top.js-trigger.is-visible .heading-top-main {
    animation:
        fade-tilt 1.4s cubic-bezier(0, 0.25, 1, 1) both,
        heading-flash 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .heading-top.js-trigger .heading-top-sub,
    .heading-top.js-trigger .heading-top-main {
        opacity: 1;
        animation: none;
    }
}

/* ============================================================
   導入事例リードの見出し「部門別・AI活用の実例」を、トップ concept の
   「AIを、経営の意思決定へ。」と同じ登場アニメ（fade-tilt）に揃える。
   金フラッシュは concept と同じ 16s ループ。導入事例ページのみ適用。
============================================================ */
.page-usecases .section-philosophy .heading-top-sub,
.page-usecases .section-philosophy .heading-top-main {
    opacity: 0;
}
.page-usecases .section-philosophy .heading-top.is-visible .heading-top-sub {
    animation: fade-tilt 0.6s cubic-bezier(0, 0.25, 1, 1) both;
}
.page-usecases .section-philosophy .heading-top.is-visible .heading-top-main {
    animation:
        fade-tilt 1.6s cubic-bezier(0, 0.25, 1, 1) both,
        heading-flash 16s linear infinite 3s;
}

/* ============================================================
   導入事例 01 AI導入研修: 6ステップのスネークグリッド
   PC = 3列×2段（上段 1・2・3／下段 6・5・4）。1→6 の順にカードが光る（無限ループ）。
   その下に過去のAI開発実績ロゴを横一列。
============================================================ */
.adopt {
    max-width: 1200px;
    margin: 0px auto 0px auto;
}
.adopt-lead {
    color: #46463e;
    line-height: 2;
}
.adopt-lead p + p {
    padding-top: 0.9em;
}
/* ツールのバッジ */
.adopt-badge {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    border-radius: 999px;
}
.adopt-badge--base {
    color: #7a5a2e;
    background-color: #efe6d3;
}
.adopt-badge--copilot {
    color: #7a5a2e;
    background-color: #f3e8d4;
}
.adopt-badge--claude {
    color: #ffffff;
    background-color: #7f4d1b;
}

/* 6ステップ・スネークグリッド */
.flow6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.flow6-step {
    position: relative;
    isolation: isolate; /* ::before の背景画像(z-index:-1)をカード内に閉じ込める */
    background-color: #ffffff;
    border: 1px solid #ece3d6;
    border-radius: 14px;
    animation: flow6-glow 15s ease-in-out infinite;
    will-change: transform, box-shadow;
}
/* ピックアップ（順番に光る）瞬間、各ステップの背景画像をカード内へふわっと表示。
   画像は ::before に持たせ、glow と同じ 15s・同じ遅延(inherit)で opacity をシンクさせる。
   テキストより後ろ(z-index:-1)に置くので可読性は保たれる。
   画像はステップごとに差し替え可能（現状は既存画像を仮当て）。*/
.flow6-step::before {
    content: "";
    position: absolute;
    inset: 0px;
    z-index: -1;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: flow6-pickup-bg 15s ease-in-out infinite;
    animation-delay: inherit; /* 親カードの glow と同じ遅延に揃える */
    pointer-events: none;
}
@keyframes flow6-pickup-bg {
    0% {
        opacity: 0;
    }
    6% {
        opacity: 0.45;
    }
    18% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* ステップごとの背景画像（仮当て。専用画像ができ次第 URL を差し替え） */
.flow6-step--1::before {
    background-image: url("../images/biz-consulting.png");
}
.flow6-step--2::before {
    background-image: url("../images/biz-komon.png");
}
.flow6-step--3::before {
    background-image: url("../images/biz-training.png");
}
.flow6-step--4::before {
    background-image: url("../images/lesson-hero.png?v=3");
}
.flow6-step--5::before {
    background-image: url("../images/biz-dev.png");
}
.flow6-step--6::before {
    background-image: url("../images/seg-prime.png");
}
.flow6-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background-color: #c9a45f;
    border-radius: 999px;
}
.flow6-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    color: #46463e;
}
.flow6-text {
    color: #6b6656;
    line-height: 1.8;
}
.flow6-text + .flow6-text {
    padding-top: 6px;
}
/* 1→6 の順に光らせる（各ステップに遅延を付与） */
@keyframes flow6-glow {
    0% {
        border-color: #ece3d6;
        box-shadow: 0px 0px 0px rgba(201, 164, 95, 0);
        transform: translateY(0px);
        background-color: #ffffff;
    }
    6% {
        border-color: #cba869;
        box-shadow: 0px 12px 30px rgba(201, 164, 95, 0.4);
        transform: translateY(-5px);
        background-color: #fffaf0;
    }
    18% {
        border-color: #ece3d6;
        box-shadow: 0px 0px 0px rgba(201, 164, 95, 0);
        transform: translateY(0px);
        background-color: #ffffff;
    }
    100% {
        border-color: #ece3d6;
        box-shadow: 0px 0px 0px rgba(201, 164, 95, 0);
        transform: translateY(0px);
        background-color: #ffffff;
    }
}
.flow6-step--1 {
    animation-delay: 0s;
}
.flow6-step--2 {
    animation-delay: 2.5s;
}
.flow6-step--3 {
    animation-delay: 5s;
}
.flow6-step--4 {
    animation-delay: 7.5s;
}
.flow6-step--5 {
    animation-delay: 10s;
}
.flow6-step--6 {
    animation-delay: 12.5s;
}

/* リビール（リード・グリッドをスクロールでフェード） */
.adopt-lead,
.flow6 {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.adopt-lead.is-visible,
.flow6.is-visible {
    opacity: 1;
    transform: translateY(0px);
}

/* 動きを控える設定では、順番に光るループを止める */
@media (prefers-reduced-motion: reduce) {
    .flow6-step {
        animation: none;
    }
    /* 画像フェードも止める（背景画像は非表示のまま） */
    .flow6-step::before {
        animation: none;
    }
}

/* PC: 3列×2段。下段を 6・5・4 の順に明示配置してスネークにする */
@media (min-width: 768px) {
    .adopt-lead {
        font-size: 17px;
        padding: 0px 0px 44px 0px;
    }
    /* 進行順の矢印を入れるゆとりを持たせるため gap を広げる */
    .flow6 {
        gap: 40px;
    }
    .flow6-step--1 {
        grid-column: 1;
        grid-row: 1;
    }
    .flow6-step--2 {
        grid-column: 2;
        grid-row: 1;
    }
    .flow6-step--3 {
        grid-column: 3;
        grid-row: 1;
    }
    .flow6-step--6 {
        grid-column: 1;
        grid-row: 2;
    }
    .flow6-step--5 {
        grid-column: 2;
        grid-row: 2;
    }
    .flow6-step--4 {
        grid-column: 3;
        grid-row: 2;
    }
    .flow6-step {
        padding: 26px 26px 28px 26px;
        min-height: 182px;
    }
    .flow6-no {
        width: 40px;
        height: 40px;
        font-size: 17px;
        margin: 0px 0px 16px 0px;
    }
    .flow6-title {
        font-size: 18px;
        padding: 0px 0px 10px 0px;
    }
    .flow6-tool {
        padding: 0px 0px 12px 0px;
    }
    .flow6-text {
        font-size: 14px;
    }
    .adopt-badge {
        font-size: 12px;
        padding: 5px 13px 5px 13px;
    }
}
/* SP: 2列で 1→6 を素直に並べる（グリッド明示配置は解除） */
@media (max-width: 767px) {
    .adopt-lead {
        font-size: 15px;
        padding: 0px 0px 32px 0px;
    }
    .flow6 {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .flow6-step {
        padding: 18px 16px 20px 16px;
        min-height: 158px;
    }
    .flow6-no {
        width: 34px;
        height: 34px;
        font-size: 15px;
        margin: 0px 0px 12px 0px;
    }
    .flow6-title {
        font-size: 15px;
        padding: 0px 0px 8px 0px;
    }
    .flow6-tool {
        padding: 0px 0px 10px 0px;
    }
    .flow6-text {
        font-size: 13px;
    }
    .adopt-badge {
        font-size: 11px;
        padding: 4px 11px 4px 11px;
    }
}

/* ============================================================
   AI導入研修(01): 横幅を広げ、進行順(1→2→3→4→5→6)の間に矢印を追加
============================================================ */
/* このセクションだけ横幅を広げてフロー＋矢印にゆとりを持たせる（見出しも合わせる） */
#training .adopt,
#training .usecase-dept {
    max-width: 1400px;
}
/* スネーク配置（上段 1・2・3／下段 6・5・4）に沿って進行方向の矢印を各カード ::after で描く。
   1・2 の右→、3 の下↓、4・5 の左←（6 は終点なので無し）。PC のみ。 */
@media (min-width: 768px) {
    .flow6-step--1::after,
    .flow6-step--2::after,
    .flow6-step--3::after,
    .flow6-step--4::after,
    .flow6-step--5::after {
        content: "";
        position: absolute;
        z-index: 2;
        width: 14px;
        height: 14px;
        border-top: 2.5px solid #c9a45f;
        border-right: 2.5px solid #c9a45f;
        pointer-events: none;
    }
    /* 1→2 / 2→3: 右向き（カード右の gap 中央） */
    .flow6-step--1::after,
    .flow6-step--2::after {
        top: 50%;
        right: -27px;
        margin-top: -7px;
        transform: rotate(45deg);
    }
    /* 3→4: 下向き（カード下の gap 中央） */
    .flow6-step--3::after {
        left: 50%;
        bottom: -27px;
        margin-left: -7px;
        transform: rotate(135deg);
    }
    /* 4→5 / 5→6: 左向き（カード左の gap 中央） */
    .flow6-step--4::after,
    .flow6-step--5::after {
        top: 50%;
        left: -27px;
        margin-top: -7px;
        transform: rotate(-135deg);
    }
}

/* ============================================================
   「部門別・AI活用の実例」と同じ fade-tilt 登場を、
   AI導入研修 / 総務部 の見出し（usecase-dept）に適用して統一する。
============================================================ */
.page-usecases .usecase-dept {
    opacity: 1;
    transform: none;
}
.page-usecases .usecase-dept-no,
.page-usecases .usecase-dept-name {
    opacity: 0;
}
.page-usecases .usecase-dept.is-visible .usecase-dept-no {
    animation: fade-tilt 0.6s cubic-bezier(0, 0.25, 1, 1) both;
}
.page-usecases .usecase-dept.is-visible .usecase-dept-name {
    animation: fade-tilt 1.6s cubic-bezier(0, 0.25, 1, 1) both;
}

/* ============================================================
   404 / エラーページ（web-error-pages 準拠。暖色ダーク＋金グラデ）
   単体ページ用の自己完結レイアウト。トップとは別デザイン。
============================================================ */
.error-main {
    background-color: #1a1510;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.error-wrap {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-hero {
    text-align: center;
    margin: 0px auto 0px auto;
    width: 100%;
}
.error-code {
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, #ffe1a8 0%, #f2ac57 52%, #c9a45f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 0px 0px 24px 0px;
}
.error-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
    letter-spacing: 0.02em;
    margin: 0px 0px 16px 0px;
}
.error-desc {
    font-family: "Noto Sans JP", sans-serif;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.8;
    margin: 0px 0px 8px 0px;
}
.error-desc:last-of-type {
    margin: 0px 0px 40px 0px;
}
.error-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.error-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 8px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: #3a2a12;
    background: linear-gradient(135deg, #ffe1a8 0%, #f2ac57 52%, #c9a45f 100%);
    box-shadow: 0px 12px 32px -12px rgba(201, 164, 95, 0.7);
    transition:
        filter 0.3s ease,
        box-shadow 0.3s ease;
}
.error-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0px 20px 48px -12px rgba(201, 164, 95, 0.85);
}

/* --- SP --- */
@media (max-width: 767px) {
    .error-wrap {
        padding: 120px 16px 72px 16px;
    }
    .error-hero {
        max-width: 480px;
    }
    .error-code {
        font-size: 96px;
    }
    .error-title {
        font-size: 20px;
    }
    .error-desc {
        font-size: 16px;
    }
    .error-btn {
        padding: 16px 32px 16px 32px;
        font-size: 16px;
    }
}
/* --- PC --- */
@media (min-width: 768px) {
    .error-wrap {
        padding: 160px 48px 96px 48px;
    }
    .error-hero {
        max-width: 640px;
    }
    .error-code {
        font-size: 160px;
    }
    .error-title {
        font-size: 32px;
    }
    .error-desc {
        font-size: 16px;
    }
    .error-btn {
        padding: 16px 48px 16px 48px;
        font-size: 16px;
    }
}