@charset "UTF-8";
/*
Theme Name: Libero
Template: arkhe
Version: 1.0.1
Author: Taiga.K
*/

/* ========================================================
   美工堂・株式会社LIBERO サイトスタイルシート
   [目次]
   1. Base & Variables
   2. Common (共通パーツ)
   3. Header
   4. Footer
   5. Front Page (TOP)
   6. Page - Company (会社概要)
   ======================================================== */

/* Google Material Iconsの読み込み */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

/* ========================================================
   1. Base & Variables
   ======================================================== */
:root {
    /* Colors */
    --color-primary: #CE1C26;   /* LIBERO Red */
    --color-secondary: #00A0E9; /* Cyan Blue */
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg-light: #F9F9F9;
    --color-bg-service: #D32F2F;
    --color-bg-footer: #2C2C2C;
    --color-white: #FFFFFF;
    --color-border: #DDDDDD;

    /* Layout & Fonts */
    --width-inner: 1100px;
    --font-base: "Noto Sans JP", sans-serif;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.8;
    margin: 0;
    overflow-x: hidden;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
a:hover { opacity: 0.7; }
.inner { max-width: var(--width-inner); margin: 0 auto; padding: 0 20px; }

/* ========================================================
   2. Common
   ======================================================== */
.section { padding: 60px 0; }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title__en {
    font-size: 28px; font-weight: 700; color: var(--color-primary);
    letter-spacing: 0.1em; display: block; text-transform: uppercase;
    line-height: 1;
}
.section-title__ja {
    font-size: 13px; font-weight: bold; margin-top: 5px; display: block;
    color: #333; letter-spacing: 0.05em;
}

/* PC Override */
@media (min-width: 768px) {
    .section { padding: 100px 0; }
    .section-title { margin-bottom: 60px; }
    .section-title__en { font-size: 40px; }
    .section-title__ja { font-size: 15px; }
}

/* ========================================================
   3. Header
   ======================================================== */
.header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    border-bottom: 1px solid #eee;
    height: 64px;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0;
}

/* ロゴ */
.header__logo {
    margin-left: 20px;
    flex-shrink: 0;
}
.header__logo img {
    height: 40px;
    width: auto;
    display: block;
}

/* --- 初期状態（スマホ向け）：PC要素を消す --- */
.header__nav,
.header__actions {
    display: none;
}

/* --- スマホ用ハンバーガーメニュー設定 --- */
.hamburger {
    display: block;
    position: fixed;
    top: 8px;
    right: 15px;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    z-index: 1001;
    cursor: pointer;
    padding: 0;
}
.hamburger span {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background-color: #fff;
    transition: all 0.4s ease;
}
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 23px; }
.hamburger span:nth-child(3) { top: 30px; }

