/* スマホメニューのリストレイアウト */
.sp-menu-content ul {
    padding: 0;
    margin: 0;
}
.sp-menu-content li {
    list-style: none;
    border-bottom: 1px solid #eee;
}
.sp-menu-content a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1em 0.5em 1.1em 0.2em;
    font-size: 1.1em;
    color: #222;
    text-decoration: none;
    font-weight: 600;
}
.sp-menu-content a::after {
    content: '>';
    color: #aaa;
    font-size: 1.2em;
    margin-left: 0.5em;
}
.sp-menu-content a:active,
.sp-menu-content a:focus {
    background: #f5f5f5;
}
header .visible_s button.c-btn{
    display: block;
    font-size:11px;
    border-radius: 15px;
    line-height: 1.1;
    letter-spacing: 0.15em;
    margin-top: 0;
    padding: 3px 14px;
}
header .visible_s button span{
    display: block;
    margin: 4px auto 2px !important;
}
header .visible_s button.header-blue,
header .visible_s button.header-green,
header .visible_s button.header-orange {
    display: block !important;
}
header .visible_s button img{
    margin:0 auto !important;
}

.sp-menu-content {
    margin-top: 62px;
}
/* スマホ用メニュー制御 */
.sp-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
}
.sp-menu.active {
    display: block;
}
.sp-menu-content {
    background: #fff;
    width: 80vw;
    max-width: 320px;
    height: 80vh;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: -2px 0 12px rgba(0,0,0,0.15);
    padding: 2rem 1.5rem;
    overflow-y: auto;
}
.sp-menu-close {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 2rem;
    color: #333;
    background: none;
    border: none;
    z-index: 10001;
}
.sp-menu button a{
    color:#fff !important;
    font-size:15px;
}

.main70 img{
     right:0 !important;
     top:-20px !important;
     right: 0 !important;
     width: 110px;
     left: auto !important;
}

.pr-area01, .pr-area02, .pr-area03, .pr-area04, .pr-area05 {
    background-color: #fdf0e6;
    padding: 40px 12px;
    border-radius: 0px;
    }
.pr-area02,.pr-area04{
    background-color:#e6f1fd;
}


/* 商品セクション：スマホ時は2カラム */
.pr-area01 .grid,
.pr-area02 .grid,
.pr-area03 .grid,
.pr-area04 .grid,
.pr-area05 .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
}
#btn-flex, .btn-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: 0.4em;
}
/* スマートフォン用CSS (768px以下) */
.visible_l{
    display: none;
}

header{
    max-width: 100%;
    background-color: #fff;
    z-index: 1000;
}
header img.logo{
    max-height: 50px !important;
}
header nav{
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}
.hero-bg {
    background: linear-gradient(135deg, #faf7f0 0%, #f5f1e8 100%);
}
.section-bg {
    background-color:#FFF7EA;
}

#top.pt-32 {padding-top: 6rem;}
#top .area{font-size:1.1rem !important;}
#top .text-xl{font-size:0.8rem !important;}
#top .text-4xl{font-size:2rem !important;}
#top .text-6xl{font-size:2.8rem !important;}

#top .grid,
#reasons .grid{
    display: block;
}
#top .grid,
#reasons .grid,
.grid-cols-60-40{
    max-width: 100%;
}

#top .clm3 .grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
    max-width: 98vw;
    margin: 0 auto;
    font-size: 0.8rem;
}

/* 右側のボックス（119-130行目）をスマホ時は横幅いっぱい・段落ち表示 */
#top > .container > .grid > .relative {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-top: 1.5rem;
}
#top .relative .bg-white {
    width: 100% !important;
    box-sizing: border-box;
}
#top .kaiketu-bg-img img {
    max-width: 100%;
    height: auto;
}
#top .clm3,
#top .clm3 .text-3xl,
#top .clm3 .text-4xl{font-size:1.2rem;}


