#FFF7EA/* 幅100%用ユーティリティ */
.w-100 {
    width: 100%;
}
header{
    background-color: #fff;
    z-index: 1000;
}
/* ボタン内の画像とテキストを横並びにする */
.btn-flex {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
/* デスクトップ用CSS */
.visible_s {
    display: none;
}

.hero-bg {
    background: linear-gradient(135deg, #faf7f0 0%, #f5f1e8 100%);
}
.section-bg {
    /* background:
   linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(249,250,251,0.4)),
        url('../images/bg_pt01.png') repeat,
        linear-gradient(to bottom, #ffffff, #f9fafb);
*/
background-color:#FFF7EA;
}

.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:600px;
   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;
}


.brd-box {
    box-sizing: border-box;
}
.btn {
    border-radius: 60%;
    box-shadow: 0 5px 0 #ca1c30;
    cursor: pointer;
}
.btn:hover {
    box-shadow: none;
    transform: translateY(5px);
}
.c-btn {
    background: #ff701e;
    border: 2px solid #ff701e;
    border-radius: 60px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
    padding: 15px 40px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 0 #d01a0a;
}
.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: 0 6px 0 #1d4ed8;
    padding: 6px 20px;
}
.c-btn.header-green,
.c-btn.con-green {
    background: #fff;
    border: 2px solid #22c55e;
    box-shadow: 0 6px 0 #16a34a;
    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: 12px 24px 6px;
}

.wh-txtarea{
    background-color: #FFF;
    padding: 5vw 7vw;
    border-radius: 45px;
    border:3px solid #fc7a28;
}


#warranty{
    background:#FC7A28;
    padding-bottom:80px;
    min-height: 700px;
}

#products{
        padding:45px 0 80px;
    background: #fffdf3 url(../images/bg_grid.gif) repeat center top;
        position: relative;
}
.products-nami {
  background: #fffdf3 url(../images/bg_grid.gif) repeat center top;
}
/*.products-nami {
    width: 100%;
    height: 40px;
    background: #F9FAFB;
    --mask:
        radial-gradient(18.45px at 50% 25.5px,#000 99%,#0000 101%) calc(50% - 20px) 0/40px 100%,
        radial-gradient(18.45px at 50% -15.5px,#0000 99%,#000 101%) 50% 10px/40px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    margin-bottom: -1px;
}
/*
#products::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="32" viewBox="0 0 1200 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 16 Q 300 32 600 16 T 1200 16 V32 H0 V16 Z" fill="%23f7e9c7"/></svg>') no-repeat top center;
    background-size: cover;
    z-index: 1;
}*/

#reviews{
        /*background-image:
            repeating-linear-gradient(135deg, #fff 0px, #fff 4px, transparent 4px, transparent 20px); */
        background-color: #fff;
}
.stripe-bg{
  /* ここを変えれば配色や太さを後から調整できます */
  --stripe-color: #fafae9;   /* ストライプの色 */
  --stripe-width: 40px;       /* ストライプの太さ */
  --gap-width: 40px;          /* 白の間隔（太さ） */

  /* 背景本体 */
  background:
    repeating-linear-gradient(
      90deg,                           /* 縦ストライプ（横方向に繰り返し） */
      var(--stripe-color) 0
      calc(var(--stripe-width)),       /* 色の帯 */
      transparent calc(var(--stripe-width))
      calc(var(--stripe-width) + var(--gap-width)) /* 白い帯 */
    );
  background-color:#fff;               /* 余白の色（透明部分） */
}

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

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


/*おすすめ機種セクション */
.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)); } }


/* リンクボックス */
.reco-link,.reco-link-tel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 106px; 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: 16px 2rem 50px 2rem; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, right .2s ease; }
.reco-link:hover,.reco-link-tel:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); background: #f7fff9; }
.reco-link .label { font-size: 1.2rem; }
.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: 12px; top: 50%; transform: translateY(-50%); font-weight: 900; font-size: 18px; color: #00A63E; opacity: .9; line-height: 1; }
.reco-link:hover::after { right: 8px; }


/* 固定ヘッダーにかぶらないようオフセット */
#kyuto, #oidaki, #danbo, #quickauto,#oidakiauto,#oidakifull, .anchor-target { scroll-margin-top: 120px; }
@media (max-width: 768px) { #kyuto, #oidaki, #danbo, #quickauto,#oidakiauto,#oidakifull, .anchor-target { scroll-margin-top: 96px; } }



/* カード右上にポップアップボタンを置くためのコンテナ化 */
.reco-item{ position:relative; }

/* ポップアップボタン（右上） */
.reco-pop,.reco-pop-tel{ position:absolute; bottom:12px; left: 50%; transform: translateX(-50%); display:inline-flex; align-items:center; gap:.35rem; padding:.50rem .6rem; border-radius:999px; font-size:.8rem; 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（詳細ボタン）黄色背景・中央配置 */
.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:12px;
}
.reco-pop-tel::before{content:none;}

/* ボタン分の余白だけ足したい時に付与（既存の .reco-link を崩さない） */
.reco-link.has-pop{ font-size: 18px;}

/* ===== 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(48px, 6vh, 80px) auto; max-width:min(680px, 92vw); background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.2); padding:20px 20px 16px; }
.modal__header{ display:flex; align-items:center; gap:.75rem; padding-right:44px; }
.modal__title{ font-size:1.1rem; font-weight:800; color:#222; }
.modal__body{ margin-top:.5rem; color:#333; line-height:1.8; }
.modal__actions{ margin-top:1rem; display:flex; justify-content:flex-end; gap:.5rem; }
.modal__btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; 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; }

/* 画面外クリックで閉じるためのオーバーレイ（a タグ） */
.modal__overlay{ position:fixed; inset:0; display:block; }
/* モーダル枠の上に来るように z-index を制御 */
.modal__box, .modal__close{ position:relative; z-index:1; }

/* 右上×ボタン */
.modal__close{ position:absolute; top:10px; right:12px; display:inline-grid; place-items:center; width:32px; height:32px; 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 .18s ease-out; }
@keyframes pop{ from{ transform:translateY(6px) scale(.98); opacity:.9 } to{ transform:none; opacity:1 } }
.modal__img{max-width:100%;height:auto;display:block;border-radius:10px}

/** 固定バー */
#kotei_bar_point {
  width: 120px;
  height: 70px;
  right: 0;
  top: 40px;
  position: fixed;
  text-align: center;
  padding: 85px 0 0 0;
}
#kotei_bar {
    z-index: 1000;
  width: 86px;
  height: 270px;
  right: 0;
  top: 260px;
  position: fixed;
  text-align: center;
  padding: 85px 0 0 0;
}
#pagetop {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
#pagetop img {
  width: auto;
  cursor: pointer;
}



/* 下側セクション：上辺が“波”になる */
.section--wave-top{
  position: relative;
  background: #fff;           /* 下のセクションの背景色 */
  --wave-color: #09f;         /* 上のセクションの色（=波の色）をここで指定 */
  --wave-height: 120px;       /* 波の高さ（上下のボリューム） */
}

/* 波本体（上セクション色で塗られた帯を、SVGマスクで波形に切り抜く） */
.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;
}

.pay_txt{
    width: 480px;
    margin:  0 auto
}