/* --------------------------------------------------
   Design Tokens
-------------------------------------------------- */
:root{
  --primary:#00bfa5;          /* Ariel Green */
  --accent:#4ecdc4;           /* Light Ariel Green */
  --secondary:#ff6b9d;        /* Coral Pink */
  --tertiary:#f0fdfa;         /* Mint Cream */
  --bg-light:#fefffe;         /* Crisp White */
  --bg-alt:#f0fdfa;           /* Light Mint */
  --dark:#134e4a;             /* Deep Teal */
  --text-muted:#5f8a8b;       /* Muted Teal */
  --ariel-gradient:linear-gradient(135deg, #00bfa5 0%, #4ecdc4 50%, #7dd3fc 100%);
  --coral-gradient:linear-gradient(135deg, #ff6b9d 0%, #f472b6 100%);
  --radius:8px;
  --gap:1.8rem;
  --shadow-soft:0 6px 24px rgba(0, 191, 165, 0.12);
  --shadow-medium:0 10px 32px rgba(0, 191, 165, 0.18);

  /* Typography scale (mobile) */
  font-size:16px;
}
@media(min-width:768px){
  :root{font-size:18px;}
}

/* --------------------------------------------------
   Reset / Base
-------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
img{display:block;max-width:100%;height:auto;border-radius:var(--radius);}
a{text-decoration:none;color:inherit;}

body{
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
  color:var(--dark);
  background:var(--bg-light);
  line-height:1.8;
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:0.02em;
}

/* Headings */
h1,h2,h3{
  font-weight:600;
  letter-spacing:0.01em;
}
h1{
  font-size:2.6rem;
  text-align:center;
  font-weight:300;
  letter-spacing:0.05em;
}
/* Section Title Structure */
.section-title{
  text-align:center;
  margin-bottom:3rem;
}

.section-subtitle{
  font-size:0.9rem;
  color:var(--text-muted);
  margin-bottom:0.5rem;
  font-weight:400;
  letter-spacing:0.1em;
}

h2{
  font-family:'Dancing Script', cursive;
  font-size:3.2rem;
  font-weight:600;
  text-align:center;
  margin:0;
  position:relative;
  color:var(--accent);
  letter-spacing:0.02em;
}

h2::after{
  content:'';
  display:block;
  width:60px;
  height:2px;
  background:var(--ariel-gradient);
  margin:1rem auto 0;
}
h3{
  font-family:'Noto Serif JP', serif;
  font-size:1.4rem;
  font-weight:500;
  margin-bottom:.8rem;
  color:var(--accent);
  letter-spacing:0.02em;
}
@media(min-width:768px){
  h1{font-size:3.4rem;}
  h2{font-size:4.2rem;}
  h3{font-size:1.4rem;}
  .section-subtitle{font-size:1rem;}
}

/* Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 2rem;}
section{padding:120px 0;position:relative;}
@media(max-width:480px){
  section{padding:100px 0;}
  .container{padding:0 1.5rem;}
}

.alt{
  background:var(--bg-alt);
  border-top:1px solid rgba(0, 191, 165, 0.15);
  border-bottom:1px solid rgba(0, 191, 165, 0.15);
}
.section-lead{
  font-size:1.1rem;
  color:var(--text-muted);
  text-align:center;
  max-width:600px;
  margin:0 auto 3rem;
  line-height:1.7;
}

/* Grids */
.info-grid,
.features-grid,
.machines-grid,
.staff-grid,
.gallery-grid{
  display:grid;
  gap:var(--gap);
}
.info-grid,
.features-grid,
.machines-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.staff-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}

/* Cards / Utilities */
.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:2rem;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border:1px solid rgba(0, 191, 165, 0.08);
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-medium);
}
.card img{margin:0 auto 1.5rem;}

.btn{
  display:inline-block;
  background:var(--ariel-gradient);
  color:#fff;
  font-weight:600;
  padding:1rem 2.5rem;
  border-radius:25px;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:var(--shadow-soft);
  border:none;
  cursor:pointer;
  font-size:1rem;
  letter-spacing:0.02em;
  position:relative;
  overflow:hidden;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-medium);
}
.btn:active{
  transform:translateY(0);
}
.btn.secondary{
  background:#fff;
  color:var(--primary);
  border:2px solid var(--primary);
  box-shadow:none;
}
.btn.secondary:hover{
  background:var(--primary);
  color:#fff;
}

/* Fade-in animation */
.fade{
  opacity:0;
  transform:translateY(60px);
  transition:all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade.show{
  opacity:1;
  transform:none;
}

/* Accent circular trainer photos */
.sister-accent{
  position:absolute;
  border:4px solid #fff;
  border-radius:50%;
  max-width:120px;
  width:35vw;
  box-shadow:0 6px 14px rgba(0,0,0,.1);
  z-index:5;
}
@media(min-width:768px){.sister-accent{max-width:180px;}}

/* --------------------------------------------------
   Header
-------------------------------------------------- */
header{
  position:fixed;
  top:0;left:0;width:100%;
  height:72px;
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 12px rgba(0,191,165,.08);
  z-index:1000;
  border-bottom:1px solid rgba(0,191,165,.1);
}
header .inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem;
}

.logo{
  display:flex;
  align-items:center;
}

.logo img{
  height:60px;
  width:auto;
  transition:transform 0.3s ease;
}

.logo:hover img{
  transform:scale(1.05);
}

/* Navigation */
nav{display:none;}

nav ul{
  list-style:none;
  display:flex;
  gap:2rem;
}

nav a{
  font-weight:500;
  color:var(--dark);
  text-decoration:none;
  transition:all 0.3s ease;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.2rem;
}

nav a:hover{
  color:var(--primary);
}

.nav-main{
  font-family:'Dancing Script', cursive;
  font-size:1.1rem;
  font-weight:500;
  letter-spacing:0.02em;
}

