@charset "utf-8";
/* ============================================================
   PINKHUNT オーバーレイスタイル
   ------------------------------------------------------------
   BABYDOLL の style.css を土台に、PINKHUNT のデザイン差分だけを書く。
   数値は Figma「web_pc_top / web_pc_other」の実測値。
   作成 2026-09-02 ／ Figma実値で全面改訂 2026-09-02
   ============================================================ */

/* ------------------------------------------------------------
   0. 書体
   Figma: 見出し=Playfair Display Medium / 欧文UI=Lato
          和文=Noto Sans JP / 「&」のみ Cormorant Garamond
   ------------------------------------------------------------ */
:root {
	--f-serif: "Playfair Display", "Times New Roman", serif;
	--f-amp:   "Cormorant Garamond", "Playfair Display", serif;
	--f-en:    "Lato", "Helvetica Neue", Arial, sans-serif;
	--f-jp:    "Noto Sans JP", "Hiragino Sans", sans-serif;
	--c-rule:  #dfdfdf;            /* web_pc_other の区切り線・枠線 */
}

/* ------------------------------------------------------------
   1. ヘッダー
   Figma: h=95 / ロゴ x=58 y=21 219x54 / ナビ x=517〜1300 y=35 h=25
          項目 Lato 21.2px ls1.7 #595758 ／ 区切り「|」Noto 18.7px
          項目間 50px（22 + 区切り6 + 22）
   ------------------------------------------------------------ */
#gHeader {
	position: relative;
	width: 100%;
	height: 9.5rem;
	background: rgba(255, 255, 255, .9);
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
#gHeader h1 {
	position: static;
	margin: 0 0 0 5.8rem;
	padding: 0;
	width: 21.9rem;
	line-height: 0;
}
#gHeader h1 a { display: block; width: 21.9rem; line-height: 0; }
#gHeader h1 img.pc {
	display: block;
	width: 21.9rem;
	height: auto;
	max-width: none;
}
#gHeader .menuBox { margin-left: auto; margin-right: 14rem; }
#gHeader #gNavi { display: block; padding: 0; margin: 0; width: auto; }
#gHeader #gNavi .naviList {
	display: flex;
	align-items: center;
	gap: 5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
#gHeader #gNavi .naviList > li { position: relative; margin: 0; padding: 0; }
#gHeader #gNavi .naviList > li + li::before {
	content: "|";
	position: absolute;
	left: -2.8rem;
	top: 50%;
	color: var(--c-text);
	font-family: var(--f-jp);
	font-size: 1.87rem;
	line-height: 1;
	transform: translateY(-50%);
}
#gHeader #gNavi .naviList > li > a {
	display: block;
	padding: 0;
	color: var(--c-text);
	font-family: var(--f-en);
	font-size: 2.12rem;
	font-weight: 400;
	letter-spacing: .17rem;
	line-height: 1.18;
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s;
}
#gHeader #gNavi .naviList > li > a:hover { color: var(--c-brand); }
#gHeader #gNavi .naviList .txt.sp { display: none; }
#gHeader .hBtn.cart-opener.pc { display: none; }

/* トップだけヒーローに重ねる（下層はフローのまま） */
body.home #gHeader { position: absolute; top: 0; left: 0; z-index: 100; }
body:not(.home) #gHeader { background: var(--c-bg); }

/* BABYDOLL の固定ヘッダー用余白をリセット */
#container { padding-top: 0; }
#index .mainVisual { margin-bottom: 0; }

/* ------------------------------------------------------------
   2. 共通：コンテナ・見出し・ボタン
   ------------------------------------------------------------ */
.phInner { margin: 0 auto; width: 117.4rem; max-width: 90%; }

.phHeading { text-align: center; line-height: 1; }
.phHeading .en {
	display: block;
	color: var(--c-brand);
	font-family: var(--f-serif);
	font-weight: 500;              /* Figma: Medium */
	font-size: 6.8rem;
	letter-spacing: .3rem;
	line-height: 1.32;
	white-space: nowrap;
}
.phHeading .en .amp { font-family: var(--f-amp); font-style: normal; }
.phHeading .ja {
	display: block;
	margin-top: .4rem;
	color: var(--c-brand);
	font-family: var(--f-jp);
	font-size: 1.64rem;
	letter-spacing: .2rem;
	line-height: 1.2;
	white-space: nowrap;
}

/* 角丸ピルのボタン（右端にシェブロン） */
.phBtn a,
.phBtnCheck a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--c-btn);
	border-radius: 10rem;
	box-shadow: .4rem .5rem 0 rgba(216, 153, 184, .55);
	color: var(--c-brand);
	text-decoration: none;
	transition: transform .15s, box-shadow .15s;
}
.phBtn a:hover,
.phBtnCheck a:hover {
	transform: translate(.2rem, .25rem);
	box-shadow: .2rem .25rem 0 rgba(216, 153, 184, .55);
}
.phBtn a::after {
	content: "";
	position: absolute;
	right: 2.9rem;
	top: 50%;
	width: 1.1rem;
	height: 1.9rem;
	margin-top: -.95rem;
	background: url("img/common/ph_chevron.svg") no-repeat center / contain;
}

/* ------------------------------------------------------------
   3. HERO
   2026-09-30 A案: 画像の比率どおりに全体表示（トリミングしない）
   最上部から始め、透明ヘッダーの背後に画像を通す。
   ★ 画像の上端（PC 95px / SP 70px）はロゴ・ナビの下に入るので、
     バナーの文字やロゴはその帯を避けて配置すること。
   ページャ 53x5 右36 下28
   ------------------------------------------------------------ */
#index .mainVisual { position: relative; }

/* ブラウザUI帯・オーバースクロール領域の色。
   既定では body の白がキャンバスに伝播して白帯になる。
   html に色を置くとそちらがキャンバス色になり、body の白は body の箱だけを塗る。 */
html { background-color: var(--c-bg-footer); }

/* --- ヒーローの大きさ -------------------------------------------
   画像の比率で枠を固定する（PC 1040:590 / SP 750:1100）。
   この比率で作った画像は100%そのまま出る。比率が多少ずれた画像でも
   object-fit: cover で枠に収めるので、スライドごとに高さが変わらない。
   以前の全画面（100vh）は、画面と画像の縦横比が違うと拡大して左右を
   切り落としていた（SPで横幅の約2割）。文字入りバナーが切れるため廃止。

   ★ li の指定は「スライド」だけに限ること。
   `.mvSlider li` だと .slick-dots の丸（li）にも当たる。
   slick 初期化前は直下の li、初期化後は .slick-slide。
   .pc / .sp の出し分けは style.css 側に任せる（display を書かない）。 */
#index .mainVisual .mvSlider > li img.pc,
#index .mainVisual .mvSlider > li img.sp,
#index .mainVisual .mvSlider .slick-slide img.pc,
#index .mainVisual .mvSlider .slick-slide img.sp {
	width: 100%;
	height: auto;
	object-fit: cover;
}
#index .mainVisual .mvSlider > li img.pc,
#index .mainVisual .mvSlider .slick-slide img.pc { aspect-ratio: 1040 / 590; }
#index .mainVisual .mvSlider > li img.sp,
#index .mainVisual .mvSlider .slick-slide img.sp { aspect-ratio: 750 / 1100; }

