/* =============================================================
   PROMISE — Common Stylesheet
   style.css  |  v2.0.0
============================================================= */

/* -------------------------------------------------------------
   CSS Variables
------------------------------------------------------------- */
:root {
  --black:        #000000;
  --deep:         #111111;
  --card-bg:      #141414;
  --border:       rgba(255,255,255,0.08);
  --white:        #ffffff;
  --off-white:    #e8e4dc;
  --gray:         #888888;
  --gray-lt:      #aaaaaa;
  --gold:         #dfbe81;
  --nav-h-sm:     56px;
  --container:    1280px;
  --section-v:    140px;
  --section-v-sm: 80px;
  /* Typography Scale (1920px -> 1440px / Base: 20px) */
  --fs-xs:    clamp(10.5px, 0.729vw, 14px); /* 元 14px */
  --fs-sm:    clamp(12px,   0.833vw, 16px); /* 元 16px */
  --fs-md:    clamp(14px,   0.938vw, 18px); /* 元 18px */
  --fs-base:  clamp(15px,   1.042vw, 20px); /* 元 20px */
  --fs-lg:    clamp(16.5px, 1.146vw, 22px); /* 元 22px */
  --fs-xl:    clamp(18px,   1.25vw,  24px); /* 元 24px */
  --fs-2xl:   clamp(21px,   1.458vw, 28px); /* 元 28px */
  --fs-3xl:   clamp(24px,   1.667vw, 32px); /* 元 32px */
  --fs-max:   clamp(45px,   3.125vw, 60px); /* 元 60px */
}

/* -------------------------------------------------------------
   Reset & Base
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-size: var(--fs-base);
  background: var(--black);
  color: var(--white);
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  line-height: 1.8;
  /*overflow-x: hidden;*/
}
img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }


@media screen and (min-width: 768px) {
  .forSP { display: none; }
  .forPC { display: inline; }
}
@media screen and (max-width:767px) {
  .forSP { display: inline; }
  .forPC { display: none; }
}

/* -------------------------------------------------------------
   Layout
------------------------------------------------------------- */
.container {
  max-width: var(--container);
}
.text-center { text-align: center!important; }
a.is-gold { color: var(--gold); text-decoration: underline; }
.is-gold { color: var(--gold); }
/* -------------------------------------------------------------
Buttons
------------------------------------------------------------- */

.btn-contact {
  display: inline-block;
  font-size: clamp(12px, 0.833vw, 16px);
  padding: 12px 10px 12px 22px;
  color: #000!important;
  cursor: pointer;
  transition: opacity .25s;
  background: url(../image/bg_text.png) center center / cover no-repeat;
  text-align: center;
  width: 180px;

  line-height: 22px;
  letter-spacing: .05em;
}
.btn-contact::after { display: inline-block; padding: 0 0 0 3px; content: "▼"; font-size: 10px; transform: rotate(-90deg);}
.btn-contact:hover { opacity: .75; }

/* -------------------------------------------------------------
   Section headings
------------------------------------------------------------- */
.section-heading { position: relative; font-size: var(--fs-3xl); letter-spacing: .1em; font-weight: 400; text-align: center; color: var(--white); margin-bottom: 60px; }
.section-heading::after { position: absolute; content: ""; background-color: #999999; bottom: -15px; left: 50%; width: 75px; height: 1px; transform: translateX(-50%);}
.section-subtitle {
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 48px;
  text-align: center;
}

.category-title { margin-top: 75px; }
.section-lead { max-width: 980px; margin: 0 auto 90px; padding: 0 40px; line-height: 2.4; text-align: left; color: #ccc; }


/* -------------------------------------------------------------
   Header
------------------------------------------------------------- */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 30px 0 60px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .3s;
}

.header-logo {
  width: 185px;
  flex-shrink: 0;
}
.header-logo img { width: 100%; }

#header nav { margin-left: auto; }

.global-nav {
  display: flex;
  align-items: center;
  gap: 35px;
  list-style: none;
  margin-right: 25px;
}

/* --- 元のコードの .global-nav a と .global-nav a:hover... を以下に変更 --- */

.global-nav a {
  font-size: clamp(12px, 0.833vw, 16px);
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--white);
  transition: color .25s;
  white-space: nowrap;
  position: relative; 
  padding-bottom: 4px; /* 下線と文字の隙間を調整 */
}

/* 削除またはコメントアウト: 色を変えるだけの記述は不要になります
.global-nav a:hover,
.global-nav a[aria-current="page"] { color: var(--gold); }
*/

/* 追加: 下線（ボーダー）のベース設定 */
.global-nav a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #999;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.global-nav a:hover::after,
.global-nav a[aria-current="page"]::after {
  transform: scaleX(1); 
}


/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px; height: 1px;
  background: var(--white);
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-h-sm); left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.97);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-size: .9rem;
  letter-spacing: .15em;
  color: #fff;
  transition: color .2s;
}
.mobile-nav a:hover { color: var(--gold); }

