@charset "UTF-8";
/* CSS Document
   Additional styles for the current site update.
   - style.css is the existing master CSS and should normally be referenced, not modified.
   - This file collects update-specific additions: rtbl component and added section components.
   - Keep sections separated by comment blocks; do not mix component rules casually.
*/

/******************************************************************************************************

    rtbl component
    横スクロール対応表コンポーネント。

*******************************************************************************************************/

/* ==========================================================================
   rtbl component - horizontal scroll only base
   --------------------------------------------------------------------------
   - PC display is the primary target.
   - SP display uses horizontal scroll only.
   - No sticky header, no scroll gate, no vertical inner-table scroll.
   - Designed to work inside the existing .contents-section > .container layout.

   CSS operation policy:
   1. core        : shared rtbl structure and generated SP helper elements
   2. type        : table-specific structure differences, e.g. column count / row height
   3. theme       : table-specific colors via CSS variables
   4. overrides   : pin-point adjustments must be scoped by table modifier

   Do not customize a new table by changing core rules first.
   Add or adjust a table modifier such as .rtbl--kpi / .rtbl--initiatives.
   ========================================================================== */

.rtbl,
.rtbl * {
  transition: none;
}

.rtbl {
  --rtbl-fz: clamp(14px, 1.55vw, 15.5px);
  --rtbl-lh: 1.45;
  --rtbl-note-scale: 0.78;
  --rtbl-note-lh: 1.35;
  --rtbl-note-gap: 2px;
  --rtbl-sp-extra-w: calc(var(--rtbl-yr-w) * 6);
  --rtbl-row-h: calc(
    (var(--rtbl-fz) * var(--rtbl-lh)) +
    (var(--rtbl-fz) * var(--rtbl-note-scale) * var(--rtbl-note-lh)) +
    var(--rtbl-note-gap) +
    (var(--rtbl-pad-y) * 2)
  );

  font-size: var(--rtbl-fz);
}

/* type: KPI table. Two-line row model: main label + note. */
.rtbl--kpi {
  --rtbl-cat-w: 26%;
  --rtbl-yr-w: 68px;

  --rtbl-pad-y: 11px;
  --rtbl-pad-x: 14px;
  --rtbl-yr-pad-x: 5px;
}
.rtbl--kpi2 {
  --rtbl-cat-w: 28%;
  --rtbl-yr-w: 66px;

  --rtbl-pad-y: 11px;
  --rtbl-pad-x: 14px;
  --rtbl-yr-pad-x: 5px;
}

/* type: initiatives table. One-line row model, no year/value columns. */
.rtbl--initiatives {
  --rtbl-sp-extra-w: 0px;
  --rtbl-row-h: calc(
    (var(--rtbl-fz) * var(--rtbl-lh)) +
    (var(--rtbl-pad-y) * 2)
  );
}

.rtbl--theme-initiatives {
  --rtbl-text: rgba(0, 0, 0, 1);
  --rtbl-border: rgba(255, 255, 255, 1);

  --rtbl-head-main: rgba(198, 235, 217, 1);
  --rtbl-head-sub: rgba(233, 250, 242, 1);

  --rtbl-row-a: rgba(246, 255, 252, 1);
  --rtbl-row-b: rgba(233, 250, 242, 1);

  --rtbl-col-a: rgba(246, 255, 252, 1);
  --rtbl-col-b: rgba(227, 250, 240, 1);

  --rtbl-cat-a: rgba(246, 255, 252, 1);
  --rtbl-cat-b: rgba(233, 250, 242, 1);

  --rtbl-line-h: rgba(130, 140, 136, 1);
  --rtbl-line-v: rgba(255, 255, 255, 1);
  --rtbl-note: rgba(30, 30, 30, 1);
}

.rtbl--initiatives .rtbl__hcat,
.rtbl--initiatives .rtbl__hlbl {
  background: var(--rtbl-head-main);
}

.rtbl--initiatives .rtbl__lbl {
  font-weight: 500;
}

