/*
Theme Name: Lightning Child 
Template: lightning
Version: 1.4.0
*/

/* =============================================
   1. Global & Reset
   ============================================= */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    color: #212529;
    line-height: 1.8;
    margin: 0;
    overflow-x: hidden;
    /* 基本は左揃えだが、セクションごとに明示的に指定する */
    text-align: left; 
}

/* セクション共通 */
.japtus-section {
    padding: 80px 20px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* 基本の見出し（左揃え・下線あり） 
   ※Strength, Brand, Works, Columnで使用
*/
.section-title {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 28px;
    margin: 0 0 40px 0; /* 左寄せ */
    border-bottom: 2px solid #212529;
    padding-bottom: 5px;
    display: inline-block;
    font-weight: normal;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-align: left;
}

img { max-width: 100%; height: auto; vertical-align: bottom; }
a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
a:hover { opacity: 0.7; }

/* =============================================
   2. FV (First View) - 最終修正版
   ============================================= */
#fv {
    padding: 0;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #2e3142; /* 背景：濃い紺色 */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- 動画エリア制御 --- */
.fv-video-area {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    opacity: 0.5;
}

.fv-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* 初期状態は非表示 */
}

/* PC/SP出し分け */
@media screen and (min-width: 768px) {
    .pc-only-video { display: block; }
}
@media screen and (max-width: 767px) {
    .sp-only-video { display: block; }
}

/* --- テキストコンテンツ --- */
.fv-content {
    z-index: 2;
    width: 100%;
    padding: 0 20px;
}

/* 1行目: "ゆとり" を生み出す */
.fv-catch {
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 1.8rem; /* 文字サイズ均一化 */
    letter-spacing: 0.2em;
    margin-bottom: 150px; /* 余白調整 */
    opacity: 1;
}

/* タイトルグループ */
.fv-title {
    margin: 0;
    font-weight: normal;
    line-height: 1.2;
    opacity: 1;
}

/* 2行目: 商品企画デザイン事務所 */
.fv-sub {
    display: block;
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 1.8rem; /* 文字サイズ均一化 */
    letter-spacing: 0.1em;
    margin-bottom: 120px; /* Japtusとの距離 */
    color: #fff; /* 白で統一 */
}

/* 3行目: Japtus */
.fv-main {
    display: block;
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 1.8rem; /* 文字サイズ均一化 */
    letter-spacing: 0.2em;
    color: #fff; /* 白で統一 */
}

/* --- スマホ用調整 (レスポンシブ) --- */
@media (max-width: 768px) {
    .fv-catch {
        font-size: 1.2rem; /* スマホで見やすいサイズに微調整 */
        margin-bottom: 12vh; /* 高さに合わせた可変余白に */
    }
    .fv-sub {
        font-size: 1.2rem;
        margin-bottom: 10vh;
    }
    .fv-main {
        font-size: 1.2rem;
    }
}

/* スクロール表示 */
.scrolldown {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 2;
    color: #fff;
    font-size: 0.8rem;
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    opacity: 0.8;
}

/* =============================================
   3. Concept - 【中央揃え】
   ============================================= */
#concept {
    background-color: #eee;
    color: #212529;
    padding: 80px 20px;
    text-align: center; /* 黒背景のメッセージは中央 */
}
.concept-inner { max-width: 900px; margin: 0 auto; }
.concept-head {
    font-size: 24px;
    margin-bottom: 40px;
    font-weight: normal;
    line-height: 1.6;
}
.concept-body {
    font-size: 15px;
    line-height: 2.2;
    /* 本文も中央揃えで詩的に見せる（PDFの雰囲気重視） */
    text-align: justify; 
}

/* =============================================
   4. Strength (強み) - 色コード修正版
   ============================================= */
#strength {
    background-color: #eee; /* 【修正】背景グレーを #eee に変更 */
    padding: 60px 0;
    text-align: left;
}