/* ハンバーガー開閉アニメーション */
.hamburger.is-active { background: #333; }
.hamburger.is-active span:nth-child(1) { top: 23px; transform: translateX(-50%) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { top: 23px; transform: translateX(-50%) rotate(-45deg); }

/* ドロワーメニュー */
.sp-nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    z-index: 900;
    clip-path: circle(0% at 90% 5%);
    transition: clip-path 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}
.sp-nav.is-active {
    clip-path: circle(150% at 90% 5%);
    pointer-events: auto;
}
.sp-nav__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-nav__list {
    list-style: none;
    padding: 0;
    text-align: center;
}
.sp-nav__list li { margin-bottom: 25px; }
.sp-nav__list li a {
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}
.sp-nav__contact a {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    margin-top: 10px;
}

/* --- Header PC Layout (768px以上) --- */
@media (min-width: 768px) {
    /* スマホ要素を消す */
    .hamburger, .sp-nav { display: none !important; }

    .header__inner {
        padding-left: 40px; 
        padding-right: 0;
    }
    .header__logo { margin-left: 0; }

    /* ナビゲーション表示 */
    .header__nav {
        display: block;
        margin-left: auto;
        margin-right: 30px;
        height: 100%;
    }
    .header__list {
        display: flex;
        gap: 0;
        list-style: none;
        padding: 0;
        margin: 0;
        height: 100%;
        align-items: center;
    }
    .header__item {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .header__item > a {
        display: block;
        padding: 0 20px;
        font-weight: bold;
        font-size: 14px;
        color: #333;
        text-decoration: none;
        line-height: 64px;
        position: relative;
    }
    /* 下矢印 */
    .header__item.has-child > a::after {
        content: "▼";
        font-size: 8px;
        margin-left: 6px;
        vertical-align: middle;
        color: #999;
    }

    /* ドロップダウン (1階層目) */
    .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background: #fff;
        box-shadow: 0 5px 10px -3px rgba(0,0,0,0.15);
        opacity: 0;
        visibility: hidden;
        transition: 0.2s;
        transform: translateY(10px);
        padding: 10px 0;
        border-radius: 0 0 4px 4px;
        list-style: none !important;
        margin: 0 !important;
    }
    .header__item:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .sub-menu li, .sub-sub-menu li {
        list-style: none !important;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    /* 不要な丸ポチ削除 */
    .sub-menu li::before, .sub-sub-menu li::before {
        content: none !important; display: none !important;
    }
    .sub-menu li a {
        display: block;
        padding: 10px 20px;
        font-size: 13px;
        color: #333;
        transition: background 0.2s;
        border-bottom: 1px solid #f0f0f0;
        text-decoration: none;
    }
    .sub-menu li:last-child a { border-bottom: none; }
    .sub-menu li a:hover {
        background-color: #f9f9f9;
        color: var(--color-primary);
    }

    /* 孫メニュー */
    .has-sub-child { position: relative; }
    .has-sub-child > a::after {
        content: "▶"; font-size: 8px; float: right; margin-top: 4px; color: #ccc;
    }
    .sub-sub-menu {
        position: absolute;
        top: 0; left: 100%;
        min-width: 200px;
        background: #fff;
        box-shadow: 0 3px 10px rgba(0,0,0,0.15);
        opacity: 0; visibility: hidden;
        transition: 0.2s;
        padding: 10px 0;
        border-radius: 4px;
        margin-left: -2px;
    }
    .has-sub-child:hover .sub-sub-menu { opacity: 1; visibility: visible; }
    .sub-sub-menu li a { font-size: 13px; padding: 10px 20px; }

    /* 右側アクションボタン */
    .header__actions { display: flex; height: 100%; }
    .header__btn {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        width: 130px; height: 100%;
        color: #fff; font-weight: bold; font-size: 12px;
        line-height: 1.2; text-align: center;
        transition: opacity 0.3s; text-decoration: none;
    }
    .header__btn:hover { opacity: 0.9; color: #fff; }
    .header__btn--blue { background: #00A0E9; }
    .header__btn--red { background: var(--color-primary); }
    .btn-icon { font-size: 16px; margin-bottom: 2px; display: block; }
}

/* ========================================================
   4. Footer
   ======================================================== */
.footer {
    background-color: #333;
    color: #fff;
    padding: 80px 0 20px;
    font-size: 14px;
}
.footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.footer__content {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-bottom: 60px;
}
.footer a { color: #fff; text-decoration: none; transition: opacity 0.3s; }
.footer a:hover { opacity: 0.7; }

/* 左：会社情報 */
.footer__logo img {
    width: 100%; max-width: 100px; height: auto;
    margin-bottom: 20px; filter: brightness(0) invert(1);
}
.footer__company-name {
    font-size: 18px; font-weight: bold; letter-spacing: 0.1em; margin-bottom: 10px;
}
.footer__address { font-size: 14px; line-height: 1.8; margin-bottom: 30px; }
.footer__phone { display: flex; align-items: center; gap: 10px; }
.footer__phone-icon { font-size: 24px; }
.footer__phone-number { font-size: 20px; font-weight: bold; letter-spacing: 0.05em; }

/* 見出し・リスト */
.footer__heading { font-size: 16px; font-weight: bold; margin-bottom: 25px; letter-spacing: 0.05em; }
.footer__sub-heading { font-size: 14px; font-weight: bold; margin-bottom: 15px; }
.mt-20 { margin-top: 20px; }
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: 12px; }
.footer__list li a { font-size: 13px; color: #ccc; }

/* 中央・右 */
.footer__product-grid { display: flex; flex-wrap: wrap; gap: 30px; }
.footer__product-col { width: 100%; }
.footer__nav-group { margin-bottom: 40px; }
.footer__copyright {
    text-align: center; border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px; color: #999; font-size: 12px;
}

/* Footer PC Layout */
@media (min-width: 1024px) {
    .footer__content {
        flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 0;
    }
    .footer__left { width: 20%; }
    .footer__center { width: 45%; padding: 0 20px; }
    .footer__right {
        width: 35%; padding-left: 40px; border-left: 1px solid rgba(255,255,255,0.2);
    }
    .footer__product-grid { flex-wrap: nowrap; gap: 20px; }
    .footer__product-col { width: 33.33%; }
    .footer__nav-group { margin-bottom: 50px; }
    .footer__nav-row { display: flex; gap: 40px; }
    .footer__nav-row .footer__nav-group { margin-bottom: 50px; }
}

/* ========================================================
   5. Front Page (TOP)
   ======================================================== */

/* 1. サイト全体（main）の背景をドットにして完璧に繋げる */
.main-content {
    background-color: #fff;
    background-image: radial-gradient(#ddd 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 2. ABOUT等に白＋ドット背景を明示的に塗り、FVのはみ出しを完全に隠す！ */
.about, 
.product-search {
    background-color: #fff !important;
    background-image: radial-gradient(#ddd 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    position: relative;
    /* ★FV(10)より高い数値を指定して、上に被せて隠す！ */
    z-index: 20; 
}

/* ========================================================
   --- MV Area (First View) ---
   ======================================================== */
.mv {
    position: relative; 
    width: 100%;
    min-height: 400px;
    aspect-ratio: 1920 / 1080;
    /* ★padding-bottom を 0 に。下端まで画像で埋まる */
    padding: clamp(80px, 9vw, 140px) 0 0;
    z-index: 10;
    background: transparent;
    overflow: hidden;
}

/* 以下は変更なし、参考までに再掲 */
.mv::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('img/FV-sub.webp');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

.mv::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    aspect-ratio: 1920 / 940;
    z-index: 1;
    pointer-events: none;
}

/* --- FV Lottieアニメーション (PC専用) --- */
.mv__lottie {
    position: absolute;
    top: -8%;
    right: -10.5%;
    width: 80%;
    z-index: 1;
    pointer-events: none;
    display: none;
}

@media (min-width: 768px) {
    .mv__lottie {
        display: block;
    }
}

#mv-lottie-canvas {
    width: 100%;
    display: block;
}


/* --- インナーエリア --- */
.mv__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(20px, 12vw, 220px);
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    box-sizing: border-box;
}

.mv__content {
    width: 100%;
    max-width: 100%;
    text-align: center;
}

/* --- タイトル画像（スマホ用デフォルト） --- */
.mv__title img { 
    width: clamp(260px, 60vw, 400px); 
    height: auto;
    aspect-ratio: 450 / 175;
    object-fit: contain;
    margin-bottom: clamp(20px, 2.5vw, 30px); 
}

/* --- リードテキスト（スマホ用デフォルト） --- */
.mv__lead { 
    margin-bottom: clamp(28px, 3vw, 40px); 
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 3.5vw, 17px); 
    line-height: 2;
    letter-spacing: 0.05em; 
    color: var(--color-text-main);
}

/* ========================================================
   --- MV PC Layout (768px以上): 全要素を画面幅に完全比例 ---
   ======================================================== */
@media (min-width: 768px) {
    .mv__content {
        max-width: 42%;
        text-align: left;
    }
    
    /* ★タイトル: 純粋なvwでスケール(min/maxを緩める) */
    .mv__title img {
        /* 1920px基準で460px → 460/1920 ≒ 23.96vw */
        width: clamp(220px, 24vw, 500px);
        margin-bottom: clamp(16px, 2vw, 36px);
    }
    
    /* ★リードテキスト: vwベースで比例スケール */
    .mv__lead {
        /* 1920px基準で17px → 17/1920 ≒ 0.885vw。読みやすさを考慮して1.1vw程度 */
        font-size: clamp(11px, 1.1vw, 18px);
        margin-bottom: clamp(20px, 2.5vw, 40px);
    }
    
}

@media (max-width: 767px) {
    .mv {
        aspect-ratio: auto;
        /* ★min-heightを撤廃 → 中身の自然な高さに */
        min-height: 0;
        padding-top: clamp(80px, 15vw, 120px);
        /* ★padding-bottomも縮める */
        padding-bottom: clamp(30px, 6vw, 60px);
    }
    .mv::after {
        aspect-ratio: auto;
        height: 100%;
        background-position: center bottom;
        background-size: 180% auto;
        display: none;
    }
}

/* ========================================================
   MV Slider (Ticker) - vw基準で位置固定
   ======================================================== */
   .mv-slider {
    display: none; 
}

@media (min-width: 768px) {
    .mv-slider {
        display: block; 
        position: absolute; 
        /* ★ top: % → vw基準に変更
           機械イラスト(aspect-ratio 1920/940)の高さ ≒ 48.96vw
           その約73%の位置 → 約35.7vw */
        top: 35vw;
        left: 0;
        width: 100%; 
        height: clamp(120px, 12vw, 220px);
        overflow: visible; 
        z-index: 30;
        pointer-events: none;
    }
    /* 以下は変更なし */
    .mv-slider__track {
        display: flex; 
        width: max-content;
        animation: loop-slide-right 40s infinite linear;
        pointer-events: auto; 
        padding: clamp(20px, 2.5vw, 45px) 0; 
    }
    .mv-slider__track:hover { animation-play-state: paused; }
    
    .mv-slider__item {
        display: block; 
        width: clamp(110px, 11.5vw, 240px); 
        aspect-ratio: 220 / 140;
        height: auto;
        margin: 0 clamp(6px, 0.8vw, 18px); 
        border-radius: clamp(8px, 0.8vw, 18px); 
        overflow: hidden;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
        background: #fff; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
        flex-shrink: 0;
    }
    .mv-slider__item img { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
    }
    .mv-slider__item:hover {
        transform: scale(1.05, 1.3);
        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        z-index: 2; 
        position: relative;
    }
    @keyframes loop-slide-right {
        0% { transform: translateX(-50%); } 100% { transform: translateX(0); }
    }
}

/* ========================================================
   共通ボタンアニメーション（シームレス・ストレートスライド版）
   ======================================================== */
   .mv__btn,
   .service__btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       position: relative;
       background-color: #fff;
       color: var(--color-primary); 
       border: 1px solid var(--color-primary); 
       
       /* ★min値を緩めて、vwが純粋に効くように */
       width: clamp(180px, 18vw, 320px);
       height: clamp(40px, 4vw, 64px);
       border-radius: 50px;
       
       font-family: 'Noto Sans JP', sans-serif;
       font-weight: 700;
       /* ★フォントサイズもvw基準で比例 */
       font-size: clamp(12px, 1.1vw, 18px);
       letter-spacing: 0.05em;
       line-height: 1;
       
       /* ★padding-leftもvw基準で比例 */
       padding: 0 0 0 clamp(20px, 2.2vw, 36px); 
       overflow: hidden; 
       isolation: isolate; 
       transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
       text-decoration: none;
   }
   
   .mv__btn::after,
   .service__btn::after {
       content: "";
       position: absolute;
       top: -1px; 
       left: -1px;
       /* ★丸アイコンもボタン高さと同じvw基準で比例 */
       width: clamp(40px, 4vw, 64px);
       height: clamp(40px, 4vw, 64px);
       background-image: url('img/round_red.svg');
       /* ★background-sizeもvw基準で */
       background-size: clamp(40px, 4vw, 64px) clamp(40px, 4vw, 64px);
       background-position: center;
       background-repeat: no-repeat;
       z-index: 2; 
       transition: background-image 0.4s ease; 
   }
   
   .mv__btn::before,
   .service__btn::before {
       content: "";
       position: absolute;
       top: 0; left: 0; width: 100%; height: 100%;
       background-color: var(--color-primary);
       transform: translateX(-101%);
       transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: -1; 
   }
   
   .mv__btn:hover,
   .service__btn:hover {
       color: #fff;
       border-color: var(--color-primary);
       opacity: 1;
   }
   
   .mv__btn:hover::before,
   .service__btn:hover::before {
       transform: translateX(0);
   }
   
   .mv__btn:hover::after,
   .service__btn:hover::after {
       background-image: url('img/round_white.svg'); 
   }

/* --- ABOUT US --- */
.about {
    background-color: #fff;
    background-image: radial-gradient(#ddd 1px, transparent 1px);
    background-size: 20px 20px;
    position: relative;
    padding-bottom: 100px;
}

.about.section {
    /* ★トップ余白を限界まで縮小 */
    padding-top: 0;
    /* 下のpaddingは既存のままでOK(中身との余白) */
}

.about__content {
    display: flex; flex-direction: column; gap: 40px; margin-top: 40px;
}
.about__img img { width: 100%; height: auto; }
.about__text-head img { width: 100%; max-width: 400px; margin-bottom: 30px; }
.about__text p {
    font-size: 15px; line-height: 2.2; font-weight: 500; text-align: justify;
}

/* ABOUT PC Layout */
@media (min-width: 768px) {
    .about {
        /* ★120px固定 → vwベースで流動的に */
        padding-top: clamp(40px, 5vw, 100px);
        margin-top: 0;
    }
    .about__content {
        flex-direction: row; /* 横並び (左:画像 / 右:テキスト) */
        align-items: center; justify-content: space-between; gap: 60px;
    }
    .about__img {
        width: 45%; display: flex; justify-content: flex-start;
    }
    .about__text { width: 48%; }
    .about__text-head img { margin-left: 0; }
}

/* ========================================================
   Front Page (TOP) - 新SERVICEセクション (画像ベース版)
   ======================================================== */

.service.section {
    /* ★ご指定通り背景色を #CE1C26 に変更 */
    background-color: #CE1C26; 
    
    /* 厳守ルール: PC版の大きな余白を clamp で流動的に縮小・拡大 */
    padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 120px);
    
    /* ★ご指定通り、上部の左右に角丸をかける（スマホ時のベース） */
    border-radius: clamp(40px, 6vw, 60px) clamp(40px, 6vw, 60px) 0 0;
}

/* PC時の角丸を少し大きくする */
@media (min-width: 768px) {
    .service.section {
        border-radius: clamp(60px, 8vw, 100px) clamp(60px, 8vw, 100px) 0 0;
    }
}

.service__inner.inner {
    max-width: 1400px; 
}

/* --- リードテキスト --- */
.service__lead {
    text-align: center;
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    /* font-weightは数値指定 */
    font-weight: 700;
    /* 厳守ルール: clampで基準32pxに設定し、シームレスに縮小 */
    font-size: clamp(18px, 2.5vw, 32px); 
    letter-spacing: 0.05em;
    margin-bottom: clamp(40px, 5vw, 60px);
}

/* --- 4連カードグリッド --- */
.p-service-cards {
    display: grid;
    grid-template-columns: 1fr;
    /* 厳守ルール: 隙間(gap)も画面に合わせて30pxから縮むようにする */
    gap: clamp(15px, 2.5vw, 30px);
    max-width: 1322px; 
    margin: 0 auto clamp(40px, 5vw, 60px);
}
@media (min-width: 768px) {
    .p-service-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- 個別カード (画像の上にテキストを重ねる) --- */
.p-service-card-new {
    position: relative;
    width: 100%;
    /* 厳守ルール: clampで最大幅308pxを設定 */
    max-width: clamp(240px, 25vw, 308px);
    margin: 0 auto;
    
    /* 厳守ルール: アスペクト比を固定！画像が縮んでも縦横比（W308:H420）が絶対に崩れない！ */
    aspect-ratio: 308 / 420;
    height: auto;
    
    border-radius: 10px;
    overflow: hidden;
}

/* 背景となる画像 (webp) */
.p-service-card-new__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* 厳守ルール: object-fitでアスペクト比固定時の画像の歪みを絶対防ぐ */
    object-fit: cover;
    z-index: 1;
}

/* 画像の白いエリアに重ねるテキストボックス */
.p-service-card-new__body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 画像の白い部分の高さに合わせて固定（これなら文字が飛び出さない） */
    height: 31%; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 2; /* 画像より手前に */
}

/* ★ご指定のタイトルデザイン (clamp流動対応) */
.p-service-card-new__title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: #333333;
    font-size: clamp(14px, 1.5vw, 18px);
    margin: 0 0 clamp(6px, 1vw, 12px) 0;
    padding-left: 21%;
    transform: translateY(5px);
}

/* ★ご指定の説明文デザイン (clamp流動対応) */
.p-service-card-new__desc {
    color: #333333;
    line-height: 1.8;
    margin: 0;
    width: 85%;
    margin-left: 9%;
    font-size: clamp(10px, 1.1vw, 13px);
}

/* ========================================================
   リバースボタン（赤背景用：白枠 ⇔ 白背景）
   ※ここは前回のままでOKです
   ======================================================== */
.service__action { text-align: center; }

.service__btn--reverse {
    width: clamp(200px, 20vw, 214px);
    background-color: transparent; 
    color: #ffffff;
    border-color: #ffffff;
}

.service__btn--reverse::after {
    background-image: url('img/round_white.svg');
}

.service__btn--reverse::before {
    background-color: #ffffff;
}

.service__btn--reverse:hover {
    color: var(--color-primary); 
    border-color: #ffffff; 
}

.service__btn--reverse:hover::after {
    background-image: url('img/round_red.svg'); 
    filter: none; 
}
/* --- PRODUCT SEARCH --- */
.product-search {
    background-color: #fff;
    background-image: radial-gradient(#ddd 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 80px 0;
}
.product-search__container {
    background: #fff; border-radius: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); padding: 60px 40px;
    max-width: 1400px; margin: 0 auto;
}
.product-search .section-title { margin-bottom: 40px; }
.product-search__grid {
    display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 50px;
    max-width: 1000px; margin-left: auto; margin-right: auto;
}
.product-card {
    display: block; position: relative; width: 100%;
    border-radius: 0 30px 0 30px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); background: #f5f5f5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.product-card__img { width: 100%; aspect-ratio: 1.8 / 1; }
.product-card__img img { width: 100%; height: 100%; object-fit: cover; }
.product-card__label {
    position: absolute; top: 0; left: 0; background: #fff;
    color: var(--color-text); font-size: 13px; font-weight: bold;
    padding: 6px 18px; border-radius: 0 0 20px 0; z-index: 2;
}
.product-card__arrow {
    position: absolute; bottom: 15px; right: 15px; width: 32px; height: 32px;
    background: var(--color-primary); border-radius: 50%; z-index: 2; transition: transform 0.3s ease;
}
.product-card__arrow::after {
    content: ""; position: absolute; top: 50%; left: 45%;
    transform: translate(-50%, -50%) rotate(45deg); width: 5px; height: 5px;
    border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.product-card:hover .product-card__arrow { transform: scale(1.1); }

/* 絞り込みフォーム */
.search-filter {
    border-top: 1px solid #eee; padding-top: 40px;
    max-width: 800px; margin: 0 auto;
}
.search-filter__title {
    text-align: center; font-size: 16px; font-weight: bold;
    margin-bottom: 30px; position: relative; display: inline-block;
    left: 50%; transform: translateX(-50%);
}
.search-filter__title::after {
    content: ""; display: block; width: 40px; height: 2px;
    background: var(--color-primary); margin: 8px auto 0;
}
.search-filter__row {
    display: flex; flex-wrap: wrap; align-items: center;
    position: relative; padding: 20px 0; border-bottom: 1px solid #eee;
}
.search-filter__row::after {
    content: ""; position: absolute; bottom: -1px; left: 0;
    width: 6px; height: 6px; background: var(--color-primary);
}
.search-filter__row:last-of-type { border-bottom: none; }
.search-filter__row:last-of-type::after { display: none; }
.search-filter__label {
    font-weight: bold; font-size: 14px; width: 100%; margin-bottom: 10px;
}
.search-filter__options { display: flex; flex-wrap: wrap; gap: 10px; }
.search-filter__check input { display: none; }
.search-filter__check span {
    display: inline-block; padding: 8px 20px; background: #f5f5f5;
    color: #666; font-size: 13px; border-radius: 4px; cursor: pointer;
    transition: all 0.2s; user-select: none;
}
.search-filter__check input:checked + span {
    background: #ffe5e5; color: var(--color-primary); font-weight: bold;
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

/* 絞り込みボタン */
.search-filter__submit { text-align: center; margin-top: 50px; }
.search-filter__submit button {
    display: inline-flex; align-items: center; justify-content: flex-start; /* 左詰め */
    gap: 15px; width: 100%; max-width: 280px; padding: 12px 25px;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: 10px; font-size: 16px; font-weight: bold; letter-spacing: 0.05em;
    cursor: pointer; transition: all 0.3s ease;
}
.search-filter__submit button:hover {
    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(230, 0, 18, 0.3); opacity: 0.9;
}
.search-filter__submit button svg {
    width: 24px; height: 24px; fill: #fff; flex-shrink: 0;
}

/* Product Search PC Layout */
@media (min-width: 768px) {
    .product-search { padding: 100px 0; }
    .product-search__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .search-filter__label { width: 180px; margin-bottom: 0; }
}

/* ========================================================
   Front Page (TOP) - 新PRODUCTセクション
   ======================================================== */

.p-product.section {
    background-color: #ffffff;
    /* 厳守ルール: 上下余白120pxを基準に流動的縮小 */
    padding: clamp(60px, 8vw, 120px) 20px;
    /* 上部のみ角丸 */
    border-radius: clamp(40px, 6vw, 60px) clamp(40px, 6vw, 60px) 0 0;
}

@media (min-width: 768px) {
    .p-product.section {
        border-radius: clamp(60px, 8vw, 100px) clamp(60px, 8vw, 100px) 0 0;
    }
}

.p-product__inner {
    /* 左右300px余白分を考慮した最大幅1320px (1920 - 300*2) 中央揃え */
    max-width: 1320px;
    margin: 0 auto;
}

/* --- 2x2 カテゴリグリッド --- */
.p-product-category {
    display: grid;
    grid-template-columns: 1fr;
    /* 厳守ルール: 枠同士の隙間30px */
    gap: clamp(15px, 3vw, 30px);
    max-width: 830px;
    /* タイトルからの余白40px */
    margin: clamp(20px, 4vw, 40px) auto 0;
}
@media (min-width: 768px) {
    .p-product-category {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 個別カテゴリカード (W400*H240px基準) */
.p-category-card {
    position: relative;
    display: block;
    width: 100%;
    max-width: clamp(280px, 40vw, 400px);
    margin: 0 auto;
    
    /* 厳守ルール: アスペクト比完全固定 (W400:H240) */
    aspect-ratio: 400 / 240;
    
    /* 左下と右上に角丸 (左上0, 右上40px, 右下0, 左下40px) */
    border-radius: 0 clamp(20px, 4vw, 40px) 0 clamp(20px, 4vw, 40px);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
}

/* 背景画像 */
.p-category-card__bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 厳守ルール: object-fitで歪み防止 */
    object-fit: cover;
    z-index: -1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.p-category-card:hover .p-category-card__bg {
    /* ホバーで画像が少しズームするリッチな演出 */
    transform: scale(1.05);
}

/* 左上の小枠 (250*60px基準) */
.p-category-card__label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    /* 右下のみ角丸 */
    border-radius: 0 0 clamp(15px, 3vw, 30px) 0;
    
    width: fit-content;
    
    /* ★修正: テキストが折り返さないように max-width を広げ、nowrap を追加 */
    min-width: clamp(140px, 20vw, 160px);
    max-width: clamp(220px, 35vw, 300px);
    white-space: nowrap; /* 1行に収める絶対の魔法 */
    
    /* 上下27px, 左20px, 右30px のパディング */
    padding: clamp(15px, 2vw, 27px) clamp(20px, 3vw, 30px) clamp(15px, 2vw, 27px) clamp(15px, 2vw, 20px);
    
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700; /* Bold */
    font-size: clamp(14px, 1.8vw, 21.33px);
    letter-spacing: 0.05em; /* 5% */
    color: #333333;
    line-height: 1;
    box-sizing: border-box;
}

/* 右下の矢印 (50*50px) */
.p-category-card__arrow {
    position: absolute;
    bottom: clamp(10px, 2vw, 15px);
    right: clamp(10px, 2vw, 15px);
    width: clamp(35px, 5vw, 50px);
    height: clamp(35px, 5vw, 50px);
    background-image: url('img/round_red.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.4s ease;
}
.p-category-card:hover .p-category-card__arrow {
    /* ホバー時に白丸の画像に切り替え */
    background-image: url('img/round_white.svg');
}

/* --- おすすめPICK UP タイトル --- */
.p-pickup-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 余白10px */
    width: fit-content;
    
    /* 上部80px、下部40px の余白 */
    margin: clamp(40px, 6vw, 80px) auto clamp(20px, 4vw, 40px);
}
.p-pickup-title__icon {
    /* 画像サイズ W25 * H15px */
    width: clamp(18px, 2.5vw, 25px);
    height: auto;
    aspect-ratio: 25 / 15;
    object-fit: contain;
}
.p-pickup-title__text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800; /* ExtraBold */
    font-size: clamp(18px, 2vw, 24px);
    letter-spacing: 0.1em; /* 10% */
    color: var(--color-primary);
    margin: 0;
    line-height: 1;
}

/* --- PICK UP 4連グリッド --- */
.p-pickup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(15px, 2.5vw, 30px);
    max-width: 1320px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .p-pickup-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* PICK UP 個別カード (W300*H404px) */
.p-pickup-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 10px;
    width: 100%;
    max-width: clamp(240px, 30vw, 300px);
    margin: 0 auto;
    
    /* 厳守ルール: アスペクト比完全固定 (W300:H404) */
    aspect-ratio: 300 / 404;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p-pickup-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* サムネイル画像エリア */
.p-pickup-card__thumb {
    width: 100%;
    /* 上部エリアは正方形に近いので 1/1 で固定 */
    aspect-ratio: 1 / 1;
    background-color: #f5f5f5; /* 画像未設定時のグレー背景 */
}
.p-pickup-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* カード下部のテキスト情報 */
.p-pickup-card__body {
    padding: clamp(15px, 2vw, 20px);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.p-pickup-card__title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 700;
    color: #333333;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.p-pickup-card__title .dot {
    color: var(--color-primary);
    font-size: 10px;
}
.p-pickup-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.p-pickup-card__tags .tag {
    background-color: #f0f0f0;
    color: #666666;
    font-size: clamp(10px, 1vw, 11px);
    padding: 4px 8px;
    border-radius: 4px;
}

/* --- 下部ボタンエリア --- */
.p-product__action {
    text-align: center;
    /* グリッド下からボタンまでの余白80px */
    margin-top: clamp(40px, 6vw, 80px);
}

/* ========================================================
   Front Page (TOP) - MERITセクション
   ======================================================== */

.p-merit.section {
    background-color: #F6F6F6;
    /* 厳守ルール: 上下余白120pxを基準に、スマホ時は60pxまでシームレスに縮小 */
    padding: clamp(60px, 8vw, 120px) 20px;
    
    /* 厳守ルール: 上部2箇所の角丸。画面幅に合わせて流動的に丸みを変更 */
    border-radius: clamp(40px, 6vw, 60px) clamp(40px, 6vw, 60px) 0 0;
}

@media (min-width: 768px) {
    .p-merit.section {
        border-radius: clamp(60px, 8vw, 100px) clamp(60px, 8vw, 100px) 0 0;
    }
}

.p-merit__inner {
    /* 左右300pxの余白は、コンテナ幅を1120pxに絞って中央配置することで自動形成される */
    max-width: 1120px;
    margin: 0 auto;
}

.p-merit .section-title {
    /* タイトル下の50px余白 */
    margin-bottom: clamp(30px, 5vw, 50px);
}

/* --- 3連カードグリッド --- */
.p-merit__grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 厳守ルール: 枠同士の隙間80pxを最大値として、スマホ時は20pxまで自然に縮む */
    gap: clamp(20px, 5vw, 80px);
    max-width: 1120px;
    /* グリッド下（チェックリストとの間）の50px余白 */
    margin: 0 auto clamp(30px, 5vw, 50px);
}
@media (min-width: 768px) {
    .p-merit__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- 個別カード (W320*H420px基準) --- */
.p-merit-card {
    background-color: #ffffff;
    border-radius: 20px;
    width: 100%;
    /* 厳守ルール: 1枠の最大幅320px */
    max-width: clamp(260px, 30vw, 320px);
    margin: 0 auto;
    
    /* 厳守ルール: アスペクト比固定 (幅320 : 高さ420) で絶対に形が崩れない！ */
    aspect-ratio: 320 / 420;
    height: auto;
    
    /* 上下の40px余白 */
    padding: clamp(20px, 3vw, 40px) 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

/* カード内の画像 (150*150px) */
.p-merit-card__img {
    width: clamp(100px, 12vw, 150px);
    /* 厳守ルール: 画像の縦横比1:1を完全固定 */
    aspect-ratio: 1 / 1;
    margin-bottom: clamp(15px, 2vw, 25px);
}
.p-merit-card__img img {
    width: 100%;
    height: 100%;
    /* 厳守ルール: 画像が歪まないように制御 */
    object-fit: contain;
    display: block;
}

/* タイトルとテキスト */
.p-merit-card__title {
    color: var(--color-primary);
    font-family: 'Noto Sans JP', sans-serif;
    /* 厳守ルール: font-weightは数値で指定 */
    font-weight: 700;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.5;
    margin: 0 0 clamp(10px, 1.5vw, 15px);
}

.p-merit-card__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.8;
    color: #333333;
    margin: 0;
}

/* --- チェックマーク部分 --- */
.p-merit__checks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 項目間の50px余白 */
    gap: clamp(20px, 4vw, 50px);
}
@media (min-width: 768px) {
    .p-merit__checks {
        flex-direction: row;
    }
}

/* 1枠 (W325px と W448px の両方に対応する可変サイズ) */
.p-merit-check {
    display: flex;
    align-items: center;
    /* 画像とテキストの間の10px余白 */
    gap: 10px; 
    
    /* ★修正: 100%や固定幅をやめて、中身の長さにピッタリ合わせる魔法！ */
    width: fit-content;
    max-width: 100%; /* スマホなど画面が狭い時は画面幅でストップさせるガード */
    
    height: clamp(28px, 3vw, 35px);
}

.p-merit-check__icon {
    height: 100%;
    /* アイコンの縦横比1:1固定 */
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.p-merit-check__text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 1.2vw, 15px);
    color: #333333;
    line-height: 1.4;
}

/* ========================================================
   Front Page (TOP) - FLOWセクション
   ======================================================== */

.p-flow.section {
    background-color: #ffffff;
    /* ★修正: 最後の「0」だった部分を、下部パディングとして clamp(60px, 8vw, 120px) に変更！ */
    padding: clamp(60px, 8vw, 120px) 20px clamp(60px, 8vw, 120px); 
}

.p-flow__inner.inner {
    max-width: 1400px;
    margin: 0 auto;
}

/* --- タイトルエリア --- */
.p-flow__header {
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 60px);
}

.p-flow__title-en {
    display: block;
    color: var(--color-primary);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: 0.1em;
    line-height: 1.2;
    margin-bottom: 5px;
}

.p-flow__title-ja {
    display: block;
    color: #333333;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: clamp(14px, 1.5vw, 16px);
    letter-spacing: 0.1em;
    margin: 0;
}

/* --- フロー全体コンテナ --- */
.p-flow__container {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: clamp(15px, 2.5vw, 30px);
    max-width: 1320px;
    margin: 0 auto;
    
    /* ★修正: ここにあった margin-bottom: 120px; は削除！
       （親のセクションのパディングで白背景ごと伸ばすため） */
}

@media (min-width: 992px) {
    .p-flow__container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center; 
    }
}