#index .mainVisual .mvSlider,
#index .mainVisual .mvSlider .slick-list,
#index .mainVisual .mvSlider .slick-track,
#index .mainVisual .mvSlider .slick-slide,
#index .mainVisual .mvSlider .slick-slide a { line-height: 0; }

#index .mainVisual .mvSlider .slick-dots {
	justify-content: flex-end;
	gap: 1rem;
	left: auto;
	right: 3.6rem;
	bottom: 2.8rem;
	width: auto;
}
#index .mainVisual .mvSlider .slick-dots li {
	width: 5.3rem;
	height: .5rem;
	border-radius: .3rem;
	background-color: #c9c9c9;
}
#index .mainVisual .mvSlider .slick-dots li.slick-active { background-color: var(--c-brand); }

/* ------------------------------------------------------------
   4. BRAND CONCEPT
   Figma: セクション h=644 / 見出しy=76 / 本体y=248 w=1051 h=288
          画像288角 ／ テキスト列 w=700（画像から63px右）
   ------------------------------------------------------------ */
.phConcept { padding: 7.6rem 0 11.8rem; background: var(--c-bg); }
.phConcept .phHeading { margin-bottom: 6.1rem; }
.phConceptBody {
	display: flex;
	align-items: flex-start;
	gap: 6.3rem;
	width: 105.1rem;
	max-width: 100%;
	margin: 0 auto;
}
.phConceptBody .photo { flex: 0 0 28.8rem; width: 28.8rem; line-height: 0; }
.phConceptBody .photo img { width: 100%; height: auto; }
.phConceptBody .textBox { flex: 1 1 auto; text-align: left; }
.phConceptBody .catch {
	margin-bottom: 1.6rem;
	color: var(--c-brand);
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: 4.07rem;
	letter-spacing: .1rem;
	line-height: 1.33;
	white-space: nowrap;
}
.phConceptBody .text {
	font-family: var(--f-jp);
	font-size: 2rem;
	letter-spacing: .05rem;
	line-height: 1.6;
}
.phConceptBody .size {
	display: block;
	box-sizing: border-box;
	margin-top: 4.2rem;
	padding: 1.1rem 1.9rem;
	width: 65.5rem;
	max-width: 100%;
	background: #e6e6e6;
	font-family: var(--f-jp);
	font-size: 1.6rem;
	letter-spacing: 0;
	line-height: 1.2;
}

/* ------------------------------------------------------------
   5. COLLECTION
   Figma: h=920 / 見出しy=98 / リードy=242 / カード群y=351 w=1230
          カード358角・ボタン174x56（カード上端から390）
   ------------------------------------------------------------ */
.phCollection { padding: 9.8rem 0 12.3rem; background: var(--c-bg-collection); }
.phCollection .phHeading { margin-bottom: 3rem; }
.phLead {
	margin-bottom: 8rem;
	text-align: center;
	font-family: var(--f-jp);
	font-size: 2.4rem;
	letter-spacing: .05rem;
	line-height: 1.2;
}
.phCollectionList { display: flex; justify-content: space-between; }
.phCollectionList > li { width: 29.1%; }
.phCollectionList .photo { aspect-ratio: 1 / 1; overflow: hidden; line-height: 0; }
.phCollectionList .photo img { width: 100%; height: 100%; object-fit: cover; }
.phBtnCheck { margin-top: 3.2rem; text-align: center; }
.phBtnCheck a {
	margin: 0 auto;
	width: 17.4rem;
	height: 5.6rem;
	font-family: var(--f-en);
	font-weight: 700;
	font-size: 2.1rem;
	letter-spacing: .15rem;
}

/* ------------------------------------------------------------
   6. STORE & ONLINE
   Figma: h=810 / 見出しy=98 / 本体y=284 w=891
          アイコン171x177 ／ テキスト列 w=659（アイコンから61px右）
          ボタン474x56 ／ 本文 24px lh40px
   ------------------------------------------------------------ */
.phStore { padding: 9.8rem 0 12rem; background: var(--c-bg-gray); }
.phStore .phHeading { margin-bottom: 7.3rem; }
.phStoreList { width: 89.1rem; max-width: 100%; margin: 0 auto; }
.phStoreList > li { display: flex; align-items: flex-start; gap: 6.1rem; }
.phStoreList > li + li { margin-top: 6.4rem; }
.phStoreList .icon {
	flex: 0 0 17.1rem;
	width: 17.1rem;
	height: 17.7rem;
	background: none;
	border-radius: 0;
	box-shadow: none;
	line-height: 0;
}
.phStoreList .icon img { width: 100%; height: auto; }
.phStoreList .textBox { flex: 1 1 auto; text-align: left; padding-top: .9rem; }
.phStoreList .text {
	font-family: var(--f-jp);
	font-size: 2.4rem;
	letter-spacing: .05rem;
	line-height: 40px;
}
.phStoreList .phBtn { margin-top: 2.3rem; }
.phStoreList .phBtn a {
	margin: 0;
	width: 47.4rem;
	max-width: 100%;
	height: 5.6rem;
	font-family: var(--f-jp);
	font-size: 1.8rem;
	letter-spacing: .1rem;
}

/* ------------------------------------------------------------
   7. CONNECT / OFFICIAL SNS
   Figma: h=466 / CONNECT列 中心x=380 / SNS列 中心x=988
          見出しy=99 ／ リンクy=262 ／ SNSアイコンy=258 69角 間隔42
          リンク Noto 20.9px ls1 ＋ 11x19 のシェブロン
   ------------------------------------------------------------ */
.phConnect { padding: 9.9rem 0 8.6rem; background: var(--c-bg); }
.phConnect .phInner { display: flex; justify-content: center; gap: 20.5rem; }
.phConnect .col:first-child { flex: 0 0 34.8rem; }
.phConnect .col:last-child  { flex: 0 0 46.1rem; }
.phConnect .phHeading { margin-bottom: 4.8rem; }
.phConnect .phHeading .ja { letter-spacing: .4rem; }

.phLinkList { text-align: center; }
.phLinkList > li + li { margin-top: 2.5rem; }
.phLinkList a {
	display: inline-flex;
	align-items: center;
	gap: 1.4rem;
	padding: 0;
	border-bottom: 0;
	color: var(--c-text);
	font-family: var(--f-jp);
	font-size: 2.09rem;
	letter-spacing: .1rem;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: opacity .2s;
}
.phLinkList a::after {
	content: "";
	display: block;
	flex: 0 0 1.1rem;
	width: 1.1rem;
	height: 1.9rem;
	background: url("img/common/ph_chevron.svg") no-repeat center / contain;
	border: 0;
	transform: none;
	position: static;
}
.phLinkList a:hover { opacity: .65; }

