/* =========================================================
   全体
========================================================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width:100%;
  height:100%;
  font-family:"Noto Serif JP", serif;
  background:#f5f2eb;
  color:#222;
  -webkit-font-smoothing: antialiased;
  scrollbar-gutter: stable;
}
ul,li{
  list-style: none;
}

body.lock-scroll { overflow:hidden !important;}
body.is-loading { overflow:hidden;}

.en-text { font-family:"Playfair Display", serif;}

.sp_only{
  display: none;
}
@media(max-width: 600px) {
  .sp_only { display: block;}
}

/* =========================================================
   ローディング
========================================================= */
#loader {
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:15px;

  background: radial-gradient(circle at center,
    rgba(84,79,74,1) 0%,
    rgba(46,43,40,1) 60%,
    rgba(33,31,29,1) 100%
  );

  transition:opacity 1.8s cubic-bezier(0.25,1,0.28,1);
}

#loader.fade {
  opacity:0;
  pointer-events:none;
}

/* 光エフェクト */
#loader::after {
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  pointer-events:none;

  background: radial-gradient(circle,
    rgba(255,245,225,1) 0%,
    rgba(240,215,180,0.3) 40%,
    rgba(33,31,29,0) 100%
  );

  filter:blur(60px);
  animation:Glow 4s infinite ease-in-out;
}

@keyframes Glow {
  0%,100% { opacity:0.4; transform:scale(0.85);}
  50%     { opacity:0.8; transform:scale(1.1);}
}

/* ロゴ */
.loader-logo {
  position: relative;
  width:130px;
  height: auto;
  opacity:0.5;
  z-index:10000;
  animation:pulseLogo 4s infinite ease-in-out;
}

@keyframes pulseLogo {
  0%,100% { opacity:0.3; transform:scale(0.98); }
  50%     { opacity:0.65; transform:scale(1.02); }
}

/* =========================================================
   フェードイン
========================================================= */
.fade-in-content {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-in-content.is-ready {
  opacity:1;
}

/* =========================================================
   ヘッダー
========================================================= */
.header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:70px;
  z-index:1500;
  display:flex;
  justify-content:center;

  background:rgba(243,239,230,0.65);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.3);
  color:#222;
}

.header-inner {
  width:100%;
  max-width:1000px;
  height:100%;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:0 40px;
}

@media(max-width:768px){
  .header-inner { padding:0 24px; }
}

/* ロゴ */
.logo {
  width:55px;
  height: auto;
  display:flex;
  align-items:center;
  cursor:pointer;
}

.logo img {
  width:100%;
  height: auto;
}

/* ナビ */
.header-nav {
  display:flex;
  gap:30px;
}
@media(max-width:768px){
  .header-nav { gap:14px; }
}

.header-nav a,
.header-nav span {
  font-family:"Playfair Display", serif;
  font-size:11px;
  letter-spacing:0.15em;
  text-decoration:none;
  color:inherit;
  position:relative;
  padding:4px 0;
  cursor:pointer;
}

.header-nav a::after,
.header-nav span::after {
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:0;
  height:1px;
  background:currentColor;
  transition: width .3s ease, left .3s ease;
}

@media(hover:hover){
  .header-nav a:hover::after,
  .header-nav span:hover::after {
    width:100%;
    left:0;
  }
}

/* =========================================================
   トップ・ブランドストーリー
========================================================= */
.story-section {
  width:100%;
  height:100vh;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  padding:0 24px;
  text-align:center;
  position:relative;
  /* background: transparent; */
}

.story-content { max-width:600px; }

.story-content .brand-title {
  font-size:18px;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom:40px;
  color: #111;
  margin-top: 1.2em;
}

.story-content p {
  font-size:13.5px;
  line-height:2.3;
  letter-spacing:0.1em;
  color:#444;
  margin-bottom: 0px;
}

.story-content .brand-sub-label {
  font-size: 16px;
  margin-bottom: 15px;
  line-height: 1.8;
}

/* スクロールヒント */
.scroll-hint {
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  /* text-transform: uppercase; */
  font-size:10px;
  letter-spacing:0.2em;
  color:#8c7b6c;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.scroll-hint::after {
  content:"";
  width:1px;
  height:20px;
  background: #ccc;
  display: block;
}