/* --- 個別項目 --- */
.p-flow-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    
    /* ★修正: テキストが改行されないように横幅を広げました (180px -> 220px) */
    max-width: clamp(160px, 18vw, 220px);
}

/* 画像サークル (W100*H100px) */
.p-flow-item__circle {
    width: clamp(80px, 10vw, 100px);
    aspect-ratio: 1 / 1;
    margin-bottom: 20px;
}
.p-flow-item__circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 見出し (タイトル) */
.p-flow-item__title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.333; 
    letter-spacing: 0.1em;
    color: #333333;
    margin: 0 0 10px 0; 
}

/* 説明文 */
.p-flow-item__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.2vw, 14px);
    line-height: 1.714; 
    letter-spacing: 0.02em;
    color: #333333;
    margin: 0;
}

/* --- 矢印画像 --- */
.p-flow-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* アイコンなどの小さい要素は clamp より固定値の方が綺麗に保てます */
    width: 12px;
    height: 18px;
    
    /* ★追加の魔法: 画面が窮屈になっても【絶対に圧縮させない】 */
    flex-shrink: 0; 
}

.p-flow-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(90deg);
}

@media (min-width: 992px) {
    .p-flow-arrow img {
        transform: rotate(0deg);
    }
}

/* ========================================================
   ★ アニメーション魔法（左から順番に出る）
   ======================================================== */
