@charset "UTF-8";

/* ==================================================
   セクション1：ファーストビュー (front-mv)
================================================== */
.front-mv {
    background-color: #F8F9FA; /* 清潔感のある極薄いグレー */
    padding: 60px 0;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
    .front-mv {
        padding: 40px 0 20px;
    }
}

.front-mv__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
@media screen and (max-width: 480px) {
    .front-mv__inner {
        flex-direction: column;
        gap: 20px;
    }
}

.front-mv__content {
    flex: 1;
}
@media screen and (max-width: 480px) {
    .front-mv__content {
        width: 100%;
    }
}

.front-mv__shoulder {
    display: inline-block;
    background-color: #0A1931; /* チラシの濃紺 */
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
    .front-mv__shoulder {
        font-size: 12px;
        padding: 4px 8px;
        margin-bottom: 10px;
    }
}

.front-mv__title {
    font-size: 26px;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
    .front-mv__title {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 15px;
    }
}

.front-mv__lead {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 25px;
}
@media screen and (max-width: 480px) {
    .front-mv__lead {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

.front-mv__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    list-style: none;
    padding: 0;
}
@media screen and (max-width: 480px) {
    .front-mv__badges {
        margin-bottom: 25px;
    }
}

.front-mv__badge {
    background-color: #FFF;
    color: #FF9800; /* チラシのオレンジ */
    border: 1px solid #FF9800;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 20px;
}
@media screen and (max-width: 480px) {
    .front-mv__badge {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* --- CTA（ボタン周り） --- */
.front-mv__cta {
    text-align: center;
    background-color: #FFF;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
@media screen and (max-width: 480px) {
    .front-mv__cta {
        padding: 15px;
    }
}

.front-mv__cta-bubble {
    font-size: 13px;
    font-weight: bold;
    color: #E53935; /* 目立つ赤系 */
    margin-bottom: 10px;
}
@media screen and (max-width: 480px) {
    .front-mv__cta-bubble {
        font-size: 12px;
    }
}

.front-mv__cta-btn {
    display: block;
    background-color: #06C755; /* LINEグリーン */
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    padding: 15px 0;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: opacity 0.3s;
}
.front-mv__cta-btn:hover {
    opacity: 0.8;
}
@media screen and (max-width: 480px) {
    .front-mv__cta-btn {
        font-size: 16px;
        padding: 12px 0;
    }
}

.front-mv__cta-note {
    font-size: 11px;
    color: #777;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-mv__cta-note {
        font-size: 10px;
    }
}

/* --- 画像エリア --- */
.front-mv__image {
    flex: 0 0 400px;
}
@media screen and (max-width: 480px) {
    .front-mv__image {
        width: 100%;
        text-align: center;
    }
}

.front-mv__image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
@media screen and (max-width: 480px) {
    .front-mv__image img {
        max-width: 300px;
    }
}

/* ==================================================
   セクション2：お悩み (front-problem)
================================================== */
.front-problem {
    background-color: #FFFFFF;
    padding: 60px 0;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
    .front-problem {
        padding: 40px 0;
    }
}

.front-problem__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
@media screen and (max-width: 480px) {
    .front-problem__inner {
        padding: 0 15px;
    }
}

.front-problem__header {
    text-align: center;
    margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
    .front-problem__header {
        margin-bottom: 30px;
        text-align: left; /* スマホでは読みやすさ重視で左揃え */
    }
}

.front-problem__title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
    .front-problem__title {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.front-problem__lead {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}
@media screen and (max-width: 480px) {
    .front-problem__lead {
        font-size: 14px;
    }
}

/* 6つのお悩みリスト（PCは2列、スマホは1列） */
.front-problem__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}
@media screen and (max-width: 480px) {
    .front-problem__list {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 30px;
    }
}

.front-problem__item {
    position: relative;
    background-color: #F8F9FA;
    padding: 20px 20px 20px 50px;
    border-radius: 8px;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
@media screen and (max-width: 480px) {
    .front-problem__item {
        padding: 15px 15px 15px 45px;
        font-size: 14px;
    }
}

/* チェックマークの実装（画像不要のCSS描写） */
.front-problem__item::before {
    content: "\2714"; /* Unicodeのチェックマーク */
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #06C755; /* LINEグリーンで安心感 */
    color: #FFF;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
@media screen and (max-width: 480px) {
    .front-problem__item::before {
        left: 10px;
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
}

/* 解決策へのブリッジ（チラシのオレンジを活用） */
.front-problem__bridge {
    background-color: #FFF8E1; /* 薄いオレンジ背景 */
    border: 2px solid #FF9800; /* チラシのオレンジ */
    border-radius: 8px;
    padding: 30px;
    text-align: center;
}
@media screen and (max-width: 480px) {
    .front-problem__bridge {
        padding: 20px 15px;
    }
}

.front-problem__bridge-catch {
    font-size: 18px;
    font-weight: bold;
    color: #0A1931; /* チラシの濃紺 */
    margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
    .front-problem__bridge-catch {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

.front-problem__bridge-text {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-problem__bridge-text {
        font-size: 14px;
        text-align: left; /* スマホでは改行位置が変わるため左揃え */
    }
}

/* ==================================================
   セクション3：解決策＆選ばれる理由 (front-reason)
================================================== */
.front-reason {
    background-color: #F8F9FA;
    padding: 60px 0;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
    .front-reason {
        padding: 40px 0;
    }
}

.front-reason__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
@media screen and (max-width: 480px) {
    .front-reason__inner {
        padding: 0 15px;
    }
}

.front-reason__header {
    text-align: center;
    margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
    .front-reason__header {
        margin-bottom: 30px;
        text-align: left;
    }
}

.front-reason__title {
    font-size: 24px;
    font-weight: bold;
    color: #0A1931; /* チラシの濃紺 */
    line-height: 1.5;
    margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
    .front-reason__title {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.front-reason__lead {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
}
@media screen and (max-width: 480px) {
    .front-reason__lead {
        font-size: 14px;
    }
}

/* --- 4つの理由グリッド --- */
.front-reason__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
    .front-reason__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 35px;
    }
}

.front-reason__card {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 30px 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-top: 4px solid #0A1931;
}
@media screen and (max-width: 480px) {
    .front-reason__card {
        padding: 20px 18px;
    }
}

.front-reason__num {
    display: inline-block;
    background-color: #FF9800; /* チラシのオレンジ */
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 480px) {
    .front-reason__num {
        font-size: 11px;
        margin-bottom: 10px;
    }
}

.front-reason__card-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    margin-bottom: 12px;
}
@media screen and (max-width: 480px) {
    .front-reason__card-title {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

.front-reason__card-text {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-reason__card-text {
        font-size: 13px;
    }
}

/* --- やり取りイメージ図解 --- */
.front-reason__flow {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 35px 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
@media screen and (max-width: 480px) {
    .front-reason__flow {
        padding: 25px 15px;
    }
}

.front-reason__flow-title {
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    color: #0A1931;
    margin-bottom: 25px;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-title {
        font-size: 17px;
        margin-bottom: 20px;
    }
}

.front-reason__flow-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-box {
        flex-direction: column;
        gap: 15px;
    }
}

.front-reason__flow-col {
    flex: 1;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-col {
        padding: 15px;
    }
}

.front-reason__flow-col--user {
    background-color: #E8F5E9; /* LINEをイメージした極薄い緑 */
    border: 1px solid #A5D6A7;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-col--user {
        padding: 15px;
    }
}

.front-reason__flow-col--kuruto {
    background-color: #E1F5FE; /* チラシの水色系 */
    border: 1px solid #81D4FA;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-col--kuruto {
        padding: 15px;
    }
}

.front-reason__flow-label {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding: 6px 10px;
    border-radius: 4px;
    color: #FFFFFF;
    margin: 0 0 15px 0;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-label {
        font-size: 14px;
        margin-bottom: 12px;
    }
}

.front-reason__flow-label--user {
    background-color: #06C755;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-label--user {
        padding: 5px 8px;
    }
}

.front-reason__flow-label--kuruto {
    background-color: #0A1931;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-label--kuruto {
        padding: 5px 8px;
    }
}

.front-reason__flow-list {
    margin: 0;
    padding-left: 20px;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-list {
        padding-left: 18px;
    }
}

.front-reason__flow-item {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
}
.front-reason__flow-item:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-item {
        font-size: 13px;
    }
}

.front-reason__flow-arrow {
    font-size: 24px;
    font-weight: bold;
    color: #FF9800;
    flex-shrink: 0;
}
@media screen and (max-width: 480px) {
    .front-reason__flow-arrow {
        transform: rotate(90deg); /* スマホでは下向き矢印に自動回転 */
        font-size: 20px;
    }
}

/* ==================================================
   セクション4：月額プラン設計 (front-plan)
================================================== */
.front-plan {
    background-color: #FFFFFF;
    padding: 60px 0;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
    .front-plan {
        padding: 40px 0;
    }
}

.front-plan__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
@media screen and (max-width: 480px) {
    .front-plan__inner {
        padding: 0 15px;
    }
}

.front-plan__header {
    text-align: center;
    margin-bottom: 50px;
}
@media screen and (max-width: 480px) {
    .front-plan__header {
        margin-bottom: 35px;
        text-align: left;
    }
}

.front-plan__title {
    font-size: 24px;
    font-weight: bold;
    color: #0A1931;
    line-height: 1.5;
    margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
    .front-plan__title {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.front-plan__lead {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
}
@media screen and (max-width: 480px) {
    .front-plan__lead {
        font-size: 14px;
    }
}

/* --- 3プラン横並びグリッド --- */
.front-plan__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
    .front-plan__grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 30px;
    }
}

.front-plan__card {
    position: relative;
    background-color: #FFFFFF;
    border: 2px solid #B3E5FC;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
@media screen and (max-width: 480px) {
    .front-plan__card {
        border-radius: 8px;
    }
}

.front-plan__card--recommend {
    border: 3px solid #0A1931;
    box-shadow: 0 6px 18px rgba(10, 25, 49, 0.12);
}
@media screen and (max-width: 480px) {
    .front-plan__card--recommend {
        margin-top: 10px;
    }
}

.front-plan__badge {
    position: absolute;
    top: -16px;
    left: -10px;
    background-color: #FF9800; /* チラシのオレンジ */
    color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 14px;
    border-radius: 20px;
    transform: rotate(-8deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 2;
}
@media screen and (max-width: 480px) {
    .front-plan__badge {
        top: -14px;
        left: 10px;
        font-size: 12px;
        padding: 4px 12px;
        transform: rotate(-4deg);
    }
}

.front-plan__card-head {
    background-color: #D0EBF8; /* チラシの水色 */
    padding: 18px 10px;
    text-align: center;
    border-radius: 8px 8px 0 0;
}
@media screen and (max-width: 480px) {
    .front-plan__card-head {
        padding: 15px 10px;
    }
}

.front-plan__card-head--recommend {
    background-color: #0A1931; /* チラシの濃紺 */
}
@media screen and (max-width: 480px) {
    .front-plan__card-head--recommend {
        padding: 18px 10px 15px;
    }
}

.front-plan__card-name {
    font-size: 19px;
    font-weight: bold;
    color: #0A1931;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-plan__card-name {
        font-size: 18px;
    }
}

.front-plan__card-name--recommend {
    color: #FFFFFF;
}
@media screen and (max-width: 480px) {
    .front-plan__card-name--recommend {
        font-size: 19px;
    }
}

.front-plan__card-body {
    padding: 25px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 480px) {
    .front-plan__card-body {
        padding: 20px 15px;
    }
}

.front-plan__card-tag {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #555;
    margin: 0 0 8px 0;
}
@media screen and (max-width: 480px) {
    .front-plan__card-tag {
        font-size: 12px;
    }
}

.front-plan__card-target {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    margin: 0 0 18px 0;
}
@media screen and (max-width: 480px) {
    .front-plan__card-target {
        font-size: 14px;
        margin-bottom: 15px;
    }
}

/* WEBプラス限定特典枠 */
.front-plan__bonus {
    background-color: #FFF9C4; /* チラシの黄色枠 */
    border-radius: 6px;
    padding: 12px 10px;
    text-align: center;
    margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
    .front-plan__bonus {
        padding: 10px 8px;
    }
}

.front-plan__bonus-main {
    font-size: 13px;
    font-weight: bold;
    color: #D32F2F; /* チラシの赤字 */
    line-height: 1.4;
    margin: 0 0 5px 0;
}
@media screen and (max-width: 480px) {
    .front-plan__bonus-main {
        font-size: 13px;
    }
}

.front-plan__bonus-note {
    font-size: 11px;
    color: #333;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-plan__bonus-note {
        font-size: 10px;
    }
}

/* 価格表示エリア */
.front-plan__price-box {
    text-align: center;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 14px 0;
    margin-bottom: 20px;
    color: #333;
}
@media screen and (max-width: 480px) {
    .front-plan__price-box {
        padding: 12px 0;
        margin-bottom: 15px;
    }
}

.front-plan__price-label {
    font-size: 13px;
    font-weight: bold;
    margin-right: 4px;
}
@media screen and (max-width: 480px) {
    .front-plan__price-label {
        font-size: 12px;
    }
}

.front-plan__price-num {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.02em;
}
@media screen and (max-width: 480px) {
    .front-plan__price-num {
        font-size: 28px;
    }
}

.front-plan__price-unit {
    font-size: 16px;
    font-weight: bold;
    margin-left: 2px;
}
@media screen and (max-width: 480px) {
    .front-plan__price-unit {
        font-size: 15px;
    }
}

/* プラン内容リスト */
.front-plan__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-plan__list {
        padding: 0 5px;
    }
}

.front-plan__item {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 16px;
    position: relative;
}
.front-plan__item:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 480px) {
    .front-plan__item {
        font-size: 13px;
        margin-bottom: 10px;
    }
}

.front-plan__item::before {
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #0A1931;
}
@media screen and (max-width: 480px) {
    .front-plan__item::before {
        left: 0;
    }
}

/* --- 月額プラン限定オプション --- */
.front-plan__option {
    border: 2px solid #CCC;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    background-color: #FAFAFA;
}
@media screen and (max-width: 480px) {
    .front-plan__option {
        padding: 18px 15px;
        margin-bottom: 20px;
    }
}

.front-plan__option-title {
    display: inline-block;
    background-color: #0A1931;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 4px;
    margin: 0 0 18px 0;
}
@media screen and (max-width: 480px) {
    .front-plan__option-title {
        font-size: 14px;
        padding: 5px 12px;
        margin-bottom: 15px;
    }
}

.front-plan__option-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-plan__option-list {
        padding: 0;
    }
}

.front-plan__option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #DDD;
    font-size: 14px;
    color: #333;
}
.front-plan__option-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
@media screen and (max-width: 480px) {
    .front-plan__option-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 13px;
    }
}

