:root{

--main:#bcc9d5;
--sub:#cad8e1;
--light:#dbe0e5;
--accent:#a5b9c7;

--bg:#f7f9fb;
--text:#6f8797;

}


/* ===== reset ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}


html{
scroll-behavior:smooth;
}


body{

font-family:"Noto Sans JP",sans-serif;

background:#fcfdff;

color:var(--text);

line-height:1.8;

overflow-x:hidden;

}



/* ===== background ===== */

#tsparticles{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

z-index:0;

}



/* 前面表示 */

header,
section,
footer{

position:relative;

z-index:1;

}



/* ===== HEADER ===== */


header{

position:fixed;

top:0;
left:0;

width:100%;


background:rgba(255,255,255,.8);

backdrop-filter:blur(12px);


z-index:1000;


display:flex;

justify-content:space-between;

align-items:center;


padding:10px 30px;

}



/* logo */

.logo img{

height:28px;

width:auto;

display:block;

}



/* ===== PC NAV ===== */


nav{

display:flex;

align-items:center;

gap:20px;

}



nav a{

text-decoration:none;

color:var(--text);

font-size:.9rem;

letter-spacing:.1em;

padding:8px 10px;

transition:.3s;

}


nav a:hover{

opacity:.6;

}



/* ===== header right ===== */


.header-right{

display:flex;

align-items:center;

gap:25px;

}



.news-link{

text-decoration:none;

color:var(--text);

font-size:.9rem;

letter-spacing:.1em;

transition:.3s;

}



.news-link:hover{

opacity:.6;

}



/* ===== hamburger ===== */


.hamburger{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

z-index:1100;

}



.hamburger span{

width:25px;

height:2px;

background:var(--text);

transition:.3s;

}



/* ===== smartphone ===== */


@media(max-width:768px){


header{

padding:10px 20px;

}


/* NEWS非表示 */

.news-link{

display:none;

}



/* hamburger表示 */

.hamburger{

display:flex;

}


/* 右上固定 */

.header-right{

position:fixed;

top:20px;

right:20px;

z-index:1100;

}



/* menu */


nav{

position:fixed;

top:0;

right:-100%;


width:70%;

height:100vh;


background:white;


flex-direction:column;

align-items:flex-start;


padding:80px 30px;


gap:20px;


transition:.4s ease;


box-shadow:-10px 0 30px rgba(0,0,0,.1);

}



nav.open{

right:0;

}



/* overlay */


.overlay{

position:fixed;

top:0;

left:0;


width:100%;

height:100%;


background:rgba(0,0,0,.4);


opacity:0;

visibility:hidden;


transition:.3s;


z-index:900;

}



.overlay.show{

opacity:1;

visibility:visible;

}


}



/* hamburger animation */


.hamburger.active span:nth-child(1){

transform:rotate(45deg) translate(5px,5px);

}


.hamburger.active span:nth-child(2){

opacity:0;

}


.hamburger.active span:nth-child(3){

transform:rotate(-45deg) translate(5px,-5px);

}

/* ===== HERO ===== */

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

gap:80px;

padding:120px 10%;

}


.hero-text h1{

font-size:5rem;

font-weight:300;

letter-spacing:.25em;

}


.sub{

margin:15px 0;

font-size:1.1rem;

}


.hero-buttons{

margin-top:30px;

display:flex;

gap:15px;

flex-wrap:wrap;

}



.btn{

display:inline-block;

padding:12px 28px;

border-radius:999px;

background:var(--main);

color:white;

text-decoration:none;

transition:.3s;

}



.btn:hover{

background:var(--accent);

}



.hero-image img{

max-height:80vh;

}



/* ===== SECTION ===== */


section{

padding:120px 10%;

margin-bottom:80px;

}



.section-title{

font-size:2rem;

font-weight:300;

text-align:center;

margin-bottom:60px;

letter-spacing:.2em;

}




/* ===== PROFILE ===== */


.profile-wrap{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:30px;

}



.profile-text{

max-width:600px;

}



.profile-image img{

width:220px;

height:220px;

object-fit:cover;

border-radius:50%;

}




.sns-links{

margin-top:25px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}



.sns-links a{

text-decoration:none;

padding:10px 20px;

border-radius:999px;

background:var(--light);

color:var(--text);

transition:.3s;

}



.sns-links a:hover{

background:var(--main);

color:white;

transform:translateY(-3px);

}




/* ===== COVER / MIX SERVICE VIDEO ===== */


.video-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:25px;

}



.video-grid iframe{

width:100%;

aspect-ratio:16/9;

border:none;

border-radius:20px;

display:block;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}




.latest-frame{

position:relative;

background:white;

padding:10px;

border-radius:20px;

border:2px solid var(--accent);

box-shadow:
0 0 6px rgba(165,185,199,.2),
0 0 15px rgba(165,185,199,.1);

margin-bottom:40px;

}



.latest-frame iframe{

width:100%;

aspect-ratio:16/9;

border:none;

border-radius:12px;

}



.new-badge{

position:absolute;

top:-10px;

right:15px;


background:var(--accent);

color:white;


padding:6px 12px;


border-radius:999px;


font-size:12px;

font-weight:bold;

}



/* ===== MIX SERVICE ===== */


.service-block{

max-width:1000px;

margin:auto;

}



/* ===== SERVICE TITLE ===== */

.service-block h3{

font-size:16px;

font-weight:400;

letter-spacing:.35em;

color:#8a9aa7;

text-align:center;


margin:80px 0 35px;

}

.price-title{

margin-top:100px;

}



.price-wrap{

max-width:900px;

margin:auto;

}


/* ===== PRICE CARD ===== */

.price-wrap{

display:flex;

justify-content:center;

padding:20px;

}


