/* --- リセット & 基本設定 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.6;
    color: #333;

    /* アニメーションの設定 */
    animation: pageFadeIn 2.0s ease-out forwards;
}

main {
    max-width: 100vw;
    overflow-x: hidden;
}

@keyframes pageFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 補足：見出しをより強調したい場合 */
h1,
h2,
h3,
.btn {
    font-weight: 700;
    /* 太字を適用 */
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    margin: 0 auto;
    padding: 0 20px;
}

.f11{font-size:1.1em;}
/* --- 修正版ヘッダー設定 --- */
header {
    height: 110px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    /* 追加：位置を固定 */
    left: 0;
    /* 追加：左端に固定 */
    width: 100%;
    background: transparent;
    z-index: 100;
    transition: height 0.8s ease-in-out, background 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
}

/* --- ロゴ1（通常時：帰り道の設定） --- */
.main-logo {
    height: 60px;
    width: auto;
    /* ロゴも戻る時に 0.8s かけるように設定 */
    transition: height 0.8s ease-in-out, transform 0.3s ease, filter 0.8s ease-in-out;
}

/* --- ロゴ2（通常時：帰り道の設定） --- */
.main-logo2 {
    height: 30px;
    width: auto;
    /* ロゴも戻る時に 0.8s かけるように設定 */
    transition: height 0.8s ease-in-out, transform 0.3s ease, filter 0.8s ease-in-out;
}

/* --- スクロール時（行き道の設定） --- */
header.scrolled {
    height: 60px;
}

header.scrolled .main-logo {
    height: 40px;
    /* 小さくなった時のサイズ */
}

header.scrolled .main-logo2 {
    height: 20px;
    /* 小さくなった時のサイズ */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* 全幅を確保 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* スマホ時にロゴが端に寄りすぎないよう余白を確保 */
}

/* --- ロゴを中央に配置する設定（常時表示版） --- */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 30;
    pointer-events: none;
}

.hero-content h1 {
    margin: 0;
    padding: 0;
}

.logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    text-decoration: none;
    pointer-events: auto;

    /* アニメーションとopacity:0を削除し、最初から表示 */
    opacity: 1;
}

.main-logo {
    height: 60px;
    width: auto;
    /* 背景が動くので、視認性を高めるためのドロップシャドウ */
    filter: drop-shadow(0 5px 15px rgba(255, 255, 255, 0.4));
    transition: transform 0.3s ease;
}

.main-logo2 {
    height: 30px;
    width: auto;
    /* 初期状態のドロップシャドウを少し控えめにすると変化がより綺麗です */
    filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.4)) brightness(1);

    /* ↓ ここを長めに設定（0.8秒かけてじわっと変化） */
    transition: transform 0.3s ease, filter 0.3s ease-in-out;
    will-change: filter;
}

/* --- ヘッダーが .hero を抜けた後の設定 --- */
header.scrolled {
    background: rgba(255, 255, 255, 0.9);
    /* 必要であればヘッダー背景を白く */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ヘッダーがスクロールされた時 */
header.scrolled .main-logo2 {
    /* brightness(0) で黒へ。シャドウは透明にするか黒用に変更 */
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) brightness(0);
}

/* もし logo-01 も黒くしたい場合は同様に追加 */
header.scrolled .main-logo {
    /* 元がカラーの場合は、grayscale(1) brightness(0) などを組み合わせます */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-link:hover .main-logo {
    transform: scale(1.05);
}

/* モバイル対応 */
@media (max-width: 768px) {
    .logo-link {
        gap: 15px;
    }

    .main-logo {
        height: 45px;
    }
}

nav ul {
    display: flex;
}

nav ul li {
    margin-left: 20px;
}
.sub-page .main-logo2 {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) brightness(0);
}

.sub-page nav ul li a {
    color: #005dac;
    text-decoration: none;
    font-weight: 500;

    /* ロゴの変化時間(0.8s)と合わせることで、一体感を出します */
    transition: color 0.8s ease-in-out;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;

    /* ロゴの変化時間(0.8s)と合わせることで、一体感を出します */
    transition: color 0.8s ease-in-out;
}

/* --- ヘッダーが .hero を抜けた後の設定 --- */
header.scrolled nav ul li a {
    /* 落ち着いた黒（#333）に変更 */
    color: #333;
}

/* ついでに、ホバー時の色も変える場合はここに追加 */
header.scrolled nav ul li a:hover {
    color: #000;
    /* ホバー時は真っ黒にするなど */
}

nav ul li a:hover {
    color: #8cbed8;
}
.index nav ul li a:hover {
    color: #3766a9;
}

/* --- ハンバーガーボタンのスタイル --- */

/* --- メインビジュアル (Hero) --- */
.hero {
    width: 100vw;
    overflow-x: hidden;
    height: 110vh;
    /* 画面いっぱいの高さ */
    background-color: #8cbed8;
    /* 指定の背景色 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    position: relative;
    /* 雲を絶対配置するための基準 */
    overflow: hidden;
    /* 画面外に出た雲を隠す */
}


/* --- キャッチコピーの設定 --- */
.hero-copy {
    position: absolute;
    top: 12%;
    /* 指定の位置 */
    left: 21%;
    /* 指定の位置 */
    z-index: 31;
    /* ロゴ(30)の近く、または少し手前 */
    pointer-events: none;
    will-change: opacity;

    /* キャラクターと同じタイミング（2.5s）でフェードイン */
    animation: fadeInSimple 1.5s ease-out 1.5s forwards;
    opacity: 0;
    height: 40%;
}

.hero-copy img {
    width: auto;
    height: 100%;

}

/* 以前作成したフェードイン用のアニメーション（もし消していれば復活させてください） */
@keyframes fadeInSimple {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100vw - 15px);
    overflow-x: hidden;
    height: 100%;
    pointer-events: none;
}

