@charset "UTF-8";
/*――――――――――――――――――――――――――――――――――――――――――――
/* ベースファイルを定義
――――――――――――――――――――――――――――――――――――――――――――――*/
/**********************************************************

ブレイクポイント

***********************************************************/
/* ============================================================================
 Update: 2010/01/05
 reset用CSS
============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

* > *:first-child {
  margin-top: 0;
}

* > *:last-child {
  margin-bottom: 0;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
address,
img,
strong,
figure,
del,
ins,
dfn,
em,
abbr,
acronym,
kbd,
q,
pre,
cite,
code,
samp,
sub,
sup,
var,
fieldset,
form,
label,
legend,
table,
caption,
thead,
tbody,
tfoot,
tr,
th,
td,
dl,
dt,
dd,
ol,
ul,
li {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font-style: normal;
  font-size: 100%;
}

html {
  overflow-y: scroll;
}

ol,
ul {
  list-style: none;
}

hr {
  display: none;
}

del,
ins {
  text-decoration: none;
}

blockquote,
q {
  quotes: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

/***************************************************

css

***************************************************/
/* flex box
――――――――――――――――――――――――――――――――――――――――――――――*/
.flex {
  display: flex;
  display: -webkit-flex;
}

.flex-c-c {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
}

.flex-n-c {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
}

.flex-c-n {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

/*――――――――――――――――――――――――――――――――――――――――――――
/* body
――――――――――――――――――――――――――――――――――――――――――――――*/
body {
  color: #000;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  line-height: 1.6;
  counter-reset: title;
  overflow-x: hidden;
}

@media screen and (max-width: 767px) {
  html.js-fixed {
    height: 100%;
    overflow: hidden;
  }
  body {
    min-width: inherit;
  }
  body.js-fixed {
    height: 100%;
    overflow: hidden;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* pc sp 出し分けのためのcss
――――――――――――――――――――――――――――――――――――――――――――――*/
@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}
@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* デフォルトの設定
――――――――――――――――――――――――――――――――――――――――――――――*/
img {
  display: block;
  max-width: 100%;
}

a {
  transition: 0.2s;
}
a:hover {
  opacity: 0.8;
}

@media screen and (min-width: 768px) {
  a:hover {
    opacity: 0.8;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* 共通のレイアウト
――――――――――――――――――――――――――――――――――――――――――――――*/
/*** コンテナ ***/
.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/*** section ***/
.sec {
  padding: 80px 50px 80px;
  position: relative;
}

.sec-inner {
  max-width: 1000px;
}

.sec-ttl {
  margin: 2em 0 2em;
  font-size: 30px;
}

@media screen and (max-width: 767px) {
  .sec {
    padding: 50px 15px 50px;
    position: relative;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* mixinを読み込み
――――――――――――――――――――――――――――――――――――――――――――――*/
/*――――――――――――――――――――――――――――――――――――――――――――
/* プラグインに関するcss
――――――――――――――――――――――――――――――――――――――――――――――*/
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

[dir=rtl] .slick-prev {
  right: -25px;
  left: auto;
}

.slick-prev:before {
  content: "←";
}

[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}

[dir=rtl] .slick-next {
  right: auto;
  left: -25px;
}

.slick-next:before {
  content: "→";
}

[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  /* width: 20px;
  height: 20px;
  padding: 5px; */
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

/*――――――――――――――――――――――――――――――――――――――――――――
/* レイアウトに関するcss
――――――――――――――――――――――――――――――――――――――――――――――*/
header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100px;
  padding: 0 50px;
}

.header__inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.header__logo {
  position: absolute;
  width: 189px;
  top: 42px;
  left: 0;
  right: 0;
  margin: auto;
}
.header__logo a:hover {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100px;
    padding: 0 15px;
  }
  .header__logo {
    position: absolute;
    width: 170px;
    top: 15px;
    left: 15px;
    right: auto;
    margin: auto;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* menu
――――――――――――――――――――――――――――――――――――――――――――――*/
.header__menu {
  position: absolute;
  top: 40px;
  right: 0px;
  z-index: 15;
  cursor: pointer;
}

.HeaderMenu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  transform: translateX(600px);
  max-width: 565px;
  width: 100%;
  height: 100%;
  padding: 96px 65px 0;
  background-color: #fff;
  transition: 0.3s;
  overflow: hidden;
}
.HeaderMenu.js-active {
  transform: translateX(0px);
}
@media screen and (max-width: 1200px) {
  .HeaderMenu {
    max-width: 400px;
    padding-right: 30px;
    padding-left: 30px;
  }
}

.HeaderMenu__ovarlay {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 998;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
}
.HeaderMenu__ovarlay.js-active {
  visibility: visible;
}

.HeaderMenu__close {
  position: absolute;
  top: 40px;
  left: 385px;
  cursor: pointer;
}
@media screen and (max-width: 1200px) {
  .HeaderMenu__close {
    top: 30px;
    left: auto;
    right: 30px;
  }
}

.menuList {
  max-width: 360px;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.menuList__item {
  border-bottom: solid 1px #e6e6e6;
}

.menuList__link {
  display: block;
  padding: 15px 15px 15px 33px;
  position: relative;
  font-size: 16px;
}
.menuList__link::before {
  display: block;
  position: absolute;
  top: 19px;
  left: 5px;
  width: 18px;
  height: 18px;
  background: url(../img/icon_menu-arrow.svg) no-repeat center center;
  background-size: 100%;
  content: "";
}
.menuList__link:hover {
  color: #0053a7;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .header__menu {
    position: absolute;
    top: 15px;
    right: 0px;
    z-index: 15;
    cursor: pointer;
  }
  .header__menu-icon {
    width: 30px;
  }
  .HeaderMenu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    transform: translateX(100%);
    max-width: inherit;
    width: 100%;
    height: 100%;
    padding: 0 15px 0;
    background-color: #fff;
    transition: 0.3s;
  }
  .HeaderMenu.js-active {
    transform: translateX(0px);
  }
  .HeaderMenu__close {
    position: absolute;
    top: 15px;
    left: auto;
    right: 20px;
    z-index: 10;
    cursor: pointer;
  }
  .HeaderMenu__close-icon {
    width: 34px;
  }
  .menuList {
    max-width: inherit;
    padding-top: 60px;
    padding-bottom: 30px;
  }
  .menuList__item {
    border-bottom: solid 1px #e6e6e6;
  }
  .menuList__link {
    display: block;
    padding: 12px 12px 12px 33px;
    position: relative;
    font-size: 14px;
  }
  .menuList__link::before {
    display: block;
    position: absolute;
    top: 15px;
    left: 5px;
    width: 18px;
    height: 18px;
    background: url(../img/icon_menu-arrow.svg) no-repeat center center;
    background-size: 100%;
    content: "";
  }
  .menuList__link:hover {
    color: #0053a7;
  }
}
.footerCont {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 103px;
  padding: 10px 32px 15px 15px;
}

.footer__logoImg {
  width: 374px;
}

.footerInfo {
  margin: 0 0 0 60px;
}

.footerInfo__item {
  display: flex;
}
.footerInfo__item + .footerInfo__item {
  margin-top: 3px;
}

.footerInfo__ttl {
  font-size: 14px;
  font-weight: bold;
}

.footerInfo__txt {
  padding: 0 0 0 3px;
  font-size: 14px;
}

.footer__bitknot {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  padding: 18px 15px;
}

.footerInfo__txtLink {
  position: relative;
}
.footerInfo__txtLink::before {
  display: block;
  position: absolute;
  top: 4px;
  right: -17px;
  bottom: 0;
  width: 13px;
  height: 13px;
  background: url(../img/icon_tab.svg) no-repeat center center;
  background-size: 100%;
  content: "";
}

/*** footerBtm ***/
.footerBtm {
  background-color: #fafafa;
  color: #838383;
  padding: 21px 50px;
}

.footerBtm__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  width: 100%;
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.footerBtmLinkList {
  display: flex;
  align-items: center;
}

.footerBtmLinkList__item + .footerBtmLinkList__item {
  padding-left: 15px;
  margin-left: 15px;
  border-left: 1px solid #838383;
}

.footerBtmLinkList__link {
  display: block;
  font-size: 14px;
  line-height: 1;
}

.footerBtm__message {
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .footerCont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 30px 15px;
  }
  .footer__logo {
    margin: 0 0 20px 0;
  }
  .footer__logoImg {
    width: 220px;
  }
  .footerInfo {
    margin: 0 0 0 0;
  }
  .footerInfo__item {
    display: flex;
  }
  .footerInfo__item + .footerInfo__item {
    margin-top: 3px;
  }
  .footerInfo__ttl {
    font-size: 14px;
    font-weight: bold;
  }
  .footerInfo__txt {
    font-size: 14px;
  }
  .footer__bitknot {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
    padding: 18px 15px;
  }
  .footerInfo__txtLink {
    position: relative;
  }
  .footerInfo__txtLink::before {
    display: block;
    position: absolute;
    top: 4px;
    right: -17px;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: url(../img/icon_tab.svg) no-repeat center center;
    background-size: 100%;
    content: "";
  }
  /*** footerBtm ***/
  .footerBtm {
    background-color: #fafafa;
    height: auto;
    color: #838383;
    padding: 20px 15px;
  }
  .footerBtm__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
    height: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }
  .footerBtmLinkList {
    display: flex;
    align-items: center;
    margin: 0 0 14px 0;
  }
  .footerBtmLinkList__item + .footerBtmLinkList__item {
    padding-left: 15px;
    margin-left: 15px;
    border-left: 1px solid #838383;
  }
  .footerBtmLinkList__link {
    display: block;
    font-size: 13px;
    line-height: 1;
  }
  .footerBtm__message {
    font-size: 10px;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――

/* moduleに関するcss
――――――――――――――――――――――――――――――――――――――――――――――*/
/*** 波線 ***/
.bg-wave {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 50px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='60' height='50' viewBox='0 0 20 20' preserveAspectRatio='none'%3e%3cpath fill='%23ff7a2b' d='M-5-15q5 5 10 0t10 0 10 0v12q-5 5-10 0t-10 0-10 0zM-5 5q5 5 10 0t10 0 10 0v12q-5 5-10 0t-10 0-10 0z'/%3e%3c/svg%3e");
  background-repeat: repeat-x;
  background-size: 50px 50px;
}
.bg-wave.bg-top {
  top: -20px;
}
.bg-wave.bg-bottom {
  bottom: -20px;
}

/*** 斜め線 ***/
.bg-slope {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 50px;
}
.bg-slope svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #ff7a2b;
}
.bg-slope.bg-slope-top {
  top: -50px;
}
.bg-slope.bg-slope-bottom {
  bottom: -50px;
  transform: rotate(180deg);
}

.btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 30px 0 -10px;
}

.btn, .btn-push {
  display: block;
  border: solid 1px transparent;
  margin: 0 10px 10px 0;
  padding: 6px 18px;
  background-color: #345;
  color: #fff;
  text-align: center;
  font-size: 16px;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.btn-push {
  background-color: #f44336;
  box-shadow: 0 5px 0 0 #d2190b;
  transform: translateY(-5px);
  color: #fff;
}
.btn-push:hover {
  box-shadow: 0 1px 0 0 #d2190b;
  transform: translateY(-1px);
}

.card {
  display: inline-flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  box-shadow: 0 2px 5px #ccc;
}
.card *:first-child {
  margin-top: 0;
}
.card *:last-child {
  margin-bottom: 0;
}

.card__imgBox {
  position: relative;
}

.ratio-3-2 {
  position: relative;
}
.ratio-3-2::before {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 66.66%;
  content: "";
}
.ratio-3-2 > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__content {
  padding: 20px;
}

.card__ttl {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.card__txt {
  color: #777;
  font-size: 14px;
  line-height: 1.5;
}

.card__link {
  text-align: center;
  border-top: 1px solid #eee;
  padding: 20px;
}

.card__link a {
  text-decoration: none;
  color: #0bd;
  margin: 0 10px;
}

.card__link a:hover {
  color: #0090aa;
}

/* ローディング */
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.9);
}

.loading .loader {
  font-size: 20px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  animation: load5 1.1s infinite ease;
  transform: translateZ(0);
}

.loadingMessage {
  margin-top: 70px;
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
}
@keyframes load5 {
  0%, 100% {
    box-shadow: 0 -2.6em 0 0 #50bdf0, 1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2), 2.5em 0 0 0 rgba(80, 189, 240, 0.2), 1.75em 1.75em 0 0 rgba(80, 189, 240, 0.2), 0 2.5em 0 0 rgba(80, 189, 240, 0.2), -1.8em 1.8em 0 0 rgba(80, 189, 240, 0.2), -2.6em 0 0 0 rgba(80, 189, 240, 0.5), -1.8em -1.8em 0 0 rgba(80, 189, 240, 0.7);
  }
  12.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, 0.7), 1.8em -1.8em 0 0 #50bdf0, 2.5em 0 0 0 rgba(80, 189, 240, 0.2), 1.75em 1.75em 0 0 rgba(80, 189, 240, 0.2), 0 2.5em 0 0 rgba(80, 189, 240, 0.2), -1.8em 1.8em 0 0 rgba(80, 189, 240, 0.2), -2.6em 0 0 0 rgba(80, 189, 240, 0.2), -1.8em -1.8em 0 0 rgba(80, 189, 240, 0.5);
  }
  25% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, 0.5), 1.8em -1.8em 0 0 rgba(80, 189, 240, 0.7), 2.5em 0 0 0 #50bdf0, 1.75em 1.75em 0 0 rgba(80, 189, 240, 0.2), 0 2.5em 0 0 rgba(80, 189, 240, 0.2), -1.8em 1.8em 0 0 rgba(80, 189, 240, 0.2), -2.6em 0 0 0 rgba(80, 189, 240, 0.2), -1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2);
  }
  37.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, 0.2), 1.8em -1.8em 0 0 rgba(80, 189, 240, 0.5), 2.5em 0 0 0 rgba(80, 189, 240, 0.7), 1.75em 1.75em 0 0 #50bdf0, 0 2.5em 0 0 rgba(80, 189, 240, 0.2), -1.8em 1.8em 0 0 rgba(80, 189, 240, 0.2), -2.6em 0 0 0 rgba(80, 189, 240, 0.2), -1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2);
  }
  50% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, 0.2), 1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2), 2.5em 0 0 0 rgba(80, 189, 240, 0.5), 1.75em 1.75em 0 0 rgba(80, 189, 240, 0.7), 0 2.5em 0 0 #50bdf0, -1.8em 1.8em 0 0 rgba(80, 189, 240, 0.2), -2.6em 0 0 0 rgba(80, 189, 240, 0.2), -1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2);
  }
  62.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, 0.2), 1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2), 2.5em 0 0 0 rgba(80, 189, 240, 0.2), 1.75em 1.75em 0 0 rgba(80, 189, 240, 0.5), 0 2.5em 0 0 rgba(80, 189, 240, 0.7), -1.8em 1.8em 0 0 #50bdf0, -2.6em 0 0 0 rgba(80, 189, 240, 0.2), -1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2);
  }
  75% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, 0.2), 1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2), 2.5em 0 0 0 rgba(80, 189, 240, 0.2), 1.75em 1.75em 0 0 rgba(80, 189, 240, 0.2), 0 2.5em 0 0 rgba(80, 189, 240, 0.5), -1.8em 1.8em 0 0 rgba(80, 189, 240, 0.7), -2.6em 0 0 0 #50bdf0, -1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2);
  }
  87.5% {
    box-shadow: 0 -2.6em 0 0 rgba(80, 189, 240, 0.2), 1.8em -1.8em 0 0 rgba(80, 189, 240, 0.2), 2.5em 0 0 0 rgba(80, 189, 240, 0.2), 1.75em 1.75em 0 0 rgba(80, 189, 240, 0.2), 0 2.5em 0 0 rgba(80, 189, 240, 0.2), -1.8em 1.8em 0 0 rgba(80, 189, 240, 0.5), -2.6em 0 0 0 rgba(80, 189, 240, 0.7), -1.8em -1.8em 0 0 #50bdf0;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.col {
  margin-bottom: 20px;
  padding: 0 10px;
}

