@charset "utf-8";
/* =========================================================
   William Morris At Home
   TOP PAGE
   PC width: 1200px
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --page-width: 1200px;
  --inner-width: 1040px;
  --text-width: 980px;

  --color-bg: #f1eae5;      /* コンテンツ背景（ペールピンク） */
  --color-text: #54585A;    /* 基本テキスト */
  --color-heading: #54585A; /* 見出し（基本テキストと同色に統一） */
  --color-footer: #54585A;  /* フッター背景（テキストと同値のグレー） */
  --color-line: #ffffff;    /* 罫線 */
  --color-white: #ffffff;

  --font-en: "Noto Sans JP", sans-serif;
  --font-ja: "Noto Sans JP", sans-serif;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;

  /* footerの100vwフルブリードによる横スクロール防止 */
  overflow-x: hidden;
}

body,
h1,
h2,
h3,
p,
dl,
dt,
dd,
ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   BASE
========================================================= */

body {
  color: var(--color-text);

  /* 左右に見えるフローラルパターン。シームレス素材(690x668)を等倍リピート。
     元の濃い色味に合わせて彩度・明度を補正済み（全画素均一補正なので継ぎ目は不変）。 */
  background-image: url("../../../img/usr/morris/common/pattern.jpg");
  background-repeat: repeat;
  /* ヘッダー左右の帯に花のモチーフが上下中央にくるよう、開始位置を上へ調整。
     縦方向にリピートするため、この offset を変えても継ぎ目は生じない。 */
  background-position: center -70px;

  font-family: var(--font-ja);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.9;

  -webkit-font-smoothing: antialiased;
}


/* =========================================================
   WRAPPER（中央のコンテンツカラム）
========================================================= */
body div.wrapper_ {
  width: min(100%, var(--page-width));
  margin-inline: auto;
  background: var(--color-bg);
}


/* =========================================================
   INNER
========================================================= */

.inner {
  width: min(calc(100% - 100px), var(--inner-width));
  margin-inline: auto;
}

.inner--text {
  width: min(calc(100% - 100px), var(--text-width));
}


/* =========================================================
   HEADER
========================================================= */

.header {
  /* 初期から表示し、スクロールすると上部に追随（sticky） */
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 22px 40px;
  background: var(--color-bg); /* スクロール時に下のコンテンツが透けないように */
}

