@charset "utf-8";

/* ---------------------------------------------
Reset
--------------------------------------------- */
/* Modern browser */
*,
*::before,
*::after{box-sizing:border-box}
*{margin:0;padding:0;}
img,
picture,
video,
canvas,
svg{display:block;max-width:100%}
input,
button,
textarea,
select{font:inherit}
p,
h1,
h2,
h3,
h4,
h5,
h6{overflow-wrap:break-word}


/* addition */
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
em {
  font-style: normal;
}
small {
  font-size: 70%;
}

ul,ol,li {
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}


/* ---------------------------------------------
font
--------------------------------------------- */
html {
  font-family: 'Noto Sans JP', sans-serif;
}

html body,
table th,
table td {
  line-height: 1.6;
  color: #000;
  font-size: 25px;
}

strong, em {
  font-weight: 600;
}

.page_cmn .fs28 {
  font-size: 28px;
}


/* ---------------------------------------------
link
--------------------------------------------- */
a,
a:link,
a:visited {
  color: #1e87f0;
}
a:hover {
  color: #f6a000;
  text-decoration: none;
}


/* ---------------------------------------------
width
--------------------------------------------- */
.wrapper {
  width: 100%;
  min-width: 960px;
  margin: 0 auto;
}

.contentsWrapper {
  width: 960px;
  margin: 0 auto;
}

/* ---------------------------------------------
cmn
--------------------------------------------- */
.page_cmn .sec {
  margin: 0;
}
.page_cmn .sec .secTtl {
  margin: 0 0 2em;
  text-align: center;
}

.page_cmn .sec h2 {
  margin: 0 0 2em;
}
.page_cmn .sec h3 {
  margin: 0 0 1em;
}

.page_cmn p {
  margin: 0 0 2em;
}

.page_cmn sup {
  font-size: 70%;
  vertical-align: super;
}

.page_cmn .red1 {
  color: #e41c24;
}
.page_cmn .blu1 {
  color: #2167ae;
}

.page_cmn .note small {
  font-size: 15px;
  display: block;
}
.page_cmn .note1 small {
  padding-left: 1em;
  text-indent: -1em;
}
.page_cmn .note1_2 small {
  padding-left: 1.2em;
}
.page_cmn .note1_3 small {
  padding-left: .5em;
}
.page_cmn .note2 small {
  padding-left: 1.8em;
  text-indent: -1.8em;
}
.page_cmn .note3 small {
  padding-left: 3em;
  text-indent: -3em;
}

.page_cmn .taC {
  text-align: center;
}
.page_cmn .taR {
  text-align: right;
}

.page_cmn .txtSt1 {
  text-decoration: underline;
}