.nav-sub{
  font-size:0.7rem;
  color:var(--text-muted);
  font-weight:400;
  transition:color 0.3s ease;
}

nav a:hover .nav-sub{
  color:var(--accent);
}

.burger{
  width:24px;
  height:19px;
  display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;
  background:none;border:none;padding:0;
}
.burger span{
  width:100%;
  height:3px;
  border-radius:2px;
  background:var(--dark);
  transition:.3s;
}
header.open .burger span:nth-child(1){
	transform:translateY(8px) rotate(135deg);
}
header.open .burger span:nth-child(2){
	opacity:0;
}
header.open .burger span:nth-child(3){
	transform:translateY(-8px) rotate(-135deg);
}

header.open nav{
  position:fixed;
  top:70px;
  bottom:0;
  left:0;
  right:0;
  display:block;
  background:rgba(255,255,255,0.8);
  backdrop-filter:saturate(180%) blur(12px);
}
header.open nav ul{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  justify-content:space-between;
  padding:1rem 1rem 2rem;
  align-items:center;
}

@media(min-width:1024px){
  nav{display:block !important;}
  .burger{display:none;}
}

@media(max-width:1023px){
  header .inner{
    padding:0 1rem;
  }
  
  .logo img{
    height:50px;
  }
  
  
  header.open nav ul{
    gap:0.5rem;
  }
  .nav-main{
    font-size:1.5rem;
    line-height:1;
  }
  
  .nav-sub{
    font-size:1rem;
  }
}

/* --------------------------------------------------
   Hero
-------------------------------------------------- */
.hero{
  width:100%;
  height:auto;
  position:relative;
  overflow:hidden;
  margin:0;
  padding:0;
}
.hero-image{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:1599/769;
  object-fit:cover;
  border-radius:0;
  margin:0;
  padding:0;
}

/* Mobile hero adjustments */
@media(max-width:768px){
  .hero{
    padding-top:0;
  }
  
  .hero-image{
    content:url('images/common/hero-sp.jpg');
    width:100%;
    height:auto;
    aspect-ratio:1163/767;
    object-fit:cover;
    transform:none;
  }
}
.hero h1{
  background:var(--ariel-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero p{
  max-width:680px;
  margin:1.5rem auto 3rem;
  font-size:1.2rem;
  color:var(--text-muted);
}
.cta-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  justify-content:center;
}
.cta-hero{
  background:var(--ariel-gradient);
  color:#fff;
  border-top:1px solid rgba(255, 255, 255, 0.2);
  border-bottom:1px solid rgba(255, 255, 255, 0.2);
}
.cta-hero h2{
  color:#fff;
}
.cta-hero h2::after{
  background:#fff;
}
.cta-hero::before{display:none;}

/* --------------------------------------------------
   Information Section - Campaign & News
-------------------------------------------------- */
.campaign-hero{
  background:#fff;
  border-radius:var(--radius);
  padding:2.5rem;
  margin-bottom:3rem;
  box-shadow:var(--shadow-medium);
  border:2px solid transparent;
  background-clip:padding-box;
  position:relative;
}

.campaign-hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--ariel-gradient);
  border-radius:var(--radius);
  padding:2px;
  z-index:-1;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:exclude;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
}

.campaign-content{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:2rem;
  align-items:center;
}

.campaign-text h3{
  color:var(--primary);
  font-size:2rem;
  margin-bottom:1rem;
}

.campaign-price{
  font-size:1.3rem;
  font-weight:600;
  margin-bottom:1rem;
}

.price-highlight{
  font-size:2.2rem;
  color:var(--secondary);
  font-weight:700;
}

.campaign-desc{
  color:var(--text-muted);
  margin-bottom:1.5rem;
  line-height:1.6;
}

.campaign-btn{
  background:var(--coral-gradient);
  padding:1rem 2rem;
  font-size:1.1rem;
}

.campaign-image img{
  border-radius:var(--radius);
  width:100%;
  height:200px;
  object-fit:cover;
}

.news-section{
  margin-top:3rem;
}

.news-section h4{
  font-family:'Noto Serif JP', serif;
  font-weight:500;
  color:var(--accent);
  font-size:1.3rem;
  margin-bottom:2rem;
  text-align:center;
  position:relative;
  letter-spacing:0.02em;
}

.news-section h4::after{
  content:'';
  display:block;
  width:40px;
  height:2px;
  background:var(--ariel-gradient);
  margin:0.5rem auto 0;
}

.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
}

.news-item{
  background:#fff;
  padding:2rem;
  border-radius:var(--radius);
  border:1px solid rgba(0,191,165,0.1);
  box-shadow:var(--shadow-soft);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
}

.news-item::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:var(--ariel-gradient);
  opacity:0.8;
}

.news-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-medium);
  border-color:var(--accent);
}

.news-date{
  color:var(--text-muted);
  font-size:0.85rem;
  font-weight:600;
  background:var(--bg-alt);
  padding:0.3rem 0.8rem;
  border-radius:20px;
  display:inline-block;
  margin-bottom:1rem;
}

.news-item h5{
  font-family:'Noto Serif JP', serif;
  color:var(--dark);
  margin:0 0 0.8rem 0;
  font-size:1.1rem;
  font-weight:500;
  line-height:1.4;
  letter-spacing:0.02em;
}

.news-item p{
  color:var(--text-muted);
  font-size:0.95rem;
  line-height:1.6;
  margin:0;
}

@media(max-width:768px){
  .campaign-content{
    grid-template-columns:1fr;
    text-align:center;
  }
  
  .campaign-image{
    order:-1;
  }
}