.front-plan__option-name {
    font-weight: bold;
}
@media screen and (max-width: 480px) {
    .front-plan__option-name {
        font-size: 14px;
    }
}

.front-plan__option-price {
    font-weight: bold;
    color: #0A1931;
}
@media screen and (max-width: 480px) {
    .front-plan__option-price {
        font-size: 13px;
    }
}

/* --- 重要注釈（防衛ライン） --- */
.front-plan__notes {
    background-color: #F8F9FA;
    border-radius: 6px;
    padding: 20px;
}
@media screen and (max-width: 480px) {
    .front-plan__notes {
        padding: 15px;
    }
}

.front-plan__notes-title {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
}
@media screen and (max-width: 480px) {
    .front-plan__notes-title {
        font-size: 12px;
    }
}

.front-plan__notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-plan__notes-list {
        padding: 0;
    }
}

.front-plan__notes-item {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 6px;
}
.front-plan__notes-item:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 480px) {
    .front-plan__notes-item {
        font-size: 11px;
    }
}

/* ==================================================
   セクション5：単発・スポットDXメニュー (front-spot)
================================================== */
.front-spot {
    background-color: #F8F9FA;
    padding: 60px 0;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
    .front-spot {
        padding: 40px 0;
    }
}

.front-spot__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
@media screen and (max-width: 480px) {
    .front-spot__inner {
        padding: 0 15px;
    }
}

