@charset "UTF-8";
/* 記述内容：変数、リセット、ページ内の共通設定、ヘッダーとフッターの設定 */

/* ==========================================================================
    変数
   ========================================================================== */
:root {
    /* --- フォント --- */
    --font-en: "EB Garamond", serif;
    --font-ja: "Zen Old Mincho", sans-serif;

    /* セクションの間の余白 */
    --section-space: 32px;

    /* コンセプト内テーマごとの余白 */
    --concept-space: 24px;

    /* --- カラー：ブランド --- */
    --color-brand-main: #142C56;

    /* --- カラー：背景 --- */
    --color-bg-base: #F9F7F2;
    --color-bg-secondary: #F3EFE9;
    --color-bg-scrollbar: #f8f8f8;

    /* --- カラー：テキスト --- */
    --color-text-main: #4a4a4a;
    --color-text-white: #ffffff;
    --color-text-muted: #666666;
    --color-text-sub: #555555;
    --color-text-hover: #0d1e3d;

    /* アクセントカラー(商品詳細ボタン) */
    --color-accent-link: #5D6659;

    /* コンセプトエリアの枠線 */
    --color-concept-border: #B1A08A;

    /* --- カラー：NEWラベル --- */
    --color-new-label: #c0392b;

    /* --- カラー：ボーダー・シャドウ --- */
    --border-light: rgba(255, 255, 255, 0.3);
    --color-border-card: #eeeeee;
    --shadow-light: rgba(0, 0, 0, 0.05);

    /* --- スライダー --- */
    --slick-dot-color: #B1A08A;
    --slick-dot-size: 10px;
    --slick-dot-spacing: 6px;

    /* 角丸 */
    --border-radius-common: 20px;
    --border-radius-btn: 5px;
}

/* ==========================================================================
    基本
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

/* 確認用 */
/* * {
  outline: 1px solid red;
} */

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

body {
    background-color: var(--color-bg-base);
    color: var(--color-text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px;
}

main {
    flex: 1;
}

.container {
    width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
    共通
   ========================================================================== */
.main-icon, .icon-placeholder, .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 40px;
    height: 40px;
}

.main-icon img, .icon-placeholder img, .nav-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.section-unit {
    margin-top: 90px;
    scroll-margin-top: 50px;
}

/* font awesome スクリーンリーダー読み上げ用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
/* コンセプト文章のインデント */
.indent {
  text-indent: 1rem;
  margin-bottom: 0.7rem;
  text-align: justify;
}


/* ==========================================
    HEADER mobile
  ========================================== */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: #142C56;
  z-index: 100;
  width: 100vw;
}

/* ヘッダー内 */
.site-header__inner {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.site-header::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #B1A08A;
}

/* スコーンアイコンと店名 */
.site-header__logo-link {
  display: flex;
  align-items: center;
  color: var(--color-text-white);
}
.site-header__logo {
  width: 40px;
  height: 40px;
}

.site-header__shop-name {
  margin-left: 4px;
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* 右側エリア */
.site-header__right {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

/* ONLINE SHOP ボタン */
.site-header__shop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 10px;
  color: var(--color-text-white);
  text-decoration: none;
}
.site-header__shop-text {
  display: inline-block;
  padding: 4px 7px;
  border: 1px solid #ffffff;
  font-family: var(--font-en);
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--border-radius-btn);
}

/* ===================
    ハンバーガーメニュー
  ==================== */

/* アイコン */
.site-header__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: none;
  color: var(--color-text-white);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-en);
  white-space: nowrap;
  font-size: 2.2rem;
}

.site-drawer {
  position: fixed;
  inset: 0;                     /* top/right/bottom/left をまとめて指定 */
  width: 100%;
  height: 100vh;
  background: var(--color-brand-main);
  overflow-y: scroll;                 /* メニュー内スクロール */
  /* 初期状態では非表示 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 少し上から入る動き */
  transform: translateY(-12px);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
  z-index: 9999;
}