.js-flow-anim {
    opacity: 0;
    transform: translateX(-30px); /* 左に30pxずらしておく */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ※JS側でスクロール時に .is-active などのクラスを付与する仕様の場合。
  もしクラス名が違う場合（例: .fade-in）はここを書き換えてね！ 
*/
.js-flow-anim.is-active {
    opacity: 1;
    transform: translateX(0);
}

/* PCサイズ以上のときだけ、時間差（ディレイ）をつけて順番に出す */
@media (min-width: 992px) {
    /* 1個目 (STEP1) */
    .p-flow-item:nth-child(1) { transition-delay: 0s; }
    /* 2個目 (STEP2) ※間の矢印はHTML構造上で2番目・4番目...にいるので、項目は奇数になります */
    .p-flow-item:nth-child(3) { transition-delay: 0.15s; }
    /* 3個目 (STEP3) */
    .p-flow-item:nth-child(5) { transition-delay: 0.3s; }
    /* 4個目 (STEP4) */
    .p-flow-item:nth-child(7) { transition-delay: 0.45s; }
    /* 5個目 (STEP5) */
    .p-flow-item:nth-child(9) { transition-delay: 0.6s; }
}

/* ========================================================
   Front Page (TOP) - CTA (お問い合わせ) セクション
   ======================================================== */

.p-cta.section {
    /* 指示通りのリベロレッド！ */
    background-color: #CE1C26; 
    width: 100%;
    
    /* PC基準で高さ231pxを確保。スマホでは内容に合わせて可変 */
    min-height: clamp(180px, 20vw, 231px); 
    
    /* 中身を縦方向のど真ん中に配置する魔法 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.p-cta__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

/* --- 上の小テキスト --- */
.p-cta__sub {
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600; /* SemiBold */
    
    /* 指定サイズ: 28px基準 */
    font-size: clamp(16px, 2vw, 28px);
    letter-spacing: 0.05em; /* 5% */
    
    margin: 0 0 clamp(15px, 2vw, 20px) 0;
}

/* --- 下のメインテキストとボタンの並び --- */
.p-cta__main-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; 
}

@media (min-width: 992px) {
    .p-cta__main-wrap {
        flex-direction: row;
        /* テキストとボタンの隙間をあける */
        gap: 40px; 
    }
}

/* --- メインテキスト --- */
.p-cta__main {
    color: #ffffff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700; /* Bold */
    
    /* 指定サイズ: 40px基準 */
    font-size: clamp(24px, 3.5vw, 40px);
    letter-spacing: 0.1em; /* 10% */
    
    margin: 0;
    line-height: 1.4;
}

/* --- お問い合わせボタン --- */
.p-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #CE1C26; /* 文字色リベロレッド */
    
    /* 指定フォント: Zen Kaku Gothic New */
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 700; /* Bold */
    
    /* 指定サイズ: 25px基準 */
    font-size: clamp(18px, 2vw, 25px);
    text-decoration: none;
    
    /* ボタンサイズ W300 * H70px 基準 */
    width: clamp(240px, 25vw, 300px);
    height: clamp(55px, 6vw, 70px);
    
    /* 4角アール (角丸10pxで少し丸みを持たせる) */
    border-radius: 10px; 
    
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.p-cta__btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* ボタン内のメールアイコン */
.p-cta__btn-icon {
    width: clamp(18px, 2vw, 24px);
    height: auto;
    margin-right: 12px;
    /* アイコンの線の色もリベロレッドに合わせる */
    color: #CE1C26; 
}

/* ========================================================
   6. Page - Company (会社概要)
   ======================================================== */

/* --- ページタイトル --- */
.page-title {
    text-align: center;
    padding: 100px 20px 40px; /* 上余白100px */
}
.page-title__en {
    font-size: 32px; color: var(--color-primary);
    font-weight: 900; letter-spacing: 0.1em; line-height: 1;
}
.page-title__ja {
    font-size: 14px; font-weight: 700; margin-top: 10px; color: #333;
}

/* --- 会社情報エリア --- */
.company-info {
    background-color: #f9f9f9; padding: 60px 20px;
    border-radius: 40px 40px 0 0;
}
.company-info__inner { max-width: 1000px; margin: 0 auto; }
.company-info__brand { text-align: center; margin-bottom: 50px; }
.company-info__logo-img { width: 100px; height: auto; margin-bottom: 15px; }
.company-info__company-name { font-size: 20px; font-weight: 700; color: #333; }

.company-info__grid { display: flex; flex-direction: column; gap: 40px; }

/* 定義リスト */
.info-list__term { font-weight: 700; margin-bottom: 5px; color: #333; }
.info-list__desc {
    margin-bottom: 25px; padding-left: 20px; padding-bottom: 25px;
    font-size: 14px; line-height: 1.8; color: #333;
    border-bottom: 1px solid #ddd; position: relative; 
}
.info-list__desc:last-child {
    border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
/* 下線の上の赤い四角 */
.info-list__desc::before {
    content: ""; position: absolute; bottom: -1px; left: 0;
    width: 10px; height: 10px; background-color: var(--color-primary);
}
.info-list__desc:last-child::before { display: none; }

.info-list__link {
    color: var(--color-secondary); font-size: 12px; display: inline-block;
    margin-top: 5px; text-decoration: underline;
}
.info-list__contact { margin: 10px 0; font-weight: 700; }
.info-list__bullets { list-style: disc; padding-left: 20px; }
.info-list__partners { display: flex; flex-direction: column; gap: 10px; }
.info-list__partners ul { margin: 0; padding: 0; list-style: none; }
.info-list__note { font-size: 11px; font-weight: normal; color: #666; }
.text-right { text-align: right; }

/* ========================================================
   --- Company Info: Access Section ---
   ======================================================== */
.info-list__access {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vw, 16px);
}

.info-list__access-line {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 1.5vw, 24px);
    flex-wrap: wrap;
}

.info-list__access-route {
    flex-shrink: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 0.95vw, 15px);
    color: #333;
    letter-spacing: 0.05em;
    /* 路線名の幅を固定して、駅名の縦位置を揃える */
    min-width: 7em;
    padding-top: 2px;
}

.info-list__access-stations {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.info-list__access-stations li {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 0.9vw, 14px);
    color: #555;
    line-height: 1.6;
    letter-spacing: 0.03em;
}

/* スマホでは縦並びに */
@media (max-width: 600px) {
    .info-list__access-line {
        flex-direction: column;
        gap: 4px;
    }
    
    .info-list__access-route {
        min-width: 0;
        padding-top: 0;
    }
    
    .info-list__access-stations {
        padding-left: 1em;
    }
}

/* マップ */
.company-info__map-iframe {
    width: 100%; height: 300px; border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- CTAセクション (横並びデザイン) --- */
.cta-section {
    background-color: var(--color-primary); color: #fff;
    padding: 40px 20px; width: 100%;
}
.cta-section__inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.cta-section__sub {
    font-size: 14px; font-weight: bold; margin-bottom: 15px; display: block;
}
.cta-section__row {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 20px;
}
.cta-section__title {
    font-size: 20px; font-weight: bold; margin: 0; line-height: 1.2;
}
.cta-section__btn {
    background-color: #fff; color: var(--color-primary);
    padding: 12px 30px; border-radius: 6px;
    font-weight: bold; font-size: 14px; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.cta-section__btn .material-icons { font-size: 20px; }
.cta-section__btn:hover {
    transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); opacity: 1;
}

/* ★修正: 自動挿入される簡易アイコンを無効化（2重表示防止） */
.cta-section__btn::before { content: none; display: none; }


/* Company Page PC Layout */
@media (min-width: 768px) {
	.company-info {
    background-color: #f9f9f9; padding: 60px 0px 0px 0px;
    border-radius: 40px 40px 0 0;
}
    .company-info__grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
    }
    .info-list__partners { flex-direction: row; justify-content: space-between; }
    .company-info__map-iframe { height: 100%; min-height: 500px; }
    
    .cta-section { padding: 60px 0px 0px 0px; }
    .cta-section__sub { margin-bottom: 25px; font-size: 16px; }
    .cta-section__row { flex-direction: row; gap: 40px; }
    .cta-section__title { font-size: 28px; }
    .cta-section__btn { padding: 15px 50px; font-size: 16px; border-radius: 4px; }
}

/* ========================================================
   7. Page - Service (サービス紹介)
   ======================================================== */

/* --- メインサービスエリア --- */
.p-service-main {
    width: 100%;
    /* 背景画像設定（オフィスっぽい画像） */
    /* ※適宜ご自身の画像パスに変更してください */
    background-image: url('http://development-test.bikodo.com/wp-content/uploads/2026/02/Frame-137-2.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    padding: 80px 20px 100px;
    
    /* 上部を丸くする */
    border-radius: 60px 60px 0 0;
    margin-top: -20px; /* page-titleとの隙間を埋める微調整 */
}

.p-service-main__inner {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- サービスカード共通 --- */
.p-service-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    position: relative; /* 画像配置の基準 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* ラベル全体を囲むラッパー（アイコンとテキストを横並びにする） */
.p-service-card__label-wrap {
    display: flex;
    align-items: center;
    gap: 10px; /* アイコンと文字の間隔 */
    margin-bottom: 15px;
}

/* SVGアイコンのサイズ調整 */
.p-service-card__icon {
    width: 24px; /* サイズはお好みで調整してください */
    height: auto;
    flex-shrink: 0; /* 縮まないように */
}

/* テキスト部分 */
.p-service-card__label {
    color: var(--color-primary);
    font-weight: bold;
    font-size: 16px; /* 少し大きくして目立たせる */
    line-height: 1;
}

.p-service-card__title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.5;
}

.p-service-card__desc {
    font-size: 14px;
    line-height: 1.8;
}

/* --- カードタイプ別設定 --- */

/* 1. ワイドカード（企画・提案） */
.p-service-card--wide {
    display: flex;
    flex-direction: column-reverse; /* スマホは画像上、文字下など調整可 */
    gap: 20px;
}

.circle-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #ddd;
    margin: 0 auto;
}
.circle-img img { width: 100%; height: 100%; object-fit: cover; }


/* 2. グリッド配置（製造・発送） */
.p-service-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.p-service-card--half {
    width: 100%;
}

.circle-img-mini {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ddd;
    overflow: hidden;
    /* カードの右上に配置などの装飾用 */
    margin: 20px auto 0;
}
.circle-img-mini img { width: 100%; height: 100%; object-fit: cover; }


/* --- ボタンエリア --- */
.p-service-btn-area {
    text-align: center;
    margin-top: 50px;
}
/* トップページのボタン(.mv__btn)を流用するが、文字色などを調整 */
.p-service-btn-area .mv__btn {
    border-color: #fff; /* 背景が写真なので白枠の方が見やすいかも */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


/* --- MERIT (白背景バージョン) --- */
.p-merit-white.merit {
    background-color: #fff; /* 背景を白に上書き */
    border-radius: 0; /* 角丸リセット */
    padding-top: 80px;
}

/* チェックリスト */
.merit-check-list {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.merit-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 15px;
}

.merit-check-item .material-icons {
    color: var(--color-primary);
    font-size: 24px;
}


/* ====================================
   PC Layout (768px以上)
   ==================================== */
@media (min-width: 768px) {
    
    .p-service-main {
        padding: 100px 40px 120px;
        border-radius: 100px 100px 0 0;
    }

/* ワイドカード: 左右レイアウト */
    .p-service-card--wide {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 50px 60px;
        /* ★追加: 画像がはみ出しても切れないようにvisible指定 */
        overflow: visible; 
    }
    
    /* ★修正: Planningの画像（横長の楕円にする） */
    .circle-img {
        width: 380px;  /* 横幅をグッと広げる */
        height: 240px; /* 高さは適度に */
        border-radius: 50%; /* 長方形に50%で楕円になります */
        /* 位置の微調整（右端に寄せる） */
        margin-right: -40px; 
    }

    /* グリッドレイアウト */
    .p-service-grid {
        flex-direction: row;
        gap: 30px;
    }

.p-service-card--half {
        width: 50%;
        padding: 40px 40px;
        position: relative;
        min-height: 280px;
        /* ★追加: こちらも画像はみ出し用にvisible */
        overflow: visible; 
    }
    
    /* ★修正: Factory/Deliveryの画像位置（右上に移動） */
    .p-service-card__img-mini {
        position: absolute;
        
        /* 上にはみ出させる設定 */
        top: -40px; 
        right: -20px;
        
        /* 下(bottom)の設定はリセット */
        bottom: auto; 
        margin: 0;
        z-index: 1; /* カードより手前に表示 */
    }
    
    .circle-img-mini {
        width: 140px;
        height: 140px;
        margin: 0;
        /* 影をつけて浮かせる */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    }
    
    .p-service-card--half .p-service-card__body {
        padding-right: 120px; /* 画像とかぶらないように余白 */
    }

    /* タイトルサイズ */
    .p-service-card__title {
        font-size: 24px;
    }

    /* チェックリスト横並び */
    .merit-check-list {
        flex-direction: row;
        justify-content: center;
        gap: 60px;
    }
}

/* ========================================================
   8. Page - Products (取り扱い製品・統合版)
   ======================================================== */

/* 統合セクション (グレー背景の大きな箱) */
.p-product-unified {
    background-color: #f9f9f9;
    padding: 60px 0 80px;
    border-radius: 0 0 60px 60px; /* 下だけ丸く */
}

/* インナー幅調整 */
.p-product-unified__inner {
    max-width: 1200px; /* 矢印が入るぶん少し広めに */
    position: relative;
}

/* --- 1. タブナビゲーション --- */
.p-product-tab__nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    padding: 0;
    list-style: none;
    flex-wrap: wrap; /* スマホで折り返し */
}

.js-tab-trigger {
    background: #fff;
    /* デフォルト：赤背景・白文字（非アクティブはグレーにする逆パターンもアリですが、画像に合わせます） */
    color: #999;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}

.js-tab-trigger:hover {
    opacity: 0.8;
}

/* 選択中のタブ */
.js-tab-trigger.is-active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 5px 10px rgba(230, 0, 18, 0.3);
}


/* --- 2. メインエリア（コンテンツ＋矢印） --- */
.p-product-main-area {
    position: relative; /* 矢印の配置基準 */
    margin-bottom: 60px;
    padding: 0 40px; /* スマホでの矢印スペース */
}

/* タブコンテンツボックス */
.p-product-box {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: none; /* 初期非表示 */
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* アクティブ表示 */
.p-product-box.is-active {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.p-product-box__img {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.p-product-box__img img { width: 100%; height: auto; }

.p-product-box__body { width: 100%; }

.p-product-box__title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.p-product-box__title .icon { color: var(--color-primary); }
.p-product-box__desc { font-size: 14px; line-height: 1.8; color: #666; }


/* --- 切り替え矢印 (大きな赤い矢印) --- */
.p-product-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    outline: none;
}
/* 矢印の形状 (CSSで描画) */
.p-product-arrow::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-top: 3px solid var(--color-primary);
    border-right: 3px solid var(--color-primary);
}

/* 左矢印 */
.p-product-arrow--prev {
    left: 0;
}
.p-product-arrow--prev::after {
    transform: rotate(-135deg);
}

/* 右矢印 */
.p-product-arrow--next {
    right: 0;
}
.p-product-arrow--next::after {
    transform: rotate(45deg);
}


/* --- 3. PICK UP エリア --- */
.p-pickup-area {
    /* 同じセクション内なので背景などは親に依存 */
    border-top: 1px solid rgba(0,0,0,0.05); /* 区切り線 */
    padding-top: 60px;
}

.p-pickup-slider {
    overflow: hidden;
    width: 100%;
}

.p-pickup-track {
    display: flex;
    width: 200%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-pickup-group {
    width: 50%;
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 20px;
    padding: 10px;
    flex-wrap: wrap; /* スマホ用 */
}

.p-pickup-item {
    width: 100%; /* スマホは1列 */
    max-width: 300px;
    display: block;
    color: #333;
    transition: opacity 0.3s;
}
.p-pickup-item:hover { opacity: 0.8; }

.p-pickup-item .img {
    width: 100%;
    aspect-ratio: 3/2;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid #fff; /* 白枠 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.p-pickup-item .img img { width: 100%; height: 100%; object-fit: cover; }
.p-pickup-item .name {
    font-size: 14px; font-weight: bold; color: var(--color-primary);
}

.p-pickup-btn-area { text-align: center; margin-top: 40px; }


/* ====================================
   PC Layout (768px以上)
   ==================================== */
@media (min-width: 768px) {
    
    .p-product-unified { padding: 80px 0 100px; }

    /* タブ */
    .js-tab-trigger { padding: 12px 40px; font-size: 15px; }

    /* メインエリア */
    .p-product-main-area {
        padding: 0 80px; /* 矢印スペース確保 */
        max-width: 1000px;
        margin: 0 auto 80px;
    }

    /* ボックス横並び */
    .p-product-box.is-active {
        flex-direction: row;
        align-items: center;
        padding: 50px;
    }
    .p-product-box__img { width: 50%; }
    .p-product-box__body { width: 50%; padding-left: 50px; }
    
    /* 矢印の位置調整（ボックスの外側に出す） */
    .p-product-arrow {
        width: 60px; height: 60px;
    }
    .p-product-arrow::after {
        width: 30px; height: 30px; /* 大きく */
    }
    .p-product-arrow--prev { left: 0; }
    .p-product-arrow--next { right: 0; }

    /* PICK UP */
    .p-pickup-group {
        flex-wrap: nowrap; /* 横並び */
        justify-content: space-between;
    }
    .p-pickup-item { width: 32%; }
}

/* ========================================================
   9. Archive - Products (製品一覧)
   ======================================================== */

.p-archive-products {
    background-color: #f9f9f9; /* 背景グレー */
    padding-bottom: 80px;
    border-radius: 0 0 60px 60px;
}

/* グリッドレイアウト */
.p-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 60px;
}
@media (min-width: 768px) {
    .p-product-grid {
        grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    }
}

/* --- 製品カード --- */
.p-product-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.p-product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.p-product-item__link {
    display: block;
    text-decoration: none;
    color: #333;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* サムネイル */
.p-product-item__thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #eee;
}
.p-product-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* カード本文 */
.p-product-item__body {
    padding: 20px;
    flex-grow: 1; /* 高さ揃え用 */
}

/* タイトル */
.p-product-item__title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.p-product-item__title .dot {
    color: var(--color-primary);
    font-size: 12px;
}

/* タグ一覧 */
.p-product-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.p-product-item__tags .tag {
    font-size: 11px;
    background: #f0f0f0;
    color: #666;
    padding: 4px 10px;
    border-radius: 2px;
}


/* --- 検索パーツ：カード型リンク --- */
/* (parts/section-product-search.php 用) */

.product-card-link {
    display: block;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s;
}
.product-card-link:hover {
    transform: translateY(-5px);
    opacity: 1; /* リンクホバーの透過を打ち消し */
}

/* カードの中身（共通デザイン） */
.product-card-link__inner {
    border-radius: 20px;
    padding: 20px;
    position: relative;
    background: #f5f5f5; /* デフォルト背景 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 180px;
    
    /* 枠線の準備 */
    border: 2px solid transparent; 
    transition: all 0.3s;
}

/* 色ごとの背景色（薄い色） */
.product-card-link__inner.color-purple { background: #F3E5F5; }
.product-card-link__inner.color-orange { background: #FFF3E0; }
.product-card-link__inner.color-blue   { background: #E3F2FD; }
.product-card-link__inner.color-grey   { background: #EEEEEE; }

/* 画像 */
.product-card-link__inner .img {
    width: 80px; height: 80px; margin-bottom: 15px;
}
.product-card-link__inner .img img {
    width: 100%; height: 100%; object-fit: contain;
}

/* テキスト */
.product-card-link__inner .name {
    font-weight: bold;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 20px; /* 矢印との隙間 */
}

/* 矢印（丸いアイコン） */
.product-card-link__inner .arrow {
    width: 30px; height: 30px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 15px; right: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background 0.3s;
}
.product-card-link__inner .arrow::after {
    content: ""; position: absolute;
    top: 50%; left: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px; height: 6px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    transition: border-color 0.3s;
}

/* ★アクティブ状態（選択中）のデザイン */
.product-card-link.is-active .product-card-link__inner {
    border-color: var(--color-primary); /* 赤い枠線 */
    box-shadow: 0 0 0 2px rgba(230,0,18,0.1);
    background: #fff; /* 背景を白くして目立たせる */
}
.product-card-link.is-active .product-card-link__inner .arrow {
    background: var(--color-primary);
}
.product-card-link.is-active .product-card-link__inner .arrow::after {
    border-color: #fff;
}

/* ホバー時も矢印を赤くする */
.product-card-link:hover .product-card-link__inner .arrow {
    background: var(--color-primary);
}
.product-card-link:hover .product-card-link__inner .arrow::after {
    border-color: #fff;
}


/* --- ページネーション --- */
.pagination {
    text-align: center;
    margin-top: 40px;
}
.pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    background: #fff;
    color: #333;
    border-radius: 50%;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: 0.3s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: var(--color-primary);
    color: #fff;
}

/* --- 検索パーツ: 一覧ページ用 (ラジオボタン版) --- */

/* ラベルとしてのカードボタン */
.product-card-btn {
    cursor: pointer;
    display: block;
    width: 100%;
}

/* ラジオボタン本体は隠す */
.product-card-btn input[type="radio"] {
    display: none;
}

/* 通常時のスタイル（リンク版と同じ見た目に） */
.product-card-btn .product-card-link__inner {
    transition: all 0.3s;
    /* リンク版と同じCSSが効くようにクラス名は同じにしています */
}

/* ★選択された時のスタイル */
.product-card-btn input[type="radio"]:checked + .product-card-link__inner {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(230,0,18,0.2);
    background: #fff;
    transform: translateY(-5px);
}

/* 選択時のアイコン調整 */
.product-card-btn input[type="radio"]:checked + .product-card-link__inner .arrow {
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 矢印CSSを打ち消してチェックマークを表示 */
.product-card-btn input[type="radio"]:checked + .product-card-link__inner .arrow::after {
    display: none;
}
.product-card-btn .arrow.material-icons {
    font-size: 18px; /* チェックマークのサイズ */
}

/* ========================================================
   Product Search Compact (一覧ページ用)
   ======================================================== */

/* コンテナ調整 */
.product-search.is-compact {
    padding: 60px 0;
    background: transparent; /* 背景なしに */
}

.product-search.is-compact .product-search__container {
    max-width: 1000px;
    padding: 40px;
    border-radius: 10px; /* 角丸小さく */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* 影を薄く */
    border: 1px solid #eee; /* 薄い枠線 */
}

/* タイトル (絞り込み検索) */
.search-compact-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    position: relative;
    display: table;
    margin-left: auto;
    margin-right: auto;
}
.search-compact-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-primary);
    margin: 10px auto 0;
}

/* --- コンパクトなジャンルボタン --- */
.search-genres-compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px; /* 下のフィルターとの間隔 */
}

.compact-genre-btn {
    cursor: pointer;
}
.compact-genre-btn input { display: none; }

.compact-genre-btn .btn-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f5f5f5; /* 未選択：グレー */
    color: #666;
    padding: 12px 25px;
    border-radius: 6px; /* 少し角丸 */
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s;
    min-width: 160px; /* 幅を揃える */
}

.compact-genre-btn:hover .btn-inner {
    background: #e0e0e0;
}

/* 選択時：赤背景・白文字 */
.compact-genre-btn input:checked + .btn-inner {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(230,0,18,0.3);
}

/* アイコン微調整 */
.compact-genre-btn .icon {
    font-size: 16px;
    line-height: 1;
}

/* --- フィルター部分の微調整 (コンパクト版) --- */
.product-search.is-compact .search-filter {
    border-top: none; /* 上の線を消す */
    padding-top: 0;
    max-width: 100%; /* 幅制限解除 */
}

.product-search.is-compact .search-filter__row {
    justify-content: center; /* 中央寄せ */
    border-bottom: 1px solid #f0f0f0;
}
/* 最後の行の線は消す */
.product-search.is-compact .search-filter__row:last-of-type {
    border-bottom: none;
}

/* ラベル幅調整 */
@media (min-width: 768px) {
    .product-search.is-compact .search-filter__label {
        width: 160px; /* 少し狭く */
        text-align: left;
    }
}

/* ========================================================
   9. Archive - Products (製品一覧) デザイン修正
   ======================================================== */

/* 全体を包むグレーの背景（かまぼこ型） */
.p-archive-unified {
    background-color: #f9f9f9;
    padding: 80px 0 100px;
    border-radius: 60px 60px 0 0; /* 上だけ丸く */
    margin-top: 0;
}

/* 検索パーツの調整（グレー背景に乗るため） */
.product-search.is-compact {
    padding: 0 0 60px; /* 上の余白削除、下を開ける */
}

/* 検索ボックス自体を白くして影をつける */
.product-search.is-compact .product-search__container {
    background-color: #fff; /* ★重要: 白背景を指定 */
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* ふんわり影 */
    max-width: 1000px;
    margin: 0 auto;
}

/* グリッドレイアウト等は以前のまま維持 */
.p-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 60px;
}
@media (min-width: 768px) {
    .p-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 製品カード（以前のスタイルを再確認用、変更なし） */
.p-product-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}
.p-product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* ...その他のカードスタイルは以前記述したままでOK */

/* 空の状態 */
.p-product-empty {
    text-align: center;
    padding: 60px 0;
    color: #666;
}

/* ========================================================
   製品一覧ページ（archive-product_item）のCTA調整
   ======================================================== */

/* .p-archive-unified（グレーのエリア）の直後に来るCTAは、上マージンを消す */
.p-archive-unified + .cta-section {
    margin-top: 0;
}

/* ========================================================
   10. Single - Product (製品詳細)
   ======================================================== */

.p-single-product {
    padding-bottom: 80px;
}

/* --- 1. ヘッダーエリア (画像 + 情報) --- */
.p-single-head {
    background: #fff;
    padding: 60px 0;
    border-bottom: 1px solid #eee;
}

.p-single-head__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 画像エリア */
.p-single-head__img {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eee;
}
/* ★ここで巨大化を防ぐ！ */
.p-single-head__img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 情報エリア */
.p-single-head__info {
    width: 100%;
}

/* カテゴリーラベル */
.p-single-head__cats {
    margin-bottom: 15px;
}
.cat-label {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 4px;
    margin-right: 5px;
}

/* タイトル */
.p-single-head__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 25px;
    line-height: 1.4;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 20px;
}

/* タグ行 */
.tag-row {
    display: flex;
    align-items: flex-start; /* 上揃え */
    margin-bottom: 15px;
    font-size: 14px;
}
.tag-label {
    width: 100px; /* ラベル幅固定 */
    font-weight: bold;
    color: #666;
    flex-shrink: 0;
}
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-list .tag {
    background: #f5f5f5;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
}

/* 抜粋 */
.p-single-head__desc {
    margin-top: 30px;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
}

/* 個別問い合わせボタン */
.p-single-head__btn {
    margin-top: 40px;
}
.btn-product-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #333; /* 黒ボタン */
    color: #fff;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    transition: 0.3s;
}
.btn-product-contact:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}
.btn-product-contact .material-icons { font-size: 18px; }


/* --- 2. コンテンツエリア --- */
.p-single-body {
    padding: 60px 0;
}
.p-single-body__inner {
    max-width: 900px; /* 読みやすい幅に制限 */
    margin: 0 auto;
}

/* 記事内のスタイル (WordPress標準クラスなど) */
.entry-content p { margin-bottom: 1.8em; font-size: 16px; line-height: 2; }
.entry-content h2 {
    font-size: 24px;
    font-weight: bold;
    margin: 60px 0 30px;
    padding-left: 15px;
    border-left: 5px solid var(--color-primary);
}
.entry-content h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.entry-content img { max-width: 100%; height: auto; }
/* 表組み */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}
.entry-content th, .entry-content td {
    border: 1px solid #ddd;
    padding: 15px;
    font-size: 14px;
}
.entry-content th {
    background: #f9f9f9;
    font-weight: bold;
    width: 30%; /* 左側見出しの幅 */
}


/* --- 3. 関連製品 --- */
.p-related-products {
    background: #f9f9f9;
    padding: 60px 0;
}
.section-title-small {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}


/* ====================================
   PC Layout (768px以上)
   ==================================== */
@media (min-width: 768px) {
    /* ヘッダーの2カラム化 */
    .p-single-head__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
    
    .p-single-head__img {
        width: 45%; /* 左側 */
    }
    
    .p-single-head__info {
        width: 50%; /* 右側 */
        padding-top: 10px;
    }

    .p-single-head__title {
        font-size: 32px;
    }
}

/* ========================================================
   10. Single - Product (製品詳細) 調整
   ======================================================== */

/* --- 1. ヘッダー被り解消 --- */
/* 製品詳細ページを開いた時だけ、メインコンテンツ全体を下げる */
.single-product_item .main-content {
    padding-top: 100px; /* ヘッダー(64px) + 余白 */
}

