/*** user.css ***/

/*
 * =========================================================
 * リスト関連
 * =========================================================
*/

/* -- 丸かっこリスト (カスタム順序リスト) ------------------------------------------- */
/* -- (1), (2), (3) の形式でリストマーカーを表示 ------------------------------------ */
.c-ol2 {
    margin-left: 3.5em;               /* 親要素のフォントサイズ (em) で、リスト全体を右に 3.5文字分インデント */
    counter-reset: cnt;               /* ページ内で複数のリストがある場合に番号が連番になるのを防ぐため       */
}
.c-ol2 li {
    list-style-position: outside;     /* デフォルトのリストマーカーを完全に無効化［意図明確化のため記述］     */
    list-style-type: none;            /* デフォルトのリストマーカーを非表示にする                             */
    counter-increment: cnt;           /* カウンター 'cnt' を１つずつインクリメントする                        */
    position: relative;               /* 擬似要素 (:before) の基準位置とする                                  */
}
.c-ol2 li::before {
    content: "(" counter(cnt) ") ";   /* カウンターの値に丸かっこを付けて、直後に半角スペースを付けて表示     */
    display: inline-block;            /* 擬似要素をブロック要素化し、幅とマージンを適用可能にする             */

    margin-left: -3.5em;              /* 親要素のインデントを相殺し、マーカーをリスト項目行の左端に配置       */
    width: 3em;                       /* マーカーの表示幅を 3文字分に設定                                     */
    text-align: right;                /* マーカーをその幅の中で右寄せにする                                   */

    position: absolute;               /* リスト項目の上 (top: 0) に絶対配置                                   */
    top: 0;                           /* 擬似要素をリスト項目の上端に配置                                     */
    left: 0;                          /* 擬似要素をリスト項目の左端に配置                                     */
}

/* ボタンリスト（横並び・折り返しあり） */
.c-btn-list {
  list-style: none;                   /* リストマーカー（点や数字など）を非表示にする                         */
  margin: 0;                          /* ul要素のデフォルトの余白をリセット                                   */
  padding: 0;
  display: flex;                      /* 必要に応じて、ボタンを横並びにするためのレイアウト設定（例：Flexbox）*/
  flex-wrap: wrap;                    /* ボタンが多すぎる場合に折り返す                                       */
  gap: 10px;                          /* ボタン間の間隔                                                       */
  justify-content: flex-end;          /* mod-right クラスの右寄せを継承                                       */
}

/* フレックスリスト（横並び・折り返しあり：項目の間隔はやや狭め） */
.c-list-flex {
  list-style: none;                   /* リストマーカー（点や数字など）を非表示にする                         */
  margin: 0;                          /* ul要素のデフォルトの余白をリセット                                   */
  margin-top: -0.03em;                 /* li要素の上下マージンを設定しなおす                                   */
  margin-bottom: -0.03em;
  padding: 0;
  display: flex;                      /* 横並びの要件（Flexbox）                                              */
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;          /* mod-right クラスの右寄せを継承                                       */
}
.c-list-flex > li {
  margin-top: 0.03em;                  /* 各項目にマージンを適用し、縦の間隔を調整                             */
  margin-bottom: 0.03em;
}
.c-list-flex.mod-left {
  justify-content: flex-start;        /* ul内のテキストやインライン要素を左寄せ                               */
}
.c-list-flex.mod-center {
  justify-content: center;            /* ul内のテキストやインライン要素を中央揃え                             */
}

/* スタックリスト（縦積み：項目の間隔は狭め） */
.c-list-stacked {
  list-style: none;                   /* リストマーカー（点や数字など）を非表示にする                         */
  margin: 0;                          /* ul要素のデフォルトの余白をリセット（通常、左側に padding がある）    */
  padding: 0;
  /* display: flex; は使用しない（liがデフォルトのブロック要素として縦に並ぶ）*/
}
.c-list-stacked > li {
  margin-top: 0.2em;                  /* 各項目にマージンを適用し、縦の間隔を調整                             */
  margin-bottom: 0.2em;
}
.c-list-stacked > li:first-child {
  margin-top: 0;                      /* 最初の項目の余分なマージンを削除                                     */
}
.c-list-stacked > li:last-child {
  margin-bottom: 0;                   /* 最後の項目の余分なマージンを削除                                     */
}
.c-list-stacked.mod-center {
  text-align: center;                 /* ul内のテキストやインライン要素を中央揃え                             */
}
.c-list-stacked.mod-right {
  text-align: right;                  /* ul内のテキストやインライン要素を右寄せ                               */
}

