/*
    デザイン指示: BtoBサービスとしての信用力（青）と即日性・行動喚起（緑）を強調
    メインカラー: #039ee9 (信用力)
    CTAカラー: #58bf68 (スピード、行動喚起)
*/

/* --- 変数定義 --- */
:root {
    --color-main: #039ee9; /* メインカラー (信用力) */
    --color-main-dark: #028ac8; /* メインカラーの濃い色 */
    --color-cta: #58bf68; /* CTAカラー (スピード、行動喚起) */
    --color-cta-dark: #4b9b58; /* CTAカラーの濃い色 */
    --color-text-dark: #333;
    --color-text-light: #f4f4f4;
    --color-background-light: #F9F9F9;
    --color-background-main-light: #E6F7FF; /* メインカラー系の薄い背景 */
    --color-error: #E53E3E; /* 強調用 (無料/赤) */
    --font-family-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', sans-serif;
    --section-padding: 80px 0;
}

/* --- リセットと基本スタイル --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text-dark);
    line-height: 1.7;
    background-color: #fff;
    /* 追従CTAのためにpadding-bottomを確保 */
    padding-bottom: 90px; 
}

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

a {
    text-decoration: none;
    color: var(--color-main);
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.8;
}

/* --- 汎用クラス --- */
.section-padding {
    padding: var(--section-padding);
}

.bg-light {
    background-color: var(--color-background-light);
}

.bold {
    font-weight: 700;
}

/* テキストの強調色 */
.accent-main {
    color: var(--color-main-dark);
    font-weight: 700;
}
.accent-cta {
    color: var(--color-cta-dark);
    font-weight: 700;
}

/* 背景色 */
.accent-bg-cta {
    background-color: var(--color-cta);
    color: white;
    padding: 5px 15px;
    border-radius: 6px;
    display: inline-block;
}
.main-color-bg {
    background-color: var(--color-main);
    color: white;
    padding: 5px 15px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 10px;
}

/* 強調テキスト（太字+色） */
.strong-red {
    color: var(--color-error);
    font-weight: 900;
}
.strong-cta {
    color: var(--color-cta-dark);
    font-weight: 900;
}
.strong-main {
    color: var(--color-main-dark);
    font-weight: 900;
}
.bold-cta-color {
    color: var(--color-cta);
    font-weight: 700;
}
.bold-main-color {
    color: var(--color-main);
    font-weight: 700;
}
.bold-red {
    color: var(--color-error);
    font-weight: 700;
}

.underline-main {
    border-bottom: 4px solid var(--color-main);
    padding-bottom: 2px;
}

.main-color-text-bold {
    color: var(--color-main-dark);
    font-weight: 900;
    font-size: 1.2em;
}
.cta-color-text-bold {
    color: var(--color-cta-dark);
    font-weight: 900;
    font-size: 1.2em;
}


/* 見出し */
.section-heading-lg {
    font-size: 2.5em;
    font-weight: 800;
    text-align: center;
    margin-bottom: 50px;
    color: var(--color-main-dark);
    line-height: 1.4;
}
.section-heading {
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-main-dark);
}

.sub-text {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 30px;
}

/* --- ヘッダー（固定） --- */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

/* --- CTAボタンのスタイル (全てCTAカラーで定義) --- */
.button-primary {
    display: inline-block;
    background-color: var(--color-cta); /* CTAカラー */
    color: white !important;
    border: none;
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--color-cta-dark); /* CTAカラーの濃い色 */
    transition: transform 0.1s, box-shadow 0.1s;
    line-height: 1.2;
}

.button-primary:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--color-cta-dark);
}

.header-cta {
    padding: 8px 15px;
    font-size: 0.9em;
}

.button-lg {
    padding: 20px 30px;
    font-size: 1.5em;
    width: 100%;
    max-width: 500px;
    margin: 30px auto;
    display: block;
    box-shadow: 0 6px 0 var(--color-cta-dark);
}

.button-lg:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 var(--color-cta-dark);
}

.button-xl {
    padding: 30px 40px;
    font-size: 1.8em;
    width: 100%;
    max-width: 600px;
    margin: 40px auto 10px; /* 最終CTA直下の余白を調整 */
    display: block;
    box-shadow: 0 8px 0 var(--color-cta-dark);
}

.button-xl:active {
    transform: translateY(8px);
    box-shadow: 0 0 0 var(--color-cta-dark);
}

.cta-top {
    display: block;
    font-size: 1em;
}

.cta-bottom {
    display: block;
    font-size: 0.7em;
    margin-top: 5px;
    font-weight: 500;
}

