@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - recommend.css
   イチオシ商品ページ
======================================== */

/* ページ背景。index.phpの看板メニューセクション（.sec-pick--editorial）と同じピンクの紙目テクスチャ（pink-bg.webp）を敷く。
   ※ 他ページのbody背景（common.cssの7ページグループ・menu.css）と同じように、
     斜めストライプのプレースホルダーレイヤー（var(--img-placeholder)）は付けず、
     600px幅のタイル1枚だけのシンプルな指定にしている。 */
body.page-recommend {
    background-color: var(--color-bg-pink);
    background-image: url('../images/pink-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
}

/* page-heroの谷型クリップ（.page-hero--valley、recommend.phpは$hero_arc='valley'）で欠けた部分も、
   bodyの背景（上のpink-bg.webp）がそのまま透けて見えるように、ラッパー（.page-hero-wrap）を透明にする
   （shop/company/news/faq/recruit/contactの7ページグループと同じ手法、common.css参照）。 */
.page-recommend .page-hero-wrap {
    background-color: transparent;
}

/* セクション構造を他ページと同じ「外側（.section--pad）=パディング、内側（.inner）=max-width・中央寄せ」の役割分担にしている（common.cssの.section--pad参照）。
   .section--pad > .innerの既定はbase 576px→768px以上720px→1024px以上1440pxだが、
   このページだけは576〜1200pxの幅にしたいので、1024px以上の値だけsec-faq.section--padと同じ手法で1200pxに上書きする（index.css参照）。 */
@media (min-width: 1024px) {
    .pick-section.section--pad > .inner {
        max-width: 1200px;
    }
}

.pick-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxl);
}

.pick-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    /* 固定ヘッダーに隠れないように、アンカーリンクでジャンプしたときにヘッダー高さ分だけ上に余白を持たせる（menu.phpの.menu-blockと同じ作り）。 */
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.pick-item__img {
    position: relative;
    z-index: 1;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    /* こだわりページ（.com-block__img）と同じ有機的な丸み（左上だけ大きく丸める）に揃えている。 */
    border-radius: 55% var(--radius-lg) var(--radius-lg) var(--radius-lg);
    /* 落ち影は付けない方針。立体感は有機的な角丸と背後の円（.pick-item__blob）で出す。 */
}

/* 写真の背後に少しはみ出す円のワンポイント装飾。看板メニュー（.pick-showcase__blob）と同じ色・考え方。
   ※ .pick-item__img自体はoverflow: hiddenなので、ブロブは別の外側ラッパー（.pick-item__media、overflow指定なし）に置く。 */
.pick-item__media {
    position: relative;
}

.pick-item__blob {
    position: absolute;
    z-index: 0;
    left: -9%;
    bottom: -10%;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-accent);
    pointer-events: none;
}

/* 偶数番目は、奇数番目（--color-accent、#E2C9C2）よりも薄いピンクにする。 */
.pick-item:nth-child(even) .pick-item__blob {
    background-color: #EFDDD8;
}

.pick-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No.01（ディッピンドッツアイス／dippin-dots.webp）のフォーカス位置。
   正方形の写真を 4:3 の枠に入れているので上下が切れる。左端寄り（10%）を見せる。
   ※ object-position は <position> なので 3値記法（left 10% center）は無効。
     2値の「10% center」が同じ意味になる。 */
#dippin-dots .pick-item__img img {
    object-position: 10% center;
}

.pick-item__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.3125rem 1rem;
    border-radius: var(--radius-full);
    background-color: var(--color-gold);
    color: var(--color-text-white);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.pick-item__body {
    position: relative;
}

.pick-item__head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* こだわりページ（.com-block__badge）と同じ、ゴールドの縁取り＋放射状のバースト装飾付きの丸バッジに揃えている。 */
.pick-item__num {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-full);
    font-family: var(--font-en);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1;
    color: var(--color-gold);
    background-color: var(--color-white);
}

.pick-item__num::before {
    content: '';
    position: absolute;
    inset: -0.8125rem;
    border-radius: var(--radius-full);
    background-image: repeating-conic-gradient(var(--color-gold) 0deg 3deg, transparent 3deg 24deg);
    -webkit-mask-image: radial-gradient(circle, transparent 63%, black 65%, black 82%, transparent 84%);
    mask-image: radial-gradient(circle, transparent 63%, black 65%, black 82%, transparent 84%);
    opacity: 0.7;
}

.pick-item__name {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-title);
}

.pick-item__price {
    margin-top: 0.375rem;
    /* 価格は視認性重視でゴシック体に揃える */
    font-family: var(--font-family);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-primary-dark);
}

.pick-item__tax {
    margin-left: 0.375rem;
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.pick-item__text {
    margin-top: var(--spacing-xs);
    font-size: 0.95rem;
}

/* 季節限定クレープの本文中にInstagram誘導リンクを埋め込む（別要素にせず文中に入れる）。 */
.pick-item__insta-link {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;
    transition: color var(--transition);
}

.pick-item__insta-link:hover {
    color: var(--color-gold);
}

@media (min-width: 768px) {
    .pick-item {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-xl);
    }
    .pick-item__media {
        flex: 1 1 55%;
    }
    .pick-item__body {
        flex: 1 1 45%;
    }
    /* 偶数番目は左右反転 */
    .pick-item:nth-child(even) {
        flex-direction: row-reverse;
    }
    .pick-item__num {
        width: 3.75rem;
        height: 3.75rem;
        font-size: 1.25rem;
    }
    .pick-item__name {
        font-size: 1.625rem;
    }
    .pick-item__price {
        font-size: 1.625rem;
    }
    .pick-item__text {
        font-size: 1rem;
    }
}

/* 768〜1023px：写真の高さを隣のテキストボックスに合わせる。
   ※ .pick-item を align-items: stretch にして左右の列を同じ高さにし、
     写真（.pick-item__img）は position: absolute で列いっぱいに広げる。
     absolute にすると写真自身の高さ（aspect-ratio 4/3）が行の高さに影響しなくなるので、
     行の高さ＝テキスト側の高さになる（stretch だけだと、背の高い方＝写真に行が合わされてしまう）。
   ※ .pick-item__media はもともと position: relative なので、円の装飾（.pick-item__blob）の
     位置基準はこれまでどおり。
   ※ 1024px 以上は従来どおり 4:3 の比率で見せたいので、ここだけ幅を区切っている。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .pick-item {
        align-items: stretch;
    }
    .pick-item__img {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }
}

/* 1024px以上：幅に余裕が出るので本文をわずかに大きくする。 */
@media (min-width: 1024px) {
    .pick-item__text {
        font-size: 1.05rem;
    }
}

/* 1200px以上：さらに一段階大きくする。 */
@media (min-width: 1200px) {
    .pick-item__text {
        font-size: 1.1rem;
    }
}

/* 「メニューを見る」ボタン（.btn--outline）を、お知らせのページャー（.news-pager__num）と
   同じ配色（--color-title-brown 基調）に揃える。.btn--outline は他ページでも使う共通クラスなので
   このページ内（.page-recommend）にだけスコープする（news-detailの一覧に戻るボタンと同じ手法）。 */
.page-recommend .sec-foot .btn--outline {
    color: var(--color-title-brown);
    border-color: var(--color-title-brown);
}

.page-recommend .sec-foot .btn--outline:hover {
    background-color: var(--color-title-brown);
    border-color: var(--color-title-brown);
    color: var(--color-text-white);
}