/* ==================== ベース設定 ==================== */
body {font-family:'Jost',sans-serif;margin:0;background:#000;}
h1,h2,h3,p {margin:0 0 0.5em;}
header,main,footer{position:relative;margin:0 auto;padding:0 32px;}
.container{margin:0 auto;padding:0 40px;}
@media(max-width:768px){.container{padding:0 20px}}
@media(max-width:480px){.container{padding:0 12px}}
html, body { background: url("../img/bg.jpg") center / cover no-repeat fixed; position: relative; z-index: 0;}
html {scroll-behavior: smooth;}

/* ==================== ローディング画面 ==================== */
#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;}
.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:0.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);}}


/* ==================== ヘッダー ==================== */
.site-header{position:fixed;top:0;left:0;width:100%;height:64px;display:flex;align-items:center;
	justify-content:space-between;padding:0 32px;box-sizing:border-box;z-index:3000;
	background:rgba(0,0,0,.72);backdrop-filter:saturate(140%) blur(10px);
	border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(-16px);
	transition:opacity .8s ease-out,transform .8s 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:0.3em;transition:letter-spacing .3s ease,opacity .3s ease;}
.nav-link:hover,.drawer-item:hover{letter-spacing:0.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);}
#burger{--bar-h:2px;--bar-w:26px;--gap:8px;width:40px;height:40px;position:relative;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;z-index:1001;}
#burger span{position:absolute;left:50%;width:var(--bar-w);height:var(--bar-h);background:#fff;border-radius:2px;transform:translateX(-50%);transition:transform .36s cubic-bezier(.16,1,.3,1),top .36s cubic-bezier(.16,1,.3,1),opacity .2s ease;}
#burger span:nth-child(1){top:calc(50% - var(--gap));}
#burger span:nth-child(2){top:50%;}
#burger span:nth-child(3){top:calc(50% + var(--gap));}
#burger.is-active span:nth-child(1){top:50%;transform:translateX(-50%) rotate(45deg);}
#burger.is-active span:nth-child(2){opacity:0;transform:translateX(-50%) scaleX(0.2);}
#burger.is-active span:nth-child(3){top:50%;transform:translateX(-50%) rotate(-45deg);}
@media(min-width:768px){#burger{display:none}.drawer,.drawer.is-open,.nav-drawer,.nav-drawer.is-open{display:none!important;}}
@media(max-width:768px){.burger{display:block}.nav-desktop{display:none}}
.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:64px 0 0 0;margin:0 0 0 auto;width:min(84vw,300px);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);}
.nav-mobile{display:flex;flex-direction:column;gap:20px;}
.drawer-item{color:#fff;text-decoration:none;font-size:clamp(18px,6vw,28px);letter-spacing:0.4em;transition:letter-spacing .3s ease,opacity .3s ease;}
.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;}

/* ========== Scroll Reveal Animations (共通) ========== */
/* 下からふわっと */
.reveal-up[data-reveal-item] {  opacity: 0;transform: translateY(20px); 
	transition: opacity .6s ease, transform .6s ease; transition-delay: var(--delay, 0s);}
.reveal-up.is-in {  opacity: 1;  transform: translateY(0);}
/* 左から */
.reveal-left[data-reveal-item] {  opacity: 0;  transform: translateX(-40px);  
	transition: opacity .8s ease, transform .8s ease;}
.reveal-left.is-in[data-reveal-item] {  opacity: 1;  transform: translateX(0);}
/* 右から */
.reveal-right[data-reveal-item] {  opacity: 0; transform: translateX(40px); 
	transition: opacity .8s ease, transform .8s ease;}
.reveal-right.is-in[data-reveal-item] {  opacity: 1;  transform: translateX(0);}

/* ==================== 共通ボタン ==================== */

.btn-outline {  display:inline-flex;  align-items:center;  justify-content:center;
				width: auto;  height:48px;  padding:0 10%;  border-radius:10px;
				color:#fff;  text-decoration:none;  border:1px solid rgba(255,255,255,.5);  
				background-color:rgba(18,18,28,.35);  box-shadow:0 10px 30px rgba(0,0,0,.25); 
				transition: transform .3s ease, background-color .3s ease;  will-change: transform; transform: translateZ(0);}
.btn-outline__label {font-family:"Jost",system-ui,sans-serif; font-size:clamp(12px,1.4vw,18px);  letter-spacing:.3em;  display:inline-block;  transition: transform .3s ease;}
.btn-outline:hover {transform: scale(1.02); background-color:rgba(255,255,255,.06);}
.btn-outline:hover .btn-outline__label { transform: scaleX(1.08); }
/* ==========TOPに戻るボタン============= */

