/* ==========================================================================
   TOP ページ
   色・文字・余白は tokens.css のトークンを使う。
   事業色（コーラル / オレンジ / ティール）はテンプレート側で data-service を付けて --color-accent を切り替える
   ========================================================================== */

/*
 * TOP 専用の値。このブランチは共通素材（tokens.css）の前に分かれているため、ここで定義している。
 * 共通素材のマージ後に tokens.css へ移す候補
 */
.p-top {
    /* 対応エリアの色帯（地図の色と揃える） */
    --top-area-1: #e5a58d;
    --top-area-2: #b9d982;
    --top-area-3: #e4a8c8;
    --top-area-4: #e0b66c;
    --top-area-5: #89cee9;
    --top-area-6: #58a8d6;
    --top-area-7: #b2a9cf;
    --top-area-8: #74b3b2;
    /* よくある質問の豚 */
    --top-faq-chara-w: 140px;
    /* 4つの強みの豚。下の部分は「PeeKaBoo の価値」の枠の後ろに隠す */
    --top-strength-chara-w: 120px;
    --top-strength-chara-hide: var(--space-5);
}

/* 共通の広いコンテナ（.l-container--wide）がまだ無いため、TOP 内だけで --container-wide を使う */
.p-top__wide {
    width: 100%;
    max-width: calc(var(--container-wide) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.p-top-section {
    padding-block: var(--section-pad);
}

/* 見出し類は単語の途中で折り返さず、「、」などの区切りで折り返す */
.p-top-heading,
.p-top-fv__title,
.p-top-web__title,
.p-top-approach__catch {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* FV のキャッチだけは約物（“”）を詰めて、SP でも 1 行目が収まるようにする */
.p-top-fv__title {
    font-feature-settings: "palt";
}

.p-top-lead {
    margin: var(--space-4) 0 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    text-align: center;
}

.p-top-lead + .l-card-grid {
    margin-top: var(--content-gap);
}

/*
 * HTML の width / height 属性は縦横比の予約に使い、実際の大きさは CSS の幅に合わせて縦横比を保つ。
 * :where() で詳細度を 0 にし、共通パーツ（取引企業ロゴなど）側の画像の指定を上書きしないようにする
 */
:where(.p-top img) {
    max-width: 100%;
    height: auto;
}

.p-top-more {
    display: flex;
    justify-content: center;
    margin-top: var(--content-gap);
}

/* ---- TOP 専用の見出し（＼ 〜 ／ ＋ h2） ---- */
.p-top-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    text-align: center;
}

.p-top-heading__sub {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

.p-top-heading__sub::before,
.p-top-heading__sub::after {
    content: "＼";
    font-weight: var(--weight-regular);
}

.p-top-heading__sub::after {
    content: "／";
}

.p-top-heading__title {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

.p-top-heading__title em,
.p-top-fv__title em {
    font-style: normal;
    color: var(--color-accent);
}

.p-top-heading__title em {
    font-size: var(--text-h2-em);
}

/* ==========================================================================
   ファーストビュー
   ========================================================================== */
.p-top-fv {
    padding-block: var(--space-5) var(--space-7);
    /* 上半分だけ白からクリーム色へのグラデーションにし、下半分は同じ色を続ける */
    background:
        var(--gradient-hero) top / 100% 50% no-repeat,
        var(--color-bg-warm);
}

.p-top-fv__inner {
    display: grid;
    gap: var(--space-6);
}

.p-top-fv__body {
    text-align: center;
}

.p-top-fv__sub {
    display: none;
    margin: 0;
    font-size: var(--text-display-sub);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

.p-top-fv__title {
    /* SP はキャッチ 1 行目が 1 行に収まるよう、画面端余白の内側まで少し広げる */
    margin: 0 calc(var(--space-3) - var(--gutter));
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
}

.p-top-fv__title strong {
    font-size: var(--text-display-em);
    font-weight: inherit;
    color: var(--color-accent);
}

.p-top-fv__lead {
    margin: var(--space-4) 0 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
}

@media (max-width: 767px) {
    .p-top-fv__lead br {
        display: none;
    }
}

.p-top-fv__stats {
    /* SP は 3 つ・3 つ・2 つの 3 段にし、最後の段は中央に寄せる */
    --_cols: 3;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.p-top-fv__stat {
    width: calc((100% - var(--space-2) * (var(--_cols) - 1)) / var(--_cols));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-1);
    text-align: center;
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
}

.p-top-fv__stat-label,
.p-top-fv__stat-text,
.p-top-fv__stat-note {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

.p-top-fv__stat-value {
    font-size: var(--text-caption);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-number);
}

.p-top-fv__stat-number {
    font-size: var(--text-number);
}

/* 単位（園・%・年など）は数値だけを目立たせるため黒にする */
.p-top-fv__stat-unit {
    color: var(--color-text);
}

.p-top-fv__stat-icon {
    width: var(--space-5);
    height: var(--space-5);
    object-fit: contain;
}

/* SP は画面下の追従ボタンがあるので出さない */
.p-top-fv__buttons {
    display: none;
}

.p-top-fv__visual {
    position: relative;
    /* 豚の上下位置を、写真と同じく横幅を基準に決めるため */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-5);
}

.p-top-fv__photo {
    width: 72%;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.p-top-fv__photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.p-top-fv__photo--2 {
    width: 76%;
    align-self: flex-end;
}

/* 豚の位置・大きさは写真と同じく横幅に対する割合で決め、画面幅が変わっても写真との位置関係を保つ */
.p-top-fv__chara {
    position: absolute;
}

.p-top-fv__chara--1 {
    top: 22.5cqi;
    left: 77.5%;
    width: 17%;
}

.p-top-fv__chara--2 {
    bottom: calc(var(--space-5) - 6cqi);
    left: 11%;
    width: 16%;
}

/* 矢印は写真に重ならないよう、並びの中に入れて高さ分の場所を取る */
.p-top-fv__arrow {
    display: block;
    width: 13%;
    margin-left: 55%;
    aspect-ratio: 181 / 200;
    background: url("../../images/top/fv-arrow.webp") center / contain no-repeat;
}

/* ==========================================================================
   取引企業ロゴ
   ========================================================================== */
.p-top-logos {
    padding-block: var(--space-5);
}

/* ロゴが 1 件も無いときは、余白だけの帯を出さない */
.p-top-logos:not(:has(.c-client-logos)) {
    display: none;
}

/* ==========================================================================
   4つの強み
   ========================================================================== */
.p-top-strength {
    background-color: var(--color-bg-warm);
}

/* すぐ下の「3つのアプローチ」も同じ背景色のため、間の余白は上下それぞれ半分にして合計 1 段分にする（design.md 4 章） */
.p-top-strength {
    padding-bottom: calc(var(--section-pad) / 2);
}

.p-top-strength + .p-top-approach {
    padding-top: calc(var(--section-pad) / 2);
}

.p-top-strength__head {
    position: relative;
}

.p-top-strength__chara {
    width: var(--top-strength-chara-w);
    margin: var(--content-gap) auto calc((var(--content-gap) + var(--top-strength-chara-hide)) * -1);
}

.p-top-strength__chara img {
    width: 100%;
    height: auto;
}

/* 枠を豚より手前に重ね、枠の背景で豚の下の部分を隠す */
.p-top-strength__value {
    position: relative;
    z-index: 1;
    background-color: var(--color-bg-warm);
    display: grid;
    gap: var(--space-4);
    margin-top: var(--content-gap);
    padding: var(--space-5) var(--space-4);
    border: var(--border-w) solid var(--color-border-warm);
    border-radius: var(--radius-md);
}

.p-top-strength__value-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
}

.p-top-strength__value-icon {
    display: grid;
    place-items: center;
    width: var(--space-9);
    height: var(--space-9);
    background-color: var(--color-accent-soft);
    border-radius: var(--radius-pill);
}

.p-top-strength__value-icon img {
    width: var(--space-6);
}

.p-top-strength__value-text {
    margin: 0;
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
    text-align: center;
}

.p-top-strength__value-text em {
    font-size: var(--text-h3);
    font-style: normal;
    color: var(--color-accent);
}

.p-top-strength__value-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.p-top-strength__value-item {
    --_color: var(--color-accent);

    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
}

.p-top-strength__value-item > span:last-child {
    flex: 1;
    text-align: center;
}

.p-top-strength__value-item:not([data-service]) {
    --_color: var(--color-number);
}

.p-top-strength__value-item-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--space-6);
    height: var(--space-6);
    background-color: color-mix(in srgb, var(--_color) 10%, var(--color-bg));
    border-radius: var(--radius-pill);
}

.p-top-strength__value-item-icon img {
    width: var(--space-5);
}

.p-top-strength__list {
    display: grid;
    gap: var(--space-6);
    margin: var(--content-gap) 0 0;
    padding: 0;
    list-style: none;
}

/* カードの色：data-service があれば事業色、無ければ数値色（ブルー） */
.p-top-strength__item {
    --_color: var(--color-accent);

    position: relative;
    padding: var(--space-2) var(--space-2) var(--space-4);
    background-color: var(--color-bg);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-md);
}

.p-top-strength__item:not([data-service]) {
    --_color: var(--color-number);
}

.p-top-strength__num {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--space-6);
    height: var(--space-6);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-inverse);
    background-color: var(--_color);
    border-radius: var(--radius-pill);
    transform: translate(-50%, -50%);
}

