/* ===========================================================================
   となりAI 自己紹介サイト スタイル
   色： ネイビー #10233F ／ 白・生成り ／ 差し色オレンジ #F2792B
   =========================================================================== */

:root{
  --navy:        #10233F;
  --navy-deep:   #0A1729;
  --navy-soft:   #1B3459;
  --orange:      #F2792B;
  --orange-dark: #D9631A;
  --cream:       #FBF9F5;
  --white:       #FFFFFF;
  --ink:         #1C2430;
  --ink-mid:     #4A5666;
  --ink-soft:    #6B7787;
  --line:        #E4E1DA;

  --font-head: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-lat:  "Outfit", sans-serif;

  --shadow-sm: 0 2px 8px rgba(16,35,63,.06);
  --shadow-md: 0 12px 32px rgba(16,35,63,.10);
  --shadow-lg: 0 24px 60px rgba(16,35,63,.16);

  --radius: 18px;
  --gutter: clamp(20px, 5vw, 40px);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.95;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-head); line-height:1.45; letter-spacing:.01em; margin:0; }
p{ margin:0 0 1.4em; }
ul,ol{ margin:0; padding:0; list-style:none; }

.container{
  width:min(1120px, 100% - var(--gutter)*2);
  margin-inline:auto;
}

.sp-only{ display:none; }

/* ---------- 共通パーツ ---------- */

.section{ padding:clamp(72px, 11vw, 140px) 0; position:relative; }

.section-label{
  font-family:var(--font-lat);
  font-size:13px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.section-label::after{
  content:"";
  flex:0 0 34px;
  height:2px;
  background:var(--orange);
  opacity:.5;
}

.section-title{
  font-size:clamp(26px, 4.2vw, 40px);
  font-weight:900;
  letter-spacing:.02em;
  margin:0 0 22px;
}

.section-head{ max-width:720px; margin-bottom:clamp(40px, 6vw, 68px); }
.section-desc{ color:var(--ink-mid); font-size:clamp(15px,1.6vw,17px); margin:0; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17px 34px;
  border-radius:999px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn-primary{
  background:var(--orange);
  color:#fff;
  box-shadow:0 10px 26px rgba(242,121,43,.34);
}
.btn-primary:hover{ background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 14px 32px rgba(242,121,43,.42); }
.btn-ghost{
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.42);
  backdrop-filter:blur(4px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.btn-lg{ padding:20px 46px; font-size:17px; }

/* ---------- ヘッダー ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(251,249,245,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(16,35,63,.07);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:72px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{ width:36px; height:36px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; }
.brand-name{ font-family:var(--font-head); font-weight:900; font-size:19px; letter-spacing:.06em; color:var(--navy); line-height:1.3; }
.brand-role{ font-size:11px; letter-spacing:.1em; color:var(--ink-soft); line-height:1.3; }

.site-nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); }
.site-nav a{
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  color:var(--ink-mid);
  transition:color .2s ease;
}
.site-nav a:hover{ color:var(--orange); }
.nav-cta{
  background:var(--navy);
  color:#fff !important;
  padding:11px 22px;
  border-radius:999px;
  font-family:var(--font-head);
  font-weight:700;
}
.nav-cta:hover{ background:var(--orange); }

/* ---------- ヒーロー ---------- */

.hero{
  position:relative;
  color:#fff;
  padding:clamp(90px, 14vw, 170px) 0 clamp(80px, 12vw, 150px);
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(100deg, rgba(10,23,41,.96) 0%, rgba(16,35,63,.80) 46%, rgba(16,35,63,.42) 100%),
    url("images/hero.jpg") center/cover no-repeat var(--navy);
}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:120px;
  z-index:-1;
  background:linear-gradient(to bottom, rgba(251,249,245,0), var(--cream));
}

.hero-inner{ position:relative; max-width:920px; }

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  padding:8px 18px;
  border-radius:999px;
  margin:0 0 30px;
  animation:rise .8s .05s both cubic-bezier(.22,.68,.35,1);
}
.hero-eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(242,121,43,.24);
}