/* スマホ版も調整 */
@media (max-width: 767px) {
    .single-product_item .main-content {
        padding-top: 80px;
    }
}


/* --- 2. 関連製品とCTAの隙間削除 --- */
/* 関連製品セクションの直後に来るCTAは、上マージンを0にする */
.p-related-products + .cta-section {
    margin-top: 0;
}



/* ====================================
   エントリーフォーム (page-recruit-contact.php)
   CF7完全攻略版！
   ==================================== */
.p-contact-body {
    background-color: #f6f6f6;
    border-radius: 60px 60px 0 0;
    padding: 80px 20px 120px;
}

.p-contact-container {
    max-width: 800px;
    margin: 0 auto;
}

.p-contact-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #333;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: 0.1em;
}

/* ★CF7のおせっかいを完全に無効化する魔法！ */
.p-form-wrapper br {
    display: none !important;
}

.p-form-wrapper p {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* フォーム全体のレイアウト */
.p-form-wrapper {
    width: 100%;
}

.p-form-row {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

/* 左側のラベル部分 */
.p-form-label {
    width: 220px;
    background-color: #f4f4f4;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    height: 60px;
    box-sizing: border-box;
}

.p-form-label .label-text {
    font-size: 15px;
    font-weight: 800;
    color: #333;
}

.p-form-label .badge {
    font-size: 11px;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 20px;
    color: #fff;
}

.p-form-label .badge.req {
    background-color: var(--recruit-red);
}

.p-form-label .badge.opt {
    background-color: #888;
}

/* 右側の入力エリア */
.p-form-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-form-inputs input[type="text"],
.p-form-inputs input[type="email"],
.p-form-inputs input[type="tel"],
.p-form-inputs select,
.p-form-inputs textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    transition: 0.3s;
}

.p-form-inputs input:focus,
.p-form-inputs select:focus,
.p-form-inputs textarea:focus {
    outline: none;
    border-color: var(--recruit-red);
    box-shadow: 0 0 5px rgba(206, 28, 38, 0.2);
}

.p-form-inputs textarea {
    height: 120px;
    resize: vertical;
}

/* 横並び（姓名・フリガナ） */
.p-form-inputs--flex {
    flex-direction: row;
    gap: 20px;
}

.p-form-inputs--flex .input-item {
    flex: 1;
}

/* 生年月日 */
.p-form-inputs--date {
    flex-direction: row;
    gap: 15px;
    align-items: center;
}

.p-form-inputs--date .date-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-form-inputs--date .wpcf7-form-control-wrap {
    width: auto;
    display: inline-block;
}

.p-form-inputs--date select {
    width: 120px;
    padding-right: 30px;
}

.p-form-inputs--date .unit {
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

/* 性別（ラジオボタン） */
.p-form-inputs--radio .wpcf7-form-control-wrap {
    display: inline-block;
}

.p-form-inputs--radio span.wpcf7-list-item {
    display: inline-block;
    margin: 0 30px 0 0 !important;
}

.p-form-inputs--radio input[type="radio"] {
    margin-right: 8px !important;
    transform: scale(1.2);
}

/* 住所（〒マークのズレ解消） */
.p-form-inputs--address {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.p-form-inputs--address .zip-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 300px;
}

.p-form-inputs--address .zip-mark {
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
}

.p-form-inputs--address .zip-wrap .wpcf7-form-control-wrap {
    flex: 1;
}

.p-form-inputs--address .pref-wrap select {
    width: 270px;
}

/* メールアドレス */
.p-form-inputs--email {
    gap: 15px;
}

/* ====================================
   送信ボタン（矢印アイコン付き！）
   ==================================== */
.p-form-submit-area {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.btn-submit {
    background-color: var(--recruit-red);
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: 800;
    padding: 12px 80px 20px 20px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
    box-shadow: 0 10px 25px rgba(206, 28, 38, 0.3);
    display: inline-block;
}

.btn-submit:hover {
    transform: translateY(-3px);
    opacity: 0.9;
    box-shadow: 0 15px 30px rgba(206, 28, 38, 0.4);
}

/* 矢印アイコンをCSSで召喚する魔法！ */
.btn-submit::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url('http://development-test.bikodo.com/wp-content/uploads/2026/02/Frame-69.webp');
    background-size: contain;
    background-repeat: no-repeat;
}

/* スマホ対応 */
@media (max-width: 767px) {
    .p-form-row {
        flex-direction: column;
        gap: 10px;
    }

    .p-form-label {
        width: 100%;
    }

    .p-form-inputs--flex {
        flex-direction: column;
    }

    .p-form-inputs--date {
        flex-wrap: wrap;
    }
}






/* ====================================
   同意チェックボックス専用スタイル
   ==================================== */
.p-form-row--consent {
    justify-content: center;
    /* 中央に配置 */
    margin-top: 20px;
    margin-bottom: 50px;
}

.p-form-inputs--consent {
    flex: none;
    /* デフォルトの flex: 1; を解除して中央寄せを効かせる */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

/* CF7のラップ要素をインラインブロック化 */
.p-form-inputs--consent .wpcf7-form-control-wrap {
    display: inline-flex;
    align-items: center;
    width: auto;
}

/* チェックボックス本体を少し大きくして押しやすく */
.p-form-inputs--consent input[type="checkbox"] {
    transform: scale(1.4);
    margin-right: 12px;
    accent-color: #FF4E70;
    /* チェック時の色をテーマカラーに */
    cursor: pointer;
}

/* リンクテキストの装飾 */
.p-form-inputs--consent a {
    color: #FF4E70;
    /* リンク色をテーマカラーに */
    text-decoration: underline;
    transition: 0.3s;
}

.p-form-inputs--consent a:hover {
    opacity: 0.7;
}

/* チェックボックスのラベルテキストとの隙間調整 */
.p-form-inputs--consent span.wpcf7-list-item {
    margin: 0 !important;
}

.p-form-inputs--consent span.wpcf7-list-item-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.form-check{
	display:block !important;
	margin-left:32.5%;
}





@charset "UTF-8";

/* ====================================
   基本設定
   ==================================== */
:root { --recruit-red: #CE1C26; }
.p-recruit { background-color: var(--recruit-red); width: 100%; overflow-x: hidden; font-family: 'Noto Sans JP', sans-serif; }

/* ====================================
   ヘッダー
   ==================================== */
.p-recruit-header { background-color: var(--recruit-red); color: #fff; padding: 80px 20px 50px; text-align: center; }
.p-recruit-header__inner { max-width: 1000px; margin: 0 auto; }
.p-recruit-title { margin-bottom: 40px; }
.p-recruit-title .en { font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 700; letter-spacing: 0.15em; line-height: 1; margin: 0; }
.p-recruit-title .ja { font-size: 13px; font-weight: bold; display: block; margin-top: 10px; opacity: 0.9; }

.p-recruit-nav { display: flex; justify-content: center; gap: 15px; padding: 0; list-style: none; flex-wrap: wrap; margin-top: 0; }
.p-recruit-nav li a { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--recruit-red); padding: 12px 30px; border-radius: 6px; font-weight: bold; font-size: 13px; text-decoration: none; min-width: 180px; transition: 0.3s; }
.p-recruit-nav li a:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.p-recruit-nav .nav-icon { width: 14px; height: auto; }

/* ====================================
   採用理念
   ==================================== */
.p-recruit-body { background-image: url('http://development-test.bikodo.com/wp-content/uploads/2026/02/Frame-137.webp'); background-size: cover; background-position: center; padding: 100px 20px; position: relative; border-radius: 60px 60px 0 0; }
.p-recruit-card { background-color: #ffffff !important; border-radius: 60px; padding: 60px; max-width: 1100px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
.p-recruit-row { display: flex; flex-direction: column; gap: 40px; margin-bottom: 80px; align-items: center; }
.p-recruit-row:last-child { margin-bottom: 0; }
.p-recruit-row__img img { width: 100%; height: auto; border-radius: 30px; display: block; }
.p-recruit-row__head { font-size: 28px; font-weight: 900; line-height: 1.5; margin-bottom: 25px; color: #333; }
.p-recruit-row__desc { font-size: 15px; line-height: 2.8; color: #444; margin: 0; }

/* ====================================
   マインドセット
   ==================================== */
.p-recruit-mindset { background-color: #fff !important; padding: 100px 20px; text-align: center; }
.p-recruit-mindset__inner { max-width: 1100px; margin: 0 auto; }
.p-recruit-mindset__head, .p-recruit-mindset__sub-text { font-size: 24px; font-weight: bold; margin-bottom: 50px; }
.p-recruit-bubbles-img img { width: 100%; max-width: 1000px; }
.p-recruit-mindset__note { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 30px; }
.p-recruit-mindset__note .check-mark { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background-color: var(--recruit-red); color: #fff; border-radius: 50%; flex-shrink: 0; }
.p-recruit-mindset__note .material-icons { font-size: 18px; font-weight: 900; }

/* ====================================
   メッセージバナー
   ==================================== */
.p-recruit-message-banner { background-color: var(--recruit-red); width: 100%; padding: 0; display: flex; justify-content: center; align-items: center; }
.p-recruit-message-banner__inner { width: 100%; max-width: 100%; padding: 0 2%; display: flex; justify-content: center; }
.p-recruit-capsule-bg { 
    background-image: url('img/Frame-189.webp');
    background-size: cover; background-position: center; 
    width: 100%; max-width: 1600px; min-height: 260px; 
    border-radius: 9999px; display: flex; flex-direction: column; justify-content: center; align-items: center; 
    text-align: center; box-shadow: none; padding: 20px 5%; box-sizing: border-box; 
}
.message-text { font-family: 'Noto Sans JP', sans-serif; font-weight: 800; font-size: clamp(16px, 2.2vw, 32px); line-height: 1.5; letter-spacing: 0.05em; color: #EFEEEE; margin: 0; }
.message-text br { display: none; }
.message-text .main-msg { font-size: clamp(20px, 3vw, 42px); font-weight: 800; line-height: 1.5; display: block; margin: 0; }
.message-text .highlight { font-size: clamp(20px, 3vw, 42px); font-weight: 800; line-height: 1.5; display: block; white-space: nowrap; margin: 0; }

@media (max-width: 767px) {
    .p-recruit-capsule-bg { min-height: 160px; border-radius: 80px; }
    .message-text { font-size: 14px; line-height: 1.6; }
    .message-text .main-msg { font-size: 18px; margin: 5px 0; line-height: 1.6;}
    .message-text .highlight { font-size: 20px; white-space: normal; line-height: 1.6;}
    .message-text br { display: block; }
}

/* ====================================
   5つの特徴
   ==================================== */
.p-recruit-features { background-color: #f9f9f9; padding: 100px 0; }

/* タイトル横の丸を綺麗に揃える魔法！ */
.p-recruit-features__title { 
    display: flex; justify-content: center; align-items: center; 
    gap: 12px; 
    font-size: 28px; font-weight: bold; margin-bottom: 80px; 
}
.p-recruit-features__title .title-deco img {
    width: 20px; 
    height: auto;
    transform: translateY(-3px); 
}

.p-recruit-features__grid { display: flex; flex-direction: column; gap: 60px; max-width: 1000px; margin: 0 auto; padding: 0 20px; }

.feature-card { 
    background: #fff; border-radius: 20px; padding: 50px 40px; 
    position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-top: 30px; 
}

.feature-card__bg-num { 
    position: absolute; top: -15px; left: 30px; 
    font-family: 'Poppins', sans-serif; font-size: 120px; 
    font-weight: 400; font-style: italic; line-height: 54px; 
    color: #F6F6F6; z-index: 0; 
}

.feature-card__img { position: absolute; top: -40px; right: 20px; width: 140px; z-index: 2; }
.feature-card__img img { width: 100%; height: auto; display: block; }

.feature-card__content { position: relative; z-index: 1; }
.feature-card__head { font-family: 'Noto Sans JP', sans-serif; font-size: 24px; font-weight: 800; line-height: 1.4; letter-spacing: 0.05em; color: #333; margin-bottom: 20px; }
.feature-card__desc { font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.8; color: #333; margin: 0; }
.feature-card__note { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 500; color: #888; margin-top: 15px; line-height: 1.6; }
.feature-card__list { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 2; color: #333; }
.feature-card__list li::before { content: "● "; color: #333; }

/* ====================================
   福利厚生
   ==================================== */
.p-recruit-welfare { background-color: #fff; padding: 100px 0; text-align: center; }
.p-recruit-welfare__title { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 28px; font-weight: bold; margin-bottom: 60px; }
.p-recruit-welfare__title .title-deco img { width: 24px; height: auto; }
.p-recruit-welfare__grid { display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.welfare-card { background: #FFF5F7; border-radius: 15px; padding: 50px 30px; display: flex; flex-direction: column; align-items: center; transition: 0.3s; min-height: 400px; }
.welfare-card:nth-child(even) { background: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.welfare-card__icon { width: 90px; height: 90px; margin-bottom: 30px; }
.welfare-card__head { font-size: 20px; font-weight: 900; color: var(--recruit-red); margin-bottom: 20px; }
.welfare-card__desc { font-size: 14px; line-height: 2.0; color: #333; text-align: center; }

/* ====================================
   働く人
   ==================================== */
.p-recruit-env { background-color: #f9f9f9; padding: 80px 0 120px; }
.p-recruit-env__deco { text-align: center; margin-bottom: 10px; }
.p-recruit-env__deco .script { font-family: 'Allura', cursive; font-size: 40px; color: #333; }
.p-recruit-env__title { display: flex; justify-content: center; align-items: center; gap: 15px; font-size: 28px; font-weight: bold; margin-bottom: 50px; text-align: center; }
.p-recruit-env__grid { display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.member-card { aspect-ratio: 3 / 4; perspective: 1000px; cursor: pointer; background: transparent; }
.member-card__inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.member-card:hover .member-card__inner { transform: rotateY(180deg); }
.member-card__front, .member-card__back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 20px; overflow: hidden; }
.member-img { width: 100%; height: 100%; object-fit: cover; }
.member-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; padding: 30px; }
.member-overlay .dept-label { background: var(--recruit-red); color: #fff; font-size: 14px; font-weight: bold; padding: 5px 25px; border-radius: 20px; position: absolute; top: 30px; }
.member-overlay .name { font-size: 40px; font-weight: 900; font-family: 'Poppins', sans-serif; letter-spacing: 0.1em; }
.member-overlay .career { font-size: 16px; font-weight: bold; position: absolute; bottom: 30px; }
.member-card__back { background-color: var(--recruit-red); color: white; transform: rotateY(180deg); display: flex; justify-content: center; align-items: center; padding: 20px; text-align: center; }
.member-card__back .message { font-size: 18px; font-weight: bold; line-height: 1.8; }

/* ====================================
   ENTRYボタン
   ==================================== */
.p-recruit-cta { background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('http://development-test.bikodo.com/wp-content/uploads/2026/02/Frame-191.webp'); background-size: cover; background-position: center; padding: 100px 20px; }
.p-recruit-cta__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; justify-content: center; align-items: center; }
.cta-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 500px; height: 200px; padding: 0 50px; border-radius: 20px; text-decoration: none; color: #fff; transition: 0.3s; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.cta-btn:hover { transform: translateY(-5px); opacity: 0.8; }
.cta-btn--blue { background-color: #3EB5D6; }
.cta-btn--red { background-color: var(--recruit-red); }
.cta-text { font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 40px; letter-spacing: 0.1em; }
.cta-text-group { display: flex; flex-direction: column; align-items: flex-start; }
.cta-text-group .en { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 48px; line-height: 1; margin-bottom: 10px; }
.cta-text-group .ja { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 18px; }
.cta-arrow-img { width: 50px; height: 50px; }

/* ====================================
   PC用レイアウト設定 (全魔法を合体した究極の完全版！)
   ==================================== */
@media (min-width: 768px) {
    /* 採用理念 */
    .p-recruit-row { flex-direction: row; justify-content: space-between; align-items: center; }
    .p-recruit-row--reverse { flex-direction: row-reverse; }
    .p-recruit-row__text { width: 50%; }
    .p-recruit-row__img { width: 45%; }
    
    /* 5つの特徴 全体のグリッド */
    .p-recruit-features__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 30px; max-width: 1000px; margin: 0 auto; }
    
    /* カード全体の余白を少しスッキリさせる */
    .feature-card--wide { grid-column: 1 / -1; padding: 50px 40px; }
    
    /* 横並びと隙間の設定 */
    .feature-card__content--wide { 
        display: flex; justify-content: center; align-items: center; gap: 30px; 
    }
    
    /* 左（タイトル） */
    .wide-left { 
        flex: 0 0 380px; 
        text-align: center;
    }
    
    /* 右（文章） */
    .wide-right { 
        flex: 0 0 500px; 
        padding: 0; 
    }
    
    /* 01の透かし数字 */
    .feature-card--wide .feature-card__bg-num { 
        top: 20px; left: 30px; 
        font-size: 100px; 
        font-weight: 300; 
        opacity: 0.7; 
    }

    /* 01のテキスト設定 */
    .feature-card--wide .feature-card__head { 
        font-size: 36px; font-weight: 800; line-height: 1.5; margin-bottom: 0; letter-spacing: 0.05em; 
    }
    .feature-card--wide .feature-card__desc { 
        font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: 0.02em; 
    }
    .feature-card--wide .feature-card__note { 
        font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 0.02em; margin-top: 15px;
    }
    
    /* ★消えていた魔法1：おねえさんの足切れを直す！（-50px降ろして着地） */
    .feature-card--wide .feature-card__img { 
        top: auto;    
        bottom: -50px; 
        right: 10px;  
        width: 110px; 
        z-index: 2; 
    }

    /* ★消えていた魔法2：02〜05のカードの文章がイラストと被るのを防ぐ！ */
    .feature-card:not(.feature-card--wide) .feature-card__content {
        padding-right: 120px; 
    }
    
    /* ★消えていた魔法3：02〜05のイラストを綺麗に右上に配置！ */
    .feature-card:not(.feature-card--wide) .feature-card__img {
        top: -30px;   
        right: -10px; 
        width: 130px; 
    }

    /* 福利厚生・働く人・CTA */
    .p-recruit-welfare__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .p-recruit-env__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .p-recruit-cta__inner { flex-direction: row; gap: 40px; }
}



/* ====================================
   インタビューページ (page-recruit-interview.php)
   ==================================== */
.p-interview-body {
    background-color: #f9f9f9;
    border-radius: 60px 60px 0 0;
    padding: 80px 20px 120px;
}
.p-interview-container {
    max-width: 900px;
    margin: 0 auto;
}
.p-interview-title-area {
    text-align: center;
    margin-bottom: 60px;
}
.p-interview-title-area .script {
    font-family: 'Allura', cursive;
    font-size: 32px;
    color: #333;
    display: block;
    margin-bottom: 5px;
}
.p-interview-main-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0;
}
.p-interview-main-title .title-deco img {
    width: 20px;
    transform: translateY(-3px);
}

/* メンバーリストのスタイル */
.p-interview-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* 隙間はアコーディオンのマージンで作ります */
}

/* ★追加・修正：アコーディオン全体の仕組み */
.p-interview-accordion {
    margin-bottom: 20px;
}

.p-interview-item {
    background: #fff;
    border-radius: 100px; /* 綺麗なカプセル型に！ */
    padding: 15px 40px 15px 15px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    z-index: 2; /* アコーディオンの中身より手前に出す */
}
/* カプセルをホバーしたとき（開いていない時だけフワッとさせる） */
.p-interview-accordion:not(.is-open) .p-interview-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 左の写真 */
.p-interview-item__img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.p-interview-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 中央のテキストエリア */
.p-interview-item__info {
    flex: 1;
}
.p-interview-item__info .info-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}
.p-interview-item__info .dept {
    background: var(--recruit-red);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 18px;
    border-radius: 20px;
}
.p-interview-item__info .name {
    font-family: 'Poppins', 'Noto Sans JP', sans-serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin: 0;
    color: #333;
}
.p-interview-item__info .period {
    font-size: 13px;
    color: #888;
    font-weight: bold;
}
.p-interview-item__info .history {
    font-size: 14px;
    color: #555;
    font-weight: 500;
    margin: 0;
}

/* 右側の赤い矢印アイコン */
.p-interview-item__icon {
    width: 40px;
    height: 40px;
    background: var(--recruit-red);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* アニメーション追加 */
}
/* アイコンのV字（下矢印）をCSSで作成 */
.p-interview-item__icon::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-2px) rotate(45deg);
}
/* ★開いた時の矢印の動き（くるっと上を向く！） */
.p-interview-accordion.is-open .p-interview-item__icon {
    transform: rotate(180deg);
}

/* ====================================
   ★追加：びよーんと出てくるアコーディオンの中身
   ==================================== */
.p-interview-content {
    display: grid;
    grid-template-rows: 0fr; /* 初期状態は高さゼロ（見えない） */
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    border-radius: 0 0 40px 40px; /* 下側だけ丸くして自然に繋げる */
    margin-top: -50px; /* カプセルの裏に隠す魔法 */
    padding-top: 50px; /* 隠れた分の余白を足す */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
}
/* ★開いた時に中身がびよーんと見えるようにする！ */
.p-interview-accordion.is-open .p-interview-content {
    grid-template-rows: 1fr;
}
.p-interview-content__inner {
    min-height: 0;
    overflow: hidden;
    padding: 20px 60px 50px 60px; /* 中の余白 */
}

/* Q&Aのデザイン */
.qa-list {
    margin: 0;
}
.qa-list dt {
    font-size: 16px;
    font-weight: 800;
    color: var(--recruit-red);
    margin-top: 30px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.qa-list dt::before {
    content: "Q.";
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 900;
}
.qa-list dt:first-child {
    margin-top: 0;
}
.qa-list dd {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    margin: 0 0 0 28px; /* Q.の幅ぶん右にずらす */
}
/* ====================================
   タイムスケジュール（タイムライン風）
   ==================================== */
.p-interview-timeline {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}
/* 中央の縦線 */
.p-interview-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 120px; /* 時間エリアと内容エリアの境界線 */
    width: 2px;
    background-color: var(--recruit-red); /* 線を赤色に！ */
    opacity: 0.2; /* 少し薄くして上品に */
}

.timeline-item {
    display: flex;
    margin-bottom: 40px;
    position: relative;
}
.timeline-item:last-child {
    margin-bottom: 0;
}

/* 左側の時間 */
.timeline-item .time {
    width: 120px;
    padding-right: 30px;
    text-align: right;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--recruit-red);
    line-height: 1;
    position: relative;
}
/* タイムラインの丸ポチ（ドット） */
.timeline-item .time::after {
    content: '';
    position: absolute;
    top: 4px;
    right: -7px; /* 縦線の上にピッタリ乗るように調整 */
    width: 16px;
    height: 16px;
    background-color: var(--recruit-red);
    border: 3px solid #f9f9f9; /* 背景色と同じフチをつけてくり抜く */
    border-radius: 50%;
    z-index: 1;
}

/* 右側の内容 */
.timeline-item .content {
    flex: 1;
    padding-left: 40px;
    padding-bottom: 20px;
}
.timeline-item .content h4 {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    margin: 0 0 10px 0;
}
.timeline-item .content p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin: 0;
}



/* ====================================
   募集要項ページ (page-recruit-jobdescription.php)
   ==================================== */
.p-jobdesc-body {
    background-color: #f9f9f9;
    border-radius: 60px 60px 0 0;
    padding: 80px 20px 120px;
}
.p-jobdesc-container {
    max-width: 1000px;
    margin: 0 auto;
}
.p-jobdesc-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #333;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: 0.1em;
}

/* 募集要項の表（角丸で囲む） */
.p-jobdesc-table-wrap {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 20px;
    overflow: hidden; /* 角丸からはみ出た部分をカット */
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
    margin-bottom: 80px;
}
.p-jobdesc-list {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.p-jobdesc-row {
    display: flex;
    border-bottom: 1px solid #eaeaea;
}
.p-jobdesc-row:last-child {
    border-bottom: none; /* 一番下の線は消す */
}

/* 左側の項目名（少しグレー背景） */
.p-jobdesc-dt {
    /* HTMLのタグに合わせてdtにスタイルを適用 */
}
.p-jobdesc-row dt {
    width: 25%;
    background-color: #fafafa;
    padding: 30px 40px;
    font-size: 15px;
    font-weight: 800;
    color: #333;
    border-right: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.p-jobdesc-row dt .small {
    font-size: 12px;
    font-weight: 500;
    color: #888;
    margin-top: 5px;
}

/* 右側の内容 */
.p-jobdesc-row dd {
    width: 75%;
    padding: 30px 40px;
    margin: 0;
    font-size: 15px;
    line-height: 2.0;
    color: #444;
}

/* エントリーボタンエリアの中央揃え */
.p-jobdesc-cta-area {
    display: flex;
    justify-content: center;
}

/* ====================================
   募集要項ページのスマホ対応
   ==================================== */
@media (max-width: 767px) {
    .p-jobdesc-body { padding: 60px 20px 80px; }
    .p-jobdesc-title { font-size: 24px; margin-bottom: 40px; }
    
    .p-jobdesc-row { flex-direction: column; }
    .p-jobdesc-row dt { 
        width: 100%; 
        border-right: none; 
        border-bottom: 1px solid #eaeaea; 
        padding: 20px; 
    }
    .p-jobdesc-row dd { 
        width: 100%; 
        padding: 20px; 
    }
}


/* ====================================
   エントリーフォーム (page-recruit-contact.php)
   Figma完全一致＆CF7攻略版！
   ==================================== */
.p-contact-body { background-color: #f6f6f6; border-radius: 60px 60px 0 0; padding: 80px 20px 120px; }
.p-contact-container { max-width: 800px; margin: 0 auto; }
.p-contact-title { font-family: 'Noto Sans JP', sans-serif; font-size: 32px; font-weight: 900; color: #333; text-align: center; margin-bottom: 60px; letter-spacing: 0.1em; }

/* フォーム全体のレイアウト */
.p-form-wrapper { width: 100%; }
.p-form-row { 
    display: flex; 
    gap: 40px; 
    margin-bottom: 40px; 
    align-items: stretch; /* ★修正：flex-startからstretchに変更！これで左右の高さがピッタリ揃います！ */
}

/* CF7の勝手な改行・見えない箱を制御！ */
.p-form-wrapper br { display: none !important; }
.wpcf7-form-control-wrap { display: block; width: 100%; }

/* 左側のラベル部分（Figma完全準拠＆伸び縮み対応） */
.p-form-label {
    width: 260px; 
    height: auto; 
    min-height: 50px; 
    background-color: #F6F6F6; 
    border-radius: 10px;
    padding: 0 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-shrink: 0; 
    box-sizing: border-box;
}

/* ====================================
   ★ココを追加！！（消えてしまった文字とバッジの復活魔法）
   ==================================== */
.p-form-label .label-text { font-size: 15px; font-weight: bold; color: #333; }
.p-form-label .badge { width: 50px; height: 20px; display: flex; justify-content: center; align-items: center; font-size: 11px; font-weight: bold; border-radius: 20px; color: #fff; }
.p-form-label .badge.req { background-color: #FF4E70; }
.p-form-label .badge.opt { background-color: #888; }

/* 右側の入力エリア */
.p-form-inputs { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.p-form-inputs input[type="text"],
.p-form-inputs input[type="email"],
.p-form-inputs input[type="tel"],
.p-form-inputs select,
.p-form-inputs textarea {
    width: 100%; padding: 0 20px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px;
    background-color: #fff; color: #333; box-sizing: border-box; transition: 0.3s;
    height: 50px; /* 高さを綺麗に統一 */
}
.p-form-inputs input:focus, .p-form-inputs select:focus, .p-form-inputs textarea:focus {
    outline: none; border-color: var(--recruit-red); box-shadow: 0 0 5px rgba(206, 28, 38, 0.2);
}
.p-form-inputs textarea { height: 120px; padding: 20px; resize: vertical; }

/* ▼▼▼ ココが重要！縦並びを強制的に横並びにする魔法！ ▼▼▼ */

/* 姓名・フリガナ */
.p-form-inputs--flex { display: flex !important; flex-direction: row !important; gap: 20px; }
.p-form-inputs--flex .input-item { flex: 1; }

/* 生年月日 */
.p-form-inputs--date { display: flex !important; flex-direction: row !important; gap: 15px; align-items: center; }
.p-form-inputs--date .date-item { display: flex; align-items: center; gap: 10px; }
.p-form-inputs--date .wpcf7-form-control-wrap { width: 120px !important; }
.p-form-inputs--date select { width: 100%; padding-right: 30px; }
.p-form-inputs--date .unit { font-size: 15px; font-weight: bold; color: #333; }

/* 性別（ラジオボタン） */
.p-form-inputs--radio { display: flex; align-items: center; height: 40px; }
.p-form-inputs--radio .wpcf7-form-control-wrap { display: inline-block; }
.p-form-inputs--radio span.wpcf7-list-item { display: inline-block; margin: 0 30px 0 0 !important; }
.p-form-inputs--radio input[type="radio"] { margin: 0 8px 0 0 !important; transform: scale(1.2); accent-color: #FF4E70; }

/* 住所 */
.p-form-inputs--address { display: flex; flex-direction: column; gap: 15px; }
.p-form-inputs--address .zip-wrap { display: flex; align-items: center; gap: 10px; }
.p-form-inputs--address .zip-mark { font-weight: bold; font-size: 16px; }
.p-form-inputs--address .zip-input .wpcf7-form-control-wrap { width: 200px !important; }
.p-form-inputs--address .pref-wrap .wpcf7-form-control-wrap { width: 250px !important; }

/* メールアドレス */
.p-form-inputs--email { display: flex; flex-direction: column; gap: 15px; }

/* ====================================
   送信ボタン（Figma完全準拠・白丸アイコン版！）
   ==================================== */
.p-form-submit-area { display: flex; justify-content: center; margin-top: 60px; }
.btn-submit-wrapper { position: relative; display: inline-block; }

.btn-submit {
    background-color: var(--recruit-red); color: #fff; font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px; font-weight: 800; width: 340px; height: 60px; border-radius: 40px; border: none;
    cursor: pointer; transition: 0.3s;
    padding-right: 20px; /* アイコンがある分、文字を少し左にずらす */
}
/* ホバー時（マウスを乗せた時）の動き */
.btn-submit-wrapper:hover .btn-submit { 
    opacity: 0.9; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(206, 28, 38, 0.3); 
}

/* 白い丸と赤い矢印 */
.btn-submit-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    /* 指定の画像をそのままのサイズで！ */
    background-image: url('http://development-test.bikodo.com/wp-content/uploads/2026/03/Frame-69-1.webp');
    background-repeat: no-repeat;
    background-position: center;
    
    /* background-size は削除しました */
    
    pointer-events: none;
    transition: 0.3s;
    z-index: 2;
}

/* ★コバエ（スピナー）の設定：ボタンの右側、邪魔にならない位置に！ */
.wpcf7-spinner {
    position: absolute;
    right: -40px; /* ボタンの右外側あたり */
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
}

/* ボタンの外枠（ラッパー）にスピナーを収めるための設定 */
.btn-submit-wrapper {
    position: relative;
    display: inline-block;
}


/* ====================================
   データ作成ガイド (page-datainfo.php)
   ==================================== */

/* ★修正：赤いヘッダー自体の高さを広げて、タイトルをゆったり配置 */
.p-datainfo .p-recruit-header {
    padding-top: 100px;    /* 上側の余白 */
    padding-bottom: 120px; /* 下側の余白（これを広げるとタイトルが押し下がります） */
}

/* ★修正：日本語タイトルのネガティブマージンを解除して位置を安定させる */
.p-datainfo .p-recruit-title .ja {
    margin-top: 10px !important; /* 検証ツールのマイナス指定を上書きしてリセット */
    font-size: 14px;
    letter-spacing: 0.1em;
}

/* ★修正：白い箱を赤いエリアにピッタリくっつけて、上部に適度な余白を作る */
.p-datainfo-body {
    background-color: #f9f9f9;
    border-radius: 60px 60px 0 0;
    margin-top: -40px; /* 少しだけ赤い方に食い込ませて、丸みの隙間を埋める */
    padding: 80px 20px 120px;
    position: relative;
    z-index: 2;
}

.p-datainfo-container {
    max-width: 900px;
    margin: 0 auto;
}
.p-datainfo-h2 {
    font-size: 26px;
    font-weight: 900;
    color: var(--recruit-red);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.p-datainfo-h2::before {
    content: "";
    width: 6px;
    height: 30px;
    background: var(--recruit-red);
    border-radius: 3px;
}
.p-datainfo-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.p-datainfo-card--accent {
    border: 2px solid var(--recruit-red);
}

/* ソフトウェアOK/NG */
.p-datainfo-software {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}
.software-item {
    flex: 1;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
}
.software-item.ok { background: #e6f7ef; border: 2px solid #00a86b; }
.software-item.ng { background: #fff5f5; border: 2px solid #ff4e70; }
.software-item .status {
    display: block; font-weight: 900; font-size: 20px; margin-bottom: 5px;
}
.software-item.ok .status { color: #00a86b; }
.software-item.ng .status { color: #ff4e70; }
.software-item .name { font-size: 22px; font-weight: 800; margin: 0; }

/* 箇条書き */
.p-datainfo-notes {
    list-style: none; padding: 0; margin: 0;
}
.p-datainfo-notes li {
    position: relative; padding-left: 25px; margin-bottom: 10px; line-height: 1.7;
}
.p-datainfo-notes li::before {
    content: "●"; color: var(--recruit-red); position: absolute; left: 0; font-size: 14px;
}

/* 送信方法グリッド */
.p-datainfo-box {
    background: #f4f4f4; padding: 20px; border-radius: 10px; margin-bottom: 30px;
}
.p-datainfo-box .box-title {
    font-weight: 900; color: var(--recruit-red); font-size: 18px; margin-bottom: 10px;
}
.p-datainfo-check-title {
    font-weight: 800; margin-bottom: 20px; text-align: center;
}
.p-datainfo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.grid-item {
    background: #fff; border: 1px solid #ddd; padding: 20px; border-radius: 10px; text-align: center;
}
.grid-item .tag {
    display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; margin-bottom: 10px;
}
.tag.req { background: #ff4e70; color: #fff; }

/* 注意事項リスト */
.warning-item {
    border-bottom: 1px solid #eee; padding: 20px 0;
}
.warning-item:last-child { border-bottom: none; }
.warning-item h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; color: #333; }
.warning-item p { margin: 0; font-size: 15px; color: #555; }

/* 白版ステップ */
.p-datainfo-h3 {
    text-align: center; font-size: 22px; margin: 60px 0 30px;
}
.p-datainfo-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.step-card {
    background: #fff; padding: 30px 20px; border-radius: 15px; position: relative; border-top: 5px solid var(--recruit-red); box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.step-num {
    display: block; font-family: 'Poppins'; font-weight: 800; color: var(--recruit-red); font-size: 14px; margin-bottom: 10px;
}
.step-card h4 { font-size: 16px; font-weight: 800; margin-bottom: 15px; }
.step-card p { font-size: 14px; line-height: 1.6; margin: 0; }

@media (max-width: 767px) {
    .p-datainfo-software, .p-datainfo-grid, .p-datainfo-steps {
        grid-template-columns: 1fr; flex-direction: column;
    }
}

/* ====================================
   Variables (変数定義)
   ==================================== */
:root {
    --color-libero-red: #CE1C26;
    --color-libero-blue: #30A6D4;
    --color-text-main: #333333;
    --header-height: 80px; /* PC時のベース高さ */
/* 厳守ルール: 10px程度をclampで流動的に定義 */
    --mega-menu-gap: clamp(8px, 0.6vw, 12px);
}

/* ====================================
   Layout (l-) / Header
   ==================================== */
   .l-header {
    width: 100%;
    height: var(--header-height);
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    
    position: sticky;
    top: 0;
    z-index: 100;
    
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.l-header.is-hidden {
    transform: translateY(-100%);
}

.l-header__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
    padding-left: clamp(20px, 3vw, 40px);
}

/* ロゴ (W60xH60) */
.l-header__logo {
    margin: 0;
    line-height: 1;
}

.l-header__logo-link {
    display: block;
    width: clamp(45px, 4vw, 60px); 
}

.l-header__logo-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
}

/* ====================================
   Project (p-) / Global Nav
   ==================================== */
.l-header__nav {
    margin-left: auto; 
    margin-right: clamp(20px, 2.5vw, 40px); 
    display: flex;
    align-items: center;
    height: 100%;
}

.p-global-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 40px);
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-global-nav__item {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.p-global-nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    font-size: clamp(14px, 1vw, 15px);
    font-weight: 700;
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.p-global-nav__link:hover {
    color: var(--color-libero-red);
}

/* 下層メニューがあることを示すV字矢印 */
.p-global-nav__arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s ease;
}

/* スマホ用のメニュー内アクションボタン(PC時は非表示) */
.p-global-nav__sp-actions {
    display: none;
}

/* ====================================
   Project (p-) / Header Actions
   ==================================== */
.l-header__actions {
    display: flex;
    height: 100%;
}

.p-header-actions__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: clamp(120px, 10vw, 180px);
    height: 100%;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.p-header-actions__btn--blue {
    background-color: var(--color-libero-blue);
}
.p-header-actions__btn--blue:hover {
    background-color: #288fb8;
}

.p-header-actions__btn--red {
    background-color: var(--color-libero-red);
}
.p-header-actions__btn--red:hover {
    background-color: #a8171f;
}

.p-header-actions__icon {
    width: clamp(20px, 1.5vw, 24px);
    height: clamp(20px, 1.5vw, 24px);
}

.p-header-actions__text {
    font-size: clamp(11px, 0.8vw, 13px);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ====================================
   Project (p-) / Hamburger Button
   ==================================== */
.p-hamburger {
    display: none; /* PC時は非表示 */
    position: relative;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    margin-right: clamp(15px, 3vw, 25px);
    z-index: 1001;
    -webkit-tap-highlight-color: transparent;
}

.p-hamburger__line {
    position: absolute;
    left: 50%;
    width: 28px;
    height: 3px;
    background-color: var(--color-libero-red);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: 
        transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
        top 0.4s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.3s ease;
}

.p-hamburger__line:nth-child(1) { top: 14px; }
.p-hamburger__line:nth-child(2) { top: 22px; }
.p-hamburger__line:nth-child(3) { top: 30px; }

/* 展開時: 3本線 → × 変形 */
.p-hamburger.is-active .p-hamburger__line:nth-child(1) {
    top: 22px;
    transform: translateX(-50%) rotate(45deg);
}
.p-hamburger.is-active .p-hamburger__line:nth-child(2) {
    opacity: 0;
}
.p-hamburger.is-active .p-hamburger__line:nth-child(3) {
    top: 22px;
    transform: translateX(-50%) rotate(-45deg);
}

/* ====================================
   Project (p-) / Mega Menu (PC版)
   ==================================== */
.p-global-nav__item--has-child:hover .p-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.p-mega-menu {
    top: calc(100% + var(--mega-menu-gap));
    left: 50%;
    position: absolute;
    
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.3s;
                
    width: clamp(900px, 95vw, 1207px);
    min-height: 279px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: clamp(20px, 2vw, 30px) clamp(20px, 3vw, 40px);
}

.p-mega-menu::before {
    content: "";
    position: absolute;
    top: calc(var(--mega-menu-gap) * -1);
    left: 0;
    width: 100%;
    height: var(--mega-menu-gap);
    display: block;
}

.p-mega-menu__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 3fr; 
    gap: clamp(20px, 3vw, 40px);
}

.p-mega-menu__title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.2vw, 18px);
    color: var(--color-libero-red);
    margin-bottom: 5px;
    line-height: 1.4;
}

.p-mega-menu__view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1vw, 16px);
    color: var(--color-text-main);
    text-decoration: none;
    width: 100%;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #DDDDDD;
    transition: color 0.3s ease;
}
.p-mega-menu__view-all:hover {
    color: var(--color-libero-red);
}

.p-mega-menu__icon-arrow {
    width: 16px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.p-mega-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.p-mega-menu__list--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 12px 20px;
}

.p-mega-menu__list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 0.9vw, 14px);
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.3s ease;
}

.p-mega-menu__list a:hover {
    color: var(--color-libero-red);
}

.p-mega-menu__list-arrow {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid #aaaaaa;
    border-top: 1.5px solid #aaaaaa;
    transform: rotate(45deg);
    transition: border-color 0.3s ease;
}
.p-mega-menu__list a:hover .p-mega-menu__list-arrow {
    border-color: var(--color-libero-red);
}

/* ====================================
   Project (p-) / Dropdown Menu (PC版)
   ==================================== */
.p-global-nav__item--has-child:hover .p-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.p-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--mega-menu-gap));
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                visibility 0.3s;
                
    width: clamp(220px, 20vw, 249px);
    min-height: 210px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: clamp(20px, 2vw, 30px) clamp(25px, 3vw, 40px);
    
    display: flex;
    flex-direction: column;
    cursor: default;
}

.p-dropdown-menu::before {
    content: "";
    position: absolute;
    top: calc(var(--mega-menu-gap) * -1);
    left: 0;
    width: 100%;
    height: var(--mega-menu-gap);
    display: block;
}

.p-dropdown-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: clamp(15px, 2vw, 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p-dropdown-menu__list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 1vw, 14px);
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.3s ease;
}

.p-dropdown-menu__list a:hover {
    color: var(--color-libero-red);
}

.p-dropdown-menu__list-arrow {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid #aaaaaa;
    border-top: 1.5px solid #aaaaaa;
    transform: rotate(45deg);
    transition: border-color 0.3s ease;
}
.p-dropdown-menu__list a:hover .p-dropdown-menu__list-arrow {
    border-color: var(--color-libero-red);
}

.p-dropdown-menu__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: clamp(140px, 15vw, 169px);
    height: 50px;
    margin: 0 auto;
    
    padding: 9px 25.2px;
    background-color: var(--color-libero-red);
    border-radius: 8px;
    
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-dropdown-menu__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(206, 28, 38, 0.3);
}

.p-dropdown-menu__btn-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.2vw, 18px);
    letter-spacing: 0.05em;
    line-height: 1;
}

.p-dropdown-menu__btn-icon {
    width: clamp(16px, 1.2vw, 20px);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* ====================================
   Mobile (1024px以下) / ハンバーガーメニュー
   ==================================== */
@media (max-width: 1024px) {
    
    /* ハンバーガーボタンを表示 */
    .p-hamburger {
        display: block;
    }
    
    /* PC用のアクションボタン(ヘッダー右)を非表示 */
    .l-header__actions {
        display: none;
    }
    
    /* ナビ本体を全画面オーバーレイに変身 */
    .l-header__nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        margin: 0;
        padding: 0;
        background-color: #ffffff;
        z-index: 1000;
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
        
        /* 右上を起点とした円形クリップで閉じてる */
        clip-path: circle(0% at 100% 0%);
        -webkit-clip-path: circle(0% at 100% 0%);
        
        transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1),
                    -webkit-clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        
        pointer-events: none;
        visibility: hidden;
    }
    
    /* 展開状態: 円が画面全体を余裕でカバー */
    .l-header__nav.is-open {
        clip-path: circle(150% at 100% 0%);
        -webkit-clip-path: circle(150% at 100% 0%);
        pointer-events: auto;
        visibility: visible;
    }
    
    /* メニューリスト: 中央縦並び */
    .p-global-nav__list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 90px 20px 20px;
        height: auto;
        box-sizing: border-box;
    }
    
    .p-global-nav__item {
        width: 100%;
        height: auto;
        display: block;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        position: static;
        
        /* 順番に登場するアニメ */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    
    .l-header__nav.is-open .p-global-nav__item {
        opacity: 1;
        transform: translateY(0);
    }
    
    .l-header__nav.is-open .p-global-nav__item:nth-child(1) { transition-delay: 0.25s; }
    .l-header__nav.is-open .p-global-nav__item:nth-child(2) { transition-delay: 0.30s; }
    .l-header__nav.is-open .p-global-nav__item:nth-child(3) { transition-delay: 0.35s; }
    .l-header__nav.is-open .p-global-nav__item:nth-child(4) { transition-delay: 0.40s; }
    
    .p-global-nav__link {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: auto;
        padding: 22px 10px;
        font-size: 17px;
        color: var(--color-text-main);
    }
    
    /* 子要素ありの矢印: 下向きにして、展開時回転 */
    .p-global-nav__item--has-child > .p-global-nav__link .p-global-nav__arrow {
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.3s ease;
    }
    
    .p-global-nav__item--has-child.is-expanded > .p-global-nav__link .p-global-nav__arrow {
        transform: translateY(2px) rotate(-135deg);
    }
    
    /* ★重要: メガメニュー/ドロップダウンのPC用スタイルを完全リセット */
    .p-mega-menu,
    .p-dropdown-menu {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        min-height: 0;
        max-height: 0;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.02);
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: max-height 0.5s cubic-bezier(0.77, 0, 0.175, 1),
                    padding 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }
    
    /* hover動作を無効化(スマホではclick/tapで制御) */
    .p-global-nav__item--has-child:hover .p-mega-menu,
    .p-global-nav__item--has-child:hover .p-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        max-height: 0;
    }
    
    /* 展開クラスが付いた時だけ開く */
    .p-global-nav__item--has-child.is-expanded .p-mega-menu,
    .p-global-nav__item--has-child.is-expanded .p-dropdown-menu {
        max-height: 3000px;
        padding: 10px 0 20px;
    }
    
    /* メガメニュー内部のグリッドを縦積みに */
    .p-mega-menu__inner {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }
    
    .p-mega-menu__col {
        width: 100%;
        text-align: left;
    }
    
    .p-mega-menu__title {
        font-size: 15px;
        margin: 10px 0 8px;
    }
    
    .p-mega-menu__view-all {
        font-size: 13px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    
    .p-mega-menu__list,
    .p-mega-menu__list--grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        grid-template-columns: none;
        grid-template-rows: none;
    }
    
    .p-mega-menu__list a {
        font-size: 14px;
        padding: 6px 0;
    }
    
    /* ドロップダウン(採用情報)のスマホ調整 */
    .p-dropdown-menu__list {
        padding: 0 20px;
        margin-bottom: 15px;
    }
    
    .p-dropdown-menu__list a {
        font-size: 14px;
        padding: 6px 0;
    }
    
    .p-dropdown-menu__btn {
        margin: 0 auto;
    }
    
    /* スマホ用メニュー内アクションボタン */
    .p-global-nav__sp-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 400px;
        margin: 30px auto 40px;
        padding: 0 20px;
        box-sizing: border-box;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
    }
    
    .l-header__nav.is-open .p-global-nav__sp-actions {
        opacity: 1;
        transform: translateY(0);
    }
    
    .p-global-nav__sp-btn {
        display: block;
        width: 100%;
        padding: 16px;
        text-align: center;
        border-radius: 8px;
        text-decoration: none;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 700;
        font-size: 15px;
        color: #fff;
        box-sizing: border-box;
    }
    
    .p-global-nav__sp-btn--blue {
        background-color: var(--color-libero-blue);
    }
    
    .p-global-nav__sp-btn--red {
        background-color: var(--color-libero-red);
    }
    
    /* メニュー展開中はbodyスクロール止める */
    body.is-nav-open {
        overflow: hidden;
    }
}

/* ========================================================
   --- Page Background (About/Company 統合ページ全体) ---
   ======================================================== */

/* ページ全体のベース背景: #f9f9f9 + ドット背景を強制OFF */
.main-content:has(.p-about) {
    background-color: #ffffff;
    background-image: none;
    position: relative;
    overflow: hidden;
}

/* 親のbodyやmain-contentにドットが残る場合の保険 */
.main-content:has(.p-about),
.main-content:has(.p-about) .p-about,
.main-content:has(.p-about) .company-info {
    background-image: none;
}

/* 中央の白い縦ライン(PC/タブレット以上のみ) - p-about 用 */
.main-content:has(.p-about)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 1320px);
    height: 100%;
    background-color: #ffffff;
    z-index: 0;
    pointer-events: none;
}

.main-content:has(.p-about) > * {
    position: relative;
    z-index: 1;
}

/* ========================================================
   --- About Section (p-about) ---
   ======================================================== */
.p-about {
    position: relative;
    /* padding-bottom を 0 に、余白は inner 側で確保 */
    padding: clamp(40px, 5vw, 100px) 0 0;
    background-color: transparent;
    background-image: none;
}

.p-about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-image: url('img/Frame 137.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: clamp(16px, 5.5vw, 100px) clamp(16px, 5.5vw, 100px) 0 0;
    overflow: hidden;
    filter: none;
    -webkit-filter: none;
    z-index: 0;
    pointer-events: none;
}

.p-about__inner {
    position: relative;
    z-index: 1;
    width: min(88%, 1220px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.5vw, 26px);
    /* padding-bottom を増やして、ボタンとCTAの間の余白を確保 */
    padding: clamp(30px, 4vw, 70px) 0 clamp(60px, 8vw, 120px);
}

/* ========================================================
   --- About Card ---
   ======================================================== */
.p-about-card {
    background-color: #fff;
    border-radius: clamp(16px, 1.5vw, 30px);
    box-shadow: 0 0 20px rgba(51, 51, 51, 0.15);
    padding: clamp(25px, 2.6vw, 50px);
    display: flex;
    align-items: stretch;
    gap: clamp(25px, 3.6vw, 70px);
    min-height: clamp(240px, 16.7vw, 320px);
    box-sizing: border-box;
}

.p-about-card__text {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, 1vw, 20px);
}

.p-about-card__heading {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.5vw, 10px);
}

.p-about-card__label-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    height: clamp(24px, 1.8vw, 34px);
}

.p-about-card__label-icon {
    display: block;
    width: clamp(18px, 1.3vw, 25px);
    height: auto;
    aspect-ratio: 25 / 15;
    object-fit: contain;
    flex-shrink: 0;
}

.p-about-card__label {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.25vw, 24px);
    letter-spacing: 0.1em;
    color: var(--color-libero-red);
    line-height: 1;
}

.p-about-card__title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2.2vw, 39px);
    letter-spacing: 0.1em;
    color: #333;
    line-height: 1.3;
    margin: 0;
}

.p-about-card__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 0.83vw, 16px);
    letter-spacing: 0.1em;
    line-height: 1.7;
    color: #333;
    margin: 0;
}

.p-about-card__images {
    display: flex;
    gap: clamp(12px, 1vw, 20px);
    align-items: stretch;
    flex-shrink: 0;
}

.p-about-card__images--single {
    width: clamp(240px, 30vw, 572px);
}

.p-about-card__images--double {
    width: clamp(260px, 30vw, 572px);
}

.p-about-card__img {
    flex: 1 0 0;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: clamp(10px, 0.8vw, 16px);
    background: #f5f5f5;
}

.p-about-card__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-about__btn-area {
    display: flex;
    justify-content: center;
    margin-top: clamp(20px, 2.5vw, 50px);
}

/* ========================================================
   --- Company Info Section (会社概要) - 統合ページ用調整 ---
   ======================================================== */

/* about usページ内の会社概要: 上下余白を追加 */
.main-content:has(.p-about) .company-info {
    position: relative;
    padding-top: clamp(50px, 8vw, 100px);
    padding-bottom: clamp(100px, 15vw, 200px);
    background-color: transparent;
    background-image: none;
    z-index: 1;
}

/* 会社概要にも白縦ラインを追加(疑似要素) */
.main-content:has(.p-about) .company-info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 1320px);
    height: 100%;
    background-color: #ffffff;
    z-index: -1;
    pointer-events: none;
}