.rtbl--theme-health {
  --rtbl-text: rgba(0, 0, 0, 1);
  --rtbl-border: rgba(255, 255, 255, 1);

  --rtbl-head-main: rgba(198, 235, 217, 1);
  --rtbl-head-sub: rgba(233, 250, 242, 1);

  --rtbl-row-a: rgba(246, 255, 252, 1);
  --rtbl-row-b: rgba(233, 250, 242, 1);

  --rtbl-col-a: rgba(246, 255, 252, 1);
  --rtbl-col-b: rgba(227, 250, 240, 1);

  --rtbl-cat-a: rgba(246, 255, 252, 1);
  --rtbl-cat-b: rgba(233, 250, 242, 1);

  --rtbl-line-h: rgba(130, 140, 136, 1);
  --rtbl-line-v: rgba(255, 255, 255, 1);
  --rtbl-note: rgba(30, 30, 30, 1);
}

.rtbl__scrl {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rtbl__tbl {
  width: 1000px;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--rtbl-text);
}

.rtbl__cap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rtbl__col-cat {
  width: var(--rtbl-cat-w);
}

.rtbl__col-lbl {
  width: auto;
}

.rtbl__col-yr {
  width: var(--rtbl-yr-w);
}

.rtbl__grp,
.rtbl__hcat,
.rtbl__hlbl,
.rtbl__yr,
.rtbl__cat,
.rtbl__lbl,
.rtbl__val {
  border: 0;
  border-right: 2px solid var(--rtbl-line-v);
  border-bottom: 1px solid var(--rtbl-line-h);
  height: var(--rtbl-row-h);
  line-height: var(--rtbl-lh);
  vertical-align: middle;
}

.rtbl__grp,
.rtbl__hcat,
.rtbl__hlbl,
.rtbl__yr,
.rtbl__cat,
.rtbl__lbl {
  font-weight: 700;
}

.rtbl__val {
  font-weight: 500;
}

.rtbl__grp,
.rtbl__hcat,
.rtbl__hlbl,
.rtbl__cat,
.rtbl__lbl {
  padding: var(--rtbl-pad-y) var(--rtbl-pad-x);
}

.rtbl__yr,
.rtbl__val {
  padding: var(--rtbl-pad-y) var(--rtbl-yr-pad-x);
  text-align: center;
}

.is-pad-x-0 {
  padding-left: 0;
  padding-right: 0;
}

.rtbl__grp {
  background: var(--rtbl-head-main);
  text-align: center;
}

.rtbl__hcat,
.rtbl__hlbl,
.rtbl__yr {
  background: var(--rtbl-head-sub);
}

.rtbl__hcat,
.rtbl__hlbl,
.rtbl__cat,
.rtbl__lbl {
  text-align: left;
}

.rtbl__head tr:first-child > * {
  border-top: 1px solid var(--rtbl-line-h);
}

.rtbl__body tr:last-child > * {
  border-bottom: 1px solid var(--rtbl-line-h);
}

.rtbl__grp:last-child,
.rtbl__yr:last-child,
.rtbl__val:last-child {
  border-right: 0;
}

.rtbl--initiatives .rtbl__hlbl,
.rtbl--initiatives .rtbl__lbl:last-child {
  border-right: 0;
}

.rtbl__note {
  display: block;
  margin-top: var(--rtbl-note-gap);
  color: var(--rtbl-note);
  font-size: calc(1em * var(--rtbl-note-scale));
  line-height: var(--rtbl-note-lh);
  font-weight: 500;
}

.has-cat-blank.is-cat-a .rtbl__cat {
  border-bottom-color: var(--rtbl-cat-a);
}

.has-cat-blank.is-cat-b .rtbl__cat {
  border-bottom-color: var(--rtbl-cat-b);
}

.is-cat-a .rtbl__cat-blank {
  border-bottom-color: var(--rtbl-cat-a);
}

.is-cat-b .rtbl__cat-blank {
  border-bottom-color: var(--rtbl-cat-b);
}

.is-cat-end .rtbl__cat-blank {
  border-bottom-color: var(--rtbl-line-h);
}

.is-row-a .rtbl__lbl {
  background: var(--rtbl-row-a);
}

.is-row-b .rtbl__lbl {
  background: var(--rtbl-row-b);
}

.rtbl--theme-health :is(.is-col-01, .is-col-03, .is-col-05).rtbl__yr,
.rtbl--theme-health :is(.is-col-01, .is-col-03, .is-col-05).rtbl__val {
  background: var(--rtbl-col-a);
}

.rtbl--theme-health :is(.is-col-02, .is-col-04, .is-col-06).rtbl__yr,
.rtbl--theme-health :is(.is-col-02, .is-col-04, .is-col-06).rtbl__val {
  background: var(--rtbl-col-b);
}

.is-cat-a .rtbl__cat {
  background: var(--rtbl-cat-a);
}