/* -------------------------------------------------------------
   Page Hero（下層ページ共通）
------------------------------------------------------------- */
.page-hero,
.page-header { position: relative; padding-top: 100px; margin-bottom: 80px; }
.page-header picture { display: block; text-align: right; }
.page-header img { display: block; margin-left: auto; }
.page-header h1 {
  position: absolute;
  top: 26.8%;
  left: clamp(20px, calc(20vw - 144px), 240px);
  max-width: 766px;
  text-align: left;
  z-index: 2;
}

.category-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(40px, 6.2vw, 120px);
  letter-spacing: 0.029em;
  font-weight: 400;
  line-height: 1.05;
  /*color: var(--white);
  opacity: 0;
  animation: fadeUp .9s .4s forwards;*/
  color: transparent;
  background-image: url(../image/bg_text.png);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  /*padding: 0 100px 20px 0;*/
}
.category-title.faq { padding-right: 100px; }


.hero-image { padding-top: 0px; display: flex; justify-content: flex-end; }
.hero-image img { width: 100%; }
.contents-int { /*background: #f00; */}


/* ---- Submit button --------------------------------------- */
.contact-submit { margin-top: 50px; text-align: center; }
.btn-submit { display: inline-block; padding: 20px 72px; color: #000; cursor: pointer; position: relative; overflow: hidden; background: url(../image/bg_text.png) center center no-repeat; background-size: cover; border: none; transition: opacity 0.3s ease;  font-size: var(--fs-md); }
.btn-submit:hover { opacity: .8; }
@media (min-width: 769px) {
.contact-submit--confirm { display: flex; width: 700px; margin: 0 auto; justify-content: space-between; }
}



/* ---- ジュエリーオーダーバナー ---------------------------- */
.order {
  margin: 70px auto 0;
  padding: 20px 15px;
  max-width: 900px;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--white);

  /* 左右ダイヤアイコン */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  /* 上下グローライン */
  background-image:
    linear-gradient(to right, transparent, rgba(255,255,255,.8), transparent),
    linear-gradient(to right, transparent, rgba(255,255,255,.8), transparent);
  background-position: top center, bottom center;
  background-repeat: no-repeat;
  background-size: 30% 1px, 30% 1px;
  animation: order-lines 2.5s ease-in-out infinite alternate;
}

@keyframes order-lines {
  0%   { background-size: 30% 1px,   30% 1px;   opacity: .6; }
  100% { background-size: 70% 1.5px, 70% 1.5px; opacity: 1;  }
}

/* 左右のダイヤアイコン */
.order::before,
.order::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url('../image/icon_dia.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: order-twinkle 2s ease-in-out infinite alternate;
}

.order::after {
  animation-delay: 1s;
}

@keyframes order-twinkle {
  0%   { opacity: .3; transform: scale(.8);  }
  100% { opacity: 1;  transform: scale(1.3); }
}

/* -------------------------------------------------------------
   Footer
------------------------------------------------------------- */
#footer {
  margin-top: 60px;
  padding: 60px 0 40px;
  border-top: 1px solid #222;
  text-align: center;
}

.footer-logo {
  width: 220px;
  margin: 0 auto 20px;
}

.footer-copy {
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}

/* -------------------------------------------------------------
   Animations
------------------------------------------------------------- */
.reveal { opacity: 0; }
.reveal.visible { opacity: 1; transform: none; }

.reveal-up {
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94),
              transform .9s cubic-bezier(.25,.46,.45,.94);
}
.reveal-fade { transition: opacity 1.8s ease; }


.reveal-delay-1   { transition-delay: .15s; }
.reveal-delay-2   { transition-delay: .30s; }
.reveal-delay-3   { transition-delay: .45s; }

/* -------------------------------------------------------------
   Responsive — Tablet (≤ 1024px)
------------------------------------------------------------- */
@media (max-width: 1024px) {
  #header { padding: 0 24px; }
  .container { padding-inline: 24px; }
}

/* -------------------------------------------------------------
   Responsive — Mobile (≤ 768px)
------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --section-v: var(--section-v-sm);
  }

  .order { margin: 70px auto 0; padding: 20px 0; }


  #header { height: 70px; padding: 0 20px; justify-content: center; }
  .header-logo { position: absolute; left: 50%; transform: translateX(-50%); width: 140px; }
  .hamburger { position: absolute; right: 20px; }
  .category-title { margin-top: 60px; }
  .section-lead { margin: 0; padding: 0 5vw; line-height: 2; }


.page-header { padding-top: 70px; margin-bottom: 60px; }



  .global-nav,
  .btn-contact.desktop-only { display: none; }
.contact-submit { margin-top: 0px; }
  .hamburger { display: flex; }

  .container { padding-inline: 20px; }

  .page-hero__content { padding: 48px 24px; }
  .category-title   { font-size: clamp(2.2rem, 10vw, 3.2rem); }

  #footer { padding: 8vw 4.4vw 4.4vw 4.4vw; }
.footer-logo { width: 30vw; margin: 0 auto 20px; }

  .section-heading { margin-bottom: 45px; }
}