/*
Theme Name: Dyne Corporate Theme
Description: ダイニー コーポレートサイト移行用テーマ
Author: あなたのお名前
Version: 1.0.0
*/

/* =========================================
   ベース設定・共通変数
   ========================================= */
body {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    color: #333;
    -webkit-font-smoothing: antialiased;

    /* --- アニメーション設定変数 --- */
    --header-fade-duration: 0.8s;
    /* ヘッダーのフェードイン時間 */
    --header-fade-delay: 1.4s;
    /* ヘッダーの開始遅延 */
    --header-fade-easing: cubic-bezier(0.165, 0.84, 0.44, 1);
    /* ヘッダーのイージング関数 */

    --scroll-fade-duration: 0.8s;
    /* スクロール表記のフェード時間 (Headerと同期) */
    --scroll-fade-delay: 1.4s;
    /* スクロール表記の開始遅延 (Headerと同期) */

    --fv-zoom-duration: 4.0s;
    /* FV画像のズームアウト時間 */
    --fv-zoom-delay: 0.5s;
    /* FV画像のズーム開始遅延 */
    --fv-zoom-scale-start: 1.02;
    /* FV画像の初期拡大率 */

    /* Serviceセクション用アニメーション */
    --service-zoom-duration: 4.0s;
    /* Service画像のズーム時間 */
    --service-zoom-delay: 0.5s;
    /* Service画像のズーム遅延 */
    --service-zoom-scale-start: 1.08;
    /* Service画像の初期拡大率 */

    /* Careersセクション用アニメーション */
    --careers-zoom-duration: 4.0s;
    /* Careers画像のズーム時間 */
    --careers-zoom-delay: 0.5s;
    /* Careers画像のズーム遅延 */
    --careers-zoom-scale-start: 1.08;
    /* Careers画像の初期拡大率 */
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-only {
    display: none;
}

/* ▼▼▼ 追加：スクロール表記の配置基準にするため ▼▼▼ */
.site-main {
    position: relative;
    /* Context for absolute scroll element */
    width: 100%;
}

/* =========================================
   ヘッダーデザイン (Studio再現)
   ========================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(102, 102, 102, 0) 100%);
    padding: 48px 48px;
    transition: background 0.3s ease, padding 0.3s ease;

    /* アニメーション: 上からフェードイン */
    opacity: 0;
    /* 初期状態：非表示 */
    animation: headerFadeDown var(--header-fade-duration) var(--header-fade-easing) var(--header-fade-delay) forwards;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.logo img {
    width: 64px;
    /* Studio Design: 64px */
    height: auto;
    display: block;
}

/* =========================================
   PCナビゲーション（デスクトップ用）
   ========================================= */
.pc-nav .nav-list {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
}

.nav-list a {
    color: #fff;
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: 14px;
    /* Studio */
    font-weight: 600;
    /* Studio: 600 */
    line-height: 1.4;
    /* Studio: 140% */
    letter-spacing: 0.15em;
    /* Studio: 15% */
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.nav-list a:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.icon-link {
    gap: 6px;
}

.icon-link .material-icons {
    font-size: 16px;
    vertical-align: middle;
}

/* =========================================
   SPメニューボタン (ハンバーガー)
   ========================================= */
.sp-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
}

/* =========================================
   レスポンシブ (スマホ表示 - ヘッダー)
   ========================================= */
@media screen and (max-width: 960px) {
    .site-header {
        padding: 24px;
    }

    .pc-nav {
        display: none;
    }

    .sp-menu-btn {
        display: block;
    }
}

/* =========================================
   FV（ファーストビュー）用キーフレームアニメーション
   ========================================= */
@keyframes headerFadeDown {
    0% {
        opacity: 0;
        transform: translateY(-48px);
    }

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

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

@keyframes messageFadeUp {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }

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



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

    100% {
        opacity: 1;
    }
}

@keyframes scrollFadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes fvZoomOut {
    0% {
        transform: scale(var(--fv-zoom-scale-start));
    }

    100% {
        transform: scale(1.0);
    }
}

/* =========================================
   トップページ：メインビジュアル (FV)
   ========================================= */
.fv-section {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 0;
    /* Second View (Message) より奥に配置 */
    height: 100vh;
    width: 100%;
    background-color: #282828;
    overflow: hidden;
}

/* 画像を表示するエリア */
.fv-image-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 83vh;
    /* Desktop/Tablet Height from Studio */
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 拡大時に溢れないように調整 */
}

.fv-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;

    /* アニメーション: ズームアウト（縮小） */
    transform: scale(var(--fv-zoom-scale-start));
    /* 初期状態 */
    animation: fvZoomOut var(--fv-zoom-duration) cubic-bezier(0.25, 1, 0.5, 1) var(--fv-zoom-delay) forwards;
    /* イージング: 滑らかな動きのためのcubic-bezier */
}

/* =========================================
   右側のスクロール表記（独立・流れるように変更）
   ========================================= */
.fv-scroll-side {
    position: absolute;
    right: 48px;
    top: 40vh;
    /* Positioned relative to main (Document Flow), scrolls away */
    z-index: 20;
    /* Increase z-index to ensure visibility */
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;

    /* アニメーション: 下からフェードアップ */
    opacity: 0;
    /* 初期状態 */
    animation: scrollFadeUp var(--scroll-fade-duration) var(--header-fade-easing) var(--scroll-fade-delay) forwards;
}

.scroll-text {
    writing-mode: vertical-rl;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
    opacity: 1.0;
}

.scroll-line {
    width: 1px;
    /* Slightly thinner for elegance */
    height: 250px;
    /* グラデーション線：白から透明へ */
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    position: relative;
}

/* 線のアニメーション削除済み */
/* .scroll-line::after ブロック削除 */
/* @keyframes scrollLineExtend ブロック削除 */


/* =========================================
   セカンドビュー：メッセージセクション
   ========================================= */
.message-section {
    position: relative;
    z-index: 10;

    background-color: #282828;
    color: #fff;

    /* お客様調整済みの値を保持 */
    padding: 0 20px 80px;

    text-align: center;
    min-height: 20vh;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    /* お客様調整済みの値を保持 */
    padding-top: 20px;
}

/* 上部のグラデーション（影） */
.message-section::before {
    content: "";
    position: absolute;
    top: -150px;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, rgba(40, 40, 40, 0), #282828);
    pointer-events: none;
}