.phSnsList { display: flex; justify-content: center; gap: 4.2rem; }
.phSnsList a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6.9rem;
	height: 6.9rem;
	background: var(--c-brand-light);
	border-radius: 1.6rem;
	transition: opacity .2s;
}
.phSnsList a:hover { opacity: .75; }
.phSnsList img { width: 3.8rem; height: auto; }

/* ------------------------------------------------------------
   8. フッター
   Figma: h=94 / リンク Noto 13.6px ls1 中央 y=36
          コピーライト Lato 11.5px ls0.4 右端 y=67
   ------------------------------------------------------------ */
#gFooter { padding: 0; background: var(--c-bg-footer); color: var(--c-brand); }
#gFooter .phInner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 9.4rem;
}
.phFooterNav { display: flex; align-items: center; }
.phFooterNav > li { position: relative; padding: 0 1.1rem; }
.phFooterNav > li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 1.2rem;
	background: var(--c-brand);
	opacity: .6;
	transform: translateY(-50%);
}
.phFooterNav a {
	color: var(--c-brand);
	font-family: var(--f-jp);
	font-size: 1.36rem;
	letter-spacing: .1rem;
	text-decoration: none;
}
.phFooterNav a:hover { text-decoration: underline; }
.phCopyright {
	position: absolute;
	right: 0;
	bottom: 1.3rem;
	color: var(--c-brand);
	font-family: var(--f-en);
	font-size: 1.15rem;
	letter-spacing: .04rem;
}

/* ------------------------------------------------------------
   9. スマートフォン（〜896px）
   SPカンプ未提供のため、PCデザインを縦積みに落とす暫定対応
   ------------------------------------------------------------ */
@media all and (max-width: 896px) {
	#gHeader { height: 7rem; }
	#gHeader h1,
	#gHeader h1 a { margin-left: 2.4rem; width: 16rem; }
	#gHeader h1 img.sp { width: 16rem; height: auto; }
	#gHeader .menuBox { margin-right: 0; }

	/* SP も全画面（高さ指定は上のブロックで共通）*/
	/* SP はブラウザ下部のツールバーに隠れないよう高めに置く */
	#index .mainVisual .mvSlider .slick-dots { right: 2rem; bottom: 1.6rem; gap: .6rem; }
	#index .mainVisual .mvSlider .slick-dots li { width: 3.4rem; height: .4rem; }

	.phHeading .en { font-size: 4.2rem; white-space: normal; }
	.phHeading .ja { font-size: 1.2rem; }

	.phConcept { padding: 6rem 0 6.4rem; }
	.phConceptBody { display: block; width: 100%; }
	.phConceptBody .photo { margin: 0 auto 3rem; width: 22rem; flex: none; }
	.phConceptBody .textBox { text-align: center; }
	.phConceptBody .catch { font-size: 2.4rem; white-space: normal; }
	.phConceptBody .text { font-size: 1.5rem; }
	.phConceptBody .size { width: 100%; font-size: 1.2rem; padding: .8rem 1.4rem; }

	.phCollection { padding: 6rem 0 6.4rem; }
	.phLead { font-size: 1.6rem; margin-bottom: 3.4rem; }
	.phCollectionList { display: block; }
	.phCollectionList > li { width: 100%; }
	.phCollectionList > li + li { margin-top: 4rem; }

	.phStore { padding: 6rem 0 6.4rem; }
	.phStoreList { width: 100%; }
	.phStoreList > li { display: block; text-align: center; }
	.phStoreList .icon { margin: 0 auto 2.4rem; width: 12rem; height: auto; flex: none; }
	.phStoreList .textBox { text-align: center; padding-top: 0; }
	.phStoreList .text { font-size: 1.5rem; line-height: 2; }
	.phStoreList .phBtn a { margin: 0 auto; width: 100%; font-size: 1.5rem; }
	.phBtn a::after { right: 2rem; }

	.phConnect { padding: 6rem 0 5rem; }
	.phConnect .phInner { display: block; }
	.phConnect .col:first-child,
	.phConnect .col:last-child { flex: none; }
	.phConnect .col + .col { margin-top: 5rem; }
	.phLinkList a { font-size: 1.6rem; }
	.phSnsList { gap: 3rem; }

	#gFooter .phInner { display: block; padding: 2.6rem 0 3.4rem; text-align: center; }
	.phFooterNav { justify-content: center; flex-wrap: wrap; }
	.phCopyright { position: static; margin-top: 1.6rem; text-align: center; }
}

/* ------------------------------------------------------------
   10. Figma実値との最終調整
   ------------------------------------------------------------ */
/* CSSのletter-spacingは最終文字の後ろにも入るため、その分を相殺 */
#gHeader #gNavi .naviList > li > a { margin-right: -.17rem; }

/* サブ見出しはテーマ側で太字になっていたので Regular に戻す */
.phHeading .ja { font-weight: 400; }

/* 見出しサイズはFigmaの各セクションの実値に合わせる */
.phConcept    .phHeading .en { font-size: 6.76rem; }
.phCollection .phHeading .en { font-size: 6.87rem; }
.phStore      .phHeading .en { font-size: 6.82rem; }
.phConnect .col:first-child .phHeading .en { font-size: 6.94rem; }
.phConnect .col:last-child  .phHeading .en { font-size: 6.61rem; }

/* サブ見出しもFigmaの実値へ */
.phConcept    .phHeading .ja { font-size: 1.62rem; }
.phCollection .phHeading .ja { font-size: 1.64rem; }
.phStore      .phHeading .ja { font-size: 1.65rem; }
.phConnect .col:first-child .phHeading .ja { font-size: 1.66rem; }
.phConnect .col:last-child  .phHeading .ja { font-size: 1.63rem; }

/* CONNECTの2本目リンクはFigmaで19.9px */
.phLinkList > li:nth-child(2) a { font-size: 1.99rem; }

@media all and (max-width: 896px) {
	.phConcept .phHeading .en, .phCollection .phHeading .en, .phStore .phHeading .en,
	.phConnect .col:first-child .phHeading .en, .phConnect .col:last-child .phHeading .en { font-size: 4.2rem; }
	.phConcept .phHeading .ja, .phCollection .phHeading .ja, .phStore .phHeading .ja,
	.phConnect .col:first-child .phHeading .ja, .phConnect .col:last-child .phHeading .ja { font-size: 1.2rem; }
	.phLinkList > li:nth-child(2) a { font-size: 1.6rem; }
}

/* セクション高さをFigma実測に合わせる（下余白で調整） */
.phConcept    { padding-bottom: 14.5rem; }
.phCollection { padding-bottom: 13.9rem; }
.phStore      { padding-bottom: 10rem; }
.phConnect    { padding-bottom: 11.8rem; }
@media all and (max-width: 896px) {
	.phConcept, .phCollection, .phStore { padding-bottom: 6.4rem; }
	.phConnect { padding-bottom: 5rem; }
}

/* ------------------------------------------------------------
   11. パーツ位置をFigma実測に合わせる
   ------------------------------------------------------------ */
