/* =========================
   gladto_style.css (FULL)
   ========================= */

:root{
  --beige:#e8dcc8;

  /* header */
  --menu-text:#fff;
  --menu-veil: rgba(0,0,0,.18);

  /* drawer (simple) */
  --drawer-bg: rgba(18,18,18,.86);
  --drawer-border: rgba(255,255,255,.12);
  --drawer-item-bg: rgba(255,255,255,.10);
  --drawer-item-border: rgba(255,255,255,.14);

  --radius: 16px;
  --shadow: 0 10px 28px rgba(0,0,0,.10);

  --kv-gap: 2px; /* KV→次コンテンツ（3〜5px推奨） */

  /* ここを触ると「PCメニュー高さ」を調整しやすい */
  --header-padY-desktop: 18px;  /* 例: 32px にするともっと伸びる */
  --navlink-padY-desktop: 10px;
}
.nav-link{
  /* 既存のまま… */
  font-family: "sicnews", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-link{
  /* 既存のまま… */
  font-family: "sicnews", sans-serif;
  font-weight: 400;   /* ← 600 から変更 */
  font-style: normal;
}

/* SHOPだけ太くしたいなら既存のままでOK */
.nav-shop{ font-weight: 700; }
.m-shop{ font-weight: 700; } /* ← 800が強すぎるなら700推奨 */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--beige);
  color:#111;
  font-family: "source-han-sans-japanese", system-ui, -apple-system, "Segoe UI", sans-serif;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =========================
   Menu Fade in motion
   ========================= */
html.wf-loading .nav-desktop,
html.wf-loading .nav-toggle,
html.wf-loading .header-logo,
html.wf-loading .nav-mobile{
  opacity: 0;
  transform: translateY(-4px);
}

html.wf-active .nav-desktop,
html.wf-active .nav-toggle,
html.wf-active .header-logo,
html.wf-active .nav-mobile,
html.wf-inactive .nav-desktop,
html.wf-inactive .nav-toggle,
html.wf-inactive .header-logo,
html.wf-inactive .nav-mobile{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
}

/* =========================
   Fade in motion
   ========================= */
.fade-in-left,
.fade-in-right{
  opacity: 0;
  transition:
    opacity 1.1s ease,
    transform 1.1s ease;
  will-change: opacity, transform;
}

.fade-in-left{
  transform: translateX(-40px);
}

.fade-in-right{
  transform: translateX(40px);
}

.is-ready .fade-in-left,
.is-ready .fade-in-right{
  opacity: 1;
  transform: translateX(0);
}

/* 少し時間差をつけたいとき */
.delay-1{ transition-delay: .15s; }
.delay-2{ transition-delay: .3s; }
.delay-3{ transition-delay: .45s; }



/* =========================
   Header
   ========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;

  display: flex;
  align-items: center;
  justify-content: center; /* PCは中央寄せ */

  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.18);

  /* wood bg（左右欠けない＋縦横比を崩さない） */
  background-image: url("../img/menu_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* ←ここが重要（100%100%の伸びをやめる） */

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* dark veil (wood is visible + white text readable) */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--menu-veil);
  pointer-events:none;
}
.site-header > *{ position:relative; }

/* ===== header small logo =====
   - PC(ワイド)では出さない
   - SPだけ表示
*/
.header-logo,
  .site-header .logo{
  display:none;               /* PC非表示 */
  align-items:center;
  text-decoration:none;
}
.header-logo img,
  .site-header .logo img{
  height:18px;                /* デカくならない */
  width:auto;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,.30));
}

/* PC nav */
.nav-desktop{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(10px, 1.8vw, 22px);

  max-width: 980px;
  margin: 0 auto;
}