.message-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.message-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    /* PC: 600 */

    /* お客様調整済みの値を保持 */
    font-size: 72px;
    /* PC: 72px */
    margin-bottom: 60px;

    line-height: 1.4;
    letter-spacing: 0.05em;

    /* アニメーション: 下からフェードイン (初期状態) */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    /* Fallback or useful if toggling */
}

/* Scroll Triggered Active State */
.message-title.is-active {
    animation: messageFadeUp 1s ease-out 0.3s forwards;
}

.message-text {
    font-family: "Noto Sans JP", sans-serif;

    /* お客様調整済みの値を保持 */
    font-size: 16px;
    font-weight: 700;

    line-height: 2.4;
    letter-spacing: 0.05em;
    margin: 0;

    /* アニメーション: フェードインのみ (初期状態) */
    opacity: 0;
    transition: opacity 1s ease-out;
}

.message-text.is-active {
    animation: fadeInSimple 1s ease-out 0.4s forwards;
}


/* =========================================
   レスポンシブ (タブレット表示)
   ========================================= */
@media screen and (max-width: 1024px) {

    /* Tablet: Prioritize Width */
    .fv-image-box {
        height: 100%;
        padding: 0;
    }

    .fv-image-box img {
        width: 180%;
        /* 余白をカットするために大きく拡大 */
        height: auto;
        object-fit: contain;
    }

    .fv-scroll-side {
        top: 486px;
        /* Shift height to 60% */
        right: 5px;
        /* Close to edge */
        transform: scale(0.7);
        /* Shrink further */
        transform-origin: right center;
        /* Keep aligned to right */
    }

    /* Message Section Tablet Adjustments */
    .message-title {
        font-size: 48px;
    }

    .message-text {
        font-size: 14px;
    }
}


/* =========================================
   レスポンシブ (スマホ表示)
   ========================================= */
@media screen and (max-width: 768px) {

    /* --- FVエリア（スマホ調整） --- */
    .fv-section {
        background-color: #282828;
        height: 560px;
        /* Studio設定: 高さ縮小 */
    }

    .fv-image-box {
        width: 100%;
        height: 100%;
        /* Use full height to allow max width */
    }

    .fv-image-box img {
        width: 170%;
        /* Oversize for SP */
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .fv-scroll-side {
        top: 186px;
        /* 560px * 60% = 336px. メイントップからの相対配置 */
        right: 5px;
        /* 端に寄せる */
        transform: scale(0.6);
        /* Shrink further */
        transform-origin: right center;
        /* Keep aligned to right */
    }

    .scroll-text {
        font-size: 10px;
    }


    /* --- メッセージエリア（スマホ調整） --- */
    .message-section {
        padding: 80px 20px;
        text-align: left;
    }

    .message-title {
        /* スマホでの文字サイズ調整 */
        font-size: 32px;
        margin-bottom: 40px;
        text-align: left;
    }

    .message-text {
        font-size: 12px;
        text-align: left;
        line-height: 1.8;
    }

    /* PC用の改行を無効化 */
    br.pc-only {
        display: none !important;
    }
}

/* =========================================
   サービスセクション
   ========================================= */
.service-section {
    background-color: #ebf0f5;
    /* 画像に合わせた薄いグレーブルー */
    padding: 120px 48px;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.service-container {
    max-width: 1280px;
    /* 少し広めに */
    width: 100%;
    margin: 0 auto;
}

/* --- ヘッダー --- */
.service-header {
    display: flex;
    justify-content: flex-start;
    /* 左寄せ */
    align-items: center;
    border-bottom: none;
    /* 下線を削除 */
    padding-bottom: 0;
    margin-bottom: 60px;
}

.service-header .section-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 64px;
    /* 40pxから微増 */
    color: #222;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
}

.service-header .view-more-link {
    display: none;
    /* 画像にないので非表示（HTMLは維持） */
}

.view-more-link {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: opacity 0.3s;
}

.view-more-link:hover {
    opacity: 0.7;
}

/* --- コンテンツボディ --- */
.service-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    /* 80pxから縮小 */
}

/* ▼▼▼ 左側：画像エリア（白枠削除） ▼▼▼ */
.service-img {
    flex: 1.4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* マスク用のフレーム枠 */
.service-img-frame {
    width: 100%;
    max-width: 720px;
    border-radius: 10px;
    overflow: hidden;
    /* 画像の拡大分をここできれいに切り落とす */
    margin: 0;
    padding: 0;
    line-height: 0;
    /* 画像の下隙間防止 */
    /* 下部の隙間防止 */
    box-shadow: 40px 50px 30px rgba(0, 0, 0, 0.1);
    /* 濃い影を追加 */
}

.service-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    /* 親フレームで角丸にするためオフ */
}

/* ▼▼▼ 右側：テキスト情報 ▼▼▼ */
.service-info {
    flex: 0.8;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 24px;
    /* 右側の位置調整 */
}

.service-subtitle {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 24px;
    /* 再び大きく */
    color: #222;
    margin-bottom: 0px;
    /* 余白を詰める */
    letter-spacing: 0.05em;
}

.service-name {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    /* より太く */
    font-size: 70px;
    /* 56pxから少し大きく、指示に合わせて */
    margin: 0 0 8px 0;
    /* 上下の余白を詰める */
    line-height: 1.1;
    color: #222;
    letter-spacing: 0.02em;
}

.service-desc {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    /* 太く */
    font-size: 18px;
    /* 16pxから微増 */
    line-height: 1.6;
    margin-bottom: 40px;
    color: #222;
}

/* Service Section SP Adjustments */
@media screen and (max-width: 768px) {
    .service-section {
        padding: 60px 10px 10px 10px;
    }

    .service-header {
        margin-bottom: 0px;
        /* Reduce gap */
    }

    .service-header .section-title {
        font-size: 28px;
    }

    .service-desc {
        font-size: 14px;
        letter-spacing: -0.05em;
        white-space: nowrap;
    }

    .service-body {
        margin-top: -20px;
        /* Force reduce gap */
    }
}

/* --- ボタンデザイン --- */
.service-btn {
    background: #222;
    /* ほぼ黒 */
    border-radius: 8px;
    padding: 16px 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff !important;
    transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 40px 50px 30px rgba(0, 0, 0, 0.1);
    /* Deep shadow */
}

.service-btn .btn-text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 14px;
}

/* Specificity increased + !important to override js-fade-up */
.service-body .service-btn:hover {
    transform: translate(6px, 12px) !important;
    transition: all 0.3s ease !important;
    box-shadow: none;
    opacity: 1;
}

