@import "tailwindcss";

/* 色や幅をまとめて変更する場合は、まずこの変数を編集してください */
:root {
  --ink: #202429;
  --navy: #18334d;
  --navy-deep: #10283d;
  --accent: #3f827c;
  --muted: #6d747a;
  --line: #d9dde0;
  --paper: #f7f7f5;
  --mist: #f3f6f8;
  --navy-wash: #eef3f6;
  --white: #fff;
  --shadow: 0 18px 55px rgba(17, 37, 53, .07);
  --shadow-hover: 0 24px 65px rgba(17, 37, 53, .13);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; color: var(--ink); background: var(--white); font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; font-size: 18px; line-height: 1.9; letter-spacing: .03em; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; height: 92px; display: flex; align-items: center; justify-content: flex-end; padding: 0 4.5vw; background: rgba(255,255,255,.91); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(220,223,225,.7); }
.logo { font-family: Georgia, serif; font-size: 22px; letter-spacing: .16em; line-height: 1; }
.logo span { display: block; margin-top: 7px; font: 10px/1 Arial, sans-serif; letter-spacing: .2em; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 34px; font-size: 16px; letter-spacing: .06em; }
.nav a { transition: opacity .25s; }
.nav a:hover { opacity: .55; }
.nav-contact { padding: 12px 22px; border: 1px solid var(--navy); }
.menu-button { display: none; }

