@charset "utf-8";

/* =========================================
   RESET
========================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  overflow-x:hidden;
}

img{
  display:block;
  width:100%;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}

ul,
ol{
  list-style:none;
  padding:0;
  margin:0;
}


/* =========================================
   VARIABLES
========================================= */

:root{

  --font-logo:Futura,"Helvetica Neue",Arial,sans-serif;
  --font-en:Futura,"Helvetica Neue",Arial,sans-serif;
  --font-accent:Optima,"Times New Roman",serif;

  --font-ja:
    "Helvetica Neue",
    Helvetica,
    Arial,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;

  --font-ja-thin:
    "Zen Kaku Gothic New",
    "Noto Sans JP",
    sans-serif;

  --text:#111111;
  --text-sub:#7a7a7a;
  --line:#e6e6e6;
  --bg:#ffffff;
  --bg-alt:#f8f8f8;

}


/* =========================================
   BASE
========================================= */

body{
  font-family:var(--font-ja);
  font-weight:400;
  line-height:1.8;
  color:var(--text);
  background:var(--bg);
}

section{
  padding:180px 0;
}

.container{
  width:min(1200px,88%);
  margin:auto;
}

.narrow{
  width:min(720px,88%);
  margin:auto;
}

img{
  -webkit-user-drag:none;
  -webkit-user-select:none;
  user-select:none;
}

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

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:28px 5vw;

  mix-blend-mode:difference;
}

.site-logo{
  font-family:var(--font-logo);
  font-size:18px;
  font-weight:400;
  letter-spacing:.08em;
  color:#fff;
}

.site-nav{
  display:flex;
  gap:32px;
}

.site-nav a{
  font-family:var(--font-en);
  font-size:11px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
}

.menu-toggle{
  display:none;

  font-family:var(--font-en);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;

  color:#fff;

  background:none;
  border:none;
}

@media(max-width:768px){

  .menu-toggle{
    display:block;
  }

  .site-nav{

    position:fixed;

    top:90px;
    right:5vw;

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:20px;

    opacity:0;
    visibility:hidden;

    transition:.3s;
  }

  .site-nav.active{
    opacity:1;
    visibility:visible;
  }
}

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

.hero{
  position:relative;
  height:100vh;
}

.hero-image{
  position:absolute;
  inset:0;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
}

.hero-copy{
  position:absolute;
  left:6vw;
  bottom:7vh;
  z-index:2;
  color:#fff;
}

.hero h1{
  margin:0;

  font-family:var(--font-ja-thin);
  font-size:clamp(22px,2vw,36px);
  font-weight:300;
  letter-spacing:.12em;
  line-height:1.6;
}

.hero .lead{
  margin-top:18px;

  font-family:var(--font-accent);
  font-size:clamp(13px,1vw,16px);
  font-weight:400;
  letter-spacing:.18em;
  line-height:1.5;
  text-transform:uppercase;
}


/* =========================================
   COMMON
========================================= */

.section-header{
  margin-bottom:60px;
}

.section-header h2{
  font-family:var(--font-en);
  font-size:12px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.25em;
  line-height:1.6;
}


/* =========================================
   INTRO
========================================= */

.intro{
  background:var(--bg-alt);
}

.intro .container{
  width:min(720px,88%);
}

.intro h2{
  margin:0 0 72px;

  font-family:var(--font-en);
  font-size:12px;
  font-weight:400;
  letter-spacing:.25em;
  line-height:1.6;
  text-transform:none;
}

.intro-copy{
  display:flex;
  flex-direction:column;
  gap:56px;

  margin:0;
}

.intro-small{
  display:block;

  font-size:12px;
  font-weight:400;
  letter-spacing:.08em;
  line-height:2;
  color:var(--text-sub);
}

.intro-large{
  display:block;

  font-family:var(--font-ja-thin);
  font-size:clamp(24px,2.2vw,36px);
  font-weight:300;
  letter-spacing:.08em;
  line-height:1.8;
  color:var(--text);
}


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

@media(max-width:768px){

  section{
    padding:100px 0;
  }

  .site-header{
    padding:22px 6vw;
  }

  .site-logo{
    font-size:16px;
  }

  .site-nav{
    gap:18px;
  }

  .site-nav a{
    font-size:10px;
    letter-spacing:.16em;
  }

  .hero-copy{
    left:6vw;
    bottom:8vh;
  }
  .intro h2{
    margin-bottom:56px;
  }
  .intro-copy{
    gap:44px;
  }
}


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

.works{
  background:var(--bg);
}

.works .section-header{
  width:min(1400px,88%);
  margin:0 auto 80px;
}