.is-cat-b .rtbl__cat {
  background: var(--rtbl-cat-b);
}


@media (max-width: 767px) {
  .page {
    padding: 32px 0;
  }

  .page__ttl {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .rtbl {
    --rtbl-fz: clamp(14px, 4vw, 18px);
    --rtbl-yr-w: 4.2em;
    --rtbl-sp-cat-pad-w: var(--rtbl-pad-x);
    --rtbl-sp-cat-shift: calc(var(--rtbl-sp-cat-pad-w) + 1em);
    --rtbl-sp-yr-a: rgba(255, 255, 255, 1);
    --rtbl-sp-yr-b: rgba(246, 254, 252, 1);
    --rtbl-sp-head-sub-total-h: var(--rtbl-row-h);
    --rtbl-sp-head-sub-row-h: calc(var(--rtbl-sp-head-sub-total-h) / 2);

    margin-left: -20px;
    margin-right: -20px;
  }

  .rtbl__scrl {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
  }

  .rtbl__tbl {
    width: max-content;
    min-width: 100%;
  }

  .rtbl__col-cat {
    width: var(--rtbl-sp-cat-pad-w);
  }

  .rtbl__col-lbl {
    width: auto;
  }

  .rtbl__col-yr {
    width: var(--rtbl-yr-w);
  }

  .rtbl__lbl {
    white-space: nowrap;
  }

  .rtbl__sp-cat-row {
    display: table-row;
  }

  .rtbl__sp-cat {
    padding: var(--rtbl-pad-y) var(--rtbl-pad-x);
    border: 0;
    border-bottom: 1px solid var(--rtbl-line-h);
    font-weight: 700;
    line-height: var(--rtbl-lh);
    text-align: left;
  }

  .rtbl__sp-cat {
    background: rgba(255, 255, 255, 1);
    overflow: visible;
  }

  .rtbl__sp-yr.is-col-01,
  .rtbl__sp-yr.is-col-03,
  .rtbl__sp-yr.is-col-05 {
    background: var(--rtbl-sp-yr-a);
  }

  .rtbl__sp-yr.is-col-02,
  .rtbl__sp-yr.is-col-04,
  .rtbl__sp-yr.is-col-06 {
    background: var(--rtbl-sp-yr-b);
  }

  .rtbl__sp-cat-pad,
  .rtbl__sp-cat,
  .rtbl__sp-yr {
    height: var(--rtbl-row-h);
    vertical-align: middle;
  }

  .rtbl__sp-yr {
    border-right: 2px solid var(--rtbl-line-v);
    border-bottom: 1px solid var(--rtbl-line-h);
  }

  .rtbl__sp-cat-pad {
    width: var(--rtbl-sp-cat-pad-w);
    background: rgba(255, 255, 255, 1);
  }

  /* SP: table head alignment */
  .rtbl__hcat {
    padding-left: 0;
    padding-right: 0;
  }

  .rtbl__head .rtbl__sp-head-cat-inner {
    display: none;
  }

  /* SP: generated table head base cells */
  .rtbl__sp-head-grp,
  .rtbl__sp-head-pad,
  .rtbl__sp-head-cat,
  .rtbl__sp-head-lbl,
  .rtbl__sp-head-yr {
    border: 0;
    border-right: 2px solid var(--rtbl-line-v);
    border-bottom: 1px solid var(--rtbl-line-h);
    height: var(--rtbl-row-h);
    line-height: var(--rtbl-lh);
    vertical-align: middle;
    font-weight: 700;
    padding: var(--rtbl-pad-y) var(--rtbl-pad-x);
  }

  /* SP: generated table head group row */
  .rtbl__sp-head-grp {
    background: var(--rtbl-head-main);
    text-align: center;
  }

  .rtbl__sp-head-grp-row > * {
    border-top: 1px solid var(--rtbl-line-h);
  }

  .rtbl__sp-head-grp.is-pad-x-0 {
    padding-left: 0;
    padding-right: 0;
  }

  /* SP: generated table head item rows */
  .rtbl__sp-head-cat-row .rtbl__sp-head-pad,
  .rtbl__sp-head-cat {
    background: rgba(255, 255, 255, 1);
  }

  .rtbl__sp-head-lbl-row .rtbl__sp-head-pad {
    background: rgba(255, 255, 255, 1);
  }

  .rtbl__sp-head-lbl {
    background: var(--rtbl-row-a);
  }

  .rtbl__sp-head-cat-row .rtbl__sp-head-pad {
    border-bottom: 0;
  }

  .rtbl__sp-head-cat-row .rtbl__sp-head-pad,
  .rtbl__sp-head-lbl-row .rtbl__sp-head-pad {
    border-right: 0;
  }

  .rtbl__sp-head-cat,
  .rtbl__sp-head-lbl {
    text-align: left;
  }

  .rtbl__sp-head-cat-inner,
  .rtbl__sp-head-lbl-inner {
    display: block;
  }

  .rtbl__head {
    display: none;
  }

  .rtbl__sp-head-cat-inner {
    margin-left: calc(var(--rtbl-sp-cat-shift) * -1);
    width: calc(100% + var(--rtbl-sp-cat-shift));
    white-space: nowrap;
  }

  .rtbl__sp-head-cat-row .rtbl__sp-head-pad,
  .rtbl__sp-head-cat,
  .rtbl__sp-head-lbl-row .rtbl__sp-head-pad,
  .rtbl__sp-head-lbl {
    height: var(--rtbl-sp-head-sub-row-h);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* SP: generated table head year cells */
  .rtbl__sp-head-yr {
    height: var(--rtbl-sp-head-sub-total-h);
    padding: var(--rtbl-pad-y) var(--rtbl-yr-pad-x);
    text-align: center;
  }

  .rtbl__sp-head-yr.is-col-01,
  .rtbl__sp-head-yr.is-col-03,
  .rtbl__sp-head-yr.is-col-05 {
    background: var(--rtbl-col-a);
  }

  .rtbl__sp-head-yr.is-col-02,
  .rtbl__sp-head-yr.is-col-04,
  .rtbl__sp-head-yr.is-col-06 {
    background: var(--rtbl-col-b);
  }

  .rtbl__sp-head-yr:last-child {
    border-right: 0;
  }

  .rtbl__sp-cat-inner {
    display: block;
    margin-left: calc(var(--rtbl-sp-cat-shift) * -1);
    width: calc(100% + var(--rtbl-sp-cat-shift) + var(--rtbl-sp-extra-w));
    white-space: nowrap;
  }

  .rtbl__sp-cat .rtbl__note {
    display: inline;
    margin-top: 0;
    margin-left: 0.35em;
    line-height: inherit;
    vertical-align: baseline;
  }


  /* SP: generated header bottom rule alignment
     Keep border-collapse: collapse.
     The generated SP header combines half-height cells with rowspan year cells;
     on some mobile browsers their collapsed bottom borders can render with
     slightly different visual weight. Draw only the final bottom rule as a
     cell-local inset line without changing the table-wide border model. */
  .rtbl__sp-head-lbl-row .rtbl__sp-head-pad,
  .rtbl__sp-head-lbl,
  .rtbl__sp-head-yr {
    border-bottom-color: transparent;
    box-shadow: inset 0 -1px 0 var(--rtbl-line-h);
  }

  .rtbl__body .rtbl__cat .rtbl__cat-main,
  .rtbl__body .rtbl__cat > .rtbl__note {
    display: none;
  }

  .rtbl__body .rtbl__cat {
    border-right: 0;
  }

  .rtbl__body .rtbl__cat {
    background: rgba(255, 255, 255, 1);
  }
  /* table-specific SP overrides: initiatives table */
  .rtbl--initiatives .rtbl__sp-head-cat-row > * {
    border-top: 1px solid var(--rtbl-line-h);
  }

  .rtbl--initiatives .rtbl__sp-head-cat-row .rtbl__sp-head-pad,
  .rtbl--initiatives .rtbl__sp-head-lbl-row .rtbl__sp-head-pad,
  .rtbl--initiatives .rtbl__sp-head-cat,
  .rtbl--initiatives .rtbl__sp-head-lbl {
    background: var(--rtbl-head-main);
  }

  .rtbl--initiatives .rtbl__lbl {
    white-space: normal;
  }

}

/******************************************************************************************************

    Added section components
    新規追加section用の共通表現。

*******************************************************************************************************/

/******************************************************************************************************

    Statement List
    小見出し＋本文の縦並びブロック。
    既存Attemptの「小見出し＋2行目」の密度感を参照しつつ、アイコンなし・横幅100%の追加section用に整理する。

*******************************************************************************************************/

.statement-list__item {
	border-top: 1px solid #999999;
	padding: 16px 20px 18px;
}

.statement-list__item:nth-child(odd) {
	background-color: var(--col-row-1);
}

.statement-list__item:last-child {
	border-bottom: 1px solid #999999;
}

.statement-list__title {
	font-size: var(--f-size-subtitle);
	line-height: var(--lth-subtitle);
	font-weight: bold;
	margin-bottom: 0;
}

.statement-list__text {
	margin: 0;
}

@media only screen and (max-width: 767px) {
.statement-list__item {
	padding: 15px 10px;
}

.statement-list__title {
	margin-bottom: 0;
}
}

/******************************************************************************************************

    Form control reset
    ブラウザ標準装飾を持つ操作要素のうち、buttonを追加UIの土台として使う際の最小限リセット。
    幅・display・レイアウトは各コンポーネント側で定義する。

*******************************************************************************************************/

.button-reset {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    border: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
}

/******************************************************************************************************

    Attempt focus viewer / PC base
    新Attempt第1部のPC基本レイアウト。
    container内幅1000px時に viewer 600px + gap 20px + items 380px、左右高640pxで揃える。
    中間幅・SP・画像切替JSは後続Revisionで扱う。

*******************************************************************************************************/

.attempt-focus__lead {
    margin: 0 0 24px;
    padding: 0 20px;
}

.attempt-focus__layout {
    display: grid;
    grid-template-columns: 600px 380px;
    column-gap: 20px;
    align-items: stretch;
}

.attempt-focus__viewer {
    position: relative;
    width: 600px;
    height: 640px;
    overflow: hidden;
/*    border: 1px solid var(--col-green);*/
    background: #f2f2f2;
    background: transparent;
}

.attempt-focus__view {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.attempt-focus__view.is-active {
    opacity: 1;
    visibility: visible;
}

.attempt-focus__view img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media (prefers-reduced-motion: reduce) {
    .attempt-focus__view {
        transition: none;
    }
}

.attempt-focus__items {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    row-gap: 10px;
    width: 380px;
    height: 640px;
}

.attempt-focus__item {
    --attempt-card-bg: #b5dbc7;
    --attempt-card-hover: var(--col-green-2);
    width: 100%;
    min-height: 0;
    padding: 10px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--col-f-nml);
    background-color: var(--attempt-card-bg);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.28s ease;
}

.attempt-focus__item:hover,
.attempt-focus__item:focus-visible {
    color: var(--col-f-w);
    background-color: var(--attempt-card-hover);
}

/*
 * 1〜4個に対応するアイコングループ。
 * 1個：単体、2個：1段横並び、3個：上段中央1個＋下段2個、4個：2段2列。
 */
.attempt-focus__icon-group {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    display: grid;
    overflow: hidden;
}

.attempt-focus__icon-group i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.attempt-focus__icon-group--1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.attempt-focus__icon-group--2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    gap: 4px;
    align-items: center;
}

.attempt-focus__icon-group--3,
.attempt-focus__icon-group--4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
}

