@charset "utf-8";

/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");

/*全体の設定
---------------------------------------------------------------------------*/
html,
body {
  height: 100%;
  font-size: 14px;
  /*基準となるフォントサイズ。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  html,
  body {
    font-size: 15px;
    /*基準となるフォントサイズ。*/
  }
}

/*画面幅900px以上の追加指定ここまで*/

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  background: #fff;
  /*背景色*/
  color: #292929;
  /*文字色*/
  line-height: 2;
  /*行間*/
  animation: opa1 0.3s 0.5s both;
  /*0.5秒の間だけ非表示にし、その後0.3秒かけてフェードイン表示。上部のメインメニューのデフォルトが一瞬見えてしまうのを回避する為の応急措置です。*/
}

/*リセット*/
figure {
  margin: 0;
  text-align: center;
}

dd {
  margin: 0;
}

nav {
  margin: 0;
  padding: 0;
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
  .page .main img {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    width: 100%;
  }
}
/*videoタグ*/
video {
  max-width: 100%;
}

/*iframeタグ*/
iframe {
  width: 100%;
}

/*他*/
input {
  font-size: 1rem;
}

section + section {
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  section + section {
    margin-top: 3rem;
  }
}
.ten {
  list-style-type: disc !important;
}
.main ol,
.main ul {
  padding-inline-start: 2em;
}
.main li {
  margin-bottom: 0.5em;
}
/*フェードイン
---------------------------------------------------------------------------*/
.inview.fadeup {
  opacity: 0;
  transition-duration: 1s;
  transform: translateY(10px);
}
.inview.fadeup.active {
  opacity: 1;
  transform: translateY(0px);
}
/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: #777;
  /*文字色*/
  transition: 0.3s;
  /*hoverまでにかける時間。0.3秒。*/
}
.page .main a,
.page .main span#popup-btn {
  cursor: pointer;
  text-decoration: underline;
  color: #015acf;
}
/*マウスオン時*/
a:hover {
  opacity: 0.8;
  /*色を80%だけ出す*/
  color: #49bbfe;
  /*文字色*/
}
a img {
  cursor: pointer;
}
/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
  display: flex;
  /*flexボックスを使う指定*/
  flex-direction: column;
  /*子要素を縦並びにする*/
  justify-content: space-between;
  /*並びかたの種類の指定*/
  max-width: 1800px;
  /*サイトの最大幅。これ以上広がらない。*/
  margin: 0 auto;
}

/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
/*コンテンツブロック*/
#contents {
  flex: 1;
  padding: 30px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/*トップページ以外のコンテンツブロック*/
body:not(.home) #contents {
  width: 100%;
  padding-top: 80px;
  /*上にとる余白。headerがfixedなので、ここの設定がないとheaderに重なってしまいます。*/
}

/*画面幅600px以下の追加指定*/
@media screen and (max-width: 600px) {
  /*コンテンツブロック*/
  #contents {
    padding: 10px;
    /*コンテンツ内の余白*/
  }

  /*トップページ以外のコンテンツブロック*/
  body:not(.home) #contents {
    padding-top: 40px;
    /*上にとる余白*/
  }
}

/*画面幅600px以下の追加指定ここまで*/
/*ヘッダー（ロゴや電話番号が入っている最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
  display: flex;
  /*ヘッダー内にあるボックスを横並びにする*/
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-left: 60px;
  padding-right: 60px;
}

/*ロゴ画像*/
#logo {
  margin: 0;
  padding: 0;
}

#logo img {
  display: block;
  width: 380px;
  /*ロゴ画像の幅*/
}

/*ヘッダーの中央バナー*/
header .banner {
  max-width: 500px;
  /*最大幅。これ以上広くならない。*/
  flex: 1;
  margin: 0 3vw;
  /*上下、左右へのバナーの外側へとるスペース*/
}

/*電話番号ブロック*/
address {
  font-style: normal;
  line-height: 1.2;
  /*行間を狭くする*/
  text-align: center;
  /*文字をセンタリング*/
  padding: 10px 0;
}

/*電話番号*/
address img {
  width: 240px;
}

address.margin-top-reset {
  margin-top: 0;
}