.front-spot__header {
    text-align: center;
    margin-bottom: 45px;
}
@media screen and (max-width: 480px) {
    .front-spot__header {
        margin-bottom: 30px;
        text-align: left;
    }
}

.front-spot__badge {
    display: inline-block;
    background-color: #FF9800; /* チラシのオレンジ */
    color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}
@media screen and (max-width: 480px) {
    .front-spot__badge {
        font-size: 12px;
        padding: 4px 12px;
        margin-bottom: 10px;
    }
}

.front-spot__title {
    font-size: 24px;
    font-weight: bold;
    color: #0A1931;
    line-height: 1.5;
    margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
    .front-spot__title {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.front-spot__lead {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
}
@media screen and (max-width: 480px) {
    .front-spot__lead {
        font-size: 14px;
    }
}

/* --- 3カテゴリー横並びグリッド --- */
.front-spot__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
    .front-spot__grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }
}

.front-spot__card {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 25px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-top: 4px solid #FF9800;
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 480px) {
    .front-spot__card {
        padding: 20px 15px;
    }
}

.front-spot__card-head {
    text-align: center;
    border-bottom: 1px solid #EEE;
    padding-bottom: 15px;
    margin-bottom: 18px;
}
@media screen and (max-width: 480px) {
    .front-spot__card-head {
        padding-bottom: 12px;
        margin-bottom: 15px;
    }
}

