@import url("style-base.css");

/* =========================================================
   デザイン案 v3「ポップ＋イラスト」版
   すまほ屋 公式マスコットキャラクター(スマホくん)を採用し、
   ブランドカラーの水色(#5BC0EE)をベースにした配色に統一
   ========================================================= */

/* 見出しの改行制御用(初期状態では非表示、狭い画面のみ改行を有効化) */
.hero-h1-break{ display:none; }

/* 本文内の改行制御用(スマホ表示のみ改行、PC表示では改行しない) */
.line-break-sp{ display:none; }
@media (max-width: 719px){
  .line-break-sp{ display:inline; }
}

/* 評価・要約バッジ：PC表示はヒーロー直下、スマホ表示は機種一覧の直後に切り替え */
.badge-summary-sp{ display:none; }
@media (max-width: 719px){
  .badge-summary-pc{ display:none; }
  .badge-summary-sp{ display:block; }
}

/* お知らせバー(営業時間の注意書きなど) */
.announce-bar{
  background: var(--pop-navy);
  color:#fff;
  text-align:center;
  font-size:0.8rem;
  font-weight:700;
  padding: 8px 12px;
  letter-spacing:0.01em;
}
.announce-bar a{ color:#fff; text-decoration:underline; }

:root{
  --pop-blue:#5bc0ee;       /* ブランドカラー(公式ロゴと同じ水色) */
  --pop-blue-pale:#eaf7fd;  /* 水色の淡いバックグラウンド用 */
  --pop-blue-dark:#2e9cd0;  /* ナビ・ホバー用の中間トーン */
  --pop-yellow:#dff1fb;     /* ステッカー用の淡い水色(旧イエロー枠) */
  --pop-coral:#ff8a65;      /* CTA・価格強調用のワンポイントアクセント */
  --pop-coral-dark:#e8663f;
  --pop-mint:#8fd7f0;       /* サブの水色トーン(旧ミント枠) */
  --pop-navy:#1b4965;       /* 見出し・輪郭線用のダークネイビーブルー */
  --pop-cream:#f7fbfd;
  --pop-teal:#2ec4b6;       /* 安心・保証訴求用のティール */
  --pop-mango:#ffc857;      /* お得感・キャンペーン訴求用のマンゴーイエロー */
  --pop-sand:#faf3e8;       /* 背景アクセント用のサンドベージュ */
}

body.theme-pop{
  background: var(--pop-cream);
  font-family: "Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  /* 共通CSS(style.css)のカラー変数を上書きし、全ページの
     ボタン・料金表・カードをポップ版の配色にそろえる */
  --color-primary: #2e9cd0;
  --color-primary-dark: #1b4965;
  --color-primary-light: #eaf7fd;
  --color-accent: #ff8a65;
  --color-accent-dark: #e8663f;
  --color-bg-soft: #f2f9fd;
  --color-border: #d8e6ee;
  --shadow: 0 4px 16px rgba(27,73,101,0.10);
}

.theme-pop .site-header{ border-bottom:none; box-shadow: 0 2px 0 var(--color-border); }
.theme-pop .site-nav{ background: var(--pop-navy); }
.theme-pop .site-nav a:hover, .theme-pop .site-nav a.current{ background: var(--pop-blue-dark); }
.theme-pop .header-contact .tel-link{ color: var(--pop-coral-dark); }

/* ---------- ヒーロー(波＋浮遊する星＋キャラクター) ---------- */
.pop-hero{
  position:relative;
  background: linear-gradient(180deg, #d7f4ff 0%, #eafcff 55%, var(--pop-cream) 100%);
  padding: 40px 0 70px;
  overflow:hidden;
}
.pop-hero .floaties{
  position:absolute; inset:0; pointer-events:none;
}
.pop-hero .floaties svg{
  position:absolute;
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(8deg); }
}
.pop-hero .container.hero-inner{ position:relative; z-index:1; }

.pop-badge-row{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; justify-content:center;
}

/* =========================================================
   来店予約特典バナー
   ========================================================= */
.gift-banner-wrap{ padding: 18px 0 4px; }
.gift-banner{
  display:flex;
  align-items:center;
  gap:14px;
  background: var(--pop-coral);
  color:#fff;
  text-decoration:none;
  border:2.5px solid var(--pop-navy);
  border-radius:16px;
  box-shadow: 5px 5px 0 var(--pop-navy);
  padding: 14px 16px;
  transition: transform .1s ease;
}
.gift-banner:hover,
.gift-banner:active{
  text-decoration:none;
  color:#fff;
  transform: translate(2px,2px);
  box-shadow: 3px 3px 0 var(--pop-navy);
}
.gift-banner .gift-icon{
  flex:0 0 auto;
  width:48px; height:48px;
  background:#fff;
  color: var(--pop-coral-dark);
  border:2.5px solid var(--pop-navy);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.gift-banner .gift-icon svg{ width:26px; height:26px; }
.gift-banner .gift-text{ flex:1; min-width:0; line-height:1.4; }
.gift-banner .gift-text strong{
  display:block;
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:0.01em;
}
.gift-banner .gift-text small{
  display:block;
  font-size:0.74rem;
  font-weight:700;
  opacity:0.95;
  margin-top:3px;
}
.gift-banner .gift-arrow{
  flex:0 0 auto;
  font-size:1.7rem;
  font-weight:800;
  line-height:1;
  opacity:0.9;
}

@media (max-width: 380px){
  .gift-banner{ gap:11px; padding:13px 13px; }
  .gift-banner .gift-icon{ width:42px; height:42px; }
  .gift-banner .gift-text strong{ font-size:0.92rem; }
  .gift-banner .gift-text small{ font-size:0.69rem; }
}

/* ヒーロー直下の信頼バッジ帯 */
.trust-strip{
  background: var(--pop-blue-pale);
  border-bottom: 1px solid #d8ecf7;
  padding: 16px 0 6px;
}
.trust-strip .pop-badge-row{ margin-bottom:10px; }
.sticker{
  display:inline-block;
  font-weight:800;
  font-size:0.78rem;
  padding:7px 14px;
  border-radius:999px;
  border:2.5px solid var(--pop-navy);
  background:#fff;
  color: var(--pop-navy);
  box-shadow: 3px 3px 0 var(--pop-navy);
}
.sticker.s1{ transform: rotate(-4deg); background: var(--pop-yellow); }
.sticker.s2{ transform: rotate(3deg); background: #fff; }
.sticker.s3{ transform: rotate(-2deg); background: var(--pop-blue-dark); color:#fff; border-color: var(--pop-navy);}
.sticker.s4{ transform: rotate(4deg); background: var(--pop-coral); color:#fff; border-color:var(--pop-coral-dark);}

.pop-hero h1{
  font-size: 1.7rem;
  text-align:center;
  color: var(--pop-navy);
  line-height:1.5;
  margin: 6px 0 14px;
}
.pop-hero h1 .accent{ color: var(--pop-coral-dark); }
.pop-hero .lead{
  text-align:center;
  color:#3a5673;
  font-size:0.95rem;
  max-width:520px;
  margin:0 auto 22px;
}
.pop-hero .hero-cta{ justify-content:center; }

.btn-pop{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:800;
  font-size:0.98rem;
  border:2.5px solid var(--pop-navy);
  box-shadow: 4px 4px 0 var(--pop-navy);
  transition: transform .1s ease;
}
.btn-pop:hover{ transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--pop-navy); text-decoration:none; }
.btn-pop.call{ background: var(--pop-coral); color:#fff; }
.btn-pop.price{ background: var(--pop-yellow); color: var(--pop-navy); }

.mascot-wrap{
  text-align:center;
  margin: 10px auto 0;
  max-width: 320px;
}

/* 波の区切り */
.wave-divider{ display:block; width:100%; line-height:0; margin-top:-4px; }
.wave-divider svg{ width:100%; height:60px; display:block; }

/* ---------- 機種ステッカー選択 ---------- */
.sticker-picker{
  display:flex; gap:14px; overflow-x:auto; padding: 10px 4px 20px;
  scroll-snap-type:x mandatory;
}
.sticker-picker a{
  flex:0 0 auto; scroll-snap-align:start; text-decoration:none;
  width:96px; text-align:center;
}
.sticker-picker .chip{
  width:80px;height:80px;border-radius:22px;
  background: linear-gradient(160deg,#ffc2d1,#ff8fab);
  border:2.5px solid #e75480;
  box-shadow: 3px 3px 0 #e75480;
  display:flex; align-items:center;justify-content:center;
  margin:0 auto 8px; font-size:1.7rem;
  transform: rotate(-2deg);
}
.sticker-picker a:nth-child(even) .chip{ transform: rotate(2deg); background: linear-gradient(160deg,#ffd6e2,#ffa8bf); }
.sticker-picker span{ font-weight:800; font-size:0.72rem; color: var(--pop-navy); }

.section-sand{ background: var(--pop-sand); }

/* ---------- 機種から選ぶ(一覧カード) ---------- */
.model-grid-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.model-grid-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1.5px solid var(--pop-blue);
  border-radius:14px;
  padding:10px 12px;
  text-decoration:none;
  box-shadow: 2px 2px 0 var(--pop-blue-pale);
}
.model-grid-item:hover{ background: var(--pop-blue-pale); text-decoration:none; }
.model-grid-item .model-icon{
  position:relative;
  flex:0 0 auto;
  width:52px; height:70px;
  border-radius:10px;
  background:#fff;
  border:1.5px solid var(--pop-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
}
.model-grid-item .model-icon .phone-illust{
  width:58%;
  height:auto;
  display:block;
}
.model-grid-item .model-name{
  flex:1;
  font-weight:800;
  font-size:0.95rem;
  line-height:1.3;
  color: var(--pop-navy);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.model-grid-item .model-arrow{
  position:absolute;
  right:-9px;
  top:50%;
  transform: translateY(-50%);
  width:22px; height:22px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid var(--pop-blue);
  display:flex; align-items:center; justify-content:center;
  color: var(--pop-blue-dark);
  font-weight:800;
  font-size:0.9rem;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}

@media (min-width: 560px){
  .model-grid-list{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 価格チケット ---------- */
.ticket-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.ticket{
  position:relative;
  background:#fff;
  border:2.5px solid var(--pop-navy);
  border-radius:16px;
  padding:18px 20px;
  box-shadow: 5px 5px 0 var(--pop-navy);
}
.ticket::before, .ticket::after{
  content:"";
  position:absolute;
  width:20px;height:20px;
  background: var(--pop-cream);
  border:2.5px solid var(--pop-navy);
  border-radius:50%;
  top:50%; transform:translateY(-50%);
}
.ticket::before{ left:-12px; }
.ticket::after{ right:-12px; }
.ticket .tag-label{
  display:inline-block; font-size:0.68rem; font-weight:800; color:#fff;
  padding:3px 10px; border-radius:999px; margin-bottom:6px;
}
.ticket:nth-child(1) .tag-label{ background: var(--pop-coral); }
.ticket:nth-child(2) .tag-label{ background: var(--pop-blue); }
.ticket:nth-child(3) .tag-label{ background: var(--pop-blue-dark); }
.ticket .t-model{ font-weight:800; color: var(--pop-navy); font-size:0.95rem; }
.ticket .t-price{ font-size:2rem; font-weight:900; color: var(--pop-coral-dark); line-height:1.15; }
.ticket .t-price small{ font-size:0.8rem; color:#3a5673; font-weight:700; }

/* ---------- アイコンバッジ特長 ---------- */
.icon-feature-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.icon-feature{ text-align:center; }
.icon-feature .badge-circle{
  width:88px;height:88px; border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin: 0 auto 12px;
  border:2.5px solid var(--pop-navy);
  box-shadow: 4px 4px 0 var(--pop-navy);
}
.icon-feature:nth-child(1) .badge-circle{ background: var(--pop-yellow); }
.icon-feature:nth-child(2) .badge-circle{ background: var(--pop-mint); }
.icon-feature:nth-child(3) .badge-circle{ background: var(--pop-teal); }
.icon-feature h3{ color: var(--pop-navy); font-size:1rem; margin:0 0 6px; }
.icon-feature p{ color:#3a5673; font-size:0.85rem; margin:0; }

.theme-pop .section-title h2{ color: var(--pop-navy); }
.theme-pop .section-title .en{ color: var(--pop-coral-dark); }

.theme-pop .site-footer{ background: var(--pop-navy); }
.theme-pop .mobile-cta-bar .cta-call{ background: var(--pop-coral); }
.theme-pop .mobile-cta-bar .cta-map{ background: var(--pop-blue-dark); }
.theme-pop .mobile-cta-bar .cta-line{ background:#06c755; }

@media (min-width: 720px){
  .ticket-grid{ grid-template-columns: repeat(3,1fr); }
  .icon-feature-grid{ grid-template-columns: repeat(3,1fr); }
  .pop-hero h1{ font-size:2.3rem; }

  /* PCではヒーローを大きく、キャラクターも大きめに */
  .hero-fullbleed{ min-height: 560px; padding: 60px 24px 60px; }
  .hero-fullbleed .hero-lead{ font-size:1.05rem; }
  .hero-fullbleed h1{ font-size:2.6rem; }
  .hero-fullbleed .hero-sub{ font-size:1.1rem; }
  .hero-fullbleed .hero-mascot{ width:180px; right:40px; bottom:24px; }
}

/* =========================================================
   スマホ表示 最適化(モバイルファースト調整)
   iPhone SE(375px)〜iPhone Pro Max(430px)を基準に設計
   ========================================================= */

html, body{ overflow-x: hidden; max-width:100%; }
img, svg, iframe, table{ max-width:100%; }

/* --- ヘッダー：ロゴ小さめ＋電話をボタン化 --- */
.theme-pop .header-top{
  padding: 8px 14px;
  gap: 8px;
}
.theme-pop .header-top .logo a{ text-decoration:none; }
.theme-pop .header-contact{
  display:flex;
  align-items:center;
  gap:10px;
}

.theme-pop .tel-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background: var(--pop-coral);
  color:#fff !important;
  font-weight:800;
  font-size:0.9rem;
  padding: 10px 16px;
  min-height:44px;              /* タップ領域を確保 */
  border-radius:999px;
  border:2.5px solid var(--pop-navy);
  box-shadow: 3px 3px 0 var(--pop-navy);
  text-decoration:none;
  white-space:nowrap;
}
.theme-pop .tel-cta:hover{ text-decoration:none; }
.theme-pop .tel-cta .tel-sub{
  display:block;
  font-size:0.58rem;
  font-weight:700;
  opacity:0.95;
  line-height:1.1;
}

/* --- ヘッダーのLINEボタン(PC表示のみ、電話ボタンの隣) --- */
.theme-pop .line-cta-header{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#06c755;
  color:#fff !important;
  font-weight:800;
  font-size:0.9rem;
  padding: 10px 16px;
  min-height:44px;
  border-radius:999px;
  border:2.5px solid var(--pop-navy);
  box-shadow: 3px 3px 0 var(--pop-navy);
  text-decoration:none;
  white-space:nowrap;
}
.theme-pop .line-cta-header:hover{ text-decoration:none; color:#fff; }
.theme-pop .line-cta-header svg{ width:17px; height:17px; flex:0 0 auto; }

/* =========================================================
   カラーバンド型ヘッダー(参考サイト準拠)
   ========================================================= */
/* 青い帯は画面幅いっぱいに敷き、中身だけをコンテナ幅に収める */
.theme-pop .site-header{ background: var(--pop-blue); }

.brand-band{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;   /* 右側に電話・メニュー */
  min-height:66px;
  padding: 10px 16px;
  max-width: var(--max-width);
  margin:0 auto;
}
/* 店名は左右の要素の幅に関係なく、常に帯の中央に置く */
.brand-title{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  color:#fff;
  font-size:2.35rem;
  font-weight:800;
  letter-spacing:0.1em;
  line-height:1.1;
  text-decoration:none;
  text-shadow: 0 2px 0 rgba(27,73,101,0.28);
  white-space:nowrap;
}
.brand-title:hover{ text-decoration:none; color:#fff; }

.band-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* --- ハンバーガーボタン --- */
.nav-toggle{
  display:none;
  flex:0 0 auto;
  width:52px; height:52px;
  padding:0;
  border-radius:6px;
  border:2px solid rgba(255,255,255,0.85);
  background: transparent;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  transition: background .15s ease;
}
.nav-toggle:active{ background: rgba(255,255,255,0.18); }
.nav-toggle span{
  display:block;
  width:26px; height:3px;
  border-radius:3px;
  background:#fff;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* --- ナビ：PCは横並びバー、スマホはドロワー --- */
.theme-pop .site-nav li a{
  padding: 13px 15px;
  font-size:0.85rem;
  min-height:44px;
  display:flex;
  align-items:center;
}
/* ドロワー内の電話ボタンはスマホ専用（PCでは隠す） */
.theme-pop .site-nav .nav-drawer-tel{ display:none; }

/* =========================================================
   フルブリード ヒーロー(写真＋オーバーレイ＋キャラクター)
   ========================================================= */
.hero-fullbleed{
  position:relative;
  min-height: 600px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 30px 18px 90px;
  text-align:center;
}
.hero-fullbleed .hero-bg{
  position:absolute; inset:0;
  z-index:0;
}
.hero-fullbleed .hero-bg picture,
.hero-fullbleed .hero-bg img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  object-position: center 10%;
}
/* 実店舗写真は情報量が多く明るいため、白文字が読めるよう暗幕を強めに */
.hero-fullbleed .hero-scrim{
  position:absolute; inset:0;
  z-index:1;
  background: linear-gradient(180deg,
    rgba(20,58,82,0.08) 0%,
    rgba(20,58,82,0.10) 42%,
    rgba(20,58,82,0.18) 100%);
}
/* 文字の背面に半透明パネルを敷き、写真の柄に関係なく可読性を確保 */
.hero-fullbleed .hero-content{
  position:relative;
  z-index:2;
  max-width:560px;
  width:100%;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius:16px;
  padding: 26px 20px 28px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
/* 見出し上のリード文（創業年数の訴求） */
.hero-fullbleed .hero-lead{
  display:inline-block;
  color: var(--pop-navy);
  font-size:0.92rem;
  font-weight:800;
  letter-spacing:0.02em;
  margin:0 0 12px;
  padding-bottom:7px;
  border-bottom:2px solid rgba(27,73,101,0.35);
  text-shadow:none;
}
.hero-fullbleed h1{
  color: var(--pop-navy);
  font-size:1.85rem;
  font-weight:800;
  line-height:1.45;
  margin:0 0 14px;
  text-shadow:none;
}
.hero-fullbleed .hero-sub{
  color: var(--pop-navy);
  font-size:0.95rem;
  font-weight:700;
  line-height:1.75;
  margin:14px 0 0;
  text-shadow:none;
}
/* ボタン内に特典行＋メインラベルの2段構成 */
.hero-fullbleed .hero-main-btn{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  width:100%;
  max-width:340px;
  background: var(--pop-blue);
  color:#fff;
  text-decoration:none;
  overflow:hidden;
  border-radius:6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
}
.hero-fullbleed .hero-main-btn:hover{ text-decoration:none; color:#fff; }
.hero-fullbleed .hero-main-btn:hover .btn-main{ background: var(--pop-blue-dark); }

.hero-fullbleed .hero-main-btn .btn-gift{
  display:block;
  background: var(--pop-mango);
  color: var(--pop-navy);
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.01em;
  padding: 7px 10px;
  line-height:1.35;
}
.hero-fullbleed .hero-main-btn .btn-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:56px;
  padding: 12px 20px;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:0.02em;
}
.hero-fullbleed .hero-main-btn .btn-note{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.01em;
  opacity:0.92;
}

.hero-fullbleed .hero-mascot{
  position:absolute;
  right: 8px;
  bottom: 12px;
  width: 118px;
  z-index:2;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  animation: floaty 5s ease-in-out infinite;
}

/* =========================================================
   下部固定アイコンバー(参考サイト準拠 5ボタン)
   ========================================================= */
.theme-pop .mobile-cta-bar{
  background:#fff;
  border-top:1px solid #e1e7ee;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.10);
}
.theme-pop .mobile-cta-bar a{
  padding: 7px 2px calc(6px + env(safe-area-inset-bottom));
  min-height: 72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:#fff;
  color: var(--pop-navy);
  border-right:1px solid #eef3f7;
  text-align:center;
}
.theme-pop .mobile-cta-bar a:last-child{ border-right:none; }
.theme-pop .mobile-cta-bar a svg{ width:23px; height:23px; display:block; }
.theme-pop .mobile-cta-bar .cta-label{
  font-size:0.82rem;
  font-weight:800;
  line-height:1.2;
}
.theme-pop .mobile-cta-bar .cta-note{
  font-size:0.6rem;
  font-weight:700;
  line-height:1.25;
  opacity:0.82;
  padding:0 2px;
}
.theme-pop .mobile-cta-bar .cta-call{
  background: var(--pop-coral);
  color:#fff;
}
.theme-pop .mobile-cta-bar .cta-call .cta-note{ opacity:0.95; }
body.theme-pop{ padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

@media (max-width: 380px){
  .theme-pop .mobile-cta-bar .cta-note{ font-size:0.55rem; }
  .theme-pop .mobile-cta-bar .cta-label{ font-size:0.78rem; }
}

/* --- 375px〜430px のスマホ幅で本文を最適化 --- */
@media (max-width: 719px){

  .container{ padding: 0 16px; }
  section{ padding: 32px 0; }

  /* 見出しの改行位置を「iPhone修理は／すまほ屋へ」で揃える(狭い画面での中途半端な折り返し防止) */
  .hero-h1-break{ display:initial; }

  /* ヒーロー：スマホでも料金ボタンを目立たせる */
  .hero-fullbleed .hero-main-btn{ margin-bottom:14px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
  .hero-fullbleed .hero-main-btn .btn-main{ font-size:1.2rem; min-height:58px; padding:15px 16px; }

  /* 右上をハンバーガーメニューに。営業時間・年中無休の表記は非表示 */
  .nav-toggle{ display:flex; }
  .brand-band{ min-height:60px; padding:9px 12px; }
  .band-right .tel-cta{ display:none; }
  .band-right .line-cta-header{ display:none; }
  .theme-pop .header-contact .hours,
  .theme-pop .tel-cta .tel-sub{ display:none; }

  /* 店名は帯の中央に大きく */
  .brand-title{ font-size:2.1rem; }

  /* ヒーロー：スマホ幅の微調整 */
  .hero-fullbleed{ min-height: 460px; padding: 26px 16px 40px; }
  .hero-fullbleed .hero-bg img{ object-position: 100% 0%; }
  .hero-fullbleed .hero-lead{ font-size:0.82rem; margin-bottom:10px; padding-bottom:6px; }
  .hero-fullbleed h1{ display:none; }
  .hero-fullbleed .hero-sub{ font-size:0.88rem; }
  .hero-fullbleed .hero-content{ padding: 22px 16px 24px; }
  .hero-fullbleed .hero-main-btn{ max-width:340px; }
  .hero-fullbleed .hero-main-btn .btn-gift{ font-size:0.71rem; padding:6px 8px; }
  .hero-fullbleed .hero-mascot{ width:96px; right:2px; bottom:8px; }

  /* 機種カード：アイコンの下に機種名を配置(縦積み)、文字とロゴのバランスを改善 */
  .model-grid-item{
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 10px;
    text-align:center;
  }
  .model-grid-item .model-icon{ width:46px; height:62px; font-size:1.3rem; }
  .model-grid-item .model-name{ flex:none; font-size:0.85rem; line-height:1.3; }

  /* ナビをドロワー化(閉じている状態) */
  .theme-pop .site-nav{
    max-height:0;
    overflow:hidden;
    transition: max-height .28s ease;
  }
  .theme-pop .site-nav.open{ max-height: 460px; }
  .theme-pop .site-nav ul{
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 6px 0 10px;
  }
  .theme-pop .site-nav li{ border-bottom:1px solid rgba(255,255,255,0.14); }
  .theme-pop .site-nav li:last-child{ border-bottom:none; }
  .theme-pop .site-nav li a{
    padding: 15px 20px;
    font-size:0.95rem;
    min-height:52px;
  }

  /* ドロワー内の電話ボタン（スマホのみ表示） */
  .theme-pop .site-nav .nav-drawer-tel{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin: 12px 20px 6px;
    padding: 14px;
    min-height:52px;
    background: var(--pop-coral);
    color:#fff !important;
    font-weight:800;
    font-size:1.05rem;
    border-radius:999px;
    border:2.5px solid #fff;
    text-decoration:none;
  }
  .theme-pop .site-nav .nav-drawer-tel:hover{ text-decoration:none; }

  /* お知らせバー：小さく2行まで */
  .announce-bar{ font-size:0.7rem; padding:8px 12px; line-height:1.5; }

  /* ヒーロー */
  .pop-hero{ padding: 24px 0 40px; }
  .pop-hero h1{ font-size:1.42rem; line-height:1.5; margin: 4px 0 10px; }
  .pop-hero .lead{ font-size:0.88rem; margin-bottom:16px; }

  /* ステッカーを小さめに、2行に収める */
  .pop-badge-row{ gap:7px; margin-bottom:12px; }
  .sticker{ font-size:0.7rem; padding:5px 11px; box-shadow: 2px 2px 0 var(--pop-navy); }

  /* マスコット */
  .mascot-wrap img{ width: 190px !important; }

  /* CTAボタンは縦積みで全幅 → 押しやすく */
  .pop-hero .hero-cta{
    flex-direction: column;
    gap:10px;
    align-items:stretch;
    padding: 0 6px;
  }
  .pop-hero .hero-cta .btn-pop{
    width:100%;
    justify-content:center;
    padding:15px 20px;
    min-height:52px;
    font-size:1rem;
  }

  /* 見出し */
  .section-title h2{ font-size:1.18rem; }
  .section-title p{ font-size:0.83rem; }
  .section-title .en{ font-size:0.7rem; }

  /* 機種ピッカー：はみ出しを画面端まで使ってスワイプ感を出す */
  .sticker-picker{
    gap:12px;
    padding: 10px 16px 18px;
    margin: 0 -16px;
  }
  .sticker-picker a{ width:84px; }
  .sticker-picker .chip{ width:70px; height:70px; font-size:1.5rem; border-radius:20px; }
  .sticker-picker span{ font-size:0.68rem; }

  /* 価格チケット：切り欠きが画面外に出ないよう内側に */
  .ticket{ padding:16px 22px; box-shadow: 4px 4px 0 var(--pop-navy); }
  .ticket .t-price{ font-size:1.75rem; }

  /* 特長アイコン */
  .icon-feature .badge-circle{ width:74px; height:74px; }
  .icon-feature .badge-circle svg{ width:34px; height:34px; }
  .icon-feature h3{ font-size:0.95rem; }

  /* 汎用ボタン全幅化 */
  .btn-pop{ min-height:50px; }

  /* アクセスカード */
  .access-grid .card{ padding:18px 16px; }

  /* フッター */
  .site-footer{ padding: 26px 0 16px; }
  .footer-grid{ gap:22px; }
}

/* --- iPhone SE など狭い端末(〜380px) --- */
@media (max-width: 380px){
  .pop-hero h1{ font-size:1.3rem; }
  .brand-title{ font-size:1.85rem; letter-spacing:0.06em; }
  .sticker{ font-size:0.66rem; padding:5px 9px; }
  .ticket .t-price{ font-size:1.6rem; }
}

/* ---------- Apple正規サービスとの比較テーブル ---------- */
.compare-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border-radius:14px;
  border:1.5px solid var(--pop-blue);
}
.compare-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  background:#fff;
  font-size:0.92rem;
}
.compare-table th,
.compare-table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--pop-blue-pale);
  line-height:1.6;
}
.compare-table thead th{
  background: var(--pop-blue-pale);
  color: var(--pop-navy);
  font-weight:800;
  white-space:nowrap;
}
.compare-table tbody th,
.compare-table tbody td:first-child{
  font-weight:800;
  color: var(--pop-navy);
  white-space:nowrap;
}
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table tbody td:nth-child(2){
  background: var(--pop-blue-pale);
  font-weight:700;
}

@media (max-width: 719px){
  .compare-table{ font-size:0.82rem; min-width:480px; }
  .compare-table th, .compare-table td{ padding:10px 10px; }
}