/* =========================================
   アニメーション（ファイル末尾に移動・統合済）
   ========================================= */

/* =========================================
   レスポンシブ
   ========================================= */
@media screen and (max-width: 1024px) {
    .service-header .section-title {
        font-size: 48px;
    }

    .service-name {
        font-size: 60px;
    }
}

@media screen and (max-width: 768px) {
    .service-section {
        padding: 80px 24px;
    }

    .service-header .section-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .service-body {
        flex-direction: column;
        gap: 10px;
    }

    .service-img {
        width: 100%;
        padding: 40px 20px;
    }

    .service-info {
        width: 100%;
    }

    .service-subtitle {
        font-size: 14px;
    }

    .service-name {
        margin-top: 20px;
        font-size: 24px;
    }

    .service-desc {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 520px) {
    .service-desc {
        font-size: 12px;
        line-height: 1.6;
    }
}

/* =========================================
   採用（CAREERS）セクション
   ========================================= */
.careers-section {
    background-color: #ebf0f5;
    padding: 120px 48px;
    position: relative;
    z-index: 10;
}

.careers-container {
    max-width: 1280px;
    /* Match Service */
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    /* Match Service */
}

.careers-content {
    flex: 0.8;
}

.careers-content .section-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 64px;
    color: #333;
    margin: 0 0 20px;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.careers-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
    color: #333;
    margin-bottom: 24px;
}

.careers-btn {
    background: #282828;
    border-radius: 10px;
    padding: 15px 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 40px 50px 30px rgba(0, 0, 0, 0.1);
    /* Deep shadow */
}

.careers-content .careers-btn:hover {
    transform: translate(6px, 12px) !important;
    transition: all 0.3s ease !important;
    box-shadow: none;
    opacity: 1;
}

.careers-image-box {
    flex: 1.4;
    /* Match Service */
    position: relative;
    border-radius: 10px;
    /* Match Service */
    overflow: hidden;
    height: 520px;
    /* PC Height */
    box-shadow: 40px 50px 30px rgba(0, 0, 0, 0.1);
    /* Updated shadow */
}

.careers-image {
    width: 100%;
    height: 100%;
    background-image: url("https://images.unsplash.com/photo-1531538606174-0f90ff5dce83?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=Mnw2MzQ2fDB8MXxzZWFyY2h8MTMzfHxkaXNjdXNzaW9ufGVufDB8fHx8MTYxNjUxNDY2OA&ixlib=rb-1.2.1&q=80&w=1080");
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

@media screen and (max-width: 960px) {
    .careers-section {
        padding: 80px 24px;
    }

    .careers-container {
        flex-direction: column-reverse;
        gap: 60px;
        text-align: left;
        align-items: flex-start;
    }

    .careers-content .section-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .careers-text {
        font-size: 1rem;
        margin-bottom: 40px;
    }

    .careers-image-box {
        width: 100%;
        height: 400px;
        flex: none;
        /* Prevent flex-basis 0% collapse */
        /* Tablet Height (sharing 960px break) */
    }
}

@media screen and (max-width: 768px) {
    .careers-container {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    .careers-image-box {
        height: 240px;
        /* SP Height */
        display: block;
        flex: none;
        /* Ensure flex doesn't mess with height */
        width: 100%;
    }

    .careers-image {
        opacity: 1 !important;
        /* Force visibility */
    }
}

@media screen and (max-width: 520px) {

    .careers-container,
    .careers-content {
        text-align: center !important;
        align-items: center !important;
    }

    .careers-text {
        font-size: 12px;
        line-height: 1.6;
    }
}

/* =========================================
   ニュース（NEWS）セクション
   ========================================= */
#news.news-section {
    background-color: #ebf0f5;
    padding: 120px 48px;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.news-section * {
    box-sizing: border-box;
}

.news-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0;
    /* 下線なしに変更 */
    padding-bottom: 0;
    margin-bottom: 60px;
}

.news-header .section-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 3rem;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

.view-more-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #333;
    transition: 0.3s cubic-bezier(0.4, 0.4, 0, 1);
    opacity: 1;
    /* 不透明度を1で開始 */
}

/* ホバー効果: 透明度を少し下げる（よくあるStudioの挙動） */
.view-more-link:hover {
    opacity: 0.7;
    /* 軽微な透明度変化 */
}

.view-more-link .material-icons {
    transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.view-more-link:hover .material-icons {
    transform: translateX(6px);
}

.view-more-text {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    /* Reset p tag margin */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.news-item {
    background: #fff;
    border-radius: 8px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* 柔らかく広い影 */
    transition: all 0.3s ease;
    aspect-ratio: 1 / 1;
    /* 正方形に設定 */
    overflow: hidden;
}

.news-list .news-item:hover {
    transform: translate(6px, 12px) !important;
    transition: all 0.3s ease !important;
    box-shadow: none;
}

.news-list .news-item:hover .news-link {
    opacity: 1;
    /* Override global a:hover */
}

.news-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 60px 40px 40px;
    /* 提供画像に合わせて余白をさらに広く */
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.news-image-box {
    width: 100%;
    height: 200px;
    /* 画像エリアサイズ調整 */
    margin-bottom: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.news-image {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-image.placeholder {
    background-color: transparent;
}

/* 以前のズーム効果は削除（Studioの動きに合わせる） */
.news-item:hover .news-image {
    transform: none;
}

.news-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 24px;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
    /* タイトルエリアを伸ばして日付を下部に配置 */
}

.news-date {
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    color: #bdbdbd;
    /* 画像に近い非常に薄いグレー */
    font-weight: 400;
    margin: 0;
}

.news-header .section-title {
    font-weight: 600;
}

.news-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 100px;
    /* 提供CSS指定の100pxに */
}

.x-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #282828;
    border-radius: 4px;
    width: 500px;
    max-width: 100%;

    /* New: 100px top margin */
    padding: 15px;
    /* New: 15px padding */
    gap: 20px;
    /* New: 20px gap */
    color: #fff !important;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    /* New: 18px */
    line-height: 1.0;
    /* New: 1.0 */
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    letter-spacing: 0em;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.x-button:hover {
    transform: translate(6px, 12px) !important;
    transition: all 0.3s ease !important;
    box-shadow: none;
    box-shadow: none;
    opacity: 1;
    /* 透明にならないように修正 */
}

@media screen and (max-width: 960px) {
    #news.news-section {
        padding: 80px 24px;
    }

    .news-list {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .news-header {
        flex-direction: row !important;
        /* 横並びを強制 */
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-bottom: 40px;
        width: 100%;
        /* Ensure width */
    }

    .news-header .section-title {
        font-size: 28px;
        font-weight: 600;
    }

    .x-button {
        width: 500px;
        max-width: 100%;
        /* Reduce for SP if needed, but keeping 100px base or consistent? User didn't specify SP margin, assuming inherited 100px is okay or adjusted. */
    }
}

/* =========================================
   フッター (Studio再現)
   ========================================= */
.site-footer {
    background-color: #282828;
    color: #fff;
    padding: 96px 0;
    width: 100%;
}

.footer-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
}

/* --- フッターCTA (CONTACT / CAREERS) --- */
.footer-cta {
    display: flex;
    gap: 32px;
    margin-bottom: 96px;
}

.footer-cta-item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 48px 48px;
    text-decoration: none;
    color: #282828;
    border-radius: 12px;
    border-radius: 12px;
}

