@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/* 下からフェードイン(初期値) */
.js-fadeUp, .js-fadeUpSlow {
  opacity: 0;
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* 下からフェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1;
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 0s;
}

.js-fadeUpSlow.is-inview {
  opacity: 1;
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: .5s;
}

/* 左からフェードイン(初期値) */
.js-fadeIn, .js-fadeInSlow {
  opacity: 0;
  transform: translateX(-100px);
  /* 左に100pxの位置から */
  transition: opacity .8s, transform .8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* 左からフェードイン(スクロールした後) */
.js-fadeIn.is-inview {
  opacity: 1;
  transform: translateX(0);
  /* 100px右に移動する */
  transition-delay: 0s;
}

.js-fadeInSlow.is-inview {
  opacity: 1;
  transform: translateX(0);
  /* 100px右に移動する */
  transition-delay: .5s;
}

/* 左から右へ元の位置に戻る動き */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
    /* 最初は左に50pxずれた位置 */
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    /* 元の位置（0）に戻る */
  }
}
/* 右から左へ元の位置に戻る動き */
/*@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}*/
/* 右から左へ元の位置に戻る動き */
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(15px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* --- 繰り返して震える動きの定義 --- */
@keyframes shake {
  /* 0% 〜 15% の間（約0.45秒）でブルブル震える */
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  3% {
    transform: translate(-3px, 0) rotate(-3deg);
  }
  6% {
    transform: translate(3px, 0) rotate(3deg);
  }
  9% {
    transform: translate(-3px, 0) rotate(-3deg);
  }
  12% {
    transform: translate(3px, 0) rotate(3deg);
  }
  15% {
    transform: translate(0, 0) rotate(0deg);
  }
  /* 15% 〜 100% の間（約2.55秒）は元の位置でピタッと止まって待機 */
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes zoom-up {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
/* 用紙サイズの指定（A4） */
@page {
  margin: 8mm;
  size: 210mm 297mm;
  /* A4縦 */
}
@media print {
  /* 全体設定 */
  body {
    -webkit-print-color-adjust: exact;
    /* 印刷時でも背景色や背景画像を表示 */
    width: 1400px;
    /* 印刷時の全ページ幅を統一 */
    zoom: 0.8;
    /* なるべく多くのブラウザで切れないようにするため */
    /*no animation*/
  }
  body header {
    position: absolute !important;
    max-width: min(1400px, 100%);
    width: 1400px !important;
  }
  body .header--flex {
    width: 1400px !important;
  }
  body .btnBox {
    display: none;
  }
  body #btn_pagetop {
    display: none;
  }
  body .mainImage .fixedBtn {
    display: none;
  }
  body .js-fadeUp,
  body .js-fadeIn {
    opacity: 1;
  }
  body .js-fadeIn {
    transform: translateX(0);
  }
  body .js-fadeUp {
    transform: translateY(0);
  }
  body .js-fadeUp.is-view,
  body .js-fadeIn.is-view {
    animation-name: none;
  }
}
body {
  font-size: 62.5%;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  -webkit-text-size-adjust: 100%;
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-timing-function: ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body, h1, h2, h3, h4, h5, h6, p {
  font-size: 1rem;
  color: #000;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

a {
  text-decoration: none;
}
a:hover {
  color: #FF0000;
  text-decoration: underline;
  text-underline-offset: 4px;
}
a:link {
  color: #0000FF;
}
a:active {
  color: #0000FF;
}
a:visited {
  color: #990066;
}

img {
  vertical-align: bottom;
}

a img {
  border: none;
}

input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  outline: none;
}

input:focus,
button {
  outline: 0;
}

.clear {
  display: none;
  clear: both;
}

img.centering {
  position: absolute;
}

::selection {
  background: #FFD7E9;
}

::-moz-selection {
  background: #FFD7E9;
}

.pcNone {
  display: none;
}

@media (max-width: 767px) {
  /* responsive none fore SP */
  .spNone {
    display: none;
  }

  .pcNone {
    display: block;
  }
}
/* 読み込み中に画面を隠すカバーの設定 */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  /* カバーの色（白） */
  z-index: 9999;
  /* 確実に一番手前に表示させる */
  /* 1秒かけて透明度（opacity）を変化させるアニメーション */
  transition: opacity 1s ease;
}

/* JavaScriptでカバーを消すときに追加するクラス */
.hidden {
  opacity: 0;
  /* 透明にする */
  pointer-events: none;
  /* 透明になったカバーをクリックできないようにする */
}

html {
  scroll-padding-top: 120px;
  scroll-behavior: smooth;
}
@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 90px;
  }
}

