@charset "utf-8";
/*************************************************
 style.css
**************************************************/
/*
 ■前提 ＞ アクセシビリティ確保
 
 ■アクセシビリティ確保 ＞ ルール ＞ 原則
  divタグに、機能（ユーザー操作）を付与しないこと
  drawerのハンバーガーメニューボタンにも「メニュー」または「menu」の文字を添付表じする

■アクセシビリティ確保 ＞ ルール ＞ 原則 ＞ 色
　変数で指定すること。
  色変数の定義は「variables」で行うこと

 ■コーディング容易性確保 ＞ ルール 
 「標準 ＞」の項目は基本的に修正・追加せず「adjustPerSite ＞」の項目に修正・追加する
  広域要素に「display : grid;」は利用禁止。
*/

/* ===============================
 標準 ＞ 開発（＆デバッグ用）スタイル
=============================== */
body.focusTestMode *:focus,
body.focusTestMode *:focus-visible {
  background: #00ff00 !important;
}

/* ===============================
 標準 ＞ 共通スタイル
=============================== */
:where(:root) {
  font-family: Noto sans JP, Helvetica Neue, arial, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, meiryo, sans-serif;
  font-style : unset;
  font-weight: 400;
  line-height: 1.5;
  text-align : start;
  word-break : initial;
  line-break : strict;
  hyphens    : auto;
  -webkit-text-size-adjust   : 100%;
  text-size-adjust           : 100%;
  -webkit-tap-highlight-color: transparent;
}

