/* --- リセット & 基本設定 --- */
* {
    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;
}

@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;
}

/* --- ヘッダー（通常時：帰り道の設定） --- */
header {
    height: 110px;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    background: transparent;
    z-index: 100;

    /* ここに transition を書くことで、戻る時もゆっくりになります */
    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;
}

/* --- ロゴを中央に配置する設定（常時表示版） --- */
.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;
}

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;
}

/* --- メインビジュアル (Hero) --- */
.hero {
    width: 100%;
    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: 100%;
    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: 100%;
    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;

    /* アニメーション：シンプルにフェードイン */
    /* 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));
}

/* シンプルなフェードインアニメーション */
@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.75rem;
    padding: 4px 12px;
    border-radius: 2px;
    min-width: 80px;
    text-align: center;
}

/* 日付 */
.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: 250px;
    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;
}

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

.service .container {
    position: relative;
    z-index: 2;
    /* ...既存のスタイル... */
    font-size: 1.2em;
    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;
    /* ...既存のスタイル... */
    font-size: 1.2em;
    color: #3766a9;
    line-height: 2em;
    font-weight: 500;
    margin: 0 auto;
}

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

.service_flex_container {
    display: flex;
    justify-content: space-between;
    /* 両端に寄せる */
    align-items: center;
    /* 上下中央揃え */
    gap: 120px;
    /* テキストと画像の間隔 */
    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;
}

/* 画像側（外枠） */
.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;
    /* ...既存のスタイル... */
    font-size: 1.2em;
    color: #fff;
    line-height: 2em;
    font-weight: 500;
    margin: 0 auto;
}

.recruit .section-title {
    color: #fff;
    font-size: 2em;
    line-height: 1.5em;
}

.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: 100px;
    /* ロゴのサイズをお好みで調整 */
    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;
}




.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: 2.5rem;
    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;
}



.works_archive_container {
    max-width: 1100px;
    margin: 120px auto 80px;
    padding: 0 20px;
}

.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-character2 {
    position: absolute;
    width: 18%;
    right: 8%;
    /* 少し内側に寄せます */
    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: 15%;
    bottom: -220px;
    z-index: 50;
    height: 400px;

    /* 初期状態：100px下に下げて透明にする */
    opacity: 0;
    transform: translateY(100px);

    /* バウンド効果の設定 */
    /* 1.0sかけて、少し行き過ぎて戻るベジェ曲線 */
    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;
}

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

    }

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

    }

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

    }

}


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

    }

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

    }

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

    }

    .service .container,
    .recruit .container,
    .service_main .container {
        font-size: 1.1em;
    }

    .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%;

    }
}

/* スマホ対応 */
@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;
    }

    .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;
    }

    .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%;
}
}