.p-top-strength__photo {
    position: relative;
}

/* 直下の写真だけに効かせる（同じ枠の中のアイコン画像を切り抜かないため） */
.p-top-strength__photo > img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.p-top-strength__icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: grid;
    place-items: center;
    width: var(--space-6);
    height: var(--space-6);
    background-color: var(--color-bg);
    border-radius: var(--radius-pill);
    transform: translate(-50%, 50%);
}

.p-top-strength__icon img {
    width: var(--space-5);
}

.p-top-strength__title {
    margin: var(--space-5) 0 0;
    font-size: var(--text-feature-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
    text-align: center;
}

.p-top-strength__title em {
    font-style: normal;
    color: var(--_color);
}

.p-top-strength__text {
    margin: var(--space-3) 0 0;
    padding-inline: var(--space-2);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

/* ==========================================================================
   代表的な3つのアプローチ ＋ Webより紙…
   ========================================================================== */
.p-top-approach {
    background-color: var(--color-bg-warm);
}

.p-top-approach__intro {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--content-gap);
}

.p-top-approach__catch {
    margin: 0;
    /* 図と縦に並ぶ幅では中央寄せ。横に並ぶ lg 以上は左寄せ */
    text-align: center;
    font-size: var(--text-lead);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
}

.p-top-approach__catch em {
    font-size: var(--text-display);
    font-style: normal;
    color: var(--color-accent);
}

.p-top-approach__text {
    margin: var(--space-4) 0 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.p-top-approach__flow {
    padding: var(--space-4);
    border: var(--border-w) solid var(--color-border-warm);
    border-radius: var(--radius-md);
}

/* 見出しの下線の中央に付ける下向きの切り欠き */
.p-top-approach__flow-title {
    position: relative;
    margin: 0;
    padding-bottom: var(--space-3);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    text-align: center;
    border-bottom: var(--border-w) solid var(--color-border-warm);
}

.p-top-approach__flow-title::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: var(--space-3);
    height: var(--space-3);
    background-color: var(--color-bg-warm);
    border-right: var(--border-w) solid var(--color-border-warm);
    border-bottom: var(--border-w) solid var(--color-border-warm);
    transform: translate(-50%, -50%) rotate(45deg);
}

.p-top-approach__flow-title em {
    font-size: var(--text-lead);
    font-style: normal;
    color: var(--color-number);
}

.p-top-approach__flow-list {
    display: grid;
    /* SP は写真の間に下向きの矢印を置くため広めに空ける */
    gap: var(--space-7);
    justify-items: center;
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.p-top-approach__flow-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

/* 写真の丸。矢印の位置の基準にする */
.p-top-approach__flow-photo {
    position: relative;
    display: block;
    width: 100%;
}

/* 次の人へ渡る流れを示す点線の矢印（SP は写真の下で下向き、PC は写真の縦の中央で右向き） */
.p-top-approach__flow-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    width: var(--space-4);
    height: var(--space-4);
    margin-top: calc(var(--space-5) - var(--space-1));
    background-color: var(--color-accent);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 12h3M7 12h3M13 12h3M16 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translateX(-50%) rotate(90deg);
}

.p-top-approach__flow-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-pill);
}

