/* 写真の端に添える寸法線を、サイト共通の視覚モチーフにする。 */
:root {
  --navy:#1b3a6e;
  --sky:#1f99b7;
  --muted:#50617a;
  --line:#d4dce4;
  --paper:#f6f5f1;
  --white:#fff;
  --max:1160px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  color:var(--navy);
  background:var(--white);
  font-family:system-ui,-apple-system,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.95;
  letter-spacing:.025em
}
img {
  display:block;
  max-width:100%;
  height:auto
}
a {
  color:var(--navy);
  text-underline-offset:.25em;
  text-decoration-thickness:1px
}
a:hover {
  text-decoration-thickness:2px
}
a,button,input,select,textarea {
  -webkit-tap-highlight-color:#dce9ed
}
:focus-visible {
  outline:3px solid var(--navy);
  outline-offset:5px
}
p {
  margin:0 0 1.3em
}
h1,h2,h3 {
  font-weight:650;
  line-height:1.55;
  letter-spacing:.035em;
  text-wrap:pretty
}
h1 {
  font-size:clamp(1.85rem,3.5vw,3rem);
  margin:0 0 24px
}
h2 {
  font-size:clamp(1.4rem,2.3vw,2rem);
  margin:0 0 28px
}
h3 {
  font-size:1.2rem;
  margin:28px 0 14px
}
ul,ol {
  padding-left:1.5em
}
li {
  padding-left:.2em;
  margin:0 0 .8em
}
button,input,select,textarea {
  font:inherit;
  color:inherit
}
main {
  max-width:var(--max);
  margin:auto;
  padding:0 32px;
  min-height:55vh
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:absolute;
  left:16px;
  top:-100px;
  padding:10px 20px;
  background:white;
  z-index:20
}
.skip-link:focus {
  top:12px
}
.site-header {
  max-width:1440px;
  margin:auto;
  padding:30px 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.site-name {
  margin:0;
  flex:0 1 340px;
  min-width:200px
}
.site-name a {
  display:block
}
.site-header nav ul {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px 22px;
  list-style:none;
  padding:0;
  margin:0
}
.site-header nav li {
  padding:0;
  margin:0
}
.site-header nav a {
  font-size:.83rem;
  text-decoration:none;
  display:block;
  padding:8px 0;
  white-space:nowrap
}
.site-header nav a[aria-current] {
  font-weight:750;
  text-decoration:underline;
  text-underline-offset:7px
}
.site-header nav a[href="/contact/"] {
  background:var(--navy);
  color:white;
  padding:12px 20px
}
.site-header nav a:hover {
  opacity:.75
}
.page {
  padding-bottom:80px
}
.page-heading {
  padding:62px 0 48px;
  max-width:860px
}
.page-heading p {
  max-width:44em;
  margin:0
}
.page-heading h1:only-child {
  margin-bottom:0
}
.photo {
  margin:0;
  position:relative;
  min-width:0
}
.photo img {
  width:100%;
  object-fit:cover
}
.measure:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-13px;
  height:7px;
  border-left:1px solid var(--navy);
  border-right:1px solid var(--navy);
  background:linear-gradient(var(--navy),var(--navy)) center/100% 1px no-repeat;
  opacity:.4;
  pointer-events:none
}
.hero {
  position:relative;
  margin:20px calc((min(100vw,1440px) - min(100vw,1160px)) / -2) 0;
  min-height:650px;
  display:flex;
  align-items:flex-start;
  padding:70px 52px
}
.hero-photo {
  position:absolute;
  inset:0
}
.hero-photo img {
  height:100%;
  object-position:64% center
}
.hero-copy {
  position:relative;
  z-index:1;
  width:700px;
  max-width:80%;
  padding:30px 34px;
  background:rgba(255,255,255,.94)
}
.hero h1 {
  font-size:clamp(1.8rem,3vw,2.55rem);
  line-height:1.7;
  letter-spacing:.045em
}
.hero p {
  font-size:.96rem;
  max-width:35em;
  margin:0;
  line-height:2
}
.home-section {
  padding:90px 0
}
.home-section+.home-section {
  border-top:1px solid var(--line)
}
.concerns {
  display:grid;
  grid-template-columns:1.13fr 1fr;
  gap:64px;
  align-items:center
}
.concerns ul {
  list-style:none;
  padding:0;
  margin:0
}
.concerns li {
  position:relative;
  padding:16px 0 16px 25px;
  margin:0;
  border-bottom:1px solid var(--line);
  font-size:1rem
}
.concerns li:before {
  content:"";
  position:absolute;
  left:0;
  top:29px;
  width:7px;
  height:7px;
  border:1px solid var(--sky)
}
.photo-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start
}
.photo-pair .photo {
  grid-column:1 / -1;
  width:78%
}
.photo-pair .photo+ .photo {
  justify-self:end;
  margin-top:10px;
  width:67%
}
.split {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:64px;
  align-items:center
}
.split .section-copy {
  min-width:0
}
.split>.photo {
  align-self:center
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:52px;
  padding:13px 25px;
  border:1px solid var(--navy);
  border-radius:0;
  background:var(--navy);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  line-height:1.6
}
.button:after {
  content:"";
  width:20px;
  height:8px;
  border-bottom:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:skewX(38deg);
  flex-shrink:0
}
.button:hover {
  background:#112b55;
  text-decoration:none
}
.button:disabled {
  opacity:.6;
  cursor:wait
}
.section-copy>p:last-child,.quiet-section>p:last-child {
  margin-bottom:0
}
.quiet-section {
  padding:48px;
  background:var(--paper);
  margin-bottom:32px
}
.home .quiet-section {
  border:0
}
.news-section {
  padding-bottom:0
}
.post-list {
  list-style:none;
  padding:0;
  margin:0 0 40px
}
.post-list li {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:24px;
  padding:24px 0;
  margin:0;
  border-bottom:1px solid var(--line)
}
.post-list time {
  font-size:.85rem;
  color:var(--muted)
}
.post-list a {
  text-decoration:none;
  font-weight:550
}
.post-list a:hover {
  text-decoration:underline
}
.service-section {
  padding:56px 0 72px;
  border-top:1px solid var(--line)
}
.service-section h2 {
  display:flex;
  align-items:flex-start;
  gap:16px;
  font-size:1.65rem
}
.icon {
  flex:0 0 48px;
  display:inline-block;
  vertical-align:middle;
  fill:none;
  stroke:var(--navy);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.services ul {
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:0;
  margin:22px 0 26px;
  gap:0 20px
}
.services li {
  border-bottom:1px solid var(--line);
  padding:10px 0;
  margin:0;
  font-size:.95rem
}
.flow-section {
  padding:20px 0 60px
}
.steps {
  list-style:none;
  counter-reset:step;
  padding:0;
  margin:36px 0 0
}
.steps>li {
  counter-increment:step;
  display:grid;
  grid-template-columns:44px 48px 1fr;
  gap:24px;
  margin:0;
  padding:26px 0 30px;
  border-top:1px solid var(--line);
  align-items:start
}
.steps>li:before {
  content:counter(step,decimal-leading-zero);
  font-size:1.7rem;
  line-height:48px;
  font-weight:400;
  color:var(--navy);
  font-variant-numeric:tabular-nums
}
.step-copy strong {
  font-size:1.13rem
}
.step-copy .photo {
  max-width:530px;
  margin-top:24px;
  margin-bottom:12px
}
.requests {
  list-style:none;
  margin:0;
  padding:0
}
.requests li {
  display:flex;
  align-items:center;
  gap:18px;
  border-top:1px solid var(--line);
  padding:20px 0;
  margin:0
}
.flow .quiet-section {
  padding:42px
}
.pricing {
  max-width:900px;
  margin:auto
}
.pricing-wrap {
  padding:32px 38px 24px;
  background:var(--paper);
  margin-bottom:64px
}
.price-table {
  border-collapse:collapse;
  width:100%;
  table-layout:fixed;
  font-variant-numeric:tabular-nums;
  letter-spacing:0
}
.price-table caption {
  text-align:left;
  font-weight:650;
  font-size:1.25rem;
  padding:0 0 22px
}
.price-table th,.price-table td {
  padding:17px 12px;
  text-align:left;
  border-bottom:1px solid var(--line);
  font-weight:400
}
.price-table thead th {
  font-size:.9rem;
  font-weight:500;
  background:#e8edf0
}
.price-table th:first-child {
  width:66%
}
.price-table td {
  text-align:right;
  font-weight:650;
  white-space:nowrap
}
.price-note {
  font-size:.87rem;
  line-height:1.8;
  margin:18px 0 0;
  color:var(--muted)
}
.text-section {
  padding:0 0 36px
}
.text-section h2 {
  margin-top:14px
}
.pricing .photo {
  margin:24px 0 34px;
  max-width:680px
}
.about-intro {
  align-items:start;
  padding:6px 0 72px;
  grid-template-columns:1.3fr .8fr
}
.about-intro .portrait {
  max-width:350px;
  justify-self:end;
  align-self:start
}
.office-section {
  padding-top:50px;
  border-top:1px solid var(--line)
}
dl {
  display:grid;
  grid-template-columns:140px 1fr;
  margin:0 0 32px
}
dt,dd {
  padding:17px 0;
  margin:0;
  border-bottom:1px solid var(--line)
}
dt {
  font-weight:600
}
dd {
  padding-left:16px
}
.office-photos {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:36px;
  align-items:center;
  margin-top:50px
}
.office-photos .photo:first-child img {
  max-height:480px;
  object-fit:contain
}
.image-heading {
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:64px;
  align-items:center;
  max-width:none;
  padding-bottom:65px
}
.image-heading .photo img {
  aspect-ratio:16/9
}
.contact {
  max-width:1000px;
  margin:auto
}
#contact-form {
  max-width:760px;
  background:var(--paper);
  padding:44px;
  margin:0 0 30px
}
.field {
  margin:0 0 27px
}
.field label,.field legend {
  display:block;
  font-size:.96rem;
  font-weight:600;
  margin-bottom:9px
}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea {
  width:100%;
  min-width:0;
  padding:12px 14px;
  border:1px solid #8492a6;
  background:white;
  border-radius:2px;
  font:inherit;
  line-height:1.6
}
.field textarea {
  resize:vertical
}
.field input[type=checkbox] {
  width:20px;
  height:20px;
  accent-color:var(--navy);
  vertical-align:middle;
  margin:0 8px 3px 0
}
.required {
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--navy);
  font-size:.73rem;
  font-weight:500;
  white-space:nowrap;
  margin-left:4px
}
.required:before {
  content:"";
  width:15px;
  height:15px;
  background:url('/assets/icons/required.svg') center/contain no-repeat
}
.hp-field {
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important
}
.form-status {
  font-size:.95rem;
  margin:16px 0 0
}
.form-done {
  font-weight:600;
  min-height:50px;
  padding-left:62px;
  background:url('/assets/icons/complete.svg') left top/42px no-repeat
}
.privacy,.post {
  max-width:800px;
  margin:auto
}
.privacy {
  padding-top:60px
}
.privacy h2,.post h2 {
  font-size:1.4rem;
  margin-top:42px;
  margin-bottom:18px
}
.post {
  padding-top:60px;
  padding-bottom:70px
}
.post-date {
  font-size:.9rem;
  color:var(--muted)
}
.site-footer {
  background:var(--navy);
  color:white;
  padding:55px 32px
}
.footer-inner {
  max-width:1096px;
  margin:auto
}
.footer-logo {
  width:310px;
  margin:0 0 30px
}
.site-footer p {
  font-size:.83rem;
  line-height:2;
  margin:0 0 10px
}
.site-footer a {
  color:white
}
.site-footer :focus-visible {
  outline-color:white
}
@media(min-width:1441px) {
  .hero {
    margin-left:-108px;
    margin-right:-108px
  }
}
@media(max-width:1080px) {
  .site-header {
    flex-direction:column;
    gap:16px;
    padding:24px 28px
  }
  .site-name {
    flex:auto;
    width:310px;
    align-self:flex-start
  }
  .site-header nav {
    width:100%
  }
  .site-header nav ul {
    justify-content:flex-start;
    gap:4px 23px
  }
  .hero {
    margin-left:-16px;
    margin-right:-16px;
    min-height:570px;
    padding:42px 25px
  }
  .hero-copy {
    max-width:85%
  }
  .split,.concerns {
    gap:36px
  }
  .image-heading {
    gap:36px
  }
}
@media(max-width:700px) {
  body {
    font-size:15px;
    line-height:1.95;
    letter-spacing:.015em
  }
  main {
    padding:0 22px
  }
  .site-header {
    padding:22px 22px 18px;
    gap:18px
  }
  .site-name {
    width:min(100%,310px);
    min-width:0
  }
  .site-header nav ul {
    gap:4px 18px
  }
  .site-header nav a {
    font-size:.76rem;
    padding:7px 0
  }
  .site-header nav a[href="/contact/"] {
    padding:7px 13px
  }
  h1 {
    font-size:1.85rem;
    line-height:1.65
  }
  h2 {
    font-size:1.4rem;
    margin-bottom:22px
  }
  .page {
    padding-bottom:55px
  }
  .page-heading {
    padding:36px 0 32px
  }
  .hero {
    display:flex;
    flex-direction:column;
    min-height:0;
    margin:0 -22px;
    padding:0
  }
  .hero-photo {
    position:relative;
    inset:auto;
    width:100%;
    order:2;
    margin-top:24px
  }
  .hero-photo img {
    height:auto;
    aspect-ratio:16/10;
    object-position:65% center
  }
  .hero-copy {
    width:100%;
    max-width:none;
    padding:28px 22px 0;
    background:white
  }
  .hero h1 {
    font-size:clamp(1.4rem,5.55vw,2.1rem);
    line-height:1.8;
    letter-spacing:0;
    margin-bottom:20px
  }
  .hero p {
    font-size:.9rem;
    line-height:1.95
  }
  .home-section {
    padding:55px 0
  }
  .concerns,.split {
    grid-template-columns:1fr;
    gap:30px
  }
  .photo-pair {
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding-bottom:10px
  }
  .photo-pair .photo {
    grid-column:auto;
    width:100%
  }
  .photo-pair .photo+.photo {
    width:100%;
    margin-top:45px
  }
  .photo-pair img {
    aspect-ratio:1/1;
    object-fit:cover
  }
  .home .quiet-section,.flow .quiet-section {
    padding:27px 24px;
    margin-bottom:22px
  }
  .quiet-section h2 {
    margin-bottom:16px
  }
  .button {
    font-size:.94rem;
    padding:13px 22px;
    gap:25px;
    max-width:100%
  }
  .post-list li {
    grid-template-columns:1fr;
    gap:5px;
    padding:20px 0
  }
  .service-section {
    padding:35px 0 52px
  }
  .service-section h2 {
    font-size:1.35rem;
    gap:12px;
    align-items:center
  }
  .service-section h2 .icon {
    width:42px;
    height:42px;
    flex-basis:42px
  }
  .services ul {
    gap:0 14px
  }
  .services li {
    font-size:.87rem
  }
  .flow-section {
    padding:15px 0 42px
  }
  .steps {
    margin-top:25px
  }
  .steps>li {
    grid-template-columns:30px 38px 1fr;
    gap:10px;
    padding:22px 0 28px
  }
  .steps>li:before {
    font-size:1.3rem;
    line-height:38px
  }
  .steps .icon {
    width:38px;
    height:38px
  }
  .step-copy strong {
    font-size:1rem
  }
  .step-copy .photo {
    margin-left:-48px;
    max-width:calc(100% + 48px);
    margin-top:20px
  }
  .requests li {
    gap:14px;
    font-size:.94rem
  }
  .pricing-wrap {
    padding:24px 14px;
    margin:0 -8px 40px
  }
  .price-table caption {
    font-size:1.15rem
  }
  .price-table th,.price-table td {
    padding:14px 7px;
    font-size:.84rem
  }
  .price-table th:first-child {
    width:63%
  }
  .price-table thead th {
    font-size:.73rem;
    line-height:1.65
  }
  .price-note {
    font-size:.78rem
  }
  .text-section {
    padding-bottom:26px
  }
  .about-intro {
    grid-template-columns:1fr;
    padding-bottom:45px
  }
  .about-intro .portrait {
    max-width:290px;
    width:80%;
    justify-self:center
  }
  dl {
    grid-template-columns:90px 1fr;
    font-size:.92rem
  }
  dt,dd {
    padding-top:14px;
    padding-bottom:14px
  }
  dd {
    padding-left:12px
  }
  .office-photos {
    gap:20px;
    grid-template-columns:1fr;
    max-width:400px
  }
  .office-photos .photo:first-child {
    width:80%
  }
  .image-heading {
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:40px
  }
  .image-heading .photo {
    width:100%
  }
  .image-heading .photo img {
    aspect-ratio:2.5/1
  }
  #contact-form {
    padding:25px 18px;
    margin-left:-8px;
    margin-right:-8px
  }
  .field label {
    font-size:.88rem
  }
  .field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea {
    font-size:16px;
    padding:11px 10px
  }
  .contact>p {
    overflow-wrap:anywhere
  }
  .privacy,.post {
    padding-top:35px
  }
  .privacy h1 {
    font-size:1.65rem
  }
  .site-footer {
    padding:40px 22px
  }
  .footer-logo {
    width:min(100%,290px)
  }
  .site-footer p {
    font-size:.76rem
  }
  .news-section {
    padding-bottom:0
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}
@media print {
  @page {
    size:A4;
    margin:16mm
  }
  body {
    color:#000;
    font-size:10pt;
    background:white
  }
  .site-header,.site-footer,.skip-link,.button {
    display:none
  }
  main,.page {
    max-width:none;
    padding:0
  }
  .hero {
    min-height:0;
    margin:0;
    padding:0
  }
  .hero-copy {
    max-width:none;
    width:100%;
    padding:0
  }
  .hero-photo {
    display:none
  }
  .photo {
    max-width:65%;
    break-inside:avoid
  }
  .measure:after {
    display:none
  }
  .home-section,.service-section,.flow-section,.text-section,.page-heading {
    padding:18px 0
  }
  .split,.concerns {
    gap:20px
  }
  .quiet-section,.pricing-wrap,#contact-form {
    background:white;
    padding:15px 0;
    margin:0
  }
  .price-table tr {
    break-inside:avoid
  }
  h1,h2,h3 {
    break-after:avoid
  }
  .hp-field {
    display:none
  }
}

