:root{
  --hy-red:    #e0413d;
  --hy-green:  #0ea857;
  --hy-yellow: #f4e62f;
  --hy-pink:   #ffe3e3;
  --hy-bg:    #eeffe1;
  --hy-footer-bg: #9c0115;
  --hy-text:   #111;

  /* コンテンツ幅：統一 1024px */
  --hy-container: 1024px;

  /* 左右余白 */
  --hy-gutter: 16px;

  /* 罫線 */
  --hy-line: rgba(0,0,0,.08);

  /* ヘッダー高さ（基準） */
  --hy-header-h: 78px;
  --hy-header-h-tab: 72px;
  --hy-header-h-sp: 64px;

  /* JSで実測したヘッダー高（初期値はCSS変数の想定高） */
  --hy-header-real: var(--hy-header-h);
}

/* タブ/SPの初期値も合わせる（JSが効くまでのチラつき防止） */
@media (max-width: 1024px){
  :root{ --hy-header-real: var(--hy-header-h-tab); }
}
@media (max-width: 767px){
  :root{ --hy-header-real: var(--hy-header-h-sp); }
}

/* ======================================
  Base
====================================== */
*{ box-sizing: border-box; }
body{
  margin: 0;
  color: var(--hy-text);
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
}
img{ max-width: 100%; height: auto; }
a{ color: inherit; }

.container{
  max-width: var(--hy-container);
  margin: 0 auto;
  padding: 0 var(--hy-gutter);
}

/* 横スクロールの原因を潰す */
html, body{
  overflow-x: hidden;
}

/* アンカー移動時にヘッダー分だけ余白を確保 */
html{
  scroll-padding-top: 86px; /* ヘッダー(78px)+少し余裕 */
}

/* PC用改行 */
.br-pc {
  display: block;
}

@media (max-width: 767px){
  .br-pc {
    display: none;
  }
}

/* スマホ用改行 */
.br-sm {
  display: none;
}

@media (max-width: 767px){
  .br-sm {
    display: block;
  }
}

/* =========================
  Header (fixed)
========================= */
.hy-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;

  background:#fff;
  border-bottom: 1px solid var(--hy-line);
}

/* fixed時に下のコンテンツが透けたり段差が出ないように */
.hy-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background: var(--hy-line);
}


/* ヘッダー内（1024px内に必ず収める） */
.hy-header__inner{
  max-width: var(--hy-container);
  margin: 0 auto;
  padding: 0 var(--hy-gutter);

  height: var(--hy-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;

  min-width: 0;
}

/* ロゴ */
.hy-header__logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex: 0 1 auto;
  min-width: 0;
}
.hy-header__logo img{
  height:56px;
  width:auto;
  display:block;
}

/* 右側ボタン群 */
.hy-header__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 16px;
  flex: 0 0 auto;
}

/* =========================
  Buttons
========================= */
.hy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 40px;
  padding: 0 26px;
  border-radius: 999px;

  font-weight: 900;
  letter-spacing: .04em;
  text-decoration:none;

  border: 0;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;

  flex: 0 0 auto;
}

/* メニュー（赤） */
.hy-btn--menu{
  background: var(--hy-red);
  color:#fff;
  min-width: 176px;
}
.hy-btn--menu::after{
  content:"";
  width: 0;
  height: 0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid rgba(255,255,255,.95);
  margin-left: 12px;
  transform: translateY(1px);
}

/* お部屋を送る（緑） */
.hy-btn--send{
  background: var(--hy-green);
  color:#fff;
  min-width: 176px;
}

/* =========================
  Dropdown (PC/Tablet)
========================= */
.hy-menu{
  position:relative;
  flex: 0 0 auto;
}

.hy-menu__panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:1000;

  background:#fff;
  border:3px solid var(--hy-red);
  border-radius:18px;
  padding:10px;
  width:240px;
  box-shadow:0 10px 24px rgba(0,0,0,.15);

  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:.18s ease;

  max-width: 100%;
}

/* クリックで開閉するので hover/focus-within は使わない */
.hy-menu.is-open .hy-menu__panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.hy-menu__panel-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hy-menu__top{
  height:42px;
  border-radius:999px;
  border:3px solid var(--hy-red);
  color:var(--hy-red);
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.hy-menu__item{
  height:46px;
  border-radius:999px;
  border:2px solid rgba(224,68,64,.55);
  font-size: 0.8rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  color:var(--hy-text);
  background:#fff;

  transition:.15s ease;
}

.hy-menu__item:hover{
  background:rgba(224,68,64,.12);
  border-color:var(--hy-red);
}

/* 固定ヘッダーで隠れないように main を下げる */
main{
  margin-top: var(--hy-header-real);
}

/* =========================
  Hero (Image) : 安定版（PC/SP分離・競合なし）
========================= */

/* 共通 */
.hy-hero.hy-hero--img{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.hy-hero__pic{
  display: block;
  width: 100%;
  line-height: 0;
}

/* 画像は「普通の画像」として扱う（SPで縮小が止まらない） */
.hy-hero__img{
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------
  PC：ヘッダー下から開始し、画面下までピッタリ
  ※PCはトリミングOK（cover）で見栄え優先
------------------------- */
@media (min-width: 768px){
  .hy-hero.hy-hero--img{
    height: 100svh;
    height: 100vh;
    /* padding-top: var(--hy-header-real); */ /* 固定ヘッダー分 */
    box-sizing: border-box;
  }

  .hy-hero__pic{
    height: 100%;
    position: relative;
  }

  .hy-hero__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* ← cover から contain に変更 */
    object-position: center top; /* 上の文字を優先 */
  }
}

/* 1200px未満〜768px：見切れさせず“縮小して全体表示” */
@media (max-width: 1199px) and (min-width: 768px){

  /* Heroは高さ固定をやめる（見切れの原因） */
  .hy-hero.hy-hero--img{
    height: auto;
    /* padding-top: var(--hy-header-real); */ /* ヘッダー下開始は維持 */
    overflow: visible;
    background: #fff;
  }

  .hy-hero__pic{
    height: auto;
  }

  /* 絶対配置を解除して、普通の画像として縮小させる */
  .hy-hero__img{
    position: static;
    width: 100%;
    height: auto;

    /* coverをやめる（見切れ防止） */
    object-fit: contain;
    object-position: center top;
  }
}


/* -------------------------
  SP：画像は自然に縮小（左右見切れゼロ）
  + 下端はCTAグリーンに溶かす
------------------------- */
@media (max-width: 767px){
  .hy-hero.hy-hero--img{
    height: auto;                 /* ← これが重要（見切れ防止） */
    background: var(--hy-green);  /* 下端の色合わせ */
  }

  /* SPの溶け込みグラデ */
  .hy-hero.hy-hero--img::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(120px, 22vw, 220px);
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.06) 45%,
      rgba(0,0,0,0.14) 70%,
      var(--hy-green) 100%
    );
    pointer-events: none;
  }
}