.c-btn {
    background: #ff701e;
    border: 2px solid #ff701e;
    border-radius: 60px;
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 12px;
    text-align: center;
    box-shadow: 0 6px 0 #d01a0a;
    margin-top: 12px;
    font-size: 1.25rem;
    line-height: 1.3;
}
.c-btn.press:hover {
    transform: translateY(4px);
    box-shadow: none;
}
.c-btn.header-blue,
.c-btn.con-blue{
    background: #2563eb;
    border: 2px solid #2563eb;
    box-shadow: none !important;
    padding: 6px 20px;
}
.c-btn.header-green,
.c-btn.con-green {
    background: #fff;
    border: 2px solid #22c55e;
    box-shadow: none !important;
    color: #22c55e;
    padding: 6px 20px;
}
.header-blue ,
.header-green{
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.c-btn.con-blue,
.c-btn.con-green{
    padding: 20px 24px 20px;
    font-size: 1.1rem;
}


/* 問題セクションの見出し */
#problems .mr-6{margin-right:0.4rem;}
#problems .ml-6{margin-left:0.4rem;}
.container h2 {
    font-size: 1.45rem !important; /* text-2xl相当 */
    line-height: 2.4;
    text-align: center;
}

.container h2 span.dotted {
    font-size: 1.875rem !important; /* text-3xl相当 */
}


.kaiketu::before {
    position: absolute;
    content: "";
    width: 90px;
    height: 50px;
    background-color: #fff;
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
}
.kaiketu-bg {
    min-height:680px;
   background-color: #FC7A28;
/*     background-image: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%);
    background-size: 60px 60px, 40px 40px, 20px 20px, 20px 20px;
    background-position: 0 0, 20px 20px, 0 0, 10px 10px;*/
}
span.dotted {
    padding-top: 10px;
    background-image: radial-gradient(circle, var(--accent) 3px, transparent 3px);
    background-repeat: repeat-x;
    background-size: 30px 8px;
    background-position: center top;
}

.hero-town {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
background-color: #FC7A28;
background: url(../images/bg_home_town_bge.png) calc(50% - 13px) top repeat-x;
background-size: 1024px 150px;
}



/* 選ばれる理由セクション */
#reasons {
    padding:4rem 0 !important;
}
#reasons h2 {
    font-size: 1.6rem !important; /* text-2xl相当 */
}

#reasons h2 span {
    font-size: 1.25rem !important; /* text-xl相当 */
}

#reasons h3 {
    font-size: 1rem !important; 
}
.wh-txtarea {
    background-color: #FFF;
    padding: 5vw 7vw;
    border-radius: 45px;
    border: 3px solid #fc7a28;
}

/* 保証セクション */
#warranty {
    background: #FC7A28;
    padding-bottom: 80px;
    min-height: 700px;
}
#warranty h2 {
    font-size: 1.7rem !important; /* text-2xl相当 */
}

#warranty h2 span {
    font-size: 1.25rem !important; /* text-xl相当 */
}

#warranty h3 {
    font-size: 1.25rem !important; /* text-xl相当 */
}

/* 保証セクションのアイコン */
#warranty .text-2xl {
    font-size: 1.25rem !important; /* text-xl相当 */
}

/* 保証セクションの数字 */
#warranty .text-4xl {
    font-size: 1.5rem !important; /* text-2xl相当 */
}

#warranty .text-2xl.font-bold {
    font-size: 1.125rem !important; /* text-lg相当 */
}

/* 保証セクションの説明文 */
#warranty p:not([class*="text-"]) {
    font-size: 0.875rem !important; /* text-sm相当 */
}

/* お客様の声セクション */
#reviews h2 {
    font-size: 1.5rem !important; /* text-2xl相当 */
}

/* 給湯器ラインナップセクション */
#products h2 {
    font-size: 1.6rem !important; /* text-2xl相当 */
}

#products h3 {
    font-size: 1.25rem !important; /* text-xl相当 */
}

