@charset "UTF-8";
/* reset----------------------------- */
html{
    scroll-padding-top: 50px;
    scroll-behavior: smooth;
}
body {
    font-family: "Noto Sans JP", "Noto Serif JP", serif;
    margin: 0 !important;
}

section, main, footer, h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,fieldset {
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4,h5,h6 {
    line-height: 1.1;
}
p{
    line-height: 2;
    text-align: justify;
}
li {
    list-style: none;
}

th {
    font-weight: normal;
}

em {
    font-style: normal;
}

sup {
    position: relative;
    height: 0;
    font-size: .46em;
}

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
    display: block;
}

img {
    width: 100%;
    max-width:100%;
    display: block;
    object-fit: contain;
}
a{
    text-decoration: none;
    color: #FFF;
}

/* ==========================================================================
   【共通パーツ】セクションを跨いで使う縦書きレーベル ＆ 矢印ボタン
   ========================================================================== */
/* 左側に配置する縦書きテキストの基盤 */
.p-top_vertical-label {
    writing-mode: vertical-rl;      
    text-combine-upright: digits 2; 
    text-orientation: sideways;
    -webkit-text-orientation: sideways;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #4a4a4a;
    font-family: "Sawarabi Gothic", "Sawarabi Mincho", serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    white-space: nowrap;
    position: absolute;
    left: 0;
    /* 修正箇所：2枚目の背景内に閉じ込められた状態を改善し、1枚目の通り上のセクション（白いエリア）まで文字がはみ出して跨ぐように位置を上部へ引き上げる調整 */
    top: -200px; 
    /* 修正箇所：セクションが切り替わる境界線レイヤーよりも必ず前面にテキストを露出させるための階層設定 */
    z-index: 10; 
}

/* 縦書きの中に入るオシャレな中線（————） */
.p-top_vertical-line {
    width: 1px;
    height: 20px;                    
    background-color: #4a4a4a;
    display: block;
}

/* カンプ特有の、丸で囲まれた矢印ボタン */
.p-top-arrow-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #4a4a4a;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: opacity 0.3s ease;
}

/* ボタンの右側につく、Figma通りの矢印サークル */
.p-top-arrow-btn::after {
    content: "" !important; /* 修正箇所①：既存の文字「↗」を完全に消去して、画像を流し込む空の器を作ります */
    display: inline-flex;
    width: 32px;
    height: 32px;
    
    /* 枠線と綺麗な正円の維持（※もし用意した画像に「丸枠自体がすでに含まれている」場合は、下のborderとborder-radiusの2行は削除してください） */
    border: 1px solid #4a4a4a;
    border-radius: 50%;
    
    /* 修正箇所②：images/ フォルダ内の矢印画像を背景としてジャスト中央に配置。
       CSSファイル（css/front.css）から見た相対パス「../images/」の構造で指定しているため、WordPressのURL関数を使わずとも全ページで100%確実に画像がヒットします */
    background-image: url("../images/arrow.webp") !important; /* 💡拡張子が.pngや.jpgならここを「arrow.png」等に書き換えてください */
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    /* 修正箇所③：矢印の傘のサイズ（スケール感）の調整。
       画像に丸枠が含まれていない場合は「14px auto」程度、丸枠ごと画像になっている場合は「contain」を指定するとFigma通りになります */
    background-size: 45px auto !important; 
    
    /* テキスト用の古いフォント属性を安全のために完全リセット */
    font-family: inherit !important;
    font-weight: normal !important;
    
    transition: transform 0.3s ease;
}

/* マウスを乗せたときに、画像化された矢印が右上へ心地よくスライドするFigma通りのアニメーションは100%継承されます */
.p-top-arrow-btn:hover::after { 
    transform: translate(2px, -2px); 
}

.p-scroll-indicator {
    position: fixed;
    right: 30px !important; 
    top: 160px !important; 
    bottom: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 修正箇所：フッターの裏側へ自然に潜り込ませることで、フッターの上端で線がスパッと区切られて見えるようにするため、レイヤーの重ね順を 99 から「2」へ引き下げ設定 */
    z-index: 2 !important;              
    pointer-events: none;     
}