/* =========================================================
    パンくずリストの間隔調整
   ========================================================= */
/* mod-narrow がある箇所だけ上下の「余白」と「隙間」を微調整します */
.c-breadcrumbs_inner.mod-narrow {
    /* --- レイアウトの安定化 --- */
    display: block;             /* olタグをブロック要素として確実に扱う */
    list-style: none;           /* 連番（1. 2. ...）が表示されないようにする */

    /* --- 行間の調整（既存の意図） --- */
    line-height: 1.4;           /* 複数行になった際、行間が広がりすぎないよう狭めに設定 */

    /* --- 上下余白の復活（今回の修正） --- */
    /* style.cssのリセット記述により消えていた余白をpaddingで再設定します */
    padding-top: 0.2em;         /* 上の余白（半文字分）*/
    padding-bottom: 0.2em;      /* 下の余白（半文字分） */

    /* padding-left: 0; */      /* ※もし左端がインデントされてしまう）場合は有効にしてください */
}

/* リスト項目（li）が横並びや改行時に自然に配置されるための念のための補正 */
.c-breadcrumbs_inner.mod-narrow li {
    display: inline;            /* 行内要素として並べる（改行時はテキストと同様に折り返る） */
}
/* 一番上のリストだけ、上側の余白をとる */
.c-breadcrumbs_inner.mod-narrow:first-child {
    padding-top: 0.4em;
}

/* 一番下のリストだけ、下側の余白をとる */
.c-breadcrumbs_inner.mod-narrow:last-child {
    padding-bottom: 0.4em;
}

/*
 * =========================================================
 * インデント関連
 * =========================================================
*/
/* ---------------------------------------------------------
 * 全体インデント (.indent)
 * ブロック全体（マージン）を右にずらします。
 * 用途：お問い合わせ先、注意書きブロックなど
 * --------------------------------------------------------- */
.indent,
.indent1,
table.indent1 {
  margin-left: 1em;                     /*  1 文字分  */
}

.indent2,
table.indent2 {
  margin-left: 2em;                     /*  2 文字分  */
}

.indent3,
table.indent3 {
  margin-left: 3em;                     /*  3 文字分  */
}

/* ---------------------------------------------------------
 * ぶら下げインデント (.hanging-indent)
 * 2行目以降を1文字分右にずらし、行頭（1行目）を突き出させます。
 * 用途：条文（第xx条）、項番号（２...）などの体裁合わせ
 * --------------------------------------------------------- */
.hanging-indent {
  padding-left: 1em;                    /* 全体を右に 1 文字分インデント */
  text-indent: -1em;                    /* 最初の行だけ、 1 文字分左に戻して、1 字下げ表示にする */
}

/*
 * =========================================================
 * 不要な見出しタグを使わないようにするための対策
 * =========================================================
 */
/* ---------------------------------------------------------
    Level 1 (p, div用)
   --------------------------------------------------------- */
p.c-titleLv1,
div.c-titleLv1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5; /* hタグの初期値に合わせる */
  padding-left: 21px;
  position: relative;
  margin-bottom: 1.75rem;
}

/* 前の要素に続く場合の上の余白 */
* + p.c-titleLv1,
* + div.c-titleLv1 {
  margin-top: 1.75em;
}

/* 左側の青い縦バー */
p.c-titleLv1:before,
div.c-titleLv1:before {
  content: "";
  display: block;
  width: 6px;
  height: 83.3333333333%;
  background-color: #adbed8;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}


/* ---------------------------------------------------------
    Level 2 (p, div用)
   --------------------------------------------------------- */
p.c-titleLv2,
div.c-titleLv2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5; /* hタグの初期値に合わせる */
  color: #203665;
  padding-left: 21px;
  position: relative;
  margin-bottom: 1rem;
}