/* 会社概要の inner を z-index: 1 で手前に */
.main-content:has(.p-about) .company-info__inner {
    position: relative;
    z-index: 1;
}

/* ========================================================
   --- Tablet & Mobile (1024px以下) ---
   ======================================================== */
@media (max-width: 1024px) {
    /* 白い縦ラインを解除 → ページ全体を白背景に */
    .main-content:has(.p-about) {
        background-color: #ffffff;
    }
    
    .main-content:has(.p-about)::before {
        display: none;
    }
    
    .p-about::before {
        display: none;
    }
    
    .p-about__inner {
        width: min(92%, 1320px);
        padding: 0 0 clamp(40px, 6vw, 80px);
    }
    
    /* 会社概要の白ラインも解除、余白も調整 */
    .main-content:has(.p-about) .company-info::before {
        display: none;
    }
    
    .main-content:has(.p-about) .company-info {
        padding-top: clamp(40px, 6vw, 80px);
        padding-bottom: clamp(60px, 10vw, 120px);
    }
    
    .p-about-card {
        flex-direction: column;
        gap: clamp(16px, 3vw, 30px);
        padding: clamp(20px, 4vw, 40px);
    }
    
    .p-about-card__images--single,
    .p-about-card__images--double {
        width: 100%;
        aspect-ratio: 572 / 220;
    }
    
    .p-about-card__title {
        font-size: clamp(20px, 3.5vw, 32px);
    }
    
    .p-about-card__label {
        font-size: clamp(14px, 2vw, 20px);
    }
    
    .p-about-card__desc {
        font-size: clamp(13px, 1.6vw, 15px);
    }
}