/* コンテンツ幅の制限 */
.strength-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* タイトル設定（下線のみ、装飾なし） */
.strength-main-title {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    font-size: 28px;
    margin: 0 0 40px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #000;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    display: block;
    font-weight: normal;
    line-height: 1.4;
}

/* 3列レイアウト (モバイルでも横並び維持) */
.strength-columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
}

.strength-col-item {
    flex: 1;
    min-width: 0; 
}

/* 赤枠の見出し (小見出し、枠内は中央揃え) */
.strength-box-header {
    font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
    border: 1px solid #c00; /* 【修正】ピンク枠を赤 #c00 に変更 */
    background-color: #eee;
    padding: 10px 5px;
    text-align: center;
    margin-bottom: 10px;
    font-size: 13px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* 画像エリア (黒い四角) */
.strength-img-area {
    background-color: #000;
    width: 100%;
    aspect-ratio: 3 / 4;
    margin-bottom: 15px;
}

.strength-desc {
    font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 12px;
    line-height: 1.7;
    text-align: justify;
    margin: 0;
    letter-spacing: 0.02em;
}

/* スマホ用微調整 */
@media (max-width: 768px) {
    #strength { padding: 40px 0; }
    
    .strength-inner { padding: 0 15px; } 
    
    .strength-columns { gap: 8px; }

    .strength-main-title {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .strength-box-header {
        font-size: 10px;
        padding: 8px 0;
    }

    .strength-desc {
        font-size: 10px;
        line-height: 1.5;
    }
}


/* =============================================
   5. Process - 【中央配置】(矢印のみ)
   ============================================= */
#process {
    background-color: #eee;
    padding: 50px 0;
    overflow: hidden;
    text-align: center; /* 矢印を真ん中に */
}
/* Processのタイトルは左寄せにするか中央にするか
   PDF準拠なら左上ですが、矢印だけの場合は中央が見栄えが良いです。
   ここでは「PDF準拠（左）」にします。 */
.process-title {
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    display: block;
    font-weight: normal;
    /* コンテナ内で左寄せにするためのハック */
    position: relative;
    left: 20px; /* 左端に配置 */
    float: left; 
    clear: both;
}
/* コンテナのクリアフィックス */
#process::after { content: ""; display: block; clear: both; }

.process-arrow-area {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    clear: both;
}
.arrow-down {
    width: 1px;
    height: 60px;
    background: #000;
    position: relative;
    animation: arrowMove 2.5s infinite;
}
.arrow-down::after {
    content: "";
    position: absolute;
    bottom: 0; left: -4px;
    width: 8px; height: 8px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}
@keyframes arrowMove {
    0% { transform: translateY(-10px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}

/* =============================================
   6. Brand (About) - PDFイメージ準拠
   ============================================= */
#brand {
    background-color: #eee; /* 背景色（薄いグレー） */
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: left;
    overflow: hidden;
}

/* 共通タイトルに矢印アイコンを追加 */
.brand-section-title {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    left: 20;
    font-size: 28px;
    margin: 0 0 40px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #000;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    display: block;
    font-weight: normal;
    line-height: 1.4;
}

/* 矢印（→）のアイコン */
.brand-section-title::before {
    content: "→";
    color: #c00;
    font-size: 1em;
    font-weight: bold;
}


/* コンテンツコンテナ */
.brand-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px; /* 左右余白 */
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
}

/* テキストエリア */
.brand-text-area {
    width: 100%;
    max-width: 500px;
    margin-bottom: -40px;
}
.brand-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

/* ボタンリンク */
.brand-link-btn {
    display: inline-block;
    padding: 0px 0px;
    background: #eee; /* ボタンの背景色 */
    color: #000; /* 文字色 */
    font-family: "Yu Gothic", "YuGothic", sans-serif;
    font-size: 13px;
    border-radius: 4px;
    transition: background 0.3s;
    text-decoration: none;
}
/* ボタンの矢印 */
.brand-link-btn::before {
    content: "→ ";
    color: #c00; 
}
.brand-link-btn:hover {
    background: #eee;
}


/* --- 画像エリアとアニメーション --- */

/* 画像ラッパー */
.brand-image-wrapper {
    position: relative;
    width: 90%; /* モバイルでの幅 */
    max-width: 600px;
    margin-left: auto; /* 右寄せ */
    margin-right: -20px; /* 右端を少しはみ出させる */
    align-self: flex-end; /* 右端に配置 */
}

/* 赤い下地（元々ある） */
.image-base-red {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #c00; /* 赤 */
    top: 0px;
    right: -50px;
    z-index: 0;
}

/* 黒い画像（アニメーション対象のコンテナ） */
.brand-image-link { 
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    
    /* アニメーションの初期設定 */
    transform: translateX(100%); /* 初期状態で画面外右に隠す */
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-out;
}
.brand-image-link.is-active {
    /* JSで付与された時の表示状態 */
    transform: translateX(0); /* 元の位置に戻る */
    opacity: 1;
}

.brand-image-link img {
    width: 100%;
    height: auto;
    display: block;
    background-color: #000;
}


/* PCレイアウト */
@media (min-width: 768px) {
    .brand-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    .brand-section-title { margin-top: 10px; } /* 微調整 */
    
    .brand-text-area { 
        padding-top: 60px; /* 画像と高さを合わせるため調整 */
        margin-bottom: 0;
    }
    .brand-image-wrapper {
        width: 50%;
        margin-right: -100px; /* PCでは大きくはみ出す */
        margin-left: 0;
        align-self: flex-start;
    }
}

/* =============================================
   7. Works (縦リスト表示) - SPでも横並び維持版
   ============================================= */
#works {
    background-color: #eee; /* PDFの薄いグレー背景 */
    padding: 80px 0; /* 左右パディングはinnerで制御 */
    text-align: left;
}

