/* common/css/style.css */

/* 全体設定 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #fcf8f3; /* 落ち着いたオフホワイト/クリーム色 */
    color: #333;
}

.container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 0;
}

/* ヘッダー */
header {
    background-color: #e67e22; /* 鮮やかなオレンジ */
    color: #fff;
    padding: 5px 0; /* ヘッダーの縦の長さを短く */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center; /* ロゴを水平方向中央に配置 */
}

.logo {
    margin: 0; /* ロゴ自体のマージンをリセット */
}

.logo img {
    height: 70px; /* ロゴの高さ */
    width: auto;
}

/* SEO対策: 視覚的に隠すが検索エンジンには読み込ませるh1 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- LPページ専用スタイル --- */
/* LPのファーストビューセクション (背景画像として扱う) */
.first-view {
    display: block;
    width: 100%; /* 親要素の幅に合わせて可変 */
    max-width: 1000px; /* ファーストビュー全体の最大幅を1000pxに */
    margin: 0 auto; /* 中央寄せ */
    overflow: hidden; /* 画像がはみ出したら隠す */
    
    background-image: url('../images/fv.webp'); /* fv.webpのパス */
    background-size: cover; /* 要素全体を埋めるように画像を拡大・縮小 */
    background-position: center bottom; /* 画像の下部を優先して表示 */
    background-repeat: no-repeat; /* 画像の繰り返しをなしに */
    
    height: 550px; /* PCでのファーストビューの高さ。画像が一部見切れる可能性あり */
}

/* CTAボタンエリア (ファーストビューのすぐ下) */
.cta-button-area-top { 
    text-align: center;
    margin: 30px auto 40px; /* ファーストビューとの間にスペース */
    max-width: 960px; /* コンテンツ幅に合わせる */
}

/* CTAボタン */
.cta-button {
    display: inline-block;
    background-color: #007bff; /* 目立つ青系 */
    color: #fff;
    font-size: 1.8em;
    font-weight: bold;
    padding: 20px 40px;
    border-radius: 50px; /* 丸みを強くしてボタンらしさを出す */
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    letter-spacing: 1px;
}

.cta-button:hover {
    background-color: #0056b3; /* ホバーで少し濃い青に */
    transform: translateY(-3px); /* 軽く浮き上がらせる */
}


/* LPのヒーローセクション (キーメッセージ部分) */
.hero {
    background-color: #f7e7d9; /* ファーストビュー画像に合う淡いオレンジ */
    /* padding: 60px 0; を削除 */ /* お客様の提供CSSにはないので、そのまま */
    text-align: center;
    border-bottom: 1px solid #e0b080;
}

.section-title-highlight { /* 「資料のポイント」のスタイル */
    max-width: 960px;
    margin: 0 auto 30px;
    background-color: #e67e22; /* LPのヘッダーと同じオレンジ */
    color: #fff;
    padding: 15px 20px;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.section-title-highlight h2 {
    margin: 0;
    font-size: 1em; /* 親要素のfont-sizeに対する相対値 */
    color: inherit; /* 親の文字色を継承 */
}

.key-messages {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左揃えにする */
    justify-content: center;
    gap: 15px;
    max-width: 800px; /* キーメッセージの最大幅 */
    margin: 0 auto;
    margin-bottom: 40px; 
    /* text-align:left; は flexboxの子要素のテキストアラインメントには影響しないので削除 */ /* お客様の提供CSSにはないので、そのまま */
}

.message-item {
    font-size: 1.8em;
    color: #a05000; /* オレンジ系に合う濃い茶色/オレンジ */
    font-weight: bold;
    margin: 0;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 100%;
    box-sizing: border-box;
}

/* key-messages内のhighlightクラス。お客様のHTMLでは外れていますが、CSSは残しておきます */
.message-item.highlight {
    font-size: 2.2em;
    color: #c0392b; /* 強調する赤みを帯びたオレンジ */
    border: 2px solid #c0392b;
    transform: scale(1.03);
    transition: all 0.3s ease, transform 0.2s ease;
}

/* LPの課題セクション */
.problem-statement {
    background-color: #fff;
    padding: 20px 0; 
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);

    /* problem-statementセクション自体に幅と中央寄せを設定 */
    max-width: 960px;
    margin: 0 auto;
}