.row-pc-2 > .col {
  width: 50%;
  padding: 0 10px;
}

.row-pc-3 > .col {
  width: 33.33333%;
  padding: 0 10px;
}

.row-pc-4 > .col {
  width: 25%;
  padding: 0 10px;
}

.row-pc-5 > .col {
  width: 20%;
  padding: 0 10px;
}

@media screen and (max-width: 767px) {
  .row {
    margin: 0 auto;
  }
  .row-sp-1 > .col {
    width: 100%;
    padding: 0 10px;
  }
  .row-sp-2 > .col {
    width: 50%;
    padding: 0 10px;
  }
  .row-sp-3 > .col {
    width: 33.33333%;
    padding: 0 10px;
  }
  .row-sp-4 > .col {
    width: 25%;
    padding: 0 10px;
  }
  .row-sp-5 > .col {
    width: 20%;
    padding: 0 10px;
  }
}
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.slider {
  overflow: hidden;
}

.alertBox {
  width: 100%;
  max-width: 450px;
  height: 150px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #7ec8f2;
  box-shadow: 0 3px 8px rgba(78, 78, 78, 0.33);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  display: none;
  transform: translate(-50%, -50%);
}

.alertBox .inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
}

.returnBanner {
  width: 268px;
  position: fixed;
  top: 39px;
  left: 0;
  z-index: 100;
}

.returnBanner a {
  width: 100%;
  min-height: 53px;
  padding: 10px 10px 10px 46px;
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  border: 2px solid #fff;
  border-left: none;
  border-radius: 0 25px 25px 0;
  background-color: #3C69FF;
  position: relative;
  word-break: break-all;
  transition: 0.3s;
}

.returnBanner img {
  margin-top: -10px;
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 101;
  pointer-events: none;
}

.returnBanner .returnBannerTxt {
  margin-top: -2px;
  transition: 0.3s;
}

.returnBanner.is-scroll a {
  margin-left: -209px;
}

.returnBanner.is-scroll .returnBannerTxt {
  opacity: 0;
  visibility: hidden;
}

.returnBanner.is-scroll a:hover {
  margin-left: 0;
}

.returnBanner.is-scroll a:hover .returnBannerTxt {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 768px) {
  .returnBanner {
    top: 70px;
  }
}
/**********************************************************

共通

***********************************************************/
/*――――――――――――――――――――――――――――――――――――――――――――
/* h2タイトル
――――――――――――――――――――――――――――――――――――――――――――――*/
.ttlBox {
  margin: 0 0 60px 0;
}

.ttl-en {
  margin: 0 0 3px 0;
  font-size: 12px;
  text-align: center;
  font-weight: bold;
}

.ttl-ja {
  font-size: 34px;
  position: relative;
  text-align: center;
}
.ttl-ja::before {
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -13px;
  width: 38px;
  height: 3px;
  border-radius: 10px;
  margin: auto;
  content: "";
}

@media screen and (max-width: 767px) {
  .ttlBox {
    margin: 0 0 40px 0;
  }
  .ttl-en {
    margin: 0 0 0 0;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
  }
  .ttl-ja {
    font-size: 24px;
    position: relative;
    text-align: center;
  }
  .ttl-ja::before {
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -10px;
    width: 30px;
    height: 2px;
    border-radius: 10px;
    margin: auto;
    content: "";
  }
}
/**********************************************************

fixed

***********************************************************/
.fixedLink {
  display: block;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  width: 145px;
  transition: 0.2s;
}
.fixedLink.js-active {
  opacity: 0;
  visibility: hidden;
}

@media screen and (max-width: 767px) {
  .fixedLink {
    display: block;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 999;
    width: 100px;
  }
}
/**********************************************************

 mv

***********************************************************/
.mvArea {
  height: 640px;
  background: url(../img/bg_mv.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
}
.mvArea .sec-inner {
  position: relative;
  height: 100%;
}

.mv__ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 12;
  padding: 9px 0 0 0;
}

.mv__ttl-img {
  width: 450px;
}

.mv__fishers {
  position: absolute;
  z-index: 10;
}
.mv__fishers.fish01 {
  left: -110px;
  bottom: -90px;
}
.mv__fishers.fish02 {
  top: 11px;
  right: -141px;
}

.mvBtm__sango-left {
  width: 300px;
  position: absolute;
  left: -9px;
  bottom: 14px;
  z-index: 5;
}

.mvBtm__sango-right {
  width: 350px;
  position: absolute;
  right: 0;
  bottom: -35px;
  z-index: 5;
}

.mvBtm__bar {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -1px;
}

@media screen and (max-width: 767px) {
  .mvArea {
    height: 500px;
    background: url(../img/bg_mv.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
  }
  .mvArea .sec-inner {
    position: relative;
    height: 100%;
    width: 300px;
  }
  .mv__ttl {
    padding: 0 15px 0;
  }
  .mv__ttl-img {
    max-width: 260px;
    margin: 0 auto;
  }
  .mv__fishers {
    position: absolute;
    z-index: 10;
  }
  .mv__fishers.fish01 {
    left: -150px;
    bottom: 30px;
    width: 280px;
  }
  .mv__fishers.fish02 {
    top: 40px;
    right: -130px;
    margin: auto;
    width: 190px;
  }
  .mvBtm__sango-left {
    width: 150px;
    position: absolute;
    left: -9px;
    bottom: 0;
    z-index: 5;
  }
  .mvBtm__sango-right {
    width: 150px;
    position: absolute;
    right: 0;
    bottom: -20pxpx;
    z-index: 5;
  }
  .mvBtm__bar {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -1px;
  }
}
/**********************************************************

leadArea

***********************************************************/
.leadArea {
  padding-top: 33px;
  padding-bottom: 33px;
}

.lead__txt {
  margin: 0 0 17px 0;
  text-align: center;
  font-size: 18px;
}

.btnBox {
  display: flex;
  justify-content: center;
}

.btnLink {
  display: block;
  width: 258px;
}

@media screen and (max-width: 767px) {
  .leadArea {
    padding-top: 33px;
    padding-bottom: 33px;
  }
  .lead__txt {
    margin: 0 0 17px 0;
    text-align: center;
    font-size: 15px;
  }
  .btnBox {
    display: flex;
    justify-content: center;
  }
  .btnLink {
    display: block;
    width: 258px;
  }
}
/**********************************************************

aboutSangoArea

***********************************************************/
.aboutSangoArea {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
  height: 1146px;
  overflow: hidden;
}
.aboutSangoArea::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(1, 72, 151, 0) 0%, rgba(1, 72, 151, 0) 15%, rgb(1, 73, 153) 30%, rgb(1, 74, 156) 40%, rgb(1, 75, 159) 60%, rgb(1, 73, 153) 70%, rgba(1, 72, 151, 0) 85%, rgba(1, 72, 151, 0) 100%);
  content: "";
}
.aboutSangoArea .sec-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 5;
  height: 100%;
  padding-bottom: 61px;
}

.aboutSango__waterBox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.aboutSango__water {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.aboutSango__sangoBox {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.aboutSango__sango {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.aboutSango__ttl {
  margin: 0 0 45px 0;
}

.aboutSango__txt {
  color: #fff;
  font-size: 18px;
  line-height: 2.44;
}

@media screen and (max-width: 767px) {
  .aboutSangoArea {
    position: relative;
    padding-top: 140px;
    padding-bottom: 120px;
    height: auto;
    overflow: hidden;
  }
  .aboutSangoArea::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(1, 72, 151, 0) 0%, rgba(1, 72, 151, 0) 15%, rgb(1, 73, 153) 30%, rgb(1, 74, 156) 40%, rgb(1, 75, 159) 60%, rgb(1, 73, 153) 70%, rgba(1, 72, 151, 0) 85%, rgba(1, 72, 151, 0) 100%);
    content: "";
  }
  .aboutSangoArea .sec-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
    height: 100%;
    padding-bottom: 61px;
  }
  .aboutSango__waterBox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 340px;
    overflow: hidden;
  }
  .aboutSango__water {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  .aboutSango__sangoBox {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 340px;
    overflow: hidden;
  }
  .aboutSango__sango {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
  }
  .aboutSango__ttl {
    margin: 0 0 40px 0;
    max-width: 400px;
  }
  .aboutSango__txt {
    color: #fff;
    font-size: 14px;
    line-height: 2.2;
  }
}
/**********************************************************

featureArea

***********************************************************/
.featureArea {
  background-color: #007fff;
  padding-top: 0;
  padding-bottom: 86px;
  counter-reset: num;
}