.cloud {
    position: absolute;
    right: -250px;
    animation: flowCloud linear infinite;

    /* ↓ 滑らかさアップのための追加コード ↓ */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 右から左へ流れる動き（3Dアクセラレーション版） */
@keyframes flowCloud {
    0% {
        /* translateX(0) を translate3d(0, 0, 0) に変更 */
        transform: translate3d(0, 0, 0);
    }

    100% {
        /* 移動も3Dで行う（Z軸は0で固定） */
        transform: translate3d(calc(-100vw - 300px), 0, 0);
    }
}

/* 各雲の個別設定（高さとスピードをバラバラにする） */
/* 各雲の個別設定：高さ・速さ・初期位置（delay）を大胆に変える */

.cloud-1 {
    top: 5%;
    animation-duration: 100s;
    /* 50秒のうち20秒分をすでに進んだ状態にする */
    animation-delay: -50s;
    max-width: 60px;
}

.cloud-2 {
    top: 16%;
    /* 重なりを避けるため少し下げました */
    animation-duration: 70s;
    /* 36秒のうち10秒分進める */
    animation-delay: -100s;
    max-width: 80px;
}

.cloud-3 {
    top: 20%;
    animation-duration: 140s;
    /* 70秒のうち半分以上の45秒分進める（左寄りに配置される） */
    animation-delay: -45s;
    max-width: 70px;
}

.cloud-4 {
    top: 12%;
    animation-duration: 88s;
    /* 44秒のうち30秒分進める */
    animation-delay: -60s;
    max-width: 85px;
}

.cloud-large {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
    pointer-events: none;

    /* アニメーション設定 */
    animation: energeticRise 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

    /* 基準位置は固定し、移動はtransformで行う */
    top: 0;
    opacity: 0;

    /* ハードウェアアクセラレーションを強制（おまじない） */
    will-change: transform, opacity;
}

@keyframes energeticRise {
    0% {
        /* Y軸方向に5%分下げ、少し縮小した状態からスタート */
        transform: translateY(5%) scale(0.95);
        opacity: 0;
    }

    100% {
        /* 最終的に -10% の位置まで移動し、等倍に戻す */
        transform: translateY(-30%) scale(1);
        opacity: 1;
    }
}

/* --- 前景：街並みの設定（調整版） --- */
.hero-city {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    overflow-x: hidden;
    height: 85%;
    z-index: 20;
    pointer-events: none;

    /* 子要素（img）を中央に寄せるための設定 */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* 下側にくっつける */
}

.hero-city img {
    width: auto;
    height: 100%;
    /* 指定通り cover で配置 */
    /* 下側を基準に表示（地面が切れないように） */

    object-position: bottom;

    /* もし街並みの現れ方もスムーズにしたい場合は以下を追加 */
    will-change: transform;
}

/* ヒーローコンテンツ（文字など）は一番手前に来るように調整 */
.hero-content {
    position: relative;
    z-index: 30;
    /* 街並みよりさらに手前 */
}

/* ドローンの可動域（heroセクションと同じ大きさ） */
.drone-home {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-drone {
    position: absolute;
    top: 15%;
    right: 30%;
    width: 100px;
    z-index: 100;
    will-change: transform, opacity;
    transform: translateZ(0);

    /* ↓ ここが重要：0.3〜0.5秒程度の遅延（慣性）を作る ↓ */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
    z-index: 40;
}

.clouds,
.cloud {
    /* 画面外に流れる雲の計算を軽くする */
    pointer-events: none;
    backface-visibility: hidden;
}

.hero-drone.returning {
    transition: transform 1.2s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.5s ease;
    transform: translate(0, -400px) !important;
    opacity: 0;
}

.drone {
    width: 100%;
    /* 八の字ホバーはCSSで継続 */
    animation: droneInfinity 8s ease-in-out infinite;
}

/* 八の字アニメーション（前回のもの） */
@keyframes droneInfinity {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(30px, -15px) rotate(5deg);
    }

    50% {
        transform: translate(0, 0) rotate(0deg);
    }

    75% {
        transform: translate(-30px, -15px) rotate(-5deg);
    }
}

/* --- 風車の設定 --- */
/* --- 風車の共通設定（既存のコードを流用） --- */
.windmill {
    position: absolute;
    z-index: 21;
    pointer-events: none;
}

/* --- 個別設定：位置・大きさ・速さ --- */

/* 1番目：左側（手前・大きめ） */
.wm-1 {
    left: 5%;
    bottom: 35%;
    transform: scale(1);
    /* 基準サイズ */
}

.wm-1 .windmill-head {
    animation-duration: 8s;
    /* 標準的な速さ */
}

/* 2番目：右側（少し奥・少し小さい） */
.wm-2 {
    left: 85%;
    bottom: 40%;
    transform: scale(0.9);
    /* 70%の大きさに */
}

.wm-2 .windmill-head {
    animation-duration: 12s;
    /* 少しゆっくり */
    animation-delay: -2s;
    /* 回転のタイミングをずらす */
}

/* 3番目：中央付近（さらに奥・かなり小さい） */
.wm-3 {
    left: 15%;
    bottom: 50%;
    transform: scale(0.7);
    /* 50%の大きさに */
}

.wm-3 .windmill-head {
    animation-duration: 15s;
    /* ゆっくり回る */
    animation-delay: -5s;
    /* タイミングをずらす */
}

.windmill-leg {
    width: 100%;
    height: auto;
    display: block;
    width: 6vw;
}

.windmill-head {
    position: absolute;
    /* 足の先端（上端）に配置 */
    top: 42%;
    left: 50%;

    /* 羽のサイズ（足の幅より大きく設定） */
    width: 6vw;

    /* 重要：
       1. translate(-50%, -50%) で羽の「中心」を足の「先端」に重ねる
       2. rotate(0deg) をアニメーションの開始位置として設定
    */
    transform: translate(-50%, -50%) rotate(0deg);

    /* 回転軸を画像の中心に固定 */
    transform-origin: center center;

    /* 回転アニメーション */
    animation: rotateWindmill 8s linear infinite;

    will-change: transform;
}

/* 回転アニメーション（translateを維持したまま回すのがコツ） */
@keyframes rotateWindmill {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* --- 最前面：大きな雲の枠（境界線） --- */
.hero-bottom-cloud {
    position: absolute;
    bottom: -1px;
    /* 下端の隙間を消すためにわずかにマイナス */
    left: 0;
    width: 100%;
    z-index: 25;
    /* 街並み(20)や風車(21)より手前 */
    pointer-events: none;

    /* 下からふわっと持ち上がる演出（必要なければ animation を消してください） */
    animation: slideUpCloud 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    transform: translateY(20%);
    /* 初期位置を少し下げておく */
    opacity: 0;
}

.hero-bottom-cloud img {
    width: 100%;
    height: auto;
    display: block;
    /* 下側の境界を馴染ませるために少し影をつけるのもアリです */
    filter: drop-shadow(0 -5px 15px rgba(0, 0, 0, 0.05));
}

@keyframes slideUpCloud {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- キャラクターの設定 --- */
/* --- キャラクターの設定（シンプル版） --- */
.hero-character {
    position: absolute;
    bottom: 10%;
    /* 調整済みの位置 */
    left: 8%;
    /* 調整済みの位置 */
    width: 17%;
    /* 調整済みのサイズ */
    z-index: 36;
    pointer-events: none;
    will-change: opacity;
    text-align: center;

    /* アニメーション：シンプルにフェードイン */
    /* 2.5s 程度に少しディレイを伸ばすと、雲が上がりきった後に現れてより印象的です */
    animation: fadeInSimple 1.5s ease-out 1.5s forwards;

    /* 初期状態：完全に透明 */
    opacity: 0;
}

.hero-character img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

.hero-character-caption {
    display: block;
    font-size: 0.75rem;
    color: #1e3a5f;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.05em;
    opacity: 0;
    animation: fadeInCaption 1s ease-out 2.8s forwards;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.9);
}

/* キャプション用のフェードインアニメーション */
@keyframes fadeInCaption {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* シンプルなフェードインアニメーション */
@keyframes fadeInSimple {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* --- リクルートバナーの設定 --- */
.hero-recruit {
    position: absolute;
    bottom: 12%;
    /* キャラクターと高さを合わせる */
    right: 10%;
    /* 右側に配置 */
    width: 12%;
    /* サイズはキャラクターとバランスを見て微調整 */
    z-index: 36;
    /* キャラクターと同じ階層 */

    /* バナーなのでクリックできるようにする（重要！） */
    pointer-events: auto;

    will-change: opacity;

    /* キャラクターと同じタイミング、同じ演出 */
    animation: fadeInSimple 1.5s ease-out 1.5s forwards;
    opacity: 0;
}

.hero-recruit img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    /* ホバー時の動き用 */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

/* バナーなので、マウスを載せた時に少し浮く演出を入れると親切です */
.hero-recruit:hover img {
    transform: translateY(-5px) scale(1.05);
}

.hero-content h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.newsbox {
    display: flex;
    /* これで横並びになります */
    align-items: center;
    /* 上下の中央に揃えます */
    gap: 30px;
    /* 横並びの要素間のスキマを作ります */

    width: 1000px;
    padding: 30px;
    background-color: #fff;
    border-radius: 50px;
    position: absolute;
    z-index: 35;
    bottom: 5%;
    color: #3766a9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* カテゴリラベル */
.news_category {
    background: #3766a9;
    color: #fff;
    font-size: 0.45rem;
    padding: 4px 12px;
    border-radius: 2px;
    min-width: 80px;
    text-align: center;margin-right:10px ;
}

/* 日付 */
.news_date {
    font-family: 'Oswald', sans-serif;
    /* 数字を綺麗に見せるフォント */
    font-size: 0.9rem;
    color: #888;
}

/* タイトル */
.news_title {
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    flex: 1;
    /* 長いタイトルを1行で省略する場合 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news_item a:hover .news_title {
    text-decoration: underline;
}

/* 左側の幅を固定したい場合（任意） */
.news_link {
    flex-shrink: 0;
    /* 左側が縮まないように固定 */
    text-align: center;
    border-right: 1px solid #eee;
    padding: 0 30px 0 0;
}

/* 右側のテキストを柔軟に広げる */
.news_content {
    flex-grow: 1;
    text-align: left;
    color: #333;
    font-size: 0.9em;
}

.newsbox .btn-wrapper {
    margin-top: 10px;
    font-size: 0.8em;
    text-align: center;
}

.newsbox .btn-company.yazirusi {
    padding: 12px 30px;
}


.btn {
    display: inline-block;
    background: #fff;
    color: #8cbed8;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 20px;
    transition: 0.3s;
}

.btn:hover {
    background: #333;
    color: #fff;
}

/* --- セクション共通 --- */
.section {
    padding: 150px 0;
}


.service {
    background-color: #f3f1eb;
    width: 100%;
    position: relative;
    /* 子要素の基準点にする */
    /* 画像の高さ分、少し下に余白を持たせると文字と被りません */
    padding-bottom: 0px;
    /* 雲がはみ出しても横スクロールが出ないように */
}

#service {
    padding-bottom: 230px;
    overflow: hidden;

}

/* 雲の配置 */
.service-bottom-cloud {
    position: absolute;
    bottom: -1px;
    /* 隙間ができないよう微調整 */
    left: 0;
    width: 100%;
    line-height: 0;
    /* 画像下の謎の隙間対策 */
    z-index: 1;
}

/* 初期状態：透明で20pxほど下に下げておく */
.service-bottom-cloud img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    will-change: opacity, transform;
}

/* 画面内に入った時に付与するクラス */
.service-bottom-cloud.is-visible img {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 10px;
}



.company .section-title ,.service .section-title {
    color: #3766a9;
    font-size: 2.5em;
}

.company .container,
.service .container,
.sdgs .container{

    position: relative;
    z-index: 2;
    /* ...既存のスタイル... */
    color: #3766a9;
    line-height: 2em;
    max-width: 1100px;
    font-weight: 500;
    margin: 0 auto;
}


.title_en {
    position: absolute;
    display: inline-block;
    /* 文字の幅に合わせる */
    padding: 40px;
    /* 円が入るスペース */
    font-size: 1.2em;
    font-weight: bold;
    color: #3766a9;
    z-index: 1;
}

.service_main .title_en {
    top: -100px;
    left: -140px;

    white-space: nowrap;
    /* 改行されないように固定 */
    z-index: 1;
}


/* SVGコンテナの設定 */
.circle-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    /* 下から始めるために90度回転 */
    width: 180px;
    /* 文字を囲むサイズに調整 */
    height: 180px;
    z-index: -1;
    /* 文字の背後に配置 */
    pointer-events: none;
}

/* 円の線の設定 */
/* 円の線の設定 */
.circle-path {
    fill: none;
    stroke: #3766a9;
    stroke-width: 1;
    stroke-linecap: round;
    /* 先端を丸くすると綺麗です */

    /* 全周（360度）の長さ */
    stroke-dasharray: 283;
    /* 最初は全て隠す */
    stroke-dashoffset: 283;

    transition: stroke-dashoffset 1.5s ease-in-out;
}

/* 画面に入った時：270度の位置で止める */
.title_en.is-active .circle-path {
    /* 全周 283 のうち、270度分描画する = 25%分（約71）を残す 
       283 * 0.25 ≒ 71
    */
    stroke-dashoffset: 71;
}

/* ボタンの配置調整（必要に応じて） */
.btn-wrapper {
    margin-top: 80px;
    gap: 24px;
    text-align: center;

}

/* ボタン本体のデザイン */
.btn-company {
    display: inline-block;
    padding: 10px 40px;
    /* 上下と左右の余白 */
    background-color: #fff;
    /* 背景色は白 */
    color: inherit;
    /* 文字色は親要素（gridなど）から継承 */
    text-decoration: none;
    /* リンクの下線を消す */
    border-radius: 50px;
    /* 左右を丸くする */
    font-weight: 600;
    /* 以前お話ししたように600で太く設定 */
    border: 1px solid #eee;
    /* 白背景で見えにくい場合は薄い枠線を追加（不要なら削除） */
    transition: opacity 0.3s;
    /* ホバー時の動きを滑らかに */

}

/* ホバー時の演出（少し透けさせるなど） */
.btn-company:hover {
    opacity: 0.8;
}

.btn-company.yazirusi {
    display: inline-flex;
    /* flexからinline-flexに変更してボタン幅に合わせる */
    align-items: center;
    /* 文字と矢印の上下中央を揃える */
    gap: 15px;
    /* 文字と矢印の間の距離 */
}

.btn-company.yazirusi::after {
    content: '';
    width: 40px;
    /* ボタン内なので幅を少し調整（お好みで） */
    height: 8px;
    /* 矢印の厚み（高さ）を調整 */
    border-bottom: solid 1px currentColor;
    /* 親の文字色に合わせる */
    border-right: solid 1px currentColor;
    /* 親の文字色に合わせる */
    transform: skew(45deg);
    margin-bottom: 4px;
    /* 線の傾きによる視覚的なズレを微調整 */
}

/* ボタンの基本設定（再掲・調整） */
.btn-company.yazirusi {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 12px 50px;
    /* 左右を少し広めに */
    background-color: #fff;
    color: inherit;
    text-decoration: none;
    border-radius: 100vh;
    font-weight: 600;
    border: 1px solid #eee;
    /* 薄い枠線 */
    transition: all 0.3s ease;
    /* すべての変化を滑らかに */
    position: relative;
    overflow: hidden;
    /* はみ出し防止 */
}

/* 矢印のデザイン（再掲） */
.btn-company.yazirusi::after {
    content: '';
    width: 40px;
    height: 8px;
    border-bottom: solid 1px currentColor;
    border-right: solid 1px currentColor;
    transform: skew(45deg);
    margin-bottom: 4px;
    transition: transform 0.3s ease;
    /* 矢印の動きを滑らかに */
}

/* --- ホバー時の動き --- */

.btn-company.yazirusi:hover {
    background-color: #f9f9f9;
    /* ほんの少しグレーに */
    border-color: currentColor;
    /* 枠線を文字色と同じにする */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* 軽く影をつけて浮かす */
    transform: translateY(-2px);
    /* 上に2px持ち上げる */
}

.btn-company.yazirusi:hover::after {
    /* skew(45deg)を維持したまま、
       translateXで右に10px移動させる 
    */
    transform: skew(45deg) translateX(10px);
}

.service_main {
    padding-top: 80px;
    padding-bottom: 100px;
}

.service_main .container {
    position: relative;
    z-index: 2;
    /* ...既存のスタイル... */
    color: #3766a9;
    line-height: 2em;
    font-weight: 500;
    margin: 0 auto;
}

.service_main .section-title {
    color: #3766a9;
    font-size: 2.5em;
    line-height: 1.5em;
}

.service_flex_container {
    display: flex;
    justify-content: space-between;
    /* 両端に寄せる */
    align-items: center;
    /* 上下中央揃え */
    gap: 60px;
    /* テキストと画像の間隔 */
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 20px;
}

.service_text {
    flex: 1;
    /* 幅を均等に分ける */
    text-align: left;
    position: relative;
}


.service_text .btn-wrapper {
    margin-top: 80px;
    gap: 24px;
    text-align: center;
    display: flex;
}

.service_text .btn-company.yazirusi {
    border: 1px solid #3766a9;
}

.service_text .section-title {
    text-align: left;
    /* タイトルも左寄せに */
    margin-bottom: 20px;
    display: block;
}

/* 画像側（外枠） */
.service_img {
    flex: 1;
    /* 幅を均等(50%)にする */
    line-height: 0;
}

/* 画像本体 */
/* 画像本体（初期状態） */
.service_img img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    object-position: center;
    border-radius: 30px 120px 30px 120px;

    /* --- アニメーションの準備 --- */
    opacity: 0;
    /* 30px下に下げ、5度ほど傾けておく */
    transform: translateY(50px) rotate(5deg);
    /* 戻るスピードを調整（1.5秒かけて優雅に） */
    transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* 画面に入った時 */
.service_img.is-visible img {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.recruit {
    background-color: #b6c14e;
    padding: 100px 0;
}

.recruit .container {
    position: relative;
    z-index: 2;
    /* ...既存のスタイル... */
    color: #fff;
    line-height: 2em;
    font-weight: 500;
    margin: 0 auto;
}

.recruit .section-title {
    color: #fff;
    font-size: 2.5em;
    line-height: 1.5em;
    padding-left: 1em;
    /* 全体を1文字分右にズラす */
    text-indent: -1em;
    /* 1行目だけを1文字分左に戻す */
}

.recruit .title_en {
    top: -100px;
    left: -140px;
    white-space: nowrap;
    z-index: 1;
    color: #fff
}

.recruit .circle-path {
    stroke: #fff;
}

.recruit .service_img img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    object-position: center;
    border-radius: 30px 120px 30px 120px;
    opacity: 0;
    transform: translateY(50px) rotate(-5deg);
    transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.recruit .btn-company.yazirusi {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 12px 50px;
    color: #b6c14e;
    background-color: #fff;
    text-decoration: none;
    border-radius: 100vh;
    font-weight: 600;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* 画面に入った時 */

.recruit .service_img.is-visible img {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}




/* 初期状態：透明かつ少し下に配置 */
.fade {
    opacity: 0;
    transform: translateY(20px);
    /* 少し下から浮き上がる動きを加える場合 */
    transition: opacity 1.0s ease, transform 1.0s ease;
}

/* 画面に入った時に付与するクラス */
.fade.show {
    opacity: 1;
    transform: translateY(0);
}


footer {
    /* 背景と文字色を反転 */
    background-color: #fff;
    overflow: hidden;
    color: #333;
    font-weight: 500;
    /* 上部に薄い境界線を入れると、セクションの終わりがはっきりして綺麗です */
    border-top: 1px solid #eee;
}

.footer_container {
    overflow: hidden;
    padding: 150px 0;
    display: flex;
    justify-content: space-between;
    max-width: 1500px;
    margin: 0 auto;
    gap: 30%;
}

/* 左側：会社情報 */
.foot_left {
    flex: 1;
    display: flex;
    /* 画像とpタグを横並びにする */
    align-items: flex-start;
    /* 上端で揃える（中央ならcenter） */
    gap: 30px;
    /* 画像とテキストの間の距離 */
}

.foot_left img {
    width: 110px;
    /* ロゴのサイズをお好みで調整 */
    height: auto;
    flex-shrink: 0;
    /* 画像が潰れないように固定 */
}

.foot_left p {
    margin: 0;
    /* 余計な余白をカット */
    line-height: 1.8;
    color: #333;
}

/* 右側：リンクメニュー */
.foot_right {
    flex: 1;
    display: grid;
    /* メニューを2列に並べると綺麗です */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 20px;
    align-content: start;
}

.foot_right a {
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity 0.3s;
}

.foot_right a:hover {
    color: #3766a9;
    /* ホバー時にロゴと同じ青色などに変えるとアクセントになります */
    opacity: 1;
}

footer .container {
    border-top: 1px solid #3766a9;
    color: #3766a9;
    padding: 30px;
    font-size: 0.9em;
    max-width: 100% !important;
}




.single_container {
    max-width: 800px;
    /* marginの上を 0 にして、paddingで中身を下げる */
    margin: 0 auto 60px;
    padding: 120px 20px 0;
    /* 上に120pxの余白 */
}

.single_header {
    position: static !important;
    border-bottom: 2px solid #3766a9;
    padding-bottom: 30px;
    margin-bottom: 40px;
}

.single_title {
    font-size: 2rem;
    line-height: 1.4;
    margin-top: 15px;
}

.single_content {
    line-height: 2;
    font-size: 1.1rem;
}

.single_content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

.btn-back {
    display: inline-block;
    margin-top: 50px;
    padding: 10px 30px;
    background: #eee;
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

.btn-back:hover {
    background: #3766a9;
    color: #fff;
}

.post_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid #eee;
    gap: 20px;
}

.prev_post,
.next_post {
    flex: 1;
}

.next_post {
    text-align: right;
}

.post_nav a {
    text-decoration: none;
    color: #333;
    display: block;
    transition: 0.3s;
}

.nav_label {
    display: block;
    font-size: 0.75rem;
    color: #3766a9;
    font-weight: bold;
    margin-bottom: 5px;
}

.nav_title {
    font-size: 0.9rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 長いタイトルを1行で隠す */
}

/* 一覧へ戻るボタンを中央に丸く配置 */
.nav_center a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    font-weight: bold;
    min-width: 60px;
}

.grid_icon {
    width: 20px;
    height: 20px;
    display: block;
    background-image: radial-gradient(#333 20%, transparent 20%);
    background-size: 6px 6px;
    margin-bottom: 5px;
}

.post_nav a:hover {
    opacity: 0.6;
}


/* news.php 固有、または共通CSSに追加 */
.news_archive_container {
    max-width: 1000px;
    margin: 0 auto 80px;
    /* 左右中央、下に80px */
    padding-top: 160px;
    /* ★ヘッダーの高さ＋α分、中身を下に押し下げる */
    min-height: 60vh;
    /* 記事が少なくてもフッターが浮かないようにする */
}

.page_title {
    text-align: center;
    font-size: 2rem;
    color: #3766a9;
    margin-bottom: 40px;
}

/* カテゴリーナビ */
.category_nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.category_nav a {
    text-decoration: none;
    color: #666;
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: 0.3s;
}

.category_nav a.is-active,
.category_nav a:hover {
    background: #3766a9;
    color: #fff;
    border-color: #3766a9;
}

/* リストスタイル（index.phpのものを流用・微調整） */
.news_list {
    border-top: 1px solid #eee;
}

.news_item {
    border-bottom: 1px solid #eee;
}

.home .news_item {
    border-bottom: 0px;
}

.home .news_item a {
    padding: 10px 10px;
}

.news_item a {
    display: flex;
    padding: 25px 10px;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: #333;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.page_num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: 0.3s;
}

.page_num.is-active {
    background: #3766a9;
    color: #fff;
    border-color: #3766a9;
    pointer-events: none;
    /* 現在のページはクリック不可に */
}

.page_num:hover:not(.is-active) {
    background: #f4f4f4;
    border-color: #3766a9;
}


/* ==========================================
   ▼ 追加：画面幅100%いっぱいに背景を敷く親要素
   ========================================== */
.city-a {

    background-image: url('/img/recback.png');
    background-repeat: no-repeat;
    background-position: center bottom; /* 左右中央、一番下（bottom:0）に固定 */
    background-size: 100% auto;          /* ブロックの横幅に対して100%いっぱいに引き伸ばす */
}

/* ==========================================
   ▼ 既存：中身のコンテナ（max-widthなどの制限をキープ）
   ========================================== */
.works_archive_container {
    max-width: 1200px;
    /* 親要素(wrapper)側に背景を敷いたため、marginの上の隙間(120px)は残し、下の隙間(80px)はwrapperの下端に合わせるため0にします */
    margin: 120px auto 0; 
    padding: 0 20px;
    
    /* 下端(bottom:0)で背景画像と綺麗に合わせるため、必要に応じて下部にパディングでクッションを作ります */
    padding-bottom: 80px; 
}
.works_grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.work_card {
    display: flex;
    gap: 40px;
    background: #fff;
    border: 1px solid #eee;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.work_visual {
    flex: 0 0 400px;
}

.work_visual img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.work_info {
    flex: 1;
}

.work_title {
    font-size: 1.8rem;
    color: #3766a9;
    margin-bottom: 20px;
    border-left: 5px solid #3766a9;
    padding-left: 15px;
}

.work_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.work_table th,
.work_table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 0.95rem;
}

.work_table th {
    width: 100px;
    color: #888;
}

.work_text_block h3 {
    font-size: 1rem;
    background: #f4f4f4;
    padding: 5px 10px;
    margin: 20px 0 10px;
}

/* サブ写真のレイアウト */
.work_sub_photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.photo_item {
    text-align: center;
    /* キャプションを中央寄せにする場合 */
}

.photo_item img {
    width: 100%;
    height: 100px;
    /* 一覧での高さを揃える */
    object-fit: cover;
    border-radius: 4px;
    display: block;
    /* 下の余白対策 */
}

.caption {
    font-size: 0.75rem;
    /* キャプションなので少し小さめ */
    color: #666;
    margin-top: 5px;
    line-height: 1.2;
    word-break: break-all;
    /* 長いテキストの折り返し */
}

/* モーダル本体 */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}

.modal_content_wrapper {
    position: relative;
    max-width: 80%;
    max-height: 80%;
    text-align: center;
}

.modal_img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    animation: zoom 0.3s;
}

@keyframes zoom {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal_caption {
    color: #fff;
    margin-top: 15px;
    font-size: 1rem;
}

/* 閉じるボタン */
.modal_close {
    position: absolute;
    top: 30px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* 送りボタン（共通） */
.modal_prev,
.modal_next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 16px;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: 0.3s;
}

.modal_prev {
    left: 20px;
}

.modal_next {
    right: 20px;
}

.modal_prev:hover,
.modal_next:hover {
    background: rgba(255, 255, 255, 0.5);
}


/* コメント（概要）のスタイル */
.work_summary {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #444;
}

/* 詳細ボタン */
.js-details-btn {
    display: inline-block;
    padding: 10px 25px;
    background: #3766a9;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: background 0.3s;
}

.js-details-btn:hover {
    background: #2a4e82;
}

/* 開いたときのボタンの状態 */
.js-details-btn.is-active {
    background: #666;
}

.work_details_content {
    max-height: 0;
    /* 最初は高さを0にする */
    overflow: hidden;
    /* はみ出た中身を隠す */
    transition: max-height 0.5s ease-in-out, opacity 0.5s;
    /* 0.5秒かけて変化 */
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px dashed transparent;
}

/* 開いたときの状態 */
.work_details_content.is-open {
    max-height: 2000px;
    /* 十分な高さを指定（中身に合わせて広がる） */
    opacity: 1;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px dashed #ccc;
}

/* 親コンテナの設定 */
.service_main .container {
    position: relative;
    z-index: 2;
    /* overflow: hidden がもしあれば削除してください */
}

.hero-character_bottom {
    position: relative;
    width: 100%;
}

/* キャラクター全体の箱 */
.hero-character2 {
    position: absolute;
    width: 15%;
    right: 5%;
    bottom: 100px;
    z-index: 60;
    height: 130px;
}

/* 共通：初期状態 */
.hero-character2 img {
    position: absolute;
    width: 80%;
    height: auto;
    opacity: 0;
    /* 最初は透明 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    pointer-events: none;
}

/* 1番目(01)と3番目(03)の雲：ふわっと出現 */
.hero-character2.is-active img:nth-child(1),
.hero-character2.is-active img:nth-child(3) {
    opacity: 1;
}

/* 2番目(02)のヒーロー：初期状態を「右下」に配置 */
.hero-character2 img:nth-child(2) {
    /* 下に100px、右に50pxの位置に待機 */
    transform: translate(50px, 100px);
    opacity: 0;
    /* 動きを少しゆっくり（1.2s）にすると登場感が出ます */
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 登場時：元の位置（0, 0）に戻る */
.hero-character2.is-active img:nth-child(2) {
    opacity: 1;
    transform: translate(0, 0);
    /* 雲が出てからさらに待つ（1.0秒ディレイ） */
    transition-delay: 1.0s;
}

/* 雲(03)の影 */
.hero-character2 img:nth-child(3) {
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));
}

.buil {
    position: absolute;
    width: auto;
    right: 10%;
    bottom: -200px;
    z-index: 50;
    height: 350px;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease-out, transform 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: opacity, transform;
}

/* 画面に入った時 */
.buil.is-active {
    opacity: 1;
    transform: translateY(0);
}

.buil img {
    /* position: absolute; だと親の .buil の高さが 0 になりやすいため relative 推奨 */
    position: relative;
    width: auto;
    height: 100%;
    pointer-events: none;
    display: block;
}

/* ================================================= 
   レイヤー画像アニメーション 共通設定
================================================= */
.recruit-visual {
    position: relative;
    width: 100%;
    max-width: 650px;
    /* 必要に応じて調整 */
    height: 500px;
    /* 画像の高さに合わせて調整 */
    margin: 0 auto;
}

.concept-visual {
    position: relative;
    width: 100%;
    max-width: 570px;
    /* 必要に応じて調整 */
    height: 500px;
    /* 画像の高さに合わせて調整 */
    margin: 0 auto;
}


.recruit-visual img,
.concept-visual img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* --- 重なり順（z-index）の指定 --- */
.il-bg {
    z-index: 1;
}

/* 最背面 */
.il-right {
    z-index: 2;
}

.il-bottom {
    z-index: 3;
}

/* 下からの画像を中間に */
.il-left {
    z-index: 4;
}

/* 左からの画像をil22より上に（il21 > il22） */
.il-top {
    z-index: 5;
}

/* リクルートの最前面 */

/* --- 各パーツの初期状態（画面外） --- */

/* il-right: 右から左へ */
.il-right {
    transform: translateX(50px);
}

/* il-left: 左から右へ */
.il-left {
    transform: translateX(-50px);
}

/* il-top / il-bottom: 下から上へ */
.il-top,
.il-bottom {
    transform: translateY(50px);
}

/* il-bg: その場（動かさない） */
.il-bg {
    transform: none;
}


/* ================================================= 
   1. リクルートセクション (.is-visible)
================================================= */
.recruit-visual.is-visible img {
    opacity: 1;
    transform: translate(0, 0);
}

/* 時間差（ディレイ）の設定 */
.recruit-visual.is-visible .il-bg {
    transition-delay: 0.2s;
}

.recruit-visual.is-visible .il-right {
    transition-delay: 0.5s;
}

.recruit-visual.is-visible .il-left {
    transition-delay: 0.8s;
}

.recruit-visual.is-visible .il-top {
    transition-delay: 1.1s;
}


/* ================================================= 
   2. コンセプトセクション (.is-active)
================================================= */
.concept-visual.is-active img {
    opacity: 1;
    transform: translate(0, 0);
}

/* 時間差（ディレイ）の設定 */
.concept-visual.is-active .il-bg {
    transition-delay: 0.2s;
}

.concept-visual.is-active .il-bottom {
    transition-delay: 0.6s;
}

/* il22 */
.concept-visual.is-active .il-left {
    transition-delay: 1.0s;
}

/* il21（最後に上に重なる） */


/* ================================================= 
   スマホ対応
================================================= */
@media (max-width: 768px) {

    .recruit-visual,
    .concept-visual {
        height: 350px;
        /* スマホでの表示エリア調整 */
    }
}


/* --- ハンバーガーボタンのスタイル --- */
.menu-btn {
    display: none;
    /* PCでは隠す */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 110;
    width: 40px;
    height: 40px;
    position: relative;
}

.menu-btn span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #fff;
    /* 通常時は白 */
    position: absolute;
    left: 5px;
    transition: all 0.3s;
}

/* スクロール後や白い背景のページでは三本線を黒にする */
header.scrolled .menu-btn span,
body:not(.home) .menu-btn span {
    background-color: #333;
}

.menu-btn span:nth-child(1) {
    top: 12px;
}

.menu-btn span:nth-child(2) {
    top: 20px;
}

.menu-btn span:nth-child(3) {
    top: 28px;
}

/* ボタンがクリックされた時（×印に変形） */
.menu-btn.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-btn.is-active span:nth-child(2) {
    opacity: 0;
}

.menu-btn.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}



.en-title {
  /* フォントとテキストの基本設定 */
  
  /* 文字の間隔を広く空ける（ここが一番重要です） */
  letter-spacing: 0.25em;
  
  /* 中央揃えと下線のための位置調整 */
  text-align: center;
  position: relative;
  padding-bottom: 24px;                          /* 文字と下線の間の余白 */
  margin: 100px auto 80px;                           /* 装飾の下の余白 */
}

/* 疑似要素を使って中央の短い下線を表現 */
.en-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);                   /* 完全に中央配置にする */
  
  /* 下線の長さと太さ、色 */
  width: 60px;                                   /* 線の長さ（文字幅に合わせたい場合は調整） */
  height: 2px;                                   /* 線の太さ */
  background-color: #4a74b4;                     /* 文字と同じブルー */
}