/* cta */
.page_cmn .cta {
  padding-bottom: 1.5em;
  background-color: #fff5b4;
}
.page_cmn .cta .ctaTtlArea {
  margin-bottom: .5em;
  padding: .8em 0 1em;
  text-align: center;
  background: linear-gradient(153deg, #007cc4 0%, #007cc4 25%, #00196e 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .9em), calc(50% + 1em) calc(100% - .9em), 50% 100%, calc(50% - 1em) calc(100% - .9em), 0 calc(100% - .9em));
}
.page_cmn .cta .ctaTtlArea .ttl {
  width: 764px;
  margin: 0 auto;
}
.page_cmn .cta .btnArea {
  margin-bottom: .3em;
}
.page_cmn .cta .btnArea .btn {
  width: 688px;
  margin: 0 auto;
}
.page_cmn .cta .btnArea .btn a:hover {
  filter: saturate(150%) brightness(95%);
}
.page_cmn .cta .ctaNote {
  margin: 0 1.55em 1em;
  text-align: center;
}
.page_cmn .cta .ctaNote .dspIb {
  text-align: left;
  display: inline-block;
}
.page_cmn .cta .ctaNote .note1_3 small {
  padding-left: 1.5em;
}
.page_cmn .cta .ctaTel {
  margin: 0 1.6em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
.page_cmn .cta1_1 .ctaTel {
  justify-content: start;
}
.page_cmn .cta .ctaTel .tel {
  width: 380px;
}
.page_cmn .cta .ctaTel .txtArea * {
  font-size: 12px;
}
.page_cmn .cta .ctaTel .txtArea .time {
  margin-bottom: 0;
  font-weight: 700;
}


/* swiper */
.page_cmn .swiper,
.page_cmn .swiper-wrapper {
  z-index: 1;
}
.page_cmn .swiperArea.swiperSt1 .swiper-slide {
  opacity: .3;
  transition: opacity 1s;
}
.page_cmn .swiperArea.swiperSt1 .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.page_cmn .swiperArea.swiperSt1 .swiper-button-prev,
.page_cmn .swiperArea.swiperSt1 .swiper-button-next {
  width: 75px;
  height: 75px;
  opacity: 1;
  top: 55%;
  z-index: 2;
  transform: translateX(-50%);
}
.page_cmn .swiperArea.swiperSt1 .swiper-button-prev:hover,
.page_cmn .swiperArea.swiperSt1 .swiper-button-next:hover {
  filter: saturate(150%) brightness(95%);
}
.page_cmn .swiperArea.swiperSt1 .swiper-button-prev {
  left: calc(50% - 300px);
  background: url(../images/swiper_arrow_prev.svg) no-repeat center;
}
.page_cmn .swiperArea.swiperSt1 .swiper-button-next {
  left: calc(50% + 300px);
  background: url(../images/swiper_arrow_next.svg) no-repeat center;
}
.page_cmn .swiperArea.swiperSt1_2 .swiper-button-prev {
  left: calc(50% - 385px);
}
.page_cmn .swiperArea.swiperSt1_2 .swiper-button-next {
  left: calc(50% + 385px);
}
.page_cmn .swiperArea.swiperSt1 .swiper-button-prev::after,
.page_cmn .swiperArea.swiperSt1 .swiper-button-next::after {
  display: none;
}
.page_cmn .swiperArea.swiperSt1 .swiper-pagination {
  padding: 0;
  position: relative;
  bottom: 1em;
  z-index: 2;
}
.page_cmn .swiperArea.swiperSt1 .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 8px;
  opacity: .3;
  background-color: #fff;
}
.page_cmn .swiperArea.swiperSt1 .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

/* btn link */
.page_cmn .link.linkSt1 {
  padding: 1em 0 0;
  font-size: 15px;
}
.page_cmn .link.linkSt1 a {
  color: #000;
}
.page_cmn .btnSt1 {
  text-align: center;
  padding: .5em 2em;
}
.page_cmn .btnSt1 .btn {
  padding: .5em 3em;
  background-color: #fff;
  border: 3px solid #2167ae;
  border-bottom-width: 6px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: 2px 3px 3px 2px rgba(0,0,0,.2);
  position: relative;
  cursor: pointer;
  transition: background-color .3s;
}
.page_cmn .btnSt1 .btn:hover {
  background-color: #e9f2fa;
}
.page_cmn .btnSt1 .btn::after {
  content: '';
  width: 11px;
  height: 11px;
  border: 3px solid #2167ae;
  border-top: 0;
  border-left: 0;
  position: absolute;
  top: 50%;
  right: 1em;
  transform: rotate(-45deg) translateY(-50%);
}

/* toggleArea */
.page_cmn .toggleArea .toggleBtn {
  cursor: pointer;
}
.page_cmn .toggleArea .toggleCont {
  display: none;
}

/* icon_qmk */
.page_cmn .icon_qmk {
  width: 20px;
  height: 20px;
  color: transparent;
  font-size: 0;
  background-repeat: no-repeat;
  background-position: center;
  background: url(../images/icon_qmk.svg) no-repeat center center;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
}
.page_cmn .icon_qmk.icon_qmk__b {
  background-image: url(../images/icon_qmk__b.svg);
}
.page_cmn .icon_qmk.icon_qmk__w {
  background-image: url(../images/icon_qmk__w.svg);
}




/* ---------------------------------------------
#pageHeader
--------------------------------------------- */
#pageHeader {
  position: relative;
  z-index: 10;
}
#pageHeader::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: 5;
}
#pageHeader .pageHeader_inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
}
@media screen and (max-width:960px) {
  #pageHeader .pageHeader_inner {
    margin-right: 20px;
    margin-left: 20px;
  }
}
#pageHeader .logoArea a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
#pageHeader .logoArea .logo {
  width: 146px;
  margin-right: .3em;
}
#pageHeader .logoArea .name {
  color: #2167ae;
  font-size: 13px;
  font-weight: 700;
}

#pageHeader .navArea .nav {
  margin: 0;
}
#pageHeader .navArea .nav ul {
  display: flex;
  align-items: center;
}
#pageHeader .navArea .nav li {
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
#pageHeader .navArea .nav li:nth-child(-n+2)::after {
  content: '|';
  width: 2px;
  height: 1.2em;
  margin: 0 .9em;
  color: transparent;
  background-color: #6290bd;
  display: inline-block;
}
#pageHeader .navArea .nav ul li a,
#pageHeader .navArea .nav ul li a::after {
  transition: all .2s;
}
#pageHeader .navArea .nav ul li a {
  color: #2167ae;
  text-decoration: none;
  background-image: linear-gradient(#6290bd, #6290bd);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 2px;
  transition: background-size .2s;
}
#pageHeader .navArea .nav ul li a:hover {
  background-position: bottom left;
  background-size: 100% 2px; 
}
#pageHeader .navArea .nav li.btn {
  margin-left: .9em;
  align-items: center;
  border-radius: 3em;
  position: relative;
  overflow: hidden;
  transition: color 0.5s ease;
}
#pageHeader .navArea .nav li.btn1 {
  background-color: #2167ae;
}
#pageHeader .navArea .nav li.btn2 {
  background-color: #d21e00;
}
#pageHeader .navArea .nav li.btn::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
#pageHeader .navArea .nav li.btn1::after {
  background-color: #354c63;
}
#pageHeader .navArea .nav li.btn2::after{
  background-color: #ad331e;
}
#pageHeader .navArea .nav li.btn:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
#pageHeader .navArea .nav li.btn {
  padding: .5em 1.5em;
}
#pageHeader .navArea .nav li.btn a {
  color: #fff;
  display: flex;
  align-items: center;
  transition: color 0.5s ease;
  background: none;
  position: relative;
  z-index: 2;
}
#pageHeader .navArea .nav li.btn a::before {
  content: '';
  width: 18px;
  height: 17px;
  margin-right: .5em;
}
#pageHeader .navArea .nav li.btn1 a::before {
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20data-name%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017.26%2016.54%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23fff%3B%20fill-rule%3A%20evenodd%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M4.55.42c0-.24.18-.42.42-.42h11.87c.24%2C0%2C.42.19.42.42v15.69c0%2C.24-.19.42-.42.42H4.96c-.24%2C0-.42-.19-.42-.42v-5.75c0-.24.18-.42.42-.42s.42.19.42.42v5.32h11.02V.85H5.39v5.32c0%2C.24-.19.42-.42.42s-.42-.18-.42-.42V.42Z%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M0%2C8.26c0-.24.19-.42.42-.42h12.15c.24%2C0%2C.42.19.42.42s-.19.42-.42.42H.42c-.24%2C0-.42-.19-.42-.42Z%22%2F%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M9.61%2C4.76c.16-.16.43-.16.6%2C0l3.2%2C3.21c.08.08.13.19.13.3%2C0%2C.12-.05.22-.13.31l-3.2%2C3.2c-.16.17-.43.17-.6%2C0-.16-.16-.16-.43%2C0-.6l2.9-2.91-2.9-2.9c-.16-.16-.16-.43%2C0-.6Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
}
#pageHeader .navArea .nav li.btn2 a::before {
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20data-name%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017.14%2016.07%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23fff%3B%20%7D%20.cls-2%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22cls-2%22%20d%3D%22M.77%2C13.43c-.65%2C1.18-.08%2C2.15%2C1.27%2C2.15h13.07c1.35%2C0%2C1.92-.97%2C1.27-2.15L9.75%2C1.39c-.65-1.18-1.71-1.18-2.36%2C0L.77%2C13.43Z%22%2F%3E%20%3Crect%20class%3D%22cls-1%22%20x%3D%227.87%22%20y%3D%224.76%22%20width%3D%221.47%22%20height%3D%226.13%22%2F%3E%20%3Ccircle%20class%3D%22cls-1%22%20cx%3D%228.61%22%20cy%3D%2212.8%22%20r%3D%22.9%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
}


