/* ==========================================================================
   omiso-fp-picks.css
   トップページの「OMISO beauty」と「OMISO HAIR」
   --------------------------------------------------------------------------
   ・2つのセクションを同じCSSで作っています。
     違うのは色だけで、それは下の「1. 色」の2ブロックで切り替えます。
   ・以前の .fp-ob__ / .fp-oh__ は使いません。
     既存のCSSにそれらの指定が残っていても、一致する要素が無いので
     何も起きません。消さなくて大丈夫です。

   ▼ 大きさを変えたいとき
     --pk-photo-w    写真の幅
     --pk-photo-x    写真を右にずらす量
     --pk-plate-w    色の面の幅
     --pk-plate-in   面の上端を、写真の上端からどれだけ下げるか
   ========================================================================== */


/* ==========================================================================
   1. 色
   ========================================================================== */
.fp-picks {
  /* 2つのセクションで共通の色 */
  --pk-brass:    #B08D4F;   /* おみその判断：ラベル・カテゴリー */
  --pk-ink:      #241E1C;
  --pk-ink-soft: #6B5F5A;
  --pk-line:     rgba(36, 30, 28, .12);
  --pk-photo-bg: #FFFFFF;

  /* 大きさの比率（2つとも同じ）
     数字を上げるほど右の余白が減ります。
     写真は --pk-photo-x + --pk-photo-w が右端の位置になるので、
     合計が 100% に近いほど右が詰まります。 */
  --pk-photo-w:  80%;   /* 写真の幅 */
  --pk-photo-x:  9%;    /* 写真を右にずらす量（左に見える面の帯の幅） */
  --pk-plate-w:  72%;   /* 色の面の幅 */
  --pk-plate-in: 7%;    /* 面の上端を、写真の上端から下げる量 */

  --pk-serif:  'Linotype Didot', Didot, 'Playfair Display', 'Times New Roman', serif;
  --pk-mincho: 'Zen Old Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}

/* 推しコス：ローズ */
.fp-picks--beauty {
  --pk-accent: #7B2B3A;
  --pk-plate:  #EFDEDF;
}

/* ヘアケア：濃紺
   ローズと同じ暗さ・同じ彩度の低さに揃えた寒色です。
   作りが完全に同じなので、色だけで「別の引き出し」だと分かります。

   ▼ 別の青にしたいときは、この2行を差し替えてください
     インディゴ    --pk-accent: #23395B;  --pk-plate: #D6DDEA;
     ダークティール --pk-accent: #15656C;  --pk-plate: #D2E2E3; */
.fp-picks--hair {
  --pk-accent: #2A3D5C;
  --pk-plate:  #D8DFEA;
}


/* ==========================================================================
   2. セクション全体
   ========================================================================== */
.fp-picks {
  padding: 44px 0;
}
/* 2つ目（ヘア）だけ、上に細い罫線を1本 */
.fp-picks + .fp-picks {
  border-top: 1px solid var(--pk-line);
}

.fp-picks :where(h2, p, ul) { margin: 0; padding: 0; }
.fp-picks :where(ul) { list-style: none; }
.fp-picks a { text-decoration: none; color: inherit; }


/* ==========================================================================
   3. 見出し
   ========================================================================== */
.fp-picks__head { margin-bottom: 30px; }

.fp-picks__logo {
  display: block;
  font-family: var(--pk-serif);
  font-weight: 400;
  line-height: .98;
}
.fp-picks__logo-1,
.fp-picks__logo-2 {
  display: block;
  letter-spacing: -.005em;
}
/* 1行目はセクションの色、2行目は墨。
   単独ページのロゴと同じ組み方に揃えています。
   色は必ず指定します。省くとテーマ側の見出しルールに持っていかれます */
.fp-picks .fp-picks__logo-1 {
  color: var(--pk-accent);
  font-size: clamp(2rem, 8.6vw, 3.3rem);
}
.fp-picks .fp-picks__logo-2 {
  color: var(--pk-ink);
  font-size: clamp(1.9rem, 8.2vw, 3.1rem);
  font-style: italic;
}

.fp-picks__lead {
  margin-top: 16px !important;
  font-family: var(--pk-mincho);
  font-size: .98rem;
  letter-spacing: .06em;
}
.fp-picks__sub {
  margin-top: 9px !important;
  color: var(--pk-ink-soft);
  font-size: .76rem;
  line-height: 1.9;
}
.fp-picks__count {
  margin-top: 16px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pk-line);
  color: var(--pk-brass);
  font-family: var(--pk-serif);
  font-size: .68rem;
  letter-spacing: .3em;
}


/* ==========================================================================
   4. TODAY'S PICK
   --------------------------------------------------------------------------
   色の面は、文字ブロック自身の背景です。
   負のマージンで写真の裏まで引き上げ、同じ分だけ余白で押し戻しています。
   こうすると、商品名が2行になっても面の位置がずれません。
   ========================================================================== */
.fp-picks__pick {
  position: relative;
  display: block;
}

.fp-picks__visual {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--pk-photo-w);
  margin-left: var(--pk-photo-x);
  background: var(--pk-photo-bg);
  aspect-ratio: 1 / 1;
}
.fp-picks__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fp-picks__visual-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pk-photo-bg);
}

