/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; }
:root{
  --header-h: 64px;
  --max: 1200px;
  --pad: clamp(16px, 3vw, 32px);
  --space: clamp(40px, 8vw, 96px);
  --about-visual-offset: clamp(16px, 2.5vw, 40px);
  --about-wrap-offset: clamp(50px, 2.5vw, 74px);
}
body {
  background-color: #000; color: #aaa; font-family: serif; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ol, ul { list-style: none; }
section { padding-block: var(--space); }
.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* ===== Header ===== */
header { position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 10; background: transparent; }
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; padding-inline: var(--pad); }
.top-icon h1{
  margin: 0; font-size: clamp(22px, 2.2vw, 30px);
  background: repeating-linear-gradient(0deg,#B67B03 .1em,#DAAF08 .2em,#FEE9A0 .3em,#DAAF08 .4em,#B67B03 .5em);
  -webkit-background-clip: text; color: transparent;
}
.menu nav ul { display: flex; align-items: center; gap: 8px; }
nav a { display: inline-block; padding: 10px 14px; color: rgba(255,255,255,.6); font-size: 16px; font-weight: 800; }
nav a:hover { color: #fff; }
/* PCの通常表示：横並び */
.menu{ position: static; background: transparent; padding-top: 0; height: auto; box-shadow: none; }
.menu nav ul{ display:flex; flex-direction: row; align-items:center; gap: 8px; margin:0; padding:0; }
.menu nav li{ width: auto; }
.menu nav a{ display:inline-block; padding: 10px 14px; line-height: 1.6; border: 0; rgba(255,255,255,.6); font-size: 18px; font-weight: 800; }
.menu nav a:hover { color: #fff; }

.hamburger, .black_bg { display: none; }

/* main spacing */
main { padding-top: var(--header-h); }

/* ===== Hero ===== */
.hero { position: relative; min-height: 75svh; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; }
.hero::before{
  z-index: 0;
  background-image:
    linear-gradient(to bottom, transparent 0%, transparent 35%, rgba(0,0,0,0.9) 100%),
    url("https://github.com/moonfc/gkong_hp/blob/main/pic/studio2.jpg?raw=true");
  background-size: cover; background-position: center;
}
.hero::after{ z-index: 1; background-color: #000; opacity: .6; }
.hero-content{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  overflow: hidden;           
  z-index: 3;
  padding-block: 24px;
}
.marquee__track{
  display: flex;
  width: max-content;      
  white-space: nowrap;
  will-change: transform;
  animation: marquee 40s linear infinite;  
}
.marquee__text{
  font-size: clamp(48px, 12vw, 180px);
  font-family: sans-serif;
  opacity: .3;
  background: repeating-linear-gradient(0deg,#B67B03 .1em,#DAAF08 .2em,#FEE9A0 .3em,#DAAF08 .4em,#B67B03 .5em);
  -webkit-background-clip: text;
  color: transparent;
  padding-right: clamp(24px, 4vw, 64px);
}

@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 2連トラックの半分＝“1本分”だけ左へ */
}

/* 動きを抑制したいユーザー向け */
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; transform: none; }
}
/* SR専用見出し（任意） */
.sr-only{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.homelogo{ position: absolute; right: clamp(8px, 2vw, 16px); bottom: clamp(48px, 8vh, 120px); z-index: 0; opacity: .25; filter: grayscale(100%); pointer-events: none; }
.homelogo img{ width: clamp(140px, 22vw, 280px); }

.scrolldown1{ position:absolute; left:50%; transform: translateX(-50%); bottom: 8px; height:50px; z-index: 3; }
.scrolldown1 span{ position: absolute; left:50%; transform: translateX(-50%); top: -18px; color:#eee; font-size:.95rem; letter-spacing:.05em; }
.scrolldown1::after{ content:""; position:absolute; left:50%; transform: translateX(-50%); width:1px; height:40px; background:#eee; animation: pathmove 1.4s ease-in-out infinite; opacity:0; }
@keyframes pathmove{ 0%{height:0; top:0; opacity:0;} 30%{height:30px; opacity:1;} 100%{height:0; top:50px; opacity:0;} }

/* ===== About ===== */
#about { position: relative; z-index: 1; } 
#hoge { position: relative; } 
#hoge .particles-js-canvas-el{ position:absolute; inset:0; z-index: 0; } 
/* --- About 横並びレイアウト --- */

/* グリッドの親＝.about-visual に変更（2カラム：左=画像束、右=テキスト） */
.about-visual{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* 左カラム：画像束（重ねる用の“箱”） */
.about-wrap{
  position: relative;       /* 絶対配置の基準 */
  grid-column: 1;
  margin-top: var(--about-wrap-offset);
  overflow: hidden;
}

/* 右カラム：テキスト */
.aboutText{
  grid-column: 2;
  display: grid;
  gap: 12px;
}

/* 画像の重ね（枠＝img2 を写真の上に） */
.about-wrap .img1{ position: relative; z-index: 1; }
.about-wrap .img1 img{
  display:block; 
  width:100%; 
  height:100%; 
  transform: scale(0.875);          /* 0.99～0.97 で微調整 */
  transform-origin: center;
  object-fit: cover;
  border-radius:8px; 
}

.about-wrap .img2{
  position: absolute;
  inset: 0;
  transform: scale(1.015);  /* 額縁を少し左上へ（好みで調整） */
  transform-origin: center;
  pointer-events: none;
  opacity: .95;
  z-index: 2;                      /* 枠を前面。後ろにしたいなら 0～1 に */
}
.about-wrap .img2 img{
  display:block;
  width:100%;
  height:100%;
  object-fit: contain;
}

.aboutText{ grid-column: 2; grid-row: 1; display: grid; gap: 12px; } 
.aboutText h2{ font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; letter-spacing:.05em; background-image: linear-gradient(0deg,#b8751e 0%,#ffce08 37%,#fefeb2 47%,#fafad6 50%,#fefeb2 53%,#e1ce08 63%,#b8751e 100%); -webkit-background-clip: text; color: transparent; } 
.aboutText p{ font-size: clamp(14px, 1.8vw, 16px); line-height: 1.9; background: rgba(10,10,10,.75); padding: 10px 16px; border-radius: 6px; white-space: normal; }

/* ===== Gallery（崩れ対策） ===== */
#gallery { padding-top: 40px; }
#gallery h3 { font-family: 'Raleway', sans-serif; text-align: center; font-weight: 200; margin: 0; padding: .8em 0; }
#gallery h2 { font-size: clamp(28px, 5vw, 56px); }
#gallery h3 { color: #888; font-size: clamp(16px, 2.2vw, 24px); }

.gallery h2{
  font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; letter-spacing:.05em;
  background-image: linear-gradient(0deg,#b8751e 0%,#ffce08 37%,#fefeb2 47%,#fafad6 50%,#fefeb2 53%,#e1ce08 63%,#b8751e 100%);
  -webkit-background-clip: text; color: transparent;
}

/* 3カラム→1カラム。最小幅を持たせて崩れ防止 */
.gallery-contents ul{
  --gap: clamp(16px, 2.5vw, 24px);
  display:flex; flex-wrap:wrap; gap: var(--gap);
  max-width: var(--max); margin: 0 auto; padding-inline: var(--pad);
}
.gallery-contents li{
  flex: 1 1 320px;            /* 最小幅320pxを確保 */
  max-width: calc(33.333% - var(--gap));
}
.list-item img{ width:100%; border-radius:5px; }
.list-tit{
  font-size: clamp(22px, 3.5vw, 40px); white-space: nowrap;
  background-image: linear-gradient(0deg,#b8751e 0%,#ffce08 37%,#fefeb2 47%,#fafad6 50%,#fefeb2 53%,#e1ce08 63%,#b8751e 100%);
  -webkit-background-clip: text; color: transparent;
}
/* デフォルトはPCで全開表示にしておく（高さauto） */
.list-content{ height: auto; overflow: visible; transition: height .3s ease; }
.list-txt{ line-height:1.7; color:#aaa; background: rgba(20,20,20,.8); font-size:16px; max-width:38ch; padding:14px; margin-top:16px; border-radius:6px; }

/* ===== Instagram ===== */
.instagram ul{ display:flex; flex-wrap:wrap; gap: clamp(12px,2vw,16px); max-width: var(--max); margin:0 auto; padding-inline: var(--pad); }
.instagram li{ flex: 1 1 calc(33.333% - 12px); min-width: 220px; }
.instaText{ padding-inline:5px; }
.instaText:hover{ color:#fff; font-weight:700; }

/* ===== Price（崩れ対策） ===== */
#gallery h2, #price h2, #contact h2, #access h2{
  text-align:center; font-size: clamp(32px, 6vw, 60px); letter-spacing:.2em;
  background: repeating-linear-gradient(0deg,#B67B03 .1em,#DAAF08 .2em,#FEE9A0 .3em,#DAAF08 .4em,#B67B03 .5em);
  -webkit-background-clip:text; color:transparent;
}
.price-table{ max-width: 1000px; margin:0 auto; padding-inline: var(--pad);
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px; }
.t-price, .w-price{ padding:24px; background: rgba(20,20,20,.35); border-radius:8px; }

/* テーブルは幅固定・折返し前提で崩れ防止 */
.price-table table{ width:100%; border-collapse: collapse; table-layout: fixed; }
.price-table th, .price-table td{
  padding:10px 12px; text-align:left; vertical-align: top;
  white-space: normal; word-break: break-word; /* ← nowrap を撤廃 */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ===== Contact（ラベルとアイコンの行対応）===== */
#contact img{ width:100%; max-width:400px; }
.contact-contents{
  display:grid;
  grid-template-columns: 1.2fr min-content 1fr; /* ラベル / アイコン / 画像 */
  gap: 24px; align-items: start;
}
.contact-labels{ display:grid; gap: 16px; }
.contact-contents p{ margin:0; padding:0; text-align:right; }
.sns-link{
  display:grid; grid-auto-rows: minmax(36px, auto);
  gap: 16px; align-content: start; padding: 0;
}
.icon-wrap{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.phone-icon{ padding:5px; } .instagram-icon{ padding:4px 5.5px; } .line-icon{ padding:4px 5.5px; }
.icon-wrap:hover{ border-radius:25%; }
.icon-wrap:hover.phone-icon{ background:#f0b106; }
.icon-wrap:hover.instagram-icon{
  background: radial-gradient(circle farthest-corner at 32% 106%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), linear-gradient(135deg, #234bd7 12%, #c33cbe 58%);
}
.icon-wrap:hover.line-icon{ background:#00B900; }
.contact-visual{ align-self: start; }

/* ===== Access ===== */
.access-contents{ max-width: 1000px; margin:0 auto; padding-inline: var(--pad);
  display:grid; grid-template-columns: 1.2fr 1fr; gap:24px; margin-top: clamp(24px, 6vw, 60px); }
.access-contents h3{ text-align:left; padding:0 0 8px 0; }
.access-contents p{ letter-spacing:.1em; line-height:2; font-family:'Raleway',sans-serif; font-weight:200; }
.access-contents p:hover{ color:#fff; }
.googlemap-bw iframe{ width:100%; height:320px; filter: grayscale(100%); transition: filter .7s ease; border:0; }
.googlemap-bw iframe:hover{ filter: grayscale(0%); }

/* ===== Footer ===== */
footer{ color:#aaa; padding:80px 0 20px; text-align:center; z-index:10; }

/* ===== Mobile (<= 859px) ===== */
@media (max-width: 859px){
  .hamburger{ position:absolute; right:15px; top:8px; width:50px; height:50px; cursor:pointer; z-index:300; display:block; }
  .hamburger_border{ position:absolute; left:11px; width:25px; height:2px; background:#fff; transition:.6s; }
  .hamburger_border_top{ top:15px; } .hamburger_border_center{ top:23px; } .hamburger_border_bottom{ top:31px; }

  .black_bg{
    position:fixed; inset:0; z-index:100; background:#333;
    opacity:0; visibility:hidden; transition:.4s; cursor:pointer; display:block;
  }

  /* オフキャンバス（閉） */
  .menu{
    position:fixed; top:0; right:-320px; width:300px; height:100vh;
    padding-top:60px; background:#000; transition:right .6s; z-index:200;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: -8px 0 24px rgba(0,0,0,.5);
  }

  /* 縦並びに切り替え */
  .menu nav ul{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .menu nav li{ width:100%; }
  .menu nav a{ display:block; width:100%; padding:12px 16px; text-align:center; border-bottom:1px solid #eee; }

  /* 開いた状態 */
  body.menu-open .menu{ right:0; }
  body.menu-open .black_bg{ opacity:.8; visibility:visible; }
  body.menu-open{ overflow:hidden; touch-action:none; } /* 背景スクロール防止（任意） */

  /* ハンバーガー変形（任意） */
  body.menu-open .hamburger_border_top{ transform:rotate(45deg); top:20px; }
  body.menu-open .hamburger_border_center{ width:0; left:50%; }
  body.menu-open .hamburger_border_bottom{ transform:rotate(-45deg); top:20px; }
}


/* ===== Small Mobile (<= 600px) ===== */
@media (max-width: 600px){
  .hero{ min-height: 65svh; }
  .hero-content{
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .homelogo{ opacity: .18; }
  .homelogo img{ width: clamp(120px, 28vw, 220px); }

  /* About: 画像→テキスト */
  .about-wrap{ grid-template-columns: 1fr; }
  #about .img1, #about .img2{ grid-row: 1; }
  .aboutText{ grid-column: 1; grid-row: 2; margin-top: clamp(16px, 4vw, 24px); }

  /* Gallery: 1カラム固定＆アコーディオン開始高さ0 */
  .gallery-contents li{ flex: 1 1 100%; max-width: 100%; }
  .list-content{ height: 0; overflow: hidden; }   /* ← モバイルのみ閉じる */
  .list-content.active{ height: auto; }           /* JSのauto対応保険 */

  /* Price: 1カラム */
  .price-table{ grid-template-columns: 1fr; }

  /* Contact: ラベル/アイコン2列維持、画像は下段 */
  .contact-contents{ grid-template-columns: 1fr min-content; }
  .contact-visual{ grid-column: 1 / -1; margin-top: 16px; }

  /* Access: 1カラム */
  .access-contents{ grid-template-columns:1fr; }
}