/*
Theme Name: CLOUT
Theme URI:
Author: Gibble
Author URI:
Description: 株式会社CLOUT コーポレートサイト用のオリジナルテーマ。Figmaデザイン案（2026/07）をベースに制作。黒基調＋ゴールドの差し色。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clout
*/

/* =========================================================
   株式会社CLOUT コーポレートサイト 共通スタイル
   Figmaデザイン案（2026/07/14作成）をHTML/CSS化したもの
   スタイリッシュ／黒基調＋ゴールドの差し色
   ========================================================= */

/* ---- デザイントークン（色・サイズをまとめて管理） ---- */
:root {
    --bg-dark: #0a0a0b;      /* ダーク背景 */
    --bg-dark2: #141417;     /* ボタンなどの濃いグレー */
    --bg-white: #f7f7f7;     /* 白セクション */
    --bg-gray: #e5e5e8;      /* グレー帯 */
    --gold: #c9a657;         /* ゴールドの差し色 */
    --ink: #141417;          /* 見出しの黒文字 */
    --text-gray: #4d4d52;    /* 本文グレー */
    --placeholder: #212429;  /* 画像プレースホルダ（濃） */
    --placeholder2: #24262b; /* 画像プレースホルダ */
    --content-width: 1140px; /* コンテンツの最大幅 */
}

/* ---- リセット的な指定 ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 英字はInter、日本語は游ゴシックなどを使う */
    font-family: "Inter", "Helvetica Neue", "Hiragino Kaku Gothic ProN",
        "Yu Gothic", "Meiryo", sans-serif;
    color: var(--ink);
    background-color: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

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

/* 中央寄せ用のコンテナ */
.container {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================================
   ヘッダー（全ページ共通）
   ========================================================= */
.site-header {
    background-color: var(--bg-dark);
    color: #ffffff;
}

.site-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    max-width: 1312px;
    margin: 0 auto;
    padding: 0 64px;
}

.logo {
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 0.02em;
}

.global-nav ul {
    display: flex;
    gap: 36px;
    list-style: none;
}

.global-nav a {
    font-size: 13px;
    font-weight: 500;
}

.global-nav a:hover {
    color: var(--gold);
}

/* CONTACTボタン（枠線タイプ） */
.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 40px;
    border: 1px solid #ffffff;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    transition: background-color 0.2s, color 0.2s;
}

.btn-contact:hover {
    background-color: #ffffff;
    color: var(--bg-dark);
}

/* =========================================================
   汎用パーツ
   ========================================================= */

/* セクションの小見出し（BUSINESS など） */
.eyebrow {
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* テキストリンク（矢印つき） */
.text-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.text-link:hover {
    opacity: 0.7;
}

/* 画像プレースホルダの中の注記テキスト */
.img-note {
    color: #808287;
    font-size: 13px;
}

/* 塗りボタン（黒） */
.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background-color: var(--bg-dark2);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 0 40px;
    height: 54px;
    transition: opacity 0.2s;
}

.btn-solid:hover {
    opacity: 0.85;
}

/* 塗りボタン（ゴールド） */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background-color: var(--gold);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    padding: 0 40px;
    height: 56px;
    transition: opacity 0.2s;
}

.btn-gold:hover {
    opacity: 0.85;
}

/* =========================================================
   フッター（全ページ共通のベース）
   ========================================================= */
.site-footer {
    background-color: var(--bg-dark);
    color: #ffffff;
    padding: 60px 0 40px;
}

.footer-logo {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
}

.footer-company {
    color: #99999e;
    font-size: 12px;
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;
    color: #d9d9db;
    font-size: 12px;
    font-weight: 500;
}

.footer-sns {
    color: #d9d9db;
    font-size: 14px;
    letter-spacing: 0.1em;
}

.footer-copyright {
    text-align: center;
    color: #808085;
    font-size: 11px;
    margin-top: 40px;
}

/* トップページのフッター（横並びレイアウト） */
.footer-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* =========================================================
   TOPページ
   ========================================================= */

/* ヒーロー */
.hero {
    position: relative;
    background-color: var(--placeholder);
    min-height: 700px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}

.hero-inner {
    max-width: 1312px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 90px;
    position: relative;
}

.hero-headline {
    color: #ffffff;
    font-size: 72px;
    font-weight: 800;
    line-height: 1.21;
    letter-spacing: -0.01em;
}

