@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - commitment.css
   こだわりページ

   【方針】
   看板メニュー（recommend.phpの.pick-item）との差別化を図るため、写真を完全な円形（.pick-itemは角丸）にし、
   番号バッジはバースト装飾を付けずシンプルな輪郭のみ（.pick-itemはバーストあり）にしている。
   背景のハローはピンク（--color-accent）をボケさせて円形写真全体に重ねている。犬の肉球アイコンは使わない。
======================================== */

/* ページ全体の背景。白い紙目テクスチャ（white-bg.webp）を敷く（menu.phpのbody.page-menuと同じ作り）。 */
body.page-commitment {
    background-color: var(--color-bg);
    background-image: url('../images/white-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
}

/* page-heroのリード文の折り返し用<br>。475以上は1行にしたいので非表示、
   475未満（小型スマホ）のときだけ「長野県内で当店だけの」で改行させる。 */
.page-commitment .page-hero__lead-br {
    display: none;
}

@media (max-width: 474.98px) {
    .page-commitment .page-hero__lead-br {
        display: inline;
    }
}

/* セクション構造を他ページ（shop.php・recruit.phpなど）と揃え、外側（.section--pad）=パディング、
   内側（.inner）=max-width・中央寄せの役割分担にしている（common.cssの.section--pad参照）。
   ※ 以前は修飾クラスなし（.innerの既定）1024px以上1440pxだったが、shop.php・recruit.phpと揃えて1200px上限に変更。 */
@media (min-width: 1024px) {
    .page-commitment .section--pad > .inner {
        max-width: 1200px;
    }
}

/* ========================================
   セクション見出し（「こだわり」ラベル + 「愛される3つの理由」）
======================================== */
.com-head {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
}

/* 小見出しラベル。左右に細い線を添えて「─── こだわり ───」の形にする。 */
.com-head__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--color-gold);
}

.com-head__label-line {
    width: 2rem;
    height: 1px;
    background-color: var(--color-gold);
    opacity: 0.6;
}

/* 大見出し。「3」だけ別桁で大きく・ゴールドにしてアクセントにする（参考画像と同じ构成）。 */
.com-head__title {
    margin-top: 0.75rem;
    font-family: 'Hina Mincho', var(--font-heading);
    font-size: 1.625rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--color-title);
}

.com-head__title-num {
    display: inline-block;
    margin-inline: 0.125em;
    font-family: var(--font-en);
    font-size: 1.5em;
    font-style: italic;
    color: var(--color-gold);
    vertical-align: -0.05em;
}

.com-head__lead {
    max-width: var(--section-width-narrow);
    margin: var(--spacing-md) auto 0;
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

@media (min-width: 768px) {
    .com-head__label {
        font-size: 0.875rem;
    }
    .com-head__label-line {
        width: 2.75rem;
    }
    .com-head__title {
        font-size: 2.25rem;
    }
    .com-head__lead {
        font-size: 0.9375rem;
    }
}

@media (min-width: 1024px) {
    .com-head__title {
        font-size: 2.5rem;
    }
}

/* ========================================
   番号付きブロック（01／02／03）
======================================== */
.com-detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxl);
}

.com-block {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* 写真。参考画像のような有機的（非対称）な丸みをもたせる。
   ※ .pick-showcase__imgと同じ考え方で、1角だけ強く丸め、他は控えめにする。
     偷数番目（01・03）と偶数番目（02）で丸める角を左右入れ替え、交互に並んだときに対称に見えるようにする。 */
.com-block__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    width: 100%;
    margin-inline: auto;
    background-color: var(--color-bg-light);
    box-shadow: var(--shadow-md);
    /* iOS Safari 対策。
       overflow: hidden ＋ border-radius だけだと、中に position と z-index を持つ子要素
       （ここでは img と .com-block__blob）があると、iPhone で楼円に切り抜かれず
       長方形のまま表示されることがある（実際に発生）。
       不透明な webkit の mask を重ねると合成のしかたが変わり、確実にクリップされる。
       ※ white も black も不透明なので、見た目には何の影響もない。 */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    /* 横長（16:11）の写真に border-radius: 50% をかけて、縦横比に沿ったきれいな楾円にする。 */
    border-radius: 50%;
}