.front-spot__card-cat {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #FF9800;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
@media screen and (max-width: 480px) {
    .front-spot__card-cat {
        font-size: 11px;
    }
}

.front-spot__card-title {
    font-size: 17px;
    font-weight: bold;
    color: #0A1931;
    line-height: 1.4;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-spot__card-title {
        font-size: 16px;
    }
}

.front-spot__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-spot__list {
        padding: 0;
    }
}

.front-spot__item {
    position: relative;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
    padding-left: 16px;
    margin-bottom: 14px;
}
.front-spot__item:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 480px) {
    .front-spot__item {
        font-size: 13px;
        margin-bottom: 12px;
    }
}

.front-spot__item::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #FF9800;
    font-weight: bold;
    font-size: 12px;
}
@media screen and (max-width: 480px) {
    .front-spot__item::before {
        font-size: 12px;
    }
}

.front-spot__item strong {
    color: #0A1931;
}
@media screen and (max-width: 480px) {
    .front-spot__item strong {
        font-size: 13px;
    }
}

/* --- 料金目安・ご相談ボックス --- */
.front-spot__cta-box {
    background-color: #FFFFFF;
    border: 2px solid #0A1931;
    border-radius: 8px;
    padding: 30px 25px;
    text-align: center;
    margin-bottom: 25px;
}
@media screen and (max-width: 480px) {
    .front-spot__cta-box {
        padding: 20px 15px;
        margin-bottom: 20px;
    }
}