/* --------------------------------------------------
   Features Layout - Center Image + 4 Points
-------------------------------------------------- */
#features{
  position:relative;
  overflow:hidden;
}
#features::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="spa-pattern" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="8" cy="8" r="1.5" fill="%2300bfa5" opacity="0.02"/><circle cx="32" cy="32" r="1" fill="%234ecdc4" opacity="0.03"/><circle cx="20" cy="25" r="0.8" fill="%2300bfa5" opacity="0.02"/><path d="M15,15 Q20,10 25,15 Q20,20 15,15" fill="%234ecdc4" opacity="0.015"/><path d="M5,35 Q10,30 15,35 Q10,40 5,35" fill="%2300bfa5" opacity="0.015"/></pattern></defs><rect width="100" height="100" fill="url(%23spa-pattern)"/></svg>');
  pointer-events:none;
  z-index:0;
}
#features .container{
  position:relative;
  z-index:1;
}

.features-layout{
  display:grid;
  grid-template-columns:1fr 300px 1fr;
  gap:3rem;
  align-items:center;
  max-width:1000px;
  margin:0 auto;
}

.features-left,
.features-right{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.feature-item{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.5rem;
  background:rgba(255,255,255,0.6);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  border:1px solid rgba(0,191,165,0.08);
  transition:all 0.3s ease;
}

.feature-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-soft);
  background:rgba(255,255,255,0.8);
}

.feature-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,191,165,0.2);
}

.feature-icon img{
  width:24px;
  height:24px;
  filter:brightness(0) invert(1);
}

.feature-content{
  flex:1;
}

.feature-content h3{
  color:var(--primary);
  font-size:1.2rem;
  margin-bottom:0.8rem;
}

.feature-content p{
  color:var(--text-muted);
  font-size:0.95rem;
  line-height:1.5;
}

.features-center{
  display:flex;
  justify-content:center;
}

.center-image{
  border-radius:var(--radius);
  width:100%;
  max-width:300px;
  height:400px;
  object-fit:cover;
  box-shadow:var(--shadow-medium);
}

@media(max-width:768px){
  .features-layout{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    max-width:none;
    width:100%;
  }
  
  .features-left,
  .features-right{
    order:2;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    width:100%;
  }
  
  .features-center{
    order:1;
    width:100%;
  }
  
  .center-image{
    height:300px;
    width:100%;
    max-width:300px;
    margin:0 auto;
  }
  
  .feature-item{
    flex-direction:column;
    text-align:center;
    padding:2rem 1.5rem;
    background:rgba(255,255,255,0.8);
    width:100%;
    margin:0;
    box-sizing:border-box;
  }
  
  .feature-icon{
    width:56px;
    height:56px;
    margin:0 auto 1rem;
  }
  
  .feature-icon img{
    width:28px;
    height:28px;
  }
  
  .feature-content{
    width:100%;
  }
  
  .feature-content h3{
    font-size:1.3rem;
    margin-bottom:1rem;
  }
  
  .feature-content p{
    font-size:1rem;
  }
}

/* --------------------------------------------------
   Staff Layout - Side by Side
-------------------------------------------------- */
.staff-layout{
  display:flex;
  flex-direction:column;
  gap:4rem;
  max-width:1000px;
  margin:0 auto;
}

.staff-member{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:3rem;
  align-items:center;
}

.staff-member.reverse{
  grid-template-columns:1fr 300px;
}

.staff-member.reverse .staff-image{
  order:2;
}

.staff-member.reverse .staff-info{
  order:1;
  text-align:right;
}

.staff-image img{
  width:100%;
  height:400px;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-medium);
}

.staff-info h3{
  color:var(--primary);
  font-size:2rem;
  margin-bottom:0.5rem;
}

.staff-role{
  color:var(--accent);
  font-weight:600;
  font-size:1.1rem;
  margin-bottom:1rem;
}

.staff-message{
  color:var(--secondary);
  font-style:italic;
  font-size:1.1rem;
  margin-bottom:1.5rem;
  font-weight:500;
}

.staff-description{
  color:var(--text-muted);
  line-height:1.6;
}

@media(max-width:768px){
  .staff-member,
  .staff-member.reverse{
    grid-template-columns:1fr;
    text-align:center;
    gap:2rem;
  }
  
  .staff-member .staff-image,
  .staff-member.reverse .staff-image{
    order:1;
  }
  
  .staff-member .staff-info,
  .staff-member.reverse .staff-info{
    order:2;
    text-align:center;
  }
  
  .staff-image img{
    height:300px;
  }
}

/* --------------------------------------------------
   Gallery Masonry Layout
-------------------------------------------------- */
#gallery{
  position:relative;
  overflow:hidden;
}
.gallery-background{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:0;
  pointer-events:none;
}
.gallery-bg-image{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(15px);
  transform:scale(1.1);
  opacity:0.8;
  transition:all 0.8s ease-in-out;
}
.gallery-bg-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(5px);
}
.gallery-masonry{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,200px);
  gap:1rem;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.gallery-flex{
	display:flex;
	flex-wrap:wrap;
  gap:1rem;
}
.gallery-flex > *{
	width:calc(50% - 0.5rem);
	aspect-ratio:4/3;
}
.gallery-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition:transform 0.3s ease;
}

.gallery-item:hover{
  transform:scale(1.02);
}

.gallery-item.large{
  grid-column:span 2;
  grid-row:span 2;
}

.gallery-item.medium{
  grid-column:span 1;
  grid-row:span 2;
}

.gallery-item.small{
  grid-column:span 1;
  grid-row:span 1;
}

.gallery-item.wide{
  grid-column:span 4;
  grid-row:span 1;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}

.gallery-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.8));
  color:#fff;
  padding:1.5rem;
  transform:translateY(100%);
  transition:transform 0.3s ease;
}

.gallery-item:hover .gallery-overlay{
  transform:translateY(0);
}

.gallery-overlay h4{
  font-size:1.1rem;
  margin-bottom:0.5rem;
}

.gallery-overlay p{
  font-size:0.9rem;
  opacity:0.9;
}

