/* ========================================
   カラー変数とフォントの定義
   ======================================== */
:root {
    /* サイト全体で使う色を定義 */
    --color-primary: #2C3E50;    /* メインカラー：濃い藍色 */
    --color-accent: #C7B299;     /* アクセントカラー：アースカラー */
    --color-bg: #F9F8F4;         /* 背景色：オフホワイト */
    --color-bg-alt: #ECEAE4;     /* 代替背景色：濃いベージュ */
    --color-text: #333333;       /* テキスト色：ダークグレー */
    --color-white: #FFFFFF;      /* 白色 */

    /* フォントファミリーの定義 */
    --font-heading: 'Zen Old Mincho', serif;  /* 見出し用：明朝体 */
    --font-body: 'Noto Sans JP', sans-serif;  /* 本文用：ゴシック体 */
}


/* ========================================
   リセットと基本設定
   ======================================== */

/* すべての要素にボーダーボックスを適用 */
* {
    box-sizing: border-box;  /* paddingとborderを幅に含める */
    margin: 0;               /* デフォルトのマージンをリセット */
    padding: 0;              /* デフォルトのパディングをリセット */
}

/* スムーズスクロールを有効化 */
html {
    scroll-behavior: smooth;  /* アンカーリンクをスムーズに */
}

/* body（ページ全体）の基本スタイル */
body {
    font-family: var(--font-body);        /* ゴシック体を基本に */
    background-color: var(--color-bg);    /* 背景色 */
    color: var(--color-text);             /* テキスト色 */
    line-height: 1.8;                     /* 行間を広めに */
    letter-spacing: 0.05em;               /* 文字間隔 */
}


/* ========================================
   共通クラス
   ======================================== */

/* コンテナ（コンテンツの最大幅を制限） */
.container {
    max-width: 900px;      /* 最大幅 */
    margin: 0 auto;        /* 左右中央揃え */
    padding: 0 20px;       /* 左右に余白 */
}

/* 見出しタグの基本スタイル */
h1, h2, h3, h4 {
    font-family: var(--font-heading);  /* 明朝体 */
    font-weight: 600;                  /* 太さ */
}

/* リンクの基本スタイル */
a {
    text-decoration: none;  /* 下線を消す */
    color: inherit;         /* 親要素の色を継承 */
    transition: opacity 0.3s;  /* ホバー時の透明度変化をなめらかに */
}

/* リンクにマウスを重ねた時 */
a:hover {
    opacity: 0.7;  /* 少し透明に */
}

/* ユーティリティクラス */
.text-center { text-align: center; }  /* 中央揃え */
.mt-4 { margin-top: 1.5rem; }         /* 上マージン */


/* ========================================
   ボタン
   ======================================== */

/* ボタンの基本スタイル */
.btn {
    display: inline-block;  /* インライン要素だが幅・高さを指定可能に */
    padding: 14px 28px;     /* 内側の余白 */
    border-radius: 50px;    /* 角を丸く（ピル型） */
    text-align: center;     /* テキストを中央揃え */
    font-weight: 500;       /* 文字を少し太く */
    cursor: pointer;        /* マウスカーソルをポインターに */
    font-size: 0.95rem;     /* 文字サイズ */
    min-width: 220px;       /* 最小幅 */
    margin: 10px 5px;       /* 外側の余白 */
}

/* プライマリボタン（濃い藍色） */
.btn-primary {
    background-color: var(--color-primary);  /* 背景色 */
    color: var(--color-white);               /* 文字色 */
    border: 1px solid var(--color-primary);  /* 境界線 */
}

/* セカンダリボタン（アースカラー） */
.btn-secondary {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
}

/* 白枠ボタン（背景透明） */
.btn-outline-white {
    background-color: transparent;  /* 背景を透明に */
    color: var(--color-white);
    border: 1px solid var(--color-white);
}


/* ========================================
   ヘッダー
   ======================================== */

/* ヘッダー全体 */
.header {
    background-color: rgba(255, 255, 255, 0.98);  /* ほぼ白（少し透明） */
    position: sticky;      /* スクロールしても画面上部に固定 */
    top: 0;                /* 上端に配置 */
    z-index: 100;          /* 他の要素より前面に */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);  /* やわらかい影 */
    padding: 15px 0;       /* 上下の余白 */
}

/* ヘッダー内のコンテナ */
.header-container {
    display: flex;              /* フレックスボックスで横並び */
    justify-content: space-between;  /* 両端に配置 */
    align-items: center;        /* 縦方向中央揃え */
    max-width: 1000px;          /* 最大幅 */
    margin: 0 auto;             /* 中央揃え */
    padding: 0 20px;            /* 左右の余白 */
}