/* ---------------------------------------------
#mainContents
--------------------------------------------- */
#mainContents {
  position: relative;
  z-index: 1;
}


/* contentHeader */
#mainContents #mvArea {
  /*max-width: 1200px;*/
  margin: 0 auto calc(12 /25 * 1em);
  position: relative;
  /*background: linear-gradient(to right, #011547 0%, #011547 50%, #194079 50%, #194079 100%);
  overflow: hidden;*/
  background-image: linear-gradient(180deg, rgba(0, 34, 88, 1), rgba(0, 11, 57, 1));
}
#mainContents #mvArea::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-image: linear-gradient(180deg, rgba(26, 80, 139, 1), rgba(26, 63, 121, 1));
}
#mainContents #mvArea .pageTitle {
  width: min(100%, 1200px);
  margin: 0 auto;
  position: relative;
}
#mainContents #mvArea .copyArea .pageTitle {
  width: 100%;
}



/* contents */
#mainContents .contentNav {
  padding: 1em 0 2em;
}
#mainContents .contentNav .noteArea1 {
  margin-bottom: 1.5em;
}
#mainContents .contentNav ul {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 8px;
}
#mainContents .contentNav ul li {
  width: 292px;
}
#mainContents .contentNav ul li:last-child {
  margin-bottom: 0;
}


#mainContents #sec1 {
  padding: 3em 0 1px;
  color: #fff;
  background-color: #2167ae;
}
#mainContents #sec1 .secTtlArea .secTtl {
  width: 784px;
  margin: 0 auto 1em;
}
#mainContents #sec1 .point {
  margin-bottom: 2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8em;
}
#mainContents #sec1 .point li {
  width: 380px;
}
#mainContents #sec1 .questionnaire {
  margin-bottom: 2em;
}
#mainContents #sec1 .questionnaire .ttl {
  width: 322px;
  margin: 0 auto -1em;
}
#mainContents #sec1 .questionnaire .txt1 {
  width: 900px;
  margin: 0 auto 1em;
}
#mainContents #sec1 .questionnaire .note {
  margin: 0 1.5em;
}
#mainContents #sec1 .plans .plan {
  width: 660px;
  margin: 0;
}
#mainContents #sec1 .plans.sliderArea {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
#mainContents #sec1 .plans .ttl {
  width: 820px;
  margin: 0 auto .5em;
}
#mainContents #sec1 .contractDetails {
  width: 670px;
  margin: 0 auto 3em;
}
#mainContents #sec1 .contractDetails .details {
  font-size: 23px;
  border: 2px solid #fff;
  border-radius: 1.5em;
  position: relative;
  overflow: hidden;
}
#mainContents #sec1 .contractDetails .details .detailsTtl {
  padding: .7em 0;
  text-align: center;
  cursor: pointer;
  position: relative;
}
#mainContents #sec1 .contractDetails .details .detailsTtl::before,
#mainContents #sec1 .contractDetails .details .detailsTtl::after {
  content: '';
  width: 18px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: calc(50% - 1px);
  right: 40px;
  transition: transform .3s;
}
#mainContents #sec1 .contractDetails .details .detailsTtl:before {
  transform: rotate(90deg);
}
#mainContents #sec1 .contractDetails .details.active .detailsTtl:before {
  transform: rotate(180deg);
}
#mainContents #sec1 .contractDetails .details.active .detailsTtl:after {
  transform: rotate(180deg);
}
#mainContents #sec1 .contractDetails .details .detailsTtl .ttl {
  letter-spacing: .1em;
  font-weight: 400;
}
#mainContents #sec1 .contractDetails .details .detailsCont {
  padding: 1.5em 1.5em .5em;
}
#mainContents #sec1 .contractDetails .details .detailsCont dl dt {
  margin-bottom: .5em;
  font-size: 20px;
  font-weight: 500;
}
#mainContents #sec1 .contractDetails .details .detailsCont dl dd {
  margin-bottom: 2.5em;
  font-size: 18px;
}
#mainContents #sec1 .option {
  padding-bottom: 1.5em;
  font-size: 18px;
}
#mainContents #sec1 .option .details {
  width: 780px;
  margin: 0 auto 2em;
}
#mainContents #sec1 .option .details .detailDl {
  padding-bottom: 1px;
}
#mainContents #sec1 .option .details .detailDl .block {
  margin-bottom: 1em;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  display: flex;
  overflow: hidden;
}
#mainContents #sec1 .option .details .detailDl .block dt {
  width: 9em;
  text-align: center;
  color: #2167ae;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
