@charset "UTF-8";
/* ====================================================
　共通CSS（ファーストビュー内：変数・リセット・ヘッダー）
　common_first.css
==================================================== */


/* ######################################################################################

　CSS変数

###################################################################################### */

:root{
    --color-primary: #385599;
    --color-primary-light: #b2c7e5;
    --color-bg-light: #e4eaf1;
    --color-bg-alt: #f7f7f7;
    --color-bg-dark: #1a1f2e;
    --color-text: #333;
    --color-text-sub: #777;
    --color-border: #d8dde5;
    --color-white: #fff;
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-serif: 'Zen Old Mincho', serif;
    --font-serif-work: 'Noto Serif JP', serif;
    --font-accent: 'Zen Kaku Gothic Antique', sans-serif;
    --font-din: 'din-condensed', sans-serif;
    --container-width: 1440px;
    /* margin/paddingはem・%・vw・vhのみを使用する（pxは使わない）ため、
       コンテナ左右余白もvw／emベースの値を変数に保持する */
    /* 2026-08-10：サイト基準幅(1500px)未満でPCレイアウトを縮小しない新ルールにより、
       vwによる比例縮小をやめ、デザイン値（40px相当）で固定する（.mddocs/coding/coding_base.md
       「レスポンシブ実装ルール」参照）。SP側（--container-pad-sp）はvwのまま維持する */
    --container-pad-pc: 2.5em;  /* 40px相当（body 1.6rem=16px基準固定） */
    --container-pad-sp: 5.1282vw;              /* 20px相当（390px基準・上限固定なし） */
    --transition: 0.3s ease;
    /* .headerの高さ（88px/68px）と同期する固定オフセット。.headerがpx固定
       サイズのため、追随するこの変数もpx固定とする（他のmargin/paddingの
       vw/em原則の対象外＝ヘッダー実寸に一致させる必要がある値のため） */
    --header-offset: 88px;
}
@media screen and (max-width: 767px){
    /* ベース文字色：Figma実測はSPで#242424（PC側は#333のまま、今回の
       対応対象外のため変更しない）。--color-textを参照している箇所
       （bodyの継承色・各コンポーネントのvar(--color-text)指定）全体に
       波及させ、white/リンク色/アクセント色/背景色別の指定など
       --color-text以外の変数を使う箇所には影響しない */
    :root{
        --color-text: #242424;
        --header-offset: 68px;
    }
}


/* ######################################################################################

　リセット

###################################################################################### */

*, *::before, *::after{
    box-sizing: border-box;
}
html{
    /* フォントサイズはremを基準とする。1rem=10pxで暗算しやすくするため
       ルートのfont-sizeを10pxとする */
    font-size: 10px;
    scroll-behavior: smooth;
}
/* アンカー遷移時、固定ヘッダー（.header）の下に対象要素が隠れないための
   共通オフセット。個別要素へのmargin-top追加ではなく、id付き要素全体に
   一括適用する（--header-offsetは.headerの実高さと同期、上のブレーク
   ポイントで切り替わる） */
[id]{
    scroll-margin-top: var(--header-offset);
}
body{
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--color-text);
    background: var(--color-white);
}
/* PCレイアウトの最低幅（サイト基準幅=1500px）。767px〜1500px未満のPC環境では
   レイアウトを縮小せず、収まらない分はブラウザ標準の横スクロールに任せる。
   SPブレイクポイント以下では解除しSP専用レイアウトへ切り替える
   （.mddocs/coding/coding_base.md「レスポンシブ実装ルール」参照） */
@media print, screen and (min-width: 768px){
    body{ min-width: 1500px; }
}
@media screen and (max-width: 767px){
    body{ min-width: 0; }
}
img{
    display: block;
    max-width: 100%;
    height: auto;
}
a{
    color: inherit;
    text-decoration: none;
}
ul, ol{
    list-style: none;
    margin: 0;
    padding: 0;
}
p, h1, h2, h3, h4, h5, h6, figure, dl, dt, dd{
    margin: 0;
    padding: 0;
}
button{
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
}


/* ######################################################################################

　アクセシビリティ

###################################################################################### */

.sr-only{
    overflow: hidden;
    clip: rect(0,0,0,0);
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    white-space: nowrap;
    border: 0;
}
@media print, screen and (min-width: 768px){
    .sr-only.sp{ display: none; }
}
@media screen and (max-width: 767px){
    .sr-only.pc{ display: none; }
}
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ######################################################################################