/* コンセプト画像は正方形（ACFの画像比率に依存させない） */
.phConceptBody .photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.phConceptBody .photo img { width: 100%; height: 100%; object-fit: cover; }

/* COLLECTION：カード群はFigmaどおり1230px（カード358・間隔78） */
.phCollection .phInner { width: 123rem; max-width: 92%; }
.phCollectionList > li { width: 29.106%; }

/* CONNECT：2カラム群をFigmaの x=206〜1219 に合わせる */
.phConnect .phInner {
	width: 101.3rem;
	max-width: 92%;
	gap: 20.4rem;
	padding-right: 1.5rem;
	box-sizing: content-box;
}

@media all and (max-width: 896px) {
	.phCollection .phInner { width: 117.4rem; max-width: 90%; }
	.phCollectionList > li { width: 100%; }
	.phConnect .phInner { width: 117.4rem; max-width: 90%; padding-right: 0; gap: 0; }
}

/* 画像を正方形にしたぶんの縦位置を再調整 */
.phConceptBody { align-items: center; }   /* Figma: テキスト列は画像に対して上下中央 */
.phConcept    { padding-bottom: 10.6rem; }
.phCollection { padding-bottom: 12.3rem; }
@media all and (max-width: 896px) {
	.phConcept, .phCollection { padding-bottom: 6.4rem; }
}

/* テーマの h2 由来の上マージンを除去（見出しブロックが約30px高くなっていた） */
.phHeading { margin-top: 0; }
.phConceptBody .catch,
.phConceptBody .text,
.phLead,
.phStoreList .text { margin-top: 0; }

/* コンテナのテーマ由来マージンを除去 */
.phConceptBody, .phCollectionList, .phStoreList, .phLinkList, .phSnsList { margin-top: 0; }
/* ※ 直前に +30px した下余白は撤回。
      .fade の translateY(30px) を実寸と誤認したもので、レイアウトはズレていない。 */

/* 最終微調整（.fade を無効化した実測に基づく） */
.phConceptBody .size { margin-top: 2.1rem; }
.phStore .phHeading  { margin-bottom: 6.5rem; }
.phStoreList .phBtn  { margin-top: 1.4rem; }
.phConnect .phInner  { padding-right: 0; }
@media all and (max-width: 896px) {
	.phConceptBody .size { margin-top: 2rem; }
	.phStore .phHeading { margin-bottom: 3.4rem; }
}

/* ------------------------------------------------------------
   12. ヘッダーを上部固定（スクロール追従）
   ------------------------------------------------------------ */
#gHeader,
body.home #gHeader,
body:not(.home) #gHeader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}
/* 固定ヘッダーの高さぶん content を下げる（下層ページのみ）。
   トップはヒーローを最上部から始め、透明ヘッダーの背後に画像を通す
   （2026-09-30 クライアント指定。いったん下げたが戻した） */
body.home #container { padding-top: 0; }
body:not(.home) #container { padding-top: 9.5rem; }

@media all and (max-width: 896px) {
	body:not(.home) #container { padding-top: 7rem; }
}

/* 最終差分の吸収 */
.phConceptBody .size { margin-top: 1rem; }
.phStore { padding-bottom: 10.8rem; }
@media all and (max-width: 896px) {
	.phConceptBody .size { margin-top: 2rem; }
	.phStore { padding-bottom: 6.4rem; }
}

/* ============================================================
   13. スマートフォンのヘッダー（〜896px）
   BABYDOLL は「黒バー＋白抜きロゴ＋全画面の黒パネル」。
   PINKHUNT は白バー＋ピンクロゴ＋白パネルに置き換える。
   ※ PC用ルールが #gHeader #gNavi …（ID2つ）で詳細度が高いため、
     SP側も同じ詳細度で書かないと効かない。
   ============================================================ */
@media all and (max-width: 896px) {
	#gHeader {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 300;
		display: flex;
		align-items: center;
		width: 100%;
		height: 7rem;
		background: rgba(255, 255, 255, .95);
	}
	/* ロゴ：テーマの「全幅固定の黒バー」を解除して左寄せに */
	#gHeader h1 {
		position: static;
		width: auto;
		margin: 0 0 0 2rem;
		padding: 0;
		background: none;
		z-index: auto;
	}
	#gHeader h1 a { width: 13rem; margin: 0; filter: none; }
	#gHeader h1 img.pc { display: none; }
	#gHeader h1 img.sp { display: block; width: 13rem; height: auto; }

	/* ハンバーガー：右上・線はテキスト色 */
	#gHeader .menu { left: auto; right: 2rem; top: 2.65rem; z-index: 400; }
	#gHeader .menu span { background: var(--c-text); }
	#gHeader .menu.on { top: 2.55rem; }

	/* スライドパネル：白地・全画面 */
	#gHeader .menuBox {
		margin: 0;
		width: 100%;
		height: 100%;
		background: var(--c-bg);
		overflow-y: auto;
		z-index: 200;
	}
	#gHeader #gNavi {
		display: block;
		width: auto;
		max-width: 37.8rem;
		margin: 0 auto;
		padding: 10rem 1.9rem 6rem;
	}
	#gHeader #gNavi .naviList {
		display: block;
		gap: 0;
		margin: 0 1rem 3rem;
		padding: 0;
	}
	#gHeader #gNavi .naviList > li { padding: 0; }
	#gHeader #gNavi .naviList > li + li::before { content: none; display: none; }
	#gHeader #gNavi .naviList > li > a {
		display: flex;
		align-items: baseline;
		gap: 1.6rem;
		margin: 0;
		padding: 1.8rem 0;
		border-bottom: 1px solid var(--c-line);
		color: var(--c-text);
		font-family: var(--f-en);
		font-size: 1.9rem;
		letter-spacing: .12rem;
		line-height: 1.2;
		white-space: nowrap;
	}
	#gHeader #gNavi .naviList > li > a .txt.sp {
		display: inline;
		color: var(--c-text-sub);
		font-family: var(--f-jp);
		font-size: 1.2rem;
		letter-spacing: .05rem;
	}
	/* パネル内SNS：白抜き反転を解除 */
	#gHeader #gNavi .snsBox .ttl img,
	#gHeader #gNavi .snsBox .snsList li img { filter: none; }
	#gHeader #gNavi .snsBox .ttl::before,
	#gHeader #gNavi .snsBox .ttl::after { background: var(--c-brand); }
	#gHeader #gNavi .snsBox .snsList li { width: 4.4rem; }
	#gHeader #gNavi .snsBox .snsList li img { width: 100%; height: auto; }

	/* 固定ヘッダー分の余白（トップはヒーローを背後に通すので0） */
	body:not(.home) #container { padding-top: 7rem; }
	body.home #container { padding-top: 0; }
}

/* SPの見た目バランス調整 */
@media all and (max-width: 896px) {
	#gHeader h1 a,
	#gHeader h1 img.sp { width: 13rem; }
	.phConcept .phHeading .en, .phCollection .phHeading .en, .phStore .phHeading .en,
	.phConnect .col:first-child .phHeading .en, .phConnect .col:last-child .phHeading .en { font-size: 3.4rem; }
}

