/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

a.white:link {
color : #ffffff; 
}
a.white:visited {
color : #ffffff; 
}
a.white:active {
text-decoration : underline; 
color : #ffffff; 
}
a.white:hover {
text-decoration : underline; 
color : #ffffff; 
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/


@media (hover: hover) {
  .main .allbox .button:hover {
    background-color: #f79aa1;
    color: #000;
  }
}

@media (hover: none) {
  .main .allbox .button:active {
    background-color: #f79aa1;
    color: #000;
  }
}


/* =========================================
   Spa Mirage LP
   モバイルファースト / 820px以上でPCレイアウト
   ========================================= */

/* ---------- カラー・共通変数 ---------- */
:root {
  --c-bg: #fbf6f1;          /* 全体のベース（淡いベージュ） */
  --c-bg-sub: #f3e7de;      /* セクション交互用のベージュ */
  --c-pink: #f0b9b3;        /* ボトルのピンク */
  --c-pink-light: #fbe6e2;  /* 淡いピンク */
  --c-brown: #6b5546;       /* 本文・見出しのブラウン */
  --c-brown-light: #b99677; /* 1本ラベルなどのキャラメル */
  --c-red: #d4524f;         /* 2本セット・CTAの赤 */
  --c-white: #ffffff;
}

/* ---------- リセット・ベース ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-brown);
}

body.lp {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.05em;
  /* 追従ボタンに隠れないよう下に余白 */
  padding-bottom: 72px;
}

.lp img{
  display: block;
	width: 100%;
  height: auto;
}

p {
  margin: 0 0 1em;
}

.normal-width{
	width: 100%;
	max-width: 1000px;
	text-align: center;
	margin-inline: auto;
}


/* スマホのみ改行を有効にするためのクラス */
.sp-br {
  display: inline;
}

/* ---------- ページ内ナビ（ヘッダー代わり） ---------- */
.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(251, 246, 241, 0.95);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--c-bg-sub);
}

.lp-nav__logo {
  font-family: "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 24px;
  color: var(--c-brown);
}

.lp-nav__btn {
  display: none; /* スマホでは追従ボタンを使うため非表示 */
}

/* ---------- ボタン共通 ---------- */
.main .btn {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 24px auto 0;
  padding: 16px 24px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--c-white);
  transition: opacity 0.3s, transform 0.3s;
}

.main .btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
	color: #FFF;
}

.main .btn--primary {
  background: var(--c-brown-light);
}

.main .btn--cta {
  background: var(--c-red);
  font-size: 18px;
  padding: 20px 24px;
  box-shadow: 0 6px 16px rgba(212, 82, 79, 0.35);
}

/* ---------- スマホ追従CTA ---------- */
.main .fixed-cta {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16px;
  background: var(--c-red);
  color: var(--c-white);
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.1em;
  z-index: 200;
}

/* ---------- ファーストビュー ---------- */
.hero {
  background: linear-gradient(180deg, var(--c-pink-light) 0%, var(--c-bg) 100%);
  padding: 32px 20px 40px;
}

.hero__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.hero__logo {
  margin: 0;
  font-family: "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 48px;
  line-height: 1.2;
}

.hero__sub {
  margin: 0 0 24px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.15em;
}

.hero__catch {
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: normal;
  letter-spacing: 0.15em;
  line-height: 1.5;
}

.hero__lead {
  font-size: 17px;
  margin-bottom: 4px;
}

.hero__img {
  margin-top: 24px;
  border-radius: 16px;
  overflow: hidden;
}

/* ---------- 販売期間ボックス（モバイルファースト） ---------- */
.period-box {
  max-width: 640px;
  margin: 20px auto;
  padding: 16px 18px;
  background: #efe3d7;  /* 淡いブラウン */
  border-radius: 14px;  /* 角丸 */
  color: #6b5546;
  font-size: 14px;
  line-height: 1.7;
}

/* 見出し：【キャンペーン期間】 */
.period-box__title {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #b99677;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.period-box__row {
  margin: 0;
}

.period-box__row + .period-box__row {
  margin-top: 8px;
}

/* 「通販」「店舗」のラベル */
.period-box__label {
  display: inline-block;
  margin-right: 8px;
  padding: 0 10px;
  border-radius: 999px;
  background: #b99677;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

.period-box__text {
  display: inline;
}

.campaign_catch{
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0.15em;
  line-height: 1.5;
   color: var(--c-brown);
	font-family: 'Sree Krushnadevaraya', serif;
	text-align: center;
	margin-top:20px;
	margin-bottom: 20px;
}

/* ---------- セクション共通 ---------- */
.section {
  padding: 56px 20px;
}

.section__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.section__title {
  margin: 0 0 28px;
  text-align: center;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 0.15em;
  line-height: 1.6;
}

/* 見出し下の小さな装飾ライン */
.section__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 14px auto 0;
  background: var(--c-pink);
}

/* ---------- コンセプト ---------- */
.concept {
  text-align: center;
}

.concept__strong {
  font-weight: bold;
}

.concept__closing {
  margin-top: 24px;
  font-size: 17px;
  color: var(--c-red);
}

/* ---------- 香りの紹介 ---------- */
.scent {
  background: var(--c-bg-sub);
}

.scent__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.scent__card {
  background: var(--c-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(107, 85, 70, 0.1);
}

.scent__body {
  padding: 20px;
}
.scent__img{
	max-width: 300px;
	margin: 15px auto 0;
}
.scent__en {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-brown-light);
}

