/*
Theme Name: a-proud Original Theme
Author: 鈴木
Description: a-proud株式会社 コーポレートサイト用オリジナルテーマ
Version: 1.0
*/

/* =============================================
   Reset & Base
   ============================================= */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main, section, .l-cta {
    flex: 1;
}

/* 表示切り替え用共通クラス */
.u-display--sp { display: none !important; }
.u-display--pc { display: block !important; }

/* =============================================
   Header Dropdown Menu (PC) - 改修版
   ============================================= */
.l-header__nav-list .has-child {
    position: relative;
    padding-bottom: 20px; /* メニューからマウスが外れにくくするための透明な判定エリア */
    margin-bottom: -20px;
}

/* 1. ふわっと表示させるための魔法（display: none; をやめる） */
.l-header__nav-list .sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 120%; /* 少し下からフワッと上がる演出用 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* 影をもっと柔らかく今っぽく */
    border-top: 3px solid #1C245E; /* ブランドカラーのアクセントライン */
    border-radius: 0 0 4px 4px; /* 下だけ少し丸く */
    padding: 10px 0;
    margin: 0;
    list-style: none;
    min-width: 220px;
    z-index: 1000;
    transition: all 0.3s ease; /* アニメーションの設定 */
}

/* 2. ホバーした時の状態 */
.l-header__nav-list .has-child:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    top: 100%; /* 元の位置に戻る */
}

/* 3. メニューの文字デザイン */
.l-header__nav-list .sub-menu li a {
    padding: 16px 24px;
    display: block;
    font-size: 13px; /* 少し上品なサイズに */
    color: #4f4f4f;
    text-align: left; /* 中央より左揃えの方が文字が読みやすいです */
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* 4. メニューの中身をホバーした時 */
.l-header__nav-list .sub-menu li a:hover {
    background-color: #f9f8f6; /* フッターと同じ優しい背景色 */
    color: #1C245E;
    padding-left: 28px; /* ホバー時に少し右に動く遊び心 */
    opacity: 1;
}
/* =============================================
   Component: Button (共通ボタン)
   ============================================= */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.c-btn--primary {
    background-color: #1C245E;
    color: #fff;
    padding: 18px 30px;
    font-size: 14px;
    letter-spacing: 0.1em;
}
.c-btn--primary:hover { opacity: 0.8; }

.c-btn--secondary {
    background-color: #f2f2f2;
    color: #4f4f4f;
    padding: 15px 30px;
    font-size: 14px;
}
.c-btn--secondary:hover { background-color: #e0e0e0; }

.c-btn--outline {
    background-color: #fff;
    border: 1px solid #1C245E;
    color: #1C245E;
    padding: 15px 30px;
    font-size: 14px;
}
.c-btn--outline:hover {
    background-color: #1C245E;
    color: #fff;
}

/* =============================================
   セクション間の縦線（繋ぎ目）
   ============================================= */
.c-vertical-line {
    width: 1px;
    height: 100px; /* 線の長さ（お好みで調整） */
    background-color: rgba(143, 184, 217, 0.3);
    margin: 0 auto; 
    /* ★位置の調整（上に引っ張り上げる） */
    /* 上の200pxの余白の真ん中あたりに来るように、マイナス指定で引き上げます */
    margin-top: -150px; 
    margin-bottom: 80px; /* 次のセクションとの距離 */
    position: relative;
    z-index: 10; /* 他の要素の下に隠れないように */
    overflow: hidden;
}
.c-vertical-line::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    /* 上から下へ、透明→濃い金→透明のグラデーション */
    background: linear-gradient(to bottom, transparent, #8FB8D9, transparent); 
    animation: flowline 3s infinite;
}

@keyframes flowline {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* =============================================
   共通のインナー幅
   ============================================= */
.l-inner {
    width: 100%;
    max-width: 1180px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 4%;
}

/* =============================================
   Layout: Header
   ============================================= */
header {
    font-family: "Shippori Mincho", serif;
}

.l-header {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.l-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    width: 100%;
    max-width: 1262px;
    margin-left: auto !important; 
    margin-right: 0 !important;
    padding: 0 40px;
    box-sizing: border-box;
}

.l-header__logo img {
    width: 150px;
    height: auto;
    display: block;
}

.l-header__nav {
    display: flex;
    align-items: center;
}

.l-header__nav-list {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.l-header__nav-list a {
    text-decoration: none;
    color: #4f4f4f;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.l-header__nav-list a:hover {
    color: #1a2e5e;
    opacity: 0.7;
}

.l-header__opner {
    cursor: pointer;
}

/* =============================================
   Layout: Page Header (下層ページ共通見出し)
   ============================================= */
.l-page-header {
    width: 100%;
    height: 180px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-top: 80px;
    margin-bottom: 60px !important;
}

.l-page-header__eng {
    font-family: "Shippori Mincho", serif;
    font-size: 100px;
    font-weight: 700;
    color: rgba(28, 36, 94, 0.05);
    letter-spacing: 0.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
}

.l-page-header__jpn {
    font-family: "Shippori Mincho", serif;
    font-size: 40px;
    font-weight: 600;
    color: #1C245E;
    letter-spacing: 0.15em;
    position: relative;
    z-index: 2;
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
    line-height: 1 !important;
}
.page-id-25 .l-page-header {
    margin-top: 80px !important; 
}

.page-id-25 .l-page-header__jpn {
    top: 0 !important; 
}
/* =============================================
   Main Visual (メインビジュアル)
   ============================================= */
.p-mv {
    width: 100%;
    background-color: #fff;
}

.p-mv__inner {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.p-mv__content {
    position: relative;
    width: 100%;
    max-width: 1262px;
    margin-left: auto;
    margin-right: 0;
}

.p-mv__image {
    width: 100%;
    height: 900px;
    overflow: hidden;
}

.p-mv__image picture,
.p-mv__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-mv__title {
    position: absolute;
    top: 120px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1160px;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 60px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    line-height: 1;
    z-index: 2;
}
/* =============================================
   Slogan Section (スローガン) - PC / SP 完全統合版
   ============================================= */
.p-slogan {
    padding-top: 0;
    padding-bottom: 200px;
    background-color: #fff;
    width: 100%;
}

.p-slogan__inner {
    width: 100%;
    max-width: 1262px;
    margin-left: auto !important; /* 画像と同じ右寄せの基準を作る */
    margin-right: 0 !important;
    position: relative;
    padding: 0;
}

.p-slogan__content {
    position: relative;
    min-height: 850px;
    width: 100%;
}

/* --- 縦書きスローガン共通 (PC) --- */

.p-slogan__catch {
    position: absolute; /* ★それぞれを個別に絶対配置に戻す */
    writing-mode: vertical-rl; /* ★縦書きの魔法をここに戻す！ */
    font-family: "Shippori Mincho", serif;
    font-size: 40px;
    font-weight: 700;
    color: #1C245E;
    line-height: 1;
    letter-spacing: 0.7em;
    margin: 0;
    z-index: 2;
    white-space: nowrap; /* ★どんなに画面が伸びても、絶対に2行に割れないようにする魔法 */
}

/* PC：誠実な技術で、 (右側) */
.p-slogan__catch--line1 {
    top: 171px;
    left: 10%; /* 指定通りの数値（揺るぎない、より右に来る） */
}

/* PC：揺るぎない信頼を築く (左側) */
.p-slogan__catch--line2 {
    top: 311px;
    left: 5%; /* 指定通りの数値（誠実な、より左に来る） */
}

/* --- テキストグループ (PC) --- */
.p-slogan__text-group {
    /* 縦書き文字（左から約300pxまで）を避けるため、十分な左マージンをとる */
    margin-left: 25%; 
    padding-top: 171px; /* 誠実な技術で、の頭と揃える */
    width: calc(100% - 25%); /* 100%からマージン分を引いて幅を最大化 */
    max-width: 861px;
    box-sizing: border-box;
}

.p-slogan__lead {
    font-family: "Noto Serif JP", serif;
    font-size: 30px;
    font-weight:600;
    line-height: 2.0;
    letter-spacing: 0.08em;
    color: rgba(28, 36, 94, 0.8);
    margin-bottom: 60px;
    white-space: nowrap; /* ★「素直に学び、〜」を強制的に1行にする */
}

.p-slogan__text {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 2.0;
    letter-spacing: 0.08em;
    color: rgba(28, 36, 94, 0.8);
    margin: 0;
    word-break: break-all; /* どんなに長い文字も端っこで折る */
    overflow-wrap: break-word;
}

.p-slogan__link-wrapper {
    text-align: right;
    margin-top: 80px;
}

.p-slogan__link {
    display: inline-flex;
    align-items: center;
    flex-direction: row; /* 横並び */
    gap: 15px; /* テキストと矢印の距離 */
    text-decoration: none;
    font-family: "Noto Serif JP", serif; /* Noto Serif JP に変更 */
    font-size: 20px;
    font-weight: 500; /* Medium */
    line-height: 2.2; /* 行間 220% */
    letter-spacing: 0.2em; /* 文字間隔 20% */
    color: rgba(200, 169, 106, 0.8); /* #C8A96A の不透明度 80% */
    transition: opacity 0.3s ease;
}

.p-slogan__link:hover {
    opacity: 0.7;
}

.p-slogan__link-arrow {
    width: 150px; /* 矢印の長さを100pxに固定 */
    height: auto;
    display: flex;
    align-items: center;
}

.p-slogan__link-arrow img {
    width: 100%;
    height: auto;
}

/* =============================================
   Guide Section (事業・採用誘導)
   ============================================= */
.p-guide {
    padding: 120px 0;
    background-color: #fff;
}

.p-guide__item {
    margin-bottom: 140px; /* アイテム間の距離 */
}

.p-guide__item:last-child {
    margin-bottom: 0;
}

/* タイトル (PC・SP共通) */
.p-guide__title {
    font-family: "Shippori Mincho", serif;
    font-size: 32px;
    font-weight: 700;
    color: #1C245E;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

/* タイトルの下の線 (PCのみ) */
.p-guide__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 600px; /* 線の長さ */
    height: 1px;
    background-color: rgba(28, 36, 94, 0.3);
}

/* Webマーケティング(reverse)の線は右から出す */
.p-guide__item--reverse .p-guide__title {
    text-align: right;
}
.p-guide__item--reverse .p-guide__title::after {
    left: auto;
    right: 0;
}

/* Webマーケティング(reverse)のコンテンツを右に寄せる */
.p-guide__item--reverse .p-guide__content {
    margin-left: auto;
}

.p-guide__content {
    max-width: 800px;
}

.p-guide__text {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    line-height: 2.0;
    letter-spacing: 0.05em;
    color: #4f4f4f;
    margin-bottom: 40px;
}
/* --- ★ここに新規追加します --- */
/* リンクエリア全体 (PC・共通は左寄せ) */
.p-guide__link-wrapper {
    display: flex;
    justify-content: flex-start; /* 基本は左寄せ */
    width: 100%;
    margin-top: 40px; 
}
/* Webマーケティング(reverse)の時だけ右寄せにする */
.p-guide__item--reverse .p-guide__link-wrapper {
    justify-content: flex-end; /* これだけ右寄せ */
}
/* PC版（共通部分）: 1行で綺麗に見せるためのリセット */
.p-guide__link-text-top {
    display: inline; /* PCではただの文字として扱う */
    margin-right: 0;
}
/* =============================================
   Bottom Photo Section (フッター直前写真)
   ============================================= */
.p-bottom-photo {
    padding: 140px 0;
    background-color: #fff;
}
/* --- 写真と背景をまとめる箱 --- */
.p-bottom-photo__container {
    position: relative;
    max-width: 1000px; /* 写真の横幅 */
    margin: 0 auto;
    /* ボックスがはみ出す分の余白を確保 */
    padding: 30px 30px 0 0; 
}

/* --- 背後のカラーボックス（案1） --- */
.p-bottom-photo__bg {
    position: absolute;
    /* 右上に配置 */
    top: 0;
    right: 0;
    /* 写真の約80%程度のサイズにすることで「抜け感」を出す */
    width: 80%;
    height: 80%;
    /* ゴールドをごく薄く（5〜8%）敷くのが上品です */
    background-color: rgba(200, 169, 106, 0.08); 
    z-index: 1;
}

.p-bottom-photo__image {
    position: relative;
    z-index: 2;
    width: 100%;
    border: 1px solid #c8a96a;
    line-height: 0;
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.03);
}

.p-bottom-photo__image img {
    /*  固定高さをやめて、写真の比率を正しく見せる */
    width: 100%;
    height: auto; 
    vertical-align: bottom;
}

/* =============================================
   Layout: CTA (About a-proud)
   ============================================= */
.l-cta {
    width: 100%;
    background-color: #fff;
    padding-top: 80px;
    margin-bottom: 205px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l-cta__inner {
    width: 95%;
    max-width: 1180px;
    min-height: auto;
    background-color: #F5F5F7;
    margin: 0 auto; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    padding: 80px 4%;
}

.l-cta__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 32px;
    letter-spacing: 0.1em;
    color: #1a2e5e;
    margin-bottom: 30px;
    text-align: center;
}

.l-cta__text {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.8;
    color: #000;
    margin-bottom: 0;
    text-align: left;
    max-width: 1000px;
}

/* ボタンの配置エリア */
.l-cta__buttons {
    display: flex;
    justify-content: center;
    /* gap: 200px; */
    margin-top: 50px;
}
/* =============================================
   ボタン本体（共通ベース設定）
============================================= */

/* ボタン本体 */
.l-cta .c-btn {
    position: relative;
    width: 380px;
    max-width: 100%;
    height: 64px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    overflow: hidden;
    transition: color 0.4s ease, background-color 0.4s ease;
    border: 1px solid #1a2e5e;
    opacity: 1 !important;
    font-size: 18px;
    letter-spacing: 0.15em;
    font-weight: 500;
}

/* 日本語テキスト */
.l-cta .c-btn span {
    display: block;
    font-family: "Shippori Mincho", serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-top: 8px;
    color: inherit; /* 親の文字色変更に合わせる */
    transition: color 0.4s ease; /* 日本語テキストの文字色反転アニメーション */
}

/* 斜めアニメーションの土台（共通） */
.l-cta .c-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -110%; /* ★最初はボタンの左側へ完全に追い出す */
    width: 120%;  /* 斜めの切れ味を出すために幅を広く */
    height: 100%;
    transform: skewX(-45deg); /* 斜めカット */
    /* cubic-bezierで「スッと入ってピタッと止まる」動きに */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -1;
}

/* 共通ホバーアクション（浮き上がりとスライド） */
.l-cta .c-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.l-cta .c-btn:hover::before {
    /* ★左から右へ、ボタンを完全に追い越すくらいスライドさせる */
    transform: translateX(105%) skewX(-45deg); 
}
/* =============================================
   1. Primary（CONTACT用：ネイビー塗り）
============================================= */
.l-cta .c-btn--primary {
    background-color: #1C245E;
    color: #fff;
}
.l-cta .c-btn--primary::before {
    background-color: #fff
}
/* ホバー時は文字をネイビーに反転 */
.l-cta .c-btn--primary:hover {
    color: #1a2e5e !important;
}
.l-cta .c-btn--primary:hover span {
    color: #1a2e5e !important;
}
/* =============================================
   2. Secondary（RECRUIT用：白抜き）
============================================= */
.l-cta .c-btn--secondary {
    background-color: #fff;
    color: #1a2e5e;
}
.l-cta .c-btn--secondary::before {
    background-color: #1a2e5e; /* ホバーでネイビーの波がくる */
}
/* ホバー時は文字を白に反転 */
.l-cta .c-btn--secondary:hover {
    color: #fff !important;
}
.l-cta .c-btn--secondary:hover span {
    color: #fff !important;
}

/* =============================================
   スクロールダウンボタン
============================================= */

    /* --- スクロールダウン本体 --- */
    .p-scroll-down {
        position: fixed;
        left: 40px;
        top: 50%;
        transform: translateY(-50%);     
        z-index: 9999;
        opacity: 0;      /* 初期状態は隠す */
        visibility: hidden;
        transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
    }

    /* スクロールした時に付与するクラス */
    .p-scroll-down.is-show {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%);
    }

    /* 縦書きの「SCROLL」テキスト */
    .p-scroll-down__text {
        display: block;
        font-family: 'Inter', sans-serif; /* 英語フォント */
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.2em;
        color: #C8A96A; /* a-proudゴールド */
        writing-mode: vertical-rl; /* 縦書き設定 */
        margin-bottom: 15px; /* 線との間隔 */
    }

    /* 垂直線（ベース：薄いゴールドのグラデーション） */
    .p-scroll-down__line {
        position: relative;
        width: 1px;
        height: 100px; /* 線の長さ */
        /* 上から下へ、ゴールドが消えていくグラデーション */
        background: linear-gradient(to bottom, #C8A96A, rgba(200, 169, 106, 0));
        margin: 0 auto;
        overflow: hidden;
    }

    /* 線の中を光が走るようなアニメーション */
    .p-scroll-down__line::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background-color: #C8A96A; /* 動く光の色 */
        animation: scroll-line-gold 2.5s cubic-bezier(1, 0, 0, 1) infinite;
    }

    @keyframes scroll-line-gold {
        0% { transform: scaleY(0); transform-origin: top; }
        50% { transform: scaleY(1); transform-origin: top; }
        51% { transform: scaleY(1); transform-origin: bottom; }
        100% { transform: scaleY(0); transform-origin: bottom; }
    }

/* =============================================
   Layout: Footer
   ============================================= */
.l-footer {
    width: 100%;
    background-color: #F9F8F6;
    margin-top: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.l-footer__inner {
    display: none;
}

.l-footer__bottom {
    width: 100%;
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.l-footer__copyright {
    font-size: 10px;
    color: #4f4f4f;
    margin: 0;
}
/* 1. リストの黒丸を消し、横並びにする準備 */
.l-footer__nav-list {
    list-style: none; /* 黒丸を消す */
    margin: 0;
    padding: 0;
    display: flex;
    gap: 40px;
}

/* 2. 親メニュー（事業内容）の設定 */
.l-footer__nav-list .menu-item-has-children,
.l-footer__nav-list .has-child {
    position: relative; /* 子メニューの基準点にする */
    cursor: pointer;
}

/* 3. 子メニュー（最初は隠して、少し下に待機させる） */
.l-footer__nav-list .sub-menu {
    list-style: none; /* 子メニューの丸も消す */
    margin: 0;
    padding: 10px 0;
    position: absolute;
    bottom: 80%; /* 親メニューより少し下の位置に隠す */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.08); /* 上方向への影 */
    border-bottom: 3px solid #1C245E; /* 下側にブランドカラーの線 */
    border-radius: 4px 4px 0 0;
    z-index: 100;
    
    /* アニメーション：最初は透明 */
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

/* 4. マウスを乗せた時（上に向かってフワッと表示） */
.l-footer__nav-list .menu-item-has-children:hover .sub-menu,
.l-footer__nav-list .has-child:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    bottom: 100%; /* 親メニューの真上の位置に移動 */
}

/* 5. 子メニュー内の文字デザイン */
.l-footer__nav-list .sub-menu li a {
    display: block;
    padding: 12px 20px;
    color: #4f4f4f;
    font-size: 13px;
    text-decoration: none;
    text-align: left;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* 6. 子メニュー内をホバーした時 */
.l-footer__nav-list .sub-menu li a:hover {
    background-color: #f9f8f6;
    color: #1C245E;
    padding-left: 25px; /* 少し右にずれる遊び心 */
}


/* =============================================
   Page: Company (会社情報ページ)
   ============================================= */
.p-company {
    width: 100%;
    background-color: #fff;
}

/* --- メインビジュアル --- */
.p-company__mv {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* コンテンツを右に寄せる */
}

.p-company__mv-image {
    width: 100%;
    max-width: 1262px; /* トップページと同じ基準の幅 */
    height: 900px; /* トップページと同じ高さ（カンプに合わせて調整してください） */
    margin: 0;
}

.p-company__mv-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が歪まないように枠に合わせてトリミング */
    display: block;
}
.p-message {
    padding-top: 160px; /* カンプの余白に合わせて調整してください */
    padding-bottom: 240px;
    width: 100%;
    max-width: 1000px; /* 線の長さに合わせて全体の幅を制限 */
    margin: 0 auto;
}

/* --- ヘッダー部分（代表メッセージと線） --- */
.p-message__header {
    position: relative;
    text-align: right; /* 「代表メッセージ」を右寄せ */
    margin-bottom: 100px; /* 下のタイトルとの距離 */
}

.p-message__title {
    font-family: "Shippori Mincho", serif;
    font-size: 30px;
    font-weight: 700; /* Bold */
    color: #1C245E;
    letter-spacing: 0.2em; /* 文字間隔 20% */
    margin: 0;
    padding-bottom: 40px;
    margin-right: -0.2em;
}

/* 1000pxの線を描画 */
.p-message__header::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0; /* 右端から伸ばす */
    width: 1000px; 
    height: 1px;
    background-color: rgba(0, 0, 0, 0.6); /* #000000 の不透明度 60% */
}

/* --- コンテンツ部分（キャッチ、テキスト、署名） --- */
.p-message__content {
    /* カンプを見ると、左側に少し余白があるためマージンで押し出します */
    margin-left: 20%; 
}

.p-message__catchphrase {
    text-align: right;
    padding-right: 30px;
    font-family: "Noto Serif JP", serif;
    font-size: 40px;
    font-weight: 700; /* Bold */
    color: #1C245E;
    letter-spacing: 0.25em; /* 文字間隔 25% */
    line-height: 2.0; /* 行間 200% */
    margin-bottom: 100px; /* テキストとの距離 */
}
.p-message__text-box {
    margin-bottom: 80px;
}

.p-message__text {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 500; /* Medium */
    color: #1C245E;
    letter-spacing: 0.08em; /* 文字間隔 8% */
    line-height: 2.0; /* 行間 200% */
    margin-bottom: 0 !important;
}

.p-message__text:last-of-type {
    margin-bottom: 0;
}

/* --- 署名部分 --- */
.p-message__signature {
    text-align: right; /* 右寄せ */
    width: 100%;
}
/* ★追加：役職と名前をまとめる中身の箱 */
.p-message__signature-inner {
    display: inline-block; 
    text-align: right;  
}

.p-message__position {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 400; /* Regular */
    color: #1C245E;
    letter-spacing: 0.05em; /* 文字間隔 5% */
    margin-right: -0.15em;
    margin-bottom: 10px;
}

.p-message__name {
    font-family: "Noto Serif JP", serif;
    font-size: 40px; 
    font-weight: 700; /* Bold */
    color: #1C245E;
    letter-spacing: 0.1em; /* 文字間隔 10% */
    margin: 0;
    margin-right: -0.35em;
    line-height: 1.0; /* 行間 200% */
}
/* =============================================
   Section: Profile (会社概要)
   ============================================= */
.p-profile {
    padding-bottom: 140px;
}

.p-profile__header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    padding-top: 40px;
}

.p-profile__title {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #1C245E;
}

.p-profile__header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
}