@media(max-width:768px){
  .gallery-masonry{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(3,150px);
    gap:0.8rem;
  }
  .gallery-flex > *{
    width:80%;
    margin:0 auto;
  }
  
  .gallery-item.large{
    grid-column:span 2;
    grid-row:span 2;
  }
  
  .gallery-item.medium{
    grid-column:span 1;
    grid-row:span 1;
  }
  
  .gallery-item.wide{
    grid-column:span 2;
    grid-row:span 1;
  }
}

/* --------------------------------------------------
   Mid-page CTA Section
-------------------------------------------------- */
.mid-cta{
  width:100%;
  height:auto;
  position:relative;
  overflow:hidden;
  margin:0;
  padding:0;
}
.cta-image{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:0;
  margin:0;
  padding:0;
}

.cta-content{
  text-align:center;
  max-width:600px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.cta-content h2{
  font-family:'Dancing Script', cursive;
  font-size:2.8rem;
  font-weight:600;
  color:var(--accent);
  margin-bottom:1.5rem;
  letter-spacing:0.02em;
}

.cta-description{
  color:var(--text-muted);
  font-size:1.1rem;
  line-height:1.6;
  margin-bottom:2.5rem;
}

.mid-cta .cta-buttons{
  justify-content:center;
}

@media(min-width:768px){
  .cta-content h2{
    font-size:3.2rem;
  }
  
  .cta-description{
    font-size:1.2rem;
  }
}

@media(max-width:768px){
  .mid-cta{
    padding:0;
    margin:0;
  }
  
  .cta-image{
    content:url('images/common/cta-sp.jpg');
    width:100%;
    height:auto;
    aspect-ratio:1163/633;
    object-fit:cover;
    transform:none;
  }
}

/* --------------------------------------------------
   CTA Buttons
-------------------------------------------------- */
.cta-buttons{
  display:flex;
  gap:1.5rem;
  justify-content:center;
  flex-wrap:wrap;
}

.cta-primary,
.cta-secondary{
  display:flex;
  align-items:center;
  gap:0.8rem;
  padding:1.2rem 2.5rem;
  font-size:1.1rem;
  border-radius:30px;
  font-weight:600;
  transition:all 0.3s ease;
}

.cta-primary{
  background:#fff;
  color:var(--primary);
  border:2px solid #fff;
}

.cta-primary:hover{
  background:var(--tertiary);
  transform:translateY(-2px);
}

.cta-secondary{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}

.cta-secondary:hover{
  background:#fff;
  color:var(--primary);
  transform:translateY(-2px);
}

.cta-primary img,
.cta-secondary img{
  width:24px;
  height:24px;
}

/* --------------------------------------------------
   Machines Visual Layout
-------------------------------------------------- */
.machines-visual-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
  gap:2.5rem;
  max-width:1200px;
  margin:0 auto;
}

.machine-item{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(0,191,165,0.1);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}

.machine-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-medium);
  border-color:var(--accent);
}

.machine-item.reverse{
  grid-template-columns:none;
}

.machine-item.reverse .machine-image{
  order:initial;
}

.machine-item.reverse .machine-content{
  order:initial;
  text-align:left;
}

.machine-image{
  position:relative;
  height:200px;
  overflow:hidden;
}

.machine-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.3s ease;
}

.machine-item:hover .machine-image img{
  transform:scale(1.05);
}

.machine-content{
  padding:2rem;
}

.machine-content h3{
  color:var(--primary);
  font-size:1.5rem;
  margin-bottom:1rem;
  text-align:center;
}

.machine-feature{
  color:var(--accent);
  font-weight:600;
  font-size:1rem;
  margin-bottom:1.5rem;
  text-align:center;
  padding:0.5rem 1rem;
  background:var(--bg-alt);
  border-radius:20px;
  display:inline-block;
  width:100%;
  box-sizing:border-box;
}

.machine-desc{
  color:var(--text-muted);
  line-height:1.6;
  font-size:1.05rem;
  text-align:center;
}

@media(max-width:768px){
  .machines-visual-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  
  .machine-item{
    max-width:400px;
    margin:0 auto;
  }
  
  .machine-content{
    padding:1.5rem;
  }
  
  .machine-content h3{
    font-size:1.3rem;
  }
  
  .machine-feature{
    font-size:0.95rem;
  }
  
  .machine-desc{
    font-size:1rem;
  }
}

/* --------------------------------------------------
   Menu Section
-------------------------------------------------- */
.menu-categories{
  display:flex;
  flex-direction:column;
  gap:4rem;
  max-width:1200px;
  margin:0 auto;
}

.menu-category{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(0, 191, 165, 0.08);
}

.category-header{
  position:relative;
  height:200px;
  overflow:hidden;
}

.category-image{
  width:100%;
  height:100%;
  object-fit:cover;
}

.category-header h3{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.8));
  color:#fff;
  padding:2rem;
  margin:0;
  font-size:2rem;
  font-weight:600;
}

.menu-items{
  padding:2rem;
}

.menu-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:1.5rem 0;
  border-bottom:1px solid rgba(0, 191, 165, 0.1);
}

.menu-item:last-child{
  border-bottom:none;
}

.menu-info{
  flex:1;
}

.menu-info h4{
  font-family:'Noto Serif JP', serif;
  color:var(--primary);
  font-size:1.3rem;
  margin-bottom:0.5rem;
  font-weight:500;
  letter-spacing:0.02em;
}

.menu-desc{
  color:var(--text-muted);
  font-size:0.95rem;
  line-height:1.5;
  margin-bottom:0.5rem;
}

.menu-time{
  color:var(--accent);
  font-size:0.9rem;
  font-weight:600;
}

.menu-price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.5rem;
  min-width:160px;
}

.price-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.8rem;
  min-width:100%;
  padding:0.4rem 0.6rem;
  background:rgba(0, 191, 165, 0.04);
  border-radius:6px;
  border:1px solid rgba(0, 191, 165, 0.1);
  transition:all 0.2s ease;
}