/* PC（1200px以上）：左右を切らない版は、高さ固定をやめて隙間を消す */
@media (min-width: 1200px){
  .hy-hero.hy-hero--img{
    height: auto !important;      /* 100vh を殺す */
    overflow: hidden;             /* 余計なはみ出し防止 */
    background: #fff;
  }

  .hy-hero__pic{
    height: auto !important;
  }

  /* absolute をやめて、画像を通常フローで表示（＝余白が出ない） */
  .hy-hero__img{
    position: static !important;
    width: 100%;
    height: auto !important;

    object-fit: contain;
    object-position: center top;
    background: #fff;
  }
}

/* ======================================
  CTA（緑帯）※緑専用クラス（事故防止）
====================================== */
.hy-cta-green{
  background: var(--hy-green);
  padding: 28px 0;
}

.hy-cta-green__inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
}

/* イラスト */
.hy-cta-green__illus{
  flex: 0 0 260px;
  max-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hy-cta-green__illus img{
  width: 100%;
  height: auto;
  display: block;
}

/* 右側：文言 */
.hy-cta-green__content{
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  color: #fff;
}

.hy-cta-green__lead{
  margin: 0;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.6;
  font-size: 26px;
}

/* 「／ 入力時間は… ／」っぽい装飾 */
.hy-cta-green__sub{
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .02em;
}

.hy-cta-green__sub::before,
.hy-cta-green__sub::after{
  content:"";
  height: 1px;
  width: 90px;
  background: rgba(255,255,255,.7);
}

/* ボタン（白地＋赤文字） */
.hy-cta-green__btn{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 64px;
  padding: 0 44px;
  border-radius: 999px;

  background: #fff;
  color: var(--hy-red);
  text-decoration: none;

  font-weight: 900;
  letter-spacing: .02em;
  font-size: 24px;

  box-shadow: 0 8px 18px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.hy-cta-green__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.hy-cta-green__btn:active{
  transform: translateY(0);
  opacity: .95;
}

/* ======================================
  帯＋矢印（選ばれる理由 導線）
====================================== */
.hy-band-arrow{
  background: #f2ffe6;
  text-align: center;
}

.hy-band-arrow__band{
  background: var(--hy-green);
  padding: 28px 0 18px;
}

/* ★中身幅ラッパー（ここが肝） */
.hy-band-arrow__wrap{
  display: inline-block; /* ← 中身幅になる */
  max-width: 92vw;       /* ← 長文でも画面からはみ出さない保険 */
}

.hy-band-arrow__title{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hy-band-arrow__logo{
  height: 42px;
  width: auto;
  display: block;
}

.hy-band-arrow__text{
  color: #fff;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 下線：wrap幅に追従してピッタリ */
.hy-band-arrow__line{
  display: block;
  width: 100%;
  height: auto;
  margin: 10px 0 0; /* 中央寄せはwrapが担うのでauto不要 */
}

/* 矢印（薄緑エリア内） */
.hy-band-arrow-arrow{
  background: #f2ffe6;     /* 下地と同色 */
  line-height: 0;          /* 余白事故防止 */
  margin-top: -1px;        /* 帯との隙間防止 */
  display: flex;
  justify-content: center;
}

/* フル幅でしっかり見せる */
.hy-band-arrow-arrow__img{
  display: block;
  width: 100%;             /* ← ご要望どおり */
  height: auto;
}

/* SP */
@media (max-width: 767px){
  .hy-band-arrow__logo{ height: 20px; }
  .hy-band-arrow__text{ font-size: 18px; }

  .hy-band-arrow__arrow img{
    width: 220px;
    max-width: 78vw;
  }

  .hy-band-arrow-arrow__img{
    width: 250%;
    max-width: 250%;
  }
}

/* ======================================
  使いやすさ（1〜5）
====================================== */
.hy-ease{
  padding: 70px 0;
  background: #fff;
}

.hy-ease__title{
  margin: 0 0 34px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 34px;
  line-height: 1.25;
  color: var(--hy-green);
}

.hy-ease__title-red{ color: var(--hy-red); }

.hy-ease__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.hy-ease__item{
  margin: 0;
  flex: 0 1 calc((100% - 56px) / 3);
  max-width: 360px;
}

.hy-ease__item img{
  width: 100%;
  height: auto;
  display: block;
}

/* ======================================
  選ばれる理由（共通）
====================================== */
.hy-r{
  background: var(--hy-bg);
  padding: 44px 0 0;
}

.hy-r__inner{
  display: flex;
  align-items: center;
  gap: 44px;
}

/* 下線（区切り） */
.hy-r__sep{
  margin-top: 34px;
}
.hy-r__sep img{
  display: block;
  width: 85%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.hy-r__circle{
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px;
  flex: 0 0 auto;
}

.hy-r__circle-text{
  margin: 0;
  text-align: center;
  line-height: 1.15;
}

.hy-r__circle-lead{
  display: block;
  font-weight: 900;
  font-size: 32px;
  color: var(--hy-green);
  margin-bottom: 6px;
}

.hy-r__circle-main{
  display: block;
  font-weight: 900;
  font-size: 44px;
  letter-spacing: .02em;
  line-height: 1.15;
}

.hy-r__circle-red{ color: var(--hy-red); }
.hy-r__circle-green{ color: var(--hy-green); }

.hy-r__note{
  margin: 12px 0 0;
  color: var(--hy-red);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
}

/* 理由1 */
.hy-r1__grid{ align-items: flex-start; }
.hy-r1__right{ flex: 1 1 auto; min-width: 0; }

.hy-r1__text p{
  margin: 0 0 10px;
  color: #000;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 700;
}

.hy-r1__table{
  margin-top: 14px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 18px;
}

.hy-r1__table-cap{
  margin: 0 0 10px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  color: #000;
  position: relative;
}

.hy-r1__table-cap::before,
.hy-r1__table-cap::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--hy-red);
}
.hy-r1__table-cap::before{ left: 0; }
.hy-r1__table-cap::after{ right: 0; }

.hy-r1__table img{
  width: 100%;
  height: auto;
  display: block;
}

/* 理由2 */
.hy-r2{
  padding-top: 34px;
}

.hy-r2__title{
  margin: 0 0 10px;
  text-align: center;
  color: var(--hy-green);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 34px;
}

.hy-r2__flow{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.hy-r2__flow img{
  display: block;
  height: auto;
  max-width: 100%;
}

.hy-r2__flow img:not(.hy-r2__arrow){
  width: 320px;
}

.hy-r2__image {
  width: 40% !important;
}

.hy-r2__arrow{
  width: 50px;
}

/* g2-04 と g2-05 をくっつける */
.hy-r2__flow img:nth-child(3){
  margin-right: -14px;
}

.hy-r2__people{
  width: 18% !important;
}

/* 理由3 */
.hy-r3{
  padding-top: 34px;
}

.hy-r3__grid{ align-items: flex-start; }
.hy-r3__left{ flex: 1 1 auto; min-width: 0; }

.hy-r3__title{
  margin: 0 0 6px;
  color: var(--hy-green);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 34px;
}

.hy-r3__note{ margin-top: 0; }

.hy-r3__desc{
  margin: 16px 0 0;
  color: #000;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 700;
}

.hy-r3__img{
  margin-top: 18px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
}
.hy-r3__img img{
  width: 100%;
  height: auto;
  display: block;
}

/* 理由4 */
.hy-r4{
  padding: 34px 0 70px;
}

.hy-r4__grid{
  align-items: center;
  gap: 80px;
}

.hy-r4__circle{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hy-r4__note{
  margin-top: 14px;
  text-align: center;
}

.hy-r4__cards{
  display: flex;
  gap: 26px;
  flex: 1 1 auto;
  justify-content: center;
  align-items: flex-end;
}

.hy-r4__cards img{
  width: 60%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ======================================
  CTA（赤帯）※赤専用クラス（事故防止）
====================================== */
.hy-cta-red{
  background: var(--hy-red);
  color: #fff;
  text-align: center;
  padding: 56px 0 34px;
}

.hy-cta-red__inner{
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  min-width: 0;
}

.hy-cta-red__top{
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hy-cta-red__logo{
  height: 44px;
  width: auto;
  display: block;
}

.hy-cta-red__top-text{
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
}

.hy-cta-red__lead{
  margin: 0;
  font-size: clamp(22px, 3.0vw, 36px);
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
  max-width: 100%;
  word-break: keep-all;
  line-break: strict;
}

.hy-cta-red__lead-accent{
  color: #ffe26b;
  font-weight: 900;
}

.hy-cta-red__sub{
  margin: 0;
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow: 0 2px 0 rgba(0,0,0,.12);
}

.hy-cta-red__btn-wrap{
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.hy-cta-red__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(720px, 92%);
  padding: 16px 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--hy-red);
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 10px 0 rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}

.hy-cta-red__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 0 rgba(0,0,0,.14);
}

/* 矢印（白背景の上に置く） */
.hy-cta-red-arrow{
  background: #fff;
  line-height: 0;
  margin-top: -1px;
  display: flex;
  justify-content: center;
}
.hy-cta-red-arrow__img{
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px){
  .hy-cta-red__top-text {
    font-size: 5vw;
  }

  .hy-cta-red__lead {
    font-size: 4.5vw;
  }
}

/* ======================================
  スライダー（こんな方にオススメ）
====================================== */
.hy-slider{
  padding: 60px 0;
  background: #fff;
}

.hy-slider__frame{
  position: relative;
  width: min(1100px, 100%);
  margin: 0 auto;
  background: #fde3e3;
  border-radius: 28px;
  padding: 26px 78px;
  box-sizing: border-box;
}

.hy-slider__viewport{
  overflow: hidden;
  border-radius: 18px;
}

.hy-slider__track{
  display: flex;
  gap: 26px;
}

.hy-slider__slide{
  flex: 0 0 auto;
  width: 60%;
  display: flex;
  justify-content: center;
}

.hy-slider__slide img{
  width: 100%;
  height: auto;
  display: block;
}

/* 矢印ボタン */
.hy-slider__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}

.hy-slider__btn::before{
  content:"";
  position: absolute;
  inset: -12px;
}

.hy-slider__btn img{
  width: 56px;
  height: auto;
  display: block;
}

.hy-slider__btn--prev{ left: 18px; }
.hy-slider__btn--next{ right: 18px; }

.hy-slider__btn--prev img{
  transform: scaleX(-1);
}

.hy-slider__btn.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* ======================================
  ご利用の流れ
====================================== */
.hy-flow{
  background: #f2ffe6;
  padding: 80px 0;
}

.hy-flow__inner{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: block;
}

.hy-flow__title{
  text-align: center;
  color: var(--hy-green);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .04em;
  margin: 0 0 34px;
}

.hy-flow__title-line{
  width: min(100%, var(--hy-container));
  margin: 0 auto 60px;
  padding: 0 var(--hy-gutter);
  line-height: 0;
}

.hy-flow__title-line img{
  width: 100%;
  height: auto;
  display: block;
}

/* PCは3列固定 */
.hy-flow__steps{
  display: flex;
  gap: 40px;
  align-items: stretch;
}

.hy-flow__step{
  flex: 1 1 0;
  position: relative;
  background: #fff;
  border: 2px solid var(--hy-green);
  border-radius: 18px;
  padding: 46px 24px 30px;
  text-align: center;
  min-width: 0;
}

.hy-flow__step-no{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -60%);
  margin: 0;
  padding: 0 10px;
  background: #f2ffe6;
  color: var(--hy-red);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  z-index: 2;
}

.hy-flow__icon{
  width: 86px;
  height: 86px;
  border-radius: 50%;
  /*background: #e6ffd2;*/
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
}

.hy-flow__icon img{
  width: 90%;
  height: auto;
  display: block;
}

.hy-flow__step-title{
  margin: 0 0 14px;
  color: var(--hy-red);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
  position: relative;
  padding-bottom: 18px;
}

.hy-flow__step-title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 160px;
  height: 18px;
  background: url("img/short-line.png") center / contain no-repeat;
}

.hy-flow__desc{
  margin: 0;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.hy-flow__note{
  margin: 12px 0 0;
  color: var(--hy-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

/* =========================
   全体
========================= */
.hy-contact-tab {
  background: #f0ffe6;
  padding: 80px 0;
}

.hy-contact-tab__inner {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* =========================
   タブ
========================= */
.hy-contact-tab__tabs {
  display: flex;
}

.hy-contact-tab__tab {
  flex: 1;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  background: var(--hy-red);
  color: #fff;
  border-radius: 20px 20px 0 0;
}

.hy-contact-tab__tab.is-active {
  background: var(--hy-pink);
  color: var(--hy-black);
}

/* =========================
   コンテンツ
========================= */
.hy-contact-tab__contents {
  background: var(--hy-pink);
  border-radius: 0 0 20px 20px;
  padding: 40px;
}

.hy-contact-tab__content {
  display: none;
}

.hy-contact-tab__content.is-active {
  display: block;
}

/* =========================================================
   HY CONTACT TAB : LINE CONTENT (FULL / NO OMISSION)
   - LINEタブの中身だけをデザイン案寄せにする完全版CSS
   - 影響範囲：.hy-contact-tab 内、かつ LINE content のみ
========================================================= */

/* -------------------------
  LINEタブコンテンツ表示制御
------------------------- */
.hy-contact-tab__content[data-content="line"]{
  display: none;
}

.hy-contact-tab__content[data-content="line"].is-active{
  display: block;
}

/* -------------------------
  LINEタブの外側パネル（白い角丸カード）
  ※ .hy-contact-tab__panel は他タブでも使う場合があるため
     LINE内だけで効くように上書きする
------------------------- */
.hy-contact-tab__content[data-content="line"] .hy-contact-tab__panel{
  background: #fff;
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* -------------------------
  上段（タイトル＋説明文）…横幅100%
------------------------- */
.hy-contact-tab__content[data-content="line"] .hy-line-head{
  margin: 0 0 22px;
}

.hy-contact-tab__content[data-content="line"] .hy-line-head__title{
  margin: 0 0 14px;
  color: var(--hy-red);
  font-weight: 900;
  font-size: 30px;          /* ←デザイン案寄せ：大きめ */
  line-height: 1.35;
  letter-spacing: .02em;
  text-align: left;
}

.hy-contact-tab__content[data-content="line"] .hy-line-head__text{
  margin: 0;
  color: #000;
  font-weight: 700;
  font-size: 17px;          /* ←上の説明文も小さくしない */
  line-height: 2.0;
  text-align: left;
  max-width: 980px;         /* ←長文でも読みやすく */
}

/* -------------------------
  下段：左右（左スマホ / 右キャッチ＋ボタン）
------------------------- */
.hy-contact-tab__content[data-content="line"] .hy-line-body{
  display: flex;
  align-items: center;
  justify-content: space-between; /* ←右側を広く使う */
  gap: 28px;
}

/* 左：スマホ画像（固定幅で右を広く） */
.hy-contact-tab__content[data-content="line"] .hy-line-body__left{
  flex: 0 0 360px;  /* ←左は固定、右に余白を渡さない */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hy-contact-tab__content[data-content="line"] .hy-line-body__left img{
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}

/* 右：キャッチ＋説明＋ボタン（余白を減らしていっぱいに） */
.hy-contact-tab__content[data-content="line"] .hy-line-body__right{
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0; /* 右の謎余白を作らない */
}

/* ＼ LINEでかんたん問い合わせ！ ／ */
.hy-contact-tab__content[data-content="line"] .hy-line-body__lead{
  margin: 0 0 12px;
  color: #000;
  font-weight: bold;
  font-size: 24px;          /* ←強く */
  text-align: center;
  line-height: 1.6;
  letter-spacing: .04em;
}

/* “LINE”だけ緑 */
.hy-contact-tab__content[data-content="line"] .hy-line-body__leadLine{
  color: var(--hy-green);
  font-weight: bold;
  text-align: center;
}

/* まずは〜 / クリックすると〜 */
.hy-contact-tab__content[data-content="line"] .hy-line-body__sub{
  margin: 0 0 18px;
  color: #000;
  font-weight: bold;
  font-size: 21px;          /* ←デザイン案寄せ：大きめ・太め */
  text-align: center;
  line-height: 1.9;
}

/* “友だち追加”だけ緑 */
.hy-contact-tab__content[data-content="line"] .hy-line-body__accent{
  color: var(--hy-green);
  font-weight: bold;
}

/* ボタン：右側いっぱい感（余白減らす） */
.hy-contact-tab__content[data-content="line"] .hy-line-body__btn{
  display: block;             /* ←横幅を効かせる */
  width: 100%;
  max-width: 560px;           /* ←大きく見せる（右の余白対策） */
  text-decoration: none;
  line-height: 0;
}

.hy-contact-tab__content[data-content="line"] .hy-line-body__btn img{
  width: 100%;
  height: auto;
  display: block;
}

/* 注意書き：赤・下線リンク */
.hy-contact-tab__content[data-content="line"] .hy-line-body__note{
  margin: 14px 0 0;
  color: var(--hy-red);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.6;
}

.hy-contact-tab__content[data-content="line"] .hy-line-body__link{
  color: var(--hy-red);
  text-decoration: underline;
}

/* -------------------------
  hover（任意：ボタンを少し浮かせる）
------------------------- */
.hy-contact-tab__content[data-content="line"] .hy-line-body__btn:hover{
  transform: translateY(-1px);
  transition: transform .15s ease;
}

/* -------------------------
  PC中間幅：少し詰める
------------------------- */
@media (max-width: 1100px){
  .hy-contact-tab__content[data-content="line"] .hy-contact-tab__panel{
    padding: 28px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-head__title{
    font-size: 26px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-head__text{
    font-size: 16px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__left{
    flex: 0 0 320px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__left img{
    max-width: 320px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__lead{
    font-size: 22px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__sub{
    font-size: 19px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__btn{
    max-width: 520px;
  }
}

/* -------------------------
  SP：縦並び
------------------------- */
@media (max-width: 767px){
  .hy-contact-tab__content[data-content="line"] .hy-contact-tab__panel{
    padding: 18px;
    border-radius: 16px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-head{
    margin-bottom: 16px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-head__title{
    font-size: 22px;
    margin-bottom: 10px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-head__text{
    font-size: 15px;
    line-height: 1.9;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body{
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__left{
    flex: none;
    width: 100%;
    justify-content: center;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__left img{
    max-width: 280px;
    margin: 0 auto;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__right{
    width: 100%;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__lead{
    font-size: 3.5vw;
    margin-bottom: 8px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__sub{
    font-size: 3vw;
    margin-bottom: 14px;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__btn{
    max-width: 360px;
    margin: 0 auto;
  }

  .hy-contact-tab__content[data-content="line"] .hy-line-body__note{
    font-size: 3vw;
  }

  .hy-contact-tab__contents {
    padding: 12px;
  }
}

/* =========================
   メールフォーム
========================= */
.hy-mail-form__heading {
  color: var(--hy-red);
  margin: 30px 0 10px;
}

.hy-mail-form__group input,
.hy-mail-form__group textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.hy-mail-form__radio {
  display: flex;
  gap: 20px;
}

.hy-mail-form__submit {
  margin-top: 30px;
  width: 100%;
  padding: 14px;
  border-radius: 30px;
  background: var(--hy-red);
  color: #fff;
  border: none;
  font-size: 18px;
  font-weight: 700;
}

/* =========================
   SP
========================= */
@media (max-width: 767px) {
  .hy-line-box {
    flex-direction: column;
    text-align: center;
  }
}

/* =========================================================
   HY RULES SECTION
========================================================= */

.hy-rules{
  padding: 90px 0 100px;
  background: #fff;
}

.hy-rules__inner{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* -------------------------
  見出し
------------------------- */
.hy-rules__head{
  text-align: center;
  margin-bottom: 55px;
}
/*
.hy-rules__title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 767px) {
  .hy-rules__title{
    gap: 0px;
  }
}
*/

.hy-rules__logo img{
  height: 40px;
  width: auto;
  display: block; /* ← すでに入っていてOK */
}

/* ロゴ画像ありバージョン */
.hy-rules__titleText{
  font-size: 34px;
  font-weight: 900;
  color: var(--hy-green);
  color: #0a6b2a; /* “のルール”は緑系で */
}

/* ロゴ画像なしバージョン */
.hy-rules__titleText{
  margin: 0 0 34px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 34px;
  line-height: 1.25;
  color: var(--hy-green);
}

.hy-rules__titleText-red{ color: var(--hy-red); }

.hy-rules__underline{
  margin-top: 18px;
}

.hy-rules__underline img{
  width: min(760px, 92vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

/* -------------------------
  3カード：横並び
------------------------- */
.hy-rules__cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}

/* -------------------------
  ルールカード
------------------------- */
.hy-rule-card{
  border: 3px solid var(--hy-red);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

/* 上：白背景 */
.hy-rule-card__top{
  padding: 26px 22px 18px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 10px;
}

.hy-rule-card__icon img{
  width: 72px;
  height: auto;
  display: block;
}

/* キャッチ */
.hy-rule-card__catch{
  text-align: center;
}

.hy-rule-card__catchTop{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
  color: #111;
}

.hy-rule-card__catchMain{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: var(--hy-red);
  letter-spacing: .02em;
}

/* 下：赤背景 */
.hy-rule-card__bottom{
  margin-top: auto;
  background: var(--hy-red);
  color: #fff;
  padding: 18px 22px 20px;
}

.hy-rule-card__bottom p{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 700;
}

/* -------------------------
  レスポンシブ
------------------------- */
@media (max-width: 980px){
  .hy-rules{
    padding: 70px 0 80px;
  }

  .hy-rules__titleText{
    font-size: 21px;
  }

  .hy-rule-card__catchMain{
    font-size: 24px;
  }
}

@media (max-width: 767px){
  .hy-rules{
    padding: 60px 0 70px;
  }

  .hy-rules__head{
    margin-bottom: 34px;
  }

  .hy-rules__logo img{
    height: 24px;
  }

  .hy-rules__titleText{
    font-size: 5.4vw;
  }

  .hy-rules__cards{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hy-rule-card{
    min-height: auto;
  }

  .hy-rule-card__icon img{
    width: 64px;
  }

  .hy-rule-card__catchTop{
    font-size: 16px;
  }

  .hy-rule-card__catchMain{
    font-size: 24px;
  }

  .hy-rule-card__bottom p{
    font-size: 14px;
  }
}

/* =========================
   FAQ
========================= */
.hy-faq{
  background:#fff;
  padding:80px 0;
}

.hy-faq__inner{
  width:90%;
  max-width:1000px;
  margin:0 auto;
}

.hy-faq__title{
  text-align:center;
  color:var(--hy-green);
  font-size:28px;
  font-weight:900;
  margin-bottom:40px;
}

/* リスト */
.hy-faq__item{
  border-bottom:1px solid var(--hy-green);
}

/* 質問 */
.hy-faq__question{
  width:100%;
  background:none;
  border:none;
  padding:22px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-size:18px;
  font-weight:700;
  text-align:left;
}

/* 矢印 */
.hy-faq__icon{
  width:10px;
  height:10px;
  border-right:2px solid var(--hy-green);
  border-bottom:2px solid var(--hy-green);
  transform:rotate(45deg);
  transition:.3s ease;
}

/* 回答 */
.hy-faq__answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}

.hy-faq__answer p{
  padding:0 10px 24px;
  font-size:15px;
  line-height:1.9;
  font-weight:500;
}

/* 開いた状態 */
.hy-faq__item.is-open .hy-faq__answer{
  max-height:800px;
}

.hy-faq__item.is-open .hy-faq__icon{
  transform:rotate(-135deg);
}

/* ======================================
  Footer
====================================== */
.hy-footer{
  background: var(--hy-footer-bg);
  color: #fff;
}

/* 上段：ロゴ＋リンク */
.hy-footer__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding-top: 18px;
  padding-bottom: 18px;
}

/* ロゴ */
.hy-footer__logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.hy-footer__logo img{
  display: block;
  height: 42px;   /* 画像の見え方寄せ：必要なら微調整OK */
  width: auto;
}

/* 右上リンク（区切り線あり） */
.hy-footer__links{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  flex-wrap: wrap;
}

.hy-footer__links a{
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  padding: 6px 14px;
  line-height: 1;
  white-space: nowrap;
}

.hy-footer__links a + a{
  border-left: 1px solid rgba(255,255,255,.6);
}

.hy-footer__links a:hover{
  opacity: .85;
  text-decoration: underline;
}

/* 中段：会社情報（中央寄せ） */
.hy-footer__body{
  padding-top: 34px;
  padding-bottom: 34px;
}

.hy-footer__info{
  width: 60%;
  margin: 0;
  text-align: left;
  font-weight: 800;
  font-size: 15px;
  line-height: 2.0;
  letter-spacing: .02em;

  /* 文章が長いので読みやすい最大幅 */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* SP */
@media (max-width: 767px){
  .hy-footer__top{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .hy-footer__logo img{
    height: 38px;
  }

  .hy-footer__links{
    justify-content: center;
  }

  .hy-footer__links a{
    font-size: 13px;
    padding: 8px 12px;
  }

  .hy-footer__body{
    padding-top: 24px;
    padding-bottom: 26px;
  }

  .hy-footer__info{
    width: 90%;
    font-size: 14px;
    line-height: 1.9;
  }
}

/* ======================================
  Responsive - Tablet
====================================== */
@media (max-width: 1024px){
  .hy-header__inner{
    height: var(--hy-header-h-tab);
  }

  .hy-header__logo img{
    height: 50px;
  }

  .hy-header__actions{
    gap: 12px;
  }

  .hy-btn{
    height: 38px;
    padding: 0 18px;
    font-size: 14px;
  }

  .hy-btn--menu,
  .hy-btn--send{
    min-width: 150px;
  }

  html{
    scroll-padding-top: 80px;
  }

  .hy-hero__left{
    padding: 42px 22px;
  }

  .hy-hero__titleLogo img{ height: 38px; }
  .hy-hero__catch{ font-size: 24px; }

  .hy-hero__feeLead{ font-size: 30px; }
  .hy-hero__feeSub{  font-size: 24px; }
  .hy-hero__feeZero{ font-size: 84px; }
  .hy-hero__feeUnit{ font-size: 30px; }
  .hy-hero__desc{    font-size: 24px; }

  .hy-hero__videoWrap{
    min-height: 320px;
  }
}

/* ======================================
  Responsive - SP
====================================== */
@media (max-width: 767px){
  :root{
    --hy-gutter: 12px;
  }

  /* ヘッダー */
  .hy-header__inner{
    height: var(--hy-header-h-sp);
    gap: 10px;
    padding: 0 var(--hy-gutter);
  }

  .hy-header__logo img{
    height: 30px;
  }

  .hy-header__actions{
    gap: 10px;
  }

  .hy-menuText{ display:none; }

  .hy-btn--menu{
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    position: relative;
    font-size: 0;
  }

  .hy-btn--menu::after{
    content: none !important;
    border: none !important;
  }

  .hy-menuIcon{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    background: #fff;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    transition: .22s ease;
  }

  .hy-menuIcon::before,
  .hy-menuIcon::after{
    content:"";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: .22s ease;
  }
  .hy-menuIcon::before{ top: -6px; }
  .hy-menuIcon::after{  top:  6px; }

  .hy-menu.is-open .hy-menuIcon{ background: transparent; }
  .hy-menu.is-open .hy-menuIcon::before{ top: 0; transform: rotate(45deg); }
  .hy-menu.is-open .hy-menuIcon::after{ top: 0; transform: rotate(-45deg); }

  .hy-btn--send{
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
    position: relative;
    overflow: hidden;
  }

  .hy-btn--send::before{
    content:"";
    position:absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 16px;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 3px;
    box-sizing: border-box;
  }

  .hy-btn--send::after{
    content:"";
    position:absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -62%);
    background:
      linear-gradient(135deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
      linear-gradient(225deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  /* SPメニュー：hover無効 */
  .hy-menu:hover .hy-menu__panel{
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
  }

  .hy-menu__panel{
    position: fixed;
    top: var(--hy-header-h-sp);
    left: 0;
    right: 0;

    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px;

    background: transparent;

    border: 0;
    border-bottom: 3px solid var(--hy-red);
    border-radius: 0 0 18px 18px;

    box-shadow: 0 12px 28px rgba(0,0,0,.18);

    overflow-x: hidden;

    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:.18s ease;
  }

  .hy-menu.is-open .hy-menu__panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .hy-menu__panel-inner{
    width: 100%;
    max-width: 100%;
    margin: 0 auto;

    background: #fff;
    border-radius: 16px;
    padding: 14px;

    display:flex;
    flex-direction:column;
    gap: 12px;

    border: 3px solid var(--hy-red);
  }

  .hy-menu__top{
    height: 44px;
    font-size: 15px;
  }

  .hy-menu__item{
    height: 48px;
    font-size: 15px;
  }

  html{
    scroll-padding-top: 72px;
  }

  /* Hero：SPは動画が上 */
  .hy-hero__inner{
    flex-direction: column-reverse;
  }

  .hy-hero__left{
    padding: 26px 16px;
  }

  .hy-hero__leftInner{
    max-width: 560px;
  }

  .hy-hero__titleLogo img{ height: 34px; }
  .hy-hero__titleText{ font-size: 22px; }
  .hy-hero__catch{ font-size: 22px; }

  .hy-hero__fee{ gap: 10px; }
  .hy-hero__feeLead{ font-size: 28px; }
  .hy-hero__feeSub{  font-size: 22px; }
  .hy-hero__feeZero{ font-size: 76px; }
  .hy-hero__feeUnit{ font-size: 28px; }
  .hy-hero__desc{    font-size: 22px; }

  /* 動画をフルワイド */
  .hy-hero__right{
    width: 100vw;
    max-width: 100vw;
    flex: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .hy-hero__videoWrap{
    width: 100%;
    height: 56vw;
    min-height: 220px;
    max-height: 70vh;
  }

  /* CTA（緑）SP：縦並び */
  .hy-cta-green{
    padding: 22px 0;
  }

  .hy-cta-green__inner{
    flex-direction: column;
    gap: 14px;
  }

  .hy-cta-green__illus{
    flex: 0 0 auto;
    max-width: 210px;
  }

  .hy-cta-green__illus img{
    width: 40%;
  }

  .hy-cta-green__lead{
    font-size: 18px;
  }

  .hy-cta-green__sub{
    margin-top: 10px;
    font-size: 13px;
    gap: 10px;
  }
  .hy-cta-green__sub::before,
  .hy-cta-green__sub::after{
    width: 56px;
  }

  .hy-cta-green__btn{
    width: 100%;
    max-width: 330px;
    height: 54px;
    font-size: 18px;
    padding: 0 18px;
  }

  /* 使いやすさ：縦 */
  .hy-ease{
    padding: 44px 0;
  }

  .hy-ease__title{
    font-size: 22px;
    margin-bottom: 20px;
  }

  .h2-sm-vw{
    font-size: 5.3vw;
  }

  .hy-ease__list{
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .hy-ease__item{
    flex: none;
    width: 100%;
    max-width: 420px;
  }

  .hy-ease__item img{
    width: 80%;
    margin: 0 auto 30px;
  }

  /* 選ばれる理由：縦 */
  .hy-r{
    padding: 26px 0 0;
  }

  .hy-r__inner{
    flex-direction: column;
    gap: 18px;
  }

  .hy-r__circle{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    padding: 22px;
  }

  .hy-r__circle-lead{ font-size: 22px; }
  .hy-r__circle-main{ font-size: 30px; }

  .hy-r__sep{ margin-top: 22px; }

  /* 理由2：縦＋矢印回転 */
  .hy-r2__title{
    font-size: 22px;
    margin-bottom: 14px;
  }

  .hy-r2__flow{
    flex-direction: column;
    gap: 14px;
  }

  .hy-r2__flow img:not(.hy-r2__arrow){
    width: 92%;
    max-width: 420px;
    margin: 0 auto;
  }

  .hy-r2__image {
    width: 90% !important;
  }

  .hy-r2__arrow{
    width: 20%;
    margin: -100px auto;
    transform: rotate(90deg);
  }

  .hy-r2__people{
    display: none !important;
  }

  /* 理由3：丸を上へ */
  .hy-r3__grid{
    flex-direction: column-reverse;
  }

  .hy-r3__title{ font-size: 22px; }

  /* 理由4：カード縦 */
  .hy-r4{
    padding-bottom: 48px;
  }

  .hy-r4__cards{
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }

  .hy-r4__cards img{
    width: 92%;
    max-width: 420px;
  }

  /* CTA（赤）SP */
  .hy-cta-red{
    padding: 34px 0 22px;
  }
  .hy-cta-red__logo{
    height: 20px;
  }

  /* スライダーSP */
  .hy-slider{
    padding: 40px 0;
  }

  .hy-slider__frame{
    padding: 18px 56px;
    border-radius: 22px;
  }

  .hy-slider__track{
    gap: 16px;
  }

  .hy-slider__slide{
    flex-basis: 100%;
  }

  .hy-slider__slide img{
    width: 86%;
  }

  .hy-slider__btn{
    width: 46px;
    height: 46px;
  }

  .hy-slider__btn img{
    width: 46px;
  }

  .hy-slider__btn--prev{ left: 10px; }
  .hy-slider__btn--next{ right: 10px; }

  /* ご利用の流れ：縦 */
  .hy-flow{
    padding: 50px 0;
  }

  .hy-flow__title{
    font-size: 26px;
    margin-bottom: 14px;
  }

  .hy-flow__title-line{
    margin-bottom: 28px;
  }

  .hy-flow__steps{
    flex-direction: column;
    gap: 22px;
  }

  .hy-flow__step{
    padding: 44px 18px 26px;
  }

  .hy-flow__step-no{
    font-size: 28px;
    transform: translate(-50%, -60%);
  }

  .hy-flow__step-title{
    font-size: 18px;
  }

  .hy-flow__step-title::after{
    width: 140px;
    height: 16px;
  }
}

/* ======================================
  仲介手数料ページ：ヘッダー直下 見出し（下線だけ画像）
====================================== */
.hy-fee-hero{
  background: #fff;
  padding: 34px 0 22px;
}

.hy-fee-hero__title{
  margin: 0;
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.35;
}

.hy-fee-hero__line1,
.hy-fee-hero__line2{
  display: block;
}

.hy-fee-hero__green{ color: var(--hy-green); }
.hy-fee-hero__red{ color: var(--hy-red); }

.hy-fee-hero__line1{
  font-size: clamp(20px, 2.4vw, 34px);
}

.hy-fee-hero__line2{
  margin-top: 6px;
  font-size: clamp(20px, 2.4vw, 34px);
}

/* 下線画像 */
.hy-fee-hero__underline{
  margin-top: 18px;
  line-height: 0; /* 画像下の謎余白防止 */
  display: flex;
  justify-content: center;
}

.hy-fee-hero__underline img{
  width: min(980px, 92vw);
  height: auto;
  display: block;
}

/* SP */
@media (max-width: 767px){
  .hy-fee-hero{
    padding: 22px 0 16px;
  }

  .hy-fee-hero__underline{
    margin-top: 14px;
  }
}

/* ======================================
  仲介手数料について｜説明セクション
====================================== */
.hy-fee-detail{
  background:#f3ffe6;
  padding:60px 0;
}

.hy-fee-detail__inner{
  max-width:960px;
  margin:0 auto;
  padding:0 20px;
}

.hy-fee-detail__title{
  text-align:center;
  font-size:26px;
  font-weight:900;
  margin-bottom:20px;
}

.hy-fee-detail__sub{
  margin:32px 0 12px;
  font-size:20px;
  font-weight:900;
}

.hy-fee-detail__text{
  font-size:15px;
  line-height:1.9;
}

.red{ color:#e43b3b; }
.green{ color:#1ea85b; }

/* 仲介手数料のきまり */
.hy-fee-rule{
  margin:50px 0;
}

.hy-fee-rule__title{
  background:#e43b3b;
  color:#fff;
  text-align:center;
  font-weight:900;
  padding:14px;
  border-radius:12px;
  font-size:20px;
}

.hy-fee-rule__cards{
  display:flex;
  gap:20px;
  margin-top:20px;
}

.hy-fee-rule__card{
  flex:1;
  background:#f1f1f1;
  border-radius:14px;
  padding:20px;
  text-align:center;
}

.hy-fee-rule__card.is-exception{
  background:#ffe8e8;
}

.hy-fee-rule__card img{
  max-width:100%;
  height:auto;
}

.hy-fee-rule__card-text{
  margin-top:14px;
  font-size:14px;
  line-height:1.6;
}

/* フロー */
.hy-fee-flow{
  background:#fff;
  border-radius:14px;
  padding:20px;
  margin-top:24px;
}

.hy-fee-flow img{
  max-width:100%;
  height:auto;
  display:block;
  margin-bottom:10px;
}

.hy-fee-flow__result{
  text-align:right;
  font-size:18px;
  font-weight:900;
}

/* まとめ */
.hy-fee-summary{
  background:#ffe8e8;
  border-radius:14px;
  padding:24px;
  margin-top:40px;
  font-size:14px;
  line-height:1.9;
}

/* SP */
@media (max-width:767px){
  .hy-fee-rule__cards{
    flex-direction:column;
  }
}

/* =========================
   利用規約（terms.php）
========================= */

.hy-terms{
  padding: 56px 0 80px;
}

.hy-terms__inner{
  width: min(900px, 92%);
  margin: 0 auto;
}

.hy-terms__title{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0;
}

.hy-terms__underline{
  margin-top: 10px;
  height: 2px;
  width: 100%;
  background: var(--hy-red);
}

.hy-terms__body{
  margin-top: 18px;
  color: #111;
  font-size: 12px;
  line-height: 1.85;
}

.hy-terms__body h2{
  font-size: 14px;
  font-weight: 700;
  margin: 28px 0 10px;
}

.hy-terms__body h3{
  font-size: 12.5px;
  font-weight: 700;
  margin: 14px 0 6px;
}

.hy-terms__body p{
  margin: 0 0 10px;
}

.hy-terms__body ol{
  margin: 8px 0 12px 1.4em;
  padding: 0;
}

.hy-terms__body li{
  margin: 4px 0;
}

.hy-terms__body ol ol{
  margin-top: 6px;
  margin-bottom: 6px;
}

/* SP微調整 */
@media (max-width: 767px){
  .hy-terms{
    padding: 40px 0 64px;
  }
  .hy-terms__title{
    font-size: 20px;
  }
  .hy-terms__body{
    font-size: 12px;
  }
}

/* =========================
   プライバシーポリシー（privacy-policy.php）
========================= */

.hy-privacy{
  padding: 56px 0 80px;
}

.hy-privacy__inner{
  width: min(900px, 92%);
  margin: 0 auto;
}

.hy-privacy__title{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0;
}

.hy-privacy__underline{
  margin-top: 10px;
  height: 2px;
  width: 100%;
  background: var(--hy-red);
}

.hy-privacy__body{
  margin-top: 18px;
  color: #111;
  font-size: 12px;
  line-height: 1.85;
}

.hy-privacy__body h2{
  font-size: 14px;
  font-weight: 700;
  margin: 28px 0 10px;
}

.hy-privacy__body h3{
  font-size: 12.5px;
  font-weight: 700;
  margin: 14px 0 6px;
}

.hy-privacy__subhead{
  font-size: 12px;
  font-weight: 700;
  margin: 10px 0 6px;
}

.hy-privacy__body p{
  margin: 0 0 10px;
}

.hy-privacy__body ul{
  margin: 8px 0 12px 1.2em;
  padding: 0;
}

.hy-privacy__body li{
  margin: 4px 0;
}

/* SP微調整 */
@media (max-width: 767px){
  .hy-privacy{
    padding: 40px 0 64px;
  }
  .hy-privacy__title{
    font-size: 20px;
  }
  .hy-privacy__body{
    font-size: 12px;
  }
}