/* --- テーブル（PC） --- */
.p-profile__list {
    width: 100%;
    border-top: 1px solid #E0E0E0;
    border-left: 1px solid #E0E0E0;
    max-width: 800px; 
    margin: 0 auto;
}

.p-profile__row {
    display: flex; /* 横並びにする */
    border-bottom: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
}

.p-profile__row dt {
    width: 22%;
    background-color: #F2F2F2; /* 左側の薄グレー */
    padding: 18px 25px;
    font-family: "Noto Serif JP", serif;
    font-size: 15px;
    font-weight: 500;
    color: #1C245E;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-profile__row dd {
    width: 78%;
    padding: 18px 30px;
    margin: 0;
    background-color: #fff;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    line-height: 1.8;
    color: #1C245E;
}

/* 事業内容の中のリスト */
.p-profile__sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.p-profile__sub-list ul {
    list-style: none;
    padding-left: 1.5em;
}

/* =============================================
   Section: Access (マップ)
   ============================================= */
.p-access {
    padding-bottom: 140px;
    text-align: center;
}

.p-access__header {
    margin-bottom: 60px;
}

.p-access__title {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #1C245E;
}

.p-access__map {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    line-height: 0;
    border: 1px solid #C8A96A;
    box-sizing: border-box;
}

.p-access__map iframe {
    width: 100%;
    height: 450px;
    vertical-align: bottom;
    /* 地図を白黒っぽくして、少しコントラストを上げる魔法 */
    filter: grayscale(100%) contrast(0.8) brightness(1.1);
}

.p-access__info {
    margin-top: 30px;
    font-family: "Noto Serif JP", serif;
    color: #1C245E;
}

.p-access__address {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.p-access__station {
    font-size: 14px;
    opacity: 0.8;
}

/* =============================================
   Page: SES (SES事業ページ)
   ============================================= */
.p-ses {
    width: 100%;
    background-color: #fff;
    padding-bottom: 120px; 
}

/* --- メインビジュアル --- */
.p-ses__mv {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* コンテンツを右に寄せる */
}

.p-ses__mv-image {
    width: 100%;
    max-width: 1262px; /* トップページと同じ基準の幅 */
    height: 900px; /* トップページと同じ高さ（カンプに合わせて調整してください） */
    margin: 0;
}

.p-ses__mv-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が歪まないように枠に合わせてトリミング */
    display: block;
}
/* --- 事業概要 --- */
.p-ses-overview {
    width: 100%;
    padding-top: 160px; /* メインビジュアルからの余白（カンプに合わせて調整） */
    padding-bottom: 240px;
}

/* ヘッダー部分（見出しと線） */
.p-ses-overview__header {
    position: relative;
    text-align: right; /* テキストを右寄せ */
    padding-right: 210px; /* 右端から210px */
    margin-bottom: 174px; /* 線から下のテキストまでの距離 */
}

.p-ses-overview__title {
    font-family: "Shippori Mincho", serif; /* 💡Shippori Mincho を指定 */
    font-size: 30px;
    font-weight: 700; /* Bold */
    color: #1C245E;
    letter-spacing: 0.2em; /* 20% */
    margin: 0;
    padding-bottom: 40px; /* タイトルと線の間の距離（目視で調整してください） */
    margin-right: -0.2em; /* 右端の文字間隔の余白を打ち消してピッタリ揃える */
}

/* 1000pxの線を描画 */
.p-ses-overview__header::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 210px; /* 右端から210pxの位置からスタート */
    width: 1000px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.6); /* 黒の60% */
}

/* コンテンツ部分（テキスト） */
.p-ses-overview__content {
    display: flex;
    justify-content: flex-end; /* ブロック全体を右寄せ */
    padding-right: 210px; /* 右端から210px */
}

.p-ses-overview__text {
    font-family: "Noto Serif JP", serif;
    font-size: 28px;
    font-weight: 500; /* Medium */
    color: #1C245E;
    letter-spacing: 0.1em; /* 10% */
    line-height: 2.0; /* 200% */
    text-align: left; /* 中身のテキスト自体は左揃え */
    margin: 0;
}

/* --- Reason (選ばれる理由) --- */
.p-ses-reason {
    width: 100%;
    padding-bottom: 300px; /* カンプに合わせて下余白を調整 */
}

/* --- タイトル部分 --- */
.p-ses-reason__header {
    position: relative;
    text-align: center;
    margin-bottom: 150px; /* ご指定のタイトル下の余白 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-ses-reason__eng {
    font-family: "Shippori Mincho", serif;
    font-size: 100px;
    font-weight: 700; /* Bold */
    color: rgba(200, 169, 106, 0.2); /* #c8a96a 20% */
    letter-spacing: 0.2em; /* 20% */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.p-ses-reason__jpn {
    font-family: "Noto Serif JP", serif;
    font-size: 40px;
    font-weight: 700; /* Bold */
    line-height: 1.8; /* 180% */
    letter-spacing: 0.2em; /* 20% */
    color: rgba(28, 36, 94, 0.7); /* #1c245e 70% */
    position: relative;
    z-index: 2;
    margin: 0;
}

/* --- カードエリア全体 --- */
.p-ses-reason__cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 54px; /* ご指定のカード間の余白 */
    width: 100%;
    max-width: 1262px; /* 画面幅に合わせて中央寄せ */
    margin: 0 auto;
}

/* --- 各カードのスタイル --- */
.p-ses-reason__card {
    width: 314px; /* ご指定の幅 */
    /* height: 528px; ご指定の高さ */
    min-height: 400px;
    box-sizing: border-box;
    /* カンプにうっすら枠線が見えるため追加（不要なら削除してください） */
    border: 1px solid #EAEAEA; 
    padding: 30px 30px; /* カード内の余白（バランスを見て調整可） */
    background-color: #fff;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease;
}

/* 大きい数字 */
.p-ses-reason__num {
    font-family: "Shippori Mincho", serif;
    font-size: 60px;
    font-weight: 500; /* Bold */
    line-height: 1; 
    letter-spacing: 0.1em; /* 10% */
    color: rgba(200, 169, 106, 0.4); /* #c8a96a 60% */
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}

/* 数字下の線 */
.p-ses-reason__num::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px; /* ご指定の長さ */
    height: 1px; /* ご指定の太さ */
    background-color: rgba(200, 169, 106, 0.8); /* #c8a96a 80% */
}