/* link style */
.nav-link{
  position: relative;
  display:inline-block;
  text-decoration:none;
  padding: 8px 2px;
  font-size: 14px;
  white-space: nowrap;

  color: var(--menu-text);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* underline animation */
.nav-link::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:4px;
  height:2px;
  background: rgba(255,255,255,.92);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after{
  transform: scaleX(1);
}

.nav-shop{ font-weight: 700; }
.ext{ font-size:12px; margin-left:2px; opacity:.9; }

/* hamburger button (mobile only) */
.nav-toggle{
  display:none;
  margin-left:auto;
  border:0;
  background:transparent;
  color:#fff;
  font-size: 24px;
  line-height: 1;
  padding: 6px 10px;
  cursor:pointer;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* =========================
   Drawer (nav-mobile)
   ========================= */
.nav-mobile{
  position: fixed;
  top: 0;
  right: 0;

  width: min(560px, 92vw);      /* 幅広めOK */
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
	
  background-image: none !important;
  background: var(--drawer-bg) !important;

  border-left: 1px solid var(--drawer-border);

  /* ×と被らないように上を確保 */
  padding: 56px 14px 14px;

  z-index: 80;
}

.nav-mobile:not([hidden]){
  animation: drawerIn 260ms ease forwards;
}
@keyframes drawerIn{
  from{ transform: translateX(104%); opacity:0; }
  to  { transform: translateX(0);    opacity:1; }
}

/* Drawer close button */
.drawer-close{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;

  width: 44px;
  height: 44px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;

  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.drawer-close:hover{
  background: rgba(255,255,255,.14);
}

/* links inside drawer */
.m-link{
  display:block;
  padding: 10px 14px;  /* 14px → 10px */
  margin: 6px 0;       /* 10px → 6px */
  font-size: 14px;     /* 15px → 14px */
  border-radius: 12px; /* 14px → 12px */
  background: var(--drawer-item-bg);
  border: 1px solid var(--drawer-item-border);

  color:#fff;
  text-decoration:none;
  font-weight: 600;
}
.m-link:hover{ background: rgba(255,255,255,.14); }

/* =========================
   KV split
   ========================= */
.kv-split{
  display:grid;
  grid-template-columns: 1fr 2fr;
  width: 100%;
  margin: 0 0 var(--kv-gap) 0;
}

/* left logo area */
.kv-left{
  background: var(--beige);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(14px, 2.4vw, 34px);
}
.kv-logo-img{
  width: min(520px, 88%);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.18));
}

/* right KV photo area */
.kv-right,
#kvPhoto{
  position: relative;
  overflow: hidden;

  background-color:#000;
  background-image: url("../img/20251128-DSC05115.jpg"); /* fallback */
  background-size: cover;
  background-position: center;

  aspect-ratio: 16 / 9;
  min-height: 300px;
}

/* KV layers（※これが無いとJSで作ったdivが表示領域を持てない） */
.kv-layer{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  will-change: opacity;
}
.kv-back{ z-index: 0; }
.kv-front{
  z-index: 1;
  opacity: 1;
  transition: opacity 2200ms ease; /* JSと揃える */
}

/* =========================
   Main / SnapWidget
   ========================= */
.main{
  padding: 0 20px 40px;
}
.snapwidget-widget{
  display:block;
  width:100% !important;
  border:0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow:hidden;
}

/* =========================
   Social (FB / Ameblo)
   ========================= */