.works-grid{
  width:min(1400px,88%);
  margin:auto;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:72px 32px;
}

.work-item figure{
  margin:0;
}

.work-item img{
  /*aspect-ratio:4/5;*/
  object-fit:cover;
  filter:grayscale(100%);
  transition:
    filter .6s ease,
    transform .8s ease;
}

.work-item a{
  display:block;
}

.work-item a:hover img{
  filter:grayscale(0%);
  transform:scale(1.015);
}

.work-item figure{
  overflow:hidden;
}

.work-item figcaption{
  padding-top:22px;
}

.work-category{
  display:block;

  margin-bottom:12px;

  font-family:var(--font-en);
  font-size:11px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;

  color:var(--text-sub);
}

.work-item h3{
  margin:0 0 8px;

  font-family:var(--font-ja-thin);
  font-size:15px;
  font-weight:300;
  letter-spacing:.08em;
  line-height:1.8;
}

.work-item p{
  margin:0;

  font-size:12px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--text-sub);
}




.works-grid{
  width:min(1400px,88%);
  margin:auto;

  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:96px 28px;
}

.work-item:nth-child(1){
  grid-column:1 / span 6;
}

.work-item:nth-child(2){
  grid-column:8 / span 3;
  margin-top:80px;
}

.work-item:nth-child(3){
  grid-column:2 / span 3;
}

.work-item:nth-child(4){
  grid-column:6 / span 6;
  margin-top:120px;
}

.work-item:nth-child(5){
  grid-column:1 / span 4;
}

.work-item:nth-child(6){
  grid-column:6 / span 7;
  margin-top:80px;
}

.work-item:nth-child(1) img{
  aspect-ratio:4/3;
}
.work-item:nth-child(2) img{
  aspect-ratio:4/3;
}
.work-item:nth-child(3) img{
  aspect-ratio:3/4;
}
.work-item:nth-child(4) img{
  aspect-ratio:4/3;
}
.work-item:nth-child(5) img{
  aspect-ratio:4/5;
}

.work-item:nth-child(6) img{
  aspect-ratio:5/3;
}





@media(max-width:768px){

  .works .section-header,
  .works-grid{
    width:min(100%,88%);
  }

  .works-grid{
    grid-template-columns:1fr;
    gap:64px;
  }
    .work-item{
    grid-column:auto !important;
    margin-top:0 !important;
  }
  }


/*-----------------------
consultation
-----------------------*/

.consultation{
  background:#111;
  color:#fff;
}

.consultation-list{
  margin-top:80px;
}

.consultation-list li{

  padding:28px 0;

  border-bottom:1px solid rgba(255,255,255,.12);
}

.consultation-en{

  display:block;

  font-family:var(--font-en);

  font-size:clamp(18px,2vw,30px);

  letter-spacing:.12em;

  text-transform:uppercase;

  line-height:1.4;
}

.consultation-ja{

  display:block;

  margin-top:10px;

  font-size:12px;

  letter-spacing:.08em;

  color:rgba(255,255,255,.55);
}

.consultation-ja{
    font-size:12px;
    color:rgba(255,255,255,.55);
}

.consultation-ja::before{
    content:"— ";
}

/*-----------------------
service
-----------------------*/

.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:60px;
}

.service-item{
  border-top:1px solid var(--line);
  padding-top:24px;
}

.service-item h3{
  margin:0 0 12px;

  font-family:var(--font-en);

  font-size:16px;

  font-weight:400;

  letter-spacing:.08em;
}

.service-item p{
  margin:0;

  font-size:12px;

  line-height:1.8;

  color:var(--text-sub);
}

@media(max-width:768px){

  .service-grid{

    grid-template-columns:1fr;

    gap:40px;

  }

}


/* =========================================
   MORE SPACES
========================================= */

.more-spaces{
  background:var(--bg-alt);
}

.more-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.more-card{
  display:block;
}

.more-card figure{
  margin:0;
}

.more-card img{
  aspect-ratio:4/5;
  object-fit:cover;
  filter:grayscale(100%);
  transition:
    filter .6s ease,
    transform .8s ease;
}

.more-card:hover img{
  filter:grayscale(0%);
  transform:scale(1.015);
}

.more-card figcaption{
  padding-top:22px;
}

.more-card h3{
  margin:0 0 8px;

  font-family:var(--font-en);
  font-size:clamp(18px,1.6vw,24px);
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.5;
}

.more-card p{
  margin:0;

  font-size:12px;
  letter-spacing:.08em;
  line-height:1.8;
  color:var(--text-sub);
}