.price-item:hover{
  background:rgba(0, 191, 165, 0.08);
  border-color:var(--accent);
}

.price-item.trial{
  background:var(--coral-gradient);
  border-color:var(--secondary);
}

.price-item.trial .price-detail,
.price-item.trial .price-amount{
  color:#fff;
}

.price-detail{
  color:var(--text-muted);
  font-size:0.9rem;
  font-weight:500;
  white-space:nowrap;
}

.price-amount{
  color:var(--primary);
  font-size:1.2rem;
  font-weight:700;
  white-space:nowrap;
}

.price-regular{
  color:var(--primary);
  font-size:1.4rem;
  font-weight:700;
}

.price-trial{
  color:var(--secondary);
  font-size:1.1rem;
  font-weight:600;
  background:var(--coral-gradient);
  color:#fff;
  padding:0.3rem 0.8rem;
  border-radius:20px;
  font-size:0.9rem;
}

.menu-note{
  background:var(--tertiary);
  padding:2rem;
  border-radius:var(--radius);
  margin-top:3rem;
  text-align:center;
}

.menu-note p{
  color:var(--text-muted);
  margin-bottom:0.5rem;
  font-size:0.9rem;
}

.menu-note p:last-child{
  margin-bottom:0;
}

.menu-note strong{
  color:var(--primary);
}

@media(max-width:768px){
  .menu-categories{
    gap:2.5rem;
  }
  
  .category-header{
    height:150px;
  }
  
  .category-image{
    object-position:left center;
  }
  
  .category-header h3{
    font-size:1.5rem;
    padding:1.5rem;
  }
  
  .menu-items{
    padding:1.5rem;
  }
  
  .menu-item{
    flex-direction:column;
    gap:1rem;
    align-items:flex-start;
  }
  
  .menu-price{
    align-items:flex-start;
    min-width:auto;
    width:100%;
  }
  
  .price-item{
    width:100%;
    padding:0.5rem 0.8rem;
  }
  
  .price-detail{
    font-size:0.85rem;
  }
  
  .price-amount{
    font-size:1.1rem;
  }
  
  .menu-note{
    padding:1.5rem;
    margin-top:2rem;
  }
}

/* --------------------------------------------------
   Flow Visual Steps
-------------------------------------------------- */
.flow-visual-steps{
  display:flex;
  flex-direction:column;
  gap:4rem;
  max-width:1000px;
  margin:0 auto;
  position:relative;
}

.flow-visual-steps::before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:3px;
  background:linear-gradient(180deg, var(--accent) 0%, var(--primary) 50%, var(--accent) 100%);
  z-index:1;
  opacity:0.3;
}

.flow-step{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
  position:relative;
  z-index:2;
}

.flow-step:nth-child(even){
  direction:rtl;
}

.flow-step:nth-child(even) .flow-image,
.flow-step:nth-child(even) .flow-content{
  direction:ltr;
}

.flow-step:nth-child(even) .flow-content{
  text-align:right;
}

.flow-step:nth-child(odd) .flow-content{
  text-align:left;
}

.flow-step.reverse{
  grid-template-columns:1fr 1fr;
}

.flow-step.reverse .flow-image{
  order:initial;
}

.flow-step.reverse .flow-content{
  order:initial;
  text-align:right;
}

.flow-image{
  position:relative;
  margin-bottom:0;
}

.flow-image img{
  width:100%;
  height:280px;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}

.flow-image .step-number{
  position:absolute;
  top:50%;
  right:-35px;
  transform:translateY(-50%);
  width:70px;
  height:70px;
  border-radius:50%;
  background:var(--ariel-gradient);
  color:#fff;
  font-weight:700;
  font-size:1.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-medium);
  border:4px solid #fff;
  z-index:3;
}

.flow-step:nth-child(even) .flow-image .step-number{
  right:auto;
  left:-35px;
}

.flow-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2rem;
}

.flow-content h3{
  color:var(--primary);
  font-size:1.6rem;
  margin-bottom:1.5rem;
}

.flow-desc{
  color:var(--text-muted);
  line-height:1.7;
  font-size:1rem;
}

@media(max-width:768px){
  .flow-visual-steps{
    gap:3rem;
  }
  
  .flow-visual-steps::before{
    left:30px;
    width:2px;
  }
  
  .flow-step,
  .flow-step.reverse{
    grid-template-columns:1fr;
    gap:2rem;
    direction:ltr;
  }
  
  .flow-step:nth-child(even){
    direction:ltr;
  }
  
  .flow-step .flow-content,
  .flow-step.reverse .flow-content,
  .flow-step:nth-child(even) .flow-content,
  .flow-step:nth-child(odd) .flow-content{
    text-align:left;
    order:2;
    padding:0 0 0 3rem;
  }
  
  .flow-step .flow-image,
  .flow-step.reverse .flow-image{
    order:1;
  }
  
  .flow-image img{
    height:200px;
  }
  
  .flow-image .step-number,
  .flow-step.reverse .flow-image .step-number{
    width:60px;
    height:60px;
    font-size:1.5rem;
    top:20px;
    left:-30px;
    right:auto;
  }
  
  .flow-content h3{
    font-size:1.3rem;
  }
  
  .flow-desc{
    font-size:0.95rem;
  }
}

/* --------------------------------------------------
   Features / Machines additional tweaks
-------------------------------------------------- */
.feature{text-align:center;padding:2rem;}
.machine h3{margin-bottom:.4rem;}

/* --------------------------------------------------
   Flow
-------------------------------------------------- */
.flow-steps{
  display:flex;flex-direction:column;gap:var(--gap);
  max-width:700px;margin:0 auto;
}
.step{
  display:flex;gap:1.2rem;align-items:flex-start;
}
.step-number{
  min-width:52px;height:52px;
  border-radius:50%;background:var(--primary);color:#fff;
  font-weight:700;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 6px rgba(0,0,0,.15);
}