/* 前の要素に続く場合の上の余白 */
* + p.c-titleLv2,
* + div.c-titleLv2 {
  margin-top: 1.75em;
}

/* 左側の四角い装飾 */
p.c-titleLv2:before,
div.c-titleLv2:before {
  content: "";
  display: block;
  border-color: #adbed8 #2b4887 #2b4887 #adbed8;
  border-style: solid;
  border-width: 6px;
  position: absolute;
  left: 0;
  top: 10px;
}


/* ---------------------------------------------------------
    Level 3 (p, div用)
   --------------------------------------------------------- */
p.c-titleLv3,
div.c-titleLv3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5; /* hタグの初期値に合わせる */
  color: #203665;
  margin-bottom: 1rem;
}

/* 前の要素に続く場合の上の余白 */
* + p.c-titleLv3,
* + div.c-titleLv3 {
  margin-top: 1.75em;
}

/*
 * =========================================================
 * テキスト装飾関連
 * =========================================================
 */
/* -- 少し縮小: 80%  ----------------------------------------------------------------- */

.c-small {
    font-size: 0.8em;                 /* フォントサイズ縮小（親要素の 80% に縮小）                            */
}
/* -- 少し拡大: 120%  ---------------------------------------------------------------- */
.c-large {
    font-size: 1.2em;                 /* フォントサイズ拡大（親要素の 120% に拡大）                           */
}
/* -- 斜体・イタリック体（高品位な斜体を優先し、フォールバックも考慮）---------------- */
.c-fs-italic {
    font-style: oblique;              /* イタリック体データがない場合の斜体代替処理（フォールバック）         */
    font-style: italic;               /* イタリック体（デザイナーによる専用デザインを優先）                   */
}


/* -- 強調（emphasis): 斜体とセミボールド ------------------------------------------- */
.c-em {
    font-style: italic;               /* イタリック体（obliqueから修正し、高品質な斜体を優先）                */
    font-weight: 600;                 /* ちょっと太め Semi Bold (ウェイト番号 = 600) に設定                   */
}

/* -- 白抜き文字（背景色が薄い場合でも読みやすいよう、黒縁取りを適用） -------------- */
/* --   text-strokeとtext-shadowを併用し、ブラウザ互換性を確保  --------------------- */
.c-white {
    color: #fff;                      /* 文字色を白に設定（白抜き文字）                                       */
    -webkit-text-stroke: 0.8px #000;  /* WebKit系 (Chrome, Safari, Edge) 向けの黒縁取り                       */
  /* text-stroke: 0.8px #000; */        /* 標準仕様の text-stroke (将来的な互換性のため)                        */
    /* text-shadowによる互換処理をカンマ区切りで統一 */
    text-shadow: 0.8px 0 #000, -0.8px 0 #000, 0 0.8px #000, 0 -0.8px #000;
}

/* -- 大きめの上付き文字 (注意書きなど) --------------------------------------------- */
.c-caution {
    font-size: 0.8em;                 /* 親要素のフォントサイズの 80% に縮小                                  */
    vertical-align: top;              /* 行のベースラインではなく、上端に近づけて表示                         */
}


/*
 * =========================================================
 * フォントの太さ (font-weight) クラス群
 * shorthands.cssに重複しないクラスのみを定義
 * 接頭辞: c-wt- (Class Weight)
 * =========================================================
 */

.c-wt-exlight {
    font-weight: 200;                 /*   eX-LIGHT (200) - Extra Light【非常に細い】                         */
}
.c-wt-light {
    font-weight: 300;                 /*   LIGHT (300) - Light 【細い】                                       */
}
.c-wt-medium {
    font-weight: 500;                 /*   MEDIUM (500) - Medium 【中間】                                     */
}
.c-wt-semi-bold {
    font-weight: 600;                 /*   SEMI-BOLD (600) - Demi Bold / Semi Bold 【やや太い】               */
}
.c-wt-exbold {
    font-weight: 800;                 /* eX-BOLD (800) - Extra Bold 【さらに太い】                            */
}


/*
 * =========================================================
 * 色関連
 * =========================================================
 */