.section-title {
  display: flex;
  flex-direction: column; /* 縦並びにする */
  align-items: center;    /* 中央揃え */
  text-align: center;
  margin-bottom: 2rem;    /* 下のコンテンツとの余白 */
}

/* メインの日本語 */
.section-title .main-title {
  font-size: 32px;        /* 好みに応じて調整してください */
  font-weight: bold;
  color: #4a74b4;         /* 画像「image_11b0e7.png」に近いブルー */
  margin-bottom: 20px;    /* サブタイトルとの間の余白 */
}

/* サブの英語 */
.section-title .sub-title {
  font-size: 18px;        /* 日本語より一回り小さく */
  font-weight: 500;
  color: #4a74b4;
  text-transform: uppercase; /* 大文字に強制 */
  letter-spacing: 0.18em;  /* 文字間隔を広げて洗練された印象に */
}
/* 全体コンテナの最大幅を 1100px に変更 */
.company-container {
  max-width: 1200px; /* ここを1100pxに広げました */
  margin: 0 auto;
  padding: 20px;
  color: #333;
  line-height: 1.6;
}

/* 各白背景セクション（コンテナに合わせて1100px幅になります） */
.company-section {
  background-color: #fff;
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.comp-cloud {
    opacity: 0.1;
    transform: translateY(60px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    display: block;
    width: 100%;
    will-change: opacity, transform;
    padding-top: 100px;
    margin-top: -100px;
}
.recruit .comp-cloud {

    padding-top: 250px;

}
.sdgs .comp-cloud {
padding-top: 100px;
}

.comp-cloud img {
    width: 100%;
    object-fit: contain;
    margin-bottom: -7px;
}
/* 画面内に入った時にJSで付与するクラス */
.comp-cloud.is-show {
  opacity: 1;
  transform: translateY(0);
}
/* --- 会社概要テーブルスタイル --- */
.info-table {
  width: 100%;
  margin: 0;
}
.info-row {
  display: flex;
  border-bottom: 1px solid #4a74b4;
  padding: 20px 0;
}
.info-row:first-child {
  padding-top: 0;
}
.info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.info-table dt {
  width: 180px;
  flex-shrink: 0;
  color: #4a74b4;
  font-weight: bold;
}
.info-table dd {
  flex-grow: 1;
  margin: 0;
}

/* 所在地用レイアウト */
.office-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
.office-item:last-child {
  margin-bottom: 0;
}
.office-name {
  display: inline-block;
  color: #4a74b4;
  text-decoration: underline;
  font-weight: bold;
  margin-bottom: 4px;
}
.office-info p {
  margin: 0;
}

/* MAPボタン */
.map-btn {
  color: #4a74b4;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
  padding: 5px 10px;
}
.map-btn:hover {
  opacity: 0.7;
}
.map-btn::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #4a74b4;
  border-right: 2px solid #4a74b4;
  transform: rotate(45deg);
  margin-left: 8px;
  margin-bottom: 2px;
}

/* 建設業許可 */
.permission-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.permission-type {
  display: flex;
}
.permission-type span {
  width: 80px;
  color: #4a74b4;
  flex-shrink: 0;
}
.permission-type p {
  margin: 0;
}

/* 加入団体（幅が広くなったため、ゆったり並ぶよう4カラムに調整） */
.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 15px;
}
.grid-list p {
  margin: 0;
}
.text-right {
  grid-column: span 4; /* 横幅いっぱいに使って右寄せ */
  text-align: right;
}