.header__inner {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.header__logo {
  width: 196px;
  flex-shrink: 0;
}

.header__logo img {
  width: 100%;
}

.header__right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.gnav__list {
  display: flex;
  align-items: center;
}

.gnav__list > li:nth-child(1) {
  margin-right: 103px; /* TOP */
}

.gnav__list > li:nth-child(2) {
  margin-right: 102px; /* ABOUT */
}

.gnav__list > li:nth-child(3) {
  margin-right: 83px;  /* PRODUCTS */
}
.gnav__products-trigger,
.gnav__list > li > a:link,
.gnav__list > li > a {
  display: inline-block;
  position: relative;
  color: var(--color-heading)!important;
  font-family: var(--font-en);
  font-size: 3.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding-bottom: 0;
}
.gnav__products-trigger:hover, 
.gnav__list > li > a:hover {
  opacity: 0.6;
}

/* グローバルメニューの画像ラベル（PCは余白トリミング済みのため高さ指定なし＝自然サイズ） */
.gnav__img {
  display: block;
  width: auto;
}
.gnav__list a:hover {
 text-decoration: underline;
}

.header__instagram {
  width: 6.4rem; /* 64px */
  flex-shrink: 0;
}

.header__instagram img {
  width: 100%;
}


/* ---------------------------------------------------------
   GNAV DROPDOWN（PRODUCTS ホバーメニュー）
--------------------------------------------------------- */

.gnav__item--products {
  position: relative;
}
.gnav__item--products > div.gnav__products-trigger {
  cursor: pointer;
  font-size: 3.2rem;
}
.gnav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 260px;
  padding: 15px 15px;
  background: #676B6D;
  box-shadow: 0 8px 24px rgba(7, 3, 4, 0.12);

  /* 既定は非表示。ホバー/フォーカスで表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

/* hover可能な端末：hover / フォーカスで表示（JSなしでも動作） */
@media (hover: hover) {
  .gnav__item--products:hover .gnav__dropdown,
  .gnav__item--products:focus-within .gnav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* JS制御（タッチ / キーボード / hover状態の同期） */
.gnav__item--products.is-open .gnav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 開いている間はオーバーレイより前面に */
.gnav__item--products.is-open {
  z-index: 110;
}

/* 外側タップ検出用オーバーレイ（document監視の代替 / 独自プレフィックス） */
.la-custom-gnav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: transparent;
}

/* カテゴリ見出し（BEAUTY / ACCESSORIES / TEA） */
.gnav__dropdown-group + .gnav__dropdown-group {
  margin-top: 10px;
}

.gnav__dropdown-head {
  padding: 0 0 12px;
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
}

.gnav__dropdown-list {
  display: grid;
  gap: 1px;
}

.gnav__dropdown-list a {
  display: block;
  padding: 8px 8px;
  background: var(--color-bg);
  color: var(--color-heading);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* 上位 .gnav__list a の下線装飾を無効化 */
.gnav__dropdown-list a::after {
  display: none;
}

.gnav__dropdown-list a:hover {
  opacity: 0.85;
}


/* =========================================================
   HERO
========================================================= */

.hero__slider {
  width: 100%;
}

.hero__slide {
  width: 100%;
}

.hero__image {
  width: 100%;
}

/* Flickity: メインビジュアル用の微調整 */
.hero .flickity-page-dots {
  bottom: 16px;
}

.hero .flickity-page-dots .dot {
  width: 10px;
  height: 10px;
  opacity: 0.6;
  background: var(--color-white);
}

.hero .flickity-page-dots .dot.is-selected {
  opacity: 1;
}


/* =========================================================
   NEWS
========================================================= */

.news {
  padding: 55px 0 0;
}
.news .inner {
  width: min(calc(100% - 100px), 1100px);
  margin-inline: auto;
}
.news__box {
  display: flex;
  align-items: center;
  gap: 40px 151px;
  box-sizing: border-box;
  padding: 27px 27px 34px 148px;
  border: 1px solid var(--color-line);
}

.news__label {
  flex-shrink: 0;
  color: var(--color-heading);
  font-family: var(--font-en);
  font-size: 2.8rem;
  letter-spacing: 0.12em;
}

.news__list {
  flex: 1;
}

.news__item {
  display: flex;
  gap: 30px;
  font-size: 2.3rem;
  line-height: 1.9;
}

.news__item + .news__item {
  margin-top: 4px;
}

.news__date {
  font-weight: 500;
  flex-shrink: 0;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

.news__text {
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.02em;
}


/* =========================================================
   ABOUT
========================================================= */

.about {
  padding: 113px 0 93px;
  text-align: center;
}

.about__logo {
  width: 405px;
  margin: 0 auto 89px;
}
.about__logo img {
  width: 405px;
}

.about__title {
  margin-bottom: 26px;

  color: var(--color-heading);
  font-family: var(--font-en);
  font-size: 6rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.about__text {
  color: var(--color-text);
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 2;
}

/* =========================================================
   CONCEPT
========================================================= */

.concept {
  padding: 0 0 103px;
  text-align: center;
}

.concept__title {
  margin-bottom: 20px;

  color: var(--color-heading);
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.concept__text {
  color: var(--color-text);
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 2;
}


/* =========================================================
   PRODUCTS
========================================================= */

.products {
  padding: 0 0 102px;
}

.products__grid {
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.products__grid li {
  max-width: 320px;
}
.products__item img {
  width: 100%;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  /* .wrapper_（中央カラム）の中にあるが、背景だけはブラウザ全幅にする */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 22px 20px;
  background: var(--color-footer);
  color: var(--color-white);
  margin-top: 0;
}

.footer__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 100px;
}

.footer__list a:visited,
.footer__list a {
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  transition: opacity 0.25s ease;
  color: #FFF;
}

.footer__list a:hover {
  opacity: 0.7;
}


/* =========================================================
   UTILITY（表示切替）
========================================================= */

.sp-only {
  display: none; /* PCでは非表示（SPで表示に切替） */
}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {
  body {
    font-size: 1.5rem;
    /* 背景はベース(pattern.webp 等倍リピート)を継承。SP専用指定は不要 */
    padding: 0 15px!important; /*プレビュー対策*/
  }


  /* ---------------------------------------------------------
     WRAPPER WIDTH
  --------------------------------------------------------- */

  .wrapper_ {
    width: calc(100% - 3rem); /* 30px */
  }

  .inner,
  .inner--text {
    width: calc(100% - 6rem); /* 30px */
  }
  .news .inner {
    width: calc(100% - 3rem); /* 30px */
  }


  /* ---------------------------------------------------------
     HEADER
  --------------------------------------------------------- */

  .header {
    padding: 1.2rem 1.5rem; /* 16px 18px */
    gap: 1.4rem; /* 14px */
  }

  .header__inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 1.6rem; /* 12px 16px */
  }

  .header__logo {
    width: 4.8rem; /* 48px */
  }

  .gnav {
    margin-left: auto;
  }

  .gnav__list {
    gap: 2.5rem; /* 25px */
  }

  .gnav__list > li:nth-child(1),
  .gnav__list > li:nth-child(2),
  .gnav__list > li:nth-child(3) {
    margin-right: 0; /* PC用の余白をSPで解除 */
  }

  /* SPナビは TOP を非表示（ロゴがトップリンクを兼ねる）※直下liのみ対象 */
  .gnav__list > li > .gnav__products-trigger, .gnav__list > li > a:link, .gnav__list > li > a {
    font-size: 1.4rem;
    font-weight: 500;
  }

  /* SPはメニュー画像の高さを固定 */
  .gnav__img {
    height: 2rem; /* 20px */
  }

  /* SPも共通の fixed＋スクロール出現（base の .header を継承）。
     fixed 自体が配置基準になるため、ドロップダウンパネル（絶対配置）の基準も兼ねる。 */

  .gnav__item--products {
    position: static; /* 基準をヘッダーへ移し、パネルを全幅化 */
  }

  .gnav__dropdown {
    display: none;
    top: 100%;
    left: unset;
    right: 0;
    max-width: calc(100% - 30px);;
    min-width: calc(100% - 30px);
  }

  .gnav__item--products.is-open .gnav__dropdown {
    display: block;
  }

  .header__instagram {
    width: 1.9rem; /* 19px */
    margin-left: 2.5rem; /* 25px */
  }


  /* ---------------------------------------------------------
     NEWS
  --------------------------------------------------------- */

  .news {
    margin: 3rem 0 5rem; /* 30px 0 50px */
    padding: 0;
  }

  .news__box {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem; /* 9px */
    padding: 1.5rem; /* 15px */
  }

  .news__label {
    font-size: 1.4rem;
  }

  .news__item {
    flex-direction: column;
    gap: 0;
    font-size: 1.4rem; /* .news__text = 14px */
    line-height: 1.7;
  }

  .news__date {
    font-size: 1.2rem; /* 12px */
  }

  .news__item + .news__item {
    margin-top: 1.6rem; /* 16px */
  }


  /* ---------------------------------------------------------
     ABOUT
  --------------------------------------------------------- */

  .about {
    padding: 0 0 5rem; /* 50px */
  }

  .about__logo {
    width: 16.2rem; /* 180px */
    margin-bottom: 5rem; /* 50px */
  }

  .about__title {
    font-size: 2rem; /* 20px */
    font-weight: 500;
    margin-bottom: 1.6rem; /* 16px */
  }

  .about__text {
    font-size: 1.4rem; /* 14px */
    line-height: 1.9;
    text-align: center;
    margin-top: 1.6rem; /* 16px */
  }


  /* ---------------------------------------------------------
     CONCEPT
  --------------------------------------------------------- */

  .concept {
    padding: 0 0 5rem; /* 50px */
  }

  .concept__title {
    font-size: 1.6rem; /* 16px */
    font-weight: 500;
    margin-bottom: 1.6rem; /* 16px */
  }

  .concept__text {
    font-size: 1.4rem; /* 14px */
    line-height: 1.9;
    text-align: center;
    margin-top: 1.6rem;
  }


  /* ---------------------------------------------------------
     PRODUCTS
  --------------------------------------------------------- */

  .products {
    padding: 0 0 2.2rem; /* 22px */
  }
  .item .section-heading__en{
    font-size: 4.0rem;
  }
  .products__grid {
    width: 100%;
    grid-template-columns: unset;
    gap: 0.8rem; /* 8px */
    display: flex;
    flex-direction: row;
  }
  .products__grid li {
    width: calc(100% / 3);
  }
  .products__grid li img {
    width: 100%
  }
  /* ---------------------------------------------------------
     FOOTER
  --------------------------------------------------------- */

  .footer {
    /* body自体が中央カラムのため幅指定は不要（カラム幅に揃う） */
    padding: 1.9rem 3rem;
  }

  /* SPは左寄せ2列 */
  .footer__list {
    justify-content: flex-start;
    column-gap: 1.2rem; /* 40px */
    row-gap: 1.2rem; /* 14px */
  }

  .footer__list li {
    flex: 0 0 calc(50% - 2rem); /* 20px */
  }

  .footer__list a {
    font-size: 1rem; /* 10px */
  }


  /* ---------------------------------------------------------
     PC ONLY
  --------------------------------------------------------- */

  .pc-only {
    display: none;
  }

  .sp-only {
    display: inline; /* SPでのみ改行を有効化 */
  }

}


/* =========================================================
   =========================================================
   ABOUT PAGE（about.html 専用）
   ※ トップページと共有の main.css。既存クラスと衝突しないよう
     ITEM 系は .item / .item__grid にリネームして流用。
     .inner / .inner--text / .hero / .header / .footer / .wrapper_
     / .sp-only / .pc-only はトップと共通のものを再利用。
   =========================================================
========================================================= */

/* ---------------------------------------------------------
   共通セクション
--------------------------------------------------------- */

.section {
  padding: 70px 0;
}


/* ---------------------------------------------------------
   セクション見出し（EN + JA）
--------------------------------------------------------- */

.section-heading {
  margin-bottom: 28px;
  text-align: center;
}

.section-heading--left {
  text-align: left;
}

.section-heading__en {
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 9rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.section-heading__ja {
  margin-top: 6px;
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
}


/* ---------------------------------------------------------
   ABOUT リード
--------------------------------------------------------- */

.about-lead {
  padding-top: 75px;
  padding-bottom: 91px;
  text-align: center;
}
.about-lead .section-heading {
  margin-bottom: 30px;
}
.about-lead .section-heading__en {
  color: #54585A;
}
.about-lead .section-heading__ja {
  margin-top: 42px;
  font-size: 3.6rem;
}
.about-lead__text {
  font-size: 2.3rem;
  line-height: 2;
}

.about-lead__text p + p {
  margin-top: 8px;
}


/* ---------------------------------------------------------
   GALLERY
--------------------------------------------------------- */

.gallery {
  padding-top: 0;
  padding-bottom: 0;
}

.gallery__layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 50px;
  align-items: center;
}

.gallery__image img {
  width: 100%;
}

.gallery__content .section-heading {
  margin-bottom: 29px;
}

.gallery__content .section-heading__ja {
  font-size: 3.2rem;
  font-weight: 500;
}

.gallery__text {
  font-size: 2.3rem;
  line-height: 1.9;
}


/* ---------------------------------------------------------
   USEFUL & BEAUTIFUL
--------------------------------------------------------- */

.useful {
  padding-top: 105px;
  padding-bottom: 73px;
  text-align: center;
}

.useful .section-heading {
  margin-bottom: 30px;
}

/* PC: "-USEFUL & BEAUTIFUL-" を1行に収めるため、useful だけ左右余白を詰めて幅を広げる */
@media screen and (min-width: 768px) {
  .useful .inner--text {
    width: min(calc(100% - 20px), 1180px);
  }
}

.useful .section-heading__ja {
  font-size: 3.8rem;
}

.useful__text {
  font-size: 2.3rem;
  line-height: 2;
}


/* ---------------------------------------------------------
   ITEM（トップの .products と衝突するため .item にリネーム）
--------------------------------------------------------- */

.item {
  padding-top: 0;
  padding-bottom: 76px;
  text-align: center;
}

.item .section-heading {
  margin-bottom: 33px;
}

.item .section-heading__ja {
  font-size: 2.8rem;
}

.item__grid {
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.product-card {
  min-width: 320px;
  min-height: 195px;
  padding: 30px 0;
  background: var(--color-white);
  /* タイトルを上、項目リストを残り領域の中央に。カードはグリッドで等高のため
     項目数が増減しても短い列（紅茶）が常に他列の中央に揃う。 */
  display: flex;
  flex-direction: column;
}

.product-card__title {
  margin-bottom: 30px;
  font-family: var(--font-en);
  font-size: 4.0rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.product-card__text {
  font-size: 2rem;
  line-height: 2;
  /* カード残り領域いっぱいに広げ、項目リストを上下中央に。
     項目数が増減しても短い列（紅茶）は常に他列の中央に揃う。 */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product-card__text a {
  display: block;        /* 各項目を1行ブロックに（brは使わず CSS で行組み） */
  color: var(--color-text);
  transition: opacity 0.2s ease;
}
.product-card__text a:hover {
  opacity: 0.6;
  text-decoration: underline;
}


/* ---------------------------------------------------------
   PHILOSOPHY
--------------------------------------------------------- */

.philosophy {
  padding-top: 0;
  padding-bottom: 68px;
  margin-bottom: 40px;
  text-align: center;
}

.philosophy .section-heading {
  margin-bottom: 49px;
}

.philosophy .section-heading__ja {
  font-size: 3.6rem;
}

.philosophy__intro,
.philosophy__item {
  margin-bottom: 32px;
}

.philosophy__intro:last-child,
.philosophy__item:last-child {
  margin-bottom: 0;
}

.philosophy__intro h3,
.philosophy__item h3 {
  margin-bottom: 19px;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.philosophy__intro p,
.philosophy__item p {
  font-size: 2rem;
  line-height: 2;
}


/* ---------------------------------------------------------
   WILLIAM MORRIS
--------------------------------------------------------- */

.morris {
  padding-top: 0;
  padding-bottom: 110px;
}

.morris__layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 50px;
  align-items: start;
}

.morris__image img {
  width: 100%;
}

.morris__content .section-heading {
  margin-bottom: 29px;
}

.morris__content .section-heading__ja {
  font-size: 3.4rem;
}

.morris__content .section-heading__ja span {
  font-size: 2.3rem;
}

.morris__text {
  font-size: 2rem;
  line-height: 2;
}

.morris__text p + p {
  margin-top: 12px;
}


/* ---------------------------------------------------------
   MOVIE
--------------------------------------------------------- */
/* ========================================
   BRAND MOVIE
======================================== */

.wmah-movie {
  width: 100%;
  padding: 0 20px 82px;
  background: #f2ebe7;
}

.wmah-movie__inner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.wmah-movie__video {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #000000;
}


/* ========================================
   SMARTPHONE
======================================== */

@media screen and (max-width: 767px) {

  .wmah-movie {
    padding: 81px 20px 82px;
  }

  .wmah-movie__video {
    max-width: 240px;
  }

}
/* ---------------------------------------------------------
   WILLIAM MORRIS GALLERY LOGO
--------------------------------------------------------- */

.gallery-logo {
  padding: 0 0 110px;
}

.gallery-logo img {
  width: 330px;
  margin-inline: auto;
}


/* ---------------------------------------------------------
   ABOUT PAGE / SMARTPHONE
--------------------------------------------------------- */

@media screen and (max-width: 767px) {

  .section {
    padding: 48px 0;
  }

  .section-heading {
    margin-bottom: 24px;
  }
  .about-lead .section-heading {
    margin-bottom: 20px;
  }

  .section-heading__en {
    font-size: 3.6rem;
    font-weight: 500;
  }

  .section-heading__ja {
    font-size: 2rem;
    font-weight: 500;
  }

  /* ABOUT */
  .about-lead {
    padding-top: 31px;
    padding-bottom: 80px;
  }
  .about-lead .section-heading__ja {
    margin-top: 6px;
    font-size: 1.8rem;
  }

  .about-lead__text {
    font-size: 1.4rem;
    line-height: 1.9;
    text-align: left;
  }

  /* GALLERY */
  .section.gallery {
    padding-top: 0;
    padding-bottom: 0;
  }
  .gallery__layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .gallery__image {
    margin: 0 30px 8px;
    width: unset; /* 240px */
  }

  .gallery__content .section-heading {
    text-align: center;
    margin-bottom: 20px;
  }

  .gallery__content .section-heading__en {
    font-size: 3.6rem;
  }

  .gallery__content .section-heading__ja {
    font-size: 1.8rem;
    margin-top: 6px;
  }

  .gallery__text {
    font-size: 1.4rem;
    line-height: 1.9;
    text-align: left;
  }

  /* USEFUL */
  .section.useful {
    padding-top: 80px;
    padding-bottom: 0;
  }
  .useful .section-heading__en {
    font-size: 3.6rem;
    white-space: normal;
  }
  .useful .section-heading {
    margin-bottom: 20px;
  }

  .useful .section-heading__ja {
    font-size: 1.8rem;
    margin-top: 6px;
  }

  .useful__text {
    font-size: 1.4rem;
    line-height: 1.9;
    text-align: left;
  }

  /* ITEM */
  .section.item {
    padding-bottom: 0;
  }
  .item .section-heading__en {
    font-size: 3.6rem;
  }  
  .item__grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .item .section-heading__ja {
    font-size: 1.4rem;
    margin-top: 6px;
  }
  .item .section-heading {
    margin-bottom: 31px;
  }
  .product-card {
    min-width: 100%;
    min-height: 180px;
    padding: 28px 20px;
  }

  .product-card__title {
    font-size: 2.5rem;
    margin-bottom: 8px;
  }
  .product-card:last-child .product-card__title {
    margin-bottom: 34px;
  }

  .product-card__text {
    font-size: 1.4rem;
  }

  /* PHILOSOPHY */
  section.philosophy {
    padding-top: 80px;
    padding-bottom: 0;
    margin-bottom: 20px;
  }
  .philosophy .section-heading {
    margin-bottom: 20px;
  }
  .philosophy .section-heading__en {
    font-size: 3.6rem;
  }

  .philosophy .section-heading__ja {
    font-size: 1.8rem;
    margin-top: 6px;
  }

  .philosophy__intro,
  .philosophy__item {
    margin-bottom: 40px;
  }

  .philosophy__intro h3,
  .philosophy__item h3 {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 12px;
  }

  .philosophy__intro p,
  .philosophy__item p {
    font-size: 1.4rem;
    line-height: 1.9;
    text-align: left;
  }

  /* MORRIS */
  section.morris {
    padding-top: 80px;
    padding-bottom: 0;
  }
  .morris__layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .morris__image {
    max-width: 191px;
    margin-inline: auto;
  }

  .morris__content .section-heading {
    text-align: center;
  }

  .morris__content .section-heading__en {
    font-size: 3.6rem;
  }

  .morris__content .section-heading__ja {
    font-size: 1.8rem;
    margin-top: 6px;
    color: #54585A;
  }

  .morris__content .section-heading__ja span {
    font-size: 1.4rem;
  }

  .morris__text {
    font-size: 1.4rem;
    line-height: 2;
  }
  .section.movie {
    padding-top: 80px;
    padding-bottom: 0;
  }
  .section.movie .inner {
    padding: 0 30px;
    width: unset;
  }

  /* GALLERY LOGO */
  .gallery-logo {
    padding: 0 0 80px;
  }

  .gallery-logo img {
    width: 240px;
  }
  div.morris__text sup,
  div.handcream__text sup {
    font-size: 1.2rem;
  }  

}


/* =========================================================
   =========================================================
   PRODUCTS PAGE（products.html 専用）
   ※ 他ページと衝突しないよう products 固有クラスを使用。
     .section / .section-heading / .inner / .hero などは共通を再利用。
   =========================================================
========================================================= */

/* ---------------------------------------------------------
   HAND CREAM（保湿成分の紹介カード）
--------------------------------------------------------- */
.section.handcream {
  padding: 0;
  margin-top: 100px;
}
.handcream__card {
  max-width: 1000px;
  margin: 0 auto;
  margin-inline: auto;
  padding: 37px 0 52px;
  background: var(--color-white);
  text-align: center;
}

.handcream__title {
  color: var(--color-text);
  font-size: 5.5rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.moisture {
  display: flex;
  width: fit-content;      /* 成分の個数に応じて横幅が可変（デザイン: 1個=300 / 2個=400 / 3個=600px） */
  max-width: 100%;
  align-items: stretch;
  margin: 55px auto 45px;
  background: #ECEBEB;
}

.moisture__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  text-align: center;
  padding: 20px 0;
  background: #54585A;
  writing-mode: vertical-rl;
  font-size: 2.3rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: #FFF;
}

.moisture__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  padding: 15px 75px;
}

.moisture__item {
  text-align: center;
}

.moisture__circle {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 7px;
  border-radius: 50%;
  overflow: hidden;
}

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

.moisture__name {
  font-size: 2rem;
  line-height: 1.2;
  color: #2F2C2C;
}

.handcream__text {
  font-size: 2.3rem;
  line-height: 2;
}
.morris__text sup,
.handcream__text sup {
  font-size: 1.5rem;
}

.handcream__text p + p {
  margin-top: 1.6em;
}


/* ---------------------------------------------------------
   PRODUCTS（製品一覧グリッド）
--------------------------------------------------------- */
.section.productlist {
  padding-top: 75px;
  padding-bottom: 0;
}
.section.productlist .section-heading {
  margin-bottom: 32px;
}
.productlist__grid {
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.productlist__item {
  max-width: 320px;
  background: var(--color-white);
}
.productlist__item a:hover {
  opacity: 0.8;
}
.productlist__item a {
  display: flex;
  flex-direction: column;
  padding: 42px 22px 26px;
  text-decoration: none;
}

.productlist__image {
  margin-bottom: 45px;
  text-align: center;
}
.productlist__image picture {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 180px;
}
.productlist__image picture img {
  max-height: 100%;
}
.productlist__name {
  font-size: 1.8rem;
  line-height: 1.7;
  color: var(--color-text);
}
.section.productlist .section-heading__ja {
  font-size: 2.8rem;
}
.productlist__price {
  margin-top: 4px;
  text-align: right;
  font-size: 1.7rem;
  color: var(--color-heading);
}

.productlist__price span {
  font-size: 1.2rem;
}


/* ---------------------------------------------------------
   FRAGRANCE（香り一覧）
--------------------------------------------------------- */
.section.fragrance {
  padding-top: 75px;
  padding-bottom: 0;
}
.section.fragrance .section-heading__ja {
  font-size: 2.8rem;
}
.section.fragrance .section-heading {
  margin-bottom: 32px;
}
.fragrance__grid {
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.fragrance__item {
  max-width: 320px;
  min-width: 320px;
  min-height: 330px;
  padding: 34px 20px 47px;
  background: var(--color-white);
}

.fragrance__name {
  margin-bottom: 24px;
  text-align: center;
  color: var(--color-text);
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.fragrance__text {
  font-size: 2.3rem;
  line-height: 1.9;
  color: var(--color-text);
}


/* ---------------------------------------------------------
   DESIGN COLLECTION（デザイン紹介）
--------------------------------------------------------- */

.design-collection__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: max-content;
  margin: 0 auto;
}

.design-collection__item {
  padding: 20px 20px;
  min-width: 320px;
  max-width: 320px;
  background: #FFF;
}

.design-collection__image img {
  width: 100%;
}

.design-collection__name {
  margin: 23px 0 18px;
  text-align: center;
  color: var(--color-text);
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.design-collection__text {
  padding: 0 0;
  font-size: 2.3rem;
  line-height: 1.9;
  color: var(--color-text);
}
.section.design-collection {
  padding: 75px 0;
}
.section.design-collection .section-heading__ja {
  font-size: 2.8rem;
  font-weight: 500;
}
.section.design-collection .section-heading {
  margin-bottom: 32px;
}


/* ---------------------------------------------------------
   PRODUCT DETAIL（ハンカチ / バッグ / ポーチ / 紅茶 の商品紹介）
   ※ hero は共通、下部の製品一覧は section-heading / productlist を再利用。
--------------------------------------------------------- */
.section.product-intro {
  padding: 0;
  margin-top: 100px;
}
.product-intro__card {
  max-width: 1000px;
  margin-inline: auto;
  padding: 78px 40px 86px;
  background: var(--color-white);
  text-align: center;
}
.product-intro__title {
  color: var(--color-text);
  font-size: 5.5rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
}
.product-intro__text {
  margin-top: 42px;
  font-size: 2.3rem;
  line-height: 2;
  color: var(--color-text);
}
.product-intro__text p + p {
  margin-top: 1.6em;
}

/* ソープ：FRAGRANCE が2件のため2カラム（デザインの横幅 490px に合わせる） */
.fragrance__grid--2col {
  grid-template-columns: repeat(2, 1fr);
}
/* 最後のセクションが FRAGRANCE のページ（ソープ）は下に余白を付ける */
.section.fragrance:last-of-type {
  padding-bottom: 75px;
}
/* 文中の注記マーカー ＊（参照用の左マージンを無効化） */
.handcream__text sup.mark {
  margin-left: 0;
}

/* 商品写真が未入稿の箇所に入れるダミー画像（NO IMAGE プレースホルダー） */
.productlist__image .is-noimage {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* COMING SOON（製品一覧の準備中表示） */
.section.productlist--coming {
  padding-bottom: 90px;
}
.productlist__coming {
  margin-top: 70px;
  text-align: center;
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}
body sup {
  vertical-align: top;
  font-size: 1.5rem;
}

/* ---------------------------------------------------------
   PRODUCTS PAGE / SMARTPHONE
--------------------------------------------------------- */

@media screen and (max-width: 767px) {

  /* PRODUCT DETAIL（商品紹介カード） */
  .section.product-intro {
    margin-top: 37px;
  }
  .section.product-intro .inner {
    width: calc(100% - 3rem);
  }
  .product-intro__card {
    padding: 34px 15px 40px;
  }
  .product-intro__title {
    font-size: 2.6rem;
  }
  .product-intro__text {
    margin-top: 22px;
    padding: 0 5px;
    font-size: 1.4rem;
    text-align: left;
  }
  .product-intro__text p + p {
    margin-top: 2rem;
  }
  .productlist__coming {
    margin-top: 44px;
    font-size: 2.2rem;
  }
  .section.productlist--coming {
    padding-bottom: 60px;
  }

  /* HAND CREAM */
  .section.handcream {
    margin-top: 37px;
  }
  .section.handcream .inner {
    width: calc(100% - 3rem);
  }
  .handcream__card {
    padding: 30px 15px;
  }

  .handcream__title {
    font-size: 2.6rem;
  }

  .moisture {
    margin: 10px auto 20px;
  }

  .moisture__label {
    padding: 20px 9px 22px;
    font-size: 1.2rem;
    width: 30px;
  }
  .moisture__item {
    max-width: 65px;
    min-width: 65px;
  }
  .moisture__circle img {
    max-width: 100%;
    max-height: 100%;
    width: unset;
    height: unset;
  }
  .moisture__list {
    width: calc(100% - 30px);
    padding: 10px 19px 11px;
    gap: 20px;
    background: #ECEBEB;
  }

  .moisture__circle {
    width: 100%;
    height: unset;
    max-height: unset;
    aspect-ratio: 1/1;
  }

  p.moisture__name {
    font-size: 1.0rem;
    line-height: 1.6;
    letter-spacing: -0.05em;
  }
  p.moisture__name sup {
    font-size: 1.0rem;
  }
  .handcream__text {
    padding: 0 15px;
    font-size: 1.4rem;
    text-align: left;
  }
  .handcream__text p + p {
    margin-top: 2.0rem;
  }
  /* PRODUCTS */
  .section.productlist {
    padding-top: 80px;
  }
  .section.productlist .inner {
    width: calc(100% - 6rem);
  }
  .section.productlist .section-heading {
    margin-bottom: 19px;
  }
  .section.productlist .section-heading__ja {
    font-size: 1.4rem;
    margin-top: 6px;
  }
  .productlist__grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    gap: 20px;
  }
  .design-collection__item,
  .fragrance__item,
  .productlist__item {
    max-width: 100%;
  }
  .productlist__item a {
    padding: 30px 15px;
  }
  .productlist__name {
    font-size: 1.4rem;
  }
  .productlist__image {
    margin-bottom: 20px;
  }
  .productlist__image picture {
    height: 140px;
  }
  .productlist__image picture img {
    max-height: 100%;
  }
  .productlist__price {
    font-size: 1.8rem;
  }
  .productlist__price span {
    font-size: 1.4rem;
  }
  /* FRAGRANCE */
  .section.fragrance .inner {
    width: calc(100% - 6rem);
  }
  .section.fragrance .section-heading__ja {
    font-size: 1.6rem;
    margin-top: 6px;
  }
  .section.fragrance .section-heading {
    margin-bottom: 30px;
  }
  .fragrance__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
  }

  .fragrance__name {
    font-size: 2.0rem;
    margin-bottom: 12px;
  }

  .fragrance__text {
    font-size: 1.4rem;
  }
  .fragrance__item {
    min-height: unset;
    padding: 30px 15px;
    min-width: 100%;
  }

  /* DESIGN COLLECTION */
  .section.design-collection{
    padding: 80px 0;
  }
  .section.design-collection .inner {
    width: calc(100% - 6rem);
  }
  .design-collection__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
  }

  .design-collection__name {
    margin: 12px 0;
    font-weight: 500;
    font-size: 2.0rem;
  }

  .design-collection__text {
    font-size: 1.4rem;
  }
  .section.design-collection .section-heading__ja {
    font-size: 1.6rem;
    margin-top: 6px;
  }
  .section.design-collection .section-heading {
    margin-bottom: 30px;
  }
  .design-collection__item {
    padding: 20px 15px;
    min-width: 100%;
  }
}


/* =========================================================
   追従CTA（top.html のみ設置／SP限定表示）
   ※ .buybar 要素はトップページにしか無いため、他ページには出ません。
========================================================= */

.buybar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 30px;
  max-width: 1200px;
  z-index: 120;
  padding: 5rem 3rem;
  margin-left: auto;
  margin-right: auto;
  background: #676B6D;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.buybar.la-custom-buybar-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.buybar__title {
  text-align: center;
  color: var(--color-white);
  font-size: 3.5rem;
  font-weight: normal;
  letter-spacing: 0.08em;
  margin-right: 110px;
  min-width: max-content;
}

.buybar__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.buybar__btn:visited,
.buybar__btn:link,
.buybar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 80px;
  padding: 0.6rem 0.4rem;
  background: #F1E4E0;
  color: var(--color-heading);
  font-size: 3.5rem;
  font-weight: normal;
  text-align: center;
  transition: opacity 0.2s ease;
  text-decoration: none;
}

.buybar__btn:hover {
  opacity: 0.85;
}
@media screen and (max-width: 767px) {

  .buybar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    padding: 1rem 1rem 1rem;
    background: #676B6D;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* フッター到達時に隠す（JSで .la-custom-buybar-hidden を付与） */
  .buybar.la-custom-buybar-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }

  .buybar__title {
    margin-bottom: 1.1rem;
    text-align: center;
    color: var(--color-white);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-right: 0;
  }

  .buybar__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .buybar__btn:visited,
  .buybar__btn:link,
  .buybar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.6rem 0.4rem;
    background: #F1E4E0;
    color: var(--color-heading);
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    min-width: unset;
    transition: opacity 0.2s ease;
  }

  .buybar__btn:hover {
    opacity: 0.85;
  }
  body sup {
    vertical-align: top;
    font-size: 1.2rem;
  }

}