@charset "utf-8";
/* ==========================================================================
   base.css
 *
   基本のフォント、見出し
   背景色変更/色関係
   文字サイズ変更のベース
   Accessibility
   タグの基本スタイル
   基本のレイアウト
   Header,Footer,Navi系（Gナビ".global-nav", .side-navi）※その中の要素も　※要整理
   Utilityスタイル
   ========================================================================== */
/**
 * import
----------------------------------------------------------------- */
@import url("/jp/ryodo/tenjikan/js/cookieconsent/cookieconsent.css");
/**
 * 印刷用はこちら
----------------------------------------------------------------- */
@import "print.css"print;
/**
 * 基本のフォント
 *
 * ※基本は"BIZ UDPMincho"、一部（多く）の見出し等は"BIZ UDPGothic" 
 *（weightは400と700しかなく、明朝の太字はすごく太いので）
 * ※外国語はそれぞれに設定すべきだが、一旦"Noto Serif"で。（今のところ.c-language-select ul li　だけ）
 *
----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=BIZ+UDPMincho:wght@400;700&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
html {
  font-size: 62.5%;
  font-family: "BIZ UDPMincho", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  scroll-behavior: smooth;
}
html.txt-size__larger {
  font-size: 76%;
}
body {
  color: var(--txt-color__black);
  background: var(--bg-color__white);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; /* Safari */
  font-size: 1.6rem;
}
.font-regular {
  font-family: "BIZ UDPMincho", serif;
  font-weight: 400;
  font-style: normal;
}
.font-bold {
  font-weight: 700 !important;
}
.font-mincho {
  font-family: "BIZ UDPMincho", serif !important;
}
.font-gothic {
  font-family: "BIZ UDPGothic", sans-serif !important;
}
/**
 * 見出し
 *
----------------------------------------------------------------- */
.h1, h2, h3, h4, h5, h6 {
  font-family: "BIZ UDPGothic", sans-serif;
  margin-bottom: 0.8em;
  line-height: 1.3;
  line-height: 1.5; /*「北方領土・竹島・尖閣諸島（相手国・地域の主張などのQ＆A）」で上げたが、大丈夫？*/
}
.h-pagetitle {
  font-family: "BIZ UDPMincho", serif;
  font-size: 4.8rem;
  font-weight: 700;
  display: table;
  margin: 2.8em auto 3.0em;
  position: relative;
  text-align: center;
}
.h-pagetitle::after {
  display: inline-block;
  position: absolute;
  content: '';
  bottom: -1.0em; /*下線の上下の位置*/
  left: 50%;
  width: 5em;
  height: 0.125em;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置の調整*/
  background: linear-gradient(90deg, #E1CEA3 0% 31%, rgba(0, 0, 0, 0) 31% 33%, #90CBA7 34% 65%, rgba(0, 0, 0, 0) 66% 68%, #BEBBCC 69% 100%); /*下線の色*/
}
/*----*/
.h-3 {
  font-size: 2.8rem;
  border-left: #4E4D49 15px solid;
  border-bottom: #D4D4D4 2px solid;
  padding: 0.2em 0 0.3em 0.6em;
  margin-top: 3.2em;
  margin-bottom: 1.0em;
}
/*中にボタン（<a class="btn-01>）が入る場合*/
.h-3--with-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h-3--with-btn .btn-01 {
  margin-right: 0;
  margin-left: 2em;
}
/*----*/
.h-4 {
  font-size: 2.6rem;
  border-left: #B2B2B2 12px solid;
  padding: 0.3em 0 0.3em 0.8em;
  margin-top: 1.8em; /*本文中ではもっと上げたい感じもします*/
  margin-bottom: 1.0em;
}
/*----*/
.h-5 {
  font-size: 2.4rem;
  border-left: #B2B2B2 5px solid;
  padding: 0.2em 0 0.2em 0.6em;
  margin-top: 1.6em;
  margin-bottom: 1.0em;
}
/*----*/
.h-6 {
  font-size: 2.0rem;
  padding: 0.5em 0 0.5em 0.6em;
  margin-top: 1.6em;
  margin-bottom: 1.0em;
  display: flex;
  align-items: center;
  padding: 0;
  margin-top: 1.6em;
  margin-bottom: 1.0em;
}
.h-6::before {
  content: "";
  height: 0.45em;
  width: 0.45em;
  display: block;
  background: #B2B2B2;
  margin-right: 0.5em;
}
/*----*/
.h-7 {
  font-size: 2.0rem;
  margin-top: 1.6em;
  margin-bottom: 1.0em;
}
/*----アイコン画像などを入れる場合*/
.h-with-image {
  display: flex;
  align-items: center; /* 上下中央に揃える */
  gap: 0.5em;           /* 画像とテキストの間隔（お好みで） */
}
/*----*/
.h-panel2 {
  font-size: 3.2rem;
  font-family: "BIZ UDPMincho", serif;
  color: #005C82;
  color: var(--color__hoppou);
  text-align: center;
  margin-bottom: 1.6em;
  margin-top: 5em;
}
.panels--takeshima .h-panel2 {
  color: var(--color__takeshima);
}
.panels--senkaku .h-panel2 {
  color: var(--color__senkaku);
}
.panels--seifu .h-panel2 {
  color: var(--color__seifu);
}
.h-panel2:first-child {
  margin-top: 0;
}
/*----*/
.h-style-a {
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 2.6rem;
  text-align: center;
  border-top: #B5B5B5 2px solid;
  border-bottom: #B5B5B5 2px solid;
  padding: 0.7em 1.1em;
  display: table;
  margin: auto;
  margin-bottom: 1.5em;
}
/*----*/
.h-style-b {
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 3.0rem;
  margin: auto;
  margin-top: 0.5em;
  margin-bottom: 2.0em;
  display: flex;
  align-items: center; /* 縦位置の調整 */
  justify-content: center; /* 横位置の調整 */
}
.h-style-b::before, .h-style-b::after {
  content: '';
  flex-grow: 0.05; /* 横棒の長さを調節 */
  height: 0.26em;
  background: #828079;
}
.h-style-b::before {
  margin-right: 0.9em;
}
.h-style-b::after {
  margin-left: 0.8em;
}
/*----*/
.h--sub {
  font-size: 85%;
  margin-bottom: 0.3em;
  display: block
}
.h--no-style {
  border: none !important;
  padding: 0 !important;
}
.h--no-style::before, .h--no-style::after {
  content: none !important;
}
/*見出しレスポンシブ　サイズ調整*/
@media screen and (max-width: 1500px) {
  .h-pagetitle {
    font-size: 4.0rem;
  }
  .h-3 {
    font-size: 2.6rem;
  }
  .h-panel2 {
    font-size: 3.0rem;
  }
}
@media screen and (max-width: 760px) {
  .h-pagetitle {
    font-size: 2.6rem;
  }
  .h-3 {
    font-size: 2.2rem;
    border: none;
    padding: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3.3em;
    display: block;
    text-align: center;
    position: relative;
  }
  .h-3::after {
    display: inline-block;
    position: absolute;
    content: '';
    bottom: -1.2em; /*下線の上下の位置*/
    left: 50%;
    width: 3.4em; /*下線の幅*/
    height: 0.22em; /*下線の太さ*/
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%); /*位置の調整*/
    background-color: #666666; /*下線の色*/
  }
  .h-4 {
    font-size: 2.0rem;
  }
  .h-5 {
    font-size: 1.9rem;
  }
  .h-6 {
    font-size: 1.8rem;
  }
  .h-7 {
    font-size: 1.6rem;
  }
  .h-style-a {
    font-size: 2.0rem;
  }
  .h-style-b {
    font-size: 2.2rem;
  }
  .h-panel2 {
    font-size: 2.2rem;
  }
}
/**
 * 色関係　北方領土・尖閣・竹島の基本カラー
 *ex.
  color: var(--color__hoppou);
----------------------------------------------------------------- */ :root {
  --bg-color__gray-allround: rgba(200, 200, 200, 0.3); /*万能グレー　*/
}
/**
 * 北方領土・尖閣・竹島の基本カラー
 */ :root {
  --color__hoppou: #005C82;
  --color__takeshima: #007569;
  --color__senkaku: #4A4F8B;
  --color__seifu: #546D7C;
}
body.base-color__black, body.base-color__blue {
  --color__hoppou: #fff;
  --color__takeshima: #fff;
  --color__senkaku: #fff;
  --color__seifu: #fff;
}
body.base-color__yellow {
  --color__hoppou: #000;
  --color__takeshima: #000;
  --color__senkaku: #000;
  --color__seifu: #000;
}
/*
例
  
  color: var(--color__hoppou);
*/
.color__hoppou {
  color: #005C82 !important;
  border-color: #005C82 !important;
}
.bgcolor__hoppou {
  background: #F1F8FC !important;
  border-color: #F1F8FC !important;
}
.color__takeshima {
  color: #007569 !important;
  border-color: #007569 !important;
}
.bgcolor__takeshima {
  background: #e9f5f5 !important;
  border-color: #e9f5f5 !important;
}
.color__senkaku {
  color: #4A4F8B !important;
  border-color: #4A4F8B !important;
}
.bgcolor__senkaku {
  background: #e8e8f1 !important;
  border-color: #e8e8f1 !important;
}
.bgcolor__seifu {
  background: var(--bg-color__seifu) !important;
  border-color: var(--bg-color__seifu) !important;
}
.color__korea {
  color: #3A62AD !important;
  border-color: #3A62AD !important;
}
.bgcolor__korea {
  background: #dddff0 !important;
  border-color: #dddff0 !important;
}
.color__china {
  color: #D83263 !important;
  border-color: #D83263 !important;
}
.bgcolor__china {
  background: #f7dfe0 !important;
  border-color: #f7dfe0 !important;
}
.bgcolor--dark {
  filter: brightness(90%) saturate(350%); /*中の要素にも適応されるので要注意*/
}
.color__seifu {
  --color__seifu: #546D7C;
  --color__seifu-bg: #EEF2F4;
  color: var(--color__seifu);
  background: var(--color__seifu-bg);
}
.color__hoppou.btn-01, .bgcolor__takeshima.btn-01, .color__senkaku.btn-01 {
  /*background-color: #fff; とりあえずボタンは背景白で →　「主張」のボタンの色変更で不都合*/
}
body.base-color__black .color__takeshima, body.base-color__blue .color__takeshima, body.base-color__black .color__korea, body.base-color__blue .color__korea {
  color: #fff !important;
}
body.base-color__black .color__hoppou, body.base-color__blue .color__hoppou, body.base-color__black .color__senkaku, body.base-color__blue .color__senkaku, body.base-color__blue .color__korea, body.base-color__blue .color__china, body.base-color__black .color__korea, body.base-color__black .color__china {
  color: #fff !important;
}
body.base-color__yellow .color__hoppou, body.base-color__yellow .color__takeshima, body.base-color__yellow .color__senkaku, body.base-color__yellow .color__korea, body.base-color__yellow .color__china {
  color: #000 !important;
}
body.base-color__black .bgcolor__seifu, body.base-color__black .bgcolor__hoppou, body.base-color__black .bgcolor__takeshima, body.base-color__black .bgcolor__senkaku, body.base-color__black .bgcolor__china, body.base-color__black .bgcolor__korea {
  background-color: #000 !important;
  border-color: #000 !important;
}
body.base-color__blue .bgcolor__seifu, body.base-color__blue .bgcolor__hoppou, body.base-color__blue .bgcolor__takeshima, body.base-color__blue .bgcolor__senkaku, body.base-color__blue .bgcolor__china, body.base-color__blue .bgcolor__korea {
  background-color: blue !important;
  border-color: blue !important;
}
body.base-color__yellow .bgcolor__seifu, ody.base-color__yellow .bgcolor__hoppou, body.base-color__yellow .bgcolor__takeshima, body.base-color__yellow .bgcolor__senkaku, body.base-color__yellow .bgcolor__china, body.base-color__yellow .bgcolor__korea {
  background-color: yellow !important;
  border-color: yellow !important;
}
/**
 * 背景色変更
 *ex.
  color: var(--txt-color__black);
  color: var(--color__gray);
  background: var(--bg-color__white);
----------------------------------------------------------------- */
body.base-color__white {
  --txt-color__black: #000;
  --txt-color__white: #fff;
  --bg-color__white: #fff;
  --bg-color__light-gray: rgba(0, 0, 0, 0.08);
  --bg-color__light-gray2: #f3f3f3; /*　.layer-2nd　.c-calendar__day　*/
  --bg-color__light-gray3: #D9D7D4; /*　.c-calendar__off　*/
  --color__gray: #707070; /*　.footer .layer-1st > .layer-1st-title　*/
  --bg-color__seifu: #EEF2F4;
  transition: 0.3s;
}
body.base-color__black {
  --txt-color__black: #fff;
  --txt-color__white: black;
  --bg-color__white: black;
  --bg-color__light-gray: rgba(200, 200, 200, 0.2); /*.c-boxの枠線*/
  --bg-color__light-gray2: #222;
  --bg-color__light-gray3: #888888;
  --color__gray: #b6b6b6; /*　.footer .layer-1st > .layer-1st-title　*/
  --bg-color__seifu: #222;
  transition: 0.3s;
}
body.base-color__yellow {
  --txt-color__black: #000;
  --txt-color__white: #fff;
  --bg-color__white: yellow;
  --bg-color__light-gray: rgba(0, 0, 0, 0.08);
  --bg-color__light-gray2: yellow;
  --bg-color__light-gray3: #D9D7D4;
  --color__gray: #000; /*　.footer .layer-1st > .layer-1st-title　*/
  --bg-color__seifu: #e5e600;
  transition: 0.3s;
}
body.base-color__blue {
  --txt-color__black: #fff;
  --txt-color__white: #fff;
  --bg-color__white: blue;
  --bg-color__light-gray: rgba(200, 200, 200, 0.5);
  --bg-color__light-gray2: blue;
  --bg-color__light-gray3: #888888;
  --color__gray: #fff; /*　.footer .layer-1st > .layer-1st-title　*/
  --bg-color__seifu: #0000d4;
  transition: 0.3s;
}
body.base-color__black a, body.base-color__blue a, body.base-color__black button, body.base-color__blue button {
  color: #fff;
}
body.base-color__yellow a, body.base-color__color__yellow button {
  color: #000;
}
body.base-color__black .logo-01__typo, body.base-color__blue .logo-01__typo {
  filter: brightness(1630%);
}
/**
 * Accessibility
 * フォーカスの可視化など、やるべきことは多い
 *
----------------------------------------------------------------- */
/**
 * タグの基本スタイル
 *
----------------------------------------------------------------- */
* {
  max-width: 100%;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
ol, ul {
  list-style: none;
}
p, ul, dl {
  line-height: 1.5;
}
p {
  line-height: 1.8; /*「北方領土・竹島・尖閣諸島（相手国・地域の主張などのQ＆A）」で上げたが、大丈夫？*/
}
p:not(:last-child) {
  margin-bottom: 0.8em;
}
#wrapper {
  overflow: hidden;
}
a {
  color: #095FAB;
}
/**
 * 基本のレイアウト
 *
----------------------------------------------------------------- */
.l-inner {
  width: 1200px;
  margin: 0 auto;
  display: block;
}
.contents {
  /*padding-top: 281px; ※固定ヘッダー分高さをずらす＞＞JSでやっています*/
}
/**
 * Footer
 *
----------------------------------------------------------------- */
.footer a[target="_blank"]:after {
  content: "";
  height: 1em;
  width: 1em;
  background: url("../img/common/icon-link-blank.svg") no-repeat center center;
  display: inline-block;
  margin-left: 0.2em;
}
.footer-nav {
  padding: 4em 1em 2em;
}
.footer-nav.l-inner {
  width: 1200px;
  width: 1440px; /*改行しないように①広げる？*/
}
.footer-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--txt-color__black);
}
.footer-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.footer-nav .footer-nav__list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 2.2rem;
  gap: 1.5em;
}
.footer .footer-nav__list__item {
  width: auto; /*改行しないように②幅指定は揃えない？*/
  width: calc((100% - 3em) / 3);
}
.footer .footer-nav__list__item .layer-1st:nth-child(2) {
  margin-top: 3.5em;
}
/*
.footer .layer-1st {
  width: calc(25% - 1.8em);
}*/
.footer .layer-1st > .layer-1st-title {
  border-bottom: var(--color__gray) 1px solid;
  display: block;
  padding-bottom: 0.5em;
  margin-bottom: 1.1em;
}
.footer-nav .layer-2nd {
  font-size: 1.8rem;
}
.footer-nav .layer-2nd__item {
  font-size: 1.8rem;
  background: url("../img/common/icon-link_black_01.svg") no-repeat left 0.25em / 0.98em;
  padding: 0 1.6em;
  margin-bottom: 1.4em;
  border-bottom: none;
}
/**
 * 2段目　footer-sub-nav
 */