@media(max-width:768px){

  .more-grid{
    grid-template-columns:1fr;
    gap:64px;
  }

}



/* =========================================
   ABOUT
========================================= */

.about{
  background:var(--bg);
}

.about .container{
  width:min(720px,88%);
}

.about .section-header{
  margin-bottom:72px;
}

.about-copy{
  max-width:560px;
}

.about-copy p{
  margin:0 0 48px;

  font-size:14px;
  font-weight:400;
  line-height:2.4;
  letter-spacing:.04em;

  color:var(--text);
}

.about-copy p:last-child{
  margin-bottom:0;
}

.about-sign{
  color:var(--text-sub);
}



@media(max-width:768px){

  .about .section-header{
    margin-bottom:56px;
  }

  .about-copy p{
    margin-bottom:40px;

    font-size:14px;
    line-height:2.2;
  }

}


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

.contact{
  background:#111;
  color:#fff;
}

.contact-inner{
  max-width:560px;
}

.contact h2{
  margin:0 0 72px;

  font-family:var(--font-en);
  font-size:12px;
  font-weight:400;
  letter-spacing:.25em;
  text-transform:uppercase;
}

.contact-copy{
  margin:0 0 64px;

  font-size:14px;
  line-height:2.4;
  letter-spacing:.04em;
}

.contact-link{
  display:inline-block;

  font-family:var(--font-en);
  font-size:14px;
  letter-spacing:.12em;

  position:relative;

  padding-bottom:8px;
}

.contact-link::after{
  content:"";

  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:1px;

  background:#fff;

  transition:.3s;
}

.contact-link:hover::after{
  width:0;
}

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

.site-footer{
  background:#111;
  color:#fff;

  padding:80px 0 60px;

  border-top:1px solid rgba(255,255,255,.08);
}

.footer-logo{
  margin-bottom:40px;

  font-family:var(--font-logo);
  font-size:20px;
  font-weight:400;
  letter-spacing:.08em;
}

.footer-nav{
  display:flex;
  gap:28px;

  margin-bottom:40px;
}

.footer-nav a{
  font-family:var(--font-en);
  font-size:11px;
  font-weight:400;

  letter-spacing:.16em;
  text-transform:uppercase;

  color:rgba(255,255,255,.7);

  transition:.3s;
}

.footer-nav a:hover{
  color:#fff;
}

.copyright{
  margin:0;

  font-size:11px;
  letter-spacing:.08em;

  color:rgba(255,255,255,.4);
}

@media(max-width:768px){

  .site-footer{
    padding:64px 0 48px;
  }

  .footer-nav{
    flex-direction:column;
    gap:14px;
  }

}

@media(max-width:768px){

  .work-item img,
  .more-card img{
    filter:grayscale(35%);
  }

}




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

.store-hero{
  position:relative;
  height:100vh;
}

.store-hero-image{
  position:absolute;
  inset:0;
}

.store-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.store-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.20);
}

.store-hero-copy{
  position:absolute;
  left:6vh;
  bottom:6vh;

  z-index:2;

  color:#fff;
}

.store-label{
  margin:0 0 12px;

  font-family:var(--font-en);

  font-size:12px;

  letter-spacing:.25em;

  text-transform:uppercase;
}

.store-hero h1{
  margin:0;

  font-family:var(--font-en);

  font-size:clamp(28px,3vw,48px);

  font-weight:400;

  letter-spacing:.08em;
}


/* =========================================
   STORE INTRO
========================================= */

.store-intro{
  background:var(--bg-alt);
}

.store-intro .container{
  max-width:720px;
}

.store-intro h2{
  margin:0 0 60px;

  font-family:var(--font-en);

  font-size:14px;

  font-weight:400;

  letter-spacing:.25em;

  text-transform:uppercase;
}

.store-intro-copy{
  display:flex;
  flex-direction:column;
  gap:48px;
}

.store-intro-small{
  margin:0;

  font-size:14px;

  line-height:2;

  color:var(--text-sub);
}

.store-intro-large{
  margin:0;

  font-size:clamp(24px,2.2vw,36px);

  font-weight:300;

  line-height:1.8;

  letter-spacing:.08em;
}


/* =========================================
   STORE PHILOSOPHY
========================================= */

.store-philosophy{
  background:#fff;
}

.store-philosophy .container{
  max-width:720px;
}

.store-philosophy p{
  margin:0 0 48px;

  font-size:14px;

  line-height:2.4;

  letter-spacing:.04em;
}

.store-philosophy p:last-child{
  margin-bottom:0;
}


