/* =========================================================
   top.css
   TOPページ（index.html）専用のスタイル。css/common.css の後に読み込みます。
   ========================================================= */
.hero__copy, .svc__name, .svc__catch, .clients__title{ word-break:keep-all; overflow-wrap:break-word; }

/* =========================================================
   ① Hero
   ========================================================= */
.hero{ position:relative; height:100vh; height:100svh; min-height:600px; overflow:hidden; color:#4e4e4e; background:var(--c-dark); }
/* --- オープニング：アイデアの丸がはじけ、小さな丸がラインを描いて消え、背景写真が現れる --- */
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:80% center; }
.js .hero{ background:#eef1f3; }  /* ① 薄いグレーの背景 */
.js .hero.is-burst{ background:#fff; }
.js .hero__bg{ clip-path:circle(0% at 50% 50%); }
.js .hero__bg img{ transform:scale(1.12); }
.js .hero.is-done .hero__bg{ clip-path:none; }
.js .hero.is-burst .hero__bg img{ transform:scale(1); transition:transform 3.2s cubic-bezier(.22,.61,.36,1); }
.hero__fx{ position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; }
/* オープニング中央のロゴ */
.hero__logo{ display:none; }
.js .hero__logo{
  display:grid; place-items:center; position:absolute; inset:0; z-index:4; pointer-events:none;
  opacity:1; transition:opacity .6s ease;
}
.js .hero.is-logo-out .hero__logo{ opacity:0; transition-duration:.5s; }
.hero__logo-svg{ width:clamp(150px, 18vw, 240px); height:auto; }
.js .scroll{ opacity:0; transition:opacity 1s ease 1.2s; }
.js .hero.is-ready .scroll{ opacity:1; }
/* オープニング中はヘッダーを隠す */
.header{ transition:height .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease), opacity .9s ease; }
.is-intro .header{ opacity:0; }
/* 写真上のオーバーレイ（写真と一緒に円形に現れる） */
.hero__bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255,.3) 45%, rgba(255, 255, 255,0) 75%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255,0) 28%, rgba(255, 255, 255,.25) 100%);
}
/* 横長の画面では中央より少し上（下側の余白を多めにとる）にコピーを置く */
.hero__inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; padding-bottom:8vh; }
.js .hero__en{ opacity:0; transition:opacity 1.2s ease; }
.js .hero.is-ready .hero__en{ opacity:.85; }
.hero__en{ font-family:var(--f-en); font-size:12.5px; letter-spacing:.3em; font-weight:400; opacity:.85; margin-bottom:28px; text-transform:uppercase; }
/* 7.4vw の上限：スマホでも「今日を楽しむことから、」が1行に収まる大きさ */
.hero__copy{ font-size:min(clamp(28px, 1rem + 3.4vw, 56px), 7.4vw); font-weight:700; letter-spacing:.08em; line-height:1.55;
  /* 写真の上でも読みやすいよう白い光彩をつける */
  text-shadow:0 0 6px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.75), 0 0 36px rgba(255,255,255,.5);
}
/* overflow:hidden で光彩が切れないよう、上下左右に余白を確保 */
.hero__copy .line{ display:block; overflow:hidden; padding:.2em .3em; margin:-.2em -.3em; }
.hero__copy .line > span{ display:inline-block; opacity:0; transform:translateY(24px); filter:blur(6px); transition:opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease); }
.hero.is-ready .hero__copy .line > span{ opacity:1; transform:none; filter:none; }
.hero.is-ready .hero__copy .line:nth-child(2) > span{ transition-delay:.35s; }
.hero__bar{ margin-top:36px; width:56px; height:2px; background:var(--c-accent); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease) 1.1s; }
.hero.is-ready .hero__bar{ transform:scaleX(1); }
.scroll{
  position:absolute; z-index:2; right:var(--gutter); bottom:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:var(--f-en); font-size:11px; letter-spacing:.3em; color:#fff;
}
.scroll__txt{ writing-mode:vertical-rl; }
.scroll__line{ position:relative; width:1px; height:80px; background:rgba(255,255,255,.3); overflow:hidden; }
.scroll__line::after{ content:""; position:absolute; left:0; top:0; width:1px; height:40%; background:#fff; animation:scrollline 2.4s var(--ease) infinite; }
@keyframes scrollline{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(260%); } }
/* 視覚効果を減らす設定のとき：繰り返しの動きを止める（オープニングは表示する） */
@media (prefers-reduced-motion:reduce){
  .scroll__line::after{ animation:none; }
}
@media (max-width:767px){
  .hero__en{ margin-bottom:20px; font-size:11px; }
  .hero__bar{ margin-top:28px; width:44px; }
}
/* 縦長の画面（スマートフォン・タブレット縦向きなど）
   人物が主役になりすぎないよう、写真は人物を含まない風景部分（湖と田園）を表示し、
   コピーは上部の空に置く */
