/* ========== niko-style.css ========== */

/* ------------------------------------ */
/* Reset – Eric Meyer v2 (＋α)           */
/* ------------------------------------ */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,
canvas,details,embed,figure,figcaption,
footer,header,hgroup,menu,nav,output,ruby,
section,summary,time,mark,audio,video{
  margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;box-sizing:border-box;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;border:0;}
:root{
  --header-h: 60px;   /* 固定ヘッダーの高さと合わせる */
}
/* ------------------------------------ */
/* Base                                 */
/* ------------------------------------ */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
  background:#d9d9d9;
  transition:background .6s ease;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  color:#333;
  font-weight: 600;
}

/* ------------------------------------ */
/* Header                               */
/* ------------------------------------ */
#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background .4s ease, backdrop-filter .4s ease;
  display: flex !important;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  align-items: center;
}
#header.scrolled{
  background:rgba(217,217,217,.8);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1280px;margin:0 auto;padding:.8rem 1rem;
}
.logo img{height:24px;width:auto;}

/* ---------- Global Nav (desktop 基準) ---------- */
.global-nav{display:flex;align-items:center;}
.global-nav ul{display:flex;gap:1.2rem;font-size:.85rem;font-weight:600;white-space:nowrap;flex-direction: row;}
/* drawer ロゴはデフォルト非表示（モバイルのみ表示） */
.drawer-logo{display:none;}

/* ------------------------------------ */
/* Hamburger Button                     */
/* ------------------------------------ */
.nav-toggle{
  display:none;                                /* PC では隠す */
  flex-direction:column;justify-content:space-between;
  width:30px;height:18px;
  background:none;border:0;cursor:pointer;
}
.nav-toggle span{
  display:block;width:100%;height:2px;background:#333;
  transition:transform .3s,opacity .3s;
}
.nav-toggle.open span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

/* ------------------------------------ */
/* Main Visual                          */
/* ------------------------------------ */
.mv{
  position:relative;
  height:100vh;
  overflow:hidden;
}

/* 既存アニメはそのまま保持しつつ
   パララックスは「background‑position」で演出する */
   .mv-slide{
    position:absolute;inset:0;
    background-size:cover;
    background-position:center 0;      /* ← ここ重要 */
    animation:mvFade 18s infinite ease-in-out;
    opacity:0;
    will-change:background-position;   /* GPU 最適化 */
  }

  .mv01{background-image:url("../images/mv01.jpg");animation-delay:0s;}
  .mv02{background-image:url("../images/mv02.jpg");animation-delay:6s;}
  .mv03{background-image:url("../images/mv03.jpg");animation-delay:12s;}

  @keyframes mvFade{
    0%{opacity:0;transform:scale(1);}
    10%{opacity:1;}
    30%{opacity:1;transform:scale(1.08);}
    40%{opacity:0;}
    100%{opacity:0;transform:scale(1.12);}
  }
/* ------------------------------------ */
/* Caution Section                      */
/* ------------------------------------ */
.caution {
  padding: 5px;
  box-sizing: border-box;
}
.caution p {
  text-align: right;
  font-size: 0.8rem;
}
br.sponly {
  display: block;
}
@media (min-width:767px){
  br {
    display: block;
  }
  br.sponly {
    display: none;
  }
}
/* ------------------------------------ */
/* Intro Section                        */
/* ------------------------------------ */
.intro{padding:4rem 1.5rem;text-align:center;}

/* ① “niko and...” – ドットだけループ */
.deco{
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: .05em;
  line-height: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 188px;
  margin: 0 auto 32px;
}
h3 {font-size: 1.8rem;margin: 0 0 32px 0;}
.dots{
  display:inline-block;overflow:hidden;width:0ch;
  animation:dotTyping 2.4s steps(3,end) infinite;
}
@keyframes dotTyping{
  0%  {width:0ch;}
  40% {width:3ch;}
  60% {width:3ch;}
  100%{width:0ch;}
}

/* ② ③ タイトル / テキスト – 上からフェード */
.fadein{opacity:0;transform:translateY(-20px);animation:fadeDown 1.2s ease-out forwards;}
.delay-1{animation-delay:.6s;}
@keyframes fadeDown{to{opacity:1;transform:none;}}