.p-scroll-indicator_text {
    font-family: "Sawarabi Gothic", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #4a4a4a;
    letter-spacing: 0.15em;
    writing-mode: vertical-rl; 
    white-space: nowrap;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.p-scroll-indicator_line-wrap {
    width: 1px;
    flex-grow: 1 !important; 
    height: auto !important;
    background-color: rgba(74, 74, 74, 0.15); 
    position: relative;
}

.p-scroll-indicator_line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;               
    background-color: #4a4a4a;
    transition: height 0.1s linear; 
}

/* 修正箇所：画面右端を縦に貫通してくるロングインジケーター（z-index: 2）をフッターの上端の境界線で美しく遮断するため、テーマ固有のフッター要素全体のレイヤー階層を最前面（z-index: 10）に引き上げる設定 */
footer, .l-footer, #footer, .footer {
    position: relative !important;
    /* インジケーター（2）を完全に背後へ隠すため、地層を10へロック */
    z-index: 10 !important; 
}

/* ==========================================================================
   1. ファーストビュー（FV）エリア
   ========================================================================== */

.top-fv {
    position: relative;             /* 右側画像を絶対配置するための基準舞台 */
    display: flex;
    width: 100%;
    min-height: 520px;              
    overflow: hidden;               /* 右側への不要なスクロールバーを完全にシャットアウト */
    background-color: #ffffff;
}

/* 左ブロック：テキストエリア（1200pxの左端ラインに文字を固定） */
.top-fv_left {
    position: relative; 
    z-index: 2;                     /* 右の画像よりも確実に「前面」に文字を浮かせる */
    width: 100%;                    /* 領域を100%に広げ、右側へ伸びる大きな文字をホールド */
    display: flex;
    align-items: center;           
    
    padding-left: calc((100vw - min(1200px, 90%)) / 2);
    padding-right: 20px;
    box-sizing: border-box;
}

/* テキストコンテンツの器 */
.top-fv_content {
    width: 100%;
    max-width: 100%;               /* 大きくなった文字が絶対に窮屈にならない横幅を確保 */
    margin-top: -30px;              /* ヘッダーとの視覚的な美しさを考慮した中央微調整 */
}

/* メインコピー */
.top-fv_lead {
    /* 修正箇所：メインコピーのフォントをご指定通り「Sawarabi Mincho」へ変更 */
    font-family: "Sawarabi Mincho", "Noto Serif JP", serif; 
    font-size: 35px;        
    font-weight: 700;
    color: #333333;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 38px;
    white-space: normal;
}

/* ブランド名 */
.top-fv_brand {
    font-size: 35px;
    font-weight: 500;
    color: #4a4a4a;
    letter-spacing: 0.04em;
    display: block;
}

/* 右ブロック：画像エリア*/
.top-fv_right {
    position: absolute; 
    top: 0; 
    left: calc((100vw - min(1200px, 90%)) / 2 + 360px);
    right: 0;                       /* 右側は切り取られることなく、画面幅の限界端まで100%突き抜け */
    height: 70%; 
    padding: 50px 0px 0px 0px;
    z-index: 1;                     /* テキストの「背面」に回り込ませる重なり順 */
}

.top-fv_right picture {
    display: block;
    width: 100%;
    height: 100%;
}

.top-fv_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;              /* 33%への縮小時もパステルの質感を維持して綺麗に追従スケール */
    object-position: left center;   /* グラデーションの美しい始まりのラインを左端に固定 */
}

/* ==========================================================================
   2. VISION セクション（背景色を設計図通りの #E4EEF1 に変更）
   ========================================================================== */
.p-top-vision {
    width: 100%;
    background-color: #E4EEF1;      
    padding: 140px 0 120px 0;            
}

