@charset "utf-8";

/* ===== CSS変数 ===== */
:root{
  /* color */
  --c-txt:#231815;
  --c-txt2:#4c4948;
  --c-grn:#668f87;
  --c-moss:#94b3b8;
  --c-bg:#fff;
  --c-bg2:#f7f5f3;
  --c-line:#d5d2cc;

  /* font：和文＝明朝系／欧文＝細身サンセリフ */
  --f-jp:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --f-en:"Jost","Century Gothic","Futura",sans-serif;

  /* layout：最大2000pxまで100%表示 */
  --w-in:88%;
  --w-max:2000px;

  /* SP背景画像の透過率（文字の可読性優先で白寄りに） */
  --op-bg:.14;
}

/* ===== リセット ===== */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html.no-smooth{scroll-behavior:auto;} /* JSイージング中のみ解除 */
html,body{overflow-x:clip;}
body,h1,h2,h3,h4,h5,h6,p,figure,ul,ol,dl,dd,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
img{max-width:100%;height:auto;vertical-align:bottom;border-style:none;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
table{border-collapse:collapse;border-spacing:0;}
address{font-style:normal;}

body{
  font-family:var(--f-jp);
  color:var(--c-txt);
  background:var(--c-bg);
  line-height:1.9;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}

/* ===== 共通レイアウト ===== */
.wrap{
  width:100%;
  max-width:var(--w-max);
  margin-inline:auto;
  overflow-x:clip; /* 円形写真の見切れ配置によるはみ出しを遮断 */
}
.in{
  width:var(--w-in);
  margin-inline:auto;
}

/* セクション：画像＋テキストの2カラム
   .l = 画像が左 / .r = 画像が右 （PC・SP共通で左右を維持） */
.sec{position:relative;}
.sec-img img{display:block;width:100%;height:auto;}
.sec-txt{position:relative;z-index:1;}

/* ===== 見出し（欧文見出しは画像書き出し） ===== */
.ttl-en img{display:block;width:auto;}
.ttl{
  font-size:clamp(1.15rem, 1.1vw + 0.85rem, 1.6rem);
  font-weight:400;
  line-height:1.8;
  letter-spacing:.06em;
}
.lead{
  font-size:clamp(0.8rem, 0.4vw + 0.68rem, 0.95rem);
  line-height:2.1;
  letter-spacing:.04em;
  color:var(--c-txt2);
}

/* ===== view more（comingsoon.svg画像に変更） ===== */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn img{width:100%;height:auto;}

/* ===== キャプション・注釈 ===== */
.cap{
  font-size:clamp(0.9rem, 0.25vw + 0.56rem, 0.75rem);
  letter-spacing:.04em;
}
.kv-cap{font-family:"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;  font-size:clamp(0.7rem, 0.25vw + 0.56rem, 0.75rem);
  letter-spacing:.0em;}
/* 欧文のみのキャプション（image photo等）はサンセリフ */
.sec-img .cap,
.acc-list figure > .cap:not(.acc-cap),
.bnr-img .cap{font-family:var(--f-jp);}
.note{
  font-size:clamp(0.6rem, 0.22vw + 0.54rem, 0.72rem);
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--c-txt);
}

/* ===== 写真列・スライダー共通 ===== */
.ph-row,.slides{display:flex;}
.ph-row figure,.slides figure{
  display:flex;
  flex-direction:column;
  width:100%;
  position:relative;
}
.ph-row img,.slides img{width:100%;height:auto;}
.ph-cap{
  text-align:center;
  margin-top:.6rem;
  letter-spacing:.06em;
  font-size:clamp(0.8rem, 0.35vw + 0.65rem, 0.95rem);
}
.ph-cap span{display:block;font-size:.85em;}
.ph-ph{
  position:absolute;
  right:.6rem;
  bottom:2.5rem;
  color:#fff;
  font-family:var(--f-jp);
  text-shadow:0 0 .25rem rgba(0,0,0,.35);
}
/* 無限ループスライダー（CSSのみ・常時再生）
   速度＝1枚あたり約12秒（枚数×12sをセクション側で指定） */