.attempt-focus__icon-group--3 i:first-child {
    grid-column: 1 / 3;
    justify-self: center;
    width: calc((100% - 4px) / 2);
}

.attempt-focus__icon-group .icn-attempt-1 { background-image: url(../img/icn-attempt-1.svg); }
.attempt-focus__icon-group .icn-attempt-2 { background-image: url(../img/icn-attempt-2.svg); }
.attempt-focus__icon-group .icn-attempt-3 { background-image: url(../img/icn-attempt-3.svg); }
.attempt-focus__icon-group .icn-attempt-4 { background-image: url(../img/icn-attempt-4.svg); }
.attempt-focus__icon-group .icn-attempt-5 { background-image: url(../img/icn-attempt-5.svg); }
.attempt-focus__icon-group .icn-attempt-6 { background-image: url(../img/icn-attempt-6.svg); }
.attempt-focus__icon-group .icn-attempt-7 { background-image: url(../img/icn-attempt-7.svg); }

.attempt-focus__body {
    min-width: 0;
    display: block;
}

.attempt-focus__title,
.attempt-focus__text {
    display: block;
    color: var(--col-f-nml);
    white-space: nowrap;
    transition: color 0.06s linear;
}

.attempt-focus__item:hover .attempt-focus__title,
.attempt-focus__item:hover .attempt-focus__text,
.attempt-focus__item:focus-visible .attempt-focus__title,
.attempt-focus__item:focus-visible .attempt-focus__text {
    color: var(--col-f-w);
}