/* 写真の下端に重ねて置くため、写真より手前に出す */
.p-top-approach__flow-label {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--space-4) * -1);
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-inverse);
    background-color: var(--color-accent);
    border-radius: var(--radius-sm);
}

.p-top-approach__cards {
    display: grid;
    gap: var(--space-5);
    margin: var(--content-gap) 0 0;
    padding: 0;
    list-style: none;
}

.p-top-approach__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
}

.p-top-approach__card-title {
    position: relative;
    margin: 0;
    padding: var(--space-2);
    font-size: var(--text-lead);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    text-align: center;
    color: var(--color-text-inverse);
    background-color: var(--color-accent);
}

/* 見出し帯を吹き出しにする三角 */
.p-top-approach__card-title::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: var(--space-4);
    height: calc(var(--space-4) / 2);
    background-color: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateX(-50%);
}

.p-top-approach__card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    /* 左右は狭くして箇条書きを 1 行に収める。上は見出しの三角が写真に重ならないよう、三角の高さ分を足す */
    padding: calc(var(--space-4) / 2 + var(--space-2)) var(--space-2) var(--space-4);
}

.p-top-approach__card-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.p-top-approach__card-catch {
    margin: 0;
    font-size: var(--text-feature-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
    text-align: center;
}

.p-top-approach__card-catch em {
    font-style: normal;
    color: var(--color-accent);
}

.p-top-approach__card-points {
    display: grid;
    flex: 1;
    align-content: start;
    gap: var(--space-2);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-top-approach__card-points li {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-body);
    line-height: var(--leading-tight);
}

.p-top-approach__card-points li::before {
    content: "";
    flex-shrink: 0;
    width: var(--space-3);
    height: var(--space-3);
    background-color: var(--color-accent);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm-1.2 11.4L3.6 8.2l1.1-1.1 2.1 2.1 4.5-4.5 1.1 1.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.p-top-web {
    position: relative;
    margin-top: var(--space-7);
    text-align: center;
}

.p-top-web__title {
    margin: 0;
    /* SP は豚に挟まれて幅が狭いため、通常の文字を小さくして強調語だけ大きく見せる */
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
}

.p-top-web__title em {
    font-size: var(--text-h2);
    font-style: normal;
    color: var(--color-accent);
}

/* 豚は並びに入れず、項目の下端を基準に左右へ重ねて置く（豚の高さで項目が押し下げられないように） */
.p-top-web__body {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
}

/* lg 未満は見出しの左右に置き、見出しは豚の分だけ左右を空ける */
.p-top-web__chara {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--space-6);
}

.p-top-web__chara:last-child {
    right: 0;
    left: auto;
}

.p-top-web__title {
    padding-inline: var(--space-6);
    /* 約物（、）を詰め、「、」だけが次の行に残らないよう言葉の途中では折り返さない */
    font-feature-settings: "palt";
    overflow-wrap: normal;
}

.p-top-web__list {
    display: grid;
    width: 100%;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-top-web__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
}

.p-top-web__icon {
    display: grid;
    place-items: center;
    width: var(--space-6);
    height: var(--space-6);
    background-color: var(--color-accent-soft);
    border-radius: var(--radius-pill);
}

.p-top-web__icon img {
    width: var(--space-4);
}

/* ==========================================================================
   サービス紹介（サンプリング / イベント / モニタリング）
   ========================================================================== */
/* サービス紹介は色付きの面が並ぶため、面の外側の余白は通常のセクションより狭くする */
.p-top-service {
    padding-block: var(--space-5);
}

.p-top-service__inner {
    padding-block: var(--space-7);
    background-color: var(--color-accent-bg);
}

.p-top-service__intro {
    display: grid;
    gap: var(--space-5);
}

.p-top-service__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-accent);
}

