/* =========================================================
  00) Base
========================================================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
html, body{
  font-family: "Noto Sans JP", system-ui, -apple-system,
   "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* =========================================================
  01) Header fixed (JSで高さ制御)
========================================================= */
:root{
  --headerH: 72px;       /* JS前の仮高さ：小さめに */
  --fixedCtaH: 72px;     /* 固定フッターの高さ目安*/
}

/* Header */
.global-header{
  background:#fff;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.global-header__inner{
  max-width:1080px;
  margin:0 auto;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

/* ロゴ（横幅で制御：崩れにくい） */
.global-header__logo{
  display:block;
  flex: 0 1 auto;
  min-width: 0;
}
.global-header__logo img{
  display:block;
  height: 55px;       /*見た目の基準 */
  width:auto;
}

/* 右側 */
.global-header__right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* CTA */
.global-header__cta{
  display:block;
}
.global-header__cta img{
  display:block;
  height: 55px;       /* ロゴと同じ高さ */
  width:auto;
}

/* Hamburger：フッターCTAのアイコン（56px）に寄せる */
.global-header__hamburger{
  width: 56px;
  height: 56px;
  background:#f28c00;
  border:0;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  border-radius: 10px;
  flex: 0 0 auto;
}

/* 3本線 */
.hamburger-lines{
  width: 28px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.hamburger-lines span{
  display:block;
  height: 3px;
  width:100%;
  background:#fff;
  border-radius:4px;
}

/* 超小型端末：CTAを少し縮める */
@media (max-width: 360px){
  .global-header__logo img{ height: 55px; }
  .global-header__cta img{ height: 55px; }
  .global-header__hamburger{ width: 52px; height: 52px; }
}

/* =========================================================
  02) NAV Overlay
========================================================= */
.nav-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}
.is-nav-open .nav-overlay{
  pointer-events:auto;
  opacity:1;
}
.nav-overlay__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,0,0,0.5);
  cursor:pointer;
}

/* NAV 閉じるボタン */
.nav-close{
  position:absolute;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
  border:none;
  background:#f28c00;
  color:#fff;
  font-size:32px;
  font-weight:700;
  line-height:1;
  border-radius:50%;
  cursor:pointer;
  display:grid;
  place-items:center;
}

/* パネル */
.nav-panel{
  position:absolute;
  top:0;
  right:0;
  width:min(360px, 85vw);
  height:100%;
  background:#fff;
  transform:translateX(100%);
  transition:transform .25s ease;
  display:flex;
  flex-direction:column;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
}
.is-nav-open .nav-panel{ transform:translateX(0); }

/* パネル内ロゴ */
.nav-panel__top{ padding:20px; }
.nav-panel__logo img{ width:180px; height:auto; }