@media screen and (max-width: 767px) {
  .featureArea {
    background-color: #007fff;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* featureFirstBox
――――――――――――――――――――――――――――――――――――――――――――――*/
.featureFirstBox {
  display: flex;
  height: 452px;
  color: #fff;
  overflow: hidden;
  margin: 0 -59px 0 0;
}

.featureFirst__cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 49%;
  padding: 9px 40px 0 36px;
}

.ttlBox {
  margin-bottom: 45px;
}

.ttl-ja::before {
  background-color: #fff;
}

.featureFirst__ttl-lead {
  font-size: 16px;
  padding: 0 21px;
  line-height: 1.6875;
}

.featureFirst__imgBox {
  display: flex;
  align-items: center;
  width: 56%;
  margin: -12px -53px 0 0;
  padding: 0 20px;
}

.featureFirst__img {
  width: 509px;
}

/*** sp ***/
@media screen and (max-width: 767px) {
  .featureFirstBox {
    display: block;
    height: auto;
    color: #fff;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  .featureFirst__cont {
    display: block;
    width: auto;
    padding: 0 15px;
  }
  .ttl-ja::before {
    background-color: #fff;
  }
  .featureFirst__ttl-lead {
    background: linear-gradient(180deg, rgba(0, 127, 255, 0) 0%, rgb(0, 127, 255) 50%, rgb(0, 127, 255) 100%);
    font-size: 15px;
    padding: 20px 0 40px 0;
    position: relative;
    z-index: 2;
  }
  .featureFirst__imgBox {
    display: block;
    width: auto;
    margin: -110px -40px -205px 0;
    padding: 0 0;
  }
  .featureFirst__img {
    width: 509px;
    margin: 0 auto;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* featureList
――――――――――――――――――――――――――――――――――――――――――――――*/
.featureList {
  padding: 42px 50px 73px;
  background-color: #fff;
  border-radius: 5px;
}

.featureList__ttl {
  display: flex;
  align-items: center;
  margin: 0 0 19px 0;
  color: #007fff;
  font-size: 22px;
}
.featureList__ttl::before {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: 0 12px 0 0;
  padding: 0 0 2px;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  background-color: #007fff;
  text-align: center;
  counter-increment: num;
  content: counter(num);
}

.featureList__lead {
  font-size: 16px;
  line-height: 1.68;
}

@media screen and (max-width: 767px) {
  .featureList {
    padding: 30px 15px 40px;
    background-color: #fff;
    border-radius: 5px;
  }
  .featureList__ttl {
    display: flex;
    align-items: center;
    margin: 0 0 19px 0;
    color: #007fff;
    font-size: 18px;
  }
  .featureList__ttl::before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    margin: 0 10px 0 0;
    padding: 0 0 2px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background-color: #007fff;
    text-align: center;
    counter-increment: num;
    content: counter(num);
  }
  .featureList__lead {
    font-size: 14px;
    line-height: 1.68;
  }
}
/*** featureList1 ***/
.featureList1__box {
  margin: 40px -50px 0;
  position: relative;
}

.featureList1__inner {
  display: flex;
}

.featureList1__centerTxt {
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
  width: 40px;
  text-align: center;
  border-radius: 4px;
  writing-mode: vertical-rl;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px 12px;
  letter-spacing: -0.07em;
}

.featureList1__cont {
  width: 50%;
  padding: 15px 40px 73px;
}

.featureList1__imgBox {
  position: relative;
}

.featureList1__imgBox-bgTop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 22px;
}

.featureList1__imgBox-bgBtm {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 22px;
}

.featureList1__ttl {
  margin: 0 0 11px 0;
  color: #039dff;
  font-weight: bold;
  font-size: 20px;
}

.featureList1__txt {
  font-size: 14px;
  line-height: 1.7;
}

@media screen and (max-width: 767px) {
  /*** featureList1 ***/
  .featureList1__box {
    margin: 30px 0 40px;
    position: relative;
  }
  .featureList1__inner {
    display: block;
  }
  .featureList1__cont {
    width: auto;
    padding: 0;
  }
  .featureList1__cont + .featureList1__cont {
    margin-top: 40px;
  }
  .featureList1__imgBox {
    position: relative;
    margin: 0 0 15px 0;
  }
  .featureList1__imgBox-bgTop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 15px;
  }
  .featureList1__imgBox-bgBtm {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 15px;
  }
  .featureList1__ttl {
    margin: 0 0 10px 0;
    color: #039dff;
    font-weight: bold;
    font-size: 18px;
  }
  .featureList1__txt {
    font-size: 14px;
    line-height: 1.7;
  }
}
/*** featureList2 ***/
.featureList__item:nth-child(2) {
  margin: 0 -50px;
  padding: 53px 50px 27px;
  position: relative;
}
.featureList__item:nth-child(2)::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 3px solid #efefef;
  border-bottom: 3px solid #efefef;
  transform: skewY(-1deg);
  background: url(../img/img_feature2-map.svg) no-repeat right 9px center;
  background-size: 392px 294px;
  content: "";
}
.featureList__item:nth-child(2) .featureList__lead {
  width: 55%;
}

.featureList2__imgBox {
  position: absolute;
  right: 0;
  top: 0;
}

@media screen and (max-width: 767px) {
  /*** featureList2 ***/
  .featureList__item:nth-child(2) {
    margin: 0 -15px;
    padding: 40px 15px 0;
    position: relative;
  }
  .featureList__item:nth-child(2)::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 3px solid #efefef;
    border-bottom: 3px solid #efefef;
    transform: skewY(-2deg);
    background: none;
    content: "";
  }
  .featureList__item:nth-child(2) .featureList__lead {
    width: auto;
  }
  .featureList__item:nth-child(2) .featureList2__mapImg {
    margin: 0 auto;
    position: relative;
    bottom: -2px;
  }
}
/*** featureList3 ***/
.featureList__item:nth-child(3) {
  padding-top: 53px;
}

.featureList3__imgBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 43px -50px 30px;
  padding: 20px 50px;
  background-size: cover;
  height: 411px;
  position: relative;
  background: url(../img/bg_feature3-imgbox.png) no-repeat top center;
  background-size: cover;
  overflow: hidden;
}

.featureList3__img-ttl {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.featureList3__img-txt {
  font-size: 16px;
  color: #fff;
  line-height: 1.75;
}

.featureList3__img-human01 {
  position: absolute;
  top: 55px;
  right: -150px;
  left: 0;
  z-index: 2;
  margin: auto;
  width: 160px;
}

.featureList3__img-human02 {
  position: absolute;
  top: 120px;
  right: -701px;
  left: 0;
  z-index: 2;
  margin: auto;
  width: 120px;
}

.featureList3__btmTxt {
  margin-top: 44px;
  line-height: 1.68;
}

@media screen and (max-width: 767px) {
  /*** featureList3 ***/
  .featureList__item:nth-child(3) {
    padding-top: 40px;
  }
  .featureList3__imgBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px -15px 30px;
    padding: 40px 15px;
    background-size: cover;
    height: 411px;
    position: relative;
    background: url(../img/bg_feature3-imgbox.png) no-repeat top center;
    background-size: cover;
  }
  .featureList3__img-ttl {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
  }
  .featureList3__img-txt {
    font-size: 14px;
    color: #fff;
    line-height: 1.75;
  }
  .featureList3__img-human01 {
    position: absolute;
    bottom: 20px;
    top: auto;
    left: 20px;
    right: auto;
    z-index: 2;
    margin: auto;
    width: 100px;
  }
  .featureList3__img-human02 {
    position: absolute;
    top: 40px;
    right: 20px;
    left: auto;
    z-index: 2;
    margin: auto;
    width: 90px;
  }
  .featureList3__btmTxt {
    margin-top: 30px;
    line-height: 1.68;
    font-size: 14px;
  }
}
/**********************************************************

creaturesArea

***********************************************************/
.creaturesArea {
  padding: 101px 0 109px;
  background-color: #eff2f7;
  position: relative;
}
.creaturesArea .ttlBox {
  margin: 0 0 40px 0;
  color: #0053a7;
}
.creaturesArea .ttl-ja::before {
  background-color: #0053a7;
}

.loopImgBox {
  display: flex;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.loopImg {
  width: auto;
  max-width: inherit;
  height: 592px;
}
.loopImg:nth-child(1) {
  animation: loop 100s -50s linear infinite;
}
.loopImg:nth-child(2) {
  animation: loop2 100s linear infinite;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
.creatures__sango-left {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 371px;
}

.creatures__sango-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 378px;
}

@media screen and (max-width: 767px) {
  .creaturesArea {
    padding: 50px 0 80px;
    background-color: #eff2f7;
    position: relative;
  }
  .creaturesArea .ttlBox {
    margin: 0 0 40px 0;
    color: #0053a7;
  }
  .creaturesArea .ttl-ja::before {
    background-color: #0053a7;
  }
  .loopImgBox {
    display: flex;
    position: relative;
    z-index: 2;
    overflow: hidden;
  }
  .loopImg {
    width: auto;
    max-width: inherit;
    height: 300px;
  }
  .loopImg:nth-child(1) {
    animation: loop 100s -50s linear infinite;
  }
  .loopImg:nth-child(2) {
    animation: loop2 100s linear infinite;
  }
  @keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }
  .creatures__sango-left {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 150px;
  }
  .creatures__sango-right {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 150px;
  }
}
/**********************************************************

statusArea

***********************************************************/
.statusArea {
  padding-top: 79px;
  padding-bottom: 91px;
}
.statusArea .ttlBox {
  margin: 0 0 48px 0;
  color: #0053a7;
}
.statusArea .ttl-ja::before {
  background-color: #0053a7;
}

.status__lead {
  margin: 0 0 56px 0;
  font-size: 16px;
  text-align: center;
  line-height: 1.7;
}

.statusList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -8px -65px;
}

.statusList__item {
  width: 33.333%;
  width: 33.3333333333%;
  padding: 0 8px;
  margin: 0 0 59px 0;
}

.statusList__imgBox {
  display: flex;
  justify-content: center;
  margin: 0 0 13px 0;
}
.statusList__item:nth-child(2) .statusList__imgBox {
  margin-top: -15px;
}

.statusList__item:nth-child(5) .statusList__imgBox {
  margin-top: -4px;
}

.statusList__item:nth-child(6) .statusList__imgBox {
  margin-top: -39px;
}

.statusList__txt {
  text-align: center;
  font-size: 14px;
  color: #747883;
  font-weight: bold;
  line-height: 1.7;
}
.statusList__txt span {
  border-bottom: solid 1px #1088ff;
}

.statusList__txt-note {
  margin: 8px 0 0 0;
  color: #747883;
  font-size: 11px;
  line-height: 1.72;
  text-align: center;
  font-weight: bold;
}

@media screen and (max-width: 1200px) {
  .statusArea {
    padding-bottom: 141px;
  }
}
@media screen and (max-width: 767px) {
  .statusArea {
    padding-top: 50px;
    padding-bottom: 100px;
  }
  .statusArea .ttlBox {
    margin: 0 0 40px 0;
    color: #0053a7;
  }
  .statusArea .ttl-ja::before {
    background-color: #0053a7;
  }
  .status__lead {
    margin: 0 0 40px 0;
    font-size: 14px;
    text-align: center;
    line-height: 1.7;
  }
  .statusList {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px -65px;
  }
  .statusList__item {
    width: 50%;
    padding: 0 15px;
    margin: 0 0 59px 0;
  }
  .statusList__imgBox {
    display: flex;
    justify-content: center;
    width: 75%;
    margin: 0 auto 13px;
  }
  .statusList__item:nth-child(2) .statusList__imgBox {
    margin-top: -10px;
  }
  .statusList__item:nth-child(5) .statusList__imgBox {
    margin-top: -4px;
  }
  .statusList__item:nth-child(6) .statusList__imgBox {
    margin-top: -36px;
  }
  .statusList__txt {
    text-align: left;
    font-size: 13px;
    color: #747883;
    font-weight: bold;
    line-height: 1.7;
  }
  .statusList__txt span {
    border-bottom: solid 1px #1088ff;
  }
  .statusList__txt-note {
    margin: 8px 0 0 0;
    color: #747883;
    font-size: 10px;
    line-height: 1.72;
    text-align: center;
    font-weight: bold;
  }
}
/**********************************************************

roleArea

***********************************************************/
.roleArea {
  padding: 0 0 0;
  position: relative;
}
.roleArea .ttlBox {
  margin: 0 0 48px 0;
  color: #fff;
}
.roleArea .ttl-ja::before {
  background-color: #fff;
}

.role__lead {
  text-align: center;
  color: #fff;
  line-height: 1.7;
}

.role__cont {
  position: absolute;
  top: 85px;
  left: 0;
  right: 0;
  z-index: 5;
  width: 100%;
  max-width: 1500px;
  margin: auto;
}