.main .scent__name {
  margin: 4px 0 12px;
  font-size: 20px;
  background-color: var(--c-brown-light);
	border: none;
}

.scent__catch {
  font-weight: bold;
}

/* ---------- シーン ---------- */
.main .scene__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main .scene__list li {
  position: relative;
  margin-bottom: 12px;
  padding: 14px 16px 14px 44px;
  background: var(--c-pink-light);
  border-radius: 10px;
  list-style: none;
}

/* チェックマーク風の装飾 */
.main .scene__list li::before {
  content: "\2713";
  position: absolute;
  left: 16px;
  top: 14px;
  color: var(--c-red);
  font-weight: bold;
}

/* ---------- ギフト ---------- */
.gift {
  background: var(--c-bg-sub);
}

.gift__label,
.buy__label {
  margin: 0 0 8px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--c-brown-light);
}

.gift__catch {
  font-size: 17px;
  font-weight: bold;
  text-align: center;
}

.main .gift__sub {
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-brown-light);
  font-size: 18px;
  font-weight: normal;
	background-color: var(--c-brown);
}

.main .gift__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main .gift__list li {
  margin-bottom: 12px;
  padding: 16px;
  background: var(--c-white);
  border-radius: 12px;
  list-style: none;
}

.main .gift__list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--c-red);
}

.main .gift__list span {
  display: block;
  font-size: 14px;
  line-height: 1.8;
}

/* ---------- 価格・購入 ---------- */
.buy {
  text-align: center;
}

.price {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.price__item {
  padding: 20px;
  background: var(--c-white);
  border: 2px solid var(--c-brown-light);
  border-radius: 16px;
}

.price__item--main {
  border-color: var(--c-red);
  background: #fff5f4;
}

.price__name {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 24px;
  border-radius: 999px;
  background: var(--c-brown-light);
  color: var(--c-white);
}

.price__item--main .price__name {
  background: var(--c-red);
}

.price__value {
  margin: 0;
  font-size: 52px;
  font-weight: bold;
  line-height: 1.3;
  color: var(--c-brown);
}

.price__item--main .price__value {
  color: var(--c-red);
  font-size: 60px;
}

.price__value small {
  font-size: 13px;
  font-weight: normal;
  margin-left: 4px;
}

.price__note {
  margin: 8px 0 0;
  font-weight: bold;
  color: var(--c-red);
}

.main .buy__sub {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: normal;
	background-color: var(--c-brown);
}

.set__list {
  margin: 0 auto;
  padding: 0;
  max-width: 520px;
  list-style: none;
  text-align: left;
}

.set__list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px 16px;
  background: var(--c-pink-light);
  border-radius: 10px;
}

.set__num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-brown-light);
  text-align: center;
  line-height: 34px;
  font-size: 14px;
}

.buy__caution {
  margin-top: 20px;
  font-size: 13px;
}

/* ---------- コピーライト ---------- */
.lp-end {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  background: var(--c-brown);
  color: var(--c-white);
}

.lp-end p {
  margin: 0;
}

/* =========================================
   タブレット・PC（820px以上）
   ========================================= */
@media (min-width: 820px) {

  body {
    font-size: 16px;
    padding-bottom: 0; /* 追従ボタンを消すので余白不要 */
  }

  /* スマホ用の改行を無効化 */
  .sp-br {
    display: none;
  }

  /* 追従CTAはPCでは非表示、ナビ内ボタンを表示 */
  .fixed-cta {
    display: none;
  }

  .lp-nav {
    padding: 14px 48px;
  }

  .lp-nav__logo {
    font-size: 30px;
  }

  .lp-nav__btn {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 999px;
    background: var(--c-red);
    color: var(--c-white);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
  }

  .btn {
    margin-left: 0;
  }

  /* ファーストビュー：左テキスト／右画像の2カラム */
  .hero {
    padding: 72px 48px;
  }

  .hero__inner {
    display: flex;
    align-items: center;
    gap: 48px;
  }

  .hero__text {
    flex: 1;
  }

  .hero__img {
    flex: 0.6;
    margin-top: 0;
  }

  .hero__logo {
    font-size: 72px;
  }

  .hero__catch {
    font-size: 44px;
  }

  .hero__lead {
    font-size: 20px;
  }
	
  .period-box {
    padding: 20px 28px;
    font-size: 16px;
  }

  .period-box__title {
    font-size: 18px;
  }
	
.campaign_catch {
  font-size: 25px;
}
	
  .section {
    padding: 96px 48px;
  }

  .section__title {
    font-size: 30px;
    margin-bottom: 40px;
  }

  /* 香り：横2カラム */
  .scent__list {
    flex-direction: row;
    gap: 32px;
  }

  .scent__card {
    flex: 1;
  }

  .scent__body {
    padding: 28px;
  }

  /* シーン：2カラムグリッド */
  .main .scene__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .main .scene__list li {
    margin-bottom: 0;
  }

  /* ギフト：リストを2カラム */
  .main .gift__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .main .gift__list li {
    margin-bottom: 0;
  }

  /* 価格：横並び */
  .price {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
  }

  .price__item {
    flex: 1;
    max-width: 380px;
    padding: 32px;
  }

  .price__value {
    font-size: 64px;
  }

  .price__item--main .price__value {
    font-size: 76px;
  }

  .main .btn--cta {
    margin: 32px auto 0;
    max-width: 420px;
  }
}