/* --- 追従フッターCTA --- */
.fixed-footer-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* スマホでの視認性を高めるため、背景を半透明白に */
    background-color: rgba(255, 255, 255, 0.95); 
    padding: 10px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 990;
    text-align: center;
}

.button-fixed {
    /* 追従CTAは画面幅いっぱいに広げ、視認性を高める */
    font-size: 1.1em;
    padding: 15px 20px;
    width: 95%; 
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 0 var(--color-cta-dark);
}

.button-fixed .cta-top {
    font-size: 1.1em;
}
.button-fixed .cta-bottom {
    font-size: 0.8em;
}


/* --- 3-1. メインビジュアル（FV） --- */
.fv-section {
    padding-top: 150px; /* 固定ヘッダーの高さと余白を考慮 */
    padding-bottom: 50px;
    text-align: center;
    background-image: linear-gradient(180deg, var(--color-background-main-light) 0%, #fff 100%); /* メインカラー系の優しいグラデーション */
}

/* 新しいFV文言スタイル */
.fv-subheading-new {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--color-main-dark);
    margin-bottom: 5px;
}
.fv-catch-new {
    font-size: 1.2em;
    color: var(--color-text-dark);
    font-weight: 500;
    margin-bottom: 20px;
}

.fv-main-heading-new {
    font-size: 4em;
    font-weight: 900;
    line-height: 1.2;
    color: white;
    background-color: var(--color-main-dark);
    display: inline-block;
    padding: 5px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}
.fv-main-heading-new .main-color-bg {
    background: none;
    color: white;
    padding: 0;
    margin: 0;
}

/* 従来のFV文言の調整（下段に移動） */
.fv-sub-copy {
    font-size: 1.1em;
    color: var(--color-main-dark);
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 40px;
}

.fv-key-visual {
    margin-bottom: 40px;
}

/* 画像出し分けのロジックに対応 */
.fv-key-visual picture,
.fv-key-visual img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto;
}