.fp-picks__body {
  position: relative;
  z-index: 0;
  display: block;
  width: var(--pk-plate-w);
  margin-top: calc((var(--pk-photo-w) - var(--pk-plate-in)) * -1);
  padding-top: calc(var(--pk-photo-w) - var(--pk-plate-in) + 22px);
  padding-right: 16px;
  padding-bottom: 22px;
  background: var(--pk-plate);
}
.fp-picks__label {
  display: block;
  color: var(--pk-brass);
  font-family: var(--pk-serif);
  font-size: .66rem;
  letter-spacing: .3em;
}
.fp-picks__brand {
  display: block;
  margin-top: 15px;
  color: var(--pk-ink-soft);
  font-family: var(--pk-serif);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.fp-picks__name {
  display: block;
  margin-top: 8px;
  font-family: var(--pk-mincho);
  font-size: .95rem;
  line-height: 1.6;
}
.fp-picks__cat {
  display: block;
  margin-top: 8px;
  color: var(--pk-brass);
  font-size: .64rem;
  letter-spacing: .22em;
}


/* ==========================================================================
   5. 推し度とタグ（面の外）
   ========================================================================== */
.fp-picks__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
}
.fp-picks__oshi {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--pk-accent);
  line-height: 1;
}
.fp-picks__num {
  font-family: var(--pk-serif);
  font-size: 2.1rem;
  line-height: 1;
}
.fp-picks__unit { font-size: .74rem; }
.fp-picks__oshi-label {
  color: var(--pk-ink-soft);
  font-size: .54rem;
  letter-spacing: .22em;
}

/* タグは、塗らずに細い線の四角だけ。色はセクションの色に合わせます */
.fp-picks__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fp-picks__tag {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border: 1px solid var(--pk-accent);
  border-radius: 0;
  background: transparent;
  color: var(--pk-accent);
  font-size: .66rem;
  letter-spacing: .1em;
  white-space: nowrap;
}


/* ==========================================================================
   6. おみそ語録
   --------------------------------------------------------------------------
   トップでは全幅の帯を使いません。色の面が続けて2つ出ると重くなるためです。
   帯は、推しコス／ヘアケアそれぞれの単独ページに残してあります。
   ========================================================================== */
.fp-picks__quote {
  display: block;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--pk-line);
  color: var(--pk-ink-soft);
  font-family: var(--pk-mincho);
  font-size: .82rem;
  line-height: 2;
}
.fp-picks__quote-mark {
  margin-right: 4px;
  color: var(--pk-accent);
  font-family: var(--pk-serif);
  font-style: italic;
}


/* ==========================================================================
   7. ALSO PICKED
   ========================================================================== */
.fp-picks__rest { margin-top: 30px; }
.fp-picks__rest-label {
  margin-bottom: 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pk-line);
  color: var(--pk-ink-soft);
  font-family: var(--pk-serif);
  font-size: .58rem;
  letter-spacing: .26em;
}
.fp-picks__rest-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.fp-picks__rest-list::-webkit-scrollbar { display: none; }
.fp-picks__rest-item {
  flex: none;
  width: 104px;
  scroll-snap-align: start;
}
.fp-picks__rest-visual {
  display: block;
  background: var(--pk-photo-bg);
  aspect-ratio: 1 / 1;
}
.fp-picks__rest-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fp-picks__rest-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 7px;
  font-family: var(--pk-mincho);
  font-size: .68rem;
  line-height: 1.6;
}
.fp-picks__rest-oshi {
  display: block;
  margin-top: 4px;
  color: var(--pk-accent);
  font-family: var(--pk-serif);
  font-size: .86rem;
  line-height: 1;
}
.fp-picks__rest-oshi span { font-size: .58rem; }


/* ==========================================================================
   8. もっと見る
   --------------------------------------------------------------------------
   下線1本だけ。塗りのボタンにすると、この落ち着いた紙面から浮きます。
   ========================================================================== */
.fp-picks__more { margin-top: 26px !important; }
.fp-picks__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--pk-accent);
  color: var(--pk-accent);
  font-size: .8rem;
  letter-spacing: .08em;
  transition: gap .2s ease;
}
.fp-picks__more a:hover { gap: 14px; }
.fp-picks__more-arw { font-size: .86rem; }


/* ==========================================================================
   9. タブレット・PC
   --------------------------------------------------------------------------
   横並びになるので、面の引き上げはやめて普通の背景に戻します。
   ========================================================================== */
@media (min-width: 768px) {
  .fp-picks { padding: 68px 0; }
  .fp-picks__head { margin-bottom: 38px; }

  .fp-picks__pick {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 46px;
  }
  .fp-picks__visual {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    width: 100%;
    margin-left: 0;
    align-self: center;
  }
  .fp-picks__body {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 100%;
    margin-top: 0;
    padding: 26px 28px 28px;
  }
  .fp-picks__meta  { grid-column: 2 / 3; grid-row: 2 / 3; }
  .fp-picks__quote { grid-column: 2 / 3; grid-row: 3 / 4; }

  .fp-picks__name { font-size: 1.16rem; }
  .fp-picks__num  { font-size: 2.6rem; }

  .fp-picks__rest-list { overflow: visible; }
  .fp-picks__rest-item { flex: 1 1 0; width: auto; }
}


@media (prefers-reduced-motion: reduce) {
  .fp-picks *,
  .fp-picks *::before,
  .fp-picks *::after {
    transition: none !important;
    animation: none !important;
  }
}