/* ========================================================
   --- Mobile Only (600px以下) ---
   ======================================================== */
@media (max-width: 600px) {
    .p-about-card__images--double {
        aspect-ratio: auto;
    }
    
    .p-about-card__images--double .p-about-card__img {
        aspect-ratio: 276 / 220;
    }
    
    .p-about-card__title {
        font-size: 22px;
        letter-spacing: 0.05em;
    }
    
    .p-about-card__title br {
        display: none;
    }
}

/* ========================================================
   --- Product Filter Drawer (タブ式ドロワー) - パネル左固定+タブ右追従版 ---
   ======================================================== */
.product-filter-drawer {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 50;
    pointer-events: none;
    /* ★ドロワー全体の幅 = パネル幅(タブはこの右外側にはみ出す) */
    width: min(calc(100vw - clamp(90px, 7vw, 120px) - 20px), 1000px);
    /* ★閉じてる時は画面左外に隠す(タブだけ見える状態にするため) */
    transform: translate(-100%, -50%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 展開時: ドロワー全体を右にスライドイン */
.product-filter-drawer.is-open {
    transform: translate(0, -50%);
}

.product-filter-drawer.is-open .product-filter-drawer__tab {
    transform: translate(0, -50%);
}

/* パネル本体(ドロワー内で左固定) */
.product-filter-drawer__panel {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: clamp(25px, 3vw, 40px);
    pointer-events: auto;
    box-sizing: border-box;
}

/* 青いタブ(常にパネルの右外側にくっつく) */
.product-filter-drawer__tab {
    position: absolute;
    /* ★パネルの右端にくっつく */
    left: 100%;
    top: 50%;
    /* translateXのマイナス値で画像左端の透明余白を画面外へ逃がしギャップを消す */
    transform: translate(-4px, -50%);
    display: block;
    width: clamp(90px, 7vw, 120px);
    height: auto;
    aspect-ratio: 92 / 340;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 52;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.product-filter-drawer__tab img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- パネル内部のスタイル(既存のまま) --- */
.product-filter-drawer__form {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2vw, 30px);
    align-items: center;
}

.product-filter-drawer__section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.5vw, 20px);
    align-items: center;
}