div.system-free {
  height: 100%;
  overflow: hidden;
}
div.system-free div, div.system-free p {
  font-size: 1.25rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  div.system-free div, div.system-free p {
    font-size: 1rem;
  }
}
@media screen and (max-width: 479px) {
  div.system-free div, div.system-free p {
    font-size: 0.9375rem;
  }
}
div.system-free body, div.system-free h1, div.system-free h2, div.system-free h3, div.system-free h4, div.system-free h5, div.system-free h6, div.system-free p {
  color: #333;
}
div.system-free hr {
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid #000;
}
div.system-free table {
  border-collapse: collapse;
}
div.system-free img {
  display: block;
  height: auto;
  max-width: 100%;
}

.bdcb__inner {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 30px 10px;
  margin: 0 auto;
  max-width: min(1400px, 100%);
}
@media screen and (max-width: 899px) {
  .bdcb__inner {
    padding-right: 20%;
  }
}
@media screen and (max-width: 767px) {
  .bdcb__inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.bdcb__list {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.bdcb__item {
  font: 500 16px/1.5 "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #333;
  padding-right: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@media screen and (max-width: 767px) {
  .bdcb__item {
    font-size: 15px;
  }
}
.bdcb__item--anchor {
  font: 500 16px/1.5 "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #333 !important;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .bdcb__item--anchor {
    font-size: 15px;
  }
}
.bdcb__item--anchor:link {
  color: #333;
}
.bdcb__item--anchor:hover {
  text-decoration: none;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: alpha(opacity=80);
}
.bdcb__item--anchor:visited {
  color: #333;
}
.bdcb .polygon {
  padding-right: 20px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .bdcb .polygon {
    padding-right: 16px;
  }
}
.bdcb .polygon:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #333;
  width: 5px;
  height: 7.5px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
@media screen and (max-width: 767px) {
  .bdcb .polygon:after {
    right: 5px;
  }
}

ol.transition {
  width: 100%;
  height: 46px;
  overflow: hidden;
  margin: 120px auto 0;
  padding: 0;
  text-align: center;
  list-style: none;
}
@media screen and (max-width: 767px) {
  ol.transition {
    height: 30px;
  }
}
ol.transition li {
  width: 45px;
  height: 46px;
  overflow: hidden;
  margin: 0 1px;
  padding: 0;
  color: #333;
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.3;
  display: inline-block;
  background-color: #FFF;
  border: 1px solid #7e7e7e;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  ol.transition li {
    width: 30px;
    height: 30px;
    font-size: 1.25rem;
    line-height: 1;
  }
}
@media screen and (max-width: 479px) {
  ol.transition li {
    font-size: 1rem;
  }
}
ol.transition li a {
  width: 45px;
  height: 46px;
  margin: 0;
  padding: 0;
  color: #333;
  display: block;
  text-decoration: none;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}
@media screen and (max-width: 767px) {
  ol.transition li a {
    width: 30px;
    height: 30px;
  }
}
ol.transition li span {
  margin: 0;
  padding: 5px 0 0;
  display: block;
}
ol.transition li a:hover, ol.transition li.current {
  color: #FFF;
  font-weight: bold;
  background-color: #6bbb6e;
}

.header {
  width: 100%;
  height: 120px;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  z-index: 999;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  box-shadow: 0 0 4.8px 0.2px rgba(132, 132, 132, 0.4);
}
@media screen and (max-width: 899px) {
  .header {
    height: 90px;
  }
}
.header__inner {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 10;
}
.header__inner > .flex {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 50px;
  padding-right: 50px;
  background-image: url("../img/common/bg-img__hd.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  gap: 40px;
  position: relative;
}
@media screen and (max-width: 1279px) {
  .header__inner > .flex {
    padding-left: 25px;
    padding-right: 25px;
    gap: 0px;
  }
}
@media screen and (max-width: 479px) {
  .header__inner > .flex {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 329px) {
  .header__inner > .flex {
    gap: 15px;
  }
}
.header__inner > .flex .left {
  flex-grow: 1;
  flex-shrink: 0;
}
.header__inner > .flex .left h1 {
  padding: 0;
  margin: 0;
}
.header__inner > .flex .left h1 a {
  text-decoration: none;
  transition: 0.3s linear;
}
.header__inner > .flex .left h1 a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .header__inner > .flex .left h1 a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: alpha(opacity=70);
    -moz-transform: scale(0.97);
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
  }
}
.header__inner > .flex .left h1 a span {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #333;
}
@media screen and (max-width: 767px) {
  .header__inner > .flex .left h1 a span {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 479px) {
  .header__inner > .flex .left h1 a span {
    font-size: 0.9375rem;
  }
}
@media screen and (max-width: 1279px) {
  .header__inner > .flex .left h1 a .top {
    display: block;
    width: max-content;
  }
}
.header__inner > .flex .left h1 a .btm__large {
  font-size: 1.875rem;
  padding-right: 5px;
}
@media screen and (max-width: 767px) {
  .header__inner > .flex .left h1 a .btm__large {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 479px) {
  .header__inner > .flex .left h1 a .btm__large {
    font-size: 1.125rem;
  }
}
.header__inner > .flex .right {
  display: none;
}
@media screen and (max-width: 899px) {
  .header__inner > .flex .right {
    display: block;
  }
}

.gNav {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
  max-width: 960px;
}
@media screen and (max-width: 899px) {
  .gNav {
    display: none;
    position: fixed;
    top: 90px;
    left: 0;
    background-color: #f0f4d2;
    z-index: 1;
    box-shadow: rgba(132, 132, 132, 0.4) 0px 4px 4px -4px inset;
  }
}
.gNav__inner {
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 899px) {
  .gNav__inner {
    margin: 0 auto;
    padding-top: 100px;
    padding-bottom: 120px;
    max-width: min(90%, 600px);
  }
}
@media screen and (max-width: 479px) {
  .gNav__inner {
    padding-top: 60px;
  }
}
.gNav__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 120px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  column-gap: 10px;
}
@media screen and (max-width: 899px) {
  .gNav__list {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 40px;
  }
}
.gNav__item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: auto;
  height: 100%;
  padding: 0;
}
.gNav__item--name {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px 0 0;
}
@media screen and (max-width: 1279px) {
  .gNav__item--name {
    padding: 10px 0 0;
  }
}
@media screen and (max-width: 899px) {
  .gNav__item--name {
    padding: 0;
  }
}
.gNav__item--name a {
  width: 100%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  transition: 0.3s linear;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #333;
  text-align: center;
}
@media screen and (max-width: 1439px) {
  .gNav__item--name a {
    font-size: 1.0625rem;
  }
}
@media screen and (max-width: 1279px) {
  .gNav__item--name a {
    font-size: 0.9375rem;
    max-width: 140px;
  }
}
@media screen and (max-width: 899px) {
  .gNav__item--name a {
    font-size: 1.125rem;
    max-width: 100%;
  }
}
@media screen and (max-width: 479px) {
  .gNav__item--name a {
    font-size: 1rem;
  }
}
.gNav__item--name a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .gNav__item--name a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: alpha(opacity=70);
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}
.gNav__item--name a > img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  min-height: 52px;
  object-fit: none;
}
@media screen and (max-width: 899px) {
  .gNav__item--name a > img {
    display: none;
  }
}
@media (hover: hover) {
  .gNav__item--name a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: alpha(opacity=70);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
.gNav__item--name a span {
  display: inline-block;
}
@media screen and (max-width: 1279px) {
  .gNav__item--name a span br {
    display: none;
  }
}
@media screen and (max-width: 899px) {
  .gNav__item--name a span {
    text-align: left;
  }
}
.gNav__item--name a span span.pcNone2 {
  display: none;
}
@media screen and (max-width: 899px) {
  .gNav__item--name a span span.pcNone2 {
    display: inline-block;
  }
}
@media screen and (max-width: 899px) {
  .gNav__item--name a .polygon {
    padding-left: 30px;
    padding-right: 20px;
    position: relative;
  }
  .gNav__item--name a .polygon:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #FF9800;
    width: 7px;
    height: 11px;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
  }
}
@media screen and (max-width: 479px) {
  .gNav__item--name a .polygon {
    padding-right: 10px;
  }
}
.gNav .gNav__item.pc-none {
  display: none;
}
@media screen and (max-width: 899px) {
  .gNav .gNav__item.pc-none {
    display: block;
  }
}
@media screen and (max-width: 899px) {
  .gNav .gNav.open {
    display: block;
  }
}