/* --- 沿革スタイル --- */
.history-list {
  margin: 0;
}
.history-item {
  display: flex;
  padding: 10px 0;
}
.history-list dt {
  width: 180px;
  flex-shrink: 0;
}
.history-list dd {
  flex-grow: 1;
  margin: 0;
}

/* --- キャラクタースタイル --- */
.char-title {
  color: #4a74b4;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 30px;
}
.char-container {
  display: flex;
  justify-content: center;
  gap: 120px; /* 幅に合わせてキャラクター同士の間隔を少し広げました */
}
.char-card {
  text-align: center;
}
.char-card img {
  max-height: 350px;
  height: auto;
  display: block;
  margin: 0 auto 15px;
}
.char-name {
  margin: 0;
  font-weight: bold;
}
/* --- アクセスセクション用スタイル --- */
.access-container {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 拠点ごとの間隔 */
}

.access-item {
  width: 100%;
}

/* 拠点名（本社、野々市事務所など） */
.access-office-name {
  color: #4a74b4;
  font-size: 16px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 15px;
  position: relative;
}

/* 地図の枠（16:9 などの比率を保ち、はみ出しを防ぐレスポンシブ対応） */
.map-wrapper {
  position: relative;
  width: 100%;
  padding-top: 40%; /* PC時の地図の高さ比率（お好みで調整してください） */
  border: 1px solid #ccd0d4;
  overflow: hidden;
}