.footer-cta-item:hover {
    opacity: 1;
    /* グローバルのhover透明度変更を打ち消し */
}



.cta-content {
    transition: opacity 0.3s ease;
}

.footer-cta-item:hover .cta-content {
    opacity: 0.7;
}

.cta-label-en {
    font-family: "Montserrat", sans-serif;
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: 0.02em;
}

.cta-label-jp {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: #282828;
}

.footer-cta-item .material-icons {
    font-size: 48px;
    color: #282828;
    transition: transform 0.3s cubic-bezier(0.4, 0.4, 0, 1), opacity 0.3s ease;
}

.footer-cta-item:hover .material-icons {
    transform: translateX(6px);
    opacity: 0.7;
}

/* --- フッターメイン (主要ナビゲーション) --- */
.footer-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Changed from center */
    margin-bottom: 64px;
}

.footer-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* Changed from center */
    gap: 24px 40px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list a {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4, 0.4, 0, 1);
}

.footer-nav-list a:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.footer-nav-list .material-icons {
    font-size: 18px;
}

/* --- フッターボトム (リンク & コピーライト) --- */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 0;
    border-top: none;
}

.footer-bottom-links {
    display: none;
    /* 画像にないため非表示 */
}

.copyright {
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.05em;
}

/* --- Responsive (Mobile) --- */
@media screen and (max-width: 960px) {
    .site-footer {
        padding: 64px 0;
    }

    .footer-inner {
        padding: 0 24px;
    }

    .footer-cta {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 64px;
    }

    .footer-cta-item {
        padding: 40px 32px;
    }

    .cta-label-en {
        font-size: 28px;
    }

    .cta-label-jp {
        font-size: 12px;
    }

    .footer-main {
        display: block;
        width: 100%;
    }

    .footer-nav {
        display: block;
        margin-bottom: 40px;
    }

    .footer-nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .footer-nav-list a {
        font-size: 14px;
    }

    .footer-bottom-links {
        display: flex;
        /* Show Press Kit / Privacy Policy */
        justify-content: flex-start;
        /* Left align */
        width: 100%;
        /* Ensure container fills width so items align left */
        gap: 32px;
        margin-bottom: 40px;
    }

    .footer-bottom-links a {
        font-family: "Montserrat", sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        letter-spacing: 0.1em;
    }

    .footer-bottom {
        align-items: flex-start;
    }

    .copyright {
        margin-top: 0;
        font-size: 9px;
        text-align: left;
        align-self: flex-start;
        /* Ensure specific left alignment in flex column */
        width: 100%;
    }

    /* Header Logo SP Size */
    .logo img {
        width: 48px;
    }
}

/* =========================================
   会社紹介 (COMPANY) ページ - 新レイアウト
   ========================================= */

/* --- 共通レイアウト --- */
.company-page {
    position: relative;
    padding-top: 0;
    width: 100%;
}

.company-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Hero Section --- */
.company-hero {
    width: 100%;
    background-color: #1a1a1a;
    padding: 160px 0 130px;
    height: 410px;
    box-sizing: border-box;
    /* More vertical padding */
    color: #fff;
    display: flex;
    align-items: center;
}

/* ヘッダー位置に合わせた全幅コンテナ */
.hero-container-fluid {
    width: 100%;
    padding: 0px 48px;
    /* ヘッダーのパディングと一致 */
}

/* --- COMPANY Title --- */
.page-title {
    font-family: "Montserrat", sans-serif;
    font-size: 64px;
    font-weight: 500;
    /* 太めのウェイト -> 500 */
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1;
    color: #fff;
    text-align: left;
}


/* --- コンテンツエリア --- */
.company-content {
    width: 100%;
    background: #fff;
}

.company-section {
    padding: 100px 0;
}


/* --- ミッションセクション --- */
.mission-section {
    background-color: #ebf0f5;
    text-align: center;
}

.company-heading-center {
    font-family: "Montserrat", sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
    color: #5b6c80;
    text-transform: uppercase;
}

.mission-catch-center {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 48px;
    line-height: 1.4;
    color: #333;
}

.mission-body {
    max-width: 800px;
    margin: 0 auto;
}

.mission-text-center {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 2.2;
    color: #333;
    display: inline-block;
    text-align: center;
    /* 中央揃え */
}

.mission-text-center br {
    display: block;
}

.vision-image img {
    width: 100%;
    max-width: 1000px;
    height: auto;
    border-radius: 8px;
    margin-top: 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.mt-80 {
    margin-top: 80px;
}


/* --- バリュー（Values）セクション --- */
.values-section {
    background-color: #ebf0f5;
}

.company-heading {
    text-align: center;
    color: #222;
    margin-bottom: 16px;
    font-size: 64px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
}

.values-title-group {
    text-align: center;
    margin-bottom: 60px;
}

.values-subtitle {
    text-align: center;
    color: #333;
    margin-bottom: 60px;
    display: block;
    font-weight: 700;
    font-size: 24px;
}

/* VALUES: 個別カードの縦積みグリッド */
.values-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* カード間の隙間 */
    max-width: 60%;
    /* 読みやすさのために幅を制限 */
    margin: 0 auto;
    background: transparent;
    padding: 0;
    box-shadow: none;
    align-items: center;
    justify-content: center;
}

/* Values Items: White Individual Cards */
.values-item {
    background: #fff;
    padding: 24px 24px;
    /* Card padding */
    border-radius: 12px;
    text-align: left;
    width: 100%;
    margin: 0;
}