.p-top-service__title-icon img {
    width: var(--space-6);
}

.p-top-service__catch {
    margin: var(--space-4) 0 0;
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
}

.p-top-service__text {
    margin: var(--space-4) 0 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.p-top-service__photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.p-top-service__features {
    position: relative;
    display: grid;
    gap: var(--space-4);
    margin: var(--space-9) 0 0;
    padding: 0;
    list-style: none;
}

/* 1 枚目のカードの上に座る豚。下の部分はカードの後ろに隠す */
.p-top-service__features::before {
    content: "";
    position: absolute;
    bottom: calc(100% - var(--space-3));
    left: var(--space-3);
    width: var(--space-6);
    aspect-ratio: 140 / 200;
    background-color: var(--color-accent);
    mask: url("../../images/top/decor-pig-2.webp") center bottom / contain no-repeat;
}

.p-top-service__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-4) var(--space-5);
    text-align: center;
    background-color: var(--color-bg);
    border: var(--border-w-accent) solid var(--color-accent);
    border-radius: var(--radius-md);
    position: relative;
}

.p-top-service__feature-num {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-inverse);
    background-color: var(--color-accent);
    border-radius: var(--radius-sm) 0 var(--radius-sm) 0;
}

.p-top-service__feature-icon img {
    width: var(--space-6);
}