/* =========================================
   STORE GALLERY
========================================= */

.store-gallery{
  padding:0 0 180px;
}

.gallery-grid{

  width:min(1400px,92%);
  margin:auto;

  display:grid;
  grid-template-columns:repeat(12,1fr);

  gap:24px;





  grid-auto-flow:dense;

}

.gallery-item{
  margin:0;
  align-self:start;
}

.gallery-item img{

  width:100%;
  height:auto;

  display:block;

  object-fit:cover;

}


/* =========================================
   DESKTOP LAYOUT
========================================= */

.gallery-item:nth-child(1){
  grid-column:span 7;
}
.gallery-item:nth-child(1) img{
  aspect-ratio:16/10;
}
.gallery-item:nth-child(2){
  grid-column:span 5;
}
.gallery-item:nth-child(2) img{
  aspect-ratio:6/4;
}


.gallery-item:nth-child(3){
  grid-column:span 3;
  margin-top:80px;
}
.gallery-item:nth-child(3) img{
  aspect-ratio:5/8;
}



.gallery-item:nth-child(4){
  grid-column:span 5;
}
.gallery-item:nth-child(4) img{
  aspect-ratio:16/10;
}
.gallery-item:nth-child(5){
  grid-column:span 4;
}
.gallery-item:nth-child(5) img{
  aspect-ratio:3/4;
}


.gallery-item:nth-child(6){
  grid-column:span 4;
}
.gallery-item:nth-child(6) img{
  aspect-ratio:4/3;
}


.gallery-item:nth-child(7){
  grid-column:span 4;
}
.gallery-item:nth-child(7) img{
  aspect-ratio:9/13;
}
.gallery-item:nth-child(8){
  grid-column:span 4;
  margin-top:40px;
}
.gallery-item:nth-child(8) img{
  aspect-ratio:4/5;
}

.gallery-item:nth-child(9){
  grid-column:span 6;
}
.gallery-item:nth-child(9) img{
  aspect-ratio:16/10;
}



.gallery-item:nth-child(10){
  grid-column:span 3;
}
.gallery-item:nth-child(10) img{
  aspect-ratio:4/3;
}
.gallery-item:nth-child(11){
  grid-column:span 4;
}
.gallery-item:nth-child(11) img{
  aspect-ratio:4/6;
}
.gallery-item:nth-child(12){
  grid-column:span 4;
}
.gallery-item:nth-child(12) img{
  aspect-ratio:4/5;
}


.gallery-item:nth-child(13){
  grid-column:span 8;
}
.gallery-item:nth-child(13) img{
  aspect-ratio:21/9;
}
.gallery-item:nth-child(14){
  grid-column:span 8;
}
.gallery-item:nth-child(14) img{
  aspect-ratio:21/10;
}
.gallery-item:nth-child(15){
  grid-column:span 4;
}
.gallery-item:nth-child(15) img{
  aspect-ratio:4/5;
}


.gallery-item:nth-child(16){
  grid-column:span 12;
}
.gallery-item:nth-child(16) img{
  aspect-ratio:5/1;
}
.gallery-item:nth-child(17){
  grid-column:span 4;
  margin-top:80px;
}
.gallery-item:nth-child(17) img{
  aspect-ratio:4/5;
}
.gallery-item:nth-child(18){
  grid-column:span 8;
}
.gallery-item:nth-child(18) img{
  aspect-ratio:16/10;
}



/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

  .store-gallery{
    padding:0 0 120px;
  }

  .gallery-grid{

    width:min(92%,700px);

    grid-template-columns:1fr;

    gap:24px;

  }

  .gallery-item{
    margin-top:0 !important;
    grid-column:auto !important;
  }

  .gallery-item img{
    aspect-ratio:auto !important;
  }

}

/* =========================================
   STORE ABOUT
========================================= */

.store-about{
  background:var(--bg);
}

.store-about .container{
  width:min(720px,88%);
}

.store-about .section-header{
  margin-bottom:72px;
}

.store-about-copy{
  max-width:560px;
}

.store-about-copy p{
  margin:0 0 48px;

  font-size:14px;
  font-weight:400;

  line-height:2.4;
  letter-spacing:.04em;

  color:var(--text);
}

.store-about-copy p:last-child{
  margin-bottom:0;
}

@media(max-width:768px){

  .store-about .section-header{
    margin-bottom:56px;
  }

  .store-about-copy p{
    margin-bottom:40px;
    line-height:2.2;
  }

}


/* =========================================
   LESSON
========================================= */

.store-lessons{
  background:var(--bg-alt);
}

.store-lessons .container{
  width:min(720px,88%);
}