/* -- アクセントカラー (Accent Colors) ------------------ */
.c-color-sunrise {
    color: #E3A575;                   /* 日の出  色     （アプリコットオレンジに近い）                        */
}
.c-color-orange {
    color: #FFB033;                   /* オレンジ色    （特定の色コード #f6aa00)                              */
}
.c-color-evergreen {
    color: #008058;                   /* 常盤色（緑がかった青色 特定の色コード #03af7a）                      */
}
.c-color-sky-blue {
    color: #4dc4ff;                   /* スカイブルー  （特定の色コード #4dc4ff）                             */
}

.c-color-blue {
    color: #005aff;                   /* 青色          （特定の色コード #005aff）                             */
}
.c-color-royal-blue {                 /* ロイヤルブルー（特定の色コード #3366ff）                             */
    color: #3366ff;
}
.c-color-purple {
    color: #990099;                   /* 紫色          （特定の色コード #990099）                             */
}
.c-color-darkred {
    color: #8E3C3A;                   /* 暗い赤        （特定の色コード #8E3C3A 創新センターの基本色）        */
}

/* -- 中間色 (Muted / Earth Tones) ---------------------- */
.c-color-light-red {
    color: #ff8082;                   /* 薄い赤色      （特定の色コード #ff8082）                             */
}
.c-color-chestnut {
    color: #804000;                   /* 栗色（赤みがかった暗いオレンジ系 特定の色コード #804000;）           */
}


/*
 * =========================================================
 * ボーダー関連
 * =========================================================
 */

.c-bd-bt {
    border-bottom: solid 1px;         /* 下線（border-bottom）: 実線 1px                                      */
}
.c-bd-s1-silver {
    border: solid 1px #c0c0c0;        /* ボックス: 実線 1px 銀色 (上下左右すべて)                             */
}

.c-box-s6-white {
    border: solid 6px #fff;           /* ボックス: 実線 6px 白 (上下左右すべて)                               */
}
.c-box-s6-pink {
    border: solid 6px #ffc0cb;        /* ボックス: 実線 6px ピンク (上下左右すべて)                           */
}
.c-box-s6-limegreen {
    border: solid 6px #32cd32;        /* ボックス: 実線 6px ライムグリーン (上下左右すべて)                   */
}

/* -- 人文研（日）サイトの c-box（差分上書き） -*/
/*
.c-box-irh {
    border: 1px solid #adbed8
}
*/
/* -- 創新センターサイトの c-box（差分上書き） -*/
.c-box-ciih {
    border: 1px solid #e5c4c4
}
/* -- 人文研（英）サイトの c-btn（差分上書き） -*/
.c-box-en {
    border: 1px solid #c3d5d9
}

/*
 * =========================================================
 * ボタン関連
 * =========================================================
 */
/* -- 人文研（日）サイト より少し明るい色のボタンを追加  ------------- */
.c-btn-light {
    background-color: #2b4887;      /* l-globalFooter と同色 */
}
/* -- 人文研（日）サイトの c-btn（差分上書き） -*/
/*
  .c-btn-irh {
    background-color: #1a2b51
  }
*/

/* -- 創新センターサイトの c-btn（差分上書き） -*/
.c-btn-ciih {
  background-color: #5b2625
}

/* -- 人文研（英）サイトの c-btn（差分上書き） -*/
.c-btn-ciih {
  background-color: #066972
}


/*
 * =========================================================
 * バナー関連
 * =========================================================
 */
/* -- 人文研（日）サイトの c-bnr -*/
/*
  .c-bnr-irh {
    color: #2b4887;
    background-color: #adbed8;
    border-left: 2px solid #2b4887
  }
*/

/* -- 創新センターサイトの c-bnr -*/
.c-bnr-ciih {
  color: #8e3c3a;
  background-color: #e5c4c4;
  border-left: 2px solid #8e3c3a
}

/* -- 人文研（英）サイトの c-bnr -*/
.c-bnr-en {
  color: #138080;
  background-color: #c3d5d9;
  border-left: 2px solid #138080
}


/*
 * =========================================================
 * スクリーンリーダー用
 * =========================================================
 */
/* 指定したタグは視覚的に非表示になるが、スクリーンリーダーからは読み上げられるようにする */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