/* 生成素材の許可待ちでも空の画像枠を出さない。写真の挿入後は自動で通常レイアウトになる。 */
.hero:not(:has(.hero-photo)) { min-height: 0; background: var(--paper); }
.hero:not(:has(.hero-photo)) .hero-copy { width: 100%; max-width: 850px; background: transparent; }
.split:not(:has(> .photo)), .concerns:not(:has(img)), .image-heading:not(:has(img)) { grid-template-columns: 1fr; }
.photo-pair:empty { display: none; }
@media (max-width: 700px) { .hero:not(:has(.hero-photo)) { padding-bottom: 28px; } }

/* ブログ記事内の表・リード・注記（2026-10-04 追加） */
.post table {
  width:100%;
  border-collapse:collapse;
  margin:1.4em 0;
  font-size:.95rem;
  line-height:1.6
}
.post th,.post td {
  border:1px solid var(--line);
  padding:10px 12px;
  text-align:left;
  vertical-align:top
}
.post thead th {
  background:var(--paper);
  color:var(--navy);
  font-weight:700
}
.post tbody th {
  font-weight:600;
  color:var(--navy)
}
.post .lead {
  font-size:1.05rem;
  padding:16px 18px;
  border-left:3px solid var(--navy);
  background:var(--paper)
}
.post h3 {
  color:var(--navy);
  margin-top:1.6em
}
.post .sources a {
  word-break:break-all
}
.post .post-note {
  color:var(--muted);
  font-size:.85rem;
  margin-top:2.4em
}

