/* Reset & Base */
body { margin: 0; font-family: "Noto Sans JP", sans-serif; color: #333; line-height: 1.7; }
img { max-width: 100%; height: auto; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ヘッダー全体の固定設定 */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; /* 高さを少し低めに設定してスッキリ */
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
}

.header-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; /* ロゴとボタンを左右に飛ばす */
    align-items: center;
}

/* ロゴのサイズ調整 */
.header-logo img {
    height: 40px; /* 高さに合わせて調整 */
    width: auto;
    display: block;
}

/* ヘッダー内のボタン */
.btn-header {
    background: #f39800; /* 公式のオレンジ */
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 50px;
    transition: background 0.3s;
    white-space: nowrap; /* 改行させない */
}

.btn-header:hover {
    background: #e58d00;
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
    .site-header {
        height: 60px; /* スマホではさらに低く */
    }
    .header-logo img {
        height: 30px;
    }
    .btn-header {
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* コンテンツがヘッダーに被らないように調整（bodyに上余白） */
body {
    padding-top: 70px;
}
@media (max-width: 768px) {
    body {
        padding-top: 60px;
    }
}

/* Main Visual */
.main-visual {
    width: 100%;
    background-image: url('img/header-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mv-container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start;
}

.mv-cta-link {
    display: block;
    max-width: 500px;
    transition: transform 0.2s ease;
    text-decoration: none;
}

.mv-cta-link:hover {
    transform: scale(1.02);
}

.mv-cta-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Common Sections */
.section-title { text-align: center; font-size: 32px; color: #004ea2; margin-bottom: 20px; position: relative; }
.section-title::after { content: ""; display: block; width: 50px; height: 4px; background: #f39800; margin: 15px auto 0; }
.problems-section, .flow-section, .form-section { padding: 80px 0; }
.gray-bg { background: #f9f9f9; }
.blue-bg { background: #bbe1fb; }

/* Section Base */
.section { padding: 80px 0; }
.section-lead { text-align: center; max-width: 800px; margin: 0 auto 40px; font-weight: bold; }
.highlight { color: #e60012; text-decoration: underline; }

/* About Section */
.about-content { text-align: center; }
.about-content p { margin-bottom: 20px; font-size: 18px; }
.about-image { margin-top: 40px; }

/* Solution Banner */
.solution-banner {
    background: #004ea2;
    color: #fff;
    text-align: center;
    padding: 10px;
    margin: 0px 20px 30px 20px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: bold;
}
.inline-logo { height: 30px; vertical-align: middle; margin: 0 10px; background: #fff; padding: 5px; border-radius: 5px; }

/* Problem Grid (既存のものを微調整) */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.problem-item {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
}
.problem-item img { max-width: 200px; height: auto; margin-bottom: 20px; }

@media (max-width: 768px) {
    .problem-grid { grid-template-columns: 1fr; }
    .solution-banner { font-size: 18px; }
}

/* Problem Grid */
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.problem-item { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); text-align: center; }
.problem-item h3 { font-size: 18px; color: #004ea2; margin: 15px 0; }

/* Mechanism */
.mechanism-section { background: #004ea2; color: #fff; padding: 80px 0; text-align: center; }
.mechanism-section .section-title { color: #fff; }
.mechanism-image { margin: 40px 0; }
.mechanism-text-box { background: rgba(255,255,255,0.1); padding: 30px; border-radius: 10px; max-width: 800px; margin: 0 auto; }

/* Flow */
.flow-grid { display: flex; gap: 20px; justify-content: space-between; margin-top: 50px; }
.flow-item { flex: 1; background: #fefefe; padding: 30px; border: 1px solid #eee; border-radius: 10px; text-align: center; position: relative; }
.step-label { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #f39800; color: #fff; padding: 4px 20px; border-radius: 20px; font-weight: bold; }

/* Form */
.form-section { background: #f4f7f9; }
#miraregi-form { max-width: 700px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 10px; }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: bold; margin-bottom: 8px; }
.form-row label span { color: red; margin-left: 8px; font-size: 12px; }
.form-row input[type="text"], .form-row input[type="email"] { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; }
.form-submit button { width: 100%; background: #f39800; color: #fff; border: none; padding: 20px; font-size: 20px; font-weight: bold; border-radius: 5px; cursor: pointer; }

/* Footer */
.site-footer { background: #333; color: #fff; padding: 40px 0; text-align: center; font-size: 13px; }

/* Responsive (全てのスマホ用設定を最後にまとめる) */
@media (max-width: 768px) {
    .header-inner { flex-direction: column; }
    .main-nav ul { margin-top: 15px; flex-wrap: wrap; justify-content: center; }
    .main-nav li { margin: 5px 10px; }
    
    /* メインビジュアルのスマホ調整 */
    .main-visual {
        padding: 40px 0;
        background-position: 70% center; 
    }
    .mv-container {
        justify-content: center; 
    }
    .mv-cta-link {
        max-width: 90%; 
    }

    .problem-grid { grid-template-columns: 1fr; }
    .flow-grid { flex-direction: column; }
}
.section-subtitle{padding: 10px; max-width: 800px; margin: 0 auto; text-align:center;
}
/* 特徴セクション（交互配置） */
.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
}
.feature-item.reverse {
    flex-direction: row-reverse;
}
.feature-img {
    flex: 1;
    text-align: center;
}
.feature-img img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.feature-text {
    flex: 1.2;
}
.feature-text h3 {
    font-size: 24px;
    color: #004ea2;
    margin-bottom: 20px;
    position: relative;
    padding-left: 15px;
    border-left: 5px solid #f39800;
}
.feature-text p {
    font-size: 16px;
    line-height: 1.8;
}
.bold-blue {
    color: #004ea2;
    font-weight: bold;
    font-size: 1.1em;
}

/* 仕組み詳細 */
.section-subtitle {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}
.mechanism-main-img {
    text-align: center;
    margin-bottom: 40px;
}
.mechanism-description-box {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.mechanism-description-box p {
    margin-bottom: 1.5em;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .feature-item, .feature-item.reverse {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .feature-text h3 {
        border-left: none;
        border-bottom: 3px solid #f39800;
        padding-left: 0;
        padding-bottom: 10px;
    }
}

/* こんな方もOK！セクション */
.target-box {
    border: 4px solid #004ea2;
    padding: 0px 40px;
    border-radius: 10px;
    position: relative;
    text-align: center;
    max-width: 800px;
    margin: 0px auto;
}

.target-title {
    color: #004ea2;
    padding: 0px 20px;
    font-size: 26px;
    font-weight: bold;
}

.target-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    display: inline-block; /* 中央寄せにするため */
    text-align: left;
}

.target-list li {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    color: #333;
}

/* チェックマークのスタイル */
.check-mark {
    color: #3182ed; /* ボタンと同じ鮮やかな青 */
    font-size: 24px;
    margin-right: 15px;
    font-weight: 900;
}

.target-footer {
    font-size: 20px;
    font-weight: bold;
    color: #004ea2;
    margin-top: 20px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .target-box {
        padding: 10px 20px;
        margin: 20px 0px;
    }
    .target-list li {
        font-size: 16px;
    }
    .target-title {
        font-size: 20px;
        width: 100%;
    }
}


/* お申込みの流れ */
.flow-container {
    max-width: 800px;
    margin: 40px auto 0;
}
.flow-step {
    display: flex;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    align-items: stretch;
}
.step-num {
    background: #004ea2;
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    min-width: 100px;
}
.step-num span {
    font-size: 32px;
    line-height: 1;
}
.step-content {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.step-content h4 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #004ea2;
}
.flow-arrow {
    text-align: center;
    color: #f39800;
    font-size: 24px;
    margin: 10px 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .target-grid {
        flex-direction: column;
    }
    .target-title {
        font-size: 20px;
        width: 80%;
    }
    .flow-step {
        flex-direction: column;
    }
    .step-num {
        flex-direction: row;
        gap: 10px;
        padding: 10px;
    }
}
/* 中間CTAセクション */
.middle-cta {
    width: 100%;
    /* 背景画像：空の画像を指定 */
    background-image: url('img/middle-back.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0; /* MVより少し広めの余白でインパクトを出す */
    display: flex;
    justify-content: center;
    align-items: center;
}

.middle-cta-container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center; /* 中間CTAは中央寄せが一般的です */
}

.middle-cta-link {
    display: block;
    max-width: 700px; /* MVより少し大きく見せると効果的 */
    transition: transform 0.3s ease;
    text-decoration: none;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); /* 画像に影をつけて浮き立たせる */
}

.middle-cta-link:hover {
    transform: translateY(-5px); /* ホバー時に少し上に浮く演出 */
}

.middle-cta-img {
    width: 100%;
    height: auto;
    display: block;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .middle-cta {
        padding: 60px 0;
    }
    .middle-cta-link {
        max-width: 95%;
    }
}

/* 登録ボタンのスタイル */
.btn-cta-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #3182ed; /* 公式サイトに近い鮮やかな青 */
    color: #fff;
    text-decoration: none;
    font-size: 28px;
    font-weight: bold;
    padding: 20px 60px;
    border-radius: 4px; /* ほんの少し角丸 */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

/* 矢印アイコンの部分 */
.arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid #fff; /* 白い丸枠 */
    border-radius: 50%;
    margin-left: 15px;
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* ホバー時の動き */
.btn-cta-blue:hover {
    background-color: #1e6cd9; /* 少し濃い青に */
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-cta-blue:hover .arrow-icon {
    transform: translateX(5px); /* 矢印だけ右にひょこっと動く */
}

/* スマホ調整 */
@media (max-width: 768px) {
    .btn-cta-blue {
        font-size: 20px;
        padding: 15px 30px;
        width: 80%; /* スマホでは横幅いっぱいに近く */
    }
}

/* よくあるご質問 */
.faq {
    padding: 80px 0;
    background-color: #fff;
}

.faq-title {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 50px;
    color: #333;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.faq-item {
    border-bottom: 1px solid #eee;
}

.faq-question {
    width: 100%;
    padding: 25px 0;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    color: #333;
    cursor: pointer;
    position: relative;
}

/* 矢印（開閉マーク） */
.faq-question::after {
    content: '';
    position: absolute;
    right: 10px;
    width: 12px;
    height: 12px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    transition: transform 0.3s;
}

/* 質問アイコンQ */
.q-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #e60012; /* 公式サイトの赤 */
    color: #fff;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
}

/* 回答エリア */
.faq-answer {
    max-height: 0; /* 初期状態は隠す */
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #fcfcfc;
}

.faq-answer-inner {
    padding: 0 0 25px 52px; /* Qアイコンの幅分をインデント */
    display: flex;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

/* 回答アイコンA */
.a-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #3182ed; /* 公式サイトの青 */
    color: #fff;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .faq-question {
        font-size: 16px;
        padding-right: 30px;
    }
    .faq-answer-inner {
        padding-left: 0;
        flex-direction: column;
    }
    .a-icon {
        margin-bottom: 10px;
    }
}
/* 運営会社セクション */
.company-table-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.company-table {
    width: 100%;
    border-collapse: collapse;
    line-height: 1.6;
}

.company-table th, 
.company-table td {
    padding: 25px 30px;
    border-bottom: 1px solid #eee;
}

/* 最後の行の線は消す */
.company-table tr:last-child th,
.company-table tr:last-child td {
    border-bottom: none;
}

/* 見出し部分（左側） */
.company-table th {
    width: 30%;
    background-color: #f9f9f9;
    color: #004ea2;
    text-align: left;
    font-weight: bold;
    vertical-align: top;
}

/* 内容部分（右側） */
.company-table td {
    background-color: #fff;
    color: #333;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .company-table th, 
    .company-table td {
        display: block; /* 縦並びにする */
        width: 100%;
        padding: 15px 20px;
    }
    
    .company-table th {
        background-color: #f0f4f8; /* スマホ時は少し色を変えて区切りを分かりやすく */
        padding-bottom: 10px;
        border-bottom: none;
    }
    
    .company-table td {
        padding-top: 5px;
    }
}
/* フォーム全体 */
.form-section {
    background-color: #f4f7f9;
}
.form-lead {
    text-align: center;
    margin-bottom: 40px;
    font-weight: bold;
}

.miraregi-form {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 50px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.form-group label span {
    background: #e60012;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}

/* 入力欄のスタイル */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

/* ラジオボタン・チェックボックス */
.radio-group, .checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px 0;
}
.radio-group label, .checkbox-grid label {
    font-weight: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 送信ボタン */
.form-submit {
    text-align: center;
    margin-top: 40px;
}
.btn-submit {
    background: #f39800;
    color: #fff;
    border: none;
    padding: 20px 80px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(243, 152, 0, 0.3);
}
.btn-submit:hover {
    background: #e58d00;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 152, 0, 0.4);
}

/* フッター */
.site-footer {
    background: #333;
    color: #fff;
    padding: 30px 0;
    text-align: center;
    font-size: 13px;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .miraregi-form {
        padding: 30px 20px;
    }
    .btn-submit {
        width: 100%;
        padding: 15px 20px;
        font-size: 18px;
    }
    .checkbox-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}