/*
Theme Name: Undercover Order Theme
Author: Your Name
Description: Gaming PC Rental Landing Page Theme
*/

/* 全体設定：メイリオを脱却し、極細フォントを適用 */
body {
    background-color: #f8f8f8;
    color: #000;
    margin: 0;
    /* Noto Sans JPの300(細め)を基本にする */
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* ヘッダー全体のスタイル */
.site-header {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 中身を右側に寄せる合図 */
    height: 70px;
    background-color: #02d9ff;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 30px;           /* 右端の余白を少し多めに */
}

/* 左上のメニューボタン（位置は左端に固定） */
.menu-button {
    position: absolute;
    left: 20px;
    width: 24px;
    height: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu-button span {
    display: block;
    width: 100%;
    height: 1px;             /* 細い黒線 */
    background-color: #000;
    transition: 0.3s;
}

/* ロゴのスタイル */
.header-logo h1 {
    /* Googleから読み込んだ 'Inter' を一番最初に指定 */
    font-family: 'Inter', "Helvetica Neue", Arial, sans-serif;

    font-size: 19px;         /* Interは少し小さめに見えるので、1px大きくしました */
    font-weight: 700;        /* 太くして存在感を出す */
    letter-spacing: -0.02em; /* Interは少し間隔を詰めると、よりお手本に似て「プロっぽく」なります */
    margin: 0;
    color: #000;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

/* 最初のセクション：plan-summary */
.plan-summary {
    background-color: #f8f8f8;
    padding: 60px 20px 40px; /* 下側の余白を少し調整 */
    text-align: center;
}

/* タイトル：月額利用制 */
.title-large {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 32px;
    letter-spacing: 0.1em;
    margin: 0;    /* 下の余白を5pxに（極限まで詰める） */
    color: #000;
}

/* 価格：税込 月額 4,500円 */
.price {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;     /* 任天堂風：価格は少し太くして視認性を高める */
    margin: 0 0 5px 0;   /* 下の余白を10pxに */
    color: #000;
}

/* 注釈：※ 画像は一例です〜 */
.note {
    font-size: 11px;
    color: #000000;
    font-weight: 300;
    margin: 0;            /* 余白をゼロに */
    line-height: 1.4;     /* 行間も少し詰め気味に */
}

.product-image {
    width: 100%;           /* 親要素（画面幅）に対して100%広がるようにする */
    max-width: 500px;      /* ただし、PCで見ても大きすぎないよう上限を決める */
    margin: 0 auto 30px;   /* 左右をautoにすることで、中央寄せにする */
}

.product-image img {
    width: 100%;           /* 枠（.product-image）いっぱいに画像を表示 */
    height: auto;          /* 縦横比を崩さない */
    display: block;        /* 画像の下に謎の隙間ができるのを防ぐ */
}

/* セクション全体の背景（前のセクションと差をつけるために薄いグレーを継続、または白でもOK） */
.plan-benefit {
    padding: 0px 20px;
    background-color: #f8f8f8; 
    display: flex;
    justify-content: center; /* ボックスを中央へ */
}

/* 白い角丸ボックス */
.benefit-box {
    background-color: #fff;  /* ボックス内は白 */
    color: #000;
    padding: 30px;
    border-radius: 24px;     /* お手本のような大きな角丸 */
    max-width: 500px;        /* スマホで横幅がいっぱいになりすぎないよう制限 */
    width: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.30); /* ほんの少しだけ影をつけて浮かせる */
    text-align: left;        /* 中身の文字は左揃え */
    margin-top: -10px; 
    position: relative;
    z-index: 10;
}

/* 見出し：22ヶ月後〜 */
.benefit-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 100;        /* ここも極細で統一 */
    font-size: 26px;
    line-height: 1.3;
    margin: 0 0 20px 0;
    letter-spacing: 0.05em;
}

/* リード文：月額4,500円を〜 */
.benefit-lead {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #333;
}

/* 特徴リスト */
.benefit-list {
    list-style: none;        /* 点を消す */
    padding: 0;
    margin: 0;
}

.benefit-list li {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 0px;
    position: relative;
    padding-left: 1.2em;     /* 文頭の記号用のスペース */
}

/* リストの先頭に小さな「・」をつける */
.benefit-list li::before {
    content: "・";
    position: absolute;
    left: 0;
}

.benefit-list strong {
    font-weight: 700;        /* 項目名だけ少し強調 */
}

.content-wrapper {
    max-width: 550px; /* benefit-boxのmax-widthに合わせる */
    margin: 0 auto;   /* 画面の中央に配置 */
    padding: 0 20px;  /* スマホ表示時の左右余白 */
    box-sizing: border-box;
}

/* 共通のボックススタイル（.attentionと同じ見た目にする） */
.attention, .spec-box {
    background-color: #f9f9f9; /* 薄いグレー */
    border-radius: 8px;       /* 角丸 */
    padding: 24px;            /* 内側の余白 */
    text-align: left;         /* 左揃え */
    max-width: 100%;          /* 幅いっぱい */
    box-sizing: border-box;   /* パディングを含めた幅計算 */
}

/* 見出し直下の余白を詰める設定 */
.attention .section-title, 
.spec-box .section-title {
    margin-bottom: -15px !important; /* 本文との間隔を最小限に */
    padding-bottom: -15px !important;
}

/* スペックリストの調整（左端をビシッと揃える） */
.spec-list {
    list-style: none;         /* ポエム抜きの実用性重視：中黒なし */
    padding: 0;
    margin: 0;
}

.spec-list li {
    display: flex;            /* 項目名と内容を横並びに */
    margin-bottom: 12px;
    line-height: 1.5;
}

.spec-label {
    font-weight: bold;
    width: 5em;               /* 項目名の幅を固定して縦を揃える */
    flex-shrink: 0;           /* 項目名が潰れないように固定 */
}

/* ボタンの基本スタイル */
.btn-apply {
    display: block;               /* 幅いっぱいのボタンにする */
    background: #007bff;          /* 清潔感のある青 */
    color: #fff !important;       /* 文字色は白（!importantでリンク色を上書き） */
    text-align: center;           /* 文字を真ん中に */
    padding: 18px 24px;           /* 上下に余裕を持たせる */
    font-weight: bold;            /* 太字で強調 */
    font-size: 1.1rem;            /* 少し大きめに */
    text-decoration: none !important; /* 下線を消す */
    border-radius: 8px;           /* ボックスと同じ角丸に */
    margin-top: 30px;             /* スペック表との間隔 */
    transition: all 0.3s ease;    /* 動きを滑らかに */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 軽い影で立体感を出す */
}

/* マウスを乗せた時の動き（ホバー） */
.btn-apply:hover {
    background: #0056b3;          /* 少し濃い青に */
    transform: translateY(-2px);  /* 2px上に浮き上がる */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* 影を強くして浮遊感を出す */
}

/* スマホ等でタップした時の動き */
.btn-apply:active {
    transform: translateY(0);     /* 押し込んだ感じを出す */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 本人確認ページの送信ボタン用調整 */
.btn-apply {
    display: block;
    width: 100%;               /* フォームの幅に合わせる */
    background: #007bff;
    color: #000 !important;
    text-align: center;
    padding: 18px 24px;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none !important;
    border-radius: 8px;
    margin-top: 30px;
    border: none;              /* inputタグ特有の枠線を消す */
    cursor: pointer;           /* マウスを乗せた時に指マークにする */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    -webkit-appearance: none;  /* iPhone等のブラウザ特有のデザインをリセット */
}

/* ホバー（マウス乗せ）時の演出も共通化 */
.btn-apply:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Contact Form 7 の送信ボタンを共通デザインに強制上書き */
input.wpcf7-submit.btn-apply {
    display: block;
    width: 100%;               /* フォームの幅いっぱいに広げる */
    background-color: #02d9ff; /* 指定の青色 */
    color: #000 !important; /* 文字色は白 */
    font-weight: bold;
    font-size: 1.1rem;
    padding: 24px 0;      /* 上下に余裕を持たせる */
    border-radius: 8px;
    border: none;              /* 枠線を消す */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    -webkit-appearance: none;  /* iOSでのボタンデザイン崩れを防止 */
    margin-top: 50px;
}

/* マウスホバー時の動き */
input.wpcf7-submit.btn-apply:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 送信中などのローディング中の微調整 */
.wpcf7-spinner {
    display: block;
    margin: 10px auto; /* くるくる回るアイコンを中央に */
}

/* ボタンの外側の余白調整 */
.button-container {
    margin-top: 50px; /* スペック表との間隔を広めに設定 */
    margin-bottom: 50px;
    text-align: center; /* 中央寄せ */
}

/* ボタンのデザイン */
.submit-button {
    display: inline-block;     /* リンクをボタンのように扱う */
    background-color: #00CCFF; /* 画像と同じ鮮やかな水色 */
    color: #000000;            /* 文字色は黒 */
    text-decoration: none;     /* リンクの下線を消す */
    font-size: 18px;           /* 文字の大きさ */
    font-weight: bold;         /* 太字 */
    padding: 18px 0;           /* 上下の余白 */
    width: 100%;               /* スマホ等で横幅いっぱいにする */
    max-width: 400px;          /* PCで大きくなりすぎないよう制限 */
    border-radius: 10px;       /* 画像のような適度な丸み */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 軽い影で立体感を出す */
    transition: background-color 0.2s, transform 0.1s; /* 反応を良くする */
}

/* マウスを乗せた時やクリックした時の反応 */
.submit-button:hover {
    background-color: #00BBEA; /* 少し色を濃くする */
    text-decoration: none;     /* ホバー時も下線なし */
}

.submit-button:active {
    transform: translateY(2px); /* クリックした時に少し沈む演出 */
}

/* 申請者の入力欄などが枠を突き抜けないようにする */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* 枠線や余白を含めて100%に収める */
}

/* 特商法テーブルのスマホ最適化 */
.legal-table {
    border: 1px solid #eee;
}

.legal-th {
    width: 35%; /* PCでの幅 */
    background-color: #fcfcfc;
    border: 1px solid #eee;
    padding: 12px 10px;
    text-align: left;
    font-size: 13px;
    font-weight: bold;
    vertical-align: middle;
}

.legal-th span {
    font-size: 10px;
    font-weight: normal;
    display: block;
    color: #666;
}

.legal-td {
    border: 1px solid #eee;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word; /* 長い単語を折り返す */
    word-break: break-all; /* メールアドレスなどが突き抜けるのを防ぐ */
}

/* スマホでの表示調整（幅が狭い場合） */
@media screen and (max-width: 480px) {
    .legal-th {
        width: 40%; /* スマホでは見出しを少し広げる */
        font-size: 12px;
        padding: 10px 8px;
    }
    .legal-td {
        font-size: 13px;
        padding: 10px 8px;
    }
}

.payment-note {
    background-color: #fff9e6; /* 薄い注意喚起の黄色 */
    border-left: 4px solid #a1d8f8;
    padding: 15px;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    border-radius: 4px;
    color: #444;
}
.payment-note strong {
    color: #3a3a3a;
}

/* チェックボックスエリアを中央に配置 */
.center-acceptance {
    text-align: center; /* 中身を中央寄せ */
    margin-top: 20px;
    margin-bottom: -30px;
}

/* CF7のacceptanceタグの内部構造を調整 */
.center-acceptance .wpcf7-list-item {
    margin-left: 0;
}

.center-acceptance label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

/* チェックボックスを少し大きく、押しやすくする */
.center-acceptance input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    margin-right: 8px;
    cursor: pointer;
}