@media (orientation:portrait){
  .hero__inner{ justify-content:flex-start; padding-top:calc(var(--header-h) + 10vh); }
  /* 横位置の調整：数値を小さくすると左（太陽側）、大きくすると右（人物側）が見える。
     55%を超えると端末によって人物が写り込むので注意 */
  .hero__bg img{ object-position:42% center; }
}
/* タブレット縦向き：女性を画面の右側（左から約80%の位置）に見せる */
@media (orientation:portrait) and (min-width:768px){
  .hero__bg img{ object-position:80% center; }
}

/* =========================================================
   ② About
   ========================================================= */
.about__grid{ display:grid; grid-template-columns:1fr minmax(0, 440px); gap:clamp(48px, 7vw, 120px); align-items:center; }
.about__text, .svc__body, .svc__photo, .about__photo{ min-width:0; }.about__text p{ margin-top:28px; }
.about__text p:first-of-type{ margin-top:40px; }
.about__text .btn{ margin-top:48px; }
/* 写真：三方良しの図の文字が切れないよう、画像の縦横比のまま表示 */
.about__photo{ position:relative; }
.about__photo .ph{ position:relative; aspect-ratio:1126/1397; border-radius:var(--radius-l); box-shadow:0 30px 60px -30px rgba(20,32,42,.3); }
/* セクション間をつなぐ縦ライン */
.connector{ position:absolute; left:50%; top:0; width:1px; height:72px; background:linear-gradient(var(--c-border), transparent); }
.connector::after{ content:""; position:absolute; left:-2.5px; bottom:-3px; width:6px; height:6px; border-radius:50%; background:var(--c-accent); }
@media (max-width:767px){
  .about__grid{ grid-template-columns:1fr; gap:56px; }
  /* 1カラム時に写真が縦に大きくなりすぎないよう幅を抑える */
  .about__photo{ order:-1; width:100%; max-width:440px; }
  .about__text p:first-of-type{ margin-top:28px; }
  .about__text .btn{ width:100%; }
}
@media (min-width:768px) and (max-width:1023px){
  .about__grid{ grid-template-columns:1fr 1fr; gap:56px; }
}

/* =========================================================
   ③ Service（白い大角丸カード）
   ========================================================= */