.hero-title{
  font-size:clamp(29px, 5.2vw, 56px);
  font-weight:900;
  line-height:1.4;
  letter-spacing:.01em;
  margin:0 0 28px;
  text-shadow:0 4px 30px rgba(0,0,0,.25);
  animation:rise .9s .15s both cubic-bezier(.22,.68,.35,1);
}
.hero-title-accent{
  position:relative;
  display:inline-block;
}
.hero-title-accent::after{
  content:"";
  position:absolute;
  left:-2px; right:-2px; bottom:.1em;
  height:.28em;
  background:var(--orange);
  opacity:.85;
  border-radius:3px;
  z-index:-1;
}

.hero-lead{
  font-size:clamp(15px, 1.9vw, 18px);
  line-height:2.1;
  color:rgba(255,255,255,.9);
  margin:0 0 40px;
  animation:rise .9s .28s both cubic-bezier(.22,.68,.35,1);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:26px;
  animation:rise .9s .4s both cubic-bezier(.22,.68,.35,1);
}

.hero-note{
  font-size:13.5px;
  color:rgba(255,255,255,.66);
  margin:0;
  animation:rise .9s .5s both cubic-bezier(.22,.68,.35,1);
}

@keyframes rise{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- わたしについて ---------- */

.section-about{ background:var(--cream); }

.about-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(36px, 6vw, 84px);
  align-items:start;
}

.about-visual{ position:relative; }
.about-photo{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:1/1;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-visual::before{
  content:"";
  position:absolute;
  left:-18px; top:-18px;
  width:120px; height:120px;
  border:3px solid var(--orange);
  border-radius:var(--radius);
  opacity:.5;
  z-index:-1;
}
.about-badge{
  position:absolute;
  right:-14px;
  bottom:-24px;
  background:var(--navy);
  color:#fff;
  border-radius:16px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:var(--shadow-md);
}
.about-badge-num{
  font-family:var(--font-lat);
  font-weight:700;
  font-size:20px;
  color:var(--orange);
  letter-spacing:.04em;
}
.about-badge-text{
  font-family:var(--font-head);
  font-weight:700;
  font-size:13px;
  line-height:1.45;
}

.about-body p{ color:var(--ink-mid); }
.about-body strong{ color:var(--ink); font-weight:700; }

.quote-block{
  position:relative;
  background:var(--white);
  border-radius:var(--radius);
  border-left:4px solid var(--orange);
  padding:26px 30px;
  margin:32px 0;
  color:var(--ink-mid);
  font-size:15.5px;
  line-height:2.05;
  box-shadow:var(--shadow-sm);
}

.fact-list li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
  font-size:15px;
  color:var(--ink-mid);
}
.fact-list li::before{
  content:"";
  position:absolute;
  left:2px; top:.72em;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(242,121,43,.16);
}

/* ---------- できること ---------- */

.section-service{
  background:var(--white);
  background-image:url("images/texture.jpg");
  background-size:600px auto;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px, 2.6vw, 32px);
}

.service-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

.service-thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.service-thumb img{ width:100%; height:100%; object-fit:cover; }
.service-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,35,63,.34), rgba(16,35,63,0) 55%);
}
.service-num{
  position:absolute;
  left:18px; bottom:14px;
  z-index:1;
  font-family:var(--font-lat);
  font-weight:700;
  font-size:34px;
  color:#fff;
  letter-spacing:.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}

.service-body{ padding:28px 26px 32px; flex:1; display:flex; flex-direction:column; }
.service-body h3{
  font-size:20px;
  font-weight:900;
  color:var(--navy);
  margin:0 0 16px;
  line-height:1.5;
}
.service-body p{ font-size:14.8px; color:var(--ink-mid); line-height:1.95; }
.service-eg{
  margin-top:auto;
  margin-bottom:0;
  padding-top:16px;
  border-top:1px dashed var(--line);
  font-size:13px !important;
  color:var(--ink-soft) !important;
}

/* ---------- 大事にしていること ---------- */

.section-values{
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.section-values::before{
  content:"";
  position:absolute;
  right:-140px; top:-140px;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,121,43,.22), transparent 68%);
}
.section-head-light .section-title{ color:#fff; }

.value-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px, 3.4vw, 46px);
  position:relative;
}
.value-item{
  border-top:2px solid rgba(255,255,255,.18);
  padding-top:26px;
}
.value-num{
  font-family:var(--font-lat);
  font-weight:700;
  font-size:15px;
  letter-spacing:.16em;
  color:var(--orange);
  display:block;
  margin-bottom:14px;
}
.value-item h3{
  font-size:clamp(18px,2.2vw,21px);
  font-weight:700;
  margin:0 0 14px;
  color:#fff;
}
.value-item p{
  font-size:14.8px;
  color:rgba(255,255,255,.76);
  line-height:2;
  margin:0;
}