.front-spot__cta-price {
    display: inline-block;
    background-color: #E1F5FE;
    color: #0A1931;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 20px;
    border-radius: 4px;
    margin: 0 0 15px 0;
}
@media screen and (max-width: 480px) {
    .front-spot__cta-price {
        font-size: 14px;
        padding: 6px 12px;
        margin-bottom: 12px;
    }
}

.front-spot__cta-text {
    font-size: 14px;
    color: #333;
    line-height: 1.7;
    margin: 0 0 20px 0;
}
@media screen and (max-width: 480px) {
    .front-spot__cta-text {
        font-size: 13px;
        text-align: left;
        margin-bottom: 18px;
    }
}

.front-spot__cta-btn {
    display: inline-block;
    background-color: #06C755; /* LINEグリーン */
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    padding: 14px 36px;
    border-radius: 8px;
    transition: opacity 0.3s;
}
.front-spot__cta-btn:hover {
    opacity: 0.85;
}
@media screen and (max-width: 480px) {
    .front-spot__cta-btn {
        display: block;
        font-size: 15px;
        padding: 13px 10px;
    }
}

/* --- 重要注釈（防衛ライン） --- */
.front-spot__notes {
    background-color: #FFFFFF;
    border-radius: 6px;
    padding: 20px;
    border: 1px solid #E0E0E0;
}
@media screen and (max-width: 480px) {
    .front-spot__notes {
        padding: 15px;
    }
}

.front-spot__notes-title {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
}
@media screen and (max-width: 480px) {
    .front-spot__notes-title {
        font-size: 12px;
    }
}

.front-spot__notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-spot__notes-list {
        padding: 0;
    }
}

.front-spot__notes-item {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 6px;
}
.front-spot__notes-item:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 480px) {
    .front-spot__notes-item {
        font-size: 11px;
    }
}