.service{ background:var(--c-bg-sub); }
.service__head{ text-align:center; max-width:760px; margin:0 auto; }
.service__lead{ margin-top:28px; color:var(--c-text-sub); }
.svc-list{ margin-top:88px; display:grid; gap:40px; }
.svc{
  position:relative; display:grid; grid-template-columns:55% 1fr; gap:clamp(40px, 6vw, 88px); align-items:center;
  background:#fff; color:var(--c-text); border-radius:var(--radius-xl);
  padding:clamp(28px, 4.5vw, 64px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.5);
}
.svc:nth-child(even){ grid-template-columns:1fr 55%; }
.svc:nth-child(even) .svc__photo{ order:2; }
.svc__photo{ position:relative; }
.svc__photo .ph{ aspect-ratio:16/11; border-radius:20px; }
.svc__photo img{ transition:transform 1.2s var(--ease); }
.svc:hover .svc__photo img{ transform:scale(1.05); }
.svc__body{ position:static; padding-top:56px; }
.svc__num{
  display:block; font-family:var(--f-en); font-weight:300; font-size:clamp(40px, 1.8rem + 1.6vw, 60px); line-height:1;
  color:var(--c-accent); letter-spacing:.02em;
}
.svc:nth-child(even) .svc__num{ right:auto; left:clamp(28px, 4vw, 56px); }
.svc__name{ font-size:clamp(24px, 1.2rem + 1vw, 32px); font-weight:500; line-height:1.45; letter-spacing:.1em; }
.svc__catch{ margin-top:16px; font-size:clamp(16px, .9rem + .3vw, 18px); font-weight:500; line-height:1.7; color:var(--c-text); padding-left:16px; border-left:2px solid var(--c-accent); }
.svc__desc{ margin-top:24px; color:var(--c-text-sub); }
.svc__desc p + p{ margin-top:14px; }
.svc .tlink{ margin-top:32px; }
@media (max-width:1023px){
  .svc, .svc:nth-child(even){ grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
  .svc-list{ margin-top:48px; gap:24px; }
  .svc, .svc:nth-child(even){ grid-template-columns:1fr; gap:24px; }
  .svc{ border-radius:24px; padding:20px 20px 32px; }
  .svc:nth-child(even) .svc__photo{ order:0; }
  .svc__photo .ph{ border-radius:14px; }
  .svc__num, .svc:nth-child(even) .svc__num{ position:static; display:block; text-align:left; }
  .svc__body{ padding-top:0; }
}

/* Clients（ダーク背景上） */
.clients{ margin-top:140px; padding-top:100px; border-top:1px solid rgba(255,255,255,.15); position:relative; }
.clients::before{ content:""; position:absolute; top:-1px; left:50%; width:80px; height:1px; transform:translateX(-50%); background:var(--c-accent); }
.clients__head{ text-align:center; }
.service .label--sm{ color:#b5d880; }
.clients__title{ margin-top:20px; font-size:clamp(20px, 1.1rem + .6vw, 26px); font-weight:500; letter-spacing:.1em; line-height:1.5; color:#fff; }
.clients__sub{ margin-top:10px; font-size:14px; color:rgba(255,255,255,.75); font-weight:500; }
.clients__grid{ margin-top:48px; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.client{
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:76px; padding:16px 28px;
  background:#fff; color:var(--c-text); border-radius:var(--radius-pill);
  font-size:14.5px; font-weight:500; line-height:1.6; letter-spacing:.04em;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.client:hover{ box-shadow:0 0 0 2px var(--c-accent); }
.clients__etc{ margin-top:20px; text-align:right; color:rgba(255,255,255,.75); font-size:14px; }
@media (max-width:1023px){ .clients__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:767px){
  .clients{ margin-top:80px; padding-top:72px; }
  .clients__grid{ margin-top:32px; grid-template-columns:1fr; gap:10px; }
  .client{ min-height:60px; font-size:14px; }
}

/* =========================================================
   ④ News
   ========================================================= */
.news__grid{ display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:start; }
.news__h{ font-family:var(--f-en); font-size:clamp(32px, 1.6rem + 1.4vw, 44px); font-weight:300; letter-spacing:.12em; line-height:1.2; }
.news__list{ border-top:1px solid var(--c-border); }
.news__item{ border-bottom:1px solid var(--c-border); }
.news__link{
  display:grid; grid-template-columns:130px 1fr auto; gap:32px; align-items:center;
  padding:30px 24px; border-radius:var(--radius-m); transition:background-color .35s var(--ease);
}
.news__link:hover, .news__link:focus-visible{ background:var(--c-accent-light); }
.news__date{ font-family:var(--f-en); font-size:14px; color:var(--c-text-sub); letter-spacing:.08em; }
.news__title{ font-weight:500; }
.news__more{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:500; color:var(--c-accent-dark); white-space:nowrap; }
.news__more .circle{
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--c-accent);
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.news__link:hover .circle{ background:var(--c-accent); color:#fff; transform:translateX(5px); }
@media (max-width:1023px){ .news__grid{ grid-template-columns:200px 1fr; gap:40px; } }
@media (max-width:767px){
  .news__grid{ grid-template-columns:1fr; gap:32px; }
  .news__link{ grid-template-columns:1fr auto; gap:6px 16px; padding:22px 8px; }
  .news__date{ grid-column:1 / -1; font-size:13px; }
  .news__more .txt{ display:none; }
}