.btnMenu {
  display: none;
}
@media screen and (max-width: 899px) {
  .btnMenu {
    display: -webkit-block;
    display: -moz-block;
    display: -ms-block;
    display: -o-block;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-image: url("../img/common/menu_bg_shape.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    position: relative;
    z-index: 10;
  }
  .btnMenu .menu-trigger {
    width: 100%;
    height: 100%;
    display: inline-block;
    text-decoration: none;
    transition: 0.1s linear;
    text-align: center;
    border-radius: 99%;
    border: 1px solid #fff;
    background-color: #00a99d;
  }
  .btnMenu .menu-trigger:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 899px) and (hover: hover) {
  .btnMenu .menu-trigger:hover {
    transform: rotate(360deg);
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
  }
}
@media screen and (max-width: 899px) {
  .btnMenu .menu-trigger span {
    display: -webkit-block;
    display: -moz-block;
    display: -ms-block;
    display: -o-block;
    display: block;
    width: 26px;
    height: 3px;
    background-color: white;
    border-radius: 1px;
  }
  .btnMenu .menu-trigger span:nth-of-type(1) {
    margin: 16px auto 6px;
  }
  .btnMenu .menu-trigger span:nth-of-type(2) {
    margin: 0 auto;
  }
  .btnMenu .menu-trigger span:nth-of-type(3) {
    margin: 6px auto 0px;
  }
  .btnMenu .menu-trigger.active span:nth-of-type(1) {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform: translateY(14px) rotate(-45deg);
    transform: translateY(14px) rotate(-45deg);
  }
  .btnMenu .menu-trigger.active span:nth-of-type(2) {
    left: 50%;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    animation-name: active-menu-bar;
    animation-duration: 0.8s;
    animation-timing-function: forwards;
  }
  .btnMenu .menu-trigger.active span:nth-of-type(3) {
    bottom: 15px;
    -webkit-transform: translateY(-14px) rotate(45deg);
    transform: translateY(-14px) rotate(45deg);
  }
}
@media screen and (max-width: 899px) and (max-width: 899px) {
  .btnMenu .menu-trigger.active span:nth-of-type(1) {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }
  .btnMenu .menu-trigger.active span:nth-of-type(3) {
    bottom: 12px;
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
  }
}

/*--- hamburger menu END ---*/
.btnBox {
  position: relative;
  z-index: 998;
}
.btnBox__pt {
  display: none;
  position: fixed;
  border-radius: 999px;
}
@media screen and (max-width: 767px) {
  .btnBox__pt {
    display: block;
    max-height: 62px;
    right: 15px;
  }
}
.btnBox__pt a {
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.btnBox__pt a:visited {
  opacity: 1;
}
.btnBox__pt a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .btnBox__pt a:hover {
    text-decoration: none;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: alpha(opacity=70);
    -moz-transform: scale(0.97);
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
  }
}
.btnBox__pt a:active {
  opacity: 1;
}
.btnBox__pt a:focus {
  opacity: 1;
}
.btnBox__pt a img {
  width: 100px;
  height: 100%;
  display: -webkit-block;
  display: -moz-block;
  display: -ms-block;
  display: -o-block;
  display: block;
  width: 62px;
}

.footer {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-top: 3px solid #fff;
}

.foot-top {
  padding-top: 70px;
  padding-bottom: 100px;
  background-image: url("../img/common/bg-img.jpg");
  background-size: cover;
  background-repeat: repeat;
  background-position: top left;
  position: relative;
}
@media screen and (max-width: 767px) {
  .foot-top {
    padding-bottom: 0;
  }
}
.foot-top:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  overflow: hidden;
  background-image: url("../img/common/joint-green.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.foot-top .flex {
  display: flex;
  justify-content: center;
  max-width: min(1400px, 100%);
  margin: 0 auto;
  padding: 0 40px;
  gap: 60px;
  position: relative;
}
@media screen and (max-width: 1279px) {
  .foot-top .flex {
    gap: 30px;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 767px) {
  .foot-top .flex {
    padding-bottom: 150px;
  }
}
@media screen and (max-width: 479px) {
  .foot-top .flex {
    padding: 0 25px 150px;
  }
}
.foot-top .flex:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 360px;
  height: 191px;
  background-image: url("../img/common/foot-illust.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
}
@media screen and (max-width: 1279px) {
  .foot-top .flex:before {
    background-size: 90% auto;
  }
}
@media screen and (max-width: 767px) {
  .foot-top .flex:before {
    width: calc(360px / 2);
    height: calc(191px / 2);
    background-size: cover;
    right: 15px;
    bottom: 20px;
  }
}
.foot-top ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.foot-top ul li {
  margin-bottom: 35px;
}
@media screen and (max-width: 479px) {
  .foot-top ul li {
    margin-bottom: 25px;
  }
}
.foot-top ul li a {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #333;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}
@media screen and (max-width: 1279px) {
  .foot-top ul li a {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 479px) {
  .foot-top ul li a {
    font-size: 0.9375rem;
  }
}
.foot-top ul li a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .foot-top ul li a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: alpha(opacity=70);
    -moz-transform: scale(0.97);
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
  }
}
.foot-top ul li a.first {
  display: inline-block;
  font-size: 1.5rem;
  position: relative;
  padding-left: 30px;
}
@media screen and (max-width: 1279px) {
  .foot-top ul li a.first {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 479px) {
  .foot-top ul li a.first {
    font-size: 1rem;
    padding-left: 20px;
  }
}
.foot-top ul li a.first:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  background-color: #00a99d;
  width: 16px;
  height: 21px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}
@media screen and (max-width: 1279px) {
  .foot-top ul li a.first:before {
    top: 6px;
  }
}
@media screen and (max-width: 479px) {
  .foot-top ul li a.first:before {
    width: 11px;
    height: 14px;
  }
}
.foot-top ul li a.second {
  display: inline-block;
  padding-left: 30px;
  margin-left: 2em;
  position: relative;
}
@media screen and (max-width: 479px) {
  .foot-top ul li a.second {
    padding-left: 20px;
  }
}
.foot-top ul li a.second:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  background-color: #11bada;
  width: 15px;
  height: 18px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}
@media screen and (max-width: 1279px) {
  .foot-top ul li a.second:before {
    top: 6px;
  }
}
@media screen and (max-width: 479px) {
  .foot-top ul li a.second:before {
    width: 11px;
    height: 14px;
  }
}
.foot-top ul li a.third {
  display: inline-block;
  padding-left: 30px;
  margin-left: 4em;
  position: relative;
}
@media screen and (max-width: 479px) {
  .foot-top ul li a.third {
    padding-left: 20px;
  }
}
.foot-top ul li a.third:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  background-color: #68d9ef;
  width: 15px;
  height: 18px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}
