@charset "UTF-8";
/* ==========================================================================
   SPLASH ADE ─ 夏の新作 LP（ライトプラン / LP型 2ページ）
   デザイン: gallery/LP Design.PNG ・ 素材: gallery/LP logo.PNG
   ※ライトプランのためアニメーションは実装しない（ホバー時の色変化のみ）
   ========================================================================== */

/* ---------- 変数 ---------- */
:root{
  /* テキスト（コントラスト確保のため濃紺を基準色にする） */
  --ink:      #1e3d63;   /* 白背景に 11.0:1 */
  --ink2:     #4a6a8a;   /* 白背景に  5.7:1 */

  /* ブランドカラー */
  --pink:     #c9366e;   /* 文字・ボタン用の濃いピンク 白背景に 5.0:1 */
  --pink-mid: #ff8db7;   /* 装飾用 */
  --pink-pale:#ffc5d8;
  --pink-bg:  #fff5f8;
  --blue:     #0069cc;   /* 文字・ボタン用の濃い青 白背景に 5.4:1 */
  --blue-mid: #7fd8ff;
  --blue-bg:  #f4fdff;
  --wh:       #ffffff;
  --gray-bg:  #f5f7fa;
  --line:     #dfe6ee;

  /* フォント */
  --f-en:  "Playfair Display", "Times New Roman", serif;
  --f-ja:  "Noto Sans JP", "Hiragino Sans", sans-serif;
  --f-scr: "Dancing Script", cursive;

  --r: 14px;
}

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-ja);
  font-weight:400;
  color:var(--ink);
  background:var(--wh);
  line-height:1.9;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
ul,ol{list-style:none;}
a{color:var(--blue);}
button,input,select,textarea{font:inherit;color:inherit;}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* ---------- フォーカス可視化 ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--pink);
  outline-offset:3px;
}

/* ---------- スキップリンク ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--ink);color:#fff;border-radius:0 0 8px 0;
}
.skip:focus{left:0;}

/* ---------- レイアウト ---------- */
.wrap{width:min(100% - 40px, 1100px);margin-inline:auto;}
.narrow{width:min(100% - 40px, 760px);margin-inline:auto;}
.sec{padding:clamp(56px,7vw,96px) 0;}
.bg-pink{background:var(--pink-bg);}
.bg-blue{background:var(--blue-bg);}
.bg-gray{background:var(--gray-bg);}
.bg-grad{background:linear-gradient(100deg,#ffe6ef 0%,#fff5f8 38%,#f0f9ff 62%,#e4f4ff 100%);}

/* ---------- 見出し ---------- */
.h-sec{text-align:center;margin-bottom:clamp(32px,4vw,52px);}
.h-sec__en{
  font-family:var(--f-en);font-weight:500;
  font-size:clamp(26px,3.4vw,40px);letter-spacing:.06em;line-height:1.3;
  color:var(--ink);
}
.h-sec__ja{
  margin-top:10px;font-size:13px;letter-spacing:.2em;color:var(--ink2);
}
.h-sec__lead{margin-top:18px;font-size:15px;line-height:2.1;color:var(--ink2);}
.h-sec--pink .h-sec__en{color:var(--pink);}
.h-sec--blue .h-sec__en{color:var(--blue);}

.script{font-family:var(--f-scr);font-weight:600;}

/* ---------- ボタン ---------- */
/* ピンクのボタンはブランドカラー #FF8DB7 を地色にし、文字を濃紺にする。
   （白文字＋濃いピンクは重く見えるため。濃紺 on #FF8DB7 のコントラスト比は 5.12:1 でAA適合） */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:14px 36px;border-radius:100px;
  background:var(--pink-mid);color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:.1em;
  border:2px solid var(--pink-mid);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--pink-pale);border-color:var(--pink);color:var(--ink);}
