@charset "UTF-8";

/* officekusama トップページ: 既存イラストの表示バランス調整（2026-09-06）
   本番テーマ + 現行独自CSSを維持し、ページ固有の独自CSS欄に追加する差分。
   .ok-home-* は任意のCMSクラス名。既存ブロックIDだけでも適用される。
   動画・ロゴ・サイドバー・画像原本・本文・配色には変更を加えない。 */

/* 横長の取扱業務イラスト: 16:9の全体を見せ、見出しは画像下へ。 */
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .wrapper_item {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .inner_item {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .inner_item_img {
  width: 100%;
  max-width: 320px;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 0 auto 12px;
}
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .inner_item_img img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: center;
}
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .inner_item_txt {
  margin-top: 0 !important;
}
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .inner_item_txt .heading {
  position: static;
  height: auto !important;
  min-height: 0;
  padding: 0;
  margin: 0 0 8px;
  display: block;
}
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .inner_item_txt .heading::before {
  display: none;
}
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .inner_item_txt .heading .h {
  color: var(--i_txt_color, #392f2b);
}
/* 現在末尾にある、画像も見出しもない空のカードを表示しない。 */
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .inner_item:last-child:has(img[src*="no_image"]):not(:has(.h, a)) {
  display: none;
}

/* 詳細・その他業務・特徴: 画像40%／本文60%を、固定上限の画像＋本文へ。 */
:is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 {
  --ok-home-illustration-size: 240px;
  --ok-home-illustration-gap: 32px;
}
:is(.ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 {
  --ok-home-illustration-size: 220px;
}
:is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .wrapper_item > .inner_item {
  display: grid;
  grid-template-columns: var(--ok-home-illustration-size) minmax(0, 1fr);
  gap: 20px var(--ok-home-illustration-gap);
  align-items: start;
}
:is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item > a,
:is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item_img {
  width: 100%;
  max-width: var(--ok-home-illustration-size);
  min-width: 0;
  flex-basis: auto;
  margin: 0;
}
:is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item_img img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0;
  object-fit: contain;
  object-position: center;
}
:is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item_txt {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex-basis: auto;
  padding-left: 0;
  padding-right: 0;
}
/* 画像解除済みの料金カードを含め、画像のない本文を全幅にする。 */
:is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item:not(:has(.inner_item_img img:not([src*="no_image"]))) > .inner_item_txt {
  grid-column: 1 / -1;
}
:is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item_img:has(img[src*="no_image"]) {
  display: none;
}
/* CMS編集画面でリンクが画像・本文をまとめて包む場合。 */
.edit_view :is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item > a:has(.inner_item_txt) {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: var(--ok-home-illustration-size) minmax(0, 1fr);
  gap: 20px var(--ok-home-illustration-gap);
  max-width: 100%;
}

/* 代表似顔絵: 本文の回り込みを残し、200pxに抑える。 */
:is(.ok-home-greeting, [id~="nbp8551669"], [id="8551669"]).contents_box01.block_image_text_13 .inner_item_img {
  width: 200px;
  max-width: 200px;
  flex-basis: 200px;
  margin: 0 28px 20px 0;
}
:is(.ok-home-greeting, [id~="nbp8551669"], [id="8551669"]).contents_box01.block_image_text_13 .inner_item_img img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}
:is(.ok-home-greeting, [id~="nbp8551669"], [id="8551669"]).contents_box01.block_image_text_13 .inner_item_txt .heading {
  width: calc(100% - 228px);
}

/* 対象ブロック内のリンクに、暖色のキーボードフォーカスを明示。 */
:is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"], .ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"], .ok-home-greeting, [id~="nbp8551669"], [id="8551669"]) a:focus-visible {
  outline: 3px solid var(--i_main_dark, #c66f1a);
  outline-offset: 4px;
}

@media screen and (max-width: 900px) {
  :is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .wrapper_item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.ok-home-greeting, [id~="nbp8551669"], [id="8551669"]).contents_box01.block_image_text_13 .inner_item_img {
    float: none;
    margin: 0 auto 20px;
  }
  :is(.ok-home-greeting, [id~="nbp8551669"], [id="8551669"]).contents_box01.block_image_text_13 .inner_item_txt .heading {
    width: 100% !important;
  }
}
@media screen and (max-width: 768px) {
  :is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 {
    --ok-home-illustration-size: 180px;
  }
  :is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .wrapper_item > .inner_item,
  .edit_view :is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item > a:has(.inner_item_txt) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  :is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item > a,
  :is(.ok-home-service-detail, [id~="nbp15024970"], [id="15024970"], [id~="nbp4433847"], [id="4433847"], .ok-home-strengths, [id~="nbp4123597"], [id="4123597"]).composite_box01.block_images_22 .inner_item_img {
    margin-inline: auto;
  }
  :is(.ok-home-greeting, [id~="nbp8551669"], [id="8551669"]).contents_box01.block_image_text_13 .inner_item_img {
    width: 180px;
    max-width: 180px;
    flex-basis: 180px;
  }
}
@media screen and (max-width: 540px) {
  :is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .wrapper_item {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  :is(.ok-home-service-overview, [id~="nbp18865300"], [id="18865300"]).composite_box01.block_images_9 .inner_item_img {
    max-width: 280px;
  }
}