/* BENZO 写真・改行の調整用。全ページで最後に読み込んでいます。
   height: auto は横幅に合わせた高さ。例：height: 280px で高さを指定。
   aspect-ratio は「横 / 縦」。height が auto のときの枠の形です。
   cover は枠いっぱい（端が切れる）、contain は全体表示（余白が出る場合あり）。
   object-position: 50% 40% の前半は左右、後半は上下の表示位置。
   cover で上下が切れている場合、後半を大きくすると写真の下側を多く表示。
   切り抜きや余白がない場合、位置の数字を変えても見た目は変わりません。
   !important はHTMLにある指定より優先するためのもの。そのまま残してください。
   スマホの個別設定は、このファイルの下にまとめています。 */

/* INTERIOR共通の購入案内：プラン全体の後に、コンテンツ幅いっぱいの区切り線。
   背景色は変更せず、独立した見出しと本文を配置します。 */
.renewal .interior-shared-notice {
  border-top: var(--border-hairline);
  margin-top: 64px;
  padding-block: 56px 24px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 9%;
}
.renewal .interior-shared-notice .section-subheading {
  margin: 0;
  padding: 0;
  border: 0;
}
.renewal .interior-shared-notice .service-pillar__sub--flush { margin: 0; }

/* STORY「がんばれば、結果は後からついてくる。」（本文内の2か所）
   font-size の20.3pxは最小、2.03vwは画面幅に連動、29pxは最大サイズ。
   小さくする例：clamp(19px, 1.9vw, 27px)
   大きくする例：clamp(22px, 2.2vw, 31px)
   margin-block の前半は上、後半は下の余白です。色は既存のモスグリーン。
   PCは1行。大きくしすぎるとはみ出すため、変更後に確認してください。 */
.renewal .story__inner .story-pull--belief {
  font-size: clamp(20.3px, 2.03vw, 29px);
  line-height: 1.7;
  margin-block: 28px 22px;
  color: var(--color-olive);
  white-space: nowrap;
}
@media (max-width: 860px) {
  .renewal .interior-shared-notice {
    display: block;
    margin-top: 44px;
    padding-block: 36px 12px;
  }
  .renewal .interior-shared-notice .section-subheading { margin-bottom: 24px; }
  .renewal .story__inner .story-pull--belief {
    white-space: normal;
    margin-block: 24px 18px;
  }
}

/* WHAT WE DO 01 写真：人物と図面を両方見せるため、元画像全体を表示。
   小さくする場合は height: auto を height: 220px などに変更。
   図面を残すため object-fit: contain は維持するのがおすすめです。 */
.renewal .work-collection .service-primary__photo img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: 50% 50% !important;
}

/* WHAT WE DO 02 写真：高さは height、上下は2つ目の40%で調整。 */
.renewal .work-collection .service-secondary__item--02 img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 40% !important;
}

/* WHAT WE DO 03 写真：掲載画像はそのまま。高さと2つ目の45%で調整。 */
.renewal .work-collection .service-secondary__item--03 img {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 45% !important;
}

/* PROJECTS 3枚共通の枠：16 / 9 を 3 / 2 にすると3枚とも高くなります。
   高さを揃えるため、各画像の height: auto は維持してください。 */
.renewal .projects__grid { --projects-image-ratio: 16 / 9; }

/* PROJECTS 主要画像：各項目の height で高さ、object-position の後半で上下を調整。
   進行中の計画：横長の枠。2.9を小さくすると高さが増えます。 */