/* --------------------------------------------------
   FAQ
-------------------------------------------------- */
.faq-item{
  background:#fff;
  border-radius:var(--radius);
  margin-bottom:1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.faq-question{
  padding:1.2rem;font-weight:700;cursor:pointer;position:relative;
}
.faq-question::after{
  content:'+';position:absolute;right:1.2rem;font-size:1.5rem;transition:.3s;
}
.faq-answer{
  padding:0 1.2rem;
  height:0;overflow:hidden;
  transition:.3s ease;
}
.faq-item.open .faq-answer{height:auto;padding:1.2rem;}
.faq-item.open .faq-question::after{transform:rotate(45deg);}

/* --------------------------------------------------
   Map
-------------------------------------------------- */
.map{width:100%;height:340px;border:none;border-radius:var(--radius);}

/* --------------------------------------------------
   Floating LINE CTA
-------------------------------------------------- */
.line-float-button {
  position:fixed;right:24px;bottom:24px;
  display:none;
  z-index:800;
}
.line-float{
  background:var(--ariel-gradient);
  color:#fff;
  padding:1rem 1.5rem;
  border-radius:30px;
  font-weight:600;
  display:flex;align-items:center;gap:.8rem;
  box-shadow:var(--shadow-medium);
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:0.95rem;
  letter-spacing:0.02em;
}
.line-float:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 12px 36px rgba(0, 191, 165, 0.3);
}
.line-float img{width:28px;height:28px;}

/* --------------------------------------------------
   Access Section
-------------------------------------------------- */
.access-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  margin-top:3rem;
  align-items:start;
}

.access-map{
  top:120px;
}

.access-map iframe{
  width:100%;
  height:550px;
  border:none;
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}

.info-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  grid-auto-rows:min-content;
}

.info-card{
  background:#fff;
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(0,191,165,0.1);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  height:fit-content;
}

.info-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-medium);
  border-color:var(--accent);
}

.info-card.wide{
  grid-column:span 1;
  max-width:none;
}

.info-card .info-header{
  display:flex;
  align-items:center;
  gap:0.8rem;
}

.info-card .info-icon{
  width:24px;
  height:24px;
  flex-shrink:0;
}

.info-card .info-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.info-card h3{
  color:var(--accent);
  font-size:1.2rem;
  margin:0;
}

.info-card p{
  color:var(--text-muted);
  line-height:1.6;
  margin-bottom:0.3rem;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

.info-card p:last-child{
  margin-bottom:0;
}

.hours-table{
  margin-bottom:0.3rem;
}

.hours-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(0,191,165,0.1);
}

.hours-row.holiday{
  color:var(--secondary);
}

.hours-row .day{
  font-weight:600;
  color:var(--dark);
}

.hours-row .time{
  color:var(--text-muted);
}

.hours-note{
  font-size:0.9rem;
  color:var(--text-muted);
  font-style:italic;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-bottom:0.8rem;
}

.contact-item strong{
  color:var(--dark);
  min-width:60px;
}

.contact-item a{
  color:var(--accent);
  text-decoration:none;
  transition:color 0.2s;
}

.contact-item a:hover{
  color:var(--primary);
  text-decoration:underline;
}

.access-routes{
  margin-bottom:0.5rem;
}

.route-item{
  display:flex;
  flex-direction:column;
  padding:0.3rem 1rem;
  background:var(--bg-alt);
  border-radius:8px;
  border-left:3px solid var(--accent);
}

.route-item strong{
  color:var(--dark);
  font-size:0.95rem;
}

.route-item span{
  color:var(--text-muted);
  font-size:0.9rem;
}

.access-directions h4{
  font-family:'Noto Serif JP', serif;
  font-weight:500;
  color:var(--accent);
  margin-bottom:0.1rem;
  font-size:1.1rem;
  letter-spacing:0.02em;
}

.access-directions ol{
  margin-left:1.2rem;
}

.access-directions ol li{
  margin-bottom:0.1rem;
  color:var(--text-muted);
  line-height:1.5;
}

.parking-info{
  background:var(--bg-alt);
  padding:1rem;
  border-radius:8px;
  margin-top:1rem;
}

.parking-info strong{
  color:var(--dark);
}

/* Large desktop optimization */
@media(min-width:1400px){
  .access-layout{
    grid-template-columns:1fr 1fr;
    gap:5rem;
  }
  
  .info-cards{
    gap:0.5rem;
  }
  
  .info-card{
    padding:0.8rem 2rem;
    font-size: 0.9rem;
  }
  
  .access-map iframe{
    height:600px;
  }
}

/* Medium desktop */
@media(min-width:1024px) and (max-width:1399px){
  .access-layout{
    grid-template-columns:1fr 1fr;
    gap:3.5rem;
  }
  
  .info-cards{
    gap:2rem;
  }
}