.product-filter-drawer__heading {
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-filter-drawer__heading-icon {
    display: block;
    width: clamp(18px, 1.3vw, 22px);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    flex-shrink: 0;
}

.product-filter-drawer__heading-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1vw, 16px);
    letter-spacing: 0.05em;
    color: #333;
    margin: 0;
}

.product-filter-drawer__genres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1vw, 20px);
    width: min(100%, 500px);
    justify-items: stretch;
}

.product-filter-drawer__genre-btn {
    position: relative;
    cursor: pointer;
    width: 100%;
}

.product-filter-drawer__genre-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-filter-drawer__genre-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(38px, 3vw, 45px);
    padding: 0 clamp(12px, 1.2vw, 20px);
    background: #f6f6f6;
    border-radius: 5px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: clamp(13px, 0.9vw, 16px);
    color: #8e8e8e;
    letter-spacing: 0.1em;
    transition: background 0.3s ease, color 0.3s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.product-filter-drawer__genre-btn input[type="radio"]:checked + .product-filter-drawer__genre-inner {
    background: var(--color-libero-red);
    color: #fff;
}

.product-filter-drawer__divider {
    width: 100%;
    height: 1px;
    background: #ddd;
}

.product-filter-drawer__filters {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.5vw, 22px);
    padding: 0 clamp(10px, 2vw, 40px);
    box-sizing: border-box;
}

.product-filter-drawer__row {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 60px);
    width: 100%;
}

.product-filter-drawer__label {
    flex-shrink: 0;
    width: clamp(110px, 10vw, 150px);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 0.95vw, 15px);
    letter-spacing: 0.05em;
    color: #333;
}

.product-filter-drawer__options {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 0.8vw, 11px);
}

.product-filter-drawer__check {
    position: relative;
    cursor: pointer;
}

.product-filter-drawer__check input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-filter-drawer__check span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    background: #f6f6f6;
    border-radius: 5px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.9vw, 14px);
    color: #333;
    transition: background 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.product-filter-drawer__check input[type="radio"]:checked + span {
    background: var(--color-libero-red);
    color: #fff;
}

.product-filter-drawer__row-divider {
    width: 100%;
    height: 1px;
    background: #eee;
    position: relative;
}

.product-filter-drawer__row-divider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 7.5px;
    height: 7.5px;
    background: var(--color-libero-red);
}

.product-filter-drawer__submit {
    display: flex;
    justify-content: center;
    margin-top: clamp(10px, 1vw, 15px);
}

.product-filter-drawer__submit button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: clamp(180px, 15vw, 210px);
    height: clamp(36px, 2.8vw, 42px);
    background: var(--color-libero-red);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1vw, 18px);
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.product-filter-drawer__submit button:hover {
    background: #a8171f;
    transform: translateY(-2px);
}

.product-filter-drawer__submit button .material-icons {
    font-size: 18px;
}

/* ========================================================
   --- Product Grid 4列化 ---
   ======================================================== */
.p-product-grid--col-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(15px, 1.5vw, 24px);
}

@media (max-width: 1200px) {
    .p-product-grid--col-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .p-product-grid--col-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .p-product-grid--col-4 {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   --- Tablet/Mobile (768px以下) ---
   ======================================================== */
@media (max-width: 768px) {
    .product-filter-drawer {
        width: calc(100vw - clamp(50px, 12vw, 70px) - 10px);
    }
    
    .product-filter-drawer__tab {
        width: clamp(50px, 12vw, 70px);
    }
    
    .product-filter-drawer__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .product-filter-drawer__label {
        width: auto;
    }
}

/* ========================================================
   --- FAQ Page (page-faq.php) ---
   ======================================================== */

/* ページ全体のベース背景(about usと同じトンマナ) */
.main-content:has(.p-faq) {
    background-color: #f9f9f9;
    background-image: none;
    position: relative;
    overflow: hidden;
}

.main-content:has(.p-faq),
.main-content:has(.p-faq) .p-faq {
    background-image: none;
}

/* 中央の白い縦ライン(PC/タブレット以上のみ) */
.main-content:has(.p-faq)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 1320px);
    height: 100%;
    background-color: #ffffff;
    z-index: 0;
    pointer-events: none;
}

.main-content:has(.p-faq) > * {
    position: relative;
    z-index: 1;
}

/* ========================================================
   --- FAQ Section ---
   ======================================================== */
.p-faq {
    position: relative;
    padding: clamp(40px, 6vw, 100px) 0 clamp(60px, 10vw, 150px);
    background-color: transparent;
}

.p-faq__inner {
    position: relative;
    z-index: 1;
    width: min(88%, 1100px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4vw, 60px);
}

/* ---- Intro ---- */
.p-faq__intro {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 20px);
    padding-bottom: clamp(20px, 3vw, 40px);
    border-bottom: 1px solid #eee;
}

.p-faq__intro-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.3vw, 22px);
    color: #333;
    margin: 0;
    letter-spacing: 0.05em;
}

.p-faq__intro-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 0.9vw, 15px);
    line-height: 1.9;
    color: #555;
    margin: 0;
    letter-spacing: 0.05em;
}

/* ---- FAQ List ---- */
.p-faq__list {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.5vw, 20px);
}

/* ---- FAQ Item ---- */
.p-faq-item {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: clamp(14px, 1.5vw, 20px);
}

/* Question (クリック可能ボタン) */
.p-faq-item__question {
    display: flex;
    align-items: center;
    gap: clamp(15px, 2vw, 30px);
    width: 100%;
    padding: clamp(12px, 1.5vw, 20px) clamp(16px, 2vw, 30px);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.p-faq-item__question:hover {
    background-color: rgba(206, 28, 38, 0.03);
}

/* Q/A マーク(枠線付き正方形にアルファベット) */
.p-faq-item__mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 3.5vw, 60px);
    height: clamp(44px, 3.5vw, 60px);
    border: 1px dotted #999;
    border-radius: 3px;
    font-family: 'Poppins', 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: clamp(20px, 1.8vw, 28px);
    color: #333;
    font-style: italic;
    background: transparent;
    box-sizing: border-box;
}

.p-faq-item__mark--q {
    /* Qマークの装飾(必要なら差別化) */
}

.p-faq-item__mark--a {
    /* Aマークの装飾 */
}

/* 質問テキスト */
.p-faq-item__question .p-faq-item__text {
    flex: 1;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 1vw, 16px);
    color: #333;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin: 0;
}

/* トグルアイコン(+/-) */
.p-faq-item__toggle {
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
}

.p-faq-item__toggle::before,
.p-faq-item__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #333;
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.p-faq-item__toggle::before {
    width: 18px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.p-faq-item__toggle::after {
    width: 2px;
    height: 18px;
    transform: translate(-50%, -50%);
}

/* 展開時: + → - に変形 */
.p-faq-item.is-open .p-faq-item__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Answer (アコーディオン部分) */
.p-faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.p-faq-item__answer-inner {
    display: flex;
    align-items: flex-start;
    gap: clamp(15px, 2vw, 30px);
    padding: clamp(15px, 2vw, 25px) clamp(16px, 2vw, 30px) clamp(5px, 1vw, 10px);
}

.p-faq-item__answer-inner .p-faq-item__text {
    flex: 1;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 0.95vw, 15px);
    color: #555;
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin: 0;
    padding-top: clamp(8px, 1vw, 15px);
}

/* ========================================================
   --- Tablet & Mobile (1024px以下) ---
   ======================================================== */
@media (max-width: 1024px) {
    /* 白い縦ラインを解除 */
    .main-content:has(.p-faq) {
        background-color: #ffffff;
    }
    
    .main-content:has(.p-faq)::before {
        display: none;
    }
    
    .p-faq__inner {
        width: min(92%, 1100px);
    }
    
    .p-faq-item__question {
        padding: 14px 10px;
        gap: 14px;
    }
    
    .p-faq-item__answer-inner {
        padding: 15px 10px 5px;
        gap: 14px;
    }
}

/* ========================================================
   --- Mobile Only (600px以下) ---
   ======================================================== */
@media (max-width: 600px) {
    .p-faq-item__mark {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .p-faq-item__question .p-faq-item__text {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .p-faq-item__answer-inner .p-faq-item__text {
        font-size: 13px;
        line-height: 1.8;
    }
    
    .p-faq-item__toggle {
        width: 14px;
        height: 14px;
    }
    
    .p-faq-item__toggle::before {
        width: 14px;
    }
    
    .p-faq-item__toggle::after {
        height: 14px;
    }
}

/* ========================================================
   --- Page - Equipment (設備一覧) ---
   ======================================================== */

/* グレー背景の丸角セクション */
.main-content:has(.p-equipment),
.main-content:has(.p-product-unified),
.main-content:has(.p-archive-unified),
.main-content:has(.p-single-product),
.main-content:has(.p-contact-body) {
    background-color: #ffffff;
    background-image: none;
}

.p-equipment {
    background-color: #f6f6f6;
    border-radius: 60px 60px 0 0;
    margin-top: -20px;
    padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 12vw, 160px);
}

.p-equipment__inner {
    width: min(88%, 1320px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(60px, 8vw, 100px);
}

/* カテゴリブロック */
.p-equipment__category {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4vw, 50px);
}

.p-equipment__category-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.5vw, 32px);
    color: #333;
    margin: 0;
    letter-spacing: 0.05em;
    text-align: center;
}

/* 3列グリッド */
.p-equipment__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 30px);
}

/* カード */
.p-equipment-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(51, 51, 51, 0.05);
    display: flex;
    flex-direction: column;
}

/* 画像エリア */
.p-equipment-card__img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
}

.p-equipment-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.p-equipment-card:hover .p-equipment-card__img-wrap img {
    transform: scale(1.04);
}

/* テキストエリア */
.p-equipment-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* 機器名（赤ドット + テキスト） */
.p-equipment-card__name-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-equipment-card__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-primary);
    flex-shrink: 0;
}

.p-equipment-card__name {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 1.2vw, 20px);
    color: #333;
    margin: 0;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* 説明文 */
.p-equipment-card__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.85vw, 14px);
    color: #333;
    line-height: 1.8;
    margin: 0;
    letter-spacing: 0.04em;
}

/* ========================================================
   --- Equipment: Tablet (1024px以下) ---
   ======================================================== */
@media (max-width: 1024px) {
    .p-equipment {
        border-radius: 40px 40px 0 0;
    }

    .p-equipment__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================================
   --- Equipment: Mobile (600px以下) ---
   ======================================================== */
@media (max-width: 600px) {
    .p-equipment {
        border-radius: 24px 24px 0 0;
        padding: 50px 0 80px;
    }

    .p-equipment__grid {
        grid-template-columns: 1fr;
    }

    .p-equipment-card__name {
        white-space: normal;
    }
}