　コンテンツ共通コンテナ

###################################################################################### */

/* ----- contents ----- */
.contents{
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-pad-sp);
    padding-left: var(--container-pad-sp);
}
@media print, screen and (min-width: 768px){
    .contents{
        max-width: var(--container-width);
        padding-right: var(--container-pad-pc);
        padding-left: var(--container-pad-pc);
    }
}
@media screen and (max-width: 767px){
    .contents{
        padding-right: var(--container-pad-sp);
        padding-left: var(--container-pad-sp);
    }
}

/* ----- contents.narrow（下層ページ本文用の狭コンテナ：内側1200px＋左右パディング） ----- */
@media print, screen and (min-width: 768px){
    .contents.narrow{ max-width: 1280px; }
}


/* ######################################################################################

　ヘッダー

###################################################################################### */

/* ----- header ----- */
.header{
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}
@media print, screen and (min-width: 768px){
    .header{ height: 88px; }
}
@media screen and (max-width: 767px){
    .header{ height: 68px; }
}

/* header__logo
---------------------------------------------------- */
.header__logo{
    flex-shrink: 0;
    padding-left: 3.125em; /* Figma実測50px相当（bodyの1.6rem=16px基準） */
}
.header__logoLink{ display: block; }
.header__logo img{
    width: 173px;
    height: auto;
}
@media screen and (max-width: 767px){
    .header__logo{
        padding-left: var(--container-pad-sp);
    }
    .header__logo img{ width: 30.7692vw; }
}
@media screen and (max-width: 767px){
    .header__logo{ margin-right: auto; }
}

/* header__ctaBtn
---------------------------------------------------- */
.header__ctaBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5714em; /* 8px相当（自身のfont-size 1.4rem=14px基準） */
    flex-shrink: 0;
    width: 180px;
    height: 48px;
    margin-right: 3.5714em; /* Figma実測50px相当（自身のfont-size 1.4rem=14px基準） */
    border-radius: 4px;
    background: var(--color-primary);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-white);
    transition: opacity var(--transition);
    white-space: nowrap;
}
.header__ctaBtn:hover{ opacity: 0.8; }
.header__ctaBtnIcon{ flex-shrink: 0; }
@media screen and (max-width: 767px){
    .header__ctaBtn{ display: none; }
}