/* ------------------------------------ */
/* Responsive – Mobile ≤ 767px          */
/* ------------------------------------ */
@media (max-width:767px){

  /* ハンバーガー表示 */
  .nav-toggle{display:flex;z-index: 999999;}

  /* ドロワー初期状態 */
  .global-nav{
    display:none;position:fixed;inset:0;
    flex-direction:row;justify-content:center;align-items:center;
    background:rgba(217,217,217,.95);gap:2.5rem;
    font-size:1.25rem;font-weight:600;text-align:center;
    transition:transform .4s ease;
  }
  .global-nav.open{display:flex!important;}              /* 開いたら表示 */

  /* ドロワー内ロゴを表示 */
  .drawer-logo{display:block;margin: 32px 0;}
  .drawer-logo img{height:44px;}
  
  /* ヘッダー内デスクトップメニューを隠す */
  #header .global-nav{display:none;}
  .global-nav ul{gap:2rem;font-size:.95rem;}
  .deco       {font-size:1.8rem;}
  .intro-title{font-size:2.1rem;margin-top:1.8rem;}
  .intro-text {max-width:720px;margin:1.2rem auto 0;font-size:1rem;line-height:1.9;}
  .global-nav ul {flex-direction: column;
  }
}
/* ------------------------------------ */
/* 6 EDIT POINTS  — Chic + Accent       */
/* ------------------------------------ */
.points{
  padding:6rem 1.5rem;
  max-width: 980px;
  margin: 10px auto;
  background:#f7f7f7;          /* 落ち着いたライトグレー */
  border-radius:24px;

}
.points-heading{
  font-size:2.2rem;font-weight:800;text-align:center;
  letter-spacing:.14em;
  margin: 0 auto 6rem;
  display: block;
  position:relative;
  color:#111;
}
.points-heading::after{        /* シンプル黒ライン */
  content:'';position:absolute;left:50%;bottom:-8px;
  width:120px;height:4px;background:#111;
  transform:translateX(-50%);border-radius:2px;
}

/* ---- Grid ---- */
.points-grid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(3, 1fr);
  max-width: 980px;
  margin: 0 auto;
}

/* ---- Card ---- */
.point-card{
  position:relative;
  background:#fff;border-radius:20px;
  padding:2.6rem 1.6rem 1.8rem;
  box-shadow:0 6px 16px rgb(0 0 0 / 15%);
  text-align:center;overflow:hidden;
  transition:.4s cubic-bezier(.3,.9,.4,1);
  opacity:0;transform:translateY(48px);
}
.point-card.show{opacity:1;transform:none;}

@media(hover:hover){
  .point-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 26px rgba(0,0,0,.08);
  }
}