@media screen and (max-height: 600px){
  .story-section {
    height:auto;
    min-height:100vh;
    padding-bottom:60px;
  }
  .scroll-hint {
    position:relative;
    bottom: auto;
    left: auto;
    transform:none;
    margin-top:40px;
    padding-bottom: 20px;
  }
}

/* =========================================================
   トップ・季節グリッド
========================================================= */
/* 主コンテナ */
.app-container {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:100px 40px 80px;
  /* ノート風 罫線 ↓ */
  background-image: linear-gradient(rgba(140,123,108,0.08) 1px,transparent 1px);
  background-size:100% 40px;
}
@media(max-width:768px){
  .app-container { padding:100px 20px 140px; }
}

/* 季節グリッド（コンテナ） */
.season-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  max-width:800px;
  width:100%;
  margin: 0 auto;
}
@media(max-width:768px){
  .season-grid { gap:20px; }
}

/* 季節パネル（チェキ風） */
.season-panel {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: flex-start;

  aspect-ratio: 1 / 1.22;
  padding:14px 14px 0;

  background:#fbfaf8;
  border:1px solid rgba(0,0,0,0.04);
  border-radius: 2px;
  box-shadow: 0 12px 25px rgba(40, 30, 20, 0.06), 0 2px 5px rgba(0, 0, 0, 0.03);

  cursor:pointer;
  opacity:0;
  transform:translateY(30px);
  transition:
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s ease;
}

.season-panel.is-visible { opacity: 1; transform: translateY(0); }
.season-panel:nth-child(1) { transition-delay: 0.1s; }
.season-panel:nth-child(2) { transition-delay: 0.25s; }
.season-panel:nth-child(3) { transition-delay: 0.4s; }
.season-panel:nth-child(4) { transition-delay: 0.55s; }

.panel-media-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}
.panel-media-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.1) 100%);
  z-index: 3;
}

@media(max-width: 768px) {
  .season-panel {aspect-ratio: unset;}
  .panel-media-wrap {aspect-ratio: 1 / 1.2;}
}

@media (hover: hover) {
  .season-panel:hover .panel-bg { transform: scale(1.04); }
}

.panel-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 4;
  pointer-events: none;
  color: #333;
  padding: 4px 0 2px;
}
.panel-title h2 {
  font-family: "Playfair Display", serif;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.1em;
  color: #8c7b6c;
  margin-bottom: 3px;
}
.panel-title p {
  font-size: 14px;
  color: #666;
  letter-spacing: 0.05em;
}
@media(max-width: 768px) {
  .panel-title h2 {
    font-size: 14px;
    margin-bottom: 1px;
    letter-spacing: 0;
  }
  .panel-title p {
    font-size: 12px;
    transform: scale(0.9);
    letter-spacing: 0;
  }
}