/* ==================================================
   セクション6：ご依頼の流れ (front-flow)
================================================== */
.front-flow {
    background-color: #FFFFFF;
    padding: 60px 0;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
    .front-flow {
        padding: 40px 0;
    }
}

.front-flow__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
@media screen and (max-width: 480px) {
    .front-flow__inner {
        padding: 0 15px;
    }
}

.front-flow__header {
    text-align: center;
    margin-bottom: 45px;
}
@media screen and (max-width: 480px) {
    .front-flow__header {
        margin-bottom: 30px;
        text-align: left;
    }
}

.front-flow__title {
    font-size: 24px;
    font-weight: bold;
    color: #0A1931; /* チラシの濃紺 */
    line-height: 1.5;
    margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
    .front-flow__title {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.front-flow__lead {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
}
@media screen and (max-width: 480px) {
    .front-flow__lead {
        font-size: 14px;
    }
}

/* --- 3ステップの横並びレイアウト --- */
.front-flow__steps {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
    .front-flow__steps {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 30px;
    }
}

.front-flow__step {
    flex: 1;
    background-color: #F8F9FA;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 25px; /* 上部のバッジ用余白 */
}
@media screen and (max-width: 480px) {
    .front-flow__step {
        width: 100%;
        padding-top: 20px;
    }
}

/* 矢印のデザイン */
.front-flow__arrow {
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #FF9800; /* チラシのオレンジ */
    font-weight: bold;
}
@media screen and (max-width: 480px) {
    .front-flow__arrow {
        transform: rotate(90deg); /* スマホ時は下向きに変更 */
        font-size: 24px;
        margin: -5px 0;
    }
}

.front-flow__step-head {
    text-align: center;
    padding: 0 15px;
    margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
    .front-flow__step-head {
        margin-bottom: 12px;
    }
}

.front-flow__step-num {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0A1931;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 18px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
@media screen and (max-width: 480px) {
    .front-flow__step-num {
        top: -14px;
        font-size: 13px;
        padding: 4px 16px;
    }
}

.front-flow__step-title {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-flow__step-title {
        font-size: 16px;
    }
}

.front-flow__step-body {
    background-color: #FFFFFF;
    padding: 20px 15px;
    border-top: 1px solid #E0E0E0;
    flex: 1;
    border-radius: 0 0 6px 6px;
}
@media screen and (max-width: 480px) {
    .front-flow__step-body {
        padding: 15px;
    }
}

.front-flow__step-text {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-flow__step-text {
        font-size: 13px;
    }
}

/* --- 重要注釈（防衛ライン） --- */
.front-flow__notes {
    background-color: #FFF8E1; /* 注意を引く薄いオレンジ */
    border-radius: 6px;
    padding: 20px;
}
@media screen and (max-width: 480px) {
    .front-flow__notes {
        padding: 15px;
    }
}

.front-flow__notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-flow__notes-list {
        padding: 0;
    }
}

.front-flow__notes-item {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
}
.front-flow__notes-item:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 480px) {
    .front-flow__notes-item {
        font-size: 12px;
    }
}

.front-flow__notes-item strong {
    color: #D32F2F; /* 赤字で強調 */
}

/* ==================================================
   セクション7：よくある質問 (front-faq)
================================================== */
.front-faq {
    background-color: #F8F9FA;
    padding: 60px 0;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
    .front-faq {
        padding: 40px 0;
    }
}

.front-faq__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
@media screen and (max-width: 480px) {
    .front-faq__inner {
        padding: 0 15px;
    }
}

.front-faq__header {
    text-align: center;
    margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
    .front-faq__header {
        margin-bottom: 30px;
        text-align: left;
    }
}

.front-faq__title {
    font-size: 24px;
    font-weight: bold;
    color: #0A1931; /* チラシの濃紺 */
    line-height: 1.5;
    margin-bottom: 12px;
}
@media screen and (max-width: 480px) {
    .front-faq__title {
        font-size: 20px;
        margin-bottom: 8px;
    }
}

.front-faq__lead {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}
@media screen and (max-width: 480px) {
    .front-faq__lead {
        font-size: 14px;
    }
}

.front-faq__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media screen and (max-width: 480px) {
    .front-faq__list {
        gap: 15px;
    }
}

.front-faq__item {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    border-left: 4px solid #0A1931;
}
@media screen and (max-width: 480px) {
    .front-faq__item {
        padding: 18px 15px;
    }
}

/* --- 質問エリア (Q) --- */
.front-faq__q {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #DDD;
}
@media screen and (max-width: 480px) {
    .front-faq__q {
        gap: 10px;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
}

.front-faq__q-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-color: #0A1931;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
@media screen and (max-width: 480px) {
    .front-faq__q-icon {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }
}

.front-faq__q-text {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-faq__q-text {
        font-size: 15px;
    }
}

/* --- 回答エリア (A) --- */
.front-faq__a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
@media screen and (max-width: 480px) {
    .front-faq__a {
        gap: 10px;
    }
}

.front-faq__a-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-color: #FF9800; /* チラシのオレンジ */
    color: #FFFFFF;
    font-weight: bold;
    font-size: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
@media screen and (max-width: 480px) {
    .front-faq__a-icon {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }
}

.front-faq__a-text {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-faq__a-text {
        font-size: 13px;
    }
}

/* ==================================================
   セクション8：代表メッセージ・運営情報 (front-about)
================================================== */
.front-about {
    background-color: #FFFFFF;
    padding: 60px 0;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
    .front-about {
        padding: 40px 0;
    }
}

.front-about__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
@media screen and (max-width: 480px) {
    .front-about__inner {
        padding: 0 15px;
    }
}

.front-about__header {
    text-align: center;
    margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
    .front-about__header {
        margin-bottom: 30px;
        text-align: left;
    }
}

.front-about__title {
    font-size: 24px;
    font-weight: bold;
    color: #0A1931;
    line-height: 1.5;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-about__title {
        font-size: 20px;
    }
}

/* --- 代表メッセージ枠 --- */
.front-about__message {
    background-color: #F8F9FA;
    border-radius: 8px;
    padding: 35px 30px;
    margin-bottom: 45px;
    border-top: 4px solid #0A1931;
}
@media screen and (max-width: 480px) {
    .front-about__message {
        padding: 25px 18px;
        margin-bottom: 35px;
    }
}

.front-about__message-title {
    font-size: 19px;
    font-weight: bold;
    color: #0A1931;
    line-height: 1.5;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #DDD;
}
@media screen and (max-width: 480px) {
    .front-about__message-title {
        font-size: 17px;
        margin-bottom: 15px;
        padding-bottom: 12px;
    }
}

.front-about__message-text {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin: 0 0 16px 0;
}
@media screen and (max-width: 480px) {
    .front-about__message-text {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 14px;
    }
}

.front-about__message-sign {
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    color: #0A1931;
    margin: 20px 0 0 0;
}
@media screen and (max-width: 480px) {
    .front-about__message-sign {
        font-size: 15px;
        margin-top: 15px;
    }
}

/* --- 運営概要テーブル --- */
.front-about__company {
    width: 100%;
}
@media screen and (max-width: 480px) {
    .front-about__company {
        width: 100%;
    }
}

.front-about__company-title {
    font-size: 18px;
    font-weight: bold;
    color: #0A1931;
    border-left: 4px solid #FF9800;
    padding-left: 12px;
    margin: 0 0 20px 0;
}
@media screen and (max-width: 480px) {
    .front-about__company-title {
        font-size: 17px;
        margin-bottom: 15px;
    }
}

.front-about__table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #DDD;
}
@media screen and (max-width: 480px) {
    .front-about__table {
        display: block;
    }
}

.front-about__th {
    width: 28%;
    background-color: #F8F9FA;
    text-align: left;
    padding: 15px 18px;
    font-size: 14px;
    font-weight: bold;
    color: #0A1931;
    border-bottom: 1px solid #DDD;
    vertical-align: top;
}
@media screen and (max-width: 480px) {
    .front-about__th {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        font-size: 13px;
        border-bottom: none;
    }
}

.front-about__td {
    width: 72%;
    background-color: #FFFFFF;
    padding: 15px 18px;
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    border-bottom: 1px solid #DDD;
}
@media screen and (max-width: 480px) {
    .front-about__td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px 15px;
        font-size: 13px;
    }
}