.price-card{

display:flex;

justify-content:center;

background:rgba(255,255,255,.8);

backdrop-filter:blur(10px);

padding:30px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

max-width:700px;

width:100%;

margin:auto;

}


.price-card img{

width:70%;

max-width:500px;

height:auto;

display:block;

border-radius:12px;

}


@media(max-width:768px){

.price-card{

padding:20px;

}


.price-card img{

width:100%;

}

}
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.service-block h3 span{

font-size:13px;

color:var(--accent);

letter-spacing:.1em;

}



/* ===== NEWS ===== */


.news{

padding:120px 10%;

}



.news-list{

display:flex;

flex-direction:column;

gap:20px;

}



.news-card{

background:white;

padding:20px 25px;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

transition:.3s;

}



.news-card:hover{

transform:translateY(-5px);

}



.news-tag{

font-size:11px;

letter-spacing:.1em;

color:#8a9aa7;

margin-bottom:8px;

display:inline-block;

}



.news-date{

font-size:12px;

color:#8a9aa7;

margin-bottom:5px;

}



.news-text{

font-size:14px;

color:#5b6b75;

}



.news-flyer{

width:100%;

max-width:350px;

height:auto;

display:block;

margin:0 auto 15px;

border-radius:12px;

object-fit:cover;

}



/* ===== SCHEDULE ===== */


.schedule-box{

display:flex;

flex-direction:column;

gap:20px;

}



.live-card{

background:white;

padding:20px 25px;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

transition:.3s;

}



.live-card:hover{

transform:translateY(-5px);

}



.live-date{

font-size:12px;

letter-spacing:.1em;

color:#8a9aa7;

margin-bottom:8px;

}



.live-title{

font-size:18px;

color:#5b6b75;

margin-bottom:5px;

}



.live-place{

font-size:13px;

color:#9aa8b3;

}

/* ===== CONTACT ===== */


#contact{

text-align:center;

}



.contact-text{

margin-bottom:20px;

}



.contact-buttons{

margin-top:30px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}




/* ===== FOOTER ===== */


footer{

background:white;

padding:60px;

text-align:center;

}




footer h3{

font-weight:400;

letter-spacing:.2em;

}




footer p{

font-size:13px;

color:#8a9aa7;

}




/* ===== FADE ANIMATION ===== */


.fadein{

opacity:0;

transform:translateY(30px);

transition:all 1s ease;

}



.fadein.show{

opacity:1;

transform:translateY(0);

}




/* ===== LOADING ===== */


#loading{

position:fixed;

top:0;

left:0;


width:100%;

height:100%;


background:white;


display:flex;

justify-content:center;

align-items:center;


z-index:99999;


transition:

opacity 1.5s ease,

visibility 1.5s;

}



#loading.fade{

opacity:0;

visibility:hidden;

}



.loading-text{

text-align:center;

animation:fadeUp 2s ease;

}



.loading-text h1{

font-size:70px;

font-weight:300;

letter-spacing:.35em;


color:var(--accent);

margin-bottom:15px;

}



.loading-text p{

color:#8a9aa7;

letter-spacing:.15em;

font-size:15px;

}




@keyframes fadeUp{


0%{

opacity:0;

transform:translateY(20px);

filter:blur(8px);

}


100%{

opacity:1;

transform:translateY(0);

filter:blur(0);

}

}




/* ===== SNOW ===== */


.snow{

position:fixed;

top:-10px;


pointer-events:none;

user-select:none;


z-index:2;


animation:snowfall linear infinite;


opacity:.1;


text-shadow:

0 0 4px rgba(255,255,255,.8),

0 0 8px rgba(255,255,255,.4);

}




@keyframes snowfall{


0%{

transform:translateY(-10vh);

}


100%{

transform:translateY(110vh);

}

}




/* ===== RESPONSIVE ===== */


@media(max-width:900px){


.hero{

flex-direction:column;

gap:30px;

padding:100px 20px;

text-align:center;

}



.hero-text h1{

font-size:2.5rem;

}



.hero-image img{

max-width:100%;

}



.video-grid{

grid-template-columns:1fr;

}



}




@media(max-width:768px){


section{

padding:100px 20px;

}


.section-title{

font-size:1.6rem;

margin-bottom:40px;

}



.sns-links a{

padding:8px 16px;

}



.profile-image img{

width:180px;

height:180px;

}



footer{

padding:40px 20px;

}


.loading-text h1{

font-size:50px;

}


}

/* ===== MIX WORKS 横スクロール ===== */

.works-scroll{

display:flex;

gap:20px;

overflow-x:auto;

padding:10px 5px 20px;

scroll-snap-type:x mandatory;

scroll-behavior:smooth;

}


.works-scroll iframe{

width:300px;

flex:0 0 300px;

aspect-ratio:16/9;

border:none;

border-radius:16px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

scroll-snap-align:start;

}


/* スクロールバー */

.works-scroll::-webkit-scrollbar{

height:6px;

}


@media(max-width:768px){

.works-scroll iframe{

flex:0 0 85%;

}

}

/* ===== WORKS ARROW ===== */

.works-container{

position:relative;

}


.works-arrow{

position:absolute;

top:50%;

transform:translateY(-50%);

width:40px;

height:40px;

border-radius:50%;

border:none;

background:rgba(255,255,255,.8);

color:#8a9aa7;

font-size:30px;

cursor:pointer;

z-index:5;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}


.works-arrow.left{

left:-20px;

}


.works-arrow.right{

right:-20px;

}


@media(max-width:768px){

.works-arrow{

display:none;

}

}

.live-title a {
  color:inherit;
  text-decoration:none;
  transition:opacity .3s;
}

.live-title a:hover {
  opacity:.55;
  text-decoration:underline;
}