.role__mainImgBox {
  max-width: 1500px;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  .roleArea {
    margin-top: 140px;
    padding: 0;
  }
  .role__cont {
    position: absolute;
    top: -200px;
    left: 0;
    right: 0;
    padding: 80px 15px 0;
    z-index: 5;
    width: 100%;
    max-width: 1500px;
    margin: auto;
    background-color: #95cefe;
  }
}
@media screen and (max-width: 767px) {
  .roleArea {
    height: auto;
    margin-top: 140px;
    padding: 0;
  }
  .roleArea .ttlBox {
    margin: 0 0 40px 0;
    color: #fff;
  }
  .roleArea .ttl-ja::before {
    background-color: #fff;
  }
  .role__lead {
    text-align: center;
    color: #fff;
    line-height: 1.7;
    font-size: 14px;
  }
  .role__cont {
    position: absolute;
    top: -180px;
    left: 0;
    right: 0;
    padding: 50px 15px 0;
    z-index: 5;
    width: 100%;
    max-width: 1500px;
    margin: auto;
    background-color: #95cefe;
  }
  .role__mainImgBox {
    max-width: 1500px;
    margin: 0 auto;
  }
  .role__lead {
    text-align: center;
    color: #fff;
    line-height: 1.7;
  }
}
@media screen and (max-width: 420px) {
  .roleArea {
    height: auto;
    margin-top: 170px;
    padding: 0;
  }
  .role__cont {
    top: -210px;
  }
}
/**********************************************************

comparedArea

***********************************************************/
.comparedArea {
  padding: 69px 50px 82px;
  background-image: repeating-linear-gradient(90deg, #e7f3fa, #e7f3fa 1px, transparent 1px, transparent 32px), repeating-linear-gradient(0deg, #e7f3fa, #e7f3fa 1px, #f5f9fc 1px, #f5f9fc 32px);
  position: relative;
}
.comparedArea .ttlBox {
  margin: 0 0 46px 0;
  padding: 0 0 0 19px;
  color: #0053a7;
}
.comparedArea .ttl-ja::before {
  background-color: #0053a7;
}

.compared__contBox {
  display: flex;
  align-items: flex-end;
}

@media screen and (max-width: 1000px) {
  .comparedArea {
    padding: 50px 15px 50px;
    background-image: repeating-linear-gradient(90deg, #e7f3fa, #e7f3fa 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, #e7f3fa, #e7f3fa 1px, #f5f9fc 1px, #f5f9fc 16px);
    position: relative;
  }
  .comparedArea .ttlBox {
    margin: 0 0 40px 0;
    padding: 0;
    color: #0053a7;
  }
  .comparedArea .ttl-ja::before {
    background-color: #0053a7;
  }
  .compared__contBox {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* comparedData
――――――――――――――――――――――――――――――――――――――――――――――*/
.comparedData {
  width: 550px;
  height: 100%;
  position: relative;
}

.comparedDataList {
  height: 100%;
}

.comparedDataList__item {
  position: relative;
  height: 100%;
}

.comparedDataList__imgBox {
  position: relative;
  top: 0;
}

@media screen and (max-width: 1000px) {
  .comparedData {
    order: 2;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
  }
  .comparedDataList {
    height: 100%;
  }
  .comparedDataList__item {
    position: relative;
  }
  .comparedDataList__imgBox {
    position: static;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* comparedDataStandard
――――――――――――――――――――――――――――――――――――――――――――――*/
.comparedDataStandard {
  position: absolute;
  right: 110px;
  bottom: 0;
  background-color: #fff;
  width: 144px;
  padding: 23px 25px;
  border-radius: 20px;
}

.comparedDataStandard__ttl {
  margin: 0 0 10px 0;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

.comparedDataStandard__mark {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 13px 0 0;
  border-radius: 50%;
  background-color: #2da0d5;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
}

.comparedDataStandard__txt {
  font-size: 14px;
  color: #2da0d5;
  font-weight: bold;
}

.comparedDataStandard__txtBox {
  display: flex;
  align-items: center;
}
.comparedDataStandard__txtBox + .comparedDataStandard__txtBox {
  margin-top: 5px;
}

.comparedDataStandard__txtBox.txt02 .comparedDataStandard__mark {
  background-color: #a9dbf2;
}
.comparedDataStandard__txtBox.txt02 .comparedDataStandard__txt {
  color: #a9dbf2;
}

@media screen and (max-width: 1000px) {
  .comparedDataStandard {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fff;
    width: 120px;
    padding: 20px 20px;
    border-radius: 20px;
  }
  .comparedDataStandard__ttl {
    margin: 0 0 6px 0;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
  }
  .comparedDataStandard__mark {
    display: block;
    width: 15px;
    height: 15px;
    margin: 0 10px 0 0;
    border-radius: 50%;
    background-color: #2da0d5;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
  }
  .comparedDataStandard__txt {
    font-size: 12px;
    color: #2da0d5;
    font-weight: bold;
  }
  .comparedDataStandard__txtBox {
    display: flex;
    align-items: center;
  }
  .comparedDataStandard__txtBox + .comparedDataStandard__txtBox {
    margin-top: 5px;
  }
  .comparedDataStandard__txtBox.txt02 .comparedDataStandard__mark {
    background-color: #a9dbf2;
  }
  .comparedDataStandard__txtBox.txt02 .comparedDataStandard__txt {
    color: #a9dbf2;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* comparedHistory
――――――――――――――――――――――――――――――――――――――――――――――*/
.comparedTxt {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding-top: 65px;
  margin: 0 0 0 -90px;
  position: relative;
  z-index: 2;
}

.comparedTxt__lead {
  margin: 0 0 52px 0;
  padding: 0 32px 0 40px;
  font-size: 16px;
  line-height: 1.7;
}

.comparedHistory {
  background-color: #fff;
  border-radius: 20px;
  margin-top: auto;
  padding: 31px 40px 41px;
}

.comparedHistoryList {
  position: relative;
}

.comparedHistoryList__year {
  margin: 0 0 15px 0;
  text-align: center;
  color: #0053a7;
  font-size: 39px;
  font-weight: bold;
}
.comparedHistoryList__year span {
  font-size: 30px;
}

.comparedHistoryList__txt {
  font-size: 15px;
  color: #313745;
  line-height: 1.86;
}

/*** slick ***/
.comparedHistoryList .slick-prev,
.comparedHistoryList .slick-next {
  width: 26px;
  height: 26px;
  border: solid 2px #0053a7;
  border-radius: 50%;
  top: 39px;
  left: 0;
  z-index: 20;
  right: -177px;
  margin: auto;
}
.comparedHistoryList .slick-prev::before,
.comparedHistoryList .slick-next::before {
  display: none;
}
.comparedHistoryList .slick-prev::after,
.comparedHistoryList .slick-next::after {
  display: block;
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-top: 2px solid #0053a7;
  border-right: 2px solid #0053a7;
  transform: rotate(45deg);
  content: "";
}
.comparedHistoryList .slick-prev {
  right: 0;
  left: -180px;
}
.comparedHistoryList .slick-prev::after {
  left: 8px;
  right: auto;
  transform: rotate(-135deg);
}
.comparedHistoryList .slick-disabled {
  opacity: 0.3;
}

@media screen and (max-width: 1000px) {
  .comparedTxt {
    order: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 0;
    margin: 0 auto 30px;
    max-width: 500px;
  }
  .comparedTxt__lead {
    margin: 0 0 30px 0;
    padding: 0 0;
    font-size: 14px;
    line-height: 1.7;
  }
  .comparedHistory {
    background-color: #fff;
    border-radius: 20px;
    margin-top: auto;
    padding: 20px 15px 20px;
  }
  .comparedHistoryList {
    position: relative;
  }
  .comparedHistoryList__year {
    margin: 0 0 12px 0;
    text-align: center;
    color: #0053a7;
    font-size: 30px;
    font-weight: bold;
  }
  .comparedHistoryList__year span {
    font-size: 30px;
  }
  .comparedHistoryList__txt {
    font-size: 14px;
    color: #313745;
    line-height: 1.86;
  }
  /*** slick ***/
  .comparedHistoryList .slick-prev,
  .comparedHistoryList .slick-next {
    width: 26px;
    height: 26px;
    border: solid 2px #0053a7;
    border-radius: 50%;
    top: 26px;
    left: 0;
    z-index: 20;
    right: -177px;
    margin: auto;
  }
  .comparedHistoryList .slick-prev::before,
  .comparedHistoryList .slick-next::before {
    display: none;
  }
  .comparedHistoryList .slick-prev::after,
  .comparedHistoryList .slick-next::after {
    display: block;
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    border-top: 2px solid #0053a7;
    border-right: 2px solid #0053a7;
    transform: rotate(45deg);
    content: "";
  }
  .comparedHistoryList .slick-prev {
    right: 0;
    left: -180px;
  }
  .comparedHistoryList .slick-prev::after {
    left: 8px;
    right: auto;
    transform: rotate(-135deg);
  }
  .comparedHistoryList .slick-disabled {
    opacity: 0.3;
  }
}
/**********************************************************

affectArea

***********************************************************/
.affectArea {
  padding-top: 73px;
  padding-bottom: 80px;
}
.affectArea .ttlBox {
  margin-bottom: 53px;
  color: #fff;
}
.affectArea .ttl-ja::before {
  background-color: #fff;
}

.affectBox {
  padding: 50px 8px 10px;
  background-color: #312f41;
  border-radius: 18px;
}

.affectCont {
  padding: 67px 50px 95px;
  background-color: #ffd23c;
  position: relative;
}
.affectCont::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_affect.png) no-repeat center center;
  background-size: 1200px;
  content: "";
}
.affectCont::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url(../img/bg_affect-btm.svg) repeat-x bottom -10px center;
  background-size: 41px 48px;
  content: "";
}

.affectList {
  position: relative;
  z-index: 1;
}

.affectList__item {
  display: flex;
}
.affectList__item + .affectList__item {
  margin-top: 47px;
}

.affectList__cont {
  width: 470px;
  margin: 12px 40px 0 0;
}
.affectList__item:nth-child(2n+1) .affectList__cont {
  margin: 12px 0 0 40px;
  order: 2;
}

.affectList__ttl {
  margin: 0 0 20px 0;
}

.affectList__txt {
  font-size: 15px;
  color: #313745;
  line-height: 1.86;
}

.affectList__imgBox {
  width: 376px;
}
.affectList__item:nth-child(2n+1) .affectList__imgBox {
  order: 1;
}

@media screen and (max-width: 767px) {
  .affectArea {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .affectArea .ttlBox {
    margin-bottom: 40px;
    color: #fff;
  }
  .affectArea .ttl-ja::before {
    background-color: #fff;
  }
  .affectBox {
    padding: 30px 8px 10px;
    background-color: #312f41;
    border-radius: 18px;
  }
  .affectCont {
    padding: 30px 15px 60px;
    background-color: #ffd23c;
    position: relative;
  }
  .affectCont::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: url(../img/bg_affect.png) no-repeat center center;
    background-size: 1200px;
    content: "";
  }
  .affectCont::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: url(../img/bg_affect-btm.svg) repeat-x bottom -10px center;
    background-size: 30px 40px;
    content: "";
  }
  .affectList {
    position: relative;
    z-index: 1;
  }
  .affectList__item {
    display: flex;
    flex-direction: column;
  }
  .affectList__item + .affectList__item {
    margin-top: 47px;
  }
  .affectList__cont {
    width: auto;
    margin: 0 0 0 0;
    order: 2;
  }
  .affectList__item:nth-child(2n+1) .affectList__cont {
    margin: 0 0 0 0;
    order: 2;
  }
  .affectList__ttl {
    margin: 0 0 13px 0;
  }
  .affectList__ttlImg {
    height: 50px;
  }
  .affectList__txt {
    font-size: 14px;
    color: #313745;
    line-height: 1.7;
  }
  .affectList__imgBox {
    margin: 0 0 18px 0;
    order: 1;
    width: auto;
  }
  .affectList__item:nth-child(2n+1) .affectList__imgBox {
    order: 1;
  }
}
/**********************************************************

garbageArea

***********************************************************/
.garbageArea {
  background-color: #373e44;
  position: relative;
  margin-top: 100px;
  margin-bottom: 30px;
  padding-top: 170px;
  padding-bottom: 200px;
}
.garbageArea .ttlBox {
  margin-bottom: 90px;
  color: #fff;
}
.garbageArea .ttl-ja::before {
  background-color: #fff;
}
.garbageArea::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_garbage-light.svg) no-repeat top left;
  background-size: cover;
  opacity: 0.015;
  content: "";
}
.garbageArea .sec-inner {
  position: relative;
  z-index: 2;
}

.garbage__bg-top {
  position: absolute;
  top: -84px;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 155px;
}

.garbage__bg-btm {
  position: absolute;
  bottom: -96px;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 155px;
}

.garbage__bg-can01 {
  position: absolute;
  top: 20px;
  left: 0;
  width: 360px;
  opacity: 0.4;
}

.garbage__bg-can02 {
  position: absolute;
  top: 18px;
  right: 0;
  width: 380px;
  opacity: 0.4;
}

.garbage__bg-can03Box {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 204px;
  background: url(../img/bg_garbage-can03.svg) repeat-x center center;
  background-size: 1280px 173px;
}

.garbage__bg-can03 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 1400px;
}

.garbage__txt {
  text-align: center;
  font-size: 15px;
  line-height: 1.86;
  color: #fff;
}
.garbage__txt a {
  text-decoration: underline;
}
.garbage__txt a:hover {
  text-decoration: none;
}

.garbage__imgBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0 30px 0;
}

.garbage__img {
  max-width: 634px;
}

.garbage__imgCap {
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
  color: #cbcbcb;
}

@media screen and (max-width: 767px) {
  .garbageArea {
    background-color: #373e44;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    padding-top: 80px;
    padding-bottom: 100px;
  }
  .garbageArea .ttlBox {
    margin-bottom: 40px;
    color: #fff;
  }
  .garbageArea .ttl-ja {
    font-size: 24px;
  }
  .garbageArea .ttl-ja::before {
    background-color: #fff;
  }
  .garbageArea::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: url(../img/bg_garbage-light.svg) no-repeat top left;
    background-size: cover;
    opacity: 0.015;
    content: "";
  }
  .garbageArea .sec-inner {
    position: relative;
    z-index: 2;
  }
  .garbage__bg-top {
    position: absolute;
    top: -84px;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 155px;
  }
  .garbage__bg-btm {
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: 5;
    width: 100%;
    height: auto;
  }
  .garbage__bg-can01 {
    position: absolute;
    top: 0;
    left: -20px;
    width: 180px;
    opacity: 0.4;
  }
  .garbage__bg-can02 {
    position: absolute;
    top: 0;
    right: -20px;
    width: 190px;
    opacity: 0.4;
  }
  .garbage__bg-can03Box {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 204px;
    background: url(../img/bg_garbage-can03.svg) repeat-x center center;
    background-size: 610px 113px;
  }
  .garbage__bg-can03 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1400px;
  }
  .garbage__txt {
    text-align: left;
    font-size: 14px;
    line-height: 1.86;
    color: #fff;
  }
  .garbage__txt a {
    text-decoration: underline;
  }
  .garbage__txt a:hover {
    text-decoration: none;
  }
  .garbage__imgBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0 30px 0;
  }
  .garbage__img {
    width: 100%;
    max-width: inherit;
  }
  .garbage__imgCap {
    margin-top: 8px;
    font-size: 12px;
    text-align: center;
    color: #cbcbcb;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* garbageGraphArea
――――――――――――――――――――――――――――――――――――――――――――――*/
.garbageGraphArea {
  display: flex;
  justify-content: center;
  margin-top: 39px;
}

.garbageGraphBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 9px;
}