/* ブログ：一覧のサムネ・記事頭の画像・末尾のCTA（2026-10-04 追加） */
.post-list .post-item {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:24px 0
}
.post-list .post-item.has-thumb {
  grid-template-columns:240px 1fr;
  gap:24px;
  align-items:start
}
.post-list .post-thumb-link img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line)
}
.post-item-body time {
  display:block;
  font-size:.85rem;
  color:var(--muted)
}
.post-item-body .post-title {
  display:block;
  margin-top:4px;
  font-weight:700;
  font-size:1.05rem
}
.post-item-body .post-desc {
  margin:8px 0 0;
  font-size:.92rem;
  color:var(--muted);
  line-height:1.7
}
.post-hero {
  margin:20px 0 28px
}
.post-hero img {
  display:block;
  width:100%;
  height:auto
}
.post-cta {
  margin:48px 0 8px;
  padding:28px 24px;
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--navy)
}
.post-cta .post-cta-title {
  margin:0 0 8px;
  font-weight:700;
  font-size:1.15rem;
  color:var(--navy);
  line-height:1.5
}
.post-cta p {
  margin:0 0 12px
}
.post-cta .post-cta-actions {
  margin:16px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 24px
}
.post-cta .post-cta-sub {
  font-weight:600
}
@media (max-width:640px) {
  .post-list .post-item.has-thumb {
    grid-template-columns:1fr
  }
  .post-cta {
    padding:22px 18px
  }
}

/* 本サイトへの戻り導線（ヘッダーの上の薄い帯・2026-10-04 追加） */
.parent-bar {
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.parent-bar p {
  max-width:1440px;
  margin:auto;
  padding:7px 42px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 18px;
  font-size:.78rem;
  line-height:1.6
}
.parent-bar a {
  font-weight:600
}
.parent-bar span {
  color:var(--muted)
}
@media (max-width:640px) {
  .parent-bar p {
    padding:7px 18px
  }
  .parent-bar span {
    display:none
  }
}

/* 写真の注記・料金表の直下の一文（2026-10-04 追加） */
.photo-note {
  margin:6px 0 0;
  font-size:.78rem;
  line-height:1.6;
  color:var(--muted)
}
.pricing-after {
  margin:14px 0 0;
  font-size:.95rem
}