.back-to-top{position:fixed;bottom:32px;right:32px;width:48px;height:48px;background:#000;
	border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
	opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:999;}
.back-to-top.show{opacity:.7;pointer-events:auto;}
.back-to-top::before{content:"";width:10px;height:10px;border-left:2px solid #fff;
	border-top:2px solid #fff;transform:rotate(45deg);margin-top:4px;}

/* ==================== Footer ==================== */

	.footer{position:relative;padding:40px 60px 60px;color:#fff;text-align:center;}
	.footer::before{content:"";position:absolute;inset:0;
		background:linear-gradient(180deg,rgba(10,7,12,.9) 0%,rgba(61,48,79,.8) 100%);
		mix-blend-mode:multiply;}
	.footer>*{position:relative;z-index:1;}
	.footer-inner{max-width:1000px;margin:0 auto;padding:0 20px;display:flex;
		flex-direction:row;justify-content:center;align-items:center;gap:64px;}
	.footer-icon img{width:400px;height:auto;border-radius:50%;object-fit:cover;display:block;}
	.footer-right{flex:1;max-width: 350px;display:flex;flex-direction:column;align-items:flex-start;gap:32px;}
	.footer-logo{display:flex;align-items:center;gap:16px;}
	.footer-logo img{max-width:210px;height:auto;}
	.footer-brand{font-size:18px;font-weight:500;letter-spacing:.05em;
		border-left:1px solid rgba(255,255,255,.4);padding-left:16px;color:#ddd;}
	.footer-sns{display:flex;flex-direction:column;gap:16px;}
	.footer-sns a{display:flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;
		font-weight:200;font-size:14px;color:#fff;opacity:.6;text-decoration:none;transition:opacity .3s ease;letter-spacing:.3em;}
	.footer-sns a:hover{opacity:1;}
	.footer-sns a img{width:16px;height:16px;}
	.footer-contact .btn-outline{padding:2px 36px;font-size:15px;display:inline-flex;
		align-items:center;gap:10px;border:1px solid rgba(255,255,255,.7);border-radius:8px;}
	.footer-contact .btn-outline:hover{background:rgba(255,255,255,.1);}
	.footer-cr{margin-top:40px;font-family:'Jost',sans-serif;font-weight:200;text-align:center;
		font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.2em;}
	@media (max-width:768px){
	.footer-inner{flex-direction:column;gap:0;text-align:center;}
	.footer-logo{order:1;flex-direction:column;gap:8px;}
	.footer-icon{order:2;}
	.footer-right{order:3;align-items:center;gap:20px;}
	.footer-icon img{width:220px;height:auto;margin:0 auto;}
	.footer-brand{border-left:none;padding-left:0;font-size:14px;color:#ccc;}
	.footer-sns{flex-direction:row;justify-content:center;gap:24px;}
	.footer-sns a{font-size:0;}
	.footer-sns a img{width:16px;height:16px;}
	.footer-contact .btn-outline{min-width:180px;margin:0 auto;}
	.footer-cr{margin-top:24px;font-size:12px;}}

/* Footer アニメーションゆったり*/
.footer.reveal-up[data-reveal-item] {
  opacity: 0;
  transform: translateY(30px); 
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.footer.reveal-up.is-in[data-reveal-item] {
  opacity: 1;
  transform: translateY(0);
} 
/* ====================背景アニメ==================== */
.light-wrapper{position:fixed;inset:0;z-index:1;pointer-events:none;}
.light{position:absolute;width:300px;height:300px;border-radius:50%;
	background:radial-gradient(circle,rgba(166,100,172,0.5),transparent 70%);
	mix-blend-mode:screen;animation:float ease-in-out infinite alternate,glow 12s ease-in-out infinite;}
.light:nth-child(1){top:0%;left:0%;animation-duration:100s,14s;animation-delay:0s,-3s;}
.light:nth-child(2){top:30%;left:70%;animation-duration:140s,18s;animation-delay:-30s,-6s;}
.light:nth-child(3){top:50%;left:15%;animation-duration:90s,15s;animation-delay:-20s,-9s;}
.light:nth-child(4){top:70%;left:60%;animation-duration:160s,20s;animation-delay:-50s,-12s;}
.light:nth-child(5){top:85%;left:80%;animation-duration:120s,16s;animation-delay:-40s,-15s;}
@keyframes float{0%{transform:translate(0,0) scale(1);}25%{transform:translate(100px,-60px) scale(1.2);}
50%{transform:translate(-80px,80px) scale(1.4);}75%{transform:translate(60px,-40px) scale(1.3);}
100%{transform:translate(-120px,100px) scale(1.5);}}
@keyframes glow{0%,100%{opacity:0.3;}40%{opacity:0.8;}60%{opacity:0.5;}}