.store-lessons .section-header{
  margin-bottom:72px;
}

.store-lessons-copy p{
  margin:0 0 48px;
  font-size:14px;
  line-height:2.4;
  letter-spacing:.04em;
}

.text-link{
  display:inline-block;
  margin-top:8px;
  padding-bottom:6px;
  border-bottom:1px solid var(--text);

  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:.16em;
}

/* =========================================
   STORE ACCESS
========================================= */

.store-access{
  background:var(--bg-alt);
}

.store-access .container{
  width:min(720px,88%);
}

.access-content{
  max-width:560px;
}

.access-content p{
  margin:0 0 40px;

  font-size:14px;
  line-height:2.2;
}

.access-name{
  font-family:var(--font-en);
  letter-spacing:.08em;
}

.access-map a{

  display:inline-block;

  padding-bottom:6px;

  border-bottom:1px solid var(--text);

}





/* =========================================
   WEDDING FLOW
========================================= */

.wedding-flow{
  background:var(--bg-alt);
}

.flow-list{
  max-width:720px;
}

.flow-item{
  padding:28px 0;
  border-bottom:1px solid var(--line);
}

.flow-item:first-child{
  border-top:1px solid var(--line);
}

.flow-en{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-en);
  font-size:16px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text);
}

.flow-ja{
  display:block;
  font-size:12px;
  line-height:1.8;
  letter-spacing:.08em;
  color:var(--text-sub);
}

@media(max-width:768px){

  .flow-item{
    padding:24px 0;
  }

  .flow-en{
    font-size:15px;
  }

}


/*--------ev_works page--------*/
.works{}
.event_works{ background:var(--bg);}

.event_works article{ width:min(1400px,88%); margin:auto;}
.event_works .section-header{ margin-bottom:80px;}




.event_works h2{margin: 10% 0px 0 30px;}
.works_contents{margin-top: 0;}

.grid_contents{
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:6px;
}

.grid_item img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  filter:grayscale(100%);
  transition:.4s;
}

.grid_item:hover img{
  filter:grayscale(0%);
  transform:scale(1.03);
}

.grid_item{ position:relative; margin:0; overflow:hidden;}

.grid_item .h_mask{  display:none;}