.attempt-focus__title {
    font-size: 23px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.attempt-focus__text {
    margin-top: 3px;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}

/******************************************************************************************************

    Attempt focus viewer / intermediate width
    768px〜1039pxでは右側380pxを維持し、左viewerだけを残り幅に合わせて縮小する。
    SP切替は後続Revisionで扱う。

*******************************************************************************************************/

@media only screen and (min-width: 768px) and (max-width: 1039px) {
    .attempt-focus__layout {
        grid-template-columns: minmax(0, 1fr) 380px;
    }

    .attempt-focus__viewer {
        width: 100%;
        min-width: 0;
    }
}

/******************************************************************************************************

    Attempt focus viewer / SP
    767px以下ではviewerを非表示にし、5項目のみを縦並びで表示する。
    PCと同じHTML構造を維持し、将来のタップ／モーダル拡張に備えてbutton構造は残す。

*******************************************************************************************************/

@media only screen and (max-width: 767px) {
    .attempt-focus {
        margin: 40px 0 60px;
    }

    .attempt-focus__lead {
        margin: 0 0 20px;
        padding: 0;
    }

    .attempt-focus__layout {
        display: block;
    }

    .attempt-focus__viewer {
        display: none;
    }

    .attempt-focus__items {
        width: 100%;
        max-width: 560px;
        height: auto;
        margin: 0 auto;
        grid-template-rows: none;
        row-gap: 12px;
    }

    .attempt-focus__item {
        min-height: 108px;
        padding: 10px 14px;
        border-radius: 18px;
        gap: 14px;
    }

    .attempt-focus__item:hover,
    .attempt-focus__item:focus-visible {
        color: var(--col-f-nml);
        background-color: var(--attempt-card-bg);
    }

    .attempt-focus__item:hover .attempt-focus__title,
    .attempt-focus__item:hover .attempt-focus__text,
    .attempt-focus__item:focus-visible .attempt-focus__title,
    .attempt-focus__item:focus-visible .attempt-focus__text {
        color: var(--col-f-nml);
    }

    .attempt-focus__icon-group {
        flex-basis: 88px;
        width: 88px;
        height: 88px;
    }

    .attempt-focus__title {
        font-size: 20px;
        line-height: 1.35;
        font-weight: 500;
        letter-spacing: 0.03em;
    }

    .attempt-focus__text {
        margin-top: 2px;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 400;
    }
}

/******************************************************************************************************

    System visual / PC-SP SVG placeholder
    PC・SPそれぞれの完成SVGへ後日差し替える前提。
    表示幅はコンテンツ領域100%、高さはSVGの縦横比に追従する。

*******************************************************************************************************/

.system-visual {
    width: 100%;
}

.system-visual__image {
    display: block;
    width: 100%;
    height: auto;
}

.system-visual__image--sp {
    display: none;
}

@media only screen and (max-width: 767px) {
    .system-visual__image--pc {
        display: none;
    }

    .system-visual__image--sp {
        display: block;
    }
}

/******************************************************************************************************

    Strategy map
    見出し帯・理念本文はHTML/CSS、図本体はPC/SP共通SVG 1点で表示する。
    PCはコンテンツ幅に追随し、SPは高さ85vhを基準に横スクロールで閲覧する。

*******************************************************************************************************/

.strategy-map {
    width: 100%;
}

.strategy-map__philosophy-title {
    margin: 0;
    padding: 8px 20px;
    color: #fff;
    background-color: #e52532;
    border-radius: 20px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
}

.strategy-map__philosophy-text {
    margin: 18px 0 22px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
}

.strategy-map__scroll {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    line-height: 0;
}

.strategy-map__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
}