.com-block__img img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 02（ディッピンドッツアイス／commitment02.webp）のフォーカス位置。
   楼円に切り抜かれて左右が大きく欠けるので、中心よりやや右（70%）を見せる。 */
.com-block:nth-child(2) .com-block__img img {
    object-position: 70% center;
}

/* 円形写真の背後に完全に重なるやわらかなハロー。看板メニューの小さなコーナー装飾（.pick-item__blob）とは
   違い、写真よりひと回り大きくして周囲にはみ出させ、ボケさせて柔らかさを出す。 */
.com-block__blob {
    position: absolute;
    z-index: 0;
    inset: -12%;
    border-radius: 50%;
    background-color: var(--color-accent);
    filter: blur(4px);
    pointer-events: none;
}

.com-block__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 番号バッジ。円の内側に番号、外側に短い線が放射状に並ぶバースト装飾を付ける（参考画像の
   丸い番号バッジ上の方射線と同じ考え方）。バーストはrepeating-conic-gradientをリング状に
   maskで切り抜く手法で、新しい画像素材を追加せずにCSSだけで作っている。 */
.com-block__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    /* 親（.com-block__body）はflex-direction: column; align-items: flex-start;なので、
       子要素の既定の幅は自身のコンテンツ幅（shrink-to-fit）になる。
       align-self: stretchで親の幅いっぱいに広げないと、中の.com-block__title-wrapの
       flex: 1（残り幅を埋める指定）が伸びる先（余剰スペース）を失い、
       オーナメントがタイトル文字幅のままになってしまう。 */
    align-self: stretch;
}

.com-block__badge {
    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;
    color: var(--color-gold);
    background-color: var(--color-bg);
}

.com-block__title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: var(--color-title);
}

/* 576未満（小型スマホ）はタイトルを少し小さくして折り返しを抑える。 */
@media (max-width: 575.98px) {
    .com-block__title {
        font-size: 1.75rem;
    }
}

/* 見出し直下の飾り線。他セクション（.section-title-wrap + .section-ornament-frame、
common.css参照）と同じornament.svgのパターンをそのまま使う。
幅はタイトル文字幅ではなく、.com-block__bodyの幅いっぱいに伸ばす。
※ .com-block__title-wrapは.com-block__head（display: flex）のフレックスアイテムなので、
  widthプロパティだけでは中身（見出しテキスト）の幅までしか伸びない。
  flex: 1 で残りの横幅いっぱいに広げ、min-width: 0 で長い見出しでも
  はみ出さないようにしている。 */
.com-block__title-wrap {
    flex: 1;
    min-width: 0;
}

.com-block__title-wrap .section-ornament-frame {
    margin-top: 0.625rem;
}

.com-block__text {
    margin-top: var(--spacing-sm);
    font-size: 0.9375rem;
    line-height: 1.9;
}

@media (min-width: 768px) {
    .com-block {
        flex-direction: row;
        align-items: center;
    }
    .com-block__img {
        flex: 1 1 52%;
        max-width: 30rem;
    }
    .com-block__body {
        flex: 1 1 48%;
    }
    .com-block:nth-child(even) {
        flex-direction: row-reverse;
    }
    .com-block__badge {
        width: 3.75rem;
        height: 3.75rem;
        font-size: 1.25rem;
    }
    .com-block__text {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .com-block {
        gap: var(--spacing-xl);
    }
    .com-block__badge {
        width: 4.75rem;
        height: 4.75rem;
        font-size: 1.625rem;
    }
    .com-block__title {
        font-size: 2.5rem;
    }
}

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

.page-commitment .btn-line:hover {
    background-color: var(--color-title-brown);
    border-color: var(--color-title-brown);
    color: var(--color-text-white);
}