@charset "utf-8";
/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Exo+2:200i);
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

/* Theme */
:root {
  --accent: #38ffff;
  --muted: #3899ca;
  --dark: #071016;
  --glass: rgba(0, 187, 255, 0.06);
  --insta-size: clamp(36px, 5vw, 48px);
}

/* Reset-ish */
* { box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; font-synthesis: none; }

/* Base */
body {
  margin: 0;
  font-family:'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              'Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo', sans-serif;
  color: #222;
  background: linear-gradient(90deg, #0f9b88, #3936ff);
}

/* Header */
header {
  height: 70px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(7,16,22,0.45), rgba(7,16,22,0.15));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
}

/* Header fallback when backdrop-filter不可 */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  header{ background: rgba(7,16,22,0.70); }
}

/* Brand */
.brand .logo {
  height: 70px; display: flex; align-items: center; justify-content: center;
}
.brand .logo img {
  max-height: 3rem; width: auto; display: block;
}

/* Typography */
h1, .content h1{
  font-family:'Playfair Display', serif;
  line-height:1.2;
  letter-spacing:.02em;
}
h1 { font-size: 44px; margin: 0 auto; }
h2 { font-family: 'Playfair Display', serif; font-size: 26px; margin: 0 0 12px; }
h3 { color: #ffaa38; }
p.lead { font-size: 18px; opacity: 0.95; margin: 0 0 24px; }

.heading-1 { padding:.5em .7em; border-left:5px solid #ffaa38; color:#fff; }
.muted { color:#fff; }

/* Nav */
nav ul {
  display: flex; gap: 18px; align-items: center; list-style: none;
}
nav a { color: #e8f0f0; text-decoration: none; font-weight: 500; }
.nav-link { position: relative; color: #e8f0f0; font-weight: 500; text-decoration: none; }
.nav-link::after{
  content:''; position:absolute; bottom:-3px; left:50%; width:0; height:2px;
  background:#ffaa38; transition: width .3s ease, left .3s ease;
}
.nav-link:hover::after{ width:100%; left:0; }

/* gapフォールバック（古いSafari） */
nav ul > li + li { margin-left: 18px; }
@supports (gap: 1rem){ nav ul > li + li { margin-left: 0; } }

/* Buttons */
a{ color: inherit; text-decoration: none; transition: opacity .3s ease; }
a:hover{ opacity: .65; }
.btn { padding:7px 18px; border-radius:10px; text-decoration:none; font-weight:700; }
.btn.primary { background:#ffaa38bf; color:#fff; }
.btn.ghost { background:#ffaa38bf; border:1px solid rgba(13,162,255,.18); color:#fff; }
.cta { background:#ffaa38bf; color:#fff; padding:10px 14px; border-radius:10px; font-weight:700; }

/* Hero */
.hero{
  position: relative;
  height: 100vh;       /* fallback */
  height: 100svh;      /* Safari/新ブラウザ基準 */
  overflow: hidden; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.hero video{
  position:absolute; top:50%; left:50%;
  min-width:100%; min-height:100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: brightness(.55) contrast(1.05);
}
.hero .overlay{
  position:relative; z-index:2; text-align:center; padding:0 20px; max-width:1100px;
}
.tag{
  display:inline-block; background: rgba(195,231,255,.45);
  padding:8px 14px; border-radius:999px; margin-bottom:18px; font-weight:600; color:#fff;
}
.hero .actions{ display:flex; gap:12px; justify-content:center; }

/* Video container (別用途の場合) */
.video-container{
  position: relative; width:100%;
  height: 100vh; height: 100svh; /* 同様にsvh優先 */
  overflow: hidden;
}
#bgVideo{
  position:absolute; top:50%; left:50%; width:100%; height:100%;
  transform: translate(-50%, -50%); object-fit: cover; z-index:1;
}
#ripple{ position:absolute; inset:0; background: rgba(0,0,0,.01); z-index:2; }

/* Reveal effects */
.fade-in{ opacity:0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.fade-in.show{ opacity:1; transform: translateY(0); }
.fade-up{ transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; }
.fade-up.show{ opacity:1; transform: translateY(0); }
.fade-left{ opacity:0; transform: translateX(-30px); transition: opacity 1s ease, transform 1s ease; }
.fade-left.show{ opacity:1; transform: translateX(0); }

/* Content on hero */
.content{
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  text-align:center; color:white; width:90%; max-width:1200px; z-index:3;
}
.content img{ width:50rem; max-width:90%; height:auto; }
.content h1{ font-size:2rem; margin:0; }

/* Marquee */
.marquee{ --gap:3rem; --duration:40s; overflow:hidden; display:flex; align-items:center; height:100px; }
.marquee__group{ display:flex; gap:var(--gap); flex-shrink:0; min-width:100%; animation: marquee-scroll var(--duration) linear infinite; }
@keyframes marquee-scroll{ from{ transform: translateX(0);} to{ transform: translateX(-100%);} }
.marquee span{
  font-size:7rem; font-weight:900; text-transform:uppercase; color:rgba(255,255,255,.08);
  letter-spacing:.15em; white-space:nowrap; text-shadow:0 0 6px rgba(255,255,255,.1);
}
.marquee:hover .marquee__group{ animation-play-state: paused; }

/* Layout */
main{ padding:70px 18px 120px; max-width:1200px; margin:0 auto; }
.section{ padding:64px 0; border-bottom:1px solid #f2f4f5; }
.grid{ display:grid; gap:24px; }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }

/* Cards */
.card{
  background:#fff; border:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:100%; padding:22px; border-radius:12px;
  box-shadow:0 6px 24px rgba(11,95,95,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-8px); box-shadow:0 12px 28px rgba(11,95,95,.2); }
.service-maintenance{ background: linear-gradient(180deg, rgba(100,200,255,.2), #38ffff); }
.service-icon{ width:100px; height:100px; display:block; margin:0 auto; }
.cards-container{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:24px; max-width:1200px; margin:0 auto; padding:0 20px;
}
.card .icon{
  font-size:42px; margin-bottom:12px;
  background: linear-gradient(135deg, #00e5ff, #007bff);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.card h3{ font-size:20px; font-weight:700; margin-bottom:10px; }
.card p{ font-size:18px; color:#222; line-height:1.6; }

/* Plans */
#plans{ padding:40px 20px; }
#plans .grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:18px;
  max-width:1200px; margin-left:auto; margin-right:auto; align-items:stretch;
}
#plans .card{
  background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.1);
  padding:20px; text-align:center; transition: transform .3s ease;
  display:flex; flex-direction:column; justify-content:space-between; height:100%; width:100%;
}
#plans .card:hover{ transform: translateY(-5px); }
.plans-section .icon{ font-size:36px; color:#00aaff; margin-bottom:12px; display:flex; justify-content:center; }
#plans h3{ margin-top:0; font-size:1.4rem; }
#plans p{ font-size:1rem; color:#666; }

/* Testimonials */
#testimonials .card{ opacity:0; transform: translateX(-50px); transition: transform .8s ease, opacity .8s ease; }
#testimonials .card.right{ transform: translateX(50px); }
#testimonials .card.show{ opacity:1; transform: translateX(0); }

/* Gallery */
.gallery{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:18px; margin-top:18px;
}
.gallery a{
  display:block; border-radius:12px; overflow:hidden; position:relative;
  transition: transform .4s ease, box-shadow .4s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  opacity:0; transform: translateY(20px);
}
.gallery a img{ width:100%; height:auto; display:block; border-radius:12px; transition: transform .4s ease; }
.gallery a:hover{ transform: translateY(-8px) scale(1.05); box-shadow:0 16px 24px rgba(0,0,0,.2); }
.gallery a:hover img{ transform: scale(1.08); }
.gallery a.show{ opacity:1; transform: translateY(0); transition: transform .6s ease, opacity .6s ease; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 420px; gap:32px; }
form{ display:flex; flex-direction:column; }

/* Form lookをSafari寄りに固定 */
input, select, textarea{
  appearance:none; -webkit-appearance:none;
  border-radius:12px; background:#fff; border:1px solid #ccc;
  font-size:16px;
}
select{ background-image:none; }

.input-wrapper{ position:relative; margin-bottom:16px; }
.input-wrapper input, .input-wrapper select, .input-wrapper textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid #ccc; background:#fff; font-size:16px; box-sizing:border-box;
}

/* 必須バッジ */
.required-label{
  position:absolute; top:-8px; right:12px;
  background:#ffae00; color:#fff; font-size:12px; font-weight:bold;
  padding:2px 6px; border-radius:6px; pointer-events:none;
  display:none; /* 非必須は非表示 */
}
/* 必須のときだけ表示 */
.input-wrapper input[required] ~ .required-label,
.input-wrapper select[required] ~ .required-label,
.input-wrapper textarea[required] ~ .required-label{
  display:inline-block;
}

/* Submit */
button[type=submit]{
  background:#ffaa38; color:#fff; padding:12px; border-radius:10px; border:none; font-weight:700;
}
button[type=submit]:hover{ background:#e59800; }

/* Footer */
footer{ padding:28px 18px; background:#fff; color:#9fb1b1; }

/* Instagram icon (responsive) */
.insta-link{
  width:36px; height:36px;             /* 古ブラウザfallback */
  inline-size: var(--insta-size);
  block-size:  var(--insta-size);
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border-radius:8px; touch-action: manipulation;
}
.insta-icon{ width:100%; height:100%; object-fit:contain; display:block; }
.insta-link:focus-visible{ outline:2px solid #0a84ff; outline-offset:2px; }
@media (hover:hover){ .insta-link:hover{ transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce){ .insta-link{ transition:none; transform:none; } }

/* Responsive */
@media (max-width:1200px){
  .content img{ width:40rem; }
}
@media(max-width:900px){
  .hero, .video-container{ height:70vh; height:70svh; }
  .content img{ width:30rem; }
  nav{ display:none; }
  header{ padding:12px 18px; }
  .gallery{ grid-template-columns: repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  h1{ font-size:32px; }
  /* Gallery single column override (unify) */
  .gallery{ grid-template-columns:1fr; }
  .grid.cols-3{ grid-template-columns:1fr !important; gap:20px; }
  .content h1{ font-size:1.8rem; }
  p.lead{ font-size:16px; }
}
@media (max-width:768px){
  .hero, .video-container{ height:65vh; height:65svh; }
  .content img{ width:24rem; }
  .marquee span{ font-size:4.5rem; }
  header{ padding:12px 18px; }
  #plans .grid{ grid-template-columns:1fr; max-width:500px; }
}
@media (max-width:520px){
  .hero, .video-container{ height:60vh; height:60svh; }
  .content img{ width:80%; max-width:300px; }
  .brand .logo img{ max-height:2.5rem; }
  .content h1{ font-size:1.4rem; }
  p.lead{ font-size:14px; }
  .gallery{ grid-template-columns:1fr; }
  .gallery img{ height:auto; aspect-ratio:16/9; }
  .grid.cols-3{ grid-template-columns:1fr !important; gap:16px; }
  .marquee span{ font-size:3.5rem; }
  /* Form scale */
  .input-wrapper input, .input-wrapper select, .input-wrapper textarea{ font-size:14px; }
  .required-label{ font-size:11px; padding:1px 4px; }
  button[type="submit"]{ font-size:14px; padding:10px 16px; }
}

/* Overlay（中央寄せ） */
.overlay{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-inline:auto;
  padding: 20px;
}
.overlay p.lead{ color:#fff; }          /* リード文は白 */
.overlay .actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  width:100%;
}
.overlay .actions .btn{ display:inline-block; margin:0; }


/* ボタンとInstagramアイコンの高さを統一 */
.cta-buttons{
  display: flex;
  align-items: center;      /* 垂直中央 */
  gap: 12px;
}

.cta-buttons .btn{
  display: inline-flex;     /* 高さを効かせるためフレックスに */
  align-items: center;
  justify-content: center;
  height: var(--insta-size);/* ← アイコンと同じ高さに */
  padding: 0 16px;          /* 横だけ余白 */
  line-height: 1;           /* 文字の縦位置を安定させる */
  white-space: nowrap;      /* 改行で高さが膨らむのを防止 */
}