/* JSで is-open が付いたら表示 */
.site-drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* メニュー内 */
.site-drawer__inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 80px 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* CLOSEボタン */
.site-drawer__close {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 14px;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  font-family: var(--font-en);
  font-size: 0.9rem;
  line-height: 1;
  border-radius: var(--border-radius-btn);
}

/* MENUとSNS間の余白 */
.site-drawer__section + .site-drawer__section {
  margin-top: 24px;
}

/* 見出し モバイルでは中央寄せ + 下線あり */
.site-drawer__title {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--color-text-white);
  text-align: center;
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
}

.site-drawer__list {
  padding: 0 40px;
  letter-spacing: 0.2em;
}

/* li同士の余白 */
.site-drawer__list li + li {
  margin-top: 16px;
}

.site-drawer__list li{
  width: min(100%, 280px);
  margin: 0 auto;
}

/* メニューリンク モバイルでは中央寄せ + 下線あり */
.site-drawer__list a {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  color: var(--color-text-white);
  text-decoration: none;
  font-family: var(--font-en);
  font-size: 1.3rem;
  line-height: 1.4;
  text-align: left;
}

.site-drawer__list a i {
  font-size: 0.72rem;
  line-height: 1;
  flex-shrink: 0;
}


.site-drawer__list a span{
  margin-left: 4px;
}
/* ホバー時 */
.site-header__shop:hover,
.site-header__menu-btn:hover,
.site-drawer__list a:hover,
.site-drawer__close:hover {
  opacity: 0.8;
}
/* メニュー内 ロゴ */
.site-drawer__logo {
  margin: 0 auto;
  padding-top: clamp(1.5rem, -12.3795rem + 28.9157vw, 7.5rem);
  text-align: center;
}
.site-drawer__logo img {
    border-radius: 50%;
    width: 100px;
}

/* ============
    HEADER PC
   ============= */
@media (min-width:821px) {
  .site-header__inner {
    min-height: 72px;
    padding: 0 56px;
  }

  .site-header__shop-name {
    font-size: 2.2rem;
  }

  .site-header__shop {
    min-height: 72px;
    padding: 0 22px;
  }

  .site-header__shop-text {
    padding: 6px 12px;
    font-size: 1.2rem;
  }

  .site-header__menu-btn {
    min-height: 72px;
    padding: 0 22px;
    margin-left: 16px;
    gap: 6px;
  }

  .site-header__menu-icon,
  .site-header__menu-text {
    font-size: 1.2rem;
  }

  /* PCでは右半分だけメニュー表示 */
  .site-drawer {
    left: auto;
    right: 0;
    width: 50%;
    transform: translateX(24px);
  }

  .site-drawer.is-open {
    transform: translateX(0);
  }

  .site-drawer__inner {
    padding: 110px 56px 56px;
  }

  .site-drawer__close {
    top: 28px;
    right: 34px;
    padding: 10px 18px;
    font-size: 1rem;
  }

  /* PCでは左寄せ */
  .site-drawer__title {
    text-align: left;
    font-size: 2rem;
  }

  .site-drawer__list a {
    width: 100%;
    max-width: 420px;
    margin: 0;
    text-align: left;
    font-size: 1.45rem;
  }
}

/* ==========================================
    HOVER / OPEN ANIMATION
========================================== */