@media only screen and (max-width: 767px) {
    .strategy-map__philosophy-title {
        padding: 7px 14px;
        font-size: 16px;
        line-height: 1.5;
        text-align: left;
    }

    .strategy-map__philosophy-text {
        margin: 14px 0 18px;
        padding: 0;
        font-size: 14px;
        line-height: 1.8;
        text-align: left;
    }

    .strategy-map__scroll {
        width: auto;
        margin-inline: -20px;
        padding-inline: 20px;
        padding-bottom: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .strategy-map__image {
        width: auto;
        height: 85vh;
        max-height: 85dvh;
    }
}

/******************************************************************************************************

    Final section adjustments / sp_v15_r17

*******************************************************************************************************/

/* Attempt: keep each rounded icon tile white in all states. */
.attempt-focus__icon-group i {
    background-color: #fff;
}

/* KpiIndicator: top group labels are left-aligned except the target-value group. */
#KpiIndicator .rtbl__grp:nth-child(1),
#KpiIndicator .rtbl__grp:nth-child(2),
#KpiIndicator .rtbl__sp-head-grp:nth-child(1),
#KpiIndicator .rtbl__sp-head-grp:nth-child(2) {
    text-align: left;
}

@media only screen and (max-width: 767px) {
    /* KpiDashboard: each of the two generated header rows uses the normal body-row height. */
    #KpiDashboard .rtbl--initiatives {
        --rtbl-sp-head-sub-row-h: var(--rtbl-row-h);
    }

    #KpiDashboard .rtbl--initiatives .rtbl__sp-head-cat-row .rtbl__sp-head-pad,
    #KpiDashboard .rtbl--initiatives .rtbl__sp-head-cat,
    #KpiDashboard .rtbl--initiatives .rtbl__sp-head-lbl-row .rtbl__sp-head-pad {
        background: #fff;
    }

    #KpiDashboard .rtbl--initiatives .rtbl__sp-head-lbl {
        background: var(--rtbl-head-main);
    }

    #KpiDashboard .rtbl--initiatives .rtbl__sp-head-cat-row .rtbl__sp-head-pad,
    #KpiDashboard .rtbl--initiatives .rtbl__sp-head-cat,
    #KpiDashboard .rtbl--initiatives .rtbl__sp-head-lbl-row .rtbl__sp-head-pad,
    #KpiDashboard .rtbl--initiatives .rtbl__sp-head-lbl {
        height: var(--rtbl-row-h);
        padding-top: var(--rtbl-pad-y);
        padding-bottom: var(--rtbl-pad-y);
    }
}


