@charset "UTF-8";
/*
 * コラム記事の本文 (column posts)
 *
 * Loaded on single posts, and into the block editor (functions/column-editor.php), so
 * what the writer sees while editing is what the post looks like. Two scopes:
 *
 * - .c-explain1 …          the decorations: any column, old or new (the articles moved
 *                           from company.andre-law.jp keep the Cocoon classes these use)
 * - .c-explain1 .c-column … plain blocks in posts written with the block editor, which
 *                           the theme frames (single.php); older posts are full-page HTML
 *
 * For the editor both scopes are taken off and WordPress puts the editor's own in
 * front, so every selector here must start with one of them (or be :root).
 * Sizes are in px and em: the editor has no --vw.
 */

/* ══ Plain blocks (posts written with the block editor) ═══════════════════════════
   Copies of the existing columns' designs, down to the line heights (1.875, the site's
   body; the lists' 1.1em and 1.5), so the old columns look the same as blocks (3-4). */
.c-explain1 .c-column p {
  margin-top: 15px;
  line-height: 1.875;
}
.c-explain1 .c-column > :first-child {
  margin-top: 0;
}
/* 「● メリット」 labels of an old column (304), as style.css's c-explain1__lead, which
   the editor doesn't load */
.c-explain1 .c-column p.c-explain1__lead {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  gap: 8px;
  font-weight: 700;
  line-height: 1.5;
}
.c-explain1 .c-column p.c-explain1__lead::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #111;
}
/* H2: the red frame with a shadow of the existing columns (.custom-h2) */
.c-explain1 .c-column h2.wp-block-heading {
  margin-block: 2em 1.5em;
  padding: 20px;
  border: 2px solid #f6211a;
  background: white;
  box-shadow: 5px 8px 0 #f6211a;
  font-size: 20px;
  line-height: 1.875;
  color: #f6211a;
}
.c-explain1 .c-column h3.wp-block-heading {
  margin-block: 2em 1.5em;
  padding: 10px 20px;
  border-left: 6px solid #f6211a;
  position: relative;
  font-size: 18px;
  line-height: 1.875;
  color: #f6211a;
}
.c-explain1 .c-column h3.wp-block-heading::before {
  content: "";
  width: 6px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffd5d5;
}
.c-explain1 .c-column h4.wp-block-heading {
  display: inline-block;
  margin-block: 1.5em 12px;
  padding-bottom: 4px;
  border-bottom: 2px solid #f6211a;
  font-size: 16px;
  font-weight: 700;
  color: #f6211a;
}
/* Lists: the yellow box with dots of the existing columns (.c-bulletbox) */
.c-explain1 .c-column > :is(ul, ol).wp-block-list {
  margin-block: 20px;
  padding: 16px 24px;
  border-radius: 6px;
  background: #fefdf2;
  font-size: 1.1em;
  line-height: 1.5;
}
.c-explain1 .c-column > ul.wp-block-list {
  list-style: none;
}
.c-explain1 .c-column > ul.wp-block-list > li {
  padding-left: 1.25em;
  position: relative;
}
.c-explain1 .c-column > ul.wp-block-list > li::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  position: absolute;
  top: 0.55em;
  left: 0;
  background: #f1c843;
}
.c-explain1 .c-column > ol.wp-block-list {
  padding-left: 2.6em;
  list-style: decimal;
}
.c-explain1 .c-column .wp-block-image {
  margin-block: 1.5em;
  text-align: center;
}
.c-explain1 .c-column .wp-block-image img {
  max-width: 100%;
  height: auto;
}
.c-explain1 .c-column .wp-block-image figcaption {
  margin-top: 0.5em;
  font-size: 13px;
  color: #666;
}
.c-explain1 .c-column .wp-block-separator {
  margin-block: 2em;
  border: 0;
  border-top: 1px solid #ddd;
}
.c-explain1 .c-column .wp-block-quote {
  margin-block: 1.5em;
  padding: 0.8em 1.2em;
  border-left: 4px solid #ddd;
  background: #f7f7f7;
}
/* Tables: the same look as the moved articles' tables (.c-column-table) */
.c-explain1 .c-column .wp-block-table {
  margin-block: 1.5em;
  overflow-x: auto;
}
.c-explain1 .c-column .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}
.c-explain1 .c-column .wp-block-table :is(th, td) {
  padding: 0.6em 0.8em;
  border: 1px solid #f3b9b6;
  line-height: 1.6;
}
.c-explain1 .c-column .wp-block-table thead th {
  background: #ffd4d4;
}
/* WordPress's own table style draws a 3px black line under the header row */
.c-explain1 .c-column .wp-block-table thead {
  border-bottom: 0;
}