/* ==================================================
   セクション9：お問い合わせ・クロージングCTA (front-cta)
================================================== */
.front-cta {
    background-color: #0A1931; /* チラシの濃紺 */
    color: #FFFFFF;
    padding: 65px 0;
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 480px) {
    .front-cta {
        padding: 45px 0;
    }
}

.front-cta__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}
@media screen and (max-width: 480px) {
    .front-cta__inner {
        padding: 0 15px;
    }
}

.front-cta__title {
    font-size: 26px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1.5;
    margin: 0 0 18px 0;
}
@media screen and (max-width: 480px) {
    .front-cta__title {
        font-size: 20px;
        margin-bottom: 14px;
    }
}

.front-cta__lead {
    font-size: 15px;
    color: #E0E0E0;
    line-height: 1.7;
    margin: 0 0 35px 0;
}
@media screen and (max-width: 480px) {
    .front-cta__lead {
        font-size: 14px;
        text-align: left;
        margin-bottom: 25px;
    }
}

/* --- LINEボタン＆QRコードの白枠ボックス --- */
.front-cta__box {
    background-color: #FFFFFF;
    color: #333;
    border-radius: 10px;
    padding: 35px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
@media screen and (max-width: 480px) {
    .front-cta__box {
        flex-direction: column;
        padding: 25px 15px;
        gap: 20px;
        margin-bottom: 25px;
    }
}

.front-cta__btn-area {
    flex: 1;
    text-align: center;
}
@media screen and (max-width: 480px) {
    .front-cta__btn-area {
        width: 100%;
    }
}

.front-cta__btn {
    display: block;
    background-color: #06C755; /* LINEグリーン */
    color: #FFFFFF;
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
    padding: 18px 20px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(6, 199, 85, 0.3);
    transition: opacity 0.3s;
}
.front-cta__btn:hover {
    opacity: 0.85;
}
@media screen and (max-width: 480px) {
    .front-cta__btn {
        font-size: 16px;
        padding: 15px 10px;
    }
}

.front-cta__btn-note {
    font-size: 12px;
    color: #666;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-cta__btn-note {
        font-size: 11px;
    }
}