/* ============================================================
   14. 文字ユニット間のマージンを Figma の実測に合わせる
   Figma の入れ子フレーム内オフセットまで含めて算出
   ------------------------------------------------------------
   BRAND CONCEPT / Frame20 (h=249)
     ANYTIME(54) → 16 → 本文(96) → 42 → 展開サイズ帯(41)
   STORE / Frame10 (h=159)
     本文(80) → 23 → ボタン(56)
   CONNECT / Frame18 (h=74)
     リンク1(25) → 25 → リンク2(24)
   ============================================================ */
.phConceptBody .size { margin-top: 4.2rem; }
.phStoreList .phBtn   { margin-top: 2.3rem; }

/* リンクの行ボックスに余分な行間が乗っていたので詰める */
.phLinkList > li { line-height: 0; }
.phLinkList a { line-height: 1.2; }
.phFooterNav > li { line-height: 1; }
.phFooterNav a { line-height: 1.2; }

@media all and (max-width: 896px) {
	.phConceptBody .size { margin-top: 2rem; }
	.phStoreList .phBtn  { margin-top: 2rem; }
}

/* CONNECT の高さをFigma（466）に合わせる */
.phConnect { padding-bottom: 13rem; }
@media all and (max-width: 896px) { .phConnect { padding-bottom: 5rem; } }

/* ------------------------------------------------------------
   15. SPパネルの残作業
   ・ロゴがパネル(z200)に隠れていたので前面へ
   ・パネル内SNSをデザインどおりピンクの角丸＋白ロゴに
   ------------------------------------------------------------ */
@media all and (max-width: 896px) {
	#gHeader h1 { position: relative; z-index: 350; }

	#gHeader #gNavi .snsBox .ttl { padding: 0 4.4rem; }
	#gHeader #gNavi .snsBox .ttl span {
		color: var(--c-brand);
		font-family: var(--f-serif);
		font-weight: 500;
		font-size: 2.2rem;
		letter-spacing: .2rem;
	}
	#gHeader #gNavi .snsBox .snsList { gap: 3rem; }
	#gHeader #gNavi .snsBox .snsList li { width: auto; }
	#gHeader #gNavi .snsBox .snsList li a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 6rem;
		height: 6rem;
		background: var(--c-brand-light);
		border-radius: 1.4rem;
	}
	#gHeader #gNavi .snsBox .snsList li img { width: 3.3rem; height: auto; }
}

/* SNSアイコン列の水平位置をFigma（x=843）に合わせる */
.phConnect .col:last-child .phSnsList { padding-right: 2.2rem; }
@media all and (max-width: 896px) {
	.phConnect .col:last-child .phSnsList { padding-right: 0; }
}

/* ------------------------------------------------------------
   16. スマホ専用の改行
   テーマの .sp は display:block !important のため <br> には使えない。
   専用クラスで PC は改行なし / SP のみ改行させる。
   ------------------------------------------------------------ */
.phBrSp { display: none; }
@media all and (max-width: 896px) {
	.phBrSp { display: inline; }
	.phConceptBody .size { text-align: center; }
}

/* ============================================================
   17. 下層ページ共通レイアウト（web_pc_other 準拠）
   パンくず → ページタイトル（英字＋日本語）→ 本文
   ============================================================ */
.phPage { padding: 5.6rem 0 12rem; background: var(--c-bg); }

.phBreadcrumb {
	margin: 0 0 1.2rem;
	padding-left: 2.6rem;
	color: var(--c-text);
	font-family: var(--f-jp);
	font-size: 1.3rem;
	letter-spacing: .06rem;
	line-height: 1.2;
}
.phBreadcrumb a { color: var(--c-text); text-decoration: none; opacity: .75; }
.phBreadcrumb a:hover { opacity: 1; color: var(--c-brand); }
.phBreadcrumb .sep { margin: 0 .8rem; opacity: .5; }
.phBreadcrumb .current { opacity: 1; }

.phPageTitle {
	margin: 0 0 8.8rem;
	text-align: center;
	line-height: 1;
}
.phPageTitle .en {
	display: block;
	color: var(--c-brand);
	font-family: var(--f-serif);
	font-weight: 500;
	font-size: 6.8rem;
	letter-spacing: .3rem;
	line-height: 1.32;
	white-space: nowrap;
}
.phPageTitle .ja {
	display: block;
	margin-top: .4rem;
	color: var(--c-brand);
	font-family: var(--f-jp);
	font-size: 1.66rem;
	letter-spacing: .4rem;
	line-height: 1.2;
}

/* ------------------------------------------------------------
   18. 下層ページ本文の体裁
   旧サイトから移した本文（siterule / press）と
   BABYDOLL 由来の本文（company / privacypolicy）の双方を整える
   ------------------------------------------------------------ */
.phPageBody {
	max-width: 90rem;
	margin: 0 auto;
	font-family: var(--f-jp);
	font-size: 1.6rem;
	line-height: 2;
	color: var(--c-text);
}
.phPageBody > *:first-child { margin-top: 0; }

/* 大見出し（節） */
.phPageBody h2 {
	margin: 6.4rem 0 2.4rem;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--c-line);
	color: var(--c-brand);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: .08rem;
	line-height: 1.5;
}
/* 小見出し */
.phPageBody h3 {
	margin: 4rem 0 1.2rem;
	color: var(--c-text);
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: .06rem;
	line-height: 1.6;
}
.phPageBody h4 {
	margin: 2.8rem 0 .8rem;
	font-size: 1.7rem;
	font-weight: 700;
}
.phPageBody p { margin: 0 0 1.8rem; }
.phPageBody a { color: var(--c-brand); }
.phPageBody strong, .phPageBody b { font-weight: 700; }
.phPageBody hr {
	margin: 4rem 0;
	border: 0;
	border-top: 1px solid var(--c-line);
}
.phPageBody ul, .phPageBody ol { margin: 0 0 1.8rem 2.2rem; }
.phPageBody li { margin-bottom: .6rem; }
.phPageBody img { max-width: 100%; height: auto; }

/* 定義リスト（会社概要の表組み） */
.phPageBody dl.textList01 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 2rem;
	border-top: 1px solid var(--c-line);
}
.phPageBody dl.textList01 dt {
	box-sizing: border-box;
	width: 20rem;
	padding: 2rem 1rem 2rem 0;
	border-bottom: 1px solid var(--c-line);
	font-weight: 700;
	letter-spacing: .3rem;
}
.phPageBody dl.textList01 dd {
	box-sizing: border-box;
	width: calc(100% - 20rem);
	margin: 0;
	padding: 2rem 0;
	border-bottom: 1px solid var(--c-line);
}

/* 旧サイト由来のラッパー（体裁だけ整えて無害化） */
.phPageBody .text_box { margin: 0 0 3.2rem; }
.phPageBody .box,
.phPageBody .guide { margin: 0 0 3.2rem; }
.phPageBody ul.title { margin: 0 0 1rem; list-style: none; font-weight: 700; }