/* 1200pxの中央インナー枠 */
.p-top-vision_inner {
    position: relative;
    width: min(1200px, 90%);
    margin: 0 auto;
}

/* 上部テキストエリア */
.p-top-vision_content {
    padding-left: 110px;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 70px;            
}

.p-top-vision_upper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.p-top-vision_title {
    /* 修正箇所：VISIONセクションタイトルのフォントをご指定通り「Sawarabi Mincho」へ変更 */
    font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
    font-size: 36px;
    font-weight: 700;
    color: #333333;
    line-height: 1.5;
    letter-spacing: 0.06em;
    margin: 0;
    flex-shrink: 0;
    width: 40%;
}

.p-top-vision_body {
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.p-top-vision_text {
    width: 100%;
    margin-bottom: 36px;
}

.p-top-vision_text p {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 2.3;
    letter-spacing: 0.05em;
}

.p-top-vision_btn-wrap {
    margin-top: -25px;
}

/* 画像を包むコンテナ領域 */
.p-top-vision_img-wrap {
    width: calc(100% + (100vw - 100%) / 2); /* 修正箇所：右端はインナーの右限界にピタッと固定したまま、左側を画面の最左端まで引き延ばすための横幅拡張計算 */
    margin-left: calc(-1 * (100vw - 100%) / 2); /* 修正箇所：インナー枠による左側の制限を突破し、画面の左の果てまで隙間なく突き抜けさせるためのネガティブマージン設定 */
    height: 520px;                  
    position: relative;             
    background-color: #f5f5f5;
}

/* ビル群の背景画像本体 */
.p-top-vision_img {
    width: 100%; /* 修正箇所：左側へ拡張されたコンテナ全体の横幅いっぱいに画像を表示させるため100%に変更 */
    height: 100%; /* 修正箇所：高さをコンテナの520pxに完全にフィットさせるため100%に変更 */
    object-fit: cover;
    object-position: right center;  /* 修正箇所：画面幅がどれだけ広がっても、右端の文章やボタンの垂直基準軸からズレないように右側を固定軸に指定 */
}

/* ==========================================================================
3. BUSINESS セクション（1200pxグリッド完全死守 ＆ 比例縮小対応）
========================================================================== */
.p-top-business {
    width: 100%;
    background-color: #ffffff;
    padding: 160px 0 140px 0;
}

/* 1200pxの中央インナー枠 */
.p-top-business_inner {
    position: relative;
    width: min(1200px, 90%);
    margin: 0 auto;
    padding-left: 110px;            /* 大見出しを縦書きから守る安全余白を維持 */
    box-sizing: border-box;
}

/* コンテナ */
.p-top-business_content {
    width: 100%;
}

/* 【1段目】上部見出しブロック */
.p-top-business_header {
    width: 100%;
    margin-bottom: 60px;
}
.p-top-business_title {
    /* 修正箇所：BUSINESSセクションタイトルのフォントをご指定通り「Sawarabi Mincho」へ変更 */
    font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
}
.p-top-business_lead-sub {
    font-size: 14px;
    color: #666666;
    letter-spacing: 0.04em;
}

/* 【2段目】01と02のコンテナ */
.p-top-business_items {
    width: calc(100% + 105px);
    margin-left: -105px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin-bottom: 80px;
}

/* 各事業カード */
.p-top-business_item {
    width: 46%;
    position: relative;             /* 数字を奥（背面）へ潜り込ませる基準点 */
    min-height: 180px;              /* 32pxの大きな文字が綺麗に収まる高さを確保 */
    display: block;
}

.p-top-business_item-num {
    position: absolute;
    top: 0;
    left: 0;                                
    /* 修正箇所：事業ナンバー「01」「02」のフォントをご指定通り「Sawarabi Mincho」へ変更 */
    font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
    font-size: 150px;               
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, #EBE6F5 0%, #EEF5F0 45%, #FAF7EB 75%, #FCF4F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 1;
    pointer-events: none;
}

.p-top-business_item-title {
    position: relative;
    z-index: 2;     
    /* 修正箇所：各事業見出しテキストのフォントをご指定通り「Sawarabi Mincho」へ変更 */
    font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 700;
    color: #333333;
    line-height: 1.4;               
    letter-spacing: 0.05em;
    margin: 0;
    padding-left: 95px;             
    padding-top: 40px;              
    box-sizing: border-box;
}

/* 【3段目】事業内容もっと見るボタン */
.p-top-business_btn-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/*==========================================================================
  4. CEO MESSAGE セクション（PC版：拡大設計図完全準拠・流体2カラム設計）
========================================================================== */
.p-top-ceo {
    width: 100%;
    background-color: #E4EEF1;      /* 設計図の上品で淡いニュアンスグレー背景 */
    padding: 140px 0 140px 0;             
}

/* 1200pxの中央インナー枠 */
.p-top-ceo_inner {
    position: relative;
    width: min(1200px, 90%);
    margin: 0 auto;
}

/* 右側配置の縦書きレーベル */
.p-top_vertical-label--right {
    left: auto;
    right: 0;
}

/* コンテナ（右側の縦書きレーベルを避けるため、右側に110pxの余白を固定） */
.p-top-ceo_content {
    width: 100%;
    padding-right: 110px;
    box-sizing: border-box;
}

/* 【1段目】最上部：会社名 ＆ 代表者名 */
.p-top-ceo_header {
    width: 100%;
    margin-bottom: 40px;
}
.p-top-ceo_company {
    /* 修正箇所：CEOメッセージセクション内会社名のフォントをご指定通り「Sawarabi Mincho」へ変更 */
    font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 700;
    color: #4a4a4a;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.p-top-ceo_position {
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    letter-spacing: 0.04em;
}

/* 【2段目】中部：画像とメッセージの配置エリア */
.p-top-ceo_row {
    width: 100%;
    position: relative;             /* 左の画像を絶対配置するための基準舞台 */
    display: flex;
    justify-content: flex-end;      /* 右側テキストを右端に美しく寄せる */
    margin-bottom: 60px;
}

.p-top-ceo_left {
    position: absolute;
    top: 0;
    bottom: 0;                      
    right: 48%;                     
    width: auto;                    
    margin-left: 0;
}

.p-top-ceo_img-wrap {
    height: 100%;
    width: auto;
}

.p-top-ceo_img {
    height: 100%;
    width: auto;                   
    display: block;
    object-fit: contain;            
}

/* 【右カラム】通常のフローで配置し、テキスト量に合わせたセクションの自然な高さを生み出す主軸 */
.p-top-ceo_right {
    width: 44%;
    flex-shrink: 0;
}
.p-top-ceo_message p {
    font-size: 13px;
    color: #4a4a4a;
    line-height: 2.1;
    letter-spacing: 0.04em;
    margin-bottom: 24px;
}
.p-top-ceo_message p:last-child { margin-bottom: 0; }

.p-top-ceo_message .p-top-ceo_brand {
    font-size: 13px;
    margin-bottom: 16px;
}
.p-top-ceo_message .p-top-ceo_lead {
    font-size: 13px;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* 【3段目】下部：経歴ブロック（1200pxの左端ラインに完全同期） */
.p-top-ceo_biography {
    width: 100%;
}
.p-top-ceo_bio-title {
    /* 修正箇所：経歴見出しのフォントをご指定通り「Sawarabi Mincho」へ変更 */
    font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

/* カンプ通りの細く美しいシャープな区切り中線 ＆ 1行テキスト */
.p-top-ceo_bio-text {
    width: 100%;
    border-top: 1px solid #DCE3E8;
    padding-top: 24px;
}
.p-top-ceo_bio-text p {
    font-size: 13px;
    color: #4a4a4a;
    letter-spacing: 0.04em;
    line-height: 1.8;
}


/* ==========================================================================
   5. RECRUIT セクション（PC版：1200px絶対基準線完全ホールド設計）
   ========================================================================== */
.p-top-recruit {
    width: 100%;
    background-color: #ffffff;      /* CEOのグレーから白へ美しく切り替え */
    padding: 90px 0 110px 0;      /* カンプの品格あるゆったりとした上下余白 */
}

/* 1200pxの中央インナー枠 */
.p-top-recruit_inner {
    position: relative;
    width: min(1200px, 90%);
    margin: 0 auto;
}

/* コンテナ（左側の縦書きレーベルを完璧に避ける110pxの絶対インデント） */
.p-top-recruit_content {
    width: 100%;
    padding-left: 110px;
    box-sizing: border-box;
}

/* メイン行：左右を両端に美しく振り分け */
.p-top-recruit_row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 【左カラム】大見出しエリア（横幅40%を死守） */
.p-top-recruit_left {
    width: 40%;
    flex-shrink: 0;
}
.p-top-recruit_title {
    /* 修正箇所：RECRUITセクションタイトルのフォントをご指定通り「Sawarabi Mincho」へ変更 */
    font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
    font-size: 32px;                
    font-weight: 700;
    color: #333333;
    line-height: 1.5;
    letter-spacing: 0.06em;
}

/* 【右カラム】本文＋ボタンエリア（横幅54%を死守し、右端ラインをヘッダーと完全同期） */
.p-top-recruit_right {
    width: 54%;
    flex-shrink: 0;
}
.p-top-recruit_text {
    width: 100%;
    margin-bottom: 40px;            /* 下の丸ボタンとのラグジュアリーな間隔 */
}
.p-top-recruit_text p {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 2.2;               /* 他の2カラムセクションと共通の上品な行間 */
    letter-spacing: 0.04em;
    margin-bottom: 0px;
}
.p-top-recruit_text p:last-child {
    margin-bottom: 0;
}

/* ボタンの配置（右カラムの中での左寄せ配置：カンプ通り） */
.p-top-recruit_btn-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

@media screen and (max-width: 768px) {
    .p-top_vertical-label {
        display: flex !important;
        left: 0 !important;
        top: -120px !important; 
    }

    .p-top_vertical-label--right {
        right: 0 !important;
        left: auto !important;
    }

    /* --- 1. ファーストビュー（FV）エリア SP修正 --- */
    .top-fv {
        display: block;
        width: 100%;
        min-height: 420px !important;
        padding-top: 0px;
        position: relative;
        background-color: #ffffff; 
        overflow: hidden;
    }
    .top-fv_left {
        width: 100% !important;
        margin: 0 !important;
        padding-left: 24px !important;  
        padding-right: 24px;
        box-sizing: border-box;
        position: relative;
        z-index: 2; 
    }
    .top-fv_content {
        max-width: 100%;
        margin-top: 10px;              
    }
    .top-fv_lead {
        padding-top: 75px;
        font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
        font-size: 30px !important;    
        line-height: 1.7 !important; 
        margin-bottom: 20px;
        color: #333333;
    }
    .top-fv_brand {
        font-size: 18px !important;
        color: #4a4a4a;
        font-weight: normal;
    }

    /* 修正箇所：横幅280pxの固定制限を完全に撤廃。
       スマホ版ヘッダーの左余白（5%）＋ロゴの文字幅（約85px）を計算式（calc）で算出し、
       画面幅が何pxに伸縮しても、常に『e』の右端の真下から背景画像の左端が始まる流体設計へ変革 */
    .top-fv_right {
        position: absolute !important;
        top: 45px !important;       
        
        /* 【完全同期】左端を「e」の右端ラインに固定し、右端は画面の壁（0）までいっぱいに広げる指定 */
        left: calc(5% + 85px) !important; 
        right: 0 !important;        
        
        /* 可変させるため、古い横幅の固定値を完全解除 */
        width: auto !important;     
        height: 300px !important;   
        
        margin-left: 0;
        z-index: 1; /* 文字の後ろ側に潜り込ませて背景化 */
    }

    .top-fv_right picture {
        display: block;
        width: 100%;
        height: 110%;
    }

    .top-fv_img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* 伸縮した際も、カンプ特有の美しいパステルグラデーションの始まり（左側）を基準線にホールド */
        object-position: left center !important; 
    }

    /* --- 2. VISION セクション SP修正 --- */
    .p-top-vision {
        padding: 60px 0;
    }
    .p-top-vision_content {
        padding-left: 45px !important;
        margin-bottom: 40px;
    }
    .p-top-vision_upper {
        display: block;
    }
    .p-top-vision_title {
        font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
        width: 100%;
        font-size: 26px;
        margin-bottom: 24px;
    }
    .p-top-vision_body {
        width: 100%;
    }
    
    .p-top-vision_img-wrap {
        /* 修正箇所：2枚目の設計図通りにSP版でもビルの画像が左側へ画面端まで突き抜けるように拡張計算式を適用 */
        width: calc(100% + (100vw - 100%) / 2) !important; 
        /* 修正箇所：インナー枠の制限を突破して左の最果てまで画像を引き延ばすためのネガティブマージン設定 */
        margin-left: calc(-1 * (100vw - 100%) / 2) !important; 
        height: auto;               
        position: relative; /* 修正箇所：左側への突き抜け配置を成立させるため、staticからrelativeへ変更 */
        aspect-ratio: 16 / 9;
    }
    .p-top-vision_img {
        position: static;           
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
    }

    /* --- 3. BUSINESS セクション SP修正 --- */
    .p-top-business { 
        padding: 80px 0; 
    }
    .p-top-business_inner { 
        padding-left: 45px !important; 
    }
    .p-top-business_header { 
        padding-left: 0; 
        margin-bottom: 40px; 
    }
    .p-top-business_title { 
        font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
        font-size: 22px; 
    }
    .p-top-business_items {
        width: 100%;
        margin-left: 0;
        display: block;
        margin-bottom: 40px;
    }
    .p-top-business_item {
        width: 100%;
        margin-bottom: 32px;
        min-height: 110px;
    }
    .p-top-business_item:last-child { 
        margin-bottom: 0; 
    }
    .p-top-business_item-num {
        font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
        font-size: 100px;
    }
    .p-top-business_item-title {
        font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
        font-size: 20px;            
        padding-left: 55px;
        padding-top: 35px;
    }

    /* ==========================================================================
       【新設】2つ目の事業カード（偶数番目）を右寄せにして、美しい交互レイアウトへ変換
       ========================================================================== */
    /* ① 特大数字「02」を、左端から「右端」へ100%きれいにジャンプさせます */
    .p-top-business_item:nth-child(even) .p-top-business_item-num {
        left: auto !important;
        right: 0 !important;
    }
    
    /* ② テキストを右寄せ（text-align: right）にし、余白の方向を左から右（padding-right）へ反転。
       これにより、右側に配置された数字とぶつかることなく、2枚目のカンプ通りの美しい右ツラ合わせになります */
    .p-top-business_item:nth-child(even) .p-top-business_item-title {
        text-align: right !important;
        padding-left: 0 !important;
        padding-right: 55px !important;
    }
    .p-top-business_btn-wrap {
        justify-content: center;
    }

    /* --- 4. CEO MESSAGE セクション SP修正 --- */
   .p-top-ceo { 
        padding: 60px 0; 
    }
    .p-top-ceo_content { 
        padding-right: 45px !important; 
    }
    .p-top-ceo_header { 
        margin-bottom: 24px; 
    }
    .p-top-ceo_company { 
        font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
        font-size: 20px; 
    }
    .p-top-ceo_row { 
        display: block; 
        margin-bottom: 40px; 
    }
    
    /* 修正箇所：強引な画面外への突き抜け手法を完全に廃止。
       横幅を100%にリセットすることで、自動的に「インナーの左端」が画像の開始位置になります。
       同時に、右端は親要素の持つ縦書き余白（45px）の手前にピタッと接して綺麗に収まる安全なブロック構造へ修正 */
    .p-top-ceo_left { 
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 24px !important;
        /* PC版の絶対配置プロパティをSP環境下で完全に無効化リセット */
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
    
    .p-top-ceo_img-wrap { 
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important; 
        display: block !important;
    }
    
    .p-top-ceo_img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        /* 修正箇所：枠内にきれいに収まったため、写真が不自然にトリミングされることなく、今野様の表情が最も美しいバランスで中央に表示されるよう調整 */
        object-fit: cover !important;
        object-position: center center !important;
    }
    
    .p-top-ceo_right { 
        width: 100%; 
        margin-left: 0; 
    }
    .p-top-ceo_message p { 
        font-size: 14px; 
    }
    .p-top-ceo_biography { 
        margin-top: 32px; 
    }
    .p-top-ceo_bio-title {
        font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
    }

    /* --- 5. RECRUIT セクション SP修正 --- */
    .p-top-recruit {
        padding: 80px 0;
    }
    .p-top-recruit_content {
        padding-left: 45px !important; 
    }
    .p-top-recruit_row {
        display: block; 
    }
    .p-top-recruit_left {
        width: 100%;
        margin-bottom: 28px;
    }
    .p-top-recruit_title {
        font-family: "Sawarabi Mincho", "Noto Serif JP", serif;
        font-size: 24px;
    }
    .p-top-recruit_right {
        width: 100%;
    }
    .p-top-recruit_text {
        margin-bottom: 32px;
    }
    .p-top-recruit_text p {
        font-size: 14px;
    }
    .p-scroll-indicator {
        right: 8px !important; 
        /* 修正箇所：スマホヘッダーのすぐ下から美しく線をスタートさせるための初期高さ位置 */
        top: 140px !important; 
        bottom: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2 !important;              
        pointer-events: none; 
    }
}

#p-loading {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* カンプ通りのクリーンな真っ白背景 */
    
    /* ヘッダーやドロワー、スクロール線など、サイト上の全特級レイヤーを完全に覆い隠す最前面階層 */
    z-index: 999999 !important; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    
    /* 修正箇所：読み込み完了後にパッと消えるのではなく、
       0.8秒かけて背景とロゴが「ふわっと残像を残しながら消えていく」フェードアウトの滑らかさ設定 */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 読み込み完了（JSと連動）でフェードアウトさせるトリガークラス */
#p-loading.is-loaded {
    opacity: 0 !important;
    pointer-events: none !important; /* 消滅後はクリックを完全に貫通させる */
}

.p-loading_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;            /* 会社名ロゴとバーの間の心地よい縦の隙間 */
    width: min(320px, 80%); /* 画面が縮んでも絶対に崩れない安全ホールド幅 */
    text-align: center;
}

.p-loading_logo {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 40px;
    font-weight: 500;
    color: #4a4a4a;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap !important;
}

/* ローディングバーの土台（うっすらグレーの上品なカプセル形状） */
.p-loading_bar-wrap {
    width: 100%;
    height: 6px;          /* カンプの繊細なラインに合わせたスタイリッシュな太さ */
    background-color: #f2f2f2;
    border-radius: 100px !important;
    overflow: hidden;
    position: relative;
}

/* 実際に伸びていくバー本体（サイト共通の4色美麗パステルグラデーション） */
.p-loading_bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;            /* 最初は0%（JSで進捗をコントロール） */
    background: linear-gradient(90deg, #e2daeb 0%, #e1f3e8 45%, #faf5e2 75%, #faeae5 100%) !important;
    border-radius: 100px !important;
    transition: width 0.15s linear !important; /* バーが伸びる際のスムーズな連動感 */
}

@media screen and (max-width: 768px) {
    .p-loading_logo {
        font-size: 35px;   /* スマホの画面比率に合わせた美しいコンパクトサイズ */
    }
    .p-loading_inner {
        width: min(200px, 70%) !important; /* スマホでバーが長くなりすぎない絶妙なホールド感 */
        gap: 18px;
    }
}