.garbageGraph__img {
  margin: 0 0 27px 0;
}

.garbageGraph__imgCap {
  margin-top: auto;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5;
}

.garbageGraphBox.graph01 {
  padding-top: 30px;
  margin-left: 5px;
}
.garbageGraphBox.graph01 .garbageGraph__img {
  width: 413px;
}

.garbageGraphBox.graph02 .garbageGraph__img {
  width: 471px;
}

.garbageGraphBox.graph01 .garbageGraph__imgCap {
  padding-right: 16px;
}

.garbageGraphBox.graph02 .garbageGraph__imgCap {
  padding: 0 0 0 60px;
}

@media screen and (max-width: 767px) {
  .garbageGraphArea {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 39px;
  }
  .garbageGraphBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  .garbageGraphBox + .garbageGraphBox {
    margin-top: 40px;
  }
  .garbageGraph__img {
    margin: 0 0 20px 0;
  }
  .garbageGraph__imgCap {
    margin-top: auto;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
  }
  .garbageGraphBox.graph01 {
    padding-top: 0;
    margin-left: 0;
  }
  .garbageGraphBox.graph01 .garbageGraph__img {
    width: 413px;
  }
  .garbageGraphBox.graph02 .garbageGraph__img {
    width: 471px;
  }
  .garbageGraphBox.graph01 .garbageGraph__imgCap {
    padding-right: 0;
  }
  .garbageGraphBox.graph02 .garbageGraph__imgCap {
    padding: 0;
  }
}
/**********************************************************

canArea

***********************************************************/
.canArea {
  padding: 199px 0 150px;
  background: url(../img/bg_can.png) no-repeat center center;
  background-size: cover;
  position: relative;
}
.canArea::before {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 140px;
  margin: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  content: "";
}

.can__ttl {
  display: flex;
  justify-content: center;
  margin: 0 0 62px 0;
}

.canSlider {
  margin: 0 0 61px 0;
}

.canSlider__item {
  padding: 0 25px;
}

.canSlider__img {
  width: 240px;
}

.can__lead {
  display: flex;
  justify-content: center;
}

.can__leadImg {
  width: 550px;
}

@media screen and (max-width: 767px) {
  .canArea {
    margin-top: -30px;
    padding: 70px 0 100px;
    background: url(../img/bg_can.png) no-repeat center center;
    background-size: cover;
    position: relative;
  }
  .canArea::before {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 140px;
    margin: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
    content: "";
  }
  .can__ttl {
    display: flex;
    justify-content: center;
    margin: 0 0 30px 0;
    padding: 0 15px;
  }
  .can__ttlImg {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .canSlider {
    margin: 0 0 30px 0;
  }
  .canSlider__item {
    padding: 0 15px;
  }
  .canSlider__img {
    width: 240px;
  }
  .can__lead {
    display: flex;
    justify-content: center;
    padding: 0 15px;
  }
  .can__leadImg {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}
/**********************************************************

numArea

***********************************************************/
.numArea {
  margin-top: 110px;
  margin-bottom: 72px;
  padding: 106px 80px 150px;
  background: url(../img/bg_num-side.svg) repeat-y left top, url(../img/bg_num-side.svg) repeat-y right top;
  background-size: 43px, 43px;
}
.numArea .ttlBox {
  margin: 0 0 103px 0;
  color: #fc2e2e;
}
.numArea .ttl-ja::before {
  background-color: #fc2e2e;
}

.numList {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 -30px -30px 0;
}

.numList__item {
  width: 406px;
  margin: 0 30px 30px 0;
}

@media screen and (max-width: 767px) {
  .numArea {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 50px 40px 50px;
    background: url(../img/bg_num-side.svg) repeat-y left top, url(../img/bg_num-side.svg) repeat-y right top;
    background-size: 15px, 15px;
  }
  .numArea .ttlBox {
    margin: 0 0 40px 0;
    color: #fc2e2e;
  }
  .numArea .ttl-ja::before {
    background-color: #fc2e2e;
  }
  .numList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -30px -30px 0;
  }
  .numList__item {
    width: 406px;
    margin: 0 30px 30px 0;
  }
}
/**********************************************************

liveArea

***********************************************************/
.liveArea {
  padding-top: 90px;
  padding-bottom: 178px;
  background: url(../img/bg_live.png) no-repeat top center;
  background-size: 100%;
}
.liveArea .ttlBox {
  margin: 0 0 56px 0;
  color: #0053a7;
}
.liveArea .ttl-ja::before {
  background-color: #0053a7;
}

.live__lead {
  margin: 0 0 58px 0;
  text-align: center;
  line-height: 1.6875;
  font-size: 16px;
}

.live__mainImgBox {
  display: flex;
  justify-content: center;
  margin: 0 0 76px 0;
}

.live__mainImg {
  width: 900px;
}

.liveList {
  display: flex;
  margin: 0 -25px;
}

.liveList__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33.333%;
  width: 33.3333333333%;
  padding: 0 25px;
}
.liveList__item + .liveList__item {
  border-left: solid 3px #e3e3e3;
}

.liveList__ttl {
  display: flex;
  justify-content: center;
  margin: 0 0 24px 0;
}

.liveList__ttlImg {
  width: 163px;
}

.liveList__txt {
  width: 100%;
  margin: 0 0 34px 0;
  font-size: 15px;
  line-height: 1.86;
}

.liveList__imgBox {
  margin-top: auto;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .liveArea {
    padding-top: 50px;
    padding-bottom: 58px;
    background: url(../img/bg_live.png) no-repeat top center;
    background-size: 100%;
  }
  .liveArea .ttlBox {
    margin: 0 0 40px 0;
    color: #0053a7;
  }
  .liveArea .ttl-ja::before {
    background-color: #0053a7;
  }
  .live__lead {
    margin: 0 0 30px 0;
    text-align: center;
    line-height: 1.6875;
    font-size: 14px;
  }
  .live__mainImgBox {
    display: block;
    margin: 0 0 30px 0;
  }
  .live__mainImg {
    width: 900px;
  }
  .liveList {
    display: block;
    margin: 0 auto;
    max-width: 450px;
  }
  .liveList__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    padding: 30px 20px;
  }
  .liveList__item + .liveList__item {
    border: none;
    border-top: solid 3px #e3e3e3;
  }
  .liveList__ttl {
    display: flex;
    justify-content: center;
    margin: 0 0 15px 0;
  }
  .liveList__ttlImg {
    width: 100px;
  }
  .liveList__txt {
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.86;
  }
  .liveList__imgBox {
    margin-top: auto;
  }
}
/**********************************************************

togetherArea

***********************************************************/
.togetherArea {
  padding: 121px 15px 80px;
  height: 770px;
  background: linear-gradient(180deg, rgb(0, 146, 253) 0%, rgb(162, 211, 253) 100%);
  position: relative;
}
.togetherArea::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(90deg, #fff, #fff 1px, transparent 1px, transparent 32px), repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 32px);
  opacity: 0.1;
  content: "";
}
.togetherArea .sec-inner {
  position: relative;
  z-index: 2;
}

.together__light-left {
  position: absolute;
  top: 0;
  left: -159px;
  z-index: 2;
}

.together__light-right {
  position: absolute;
  top: 0;
  right: -122px;
  z-index: 2;
}

.together__sango-left {
  position: absolute;
  bottom: -24px;
  left: -186px;
  z-index: 2;
}

.together__sango-right {
  position: absolute;
  bottom: -14px;
  right: -9px;
  z-index: 2;
}