.values-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 32px;
    /* Increased from 24px */
    font-weight: 700;
    margin-bottom: 16px;
    border-bottom: none;
    padding-bottom: 0;
    display: block;
    margin: 0;
}


.values-desc {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #333;
    font-weight: 700;
    margin-bottom: 16px;
}


/* --- 会社概要 (About) セクション (2カラム) --- */
.about-section {
    background-color: #e9edf5;
    padding: 96px 0;
}

/* Flex Wrapper */
.about-content-wrapper {
    display: flex;
    justify-content: center;
    gap: 80px;
    align-items: flex-start;
}

.about-left-column {
    flex: 0 0 300px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.about-section .company-heading {
    text-align: left;
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 64px;
    color: #282828;
    line-height: 1;
}

.about-section .values-subtitle {
    text-align: left;
    margin-bottom: 10px;
    color: #282828;
    font-size: 24px;
    font-weight: 700;
}

.about-list {
    margin-top: 0;
    border-top: none;
}

/* 右列：画像 */
.about-image {
    width: 474px;
    flex-shrink: 0;
}

.about-image img {
    width: 474px;
    height: 625px;
    object-fit: cover;
    border-radius: 10px;
}

.about-row {
    display: flex;
    padding: 10px 0;
    border-bottom: none;
}

.about-row dt {
    width: 120px;
    font-weight: 400;
    /* Changed from 700 */
    font-size: 16px;
    line-height: 1.6;
    color: #282828;
    flex-shrink: 0;
}

.about-row dd {
    flex-grow: 1;
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #282828;
}

/* Location Row: Stack Vertically for Left Alignment */
.about-row.location-row {
    display: block;
}

.about-row.location-row dt {
    width: auto;
    margin-bottom: 15px;
}

.about-row.location-row dd {
    width: 100%;
    margin: 0;
}

/* --- 拠点情報 (Location) ブロック (縦積み) --- */
/* --- Location Block (Vertical Stack) --- */
.location-block {
    display: block;
    /* Stack vertically */
    margin-bottom: 24px;
}

.location-info {
    margin-bottom: 12px;
}

.location-map {
    width: 100%;
    height: 200px;
    margin-top: 12px;
}

.location-map iframe {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: none;
    background: #eee;
}

.location-name {
    font-weight: 400;
    margin-bottom: 8px;
    font-size: 16px;
}

.mt-40 {
    margin-top: 40px;
}


/* =========================================
   レスポンシブ (スマホ表示 - Company)
   ========================================= */
@media screen and (max-width: 960px) {
    .company-hero {
        padding: 100px 0 60px;
        height: 320px;
    }

    .hero-container-fluid {
        padding: 0 24px;
        box-sizing: border-box;
        /* Match mobile header padding */
    }

    .company-container {
        padding: 0 24px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .page-title {
        font-size: 40px;
    }

    /* Mission Section Mobile Left Align */
    .mission-section {
        padding: 60px 0;
    }

    .company-heading-center {
        font-size: 28px;
        line-height: 1.0;
        margin-bottom: 20px;
        color: #56698f;
        font-weight: 600;
    }

    .mission-catch-center {
        font-size: 28px;
        line-height: 1.6;
        margin-bottom: 32px;
        color: #282828;
        font-weight: 700;
    }

    .mission-text-center {
        font-size: 16px;
        line-height: 1.6;
        color: #282828;
        font-weight: 400;
        margin-bottom: 40px;
    }

    /* Values Section Mobile Left Align */
    .values-title-group {
        margin-bottom: 40px;
    }

    .values-section .company-heading {
        font-size: 40px;
    }

    .values-subtitle {
        margin-bottom: 40px;
    }

    /* Values Stack */
    .values-grid {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        gap: 20px;
        box-sizing: border-box;
        align-items: stretch;
        margin: 0;
    }

    .values-item {
        padding: 24px;
        box-sizing: border-box;
    }

    .values-title {
        font-size: 24px;
        color: #282828;
        line-height: 1.0;
        letter-spacing: 0.05em;
    }

    .values-desc {
        font-size: 12px;
        line-height: 1.4;
        font-weight: 700;
        color: #282828;
    }

    /* About Stack */
    .about-content-wrapper {
        flex-direction: column-reverse;
        /* Image on top */
        gap: 40px;
    }

    .about-section .company-heading {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .about-section .values-subtitle {
        font-size: 18px;
        margin-bottom: 24px;
    }

    .about-row dt,
    .about-row dd,
    .location-name,
    .location-address {
        font-size: 16px;
    }

    .about-image {
        width: 100%;
        margin-top: 0;
    }

    .about-image img {
        width: 100%;
        height: 240px;
        object-fit: cover;
    }

    /* Location Stack */
    .location-map {
        width: 100%;
        height: 200px;
    }

    /* Tablet Only: Horizontal Location Blocks */
    .about-row.location-row dd {
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }

    .about-row.location-row dd .location-block {
        width: 50%;
        margin-top: 0 !important;
    }
}

@media screen and (max-width: 375px) {

    /* Mini Title */
    .company-heading-center {
        font-size: 16px;
    }

    /* Mini Catchphrase */
    .mission-catch-center {
        line-height: 1.4;
        /* Size stays 28px */
    }

    /* Mini Body */
    .mission-text-center {
        font-size: 12px;
    }
}

/* =========================================
   お問い合わせ (CONTACT) ページ
   ========================================= */

/* --- ヒーローセクション（Contact） --- */
.contact-hero {
    width: 100%;
    /* 固定背景画像の指定 */
    background-image: url("https://storage.googleapis.com/studio-design-asset-files/projects/p6aooArmaR/s-2080x730_v-frms_webp_04ba75b9-5b37-4877-8b21-62bdb5b576fa.webp");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* パララックス効果 */
    padding: 160px 0 130px;
    height: 410px;
    box-sizing: border-box;
    /* Unify with Company */
    color: #fff;
    display: flex;
    align-items: center;
    position: relative;
}

/* テキストの可読性を高めるオーバーレイ（暗幕） */
.contact-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

/* Use fluid container for hero text content */
.contact-hero .hero-container-fluid {
    position: relative;
    z-index: 1;
    width: 100%;
    /* padding handles horizontal spacing */
}

/* =========================================
   スクロールアニメーション (Fade/Zoom)
   ========================================= */
.js-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 3.0s cubic-bezier(0.16, 1, 0.3, 1),
        transform 3.0s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-section-title-anim,
.js-content-title-anim {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

.js-section-title-anim.is-active,
.js-content-title-anim.is-active {
    opacity: 1;
    transform: translateY(0);
}

.js-content-text-anim {
    opacity: 0;
    transition: opacity 1s ease-out 0.4s;
}

.js-content-text-anim.is-active {
    opacity: 1;
}

.js-news-text-anim {
    opacity: 0;
    transition: opacity 1.2s ease-out 0.4s;
}

.js-news-text-anim.is-active {
    opacity: 1;
}

.js-news-title-anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

.js-news-title-anim.is-active {
    opacity: 1;
    transform: translateY(0);
}

.js-fade-up.is-active {
    opacity: 1;
    transform: translateY(0);
}

.js-zoom-out {
    opacity: 1;
    /* 常に表示 */
    transform: scale(var(--service-zoom-scale-start));
    transition: transform var(--service-zoom-duration) cubic-bezier(0.25, 1, 0.5, 1);
}

.js-zoom-out.is-active {
    opacity: 1;
    transform: scale(1.0);
}

.js-careers-zoom {
    opacity: 1;
    /* 常に表示 */
    transform: scale(var(--careers-zoom-scale-start));
    transition: transform var(--careers-zoom-duration) cubic-bezier(0.25, 1, 0.5, 1);
}

.js-careers-zoom.is-active {
    opacity: 1;
    transform: scale(1.0);
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-600 {
    transition-delay: 0.6s;
}

/* 必要に応じてアニメーションのレスポンシブ調整 */
@media screen and (max-width: 768px) {
    .js-fade-up {
        transform: translateY(20px);
    }
}

/* CTA Fade In Animation */
.js-fade-in-cta {
    opacity: 0;
    transition: opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-fade-in-cta.is-active {
    opacity: 1;
}

.contact-hero .page-title {
    font-family: "Montserrat", sans-serif;
    font-size: 64px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 16px;
    line-height: 1;
    color: #fff;
    text-align: left;
    /* Studioデザインに従い左寄せ */
}

/* Override existing page-title color if needed */
.contact-hero .page-subtitle {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    text-align: left;
}

/* --- メインコンテンツセクション --- */
.contact-section {
    background-color: #e9edf5;
    padding: 96px 96px;
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.contact-wrapper {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 96px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 40px 50px 30px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.contact-intro {
    text-align: center;
    margin-bottom: 48px;
}

.contact-message {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 24px;
    color: #282828;
}

.contact-note {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    color: #282828;
}

/* --- サービス情報/サポート情報ボックス --- */
.contact-service-info {
    background: #f8f7f6;
    color: #2d80fb;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 48px;
    border-radius: 4px;
}

.info-icon {
    font-size: 20px;
    color: #282828;
    margin-right: 8px;
}

.info-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #282828;
}

.info-link {
    color: #2d80fb;
    text-decoration: underline;
    font-weight: 700;
}

.info-link:hover {
    text-decoration: none;
}

/* --- フォームコンテナ --- */
.contact-form-container {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label {
    display: flex;
    align-items: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #282828;
}

.required {
    color: #f23a3c;
    margin-left: 5px;
    font-size: 15px;
}

.form-input,
.form-textarea {
    background: #f8f7f6;
    border: 1px solid #cccccc;
    border-radius: 10px;
    padding: 12px;
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-size: 15px;
    color: #333;
    width: 60%;
    /* 必要に応じてデザインに合わせて調整。レスポンシブでは100% */
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.form-input {
    height: 50px;
}

.form-textarea {
    height: 160px;
    resize: vertical;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #aaaaaa;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #cccccc;
}

/* --- プライバシーチェックボックス --- */
.form-privacy {
    margin-top: 10px;
    margin-bottom: 24px;
    text-align: center;
}

.privacy-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.privacy-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.privacy-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #282828;
}

.privacy-text a {
    color: #2d80fb;
    text-decoration: underline;
}

/* --- 送信ボタン --- */
.form-submit {
    display: flex;
    justify-content: center;
}

.submit-btn {
    background: #333333;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 16px 40px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.submit-btn:hover {
    transform: translate(5px, 5px);
    box-shadow: none;
    opacity: 0.9;
}

.submit-btn:disabled {
    opacity: 1.0;
    cursor: not-allowed;
}

.submit-btn .material-icons {
    font-size: 20px;
}


/* --- Responsive (Mobile) --- */
@media screen and (max-width: 960px) {
    .contact-hero {
        padding: 100px 0 60px;
        height: 320px;
        /* Unify with Company SP */
    }

    .contact-hero .page-title {
        font-size: 40px;
    }

    .contact-hero .page-subtitle {
        font-size: 18px;
    }

    .contact-section {
        padding: 48px 24px;
    }

    .contact-wrapper {
        padding: 48px 24px;
    }

    .contact-message {
        font-size: 16px;
    }

    .contact-note {
        font-size: 12px;
        /* Tablet: Center (Inherit), SP: Left (See below) */
    }

    /* Form Inputs Overrides */
    .form-input,
    .form-textarea {
        width: 100%;

    }

    .form-input {
        height: 50px;
    }

    .form-textarea {
        height: 160px;
    }

    .privacy-text {
        font-size: 12px;
    }

    .contact-form-container {
        /* Removed as it no longer has card styling, just resets */
        padding: 0;
    }

    .info-content {
        justify-content: center;
        text-align: center;
        font-size: 12px;
        /* Service info text size */
    }

    .info-link {
        font-size: 12px;
        /* Ensure link inherits/matches */
    }



    .submit-btn {
        width: 100%;
        font-size: 12px;
        /* Updated font size */
        justify-content: center;
    }
}

@media screen and (max-width: 540px) {
    .contact-form-container {
        padding: 24px 0px;
    }

    .contact-message {
        font-size: 16px;
    }

    .contact-note {
        font-size: 12px;
    }


}

/* =========================================
   NEWS ページ
   ========================================= */

/* --- ニュースページ・ヒーローセクション --- */
.news-hero {
    width: 100%;
    /* Use fixed background image from snippet */
    background-image: url("https://storage.googleapis.com/studio-design-asset-files/projects/p6aooArmaR/s-2080x730_v-frms_webp_04ba75b9-5b37-4877-8b21-62bdb5b576fa.webp");
    background-size: cover;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 160px 0 130px;
    height: 410px;
    box-sizing: border-box;
    /* Unify with Company PC */
    /* Studioデザインに合わせて調整 */
    color: #fff;
    display: flex;
    align-items: center;
    position: relative;
}

.news-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.news-hero .hero-container-fluid {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 48px;
    max-width: 1280px;
    margin: 0 auto;
}

.news-hero .page-title {
    font-family: "Montserrat", sans-serif;
    font-size: 64px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 24px;
    line-height: 1;
    color: #fff;
}

/* --- ニュース一覧セクション --- */
.news-section {
    background-color: #e9edf5;
    padding: 96px 0;
    width: 100%;
}

.news-container {
    max-width: 1280px;
    padding: 0 48px;
    margin: 0 auto;
}

.news-section-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 50px;
    color: #282828;
    text-align: center;
    /* 中央寄せ */
}

.news-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
    /* カラム間のネガティブマージン */
}

/* Post Card */
.news-card {
    width: 33.333%;
    padding: 0 12px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

.news-card-link {
    display: block;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: #282828;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-card-link:hover {
    transform: translate(6px, 12px);
    box-shadow: none;
    /* ホバー時は影を消す、または変化させる */
}

.news-card-image {
    width: 100%;
    height: 180px;
    /* 統一された高さ */
    overflow: hidden;
}

/* --- ニュースサムネイル画像（Block Revealアニメーション） --- */
.news-reveal-wrapper {
    width: 90%;
    height: 90%;
    margin: 5% auto;
    border-radius: 8px;
    /* 角丸設定 */
    position: relative;
    overflow: hidden;
    /* 幕や画像を枠内に収める */
    background-color: #f5f5f5;
    /* 背景色（透過ロゴ対策） */
}

/* 黒い幕（Block Reveal Effect） */
.js-reveal-black::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 2;
    transform: translateX(0);
    /* 初期状態：画像を覆い隠す */
    transition: transform 1.0s cubic-bezier(0.77, 0.165, 0.175, 0.82);
    /* 滑らかなイージング - ゆっくり */
}

.js-reveal-black.is-active::after {
    transform: translateX(101%);
    /* 右側へスライドして消える */
}

/* 画像本体 */
.news-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease, opacity 1.5s ease;
    opacity: 1;
    /* デフォルトは表示 */
    margin: 0;
}

/* Block Reveal使用時のみ初期非表示にする */
.js-reveal-black .news-thumb {
    opacity: 0;
}

/* 幕が動いた後に画像をフェードイン */
.js-reveal-black.is-active .news-thumb {
    opacity: 1;
    transition-delay: 0.5s;
    /* 幕の動きに合わせて遅延させる */
}

/* 特別調整: ラッパー背景も白くする */
.news-card-image {
    background-color: #fff;
}

.news-thumb.no-image {
    background-color: #fff;
    background-image: none;
    /* プレースホルダー除去 */
}



/* =========================================
   Map Reveal Animation (SP Only)
   ========================================= */
@media screen and (max-width: 960px) {
    .js-map-reveal {
        position: relative;
        overflow: hidden;
    }

    .js-map-reveal::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000000;
        /* Black Curtain */
        z-index: 2;
        transform: translateX(0);
        transition: transform 1.0s cubic-bezier(0.77, 0.165, 0.175, 0.82) 0.5s;
        /* Delay 0.5s */
    }

    .js-map-reveal.is-active::after {
        transform: translateX(101%);
    }

    .js-map-reveal iframe {
        opacity: 0;
        transition: opacity 1.5s ease 0.5s;
        /* Fade in with delay */
    }

    .js-map-reveal.is-active iframe {
        opacity: 1;
    }
}

.news-card-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-card-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

.news-card-date {
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: #aaaaaa;
    font-weight: 500;
    margin: 0;
}

/* ページネーション */
.news-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    color: #282828;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.3s;
}

.page-numbers.current,
.page-numbers:hover {
    background: #282828;
    color: #fff;
}

/* --- Responsive (News) --- */
/* --- Responsive (News) --- */
@media screen and (max-width: 960px) {
    .news-hero {
        padding: 100px 0 60px;
        height: 320px;
        /* Unify with Company SP */
    }

    .news-hero .page-title {
        font-size: 40px;
    }



    .news-container {
        padding: 0 24px;
    }

    .news-card {
        width: 50%;
        /* 2カラム表示 */
    }
}

@media screen and (max-width: 540px) {
    .news-card {
        width: 100%;
        /* 1カラム表示 */
    }


    .news-section-title {
        font-size: 24px;
    }
}

/* --- ニュース詳細ページ (Single) --- */
.single-news-page .news-section {
    background-color: #e9edf5;
    /* 背景色（Studioレイアウト準拠） */
    padding: 96px 0;
}

.single-news-container {
    max-width: 1280px;
    padding: 0 48px;
    margin: 0 auto;
}

.single-news-article {
    background: transparent;
    padding: 0;
    box-shadow: none;
    max-width: 100%;
}

/* ヘッダーメタ情報（日付・タイトル） - 白いカードの外側に配置 */
.single-news-header-meta {
    margin-bottom: 24px;
}

.single-news-date {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: #aaaaaa;
    font-weight: 600;
    margin: 0 0 16px;
}

.single-news-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.6;
    color: #000;
    margin: 0 0 48px;
}

/* 白いカード型コンテナ */
.single-news-card-container {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 40px 50px 30px rgba(0, 0, 0, 0.1);
    padding: 96px;
    margin-bottom: 96px;
    /* Studioに合わせてパディング等を増量 */
}

.single-news-thumbnail {
    margin-bottom: 48px;
    width: 100%;
    text-align: center;
}

.single-news-thumbnail img {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

/* 記事本文エリア */
.single-news-content {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    max-width: 740px;
    /* テキスト幅を制限 */
    margin: 0 auto;
    /* カード内で中央寄せ */
}

.single-news-content h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 48px 0 24px;
    border: none;
    padding: 0;
    color: #000;
}

.single-news-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 32px 0 24px;
}

.single-news-content p {
    margin-bottom: 24px;
}

.single-news-content blockquote {
    font-size: 14px;
    margin: 24px 0;
    padding-left: 16px;
    border-left: 4px solid #ddd;
    color: #666;
}

.single-news-content a {
    color: #0066cc;
    text-decoration: underline;
}

.single-news-content a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* フッター / 一覧へ戻るボタン */
.single-news-footer {
    display: flex;
    justify-content: center;
    padding-top: 48px;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
}

.back-to-news-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 12px 48px;
    border-radius: 10px;
    /* Studioボタンに合わせる */
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
}