/* ---------- 制作したもの ---------- */

.section-works{ background:var(--cream); }

.works-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(20px, 2.8vw, 30px);
}

.work-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.work-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(242,121,43,.4); }

.work-thumb{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#EFECE6;
  border-bottom:1px solid var(--line);
}
.work-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .5s ease;
}
.work-card:hover .work-thumb img{ transform:scale(1.03); }
/* 縦長のスマホ画面写真は、切らずに全体を見せる */
.work-thumb-phone img{ object-fit:contain; object-position:center; }

.work-body{ padding:28px 30px 26px; display:flex; flex-direction:column; flex:1; }
.tag{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  padding:5px 13px;
  border-radius:999px;
  margin-bottom:12px;
}
.tag-app{ background:rgba(16,35,63,.09); color:var(--navy); }
.tag-hp{ background:rgba(242,121,43,.14); color:var(--orange-dark); }

.work-card h3{
  font-size:clamp(18px,2.2vw,22px);
  font-weight:900;
  color:var(--navy);
  margin:0;
}
.work-card p{ font-size:14.8px; color:var(--ink-mid); line-height:1.95; }
.work-card strong{ color:var(--ink); }

.tech-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 22px;
}
.tech-list li{
  font-family:var(--font-lat);
  font-size:12px;
  font-weight:500;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:6px;
  padding:4px 10px;
}

.work-link{
  margin-top:auto;
  align-self:flex-start;
  font-family:var(--font-head);
  font-weight:700;
  font-size:14.5px;
  color:var(--navy);
  text-decoration:none;
  border-bottom:2px solid var(--orange);
  padding-bottom:3px;
  transition:color .2s ease, gap .2s ease;
}
.work-link::after{ content:" →"; }
.work-link:hover{ color:var(--orange); }

.works-note{
  margin:32px 0 0;
  font-size:13px;
  color:var(--ink-soft);
}

/* ---------- 作品ページ（works/*.html） ---------- */