/* =========================================================
   section内容領域の共通余白
   ========================================================= */

/*
  H3直後の余白を各コンテンツ側から分離し、共通ラッパーで一元管理する。
  PCは20px、SPは30pxとし、section末尾の余白はここでは持たない。
*/
.contents-section > .container > h3.contents-title {
  margin-bottom: 0;
}

.section-contents {
  margin-top: 20px;
}

@media only screen and (max-width: 767px) {
  .section-contents {
    margin-top: 30px;
  }
}

/* =========================================================
   v16_r9：本文系コンテンツの左右padding専用class
   ========================================================= */

/*
  有効sectionの本文系ブロックから、上下marginを持つ旧 .text-contents-inner を分離。
  このclassはPC時の左右paddingだけを担当し、H3直後・section末尾の余白は持たない。
*/
.content-padding-x {
  padding-inline: 20px;
}

@media only screen and (max-width: 767px) {
  .content-padding-x {
    padding-inline: 0;
  }
}

/* =========================================================
   v16_r8：Attempt「健康管理チャンネル」再構築版（有効）
   ========================================================= */

/*
  旧構造用CSSの参照先（ロールバック用として common/css/style.css に保持）：
  - .channel / .channel .inner
  - .movies / .movies .youtube
  - .movies .youtube iframe
  - .movies .youtube .t / .movies .youtube .t > a

  上記は、index.html内でコメントアウト退避した旧Attempt動画ブロック専用の指定。
  現行版は独立した新classを使用し、最終的な廃止判断まではmaster CSSを変更しない。

  再構築した理由：
  - 旧構造ではタイトルを16:9動画枠の外側へabsolute配置していた。
  - タイトル高さが通常フローに含まれず、7項目化後のSP間隔とsection末尾管理が難しくなった。
  - 現行構造では「1項目」「動画枠」「タイトル」の責務を分離し、タイトルも通常フローに含める。
*/

/* 後から続くブロック側が、直前のAttempt上部UIとの距離を管理する。 */
#Attempt .channel-rebuild {
  margin-top: 60px;
}

#Attempt .channel-rebuild__inner {
  padding: 0 30px;
}

/* 見出し装飾とPDFリンク装飾は、既存の共有classを意図的に併用する。 */
#Attempt .channel-rebuild__title,
#Attempt .channel-rebuild__document {
  /* 見た目は .contents-title と .link-block が担当。 */
}

#Attempt .channel-rebuild__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2%;
  row-gap: 30px;
  margin-top: 20px;
}

#Attempt .channel-rebuild__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
}

#Attempt .channel-rebuild__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