/* iframeを枠線いっぱいに広げる */
.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}


body.recruit.sub-page {
background: #fff;padding-top: 0px;padding-bottom: 0px;
}
.sdgs .section-title,
body.recruit.sub-page .section-title{color: #3766a9;
    font-size: 2.2em;}
.sdgs .container,
body.recruit.sub-page .container{    color: #3766a9;
    line-height: 2em;}


.sdgs .container span{display:block;text-align:center;font-size:32px;margin:50px auto 30px;font-weight: bold;}
body.recruit.sub-page .welfare-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0px;
    row-gap: 60px;
}
/* 各制度の個別枠 */
body.recruit.sub-page .welfare-item {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
  /* ここにあった z-index: 1; を撤廃し、下で個別に階層を設定します */
}

/* ==========================================
   【完全解決版】左右の列で独立した立体交差を作る z-index 設定（PC時）
   ========================================== */

/* ------------------------------------------
   ▼ 左の列（奇数番目のアイテム：1, 3, 5, 7）
   仕様：イラストが「左上（上方向）」に飛び出す
   対策：下に行くほどカード全体の z-index を【高く】して、上からのハミ出し（潜り込みバグ）を防ぐ
------------------------------------------ */
body.recruit.sub-page .welfare-item:nth-child(1) { z-index: 1; }
body.recruit.sub-page .welfare-item:nth-child(3) { z-index: 2; } /* 1番目のイラストがこの3番目の円の下に綺麗に潜り込みます */
body.recruit.sub-page .welfare-item:nth-child(5) { z-index: 3; } /* 3番目のイラストがこの5番目の白い円の下に綺麗に潜り込みます */
body.recruit.sub-page .welfare-item:nth-child(7) { z-index: 4; }

/* ------------------------------------------
   ▼ 右の列（偶数番目のアイテム：2, 4, 6, 8）
   仕様：イラストが「右下（下方向）」に飛び出す
   対策：上に行くほどカード全体の z-index を【高く】して、下の円の上にイラストを100%乗せる
------------------------------------------ */
body.recruit.sub-page .welfare-item:nth-child(2) { z-index: 8; } /* 2番目のイラストが、下の3番目の円の上に100%載る */
body.recruit.sub-page .welfare-item:nth-child(4) { z-index: 7; } /* 4番目のイラストが、下の5番目の円の上に100%載る */
body.recruit.sub-page .welfare-item:nth-child(6) { z-index: 6; }
body.recruit.sub-page .welfare-item:nth-child(8) { z-index: 5; }


/* ==========================================
   イラスト円枠 ＆ テキストバブルの基本設定
   ========================================== */

/* イラストを入れる丸枠（共通設定） */
body.recruit.sub-page .circle-placeholder {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #64748b;
    font-size: 14px;
}

body.recruit.sub-page .circle-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 白色の正円型バブル */
body.recruit.sub-page .welfare-bubble {
    z-index: 1; /* 基準値の1に設定 */
    width: 400px;
    height: 400px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    text-align: center;
}

/* 見出しスタイル */
body.recruit.sub-page .welfare-title {
  font-size: 22px;
  color: #3766a9;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.4;
}

/* 本文スタイル */
body.recruit.sub-page .welfare-text {
  font-size: 15px;
  color: #333333;
  line-height: 1.7;
  margin: 0;
  text-align: left;
  width: 100%;
  max-width: 260px;
}


/* ==========================================
   左右のカラム（列）の配置・位置調整（PC時）
   ========================================== */

/* ------------------------------------------
   ▼ 左の列（1, 3, 5, 7番目のアイテム）配置詳細
------------------------------------------ */
body.recruit.sub-page .welfare-item:nth-child(odd) {
  display: flex;
  justify-content: flex-end; /* 白い円を右に寄せる */
}

body.recruit.sub-page .welfare-item:nth-child(odd) .welfare-visual {
    position: absolute;
    top: -150px;
    left: -20px;
    z-index: 10; /* 白い円の上に載せる */
    pointer-events: none; /* イラストの下にあるテキスト選択を邪魔しない設定 */
}

/* ------------------------------------------
   ▼ 右の列（2, 4, 6, 8番目のアイテム）配置詳細
------------------------------------------ */
body.recruit.sub-page .welfare-item:nth-child(even) {
  display: flex;
  justify-content: flex-start; /* 白い円を左に寄せる */
  margin-top: 0;
}

body.recruit.sub-page .welfare-item:nth-child(even) .welfare-visual {
    position: absolute;
    bottom: -150px;
    right: -50px;
    z-index: 10; /* 白い円の上に載せる */
    pointer-events: none;
}
/* ==========================================
   スクロールアニメーション用のスタイル
   ========================================== */

/* アニメーション前の初期状態（共通：透明度0で少し下＆拡大率を調整） */
body.recruit.sub-page .welfare-item {
  opacity: 0;
  scale: 0.95;
  transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
              scale 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 左の列（奇数）の初期状態：左下から上がってくるようにずらす */
body.recruit.sub-page .welfare-item:nth-child(odd) {
  transform: translate(-30px, 40px);
}

/* 右の列（偶数）の初期状態：右下から上がってくるようにずらす */
body.recruit.sub-page .welfare-item:nth-child(even) {
  transform: translate(30px, 40px);
}

/* ------------------------------------------
   ★ 画面内に入ったときの状態（クラス「is-active」がつく）
------------------------------------------ */
body.recruit.sub-page .welfare-item.is-active {
  opacity: 1;
  transform: translate(0, 0); /* 元の位置にピッタリ戻る */
  scale: 1;
}

/* ==========================================
   社員の声（吹き出し）セクション
   ========================================== */
body.recruit.sub-page .voice-section {
  width: 100%;
  padding: 60px 0 180px;
  background-color: #ffffff; /* 背景色（お好みに合わせて変更してください） */
  font-family: "Noto Sans JP", sans-serif;
}

body.recruit.sub-page .voice-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 50px; /* 上下の発言者同士の間隔 */
}

/* 1人分の包括枠（PC時は横並び） */
body.recruit.sub-page .voice-item {
  display: flex;
  align-items: center;
  gap: 30px; /* アイコンと吹き出しの間の隙間 */
  width: 100%;
}

/* 偶数番目（2人目、4人目...）は左右を自動反転 */
body.recruit.sub-page .voice-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* アイコン画像エリア */
body.recruit.sub-page .voice-avatar {
  flex-shrink: 0; /* 画面が縮んでもアイコンが潰れないように固定 */
}

/* 仮の丸型アイコン枠 */
body.recruit.sub-page .avatar-placeholder {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #e2e8f0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #64748b;
  font-size: 14px;
}
/* 社員のイラストを丸枠に綺麗に収める設定 */
body.recruit.sub-page .avatar-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* ★画像を縦横比を保ったまま枠いっぱいにフィットさせます */
  object-position: center; /* 画像の中心を基準にトリミングします */
  border-radius: 50%;    /* ★枠の丸みに合わせて画像自体も真ん丸にくり抜きます */
  display: block;        /* 画像の下にできる謎の隙間（隙間バグ）を防止 */
}
/* 吹き出しのベース */
body.recruit.sub-page .voice-balloon {
  position: relative;
  flex-grow: 1; /* 横幅をいっぱいに広げる */
}
/* 吹き出しの内側（完全カプセル型） */
body.recruit.sub-page .voice-balloon-inner {
  padding: 35px 50px;       /* 左右が綺麗な半円になるよう横余白を広めにキープ */
  border-radius: 100vh;     /* 直線部分をなくし、左右を完全に丸くします */
  box-sizing: border-box;
  position: relative;
}

/* --- 1人目（奇数番目）：白背景 ＋ 青の線枠 --- */
body.recruit.sub-page .voice-item:nth-child(odd) .voice-balloon-inner {
  background-color: #ffffff;
  border: 2px solid #4a74b4;
}

/* --- 2人目（偶数番目）：薄い青のベタ塗り --- */
body.recruit.sub-page .voice-item:nth-child(even) .voice-balloon-inner {
  background-color: #e1eaf7;
  border: 2px solid transparent;
}
/* ==========================================
   社員の声（voice-item）アニメーション設定
   ========================================== */