/*画面幅900px以下の追加指定*/
@media screen and (max-width: 900px) {
  /*ヘッダーブロック*/
  header {
    flex-direction: column;
    /*ヘッダー内にあるボックスを縦並びにする*/
  }

  /*ロゴ画像*/
  #logo img {
    margin-top: 20px;
    /*ロゴの上に空けるスペース*/
  }

  /*電話番号ブロック*/
  address {
    margin-top: 0;
    /*マージンのリセット*/
  }
}
@media screen and (max-width: 768px) {
  address {
    display: none;
  }
}

/*画面幅400px以下の追加指定*/
@media screen and (max-width: 400px) {
  /*ロゴ画像*/
  #logo img {
    width: 240px;
    /*ロゴ画像の幅*/
  }
}

/*追加指定ここまで*/

/*文字サイズ変更ボタン
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#f-size {
  background: #fff;
  /*背景色*/
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  /*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた状態の事。*/
  border-radius: 0px 0px 5px 5px;
  /*角丸のサイズ。左上、右上、右下、左下への順。*/
  display: flex;
  /*flexボックスを使う指定*/
  align-items: center;
  /*垂直揃えの指定。天地中央に配置されるように。*/
  padding: 10px 15px;
  /*ブロック内の余白。上下、左右へ。*/
  position: absolute;
  /*headerに対して絶対配置する為の指定*/
  right: 0px;
  /*右からの配置場所*/
  top: 0px;
  /*上からの配置場所*/
}

/*「文字サイズ」のテキスト*/
#f-size p {
  margin: 0;
  margin-right: 10px;
  /*右側に空けるスペース。ボタンとの間にとるスペースです。*/
  font-size: 17px;
  /*文字サイズ*/
}

/*「小」「大」を囲むブロック*/
#f-size ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /*flexボックスを使う指定*/
  align-items: center;
  /*垂直揃えの指定。天地中央に配置されるように。*/
}

/*「小」ボタン設定*/
#f-size ul li#f-small {
  margin-right: 5px;
  /*右側に空けるスペース。「大」との間の隙間です。*/
}

#f-size ul li#f-small::before {
  display: block;
  content: "小";
  /*「小」の文字を出力*/
  font-size: 17px;
  /*文字サイズ*/
  width: 40px;
  /*幅*/
  line-height: 40px;
  /*高さ*/
  text-align: center;
  /*内容をセンタリング*/
  background: #eee;
  /*背景色*/
}

/*「大」ボタン設定*/
#f-size ul li#f-large::before {
  display: block;
  content: "大";
  /*「大」の文字を出力*/
  font-size: 30px;
  /*文字サイズ*/
  width: 50px;
  /*幅*/
  line-height: 50px;
  /*高さ*/
  text-align: center;
  /*内容をセンタリング*/
  background: #eee;
  /*背景色*/
}

/*選択中の設定*/
#f-size li#f-large.current::before,
#f-size li#f-small.current::before {
  background: #ff0000;
  /*背景色*/
  color: #fff;
  /*文字色*/
}

/*マウスオン時にリンクテキストと同じような手のマークが出るように*/
#f-size li {
  cursor: pointer;
}

/*画面幅900px以下の追加指定*/
@media screen and (max-width: 900px) {
  /*ボタンブロック全体*/
  #f-size {
    right: 60px;
    /*右からの配置場所の上書き。３本バー（ハンバーガー）アイコンが出てくるの重ならないようにする。*/
  }
}

/*追加指定ここまで*/

/*画面幅900px以下の追加指定*/
@media screen and (max-width: 900px) {
  /*ボタンブロック全体*/
  #f-size {
    display: none;
    /*スペースが狭くなるので非表示に*/
  }
}

/*追加指定ここまで*/

/*メニューブロック初期設定
---------------------------------------------------------------------------*/
#menubar {
  opacity: 0;
  line-height: 1.5;
}

#menubar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.large-screen #menubar {
  opacity: 1;
}

.small-screen #menubar.display-none {
  display: none;
}

.small-screen #menubar.display-block {
  display: block;
  opacity: 1;
}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {
  display: none;
}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {
  display: none;
}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
  font-family: "Font Awesome 5 Free";
  content: "\f078";
  /*使いたいアイコン名（Font Awesome）をここで指定*/
  font-weight: bold;
  /*この手の設定がないとアイコンが出ない場合があります*/
  font-size: 0.7rem;
  /*文字サイズを70%に*/
  padding-right: 0.5rem;
  /*右側に空ける余白。0.5文字分。*/
}