#mainContents #sec1 .option .details .detailDl .block dt .sub {
  font-size: 85%;
  display: block;
}
#mainContents #sec1 .option .details .detailDl .block dt .sup1 {
  position: absolute;
  top: 20px;
  right: 20px;
  display: block;
}
#mainContents #sec1 .option .details .detailDl .block dd {
  width: calc(100% - 9em);
  min-height: 6em;
  padding: 0 1em;
  background-color: #2167ae;
  display: flex;
  align-items: center;
}
#mainContents #sec1 .option .details .noteArea1 small {
  position: relative;
  padding-left: 1.5em;
  text-indent: .5em;
  display: block;
}
#mainContents #sec1 .option .details .noteArea1 small .icn {
  position: absolute;
  top: 0;
  left: 0;
}
#mainContents #sec1 .option .noteArea2 small {
  margin-bottom: 1.5em;
  display: block;
}


#mainContents #sec2 {
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
#mainContents #sec2 .bg1 {
  margin-bottom: -.5em;
  padding: 3em 0 2em;
  background: linear-gradient(315deg, #c8f2ff 0%, #e1e8ff 100%);
  position: relative;
  z-index: 1;
}
#mainContents #sec2 .secTtlArea .secTtl {
  width: 784px;
  margin: 0 auto 1.8em;
}
#mainContents #sec2 .points {
  position: relative;
  z-index: 2;
}
#mainContents #sec2 .points .point {
  margin: 0 0 2.5em;
  padding: 4em 2.8em 1em;
  border-radius: 10px;
  background-color: #fff;
  position: relative;
}
#mainContents #sec2 .points .point .ttl {
  width: 130px;
  margin: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
