/* ==================================================
   畳レンタルLP 共通基準スタイル
   ・背景：横幅100%（全幅）
   ・インナーコンテンツ幅：980px
================================================== */

.tatami-lp {
    width: 100%;
    overflow: hidden;
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fbf9f2;
    /* 和風の生成り色 */
}

.tatami-lp section {
    width: 100%;
    padding: 30px 0;
    box-sizing: border-box;
    position: relative;
}

.tatami-lp .lp-inner {
    /* max-width: 980px; */
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* --- 見出し共通パーツ --- */
.tatami-lp .section-sub-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #3a5e11;
    margin-bottom: 8px;
}

.tatami-lp .section-title {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    padding: 14px 20px;
    margin-bottom: 35px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.tatami-lp .title-green {
    background: linear-gradient(135deg, #2c4d00 0%, #4a7510 100%);
    color: #ffe300;
}

.tatami-lp .title-red {
    background: linear-gradient(135deg, #b50000 0%, #e60000 100%);
    color: #fff;
}

.tatami-lp .title-gold {
    background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
    color: #2c4d00;
}

/* ==================================================
   1. Hero（メインビジュアル）
================================================== */
.sec-hero {
    /* background: #2c4d00 linear-gradient(to bottom, #3a5e11, #2c4d00); */
    background: url(img/mv_01.jpg) center center no-repeat;
    background-size: cover;
    /* padding: 70px 0 60px; */
    text-align: center;
    color: #fff;
    padding: 0 !important;
}

.sec-hero .lp-inner {
    max-width: 1600px;
    padding: 0;
}

.hero-area-badge {
    display: inline-block;
    background: #fff;
    color: #2c4d00;
    font-weight: bold;
    font-size: 16px;
    padding: 6px 24px;
    border-radius: 30px;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 64px;
    font-weight: bold;
    color: #ffe300;
    margin: 0 0 20px 0;
    text-shadow: 3px 3px 0 #1a3000, -3px -3px 0 #1a3000, 3px -3px 0 #1a3000, -3px 3px 0 #1a3000;
}

.hero-price {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 25px;
}

.hero-price .price-main {
    font-size: 80px;
    color: #ff3d3d;
    margin: 0 5px;
}

.hero-price .price-tax {
    font-size: 18px;
}

.hero-copy {
    display: inline-block;
    background: #b50000;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 12px 40px;
    border-radius: 40px;
}

/* ==================================================
   2. 基本料金
================================================== */
.sec-price {
    /* background: #f4f0e6; */
    background: url(img/bc_02.jpg) center center no-repeat;
    background-size: cover;
}

.price-cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.price-card {
    flex: 1;
    background: #fff;
    border: 3px solid #2c4d00;
    border-radius: 10px;
    padding: 25px 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.plan-badge {
    background: #2c4d00;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 4px 15px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
}

.plan-num {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.plan-price {
    font-size: 38px;
    font-weight: bold;
    color: #b50000;
}

.plan-price .unit {
    font-size: 14px;
    color: #555;
    display: block;
}

/* =================================================20260803_add=================================================== */

/* ==========================================
   畳レンタル 料金表スタイル（幅860px）
========================================== */
.tatami-price-table {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    border: 7px solid #6c7e37;
    background-color: #ffffff;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

/* タイトルヘッダー */
.tatami-price-header {
    background-color: #6c7e37;
    padding: 12px 10px;
    text-align: center;
}

.tatami-price-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 38px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.2;
}

/* ボディ領域 */
.tatami-price-body {
    padding: 25px 35px 20px;
    box-sizing: border-box;
}

/* 料金行 */
.tatami-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 2px dotted #222222;
}

/* 左側（アイコン・枚数） */
.tatami-price-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tatami-icon {
    display: inline-flex;
    align-items: center;
}

.label-text {
    font-size: 20px;
    font-weight: bold;
    color: #111111;
    letter-spacing: -1px;
}

.co_te {
    display: flex;
    align-items: baseline;
}

.count-text {
    font-size: 45px;
    font-weight: 900;
    color: #045025;
    margin-left: 8px;
    font-family: system-ui;
}

.count-text_2 {
    font-size: 25px;
    font-weight: 900;
    color: #045025;
    margin-left: 8px;
}

/* 右側（価格） */
.tatami-price-right {
    display: flex;
    align-items: baseline;
    color: #c80000;
}

.price-num {
    font-family: "Times New Roman", "游明朝", "Yu Mincho", serif;
    font-size: 64px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -1px;
}

.price-unit {
    font-size: 28px;
    font-weight: bold;
    margin-left: 2px;
}

/* 注意事項 */
.tatami-price-notes {
    margin-top: 5px;
    padding-top: 5px;
}

.tatami-price-notes p {
    margin: 4px 0;
    font-size: 12px;
    font-weight: bold;
    color: #111111;
    line-height: 1.5;
}

/* スマホ表示向けの調整 */
@media (max-width: 768px) {
    .tatami-price-header h2 {
        font-size: 24px;
    }

    .tatami-price-body {
        padding: 0px 15px 15px;
    }

    .tatami-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 2px 0;
    }

    .tatami-price-right {
        align-self: flex-end;
    }

    .count-text {
        font-size: 30px;
    }

    .price-num {
        font-size: 46px;
    }

    .price-unit {
        font-size: 20px;
    }

    .tatami-icon {
        display: none;
    }

    .count-text_2 {
        font-size: 18px;
    }
}



/* ==================================================
   3. インターネット予約割引バナー
================================================== */
.sec-discount {
    /* background: #fff; */
    background: url(img/bc_03.jpg) center center no-repeat;
    background-size: cover;
    padding: 40px 0;
}

.discount-box {
    border: 4px solid #b50000;
    background: #fff6f6;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
}

/* .discount-header {
    background: #b50000;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    padding: 8px 30px;
    display: inline-block;
    border-radius: 30px;
    margin-bottom: 20px;
} */

.discount-items {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.discount-item {
    background: #fff;
    border: 1px solid #f2a8a8;
    padding: 15px 25px;
    border-radius: 8px;
    flex: 1;
    max-width: 260px;
}

.disc-label {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #444;
}

.disc-rate {
    margin: 0;
    font-size: 26px;
    font-weight: bold;
    color: #b50000;
}

.discount-footer {
    font-size: 24px;
    font-weight: bold;
    color: #b50000;
    background: #ffe3e3;
    padding: 10px;
    border-radius: 6px;
}

.discount-footer span {
    font-size: 36px;
    text-decoration: underline;
}

/* =================================================20260803_add=================================================== */

/* ==========================================
   インターネット予約割引バナー（幅860px）
========================================== */
.internet-discount-banner {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    border: 6px solid #e50012;
    background-color: #ffffff;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

/* ヘッダー */
.discount-header {
    background-color: #e50012;
    padding: 10px 15px;
    text-align: center;
}

.discount-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 34px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.2;
}

/* ボディ領域 */
.discount-body {
    padding: 20px 18px 25px;
    box-sizing: border-box;
}

/* 3並列カード枠 */
.discount-cards {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.discount-card {
    flex: 1;
    border: 2px solid #bba465;
    background-color: #ffffff;
    padding: 10px 8px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* タイトルバッジ */
.card-title-badge {
    background-color: #ffda00;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 4px 2px;
    border: 1px solid #e0be00;
    margin-bottom: 6px;
    line-height: 1.2;
}

/* 割引％大文字 */
.card-off-val {
    color: #e50012;
    font-size: 55px;
    font-weight: 900;
    text-align: center;
    line-height: 1;
    margin-bottom: 10px;
    font-family: system-ui;
    letter-spacing: -1px;
}

.card-off-val span {
    font-size: 30px;
}

/* カード内部（画像＋文章） */
.card-flex {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.card-img-wrap {
    width: 85px;
    flex-shrink: 0;
}

.card-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border: 1px solid #e0e0e0;
}

.card-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: #222222;
    text-align: justify;
}

/* 下部 カプセルバナー */
.max-off-capsule {
    padding: 20px 0 0;
    /* margin-top: 22px;
    background-color: #d81b11;
    border-radius: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); */
}

.max-label {
    color: #ffffff;
    font-size: 38px;
    font-weight: bold;
    letter-spacing: 6px;
}


/* スマホ表示対応 */
@media (max-width: 768px) {
    .discount-header h2 {
        font-size: 22px;
    }

    .discount-cards {
        flex-direction: column;
        gap: 15px;
    }

    .card-img-wrap {
        width: 100px;
    }

    .card-desc {
        font-size: 13px;
    }

    .max-off-capsule {
        padding: 20px 0 0;
        gap: 10px;
    }

    .max-label {
        font-size: 24px;
        letter-spacing: 2px;
    }

    .max-value {
        font-size: 46px;
    }
}

/* ==================================================
   4. 対応エリア
================================================== */
.sec-area {
    /* background: #fbf9f2; */
    background: url(img/bc_04.jpg) center center no-repeat;
    background-size: cover;
}

.area-sub {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #2c4d00;
    margin-bottom: 20px;
}

.area-box {
    background: #fff;
    border: 2px solid #2c4d00;
    border-radius: 8px;
    padding: 25px;
}

.area-table {
    width: 100%;
    border-collapse: collapse;
}

.area-table th,
.area-table td {
    padding: 12px 15px;
    border-bottom: 1px dashed #ccc;
    text-align: left;
}

.area-table th {
    width: 20%;
    color: #2c4d00;
    font-size: 18px;
    font-weight: bold;
}

.area-table td {
    font-size: 15px;
}

.area-banner {
    background: #2c4d00;
    color: #ffe300;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    padding: 10px;
    margin-top: 20px;
    border-radius: 4px;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   配送手数料(往復) セクション（幅860px）
========================================== */
.delivery-fee-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    background-color: #eff3e5;
    /* 非常に淡い緑系背景 */
    padding: 35px 0;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
    position: relative;
    overflow: hidden;
}

/* 大見出し */
.delivery-fee-title-wrap {
    text-align: center;
    margin-bottom: 30px;
}

.delivery-fee-title {
    display: inline-block;
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 42px;
    font-weight: bold;
    color: #045025;
    /* 濃い緑 */
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 4px solid #045025;
    width: 70%;
    max-width: 520px;
    letter-spacing: 2px;
}

/* サブ見出し */
.delivery-fee-sub {
    font-size: 22px;
    font-weight: 900;
    color: #111111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    padding-left: 5px;
}

.sub-mark {
    font-size: 18px;
    margin-right: 6px;
}

/* 白枠カード */
.delivery-fee-card {
    border: 1px solid #777777;
    background-color: #ffffff;
    padding: 30px 10px 20px 25px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.fee-content-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

/* 左側：料金リスト */
.fee-text-area {
    flex: 1;
    max-width: 540px;
    z-index: 2;
}

.fee-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

.fee-list li {
    display: flex;
    align-items: baseline;
    font-size: 20px;
    margin-bottom: 14px;
}

.fee-list li:last-child {
    margin-bottom: 0;
}

.pref-name {
    font-weight: 900;
    width: 110px;
    flex-shrink: 0;
    font-size: 22px;
}

.fee-price {
    font-weight: bold;
    color: #111111;
    font-size: 19px;
}

.price-bold {
    font-size: 28px;
    font-weight: 900;
}

.fee-note {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: #222222;
    letter-spacing: -0.3px;
}

/* 右側：画像エリア */
.fee-media-area {
    position: relative;
    width: 325px;
    flex-shrink: 0;
    min-height: 330px;
}

/* 関西地図画像 */
.map-img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

/* 店主画像（最下部にかぶせる配置） */
.owner-guide-img {
    width: 270px;
    height: auto;
    display: block;
    position: absolute;
    bottom: 0;
    right: 15px;
    z-index: 3;
}

/* 最下部帯 */
.delivery-fee-footer-bar {
    background-color: #68793b;
    /* オリーブグリーン */
    padding: 16px 20px;
    margin-top: -10px;
    position: relative;
    z-index: 2;
}

.delivery-fee-footer-bar span {
    color: #f7fa71;
}

.delivery-fee-footer-bar h3 {
    margin: 0;
    color: #ffffff;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 2px;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .delivery-fee-container {
        padding: 20px 10px 0;
    }

    .delivery-fee-title {
        font-size: 26px;
        width: 90%;
    }

    .delivery-fee-sub {
        font-size: 16px;
    }

    .delivery-fee-card {
        padding: 20px 15px;
        background-color: #fff;
        background-image: url(https://deguchi-tatami.jp/wp-content/themes/qualia-child/img/ct_004_map.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .fee-content-flex {
        flex-direction: column;
    }

    .fee-text-area {
        max-width: 100%;
    }

    .fee-list li {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .pref-name {
        width: 85px;
        font-size: 16px;
    }

    .fee-price {
        font-size: 15px;
    }

    .price-bold {
        font-size: 20px;
    }

    .fee-media-area {
        width: 100%;
        min-height: 250px;
        margin-top: 15px;
        display: none;
    }

    .map-img {
        width: 220px;
        position: relative;
        margin: 0 auto;
    }

    .owner-guide-img {
        width: 180px;
        bottom: -8px;
        right: 0;
    }

    .delivery-fee-footer-bar h3 {
        font-size: 22px;
        letter-spacing: 1px;
        line-height: 1.3;
    }

    .fee-note {
        width: 80%;
        font-size: 12px;
    }

    .fee-list {
        padding-left: 20px;
    }
}

/* ==================================================
   5. オプション
================================================== */
.sec-delivery {
    /* background: #fff; */
    background: url(img/bc_05.jpg) center center no-repeat;
    background-size: cover;
}

.delivery-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.delivery-item {
    background: #fbf9f2;
    border: 2px solid #2c4d00;
    border-radius: 8px;
    padding: 20px;
}

.delivery-item h3 {
    color: #2c4d00;
    font-size: 18px;
    margin: 0 0 10px 0;
    border-bottom: 2px dotted #2c4d00;
    padding-bottom: 8px;
}

.delivery-item p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   オプション料金セクション（幅860px）
========================================== */
.option-price-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 30px;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
}

/* メインタイトル（オプション料金） */
.option-title-wrap {
    text-align: center;
    margin-bottom: 45px;
}

.option-title {
    display: inline-block;
    font-size: 38px;
    font-weight: bold;
    color: #045025;
    /* 深緑 */
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 4px solid #045025;
    width: 70%;
    max-width: 500px;
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* 各項目ブロック */
.option-item {
    margin-bottom: 45px;
}

.option-item:last-child {
    margin-bottom: 0;
}

/* 項目ヘッダー（和風飾り付きネイビー見出し） */
.option-item-header {
    border-top: 2px solid #2b3e7a;
    border-bottom: 2px solid #2b3e7a;
    padding: 10px 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 左右の4本線飾り */
.option-item-header::before,
.option-item-header::after {
    content: "";
    display: block;
    width: 45px;
    height: 26px;
    /* 4本線を繰り返すグラデーション */
    background: repeating-linear-gradient(to bottom,
            #2b3e7a 0px,
            #2b3e7a 2px,
            transparent 2px,
            transparent 8px);
    flex-shrink: 0;
}

.option-item-header h3 {
    margin: 0;
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 30px;
    font-weight: bold;
    color: #2b3e7a;
    text-align: center;
    flex-grow: 1;
    letter-spacing: 2px;
}

/* 本文テキスト */
.option-item-content {
    font-size: 16px;
    line-height: 1.85;
    color: #111111;
    font-weight: 500;
    padding: 0 10px;
    font-weight: bold;
}


.option-item-content p {
    margin: 0 0 10px;
}

.option-item-content p:last-child {
    margin-bottom: 0;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .option-price-container {
        padding: 25px 15px;
    }

    .option-title {
        font-size: 28px;
        width: 90%;
    }

    .option-item-header h3 {
        font-size: 22px;
        letter-spacing: 1px;
    }

    .option-item-header::before,
    .option-item-header::after {
        width: 25px;
        height: 20px;
    }

    .option-item-content {
        font-size: 14px;
        line-height: 1.65;
        padding: 0;
    }

    .option-item-content.text-center {
        font-size: 15px;
    }
}



/* ==================================================
   6. 畳の仕様
================================================== */
.sec-spec {
    /* background: #fbf9f2; */
    background: url(img/bc_06.jpg) center center no-repeat;
    background-size: cover;
}

.spec-content {
    display: flex;
    gap: 25px;
}

.spec-table {
    flex: 1;
    border-collapse: collapse;
    background: #fff;
}

.spec-table th,
.spec-table td {
    border: 1px solid #ccc;
    padding: 12px 15px;
    font-size: 14px;
}

.spec-table th {
    background: #2c4d00;
    color: #fff;
    width: 30%;
    text-align: left;
}

.spec-highlight {
    flex: 1;
    background: #ffe300;
    border: 3px solid #2c4d00;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.spec-hl-title {
    font-size: 20px;
    font-weight: bold;
    color: #2c4d00;
    margin-bottom: 12px;
}

.spec-hl-desc {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    margin: 0;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   畳レンタルの畳の仕様（幅860px）
========================================== */
.spec-custom-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
}

/* 1. サブ見出し帯（黒背景） */
.spec-top-header {
    padding: 12px 10px;
    text-align: center;
}

.spec-sub-badge {
    display: inline-block;
    background-color: #ffff00;
    color: #111111;
    font-size: 18px;
    font-weight: bold;
    padding: 2px 18px;
    border-radius: 2px;
    letter-spacing: 1px;
}

/* 2. メインタイトル帯（カーキグリーン背景） */
.spec-main-header {
    background-color: #68793b;
    /* カーキ/オリーブグリーン */
    padding: 12px 15px;
    text-align: center;
}

.spec-main-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.2;
}

/* 3. ボディ領域 */
.spec-body {
    padding: 30px 30px 35px;
    box-sizing: border-box;
    border: solid 5px #68793b;
    background: #fff;
}

/* 仕様リスト＆画像フレックス */
.spec-flex-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.spec-list-wrap {
    flex: 1;
}

.spec-dl {
    margin: 0;
    padding: 0;
}

.spec-row {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.spec-row.align-top {
    align-items: flex-start;
}

.spec-row dt {
    font-size: 24px;
    font-weight: 900;
    color: #111111;
    width: 130px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.spec-mark {
    font-size: 18px;
    margin-right: 6px;
}

.spec-row dd {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    color: #111111;
    line-height: 1.4;
}

.spec-img-wrap {
    width: 360px;
    flex-shrink: 0;
}

.spec-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* 4. 赤太枠のアピール帯 */
.spec-highlight-banner {
    border: 5px solid #ca1800;
    background-color: #f0e8b1;
    /* 淡いクリーム色 */
    border-radius: 40px;
    padding: 12px 20px;
    text-align: center;
    margin-bottom: 30px;
}

.spec-highlight-banner h3 {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.3;
}

.text-red {
    color: #cc0000;
}

.text-green {
    color: #00802b;
}

/* 5. 下部説明文 */
.spec-desc-text {
    font-size: 21px;
    font-weight: bold;
    line-height: 1.8;
    color: #111111;
    text-align: left;
    padding-left: 10px;
}

.spec-desc-text p {
    margin: 0 0 4px;
}

.spec-desc-text p:last-child {
    margin-bottom: 0;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .spec-sub-badge {
        font-size: 14px;
    }

    .spec-main-header h2 {
        font-size: 26px;
    }

    .spec-body {
        padding: 20px 15px 25px;
    }

    .spec-flex-area {
        flex-direction: column-reverse;
        gap: 15px;
        margin-bottom: 10px;
    }

    .spec-img-wrap {
        width: 240px;
    }

    .spec-row dt {
        font-size: 18px;
        width: 100px;
    }

    .spec-row dd {
        font-size: 16px;
    }

    .spec-highlight-banner {
        border-radius: 20px;
        padding: 10px;
        margin-bottom: 15px;
    }

    .spec-highlight-banner h3 {
        font-size: 18px;
    }

    .spec-desc-text {
        font-size: 15px;
        padding-left: 0;
    }
}

/* ==================================================
   7. 電話CTA
================================================== */
.sec-cta-tel {
    /* background: #2c4d00; */
    background: url(img/bc_07.jpg) center center no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 45px 0;
}

.cta-tel-catch {
    font-size: 22px;
    color: #ffe300;
    font-weight: bold;
    margin-bottom: 5px;
}

.cta-tel-sub {
    font-size: 16px;
    margin-bottom: 20px;
}

.cta-tel-btn {
    display: inline-block;
    background: #fff;
    color: #b50000;
    font-size: 42px;
    font-weight: bold;
    padding: 10px 40px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.cta-tel-note {
    font-size: 13px;
    color: #ddd;
    margin-top: 10px;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   電話案内バナー セクション（幅860px）
========================================== */
.call-banner-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.call-banner-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    align-items: center;
}

/* 1. 左側メインエリア */
.call-left-area {
    flex: 1;
    max-width: 560px;
    z-index: 1;
}

.call-title {
    margin: 0 0 8px 0;
    font-size: 34px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 1.2;
}

.call-sub {
    margin: 0 0 15px 0;
    font-size: 20px;
    font-weight: bold;
    color: #e6d56d;
    /* 淡いイエロー */
    letter-spacing: 0.5px;
}

/* 電話リンク */
.call-tel-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 15px;
    width: fit-content;
    transition: opacity 0.2s;
}

.call-tel-link:hover {
    opacity: 0.85;
}

.call-tel-icon {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.call-tel-number {
    font-family: system-ui;
    font-size: 60px;
    font-weight: bold;
    color: #e6d56d;
    /* イエローゴールド */
    letter-spacing: -1px;
    line-height: 1;
}

/* 区切り線 */
.call-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
}

/* 受付時間・住所 */
.call-info-time {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: -0.2px;
    text-align: left;
}

.call-info-address {
    margin: 0;
    font-size: 16.5px;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
    padding-left: 10px;
}

/* 2. 右側エリア（写真＋縦書き文字） */
.call-right-area {
    position: relative;
    width: 300px;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.owner-call-photo-wrap {
    width: 300px;
    margin-bottom: -20px;
    z-index: 1;
}

.owner-call-photo-wrap .pc_none {
    display: none;
}

.owner-call-photo-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右端の縦書きメッセージ */
.vertical-copy {
    writing-mode: vertical-rl;
    /* 縦書き設定 */
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 2px;
    line-height: 1.5;
    white-space: nowrap;
    position: absolute;
    right: -10px;
    top: 10px;
    z-index: 2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* スマホ表示対応 */
@media (max-width: 768px) {

    .call-banner-flex {
        flex-direction: column;
        align-items: center;
    }

    .call-left-area {
        max-width: 100%;
        text-align: center;
        padding-top: 40px;
    }

    .call-title {
        font-size: 22px;
    }

    .call-sub {
        font-size: 13px;
    }

    .call-tel-link {
        margin: 0 auto 15px;
    }

    .call-tel-number {
        font-size: 38px;
    }

    .call-tel-icon svg {
        width: 32px;
        height: 32px;
    }

    .call-info-time,
    .call-info-address {
        font-size: 13.5px;
    }

    .call-right-area {
        width: 100%;
        justify-content: center;
        margin-top: -5px;
    }

    .owner-call-photo-wrap {
        width: 160px;
        margin-bottom: -15px;
    }

    .vertical-copy {
        writing-mode: horizontal-tb;
        /* スマホでは横書きに切り替え */
        position: static;
        font-size: 14px;
        text-align: center;
        margin-top: 5px;
    }

    .owner-call-photo-wrap .sp_none {
        display: none;
    }

    .owner-call-photo-wrap .pc_none {
        display: block;
    }
}

/* ==================================================
   8. トラブル訴求
================================================== */
.sec-trouble {
    /* background: #fbeae8; */
    background: url(img/bc_08.jpg) center center no-repeat;
    background-size: cover;
}

.trouble-title {
    text-align: center;
    color: #b50000;
    font-size: 28px;
    margin-bottom: 25px;
}

.trouble-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 800px;
}

.trouble-list li {
    background: #fff;
    padding: 16px 20px 16px 50px;
    margin-bottom: 12px;
    border-radius: 6px;
    border-left: 6px solid #b50000;
    position: relative;
    font-size: 16px;
    font-weight: bold;
}

.trouble-list li::before {
    content: "✖";
    position: absolute;
    left: 20px;
    color: #b50000;
}


/* =================================================20260803_add=================================================== */
/* ==========================================
   安さだけで選ぶと、こんなトラブルも…（幅860px）
========================================== */
.trouble-warning-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
}

/* ヘッダーエリア */
.trouble-warning-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    padding: 10px 10px 0;
}

.trouble-warning-title-wrap {
    padding-bottom: 25px;
}

/* キャッチコピー */
.trouble-warning-title {
    margin: 0;
    font-size: 46px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.4;
    letter-spacing: 1px;
}

/* 「安さ」の上のドット（傍点） */
.dot-text {
    -webkit-text-emphasis: filled circle #ffffff;
    text-emphasis: filled circle #ffffff;
    -webkit-text-emphasis-position: over right;
    text-emphasis-position: over right;
}

/* 黄色文字ハイライト */
.text-yellow {
    color: #fce881;
    /* 淡いイエロー */
    font-size: 52px;
}

/* 男性写真のラップ */
.trouble-warning-img-wrap {
    width: 320px;
    flex-shrink: 0;
    margin-bottom: -15px;
    /* 下の枠にかぶせる配置 */
    z-index: 2;
}

.trouble-warning-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* 下部枠カード */
.trouble-warning-card {
    border: 6px solid #caa838;
    /* 金/黄土色の枠 */
    background-color: #ffffff;
    padding: 35px 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.trouble-warning-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trouble-warning-list li {
    font-size: 25px;
    font-weight: 900;
    line-height: 1.75;
    color: #111111;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.trouble-warning-list li:last-child {
    margin-bottom: 0;
}

/* 赤字ハイライト */
.trouble-warning-list .text-red {
    color: #d30000;
    font-weight: 900;
    font-size: 25px;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .trouble-warning-container {
        padding: 20px 10px;
    }

    .trouble-warning-header {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
    }

    .trouble-warning-title-wrap {
        padding-bottom: 10px;
        text-align: center;
    }

    .trouble-warning-title {
        font-size: 28px;
    }

    .text-yellow {
        font-size: 32px;
    }

    .trouble-warning-img-wrap {
        width: 200px;
        margin-bottom: 0;
    }

    .trouble-warning-card {
        border-width: 4px;
        padding: 20px 15px;
    }

    .trouble-warning-list li {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 10px;
    }

    .trouble-warning-list .text-red {
        font-size: 15px;
    }

    .sec-trouble {
        background: url(img/ct_008_man_sp.jpg) center center no-repeat;
        background-size: cover;
        background-position-y: top;
    }

    .trouble-warning-img-wrap img {
        display: none;
    }
}

/* ==================================================
   9. 解決・強み
================================================== */
.sec-solution {
    /* background: #fff; */
    background: url(img/bc_09.jpg) center center no-repeat;
    background-size: cover;
}

.solution-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 40px;
    max-width: 800px;
}

.solution-list li {
    background: #f2f7ea;
    padding: 16px 20px 16px 50px;
    margin-bottom: 12px;
    border-radius: 6px;
    border-left: 6px solid #2c4d00;
    position: relative;
    font-size: 16px;
    font-weight: bold;
}

.solution-list li::before {
    content: "✔";
    position: absolute;
    left: 20px;
    color: #2c4d00;
}

.solution-q-box {
    background: #fbf9f2;
    border: 2px dashed #2c4d00;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

.q-balloon {
    background: #fff;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    margin: 6px;
}

.q-title {
    font-size: 20px;
    font-weight: bold;
    color: #2c4d00;
    margin: 15px 0;
}

.sol-answer-banner {
    background: #b50000;
    color: #fff;
    font-size: 22px;
    padding: 12px;
    border-radius: 6px;
    margin-top: 15px;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   出口畳店は、安くて安心です！（幅860px）
========================================== */
.solution-custom-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
}

/* 1. 最上部ヘッダー（黒背景） */
.sol-top-header {
    padding: 15px 10px;
    text-align: center;
}

.sol-top-header h2 {
    margin: 0;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.2;
}

.sol-top-header .text-green {
    color: #005027;
    /* 鮮やかな緑 */
}

.sol-top-header .text-red {
    color: #d80000;
    font-size: 44px;
    /* 鮮やかな赤 */
}

/* ボディ領域 */
.sol-body {
    padding: 20px 0;
    box-sizing: border-box;
    background: #fff;
    border: solid 5px #b58480;
}

/* 2. 赤チェックリスト */
.sol-check-box {
    /* border: 2px solid #d37c7c; */
    padding: 20px 60px;
    border-radius: 4px;
    background-color: #ffffff;
    margin-bottom: 20px;
}

.sol-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sol-check-list .text-red {
    font-size: 22px;
}

.sol-check-list li {
    font-size: 22px;
    font-weight: bold;
    color: #111111;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sol-check-list li:last-child {
    margin-bottom: 0;
}

.check-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* 3. 初心者マーク帯 */
.sol-beginner-bar {
    background-color: #b58480;
    /* くすみピンクブラウン */
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    /* border-radius: 4px; */
    margin-bottom: 25px;
}

.beginner-icon {
    flex-shrink: 0;
}

.beginner-text {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
}

/* 4. 店主の問いかけメッセージ */
.sol-question-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: 15px;
    padding: 10px 0;
}

.owner-img-wrap {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background-color: #045025;
    /* 緑背景 */
    overflow: hidden;
    flex-shrink: 0;
}

.owner-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.question-text-wrap {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.35;
    color: #111111;
}

.question-text-wrap .text-red {
    font-size: 42px;
}

.marker-yellow {
    background: linear-gradient(transparent 50%, #ffff00 50%);
    padding: 0 4px;
}

.text-red {
    color: #cc0000;
}

/* 5. カーキ色サブ見出し帯 */
.sol-green-bar {
    background-color: #718244;
    /* カーキグリーン */
    padding: 10px 15px;
    text-align: center;
    border-radius: 4px;
    margin: 30px;
}

.sol-green-bar h3 {
    margin: 0;
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* 6. お悩みチェックリスト ＆ 女性画像 */
.sol-trouble-area {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    padding: 10px 60px 50px;
}

.sol-square-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.sol-square-check-list li {
    font-size: 24px;
    font-weight: bold;
    color: #111111;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sol-square-check-list li .text-red {
    font-size: 24px;
}

.sol-square-check-list li:last-child {
    margin-bottom: 0;
}

.sq-icon {
    font-size: 22px;
    color: #555555;
    flex-shrink: 0;
}

.woman-img-wrap {
    width: 240px;
    flex-shrink: 0;
    margin-bottom: -10px;
}

.woman-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* 7. 最下部フッター帯 */
.sol-footer-bar {
    background-color: #b58480;
    /* くすみピンクブラウン */
    padding: 20px 20px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* margin-top: 20px; */
}

.owner-footer-img {
    width: 180px;
    flex-shrink: 0;
    margin-right: 15px;
}

.owner-footer-img img {
    width: 100%;
    height: auto;
    display: block;
}

.sol-footer-text {
    color: #ffffff;
    font-weight: 900;
    line-height: 1.25;
}

.footer-line-1 {
    font-size: 38px;
    letter-spacing: 2px;
}

.footer-line-2 {
    font-size: 38px;
    letter-spacing: 2px;
}

.text-yellow {
    color: #ffff00;
}

.text-big {
    font-size: 58px;
    color: #ffffff;
}

.sp-only {
    display: none;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .sol-top-header h2 {
        font-size: 24px;
    }

    .sol-body {
        padding: 15px 12px 0;
    }

    .sol-check-box {
        padding: 15px;
    }

    .sol-check-list li {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .sol-beginner-bar {
        padding: 10px;
        gap: 10px;
    }

    .beginner-text {
        font-size: 15px;
    }

    .sp-only {
        display: inline;
    }

    .sol-question-area {
        flex-direction: column;
        gap: 15px;
    }

    .owner-img-wrap {
        width: 130px;
        height: 130px;
    }

    .question-text-wrap {
        font-size: 24px;
        text-align: center;
    }

    .question-text-wrap .text-red {
        font-size: 24px;

    }

    .sol-green-bar h3 {
        font-size: 16px;
    }

    .sol-trouble-area {
        /* flex-direction: column; */
        align-items: center;
        flex-direction: column-reverse;
        padding: 0 10px 20px;
    }

    .sol-square-check-list li {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .woman-img-wrap {
        width: 160px;
        /* margin-top: 15px; */
    }

    .sol-footer-bar {
        /* flex-direction: column; */
        padding: 15px 10px;
        /* text-align: center; */
        align-items: flex-end;
    }

    .owner-footer-img {
        width: 120px;
        margin-right: 0;
        margin-bottom: 0;
    }

    .footer-line-1 {
        font-size: 18px;
    }

    .footer-line-2 {
        font-size: 22px;
    }

    .text-big {
        font-size: 34px;
    }

    .sol-top-header .text-red {
        font-size: 24px;
    }

    .sol-check-list .text-red {
        font-size: 15px;
    }

    .sol-square-check-list li .text-red {
        font-size: 15px;
    }

    .sol-green-bar {
        margin: 10px 20px;
    }

    .sol-beginner-bar {
        margin-bottom: 15px;
    }

    .woman-img-wrap {
        margin-bottom: -50px;
    }
}

/* ==================================================
   10. 選ばれる理由
================================================== */
.sec-reasons {
    /* background: #fbf9f2; */
    background: url(img/bc_10.jpg) center center no-repeat;
    background-size: cover;
    background-position-y: top;
}

.reasons-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.reason-card {
    background: #fff;
    border: 2px solid #b8860b;
    border-radius: 8px;
    padding: 30px 20px 20px;
    position: relative;
}

.reason-num {
    position: absolute;
    top: -18px;
    left: 20px;
    background: #b8860b;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reason-card h3 {
    font-size: 18px;
    color: #2c4d00;
    margin: 10px 0 12px;
}

.reason-card p {
    font-size: 14px;
    color: #555;
    margin: 0;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   当社の畳レンタルが選ばれる理由（幅860px）
========================================== */
.reasons-custom-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    /* background-color: #000000; */
    /* 黒背景 */
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
    padding-bottom: 20px;
}

/* ヘッダー領域 */
.reasons-custom-header {
    padding: 35px 20px 15px;
    text-align: center;
}

/* イエローマーカーバッジ */
.reasons-sub-badge {
    display: inline-block;
    background-color: #ffff00;
    color: #111111;
    font-size: 16px;
    font-weight: bold;
    padding: 3px 15px;
    border-radius: 2px;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

/* メインタイトル */
.reasons-main-title {
    margin: 0;
    font-size: 52px;
    font-weight: 900;
    color: #b50000;
    /* 赤・エンジ */
    line-height: 1.2;
    letter-spacing: 2px;
    /* 文字のぼかし・影表現 */
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 2px 2px 0px #ffffff, -2px -2px 0px #ffffff;
}

/* カード領域 */
.reasons-custom-body {
    padding: 10px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 1ブロック（白カード） */
.reasons-card {
    background-color: #ffffff;
    padding: 25px 30px;
    box-sizing: border-box;
    border-radius: 4px;
}

/* 見出し行 */
.reasons-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.reasons-num-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.reasons-card-title {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    color: #a31818;
    /* ダークレッド */
    letter-spacing: 1px;
    line-height: 1.3;
}

/* 本文領域 */
.reasons-card-content {
    font-size: 16px;
    line-height: 1.8;
    color: #111111;
    font-weight: 500;
    font-weight: bold;
}

.reasons-card-content p {
    margin: 0 0 8px;
}

.reasons-card-content p:last-child {
    margin-bottom: 0;
}

/* 強調グリーンテキスト */
.text-green {
    color: #045025;
    font-weight: bold;
}

.reasons-custom-header h2 {
    text-align: left;
}

.reasons-custom-header h2 img {
    width: 75%;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .reasons-main-title {
        font-size: 32px;
    }

    .reasons-sub-badge {
        font-size: 13px;
    }

    .reasons-custom-body {
        padding: 10px 10px 15px;
    }

    .reasons-card {
        padding: 18px 15px;
    }

    .reasons-card-title {
        font-size: 20px;
    }

    .reasons-num-icon svg {
        width: 45px;
        height: 45px;
    }

    .reasons-card-content {
        font-size: 14px;
        line-height: 1.65;
    }

    .riyuu {
        background-position-x: 63%;
    }

    .reasons-custom-header h2 img {
        width: 100%;
    }

    .tegaki img {
        max-width: 120%;
    }
}

/* ==================================================
   11. 畳のプロ（メッセージ）
================================================== */
.sec-message {
    /* background: #2c4d00; */
    background: url(img/bc_11.jpg) center center no-repeat;
    background-size: cover;
    color: #fff;
}

.msg-box {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.msg-title {
    font-size: 26px;
    color: #ffe300;
    margin-bottom: 20px;
}

.msg-box p {
    font-size: 15px;
    margin-bottom: 15px;
}

.msg-bold {
    font-weight: bold;
    color: #ffe300;
    font-size: 18px;
}

.msg-sub-title {
    font-size: 22px;
    color: #ffe300;
    border-bottom: 1px solid #ffe300;
    display: inline-block;
    padding-bottom: 5px;
    margin: 30px 0 15px;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   畳のプロが管理するレンタル畳！（幅860px）
========================================== */
.pro-tatami-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    /* background-color: #ffffff;
    border: 4px double #2b3e7a; */
    /* 外枠の2重線 */
    /* border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); */
    background-image: url(https://deguchi-tatami.jp/wp-content/themes/qualia-child/img/ct_011_frame.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 最上部ヘッダー（職人背景付き） */
.pro-tatami-header {
    position: relative;
    padding: 50px 20px 0;
    text-align: center;
    /* background-color: #f7f9fa; */
    overflow: hidden;
}

.pro-tatami-header h2 {
    padding-top: 55px;
}

/* 背景写真の透かし表示 */
.header-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    /* 透過率 */
    pointer-events: none;
}

.pro-tatami-main-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 42px;
    font-weight: 900;
    color: #045025;
    /* 濃い緑 */
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff, -1px 1px 0px #ffffff;
    padding: 100px 0 30px;
}

/* ボディ領域 */
.pro-tatami-body {
    padding: 0 35px 40px;
    box-sizing: border-box;
}

/* 文章ブロック */
.text-block {
    font-size: 16px;
    line-height: 1.85;
    color: #111111;
    font-weight: 500;
    margin-bottom: 30px;
    text-align: initial;
    padding: 20px 0 0 15px;
    font-weight: bold;
}

.text-block p {
    margin: 0 0 10px;
}

/* 強調文字（緑色） */
.text-green {
    color: #045025;
    font-weight: bold;
}

/* 二重枠カプセル見出し */
.capsule-title-wrap {
    text-align: center;
    margin: 0 0 25px;
}

.capsule-title {
    display: inline-block;
    font-size: 34px;
    font-weight: 900;
    color: #111111;
    margin: 0;
    padding: 8px 45px;
    background-color: #ffffff;
    border: 3px double #5a7337;
    /* 緑の二重線枠 */
    border-radius: 50px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    letter-spacing: 1px;
}

.capsule-title .green-text {
    color: #045025;
}

/* “畳の専門店だからこそ…” の引用強調 */
.highlight-quote {
    font-size: 18px;
    margin: 15px 0 !important;
}

.pro-tatami-header h2 img {
    width: 75%;
}

.capsule-title-wrap h3 img {
    width: 75%;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .pro-tatami-container {
        border-width: 2px;
        border-radius: 8px;
    }

    .pro-tatami-header {
        padding: 35px 15px 0;
    }

    .pro-tatami-main-title {
        font-size: 26px;
        padding: 20px 0;
    }

    .pro-tatami-body {
        padding: 0 15px 25px;
    }

    .text-block {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 0;
        padding: 20px;
    }

    .capsule-title-wrap {
        margin: 0 0 5px;
    }

    .capsule-title {
        font-size: 20px;
        padding: 6px 15px;
        border-width: 2px;
    }

    .highlight-quote {
        font-size: 15px;
    }

    .pro-tatami-container {
        width: 100%;
        margin: 0 auto;
        background-image: url(https://deguchi-tatami.jp/wp-content/themes/qualia-child/img/ct_011_frame_sp.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .pro-tatami-header h2 img {
        width: 100%;
    }

    .capsule-title-wrap h3 img {
        width: 100%;
    }
}

/* ==================================================
   12. ご利用シーン
================================================== */
.sec-scenes {
    /* background: #fff; */
    background: url(img/bc_12.jpg) center center no-repeat;
    background-size: cover;
}

.scenes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.scene-item {
    background: #fbf9f2;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px 15px;
    text-align: center;
}

.scene-num {
    background: #2c4d00;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.scene-item h3 {
    font-size: 16px;
    color: #2c4d00;
    margin: 0 0 10px;
}

.scene-item p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   ご利用シーン セクション（幅860px）
========================================== */
.scene-custom-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px 40px;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
}

/* 1. サブ見出し */
.scene-sub-title {
    text-align: center;
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 32px;
    font-weight: bold;
    color: #111111;
    margin-bottom: 18px;
    letter-spacing: 1px;
}

/* 黄色マーカー（蛍光ペン効果） */
.marker-yellow {
    background: linear-gradient(transparent 50%, #ffff00 50%);
    padding: 0 4px;
}

/* 2. メインタイトル帯（ネイビーグラデーション） */
.scene-main-header {
    background: linear-gradient(to bottom, #2b3e7a 0%, #152244 100%);
    border-top: 2px solid #5d74b8;
    border-bottom: 2px solid #5d74b8;
    padding: 12px 10px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.scene-main-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 6px;
    line-height: 1.2;
}

/* 3. グリッド配置（2列×2行） */
.scene-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 30px;
}

/* 各シーンカード */
.scene-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ナンバリングアイコン */
.scene-num-icon {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
}

/* カードタイトル */
.scene-card-title {
    margin: 0 0 12px 0;
    font-size: 32px;
    font-weight: 900;
    color: #1c3360;
    /* 濃紺 */
    text-align: center;
    letter-spacing: 1px;
}

/* 写真枠 */
.scene-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid #cccccc;
    margin-bottom: 12px;
}

.scene-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 説明文 */
.scene-desc {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #111111;
    line-height: 1.5;
    width: 100%;
    text-align: left;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .scene-custom-container {
        padding: 20px 10px 30px;
    }

    .scene-sub-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .scene-main-header h2 {
        font-size: 26px;
        letter-spacing: 3px;
    }

    .scene-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .scene-card-title {
        font-size: 24px;
    }

    .scene-desc {
        font-size: 15px;
    }

    .scene-num-icon svg {
        width: 55px;
        height: 55px;
    }
}


/* ==================================================
   13. 導入事例
================================================== */
.sec-cases {
    /* background: #fbf9f2; */
    background: url(img/bc_13.jpg) center center no-repeat;
    background-size: cover;
}

.cases-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.case-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 6px solid #2c4d00;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    position: relative;
}

.case-num {
    display: inline-block;
    background: #2c4d00;
    color: #fff;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.case-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #2c4d00;
}

.case-card p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* ==================================================
   14. ご利用の流れ
================================================== */
.sec-flow {
    /* background: #fff; */
    background: url(img/bc_14.jpg) center center no-repeat;
    background-size: cover;
}

.flow-steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 800px;
    margin: 0 auto;
}

.flow-step {
    display: flex;
    align-items: center;
    background: #fbf9f2;
    border: 2px solid #2c4d00;
    border-radius: 8px;
    padding: 15px 20px;
    gap: 20px;
}

.step-badge {
    width: 80px;
    /* height: 80px; */
}

.step-content h3 {
    margin: 0 0 5px;
    font-size: 18px;
    color: #2c4d00;
}

.step-content p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   ご利用の流れ セクション（和紙調背景・幅860px）
========================================== */
.flow-washi-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
}

/* 1. サブ見出し */
.flow-sub-title {
    text-align: center;
    font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 32px;
    font-weight: bold;
    color: #111111;
    margin-bottom: 18px;
    letter-spacing: 2px;
}

/* 2. メインタイトル帯（カーキグラデーション） */
.flow-main-header {
    background: linear-gradient(to bottom, #728249 0%, #566433 100%);
    border-top: 2px solid #91a265;
    border-bottom: 2px solid #91a265;
    padding: 12px 10px;
    text-align: center;
    margin-bottom: 35px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.flow-main-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 8px;
    line-height: 1.2;
}

/* 3. STEPカードリスト */
.flow-steps-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.flow-step-card {
    position: relative;
    background-color: #ffffff;
    border: 4px solid #6b7a40;
    /* カーキの外枠 */
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.step-card-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 左：STEPバッジ */
.step-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 中央：テキスト領域 */
.step-text-wrap {
    flex: 1;
}

.step-title {
    margin: 0 0 10px 0;
    font-size: 36px;
    font-weight: 900;
    color: #6b7a40;
    /* カーキグリーン */
    letter-spacing: 1px;
    line-height: 1.2;
}

.step-desc {
    margin: 0;
    font-size: 16.5px;
    font-weight: bold;
    line-height: 1.7;
    color: #111111;
}

/* 右：写真 */
.step-img-wrap {
    width: 240px;
    height: 130px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #cccccc;
}

.step-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 4. 下向き矢印（凸型パーツ） */
.step-arrow-wrap {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    z-index: 2;
}

.step-arrow-border {
    position: absolute;
    top: -20px;
    left: -24px;
    width: 0;
    height: 0;
    border-left: 34px solid transparent;
    border-right: 34px solid transparent;
    border-top: 34px solid #6b7a40;
    /* 枠線と同じ色 */
}

.step-arrow-fill {
    position: absolute;
    top: -22px;
    left: -20px;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #ffffff;
    /* 内側の白 */
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .flow-washi-container {
        padding: 20px 10px 30px;
    }

    .flow-sub-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .flow-main-header h2 {
        font-size: 26px;
        letter-spacing: 4px;
    }

    .flow-steps-list {
        gap: 25px;
    }

    .flow-step-card {
        padding: 15px 12px;
        border-width: 3px;
    }

    .step-card-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .step-badge {
        align-self: center;
        width: 45px;
    }

    .step-badge svg {
        width: 55px;
        height: 55px;
    }

    .step-title {
        font-size: 24px;
        text-align: center;
    }

    .step-desc {
        font-size: 14px;
        line-height: 1.6;
    }

    .step-img-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* ==================================================
   15. よくある質問
================================================== */
.sec-faq {
    /* background: #fbf9f2; */
    background: url(img/bc_15.jpg) center center no-repeat;
    background-size: cover;
}

.faq-list {
    max-width: 850px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.faq-q {
    font-size: 17px;
    font-weight: bold;
    color: #2c4d00;
    margin-bottom: 10px;
}

.faq-q span {
    color: #b50000;
    font-size: 22px;
    margin-right: 10px;
}

.faq-a {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
}

.faq-a span {
    color: #2c4d00;
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   よくある質問セクション（幅860px）
========================================== */
.faq-custom-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #111111;
    padding-bottom: 300px;
}

/* 紺色グラデーションヘッダー */
.faq-custom-header {
    background: linear-gradient(to bottom, #1d3362 0%, #0e1e3f 100%);
    border-top: 3px solid #4a6699;
    border-bottom: 3px solid #4a6699;
    padding: 14px 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.faq-custom-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 34px;
    font-weight: bold;
    letter-spacing: 8px;
    line-height: 1.2;
}

/* FAQボディ領域 */
.faq-custom-body {
    padding: 35px 25px 20px;
    box-sizing: border-box;
}

/* 1セット（Q&A） */
.faq-custom-item {
    margin-bottom: 35px;
    border-bottom: 1px dotted #cccccc;
    padding-bottom: 25px;
}

.faq-custom-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Q行 */
.faq-q-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 35px;
}

.faq-q-text {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: #1c3360;
    /* 濃紺 */
    line-height: 1.4;
}

/* A行 */
.faq-a-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.faq-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-a-text {
    font-size: 16px;
    line-height: 1.7;
    color: #222222;
    padding-top: 4px;
    font-weight: bold;
}

.faq-a-text p {
    margin: 0 0 4px;
}

.faq-a-text p:last-child {
    margin-bottom: 0;
}

/* 赤字ハイライト */
.text-red {
    color: #cc0000;
    font-weight: bold;
    /* font-size: 15px; */
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .faq-custom-header h2 {
        font-size: 24px;
        letter-spacing: 4px;
    }

    .faq-custom-body {
        padding: 20px 15px;
    }

    .faq-q-text {
        font-size: 18px;
    }

    .faq-a-text {
        font-size: 14px;
    }

    .faq-icon-wrap svg {
        width: 32px;
        height: 32px;
    }

    .faq-custom-container {
        padding-bottom: 180px;
    }

}

/* ==================================================
   16. ボトムCTA
================================================== */
.sec-bottom-cta {
    /* background: #f4f0e6; */
    background: url(img/bc_16.jpg) center center no-repeat;
    background-size: cover;
}

.contact-card {
    background: #fff;
    border: 3px solid #2c4d00;
    border-radius: 12px;
    padding: 35px 20px;
    margin-top: 40px;
    text-align: center;
}

.contact-area-lead {
    font-size: 16px;
    font-weight: bold;
    color: #2c4d00;
}

.contact-title {
    font-size: 32px;
    color: #2c4d00;
    margin: 10px 0 15px;
}

.contact-desc {
    font-size: 15px;
    color: #444;
    margin-bottom: 25px;
}

.contact-tel-btn {
    display: inline-block;
    background: #b50000;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
}

.contact-tel-btn .tel-num {
    display: block;
    font-size: 32px;
    font-weight: bold;
}

.contact-tel-btn .tel-note {
    display: block;
    font-size: 12px;
    color: #ffcccc;
}

.shop-name {
    font-size: 22px;
    font-weight: bold;
    color: #2c4d00;
    margin-bottom: 20px;
}

.web-btn {
    display: inline-block;
    background: #ffe300;
    color: #2c4d00;
    font-weight: bold;
    font-size: 20px;
    padding: 14px 45px;
    border-radius: 40px;
    border: 2px solid #2c4d00;
    text-decoration: none;
}

/* =================================================20260803_add=================================================== */
/* ==========================================
   お問い合わせセクション（幅860px）
========================================== */
.contact-custom-container {
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    padding-top: 30px;
}

/* 1. 上部フレックス配置 */
.contact-top-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    align-items: flex-end;
}

/* 左側メインエリア */
.contact-main-area {
    flex: 1;
    max-width: 560px;
}

.contact-sub-lead {
    margin: 0 0 5px 0;
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.contact-main-title {
    margin: 0 0 15px 0;
    font-size: 52px;
    font-weight: 900;
    color: #e6d56d;
    /* イエローゴールド */
    letter-spacing: 2px;
    line-height: 1;
}

.contact-lead-text {
    margin: 0 0 25px 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.7;
    color: #ffffff;
}

/* 電話エリア */
.contact-tel-block {
    width: 100%;
}

.tel-label-badge {
    background-color: #e6d56d;
    color: #111111;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.tel-link-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 8px;
}

.tel-icon {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.tel-number {
    font-family: sans-serif;
    font-size: 55px;
    font-weight: bold;
    color: #e6d56d;
    /* イエローゴールド */
    line-height: 1;
}

.tel-time-info {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: -0.2px;
}

/* 右側エリア（写真 ＆ メールボタン） */
.contact-side-area {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.owner-photo-wrap {
    width: 220px;
    margin-bottom: -2px;
    z-index: 1;
}

.owner-photo-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* メールフォームボタン（和風装飾枠） */
.mail-form-btn {
    width: 100%;
    background: linear-gradient(to bottom, #594c2d 0%, #3d331d 100%);
    border: 3px double #c9b165;
    /* ゴールドの二重枠 */
    box-shadow: inset 0 0 0 2px #3d331d, 0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 14px 10px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    z-index: 2;
    transition: transform 0.2s, filter 0.2s;
}

.mail-form-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-text-main {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.btn-text-sub {
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
}

/* 最下部：店舗情報 */
.contact-shop-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding-top: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.shop-name-logo {
    font-size: 50px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 2px;
    white-space: nowrap;
}

.shop-info-divider {
    width: 2px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.shop-info-text {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.6;
    color: #ffffff;
}

.company_info {
    width: 300px;
    margin: 40px auto;
}

/* スマホ表示対応 */
@media (max-width: 768px) {

    .contact-top-flex {
        flex-direction: column;
        align-items: center;
    }

    .contact-main-area {
        max-width: 100%;
    }

    .contact-sub-lead {
        font-size: 16px;
    }

    .contact-main-title {
        font-size: 36px;
    }

    .contact-lead-text {
        font-size: 14px;
    }

    .tel-number {
        font-size: 30px;
    }

    .tel-time-info {
        font-size: 13px;
    }

    .contact-side-area {
        width: 100%;
        margin-top: -10px;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;
    }

    .owner-photo-wrap {
        width: 160px;
    }

    .contact-shop-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .shop-name-logo {
        font-size: 28px;
    }

    .shop-info-divider {
        display: none;
    }

    .shop-info-text {
        font-size: 13px;
    }

    .mail-form-btn {
        width: 67%;
    }

    .btn-text-main {
        font-size: 15px;
    }
}

/* ==================================================
   17. ラスト
================================================== */
.last_con {
    background: url(img/bc_17.jpg) center center no-repeat;
    background-size: cover;
}

.last_con .lp-inner .form_btn {
    display: flex;
}

.lp-contact h2 {
    text-align: center;
    padding: 60px;
    font-size: 2em;
}


/* ==================================================================================================== */

/* ==================================================
   レスポンシブ対応（幅768px以下）
================================================== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 42px;
    }

    .hero-price .price-main {
        font-size: 54px;
    }

    .price-cards,
    .delivery-list,
    .reasons-list,
    .scenes-grid,
    .spec-content,
    .discount-items {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .cta-tel-btn {
        font-size: 28px;
        padding: 10px 20px;
    }

    .contact-tel-btn .tel-num {
        font-size: 24px;
    }

    .area-table th,
    .area-table td {
        display: block;
        width: 100%;
    }

    .area-table th {
        border-bottom: none;
        padding-bottom: 2px;
    }

    /* ==================================================
   1. Hero（メインビジュアル）
================================================== */

    .sp_none {
        display: none;
    }

    .tatami-lp section {
        padding: 20px 0 30px;

    }

    .last_con .lp-inner .form_btn {
        flex-direction: column;
    }

    .lp-contact h2 {
        text-align: center;
        padding: 30px;
        font-size: 1.1em;
    }





}

/* ==================================================================================================== */


/* SP_none （幅769px以上）*/

@media (min-width: 769px) {
    .pc_none {
        display: none;
    }
}