.fv-features {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.feature-item {
    background-color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 1.1em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.feature-item-main {
    border: 3px solid var(--color-main);
    color: var(--color-main-dark);
}
.feature-item-cta {
    border: 3px solid var(--color-cta);
    color: var(--color-cta-dark);
}

.feature-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* --- 新しい課題訴求セクション (Intro Merit) --- */
.intro-merit-section {
    background-color: var(--color-background-main-light);
}

.intro-merit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.intro-merit-item {
    background-color: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid var(--color-cta);
}

.merit-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

.intro-merit-item h3 {
    font-size: 1.2em;
    color: var(--color-main-dark);
    margin-bottom: 10px;
}


/* --- 3-3. ソリューション提示（選ばれる7つの理由） --- */
.solution-section {
    padding-top: 50px;
    padding-bottom: 80px;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.reasons-grid-new {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}


.reason-card {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-top: 5px solid #ccc;
    transition: transform 0.3s;
}

.reason-card:hover {
    transform: translateY(-5px);
}

/* 理由の強調色 */
.reason-emphasis-main {
    border-top-color: var(--color-main);
    background-color: var(--color-background-main-light); /* 薄いメインカラー背景 */
}
.reason-emphasis-cta {
    border-top-color: var(--color-cta);
    background-color: #E6FFE6; /* 薄いCTAカラー背景 */
}


.reason-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    object-fit: contain;
}

.reason-title {
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text-dark);
}

.reason-title-main {
    color: var(--color-main-dark);
}
.reason-title-cta {
    color: var(--color-cta-dark);
}

/* --- 機能一覧 (選ばれている理由) --- */
.features-list-section {
    background-color: white;
}
.benefits-text-block {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}
.benefits-text-block h3 {
    color: var(--color-main-dark);
    font-size: 1.6em;
    border-left: 5px solid var(--color-main);
    padding-left: 15px;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* --- 利用方法セクション --- */
.usage-section {
    background-color: var(--color-background-light);
}
.usage-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}
.usage-block {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.usage-title {
    font-size: 1.6em;
    color: var(--color-main-dark);
    border-bottom: 2px dashed #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.usage-block h4 {
    font-size: 1.2em;
    color: var(--color-cta-dark);
    margin-top: 20px;
    margin-bottom: 10px;
}
.optional-service-info {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}
.optional-service-info .usage-title {
    border-bottom: none;
    font-size: 1.8em;
}
.optional-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
.optional-feature {
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.optional-feature h4 {
    color: var(--color-cta-dark);
    font-size: 1.3em;
    margin-bottom: 10px;
}


/* --- 申し込みの流れ (Flow) --- */
.flow-section {
    background-color: white;
}
.flow-steps {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.flow-item {
    flex: 1;
    text-align: center;
    padding: 20px;
    position: relative;
    border-radius: 8px;
    background-color: var(--color-background-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ステップ間の矢印 (PCのみ表示) */
.flow-item:not(:last-child)::after {
    content: '▶︎';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-main);
    font-size: 1.5em;
    font-weight: bold;
}

.flow-number {
    display: inline-block;
    background-color: var(--color-main);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.flow-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

.flow-title {
    font-size: 1.3em;
    color: var(--color-text-dark);
    margin-bottom: 10px;
}

.flow-emphasis-cta {
    border: 3px solid var(--color-cta);
    background-color: #F7FFF7; /* 即日性を強調する薄い色 */
}
.flow-notes {
    max-width: 1000px;
    margin: 30px auto 0;
    text-align: center;
    font-size: 0.9em;
    padding: 15px;
    border: 1px dashed #ddd;
}

/* --- 3-4. 料金・サービス概要 --- */
.price-section {
    background-color: var(--color-background-light);
}
.price-table-wrapper {
    max-width: 1000px; /* 表を広げる */
    margin: 0 auto 30px;
    border: 4px solid var(--color-main); /* メインカラーの枠線 */
    border-radius: 10px;
    overflow: hidden;
    overflow-x: auto; /* スマホ対応 */
}

.price-table {
    width: 100%;
    min-width: 600px; 
    border-collapse: collapse;
}

.price-table th, .price-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.price-table td.item-note {
    font-size: 0.9em;
    color: #555;
    width: 40%;
}


.price-table th {
    background-color: var(--color-main);
    color: white;
    font-weight: 700;
}

.price-table td:first-child {
    background-color: var(--color-background-main-light);
    font-weight: 700;
    width: 20%;
}

.price-main {
    font-size: 2em;
    font-weight: 900;
    color: var(--color-main-dark);
    margin-right: 5px;
}

.price-details-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 20px;
}
.price-detail-box {
    flex: 1;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.detail-title {
    font-size: 1.2em;
    color: var(--color-main-dark);
    margin-bottom: 5px;
}
.detail-value {
    font-size: 1.5em;
    font-weight: 900;
}
.note-text {
    text-align: center;
    font-size: 0.9em;
    color: #555;
    margin-bottom: 40px;
}


/* オプションリスト */
.option-list-full {
    max-width: 1000px;
    margin: 0 auto 40px;
}
.option-list-title {
    font-size: 1.6em;
    color: var(--color-main-dark);
    border-left: 5px solid var(--color-cta);
    padding-left: 15px;
    margin-bottom: 20px;
}
.option-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.option-card {
    background-color: white;
    padding: 20px;
    border: 1px solid var(--color-main);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.option-card h4 {
    color: var(--color-main-dark);
    font-size: 1.4em;
    margin-bottom: 10px;
}
.option-price {
    font-size: 1.1em;
    font-weight: 500;
    margin-bottom: 10px;
}
.option-spec {
    font-size: 0.9em;
    color: #666;
}

.communication-price {
    max-width: 600px;
    margin: 0 auto 40px;
}
.communication-table {
    width: 100%;
    border-collapse: collapse;
}
.communication-table td {
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
}
.communication-table td:first-child {
    text-align: left;
    width: 60%;
    font-weight: 500;
}
.communication-table td:last-child {
    text-align: right;
    font-weight: 700;
}
.communication-note {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
}

.payment-methods {
    max-width: 600px;
    margin: 0 auto;
}
.payment-methods p {
    margin-bottom: 10px;
}

/* --- 3-5. よくある質問（FAQ） --- */
.faq-section {
    background-color: white;
}
.faq-accordion {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.faq-toggle {
    display: none; /* チェックボックスを非表示に */
}

.faq-q {
    display: block;
    background-color: #f0f8ff; /* 質問は薄い青背景 */
    padding: 18px 25px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    color: var(--color-main-dark);
    border-bottom: 1px solid #eee;
}

.faq-q::before {
    content: 'Q.';
    color: var(--color-cta);
    font-weight: 900;
    margin-right: 10px;
}

.faq-q::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: var(--color-cta); /* CTAカラーで強調 */
    transition: transform 0.3s;
}

.faq-toggle:checked + .faq-q::after {
    content: '−';
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; 
    background-color: var(--color-background-light);
    padding: 0 25px;
}

.faq-toggle:checked ~ .faq-a {
    max-height: 800px; 
    padding: 15px 25px;
}

.faq-a p {
    padding: 5px 0;
    text-align: left;
}
.faq-a p::before {
    content: 'A.';
    color: var(--color-main);
    font-weight: 900;
    margin-right: 10px;
}

.bold-highlight-cta {
    font-weight: 900;
    color: var(--color-cta-dark); /* 即日性をCTAカラーで強調 */
}

/* --- 3-6. 最終クロージングとCTA --- */
.closing-cta-section {
    background-color: var(--color-main-dark); /* 信頼感のある濃い青 */
    color: var(--color-text-light);
    text-align: center;
    padding: 60px 0 80px;
}

.closing-catch {
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.4;
}

.closing-accent {
    color: #FFC107; /* 濃い青背景に映える黄色で強調 */
    font-weight: 900;
}

.closing-text {
    font-size: 1.2em;
    font-weight: 300;
    margin-bottom: 40px;
}

.closing-link-text {
    margin-top: 10px;
    font-size: 1.1em;
    color: white;
    font-weight: 700;
}


/* --- フッター --- */
footer {
    padding: 30px 0;
    background-color: #333;
    color: #bbb;
    text-align: center;
    font-size: 0.9em;
}

.legal-note {
    max-width: 800px;
    margin: 0 auto 15px;
    padding: 15px;
    background-color: #222;
    border-radius: 5px;
    line-height: 1.6;
    font-size: 0.8em;
    text-align: left;
}

.legal-note .bold {
    color: #ddd;
    font-size: 1.1em;
}

.bold-highlight-footer {
    font-weight: 900;
    color: #FFC107; /* フッター内での強調色（黄色） */
}

/* =================================
    レスポンシブ対応 (スマホ最適化)
   ================================= */
@media (max-width: 768px) {
    :root {
        --section-padding: 40px 0;
    }

    body {
        /* スマホ用追従CTAの高さに合わせて調整 */
        padding-bottom: 70px; 
    }
    
    .container {
        padding: 0 15px;
    }

    /* 固定ヘッダー */
    .fixed-header {
        padding: 5px 0;
    }
    .logo img {
        height: 25px;
    }
    .header-cta {
        font-size: 0.75em;
        padding: 6px 10px;
    }

    /* FV */
    .fv-section {
        padding-top: 90px;
        padding-bottom: 30px;
    }

    /* 新FV文言 */
    .fv-subheading-new {
        font-size: 1.1em;
    }
    .fv-catch-new {
        font-size: 1em;
        margin-bottom: 10px;
    }
    .fv-main-heading-new {
        font-size: 2.2em;
        padding: 5px 15px;
        margin-bottom: 20px;
    }
    .fv-sub-copy {
        font-size: 0.9em;
        margin-bottom: 10px;
    }
    
    .fv-features {
        flex-direction: column;
        gap: 8px;
    }
    
    .feature-item {
        width: 100%;
        font-size: 1em;
        padding: 8px 15px;
    }

    /* 新しい課題訴求セクション */
    .intro-merit-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .intro-merit-item {
        padding: 20px;
    }

    /* 全体見出し */
    .section-heading-lg {
        font-size: 1.6em;
        margin-bottom: 30px;
    }
    .section-heading {
        font-size: 1.4em;
    }

    /* 7つの理由 */
    .reasons-grid, .reasons-grid-new {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .reason-card {
        padding: 20px;
    }
    .reason-title {
        font-size: 1.2em;
    }

    /* 機能一覧 */
    .benefits-text-block h3 {
        font-size: 1.4em;
    }

    /* 利用方法 */
    .usage-blocks {
        grid-template-columns: 1fr;
    }
    .usage-title {
        font-size: 1.4em;
    }
    .optional-features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .optional-feature h4 {
        font-size: 1.2em;
    }

    /* 申し込みの流れ */
    .flow-steps {
        flex-direction: column;
        gap: 0;
    }
    .flow-item:not(:last-child)::after {
        content: '▼';
        right: 50%;
        top: auto;
        bottom: -25px;
        transform: translateX(50%);
    }
    .flow-item {
        margin-bottom: 40px;
    }

    /* 料金表 */
    .price-details-grid {
        flex-direction: column;
        gap: 20px;
    }
    .price-table-wrapper {
        overflow-x: scroll; /* 横スクロールを可能に */
    }
    .price-table {
        min-width: 500px;
    }
    .price-table td:first-child {
        width: 30%;
    }
    .option-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* FAQ */
    .faq-q {
        font-size: 1em;
        padding: 15px 15px 15px 40px;
    }

    /* CTAボタン */
    .button-lg {
        font-size: 1.1em;
        padding: 15px 10px;
    }
    
    .button-xl {
        font-size: 1.3em;
        padding: 20px 15px;
    }

    /* 追従CTA */
    .fixed-footer-cta {
        padding: 5px 0;
    }
    .button-fixed {
        font-size: 0.9em;
        padding: 10px 10px;
    }
    .closing-catch {
        font-size: 1.4em;
    }
}