/*大きな端末、小さな端末共通のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar a {
  display: block;
  text-decoration: none;
}

/*小文字の英語部分*/
#menubar span {
  display: block;
  font-size: 0.7em;
  /*文字サイズを親要素の70%に*/
  letter-spacing: 0.1em;
  /*文字間隔を少しだけ広くとる*/
  opacity: 0.6;
  /*透明度。色が60%出た状態。*/
}

/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロックを囲むボックス*/
.large-screen #menubar {
  position: sticky;
  /*画面の上部にメニューが固定される*/
  top: 0;
  z-index: 10;
  transition: opacity 0.3s;
}

.large-screen #menubar nav {
  padding-left: 60px;
  padding-right: 60px;
}

/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
  display: flex;
  /*横並びにする*/
  justify-content: space-between;
  align-items: center;
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li {
  flex: 1;
  /*個々のメニューを均等にし、幅いっぱいまで使う設定*/
  position: relative;
  /*ドロップダウンの幅となる基準を作っておく*/
  text-align: center;
  /*テキストをセンタリング*/
}

/*リンク（a要素）の設定*/
.large-screen #menubar li a {
  flex: 1;
  background: #2f3b74;
  /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
  color: #ffffff;
  /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
  padding: 0.8rem 0;
  /*上下、左右の余白*/
}

/*マウスオン時に明るくする*/
.large-screen #menubar li a:hover {
  filter: brightness(1.2);
}

/*文字サイズ「大」の場合のメニューブロックを囲むボックス*/
html.f-large .large-screen #menubar {
  position: relative;
  /*メニューが２段になる為、stickyを外してスクロールさせるようにする。固定させたままがいいならこの１行を削除する。*/
}

/*文字サイズ「大」の場合のメニューブロック全体の設定*/
html.f-large .large-screen #menubar > nav > ul {
  flex-wrap: wrap;
  /*メニューを２段にする為、改行を許可する*/
}

/*文字サイズ「大」の場合のメニュー１個あたりの設定*/
html.f-large .large-screen #menubar > nav > ul > li {
  flex: auto;
  width: 33.33%;
  /*メニュー幅。３列なので33.33%*/
}

/*大きな端末用のメニューブロックが画面上部に到達した場合（fixed）
---------------------------------------------------------------------------*/
/*文字色*/
.large-screen #menubar.fixed a,
.large-screen .active-g a {
  opacity: 0.8;
  /*透明度。色を80%だけ出す。*/
}

/*マウスオン時*/
.large-screen #menubar.fixed a:hover {
  opacity: 1 !important;
  /*透明度。色を100%出す。*/
}

/*メニューの上下の余白を狭くする*/
.large-screen #menubar.fixed2 li a {
  padding-top: 0.4rem;
  /*上の余白*/
  padding-bottom: 0.4rem;
  /*下の余白*/
}

/*大きな端末、小さな端末、共通のドロップダウンメニュー設定
---------------------------------------------------------------------------*/
/*ドロップダウンブロック*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
  animation: opa1 0.5s 0.1s both;
  /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}

/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.large-screen #menubar ul ul {
  position: absolute;
  z-index: 2;
  width: 450px;
  top: 100%;
  left: 0px;
  display: flex;
}

/*ドロップダウンメニュー1個あたりの上下、左右への余白。*/
.large-screen #menubar ul ul a,
.small-screen #menubar ul ul a {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
  padding-right: 0.6rem !important;
  padding-left: 2rem !important;
  text-indent: -1rem;
}
.large-screen #menubar ul ul li {
  padding: 0.6rem 1rem !important;
  background: #f2f2f2cd;
}
.large-screen #menubar ul ul li h3 {
  margin: 0;
  border: none;
  font-weight: normal;
  font-size: 1rem;
  background: #2f3b74;
  color: #fff;
  padding: 0.2em 0.5em;
  text-align: center;
}
.large-screen #menubar ul ul li h3.mt1em {
  margin-top: 1em;
}
.large-screen #menubar ul ul li a {
  display: block;
  text-decoration: none;
  background: #fff;
  padding: 0.2rem 1rem;
  color: #222222;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9em;
}

