/* === Loader === */
#loader{position:fixed; inset:0; display:grid; place-items:center; z-index:9999; background:#000; transition:opacity .8s ease;}
#loader.hidden{opacity:0; pointer-events:none;}
#main.hidden{display:none;}

.loader-layer{position:absolute; inset:0;}
.loader-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:photoInOut 2.4s ease-in-out forwards;}
@keyframes photoInOut{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}
.loader-gradient{position:absolute; inset:0; background: radial-gradient(circle at center,#8B5696 23%,#A664AC 46%,#272943 74%,#30244D 92%); opacity:0; animation:gradInOut 2.4s ease-in-out forwards;}
@keyframes gradInOut{0%{opacity:0}15%{opacity:.8}70%{opacity:.8}100%{opacity:0}}

.loader-logo{position:relative; text-align:center; color:#fff; opacity:0; transform:translateY(6px); animation:logoIn 1.2s ease .4s forwards;}
.loader-logo img{width:min(42vw,260px); margin:0 auto 4px;}
.loader-logo .tagline{font-family:'Jost',sans-serif; font-weight:400; margin-top:-40px; font-size:clamp(12px,1.6vw,16px); letter-spacing:.1em; opacity:.9;}
@keyframes logoIn{from{opacity:0; transform:translateY(8px) scale(.98)}60%{opacity:1; transform:translateY(0) scale(1.02)}to{opacity:1; transform:translateY(0) scale(1)}}

/* === ベース（PC用） === */
		*{box-sizing:border-box}
		body{font-family:'Jost',sans-serif; margin:0; background:#000;}
		header,main,footer{position:relative; margin:0 auto; padding:0 40px;}
		h1,h2,h3,p{margin:0 0 1em;}


/* 背景（Service以降） */
		.bg-scope{position:relative; isolation:isolate;}
		.bg-scope::before{content:""; position:fixed; inset:0; z-index:-10; background:url("../img/bg.jpg") center/cover no-repeat; pointer-events:none;}

		/* footerは別背景 */
		.site-footer{position:relative; z-index:1; background:#0B0B10; padding:0; text-align:center;}

/* footerは別背景 */
	.site-footer {
	  position: relative;
	  z-index: 1;
	  background: #0B0B10; /* ←別の背景色や画像に変更可能 */
	  padding: 0px;
	  text-align: center;
	}


/* Works グリッド例 */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* === タブレット以下 (max-width: 768px) === */
		@media (max-width: 768px) {
		  header, main, footer {
			padding: 0 20px;
		  }

		  .works-grid {
			grid-template-columns: repeat(2, 1fr); /* 2列 */
			gap: 20px;
		  }

		  h1 { font-size: 2rem; }
		  h2 { font-size: 1.6rem; }
		  p  { font-size: 0.95rem; }
		}

		/* === スマホ小 (max-width: 480px) === */
		@media (max-width: 480px) {
		  header, main, footer {
			padding: 0 12px;
		  }

		  .works-grid {
			grid-template-columns: 1fr; /* 1列 */
		  }

		  h1 { font-size: 1.6rem; }
		  h2 { font-size: 1.3rem; }
		  p  { font-size: 0.85rem; }

		  .tagline {
			font-size: 12px;
			letter-spacing: 0.02em;
		  }

		  .loader-logo img {
			width: 180px;
		  }
		}

		/*topページ*/
		/* レスポ基準 */
		.container{max-width:1200px;margin:0 auto;padding:0 40px}
		@media (max-width:768px){.container{padding:0 20px}}
		@media (max-width:480px){.container{padding:0 12px}}


		/* コンテナ */
		.container{max-width:1200px;margin:0 auto;padding:0 40px}
		@media (max-width:768px){.container{padding:0 20px}}
		@media (max-width:480px){.container{padding:0 12px}}


/* === Header（上から降りる） === */
.site-header{
  position:fixed; top:0; left:0; width:100%; height:64px; opacity: 0.5;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; background:rgba(0,0,0,.72);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:3000;
}
.site-header.animate {  opacity:0;
  transform:translateY(-24px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.site-header.show{opacity:1; transform:translateY(0);}



/* ロゴ-ナビ */
.logo{font-family:'Lexend Zetta',system-ui,sans-serif; font-weight:400; font-size:clamp(16px,2.6vw,16px); letter-spacing:.08em; text-decoration:none; color:#CCC;}
.nav-desktop{display:flex; gap:28px; align-items:center;}
.nav-link{color:#CCC; text-decoration:none; opacity:.9; letter-spacing:.3em; transition:letter-spacing .3s ease, opacity .3s ease;}
.nav-link:hover{letter-spacing:.4em; opacity:1}

/* ハンバーガー */
.burger{display:none; position:relative; width:28px; height:24px; background:transparent; border:0; cursor:pointer}
.burger span{position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px; transition:transform .35s ease, opacity .35s ease}
.burger span:nth-child(1){top:3px} .burger span:nth-child(2){top:11px} .burger span:nth-child(3){top:19px}
.burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:768px){.burger{display:block} .nav-desktop{display:none}}


/* SPドロワー */
@media (min-width:768px){.nav-drawer{display:none!important} .menu-toggle{display:none!important}}
.drawer{display:none; position:fixed; inset:0; z-index:2900; background:rgba(0,0,0,.6); backdrop-filter:blur(6px)}
.drawer.is-open{display:block}
.nav-drawer{position:fixed; inset:0 0 0 auto; width:min(84vw,360px); background:rgba(0,0,0,.60); backdrop-filter:blur(3px) saturate(120%); transform:translateX(100%); transition:transform .38s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; justify-content:flex-start; padding:88px 28px 24px; z-index:3001;}
.nav-drawer.is-open{transform:translateX(0)}
html.no-scroll, html.no-scroll body{overflow:hidden}
.drawer-close{position:absolute; top:20px; right:20px; background:none; border:none; cursor:pointer; z-index:10}
.drawer-close img{width:28px; height:28px; filter:brightness(0) invert(1)}
.nav-mobile{display:flex; flex-direction:column; gap:20px}
.drawer-item{color:#fff; text-decoration:none; font-size:clamp(18px,6vw,28px); letter-spacing:.4em}
.drawer-sns{display:flex; gap:16px; align-items:center; margin-top:32px}
.drawer-sns a{color:#fff; opacity:.9}
.drawer-sns a:hover{opacity:1}



/* ===== HERO レイアウト ===== */
.hero, .kv, .top-hero{
  position: relative;
  z-index: 1;
}

/* ロゴは更に前面（必要なら） */
.hero-logo, .kv-logo{
  position: relative;
  z-index: 2;
}

/* === HERO（3.5秒で“浮かび上がる”） === */
.hero{
  position:relative; min-height:72vh; display:grid; place-items:center; overflow:hidden;
  margin-top:64px; /* 固定ヘッダー分 */
  opacity:0; filter:blur(10px);
  transition:opacity 3.5s ease, filter 3.5s ease; /* ←ゆっくり */
}
.hero.show{opacity:1; filter:blur(0)}

.hero-slides{position:absolute; inset:0; opacity:0.7}
.slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease}
.slide.is-active{opacity:0.6}


.slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.slide.is-active{ opacity:1; }

/* ===== ヒーローのロゴ＋サブコピー ===== */
.hero-head{
  position:absolute; left:50%; bottom:10%; transform:translateX(-50%);
  text-align:center; color:#fff; opacity:0;
  animation:fadeInScale 1.2s ease 2.2s both; /* ローダー後にふわっと */
}
.hero-logo{
  position:absolute;  left:50%;  top:80%;  transform:translate(-50%,-50%); /* 中央基準 */
  text-align:center;  z-index:3; /* スライドより前 */
  /* ローディング後のフェード用（初期は透明） */
  opacity:0; 
  filter:blur(6px);
  transition:opacity 2.5s ease, filter 2.5s ease;
}

/* ローディング後、hero に .show が付く想定（loader.js から付与） */
.hero.show .hero-logo{
  opacity:1;
  filter:blur(0);
}

/* ロゴ画像は横幅ベースで可変 */
.hero-mark{
  display:block;
  width:min(48vw, 300px);
  height:auto;

}

/* サブコピーは中央揃え・ロゴの下に一定の余白だけ */
.tagline{
  margin-top:-15%;
  font-family:"Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  font-size:16px;
  letter-spacing:.08em;
  color:#fff;
  opacity:.92;
}

/* app-readyの保険（既存意図を踏襲） */
html.app-ready .hero-head{animation:fadeInScale 1.2s ease 2.2s both}
html.app-ready .hero-tagline{animation:fadeInScale 1s ease 2.4s both}
@keyframes fadeInScale{0%{opacity:0; transform:translate(-50%,8px) scale(.98)}60%{opacity:1; transform:translate(-50%,0) scale(1.02)}100%{opacity:1; transform:translate(-50%,0) scale(1)}}


/* レスポンシブ微調整 */
@media (max-width:768px){header,main,footer{padding:0 20px}}
@media (max-width:480px){
  header,main,footer{padding:0 12px}
  .hero{min-height:64vh}
  .hero-logo{width:180px}
  .hero-tagline{font-size:12px; letter-spacing:.02em; margin-top:-4px}
}

}
/* ローディングで使っていたキーフレーム（共通化） */
@keyframes fadeInScale{
  0%   { opacity:0; transform:translateY(8px) scale(.98) }
  60%  { opacity:1; transform:translateY(0)   scale(1.02) }
  100% { opacity:1; transform:translateY(0)   scale(1) }
}



/* レスポンシブ微調整 */
@media (max-width:480px){
  .hero{ min-height:64vh; }
  .hero-logo{ width: 180px; }
  .hero-tagline{ font-size:12px; letter-spacing:.02em; }
}

/* 動きを控える設定 */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .slide{ opacity:1!important }
}

/*-------------コンテンツ本文*-------------/
/* ===== 共通 ===== */
.section {
  padding: 56px 0;
  text-align: center;
  width: 100%;
 
  overflow: hidden;
}



/* ===== Serviceカード ===== */
.service-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 0;
  border-radius: 16px;
  box-shadow: inset 0 4px 96px rgba(255,255,255,0.25);
}

.service-grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 4px;
}

.service-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100px;
}

.service-ic {
  width: 30px;
  height: 30px;
}

.service-label {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: #ccc;
}

/* ========== About ========== */
.about { 
  padding: clamp(0px, 0.1vw, 0px) 0; margin: 0;
  position: relative;
}

.sec-ttl{
  font-family: "Lexend Zetta", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 3.2vw, 20px);
  letter-spacing: .12em;
  color: #CCC;
  text-align: center;
  padding-bottom: 16px;
  margin: 0 clamp(32px, 5vw, 60px);
}

.about-hero{
  position: relative;
  max-width: 100%;height: auto; 
  margin-left: -150px ; padding: 0;
}


/* すりガラスカード（画像の上に重ねる） */
.glass-card{
  position: absolute;
  right: 5%;
  top: 16%;
  width: clamp(280px, 42vw, 700px);
  border-radius: 32px;
  z-index: 3;

  /* ガラス本体 */
  background: linear-gradient(223deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.12) 100%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 4px 96px rgba(255,255,255,.25),   /* 内側の白い霞 */
    0 10px 40px rgba(0,0,0,.25);              /* 外側の落ち影 */

  /* ぼかし & 彩度UP（対応ブラウザ） */
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

/* 薄い縁取りのグラデボーダー（擬似要素） */
.glass-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1px;               /* 枠の太さ */
  background: linear-gradient(223deg, rgba(255,255,255,.35), rgba(255,255,255,.1));
  -webkit-mask: 
     linear-gradient(#000 0 0) content-box, 
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.glass-inner{
  padding: clamp(32px, 5vw, 80px) clamp(24px, 4.5vw, 64px);
  text-align: center;
}

.glass-inner .eyebrow{
  font-family: "Noto Sans JP", system-ui, sans-serif;
  color: #CCC;
  font-size: clamp(10px, 1.6vw, 16px);
  letter-spacing: .18em;
  margin: 0 0 0px;
}

.glass-inner .sub{
	  font-family: "Jost", system-ui, sans-serif;
  color: #CCC;
  font-weight: 300;
  font-size: clamp(12px, 2.2vw, 20px);
  letter-spacing: .12em;
  margin: 0 0 clamp(8px, 2vw, 16px);
}

/* ボタン（既存のトーンに合わせた発光＋トラッキング） */
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 180px;
  height: 64px;
  padding: 0 28px;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-family: "Jost", system-ui, sans-serif;
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: var(--track);
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(18,18,28,.35);
  box-shadow:
    inset 0 0 0 rgba(255,255,255,0),
    0 10px 30px rgba(0,0,0,.25);
  transition: 
    letter-spacing .28s ease,
    box-shadow .28s ease,
    transform .28s ease,
    background .28s ease;
}

.btn-outline:hover{
  track: .6em;
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.15),
    0 14px 40px rgba(0,0,0,.35);
}

/* Backdropが使えない環境のフォールバック（濃い透明） */
@supports not ((backdrop-filter: blur(10px))){
  .glass-card{
    background: rgba(30,30,40,.6);
  }
}

/* ====== SP: カードを画像下部に重ねて見やすく ====== */
@media (max-width: 768px){
  .about { padding: 56px 0; }
  .glass-card{
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 4%;
    transform: translateX(-50%);
    width: min(92%, 560px);
    border-radius: 24px;
  }
  .glass-inner{ padding: 28px 24px; }
}

/* 動きを苦手とするユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .btn-outline{ transition: none; }
} 

/* ===== Works ===== */
.works{
  position: relative; isolation: isolate; overflow: hidden;
}

.works-list {
  display: grid;
  gap: 56px;
  max-width: 1000px;
  margin: 0 auto;
}

.work-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 36px;
  position: relative;
}

.work-thumb img {
  width: 800px;
  max-width: 100%;
  border-radius: 24px;
  box-shadow: 0 0 40px #291E2F;
}

.work-cap {
  max-width: 480px;
  text-align: left;
  margin: auto 0;
}

.work-num {
  font-size: 92px;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  color: #55495C;
  opacity: 0.6;
}

.work-cat {
  font-size: 42px;
  font-family: 'Lexend Exa', sans-serif;
  color: #55495C;
  text-transform: uppercase;
}

.work-desc {
  font-size: 16px;
  font-family: 'Jost', sans-serif;
  color: #ccc;
  margin-top: 12px;
}



/* =========================
   Service カード（ガラス調）
   ========================= */
.service-card {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 0;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 4px 96px rgba(255,255,255,0.25),
    0 10px 40px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  overflow: hidden;
}
.service-card::after {
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 30%),
    radial-gradient(100% 60% at 50% 0%, rgba(255,255,255,0.18), transparent 70%);
  mix-blend-mode: screen;
  opacity:.75;
}

/* グリッド微調整（Figma gap=32/16に近づける） */
.service-grid{
  list-style:none; margin:0; padding:0 16px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: 16px 8px;
}
.service-item{ display:flex; flex-direction:column; align-items:center; gap:20px; min-width:72px }
.service-ic{ width:30px; height:30px; object-fit:contain; opacity:.9 }
.service-label{ font:400 10px 'Jost',sans-serif; color:#CCC; letter-spacing:.02em }





.imgover {

max-width: 100%;
height: auto;
display: block;
filter: saturate(110%) contrast(102%);
}