.social-grid{
  width: min(1100px, 100%);
  margin: 10px auto 0;
  padding: 0 20px 34px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.social-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.social-head{
  padding: 14px 16px 10px;
  background: rgba(255,255,255,.20);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.social-label{ font-size: 12px; letter-spacing: .12em; opacity: .75; }
.social-title{ margin: 6px 0 0; font-size: 16px; letter-spacing: .04em; font-weight: 700; }

.social-embed{ padding: 10px 10px 12px; }

.social-frame{
  display:block;
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: 14px;
  background: #fff;
}
.social-frame--blog{ height: 560px; }

.social-cta{
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration:none;
  color:#111;
  background: rgba(255,255,255,.70);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 800px){
  .site-header{
    justify-content: space-between;
  }
  .header-logo,
  .site-header .logo{
    display:inline-flex;
  }
  .nav-desktop{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  .kv-split{ grid-template-columns: 1fr; }
  .kv-left{ display:none; }
  .kv-right, #kvPhoto{
    aspect-ratio: 16 / 9;
    min-height: 260px;
  }

  .main{ padding: 0 12px 28px; }

  .social-grid{
    grid-template-columns: 1fr;
    padding: 0 12px 26px;
  }

  .header-logo img,
  .site-header .logo img{
    height: 22px; /* 好みで 20〜24 */
  }
}


/* =========================
   Header height (PC) + underline position
   ========================= */
@media (min-width: 801px){
  .site-header{
    padding-top: var(--header-padY-desktop);
    padding-bottom: var(--header-padY-desktop);
  }
  .nav-link{
    padding-top: var(--navlink-padY-desktop);
    padding-bottom: var(--navlink-padY-desktop);
  }
  .nav-link::after{
    bottom: 10px;
  }
}


/* =========================
   About page (editorial)
   - no white card, only lines + typography
   ========================= */

.page-about{
  padding: 22px 0 60px;
}

.about-wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 50px;
}

.about-grid{
  display: grid;
  grid-template-columns: 1.45fr 0.55fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px){
  .about-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Photo: avoid vertical crop (use <img>, not background cover) */
.about-photo{
  border-radius: 0px;
  overflow: visible;
  /* keep it clean */
  box-shadow: none;
  background: transparent;
  margin: 0;
}

.about-photo img{
  width: 100%;
  height: auto;
  /* prevent it from getting too tall on very wide screens */
  max-height: 78vh;
  object-fit: contain;
  border-radius: 0;
}

/* Text column (no rectangle) */
.about-card{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* small label with lines (like magazine section label) */
.about-kicker{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}

.about-kicker::before,
.about-kicker::after{
  content:"";
  height: 1px;
  background: rgba(0,0,0,.18);
  flex: 1;
}

.about-kicker span{ white-space: nowrap; }

.about-title{
  margin: 0 0 16px;
  font-size: 44px;
  letter-spacing: .01em;
  line-height: 1.12;
}

/* one clean rule under title */
.about-rule{
  margin-top: 12px;
  height: 1px;
  background: rgba(0,0,0,.18);
}

.about-text{
  font-size: 15px;
  line-height: 1.45;
}

.about-text p{
  margin: 8px 0 18px;
}

/* tweak for smaller screens */
@media (max-width: 600px){
  .about-title{ font-size: 34px; }
  .about-text{ font-size: 15px; line-height: 1.95; }
}


/* =========================
   Social (editorial style like ABOUT)
   - remove card rectangle
   - use ABOUT kicker (line - text - line)
   ========================= */
.social-card--editorial{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.social-card--editorial .social-embed{
  padding: 0;
}

/* small caption under the kicker (optional) */
.social-card--editorial .social-caption{
  margin: 6px 0 12px;
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .75;
}

/* keep iframe readable, but don’t add a “card” */
.social-card--editorial .social-frame{
  border-radius: 0;
}

/* CTA: separate with a simple rule (not a rectangle) */
.social-card--editorial .social-cta{
  padding: 12px 0 0;
  border-top: 1px solid rgba(0,0,0,.18);
  margin-top: 12px;
}


/* =========================
   Category pages (Men’s / Women’s)
   - simple, image-first
   ========================= */
.page-category{
  padding: 22px 0 60px;
}

.category-wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 50px;
}

@media (max-width: 800px){
  .category-wrap{ padding: 0 18px; }
}

.category-kicker{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}
.category-kicker::before,
.category-kicker::after{
  content:"";
  height: 1px;
  background: rgba(0,0,0,.18);
  flex: 1;
}
.category-kicker span{ white-space: nowrap; }

.category-hero{ margin: 0; }

.category-hero img{
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain; /* no crop */
}

.category-note{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.8;
  opacity: .85;
}


.green-qr{
  margin: 28px auto 0;
  text-align: center;
}

.green-qr a{
  display: inline-block;
}

.green-qr img{
  width: min(220px, 42vw);
  height: auto;
}

.green-qr-text{
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .78;
}

@media (max-width: 800px){
  .green-qr img{
    width: min(180px, 56vw);
  }
}
.category-text{
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.category-text-lead{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .72;
}


.category-text p{
  margin: 8px 0 18px;
}
.brand-list{
  display: inline-block; /* 全体を中央に置く */
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;      /* 文字は左揃え */
  columns: 2;
  column-gap: 40px;
}

.brand-list li{
  margin: 0 0 6px;
  break-inside: avoid;
  min-width: 180px;
}


.brand-list li::before{
  content: "・";
  margin-right: .2em;
}
.category-note-end{
  margin-top: 18px;
  text-align: right;
  font-size: 12px;
  opacity: .72;
}

@media (max-width: 700px){
  .category-text{
    font-size: 14px;
    line-height: 1.45;
	}.brand-list{
    columns: 1;
  }}
	

@media (max-width: 600px){
  .category-text{
    font-size: 15px;
    line-height: 1.95;
  }
}

/* =========================
   Content fade motion
   ========================= */
/* 読み込み時に出す用 */
.intro-left,
.intro-right{
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
  will-change: opacity, transform;
}
.intro-left{ transform: translateX(-30px); }
.intro-right{ transform: translateX(30px); }

body.is-ready .intro-left,
body.is-ready .intro-right{
  opacity: 1;
  transform: translateX(0);
}

/* スクロール発火用 */
.scroll-left,
.scroll-right{
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.scroll-left{ transform: translateX(-30px); }
.scroll-right{ transform: translateX(30px); }

.scroll-left.in-view,
.scroll-right.in-view{
  opacity: 1;
  transform: translateX(0);
}

/* 縦長1枚画像用 */
.intro-up{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: opacity, transform;
}

body.is-ready .intro-up{
  opacity: 1;
  transform: translateY(0);
}


/* Greengladto用 */

.green-copy{
  max-width: 760px;
  margin: 28px auto 0;
}

.green-copy-title{
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .02em;
}
.green-copy .about-text{
  text-align: left;
}

@media (max-width: 600px){
  .green-copy{
    margin-top: 22px;
  }

  .green-copy-title{
    font-size: 15px;
  }
}


.about-card .green-qr{
  margin-top: 24px;
  text-align: left;
}

.about-card .green-qr img{
  width: min(190px, 42vw);
}

.about-card .green-qr-text{
  margin: 10px 0 0;
}

.about-card .category-note-end{
  margin-top: 14px;
  text-align: right;
}

@media (max-width: 900px){
  .about-card .green-qr{
    text-align: center;
  }

  .about-card .category-note-end{
    text-align: center;
  }
}






.kv-brand-lockup{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: center;
}

.kv-brand-sub{
  font-size: 14px;
  letter-spacing: .18em;
  opacity: .72;
  margin: 0;
  font-family: "sicnews", sans-serif;
font-weight: 400;
font-style: normal;
	color: white;
	text-shadow: 0 1px 4px rgba(0,0,0,.68);
}

.kv-brand-read{
  font-size: 14px;
  letter-spacing: .08em;
  opacity: .78;
  margin: 0;
  font-family: "sicnews", sans-serif;
font-weight: 400;
font-style: normal;
	color: white;
	text-shadow: 0 1px 4px rgba(0,0,0,.68);
}

.kv-brand-main{
  font-family: "sicnews", sans-serif;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1;
  letter-spacing: .04em;
  margin-top: 4px;
}

/* =========================
   Header brand reading
   ========================= */
.header-brand-read{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.header-brand-sub,
.header-brand-read-text{
  font-family: "sicnews", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.header-brand-logo{
  height: 28px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,.30));
}

/* PCでは不要なら非表示のまま */
@media (max-width: 800px){
  .header-brand-read{
    display: inline-flex;
  }

  .header-logo{
    display: none !important;
  }

  .site-header{
    justify-content: space-between;
  }

  .header-brand-logo{
    height: 26px;
  }
}





.about-mini-info{
  margin-top: 18px;
  padding-top: 2px;
}

.about-mini-label{
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .16em;
  opacity: .68;
}

.about-mini-name{
  margin: 0 0 10px;
  font-family: "sicnews", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.15;
}

.about-mini-info p{
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0,0,0,.72);
}

@media (max-width: 600px){
  .about-mini-info p{
    font-size: 14px;
    line-height: 1.75;
  }

  .about-mini-name{
    font-size: 17px;
  }
}



@media (max-width: 800px){
  .kv-split{
    overflow: hidden;
  }

  .kv-right.intro-right,
  #kvPhoto.intro-right{
    transform: translateX(0);
  }

  body.is-ready .kv-right.intro-right,
  body.is-ready #kvPhoto.intro-right{
    transform: translateX(0);
  }
}