.grid_item h2 { font-size:80%;color:#000;padding-top:10px;text-align:center;font-weight: 400;}









/* =========================================
   CONTACT PAGE FORM
========================================= */

.contact-page-form{
  background:#f8f8f8;
  color:#666;
}

.contact-page-form .container{
  width:min(800px,88%);
}

.contact-page-form .section-header{
  margin-bottom:72px;
}

.contact-page-lead{
  margin-bottom:96px;
}

.contact-page-lead p{
  margin:0 0 28px;

  font-size:13px;
  line-height:2.5;
  letter-spacing:.06em;

  color:#666;
}

.contact-page-lead p:last-child{
  margin-bottom:0;
}

.contactForm{
  width:100%;
}

.form-row{
  margin:0 0 56px;
}

.form-row dt{
  margin:0 0 18px;

  font-family:var(--font-en);
  font-size:12px;
  font-weight:400;

  letter-spacing:.2em;
  text-transform:uppercase;

  color:#888;
}

.form-row dt em{
  margin-left:6px;
  font-style:normal;
  color:#888;
}

.form-row dd{
  margin:0;
}

.formmodule{
  width:100%;
  padding:0 0 16px;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  border-radius:0;
  background:none;
  font-family:var(--font-ja);
  font-size:14px;
  line-height:1.8;
  letter-spacing:.04em;
  color:#111;
  appearance:none;
}

.formmodule::placeholder{
  color:#bbb;
}

.formmodule:focus{
  outline:none;
  border-bottom-color:#fff;
}

textarea.formmodule{
  min-height:180px;
  resize:vertical;
}

.colorRed{
  display:none;
  margin-top:10px;

  font-size:11px;
  letter-spacing:.04em;

  color:#000;
}

.contactAcp{
  margin:72px 0 40px;

  font-size:12px;
  line-height:2;
  letter-spacing:.04em;

  color:#666;
}

.contactAcp label{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.contactAcp input{
  margin-top:7px;
}

.contactAcp a{
  border-bottom:1px solid rgba(255,255,255,.5);
}

.send{
  display:flex;
  gap:32px;
  align-items:center;
}

.send input{
  padding:0 0 8px;

  border:none;
  border-bottom:1px solid #111;
  border-radius:0;

  background:none;
  color:#111;

  font-family:var(--font-en);
  font-size:13px;
  font-weight:400;

  letter-spacing:.18em;
  text-transform:uppercase;

  cursor:pointer;
}

.send input:disabled{
  opacity:.3;
  cursor:not-allowed;
}

.formreturnmsg{
  margin-top:48px;

  font-size:14px;
  line-height:2;
  letter-spacing:.04em;
}

@media(max-width:768px){

  .contact-page-form .section-header{
    margin-bottom:56px;
  }

  .contact-page-lead{
    margin-bottom:72px;
  }

  .form-row{
    margin-bottom:48px;
  }

  .send{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }

}

/* =========================================
   PRIVACY POLICY
========================================= */

.privacypolicy{
  background:var(--bg);
}

.privacy{
  width:min(820px,88%);
  margin:auto;

  padding:180px 0;
}

.privacy h1{
  margin:0 0 96px;

  font-family:var(--font-en);
  font-size:12px;
  font-weight:400;

  letter-spacing:.25em;
  line-height:1.6;
  text-transform:uppercase;
}

.privacy p{
  margin:0;

  font-size:13px;
  font-weight:400;

  line-height:2.4;
  letter-spacing:.04em;

  color:var(--text);
}

@media(max-width:768px){

  .privacy{
    width:min(88%,720px);
    padding:120px 0;
  }

  .privacy h1{
    margin-bottom:64px;
  }

  .privacy p{
    font-size:12px;
    line-height:2.2;
  }

}

/* =========================================
   COMPANY
========================================= */

.company-section{
  background:#fff;
}

.company-section .container{
  width:min(720px,88%);
}

.company-table{
  margin:0;
  border-top:1px solid var(--line);
}

.company-table dt{

  padding:32px 0 12px;

  font-family:var(--font-en);
  font-size:11px;
  font-weight:400;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--text-sub);
}

.company-table dd{

  margin:0;

  padding:0 0 32px;

  font-size:14px;
  line-height:2.2;
  letter-spacing:.04em;

  border-bottom:1px solid var(--line);
}

@media(max-width:768px){

  .company-table dt{
    padding:24px 0 10px;
  }

  .company-table dd{
    padding-bottom:24px;
    font-size:13px;
  }

}



/* =========================================
   WORK DETAIL
========================================= */

.work-detail{
  background:var(--bg);
}

/* Header */

.work-header{
  padding:180px 0 96px;
  background:var(--bg);
}

.work-header .container{
  width:min(720px,88%);
}

.work-category{
  margin:0 0 32px;

  font-family:var(--font-en);
  font-size:11px;
  font-weight:400;

  letter-spacing:.22em;
  text-transform:uppercase;

  color:var(--text-sub);
}

.work-header h1{
  margin:0;

  font-family:var(--font-en);
  font-size:clamp(34px,4vw,64px);
  font-weight:400;

  letter-spacing:.06em;
  line-height:1.2;
}

.work-subtitle{
  margin:20px 0 0;

  font-size:14px;
  font-weight:400;

  letter-spacing:.08em;
  line-height:2;

  color:var(--text-sub);
}

/* Main Image */

.work-main-image{
  padding:0 0 120px;
}

.work-main-image figure{
  width:min(1200px,88%);
  margin:auto;
}

.work-main-image img{
  width:100%;
  height:95vh;

  display:block;
  object-fit:contain;
}

/* Info */

.work-info{
  padding:0 0 120px;
  background:var(--bg);
}

.work-info .container{
  width:min(720px,88%);
}

.work-info-list{
  margin:0;
  border-top:1px solid var(--line);
}

.work-info-list dt{
  padding:28px 0 8px;

  font-family:var(--font-en);
  font-size:11px;
  font-weight:400;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--text-sub);
}

.work-info-list dd{
  margin:0;
  padding:0 0 28px;

  font-size:13px;
  line-height:2;
  letter-spacing:.04em;

  border-bottom:1px solid var(--line);
}

/* Text */

.work-text{
  padding:0 0 140px;
}

.work-text .container{
  width:min(720px,88%);
}

.work-text p{
  margin:0 0 48px;

  font-size:13px;
  line-height:2.4;
  letter-spacing:.04em;
}

.work-text p:last-child{
  margin-bottom:0;
}

/* Gallery */

.work-gallery-section{
  padding:0 0 160px;
}

.work-gallery{
  width:min(1400px,88%);
  margin:auto;

  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
}

.work-gallery figure{
  margin:0;
  grid-column:span 6;
}

.work-gallery figure:nth-child(3n){
  grid-column:span 12;
}

.work-gallery img{
  width:100%;
  height:auto;

  display:block;
  object-fit:contain;
}