/* ロゴ */
.logo {
    font-size: 1.5rem;
    color: var(--color-primary);
}

/* ナビゲーションメニュー */
.nav ul {
    display: flex;      /* 横並び */
    list-style: none;   /* 箇条書きの点を消す */
    gap: 20px;          /* 項目間の間隔 */
}

.nav a {
    font-size: 0.85rem;
    color: var(--color-primary);
}

/* ナビゲーションのCTAボタン */
.nav-cta {
    border: 1px solid var(--color-primary);  /* 枠線 */
    padding: 5px 15px;                       /* 内側の余白 */
    border-radius: 20px;                     /* 角を丸く */
}


/* ========================================
   ヒーローセクション（トップの大きな画像部分）
   ======================================== */

/* ヒーロー全体 */
.hero {
    background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;      /* 画像を画面いっぱいに */
    background-position: center; /* 画像を中央に配置 */
    color: var(--color-white);   /* 文字色を白に */
    position: relative;          /* 子要素の基準点に */
}

/* ヒーローの暗いオーバーレイ（画像の上に重ねる半透明の層） */
.hero-overlay {
    background-color: rgba(44, 62, 80, 0.5);  /* 濃い藍色を半透明で */
    padding: 140px 20px 120px;                /* 上下左右の余白 */
}

/* ヒーローのコンテンツ */
.hero-content {
    text-align: center;  /* すべて中央揃え */
}

/* ヒーローのタイトル（cosmoswing） */
.hero-title {
    font-family: var(--font-heading);  /* 明朝体 */
    font-size: 2.4rem;
    letter-spacing: 0.2em;             /* 文字間隔を広く */
    margin-bottom: 20px;
    color: var(--color-accent);        /* アースカラー */
}

/* ヒーローのキャッチコピー */
.hero-catch {
    font-size: 2.2rem;
    margin-bottom: 30px;
    line-height: 1.5;  /* 行間 */
}

/* ヒーローの説明文 */
.hero-desc {
    font-size: 1rem;
    margin-bottom: 40px;
    max-width: 650px;              /* 最大幅を制限 */
    margin-left: auto;             /* 左右中央揃え */
    margin-right: auto;
}

/* ヒーローのボタングループ */
.hero-buttons {
    display: flex;           /* フレックスボックス */
    flex-wrap: wrap;         /* 幅が足りなければ折り返す */
    justify-content: center; /* 中央揃え */
    gap: 10px;               /* ボタン間の間隔 */
}


/* ========================================
   セクション共通
   ======================================== */

/* すべてのセクションの基本スタイル */
.section {
    padding: 100px 0;  /* 上下に余白 */
}

/* 薄い背景色のセクション */
.bg-light {
    background-color: var(--color-bg-alt);  /* 濃いベージュ */
}

/* セクションタイトル */
.section-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 60px;           /* 下に余白 */
    color: var(--color-primary);   /* 濃い藍色 */
    letter-spacing: 0.1em;         /* 文字間隔 */
}


/* ========================================
   おすすめリスト
   ======================================== */

.check-list {
    list-style: none;   /* 箇条書きの点を消す */
    max-width: 700px;   /* 最大幅 */
    margin: 0 auto;     /* 中央揃え */
}

.check-list li {
    margin-bottom: 15px;    /* 項目間の間隔 */
    padding-left: 30px;     /* 左に余白（チェックマーク用） */
    position: relative;     /* 疑似要素の基準点に */
}

/* チェックマーク */
.check-list li::before {
    content: "✓";              /* チェックマーク記号 */
    position: absolute;        /* 絶対配置 */
    left: 0;                   /* 左端に配置 */
    color: var(--color-accent); /* アースカラー */
    font-weight: bold;
}


/* ========================================
   cosmoswing とは セクション
   ======================================== */

.about-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* ハイライトボックス */
.box-highlight {
    background-color: var(--color-white);  /* 白背景 */
    padding: 40px;                         /* 内側の余白 */
    margin: 40px 0;                        /* 上下の余白 */
    border-radius: 8px;                    /* 角を丸く */
    text-align: left;                      /* 左揃え */
}

.box-highlight p {
    margin-bottom: 10px;
    padding-left: 1rem;                        /* 左に余白 */
    border-left: 3px solid var(--color-accent); /* 左に線 */
}


/* ========================================
   サービス セクション
   ======================================== */

/* サービスカードのグリッドレイアウト */
.services-grid {
    display: grid;                                      /* グリッドレイアウト */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));  /* 自動で列数調整 */
    gap: 30px;                                          /* カード間の間隔 */
}

/* サービスカード */
.service-card {
    background-color: var(--color-white);
    padding: 35px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);  /* やわらかい影 */
}

