@charset "utf-8";

/* ==================================================
   全ページ共通の底上げ (common.css)

   既存のCSSは変更せず、最後に読み込んで上書きする。
   戻したい場合は各HTMLの読み込み1行を外せばよい。

   読み込み順： reset → 各ページ既存CSS → common.css → top.css
   ================================================== */

:root {
    --c-ink: #4a3a55;
    --c-ink-soft: #7b6a86;
    --c-pink: #ff5288;
    --c-pink-soft: #ffb3d6;
    --c-line: #f2e6f0;
    --c-radius: 18px;
    --c-shadow: 0 10px 30px rgba(120, 70, 140, .10);
    --c-shadow-hover: 0 18px 42px rgba(120, 70, 140, .18);
    --c-ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------
   文字組み
   -------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.9;
    letter-spacing: .02em;
}

p {
    line-height: 1.9;
}

/* ヘッダーメニューは項目幅が固定されているため、
   字間を広げると「問い合わせ」が折り返してしまう。除外する。 */
#sp_menu,
#sp_menu a,
#sp_menu .sp_menu_under,
header nav,
.page_link a {
    letter-spacing: normal;
    white-space: nowrap;
}

/* 日本語の行末が不自然に切れないようにする */
h1, h2, h3, h4,
.card .name,
.news_title {
    line-break: strict;
    overflow-wrap: anywhere;
}

::selection {
    background: rgba(255, 82, 136, .22);
}

html {
    scroll-behavior: smooth;
}

/* 固定ヘッダーに隠れないようアンカー位置を調整 */
[id] {
    scroll-margin-top: 92px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------
   キーボード操作時のフォーカス表示
   （マウス操作時には出さない）
   -------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(255, 82, 136, .55);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --------------------------------------------------
   商品情報ページ（gallery.html）
   -------------------------------------------------- */
.main_gallery h2 {
    position: relative;
    border-bottom: none !important;
    padding-bottom: 18px !important;
    letter-spacing: .1em;
    font-weight: 700;
}

.main_gallery h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 54px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-pink), var(--c-pink-soft));
}

.card {
    border-radius: var(--c-radius) !important;
    box-shadow: var(--c-shadow) !important;
    transition: transform .3s var(--c-ease), box-shadow .3s var(--c-ease) !important;
}

.card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--c-shadow-hover) !important;
}

.card img {
    border-radius: 12px;
}

.card .price {
    color: var(--c-pink);
    font-weight: 700;
    letter-spacing: .02em;
}

.card .agency {
    color: var(--c-ink-soft);
    font-size: 12.5px;
    line-height: 1.75;
}

/* 購入ボタン */
.card .purchase a {
    padding: 10px 20px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    background: linear-gradient(135deg, #ff6aa5, #ff4f87) !important;
    box-shadow: 0 6px 16px rgba(255, 82, 136, .26) !important;
    transition: transform .2s var(--c-ease), box-shadow .2s var(--c-ease), opacity .2s !important;
}

.card .purchase a:hover {
    opacity: 1 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 82, 136, .34) !important;
}

/* 特設サイトへのリンクは主張を抑えた副ボタンにする */
.card .purchase a[href$=".html"] {
    background: #fff !important;
    color: var(--c-pink) !important;
    border: 1.5px solid var(--c-pink-soft);
    box-shadow: none !important;
}

.card .purchase a[href$=".html"]:hover {
    background: #fff4fa !important;
    border-color: var(--c-pink);
    box-shadow: 0 6px 16px rgba(255, 82, 136, .16) !important;
}

/* --------------------------------------------------
   共通のカードっぽい塊
   -------------------------------------------------- */
.glass-card {
    border-radius: var(--c-radius) !important;
    transition: transform .3s var(--c-ease), box-shadow .3s var(--c-ease) !important;
}

/* --------------------------------------------------
   ヘッダー

   注意：header に backdrop-filter / filter / transform を付けてはいけない。
   これらは子孫の position:fixed の基準をヘッダー内に閉じ込めるため、
   ハンバーガーメニュー（#nav_content / #nav_close は position:fixed で
   全画面に広がる設計）が画面を覆えなくなり、背景が透けてしまう。
   -------------------------------------------------- */
header {
    transition: box-shadow .3s ease, background-color .3s ease;
}

/* --------------------------------------------------
   ページトップボタン
   -------------------------------------------------- */
.page-top {
    transition: transform .25s var(--c-ease), opacity .25s ease;
}

.page-top:hover {
    transform: translateY(-4px);
}

/* --------------------------------------------------
   画像の共通処理
   読み込み前のレイアウト崩れを防ぐ
   -------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------
   フッター
   -------------------------------------------------- */
footer .copyright,
footer small {
    letter-spacing: .12em;
    font-size: 12px;
    color: var(--c-ink-soft);
}

/* --------------------------------------------------
   スマホ
   -------------------------------------------------- */
@media screen and (max-width: 768px) {
    body {
        line-height: 1.85;
    }

    [id] {
        scroll-margin-top: 72px;
    }

    .card .purchase a {
        padding: 11px 18px !important;
        font-size: 14px !important;
    }
}