/* =========================================================
   季節毎の詳細画面
========================================================= */
.detail-view {
  position:fixed;
  inset:0;
  z-index:1100;
  width: 100%;
  height: 100%;

  opacity:0;
  visibility:hidden;
  transform:translateY(15px);

  transition:
  opacity 0.4s ease,
  transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
  visibility 0.4s;

  display:flex;
  flex-direction:column;
  padding-top: 70px;
  overflow: hidden;
}
@media(max-width: 768px) {
  .detail-view {
    padding-top: 0;
  }
}
.detail-view.active {
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

.detail-inner {
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 背景レイヤー */
.detail-bg-layer {
  position:absolute;
  inset:-10px;
  z-index: 0;

  background-size:cover;
  background-position:center;
  background-color:#f5f2eb;

  opacity:0;
  transition:opacity 1s ease-in-out;
  pointer-events:none;
  will-change: opacity;
  backface-visibility: hidden;
}

.detail-bg-layer.is-loaded {
  opacity:1;
}

/* 戻るボタン */
.back-btn {
  position: relative;
  z-index: 10;
  padding: 12px 40px 4px;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-shadow: 1px 1px 1px #ffffff;
}
@media(max-width: 768px) {
  .back-btn {
    position: absolute;
    top: 75px;
    left: 0;
    padding: 0 24px 4px;
    z-index: 1400;
  }
}

.carousel-container {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  gap: 32px;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 0 40px 80px;
}
.carousel-track::-webkit-scrollbar { display: none; }

@media(min-width: 769px) {
  .carousel-track:has(> .fragrance-card:nth-child(3)) {
    justify-content: flex-start;
    padding-left: calc(50% - (310px * 1.5 + 32px));
  }
}
@media(max-width: 768px) {
  .carousel-track {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
    padding: 120px 24px 100px;
    gap: 40px;
  }
}

/* =========================================================
   商品カード
========================================================= */

/* --- カード本体 --- */
.fragrance-card {
  flex: 0 0 310px;
  width:310px;
  height: 85%;
  max-height:460px;

  display:flex;
  flex-direction:column;

  border-radius:12px;
  overflow:hidden;
  position: relative;

  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(14px);

  opacity:0;
  transform:translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, backdrop-filter;
}


.detail-view.active .fragrance-card { opacity: 1; transform: translateY(0); }
.detail-view.active .fragrance-card:nth-child(1) { transition-delay: 0.1s; }
.detail-view.active .fragrance-card:nth-child(2) { transition-delay: 0.2s; }
.detail-view.active .fragrance-card:nth-child(3) { transition-delay: 0.3s; }


@media(max-width: 768px) {
  .fragrance-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
    height: 440px;
  }
}

/* =========================================================
   カード・画像
========================================================= */

.card-media {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
}

/* 画像表示切替 */
.img-product,
.img-mood {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.img-product {
  z-index: 2;
  opacity: 1;
}
.img-mood {
  z-index: 1;
  opacity: 0;
}

@media(hover: hover) {
  .fragrance-card:hover .img-product { opacity: 0; }
  .fragrance-card:hover .img-mood { opacity: 1; }
}

.fragrance-card.show-product-img .img-product { opacity: 0; }
.fragrance-card.show-product-img .img-mood { opacity: 1; }

/* =========================================================
   香り詳細
========================================================= */
/* ------ オーバーレイ ------ */
.card-overlay {
  position:absolute;
  inset:0;
  z-index: 5;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:20px;

  background: rgba(46, 43, 40, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  /* pointer-events: none; */
}

/* 開いた状態 */
.fragrance-card.info-open .card-overlay {
  opacity:1;
  visibility: visible;
  /* pointer-events:auto; */
}
.fragrance-card.info-open .img-product,
.fragrance-card.info-open .img-mood {
  opacity: 0 !important;
}

/* 見出し */
.overlay-title {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #a28c73;
  margin-bottom: 15px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 6px;
  font-weight: 500;
}

/* 香りノート */
.note-item {
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #e5dec9;
}
.note-item strong {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #b5aaa0;
  text-transform: uppercase;
  margin-bottom: 1px;
}

/* ------ トリガーボタン（香りを見る） ------ */
.info-trigger-btn {
  position: absolute;
  bottom: 40px;
  right: 12px;
  z-index: 4;

  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);

  font-size: 10px;
  font-weight: 500;
  color: #333;
  letter-spacing: 0.05em;

  transition: all 0.2s ease;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
}
@media(max-width: 768px) {
  .info-trigger-btn { bottom: 35px; }
}

.fragrance-card.info-open .info-trigger-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  z-index: 6;
}

/* =========================================================
   インジケーター（ドット・番号）
========================================================= */
.media-indicator { display: none; }

@media(max-width: 768px) {
  .media-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 4px;
    background: transparent;
    border: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
  }
  .indicator-dots {
    display: flex;
    gap: 6px;
  }
  .indicator-dot {
    width: 14px;
    height: 2px;
    background: rgba(255,255,255,0.4);
    transition: background-color 0.3s ease;
  }
  .indicator-dot.active {
    background: #fff;
  }
  .indicator-num {
    font-family: "Playfair Display", serif;
    font-size: 10px;
    color: #fff;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
}

/* =========================================================
   カード・テキスト情報
========================================================= */
.card-info {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.card-info h3 {
  font-size: 18px;
  font-weight: 500;
  color: #111;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.card-info .catch {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  margin-bottom: 14px;
  line-height: 1.6;
}

.card-info .buy-link {
  font-size: 11.5px;
  font-weight: 500;
  color: #111;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
/* --- 購入リンク矢印 --- */
.card-info .buy-link span {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  transition: all 0.3s ease;
}

/* =========================================================
   季節スイッチャー
========================================================= */

.season-switcher {
  position:fixed;
  z-index:100;
  bottom:0;
  left:0;
  width:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  flex-shrink:0;

  padding:15px 0 20px;

  background:linear-gradient(
    to top,
    rgba(245,242,235,0.4) 60%,
    rgba(245,242,235,0) 100%
  );
}

.switch-container {
  position:relative;
  display:flex;
  background:rgba(0,0,0,0.05);
  padding:3px;
  border-radius:30px;
  backdrop-filter:blur(5px);
}

.switch-btn {
  font-size: 11px;
  font-family: "Playfair Display", serif;
  color: #444;
  letter-spacing: 0.05em;

  position: relative;
  z-index: 2;
  width: 65px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: color 0.3s ease;
}

.switch-btn.active {
  color:#a28c73;
  font-weight:600;
}

.switch-bg-pill {
  position:absolute;
  top:3px;
  left:3px;
  z-index:1;

  width:65px;
  height:32px;

  background:#fff;
  border-radius:25px;
  box-shadow:0 3px 10px rgba(0,0,0,0.06);

  pointer-events:none;
  transition:transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.copyright {
  font-size: 8.5px;
  color: #555;
  letter-spacing: 0.1em;
  font-weight: 400;
}

/* =========================================================
   香り一覧モーダル
========================================================= */

#allFragrancesModal {
  position:fixed;
  inset:0;
  z-index:2000;

  width:100%;
  height:100%;

  background:rgba(245,242,235,0.99);

  opacity:0;
  visibility:hidden;
  transition:opacity 0.5s ease, visibility 0.5s;

  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items: center;

  padding:100px 40px 40px;
  cursor:pointer;
}

#allFragrancesModal.active {
  opacity:1;
  visibility:visible;
}

@media(max-width:768px){
  #allFragrancesModal {
    padding:80px 20px 30px;
  }
}

/* 閉じるボタン */
.modal-close-btn {
  position:absolute;
  top:24px;
  right:40px;
  z-index:2100;

  font-size:11px;
  letter-spacing:0.15em;
  color:#666;

  cursor:pointer;
  padding:10px;

}

/* スクロール領域 */
.modal-scroll-area {
  max-width:960px;
  width:100%;
  height:100%;

  overflow-y:auto;
  scrollbar-width:none;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* グリッド */
.modal-grid-container {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:40px;
  width:100%;
  padding:20px 0;
}

@media(max-width:900px){
  .modal-grid-container {
    grid-template-columns:repeat(2, 1fr);
    gap:30px 24px;
  }
}

/* 各季節 */
.modal-season-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: default;
}

/* 見出し */
.modal-section-title {
  font-size:11px;
  font-weight: 500;
  letter-spacing:0.1em;
  color:#a28c73;
  /* text-transform:uppercase; */

  margin-bottom:16px;
  padding-bottom:6px;

  border-bottom:1px solid rgba(0,0,0,0.06);
  width:100%;
}

/* リスト */
.modal-item-list {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* リンク */
.modal-item-link {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-decoration:none;
  cursor:pointer;
  transition:transform 0.2s;
}

.modal-item-name {
  font-size:15px;
  font-weight: 400;
  color:#111;
  letter-spacing:0.05em;

  display:flex;
  align-items:center;
  gap:6px;
}

.modal-item-roma {
  font-size:9.5px;
  color:#888;
  letter-spacing:0.1em;
  margin-top:2px;
}

@media(hover:hover){
  .modal-item-link:hover .modal-item-name {
    color:#a28c73;
    transform:translateX(4px);
    transition:all 0.3s;
  }
}

/* =========================================================
   フッター
========================================================= */
.copyright-footer {
  width:100%;
  padding:40px;
  font-family:"Playfair Display", serif;
  font-size:10px;
  letter-spacing:0.1em;
  color:#8c7b6c;
  opacity:0.6;
  text-align:center;
  background:#f5f2eb;
  margin-top:auto;
}