.together__ttl {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1000px) {
  .togetherArea {
    padding: 121px 15px 150px;
    height: auto;
    background: linear-gradient(180deg, rgb(0, 146, 253) 0%, rgb(162, 211, 253) 100%);
    position: relative;
  }
  .togetherArea::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(90deg, #fff, #fff 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 1px, transparent 16px);
    opacity: 0.1;
    content: "";
  }
  .togetherArea .sec-inner {
    position: relative;
    z-index: 2;
  }
  .together__light-left {
    position: absolute;
    top: 0;
    left: -50px;
    z-index: 2;
    width: 200px;
  }
  .together__light-right {
    position: absolute;
    top: 0;
    right: -50px;
    z-index: 2;
    width: 200px;
  }
  .together__sango-left {
    position: absolute;
    bottom: -24px;
    left: -186px;
    z-index: 2;
    width: 450px;
  }
  .together__sango-right {
    position: absolute;
    bottom: -14px;
    right: -9px;
    z-index: 2;
    width: 320px;
  }
  .together__ttl {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .together__ttlImg {
    width: 140px;
  }
}
/**********************************************************

supportArea

***********************************************************/
.supportArea {
  padding-top: 171px;
  padding-bottom: 179px;
}

.support__ttl {
  display: flex;
  justify-content: center;
  margin: 0 0 60px 0;
}

.supportList__item {
  border: solid 3px #e39f01;
  border-radius: 8px;
}
.supportList__item + .supportList__item {
  margin-top: 30px;
}

.supportList__topBox {
  display: flex;
  height: 66px;
}

.supportList__top-leftTxt {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #e39f01;
  width: 285px;
  padding: 10px 20px 10px 42px;
  border-radius: 3px 0 8px 0;
}

.supportList__top-ttl {
  color: #e39f01;
  font-weight: bold;
  text-align: left;
  padding: 14px 30px;
  font-size: 24px;
}

.supportList__cont {
  display: flex;
  padding: 25px 42px 29px;
}
.supportList__item:nth-child(2) .supportList__cont {
  padding-bottom: 47px;
}

.supportList__item:nth-child(3) .supportList__cont {
  padding-bottom: 71px;
}

.supportList__txtBox {
  flex: 1;
}

.supportList__ttl {
  font-size: 20px;
  font-weight: bold;
  margin: -2px 0 13px 0;
  padding: 0 0 9px 0;
  border-bottom: solid 1px #e5e5e5;
}

.supportList__txt {
  font-size: 14px;
  line-height: 1.7;
}

.supportList__imgBox {
  width: 271px;
  margin: 0 0 0 30px;
}

.support__btnBox {
  display: flex;
  justify-content: center;
  margin-top: 35px;
}

.support__btnImg {
  width: 372px;
}

@media screen and (max-width: 767px) {
  .supportArea {
    padding-top: 50px;
    padding-bottom: 90px;
  }
  .support__ttl {
    display: flex;
    justify-content: center;
    margin: 0 0 30px 0;
  }
  .supportList__item {
    border: solid 3px #e39f01;
    border-radius: 8px;
  }
  .supportList__item + .supportList__item {
    margin-top: 30px;
  }
  .supportList__topBox {
    display: block;
    height: auto;
  }
  .supportList__top-leftTxt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background-color: #e39f01;
    padding: 10px 15px 10px 15px;
    border-radius: 0;
  }
  .supportList__top-ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e39f01;
    font-weight: bold;
    text-align: center;
    padding: 15px 15px;
    font-size: 17px;
  }
  .supportList__cont {
    display: flex;
    flex-direction: column;
    padding: 0 15px 30px;
  }
  .supportList__item:nth-child(2) .supportList__cont {
    padding-bottom: 30px;
  }
  .supportList__item:nth-child(3) .supportList__cont {
    padding-bottom: 30px;
  }
  .supportList__txtBox {
    order: 2;
  }
  .supportList__ttl {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px 0;
    padding: 0 0 8px 0;
    border-bottom: solid 1px #e5e5e5;
  }
  .supportList__txt {
    font-size: 14px;
    line-height: 1.7;
  }
  .supportList__imgBox {
    order: 1;
    width: auto;
    margin: 0 0 15px 0;
  }
  .supportList__img {
    margin: 0 auto;
  }
  .support__btnBox {
    display: flex;
    justify-content: center;
    margin-top: 35px;
  }
  .support__btnImg {
    width: 372px;
  }
}
/**********************************************************

usArea

***********************************************************/
.usArea {
  padding-top: 42px;
  padding-bottom: 65px;
  background-color: #f9f9f9;
  position: relative;
  z-index: 2;
  position: relative;
}
.usArea .ttlBox {
  margin: 0 0 50px 0;
}
.usArea .ttl-en {
  font-size: 16px;
  color: #286494;
}
.usArea .ttl-ja {
  color: #333;
  font-size: 26px;
}
.usArea .ttl-ja::before {
  display: none;
}
.usArea::before {
  display: block;
  position: absolute;
  top: -70px;
  left: 0;
  right: 0;
  z-index: -1;
  width: 200%;
  margin: 0 -50%;
  height: 1000px;
  border-radius: 50%;
  background-color: #f9f9f9;
  content: "";
}
.usArea::after {
  display: block;
  position: absolute;
  bottom: -70px;
  left: 0;
  right: 0;
  z-index: -1;
  width: 200%;
  margin: 0 -50%;
  height: 1000px;
  border-radius: 50%;
  background-color: #f9f9f9;
  content: "";
}

.usCircleTop {
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  .usArea {
    padding-top: 30px;
    padding-bottom: 40px;
    background-color: #f9f9f9;
    position: relative;
    z-index: 2;
    position: relative;
  }
  .usArea .ttlBox {
    margin: 0 0 40px 0;
  }
  .usArea .ttl-en {
    font-size: 14px;
    color: #286494;
  }
  .usArea .ttl-ja {
    color: #333;
    font-size: 24px;
  }
  .usArea .ttl-ja::before {
    display: none;
  }
  .usArea::before {
    display: block;
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    z-index: -1;
    width: 300%;
    margin: 0 -100%;
    height: 1000px;
    border-radius: 50%;
    background-color: #f9f9f9;
    content: "";
  }
  .usArea::after {
    display: block;
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    z-index: -1;
    width: 300%;
    margin: 0 -100%;
    height: 1000px;
    border-radius: 50%;
    background-color: #f9f9f9;
    content: "";
  }
  .usCircleTop {
    position: absolute;
    top: 0;
    left: 0;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* usFirstBox
――――――――――――――――――――――――――――――――――――――――――――――*/
.usFirstBox {
  margin: 0 0 67px 0;
  padding: 49px 65px 38px;
  background-color: #fff;
}

.usFirst__logo {
  display: flex;
  justify-content: center;
  margin: 0 0 29px 0;
}

.usFirst__logo-img {
  width: 333px;
}

.usFirst__cont {
  font-size: 14px;
  line-height: 2.2;
}
.usFirst__cont + .usFirst__cont {
  margin-top: 25px;
}

.usFirst__siteTtl {
  font-weight: bold;
}

.usFirst__siteUrl {
  text-decoration: underline;
  position: relative;
  margin: 0 0 0 5px;
}
.usFirst__siteUrl::before {
  display: block;
  position: absolute;
  right: -17px;
  bottom: 2px;
  width: 13px;
  height: 13px;
  background: url(../img/icon_tab.svg) no-repeat center center;
  background-size: 100%;
  content: "";
}

@media screen and (max-width: 767px) {
  .usFirstBox {
    margin: 0 0 30px 0;
    padding: 30px 15px 30px;
    background-color: #fff;
  }
  .usFirst__logo {
    display: flex;
    justify-content: center;
    margin: 0 0 20px 0;
  }
  .usFirst__logo-img {
    width: 280px;
  }
  .usFirst__cont {
    font-size: 14px;
    line-height: 1.8;
  }
  .usFirst__cont + .usFirst__cont {
    margin-top: 25px;
  }
  .usFirst__siteTtl {
    font-weight: bold;
  }
  .usFirst__siteUrl {
    text-decoration: underline;
    position: relative;
    margin: 0 0 0 5px;
  }
  .usFirst__siteUrl::before {
    display: block;
    position: absolute;
    right: -17px;
    bottom: 2px;
    width: 13px;
    height: 13px;
    background: url(../img/icon_tab.svg) no-repeat center center;
    background-size: 100%;
    content: "";
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* usVoiceBox
――――――――――――――――――――――――――――――――――――――――――――――*/
.usVoiceBox {
  display: flex;
  background-color: #fff;
  margin: 0 0 62px 0;
}

.usVoice__imgBox {
  display: flex;
  align-items: center;
  width: 357px;
}

.usVoice__cont {
  flex: 1;
  padding: 39px 45px;
}

.usVoice__ttl {
  margin: 0 0 22px 0;
  color: #006498;
  font-weight: bold;
  font-size: 23px;
  line-height: 1.48;
}

.usVoice__nameBox {
  margin: 0 0 22px 0;
  padding: 0 0 0 15px;
  border-left: solid 6px #006498;
}

.usVoice__status {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: bold;
  color: #006498;
}

.usVoice__name {
  font-size: 18px;
  font-weight: bold;
  color: #006498;
  line-height: 1.2;
}

.usVoice__txt {
  font-size: 14px;
  line-height: 1.64;
}

@media screen and (max-width: 767px) {
  .usVoiceBox {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 0 0 62px 0;
  }
  .usVoice__imgBox {
    display: flex;
    align-items: center;
    width: auto;
    position: relative;
  }
  .usVoice__imgBox::before {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 100%;
    content: "";
  }
  .usVoice__imgBox > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .usVoice__cont {
    flex: 1;
    padding: 30px 15px;
  }
  .usVoice__ttl {
    margin: 0 0 22px 0;
    color: #006498;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.48;
  }
  .usVoice__nameBox {
    margin: 0 0 22px 0;
    padding: 0 0 0 10px;
    border-left: solid 4px #006498;
  }
  .usVoice__status {
    margin: 0 0 4px 0;
    font-size: 12px;
    font-weight: bold;
    color: #006498;
  }
  .usVoice__name {
    font-size: 14px;
    font-weight: bold;
    color: #006498;
    line-height: 1.2;
  }
  .usVoice__txt {
    font-size: 14px;
    line-height: 1.64;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* usNewsBox
――――――――――――――――――――――――――――――――――――――――――――――*/
.usNews__ttl {
  margin: 0 0 62px 0;
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: 26px;
  position: relative;
}
.usNews__ttl::before {
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -14px;
  width: 12px;
  height: 2px;
  margin: auto;
  background-color: #0098e8;
  content: "";
}

.usNewsList {
  padding: 0 36px;
}

.usNewsList__item {
  padding: 0 15px;
}

.usNewsList__link {
  display: block;
}

.usNewsList__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.usNewsList__cont {
  padding: 16px 0 15px;
}

.usNewsList__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 12px 0;
}

.usNewsList__cat {
  padding: 2px 6px;
  border: solid 1px #006498;
  color: #006498;
  font-size: 11px;
  text-align: center;
}

.usNewsList__date {
  font-family: serif;
  font-size: 11px;
  color: #222;
  font-weight: bold;
}

.usNewsList__txt {
  font-size: 15px;
  color: #222;
  line-height: 1.73;
}

/*** slick ***/
.usNewsList .slick-prev,
.usNewsList .slick-next {
  width: 40px;
  height: 40px;
  background-color: #006498;
  border-radius: 50%;
  top: 100px;
  left: auto;
  z-index: 20;
  right: 0;
  margin: auto;
}
.usNewsList .slick-prev::before,
.usNewsList .slick-next::before {
  display: none;
}
.usNewsList .slick-prev::after,
.usNewsList .slick-next::after {
  display: block;
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  content: "";
}
.usNewsList .slick-prev {
  right: auto;
  left: 0;
}
.usNewsList .slick-prev::after {
  left: 16px;
  right: auto;
  transform: rotate(-135deg);
}
.usNewsList .slick-disabled {
  opacity: 0.3;
}

.usNews__linkBox {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.usNews__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 272px;
  height: 64px;
  padding-right: 9px;
  color: #fff;
  background-color: #006498;
  font-size: 20px;
  position: relative;
}
.usNews__link::before {
  display: block;
  position: absolute;
  top: 0;
  right: 32px;
  bottom: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
  content: "";
}

@media screen and (max-width: 767px) {
  .usNews__ttl {
    margin: 0 0 62px 0;
    text-align: center;
    color: #333;
    font-weight: bold;
    font-size: 24px;
    position: relative;
  }
  .usNews__ttl::before {
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -14px;
    width: 12px;
    height: 2px;
    margin: auto;
    background-color: #0098e8;
    content: "";
  }
  .usNewsList {
    padding: 0 20px;
  }
  .usNewsList__item {
    padding: 0 15px;
  }
  .usNewsList__link {
    display: block;
  }
  .usNewsList__cont {
    padding: 16px 0 15px;
  }
  .usNewsList__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 12px 0;
  }
  .usNewsList__cat {
    padding: 2px 6px;
    border: solid 1px #006498;
    color: #006498;
    font-size: 11px;
    text-align: center;
  }
  .usNewsList__date {
    font-family: serif;
    font-size: 11px;
    color: #222;
    font-weight: bold;
  }
  .usNewsList__txt {
    font-size: 15px;
    color: #222;
    line-height: 1.73;
  }
  /*** slick ***/
  .usNewsList .slick-prev,
  .usNewsList .slick-next {
    width: 40px;
    height: 40px;
    background-color: #006498;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    left: auto;
    z-index: 20;
    right: -10px;
    margin: auto;
  }
  .usNewsList .slick-prev::before,
  .usNewsList .slick-next::before {
    display: none;
  }
  .usNewsList .slick-prev::after,
  .usNewsList .slick-next::after {
    display: block;
    position: absolute;
    top: 0;
    right: 16px;
    bottom: 0;
    width: 12px;
    height: 12px;
    margin: auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    content: "";
  }
  .usNewsList .slick-prev {
    right: auto;
    left: -10px;
  }
  .usNewsList .slick-prev::after {
    left: 16px;
    right: auto;
    transform: rotate(-135deg);
  }
  .usNewsList .slick-disabled {
    opacity: 0.3;
  }
  .usNews__linkBox {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .usNews__link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 272px;
    height: 64px;
    padding-right: 9px;
    color: #fff;
    background-color: #006498;
    font-size: 18px;
    position: relative;
  }
  .usNews__link::before {
    display: block;
    position: absolute;
    top: 0;
    right: 32px;
    bottom: 0;
    width: 14px;
    height: 14px;
    margin: auto;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    content: "";
  }
}
/**********************************************************

payArea

***********************************************************/
.payArea {
  padding-top: 166px;
  padding-bottom: 98px;
  background: url(../img/bg_pay.png) no-repeat center center;
  background-size: cover;
}
.payArea .sec-inner {
  max-width: 900px;
}

.pay__ttl {
  display: flex;
  justify-content: center;
  margin: 0 0 25px 0;
}

.pay__ttlImg {
  width: 690px;
}

.pay__lead {
  margin: 0 0 49px 0;
  font-size: 20px;
  color: #fff;
  text-align: center;
}

.pay__tabBtnBox {
  display: flex;
  justify-content: center;
}

.pay__tabBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 50%;
  background-color: #0e273b;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 0 8px;
  padding: 12px 15px 10px;
  border-radius: 15px 15px 0 0;
}
.pay__tabBtn.js-current {
  background-color: #fff;
  color: #286394;
}
.pay__tabBtn:hover {
  opacity: 1;
  cursor: pointer;
}
.pay__tabBtn:first-child {
  margin-left: 15px;
}
.pay__tabBtn:last-child {
  margin-right: 10px;
}

.payCont {
  display: none;
  padding: 47px 44px 43px;
  background-color: #fff;
  border-radius: 11px;
}
.payCont.js-current {
  display: block;
}

.payCont__lead {
  margin: 0 0 25px 0;
  font-size: 18px;
  text-align: center;
  line-height: 1.66;
  color: #286394;
}

.payContPriceList {
  display: flex;
  justify-content: center;
  margin: 0 0 28px 0;
}

.payContPriceList__item {
  width: 213px;
}
.payContPriceList__item + .payContPriceList__item {
  margin-left: 34px;
}

.payContPriceList__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 57px;
  padding: 10px 10px;
  color: #000;
  background-color: #ffcf4d;
  font-weight: bold;
  box-shadow: 0 4px 0 #8d6f5c;
  border-radius: 3px;
  font-size: 18px;
}

.payCont__note {
  margin: 0 0 33px 0;
  text-align: center;
  font-size: 14px;
}

.payWayBox {
  padding: 21px 15px 27px;
  background-color: #efefef;
}

.payWay__ttl {
  margin: 0 0 15px 0;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.payWay__img {
  width: 100%;
  max-width: 523px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .payArea {
    padding-top: 106px;
    padding-bottom: 50px;
    background: url(../img/bg_pay.png) no-repeat center center;
    background-size: cover;
  }
  .payArea .sec-inner {
    max-width: 900px;
  }
  .pay__ttl {
    display: flex;
    justify-content: center;
    margin: 0 0 25px 0;
  }
  .pay__ttlImg {
    width: 690px;
  }
  .pay__lead {
    margin: 0 0 30px 0;
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .pay__tabBtnBox {
    display: flex;
    justify-content: center;
  }
  .pay__tabBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 50%;
    background-color: #0e273b;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 0 8px;
    padding: 12px 15px 10px;
    border-radius: 15px 15px 0 0;
  }
  .pay__tabBtn.js-current {
    background-color: #fff;
    color: #286394;
  }
  .pay__tabBtn:hover {
    opacity: 1;
    cursor: pointer;
  }
  .payCont {
    display: none;
    padding: 30px 15px 15px;
    background-color: #fff;
    border-radius: 11px;
  }
  .payCont.js-current {
    display: block;
  }
  .payCont__lead {
    margin: 0 0 25px 0;
    font-size: 14px;
    text-align: left;
    line-height: 1.66;
    color: #286394;
  }
  .payContPriceList {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 28px 0;
  }
  .payContPriceList__item + .payContPriceList__item {
    margin-left: 0;
    margin-top: 30px;
  }
  .payContPriceList__link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 213px;
    height: 57px;
    padding: 10px 10px;
    color: #000;
    background-color: #ffcf4d;
    font-weight: bold;
    box-shadow: 0 4px 0 #8d6f5c;
    border-radius: 3px;
    font-size: 16px;
  }
  .payCont__note {
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 14px;
  }
  .payWayBox {
    padding: 15px 15px 15px;
    background-color: #efefef;
  }
  .payWay__ttl {
    margin: 0 0 15px 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .payWay__img {
    width: 100%;
    max-width: 523px;
    margin: 0 auto;
  }
}
/**********************************************************

referenceArea

***********************************************************/
.referenceArea {
  padding-top: 82px;
  padding-bottom: 80px;
  background-color: #fafafa;
}

.reference__ttl {
  font-size: 20px;
  font-weight: bold;
  padding: 0 0 19px 0;
  border-bottom: solid 1px #d5d5d5;
  position: relative;
}
.reference__ttl::before {
  display: block;
  position: absolute;
  top: 4px;
  right: 18px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(135deg);
  transition: 0.2s;
  transform-origin: center;
  content: "";
}
.reference__ttl.js-active::before {
  top: 13px;
  transform: rotate(-45deg);
}
.reference__ttl:hover {
  cursor: pointer;
}

.referenceList {
  display: none;
  margin-top: 25px;
}

.referenceList__item {
  padding: 0 0 0 23px;
}
.referenceList__item + .referenceList__item {
  margin-top: 33px;
}

.referenceList__ttl {
  margin: 0 0 12px -23px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  padding: 0 0 0 24px;
}
.referenceList__ttl::before {
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 14px;
  height: 14px;
  background-color: #007ae2;
  content: "";
}

.referenceList__ttlLink {
  text-decoration: underline;
}

.referenceList__subTtl {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: bold;
}

.referenceList__report {
  padding: 0 0 0 19px;
  position: relative;
  font-size: 14px;
  line-height: 1.6;
}
.referenceList__report::before {
  display: block;
  position: absolute;
  top: 10px;
  left: 7px;
  width: 4px;
  height: 4px;
  background-color: #007ae2;
  content: "";
}
.referenceList__report + .referenceList__report {
  margin-top: 9px;
}

.referenceList__report-link {
  color: #868686;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .referenceArea {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fafafa;
  }
  .reference__ttl {
    font-size: 16px;
    font-weight: bold;
    padding: 0 0 15px 0;
    border-bottom: solid 1px #d5d5d5;
    position: relative;
  }
  .reference__ttl::before {
    display: block;
    position: absolute;
    top: 4px;
    right: 18px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(135deg);
    transition: 0.2s;
    transform-origin: center;
    content: "";
  }
  .reference__ttl.js-active::before {
    top: 10px;
    transform: rotate(-45deg);
  }
  .reference__ttl:hover {
    cursor: pointer;
  }
  .referenceList {
    display: none;
    margin-top: 25px;
  }
  .referenceList__item {
    padding: 0 0 0 23px;
  }
  .referenceList__item + .referenceList__item {
    margin-top: 26px;
  }
  .referenceList__ttl {
    margin: 0 0 8px -23px;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    padding: 0 0 0 22px;
  }
  .referenceList__ttl::before {
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 13px;
    height: 13px;
    background-color: #007ae2;
    content: "";
  }
  .referenceList__ttlLink {
    text-decoration: underline;
    font-size: 12px;
  }
  .referenceList__subTtl {
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: bold;
  }
  .referenceList__report {
    padding: 0 0 0 15px;
    position: relative;
    font-size: 13px;
    line-height: 1.6;
  }
  .referenceList__report::before {
    display: block;
    position: absolute;
    top: 10px;
    left: 4px;
    width: 4px;
    height: 4px;
    background-color: #007ae2;
    content: "";
  }
  .referenceList__report + .referenceList__report {
    margin-top: 9px;
  }
  .referenceList__report-link {
    color: #868686;
    text-decoration: underline;
    word-break: break-all;
  }
}
/**********************************************************

特定商取引法に基づく表記

***********************************************************/
/*――――――――――――――――――――――――――――――――――――――――――――
/* 共通
――――――――――――――――――――――――――――――――――――――――――――――*/
.mainCont {
  padding-top: 124px;
  background-color: #f9f9f9;
}

.pageTtlBox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 131px;
  background-color: #fff;
}

.pageTtl {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.contentArea {
  padding: 43px 50px;
}

.contentInner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .mainCont {
    padding-top: 64px;
    background-color: #f9f9f9;
  }
  .pageTtlBox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    background-color: #fff;
  }
  .pageTtl {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .contentArea {
    padding: 30px 15px;
  }
  .contentInner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }
}
/*――――――――――――――――――――――――――――――――――――――――――――
/* 特定商取引法に基づく表記
――――――――――――――――――――――――――――――――――――――――――――――*/
.termLead {
  margin: 0 0 43px 0;
  font-size: 14px;
}