/* おすすめ機種リンクボックス用 丸ゴシックフォント */
.reco-wrap {
    font-family: 'Rounded Mplus 1c', 'Noto Sans JP', 'UD丸ゴ_シック体', 'YuGothic', 'Meiryo', sans-serif;
    font-weight: 300;
}

.reco-wrap .px-4{
    padding:0 !important;
}

/*おすすめ機種セクション */
.reco-wrap { padding:0 0 3rem ;  }
.reco-title { font-weight: 800; color: #0EA154; letter-spacing: .04em; text-align: center; margin: 0 auto 1.25rem; font-size: 1.5rem; }
@media (min-width: 768px) { .reco-title { font-size: 1.75rem; } }
.reco-sub { color: #6b7280; text-align: center; margin-bottom: 1.75rem; font-size: .95rem; }


/* グリッド（2×2） */
.reco-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; }
@media (max-width: 640px) { .reco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.pr-area01 .h-80,.pr-area02 .h-80,.pr-area03 .h-80,.pr-area04 .h-80,.pr-area05 .h-80{height: 10rem;}
.pr-area01 .w-15,.pr-area02 .w-15,.pr-area03 .w-15,.pr-area04 .w-15,.pr-area05 .w-15{width: 65px;}

.type{display: block !important;}
.type span{
    display: block;
    margin: 4px auto !important;
    width: 100%;
}


/* お支払い方法セクション */
.py-16:has(h2:contains("お支払い方法")) h2 {
    font-size: 1.5rem !important; /* text-2xl相当 */
}

/* ソリューションセクション */
.kaiketu-bg h2 {
    font-size: 1.8rem !important; /* text-3xl相当 */
}
.kaiketu-bg h3 {
        font-size: 1.8rem !important;
        letter-spacing: 0.08em !important;
    }

.kaiketu-bg h3 span {
    font-size: 1.75rem !important; /* text-28px相当 */
}

.kaiketu-bg p {
    font-size: 1rem !important; /* text-base相当 */
}

/* おすすめ機種リンクボックス用 丸ゴシックフォント */
.reco-wrap {
    font-family: 'Rounded Mplus 1c', 'Noto Sans JP', 'UD丸ゴ_シック体', 'YuGothic', 'Meiryo', sans-serif;
    font-weight: 300;
    padding:0 0 3rem ;
}
.reco-title { font-weight: 800; color: #0EA154; letter-spacing: .04em; text-align: center; margin: 0 auto 1.25rem; font-size: 1.2rem; }
.reco-sub { color: #6b7280; text-align: center; margin-bottom: 1.75rem; font-size: .95rem; }
.reco-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; margin: 0 auto; }
.reco-link,.reco-link-tel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90px; border: 2px solid #00A63E; border-radius: 14px; background: #fff; text-decoration: none; color: #1f2937; font-weight: 800; letter-spacing: .04em; text-align: center; line-height: 1.2; cursor: pointer; padding: 12px 1.5rem 40px 12px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, right .2s ease; font-size: 1rem; }
.reco-link:hover,.reco-link-tel:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.10); background: #f7fff9; }
.reco-link .label { font-size: 1rem; }
.reco-link-tel .label { font-size: 0.9rem; }
.reco-link .desc { margin-top: .25rem; font-size: .8rem; font-weight: 600; color: #6b7280; }
.reco-link .badge { display: inline-block; margin-left: .5rem; padding: .15rem .5rem; border-radius: 9999px; font-size: .75rem; color: #fff; background: #00A63E; font-weight: 800; }
.reco-link::after { content: ">"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-weight: 900; font-size: 16px; color: #00A63E; opacity: .9; line-height: 1; }
.reco-link:hover::after { right: 6px; }
.reco-item{ position:relative; }
.reco-item .reco-link.has-pop{min-height: 94px;}
.reco-item:nth-of-type(5) .reco-link.has-pop,
 .reco-item:nth-of-type(6) .reco-link-tel.has-pop{
    min-height: 120px;
}
.reco-pop,.reco-pop-tel{ position: absolute;
        bottom: 8px;
        left: 20%;
        transform: translateX(-10%);
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .40rem .5rem;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        border: 1px solid #00A63E;
        color: #00A63E;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        z-index: 2; }
.reco-pop:focus-visible{ outline:2px solid #00A63E; outline-offset:2px; }
.reco-pop:hover{ filter:brightness(0.95); }
.reco-pop::before{ content:"i"; display:inline-grid; place-items:center; width:1.1rem; height:1.1rem; border-radius:999px; border:1px solid currentColor; font-weight:800; font-size:.8rem; }
.reco-pop-wrap { text-align: center; margin-top: 0.5em; }
.reco-pop-yellow { background: #FFF9d9; color: inherit; display: inline-block; padding: 0.5em 2em; border-radius: 2em; font-weight: bold; box-shadow: 0 2px 8px #0001; transition: box-shadow .2s; }
.reco-pop-tel { background: #00A63E; color: #fff; border: none; bottom:8px; }
.reco-pop-tel::before{content:none;}
.reco-link.has-pop{ padding-right:18px;font-size: 1rem;}
.reco-link span>span{font-size:0.75rem; display: block;}


/* ===== CSSだけのモーダル（:target 利用） ===== */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:100000; }
.modal:target{ opacity:1; pointer-events:auto; }
.modal__box{ position:relative; margin:clamp(32px, 4vh, 60px) auto; max-width:min(96vw, 420px); background:#fff; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.18); padding:14px 10px 10px; }
.modal__header{ display:flex; align-items:center; gap:.75rem; padding-right:32px; }
.modal__title{ font-size:1rem; font-weight:800; color:#222; }
.modal__body{ margin-top:.5rem; color:#333; line-height:1.7; }
.modal__actions{ margin-top:1rem; display:flex; justify-content:flex-end; gap:.5rem; }
.modal__btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border-radius:10px; font-weight:700; text-decoration:none; border:1px solid #ddd; color:#222; background:#f8f8f8; }
.modal__btn--primary{ border-color:#00A63E; color:#fff; background:#00A63E; }
.modal__overlay{ position:fixed; inset:0; display:block; }
.modal__box, .modal__close{ position:relative; z-index:1; }
.modal__close{ position:absolute; top:8px; right:8px; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; text-decoration:none; font-weight:900; color:#666; background:#f3f3f3; border:1px solid #ddd; }
.modal__close:hover{ filter:brightness(.95); }
.modal:target .modal__box{ animation:pop .16s ease-out; }
@keyframes pop{ from{ transform:translateY(4px) scale(.98); opacity:.9 } to{ transform:none; opacity:1 } }
.modal__img{max-width:100%;height:auto;display:block;border-radius:8px}

/* 固定バー・ページトップ */
#kotei_bar_point { width: 90px; height: 50px; right: 0; top: 20px; position: fixed; text-align: center; padding: 60px 0 0 0; }
#kotei_bar { z-index: 1000; width: 100%; height: auto; right: 0; bottom: 0; position: fixed; text-align: center; padding: 60px 0 0 0; }
#pagetop { position: fixed; bottom: 64px;right: 4px; }
#pagetop img { width: 60px; cursor: pointer; }

/* 下側セクション：上辺が“波”になる */
.section--wave-top{ position: relative; background: #fff; --wave-color: #09f; --wave-height: 60px; }
.section--wave-top::before{ content:""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--wave-height)); height: var(--wave-height); background: var(--wave-color); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0,50 C240,95 480,100 720,70 C960,40 1200,25 1440,40 L1440,120 L0,120 Z" fill="white"/></svg>') bottom / 100% 100% no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" preserveAspectRatio="none"><path d="M0,50 C240,95 480,100 720,70 C960,40 1200,25 1440,40 L1440,120 L0,120 Z" fill="white"/></svg>') bottom / 100% 100% no-repeat; }


.font-sp_sm {
    font-size: 0.9rem;
}