/* meanToggle（SPハンバーガーボタン・JS動的生成）
---------------------------------------------------- */
.meanToggle{
    display: none;
    flex-direction: column;
    justify-content: center;
    /* align-itemsが未指定だとアイコン線（22px幅）が44px幅のタップ領域内で
       左端に寄ってしまい（右側だけ22px分の余白ができる）、右余白が
       上下余白より不自然に大きく見える原因になっていた。Figma実測でも
       アイコンは左右均等（11px/11px）に配置されているため中央揃えにする */
    align-items: center;
    gap: 0.3125em; /* 5px相当（bodyの1.6rem=16px基準） */
    /* タップ領域はFigma実測(44×44)のまま、ハンバーガーが有効な全幅で統一する
       （操作性・アクセシビリティ上の最低サイズを優先。width/heightは
       margin/paddingの単位ルール対象外のためpx指定のまま） */
    width: 44px;
    height: 44px;
    margin-right: var(--container-pad-sp);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.meanToggle__line{
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: transform var(--transition), opacity var(--transition);
}
.meanToggle.is-open .meanToggle__line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.meanToggle.is-open .meanToggle__line:nth-child(2){ opacity: 0; }
.meanToggle.is-open .meanToggle__line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media screen and (max-width: 767px){
    .meanToggle{ display: flex; }
}

/* ----- gnav（PCグローバルナビ）----- */
.gnav{
    display: flex;
    align-items: center;
    margin-left: auto;
    height: 100%;
    padding-right: 3.125em; /* Figma実測50px相当（bodyの1.6rem=16px基準） */
}
.gnav__list{
    display: flex;
    align-items: center;
    gap: 2.5em; /* Figma実測40px相当（同上） */
}
.gnav__item{ position: relative; }
.gnav__link{
    display: block;
    font-weight: 700;
    font-size: 1.5rem; /* Figma実測15px */
    color: var(--color-text);
    transition: color var(--transition);
    white-space: nowrap;
}
.gnav__link:hover{ color: var(--color-primary); }

/* gnav__item.is-current（現在地：文字色＋下線インジケーター）
---------------------------------------------------- */
.gnav__item.is-current .gnav__link{ color: var(--color-primary); }
@media print, screen and (min-width: 768px){
    .gnav__item.is-current::after{
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        bottom: -25px;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: var(--color-primary);
    }
}
@media screen and (max-width: 767px){
    .gnav{ display: none; }
}


/* ######################################################################################

　SPナビゲーション（meanMenu）

###################################################################################### */

/* ----- meanMenu ----- */
/* Figma「Navigation - Menu Open (Drawer state)」に合わせ、画面幅いっぱいの
   白背景パネルとして実装する（左からのスライド式ドロワーではない）。
   背面の暗幕オーバーレイ（.meanMenuOverlay）はFigmaにない実装側の追加仕様。
   開閉は height ではなく opacity/visibility で制御し、フェード＋わずかな
   スライドで表現する（Figma側にモーション指定はないため実装側の任意選択） */
.meanMenu{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 68px;
    left: 0;
    z-index: 99; /* .meanMenuOverlay（98）より上、.header（100）より下 */
    width: 100%;
    max-height: calc(100% - 68px);
    padding-top: min(2.0513vw, 0.5em);    /* 8px相当（390px基準／自身のfont-size16px基準） */
    padding-bottom: min(6.1538vw, 1.5em); /* 24px相当（同上） */
    background: var(--color-white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
    pointer-events: none;
}
.meanMenu.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
@media print, screen and (min-width: 768px){
    .meanMenu{ top: 88px; max-height: calc(100% - 88px); }
}

/* meanMenuOverlay（実装側の追加仕様：Figmaとの差異ではない）
---------------------------------------------------- */
.meanMenuOverlay{
    position: fixed;
    inset: 0;
    z-index: 98; /* ページコンテンツより上、.meanMenu（99）より下 */
    background: rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    pointer-events: none;
}
.meanMenuOverlay.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
@media print, screen and (min-width: 768px){
    .meanMenuOverlay{ display: none !important; }
}

/* meanMenu__list
---------------------------------------------------- */
.meanMenu__list{ flex-shrink: 0; }
.meanMenu__list .gnav__item{
    border-bottom: 1px solid #e6e6e6; /* Figma実測（--color-borderとは別値） */
}
.meanMenu__list .gnav__link{
    display: block;
    padding-top: 1em;      /* 16px相当（自身のfont-size 1.6rem=16px基準） */
    padding-right: 1.5em;  /* 24px相当（同上） */
    padding-bottom: 1em;   /* 16px相当（同上） */
    padding-left: 1.5em;   /* 24px相当（同上） */
    font-size: 1.6rem; /* PC・タブレット相当：1200px基準で比例縮小 */
    line-height: 1.2; /* bodyの1.8を継承すると行高が膨らみ、Figma実測の行高51px（390px基準）からずれるため上書き */
    color: #242424; /* Figma実測（--color-textとは別値） */
}

/* meanMenu__cta
---------------------------------------------------- */
.meanMenu__cta{
    flex-shrink: 0;
    padding-top: min(4.1026vw, 1em);     /* 16px相当（390px基準／自身のfont-size16px基準） */
    padding-right: min(6.1538vw, 1.5em); /* 24px相当（同上） */
    padding-left: min(6.1538vw, 1.5em);  /* 24px相当（同上） */
}
.meanMenu__ctaBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: min(4.1026vw, 1em);    /* 16px相当 */
    padding-bottom: min(4.1026vw, 1em); /* 16px相当 */
    border-radius: 4px;
    background: var(--color-primary);
    font-weight: 700;
    font-size: 1.5rem; /* PC・タブレット相当：1200px基準で比例縮小 */
    line-height: 1.2; /* bodyの1.8を継承すると高さが膨らむため上書き（gnav__linkと同じ理由） */
    color: var(--color-white);
}

/* meanMenu__list/__ctaBtn（SP：常に画面幅との比率＝vwで指定）
   .meanToggle・.meanMenuは768〜1260pxのタブレット幅でも表示されるため、
   文字サイズのみ max-width:767px にスコープして上書きする。SPの文字
   サイズはFigma値を上限として固定せず、常にvwで画面幅と連動させる
---------------------------------------------------- */
@media screen and (max-width: 767px){
    .meanMenu__list .gnav__link{ font-size: 4.1026vw; }  /* Figma実測16px（390px基準） */
    .meanMenu__ctaBtn{ font-size: 3.8462vw; }             /* Figma実測15px（同上） */
}

@media print, screen and (min-width: 768px){
    .meanMenu{ display: none !important; }
}


/* ######################################################################################

　下層ページ　ページタイトルバナー（pageHead）
　concept/contact/recruit/service/worksDetail/estate/company/partner/privacy/works の
　9〜10ページで共通のバナー型ページタイトル。ページごとの差異はCSS変数で吸収し、
　変数で吸収できない差異（.pageHead__inner のSP再配置構造・overlayの有無等）は
　各ページの pageXXX_first.css 側に個別のオーバーライドとして残す。

　使い方：
　<section class="pageHead">
　    <img class="pageHead__bg" src="..." alt="">
　    <div class="pageHead__overlay" aria-hidden="true"></div><!-- 任意 -->
　    <div class="pageHead__inner contents narrow">
　        <p class="pageHead__en">EN LABEL</p>
　        <h1 class="pageHead__heading">日本語見出し</h1>
　    </div>
　</section>

###################################################################################### */

/* ----- pageHead ----- */
.pageHead{
    overflow: hidden;
    position: relative;
    background: #050d26;
}
@media print, screen and (min-width: 768px){
    /* margin-topは.header（固定88px・position:fixed）の高さに揃える固定値。
       vwで縮小すると1500px未満の画面幅で.pageHeadが固定ヘッダーの下に隠れるため
       pxのまま固定する（em/vwクランプ化しない） */
    .pageHead{ height: 260px; margin-top: 88px; }
}
@media screen and (max-width: 767px){
    /* margin-topは.header（固定68px）の高さに揃える固定値（理由はPC側と同様） */
    .pageHead{ height: max(164.1px, 51.2821vw); margin-top: 68px; }
}

/* pageHead__bg
---------------------------------------------------- */
.pageHead__bg{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* pageHead__overlay（写真の上に重ねる暗幕。要素自体を置かないページ（worksDetail）は
   このルールの影響を受けない）
---------------------------------------------------- */
.pageHead__overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0f2351;
    opacity: var(--pageHead-overlay-opacity-sp, 0.35);
}
@media print, screen and (min-width: 768px){
    .pageHead__overlay{
        opacity: var(--pageHead-overlay-opacity-pc, 0.35);
        mix-blend-mode: multiply;
    }
}

/* pageHead__inner
---------------------------------------------------- */
.pageHead__inner{
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    height: 100%;
}
@media print, screen and (min-width: 768px){
    .pageHead__inner{ justify-content: center; }
}
@media screen and (max-width: 767px){
    /* Figma SPは下揃え＋左右パディング（共通.contentsの20pxとは異なる）。
       すべてvwで画面幅に比例拡縮（Figma基準390px） */
    .pageHead__inner{
        justify-content: flex-end;
        gap: var(--pageHead-inner-gap-sp, 2.0513vw);
        padding-right: var(--pageHead-inner-padX-sp, 6.1538vw);
        padding-left: var(--pageHead-inner-padX-sp, 6.1538vw);
        padding-bottom: var(--pageHead-inner-padBottom-sp, 6.1538vw);
    }
}

/* pageHead__en
---------------------------------------------------- */
.pageHead__en{
    font-family: var(--font-serif);
    font-weight: 900;
    line-height: var(--pageHead-en-lineHeight, 1.25);
    letter-spacing: 0.05em;
    color: var(--color-white);
}
@media print, screen and (min-width: 768px){
    .pageHead__en{ font-size: 1.8rem; }
}
@media screen and (max-width: 767px){
    .pageHead__en{ font-size: var(--pageHead-en-fontSize-sp, 3.8462vw); }
}

/* pageHead__heading
---------------------------------------------------- */
.pageHead__heading{
    font-family: var(--font-serif);
    font-weight: 900;
    line-height: var(--pageHead-heading-lineHeight, 1.25);
    letter-spacing: 0.2em;
    color: var(--color-white);
}
@media print, screen and (min-width: 768px){
    .pageHead__heading{
        margin-top: var(--pageHead-heading-marginTop-pc, 0.25em);
        font-size: 4rem;
    }
}
@media screen and (max-width: 767px){
    .pageHead__heading{
        margin-top: 0;
        font-size: var(--pageHead-heading-fontSize-sp, 7.6923vw);
        letter-spacing: var(--pageHead-heading-letterSpacing-sp, 1.0256vw);
    }
}