@media all and (max-width: 896px) {
	.phPage { padding: 2.4rem 0 6.4rem; }
	.phBreadcrumb { margin-bottom: 2.8rem; padding-left: 0; font-size: 1.1rem; }
	.phPageTitle { margin-bottom: 4rem; }
	.phPageTitle .en { font-size: 3.4rem; white-space: normal; }
	.phPageTitle .ja { font-size: 1.2rem; }
	.phPageBody { font-size: 1.4rem; }
	.phPageBody h2 { margin: 4rem 0 1.8rem; font-size: 1.9rem; }
	.phPageBody h3 { margin: 2.8rem 0 1rem; font-size: 1.6rem; }
	.phPageBody dl.textList01 dt,
	.phPageBody dl.textList01 dd { width: 100%; }
	.phPageBody dl.textList01 dt { padding-bottom: .4rem; border-bottom: 0; }
	.phPageBody dl.textList01 dd { padding-top: 0; }
}

/* 本文中のリンクボタン（PRESS の通販サイトなど） */
.phPageBody .phPageBtn { margin: 2.4rem 0 3.2rem; }
.phPageBody .phPageBtn a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 36rem;
	max-width: 100%;
	height: 5.6rem;
	padding: 0 5.6rem 0 3.2rem;
	background: var(--c-btn);
	border-radius: 10rem;
	box-shadow: .4rem .5rem 0 rgba(216, 153, 184, .55);
	color: var(--c-brand);
	font-size: 1.7rem;
	letter-spacing: .1rem;
	text-decoration: none;
	transition: transform .15s, box-shadow .15s;
}
.phPageBody .phPageBtn a::after {
	content: "";
	position: absolute;
	right: 2.9rem;
	top: 50%;
	width: 1.1rem;
	height: 1.9rem;
	margin-top: -.95rem;
	background: url("img/common/ph_chevron.svg") no-repeat center / contain;
}
.phPageBody .phPageBtn a:hover {
	transform: translate(.2rem, .25rem);
	box-shadow: .2rem .25rem 0 rgba(216, 153, 184, .55);
}
@media all and (max-width: 896px) {
	.phPageBody .phPageBtn a { min-width: 0; width: 100%; font-size: 1.4rem; }
}

/* ============================================================
   19. CONTACT ページ（Figma: web_pc_other 02_Contact）
   基準: セクション左端 x=180 / 罫線 w=1070
         見出しアイコン 40φ x=235 / 見出し文字 x=285
         電話 2カラム x=235・770 / フォームボックス 456x72
   ============================================================ */
.phPage--contact .phPageBody { max-width: none; }

.phPage--contact .phCt {
	width: 107rem;
	max-width: 100%;
	margin: 0 0 0 4.7rem;    /* .phInner(x=133) から 180px の位置へ */
}

/* --- セクション見出し（丸アイコン＋罫線） --- */
.phPage--contact .phCtHead {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: content-box;
	height: 4rem;
	margin: 0;
	padding: 0 0 2.1rem 10.5rem;
	border-bottom: 1px solid var(--c-rule);
	color: var(--c-text);
	font-family: var(--f-jp);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: .05rem;
	line-height: 1.2;
}
.phPage--contact .phCtHead::before {
	content: "";
	position: absolute;
	left: 5.5rem;
	top: 0;
	width: 4rem;
	height: 4rem;
	background: no-repeat center / contain;
}
.phPage--contact .phCtHead--tel::before  { background-image: url("img/common/ph_icon_phone.svg"); }
.phPage--contact .phCtHead--mail::before { background-image: url("img/common/ph_icon_mail.svg"); }

.phPage--contact .phCtSec + .phCtSec { margin-top: 10.8rem; }

/* --- お電話でのお問い合わせ --- */
.phPage--contact .phCtTel {
	display: flex;
	margin: 4.4rem 0 0;
	padding-left: 5.5rem;
	list-style: none;
}
.phPage--contact .phCtTel > li { flex: 0 0 53.5rem; max-width: 53.5rem; margin: 0; }
.phPage--contact .phCtTel .ttl {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: .05rem;
	line-height: 1.2;
}
.phPage--contact .phCtTel .num {
	margin: 1.5rem 0 0;
	color: var(--c-brand);
	font-size: 3.9rem;
	font-weight: 700;
	letter-spacing: .05rem;
	line-height: 1.2;
}
.phPage--contact .phCtTel .num a { color: inherit; text-decoration: none; pointer-events: none; }
.phPage--contact .phCtTel .time {
	margin: 2.4rem 0 0;
	font-size: 1.93rem;
	letter-spacing: .04rem;
	line-height: 1.2;
}
.phPage--contact .phCtTel .time .lbl {
	display: block;
	margin-bottom: .8rem;
	font-size: 1.6rem;
	line-height: 1.2;
}

/* --- フォームからのお問い合わせ --- */
.phPage--contact .phCtNote {
	margin: 4.6rem 0 0;
	padding-left: 5.7rem;
	color: var(--c-brand);
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: .04rem;
	line-height: 1.2;
}
.phPage--contact .phCtNote .dom { display: block; margin-top: .7rem; padding-left: 1.7rem; }

.phPage--contact .phCtSub {
	margin: 3.7rem 0 0;
	padding-left: 5.3rem;
	color: var(--c-text);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: .05rem;
	line-height: 1.2;
}
.phPage--contact .phCtLinks + .phCtSub { margin-top: 4.5rem; padding-left: 5.5rem; }

.phPage--contact .phCtLinks {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3.4rem;
	margin: 2rem 0 0;
	padding-left: 6.3rem;
	list-style: none;
}
.phPage--contact .phCtLinks li { width: 45.6rem; margin: 0; }
.phPage--contact .phCtLinks a {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 7.2rem;
	padding: 0 2rem 0 8.7rem;
	background: var(--c-white);
	border: 1px solid var(--c-rule);
	color: var(--c-text);
	font-size: 1.7rem;
	letter-spacing: .04rem;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}
.phPage--contact .phCtLinks a::before {
	content: "";
	position: absolute;
	left: 2.8rem;
	top: 50%;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: -.8rem;
	border-radius: 50%;
	background: #d2d2d2;
	transition: background-color .15s;
}
.phPage--contact .phCtLinks a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.phPage--contact .phCtLinks a:hover::before { background: var(--c-brand); }

/* Figma: 最終ボックス下端 1409 → セクション末 1500（＝91px） */
.phPage--contact { padding-bottom: 9.2rem; }