.work-hero{
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(242,121,43,.16), transparent 68%),
    var(--navy);
  color:#fff;
  padding:clamp(52px, 7vw, 84px) 0 clamp(56px, 7vw, 88px);
}
.work-hero-inner{ max-width:820px; }
.work-hero .tag-app{ background:rgba(255,255,255,.14); color:#fff; }
.work-hero .tag-hp{ background:rgba(242,121,43,.22); color:#FFD3B0; }

.back-link{
  display:block;
  width:fit-content;
  font-size:13.5px;
  color:rgba(255,255,255,.7);
  text-decoration:none;
  margin-bottom:22px;
  transition:color .2s ease;
}
.back-link::before{ content:"← "; }
.back-link:hover{ color:var(--orange); }

.work-hero-title{
  font-size:clamp(27px, 4.4vw, 44px);
  font-weight:900;
  margin:8px 0 20px;
  line-height:1.4;
}
.work-hero-sub{ font-size:.56em; font-weight:700; opacity:.75; margin-left:.2em; }
.work-hero-lead{
  font-size:clamp(15px,1.8vw,17px);
  color:rgba(255,255,255,.85);
  line-height:2.05;
  margin:0 0 26px;
  max-width:44em;
}
.work-hero-lead strong{ color:#fff; }
.tech-list-light li{ color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.28); }

.work-detail{ background:var(--cream); }

.shot{
  margin:0 0 clamp(48px, 6vw, 76px);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
}
.shot img{
  width:100%;
  height:auto;
  display:block;
}
.shot-phone{ background:#EFECE6; }
.shot-phone img{
  width:auto;
  max-height:min(620px, 78vh);
  margin-inline:auto;
  padding:26px 0;
}
.shot figcaption{
  padding:16px 22px 18px;
  font-size:13.5px;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  background:var(--white);
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(28px, 4vw, 56px);
  margin-bottom:clamp(40px, 5vw, 64px);
}
.detail-title{
  font-size:clamp(20px,2.6vw,26px);
  font-weight:900;
  color:var(--navy);
  margin:0 0 18px;
}
.detail-block p{ color:var(--ink-mid); font-size:15.2px; line-height:2.05; }
.detail-block strong{ color:var(--ink); }

.status-box{
  background:var(--white);
  border:1px solid var(--line);
  border-left:4px solid var(--ink-soft);
  border-radius:var(--radius);
  padding:28px 32px;
  box-shadow:var(--shadow-sm);
}
.status-box-open{ border-left-color:var(--orange); }
.status-label{
  font-family:var(--font-head);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--orange);
  margin:0 0 10px;
}
.status-text{ font-size:14.8px; color:var(--ink-mid); line-height:2; margin:0; }
.status-box .btn{ margin-top:20px; }

.back-link-bottom{
  color:var(--ink-soft);
  margin:clamp(40px,5vw,60px) 0 0;
  font-size:14.5px;
}
.back-link-bottom:hover{ color:var(--orange); }

/* ---------- 対応エリア ---------- */

.section-area{
  position:relative;
  padding:clamp(80px, 12vw, 150px) 0;
  overflow:hidden;
}
.area-bg{ position:absolute; inset:0; }
.area-bg img{ width:100%; height:100%; object-fit:cover; }
.area-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,23,41,.88) 0%, rgba(10,23,41,.55) 62%, rgba(10,23,41,.28) 100%);
}
.area-inner{ position:relative; }
.area-card{ max-width:620px; color:#fff; }
.area-card .section-title{ color:#fff; }
.area-card p{ color:rgba(255,255,255,.86); font-size:15.5px; line-height:2.1; }

/* ---------- ご相談の流れ ---------- */

.section-flow{ background:var(--white); }

.flow-list{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(18px, 2.4vw, 28px);
  counter-reset:flow;
}
.flow-item{
  position:relative;
  background:var(--cream);
  border-radius:var(--radius);
  padding:32px 26px 28px;
  border:1px solid var(--line);
}
.flow-item::after{
  content:"";
  position:absolute;
  right:-16px; top:50%;
  width:12px; height:12px;
  border-top:2px solid var(--orange);
  border-right:2px solid var(--orange);
  transform:translateY(-50%) rotate(45deg);
  opacity:.55;
}
.flow-item:last-child::after{ display:none; }

.flow-num{
  font-family:var(--font-lat);
  font-weight:700;
  font-size:13px;
  letter-spacing:.18em;
  color:var(--orange);
  display:block;
  margin-bottom:12px;
}
.flow-item h3{
  font-size:17px;
  font-weight:700;
  color:var(--navy);
  margin:0 0 10px;
}
.flow-item p{ font-size:14px; color:var(--ink-mid); margin:0; line-height:1.9; }

/* ---------- 稼働・料金 ---------- */

.section-info{ background:var(--cream); }

.info-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(20px, 3vw, 34px);
}
.info-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(30px, 4vw, 48px);
  box-shadow:var(--shadow-sm);
}
.info-title{
  font-size:clamp(21px,2.6vw,26px);
  font-weight:900;
  color:var(--navy);
  margin:0 0 24px;
}
.info-dl{ margin:0; }
.info-dl dt{
  font-family:var(--font-head);
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--orange);
  margin-bottom:6px;
}
.info-dl dd{
  margin:0 0 20px;
  font-size:15.5px;
  color:var(--ink-mid);
  padding-bottom:20px;
  border-bottom:1px dashed var(--line);
}
.info-dl dd:last-child{ border-bottom:none; padding-bottom:0; margin-bottom:0; }
.info-sub{ display:block; font-size:13px; color:var(--ink-soft); }