/* サービスカードのタイトル */
.service-card h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-bg-alt);  /* 下線 */
    padding-bottom: 10px;
    line-height: 1.4;
}

/* サービスの紹介文 */
.service-intro {
    font-weight: 500;  /* 少し太く */
    margin-bottom: 15px;
}

/* サービスカード内のリスト */
.service-card ul {
    padding-left: 20px;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* 注意書きとアラート */
.service-card .note, 
.service-card .alert {
    font-size: 0.85rem;
    color: #666;                      /* グレー */
    background-color: #f5f5f5;        /* 薄いグレー背景 */
    padding: 12px;
    border-radius: 5px;
    margin-top: 15px;
    display: block;
}


/* ========================================
   スタンス セクション
   ======================================== */

.stance-box {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.stance-intro {
    margin-bottom: 30px;
}

/* スタンスリストのラッパー（左揃えにするため） */
.stance-list-wrapper {
    display: inline-block;  /* 内容の幅だけ */
    text-align: left;       /* 左揃え */
    margin-bottom: 40px;
}

.stance-list {
    list-style: none;
}

.stance-list li {
    margin-bottom: 12px;
    padding-left: 1.5em;    /* 左に余白 */
    position: relative;
}

/* 中黒（・）マーク */
.stance-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
}

.stance-footer {
    line-height: 2;     /* 行間を広く */
    font-weight: 600;   /* 太字 */
}


/* ========================================
   プロフィール セクション
   ======================================== */

/* プロフィール全体のラッパー（画像とテキストを横並びに） */
.profile-wrapper {
    display: flex;           /* フレックスボックスで横並び */
    gap: 50px;               /* 画像とテキストの間隔 */
    align-items: flex-start; /* 上揃え */
}

/* プロフィール画像部分 */
.profile-image {
    flex: 0 0 320px;  /* 幅320pxで固定（縮まない・伸びない） */
}

.profile-image img {
    width: 100%;                            /* 親要素の幅いっぱいに */
    border-radius: 8px;                     /* 角を丸く */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);  /* やわらかい影 */
}

/* プロフィールテキスト部分 */
.profile-text {
    flex: 1;  /* 残りのスペースを使う */
}

/* プロフィール見出し（名前と肩書き部分） - 中央揃え */
.profile-header {
    text-align: center;
    margin-bottom: 2rem;  /* 下に余白 */
}

.profile-header h4 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);  /* 濃い藍色 */
}

.profile-lead {
    font-weight: 500;              /* 少し太め */
    color: var(--color-primary);
}

/* プロフィールリスト（箇条書き部分） */
.profile-list {
    margin-bottom: 2rem;
    padding-left: 20px;
    font-size: 0.9rem;
}

/* プロフィール下のメッセージボックス（修正版：小さく、グレーに） */
.profile-message-box {
    background-color: var(--color-bg-alt);  /* セッション・プログラムの流れと同じグレー */
    padding: 20px;              /* 内側の余白を小さく（30px→20px） */
    border-radius: 5px;         /* 角を少し丸く */
    margin-top: 20px;
}

/* メッセージテキスト（修正版：サイズを小さく） */
.profile-message {
    font-family: var(--font-heading);  /* 明朝体フォント */
    font-size: 0.95rem;                /* サイズを小さく（1.15rem→0.95rem） */
    line-height: 1.8;                  /* 行間（2→1.8） */
    color: var(--color-text);
    text-align: center;                /* 中央揃え */
}


/* ========================================
   セッション・プログラムの流れ セクション
   ======================================== */

/* 流れ全体のコンテナ */
.flow-steps { 
    max-width: 800px;  /* 最大幅を制限 */
    margin: 0 auto;    /* 中央揃え */
}

/* 各ステップのカード（修正版：白背景に） */
.step { 
    background: #FFFFFF;   /* 白背景に変更（#F5F3EF→#FFFFFF） */
    padding: 40px;         /* 内側の余白 */
    margin-bottom: 20px;   /* カード同士の間隔 */
    border-radius: 8px;    /* 角を丸く */
}

/* ステップ番号（01, 02, 03...）（修正版：明朝体に） */
.step-num {
    display: block;                    /* ブロック要素として表示 */
    font-family: var(--font-heading);  /* 明朝体フォント */
    font-size: 1.4rem;                 /* 大きめ */
    color: var(--color-accent);        /* アースカラー */
    font-weight: 400;
    margin-bottom: 10px;
    opacity: 0.8;                      /* 少し透明に */
}

