/* ============================================================
   Service ページ（WEB / SEO ...）
   レイアウト基準：各モックアップの座標を viewport 比に換算
   ============================================================ */

.page-service{background:#f2f3f6;}

/* 1スクロールで1セクションずつ切り替える */
html{scroll-behavior:auto;}

/* タッチ端末はブラウザ標準のスナップ、マウス/トラックパッドは service.js で制御 */
@media (hover:none) and (pointer:coarse){
  html{scroll-snap-type:y mandatory;}
  .svc{scroll-snap-align:start;scroll-snap-stop:always;}
}

/* ロゴとバーガーは全セクションで表示 */
.page-service .site-header{position:fixed;z-index:6;}

/* ---------- セクション共通 ---------- */
.svc{
  --list-w:clamp(240px,24vw,480px);   /* 横線とリストの幅（両セクション共通） */
  --tag-gap:2.2vw;
  --info-indent:1vw;
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.svc-body{position:relative;z-index:1;}

.svc-title{
  margin:0;
  font-weight:600;
  line-height:1;
  letter-spacing:.03em;
}
.svc-desc{
  margin:0;
  font-weight:400;
}
.svc-rule{
  border:0;
  border-top:1px solid #d7dade;
}
.svc-tags{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-auto-flow:column;                     /* 左列を上から埋めてから右列へ */
  grid-template-rows:repeat(var(--rows,9), auto);
  grid-auto-columns:minmax(0,1fr);
}
.svc-tags li{
  position:relative;
  padding-left:13.5px;
  font-weight:500;
  line-height:1.68;
  letter-spacing:.08em;
}
/* 「・」の代わりに少し太い丸（キーカラー） */
.svc-tags li::before{
  content:'';
  position:absolute;
  left:0;
  top:.72em;
  width:3.5px;
  height:3.5px;
  border-radius:50%;
  background:var(--accent);
}

.svc-ghost{
  position:absolute;
  margin:0;
  z-index:0;
  font-weight:600;
  line-height:.78;
  letter-spacing:-.01em;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
.svc-visual{position:absolute;z-index:0;}
.svc-visual img{width:100%;height:auto;display:block;}

/* ============================================================
   左の目次（全セクション共通・固定）
   ============================================================ */
.cat-nav{
  position:fixed;
  left:clamp(20px,7.75vw,155px);
  top:40%;
  transform:translateY(-50%);
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:clamp(13px,1.28vw,25px);
}
.cat-nav a{
  position:relative;
  display:block;
  padding-left:clamp(20px,1.6vw,32px);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  line-height:1;
  color:#b9bcc2;
  transition:color .3s ease;
}
.cat-nav a.is-active{color:var(--ink);}
/* タッチ端末ではタップ後に :hover が残り、別の項目が赤いままになるため
   ホバーの色変化はマウス環境に限定する */
@media (hover:hover) and (pointer:fine){
  .cat-nav a:hover,
  .cat-nav a.is-active:hover{color:var(--accent);}
}

/* 現在地のマーカー（赤い丸） */
.cat-dot{
  position:absolute;
  left:0;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-4.5px;
  border:2px solid var(--accent);
  border-radius:50%;
  background:transparent;
  opacity:0;
  transition:opacity .3s ease;
}
.cat-nav a.is-active .cat-dot{opacity:1;}

/* スクロールとともに下に伸びる縦線（丸の上まで） */
.cat-line{
  position:absolute;
  left:4px;
  top:0;
  width:1px;
  height:0;
  background:var(--accent);
  transform-origin:top center;
}

/* 暗いセクションに入ったら配色を反転 */
body.on-dark .cat-nav a{color:rgba(255,255,255,.45);}
body.on-dark .cat-nav a.is-active{color:#fff;}
@media (hover:hover) and (pointer:fine){
  body.on-dark .cat-nav a:hover{color:var(--accent);}
}
body.on-dark .menu-toggle span{background:#fff;}

/* ============================================================
   WEB セクション（明るい）
   ============================================================ */
.svc-web{
  background:#f2f3f6;
  padding:clamp(96px,12vh,150px) 0 clamp(56px,8vh,100px);
}
.svc-web .svc-ghost{
  left:16%;
  top:29.5%;
  transform:translateY(-50%);
  font-size:clamp(156px,22.2vw,444px);
  color:#fff;
}
.svc-web .svc-body{
  margin-left:40%;
  width:var(--list-w);
  top:4vh;
}
.svc-web .svc-title{
  margin:6vh 0 0;
  font-size:clamp(40px,4.35vw,87px);
  color:var(--ink);
}
.svc-web .svc-desc{
  margin:clamp(13px,1.2vw,24px) 0 0 var(--info-indent);
  font-size:clamp(10px,.85vw,17px);
  line-height:2.1;
  letter-spacing:.06em;
  color:var(--ink);
}
.svc-web .svc-rule{
  margin:clamp(11px,1.31vw,26px) 0 0 var(--info-indent);
  width:calc(var(--list-w) + var(--tag-gap));
}
.svc-web .svc-tags{
  margin:clamp(16px,1.545vw,31px) 0 0 var(--info-indent);
  width:calc(var(--list-w) + var(--tag-gap));
  column-gap:var(--tag-gap);
  row-gap:clamp(7px,.567vw,12px);
}
.svc-web .svc-tags li{
  font-size:11px;
  color:var(--ink);
}
.svc-visual-web{
  right:0;
  top:38%;
  transform:translateY(-50%);
  width:33.5%;
  max-width:740px;
}

/* ============================================================
   SEO セクション（暗い）
   ============================================================ */
.svc-seo{
  background:linear-gradient(135deg,#333439 0%,#333439 13%,#52545d 39%,#585a66 58%,#4f515a 79%,#333439 100%);
  padding:clamp(96px,12vh,150px) 0 clamp(56px,8vh,100px);
  color:#fff;
}
.svc-seo .svc-ghost{
  left:20%;
  top:19%;
  font-size:clamp(119px,16.87vw,337px);
  color:#73757c;
  opacity:.8;
}
.svc-seo .svc-body{
  --info-indent:0px;             /* SEO は説明・横線・リストをタイトルと同じ左端に */
  margin-left:21.6%;
  width:min(760px, 44vw);
  top:6vh;
}
.svc-seo .svc-title{
  margin:6vh 0 0;
  font-size:clamp(40px,4.35vw,87px);
  color:#fff;
}
.svc-seo .svc-desc{
  margin:clamp(9px,.8vw,16px) 0 0 var(--info-indent);
  font-size:clamp(10px,.85vw,17px);
  line-height:2.1;
  letter-spacing:.06em;
  color:rgba(255,255,255,.94);
}
.svc-seo .svc-tags{
  margin:clamp(16px,1.545vw,31px) 0 0 var(--info-indent);
  width:calc(var(--list-w) + var(--tag-gap));
  column-gap:var(--tag-gap);
  row-gap:clamp(7px,.567vw,12px);
}
.svc-seo .svc-rule{
  margin:clamp(11px,1.31vw,26px) 0 0 var(--info-indent);
  width:470px;
  height:1px;
  border:0;
  background:#73757c;
}
.svc-seo .svc-tags li{
  font-size:11px;
  color:rgba(255,255,255,.94);
}
.svc-visual-seo{
  right:8.1%;
  top:24%;
  width:22.6%;
  max-width:504px;
}
.svc-spotlight{
  position:absolute;
  right:4%;                   /* 中心 80.6% ＝ 矢印の中心と一致 */
  top:4.5%;
  width:30.8%;
  z-index:0;
  opacity:.9;
  mix-blend-mode:screen;
  pointer-events:none;
}


/* ============================================================
   VIDEO セクション（暗い）
   ============================================================ */
.svc-video{
  --list-w:39vw;
  --tag-gap:2.2vw;
  --info-indent:0px;
  background:linear-gradient(135deg,#6c7583 0%,#444d59 100%);
  padding:clamp(96px,12vh,150px) 0 clamp(56px,8vh,100px);
  color:#fff;
}
.svc-wave{
  position:absolute;
  left:0;
  top:2%;
  width:100%;
  height:auto;
  z-index:0;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
.svc-video .svc-ghost{
  left:16.7%;
  top:67%;
  font-size:clamp(119px,16.5vw,330px);
  color:#5a6472;
}
.svc-video .svc-body{
  margin-left:21.6%;
  width:min(760px, 44vw);
  top:4.5vh;
}
.svc-video .svc-title{
  margin:3vh 0 0;
  font-size:clamp(40px,4.35vw,87px);
  color:#fff;
}
.svc-video .svc-desc{
  margin:clamp(12px,1.05vw,21px) 0 0 var(--info-indent);
  font-size:clamp(10px,.85vw,17px);
  line-height:2.1;
  letter-spacing:.06em;
  color:rgba(255,255,255,.94);
}
.svc-video .svc-rule{
  margin:clamp(11px,1.31vw,26px) 0 0 var(--info-indent);
  width:var(--list-w);
  border-top-color:#6f7887;
}
.svc-video .svc-tags{
  margin:clamp(16px,1.545vw,31px) 0 0 var(--info-indent);
  width:var(--list-w);
  column-gap:var(--tag-gap);
  row-gap:clamp(7px,.567vw,12px);
}
.svc-video .svc-tags li{
  font-size:11px;
  color:rgba(255,255,255,.94);
}


/* ============================================================
   GRAPHIC セクション（明るい）
   ============================================================ */
.svc-graphic{
  --list-w:40vw;
  --tag-gap:2.6vw;
  --info-indent:calc(1.3vw - .5rem);   /* 左上へ 0.5rem 寄せ */
  background:#e0dedf;
  padding:clamp(96px,12vh,150px) 0 clamp(56px,8vh,100px);
}
/* 背景の大きな文字は縦向き。上下は画面外にはみ出して切れる */
.svc-graphic .svc-ghost{
  z-index:1;
  left:17%;
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;      /* 縦向き（G が上、C が下） */
  text-orientation:mixed;
  white-space:nowrap;
  font-size:clamp(108px,29.7vh,378px);
  line-height:1;
  color:#ededed;
  opacity:.5;
}
.svc-graphic .svc-body{
  z-index:2;
  margin-left:25.9%;
  width:min(760px, 44vw);
  top:4vh;
}
.svc-graphic .svc-title{
  margin:6vh 0 0;
  font-size:clamp(40px,4.35vw,87px);
  color:#fff;
}
.svc-graphic .svc-desc{
  margin:clamp(12px,1.2vw,24px) 0 0 var(--info-indent);
  font-size:clamp(10px,.85vw,17px);
  line-height:2.1;
  letter-spacing:.06em;
  color:#7f7f7f;
}
.svc-graphic .svc-rule{
  margin:clamp(11px,1.35vw,27px) 0 0 var(--info-indent);
  width:34.5vw;
  height:1.6px;                 /* border だと 1px に丸められるので背景で描く */
  border:0;
  background:#ffffff;
  opacity:.5;
}
.svc-graphic .svc-tags{
  margin:clamp(16px,1.545vw,31px) 0 0 var(--info-indent);
  width:var(--list-w);
  column-gap:var(--tag-gap);
  row-gap:clamp(7px,.567vw,12px);
}
.svc-graphic .svc-tags li{
  font-size:11px;
  color:#7f7f7f;
  white-space:nowrap;              /* 「会社案内・パンフレット」などを1行に */
}
.svc-visual-graphic{
  top:0;
  right:0;
  bottom:0;
  width:26%;
}
.svc-visual-graphic img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
}

/* ループ用に複製したセクション（見た目は先頭と同じ） */
.svc.is-clone{pointer-events:none;}

/* 波紋エフェクト（GRAPHIC セクション全面）。canvas が出たら元の画像は隠す */
/* ページ全面の波紋オーバーレイ。最前面だがクリックは透過する */
.page-ripple{
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  mix-blend-mode:screen;
}
.page-ripple canvas{position:absolute;inset:0;width:100%;height:100%;}

.svc-ripple{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.svc-ripple canvas{position:absolute;inset:0;width:100%;height:100%;}
.svc-visual-graphic{overflow:hidden;background:#e0dedf;transition:opacity .4s ease;}

/* ============================================================
   Tablet / Mobile
   ============================================================ */
@media (max-width:1100px){
  .svc-web .svc-body{margin-left:34%;width:min(440px,30vw);}
  .svc-visual-web{width:36%;}
  .svc-web .svc-ghost{left:12%;}
  .svc-seo .svc-body{margin-left:14%;width:min(640px,54vw);}
  .svc-seo .svc-ghost{left:14%;}
}

@media (max-width:860px){
  /* 1セクション＝1画面に収める。構造はPCと同じ絶対配置のまま縮める */
  .svc{
    display:block;
    height:100vh;
    min-height:100vh;
    padding:0 var(--pad-x);
    overflow:hidden;
  }

  /* 目次は上部に横並びで固定 */
  .cat-nav{
    position:fixed;
    top:92px;
    left:var(--pad-x);
    right:var(--pad-x);
    transform:none;
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px 18px;
  }
  .cat-line{display:none;}
  .cat-nav a{padding-left:15px;font-size:11px;letter-spacing:.1em;}
  .cat-dot{width:7px;height:7px;margin-top:-3.5px;}

  /* 大文字は本文の後ろに重ねる */
  /* 大文字は小さいタイトルと「下揃え」で重ねる */
  .svc-web .svc-ghost,
  .svc-seo .svc-ghost,
  .svc-video .svc-ghost,
  .svc-graphic .svc-ghost{
    position:absolute;
    left:var(--pad-x);
    right:auto;
    top:21.9%;
    bottom:auto;
    transform:translateY(-100%);
    line-height:1;
    white-space:nowrap;
    writing-mode:horizontal-tb;
    font-size:30vw;
  }

  /* 本文 */
  .svc-web .svc-body,
  .svc-seo .svc-body,
  .svc-video .svc-body,
  .svc-graphic .svc-body{
    position:absolute;
    left:var(--pad-x);
    right:var(--pad-x);
    top:17%;
    margin-left:0;
    width:auto;
    max-width:none;
  }
  .svc{--info-indent:0px;}
  .svc-title{margin-top:0 !important;}
  .svc-title{font-size:clamp(30px,8.6vw,44px);margin:0;line-height:1;}
  .svc-web .svc-desc,
  .svc-seo .svc-desc,
  .svc-video .svc-desc,
  .svc-graphic .svc-desc{
    margin:20px 0 0;
    font-size:11px;
    line-height:2.1;
    letter-spacing:.05em;
  }
  .svc-web .svc-rule,
  .svc-seo .svc-rule,
  .svc-video .svc-rule,
  .svc-graphic .svc-rule{margin:24px 0 0;width:100%;}
  .svc-web .svc-tags,
  .svc-seo .svc-tags,
  .svc-video .svc-tags,
  .svc-graphic .svc-tags{
    margin:22px 0 0;
    width:100%;
    column-gap:16px;
    row-gap:11px;
  }
  .svc-tags li{font-size:10px;letter-spacing:.05em;line-height:1.5;}

  /* スマホでは2列にして1画面に収める */
  .svc-web .svc-tags,
  .svc-video .svc-tags{grid-template-rows:repeat(9,auto);}
  .svc-seo .svc-tags,
  .svc-graphic .svc-tags{grid-template-rows:repeat(7,auto);}

  /* WEB / SEO：画像は右下の背景として */
  /* WEB / SEO / GRAPHIC は情報の下の空き高さをすべて使う */
  .svc-visual-web,
  .svc-visual-seo,
  .svc-visual-graphic{
    position:absolute;
    left:0;
    right:0;
    top:var(--visual-top, 70%);
    bottom:0;
    width:auto;
    height:auto;
    max-width:none;
    transform:none;
  }
  .svc-visual-seo{right:12px;}   /* 矢印の右側に少し余白 */
  .svc-visual-web img,
  .svc-visual-seo img{
    width:100%;
    height:100%;
    object-fit:contain;        /* 上下を切らずに全体を見せる */
    object-position:right bottom;   /* 右端に密着させ、余白を左に寄せる */
  }
  .svc-visual-graphic img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .svc-web{--visual-top:72%;}
  .svc-seo{--visual-top:68%;}
  .svc-graphic{--visual-top:68%;}
  .svc-visual-graphic img{object-position:center 35%;}
  .svc-spotlight{
    display:block;
    right:-14%;
    top:2%;
    width:60%;
  }

  /* VIDEO / GRAPHIC：幅100%の横長の帯を情報の下に */
  .svc-wave{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:61.5%;              /* 情報の下から下端まで使う */
    bottom:4%;
    width:100%;
    height:auto;
    object-fit:cover;
  }
  .svc-ripple{display:none;}
  .page-ripple{display:none;}
}