.renewal .project-block--inprogress > img {
  height: auto;
  aspect-ratio: 2.9 !important;
  object-fit: cover;
  object-position: 50% 50% !important;
}
/* PROJECTS 設計：3枚共通の横長枠。後半100%で下側の手と素材を優先。 */
.renewal .project-block--design > img {
  height: auto;
  aspect-ratio: var(--projects-image-ratio) !important;
  object-fit: cover;
  object-position: 50% 100%;
}
/* PROJECTS DIY：後半40%を変更すると上下の切り取り位置が変わります。 */
.renewal .project-block--diy > img {
  height: auto;
  aspect-ratio: var(--projects-image-ratio);
  object-fit: cover;
  object-position: 50% 40% !important;
}
/* PROJECTS INTERIOR：実案件の画像を維持。 */
.renewal .project-block--interior > img {
  height: auto;
  aspect-ratio: var(--projects-image-ratio);
  object-fit: cover;
  object-position: 50% 50% !important;
}

/* ABOUT詳細 人物写真：PCでは width: 85% で以前の85%に縮小。
   80%ならさらに小さく、90%なら大きくなります。スマホは末尾で100%に戻します。
   元の比率・全体表示を維持。
   height: 360px などにすると、全体を残したまま高さを指定できます。 */
.renewal .about-intro__photo {
  width: 85%;
  margin-left: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: 50% 50%;
}

/* AND MORE 農業：height で高さ、後半50%で上下を調整。 */
.renewal .more-block--farming img {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
}
/* ABOUT冒頭：人物は右寄せのまま一回り小さく、草刈りの実写真は背後に。
   opacityは背景写真だけの濃さ。人物写真には適用しません。
   topは人物写真に対する背景の開始位置。元画像全体を表示します。 */
.renewal--about .about-intro__visual {
  position: relative;
  isolation: isolate;
}
.renewal--about .about-intro__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 68%;
  left: -3%;
  width: 110%;
  aspect-ratio: 4624 / 3472;
  background: url('../images/about_farming_kusakari.jpg') center / contain no-repeat;
  opacity: .54;
  filter: saturate(.65) contrast(.88);
  /* マスク・フェードは使わず、四角い写真を低い透明度で敷きます。 */
}
.renewal--about .about-intro__visual > .about-intro__photo {
  width: 76%;
  position: relative;
  z-index: 1;
}
/* PC限定の位置試作：人物だけを右へ。サイズと背景写真の位置は維持。 */
@media (min-width: 861px) {
  .renewal--about .about-intro__visual > .about-intro__photo {
    transform: translateX(min(5vw, 80px));
  }
}
/* スマホは背景写真のための高さを写真領域内に確保。
   丸い刃が人物の下に見え、次の章へはみ出さない位置にします。 */
@media (max-width: 860px) {
  .renewal--about .about-intro__visual { padding-bottom: 55%; }
  .renewal--about .about-intro__visual > .about-intro__photo { width: 86%; }
  .renewal--about .about-intro__visual::before {
    top: 29%;
    left: 0;
    width: 100%;
  }
}

/* AND MORE：小さな写真＋文章を3項目横並びに。
   写真は共通の正方形（PC幅104〜151px、スマホ133px）。従来の約1.45倍。
   写真と文章の間隔を12pxにし、文章幅をできるだけ確保します。
   subgridで3項目の見出し行の高さを共有し、本文の開始位置を揃えます。 */
.renewal--about #and-more { padding-block: 72px; }
.renewal--about .more__head { margin-bottom: 40px; }
.renewal--about .more__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 28px;
  align-items: start;
}
.renewal--about .more__grid .more-block {
  display: grid;
  grid-template-columns: clamp(104px, 10.44vw, 151px) minmax(0, 1fr);
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 12px 12px;
  align-content: start;
  margin: 0;
  min-width: 0;
}
.renewal--about .more__grid .more-block > img {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  align-self: start;
}
.renewal--about .more__grid .more-block__tag,
.renewal--about .more__grid .more-block__text {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}
@media (max-width: 860px) {
  .renewal--about #and-more { padding-block: 50px; }
  .renewal--about .more__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .renewal--about .more__grid .more-block {
    grid-template-columns: 133px minmax(0, 1fr);
    grid-row: auto;
    grid-template-rows: auto auto;
  }
}

