/* =========================================================
   page.css — FUFU サモエドカフェ 浅草店 各セクション
   design width 1920 (1rem = 19.2px) / responsive
   ========================================================= */

/* ---------- shared tokens ---------- */
:root{
  --pink:#DF7A83;
  --pink-d:#c96a73;
  --brown:#6f5346;
  --gray:#8a7a70;
  --cream:#faf5f0;
}
.label{
  display:block; color:#df7a83; font-size:1rem; font-weight:700;
  text-transform:uppercase; margin-bottom:0.7rem;
}
.sec-head h2, .po-col h2, .concept-txt h2, .access-txt h2{
  font-size:2.8rem; color:#593920;  line-height:1.4;
  letter-spacing:0.02em;
}
.btn-pink{
  display:inline-block; background:#df7a83; color:#fff; font-weight:700;
  font-size:1.1rem; padding:0.55rem 1.9rem; border-radius:0.8rem;
  box-shadow:0.15rem 0.15rem 0 rgba(54,30,30,.24); transition:all .3s ease;
}
.btn-pink:hover{ transform:translateY(-0.15rem); opacity:1; box-shadow:0 0.4rem 1rem rgba(223,122,131,.45); }
.btn-pink.center{ display:block; width:14rem; margin:3.5rem auto 0; text-align:center; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; aspect-ratio:1920/900; min-height:16rem; background:var(--cream); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background-image:url('../image/banner.png'); background-size:cover; background-position:center; }
.hero .wrap{ position:relative; height:100%; display:flex; align-items:center; justify-content:flex-end; }
.hero-txt{ max-width:34rem; text-align:left; padding-right:1.5rem; }
.hero-h{ margin-bottom:1.25rem; }
.hero-title{ display:block; width:26rem; max-width:100%; height:auto; }
.hero-sub{
  font-family:"Yu Maru Gothic","游馬圓ゴシック","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","Zen Maru Gothic","M PLUS Rounded 1c","BIZ UDGothic",sans-serif;
  font-size:1.18rem; color:#b5814f; font-weight:700; line-height:1.95; margin-bottom:1.6rem;
  text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 0 6px #fff;
}
.hero-en{
  display:table; font-size:0.82rem; letter-spacing:0.14em; color:#df7a83;
  font-weight:700; border-top:1px solid #e2a9ad; border-bottom:1px solid #e2a9ad;
  padding:0.6rem 0.15rem; margin-bottom:1.9rem;
}
.hero-btn{
  display:inline-block; background:#df7a83; color:#fff; font-weight:700; font-size:1rem;
  padding:0.9rem 2.4rem; border-radius:0.9rem; box-shadow:0.15rem 0.15rem 0 rgba(54,30,30,.24);
  transition:all .3s ease;
}
.hero-btn:hover{ transform:translateY(-0.15rem); opacity:1; box-shadow:0 0.4rem 1.1rem rgba(223,122,131,.5); }
/* 桌面：大标题文字(he1.png中爪印右侧)与下方副标题/英文/按钮左对齐 */
@media only screen and (min-width:993px){ .hero-sub, .hero-en, .hero-btn{ margin-left:2.7rem; } }

/* =========================================================
   CONCEPT
   ========================================================= */
