/* ==========================================================================
   Nosuke Lab. — 大阪のフリーランスシステムエンジニア
   構成・造形は blueteam.jp のデザインシステムを参考に再構築（内容は自社のもの）
   ・白の角丸セクションが淡い青の面に重なっていく積層レイアウト
   ・見出しは「日本語（大・太）＋ English（小・青）」
   ・角丸30px のカード、ピル型ボタン
   ========================================================================== */

:root{
  --blue:     #009ee0;
  --blue-lt:  #50c2f7;
  --blue-dp:  #007fb4;
  --pale:     #e8f3fa;
  --pale-2:   #f0fafe;
  --off:      #f8f9fb;

  --ink:      #263134;
  --grey:     #5a6270;
  --grey-lt:  #9aa0ad;
  --line:     #d2dae5;
  --line-2:   #e2eced;
  --coral:    #f67a7c;

  --ja: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --en: "Josefin Sans", "Noto Sans JP", sans-serif;

  --gutter: clamp(20px, 5vw, 60px);
  --maxw: 1180px;
  --r-sec:  min(6.9444vw, 100px);
  --r-card: min(2.0833vw, 30px);
  --pull:   min(6.9444vw, 100px);
  --ease: cubic-bezier(.25,.7,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:clamp(90px,14vw,140px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0; background:#fff; color:var(--ink);
  font-family:var(--ja); font-weight:500;
  font-size:clamp(14.5px,.4vw + 13.5px,16px); line-height:1.9;
  letter-spacing:.03em; overflow-x:hidden;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

::selection{ background:var(--pale); color:var(--blue-dp); }
a{ color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pc-only{ display:inline; }
@media (max-width:768px){ .pc-only{ display:none; } }

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--blue); color:#fff; padding:12px 20px; }
.skip:focus{ left:0; }

/* 収集対策：ダミー文字は表示せず、選択・コピーの対象からも外す */
.cloak__x{ display:none !important; }
.cloak{ color:var(--blue-dp); border-bottom:1px solid rgba(0,158,224,.4); padding-bottom:1px; }

.link{ color:var(--blue-dp); text-decoration:none; border-bottom:1px solid rgba(0,158,224,.4); padding-bottom:1px; transition:.25s var(--ease); }
.link:hover{ color:var(--coral); border-color:var(--coral); }

/* ============ ボタン ============ */
.mbtn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:20px;
  width:min(360px,100%); min-height:70px; padding:14px 22px 14px 34px;
  border-radius:100vw; background:var(--ink); color:#fff;
  font-family:var(--ja); font-size:16px; font-weight:700; letter-spacing:.06em;
  text-decoration:none; transition:background .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.mbtn__ico{
  flex:none; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.mbtn__ico svg{ width:14px; height:14px; }
.mbtn:hover{ transform:translateY(-2px); }
.mbtn:hover .mbtn__ico{ transform:translateX(4px); }
.mbtn-blue{ background:var(--blue); }
.mbtn-blue .mbtn__ico{ color:var(--blue); }
.mbtn-blue:hover{ background:var(--blue-dp); }
.mbtn-white{ background:#fff; color:var(--ink); }
.mbtn-white .mbtn__ico{ background:var(--blue); color:#fff; }

/* ============ ヘッダー ============ */
/* ピル型の浮遊ヘッダー。モバイルは丸いMENUボタンから全画面ナビが円形に開く。
   JavaScriptを使わないため、チェックボックスで開閉している。 */
.hdr{
  position:fixed; z-index:100;
  height:16vw; inset:5.3333vw 2.6666vw auto;
}
@media print, (min-width:769px){
  .hdr{ height:min(6.25vw,90px); inset:min(2.0833vw,30px) min(4.1666vw,60px) auto; }
}

.hdr__toggle{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }

.hdr__inner{
  position:relative; z-index:100; height:inherit; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-radius:100vw;
  box-shadow:2.6666vw 2.6666vw 8vw rgba(3,155,229,.1);
  padding-inline:6.1333vw 1.8666vw;
}
@media print, (min-width:769px){
  .hdr__inner{
    box-shadow:min(2.0833vw,30px) min(2.0833vw,30px) min(6.25vw,90px) rgba(3,155,229,.1);
    padding-inline:min(2.7777vw,40px) min(1.3888vw,20px);
  }
}

.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.logo__mark{ display:flex; color:var(--blue); }
.logo__mark svg{ height:6.9333vw; width:auto; }
.logo__text{ font-family:var(--en); font-weight:700; font-size:4.8vw; letter-spacing:.04em; line-height:1.1; display:block; }
@media print, (min-width:769px){
  .logo{ gap:12px; }
  .logo__mark svg{ height:min(2.7777vw,40px); }
  .logo__text{ font-size:min(1.6vw,23px); }
}

/* MENUボタン（モバイルのみ） */
.hdr__btn{
  position:relative; z-index:120; flex:none; cursor:pointer;
  width:11.7333vw; height:11.7333vw; border-radius:50%; background:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--en); font-size:2.9vw; font-weight:700; letter-spacing:.1em; color:#fff;
  transition:background .3s var(--ease);
}
.hdr__btn .is-close{ display:none; }
.hdr__toggle:checked ~ .hdr__inner .hdr__btn{ background:var(--ink); }
.hdr__toggle:checked ~ .hdr__inner .hdr__btn .is-open{ display:none; }
.hdr__toggle:checked ~ .hdr__inner .hdr__btn .is-close{ display:block; }
@media print, (min-width:769px){ .hdr__btn{ display:none; } }

/* ナビゲーション */
.gnav{
  position:fixed; inset:0; z-index:90; color:#fff;
  background:rgba(38,49,52,.95);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  clip-path:circle(1px at calc(100% - 10.4vw) 13.33vw);
  transition:clip-path .38s ease-out;
  padding:36vw 8vw 13.3333vw; overflow-y:auto;
}
.hdr__toggle:checked ~ .gnav{ clip-path:circle(150% at calc(100% - 10.4vw) 13.33vw); }

.gnav__list{ list-style:none; margin:0; padding:0; font-size:5.2vw; font-weight:700; }
.gnav__list a{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  text-decoration:none; color:inherit; padding:4.6vw 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:color .3s var(--ease);
}
.gnav__list a:hover{ color:var(--blue-lt); }
.gnav__list .ico{
  flex:none; width:8.5vw; height:8.5vw; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.gnav__list .ico svg{ width:3.4vw; height:3.4vw; }
.gnav__foot{ margin-top:9vw; }
.gnav__tel{
  display:flex; align-items:center; gap:3vw; color:#fff; text-decoration:none;
  font-family:var(--en); font-size:8vw; font-weight:700; letter-spacing:.02em;
}
.gnav__tel svg{ width:6vw; height:6vw; color:var(--blue-lt); }
.gnav__hours{ font-size:3.4vw; color:rgba(255,255,255,.7); margin:2vw 0 0; letter-spacing:.06em; }

@media print, (min-width:769px){
  .gnav{
    position:absolute; inset:0 min(1.3888vw,20px) 0 auto; z-index:110;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    clip-path:none; color:inherit; padding:0; overflow:visible;
    display:flex; align-items:center; justify-content:flex-end;
  }
  .gnav__list{
    display:flex; align-items:center; height:100%;
    gap:min(2.4vw,32px); font-size:min(1.05vw,15px); font-weight:900;
  }
  .gnav__list a{
    display:flex; align-items:center; gap:min(.55vw,8px); width:auto;
    padding:0; border-bottom:0; color:var(--ink); white-space:nowrap;
  }
  .gnav__list a:hover{ color:var(--blue); }
  .gnav__list .ico{ display:none; }
  .gnav__list .is-cta a{
    background:var(--blue); color:#fff; border-radius:100vw;
    padding:min(.9vw,13px) min(1.7vw,24px);
    transition:background .3s var(--ease), transform .3s var(--ease);
  }
  .gnav__list .is-cta a:hover{ background:var(--blue-dp); color:#fff; transform:translateY(-1px); }
  .gnav__list .is-cta .ico{
    display:flex; width:min(1.1vw,15px); height:min(1.1vw,15px); border:0;
  }
  .gnav__list .is-cta .ico svg{ width:100%; height:100%; }
  .gnav__foot{ display:none; }
}
@media (min-width:769px) and (max-width:1180px){
  .gnav__list{ gap:min(1.8vw,22px); font-size:13px; }
}
@media (min-width:769px) and (max-width:900px){
  .gnav__list .is-nav-min{ display:none; }
}

/* ============ メインビジュアル ============ */
.mv{
  position:relative; overflow:hidden;
  padding:max(32vw, clamp(150px,17vw,215px)) var(--gutter) clamp(120px,17vw,225px);
  display:grid; align-items:center;
  background:
    radial-gradient(115% 85% at 88% 6%,  rgba(0,158,224,.38), transparent 58%),
    radial-gradient(95% 80% at 6% 98%,   rgba(80,194,247,.32), transparent 62%),
    linear-gradient(158deg, #ffffff 0%, #edf7fd 30%, #d2ecfb 66%, #a9dcf7 100%);
}
@media print, (min-width:769px){
  .mv{ padding-top:clamp(170px,18vw,250px); padding-bottom:clamp(145px,16vw,220px); }
}
.mv__inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; width:100%; }
.mv__title{
  font-family:var(--en); font-weight:900; line-height:1.4; letter-spacing:.02em;
  font-size:clamp(30px,5.6vw,64px); margin:0 0 26px;
}
.mv__title span[lang=en]{ font-family:var(--en); padding:0 .06em; }
.mv__title .em{ color:var(--blue); }
.mv__lead{
  font-family:var(--en); font-weight:900; line-height:1.45; letter-spacing:.03em;
  font-size:clamp(17px,2.2vw,27px); color:var(--grey); margin:0 0 20px;
}
.mv__text{ font-size:15px; line-height:2.05; color:var(--grey); margin:0 0 40px; max-width:38em; }
.mv__btns{ display:flex; flex-wrap:wrap; gap:14px; }
.mv__note{ margin:22px 0 0; font-size:12.5px; color:var(--grey-lt); }

.scroll{
  position:absolute; left:clamp(12px,2.4vw,30px); bottom:clamp(90px,12vw,150px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--en); font-size:11px; font-weight:700; letter-spacing:.24em; color:var(--grey-lt);
  writing-mode:vertical-rl;
}
.scroll i{ display:block; width:1px; height:64px; background:var(--line); position:relative; overflow:hidden; }
.scroll i::before{
  content:""; position:absolute; left:0; top:0; width:1px; height:22px; background:var(--blue);
  animation:scrolldot 2.2s var(--ease) infinite;
}
@keyframes scrolldot{ 0%{ transform:translateY(-24px); } 60%,100%{ transform:translateY(66px); } }
@media (max-width:1180px){ .scroll{ display:none; } }

/* ============ セクションの積層 ============ */
.sec{ position:relative; padding:clamp(84px,10.5vw,156px) var(--gutter); }
.sec__inner{ max-width:var(--maxw); margin:0 auto; }

/* 白の角丸セクション：ひとつ上の面に重なる */
.sec-white{
  background:#fff; border-radius:var(--r-sec) var(--r-sec) 0 0;
  margin-top:calc(var(--pull) * -1);
  padding-top:calc(clamp(84px,10.5vw,156px) + var(--pull) * .6);
  z-index:2;
}
.sec-pale{ background:var(--pale); }
.sec-pale + .sec-pale{ padding-top:0; }

/* ============ セクション見出し ============ */
.mtitle{ margin:0 0 clamp(44px,5.2vw,74px); }
.mtitle__ja{
  display:block; font-weight:900; letter-spacing:.05em; line-height:1.25;
  font-size:clamp(25px,3.6vw,44px);
}
.mtitle__en{
  display:inline-flex; align-items:center; gap:10px; margin-top:12px;
  font-family:var(--en); font-weight:700; font-size:clamp(13px,1.3vw,17px);
  letter-spacing:.12em; color:var(--blue); text-transform:none;
}
.mtitle__en::before{ content:""; width:24px; height:2px; background:var(--blue); }
.mtitle__note{ margin:22px 0 0; font-size:15px; line-height:2.05; color:var(--grey); max-width:46em; }


/* ============ カード（サービス／プロダクト） ============ */
.cards{ display:grid; gap:clamp(20px,2.4vw,32px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.card{
  display:flex; flex-direction:column; color:inherit;
  border-radius:var(--r-card); background:#fff; overflow:hidden;
  box-shadow:0 1px 3px rgba(38,49,52,.08), 0 8px 22px rgba(38,49,52,.13);
}
.card__text b{ font-weight:700; color:var(--blue-dp); }

.card__thumb{
  position:relative; aspect-ratio:1020/612; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-lt)); color:#fff; overflow:hidden;
}
.card__thumb::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.45) 1.4px, transparent 1.4px);
  background-size:18px 18px; opacity:.45;
}
.card__thumb svg{ position:relative; width:34%; max-width:96px; height:auto; }
.card__thumb-2{ background:linear-gradient(135deg,#0b7fbd,#33b3e8); }
.card__thumb-3{ background:linear-gradient(135deg,#50c2f7,#8fd9fb); }
.card__thumb-4{ background:linear-gradient(135deg,#f67a7c,#ffa9a0); }
.card__thumb-5{ background:linear-gradient(135deg,#263134,#4d6168); }
.card__thumb-6{ background:linear-gradient(135deg,#6f5ae0,#a08bff); }
.card__thumb-7{ background:linear-gradient(135deg,#0b8f8f,#3cc9c0); }
.card__thumb-8{ background:linear-gradient(135deg,#e8a13c,#ffcd6b); }
.card__body{ padding:26px 24px 28px; display:flex; flex-direction:column; flex:1; }
.card__caption{ font-size:12.5px; font-weight:700; color:var(--blue); letter-spacing:.06em; margin:0 0 8px; line-height:1.7; }
.card__title{ font-size:19px; font-weight:900; letter-spacing:.04em; line-height:1.5; margin:0 0 14px; }
.card__text{ font-size:13.5px; line-height:2; color:var(--grey); margin:0 0 20px; flex:1; }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.tags li{ font-size:11.5px; font-weight:500; color:var(--grey); background:var(--off); border:1px solid var(--line-2); border-radius:100vw; padding:4px 12px; }
.arrow-btn{
  width:36px; height:36px; border-radius:50%; background:var(--pale); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.arrow-btn svg{ width:14px; height:14px; }
.app:hover .arrow-btn{ background:var(--pc); color:#fff; transform:translateX(2px) translateY(-2px); }
.badge{ font-size:11px; font-weight:700; letter-spacing:.06em; border-radius:100vw; padding:5px 13px; }
.badge-live{ background:var(--pale); color:var(--blue-dp); }
.badge-beta{ background:#fff1f1; color:#d9534f; }
.badge-dev{ background:var(--off); color:var(--grey-lt); }

/* ============ 実績 ============ */
.works{ display:grid; gap:clamp(20px,2.4vw,30px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.work{
  background:#fff; border-radius:var(--r-card); padding:clamp(26px,2.6vw,36px);
  display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(38,49,52,.08), 0 8px 22px rgba(38,49,52,.13);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.work:hover{ transform:translateY(-5px); box-shadow:0 4px 10px rgba(38,49,52,.12), 0 22px 46px rgba(38,49,52,.22); }
.work__cat{
  align-self:flex-start; background:var(--blue); color:#fff; border-radius:100vw;
  font-size:11.5px; font-weight:700; letter-spacing:.08em; padding:5px 15px; margin-bottom:16px;
}
.work__title{ font-size:18px; font-weight:900; line-height:1.6; letter-spacing:.04em; margin:0 0 20px; }
.work dl{ margin:0 0 20px; }
.work dt{ font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--blue); margin-bottom:5px; }
.work dd{ margin:0 0 14px; font-size:13.5px; line-height:2; color:var(--grey); }
.work dd:last-of-type{ margin-bottom:0; }
.work__meta{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 16px; font-size:12px; color:var(--grey-lt); }
.work__meta span{ display:flex; align-items:center; gap:6px; }
.work__meta svg{ width:14px; height:14px; color:var(--blue); }
.work .tags{ padding-top:16px; border-top:1px solid var(--line-2); margin-top:auto; }
.sec__note{ margin:32px 0 0; font-size:13px; color:var(--grey-lt); line-height:2; }

/* ============ 対応技術 ============ */
.skills{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.skill{ background:var(--off); border-radius:var(--r-card); padding:26px 24px; }
.skill h3{
  display:flex; align-items:center; gap:11px; margin:0 0 16px; padding-bottom:14px;
  border-bottom:1px solid var(--line-2);
  font-size:13.5px; font-weight:900; letter-spacing:.1em; color:var(--ink);
}
.skill h3 svg{ width:20px; height:20px; color:var(--blue); flex:none; }
.skill ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.skill li{ font-size:12.5px; color:var(--grey); background:#fff; border:1px solid var(--line-2); border-radius:100vw; padding:5px 13px; }

/* ============ 自社プロダクト ============ */
.apps{ display:grid; gap:clamp(18px,2.2vw,26px); grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); }
.app{
  --pc:var(--blue);
  position:relative; display:flex; flex-direction:column; background:#fff;
  border-radius:var(--r-card); padding:28px 26px; overflow:hidden;
  text-decoration:none; color:inherit; box-shadow:0 1px 3px rgba(38,49,52,.08), 0 8px 22px rgba(38,49,52,.13);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* 各サービスのブランドカラーを上端のラインで示す */
.app::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--pc);
}
.app:hover{ transform:translateY(-6px); box-shadow:0 4px 10px rgba(38,49,52,.12), 0 22px 46px rgba(38,49,52,.22); }
.app__top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.app__icon{
  width:56px; height:56px; border-radius:15px; flex:none; overflow:hidden;
  background:#fff; border:1px solid var(--line-2);
  box-shadow:0 2px 6px rgba(38,49,52,.14);
}
.app__icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.app__icon img[src$=".svg"]{ object-fit:contain; padding:7px; }
.app__name{ font-size:17px; font-weight:900; margin:0; letter-spacing:.04em; line-height:1.5; }
.app__cat{ font-family:var(--en); font-size:11.5px; font-weight:700; letter-spacing:.1em; color:var(--pc); }
.app p{ font-size:13.5px; line-height:2; color:var(--grey); margin:0 0 20px; flex:1; }
.app__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--line-2); }

/* ============ 会社情報・プロフィール ============ */
.company{ display:grid; gap:clamp(34px,4vw,58px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; }
.pcard{ background:var(--off); border-radius:var(--r-card); padding:clamp(26px,3vw,38px); }
.pcard__head{ display:flex; align-items:center; gap:20px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line-2); }
.pcard__avatar{
  width:88px; height:88px; border-radius:50%; flex:none;
  background:#fff; border:2px solid var(--pale); object-fit:cover;
  box-shadow:0 2px 10px rgba(38,49,52,.12);
}
.pcard__role{ font-size:12.5px; color:var(--grey-lt); letter-spacing:.1em; margin:0 0 4px; }
.pcard__name{ font-size:22px; font-weight:900; letter-spacing:.08em; margin:0; }
.pcard__name small{ display:block; font-family:var(--en); font-size:12px; font-weight:700; color:var(--grey-lt); letter-spacing:.12em; margin-top:5px; }
.pcard p{ font-size:14px; line-height:2.15; color:var(--grey); margin:0 0 16px; }
.pcard p:last-of-type{ margin-bottom:0; }

.history{ margin-top:2px; }
.history__ttl{
  font-size:12.5px; font-weight:900; letter-spacing:.14em; color:var(--blue-dp);
  margin:0 0 18px !important;
}
.history__list{ list-style:none; margin:0; padding:0 0 0 4px; }
.history__list li{
  position:relative; display:grid; grid-template-columns:5.2em 1fr; gap:14px;
  padding:0 0 22px 20px; border-left:2px solid var(--line-2);
}
.history__list li:last-child{ padding-bottom:0; border-left-color:transparent; }
.history__list li::before{
  content:""; position:absolute; left:-7px; top:5px; width:12px; height:12px;
  border-radius:50%; background:#fff; border:2px solid var(--blue);
}
.history__list li:last-child::before{ background:var(--blue); }
.history__year{
  font-family:var(--en); font-size:15px; font-weight:700; color:var(--blue-dp);
  letter-spacing:.02em; padding-top:1px; line-height:1.35;
}
.history__year .to{ display:block; font-size:11.5px; color:var(--grey-lt); letter-spacing:.06em; }
.history__list b{ display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px; line-height:1.7; }
.history__list > li > div > span{ display:block; font-size:13px; line-height:1.95; color:var(--grey); }
@media (max-width:420px){
  .history__list li{ grid-template-columns:1fr; gap:4px; }
  .history__year .to{ display:inline; font-size:13px; }
}

.spec{ margin:0; border-top:1px solid var(--line-2); }
.spec > div{ display:grid; grid-template-columns:7.5em 1fr; gap:16px; padding:17px 2px; border-bottom:1px solid var(--line-2); }
.spec dt{ font-size:12.5px; font-weight:700; color:var(--blue-dp); letter-spacing:.08em; padding-top:3px; }
.spec dd{ margin:0; font-size:14px; line-height:1.95; }
.spec__sub{ color:var(--grey-lt); font-size:12.5px; }
@media (max-width:520px){ .spec > div{ grid-template-columns:1fr; gap:4px; } }

/* ============ FAQ ============ */
.faq details{ background:#fff; border-radius:var(--r-card); margin-bottom:12px; overflow:hidden; border:1px solid var(--line-2); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 58px 22px 24px; position:relative;
  font-size:15.5px; font-weight:700; line-height:1.75; letter-spacing:.04em;
  display:flex; gap:14px; align-items:flex-start;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q"; font-family:var(--en); font-weight:700; font-size:19px; color:var(--blue); flex:none; line-height:1.5; }
.faq summary::after{
  content:""; position:absolute; right:26px; top:31px; width:11px; height:11px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq details[open] summary{ color:var(--blue-dp); }
.faq__a{ padding:0 26px 26px 60px; margin:0; font-size:14px; line-height:2.15; color:var(--grey); position:relative; }
.faq__a::before{ content:"A"; position:absolute; left:24px; top:-2px; font-family:var(--en); font-weight:700; font-size:19px; color:var(--coral); }

/* ============ CTA ============ */
.cta{
  position:relative; background:var(--blue); color:#fff; overflow:hidden;
  padding:clamp(84px,10vw,140px) var(--gutter);
  margin-top:calc(var(--pull) * -1); padding-top:calc(clamp(84px,10vw,140px) + var(--pull) * .6);
  border-radius:var(--r-sec) var(--r-sec) 0 0; z-index:2;
}
.cta::before{
  content:""; position:absolute; right:-6%; top:-30%; width:min(500px,52vw); aspect-ratio:1;
  border-radius:50%; background:rgba(255,255,255,.1);
}
.cta::after{
  content:""; position:absolute; left:-8%; bottom:-40%; width:min(400px,46vw); aspect-ratio:1;
  border-radius:50%; background:rgba(255,255,255,.08);
}
.cta__inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; text-align:center; }
.cta__en{ font-family:var(--en); font-size:clamp(30px,4.4vw,54px); font-weight:900; letter-spacing:.08em; margin:0 0 10px; line-height:1.1; }
.cta__ja{ font-size:15px; font-weight:700; letter-spacing:.1em; margin:0 0 28px; opacity:.95; }
.cta__text{ font-size:15px; line-height:2.05; margin:0 0 36px; opacity:.96; }
.cta__row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center; }
.cta__sub{
  position:relative; z-index:1; max-width:46em; margin:30px auto 0;
  font-size:13.5px; line-height:2.15; opacity:.92;
}
.cta__tel{ text-align:center; }
.cta__tel a{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#fff;
  font-family:var(--en); font-size:clamp(28px,3.6vw,38px); font-weight:700; letter-spacing:.03em;
}
.cta__tel svg{ width:26px; height:26px; }
.cta__tel span{ display:block; font-family:var(--ja); font-size:12.5px; font-weight:500; letter-spacing:.08em; opacity:.9; margin-top:6px; }

/* ============ フォーム ============ */
.form{
  display:grid; gap:22px; grid-template-columns:1fr;
  max-width:760px; margin:0 auto;
  background:var(--off); border-radius:var(--r-card); padding:clamp(26px,4vw,52px);
}
.field{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.field-full{ grid-column:1 / -1; }
.form__fallback{ max-width:760px; }
.field label{ font-size:13.5px; font-weight:700; letter-spacing:.06em; display:flex; align-items:center; gap:9px; }
.req{ font-size:10.5px; font-weight:700; color:#fff; background:var(--coral); border-radius:100vw; padding:3px 10px; letter-spacing:.06em; }

.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea{
  font-family:var(--ja); font-size:15px; font-weight:500; color:var(--ink); letter-spacing:.03em;
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:14px 16px; width:100%; line-height:1.8;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23009ee0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; cursor:pointer;
}
.form textarea{ resize:vertical; min-height:150px; }
.form ::placeholder{ color:#b6bec6; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,158,224,.13); }
.form input:user-invalid, .form textarea:user-invalid{ border-color:var(--coral); }

.check{ align-items:flex-start !important; gap:12px !important; cursor:pointer; font-weight:500 !important; font-size:14px !important; color:var(--grey); line-height:1.9; }
.check input{
  appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px;
  border:1.5px solid var(--line); border-radius:6px; background:#fff; margin-top:3px; cursor:pointer;
  transition:.2s var(--ease); position:relative;
}
.check input:checked{ background:var(--blue); border-color:var(--blue); }
.check input:checked::after{ content:""; position:absolute; left:6.5px; top:2.5px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(42deg); }

.hp{ position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; }

.form__actions{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:8px; }
.turnstile-wrap:empty{ display:none; }
.form__noscript{
  grid-column:1 / -1; margin:0; padding:16px 20px; border-radius:12px;
  background:#fff2ef; color:#c0392b; font-size:13.5px; line-height:1.95;
}
.form__status{ grid-column:1 / -1; margin:0; font-size:14.5px; line-height:1.9; text-align:center; }
.form__status.is-error{ color:#c0392b; background:#fff2ef; padding:14px 18px; border-radius:12px; }
.form__status.is-ok{ color:var(--blue-dp); background:var(--pale); padding:14px 18px; border-radius:12px; }
.counter{ font-size:11.5px; color:var(--grey-lt); margin:0; text-align:right; }
.is-sending .mbtn{ opacity:.6; }
.mbtn[disabled]{ opacity:.5; cursor:not-allowed; }

.form__note{ font-size:12.5px; color:var(--grey-lt); margin:0; text-align:center; line-height:1.9; }
.form__fallback{ margin:24px 0 0; font-size:13.5px; color:var(--grey-lt); text-align:center; line-height:2; }

/* ============ フッター ============ */
.footer{ background:var(--ink); color:#fff; padding:clamp(50px,6vw,76px) var(--gutter) 28px; }
.footer__inner{ max-width:var(--maxw); margin:0 auto; display:grid; gap:36px clamp(24px,4vw,60px); grid-template-columns:minmax(240px,1fr) 2fr; }
@media (max-width:860px){ .footer__inner{ grid-template-columns:1fr; } }
.footer .logo{ color:#fff; margin-bottom:20px; }
.footer__brand p{ font-size:13px; line-height:2; margin:0 0 18px; color:rgba(255,255,255,.8); }
.footer__cols{ display:grid; gap:24px 28px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); }
.footer__col h3{ font-family:var(--en); font-size:14px; font-weight:700; letter-spacing:.14em; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.22); color:var(--blue-lt); }
.footer__col ul{ list-style:none; margin:0; padding:0; }
.footer__col li{ margin-bottom:10px; }
.footer__col a{ font-size:13px; text-decoration:none; color:rgba(255,255,255,.86); padding-left:15px; position:relative; display:inline-block; transition:color .25s var(--ease), transform .25s var(--ease); }
.footer__col a::before{ content:""; position:absolute; left:2px; top:.5em; width:5px; height:5px; border-right:1.5px solid var(--blue-lt); border-bottom:1.5px solid var(--blue-lt); transform:rotate(-45deg); }
.footer__col a:hover{ color:#fff; transform:translateX(2px); }
.footer__copy{
  max-width:var(--maxw); margin:44px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--en); font-size:12px; letter-spacing:.1em; text-align:center; color:rgba(255,255,255,.7);
}

/* ============ 追従CTA（スマホ） ============ */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:1px;
  box-shadow:0 -2px 16px rgba(38,49,52,.14);
}
.sticky a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 8px; font-size:14px; font-weight:700; letter-spacing:.06em; text-decoration:none; }
.sticky svg{ width:17px; height:17px; }
.sticky__form{ background:var(--blue); color:#fff; }
@media (max-width:860px){ .sticky{ display:flex; } body{ padding-bottom:56px; } }

/* ============ 表示アニメーション（CSSのみ） ============ */
.reveal{ opacity:0; transform:translateY(18px); animation:rise .9s var(--ease) forwards; animation-delay:var(--d,0ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .card, .app, .work, .skill, .mtitle, .faq details,
    .pcard, .spec, .form, .cta__inner, .history__list li{
      animation:rise-in linear both; animation-timeline:view(); animation-range:entry 4% cover 26%;
    }
  }
}
@keyframes rise-in{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* ============ 結果ページ・規約ページ ============ */
.result{ max-width:640px; margin:0 auto; text-align:center; padding:clamp(120px,15vw,180px) var(--gutter) clamp(80px,10vw,120px); }
.result__icon{
  width:88px; height:88px; margin:0 auto 30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--en); font-size:40px; font-weight:700; color:#fff;
}
.result__icon-ok{ background:linear-gradient(135deg,var(--blue),var(--blue-lt)); }
.result__icon-ng{ background:linear-gradient(135deg,var(--coral),#ffa9a0); }
.result__icon-404{ background:linear-gradient(135deg,var(--grey),var(--grey-lt)); font-size:26px; letter-spacing:.04em; }
.eyebrow-en{ font-family:var(--en); font-size:13px; font-weight:700; letter-spacing:.24em; color:var(--blue); margin:0 0 14px; }
.result h1{ font-size:clamp(23px,3.2vw,34px); font-weight:900; line-height:1.6; letter-spacing:.05em; margin:0 0 26px; }
.result p{ color:var(--grey); font-size:14.5px; line-height:2.15; margin:0 0 16px; }
.result__actions{ margin-top:36px; display:flex; justify-content:center; }

.legal{ max-width:820px; margin:0 auto; padding:clamp(110px,13vw,150px) var(--gutter) 92px; }
.legal h1{ font-size:clamp(25px,3.2vw,36px); font-weight:900; margin:0 0 16px; letter-spacing:.05em; }
.legal h2{ font-size:17.5px; font-weight:900; margin:46px 0 12px; letter-spacing:.05em; padding-left:14px; border-left:4px solid var(--blue); }
.legal p, .legal li{ color:var(--grey); font-size:15px; line-height:2.15; }
.legal ul{ padding-left:1.3em; }
.legal .updated{ font-size:13px; color:var(--grey-lt); }