.footer-sub-nav {
  border-top: #BEBEBE 1px solid;
  padding-top: 2em;
  /*margin-top: 1em; スマホ時に隙間が出ます*/
}
.footer-sub-nav a {
  text-decoration: none;
  color: var(--txt-color__black);
}
.footer-sub-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 1em;
}
.footer-sub-nav__list li {
  border-right: #393939 1px solid;
  border-left: #393939 1px solid;
  padding: 0 1em;
  margin-left: -1px;
  margin-bottom: 0.6em;
}
/*.footer-sub-nav__list li {
  margin-right: 1em;
}
.footer-sub-nav__list li:not(:last-child)::after {
  content: "｜";
  margin-left: 1em;
}*/
/**
 * 3段目　.p-footer-data
 */
.p-footer-data {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5em;
  padding: 5em 2em 0;
}
.footer-data__logo {
  width: 580px;
}
.footer-data__logo .logo-01__typo {
  padding: 4.3% 0 0 5.5%;
}
.p-copyright {
  text-align: center;
  font-size: 1.6rem;
  padding: 2em;
}
/**
 * pagetop
 */
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 1px #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.pagetop__arrow {
  height: 12px;
  width: 12px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: translateY(20%) rotate(-45deg);
}
/**
 * Utility
 *
----------------------------------------------------------------- */
.u-mt-0 {
  margin-top: 0 !important;
}
.u-mt-1em {
  margin-top: 1em !important;
}
.u-mt-15em {
  margin-top: 1.5em !important;
}
.u-mt-2em {
  margin-top: 2em !important;
}
.u-mt-3em {
  margin-top: 3em !important;
}
.u-mt-4em {
  margin-top: 4em !important;
}
.u-mt-5em {
  margin-top: 5em !important;
}
.u-mb-0 {
  margin-bottom: 0 !important;
}
.u-mb-1em {
  margin-bottom: 1em !important;
}
.u-mb-15em {
  margin-bottom: 1.5em !important;
}
.u-mb-2em {
  margin-bottom: 2em !important;
}
.u-mb-3em {
  margin-bottom: 3em !important;
}
.u-mb-4em {
  margin-bottom: 4em !important;
}
.u-mb-5em {
  margin-bottom: 5em !important;
}
.u-padding-05em {
  padding: 0.5em !important;
}
.u-padding-0 {
  padding: 0 !important;
}
.u-padding-1em {
  padding: 1em !important;
}
.u-padding-2em {
  padding: 2em !important;
}
.u-padding-3em {
  padding: 3em !important;
}
.u-padding-4em {
  padding: 3em !important;
}
.u-padding-4em {
  padding: 5em !important;
}
.u-pt-0 {
  padding-top: 0 !important;
}
.u-pt-1em {
  padding-top: 1em !important;
}
.u-pt-2em {
  padding-top: 2em !important;
}
.u-pt-3em {
  padding-top: 3em !important;
}
.u-pt-4em {
  padding-top: 4em !important;
}
.u-pt-5em {
  padding-top: 5em !important;
}
.u-pb-0 {
  padding-bottom: 0 !important;
}
.u-pb-1em {
  padding-bottom: 1em !important;
}
.u-pb-2em {
  padding-bottom: 2em !important;
}
.u-pb-3em {
  padding-bottom: 3em !important;
}
.u-pb-4em {
  padding-bottom: 4em !important;
}
.u-pb-5em {
  padding-bottom: 5em !important;
}
.u-align-center {
  text-align: center !important;
}
.u-align-center--block {
  display: block !important;
  margin-right: auto !important;
  margin-left: auto !important;
}
.u-align-left {
  text-align: left !important;
}
.u-align-right {
  text-align: right !important;
}
.u-align-middle {
  vertical-align: middle !important;
  display: inline-flex;
  align-items: center;
}
.u-no-wrap {
  display: inline-block !important;
}
.u-underline {
  border-bottom: #B2B2B2 1px solid !important;
}
.u-underline--red {
  border-color: #D7001D !important;
  border-width: 2px !important;
}
.u-underline--dot {
  border-bottom: #B2B2B2 1px dotted!important;
}
.u-underline2 {
  text-decoration: underline !important;
}
.u-overline {
  border-top: #B2B2B2 1px solid !important;
}
.u-overline--dot {
  border-top: #B2B2B2 1px dotted!important;
}
.u-txtsize-l {
  font-size: 120% !important;
}
.u-txtsize-2l {
  font-size: 134% !important;
}
.u-txtsize-3l {
  font-size: 190% !important;
}
.u-txtsize-s {
  font-size: 85% !important;
}
.u-txtsize-2s {
  font-size: 70% !important;
}
.u-txtsize-3s {
  font-size: 56% !important;
}
.u-lineheight-high, .u-lineheight-high * {
  line-height: 2 !important;
}
.u-lineheight-15 {
  line-height: 1.5 !important;
}
.u-lineheight-1 {
  line-height: 1 !important;
}
.u-bg-white {
  background: var(--bg-color__white) !important;
}
.u-bg-white {
  background: var(--bg-color__white) !important;
}
.u-no-indent {
  text-indent: 0 !important;
}
.u-color__036EB8 {
  color: #036EB8 !important;
}
.u-color__CD5D00 {
  color: #CD5D00 !important;
}
.u-color__red {
  color: #C30D23 !important;
}
.u-color__black {
  color: #000 !important;
}
.u-roundedbg {
  border-radius: 3em;
  padding: 0.3em 1em;
  color: #fff;
  vertical-align: middle;
}
.base-color__black .u-color__red, .base-color__yellow .u-color__red, .base-color__blue .u-color__red {
  color: red !important;
}
/*PDFリンク pdfアイコンがつくだけですが、btn-01と同居するときなど注意*/
.u-pdflink::before {
  content: url("../img/common/icon_pdf.png");
  margin-right: 0.3em;
  vertical-align: top; /*newsリストでの位置を調整しましたが、他部分注意*/
}
.u-videolink::before {
  content: url("../img/common/icon_video.png");
  margin-right: 0.3em;
  vertical-align: top; /*n他部分注意*/
}
/**/
.w--10 {
  width: 10% !important;
}
.w--20 {
  width: 20% !important;
}
.w--25 {
  width: 25% !important;
}
.w--30 {
  width: 30% !important;
}
.w--35 {
  width: 35% !important;
}
.w--40 {
  width: 40% !important;
}
.w--50 {
  width: 50% !important;
}
.w--60 {
  width: 60% !important;
}
.w--70 {
  width: 70% !important;
}
.w--75 {
  width: 75% !important;
}
.w--80 {
  width: 80% !important;
}
.w--90 {
  width: 90% !important;
}
.w--100 {
  width: 100% !important;
}
/*@media screen and (max-width: 768px)
.c-mediaboxは930でタテ積みになるので、それに合わせた方が良さそう
*/
@media screen and (max-width: 930px) {
  .w--sp100 {
    width: 100% !important;
  }
  .w--sp80 {
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .w--sp70 {
    width: 70% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .w--sp60 {
    width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .w--sp40 {
    width: 40% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.u-clear {
  clear: both;
}
.u-caution {
  color: red !important;
}
.u-redline {
  text-decoration: underline !important;
  text-decoration-color: red !important; /* 下線の色を赤に指定 */
}
.u-no-border {
  border: none !important;
}
@media screen and (max-width: 768px) {
  .u-padding-2em {
    padding: 1em !important; /*要注意*/
  }
}
/**
 * Header
 *
----------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  background: var(--bg-color__white);
  box-shadow: 0px 18px 36px rgba(0, 0, 0, 0.08);
  min-height: 150px; /* JSでやってるが、「ズレ」対策に予想される最小の高さを設定 */
}
.header a {
  color: var(--txt-color__black);
  text-decoration: none;
}
.header a:hover, .header button:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.header__logo {
  width: 620px;
  max-width: calc(100% - 80px);
  float: left;
  padding: 6px 16px;
}
.header__logo a {
  display: flex;
  width: 100%;
}
.logo-01__graphic {
  width: 44%;
}
.logo-01__typo {
  width: 56%;
  padding: 1.2% 0 0 5.5%;
}
.header__1st-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 16px;
  border-bottom: #4A483D 1px solid;
}
.header__1st-row__btns-area {
  padding: 1em;
}
.header__1st-row__btns-area-upper {
  display: flex;
  justify-content: flex-end;
  gap: 1.4em;
  align-items: center;
  padding: 16px 16px 6px;
}
.header__1st-row__btns-area-lower {
  display: flex;
  justify-content: flex-end;
  /*gap: 2em;*/
  align-items: center;
  padding: 8px 16px 6px;
}
.header__2nd-row {
  background: #4A483D;
  clear: both;
}
.nav-for-visitor {
  background: #4A483D;
  text-align: right;
  padding: 0.7em 1.6em;
}
.nav-for-visitor li {
  display: inline-block;
}
.nav-for-visitor a {
  color: #FFFFFF !important;
  text-decoration: none;
  padding: 0.3em 1.8em;
  background: url("../img/common/icon-link_white_01.svg") no-repeat right center / 1.2em;
}
/* ボタン類
   ------------------------- */
/**
 * google検索　.c-google-seach
 */
.c-google-seach form {
  display: flex;
  justify-content: center;
}
.c-google-seach__txtbox {
  border: 1px #000 solid;
  border-radius: 1em 0 0 1em;
  padding: 0.4em;
  width: 12em;
  background: #fff;
}
.c-google-seach__btn {
  border: 1px #000 solid;
  border-radius: 0 1em 1em 0;
  padding: 0.4em;
  width: 4em;
  background: #4A483D;
  color: #fff;
}
/**
 * google検索　.c-google-seach 本番コード版
 */
.c-google-seach table.gsc-search-box {
  border-style: none;
  border-width: 0;
  border-spacing: 0 0;
  width: 100%;
  margin-bottom: 0;
}
/*.c-google-seach table.gsc-search-box tr {
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-google-seach table.gsc-search-box td {
  flex: 1;
}*/
.c-google-seach .gsc-control-cse {
  padding: 0;
  background: none;
  border: none;
}
.c-google-seach .gsc-input-box {
  border: 1px #000 solid !important;
  border-radius: 1em 0 0 1em !important;
  padding: 0 !important;
  background: #fff;
  width: 100%;
  width: 10em;
  height: 29px;
}
.c-google-seach .gsc-search-button-v2 {
  width: 3em;
  padding: 0;
  margin: 0;
  font-size: 1em;
  vertical-align: middle;
  border-radius: 0 1em 1em 0;
  border: 1px #4A483D solid;
  background-color: #4A483D;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
}
table.gsc-search-box td.gsc-input {
  padding-right: 0 !important;
}
/**
 * 言語選択　.c-language-select
 */
.c-language-select ul li {
  display: inline-block;
  /*仮フォント*/
  font-family: "Noto Serif", "BIZ UDPMincho", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth"100;
}
/*一時：close言語対応*/
.c-language-select ul li:nth-child(n+3) {
  opacity: 0.25;
}
/*//close言語対応*/
.c-language-select ul li:not(:last-child):after {
  content: "｜";
  display: inline-block;
  margin-left: 0.5em;
}
.c-language-select .crnt {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
/**
 * X(Twitter)アイコンボタン　.c-btn-x
 */
.c-btn-x {
  margin-bottom: 0 !important; /*youtubeアイコン追加に伴う*/
}
.c-btn-youtube {
  margin-left: -7px !important;
  margin-right: 4px !important;
}
.c-btn-x img {
  width: 42px;
}
.c-btn-youtube img {
  width: 42px;
}
/**
 * 文字サイズ変更ボタン　.sizechanger
 */
.sizechanger dl {
  display: flex;
  align-items: center;
  gap: 3px;
}
.sizechanger dl dt {
  display: flex;
  align-items: center;
  margin-right: 0.3em;
}
.sizechanger dl dt img {
  width: 34px;
}
.sizechanger__item {
  background: #fff;
  background: #3D3D3D;
  border: #707070 1px solid;
  border-radius: 0.4em;
  padding: 0.3em;
  display: inline-block;
  width: 3.4em;
  text-align: center;
  cursor: pointer;
}
.sizechanger__item button {
  color: #fff;
}
.sizechanger__item--larger {
  background: #fff;
}
.sizechanger__item--larger button {
  color: #000;
}
/**/
.txt-size__larger .sizechanger__item--normal {
  background: #fff;
}
.txt-size__larger .sizechanger__item--normal button {
  color: #000;
}
.txt-size__larger .sizechanger__item--larger {
  background: #3D3D3D;
}
.sizechanger__item--larger button {
  color: #000 !important;
}
.txt-size__larger .sizechanger__item--larger button {
  color: #fff !important;
}
.txt-size__larger .sizechanger__item--normal button {
  color: #000 !important;
}
/**
 * 背景色変更ボタン　.colorchanger
 */
.colorchanger dl {
  display: flex;
  align-items: center;
  gap: 3px;
}
.colorchanger dl dt {
  display: inline-block;
}
.colorchanger dl dd {
  border: #707070 1px solid;
  border-radius: 0.4em;
  padding: 0.3em;
  display: inline-block;
  width: 2em;
  text-align: center;
  cursor: pointer;
}
.colorchanger .colorchanger__white {
  background: white;
}
.colorchanger .colorchanger__black {
  background: black;
}
.colorchanger .colorchanger__blue {
  background: blue;
}
.colorchanger .colorchanger__yellow {
  background: yellow;
}
.colorchanger .colorchanger__white button, .colorchanger .colorchanger__yellow button {
  color: #000;
}
.colorchanger .colorchanger__black button, .colorchanger .colorchanger__blue button {
  color: #fff;
}
/**
 * リンクボタン　.c-link-btns
 */
.c-link-btns li {
  display: inline-block;
  margin-bottom: 0.3em;
}
.c-link-btns a {
  border: #707070 1px solid;
  border-radius: 2em;
  padding: 0.4em 0.6em;
  display: block;
  width: 9em;
  text-align: center;
  background: #4A483D;
  color: #FFFFFF !important;
  text-decoration: none;
}
.c-link-btns li:nth-child(2) a { /* .c-link-btns__link--access とかに変えること */
  background: #4A483D url("../img/common/icon-access.svg") no-repeat left 0.5em center / 1.2em;
  padding-left: 1em;
}
/**
 * グローバルナビ　.global-nav
 * ※side-navi、header、footer（PC/SPで分けてある）にあるが、整理したい
 * 　⇒別物にするなど再編した方がいいかも
----------------------------------------------------------------- */
.global-nav {
  position: relative;
  border-bottom: #eee 1px solid;
  z-index: 3;
}
.global-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--txt-color__black);
}
.global-nav .layer-1st button {
  padding: 1em;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.global-nav__wide .layer-1st button::after {
  content: "";
  display: inline-block;
  margin-left: 0.7em;
  background: #707070;
  height: calc(tan(60deg) * 0.5em / 2);
  width: 0.5em;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.global-nav__wide .layer-1st.active > button::after {
  background: #D91013;
  height: calc(tan(60deg) * 0.6em / 2);
}
.global-nav .active::after {
  content: "";
  display: block;
  margin-right: auto;
  margin-left: auto;
  background: var(--bg-color__white);
  height: calc(tan(60deg) * 0.9em / 2);
  margin-bottom: calc(tan(60deg) * -0.9em / 2); /*高さ分のマイナスマージン*/
  width: 0.9em;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin-top: -1px;
}
.global-nav .layer-2nd {
  display: none;
  font-size: 2.0rem;
  margin-top: 0px;
  transition: 0.3s;
  justify-content: center;
  width: 100%;
  background: var(--bg-color__light-gray2);
  padding: 16px;
  position: absolute;
  /*bottom: -79px;*/
  left: 0;
  right: 0;
  box-shadow: 0px 18px 36px rgba(0, 0, 0, 0.08) inset, 0px 18px 36px rgba(0, 0, 0, 0.12);
  border-bottom: #ddd 1px solid;
}
.active .layer-2nd {
  display: flex;
}
.layer-2nd__item {
  margin: 0 0.51em;
}
.header .layer-2nd__item a {
  padding: 0.3em 1.5em;
  background: url("../img/common/icon-link_black_01.svg") no-repeat right center / 1.0em;
}
/**
 * PC向け幅広グローバルナビは、<nav class="global-nav global-nav__wide">
 * ※現在ヘッダー内のナビのみ
 */
.global-nav__wide .global-nav__list {
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  font-size: 2.2rem;
}
.global-nav__wide .layer-2nd {
  flex-wrap: wrap;
}
/*ヘッダー内の、ってこと？*/
.sizechanger__wide, .colorchanger__wide {
  border-right: #7B7B7B 1px solid;
  padding-right: 1.2em;
  margin-right: 1.2em;
}
@media (max-width:1700px) {
  .global-nav__wide {
    /*display: none;*/
  }
  .global-nav__wide .global-nav__list {
    font-size: 1.8rem;
  }
  .global-nav__wide .layer-2nd {
    font-size: 1.7rem;
    padding: 16px;
  }
  .global-nav__wide .layer-2nd__item {
    margin: 0;
  }
}
@media (max-width:950px) {
  .global-nav__wide {
    display: none;
  }
}
@media (max-width:1500px) {
  .header__1st-row__btns-area-upper {
    display: none;
  }
  .header__1st-row__btns-area-lower {
    clear: both;
    justify-content: center;
    border-top: #7B7B7B 1px solid;
    border-bottom: #7B7B7B 1px solid;
    background: var(--bg-color__light-gray);
  }
  .colorchanger__wide {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
  }
}
/*色・サイズチェンジャーが収まらない場合*/
@media (max-width:548px) {
  .header__1st-row__btns-area-lower {
    flex-direction: column;
    padding: 0;
  }
  .sizechanger__wide {
    border-right: none;
    border-bottom: #7B7B7B 1px solid;
    padding-right: 0;
    margin-right: 0;
    width: 100%;
    justify-content: center;
    display: flex;
  }
  .sizechanger__wide, .colorchanger__wide {
    padding: 0.4em;
  }
}
/*文字サイズ大で、上段が収まらない場合*/
@media (max-width:1665px) {
  .txt-size__larger .header__logo {
    width: 440px;
    /*transition: 0.2s; これがあると*/
  }
}
/*ruby*/
ruby rt {
  font-family: "BIZ UDPGothic", sans-serif !important;
  padding-top: 0.6em;
  /*font-weight: normal !important;*/
  font-size: min(10px, 50%);
  display: none;
}