.p-top-service__feature-title {
    margin: var(--space-3) 0 0;
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
    color: var(--color-accent);
}

.p-top-service__feature-text {
    margin: var(--space-2) 0 0;
    font-size: var(--text-card-text);
    line-height: var(--leading-card);
    text-align: left;
}

.p-top-service__tabs {
    margin-top: var(--space-7);
}

.p-top-service__tablist {
    display: flex;
}

.p-top-service__tab {
    flex: 1;
    min-height: var(--hit-min);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text);
    background-color: var(--color-border);
    border: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: pointer;
}

/* 選んでいないタブは、ホバーで文字に下線を出す */
.p-top-service__tab:not([aria-selected="true"]) {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--motion-fast);
}

.p-top-service__tab:not([aria-selected="true"]):is(:hover, :focus-visible) {
    text-decoration-color: currentColor;
}

.p-top-service__tab[aria-selected="true"] {
    background-color: var(--color-bg);
}

.p-top-service__panel {
    padding: var(--space-4);
    background-color: var(--color-bg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.p-top-service__tags {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-top-service__tags li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-card-text);
    line-height: var(--leading-tight);
    background-color: var(--color-bg-muted);
}

.p-top-service__tags li::before {
    content: "";
    flex-shrink: 0;
    width: var(--dot-size, var(--space-2));
    height: var(--dot-size, var(--space-2));
    background-color: var(--color-accent);
    border-radius: var(--radius-pill);
}

.p-top-service__cases {
    position: relative;
    margin-top: var(--space-7);
}

.p-top-service__cases-title {
    margin: 0;
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

/* 実施例の見出しの右に並ぶ豚 2 匹。下の部分はカードを手前に重ねて隠す */
.p-top-service__cases-title {
    position: relative;
}

.p-top-service__cases-title::before,
.p-top-service__cases-title::after {
    content: "";
    position: absolute;
    bottom: calc((var(--space-4) + var(--space-3)) * -1);
    background-color: var(--color-accent);
    mask: center bottom / contain no-repeat;
}

.p-top-service__cases-title::after {
    right: var(--space-5);
    width: var(--space-8);
    aspect-ratio: 139 / 200;
    mask-image: url("../../images/top/decor-pig-1.webp");
    transform: scaleX(-1);
}

.p-top-service__cases-title::before {
    right: calc(var(--space-5) + var(--space-8) + var(--space-2));
    width: var(--space-6);
    aspect-ratio: 137 / 200;
    mask-image: url("../../images/top/decor-pig-3.webp");
}

.p-top-service__case-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-4);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.p-top-service__case {
    padding: var(--space-4);
    background-color: var(--color-bg);
}

.p-top-service__case-company {
    margin: 0;
    padding-left: var(--space-3);
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
    border-left: var(--heading-bar-w, var(--space-1)) solid var(--color-accent);
}

.p-top-service__case-table {
    margin: var(--space-3) 0 0;
}

.p-top-service__case-row {
    display: grid;
    /* SP は項目名の欄を狭くして本文の幅を確保する */
    grid-template-columns: calc(var(--space-6) + var(--space-2)) minmax(0, 1fr);
    gap: var(--space-3);
    padding-block: var(--space-2);
}

.p-top-service__case-row dt {
    align-self: start;
    padding: var(--space-1);
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    text-align: center;
    background-color: var(--color-accent-tint);
}

.p-top-service__case-row dd {
    margin: 0;
    padding-bottom: var(--space-2);
    font-size: var(--text-card-text);
    line-height: var(--leading-card);
    border-bottom: var(--border-w) solid var(--color-border);
}

.p-top-service__buttons {
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    margin-top: var(--space-6);
}

/* ==========================================================================
   動画・対応エリア・FAQ
   ========================================================================== */
.p-top-movie__frame {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
}

.p-top-movie__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.p-top-area__body {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--content-gap);
}

.p-top-area__map {
    justify-self: center;
    width: 70%;
    max-width: calc(var(--card-w) * 1.1);
}

.p-top-area__lists {
    display: grid;
    gap: var(--space-3);
}

.p-top-area__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-top-area__item {
    --_color: var(--top-area-1);

    background-color: var(--color-bg);
    border: var(--border-w) solid var(--color-border);
    border-left: var(--heading-bar-w, var(--space-1)) solid var(--_color);
    border-radius: var(--radius-sm);
}