.hero { min-height: 100svh; padding: 180px 8vw 90px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(circle at 88% 28%, rgba(63,130,124,.1), transparent 24%), radial-gradient(circle at 72% 72%, rgba(24,51,77,.055), transparent 28%); }
.hero::before { content: ""; position: absolute; z-index: -1; right: -30px; bottom: 5%; width: min(42vw,610px); height: min(42vw,610px); opacity: .45; background-image: radial-gradient(circle, rgba(63,130,124,.42) 1.5px, transparent 1.8px); background-size: 32px 32px; mask-image: radial-gradient(circle, #000 10%, transparent 72%); }
.hero::after { content: ""; position: absolute; right: 8vw; top: 160px; width: 1px; height: 135px; background: var(--line); }
.hero-kicker { margin-bottom: 36px; color: var(--navy); font-size: 17px; letter-spacing: .14em; display: flex; align-items: center; gap: 14px; }
.hero-kicker span { width: 42px; height: 1px; background: var(--navy); }
.hero h1 { margin: 0; font-size: clamp(46px, 6.3vw, 94px); font-weight: 500; line-height: 1.38; letter-spacing: .04em; }
.hero-bottom { margin-top: 52px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: end; }
.hero-bottom p { margin: 0; color: #465159; font-size: 20px; line-height: 2; }
.hero-actions { display: flex; align-items: stretch; gap: 18px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 50px; min-width: 260px; padding: 19px 25px; font-size: 17px; transition: transform .3s, background .3s; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--navy); color: var(--white); box-shadow: inset 3px 0 0 var(--accent); }
.button-primary:hover { background: #244762; box-shadow: inset 5px 0 0 var(--accent); }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 50px; min-width: 260px; padding: 18px 24px; border: 1px solid var(--navy); font-size: 17px; transition: transform .3s ease, color .3s ease, background .3s ease; }
.text-link:hover { transform: translateY(-3px); color: white; background: var(--navy); }
.text-link span { margin-left: 15px; }
.scroll-sign { position: absolute; right: 4vw; bottom: 0; font: 9px Arial, sans-serif; letter-spacing: .18em; writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; }
.scroll-sign span { width: 1px; height: 64px; background: var(--ink); }

.section { max-width: var(--max); margin: 0 auto; padding: 150px 40px; }
.section-label { display: flex; align-items: center; gap: 18px; margin-bottom: 75px; font: 13px Arial, sans-serif; letter-spacing: .18em; color: var(--muted); }
.section-label span { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); }
.section-label span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(63,130,124,.1); }
.section-label::after { content: ""; width: 55px; height: 1px; background: var(--line); }
.section-label.light { color: #aab6c0; }
.section-label.light span { color: #fff; }
.section-label.light span::before { background: #79aaa5; box-shadow: 0 0 0 4px rgba(121,170,165,.12); }
.section-label.light::after { background: rgba(255,255,255,.2); }
.two-column { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10vw; }
.section-title { margin: 0; font-size: clamp(32px, 4vw, 54px); font-weight: 500; line-height: 1.55; letter-spacing: .06em; }

.concerns { padding-bottom: 180px; position: relative; }
.concerns::before { content: ""; position: absolute; z-index: -1; inset: 34% 0 0; background: linear-gradient(180deg, transparent, rgba(238,243,246,.65)); }
.concerns .two-column { grid-template-columns: .7fr 1.3fr; gap: 6vw; }
.concerns .section-title { font-size: clamp(32px,3.6vw,50px); letter-spacing: .035em; white-space: nowrap; }
.concern-list { border-top: 1px solid var(--line); }
.concern-item { display: grid; grid-template-columns: 45px 1fr; gap: 20px; align-items: center; padding: 25px 0; border-bottom: 1px solid var(--line); }
.concern-item span { color: #858e94; font: 12px Arial, sans-serif; }
.concern-item p { margin: 0; font-size: 19px; }
.concern-note { margin: 100px 0 0 30%; padding-left: 30px; border-left: 2px solid var(--navy); font-size: 19px; line-height: 2; }

.mission { padding: 140px max(8vw, calc((100vw - 1160px) / 2)); color: #fff; background: var(--navy-deep); }
.mission-copy { margin: 100px 0 115px; font-size: clamp(38px, 5.4vw, 70px); line-height: 1.55; font-weight: 400; }
.mission-body { margin-left: 35%; max-width: 760px; color: #d2d9df; font-size: 20px; line-height: 2; }
.mission-body p { margin: 0 0 30px; }
.selection-criteria { margin: 95px 0 0 18%; padding: clamp(36px,5vw,68px); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(63,130,124,.075)); box-shadow: 0 26px 70px rgba(3,17,29,.18); }
.selection-criteria::after { content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border: 1px solid rgba(121,170,165,.2); border-radius: 50%; box-shadow: 0 0 0 42px rgba(121,170,165,.025), 0 0 0 84px rgba(121,170,165,.018); }
.criteria-label { margin: 0 0 28px; color: #8fc0bb; font: 16px Arial,sans-serif; letter-spacing: .16em; }
.criteria-lead { max-width: 800px; margin: 0; position: relative; z-index: 1; font-size: clamp(27px,3vw,43px); line-height: 1.65; }
.criteria-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 52px; position: relative; z-index: 1; background: rgba(255,255,255,.16); }
.criteria-grid > div { min-height: 165px; padding: 25px 24px; background: #173149; }
.criteria-grid span { display: block; margin-bottom: 27px; color: #8fc0bb; font: 12px Arial,sans-serif; }
.criteria-grid strong { font-size: 18px; line-height: 1.75; font-weight: 500; }
.criteria-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; margin-top: 48px; position: relative; z-index: 1; }
.criteria-copy p { margin: 0; color: #d2d9df; font-size: 19px; line-height: 2; }
.mission-emphasis { margin: 75px 0 0 38%; font-size: 29px; letter-spacing: .09em; }

.section-heading-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10vw; }
.section-heading-row > p { margin: 0; color: #5d676e; font-size: 20px; line-height: 2; }
.process { position: relative; }
.process::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background-image: linear-gradient(rgba(24,51,77,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(24,51,77,.035) 1px,transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom,transparent 8%,#000 34%,#000 82%,transparent); }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 90px; border-top: 1px solid var(--line); }
.process-card { min-height: 350px; padding: 36px 30px; border-right: 1px solid var(--line); background: rgba(255,255,255,.78); transition: transform .35s ease, box-shadow .35s ease, background .35s ease; }
.process-card:first-child { border-left: 1px solid var(--line); }
.process-card:hover { position: relative; z-index: 1; transform: translateY(-6px); background: white; box-shadow: var(--shadow); }
.process-card > span { color: var(--navy); font: 13px Arial, sans-serif; }
.process-card h3 { margin: 62px 0 25px; font-size: 24px; font-weight: 500; }
.process-card p { margin: 0; color: #59646b; font-size: 18px; line-height: 1.9; }

.services { background: linear-gradient(145deg, var(--paper), var(--navy-wash)); max-width: none; padding-left: max(40px, calc((100vw - 1160px) / 2)); padding-right: max(40px, calc((100vw - 1160px) / 2)); }
.services .two-column { grid-template-columns: minmax(300px,.62fr) minmax(680px,1.38fr); gap: clamp(48px,6vw,90px); }
.services .section-title { white-space: nowrap; }
.side-note { margin-top: 38px; max-width: 360px; color: #59646b; font-size: 19px; line-height: 2; }
.service-list { display: grid; gap: 18px; }
.service { display: grid; grid-template-columns: 78px minmax(230px,.9fr) minmax(270px,1.1fr); gap: 28px; align-items: center; padding: 38px 34px; position: relative; overflow: hidden; border: 1px solid rgba(24,51,77,.1); border-radius: 10px; background: rgba(255,255,255,.74); box-shadow: 0 10px 35px rgba(17,37,53,.035); transition: transform .35s ease, box-shadow .35s ease, background .35s ease; }
.service::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .35s ease; }
.service:hover { transform: translateY(-5px); background: white; box-shadow: var(--shadow); }
.service:hover::before { transform: scaleY(1); }
.service-main { display: grid; grid-template-columns: 34px 1fr; align-items: start; }
.service span { padding-top: 6px; color: var(--navy); font: 12px Arial, sans-serif; }
.service h3 { margin: 0; font-size: 24px; font-weight: 500; white-space: nowrap; }
.service-main p { margin: 10px 0 0; color: #626c73; font-size: 18px; line-height: 1.9; }
.service ul { margin: 0; padding: 0; list-style: none; color: #4d5961; font-size: 18px; line-height: 1.85; }
.service li { position: relative; padding-left: 24px; }
.service li::before { content: "—"; position: absolute; left: 0; color: #a2a7aa; }
.service-icon { width: 62px; height: 62px; position: relative; border: 1px solid rgba(24,51,77,.18); border-radius: 50%; color: var(--navy); }
.service-icon i { position: absolute; display: block; box-sizing: border-box; }
/* AI：つながる情報を表す細いライン */
.icon-ai i:nth-child(1), .icon-ai i:nth-child(2), .icon-ai i:nth-child(3) { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; }
.icon-ai i:nth-child(1) { left: 16px; top: 25px; }
.icon-ai i:nth-child(2) { right: 15px; top: 14px; }
.icon-ai i:nth-child(3) { right: 13px; bottom: 13px; }
.icon-ai::before, .icon-ai::after { content: ""; position: absolute; left: 23px; width: 21px; height: 1px; background: currentColor; transform-origin: left; }
.icon-ai::before { top: 28px; transform: rotate(-27deg); }
.icon-ai::after { top: 32px; transform: rotate(27deg); }
/* Web：ブラウザの窓を表す細いライン */
.icon-web::before { content: ""; position: absolute; inset: 16px 12px; border: 1px solid currentColor; border-radius: 2px; }
.icon-web::after { content: ""; position: absolute; left: 12px; right: 12px; top: 25px; height: 1px; background: currentColor; }
.icon-web i:nth-child(1), .icon-web i:nth-child(2), .icon-web i:nth-child(3) { top: 21px; width: 2px; height: 2px; border-radius: 50%; background: currentColor; }
.icon-web i:nth-child(1) { left: 17px; }.icon-web i:nth-child(2) { left: 22px; }.icon-web i:nth-child(3) { left: 27px; }
/* App：スマートフォン画面を表す細いライン */
.icon-app::before { content: ""; position: absolute; left: 20px; top: 11px; width: 21px; height: 39px; border: 1px solid currentColor; border-radius: 4px; }
.icon-app::after { content: ""; position: absolute; left: 28px; bottom: 15px; width: 6px; height: 1px; background: currentColor; }

.works { padding: 140px 5vw; background: var(--navy); color: white; }
.works-head { max-width: var(--max); margin: auto; display: flex; justify-content: space-between; align-items: end; }
.works-head p { color: #c8d2d9; font-size: 15px; }
.works-grid { max-width: var(--max); margin: 75px auto 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 60px 28px; }
.work-card { grid-column: span 2; transition: transform .4s ease; }
.work-card:nth-child(4), .work-card:nth-child(5) { grid-column: span 3; }
.work-card:hover { transform: translateY(-7px); }
.work-image { aspect-ratio: 1.42; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-radius: 8px; color: #81909c; background: #e8e9e6; font: 9px/1.6 Arial, sans-serif; letter-spacing: .18em; box-shadow: 0 16px 35px rgba(4,18,31,.16); transition: box-shadow .4s ease; }
.work-card:hover .work-image { box-shadow: 0 24px 50px rgba(4,18,31,.28); }
.work-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.work-lecture .work-image img { object-position: right center; }
.work-community .work-image img { object-position: center 44%; }
.work-card:hover .work-image img { transform: scale(1.035); }
.work-image b { position: absolute; z-index: 2; right: 13px; bottom: 11px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: rgba(12,34,51,.75); backdrop-filter: blur(5px); font-weight: 400; }
.replace-note { position: absolute; z-index: 2; left: 12px; bottom: 12px; padding: 6px 9px; border-radius: 3px; color: #fff; background: rgba(12,34,51,.72); backdrop-filter: blur(5px); font: 8px Arial, sans-serif; letter-spacing: .08em; }
.work-category { margin: 20px 0 9px; color: #a8b8c4; font: 11px Arial, sans-serif; letter-spacing: .16em; }
.work-card h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 400; }
.work-card h3 span { font-size: 18px; filter: grayscale(.3); }
.work-card h3 .work-symbol-improvement { width: 23px; height: 21px; flex: 0 0 23px; position: relative; color: #8fc0bb; filter: none; background: radial-gradient(circle at 4px 10px,currentColor 0 2px,transparent 2.6px),radial-gradient(circle at 19px 4px,currentColor 0 2px,transparent 2.6px),radial-gradient(circle at 19px 17px,currentColor 0 2px,transparent 2.6px); }
.work-symbol-improvement::before, .work-symbol-improvement::after { content: ""; position: absolute; left: 5px; width: 14px; height: 1px; background: currentColor; transform-origin: left center; }
.work-symbol-improvement::before { top: 9px; transform: rotate(-23deg); }
.work-symbol-improvement::after { top: 11px; transform: rotate(25deg); }
.work-description { max-width: 34em; margin: 13px 0 0; color: #d0d8de; font-size: 19px; line-height: 1.85; letter-spacing: .02em; }
.work-detail { max-width: 38em; margin: 15px 0 0; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.12); color: #aebdc7; font-size: 18px; line-height: 1.9; letter-spacing: .015em; }

.testimonials { padding: 145px 5vw; background: linear-gradient(180deg, #f7f9fa, #eef3f6); }
.testimonials-inner { max-width: var(--max); margin: auto; }
.testimonials .section-heading-row { grid-template-columns: 1fr; }
.voice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 75px; }
.voice-card { min-height: 390px; padding: 42px 42px 38px; overflow: hidden; position: relative; border: 1px solid rgba(24,51,77,.1); border-radius: 9px; background: rgba(255,255,255,.86); box-shadow: 0 15px 45px rgba(17,37,53,.055); transition: transform .35s ease, box-shadow .35s ease; }
.voice-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.voice-card::after { content: "“"; position: absolute; right: 30px; top: 3px; color: rgba(24,51,77,.07); font: 150px/1 Georgia, serif; }
.voice-number { position: relative; z-index: 1; margin-bottom: 42px; color: var(--navy); font: 11px Arial, sans-serif; letter-spacing: .18em; }
.voice-card blockquote { position: relative; z-index: 1; margin: 0; }
.voice-card h3 { margin: 0 0 28px; color: var(--ink); font-size: 25px; font-weight: 500; line-height: 1.7; letter-spacing: .045em; }
.voice-card blockquote p { margin: 0; color: #505b62; font-size: 19px; line-height: 1.95; }

.body-copy { color: #4e565c; font-size: 19px; }
.body-copy p { margin: 0 0 30px; }
.field-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 45px; }
.field-tags span { padding: 9px 22px; border: 1px solid rgba(63,130,124,.35); border-radius: 999px; color: var(--navy); background: rgba(63,130,124,.045); font-size: 15px; }
.field .two-column { grid-template-columns: 1.05fr .95fr; gap: 8vw; }
.field .section-title { font-size: clamp(32px,3.6vw,50px); letter-spacing: .035em; white-space: nowrap; }

.fde { padding: 140px max(8vw, calc((100vw - 1160px) / 2)); background: #1d252b; color: white; }
.fde-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; }
.fde-visual { min-height: 450px; padding: 48px 42px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg,rgba(38,58,72,.92),rgba(25,35,42,.72)); box-shadow: 0 28px 70px rgba(0,0,0,.18); }
.fde-visual::after { content: ""; position: absolute; right: -95px; bottom: -110px; width: 290px; height: 290px; border: 1px solid rgba(145,174,194,.2); border-radius: 50%; box-shadow: 0 0 0 48px rgba(145,174,194,.035), 0 0 0 96px rgba(145,174,194,.025); }
.fde-index { margin: 0 0 62px !important; color: #b4c4ce !important; font: 13px Arial,sans-serif !important; letter-spacing: .18em; }
.fde-grid .fde-en { margin: 0; position: relative; z-index: 1; color: #fff; font: clamp(48px,5vw,68px)/.95 Arial,sans-serif; letter-spacing: -.045em; }
.fde-grid .fde-en span { display: block; margin: 12px 0; color: #9eb6c5; font-size: .3em; letter-spacing: .22em; }
.fde-route { display: flex; align-items: center; gap: 9px; margin-top: 65px; position: relative; z-index: 1; color: #edf2f5; font-size: 15px; }
.fde-route i { width: 24px; height: 1px; background: #617583; }
.fde-grid .fde-sub { margin-top: 28px; position: relative; z-index: 1; color: #d1dbe1; font-size: 17px; }
.fde-grid h2 { margin: 0 0 50px; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.6; font-weight: 400; }
.fde-grid p { color: #c4ccd1; font-size: 19px; }
.fde-grid .fde-goal { margin: 50px 0 35px; color: white; font-size: 23px; }
.fde-grid ul { margin: 0 0 40px; padding: 25px 0; list-style: none; border-top: 1px solid #3e484e; border-bottom: 1px solid #3e484e; }
.fde-grid li { padding: 8px 0; font-size: 19px; }
.fde-grid li::before { content: "—"; margin-right: 15px; color: #778790; }

.profile { max-width: none; padding-left: max(40px,calc((100vw - 1160px) / 2)); padding-right: max(40px,calc((100vw - 1160px) / 2)); background: linear-gradient(140deg, #fff 50%, #f4f6f6); }
.profile > .section-label, .profile-grid { max-width: 1160px; margin-left: auto; margin-right: auto; }
.profile-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; align-items: start; }
.profile-image { aspect-ratio: .82; max-height: 650px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; border-radius: 8px; background: #e7e8e5; box-shadow: var(--shadow); }
.profile-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: saturate(.9) contrast(.98); transition: transform .7s cubic-bezier(.2,.6,.2,1); }
.profile-image:hover img { transform: scale(1.025); }
.profile-role { color: var(--navy); font-size: 18px; }
.profile-text h2 { margin: 15px 0 18px; font-size: 38px; font-weight: 500; }
.design-four .profile-text .profile-kana {
  margin: 14px 0 0;
  color: #77797f;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .14em;
}
.design-four .profile-text .profile-kana + h2 { margin-top: 6px; }
.profile-catch { margin: 0 0 38px !important; padding: 20px 0 20px 24px; border-left: 2px solid var(--navy); color: var(--ink) !important; font-size: 24px !important; line-height: 1.7; letter-spacing: .07em; }
.profile-text > p:not(.profile-role) { color: #505a61; font-size: 19px; line-height: 1.95; margin-bottom: 24px; }
.profile-text strong { color: var(--ink); font-weight: 600; }
.profile-text .profile-intro { margin-bottom: 30px; color: var(--ink); font-size: 21px; font-weight: 500; }
.profile-text .profile-short { margin-top: 32px; color: var(--ink); font-size: 20px; font-weight: 500; }
.profile-text .profile-final { margin-top: 36px; padding: 25px 27px; border-radius: 6px; background: var(--navy-wash); color: var(--ink); font-size: 19px; line-height: 1.9; }

.for-you { padding: 140px max(8vw, calc((100vw - 1160px) / 2)); background: var(--paper); }
.for-you h2 { margin: 0 0 80px; font-size: clamp(35px, 4.4vw, 58px); line-height: 1.55; font-weight: 500; }
.for-you-grid { display: block; max-width: 720px; }
.for-you-grid p, .for-you-grid li { color: #505a61; font-size: 20px; }
.for-you-grid ul { margin: 20px 0; padding: 0; list-style: none; }
.for-you-grid li { padding: 5px 0; color: var(--ink); font-size: 17px; }

.contact { padding: 140px 40px; text-align: center; background: var(--navy-deep); color: white; }
.contact-inner { max-width: 900px; margin: auto; }
.contact-label { color: #9eb0bc; font: 12px Arial, sans-serif; letter-spacing: .22em; }
.contact h2 { margin: 45px 0; font-size: clamp(32px, 4.6vw, 58px); font-weight: 400; line-height: 1.6; }
.contact-inner > p:not(.contact-label) { color: #c7d0d6; font-size: 20px; }
.contact-examples { max-width: 780px; margin: 38px auto 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.contact-examples span { padding: 13px 20px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff; font-size: 15px; }
.contact-assurance { margin-top: 34px; }
.button-light { margin-top: 45px; background: white; color: var(--navy-deep); }
.button-light:hover { background: #e9eef1; }
footer { padding: 52px 24px; display: flex; justify-content: center; align-items: center; }
footer > p { margin: 0; text-align: center; color: var(--navy); font-size: 19px; font-weight: 500; letter-spacing: .1em; }

/* スクロール演出。動きを減らす設定の方には適用しません */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.mobile { display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1200px) {
  .concerns .two-column, .services .two-column, .field .two-column, .profile-grid { grid-template-columns: 1fr; gap: 60px; }
  .profile-image { width: min(100%,520px); }
  .selection-criteria { margin-left: 8%; }
}

@media (max-width: 900px) {
  .site-header { height: 74px; padding: 0 24px; }
  .menu-button { display: block; width: 35px; height: 35px; border: 0; background: none; padding: 8px 3px; }
  .menu-button span { display: block; width: 28px; height: 1px; margin: 6px 0; background: var(--ink); }
  .nav { display: none; position: fixed; inset: 74px 0 0; padding: 55px 30px; background: white; flex-direction: column; align-items: flex-start; gap: 25px; font-size: 16px; }
  .nav.is-open { display: flex; }
  .nav-contact { margin-top: 15px; width: 100%; }
  .hero { padding: 140px 7vw 80px; min-height: 850px; }
  .hero::after { display: none; }
  .hero h1 { font-size: clamp(42px, 9vw, 68px); }
  .hero-bottom { grid-template-columns: 1fr; gap: 38px; }
  .hero-actions { flex-wrap: wrap; }
  .scroll-sign { display: none; }
  .section { padding: 110px 24px; }
  .section-label { margin-bottom: 55px; }
  .two-column, .concerns .two-column, .services .two-column, .field .two-column, .profile-grid, .fde-grid { grid-template-columns: 1fr; gap: 60px; }
  .concern-note, .mission-body, .mission-emphasis { margin-left: 0; }
  .selection-criteria { margin-left: 0; }
  .criteria-copy { grid-template-columns: 1fr; gap: 24px; }
  .mission, .fde, .for-you { padding: 110px 7vw; }
  .mission-copy { margin: 75px 0 90px; }
  .section-heading-row { grid-template-columns: 1fr; gap: 35px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-card:nth-child(3) { border-left: 1px solid var(--line); }
  .works-grid { grid-template-columns: repeat(2,1fr); }
  .work-card, .work-card:nth-child(4), .work-card:nth-child(5) { grid-column: span 1; }
  .voice-grid { grid-template-columns: repeat(2,1fr); }
  .profile-image { max-width: 500px; }
  .field .section-title { white-space: normal; }
}

@media (max-width: 600px) {
  body { font-size: 17px; letter-spacing: .018em; }
  .desktop { display: none; }
  .mobile { display: block; }
  .hero { min-height: 760px; padding-top: 120px; }
  .hero-kicker { font-size: 14px; }
  .hero h1 { font-size: clamp(36px,10.5vw,44px); line-height: 1.5; letter-spacing: .01em; }
  .hero-bottom { margin-top: 38px; }
  .hero-bottom p { font-size: 18px; line-height: 1.95; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 24px; }
  .button, .hero-actions .text-link { width: 100%; }
  .section-title { font-size: 32px; }
  .concern-item { grid-template-columns: 30px 1fr; gap: 10px; padding: 20px 0; }
  .concern-item p { font-size: 17px; line-height: 1.8; }
  .concern-note { margin-top: 65px; padding-left: 20px; font-size: 16px; }
  .mission-copy { font-size: 34px; }
  .mission-body { font-size: 18px; }
  .selection-criteria { margin-top: 70px; padding: 30px 22px; }
  .criteria-label { font-size: 14px; line-height: 1.7; }
  .criteria-lead { font-size: 25px; }
  .criteria-grid { grid-template-columns: 1fr; margin-top: 36px; }
  .criteria-grid > div { min-height: 0; padding: 20px; }
  .criteria-grid span { margin-bottom: 10px; }
  .criteria-grid strong { font-size: 17px; }
  .criteria-grid strong br { display: none; }
  .criteria-copy { margin-top: 34px; }
  .criteria-copy p { font-size: 17px; line-height: 1.95; }
  .mission-emphasis { font-size: 21px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-card, .process-card:nth-child(3) { border-left: 1px solid var(--line); min-height: auto; padding: 24px; }
  .process-card h3 { margin: 30px 0 14px; }
  .process-card p { font-size: 17px; }
  .service { grid-template-columns: 65px 1fr; gap: 18px; padding: 24px; }
  .service-main { grid-template-columns: 31px 1fr; }
  .service ul { grid-column: 1 / -1; padding-left: 8px; }
  .service-main p { font-size: 17px; }
  .service ul { font-size: 17px; }
  .service-icon { width: 58px; height: 58px; }
  .works { padding: 100px 24px; }
  .works-head { display: block; }
  .works-head p { margin-top: 30px; }
  .works-grid { grid-template-columns: 1fr; gap: 45px; margin-top: 55px; }
  .work-card h3 { font-size: 21px; }
  .work-description { font-size: 18px; }
  .work-detail { font-size: 17px; }
  .testimonials { padding: 100px 24px; }
  .voice-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 55px; }
  .voice-card { min-height: 0; padding: 32px 27px; }
  .voice-number { margin-bottom: 30px; }
  .voice-card h3 { font-size: 21px; }
  .voice-card blockquote p { font-size: 17px; }
  .fde-grid .fde-en { font-size: 44px; }
  .fde-visual { min-height: 390px; padding: 36px 28px; }
  .fde-index { margin-bottom: 55px !important; }
  .fde-route { gap: 6px; margin-top: 55px; font-size: 13px; }
  .fde-route i { width: 15px; }
  .profile-text h2 { font-size: 34px; margin-bottom: 30px; }
  .profile-catch { margin-top: -10px !important; font-size: 21px !important; }
  .profile-text .profile-intro { font-size: 18px; }
  .profile-text .profile-final { padding: 20px; font-size: 17px; }
  footer > p { font-size: 16px; }
  .for-you h2 { font-size: 33px; margin-bottom: 55px; }
  .for-you-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact { padding: 100px 24px; }
  .contact h2 { font-size: 30px; }
  .contact-inner > p:not(.contact-label) { font-size: 17px; }
  .contact-examples { align-items: stretch; flex-direction: column; }
  .contact-examples span { text-align: center; font-size: 15px; }
  footer { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  footer > p, footer small { text-align: center; }
}

/* =========================================================
   ダークデザイン試作
   元のデザインは公開履歴（バージョン21）から戻せます
   ========================================================= */
:root {
  --ink: #f4f8ff;
  --navy: #20d6df;
  --navy-deep: #030916;
  --accent: #8f5cff;
  --muted: #aab7cc;
  --line: rgba(128, 180, 220, .22);
  --paper: #07101f;
  --mist: #091526;
  --navy-wash: #0b182b;
  --white: #f8fbff;
  --shadow: 0 22px 60px rgba(0, 4, 16, .42);
  --shadow-hover: 0 28px 75px rgba(0, 184, 214, .18);
}

html { background: #030916; }
body {
  color: #f3f7ff;
  background:
    radial-gradient(circle at 8% 6%, rgba(0, 211, 225, .09), transparent 23%),
    radial-gradient(circle at 92% 22%, rgba(132, 77, 255, .09), transparent 25%),
    #030916;
}

.site-header {
  height: 88px;
  justify-content: space-between;
  padding: 0 4vw;
  color: #f7f9ff;
  background: rgba(3, 9, 22, .82);
  border-bottom-color: rgba(110, 176, 214, .14);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand strong { font-size: 20px; font-weight: 600; letter-spacing: .06em; }
.brand span { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.2); color: #c6d3e6; font-size: 12px; }
.nav a { color: #eff5ff; }
.nav a:hover { color: #31d9e0; opacity: 1; }
.nav-contact { border-color: #21cbd6; border-radius: 999px; }

.hero {
  min-height: 100svh;
  padding: 150px 7vw 70px;
  justify-content: center;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(3,9,22,.97) 0%, rgba(3,9,22,.84) 48%, rgba(3,9,22,.5) 100%),
    radial-gradient(circle at 84% 34%, rgba(0,217,226,.19), transparent 27%),
    radial-gradient(circle at 92% 58%, rgba(137,74,255,.2), transparent 25%);
}
.hero::before {
  z-index: -1;
  right: -4%;
  bottom: 3%;
  width: min(58vw, 850px);
  height: min(58vw, 850px);
  opacity: .75;
  background-image:
    linear-gradient(rgba(21,209,221,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,92,255,.1) 1px, transparent 1px),
    radial-gradient(circle, rgba(38,220,228,.8) 1.5px, transparent 2px);
  background-size: 70px 70px, 70px 70px, 35px 35px;
  transform: perspective(560px) rotateY(-18deg) rotateZ(-8deg);
  mask-image: radial-gradient(circle, #000 18%, transparent 72%);
}
.hero::after { right: 5vw; top: 135px; height: 110px; background: linear-gradient(#16d0dc, transparent); }
.hero-main { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr); gap: 4vw; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero-kicker { color: #5de6eb; }
.hero-kicker span { background: linear-gradient(90deg,#22d5df,#915cff); }
.hero h1 { max-width: 980px; color: #fff; font-size: clamp(48px,4.6vw,76px); line-height: 1.4; letter-spacing: .02em; }
.hero h1 .hero-line { display: block; color: #fff; white-space: nowrap; }
.hero h1 em { color: transparent; background: linear-gradient(90deg,#28dce4 5%,#79a8ff 58%,#a866ff); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.hero-bottom { display: block; margin-top: 38px; }
.hero-bottom p { color: #c8d5e7; }
.hero-actions { margin-top: 34px; }
.button-primary {
  color: #fff;
  background: linear-gradient(100deg,#02cbd5,#765dff 76%,#a239ff);
  border: 1px solid rgba(123,228,239,.45);
  border-radius: 999px;
  box-shadow: 0 12px 35px rgba(0,198,218,.2);
}
.button-primary:hover { background: linear-gradient(100deg,#11d7df,#835fff 76%,#ac45ff); box-shadow: 0 15px 42px rgba(0,213,228,.3); }
.text-link { color: #f1f6ff; border-color: #39cbd7; border-radius: 999px; }
.text-link:hover { color: #03101b; background: #44dbe1; }
.hero-visual { min-height: 590px; position: relative; display: flex; align-items: center; justify-content: center; }
.hero-visual::before {
  content: "";
  width: min(34vw,500px);
  aspect-ratio: 1;
  border: 1px solid rgba(42,211,223,.2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(24,208,220,.12),transparent 48%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 58px,rgba(104,83,255,.12) 59px 60px);
  box-shadow: 0 0 90px rgba(10,211,223,.08);
}
.portrait-frame {
  width: min(100%,480px);
  aspect-ratio: .86;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(91,216,229,.35);
  border-radius: 38% 12% 28% 10%;
  background: #0b1828;
  box-shadow: 0 35px 100px rgba(0,0,0,.45), 0 0 65px rgba(10,211,223,.12);
}
.portrait-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(3,9,22,.72)); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; filter: saturate(.8) contrast(1.05) brightness(.88); }
.portrait-message {
  width: min(430px,92%);
  padding: 25px 28px;
  position: absolute;
  right: -2%;
  bottom: 3%;
  z-index: 2;
  border: 1px solid rgba(159,209,238,.32);
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(15,31,51,.82),rgba(22,25,51,.6));
  box-shadow: 0 18px 45px rgba(0,0,0,.32);
  backdrop-filter: blur(16px);
}
.portrait-message small { color: #30d6df; font: 11px Arial,sans-serif; letter-spacing: .2em; }
.portrait-message p { margin: 14px 0 0; color: #fff; font-size: 22px; line-height: 1.75; }
.hero-strengths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-width: 780px; margin-top: 35px; }
.hero-strengths > div { padding: 18px 20px; border: 1px solid rgba(110,181,224,.2); border-radius: 10px; background: rgba(9,22,39,.56); backdrop-filter: blur(12px); }
.hero-strengths span { color: #6e76ff; font: 12px Arial,sans-serif; }
.hero-strengths strong { display: block; margin-top: 8px; font-size: 16px; }
.hero-strengths p { margin: 5px 0 0; color: #9fb0c6; font-size: 12px; }
.scroll-sign { color: #9cb0c9; }
.scroll-sign span { background: linear-gradient(#20d6df,#8b59ff); }

.section,
.services,
.profile,
.for-you { color: #f3f7ff; }
.section-label { color: #8ea4be; }
.section-label span { color: #3bdbe3; }
.section-label::after { background: rgba(96,167,210,.3); }
.section-title { color: #f7f9ff; }
.concerns { max-width: none; padding-left: max(40px,calc((100vw - 1240px)/2)); padding-right: max(40px,calc((100vw - 1240px)/2)); background: linear-gradient(180deg,#050d1a,#071222); }
.concerns::before { z-index: 0; inset: 38% 0 0; background: radial-gradient(circle at 75% 65%,rgba(29,204,220,.06),transparent 38%); }
.concerns > * { position: relative; z-index: 1; }
.concern-list { border-color: rgba(110,176,214,.2); }
.concern-item { border-color: rgba(110,176,214,.18); }
.concern-item p, .section-heading-row > p, .side-note, .body-copy, .for-you-grid p { color: #bdcadd; }
.concern-note { border-left-color: #21d3dc; color: #eaf2ff; }

.mission { background: radial-gradient(circle at 90% 18%,rgba(105,73,255,.16),transparent 26%),linear-gradient(145deg,#071326,#040a16); }
.mission-body, .criteria-copy p { color: #bfccdd; }
.selection-criteria { border-color: rgba(71,212,223,.25); background: linear-gradient(145deg,rgba(12,37,58,.92),rgba(25,17,55,.76)); }
.criteria-grid > div { background: rgba(6,17,34,.85); }
.criteria-grid strong { color: #f5f8ff; }
.mission-emphasis { color: #fff; }

.process { max-width: none; padding-left: max(40px,calc((100vw - 1240px)/2)); padding-right: max(40px,calc((100vw - 1240px)/2)); background: #07101f; }
.process::before { z-index: 0; background-image: linear-gradient(rgba(31,204,219,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(117,86,255,.04) 1px,transparent 1px); }
.process > * { position: relative; z-index: 1; }
.process-grid, .process-card, .process-card:first-child { border-color: rgba(107,173,214,.2); }
.process-card { background: rgba(10,25,44,.7); }
.process-card:hover { background: #0c1d32; box-shadow: 0 20px 55px rgba(0,197,217,.12); }
.process-card > span { color: #28d5dd; }
.process-card p { color: #aebdd0; }

.services { background: radial-gradient(circle at 5% 30%,rgba(20,206,219,.09),transparent 25%),linear-gradient(145deg,#060f1e,#091427); }
.service { border-color: rgba(95,170,214,.28); background: linear-gradient(135deg,rgba(15,35,56,.78),rgba(9,19,38,.75)); box-shadow: 0 14px 42px rgba(0,0,0,.2); }
.service::before { background: linear-gradient(#20d6df,#8f5cff); }
.service:hover { background: #0d2036; box-shadow: 0 22px 58px rgba(7,194,215,.14); }
.service h3 { color: #f8faff; }
.service-main p, .service ul { color: #b6c4d6; }
.service-icon { color: #36d9e1; border-color: rgba(66,215,225,.4); box-shadow: 0 0 24px rgba(33,207,220,.08); }

.works { background: radial-gradient(circle at 95% 10%,rgba(124,77,255,.15),transparent 23%),#030a17; }
.work-card { padding: 16px; border: 1px solid rgba(98,166,211,.22); border-radius: 14px; background: linear-gradient(145deg,rgba(12,28,48,.82),rgba(8,15,31,.72)); }
.work-image { border: 1px solid rgba(71,204,220,.18); }
.work-category { color: #42d4dc; }
.work-description { color: #e0e9f5; }
.work-detail { color: #a9b9cc; }

.testimonials { color: #f4f8ff; background: linear-gradient(180deg,#071222,#091729); }
.voice-card { border-color: rgba(96,170,217,.25); background: linear-gradient(145deg,rgba(15,35,56,.92),rgba(8,19,36,.92)); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.voice-card h3 { color: #f8faff; }
.voice-card blockquote p { color: #b8c6d8; }
.voice-card::after { color: rgba(54,211,222,.12); }
.voice-number { color: #39d5dd; }

.field { max-width: none; padding-left: max(40px,calc((100vw - 1240px)/2)); padding-right: max(40px,calc((100vw - 1240px)/2)); background: #07101f; }
.field-tags span { color: #dffcff; border-color: rgba(44,211,222,.38); background: rgba(20,201,216,.07); }
.fde { background: radial-gradient(circle at 10% 70%,rgba(26,207,221,.1),transparent 30%),linear-gradient(135deg,#040b18,#10102a); }
.fde-visual { border-color: rgba(80,204,222,.25); background: linear-gradient(145deg,rgba(15,45,66,.9),rgba(22,17,50,.78)); }
.fde-grid p { color: #bac8da; }
.fde-grid ul { border-color: rgba(112,169,206,.25); }

.profile { background: radial-gradient(circle at 95% 20%,rgba(125,79,255,.1),transparent 25%),linear-gradient(145deg,#071222,#091528); }
.profile-image { border: 1px solid rgba(65,207,220,.28); background: #0c1929; box-shadow: 0 26px 70px rgba(0,0,0,.36); }
.profile-role { color: #39d6de; }
.profile-text > p:not(.profile-role), .profile-text .profile-intro, .profile-text .profile-short { color: #bdcadd; }
.profile-catch { color: #fff !important; border-left-color: #28d3dc; }
.profile-text strong { color: #fff; }
.profile-text .profile-final { color: #eef6ff; border: 1px solid rgba(62,205,220,.22); background: rgba(16,45,65,.7); }

.for-you { background: linear-gradient(180deg,#07101f,#081627); }
.contact { background: radial-gradient(circle at 18% 40%,rgba(20,213,225,.13),transparent 24%),radial-gradient(circle at 88% 25%,rgba(135,73,255,.16),transparent 28%),#030916; }
.contact-examples span { border-color: rgba(80,211,222,.34); background: rgba(11,30,50,.5); }
.button-light { color: #fff; background: linear-gradient(100deg,#02cbd5,#745cff,#9b36ff); border-radius: 999px; }
.button-light:hover { color: #fff; background: linear-gradient(100deg,#13dbe3,#8368ff,#a849ff); }
footer { color: #f3f7ff; border-top: 1px solid rgba(100,170,214,.16); background: #030916; }
footer > p { color: #9dc6de; }

@media (max-width: 1050px) {
  .hero { padding-top: 135px; }
  .hero-main { grid-template-columns: 1fr; }
  .hero-copy { max-width: 850px; }
  .hero-visual { min-height: 420px; margin-top: 20px; }
  .portrait-frame { width: min(75vw,460px); }
  .portrait-message { right: calc(50% - 280px); }
}

@media (max-width: 900px) {
  .site-header { height: 74px; }
  .brand strong { font-size: 17px; }
  .brand span { font-size: 10px; }
  .menu-button span { background: #f5f8ff; }
  .nav { background: rgba(3,9,22,.98); }
  .nav-contact { width: auto; }
  .hero { min-height: auto; padding-top: 120px; }
  .hero-strengths { max-width: none; }
}

@media (max-width: 600px) {
  .brand span { display: none; }
  .hero { padding: 112px 24px 80px; }
  .hero h1 { font-size: clamp(34px,10.5vw,45px); }
  .hero h1 .hero-line { white-space: normal; }
  .hero-bottom p br { display: none; }
  .hero-actions { gap: 14px; }
  .hero-visual { min-height: 330px; margin-top: 30px; }
  .hero-visual::before { width: min(82vw,330px); }
  .portrait-frame { width: min(88vw,390px); }
  .portrait-message { width: 90%; right: 0; bottom: 0; padding: 20px; }
  .portrait-message p { font-size: 18px; }
  .hero-strengths { grid-template-columns: 1fr; margin-top: 30px; }
  .hero-strengths > div { padding: 16px 18px; }
  .hero-strengths p { font-size: 14px; }
  .work-card { padding: 12px; }
  .services, .concerns, .process, .field, .profile { padding-left: 24px; padding-right: 24px; }
}

/* 全セクション共通の横幅ルール
   背景は画面いっぱい、内容は1240pxの同じ軸に揃えます */
:root {
  --content-width: 1240px;
  --content-gutter: max(40px, calc((100vw - var(--content-width)) / 2));
}

.site-header,
.hero,
.section,
.mission,
.services,
.works,
.testimonials,
.field,
.fde,
.profile,
.for-you,
.contact {
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

.section {
  width: 100%;
  max-width: none;
}

.works-head,
.works-grid,
.testimonials-inner,
.profile > .section-label,
.profile-grid {
  width: 100%;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.contact-inner { width: 100%; max-width: 1080px; }

@media (max-width: 1320px) {
  :root { --content-gutter: 40px; }
}

@media (max-width: 900px) {
  :root { --content-gutter: 32px; }
}

@media (max-width: 600px) {
  :root { --content-gutter: 24px; }
}

/* ファーストビュー：不要な右側カードをなくし、文章を主役にします */
.hero-main {
  grid-template-columns: 1fr;
}

.hero-copy {
  width: 100%;
  max-width: 1100px;
}

/* ミッション：本文と判断基準を見出しと同じ左端に揃えます */
.mission-body {
  width: 100%;
  max-width: 900px;
  margin-left: 0;
}

.selection-criteria {
  width: 100%;
  max-width: var(--content-width);
  margin-left: 0;
  margin-right: 0;
}

.mission-emphasis {
  margin: 45px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid rgba(71,212,223,.25);
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 27px;
}

.criteria-copy {
  grid-template-columns: 1fr;
  gap: 20px;
}

.criteria-copy p {
  max-width: none;
}

.voice-card {
  padding-left: 28px;
  padding-right: 28px;
}

.voice-card h3 {
  font-size: clamp(16px, 1.25vw, 20px);
  letter-spacing: .02em;
}

.voice-card h3 span {
  display: block;
  white-space: nowrap;
}

.fde-grid h2 {
  font-size: clamp(30px, 2.8vw, 38px);
}

.fde-grid h2 span {
  display: block;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .voice-card h3 {
    font-size: 19px;
  }

  .voice-card h3 span {
    white-space: normal;
  }

  .fde-grid h2 span {
    white-space: normal;
  }
}

/* =========================================================
   DESIGN A — selected / balance refinements
   ========================================================= */

/* ページ中央へ詰めず、横幅をレイアウトとして使います */
.design-a .section,
.design-a .mission > *,
.design-a .works > *,
.design-a .testimonials > *,
.design-a .fde > *,
.design-a .profile > *,
.design-a .for-you > *,
.design-a .contact > * {
  width: min(100% - clamp(48px, 8vw, 150px), 1580px);
  max-width: 1580px;
  margin-left: auto;
  margin-right: auto;
}

.design-a .section { padding-left: 0; padding-right: 0; }

/* ファーストビュー右側の不自然な空白面をなくす */
.design-a .hero {
  padding-left: clamp(30px, 6vw, 112px);
  padding-right: clamp(30px, 6vw, 112px);
  background: #f1f0eb;
}
.design-a .hero::before,
.design-a .hero::after { display: none; }
.design-a .hero-main,
.design-a .hero-strengths { width: 100%; max-width: 1640px; }
.design-a .hero-main { display: block; }
.design-a .hero-copy { max-width: none; }
.design-a .hero h1 { max-width: 1500px; }
.design-a .hero-bottom { max-width: 1380px; }
.design-a .hero-strengths { max-width: 1380px; grid-template-columns: repeat(3, 1fr); }
.design-a .scroll-sign { display: none; }

/* 写真は本来の色をそのまま表示 */
.design-a .work-image img,
.design-a .profile-image img,
.design-a .profile-photo img {
  filter: none !important;
}
.design-a .work-card:hover .work-image img { filter: none !important; }

/* よくある悩み：見出しの下に01〜05を横いっぱいに配置 */
.design-a .concerns .two-column { display: block; }
.design-a .concerns .section-title { max-width: 780px; margin-bottom: 68px; }
.design-a .concern-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.25);
}
.design-a .concern-item {
  display: block;
  min-height: 240px;
  padding: 25px 24px 34px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  border-right: 1px solid rgba(255,255,255,.16);
}
.design-a .concern-item:last-child { border-right: 0; }
.design-a .concern-item p { margin-top: 42px; font-size: 17px; line-height: 1.9; }
.design-a .concern-note { max-width: 850px; margin-left: auto; margin-right: 0; }

/* 工程：タイトルは必ず2行、説明を濃くし、カードを左右へ広げる */
.design-a .process .section-heading-row {
  grid-template-columns: minmax(520px, 1.15fr) minmax(440px, .85fr);
  gap: clamp(70px, 10vw, 180px);
  align-items: center;
}
.design-a .process .section-title { white-space: nowrap; }
.design-a .process .section-heading-row > p { color: #45474c; font-size: 19px; }
.design-a .process-grid { width: 100%; margin-top: 76px; }
.design-a .process-card { min-height: 300px; padding: 38px 34px; }
.design-a .process-card h3 { font-size: 22px; line-height: 1.6; }
.design-a .process-card p { font-size: 16px; line-height: 1.9; }

/* できること：左右の比率と文章幅を整える */
.design-a .services .two-column {
  grid-template-columns: minmax(360px, .68fr) minmax(760px, 1.32fr);
  gap: clamp(70px, 8vw, 140px);
  align-items: start;
}
.design-a .services .side-note { color: #4d5055; font-size: 18px; line-height: 2; }
.design-a .service { grid-template-columns: 86px minmax(260px, .85fr) minmax(330px, 1.15fr); }

/* 現場経験：右側本文を下げ、狭い縦長の折返しを解消 */
.design-a .field .two-column {
  grid-template-columns: minmax(620px, 1.05fr) minmax(520px, .95fr);
  gap: clamp(80px, 10vw, 180px);
  align-items: start;
}
.design-a .field .body-copy { margin-top: 145px; max-width: 650px; font-size: 18px; line-height: 2.1; }

/* プロフィールも写真と文章を大きく使う */
.design-a .profile > .section-label,
.design-a .profile-grid { width: min(100% - clamp(48px, 8vw, 150px), 1480px); max-width: 1480px; }
.design-a .profile-grid { grid-template-columns: minmax(380px, .82fr) minmax(620px, 1.18fr); gap: clamp(70px, 9vw, 150px); }
.design-a .profile-image { max-width: 520px; }

/* MENUボタンを見つけやすくし、開いた項目は右上から展開 */
.design-a .menu-button { height: 54px; padding: 0 26px; font-size: 13px; }
.design-a .menu-button b { font-size: 13px; letter-spacing: .2em; }
.design-a .nav {
  justify-content: flex-start;
  align-items: flex-end;
  padding: 116px clamp(34px, 6vw, 100px) 60px;
}
.design-a .nav a,
.design-a .nav .nav-contact {
  width: min(760px, 70vw);
  justify-content: flex-end;
  text-align: right;
  font-size: clamp(46px, 6vw, 92px);
}

@media (max-width: 1100px) {
  .design-a .concern-list { grid-template-columns: repeat(2, 1fr); }
  .design-a .concern-item:nth-child(even) { border-right: 0; }
  .design-a .process .section-heading-row,
  .design-a .services .two-column,
  .design-a .field .two-column,
  .design-a .profile-grid { grid-template-columns: 1fr; gap: 55px; }
  .design-a .process .section-title { white-space: normal; }
  .design-a .field .body-copy { margin-top: 0; max-width: 820px; }
  .design-a .service { grid-template-columns: 76px 1fr; }
  .design-a .service ul { grid-column: 2; }
}

@media (max-width: 650px) {
  .design-a .section,
  .design-a .mission > *,
  .design-a .works > *,
  .design-a .testimonials > *,
  .design-a .fde > *,
  .design-a .profile > *,
  .design-a .for-you > *,
  .design-a .contact > * { width: calc(100% - 40px); }
  .design-a .concern-list { grid-template-columns: 1fr; }
  .design-a .concern-item { min-height: 0; border-right: 0; }
  .design-a .hero-strengths { grid-template-columns: 1fr; }
  .design-a .process-card { min-height: 0; }
  .design-a .nav { padding: 96px 22px 40px; }
  .design-a .nav a,
  .design-a .nav .nav-contact { width: 100%; font-size: clamp(36px, 12vw, 58px); }
}

/* Q&A */
.design-shell.design-four .faq {
  max-width: none;
  padding-left: max(8vw, calc((100vw - 1160px) / 2));
  padding-right: max(8vw, calc((100vw - 1160px) / 2));
  background: #f5f4f0;
}
.design-four .faq-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 130px);
  align-items: end;
  margin: 70px 0 60px;
}
.design-four .faq-heading h2 {
  margin: 0;
  color: var(--d3-ink);
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 400;
}
.design-four .faq-heading p {
  margin: 0;
  color: #66676c;
  font-size: 17px;
  line-height: 1.9;
}
.design-four .faq-list {
  border-top: 1px solid rgba(17,18,20,.18);
}
.design-four .faq-list details {
  border-bottom: 1px solid rgba(17,18,20,.18);
}
.design-four .faq-list summary {
  position: relative;
  padding: 30px 60px 30px 0;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  color: var(--d3-ink);
  font-size: 20px;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
}
.design-four .faq-list summary::-webkit-details-marker { display: none; }
.design-four .faq-list summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 25px;
  font-size: 28px;
  font-weight: 300;
}
.design-four .faq-list details[open] summary::after { content: "−"; }
.design-four .faq-list summary span,
.design-four .faq-list details > p > span {
  flex: 0 0 auto;
  color: var(--d3-accent);
  font: 500 14px/1.7 Arial, sans-serif;
}
.design-four .faq-list details > p {
  max-width: 900px;
  margin: 0;
  padding: 0 60px 32px 38px;
  display: flex;
  gap: 22px;
  color: #55575d;
  font-size: 17px;
  line-height: 2;
}
@media (max-width: 650px) {
  .design-shell.design-four .faq {
    padding-left: 20px;
    padding-right: 20px;
  }
  .design-four .faq-heading {
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 55px 0 42px;
  }
  .design-four .faq-heading h2 { font-size: 30px; }
  .design-four .faq-heading p { font-size: 15px; }
  .design-four .faq-list summary {
    padding: 24px 42px 24px 0;
    gap: 14px;
    font-size: 17px;
  }
  .design-four .faq-list summary::after {
    right: 4px;
    top: 20px;
  }
  .design-four .faq-list details > p {
    padding: 0 8px 26px 28px;
    gap: 14px;
    font-size: 15px;
    line-height: 1.9;
  }
}

/* 長いページでも、いつでも移動できる固定MENU */
.design-shell.design-four .site-header {
  position: fixed;
  inset: 0 0 auto;
}
.design-shell.design-four .menu-button {
  position: fixed;
  top: 16px;
  right: max(20px, env(safe-area-inset-right));
  margin-left: 0;
  border-color: rgba(17,18,20,.42);
  background: rgba(250,249,246,.82);
  color: var(--d3-ink);
  box-shadow: 0 8px 26px rgba(17,18,20,.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.design-shell.design-four .nav.is-open + .menu-button {
  border-color: rgba(255,255,255,.52);
  background: rgba(17,18,20,.62);
  color: #fff;
}
@media (max-width: 600px) {
  .design-shell.design-four .menu-button {
    top: 16px;
    right: max(16px, env(safe-area-inset-right));
    height: 38px;
    padding-inline: 15px;
  }
}

/* 実績を見た直後の相談導線 */
.design-four .mid-cta {
  box-sizing: border-box;
  width: min(calc(100% - clamp(48px, 8vw, 150px)), 1480px);
  margin: clamp(70px, 8vw, 120px) auto;
  padding: clamp(30px, 4vw, 54px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border: 1px solid rgba(102,92,255,.18);
  background: linear-gradient(115deg, rgba(74,164,171,.1), rgba(102,92,255,.08));
}
.design-four .mid-cta p {
  margin: 0 0 9px;
  color: var(--d3-ink);
  font-size: clamp(24px, 2.3vw, 36px);
}
.design-four .mid-cta > div > span {
  color: #56585e;
  font-size: 16px;
}
.design-four .mid-cta .button { flex: 0 0 auto; }

@media (max-width: 650px) {
  .design-four .mid-cta {
    width: calc(100% - 40px);
    margin: 58px auto;
    padding: 28px 22px;
    align-items: stretch;
    flex-direction: column;
  }
  .design-four .mid-cta p {
    font-size: 23px;
    line-height: 1.55;
  }
  .design-four .mid-cta > div > span {
    display: block;
    font-size: 15px;
    line-height: 1.8;
  }
  .design-four .mid-cta .button {
    width: 100%;
    justify-content: space-between;
  }
}

/* ④の技術モチーフは、③の最終レイアウト指定より後で適用する */
.design-four .hero::before { content: "" !important; display: block !important; position: absolute; z-index: 0; right: 2vw; top: 17%; width: min(42vw, 640px); height: 62%; opacity: .66; pointer-events: none; background-image: radial-gradient(circle, rgba(102,92,255,.52) 1.4px, transparent 1.8px), linear-gradient(28deg, transparent 49.7%, rgba(102,92,255,.15) 50%, transparent 50.3%), linear-gradient(-22deg, transparent 49.7%, rgba(74,164,171,.14) 50%, transparent 50.3%); background-size: 45px 45px, 145px 145px, 180px 180px; mask-image: radial-gradient(ellipse at center, #000 4%, rgba(0,0,0,.8) 42%, transparent 76%); }
.design-four .hero-main, .design-four .hero-strengths { position: relative; z-index: 1; }
@media (max-width: 760px) { .design-four .hero::before { right: -24%; top: 12%; width: 88vw; height: 45%; opacity: .25; } }

/* WordPress管理バー表示中も固定メニューを正しい位置に保つ */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* 08〜11：07と同じ左右の基準線に揃える（最終指定） */
.design-shell.design-four .profile,
.design-shell.design-four .journal,
.design-shell.design-four .for-you,
.design-shell.design-four .faq {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 4vw !important;
  padding-right: 4vw !important;
}
.design-four .profile > .section-label,
.design-four .profile-grid,
.design-four .journal > .section-label,
.design-four .journal-heading,
.design-four .journal-grid,
.design-four .for-you > *,
.design-four .faq > * {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1580px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.design-four .faq-heading {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
}
.design-four .faq-heading h2 { white-space: nowrap; }

@media (max-width: 650px) {
  .design-shell.design-four .profile,
  .design-shell.design-four .journal,
  .design-shell.design-four .for-you,
  .design-shell.design-four .faq {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .design-four .faq-heading { grid-template-columns: 1fr; }
  .design-four .faq-heading h2 { white-space: normal; }
}

/* 08〜11：07と同じ左右の基準線に揃える */
.design-shell.design-four .profile,
.design-shell.design-four .journal,
.design-shell.design-four .for-you,
.design-shell.design-four .faq {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 4vw !important;
  padding-right: 4vw !important;
}
.design-four .profile > .section-label,
.design-four .profile-grid,
.design-four .journal > .section-label,
.design-four .journal-heading,
.design-four .journal-grid,
.design-four .for-you > *,
.design-four .faq > * {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1580px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.design-four .faq-heading {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
}
.design-four .faq-heading h2 { white-space: nowrap; }

@media (max-width: 650px) {
  .design-shell.design-four .profile,
  .design-shell.design-four .journal,
  .design-shell.design-four .for-you,
  .design-shell.design-four .faq {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .design-four .faq-heading { grid-template-columns: 1fr; }
  .design-four .faq-heading h2 { white-space: normal; }
}

/* ④：実機確認に基づくスマートフォン専用レイアウト */
@media (max-width: 650px) {
  .design-four {
    --mobile-edge: 22px;
  }
  .design-four .section,
  .design-four .mission,
  .design-four .testimonials,
  .design-four .field,
  .design-four .fde,
  .design-four .profile,
  .design-four .for-you,
  .design-four .contact {
    overflow: hidden;
  }
  .design-four .section-label {
    gap: 12px;
    font-size: 11px;
    letter-spacing: .13em;
    white-space: nowrap;
  }
  .design-four .section-label::after {
    width: min(18vw,70px);
  }

  /* 不自然な強制改行を外し、スマホ幅で自然に流す */
  .design-four .mission-copy br,
  .design-four .mission-body br,
  .design-four .criteria-lead br,
  .design-four .profile-catch br,
  .design-four .contact-assurance br {
    display: none;
  }
  .design-four .mission-copy {
    max-width: none;
    margin: 64px 0 70px;
    font-size: 25px;
    line-height: 1.75;
    letter-spacing: -.02em;
  }
  .design-four .mission-body,
  .design-four .mission-body p,
  .design-four .criteria-copy p,
  .design-four .body-copy,
  .design-four .body-copy p {
    text-align: left;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0;
  }
  .design-four .criteria-lead {
    font-size: 24px;
    line-height: 1.75;
    letter-spacing: -.02em;
  }
  .design-four .criteria-grid strong {
    font-size: 16px;
    line-height: 1.75;
  }
  .design-four .mission-emphasis {
    font-size: 26px;
    line-height: 1.7;
  }

  .design-four .process .section-heading-row {
    gap: 26px;
  }
  .design-four .process .section-title {
    font-size: 28px;
    line-height: 1.65;
  }
  .design-four .process .section-heading-row > p {
    max-width: none;
    text-align: left;
    font-size: 16px;
    line-height: 2;
  }
  .design-four .process-card {
    padding: 28px 22px;
  }
  .design-four .process-card h3 {
    margin: 28px 0 14px;
    font-size: 22px;
  }
  .design-four .process-card p {
    font-size: 16px;
    line-height: 1.9;
  }

  /* 横長だったサービスカードを、スマホでは上から読む縦型へ */
  .design-four .services .two-column {
    gap: 46px;
  }
  .design-four .service-list {
    width: 100%;
  }
  .design-four .service {
    width: 100%;
    min-width: 0;
    grid-template-columns: 58px minmax(0,1fr);
    gap: 18px 16px;
    align-items: start;
    padding: 26px 20px;
  }
  .design-four .service-icon {
    grid-column: 1;
    grid-row: 1;
    width: 56px;
    height: 56px;
  }
  .design-four .service-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: block;
  }
  .design-four .service-main > span {
    display: block;
    margin-bottom: 8px;
    padding: 0;
  }
  .design-four .service h3 {
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.45;
    white-space: normal;
  }
  .design-four .service-main p {
    font-size: 15px;
    line-height: 1.8;
  }
  .design-four .service ul {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(17,18,20,.1);
  }
  .design-four .service li {
    padding: 4px 0 4px 20px;
    font-size: 15px;
    line-height: 1.75;
  }

  .design-four .testimonials .section-title {
    font-size: 27px;
    line-height: 1.65;
  }
  .design-four .voice-card {
    padding: 30px 24px;
  }
  .design-four .voice-card h3 {
    font-size: 19px;
    line-height: 1.75;
    letter-spacing: .01em;
  }
  .design-four .voice-card h3 span {
    display: inline;
  }
  .design-four .voice-card blockquote p {
    font-size: 15px;
    line-height: 2;
    text-align: left;
  }

  .design-four .field .section-title {
    font-size: 27px;
    line-height: 1.65;
  }
  .design-four .field-tags {
    gap: 8px;
  }
  .design-four .field-tags span {
    padding: 9px 14px;
    font-size: 13px;
  }

  /* 横長のコンセプト図をスマホ用の比率と文字組みに変更 */
  .design-four .fde-grid {
    gap: 54px;
  }
  .design-four .fde-visual {
    min-height: 0;
    aspect-ratio: 4 / 5;
    padding: 30px 22px;
  }
  .design-four .fde-index {
    margin-bottom: 54px !important;
    font-size: 9px !important;
    letter-spacing: .1em;
    white-space: nowrap;
  }
  .design-four .fde-grid .fde-en {
    font-size: 40px;
    line-height: 1;
  }
  .design-four .fde-route {
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 48px;
    font-size: 12px;
    white-space: nowrap;
  }
  .design-four .fde-route i {
    width: 12px;
    flex: 0 0 12px;
  }
  .design-four .fde-grid .fde-sub {
    max-width: none;
    font-size: 14px;
    line-height: 1.7;
  }
  .design-four .fde-grid h2 {
    font-size: 27px;
    line-height: 1.7;
  }
  .design-four .fde-grid h2 span {
    display: inline;
  }
  .design-four .fde-grid > div:last-child > p,
  .design-four .fde-grid li {
    text-align: left;
    font-size: 16px;
    line-height: 1.9;
  }
  .design-four .fde-grid .fde-goal {
    font-size: 23px !important;
    line-height: 1.8 !important;
  }
  .design-four .fde-grid .fde-goal br {
    display: none;
  }

  .design-four .profile-catch {
    padding-left: 18px;
    font-size: 20px !important;
    line-height: 1.75;
    letter-spacing: .02em;
  }
  .design-four .profile-text > p:not(.profile-role),
  .design-four .profile-text .profile-intro,
  .design-four .profile-text .profile-short,
  .design-four .profile-text .profile-final {
    text-align: left;
    font-size: 16px;
    line-height: 2;
  }

  .design-four .for-you h2 {
    font-size: 26px;
    line-height: 1.7;
  }
  .design-four .for-you-grid p {
    text-align: left;
    font-size: 16px;
    line-height: 2;
  }

  .design-four .contact-inner {
    margin: 0;
    text-align: left;
  }
  .design-four .contact-label {
    text-align: left;
  }
  .design-four .contact h2 {
    font-size: 27px;
    line-height: 1.65;
    text-align: left;
  }
  .design-four .contact-inner > p:not(.contact-label),
  .design-four .contact-assurance {
    max-width: none;
    text-align: left;
    font-size: 16px;
    line-height: 2;
  }
  .design-four .contact-examples {
    align-items: stretch;
  }
  .design-four .contact-examples span {
    text-align: left;
    font-size: 15px;
  }
}

/* ④：プロフィールから相談へつなぐ発信セクション */
.design-four .journal {
  box-sizing: border-box;
  max-width: none;
  padding: 140px max(8vw, calc((100vw - 1160px) / 2));
  color: var(--d3-ink);
  background:
    radial-gradient(circle at 88% 14%, rgba(102,92,255,.075), transparent 24%),
    #f4f3ef;
}
.design-four .journal > .section-label,
.design-four .journal-heading,
.design-four .journal-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}
.design-four .journal-heading {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px,4vw,70px);
  align-items: start;
  margin-bottom: 70px;
}
.design-four .journal-heading h2 {
  margin: 0;
  font-size: clamp(34px,4vw,56px);
  font-weight: 430;
  line-height: 1.45;
  letter-spacing: -.025em;
}
.design-four .journal-lead {
  margin: 10px 0 0;
  color: #55565b;
  font-size: 17px;
  line-height: 2;
}
.design-four .journal-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}
.design-four .journal-card {
  position: relative;
  display: flex;
  min-height: 370px;
  box-sizing: border-box;
  padding: clamp(28px,3.2vw,46px);
  flex-direction: column;
  color: var(--d3-ink);
  text-decoration: none;
  overflow: hidden;
  border: 1px solid rgba(17,18,20,.13);
  background: rgba(255,255,255,.72);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.design-four .journal-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -95px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(102,92,255,.12);
  box-shadow: 0 0 0 42px rgba(102,92,255,.025);
}
.design-four .journal-card:hover {
  transform: translateY(-6px);
  border-color: rgba(102,92,255,.34);
  box-shadow: 0 24px 65px rgba(17,18,20,.09);
}
.design-four .journal-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 55px;
}
.design-four .journal-platform {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--d3-ink);
  font: 600 17px Arial,sans-serif;
  letter-spacing: .02em;
}
.design-four .journal-platform b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #111216;
  font-size: 19px;
  font-weight: 500;
}
.design-four .journal-substack .journal-platform b {
  background: #ff6719;
  font-size: 20px;
}
.design-four .journal-arrow { font-size: 24px; transition: transform .3s ease; }
.design-four .journal-card:hover .journal-arrow { transform: translate(3px,-3px); }
.design-four .journal-type {
  margin: 0 0 18px;
  color: var(--d3-accent);
  font: 11px Arial,sans-serif;
  letter-spacing: .18em;
}
.design-four .journal-substack .journal-type { color: #d95716; }
.design-four .journal-card h3 {
  margin: 0 0 25px;
  font-size: clamp(25px,2.3vw,34px);
  font-weight: 480;
  line-height: 1.55;
}
.design-four .journal-description {
  max-width: 30em;
  margin: 0 0 36px;
  color: #55565b;
  font-size: 17px;
  line-height: 1.9;
}
.design-four .journal-card-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(17,18,20,.12);
}
.design-four .journal-account {
  font: 12px Arial,sans-serif;
  letter-spacing: .08em;
}
.design-four .journal-cta {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .design-four .journal { padding: 100px 20px; }
  .design-four .journal-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 48px; padding: 0 12px; }
  .design-four .journal-lead { margin-top: 0; }
  .design-four .journal-grid { grid-template-columns: 1fr; gap: 14px; }
  .design-four .journal-card { min-height: 330px; }
  .design-four .journal-card-top { margin-bottom: 42px; }
  .design-four .journal-card-bottom { align-items: flex-start; flex-direction: column; gap: 10px; }
}

.design-four .hero::before { opacity: .66; background-size: 45px 45px,145px 145px,180px 180px; filter: saturate(1.15); }
@media (max-width: 760px) { .design-four .hero::before { opacity: .34; } }

/* ④：触れたときにだけ伝わる、控えめな技術感 */
.design-four .hero::before { opacity: .66; background-size: 45px 45px, 145px 145px, 180px 180px; filter: saturate(1.15); }
.design-four .section-label span::before { background: linear-gradient(135deg,#45b9b4,#756cff); box-shadow: 0 0 0 4px rgba(102,92,255,.09),0 0 18px rgba(69,185,180,.18); }
.design-four .section-label::after { background: linear-gradient(90deg,rgba(69,185,180,.85),rgba(117,108,255,.55),transparent); }
.design-four .service::after { content: ""; position: absolute; right: 22px; top: 20px; width: 46px; height: 34px; opacity: .3; pointer-events: none; background-image: radial-gradient(circle,rgba(69,185,180,.9) 1.2px,transparent 1.6px); background-size: 11px 11px; mask-image: linear-gradient(135deg,#000,transparent 82%); }
.design-four .service:hover::after { opacity: .62; transition: opacity .35s ease; }
.design-four .reveal { transform: translateY(38px); transition-duration: 1.05s; }
.design-four .reveal.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .design-four .reveal { transition-duration: 0s; } }

/* オープニングを必ず画面全体に固定し、中央の一行を安定表示 */
.opening {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.opening .opening-first,
.opening .opening-second {
  left: 50% !important;
  top: 50% !important;
  width: min(1100px,calc(100vw - 64px)) !important;
  max-width: none !important;
  text-align: center !important;
}
.opening .opening-second { white-space: nowrap; }

/* 黒背景の端とラベル・カードの間にわずかな呼吸をつくる */
.design-a .concerns {
  box-sizing: border-box;
  padding-left: 18px;
  padding-right: 18px;
}

@media (max-width: 650px) {
  .opening .opening-first,
  .opening .opening-second {
    width: calc(100vw - 40px) !important;
    white-space: normal;
  }
  .design-a .concerns {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* A案：個別セクションの横方向バランス調整 */
@media (min-width: 1101px) {
  /* 悩みの見出しはPCでは一行で見せる */
  .design-a .concerns .section-title {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(38px,3.4vw,56px);
  }
  .design-a .concerns .section-title br { display: none; }

  /* 現場経験：中央の空きを詰め、本文を左へ寄せる */
  .design-a .field .two-column {
    grid-template-columns: minmax(500px,.82fr) minmax(650px,1.18fr);
    gap: clamp(38px,4vw,72px);
  }
  .design-a .field .body-copy {
    margin-top: 54px;
  }

  /* ミッション：タイトル・本文・判断基準を同じ広い面で構成 */
  .design-a .mission-copy {
    max-width: 1320px;
    margin-left: 0;
  }
  .design-a .mission-body {
    width: 72%;
    max-width: 1040px;
    margin-left: 28%;
  }
  .design-a .selection-criteria {
    padding-left: clamp(48px,5vw,78px);
    padding-right: clamp(48px,5vw,78px);
  }

  /* お客様の声：カード幅とカード間隔を整える */
  .design-a .testimonials-inner { max-width: var(--page-max); }
  .design-a .voice-grid {
    width: 100%;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: clamp(28px,3vw,48px);
  }
  .design-a .voice-card {
    min-height: 510px;
    padding: 42px clamp(34px,3vw,50px);
  }
  .design-a .voice-card h3 {
    font-size: clamp(20px,1.45vw,24px);
    line-height: 1.75;
  }
  .design-a .voice-card blockquote p {
    font-size: 18px;
    line-height: 2;
  }

  /* 伴走支援：左右へ広げ、中央の間隔を詰める */
  .design-a .fde-grid {
    width: 100%;
    grid-template-columns: minmax(520px,.92fr) minmax(620px,1.08fr);
    gap: clamp(54px,6vw,100px);
  }
  .design-a .fde-visual {
    min-height: 520px;
    padding: 54px 50px;
  }
  .design-a .fde-grid h2 {
    font-size: clamp(34px,3vw,46px);
  }
}

@media (max-width: 1100px) {
  .design-a .concerns .section-title br { display: initial; }
}

/* A案：ページ全体の左右基準線・文字サイズ・余白を最終統一 */
.design-a {
  --page-gutter: clamp(32px, 5vw, 88px);
  --page-max: 1540px;
}

.design-a .section,
.design-a .mission > *,
.design-a .works > *,
.design-a .testimonials > *,
.design-a .testimonials-inner,
.design-a .fde > *,
.design-a .profile > *,
.design-a .for-you > *,
.design-a .contact > * {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

.design-a .hero {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}
.design-a .hero-main,
.design-a .hero-bottom,
.design-a .hero-strengths {
  width: min(100%, var(--page-max));
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

/* 前後のセクションと同じ横幅で、ミッションカードも大きく見せる */
.design-a .mission-body {
  width: 68%;
  max-width: 980px;
  margin-left: 32%;
  font-size: 21px;
}
.design-a .selection-criteria {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.design-a .mission-emphasis {
  margin-left: 32%;
  font-size: 31px;
}

/* 悩み・工程は読みやすい大きさに */
.design-a .concern-item p {
  font-size: 19px;
  line-height: 1.85;
}
.design-a .concern-note {
  font-size: 20px;
}
.design-a .process .section-heading-row {
  grid-template-columns: minmax(0, 1fr) minmax(420px, .72fr);
  gap: clamp(70px, 9vw, 150px);
}
.design-a .process .section-heading-row > p {
  font-size: 20px;
}
.design-a .process-card h3 { font-size: 24px; }
.design-a .process-card p { font-size: 18px; }

/* サービスの左右配分と文字量を、共通のページ幅内で均等化 */
.design-a .services {
  padding-left: 0;
  padding-right: 0;
}
.design-a .services .two-column {
  grid-template-columns: minmax(330px, .62fr) minmax(720px, 1.38fr);
  gap: clamp(64px, 7vw, 120px);
}
.design-a .services .side-note {
  max-width: 430px;
  font-size: 20px;
}
.design-a .service-main h3 { font-size: 24px; }
.design-a .service-main p,
.design-a .service li {
  font-size: 17px;
  line-height: 1.85;
}

/* 現場経験は上下の空白を詰め、左右を同じ比率で使う */
.design-a .field .two-column {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(70px, 8vw, 130px);
}
.design-a .field .body-copy {
  margin-top: 70px;
  max-width: none;
  font-size: 20px;
  line-height: 2;
}

/* プロフィールも他セクションと同じ左右基準線を使用 */
.design-a .profile > .section-label,
.design-a .profile-grid {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  max-width: var(--page-max);
}

@media (max-width: 1100px) {
  .design-a .mission-body,
  .design-a .mission-emphasis {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  .design-a .process .section-heading-row,
  .design-a .services .two-column,
  .design-a .field .two-column { grid-template-columns: 1fr; }
  .design-a .field .body-copy { margin-top: 0; }
}

@media (max-width: 650px) {
  .design-a { --page-gutter: 20px; }
  .design-a .section,
  .design-a .mission > *, .design-a .works > *, .design-a .testimonials > *,
  .design-a .testimonials-inner, .design-a .fde > *, .design-a .profile > *,
  .design-a .for-you > *, .design-a .contact > *,
  .design-a .profile > .section-label, .design-a .profile-grid {
    width: calc(100% - (var(--page-gutter) * 2));
  }
  .design-a .concern-item p,
  .design-a .process-card p,
  .design-a .service-main p,
  .design-a .service li,
  .design-a .field .body-copy { font-size: 17px; }
}

/* =========================================================
   DESIGN 03 REFINED — 配列は変えず、質感と文字組みだけを刷新
   ========================================================= */
:root {
  --d3-ink: #111214;
  --d3-paper: #f5f4f0;
  --d3-white: #fbfaf7;
  --d3-soft: #ecebe7;
  --d3-accent: #665cff;
  --d3-aqua: #42bfc1;
  --d3-line: rgba(17,18,20,.16);
}

body {
  color: var(--d3-ink);
  background: var(--d3-paper);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  letter-spacing: .02em;
}

/* 初回オープニング：短く、細く、余韻だけを残します */
.opening {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: #08090b;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1);
}
.opening::before {
  content: "T.HACCHO  /  AI · IT PARTNER";
  position: absolute;
  top: 34px;
  left: 42px;
  color: rgba(255,255,255,.5);
  font: 10px/1 Arial,sans-serif;
  letter-spacing: .22em;
}
.opening::after {
  content: "";
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 34px;
  height: 1px;
  background: linear-gradient(90deg,var(--d3-accent) 0 18%,rgba(255,255,255,.16) 18%);
  transform-origin: left;
  animation: openingLine 2.05s cubic-bezier(.22,.61,.36,1) both;
}
.opening p {
  grid-area: 1 / 1;
  width: min(760px,calc(100vw - 80px));
  margin: 0;
  font-size: clamp(27px,3.8vw,52px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .055em;
  text-align: left;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  transition: opacity .42s ease, transform .55s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.opening-first .opening-first,
.opening-second .opening-second {
  opacity: 1;
  transform: none;
  filter: none;
}
.opening-leaving { opacity: 0; pointer-events: none; }
.opening-leaving .opening-second { opacity: 1; transform: none; filter: none; }
@keyframes openingLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ヘッダー */
.site-header {
  color: var(--d3-ink);
  background: rgba(245,244,240,.88);
  border-color: rgba(17,18,20,.1);
  backdrop-filter: blur(18px);
}
.brand strong { color: var(--d3-ink); letter-spacing: .15em; }
.brand span { color: #67676a; }
.nav { font-size: 14px; }
.nav a:not(.nav-contact) { position: relative; }
.nav a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 1px;
  background: var(--d3-accent);
  transition: right .3s ease;
}
.nav a:not(.nav-contact):hover::after { right: 0; }
.nav-contact {
  color: #fff;
  border-color: var(--d3-ink);
  border-radius: 999px;
  background: var(--d3-ink);
}

/* ファーストビュー：元の配列のまま、明るくシャープに */
.hero {
  color: var(--d3-ink);
  background:
    linear-gradient(90deg,transparent 0 69%,rgba(17,18,20,.055) 69% 69.08%,transparent 69.08%),
    var(--d3-paper);
}
.hero::before {
  opacity: .22;
  background-image: radial-gradient(circle,rgba(102,92,255,.45) 1px,transparent 1.5px);
}
.hero::after { background: var(--d3-ink); opacity: .22; }
.hero-kicker { color: #55565a; font-size: 13px; }
.hero-kicker span { background: var(--d3-accent); }
.hero h1 {
  color: var(--d3-ink);
  font-weight: 450;
  letter-spacing: -.025em;
}
.hero h1 .hero-line { color: var(--d3-ink); }
.hero h1 em {
  color: var(--d3-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  position: relative;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.04em;
  height: 3px;
  background: linear-gradient(90deg,var(--d3-aqua),var(--d3-accent));
}
.hero-bottom p { color: #434449; }
.button-primary {
  color: #fff;
  border-color: var(--d3-ink);
  border-radius: 999px;
  background: var(--d3-ink);
  box-shadow: none;
}
.button-primary:hover {
  color: #fff;
  background: var(--d3-accent);
  box-shadow: 0 12px 30px rgba(102,92,255,.2);
}
.text-link {
  color: var(--d3-ink);
  border-color: var(--d3-ink);
  border-radius: 999px;
}
.text-link:hover { color: #fff; background: var(--d3-ink); }
.hero-strengths > div {
  border-color: rgba(17,18,20,.14);
  background: rgba(255,255,255,.48);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.hero-strengths span { color: var(--d3-accent); }
.hero-strengths strong { color: var(--d3-ink); }
.hero-strengths p { color: #64656a; }
.scroll-sign { color: #777; }
.scroll-sign span { background: var(--d3-ink); }

/* 共通タイポグラフィ */
.section-label { color: #74757a; }
.section-label span { color: var(--d3-accent); }
.section-label::before { box-shadow: 0 0 0 4px rgba(102,92,255,.08); background: var(--d3-accent); }
.section-label::after { background: var(--d3-line); }
.section-title {
  color: var(--d3-ink);
  font-weight: 430;
  letter-spacing: -.025em;
}

/* 暗い面は必要な場所だけに絞ります */
.concerns {
  color: #f7f7f5;
  background: #121316;
}
.concerns::before { opacity: .5; }
.concerns .section-title, .concerns .section-label { color: #fff; }
.concern-list { border-color: rgba(255,255,255,.24); }
.concern-item { border-color: rgba(255,255,255,.16); }
.concern-item span { color: #8e87ff; }
.concern-item p { color: #ededeb; }
.concern-note { color: #fff; border-left-color: var(--d3-accent); }

.mission {
  color: var(--d3-ink);
  background:
    radial-gradient(circle at 91% 18%,rgba(102,92,255,.08),transparent 25%),
    var(--d3-white);
}
.mission .section-label, .mission-copy, .mission-emphasis { color: var(--d3-ink); }
.mission-copy { font-weight: 420; letter-spacing: -.025em; }
.mission-body, .criteria-copy p { color: #414247; }
.selection-criteria {
  border-color: rgba(17,18,20,.18);
  background: rgba(255,255,255,.78);
  box-shadow: 0 28px 90px rgba(16,17,20,.07);
}
.selection-criteria::after { border-color: rgba(102,92,255,.14); }
.criteria-label, .criteria-grid span { color: var(--d3-accent); }
.criteria-lead, .criteria-grid strong { color: var(--d3-ink); }
.criteria-grid { background: var(--d3-line); }
.criteria-grid > div { background: #f1f0ec; }
.mission-emphasis { color: var(--d3-ink); border-color: var(--d3-line); }

.process {
  color: var(--d3-ink);
  background-color: var(--d3-soft);
}
.process::before {
  opacity: .55;
  background-image: linear-gradient(rgba(17,18,20,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(17,18,20,.035) 1px,transparent 1px);
}
.process-card, .process-card:first-child { border-color: rgba(17,18,20,.15); background: rgba(255,255,255,.34); }
.process-card > span { color: var(--d3-accent); }
.process-card p { color: #4d4e53; }
.process-card:hover { background: var(--d3-white); box-shadow: 0 18px 50px rgba(17,18,20,.07); }

.services {
  color: var(--d3-ink);
  background: var(--d3-white);
}
.service {
  border-color: rgba(17,18,20,.13);
  background: #fff;
  box-shadow: 0 14px 45px rgba(17,18,20,.045);
}
.service::before { background: linear-gradient(var(--d3-aqua),var(--d3-accent)); }
.service:hover { background: #fff; box-shadow: 0 24px 65px rgba(17,18,20,.09); }
.service h3 { color: var(--d3-ink); }
.service-main p, .service ul { color: #505157; }
.service-icon { color: var(--d3-ink); border-color: rgba(17,18,20,.2); box-shadow: none; }

/* 実績は写真を主役に。配列は元のまま */
.works {
  color: #fff;
  background: #111216;
}
.works .section-title, .works .section-label { color: #fff; }
.work-card {
  border-color: rgba(255,255,255,.12);
  background: #17181c;
  box-shadow: 0 18px 55px rgba(0,0,0,.16);
}
.work-image { border-color: rgba(255,255,255,.1); }
.work-image img { filter: grayscale(.88) saturate(.35) contrast(.98); }
.work-card:hover .work-image img { filter: grayscale(.2) saturate(.72); }
.work-category { color: #9993ff; }
.work-description { color: #f1f1ef; }
.work-detail { color: #aeafb4; }

.testimonials {
  color: var(--d3-ink);
  background: var(--d3-paper);
}
.testimonials .section-title { color: var(--d3-ink); }
.voice-card {
  border-color: rgba(17,18,20,.13);
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 50px rgba(17,18,20,.045);
}
.voice-card::after { color: rgba(102,92,255,.09); }
.voice-number { color: var(--d3-accent); }
.voice-card h3 { color: var(--d3-ink); }
.voice-card blockquote p { color: #4c4d52; }

.field {
  color: var(--d3-ink);
  background: var(--d3-white);
}
.body-copy { color: #44454a; }
.field-tags span {
  color: var(--d3-ink);
  border-color: rgba(17,18,20,.24);
  background: transparent;
}

.fde {
  color: #fff;
  background: #15161a;
}
.fde-visual {
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(145deg,#1c1d22,#24222e);
  box-shadow: 0 30px 80px rgba(0,0,0,.2);
}
.fde-grid .fde-en { color: #fff; }
.fde-grid .fde-en span { color: #8e87ff; }
.fde-route i { background: #686970; }
.fde-grid p { color: #c4c4c8; }
.fde-grid ul { border-color: rgba(255,255,255,.2); }

.profile {
  color: var(--d3-ink);
  background: var(--d3-paper);
}
.profile-image {
  border-color: rgba(17,18,20,.12);
  background: #ddd;
  box-shadow: 0 26px 70px rgba(17,18,20,.1);
}
.profile-image img { filter: grayscale(.82) saturate(.45) contrast(.98); }
.profile-image:hover img { filter: grayscale(.2) saturate(.75); }
.profile-role { color: var(--d3-accent); }
.profile-text > p:not(.profile-role), .profile-text .profile-intro, .profile-text .profile-short { color: #434449; }
.profile-catch { color: var(--d3-ink) !important; border-left-color: var(--d3-accent); }
.profile-text strong { color: var(--d3-ink); }
.profile-text .profile-final {
  color: var(--d3-ink);
  border-color: rgba(102,92,255,.2);
  background: rgba(102,92,255,.05);
}

.for-you {
  color: var(--d3-ink);
  background: var(--d3-white);
}
.for-you-grid p { color: #45464b; }

.contact {
  color: #fff;
  background:
    radial-gradient(circle at 14% 45%,rgba(66,191,193,.08),transparent 25%),
    radial-gradient(circle at 88% 20%,rgba(102,92,255,.1),transparent 28%),
    #0f1013;
}
.contact-examples span { border-color: rgba(255,255,255,.28); background: transparent; }
.button-light {
  color: #fff;
  border-radius: 999px;
  background: var(--d3-accent);
}
.button-light:hover { color: #111; background: #fff; }
footer { color: #fff; border-color: #292a2f; background: #0f1013; }
footer > p { color: #a9aaaf; }

.reveal { transition-timing-function: cubic-bezier(.22,.61,.36,1); }

@media (max-width: 900px) {
  .nav { background: rgba(245,244,240,.98); }
  .nav a { color: var(--d3-ink); }
  .nav-contact { color: #fff !important; }
  .menu-button span { background: var(--d3-ink); }
}

@media (max-width: 600px) {
  .opening::before { top: 24px; left: 24px; }
  .opening::after { left: 24px; right: 24px; bottom: 24px; }
  .opening p { width: calc(100vw - 48px); font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .opening, .opening p { transition-duration: .01ms; }
  .opening::after { animation-duration: .01ms; }
}
/* =========================================================
   DESIGN 03 — CREATIVE STUDIO VARIATIONS
   A: Editorial / B: Cinematic / C: Quiet gallery
   ========================================================= */

.design-shell {
  --studio-ink: #111318;
  --studio-paper: #f3f2ee;
  --studio-line: rgba(17, 19, 24, .2);
  --studio-accent: #355c82;
  min-height: 100vh;
  background: var(--studio-paper);
  color: var(--studio-ink);
  transition: background-color .7s ease, color .7s ease;
}

.design-switcher {
  position: fixed;
  left: 24px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(12,14,18,.82);
  color: #fff;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 35px rgba(0,0,0,.16);
}

.design-switcher > span {
  padding: 0 9px;
  font-size: 9px;
  letter-spacing: .18em;
  opacity: .6;
}

.design-switcher button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: 600 10px/1 Arial, sans-serif;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.design-switcher button:hover { transform: translateY(-2px); }
.design-switcher button.is-active { background: #fff; color: #111; }

.design-shell .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 70;
  width: 100%;
  height: 86px;
  padding: 0 clamp(22px, 4vw, 72px);
  border: 0;
  background: transparent;
  pointer-events: none;
}

.design-shell .brand { display: none; }

.design-shell .menu-button {
  position: relative;
  z-index: 3;
  display: flex !important;
  width: auto;
  height: 44px;
  margin-left: auto;
  padding: 0 20px;
  align-items: center;
  gap: 13px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  pointer-events: auto;
}

.design-shell .menu-button b {
  font: 500 11px/1 Arial, sans-serif;
  letter-spacing: .16em;
}

.design-shell .menu-button span {
  display: block;
  position: absolute;
  right: 17px;
  width: 13px;
  height: 1px;
  background: currentColor;
  opacity: 0;
}

.design-shell .nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100svh;
  padding: clamp(90px, 12vh, 150px) clamp(28px, 9vw, 170px);
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  background: #101216;
  color: #f7f6f2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity .45s ease, visibility .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
  pointer-events: auto;
}

.design-shell .nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.design-shell .nav a,
.design-shell .nav .nav-contact {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 3vw, 52px);
  width: 100%;
  padding: clamp(10px, 1.7vh, 22px) 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
  color: inherit;
  font: 400 clamp(36px, 6.1vw, 90px)/.96 Arial, sans-serif;
  letter-spacing: -.05em;
  text-transform: uppercase;
  transition: padding-left .35s ease, color .35s ease;
}

.design-shell .nav a:hover { padding-left: 18px; color: #aebfd5; }
.design-shell .nav a span { font-size: 10px; letter-spacing: .16em; opacity: .5; }
.design-shell .nav.is-open + .menu-button { color: #fff; }

/* イントロ：4つの言葉を静かに切り替える */
.opening {
  align-items: center !important;
  justify-content: center !important;
  padding: 8vw !important;
  text-align: center !important;
}

.opening p {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 84vw);
  margin: 0;
  color: inherit;
  font-size: clamp(30px, 5.2vw, 78px) !important;
  font-weight: 400 !important;
  line-height: 1.32 !important;
  letter-spacing: -.035em !important;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 12px));
  transition: opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

.opening .opening-brand {
  font: 500 clamp(18px, 2.2vw, 30px)/1 Arial, sans-serif !important;
  letter-spacing: .22em !important;
}

.opening-brand .opening-brand,
.opening-first .opening-first,
.opening-second .opening-second,
.opening-third .opening-third {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.opening-design-a { background: #171717 !important; color: #f4f1ea !important; }
.opening-design-b { background: #05070a !important; color: #f0f4f7 !important; }
.opening-design-c { background: #ebe8df !important; color: #17202a !important; }
.opening-leaving { opacity: 0 !important; transition: opacity .7s ease !important; }

/* 共通：写真を「カードの部品」ではなく、面として扱う */
.design-shell .work-card,
.design-shell .service-card,
.design-shell .voice-card {
  transition: transform .55s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}

.design-shell .work-card:hover,
.design-shell .service-card:hover,
.design-shell .voice-card:hover {
  transform: translateY(-7px);
}

.design-shell .work-image img,
.design-shell .profile-photo img {
  filter: grayscale(.85) saturate(.6);
  transition: filter .8s ease, transform 1s cubic-bezier(.22,1,.36,1);
}

.design-shell .work-card:hover .work-image img { filter: grayscale(.15) saturate(.8); transform: scale(1.025); }

/* ---------- A / EDITORIAL ---------- */
.design-a {
  --studio-paper: #f1f0eb;
  --studio-ink: #171717;
  --studio-accent: #315675;
}

.design-a .hero {
  min-height: 100svh;
  padding: 14vh max(6vw, 40px) 8vh;
  background:
    linear-gradient(90deg, transparent 0 68%, rgba(49,86,117,.07) 68% 100%),
    #f1f0eb;
}

.design-a .hero-main,
.design-a .hero-strengths,
.design-a .section,
.design-a .mission > *,
.design-a .works > *,
.design-a .approach > *,
.design-a .profile > *,
.design-a .contact > * { max-width: 1450px; }

.design-a .hero h1 {
  max-width: 1280px;
  font-size: clamp(64px, 8.2vw, 132px);
  line-height: .99;
  letter-spacing: -.065em;
}

.design-a .hero-kicker { font-family: Arial, sans-serif; letter-spacing: .18em; }
@media (min-width: 901px) {
  .design-shell.design-four .hero-kicker { font-size: 18px; }
}
.design-a .hero-bottom { max-width: 1180px; }

.design-a .works-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 80px) 24px;
}

.design-a .work-card { grid-column: span 6; background: transparent; border: 0; box-shadow: none; }
.design-a .work-card:nth-child(3) { grid-column: 3 / span 8; }
.design-a .work-card:nth-child(4) { grid-column: 1 / span 5; }
.design-a .work-card:nth-child(5) { grid-column: 7 / span 6; margin-top: 9vw; }
.design-a .work-image { border-radius: 0; aspect-ratio: 1.34; }
.design-a .work-title { font-size: clamp(24px, 2.2vw, 36px); }

.design-a .services-layout { grid-template-columns: .78fr 1.45fr; }
.design-a .service-card { border-radius: 0; border-width: 1px 0 0; background: transparent; box-shadow: none; }
.design-a .profile-layout { grid-template-columns: .72fr 1.28fr; gap: clamp(55px, 9vw, 150px); }

/* ---------- B / CINEMATIC ---------- */
.design-b {
  --studio-paper: #090c11;
  --studio-ink: #edf0f2;
  --studio-line: rgba(255,255,255,.16);
  --studio-accent: #7890ad;
  background: #090c11;
}

.design-b .site-header { color: #fff; }
.design-b .hero {
  min-height: 100svh;
  padding: 17vh max(6vw, 42px) 8vh;
  background:
    radial-gradient(circle at 82% 35%, rgba(65,92,126,.2), transparent 32%),
    linear-gradient(110deg, #090c11 0 60%, #101824 100%);
}

.design-b .hero h1 {
  max-width: 1500px;
  font-size: clamp(68px, 9.2vw, 148px);
  line-height: .93;
  letter-spacing: -.07em;
}

.design-b .hero-bottom { max-width: 980px; }
.design-b .section,
.design-b .services,
.design-b .voices,
.design-b .field,
.design-b .profile,
.design-b .audience { background: #ecebe7; color: #14171b; }
.design-b .mission,
.design-b .works,
.design-b .approach,
.design-b .contact { background: #090c11; color: #edf0f2; }

.design-b .works-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(70px, 10vw, 150px);
}

.design-b .work-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
  grid-template-rows: auto auto auto 1fr;
  gap: 14px 42px;
  align-items: start;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.design-b .work-card:nth-child(even) { grid-template-columns: minmax(260px, .5fr) minmax(0, 1.5fr); }
.design-b .work-image { grid-row: 1 / 6; aspect-ratio: 16 / 8; border-radius: 0; }
.design-b .work-card:nth-child(even) .work-image { grid-column: 2; }
.design-b .work-card:nth-child(even) > :not(.work-image) { grid-column: 1; }
.design-b .work-title { font-size: clamp(26px, 2.4vw, 40px); }
.design-b .work-description,
.design-b .work-detail { color: rgba(237,240,242,.65); }

.design-b .service-card,
.design-b .voice-card { border-radius: 0; background: rgba(255,255,255,.04); box-shadow: none; }
.design-b .profile-photo { aspect-ratio: 4 / 5.2; }

/* ---------- C / QUIET GALLERY ---------- */
.design-c {
  --studio-paper: #e9e5dc;
  --studio-ink: #17202a;
  --studio-accent: #4d6680;
}

.design-c .hero {
  min-height: 100svh;
  padding: 16vh max(5vw, 28px) 9vh;
  text-align: center;
  background:
    linear-gradient(rgba(23,32,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,32,42,.045) 1px, transparent 1px),
    #e9e5dc;
  background-size: 11vw 11vw;
}

.design-c .hero-copy,
.design-c .hero-bottom { margin-inline: auto; }
.design-c .hero h1 {
  max-width: 1200px;
  margin-inline: auto;
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(58px, 8vw, 126px);
  line-height: 1.03;
  letter-spacing: -.05em;
}
.design-c .hero-kicker,
.design-c .hero-actions { justify-content: center; }
.design-c .hero-bottom { display: flex; flex-direction: column; align-items: center; }

.design-c .section-title,
.design-c .mission-copy,
.design-c .works-heading h2,
.design-c .profile h2,
.design-c .contact h2 {
  font-family: Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.design-c .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 54px 20px; }
.design-c .work-card { border: 0; background: transparent; box-shadow: none; }
.design-c .work-image { aspect-ratio: 4 / 5; border-radius: 0; }
.design-c .work-card:nth-child(2),
.design-c .work-card:nth-child(5) { margin-top: 8vw; }

.design-c .services-layout { display: block; }
.design-c .services-intro { position: static; max-width: 760px; margin-bottom: 70px; }
.design-c .service-card {
  grid-template-columns: 90px .75fr 1.25fr;
  max-width: 1080px;
  margin-left: auto;
  border: 0;
  border-top: 1px solid rgba(23,32,42,.25);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.design-c .profile-layout { max-width: 1080px; grid-template-columns: .85fr 1.15fr; }
.design-c .voice-card { border-radius: 0; }

@media (max-width: 900px) {
  .design-shell .site-header { height: 72px; padding-inline: 18px; }
  .design-shell .nav { padding-inline: 25px; }
  .design-shell .nav a,
  .design-shell .nav .nav-contact { font-size: clamp(34px, 12vw, 64px); }
  .design-a .works-grid,
  .design-c .works-grid { grid-template-columns: 1fr; }
  .design-a .work-card,
  .design-a .work-card:nth-child(3),
  .design-a .work-card:nth-child(4),
  .design-a .work-card:nth-child(5) { grid-column: auto; margin-top: 0; }
  .design-b .work-card,
  .design-b .work-card:nth-child(even) { display: block; }
  .design-b .work-card:nth-child(even) .work-image,
  .design-b .work-card:nth-child(even) > :not(.work-image) { grid-column: auto; }
  .design-b .work-image { margin-bottom: 22px; }
  .design-c .work-card:nth-child(2),
  .design-c .work-card:nth-child(5) { margin-top: 0; }
  .design-c .service-card { grid-template-columns: 62px 1fr; }
  .design-c .service-card ul { grid-column: 2; }
}

@media (max-width: 600px) {
  .design-switcher { left: 12px; bottom: 12px; }
  .design-switcher > span { display: none; }
  .design-shell .menu-button { height: 40px; padding-inline: 16px; }
  .design-a .hero,
  .design-b .hero,
  .design-c .hero { padding: 120px 20px 70px; text-align: left; }
  .design-c .hero-kicker,
  .design-c .hero-actions { justify-content: flex-start; }
  .design-c .hero-bottom { align-items: flex-start; }
  .design-a .hero h1,
  .design-b .hero h1,
  .design-c .hero h1 { font-size: clamp(48px, 15.5vw, 74px); }
  .design-c .work-image { aspect-ratio: 1.25; }
}

/* A案確定後の最終上書き（旧バリエーションより後で適用） */
.opening::before,
.opening::after { content: none !important; display: none !important; }

.design-a .section,
.design-a .mission > *,
.design-a .works > *,
.design-a .testimonials > *,
.design-a .fde > *,
.design-a .profile > *,
.design-a .for-you > *,
.design-a .contact > * {
  width: min(100% - clamp(48px, 8vw, 150px), 1580px);
  max-width: 1580px;
  margin-inline: auto;
}
.design-a .section { padding-left: 0; padding-right: 0; }
.design-a .hero {
  padding-left: clamp(30px, 6vw, 112px);
  padding-right: clamp(30px, 6vw, 112px);
  background: #f1f0eb !important;
}
.design-a .hero::before,
.design-a .hero::after { content: none !important; display: none !important; }
.design-a .hero-main { display: block; width: 100%; max-width: 1640px; }
.design-a .hero-copy { max-width: none; }
.design-a .hero h1 { max-width: 1500px; }
.design-a .hero-bottom { max-width: 1380px; }
.design-a .hero-strengths { width: 100%; max-width: 1380px; grid-template-columns: repeat(3,1fr); }
.design-a .scroll-sign { display: none; }

/* DESIGN 4 — ③の静けさを保ち、技術感を少量だけ加える */
.design-four .hero::before { content: "" !important; display: block !important; position: absolute; z-index: 0; right: 2vw; top: 17%; width: min(42vw, 640px); height: 62%; opacity: .66; pointer-events: none; background-image: radial-gradient(circle, rgba(102,92,255,.52) 1.4px, transparent 1.8px), linear-gradient(28deg, transparent 49.7%, rgba(102,92,255,.15) 50%, transparent 50.3%), linear-gradient(-22deg, transparent 49.7%, rgba(74,164,171,.14) 50%, transparent 50.3%); background-size: 45px 45px, 145px 145px, 180px 180px; mask-image: radial-gradient(ellipse at center, #000 4%, rgba(0,0,0,.8) 42%, transparent 76%); }
.design-four .hero-main, .design-four .hero-strengths { position: relative; z-index: 1; }
.design-four .section-label::after { width: 66px; transform: scaleX(.18); transform-origin: left; }
.design-four .section-label.is-visible::after { animation: design-four-line .9s .25s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes design-four-line { to { transform: scaleX(1); } }
.design-four .work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.design-four .work-tags span { padding: 6px 10px; border: 1px solid rgba(153,147,255,.38); border-radius: 999px; color: #c5c1ff; background: rgba(153,147,255,.06); font: 10px Arial,sans-serif; letter-spacing: .1em; }
@media (max-width: 760px) { .design-four .hero::before { right: -24%; top: 12%; width: 88vw; height: 45%; opacity: .25; } .design-four .work-tags { gap: 6px; } }

.design-a .work-image img,
.design-a .profile-image img,
.design-a .profile-photo img,
.design-a .work-card:hover .work-image img { filter: none !important; }

.design-a .concerns .two-column { display: block; }
.design-a .concerns .section-title { max-width: 780px; margin-bottom: 68px; }
.design-a .concern-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; }
.design-a .concern-item { display: block; min-height: 240px; padding: 25px 24px 34px; border-right: 1px solid rgba(255,255,255,.16); }
.design-a .concern-item:last-child { border-right: 0; }
.design-a .concern-item p { margin-top: 42px; font-size: 17px; line-height: 1.9; }
.design-a .concern-note { max-width: 850px; margin-left: auto; margin-right: 0; }

.design-a .process .section-heading-row { grid-template-columns: minmax(520px,1.15fr) minmax(440px,.85fr); gap: clamp(70px,10vw,180px); align-items: center; }
.design-a .process .section-title { white-space: nowrap; }
.design-a .process .section-heading-row > p { color: #45474c; font-size: 19px; }
.design-a .process-grid { width: 100%; margin-top: 76px; }
.design-a .process-card { min-height: 300px; padding: 38px 34px; }
.design-a .process-card h3 { font-size: 22px; }
.design-a .process-card p { font-size: 16px; line-height: 1.9; }

.design-a .services .two-column { grid-template-columns: minmax(360px,.68fr) minmax(760px,1.32fr); gap: clamp(70px,8vw,140px); }
.design-a .services .side-note { color: #4d5055; font-size: 18px; line-height: 2; }
.design-a .service { grid-template-columns: 86px minmax(260px,.85fr) minmax(330px,1.15fr); }

.design-a .field .two-column { grid-template-columns: minmax(620px,1.05fr) minmax(520px,.95fr); gap: clamp(80px,10vw,180px); align-items: start; }
.design-a .field .body-copy { margin-top: 145px; max-width: 650px; font-size: 18px; line-height: 2.1; }

.design-a .profile > .section-label,
.design-a .profile-grid { width: min(100% - clamp(48px,8vw,150px),1480px); max-width: 1480px; }
.design-a .profile-grid { grid-template-columns: minmax(380px,.82fr) minmax(620px,1.18fr); gap: clamp(70px,9vw,150px); }
.design-a .profile-image { max-width: 520px; }

.design-a .menu-button { height: 54px; padding: 0 26px; }
.design-a .menu-button b { font-size: 13px; letter-spacing: .2em; }
.design-a .nav { justify-content: flex-start; align-items: flex-end; padding: 116px clamp(34px,6vw,100px) 60px; }
.design-a .nav a,
.design-a .nav .nav-contact { width: min(760px,70vw); justify-content: flex-end; text-align: right; font-size: clamp(46px,6vw,92px); }

@media (max-width: 1100px) {
  .design-a .concern-list { grid-template-columns: repeat(2,1fr); }
  .design-a .process .section-heading-row,
  .design-a .services .two-column,
  .design-a .field .two-column,
  .design-a .profile-grid { grid-template-columns: 1fr; gap: 55px; }
  .design-a .process .section-title { white-space: normal; }
  .design-a .field .body-copy { margin-top: 0; max-width: 820px; }
  .design-a .service { grid-template-columns: 76px 1fr; }
  .design-a .service ul { grid-column: 2; }
}
@media (max-width: 650px) {
  .design-a .section,
  .design-a .mission > *, .design-a .works > *, .design-a .testimonials > *,
  .design-a .fde > *, .design-a .profile > *, .design-a .for-you > *, .design-a .contact > * { width: calc(100% - 40px); }
  .design-a .concern-list, .design-a .hero-strengths { grid-template-columns: 1fr; }
  .design-a .concern-item { min-height: 0; border-right: 0; }
  .design-a .process-card { min-height: 0; }
  .design-a .nav { padding: 96px 22px 40px; }
  .design-a .nav a, .design-a .nav .nav-contact { width: 100%; font-size: clamp(36px,12vw,58px); }
}

/* A案：全セクション共通の左右基準線（必ず最後に適用） */
.design-a { --page-gutter: clamp(32px,5vw,88px); --page-max: 1540px; }
.design-a .section,
.design-a .mission > *, .design-a .works > *, .design-a .testimonials > *,
.design-a .testimonials-inner, .design-a .fde > *, .design-a .profile > *,
.design-a .for-you > *, .design-a .contact > * {
  width: min(calc(100% - (var(--page-gutter) * 2)),var(--page-max));
  max-width: var(--page-max); margin-left: auto; margin-right: auto;
}
.design-a .hero { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.design-a .hero-main, .design-a .hero-bottom, .design-a .hero-strengths {
  width: min(100%,var(--page-max)); max-width: var(--page-max); margin-left: auto; margin-right: auto;
}
.design-a .mission-body { width: 68%; max-width: 980px; margin-left: 32%; font-size: 21px; }
.design-a .selection-criteria { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.design-a .mission-emphasis { margin-left: 32%; font-size: 31px; }
.design-a .concern-item p { font-size: 19px; line-height: 1.85; }
.design-a .concern-note { font-size: 20px; }
.design-a .process .section-heading-row { grid-template-columns: minmax(0,1fr) minmax(420px,.72fr); gap: clamp(70px,9vw,150px); }
.design-a .process .section-heading-row > p { font-size: 20px; }
.design-a .process-card h3 { font-size: 24px; }
.design-a .process-card p { font-size: 18px; }
.design-a .services { padding-left: 0; padding-right: 0; }
.design-a .services .two-column { grid-template-columns: minmax(330px,.62fr) minmax(720px,1.38fr); gap: clamp(64px,7vw,120px); }
.design-a .services .side-note { max-width: 430px; font-size: 20px; }
.design-a .service-main h3 { font-size: 24px; }
.design-a .service-main p, .design-a .service li { font-size: 17px; line-height: 1.85; }
.design-a .field .two-column { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(70px,8vw,130px); }
.design-a .field .body-copy { margin-top: 70px; max-width: none; font-size: 20px; line-height: 2; }
.design-a .profile > .section-label, .design-a .profile-grid {
  width: min(calc(100% - (var(--page-gutter) * 2)),var(--page-max)); max-width: var(--page-max);
}
@media (max-width: 1100px) {
  .design-a .mission-body, .design-a .mission-emphasis { width: 100%; max-width: none; margin-left: 0; }
  .design-a .process .section-heading-row, .design-a .services .two-column, .design-a .field .two-column { grid-template-columns: 1fr; }
  .design-a .field .body-copy { margin-top: 0; }
}
@media (max-width: 650px) {
  .design-a { --page-gutter: 20px; }
  .design-a .section, .design-a .mission > *, .design-a .works > *, .design-a .testimonials > *,
  .design-a .testimonials-inner, .design-a .fde > *, .design-a .profile > *, .design-a .for-you > *,
  .design-a .contact > *, .design-a .profile > .section-label, .design-a .profile-grid {
    width: calc(100% - (var(--page-gutter) * 2));
  }
  .design-a .concern-item p, .design-a .process-card p, .design-a .service-main p,
  .design-a .service li, .design-a .field .body-copy { font-size: 17px; }
}

/* A案：横方向の最終バランス（共通幅ルールより後に適用） */
@media (min-width: 1101px) {
  .design-a .concerns .section-title { max-width:none; white-space:nowrap; font-size:clamp(38px,3.4vw,56px); }
  .design-a .concerns .section-title br { display:none; }
  .design-a .field .two-column { grid-template-columns:minmax(500px,.82fr) minmax(650px,1.18fr); gap:clamp(38px,4vw,72px); }
  .design-a .field .body-copy { margin-top:54px; }
  .design-a .mission-copy { max-width:1320px; margin-left:0; }
  .design-a .mission-body { width:72%; max-width:1040px; margin-left:28%; }
  .design-a .selection-criteria { padding-left:clamp(48px,5vw,78px); padding-right:clamp(48px,5vw,78px); }
  .design-a .testimonials-inner { max-width:var(--page-max); }
  .design-a .voice-grid { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3vw,48px); }
  .design-a .voice-card { min-height:510px; padding:42px clamp(34px,3vw,50px); }
  .design-a .voice-card h3 { font-size:clamp(20px,1.45vw,24px); line-height:1.75; }
  .design-a .voice-card blockquote p { font-size:18px; line-height:2; }
  .design-a .fde-grid { width:100%; grid-template-columns:minmax(520px,.92fr) minmax(620px,1.08fr); gap:clamp(54px,6vw,100px); }
  .design-a .fde-visual { min-height:520px; padding:54px 50px; }
  .design-a .fde-grid h2 { font-size:clamp(34px,3vw,46px); }
}

/* A案：細部の読みやすさとカードの収まりを調整 */
.opening-second {
  width: min(1100px,92vw);
  white-space: nowrap;
  font-size: clamp(28px,5vw,72px) !important;
}
.design-a .concern-item {
  padding-left: 32px;
  padding-right: 28px;
}
.design-a .hero-strengths > div {
  padding: 30px 30px 32px;
}
.design-a .hero-strengths strong {
  font-size: 20px;
}
.design-a .hero-strengths p {
  font-size: 16px;
  line-height: 1.75;
}
.design-a .testimonials-inner {
  width: min(calc(100% - 80px),1600px);
  max-width: 1600px;
}
.design-a .voice-grid {
  gap: clamp(18px,2vw,30px);
}
.design-a .voice-card {
  min-width: 0;
  padding-left: clamp(34px,3vw,54px);
  padding-right: clamp(34px,3vw,54px);
}
.design-a .voice-card h3 span {
  white-space: normal;
}

@media (max-width: 650px) {
  .opening-second {
    white-space: normal;
    font-size: clamp(25px,8vw,42px) !important;
  }
  .design-a .concern-item {
    padding-left: 22px;
    padding-right: 22px;
  }
  .design-a .testimonials-inner {
    width: calc(100% - 40px);
  }
}

/* オープニングと悩みセクションの最終補正 */
.opening {
  position:fixed !important; inset:0 !important;
  width:100vw !important; min-width:100vw !important; max-width:none !important;
  height:100dvh !important; min-height:100dvh !important;
  margin:0 !important; padding:0 !important; overflow:hidden !important;
}
.opening .opening-first, .opening .opening-second {
  left:50% !important; top:50% !important;
  width:min(1100px,calc(100vw - 64px)) !important; max-width:none !important;
  text-align:center !important;
}
.opening .opening-second { white-space:nowrap; }
.design-a .concerns { box-sizing:border-box; padding-left:18px; padding-right:18px; }
@media (max-width:650px) {
  .opening .opening-first, .opening .opening-second { width:calc(100vw - 40px) !important; white-space:normal; }
  .design-a .concerns { padding-left:12px; padding-right:12px; }
}

/* オープニング文言は座標計算を使わず、グリッド中央へ固定 */
.opening .opening-first,
.opening .opening-second {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  grid-area: 1 / 1 !important;
  margin: auto !important;
  transform: translateY(12px) !important;
}
.opening-first .opening-first,
.opening-second .opening-second,
.opening-leaving .opening-second {
  transform: none !important;
}

/* スクロール全体で共通する左基準線 */
.design-a .section-label {
  box-sizing: border-box;
  padding-left: 18px;
}

/* 悩みセクション：見出し・カード・締め文を同じ左基準へ */
.design-a .concerns {
  padding-left: 0;
  padding-right: 0;
}
.design-a .concerns .section-title {
  box-sizing: border-box;
  padding-left: 18px;
}
.design-a .concern-list {
  width: calc(100% - 36px);
  margin-left: 18px;
  margin-right: 18px;
}
.design-a .concern-note {
  max-width: 1100px;
  margin-left: 18px;
  margin-right: auto;
}

/* ミッション：中央寄せをやめ、他セクションと同じ左端から展開 */
.design-a .mission-copy,
.design-a .mission-body,
.design-a .selection-criteria,
.design-a .mission-emphasis {
  width: min(calc(100% - (var(--page-gutter) * 2)),var(--page-max));
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}
.design-a .mission-copy {
  box-sizing: border-box;
  padding-left: 18px;
}
.design-a .mission-body {
  box-sizing: border-box;
  padding-left: 18px;
}
.design-a .mission-body p {
  max-width: 1040px;
}
.design-a .mission-emphasis {
  box-sizing: border-box;
  padding-left: 18px;
}

@media (max-width:650px) {
  .design-a .section-label,
  .design-a .concerns .section-title,
  .design-a .mission-copy,
  .design-a .mission-body,
  .design-a .mission-emphasis { padding-left: 12px; }
  .design-a .concern-list { width: calc(100% - 24px); margin-left: 12px; margin-right: 12px; }
  .design-a .concern-note { margin-left: 12px; }
}

/* 02〜08：スクロール全体で左端・横幅・内側余白を統一 */
.design-a {
  --flow-gutter: clamp(48px, 5vw, 88px);
  --flow-width: min(calc(100% - (var(--flow-gutter) * 2)), 1580px);
  --flow-inset: clamp(22px, 2vw, 34px);
}

/* 中央寄せを打ち消し、すべて同じ左基準線から始める */
.design-a .mission > *,
.design-a .process,
.design-a .services,
.design-a .works > *,
.design-a .testimonials > *,
.design-a .testimonials-inner,
.design-a .field,
.design-a .fde > * {
  width: var(--flow-width);
  max-width: 1580px;
  margin-left: var(--flow-gutter);
  margin-right: auto;
}

.design-a .process,
.design-a .services,
.design-a .field {
  padding-left: 0;
  padding-right: 0;
}

/* ラベルと各セクションの主要内容も同じ開始位置に揃える */
.design-a .mission .section-label,
.design-a .mission-copy,
.design-a .mission-body,
.design-a .mission-emphasis,
.design-a .process .section-label,
.design-a .process .section-heading-row,
.design-a .services .section-label,
.design-a .services .two-column,
.design-a .works-head,
.design-a .works-grid,
.design-a .testimonials .section-heading-row,
.design-a .voice-grid,
.design-a .field .section-label,
.design-a .field .two-column,
.design-a .fde .section-label,
.design-a .fde-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.design-a .mission-body,
.design-a .mission-emphasis {
  padding-left: 18px;
}

/* 03：カードの枠だけでなく、番号・見出し・本文にも呼吸できる余白を確保 */
.design-a .process-card {
  min-height: 330px;
  padding: 42px var(--flow-inset) 48px;
}
.design-a .process-card h3 {
  margin-top: 68px;
  margin-bottom: 30px;
}
.design-a .process-card p {
  max-width: 17em;
  font-size: 17px;
  line-height: 2;
}

/* 05〜08も見出しや本文を狭い中央カラムへ戻さない */
.design-a .works-head,
.design-a .testimonials .section-heading-row,
.design-a .field .two-column,
.design-a .fde-grid {
  padding-left: 18px;
  padding-right: 18px;
}
.design-a .works-grid,
.design-a .voice-grid {
  padding-left: 18px;
  padding-right: 18px;
}

@media (max-width: 1100px) {
  .design-a { --flow-gutter: clamp(28px, 5vw, 54px); }
  .design-a .process-card p { max-width: 34em; }
}

@media (max-width: 650px) {
  .design-a {
    --flow-gutter: 20px;
    --flow-inset: 22px;
  }
  .design-a .mission-body,
  .design-a .mission-emphasis,
  .design-a .works-head,
  .design-a .works-grid,
  .design-a .testimonials .section-heading-row,
  .design-a .voice-grid,
  .design-a .field .two-column,
  .design-a .fde-grid {
    padding-left: 12px;
    padding-right: 12px;
  }
  .design-a .process-card {
    min-height: 0;
    padding: 30px var(--flow-inset) 34px;
  }
  .design-a .process-card h3 { margin: 36px 0 18px; }
}

/* 01〜08 最終共通レイアウト：背景は全幅、内容は広い共通枠で左揃え */
.design-a {
  --section-edge: clamp(46px, 5.2vw, 92px);
  --section-width: min(calc(100vw - (var(--section-edge) * 2)), 1580px);
  --content-inset: clamp(18px, 1.5vw, 28px);
}

/* section クラスが持つ中央寄せ・最大幅を解除する */
.design-a .concerns,
.design-a .process,
.design-a .services,
.design-a .field {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* 各セクションの直下要素を、同じ広い左寄せ枠へ配置 */
.design-a .concerns > .section-label,
.design-a .concerns > .two-column,
.design-a .concerns > .concern-note,
.design-a .mission > .section-label,
.design-a .mission > .mission-copy,
.design-a .mission > .mission-body,
.design-a .process > .section-label,
.design-a .process > .section-heading-row,
.design-a .process > .process-grid,
.design-a .services > .section-label,
.design-a .services > .two-column,
.design-a .works > .works-head,
.design-a .works > .works-grid,
.design-a .testimonials > .testimonials-inner,
.design-a .field > .section-label,
.design-a .field > .two-column,
.design-a .fde > .section-label,
.design-a .fde > .fde-grid {
  box-sizing: border-box;
  width: var(--section-width);
  max-width: 1580px;
  margin-left: var(--section-edge);
  margin-right: auto;
}

/* 数字の下にある見出し・本文・カードにも、数字と同じ内側余白を入れる */
.design-a .concerns > .section-label,
.design-a .concerns > .two-column,
.design-a .concerns > .concern-note,
.design-a .mission > .section-label,
.design-a .mission > .mission-copy,
.design-a .mission > .mission-body,
.design-a .mission > .selection-criteria,
.design-a .process > .section-label,
.design-a .process > .section-heading-row,
.design-a .process > .process-grid,
.design-a .services > .section-label,
.design-a .services > .two-column,
.design-a .works > .works-head,
.design-a .works > .works-grid,
.design-a .testimonials > .testimonials-inner,
.design-a .field > .section-label,
.design-a .field > .two-column,
.design-a .fde > .section-label,
.design-a .fde > .fde-grid {
  padding-left: var(--content-inset);
  padding-right: var(--content-inset);
}

.design-a .works-head .section-label,
.design-a .testimonials-inner > .section-label {
  padding-left: 0;
}

/* 01：カード群と締めの文章を左へ揃え、外周にも余裕を残す */
.design-a .concerns > .two-column {
  display: block;
}
.design-a .concerns .section-title {
  padding-left: 0;
}
.design-a .concern-list {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.design-a .concern-note {
  max-width: none;
  padding-top: 0;
  padding-right: var(--content-inset);
}

/* 02：見出し・本文を中央の細い列へ移動させない */
.design-a .mission-body,
.design-a .mission-emphasis {
  width: var(--section-width);
  max-width: 1580px;
  margin-left: var(--section-edge);
  margin-right: auto;
}
.design-a .mission-body p {
  max-width: 1080px;
}
.design-a .mission-emphasis {
  width: 100%;
  max-width: none;
  margin-left: 0;
}

/* 03：カード外周とカード内部の両方に余白を確保 */
.design-a .process-grid {
  width: var(--section-width);
  margin-top: 76px;
}
.design-a .process-card {
  min-height: 340px;
  padding: 44px clamp(34px, 2.5vw, 46px) 52px;
}
.design-a .process-card h3 {
  margin: 70px 0 30px;
}
.design-a .process-card p {
  max-width: none;
  font-size: 17px;
  line-height: 2;
}

/* 04〜08：狭い中央カラムを作らず、共通枠を広く使用 */
.design-a .services .two-column,
.design-a .field .two-column,
.design-a .fde-grid {
  width: var(--section-width);
}
.design-a .works-head,
.design-a .works-grid,
.design-a .testimonials-inner,
.design-a .voice-grid {
  max-width: none;
}
.design-a .testimonials .section-label,
.design-a .testimonials .section-heading-row,
.design-a .testimonials .voice-grid {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 1100px) {
  .design-a {
    --section-edge: clamp(28px, 5vw, 52px);
    --content-inset: clamp(14px, 2vw, 22px);
  }
  .design-a .process-card {
    min-height: 0;
  }
}

@media (max-width: 650px) {
  .design-a {
    --section-edge: 18px;
    --content-inset: 10px;
  }
  .design-a .process-card {
    padding: 30px 24px 36px;
  }
  .design-a .process-card h3 {
    margin: 38px 0 18px;
  }
}

/* 01〜08：既に広かったセクションの幅を基準に、狭い箇所だけを揃える */
.design-a {
  --reference-width: min(calc(100% - clamp(48px, 8vw, 150px)), 1580px);
  --reference-inset: 18px;
}

/* 前回広げすぎた section 自体を、元の広い共通枠へ戻す */
.design-a .concerns,
.design-a .process,
.design-a .services,
.design-a .field {
  width: var(--reference-width);
  max-width: 1580px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* 01・03・04・07に残っていた前回の横移動を解除 */
.design-a .concerns > .section-label,
.design-a .concerns > .two-column,
.design-a .concerns > .concern-note,
.design-a .process > .section-label,
.design-a .process > .section-heading-row,
.design-a .process > .process-grid,
.design-a .services > .section-label,
.design-a .services > .two-column,
.design-a .field > .section-label,
.design-a .field > .two-column {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* 中央で細くなっていた02・05・06・08だけを、同じ基準幅へ広げる */
.design-a .mission,
.design-a .works,
.design-a .testimonials,
.design-a .fde {
  padding-left: 0;
  padding-right: 0;
}

.design-a .mission > .section-label,
.design-a .mission > .mission-copy,
.design-a .mission > .mission-body,
.design-a .mission > .selection-criteria,
.design-a .works > .works-head,
.design-a .works > .works-grid,
.design-a .testimonials > .testimonials-inner,
.design-a .fde > .section-label,
.design-a .fde > .fde-grid {
  box-sizing: border-box;
  width: var(--reference-width);
  max-width: 1580px;
  margin-left: auto;
  margin-right: auto;
}

/* ラベルの下の内容にも、ラベルと同じ左側のゆとりを与える */
.design-a .concerns > .two-column,
.design-a .concerns > .concern-note,
.design-a .mission > .mission-copy,
.design-a .mission > .mission-body,
.design-a .process > .section-heading-row,
.design-a .process > .process-grid,
.design-a .services > .two-column,
.design-a .works > .works-head,
.design-a .works > .works-grid,
.design-a .testimonials > .testimonials-inner,
.design-a .field > .two-column,
.design-a .fde > .fde-grid {
  box-sizing: border-box;
  padding-left: var(--reference-inset);
  padding-right: var(--reference-inset);
}

/* 左揃えを崩していた個別指定だけを解除する */
.design-a .mission-body,
.design-a .mission-emphasis,
.design-a .concern-note {
  max-width: none;
  margin-left: 0;
  margin-right: auto;
}
.design-a .mission-body {
  width: var(--reference-width);
  margin-left: auto;
  margin-right: auto;
}
.design-a .mission-body p {
  max-width: 1040px;
}
.design-a .mission-emphasis {
  width: 100%;
}
.design-a .concern-note {
  width: 100%;
}
.design-a .works-head .section-label,
.design-a .testimonials-inner > .section-label {
  padding-left: 0;
}

/* 03：外枠の幅は変えず、カード内の文字だけに余裕を追加 */
.design-a .process-card {
  min-height: 330px;
  padding: 42px clamp(32px, 2.4vw, 44px) 48px;
}
.design-a .process-card h3 {
  margin: 66px 0 28px;
}
.design-a .process-card p {
  max-width: none;
  line-height: 2;
}

/* 右端へ寄りすぎないよう、カード群も必ず共通枠の内側に収める */
.design-a .concern-list,
.design-a .process-grid,
.design-a .works-grid,
.design-a .voice-grid,
.design-a .fde-grid {
  box-sizing: border-box;
  max-width: 100%;
}

/* オープニング：位置を動かさず、重ならない静かなフェードで切り替える */
.opening .opening-first,
.opening .opening-second {
  transform: none !important;
  filter: none !important;
  opacity: 0;
  transition-property: opacity !important;
  transition-duration: .46s !important;
  transition-timing-function: ease !important;
  transition-delay: 0s !important;
}
.opening-first .opening-first {
  opacity: 1;
  transition-delay: .12s !important;
}
.opening-second .opening-first {
  opacity: 0;
  transition-duration: .28s !important;
}
.opening-second .opening-second {
  opacity: 1;
  transition-delay: .22s !important;
}
.opening-leaving .opening-second {
  opacity: 1;
  transition-delay: 0s !important;
}
.opening-leaving {
  opacity: 0 !important;
  transition: opacity .72s ease !important;
}

@media (max-width: 650px) {
  .design-a {
    --reference-width: calc(100% - 40px);
    --reference-inset: 12px;
  }
  .design-a .process-card {
    min-height: 0;
    padding: 28px 24px 34px;
  }
  .design-a .process-card h3 {
    margin: 36px 0 18px;
  }
}

/* ④：スマートフォン実機確認②。PC表示には影響させない */
@media (max-width: 650px) {
  .design-four { --mobile-edge: 20px; }

  .design-four .mission-copy,
  .design-four .process .section-title,
  .design-four .testimonials .section-title,
  .design-four .field .section-title,
  .design-four .for-you h2,
  .design-four .contact h2 {
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .design-four .mission-copy {
    font-size: clamp(21px, 6.35vw, 25px);
    line-height: 1.75;
  }
  .design-four .mission-body,
  .design-four .criteria-copy,
  .design-four .process .section-heading-row > p,
  .design-four .side-note,
  .design-four .concern-note,
  .design-four .for-you-grid p,
  .design-four .contact-inner > p:not(.contact-label) {
    width: 100%;
    max-width: none;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .design-four .mission-emphasis {
    font-size: clamp(21px, 6.2vw, 25px);
    line-height: 1.7;
    letter-spacing: -.035em;
    word-break: keep-all;
  }
  .design-four .process .section-heading-row { grid-template-columns: 1fr; }
  .design-four .process .section-heading-row > p {
    font-size: 15px;
    letter-spacing: -.025em;
  }
  .design-four .services .two-column { grid-template-columns: 1fr; }
  .design-four .services .side-note {
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: -.025em;
  }
  .design-four .service {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 22px 30px;
  }
  .design-four .service-icon {
    grid-column: 1;
    grid-row: auto;
    width: 58px;
    height: 58px;
  }
  .design-four .service-main {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
  .design-four .service-main > span { margin-bottom: 10px; }
  .design-four .service h3 { font-size: 22px; }
  .design-four .service-main p,
  .design-four .service li {
    font-size: 15px;
    line-height: 1.85;
  }
  .design-four .service ul {
    grid-column: 1;
    padding-top: 18px;
  }
  .design-four .voice-card { padding: 30px 22px 34px; }
  .design-four .voice-card h3 {
    font-size: clamp(17px, 5.1vw, 20px);
    letter-spacing: -.025em;
    word-break: keep-all;
  }
  .design-four .voice-card blockquote p {
    font-size: 15px;
    line-height: 1.95;
    letter-spacing: -.02em;
  }
  .design-four .profile-short {
    font-size: 15px !important;
    letter-spacing: -.035em;
    white-space: nowrap;
  }
  .design-four .for-you h2 {
    font-size: clamp(22px, 6.6vw, 26px);
    letter-spacing: -.035em;
  }
  .design-four .contact h2 {
    font-size: clamp(22px, 6.5vw, 27px);
    letter-spacing: -.04em;
  }
  .design-four .contact-inner > p:not(.contact-label) {
    font-size: 15px;
    letter-spacing: -.025em;
  }
}

/* ④：スマートフォン実機確認③。枠外へのはみ出しと文節の折り返しを修正 */
@media (max-width: 650px) {
  .design-four .mission-copy {
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .design-four .voice-card h3,
  .design-four .voice-card h3 span {
    display: inline;
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .design-four .concern-note br { display: none; }
  .design-four .criteria-copy .mobile { display: block; }
  .design-four .service {
    padding-left: 14px;
    padding-right: 14px;
  }
  .design-four .service-main p {
    font-size: clamp(12px, 3.25vw, 13px);
    line-height: 1.7;
    letter-spacing: -.045em;
    white-space: nowrap;
  }
}

/* ④の技術モチーフは、③の最終レイアウト指定より後で適用する */
.design-four .hero::before { content: "" !important; display: block !important; position: absolute; z-index: 0; right: 2vw; top: 17%; width: min(42vw, 640px); height: 62%; opacity: .66; pointer-events: none; background-image: radial-gradient(circle, rgba(102,92,255,.52) 1.4px, transparent 1.8px), linear-gradient(28deg, transparent 49.7%, rgba(102,92,255,.15) 50%, transparent 50.3%), linear-gradient(-22deg, transparent 49.7%, rgba(74,164,171,.14) 50%, transparent 50.3%); background-size: 45px 45px, 145px 145px, 180px 180px; mask-image: radial-gradient(ellipse at center, #000 4%, rgba(0,0,0,.8) 42%, transparent 76%); }
.design-four .hero-main, .design-four .hero-strengths { position: relative; z-index: 1; }
@media (max-width: 760px) { .design-four .hero::before { right: -24%; top: 12%; width: 88vw; height: 45%; opacity: .25; } }