:root {
  --paper:#f7f7f2;
  --white:#fff;
  --ink:#242721;
  --muted:#64695f;
  --yellow:#f4db4f;
  --pale:#f3edc7;
  --sage:#e8ecdf;
  --line:#d8dad1;
  --max:1160px;
  --gutter:clamp(24px,5vw,80px)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:112px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.95;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit;
  color:inherit
}
body,button,input,select,textarea {
  font-feature-settings:"palt"
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button,summary {
  cursor:pointer
}
button {
  border:0
}
a,button,summary,input,select,textarea {
  touch-action:manipulation
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #536c50;
  outline-offset:5px
}
::selection {
  background:var(--yellow);
  color:var(--ink)
}
[hidden] {
  display:none!important
}
img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover
}
svg {
  display:block
}
h1,h2,h3,h4,p,figure {
  margin:0
}
h1,h2,h3,h4 {
  font-weight:700;
  line-height:1.6;
  letter-spacing:.07em
}
h1 {
  font-size:clamp(40px,4.8vw,64px)
}
h2 {
  font-size:clamp(28px,3vw,40px)
}
h3 {
  font-size:24px
}
h4 {
  font-size:20px
}
p+p {
  margin-top:1.3em
}
ul,ol {
  margin:0;
  padding:0
}
li {
  list-style:none
}
small {
  font-size:14px
}
fieldset {
  min-width:0
}
input {
  accent-color:var(--ink)
}
.wrap {
  width:calc(100% - var(--gutter)*2);
  max-width:var(--max);
  margin-inline:auto
}
.section {
  padding-block:110px
}
.eyebrow {
  display:block;
  font-family:Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.11em
}
.small-note,.field-help {
  font-size:14px;
  line-height:1.9;
  color:var(--muted)
}
.section-note {
  margin-top:24px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:36px;
  margin-bottom:50px
}
.section-heading .eyebrow {
  margin-bottom:20px
}
.section-heading>p {
  max-width:400px
}
.section-heading>.text-link {
  flex-shrink:0
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  min-height:48px;
  padding:12px 24px;
  border-radius:40px;
  background:var(--yellow);
  font-size:14px;
  font-weight:700;
  transition:background .2s
}
.button:hover {
  background:#ecd23f
}
.button span {
  font:24px Arial,sans-serif
}
.circle-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  flex:0 0 50px;
  border-radius:50%;
  background:var(--yellow);
  color:var(--ink);
  font:26px Arial,sans-serif;
  transition:transform .25s
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:25px;
  margin-top:30px;
  padding-bottom:10px;
  border-bottom:1px solid currentColor;
  font-size:16px;
  font-weight:700
}
.text-link:hover .circle-arrow {
  transform:rotate(45deg)
}
.underlined {
  text-decoration:underline;
  text-underline-offset:6px
}
.tag-group {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.tag {
  display:inline-block;
  font-size:14px;
  line-height:1.7;
  padding:5px 12px;
  border:1px solid #d0d4c7;
  border-radius:3px;
  background:#ffffff7d
}
.mobile-only {
  display:none
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:1000;
  padding:12px 24px;
  background:var(--yellow)
}
.skip-link:focus {
  top:12px
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:14px;
  color:var(--muted);
  padding-top:27px
}
.breadcrumb a {
  text-decoration:underline;
  text-underline-offset:5px
}
/* 共通ヘッダー・フッター */
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:98px;
  gap:24px;
  padding:18px 3.2%;
  background:var(--paper);
  position:relative;
  z-index:50
}
.js .site-header {
  position:sticky;
  top:0
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  flex-shrink:0
}
.brand-mark {
  width:47px;
  height:47px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.brand-name {
  font-size:28px;
  font-weight:800;
  line-height:1.12;
  letter-spacing:.07em
}
.brand-english {
  display:block;
  font:700 14px/1.5 Arial,sans-serif;
  letter-spacing:.14em;
  margin-top:3px
}
.main-nav {
  display:flex;
  align-items:center;
  gap:clamp(18px,2.3vw,34px);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em
}
.main-nav>a:not(.button) {
  padding:8px 0;
  position:relative
}
.main-nav>a:not(.button):after {
  content:"";
  position:absolute;
  bottom:2px;
  left:0;
  height:2px;
  width:0;
  background:var(--ink);
  transition:width .2s
}
.main-nav>a:hover:after,.main-nav>a[aria-current]:after {
  width:100%
}
.nav-contact {
  padding-inline:23px;
  gap:18px
}
.menu-toggle {
  display:none;
  background:none
}
.site-footer {
  padding:52px 0 24px
}
.footer-top {
  display:flex;
  gap:48px;
  align-items:center;
  padding-bottom:32px
}
.footer-top>p {
  font-size:14px
}
.back-top {
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto;
  font-size:14px
}
.back-top span {
  font-size:25px
}
.footer-nav {
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  font-size:14px;
  padding-block:25px;
  border-top:1px solid var(--line)
}
.footer-nav a:hover {
  text-decoration:underline;
  text-underline-offset:6px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:14px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:24px
}
.footer-bottom>span {
  font-family:Arial,sans-serif;
  flex-shrink:0
}
.contact-ribbon {
  display:grid;
  grid-template-columns:36% 64%;
  background:var(--ink);
  color:#fff;
  max-width:1600px;
  margin:auto
}
.ribbon-photo img {
  height:100%;
  min-height:420px;
  object-position:35% center
}
.ribbon-content {
  padding:65px 12%;
  align-self:center
}
.ribbon-content .eyebrow {
  font-size:14px;
  color:#dadccb;
  margin-bottom:24px
}
.ribbon-content h2 {
  font-size:clamp(28px,3vw,40px)
}
.ribbon-content>p {
  margin-top:23px;
  font-size:16px
}
.light-link {
  color:#fff
}
/* TOPのヒーロー */
.hero {
  position:relative;
  min-height:600px;
  height:min(740px,calc(100svh - 140px));
  margin:0 24px;
  overflow:hidden;
  border-radius:4px 4px 72px 4px;
  color:#fff;
  background:#676d5b
}
.hero-photo {
  height:100%;
  object-position:center 48%
}
.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(20,29,22,.44),transparent 75%),linear-gradient(0deg,rgba(15,25,19,.55),transparent 63%)
}
.hero-kicker {
  position:absolute;
  left:5.5%;
  top:40px;
  font:700 16px/1.45 Arial,sans-serif;
  letter-spacing:.12em;
  text-shadow:0 1px 8px #263628
}
.hero-vertical {
  position:absolute;
  right:5.5%;
  top:44px;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-weight:700;
  font-size:17px;
  line-height:2.2;
  letter-spacing:.24em;
  background:var(--paper);
  color:var(--ink);
  padding:18px 14px
}
.hero-copy {
  position:absolute;
  left:5.5%;
  bottom:64px
}
.hero h1 {
  font-size:clamp(38px,4.8vw,70px);
  font-weight:800;
  line-height:1.6;
  letter-spacing:.09em;
  text-shadow:0 2px 18px #24312660
}
.hero-copy>p {
  font-size:17px;
  letter-spacing:.14em;
  line-height:2;
  margin-top:19px
}
.hero-scroll {
  position:absolute;
  right:4.5%;
  bottom:58px;
  writing-mode:vertical-rl;
  display:flex;
  gap:22px;
  align-items:center;
  font:700 14px Arial,sans-serif;
  letter-spacing:.08em
}
.scroll-line {
  writing-mode:horizontal-tb;
  font-size:28px
}
.hero-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 0 0;
  font-size:14px;
  font-weight:700
}
.hero-caption>p:first-child {
  font-family:Arial,sans-serif;
  letter-spacing:.1em
}
.hero-caption p+p {
  margin:0
}
/* TOPの編集型レイアウト */
.home-about {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10%;
  padding-block:130px
}
.home-about-art {
  position:relative;
  padding-bottom:80px;
  padding-right:45px
}
.about-large {
  aspect-ratio:.86;
  border-radius:4px 4px 60px 4px
}
.about-small {
  position:absolute;
  right:-6%;
  bottom:0;
  width:60%;
  aspect-ratio:1.2;
  border:9px solid var(--paper);
  box-shadow:0 16px 35px #24272115;
  transform:rotate(6deg)
}
.round-note {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:absolute;
  left:-20px;
  bottom:30px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:var(--yellow);
  font:700 16px/1.5 Arial,sans-serif;
  letter-spacing:.04em;
  transform:rotate(-12deg)
}
.hello-word {
  font:italic 36px/1.2 Georgia,serif;
  margin:24px 0 26px
}
.home-about-copy h2 {
  font-size:clamp(25px,2.6vw,34px);
  margin-bottom:23px;
  letter-spacing:.035em
}
.home-about-copy>p:not(.hello-word) {
  line-height:2.1
}
.home-services {
  background:#eeeee5
}
.visual-service-row {
  display:grid;
  grid-template-columns:40px 160px 1fr 1fr 50px;
  gap:26px;
  align-items:center;
  padding:24px 0;
  border-top:1px solid #cbcec2
}
.visual-service-row:last-child {
  border-bottom:1px solid #cbcec2
}
.visual-service-row>img {
  aspect-ratio:1.55;
  border-radius:4px
}
.service-num {
  font:25px Arial,sans-serif
}
.visual-service-row h3 {
  font-size:22px;
  letter-spacing:.04em
}
.visual-service-row .eyebrow {
  color:var(--muted);
  margin-bottom:5px
}
.visual-service-row>p {
  font-size:16px;
  line-height:1.8
}
.visual-service-row:hover .circle-arrow {
  transform:rotate(45deg)
}
.home-case-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:65px
}
.home-case:nth-child(2) {
  padding-top:100px
}
.home-case-image {
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:5px
}
.home-case-image>img {
  aspect-ratio:1.12;
  transition:transform .5s
}
.home-case-image:hover>img {
  transform:scale(1.035)
}
.image-tag {
  position:absolute;
  left:18px;
  top:18px;
  background:var(--paper);
  border-radius:2px;
  padding:5px 12px;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.06em;
  color:var(--ink)
}
.floating-caption {
  position:absolute;
  left:22px;
  bottom:30px;
  writing-mode:vertical-rl;
  background:var(--paper);
  padding:16px 9px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.14em
}
.home-case-image>.circle-arrow {
  position:absolute;
  right:20px;
  bottom:22px
}
.project-category {
  font:14px/1.8 Arial,sans-serif;
  letter-spacing:.06em;
  margin:22px 0 10px;
  color:var(--muted)
}
.home-case h3 {
  font-size:30px
}
.home-process {
  background:var(--pale)
}
.home-process-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px
}
.process-photo {
  position:relative
}
.process-photo img {
  height:100%;
  min-height:330px;
  border-radius:4px
}
.process-photo>span {
  position:absolute;
  bottom:22px;
  left:23px;
  background:var(--paper);
  padding:14px;
  font:700 14px/1.4 Arial,sans-serif;
  letter-spacing:.08em
}
.mini-steps {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px
}
.mini-steps li {
  padding-top:20px;
  border-top:1px solid #bdb797
}
.mini-steps li>span {
  font:34px Arial,sans-serif
}
.mini-steps h3 {
  font-size:21px;
  margin:16px 0 10px
}
.mini-steps p {
  font-size:16px;
  line-height:1.8
}
/* 共通の架空投稿見本 */
.post-card {
  background:white;
  color:var(--ink);
  border:1px solid #ddddcf;
  border-radius:7px;
  box-shadow:0 14px 40px #24272118;
  overflow:hidden
}
.post-top {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 13px;
  font:700 14px/1.4 Arial,sans-serif;
  letter-spacing:.02em
}
.post-top>span:last-child {
  margin-left:auto;
  font-size:20px
}
.post-avatar {
  width:20px;
  height:20px;
  flex:0 0 20px;
  background:var(--yellow);
  border-radius:50%;
  border:5px solid #fff2b0
}
.post-card>img {
  aspect-ratio:1.1
}
.post-copy {
  padding:18px
}
.post-copy .eyebrow {
  font-size:14px;
  letter-spacing:.025em
}
.post-copy p {
  font-size:16px;
  font-weight:700;
  margin-top:10px;
  line-height:1.7
}
.post-rule {
  display:block;
  margin-top:16px;
  width:60%;
  height:3px;
  background:#d9ddd0
}
/* 新規: 会社紹介 */
.photo-masthead {
  padding-top:55px
}
.masthead-title {
  display:grid;
  grid-template-columns:27% 1fr;
  align-items:start;
  gap:30px;
  margin-bottom:45px
}
.masthead-title .eyebrow {
  padding-top:24px
}
.masthead-title h1 {
  font-size:clamp(40px,4.5vw,62px)
}
.masthead-image {
  position:relative
}
.masthead-image>img {
  aspect-ratio:2.45;
  border-radius:5px 5px 70px 5px
}
.photo-stamp {
  position:absolute;
  right:35px;
  bottom:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:158px;
  height:158px;
  background:var(--yellow);
  border-radius:50%;
  text-align:center;
  font:700 24px/1.2 Arial,sans-serif;
  transform:rotate(10deg)
}
.photo-caption {
  position:absolute;
  bottom:22px;
  left:26px;
  font:14px Arial,sans-serif;
  letter-spacing:.05em;
  background:var(--paper);
  padding:7px 12px
}
.philosophy {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:9%
}
.big-serif {
  font:64px/1.08 Georgia,serif;
  letter-spacing:-.04em;
  margin-top:34px
}
.big-serif em {
  position:relative;
  display:inline-block;
  z-index:0
}
.big-serif em:after {
  content:"";
  position:absolute;
  z-index:-1;
  background:var(--yellow);
  height:15px;
  bottom:0;
  left:0;
  right:0;
  transform:rotate(-3deg)
}
.philosophy h2 {
  font-size:32px;
  margin-bottom:28px
}
.philosophy p:not(.big-serif) {
  line-height:2.2
}
.values-section {
  background:#eceee4
}
.value-mosaic {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:35px 60px
}
.value-primary {
  grid-row:span 2
}
.value-primary>img {
  aspect-ratio:.95;
  border-radius:5px
}
.value-primary>div {
  padding-top:25px
}
.value-mosaic h3 {
  font-size:26px;
  margin:13px 0 12px
}
.value-secondary {
  display:grid;
  grid-template-columns:42% 1fr;
  gap:25px;
  align-items:center
}
.value-secondary>img {
  height:100%;
  min-height:290px;
  border-radius:4px
}
.value-secondary h3 {
  font-size:22px
}
.value-mosaic p {
  font-size:16px
}
.value-note {
  background:var(--yellow);
  padding:32px 35px;
  position:relative;
  overflow:hidden;
  border-radius:5px
}
.note-sun {
  font:70px/1 Arial,sans-serif
}
.value-note>.note-sun {
  position:absolute;
  right:20px;
  top:25px;
  opacity:.32
}
.value-note .eyebrow,.value-note h3,.value-note p {
  position:relative
}
.team-diagram {
  display:grid;
  grid-template-columns:1fr 190px 1fr;
  align-items:center;
  border:1px solid var(--line);
  border-radius:6px;
  padding:38px;
  gap:20px;
  background:#fff
}
.team-side h3 {
  font-size:26px;
  margin:16px 0 22px
}
.team-side .tag {
  margin:0 6px 8px 0
}
.team-middle {
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  background:var(--yellow);
  border-radius:50%;
  aspect-ratio:1;
  padding:18px
}
.team-middle>span {
  font:46px Arial,sans-serif
}
.team-middle strong {
  font-size:17px
}
.team-middle small {
  font:14px/1.4 Arial,sans-serif;
  text-align:center;
  letter-spacing:0;
  margin-top:7px
}
.studio-section {
  background:#eeeee5;
  padding-top:70px
}
.studio-gallery {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:20px;
  max-width:1600px;
  margin:auto
}
.studio-gallery img {
  height:300px
}
.studio-gallery img:nth-child(2) {
  padding-top:45px
}
.studio-gallery img:nth-child(3) {
  padding-bottom:45px
}
.studio-note {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  padding-block:70px 90px
}
.studio-note .eyebrow {
  margin-bottom:20px
}
.studio-note>p {
  align-self:center
}
.studio-note>.small-note {
  grid-column:1/-1
}
/* 新規: 制作イメージ */
.portfolio-intro {
  display:grid;
  grid-template-columns:42% 58%;
  align-items:center;
  gap:30px;
  padding-block:70px 100px;
  overflow:clip
}
.portfolio-intro h1 {
  margin:24px 0
}
.portfolio-intro .small-note {
  margin-top:26px
}
.post-fan {
  display:flex;
  align-items:center;
  position:relative;
  min-height:460px;
  padding:45px 35px 30px
}
.post-fan .post-card {
  position:relative;
  width:40%;
  flex-shrink:0
}
.fan-left {
  transform:rotate(-12deg);
  z-index:1
}
.fan-center {
  transform:translate(-35%,24px);
  z-index:2
}
.fan-right {
  transform:translate(-70%,-28px) rotate(10deg);
  z-index:0
}
.post-fan .post-copy .eyebrow {
  display:none
}
.post-fan .post-copy {
  padding:16px
}
.post-fan .post-copy p {
  margin:0
}
.post-fan .post-top {
  font-size:14px;
  padding:10px
}
.filter-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  border-block:1px solid var(--line);
  padding-block:24px
}
.filter-bar fieldset,.preview-switch {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  border:0;
  margin:0;
  padding:0
}
.filter-bar legend,.preview-switch legend {
  font-size:14px;
  font-weight:700;
  margin-bottom:14px
}
.filter-bar label,.preview-switch label {
  position:relative;
  cursor:pointer
}
.filter-bar input,.preview-switch input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.filter-bar label>span,.preview-switch label>span {
  display:block;
  min-height:46px;
  padding:10px 20px;
  border:1px solid #b8bfac;
  border-radius:40px;
  font-size:14px;
  font-weight:700
}
.filter-bar input:checked+span {
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}
.filter-bar input:focus-visible+span,.preview-switch input:focus-visible+span {
  outline:3px solid #768967;
  outline-offset:4px
}
.filter-bar>p {
  white-space:nowrap
}
.case-study {
  padding-block:80px;
  border-bottom:1px solid var(--line)
}
.case-heading {
  display:flex;
  align-items:center;
  gap:28px;
  margin-bottom:34px
}
.case-number {
  font:58px/1 Arial,sans-serif;
  letter-spacing:-.06em;
  align-self:flex-start;
  padding-top:20px
}
.case-heading h2 {
  font-size:32px;
  margin-top:12px
}
.concept-badge {
  margin-left:auto;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:30px;
  font-size:14px;
  white-space:nowrap
}
.case-showcase {
  position:relative;
  background:var(--case-color);
  padding:38px 28% 100px 38px;
  min-height:560px;
  overflow:hidden;
  border-radius:6px
}
.case-main-image>img {
  aspect-ratio:1.6;
  border-radius:3px
}
.case-showcase>.post-card {
  position:absolute;
  width:25%;
  right:5%;
  top:40px;
  transform:rotate(6deg);
  z-index:2
}
.case-inset {
  position:absolute;
  width:27%;
  left:41%;
  bottom:25px;
  border:8px solid var(--paper);
  transform:rotate(-5deg);
  box-shadow:0 10px 25px #24272118;
  z-index:3
}
.case-inset img {
  aspect-ratio:1.45
}
.case-watermark {
  font:700 46px/.95 Arial,sans-serif;
  letter-spacing:-.025em;
  position:absolute;
  left:40px;
  bottom:27px;
  color:#373d33a6
}
.case-notes {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:10%;
  padding-top:35px
}
.case-notes h3 {
  font-size:23px;
  margin:16px 0
}
.case-notes p {
  line-height:2
}
.case-notes .tag-group {
  margin-top:19px
}
.case-notes .text-link {
  font-size:16px
}
.editorial-section {
  background:var(--sage);
  margin-top:90px
}
.editorial-flow {
  display:grid;
  grid-template-columns:1fr 40px 1fr 40px 1fr;
  gap:22px;
  align-items:center
}
.editorial-flow>div {
  background:var(--paper);
  padding:28px;
  min-height:230px;
  border-radius:5px
}
.editorial-flow>div>span {
  font:32px Arial,sans-serif
}
.editorial-flow h3 {
  font-size:23px;
  margin:16px 0 10px
}
.editorial-flow p {
  font-size:16px
}
.editorial-flow>b {
  font:28px Arial,sans-serif;
  text-align:center
}
/* 既存改善: サービス */
.service-masthead {
  display:grid;
  grid-template-columns:42% 58%;
  gap:30px;
  padding-block:65px 75px;
  align-items:center
}
.service-masthead h1 {
  font-size:clamp(38px,4.4vw,58px);
  margin:24px 0
}
.service-masthead .tag-group {
  margin-top:30px
}
.service-hero-art {
  position:relative;
  padding:0 0 42px 18%;
}
.service-hero-art>img {
  aspect-ratio:1.12;
  border-radius:5px 5px 70px 5px
}
.service-hero-art>.post-card {
  position:absolute;
  width:42%;
  left:0;
  bottom:0;
  transform:rotate(-7deg)
}
.service-hero-art .post-copy .eyebrow {
  display:none
}
.service-hero-art .post-copy p {
  margin:0
}
.service-jump {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-block:1px solid var(--line)
}
.service-jump>a {
  display:flex;
  align-items:center;
  gap:17px;
  padding:24px;
  font-weight:700;
  font-size:16px
}
.service-jump>a+a {
  border-left:1px solid var(--line)
}
.service-jump>a>span {
  font:22px Arial,sans-serif
}
.service-jump>a>b {
  margin-left:auto
}
.service-jump>a:hover {
  background:var(--pale)
}
.strategy-layout {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:8%;
  align-items:center
}
.strategy-layout h2,.management-layout h2 {
  margin:24px 0
}
.check-list {
  margin-top:32px
}
.check-list>li {
  position:relative;
  padding:12px 0 12px 29px;
  border-bottom:1px solid var(--line);
  font-size:16px
}
.check-list>li:before {
  content:"✓";
  position:absolute;
  left:0;
  font-weight:700
}
.planning-canvas {
  background:#eeeee3;
  border:1px solid #dce0d1;
  border-radius:5px;
  padding:28px;
  box-shadow:12px 16px 0 #e8ebdf
}
.canvas-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:22px
}
.canvas-heading .tag {
  font-size:14px
}
.canvas-question {
  padding:16px 18px;
  border-bottom:1px dashed #c4c9b6;
  background:#ffffff80;
  margin:10px 0;
  display:grid;
  grid-template-columns:60px 1fr;
  align-items:center;
  gap:5px 13px
}
.canvas-question>span {
  font:700 18px Arial,sans-serif;
  grid-row:span 2
}
.canvas-question p {
  font-size:17px;
  font-weight:700
}
.canvas-question small {
  font-size:14px;
  color:var(--muted)
}
.canvas-photos {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-top:25px
}
.canvas-photos>img {
  height:105px;
  border:4px solid white
}
.swatch-stack {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px
}
.swatch-stack>i {
  background:#d0d6ba
}
.swatch-stack>i:nth-child(2) {
  background:#f4db4f
}
.swatch-stack>i:nth-child(3) {
  background:#ede8db
}
.swatch-stack>span {
  font:14px/1.3 Arial,sans-serif;
  letter-spacing:0;
  grid-column:1/-1
}
.creative-section {
  background:var(--ink);
  color:var(--paper)
}
.preview-switch {
  margin-bottom:30px
}
.preview-switch label>span {
  border-color:#727768;
  color:#f7f7f2;
  font-size:16px;
  padding-inline:26px
}
.preview-switch input:checked+span {
  background:var(--yellow);
  color:var(--ink);
  border-color:var(--yellow)
}
.creative-preview {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  background:#f1f0e8;
  color:var(--ink);
  border-radius:6px;
  overflow:hidden;
  margin-top:25px
}
.photo-preview {
  position:relative
}
.photo-preview img {
  height:100%;
  min-height:470px
}
.preview-explanation {
  padding:45px 38px;
  align-self:center
}
.preview-explanation h3 {
  font-size:28px;
  margin:20px 0
}
.preview-explanation p {
  line-height:2
}
.preview-explanation .tag-group {
  margin-top:25px
}
.light-note {
  color:#d6dccb;
  margin-top:20px
}
.series-preview {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:35px 22px;
  background:#d9e0cb;
  align-items:center
}
.series-preview>div {
  background:#fff;
  padding:8px;
  box-shadow:0 10px 20px #24272115
}
.series-preview>div:nth-child(1) {
  transform:translateY(-25px) rotate(-5deg)
}
.series-preview>div:nth-child(3) {
  transform:translateY(25px) rotate(5deg)
}
.series-preview img {
  aspect-ratio:.72
}
.series-preview span {
  font-size:14px;
  display:block;
  padding:10px 3px;
  line-height:1.6
}
.design-preview {
  background:#e9dfca;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.design-preview>img {
  height:220px
}
.design-preview>div {
  background:#fff;
  padding:24px
}
.design-preview strong {
  font-size:32px;
  line-height:1.6;
  display:block;
  margin:15px 0
}
.design-preview>div>span:last-child {
  font-size:14px
}
.management-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:8%;
  align-items:center
}
.management-cycle {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:35px
}
.management-cycle>span {
  display:flex;
  align-items:center;
  justify-content:center;
  width:90px;
  height:90px;
  border-radius:50%;
  background:var(--sage);
  font-size:16px;
  font-weight:700
}
.management-cycle>span:last-child {
  background:var(--yellow)
}
.review-board {
  background:#fff;
  border:1px solid var(--line);
  padding:30px;
  border-radius:5px;
  box-shadow:0 12px 35px #24272108
}
.review-feature {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:24px;
  align-items:center;
  background:var(--pale);
  padding:18px;
  margin-bottom:22px
}
.review-feature img {
  aspect-ratio:1
}
.review-feature h3 {
  font-size:25px;
  margin:10px 0 4px
}
.review-feature p {
  font-size:14px
}
.review-board li {
  display:flex;
  gap:19px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:16px
}
.review-board li>span {
  font-size:14px;
  flex-shrink:0;
  font-weight:700;
  background:var(--sage);
  padding:2px 9px
}
.review-board>.small-note {
  margin-top:18px
}
.scope {
  background:#eeeee5
}
.scope-paths {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.scope-paths>div {
  border:1px solid #c9cfbc;
  padding:30px;
  background:var(--paper);
  border-radius:5px;
  position:relative;
  overflow:hidden
}
.scope-paths>div>span {
  font:700 40px Arial,sans-serif;
  letter-spacing:-.04em;
  color:#768361
}
.scope-paths h3 {
  font-size:21px;
  margin:20px 0 12px
}
.scope-paths p {
  font-size:16px
}
.scope-note {
  display:flex;
  gap:45px;
  align-items:flex-start;
  margin-top:40px;
  border-top:1px solid #c9cfbc;
  padding-top:30px
}
.scope-note h3 {
  font-size:18px;
  flex-shrink:0
}
.scope-note p {
  font-size:16px
}
/* 新規: 進め方 */
.process-masthead {
  display:grid;
  grid-template-columns:47% 53%;
  gap:25px;
  padding-block:65px 90px;
  align-items:center
}
.process-masthead h1 {
  font-size:clamp(36px,4.1vw,54px);
  margin:24px 0
}
.process-masthead-photo {
  position:relative;
  padding-bottom:30px
}
.process-masthead-photo>img {
  aspect-ratio:1.13;
  border-radius:5px 5px 60px 5px
}
.route-ticket {
  position:absolute;
  bottom:0;
  right:25px;
  left:25px;
  background:var(--yellow);
  padding:23px 25px;
  box-shadow:0 8px 25px #24272113;
  transform:rotate(-3deg)
}
.route-ticket>span:last-child {
  display:block;
  font-size:16px;
  font-weight:700;
  margin-top:7px
}
.route-ticket b {
  padding:0 9px
}
.journey {
  padding-top:40px
}
.journey-step {
  border-top:1px solid var(--line)
}
.journey-step:last-child {
  border-bottom:1px solid var(--line)
}
.journey-step>summary {
  display:grid;
  grid-template-columns:65px 1fr 160px 36px;
  gap:35px;
  align-items:center;
  padding:24px 0;
  list-style:none
}
.journey-step>summary::-webkit-details-marker {
  display:none
}
.journey-num {
  font:44px Arial,sans-serif;
  letter-spacing:-.03em
}
.journey-step h3 {
  font-size:28px;
  margin-top:8px
}
.journey-step summary>img {
  aspect-ratio:1.6;
  border-radius:4px
}
.disclosure-mark {
  font:30px Arial,sans-serif;
  transition:transform .2s
}
.journey-step[open] .disclosure-mark {
  transform:rotate(45deg)
}
.journey-content {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:55px;
  padding:10px 70px 35px 100px
}
.journey-content h4 {
  margin-bottom:15px
}
.journey-content p {
  font-size:16px;
  line-height:2
}
.deliverable-note {
  background:var(--pale);
  padding:25px;
  align-self:start;
  transform:rotate(1deg)
}
.deliverable-note p {
  margin-top:12px
}
.monthly-section {
  background:var(--sage)
}
.month-board {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px
}
.month-board>article {
  border-top:2px solid #9da98c;
  padding-top:20px;
  min-width:0
}
.week-label {
  font:700 14px Arial,sans-serif;
  letter-spacing:.08em
}
.month-board h3 {
  font-size:23px;
  margin:16px 0 20px
}
.board-task {
  background:var(--paper);
  padding:14px;
  border-radius:5px;
  box-shadow:0 9px 25px #2427210a;
  min-height:300px;
  display:flex;
  align-items:flex-start;
  flex-direction:column
}
.board-task>img {
  aspect-ratio:1.35;
  border-radius:3px;
  margin-bottom:18px
}
.board-task strong {
  font-size:16px;
  margin-bottom:18px
}
.board-task>.tag {
  margin-top:auto;
  font-size:14px
}
.board-note {
  background:var(--yellow);
  padding:24px
}
.board-note>.note-sun {
  font-size:60px;
  margin-bottom:17px
}
.board-note p {
  font-size:14px;
  margin-bottom:20px
}
.role-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px
}
.role-pair article {
  background:var(--sage);
  padding:35px 40px;
  border-radius:5px
}
.role-pair article+article {
  background:var(--pale)
}
.role-pair h3 {
  font-size:27px;
  margin:17px 0 20px
}
.role-pair li {
  padding:12px 0 12px 26px;
  position:relative;
  border-top:1px solid #24272125;
  font-size:16px
}
.role-pair li:before {
  content:"✓";
  position:absolute;
  left:0
}
.role-footnote {
  margin-top:25px
}
.faq-section {
  background:#eeeee5
}
.faq-layout {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:80px
}
.faq-layout h2 {
  margin:24px 0
}
.faq-photo {
  aspect-ratio:1.6;
  max-width:320px;
  border-radius:5px;
  margin-top:35px
}
.faq-item {
  border-top:1px solid #c8cfbb
}
.faq-item:last-child {
  border-bottom:1px solid #c8cfbb
}
.faq-item summary {
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:27px 0;
  font-size:17px;
  font-weight:700;
  list-style:none;
  cursor:pointer
}
.faq-item summary::-webkit-details-marker {
  display:none
}
.faq-item summary>span {
  font:24px/1.6 Georgia,serif
}
.faq-item summary>b {
  font-size:20px;
  margin-left:auto;
  flex-shrink:0
}
.faq-item[open] summary>b {
  transform:rotate(45deg)
}
.faq-item p {
  padding:0 35px 27px;
  line-height:2
}
/* 既存改善: 相談と送信しないフォーム */
.contact-masthead {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6%;
  padding-block:65px 85px;
  align-items:center
}
.contact-masthead h1 {
  font-size:clamp(36px,3.9vw,53px);
  letter-spacing:.035em;
  margin:24px 0
}
.contact-masthead-image {
  position:relative;
  padding-bottom:45px
}
.contact-masthead-image>img {
  aspect-ratio:1.2;
  border-radius:50% 50% 4px 4px
}
.hello-note {
  position:absolute;
  left:-20px;
  right:25px;
  bottom:0;
  font:italic 54px Georgia,serif;
  padding:18px 30px;
  background:var(--yellow);
  transform:rotate(-4deg);
  border-radius:4px
}
.hello-note small {
  font:700 14px/1.5 "Hiragino Kaku Gothic ProN",sans-serif;
  display:block;
  margin-top:5px;
  letter-spacing:.04em
}
.contact-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px
}
.contact-tags span {
  font-size:14px;
  padding:5px 12px;
  background:var(--sage);
  border-radius:30px
}
.form-section {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:7%;
  padding-bottom:100px;
  align-items:start
}
.form-aside {
  padding-top:25px;
  border-top:1px solid var(--line)
}
.aside-photo {
  aspect-ratio:1.65;
  border-radius:4px;
  margin-bottom:25px
}
.form-aside h2 {
  font-size:28px;
  margin:20px 0
}
.demo-note {
  font-size:14px;
  color:var(--muted);
  line-height:2.1
}
.consultation-tips {
  background:var(--pale);
  padding:23px;
  margin-top:25px;
  border-radius:4px
}
.consultation-tips h3 {
  font-size:16px;
  margin-bottom:13px
}
.consultation-tips li {
  font-size:14px;
  padding:4px 0 4px 17px;
  position:relative
}
.consultation-tips li:before {
  content:"•";
  position:absolute;
  left:0
}
.form-aside>a {
  display:inline-block;
  font-size:14px;
  margin-top:24px
}
.form-content {
  min-width:0;
  background:#fff;
  border:1px solid #dfe2d6;
  box-shadow:0 15px 45px #24272107;
  border-radius:6px;
  padding:38px
}
.form-progress {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  padding-bottom:32px;
  margin-bottom:30px;
  border-bottom:1px solid var(--line)
}
.form-progress li {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--muted)
}
.form-progress li>span {
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  background:#eeeee5;
  font:14px Arial,sans-serif
}
.form-progress li[aria-current] {
  font-weight:700;
  color:var(--ink)
}
.form-progress li[aria-current]>span {
  background:var(--yellow)
}
.form-instruction {
  font-size:14px;
  margin-bottom:28px
}
.field {
  margin-bottom:28px
}
.field label {
  display:flex;
  gap:14px;
  align-items:center;
  font-size:16px;
  font-weight:700;
  margin-bottom:12px
}
.required,.optional {
  font-size:14px;
  line-height:1.6;
  font-weight:400
}
.required {
  background:var(--pale);
  padding:2px 8px;
  border-radius:3px
}
.optional {
  color:var(--muted)
}
input[type=text],input[type=email],select,textarea {
  width:100%;
  background:#fafbf7;
  border:1px solid #b4b9ad;
  border-radius:3px;
  min-height:54px;
  padding:13px 16px;
  font-size:16px;
  line-height:1.7;
  letter-spacing:.03em
}
input::placeholder,textarea::placeholder {
  color:#74796e
}
textarea {
  resize:vertical;
  min-height:180px
}
.field-help {
  margin-top:8px
}
.field-meta {
  display:flex;
  gap:15px;
  justify-content:space-between;
  font-size:14px;
  line-height:1.7;
  margin-top:8px;
  color:var(--muted)
}
.field-meta p+p {
  margin:0;
  flex-shrink:0
}
.check-field {
  display:flex;
  align-items:flex-start;
  gap:13px;
  font-size:14px;
  margin:32px 0;
  cursor:pointer
}
.check-field input {
  width:20px;
  height:20px;
  accent-color:#5f6f4c;
  margin:4px 0 0;
  flex-shrink:0
}
.form-submit {
  width:100%;
  min-height:62px;
  font-size:17px;
  justify-content:space-between;
  padding-inline:30px
}
.form-submit+.field-help {
  text-align:center
}
.notice {
  background:var(--pale);
  padding:22px 26px;
  font-size:16px;
  border-radius:3px
}
.form-preview>.eyebrow {
  margin-bottom:20px
}
.form-preview h2 {
  font-size:28px;
  margin-bottom:24px
}
.form-preview dl {
  margin:30px 0
}
.form-preview dt {
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  margin-top:22px
}
.form-preview dd {
  margin:7px 0 0;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
/* タブレット */
@media(max-width:1100px) {
  .site-header {
    padding-inline:24px;
    gap:20px
  }
  .brand-name {
    font-size:25px
  }
  .brand-mark {
    width:42px
  }
  .main-nav {
    gap:19px
  }
  .nav-contact {
    padding-inline:18px;
    gap:12px
  }
  .section-heading {
    align-items:flex-start;
    gap:24px
  }
  .section-heading h2 {
    font-size:32px
  }
  .home-about {
    gap:6%
  }
  .home-about-art {
    padding-right:20px
  }
  .hello-word {
    font-size:30px
  }
  .home-about-copy h2 {
    font-size:27px
  }
  .visual-service-row {
    grid-template-columns:30px 120px 1fr 1fr 45px;
    gap:18px
  }
  .visual-service-row h3 {
    font-size:20px
  }
  .value-mosaic {
    gap:30px
  }
  .value-secondary {
    grid-template-columns:1fr
  }
  .value-secondary>img {
    height:210px;
    min-height:0
  }
  .value-secondary>div {
    padding-top:0
  }
  .team-diagram {
    grid-template-columns:1fr 160px 1fr;
    padding:25px;
    gap:20px
  }
  .portfolio-intro,.service-masthead,.process-masthead {
    grid-template-columns:1fr 1.1fr;
    gap:24px
  }
  .portfolio-intro {
    padding-bottom:70px
  }
  .post-fan .post-top {
    font-size:14px
  }
  .post-fan .post-avatar {
    display:none
  }
  .post-fan .post-top>span:last-child {
    display:none
  }
  .post-copy .eyebrow {
    display:none
  }
  .case-showcase {
    min-height:480px
  }
  .case-heading h2 {
    font-size:28px
  }
  .case-notes {
    gap:6%
  }
  .case-watermark {
    font-size:40px
  }
  .strategy-layout,.management-layout {
    gap:6%
  }
  .preview-explanation {
    padding:30px 27px
  }
  .preview-explanation h3 {
    font-size:25px
  }
  .creative-preview {
    grid-template-columns:1.25fr 1fr
  }
  .month-board {
    gap:15px
  }
  .board-task {
    min-height:300px
  }
  .scope-paths {
    gap:16px
  }
  .scope-paths>div {
    padding:25px
  }
  .scope-paths h3 {
    font-size:19px
  }
  .faq-layout {
    gap:45px
  }
  .contact-masthead {
    gap:5%
  }
  .form-content {
    padding:28px
  }
  .footer-bottom {
    flex-direction:column;
    gap:14px
  }
}
@media(max-width:900px) {
  .section {
    padding-block:85px
  }
  .site-header {
    flex-wrap:wrap;
    min-height:84px;
    padding-block:15px
  }
  .brand-mark {
    height:42px
  }
  .main-nav {
    width:100%;
    flex-wrap:wrap;
    gap:18px;
    padding:20px 0
  }
  .js .menu-toggle {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:58px;
    min-height:50px;
    padding:4px
  }
  .menu-lines {
    display:block;
    width:30px;
    height:12px;
    border-top:1.5px solid var(--ink);
    border-bottom:1.5px solid var(--ink);
    transition:transform .2s
  }
  .menu-label {
    font:700 14px/1 Arial,sans-serif;
    letter-spacing:.06em
  }
  .menu-toggle[aria-expanded=true] .menu-lines {
    transform:rotate(-25deg)
  }
  .js .main-nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    padding:20px 28px 30px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 15px #24272112;
    max-height:calc(100svh - 84px);
    overflow-y:auto
  }
  .js .main-nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .js .main-nav>a:not(.button) {
    padding:17px 0;
    border-bottom:1px solid var(--line);
    font-size:16px
  }
  .js .main-nav .button {
    margin-top:20px;
    max-width:280px
  }
  .js .main-nav>a:after {
    display:none
  }
  .hero {
    height:690px;
    min-height:0
  }
  .hero h1 {
    font-size:45px
  }
  .hero-vertical {
    right:35px;
    font-size:16px
  }
  .hero-copy {
    bottom:60px
  }
  .hero-caption {
    gap:20px;
    align-items:flex-start
  }
  .hero-caption>p:last-child {
    max-width:250px;
    text-align:right
  }
  .section-heading {
    flex-direction:column;
    gap:22px
  }
  .section-heading>.text-link {
    margin-top:0
  }
  .home-about {
    grid-template-columns:1fr;
    gap:55px
  }
  .home-about-art {
    max-width:600px;
    width:85%;
    margin:auto;
    padding-bottom:50px
  }
  .about-large {
    aspect-ratio:1.4
  }
  .about-small {
    width:47%
  }
  .home-about-copy {
    max-width:650px
  }
  .home-about-copy h2 {
    font-size:32px
  }
  .home-about-copy>p br {
    display:none
  }
  .home-about-copy .eyebrow {
    margin-bottom:20px
  }
  .hello-word {
    font-size:40px
  }
  .visual-service-row {
    grid-template-columns:30px 130px 1fr 45px
  }
  .visual-service-row>p {
    grid-column:3;
    grid-row:2
  }
  .visual-service-row {
    row-gap:8px
  }
  .visual-service-row>img {
    grid-row:span 2
  }
  .visual-service-row>.circle-arrow {
    grid-column:4;
    grid-row:1/3
  }
  .home-case-grid {
    gap:35px
  }
  .home-case h3 {
    font-size:27px
  }
  .home-process-grid {
    gap:30px
  }
  .mini-steps {
    gap:20px
  }
  .mini-steps h3 {
    font-size:19px
  }
  .contact-ribbon {
    grid-template-columns:34% 66%
  }
  .ribbon-content {
    padding:48px 9%
  }
  .ribbon-content h2 {
    font-size:28px
  }
  .ribbon-photo img {
    min-height:380px
  }
  .footer-top {
    flex-wrap:wrap;
    gap:28px
  }
  .back-top {
    margin-left:0
  }
  .masthead-title {
    grid-template-columns:1fr;
    gap:20px
  }
  .masthead-title .eyebrow {
    padding:0
  }
  .masthead-title h1 {
    font-size:46px
  }
  .masthead-image>img {
    aspect-ratio:1.8
  }
  .philosophy {
    grid-template-columns:1fr;
    gap:40px
  }
  .big-serif {
    font-size:62px
  }
  .philosophy h2 {
    font-size:30px
  }
  .value-primary>img {
    aspect-ratio:1
  }
  .value-mosaic {
    gap:25px
  }
  .value-primary {
    grid-row:auto
  }
  .value-note {
    grid-column:1/-1
  }
  .value-secondary {
    display:block
  }
  .value-secondary>img {
    height:auto;
    aspect-ratio:1
  }
  .value-secondary>div {
    padding-top:25px
  }
  .value-secondary h3 {
    font-size:23px
  }
  .team-diagram {
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    padding:35px
  }
  .team-middle {
    width:170px
  }
  .team-middle>span {
    transform:rotate(90deg)
  }
  .studio-gallery {
    gap:15px
  }
  .studio-gallery img {
    height:230px
  }
  .studio-note {
    gap:30px
  }
  .portfolio-intro {
    grid-template-columns:1fr;
    padding-top:48px
  }
  .portfolio-intro h1 {
    font-size:48px
  }
  .post-fan {
    max-width:650px;
    width:92%;
    margin:auto;
    min-height:450px
  }
  .post-fan .post-card {
    width:40%
  }
  .fan-center {
    transform:translate(-35%,24px)
  }
  .fan-right {
    transform:translate(-70%,-18px) rotate(10deg)
  }
  .filter-bar {
    align-items:flex-start;
    flex-direction:column;
    gap:15px
  }
  .filter-bar fieldset {
    gap:8px
  }
  .case-heading {
    gap:22px;
    flex-wrap:wrap
  }
  .case-heading h2 {
    font-size:28px
  }
  .concept-badge {
    margin-left:0
  }
  .case-showcase {
    padding:25px 28% 100px 25px;
    min-height:460px
  }
  .case-showcase>.post-card {
    width:31%;
    right:4%;
    top:35px
  }
  .case-inset {
    width:34%;
    left:34%
  }
  .case-watermark {
    left:25px;
    font-size:35px
  }
  .case-notes {
    grid-template-columns:1fr;
    gap:28px
  }
  .editorial-flow {
    gap:14px;
    grid-template-columns:1fr 25px 1fr 25px 1fr
  }
  .editorial-flow>div {
    padding:22px;
    min-height:250px
  }
  .editorial-flow h3 {
    font-size:20px
  }
  .service-masthead {
    grid-template-columns:1fr;
    padding-top:48px;
    gap:45px
  }
  .service-masthead h1 {
    font-size:48px
  }
  .service-hero-art {
    max-width:650px;
    width:90%;
    margin:auto
  }
  .service-hero-art>img {
    aspect-ratio:1.5
  }
  .service-hero-art>.post-card {
    width:35%
  }
  .service-jump>a {
    font-size:14px;
    gap:10px;
    padding:20px 14px
  }
  .service-jump>a>span {
    font-size:18px
  }
  .strategy-layout,.management-layout {
    grid-template-columns:1fr;
    gap:45px
  }
  .planning-canvas {
    max-width:650px;
    width:100%
  }
  .creative-preview {
    grid-template-columns:1.25fr 1fr
  }
  .preview-explanation {
    padding:28px 24px
  }
  .preview-explanation h3 {
    font-size:23px
  }
  .photo-preview img {
    min-height:440px
  }
  .series-preview {
    gap:7px;
    padding:30px 14px
  }
  .series-preview span {
    font-size:14px;
    padding:8px 1px
  }
  .design-preview {
    padding:22px
  }
  .design-preview>img {
    height:180px
  }
  .design-preview strong {
    font-size:25px
  }
  .scope-paths {
    grid-template-columns:1fr
  }
  .scope-paths>div {
    display:grid;
    grid-template-columns:130px 1fr;
    align-items:center;
    gap:10px 25px
  }
  .scope-paths h3 {
    font-size:21px;
    margin:0
  }
  .scope-paths p {
    grid-column:2
  }
  .scope-paths>div>span {
    grid-row:span 2;
    font-size:33px
  }
  .process-masthead {
    grid-template-columns:1fr;
    gap:45px;
    padding-top:48px
  }
  .process-masthead h1 {
    font-size:46px
  }
  .process-masthead-photo>img {
    aspect-ratio:1.75
  }
  .journey-content {
    padding-left:85px;
    padding-right:0;
    gap:25px
  }
  .journey-step>summary {
    grid-template-columns:50px 1fr 120px 25px;
    gap:24px
  }
  .journey-step h3 {
    font-size:24px
  }
  .journey-num {
    font-size:36px
  }
  .month-board {
    grid-template-columns:1fr 1fr;
    gap:35px
  }
  .board-task {
    min-height:340px
  }
  .board-task>img {
    aspect-ratio:1.6
  }
  .board-note {
    min-height:340px
  }
  .role-pair {
    gap:24px
  }
  .role-pair article {
    padding:28px
  }
  .role-pair h3 {
    font-size:24px
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .faq-photo {
    display:none
  }
  .contact-masthead {
    grid-template-columns:1fr;
    gap:40px;
    padding-top:48px
  }
  .contact-masthead h1 {
    font-size:44px
  }
  .contact-masthead-image {
    width:85%;
    max-width:600px;
    margin:auto
  }
  .contact-masthead-image>img {
    aspect-ratio:1.7;
    border-radius:140px 140px 4px 4px
  }
  .form-section {
    grid-template-columns:1fr;
    gap:36px
  }
  .form-aside {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px 30px
  }
  .form-aside>.aside-photo {
    grid-row:span 3;
    margin:0;
    height:100%;
    min-height:240px;
    aspect-ratio:auto
  }
  .form-aside>.eyebrow {
    align-self:end
  }
  .form-aside h2 {
    margin:0
  }
  .form-aside>.demo-note {
    grid-column:2;
    font-size:14px
  }
  .form-aside>.consultation-tips {
    margin:0
  }
  .form-aside>a {
    margin:0;
    align-self:center
  }
  .form-aside .demo-note br {
    display:none
  }
  .form-content {
    padding:35px
  }
}
/* スマートフォン */
@media(max-width:600px) {
  :root {
    --gutter:24px
  }
  html {
    scroll-padding-top:100px
  }
  body {
    letter-spacing:.035em
  }
  .section {
    padding-block:72px
  }
  .site-header {
    padding-inline:21px;
    min-height:82px
  }
  .brand-name {
    font-size:24px
  }
  .brand-english {
    font-size:14px;
    letter-spacing:.1em
  }
  .brand {
    gap:8px
  }
  .brand-mark {
    width:39px
  }
  .hero {
    margin-inline:12px;
    height:calc(100svh - 102px);
    min-height:620px;
    max-height:820px;
    border-radius:3px 3px 40px 3px
  }
  .hero-photo {
    object-position:59% center
  }
  .hero-shade {
    background:linear-gradient(0deg,rgba(15,25,19,.68),transparent 80%),linear-gradient(90deg,rgba(20,29,22,.36),transparent)
  }
  .hero-kicker {
    font-size:14px;
    left:23px;
    top:28px;
    line-height:1.55
  }
  .hero-vertical {
    font-size:14px;
    right:20px;
    top:25px;
    padding:14px 8px;
    line-height:1.9;
    letter-spacing:.13em
  }
  .hero-copy {
    left:24px;
    right:20px;
    bottom:93px
  }
  .hero h1 {
    font-size:clamp(28px,7.8vw,44px);
    line-height:1.85;
    letter-spacing:.035em;
    white-space:nowrap
  }
  .hero-copy>p {
    font-size:16px;
    line-height:1.9;
    letter-spacing:.08em;
    margin-top:16px
  }
  .mobile-only {
    display:block
  }
  .desktop-only {
    display:none
  }
  .hero-scroll {
    writing-mode:horizontal-tb;
    right:23px;
    bottom:30px;
    gap:12px;
    font-size:14px
  }
  .scroll-line {
    font-size:23px
  }
  .hero-caption {
    padding-top:22px;
    display:block
  }
  .hero-caption>p:first-child {
    font-size:14px;
    letter-spacing:.03em
  }
  .hero-caption>p:last-child {
    font-size:14px;
    text-align:left;
    max-width:none;
    margin-top:5px;
    color:var(--muted)
  }
  .section-heading {
    margin-bottom:32px;
    gap:22px
  }
  .section-heading h2 {
    font-size:28px;
    letter-spacing:.04em
  }
  .section-heading>p {
    font-size:16px;
    line-height:2
  }
  .text-link {
    font-size:14px;
    gap:20px;
    margin-top:24px
  }
  .circle-arrow {
    width:45px;
    height:45px;
    flex-basis:45px
  }
  .home-about {
    gap:40px;
    padding-top:85px
  }
  .home-about-art {
    width:94%;
    padding-bottom:52px;
    padding-right:17px
  }
  .about-large {
    aspect-ratio:1.12;
    border-radius:4px 4px 40px 4px
  }
  .about-small {
    border-width:6px;
    width:58%;
    right:-4%
  }
  .round-note {
    width:100px;
    height:100px;
    font-size:14px;
    left:-12px;
    bottom:20px
  }
  .hello-word {
    font-size:34px;
    margin:20px 0 22px
  }
  .home-about-copy h2 {
    font-size:26px;
    line-height:1.75
  }
  .home-about-copy>p {
    font-size:16px
  }
  .visual-service-row {
    grid-template-columns:72px 1fr 37px;
    gap:9px 15px;
    padding:24px 0;
    position:relative
  }
  .visual-service-row>.service-num {
    display:none
  }
  .visual-service-row>img {
    grid-column:1;
    grid-row:1/3;
    aspect-ratio:.8;
    height:100%;
    max-height:136px
  }
  .visual-service-row>div {
    grid-column:2
  }
  .visual-service-row h3 {
    font-size:20px;
    line-height:1.6
  }
  .visual-service-row>p {
    grid-column:2/4;
    grid-row:2;
    font-size:16px;
    line-height:1.7
  }
  .visual-service-row .eyebrow {
    font-size:14px;
    letter-spacing:.07em
  }
  .visual-service-row>.circle-arrow {
    grid-column:3;
    grid-row:1;
    width:37px;
    height:37px;
    flex-basis:37px;
    font-size:23px
  }
  .home-case-grid {
    grid-template-columns:1fr;
    gap:42px
  }
  .home-case:nth-child(2) {
    padding-top:0
  }
  .home-case-image>img {
    aspect-ratio:1.15
  }
  .home-case h3 {
    font-size:27px
  }
  .floating-caption {
    font-size:18px;
    left:18px;
    bottom:23px
  }
  .image-tag {
    font-size:14px;
    left:14px;
    top:14px;
    padding:5px 9px
  }
  .home-process-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .process-photo img {
    aspect-ratio:1.4;
    min-height:0
  }
  .mini-steps {
    grid-template-columns:1fr;
    gap:0
  }
  .mini-steps li {
    display:flex;
    gap:25px;
    padding:23px 0
  }
  .mini-steps li>span {
    font-size:32px;
    flex:0 0 42px
  }
  .mini-steps h3 {
    margin:0 0 8px;
    font-size:21px
  }
  .mini-steps p {
    font-size:16px
  }
  .contact-ribbon {
    grid-template-columns:1fr
  }
  .ribbon-photo img {
    height:220px;
    min-height:0;
    object-position:center 56%
  }
  .ribbon-content {
    padding:45px 24px 55px
  }
  .ribbon-content h2 {
    font-size:30px
  }
  .ribbon-content .eyebrow {
    font-size:14px;
    letter-spacing:.06em
  }
  .ribbon-content>p {
    font-size:16px
  }
  .site-footer {
    padding-top:40px
  }
  .footer-top {
    flex-direction:column;
    align-items:flex-start;
    gap:24px
  }
  .footer-top>p {
    font-size:14px
  }
  .footer-nav {
    gap:14px 24px
  }
  .footer-bottom {
    font-size:14px;
    line-height:1.9
  }
  .breadcrumb {
    padding-top:20px
  }
  .photo-masthead {
    padding-top:40px
  }
  .masthead-title {
    gap:18px;
    margin-bottom:30px
  }
  .masthead-title h1 {
    font-size:clamp(29px,8.2vw,38px);
    letter-spacing:.045em
  }
  .masthead-image>img {
    aspect-ratio:.95;
    border-radius:5px 5px 40px 5px
  }
  .photo-stamp {
    width:110px;
    height:110px;
    right:14px;
    bottom:90px;
    font-size:19px
  }
  .photo-caption {
    left:12px;
    bottom:13px;
    right:12px;
    font-size:14px;
    line-height:1.5;
    letter-spacing:0;
    padding:6px 9px
  }
  .philosophy {
    gap:35px
  }
  .big-serif {
    font-size:57px;
    margin-top:25px
  }
  .philosophy h2 {
    font-size:27px;
    line-height:1.8
  }
  .philosophy p:not(.big-serif) {
    font-size:16px
  }
  .philosophy p>br {
    display:none
  }
  .value-mosaic {
    grid-template-columns:1fr;
    gap:35px
  }
  .value-primary>img {
    aspect-ratio:1.2
  }
  .value-secondary {
    display:grid;
    grid-template-columns:40% 1fr;
    gap:20px
  }
  .value-secondary>img {
    height:100%;
    min-height:255px;
    aspect-ratio:auto
  }
  .value-secondary>div {
    padding:0
  }
  .value-secondary h3 {
    font-size:22px
  }
  .value-secondary p>br {
    display:none
  }
  .value-note {
    grid-column:auto;
    padding:28px
  }
  .value-mosaic h3 {
    font-size:24px
  }
  .value-mosaic .eyebrow {
    font-size:14px;
    letter-spacing:.035em
  }
  .value-note .note-sun {
    font-size:65px;
    right:12px;
    top:25px
  }
  .team-diagram {
    padding:28px 20px;
    gap:23px
  }
  .team-side h3 {
    font-size:25px
  }
  .team-middle {
    width:155px
  }
  .studio-section {
    padding-top:35px
  }
  .studio-gallery {
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:0 12px
  }
  .studio-gallery img {
    height:180px;
    padding:0!important;
    border-radius:3px
  }
  .studio-gallery img:first-child {
    grid-column:1/-1;
    height:240px
  }
  .studio-note {
    grid-template-columns:1fr;
    padding-block:45px 65px;
    gap:25px
  }
  .studio-note h2 {
    font-size:28px
  }
  .studio-note>.small-note {
    grid-column:auto
  }
  .portfolio-intro {
    padding-top:40px;
    padding-bottom:40px;
    gap:5px
  }
  .portfolio-intro h1 {
    font-size:42px;
    margin:22px 0
  }
  .portfolio-intro .small-note {
    font-size:14px
  }
  .post-fan {
    width:100%;
    min-height:390px;
    padding:40px 18px 45px
  }
  .post-fan .post-card {
    width:57%
  }
  .fan-left {
    transform:rotate(-9deg)
  }
  .fan-center {
    transform:translate(-39%,27px) rotate(5deg);
    z-index:3
  }
  .fan-right {
    display:none
  }
  .post-fan .post-top {
    font-size:14px
  }
  .post-fan .post-copy {
    padding:13px
  }
  .post-fan .post-copy p {
    font-size:16px
  }
  .post-copy .eyebrow {
    display:none
  }
  .filter-bar {
    padding-block:22px;
    gap:15px
  }
  .filter-bar label>span {
    font-size:14px;
    padding:9px 15px
  }
  .filter-bar legend {
    margin-bottom:12px
  }
  .case-study {
    padding-block:50px
  }
  .case-heading {
    gap:13px 19px;
    margin-bottom:25px
  }
  .case-number {
    font-size:38px;
    padding-top:16px
  }
  .case-heading>div {
    flex:1;
    min-width:0
  }
  .case-heading h2 {
    font-size:24px;
    letter-spacing:.035em
  }
  .case-heading .eyebrow {
    font-size:14px;
    letter-spacing:.04em
  }
  .concept-badge {
    font-size:14px;
    padding:5px 11px;
    margin-left:0
  }
  .case-showcase {
    padding:18px 18px 255px;
    min-height:0;
    overflow:hidden
  }
  .case-main-image>img {
    aspect-ratio:1.3
  }
  .case-showcase>.post-card {
    width:49%;
    right:23px;
    top:auto;
    bottom:28px;
    transform:rotate(5deg)
  }
  .case-showcase .post-top {
    font-size:14px;
    padding:10px
  }
  .case-showcase .post-avatar {
    display:none
  }
  .case-showcase .post-top>span:last-child {
    display:none
  }
  .case-showcase .post-copy {
    padding:11px
  }
  .case-showcase .post-copy p {
    font-size:14px;
    line-height:1.6;
    margin:0
  }
  .case-showcase .post-rule {
    margin-top:10px
  }
  .case-inset {
    width:43%;
    left:17px;
    bottom:150px;
    border-width:5px
  }
  .case-watermark {
    left:20px;
    bottom:44px;
    font-size:29px;
    max-width:39%;
    overflow-wrap:anywhere
  }
  .case-notes {
    padding-top:27px;
    gap:25px
  }
  .case-notes h3 {
    font-size:22px;
    margin:13px 0
  }
  .case-notes .text-link {
    font-size:14px
  }
  .editorial-section {
    margin-top:60px
  }
  .editorial-flow {
    grid-template-columns:1fr;
    gap:15px
  }
  .editorial-flow>div {
    min-height:0;
    padding:25px;
    display:grid;
    grid-template-columns:44px 1fr;
    gap:8px 18px
  }
  .editorial-flow>div>span {
    grid-row:span 2;
    font-size:30px;
    padding-top:3px
  }
  .editorial-flow h3 {
    font-size:23px;
    margin:0
  }
  .editorial-flow p {
    grid-column:2
  }
  .editorial-flow>b {
    transform:rotate(90deg);
    font-size:26px
  }
  .service-masthead {
    padding-top:40px;
    padding-bottom:45px;
    gap:35px
  }
  .service-masthead h1 {
    font-size:42px
  }
  .service-hero-art {
    width:100%;
    padding-left:15%;
    padding-bottom:35px
  }
  .service-hero-art>img {
    aspect-ratio:.9;
    border-radius:5px 5px 45px 5px
  }
  .service-hero-art>.post-card {
    width:52%;
    bottom:0
  }
  .service-hero-art .post-copy {
    padding:13px
  }
  .service-hero-art .post-top {
    font-size:14px;
    padding:10px
  }
  .service-hero-art .post-avatar {
    display:none
  }
  .service-hero-art .post-copy p {
    font-size:14px
  }
  .service-jump {
    grid-template-columns:1fr
  }
  .service-jump>a {
    font-size:16px;
    padding:20px 0;
    gap:20px
  }
  .service-jump>a+a {
    border-left:0;
    border-top:1px solid var(--line)
  }
  .strategy-layout,.management-layout {
    gap:35px
  }
  .strategy-layout h2,.management-layout h2 {
    font-size:29px;
    margin:21px 0
  }
  .strategy-layout>div>p br {
    display:none
  }
  .check-list>li {
    font-size:16px
  }
  .planning-canvas {
    padding:20px 16px;
    box-shadow:7px 9px 0 #e8ebdf;
    max-width:calc(100% - 7px)
  }
  .canvas-heading {
    gap:13px;
    align-items:flex-start;
    flex-wrap:wrap;
    margin-bottom:17px
  }
  .canvas-heading .eyebrow,.canvas-heading .tag {
    font-size:14px
  }
  .canvas-question {
    padding:15px 13px;
    grid-template-columns:44px 1fr;
    gap:6px 10px
  }
  .canvas-question>span {
    font-size:16px
  }
  .canvas-question p {
    font-size:16px;
    line-height:1.6
  }
  .canvas-question small {
    grid-column:1/-1;
    font-size:14px
  }
  .canvas-photos {
    gap:8px
  }
  .canvas-photos>img {
    height:80px;
    border-width:3px
  }
  .swatch-stack>span {
    font-size:14px;
    overflow-wrap:anywhere
  }
  .creative-section .section-heading>p {
    font-size:16px
  }
  .preview-switch {
    gap:8px
  }
  .preview-switch label>span {
    font-size:14px;
    padding:10px 15px
  }
  .creative-preview {
    grid-template-columns:1fr
  }
  .photo-preview img {
    aspect-ratio:1.05;
    min-height:0
  }
  .preview-explanation {
    padding:28px 25px 32px
  }
  .preview-explanation h3 {
    font-size:26px
  }
  .preview-explanation p {
    font-size:16px
  }
  .series-preview {
    padding:45px 17px;
    gap:10px;
    min-height:320px
  }
  .series-preview>div {
    padding:5px
  }
  .series-preview span {
    font-size:14px;
    line-height:1.5;
    padding:8px 2px
  }
  .design-preview {
    padding:24px
  }
  .design-preview>img {
    height:auto;
    aspect-ratio:1.4
  }
  .design-preview>div {
    padding:22px
  }
  .design-preview strong {
    font-size:28px
  }
  .management-cycle {
    gap:10px
  }
  .management-cycle>span {
    width:75px;
    height:75px;
    font-size:14px
  }
  .management-cycle>b {
    font-size:16px
  }
  .review-board {
    padding:22px 18px
  }
  .review-feature {
    grid-template-columns:90px 1fr;
    gap:16px;
    padding:14px
  }
  .review-feature h3 {
    font-size:22px;
    line-height:1.6
  }
  .review-feature .eyebrow {
    font-size:14px;
    letter-spacing:.02em
  }
  .review-feature p {
    font-size:14px
  }
  .review-board li {
    font-size:16px;
    gap:12px;
    align-items:flex-start
  }
  .scope-paths>div {
    display:block;
    padding:26px
  }
  .scope-paths>div>span {
    font-size:36px
  }
  .scope-paths h3 {
    font-size:23px;
    margin:15px 0 8px
  }
  .scope-note {
    flex-direction:column;
    gap:14px;
    margin-top:30px;
    padding-top:25px
  }
  .process-masthead {
    padding-top:40px;
    padding-bottom:50px;
    gap:35px
  }
  .process-masthead h1 {
    font-size:clamp(30px,8.5vw,39px)
  }
  .process-masthead-photo>img {
    aspect-ratio:1.05;
    border-radius:4px 4px 40px 4px
  }
  .route-ticket {
    left:10px;
    right:10px;
    padding:17px 18px
  }
  .route-ticket>span:last-child {
    font-size:14px;
    letter-spacing:0
  }
  .route-ticket b {
    padding:0 4px
  }
  .journey {
    padding-top:30px
  }
  .journey-step>summary {
    grid-template-columns:33px 1fr 25px;
    gap:14px;
    padding:25px 0
  }
  .journey-step summary>img {
    display:none
  }
  .journey-num {
    font-size:29px
  }
  .journey-step h3 {
    font-size:21px;
    letter-spacing:.04em;
    margin-top:5px
  }
  .journey-step .eyebrow {
    font-size:14px
  }
  .disclosure-mark {
    font-size:25px
  }
  .journey-content {
    grid-template-columns:1fr;
    gap:20px;
    padding:0 0 28px 47px
  }
  .journey-content h4 {
    font-size:18px
  }
  .journey-content p {
    font-size:16px
  }
  .deliverable-note {
    padding:19px
  }
  .deliverable-note .eyebrow {
    font-size:14px;
    letter-spacing:.04em
  }
  .month-board {
    gap:28px 17px
  }
  .month-board h3 {
    font-size:21px;
    margin:12px 0 16px
  }
  .board-task {
    padding:11px;
    min-height:280px
  }
  .board-task>img {
    aspect-ratio:1
  }
  .board-task strong {
    font-size:16px;
    line-height:1.7;
    margin-bottom:14px
  }
  .board-task .tag {
    font-size:14px;
    padding:4px 7px
  }
  .board-note {
    padding:18px;
    min-height:280px
  }
  .board-note>.note-sun {
    font-size:45px
  }
  .board-note p {
    font-size:14px
  }
  .role-pair {
    grid-template-columns:1fr;
    gap:22px
  }
  .role-pair article {
    padding:27px
  }
  .role-pair h3 {
    font-size:25px
  }
  .faq-layout {
    gap:25px
  }
  .faq-item summary {
    font-size:16px;
    gap:12px;
    padding:23px 0
  }
  .faq-item summary>span {
    font-size:22px
  }
  .faq-item p {
    padding:0 0 24px 34px;
    font-size:16px
  }
  .contact-masthead {
    padding-top:40px;
    padding-bottom:60px
  }
  .contact-masthead h1 {
    font-size:clamp(28px,8vw,39px);
    letter-spacing:.02em
  }
  .contact-masthead p {
    font-size:16px
  }
  .contact-masthead p br {
    display:none
  }
  .contact-masthead-image {
    width:92%;
    padding-bottom:43px
  }
  .contact-masthead-image>img {
    aspect-ratio:1.3;
    border-radius:100px 100px 3px 3px
  }
  .hello-note {
    left:-10px;
    right:10px;
    font-size:43px;
    padding:16px 23px
  }
  .form-section {
    padding-bottom:70px;
    gap:30px
  }
  .form-aside {
    grid-template-columns:1fr;
    gap:16px
  }
  .form-aside>.aside-photo {
    grid-row:auto;
    height:auto;
    aspect-ratio:1.75;
    min-height:0
  }
  .form-aside>.eyebrow {
    margin-top:5px
  }
  .form-aside h2 {
    font-size:27px
  }
  .form-aside h2 br {
    display:none
  }
  .form-aside>.demo-note {
    grid-column:auto
  }
  .form-aside>.consultation-tips {
    padding:20px;
    margin-top:5px
  }
  .form-aside>a {
    margin-top:5px
  }
  .form-content {
    padding:24px 18px
  }
  .form-progress {
    gap:12px;
    padding-bottom:24px;
    margin-bottom:25px
  }
  .form-progress li {
    gap:8px;
    flex-direction:column;
    align-items:flex-start;
    font-size:14px
  }
  .form-progress li>span {
    width:31px;
    height:31px;
    flex-basis:31px
  }
  .field {
    margin-bottom:25px
  }
  .field label {
    font-size:16px;
    gap:12px
  }
  .field-meta {
    flex-direction:column;
    gap:3px
  }
  .field-meta p:last-child {
    text-align:right
  }
  .form-submit {
    font-size:16px;
    padding-inline:20px;
    gap:15px
  }
  .form-preview h2 {
    font-size:23px
  }
  .notice {
    padding:20px;
    font-size:16px
  }
  .form-preview>button {
    font-size:16px
  }
  .check-field {
    font-size:14px;
    gap:10px
  }
}
@media(max-width:360px) {
  .month-board {
    grid-template-columns:1fr
  }
  .board-task {
    min-height:0;
    padding:16px
  }
  .board-task>img {
    aspect-ratio:1.6
  }
  .board-task>.tag {
    margin-top:8px
  }
  .value-secondary {
    grid-template-columns:1fr
  }
  .value-secondary>img {
    height:auto;
    min-height:0;
    aspect-ratio:1.3
  }
  .home-about-copy h2 {
    font-size:24px
  }
  .management-cycle {
    gap:7px
  }
  .management-cycle>span {
    width:64px;
    height:64px
  }
  .review-feature {
    grid-template-columns:1fr
  }
  .review-feature img {
    aspect-ratio:1.8
  }
  .case-showcase {
    padding-bottom:240px
  }
  .case-watermark {
    font-size:25px
  }
  .case-inset {
    bottom:153px
  }
  .case-showcase .post-copy p {
    font-size:14px
  }
  .scope-paths h3 {
    font-size:22px
  }
  .series-preview {
    gap:6px;
    padding-inline:9px
  }
  .series-preview span {
    font-size:14px;
    letter-spacing:0
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}