@media screen and (max-width: 1279px) {
  .foot-top ul li a.third:before {
    top: 6px;
  }
}
@media screen and (max-width: 479px) {
  .foot-top ul li a.third:before {
    width: 11px;
    height: 14px;
  }
}
.foot-top .left, .foot-top .middle, .foot-top .right {
  min-width: 250px;
}

.foot-btm {
  background-color: #00a99d;
}
.foot-btm .flex {
  display: flex;
  justify-content: space-between;
  max-width: min(1400px, 100%);
  margin: 0 auto;
  padding: 0 40px;
}
@media screen and (max-width: 1279px) {
  .foot-btm .flex {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .foot-btm .flex {
    padding: 0 15px;
    flex-direction: column-reverse;
  }
}
.foot-btm .left {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  margin-top: 20px;
  margin-bottom: 40px;
}
@media screen and (max-width: 1279px) {
  .foot-btm .left {
    gap: 30px;
    margin-top: 40px;
  }
}
@media screen and (max-width: 767px) {
  .foot-btm .left {
    margin-top: 0;
    margin-bottom: 100px;
  }
}
@media screen and (max-width: 479px) {
  .foot-btm .left {
    gap: 20px;
  }
}
.foot-btm .left img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: 206px;
}
@media screen and (max-width: 1279px) {
  .foot-btm .left img {
    width: 150px;
  }
}
@media screen and (max-width: 479px) {
  .foot-btm .left img {
    width: 100px;
  }
}
.foot-btm .left .txtWrap .sitename {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  padding-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .foot-btm .left .txtWrap .sitename {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 479px) {
  .foot-btm .left .txtWrap .sitename {
    font-size: 1.125rem;
  }
}
.foot-btm .left .txtWrap .paragraph {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  padding-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .foot-btm .left .txtWrap .paragraph {
    font-size: 1rem;
  }
}
@media screen and (max-width: 479px) {
  .foot-btm .left .txtWrap .paragraph {
    font-size: 0.8125rem;
    padding-bottom: 5px;
  }
}
.foot-btm .left .txtWrap .paragraph span {
  display: inline-block;
  background-color: #6bbb6e;
  padding: 3px 4px;
  margin-right: 10px;
  font-size: 1.125rem;
  color: #fff;
}
@media screen and (max-width: 479px) {
  .foot-btm .left .txtWrap .paragraph span {
    font-size: 0.9375rem;
  }
}
.foot-btm .left .txtWrap .paragraph a {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 6px;
  display: inline-block;
  padding-right: 25px;
  position: relative;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}
@media screen and (max-width: 479px) {
  .foot-btm .left .txtWrap .paragraph a {
    font-size: 0.9375rem;
    margin-top: 15px;
  }
}
@media (hover: hover) {
  .foot-btm .left .txtWrap .paragraph a:hover {
    -moz-transform: scale(0.97);
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
  }
}
.foot-btm .left .txtWrap .paragraph a:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/common/icon_extLink_w.png");
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: bottom 2px right;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}
.foot-btm .right {
  margin-top: 20px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .foot-btm .right {
    margin-top: 40px;
    margin-bottom: 60px;
  }
}
.foot-btm .right ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 30px 40px;
  width: 400px;
  height: 70%;
}
@media screen and (max-width: 1279px) {
  .foot-btm .right ul {
    flex-direction: row;
    width: auto;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .foot-btm .right ul {
    gap: 25px 30px;
  }
}
@media screen and (max-width: 479px) {
  .foot-btm .right ul {
    gap: 15px 30px;
  }
}
.foot-btm .right ul li a {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  font-family: "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
  position: relative;
  padding-left: 30px;
}
@media screen and (max-width: 767px) {
  .foot-btm .right ul li a {
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 479px) {
  .foot-btm .right ul li a {
    font-size: 0.9375rem;
  }
}
.foot-btm .right ul li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}
.foot-btm .right ul li a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .foot-btm .right ul li a {
    /*&:hover{
      @include opacity;
    }*/
  }
  .foot-btm .right ul li a:hover::before {
    width: 15px;
    height: 15px;
  }
}

#copyright {
  background-color: #00a99d;
  font: 500 14px/1.5 "Zen Maru Gothic", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-break: break-all;
  border-top: 1px solid #fff;
}
@media screen and (max-width: 767px) {
  #copyright {
    font-size: 13px;
  }
}