.concept{ position:relative; background:var(--cream) url('../image/1.png') center bottom / cover no-repeat; padding:6rem 0 4rem; overflow:hidden; }
.concept-in{ display:flex; align-items:center; justify-content:space-between; gap:3rem; position:relative; z-index:2; }
.concept-txt{ flex:1 1 46%; max-width:35rem; }
.concept-txt h2{ margin-bottom:1.4rem; }
.concept-txt p{ font-size:0.95rem; color:#593920; line-height:2.05; margin-bottom:1.9rem; }
.concept-pic{ flex:0 0 45%; max-width:45rem; }
.concept-pic img{ width:100%; height:auto; display:block; }
.concept-side{
  position:absolute; right:-1rem; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-size:0.72rem; letter-spacing:0.3em; color:#d8b7a6;
  font-weight:700; z-index:1;
}

/* =========================================================
   FEATURES
   ========================================================= */
.features{ position:relative; background:var(--cream) url('../image/02.png') center top / cover no-repeat; padding:4.5rem 0 3rem; overflow:hidden; }
.features .sec-head{ text-align:left; margin-bottom:2.6rem; position:relative; z-index:2; }
.reserve-badge{
  position:absolute; top:1.5rem; right:0.5rem; width:6.6rem; height:6.6rem; border-radius:50%;
  z-index:6; font-size:0; color:transparent; overflow:hidden;
}
.reserve-badge:hover{ opacity:1; }
.feat-list{ display:flex; gap:1.8rem; position:relative; z-index:2; }
.feat-list li{ flex:1; background:#faf5f0; border-radius:1rem; overflow:hidden; box-shadow:0 0.4rem 1.6rem rgba(120,90,80,.10); transition:transform .35s ease, box-shadow .35s ease;border: 1px solid #ddcec0; }
.feat-list li:hover{ transform:translateY(-0.4rem); box-shadow:0 0.7rem 2rem rgba(120,90,80,.16); }
.feat-pic{ aspect-ratio:414/275; overflow:hidden; }
.feat-pic img{ width:100%; height:100%; object-fit:cover; display:block; padding: 0.5rem;
    border-radius: 1rem;}
.feat-body{ padding:1.4rem 1.5rem 1.8rem; }
.feat-body h3{ font-size:1.02rem; color:#df7a83; font-weight:800; margin-bottom:0.7rem; line-height:1.5; }
.feat-body p{ font-size:0.9rem; color:#666666; line-height:1.85; }

/* =========================================================
   SAMOYED
   ========================================================= */
.samoyed{ position:relative; background:var(--cream) url('../image/2.png') center top / cover no-repeat; padding:0.5rem 0 5rem; overflow:hidden; }
.samoyed-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.6rem; position:relative; z-index:2; }
.sec-head.left h2{ margin-bottom:0.7rem; }
.sec-sub{ font-size:1.25rem; color:#593920; }
.dog-carousel{ position:relative; z-index:2; width:77.08333333333334rem; max-width:100%; margin:0 auto; padding:0; }
.dogSwiper{ padding:0.5rem 0 1rem; }
.dog-card{ background:transparent; }
.dog-pic{ aspect-ratio:261/311; overflow:hidden; background:#f3ece6; border-radius:1rem; box-shadow:0 0.4rem 1.4rem rgba(120,90,80,.10); border: 1px solid #ddcec0;}
.dog-pic img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.dog-card:hover .dog-pic img{ transform:scale(1.05); }
.dog-info{ padding:0.9rem 0 0; text-align:left; }
.dog-name{ font-size:1rem; color:#232323; font-weight:800; letter-spacing:0.04em; display:flex; align-items:center; justify-content:flex-start; gap:0.35rem; margin-bottom:0.5rem; }
.dog-name .sex{ width:auto; height:auto; display:inline-block; }
.dog-info p{ font-size:1rem; color:#232323; line-height:1.7; }
.dog-nav{ position:absolute; top:38%; transform:translateY(-50%); width:2.4rem; height:2.4rem; background:none; box-shadow:none; border-radius:0; z-index:5; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity .25s; }
.dog-nav::before{ content:''; width:0.85rem; height:0.85rem; border-top:2px solid #c9b6a8; border-right:2px solid #c9b6a8; }
.dog-nav.prev{ left:-3.2rem; }
.dog-nav.next{ right:-3.2rem; }
.dog-nav.prev::before{ transform:rotate(-135deg); }
.dog-nav.next::before{ transform:rotate(45deg); }
.dog-nav:hover{ opacity:.55; }
.dog-nav.swiper-button-disabled{ opacity:.28; }

/* =========================================================
   PRICE + OPTION
   ========================================================= */
.price-option{ position:relative; background:#faf5f0 url('../image/3.png') center bottom / 100% auto no-repeat; padding:4.5rem 0 5rem; overflow:hidden; }
.po-grid{ display:flex; gap:3.5rem; align-items:stretch; }
.po-col{ flex:1; }
.option-col{ display:flex; flex-direction:column; }
.po-col h2{ margin-bottom:1.3rem; }
.po-sub{ font-size:1.5rem; color:#df7a83; font-weight:500; margin-bottom:1.4rem; }
.po-sub .tag{ display:inline-block; background:#b27c47; color:#fff; font-size:1.1rem;  padding:0.2rem 0.7rem; border-radius:1rem; margin-left:0.5rem; vertical-align:middle; }
.price-table{ display:flex; flex-direction:column; gap:1rem; }
.price-row{ display:flex; gap:1rem; }
.price-cell{ flex:1; background:#fff; border-radius:0.8rem; box-shadow:0 0.3rem 1rem rgba(120,90,80,.08); padding:1.15rem 1.25rem; display:flex; flex-direction:column; gap:0.35rem; }
.pc-day{ font-size:1.1rem; color:#593920; }
.pc-row{ display:flex; align-items:baseline; justify-content:space-between; gap:0.6rem;padding-right: 3.5rem; }
.pc-type{ font-size:1.2rem; color:var(--brown); font-weight:700; }
.pc-val{ font-size:1.3rem; color:var(--brown); font-weight:800; }
.opt-list{ display:flex; gap:0.6rem; flex:1; }
.opt-list li{ flex:1; display:flex; flex-direction:column; background:#fff; border-radius:0.9rem; overflow:hidden; box-shadow:0 0.3rem 1.2rem rgba(120,90,80,.08); }
.opt-pic{ flex:1; min-height:8rem; overflow:hidden; background:#f3ece6; }
.opt-body{ padding:1.1rem 0.9rem 1.3rem; text-align:center; }
.opt-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.opt-list h4{ font-size:0.98rem; color:#df7a83; font-weight:800; margin-bottom:0.4rem; }
.opt-list p{ font-size:0.75rem; color:#232323; line-height:1.7; margin-bottom:0.6rem; min-height:2.4em; }
.opt-price{ font-size:0.88rem; color:#593920; font-weight:800; }

/* =========================================================
   ACCESS
   ========================================================= */
.washi-bg{ position:relative; background:var(--cream) url('../image/4.png') center top / 100% auto no-repeat; }
.access{ position:relative; background:transparent; padding:1rem 0 5rem; overflow:hidden; }
.access-in{ display:flex; align-items:center; gap:3rem; position:relative; z-index:2; }
.access-txt{ flex:0 0 46%; }
.access-txt h2{ margin-bottom:1.3rem; }
.addr{ font-size:1.3rem; color:var(--brown); font-weight:1000; line-height:1.8; margin-bottom:1.5rem; }
.access-list{ margin-bottom:3.5rem; }
.access-list li{ font-size:1.2rem; color:#df7a83; margin-bottom:1.5rem; display:flex; align-items:center; gap:0.7rem; font-weight: 700;}
.access-list .ai{ width:1.7rem; flex:0 0 1.7rem; text-align:center; color:#e0595a; }
.access-list .ai svg{ width:1.5rem; height:1.5rem; display:inline-block; vertical-align:middle; }
.access-map{ flex:1; margin-right:min(0px, calc(38.5416667rem - 50vw)); }
.access-map a{ display:block; }
.access-map img{ width:100%; border-radius:1rem; box-shadow:0 0.5rem 1.8rem rgba(120,90,80,.14); display:block; }
@media only screen and (min-width:993px){ .access-map img{ border-radius:1rem 0 0 1rem; } }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ position:relative; background:transparent; padding:2rem 0 5rem; overflow:hidden; }
.faq .sec-head{ margin-bottom:2.2rem; }
.faq-list{ max-width:none; }
.faq-q{
  width:100%; text-align:left; display:flex; align-items:flex-start; gap:0.6rem;
  padding:1.3rem 0; font-size:1.4rem; color:#593920; font-weight:700;
  border-bottom:1px solid #593920; transition:color .25s, border-color .25s;
}
.faq-q .faq-mark, .faq-a .faq-mark{ flex:0 0 1.8rem; color:#593920; font-weight:800; }
.faq-q::after{ content:'+'; margin-left:auto; font-size:1.5rem; color:#593920; font-weight:700; line-height:1; transition:transform .3s; }
.faq-item.open .faq-q::after{ content:'\2212'; }
.faq-item.open .faq-q{ color:#df7a83; border-bottom-color:#df7a83; }
.faq-item.open .faq-q .faq-mark{ color:#df7a83; }
.faq-a{ display:flex; align-items:flex-start; gap:0.6rem; padding-top:0.8rem; max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a .faq-mark{ font-size:1.1rem; line-height:1.95; }
.faq-a p{ flex:1; font-size:1.1rem; color:#593920; line-height:1.95; padding:0 0 1.4rem; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{ background:#df7a83; padding:1.6rem 0; }
.cta-in{ display:flex; align-items:center; gap:1.5rem; }
.cta-dogs{ height:4.2rem; width:auto; flex:0 0 auto; }
.cta-txt{ flex:1; font-size:1.35rem; color:#fff; font-weight:800; letter-spacing:0.02em; }
.cta-paw{ width:1.7rem; height:auto; vertical-align:middle; margin-right:0.55rem; display:inline-block; }
.cta-ul{ position:relative; white-space:nowrap; }
.cta-ul::after{ content:''; position:absolute; left:-0.1rem; right:-0.45rem; bottom:-0.5rem; height:0.55rem; border-bottom:3px solid #f4b942; border-radius:0 0 50% 50% / 0 0 100% 100%; }
/* 页脚狗狗装饰上探进粉色条，作为底部唯一的狗狗图（仅桌面） */
@media only screen and (min-width:993px){ .footer{ margin-top:0; } .cta-in{ padding-left:9rem; } }
.cta-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:0.9rem; background:transparent; color:#fff;
  font-weight:800; font-size:1.08rem; letter-spacing:0.02em; padding:0; border-radius:0; transition:opacity .3s ease;
}
.cta-btn span{
  width:2.5rem; height:2.5rem; flex:0 0 auto; border:2px solid #fff; border-radius:50%;padding-top: 0.2rem;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; line-height:1;
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.cta-btn:hover{ opacity:1; }
.cta-btn:hover span{ background:#fff; color:#df7a83; transform:translateX(3px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* 1499px以下两侧留白不足以把箭头放到内容区外，退回内容区边缘内侧 */
@media only screen and (max-width:1499px){
  .dog-carousel{ padding:0 3.2rem; }
  .dog-nav.prev{ left:0.2rem; }
  .dog-nav.next{ right:0.2rem; }
}
@media only screen and (max-width:992px){
  .hero{ aspect-ratio:675/900; min-height:0; }
  .hero-bg{ background-image:url('../image/banner-sp.png'); background-position:center; }
  .hero .wrap{ justify-content:center; }
  .hero-txt{ max-width:100%; padding:0 15px; text-align:center; margin:0 auto; }
  .hero-title{ width:16rem; margin:0 auto; }
  .hero-h{ text-align:center; margin-bottom:0.9rem; }
  .hero-sub{ font-size:1rem; line-height:1.7; margin-bottom:1rem; }
  .hero-en{ font-size:0.8rem; margin:0 auto 1.2rem;  color: #fff;}
  .hero-btn{ font-size:1rem; padding:0.7rem 1.8rem; }

  .concept{ padding:44px 0; background-size:cover; }
  .concept-in{ flex-direction:column; gap:26px; }
  .concept-txt{ max-width:100%; text-align:center; }
  .concept-txt h2{ font-size:1.4rem; }
  .concept-txt p{ font-size:0.85rem; }
  .concept-pic{ max-width:280px; width:100%; }
  .concept-side{ display:none; }

  .features{ padding:44px 0; }
  .sec-head h2,.po-col h2,.concept-txt h2,.access-txt h2{ font-size:1.4rem; }
  .feat-list{ flex-direction:column; gap:20px; }
  .reserve-badge{ display:none; }

  .samoyed{ padding:44px 0; }
  .samoyed-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .dog-carousel{ width:100%; padding:0 15px; }
  .dog-nav{ display:none; }

  .price-option{ padding:44px 0; }
  .po-grid{ flex-direction:column; gap:36px; }
  .opt-list{ flex-wrap:wrap; gap:14px; }
  .opt-list li{ flex:0 0 calc(50% - 7px); }
  .opt-list p{ min-height:0; }

  .access{ padding:44px 0; }
  .access-in{ flex-direction:column; gap:24px; }
  .access-txt{ flex:none; width:100%; }

  .faq{ padding:40px 0; }
  .faq-q{ font-size:0.95rem; }
  .faq-a p{ font-size:0.85rem; padding-left:1.8rem; }

  .cta-band{ padding:20px 0; }
  .cta-in{ flex-wrap:wrap; gap:12px; }
  .cta-dogs{ height:40px; }
  .cta-txt{ font-size:1.05rem; flex:1 1 auto; }
  .cta-btn{ font-size:0.82rem; padding:0.55rem 1.1rem; }
}
@media only screen and (max-width:520px){
  .price-row{ flex-direction:column; }
}