#mainContents #sec2 .points .point .copy {
  padding-bottom: 1px;
}
#mainContents #sec2 .points .point .copy .copy1 {
  margin: 0 auto .5em;
}
#mainContents #sec2 .points .point .pointFig {
  margin: 0 auto 2em;
}
#mainContents #sec2 .points .point .txtArea1 {
  margin: 0 0 1.5em;
}
#mainContents #sec2 .points .point .txtArea1 p:last-child {
  margin-bottom: 0;
}
#mainContents #sec2 .points .point1 .copy .copy1 {
  width: 634px;
}
#mainContents #sec2 .points .point1 .pointFig {
  width: 746px;
}
#mainContents #sec2 .points .point1 .pointFig .img {
  margin-bottom: .5em;
}
#mainContents #sec2 .points .point1 .pointFig .img:last-child {
  margin-bottom: 0;
}
#mainContents #sec2 .points .point2 {
  margin-bottom: 1em;
}
#mainContents #sec2 .points .point2 .copy .copy1 {
  width: 647px;
}
#mainContents #sec2 .details {
  width: 810px;
  margin: 0 auto;
  padding-bottom: 1px;
}
#mainContents #sec2 .details .detail {
  margin-bottom: 2em;
  padding-top: 2em;
  position: relative;
}
#mainContents #sec2 .details .detail::before {
  content: '';
  width: 100%;
  height: 8px;
  background: radial-gradient(circle farthest-side, #2167ae, #2167ae 40%, transparent 40%, transparent);
  background-size: 8px 8px;
  position: absolute;
  top: 0;
  left: 0;
}
#mainContents #sec2 .details .detail3 {
  margin-bottom: .5em;
}
#mainContents #sec2 .details .detail .ttlArea {
  margin-bottom: 1em;
}
#mainContents #sec2 .details .detail .ttlArea .ttl2 {
  margin: 0 auto;
}
#mainContents #sec2 .details .detail1 .ttlArea .ttl2 {
  width: 36.791%;
}
#mainContents #sec2 .details .detail2 .ttlArea .ttl2 {
  width: 67.778%;
}
#mainContents #sec2 .details .detail3 .ttlArea .ttl2 {
  width: 57.284%;
}
#mainContents #sec2 .details .detail1 .sets {
  margin-bottom: 1em;
}
#mainContents #sec2 .details .detail1 .sets .set {
  padding: 1em;
  text-align: center;
  background-color: #ecf7ff;
}
#mainContents #sec2 .details .detail1 .sets .set p:last-child {
  margin-bottom: 0;
}
#mainContents #sec2 .details .detail1 .sets .set1 {
  margin-bottom: .5em;
}
#mainContents #sec2 .details .detail1 .sets .set .ttl3 {
  margin: 0 auto .5em;
}
#mainContents #sec2 .details .detail1 .sets .set1 .ttl3 {
  width: 43.158%;
}
#mainContents #sec2 .details .detail1 .sets .set2 .ttl3 {
  width: 52.37%;
}
#mainContents #sec2 .details .detail1 .sets .setList {
  display: flex;
  gap: .5em;
}
#mainContents #sec2 .details .detail1 .sets .plus {
  width: 5.556%;
  margin: 0 auto .5em;
}
#mainContents #sec2 .details .detail2 .compList {
  margin-bottom: 2em;
  display: flex;
  justify-content: center;
  gap: 1px;
}
#mainContents #sec2 .details .detail2 .compList li {
  width: 32.1%;
}
#mainContents #sec2 .transfer .toggleBlock {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 2px 5px 3px 0 rgba(0,0,0,.4);
  transition: box-shadow 1s;
}
#mainContents #sec2 .transfer .toggleBlock {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 2px 5px 3px 0 rgba(0,0,0,.4);
  transition: box-shadow 1s;
}
#mainContents #sec2 .transfer .toggleBlock.active {
  border-radius: 10px;
  box-shadow: 2px 5px 10px 0 rgba(0,0,0,.2);
}
#mainContents #sec2 .transfer .transferTtlArea {
  padding: 1.05em 0 .25em;
  background-color: #2167ae;
  position: relative;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 -8px 0 0 #004368 inset;
  transition: border-radius 1s;
}
#mainContents #sec2 .transfer .toggleBlock.active .transferTtlArea {
  border-radius: 0;
}
#mainContents #sec2 .transfer .transferTtlArea::after {
  content: '';
  width: 30px;
  height: 30px;
  background: url(../images/arrow2.svg) no-repeat center;
  position: absolute;
  top: 50%;
  right: .8em;
  z-index: 2;
  transform: translateY(-50%);
  transition: transform .3s;
}
#mainContents #sec2 .transfer .toggleBlock.active .transferTtlArea::after {
  transform: translateY(-50%) rotate(180deg);
}
#mainContents #sec2 .transfer .transferTtlArea .ttl3 {
  width: 89.136%;
  margin: 0 auto 0 1.3em;
}
#mainContents #sec2 .transfer .transferCont {
  padding: 1.5em 0;
}
#mainContents #sec2 .transfer .transferCont .faq {
  width: 94.815%;
  margin: 0 auto 1em 4%;
}
#mainContents #sec2 .transfer .transferCont .faq .q {
  margin-bottom: .3em;
}
#mainContents #sec2 .transfer .transferCont .faq .q .ttl4 {
  width: 95.964%;
  margin: 0 auto 0 0;
}
#mainContents #sec2 .transfer .transferCont .faq .a {
  position: relative;
}
#mainContents #sec2 .transfer .transferCont .faq .a .txt1 {
  width: 98.96%;
  margin: 0 0 0 auto;
}
#mainContents #sec2 .transfer .transferCont .faq .a .txt2 {
  width: 30em;
  margin: 0;
  font-size: 80%;
  position: absolute;
  bottom: .5em;
  left: .5em;
}
#mainContents #sec2 .transfer .transferCont .txtArea1 {
  width: 89.877%;
  margin: 0 auto;
  position: relative;
}
#mainContents #sec2 .transfer .transferCont .txtArea1 .txt1 {
  margin-bottom: 0;
}
#mainContents #sec2 .transfer .transferCont .txtArea1 .txt2 {
  width: 30em;
  margin: 0;
  font-size: 80%;
  position: absolute;
  bottom: 1.7em;
  left: 33%;
}
#mainContents #sec2 .transfer .transferCont .figImg1 {
  width: 88.89%;
  margin: 0 auto;
}
#mainContents #sec2 .details .detail3 .txtArea3 {
  margin-bottom: 1em;
}
#mainContents #sec2 .details .detail3 .txtArea3 p:last-child {
  margin-bottom: 0;
}
#mainContents #sec2 .details .detail3 .discountList {
  margin-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
}
#mainContents #sec2 .details .detail3 .discountList li {
  width: 23.457%;
  padding: .5em 0;
  line-height: 1.4;
  text-align: center;
  font-weight: 600;
  background-color: #ecf7ff;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5em;
}
#mainContents #sec2 .details .detail3 .discountList li .sub {
  font-size: 60%;
}
#mainContents #sec2 .details .detail3 .noteArea1 {
  margin-bottom: 1.5em;
}
#mainContents #sec2 .details .detail3 .linkArea {
  margin-bottom: 3em;
  font-size: 15px;
}
#mainContents #sec2 .details .detail3 .linkArea .link {
  margin-bottom: .5em;
}
#mainContents #sec2 .satisfaction {
  position: relative;
  z-index: 2;
}
#mainContents #sec2 .satisfaction::after {
  content: '';
  height: 45%;
  background-color: #fffadc;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  clip-path: ellipse(60% 100% at 50% 100%);
}
#mainContents #sec2 .satisfaction .inner {
  position: relative;
  z-index: 2;
}
#mainContents #sec2 .satisfaction .txt1 {
  width: 96.875%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
#mainContents #sec2 .satisfaction .note {
  position: absolute;
  bottom: .5em;
  left: 2.3em;
  z-index: 2;
}


#mainContents .sec.benefits {
  padding: 1.5em 0;
  background-color: #fffadc;
  position: relative;
  z-index: 1;
}
#mainContents .sec.benefits .secTtlArea {
  margin-bottom: 1.5em;
}
#mainContents .sec.benefits .secTtlArea .secTtl {
  width: 81.667%;
  margin: 0 auto;
}
#mainContents .sec.benefits .benefitList {
  margin-bottom: 1em;
  display: flex;
  justify-content: center;
  gap: .2em;
}