.back-to-news-btn:hover {
    transform: translate(6px, 6px);
    box-shadow: none;
    opacity: 1;
}

/* パンくずリスト */
.news-breadcrumbs {
    background-color: #e9edf5;
    padding: 24px 0;
}

.breadcrumbs-container {
    max-width: 1280px;
    padding: 0 48px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #aaaaaa;
}

.breadcrumbs-container a {
    color: #aaaaaa;
    text-decoration: none;
    transition: opacity 0.3s;
}

.breadcrumbs-container a:hover {
    opacity: 0.7;
}

.breadcrumbs-container .material-icons {
    font-size: 16px;
    color: #1e5a9f;
    /* 青色矢印 */
}

.breadcrumbs-container span {
    color: #000;
    /* 現在のページ */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    /* 長いタイトルでレイアウト崩れを防ぐ */
}

/* Contact Page Only: Dark Blue Breadcrumb */
.contact-page .breadcrumbs-container span {
    color: #1e5a9f;
}

/* Responsive */
@media screen and (max-width: 840px) {
    .single-news-card-container {
        padding: 48px;
    }

    .single-news-content {
        max-width: 100%;
    }

    .single-news-title {
        font-size: 24px;
    }

    .news-breadcrumbs {
        white-space: nowrap;
        overflow-x: auto;
    }

    .single-news-container {
        padding: 0 24px;
    }
}