.p-top-area__item--2 { --_color: var(--top-area-2); }
.p-top-area__item--3 { --_color: var(--top-area-3); }
.p-top-area__item--4 { --_color: var(--top-area-4); }
.p-top-area__item--5 { --_color: var(--top-area-5); }
.p-top-area__item--6 { --_color: var(--top-area-6); }
.p-top-area__item--7 { --_color: var(--top-area-7); }
.p-top-area__item--8 { --_color: var(--top-area-8); }

.p-top-area__summary {
    display: grid;
    grid-template-columns: var(--space-9) minmax(0, 1fr) var(--space-4);
    align-items: center;
    gap: var(--space-3);
    min-height: var(--hit-min);
    padding: var(--space-2) var(--space-3);
    list-style: none;
    cursor: default;
}

.p-top-area__details .p-top-area__summary {
    cursor: pointer;
}

.p-top-area__summary::-webkit-details-marker {
    display: none;
}

.p-top-area__name {
    font-size: var(--text-card-title);
    font-weight: var(--weight-bold);
}

.p-top-area__count {
    font-size: var(--text-body);
}

.p-top-area__toggle {
    width: var(--space-3);
    height: var(--space-3);
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s;
}

.p-top-area__details[open] .p-top-area__toggle {
    transform: rotate(180deg);
}

.p-top-area__detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-4);
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: var(--border-w) solid var(--color-border);
}

.p-top-area__detail-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: var(--space-2);
    font-size: var(--text-card-text);
    line-height: var(--leading-tight);
    border-bottom: var(--border-w) solid var(--color-border);
}

.p-top-area__detail-row dt {
    font-weight: var(--weight-bold);
}

.p-top-area__detail-row dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.p-top-faq {
    background-color: var(--color-bg-warm);
}

.p-top-faq__head {
    position: relative;
    margin-bottom: var(--content-gap);
}

/* 下端を 1 つ目の質問の上端に合わせ、脚の部分は質問の後ろに隠す */
.p-top-faq__chara {
    position: absolute;
    right: 0;
    bottom: calc((var(--content-gap) + var(--space-2)) * -1);
    /* モバイル幅は見出しに重ならない大きさにする */
    width: var(--space-6);
}

.p-top-faq__list {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   PC（md 以上）
   ========================================================================== */
/* ==========================================================================
   sm 以上：アプローチの図は横並び（縦に 3 つ並べると大きすぎるため、モバイル幅だけ縦並び）
   ========================================================================== */
@media (min-width: 540px) {
    .p-top-faq__chara {
        width: var(--space-8);
    }

    /* 縦並びのまま画面が広くなる幅（sm〜md）で写真が大きくなりすぎないよう、幅を抑えて中央に置く */
    .p-top-service__photo {
        width: 100%;
        max-width: calc(var(--card-w) * 1.5);
        margin-inline: auto;
    }

    /* 図の枠が画面幅いっぱいになる幅でも写真が大きくなりすぎないよう、並び全体の幅を抑えて中央に置く */
    .p-top-approach__flow-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
        max-width: calc(var(--card-w) * 1.5);
        margin-inline: auto;
    }

    .p-top-approach__flow-item {
        width: 100%;
    }

    .p-top-approach__flow-arrow {
        top: 50%;
        left: calc(100% + var(--space-6) / 2);
        width: var(--space-5);
        height: var(--space-5);
        margin-top: 0;
        transform: translate(-50%, -50%);
    }
}