/* Back */

.work-back{
  padding:0 0 160px;
}

.work-back .container{
  width:min(720px,88%);
}

/* Mobile */

@media(max-width:768px){

  .work-header{
    padding:140px 0 72px;
  }

  .work-main-image{
    padding:0 0 96px;
  }

  .work-main-image figure{
    width:min(100%,95%);
  }

  .work-info{
    padding:0 0 96px;
  }

  .work-text{
    padding:0 0 112px;
  }

  .work-gallery-section{
    padding:0 0 120px;
  }

  .work-gallery{
    grid-template-columns:1fr;
    gap:24px;
  }

  .work-gallery figure,
  .work-gallery figure:nth-child(3n){
    grid-column:auto;
  }

  .work-back{
    padding:0 0 120px;
  }

}



/* =========================================
   WORKS ARCHIVE
========================================= */

.works-archive{
  padding:180px 0;
  background:var(--bg);
}

.works-archive .container{
  width:min(1400px,88%);
}

.works-archive-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:80px 32px;
}

.works-archive-card{
  display:block;
}

.works-archive-card figure{
  margin:0;
}

.works-archive-card img{
  aspect-ratio:4/5;
  object-fit:cover;
  filter:grayscale(100%);
  transition:
    filter .6s ease,
    transform .8s ease;
}

.works-archive-card:hover img{
  filter:grayscale(0%);
  transform:scale(1.015);
}

.works-archive-card figure{
  overflow:hidden;
}

.works-archive-card figcaption{
  padding-top:22px;
}

.works-archive-card span{
  display:block;
  margin-bottom:12px;

  font-family:var(--font-en);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;

  color:var(--text-sub);
}

.works-archive-card h3{
  margin:0 0 8px;

  font-family:var(--font-en);
  font-size:18px;
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.5;
}

.works-archive-card p{
  margin:0;

  font-size:12px;
  line-height:1.9;
  letter-spacing:.04em;

  color:var(--text-sub);
}

@media(max-width:768px){

  .works-archive{
    padding:120px 0;
  }

  .works-archive-grid{
grid-template-columns: repeat(2,1fr);
gap: 25px;
  }

  .works-archive-card img{
    filter:grayscale(35%);
  }

}


/* ======================================
Event LP Common
======================================*/

.event-lp {
  color: #222;
  background: #fff;
}

.event-hero {
  position: relative;
  padding: 0;
}

.event-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.event-hero-image img {
  width: 100%;
  height: 100vh;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.event-hero-text {
  position: absolute;
  left: 8vw;
  bottom: 8vw;
  z-index: 1;
  max-width: 560px;
  color: #fff;
}

.event-kicker,
.event-label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.event-hero-text h1 {
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.35;
  font-weight: 400;
  margin: 0 0 24px;
}

.event-hero-text p {
  font-size: 15px;
  line-height: 2;
}

.event-section {
  padding: 110px 0;
}

.event-container {
  width: min(1120px, 86vw);
  margin: 0 auto;
}

.event-container.narrow {
  width: min(760px, 86vw);
}

.event-section h2,
.event-cta h2 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.6;
  font-weight: 400;
  margin: 0 0 32px;
}

.event-section p {
  font-size: 15px;
  line-height: 2.2;
}

.event-lead {
  max-width: 680px;
  margin-bottom: 56px;
}

.event-muted {
  background: #f7f7f5;
}


/* Gallery */

.event-gallery-grid {
  width: min(1280px, 90vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.event-gallery-grid figure {
  margin: 0;
}

.event-gallery-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.event-gallery-grid figcaption {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #666;
}

.event-caption {
  width: min(1280px, 90vw);
  margin: 24px auto 0;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .08em;
  color: #666;
  text-align: right;
}


/* Tree Size */

.event-size-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.event-size-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.event-size-card h3 {
  margin: 20px 0 10px;
  font-size: 18px;
  font-weight: 400;
}

.event-size-card p {
  font-size: 14px;
  line-height: 2;
  color: #666;
}


/* Info / Detail */

.event-detail-grid,
.event-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
  border-top: 1px solid #ddd;
  padding-top: 36px;
}

.event-detail-grid h3,
.event-info-grid h3,
.event-style-sample h3 {
  font-size: 15px;
  font-weight: 400;
  margin: 0 0 18px;
  letter-spacing: .08em;
}

.event-detail-grid p,
.event-info-grid p {
  font-size: 14px;
  line-height: 2.1;
  color: #666;
}


/* Proposal block inside WHAT WE DO */

/* From Concept to Space */

.event-support {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid #ddd;
}

.event-support-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.event-support-gallery figure {
  margin: 0;
}

.event-support-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.event-support-gallery figcaption {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #666;
}

.event-support-text {
  max-width: 760px;
  margin-top: 40px;
}

.event-support-text h3 {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .08em;
  margin: 0 0 22px;
}

.event-support-text p {
  font-size: 14px;
  line-height: 2.1;
  color: #666;
  margin: 0;
}

@media (max-width: 900px) {
  .event-support {
    margin-top: 48px;
    padding-top: 40px;
  }

  .event-support-gallery {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .event-support-text {
    margin-top: 32px;
  }
}



/* Style Sample */

.event-style-sample {
  margin-top: 56px;
}

.event-style-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
}

.event-style-grid figure {
  margin: 0;
}

.event-style-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.event-style-grid figcaption {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
  color: #666;
}


/* Cards */

.event-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  border-top: 1px solid #ddd;
  padding-top: 28px;
}