.slider{overflow:hidden;width:100%;}
.track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:loop 96s linear infinite;
}
@keyframes loop{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ===== トップメインスライド ===== */
.hero{
  position:relative;
  overflow:hidden;
  background:#fff;
  margin-top:100px; /* ヘッダー高さ分を確保（topでは領域を取れず下段に被るため） */
}
.hero-slides{position:relative;}
.hs{
  display:block;
  opacity:0;
  transition:opacity 1.6s ease;
}
/* 1枚目を通常フローに置いて高さを確保し、他を重ねる */
.hs:first-child{position:relative;}
.hs + .hs{position:absolute;inset:0;}
.hs img{display:block;width:100%;height:auto;}
.hs.show{opacity:1;}

.hero-btn{
  position:absolute;
  right:1.5rem;
  top:1.5rem;
  z-index:2;
  background:rgba(255,255,255,.75);
  border:1px solid var(--c-grn);
  color:var(--c-grn);
  font-family:var(--f-en);
  font-size:clamp(0.75rem, 0.3vw + 0.66rem, 0.9rem);
  letter-spacing:.18em;
  padding:.5rem 1.4rem;
  cursor:pointer;
  transition:background-color .3s, color .3s, opacity .6s;
}
.hero-btn:hover{background:var(--c-grn);color:#fff;}
.hero-btn[hidden]{display:none;}
/* SKIPボタンは廃止（main.jsの参照エラーを避けるためHTMLは残し非表示） */
.hero-skip{display:none;}

/* ===== スライドページャー（最下部センター・小さな丸） ===== */
.hero-pager{
  position:absolute;
  left:50%;
  bottom:.75rem;
  transform:translateX(-50%);
  display:flex;
  gap:.6rem;
  z-index:2;
}
.hero-pager i{
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 .2rem rgba(0,0,0,.25); /* 白背景スライドでの視認性確保 */
  opacity:.45;
  transition:opacity .4s;
}
.hero-pager i.on{opacity:1;}

/* ===== 物件メリット帯 ===== */
.feat{background:var(--c-moss);}
.feat-list{
  display:grid;
  color:#fff;
  text-align:center;
}
.feat-list li{
  font-size:clamp(1.0rem, 0.75vw + 0.45rem, 1.1rem);
  line-height:1.6;
  letter-spacing:.08em;
}
.feat-list .fs{
  display:block;
  font-size:.78em;
  letter-spacing:.04em;
}

/* ===== 一枚画像バナー ===== */
.bnr > img{display:block;width:100%;height:auto;margin-inline:auto;}

/* ===== ページTOPへ戻る ===== */
.ptop{
  position:fixed;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.85);
  border:1px solid var(--c-grn);
  color:var(--c-grn);
  transition:background-color .3s, color .3s, opacity .4s, visibility .4s;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
/* 300pxスクロールで表示 */
.ptop.on{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.ptop::before{
  content:"";
  width:.7rem;
  height:.7rem;
  margin-top:.25rem;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(-45deg);
}
.ptop:hover{background:var(--c-grn);color:#fff;}

/* ===== ユーティリティ ===== */
.vh{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;
}

/* ===== 印刷対応 ===== */
@media print{
  html,body{overflow-x:visible;}
  .ptop,.hero-btn,.hero-pager{display:none;}
  /* SVG・画像の原寸出力を防止（CSS未適用時の保険） */
  img{max-width:100% !important;}
  .ttl-en img{height:2.6rem;}
  .kv-logo img{width:30%;margin-inline:auto;}
  .icon img{width:100%;}
  /* バナーの緑背景・白帯を印刷でも再現 */
  .bnr-body,
  .bnr-list li{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}