@media screen and (max-width: 540px) {
    .single-news-card-container {
        padding: 24px;
    }
}

/* =========================================
   SPメニュー用スタイル（上書き・追加）
   ========================================= */
.sp-nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

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

.sp-menu-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #333;
    padding: 0;
    z-index: 2001;
}

.sp-nav-list {
    margin-top: 180px;
    /* アイテムを下げるために増量 */
    padding: 0 48px;
    /* flex: 1; Removed */
}

.sp-nav-list li {
    margin-bottom: 50px;
    /* 間隔調整 */
}

.sp-nav-item {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sp-nav-item .material-icons {
    font-size: 18px;
}

.sp-nav-footer {
    background-color: #e9edf5;
    padding: 50px 48px;
    display: flex;
    gap: 24px;
    margin-top: 0px;
    /* 分離を強調 */
}

.sp-nav-footer a {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    letter-spacing: 0.12em;
}

body.no-scroll {
    overflow: hidden;
}

/* デスクトップではSPメニューを非表示 */
@media screen and (min-width: 961px) {
    .sp-nav-menu {
        display: none;
    }
}

/* Load More Button */
.news-load-more {
    text-align: center;
    margin-top: 60px;
}

#load-more-btn.load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #000 !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 48px;
    /* 横長の長方形スタイル */
    border-radius: 10px;
    /* 角を少し丸く */
    border: none;
    cursor: pointer;
    /* アニメーション：移動・影・背景色・透明度を0.3秒で変化させる */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, opacity 0.3s ease;
    font-family: "Noto Sans JP", sans-serif;
    gap: 8px;
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
    /* 濃いめの影で浮遊感を演出 */
    line-height: 1.4;
    text-decoration: none;
    -webkit-appearance: none;
    margin-top: 0;
}