/* ══ Heading designs (block styles of the heading block, 2-2 item 2) ══════════════ */
/* 塗りつぶし: white on red */
.c-explain1 .c-column .wp-block-heading.is-style-fill {
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  background: #f6211a;
  color: white;
}
.c-explain1 .c-column .wp-block-heading.is-style-fill::before {
  content: none;
}
/* 左線と背景: a red bar and a pale pink band */
.c-explain1 .c-column .wp-block-heading.is-style-band {
  border: 0;
  border-left: 8px solid #f6211a;
  box-shadow: none;
  background: #fff1f1;
  color: #222;
}
.c-explain1 .c-column .wp-block-heading.is-style-band::before {
  content: none;
}
/* 下線: a thick red line under a black heading */
.c-explain1 .c-column .wp-block-heading.is-style-underline {
  padding: 0 0 0.4em;
  border: 0;
  border-bottom: 3px solid #f6211a;
  box-shadow: none;
  background: none;
  color: #222;
}
.c-explain1 .c-column .wp-block-heading.is-style-underline::before {
  content: none;
}
/* 吹き出し: a red speech bubble */
.c-explain1 .c-column .wp-block-heading.is-style-balloon {
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  position: relative;
  background: #f6211a;
  color: white;
}
.c-explain1 .c-column .wp-block-heading.is-style-balloon::before {
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #f6211a;
  position: absolute;
  top: 100%;
  left: 30px;
  background: none;
}