@media (min-width: 768px) {
    .p-top-service__case-row {
        grid-template-columns: var(--space-9) minmax(0, 1fr);
    }

    .p-top-fv__body {
        text-align: left;
    }

    .p-top-fv__sub {
        display: block;
    }

    .p-top-fv__title {
        margin: var(--space-3) 0 0;
    }

    .p-top-fv__stats {
        --_cols: 4;
    }

    .p-top-logos {
        padding-block: var(--space-7);
    }

    .p-top-service {
        padding-block: var(--space-7);
    }

    .p-top-fv__stat-label,
    .p-top-fv__stat-text,
    .p-top-fv__stat-note {
        font-size: var(--text-caption);
    }

    .p-top-heading__sub {
        gap: var(--space-4);
        font-size: var(--text-body);
    }

    .p-top-fv__buttons {
        display: flex;
        gap: var(--space-4);
        margin-top: var(--space-6);
    }

    .p-top-strength__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* サービスの特徴（3 つ）は 2 列だと 2＋1 になり収まりが悪いので、lg で 3 列になるまで縦並び */
    .p-top-approach__cards,
    .p-top-service__case-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 縦並びだと写真が大きくなりすぎるため、タブレットから文章と写真を横に並べる */
    .p-top-service__intro {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        gap: var(--space-5);
    }

    .p-top-service__photo {
        max-width: none;
    }

    .p-top-web__list {
        grid-template-columns: repeat(3, auto);
        width: auto;
    }

    .p-top-service__tags {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .p-top-service__buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .p-top-faq__chara {
        right: var(--space-5);
        bottom: calc((var(--content-gap) + var(--space-3)) * -1);
        width: var(--top-faq-chara-w);
    }
}

/* ==========================================================================
   PC 広め（lg 以上）
   ========================================================================== */
@media (min-width: 1024px) {
    /* 「PeeKaBoo の価値」の 3 項目は、横に並べても文言が窮屈にならない幅（lg 以上）でだけ横並びにする */
    .p-top-strength__value {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        padding: var(--space-4) var(--space-5);
    }

    .p-top-strength__value-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .p-top-web__title {
        padding-inline: 0;
        font-size: var(--text-lead);
    }

    .p-top-web__body {
        position: relative;
    }

    .p-top-web__chara {
        top: auto;
        bottom: 0;
        left: 0;
        width: var(--space-9);
    }

    .p-top-web__chara:last-child {
        right: 0;
        left: auto;
    }

    .p-top-fv__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: center;
    }

    .p-top-strength__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .p-top-strength {
        --top-strength-chara-w: 140px;
    }

    .p-top-approach__catch {
        text-align: left;
    }

    .p-top-approach__intro {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        align-items: center;
        gap: var(--space-6);
    }

    .p-top-approach__cards,
    .p-top-service__features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .p-top-service__inner {
        padding: var(--space-8) calc(var(--gutter) + var(--space-5));
        border-radius: var(--radius-md);
    }

    .p-top-service__intro {
        gap: var(--space-6);
    }

    .p-top-service__tablist {
        width: 50%;
    }

    .p-top-service__tab {
        flex: none;
        width: 50%;
    }

    .p-top-service__panel {
        border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
    }

    .p-top-service__tags {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* 2 つ目のタブ（向いている目的）は文言が長めなので 2 列 */
    .p-top-service__panel--2 .p-top-service__tags {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*
     * 閉じた状態では、リストを地図の縦の中央に置く。
     * ただし中央揃えにすると開いたときにリストが上へ動くため、上揃えにして、
     * 閉じた状態のリストの高さと地図の高さの差の半分を上の余白で取る
     */
    .p-top-area__body {
        /* 列の比率（地図 1 : リスト 1.8）。下の地図の高さの計算にも使う */
        --_map-ratio: 1;
        --_list-ratio: 1.8;

        container-type: inline-size;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
        align-items: start;
        gap: var(--space-6);
    }

    .p-top-area__lists {
        /* 地図の高さ：地図の列の幅 × 画像の縦横比（初期画像 720×766） */
        --_map-h: calc((100cqi - var(--space-6)) * var(--_map-ratio) / (var(--_map-ratio) + var(--_list-ratio)) * 766 / 720);
        /* 閉じた状態のリストの高さ：項目 4 つ（高さ＝タップ領域＋上下の枠線）＋間 3 つ */
        --_list-h: calc((var(--hit-min) + var(--border-w) * 2) * 4 + var(--space-3) * 3);

        margin-top: max(0px, calc((var(--_map-h) - var(--_list-h)) / 2));
    }

    .p-top-area__map {
        width: 100%;
    }
}

/* ==========================================================================
   xl 以上：見出しの横に余裕がある幅でだけ豚を横に置く
   （それ未満は枠の上の中央。リード文と重ならないように）
   ========================================================================== */
@media (min-width: 1280px) {
    .p-top-web__chara {
        left: var(--space-7);
    }

    .p-top-web__chara:last-child {
        right: var(--space-7);
        left: auto;
    }

    .p-top-strength__chara {
        position: absolute;
        right: 0;
        bottom: calc((var(--content-gap) + var(--top-strength-chara-hide)) * -1);
        width: var(--top-strength-chara-w);
        margin: 0;
    }
}