.info-card-accent{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.info-card-accent .info-title{ color:#fff; }
.info-card-accent p{ color:rgba(255,255,255,.78); font-size:15px; }
.price-lead{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(17px,2.1vw,20px);
  color:#fff !important;
  line-height:1.75;
}
.price-free{
  display:inline-block;
  margin:8px 0 0;
  background:var(--orange);
  color:#fff !important;
  font-family:var(--font-head);
  font-weight:700;
  font-size:15px;
  padding:10px 24px;
  border-radius:999px;
}

/* ---------- お問い合わせ ---------- */

.section-contact{
  background:
    radial-gradient(1000px 460px at 50% -10%, rgba(242,121,43,.18), transparent 70%),
    var(--navy-deep);
  color:#fff;
  text-align:center;
}
.contact-inner{ max-width:860px; }
.section-contact .section-label{ justify-content:center; }
.section-contact .section-label::after{ display:none; }

.contact-title{
  font-size:clamp(26px, 4.4vw, 42px);
  font-weight:900;
  margin:0 0 22px;
  line-height:1.45;
}
.contact-lead{
  color:rgba(255,255,255,.82);
  font-size:clamp(15px,1.8vw,16.5px);
  line-height:2.1;
  margin:0 0 34px;
}
.contact-mail{
  display:inline-block;
  font-family:var(--font-lat);
  font-size:clamp(16px, 2.4vw, 23px);
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.36);
  padding-bottom:6px;
  margin-bottom:34px;
  word-break:break-all;
  transition:color .2s ease, border-color .2s ease;
}
.contact-mail:hover{ color:var(--orange); border-color:var(--orange); }
.contact-inner .btn{ display:flex; width:fit-content; margin-inline:auto; }
.contact-note{
  margin:26px 0 0;
  font-size:13px;
  color:rgba(255,255,255,.55);
}

/* ---------- フッター ---------- */

.site-footer{
  background:var(--navy);
  color:rgba(255,255,255,.7);
  padding:44px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-name{
  font-family:var(--font-head);
  font-weight:900;
  font-size:17px;
  letter-spacing:.06em;
  color:#fff;
  margin:0;
  line-height:1.4;
}
.footer-role{ font-size:12px; margin:0; line-height:1.4; }
.footer-area{ font-size:13px; margin:0; }
.footer-copy{ font-family:var(--font-lat); font-size:12.5px; margin:0; letter-spacing:.04em; }

/* ===========================================================================
   レスポンシブ（タブレット・スマホ）
   =========================================================================== */

@media (max-width:1000px){
  .service-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .value-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
  .flow-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .flow-item:nth-child(2)::after{ display:none; }
  .about-grid{ grid-template-columns:1fr; gap:56px; }
  .about-visual{ max-width:420px; }
}

@media (max-width:760px){
  body{ font-size:15.5px; line-height:1.9; }
  .sp-only{ display:block; }

  .brand-role{ display:none; }
  .site-nav a:not(.nav-cta){ display:none; }
  .header-inner{ min-height:64px; }

  .hero{ padding:74px 0 84px; }
  .hero-title{ line-height:1.42; }
  .hero-lead br,
  .contact-lead br{ display:none; }
  .hero-eyebrow{ font-size:11.5px; padding:7px 15px; letter-spacing:.08em; margin-bottom:24px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }

  .service-grid,
  .works-grid,
  .info-grid,
  .value-grid,
  .flow-list{ grid-template-columns:1fr; }

  .value-grid{ gap:0; }
  .value-item{ padding:24px 0; border-top:1px solid rgba(255,255,255,.16); }
  .value-item:first-child{ border-top:2px solid rgba(255,255,255,.28); }

  .flow-item::after{
    right:auto; top:auto;
    left:50%; bottom:-16px;
    transform:translateX(-50%) rotate(135deg);
  }
  .flow-item:nth-child(2)::after{ display:block; }
  .flow-item:last-child::after{ display:none; }
  .flow-list{ gap:26px; }

  .detail-grid{ grid-template-columns:1fr; }

  .about-visual{ max-width:100%; }
  .about-badge{ right:12px; bottom:-20px; padding:13px 18px; }

  .area-bg::after{
    background:linear-gradient(180deg, rgba(10,23,41,.86) 0%, rgba(10,23,41,.78) 100%);
  }

  .footer-inner{ flex-direction:column; align-items:flex-start; gap:16px; }
}

@media (max-width:420px){
  .brand-name{ font-size:17px; }
  .nav-cta{ padding:10px 18px; font-size:13px; }
  .quote-block{ padding:22px 20px; }
  .work-body,
  .service-body{ padding-left:22px; padding-right:22px; }
  .status-box{ padding:24px 22px; }
}