#mainContents #sec3 .bg1 {
  margin-bottom: 0;
  padding: 3em 0 1px;
  color: #fff;
  background: linear-gradient(130deg, #2db8df 0%, #007cc4 25%, #00196e 100%);
  position: relative;
}
#mainContents #sec3 .secTtlArea {
  width: 784px;
  margin: 0 auto 2em;
}
#mainContents #sec3 .secTtlArea .secTtl {
  margin: 0 auto 1em;
}
#mainContents #sec3 .points {
  margin-bottom: 2em;
}
#mainContents #sec3 .points .pointList {
  margin-bottom: 1.5em;
  display: flex;
  justify-content: center;
  gap: .8em;
}
#mainContents #sec3 .points .pointList li {
  width: 30.209%;
}
#mainContents #sec3 .points .pointList li {
  width: 30.209%;
}
#mainContents #sec3 .points .noteArea {
  text-align: center;
}
#mainContents #sec3 .points .noteArea .inner {
  text-align: left;
  display: inline-block;
}
#mainContents #sec3 .trouble {
  width: 94.584%;
  margin: 0 auto 2em;
}
#mainContents #sec3 .trouble .ttlArea {
  margin-bottom: 1em;
}
#mainContents #sec3 .trouble .ttlArea .ttl {
  width: 84.802%;
  margin: 0 auto;
}
#mainContents #sec3 .trouble .troubleList {
  margin-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: .6em;
}
#mainContents #sec3 .trouble .troubleList li {
  width: 23.68%;
}
#mainContents #sec3 .trouble .troubleList li:nth-child(-n+3) {
  width: 31.94%;
}
#mainContents #sec3 .roadService {
  width: 93.75%;
  margin: 0 auto 2em;
}
#mainContents #sec3 .roadService .ttlArea {
  margin-bottom: 1em;
}
#mainContents #sec3 .roadService .ttlArea .ttl {
  width: 84.802%;
  margin: 0 auto;
}
#mainContents #sec3 .roadService .roadServiceList {
  width: 900px;
  margin: 0 auto;
}
#mainContents #sec3 .roadService .roadServiceList li {
  margin-bottom: 20px;
}
#mainContents #sec3 .roadService .roadServiceList li.over {
  margin-right: -15px;
}
#mainContents #sec3 .roadService .noteArea a {
  color: #fff;
}


#mainContents #sec4 {
  padding: 3em 0 1px;
  background-color: #e1eaf9;
}
#mainContents #sec4 .secTtlArea {
  width: 784px;
  margin: 0 auto 1.5em;
}
#mainContents #sec4 .secTtlArea .secTtl {
  margin-bottom: .5em;
}
#mainContents #sec4 .supportContent {
  width: 93.75%;
  margin: 0 auto 2em;
}
#mainContents #sec4 .supportContent .ttl {
  width: 77.778%;
  margin: 0 auto .5em;
}
#mainContents #sec4 .supportContent .supportContentList {
  margin-bottom: 1.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 1em;
}
#mainContents #sec4 .supportContent .supportContentList li {
  width: 48.89%;
}


#mainContents #sec5 .bg1 {
  margin-bottom: 0;
  padding: 3em 0 1px;
  color: #fff;
  background: linear-gradient(130deg, #2db8df 0%, #007cc4 25%, #00196e 100%);
  position: relative;
  z-index: 1;
}
#mainContents #sec5 .evaluations {
  margin-bottom: 2em;
  display: flex;
  justify-content: center;
  gap: 55px;
}
#mainContents #sec5 .evaluations .evaluation.reviews {
  width: 390px;
}
#mainContents #sec5 .evaluations .evaluation.reviews .ttl {
  width: 324px;
  margin: 0 auto 1em;
}
#mainContents #sec5 .evaluations .evaluation.reviews .stars {
  margin: 0 auto -1em;
}
#mainContents #sec5 .evaluations .evaluation.reviews .txtArea1 {
  border-bottom: 2px solid #fff;
}
#mainContents #sec5 .evaluations .evaluation.reviews .txtArea1 .num {
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mainContents #sec5 .evaluations .evaluation.reviews .txtArea1 .num::before,
#mainContents #sec5 .evaluations .evaluation.reviews .txtArea1 .num::after {
  content: '';
  height: 2px;
  background-color: #fff;
  flex-grow: 1;
}
#mainContents #sec5 .evaluations .evaluation.reviews .txtArea1 .txt {
  padding: .3em .5em 1em;
  font-size: 18px;
}
#mainContents #sec5 .evaluations .evaluation.reviews .txtArea1 .txt p:last-child {
  margin-bottom: 0;
}
#mainContents #sec5 .evaluations .evaluation.detail {
  width: 450px;
  text-align: center;
}
#mainContents #sec5 .evaluations .evaluation.detail .ttl {
  width: 183px;
  margin: 0 auto 1em;
}
#mainContents #sec5 .evaluations .evaluation.detail .graph {
  margin-bottom: 1em;
}
#mainContents #sec5 .voices {
  position: relative;
}
#mainContents #sec5 .voices .ttlArea {
  margin: 0 auto .5em;
}
#mainContents #sec5 .voices .ttlArea .ttl {
  width: 286px;
  margin: 0 auto;
}
#mainContents #sec5 .voices .voice {
  width: 670px;
  height: 390px;
  margin: 0 25px 2em;
  padding: 1em 1.3em;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  display: flex;
  position: relative;
}
#mainContents #sec5 .voices .voice .txtArea {
  width: 100%;
  position: relative;
  z-index: 1;
  align-self: center;
}
#mainContents #sec5 .voices .voice .txtArea .txt {
  margin-bottom: .5em;
  line-height: 2em; /* 文字の高さ */
  color: #000;
  font-size: 90%;
  background-image: linear-gradient(180deg, transparent calc(100% - 1px), #ccc calc(100% - 1px)); /* 罫線の色と太さ */
  background-size: 100% 2em; /* 行の高さ */
  background-position: center bottom;
}
#mainContents #sec5 .voices .voice .txtArea .txt p {
  padding-left: .3em;
}
#mainContents #sec5 .voices .voice .txtArea .txt p:last-child {
  margin: 0;
}
#mainContents #sec5 .voices .voice .txtArea .name {
  padding-left: .3em;
  color: #5495cf;
  font-weight: 600;
}
#mainContents #sec5 .voices .voice .txtArea .name .num {
  font-size: 125%;
}
#mainContents #sec5 .voices .voice .txtArea .name .region {
  margin-left: 1em;
  padding: 0 1em .1em;
  font-size: 80%;
  border: 2px solid #5495cf;
  border-radius: 3em;
}
#mainContents #sec5 .voices .voice .img {
  width: 280px;
  position: absolute;
  top: 2em;
  right: 0;
  z-index: 2;
}
#mainContents #sec5 .noteArea1 {
  width: 87%;
  margin: 0 auto 2em;
}
#mainContents #sec5 .bg2 {
  padding: 2em 0 0;
  background: linear-gradient(135deg, #eaefff 20%, #e3f8ff 50%, #c8f2ff 100%);
}
#mainContents #sec5 .satisfaction .ttl {
  width: 38.334%;
  margin: 0 auto .5em;
}
#mainContents #sec5 .satisfaction .figImg {
  width: 97.917%;
  margin: 0 auto;
  padding-bottom: .9em;
  position: relative;
}
#mainContents #sec5 .satisfaction .figImg .img1 {
  position: relative;
  z-index: 2;
}
#mainContents #sec5 .satisfaction .figImg .img2 {
  width: 45.639%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