@media all and (max-width: 896px) {
	.phPage--contact .phCt { width: auto; margin-left: 0; }
	.phPage--contact .phCtHead {
		height: auto;
		min-height: 3.2rem;
		padding: 0 0 1.4rem 4.4rem;
		font-size: 1.8rem;
	}
	.phPage--contact .phCtHead::before { left: 0; top: 50%; width: 3.2rem; height: 3.2rem; margin-top: -2.3rem; }
	.phPage--contact .phCtSec + .phCtSec { margin-top: 5.6rem; }
	.phPage--contact .phCtTel { display: block; margin-top: 2.8rem; padding-left: 0; }
	.phPage--contact .phCtTel > li { max-width: none; }
	.phPage--contact .phCtTel > li + li { margin-top: 3.2rem; }
	.phPage--contact .phCtTel .ttl { font-size: 1.6rem; }
	.phPage--contact .phCtTel .num { margin-top: 1rem; font-size: 3rem; }
	.phPage--contact .phCtTel .num a { pointer-events: auto; }
	.phPage--contact .phCtTel .time { margin-top: 1.4rem; font-size: 1.4rem; }
	.phPage--contact .phCtTel .time .lbl { font-size: 1.2rem; margin-bottom: .4rem; }
	.phPage--contact .phCtNote { margin-top: 2.8rem; padding-left: 0; font-size: 1.3rem; line-height: 1.6; }
	.phPage--contact .phCtNote .dom { margin-top: .4rem; padding-left: 1.3rem; }
	.phPage--contact .phCtSub { margin-top: 3.2rem; padding-left: 0; font-size: 1.6rem; }
	.phPage--contact .phCtLinks + .phCtSub { margin-top: 3.2rem; }
	.phPage--contact .phCtLinks { gap: 1.2rem; margin-top: 1.4rem; padding-left: 0; }
	.phPage--contact .phCtLinks li { width: 100%; }
	.phPage--contact .phCtLinks a { height: 5.6rem; padding: 0 1.6rem 0 5.2rem; font-size: 1.4rem; }
	.phPage--contact .phCtLinks a::before { left: 2rem; width: 1.2rem; height: 1.2rem; margin-top: -.6rem; }
	.phPage--contact { padding-bottom: 6.4rem; }
}

/* ============================================================
   20. お問い合わせフォーム（ec01-ec06 / shop / thanks）
   BABYDOLL のフォーム CSS（#contact-ec 配下）をそのまま使う。
   色は :root のトークン経由なので PINKHUNT 色で表示される。
   ここでは 18節の本文タイポグラフィとの衝突だけを解く。
   ============================================================ */
.phPageBody #contact-ec { margin-bottom: 0; }
.phPageBody #contact-ec ul,
.phPageBody #contact-ec ol { margin: 0; list-style: none; }
.phPageBody #contact-ec li { margin: 0; }
.phPageBody #contact-ec .content > *:last-child { margin-bottom: 0; }
.phPageBody #contact-ec .thanksBox p { margin-bottom: 3.6rem; }
.phPageBody #contact-ec .thanksBox .comBtn01 { margin-bottom: 0; }

@media all and (max-width: 896px) {
	.phPageBody #contact-ec .thanksBox p { margin-bottom: 2rem; }
}

/* CF7 フォーム内の見出しアイコンを PINKHUNT 色に差し替える。
   フォーム本体（CF7）は書き換えず、表示だけを上書きする＝可逆。 */
.phPageBody #contact-ec .headLine02 .icon img[src$="/icon04.png"] { content: url("img/common/ph_icon04.png"); }
.phPageBody #contact-ec .headLine02 .icon img[src$="/icon05.png"] { content: url("img/common/ph_icon05.png"); }
.phPageBody #contact-ec .headLine02 .icon img[src$="/icon06.png"] { content: url("img/common/ph_icon06.png"); }
.phPageBody #contact-ec .headLine02 .icon img[src$="/icon11.png"] { content: url("img/common/ph_icon11.png"); }
.phPageBody #contact-ec .headLine02 .icon img[src$="/icon12.png"] { content: url("img/common/ph_icon12.png"); }
.phPageBody #contact-ec .headLine02 .icon img[src$="/icon13.png"] { content: url("img/common/ph_icon13.png"); }
.phPageBody #contact-ec .headLine02 .icon img[src$="/icon14.png"] { content: url("img/common/ph_icon14.png"); }
.phPageBody #contact-ec .mailForm select {
	background-image: url("img/common/ph_icon10.png");
}
.phPageBody #contact-ec .mailForm .radioList input[type="radio"]:checked ~ span {
	background-image: url("img/common/ph_radio_icon02.png");
}

/* フォームページは本文幅を絞らない。
   BABYDOLL の .content（117.4rem / max-width 90%）をそのまま効かせる。
   90rem に絞ると th（32%）が狭くなり「受注番号または注文日」等が折り返す。 */
.phPage--ec01 .phPageBody,
.phPage--ec02 .phPageBody,
.phPage--ec03 .phPageBody,
.phPage--ec04 .phPageBody,
.phPage--ec05 .phPageBody,
.phPage--ec06 .phPageBody,
.phPage--shop .phPageBody,
.phPage--thanks .phPageBody { max-width: none; }

/* .phInner が既に 117.4rem / 90% なので、.content は親いっぱいに広げる */
.phPageBody #contact-ec .content {
	width: 100%;
	max-width: none;
	margin: 0;
}
@media all and (max-width: 896px) {
	.phPageBody #contact-ec .content { margin: 0; }
}

/* ============================================================
   21. SHOP LIST（archive-shoplist.php）
   BABYDOLL の #shoplist 配下のCSSを土台にしつつ、
   ・赤い画像アイコン（icon17/18/19）をピンク版に差し替え
   ・文字サイズを下層ページのスケール（本文1.6rem）に合わせる
   の2点を上書きする。
   ============================================================ */
.phPage--shoplist .phPageBody { max-width: none; }

/* --- 地域アコーディオン（大分類） --- */
.phPage--shoplist #shoplist .shopList > dt {
	padding: 2rem 6rem 2rem 2.4rem;
	min-height: 0;
	background: var(--c-bg-collection);
	border-bottom: 1px solid var(--c-white);
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: .06rem;
	line-height: 1.5;
	color: var(--c-text);
	transition: background-color .2s;
}
.phPage--shoplist #shoplist .shopList > dt:hover { background: var(--c-btn); }
.phPage--shoplist #shoplist .shopList > dt::after,
.phPage--shoplist #shoplist .subList > dt::after {
	width: 1.8rem;
	height: 1rem;
	right: 2.4rem;
	background-image: url("img/common/ph_icon17.png");
}

/* --- 都道府県（小分類） --- */
.phPage--shoplist #shoplist .subList > dt {
	padding: 1.8rem 6rem 1.8rem 3.6rem;
	min-height: 0;
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: .04rem;
	line-height: 1.5;
}
.phPage--shoplist #shoplist .subList > dt:not(:first-child) { border-top: 1px solid var(--c-line); }