/* AND MORE 地区行事：縦長写真。調整する数字は農業と同じです。 */
.renewal .more-block--local img {
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 50%;
}
/* AND MORE まちのこと：横長写真。調整する数字は農業と同じです。 */
.renewal .more-block--community img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
}
/* AND MORE ランニング：縦長写真。現在の控えめな横幅は元CSSを引き継ぎます。 */
.renewal .more-block--running img {
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 50%;
}

/* SERVICE インテリア提案資料6枚：一覧の枠の高さをまとめて調整。
   height: 240px などで高さ指定。文字や図面を切らないよう contain を維持。
   拡大表示の画像サイズには影響しません。 */
.renewal .plan-gallery__item img {
  height: auto;
  aspect-ratio: 13 / 9;
  object-fit: contain;
  object-position: 50% 50%;
}

/* TOP ABOUT：写真なしの静かなテキスト構成。色・本文は元の設定を維持。 */
.renewal .home-about { display: block; }
.renewal .home-about .about-quiet__inner { max-width: 780px; margin-inline: auto; }

/* 改行の道具：スマホでは自然に折り返します。
   HTML例 <span class="nowrap-pc">短いひとまとまり</span>
   HTML例 前半<br class="break-pc">後半
   PCで枠より長い文章をnowrap-pcで囲むと、はみ出すため短い語句に使ってください。 */
.renewal .nowrap-pc { white-space: normal; }
.renewal .break-pc { display: none; }
@media (min-width: 861px) {
  .renewal .nowrap-pc { white-space: nowrap; }
  .renewal br.break-pc { display: revert; }
}

/* スマホ・タブレット（幅860px以下）の設定。
   WHAT WE DO 02は今までどおり横長。PCの枠の形を変更してもここは維持。
   スマホだけ写真の高さを指定したい場合は、対象の設定をこの中に追加します。 */
@media (max-width: 860px) {
  .renewal .about-intro__photo { width: 100%; }
  .renewal .work-collection .service-secondary__item--02 img {
    aspect-ratio: 4 / 3;
  }
}

/* TOP CONCEPTのみ：VISIONと同じ深緑 #394333 と既存の生成り色を再利用。
   本文は手動改行せず、列幅に合わせて自然に折り返します。 */
.renewal #concept { background: #394333; color: var(--color-bg); }
.renewal #concept h2,
.renewal #concept p { color: var(--color-bg); }
.renewal #concept .concept__inner > * { min-width: 0; }
.renewal #concept .editorial-copy p { line-height: 2; }
@media (min-width: 861px) {
  .renewal #concept .concept__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: 7%;
  }
}