/* 強み/About Brandと左右ラインを揃えるためのコンテナ */
.works-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px; /* PC時の左右パディング */
}

/* Worksタイトル（強み/Brandと共通仕様） */
#works .section-title {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    left: 20;
    font-size: 28px;
    margin: 0 0 40px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #000;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    display: block;
    font-weight: normal;
    line-height: 1.4;
}

.works-list {
    display: flex;
    flex-direction: column;
    gap: 40px; /* 縦の隙間 */
}

/* 各実績アイテム (Flexでテキストと画像を横並び) */
.work-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上端揃え */
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd; /* PDFの薄い区切り線 */
}

/* 左側 テキストエリア */
.work-meta {
    width: 45%; /* PC時もSP時もこの比率を維持 */
    min-width: 150px;
    padding-top: 10px;
}
.work-title-main {
    font-family: "Yu Gothic", "YuGothic", sans-serif; /* ゴシック */
    font-size: 15px;
    margin: 0 0 10px 0;
    line-height: 1.5;
}
.work-cats {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.8;
    color: #444;
}

/* 右側 画像エリア */
.work-img-area {
    position: relative;
    width: 50%; /* PC時もSP時もこの比率を維持 */
    max-width: 300px;
}

/* 画像の赤下地 */
.image-base-red-works {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #c00; /* 赤色 */
    top: 15px;
    left: 15px; /* 下地をずらす */
    z-index: 0;
}

/* 黒画像枠 (リンクコンテナ) */
.work-image-link {
    display: block;
    position: relative;
    z-index: 1;
}

/* 画像オーバーレイ */
.work-image-overlay {
    width: 100%;
    height: auto;
    display: block;
    background-color: #000;
}

/* Moreリンク（PDF準拠） */
.works-more {
    text-align: left; /* 左寄せ */
    margin-top: 40px;
}
.works-more-btn {
    display: inline-block;
    padding: 8px 30px;
    background: #c00;
    color: #fff;
    font-family: "Yu Gothic", "YuGothic", sans-serif;
    font-size: 13px;
    border-radius: 4px;
    transition: background 0.3s;
    text-transform: uppercase;
    text-decoration: none;
}
.works-more-btn:hover {
    background: #a00;
}