.btn__arrow{font-family:var(--f-en);}
/* 青ボタンは濃い青地に白文字（白 on #0069cc は 5.39:1 でAA適合） */
.btn--blue{background:var(--blue);border-color:var(--blue);color:#fff;}
.btn--blue:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.btn--ghost{background:transparent;color:var(--pink);}
.btn--ghost:hover{background:var(--pink);color:#fff;}
.btn--ghost-blue{background:transparent;color:var(--blue);border-color:var(--blue);}
.btn--ghost-blue:hover{background:var(--blue);color:#fff;}
.btn--lg{min-height:60px;padding:16px 48px;font-size:16px;}
.btn--full{width:100%;}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.hd{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(8px);
}
.hd__in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;flex-wrap:wrap;
}
.logo{display:inline-block;text-decoration:none;color:var(--ink);line-height:1.2;}
.logo__name{
  display:block;font-family:var(--f-en);font-weight:500;
  font-size:20px;letter-spacing:.14em;
}
.logo__sub{
  display:block;font-size:9.5px;letter-spacing:.28em;color:var(--ink2);margin-top:2px;
}
.gnav__list{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.gnav__list a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-family:var(--f-en);font-size:14px;letter-spacing:.1em;
  color:var(--ink);text-decoration:none;border-radius:8px;
  transition:background .25s ease,color .25s ease;
}
.gnav__list a:hover{background:var(--pink-bg);color:var(--pink);}
.gnav{order:2;}
.hd__cta{order:3;min-height:44px;padding:8px 22px;font-size:13px;flex:none;}

/* --- タブレット・スマホ：ロゴと購入ボタンを1行目、メニューを2行目の横スクロールに --- */
@media (max-width:900px){
  .hd__in{flex-wrap:wrap;gap:10px;padding:10px 0 0;}
  .logo__name{font-size:17px;letter-spacing:.1em;}
  .logo__sub{font-size:8.5px;letter-spacing:.22em;}
  .hd__cta{order:2;padding:8px 16px;font-size:12.5px;}
  .gnav{
    order:3;width:100%;
    overflow-x:auto;overscroll-behavior-x:contain;
    border-top:1px solid var(--line);
  }
  .gnav__list{flex-wrap:nowrap;gap:0;}
  .gnav__list a{padding:0 11px;font-size:13px;white-space:nowrap;border-radius:0;}
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
/* トップ画像はデザイン画（LP Design.PNG）の上部バンドをそのまま使用。
   画像内の文字と同じ内容を、スクリーンリーダー用の h1 と alt で提供している。 */
.hero__media{position:relative;}
.hero__img{width:100%;height:auto;display:block;}

/* スマホでは横長のままだと薄く見えるので、画面の高さいっぱいに大きく見せる。
   object-fit:cover の切り取りは左右対称・縦は等倍なので、中央にある
   SPLASH SUMMER の文字と ORDER NOW ボタン（＝.hero__hotspot）は位置がずれない。 */
@media (max-width:720px){
  .hero__img{
    height:78vh;max-height:640px;min-height:440px;
    object-fit:cover;object-position:center;
  }
}
/* 画像内に描かれた ORDER NOW ボタンの位置にぴったり重ねる、実際に押せるリンク。
   座標は hero.jpg 内のボタン位置を実測した値（中央基準）。 */
.hero__hotspot{
  position:absolute;
  left:49.9%;top:79.9%;transform:translate(-50%,-50%);
  width:17.7%;min-width:132px;
  height:7%;min-height:44px;
  border-radius:100px;
  transition:box-shadow .25s ease;
}
.hero__hotspot:hover{box-shadow:0 0 0 3px var(--pink);}
.hero__hotspot:focus-visible{outline:3px solid var(--pink);outline-offset:4px;}

/* 視覚的には隠すが、スクリーンリーダーには読ませる */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   新作ドリンク 2種
   ========================================================================== */
/* デザイン画の紹介バンド（全幅で配置） */
.band{width:100%;height:auto;}
/* PC・タブレットは横長1枚、スマホは左右2枚に分けて縦積み（文字を大きく保つため） */
.band--half{display:none;}
@media (max-width:900px){
  .band--wide{display:none;}
  .band--half{display:block;}
}


/* ==========================================================================
   WHAT'S INSIDE
   ========================================================================== */
.inside{
  display:grid;gap:clamp(24px,3vw,36px);align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:820px){ .inside{grid-template-columns:1fr auto 1fr;} }

.inside__group h3{
  text-align:center;font-family:var(--f-en);font-weight:500;
  font-size:20px;letter-spacing:.06em;margin-bottom:18px;
}
.inside--pink h3{color:var(--pink);}
.inside--blue h3{color:var(--blue);}
.inside__list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.inside__item{text-align:center;}
.inside__item img{width:76px;height:76px;margin:0 auto 10px;border-radius:50%;}
.inside__name{font-family:var(--f-en);font-size:15px;letter-spacing:.04em;}
.inside--pink .inside__name{color:var(--pink);}
.inside--blue .inside__name{color:var(--blue);}
.inside__desc{margin-top:2px;font-size:12px;line-height:1.7;color:var(--ink2);}
.inside__vs{
  align-self:center;justify-self:center;
  font-family:var(--f-en);font-size:16px;letter-spacing:.1em;color:var(--ink2);
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(120deg,var(--pink-pale),var(--blue-mid));
  color:#fff;
}

/* ==========================================================================
   限定カップ & カップホルダー
   ========================================================================== */
.cup{display:grid;gap:clamp(24px,4vw,48px);align-items:center;grid-template-columns:1fr;}
@media (min-width:900px){ .cup{grid-template-columns:1.05fr .95fr;} }
.cup__img{border-radius:var(--r);width:100%;}
.cup__ttl{
  font-family:var(--f-en);font-weight:500;
  font-size:clamp(26px,3.2vw,36px);line-height:1.3;letter-spacing:.04em;color:var(--pink);
}
.cup__sub{margin-top:8px;font-size:13px;letter-spacing:.2em;color:var(--ink2);}
.cup__txt{margin-top:20px;font-size:15px;line-height:2.1;color:var(--ink2);}
.cup__points{margin-top:24px;display:grid;gap:12px;}
.cup__points li{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 18px;background:var(--wh);border:1px solid var(--line);border-radius:10px;
  font-size:14.5px;line-height:1.8;
}
.cup__points b{color:var(--pink);font-weight:500;white-space:nowrap;}
.note{
  margin-top:20px;font-size:13px;line-height:1.9;color:var(--ink2);
  padding-left:1.1em;text-indent:-1.1em;
}

/* ==========================================================================
   夏限定ブレンドコーヒー
   ========================================================================== */
.coffee{display:grid;gap:clamp(24px,4vw,48px);align-items:center;grid-template-columns:1fr;}
@media (min-width:900px){ .coffee{grid-template-columns:.95fr 1.05fr;} }
.coffee__img{border-radius:var(--r);width:100%;}
.coffee__label{font-size:12.5px;letter-spacing:.24em;color:var(--blue);}
.coffee__ttl{
  margin-top:10px;font-family:var(--f-en);font-weight:500;
  font-size:clamp(30px,4.2vw,46px);line-height:1.2;letter-spacing:.04em;color:var(--ink);
}
.coffee__script{margin-top:6px;font-size:clamp(20px,2.6vw,26px);color:var(--blue);}
.coffee__txt{margin-top:20px;font-size:15px;line-height:2.1;color:var(--ink2);}
.coffee__spec{
  margin-top:24px;display:flex;flex-wrap:wrap;gap:10px;
}
.coffee__spec li{
  padding:8px 18px;border:1px solid var(--blue-mid);border-radius:100px;
  background:var(--wh);font-size:13.5px;color:var(--ink);
}
.coffee__price{
  margin-top:26px;padding:18px 22px;border-radius:12px;background:var(--wh);
  border:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
}
.coffee__price dt{font-size:14px;color:var(--ink2);}
.coffee__price dd{font-family:var(--f-en);font-size:28px;color:var(--ink);letter-spacing:.02em;}
.coffee__price .tax{font-family:var(--f-ja);font-size:13px;color:var(--ink2);}
.coffee__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;}

/* HOW TO ENJOY */
.howto{
  margin-top:clamp(40px,5vw,64px);
  background:var(--wh);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(26px,3.4vw,40px);
}
.howto__ttl{
  font-family:var(--f-en);font-size:20px;letter-spacing:.1em;color:var(--blue);
  text-align:center;
}
.howto__list{
  margin-top:26px;display:grid;gap:20px;grid-template-columns:1fr;counter-reset:step;
}
@media (min-width:760px){ .howto__list{grid-template-columns:repeat(3,1fr);} }
.howto__item{text-align:center;}
.howto__item img{width:64px;height:auto;margin:14px auto 14px;}
.howto__num{
  display:inline-block;width:32px;height:32px;line-height:32px;
  border-radius:50%;background:var(--blue);color:#fff;
  font-family:var(--f-en);font-size:15px;
}
.howto__txt{font-size:14px;line-height:1.9;color:var(--ink2);}
.howto__point{
  margin-top:26px;padding:18px 22px;border-radius:10px;background:var(--blue-bg);
  font-size:14px;line-height:1.9;color:var(--ink);
}
.howto__point b{color:var(--blue);}

/* ==========================================================================
   Instagram（SNSリンク 1つ）
   ========================================================================== */
.ig__grid{
  display:grid;gap:10px;grid-template-columns:repeat(2,1fr);
}
@media (min-width:600px){ .ig__grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:960px){ .ig__grid{grid-template-columns:repeat(6,1fr);} }
.ig__grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;}
.ig__cta{margin-top:32px;text-align:center;}
.ig__cta .btn{background:var(--wh);color:var(--pink);border-color:var(--pink);}
.ig__cta .btn:hover{background:var(--pink);color:#fff;}
.ig__icon{width:20px;height:20px;flex:none;}

/* ==========================================================================
   店舗情報
   ========================================================================== */
.info{display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:1fr;}
@media (min-width:760px){ .info{grid-template-columns:1fr 1fr;} }
.info dl{display:grid;grid-template-columns:6.5em 1fr;gap:12px 16px;font-size:14.5px;}
.info dt{color:var(--ink2);}
.info dd{color:var(--ink);}

/* ==========================================================================
   フッター
   ========================================================================== */
.cta-band{
  padding:clamp(56px,7vw,88px) 0;text-align:center;
  background:linear-gradient(100deg,#ffd9e6 0%,#fff5f8 42%,#eef8ff 58%,#d9f0ff 100%);
}
.cta-band__ttl{
  font-family:var(--f-en);font-weight:500;
  font-size:clamp(30px,4.4vw,48px);line-height:1.25;color:var(--ink);
}
.cta-band__txt{margin-top:14px;font-size:15px;color:var(--ink2);}
.cta-band__btns{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

.ft{background:var(--ink);color:#fff;padding:clamp(40px,5vw,60px) 0 28px;}
.ft a{color:#fff;}
.ft__top{
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;
}
.ft .logo{color:#fff;}
.ft .logo__sub{color:var(--pink-pale);}
.ft__nav{display:flex;flex-wrap:wrap;gap:4px 8px;}
.ft__nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
  font-size:14px;text-decoration:none;border-radius:8px;
  transition:color .25s ease;
}
.ft__nav a:hover{color:var(--pink-mid);text-decoration:underline;}
.ft__copy{
  margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.24);
  font-family:var(--f-en);font-size:12px;letter-spacing:.1em;color:#dbe6f2;
}

/* ==========================================================================
   フォーム（2ページ目）
   ========================================================================== */
.page-head{
  padding:clamp(44px,5.5vw,72px) 0;text-align:center;
  background:linear-gradient(100deg,#eef8ff 0%,#f7fbff 60%,#fff5f8 100%);
}
.page-head__en{
  font-family:var(--f-en);font-weight:500;font-size:clamp(30px,4.4vw,46px);
  letter-spacing:.04em;color:var(--ink);
}
.page-head__ja{margin-top:10px;font-size:13px;letter-spacing:.2em;color:var(--ink2);}

.crumb{padding:14px 0;font-size:13px;color:var(--ink2);border-bottom:1px solid var(--line);}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;}
.crumb li+li::before{content:"›";margin-right:8px;color:var(--ink2);}

.summary{
  display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:1fr;align-items:center;
  padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:var(--r);
  background:var(--blue-bg);
}
@media (min-width:720px){ .summary{grid-template-columns:220px 1fr;} }
.summary img{border-radius:10px;width:100%;}
.summary__ttl{font-family:var(--f-en);font-size:24px;letter-spacing:.04em;color:var(--ink);}
.summary__txt{margin-top:10px;font-size:14.5px;line-height:2;color:var(--ink2);}
.summary__price{margin-top:14px;font-size:14px;color:var(--ink2);}
.summary__price b{font-family:var(--f-en);font-size:26px;color:var(--ink);}

.form{margin-top:clamp(36px,4.5vw,56px);}
.form__row{margin-bottom:26px;}
.form__label{display:block;margin-bottom:8px;font-size:14.5px;font-weight:500;}
.req,.opt{
  display:inline-block;margin-left:10px;padding:2px 10px;border-radius:4px;
  font-size:11.5px;font-weight:400;letter-spacing:.06em;vertical-align:2px;
}
.req{background:var(--pink);color:#fff;}
.opt{background:var(--gray-bg);color:var(--ink2);border:1px solid var(--line);}
.form__help{margin-top:6px;font-size:13px;line-height:1.8;color:var(--ink2);}
.form input[type="text"],.form input[type="email"],.form input[type="tel"],
.form select,.form textarea{
  width:100%;padding:14px 16px;min-height:52px;
  border:1px solid #8fa3b8;border-radius:8px;background:var(--wh);
  font-size:16px;line-height:1.7;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.form textarea{min-height:140px;resize:vertical;}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--ink2);}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:var(--pink);box-shadow:0 0 0 3px rgba(201,54,110,.18);
}
.form__inline{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.form__inline select{max-width:180px;}
.form__unit{font-size:14px;color:var(--ink2);}
.form__check{
  display:flex;gap:12px;align-items:flex-start;
  padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--gray-bg);
  font-size:14.5px;line-height:1.9;
}
.form__check input[type="checkbox"]{width:22px;height:22px;margin-top:4px;flex:none;accent-color:#c9366e;}
.form__submit{margin-top:36px;text-align:center;}
.form__submit .form__help{margin-top:16px;}

.fieldset{border:0;margin:0 0 26px;padding:0;}
.fieldset__legend{
  margin-bottom:8px;font-size:14.5px;font-weight:500;padding:0;
}

.steps-flow{
  display:grid;gap:12px;grid-template-columns:1fr;margin-top:clamp(36px,4.5vw,56px);
}
@media (min-width:720px){ .steps-flow{grid-template-columns:repeat(3,1fr);} }
.steps-flow li{
  padding:16px 20px;border-radius:10px;background:var(--gray-bg);
  font-size:14px;line-height:1.8;color:var(--ink2);
}
.steps-flow b{display:block;color:var(--ink);font-weight:500;}