/* h3の見出し自体の幅と中央寄せを調整 */
.problem-statement h3 {
    font-size: 2em;
    color: #e67e22;
    margin-bottom: 30px;
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto;
}

.problem-statement ul {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px;
    max-width: 800px; /* key-messagesと同じ800pxに再設定 */
    text-align: left;
}

.problem-statement ul li {
    background-color: #fffaf0; /* 淡いクリーム色 */
    margin-bottom: 15px;
    padding: 15px 25px;
    border-left: 5px solid #f39c12; /* 少し明るいオレンジのライン */
    border-radius: 4px;
    font-size: 1.6em;
	width: 100%;
    color: #555;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box; /* リスト項目の横切れを解消 */
}

.problem-statement .call-to-action {
    font-size: 1.5em;
    font-weight: bold;
    color: #28a745; /* アクセントの緑はそのままに、必要であれば調整 */
    margin-top: 40px;
    padding: 15px 25px;
    border: 2px solid #28a745;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 40px; 
}


/* LPのお申込みフォームセクション */
.contact-form {
    padding: 50px 0; 
    background-color: #f7e7d9; /* ヒーローセクションと同じ淡いオレンジ */
    text-align: center;
}

/* h3の中に注意書きを統合したので、h3のマージンを調整 */
.contact-form h3 {
    font-size: 2em;
    color: #e67e22;
    margin-bottom: 30px; /* フォーム本体との間にスペースを確保 */
    line-height: 1.4; /* 見出しと注意書きの行の高さを調整 */
}

/* フォーム下注意書き (h3に統合されたspan) */
.form-note-in-h3 {
    display: block; /* 独立した行にする */
    font-size: 0.4em; /* h3のfont-sizeに対する相対値で、より小さく表示 */
    color: inherit; /* 親であるh3と同じ色を継承 */
    font-weight: normal; /* h3の太字を解除 */
    line-height: 1.2; /* 行の高さを調整し、詰まりすぎないように */
    margin-top: 5px; /* 見出し本体との間に少しスペース */
}


/* --- サンクスページ用スタイル --- */
.thank-you-section {
    background-color: #fff;
    padding: 60px 0;
    text-align: center;
}