/* FIRST VIEWのみ：既存のフォーム背景色（オフホワイト）を再利用。ヘッダーは変更しません。 */
.renewal .hero { background-color: #f8f5ee; }

/* TOP限定：FIRST VIEWの文字とヘッダー背景。
   大見出しのサイズ・配置・行間は従来の設定を維持します。 */
.renewal--home .hero h1 {
  font-weight: 500;
  color: #394333;
}
.renewal--home .hero__eyebrow {
  font-size: 12px;
  font-weight: 400;
  color: #394333;
}
/* WHAT WE DOで使用中の淡いグレーグリーンを再利用。 */
.renewal--home .site-header { background: #e9e9df; }

/* 全ページの可読性調整（2026-09-15）。
   本文15〜18px・400、既存の行間・余白・写真サイズは維持。
   小さなラベルは12px、補足は13pxを目安にしています。 */
.renewal .kicker,
.renewal .concept__inner .kicker,
.renewal .vision .kicker,
.renewal .whatwedo__more-eyebrow,
.renewal .story-teaser .about__more-eyebrow {
  font-size: 12px;
}
.renewal .project-block__tag,
.renewal .visual-studies__caption,
.renewal .plan-gallery__caption,
.renewal .more-block__tag,
.renewal .price-divider {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text);
}
.renewal .project-block__note,
.renewal .visual-studies__note,
.renewal .price-list__note,
.renewal .service-notes,
.renewal .contact__meta,
.renewal .form-field__hint,
.renewal .form-field__note {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
}
.renewal .project-block__note { opacity: 1; }
/* 短い年次表記は、スマホの既存70px幅にも収まる12pxに統一。 */
.renewal .career-list .service-num { font-size: 12px; }
.renewal .form-field input,
.renewal .form-field select,
.renewal .form-field textarea { font-weight: 400; }
.renewal .form-field input::placeholder,
.renewal .form-field textarea::placeholder {
  color: var(--color-olive);
  opacity: 1;
}
.renewal .site-footer__links,
.renewal .site-footer__row { font-size: 13px; }
.renewal .site-footer__links-label { opacity: 1; }
.renewal .hero__meta { font-size: 12px; }
/* デスクトップの横幅が十分ある場合のみ。狭いPC幅とスマホメニューは維持。 */
@media (min-width: 1101px) {
  .renewal .site-nav__list a { font-size: 12px; }
}

/* ブランドメッセージのみに深緑を追加。サービス名称・料金・本文には適用しません。
   深緑背景のCONCEPT・VISION・STORY末尾は既存の明るい文字色を維持。 */
.renewal .service-hero h1,
.renewal .about-intro__text h1,
.renewal .story-hero h1,
.renewal .about-quiet__inner h2 {
  font-weight: 500;
  color: #394333;
}

/* PC日本語組版：短い語句だけを保護。スマホでは通常のインライン表示のまま。
   写真の列幅・サイズには触れず、本文の不要な幅制限を解消します。 */
@media (min-width: 861px) {
  .renewal main p,
  .renewal main li {
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .renewal .jp-unit { white-space: nowrap; }
  .renewal #concept .editorial-copy p,
  .renewal .work-collection p,
  .renewal .life__lead p:not(.kicker),
  .renewal .life__quote p,
  .renewal .about-quiet__inner .editorial-copy p,
  .renewal .about-intro__text .editorial-copy p,
  .renewal .project-block__text {
    max-width: none;
    letter-spacing: 0;
    text-wrap: pretty;
  }
  .renewal .about-quiet__inner .editorial-copy { max-width: 38em; }
  /* 見出しの意図した改行を残し、本文中の旧モバイル用改行だけを無効化。 */
  .renewal .service-editorial p .br-mobile { display: none; }
  .renewal .service-editorial,
  .renewal .interior-intro {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 7%;
  }
  .renewal .service-editorial p,
  .renewal .interior-intro p,
  .renewal .plan-editorial p,
  .renewal .interior-shared-notice p,
  .renewal .service-context p,
  .renewal .service-note-section__inner p {
    max-width: 36em;
    letter-spacing: 0;
    line-height: 1.95;
    text-wrap: pretty;
  }
  .renewal .service-editorial__intro .service-pillar__body,
  .renewal .service-editorial .service-pillar__sub,
  .renewal .interior-intro .service-pillar__body,
  .renewal .plan-editorial .service-plan { max-width: none; }
  .renewal .service-editorial .service-pillar__body p:not(:last-child),
  .renewal .service-editorial .service-pillar__sub p:not(:last-child),
  .renewal .interior-intro .service-pillar__body p:not(:last-child),
  .renewal .plan-editorial .service-plan p:not(:last-child) { margin-bottom: 1.4em; }
  /* 複数室の見積案内はプラン下の広い行幅で1〜2行を目安に。 */
  .renewal #interior > .container > .service-pillar__note {
    margin-left: 0;
    max-width: 60em;
    letter-spacing: 0;
    text-wrap: pretty;
  }
  .renewal .price-list__row dd,
  .renewal .service-plan__price { white-space: nowrap; }
  .renewal .story-hero .editorial-copy p,
  .renewal .story__inner p:not(.story-pull),
  .renewal .story-roots__text p:not(.story-pull) {
    max-width: none;
    letter-spacing: 0;
    text-wrap: pretty;
  }
}