.termList__ttl {
  width: 226px;
  padding: 25px 20px;
  background-color: #f0f3f5;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  border: solid 1px #e1e1e1;
}

.termList__txt {
  padding: 25px 20px;
  font-size: 14px;
  text-align: left;
  border: solid 1px #e1e1e1;
  background-color: #fff;
}
.termList__txt a {
  text-decoration: underline;
}
.termList__txt a:hover {
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .termLead {
    margin: 0 0 20px 0;
    font-size: 14px;
  }
  .termList {
    display: block;
  }
  .termList__item {
    display: block;
  }
  .termList__item:first-child {
    border-top: solid 1px #e1e1e1;
  }
  .termList__ttl {
    display: block;
    width: auto;
    padding: 12px 15px;
    background-color: #f0f3f5;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    border-top: none;
  }
  .termList__txt {
    display: block;
    padding: 12px 15px;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    border-top: none;
  }
  .termList__txt a {
    text-decoration: underline;
  }
  .termList__txt a:hover {
    text-decoration: none;
  }
}
/**********************************************************

利用規約

***********************************************************/
.privacyArea {
  padding: 40px 30px;
  background-color: #fff;
}

.privacy__lead {
  margin: 0 0 30px 0;
  font-size: 14px;
  line-height: 1.43;
}

.privacyList__item {
  padding: 35px 0 35px;
}
.privacyList__item + .privacyList__item {
  border-top: solid 1px #e1e1e1;
}
.privacyList__item:first-child {
  padding-top: 0;
}
.privacyList__item:last-child {
  padding-bottom: 0;
}

.privacyList__ttl {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: bold;
  color: #345ead;
  counter-increment: title;
}
.privacyList__ttl::before {
  content: "第" counter(title) "条";
}

.privacyList__txt {
  font-size: 14px;
}
.privacyList__txt + .privacyList__txt {
  margin-top: 8px;
}

.privacyNumList {
  margin-top: 15px;
  margin-bottom: 15px;
}

.privacyNumList__item {
  font-size: 14px;
  counter-increment: number;
  display: flex;
}
.privacyNumList__item::before {
  display: block;
  content: "（" counter(number) "）";
}
.privacyNumList__item + .privacyNumList__item {
  margin-top: 3px;
}

@media screen and (max-width: 767px) {
  .privacyArea {
    padding: 30px 15px;
    background-color: #fff;
  }
  .privacy__lead {
    margin: 0 0 30px 0;
    font-size: 14px;
  }
  .privacyList__item {
    padding: 20px 0 20px;
  }
  .privacyList__item + .privacyList__item {
    border-top: solid 1px #e1e1e1;
  }
  .privacyList__item:first-child {
    padding-top: 0;
  }
  .privacyList__item:last-child {
    padding-bottom: 0;
  }
  .privacyList__ttl {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #345ead;
    counter-increment: title;
  }
  .privacyList__ttl::before {
    content: "第" counter(title) "条";
  }
  .privacyList__txt {
    font-size: 14px;
  }
  .privacyList__txt + .privacyList__txt {
    margin-top: 8px;
  }
  .privacyNumList {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .privacyNumList__item {
    font-size: 14px;
    counter-increment: number;
    display: flex;
  }
  .privacyNumList__item::before {
    display: block;
    content: "（" counter(number) "）";
  }
  .privacyNumList__item + .privacyNumList__item {
    margin-top: 3px;
  }
}
/**********************************************************

サポーター申込み

***********************************************************/
.formLead {
  font-size: 15px;
  line-height: 1.466666667;
}

.formArea {
  margin-top: 34px;
}

.formArea .btn, .formArea .btn-push {
  margin-right: 0;
}

.formArea .formTit + .formBg {
  margin-top: 14px;
}

.formArea .formBg {
  padding: 40px 30px;
  background: #fff;
}

.formArea .formTit {
  color: #0053a7;
  font-size: 26px;
}

.formArea .formTable {
  width: 100%;
  font-size: 14px;
  line-height: 1.428571429;
}

.formArea .formTable tr {
  border-top: 1px solid #d6d9e0;
}

.formArea .formTable tr:last-of-type {
  border-bottom: 1px solid #d6d9e0;
}

.formArea .formTable th,
.formArea .formTable td {
  height: 68px;
}

.formArea .formTable th {
  width: 214px;
  max-width: 214px;
  padding: 23px 10px 23px 14px;
  background: #f7fcff;
  text-align: left;
  vertical-align: top;
}

.formArea .formTable td {
  vertical-align: middle;
}

.formArea .formTable th.mini {
  width: 154px;
}

.formArea .formTable .reasonTit {
  width: 214px;
}

.formArea .formTable td {
  width: calc(100% - 214px);
  min-width: calc(100% - 214px);
  padding: 11px 0 11px 19px;
}

.formArea .formTable .name input[type=text] {
  width: calc((100% - 19px) / 2);
}

.formArea .formTable input[type=text],
.formArea .formTable input[type=tel],
.formArea .formTable input[type=email] {
  height: 44px;
  padding: 5px 15px;
  border: 1px solid #d5d5d5;
  outline: none;
  transition: 0.3s;
}

.formArea .formTable input::placeholder {
  color: #b9b9b9;
}

.formArea .formTable [name=last_name] {
  margin-right: 19px;
}

.formArea .formTable input[type=text]:focus,
.formArea .formTable input[type=tel]:focus,
.formArea .formTable input[type=email]:focus {
  border: 1px solid #a1a2b2;
}

.formArea .formTable input[type=radio] {
  width: 0;
  opacity: 0;
  position: absolute;
  margin: 0;
}

.formArea .formTable .radioLabel {
  padding: 0 0 0 25px;
  margin: 0 22px 0 0;
  position: relative;
  cursor: pointer;
}

.formArea .formTable .radioLabel:before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1px solid #ebebeb;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.formArea .formTable .radioLabel:after {
  content: "";
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background-color: #0053a7;
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  opacity: 0;
}

