@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;
}


/** 崩れ対応　2026.02.05 */

/* Google側で .gsc-search-button が display:none!important される対策 */
.c-google-seach td.gsc-search-button {
  display: table-cell !important;
}

.c-google-seach button.gsc-search-button.gsc-search-button-v2 {
  display: inline-flex !important;
}

/* ついでにアイコンが「塗りなし」で消える環境もあるので保険 */
.c-google-seach .gsc-search-button svg path {
  fill: #fff !important;
}

/* 邪魔な48px箱を実質無力化（表示は残す） */
.c-google-seach .gsib_b {
  width: 0 !important;
  padding: 0 !important;
  height: 29px !important;
  /* あなたの入力欄高さに合わせる */
  overflow: hidden !important;
}

input.gsc-input {
  line-height: 1em;
}

.c-google-seach .gsib_b {
  height: 1em !important;
}

/* 検索窓内 */
.c-google-seach input.gsc-input {
  background-color: transparent !important;
  background-position: left 0.6em center !important;
  padding-left: 0.5em !important;
}

.c-google-seach .gsc-input-box {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 検索窓内の虫眼鏡を消す */
.gsib_a {
  background-image: none !important;
  padding-left: 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;
}