/* Tablet landscape */
@media(min-width:769px) and (max-width:1023px){
  .access-layout{
    grid-template-columns:1fr;
    gap:3rem;
  }
  
  .access-map{
    position:static;
  }
  
  .access-map iframe{
    height:400px;
  }
  
  .info-cards{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
  
  .info-card{
    padding:1.8rem;
  }
}

/* Mobile responsive */
@media(max-width:768px){
  .access-layout{
    grid-template-columns:1fr;
    gap:2rem;
  }
  
  .access-map{
    position:static;
  }
  
  .access-map iframe{
    height:400px;
  }
  
  .info-cards{
    grid-template-columns:1fr;
    gap:1rem;
  }
  
  .info-card.wide{
    grid-column:span 1;
  }
  
  .info-card{
    padding:1.5rem;
  }
  .info-card h3 {
    font-size:1.5rem;
  }
  .info-card p{
    font-size:1rem;
  }
  .route-item{
    padding:0.6rem;
  }
  .route-item strong {
    font-size: 1.2rem;
  }
  .route-item span {
    font-size: 1.2rem;
  }
  .hours-row{
    align-items:flex-start;
    gap:0.2rem;
    font-size: 1.2rem;
  }
  
  .contact-item{
    align-items:flex-start;
    gap:0.2rem;
  }
  .info-card p.contact-item{
    font-size: 1.2rem;
  }
  .contact-item strong{
    min-width:auto;
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------
   SAFE SECTION BACKGROUNDS (eye-friendly gradients)
   Remove this section to rollback to plain backgrounds
-------------------------------------------------- */
.section-pattern-1::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(135deg, rgba(78, 205, 196, 0.015) 0%, transparent 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="ariel-wave1" width="120" height="60" patternUnits="userSpaceOnUse"><path d="M0,30 Q30,15 60,30 T120,30" stroke="%2300bfa5" stroke-width="0.5" fill="none" opacity="0.04"/><path d="M0,35 Q40,20 80,35 T160,35" stroke="%234ecdc4" stroke-width="0.3" fill="none" opacity="0.03"/><circle cx="90" cy="15" r="8" fill="%2300bfa5" opacity="0.02"/></pattern></defs><rect width="100" height="100" fill="url(%23ariel-wave1)"/></svg>');
  pointer-events:none;
  z-index:0;
}

.section-pattern-2::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(45deg, rgba(255, 107, 157, 0.012) 0%, transparent 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="ariel-wave2" width="100" height="80" patternUnits="userSpaceOnUse"><path d="M0,40 Q25,25 50,40 T100,40" stroke="%2300bfa5" stroke-width="0.4" fill="none" opacity="0.03"/><path d="M0,50 Q50,30 100,50" stroke="%234ecdc4" stroke-width="0.6" fill="none" opacity="0.02"/><circle cx="25" cy="60" r="3" fill="%234ecdc4" opacity="0.025"/></pattern></defs><rect width="100" height="100" fill="url(%23ariel-wave2)"/></svg>');
  pointer-events:none;
  z-index:0;
}

.section-pattern-3::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(90deg, rgba(78, 205, 196, 0.018) 0%, transparent 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="ariel-wave3" width="140" height="70" patternUnits="userSpaceOnUse"><path d="M0,35 Q35,20 70,35 T140,35" stroke="%2300bfa5" stroke-width="0.3" fill="none" opacity="0.05"/><path d="M0,45 Q45,25 90,45 T180,45" stroke="%234ecdc4" stroke-width="0.4" fill="none" opacity="0.03"/><circle cx="110" cy="20" r="12" fill="%2300bfa5" opacity="0.015"/></pattern></defs><rect width="100" height="100" fill="url(%23ariel-wave3)"/></svg>');
  pointer-events:none;
  z-index:0;
}

.section-pattern-4::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    linear-gradient(180deg, rgba(255, 107, 157, 0.010) 0%, transparent 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="ariel-wave4" width="160" height="50" patternUnits="userSpaceOnUse"><path d="M0,25 Q40,10 80,25 T160,25" stroke="%2300bfa5" stroke-width="0.5" fill="none" opacity="0.04"/><path d="M0,35 Q30,20 60,35 T120,35" stroke="%234ecdc4" stroke-width="0.3" fill="none" opacity="0.02"/><circle cx="40" cy="10" r="2" fill="%234ecdc4" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23ariel-wave4)"/></svg>');
  pointer-events:none;
  z-index:0;
}

/* Apply patterns to sections */
#information.section-pattern-1,
#features.section-pattern-2,
#machines.section-pattern-3,
#menu.section-pattern-1,
#flow.section-pattern-2,
#staff.section-pattern-3,
#gallery.section-pattern-4,
#faq.section-pattern-1{
  position:relative;
  overflow:hidden;
}
#access.section-pattern-2{
  position:relative;
  overflow:visible;
}

#information.section-pattern-1 .container,
#features.section-pattern-2 .container,
#machines.section-pattern-3 .container,
#menu.section-pattern-1 .container,
#flow.section-pattern-2 .container,
#staff.section-pattern-3 .container,
#gallery.section-pattern-4 .container,
#faq.section-pattern-1 .container,
#access.section-pattern-2 .container{
  position:relative;
  z-index:1;
}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */
footer{
  background:var(--accent);
  color:#fff;
  padding:4rem 0 0;
  border-top:1px solid rgba(255, 255, 255, 0.2);
}

.footer-content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:3rem;
  margin-bottom:3rem;
}

.footer-logo{
  margin-bottom:1.5rem;
}

.footer-logo img{
  height:50px;
  width:auto;
  filter:brightness(0) invert(1);
}

.footer-section h3{
  color:#fff;
  font-size:1.5rem;
  margin-bottom:1rem;
}

.footer-section h4{
  font-family:'Noto Serif JP', serif;
  color:#fff;
  font-size:1.1rem;
  margin-bottom:1rem;
  font-weight:500;
  letter-spacing:0.02em;
}

.footer-section p{
  color:rgba(255,255,255,1);
  line-height:1.6;
  margin-bottom:1.5rem;
}

.footer-section ul{
  list-style:none;
}

.footer-section ul li{
  margin-bottom:0.8rem;
}

.footer-section ul li a{
  color:rgba(255,255,255,1);
  transition:color 0.3s ease;
}

.footer-section ul li a:hover{
  color:#fff;
}

.social-links{
  display:flex;
  gap:1rem;
  margin-top:1.5rem;
}

.social-links a{
  display:inline-block;
  transition:transform 0.3s ease;
}

.social-links a:hover{
  transform:translateY(-2px);
}

.contact-info p{
  margin-bottom:1rem;
}

.contact-info strong{
  color:#fff;
}

.contact-info a{
  color:#fff;
  text-decoration:none;
}