/* アニメーション前の初期状態（共通：透明度0、少し縮小） */
body.recruit.sub-page .voice-item {
  opacity: 0;
  scale: 0.98;
  transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
              scale 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 1人目（奇数番目）：左から右へ動かすため、少し左にずらしておく */
body.recruit.sub-page .voice-item:nth-child(odd) {
  transform: translateX(-40px);
}

/* 2人目（偶数番目）：右から左へ動かすため、少し右にずらしておく */
body.recruit.sub-page .voice-item:nth-child(even) {
  transform: translateX(40px);
}

/* ------------------------------------------
   ★ 画面内に入ったときの状態（クラス「is-active」がつく）
------------------------------------------ */
body.recruit.sub-page .voice-item.is-active {
  opacity: 1;
  transform: translateX(0); /* 元の位置にピタッと戻る */
  scale: 1;
}

.sdgs .container,
body.recruit.sub-page .container{
    position: relative;
    z-index: 2;
    color: #3766a9;
    line-height: 2em;
    max-width: 1200px;
    font-weight: 500;
    margin: 0 auto;
}
/* ==========================================
   【変更】吹き出しの三角（口）の制御をすべて撤廃
   ========================================== */
/* PC時・スマホ時ともに三角を表示するコード（::before, ::after）は
   すべてきれいに削除しました。
*/
.character3 {
    height: 0;                /* ★高さを0にして後続のレイアウトを邪魔しないようにする */
    margin-top: 0;            /* ★問題のネガティブマージンを撤廃（これで検知が正常化します） */
    position: relative;
    z-index: 50;              /* 必要に応じて重なり順を調整 */
}

.character3 img {
    position: absolute;
    right: 15vw;
    /* top: 100px; と margin-top: -420px; の合算値（-320px）にして、見た目の位置を完全にキープ */
    top: -320px;              
    height: 420px;
    
    /* アニメーション用の初期設定（ここはそのまま） */
    opacity: 0;
    transform: translateY(60px); 
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* 画面内に入ったときの状態 */
.character3.is-active img {
    opacity: 1;
    transform: translateY(0); /* top: -320px の位置にスッと戻る */
}



/* ==========================================
   アイソメトリックジオラママップ・セクション
   ========================================== */
/* ==========================================
   アイソメトリックジオラママップ・セクション
   ========================================== */

.service.sub-page {
    background-color: #8cbed9;

    /* ==========================================
       ▼ 背景画像（/img/service-cloud.svg）の設定を追加
       ========================================== */
    background-image: url('/img/service-cloud.svg');
    background-repeat: no-repeat;
    background-position: center top; /* 左右中央、上端（top: 0）に固定 */
    background-size: 100% auto;       /* 横幅を100%いっぱいに広げ、縦は比率維持 */
}
.isomet-map-section {
    width: 100%;
    padding: 0px 0 180px;
    background: linear-gradient(to bottom, #8cbed9 0%, #8cbed9 30%, #ffffff 60%, #ffffff 100%);
    overflow: hidden;
}
/* マップ全体のコンテナ枠（★最大幅を 1500px に拡大） */
.isomet-map-container {
    position: relative;
    width: 100%;
    max-width: 1500px; /* ★1100px から 1500px に変更 */
    margin: 0 auto;
    user-select: none;padding-top: 50px;
}

/* 背景ジオラマ画像 */
.isomet-bg {
    width: 100%;
    height: auto;
    display: block;
}

/* ------------------------------------------
   ピン（ボタン）全体の共通設定
------------------------------------------ */
.isomet-map-container .isomet-pin {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    z-index: 10;
    /* ホバー時の滑らかな動き用（アニメーションとは別枠） */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ホバー時に少し上に浮き上がるモーション */
.isomet-map-container .isomet-pin:hover {
    transform: scale(1.05) translateY(-4px) !important; /* アニメーション上書き用に!important */
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.15));
}


/* ==========================================
   アニメーションの初期状態（画面に入る前）
   ========================================== */

/* 1. 赤ピン（marker）：上空から降ってくるように上にずらし、透明にする */
.isomet-map-container .pin-marker {
    position: relative;
    width: 24px;
    height: 24px;
    background-color: #e54d4d;
    border-radius: 50% 50% 50% 0;
    flex-shrink: 0;
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.2);
    
    /* 初期状態 */
    opacity: 0;
    transform: rotate(-45deg) translate(0, -100px); /* 45度回転を維持したまま上に100px飛ばす */
    /* コミカルなバウンド感を出すための cubic-bezier */
    transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: opacity, transform;
}
.isomet-map-container .pin-marker::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 2. 文字ボックス（text）：最初は極小（0）にして隠しておく */
.isomet-map-container .pin-text {
    background-color: #ffffff;
    color: #3766a9;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 16px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    border: 1px solid rgba(55, 102, 169, 0.1);
    
    /* 初期状態 */
    opacity: 0;
    transform: scale(0); /* サイズ0 */
    transform-origin: left center; /* 左側（ピン側）から飛び出すように起点設定 */
    /* ポンッと弾ける動きのためのスプリング風イージング */
    transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}


/* ==========================================
   ★ 画面内に入ったときのアニメーション発火状態（.is-active）
   ========================================== */

/* 赤ピン：上空から突き刺さるように着地 */
.isomet-map-container .isomet-pin.is-active .pin-marker {
    opacity: 1;
    transform: rotate(-45deg) translate(0, 0);
}

/* 文字ボックス：ピンが刺さった直後にポンッと広がる */
.isomet-map-container .isomet-pin.is-active .pin-text {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.4s; /* ★赤ピンが着地するまでの「0.4秒」を待ってから発火 */
}


/* ==========================================
   各ピンの座標設定（%なので画面リサイズに追従）
   ========================================== */
.isomet-map-container .pin-sabou     { top: 21%; left: 28%; }
.isomet-map-container .pin-lifeline   { top: 22%; left: 43%; }
.isomet-map-container .pin-kukaku     { top: 26%; left: 60%; }
.isomet-map-container .pin-syukei     { top: 45%; left: 19%; }
.isomet-map-container .pin-kasen      { top: 37%; left: 37%; }
.isomet-map-container .pin-kyoryo     { top: 49%; left: 51%; }
.isomet-map-container .pin-doro       { top: 51%; left: 78%; }
.isomet-map-container .pin-koen       { top: 62%; left: 28%; }
.isomet-map-container .pin-kaigan     { top: 66%; left: 66%; }



.service.sub-page .cloud-1 {
    top: 0%;
    max-width: 100px;
}

.service.sub-page .cloud-2 {
    top: 5%;
    max-width: 130px;
}

.service.sub-page .cloud-3 {
    top: 8%;
    max-width: 110px;
}

.service.sub-page .cloud-4 {
    top: 2%;
    animation-duration: 88s;
    /* 44秒のうち30秒分進める */
    animation-delay: -60s;
    max-width: 150px;
}
.service.sub-page .works_archive_container {
    padding-bottom: 0px;
}
/* ==========================================
   アイソメトリック・モーダルウィンドウ
   ========================================== */
.isomet-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    padding: 0;
    box-sizing: border-box;
}

.isomet-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.isomet-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(74, 116, 180, 0.45);
    backdrop-filter: blur(6px);
}