:where(body) {
  min-block-size       : 100svb;
  margin               : unset;
  padding              : unset;
  background           : var(--color-bg-dflt, #00ffff);
  color                : var(--color-txt-dflt, #ffff00);
}

:where(h1, h2, h3, h4, h5, h6) {
  margin-block         : unset;
  font-size            : unset;
}

ul {
  margin-block         : unset;
  padding-inline-start : unset;
}

ul > li {
  list-style-type      : '';
}

*:focus-visible {
  outline       : var(--oLn-width-numScl-when-fovusVisible, 0) solid var(--color-dflt-bgBrdOlnBs-focused-01, #FF6600);
  outline-offset: 2px;
  transition    : outline 0.3s ease-in-out;
}

.zeroHeight {
  height : 0;
}
.visually-hidden {
  position: fixed !important;
  /* keep it on viewport */
  top: 0px !important;
  left: 0px !important;
  /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
		 before allowing buttons to be activated. */
  width: 4px !important;
  height: 4px !important;
  /* visually hide it with overflow and opacity */
  opacity: 0 !important;
  overflow: hidden !important;
  /* remove any margin or padding */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* ensure no other style sets display to none */
  display: block !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after,
  ::backdrop {
    background-attachment     : scroll !important;
    transition-delay          : 0s !important;
    transition-duration       : 1ms !important;
    animation-duration        : 1ms !important;
    animation-delay           : 0s !important;
    animation-iteration-count : 1 !important;
    scroll-behavior           : auto !important;
  }
}

.global_wrap {
  display        : flex;
  flex-direction : column;
  min-height     : 100svh;
}

.main_wrap {
  flex           : 1;
}

.visuallyHidden {
  position : fixed !important;
  top      : 0px !important;
  left     : 0px !important;
  width    : 4px !important;
  height   : 4px !important;
  opacity  : 0 !important;
  overflow : hidden !important;
  border   : none !important;
  margin   : 0 !important;
  padding  : 0 !important;
  display  : block !important;
  z-index  : -1 !important;
}

/* ===============================
 幅:高さ = leftValue : rightValue
=============================== */
.hgWdApctDiv1 { aspect-ratio: 1 / 1; }
.hgWdApctDiv2 { aspect-ratio: 2 / 1; }
.hgWdApctDiv3 { aspect-ratio: 3 / 1; }
.hgWdApctDiv4 { aspect-ratio: 4 / 1; }
.hgWdApctDiv5 { aspect-ratio: 5 / 1; }
.hgWdApctDiv6 { aspect-ratio: 6 / 1; }
.hgWdApctDiv7 { aspect-ratio: 7 / 1; }
.hgWdApctDiv8 { aspect-ratio: 8 / 1; }
.hgWdApctDiv9 { aspect-ratio: 9 / 1; }
.hgWdApctDiv10 { aspect-ratio: 9 / 1; }
.hgWdApctDiv11 { aspect-ratio: 11 / 1; }
.hgWdApctDiv12 { aspect-ratio: 12 / 1; }
.hgWdApctDiv13 { aspect-ratio: 13 / 1; }
.hgWdApctDiv14 { aspect-ratio: 14 / 1; }
.hgWdApctDiv15 { aspect-ratio: 15 / 1; }
.hgWdApctDiv16 { aspect-ratio: 16 / 1; }

.hgWdPer20 { aspect-ratio: 100 / 20; }
.hgWdPer25 { aspect-ratio: 100 / 25; }
.hgWdPer20 { aspect-ratio: 100 / 30; }
.hgWdPer35 { aspect-ratio: 100 / 35; }
.hgWdPer40 { aspect-ratio: 100 / 40; }
.hgWdPer45 { aspect-ratio: 100 / 45; }

/* ===============================
 標準 ＞ タグ（li） ＞ 区分（デフォルト） 
=============================== */

li.cardLink.strDecoBrdOnHv:focus,
li.cardLink.strDecoBrdOnHv:focus-within,
li.cardLink.strDecoBrdOnHv:hover {
  /* 内部を縮小せず外側を囲む */
  /* 直下要素にaタグを配置して運用 */
  /* クラス「hvChgImgParent」との塀用は禁止 */
  box-shadow      : 0 0 0 var(--border-width-default-when-hover) var(--color-border-underline-hover-01);
}

.semiOpaPerOnHv:focus,
.semiOpaPerOnHv:hover  {
  opacity  : 0.5;
}

/* ===============================
 標準 ＞ タグ（a） ＞ 区分（デフォルト） 
=============================== */
a         { text-decoration : none; }
a:visited { text-decoration : none; }

/* ===============================
  標準 ＞ common ＞ タグ（aなど） ＞ 区分（デフォルト） 
=============================== */
/* standard extarnl borderLine on hover */
.strClrChgBrdOnHv:hover,
.strClrChgBrdOnHv:focus {
  /* 表示するにはaタグのpositionがabsoluteであることが前提 */
  border-color      : var(--color-dflt-bgBrdOlnBs-focused-01,#FF6600);
}

/* ===============================
  標準 ＞ common ＞ タグ（aなど） ＞ 区分（デフォルト） 
=============================== */
/* standard extarnl borderLine on hover */
.strDecoXBLOnHv:hover,
.strDecoXBLOnHv:focus {
  outline              : var(--border-width-dflt-whn-hvr,3px) solid var(--color-dflt-bgBrdOlnBs-focused-01,#FF6600);
}

/* ===============================
  標準 ＞ common ＞ タグ（aなど） ＞ 区分（デフォルト） 
=============================== */
/* standard extarnl borderLine on hover */
.stdOpcOnHv:hover,
.stdOpcOnHv:focus {
  /* 表示するにはaタグのpositionがabsoluteであることが前提 */
  opacity: 0.5;
}

/* ===============================
  標準 ＞ common ＞ タグ（aなど） ＞ 区分（デフォルト） 
=============================== */
/* standard underLine on hover */
.stdULnOHv {
  position        : relative;
  display         : block;
  width           : fit-content;
}
.stdULnOHv:focus:after,
.stdULnOHv:hover:after {
  content         : "";
  position        : absolute;
  left            : 0;
  bottom          : 0;
  height          : 3px;
  width           : 100%;
  background      : var(--color-dflt-bgBrdOlnBs-focused-01, #0000ff);
}

.stdULnOHv:focus:after,
.stdULnOHv:hover:after {
  content         : "";
  position        : absolute;
  left            : 0;
  bottom          : 0;
  height          : 3px;
  width           : 100%;
  background      : var(--color-dflt-bgBrdOlnBs-focused-01, #0000ff);
}

/* =========================================
  標準 ＞ common ＞ タグ（img） ＞ ホバー切替 
========================================= */
/* クラス「.cardLink.strDecoBrdOnHv」との塀用は禁止 */
.hvChgImgParent.focus img.showWhenNotFocused{
  display          : block;
}
.hvChgImgParent:hover img.showWhenNotFocused,
.hvChgImgParent:focus img.showWhenNotFocused {
  display          : none;
}
.hvChgImgParent img.showWhenFocused {
  display          : none;
}
.hvChgImgParent:hover img.showWhenFocused,
.hvChgImgParent:focus img.showWhenFocused {
  display          : block;
}

/* =========================================
  標準 ＞ common ＞ h1.page-title ＞ 下線付
========================================= */

h1.page-title.withUL {
  --heading--border-color-h1: var(--border-main);
  --heading--color-h1: var(--color-text-default);
  --heading--font-size-h1: var(--font-size-30);
  --heading--font-weight-h1: var(--fontweight-medium);
  --heading--letter-spacing-h1: var(--tracking-4);
  --heading--line-height-h1: 1.5;
  position         : relative;
  display          : block;
  width            : 100%;
  margin-block-end : var(--space-32, 32px);
  padding-inline   : var(--space-8, 8px);
  color            : var(--heading--color-h1);
  font-size        : var(--heading--font-size-h1);
  font-weight      : var(--heading--font-weight-h1);
  line-height      : var(--heading--line-height-h1);
  letter-spacing   : var(--heading--letter-spacing-h1);
}

h1.page-title.withUL::after {
  content            : '';
  position           : absolute;
  inset-block-end    : calc(-1 * var(--space-32, 32px));
  inset-inline-start : 0;
  width              : 100%;
  height             : 2px;
  background         : var(--heading--border-color-h1);
}

/* ===============================
 標準 ＞ common ＞ 吹き出し
=============================== */
.withSpeechBubbleTriangle,
.withSBT {
  /*
  --gn-triangle-width-numScl
  --color-bg-triangle-dflt
  --color-bg-triangle-on
  */
}

.withSpeechBubbleTriangle,
.withSBT {
  position: relative;
}

.withSpeechBubbleTriangle::after,
.withSBT::after {
  display: block;
  content: "";
  position: absolute;
  transform: unset;
  left : calc((50% - var(--gn-triangle-width-numScl, 10px) / 2));
  top  : 100%;
  border: var(--gn-triangle-width-numScl, 10px) solid transparent;
  border-top-color: var(--color-bg-triangle-dflt, #ff0000);
}

.withSpeechBubbleTriangle:hover::after,
.withSpeechBubbleTriangle:focus::after,
.withSBT:hover::after,
.withSBT:focus::after {
  border-top-color: var(--color-bg-triangle-on, #00ff00);
}

/* ===============================
 標準 ＞ common ＞ そのほか
=============================== */
.positionRuler,
.psRlr {
  /* 用途：子要素に「position:absolute」を付与して、指定の位置に配置しやすくする */
  position          : relative;
  width             : 100%;
  height            : 100%;
}

.positionRuler .absLocatorPinOnPositionRuler,
.positionRuler .aLocPin,
.psRlr .absLocatorPinOnPositionRuler,
.psRlr .aLocPin 
{
  position          : absolute;
}

.show3PointswhenOverFlow {
  display            : -webkit-box;
  -webkit-line-clamp : 3;           /* 表示する最大行数 */
  -webkit-box-orient : vertical;    /* 縦方向にボックスを設定 */
  overflow           : hidden;      /* はみ出た部分を非表示 */
}

/* ===============================
 標準 ＞ common ＞ そのほか（メモ）
=============================== */


/* ===============================
  標準 ＞ common(media)
=============================== */
/*
.showWhenSomeMedia.narrow1,
.showWhenSomeMedia.flBxGene.narrow1 {
  display : none;
}
@media (width < [number]px) {
  .hideWhenSomeMedia.narrow[N],
  .hideWhenSomeMedia.narrow[N].flBxGene {
    display : none;
  }
  
  .showWhenSomeMedia.narrow[N] { display : block; }
  .showWhenSomeMedia.narrow[N].flexSpcBtwBox,
  .showWhenSomeMedia.narrow[N].gLayoutflBx,
  .showWhenSomeMedia.narrow[N].gLFlBx,
  .showWhenSomeMedia.narrow[N].flBxGene { display:flex; }
}
*/
.showWhenOnlySp{ display:none;  }
.hideWhenOnlySp{ display:block; }

/* -----画面幅が1441px以上の場合 */
@media (min-width: 1441px) {

}
/* 画面幅が1441px以上の場合----- */

/* -----画面幅が1080px未満の場合 */
@media (width < 1080px) {
}
/* 画面幅が1080px未満の場合----- */

/* -----印刷用と音声読上用のメディアを除き、画面幅が800px以下の場合 */
@media screen and (max-width: 800px) {
}
/* 印刷用と音声読上用のメディアを除き、画面幅が800px以下の場合----- */

/* -----画面幅が768px未満の場合 */
@media (width < 768px) {
}
/* 画面幅が768px未満の場合----- */

/* -----画面幅が576px未満の場合 */
@media (width < 576px) {
.showWhenOnlySp{ display:block; }

.showWhenOnlySp.flexSpcBtwBox,
.showWhenOnlySp.gLayoutflBx,
.showWhenOnlySp.gLFlBx,
.showWhenOnlySp.flBxGene { display:flex; }
.hideWhenOnlySp { display : none;  }
}
/* 画面幅が576px未満の場合----- */

/* ===============================
 標準 ＞ common ＞ 汎用要素内レイアウト
 class name prefix term
  gLayout:ground Layout
  gL     :ground Layout
=============================== */

/* ==============================================================
  標準 ＞ common ＞ 汎用要素内レイアウト ＞ flexBox
============================================================== */

.gene__hndr,.gene_handler { /* flexBox子要素候補 */ }
.gene__container {}
.gene__itemsHolder {　/* flexBox親要素候補 */ }
.gene__itemsHolder .wdthfull { width : 100%; }

.flexSpcBtwBox,
.gLayoutflBx,
.gLFlBx,
.flBxGene{
  /* 
    用途：
     全クラス共通
      内部子要素を横並,等間隔
     個別（.gLayoutflBx .gLFlBx）
      レスポンシブルな全体的レイアウト配置をする場合
  */
  position            : relative;
  display             : flex;
  /* 先頭と末尾の子要素は端に寄せられる */
  justify-content     : space-between;
  /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */
  flex-wrap           : wrap;
}
.flexSpcBtwBox.putFromLeft,
.gLayoutflBx.putFromLeft,
.gLFlBx.putFromLeft,
.flBxGene.putFromLeft {
  justify-content: flex-start;
}
.flexSpcBtwBox.putFromRight,
.gLayoutflBx.putFromRight,
.gLFlBx.putFromRight,
.flBxGene.putFromRight {
  justify-content: flex-end;
}

.flexSpcBtwBox.col1Fix, .flexSpcBtwBox.c1Fx,
.gLayoutflBx.col1Fix  , .flexSpcBtwBox.c1Fx,
.gLFlBx.col1Fix       , .gLFlBx.c1Fx,
.flBxGene.col1Fix     , .flBxGene.c1Fx {
  /* 主な用途：SPの時に一列化する */
  flex-direction: column;
}
.flexSpcBtwBox.insLytAlIc, .flexSpcBtwBox.insLytAlIc,
.gLayoutflBx.insAlIc  , .flexSpcBtwBox.insLytAlIc,
.gLFlBx.insLytAlIc       , .gLFlBx.insLytAlIc,
.flBxGene.insLytAlIc     , .flBxGene.insLytAlIc {
  /* 主な用途：子要素を上端下端間び中央に配意する */
  align-items: center;
}

.flexSpcBtwBox.putCenterLR,
.gLayoutflBx.putCenterLR  ,
.gLFlBx.putCenterLR       ,
.flBxGene.putCenterLR {
  justify-content: center;
  flex-wrap: wrap;
}

/* single row to multir row */
.sngleRowToMltRw {

}


@media (width < 576px) {
.gLayoutflBx,.gLFlBx { flex-direction: column; }
}

.inFlex         { width : 100%;}
.inFlex.wdth2div{ width : 50%; }
@media (width < 576px) {
.gLayoutflBx .inFlex,.gLFlBx .inFlex{ width : 100%; }
}

/* ==============================================================
  標準 ＞ common ＞ 汎用要素内レイアウト ＞ flexBox ＞ （幅広のメディアだけ）
============================================================== */

/* 幅広のメディアだけflexとして振る舞う */
.flBxWhnWM {
  display             : flex;
  /* 先頭と末尾の子要素は端に寄せられる */
  justify-content     : space-between;
  /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */
  flex-wrap           : wrap;
}

@media (width < 576px) {
  .flBxWhnWM {
    display             : block;
  }
}

/* ==============================================================
  標準 ＞ common ＞ 汎用要素内レイアウト ＞ flexBox ＞ （幅狭のメディアだけ）
============================================================== */

/* 幅狭のメディアだけflexとして振る舞う */
.flBxWhnNM {
  display             : block;
}

@media (width < 576px) {
  .flBxWhnNM {
    display             : flex;
    /* 先頭と末尾の子要素は端に寄せられる */
    justify-content     : space-between;
    /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */
    flex-wrap           : wrap;
    width               : 100%;
  }
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ common ＞ 汎用要素内レイアウト ＞ flexBox ＞ レスポンシブルに要素を並べ替える
-========--========--========--========--========--========--========--========--========--========-*/
.geneResponsibleSortPerWidth {
  --gnChld-cmmn-width      : 100;
  --gnChld-cmmn-mrgn-width : 24;
  --gnChld-max-column      : 3;
  --gnPrnt-max-width       : calc(var(--gnChld-max-column) * var(--gnChld-cmmn-width) + (var(--gnChld-max-column) - 1) * var(--gnChld-cmmn-mrgn-width) + var(--gnChld-cmmn-mrgn-width) * 2);
}

.geneResponsibleSortPerWidth {
  display         : flex;
  justify-content : center;  /* 全体を中央寄せ */
  gap             : calc(var(--gnChld-cmmn-mrgn-width) * 1px);   /* 要素間の固定ギャップ */
  padding-left    : 0;       /* 左端余白 */
  padding-right   : 0;       /* 右端余白 */
  max-width       : calc(var(--gnPrnt-max-width) * 1px); /* 要素幅 * 個数 + ギャップ * (macColLength - 1) + padding*2 */
  margin          : 0 auto;  /* コンテナを中央に寄せる */
}
.geneResponsibleSortPerWidth .rsvdChildWidth > * {
  /* flex内では幅が変更されることがあるので、クラス「rsvdChildWidth」の直下要素の場合に限り、変数で幅を固定する */
  min-width       : calc(var(--gnChld-cmmn-width) * 1px);
  max-width       : calc(var(--gnChld-cmmn-width) * 1px);
}

/* ===================================================================
 標準 ＞ common ＞ 汎用要素内レイアウト ＞ teoEdgeLayout ＞ horizotal
=================================================================== */

:where(:root) {
  /* 基本ヘッダー＆フッター用 */
  --hrzTeoLimter01-width-num    : 1400;
  --hrzTeoLimter01-width-scl    : 1px;
  --hrzTeoLimter01-width-numScl : calc(var(--hrzTeoLimter01-width-num) * var(--hrzTeoLimter01-width-scl));

  /* 基本ボディ用 */
  --hrzTeoLimter02-width-num    : 1160;
  --hrzTeoLimter02-width-scl    : 1px;
  --hrzTeoLimter02-width-numScl : calc(var(--hrzTeoLimter02-width-num) * var(--hrzTeoLimter02-width-scl)); 
}

/* [[t]he [e]xtreme [o]uter edge][perPart]:最も外縁部 */
/* [in the [h]o[r]i[z]ontal direction]:水平方向での */
/* .hrzTeoEdgeContainer */
.hrzTeoEdgeNoLimit {
  /*
    背景色だけ共通にする場合は、
    このクラスを[クラス(hrzO1EdgeLimiter)]の直上要素に設定する 
  */
}
.hrzTeoEdgeLimiter {
  max-width           : var(--hrzTeoLimter01-width-numScl); /* ■要・変数化■ */
  margin              : 0 auto;
}
.hrzO1EdgeLimiter {
  /* 基本ヘッダー＆フッター用 */
  max-width           : var(--hrzTeoLimter01-width-numScl); /* ■要・変数化■ */
  margin              : 0 auto;
}
.hrzO2EdgeLimiter {
  /* 基本ボディ用 */
  max-width           : var(--hrzTeoLimter02-width-numScl); /* ■要・変数化■ */
  margin              : 0 auto;
}

.content {
  /* max-width     : var(--container-content); */
  width: 100%   ;
  /*
    margin-inline : auto;
    padding-inline: var(--space-16);
  */
}

/* ===============================
 標準 ＞ pageProperHolder
=============================== */
.pageProperHolder {}
.pageProperHolder .hrzTeoEdgeNoLimit {}
.pageProperHolder .hrzTeoEdgeNoLimit .hrzO1EdgeLimiter {}

/* ===============================
 標準 ＞ section
=============================== */
section,
.sectionLikeCmpnt {
  margin-top     : var(--sps-glbl-layout-sctn-mrgn-top);
  margin-bottom  : var(--sps-glbl-layout-sctn-mrgn-bttm);

  padding-top    : var(--sps-glbl-layout-sctn-padding-top);
  padding-bottom : var(--sps-glbl-layout-sctn-padding-bttm);
}

/* ===============================
 標準 ＞ common(Header&Footer)
=============================== */
.siteHFCommonWidthFull,
.siteHeaderRow {
  display   : block;
  width     : 100%;
  height    : auto;
  background: var(--color--bg-subtle);
}

/***********************
 標準 ＞ Header
************************/

:where(:root) {
  /* 「apex（頂点）」＞「aLT：左上（頂点）」,「aRT：右上（頂点）」 */
  /* 「nWL」：no-width-Limit */
  /* 「cZALT」：contents-Zone-aLT
  /* 「sH」：Site-Header */

  --sH-cZALT-from-nWL-sh-ALT                      : calc((var(--header-width) - var(--headerCZ-width)) / 2);
}

.site-header {
  inset-block-start : 0;
  inset-inline      : 0;
  width             : 100%; /* before:100svw; */

  /* style */
  background : var(--color-background-header-default);
  box-shadow : var(--elevation-01);
}

.site-header.topFixed {
  position    : fixed;
  width       : 100%; /* before:100svw; */
  z-index     : var(--stack-head);
  /* z-index  : calc(Infinity); */
}

.site-header__container {
  /* layout */
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  width           : 100%;
  height          : auto;
  margin-inline   : auto;
  padding-inline  : var(--space-16, 16px);
  /* style */
}

.site-header .utility-nav__list {
  /*
    用途：上部（ヘッダー）のコンテンツをPC等幅広画面で中央寄せする 
  */
  position            : relative;
  display             : flex;

  justify-content     : space-between;
  align-items         : center;
}
.site-header .utility-nav__list .utility-nav__item {}

.site-header__title {
  /* layout */
  display               : grid;
  grid-template-columns : auto 1fr;
  column-gap            : var(--space-12, 12px);
  width                 : fit-content;
  height                : fit-content;
}

.site-header__title a {
  text-decoration : none;
  color           : var(--color-text-default);
}

.site-header__title-logo {
  /* layout */
  display     : grid;
  place-items : center;
  width       : var(--branding-logo-size);
  height      : auto;
}

.site-header__title-logo img {
  /* layout */
  display : block;
  width   : 100%;
  height  : auto;
}

.site-header__title-logo:hover img,
.site-header__title-logo:focus img,
.site-header__title-logo:focus-within img {
  /* layout */

}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ ヘッダー ＞ ハンバーガーメニュー
-========--========--========--========--========--========--========--========--========--========-*/

/*
 sHDsgnBs     : siteHeaderDesignBase
 sor          : sizeObservedResult
 rsgnPrMd     : repeatableAssignPerMedia(Width)
                mediaごとにCSSで、代入設定される値が変更される
 dmTyp-(n)    : --abstract-desing-model-type-(n)
 
 htnVar       : hardToNameVariable(名づけるのが困難な変数) 
 
 ハンバーガーメニューが小さくなりすぎると困る、
 ＝＞必然、ハンバーガーメニューには最小サイズが暗黙的に設定される、
 ＝＞必然、ハンバーガーメニューの最小サイズと、サイトヘッダーのheight、をもとに、位置が設定される、
 ＝＞必然、ハンバーガーメニューは、SPではサイトヘッダーの上下位置は「中央」に配置される傾向になる、
 ＝＞必然、ハンバーガーメニューは左よりの位置に配置される、
 ＝＞必然、sHDsgnBsRct001の幅はサイトヘッダーのheightが最小になったとき、最小になる、
 ＝＞必然、sHDsgnBsRct001の幅は固定的な値になりやすい、
*/
:where(:root) {
  /* 自動計算式 ＞ 定型（１） */
  --sHDsgnBsRct002-sorW         : var(--headerCZ-width);
  --sHDsgnBsRct002-sorH         : var(--headerCZ-height);

  --sHDsgnBsRct003-sorW         : calc((var(--header-width) - var(--sHDsgnBsRct002-sorW)) / 2);
  --sHDsgnBsRct003-sorH         : var(--sHDsgnBsRct002-sorH);

  --sHDsgnBsRct002-aRT-fxdLeft  : calc(var(--sHDsgnBsRct003-sorW) + var(--sHDsgnBsRct002-sorW));

  /* 自動計算式 ＞ 暫定代入 */
  /* 再代入による調整用変数 ＞ ハンバーガーメニューのサイズ */
  --sHDsgnBsRct000-w-rsgnPrDmTy : 50;
  --sHDsgnBsRct000-h-rsgnPrDmTy : 50;

  /* 再代入による調整用変数 ＞ ハンバーガーメニューのスクリーン右上からの位置制御用 */
  --sHDsgnBsRct001-w-rsgnPrDmTy : 25;
  --sHDsgnBsRct001-h-rsgnPrDmTy : 25;

  /* 再代入による調整用変数 ＞ ハンバーガーメニューの内部デザイン調整用 */
  /* 基本的に変更しないほうがよい */
  --hbgMn-cmnPadding-rsgnPrDmTy : calc(var(--sHDsgnBsRct000-w-rsgnPrDmTy) * 0.1);
  --hbgMn-hrz3LnWdth-rsgnPrDmTy : calc(var(--sHDsgnBsRct000-w-rsgnPrDmTy) * 0.6);
  --hbgMn-hrz3LnHgt-rsgnPrDmTy  : calc(var(--sHDsgnBsRct000-h-rsgnPrDmTy) * 0.04);

  --hbgMn-fontSize-rsgnPrDmTy   : calc(var(--sHDsgnBsRct000-w-rsgnPrDmTy) * 0.2);

  --hbgMn-htnVar001-rsgnPrDmTy  : calc(var(--sHDsgnBsRct000-h-rsgnPrDmTy) * 0.08);

  /* 自動計算式 ＞ 定型（２） */
  --sHDsgnBsRct000-aRT-fxdLeft  : calc(var(--sHDsgnBsRct002-aRT-fxdLeft) - var(--sHDsgnBsRct001-w-rsgnPrDmTy));

  /* 以下の変数名（の値）を実際にハンバーガーメニューのCSSに利用する  */
  --sHDsgnBsRct000-aLT-fxdLeft  : calc(var(--sHDsgnBsRct000-aRT-fxdLeft) - var(--sHDsgnBsRct000-w-rsgnPrDmTy));
  --sHDsgnBsRct000-aLT-fxdTop   : var(--sHDsgnBsRct001-h-rsgnPrDmTy);

  --sHDsgnBsRct000-width        : var(--sHDsgnBsRct000-w-rsgnPrDmTy);
  --sHDsgnBsRct000-height       : var(--sHDsgnBsRct000-h-rsgnPrDmTy);

  --hbgMn-cmnPadding            : var(--hbgMn-cmnPadding-rsgnPrDmTy);

  --hbgMn-hrz3LnWdth            : var(--hbgMn-hrz3LnWdth-rsgnPrDmTy);
  --hbgMn-hrz3LnHgt             : var(--hbgMn-hrz3LnHgt-rsgnPrDmTy);
  --hbgMn-htnVar001             : var(--hbgMn-htnVar001-rsgnPrDmTy);

  --hbgMn-fontSize              : var(--hbgMn-fontSize-rsgnPrDmTy);

  /* 以上の変数名（の値）を実際にハンバーガーメニューのCSSに利用する */
}

.hbgMenu__handler {
  display                     : block;
  position                    : fixed;
  width                       : calc(var(--sHDsgnBsRct000-w-rsgnPrDmTy) * 1px);
  height                      : calc(var(--sHDsgnBsRct000-h-rsgnPrDmTy) * 1px);
  
  left                        : calc(var(--sHDsgnBsRct000-aLT-fxdLeft)  * 1px);
  top                         : calc(var(--sHDsgnBsRct000-aLT-fxdTop) * 1px);
  
  z-index                     : calc(infinity);
}

.hbgMenu {
  --toggle-color              : #000;
  --toggle-background-default : #000;

  display                     : grid;
  grid-template-rows          : 1fr auto;
  place-items                 : center;
  row-gap                     : calc(var(--hbgMn-cmnPadding) * 1px);
  width                       : 100%;
  aspect-ratio                : 1;
  padding                     : calc(var(--hbgMn-cmnPadding) * 1px);
  z-index                     : var(--stack-top);
  background-color            : var(--color-white,#fff);
  border                      : 1px solid var(--color-black,#000);
  outline                     : calc(var(--hbgMn-htnVar001) * 1px) solid transparent;

  color                       : #000;
  transition                  : background-color 0.3s ease-in-out, outline-color 0.3s ease-in-out;
  cursor                      : pointer;
}

.hbgMenu-icon {
  position                    : relative;
  display                     : inline-grid;
  place-items                 : center;
  width                       : calc(var(--hbgMn-hrz3LnWdth) * 1px);
  background                  : transparent;
  border                      : none;
  transition                  : all 0.3s ease-in-out;
}

.hbgMenu-icon span {
  width                       : calc(var(--hbgMn-hrz3LnWdth) * 1px);
  left                        : 0;
}

.hbgMenu-text {
  place-self                  : center;
  font-size                   : calc(var(--hbgMn-fontSize) * 1px);
  line-height                 : 1;
  text-transform              : capitalize;
  transition                  : opacity 0.3s ease-in-out;
  opacity                     : 1;
}

.hbgMenu-icon::before,
.hbgMenu-icon::after,
.hbgMenu-icon span {
  content                     : '';
  position                    : absolute;
  grid-area                   : 1 / 1;
  inset-block-start           : 0;
  inset-inline-start          : 0;
  width                       : calc(var(--hbgMn-hrz3LnWdth) * 1px);
  height                      : calc(var(--hbgMn-hrz3LnHgt) * 1px);
  background-color            : #000;
  transition                  : all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin            : center;
}

.hbgMenu-icon::before {
  transform                   : translateY(calc(calc(var(--hbgMn-htnVar001) * 1px) * -2));
}
.hbgMenu-icon::after {
  transform                   : translateY(calc(calc(var(--hbgMn-htnVar001) * 1px) * 2));
}

.hbgMenu[aria-expanded="true"] .hbgMenu-icon::before {
  transform                   : translateY(0) rotate(135deg);
}
.hbgMenu[aria-expanded="true"] .hbgMenu-icon span {
  width                       : 0;
  left                        : 50%;
  opacity                     : 0;
}
.hbgMenu[aria-expanded="true"] .hbgMenu-icon::after {
  transform                   : translateY(0) rotate(-135deg);
}

/* ============================================================
 標準 ＞ Drawer（機能） ＞ drawer-overlay
============================================================ */
/* PC版ではハンバーガーメニュー押下時に暗くなる部分 */
/* body直下要素 */
.drawer-overlay {
    position         : fixed;
    inset            : 0;
    top              : var(--header-height);
    background-color : rgba(0, 0, 0, 0.5);
    z-index          : calc(var(--stack-head) - 2);
    opacity          : 0;
    visibility       : hidden;
    transition       : opacity 0.3s, visibility 0.3s;
}
.drawer-overlay.is-open {
    opacity          : 1;
    visibility       : visible;
}

/* ====================================
 標準 ＞ Drawer（機能）＞ Drawer 
==================================== */
/* body直下ではなく、bodyからみて孫要素に配置 */
/* 親要素のクラスは「.wrap.global_wrap」を前提とする */
/* 幅は左上と右上の頂点座標で調整するのを原則とする */

:where(:root) {
  /* drawer screen ＞ 頂点（右上） ＞ 位置（左） */
  /* ハンバーガーメニューの頂点（左上）を起点に計算 */
  --iSH-drwrScrn-aRT-squra-padding-default        : var(--sHDsgnBsRct001-w-rsgnPrDmTy);
  --iSH-drwrScrn-aRT-square-padding-using         : 30; /* デフォルトだと広すぎるので調整 */

  --iSH-drwrScrn-aRT-left-from-sH-cZALT-default   : calc(var(--sHDsgnBsRct000-aLT-fxdLeft) + var(--sHDsgnBsRct000-width) + var(--iSH-drwrScrn-aRT-square-padding-using));
  --iSH-drwrScrn-aRT-left-from-sH-cZALT-using     : var(--iSH-drwrScrn-aRT-left-from-sH-cZALT-default);

  /* drawer screen ＞ 頂点（右上） ＞ 位置（上） */
  --iSH-drwrSrcn-aLT-top-fixed-default            : calc(var(--sHDsgnBsRct000-aLT-fxdTop) - var(--iSH-drwrScrn-aRT-square-padding-using));
  --iSH-drwrSrcn-aLT-top-fixed-using              : var(--iSH-drwrSrcn-aLT-top-fixed-default);

  /* drawer screen ＞ 頂点（左上） ＞ 位置（左） */
  --iSH-drwrSrcn-aLT-left-fixed-default           : calc(var(--sHDsgnBsRct003-sorW) + (var(--sh-logo-left-default) * 2) + var(--sh-logo-width));
  --iSH-drwrSrcn-aLT-left-fixed-using             : var(--iSH-drwrSrcn-aLT-left-fixed-default);

   /* drawer screen ＞ 幅 */
  --iSH-drwrScrn-opened-width-default             : calc(var(--iSH-drwrScrn-aRT-left-from-sH-cZALT-using) - var(--iSH-drwrSrcn-aLT-left-fixed-using));
  --iSH-drwrScrn-opened-width-using               : var(--iSH-drwrScrn-opened-width-default);
}

.drawer {
  --drawer-nav-text           : 22px;
  --drawer-nav-text-mobile    : 22px;
  --drawer-nav-font-weight    : var(--fontweight-medium);
  --drawer-nav-letter-spacing : var(--tracking-10);

  display            : block;

  /* JS監視項目「（クラス「site-header」の高さ）」を代入する変数（--header-height）をもとに配置 */
  inset-block-start  : var(--header-height);
  inset-inline-start : 0;

  width              : 100%; /* before:100svw; */
  height             : auto;
  padding-block      : var(--space-16, 16px);


  border-bottom      : 2px solid var(--border-subtler);

  opacity            : 0;
  visibility         : hidden;
}

.drwrScrn__handler {
  display            : none;
  position           : fixed;
  background         : var(--color-background-drawer);
}

.drwrScrn__handler.is-open {
  display            : block;
  opacity            : 1;
  visibility         : visible;
  position           : fixed;
  z-index            : calc(var(--stack-head, 200) - 1);
  width              : calc(var(--iSH-drwrScrn-opened-width-using) * 1px);
  top                : calc(var(--iSH-drwrSrcn-aLT-top-fixed-using) * 1px);

  /* タイトルロゴと重ならないように */
  left               : calc(var(--iSH-drwrSrcn-aLT-left-fixed-using) * 1px);
  background-color   : var(--color-neutral-0);
  border             : solid 2px var(--color-neutral-100);
}

/* drawer(本体) */
.inSiteHeader_drawerHolder .drawer.is-open,
.iSH_drawerHolder .drawer.is-open{
  /* headerタグ内部に定義されるタイプが開かれている状態 */
  --iSH-drwr-padding-horizon-using : var(--iSH-drwr-padding-horizon-default);

  inset-block-start  : 0;
  display            : block;
  position           : relative;
  width              : 100%;
  padding-left       : calc(var(--iSH-drwr-padding-horizon-using) * 1px);
  padding-right      : calc(var(--iSH-drwr-padding-horizon-using) * 1px);
  /* border             : solid 2px var(--color-neutral-100); */
}

.drwrScrn___container {
  /* layout */
  display         : flex;
  flex-direction  : column;
  justify-content : space-between;
  width           : 100%;
  max-width       : var(--container-content);
  margin-inline   : auto;
  padding-inline  : var(--space-16, 16px);
}

/* ====================================
 標準 ＞ Drawer（機能） ＞ Drawer ＞ UD
==================================== */

.UD {
  display               : flex;
  gap                   : var(--space-16, 16px);
  /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */
  flex-wrap             : wrap;
}

.color_change,
.textsize_change {
  /* layout */
  /*
  display               : grid;
  grid-template-columns : 6rem repeat(3, var(--ud--change-button));
  */
  display               : flex;
  gap                   : var(--space-12, 12px);
  align-items           : center;
}

dl.color_change,
.color_change > dd,
dl.textsize_change,
.textsize_change > dd {
  margin: 0;
}

.color_change > dt,
.textsize_change > dt {
  width                 : 6rem;
  /* style */
  color                 : var(--color-text-default);
  /* typography */
  font-size             : calc(18 / 16 * 1rem);
  font-weight           : var(--fontweight-regular);
}

.color_change > dd,
.textsize_change > dd {
  /* layout */
  /*
  display       : grid;
  */
  display       : flex;
  place-items   : center;
  height        : var(--ud--change-button);
  aspect-ratio  : 1 / 1;
  /* style */
  border-radius : var(--rounded-4, 4px);
  outline       : 4px solid transparent;
  /* typography */
  font-size     : calc(18 / 16 * 1rem);
  font-weight   : var(--fontweight-medium);
  /* transition */
  transition    : outline-color 0.3s ease;
}

.color_change > dd > a,
.textsize_change > dd > a {
  /* layout */
  display         : flex;
  justify-content : center;
  align-items     : center;
  width           : 100%;
  height          : 100%;
  /* style */
  border-radius   : var(--rounded-4, 4px);
  color           : #000;
  text-decoration : none;
  overflow        : hidden;
}

.color_change .high {
  /* style */
  background-color : #000;
  border           : 1px solid #fff;
}

.color_change .high > a {
  /* style */
  color            : #fff;
}

.color_change .default {
  /* style */
  background-color : #fff;
  border           : 1px solid #333;
}

.color_change .low {
  /* style */
  background-color : #a3a3a2;
  border           : 1px solid #333;
}

.textsize_change > dd {
  background-color : #fff;
  border           : 1px solid #333;
}

.color_change > dd:hover,
.textsize_change > dd:hover,
.color_change > dd:focus-within,
.textsize_change > dd:focus-within {
  outline-color    : var(--color-dflt-bgBrdOlnBs-focused-01, #FF6600) !important;
}

/* ============================================================
 標準 ＞ Drawer（機能）＞ Drawer ＞ page control
============================================================ */
.page_control {
  --ud--change-button: var(--button-size--min-mobile);
  /* layout */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--space-32, 32px);
  margin-inline: auto;
  padding-block: var(--space-32, 32px);
  width: 100%;
  max-width: var(--device-width-md);
  height: auto;
}

.page_control .conf {
  margin: unset;
  padding: unset;
}

.page_control .UD {
  margin: 0;
  padding: 0;
}

/* ===============================
 標準 ＞ Footer
================================ */
.site-footer {
  /* 「-pddng-ctrl」は「.site-footer」の実際のpaddingではなく、子要素で使う場合もある */
  --sf-pddng-ctrl-top-dflt      : 16;
  --sf-pddng-ctrl-commn-LR-dflt : 0;
  --sf-pddng-ctrl-btm-dflt      : 0;
}

.site-footer {
  /* layout */
  position   : relative;
  width      : 100%;
  height     : auto;
  /* style */
}

.site-footer__container {
  /* layout */
  position : relative;
  width    : 100%;
  z-index  : 2;
  overflow : hidden;
}

/* 1441px以上では画像全体を表示 */
@media (min-width: 1441px) {}


/* ==============================================================
 標準 ＞ pageBodyContents
============================================================== */

.contents.afterHeader.headerfixedType,
.pageBodyContents.headerfixedType {
  margin-block-start: calc(var(--header-height) * 1px);
}

/* ==============================================================
 標準 ＞ pageBodyContents ＞ ぱんくずリスト
============================================================== */
.locusZone {
    --locus--link: var(--color-text-bredcrumb-link);
    --locus--text: var(--color-text-bredcrumb);
    --locus--font-size: var(--font-size-18);
    --locus--font-weight: var(--fontweight-regular);
    --locus--letter-spacing: var(--tracking-6);
    width         : 100%;
    background    : var(--color-background-subtler);
    border-bottom : 1px solid var(--border-subtler);
}

.locus_wrap {
    display       : flex;
    max-width     : var(--container-content);
    height        : min-content;
    margin-inline : auto;
    padding       : var(--space-8, 8px) var(--space-16, 16px);
}




/* --- 追加スタイル (style.css) --- */




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ リスト|領域
-========--========--========--========--========--========--========--========--========--========-*/
.gnLstHldr.hcih-h > .hcih-c > ul.hcih-ih,
.geneAreaHldr.hcih-h > .hcih-c > .hcih-ih {
  display : flex;
  --gn-lstArea-cntrBrd-wdth-num :   3;
  --gn-lstArea-cntrBrd-wdth-scl : 1px;
  --gn-lstArea-cntrBrd-hght-num :  90;
  --gn-lstArea-cntrBrd-hght-scl :  1%;
  --gn-lstArea-cntrBrd-top-num  :   5;
  --gn-lstArea-cntrBrd-top-scl  :  1%;
  --gn-lstArea-cntrBrd-lft-num  : 105;
  --gn-lstArea-cntrBrd-lft-scl  :  1%;
}

.gnLstHldr ul.hcih-ih.withCenterBorder,
.geneAreaHldr .hcih-ih.withCenterBorder {
  /*
  利用変数（このクラスを指定して変数を再代入する）
  --gn-lstArea-cntrBrd-wdth-num
  --gn-lstArea-cntrBrd-wdth-scl
  --gn-lstArea-cntrBrd-hght-num
  --gn-lstArea-cntrBrd-hght-scl
  --gn-lstArea-cntrBrd-top-num
  --gn-lstArea-cntrBrd-top-scl
  --gn-lstArea-cntrBrd-lft-num
  --gn-lstArea-cntrBrd-lft-scl
  --color-bg-gn-lstArea-cntrBrd
  */
}

.gnLstHldr ul.hcih-ih.withCenterBorder > *,
.geneAreaHldr .hcih-ih.withCenterBorder > * {
  position : relative;
}

.gnLstHldr ul.hcih-ih.withCenterBorder > *::after,
.geneAreaHldr .hcih-ih.withCenterBorder > *::after {
  content  : '';
  position : absolute;
  width  : calc(var(--gn-lstArea-cntrBrd-wdth-num) * var(--gn-lstArea-cntrBrd-wdth-scl));
  height : calc(var(--gn-lstArea-cntrBrd-hght-num) * var(--gn-lstArea-cntrBrd-hght-scl));
  top    : calc(var(--gn-lstArea-cntrBrd-top-num ) * var(--gn-lstArea-cntrBrd-top-scl ));
  left   : calc(var(--gn-lstArea-cntrBrd-lft-num ) * var(--gn-lstArea-cntrBrd-lft-scl ));
  background-color: var(--color-bg-gn-lstArea-cntrBrd, #ff0000);
}
.gnLstHldr ul.hcih-ih.withCenterBorder > *:last-child::after,
.geneAreaHldr .hcih-ih.withCenterBorder > *:last-child::after {
  display : none !important;
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 装飾
-========--========--========--========--========--========--========--========--========--========-*/
.stdAfULnOHv:focus:after,
.stdAfULnOHv:hover:after,
.stdBfULnOHv:focus:before,
.stdBfULnOHv:hover:before {
  content         : "";
  position        : absolute;
  left            : 0;
  bottom          : 0;
  height          : 3px;
  width           : 100%;
  background      : var(--color-border-underline-hover-01, #0000ff);
}

.stdAfULnOHv:focus:after,
.stdAfULnOHv:hover:after,
.stdBfULnOHv:focus:before,
.stdBfULnOHv:hover:before {
  content         : "";
  position        : absolute;
  left            : 0;
  bottom          : 0;
  height          : 3px;
  width           : 100%;
  background      : var(--color-border-underline-hover-01, #0000ff);
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ パンくず
-========--========--========--========--========--========--========--========--========--========-*/
/* .locusBelt > .locusHolder > locus */
body.top .locusBelt {
  display: none;
}
.locusHolder {
  /* locus_wrap */
  max-width: var(--mainZone-nav-width-min-numScl, 1160px);
  margin: 0 auto;
}
p.locus {
  display: flex;
  width: 100%;
  max-width: var(--mainZone-nav-width-min-numScl, 1160px);

  margin-inline: auto;
  padding-inline: var(--space-16, 16px);

  margin-block: var(--space-8, 8px) var(--space-6, 6px);;
}
.locus span {
  margin: 0;
}





/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 全ページ共通 ＞ タグa ＞ 区分（見た目ボタン） ＞  基本
-========--========--========--========--========--========--========--========--========--========-*/
a.btn-like {
  position         : relative;
  display          : inline-flex;
  justify-content  : center;
  align-items      : center;
  font-weight      : bold;
  letter-spacing   : 0.1em;
  color            : var(--color-text-default);
  text-decoration  : none;
  padding          : 0.20em 1.2em 0.2em 0.7em; 
  min-width        : 130px;
  border           : 1px solid var(--color-black);
  border-radius    : 9999px; /* pill形状にする */
  background-color : var(--color-white);
  transition       : background-color 0.2s, color 0.2s;
}
a.btn-like.noArrow {
  /* 上,右,下,左*/
  padding          : 0.20em 1.2em;
}
a.btn-like:hover,
a.btn-like:focus-within {
  border-color     : var(--border-button-hover);
  /* transition: background-color 0.2s, color 0.2s; */
}
a.btn-like::after {
  content       : "";
  position      : absolute;
  top           : 50%;
  right         : 1em;
  width         : 0.5em;
  height        : 0.5em;
  border-right  : 2px solid var(--color-black);
  border-bottom : 2px solid var(--color-black);
  transform     : translateY(-50%) rotate(-45deg);
}

a.btn-like.noArrow::after {
  display       : none;
}

a.btn-like p {
  display       : block;
  margin        : 0 auto;
  padding-right : 0.25em;
}

a.rmCrnr {
  border-radius: 9999px;
}





/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 全ページ共通 ＞ タグa ＞ 区分（見た目ボタン） ＞ 右装飾 ＞ 基本
-========--========--========--========--========--========--========--========--========--========-*/
a.btn-like.withRightDeco {
  height: 2.8em;
  max-height: unset;
  padding-left: 1.2em;
  padding-right: 2.2em;
}

a.btn-like.withRightDeco p {
  display: block;
  margin: 0 auto;
  padding-right: 0.25em;
}

a.btn-like.withRightDeco::after {
  content: "";
  position: absolute;
  transform: unset;
  top: unset;
  width: 1em;
  height: 1em;
  border: none;
  background-image: var(--rightDecoBase-url-dflt);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

a.btn-like.withRightDeco:hover::after,
a.btn-like.withRightDeco:focus::after {
  background-image: var(--rightDecoBase-url-on);
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ ヘッダー ＞ ロゴアイコン ＞ adjustPerTemplate ＞ サイズ（幅）.幅広時固定型
-========--========--========--========--========--========--========--========--========--========-*/
.site-header .positionRuler.logoRuler {
  /* このクラスは「.site-header a.site-header__title」の直親要素を想定している */
  width               : calc(var(--sh-logo-static-width, 350) * 1px);
  height              : 0;
}
.site-header a.site-header__title {
  position            : absolute;
  display             : inline-block;
  box-sizing          : border-box;
  width               : 100%;
  height              : auto;
  left                : calc(var(--sh-logo-left-default) * 1px);
  top                 : calc(var(--sh-logo-top-default) * 1px);
  z-index             : 2;
}
.site-header a.site-header__title img {
  display             : block;
  width               : 100%;
  height              : 100%;
}
a.site-header__title:hover,
a.site-header__title:focus,
a.site-header__title:focus-within {
  /* 画像の下に境界線と同じ位置に部分的な境界線を描画する */
  box-shadow           : inset 0 0 0 var(--border-width-dflt-whn-hvr,3px) var(--color-brd-sh-logo-hvr-dflt,#00ff00);
}
a.site-header__title.decoXBLOnHv:hover,
a.site-header__title.decoXBLOnHv:focus,
a.site-header__title.decoXBLOnHv:focus-within {
  outline              : var(--border-width-dflt-whn-hvr,3px) solid var(--color-brd-sh-logo-hvr-dflt,#00ff00);
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ ヘッダー ＞ ホバー時子要素表示メニュー ＞ 基本デザイン
-========--========--========--========--========--========--========--========--========--========-*/
/* 親と子要素を含む部品全体（ここから） */
.site-header li.childrenShowWhenOn {
  position         : relative;
  height           : calc(var(--sh-prntMn-h-dflt, 118) * 1px);
  width            : calc(100% / var( --sh-prntMn-cnt));
  min-width        : calc(var(--sh-prntMn-w-dflt, 180) * 1px);
}
.site-header li.childrenShowWhenOn.whenTempPut {
  height           : calc(var(--sh-prntMn-h-dflt, 118) * 1px);
  min-width        : calc(var(--sh-prntMn-w-dflt, 180) * 1px);
  background-color : #777777;
  border           : 1px solid #ff0000;
}
.site-header li.childrenShowWhenOn dl {
  position   : relative;
  height     : 100%;
  margin     : 0px;
  padding    : 0px;
  box-sizing : border-box;
  overflow   : visible;
}
/* 親と子要素を含む部品全体（ここまで） */
/* 親要素自身の表示領域（ここから） */
.site-header li.childrenShowWhenOn dl dt{
  height     : 100%;
}
.site-header li.childrenShowWhenOn dl dt:before {
  position         : absolute;
  display          : block;
  content          : "";
  top              : 20%;
  bottom           : 20%;
  width            : 1px;
  background-color : #BBBBBB;
}
.site-header li.childrenShowWhenOn dl dt img {
  width  : auto;
  height : auto;
}
.site-header li.childrenShowWhenOn.withTopImg dl dt a.parentElement .imageLabelAgent {
  color          : var(--color-txt-sh-chldrnShwWhn-parent-dflt, #0000ff);
}
.site-header li.childrenShowWhenOn.withTopImg dl:hover dt a.parentElement .imageLabelAgent,
.site-header li.childrenShowWhenOn.withTopImg dl.focus dt a.parentElement .imageLabelAgent {
  color          : var(--color-txt-sh-chldrnShwWhn-parent-on, #00ff00);
}

/* 親要素自身の表示領域（ここまで） */
/* 子要素の表示領域（ここから） */
.site-header .childrenShowWhenOn dl dd {
  /* ホバー時以外は隠すための初期状態 */ 
  overflow   : hidden;
  max-height : 0;
  width      : 100%;
  /* ボディ要素の上部に表示する */
  position   : relative;
  z-index    : var(--stack-head, 200);
}
.site-header .childrenShowWhenOn dl:hover dd,
.site-header .childrenShowWhenOn dl.focus dd {
  /* ※※※クラス「focus」はjsが必要※※※ */
  height     : auto;
  max-height : 600px;
  margin     : 0px;
  overflow   : visible;
}
.site-header .childrenShowWhenOn ul.childrenHolder {
  display         : flex;
  flex-wrap       : wrap;
  justify-content : flex-start;
  align-items     : stretch;
  height          : auto;
  width           : auto;
  margin          : 0px;
  font-size       : 0.9em;
}

.site-header .childrenShowWhenOn dl dd li {
  min-width       : 100%;
  /* flex-basis      : 25%; */
}
.site-header .childrenShowWhenOn dl dd li.whenTempPut {
  background-color : #aaaaaa;
  border           : 1px solid #0000ff;
}
.site-header .childrenShowWhenOn dl dd li a {
  color            : #fff;
  background-color : #296acc;
}

.site-header .childrenShowWhenOn ul.childrenHolder.singleColumn.widthSyncWidestChild {
  /* 親を縮む要素（inline-flex）にして、最大の子要素幅に合わせる */
  display         : inline-flex;
}

/* 子要素の表示領域（ここまで） */




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ ヘッダー ＞ adjustPerTemplate ＞ ホバー時子要素表示メニュー ＞ 親要素上部img付型
-========--========--========--========--========--========--========--========--========--========-*/
/* 親要素自身の表示領域（ここから） */
.site-header li.childrenShowWhenOn.withTopImg {
  /*
  利用変数
  --space-6
  --space-12
  --space-24
  --font-size-22
  --fontweight-medium
  --tracking-5
  --color-txt-sh-chldrnShwWhn-on-dflt
  --color-bg-sh-chldrnShwWhn-dflt
  --color-bg-sh-chldrnShwWhn-on-dflt
  */
}
.site-header li.childrenShowWhenOn.withTopImg a.withTopImage {
  position              : relative;
  display               : grid;
  grid-template-columns : 1fr;
  grid-auto-flow        : row;
  place-items           : center;
  gap                   : var(--space-6, 6px);
  width                 : 100%;
  height                : 100%;
  padding-block         : var(--space-12, 12px);
  padding-inline        : var(--space-24, 24px);
  gap                   : var(--space-6, 6px);
  background            : var(--color-bg-sh-chldrnShwWhn-dflt, #ffffff);
  border                : 1px solid transparent;
  border-radius         : var(--rounded-8, 8px);
  text-decoration       : none;
  transition            : all 0.3s ease;
}
.site-header li.childrenShowWhenOn.withTopImg dl:hover a.withTopImage,
.site-header li.childrenShowWhenOn.withTopImg dl.focus a.withTopImage{
  background            : var(--color-bg-sh-chldrnShwWhn-on-dflt, #E2F7F6);
}

.site-header li.childrenShowWhenOn.withTopImg a.withTopImage:focus {
  /* 子要素が一個もない場合、タブフォーカスがあたった場合にもホバーと同じ効果を出す */
  background            : var(--color-bg-sh-chldrnShwWhn-on-dflt, #E2F7F6);
}

.site-header li.childrenShowWhenOn.withTopImg dl dt .imageWrapper{
  display      : grid;
  place-items  : center;
  max-width    : 95px;
  aspect-ratio : 1;
}
.site-header li.childrenShowWhenOn.withTopImg dl dt img {}
.site-header li.childrenShowWhenOn.withTopImg dl dt .imageLabelAgent {
  display        : inline-grid;
  place-items    : center;
  color          : var(--color-txt-sh-chldrnShwWhn-on-dflt, #000000);
  font-size      : var(--sh-leftIcnLnk-txt-fntSize-dflt, calc(18 / var(--font-size-base, 16) * 1em));
  font-weight    : var(--fontweight-medium,500);
  line-height    : 1.5;
  letter-spacing : var(--tracking-5,0.5);
  text-align     : center;
}
.site-header li.childrenShowWhenOn.withTopImg dl dt a.withTopImage.parentElement .imageLabelAgent {
  color          : var(--color-txt-sh-chldrnShwWhn-parent-dflt, #0000ff);
}
.site-header li.childrenShowWhenOn.withTopImg dl:hover dt a.withTopImage.parentElement .imageLabelAgent,
.site-header li.childrenShowWhenOn.withTopImg dl.focus dt a.withTopImage.parentElement .imageLabelAgent {
  color          : var(--color-txt-sh-chldrnShwWhn-parent-on, #00ff00);
}

/* 親要素自身の表示領域（ここまで） */
/* 子要素の表示領域（ここから） */
/* 子要素の表示領域（ここまで） */




/* =========================================
 標準 ＞ common ＞ form系 ＞ label
========================================= */
form label,
form fieldset {
  color              : var(--color-txt-form-dflt, #ff0000);
}

/* =========================================
 標準 ＞ common ＞ form系 ＞ submit
========================================= */
form input[type="submit"] {
  display            : flex;
  justify-content    : center;
  align-items        : center;
  margin             : 0;
  border-radius      : 0;
  background-color   : var(--color-bg-form-button-dflt, #ff0000);
  border             : var(--border-width-form-button-dflt, 1px) solid var(--color-brd-form-button-dflt, #0000ff);
  color              : var(--color-txt-form-button-dflt, #ffffff);
  -webkit-appearance : none;
  margin             : 0 auto;
  padding            : 0.5em 1em;
}
form input[type="submit"]:hover,
form input[type="submit"]:focus {
  background-color   : var(--color-bg-form-button-on, #00ff00);
  border             : var(--border-width-form-button-on, 1px) solid var(--color-brd-form-button-on, #00ff00);
  color              : var(--color-txt-form-button-on, #ff00ff);
}
/* =========================================
 標準 ＞ common ＞ form系 ＞ input&textarea 
========================================= */
form textarea,
form input[type="text"],
form input[type="email"],
form input[type="tel"] {
  display            : block;
  background-color   : var(--color-bg-form-input-dflt, #ff0000);
  border             : var(--border-width-form-input-dflt, 1px) solid var(--color-brd-form-input-dflt, #0000ff);
  color              : var(--color-txt-form-input-dflt, #ffffff);
  -webkit-appearance : none;
}
form textarea:hover,
form textarea:hover,
form input[type="text"]:hover,
form input[type="text"]:focus,
form input[type="email"]:hover,
form input[type="email"]:focus,
form input[type="tel"]:hover,
form input[type="tel"]:focus {
  display            : block;
  background-color   : var(--color-bg-form-input-on, #00ff00, 1px);
  border             : var(--border-width-form-input-on, 1px) solid var(--color-brd-form-input-on, #00ff00);
  color              : var(--color-txt-form-input-on, #0000ff);
  -webkit-appearance : none;
}
form input::placeholder {
  color              : var(--color-txt-form-input-placeholder-dflt, #0000ff);
  padding-left       : 1em;
}
form input:hover::placeholder,
form input:focus::placeholder {
  color              : var(--color-txt-form-input-placeholder-on, #ffffff);
  padding-left       : 1em;
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ common ＞ form系 ＞ レイアウト
-========--========--========--========--========--========--========--========--========--========-*/
/* search type Label holder / search other visible input elements Holder*/
form .searchVUIHolder,
form .searchTypeLabelHolder,
form .searchOVIEHolder {
  display            : flex;
  justify-content    : center;
  align-items        : center;
}
form .searchVUIHolder {
  flex-direction  : row;
}

form .searchVUIHolder .searchTypeLabelHolder label {}

form .searchVUIHolder .searchTypeLabelHolder .searchTypeTitle {
  min-width : 8em;
}

form .searchVUIHolder .searchOVIEHolder input[type="submit"] {
  margin : 0;
}

@media (width < 573px) {
  form .searchVUIHolder {
    width          : 100%;
    flex-direction : column;
    flex-wrap      : wrap;
  }
  form .searchTypeLabelHolder,
  form .searchOVIEHolder {
    width : 100%;
  }
  form .searchTypeLabelHolder {
    justify-content    : flex-start;
  }
  form .searchOVIEHolder {
    justify-content    : flex-end;
  }
}

/* ----likeSearchBtnInSearchKeyword */

.likeSearchBtnInSearchKeyword {
  --frmUI-likeSBInSK-bgColor         : var(--color-background-form-input-default, #ffffff);
  --frmUI-likeSBInSK-brdColor        : var(--color-border-form-input-default, #000000);
  --frmUI-likeSBInSK-brdColor-whnFcs : var(--color-border-button-hover-01, #ff0000);
  --frmUI-likeSBInSK-btn-bgColor     : var(--color-background-gene-button-default, #cccccc);
  --frmUI-likeSBInSK-btn-fntColor    : var(--color-text-form-input-inputed-default, #000000);

  display          : flex;
  align-items      : stretch;
  min-width        : 130px;
  max-width        : 100%;
  padding          : 0;
  width            : 100%;
  border           : 1px solid var(--frmUI-likeSBInSK-brdColor);
  background-color : var(--frmUI-likeSBInSK-bgColor);
}

.likeSearchBtnInSearchKeyword:focus-within {
  outline          : 1px solid var(--frmUI-likeSBInSK-brdColor-whnFcs); 
}

.likeSearchBtnInSearchKeyword input[type=text] {
  display          : block;
  width            : calc(100% - 4em);
  height           : 3em;
  border           : none;
  background-color : var(--frmUI-likeSBInSK-bgColor);
  color            : var(--frmUI-likeSBInSK-btn-fntColor);
}

.likeSearchBtnInSearchKeyword input[type=text]:focus,
.likeSearchBtnInSearchKeyword input[type=text]:focus-visible,
.likeSearchBtnInSearchKeyword input[type=submit]:focus,
.likeSearchBtnInSearchKeyword input[type=submit]:focus-visible,
.likeSearchBtnInSearchKeyword button:focus,
.likeSearchBtnInSearchKeyword button:focus-visible {
  border           : none;
  outline          : 0;
}

.likeSearchBtnInSearchKeyword button,
.likeSearchBtnInSearchKeyword input[type=submit] {
  width            : 4em;
  background-color : var(--frmUI-likeSBInSK-btn-bgColor);
  margin-right     : 3px;
  color            : var(--frmUI-likeSBInSK-btn-fntColor)
}

.likeSearchBtnInSearchKeyword button img {
  display         : block;
  margin          : 0 auto;
}
form .searchVUIHolder .searchOVIEHolder .likeSearchBtnInSearchKeyword input[type="submit"], 
form .searchVUIHolder .searchOVIEHolder.likeSearchBtnInSearchKeyword input[type="submit"] {
  margin-right    : 3px;
}

/* likeSearchBtnInSearchKeyword---- */





/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ ヘッダー ＞ サイト内部検索 ＞ 標準（google） ＞ 右側アイコン付（プレースホルダーあり）
-========--========--========--========--========--========--========--========--========--========-*/
.site-header form.headerSearch {
  padding-right : 1.25rem;
}
.site-header form.headerSearch .searchOVIEHolder {
  display       : flex;
  align-items   : center;
  column-gap    : var(--space-8, 8px);
  height        : 42px;
  padding       : var(--space-2, 2px);
  border        : 1px solid var(--color-brd-sh-search-cmprnt-dflt,#00A5BF);
  border-radius : var(--rounded-4, 4px);
  transition    : background-color 0.3s ease-in-out;
}
.site-header form.headerSearch .searchOVIEHolder .searchText.withLeftIcon {
  flex                 : 1;
  padding-inline-start : 32px;
  height               : 100%;
  background           : var(--sh-search-icon-url-with-url-fx) no-repeat 8px center;
  background-size      : 18px;
  color                : var(--color-txt-sh-search-inputed-dflt, #ff0000);
  border               : transparent;
  border-radius        : var(--rounded-4, 4px);
  transition           : border-color 0.3s ease-in-out;
}

.site-header form.headerSearch .searchOVIEHolder:hover .searchText.withLeftIcon,
.site-header form.headerSearch .searchOVIEHolder:focus-within .searchText.withLeftIcon {
  color                : var(--color-txt-sh-search-inputed-on, #00ff00);
}

.site-header form.headerSearch .searchOVIEHolder input[type='text'] {
  border               : none;
}

.site-header form.headerSearch .searchOVIEHolder input[type='text']::placeholder {
  padding-inline-start : 8px;
  color                : var(--color-txt-sh-search-plchldr-dflt, #B8B8B8);
}
.site-header form.headerSearch .searchOVIEHolder input[type='text']:focus::placeholder {
  color                : var(--color-txt-sh-search-plchldr-on, #B8B8B8);
}

.site-header form.headerSearch .searchOVIEHolder input[type='submit'].searchTrigger {
  padding             : var(--space-6, 6px);
  margin-inline-start : var(--space-4, 4px);
  background          : var(--color-bg-sh-search-btn-dflt, #062042);
  border              : transparent 2px solid;
  border-radius       : var(--rounded-4, 4px);
  color               : var(--color-txt-sh-search-btn-dflt, #ffffff);
  font-size           : var(--font-size-15, calc(15 / 16 * calc(16 * 1em / 16)));
  font-weight         : var(--font-weight-regular, 400);
  line-height         : 1;
  letter-spacing      : var(--tracking-10,calc(0.1 * 0.1em));
}
.site-header form.headerSearch .searchOVIEHolder:hover,
.site-header form.headerSearch .searchOVIEHolder:focus-within {
  background-color    : var(--color-bg-sh-search-on,#a6e2eb);
}

.site-header form.headerSearch .searchOVIEHolder input[type='text']:focus {
  border              : 1px solid var(--color-brd-focus-dflt,#f00000);
  outline             : none;
}
.site-header form.headerSearch .searchOVIEHolder input[type='submit']:focus {
  border-color        : var(--color-brd-focus-dflt ,#f00000);
  background          : var(--color-bg-sh-search-btn-on, #00A5BF);
  color               : var(--color-txt-sh-search-btn-on, #ffffff);
}
.site-header form.headerSearch .searchOVIEHolder .searchText.withLeftIcon:focus-visible {
  /* キーボード操作でフォーカスしたときのみ */
  border-color        : var(--color-brd-focus-vsbl-default,#e99d19);
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ ヘッダー ＞ アクセシビリティ ＞ ドローワー外 ＞ 背景色変更＆文字サイズ変更（基本）
-========--========--========--========--========--========--========--========--========--========-*/
.site-header .outerDrawer.color_change {
  position            : relative;
  display             : flex;
  /* 先頭と末尾の子要素は端に寄せられる */
  justify-content     : space-between;
  gap                 : var(--space-6, 6px);
  margin-left         : 2.5rem;
}
.site-header .outerDrawer.textsize_change {
  position            : relative;
  display             : flex;
  /* 先頭と末尾の子要素は端に寄せられる */
  justify-content     : space-between;
  gap                 : var(--space-6, 6px);
  margin-left         : 2.5rem;
}

.site-header .outerDrawer.color_change dd,
.site-header .outerDrawer.textsize_change dd {
  font-size: 1rem;
  width    : 1.875rem;
}

.site-header .outerDrawer.color_change dt,
.site-header .outerDrawer.textsize_change dt {
  width         : auto;
  padding-right : 0.5rem;
  font-size     : 0.75rem;
}
.site-header .outerDrawer.textsize_change .smaller { width:   1.650rem; font-size: 0.75rem;}
.site-header .outerDrawer.textsize_change .default { width:   1.750rem; font-size: 1rem; }
.site-header .outerDrawer.textsize_change .larger { font-size: 1.25rem; }




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ ヘッダー ＞ アクセシビリティ＞ adjustPerTemplate ＞ 背景色変更＆文字サイズ変更
-========--========--========--========--========--========--========--========--========--========-*/
.site-header .colorAndTextsizeChanger {
  position            : relative;
  display             : flex;
  justify-content     : space-around;
  padding             : 0.5em;
  background-color    : var(--color-bg-sh-clrAndTxtszeChnger-dflt, #00ff00);
  border-radius       : var(--rounded-8, 8px);
}
.site-header .colorAndTextsizeChanger .outerDrawer.color_change dt,
.site-header .colorAndTextsizeChanger .outerDrawer.textsize_change dt {
  color               : var(--color-txt-sh-clrAndTxtszeChnger-dflt, #ffffff);
}

.site-header .colorAndTextsizeChanger .color_change.outerDrawer,
.site-header .colorAndTextsizeChanger .textsize_change.outerDrawer {
  margin-left  : 0.75rem;
  margin-right : 0.75rem;
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ ヘッダー ＞ 左側アイコン付きボタン ＞ 基本デザイン
-========--========--========--========--========--========--========--========--========--========-*/
/* imgタグを使わないのでic(o)nという名前を利用する */
.site-header .leftIconLink {}

.site-header .leftIconLink.whenTempPut a.withLeftIcon {
  width            : calc(var(--sh-leftIcnLnk-common-width-dflt, 215) * 1px);
  height           : calc(var(--sh-leftIcnLnk-common-height-dflt, 60) * 1px);
  background-color : #777777;
  border           : 1px solid #ff0000;
  color            : #333333 !important;
}

.site-header .leftIconLink a.withLeftIcon {
  display         : flex;
  height          : 100%;
  position        : relative;
  inline-size     : calc(var(--sh-leftIcnLnk-common-width-dflt ,215) / var(--font-size-base, 16) * 1em);
  block-size      : calc(var(--sh-leftIcnLnk-common-height-dflt, 60) / var(--font-size-base, 16) * 1em);
  padding-block   : calc(16 / var(--font-size-base, 16) * 1em);
  padding-inline  : calc(72 / var(--font-size-base, 16) * 1em) calc(var(--sh-leftIcnLnk-txt-padding-inline, 8) / var(--font-size-base, 16) * 1em);
  border          : 1px var(--color-brd-sh-leftIcnLnk-dflt, #00A5BF) solid;
  border-radius   : var(--sh-leftIcnLnk-common-brd-radius, 0);
  background      : var(--color-bg-sh-leftIcnLnk-dflt, #ffffff);
  line-height     : 1.3;
  color           : var(--color-txt-sh-leftIcnLnk-dflt, #333333);

  font-weight     : 600;
  font-size       : var(--sh-leftIcnLnk-txt-fntSize-dflt, calc(18 / var(--font-size-base, 16) * 1em));
  text-decoration : none;
  /* 上下の中央寄せ */
  align-items     : center;
}
.site-header .leftIconLink a.withLeftIcon:hover,
.site-header .leftIconLink a.withLeftIcon:focus {
  border          : 1px var(--color-brd-sh-leftIcnLnk-on, #00A5BF) solid;
  background      : var(--color-bg-sh-leftIcnLnk-on, #777777);
  color           : var(--color-txt-sh-leftIcnLnk-on, #990000);
}

.site-header .rsvdChildWidth > .leftIconLink a {
  /* flex内では幅が変更されることがあるので、クラス「rsvdChildWidth」の直下要素の場合に限り、変数で幅を固定する */
  min-width       : calc(var(--sh-leftIcnLnk-common-width-dflt ,215) * 1px);
  max-width       : calc(var(--sh-leftIcnLnk-common-width-dflt ,215) * 1px);
}

.site-header .leftIconLink a.withLeftIcon {
  padding-inline-start : calc(var(--sh-leftIcnLnk-icon-scrn-width,58) * 1px);
}
.site-header .leftIconLink a.withLeftIcon::before {
  content         : '';
  display         : block;
  position        : absolute;
  left            : 0;
  inset-block     : 0;
  margin          : auto;
  background-size : 100% auto;
}
.site-header .leftIconLink a.withLeftIcon::before {
  width               : calc(var(--sh-leftIcnLnk-icon-scrn-width ,58) * 1px);
  height              : calc(var(--sh-leftIcnLnk-icon-scrn-height,58) * 1px);
  background-repeat   : no-repeat;
  background-position : center;  
  background-image    : var(--sh-leftIcnLnk-icon-url-dflt);
  background-size     : calc(var(--sh-leftIcnLnk-icon-self-width,58) * 1px);
}

.site-header .singleColumn.widthSyncWidestChild .leftIconLink a.withLeftIcon {
  /* widthSyncWidestSibling : 兄弟要素の最大の幅に合わせる */
  /* 折り曲げない */
  white-space          : nowrap;
  /* 幅を(伸縮する)親要素に合わせる */
  width                : 100%;
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ ヘッダー ＞ 左側アイコン付きボタン ＞ adjustPerTemplate ＞ 図書館向け ＞ マイページ＆利用者カード 
-========--========--========--========--========--========--========--========--========--========-*/
.site-header .leftIconLink.myPageLoginAndCard {}

.site-header .leftIconLink.myPageLoginAndCard.guideForMyPage a.withLeftIcon {
  padding-inline-start : calc(var(--sh-leftIcnLnk-mypg-pddng-inln-strt,58) * 1px);
  background-color     : var(--color-bg-sh-leftIcnLnk-mypg-dflt, #E2F7F6);
}
.site-header .leftIconLink.myPageLoginAndCard.showCard a.withLeftIcon {
  padding-inline-start : calc(var(--sh-leftIcnLnk-card-pddng-inln-strt,62) * 1px);
  background-color     : var(--color-bg-sh-leftIcnLnk-card-dflt, #E6DAFD);
}

.site-header .leftIconLink.myPageLoginAndCard.guideForMyPage a.withLeftIcon::before {
  background-image     : var(--sh-leftIcnLnk-mypg-icon-url);
  background-size      : calc(var(--sh-leftIcnLnk-mypg-icon-self-width,48) * 1px);
}
.site-header .leftIconLink.myPageLoginAndCard.showCard a.withLeftIcon::before {
  background-image     : var(--sh-leftIcnLnk-card-icon-url);
  background-size      : calc(var(--sh-leftIcnLnk-card-icon-self-width,48) * 1px);
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ ヘッダー ＞ 左側アイコン付きボタン ＞ adjustPerTemplate ＞ 三角形 
-========--========--========--========--========--========--========--========--========--========-*/
.site-header .leftIconLink.triangleMark {}

.site-header .leftIconLink.triangleMark a.withLeftIcon {
  padding-inline-start : calc(var(--sh-leftIcnLnk-icon-scrn-width,50) * 1px);
}

.site-header .leftIconLink.triangleMark a.withLeftIcon::before {
  background-image     : var(--sh-leftIcnLnk-triMk-icon-url-dflt);
  background-size      : calc(var(--sh-leftIcnLnk-triMk-icon-self-width,20) * 1px);
}

.site-header .leftIconLink.triangleMark a.withLeftIcon:hover::before,
.site-header .leftIconLink.triangleMark a.withLeftIcon:focus::before {
  background-image     : var(--sh-leftIcnLnk-triMk-icon-url-on);
  background-size      : calc(var(--sh-leftIcnLnk-triMk-icon-self-width,20) * 1px);
}






:where(:root) {
  --drwr-scrn-padding-top    : var(--sHDsgnBsRct000-h-rsgnPrDmTy);
  --drwr-scrn-padding-left   : var(--sHDsgnBsRct000-w-rsgnPrDmTy);
  --drwr-scrn-padding-right  : var(--drwr-scrn-padding-left);
  --drwr-scrn-padding-bottom : var(--drwr-scrn-padding-left);
}

.drwrScrn__itemsHolder {
  /* layout */
  /* --drwr-scrn-padding-top    : calc(var(--sHDsgnBsRct000-h-rsgnPrDmTy) + var(--iSH-drwrScrn-aRT-square-padding-using)); */
  padding-top     : calc(var(--drwr-scrn-padding-top) * 1px);
  padding-left    : calc(var(--drwr-scrn-padding-left) * 1px);
  padding-right   : calc(var(--drwr-scrn-padding-right) * 1px);
  padding-bottom  : calc(var(--drwr-scrn-padding-bottom) * 1px);
}

/* media */
@media (width < 992px) {
  :where(:root) {
    /* drawerScreen ＞ 位置（左上） */
    --iSH-drwrSrcn-aLT-top-fixed-default        : 0;
    --iSH-drwrSrcn-aLT-top-fixed-using          : var(--iSH-drwrSrcn-aLT-top-fixed-default);
  
      /* drawer screen ＞ サイズ */
    --iSH-drwrScrn-aRT-left-from-sH-cZALT-using : var(--sHDsgnBsRct002-sorW);
  }

}

/* @media (width < 768px) {} */

@media (width < 576px) {
  :where(:root) {
    /* drawerScreen ＞ 位置（左上） */
    --iSH-drwrSrcn-aLT-top-fixed-default        : 0;
    --iSH-drwrSrcn-aLT-top-fixed-using          : var(--iSH-drwrSrcn-aLT-top-fixed-default);

    --iSH-drwrSrcn-aLT-left-fixed-default       : 0;
    --iSH-drwrSrcn-aLT-left-fixed-using         : var(--iSH-drwrSrcn-aLT-left-fixed-default);

    /* drawer screen ＞ サイズ */
    --iSH-drwrScrn-aRT-left-from-sH-cZALT-using : var(--sHDsgnBsRct002-sorW);
  }
  .drwrScrn__itemsHolder {
    padding-top        : calc(var(--sh-logo-height) * 1px);
    padding-left       : 5%;
    padding-right      : 5%;
    padding-bottom     : 5%;
  }

}

/* @media (width < 370px) {} */
/* @media (width < 320px) {} */




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ ドローワー ＞ グローバルメニューエージェント（代役）
-========--========--========--========--========--========--========--========--========--========-*/
.drwrGlblMnCollector {
  display         : flex;
  justify-content : center;
  width           : 100%;
  height          : auto;
  /* 子要素を（親要素の幅が足りなくなったら、）自動的に折り返す */
  flex-wrap       : wrap;
}
.drwrGlblMnItem {
  display            : flex;
  width              : fit-content;
  /* padding-inline-end : 0.5em; */
}
.drwrGlblMnAgentLink {
  /* layout */
  position              : relative;
  display               : flex;
  place-items           : center;
  gap                   : var(--space-6, 6px);
  width                 : 100%;
  padding-block         : var(--space-12, 12px);
  padding-inline        : var(--space-24, 24px);
  gap                   : var(--space-6, 6px);

  /* style */
  background-color      : var(--color-bg-gene-button-dflt, #ff0000);
  border                : 1px solid  var(--color-brd-gene-button-dflt, #ff0000);
  border-radius         : var(--rounded-8, 8px);
  text-decoration       : none;

  /* transition */
  transition            : all 0.3s ease;
}
.drwrGlblMnAgentLink:hover,
.drwrGlblMnAgentLink:focus,
.drwrGlblMnAgentLink:focus-within {
  /* style */
  background-color     : var(--color-bg-gene-button-on, #00ff00);
  border-color         : var(--color-brd-gene-button-on, #00ff00);
}
.drwrGlblMnAgentLabel {
  /* layout */
  display: flex;
  place-items: center;
  /* style */
  color: var(--color-txt-gene-button-dflt, #ff0000);
  /* typography */
  font-size: var(--font-size-28, 28px);
  font-weight: var(--fontweight-medium,500);
  line-height: 1.5;
  letter-spacing: var(--tracking-5, calc(0.5 * 0.1em));
  text-align: center;
}
.drwrGlblMnAgentLink:hover .drwrGlblMnAgentLabel,
.drwrGlblMnAgentLink:focus .drwrGlblMnAgentLabel,
.drwrGlblMnAgentLink:focus-within .drwrGlblMnAgentLabel {
  color: var(--color-txt-gene-button-on, #0000ff);
}





/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ ヘッダー ＞ ドローワー ＞ ロゴアイコン ＞ adjustPerTemplate ＞ サイズ（幅）.固定型
-========--========--========--========--========--========--========--========--========--========-*/
.drwrScrn__itemsHolder {
  /* siteDrawerTitleを直下子要素として配置することを想定 */ 
  position            : relative;
}

.siteDrawerTitle {
  /*
  利用変数
  --stack-top
  --border-width-dflt-whn-hvr

  --sh-drwr-logo-static-width
  --color-brd-sh-drwr-logo-hvr-dflt
  --sh-drwr-logo-left-dflt
  --sh-drwr-logo-top-dflt
  */
  /* デフォルト値をrootの近似プロパティに指定する */
  --sh-drwr-logo-static-width       : var(--sh-logo-static-width      , 350);
  --sh-drwr-logo-left-dflt          : var(--sh-logo-left-default      , 0);
  --sh-drwr-logo-top-dflt           : var(--sh-logo-top-default       , 0);
  --color-brd-sh-drwr-logo-hvr-dflt : var(--color-brd-sh-logo-hvr-dflt, #00ff00);

  /* drwrScrn__itemsHolderの直下に配置することを想定 */ 
  position            : absolute;
  z-index             : calc(var(--stack-top, infinity));
  width               : calc(var(--sh-drwr-logo-static-width, 350) * 1px);
  height              : auto;
  left                : calc(var(--sh-drwr-logo-left-dflt) * 1px);
  top                 : calc(var(--sh-drwr-logo-top-dflt ) * 1px);
}
.site-header .siteDrawerTitle .anchorHolder {
  position            : relative;
}
.site-header .siteDrawerTitle a.siteTitleLink {
  position            : absolute;
  width               : 100%;
}

.site-header .siteDrawerTitle a.siteTitleLink img {
  display             : block;
  width               : 100%;
  height              : 100%;
}
.site-header .siteDrawerTitle a.siteTitleLink.decoShdwOnHv:hover,
.site-header .siteDrawerTitle a.siteTitleLink.decoShdwOnHv:focus,
.site-header .siteDrawerTitle a.siteTitleLink.decoShdwOnHv:focus-within {
  /* 画像の下に境界線と同じ位置に部分的な境界線を描画する */
  box-shadow           : inset 0 0 0 var(--border-width-dflt-whn-hvr,3px) var(--color-brd-sh-drwr-logo-hvr-dflt,#00ff00);
}
.site-header .siteDrawerTitle a.siteTitleLink.decoXBLOnHv:hover,
.site-header .siteDrawerTitle a.siteTitleLink.decoXBLOnHv:focus,
.site-header .siteDrawerTitle a.siteTitleLink.decoXBLOnHv:focus-within {
  /* 表示するにはaタグのpositionがabsoluteであることが前提 */
  outline              : var(--border-width-dflt-whn-hvr,3px) solid var(--color-brd-sh-drwr-logo-hvr-dflt);
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ フッター ＞ 一般化クラス（レイアウト） ＞レスポンシブルに要素を並べ替える
-========--========--========--========--========--========--========--========--========--========-*/
.site-footer .responsibleSortPerWidth {
  --sf-el-chld-cmmn-width      : 100;
  --sf-el-chld-cmmn-mrgn-width : 24;
  --sf-el-chld-max-column      : 3;
  --sf-el-prnt-max-width       : calc(var(--sf-el-chld-max-column) * var(--sf-el-chld-cmmn-width) + (var(--sf-el-chld-max-column) - 1) * var(--sf-el-chld-cmmn-mrgn-width) + var(--sf-el-chld-cmmn-mrgn-width) * 2);
}

.site-footer .responsibleSortPerWidth {
  display         : flex;
  justify-content : center;  /* 全体を中央寄せ */
  gap             : calc(var(--sf-el-chld-cmmn-mrgn-width) * 1px);   /* 要素間の固定ギャップ */
  padding-left    : 0;       /* 左端余白 */
  padding-right   : 0;       /* 右端余白 */
  max-width       : calc(var(--sf-el-prnt-max-width) * 1px); /* 要素幅 * 個数 + ギャップ * (macColLength - 1) + padding*2 */
  margin          : 0 auto;  /* コンテナを中央に寄せる */
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ Footer ＞ Copyright 
-========--========--========--========--========--========--========--========--========--========-*/
.copyright {
  background : var(--color-background-main, #ff0000);
}

.copyright__container {
  margin-top            : 1rem;
  margin-bottom         : 1rem;
  padding-left          : 5%;
  padding-right         : 5%;
}

.copyright p {
  /* layout */
  margin         : unset;
  /* typography */
  font-size      : calc(16 / 16 * 1rem);
  font-weight    : var(--fontweight-regular);
  letter-spacing : var(--tracking-6);
  text-align     : end;
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ Footer ＞ Copyright ＞ forSiteHavingHrzTeoEdgeLimiter alwaysFullWidthElement
-========--========--========--========--========--========--========--========--========--========-*/
.site-footer .copyright {
  background : var(--color-bg-footer-dflt);
  font-size  : 0.5rem; 
}
.site-footer .copyrightTextHolder {
  margin-top            : 2.5rem;
  margin-bottom         : 2.5rem;
  padding-left          : 1rem;
  padding-right         : 1rem;
}
.site-footer .copyright p {
  text-align : center;
  font-size  : 0.8rem;
  color      : var(--color-txt-footer-dflt, #0000ff);
}




/************************************/
/* ロゴと地図等（配置）（ここから） */
/************************************/
:where(:root) {
  /*
  デザインに大きく影響するのでrootに定義
  */
  --sf-lcEtc-rDRL1-wLnT-wdth-wm-per : 45;
  --sf-lcEtc-rDRL1-wRnB-wdth-wm-per : 55;
  --sf-lcEtc-slf-wm-aspect-ratio    : 5 / 2;
  --sf-lcEtc-logoHldr-aspect-ratio  : 100 / 18;
}

.site-footer .locationInfoAndEtc {
  /* 幅:高さ = leftValue : rightValue */
  aspect-ratio    : var(--sf-lcEtc-slf-wm-aspect-ratio);
  display         : flex;
  margin          : 0;
  padding         : 0;
}

.site-footer .locationInfoAndEtc .wdthfull { width: 100%; }

.site-footer ul.hcih-ih,
.site-footer .hcih-ih flBx {
  display         : flex;
  flex-wrap       : wrap;
}

/* rDRL(n): div layor relative level */
/* wLnT: (when)w(ide)L(eft),(when)n(arrow)T(op),wRnB: (when)w(ide)R(ight),(when)n(arrow)B(ottom) */

.site-footer .locationInfoAndEtc .rDRL1.wdth2div.wLnT { width: calc(var(--sf-lcEtc-rDRL1-wLnT-wdth-wm-per, 45) * 1%); }
.site-footer .locationInfoAndEtc .rDRL1.wdth2div.wRnB { width: calc(var(--sf-lcEtc-rDRL1-wRnB-wdth-wm-per, 55) * 1%); }

.site-footer .footerSubMenus.hcih-h {
  flex-wrap: wrap;
}

/************************************/
/* ロゴと地図等（配置）（ここまで） */
/************************************/

/****************************/
/* ロゴと住所等（ここから） */
/****************************/

.site-footer .logoAndLocationZone {
  width      : 45%;
  background : var(--color-bg-this-dflt, #0000ff);
}
.site-footer .logoAndLocationZone {
  background : var(--color-bg-footer-lgAndLcZn-dflt, #0000ff);
}

.site-footer .logoAndLocationZone .logoAndLocationInfo {
  width       : 55%;
  margin      : 0 auto;
}

.site-footer .logoAndLocationZone .footerLogoHolder,
.site-footer .logoAndLocationZone .postNumberAndAddressHolder,
.site-footer .logoAndLocationZone .footerSubItem {
  /* margin-left : calc(var(--sf-lcEtc-logo-pos-left-per,20.5) * 1%); */
}

.site-footer .footerLogoHolder { aspect-ratio: var(--sf-lcEtc-logoHldr-aspect-ratio,100 / 18);}
.site-footer .footerLogoHolder .hcih-ih {
  width       : 100%; 
}
.site-footer .footerLogoHolder .siteFooterLogo { 
  display     : block; 
  width       : 100%;
  /* margin-top  : calc(var(--sf-lcEtc-logo-pos-top-per ,5  ) * 1%); */
}

.site-footer .footerLogoHolder img.siteFooterLogo {
  filter: var(--color-img-cnstrstFilter-for-black);
}

.site-footer .siteNameHolder { height :0; /* aspect-ratio: 8 / 1; */ }
.site-footer .postNumberAndAddressHolder {
  aspect-ratio : 8 / 1;
}
.site-footer .postNumberAndAddressHolder span {
  color          : var(--color-txt-this-dflt, #ff0000);
  font-size      : calc(15 / 16 * 1rem);
  font-weight    : var(--fontweight-medium, 500);
  letter-spacing : var(--tracking-5);
  white-space    : nowrap;
}
.site-footer .postNumberAndAddress{
  display : flex;
  gap     : 0 var(--space-16, 1rem);
}
.site-footer .telNumberHolder { aspect-ratio: 16 / 1; margin-left:20.5%;}
.site-footer .qrCodeAndEtcHolder { aspect-ratio: 4 / 1; margin-left:20.5%;}
.site-footer .qr__for__opac { width: 10%; height: 10%; }
.site-footer .guideTextForMobileOpac { /* 2025-07-28-remove */}

}
.site-footer .etcZone {
  background : var(--color-bg-footer-dflt, #BBEEF6);
}
.site-footer .etcZone {
  background : var(--color-bg-footer-lgAndLcZn-dflt, #BBEEF6);
}


/****************************/
/* ロゴと住所等（ここまで） */
/****************************/

@media (width < 992px) {
  .site-footer .logoAndLocationInfo {
    font-size  : 0.75rem;
  }
}

@media (width < 576px) {
  /************************************/
  /* ロゴと地図等（配置）（ここから） */
  /************************************/
  .site-footer .locationInfoAndEtc {
    aspect-ratio   : auto;
  }

  .site-footer .locationInfoAndEtc .logoAndLocationZone {
    width          : 100%;
  } 
  .site-footer .locationInfoAndEtc .inFlex.wdth2div.locaAndLogoZone {
    width          : 100%;
    /* 幅:高さ = leftValue : rightValue */
    aspect-ratio   : 10 / 7;
  }
  /************************************/
  /* ロゴと地図等（配置）（ここまで） */
  /************************************/

  /****************************/
  /* ロゴと住所等（ここから） */
  /****************************/
  .site-footer .footerLogoHolder {}
  .site-footer .footerLogoHolder .site-footer__logo {
    width          : 78%;
    margin-left    : 10%;
    margin-top     : 10%;
  }
  .site-footer .siteNameHolder {}
  .site-footer .postNumberAndAddressHolder { 
  }
  .site-footer .postNumberAndAddressHolder .postNumberAndAddress {}

  .site-footer .telNumberHolder {
  }

  /****************************/
  /* ロゴと住所等（ここまで） */
  /****************************/

}




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ フッター ＞ グラフィック付きリンク ＞ 基本デザイン
-========--========--========--========--========--========--========--========--========--========-*/
/* imgタグを使わないのでic(o)nという名前を利用する */
.site-footer .graphicDecoLink {
  --sf-grphDcLnk-bar-scrn-brd-width  : calc((var(--sf-grphDcLnk-icon-scrn-width ,10) - var(--sf-grphDcLnk-bar-width, 4)) / 2);
}
.site-footer .graphicDecoLink {}
.site-footer .graphicDecoLink.decoLeft.whenTempPut a,
.site-footer .graphicDecoLink.decoRight.whenTempPut {
  width            : calc(var(--sf-grphDcLnk-common-width-dflt, 215) * 1px);
  height           : calc(var(--sf-grphDcLnk-common-height-dflt, 60) * 1px);
  background-color : #777777;
  border           : 1px solid #ff0000;
}

.site-footer .graphicDecoLink.decoLeft,
.site-footer .graphicDecoLink.decoRight {
  border-radius: var(--rounded-12);
  box-shadow: 0 0 0 var(--sf-grphDcLnk-outLine-width-on) var(--color-outLine-sf-grphDcLnk-on);
}

.site-footer .graphicDecoLink.decoLeft a,
.site-footer .graphicDecoLink.decoRight a {
  display         : flex;

  height          : 100%;
  position        : relative;
  inline-size     : calc(var(--sf-grphDcLnk-common-width-dflt ,215) / var(--font-size-base, 16) * 1em);
  block-size      : calc(var(--sf-grphDcLnk-common-height-dflt, 60) / var(--font-size-base, 16) * 1em);

  padding-block   : calc(16 / var(--font-size-base, 16) * 1em);

  border          : 1px solid var(--color-brd-sf-grphDcLnk-dflt, #ff0000);
  border-radius   : var(--sf-grphDcLnk-common-brd-radius, 0);
  background      : var(--color-bg-sf-grphDcLnk-dflt, #ff0000);
  line-height     : 1.3;
  color           : var(--color-txt-sf-grphDcLnk-dflt, #ff0000);
  font-weight     : 600;
  font-size       : var(--sf-grphDcLnk-txt-fntSize-dflt, calc(18 / var(--font-size-base, 16) * 1em));
  text-decoration : none;
  /* 上下の中央寄せ */
  align-items     : center;
}
.site-footer .graphicDecoLink.decoLeft a:hover,
.site-footer .graphicDecoLink.decoLeft a:focus,
.site-footer .graphicDecoLink.decoRight a:hover,
.site-footer .graphicDecoLink.decoRight a:focus {
  background      : var(--color-bg-sf-grphDcLnk-on, #00ff00);
  border          : 1px var(--color-brd-sf-grphDcLnk-on, #ff0000) solid;
  color           : var(--color-txt-sf-grphDcLnk-on, #00ff00);
}

.site-footer .rsvdChildWidth > .graphicDecoLink a {
  /* flex内では幅が変更されることがあるので、クラス「rsvdChildWidth」の直下要素の場合に限り、変数で幅を固定する */
  min-width       : calc(var(--sf-grphDcLnk-common-width-dflt ,215) * 1px);
  max-width       : calc(var(--sf-grphDcLnk-common-width-dflt ,215) * 1px);
}

/* 両端の角を取る */
.site-footer .graphicDecoLink.decoLeft a.rmCrnr,
.site-footer .graphicDecoLink.decoRight a.rmCrnr {
  border-radius: 9999px;
}

.site-footer .graphicDecoLink.decoLeft a::before,
.site-footer .graphicDecoLink.decoRight a::after {
  content         : '';
  display         : block;
  position        : absolute;
  left            : 0;
  inset-block     : 0;
  margin          : auto;
  background-size : 100% auto;
}

/* 左側にグラフィック配置 */
.site-footer .graphicDecoLink.decoLeft a {
  padding-inline       : calc(72 / var(--font-size-base, 16) * 1em) calc(var(--sf-grphDcLnk-txt-padding-inline, 8) / var(--font-size-base, 16) * 1em);
  padding-inline-start : calc(var(--sf-grphDcLnk-icon-scrn-width,58) * 1px);
}
.site-footer .graphicDecoLink.decoLeft a::before {
  position            : absolute;
  width               : calc(var(--sf-grphDcLnk-icon-scrn-width ,58) * 1px);
  height              : calc(var(--sf-grphDcLnk-icon-scrn-height,58) * 1px);
}
.site-footer .graphicDecoLink.decoLeft a.reqSrc::before {
  background-repeat   : no-repeat;
  background-position : center;  
  background-image    : var(--sf-grphDcLnk-icon-url-dflt);
  background-size     : calc(var(--sf-grphDcLnk-icon-self-width,58) * 1px);
}
/* 左側にグラフィック配置 */

/* 右側にグラフィック配置 */
.site-footer .graphicDecoLink.decoRight a {
  padding-inline       : calc(var(--sf-grphDcLnk-txt-padding-inline, 8) / var(--font-size-base, 16) * 1em) calc(72 / var(--font-size-base, 16) * 1em);
  padding-inline-end   : calc(var(--sf-grphDcLnk-icon-scrn-width,58) * 1px);
}
.site-footer .graphicDecoLink.decoRight a.reqSrc::after {
  position            : absolute;
  width               : calc(var(--sf-grphDcLnk-icon-scrn-width ,58) * 1px);
  height              : calc(var(--sf-grphDcLnk-icon-scrn-height,58) * 1px);
}
.site-footer .graphicDecoLink.decoRight a.reqSrc::after {
  background-repeat   : no-repeat;
  background-position : center;  
  background-image    : var(--sf-grphDcLnk-icon-url-dflt);
  background-size     : calc(var(--sf-grphDcLnk-icon-self-width,58) * 1px);
  left                : calc(100% - (var(--sf-grphDcLnk-icon-scrn-width ,58) * 1px));
}
/* 右側にグラフィック配置 */


.site-footer .graphicDecoLink.decoLeft a.reqSrc:hover::before,
.site-footer .graphicDecoLink.decoLeft a.reqSrc:focus::before,
.site-footer .graphicDecoLink.decoRight a.reqSrc:hover::after,
.site-footer .graphicDecoLink.decoRight a.reqSrc:focus::after  {
  background-image    : var(--sf-grphDcLnk-icon-url-on);
}

.site-footer .graphicDecoLink.decoLeft a.withBar::before {
  background-color   : var(--sf-grphDcLnk-bar-bg-dflt, #777777);
  border             : calc(var(--sf-grphDcLnk-bar-scrn-brd-width) * 1px) solid var(--color-bg-sf-grphDcLnk-dflt, #ffffff);
}
.site-footer .graphicDecoLink.decoLeft a.withBar:hover::before,
.site-footer .graphicDecoLink.decoLeft a.withBar:focus::before {
  background-color   : var(--sf-grphDcLnk-bar-bg-on, #00ff00);
  border             : calc(var(--sf-grphDcLnk-bar-scrn-brd-width) * 1px) solid var(--color-bg-sf-grphDcLnk-on, #ffffff);
}

.site-footer .singleColumn.widthSyncWidestChild .graphicDecoLink a {
  /* widthSyncWidestSibling : 兄弟要素の最大の幅に合わせる */
  /* 折り曲げない */
  white-space          : nowrap;
  /* 幅を(伸縮する)親要素に合わせる */
  width                : 100%;
}




/* ==============================================================
 標準 ＞ reread-link（表示中のページ上部（トップ）へ戻る）
============================================================== */
.reread-link {
  /*
  利用変数
  --sf-reLnk-scrn-pos-rght :
  --sf-reLnk-scrn-pos-bttm :
  --color-brd-sf-reLnk-dflt
  
  --sf-reLnk-on-oLn-width-numScl
  */
}

.reread-link {
  position         : fixed;
  inset-block-end  : calc(var(--sf-reLnk-scrn-pos-bttm,40) * 1px);
  inset-inline-end : calc(var(--sf-reLnk-scrn-pos-bttm,48) * 1px);
  width            : 76px;
  height           : 76px;
  background-color : var(--color-bg-sf-reLnk-dflt, #ff0000);
  border           : var(--sf-reLnk-dflt-brd-width-numScl, 1px) solid var(--color-brd-sf-reLnk-dflt, #ff0000);
  border-radius    : var(--rounded-full);
  z-index          : var(--stack-foot);
}
.reread-link.backSeeThrough {
  /* opacityを使うと画像まで透過する */
  background-color: rgba(255, 255, 255, 0);
}
.reread-link:hover, 
.reread-link:focus-within {
  outline: var(--sf-reLnk-OLn-on-width-numScl, 0) solid var(--color-Oln-sf-reLnk-on, #0000ff);
}


.reread-link a {
  display        : grid;
  place-items    : center;
  width          : 100%;
  height         : 100%;
}

.reread-link img {
  width            : 100%;
  height           : auto;
  object-fit       : contain;
}
/* 画像切替バージョン用(ここから) */
.reread-link img.showWhenNotFocused {
  display          : block;
}
.reread-link:hover img.showWhenNotFocused,
.reread-link:focus-within img.showWhenNotFocused {
  display          : none;
}

.reread-link img.showWhenFocused {
  display          : none;
}
.reread-link:hover img.showWhenFocused,
.reread-link:focus-within img.showWhenFocused {
  display          : block;
}



/* 画像切替バージョン用(ここまで) */




/* ==============================================================
 標準 ＞ reread-link（表示中のページ上部（トップ）へ戻る） ＞ テキスト付
============================================================== */

.reread-link .withOuterText {
  /*
  利用変数
  --color-text-sf-reLnk-dflt
  --color-text-sf-reLnk-on
  */
}

.reread-link .withOuterText span {
  display : none;
}
.reread-link .withOuterText span {
  display : block;
}
.reread-link.withOuterText {
  font-size : var(--font-size-12, 12px);
  color     : var(--color-text-sf-reLnk-dflt,#000000);
}
.reread-link.withOuterText:hover span,
.reread-link.withOuterText:focus-within span {
  color     : var(--color-text-sf-reLnk-on,#00ff00);
}





/*-========--========--========--========--========--========--========--========--========--========-
  標準 ＞ (side)navMenu ＞ navMenuCollector ＞ 標準デザイン
-========--========--========--========--========--========--========--========--========--========-*/




/*-========--========--========--========--========--========--========--========--========--========-
  標準 ＞ (side)navMenu ＞ navMenu ＞ 標準デザイン
-========--========--========--========--========--========--========--========--========--========-*/
.navMenuCollector .navMenu.plain  {
  background-color: var(--color-bg-sdMn-plnLnk-dflt, #777777);
  border : 1px solid var(--color-brd-sdMn-plnLnk-dflt, #222222);
  color: var(--color-txt-sdMn-plnLnk-dflt, #ff0000);
}

.navMenuCollector .navMenu.plain .listTitle {
  position: relative;

  font-size            : var(--font-size-32);
  font-weight          : var(--fontweight-regular);
  letter-spacing       : var(--tracking-50);
  padding-inline-start : var(--space-16);
  z-index: 1;
}

.navMenuCollector .plainLink a,
.navMenuCollector .plainLink a:visited {
  background-color: var(--color-bg-sdMn-plnLnk-lnk-dflt, #777777);
  border          : 1px solid var(--color-brd-sdMn-plnLnk-lnk-dflt, #ff0000);
  color: var(--color-txt-sdMn-plnLnk-lnk-dflt, #ff0000);
  display         : flex;
  padding         : 1em;
}
.navMenuCollector .navMenu.plain.txtCenter .plainLink a {
  justify-content: center;
}

.navMenuCollector .plainLink a:hover,
.navMenuCollector .plainLink a:focus {
  background-color: var(--color-bg-sdMn-plnLnk-lnk-on, #777777);
  border          : 1px solid var(--color-brd-sdMn-plnLnk-lnk-on, #00ff00);
  color: var(--color-txt-sdMn-plnLnk-lnk-on, #00f00);
}






/*-========--========--========--========--========--========--========--========--========--========-
  標準  ＞ (side)navMenu ＞ 表側 ＞ 装飾 ＞ 基本デザイン
-========--========--========--========--========--========--========--========--========--========-*/
.navMenuCollector .navMenu.decoItemBottomWithUL li {
  position : relative;
  margin-bottom : calc(var(--sdMn-dcBtm-mrgn-mn-to-mn, 20) * 1px);
}

.navMenuCollector .navMenu.decoItemBottomWithUL li::after{
  position: absolute;
  content: "";
  width: calc(100%);
  left: 0;
  top: calc(100% + (var(--sdMn-dcBtm-mrgn-from-menu, 10) * 1px));
  border-top: calc(var(--sdMn-dcBtm-brd-btm-width, 1) * 1px) var(--sdMn-dcBtm-ln-type, dashed) var(--color-brd-sdMn-dcBtm-dflt, #00ff00);
}


/*-========--========--========--========--========--========--========--========--========--========-
  標準  ＞ (side)navMenu ＞ 左側アイコン付きリンク ＞ 基本デザイン
-========--========--========--========--========--========--========--========--========--========-*/
.navMenuCollector .leftIconLink {}

.navMenuCollector .navMenu.withLeftIcon {
  background-color: var(--color-bg-sdMn-leftIcnLnk-ttl-dflt, #777777);
  border : 1px solid var(--color-brd-sdMn-leftIcnLnk-ttl-dflt, #ff0000);
  color: var(--color-txt-sdMn-leftIcnLnk-ttl-dflt, #ff0000);
}

.navMenuCollector .leftIconLink {}
.navMenuCollector .leftIconLink.whenTempPut a.withLeftIcon {
  width            : 100%;
  height           : calc(var(--sdMn-leftIcnLnk-common-height-dflt, 60) * 1px);
  background-color : #777777;
  border           : 1px solid var(--color-brd-sdMn-leftIcnLnk-dflt, #ff0000);
  color            : #333333 !important;
}

.navMenuCollector .navMenu.withLeftIcon .listTitle {
  position: relative;

  font-size            : var(--font-size-32);
  font-weight          : var(--fontweight-regular);
  letter-spacing       : var(--tracking-50);
  padding-inline-start : var(--space-16);
  z-index: 1;
}

.navMenuCollector .leftIconLink a.withLeftIcon {
  display         : flex;
  height          : 100%;
  position        : relative;
  inline-size     : 100%;
  padding-block   : calc(var(--sdMn-leftIcnLnk-txt-padding-block, 16) / var(--font-size-base, 16) * 1em);
  /* 日本語や英語の標準的な横書きの場合は、left right */
  padding-inline  : calc((var(--sdMn-leftIcnLnk-txt-padding-inline, 8) + var(--sdMn-leftIcnLnk-icon-scrn-width)) / var(--font-size-base, 16) * 1em) calc(var(--sdMn-leftIcnLnk-txt-padding-inline, 8) / var(--font-size-base, 16) * 1em);
  border          : 1px var(--color-brd-sdMn-leftIcnLnk-dflt, #00A5BF) solid;
  border-radius   : var(--sdMn-leftIcnLnk-common-brd-radius, 0);
  background      : var(--color-bg-sdMn-leftIcnLnk-dflt, #ffffff);
  line-height     : 1.3;
  color           : var(--color-txt-sdMn-leftIcnLnk-dflt, #333333);

  font-weight     : 600;
  font-size       : var(--sdMn-leftIcnLnk-txt-fntSize-dflt, calc(18 / var(--font-size-base, 16) * 1em));
  text-decoration : none;
  /* 上下の中央寄せ */
  align-items     : center;
  
  overflow-wrap: break-word;   /* 長い単語を強制的に折り返す */
  word-break: break-word;      /* サポートブラウザでは同等 */
  word-wrap: break-word;       /* 古いブラウザ向けの互換用 */
  white-space: normal;         /* 通常の折り返しを有効に */
}
.navMenuCollector .leftIconLink a.withLeftIcon:hover,
.navMenuCollector .leftIconLink a.withLeftIcon:focus {
  border          : 1px var(--color-brd-sdMn-leftIcnLnk-on, #00A5BF) solid;
  background      : var(--color-bg-sdMn-leftIcnLnk-on, #777777);
  color           : var(--color-txt-sdMn-leftIcnLnk-on, #990000);
}

.navMenuCollector .rsvdChildWidth > .leftIconLink a {
  /* flex内では幅が変更されることがあるので、クラス「rsvdChildWidth」の直下要素の場合に限り、変数で幅を固定する */
  min-width       : calc(var(--sdMn-leftIcnLnk-common-width-dflt ,215) * 1px);
  max-width       : calc(var(--sdMn-leftIcnLnk-common-width-dflt ,215) * 1px);
}

.navMenuCollector .leftIconLink a.withLeftIcon {
  padding-inline-start : calc(var(--sdMn-leftIcnLnk-icon-scrn-width,58) * 1px);
}
.navMenuCollector .leftIconLink a.withLeftIcon::before {
  content         : '';
  display         : block;
  position        : absolute;
  left            : 0;
  inset-block     : 0;
  margin          : auto;
  background-size : 100% auto;
}
.navMenuCollector .leftIconLink a.withLeftIcon::before {
  width               : calc(var(--sdMn-leftIcnLnk-icon-scrn-width ,58) * 1px);
  height              : calc(var(--sdMn-leftIcnLnk-icon-scrn-height,58) * 1px);
  background-repeat   : no-repeat;
  background-position : center;  
  background-image    : url(--sdMn-leftIcnLnk-icon-url-dflt);
  background-size     : calc(var(--sdMn-leftIcnLnk-icon-self-width,58) * 1px);
}




/*-========--========--========--========--========--========--========--========--========--========-
  標準  ＞ (side)navNenu ＞ 左側アイコン付きリンク ＞ arrowInCircle
-========--========--========--========--========--========--========--========--========--========-*/
.navMenuCollector .leftIconLink.arrowInCircle {
  /*
  利用変数
  --sh-leftIcnLnk-arrowInCircle-icon-url-dflt   : var();
  --sh-leftIcnLnk-arrowInCircle-icon-url-on     : var();
  */
}

.navMenuCollector .leftIconLink.arrowInCircle a.withLeftIcon::before {
  background-image    : var(--sh-leftIcnLnk-arrowInCircle-icon-url-dflt);
}

.navMenuCollector .leftIconLink.arrowInCircle a.withLeftIcon:hover::before,
.navMenuCollector .leftIconLink.arrowInCircle a.withLeftIcon:focus::before {
  background-image    : var(--sh-leftIcnLnk-arrowInCircle-icon-url-on);
}





/*-========--========--========--========--========--========--========--========--========--========-
  標準 ＞ (side)navMenu ＞ バナー ＞ 標準デザイン
-========--========--========--========--========--========--========--========--========--========-*/
.navMenuCollector .bannerLinkBlock .imgHolder img {
  width : 100%;
  height: auto;
}
.navMenuCollector .bannerLinkBlock .bannerIinkTitle {
  display : none;
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ Slider（基本）
-========--========--========--========--========--========--========--========--========--========-*/

/*===========================
 標準 ＞ Slider
=============================
 想定構成
=============================
  .slider-container
   .slide_box
    .slide_wrap
     button.slick-prev.slick-arrow
     .slick-list
      .slide.slick-slide(n)
     button.slick-next.slick-arrow
    .side-deco
     .
    .slide-control
     .slider-pagination
      .slick-dots
       .presentation(n)
     .buttons
      .button.js-play
      .button.js-stop
=============================*/

.slider-container {
  /* layout */
  position      : relative;
  width         : 100%;
  height        : auto;
}

.slider-container.full-width {
  /* layout */
  position      : relative;
  width         : 100%;
  height        : auto;
}

.slide_box {
  position      : relative;
  width         : 100%;
  max-width     : 100%;
  margin        : 0 auto;
}

.slider-container .slide_box {
  position  : relative;
  width     : 100%;
  max-width : 100%;
  margin    : 0 auto;
}

.slide_box .slide_wrap {}

.slide_box .slide_wrap .slick-list {
  padding : 0;
 /*  overflow      : hidden; */
}

.slide_box .slide_wrap .slick-list .slick-track {
  padding : 0;
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ Slider ＞ arrows
-========--========--========--========--========--========--========--========--========--========-*/

.slick-arrow { position      : relative; }

.slick-prev,
.slick-next {
  /* layout */
  position      : absolute;
  display       : inline-block;
  z-index       : calc(var(--stack-head) - 2);
  /* style */
  background    : var(--color-background-default);

  border-radius : var(--rounded-full);
  border        : 1px solid var(--border-main);
  box-shadow    : var(--elevation-01);
  /* transition */
  transition    : background-color 0.3s ease-in-out;
}


.slick-prev {
  /* layout */
  inset-inline-start: calc(50px / 2 * -1);
}

.slick-next {
  /* layout */
  inset-inline-end: calc(50px / 2 * -1);
}

.slick-prev::before,
.slick-next::before {
  /* layout */
  content   : '';
  position  : absolute;
  display   : inline-block;
  left      : 50%;
  top       : 50%;
  width     : 10px;
  height    : 10px;
  margin    : 0;

  /* style */
  background    : transparent;
  box-shadow    : none;
  border-top    : 2px solid var(--border-default);
  border-right  : 2px solid var(--border-default);
  border-bottom : none;
  border-left   : none;
}

.slick-prev::before {
  /* layout */
  transform: translate(-30%, -50%);
}

.slick-next::before {
  transform: translate(-70%, -50%);
}

.slick-prev:hover,
.slick-prev:focus-within,
.slick-next:hover,
.slick-next:focus-within {
  background-color: var(--color-background-main);
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ Slider ＞ 表示単位 
-========--========--========--========--========--========--========--========--========--========-*/
.slider-container .slide {}
.slider-container .slide img {}


/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ Slider ＞ その他制御
-========--========--========--========--========--========--========--========--========--========-*/
/* controller */
.slider-container .slide-deco {
  position      : relative;
  width         : 100%;
  height        : 0;
}

.slider-container .slide-control {
  /* layout */
  position      : relative;
  display       : flex;
  align-items   : center;
  width         : 100%;
  min-height    : calc(48px + 8px);
  padding-block : var(--space-4, 4px);
}

/* pagination */
.slider-container .slider-pagination {
  position      : relative;
  display       : flex;
  align-items   : center;
  width         : 100%;
  height        : auto;
}

.slider-container .slider-pagination .dot {
  /* layout */
  display        : inline-block;
  width          : 13px;
  height         : 13px;
  background     : var(--color-background-default);
  border-radius  : var(--rounded-full);
  margin         : 0 5px;
  /* style */
  border         : 1px solid var(--color-brd-dot-dflt, #ff0000);
  outline        : 1px solid transparent;
  outline-offset : 2px;
  /* transition */
  transition     : all 0.2s ease;
  cursor         : pointer;
}

.slider-container .slider-pagination .slick-active .dot {
  background    : var(--color-brd-dot-active-dflt, #00ff00);
}

.slider-container .slider-pagination .dot:hover,
.slider-container .slider-pagination .dot:focus-within {
  outline-color : var(--color-brd-dot-on, #007777);
}

.slider-container .slick-dots {
  position         : relative;
  display          : flex;

  max-width        : var(--headerCZ-width);

  justify-content  : center;
  align-items      : center;
  
  inset-block-end  : 4px;
  flex-wrap        : wrap;
}

/*画像が1枚の時、再生ボタン切り替えボタンを非表示*/
.slider-container .slide_box.disable .buttons,
.slider-container .slide_box.disable .slick-dots {
  display: none;
}





/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ Slider ＞ arrows ＞ full-widthでの表示用
-========--========--========--========--========--========--========--========--========--========-*/
:where(:root) {
  /* 「.full-widthを使う場合」用 */
  --sldr-slickArrow-width      : 32;
  --sldr-slickArrow-height     : 32;

  --sldr-fllWdth-arrow-hrzCommonMargin : 32;

  --cZInsPrevArrow-rltvLeft            : calc(var(--sH-cZALT-from-nWL-sh-ALT) + var(--sldr-fllWdth-arrow-hrzCommonMargin));
  --cZInsNextArrow-rltvLeft            : calc(var(--sH-cZALT-from-nWL-sh-ALT) + var(--headerCZ-width) - var(--sldr-fllWdth-arrow-hrzCommonMargin) - var(--sldr-slickArrow-width));
}

.slider-container.full-width .slick-prev,
.slider-container.full-width .slick-next {
  width         : calc(var(--sldr-slickArrow-width  ,32)  * 1px);
  height        : calc(var(--sldr-slickArrow-height ,32) * 1px);
}

.slider-container.full-width .slick-prev.slick-arrow,
.slider-container.full-width .slick-next.slick-arrow {
  top       : 50%;
  background-color: var(--color-bg-prevNextGraph-dflt, #ff0000);
}
.slider-container.full-width .slick-prev.slick-arrow:hover,
.slider-container.full-width .slick-prev.slick-arrow:focus,
.slider-container.full-width .slick-next.slick-arrow:hover,
.slider-container.full-width .slick-next.slick-arrow:focus {
  background-color: var(--color-bg-prevNextGraph-on, #00ff00);
}

.slider-container.full-width .slick-prev::before {
  mask-image          : var(--sldr-bg-prevNextGraph-prev-dflt-url);
  mask-repeat         : no-repeat;
  mask-size           : contain;
  -webkit-mask-image  : var(--sldr-bg-prevNextGraph-prev-dflt-url);
  -webkit-mask-repeat : no-repeat;
  -webkit-mask-size   : contain;
  transform           : translate(-50%, -50%);
}

.slider-container.full-width .slick-next::before {
  mask-image          : var(--sldr-bg-prevNextGraph-next-dflt-url);
  mask-repeat         : no-repeat;
  mask-size           : contain;
  -webkit-mask-image  : var(--sldr-bg-prevNextGraph-next-dflt-url);
  -webkit-mask-repeat : no-repeat;
  -webkit-mask-size   : contain;
  transform           : translate(-50%, -50%);
}

.slider-container.full-width .prevNextDefault .slick-prev::before,
.slider-container.full-width .prevNextDefault .slick-next::before {
  transform           : translate(-25%, -50%);
}

.slider-container.full-width .slick-prev.slick-arrow::before,
.slider-container.full-width .slick-next.slick-arrow::before {
  background-color    : var(--color-bg-prevNextGraph-mask-dflt, #fff);
}

.slider-container.full-width .slick-prev.slick-arrow {
  left      : calc(var(--cZInsPrevArrow-rltvLeft) * 1px);
}
.slider-container.full-width .slick-next.slick-arrow {
  left      : calc(var(--cZInsNextArrow-rltvLeft) * 1px);
}

.slider-container.full-width .slick-prev:hover::before,
.slider-container.full-width .slick-prev:focus::before {

  mask-image          : var(--sldr-bg-prevNextGraph-prev-on-url);
  mask-repeat         : no-repeat;
  mask-size           : contain;
  -webkit-mask-image  : var(--sldr-bg-prevNextGraph-prev-on-url);
  -webkit-mask-repeat : no-repeat;
  -webkit-mask-size   : contain;
}

.slider-container.full-width .slick-next:hover::before,
.slider-container.full-width .slick-next:focus::before {
  mask-image          : var(--sldr-bg-prevNextGraph-next-on-url);
  mask-repeat         : no-repeat;
  mask-size           : contain;
  -webkit-mask-image  : var(--sldr-bg-prevNextGraph-next-on-url);
  -webkit-mask-repeat : no-repeat;
  -webkit-mask-size   : contain;
}

.slider-container.full-width .slick-prev.slick-arrow:hover::before,
.slider-container.full-width .slick-prev.slick-arrow:focus::before,
.slider-container.full-width .slick-next.slick-arrow:hover::before,
.slider-container.full-width .slick-next.slick-arrow:focus::before {
  background-color    : var(--color-bg-prevNextGraph-mask-on, #777);
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ Slider ＞ 表示単位 ＞ full-widthでの表示用
-========--========--========--========--========--========--========--========--========--========-*/

.slider-container.full-width .slide_box .slide {
  display   : block;
  width     : calc(var(--headerCZ-width) * 1px);
}

.slider-container.full-width .slide_box .slide img {
  width     : 100%;
  max-width : calc(var(--headerCZ-width) * 1px);
}





/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ Slider ＞ TOP ＞ Slider ＞ 右寄せ型
-========--========--========--========--========--========--========--========--========--========-*/
body.top .slider-container {
  --top-main-ctrl-LR-padding-numScl  : calc(var(--sHDsgnBsRct003-sorW) * 1px + 7.5%);
  --top-main-ctrlBtn-play-mrgn-left  : 55px;
  --top-main-ctrlBtn-play-mrgn-right : 5px;
}

body.top .slider-container {
  background: var(--color-bg-top-slider-main-dflt, #0000ff);
}

body.top .slider-container.full-width .slide-control {
  position      : relative;
  display       : flex;
  align-items   : center;
  width         : 100%;
  min-height    : calc(48px + 8px);
  padding-block : var(--space-4, 4px);
}

body.top .slider-container.full-width .slide-deco .preOverlayToSlickList {
  display               : none;
  background            : var(--color-bg-top-slider-main-dflt, #0000ff);
}

/* スライダー操作域 ＞ typeR1（右寄せ）型 */
body.top .slider-container.full-width .slide-control.typeR1 {
  padding             : 0 var(--top-main-ctrl-LR-padding-numScl);
  justify-content     : flex-end;
}
/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ 格納領域 */
body.top .slider-container.full-width .slide-control.typeR1 .slider-pagination {
  width     : calc(100% - 60px);
  min-width : 200px;
}
/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ 格納領域 */
body.top .slider-container.full-width .slide-control.typeR1 ul.slick-dots  {
  margin              : 0;
  padding             : 0;
  justify-content     : flex-end;
  max-width           : 100%;
}
/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ ラッパー */
body.top .slider-container.full-width .slide-control.typeR1 li {
  margin              : 0 3px;
}

/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ 通常ドット */
body.top .slider-container.full-width .slide-control li .dot {
  background-color    : var(--color-bg-ctrlBtn-dot-dflt, #0000ff);
  border-color        : var(--color-brd-ctrlBtn-dot-dflt, #0000ff);
  outline             : none;
}

/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ ホバー時 */
body.top .slider-container.full-width .slider-pagination .dot:hover,
body.top .slider-container.full-width .slider-pagination .dot:focus-within {
  background-color    : var(--color-bg-ctrlBtn-dot-on, #00ff00);
  outline             : 1px solid var(--color-oLn-ctrlBtn-dot-on, #00ff00);
}

/* スライダー操作域 ＞ typeR1（右寄せ）型 ＞ ドット・セレクター ＞ アクティヴ時 */
body.top .slider-container.full-width .slide-control.typeR1 li.slick-active .dot {
  background-color    : var(--color-bg-ctrlBtn-dot-active-dflt, #ff0000);
}
body.top .slider-container.full-width .slide-control.typeR1 li.slick-active .dot:hover,
body.top .slider-container.full-width .slide-control.typeR1 li.slick-active .dot:focus-within {
  background-color    : var(--color-bg-ctrlBtn-dot-active-on, #ff0000);
}

/* 再生と停止 */
body.top .slider-container.full-width .slide-control.typeR1 .buttons {
  position            : initial;
  margin              : 0;
}
body.top .slider-container .buttons button{
  width               : 30px;
  height              : 30px;
}

body.top .slider-container .buttons.imgSwitch button.js-play {
  margin-left         : var(--top-main-ctrlBtn-play-mrgn-left);
  margin-right        : var(--top-main-ctrlBtn-play-mrgn-right);
}

body.top .slider-container .buttons .button.js-play:before {
  right: 0.6rem;
}

body.top .slider-container .buttons .button.js-stop:before {
  right: 0.6rem;
}
body.top .slider-container .buttons .button.js-stop:after {
  right: 0.2rem;
}

@media (width < 576px) {
  :where(:root) {
    --top-main-ctrl-LR-padding-numScl  : calc(var(--sHDsgnBsRct003-sorW) * 1px + 5%);
    --top-main-ctrlBtn-play-mrgn-left  : 15px;
    --top-main-ctrlBtn-play-mrgn-right : 15px;
  }

  body.top .slider-container.full-width .slide-control.typeR1 ul.slick-dots {
    justify-content     : center;
  }
}




/*====================================================================================
 標準 ＞ Slider ＞ その他制御 ＞ オプションデザイン（buttons） ＞ iIFMSwitch
/*==================================================================================*/
/* デフォルトのボタンイメージを非表示にする */
.slider-container .buttons.iIFMSwitch .button.js-play:before,
.slider-container .buttons.iIFMSwitch .button.js-stop:before,
.slider-container .buttons.iIFMSwitch .button.js-stop:after {
  display          :  none !important;
}

.slider-container .buttons.iIFMSwitch .button.js-stop,
.slider-container .buttons.iIFMSwitch .button.js-play {
  opacity    : 1;
  background : var(--color-bg-ctrlBtn-dflt, #ffffff);
  border     : 1px solid var(--color-brd-ctrlBtn-dflt, #0000ff);
}
.slider-container .buttons.iIFMSwitch .button.js-stop:hover,
.slider-container .buttons.iIFMSwitch .button.js-stop:focus,
.slider-container .buttons.iIFMSwitch .button.js-stop:focus-within,
.slider-container .buttons.iIFMSwitch .button.js-play:hover,
.slider-container .buttons.iIFMSwitch .button.js-play:focus,
.slider-container .buttons.iIFMSwitch .button.js-play:focus-within {
  background : var(--color-bg-ctrlBtn-on, #000000);
  border : 1px solid var(--color-brd-ctrlBtn-on, #00ff00);
}

.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'] {
  background : var(--color-bg-ctrlBtn-pressed-dflt, #6f6f6f);
  border : 1px solid var(--color-brd-ctrlBtn-pressed-dflt, #afafaf);
}
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true']:hover,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true']:focus,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true']:focus-within {
  background : var(--color-bg-ctrlBtn-pressed-on, #afafaf);
  border : 1px solid var(--color-brd-ctrlBtn-pressed-on, #afafaf);
}

.slider-container .buttons.iIFMSwitch div {
  display : block;
}

/* 背景色の変更に備えて、imgはsrc属性での指定ではなく、変更できるCSSでの指定とする */
.slider-container .buttons.iIFMSwitch .js-stop div{
  width               : var(--ctrlBtn-stop-innerGraph-width-numScl, 100%);
  height              : auto;
  aspect-ratio        : 1;
  margin-left         : var(--ctrlBtn-stop-innerGraph-mrgn-left-numScl, 0);
  background-color    : #777; /* 初期カラー */
  /*
  mask-image          : var(--ctrlBtn-stop-innerGraph-dflt-url);
  */
  mask-repeat         : no-repeat;
  mask-size           : contain;
  /*
  -webkit-mask-image  : var(--ctrlBtn-stop-innerGraph-dflt-url);
  */
  -webkit-mask-repeat : no-repeat;
  -webkit-mask-size   : contain;
}

.slider-container .buttons.iIFMSwitch .js-play div{
  width               : var(--ctrlBtn-playStart-innerGraph-width-numScl, 100%);
  height              : auto;
  aspect-ratio        : 1;
  margin-left         : var(--ctrlBtn-playStart-innerGraph-mrgn-left-numScl, 0);
  background-color    : #777; /* 初期カラー */
  /*
  mask-image          : var(--ctrlBtn-playStart-innerGraph-dflt-url);
  */
  mask-repeat         : no-repeat;
  mask-size           : contain;
  /*
  -webkit-mask-image  : var(--ctrlBtn-playStart-innerGraph-dflt-url);
  */
  -webkit-mask-repeat : no-repeat;
  -webkit-mask-size   : contain;
}

/* ▼ボタンが押されて有効の場合（カーソル・非オン状態）▼ */
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-stop div {
  mask-image          : var(--ctrlBtn-stop-innerGraph-on-url);
  -webkit-mask-image  : var(--ctrlBtn-stop-innerGraph-on-url);
}
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-play div {
  mask-image          : var(--ctrlBtn-playStart-innerGraph-on-url);
  -webkit-mask-image  : var(--ctrlBtn-playStart-innerGraph-on-url);
}

.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-play div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-stop div {
  background          : var(--color-bg-ctrlBtn-innerGraph-pressed-dflt, #ff0000););
}

.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-stop:hover div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-stop:focus div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-stop:focus-within div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-play:hover div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-play:focus div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='true'].js-play:focus-within div {
  background          : var(--color-bg-ctrlBtn-innerGraph-pressed-on, #ff7700);
}
/* ▲ボタンが押されて有効の場合（カーソル・非オン状態）▲ */

/* ▼ボタンが押されていない場合（カーソル・非オン状態）▼ */
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-stop div {
  mask-image          : var(--ctrlBtn-stop-innerGraph-dflt-url);
  -webkit-mask-image  : var(--ctrlBtn-stop-innerGraph-dflt-url);
}
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-play div {
  mask-image          : var(--ctrlBtn-playStart-innerGraph-dflt-url);
  -webkit-mask-image  : var(--ctrlBtn-playStart-innerGraph-dflt-url);
}
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-stop div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-play div {
  background          : var(--color-bg-ctrlBtn-innerGraph-dflt, #0000ff);
}
/* ▲ボタンが押されていない場合（カーソル・非オン状態）▲ */

/* ▼ボタンが押されていない場合（カーソル・オン状態）▼ */
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-stop:hover div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-stop:focus div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-stop:focus-within div {
  mask-image          : var(--ctrlBtn-stop-innerGraph-on-url);
  -webkit-mask-image  : var(--ctrlBtn-stop-innerGraph-on-url);
}
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-play:hover div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-play:focus div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-play:focus-within div {
  mask-image          : var(--ctrlBtn-playStart-innerGraph-on-url);
  -webkit-mask-image  : var(--ctrlBtn-playStart-innerGraph-on-url);
}
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-stop:hover div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-stop:focus div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-stop:focus-within div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-play:hover div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-play:focus div,
.slider-container .buttons.iIFMSwitch .button[aria-pressed='false'].js-play:focus-within div {
  background          : var(--color-bg-ctrlBtn-innerGraph-on, #00ffff);
}
/* ▲ボタンが押されていない場合（カーソル・オン状態）▲ */





/*-========--========--========--========--========--========--========--========--========--========-
 開発用 ＞ 着色用
-========--========--========--========--========--========--========--========--========--========-*/
/* 着色用*/
#main.developMode .wrap, 
#main.developMode .contents .wrap {
  box-shadow: inset red 0px 0px 0px 2px;
}

#main.developMode article section {
  box-shadow: inset purple 0px 0px 0px 2px;
}

#main.developMode nav, 
#main.developMode .nav {
  box-shadow: inset green 0px 0px 0px 2px;
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ headLevels(共通)
-========--========--========--========--========--========--========--========--========--========-*/
:where(h1, h2, h3, h4, h5, h6) {
  margin-block: unset;
  font-size: unset;
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 詳細ページ＆一覧ページ ＞ H1対応コンテンツ型レイアウト ＞ 変数
-========--========--========--========--========--========--========--========--========--========-*/
:where(:root) {
  --mznNvHldr-nvUp-min-width-num     : var(--hrzTeoLimter02-width-num, 1160);
  --mznNvHldr-nvUp-min-width-scl     : 1px;
  /* ナビメニューが表示される最小の幅(これ以上に狭い場合は、左右では表示されない) */
  --mznNvHldr-nvUp-min-width-numScl  : calc(var(--mznNvHldr-nvUp-min-width-num) * var(--mznNvHldr-nvUp-min-width-scl));

  --mznNvHldr-iLn-pddng-num           : 16;
  --mznNvHldr-iLn-pddng-scl           : 1px;
  --mznNvHldr-iLn-pddng-numScl        : calc(var(--mznNvHldr-iLn-pddng-num) * var(--mznNvHldr-iLn-pddng-scl));

  --mainZone-max-width-dflt-numScl    : calc((var(--mznNvHldr-nvUp-min-width-numScl) - var(--mznNvHldr-iLn-pddng-numScl) * 2));

  --navLRMenu-width-num               : 300;
  --navLRMenu-width-scl               : 1px;
  --navLRMenu-width-numScl            : calc(var(--navLRMenu-width-num) * var(--navLRMenu-width-scl));

  /*
  --mainZone-max-width-whnNvUp-numScl : calc(var(--mainZone-max-width-dflt-numScl) - var(--navLRMenu-width-numScl));
  */
  --mainZone-max-width-whnNvUp-numScl : var(--mznNvHldr-nvUp-min-width-num);
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 詳細ページ＆一覧ページ ＞ H1対応コンテンツ型レイアウト ＞ その他
-========--========--========--========--========--========--========--========--========--========-*/
/* 従来のデザインを使いたい場合はbodyにクラス「prePadding」を付与 */
.prePadding dl,
.prePadding ul,
.prePadding div,
.prePadding nav,
.prePadding section {
  /* 左右に5pxのpadding */
  padding  : 0 0 5px;
  overflow : auto;
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ サブトップ
-========--========--========--========--========--========--========--========--========--========-*/
.subtop .list { display: flex; flex-wrap: wrap;}
.subtop .category  { width: 48%;}
.subtop .category.left { margin-right: 2%;}
.subtop .category.right { margin-left: 2%;}
.subtop .section { margin-bottom: 1em; background-color: #eee;}
.subtop .section ul { display: none;}
.subtop .section li.more { margin-top: 1em;}

.subtop .listopen.active .text_open,
.subtop .listopen .text_close { display: none;}
.subtop .listopen .text_open,
.subtop .listopen.active .text_close { display: block;}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞  txtbox(共通)
-========--========--========--========--========--========--========--========--========--========-*/
.txtbox {
  max-width: var(--container-size-lg);
  margin-inline: auto;
  margin-block-end: var(--txtbox--margin-block-end);
}
/* @media (width < 576px) {} */

.txtbox table + h2, .txtbox p + h2, .txtbox ul + h2 ,.txtbox ol + h2,
.txtbox table + h3, .txtbox p + h3, .txtbox ul + h3,
.txtbox ol + h3, .txtbox table + h4, .txtbox p + h4,
.txtbox ul + h4, .txtbox ol + h4,
.txtbox table + h5, .txtbox p + h5, .txtbox ul + h5 .txtbox ol + h5 {
  margin-top: 1.8rem;
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ txtbox(共通) ＞ .txtbox内部
-========--========--========--========--========--========--========--========--========--========-*/
/* 見出し */
.txtbox h2 {}
.txtbox h3 {}
.txtbox h4 {}
.txtbox h5 {}
.txtbox h6 {}

/* table */
.txtbox table th,
.txtbox table td { border: 1px solid #8888bb;} /* テーブル線の色 */
.txtbox table th { background: #eeeeff;} /* THの色 */

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 詳細ページ＆一覧ページ ＞ CMS用テンプレート ＞ このページに関するアンケート
-========--========--========--========--========--========--========--========--========--========-*/
section.formSection {}

section.formSection form.pure-form {
  color: var(--color-txt-formSection-dflt, #ff0000);
}

section.formSection form.pure-form fieldset {}

section.formSection form.pure-form fieldset label {
  color: var(--color-txt-formSection-dflt, #ff0000);
}

section.formSection form.pure-form legend {
  display: block;
  width: 100%;
  padding: .3em 0;
  margin-bottom: .3em;
  color: var(--color-txt-formSection-dflt, #ff0000);
  border-bottom: 1px solid #e5e5e5;
}

section.formSection form.pure-form input[type="submit"] {
  background-color: var(--color-bg-form-button-dflt, #ff0000);
  border: var(--border-width-form-button-dflt, 1px) solid var(--color-brd-form-button-dflt, #0000ff);
  color: var(--color-txt-form-button-dflt, #ffffff);
  -webkit-appearance: none;
}

section.formSection form.pure-form input[type="submit"]:hover,
section.formSection form.pure-form input[type="submit"]:focus {
  background-color: var(--color-bg-form-button-on, #00ff00);
  border: var(--border-width-form-button-on, 1px) solid var(--color-brd-form-button-on, #00ff00);
  color: var(--color-txt-form-button-on, #ff00ff);
}


/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 詳細ページ＆一覧ページ ＞ CMS用テンプレート ＞ このページに関する問い合わせ先
-========--========--========--========--========--========--========--========--========--========-*/
section.infoSection {}

section.infoSection .infoSectionInner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-txt-infoSection-dflt, #ff0000);
}

section.infoSection .infoSectionText {}

section.infoSection .infoSectionButton {
  margin-left: 1em;
}

section.infoSection .infoSectionButton a {
  position: relative;
  display: flex;
  padding: 1.5em calc(1.5em + 11px) 1.5em calc(1.5em + 37px);
  color: var(--color-txt-lnk-dflt, #ff0000);
  text-decoration: none;
  background: var(--lnk-leftDecoBase-url-dflt) left 1em center no-repeat var(--color-bg-link-dflt, #00ff00);
}

section.infoSection .infoSectionButton a:before {
  position: absolute;
  display: block;
  content: "";
  top: 0px;
  bottom: 0px;
  right: 0.5em;
  width: 11px;
  background: var(--lnk-rightDecoBase-url-dflt) center center no-repeat;
}

@media screen and (max-width: 620px) {
  section.infoSection .infoSectionInner {
    display: block;
  }
}
@media screen and (max-width: 620px) {
  section.infoSection .infoSectionButton {
  display: flex;
        justify-content: center;
        margin: 0 auto;
    }
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 詳細ページ ＞ H1対応コンテンツ型レイアウト
-========--========--========--========--========--========--========--========--========--========-*/
body.detail .pageProperHolder {}

body.detail .contentsPerLocus {
  max-width : var(--hrzTeoLimter02-width-numScl);
  margin    : 0 auto;
}

/* メインコンテンツ */
body.detail .contentsPerHdLv1 dl,
body.detail .contentsPerHdLv1 ul,
body.detail .contentsPerHdLv1 div,
body.detail .contentsPerHdLv1 nav,
body.detail .contentsPerHdLv1 section {
  /* 下位要素の左右に5pxのpadding */
  padding  : 0 0 5px;
  overflow : auto;
}

/* メインメニュー右(右側にナビメニュー) */
body.detail.rightMainLeftMenu .contentsPerLocus {
  display        : flex;
  flex-direction : row-reverse;
}

/* メインメニュー左(右側にナビメニュー) */
body.detail.leftMainRightMenu .contentsPerLocus {
  display   : flex;
  flex-direction : row;
}

body.detail.rightMainLeftMenu .h1PeerHolder,
body.detail.leftMainRightMenu .h1PeerHolder {
  /* サイドメニューを除いた部分にメインの幅を変更させる */
  /* メニューUP表示時の、タイトル全幅版、非全幅版とも、メインコンテンツの幅は同じ */
  --mainZone-max-width-whnNvUp-numScl : calc(var(--mainZone-max-width-dflt-numScl) - var(--navLRMenu-width-numScl));
}

body.detail.titleNotFullWidth .h1PeerHolder {
  /* 広い画面では、このクラスの要素が「ナビメニュー」と左右に並ぶ */
  width               : 100%;
  /* 親要素がflexなので幅が自動的に伸びないようにする */
  max-width           : var(--mainZone-max-width-whnNvUp-numScl);
  margin-inline       : auto;
  padding-inline      : var(--mznNvHldr-iLn-pddng-numScl);
  padding-block-start : var(--space-64);
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 詳細ページ ＞ H1対応コンテンツ型レイアウト
-========--========--========--========--========--========--========--========--========--========-*/
body.detail.titleNotFullWidth .contentsPerHdLv1 {
  /* メニューUP表示時の、タイトル非全幅版は、親要素「h1PeerHolder」の100％  */
  width : 100%;
  margin: 0 auto;
}

body.detail .contentsPerHdLv1 {
  width : 100%;
  margin: 0 auto;
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 詳細ページ ＞ H1対応コンテンツ型レイアウト ＞ タイトル全幅デザイン
-========--========--========--========--========--========--========--========--========--========-*/
body.detail.titleFullWidth .h1PeerHolder {
  padding-block-start : var(--space-64);
  /* 親要素がflexなので幅が自動的に伸びないようにする */
  max-width : 100%;
  width     : 100%;
}

body.detail.titleFullWidth .contentTitle {
  margin: 0 auto;
}


body.detail.titleFullWidth .underContentsPerHdLv1 {
  display : flex;
  /* 自身がflexなので幅が自動的に伸びないようにする */
  max-width : var(--hrzTeoLimter02-width-numScl);
  margin    : 0 auto;
}

body.detail.titleFullWidth .underContentsPerHdLv1 .contentsPerHdLv1 {
  /* メニューUP表示時の、タイトル全幅版は、計算された幅に制限される */
  width               : 100%;
  /* 親要素がflexなので幅が自動的に伸びないようにする */
  max-width           : var(--mainZone-max-width-whnNvUp-numScl);
  min-width           : var(--mainZone-max-width-whnNvUp-numScl);
}

body.detail.titleFullWidth .h1PeerHolder .contentsPerHdLv1 article {
  padding-inline      : var(--mznNvHldr-iLn-pddng-numScl);
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 詳細ページ ＞ H1対応コンテンツ型レイアウト ＞ サイドメニュー
-========--========--========--========--========--========--========--========--========--========-*/
body.detail .navMenuCollector {
  width: var(--navLRMenu-width-numScl);
  max-width: var(--navLRMenu-width-numScl);
  padding-right : 0.5rem;
  padding-left  : 0.5rem;
}

body.detail.titleNotFullWidth .navMenuCollector {
  /* タイトル非全幅版 */
  padding-block-start: var(--space-64);
}

body.detail.titleFullWidth .navMenuCollector {
  /* タイトル全幅版 */
  width : 100%;
}

@media screen and (width <= 1128px) {
  body.detail #TOP,
  body.detail .global_wrap,
  body.detail .locusHolder,
  body.detail .contentsPerHdLv1,
  body.detail .contentsPerHdLv1 article,
  body.detail .contentsPerHdLv1 .navMenuCollector {
    position: static;
    width: auto;
  }

  body.detail.titleNotFullWidth .contentsPerLocus,
  body.detail.titleFullWidth .underContentsPerHdLv1 {
    flex-wrap : wrap;
  }

  body.detail.titleFullWidth .underContentsPerHdLv1 .contentsPerHdLv1 {
    min-width : 100%;
  }

  /* メインコンテンツとサイドメニューcollector */
  body.detail.rightMainLeftMenu .h1PeerHolder,
  body.detail.rightMainLeftMenu .navMenuCollector,
  body.detail.leftMainRightMenu .h1PeerHolder,
  body.detail.leftMainRightMenu .navMenuCollector {
    width: 100%;
    max-width: none;
  }

  body.detail .navMenuCollector {
    padding-right : 0;
    padding-left  : 0;
    /*
     以下のように設定するとクラス「navMenuCollector」でのデザインに制約が出る。
     ＝＞クラス「navMenuCollector」のデザインに余白は任せる
     padding-right : var(--mznNvHldr-iLn-pddng-numScl);
     padding-left  : var(--mznNvHldr-iLn-pddng-numScl);
    */
  }

  body.detail.titleNotFullWidth .navMenuCollector {
    width     : 100%;
  }
  body.detail.titleFullWidth .navMenuCollector {
    /* 親要素がflexなので幅が自動的に伸びないようにする */
    max-width : 100%;
  }

}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 詳細ページ ＞ h1
-========--========--========--========--========--========--========--========--========--========-*/
h1.contentTitle {
  /*
  利用変数
  --space-8
  --space-32
  --mainZone-nav-width-min-numScl
  --heading-h1-font-weight-dflt

  --heading-h1-line-height-dflt
  --heading-h1-letter-spacing-dflt
  --heading-h1-letter-spacing-dflt

  --heading-h1-pgSbTitle-font-size-dflt
  --heading-h1-pgHLDesc-font-size-dflt
  --color-txt-h1-pgHLDesc-dflt
  */
  /*
  変更が必須な変数
  --color-bg-heading-h1-ULn-dflt 
  --color-text-heading-h1-dflt
  --heading-h1-font-size-dflt
  */
}

h1.contentTitle {
  position: relative;
  width: 100%;
  margin-block-end: var(--space-32,calc(32 * 1rem / 16));
  padding-inline: var(--space-8,calc(8 * 1rem / 16));
  color: var(--color-text-heading-h1-dflt, #ff0000);
  font-size: var(--heading-h1-font-size-dflt);
  font-weight: var(--heading-h1-font-weight-dflt, 400);
  line-height: var(--heading-h1-line-height-dflt);
  letter-spacing: var(--heading-h1-letter-spacing-dflt);
}
h1.contentTitle::after {
  content: '';
  position: absolute;
  inset-block-end: calc(-1 * var(--space-32));
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--color-bg-heading-h1-ULn-dflt, , #00ff00);
}
h1.contentTitle span.heading {
  display: block;
  width: 100%;
  max-width: var(--mainZone-nav-width-min-numScl, 1160px);
  margin: 0 auto;
}
h1.contentTitle span.pageSubTitle ,
h1.contentTitle span.pageHighLightedDesc {
  display: block;
  width: 100%;
  max-width: var(--mainZone-nav-width-min-numScl, 1160px);
  margin: 0 auto;
}
h1.contentTitle span.pageSubTitle {
  font-size  : var(--heading-h1-pgSbTitle-font-size-dflt);
  font-weight: var(--heading-h1-pgSbTitle-font-weight-dflt, 400);
}
h1.contentTitle span.pageHighLightedDesc {
  font-size  : var(--heading-h1-pgHLDesc-font-size-dflt);
  font-weight: var(--heading-h1-pgHLDesc-font-weight-dflt, 400);
  color      : var(--color-txt-h1-pgHLDesc-dflt, #ff0000);
}

.rightMainLeftMenu h1.contentTitle,
.rightMainLeftMenu h1.contentTitle::after,
.leftMainRightMenu h1.contentTitle,
.leftMainRightMenu h1.contentTitle::after {

}

/* h1直後の要素 */
h1.contentTitle + * {
  padding-block-start: var(--space-40, 40px);
}

@media (width < 576px) {
  .rightMainLeftMenu h1.contentTitle,
  .rightMainLeftMenu h1.contentTitle::after,
  .leftMainRightMenu h1.contentTitle,
  .leftMainRightMenu h1.contentTitle::after {
    width     : 100%;
  }
}

@media (width < 576px) {
  h1.contentTitle {
    margin-block-end: calc(var(--space-32, calc(32 * (1rem / 16))) * 0.8);
    font-size : calc(var(--heading-h1-font-size-dflt) * 0.8);
  }
  /* h1直後の要素 */
  h1.contentTitle + * {
    padding-block-start: var(--space-24, calc(32 * 1rem / 24));
  }
  body.detail.titleFullWidth h1.contentTitle + * {
    padding-block-start: var(--space-64, 64px);
  }
  
}




/*-========--========--========--========--========--========--========--========--========--========-
 txtbox ＞ headLevels(h2) ＞ paintedArea
-========--========--========--========--========--========--========--========--========--========-*/
.txtbox {
  --txtBox-h2-hght-dflt      : calc(var(--txtBox-h2-font-size-dflt) * var(--txtBox-h2-ratio-fntSize-decoHeight, calc(60 /32)));
  --txtBox-h2-pddng-blk-dflt : calc((var(--txtBox-h2-hght-dflt, 12px) - var(--txtBox-h2-font-size-dflt)) / 2);
}

.txtbox h2 {
  position: relative;
  width: 100%;
  margin-block-end: var(--space-16, 16px);
  min-height : var(--txtBox-h2-hght-dflt);
  padding-inline: var(--space-16, 16px);
  padding-block : var(--txtBox-h2-pddng-blk-dflt);
  background: #000000;
  border-radius: var(--rounded-8, 8px);
  color: #ffffff;
  font-size: var(--txtBox-h2-font-size-dflt);
  font-weight: var(--txtBox-h2-font-weight-dflt);
  line-height: var(--txtBox-h2-line-height-dflt);
  letter-spacing: var(--txtBox-h2-letter-spacing-dflt);
}
.txtbox h2 {
  background: var(--color-bg-txtBox-h2-dflt);
  border: 1px solid var(--color-brd-txtBox-h2-dflt);
  color: var(--color-txt-txtBox-h2-dflt);
}




/*-========--========--========--========--========--========--========--========--========--========-
 section ＞ headLevels(h2) ＞ paintedArea
-========--========--========--========--========--========--========--========--========--========-*/
.fileSection,
.linkSection,
.mapSection,
.formSection,
.infoSection {
  --detailSection-h2-hght-dflt      : calc(var(--detailSection-h2-font-size-dflt) * var(--detailSection-h2-ratio-fntSize-decoHeight, calc(60 /32)));
  --detailSection-h2-pddng-blk-dflt : calc((var(--detailSection-h2-hght-dflt, 12px) - var(--detailSection-h2-font-size-dflt)) / 2); 
}

section.fileSection h2,
section.linkSection h2,
section.mapSection h2,
section.formSection h2,
section.infoSection h2 {
  position: relative;
  width: 100%;
  margin-block-end: var(--space-16, 16px);
  min-height : var(--detailSection-h2-hght-dflt);
  padding-inline: var(--space-16, 16px);
  padding-block : var(--detailSection-h2-pddng-blk-dflt);
  background: #000000;
  border-radius: var(--rounded-8, 8px);
  color: #ffffff;
  font-size: var(--detailSection-h2-font-size-dflt);
  font-weight: var(--detailSection-h2-font-weight-dflt);
  line-height: var(--detailSection-h2-line-height-dflt);
  letter-spacing: var(--detailSection-h2-letter-spacing-dflt);
}
section.fileSection h2,
section.linkSection h2,
section.mapSection h2,
section.formSection h2,
section.infoSection h2 {
  background: var(--color-bg-detailSection-h2-dflt);
  border: 1px solid var(--color-brd-detailSection-h2-dflt);
  color: var(--color-txt-detailSection-h2-dflt);
}




/*-========--========--========--========--========--========--========--========--========--========-
 txtbox ＞ headLevels(h3) ＞ withLeftBar
-========--========--========--========--========--========--========--========--========--========-*/
.txtbox h3 {
  /*
  設定変数
  --color-bg-txtBox-h3-lftBr-dflt

  --color-txt-txtBox-h3-dflt
  --txtBox-h3-font-size-dflt
  --txtBox-h3-font-weight-dflt
  --txtBox-h3-line-height-dflt
  --txtBox-h3-letter-spacing-dflt

  --txtBox-h3-ratio-fntSize-decoHeight
  */
}
.txtbox h3 {
  --txtBox-h3-hght-dflt      : calc(var(--txtBox-h3-font-size-dflt) * var(--txtBox-h3-ratio-fntSize-decoHeight, calc(58 /30)));
  --txtBox-h3-pddng-blk-dflt : calc((var(--txtBox-h3-hght-dflt, 14px) - var(--txtBox-h3-font-size-dflt)) / 2);

  position: relative;
  margin-block-end: var(--space-16, 16px);
  min-height : var(--txtBox-h3-hght-dflt);
  padding-inline-start: calc(5px + var(--space-12, 12px));
  padding-block : var(--txtBox-h3-pddng-blk-dflt);
  border-bottom: 1px dashed var(--border-default);

  color: var(--color-txt-txtBox-h3-dflt);
  font-size: var(--txtBox-h3-font-size-dflt);
  font-weight: var(--txtBox-h3-font-weight-dflt);
  line-height: var(--txtBox-h3-line-height-dflt);
  letter-spacing: var(--txtBox-h3-letter-spacing-dflt);
}

.txtbox h3::before {
  position: absolute;
  content: '';
  display: block;
  width: 5px;
  height : 100%;
  top : 0;
  inset-inline-start: 0;
  background: #0000ff;
  display: block;

}
.txtbox h3::before {
  background: var(--color-bg-txtBox-h3-lftBr-dflt);
}





/*-========--========--========--========--========--========--========--========--========--========-
 txtbox ＞ headLevels(h4) ＞ withLeftCircle
-========--========--========--========--========--========--========--========--========--========-*/
.txtbox {
  /*
  設定変数
  --color-bg-txtBox-h4-lftCrcl-wdth-dflt

  --txtBox-h4-font-size-dflt
  --txtBox-h4-font-weight-dflt
  --txtBox-h4-line-height-dflt
  --txtBox-h4-letter-spacing-dflt

  --txtBox-h4-ratio-fntSize-decoHeight
  */
  --txtBox-h4-hght-dflt         : calc(var(--txtBox-h4-font-size-dflt) * var(--txtBox-h4-ratio-fntSize-decoHeight, calc(32 /28)));
  --txtBox-h4-pddng-blk-dflt    : calc((var(--txtBox-h4-hght-dflt, 2px) - var(--txtBox-h4-font-size-dflt)) / 2);
  --txtBox-h4-txt-nln-strt-dflt : calc(var(--txtBox-h4-hght-dflt) + var(--space-6, 6px));
}
.txtbox h4 {
  position: relative;
  min-height : var(--txtBox-h4-hght-dflt);
  margin-block-end: var(--space-4, 4px);
  min-height : var(--txtBox-h4-hght-dflt);
  padding-inline-start: var(--txtBox-h4-txt-nln-strt-dflt);
  padding-block : var(--txtBox-h4-pddng-blk-dflt);
  color: var(--color-txt-txtBox-h4-dflt);
  font-size: var(--txtBox-h4-font-size-dflt);
  font-weight: var(--txtBox-h4-font-weight-dflt);
  line-height: var(--txtBox-h4-line-height-dflt);
  letter-spacing: var(--txtBox-h4-letter-spacing-dflt);
}

.txtbox h4::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--txtBox-h4-hght-dflt) / 2); /* 親要素の50% */
  transform: translateY(-50%);

  width : var(--txtBox-h4-hght-dflt);
  height: var(--txtBox-h4-hght-dflt);
  background: none;
  border-radius: var(--rounded-full);
  box-shadow: inset 0 0 0 calc(5 / 16 * 1rem) var(--color-bg-txtBox-h4-lftCrcl-wdth-dflt);
}





/*-========--========--========--========--========--========--========--========--========--========-
 txtbox ＞ headLevels(h5) ＞ withLeftBar
-========--========--========--========--========--========--========--========--========--========-*/
.txtbox {
  /*
  設定変数
  --color-bg-txtBox-h5-lftBr-dflt

  --color-txt-txtBox-h5-dflt  
  --txtBox-h5-font-size-dflt
  --txtBox-h5-font-weight-dflt
  --txtBox-h5-line-height-dflt
  --txtBox-h5-letter-spacing-dflt

  --txtBox-h5-ratio-fntSize-decoHeight
  */
  --txtBox-h5-hght-dflt         : calc(var(--txtBox-h5-font-size-dflt) * var(--txtBox-h5-ratio-fntSize-decoHeight, calc(32 /28)));
  --txtBox-h5-pddng-blk-dflt    : calc((var(--txtBox-h5-hght-dflt, 2px) - var(--txtBox-h5-font-size-dflt)) / 2);
  --txtBox-h5-deco-left         : calc(var(--txtBox-h5-hght-dflt) * 0.45);
  --txtBox-h5-txt-nln-strt-dflt : calc(var(--txtBox-h5-deco-left) + var(--space-16, 16px));
}
.txtbox h5 {
  position: relative;
  margin-block-end: var(--space-16, 16px);
  min-height : var(--txtBox-h5-hght-dflt);
  padding-inline-start : var(--txtBox-h5-txt-nln-strt-dflt);
  padding-block : var(--txtBox-h5-pddng-blk-dflt);
  border-bottom: 1px dashed var(--border-default);

  color: var(--color-txt-txtBox-h5-dflt);
  font-size: var(--txtBox-h5-font-size-dflt);
  font-weight: var(--txtBox-h5-font-weight-dflt);
  line-height: var(--txtBox-h5-line-height-dflt);
  letter-spacing: var(--txtBox-h5-letter-spacing-dflt);
}

.txtbox h5::before {
  position: absolute;
  top : 0;
  inset-inline-start: var(--txtBox-h5-deco-left);
  width: 5px;
  height: 100%;
  background: #0000ff;
  display: block;
  content: '';
}
.txtbox h5::before {
  background: var(--color-bg-txtBox-h5-lftBr-dflt);
}




/*-========--========--========--========--========--========--========--========--========--========-
 txtbox ＞ headLevels(h6) ＞ withLeftBar
-========--========--========--========--========--========--========--========--========--========-*/
.txtbox {
  /*
  設定変数
  --color-bg-txtBox-h6-lftBr-dflt

  --color-txt-txtBox-h6-dflt
  --txtBox-h6-font-size-dflt
  --txtBox-h6-font-weight-dflt
  --txtBox-h6-line-height-dflt
  --txtBox-h6-letter-spacing-dflt

  --txtBox-h6-ratio-fntSize-decoHeight
  */

  --txtBox-h6-hght-dflt         : calc(var(--txtBox-h6-font-size-dflt) * var(--txtBox-h6-ratio-fntSize-decoHeight, calc(26 /24)));
  --txtBox-h6-pddng-blk-dflt    : calc((var(--txtBox-h6-hght-dflt, 1px) - var(--txtBox-h6-font-size-dflt)) / 2);
  --txtBox-h6-deco-left         : calc(var(--txtBox-h6-hght-dflt) * 0.6);
  --txtBox-h6-txt-nln-strt-dflt : calc(var(--txtBox-h6-deco-left) + var(--space-16, 16px));
}
.txtbox h6 {
  position: relative;
  margin-block-end: var(--space-16, 16px);
  min-height : var(--txtBox-h6-hght-dflt);
  padding-inline-start : var(--txtBox-h6-txt-nln-strt-dflt);
  padding-block : var(--txtBox-h6-pddng-blk-dflt);
  border-bottom: 1px dashed var(--border-default);

  color: var(--color-txt-txtBox-h6-dflt);
  font-size: var(--txtBox-h6-font-size-dflt);
  font-weight: var(--txtBox-h6-font-weight-dflt);
  line-height: var(--txtBox-h6-line-height-dflt);
  letter-spacing: var(--txtBox-h6-letter-spacing-dflt);
}

.txtbox h6::before {
  position: absolute;
  top : 0;
  inset-inline-start: var(--txtBox-h6-deco-left);
  width: 5px;
  height: 100%;
  background: #0000ff;
  display: block;
  content: '';
}
.txtbox h6::before {
  background: var(--color-bg-txtBox-h6-lftBr-dflt);
}




/*-========--========--========--========--========--========--========--========--========--========-
 txtbox ＞ 番号なしリスト ＞ withLeftCircle
-========--========--========--========--========--========--========--========--========--========-*/
.txtbox ul {
  /*
  設定変数
  --color-bg-txtBox-li-lftCrcl-wdth-dflt
  */
}

.txtbox ul > li:before {
  content: "";
  position: absolute;
  display: block;
  top: .45em;
  left: .8em;
  width: .7em;
  height: .7em;
  background: var(--color-bg-txtBox-li-lftCrcl-wdth-dflt);
  border-radius: 50%;
}




/*-========--========--========--========--========--========--========--========--========--========-
 txtbox ＞ 表全体 ＞ plain
-========--========--========--========--========--========--========--========--========--========-*/
.txtbox table {
  /*
  設定変数
  --color-bg-txtBox-table-th-dflt
  --color-brd-txtBox-table-tbody-dflt
  --color-brd-txtBox-table-cells-dflt
  */
}

.txtbox tbody {
  border-color : solid 2px var(--color-brd-txtBox-table-tbody-dflt, #0000ff);
}

.txtbox table th,
.txtbox table td {
  border       : solid 1px var(--color-brd-txtBox-table-cells-dflt, #00ff00);
}

.txtbox table th {
  background-color: var(--color-bg-txtBox-table-th-dflt, #ff0000);
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 一覧ページ ＞ H1対応コンテンツ型レイアウト
-========--========--========--========--========--========--========--========--========--========-*/
body.menu .pageProperHolder {}

body.menu.titleNotFullWidth .contentsPerLocus {
  max-width : var(--hrzTeoLimter02-width-numScl);
  margin    : 0 auto;
}

/* メインコンテンツ */
body.menu .contentsPerHdLv1 dl,
body.menu .contentsPerHdLv1 ul,
body.menu .contentsPerHdLv1 div,
body.menu .contentsPerHdLv1 nav,
body.menu .contentsPerHdLv1 section {
  /* 下位要素の左右に5pxのpadding */
  padding  : 0 0 5px;
  overflow : auto;
}

/* メインメニュー右(右側にナビメニュー) */
body.menu.rightMainLeftMenu .contentsPerLocus {
  display        : flex;
  flex-direction : row-reverse;
}

/* メインメニュー左(右側にナビメニュー) */
body.menu.leftMainRightMenu .contentsPerLocus {
  display   : flex;
  flex-direction : row;
}

body.menu.rightMainLeftMenu .h1PeerHolder,
body.menu.leftMainRightMenu .h1PeerHolder {
  /* サイドメニューを除いた部分にメインの幅を変更させる */
  /* メニューUP表示時の、タイトル全幅版、非全幅版とも、メインコンテンツの幅は同じ */
  --mainZone-max-width-whnNvUp-numScl : calc(var(--mainZone-max-width-dflt-numScl) - var(--navLRMenu-width-numScl));
}

body.menu.titleNotFullWidth .h1PeerHolder {
  /* 広い画面では、このクラスの要素が「ナビメニュー」と左右に並ぶ */
  width               : 100%;
  /* 親要素がflexなので幅が自動的に伸びないようにする */
  max-width           : var(--mainZone-max-width-whnNvUp-numScl);
  margin-inline       : auto;
  padding-inline      : var(--mznNvHldr-iLn-pddng-numScl);
  padding-block-start : var(--space-64);
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 一覧ページ ＞ H1対応コンテンツ型レイアウト
-========--========--========--========--========--========--========--========--========--========-*/
body.menu.titleNotFullWidth .contentsPerHdLv1 {
  /* メニューUP表示時の、タイトル非全幅版は、親要素「h1PeerHolder」の100％  */
  width : 100%;
  margin: 0 auto;
}

body.menu .contentsPerHdLv1 {
  width : 100%;
  margin: 0 auto;
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 一覧ページ ＞ H1対応コンテンツ型レイアウト ＞ タイトル全幅デザイン
-========--========--========--========--========--========--========--========--========--========-*/
body.menu.titleFullWidth .h1PeerHolder {
  padding-block-start : var(--space-64);
  /* 親要素がflexなので幅が自動的に伸びないようにする */
  max-width : 100%;
  width     : 100%;
}

body.menu.titleFullWidth .menuPageTitle {
  margin: 0 auto;
}

body.menu.titleFullWidth .underContentsPerHdLv1 {
  display : flex;
  /* 自身がflexなので幅が自動的に伸びないようにする */
  max-width : var(--hrzTeoLimter02-width-numScl);

  margin    : 0 auto;
}

body.menu.titleFullWidth .underContentsPerHdLv1 .contentsPerHdLv1 {
  /* メニューUP表示時の、タイトル全幅版は、計算された幅に制限される */
  width               : 100%;
  /* 親要素がflexなので幅が自動的に伸びないようにする */
  max-width           : var(--mainZone-max-width-whnNvUp-numScl);
  min-width           : var(--mainZone-max-width-whnNvUp-numScl);
}

body.menu.titleFullWidth .h1PeerHolder .contentsPerHdLv1 article,
body.menu.titleFullWidth .h1PeerHolder .contentsPerHdLv1 .menuHolderAsMenuPageCore {
  padding-inline      : var(--mznNvHldr-iLn-pddng-numScl);
}

/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 一覧ページ ＞ H1対応コンテンツ型レイアウト ＞ サイドメニュー
-========--========--========--========--========--========--========--========--========--========-*/
body.menu .navMenuCollector {
  width: var(--navLRMenu-width-numScl);
  max-width: var(--navLRMenu-width-numScl);
  padding-right : 0.5rem;
  padding-left  : 0.5rem;
}

body.menu.titleNotFullWidth .navMenuCollector {
  /* タイトル非全幅版 */
  padding-block-start: var(--space-64);
}

body.menu.titleFullWidth .navMenuCollector {
  /* タイトル全幅版 */
  width : 100%;
}

@media screen and (width <= 1128px) {
  body.menu #TOP,
  body.menu .global_wrap,
  body.menu .locusHolder,
  body.menu .contentsPerHdLv1,
  body.menu .contentsPerHdLv1 article,
  body.menu .contentsPerHdLv1 .menuHolderAsMenuPageCore,
  body.menu .contentsPerHdLv1 .navMenuCollector {
    position: static;
    width: auto;
  }

  body.menu.titleNotFullWidth .contentsPerLocus,
  body.menu.titleFullWidth .underContentsPerHdLv1 {
    flex-wrap : wrap;
  }

  body.menu.titleFullWidth .underContentsPerHdLv1 .contentsPerHdLv1 {
    min-width : 100%;
  }

  /* メインコンテンツとサイドメニューcollector */
  body.menu.rightMainLeftMenu .h1PeerHolder,
  body.menu.rightMainLeftMenu .navMenuCollector,
  body.menu.leftMainRightMenu .h1PeerHolder,
  body.menu.leftMainRightMenu .navMenuCollector {
    width: 100%;
    max-width: none;
  }

  body.menu .navMenuCollector {
    padding-right : 0;
    padding-left  : 0;
    /*
     以下のように設定するとクラス「navMenuCollector」でのデザインに制約が出る。
     ＝＞クラス「navMenuCollector」のデザインに余白は任せる
     padding-right : var(--mznNvHldr-iLn-pddng-numScl);
     padding-left  : var(--mznNvHldr-iLn-pddng-numScl);
    */
  }

  body.menu.titleNotFullWidth .navMenuCollector {
    width     : 100%;
  }
  body.menu.titleFullWidth .navMenuCollector {
    /* 親要素がflexなので幅が自動的に伸びないようにする */
    max-width : 100%;
  }

}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 一覧ページ ＞ h1
-========--========--========--========--========--========--========--========--========--========-*/
h1.menuPageTitle {
  /*
  利用変数
  --space-8
  --space-32
  --mainZone-nav-width-min-numScl
  --heading-h1-font-weight-dflt

  --heading-h1-line-height-dflt
  --heading-h1-letter-spacing-dflt
  --heading-h1-letter-spacing-dflt

  --heading-h1-pgSbTitle-font-size-dflt
  --heading-h1-pgHLDesc-font-size-dflt
  --color-txt-h1-pgHLDesc-dflt
  */
  /*
  変更が必須な変数
  --color-bg-heading-h1-ULn-dflt 
  --color-text-heading-h1-dflt
  --heading-h1-font-size-dflt
  */
}

h1.menuPageTitle {
  position: relative;
  width: 100%;
  margin-block-end: var(--space-32,calc(32 * 1rem / 16));
  padding-inline: var(--space-8,calc(8 * 1rem / 16));
  color: var(--color-text-heading-h1-dflt, #ff0000);
  font-size: var(--heading-h1-font-size-dflt);
  font-weight: var(--heading-h1-font-weight-dflt, 400);
  line-height: var(--heading-h1-line-height-dflt);
  letter-spacing: var(--heading-h1-letter-spacing-dflt);
}
h1.menuPageTitle::after {
  content: '';
  position: absolute;
  inset-block-end: calc(-1 * var(--space-32));
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--color-bg-heading-h1-ULn-dflt, , #00ff00);
}
h1.menuPageTitle span.heading {
  display: block;
  width: 100%;
  max-width: var(--mainZone-nav-width-min-numScl, 1160px);
  margin: 0 auto;
}
h1.menuPageTitle span.pageSubTitle ,
h1.menuPageTitle span.pageHighLightedDesc {
  display: block;
  width: 100%;
  max-width: var(--mainZone-nav-width-min-numScl, 1160px);
  margin: 0 auto;
}
h1.menuPageTitle span.pageSubTitle {
  font-size  : var(--heading-h1-pgSbTitle-font-size-dflt);
  font-weight: var(--heading-h1-pgSbTitle-font-weight-dflt, 400);
}
h1.menuPageTitle span.pageHighLightedDesc {
  font-size  : var(--heading-h1-pgHLDesc-font-size-dflt);
  font-weight: var(--heading-h1-pgHLDesc-font-weight-dflt, 400);
  color      : var(--color-txt-h1-pgHLDesc-dflt, #ff0000);
}

.rightMainLeftMenu h1.menuPageTitle,
.rightMainLeftMenu h1.menuPageTitle::after,
.leftMainRightMenu h1.menuPageTitle,
.leftMainRightMenu h1.menuPageTitle::after {

}

/* h1直後の要素 */
h1.menuPageTitle + * {
  padding-block-start: var(--space-40, 40px);
}

body.menu.titleFullWidth h1.menuPageTitle + * {
  padding-block-start: var(--space-64, 64px);
}

@media (width < 576px) {
  .rightMainLeftMenu h1.menuPageTitle,
  .rightMainLeftMenu h1.menuPageTitle::after,
  .leftMainRightMenu h1.menuPageTitle,
  .leftMainRightMenu h1.menuPageTitle::after {
    width     : 100%;
  }
}

@media (width < 576px) {
  h1.menuPageTitle {
    margin-block-end: calc(var(--space-32, calc(32 * (1rem / 16))) * 0.8);
    font-size : calc(var(--heading-h1-font-size-dflt) * 0.8);
  }
  /* h1直後の要素 */
  h1.menuPageTitle + * {
    padding-block-start: var(--space-24, calc(32 * 1rem / 24));
  }
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 一覧ページ ＞ h1 ＞ ベルト型（サブタイトルとハイライト非表示）
-========--========--========--========--========--========--========--========--========--========-*/
body.menu.titleFullWidth .contentsPerLocus.forTitleFullWidth .h1PeerHolder {
  padding-block-start: unset;
}

body.menu.titleFullWidth .menuPageTitle.belt {
  /*
  利用変数
  --color-bg-belt-dflt 
  --color-txt-belt-dflt 
  */
}
body.menu.titleFullWidth .menuPageTitle.belt {
  background : var(--color-bg-belt-dflt, #000000);
  color      : var(--color-txt-belt-dflt,#ffffff);
}
body.menu.titleFullWidth .menuPageTitle.belt .pageSubTitle,
body.menu.titleFullWidth .menuPageTitle.belt .pageHighLightedDesc {
  display : none;
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 一覧ページ ＞ 基本メニュー
-========--========--========--========--========--========--========--========--========--========-*/
.menuHolderAsMenuPageCore .navItemCollector {
  --whn2col-mrgn-center-num     : 20;
  --whn2col-mrgn-center-hlf-num : calc(var(--whn2col-mrgn-center-num) / 2);
  --whn2col-calc-mrgn-1-numScl  : calc(var(--whn2col-mrgn-center-hlf-num) * 1px);
}

/* ul */
.menuHolderAsMenuPageCore .navItemCollector {
  max-width : 100%;
  width: 100%;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 左寄せを基本にする */
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: stretch; /* 横の要素の高さに合わせる */
}

/* li */
.menuHolderAsMenuPageCore .navItemCollector .navItem {
  flex: 1 1 calc(50% - var(--whn2col-calc-mrgn-1-numScl)); /* 2列 (間にマージン分差し引く) */
  margin-bottom: 10px;
}
.menuHolderAsMenuPageCore .navItemCollector .navItem:nth-child(odd) {
  margin-right: var(--whn2col-calc-mrgn-1-numScl); /* 左側要素 → 中央に隙間 */
}

.menuHolderAsMenuPageCore .navItemCollector .navItem:nth-child(even) {
  margin-left: var(--whn2col-calc-mrgn-1-numScl);  /* 右側要素 → 中央に隙間 */
}

/* ★ 最後の1個が odd のときだけ左寄せで50%幅固定 */
.menuHolderAsMenuPageCore .navItemCollector .navItem:last-child:nth-child(odd) {
  flex: 0 1 calc(50% - var(--whn2col-calc-mrgn-1-numScl)); /* grow を無効化して幅固定 */
  margin-right: auto;         /* 左に寄せる */
}

.menuHolderAsMenuPageCore .navItemCollector.singleCol .navItem,
.menuHolderAsMenuPageCore .navItemCollector.singleCol .navItem:last-child:nth-child(odd) {
  flex: 1 1 calc(100%);
  margin: 0 0 var(--whn2col-calc-mrgn-1-numScl) 0;
}

.menuHolderAsMenuPageCore .navItemCollector .navItem a {
  display : flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
  height : 100%; /* 横の要素の高さに合わせる */
}

.menuHolderAsMenuPageCore .navItemCollector .navItem a .leftBlock,
.menuHolderAsMenuPageCore .navItemCollector .navItem a .rightBlock {
  /* centerBlockは文字を上下中央に寄せるので、height:100%は適用しない */
  height : 100% 
}

.menuHolderAsMenuPageCore .navItemCollector .navItem a .leftBlock {
  display : block;
  min-width : 10%;
  max-width : 10%;
}
.menuHolderAsMenuPageCore .navItemCollector .navItem a .centerBlock {
  display : block;
  min-width : 80%;
  max-width : 80%;
  padding-block: 1em;
  padding-right: 0.5em;
  overflow-x : hidden;
}
.menuHolderAsMenuPageCore .navItemCollector .navItem a .rightBlock {
  display : block;
  min-width : 10%;
  max-width : 10%;
}




/*-========--========--========--========--========--========--========--========--========--========-
 標準 ＞ 一覧ページ ＞ 左バー＆右矢印
-========--========--========--========--========--========--========--========--========--========-*/
.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks {}

.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem {
  border     : 1px solid var(--color-brd-itemOutLine-dflt, #ff0000);
  border-radius: var(--brd-itemOutLine-radius-dflt, none);
  background : var(--color-bg-itemOutLine-dflt , #0000ff);

}

.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem:hover,
.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem:focus-within {
  border     : 1px solid var(--color-brd-itemOutLine-on, #0000ff);
  border-radius: var(--brd-itemOutLine-radius-on, none);
  background : var(--color-bg-itemOutLine-on , #00ff00);
}

.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem a .leftBlock {
  display : block;
  position : relative;
  min-width : 1.5em;
  max-width : 1.5em;
}
.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem a .leftBlock:before {
  position : absolute;
  content: "";
  background : var(--color-bg-leftBar-dflt , #ff0000);
  width  : var(--bg-leftBar-width-numScl, 0.25em);
  height : calc(100% - var(--bg-leftBar-blk-cut-numScl, 0.75em) * 2);
  top  : var(--bg-leftBar-blk-cut-numScl, 0.75em);
  left : 0.75em;
}

.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem a .centerBlock,
.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem a:visited .centerBlock {
  display : block;
  min-width : calc(100% - 1.5em - 2em);
  max-width : calc(100% - 1.5em - 2em);
  padding-block: 1.25em;
  color      : var(--color-txt-itemCenter-dflt, #00ff00);
}

.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem:hover a .centerBlock,
.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem:focus a .centerBlock,
.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem:focus-within a .centerBlock {
  color      : var(--color-txt-itemCenter-on, #ff0000);
}


.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem.whenTempPut a .rightBlock {
  background : var(--color-bg-rightAllowBase-dflt , #ff0000);
}

.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem a .rightBlock {
  display : flex;
  min-width : 2em;
  max-width : 2em;
  align-items: center;
}
.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks .navItem a .rightBlock .imgAgent {
  border: 0;        /* 古いブラウザ用 */
  outline: none;    /* 念のため */
  display: block;
  width : 1em;
  height : 1em;
  background-image : var(--rightAllowBase-url-dflt);
  background-size: cover;      /* cover, contain, px, % など指定可能 */
  background-position: center; /* 中央に表示 */
  background-repeat: no-repeat;
}





/*-========--========--========--========--========--========--========--========--========--========-
 おしらせ ＞ タブ切替機能付き ＞ 基本
-========--========--========--========--========--========--========--========--========--========-*/
.infomation.changeByTab {}

/* コンテナ全体 */
.infomation.changeByTab {
  display: flex;
  justify-content: center;
  padding-block: 2rem;
}

.infomation.changeByTab,
.infomation.changeByTab > * {
  width : 100%;
}

/* 内包するコンテンツ */
.infomation.changeByTab .h2PeerHolder {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;

}

/* 見出し */
.infomation.changeByTab .titlePerHnPeerHolder {
  position: relative;
  display: flex;
  color: var(--color-txt-title-dflt, #00ff00);
  margin: 0 auto;
  padding-inline: 1em;
}

.infomation.changeByTab .titlePerHnPeerHolder .decoZone {
  display: flex;
  align-items : center;
  width : var(--title-icon-left-scrn-width-dlft, 3.5em);
}

.infomation.changeByTab .titlePerHnPeerHolder .graphHolder {
  width  : 100%;
  height  : 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--title-icon-url-dflt);
  background-size: 100% 100%;
}

.infomation.changeByTab .titlePerHnPeerHolder .multiLangs {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap : unset;
  font-size: var(--font-size-36, calc(16 / 36 * 1em));
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.7;
}
.infomation.changeByTab .titlePerHnPeerHolder .multiLangs .main {}
.infomation.changeByTab .titlePerHnPeerHolder .multiLangs .sub {
  display: flex;
  align-items: center;
  font-size: calc(16 / 36 * 1em);
  font-weight: var(--fontweight-medium, 400);
  line-height: 1;
  padding-left : 0.5em;
}

.infomation.changeByTab .titlePerHnPeerHolder .multiLangs:after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  width: 100%;
  height: 1px;
  background: var(--color-brd-self-under-dflt, #0000ff);
  left : 0;
}

.infomation.changeByTab .titlePerHnPeerHolder::before {
  background: url(--title-icon-url-dflt);
}

.infomation.changeByTab .titlePerHnPeerHolder::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  width: 100%;
  height: 1px;
  background: var(--color-brd-self-under-dflt, #ff0000);
  left: 0;
  top: calc(100% + 1px);
}

/* タブ部分 */
.infomation.changeByTab .tabTriggerHolder {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 1.2em; /* 吹出し分 */
}

.infomation.changeByTab .showTrigger {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
  width : fit-content;
  font-size : var(--font-size-18);
  background: var(--color-bg-tab-menu-dflt, #00ff00);
  border-color: var(--color-brd-tab-menu-dflt, #00ff00);
  color : var(--color-txt-tab-menu-dflt, #0000ff);
}

.infomation.changeByTab .showTrigger.withSBT::after {
  display: none;
}

.infomation.changeByTab .showTrigger:hover,
.infomation.changeByTab .showTrigger:focus, 
.infomation.changeByTab .showTrigger.active {
  background: var(--color-bg-tab-menu-on, #ff0000);
  border-color: var(--color-brd-tab-menu-on, #ff0000);
  color: var(--color-txt-org-name-on, #ffffff);
}

.infomation.changeByTab .showTrigger.withSBT.active::after {
  display: block;
}

/* 記事パネル */
.infomation.changeByTab .switchTargetPannel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 記事リスト */
.infomation.changeByTab .articleList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  padding: 0;
  max-width: var(--info-area-panel-max-width-numScl, 960px);
  padding-inline : 2em;
  margin: 0 auto;
}


.infomation.changeByTab .articleItem {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  border-bottom: 1px solid #ddd;
}

.infomation.changeByTab .articleItem .contentsPerAuthorOrg {
  min-width         : 80%;
}

/* 日付＋カテゴリ */
.infomation.changeByTab .articleItem .metaInfoCollector {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.infomation.changeByTab .articleItem .updateInfoHolder {

}

.top-article__category {
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  background: #eee;
}

.infomation.changeByTab .linerLinkHolder {
  padding-block : 0.25em;
  overflow-x: hidden;
}

.infomation.changeByTab .linerLink {}

.infomation.changeByTab .linerLink:hover {}

/* 一覧リンク */
.infomation.changeByTab .guideMoreInfo {
  background : var(--color-bg-btn-moreInfo-dflt, #ff0000);
  border     : 1px solid var(--color-brd-btn-moreInfo-dflt, #0000ff);
  color      : var(--color-txt-btn-moreInfo-dflt, #00ff00);
}

.infomation.changeByTab .guideMoreInfo:hover,
.infomation.changeByTab .guideMoreInfo:focus {
  background : var(--color-bg-btn-moreInfo-on, #00ff00);
  border     : 1px solid var(--color-brd-btn-moreInfo-on, #00ff00);
  color      : var(--color-txt-btn-moreInfo-on, #0000ff);
}

.infomation.changeByTab .guideMoreInfoHolder {
  display : flex;
  padding-inline : 2em;
}

.infomation.changeByTab .guideMoreInfoHolder .guideMoreInfo {
  margin-left: calc(100% - 10.5em);
}

.infomation.changeByTab.withAuthOrg .articleItem {
  min-width: 100%;
  display : flex;
  flex-direction: row;
  align-items: stretch;
}

.infomation.changeByTab.withAuthOrg .aboutAuthorOrg {
  display: flex;
  min-width: 8em;
  align-items: start; /* align-items: center; */
}

.infomation.changeByTab .articleItem .aboutAuthorOrg .orgName {
  padding       : 0.5em 0.75em;
  background    : var(--color-bg-fxdWHItem-base-dflt, #aaaa00);
}

.infomation.changeByTab.withAuthOrg .articleItem .aboutAuthorOrg .orgName {
  background : var(--color-bg-org-name-dflt, #0000ff);
  color      : var(--color-txt-org-name-dflt, #ff0000);
}

.infomation.changeByTab.withAuthOrg .contentsPerAuthorOrg {
  width: calc(100% - 8em);
}

.infomation.changeByTab.withAuthOrg .updateInfoHolder,
.infomation.changeByTab.withAuthOrg .linerLinkHolder {
  font-size : var(--font-size-18);
}

/* レスポンシブ */
@media (max-width: 973px) {
  .infomation.changeByTab .guideMoreInfoHolder {
    justify-content: center;
  }
  .infomation.changeByTab .guideMoreInfoHolder .guideMoreInfo {
    margin-left : 0;
  }
}

@media (max-width: 768px) {
  .infomation.changeByTab .titlePerHnPeerHolder .multiLangs {
    /* 「information」 と「インフォメーション」を縦積みにする */
    flex-direction: column;
    padding-bottom: 0.5em;
  }
  
  .infomation.changeByTab .tabTriggerHolder {
    justify-content: flex-start;
    padding-inline : 2em;
    gap: 1em;
  }

  .infomation.changeByTab.withAuthOrg .articleItem {
    flex-direction: column;
    padding-inline: 0;
  }

  .infomation.changeByTab.withAuthOrg .aboutAuthorOrg ,
  .infomation.changeByTab.withAuthOrg .contentsPerAuthorOrg {
    width : 100%;
  }
}
@media (max-width: 600px) {
  .infomation.changeByTab .tabTriggerHolder {
    justify-content: flex-start;
  }
  
  .infomation.changeByTab.withAuthOrg .updateInfoHolder,
  .infomation.changeByTab.withAuthOrg .linerLinkHolder {
    font-size : var(--font-size-16);
  }
}
@media (max-width: 540px) {
  .infomation.changeByTab.withAuthOrg .linerLinkHolder {
    font-size : var(--font-size-14);
  }
}
@media (max-width: 430px) {
  .infomation.changeByTab .articleItem .metaInfoCollector {
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
  }
}





/*-========--========--========--========--========--========--========--========--========--========-
 標準  ＞ ヘッダー ＞ adjustPerTemplate ＞ ハンバーガーメニュー
-========--========--========--========--========--========--========--========--========--========-*/
:where(:root) {
  /* 「apex（頂点）」＞「aLT：左上（頂点）」,「aRT：右上（頂点）」 */
  /* 「nWL」：no-width-Limit */
  /* 「cZALT」：contents-Zone-aLT
  /* 「sH」：Site-Header */

  --dmTyp-3-sHDsgnBsRct001-rsgnPrMd-W : 18;
  --dmTyp-3-sHDsgnBsRct001-rsgnPrMd-H : 12;

  --dmTyp-3-sHDsgnBsRct000-rsgnPrMd-W : 90;
  --dmTyp-3-sHDsgnBsRct000-rsgnPrMd-H : 90;

  /* バーガーの線を少しだけ調整 */
  --hbgMn-hrz3LnWdth            : calc(var(--hbgMn-hrz3LnWdth-rsgnPrDmTy) * 0.8);

  --sHDsgnBsRct000-w-rsgnPrDmTy : var(--dmTyp-3-sHDsgnBsRct000-rsgnPrMd-W);
  --sHDsgnBsRct000-h-rsgnPrDmTy : var(--dmTyp-3-sHDsgnBsRct000-rsgnPrMd-H);

  --sHDsgnBsRct001-w-rsgnPrDmTy : var(--dmTyp-3-sHDsgnBsRct001-rsgnPrMd-W);
  --sHDsgnBsRct001-h-rsgnPrDmTy : var(--dmTyp-3-sHDsgnBsRct001-rsgnPrMd-H);

  --sHDsgnBsRct-sum-w-rsgn-0-1  : calc(var(--sHDsgnBsRct000-w-rsgnPrDmTy) + var(--sHDsgnBsRct001-w-rsgnPrDmTy));

  /* drawer */
  /* 領域上部位置を最上部へ固定する */
  --iSH-drwrSrcn-aLT-top-fixed-using   : 0;
  /* 領域左端をCZ左端へ寄せる */
  --iSH-drwrSrcn-aLT-left-fixed-using         : var(--sHDsgnBsRct003-sorW);
  /* 領域左端をCZ右端へ寄せる */
  --iSH-drwrScrn-aRT-left-from-sH-cZALT-using : var(--sHDsgnBsRct002-aRT-fxdLeft);
}

.utility-nav__hbgItem {
  width : 14px;
}

.hbgMenu {
  /*
  利用変数
  --rounded-8
  --color-txt-sh-hbgMenu    : var();
  --color-bg-sh-hbgMenu     : var();
  --color-bg-sh-hbgMenu-bar : var();
  --color-brd-sh-hbgMenu    : var();
  */
  border-color        : var(--color-brd-sh-hbgMenu,#FFFFFF);
  border-radius       : var(--rounded-8, 8px);
  background-color    : var(--color-bg-sh-hbgMenu ,#E2F7F6);
  color               : var(--color-txt-sh-hbgMenu,#2A6DB2);

  box-shadow          : 0 4px 6px -4px rgba(0, 0, 0, 0.5);
}

.hbgMenu-icon::before, .hbgMenu-icon::after, .hbgMenu-icon span {
  background-color    : var(--color-bg-sh-hbgMenu-bar ,#004EA2);
}



/* --- 追加スタイル (style.css) --- */

/* ===============================
 adjustPerSite ＞ 共通スタイル
=============================== */
body {
  font-weight : var(--fontweight-regular);
}

/* ===============================
 adjustPerSite ＞ 共通スタイル ＞ そのほか ＞ フォント
=============================== */
.ennum {
  font-family : var(--font-ennum);
}

/* ===============================
 adjustPerSite ＞ タグ（a） ＞ 区分（デフォルト） 
=============================== */
a { 
  color           : var(--color-link);
}
a:visited {
  color           : var(--color-neutral-100);
}

a.stdDecoUlOnHv,
a.stdDecoUlOnHv,
ul.stdADecoUlOnHv > li a
{
  text-decoration : none;
}
ul.stdADecoUlOnHv > li a:focus,
ul.stdADecoUlOnHv > li a:hover,
a.stdDecoUlOnHv:focus,
a.stdDecoUlOnHv:hover {
  text-decoration : underline;
}

/* ===============================
 adjustPerSite ＞ タグ（a） ＞ 区分（見た目ボタン） 
=============================== */
a.btn-like {
  min-width        : 130px;
  border           : 3px solid var(--color-brd-btnLike-dflt);
}
a.btn-like:hover,
a.btn-like:focus-within{
  border-color    : var(--color-brd-btnLike-on);
}
a.btn-like:not(.noArrow):hover::after {
  border-color    :var(--color-brd-btnLike-on);
}

a.btn-like.baseWhite {
  background-color : var(--color-white);
}
a.btn-like.baseWaveGray {
  background-color : var(--color-site-proper-91-a);
}

/* ===============================
 adjustPerSite ＞ common ＞ タグ（aなど） ＞ 区分（デフォルト） 
=============================== */
.site-header .stdULnOHv:focus:after,
.site-header .stdULnOHv:focus-within:after,
.site-header .stdULnOHv:hover:after {
  background      : var(--color-border-underline-hover-02, #000);
}

/*-========--========--========--========--========--========--========--========--========--========-
 adjustPerSite ＞ ヘッダー ＞ レイアウト
-========--========--========--========--========--========--========--========--========--========-*/

.site-header {
  background: var(--color-bg-header-dflt);
  box-shadow: var(--elevation-01);
}
.site-header .header__container {
  height               : 100%;
}
.site-header .header__itemsHolder {
  height               : 100%;
}

.site-header .navZone1 {
  height               : 65px;
  padding-top          : 15px;
  padding-right        : calc(var(--sHDsgnBsRct-sum-w-rsgn-0-1) * 1px);
}
.site-header .navZone1 .headTool {
  height               : 100%;
}
.site-header .navZone1 .headTool .utility-nav__list.putFromRight {
  justify-content      : flex-end;
  height               : 100%;
}

.site-header .navZone2 {
  height               : 80px;
  margin-top           : 14px;
  padding-right        : calc(var(--sHDsgnBsRct-sum-w-rsgn-0-1) * 1px);
}
.site-header .navZone2 .itemsHolder.flBxGene.putFromRight {
  padding-right        : 1em;
}
.site-header .navZone2 .itemsHolder.flBxGene.putFromRight > * {
  margin-left          : 0.8em;
} 

.site-header .navZone3 {
  margin-top           : 5px;
  height               : 98px;
}
.site-header .navZone3 .menuLocater {
  padding              : 0 calc((100% - 180px * 5) / 2);
}
.site-header .navZone3 .primaryMenus {
  width                : 100%;
  height               : 100%;
  margin-top           : -0.75rem;
  padding-right        : 0.5rem;
}

/*-========--========--========--========--========--========--========--========--========--========-
 adjustPerSite ＞ ヘッダー ＞ ハンバーガーメニュー
-========--========--========--========--========--========--========--========--========--========-*/
/* 色付 */
.hbgMenu {
  --color-txt-sh-hbgMenu    : var(--color-txt-01-src01-b);
  --color-bg-sh-hbgMenu     : var(--color-bg-05-src02-a);
  --color-bg-sh-hbgMenu-bar : var(--color-bg-01-src01-a);
  --color-brd-sh-hbgMenu    : var(--color-white-for-bg-dflt);
}

/* ===============================
 adjustPerSite ＞ Header ＞ ロゴ
================================ */
/* 2025-07-固有調整追加(ここから) */
/* まずは全体レイアウト(media指定なし,media指定あり[PC=>SP]) => 要素内レイアウト */
:where(:root) {
  --sh-logo-left-default   : 30;
  --sh-logo-top-default    : 20;
}
/* 色付 */
.site-header a.site-header__title {
  --color-brd-sh-logo-hvr-dflt       : var(--color-dflt-bgBrdOlnBs-focused-01);
}

/*-========--========--========--========--========--========--========--========--========--========-
 adjustPerSite ＞ Header  ＞ サイト内部検索 ＞ 標準（google） ＞ 右側アイコン付（プレースホルダーなし）
-========--========--========--========--========--========--========--========--========--========-*/
.site-header form.headerSearch {
  --sh-search-icon-url-with-url-fx   : url(../img/header_search_icon.png);
}
/* 色付 */
.site-header form.headerSearch {
  --color-brd-accent-default         : var(--color-brd-focused-02-src01-c);
  --color-bg-sh-search-btn-dflt      : var(--color-bg-05-src02-a);
  --color-txt-sh-search-btn-dflt     : var(--color-txt-01-src01-b);

  --color-brd-sh-search-cmprnt-dflt  : var(--color-brd-07-src02-n);

  --color-brd-focus-default          : var(--color-brd-focused-01);

  --color-txt-sh-search-inputed-dflt : var(--color-txt-01-src01-b);
  --color-txt-sh-search-inputed-on   : var(--color-txt-focused-01-src01-c); 
}

/*-========--========--========--========--========--========--========--========--========--========-
  adjustPerSite ＞ Header ＞ アクセシビリティ ＞ その他 ＞ 背景色変更＆文字サイズ変更
-========--========--========--========--========--========--========--========--========--========-*/
/* 色付 */
.site-header .colorAndTextsizeChanger {
  --color-bg-sh-clrAndTxtszeChnger-dflt  : var(--color-bg-01-src01-a);
  --color-txt-sh-clrAndTxtszeChnger-dflt : var(--color-white-for-bg-dflt);
}

/*-========--========--========--========--========--========--========--========--========--========-
  adjustPerSite ＞ Header ＞ マイページログイン＆利用者カード
-========--========--========--========--========--========--========--========--========--========-*/
.site-header .leftIconLink.myPageLoginAndCard {
  --sh-leftIcnLnk-img-scrn-width      : 58;

  --sh-leftIcnLnk-mypg-icon-self-width : 53;
  --sh-leftIcnLnk-card-icon-self-width : 44;

  --sh-leftIcnLnk-mypg-icon-url   : url(../img/login_icon.png);
  --sh-leftIcnLnk-card-icon-url   : url(../img/card_icon.png);
}
/* 色付 */
.site-header .leftIconLink.myPageLoginAndCard {
  --color-txt-sh-leftIcnLnk-on         : var(--color-black-for-txt-on);

  --color-bg-sh-leftIcnLnk-card-dflt : var(--color-bg-05-src02-a);
  --color-bg-sh-leftIcnLnk-card-dflt : var(--color-bg-14-src03-a);
}

.site-header li.childrenShowWhenOn {
  --sh-prntMn-w-dflt : 120;
  --sh-prntMn-h-dflt : 98;
  margin             : 0 30px;
}
/* 色付 */
.site-header li.childrenShowWhenOn {
  --color-bg-sh-chldrnShwWhn-on   : var(--color-bg-focused-04-src02-k);
  --color-bg-sh-chldrnShwWhn-dflt : var(--color-white-for-bg-on);

  --color-txt-sh-chldrnShwWhn-on-dflt : var(--color-black-for-txt-dflt);

  --color-txt-sh-chldrnShwWhn-parent-dflt : var(--color-black-for-bg-on);
  --color-txt-sh-chldrnShwWhn-parent-on   : var(--color-black-for-bg-on);
}

.site-header li.childrenShowWhenOn.withTopImg a.withTopImage {
  padding-inline : 0;
  padding-block  : 0;
}
.site-header li.childrenShowWhenOn .leftIconLink.triangleMark a.withLeftIcon {
  --sh-leftIcnLnk-icon-scrn-width       : 40;
  --sh-leftIcnLnk-triMk-icon-self-width : 26;

  --sh-leftIcnLnk-triMk-icon-url-dflt   : url(../img/triangle.png);
  --sh-leftIcnLnk-triMk-icon-url-on     : url(../img/triangle_on.png);
}
/* 色付 */
.site-header li.childrenShowWhenOn .leftIconLink.triangleMark a.withLeftIcon {
  --color-brd-sh-leftIcnLnk-dflt        : var(--color-brd-03-src02-a);

  --color-bg-sh-leftIcnLnk-dflt         : var(--color-bg-05-src02-a);
  --color-bg-sh-leftIcnLnk-on           : var(--color-bg-focused-01-src01-a);

  --color-txt-sh-leftIcnLnk-dflt        : var(--color-black-for-txt-dflt);
  --color-txt-sh-leftIcnLnk-on          : var(--color-white-for-txt-on);
}

/* ===============================
 adjustPerSite ＞ drawer
================================ */
/* 色付 */
.drwrScrn__handler.is-open {
  background-color : var(--color-bg-01-src01-a);
  color            : var(--color-white-for-bg-dflt);
}

:where(:root) {
  /* 調整しやすい順序で変数を再代入 */
  --drwr-scrn-padding-top    : 61;
  --drwr-scrn-padding-bottom : var(--drwr-scrn-padding-top);

  --drwr-scrn-padding-right  : 106;
  --drwr-scrn-padding-left   : var(--drwr-scrn-padding-right);
}

/* ===============================
 adjustPerSite ＞ drawer ＞ ロゴ
================================ */
/* 色付 */
.site-header .drwrScrn__itemsHolder .siteDrawerTitle {
  --color-brd-sh-drwr-logo-hvr-dflt : var(--color-dflt-bgBrdOlnBs-focused-01);
}
.site-header .drwrScrn__itemsHolder .siteDrawerTitle {
  left : calc((var(--sh-drwr-logo-left-dflt) - 2.00)  * 1px);
  top  : calc((var(--sh-drwr-logo-top-dflt)  - 2.25) * 1px);
}

/* ===============================
 adjustPerSite ＞ drawer ＞ loginAndCard
================================ */
.drwrScrn__itemsHolder .gnLstHldr .duplicatedZone.loginAndCard.flBxGene {

  padding-top     : 1em;
  padding-right   : 1em;
  padding-left    : 1em;

  margin-bottom   : 4em;
  flex-wrap       : nowrap;
  justify-content : flex-end;
}

.drwrScrn__itemsHolder .duplicatedZone.loginAndCard > * {
  margin-left          : 0.8em;
}
  
.drwrScrn__itemsHolder .pgCtrlAndSrch {}
.drwrScrn__itemsHolder .page_control,
.drwrScrn__itemsHolder .drawer-search {
  width : 50%
}

.drwrScrn__itemsHolder .drwrGlblMnItem {}
.drwrScrn__itemsHolder .drwrGlblMnItem .drwrGlblMnAgentLabel{
  font-size : var(--font-size-18);
}

.drwrScrn__itemsHolder .drwrGlblMnAgentLink.btn-like.noArrow {
  /* 215px */
  font-size     : var(--font-size-18);
  width         : 12em;
  border-radius : var(--rounded-8);
}
/* 色付 */
.drwrScrn__itemsHolder .drwrGlblMnAgentLink.btn-like.noArrow {
  border-color  : var(--color-white-for-brd-dflt);
}
/* 色付 */
.drwrScrn__itemsHolder form.headerSearch {
  --color-txt-form-dflt  : var(--color-white-for-txt-dflt);
}
/* 色付 */
.drwrScrn__itemsHolder form.headerSearch .searchOVIEHolder {
  background-color: var(--color-white-for-bg-dflt);
}

.drwrScrn__itemsHolder .page_control,
.drwrScrn__itemsHolder .headerSearch {
  width : 50%;
}


.drwrScrn__itemsHolder .headerSearch.flBxGene {
  justify-content: center;
}

/* ===============================
 adjustPerSite ＞ drawer ＞ 背景色＆文字サイズ
================================ */
/* 色付 */
.drwrScrn__itemsHolder #UD dt{
  color            : var(--color-white-for-bg-dflt);
}

.drwrScrn__itemsHolder .color_change,
.drwrScrn__itemsHolder .textsize_change {
  width        : 100%;
  padding-left : 15%;
}

@media (width < 360px) {
  .drwrScrn__itemsHolder .color_change,
  .drwrScrn__itemsHolder .textsize_change {
    padding-left : 7.5%;
  }
}

/* ===============================
 adjustPerSite ＞ drawer ＞ サイト内検索
================================ */
.drwrScrn__itemsHolder .searchTypeTitle {
  width     : 10em;
}

/* ::markerはliに自動付加される疑似要素 */
/*
.site-header .utility-nav__item::marker {
  display: none;
}
  */

.site-header .drwrScrn__itemsHolder {
  --chld-cmmn-width      : 216;
  --chld-cmmn-mrgn-width : 20;
  --prnt-max-width       : calc(5 * var(--chld-cmmn-width) + 4 * var(--chld-cmmn-mrgn-width) + var(--chld-cmmn-mrgn-width) * 2);
}

.site-header .drwrGlblMnCollector {
  display         : flex;
  justify-content : center;  /* 全体を中央寄せ */
  gap             : calc(var(--chld-cmmn-mrgn-width) * 1px);   /* 要素間の固定ギャップ */
  padding-left    : 0;       /* 左端余白 */
  padding-right   : 0;       /* 右端余白 */
  max-width       : calc(var(--prnt-max-width) * 1px); /* 要素幅*個数 + ギャップ*4 + padding*2 */
  margin          : 0 auto;  /* コンテナを中央に寄せる */
}

/* 色付 */
.site-header .drwrGlblMnCollector {
  --color-bg-gene-button-dflt  : var(--color-white-for-bg-dflt);
  --color-brd-gene-button-dflt : var(--color-white-for-brd-dflt);
  --color-txt-gene-button-dflt : var(--color-black-for-txt-dflt);
  --color-bg-gene-button-on  : var(--color-white-for-bg-on);
  --color-brd-gene-button-on : var(--color-white-for-brd-on);
  --color-txt-gene-button-on : var(--color-black-for-txt-on);
}
/* 色付 */
.site-header .drwrScrn__itemsHolder form.headerSearch {
  --color-bg-sh-search-on           : var(--color-bg-focused-07-src02-n);
  --color-brd-sh-search-cmprnt-dflt : var(--color-brd-06-src02-m);
}

@media (width < 1400px) {

  .site-header .drwrScrn__itemsHolder {
    --sHDrwrCmmnElWidth-onCol2   : calc((var(--headerCZ-width) - var(--chld-cmmn-mrgn-width) * 2 - var(--drwr-scrn-padding-right) - var(--drwr-scrn-padding-left)) / 2);
  }
  .site-header .drwrGlblMnCollector {
    max-width                    : 100%;
    /* --chld-cmmn-mrgn-width       : var(--sHDsgnBsRct001-w-rsgnPrDmTy); */
  }

  /* 疑似的に最後に要素を追加する(ここから) */
  .drwrScrn__itemsHolder .drwrGlblMnCollector > :last-child:nth-child(odd) {
    position: relative;
  }
  .drwrScrn__itemsHolder .drwrGlblMnCollector > :last-child:nth-child(odd)::after {
    content: "";
    flex: 0 0 calc((var(--sHDrwrCmmnElWidth-onCol2) + var(--chld-cmmn-mrgn-width)) * 1px);
  }

  .drwrScrn__itemsHolder a.drwrGlblMnAgentLink.btn-like.noArrow {
    min-width : calc( var(--sHDrwrCmmnElWidth-onCol2) * 1px);
    width     : calc( var(--sHDrwrCmmnElWidth-onCol2) * 1px);
  }
  /* 疑似的に最後に要素を追加する(ここまで) */

  .site-header .drwrScrn__itemsHolder form.headerSearch {
    flex-wrap     : wrap;
    padding-right : 0; 
    margin-bottom : 3em;
  }

  .site-header .drwrScrn__itemsHolder .searchTypeTitle,
  .site-header .drwrScrn__itemsHolder .searchOVIEHolder {
    display : block;
    width   : 100%;
  }
  .site-header .drwrScrn__itemsHolder form .searchVUIHolder {
    flex-direction: column;
  }
  
  .site-header .drwrScrn__itemsHolder form.headerSearch .searchTypeTitle {
    margin-bottom : 0.5em;
  }
}

@media (width < 1200px) {
  /* 検索だけ隠す */
  .site-header .headerSearch.outerDrawer { 
    display : none;
  }
}
@media (width < 1005px) {
  .site-header {
    aspect-ratio : 333 / 77;
  }

  /* 狭くなったのでハンバーガーメニューとロゴ以外の全てを隠す */
  .site-header .navZone1,
  .site-header .navZone2 {
    height : auto;
  }
  .site-header .navZone1 .colorAndTextsizeChanger {
    display : none;
  }
  .site-header .navZone2 > .utility-nav {
    display : none;
  }
  .site-header .navZone3 {
    display : none;
  }

  :root {
     /* ロゴのサイズを計算 */
    --sh-logo-rsbnsble-whn-sp-width   : calc(var(--headerCZ-width) * 224 / 335 * 0.85);

    /* ロゴ（ドローワー内部のロゴにも影響）のデフォルト位置を再計算 */
    /* 余白調整は「--sh-logo-left-default」で */ 
    --sh-logo-left-default       : calc(var(--headerCZ-width) * 224 / 335 * 0.2 / 5);
    --sh-logo-top-default        : calc(var(--headerCZ-height) * 8 / 77);

    /* ハンバーガーメニューのサイズと位置を調整 */
    --sHDsgnBsRct000-w-rsgnPrDmTy : calc(var(--headerCZ-width) * 49 / 335);
    --sHDsgnBsRct000-h-rsgnPrDmTy : calc(var(--headerCZ-height) * 49 / 77);
    --sHDsgnBsRct001-h-rsgnPrDmTy : calc(var(--headerCZ-height) * 8 / 77);
    --sHDsgnBsRct001-w-rsgnPrDmTy : var(--sh-logo-left-default);
    /* --hbgMn-htnVar001-rsgnPrDmTy  : calc(var(--sHDsgnBsRct000-h-rsgnPrDmTy) * 0.06); */
  }
  .site-header .positionRuler.logoRuler {
    width : calc(var(--sh-logo-rsbnsble-whn-sp-width) * 1px);
  }

  /* ===============================
   adjustPerSite ＞ drawer ＞ サイト内検索
  ================================ */
  .site-header .drwrScrn__itemsHolder {
    --chld-cmmn-mrgn-width       : 12;
    --sHDrwrCmmnElWidth-onCol2   : calc((var(--headerCZ-width) - var(--chld-cmmn-mrgn-width) - var(--sHDsgnBsRct001-w-rsgnPrDmTy) * 2) / 2);
  }

  /*  adjustPerSite ＞ drawer */
  .site-header .drwrScrn__itemsHolder {
    padding-left  : 0;
    padding-right : 0;

    padding-top   : calc((var(--sh-logo-height) + 50) * 1px);
  }

  .site-header .drwrScrn__itemsHolder .siteDrawerTitle {
    width : calc(var(--sh-logo-rsbnsble-whn-sp-width) * 1px);
    left  : calc((var(--sh-drwr-logo-left-dflt) - 2)  * 1px);
    top   : calc((var(--sh-drwr-logo-top-dflt)  - 2) * 1px);
  }

  /*  adjustPerSite ＞ drawer ＞ マイページログイン&利用者カード表示 */
  .site-header .drwrScrn__itemsHolder .gnLstHldr .drwrGlblMnCollector {
    justify-content      : center;
    gap                  : 0.75em 0.75em;
    padding-right        : 0;
    padding-left         : 0;
  }

  .site-header .drwrScrn__itemsHolder .page_control,
  .site-header .drwrScrn__itemsHolder .headerSearch {
    width : 100%;
  }

  .site-header .drwrScrn__itemsHolder form.headerSearch {
    padding-right : calc(var(--sHDsgnBsRct001-w-rsgnPrDmTy) * 1px); 
    padding-left  : calc(var(--sHDsgnBsRct001-w-rsgnPrDmTy) * 1px); 
    margin-bottom : 3em;
  }
}

@media (width < 768px) {
  /* relayout per media width */
  .site-header .showWhenOnlySp { display: none; }
}

@media (width < 576px) {
  .site-header {

  }
  .site-header .showWhenOnlySp {
    display     : block;
  }
  .site-header .hideWhenOnlySp {
    display     : none;
  }
  .site-header .outerDrawer.color_change,
  .site-header .outerDrawer.textsize_change.hideWhenOnlySp {
    display     : none;
  }

  .drwrScrn__itemsHolder .gnLstHldr .duplicatedZone.loginAndCard.flBxGene {
    justify-content      : center;
    gap                  : 0.75em 0.75em;
    padding-right        : 0;
    padding-left         : 0;
  }
  .site-header .leftIconLink.myPageLoginAndCard  a.withLeftIcon {
    min-width : calc( var(--sHDrwrCmmnElWidth-onCol2) * 1px);
    width     : calc( var(--sHDrwrCmmnElWidth-onCol2) * 1px);
  }
  .site-header .drwrScrn__itemsHolder .duplicatedZone.loginAndCard > * { margin-left: 0; }

  .site-header .drwrScrn__itemsHolder .headerSearch .searchVUIHolder {
    padding-left  : calc(var(--sHDsgnBsRct001-w-rsgnPrDmTy) * 1px);
    padding-right : calc(var(--sHDsgnBsRct001-w-rsgnPrDmTy) * 1px);
  } 
}
/* 2025-07-固有調整追加(ここまで) */

@media (width < 360px) {
  .drwrScrn__itemsHolder .gnLstHldr .duplicatedZone.loginAndCard.flBxGene {
    font-size: 0.6rem;
  }
  .drwrScrn__itemsHolder .drwrGlblMnItem {
    font-size: 0.75rem;
  }
}

/* ============================================================
 adjustPerSite ＞ Drawer（機能） ＞ Drawer ＞ search
============================================================ */

.drwrScrn__itemsHolder .searchVUIHolder {
  width : 100%;
}

.drwrScrn__itemsHolder .searchTypeTitle {
  font-size: var(--font-size-18);
}

.drwrScrn__itemsHolder .likeSearchBtnInSearchKeyword {
  width : calc(100% - 10rem);
}
@media (width < 576px) {
  .drwrScrn__itemsHolder .searchTypeLabelHolder .searchTypeTitle {
    padding-bottom: 0.5rem;
  }
  .drwrScrn__itemsHolder .likeSearchBtnInSearchKeyword {
    width : 100%;
  }
}

/* ============================================================
 adjustPerSite ＞ Drawer（機能） ＞ Drawer ＞ page control
============================================================ */
/* 色付 */
.drwrScrn__itemsHolder .searchOVIEHolder .search_btn {
  background-color: var(--color-site-proper-01-a);
}

.drwrScrn__itemsHolder .page_control,
.drwrScrn__itemsHolder .page_control .UD {
  justify-content: space-around;
}

/* 2025-07-固有調整追加(ここから) */
/* まずは全体レイアウト(media指定なし,media指定あり[PC=>SP]) => 要素内レイアウト */
/* ===============================
 adjustPerSite ＞ Footer
================================ */
.site-footer {
  /* style */
  background : var(--color-bg-footer-dflt);
}

.site-footer .locationInfoAndEtc {
  --sf-lcEtc-slf-wm-aspect-ratio    : auto;
}
/* 色付 */
.site-footer .locationInfoAndEtc {
  --color-txt-this-dflt : var(--color-black-for-txt-dflt); /* BBEEF6 */
  --color-bg-this-dflt  : var(--color-bg-06-src02-b); /* BBEEF6 */
}

.site-footer .logoAndLocationZone, 
.site-footer .etcZone {
  padding-bottom    : calc(var(--sf-pddng-ctrl-top-dflt) * 1px);
}

.site-footer .rDRL1.wdth2div.wLnT .logoAndLocationInfo,
.site-footer .rDRL1.wdth2div.wRnB .footerSubItem  {
  padding-top    : calc(var(--sf-pddng-ctrl-top-dflt) * 1px);
}

/* お問い合わせ */

.site-footer .rDRL1.wdth2div.wLnT .logoAndLocationInfo,
.site-footer .rDRL1.wdth2div.wRnB .footerSubItem  {
  padding-bottom : 1em;
}

.site-footer .logoAndLocationInfo .footerSubItem .graphicDecoLink {
  --sf-grphDcLnk-common-width-dflt   : 155;
  --sf-grphDcLnk-common-height-dflt  : 40;
  --sf-grphDcLnk-icon-scrn-width     : 20;
  --sf-grphDcLnk-icon-scrn-height    : 20;
  --sf-grphDcLnk-icon-url-dflt       : url(../img/gene_btn_arrow.png);
  --sf-grphDcLnk-icon-url-on         : url(../img/gene_btn_arrow_on.png);
  --sf-grphDcLnk-icon-self-width     : 16;
}
/* 色付 */
.site-footer .logoAndLocationInfo .footerSubItem .graphicDecoLink {
  --color-bg-sf-grphDcLnk-dflt       : var(--color-white-for-bg-dflt);
  --color-brd-sf-grphDcLnk-dflt      : var(--color-white-for-brd-dflt);
  --color-bg-sf-grphDcLnk-on         : var(--color-bg-focused-01-src01-a);
  --color-brd-sf-grphDcLnk-on        : var(--color-brd-focused-01-src01-a);

  --color-txt-sf-grphDcLnk-dflt      : var(--color-black-for-txt-dflt);
  --color-txt-sf-grphDcLnk-on        : var(--color-white-for-txt-on);
}

.site-footer .logoAndLocationInfo .footerSubItem .graphicDecoLink a.arrow.reqSrc {
  --sf-grphDcLnk-common-width-dflt   : 160;
}

/* サイトマップ＆図書館について */
.site-footer .rDRL1.wdth2div.wLnT .footerSubItem {
  height : 2em;
  margin : 0.5em 0;
}

.site-footer .etcZone .footerSubItem .hcih-ih {
  justify-content: center;
}

.site-footer .etcZone .gnLstHldr ul.hcih-ih.withCenterBorder {
  --color-bg-gn-lstArea-cntrBrd      : var(--color-black-for-brd-dflt); /* #000000; */

  --gn-lstArea-cntrBrd-wdth-num      : 1;
  --gn-lstArea-cntrBrd-wdth-scl      : 1px;
  --gn-lstArea-cntrBrd-hght-num      : 90;
  --gn-lstArea-cntrBrd-hght-scl      : 1%;

  --gn-lstArea-cntrBrd-top-num       :  5;
  --gn-lstArea-cntrBrd-top-scl       : 1%;
  --gn-lstArea-cntrBrd-lft-num       : 172;
  --gn-lstArea-cntrBrd-lft-scl       : 1px;
}

.site-footer .etcZone .footerSubItem .graphicDecoLink {
  --sf-grphDcLnk-common-width-dflt   : 160;
  --sf-grphDcLnk-common-height-dflt  : 40;
  --sf-grphDcLnk-icon-scrn-width     : 20;
  --sf-grphDcLnk-icon-scrn-height    : 20;
  --sf-grphDcLnk-icon-url-dflt       : url(../img/gene_btn_arrow.png);
  --sf-grphDcLnk-icon-url-on         : url(../img/gene_btn_arrow_on.png);
  --sf-grphDcLnk-icon-self-width     : 16;
}
/* 色付 */
.site-footer .etcZone .footerSubItem .graphicDecoLink {
  --color-bg-sf-grphDcLnk-dflt       : var(--color-bg-footer-lgAndLcZn-dflt);
  --color-brd-sf-grphDcLnk-dflt      : var(--color-bg-footer-lgAndLcZn-dflt);

  --color-bg-sf-grphDcLnk-on         : var(--color-brd-sf-grphDcLnk-dflt);
  --color-brd-sf-grphDcLnk-on        : var(--color-brd-sf-grphDcLnk-dflt);

  --color-txt-sf-grphDcLnk-dflt      : var(--color-black-for-txt-dflt);
  --color-txt-sf-grphDcLnk-on        : var(--color-black-for-txt-on);
}

/* 図書館別リンク */
.site-footer .etcZone .footerSubMenu {
}
.site-footer .etcZone .footerSubMenu .hcih-ih {
  justify-content: center;
} 

.site-footer .etcZone .footerSubMenus .responsibleSortPerWidth {
  --sf-el-chld-cmmn-width      : 150;
  --sf-el-chld-cmmn-mrgn-width : 20;
}

.site-footer .etcZone .footerSubMenus .graphicDecoLink {
  --sf-grphDcLnk-common-width-dflt   : var(--sf-el-chld-cmmn-width);
  --sf-grphDcLnk-common-height-dflt  : 72;
  --sf-grphDcLnk-icon-scrn-width     : 10;
  --sf-grphDcLnk-icon-scrn-height    : calc(95 * var(--sf-grphDcLnk-common-height-dflt) / 100);
}
/* 色付 */
.site-footer .etcZone .footerSubMenus .graphicDecoLink {
  --color-brd-sf-grphDcLnk-dflt      : var(--color-brd-05-src02-l);
  --color-txt-sf-grphDcLnk-dflt      : var(--color-black-for-txt-dflt);
  --color-txt-sf-grphDcLnk-on        : var(--color-black-for-txt-on);
}

/* 図書館別リンク ＞ 各個 */
.site-footer .etcZone .footerSubMenus .graphicDecoLink:hover,
.site-footer .etcZone .footerSubMenus .graphicDecoLink:focus {
  --sf-grphDcLnk-outLine-width-on  : 3px;
}
/* 色付 */
.site-footer .etcZone .footerSubMenus .graphicDecoLink:hover,
.site-footer .etcZone .footerSubMenus .graphicDecoLink:focus {
  --color-outLine-sf-grphDcLnk-on  : var(--color-white-for-brd-on);
}

.site-footer .etcZone .footerSubMenus .graphicDecoLink a {
  --sf-grphDcLnk-common-brd-radius : var(--rounded-8, 8px);
}
/* 色付 */
.site-footer .graphicDecoLink.libCentral a {
  --sf-grphDcLnk-bar-bg-dflt   : var(--color-named-01-01-by-site);
  --sf-grphDcLnk-bar-bg-on     : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-bg-sf-grphDcLnk-dflt : var(--color-white-for-bg-dflt);
  --color-bg-sf-grphDcLnk-on   : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-brd-sf-grphDcLnk-on  : var(--sf-grphDcLnk-bar-bg-dflt);
}
/* 色付 */
.site-footer .graphicDecoLink.libOgori a {
  --sf-grphDcLnk-bar-bg-dflt   : var(--color-named-01-02-by-site);
  --sf-grphDcLnk-bar-bg-on     : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-bg-sf-grphDcLnk-dflt : var(--color-white-for-bg-dflt);
  --color-bg-sf-grphDcLnk-on   : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-brd-sf-grphDcLnk-on  : var(--sf-grphDcLnk-bar-bg-dflt);
}
/* 色付 */
.site-footer .graphicDecoLink.libAio a {
  --sf-grphDcLnk-bar-bg-dflt   : var(--color-named-01-03-by-site);
  --sf-grphDcLnk-bar-bg-on     : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-bg-sf-grphDcLnk-dflt : var(--color-white-for-bg-dflt);
  --color-bg-sf-grphDcLnk-on   : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-brd-sf-grphDcLnk-on  : var(--sf-grphDcLnk-bar-bg-dflt);
}
/* 色付 */
.site-footer .graphicDecoLink.libAjisu {
  --sf-grphDcLnk-bar-bg-dflt   : var(--color-named-01-04-by-site);
  --sf-grphDcLnk-bar-bg-on     : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-bg-sf-grphDcLnk-dflt : var(--color-white-for-bg-dflt);
  --color-bg-sf-grphDcLnk-on   : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-brd-sf-grphDcLnk-on  : var(--sf-grphDcLnk-bar-bg-dflt);
}
/* 色付 */
.site-footer .graphicDecoLink.libTokuji a {
  --sf-grphDcLnk-bar-bg-dflt   : var(--color-named-01-05-by-site);
  --sf-grphDcLnk-bar-bg-on     : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-bg-sf-grphDcLnk-dflt : var(--color-white-for-bg-dflt);
  --color-bg-sf-grphDcLnk-on   : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-brd-sf-grphDcLnk-on  : var(--sf-grphDcLnk-bar-bg-dflt);
}
/* 色付 */
.site-footer .graphicDecoLink.libAto a {
  --sf-grphDcLnk-bar-bg-dflt   : var(--color-named-01-06-by-site);
  --sf-grphDcLnk-bar-bg-on     : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-bg-sf-grphDcLnk-dflt : var(--color-white-for-bg-dflt);
  --color-bg-sf-grphDcLnk-on   : var(--sf-grphDcLnk-bar-bg-dflt);
  --color-brd-sf-grphDcLnk-on  : var(--sf-grphDcLnk-bar-bg-dflt);
}

.site-footer .copyright {}

@media (width < 1005px) {
  .site-footer .locationInfoAndEtc {
    flex-wrap: wrap;
  }

  .site-footer .locationInfoAndEtc .rDRL1.wdth2div.wLnT, 
  .site-footer .locationInfoAndEtc .rDRL1.wdth2div.wRnB {
    width : 100%;
  }
 
  .site-footer .logoAndLocationZone .logoAndLocationInfo {
    width : 100%;
  }
  .site-footer .logoAndLocationZone .footerLogoHolder {
    width : calc(100% / 6 * 4.1);
    margin : 0 auto;
  }

  .site-footer .logoAndLocationZone .postNumberAndAddressHolder .hcih-ih {
    width  : fit-content;
    margin : 0 auto;
  }
  .site-footer .logoAndLocationZone .telAndFaxNumberHolder .hcih-ih  {
    margin : 0;
  }

  .site-footer .logoAndLocationZone .footerSubItem .hcih-ih {
    justify-content: center;

  }

  .site-footer .etcZone {
    padding-bottom: 2rem;
  }

  .site-footer .copyright p {
    font-size  : 0.75rem;
  }
}

@media (width < 576px) {
  .site-footer .content {
    padding-inline : 0;
  }
}
/* 2025-07-固有調整追加(ここまで) */

/* ==============================================================
 adjustPerSite ＞ reread-link（表示中のページ上部（トップ）へ戻る）
=============================================================== */
.reread-link {
  width            : 74px;
  height           : 74px;
  border           : 0;

  --sf-reLnk-dflt-brd-width-numScl : 2px;
  --sf-reLnk-OLn-on-width-numScl : 2px;
}

/* 色付 */
.reread-link {
  --color-bg-sf-reLnk-dflt  : var(--color-white-for-bg-dflt);
  --color-brd-sf-reLnk-dflt : var(--color-white-for-brd-dflt);
  --color-Oln-sf-reLnk-on   : var(--color-white-for-brd-on);
}

/*-========--========--========--========--========--========--========--========--========--========-
 adjustPerSite ＞ common ＞ form系
-========--========--========--========--========--========--========--========--========--========-*/
/* 色付 */
form {
  /* ラベル等 */
  --color-txt-form-dflt       : var(--color-white-for-txt-dflt);

  /* ボタン */
  --color-bg-form-button-dflt : var(--color-bg-31-src-gry1);
  --color-brd-form-button-dflt : var(--color-bg-31-src-gry1);
  --color-txt-form-button-dflt : var(--color-white-for-txt-dflt);

  --color-bg-form-button-on   : var(--color-bg-32-src-gry2);
  --color-brd-form-button-on  : var(--color-bg-32-src-gry2);
  --color-txt-form-button-on  : var(--color-black-for-txt-on);

  /* input/textarea */
  --color-bg-form-input-dflt  : var(--color-white-for-bg-dflt);
  /* --color-brd-form-input-dflt : var(); */
  --color-txt-form-input-dflt : var(--color-black-for-txt-dflt);
 
  --color-bg-form-input-on    : var(--color-white-for-bg-on);
  --color-brd-form-input-on   : var(--color-brd-focused-02-src01-c); 
  --color-txt-form-input-on   : var(--color-black-for-txt-on);

  --color-txt-form-input-placeholder-dflt : var(--color-black-for-txt-dflt);
  --color-txt-form-input-placeholder-on   : var(--color-black-for-txt-dflt);
}

/*-========--========--========--========--========--========--========--========--========--========-
 adjustPerSite ＞ common ＞ menuページとdtailページ
-========--========--========--========--========--========--========--========--========--========-*/
body.menu .main_wrap,
body.detail .main_wrap {
  padding-bottom: 2em;
}

/*************************************************
 adjustPerSite ＞ 詳細ページ
**************************************************/
h1.contentTitle{
  --heading-h1-font-size-dflt    : var(--font-size-36);
  --heading-h1-pgHLDesc-font-size-dflt : var(--font-size-14);
}
/* 色付 */
h1.contentTitle{
  --color-text-heading-h1-dflt   : var(--color-txt-03-src01-d);
  --color-bg-heading-h1-ULn-dflt : var(--color-bg-03-src01-d);

  --color-txt-h1-pgHLDesc-dflt   : var(--color-red-for-txt-dflt);
}

/*************************************************
 adjustPerSite ＞ メニュー（一覧）ページ
**************************************************/
h1.menuPageTitle {
  --heading-h1-font-size-dflt    : var(--font-size-36);
  --heading-h1-pgHLDesc-font-size-dflt : var(--font-size-14);
}
/* 色付 */
h1.menuPageTitle {
  --color-text-heading-h1-dflt   : var(--color-txt-03-src01-d);
  --color-bg-heading-h1-ULn-dflt : var(--color-bg-03-src01-d);

  --color-txt-h1-pgHLDesc-dflt   : var(--color-red-for-txt-dflt);
}

/*===============================================
 adjustPerSite ＞ サイドメニュー
===============================================*/

.navMenuCollector .navMenu.plain {
  border-radius: var(--rounded-12);
}

/* 色付 */
.navMenuCollector .navMenu.plain {
  --color-bg-sdMn-plnLnk-dflt      : var(--color-bg-01-src01-a); /* 004EA2 */ 
  --color-brd-sdMn-plnLnk-dflt     : var(--color-brd-08-src01-a);
  --color-txt-sdMn-plnLnk-dflt     : var(--color-white-for-txt-dflt);

  --color-bg-sdMn-plnLnk-lnk-dflt  : var(--color-bg-06-src02-b); /* BBEEF6 */ 
  --color-bg-sdMn-plnLnk-lnk-on    : var(--color-bg-focused-31-src-wht1); /* #F4FDFF; */

  --color-txt-sdMn-plnLnk-lnk-dflt : var(--color-bg-01-src01-a); /* 004EA2 */ 
  --color-txt-sdMn-plnLnk-lnk-on   : var(--color-txt-focused-03-src01-g); /* 1C3D79 */ 
}

.navMenuCollector .navMenu.plain .listTitle{
  text-align: center;
  padding-inline-start : unset;
  padding-bottom       : 0.5em;
}

.navMenuCollector .navMenu.plain.standard {
  padding: 2rem 0.5rem 2rem 0.5rem;
  margin-bottom : 2em;
}
.navMenuCollector .plainLink {
  padding-bottom : 0.5em;
}
/* 色付 */
.navMenuCollector .plainLink {
  --color-brd-sdMn-plnLnk-lnk-dflt : var(--color-brd-08-src01-a);
  --color-brd-sdMn-plnLnk-lnk-on   : var(--color-brd-focused-01-src01-a);
}

.navMenuCollector .navMenu.withLeftIcon.arrowInCircle {
  padding: 2rem 2.7rem 2rem 2.7rem;
  margin-bottom : 2em;
  border-radius: var(--rounded-12); 
}

/* 色付 */
.navMenuCollector .navMenu.withLeftIcon.arrowInCircle {
  --color-bg-sdMn-leftIcnLnk-ttl-dflt  : var(--color-bg-02-src01-c); /* #204E9F; */
  --color-brd-sdMn-leftIcnLnk-ttl-dflt : var(--color-brd-01-src01-c);
  --color-txt-sdMn-leftIcnLnk-ttl-dflt : var(--color-white-for-txt-dflt);

  --color-bg-sdMn-leftIcnLnk-dflt  : var(--color-bg-02-src01-c); /* #204E9F; */
  --color-bg-sdMn-leftIcnLnk-on    : var(--color-bg-focused-32-src-wht2); /* #F5FDFF; */

  --color-txt-sdMn-leftIcnLnk-dflt : var(--color-white-for-txt-dflt);
  --color-txt-sdMn-leftIcnLnk-on   : var(--color-txt-focused-02-src01-f);
}

/* 色付 */
.navMenuCollector .navMenu.withLeftIcon.arrowInCircle.decoItemBottomWithUL {
  --color-brd-sdMn-dcBtm-dflt : var(--color-white-for-brd-dflt);
}

.navMenuCollector .leftIconLink.arrowInCircle {
  /* 境界線 */
  --sdMn-leftIcnLnk-common-brd-radius           : var(--rounded-8); 
  /* 画像の設定 */
  --sh-leftIcnLnk-arrowInCircle-icon-url-dflt   : url(../img/sideMenu_arrow.png);
  --sh-leftIcnLnk-arrowInCircle-icon-url-on     : url(../img/sideMenu_arrow.png);

  --sdMn-leftIcnLnk-icon-scrn-width             : 30;
  --sdMn-leftIcnLnk-icon-self-width             : 18;

  --sdMn-leftIcnLnk-txt-padding-block           : 12;
}
/* 色付 */
.navMenuCollector .leftIconLink.arrowInCircle {
  --color-brd-sdMn-leftIcnLnk-dflt              : var(--color-brd-01-src01-c); /* #204E9F; */
}

.navMenuCollector .navMenu.withLeftIcon.arrowInCircle .leftIconLink a {

}

@media (width < 1128px) {
  .navMenuCollector .navMenu.plain,
  .navMenuCollector .navMenu.withLeftIcon.arrowInCircle  {
    border-radius: unset;
  }
  .navMenuCollector .bannerCollectorHolder  {
    padding-inline : var(--mznNvHldr-iLn-pddng-numScl); 
    margin-bottom : 1em;
  }
}


/*===============================================
 adjustPerSite ＞ 背景と文字色
  memo : .hrzTeoEdgeNoLimit.grayBack
===============================================*/
.bgTypWhite,.bgfntTypWhite { background-color : var(--color-neutral-0,#fff); } 
.bgfntTypWhite { color: var(--color-black-for-txt-dflt,#000); }

.bgTypGray,.bgfntTypGray { background-color : var(--color-neutral-54,#767676); } 
.bgfntTypGray { color: var(--color-black-for-txt-dflt,#000); }

/* default exsamaple */
.bgTyp0,.bgfntTyp0 { background-color : var(--color-white-for-bg-dflt,#fff); } 
.bgfntTyp0 { color: var(--color-black-for-txt-dflt,#000); }
/* /default exsamaple */
.bgTyp1,.bgfntTyp1 { background-color : var(--color-bg-07-src02-c); }
.bgfntTyp1 { color            : var(--color-black-for-txt-dflt); }
.bgTyp2,.bgfntTyp2 { background-color : var(--color-bg-06-src02-b); }
.bgfntTyp2 { color            : var(--color-black-for-txt-dflt); }

.bgTyp3,.bgfntTyp3 { background-color : var(--color-bg-01-src01-a); }
.bgfntTyp3 { color            : var(--color-white-for-txt-dflt); }

.bgTyp4,.bgfntTyp4 { background-color : var(--color-bg-32-src-gry2); }
.bgfntTyp4 { color            : var(--color-black-for-txt-dflt); }


/*===============================================
 adjustPerSite ＞ 主に詳細ページ ＞ txtbox系
===============================================*/
/* paintedArea */
.txtbox {
  --txtBox-h2-font-size-dflt      : var(--font-size-24);
  --txtBox-h2-font-weight-dflt    : var(--fontweight-medium);
  --txtBox-h2-line-height-dflt    : var(--leading-normal);
  --txtBox-h2-letter-spacing-dflt : var(--tracking-100);
}
/* 色付 */
.txtbox {
  --color-bg-txtBox-h2-dflt       : var(--color-bg-02-src01-c);
  --color-brd-txtBox-h2-dflt      : var(--color-brd-01-src01-c);
  --color-txt-txtBox-h2-dflt      : var(--color-white-for-txt-dflt);
}

.txtbox a {
  text-decoration: underline;
}

.txtbox h2 a,
.txtbox h2 a:visited { 
  color : var(--color-white-for-txt-dflt);
}

/* leftBar */
.txtbox {
  --txtBox-h3-font-size-dflt      : var(--font-size-22);
  --txtBox-h3-font-weight-dflt    : var(--fontweight-medium);
  --txtBox-h3-letter-spacing-dflt : var(--tracking-100);
}
/* 色付 */
.txtbox {
  --color-bg-txtBox-h3-lftBr-dflt : var(--color-bg-01-src01-a);
  --color-txt-txtBox-h3-dflt      : var(--color-txt-03-src01-d);
}

/* leftCircle */
.txtbox {
  --txtBox-h4-font-size-dflt      : var(--font-size-21);
  --txtBox-h4-font-weight-dflt    : var(--fontweight-medium);
  --txtBox-h4-letter-spacing-dflt : var(--tracking-100);
}
/* 色付 */
.txtbox {
  --color-bg-txtBox-h4-lftCrcl-wdth-dflt: var(--color-bg-01-src01-a);
  --color-txt-txtBox-h4-dflt      : var(--color-txt-03-src01-d);
}

/* leftBar */
.txtbox {
  --txtBox-h5-font-size-dflt      : var(--font-size-20);
  --txtBox-h5-font-weight-dflt    : var(--fontweight-medium);
  --txtBox-h5-letter-spacing-dflt : var(--tracking-100);
}
/* 色付 */
.txtbox {
  --color-bg-txtBox-h5-lftBr-dflt : var(--color-bg-08-src02-d);
  --color-txt-txtBox-h5-dflt      : var(--color-txt-03-src01-d);
}

/* leftBar */
.txtbox {
  --txtBox-h6-font-size-dflt      : var(--font-size-18);
  --txtBox-h6-font-weight-dflt    : var(--fontweight-medium);
  --txtBox-h5-letter-spacing-dflt : var(--tracking-100);
}
/* 色付 */
.txtbox {
  --color-bg-txtBox-h6-lftBr-dflt : var(--color-bg-31-src-gry1);
  --color-txt-txtBox-h6-dflt      : var(--color-txt-03-src01-d);
}

/* leftCircle */
/* 色付 */
.txtbox ul {
  --color-bg-txtBox-li-lftCrcl-wdth-dflt : var(--color-bg-15-src04-a);
}

/* table */
.txtbox table {
  /* --color-site-proper-01-d */
}
/* 色付 */
.txtbox table {
  --color-bg-txtBox-table-th-dflt     : var(--color-bg-06-src02-b);
  --color-brd-txtBox-table-tbody-dflt : var(--color-site-proper-01-e);
  --color-brd-txtBox-table-cells-dflt : var(--color-site-proper-01-e);
}

.fileSection,
.linkSection,
.mapSection,
.formSection,
.infoSection {
  --detailSection-h2-font-size-dflt      : var(--font-size-24);
  --detailSection-h2-font-weight-dflt    : var(--fontweight-medium);
  --detailSection-h2-line-height-dflt    : var(--leading-normal);
  --detailSection-h2-letter-spacing-dflt : var(--tracking-100);
}

/* 色付 */
.fileSection,
.linkSection,
.mapSection,
.formSection,
.infoSection {
  --color-bg-detailSection-h2-dflt       : var(--color-bg-02-src01-c);
  --color-txt-detailSection-h2-dflt      : var(--color-white-for-txt-dflt);
}
section.formSection {
  --color-txt-formSection-dflt : var(--color-black-for-txt-dflt);
}
section.infoSection {
  --color-txt-infoSection-dflt : var(--color-black-for-txt-dflt);
  --color-txt-lnk-dflt         : var(--color-black-for-txt-dflt);
}

/*-========--========--========--========--========--========--========--========--========--========-
 adjustPerSite ＞ 全ページ共通 ＞ タグa ＞ ボタン型 ＞ 右装飾 ＞ 基本
-========--========--========--========--========--========--========--========--========--========-*/
a.btn-like.withRightDeco {
  --rightDecoBase-url-dflt: url(../img/gene_btn_arrow.png);
  --rightDecoBase-url-on: url(../img/gene_btn_arrow_on.png);
}

/*************************************************
 adjustPerSite ＞ 一覧ページ
**************************************************/
.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks {
  --brd-selfLine-radius-dflt : var(--rounded-12);
  --brd-selfLine-radius-on   : var(--rounded-12);
}
/* 色付 */
.menuHolderAsMenuPageCore .navItemCollector.leftBarAndRightAllowLinks {
  --color-bg-itemOutLine-dflt : var(--color-bg-06-src02-b);
  --color-brd-itemOutLine-dflt : var(--color-brd-04-src02-b);
  --color-txt-itemCenter-dflt  : var(--color-black-for-txt-dflt);

  --color-bg-itemOutLine-on   : var(--color-bg-focused-09-src05-a);
  --color-brd-itemOutLine-on  : var(--color-brd-focused-04-src05-a);
  --color-txt-itemCenter-on   : var(--color-black-for-txt-on);

  --color-bg-leftBar-dflt     : var(--color-bg-04-src01-e);

  --rightAllowBase-url-dflt   : url(../img/gene_btn_arrow.png);

  --color-txt-itemOutLine-dflt : var(--color-black-for-txt-dflt);
  --color-txt-itemOutLine-on   : var(--color-txt-focused-05-src01-k);
}

body.menu.titleFullWidth .menuPageTitle.belt {
  font-size: calc(var(--heading-h1-font-size-dflt) * 0.8);
  padding-block: 1.125em;
  text-align: center;
}
/* 色付 */
body.menu.titleFullWidth .menuPageTitle.belt {
  --color-bg-belt-dflt  : var(--color-bg-01-src01-a);
  --color-txt-belt-dflt : var(--color-white-for-txt-dflt);
}

body.menu.titleFullWidth .menuPageTitle.belt::after {
  display : none;
}

/*-========--========--========--========--========--========--========--========--========--========-
 adjustPerSite ＞ おしらせ ＞ タブ切替機能付き ＞ 基本
-========--========--========--========--========--========--========--========--========--========-*/

.infomation.changeByTab.withAuthOrg {
  --title-icon-left-scrn-width-dlft : 2.5em;
  --title-icon-url-dflt             : url(../img/flag.png);
}
/* 色付 */
.infomation.changeByTab.withAuthOrg {
  --color-txt-title-dflt            : var(--color-txt-02-src01-c);

  --color-brd-self-under-dflt : var(--color-brd-05-src02-l);

  --color-bg-tab-menu-dflt    : var(--color-bg-33-src-gry3);
  --color-brd-tab-menu-dflt   : var(--color-brd-31-src-gry3);
  --color-txt-tab-menu-dflt   : var(--color-txt-04-src01-h);

  --color-bg-tab-menu-on      : var(--color-bg-focused-05-src02-g);
  --color-brd-tab-menu-on     : var(--color-brd-focused-03-src02-g);
  --color-txt-tab-menu-on     : var(--color-txt-focused-04-src01-h);

  --color-txt-org-name-dflt  : var(--color-txt-04-src01-h);
  --color-txt-org-name-on    : var(--color-txt-focused-04-src01-h);
  --color-txt-link-dflt      : var(--color-txt-04-src01-h);
  --color-txt-link-on        : var(--color-txt-focused-04-src01-h);

  --color-bg-org-name-dflt   : var(--color-bg-33-src-gry3);
  --color-txt-org-name-dflt  : var(--color-txt-04-src01-h);

  --color-bg-btn-moreInfo-dflt  : var(--color-bg-05-src02-a);
  --color-brd-btn-moreInfo-dflt : var(--color-brd-03-src02-a);
  --color-txt-btn-moreInfo-dflt : var(--color-txt-02-src01-c);
  
  --color-bg-btn-moreInfo-on    : var(--color-bg-focused-01-src01-a);
  --color-brd-btn-moreInfo-on   : var(--color-brd-focused-01-src01-a);
  --color-txt-btn-moreInfo-on   : var(--color-white-for-txt-dflt);
}

.infomation.changeByTab.withAuthOrg .showTrigger.showTrigger {
  border-radius:  var(--rounded-12);
} 

/* 色付 */
.infomation.changeByTab.withAuthOrg .showTrigger.section-all.withSBT {
  --color-bg-triangle-dflt : var(--color-bg-focused-51-src02-g);
  --color-bg-triangle-on   : var(--color-bg-focused-51-src02-g);
}

/* 色付 */
.infomation.changeByTab.withAuthOrg .showTrigger.section1.withSBT {
  --color-bg-tab-menu-on   : var(--color-bg-focused-52-src02-h);
  --color-bg-triangle-dflt : var(--color-bg-focused-52-src02-h);
  --color-bg-triangle-on   : var(--color-bg-focused-52-src02-h);
}

/* 色付 */
.infomation.changeByTab.withAuthOrg .showTrigger.section2.withSBT {
  --color-bg-tab-menu-on   : var(--color-bg-focused-53-src02-i);
  --color-bg-triangle-dflt : var(--color-bg-focused-53-src02-i);
  --color-bg-triangle-on   : var(--color-bg-focused-53-src02-i);
}

/* 色付 */
.infomation.changeByTab.withAuthOrg .showTrigger.section3.withSBT {
  --color-bg-tab-menu-on   : var(--color-bg-focused-54-src02-j);
  --color-bg-triangle-dflt : var(--color-bg-focused-54-src02-j);
  --color-bg-triangle-on   : var(--color-bg-focused-54-src02-j);
}

.infomation.changeByTab.withAuthOrg .graphHolder {
  width        : 37px;
  aspect-ratio : 37 / 50;
}

.infomation.changeByTab.withAuthOrg .decoZone {
  padding-top : 0.66em;
  height  : 3.5em;
}

.infomation.changeByTab .titlePerHnPeerHolder .multiLangs:after {
  height : 1px;
}
.infomation.changeByTab .titlePerHnPeerHolder::after {
  height : 0;
}

/* 色付 */
.infomation.changeByTab .sectionNotifier.section1 {
  background: var(--color-bg-11-src02-h);
}

/* 色付 */
.infomation.changeByTab .sectionNotifier.section2 {
  background: var(--color-bg-12-src02-i); 
}

/* 色付 */
.infomation.changeByTab .sectionNotifier.section3 {
  background: var(--color-bg-13-src02-j); 
}

.infomation.changeByTab .orgName {
  min-width    : 7.5em;
  border-radius: var(--rounded-8);
  text-align : center;
}

.infomation.changeByTab  .sectionNotifier {
  padding: 0.25rem 1rem;
  border-radius: var(  --rounded-full);
}

@media (max-width: 768px) {
  .infomation.changeByTab .titlePerHnPeerHolder .multiLangs:after {
    height : 0;
  }
  .infomation.changeByTab .titlePerHnPeerHolder::after {
    height: 1px;
  }
}

/*-========--========--========--========--========--========--========--========--========--========-
 adjustPerSite ＞ メールフォーム
-========--========--========--========--========--========--========--========--========--========-*/
.formdata .wcf__required legend::after { display:none;}
.formdata .wcf__required legend .font_red{ margin-left: 1em; display: inline-block; color: var(--color-txt-required); }

.formTemplate {
  --color-txt-required : var(--color-txt-form-required, #dd0000);
  --color-txt-error    : var(--color-txt-form-error   , #dd0000);
  --color-brd-dot      : var(--color-brd-form-dot     , #aaa);
}
.formTemplate form{

  --color-txt-form-dflt       : var(--color-black-for-txt-dflt);
  /* ボタン */
  --color-bg-form-button-dflt : var();
  --color-brd-button-dflt     : var();

  --color-bg-form-button-on   : var();
  --color-brd-button-on       : var();

  /* input/textarea */
  --color-bg-form-input-dflt  : var(--color-white-for-bg-dflt);
  /* --color-brd-form-input-dflt : var(); */
  --color-txt-form-input-dflt : var(--color-black-for-txt-dflt);
 
  --color-bg-form-input-on    : var(--color-white-for-bg-on);
  /* --color-brd-form-input-on   : var(); */
  --color-txt-form-input-on : var(--color-black-for-txt-on);
}

/* 入力画面 */
.formTemplate .txtbox{ margin-bottom:2em;}
.formTemplate legend { font-size: 1.1em; font-weight: bold;}
.formTemplate legend span { font-size: .8em;}
.formTemplate .wcf__radio label { margin-right: 2em;}
.formTemplate .wcf__radio input { margin: 0 .3em 0 .6em; transform:scale(1.4);}
.formTemplate .wcf__validation_error { color: color: var(--color-txt-error); }

/* 確認画面 */
.formTemplate .wcf__confirm__input p { margin-bottom: .5em; padding: .5em ; border-bottom: 2px dotted var(--color-brd-dot);}
.formTemplate .wcf__confirm__input p + ul { margin-left: 1em; margin-bottom:1em; font-size: 1.1em;}
.formTemplate .wcf__confirm__back,
.formTemplate .wcf__confirm__submit { display: inline-block; margin: .5em; padding: .3em 1em; gap: 1em;}