.thank-you-message {
    max-width: 960px;
    margin: 0 auto 30px;
    background-color: #e67e22; /* LPのヘッダーと同じオレンジ */
    color: #fff;
    padding: 15px 20px;
    font-size: 1.8em; /* 見出しを少し大きく */
    font-weight: bold;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.thank-you-message h2 { /* HTMLではh2にしています */
    margin: 0;
    font-size: 1em; /* 親要素のfont-sizeに対する相対値 */
    color: inherit; /* 親の文字色を継承 */
}

.thank-you-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.thank-you-image.pc-only {
    display: block; /* PC表示では表示 */
}

.thank-you-image.sp-only {
    display: none; /* スマホ表示では非表示 */
}

.next-steps {
    font-size: 1.1em;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
    text-align: left; /* テキストを左寄せに */
    max-width: 700px; /* 読みやすい幅に制限 */
    margin-left: auto;
    margin-right: auto;
}

.contact-info {
    border: 1px solid #e0b080; /* オレンジ系に合うボーダー */
    padding: 30px;
    max-width: 700px; /* 読みやすい幅に制限 */
    margin: 0 auto;
    text-align: left;
    background-color: #fffaf0; /* 淡いクリーム色 */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.contact-info p {
    margin: 0 0 10px;
    line-height: 1.6;
    color: #333;
}

.contact-info a {
    color: #e67e22; /* LPのキーカラーに合わせる */
    text-decoration: underline;
}
.contact-info a:hover {
    color: #d35400; /* ホバー時の色 */
}


/* フッター */
footer {
    background-color: #5d4037; /* 暗めのブラウン系 */
    color: #fff;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-logo {
    height: 30px;
    width: auto;
    margin-right: 10px;
}

/* レスポンシブデザイン */
/* 1000px以上の画面でmax-widthを適用、それ以下でwidth: 100%にする (LP用) */
@media (max-width: 1000px) {
    /* ファーストビューのheightを、画像が切れないようアスペクト比固定にする */
    .first-view { 
        height: 0;
        padding-bottom: calc(1080 / 1920 * 100%); /* アスペクト比固定 */
        max-width: none; /* 幅が1000px以下になったら最大幅の制限を解除 */
    }
}

/* 768px以下の画面での調整 (LPとサンクスページ両方に影響する部分) */
@media (max-width: 768px) {
    /* LPのファーストビューはレスポンシブでpadding-bottomが適用 */
    .first-view { 
        height: 0;
        padding-bottom: calc(1080 / 1920 * 100%); /* アスペクト比固定 */
    }

    /* CTAボタンエリア (ファーストビュー内に重ねる) のレスポンシブ調整 */
    .cta-button-area-top { 
        margin-top: 15px; /* スマホでのファーストビュー直下のCTAの余白を調整 */
        margin-bottom: 25px; /* 下部との余白を調整 */
    }

    /* CTAボタンのレスポンシブ調整 */
    .cta-button {
        font-size: 1.5em;
        padding: 15px 30px;
    }

    /* 新しく追加した「資料のポイント」のレスポンシブ調整 */
    .section-title-highlight {
        font-size: 1.5em;
        padding: 10px 15px;
        margin-bottom: 20px;
    }

    /* LPのキーメッセージ部分のレスポンシブスタイル */
    .key-messages .message-item {
        font-size: 1.5em;
        padding: 8px 15px;
    }

    .key-messages .message-item.highlight {
        font-size: 1.8em;
    }

    /* LPの課題セクションとフォームの見出しスタイル */
    .problem-statement h3 { 
        font-size: 1.6em; /* PCのh3の2emに対して、少し小さく */
        max-width: 800px; /* レスポンシブでも800pxに揃える */
        margin-left: auto;
        margin-right: auto;
    }
    .contact-form h3 {
        font-size: 1.6em;
    }
    
    /* フォーム下注意書き (h3に統合されたspan) のレスポンシブ調整 */
    .form-note-in-h3 {
        font-size: 0.35em; /* 親h3のfont-size(1.6em)に対して、さらに小さく */
        margin-top: 3px; /* 微調整 */
        line-height: 1.2;
    }

    /* サンクスページの見出しスタイル */
    .thank-you-message {
        font-size: 1.5em;
        padding: 10px 15px;
    }

    /* サンクスページ画像の表示切り替え */
    .thank-you-image.pc-only {
        display: none;
    }
    
    .thank-you-image.sp-only {
        display: block;
    }

    /* サンクスページのテキスト */
    .next-steps {
        font-size: 1em;
        padding: 0 15px;
    }

    /* サンクスページの連絡先情報 */
    .contact-info {
        padding: 20px;
    }

    /* フッターリンク */
    .footer-links a {
        margin: 5px 10px;
    }
}

@media (max-width: 480px) {
    /* LPのファーストビューはレスポンシブでpadding-bottomが適用 */
    .first-view {
        height: 0;
        padding-bottom: calc(1080 / 1920 * 100%);
    }

    /* CTAボタンのレスポンシブ調整 */
    .cta-button {
        font-size: 1.2em;
        padding: 12px 25px;
    }

    /* 新しく追加した「資料のポイント」のレスポンシブ調整 */
    .section-title-highlight {
        font-size: 1.3em;
        padding: 8px 10px;
        margin-bottom: 15px;
    }

    /* LPのキーメッセージ部分のレスポンシブスタイル */
    .key-messages .message-item {
        font-size: 1.2em;
        padding: 6px 12px;
    }
    
    .key-messages .message-item.highlight {
        font-size: 1.5em;
    }

    /* LPの課題セクションとフォームの見出しスタイル */
    .problem-statement h3 {
        font-size: 1.4em; /* PCのh3の2emに対して、さらに小さく */
        max-width: 100%; /* 親要素の幅いっぱいに */
        margin-left: auto;
        margin-right: auto;
    }
    .contact-form h3 {
        font-size: 1.4em;
    }
    
    /* フォーム下注意書き (h3に統合されたspan) のレスポンシブ調整 */
    .form-note-in-h3 {
        font-size: 0.3em; /* 親h3のfont-size(1.4em)に対して、さらに小さく */
        margin-top: 2px; /* 微調整 */
        line-height: 1.2;
    }

    /* サンクスページの見出しスタイル */
    .thank-you-message {
        font-size: 1.3em;
        padding: 8px 10px;
    }

    /* サンクスページのテキスト */
    .next-steps {
        font-size: 0.95em;
    }

    /* サンクスページの連絡先情報 */
    .contact-info {
        padding: 15px;
        font-size: 0.9em;
    }
}