/* モーダルウィンドウ本体 */
.isomet-modal-window {
    position: relative;
    width: 85vw;
    max-width: 1400px;
    height: 60vh;
    max-height: 850px;
    background: transparent;
    z-index: 10;
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.isomet-modal.is-open .isomet-modal-window {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* 左右2カラムレイアウト */
.isomet-modal-flex {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
    width: 100%;
    height: 100%;
}

/* 左側：写真エリア */
.isomet-modal-media {
    flex: 1.6;
    background-color: #ffffff;
    padding: 5px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    display: flex;
    border-radius: 4px;
    box-sizing: border-box;
}

.isomet-modal-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ★ 青い丸型の close ボタン（モーダル全体の中央下に重なる配置） */
.isomet-modal-close-circle {
    position: absolute;
    bottom: -40px; /* ウィンドウ下枠をまたぐ位置 */
    left: 50%;
    transform: translateX(-50%);
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: #3766a9;
    color: #ffffff;
    font-size: 15px;
    font-family: inherit;
    font-weight: 500;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 30;
}

.isomet-modal-close-circle:hover {
    background-color: #2b5188;
    transform: translateX(-50%) scale(1.06);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

/* 右側：白背景のカード */
.isomet-modal-card {
    flex: 1;
    background-color: #ffffff;
    padding: 50px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    text-align: left;
    box-sizing: border-box;
    overflow-y: auto;
    border-radius: 4px;
}

/* タイトル（26px → 28px） */
.isomet-modal-card h2 {
    font-size: 28px;
    color: #3766a9;
    text-align: center;
    margin-bottom: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* リード文（14px → 15.5px） */
.isomet-modal-card .modal-lead {
    font-size: 15.5px;
    color: #3766a9;
    line-height: 1.85;
    margin-bottom: 22px;font-weight: 500;
}

/* 工事実績ボックス */
.isomet-modal-spec-box {
    border: 1px solid #ccd5e3;
    padding: 18px 20px;
    background-color: #fff;
}

/* 工事実績のタイトル（15px → 16.5px） */
.isomet-modal-spec-box .spec-title {
    font-size: 15px;
    color: #3766a9;
    font-weight: bold;
    margin-bottom: 12px;
}

/* 実績リスト（13.5px → 15px、ラベル幅 60px → 68px） */
.isomet-modal-spec-box .spec-list {
    display: grid;
    grid-template-columns: 68px 1fr;
    row-gap: 8px;
    column-gap: 14px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
}

.isomet-modal-spec-box .spec-item {
    display: contents;
}

.isomet-modal-spec-box dt {
    color: #555;
    font-weight: normal;
}

.isomet-modal-spec-box dd {
    color: #333;
    margin: 0;
    font-weight: 500;
}

/* ==========================================
   スマホ対応
   ========================================== */
@media (max-width: 820px) {
    .isomet-modal {
        overflow-y: auto;
        display: block;
        padding: 30px 15px 60px;
    }

    .isomet-modal-window {
        width: 100%;
        height: auto;
        max-height: none;
        max-width: 500px;
        margin: 0 auto;
    }

    .isomet-modal-flex {
        flex-direction: column;
        height: auto;
        gap: 20px;
    }

    .isomet-modal-media img {
        min-height: 220px;
        max-height: 280px;
    }

    .isomet-modal-close-circle {
        bottom: -30px;
        width: 70px;
        height: 70px;
        font-size: 13px;
    }

    .isomet-modal-card {
        padding: 25px 20px;
    }
}
/* ==========================================
   キャラクター4（ジオラマ右下に大きくかぶせる配置）
   ========================================== */
.character4 {
    width: 100%;
    /* 高さを0にして、後続のレイアウト（フッターなど）を押し下げないようにする */
    height: 0; 
    position: relative;
    z-index: 60; /* ★マップのピン(10)や背景よりも手前に表示 */
}

.character4 img {
    position: absolute;
    width: 26%;
    max-width: 300px;
    height: auto;
    right: 15%;
    top: -400px;
    opacity: 0;
    transform: translateY(-60px);
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* 画面内に入ったときの状態 */
.character4.is-active img {
    opacity: 1;
    transform: translateY(0); /* top: -260px のジャスト位置に着地 */
}

/* ------------------------------------------
   ★ 画面内に入ったときの状態（親に .is-active がつく）
------------------------------------------ */
.character4.is-active img {
    opacity: 1;
    transform: translateY(0); /* 元の位置へスッと着地 */
}


/* ==========================================
   SDGsページ：取り組みカード＆活動報告（抜粋＆詳細リンク版）
   ========================================== */

/* --- 全体の背景調和 --- */
.sdgs-section {
    width: 100%;
    padding: 0px 0;
    position: relative;
    background-color: transparent;
}

/* 盤面の最大幅制限（コンテナ） */
.sdgs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 45px;
}

/* --- 1. 取り組みカード本体（大きな角丸） --- */
.sdgs-card {
    background-color: #ffffff;
    border-radius: 40px; 
    padding: 80px 65px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}
.sdgs-card.is-active {
    opacity: 1;
    transform: translateY(0);
}

.sdgs-badge-wrapper {
    display: flex;
    justify-content: center; 
    gap: 16px;              
    margin-bottom: 30px;    
}
.sdgs-badge {
    width: 150px;            
    height: auto;
    object-fit: contain;
}

.sdgs-header {
    display: flex;
    align-items: baseline;  
    gap: 12px;
    margin-bottom: 20px;
    padding-left: 4px;      
}
.sdgs-title-ja {
    font-size: 22px;
    font-weight: 700;
    color: #3766a9;        
    margin: 0;
}
.sdgs-title-en {
    font-size: 13px;
    font-weight: 700;
    color: #3766a9;
    letter-spacing: 0.08em; 
    opacity: 0.8;
}

.sdgs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;              
}
.sdgs-list li {
    position: relative;
    padding-left: 30px;     
    font-size: 1em;
    color: #333333;
    line-height: 1.75;
    text-align: left;
}
.sdgs-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;               
    width: 15px;
    height: 15px;
    border: 2px solid #3766a9; 
    border-radius: 2px;     
    box-sizing: border-box;
}


/* ==========================================
   2. 活動報告（リンク付きインライン一覧）
   ========================================== */
.sdgs_report_list {
    display: flex;
    flex-direction: column;
    gap: 50px; /* 記事と記事の間の上下余白 */
    width: 100%;
}

.sdgs_report_item {
    width: 100%;
    
    /* 画面内に入ったときのフェードイン演出用 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.sdgs_report_item.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* 記事全体のリンクエリア（ホバー時の挙動をここで制御） */
.sdgs_report_link {
    display: flex;
    align-items: flex-start;
    gap: 40px; 
    width: 100%;
    text-decoration: none; /* デフォルトのリンク下線を消す */
    color: inherit;
    transition: transform 0.3s ease;
}

/* ホバー時に記事全体が少し浮き上がる心地よいエフェクト */
.sdgs_report_link:hover {
    transform: translateY(-4px);
}

/* 左側：アイキャッチ画像エリア */
.sdgs_report_img {
    flex: 0 0 32%;
    max-width: 320px;
    aspect-ratio: 3 / 2;
  
    overflow: hidden;
    
    /* ------------------------------------------
       ▼ ★新設：アイキャッチがない時のための薄いグレー背景
       ------------------------------------------ */
    background-color: #f0f2f5; /* カンプに馴染む上品な薄グレー */
}

/* 枠の中の画像自体の制御 */
.sdgs_report_img img {
    width: 100%;
    height: 100%;       /* ★親要素（aspect-ratio）の高さに100%強制的に合わせる */
    
    /* ------------------------------------------
       ▼ 超重要：画像の歪み防止
       ・cover を指定することで、画像の縦横比を維持したまま、
         枠内にぴったり収まるように中央から自動でトリミングしてくれます。
       ------------------------------------------ */
    object-fit: cover;
    object-position: center; /* 中央を基準にくり抜き */
    
    display: block;
    transition: transform 0.3s ease;
}
/* ホバー時に画像が少しズームアップするポップな仕掛け */
.sdgs_report_link:hover .sdgs_report_img img {
    transform: scale(1.05);
}

/* 右側：コンテンツ全体 */
.sdgs_report_body {
    flex: 1;
    text-align: left;
}

/* 日付とタイトルのヘッダーライン */
.sdgs_report_meta {
    display: flex;
    align-items: baseline;
    gap: 20px; 
    margin-bottom: 12px;
}

/* 日付のグレー文字 */
.sdgs_report_date {
    font-size: 15px;
    font-weight: 500;
    color: #a0aec0; 
    font-family: monospace;
    flex-shrink: 0;
}

/* 記事のメインタイトル */
.sdgs_report_title {
    font-size: 18px;
    font-weight: 700;
    color: #3766a9; 
    margin: 0;
    line-height: 1.4;
}

/* WordPressの「抜粋」テキスト（ｐタグ自動生成にも対応） */
.sdgs_report_text-content {
    font-size: 1em;
    color: #556275; /* 本文・抜粋用の読みやすいグレー */
    line-height: 1.75;
}
.sdgs_report_text-content p {
    margin: 0;
}
/* ==========================================
   ★完全外出し版：画面の左右の端にキャラを固定
   ========================================== */
.works_archive_container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sdgs-main-hero-center-only {
    text-align: center;
    margin-top: 20px;
}
.sdgs-main-hero-center-only .section-title {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 50px;
    color: #3766a9;
}

/* ★ テキストの入る幅を狭めるのをやめ、元のゆったりしたコンテナ幅にリセット */
.sdgs-hero-lead-text {
    width: 100%;
    margin: 0 auto;
    padding: 0; /* 左右の余計なパディングを削除 */
    position: relative;
    z-index: 15;
}

/* ------------------------------------------
   ★ 画面中央を基準に「左へ500px」「右へ500px」配置する設定
   ------------------------------------------ */

/* 左右のキャラクター共通設定（高さ100%・横幅自動の指定を維持） */
.sdgs-outer-chara {
    position: absolute;
    pointer-events: none;
    z-index: 5;
}
.sdgs-outer-chara img {
    width: auto;
    height: 100%;
    display: block;
}

/* ◀ 左側：ワンちゃん（画面中央から左へ500px） */
.chara-left-edge {
    height: 200px;
    top: 330px;
    left: calc(50% - 480px);
    right: auto;
}

/* ▶ 右側：ヒーロー（画面中央から右へ500px） */
.chara-right-edge {
    height: 400px;
    top: 150px;
    left: calc(50% + 300px);
    right: auto;
}

/* ==========================================
   募集要項セクション用・会社概要デザイン連動調整
   ========================================== */
.requirements-section .info-table {
    border: none; /* 前回の独自枠線をクリア */
}

.requirements-section .info-row {
    border-bottom: 1px solid #3766a9; /* 募集要項側の青のキーカラーに下線を統一 */
}

.requirements-section .info-row:last-child {
    border-bottom: none;
}

.requirements-section .info-table dt {
    color: #3766a9; /* 左側ラベルの文字色をコーポレートカラーの青に */
    width: 180px;
    flex-shrink: 0;
    font-weight: bold;
    text-align: left;
}

.requirements-section .info-table dd {
    text-align: left;
    color: #333;
}



.privacy-policy h2{
    margin: 40px 0 15px;

    font-size: 1.25rem;
    color: #3766a9;
}

.privacy-policy p{
    margin-bottom: 20px;
}

.privacy-policy strong{
    color: #3766a9;
}

.privacy-policy a{
    color: #3766a9;
    text-decoration: underline;
}

.privacy-policy a:hover{
    opacity: .8;
}



@media (max-width: 1600px) {
    .hero-character {
        left: 8%;
        bottom: 15%;

    }

    .hero-recruit {
        bottom: 15%;
        right: 5%;

    }

    .service_flex_container {
        gap: 60px;
        max-width: 1200px;

    }

    .recruit-visual {
        max-width: 550px;
    }

    .concept-visual {
        max-width: 500px;
    }

    .buil {
        bottom: -230px;
    }

    .hero-character2 {
        bottom: 0;
    }

}


@media (max-width: 1400px) {
    .hero-character {
        left: 2%;
        bottom: 18%;

    }

    .hero-recruit {
        bottom: 15%;
        right: 5%;

    }

    .service_flex_container {
        gap: 20px;
        max-width: 1000px;

    }

   

    .btn-company.yazirusi,
    .recruit .btn-company.yazirusi {
        padding: 12px 30px;

    }

    .footer_container {
        max-width: 1200px;
    }

    .recruit .section-title,
    .service_main .section-title {
        font-size: 1.8em;
    }

    .service .section-title {
        font-size: 2.2em;
    }

    .news_content {
        font-size: 0.8em;
    }

    .hero-character2 img {

        width: 100%;

    }

    .concept-visual {
        max-width: 450px;
    }

    .recruit-visual {
        max-width: 500px;
    }
/* 画面幅が狭くなったら画面の両端に吸着させる設定に切り替え */
    .chara-left-edge {
        left: 2%;
    }
    .chara-right-edge {
        left: auto;
        right: 2%;
    }
}

/* スマホ対応 */
@media (max-width: 768px) {

    .newsbox {
        display: block;
        align-items: center;
        gap: 30px;
        width: 90%;
        padding: 20px;
        background-color: #fff;
        border-radius: 50px;
        position: absolute;
        z-index: 35;
        bottom: 5%;
        color: #3766a9;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .news_link {
        display: flex;
        /* 横並びにする */
        align-items: center;
        /* 上下中央で揃える */
        justify-content: center;
        /* 左右中央に寄せる（任意） */
        gap: 15px;
        /* テキストとボタンの間の隙間 */

        flex-shrink: 0;
        text-align: center;
        border-right: none;
        /* ボーダーを消す */
        padding: 0;
    }

    /* 重要：PC版の余白をリセットする */
    .news_link .btn-wrapper {
        margin-top: 0;
        /* PC用設定（margin-top: 80pxなど）を打ち消す */
    }

    /* ボタン内のフォントサイズやパディングをスマホ用に微調整 */
    .news_link .btn-company.yazirusi {
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    /* 1. 全体の並びを調整 */
    .news_item a {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0px;
        padding: 15px 10px;
    }

    /* 2. カテゴリーと日付の設定 */
    .news_category,
    .news_date {
        flex: 0 0 auto;
        margin: 0 10px 0 0;
    }

    .news_category {
        padding: 4px 8px;
        border-radius: 2px;
    }

    .hero-recruit {
        position: absolute;
        bottom: -50px;
        right: 2%;
        width: 25%;
        z-index: 66;
        pointer-events: auto;
        will-change: opacity;
        animation: fadeInSimple 1.5s ease-out 1.5s forwards;
        opacity: 0;
    }

    /* 3. タイトルを強制的に次の行へ送る */
    .news_title {
        width: 100%;
        /* 幅100%にすることで、次の行に押し出す */
        margin-top: 5px;
        /* 上に少し隙間を作る */
        font-size: 0.95rem;
        flex: none;
        /* flexの設定をリセット */
    }

    .hero {
        height: 90vh;
        overflow: visible;
        overflow-x: clip;
    }

    .hero-character {
        left: 2%;
        bottom: -140px;
        width: 45%;
    }

    .cloud-large {
        position: absolute;
        /* 基準を画面中央にする */
        left: 50%;
        width: 115%;
        z-index: 10;
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
        pointer-events: none;

        /* energeticRise 内で中央揃えを維持する */
        animation: energeticRise 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

        top: 25%;
        opacity: 0;
        will-change: transform, opacity;
    }

    @keyframes energeticRise {
        0% {
            /* X軸方向の中央揃え (-50%) を維持したまま、他の変形を加える */
            transform: translate(-50%, 5%) scale(0.95);
            opacity: 0;
        }

        100% {
            /* -10%の位置から最終的な -30% の位置まで移動しつつ中央をキープ */
            transform: translate(-50%, -30%) scale(1);
            opacity: 1;
        }
    }

    .work_card {
        flex-direction: column;
    }

    .work_visual {
        flex: none;
    }

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

    .btn-wrapper {
        flex-direction: column;
        /* 縦並び */
        gap: 15px;
        /* 縦並び時の隙間 */
        align-items: flex-start;
        /* 左寄せ */
    }

    .service_flex_container {
        flex-direction: column;
        /* 縦並びに切り替え */
        gap: 40px;
        padding: 40px 20px;
    }

    .service_text,
    .service_img {
        width: 100%;
        /* スマホでは横幅いっぱいに */
    }

    .service_flex_container {
        flex-direction: column;
        gap: 40px;
    }

    .service_img img {
        height: 300px;
        /* スマホでは高さを少し抑える */
    }

    .newsbox {
        flex-direction: column;
        gap: 20px;
    }


    .news_title {
        width: 100%;
        flex: none;
        /* タイトルを次の行へ */
    }

    .nav_title {
        display: none;
    }

    .footer_container {
        flex-direction: column;
        text-align: center;
        padding: 80px 0;
    }

    .foot_left {
        flex-direction: column;
        /* 縦並びに戻す */
        align-items: center;
        /* 中央揃え */
        text-align: center;
        gap: 20px;
    }

    .foot_left img {
        margin: 0 auto 20px;
    }

    .foot_right {
        grid-template-columns: 1fr;
        /* スマホでは1列に */
        margin-top: 30px;
    }

    .hero-copy {
        left: 5%;
        height: 25%;
    }

    .windmill {
        display: none;
    }

    .hero-drone {
        right: 10%;
    }

    .menu-btn {
        display: block;
    }

    /* スマホでボタンを表示 */

    nav ul {
        position: fixed;
        top: 0;
        right: -100%;
        /* 右側に隠しておく */
        width: 80%;
        height: 100vh;
        background: rgba(55, 102, 169, 0.95);
        /* コーポレートカラーの青 */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.5s;
        z-index: 105;
    }

    nav ul.is-active {
        right: 0;
        /* 画面内に滑り込む */
    }

    nav ul li {
        margin: 20px 0;
    }

    nav ul li a {
        font-size: 1.5rem;
        color: #fff !important;
        /* スマホメニュー内は常に白 */
    }
   .company-section {
    padding: 20px;
  }

  /* テーブル構造を縦並びに変更 */
  .info-row {
    flex-direction: column;
    padding: 15px 0;
  }
  .info-table dt {
    width: 100%;
    margin-bottom: 8px;
  }
  
  /* 所在地とMAPボタンの調整 */
  .office-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .office-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .map-btn {
    align-self: flex-end;
  }

  /* 許可番号・業種 */
  .permission-type {
    flex-direction: column;
    gap: 2px;
  }

  /* スマホ時は加入団体を2カラムに変更 */
  .grid-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .text-right {
    grid-column: span 2;
  }

  /* 沿革の縦並び化 */
  .history-item {
    flex-direction: column;
    padding: 8px 0;
  }
  .history-list dt {
    width: 100%;
    color: #4a74b4;
    font-size: 14px;
  }

  /* キャラクターの並び調整 */
  .char-container {
    flex-direction: column;
    gap: 40px;
  }

  .access-container {
    gap: 30px;
  }
  .map-wrapper {
    padding-top: 60%; /* スマホ時は少し縦長にして見やすくする */
  }
body.recruit.sub-page .welfare-container {
    grid-template-columns: 1fr; /* スマホ時は1列に強制リセット */
    row-gap: 50px;
    padding: 0 20px 100px;
  }

  body.recruit.sub-page .welfare-item,
  body.recruit.sub-page .welfare-item:nth-child(odd),
  body.recruit.sub-page .welfare-item:nth-child(even) {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 340px;
    margin-top: -50px; /* 右列のPC用マージンをリセット */
  }

  /* スマホ時は一律で絶対配置（浮かせる処理）を解除して、通常の縦並びにする */
  body.recruit.sub-page .welfare-item .welfare-visual,
  body.recruit.sub-page .welfare-item:nth-child(odd) .welfare-visual,
  body.recruit.sub-page .welfare-item:nth-child(even) .welfare-visual {
    position: static;
    display: flex;
    justify-content: center;
    margin: 0 0 -80px 0;
  }
 body.recruit .section-title {
    margin-bottom: 0;
    padding-left: 0em;
    text-indent: 0em;
}
  body.recruit.sub-page .circle-placeholder {
    width: 180px;
    height: 180px;
  }

  body.recruit.sub-page .welfare-bubble {
    width: 280px;
    height: 280px;
    padding: 20px;
  }

  body.recruit.sub-page .welfare-title {
    font-size: 16px;
    margin-bottom: 8px;
  }

  body.recruit.sub-page .welfare-text {
    font-size: 12px;
    max-width: 210px;
  }
  body.recruit.sub-page .welfare-item:nth-child(odd),
  body.recruit.sub-page .welfare-item:nth-child(even) {
    transform: translateY(30px); /* 左右のブレをなくし、30px下から上に */
  }
  
  body.recruit.sub-page .voice-container {
    gap: 40px;
  }

  /* スマホ時はすべて「アイコンが上、吹き出しが下」の縦並びにリセット */
  body.recruit.sub-page .voice-item,
  body.recruit.sub-page .voice-item:nth-child(even) {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  body.recruit.sub-page .avatar-placeholder {
    width: 100px;
    height: 100px; /* スマホ時はアイコンを少し小ぶりに */
  }

  body.recruit.sub-page .voice-item:nth-child(odd),
  body.recruit.sub-page .voice-item:nth-child(even) {
    transform: translateY(30px); /* 30px下から上に真っ直ぐ上がる */
  }
  /* スマホ時は上からの重ね合わせ順を一律リセット */
  body.recruit.sub-page .welfare-item:nth-child(1),
  body.recruit.sub-page .welfare-item:nth-child(2),
  body.recruit.sub-page .welfare-item:nth-child(3),
  body.recruit.sub-page .welfare-item:nth-child(4),
  body.recruit.sub-page .welfare-item:nth-child(5),
  body.recruit.sub-page .welfare-item:nth-child(6),
  body.recruit.sub-page .welfare-item:nth-child(7),
  body.recruit.sub-page .welfare-item:nth-child(8) {
    z-index: auto;
  }

body.recruit.sub-page .voice-section{margin-top: 0px !important;}
.isomet-map-container .pin-text {
        font-size: 11px;
        padding: 3px 10px;
    }
    .isomet-map-container .pin-marker {
        width: 18px;
        height: 18px;
    }
    .isomet-map-container .pin-marker::after {
        width: 8px;
        height: 8px;
    }

    .isomet-modal-window {
        padding: 40px 20px 20px;
        width: 95%;
    }
    .isomet-modal-content {
        flex-direction: column;
        gap: 20px;
    }
    .isomet-modal-gallery {
        flex: none;
        width: 100%;
        flex-direction: row; /* スマホ時は画像を横に2枚並べる */
    }
    .isomet-modal-gallery img {
        width: 50%;
    }
    .isomet-modal-close {
        top: 15px;
        right: 15px;
    }

    .character4 img {
        width: 45%;     /* スマホ画面では少し割合を大きめに */
        top: -140px;    /* スマホの縮尺に合わせて突き上げ量をマイルドに調整 */
        right: 2%;
    }


  
    .sdgs-container {
        gap: 24px;
    }
    .sdgs-card {
        padding: 35px 24px;  
        border-radius: 24px; 
    }
    .sdgs-badge {
        width: 75px;        
    }
    .sdgs-title-ja {
        font-size: 19px;
    }
    .sdgs-list li {
        font-size: 13.5px;
        padding-left: 26px;
    }
    .sdgs-list li::before {
        width: 13px;
        height: 13px;
        top: 4px;
    }

    /* スマホ時は縦並びに変更 */
    .sdgs_report_list {
        gap: 40px;
    }
    .sdgs_report_link {
        flex-direction: column;
        gap: 15px;
    }
    .sdgs_report_img {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .sdgs_report_meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        margin-bottom: 8px;
    }
    .sdgs_report_title {
        font-size: 16px;
    }
    .sdgs_report_text-content {
        font-size: 13px;
        line-height: 1.6;
    }
.sdgs-outer-chara {
        display: none;
    }

    .privacy-policy h1{
        font-size: 1.7rem;
    }

    .privacy-policy h2{
        font-size: 1.1rem;
    }
    .buil {
    height: 200px;
}

.hero-character2{bottom:-100px;width: 150px;}
.recruit .title_en,
.service_main .title_en {
    top: -120px;
     padding: 10px;
     left:0px;
}
.service_main {
    padding-top: 80px;
    padding-bottom: 0px;
}
.recruit {
    background-color: #b6c14e;
    padding: 50px 0;
}
.en-title {
    margin: 10px auto 50px;
}
.recruit .section-title {
    padding-left: 0;
    text-indent: 0;
}
.character3 img {
    right: 5%;
    top: -120px;
    height: 200px;

}

.recruit .comp-cloud {
    padding-top: 100px;
}

.company .section-title, .service .section-title {
line-height: 1.5em;
}

  }