/* メニューリスト */
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #eee;
  overflow-y: auto;
}
.nav-list li{ border-bottom:1px solid #eee; }
.nav-list a{
  position:relative;
  display:block;
  padding:18px 20px;
  font-size:16px;
  font-weight:700;
  color:#333;
}
.nav-list a::after{
  content:"›";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  color:#f28c00;
}

/* パネル下部 */
.nav-panel__bottom{
  margin-top:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background: #f9f9f9;
}
.nav-panel__cta img,
.nav-panel__tel img{ width:100%; height:auto; }


/* =========================================================
  03) Main
========================================================= */
.page-main{
  padding:0;
  margin:0;
  padding-top: 72px;
  line-height:0;
  font-size:0;
}
.image-list{
  width: 100%;
  display:flex;
  flex-direction:column;
}
.image-list img{
  width:100%;
  height:auto;
  display:block;
  margin:0;
}

.message-section {
  font-size: 16px !important; 
  line-height: 1.8 !important;
 }

 .message-section h1,h2{
  text-align: center;
  color: #FF924C;
 }

/* =========================================
   想い・メッセージ専用
   ========================================= */
 .concept-message {
    background: #fff;
    padding: 0 0 0 0;
    /* フォント設定リセット */
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    color: #333;
    line-height: 1.8 !important;
    font-size: 16px !important;
    text-align: center; /* ベースは中央配置 */
 }
  
  /* 内部の揃え */
  .concept-inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: left; /* テキスト本文は読みやすく左揃え */
  }
  
  /* クラス名を専用のものに変更して定義 */
  .concept-message .msg-top-image { width: 100%; max-width: 600px; margin: 0 auto 40px; }
  .concept-message .msg-head { font-size: 1.25rem; font-weight: 700; margin-bottom: 50px; text-align: left; }
  .concept-message .txt-pink-hand { color: #eb6ea5; font-size: 1.4rem; }
  .concept-message .txt-marker-red { background: linear-gradient(transparent 70%, #ffcccc 70%); font-weight: 900; }
  .concept-message .msg-box-beige { background-color: #fff5ee; padding: 30px; margin: 40px 0; border-radius: 4px; }
  .concept-message .msg-box-gray { background-color: #f7f7f7; padding: 30px; margin: 40px 0; border-radius: 4px; }
  
  /* チェックリストも専用指定 */
  .concept-message .msg-check-list { list-style: none; padding: 0; margin: 0; }
  .concept-message .msg-check-list li::before {
    content: "✔";
    color: #ffcc00;
    margin-right: 10px;
  }

.concept-top-img {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 40px;
}
.concept-top-img img {
  width: 100%;
  height: auto;
}

/* --- 2. キャッチコピー --- */
.concept-head {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 50px;
  text-align: left;
}

/* --- 3. 本文共通 --- */
.concept-text {
  margin-bottom: 30px;
  font-weight: 500;
}
.mt-mid { margin-top: 30px; }

/* --- 4. 手書き画像 (subcatch_3.png) --- */
.concept-hand-img {
  margin: 40px 0;
  text-align: center;
}
.concept-hand-img img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* --- テキスト装飾 --- */
/* 黒い細い下線 */
.txt-underline-black {
  background: linear-gradient(transparent 90%, #333 90%);
  font-weight: 700;
}

/* オレンジ太線 */
.txt-orange-border {
  color: #f28c00;
  border-bottom: 3px solid #f28c00;
  font-weight: 900;
  font-size: 1.1em;
}

/* オレンジの大文字 */
.txt-orange-big {
  color: #f28c00;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.6;
}

/* --- 5. ベージュ背景ボックス --- */
.concept-box-beige {
  background-color: #fff5ee; /* 薄いオレンジベージュ */
  padding: 30px;
  margin: 40px 0;
  border-radius: 8px;
  text-align: left;
}
.concept-text-bold {
  font-weight: 700;
  margin: 0;
  font-size: 1.1rem;
}

/* --- 6. 解決策エリア --- */
.concept-solution {
  margin-bottom: 40px;
}

/* --- 7. グレー背景ボックス（リスト） --- */
.concept-box-gray {
  background-color: #f7f7f7;
  padding: 30px;
  margin: 40px 0;
  border-radius: 8px;
}
.concept-box-title {
  font-size: 1.1rem;
  font-weight: 900;
  margin: 0 0 20px 0;
  text-align: center;
}

/* チェックリスト */
.concept-check-list {
  list-style: none;
  padding: 0;
  display: table; /* 中央寄せしつつ左揃えにするテクニック */
}
.concept-check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-weight: 700;
}
.concept-check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffcc00;
  font-size: 1.2em;
  font-weight: 900;
}

/* --- スマホ調整 --- */
@media (max-width: 640px) {
  .concept-inner { padding: 0 40px; }
  .concept-head { font-size: 1.1rem; }
  .txt-pink-hand { font-size: 1.3rem; }
  .txt-orange-big { font-size: 1.2rem; }
}

 /* 経路検索セクション */
.access-action{
  background-color: #FFF5EE; /* 薄いオレンジ背景 */
  padding: 25px 15px;
  border-radius: 15px;
  border: 2px dashed #FF914D;
  margin-bottom: 20px;
}

.access-text {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.map-button {
  display: block;
  background: linear-gradient(to bottom, #FFB347, #FF914D);
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  padding: 30px;
  border-radius: 50px;
  box-shadow: 0 4px 0 #e67e22;
  transition: 0.2s;
}

.map-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #e67e22;
}

.map-icon {
  margin-right: 8px;
}

 .container {
  /* 最大幅の設定（ラフの比率を維持） */
  max-width: 600px;
  margin: 0 auto;
  
  /* ラフに合わせた背景色とフォント設定 */
  background-color: #FFF5EE; 
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  
  /* 読み込み負荷を最小にする設定 */
  overflow: hidden;
  line-height: 1.6;
  text-align: center;
}

/* 画像がコンテナからはみ出さないための必須指定 */
.container img {
  width: 100%;
  height: auto;
  display: block;
}

/* 2. おすすめセクション */
.recommend-section {
  padding: 20px 20px;
  text-align: center;
}
.recommend-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}
.recommend-list {
  background-color: #fff;
  text-align: left;
  display: inline-block;
  list-style: none; /* デフォルトの黒丸を消す */
  padding: 20px;
}

.recommend-list li {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  padding-left: 1.5em; /* 文頭の点のスペース */
  position: relative;
  color: #333; /* 文字色を明示 */
}

/* 文頭に小さなオレンジの丸をつける場合（ラフの雰囲気に合わせる） */
.recommend-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: #FF914D; /* オレンジ色 */
  font-size: 0.8em;
}

/* 2-1. メリットセクション（お得・便利） */
.benefits-container {
  padding: 20px 40px;
}
.benefit-box {
  display: flex;
  align-items: center;
  background-color: transparent;
  margin-bottom: 20px;
}
.benefit-label {
  background-color: #FF914D; /* オレンジ色 */
  color: #fff;
  font-weight: bold;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.benefit-text {
  padding-left: 20px;
  text-align: left;
  list-style: none;
  margin: 0;
}
.benefit-text li {
  font-weight: bold;
  font-size: 1rem;
}

/* Map */
.map-wrap{ width:100%; }
.map-wrap iframe{
  width:100%;
  height:300px;
  display:block;
  padding-bottom: 40px;
}


/* 3. Reviewセクション */
.review-section{
  padding: 30px;
  background:#fff;
}

.review-title{
  text-align:center;
  font-size:clamp(28px, 4vw, 44px);
  font-weight:900;
  line-height:1.2;
  padding: 0 0 20px 0;
}

.review-subtitle{
  margin:0 0 20px;
  font-size:44px;
  font-weight:800;
  color:#f28c00;
  letter-spacing:.02em;
}

.review-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}

.review-item{
  border:2px solid #f28c00;
  padding:16px;
  background:#fff;
}

.review-item img{
  width:100%;
  height:auto;
  display:block;
}

.review-meta{
  margin:10px 0 8px;
  padding: 10px 0;
  font-size:14px;
  font-weight:800;
  color:#222;
}

.review-text{
  font-size: 16px;
  margin:0;
  line-height:1.75;
  color:#222;
}

/* 端末対応 */
@media (max-width: 900px){
  .review-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .review-subtitle{
    font-size:34px;
  }
  .review-list{
    grid-template-columns:1fr;
  }
}
/* =========================================================
  03) おすすめ物件
========================================================= */
.fee-card{
  max-width:1080px;
  margin:0 auto;
  background:#ffe200;           /* 外枠の黄色 */
  padding:18px;
}

section#last{
  margin-bottom: 30px;
}

.fee-card__media{
  position:relative;
  margin:0;
  background:#fff;
  border:6px solid #fff;
}

.fee-card__media img{
  width:100%;
  height:auto;
  display:block;
}

/* 左上の黒ラベル */
.fee-card__tag{
  position:absolute;
  left:18px;
  top:18px;
  background:#111;
  color:#fff;
  font-weight:900;
  padding:10px 16px;
  font-size:clamp(18px, 2.4vw, 34px);
  letter-spacing:.02em;
}

/* 下部エリア */
.fee-card__footer{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:0;
  background:#fff;
  margin-top:0;
}

/* 左（仲介手数料 + 80,000） */
.fee-card__left{
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.fee-card__label{
  margin:0 0 10px;
  font-size:clamp(16px, 2vw, 28px);
  font-weight:900;
}
.fee-card__price{
  margin:0;
  font-weight:900;
  line-height:1;
}
.fee-card__price-num{
  font-size:clamp(42px, 6vw, 92px);
}

/* 右（オレンジ帯＋0円） */
.fee-card__right{
  position:relative;
  background:#f28c00;
  color:#fff;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:18px 22px;
  overflow:hidden;
}

/* 左側の矢印（黒帯の切り欠き） */
.fee-card__right::before{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  width:0;
  height:0;
  border-top: 200px solid transparent;
  border-bottom: 500px solid transparent;
  border-left: 150px solid #fff; /* 白地に切り抜く */
}

/* 0円 */
.fee-card__zero{
  font-weight:700;
  font-size:50pt;
  line-height:1;
}

/* SP調整 */
@media (max-width: 720px){
  .fee-card__footer{
    grid-template-columns: 1fr;
  }
  .fee-card__right{
    justify-content:center;
  }
  .fee-card__right::before{
    display:none; /* スマホでは簡略化 */
  }
}


/* =========================================================
  04) 選ばれる理由
========================================================= */
/* 仲介手数料0円の理由 */
.reason-section{
  background:#ffe200;
  padding:54px 16px 64px;
}

.reason-title{
  max-width:1080px;
  margin:0 auto 28px;
  background:#fff;
  text-align:center;
  font-weight:900;
  font-size:clamp(24px, 4.2vw, 44px);
  line-height:1.25;
  padding:26px 16px;
  position:relative;
}

/* 吹き出しの三角 */
.reason-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:24px solid transparent;
  border-right:24px solid transparent;
  border-top:18px solid #fff;
}

.reason-illustration{
  display:block;
  width:min(1080px, 100%);
  height:auto;
  margin:0 auto;
}

/* 枠付き説明ボックス */
.reason-box{
  max-width:1080px;
  margin:0 auto;
  background:#fff;
  border:2px solid #f28c00;
  padding:26px 22px;
  font-size:16px;
  line-height:1.85;
}

.reason-box p{
  margin:0 0 14px;
}
.reason-box p:last-child{
  margin-bottom:0;
}

/* SP調整 */
@media (max-width:640px){
  .reason-section{
    padding:40px 14px 52px;
  }
  .reason-title{
    padding:22px 14px;
  }
  .reason-title::after{
    bottom:-14px;
    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-top:14px solid #fff;
  }
  .reason-box{
    padding:20px 16px;
  }
}

/* 仲介手数料比較表 */
.compare-section{
  background:#fff;
}

.compare-title{
  max-width:1080px;
  margin:0 auto;
  background:#fff;
  text-align:center;
  font-weight:900;
  font-size:clamp(24px, 4.2vw, 44px);
  line-height:1.25;
  padding:26px 16px;
  position:relative;
}

/* 表の外枠を丸く＆当社ヘッダをオレンジに */
.compare-table-wrap{
  max-width:1080px;
  border-radius:18px;
  overflow:hidden;
  border:2px solid #bdbdbd;
}

/* table */
.compare-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.compare-table th,
.compare-table td{
  border:1px solid #bdbdbd;
  padding:16px 14px;
  text-align:center;
  vertical-align:middle;
  font-size:16px;
  font-weight:700;
  white-space: normal; 
  line-height: 1.2rem;
}

/* ヘッダ */
.compare-th{
  font-size:18px;
  font-weight:900;
  background:#fff;
  white-space: normal; 
  line-height: 1.2rem;
}

.compare-th--us{
  background:#f28c00;
  color:#fff;
  font-size:34px;
  letter-spacing:.02em;
}

.compare-th--item{
  width:28%;
}
.compare-th--other{
  width:36%;
}
.compare-th--us{
  width:36%;
}

/* 左列（費用項目）＝黄色 */
.compare-rowhead{
  text-align:center;
  font-weight:900;
  background:linear-gradient(#ffd84d,#ffbf2e);
}

/* 当社 0円 の強調 */
.compare-us-cell{
  color:#f28c00;
  font-weight:900;
}

.compare-zero{
  font-size:64px;
  line-height:1;
}

.compare-yen{
  font-size:28px;
  margin-left:6px;
}

.compare-us-note{
  font-weight:900;
  font-size:18px;
}

/* 下の大見出し */
.compare-lead{
  max-width:1080px;
  margin:0 auto;
  background:#fff;
  text-align:center;
  font-weight:900;
  font-size:clamp(24px, 4.2vw, 44px);
  line-height:1.25;
  padding:26px 16px;
  position:relative;
}

/* 下部イラスト＋黄色帯 */
.compare-illustration{
  width:100%;
  max-width:1080px;
  display:block;
  margin:0 auto;
}

/* 画像の下に黄色帯が必要なら：セクション末尾に帯を作る */
.compare-section::after{
  content:"";
  display:block;
  height:160px;
  background:#ffe200;
  margin-top:-120px; /* イラストに重ねる微調整 */
}

/* SP調整 */
@media (max-width:640px){
  .compare-table th,
  .compare-table td{
    font-size:14px;
    padding:12px 10px;
  }
  .compare-th--us{
    font-size:22px;
  }
  .compare-zero{
    font-size:46px;
  }
  .compare-yen{
    font-size:22px;
  }
  .compare-us-note{
    font-size:15px;
  }
}

/* ================================
   05) 特典紹介
================================ */
.benefit-section{
  background:#f7ded2;            /* うすいピンク背景 */
  padding:42px 16px 30px;
}

/* 上のバナー（画像1枚） */
.benefit-banner{
  max-width:1080px;
  margin:0 auto 18px;
}
.benefit-banner img{
  width:100%;
  height:auto;
  display:block;
}

/* 白いカード */
.benefit-card{
  max-width:1080px;
  margin:0 auto;
  margin-bottom: 30px;
  background:#fff;
  border:6px solid #f28c00;
  border-radius:38px;
  padding:34px 24px 36px;
}

/* アイコン＋タイトル */
.benefit-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:14px;
}

.benefit-icon{
  width:92px;
  height:auto;
  display:block;
  flex:0 0 auto;
}

.benefit-title{
  margin:0;
  font-size:clamp(30px, 4.6vw, 64px);
  font-weight:900;
  color:#f28c00;
  letter-spacing:.02em;
}

/* 説明文 */
.benefit-text{
  margin:0 0 22px;
  font-size:14px;
  line-height:1.85;
  font-weight:700;
  color:#333;
}



/* ================================
  gift2（完全オンライン）専用
================================ */

/* gift2カードだけ下の余白を少し広めに */
.benefit-card--gift2{
  margin-bottom: 40px;
}

/* タイトル画像（gift2_title）を少し大きめに見せる */
.benefit-card--gift2 .benefit-icon{
  max-width: 820px;
}

/* 説明文：中央寄せ＋少し強調 */
.benefit-card--gift2 .benefit-text{
  text-align: left;        /* カンプは左寄せ */
  font-weight: 700;
  margin-bottom: 28px;
}

/* 下部の画像エリア（gift2） */
.benefit-media{
  display: flex;
  justify-content: center;
}

/* 下部画像のサイズ制御 */
.benefit-media img{
  max-width: 880px;
  width: 100%;
  height: auto;
  display: block;
}

/* SP調整 */
@media (max-width: 720px){
  .benefit-card--gift2 .benefit-icon{
    max-width: 100%;
  }

  .benefit-card--gift2 .benefit-text{
    font-size: 16px;
    line-height: 1.8;
  }
}



/* ================================
  responsive
================================ */
@media (max-width:720px){
  .benefit-card{
    padding:26px 16px 28px;
    border-radius:28px;
  }

  .benefit-text{
    font-size:14px;
  }

  .compare-table th,
  .compare-table td{
    font-size:14px;
    padding:12px 10px;
  }

  .compare-th--us{
    font-size:22px;
  }

  .compare-zero{
    font-size:44px;
  }

  .compare-yen{
    font-size:22px;
  }

  .compare-us-note{
    font-size:15px;
  }
}





/* =========================================================
  06) CTA Animation
========================================================= */
/* CTAコンテナ全体の調整 */
.cta-container {
  width: 90%;
  background: #fff;
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
  overflow: visible; /* アイコンがはみ出すのを許可 */
}

.cta-animated-custom {
  position: relative;
  display: inline-block;
  width: 90%; /* スマホでの横幅 */
  max-width: 600px;
  text-decoration: none;
  animation: cta-float-custom 2.4s ease-in-out infinite;
}

/* ボタン画像（緑色のバー） */
.cta-button-base img {
  width: 100%;
  height: auto;
  display: block;
}

/* 人物写真の設定 */
.cta-person-icon {
  position: absolute;
  top: 50%;
  right: -5%; /* ボタンの右端に少し被せる */
  transform: translateY(-50%);
  width: 30%; /* ボタンに対する人物の大きさ */
  aspect-ratio: 1 / 1;
}

.cta-person-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%; /* 丸く切り抜き */
  border: 4px solid #34c759; /* LINEカラーの枠線 */
  background: #fff;
  display: block;
}

/* 浮遊アニメーション */
@keyframes cta-float-custom {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* ホバー時に少し大きくする */
.cta-animated-custom:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

/* =========================================================
  05) Footer
========================================================= */
.site-footer{
  background:#3a3a3a;
  color:#fff;
  text-align: center;
}
.site-footer__inner{
  max-width:1080px;
  margin:0 auto;
  padding:40px 16px 60px;
}
.footer-brand{
  display:flex;
  justify-content:center;
  margin-bottom:20px;
}
.footer-brand__img{
  max-width:100%;
}
.footer-menu{
  list-style:none;
  margin:20px 0;
  padding:0;
  border-top:1px solid #555;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-menu li{
  border-bottom:1px solid #555;
  width: 100%;
}
.footer-menu a{
  display:block;
  padding:15px;
  font-size:14px;
  color:#ccc;
}
.footer-tel img{
  width:100%;
}
.footer-company__name{
  text-align: center; /* テキストを中央に */
  width: 100%;       /* 幅を確保して中央寄せを有効にする */
  margin: 20px auto 10px; /* 左右をautoにして中央配置 */
  font-size: 1.2rem;
}
.footer-company__grid{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding-top: 20px;
}
.footer-company__logo img{
  width:120px;
  background:#fff;
  padding:5px;
  border-radius:4px;
}
.footer-company__list{
  list-style:none;
  padding:0;
  font-size:12px;
  line-height:1.6;
  text-align: left;
}

.footer-link {
  color: #aaa;
  display: inline-block; /* paddingを効かせるために必要 */
  padding: 10px 0;       /* 上下に余白を作ってタップ面積を増やす */
  min-width: 44px;       /* 最小幅を確保 */
  min-height: 44px;      /* 最小高さを確保 */
  line-height: 1.5;      /* 行間を広げて上下の誤操作を防ぐ */
  text-decoration: underline; /* リンクであることを分かりやすく（推奨） */
}

.footer-link + .footer-link {
  margin-top: 8px;       /* 隣り合うリンクとの距離を離す */
}


/* =========================================================
  06) Footer 固定CTA
========================================================= */
.fixed-footer-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  display: flex;
  justify-content: space-around;
  align-items: center;

  background: rgba(255, 255, 255, 0.65); 
  backdrop-filter: blur(6px);

  padding: 8px 6px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* 各アイコン */
.fixed-footer-cta__item{
  display: block;
  width: 56px;
  height: 56px;
}

/* 画像 */
.fixed-footer-cta__item img{
  width: 100%;
  height: 100%;
  display: block;
}

/* 押したくなる微演出 */
.fixed-footer-cta__item:active{
  transform: scale(0.94);
}

/* PCでは非表示（必要なら） */
@media (min-width: 768px){
  .fixed-footer-cta{
    display: none;
  }
}


/* =========================================================
  07) Back to Top
========================================================= */
.to-top{
  position:fixed;
  right:16px;
  bottom: 100px;
  width:55px;
  height:55px;
  border-radius:50%;
  border:none;
  background:rgba(242, 140, 0, 0.9);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:all .3s;
  z-index:1600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.to-top.is-visible{
  opacity:1;
  pointer-events:auto;
}

/* =========================================================
  99) PC / Tablet（スマホLPを崩さず“中央カラム化”）
========================================================= */

/* タブレット以上：全体を読みやすい幅に寄せる */
@media (min-width: 768px){
  /* 全体の背景（余白エリア） */
  body{
    background: #f6f6f6;
    font-size: 16pt;
  }

  /* ヘッダーの幅をコンテンツに合わせる */
  .global-header__inner {
    max-width: 720px;
    padding: 15px 20px; /* 上下左右の余白を拡大 */
  }

  /* ロゴを大きく（現在の約1.5倍〜2倍） */
  .global-header__logo img {
    height: 70px; /* 高さを指定することでバランスを維持 */
    width: auto;
  }

  /* 右側エリアのパーツ間隔を広げる */
  .header-right {
    gap: 25px;
  }

  /* LINEボタンを大きく */
  .global-header__cta img {
    height: 60px; /* ロゴに合わせて拡大 */
    width: auto;
  }

  /* ハンバーガーメニューのボタン自体を大きく */
  .global-header__hamburger {
    width: 60px;
    height: 60px;
  }

  /* 三本線の太さと幅を調整 */
  .hamburger-lines {
    width: 35px; /* 線を長く */
  }
  .hamburger-lines span {
    height: 3px; /* 線を少し太く */
  }
  
  /* ハンバーガーメニュー内の文字があれば調整（必要に応じて） */
  .global-header__hamburger::after {
    font-size: 14px;
    font-weight: bold;
  }
}
  /* メインを中央カラムに（画像も含めて） */
  .page-main{
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    padding-top: var(--headerH); /* JSで計測したヘッダー高さを反映 */
  }
    /* リンク要素すべてにホバー演出を追加 */
    a:hover img, 
    button:hover {
      opacity: 0.7;
      transition: 0.3s;
    }
  
    /* 固定フッターCTAがPCで邪魔な場合、少し透過させるかサイズを絞る */
    .fixed-footer-cta img {
      max-width: 480px; /* PCでは少し控えめに */
      margin: 0 auto;
    }
    
  /* 画像の横幅はカラムにフィットさせる */
  .image-list img{
    width: 100%;
    height: auto;
  }

  /* message-section の inline font を上書きして統一感を出す */
  .message-section{
    font-family: inherit !important;
  }

  /* ナビパネルを少し広げる */
  .nav-panel{
    width: min(420px, 40vw);
  }

  /* フッターのメニューを2列化して見やすく */
  .footer-menu{
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    gap: 0;
  }
  .footer-menu li{
    width: 50%;
  }
  
  .footer-company__grid {
    display: flex;
    flex-direction: column;
    align-items: center;    /* 子要素を中央に並べる */
    text-align: center;
  }

  /* フッター電話番号画像の中央揃え */
  .footer-tel {
  display: flex;
  justify-content: center; /* 親要素の中で中身を中央に寄せる */
  width: 100%;
  margin-bottom: 20px;     /* 下に少し余白を作る */
  }
  
  .footer-tel img {
    display: block;
    width: 320px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* 電話番号（リンク）にマウスを乗せた時の動き */
  .footer-tel:hover img {
    transform: scale(1.05); /* 少し大きくする */
    opacity: 0.8;           /* 少し薄くする */
  }
}

/* PC：さらに気持ち広く */
@media (min-width: 1024px){
  .page-main{
    max-width: 780px;
  }
}