.hero-tagline {
    color: var(--gold);
    font-size: 26px;
    font-weight: 500;
    margin-top: 30px;
}

.hero-subcopy {
    color: #d9d9db;
    font-size: 15px;
    margin-top: 20px;
}

.hero-note {
    position: absolute;
    top: 330px;
    right: 90px;
    color: #73757a;
    font-size: 14px;
}

/* 実績・数値セクション */
.stats {
    background-color: var(--bg-white);
    padding: 80px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-label {
    color: #333333;
    font-size: 13px;
    font-weight: 600;
}

.stat-num {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.1;
    margin-top: 6px;
}

.stat-num.big {
    font-size: 54px;
}

.stat-num.mid {
    font-size: 42px;
}

.stat-unit {
    color: #595959;
    font-size: 13px;
    font-weight: 500;
    margin-left: 6px;
}

.stats-cta {
    text-align: center;
    margin-top: 50px;
}

/* BUSINESSセクション（白） */
.business {
    background-color: var(--bg-white);
    padding: 40px 0 100px;
}

.business-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 60px;
    align-items: start;
}

.business-heading {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    margin: 14px 0 24px;
}

.business-lead {
    color: var(--text-gray);
    font-size: 14px;
    margin-bottom: 40px;
}

.biz-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.biz-card-img {
    background-color: #1f2126;
    aspect-ratio: 250 / 141;
    padding: 16px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
}

.biz-card-title {
    font-size: 17px;
    font-weight: 700;
    margin-top: 14px;
}

.biz-card-sub {
    color: #66666b;
    font-size: 11px;
    margin-top: 6px;
}

/* CULTUREセクション（ダーク） */
.culture {
    background-color: var(--bg-dark);
    color: #ffffff;
    padding: 90px 0;
}

.culture-layout {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 110px;
    align-items: center;
}

.culture-images {
    display: grid;
    grid-template-columns: repeat(2, 240px);
    gap: 20px;
}

.culture-images span {
    display: block;
    aspect-ratio: 240 / 135;
}

.culture-heading {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    margin: 14px 0 24px;
}

.culture-lead {
    color: #c7c7cc;
    font-size: 14px;
    margin-bottom: 40px;
}

/* 採用CTA（グレー） */
.recruit-cta {
    background-color: var(--bg-gray);
    padding: 80px 0;
}

.recruit-cta-layout {
    display: grid;
    grid-template-columns: 300px 1fr 390px;
    gap: 60px;
    align-items: center;
}

.recruit-cta-headline {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.21;
}

.recruit-cta-sub {
    color: #333338;
    font-size: 14px;
    margin-bottom: 30px;
}

.recruit-cta-img {
    background-color: #8c8f94;
    aspect-ratio: 390 / 219;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e6e6e6;
    font-size: 12px;
}

/* =========================================================
   下層ページ共通（BUSINESS・RECRUIT）
   ========================================================= */

/* 黒帯のページヘッダー（大きなタイトル） */
.page-hero {
    background-color: var(--bg-dark);
    color: #ffffff;
    padding: 210px 0 130px;
}

.page-hero.tall {
    padding-top: 230px;
    padding-bottom: 260px;
}