#mainContents #sec5 .satisfaction .figImg .note {
  position: absolute;
  bottom: .5em;
  right: 0;
  z-index: 1;
}


#mainContents #sec6 {
  padding: 4em 0 2em;
  background-color: #e1f2ff;
}
#mainContents #sec6 .secTtlArea {
  width: 784px;
  margin: 0 auto 1.5em;
}
#mainContents #sec6 .secTtlArea .secTtl {
  margin-bottom: 1em;
}
#mainContents #sec6 .secTtlArea .txtArea1 p:last-child {
  margin-bottom: 0;
}
#mainContents #sec6 .figImg1 {
  width: 90%;
  margin: 0 auto 3em;
  position: relative;
}
#mainContents #sec6 .figImg1 picture {
  position: relative;
  z-index: 2;
}
#mainContents #sec6 .figImg1 figcaption.note {
  position: absolute;
  bottom: 0;
  left: -1em;
  z-index: 1;
}
#mainContents #sec6 .flow {
  width: 80%;
  margin: 0 auto;
}
#mainContents #sec6 .flow .flowList {
  margin: 0 1em;
}
#mainContents #sec6 .flow .flowList .li {
  padding: 0 0 .5em 140px;
  display: flex;
  position: relative;
}
#mainContents #sec6 .flow .flowList .li .num {
  width: 35px;
  margin-right: .5em;
  position: relative;
}
#mainContents #sec6 .flow .flowList .li .num::after {
  content: '';
  width: 1px;
  height: calc(100% - 45px);
  border-right: 5px dotted #2167ae;
  position: absolute;
  top: 45px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  display: block;
}
#mainContents #sec6 .flow .flowList .li:last-child .num::after {
  display: none;
}
#mainContents #sec6 .flow .flowList .li .num span {
  width: 35px;
  height: 35px;
  padding-bottom: .1em;
  line-height: 1;
  color: #fff;
  font-size: 28px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2167ae;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}
#mainContents #sec6 .flow .flowList .li .txtArea {
  width: 530px;
  padding-bottom: 0.5em;
}
#mainContents #sec6 .flow .flowList .li .txtArea .ttl {
  margin-bottom: .5em;
  line-height: 1;
  font-size: 30px;
  font-weight: 600;
}
#mainContents #sec6 .flow .flowList .li .txtArea .txt p:last-child {
  margin-bottom: 0;
}
#mainContents #sec6 .flow .flowList .li .figImg {
  width: 120px;
  position: absolute;
  top: 0;
  left: 0;
}


#mainContents #sec7 {
  padding: 4em 0 2em;
  background-color: #f5f3f2;
}
#mainContents #sec7 .secTtlArea {
  width: 784px;
  margin: 0 auto 2em;
}
#mainContents #sec7 .payment {
  margin: 0 0 2em;
  display: flex;
  justify-content: center;
  gap: .7em;
}
#mainContents #sec7 .payment li {
  width: 215px;
}
#mainContents #sec7 .noteArea1 {
  margin: 0 2em;
}


#mainContents #sec8 {
  padding: 0 0 4em;
  background-color: #f5f3f2;
}
#mainContents #sec8 .secTtlArea {
  margin-bottom: 2em;
  padding: 1.2em 0 1.5em;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .9em), calc(50% + 1em) calc(100% - .9em), 50% 100%, calc(50% - 1em) calc(100% - .9em), 0 calc(100% - .9em));
}
#mainContents #sec8 .secTtlArea .secTtl {
  width: 546px;
  margin: 0 auto;
}
#mainContents #sec8 .bg1 {
  padding: 0 0 1em;
  background: linear-gradient(180deg, #eaefff 20%, #e3f8ff 50%, transparent 100%);
  position: relative;
  z-index: 2;
}
#mainContents #sec8 .achievements {
  margin-bottom: 3.5em;
  padding: 0 0 2.5em;
  background: url(../images/sec8_bg1.png) no-repeat center top;
  position: relative;
}
#mainContents #sec8 .achievements::after {
  content: '';
  width: 100%;
  height: 241px;
  background: url(../images/sec8_bg2.png) no-repeat center bottom;
  position: absolute;
  right: 0;
  bottom: -7em;
  left: 0;
}
#mainContents #sec8 .achievements .ttlArea {
  margin-bottom: .5em;
}
#mainContents #sec8 .achievements .ttlArea .ttl {
  width: 760px;
  margin: 0 auto;
}
#mainContents #sec8 .achievements .achievement {
  margin-bottom: 1.5em;
  display: flex;
  justify-content: center;
  gap: 2em;
}
#mainContents #sec8 .achievements .achievement li {
  width: 260px;
  position: relative;
}
#mainContents #sec8 .achievements .achievement li.li2 {
  width: 380px;
}
#mainContents #sec8 .achievements .achievement li .noteArea {
  white-space: nowrap;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}