/* 小見出し */
.p-ses-reason__title {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 700; 
    line-height: 1.6; 
    letter-spacing: 0.05em; /* 5% */
    color: #1C245E;
    margin-top: 40px; 
    margin-bottom: 40px; 
    text-align: center;
    min-height: 71px;
    /* ★ここから追記：タイトルエリアをFlexboxにして文字を下揃えにする */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* カンプの見た目に合わせた小見出しの配置調整 */
.p-ses-reason__title--center { text-align: center; }
.p-ses-reason__title--right { text-align: right; }

/* テキスト */
.p-ses-reason__card .p-ses-reason__text {
    font-family: "Noto Serif JP", serif;
    font-size: 15px;
    font-weight: 500; 
    line-height: 2.2; /* 180% */
    letter-spacing: 0.08em; /* 5% */
    color: #1C245E;
    margin: 0;
    text-align: justify; 
}


/* スキルページ (対応可能な技術) */
.p-ses-skills {
    width: 100%;
    /* 指定のグラデーション */
    background: linear-gradient(135deg, #4A65CF 0%, #1C245E 100%);
    padding: 140px 0;
}

.p-ses-skills .l-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 135px; 
    padding-right: 135px; 
    max-width: 100%; 
    box-sizing: border-box;
}

/* --- 左側：タイトルエリア --- */
.p-ses-skills__intro {
    width: 50%;
    position: sticky;
    top: 300px; /* スクロール時に追従 */
}

.p-ses-skills__title {
    font-family: "Shippori Mincho", serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    margin: 0;
    padding-bottom: 0; /* 線の分の余白をカット */
}

.p-ses-skills__title::after {
    display: none;
}

.p-ses-skills__text {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 2.2;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.9); /* 純白より少しだけ落として高級感を */
    margin-top: 50px;
}

/* --- 右側：カードエリア --- */
.p-ses-skills__cards {
    width: 540px; /* カードの横幅を固定 */
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.p-ses-skills__card {
    width: 100%;
    min-height: 356px;
    /* ★ガラスのような質感を演出 */
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 60px 45px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.p-ses-skills__card-title {
    font-family: "Shippori Mincho", serif; /* ★フォントを統一 */
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.15em;
    color: #1C245E;
    text-align: center;
    margin-bottom: 45px;
}


/* スキルリストの自動整列 */
.p-ses-skills__list {
    /* list-style: none;
    padding: 0;
    margin: 0; */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ★ここ！自動で3列にします */
    gap: 20px 30px;
    align-items: center;
}

.p-ses-skills__list li {
    font-family: "Inter", "Noto Serif JP", serif;
    font-size: 16px;
    font-weight: 500;
    color: #1C245E;
    position: relative;
    padding-left: 18px; 
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.p-ses-skills__list li::before {
    content: ""; /* 文字としての●は消す */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 14px;
    background-color: #C8A96A;
    border-radius: 0;
    opacity: 0.7;
}

/* 実績スライダー */
.p-ses-works {
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
}

.p-ses-works__header {
    width: 100%;
    margin-bottom: 80px;
}
.p-ses-works__title-wrapper {
    width: 100%;
    text-align: right; 
    padding-right: 210px;
    box-sizing: border-box;
}
.p-ses-works__title {
    position: relative;
    display: inline-block;
    font-family: "Shippori Mincho", serif;
    font-size: 30px;
    font-weight: 700;
    color: #1C245E;
    letter-spacing: 0.2em;
    margin: 0;
    padding-bottom: 40px;
    margin-right: -0.2em;
}

/* 1000pxの線を描画 */
.p-ses-works__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0; 
    width: 1000px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.6); /* 黒の60% */
}
.p-ses-works__text {
    width: 100%;
    text-align: right; 
    padding-right: 251px;
    box-sizing: border-box;
    font-family: "Noto Serif JP", serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 2.0;
    letter-spacing: 0.1em;
    color: #1C245E;
    margin-top: 77px; /* 線からテキストまでの距離 */
    margin-bottom: 224px;
}

/* --- スライダー全体のコンテナ --- */
.p-ses-works__slider-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 80px auto 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* スライダー本体（見切れ用） */
.p-ses-works__swiper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    overflow: visible !important;
}

.p-ses-works__prev,
.p-ses-works__next {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    z-index: 10;
    color: #1c245e !important;
    width: 40px;
    height: 40px;
}

.p-ses-works__prev {
    left: calc(50% - 410px);
}

.p-ses-works__next {
    right: calc(50% - 410px);
}

/* 実績カード本体（★基本は薄く、小さく、ボカす） */
.p-ses-works__card {
    opacity: 0.3 !important;
    transform: scale(0.85);
    filter: blur(2px);
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
    width: 680px !important;
    height: 420px !important;
    background: #ffffff;
    border: 1px solid #EAEAEA;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* アクティブ（中央）なカード */
.swiper-slide-active.p-ses-works__card,
.swiper-slide-duplicate-active.p-ses-works__card {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: blur(0) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* アクティブなカード（★真ん中に来たら100%見せる）
/* どんなHTML構造でも確実に効くように、スペースあり/なし両方指定する最強の書き方です */
/* .swiper-slide-active.p-ses-works__card,
.swiper-slide-duplicate-active.p-ses-works__card,
.swiper-slide-active .p-ses-works__card,
.swiper-slide-duplicate-active .p-ses-works__card {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: blur(0) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
} */

/* カード内タイトル */
.p-ses-works__card-title {
    width: 100%;
    height: 80px;
    background-color: #F5F5F7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
    color: #1C245E;
    text-align: center;
    margin: 0;
}

/* --- カード内コンテンツ：配置修正 --- */
.p-ses-works__card-content {
    display: flex;
    flex-direction: row; /* ★横並び */
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding: 0 30px 20px;
}

/* 左側：イラスト */
.p-ses-works__card-image {
    width: 38% !important;
    order: 1;
    text-align: center;
    flex-shrink: 0 !important;
}

.p-ses-works__card-image img {
    width: 100%;
    max-width: 180px;
    height: auto;
}

/* 右側：テキストエリア */
.p-ses-works__card-info {   
    width: 58% !important;
    flex-shrink: 0 !important;
    order: 2;
    text-align: left;
}

.p-ses-works__card-info dl {
    margin: 0; /* デフォルトの余白をリセット */
}

.p-ses-works__card-info dl dt {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 4px;
    color: #1C245E;
    display: flex; /* アイコンがある場合のため */
    align-items: center;
    gap: 5px;
}

/* ★アイコンのサイズ指定 */
.p-ses-works__card-info dl dt img {
    width: 16px;
    height: 16px;
    object-fit: contain; /* 万が一画像が16x16の正方形でなくても、歪まずに収める魔法 */
}

.p-ses-works__card-info dl dd {
    font-size: 14px;
    margin-bottom: 12px;
    margin-left: 0;
    color: #1C245E;
    line-height: 1.5;
}

/* 一番最後の項目の下余白は無くす */
.p-ses-works__card-info dl dd:last-of-type {
    margin-bottom: 0;
}

/* 開発スキルのタグを並べるための設定（ddに直接適用させる場合） */
.p-ses-works__card-info dl dd:has(.c-tag) {
    display: flex;
    flex-wrap: wrap; /* 端までいったら折り返す */
    gap: 10px; /* ★ここでタグ同士の隙間を作ります */
}

/* スキルタグ */
.c-tag {
    display: inline-block;
    background-color: #e8f1f8;
    padding: 4px 10px;
    font-size: 12px;
    color: #1C245E;
    border-radius: 4px;
}

.p-ses-works__prev,
.p-ses-works__next {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    z-index: 10;
    color: #666666 !important;
    width: 40px;
    height: 40px;
}

.p-ses-works__prev {
    left: calc(50% - 410px);
}

.p-ses-works__next {
    right: calc(50% - 410px);
}

/* ★矢印のアイコン自体を細くする魔法 */
.p-ses-works__prev::after,
.p-ses-works__next::after {
    font-weight: 100 !important; /* 100〜300あたりで細さを調整できます（画像くらいなら200がおすすめ） */
    font-size: 40px !important;  /* 細くすると小さく見えるので、少しサイズを上げてバランスをとります */
}

.p-ses-works__prev:active,
.p-ses-works__next:active {
    color: #C8A96A !important;
    transform: translateY(-50%) scale(0.95); /* ★おまけ：押した瞬間に少しだけボタンが凹む（小さくなる）演出を入れると、より「押した感」が出ます！不要なら消してOKです */
}
/* =============================================
   Page: Webマーケティング   (Webマーケティング事業ページ)
   ============================================= */
.p-marketing {
    width: 100%;
    background-color: #fff;
    /* 次のセクション（代表メッセージ）との間に余白を取っておきます */
    padding-bottom: 120px; 
}

/* --- メインビジュアル --- */
.p-marketing__mv {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* コンテンツを右に寄せる */
}

.p-marketing__mv-image {
    width: 100%;
    max-width: 1262px; /* トップページと同じ基準の幅 */
    height: 900px; /* トップページと同じ高さ（カンプに合わせて調整してください） */
    margin: 0;
}

.p-marketing__mv-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が歪まないように枠に合わせてトリミング */
    display: block;
}
/* --- 事業概要 --- */
.p-marketing-overview {
    width: 100%;
    padding-top: 160px; /* メインビジュアルからの余白（カンプに合わせて調整） */
    padding-bottom: 240px;
}

/* ヘッダー部分（見出しと線） */
.p-marketing-overview__header {
    position: relative;
    text-align: right; /* テキストを右寄せ */
    padding-right: 210px; /* 右端から210px */
    margin-bottom: 174px; /* 線から下のテキストまでの距離 */
}

.p-marketing-overview__title {
    font-family: "Shippori Mincho", serif; /* 💡Shippori Mincho を指定 */
    font-size: 30px;
    font-weight: 700; /* Bold */
    color: #1C245E;
    letter-spacing: 0.2em; /* 20% */
    margin: 0;
    padding-bottom: 40px; /* タイトルと線の間の距離（目視で調整してください） */
    margin-right: -0.2em; /* 右端の文字間隔の余白を打ち消してピッタリ揃える */
}

/* 1000pxの線を描画 */
.p-marketing-overview__header::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 210px; /* 右端から210pxの位置からスタート */
    width: 1000px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.6); /* 黒の60% */
}

/* コンテンツ部分（テキスト） */
.p-marketing-overview__content {
    display: flex;
    justify-content: flex-end; /* ブロック全体を右寄せ */
    padding-right: 210px; /* 右端から210px */
}

.p-marketing-overview__text {
    font-family: "Noto Serif JP", serif;
    font-size: 28px;
    font-weight: 500; /* Medium */
    color: #1C245E;
    letter-spacing: 0.1em; /* 10% */
    line-height: 2.0; /* 200% */
    text-align: left; /* 中身のテキスト自体は左揃え */
    margin: 0;
}

/* --- 支援内容 --- */
.p-marketing-solutions {
    width: 100%;
    padding-bottom: 300px; /* カンプに合わせて下余白を調整 */
}

/* --- タイトル部分 --- */
.p-marketing-solutions__header {
    position: relative;
    text-align: center;
    margin-bottom: 150px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-marketing-solutions__eng {
    font-family: "Shippori Mincho", serif;
    font-size: 100px;
    font-weight: 700; /* Bold */
    color: rgba(200, 169, 106, 0.2); /* #c8a96a 20% */
    letter-spacing: 0.2em; /* 20% */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.p-marketing-solutions__jpn {
    font-family: "Noto Serif JP", serif;
    font-size: 40px;
    font-weight: 700; /* Bold */
    line-height: 1.8; /* 180% */
    letter-spacing: 0.2em; /* 20% */
    color: rgba(28, 36, 94, 0.7); /* #1c245e 70% */
    position: relative;
    z-index: 2;
    margin: 0;
}

/* --- カードエリア全体 --- */
.p-marketing-solutions__cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 54px; /* ご指定のカード間の余白 */
    width: 100%;
    max-width: 1262px; /* 画面幅に合わせて中央寄せ */
    margin: 0 auto;
}

/* --- 各カードのスタイル --- */
.p-marketing-solutions__card {
    width: 314px; /* ご指定の幅 */
    height: 528px; /* ご指定の高さ */
    box-sizing: border-box;
    /* カンプにうっすら枠線が見えるため追加（不要なら削除してください） */
    border: 1px solid #EAEAEA; 
    padding: 60px 30px; /* カード内の余白（バランスを見て調整可） */
    background-color: #fff;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease;
}

/* 大きい数字 */
.p-marketing-solutions__num {
    font-family: "Noto Serif JP", serif;
    font-size: 60px;
    font-weight: 500; /* Bold */
    line-height: 1; 
    letter-spacing: 0.1em; /* 10% */
    color: rgba(200, 169, 106, 0.4); /* #c8a96a 60% */
    margin: 0;
    position: relative;
    padding-bottom: 20px;
}

/* 数字下の線 */
.p-marketing-solutions__num::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px; 
    height: 1px; 
    background-color: rgba(200, 169, 106, 0.8); /* #c8a96a 80% */
}

/* 小見出し */
.p-marketing-solutions__title {
    font-family: "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 700; 
    line-height: 1.6; 
    letter-spacing: 0.05em; 
    color: #1C245E;
    margin-top: 40px; 
    margin-bottom: 40px; 
    text-align: center;
    min-height: 71px;
}

/* カンプの見た目に合わせた小見出しの配置調整 */
.p-marketing-solutions__title--center { text-align: center; }
.p-marketing-solutions__title--right { text-align: right; }

/* テキスト */
.p-marketing-solutions__card .p-marketing-solutions__text {
    font-family: "Noto Serif JP", serif;
    font-size: 15px;
    font-weight: 500; 
    line-height: 2.2; 
    letter-spacing: 0.08em; 
    color: #1C245E;
    margin: 0;
    text-align: justify; 
}


/* スキルページ (対応可能な技術) */
.p-marketing-skills {
    width: 100%;
    /* 指定のグラデーション */
    background: linear-gradient(115deg, #aed0ee, #8ea7cc, #6d85a6);
    padding: 140px 0;
}

.p-marketing-skills .l-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-left: 135px; 
    padding-right: 135px; 
    max-width: 100%; 
    box-sizing: border-box;
}

/* --- 左側：タイトルエリア --- */
.p-marketing-skills__intro {
    width: 50%;
    position: sticky;
    top: 300px; 
}

.p-marketing-skills__title {
    font-family: "Shippori Mincho", serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    margin: 0;
    padding-bottom: 0; /* 線の分の余白をカット */
}

.p-marketing-skills__title::after {
    display: none;
}

.p-marketing-skills__text {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 2.2;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.9); /* 純白より少しだけ落として高級感を */
    margin-top: 50px;
}