.contact-info a:hover{
  text-decoration:underline;
}

.footer-bottom{
  background:#fff;
  border-top:1px solid rgba(0, 0, 0, 0.1);
  padding:1rem 0;
  text-align:center;
  width:100%;
}

.footer-bottom p{
  color:var(--dark);
  font-size:0.9rem;
  margin:0;
}

@media(max-width:768px){
  .footer-content{
    grid-template-columns:1fr;
    gap:2rem;
  }
  
  footer{
    padding:3rem 0 0;
  }
  
  .footer-bottom{
    padding:1rem 0;
    margin-top:1.5rem;
  }
}


/* ==========================================================================================================================================
	instagram
=========================================================================================================================================== */
.instaImages {
	padding:0 1em 2em;
	display:flex;
	justify-content:flex-start;
	align-items:stretch;
	flex-wrap:wrap;
}
.instaImages > div {
	width:calc(100% / 3);
	padding:3px;
}
.instaImages > div:nth-child(n + 10) {
	display:none;
}
.instaImages > div > a {
	position:relative;
	display:block;
}
.instaImages > div > a > * {
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
}
.instaImages > div.video > a:after {
	content:"";
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:25%;
	aspect-ratio:1/1;
	background:url(images/icons/instagram_reel_w.png) 50% 50% no-repeat;
	background-size:contain;
	filter:drop-shadow(0 0 3px #666);
	z-index:10;
}
.instaImages > div > a > span {
	display:none;
}
.instaImages > div.noData {
	width:100%;
	text-align:center;
	padding:3em 0;
	font-size:90%;
	color:#666;
}

.noData {
	margin:0 auto 3rem;
	font-size:90%;
	text-align:center;
}

@media screen and (min-width:768px) {
	.instaImages > div {
		width:calc(100% / 4);
	}
	.instaImages > div:nth-child(n + 9) {
		display:none;
	}
	.instaImages > div > a:hover {
		opacity:0.8;
	}

}


@media screen and (min-width:768px) {
	.sp{
		display:none !important;
	}
}
@media screen and (max-width:767px) {
	.pc{
		display:none !important;
	}
}


/* ==========================================================================================================================================
	hero
=========================================================================================================================================== */
.hero {
	height:100vh;
	min-height:30rem;
	padding:8rem 0 2rem;
	background:url(images/common/hero.jpg) 50% 50% no-repeat;
	background-size:cover;
	display:flex;
	align-items:center;
	justify-content:center;
}
.hero .container{
	filter:drop-shadow(0 0 0.3rem #fff) drop-shadow(0 0 0.3rem #fff) drop-shadow(0 0 0.5rem #fff) drop-shadow(0 0 0.8rem #fff);
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	text-align:center;
}
.hero h1 {
	font-size:4.6rem;
	font-weight:bold;
	color:var(--primary);
	font-family:'Noto Serif JP',serif;
}
.hero p {
	max-width: 100%;
	margin: 1rem auto 10rem;
	font-size:1.8rem;
	font-weight:bold;
	color:var(--dark);
	font-family:'Noto Serif JP',serif;
}
.hero-buttons {
	display:flex;
	justify-content:center;
	gap:3rem;
}
.hero-button {
	min-height:100%;
	padding:0.8rem 3.5rem;
	line-height:1.2;
	font-size:1.6rem;
	font-weight:bold;
	color:var(--bg-light);
	background:var(--primary);
	border:2px solid var(--primary);
	border-radius:2rem;
	opacity:0.8;
	transition:all 0.3s ease;
	display:flex;
	align-items:center;
	justify-content:center;
}
.hero-button .pc{
	font-size:1.2rem;
}
.hero-button + .hero-button {
	color:var(--primary);
	background:var(--bg-light);
}
@media(min-width:769px){
	.hero-button:hover {
		opacity:1;
	}
}
@media(max-width:768px){
	.hero {
		padding:8rem 0 4rem;
	}
	.hero .container{
		height:100%;
		padding:0 0.5rem;
	}
	.hero h1 {
		padding-left:3rem;
		font-size:4.2rem;
		line-height:1.4;
	}
	.hero p {
		margin: 3rem auto auto;
		font-size:1.4rem;
	}
	.hero-buttons {
		flex-direction:column;
		gap:2rem;
	}
	.hero-button {
		min-height:unset;
		padding:1.2rem 3rem;
		font-size:1.4rem;
		opacity:0.95;
	}
}


/* ==========================================================================================================================================
	cta
=========================================================================================================================================== */
.mid-cta {
	padding:4rem 0 6rem;
	background:url(images/common/cta.jpg) 50% 100% no-repeat;
	background-size:cover;
	text-align:center;
}
.mid-cta .container{
	padding:0;
}
.mid-cta h3 {
	color:var(--bg-light);
	line-height:1;
	font-size:4rem;
	font-family:'Noto Serif JP',serif;
}
.mid-cta p {
	margin: 6rem auto;
	padding-left:20rem;
	color:var(--bg-light);
	font-size:2.2rem;
	font-family:'Noto Serif JP',serif;
}
.mid-cta .hero-buttons {
	padding-left:20rem;
}
.mid-cta .hero-button {
	color:var(--primary);;
	background:var(--bg-light);
	border-color:var(--bg-light);
}
.mid-cta .hero-button + .hero-button {
	color:var(--bg-light);;
	background:var(--primary);
	opacity:1;
}

@media(min-width:769px){
}
@media(max-width:768px){
	.mid-cta {
		padding:4rem 0;
		background-position:30% 100%;
	}
	.mid-cta h3 {
		font-size:2.2rem;
	}
	.mid-cta p {
		margin:3rem auto 6rem;
		padding:0;
		font-size:1.5rem;
	}
	.mid-cta .hero-buttons {
		padding-left:12rem;
		padding-right:1rem;
	}
}