.page-title {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.page-subtitle {
    color: var(--gold);
    font-size: 18px;
    font-weight: 500;
    margin-top: 8px;
}

/* RECRUITヒーロー（画像背景つき） */
.recruit-hero {
    position: relative;
    background-color: var(--placeholder);
    color: #ffffff;
}

.recruit-hero .container {
    padding-top: 230px;
    padding-bottom: 174px;
    position: relative;
}

.recruit-hero .page-title {
    font-size: 80px;
}

.recruit-hero-tagline {
    color: var(--gold);
    font-size: 28px;
    font-weight: 500;
    margin-top: 20px;
}

.recruit-hero-sub {
    color: #d9d9db;
    font-size: 15px;
    margin-top: 24px;
}

.recruit-hero-note {
    position: absolute;
    top: 300px;
    right: 20px;
    color: #73757a;
    font-size: 14px;
}

/* =========================================================
   BUSINESSページ（3事業・交互レイアウト）
   ========================================================= */
.biz-intro {
    padding: 80px 0 40px;
}

.biz-intro-head {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
}

.biz-intro-lead {
    color: var(--text-gray);
    font-size: 15px;
    max-width: 800px;
}

/* 交互に画像とテキストを並べるブロック */
.biz-block {
    display: grid;
    grid-template-columns: 540px 1fr;
    gap: 56px;
    align-items: center;
    padding: 60px 0;
}

/* 偶数番目は画像を右に */
.biz-block.reverse .biz-block-img {
    order: 2;
}

.biz-block-img {
    background-color: var(--placeholder2);
    aspect-ratio: 540 / 304;
    display: flex;
    align-items: center;
    justify-content: center;
}

.biz-block-num {
    color: var(--gold);
    font-size: 40px;
    font-weight: 800;
}

.biz-block-title {
    font-size: 26px;
    font-weight: 800;
    margin: 6px 0 16px;
}

.biz-block-desc {
    color: var(--text-gray);
    font-size: 14px;
}

/* 下部の黒いCTA帯 */
.biz-cta {
    background-color: var(--bg-dark);
    color: #ffffff;
    padding: 70px 0;
}

.biz-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.biz-cta-head {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 12px;
}

.biz-cta-sub {
    color: #bfbfc4;
    font-size: 14px;
}

/* 下層ページのフッター（黒帯内・シンプル） */
.footer-simple {
    background-color: var(--bg-dark);
    color: #ffffff;
    padding: 60px 0 40px;
}

/* =========================================================
   BUSINESSページ（1事業版）
   ========================================================= */
.biz-single {
    padding: 90px 0;
}

.biz-single-head {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 60px;
}

.biz-single-layout {
    display: grid;
    grid-template-columns: 620px 1fr;
    gap: 56px;
    align-items: start;
}

.biz-single-img {
    background-color: var(--placeholder2);
    aspect-ratio: 620 / 349;
    display: flex;
    align-items: center;
    justify-content: center;
}

.biz-single-title {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 20px;
}

.biz-single-desc {
    color: var(--text-gray);
    font-size: 15px;
    white-space: pre-line;
    margin-bottom: 40px;
}

/* =========================================================
   BUSINESSページ（複数事業版・カードグリッド）
   ========================================================= */
.biz-multi {
    padding: 80px 0 100px;
}

.biz-multi-head {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 40px;
}

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

.biz-multi-img {
    background-color: var(--placeholder2);
    aspect-ratio: 404 / 227;
    padding: 24px;
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 16px;
}

.biz-multi-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.biz-multi-desc {
    color: #59595e;
    font-size: 13px;
}

/* =========================================================
   RECRUITページ
   ========================================================= */

/* 求める人物像 */
.recruit-want {
    background-color: #ffffff;
    padding: 60px 0;
}

.recruit-want-head {
    font-size: 30px;
    font-weight: 800;
    margin: 10px 0 40px;
}

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

.want-num {
    color: #d9d9de;
    font-size: 32px;
    font-weight: 800;
}

.want-title {
    font-size: 19px;
    font-weight: 700;
    margin: 8px 0 10px;
}

.want-desc {
    color: #59595e;
    font-size: 14px;
}

/* 募集要項 */
.recruit-positions {
    background-color: #f2f2f5;
    padding: 60px 0;
}

.positions-head-row {
    display: flex;
    align-items: baseline;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.positions-heading {
    font-size: 30px;
    font-weight: 800;
}

.positions-note {
    color: #66666b;
    font-size: 13px;
}

/* 求人カード（行型） */
.job-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 30px 40px;
    margin-bottom: 20px;
}

.job-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.job-meta {
    color: #59595e;
    font-size: 14px;
}

.job-link {
    color: var(--gold);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.job-link:hover {
    opacity: 0.7;
}

.job-more {
    color: #737378;
    font-size: 13px;
    margin-top: 20px;
}

/* エントリーCTA */
.recruit-entry {
    background-color: var(--bg-dark);
    color: #ffffff;
    padding: 70px 0;
}

.recruit-entry-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.recruit-entry-head {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 12px;
}

.recruit-entry-sub {
    color: #bfbfc4;
    font-size: 14px;
}

/* =========================================================
   レスポンシブ（画面が狭いとき）
   ========================================================= */
@media (max-width: 900px) {
    .site-header .header-inner {
        padding: 0 20px;
        height: 70px;
    }
    .global-nav {
        display: none; /* 狭い画面ではナビを省略（簡易対応） */
    }
    .hero-inner {
        padding: 40px 20px;
    }
    .hero-headline {
        font-size: 44px;
    }
    .hero-note,
    .recruit-hero-note {
        display: none;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .business-layout,
    .culture-layout,
    .recruit-cta-layout,
    .biz-block,
    .biz-single-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .biz-block.reverse .biz-block-img {
        order: 0;
    }
    .biz-cards,
    .biz-multi-grid,
    .want-grid {
        grid-template-columns: 1fr;
    }
    .culture-images {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-title {
        font-size: 44px;
    }
    .recruit-hero .page-title {
        font-size: 52px;
    }
    .job-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }
    .footer-top-row {
        flex-direction: column;
    }
}

/* =========================================================
   お問い合わせフォーム（Contact Form 7）
   ※ CONTACT固定ページに貼ったショートコードの見た目を整えます
   ========================================================= */

/* フォーム全体を中央寄せ・最大幅を指定 */
.wpcf7 {
    max-width: 640px;
    margin: 0 auto;
}

/* 各入力項目のラベル（1項目 = 1ブロック） */
.wpcf7-form label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 24px;
}

/* テキスト入力・メール・電話・テキストエリアの共通見た目 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 14px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background-color: #ffffff;
    border: 1px solid #d5d5da;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

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

/* 入力中の枠線をゴールドに */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--gold);
}