.event-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.event-card h3 {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  margin: 18px 0 10px;
}

.event-card p {
  font-size: 13px;
  line-height: 2;
  color: #666;
}


/* Budget */

.event-budget-list {
  border-top: 1px solid #ddd;
}

.event-budget-list div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #ddd;
}

.event-budget-list span {
  font-size: 14px;
  letter-spacing: .08em;
}

.event-budget-list strong {
  font-size: 18px;
  font-weight: 400;
}

.event-note {
  margin-top: 24px;
  font-size: 12px !important;
  color: #666;
}


/* FAQ */

.event-faq details {
  border-top: 1px solid #ddd;
}

.event-faq details:last-child {
  border-bottom: 1px solid #ddd;
}

.event-faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 28px 48px 28px 0;
  font-size: 15px;
  line-height: 1.8;
}

.event-faq summary::-webkit-details-marker {
  display: none;
}

.event-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  transition: transform .25s ease;
}

.event-faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.event-faq details p {
  margin: 0;
  padding: 0 0 28px;
  color: #666;
  line-height: 2;
  font-size: 14px;
}

.event-faq details[open] p {
  animation: faqFade .2s ease;
}

@keyframes faqFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* CTA */

.event-cta {
  padding: 120px 0 140px;
  text-align: center;
  background: #111;
  color: #fff;
}

.event-cta p {
  font-size: 15px;
  line-height: 2.2;
  margin-bottom: 40px;
}

.event-button {
  display: inline-block;
  padding: 16px 48px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .12em;
}


/* ======================================
Christmas LP Individual
======================================*/

.christmas-lp .event-hero::after {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, .42) 0%,
    rgba(0, 0, 0, .28) 38%,
    rgba(0, 0, 0, .08) 72%,
    rgba(0, 0, 0, .02) 100%
  );
}

.christmas-lp .event-hero-text {
  max-width: 780px;
  left: 8vw;
  bottom: 9vw;
}

.christmas-lp .event-hero-text h1 {
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: 1.35;
  letter-spacing: .04em;
  margin-bottom: 32px;
}

.christmas-lp .event-hero-text p {
  font-size: 16px;
  line-height: 2.1;
}

.christmas-lp .event-kicker {
  font-size: 12px;
  letter-spacing: .22em;
  margin-bottom: 28px;
}

.christmas-lp .event-hero-text h1 .nowrap {
  white-space: nowrap;
}


/* ======================================
Responsive
======================================*/

@media (max-width: 900px) {
  .event-hero-image img {
    height: 72vh;
    min-height: 520px;
  }

  .event-section {
    padding: 80px 0;
  }

  .event-hero-text {
    left: 6vw;
    right: 6vw;
    bottom: 11vw;
    max-width: none;
  }

  .event-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 14px;
  }

  .event-size-grid,
  .event-detail-grid,
  .event-info-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .event-style-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 10px;
  }

  .event-style-grid figcaption {
    font-size: 10px;
  }

  .event-card-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .event-budget-list div {
    display: block;
  }

  .event-budget-list strong {
    display: block;
    margin-top: 8px;
  }

  .event-caption {
    width: 90vw;
    text-align: left;
  }

  .christmas-lp .event-hero::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, .12) 0%,
      rgba(0, 0, 0, .18) 35%,
      rgba(0, 0, 0, .58) 100%
    );
  }

  .christmas-lp .event-hero-text h1 {
    font-size: clamp(32px, 9vw, 46px);
    line-height: 1.45;
    letter-spacing: .03em;
  }

  .christmas-lp .event-hero-text p {
    font-size: 14px;
    line-height: 2;
  }
}