/* --- モバイル調整 --- */
@media (max-width: 768px) {
    #works { padding: 40px 0; }
    .works-inner { padding: 0 15px; } /* SPパディング統一 */
    .works-list { gap: 30px; }
    
    /* 【修正】横並びを維持するため、flex-direction: column; を削除 */
    .work-item {
        /* 横並びを維持 (デフォルトの flex-direction: row; が有効) */
        /* widthとmin-widthの調整で、文字と画像の比率をSPでも維持 */
        align-items: flex-start;
        border-bottom: 1px solid #ddd;
    }

    .work-meta {
        /* SP時の文字サイズ調整 */
        font-size: 10px;
        min-width: 100px; /* 最小幅を確保 */
        width: 45%;
        padding-top: 5px;
    }
    .work-cats {
        text-align: left; /* 左寄せに戻す */
    }
    .work-img-area {
        width: 50%;
    }
    .image-base-red-works {
        top: 8px;
        left: 8px;
    }
    .works-more {
        text-align: left; /* リンクを左寄せに戻す */
    }
    /* タイトルSP調整 */
    #works .section-title {
        font-size: 20px;
        margin-bottom: 30px;
        display: block;
    }
}

/* =============================================
   8. Column - 【左揃え】
   ============================================= */
#column {
    background-color: #eee;
    text-align: left; /* 左揃え */
}

#column .section-title {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    left: 20;
    font-size: 28px;
    margin: 0 0 40px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #000;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    display: block;
    font-weight: normal;
    line-height: 1.4;
}

.column-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 0 20px 30px;
    -webkit-overflow-scrolling: touch;
}
.column-carousel::-webkit-scrollbar { display: none; }

.column-item {
    min-width: 80vw;
    scroll-snap-align: start; /* 左にスナップ */
    background: #eee;
    border: 1px solid #eee;
}
.column-item a {
    display: block;
    padding: 15px;
    height: 100%;
    color: inherit;
}

.column-thumb {
    width: 100%;
    height: 180px;
    background-color: #ccc;
    margin-bottom: 15px;
}
.column-thumb img { width: 100%; height: 100%; object-fit: cover; }

.column-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
    display: block;
    text-align: left; /* 左揃え */
}
.column-title {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    font-family: "Yu Mincho", "YuMincho", serif;
    text-align: left; /* 左揃え */
    font-weight: normal;
}

@media (min-width: 768px) {
    .column-item { min-width: 300px; }
    #column .section-title { margin-left: auto; margin-right: auto; max-width: 1000px; display: block; margin-left: 0; }
    .column-carousel { max-width: 1000px; margin: 0 auto; padding: 0 0 30px; }
}

/* スマホでの微調整 */
@media (max-width: 768px) {
    .japtus-section { padding: 50px 0; }
    .concept-inner, .strength-columns{ padding: 0 0px; }
    
    .strength-columns { gap: 10px; }
    .strength-desc { font-size: 11px; }
    .strength-box-header { font-size: 11px; padding: 8px 2px; }
     
    .strength-main-title, .section-title, .brand-section-title,{ font-size: 28px; margin-bottom: 25px; display: block; width: 100%; }
}
.site-body {
 background-color: #eee !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
	color: #000;
}

/* 親要素の制限を無視して全画面表示にする */
.full-screen-section {
    width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
}

/* ビデオエリアを確実に全画面にフィットさせる */
.fv-video-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fv-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 隙間なく埋める */
}



@media (min-width: 992px) {
    .main-section--col--two {
        width: -webkit-fill-available !important; /* 横幅を親要素いっぱいにする */
        float: none !important;                  /* 左寄せを解除して中央配置の準備 */
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1600px !important;            /* PDF案のPC最大幅を維持 */
    }
}

/* 親コンテナの余白もリセット */
.site-body-container.container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}