/* 各カードの差し色を CSS 変数で管理 */
.clr-1{--accent:#acb14c;}   /* オリーブ */
.clr-2{--accent:#3ba0b2;}   /* ティール */
.clr-3{--accent:#c16a74;}   /* ローズ */
.clr-4{--accent:#b48746;}   /* アンバー */
.clr-5{--accent:#4e8c6e;}   /* グリーン */
.clr-6{--accent:#9c55a9;}   /* パープル */

/* アクセントバー */
.point-card::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:8px;
  background:var(--accent);
}

/* 番号バッジ */
.point-num{
  font-size:3rem;font-weight:800;margin-bottom:.5rem;
  color:var(--accent);line-height:1;
}

/* 見出し・説明 */
.point-en{
  font-size:1.15rem;font-weight:700;letter-spacing:.18em;
  margin-bottom:.7rem;color:#111;
}
.point-ja{font-size:.9rem;color:#555;margin-bottom:1.4rem;}

/* 画像枠：差し色ラインでポップ感をキープ */
.point-card figure{
  border:3px solid var(--accent);
  border-radius:12px;overflow:hidden;height:180px;
}
.point-card img{width:100%;height:100%;object-fit:cover;display:block;}

/* Responsive tweak */
@media(max-width:768px){
  .points{margin: 10px;padding: 3rem 1.5rem;}
  .points-heading{font-size:2.6rem;}
  .point-num{font-size:3.4rem;}
  .point-en{font-size:1.2rem;}
  .points-grid{
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
  }
  .mv {
    height: 46vh;
  }
}
/* ------------------------------------ */
/* MODEL HOUSE CONCEPT  –  Moiré Blobs  */
/* ------------------------------------ */
.concept{
  padding:6rem 0;
  max-width:980px;
  margin:0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* 見出し */
.concept-heading{
  font-size:2.2rem;
  font-weight:800;
  text-align:center;
  color:#111;
  letter-spacing:.12em;
  margin-bottom:3.5rem;
}

/* 本体：フェードイン（.show で発火） */
.concept-body{
  display:flex;
  flex-direction:column;
  gap:2rem;
  align-items:center;
  opacity:0;
  transform:translateY(48px);
  transition:.8s cubic-bezier(.3,.9,.4,1);
}
.concept.show .concept-body{opacity:1;transform:none;}

/* 画像 */
.concept-img{
  flex:0 0;
  max-width:90%;
  overflow:hidden;
  border-radius:16px;
}
.concept-img img{
  width:100%;height:auto;display:block;
  transform:scale(1.08);
  transition:transform 1.2s ease;
}
.concept.show .concept-img img{transform:scale(1);}

/* テキスト + ブロブ背景 */
.concept-copy{
  position:relative;
  max-width:560px;
  z-index:0;
  padding: 25px;
}
.concept-text{
  position:relative;
  z-index:1;
  font-size:1rem;
  line-height:1.9;
  color:#444;
  text-align:left;
}

/* ─── “線だけ” モワモワ円 ─────────────────── */
.blob{
  position:absolute;
  top:50%;left:50%;
  width:340px;height:340px;
  margin:-170px 0 0 -170px;      /* 中心基準 */
  border-radius:50%;
  background:transparent;        /* 塗りつぶし無し */
  border:3px solid #cecece;      /* 濃い輪郭線 */
  opacity:.8;                    /* 線の濃さ */
  pointer-events:none;
  animation:
  blobFloat 10s ease-in-out infinite alternate,
  blobMorph 18s ease-in-out infinite;
}

/* 薄い輪郭線（少し小さく＆遅延） */
.blob-light{
  width:300px;height:300px;
  margin:-150px 0 0 -150px;
  border:2px solid #ececec;
  opacity:.6;
  animation-delay:2s,2s;         /* 両方のキーフレームに遅延 */
}

/* 漂う動き */
@keyframes blobFloat{
  0%   {transform:translate(-10%, -6%) rotate(0deg);}
  100% {transform:translate(8%, 10%)  rotate(180deg);}
}

/* 円→やや楕円→円… と形を変える */
@keyframes blobMorph{
  0%,100%{border-radius:50%;}
  25%   {border-radius:48% 52% 56% 44% / 46% 54% 52% 48%;}
  50%   {border-radius:55% 45% 50% 50% / 58% 42% 48% 52%;}
  75%   {border-radius:47% 53% 53% 47% / 50% 50% 57% 43%;}
}
br.pcnone {
  display: block;
}
/* ─── Desktop layout – side by side ─── */
@media(min-width:768px){
  .concept-body{flex-direction:row;}
  .concept-img{margin: 0 auto;display: block;max-width: 100%;  flex:0 0 520px;}
  br.pcnone {display: none;}
  .logo img {height: 36px;}
}
@media(min-width:1024px){
  .concept-heading{font-size:2.6rem;}
  .concept-text{font-size:1.05rem;}
}
/* ------------------------------------ */
/* DESIGN Section – refined             */
/* ------------------------------------ */
.design{
  position:relative;
  padding:1rem 1.5rem;
  transition:background .6s ease;  /* body との連動でふわっと */
}

.design-heading{
  font-size:2.4rem;font-weight:800;text-align:center;
  letter-spacing:.12em;margin-bottom:5rem;color:#111;
}

/* === レイアウト共通 ============================== */
.design-block{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:2.4rem;
  margin-bottom:5rem;
  max-width:1100px;
  margin-inline:auto;
}

.d-img{
  width:100%;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.d-img img{width:100%;height:auto;display:block;}

.d-text{
  position:relative;
  padding:1rem 0;
  max-width:520px;
}

.d-num{
  font-size:2.8rem;font-weight:800;margin-bottom:.2rem;
  color:var(--accent,#fff);
}
.d-title{
  font-size:1.25rem;font-weight:700;letter-spacing:.1em;margin-bottom:.8rem;
}
.d-desc{font-size:.95rem;line-height:1.85;}

/* —— 左右切替 & 被り量 —— */
.design-block.left  .d-img{order:1;}
.design-block.left  .d-text{order:2;transform:translateY(-20px);}
.design-block.right .d-img{order:2;}
.design-block.right .d-text{order:1;transform:translateY(20px);}

/* === PC 2カラム ================================ */
@media(min-width:900px){
  .design-block{
    grid-template-columns:repeat(2,1fr);
    gap:3.5rem;
  }
  .d-text {
    padding: 2rem 2.4rem;
  }
}
/* === SP 幅だけ右ブロックの並びを反転 ================ */
@media (max-width: 899px){
  /* 右ブロック: 画像→テキスト に揃える */
  .design-block.right .d-img  { order: 1; }   /* 画像を先に */
  .design-block.right .d-text { order: 2; }   /* テキストを後ろに */
}

/* === カラーバリエーション ====================== */
.clr-1{--accent:#acb14c;}
.clr-2{--accent:#3ba0b2;}
.clr-3{--accent:#c16a74;}
.clr-4{--accent:#b48746;}
.clr-5{--accent:#4e8c6e;}
.clr-6{--accent:#9c55a9;}

/* === 入場アニメ（画像勢い・テキストさらさら） ==== */
#design .d-img,
#design .d-text{
  opacity:0;
  will-change:transform,opacity;
}


#design .design-block.show .d-img{
  animation:imgIn .8s cubic-bezier(.25,1,.4,1) forwards;
}
#design .design-block.show .d-text{
  animation:textIn 1s ease-out .15s forwards;
}

@keyframes imgIn{
  to{opacity:1;transform:none;}
}
@keyframes textIn{
  to{opacity:1;transform:none;}
}

/* === body 背景色スワップ ======================= */
body.design-active{
  background:#fff;
  transition:background .6s ease;
}
/* ------------------------------------ */
/* GALLERY                              */
/* ------------------------------------ */
.gallery{
  padding:0 1rem;transition:background .6s ease;
}
.gallery-heading{
  font-size:2.2rem;font-weight:800;text-align:center;letter-spacing:.12em;
  margin-bottom:3.5rem;color:#111;
}

/* Masonry-ish グリッド */
.gallery-grid{
  display:grid;grid-auto-flow:dense;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;
}

/* サイズバリエーション */
.g-item{display:block;cursor:pointer;padding:0;border:0;background:none}
.g-item img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.12);transition:.3s;}
  .g-item:hover img{transform:scale(1.04);}

  .size-s{grid-row:span 1;grid-column:span 1;}
  .size-m{grid-row:span 2;grid-column:span 2;}
  .size-l{grid-row:span 3;grid-column:span 3;}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.8);z-index:2000;
  transition:opacity .4s ease;
}
.lightbox.show{display:flex;}

.lb-img{max-width:90%;max-height:85%;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.4);}

.lb-prev,.lb-next,.lb-close{
  position:absolute;background:none;border:0;color:#fff;font-size:2.2rem;
  cursor:pointer;line-height:1;user-select:none;
}
.lb-close{top:24px;right:28px;font-size:3rem;}
.lb-prev{left:30px;}
.lb-next{right:30px;}
.lb-prev:hover,.lb-next:hover,.lb-close:hover{opacity:.7;}
/* SP では S と M を同じ行高に、L だけ 2 行に収める */
@media (max-width: 599px){

  .gallery-grid{
    grid-auto-rows: 1fr;                 /* 行の高さを均等化 */
    grid-template-columns:repeat(2, 1fr);
  }

  /* size-m を 2×1（横に広い）にして段差を防ぐ */
  .size-m{grid-row:span 1;grid-column:span 2;}

  /* size-l を 2×2 */
  .size-l{grid-row:span 2;grid-column:span 2;}
}
/* ------------------------------------ */
/* MODEL HOUSE                          */
/* ------------------------------------ */
:root{ --header-h: 60px; }          /* 既に宣言済みなら重複可 */

.modelhouse{
  padding:6rem 1.5rem;
  transition:background .6s ease;   /* body 切替と同速 */
  box-sizing: border-box;
}
.modelhouse img {
  max-width: 260px;
  margin: 2rem auto 8rem;
  display: block;
}
.mh-inner{
  display:flex;flex-direction:column;gap:2.5rem;
  align-items:flex-start;opacity:0;transform:translateY(60px);
  transition:.8s cubic-bezier(.3,.9,.4,1);
}
.modelhouse.show .mh-inner{opacity:1;transform:none;}

.mh-info{max-width:460px;display:flex;flex-direction:column;gap:.6rem;}
.mh-heading{font-size:1.8rem;font-weight:800;color:#111;}
.mh-sub{font-size:1rem;font-weight:600;color:#444;}
.mh-address{font-style:normal;color:#444;}
.mh-tel a{display:inline-flex;align-items:center;gap:.4rem;
  color:#111;font-weight:700;text-decoration:none;}
  .mh-tel svg{flex:none;}
  .mh-map {
    min-width: 100%;
  }
  .mh-map iframe{width:100%;height:320px;border-radius:12px;
   filter:grayscale(1) contrast(1.15);}

   @media(min-width:768px){
    .mh-inner{
      flex-direction: row;
      align-items: stretch;
      gap: 4rem;
      margin: 0 auto;
      display: flex;
      max-width: 800px;
      box-sizing: border-box;
    }
    .mh-map {
      min-width: 500px;
    }
    .mh-map iframe{height:360px;}
    .mh-info{justify-content:center;}
  }

/* ---- body 背景切替 (#b6b6b6) ---- */
body.modelhouse-active{
  background:#fff;
  transition:background .6s ease;
}

/* セクション上端でスクロール補正 */
#modelhouse{scroll-margin-top:var(--header-h);}

/* ------------------------------------ */
/* CONTACT                              */
/* ------------------------------------ */
.hidden{display:none!important;}

.contact{
  padding:6rem 1.5rem;
  background:#d9d9d9;                 /* 既定背景に回帰 */
}
.contact-heading{
  font-size:2.2rem;font-weight:800;text-align:center;
  letter-spacing:.12em;margin-bottom:3.5rem;color:#111;
}

/* フォーム */
.contact-form{
  max-width:720px;margin:0 auto;
  display:grid;gap:1.5rem;
}
.form-row{display:flex;flex-direction:column;gap:.4rem;}
.form-row.half{width:100%;}
label{font-weight:600;color:#333;}
input,textarea{
  width:100%;padding:.8rem 1rem;border:2px solid #ccc;border-radius:8px;
  font-size:1rem;font-family:inherit;transition:border-color .3s;
  box-sizing: border-box;
}
input:focus,textarea:focus{outline:none;border-color:#777;}

.btn-submit{
  justify-self:center;
  background:#111;color:#fff;border:0;border-radius:9999px;
  padding:.8rem 3rem;font-size:1rem;font-weight:700;cursor:pointer;
  transition:.3s;
}
.btn-submit:hover{background:#444;}

/* 2 カラム化（名前＋メールを横並び） */
@media(min-width:768px){
  .contact-form{
    grid-template-columns:repeat(2,1fr);
  }
  .form-row.half{grid-column: span 2;}
  /* メッセージとボタンは 2 列ぶち抜き */
  .form-row:nth-child(3),
  .btn-submit{grid-column:span 2;}
}
.contact-form select{
  width:100%;
  padding:.8rem 1rem;
  border:2px solid #ccc;
  border-radius:8px;
  font-size:1rem;
  font-family:inherit;
  background:#fff;
}
.contact-form select:focus{
  outline:none;border-color:#777;
}

/* ------------------------------------ */
/* FOOTER                               */
/* ------------------------------------ */
.footer{
  background:#333;color:#fff;text-align:center;
  padding:2rem 1rem;font-size:.85rem;line-height:1.6;
}