.large-screen #menubar ul ul li a:hover {
  background: #ccccff !important;
  color: #121212 !important;
}
.large-screen a.active-g-list {
  background: #e4e4ff !important;
  color: #121212 !important;
}
.large-screen #menubar ul ul li a:hover::before {
  color: #666;
  /*アイコンの色*/
}
.large-screen #menubar ul ul li a::before,
.small-screen #menubar ul ul li a::before {
  transition: 0.3s;
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  color: #ababab;
  padding-right: 0.8em;
  font-weight: bold;
}
.large-screen #menubar li.sp-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .small-screen #menubar li li {
    border: none;
  }
  .small-screen #menubar li li h3 {
    font-size: 0.9rem;
    color: #ffffff !important;
  }
  .small-screen #menubar li li a {
    background: #ffffff !important;
    color: #2f3b74 !important;
  }
}
/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------
.small-screen #menubar {height: 0px;}*/

/*メニューブロック設定*/
.small-screen #menubar.display-block {
  position: fixed;
  overflow: auto;
  z-index: 100;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-top: 90px;
  /*上に空ける余白。ハンバーガーアイコンと重ならない為の指定ですのでお好みで変更OK。*/
  background: #2f3b74;
  /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
  animation: animation1 0.2s both;
  /*animation1を実行する。0.2sは0.2秒の事。*/
  color: #2f3b74;
  /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
  border: 1px solid #fff;
  /*枠線の幅、線種、色*/
  margin: 1rem;
  /*メニューの外側に空けるスペース*/
  border-radius: 5px;
  /*角を丸くする指定*/
}

.small-screen #menubar a {
  color: #fff;
  padding: 1rem 3rem;
  /*メニュー内の余白。上下、左右へ。*/
}

.small-screen #menubar li li a {
  background: #2f3b74;
  /*背景色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
  color: #2f3b74;
  /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
  animation: opa1 0.3s 0.5s both;
  position: fixed;
  z-index: 101;
  cursor: pointer;
  top: 2vw;
  /*上からの配置場所*/
  right: 2vw;
  /*右からの配置場所*/
  width: 50px;
  /*幅*/
  height: 50px;
  /*高さ*/
  padding: 15px;
  /*ブロック内の余白*/
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s;
  background: rgba(0, 0, 0, 0.6);
  /*背景色*/
}

/*以下は変更不要*/
#menubar_hdr div {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*バーの設定*/
#menubar_hdr div span {
  display: block;
  width: 100%;
  height: 2px;
  /*線の太さ*/
  background-color: #fff;
  /*線の色*/
  border-radius: 2px;
  /*コーナーを少しだけ丸く*/
  transition: all 0.5s ease-in-out;
  position: absolute;
}

/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {
  top: 0;
}

#menubar_hdr div span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

#menubar_hdr div span:nth-child(3) {
  bottom: 0;
}

#menubar_hdr.ham div span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

#menubar_hdr.ham div span:nth-child(2) {
  opacity: 0;
}

#menubar_hdr.ham div span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/*スライドショー（vegasを使用）
ここでは、3:2の画像比率（2÷3=0.6666）を読み込む指定を行なっています。
異なる画像比率にしたい場合、#mainimg-boxのpadding-topの数字を変更します。2:1にするなら50%です。
---------------------------------------------------------------------------*/
#mainimg-box {
  width: 100%;
  height: 0;
  padding-top: 80vh !important;
  z-index: -1;
}
#mainimg-box p {
  position: absolute;
  font-family: "Noto Serif JP", serif;
  bottom: 15vh;
  left: 5vw;
  font-size: 2.5vw;
  color: #fff;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
#mainimg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 90vh;
}
@media screen and (max-width: 767px) {
  #mainimg-box p {
    bottom: 20vh;
    left: 5vw;
    font-size: 4vw;
  }
}
@media screen and (max-width: 767px) {
  #mainimg-box {
    padding-top: 84vh !important;
  }
  #mainimg-box p {
    max-width: 90vw;
    bottom: 20vh;
    left: 4vw;
    font-size: 4.5vw;
  }
  #mainimg-box p br.pc-only {
    display: none;
  }
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
  margin: 0 3%;
  /*ブロックの外側に空けるスペース*/
}

