@charset "utf-8";

/*=======================================================================
リセットCSS（sanitize.css）の読み込み
=======================================================================*/
@import url("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%;
}
@media screen and (min-width: 900px) {
  html,
  body {
    font-size: 100%; /*基準となるフォントサイズ。*/
  }
}
body {
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  font-family: "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  color: #111;
  font-size: 100%;
  line-height: 200%;
  animation: opa1 0.3s 0.5s both;
}
body#tinymce {
  background: #fff;
  text-align: left;
}
img {
  width: 100%;
  height: auto;
}
img[src$=".svg"] {
  width: 100%;
  height: auto;
  pointer-events: none;
}
a img:hover {
  opacity: 0.7;
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.text_center {
  text-align: left;
}
@media screen and (min-width: 961px) {
  .text_center {
    text-align: center;
  }
}
.bold {
  font-weight: bold;
}
ul.normal,
ol {
  margin-left: 24px;
}
ul.normal li {
  list-style-type: disc;
}
ol.normal li {
  list-style-type: decimal;
}
.small {
  font-size: 75%;
}
.middle {
  font-size: 125%;
}
input {
  font-size: 1rem;
}
section section {
  margin-bottom: 64px;
}
/*=======================================================================
カラー
=======================================================================*/
.green {
  color: #28ab92;
}
/*=======================================================================
ボタン
=======================================================================*/
.btn01 a {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  line-height: 48px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #333333;
  box-shadow: 0px 5px 0px #111111;
  transition: 0.3s;
  border-radius: 8px;
}
.btn01 a:hover {
  box-shadow: unset;
  transform: translateY(4px);
  color: #fff;
}
/*=======================================================================
リンクテキスト全般の設定
=======================================================================*/
a {
  color: #111; /*文字色*/
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}
/*マウスオン時*/
a:hover {
  opacity: 0.8; /*色を80%だけ出す*/
  color: #28ab92; /*文字色*/
}
/*=======================================================================
pc,sp切り替え
=======================================================================*/
.pc {
  display: none;
}
.sp {
  display: block;
}
@media all and (min-width: 961px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}
/*=======================================================================
余白
=======================================================================*/
.mab8 {
  margin-bottom: 8px;
}
.mab16 {
  margin-bottom: 16px;
}
.mab24 {
  margin-bottom: 24px;
}
.mab32 {
  margin-bottom: 32px;
}
.mab40 {
  margin-bottom: 40px;
}
.mab48 {
  margin-bottom: 48px;
}
.mab56 {
  margin-bottom: 56px;
}
.mab64 {
  margin-bottom: 64px;
}
.mab72 {
  margin-bottom: 72px;
}
.pa20 {
  padding: 0 20px;
}
.mal16 {
  margin-left: 16px;
}
.marl-auto {
  margin-left: auto;
  margin-right: auto;
}
/*=======================================================================
flex
=======================================================================*/
@media all and (min-width: 961px) {
  .flex,
  .flex_fs,
  .flex_sb,
  .flex_center,
  .flex_end {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    -js-display: flex;
    display: flex;
  }
  .flex_fs,
  .flex_sb {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .flex_fs {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
  .flex_sb {
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .flex_center {
    -webkit-justify-content: center;
    justify-content: center;
  }
  .flex_end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
  .reverse {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .list2 li {
    width: 50%;
  }
  .list2-2 li {
    width: 49%;
  }
  .list2-3 li {
    width: 49.5%;
  }
  .list3 li,
  .list3 div {
    width: 32%;
  }
  .list3 li ul li {
    width: 100%;
  }
  .list4 li,
  .list4 div {
    width: 23%;
  }
  .list5 li,
  .list5 div {
    width: 19%;
  }
  .w32 {
    width: 32%;
  }
  .w49 {
    width: 49%;
  }
  .w80 {
    width: 100%;
    max-width: 800px;
  }
}
.list100 li {
  width: 100%;
}
/*=======================================================================
iframe
=======================================================================*/
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*=======================================================================
header
=======================================================================*/
/*-------------
ヘッダーブロック
-------------*/
header {
  display: flex; /*flexボックスを使う指定*/
  align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 0 30px; /*ヘッダー内の余白。上下、左右への順番。*/
  height: 90px; /*ヘッダーの高さ*/
  position: fixed; /*スクロールしても動かないようにする指定。*/
  z-index: 2; /*スクロール中、コンテンツの上になるように*/
  margin: 0 32px; /*headerの外側にとるスペース*/
  width: calc(100% - 64px); /*pxの値は、上のmargin(両サイドなので2倍)を合計した数字です。*/
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.15); /*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.15は色が15%出た状態。*/
  background: linear-gradient(#fff, rgba(255, 255, 255, 0.9)); /*背景グラデーション。255,255,255は白のことで0.7は色が70%出た状態。*/
  top: 0;
}
/*-------------
トップページ以外のヘッダーブロック
-------------*/
body:not(.home) header {
  /*background: linear-gradient(#fff, #eee);*/
  background: #fff;
}
@media screen and (max-width: 600px) {
  /*ヘッダーブロック*/
  header {
    padding: 0 20px; /*ヘッダー内の余白。上下、左右への順番。*/
    height: 64px; /*ヘッダーの高さ*/
    margin: 0 10px; /*headerの外側にとるスペース*/
    width: calc(100% - 20px); /*pxの値は、上のmargin(両サイドなので2倍)を合計した数字です。*/
  }
}
/*ロゴ*/
#logo img {
  display: block;
}
#logo {
  width: 220px; /*ロゴ画像の幅*/
}
/*=======================================================================
nav
=======================================================================*/
/*-------------
メニューブロック設定
-------------*/
#menubar a {
  display: block;
  text-decoration: none;
}
#menubar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Font Awesome 5 Free";
}
#menubar.d-n,
#menubar_hdr.d-n,
#menubar .ddmenu_parent ul {
  display: none;
}
#menubar.d-b {
  display: block;
}
#menubar_hdr.d-b {
  display: flex;
}
#menubar {
  position: relative;
  z-index: 1; /*スライドショーがある場合に下に隠れないようにするため*/
  font-size: 18px; /*文字サイズ。端末サイズで文字サイズが変わると不具合が出る場合があるので、ここで統一しています。*/
}
/*ドロップダウンメニューのリンクタグ*/
#menubar .ddmenu {
  cursor: pointer; /*リンク要素のカーソルを矢印に変更しておく*/
}
/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
  content: "\f078"; /*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
  font-weight: bold; /*この手の設定がないとアイコンが出ない場合があります*/
  margin-right: 0.5em; /*アイコンとテキストとの間に空けるスペース*/
  display: inline-block;
  transform: scale(0.7); /*元々のサイズの70%に。*/
}
/*-------------
大きな端末用のメニューブロック設定
-------------*/
/*メニューブロック全体*/
.p #menubar > nav > ul {
  display: flex; /*flexボックスを使う指定*/
  margin-left: 30px; /*左側にとるスペース。ロゴとの間の間隔を調整します。*/
  font-size: 0.85rem; /*文字サイズ。85%。*/
  letter-spacing: 0.1em; /*文字間隔を少しだけ広くとる*/
}
/*メニュー1個あたりの設定*/
.p #menubar a {
  padding: 10px; /*メニュー同士の余白*/
  font-weight: 600;
}
/*現在表示中（current）のメニュー*/
.p #menubar li.current > a {
  color: #28ab92; /*文字色*/
}
/*-------------
大きな端末用のドロップダウンメニュー
-------------*/
/*ドロップダウンメニューブロック全体*/
.p #menubar ul ul {
  position: absolute;
  z-index: 100;
  border-radius: 10px; /*角を丸くする指定*/
  overflow: hidden;
  text-align: center; /*文字をセンタリング*/
  color: #fff; /*文字色*/
}
/*メニュー1個あたり*/
.p #menubar ul ul a {
  color: inherit;
  background: rgba(0, 0, 0, 0.85);
  padding: 10px 20px;
}
/*-------------
小さな端末用の開閉ブロック
-------------*/
/*メニューブロック設定*/
.s #menubar.d-b {
  position: fixed;
  overflow: auto;
  z-index: 100;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 100px 20px 20px; /*ブロック内の余白。上、左右、下。*/
  background: rgba(0, 0, 0, 0.9); /*背景色。0,0,0は黒の事で0.9は色が90%出た状態。*/
  text-align: center; /*内容をセンタリング*/
  animation: animation1 0.2s both; /*animation.cssのanimation1を実行する。0.2sは0.2秒の事。*/
  color: #fff; /*文字色*/
}
#menubar.d-b li {
  text-align: left;
}
/*メニュー1個あたりの設定*/
.s #menubar a {
  color: inherit;
  padding: 10px; /*メニュー内の余白*/
}
/*-------------
3本バー（ハンバーガー）アイコン設定
-------------*/
/*3本バーを囲むブロック*/
#menubar_hdr {
  position: fixed;
  z-index: 101;
  cursor: pointer;
  right: 40px; /*右からの配置場所指定*/
  top: 20px; /*上からの配置場所指定*/
  padding: 16px 14px; /*上下、左右への余白*/
  width: 46px; /*幅（3本バーが出ている場合の幅になります）*/
  height: 46px; /*高さ*/
  display: flex; /*flexボックスを使う指定*/
  flex-direction: column; /*子要素（3本バー）を縦並びにする*/
  justify-content: space-between; /*並びかたの種類の指定*/
}
@media screen and (max-width: 600px) {
  /*3本バーを囲むブロック*/
  #menubar_hdr {
    right: 20px; /*右からの配置場所指定*/
    top: 12px; /*上からの配置場所指定*/
  }
}
/*バー1本あたりの設定*/
#menubar_hdr span {
  display: block;
  transition: 0.3s; /*アニメーションにかける時間。0.3秒。*/
  border-top: 2px solid #777; /*バーの色。線の幅、線種、色*/
}
/*×印が出ている状態の設定。※1本目および2本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
  transform-origin: center center; /*変形の起点。センターに。*/
  width: 20px; /*バーの幅*/
  border-top: 2px solid #fff; /*バーの色を変更*/
}
/*×印が出ている状態の設定。※1本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1) {
  transform: rotate(45deg) translate(3.8px, 5px); /*回転45°と、X軸Y軸への移動距離の指定*/
}
/*×印が出ている状態の設定。※3本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3) {
  transform: rotate(-45deg) translate(3.8px, -5px); /*回転-45°と、X軸Y軸への移動距離の指定*/
}
/*×印が出ている状態の設定。※2本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2) {
  display: none; /*2本目は使わないので非表示にする*/
}
/*=======================================================================
main
=======================================================================*/
/*-------------
文字装飾
-------------*/
.page_ti {
  text-align: left;
  /*color: #166355;*/
  color: #fff;
  margin: 0 0 48px 0;
  line-height: 240%;
  padding: 80px 24px 40px 24px;
  /*background: linear-gradient(90deg, #444444, #494949, #4d4d4d, #525252, #575757, #5c5c5c, #616161, #666666);*/
  background: #222222;
  background-image: linear-gradient(#333333 1px, transparent 1px), linear-gradient(90deg, #333333 1px, transparent 1px);
  background-size: 8px 8px;
}
@media (min-width: 1280px) {
  .page_ti {
    text-align: center;
    padding: 160px 0 80px 0;
  }
}
/*-------------
h2
-------------*/
#contents h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 1rem; /*h2の外側にとるスペース。上、左右、下への順番。*/
  font-size: 1.3rem; /*文字サイズ*/
  position: relative; /*ulineを配置する為に必要な指定*/
  border-bottom: 5px solid #ddd; /*薄い色の線の幅、線種、色*/
}
#contents h2 .uline {
  display: inline-block;
  position: relative;
  padding: 10px 1rem; /*h2内の余白。上下、左右への順番。*/
  bottom: -5px; /*濃い線を薄い線に重ねる為の指定。枠線の幅と合わせます。*/
  border-bottom: 5px solid #28ab92; /*濃い色の線の幅、線種、色*/
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.8;
}
#contents h2 .small {
  font-size: 0.6em;
  opacity: 0.7;
  margin-right: 1rem;
}
#contents h2.g_line,
.g_line {
  border-bottom: 4px dashed #28ab92;
  margin-bottom: 32px;
  padding-bottom: 16px;
  color: #28ab92;
}
/*-------------
h3
-------------*/
h3 {
  font-weight: 600;
}
#contents h3 {
  margin: 0 0 32px; /*h3の外側にとるスペース。上、左右、下への順番。*/
  font-size: 1.2rem; /*文字サイズ*/
  padding: 10px 1rem; /*h3内の余白。上下、左右への順番。*/
  border-bottom: 3px solid #ddd; /*薄い色の線の幅、線種、色*/
}
#contents h3 i {
  color: #28ab92;
}
/*-------------
p
-------------*/
/*#contents p + p {
  margin-top: -1rem; /*段落が続いた場合に、少し上に詰める。
}*/
/*-------------
ふきだし
-------------*/
.green_arrow_box {
  position: relative;
  background: #28ab92;
  color: #fff;
  border-radius: 8px;
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem) /*20-24|320-1920*/;
  padding: 16px;
  border-bottom: none !important;
}
.green_arrow_box:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(40, 171, 146, 0);
  border-top-color: #28ab92;
  border-width: 16px;
  margin-left: -16px;
}
@media screen and (min-width: 1281px) {
  .green_arrow_box {
    width: auto;
    min-width: 320px;
    text-align: left;
    display: inline-block;
  }
  .green_arrow_box:after {
    left: 10%;
  }
}
.marker {
  background: linear-gradient(transparent 50%, rgba(237, 202, 37, 0.6) 50%);
}
/*-------------
mainブロック設定
-------------*/
main {
  margin: 0 3%; /*ブロックの外側に空けるスペース*/
}
/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
main.column .main {
  margin-bottom: 30px; /*ボックスの下に空けるスペース。subとの間の余白です。*/
}
@media screen and (min-width: 900px) {
  /*カラムで使う為の指定*/
  main.column {
    display: flex; /*flexボックスを使う指定*/
    justify-content: space-between; /*並びかたの種類の指定*/
  }
  /*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
  main.column .main {
    margin-bottom: 0;
    order: 2; /*並び順。数字の小さい順番に表示されます。*/
    width: calc(100% - 360px); /*幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したものです。*/
  }
  /*2カラムの中にある.sub要素*/
  main.column .sub {
    order: 1; /*並び順。数字の小さい順番に表示されます。*/
    width: 320px; /*幅*/
  }
}
#contents table.ta1 {
  width: 100%;
  margin: 20px 0 8px 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-collapse: collapse;
}
#contents table.ta1 th,
#contents table.ta1 td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 20px;
}
#contents table.ta1 th {
  text-align: left;
  background: #eee;
}
#contents table.ta1 th {
  font-size: 100%;
  white-space: nowrap;
  font-weight: bold;
  letter-spacing: 1px;
}
#contents table.ta_normal th {
  white-space: normal;
}
#contents table.ta1 tbody th {
  font-weight: bold;
}
#contents table.ta1 td {
  font-size: 100%;
  line-height: 30px;
}
.long_th {
  min-width: 120px !important;
}
@media screen and (max-width: 960px) {
  .table-area {
    width: 96%;
    /*height: 400px;*/
    margin: 0 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #ccc transparent; /* Firefox */
  }
  .table-area::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
  }
  .table-area::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }
  .table-short {
    height: auto !important;
  }
  #contents table.ta1 {
    margin: 0;
    border-left: none;
    border-top: none;
  }
  #contents table.ta1 thead th,
  .sticky_cross,
  #contents table.ta1 tbody th {
    position: sticky;
    top: 0;
    left: 0;
  }
  #contents table.ta1 thead th::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
  #contents table.ta1 tbody th::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
  #contents table.ta1 th,
  #contents table.ta1 td {
    padding: 8px;
    z-index: 0;
  }
  #contents table.ta1 th {
    border-right: none;
  }
  .sticky_cross {
    z-index: 1 !important;
    border: none !important;
  }
  #contents table.ta1 tbody th {
    z-index: 0 !important;
  }
  #contents table.ta1 tbody td {
    position: relative;
    z-index: -1 !important;
  }
  .sticky_cross::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border: 1px solid #ccc;
  }
  .scroll-hint-icon-white {
    z-index: 1000;
  }
  /* スクロールバーの幅と高さを設定する */
  .scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  /* スクロールバーの形を設定する */
  .scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
  }
  /* スクロールバーの色を設定する */
  .scrollbar-thumb-black::-webkit-scrollbar-thumb {
    --bg-opacity: 1;
    background-color: black;
  }
  .scroll-hint-icon-wrap {
    height: 70% !important;
    max-height: 70% !important;
  }
}
.ta2 {
  width: 100%;
  border: 1px solid #ccc;
}
.ta2 th,
.ta2 td {
  padding: 20px;
}
.ta2 th {
  background: #eee;
  text-align: left;
}
.ta2 th:not(tr:last-of-type th),
.ta2 td:not(tr:last-of-type td) {
  border-bottom: 1px solid #ccc;
}
/*=======================================================================
SUB
=======================================================================*/
/*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: #999; /*背景色*/
  box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.6) inset;
  color: #fff; /*文字色*/
  text-align: center; /*内容をセンタリング*/
  padding: 0.5em; /*タグ内の余白*/
}
#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; /*背景色*/
  padding: 0.2rem 1rem; /*上下、左右へのメニュー内の余白*/
}
.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; /*この設定がないとアイコンが出ない場合があります*/
}
.submenu a:hover::before {
  color: #666; /*アイコンの色*/
}
.submenu li div p {
  margin: 0 !important;
}
.submenu li div p a {
  height: 40px;
  display: block;
}
.submenu li div a {
  padding-left: 32px;
}
.submenu li div a::before {
  font-family: "Font Awesome 5 Free";
  content: "└";
}
/*=======================================================================
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); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
  width: 60px; /*幅*/
  line-height: 60px; /*高さ*/
  border-radius: 50%; /*円形にする*/
}
/*=======================================================================
footer
=======================================================================*/
#footermenu {
  margin: 0;
  padding: 20px; /*ブロック内の余白*/
  text-align: center; /*テキストを中央に*/
}
#footermenu li {
  display: inline-block; /*簡易的に横並びにする*/
  padding: 0 10px; /*上下、左右への余白*/
}
footer small {
  font-size: 100%;
}
footer {
  font-size: 0.7rem; /*文字サイズ。bodyのfont-sizeの70%です。*/
  text-align: center; /*内容をセンタリング*/
  padding: 20px; /*ボックス内の余白*/
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer .pr {
  display: block;
}
#banner {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#banner li {
  margin: 8px;
  max-width: 360px;
}
@media screen and (max-width: 960px) {
  #banner {
    display: block;
  }
  #banner li {
    margin: 8px auto;
  }
}
@media screen and (max-width: 600px) {
  #footermenu {
    text-align: left;
  }
  #footermenu li {
    display: block;
    line-height: 40px;
  }
}
/*=======================================================================
form
=======================================================================*/
input,
select {
  background: #fff;
}
input[type="text"]:focus::-webkit-input-placeholder {
  color: transparent;
}
input[type="text"]:focus::-moz-placeholder {
  color: transparent;
}
[inputtype="text"]:focus::-ms-input-placeholder {
  color: transparent;
}
input[type="text"]:focus::placeholder {
  color: transparent;
}
#form label {
  font-size: 120%;
  font-weight: bold;
}
#form input[type="text"],
#form input[type="tel"],
#form input[type="number"],
#form input[type="email"],
#form textarea,
select {
  width: 100%;
  border: 1px solid #ccc;
  -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
  padding: 16px;
}
select,
option {
  padding: 16px;
  width: 100%;
  cursor: pointer;
}
input:focus,
textarea:focus,
select:focus {
  background: #ffc;
}
span.need {
  background: #c00;
  color: #fff;
  padding: 0.3% 0.8%;
  margin: 10% 0;
}
#form dl dt.need:after {
  position: absolute;
  right: 10px;
  content: "必須";
  background: #c00;
  color: #fff;
  padding: 0.3% 0.8%;
}
input[type="radio"] {
  transform: scale(2); /* 1.5倍に拡大 */
  margin: 0 10px 0 8px; /* 余白調整 */
}