/* QRコードエリア（チラシのオレンジ枠を再現） */
.front-cta__qr-area {
    flex: 0 0 180px;
    text-align: center;
    border-left: 1px solid #DDD;
    padding-left: 30px;
}
@media screen and (max-width: 480px) {
    .front-cta__qr-area {
        flex: none;
        width: 100%;
        border-left: none;
        border-top: 1px dashed #DDD;
        padding-left: 0;
        padding-top: 20px;
    }
}

.front-cta__qr-img {
    width: 120px;
    height: 120px;
    margin: 0 auto 10px;
    border: 4px solid #FF9800; /* チラシのオレンジ枠 */
    border-radius: 10px;
    padding: 6px;
    background-color: #FFFFFF;
}
@media screen and (max-width: 480px) {
    .front-cta__qr-img {
        width: 110px;
        height: 110px;
    }
}

.front-cta__qr-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media screen and (max-width: 480px) {
    .front-cta__qr-img img {
        width: 100%;
        height: 100%;
    }
}

.front-cta__qr-text {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-cta__qr-text {
        font-size: 12px;
    }
}

/* --- 電話窓口エリア --- */
.front-cta__tel {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 20px;
}
@media screen and (max-width: 480px) {
    .front-cta__tel {
        padding: 15px;
    }
}

.front-cta__tel-label {
    font-size: 13px;
    color: #CFD8DC;
    margin: 0 0 6px 0;
}
@media screen and (max-width: 480px) {
    .front-cta__tel-label {
        font-size: 12px;
    }
}

.front-cta__tel-num {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 8px 0;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 480px) {
    .front-cta__tel-num {
        font-size: 20px;
    }
}

.front-cta__tel-num a {
    color: #FFFFFF;
    text-decoration: none;
}
@media screen and (max-width: 480px) {
    .front-cta__tel-num a {
        text-decoration: underline;
    }
}

.front-cta__tel-note {
    font-size: 12px;
    color: #CFD8DC;
    line-height: 1.5;
    margin: 0;
}
@media screen and (max-width: 480px) {
    .front-cta__tel-note {
        font-size: 11px;
        text-align: left;
    }
}

.front-cta__tel-note strong {
    color: #FFB74D; /* 濃紺背景でも読みやすい明るいオレンジ */
}