/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
main.column .main {
  margin-bottom: 80px;
  /*ボックスの下に空けるスペース。subとの間の余白です。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  /*カラムで使う為の指定*/
  main.column {
    display: flex;
    /*flexボックスを使う指定*/
    justify-content: space-between;
    /*並びかたの種類の指定*/
  }

  /*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
  main.column .main {
    order: 2;
    /*並び順。数字の小さい順番に表示されます。*/
    width: calc(100% - 260px);
    /*幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したものです。*/
  }

  /*2カラムの中にある.sub要素*/
  main.column .sub {
    order: 1;
    /*並び順。数字の小さい順番に表示されます。*/
    width: 230px;
    /*幅*/
  }
}
@media screen and (max-width: 767px) {
  main.column .main {
    margin-bottom: 30px;
  }
}
/*画面幅900px以上の追加指定ここまで*/

/*h2タグ
---------------------------------------------------------------------------*/
/*h2タグ全体*/
#contents h2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 2.5rem;
  font-size: 28px;
  line-height: 1.6;
  position: relative;
  font-weight: normal;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #5e5e5e;
}
@media screen and (max-width: 767px) {
  #contents h2 {
    font-size: 18px;
  }
}

/*アクセントラインの設定*/
#contents h2 .uline {
  display: inline-block;
  position: relative;
  padding: 10px 1rem;
  /*h2内の余白。上下、左右への順番。*/
  bottom: -2px;
  /*濃い線を薄い線に重ねる為の指定。枠線の幅と合わせます。*/
  border-bottom: 2px solid #49bbfe;
  /*濃い色の線の幅、線種、色*/
}

/*右側の装飾文字の設定*/
#contents h2 .small {
  font-size: 0.6em;
  opacity: 0.7;
  margin-right: 1rem;
}

/*h3タグ
---------------------------------------------------------------------------*/
#contents h3 {
  margin: 0 0 0rem;
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: normal;
}

#contents h3.table-title {
  font-size: 1.2rem;
  padding: 10px 1rem;
  border-bottom: 0px solid #ddd;
  text-align: center;
  font-weight: normal;
}
/*pタグ
---------------------------------------------------------------------------*/
#contents p {
  margin: 0 1rem 2rem;
  /*pの外側にとるスペース。上、左右、下への順番。*/
}
@media screen and (max-width: 767px) {
  #contents p {
    margin: 0 0 2rem;
  }
}

/*sub,sideブロック設定
---------------------------------------------------------------------------*/
#contents .sub h3::before,
#contents .side h3::before {
  border: none;
  padding: 0;
}

/*ブロック内のh3タグ*/
#contents .sub h3,
#contents .side h3 {
  margin: 0;
  border: none;
  font-weight: normal;
  font-size: 1.1rem;
  background: #2f3b74;
  color: #fff;
  padding: 0.2em 0.5em;
  text-align: center;
}

#contents .sub h3 a,
#contents .side h3 a {
  color: inherit;
}

/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
  padding: 0;
  margin: 0 0 1rem;
  /*上、左右、下へのマージン*/
}

/*メニュー１個あたり*/
.submenu li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  /*下線の幅、線種、色。0,0,0は黒の事で0.1は色が10%出た状態。*/
}

.submenu a {
  display: block;
  text-decoration: none;
  background: #fff;
  font-size: 0.9rem;
  line-height: 1.5;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
  padding-right: 0.6rem !important;
  padding-left: 2rem !important;
  text-indent: -1rem;
}
/*アイコン（Font Awesome）*/
.submenu a::before {
  transition: 0.3s;
  font-family: "Font Awesome 5 Free";
  /*Font Awesomeを使う指定*/
  content: "\f0da";
  /*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
  color: #ababab;
  /*アイコンの色*/
  padding-right: 0.8em;
  /*アイコンとテキストの間の余白*/
  font-weight: bold;
  /*この設定がないとアイコンが出ない場合があります*/
}
.active-sub a,
.submenu a:hover {
  background: #f4f6ff;
  color: #666;
}
/*マウスオン時のアイコン設定*/
.submenu a:hover::before {
  color: #666;
  /*アイコンの色*/
}
@media screen and (max-width: 899px) {
  .submenu a br {
    display: none;
  }

  .submenu a {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    font-size: 14px;
  }
}
.download {
  display: inline-block;
  width: 100%;
  text-align: center;
  background-color: #2f3b74;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 40px 1em 8px 1em;
  border-radius: 4px;
  position: relative;
}