#load-more-btn.load-more-btn .plus-icon {
    /* アイコン自体のアニメーションは不要（ボタン全体が動くため） */
    display: inline-block;
}

#load-more-btn.load-more-btn:hover {
    background-color: #000 !important;
    /* 黒を維持 */
    opacity: 1;
    transform: translate(6px, 12px);
    /* ニュースカード同様、右下に押し込まれる動き */
    box-shadow: none;
    /* 押された状態なので影を消す */
}

#load-more-btn.load-more-btn:hover .plus-icon {
    transform: none;
    /* アイコンスライドなし */
}

#load-more-btn.load-more-btn.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* =========================================
   Mission Animation
   ========================================= */
.js-mission-title-anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease-out 0.8s, transform 1s ease-out 0.8s;
}

.js-mission-title-anim.is-active {
    opacity: 1;
    transform: translateY(0);
}

.js-mission-text-anim {
    opacity: 0;
    transition: opacity 1s ease-out 1.8s;
    /* Start after Title finishes (0.8s + 1s) */
}

.js-mission-text-anim.is-active {
    opacity: 1;
}

/* =========================================
   SP-Specific Styles (max-width: 520px)
   ========================================= */
@media screen and (max-width: 520px) {
    .contact-note {
        text-align: left;
    }

    /* Force line break for suffix text in Service Info on SP */
    .info-content .info-text:last-child {
        width: 100%;
        text-align: center;
        margin-top: 4px;
    }

    /* Company SP Left Align */
    .mission-section,
    .company-heading-center,
    .mission-catch-center,
    .mission-text-center,
    .values-title-group,
    .values-section .company-heading,
    .values-subtitle {
        text-align: left;
    }
}

/* =========================================
   Thanks Page (Contact Form Submit Success)
   ========================================= */
.thanks-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #e5e5e5;
    /* Studio BG */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    padding-top: 120px;
    /* Offset header */
}

.thanks-modal {
    background: #ffffff;
    padding: 60px 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    /* Prevent overflow */
}

.thanks-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    color: #333;
    margin-bottom: 32px;
}

.thanks-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    /* Corrected to 14px */
    line-height: 1.6;
    font-weight: 700;
    color: #333;
    margin-bottom: 48px;
}

.thanks-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    transition: opacity 0.3s;
}

.thanks-close-btn:hover {
    opacity: 0.7;
}

.thanks-close-btn .material-icons {
    font-size: 24px;
}

/* Thanks Page Responsive */
@media screen and (max-width: 960px) {
    .thanks-modal {
        padding: 48px 32px;
    }

    .thanks-title {
        font-size: 18px;
        /* Tablet */
    }
}

@media screen and (max-width: 520px) {
    .thanks-modal {
        padding: 40px 20px;
    }

    .thanks-title {
        font-size: 16px;
        /* SP */
    }

    .thanks-text {
        font-size: 12px;
        text-align: left;
        /* SP: Left align */
    }

    .sp-only {
        display: inline;
    }
}

/* Thanks Animations */
.js-thanks-title-anim {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-thanks-title-anim.is-active {
    opacity: 1;
    transform: translateY(0);
}

.js-thanks-text-anim {
    opacity: 0;
    /* Static position (transform 0) */
    transition: opacity 1s ease-out 0.4s;
    /* 0.4s delay */
}

.js-thanks-text-anim.is-active {
    opacity: 1;
}