/* --- 右側：カードエリア --- */
.p-marketing-skills__cards {
    width: 540px; /* カードの横幅を固定 */
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.p-marketing-skills__card {
    width: 100%;
    min-height: 356px;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 60px 45px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.p-marketing-skills__card-title {
    font-family: "Shippori Mincho", serif; /* ★フォントを統一 */
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.15em;
    color: #1C245E;
    text-align: center;
    margin-bottom: 45px;
}

/* スキルリストの自動整列 */
.p-marketing-skills__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
}

.p-marketing-skills__list li {
    font-family: "Inter", "Noto Serif JP", serif;
    font-size: 16px;
    font-weight: 500;
    color: #1C245E;
    position: relative;
    padding-left: 18px; 
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.p-marketing-skills__list li::before {
     content: ""; /* 文字としての●は消す */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 14px;
    background-color: #C8A96A;
    border-radius: 0;
    opacity: 0.7;
}

/* 実績スライダー */
.p-marketing-works {
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
}

.p-marketing-works__header {
    width: 100%;
    margin-bottom: 80px;
}
.p-marketing-works__title-wrapper {
    width: 100%;
    text-align: right; 
    padding-right: 210px;
    box-sizing: border-box;
}
.p-marketing-works__title {
    position: relative;
    display: inline-block;
    font-family: "Shippori Mincho", serif;
    font-size: 30px;
    font-weight: 700;
    color: #1C245E;
    letter-spacing: 0.2em;
    margin: 0;
    padding-bottom: 40px;
    margin-right: -0.2em;
}

/* 1000pxの線を描画 */
.p-marketing-works__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0; 
    width: 1000px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.6); /* 黒の60% */
}
.p-marketing-works__text {
    width: 100%;
    text-align: right; 
    padding-right: 251px;
    box-sizing: border-box;
    font-family: "Noto Serif JP", serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 2.0;
    letter-spacing: 0.1em;
    color: #1C245E;
    margin-top: 77px; /* 線からテキストまでの距離 */
    margin-bottom: 224px;
}

/* --- スライダー全体のコンテナ --- */
.p-marketing-works__slider-container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 80px auto 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* スライダー本体（見切れ用） */
.p-marketing-works__swiper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    overflow: visible !important;
}


.p-marketing-works__prev,
.p-marketing-works__next {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    z-index: 10;
    color: #1c245e !important;
    width: 40px;
    height: 40px;
}

.p-marketing-works__prev {
    left: calc(50% - 410px); 
}

.p-marketing-works__next {
    right: calc(50% - 410px); 
}

/* 実績カード本体 */
.p-marketing-works__card {
    opacity: 0.3 !important;
    transform: scale(0.85);
    filter: blur(2px);
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
    width: 680px !important;
    height: 420px !important;
    background: #ffffff;
    border: 1px solid #EAEAEA;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* 4. 中央に来た時だけ影を強くする（クラス名の間に半角スペースを入れました） */
.swiper-slide-active.p-marketing-works__card,
.swiper-slide-duplicate-active.p-marketing-works__card {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: blur(0) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* カード内タイトル */
.p-marketing-works__card-title {
    width: 100%;
    height: 80px;
    background-color: #F5F5F7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
    color: #1C245E;
    text-align: center; 
    margin: 0;
}

/* --- カード内コンテンツ：配置修正 --- */
.p-marketing-works__card-content {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding: 0 30px 20px;
}

/* 左側：イラスト */
.p-marketing-works__card-image {
    width: 38% !important;
    order: 1;
    text-align: center;
    flex-shrink: 0 !important;
}

.p-marketing-works__card-image img {
    width: 100%;
    max-width: 180px;
    height: auto;
}

/* 右側：テキストエリア */
.p-marketing-works__card-info {
    width: 58% !important;
    order: 2;
    text-align: left;
    flex-shrink: 0 !important;
}

.p-marketing-works__card-info dl {
    margin: 0; /* デフォルトの余白をリセット */
}

.p-marketing-works__card-info dl dt {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 4px;
    color: #1C245E;
    display: flex; /* アイコンがある場合のため */
    align-items: center;
    gap: 5px;
}

/* ★アイコンのサイズ指定 */
.p-marketing-works__card-info dl dt img {
    width: 16px;
    height: 16px;
    object-fit: contain; /* 万が一画像が16x16の正方形でなくても、歪まずに収める魔法 */
}

.p-marketing-works__card-info dl dd {
    font-size: 14px;
    margin-bottom: 12px;
    margin-left: 0;
    color: #1C245E;
    line-height: 1.5;
}

/* 一番最後の項目の下余白は無くす */
.p-marketing-works__card-info dl dd:last-of-type {
    margin-bottom: 0;
}

/* 開発スキルのタグを並べるための設定（ddに直接適用させる場合） */
.p-marketing-works__card-info dl dd:has(.c-tag) {
    display: flex;
    flex-wrap: wrap; /* 端までいったら折り返す */
    gap: 10px; /* ★ここでタグ同士の隙間を作ります */
}

/* スキルタグ */
.c-tag {
    display: inline-block;
    background-color: #e8f1f8;
    padding: 4px 10px;
    font-size: 12px;
    color: #1C245E;
    border-radius: 4px;
}

/* --- 矢印ボタン --- */
.p-marketing-works__prev,
.p-marketing-works__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #666666 !important; /* ★色は666666 */
    width: 40px;
    height: 40px;
}

/* メインカード(900px)のすぐ外に配置 */
.p-marketing-works__prev {
    left: calc(50% - 410px); 
}

.p-marketing-works__next {
    right: calc(50% - 410px); 
}

/* ★矢印のアイコン自体を細くする魔法 */
.p-marketing-works__prev::after,
.p-marketing-works__next::after {
    font-weight: 100 !important; /* 100〜300あたりで細さを調整できます（画像くらいなら200がおすすめ） */
    font-size: 40px !important;  /* 細くすると小さく見えるので、少しサイズを上げてバランスをとります */
}

.p-marketing-works__prev:active,
.p-marketing-works__next:active {
    color: #C8A96A !important;
    transform: translateY(-50%) scale(0.95); /* ★おまけ：押した瞬間に少しだけボタンが凹む（小さくなる）演出を入れると、より「押した感」が出ます！不要なら消してOKです */
}


/* =============================================
   Page: 採用情報ページ   
   ============================================= */
.p-recruit {
    width: 100%;
    background-color: #fff;
    /* padding-bottom: 120px;  */
}

/* --- メインビジュアル --- */
.p-recruit__mv {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* コンテンツを右に寄せる */
}

.p-recruit__mv-image {
    width: 100%;
    max-width: 1262px; /* トップページと同じ基準の幅 */
    height: 900px; /* トップページと同じ高さ（カンプに合わせて調整してください） */
    margin: 0;
}

.p-recruit__mv-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が歪まないように枠に合わせてトリミング */
    display: block;
}

/* --- 採用概要 --- */

.p-recruit-overview {
    padding: 160px 0 240px;
}

.p-recruit-overview__header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    padding-top: 40px;
}

.p-recruit-overview__title {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #1C245E;
}

.p-recruit-overview__header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
}

/* --- テーブル（PC） --- */
.p-recruit-overview__list {
    width: 100%;
    border-top: 1px solid #E0E0E0;
    border-left: 1px solid #E0E0E0;
    max-width: 900px; /* カンプに合わせて調整 */
    margin: 0 auto;
}

.p-recruit-overview__row {
    display: flex; /* 横並びにする */
    border-bottom: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
}

.p-recruit-overview__row dt {
    width: 30%;
    background-color: #F2F2F2; /* 左側の薄グレー */
    padding: 30px;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    font-weight: 500;
    color: #1C245E;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-recruit-overview__row dd {
    width: 70%;
    padding: 30px;
    margin: 0;
    background-color: #fff;
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    line-height: 1.8;
    color: #1C245E;
}

/* 事業内容の中のリスト */
.p-recruit-overview__sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.p-recruit-overview__sub-list ul {
    list-style: none;
    padding-left: 1.5em;
}



/* --- 入社までの流れセクション --- */
.p-recruit-process {
    width: 100%;
    padding-bottom: 150px;
    background-color: #fff;
}

.p-recruit-process__header {
    position: relative;
    text-align: center;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-recruit-process__eng {
    font-family: "Shippori Mincho", serif;
    font-size: 100px;
    font-weight: 700;
    color: rgba(200, 169, 106, 0.2);
    letter-spacing: 0.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.p-recruit-process__jpn {
    font-family: "Noto Serif JP", serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.2em;
    color: rgba(28, 36, 94, 0.7);
    position: relative;
    z-index: 2;
    margin: 0;
}
.p-recruit-process__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* カードの並び（PC：4枚横並び） */
.p-recruit-process__cards {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 0;
}

.p-recruit-process__card {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    padding: 20px 10px;
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* --- 重ねるための魔法（Grid） --- */
.p-recruit-process__heading {
    display: grid;
    align-items: center; 
    margin-bottom: 8px;
}

/* 2つの要素を「同じセル」に配置 */
.p-recruit-process__num,
.p-recruit-process__title {
    grid-area: 1 / 1; 
    margin: 0; /* ★古いmargin-topを完全に無効化 */
    text-align: left; /* ★どちらも左端スタートで揃える */
}

/* --- 背面の数字 --- */
.p-recruit-process__num {
    font-family: 'Noto Serif JP', serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 0.1em;
    color: rgba(28, 36, 94, 0.1); 
    z-index: 1;
}

/* --- 前面のタイトル --- */
.p-recruit-process__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2em;
    color: #1C245E;
    z-index: 2;
    padding-left: 10px; /* ★ここで重なり具合を調整できます！ */
}

/* --- 本文 --- */
.p-recruit-process__text {
    font-family: 'Noto Serif JP', serif;
    font-size: 16px;
    color: #1C245E;
    line-height: 2.2;
    letter-spacing: 0.15em;
    text-align: left;
}

/* --- プロセス間の矢印 --- */
.p-recruit-process__arrow {
    position: absolute;
    top: 50%; /* カードの縦のど真ん中に配置 */
    /* ★カードの右外側へ押し出す距離。カード間の隙間（gap: 20px）の真ん中に来るように調整します */
    right: -24px; 
    transform: translateY(-50%); /* 縦のズレを完璧に補正 */
    
    width: 28px; /* ★矢印の表示サイズ（画像の大きさに合わせて調整してください） */
    height: auto;
    z-index: 10; /* カードの枠線より「上」に重ねる */
    pointer-events: none; /* 矢印がクリックの邪魔にならないようにする */
}


/* =============================================
   01 エントリーカード専用スタイル
   ============================================= */
.p-recruit-process__entry {
    margin-top: 5px;
    text-align: center; /* 01カードの中身だけすべて中央揃え */
}

/* リード文 */
.p-recruit-process__entry-lead {
    font-family: "Noto Serif JP", serif;
    font-size: 16px;
    color: #1C245E;
    line-height: 2.0;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    
}

/* 公式フォームボタン（CSSボタン） */
.p-recruit-process__btn {
    width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 16px auto;
    background-color: #1c245e;
    color: #FFFFFF;
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: 14px;
    padding: 14px 10px;
    margin-bottom: 20px;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.p-recruit-process__btn:hover {
    opacity: 0.8; /* マウスを乗せたら少しフワッと薄くなる */
    background-color: #2a357d;
}

/* 「または」のテキスト */
.p-recruit-process__entry-or {
    font-size: 12px;
    color: #666666;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
}

/* エン転職バナー画像 */
.p-recruit-process__banner {
    display: block;
    width: 140px; /* ★画像の幅。大きすぎる場合はここを調整 */
    margin: 0 auto 8px auto;
    transition: opacity 0.3s ease;
}

.p-recruit-process__banner:hover {
    opacity: 0.8;
}

.p-recruit-process__banner img {
    width: 100%;
    height: auto;
    border: 1px solid #CCCCCC; /* カンプ画像にある薄いグレーの枠線を再現 */
}

/* 注釈テキスト */
.p-recruit-process__entry-note {
    font-size: 10px;
    color: #999999;
    letter-spacing: 0.05em;
}

/* =============================================
   Page: Contact (お問い合わせページ)
   ============================================= */

/* 1. ページ全体の背景を灰色にする */
main.l-main .l-page-content {
    background-color: #f9f8f6 !important;
    padding: 100px 0 !important;
}

/* 2. フォーム本体を「白い箱」にして中央に置く */
#snow-monkey-form-45 {
    background-color: #fff !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 80px 100px !important;
    border-radius: 0 !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.03) !important;
}

/* 3. ラベル（会社名など）を紺色・太字にする */
span.smf-item__label__text {
    color: #1C245E !important;
    font-family: "Shippori Mincho", serif !important; /* 明朝体に統一 */
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.1em !important;
}

/* 各項目の間隔（余白）を広げる */
#snow-monkey-form-45 .smf-item {
    margin-bottom: 40px !important;
}

/* 4. 横並びを解除して、入力欄を縦に並べる（全幅化） */
#snow-monkey-form-45 .smf-item__row {
    display: block !important;
}

#snow-monkey-form-45 .smf-item__col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

#snow-monkey-form-45 .smf-item__col--label {
    margin-bottom: 10px !important;
}

/* 5. 入力ボックスのデザイン（テキスト・メール・電話・メッセージ） */
#snow-monkey-form-45 .smf-item__col--controls input[type="text"],
#snow-monkey-form-45 .smf-item__col--controls input[type="email"],
#snow-monkey-form-45 .smf-item__col--controls input[type="tel"],
#snow-monkey-form-45 .smf-item__col--controls textarea {
    width: 100% !important;
    padding: 15px 0 !important; /* 左右のパディングを消す */
    border: none !important; /* 枠線を全部消す */
    border-bottom: 1px solid #EAEAEA !important; /* 下線だけ引く */
    background-color: transparent !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-family: "Noto Serif JP", serif !important;
    color: #1C245E !important;
    transition: border-color 0.3s ease !important;
}

/* 6. ★チェックボックス・ラジオボタンをカスタム丸型にする（最強版） */
/* デフォルトの四角い見た目を完全に消し、inputタグ自体を丸くデザインします */
#snow-monkey-form-45 .smf-item__col--controls input[type="checkbox"],
#snow-monkey-form-45 .smf-item__col--controls input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
    /* 未チェック時のくっきりしたグレーの丸枠 */
    border: 2px solid #999999 !important; 
    border-radius: 50% !important; /* ここで直接丸型にする */
    background-color: #fff !important;
    cursor: pointer;
    vertical-align: middle !important;
    outline: none !important;
    box-sizing: border-box !important;
    color: transparent !important; /* 万が一の文字化けや標準チェックマークを防ぐ */
}

/* プラグイン等が勝手に追加する疑似要素（白いチェックなど）を徹底的に消去 */
#snow-monkey-form-45 .smf-item__col--controls input[type="checkbox"]::before,
#snow-monkey-form-45 .smf-item__col--controls input[type="checkbox"]::after,
#snow-monkey-form-45 .smf-item__col--controls input[type="radio"]::before,
#snow-monkey-form-45 .smf-item__col--controls input[type="radio"]::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

/* フォーカス時（入力中）の演出 */
#snow-monkey-form-45 .smf-item__col--controls input:focus,
#snow-monkey-form-45 .smf-item__col--controls textarea:focus {
    outline: none !important;
    border-bottom: 1px solid #1C245E !important; /* 入力中は下線がブランドカラーに */
}

/* ★チェックされた時のデザイン（紺色枠 ＋ 中に紺色の丸） */
#snow-monkey-form-45 .smf-item__col--controls input[type="checkbox"]:checked,
#snow-monkey-form-45 .smf-item__col--controls input[type="radio"]:checked {
    border: 2px solid #1C245E !important; /* 外枠をブランドカラーの紺色に */
    background-color: #fff !important;
    /* 白いレ点アイコンなどを完全に上書きして消し、内側の紺色の丸ポチだけを作ります！ */
    background-image: radial-gradient(circle, #1C245E 45%, transparent 50%) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
}