.download:before {
  display: block;
  content: "";
  background: url(../images/download.png) no-repeat;
  background-size: cover;
  width: 44px;
  height: 38px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.download:hover {
  color: #fff !important;
  opacity: 0.8;
}
/*box1設定（このテンプレートでは、2カラム時のsubブロックでのみ使用しています）
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1 {
  background: rgba(0, 0, 0, 0.05);
  /*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
  padding: 10px;
  /*ボックス内の余白*/
  border-radius: 5px;
  /*角を丸くする指定*/
  margin-bottom: 1rem;
  /*ボックスの下に空けるスペース*/
}

/*box1内で使った場合、下のマージンをなくす*/
.sub .box1 .submenu {
  margin-bottom: 0;
}

/*フッター共通
---------------------------------------------------------------------------*/
#footer-contents,
#footermenu {
  padding: 2rem 5vw;
  /*上下、左右へのボックス内の余白。左右はcss冒頭で指定しているglobal-spaceを読み込みます*/
}

/*フッターのコンテンツ（住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
  background: #515151;
  /*背景色*/
  color: #fff;
  /*文字色*/
}

#footer-contents a {
  color: inherit;
}

/*左側のブロック*/
#footer-contents .left {
  margin-bottom: 50px;
  /*下に空けるスペース*/
}

#footer-contents .inner .right h2 {
  font-size: 18px;
  margin-top: 0px;
  margin-bottom: 1rem;
  width: 100%;
  text-align: center;
}

/*画面幅901px以上の追加指定*/
@media screen and (min-width: 901px) {
  #footer-contents .inner {
    display: flex;
    /*flexボックスを使う指定*/
    gap: 2rem;
    /*左右のボックスの間のマージン的な設定*/
  }

  /*左側のブロック*/
  #footer-contents .inner .left {
    margin-bottom: 0;
    /*下のマージン（外側への余白）をリセット*/
    width: 50%;
    /*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
  }

  #footer-contents .inner .left a {
    display: block;
    cursor: pointer;
    width: 80%;
    max-width: 30em;
  }
  /*右側のブロック*/
  #footer-contents .inner .left {
    width: 50%;
    /*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
  }
  /*右側のブロック*/
  #footer-contents .inner .right {
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  #footer-contents .inner .right .calendar-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  #footer-contents .inner .right h2 {
    max-width: 400px;
  }
}
/*追加指定ここまで*/

/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
.iframe-box {
  width: 100%;
  padding-top: 340px;
  position: relative;
  overflow: hidden;
}
.iframe-box p span {
  background-color: #b39ddb;
  padding: 0px 12px;
  margin-right: 0.5em;
  border-radius: 15px;
  font-size: 0.9em;
}
.iframe-box iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  aspect-ratio: 7 / 6;
}
@media screen and (min-width: 768px) {
  .iframe-box {
    max-width: 400px;
  }
}
@media screen and (max-width: 767px) {
  #footer-contents .inner .right h2 {
    font-size: 16px;
  }
  .iframe-box {
    padding-top: 85%;
  }
}
/*フッターメニュー設定
---------------------------------------------------------------------------*/
#footermenu {
  background: #303030;
}

#footermenu .inner {
  color: #fff;
  font-size: 0.9rem;
  gap: 3%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
#footermenu .inner li {
  margin-bottom: 1em;
  line-height: 1.5;
}
@media screen and (max-width: 898px) {
  #footermenu .inner {
    display: none;
  }
}
#footermenu nav ul {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
#footermenu nav ul li a {
  color: #fff;
  font-size: 0.8rem;
}

/*ボックス内のリンクテキスト設定*/
#footermenu a {
  text-decoration: none;
  color: inherit;
}

