@charset "UTF-8";
/* ----------------------------------------------------------------
header
  ----------------------------------------------------------------- */
.header {
 background-color: #fff;
 border-radius: 10px;
 padding: 10px 10px 10px 30px;
 position: fixed;
 left: 30px;
 top: 30px;
 width: calc(100% - 60px);
 z-index: 997;
}
.header-inr {
 align-items: center;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 width: 100%;
}
.header .header-logo {
 width: 251px;
}
@media only screen and (max-width: 768px) {
 .header {
  border-radius: 5px;
  padding: 14px 10px 14px 12px;
  left: 15px;
  top: 15px;
  width: calc(100% - 30px);
 }
 .header .header-logo {
  position: relative;
  width: 140px;
  z-index: 996;
 }
}
/* ----------------------------------------------------------------
    pc-ナビ
  ----------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
 #navigation {}
 #navigation .navigation-menu {
  align-items: center;
  display: flex;
  font-size: 16px;
  font-weight: 400;
  justify-content: center;
  line-height: 1.0em;
  margin-left: auto;
  margin-right: 0px;
  text-align: center;
 }
 #navigation .navigation-item {
  margin-left: 33px;
  white-space: nowrap;
 }
 #navigation .navigation-item a:hover {
  color: var(--color-accent);
  transition: 0.5s
 }
 #navigation .navigation-btn a {
  align-items: center;
  background: var(--color-accent);
  border-radius: 10px;
  color: #fff;
  display: flex;
  font-weight: 700;
  justify-content: center;
  height: 60px;
  width: 200px;
 }
 #navigation .navigation-btn a:hover {
  background: var(--color-black);
  color: #fff;
 }
}
/* ----------------------------------------------------------------
    SP-ナビ
  ----------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
 /*----------ハンバーガーアイコン----------*/
 .hamburger {
  border: 1px solid #e50012;
  cursor: pointer;
  display: block;
  height: 40px;
  position: absolute;
  right: 5px;
  top: 5px;
  transition: all .4s;
  width: 40px;
  z-index: 999;
 }
 .hamburger span {
  background-color: #e50012;
  box-sizing: border-box;
  display: inline-block;
  height: 1px;
  left: 12px;
  margin: 0 auto;
  position: absolute;
  transition: all .4s;
  width: 16px;
 }
 .hamburger span:nth-of-type(1) {
  top: 14px;
 }
 .hamburger span:nth-of-type(2) {
  top: 19px;
 }
 .hamburger span:nth-of-type(3) {
  top: 24px;
 }
 .hamburger span:nth-of-type(1) {
  -webkit-animation: menu-ber01 .5s forwards;
  animation: menu-ber01 .5s forwards;
 }
 .hamburger span:nth-of-type(2) {
  opacity: 1;
  transition: all .25s .25s;
 }
 .hamburger span:nth-of-type(3) {
  -webkit-animation: menu-ber02 .5s forwards;
  animation: menu-ber02 .5s forwards;
 }
 .active span:nth-of-type(1) {
  -webkit-animation: active-menu-ber01 .5s forwards;
  animation: active-menu-ber01 .5s forwards;
 }
 .active span:nth-of-type(2) {
  opacity: 0;
 }
 .active span:nth-of-type(3) {
  -webkit-animation: active-menu-ber03 .5s forwards;
  animation: active-menu-ber03 .5s forwards;
 }
 @keyframes menu-ber01 {
  0% {
   transform: translateY(8px) rotate(30deg);
  }
  50% {
   transform: translateY(8px) rotate(0);
  }
  100% {
   transform: translateY(0) rotate(0);
  }
 }
 @keyframes menu-ber02 {
  0% {
   transform: translateY(-8px) rotate(-30deg);
  }
  50% {
   transform: translateY(-8px) rotate(0);
  }
  100% {
   transform: translateY(0) rotate(0);
  }
 }
 @keyframes active-menu-ber01 {
  0% {
   transform: translateY(0) rotate(0);
  }
  50% {
   transform: translateY(5px) rotate(0);
  }
  100% {
   transform: translateY(5px) rotate(30deg);
  }
 }
 @keyframes active-menu-ber03 {
  0% {
   transform: translateY(0) rotate(0);
  }
  50% {
   transform: translateY(-5px) rotate(0);
  }
  100% {
   transform: translateY(-5px) rotate(-30deg);
  }
 }
 #navigation {
  background-color: #e50012;
  display: none;
  height: calc(100% - 0px);
  margin-right: 0px;
  overflow: scroll;
  position: fixed;
  right: 0px;
  top: 0px;
  width: 100%;
  z-index: 998;
 }
 #navigation .header-logo-sp {
  background-color: #162532;
  height: 75px;
  left: 0px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 1000;
 }
 #navigation .header-logo-sp img {
  left: 27px;
  position: absolute;
  top: 29px;
  width: 140px;
  z-index: 1001;
 }
 #navigation .navi-inr {
  height: calc(100% - 0px);
  margin: 75px auto 0;
  width: 100%;
 }
 #navigation .navigation-menu {
  display: block;
  font-size: 16px;
  line-height: 1.0em;
  margin: 0 auto;
  position: relative;
  text-align: left;
  width: 85.3%;
 }
 #navigation .navigation-item {
  color: rgba(255, 255, 255, 0.6);
  margin-left: 0px;
  padding: 15px 0 0;
  white-space: nowrap;
  width: 100%;
 }
 #navigation .navigation-item a {
  color: rgba(255, 255, 255, 1);
 }
 #navigation .navigation-item a:hover {
  color: #162532;
  transition: 0.5s
 }
 #navigation .active-item {
  animation-delay: 0.5s;
  animation-duration: 0.5s; /* アニメーション時間 */
  animation-name: active-navigation-item; /* アニメーション名 */
  animation-fill-mode: forwards;
 }
 @-webkit-keyframes active-navigation-item {
  0% {
   opacity: 0; /* 透明 */
  }
  100% {
   opacity: 1; /* 透明 */
  }
 }
 @keyframes active-navigation-item {
  0% {
   opacity: 0; /* 透明 */
  }
  100% {
   opacity: 1; /* 透明 */
  }
 }
}
/* CSS部 */ :root {
 --primary-color: #fff;
 --bg-color: #f9f9f9;
 --border-color: #fff;
 --duration: 0.3s; /* アニメーションの速度 */
}
/* 全体のコンテナ */
.accordion-container {
 margin: 0 auto;
 width: 100%
}
/* 各メニューの枠線 */
.accordion-item {
 border-bottom: 1px solid #162532;
 padding: 25px 0;
}
/* タップするボタン部分 */
.accordion-trigger {
 align-items: center;
 background: none;
 border: none;
 color: var(--primary-color);
 cursor: pointer;
 -webkit-tap-highlight-color: transparent; /* スマホのタップ時青ハイライトを消す */
 display: flex;
 font-size: 16px;
 justify-content: space-between;
 outline: none;
 padding: 0;
 text-align: left;
 width: 100%;
}
/* 開閉矢印アイコン */
.trigger-icon {
 height: 14px;
 position: relative;
 width: 14px;
}
.trigger-icon::before, .trigger-icon::after {
 background-color: #162532;
 content: "";
 position: absolute;
 transition: transform var(--duration) ease;
}
/* プラス・マイナスを表現する直線 */
.trigger-icon::before {
 top: 6px;
 left: 0;
 width: 14px;
 height: 1px;
}
.trigger-icon::after {
 top: 0;
 left: 6px;
 width: 1px;
 height: 14px;
}
/* 開いた時にマイナスにする */
.accordion-trigger[aria-expanded="true"] .trigger-icon::after {
 transform: rotate(90deg);
 opacity: 0;
}
.accordion-trigger[aria-expanded="true"] .trigger-icon::before {
 transform: rotate(180deg);
}
/* 開閉する中身のエリア */
.accordion-content {
 height: 0;
 overflow: hidden;
 visibility: hidden;
 transition: height var(--duration) ease, visibility var(--duration);
}
/* 開いた状態のスタイル */
.accordion-content.is-open {
 visibility: visible;
}
/* 内側のパディング（高さを0にするために外出させておく） */
.content-inner {
 color: #fff;
 font-size: 14px;
 line-height: 1;
}
#navigation .accordion-item .navigation-item {
 align-items: center;
 border-bottom: 0px solid #162532;
 display: flex;
 font-size: 15px;
 justify-content: space-between;
 padding: 15px 0 0 0;
}
#navigation .accordion-item .navigation-item:first-child {
 padding: 25px 0 0 0;
}
#navigation .accordion-item .navigation-item a {}
#navigation .accordion-item a:hover {
 color: #162532;
 transition: 0.5s
}
.accordion-item2 .accordion-trigger {
 align-items: center;
 background: none;
 border-bottom: 1px solid #162532;
 color: var(--primary-color);
 cursor: pointer;
 -webkit-tap-highlight-color: transparent; /* スマホのタップ時青ハイライトを消す */
 display: flex;
 font-size: 16px;
 justify-content: space-between;
 outline: none;
 padding: 25px 0;
 text-align: left;
 width: 100%;
}
/* リンク矢印アイコン */
.link-icon {
 height: 14px;
 position: relative;
 width: 14px;
}
.link-icon::before, .link-icon::after {
 background-color: #162532;
 content: "";
 position: absolute;
 transition: transform var(--duration) ease;
}
/* プラス・マイナスを表現する直線 */
.link-icon::before {
 top: 4px;
 transform: rotate(30deg);
 left: 0;
 width: 14px;
 height: 1px;
}
.link-icon::after {
 top: 4px;
 transform: rotate(60deg);
 left: 7px;
 width: 1px;
 height: 14px;
}
/* 全体のコンテナ */
.footer .accordion-container {
 margin: 0 auto;
 width: 100%
}
/* 各メニューの枠線 */
.footer .accordion-item {
 border-bottom: 1px solid #d0d3d6;
 padding: 25px 0;
}
/* タップするボタン部分 */
.footer .accordion-trigger {
 align-items: center;
 background: none;
 border: none;
 color: var(--primary-color);
 cursor: pointer;
 -webkit-tap-highlight-color: transparent; /* スマホのタップ時青ハイライトを消す */
 display: flex;
 font-size: 16px;
 justify-content: space-between;
 outline: none;
 padding: 0;
 text-align: left;
 width: 100%;
}
/* 開閉矢印アイコン */
.footer .trigger-icon {
 height: 14px;
 position: relative;
 width: 14px;
}
.footer .trigger-icon::before, .footer .trigger-icon::after {
 background-color: #e50012;
 content: "";
 position: absolute;
 transition: transform var(--duration) ease;
}
/* プラス・マイナスを表現する直線 */
.footer .trigger-icon::before {
 top: 6px;
 left: 0;
 width: 14px;
 height: 1px;
}
.footer .trigger-icon::after {
 top: 0;
 left: 6px;
 width: 1px;
 height: 14px;
}
/* 開いた時にマイナスにする */
.footer .accordion-trigger[aria-expanded="true"] .trigger-icon::after {
 transform: rotate(90deg);
 opacity: 0;
}
.footer .accordion-trigger[aria-expanded="true"] .trigger-icon::before {
 transform: rotate(180deg);
}
/* 開閉する中身のエリア */
.footer .accordion-content {
 height: 0;
 overflow: hidden;
 visibility: hidden;
 transition: height var(--duration) ease, visibility var(--duration);
}
/* 開いた状態のスタイル */
.footer .accordion-content.is-open {
 visibility: visible;
}
/* 内側のパディング（高さを0にするために外出させておく） */
.footer .content-inner {
 color: #fff;
 font-size: 14px;
 line-height: 1;
}
.footer .accordion-item .navigation-item {
 align-items: center;
 border-bottom: 0px solid #d0d3d6;
 display: flex;
 font-size: 15px;
 justify-content: space-between;
 padding: 15px 0 0 0;
}
.footer .accordion-item .navigation-item:first-child {
 padding: 25px 0 0 0;
}
.footer .accordion-item .navigation-item a {
 color: #fff;
}
.footer .accordion-item a:hover {
 color: #e50012;
 transition: 0.5s
}
.footer .accordion-item2 .accordion-trigger {
 align-items: center;
 background: none;
 border-bottom: 1px solid #d0d3d6;
 color: var(--primary-color);
 cursor: pointer;
 -webkit-tap-highlight-color: transparent; /* スマホのタップ時青ハイライトを消す */
 display: flex;
 font-size: 16px;
 justify-content: space-between;
 outline: none;
 padding: 25px 0;
 text-align: left;
 width: 100%;
}
.footer .accordion-item2 .accordion-trigger a {
 color: #fff;
}
/* リンク矢印アイコン */
.footer .link-icon {
 height: 14px;
 position: relative;
 width: 14px;
}
.footer .link-icon::before, .footer .link-icon::after {
 background-color: #e50012;
 content: "";
 position: absolute;
 transition: transform var(--duration) ease;
}
/* プラス・マイナスを表現する直線 */
.footer .link-icon::before {
 top: 4px;
 transform: rotate(30deg);
 left: 0;
 width: 14px;
 height: 1px;
}
.footer .link-icon::after {
 top: 4px;
 transform: rotate(60deg);
 left: 7px;
 width: 1px;
 height: 14px;
}