/* ラジオ項目自体の上下の詰まりを解消 */
#snow-monkey-form-45 .wp-block-snow-monkey-forms-item {
    margin-top: 50px !important;
}

/* 選択肢を縦に綺麗に並べる */
#snow-monkey-form-45 .smf-radio-control {
    /* display: flex !important;
    flex-direction: column !important; */
    gap: 20px !important;
    margin-top: 20px !important;
    /* align-items: flex-start !important; */

}

/* 選択肢のテキスト設定 */
#snow-monkey-form-45 .smf-radio-control__item {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: #4f4f4f !important; /* 少し柔らかいグレーに */
    letter-spacing: 0.05em !important;
    font-weight: 500 !important;
    cursor: pointer;
}

/* 新しい確認ボタンを紺色のオシャレなデザインにする */
#snow-monkey-form-45 button.smf-button-control__control {
    display: inline-flex !important;
    background: transparent !important;
    color: #1C245E !important;           
    width: 320px !important;              /* 横幅 */
    height: 64px !important;              /* 高さ */
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    font-family: "Shippori Mincho", serif !important;
    font-weight: 500 !important;
    border: 1px solid #1C245E !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    letter-spacing: 0.15em !important;
    transition: all 0.4s ease !important;
}

#snow-monkey-form-45 button.smf-button-control__control:hover {
    background: #1C245E !important;
    color: #fff !important;
    opacity: 1 !important; /* 透けさせず、色が反転する演出に */
}

/* ボタンを中央に寄せる */
#snow-monkey-form-45 .smf-action {
    display: flex !important;
    justify-content: center !important;
    margin-top: 40px !important;
}

/* 完了画面全体の調整 */
#snow-monkey-form-45 .smf-complete-message {
    text-align: center !important;
    padding: 100px 20px !important;
    background-color: #f7f7f7 !important;
}

/* タイトルのスタイル（明朝体・紺色） */
#snow-monkey-form-45 .smf-complete-message p:first-child {
    font-family: "Shippori Mincho", serif !important;
    font-size: 28px !important;
    color: #1C245E !important;
    margin-bottom: 30px !important;
    font-weight: 700;
}

/* 「TOPページへ戻る」ボタン：今の確認ボタンとサイズ・色を統一 */
#snow-monkey-form-45 .smf-complete-message .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #1C245E !important; /* 紺色を統一 */
    color: #fff !important;
    width: 320px !important;        /* 横幅 320px に統一 */
    height: 64px !important;       /* 高さ 64px に統一 */
    border-radius: 4px !important;  /* 角丸 4px に統一 */
    font-weight: 700 !important;
    font-size: 16px !important;
    border: none !important;
    text-decoration: none !important;
    transition: opacity 0.3s;
}

/* ホバー時の挙動も統一 */
#snow-monkey-form-45 .smf-complete-message .wp-block-button__link:hover {
    opacity: 0.8 !important;
}

/* ボタンを中央に配置するコンテナ */
#snow-monkey-form-45 .smf-complete-message .wp-block-buttons {
    margin-top: 40px !important;
    display: flex !important;
    justify-content: center !important;
}

/* ---------------------------------------------
   隠れているエラーメッセージを無理やり引っ張り出す
   --------------------------------------------- */
/* 1. エラーメッセージ本体を表示 */
.smf-error-message {
    display: block !important;
    visibility: visible !important;
    color: #ff0000 !important; /* 強制的に赤色 */
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
    padding: 0 !important;
}

/* 2. エラーが出ている入力欄の枠を赤くして分かりやすくする */
#snow-monkey-form-45 [aria-invalid="true"] {
    border: 2px solid #ff0000 !important;
    background-color: #fffafa !important; /* ほんのり赤背景 */
}


/* =============================================
   ★ MEDIA QUERIES (大きい順に整理)
   ============================================= */

/* --- PC巨大モニター (1440px以上) --- */
@media (min-width: 1440px) {
    .l-header__inner,
    .p-mv__content,
    .p-company__mv-image,
    .p-ses__mv-image,
    .p-marketing__mv-image,
    .p-recruit__mv-image {
        max-width: 85%;
    }
    .p-mv__title {
        top: 120px;
        font-size: 70px;
    }
    .p-slogan__inner {
        max-width: 85% !important;
    }
}

/* --- PC中間サイズ (1262px以下) --- */
@media (max-width: 1262px) {
    .p-mv__title {
        max-width: 95%;
        font-size: 5vw; 
    }
}

/* --- PC微調整 (1100px〜769px) --- */
@media (min-width: 769px) and (max-width: 1100px) {
    .l-cta__text {
        max-width: 90% !important;
        font-size: 18px !important;
        line-height: 1.8;
    }
    .l-cta__buttons {
        gap: 50px !important;
    }
}

/* PC（1025px以上）ではハンバーガーメニューを非表示に */
@media (min-width: 1025px) {
    .custom-sp-menu, .menu-open-btn {
        display: none !important;
    }
}
/* --- タブレット調整 (1024px以下) --- */
@media (max-width: 1024px) {
    /* =============================================
       ヘッダー (タブレット調整)
       ============================================= */
    .l-header__inner {
        padding: 0 20px; /* 左右の余白を40pxから20pxに減らしてスペース確保 */
    }

    .l-header__nav-list {
        gap: 20px; /* メニュー同士の隙間を40pxから20pxにギュッと縮める */
    }

    .l-header__nav-list a {
        font-size: 13px; /* 文字サイズもほんの少しだけ小さくしてスッキリ収める */
    }

    /* --- スローガン（タブレット用微調整） --- */
    .p-slogan__content {
        min-height: 550px; 
    }
    .p-slogan__catch {
        font-size: 36px;
    }
    /* 1. テキストグループの幅を調整して、空白を埋める */
    .p-slogan__text-group {
        margin-left: 30%; 
        width: calc(100% - 30%);
        padding-top: 130px; /* 上からの開始位置を少し上げて、全体を上に詰める */
    }

    /* 2. リード文のサイズアップ（小さく感じる問題を解消） */
    .p-slogan__lead {
        font-size: 20px; /* 14px（SP）からサイズアップ */
        line-height: 2.0;
        margin-bottom: 30px;
        white-space: normal;
    }

    /* 3. 本文のサイズアップ */
    .p-slogan__text {
        font-size: 16px;
        line-height: 2.2;
    }
    
    /* 4. リンク（会社情報ページはこちら）の調整 */
    .p-slogan__link-wrapper {
        margin-top: 60px; 
    }


    /* =============================================
       会社情報 代表メッセージ (タブレット調整)
       ============================================= */
    /* 1. 左右に40pxの余白（安全地帯）を作り、文字が壁にぶつかるのを防ぐ */
    .p-message {
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box; /* 余白を横幅に含める魔法 */
    }

    /* 2. 左側の押し出し(20%)を少し弱めて、テキストの表示エリアを広くする */
    .p-message__content {
        margin-left: 10%;
    }

    /* 3. 全体的に文字サイズを少しだけ小さくして、上品に収める */
    .p-message__catchphrase {
        font-size: 32px; /* 40pxから縮小 */
    }

    .p-message__text {
        font-size: 16px; /* 20pxから縮小 */
    }

    .p-message__name {
        font-size: 32px; /* 40pxから縮小 */
    }

    /* =============================================
       SES 事業概要 (タブレット調整)
       ============================================= */
    /* 1. 右の余白を210pxから「40px」に減らしてスペースを確保 */
    .p-ses-overview__header,
    .p-ses-overview__content {
        padding-right: 40px;
    }

    /* 2. 1000px固定だった線を、画面幅に合わせて伸び縮みさせる */
    .p-ses-overview__header::after {
        right: 40px; /* 右の開始位置も40pxに合わせる */
        width: calc(100% - 80px); /* 画面幅から左右の余白分を引いた長さに */
        max-width: 800px; /* ただし最大でも800pxまで */
    }

    /* 3. タイトルとテキストのサイズを少し小さくする */
    .p-ses-overview__title {
        font-size: 24px; /* 30pxから縮小 */
    }

    .p-ses-overview__text {
        font-size: 20px; /* 28pxから縮小 */
        max-width: 700px; /* 横幅を制限して、いい感じの長さで折り返させる */
    }
}


/* --- PC専用フッター表示設定 (769px以上) --- */
@media (min-width: 769px) {
    .l-footer__inner {
        display: flex !important;
        width: 100%;
        max-width: 1110px;
        margin: 0 auto;
        padding: 50px 4%;
        justify-content: space-between;
        align-items: flex-start;
        box-sizing: border-box;
    }
    .l-footer__info {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: auto;
    }
    .l-footer__info p,
    .l-footer__info span,
    .l-footer__address {
      color: #4f4f4f !important;
      text-decoration: none !important;
    }

    .l-footer__company {
        font-family: "Shippori Mincho", serif;
        font-size: 24px !important;
        font-weight: 500;
        letter-spacing: 0.15em;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .l-footer__tel,
    .l-footer__address {
        font-family: "Noto Serif JP", serif;
        font-size: 13px;
        line-height: 1.8;
        letter-spacing: 0.05em;
        margin: 0;
    }
    .l-footer__nav {
        display: flex;
        align-items: flex-start;
        margin-top: 6px;
    }
    .l-footer__nav-list {
        display: flex;
        gap: 40px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .l-footer__nav-list a {
        font-family: 'Inter', "Shippori Mincho", serif;
        font-size: 14px;
        color: #4f4f4f;
        text-decoration: none;
        letter-spacing: 0.1em;
        transition: opacity 0.3s;
    }
    .l-footer__nav-list a:hover {
        opacity: 0.6;
    }
    .l-footer__bottom {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 70px;
        padding: 0;
        border-top: 1px solid rgba(26, 36, 94, 0.2);
        position: relative;
    }
    .l-footer__copyright {
        font-family: 'Inter', "Shippori Mincho", serif;
        font-size: 10.5px;
        letter-spacing: 0.15em;
        color: #4f4f4f;
        margin: 0;
    }
    /* --- トップへ戻るボタン --- */
    .c-totop {
        position: absolute !important;
        top: 50%;
        transform: translateY(-50%);
        right: 4%;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        width: auto !important;
        height: auto !important;
        transition: opacity 0.3s ease;
    }
    .c-totop::before {
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-top: 1px solid #1C245E;
        border-left: 1px solid #1C245E;
        transform: rotate(45deg);
    }
    .c-totop__text {
        font-family: 'Inter', "Shippori Mincho", serif;
        font-size: 10px;
        color: #1C245E;
        letter-spacing: 0.15em;
        margin-top: -2px;
    }
    .c-totop:hover {
        opacity: 0.6;
    }
    
}

/* --- タブレット調整 (1024px以下) --- */
@media (max-width: 1024px) {
    .p-mv__title {
        top: 110px; 
        font-size: 40px;
    }
    /* 縦書き文字を少し小さくする */
    .p-slogan__catch {
        font-size: 32px; /* 40pxから縮小 */
    }
    /* テキストグループの余白と文字サイズも調整 */
    .p-slogan__text-group {
        margin-left: 28%; /* 左の余白を少し狭める */
        width: calc(100% - 28%);
        padding-top: 150px; 
    }
    .p-slogan__lead {
        font-size: 24px;
        white-space: normal; /* タブレットでは1行固定を解除して折り返しを許可 */
    }

    .p-slogan__text {
        font-size: 18px;
    }
    /* =============================================
       SES Skills 
       ============================================= */
    .p-ses-skills .l-inner {
        padding-left: 50px;  /* 135pxだと狭すぎるので50pxに緩和 */
        padding-right: 50px;
        gap: 40px;           /* 左右のパーツの隙間を縮める */
    }

    /* 左側：タイトルとテキストの幅を広げる */
    .p-ses-skills__intro {
        width: 45%; 
        position: static;    /* 縦に長くなりがちなので一旦sticky解除 */
    }

    .p-ses-skills__title {
        font-size: 32px;     /* 40pxから少しサイズダウン */
    }

    .p-ses-skills__text {
        font-size: 16px;     /* 20pxから少しサイズダウン */
        margin-top: 30px;
    }

    /* 右側：カードエリア */
    .p-ses-skills__cards {
        width: 50%;          /* 500px固定をやめて、画面の半分にする */
    }

    .p-ses-skills__card {
        width: 100%;         /* 親(50%)の幅いっぱいに広がる */
        min-height: auto;    /* 高さを固定せず中身に合わせる */
        padding: 40px 30px;  /* 少しコンパクトに */
    }

    .p-ses-skills__card-title {
        font-size: 24px;     /* 30pxから少しサイズダウン */
        margin-bottom: 30px;
    }

    .p-ses-skills__list {
        /* 文字が入り切らない場合は、ここを1列にするかフォントを小さく */
        gap: 12px 15px;
    }

    .p-ses-skills__list li {
        font-size: 14px;
    }

    /* =============================================
   SP専用：ハンバーガーメニュー（1024px以下で表示）
   ============================================= */
   .custom-sp-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(28, 36, 94, 0.95); /* 元のネイビーを95%の濃さに */
        backdrop-filter: blur(10px);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s;
    }

    .custom-sp-menu.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* 内側の幅調整 */
    .menu-inner {
        width: 80%;
        max-width: 400px;
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100vh;
        box-sizing: border-box;
        padding-top: 80px;
    }

    /* リスト設定 */
    .menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menu-list li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        margin-bottom: 20px;
    }

    .menu-list li a, .submenu-label {
        display: block;
        color: #fff;
        text-decoration: none;
        font-size: 20px;
        font-family: "Noto Serif JP", serif;
        padding-bottom: 12px;
        cursor: pointer;
        position: relative;
    }

    .menu-copyright {
        margin-top: auto;
        text-align: center;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.5); /* 白を少し透けさせる */
        letter-spacing: 0.15em;
        text-transform: uppercase;
        padding-bottom: 30px;
    }

    /* --- サブメニュー（アコーディオン） --- */
    .submenu {
        list-style: none;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* 動きを滑らかに */
        background: transparent !important; /* 背景のハコを消してスッキリさせる */
        border-left: 1px solid rgba(255, 255, 255, 0.3); /* 左側に細いガイドラインを入れる */
        margin-left: 10px; /* ラインの位置調整 */
}

    .has-submenu.is-open .submenu {
        max-height: 300px; /* 開いた時の高さ */
        padding: 15px 0 10px 25px;
    }

    .submenu li {
        border: none !important; /* 下線を消す */
        margin-bottom: 15px;
    }

    .submenu li a {
        font-size: 15px !important; /* 親より少し小さく */
        color: rgba(255, 255, 255, 0.9) !important; /* 少しだけ透過させて親と差をつける */
        letter-spacing: 0.05em;
        font-family: "Shippori Mincho", serif;
        transition: color 0.3s;
    }

    /* 矢印アイコン */
    .arrow {
        position: absolute;
        right: 0;
        top: 10px;
        width: 10px;
        height: 10px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        transition: transform 0.3s;
    }
    .has-submenu.is-open .arrow {
        transform: rotate(-135deg);
    }

    /* --- 一文字アニメーション --- */
    .char {
        display: inline-block;
        opacity: 0;
        transform: translateY(20px);
    }
    .custom-sp-menu.is-active .char {
        animation: fadeUp 1.0s forwards cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

    .menu-list li:nth-child(1) .char { animation-delay: calc(0.2s + (var(--i) * 0.1s)); }
    .menu-list li:nth-child(2) .char { animation-delay: calc(0.4s + (var(--i) * 0.1s)); }
    .menu-list li:nth-child(3) .char { animation-delay: calc(0.6s + (var(--i) * 0.1s)); }
    .menu-list li:nth-child(4) .char { animation-delay: calc(0.8s + (var(--i) * 0.1s)); }
    .menu-list li:nth-child(5) .char { animation-delay: calc(1.0s + (var(--i) * 0.1s)); }

    /* 閉じるボタン（×） */
    .menu-close-btn {
        position: absolute;
        top: 20px;
        right: 0;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
    }
    .menu-close-btn span {
        position: absolute;
        width: 100%;
        height: 1px;
        background: #fff;
        left: 0;
    }
    .menu-close-btn span:nth-child(1) { transform: rotate(45deg); }
    .menu-close-btn span:nth-child(2) { transform: rotate(-45deg); }

}