/* 送信ボタン（サイト共通のゴールドボタンに合わせる） */
.wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 56px;
    margin-top: 10px;
    padding: 0 40px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: var(--ink);
    background-color: var(--gold);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.wpcf7-form input[type="submit"]:hover {
    opacity: 0.85;
}

/* 送信ボタンを中央に置くためのラッパ（本文側で <p> に入るため） */
.wpcf7-form p:last-child {
    text-align: center;
    margin-top: 16px;
}

/* 必須マークや確認メッセージの色調整 */
.wpcf7-not-valid-tip {
    color: #c0392b;
    font-size: 13px;
    font-weight: 500;
}

.wpcf7-response-output {
    margin: 24px 0 0 !important;
    padding: 14px 16px !important;
    font-size: 14px;
    border-radius: 4px;
}

/* =========================================================
   ABOUTページ 会社概要テーブル
   ========================================================= */
.company-section {
    background-color: #f2f2f5;
    padding: 80px 0;
}

.company-table {
    width: 100%;
    max-width: 900px;
    margin: 40px auto 0;
    border-collapse: collapse;
}

.company-table th,
.company-table td {
    text-align: left;
    padding: 22px 8px;
    border-bottom: 1px solid #dcdce0;
    font-size: 15px;
    vertical-align: top;
}

.company-table th {
    width: 220px;
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}

.company-table td {
    color: var(--text-gray);
}

/* =========================================================
   MEMBERページ 社員カード
   ========================================================= */
.member-section {
    background-color: #ffffff;
    padding: 80px 0;
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.member-card {
    background-color: #ffffff;
}

.member-card-photo {
    aspect-ratio: 3 / 4;
    background-color: var(--placeholder2);
    background-size: cover;
    background-position: center;
    border-radius: 6px;
}

.member-card-role {
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-top: 20px;
}

.member-card-name {
    font-size: 22px;
    font-weight: 800;
    margin-top: 6px;
}

.member-card-comment {
    color: var(--text-gray);
    font-size: 14px;
    margin-top: 12px;
}

/* =========================================================
   CULTUREページ 価値観カード（ダーク背景）
   ========================================================= */
.values-section {
    background-color: var(--bg-dark);
    color: #ffffff;
    padding: 90px 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.value-num {
    color: var(--gold);
    font-size: 40px;
    font-weight: 800;
}

.value-title {
    font-size: 22px;
    font-weight: 800;
    margin: 10px 0 12px;
}

.value-desc {
    color: #c7c7cc;
    font-size: 14px;
}

/* 下層ページ共通：白背景の導入セクション */
.lead-section {
    background-color: #ffffff;
    padding: 80px 0 40px;
}

/* 狭い画面での折り返し */
@media (max-width: 900px) {
    .member-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }
    .company-table th {
        width: 120px;
    }
}