/* ------------------------------------------
    ヘッダー右側ボタン
    ONLINE SHOP / MENU にホバー効果
------------------------------------------ */
.site-header__shop,
.site-header__menu-btn {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* マウスを乗せた時 */
.site-header__shop:hover,
.site-header__menu-btn:hover {
  opacity: 0.75;              /* 少し薄くする */
  transform: translateY(-1px); /* 少し浮かせる */
}


/* ------------------------------------------
    メニュー全体の開閉アニメーション
------------------------------------------ */
.site-drawer {
  /* 開く前は少し右にずらしておく */
  transform: translateX(24px);

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.4s ease;
}

/* 開いた時 */
.site-drawer.is-open {
  transform: translateX(0);
}


/* ------------------------------------------
    メニューリンク item / concept / information / instagram
------------------------------------------ */
.site-drawer__list a {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    letter-spacing 0.3s ease;
}

/* マウスを乗せた時 */
.site-drawer__list a:hover {
  opacity: 0.75;               /* 少し薄く */
  transform: translateX(8px);  /* 右へスッと移動 */
  letter-spacing: 0.03em;      /* 少し文字間広げる */
}


/* ------------------------------------------
    CLOSEボタン
------------------------------------------ */
.site-drawer__close {
  transition:
    background 0.3s ease,
    color 0.3s ease,
    opacity 0.3s ease;
}

/* マウスを乗せた時 */
.site-drawer__close:hover {
  background: #ffffff; /* 白背景 */
  color: #0d2c63;     /* 文字ネイビー */
  opacity: 1;
}


/* ------------------------------------------
    PC時だけ hover 強め
------------------------------------------ */
@media (min-width: 821px) {
  .site-drawer__list a:hover {
    transform: translateX(12px);
  }
}


/* ==========================================================================
    フッター
   ========================================================================== */
.site-footer {
    background-color: var(--color-brand-main);
    padding: 24px 0;
    color: var(--color-text-white);
    font-family: var(--font-en);
}

.footer-top {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 200px 200px 1fr 1fr;
    justify-items:center;
}

.footer-left {
    grid-column: 1 / 3;
    margin: auto;
}
.footer-menu {
    grid-column: 3 / 4;
}

.footer-top ul li a {
    font-size: 24px;
    letter-spacing: 0.2em;
    padding-left: 15px;
}
.brand-icon img {
    display: block;
    width: 100px;
    height: auto;
    /*以下はロゴができ次第変更します。*/
    object-fit: cover;
    border-radius: 50%;
}
.footer-bottom {
    text-align: center;
}

.footer-bottom p {
    font-family: var(--font-en);
    font-size: clamp(10px, 2vw, 13px);
    letter-spacing: 0.1em;
    opacity: 0.8;
}
.footer-top h3::after {
    display: block;
    content: "";
    width: 220px;
    height: 0px;
    border-top: solid 1px var(--border-light);
}

.footer-top li i {
    padding-left: 8px;
}

/* ==========
    FOOTER mobile
    ========== */
@media (max-width: 821px) {
  .footer-top {
    padding-bottom: 16px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 20px 0;
    }
  .footer-left {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  .footer-menu {
    grid-column: 1 / 2;
  }
  .footer-menu, .footer-sns {
    width: 200px;
  }
  .footer-top h3::after {
    width: 140px;
  }
  .footer-top li a::before {
    font-size: 8px;
  }
  .footer-top h3 {
    letter-spacing: 0.2em;
  }
  .footer-top ul li a {
    font-size: 20px;
  }
}


/* ==========================================================================
    PC用レイアウト
   ========================================================================== */
@media (min-width: 1440px) {
    .container {
        padding: 0 64px;
        max-width: 1280px;
    }
    .section-unit {
      scroll-margin-top: 72px;
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .openbtn {
        display: none;
    }

    .nav-menu {
        position: static;
        width: auto;
        height: auto;
        background: none;
        display: flex;
        align-items: center;
    }

    .nav-menu ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 48px;
    }

    .nav-menu ul li {
        position: relative;
        display: flex;
        align-items: center;
    }

    .nav-menu ul li + li::before {
        content: "";
        position: absolute;
        left: -24px;
        width: 1px;
        height: 14px;
        background-color: var(--color-text-white);
        opacity: 0.3;
    }

    .nav-menu ul li a {
        font-size: 16px;
        letter-spacing: 0.2em;
        font-weight: 500;
        position: relative;
        padding-bottom: 8px;
        display: inline-block;
        transform: translateY(4px);
    }

    .nav-menu ul li a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--color-text-white);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
    }

    .nav-menu ul li a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }


}