/* =============================================
   ★ スマホ用 (SP: 768px以下)
   ============================================= */
@media (max-width: 768px) {
    .u-display--sp { display: block !important; }
    .u-display--pc { display: none !important; }

    /* Header SP */
    .l-header {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        height: 56px; 
        padding: 0;
    }
    .l-header__inner {
        padding: 0 20px; 
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .l-header__logo {
        line-height: 1;
        display: flex;
        align-items: center;
    }
    .l-header__logo img {
        width: 90px;
        height: auto;
        display: block;
    }
    .l-header__opner {
        display: flex !important;
        align-items: center;
        cursor: pointer;
        height: 100%;
        gap: 8px;
    }
    .l-header__opner-text {
        font-family: "Shippori Mincho", serif;
        font-size: 10px;
        color: #1a2e5e;
        margin-right: 10px;
        font-weight: 700;
        line-height: 1;
    }
    .l-header__opner-icon {
        display: flex;
        align-items: center;
        width: 22px;
    }
    .l-header__opner-icon img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Page Header SP */
    .l-page-header {
        height: 100px;
        margin-bottom: 40px !important;
        margin-top: 56px;
        padding-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background-color: #fff;
    }
    /* 背景の英語透かし文字（SP用調整） */
    .l-page-header__eng { 
        font-size: 48px;
        color: rgba(28, 36, 94, 0.06) !important; /* ★超重要：色自体を極限まで薄くする */
        opacity: 1; /* 必要に応じて透明度を微調整 */
    }

    /* 手前の日本語タイトル（SP用調整） */
    .l-page-header__jpn { 
        font-size: 18px; 
        font-weight: 700;
        letter-spacing: 0.15em; /* 文字間隔を空けて上品に */
        margin-right: -0.15em !important;
    }

    /* Main Visual SP */
    .p-mv__image {
        height: auto;
        aspect-ratio: 4 / 5;
    }
    .p-mv__title {
        top: 86px; 
        font-size: 28px;
        height: auto;
        padding: 0 20px;
        box-sizing: border-box;
        white-space: normal;
        align-items: center;
    }

    /* Slogan SP */
    .p-slogan {
        padding: 120px 0;
        overflow: hidden;
    }
    .p-slogan__inner {
        width: 100%;
        max-width: 100% !important;
        margin: 0 auto !important; 
        padding: 0 20px; /* 左右の余白 */
        box-sizing: border-box;
    }

    .p-slogan__content {
        display: block; 
        position: relative;
        width: 100%;
        min-height: 300px;
    }
    
    /* SP用 縦書きスローガン */
    .p-slogan__catch {
        position: absolute; /* SPでも絶対配置にして、左端に固定する */
        font-size: 20px;          
        line-height: 1.5;         
        letter-spacing: 0.15em;   
        height: auto;
        left: 0; /* 左端に固定 */
    }

    .p-slogan__catch--line1 {
        top: 0;
        left: 20px;
    }
    /* SP：揺るぎない信頼を築く (左側) */
    .p-slogan__catch--line2 {
        top: 160px; /* 段差をつける */
        left: 0;   /* 一番左 */
    }

    /* SP用 テキストグループ */
    .p-slogan__text-group {
        width: 100%; /* 横幅は100%で固定 */
        margin: 0;
        padding-top: 20px;
        padding-left: 80px;
        padding-right: 40px; 
        box-sizing: border-box;
    }

    .p-slogan__lead {
        font-size: 17px;
        font-weight: 600;
        line-height: 2.0;
        letter-spacing: 0.1em;
        margin-bottom: 30px;
        white-space: normal; /* SPでは画面に収まらないので改行を許可 */
        word-break: auto-phrase; /* 文章のはみ出しを防ぐ */
    }

    .p-slogan__text {
        font-size: 15px;
        font-weight: 500;
        line-height: 2.0;
        letter-spacing: 0.05em;
        text-align: justify;
        word-break: normal; /* 文章のはみ出しを防ぐ */
        overflow-wrap: break-word;
    }
    .p-slogan__link-wrapper {
        text-align: right; 
        margin-top: 40px;
    }
    .p-slogan__link {
        flex-direction: column; /* ★テキストと矢印を縦に並べる */
        align-items: flex-end; /* ★矢印を右端に揃える */
        gap: 8px; /* テキストと矢印の上下の隙間 */
        font-size: 14px;
        line-height: 1.5; /* 行間 150% */
        letter-spacing: 0.1em; /* 文字間隔 10% */
        /* 色とフォントはPCの設定(C8A96A 80%)をそのまま引き継ぎます */
    }

    .p-slogan__link-arrow {
        width: 100px; /* ★矢印が長すぎて画面を押し広げるのを防ぐ */
    }


    /* Guide Section SP */
    .p-guide {
        padding: 0;
        padding-bottom: 120px;
        background-color: #fff;
    }

    .p-guide__inner {
        width: 100%;
        max-width: 100% !important;
        padding: 0 !important; /* インナーの左右余白を完全に消す */
    }

    .p-guide__item {
        width: 100%;
        box-sizing: border-box;
        padding: 60px 40px 60px 24px;
        margin-bottom: 0; 
        box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 1;
    }
    /* 背景色の個別指定 */
    .p-guide__item:nth-child(1) { background-color: rgba(217, 231, 246, 0.3); } /* SES 30% */
    .p-guide__item:nth-child(2) { background-color: rgba(183, 195, 229, 0.4); } /* Web 40% */
    .p-guide__item:nth-child(3) { background-color: rgba(122, 139, 168, 0.1); } /* 採用 10% */

    /* アイコンの位置調整 */
    .p-guide__image.u-display--sp {
        display: block !important;
        margin: 0 auto 30px; /* タイトルの下、テキストの上に配置 */
        width: 100px; 
    }

    .p-guide__image {
        margin-bottom: 20px;
    }

    .p-guide__image img {
        width: 100%;
        height: auto;
    }
    /* ③フォントの設定 (タイトル) */
    .p-guide__title {
        font-family: "Noto Serif JP", serif;
        font-size: 22px;
        font-weight: 700; /* Bold */
        line-height: 1.6; /* 220% */
        letter-spacing: 0.08em; /* 8% */
        color: #1C245E;
        padding-bottom: 0;
        margin-bottom: 25px;
        text-align: center !important;
    }
    .p-guide__title::after { display: none; }

    /* フォントの設定 (テキスト) */
    .p-guide__text {
        font-family: "Noto Serif JP", serif;
        font-size: 15px;
        font-weight: 500; /* Medium */
        line-height: 1.8; /* 150% */
        letter-spacing: 0.08em; /* 8% */
        color: rgba(28, 36, 94, 0.8);
        text-align: left;
        margin-bottom: 30px;
    }

    .p-guide__content {
        margin-left: 0 !important;
    }
    /* リンク部分(SP) */
    .p-guide__link-wrapper {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 40px;
    }
    .p-guide .p-slogan__link{
        display: flex;
        flex-direction: column; /* 縦に並べる */
        align-items: flex-end;    /* 右側に揃える（これで階段状になります） */
        text-align: right;        /* 文字自体も右寄せ */
        gap: 8px;
        font-family: "Noto Serif JP", serif;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: 0.1em;
        color: rgba(200, 169, 106, 0.8);
        line-height: 0.8 !important; 
        gap: 4px;
    }

    /* ★ここがポイント：SPの時だけ1行目を左に押し出す */
    .p-guide__link-text-top {
        display: inline-block;
        margin-right: 2.5em; /* ここの数字を増やすほど「Webマーケ」が左にズレます */
    }
    .p-guide .p-slogan__link-arrow {
        width: 100px; /* 矢印の長さ100px */
        margin-top: 10px;
    }

    /* Bottom Photo section SP */
    .p-bottom-photo {
        display: none !important;
    }

    /* .p-bottom-photo__container {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .p-bottom-photo__bg {
        display: none !important;
    }
    
    .p-bottom-photo__image {
        width: 100%;
        border: none;
        text-align: center;
    }

    .p-bottom-photo__image img {
        width: 100%;
        height: auto;
        border-radius: 0;
        box-shadow: none;
        display: block;
    } */
    
    /* CTA (About a-proud) SP */
    .l-cta {
        padding: 60px 0 !important;
        margin-bottom: 0 !important;
        background-color: #f8f9fa !important;
    }
    .l-cta__inner {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        padding: 0 20px !important;
        background-color: transparent !important;
    }
    .l-cta__title--sp {
        font-family: 'Inter', sans-serif;
        font-size: 24px !important;
        font-weight: 800;
        letter-spacing: 0.1em;
        color: #1c245e;
        text-align: center;
        margin-bottom: 24px;
        letter-spacing: 0.05em;
    }

    .l-cta__content-wrap {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 32px auto;
        display: flex;
        flex-direction: column;
    }
    .l-cta__text--sp {
        font-family: 'Noto Serif JP', serif;
        font-size: 14px !important;
        line-height: 1.6;
        letter-spacing: 0.03em;
        color: #4a4a4a;
        text-align: justify;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        margin-bottom: 16px;
    }

    .l-cta__viewmore {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: #c8a96a;
        margin-bottom: 0;
        transition: opacity 0.3s;
    }
    .l-cta__viewmore:active {
        opacity: 0.6;
    }
    .l-cta__buttons {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px !important;
    }
    .l-cta .c-btn {
        width: 100% !important;
        max-width: 320px !important;
        height: 64px !important;
        background-color: transparent !important;
        border: 1px solid #1C245E !important;
        color: #1C245E !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 8px 24px rgba(28, 36, 94, 0.06) !important;
        transition: all 0.3s ease;
    }

    .l-cta .c-btn:active {
        box-shadow: 0 4px 12px rgba(28, 36, 94, 0.06) !important;
        transform: translateY(2px);
    }

    .l-cta .c-btn span {
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    /* コピーライト */
    .l-cta__copyright {
        font-size: 10px;
        letter-spacing: 0.1em;
        color: rgba(28, 36, 94, 0.5);
        margin: 0 !important;
        padding: 40px 0 20px;
        text-align: center;
    }

    /* スマホではスクロールダウンを完全に非表示にする */
    .p-scroll-down {
        display: none !important;
    }

    /* スマホでは縦線を完全に隠す */
    .c-vertical-line {
        display: none !important;
    }


    /* =============================================
       Page: Company (会社情報ページ SP)
       ============================================= */
    /* --- メインビジュアル --- */
    .p-company__mv-image {
        width: 100%;
        margin: 0 auto;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .p-company {
        width: 100%;
        background-color: #fff;
        padding-bottom: 0; 
    }
    /* --- 代表メッセージ --- */
    .p-message {
    padding-top: 90px; 
    padding-bottom: 80px;
    padding-left: 38px;
    padding-right: 38px;
    width: 100%;
    box-sizing: border-box;
    }

    /* --- ヘッダー部分（SP：中央揃え） --- */
    .p-message__header {
        text-align: center; /* 中央寄せ */
        margin-bottom: 40px;
    }
    .p-message__title {
        font-size: 12px;
        font-weight: 500; /* Medium */
        letter-spacing: 0.2em;
        padding-bottom: 0;
    }
        
    .p-message__header::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: auto;
        right: 50%;
        transform: translateX(50%);
        width: 160px; 
        height: 1px;
        background-color: rgba(0, 0, 0, 0.2); /* #000000 の不透明度 60% */
    }

    /* --- コンテンツ部分（SP：中央揃え） --- */
    .p-message__content {
        margin-left: 0 !important; /* PCの余白をリセット */
        text-align: center; /* テキスト全体を中央寄せ */
    }
    .p-message__catchphrase-box {
        display: block; 
        width: 100%;
        max-width: none;
        margin: 0 auto 40px;
        text-align: center;  
    }

    .p-message__catchphrase {
        font-size: 28px !important;
        font-weight: 700 !important; 
        letter-spacing: 0.15em;
        line-height: 1.6;
        margin-bottom: 40px;
        padding: 0;
        display: block !important;
        text-align: center !important;
        text-indent: 0;
        width: auto;
    }

    /* ★タブレットの時は<br>を消して強制的に「1行」にする */
    .p-message__catchphrase br {
        display: none !important;
    }

    .p-message__text-box {
        text-align: center; 
        width: 100%;
    }

    .p-message__text {
        font-size: 16px !important;
        font-weight: 500;
        letter-spacing: 0.05em;
        line-height: 2.0;
        display: block !important;
        text-align: left; 
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 24px !important;
    }

    /* 最後の段落だけは下余白を無くす */
    .p-message__text:last-of-type {
        margin-bottom: 0 !important;
    }

    .p-message__text br {
        display: none; /* ★スマホではPCの改行を無視して、自動改行に任せる */
    }

    /* --- 署名部分（SP：右寄せ） --- */
    .p-message__signature {
        text-align: right;
    }

    .p-message__signature-inner {
        text-align: right; /* 右端を揃える */
    }

    .p-message__position {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.05em;
        margin-right: -0.05em; /* 右端の微調整 */
        margin-bottom: 5px;
    }

    .p-message__name {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0.05em;
        margin-right: -0.05em; /* 右端の微調整 */
        line-height: 1.2;
    }
    /* --- 会社概要セクション --- */
    .p-profile {
        /* ★代表メッセージとの間隔を182pxに設定 */
        padding-top: 182px; 
        padding-bottom: 80px;
        padding-left: 38px;  /* メッセージセクションと余白を揃える */
        padding-right: 38px;
        box-sizing: border-box;
    }

    .p-profile__header {
        text-align: center;
        margin-bottom: 40px;
        padding-top: 0;
    }

    .p-profile__title {
        font-size: 12px;
        font-weight: 500; /* Medium */
        letter-spacing: 0.2em;
        margin: 0;
    }

   .p-profile__header::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: ;
        left: 50%;
        transform: translateX(-50%);
        width: 160px;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .p-profile__list {
        border: none; /* 外枠を消す */
    }

    .p-profile__row {
        display: block; /* 縦並びにする */
        border-right: none;
        /* ★項目の下の線をカンプに合わせて設定（もし線が必要なら border-bottom を追加） */
        border-bottom: 1px solid rgba(28, 36, 94, 0.1); 
        padding-bottom: 15px;
        margin-bottom: 25px;
    }

    .p-profile__row dt {
        width: 100%;
        background-color: transparent; 
        justify-content: flex-start;
        padding: 0 0 6px 0;
        font-family: "Noto Serif JP", serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: rgba(28, 36, 94, 0.6);
    }

    .p-profile__row dd {
        width: 100%;
        padding: 0;
        font-family: "Noto Serif JP", serif;
        font-size: 15px;
        font-weight: 500;
        color: #1C245E;
        line-height: 1.6;
    }

    /* --- マップセクション --- */  
    .p-access {
        padding-bottom: 80px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .p-access__map iframe {
        height: 300px; /* スマホでは少し低くする */
    }
    .p-access__address {
        font-size: 12px;
    }
    .p-access__station {
        font-size: 10px;
    }

    /* =============================================
       Page: SES (SES事業ページ - SP)
       ============================================= */
    
    /* ★追加：PC版の右寄せ（flex-end）を中央寄せにリセット */
    .p-ses__mv {
        display: block; /* PCのflexを解除 */
        width: 100%;
    }

    .p-ses__mv-image {
        width: 100%;
        margin: 0 auto;
        height: auto;
        aspect-ratio: 1 / 1; 
    }

    /* --- 事業概要 --- */
    .p-ses-overview {
        width: 100%;
        padding: 80px 20px; 
        box-sizing: border-box; /* ★超重要：これが抜けていました！ */
    }

    /* ヘッダー部分（見出しと線） */
    .p-ses-overview__header {
        text-align: center; 
        padding-right: 0;   
        margin-bottom: 60px; 
    }

    /* SPの時だけ線を完全に消す */
    .p-ses-overview__header::after {
        display: none; 
    }
    
    .p-ses-overview__title {
        font-size: 18px; 
        padding-bottom: 40px; 
        margin-right: 0;
        line-height: 1.5; 
        text-indent: 0.1em; /* ★微細な文字間隔ズレを補正 */
    }

    /* コンテンツ部分（テキスト） */
    .p-ses-overview__content {
        display: block; /* ★不要な flex 関連を削除し、シンプルなブロックに */
        padding-right: 0; 
    }

    .p-ses-overview__text {
        font-size: 14px; 
        text-align: left; 
        line-height: 2.0; 
        width: 100%;
        max-width: 262px; 
        margin: 0 auto; /* ★超重要：テキストの箱自体を画面の中央に置く */
    }

    /* ★ここを追加：スマホの時だけテキスト内の改行(br)を無効化する */
    .p-ses-overview__text br {
        display: none;
    }

    /* --- 選ばれる理由 --- */
    .p-ses-reason {
        padding-bottom: 80px;
        padding-left: 20px; /* スマホ両サイドの安全な余白 */
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* --- タイトル部分 --- */
    .p-ses-reason__header {
        margin-bottom: 60px; /* カンプに合わせてタイトルの下余白を縮める */
    }

    /* ★SPでは英語の透かし文字を非表示にする */
    .p-ses-reason__eng {
        display: block;
        font-size: 10vw;
        width: 100%;
        text-align: center;
        overflow: hidden;
    }

    /* 大見出し */
    .p-ses-reason__jpn {
        font-size: 20px;
        line-height: 1.8; /* 180% */
        letter-spacing: 0.1em; /* 10% */
        /* 色(1c245e 70%)や太さ(bold)はPCの指定をそのまま引き継ぎます */
    }

    /* --- カードエリア --- */
    /* ★PCの横並び(flex)を解除して縦並びにする */
    .p-ses-reason__cards {
        display: block; 
    }

    /* ★カードの枠線を消し、ただのテキストブロックにする */
    .p-ses-reason__card {
        width: 100%;
        height: auto;
        border: none; /* 枠線を消去 */
        padding: 0; /* 内側の余白を消去 */
        background-color: transparent;
        margin-bottom: 80px; /* ブロック間の余白 */
    }

    .p-ses-reason__card:last-child {
        margin-bottom: 0;
    }

    /* --- テキスト装飾 --- */
    /* 数字 */
    .p-ses-reason__num {
        font-size: 40px;
        line-height: 1.8; /* 180% */
        letter-spacing: 0.1em; /* 10% */
        padding-bottom: 10px; /* 線との距離を少し調整 */
    }

    /* 数字下の線 */
    .p-ses-reason__num::after {
        width: 210px;
    }

    /* 小見出し */
    .p-ses-reason__title {
        font-size: 18px;
        line-height: 1.8; /* 180% */
        letter-spacing: 0.1em; /* 10% */
        margin-top: 30px;
        margin-bottom: 30px;
        text-align: left; /* ★強制的に左寄せにする */
    }

    /* ★PC版で設定した「中央・右寄せ」クラスをSPで左寄せに上書き */
    .p-ses-reason__title--center,
    .p-ses-reason__title--right {
        text-align: left;
    }

    /* テキスト */
    .p-ses-reason__card .p-ses-reason__text {
        font-weight: 500; /* Medium に上書き */
        font-size: 16px;
        line-height: 1.8; /* 180% */
        letter-spacing: 0.05em; /* 5% */
        text-align: left;
    }

    /* ★先ほど使った魔法：SPの時だけテキスト内のPC用改行を無効化して綺麗に折り返させる */
    .p-ses-reason__card .p-ses-reason__text br {
        display: none;
    }


    /* --- 対応可能な技術 --- */
    .p-ses-skills {
        padding: 80px 0; /* 上下余白をスマホ用に調整 */
        width: 100% !important;
        overflow: hidden;
    }

    .p-ses-skills .l-inner {
        width: 100%;
        max-width: 100%;
        padding-left: 20px !important; 
        padding-right: 20px !important;
        display: block;
        box-sizing: border-box;
    }

    /* --- 左側：タイトルエリア --- */
    .p-ses-skills__intro {
        width: 100%;
        max-width: 100%;
        position: static; /* stickyを解除 */
        text-align: center; /* ★全体を中央揃えに */
        margin-bottom: 60px;
    }

    .p-ses-skills__title {
        font-size: 24px; /* Extrabold 24px */
        line-height: 2.0; /* 200% */
        letter-spacing: 0.15em; /* 15% */
        padding-bottom: 20px;
        display: inline-block; /* 線を文字幅に合わせるため */
    }

    /* タイトル下の線を中央に配置 */
    .p-ses-skills__title::after {
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
    }

    .p-ses-skills__text {
        font-size: 16px; /* Medium 16px */
        font-weight: 500;
        line-height: 1.5; /* 150% */
        letter-spacing: 0.08em; /* 8% */
        margin-top: 30px;
        text-align: center;
    }

    /* PC用の改行をSPでは無視して自然に流す */
    .p-ses-skills__text br {
        display: none;
    }

    /* --- 右側：カードエリア --- */
    .p-ses-skills__cards {
        width: 100%; /* インナー枠いっぱいに広げる */
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* カード自体を中央寄せ */
        gap: 60px; /* ★カード間の余白 60px */
        box-sizing: border-box;
    }

    .p-ses-skills__card {
        width: 100% !important; /* 画面幅（マイナス左右余白）に収まる大きさ */
        max-width: 100%; 
        min-height: auto;
        padding: 40px 20px; /* 内側の余白をスマホ用に調整 */
        box-sizing: border-box;
    }

    .p-ses-skills__card-title {
        font-size: 18px; /* スマホで見やすいサイズに調整 */
        margin-bottom: 30px;
    }

    /* スキルリストを中央揃えにするための調整 */
    .p-ses-skills__list {
        display: grid !important; /* PCのflexを解除してグリッドに切り替える */
        gap: 15px 10px;
        width: 100%;
        max-width: 280px;
        margin: 0 auto; /* リスト全体を中央に配置 */
        padding: 0;
    }

    .p-ses-skills__list li {
        text-align: left;
        font-size: 14px;
        padding-left: 18px;
        position: relative; 
        display: block;
        line-height: 1.4;
    }

    /* --- SES実績 --- */
    .p-ses-works {
        padding: 60px 0; /* 上下余白をSP用に縮小 */
    }

    .p-ses-works__header {
        margin-bottom: 40px;
        text-align: center; /* SPは中央揃えが綺麗です */
    }

    .p-ses-works__title-wrapper {
        padding-right: 0; /* PC版の210pxをリセット */
        text-align: center;
    }

    .p-ses-works__title {
        font-size: 24px;
        font-weight: 800; /* Extrabold */
        letter-spacing: 0.15em;
        line-height: 2.0;
        padding-bottom: 20px;
    }

    .p-ses-works__title::after {
        width: 60px; /* 線を短くして中央に配置 */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .p-ses-works__text {
        padding-right: 0; /* PC版の251pxをリセット */
        text-align: center;
        font-size: 14px;
        font-weight: 500; /* Medium */
        line-height: 1.5;
        letter-spacing: 0.08em;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    /* ★追加：一番外側の箱で、はみ出しを完全に断ち切る */
    .p-ses-works__slider-container {
        width: 100%;
        max-width: 600px !important;
        margin: 0 auto;
        overflow: hidden !important;
        padding: 0; /* ★スマホでは矢印用の余白（PCの40px）をリセット */
    }

    /* --- スライダー・カード --- */
    .p-ses-works__swiper {
        width: 100%;
        max-width: 100% !important; 
        padding: 0 40px !important;
        box-sizing: border-box;
        overflow: visible !important;
    }

    .p-ses-works__card {
        width: 100% !important;
        max-width: none !important;
        height: auto !important; 
        min-height: auto;    
        border-radius: 4px;  
        margin: 0 auto;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    /* カードタイトル（ヘッダー） */
    .p-ses-works__card-title {
        height: auto !important; /* 100px固定を解除 */
        min-height: 80px;
        padding: 24px 20px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.1em;
        line-height: 1.6;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        /* ★ここが解決の鍵！確実に枠内で改行させる魔法 */
        white-space: normal !important; 
        word-break: auto-phrase !important; 
        overflow-wrap: break-word !important;
    }

    /* カード内コンテンツ（イラストを消す対応） */
    .p-ses-works__card-content {
        flex-direction: column;
        padding: 25px 20px 30px; 
    }

    .p-ses-works__card-image {
        display: none; /* ★パソコンイラストを非表示に */
    }

    .p-ses-works__card-info {
        width: 100%; /* 全幅使う */
    }

    .p-ses-works__card-info dl dt {
        font-size: 13px;
        font-weight: 500; /* Medium */
        color: #1c245e;
        opacity: 0.8;
        letter-spacing: 0.1em;
        line-height: 1.0;
        margin-bottom: 8px;
    }

    .p-ses-works__card-info dl dd {
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: 0.08em;
        margin-bottom: 20px; 
    }

    /* 資本金の前のスパンを強制改行させる */
    .u-display--block--sp {
        display: block; 
        margin-top: 4px; /* 改行後の少しの隙間 */
    }
    
    /* 改行されて縦に伸びる分、項目間のマージンを少し調整してもいいかもしれません */
    .p-ses-works__card-info dl dd {
        margin-bottom: 20px; 
    }
    /* --- 矢印ボタンの位置調整 --- */
    .p-ses-works__prev,
    .p-ses-works__next {
        width: 40px !important;
        height: 40px !important;
        margin-top: -20px !important;
    }

    .p-ses-works__prev {
        left: 0 !important; 
    }

    .p-ses-works__next {
        right: 0 !important;
    }

    /* =============================================
       Page: Webマーケティング (Webマーケティングページ - SP)
       ============================================= */
    
    /* ★追加：PC版の右寄せ（flex-end）を中央寄せにリセット */
    .p-marketing__mv {
        display: block; /* PCのflexを解除 */
        width: 100%;
    }

    .p-marketing__mv-image {
        width: 100%;
        margin: 0 auto;
        height: auto;
        aspect-ratio: 1 / 1; 
    }

    /* --- 事業概要 --- */
    .p-marketing-overview {
        width: 100%;
        padding: 80px 20px; 
        box-sizing: border-box; /* ★超重要：これが抜けていました！ */
    }

    /* ヘッダー部分（見出しと線） */
    .p-marketing-overview__header {
        text-align: center; 
        padding-right: 0 !important;   
        margin-bottom: 60px; 
    }

    /* SPの時だけ線を完全に消す */
    .p-marketing-overview__header::after {
        display: none; 
    }
    
    .p-marketing-overview__title {
        font-size: 18px; 
        padding-bottom: 40px; 
        margin-right: 0;
        line-height: 1.5; 
        text-indent: 0.1em; /* ★微細な文字間隔ズレを補正 */
    }

    /* コンテンツ部分（テキスト） */
    .p-marketing-overview__content {
        display: block; /* ★不要な flex 関連を削除し、シンプルなブロックに */
        padding-right: 0; 
    }

    .p-marketing-overview__text {
        font-size: 14px; 
        text-align: left; 
        line-height: 2.0; 
        width: 100%;
        max-width: 262px; 
        margin: 0 auto; /* ★超重要：テキストの箱自体を画面の中央に置く */
    }

    /* ★ここを追加：スマホの時だけテキスト内の改行(br)を無効化する */
    .p-marketing-overview__text br {
        display: none;
    }

    /* --- 選ばれる理由 --- */
    .p-marketing-solutions {
        padding-bottom: 80px;
        padding-left: 20px; /* スマホ両サイドの安全な余白 */
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* --- タイトル部分 --- */
    .p-marketing-solutions__header {
        margin-bottom: 60px; /* カンプに合わせてタイトルの下余白を縮める */
    }

    /* ★SPでは英語の透かし文字を非表示にする */
    .p-marketing-solutions__eng {
        display: block;
        font-size: 10vw;
        width: 100%;
        text-align: center;
        overflow: hidden;
    }

    /* 大見出し */
    .p-marketing-solutions__jpn {
        font-size: 20px;
        line-height: 1.8; /* 180% */
        letter-spacing: 0.1em; /* 10% */
        /* 色(1c245e 70%)や太さ(bold)はPCの指定をそのまま引き継ぎます */
    }

    /* --- カードエリア --- */
    /* ★PCの横並び(flex)を解除して縦並びにする */
    .p-marketing-solutions__cards {
        display: block; 
    }

    /* ★カードの枠線を消し、ただのテキストブロックにする */
    .p-marketing-solutions__card {
        width: 100%;
        height: auto;
        border: none; /* 枠線を消去 */
        padding: 0; /* 内側の余白を消去 */
        background-color: transparent;
        margin-bottom: 80px; /* ブロック間の余白 */
    }

    .p-marketing-solutions__card:last-child {
        margin-bottom: 0;
    }

    /* --- テキスト装飾 --- */
    /* 数字 */
    .p-marketing-solutions__num {
        font-size: 40px;
        line-height: 1.8; /* 180% */
        letter-spacing: 0.1em; /* 10% */
        padding-bottom: 10px; /* 線との距離を少し調整 */
    }

    /* 数字下の線 */
    .p-marketing-solutions__num::after {
        width: 210px;
    }

    /* 小見出し */
    .p-marketing-solutions__title {
        font-size: 18px;
        line-height: 1.8; /* 180% */
        letter-spacing: 0.1em; /* 10% */
        margin-top: 30px;
        margin-bottom: 30px;
        text-align: left; /* ★強制的に左寄せにする */
    }

    /* ★PC版で設定した「中央・右寄せ」クラスをSPで左寄せに上書き */
    .p-marketing-solutions__title--center,
    .p-marketing-solutions__title--right {
        text-align: left;
    }

    /* テキスト */
    .p-marketing-solutions__card .p-marketing-solutions__text {
        font-weight: 500; /* Medium に上書き */
        font-size: 16px;
        line-height: 1.8; /* 180% */
        letter-spacing: 0.05em; /* 5% */
        text-align: left;
    }

    /* ★先ほど使った魔法：SPの時だけテキスト内のPC用改行を無効化して綺麗に折り返させる */
    .p-marketing-solutions__card .p-marketing-solutions__text br {
        display: none;
    }


    /* --- 対応可能な技術 --- */
    .p-marketing-skills {
        padding: 80px 0; /* 上下余白をスマホ用に調整 */
        width: 100% !important;
        overflow: hidden;
    }

    .p-marketing-skills .l-inner {
        width: 100%;
        max-width: 100%;
        padding-left: 20px !important; 
        padding-right: 20px !important;
        display: block;
        box-sizing: border-box;
    }

    /* --- 左側：タイトルエリア --- */
    .p-marketing-skills__intro {
        width: 100%;
        max-width: 100%;
        position: static; /* stickyを解除 */
        text-align: center; /* ★全体を中央揃えに */
        margin-bottom: 60px;
    }

    .p-marketing-skills__title {
        font-size: 24px; /* Extrabold 24px */
        line-height: 2.0; /* 200% */
        letter-spacing: 0.15em; /* 15% */
        padding-bottom: 20px;
        display: inline-block; /* 線を文字幅に合わせるため */
    }

    /* タイトル下の線を中央に配置 */
    .p-marketing-skills__title::after {
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
    }

    .p-marketing-skills__text {
        font-size: 16px; /* Medium 16px */
        font-weight: 500;
        line-height: 1.5; /* 150% */
        letter-spacing: 0.08em; /* 8% */
        margin-top: 30px;
        text-align: center;
    }

    /* PC用の改行をSPでは無視して自然に流す */
    .p-marketing-skills__text br {
        display: none;
    }

    /* --- 右側：カードエリア --- */
    .p-marketing-skills__cards {
        width: 100%; /* インナー枠いっぱいに広げる */
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; /* カード自体を中央寄せ */
        gap: 60px; /* ★カード間の余白 60px */
        box-sizing: border-box;
    }

    .p-marketing-skills__card {
        width: 100% !important; /* 画面幅（マイナス左右余白）に収まる大きさ */
        max-width: 100%; 
        min-height: auto;
        padding: 40px 20px; /* 内側の余白をスマホ用に調整 */
        box-sizing: border-box;
    }

    .p-marketing-skills__card-title {
        font-size: 18px; /* スマホで見やすいサイズに調整 */
        margin-bottom: 30px;
    }

    /* スキルリストを中央揃えにするための調整 */
    .p-marketing-skills__list {
        display: grid !important; /* PCのflexを解除してグリッドに切り替える */
        gap: 15px 10px;
        width: 100%;
        max-width: 280px;
        margin: 0 auto; /* リスト全体を中央に配置 */
        padding: 0;
    }

    .p-marketing-skills__list li {
        text-align: left;
        font-size: 14px;
        padding-left: 18px;
        position: relative; 
        display: block;
        line-height: 1.4;
    }

    /* --- 実績スライド --- */
    .p-marketing-works {
        padding: 60px 0; /* 上下余白をSP用に縮小 */
    }

    .p-marketing-works__header {
        margin-bottom: 40px;
        text-align: center; /* SPは中央揃えが綺麗です */
    }

    .p-marketing-works__title-wrapper {
        padding-right: 0; /* PC版の210pxをリセット */
        text-align: center;
    }

    .p-marketing-works__title {
        font-size: 24px;
        font-weight: 800; /* Extrabold */
        letter-spacing: 0.15em;
        line-height: 2.0;
        padding-bottom: 20px;
    }

    .p-marketing-works__title::after {
        width: 60px; /* 線を短くして中央に配置 */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .p-marketing-works__text {
        padding-right: 0; /* PC版の251pxをリセット */
        text-align: center;
        font-size: 14px;
        font-weight: 500; /* Medium */
        line-height: 1.5;
        letter-spacing: 0.08em;
        margin-top: 30px;
        margin-bottom: 40px;
    }
    /* ★追加：一番外側の箱で、はみ出しを完全に断ち切る */
    .p-marketing-works__slider-container {
        width: 100%;
        max-width: 600px !important;
        margin: 0 auto;
        overflow: hidden !important;
        padding: 0; /* ★スマホでは矢印用の余白（PCの40px）をリセット */
    }

    /* --- スライダー・カード --- */
    .p-marketing-works__swiper {
        width: 100%;
        max-width: 100% !important;
        padding: 0 40px !important;
        box-sizing: border-box; 
        overflow: visible !important; 
    }

    .p-marketing-works__card {
        width: 100% !important;
        max-width: none !important;
        height: auto !important; 
        min-height: auto;    
        border-radius: 4px;  
        margin: 0 auto;
        opacity: 1 !important;  
        transform: none !important;
        filter: none !important;
    }

    /* カードタイトル（ヘッダー） */
    .p-marketing-works__card-title {
        height: auto !important; /* 100px固定を解除 */
        min-height: 80px;
        padding: 24px 20px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.1em;
        line-height: 1.6;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        /* ★ここが解決の鍵！確実に枠内で改行させる魔法 */
        white-space: normal !important; 
        word-break: auto-phrase !important; 
        overflow-wrap: break-word !important;
    }

    /* カード内コンテンツ（イラストを消す対応） */
    .p-marketing-works__card-content {
        flex-direction: column;
        padding: 25px 20px 30px; /* 余白をタイトに */
    }

    .p-marketing-works__card-image {
        display: none; /* ★パソコンイラストを非表示に */
    }

    .p-marketing-works__card-info {
        width: 100%; /* 全幅使う */
    }

    .p-marketing-works__card-info dl dt {
        font-size: 13px;
        font-weight: 500; /* Medium */
        color: #1c245e;
        opacity: 0.8;
        letter-spacing: 0.1em;
        line-height: 1.0;
        margin-bottom: 8px;
    }

    .p-marketing-works__card-info dl dd {
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: 0.08em;
        margin-bottom: 24px; 
    }

    /* 資本金の前のスパンを強制改行させる */
    .u-display--block--sp {
        display: block; 
        margin-top: 4px; /* 改行後の少しの隙間 */
    }
    
    /* 改行されて縦に伸びる分、項目間のマージンを少し調整してもいいかもしれません */
    .p-marketing-works__card-info dl dd {
        margin-bottom: 20px; 
    }
    /* --- 矢印ボタンの位置調整 --- */
    .p-marketing-works__prev,
    .p-marketing-works__next {
        width: 40px !important;
        height: 40px !important;
        margin-top: -20px !important;
    }

    .p-marketing-works__prev {
        left: 0 !important; 
    }

    .p-marketing-works__next {
        right: 0 !important;
    }


    /* =============================================
       Page: 採用情報 (採用情報ページ - SP)
    ============================================= */
    
    /* ★追加：PC版の右寄せ（flex-end）を中央寄せにリセット */
    .p-recruit__mv {
        display: block; /* PCのflexを解除 */
        width: 100%;
    }

    .p-recruit__mv-image {
        width: 100%;
        margin: 0 auto;
        height: auto;
        aspect-ratio: 4 / 5; /* ★トップページと全く同じ比率にする */
    }

    /* --- 採用概要セクション全体 --- */
    .p-recruit-overview {
        padding: 80px 20px; /* ★左右の余白を20pxに固定して375pxに収める */
        width: 100%;
        box-sizing: border-box; /* パディングを含めた幅計算にする */
    }

    .p-recruit-overview__header::after {
        width: 160px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .p-recruit-overview__list {
        width: 100%;
        border-top: 1px solid #EAEAEA;
        /* margin: 0 auto; もし中央寄せが必要なら */
    }

    .p-recruit-overview__row {
        display: flex;
        border-bottom: 1px solid #EAEAEA;
        border-left: 1px solid #EAEAEA;
        border-right: 1px solid #EAEAEA;
    }

    /* 左側：項目名（dt） */
    .p-recruit-overview__row dt {
        width: 90px; /* ★375pxの画面なら90px前後がベストバランス */
        flex-shrink: 0; /* ★幅が勝手に縮まないように固定 */
        background-color: #F2F2F2;
        color: #1C245E;
        font-weight: 500;
        font-size: 13px; /* 少しだけ小さくして1行に収まりやすく */
        padding: 15px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* 右側：内容（dd） */
    .p-recruit-overview__row dd {
        flex: 1; /* ★残りの全幅（約245px）を使う */
        background-color: #FFFFFF;
        padding: 15px;
        font-size: 12px;
        color: #333333;
        line-height: 1.6;
        word-break: break-all; /* 長い単語があっても枠を壊さない */
    }
    /* --- 入社の流れ --- */

    /* --- セクション全体の余白調整 --- */
    .p-recruit-process {
        padding-bottom: 200px; /* PCの300pxだとスマホでは広すぎるため縮小 */
    }

    /* --- タイトル周りのサイズ調整 --- */
    .p-recruit-process__header {
        margin-bottom: 100px; /* PCの248pxから大幅に縮小して間延びを防ぐ */
    }

    .p-recruit-process__eng {
        font-size: 40px; /* スマホ画面に収まるサイズに */
    }

    .p-recruit-process__jpn {
        font-size: 20px;
    }

    /* --- ★カードの縦並びと隙間の調整 --- */
    .p-recruit-process__cards {
        flex-direction: column; /* 横並びを縦並びに変更 */
        gap: 24px; /* ★ここがポイント！画像より隙間をキュッと狭くしています */
        padding: 0 15px; /* 画面端ギリギリにならないよう余白をとる */
    }

    .p-recruit-process__card {
        padding: 30px 20px; 
        height: auto !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* --- PC用の横向き矢印を隠す --- */
    .p-recruit-process__arrow {
        display: none; /* スマホでは不要なので非表示にする */
    }

    /* --- 01カードのボタン周りの微調整 --- */
    .p-recruit-process__btn {
        width: 100%; /* スマホではボタンを横幅いっぱいに広げた方が押しやすいです */
        box-sizing: border-box;
    }


    /* --- Contact (お問い合わせページ専用) --- */
    main.l-main .l-page-content {
        padding: 40px 0 !important;
    }

    #snow-monkey-form-45 {
        padding: 40px 24px !important;
        margin: 0 15px !important; /* 画面端の余白 */
    }

    #snow-monkey-form-45 button.smf-button-control__control {
        width: 100% !important; /* ボタンを横いっぱいに */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 選択肢が長い場合の改行調整 */
    #snow-monkey-form-45 .smf-radio-control__item {
        align-items: flex-start !important;
    }
    #snow-monkey-form-45 .smf-radio-control__item input[type="checkbox"],
    #snow-monkey-form-45 .smf-radio-control__item input[type="radio"] {
        margin-top: 2px !important; /* 改行された時に少し上に合わせる */
    }
    #snow-monkey-form-45 p:has(a) {
        text-align: center !important; /* 中央揃えにしてバランスを良くする */
        font-size: 12px !important;    /* スマホ用にほんの少し文字を小さく */
        padding: 0 10px !important;    /* 左右に見えない壁（余白）を作って、単語の途中での改行を防ぐ */
        line-height: 1.6 !important;   /* 行と行の隙間を少し広げて読みやすく */
    }

    /* =============================================
       Page: 採用情報 (採用情報ページ - SP)
    ============================================= */

    textarea.smf-textarea-control__control {
        height: 200px !important; /* ここでお好みの高さに調整してください */
        min-height: 200px !important;
    }

}
/* =============================================
   ★ スマホ専用の微調整 (480px以下)
   ============================================= */
@media (max-width: 480px) {
    /* タイトル（スマホに丁度いいサイズに縮小） */
    .p-guide__title {
        font-size: 18px !important; /* 22pxから18pxへ */
        margin-bottom: 20px !important;
    }

    /* テキスト（10pxは小さすぎるため、読みやすい13pxを推奨） */
    .p-guide__text {
        font-size: 13px !important; 
        line-height: 1.6 !important; 
        margin-bottom: 25px !important;
    }

    /* リンク部分 */
    .p-guide .p-slogan__link {
        font-size: 13px !important;
        gap: 6px !important;
    }
    
    /* ※もしSPでリンクの矢印が大きいと感じる場合はここも調整 */
    .p-guide .p-slogan__link-arrow {
        width: 80px !important; /* 100pxから少し短く */
    }

    .p-slogan__text-group {
        padding-left: 70px !important; /* スマホは縦書き文字が小さいので左余白を減らす */
        padding-right: 20px !important; /* スマホの右余白は20pxくらいがベスト */
    }

    /* スマホは文字サイズを少し戻す */
    .p-slogan__lead {
        font-size: 15px !important;
    }
    .p-slogan__text {
        font-size: 14px !important;
    }

    .p-message__catchphrase {
        font-size: 22px !important; /* スマホサイズに少し縮める */
        line-height: 1.8 !important;
    }
    
    /* ★スマホの時だけ<br>を復活させて、意図した位置で綺麗に2行にする */
    .p-message__catchphrase br {
        display: inline !important;
    }

    .p-message__text {
        font-size: 14px !important; /* スマホでは14pxに戻す */
        margin-bottom: 20px !important; /* 段落の余白も少し狭める */
    }
}

/* --- スマホ スローガン一行維持 (482px以下) --- */
@media (max-width: 482px) {
    .p-mv__title {
        width: 100%;
        max-width: 361px;
        white-space: nowrap; 
        font-size: 22px;
        font-weight: 700; 
        letter-spacing: 0.05em; 
        height: 27px;
        line-height: 27px; 
        padding: 0;
        overflow: visible; /* 文字が見切れないようにする */
        text-overflow: clip; 
        left: 50%;
        transform: translateX(-50%);
    }
}

/* --- スマホ極小サイズ テキスト切れ解消 (400px以下) --- */
@media (max-width: 400px) {
    .p-mv__title {
        font-size: 5vw; /* 画面幅に合わせて滑らかに縮小し、1行に収める */
    }
}