/* --- 店舗カード --- */
.phPage--shoplist #shoplist .infoList li {
	padding: 2.4rem 2.4rem 2.8rem 3.6rem;
	gap: 3.2rem;
	border-top: 1px solid var(--c-line);
}
.phPage--shoplist #shoplist .infoList .photo { width: 34%; }
.phPage--shoplist #shoplist .infoList .textBox { margin-top: 0; width: auto; flex: 1 1 auto; }
.phPage--shoplist #shoplist .infoList .textBox .ttl {
	margin-bottom: 1.6rem;
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: .04rem;
	line-height: 1.4;
}
.phPage--shoplist #shoplist .infoList .textBox .txtList dt {
	margin-bottom: .2rem;
	font-family: var(--f-en);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .1rem;
	color: var(--c-brand);
}
.phPage--shoplist #shoplist .infoList .textBox .txtList dd {
	margin-bottom: 1.4rem;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.6;
}
.phPage--shoplist #shoplist .infoList .textBox .txtList dd .adr {
	margin: 0 0 .6rem;
	font-size: 1.6rem;
}
.phPage--shoplist #shoplist .infoList .textBox .txtList dd .time {
	margin-top: .2rem;
	font-size: 1.5rem;
}
/* MAP リンクのピンアイコン（元は赤） */
.phPage--shoplist #shoplist .infoList .textBox .txtList dd .map {
	padding-left: 1.8rem;
	font-size: 1.5rem;
	background-image: url("img/common/ph_icon18.png");
	background-size: 1.2rem;
	background-position: left center;
}

/* --- 「現在地からお近くの店舗を探す」ボタン --- */
/* トップの STORE & ONLINE と同じピル型に寄せる */
.phPage--shoplist #shoplist .comBtn01 { margin: 5.6rem 0 0; }
.phPage--shoplist #shoplist .comBtn01 a {
	width: auto;
	min-width: 36rem;
	max-width: 100%;
	height: 5.6rem;
	padding: 0 3.2rem;
	background: var(--c-btn);
	border-radius: 10rem;
	box-shadow: .4rem .5rem 0 rgba(216, 153, 184, .55);
	color: var(--c-brand);
	font-size: 1.7rem;
	font-weight: 400;
	letter-spacing: .1rem;
	transition: transform .15s, box-shadow .15s;
}
.phPage--shoplist #shoplist .comBtn01 a:hover {
	opacity: 1;
	transform: translate(.2rem, .25rem);
	box-shadow: .2rem .25rem 0 rgba(216, 153, 184, .55);
}
.phPage--shoplist #shoplist .comBtn01 a .txt {
	padding: 0 0 0 2.8rem;
	position: relative;
	text-shadow: none;
	background: none;   /* 右向き矢印(icon09)は使わない */
}
.phPage--shoplist #shoplist .comBtn01 a .txt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.6rem;
	height: 2.2rem;
	margin-top: -1.1rem;
	background: url("img/common/ph_icon19.png") no-repeat center / contain;
}

@media all and (max-width: 896px) {
	.phPage--shoplist #shoplist .shopList > dt { padding: 1.4rem 4.4rem 1.4rem 1.6rem; font-size: 1.6rem; }
	.phPage--shoplist #shoplist .subList > dt { padding: 1.3rem 4.4rem 1.3rem 2.4rem; font-size: 1.5rem; }
	.phPage--shoplist #shoplist .shopList > dt::after,
	.phPage--shoplist #shoplist .subList > dt::after { width: 1.4rem; height: .8rem; right: 1.6rem; }
	.phPage--shoplist #shoplist .infoList li { display: block; padding: 0; border-top: 1px solid var(--c-line); }
	.phPage--shoplist #shoplist .infoList .photo { width: auto; }
	.phPage--shoplist #shoplist .infoList .textBox { padding: 1.6rem 1.6rem 2.4rem; }
	.phPage--shoplist #shoplist .infoList .textBox .ttl { font-size: 1.6rem; margin-bottom: 1.2rem; }
	.phPage--shoplist #shoplist .infoList .textBox .txtList dt { font-size: 1.1rem; }
	.phPage--shoplist #shoplist .infoList .textBox .txtList dd,
	.phPage--shoplist #shoplist .infoList .textBox .txtList dd .adr { font-size: 1.4rem; }
	.phPage--shoplist #shoplist .infoList .textBox .txtList dd .time,
	.phPage--shoplist #shoplist .infoList .textBox .txtList dd .map { font-size: 1.3rem; }
	.phPage--shoplist #shoplist .comBtn01 { margin-top: 4rem; }
	.phPage--shoplist #shoplist .comBtn01 a { min-width: 0; width: 100%; font-size: 1.4rem; }
}

/* ============================================================
   22. 2026-09-07 の修正
   ============================================================ */

/* --- 電話番号は本文色に。MAP / Instagram はリンクと分かるようブランド色のまま --- */
.phPage--shoplist #shoplist .infoList .textBox .txtList dd a.tel {
	color: var(--c-text);
	text-decoration: none;
}
.phPage--shoplist #shoplist .infoList .textBox .txtList dd a.tel:hover { color: var(--c-brand); }

/* --- 各店舗の Instagram リンク（MAP と同じ体裁） --- */
.phPage--shoplist #shoplist .infoList .textBox .txtList dd a.insta {
	display: block;
	width: fit-content;
	padding-left: 2rem;
	color: var(--c-brand);
	font-family: var(--f-en);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .04rem;
	line-height: 2;
	text-decoration: none;
	background: url("img/common/ph_icon_instagram.svg") no-repeat left center / 1.4rem;
}
.phPage--shoplist #shoplist .infoList .textBox .txtList dd a.insta:hover { opacity: .7; }

/* --- 送信完了ページのボタン ---
   18節の `.phPageBody a { color: var(--c-brand) }` が
   BABYDOLL の白文字（.comBtn01 a）を上書きしてしまい、
   ピンク地にピンク文字で読めなくなっていた。ボタン内だけ白に戻す。
   SHOP LIST の「現在地から探す」は薄ピンク地＋ピンク文字で意図どおりなので対象外。 */
.phPageBody #contact-ec .comBtn01 a,
.phPageBody #contact-ec .comBtn01 a .txt { color: var(--c-text-inv); }

/* --- COLLECTION：URL 未設定のカードはボタンを出さないが高さは確保する --- */
.phBtnCheck.isEmpty { visibility: hidden; }
.phBtnCheck.isEmpty::before {
	content: "";
	display: block;
	margin: 0 auto;
	width: 17.4rem;
	height: 5.6rem;
}
@media all and (max-width: 896px) {
	.phBtnCheck.isEmpty::before { width: 15rem; height: 4.8rem; }
}

/* ============================================================
   23. トップのヘッダー：ヒーローを過ぎるまで透明（2026-09-30）
   初期は透明。ヒーローの下端がヘッダーの下端を通り過ぎたら
   従来の白背景に切り替える（index.php 末尾のJSが .isSolid を付け外し）。
   下層ページは常に白のまま。
   ============================================================ */
body.home #gHeader {
	background: transparent;
	transition: background-color .3s ease;
}
body.home #gHeader.isSolid { background: rgba(255, 255, 255, .9); }
@media all and (max-width: 896px) {
	body.home #gHeader.isSolid { background: rgba(255, 255, 255, .95); }
}