/* ステップのタイトル部分（修正版：明朝体に） */
.step-title {
    font-family: var(--font-heading);  /* 明朝体に変更（var(--font-body)→var(--font-heading)） */
    font-size: 1.2rem;                /* 明朝体なので少し大きめに（1.1rem→1.15rem） */
    margin-bottom: 15px;
    color: var(--color-primary);
    font-weight: 600;                  /* 明朝体なので太さを追加 */
}


/* ========================================
   FAQ（よくある質問） セクション
   ======================================== */

.faq-list { 
    max-width: 800px; 
    margin: 0 auto; 
}

/* 質問部分 */
.faq-list dt { 
    background-color: var(--color-white); 
    padding: 15px 20px; 
    margin-top: 10px; 
    border-radius: 8px 8px 0 0;  /* 上の角だけ丸く */
    font-weight: 600; 
    color: var(--color-primary); 
}

/* 回答部分 */
.faq-list dd { 
    background-color: var(--color-white); 
    padding: 0 20px 20px 20px; 
    border-radius: 0 0 8px 8px;  /* 下の角だけ丸く */
}


/* ========================================
   会社情報 セクション
   ======================================== */

.company-card {
    background-color: var(--color-white);
    padding: 40px;
    border-radius: 10px;
    max-width: 800px;
    margin: 0 auto;
}

.company-table {
    width: 100%;
    border-collapse: collapse;  /* セルの境界線を重ねる */
}

/* 表の見出しセル */
.company-table th {
    width: 25%;                              /* 幅を25%に */
    text-align: left;                        /* 左揃え */
    padding: 15px 10px;
    border-bottom: 1px solid var(--color-bg); /* 下線 */
    color: var(--color-primary);
    font-family: var(--font-heading);        /* 明朝体 */
    vertical-align: top;                     /* 上揃え */
}

/* 表のデータセル */
.company-table td {
    padding: 15px 10px;
    border-bottom: 1px solid var(--color-bg);
    font-size: 0.95rem;
}


/* ========================================
   お問い合わせフォーム
   ======================================== */

.contact-form { 
    max-width: 650px; 
    margin: 40px auto; 
    background-color: var(--color-white); 
    padding: 40px; 
    border-radius: 10px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); 
}

/* フォームの各項目グループ */
.form-group { 
    margin-bottom: 20px; 
}

/* フォームのラベル */
.form-group label { 
    display: block;      /* ブロック要素に */
    margin-bottom: 8px; 
    font-size: 0.9rem; 
}

/* フォームの入力欄 */
.form-group input, 
.form-group select, 
.form-group textarea { 
    width: 100%;                /* 幅いっぱい */
    padding: 12px;              /* 内側の余白 */
    border: 1px solid #ddd;     /* 薄いグレーの枠線 */
    border-radius: 5px;         /* 角を丸く */
    font-family: inherit;       /* 親要素のフォントを継承 */
}

/* 送信ボタン */
.btn-submit { 
    background-color: var(--color-primary); 
    color: var(--color-white); 
    border: none;           /* 枠線なし */
    width: 100%;            /* 幅いっぱい */
    margin-top: 20px; 
    font-size: 1rem; 
}


/* ========================================
   フッター
   ======================================== */

.footer {
    background-color: var(--color-primary);  /* 濃い藍色 */
    color: var(--color-white);
    padding: 60px 0;
    text-align: center;
}

/* フッターのナビゲーション */
.footer-nav {
    margin-bottom: 25px;
    font-size: 0.85rem;
}

.footer-nav a {
    color: var(--color-white);
    margin: 0 12px;  /* 左右の余白 */
}

/* コピーライト表示 */
.copyright {
    font-size: 0.8rem;
    opacity: 0.6;  /* 少し透明に */
}


/* ========================================
   レスポンシブ対応（スマートフォン向け）
   ======================================== */

/* 画面幅が768px以下の場合 */
@media (max-width: 768px) {
    /* ヘッダーを縦並びに */
    .header-container { 
        flex-direction: column;  /* 縦方向に並べる */
        gap: 10px; 
    }
    
    /* ヒーローのキャッチコピーを小さく */
    .hero-catch { 
        font-size: 1.6rem; 
    }
    
    /* プロフィールを縦並びに */
    .profile-wrapper { 
        flex-direction: column; 
    }
    
    .profile-image { 
        flex: 0 0 auto;      /* 自動サイズに */
        width: 100%;         /* 幅いっぱいに */
        margin-bottom: 30px; 
    }
    
    /* 会社情報の表をスマホ向けに */
    .company-table th, 
    .company-table td { 
        display: block;   /* ブロック要素に */
        width: 100%;      /* 幅いっぱいに */
        padding: 10px 0; 
    }
    
    .company-table th { 
        border: none;         /* 境界線を消す */
        padding-bottom: 0; 
    }
}