.formArea .formTable .radio:checked + label:after {
  opacity: 1;
}

.formArea .formTable .selectWrap {
  position: relative;
}

.formArea .formTable .birthday .selectWrap select {
  width: 103px;
  max-width: 20%;
}

.formArea .formTable .selectWrap select {
  height: 44px;
  appearance: none;
  padding: 5px 20px 5px 15px;
  border: 1px solid #d5d5d5;
  outline: none;
  transition: 0.3s;
}

.formArea .formTable .selectWrap select:focus {
  border: 1px solid #a1a2b2;
}

.formArea .formTable .selectWrap:after {
  content: "";
  position: absolute;
  bottom: 28%;
  right: 16px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #0053a7 transparent transparent transparent;
  pointer-events: none;
}

.formArea .formTable td .selectWrap {
  margin-right: 3px;
}

.formArea .formTable td .selectWrap:not(:first-of-type) {
  margin-left: 23px;
}

.formArea .formTable .vertical {
  width: 56px;
  max-width: 56px;
  text-align: center;
  border-right: 1px solid #d5d5d5;
}

.formArea .formTable .vertical span {
  width: 100%;
  height: 100%;
  writing-mode: vertical-rl;
  letter-spacing: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.formArea .formTable input[type=text],
.formArea .formTable input[type=tel],
.formArea .formTable input[type=email] {
  width: 350px;
  max-width: 100%;
}

.formArea .formTable select {
  width: 245px;
  max-width: 100%;
}

.formArea .formBg + .formTit {
  margin-top: 39px;
}

.formArea .formBg + .formBg {
  margin-top: 41px;
}

br + .box {
  padding-top: 16px;
  display: none;
}

.formArea .formTable .securitycode input {
  width: 105px;
}

.formArea .formTable .radioLabel.tit {
  color: #0053a7;
  font-weight: bold;
}

.formArea .formTable .support_type:not(:checked) + label,
.formArea .formTable .support_type:not(:checked) + label + .subRadio label {
  color: #a0a0a0;
}

.formArea .formTable .support {
  padding: 12px 0 12px 18px;
}

.formArea .formTable .subRadio {
  margin-top: 10px;
  padding: 11px 25px;
  background: #fafafa;
  border-radius: 5px;
}

.formArea .formTable .support + .support {
  margin-top: -3px;
}

.formArea .formTable .expiry span {
  color: #c3c3c3;
}

.formArea .formTable .expiry input {
  width: 74px;
}

.formArea .formTable .expiry input + span {
  margin-left: 11px;
}

.formArea .btnBox {
  margin: 40px auto 0;
}

.formArea .btnBox .btn + .btn, .formArea .btnBox .btn-push + .btn, .formArea .btnBox .btn + .btn-push, .formArea .btnBox .btn-push + .btn-push {
  margin-left: 61px;
}

.privacyBox {
  margin-top: 39px;
}

.privacyLead {
  margin-bottom: 20px;
}

.privacyContent {
  padding: 20px;
  border: 2px solid #d5d5d5;
  border-radius: 8px;
}

.privacyContentLead {
  margin-bottom: 10px;
  font-weight: bold;
}

.privacyContent a:hover {
  text-decoration: underline;
}

.formArea.confirm input,
.formArea.confirm select {
  color: #000 !important;
  border: 1px solid #d5d5d5;
  background-color: #fafafa;
  pointer-events: none;
}

.formArea.confirm option {
  color: #000 !important;
  opacity: 1;
}

.formArea.confirm label {
  pointer-events: none;
}

.thanksArea .btn, .thanksArea .btn-push,
.formArea .btn,
.formArea .btn-push {
  width: 272px;
  padding: 16px 40px 16px 32px;
  background: #0053a7;
  font-size: 20px;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
  line-height: 1.3;
}

.thanksArea .btn:hover, .thanksArea .btn-push:hover,
.formArea .btn:hover,
.formArea .btn-push:hover {
  opacity: 0.8;
}

.thanksArea .btn:after, .thanksArea .btn-push:after,
.formArea .btn:after,
.formArea .btn-push:after {
  content: "";
  width: 7px;
  height: 13px;
  background: url(../img/membershipform/ico_btn_arrow.png) no-repeat center/contain;
  position: absolute;
  right: 23px;
  top: 50%;
  transform: translateY(-50%);
}

.formArea .btn.return, .formArea .return.btn-push {
  padding: 0;
  background: #9d9d9d;
}

.formArea .btn.return a, .formArea .return.btn-push a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.formArea .btn.return:after, .formArea .return.btn-push:after {
  content: "";
  width: 7px;
  height: 13px;
  background: url(../img/membershipform/ico_btn_arrow.png) no-repeat center/contain;
  position: absolute;
  left: 23px;
  top: 50%;
  transform: translateY(-50%) rotate(-180deg);
}

.formArea select {
  background: #fff;
}

.formArea input:disabled,
.formArea select:disabled {
  background: #fafafa;
}

.membershipform .subRadio input + label {
  transition: 0.3s;
}

.membershipform .subRadio input:disabled + label {
  color: #a0a0a0;
}

.formArea input:disabled + label {
  pointer-events: none;
}

.formArea th.required span {
  position: relative;
}

.formArea th.required span:after {
  content: "*";
  color: #d12020;
  display: inline-block;
}

/* サンクスページ */
.thanks .contentArea {
  padding: 92px 50px 52px;
  background: url(../img/membershipform/bg_thanks.jpg) no-repeat center/cover;
}

.thanksTit {
  font-size: 28px;
  font-weight: bold;
}

.thanksTxt {
  margin-top: 32px;
}

.thanks .signature {
  display: table;
  margin: 44px 0 0 auto;
}

.thanks .signature .name {
  font-weight: bold;
}

.thanks .signature .address,
.thanks .signature .tel {
  font-size: 14px;
}

.thanks .signature .address {
  margin-top: 13px;
}

.thanks .signature .tel {
  margin-top: 6px;
}

.thanks .signature .address span {
  letter-spacing: 0.334em;
}

.thanks .signature .address span {
  margin-right: 16px;
}

.thanks .signature .tel span {
  margin-right: 13px;
}

.thanks .btn.totop, .thanks .totop.btn-push {
  margin: 31px auto 0;
  padding: 16px 32px 16px 52px;
  background: #171717;
  text-align: center;
}

.thanks .btn.totop:after, .thanks .totop.btn-push:after {
  content: "";
  width: 7px;
  height: 13px;
  background: url(../img/membershipform/ico_btn_arrow.png) no-repeat center/contain;
  position: absolute;
  left: 23px;
  top: 50%;
  transform: translateY(-50%) rotate(-180deg);
}

.formTable .expiry span {
  margin: 0 11px;
}

.bgR .radioLabel:before {
  border: 1px solid #d12020 !important;
  background: #fbeded !important;
}

@media screen and (max-width: 767px) {
  .formArea {
    margin-top: 34px;
  }
  .formArea .formBg {
    padding: 30px 15px;
  }
  .formArea .formTit {
    font-size: 20px;
  }
  .formArea .formTable th,
  .formArea .formTable td {
    display: block;
    height: auto;
  }
  .formArea .formTable th {
    width: auto;
    max-width: none;
    padding: 15px 14px;
  }
  .formArea .formTable th.mini {
    width: 100%;
  }
  .formArea .formTable .reasonTit {
    width: 100%;
  }
  .formArea .formTable td {
    width: 100%;
    min-width: 0;
    padding: 15px 14px;
  }
  .formArea .formTable .name input[type=text] {
    width: calc((100% - 10px) / 2);
  }
  .formArea .formTable #family-name {
    margin-right: 10px;
  }
  .formArea .formTable .radioBox {
    display: flex;
    flex-direction: column;
  }
  .formArea .formTable [name=last_name] {
    margin-right: 10px;
  }
  .formArea .formTable td .radioLabel:not(:nth-of-type(1)) {
    margin-top: 5px;
  }
  .formArea .formTable .birthday .selectWrap select {
    width: 103px;
    max-width: 22%;
  }
  .formArea .formTable .selectWrap select {
    padding: 5px 10px 5px 10px;
  }
  .formArea .formTable td .selectWrap:not(:first-of-type) {
    margin-left: 10px;
  }
  .formArea .formTable .vertical {
    width: 100%;
    max-width: 100%;
    text-align: center;
    border-right: none;
    border-bottom: 1px solid #d5d5d5;
  }
  .formArea .formTable .vertical span {
    width: auto;
    height: auto;
    display: block;
    writing-mode: horizontal-tb;
    text-align: left;
    letter-spacing: 0;
  }
  .formArea .formTable input[type=text],
  .formArea .formTable input[type=tel],
  .formArea .formTable input[type=email] {
    width: 100%;
    max-width: 100%;
  }
  .formArea .formTable select {
    max-width: 100%;
  }
  .formArea .formBg + .formTit {
    margin-top: 39px;
  }
  .formArea .formBg + .formBg {
    margin-top: 41px;
  }
  .formArea .formTable .securitycode input {
    width: 105px;
  }
  .formArea .formTable .radioLabel.tit {
    color: #0053a7;
    font-weight: bold;
  }
  .formArea .formTable .support {
    padding: 12px 0 12px 18px;
  }
  .formArea .formTable .subRadio {
    margin-top: 10px;
    padding: 11px 25px;
    display: flex;
    flex-direction: column;
  }
  .formArea .formTable .support + .support {
    margin-top: -3px;
  }
  .formArea .formTable .expiry input {
    width: 74px;
  }
  .formArea .btnBox {
    margin: 40px auto 0;
    flex-direction: column;
    align-items: center;
  }
  .formArea .btnBox .btn + .btn, .formArea .btnBox .btn-push + .btn, .formArea .btnBox .btn + .btn-push, .formArea .btnBox .btn-push + .btn-push {
    margin-left: 0;
  }
  .formArea .btn, .formArea .btn-push {
    padding: 16px 50px 16px 42px;
    font-size: 18px;
  }
  /* サンクスページ */
  .thanks .contentArea {
    padding: 60px 15px;
  }
  .thanksTit {
    font-size: 20px;
  }
  .thanksTxt {
    margin-top: 20px;
  }
  .thanks .signature {
    margin: 40px 0 0 auto;
  }
  .thanks .signature .name {
    font-size: 15px;
  }
  .thanks .signature .address,
  .thanks .signature .tel {
    font-size: 13px;
  }
  .thanks .signature .address {
    margin-top: 10px;
  }
  .thanks .signature .tel {
    margin-top: 4px;
  }
}
.thanks .progressBar {
  margin-bottom: 78px;
}

.progressBar {
  margin: 39px auto 48px;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  position: relative;
}
.progressBar:before {
  content: "";
  width: 260px;
  height: 3px;
  background: #d3d3d3;
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
}
.progressBar li {
  width: 52px;
  color: #d3d3d3;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
.progressBar li:after {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  border: 3px solid #d3d3d3;
  border-radius: 50%;
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.progressBar li.current {
  color: #000;
}
.progressBar li.current:after {
  width: 32px;
  height: 32px;
  bottom: -38px;
}
.progressBar li.current:before {
  content: "";
  width: 14px;
  height: 14px;
  background: #0053a7;
  border-radius: 50%;
  position: absolute;
  bottom: -29px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.progressBar li + li {
  margin-left: 87px;
}

@media screen and (max-width: 767px) {
  .progressBar:before {
    width: 220px;
  }
  .progressBar li + li {
    margin-left: 60px;
  }
}/*# sourceMappingURL=style.css.map */