/*ulタグ（メニューの１列あたり）*/
#footermenu .inner ul {
  margin: 0;
  list-style: none;
  padding: 0 0.3em;
  width: 23%;
}

/*メニューの見出し(title)*/
#footermenu .title {
  font-weight: bold;
  color: #ccc;
  padding-bottom: 5px;
  border-bottom: 1px solid #fff;
  margin-bottom: 0.5em;
}

@media screen and (max-width: 899px) {
  #footermenu {
    display: none;
  }
}

/*フッター設定
---------------------------------------------------------------------------*/
small {
  font-size: 100%;
}

footer {
  font-size: 0.7rem;
  /*文字サイズ*/
  background: #303030;
  /*背景色*/
  color: #fff;
  /*文字色*/
  text-align: center;
  /*内容をセンタリング*/
  padding: 1rem;
  /*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {
  color: inherit;
  text-decoration: none;
}

/*著作部分*/
footer .pr {
  display: block;
}

/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-self: center;
  gap: 1rem;
  /*アイコン同士のマージン的な要素。１文字分。*/
}

.icons i {
  font-size: 40px;
  /*アイコンサイズ*/
}

/*.listブロック共通
---------------------------------------------------------------------------*/
.list {
  position: relative;
}

/*figure画像*/
.list figure {
  margin-bottom: 2rem;
}

/*３列タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-grid .list {
  margin-bottom: 1rem;
  /*ボックス同士の上下間に空けるスペース*/
  padding: 20px;
  /*ボックス内の余白*/
  background: #fff;
  /*背景色*/
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
  /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のh4タグ*/
.list-grid .list h4 {
  margin: 0;
}

/*ボックス内のpタグ*/
.list-grid .list p {
  margin: 0 !important;
  font-size: 0.8em;
  /*文字サイズを80%に*/
  line-height: 1.5;
  /*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid .list figure {
  margin-bottom: 1rem;
  /*下に空けるスペース*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  /*listブロック全体を囲むブロック*/
  .list-grid {
    display: flex;
    /*flexボックスを使う指定*/
    flex-wrap: wrap;
    /*折り返す指定*/
  }

  /*１個あたりのボックス設定*/
  .list-grid .list {
    width: 32%;
    /*幅。３列になります。*/
    margin-right: 2%;
    /*右側へのマージン。ボックス同士の左右の余白です。*/
  }

  /*3の倍数目のボックスの右側のマージンをなくす*/
  .list-grid .list:nth-of-type(3n) {
    margin-right: 0;
  }

  /*ボックス内のtextブロック*/
  .list-grid .list .text {
    flex: 1;
  }
}

/*画面幅900px以上の追加指定ここまで*/

/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 1rem;
  /* padding-bottom: 1em; */
  border-bottom: 1px solid #d9d9d9;
}
#contents h2.title-new {
  margin-bottom: 0 !important;
}
/*日付(dt)、記事(dd)共通設定*/
.new dt,
.new dd {
  padding: 5px 0;
  /*上下、左右へのボックス内の余白*/
}
.new dt {
  display: flex;
  align-items: center;
}
/*記事(dd)設定*/
.new dd {
  width: calc(100% - 8em);
  /*「8em」は上の「.new dt」のwidthの値です*/
}
.new dt span.icon-bg2 {
  background: #555;
  /*背景色*/
}
.new dt span {
  display: inline-block;
}