/* ---------------------------------------------
#pageFooter
--------------------------------------------- */
#pageFooter {
  padding: 1em 0;
  position: relative;
  z-index: 1;
}
#pageFooter .noteArea1 {
  margin-bottom: 1em;
}
#pageFooter .noteArea1 .btnTxt {
  margin-bottom: 0;
  font-size: 15px;
}
#pageFooter .noteArea1 .toggleBtn {
  text-decoration: underline;
  cursor: pointer;
}
#pageFooter .noteArea1 .toggleCont .example {
  margin-bottom: 1.5em;
  padding-bottom: .5em;
  border-bottom: 1px solid #aaa;
}
#pageFooter .noteArea1 .toggleCont p {
  margin-bottom: 1em;
}
#pageFooter .noteArea1 .toggleCont .title {
  margin-bottom: 0;
  font-weight: 600;
}
#pageFooter .noteArea1 .toggleCont small {
  font-size: 15px;
}
#pageFooter .noteArea1 .closeBtn {
  padding: 2em 0 0;
  text-align: center;
}
#pageFooter .noteArea1 .toggleCont {
  margin: 1em 1em 0;
  padding: 1em;
  font-size: 14px;
  border: 1px solid #000;
}
#pageFooter .noteArea1 .toggleCont .detail {
  text-indent: -.5em;
}
#pageFooter .noteArea1 .closeBtn .toggleClose {
  padding: 0.3em 1em;
  border: 1px solid #000;
  cursor: pointer;
  display: inline-block;
}
#pageFooter .noteArea1 .closeBtn .toggleClose:hover {
  color: #fff;
  background-color: #000;
}

#pageFooter .code {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #ddd;
}

#pageFooter .footerNav {
  margin: 0 0 1.5em;
  text-align: center;
}
#pageFooter .footerNav ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
#pageFooter .footerNav ul li {
  margin: 0;
  font-size: 15px;
}
#pageFooter .footerNav ul li::after {
  content: '';
  width: 1px;
  height: 1em;
  margin: 0 1.5em;
  background-color: #000;
  display: inline-block;
  transform: translateY(2px);
}
#pageFooter .footerNav ul li:last-child:after {
  display: none;
}
#pageFooter .footerNav ul li a:link,
#pageFooter .footerNav ul li a:visited {
  color: #000;
}
#pageFooter .copyright {
  margin: 0;
  text-align: center;
  font-size: 14px;
}


/* ---------------------------------------------
micromodal
--------------------------------------------- */
/* cmn */
.modalArea {
  position: relative;
  z-index: 100;
}
@keyframes mmfadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes mmfadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}
@keyframes mmslideIn {
  from {transform: translateY(15%);}
  to {transform: translateY(0);}
}
@keyframes mmslideOut {
  from {transform: translateY(0);}
  to {transform: translateY(-10%);}
}
.micromodal-slide {
  display: none;
}
.micromodal-slide.is-open {
  display: block;
}
.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

.modal__overlay {
  background: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__container {
  width: 800px;
  max-height: 100vh;
}

.modalCont .modalCont_inner {
  position: relative;
}
.modalCont .modal__close {
  font-size: 15px;
  border: 0;
  background-color: transparent;
  outline: 0;
  cursor: pointer;
  position: absolute;
  bottom: calc(100% + .5em);
  right: 1.5em;
}
.modalCont .modal__close:before {
  content: "\2715";
  line-height: 1;
  font-weight: 300;
  font-size: 50px;
  display: block;
  transition: transform .2s;
}
.modalCont .modal__close:hover:before {
  transform: scale(.8);
}

/* modalCont */
.modalCont .stickyArea {
  text-align: right;
  position: relative;
}
.modalCont .modal__close {
  color: #fff;
  white-space: nowrap;
}
.modalCont .modal__close:before {
  color: #fff;
}

.modal_roadService {
  width: 93.75%;
  margin: 0 auto;
}
.modal_roadService .txt {
  margin-bottom: 0;
}


.modal_openBtn {
  cursor: pointer;
}
.modal_openBtn:hover img {
  filter: saturate(150%) brightness(95%);
}


/* ---------------------------------------------
bnr
--------------------------------------------- */
.cp-bnrArea_header {
  position: relative;
  z-index: 10;
}
.cp-bnrArea_header .cp-bnr {
  width: 960px;
  margin: 0 auto;
}
@media screen and (max-width:960px) {
  .cp-bnrArea_header .cp-bnr {
    width: 100%;
  }
}

.cp-bnrArea_main {
  padding: 2em 0;
}
.cp-bnrArea_main .cp-bnr {
  width: 600px;
  margin: 0 auto;
}
@media screen and (max-width:960px) {
  .cp-bnrArea_main .cp-bnr {
    width: 95%;
  }
}