/* ══ Inline styles (the スタイル menu: インライン, マーカー, フォントサイズ, バッジ) ══════ */
.c-explain1 .bold-red {
  font-weight: 700;
  color: #f6211a;
}
.c-explain1 .red {
  color: #f6211a;
}
.c-explain1 .bold-blue {
  font-weight: 700;
  color: #1a6fc4;
}
.c-explain1 .marker {
  background: #fff27a;
}
.c-explain1 .marker-under {
  background: linear-gradient(transparent 60%, #fff27a 60%);
}
.c-explain1 .marker-under-red {
  background: linear-gradient(transparent 60%, #ffc6c6 60%);
}
.c-explain1 .marker-under-blue {
  background: linear-gradient(transparent 60%, #c6e2ff 60%);
}
.c-explain1 .fz-12px { font-size: 12px; }
.c-explain1 .fz-14px { font-size: 14px; }
.c-explain1 .fz-16px { font-size: 16px; }
.c-explain1 .fz-18px { font-size: 18px; }
.c-explain1 .fz-20px { font-size: 20px; }
.c-explain1 .fz-22px { font-size: 22px; }
.c-explain1 .fz-24px { font-size: 24px; }
.c-explain1 .fz-28px { font-size: 28px; }
.c-explain1 .fz-32px { font-size: 32px; }
.c-explain1 .fz-36px { font-size: 36px; }
.c-explain1 .fz-40px { font-size: 40px; }
.c-explain1 .fz-44px { font-size: 44px; }
.c-explain1 .fz-48px { font-size: 48px; }
.c-explain1 :is(.fz-28px, .fz-32px, .fz-36px, .fz-40px, .fz-44px, .fz-48px) { line-height: 1.4; }
.c-explain1 :is(.badge, .badge-red, .badge-yellow, .badge-blue, .badge-green, .badge-gray) {
  display: inline-block;
  margin: 0 0.2em;
  padding: 0.1em 0.6em;
  border-radius: 3px;
  background: var(--badge, #f6211a);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.6;
  color: var(--badge-text, white);
  vertical-align: 0.1em;
}
.c-explain1 .badge-red { --badge: #f6211a; }
.c-explain1 .badge-yellow { --badge: #ffd700; --badge-text: #333; }
.c-explain1 .badge-blue { --badge: #1a6fc4; }
.c-explain1 .badge-green { --badge: #3c9b4d; }
.c-explain1 .badge-gray { --badge: #777; }

/* ══ Boxes (the スタイル menu: ボックス) ═════════════════════════════════════════════ */
/* Every box: its colours come from the custom properties set per kind below. */
.c-explain1 :is(.memo-box, .alert-box, .ok-box, .ng-box, .good-box, .information-box, .question-box, .info-box, .success-box, .warning-box, .danger-box, .blank-box, .sticky) {
  margin-block: 1.5em;
  padding: 1em 1.25em;
  border: 1px solid var(--box-line, transparent);
  border-radius: 4px;
  background: var(--box-bg, transparent);
  line-height: 1.8;
  color: var(--box-text, inherit);
}
.c-explain1 :is(.memo-box, .alert-box, .ok-box, .ng-box, .good-box, .information-box, .question-box, .info-box, .success-box, .warning-box, .danger-box, .blank-box, .sticky) > :first-child {
  margin-top: 0;
}
.c-explain1 :is(.memo-box, .alert-box, .ok-box, .ng-box, .good-box, .information-box, .question-box, .info-box, .success-box, .warning-box, .danger-box, .blank-box, .sticky) > :last-child {
  margin-bottom: 0;
}
.c-explain1 :is(.memo-box, .alert-box, .ok-box, .ng-box, .good-box, .information-box, .question-box, .info-box, .success-box, .warning-box, .danger-box, .blank-box, .sticky) :is(ul, ol) {
  margin-block: 0.25em 0;
  padding: 0 0 0 1.4em;
  border-radius: 0;
  background: none;
  list-style: disc;
}
.c-explain1 :is(.memo-box, .alert-box, .ok-box, .ng-box, .good-box, .information-box, .question-box, .info-box, .success-box, .warning-box, .danger-box, .blank-box, .sticky) ol {
  list-style: decimal;
}
.c-explain1 :is(.memo-box, .alert-box, .ok-box, .ng-box, .good-box, .information-box, .question-box, .info-box, .success-box, .warning-box, .danger-box, .blank-box, .sticky) li {
  padding-left: 0;
}
.c-explain1 :is(.memo-box, .alert-box, .ok-box, .ng-box, .good-box, .information-box, .question-box, .info-box, .success-box, .warning-box, .danger-box, .blank-box, .sticky) li::before {
  content: none;
}
.c-explain1 :is(.memo-box, .alert-box, .ok-box, .ng-box, .good-box, .information-box, .question-box, .info-box, .success-box, .warning-box, .danger-box, .blank-box, .sticky) p + p {
  margin-top: 0.5em;
}

/* ボックス（アイコン）: an icon on the left and a thin line before the text */
.c-explain1 .common-icon-box {
  position: relative;
  min-height: 3.6em;
  padding-left: 4.4em;
}
.c-explain1 .common-icon-box::before {
  content: var(--box-icon);
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border: var(--box-ring, 0) solid var(--box-mark);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 1em;
  translate: 0 -50%;
  background: var(--box-dot, var(--box-mark));
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  color: white;
}
.c-explain1 .common-icon-box::after {
  content: "";
  width: 1px;
  position: absolute;
  top: 1em;
  bottom: 1em;
  left: 3.6em;
  background: var(--box-line);
}
.c-explain1 .memo-box { --box-bg: #f0faf5; --box-line: #a9dcc3; --box-mark: #5cbf91; --box-icon: "✎"; --box-dot: transparent; }
.c-explain1 .memo-box::before { color: var(--box-mark); font-size: 1.5em; }
.c-explain1 .alert-box { --box-bg: #fff4f4; --box-line: #f5c4c4; --box-mark: #ef8e8e; --box-icon: "!"; }
.c-explain1 .information-box { --box-bg: #f2f9fd; --box-line: #b9dcf2; --box-mark: #59b4e6; --box-icon: "i"; }
.c-explain1 .question-box { --box-bg: #fffbe6; --box-line: #f5dc6a; --box-mark: #f3c623; --box-icon: "?"; }
.c-explain1 .good-box { --box-bg: #f3fbf1; --box-line: #bfe4b8; --box-mark: #6cc261; --box-icon: "✓"; }
.c-explain1 .ok-box { --box-bg: #f2f8fd; --box-line: #b6d8ef; --box-mark: #3aa3d6; --box-icon: ""; --box-ring: 3px; --box-dot: transparent; }
.c-explain1 .ng-box { --box-bg: #fff4f4; --box-line: #f5c4c4; --box-mark: #e25c5c; --box-icon: "✕"; }

/* ボックス（案内）: plain coloured boxes */
.c-explain1 .info-box { --box-bg: #dcf0f4; --box-text: #24606f; }
.c-explain1 .success-box { --box-bg: #e3f4e1; --box-text: #2c6526; }
.c-explain1 .warning-box { --box-bg: #fff3d6; --box-text: #7a5300; }
.c-explain1 .danger-box { --box-bg: #fde4e4; --box-text: #8c1d1d; }

/* ボックス（白抜き）: a coloured frame on white */
.c-explain1 .blank-box { --box-line: #ccc; background: white; border-width: 2px; }
.c-explain1 .blank-box.bb-red { --box-line: #f6211a; }
.c-explain1 .blank-box.bb-yellow { --box-line: #f3c623; }
.c-explain1 .blank-box.bb-blue { --box-line: #3aa3d6; }
.c-explain1 .blank-box.bb-green { --box-line: #5cbf91; }

/* ボックス（タブ）: a frame with a label tab on its top-left corner */
.c-explain1 .blank-box.bb-tab {
  margin-top: 2.6em;
  padding-top: 1.2em;
  position: relative;
  border-radius: 0 4px 4px;
}
.c-explain1 .blank-box.bb-tab::before {
  content: var(--tab-label);
  padding: 0.15em 1em;
  border-radius: 4px 4px 0 0;
  position: absolute;
  bottom: 100%;
  left: -2px;
  background: var(--box-line);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.8;
  color: white;
}
.c-explain1 .blank-box.bb-point { --box-line: #f6211a; --tab-label: "POINT"; }
.c-explain1 .blank-box.bb-check { --box-line: #3aa3d6; --tab-label: "チェック"; }
.c-explain1 .blank-box.bb-memo { --box-line: #5cbf91; --tab-label: "メモ"; }
.c-explain1 .blank-box.bb-attention { --box-line: #f3a623; --tab-label: "注意"; }

/* ボックス（付箋風）: a coloured strip on the left edge of a pale note */
.c-explain1 .sticky {
  border: 0;
  border-left: 8px solid var(--box-line);
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.c-explain1 .sticky.st-red { --box-line: #f6211a; --box-bg: #fff1f1; }
.c-explain1 .sticky.st-yellow { --box-line: #f3c623; --box-bg: #fffbe6; }
.c-explain1 .sticky.st-blue { --box-line: #3aa3d6; --box-bg: #eef7fd; }
.c-explain1 .sticky.st-green { --box-line: #5cbf91; --box-bg: #effaf4; }

/* ══ ボタン・マイクロコピー (the スタイル menu, or the ボタン block) ═══════════════════════ */
/* マイクロコピー: a short centred line with ＼ ／, usually just above a button */
.c-explain1 .micro-copy {
  margin-bottom: -0.4em;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #f6211a;
}
.c-explain1 .micro-copy::before {
  content: "＼ ";
}
.c-explain1 .micro-copy::after {
  content: " ／";
}
/* Buttons: the site's red pill with an arrow; 黄色 and 白抜き (outline) as styles */
.c-explain1 .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block: 1.5em;
}
.c-explain1 .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 260px;
  justify-content: center;
  padding: 12px 32px;
  border: 2px solid #f6211a;
  border-radius: 999px;
  background: #f6211a;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: white;
  text-decoration: none;
  transition: opacity 0.3s;
}
.c-explain1 .wp-block-button__link::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  flex-shrink: 0;
}
.c-explain1 .wp-block-button__link:hover {
  opacity: 0.8;
}
.c-explain1 .wp-block-button.is-style-yellow .wp-block-button__link {
  border-color: #ffd700;
  background: #ffd700;
  color: #111;
}
.c-explain1 .wp-block-button.is-style-outline .wp-block-button__link {
  background: white;
  color: #f6211a;
}
/* 囲みボタン: the buttons on a pale pink panel */
.c-explain1 .wp-block-buttons.is-style-boxed {
  padding: 24px 16px;
  border: 2px solid #ffd4d4;
  border-radius: 8px;
  background: #fff8f8;
}

/* ══ 関連記事カード (the block) and the おすすめ記事 cards pasted as HTML ════════════ */
/* Same as the Customizer's Additional CSS, so the editor shows it too */
.c-explain1 .c-recommend-box {
  max-width: 600px;
  margin: 20px auto;
  border: 2px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}
.c-explain1 .c-recommend-box:hover {
  transform: scale(1.02);
}
.c-explain1 .c-recommend-box__link {
  display: flex;
  color: inherit;
  text-decoration: none;
}
.c-explain1 .c-recommend-box__img {
  flex: 0 0 auto;
  width: 250px;
}
.c-explain1 .c-recommend-box__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 710 / 420;
  object-fit: cover;
}
.c-explain1 .c-recommend-box__noimage {
  display: grid;
  place-items: center;
  aspect-ratio: 710 / 420;
  background: #f2f2f2;
  font-family: serif;
  color: #c8c8c8;
}
.c-explain1 .c-recommend-box__title {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 15px;
  font-size: 17px;
  font-weight: 700;
}
/* ラベル (関連記事, あわせて読みたい, …) on the card's top-left corner */
.c-explain1 .c-recommend-box__label {
  padding: 2px 12px;
  border-radius: 0 0 6px 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #f6211a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: white;
}
.c-explain1 .c-recommend-box__missing {
  padding: 12px;
  border: 1px dashed #ccc;
  text-align: center;
  color: #888;
}
@media screen and (max-width: 600px) {
  .c-explain1 .c-recommend-box {
    width: 60%;
  }
  .c-explain1 .c-recommend-box__link {
    flex-direction: column;
  }
  .c-explain1 .c-recommend-box__img {
    width: 100%;
  }
  .c-explain1 .c-recommend-box__title {
    padding: 10px 15px;
    font-size: 16px;
  }
}

/* ══ The moved articles' own markup (scripts/import-company-columns.py) ════════════ */
/* 表: header row and first column in pink, as on the old site */
.c-explain1 .c-column-table {
  margin-block: 1.5em;
  overflow-x: auto;
}
.c-explain1 .c-column-table table {
  width: 100%;
  min-width: 32em;
  border-collapse: collapse;
}
.c-explain1 .c-column-table :is(th, td) {
  padding: 0.6em 0.8em;
  border: 1px solid #f3b9b6;
  line-height: 1.6;
  text-align: left;
}
.c-explain1 .c-column-table thead th {
  background: #ffd4d4;
  text-align: center;
}
.c-explain1 .c-column-table tbody tr > :first-child {
  background: #fff8f8;
}
/* 「横にスクロールできます」 above the table (functions/column-editor.php adds it as
   text, so the translator translates it). Only in the phone layout: there the table
   (min 32em, and the font grows with the screen) is wider than the column at every
   width up to the site's 744px breakpoint, so it scrolls sideways, which phones don't
   show until touched. */
.c-explain1 .c-column-table__hint {
  display: none;
}
@media screen and (max-width: 743px) {
  .c-explain1 .c-column-table__hint {
    display: block;
    margin: 1.5em 0 6px;
    font-size: 12px;
    text-align: center;
    color: #888;
  }
  .c-explain1 .c-column-table__hint + .c-column-table {
    margin-top: 0;
  }
}

/* 自社支援のバナー inside the articles */
.c-explain1 .c-column-banner {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto;
}

/* ══ PC: the text a size up (修正・公開のご依頼 2026-10-08, request 2) ══════════════════
   Body 16 → 18 (it still follows the screen width through --vw, like the rest of the
   site), and the headings and the yellow-box lists by the same step so they stay above
   it. On the site the size is set on the body's box: in the older full-page columns the
   author box, contact, merits and strengths sit in that box too, so they're set back
   to the site's 16 (the author box has its own 14px). The editor gets 18px from
   column-editor.php; the .c-single1 rules match nothing there. */
@media all and (min-width: 744px) {
  .c-single1 .c-explain1__inner {
    font-size: max(calc(18 * var(--vw)), calc(15.75 * var(--fmin)));
  }
  .c-single1 .c-explain1__inner > :is(.c-contact1, .c-merit1, .c-strength1) {
    font-size: max(calc(16 * var(--vw)), calc(14 * var(--fmin)));
  }
  /* Older columns: the Customizer's (追加 CSS) 20 / 18 / 16px and 1.1rem lists */
  .c-single1 .c-explain1__inner .custom-h2 {
    font-size: 22px;
  }
  .c-single1 .c-explain1__inner h3.wp-block-heading {
    font-size: 20px;
  }
  .c-single1 .c-explain1__inner h4.wp-block-heading {
    font-size: 18px;
  }
  .c-single1 .c-explain1__inner .c-bulletbox li {
    font-size: 1.1em;
  }
  /* Columns written with blocks */
  .c-explain1 .c-column h2.wp-block-heading {
    font-size: 24px;
  }
  .c-explain1 .c-column h3.wp-block-heading {
    font-size: 20px;
  }
  .c-explain1 .c-column h4.wp-block-heading {
    font-size: 18px;
  }
}