#Attempt .channel-rebuild__media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#Attempt .channel-rebuild__item-title {
  width: 100%;
  margin: 0;
  font: inherit;
}

#Attempt .channel-rebuild__item-title > a {
  font-weight: 500;
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  /* Attempt末尾は共通のsection間余白へ委ね、旧構造由来の追加余白を持たせない。 */
  #Attempt .channel-rebuild {
    margin-bottom: 0;
  }

  #Attempt .channel-rebuild__inner {
    padding: 0;
  }

  #Attempt .channel-rebuild__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  #Attempt .channel-rebuild__item {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  #Attempt .channel-rebuild__media {
    border: 1px solid #ccc;
  }

  #Attempt .channel-rebuild__item-title {
    margin-top: 5px;
    text-align: center;
  }
}


/* KpiBackground：旧 .text-block のSP文字揃えだけを移植。外側marginは持たせない。 */
@media only screen and (max-width: 767px) {
  #KpiBackground .text-justify-sp {
    text-align: justify;
  }
}

/* =========================================================
   v16_r12：Certification section末尾余白の分離
   ========================================================= */

/*
  .certification-contents は一覧レイアウトのみを担当し、
  section末尾の余白は共通側で管理するため、外側bottom marginを持たせない。
  子要素 .certification-item の行間用marginは今回の対象外。
*/
#Certification .certification-contents {
  margin-bottom: 0;
}

/* =========================================================
   v17_r1：Declaration section末尾余白の分離
   ========================================================= */

/*
  Declaration内の .text-block は、ブロック間の余白として既存marginを維持する。
  一方、最終ブロックのbottomはsection末尾へ漏らさず、section間余白は共通ルールへ委ねる。
  PCで .dec-text 自身が持っていたbottom marginも、内部レイアウト責務ではないため解除する。
*/
#Declaration .textimg-block .dec-text {
  margin-bottom: 0;
}

#Declaration .textimg-block .dec-text > .text-block:last-child {
  margin-bottom: 0;
}

/******************************************************************************************************

    SP main menu spacing adjustment

*******************************************************************************************************/

@media only screen and (max-width: 767px) {
  /* main-menuのタッチ領域は維持し、直後のSystemとの間隔だけをPCと同じ30pxへ戻す。 */
  .main-menu {
    margin-bottom: 30px;
  }
}

/******************************************************************************************************

    Footer Note spacing

*******************************************************************************************************/

/* footer-note上側は、直前のsectionとの関係として通常のsection間余白と同じ値で管理する。
   footer-note自身の下側余白は既存指定を維持する。 */
.contents-section + .footer-note {
  margin-top: 60px;
}

@media only screen and (max-width: 767px) {
  .contents-section + .footer-note {
    margin-top: 48px;
  }
}

/******************************************************************************************************

    SP image viewer / dialog_image_viewer v1.3 integration
    既存画像を複製して専用dialogへ表示するSP限定画像ビュワー。
    Attemptでは既存5ボタンを起動元として利用し、自動生成トリガーは使用しない。

*******************************************************************************************************/

.sp-image-viewer-trigger {
  display: none;
}

.sp-image-viewer-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #111;
  color: #fff;
  overflow: hidden;
}

.sp-image-viewer-dialog::backdrop {
  background: rgb(0 0 0 / 0.88);
}

.sp-image-viewer-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}

.sp-image-viewer-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}

.sp-image-viewer-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  transform-origin: center center;
  will-change: transform;
  /* 既存サイトの広域transitionによるピンチ追従遅延を防ぐ */
  transition: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.sp-image-viewer-toolbar {
  position: absolute;
  z-index: 2;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  touch-action: manipulation;
}

.sp-image-viewer-toolbar button {
  /* サイトの基準書体を継承し、健康サイトの基準文字サイズへ揃える */
  font-family: inherit;
  font-size: var(--f-size-nml);
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.65);
  color: #fff;
  pointer-events: auto;
  touch-action: manipulation;
}

.sp-image-viewer-toolbar button.is-unavailable {
  visibility: hidden;
  pointer-events: none;
}

.sp-image-viewer-close {
  position: absolute;
  z-index: 3;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.65);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  touch-action: manipulation;
}

.sp-image-viewer-status {
  position: absolute;
  z-index: 2;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.3;
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  .sp-image-viewer-trigger {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid #111;
    border-radius: 6px;
    background: #fff;
    color: #111;
  }
}