.new dt span.category {
  width: 7em;
  /*幅。7文字(em)分。*/
  background: #8490be;
  /*背景色*/
  color: #fff;
  /*文字色*/
  font-size: 0.8em;
  /*文字サイズを80%に。*/
  text-align: center;
  /*文字をセンタリング*/
  margin-left: 1em;
  margin-right: 1em;
  /*アイコンの右側に空けるスペース*/
  align-self: flex-start;
  /*高さを間延びさせない指定*/
  line-height: 1.8;
  /*行間を少し狭く*/
  position: relative;
  top: 0.4em;
  /*上下の配置バランスの微調整*/
  border-radius: 2px;
  /*角を丸くする指定*/
}
/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  /*日付(dt)設定*/
  .new dt {
    width: 14em;
    /*幅。14文字(em)分。アイコン分も含んだ幅にします。*/
    display: flex;
    /*flexボックスを使う指定*/
    justify-content: space-between;
    align-items: flex-start;
  }

  /*icon-bg1設定。サンプルテンプレートでは「●●●重要」と書いてあるマーク*/
  .new dt span.icon-bg1 {
    background: #49bbfe;
    /*背景色*/
  }

  /*記事(dd)設定*/
  .new dd {
    width: calc(100% - 14em);
    /*「14em」は上の「.new dt」のwidthの値です。*/
  }
}
@media screen and (max-width: 767px) {
  .new dt {
    line-height: 1;
  }
  .new dt span.day {
    padding-top: 6px;
  }
  .new dd {
    width: 100%;
  }
}
/*バナーエリア
---------------------------------------------------------------------------*/
.banner a img {
  margin-bottom: 1em;
}
@media screen and (min-width: 901px) {
  .banner {
    display: flex;
    gap: 40px;
    justify-content: flex-start;
  }
}

/*画像スライダー
---------------------------------------------------------------------------*/
/* スライダー全体 */
.slider-wrapper {
  display: flex; /* スライドのグループを横並び */
  overflow: hidden; /* はみ出たスライドを隠す */
}
/* スライド3枚のグループ */
.slider {
  animation: scroll-left 20s infinite linear 0.5s both;
  display: flex; /* スライド3枚を横並び */
  padding: 0;
}
/* スライド */
.slide {
  list-style: none;
  width: calc(100vw / 3); /* 3はスライドの枚数 */
}
/* スライドの画像 */
.slide img {
  display: block;
  width: 100%;
}
/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@media screen and (max-width: 767px) {
  .slide {
    list-style: none;
    width: calc(100vw / 2);
  }
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
  display: block;
}

/*ボタンの設定*/
.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
  position: fixed;
  right: 20px;

  bottom: 20px;

  color: #fff;

  font-size: 1.5rem;

  background: rgba(0, 0, 0, 0.2);

  width: 60px;

  line-height: 60px;

  border-radius: 50%;
  /*円形にする*/
}

/*その他
---------------------------------------------------------------------------*/
.button01 {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #1b56ba;
  min-width: 250px;
  margin: 2rem auto 0;
  padding: 1em 2em;
  background-color: #fff;
  color: #1b56ba;
  font-size: 1em;
  font-weight: 500;
  transition: 0.6s;
  cursor: pointer;
}
.button01:hover {
  background: #f4f6ff;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.color-check,
.color-check a {
  color: #ff0000 !important;
}

.l {
  text-align: left !important;
}

.c,
.tCenter {
  text-align: center !important;
}

.r {
  text-align: right !important;
}

.ws {
  width: 95%;
  display: block;
}

.wl {
  width: 95%;
  display: block;
}
.mt1em {
  margin-top: 1em !important;
}

.mt3em {
  margin-top: 3em !important;
}
.mb0 {
  margin-bottom: 0px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.look {
  display: inline-block;
  padding: 0px 10px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 5px 0;
  word-break: break-all;
}

.small {
  font-size: 0.75em;
}

.large {
  font-size: 1.2em;
  letter-spacing: 0.1em;
}

.pc {
  display: block;
}

.sp {
  display: none !important;
}

.block {
  display: block !important;
}

p.img {
  margin: 0 0 1rem !important;
}

/*画面幅900px以上の追加指定*/
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
}

.under-line {
  border-bottom: 1px solid #000;
}
.main .flex {
  display: flex;
}

/* ------------------------------------ */
/* ポップアップ */
/* ------------------------------------ */
#popup-btn {
  display: inline-block;
  color: white;
  border: 0;
}

#popup-wrapper {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 100;
}

#popup-inside {
  text-align: center;
  width: 90%;
  max-width: 960px;
  background: white;
  margin: 100px auto;
  padding: 30px;
  position: relative;
}
.main #popup-inside img {
  margin: 0;
  max-width: 90%;
}

#message a {
  background: purple;
  color: white;
  text-decoration: none;
  padding: 6px 10px;
}

#close {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 0 12px;
  border: 1px solid #e5d8d8;
  border-radius: 2px;
  font-size: 0.8em;
  background: #eee;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #popup-inside {
    margin: 20% auto;
  }
}