@charset "UTF-8";
/* Color Palette */
/* Padding */
/* Heder Space */
/* Wrap */
/*-----------------
scroll padding top for anchor link
-----------------*/
html, body {
  scroll-padding-top: 66px; }
  @media (max-width: 480px) {
    html, body {
      scroll-padding-top: 52px; } }

body {
  background: #ffffff; }

.sm {
  font-weight: normal;
  font-size: 50%; }

/*.note{
	font-size: 90%;
}*/
.f-600 {
  font-weight: 600; }

h1 {
  font-size: min(5vw, 3rem); }

h2 {
  font-size: 2.2rem; }
  @media (max-width: 480px) {
    h2 {
      font-size: 1.8rem; } }

h2 + p {
  margin: .5rem 0 0;
  font-weight: 600; }
  @media (max-width: 480px) {
    h2 + p {
      margin: 0 0 1rem; } }

h3 {
  font-size: 2.2rem;
  display: inline;
  padding: .4rem .8rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; }
  @media (max-width: 480px) {
    h3 {
      padding: .2rem .4rem;
      font-size: 1.8rem; } }

body {
  background: #ffffff; }

/* slideshow*/
.hero_ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 200;
  filter: drop-shadow(0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.5));
  max-width: 600px; }
  @media (max-width: 480px) {
    .hero_ttl {
      width: 55%;
      top: 52%; } }

.slideshow_wrapper {
  width: 100%;
  height: 60vh;
  margin-top: 90px; }
  @media (max-width: 480px) {
    .slideshow_wrapper {
      height: 36vh;
      margin-top: 5vh; } }

/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position: relative;
  z-index: 1;
  height: 60vh; }
  @media (max-width: 480px) {
    .slider {
      height: 36vh; } }

/*　背景画像設定　*/
.slider-item01 {
  background: url("../img/slider_01.jpg"); }

/**.slider-item02 {
	background: url("../img/slider2.jpg");
}**/
.slider-item02 {
  background: url("../img/slider_02.jpg");
  background-position: right; }

.slider-item03 {
  background: url("../img/slider_05.jpg"); }

.slider-item04 {
  background: url("../img/slider_07.jpg"); }

.slider-item {
  width: 100%;
  height: 60vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }
  @media (max-width: 480px) {
    .slider-item {
      height: 36vh; } }

.closing {
  font-size: min(2vw, 21px);
  color: red;
  font-weight: 600; }
  @media (max-width: 480px) {
    .closing {
      font-size: min(3.5vw, 28px); } }

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;
  /*絶対配置にする*/
  z-index: 3;
  top: 50%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #ccc;
  /*矢印の色*/
  border-right: 2px solid #ccc;
  /*矢印の色*/
  height: 20px;
  width: 20px; }

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 2.5%;
  transform: rotate(-135deg); }

.slick-next {
  /*次へ矢印の位置と形状*/
  right: 2.5%;
  transform: rotate(45deg); }

/*========= レイアウトのためのCSS ===============*/
ul {
  margin: 0;
  padding: 0;
  list-style: none; }

li {
  position: relative; }

.slider1_txt {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
  z-index: 100;
  filter: drop-shadow(2.5px 2.5px 8px rgba(0, 0, 0, 0.3));
  /*margin-top:5%;*/ }
  @media (max-width: 480px) {
    .slider1_txt {
      width: 95%; } }
  .slider1_txt h1 {
    font-size: min(5vw, 60px); }
    @media (max-width: 480px) {
      .slider1_txt h1 {
        font-size: min(7vw, 55px); } }
  .slider1_txt h2 {
    font-size: min(3vw, 40px); }
    @media (max-width: 480px) {
      .slider1_txt h2 {
        font-size: min(6vw, 55px); } }
  .slider1_txt .datedeco {
    text-align: center;
    font-size: 2vw;
    margin: 1rem auto;
    color: #ffffff; }
  .slider1_txt .datebg {
    background-color: #051464;
    padding: .5rem; }

.top_block {
  width: 66%;
  max-width: 840px;
  padding: 14vh 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(20, 20, 210, 0.3);
  z-index: 100; }
  @media (max-width: 480px) {
    .top_block {
      width: 90%;
      padding: 14vw 0; } }

.slider2_txt {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  color: #ffffff;
  background-color: rgba(5, 20, 100, 0.75);
  padding: 4vh 0;
  /*margin-top:5%;*/ }
  @media (max-width: 480px) {
    .slider2_txt {
      padding: 2vh 0; } }
  .slider2_txt h1 {
    font-size: min(4vw, 48px);
    line-height: 1.5;
    padding-bottom: 2vh; }
  .slider2_txt h2 {
    font-size: min(2vw, 36px); }

.slider3_txt {
  width: 50%;
  position: absolute;
  top: 15%;
  right: 6%;
  text-align: center;
  color: #ffffff;
  padding: 4vh 0; }
  .slider3_txt h1 {
    font-size: 3vw;
    line-height: 1.5;
    padding-bottom: 2vh; }
  .slider3_txt h2 {
    font-size: 1w; }
  @media (max-width: 480px) {
    .slider3_txt {
      top: 10%; }
      .slider3_txt h1 {
        font-size: 14px;
        line-height: 1.5;
        padding-bottom: 1vh; }
      .slider3_txt h2 {
        font-size: 10px; } }
  .slider3_txt hr {
    width: 80%;
    border-top: 1.5px solid #ffffff;
    margin: 2vh auto; }
    @media (max-width: 480px) {
      .slider3_txt hr {
        margin: 1vh auto; } }

.cap {
  position: absolute;
  left: 1%;
  bottom: 1%;
  color: #ffffff;
  font-size: 0.5vw;
  /*z-index:999;*/ }
  @media (max-width: 480px) {
    .cap {
      font-size: 6px; } }

.slider4_txt {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  color: #051464;
  /*margin-top:5%;*/ }
  .slider4_txt h1 {
    font-size: min(4vw, 48px);
    padding-bottom: 2vh; }
  .slider4_txt h2 {
    font-size: min(2vw, 36px); }

.mplogo {
  position: absolute;
  width: 20%;
  top: 13%;
  left: 3%; }
  @media (max-width: 480px) {
    .mplogo {
      top: 13%;
      left: 5%; } }

.mplogo2 {
  position: absolute;
  z-index: 100;
  width: 16%;
  max-width: 220px;
  bottom: 3%;
  right: 2%; }
  @media (max-width: 480px) {
    .mplogo2 {
      width: 30%;
      bottom: 5%;
      right: 3%; } }

.rtlogo {
  position: absolute;
  width: 10%;
  top: 10%;
  right: 2%; }
  @media (max-width: 480px) {
    .rtlogo {
      top: 12%;
      right: 4%; } }

.slider-btn {
  display: inline-block;
  padding: 1rem 2rem;
  box-sizing: border-box;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
  background: #6244BB;
  border: solid 2px #7359C2;
  transition: 0.3s;
  text-decoration: none;
  font-size: 14px; }
  @media (max-width: 480px) {
    .slider-btn {
      padding: .5rem 1rem;
      font-size: 10px; } }
  .slider-btn:hover {
    border: solid 2px #276ef1;
    background: #276ef1; }

/*a{
  color: #fff;
}

a:hover,
a:active{
  text-decoration: none;
}*/
.wrapper {
  position: relative; }

.sponlycta_section {
  display: none;
  width: 100%;
  margin-top: 1vh;
  background-color: #f7f4f2; }
  @media (max-width: 480px) {
    .sponlycta_section {
      display: block; } }

.sponlycta_wrapper {
  width: 95%;
  background-color: #f7f4f2;
  margin: 0 auto;
  padding: 2vh 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; }
  .sponlycta_wrapper img {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; }

.sponlycta {
  width: 33%;
  filter: drop-shadow(1.5px 1.5px 3px rgba(0, 0, 0, 0.5)); }

/*hero txt*/
.hero_content {
  width: 95%;
  padding: clamp(10px, 5vw, 50px) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  margin: auto; }
  @media (max-width: 480px) {
    .hero_content {
      width: 95%;
      margin: 0 auto; } }
  .hero_content h3 {
    color: #051464;
    padding: 2vh 0; }
  .hero_content img {
    width: 20%;
    max-width: 240px;
    margin: 0 auto; }
    @media (max-width: 480px) {
      .hero_content img {
        width: 40%; } }

.merits {
  width: 100%;
  position: relative;
  background-color: #1414d2;
  padding: 3vh 0;
  text-align: center; }
  @media (max-width: 480px) {
    .merits {
      padding-bottom: 6vh; } }
  .merits h3 {
    color: #a5ebff;
    padding: 2vh 0; }
  .merits img {
    width: 20%;
    max-width: 100px;
    margin: 0 auto; }
    @media (max-width: 480px) {
      .merits img {
        width: 70%; } }

.inner_box {
  width: 90%;
  max-width: 1380px;
  margin: 0 auto;
  padding-top: clamp(10px, 3vw, 20px);
  padding-bottom: clamp(10px, 4vw, 30px); }

.light-blue {
  color: #a5ebff; }

.str {
  font-weight: 600; }

.note {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-top: .5rem; }

.note2 {
  font-size: 1.2rem;
  margin-top: 1rem;
  padding-bottom: 2vw; }

.points {
  width: 100%;
  margin: 0 auto;
  padding: 6vh 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media only screen and (max-width: 680px) {
    .points {
      padding: 2vh 0; } }
  .points .list {
    width: 32%; }
    .points .list:nth-child(4) {
      padding-top: 3rem; }
    .points .list:nth-child(5) {
      padding-top: 3rem; }
    .points .list:nth-child(6) {
      padding-top: 3rem; }
    .points .list img {
      width: 100%;
      padding-bottom: 2vh; }
    @media only screen and (max-width: 680px) {
      .points .list {
        width: 46%;
        padding-top: 2rem;
        /*&:nth-child(odd) {padding-top:2rem;}
        &:first-child {padding-top:0;}*/ }
        .points .list:nth-child(3) {
          padding-top: 3rem; }
        .points .list:nth-child(4) {
          padding-top: 3rem; }
        .points .list:nth-child(5) {
          padding-top: 3rem; }
        .points .list:nth-child(6) {
          padding-top: 3rem; } }
    .points .list p {
      color: white; }

.date {
  position: absolute;
  right: 10vw;
  bottom: 8%;
  color: #ffffff; }
  @media (max-width: 480px) {
    .date {
      bottom: 2%; } }

.miles {
  width: 100%;
  background-color: #051464; }

.miles_wrap {
  width: 90%;
  max-width: 1380px;
  margin: 0 auto;
  text-align: center;
  padding-top: 5rem; }
  .miles_wrap__ttl {
    /*width:20%;*/
    margin: .5vh auto;
    font-size: 2.5rem;
    color: #ffffff;
    padding: 1rem;
    font-weight: 600;
    /*background-color:$medium-blue;*/
    /*@include tab{width:30%;}
    @include sp{width:70%;}*/ }

.miles_wrap.wider {
  padding-top: 5vw; }
  @media (max-width: 480px) {
    .miles_wrap.wider {
      padding-top: 10vw; } }

/*MILE POOL CSS START HERE*/
.milepool {
  width: 100%;
  background-color: #FFF; }

.milepool_wrap {
  width: 90%;
  /*max-width: 1380px;*/
  margin: 0 auto;
  padding: 5vw 0;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row; }
  @media (max-width: 480px) {
    .milepool_wrap {
      padding: 2rem 0; } }

.milepool_child1 {
  width: 50%;
  text-align: center;
  margin: auto;
  padding: 1vw 0; }
  .milepool_child1 h3 {
    color: #000;
    font-size: clamp(18px, 1.5vw, 28px); }
  .milepool_child1 a {
    margin: 2vw 0; }
  .milepool_child1 p {
    padding-top: 2vw; }
  @media only screen and (max-width: 680px) {
    .milepool_child1 {
      width: 100%;
      padding: 3vw 0; }
      .milepool_child1 h3 {
        font-size: 2rem; }
      .milepool_child1 a {
        margin: 3vw 0; } }

.milepool_child2 {
  width: 50%; }
  .milepool_child2 img {
    width: 100%; }
  @media only screen and (max-width: 680px) {
    .milepool_child2 {
      width: 100%; } }

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  overflow: auto;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0; }

.overlay:target {
  visibility: visible;
  opacity: 1; }

.popup {
  width: 85%;
  /*height:85vh;*/
  margin: auto;
  margin-top: 110px;
  /*padding: 2vw;*/
  background: #fff;
  position: relative;
  /*top: 50%;
  left:50%;
  	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
  transition: all 5s ease-in-out;*/
  overflow: auto;
  z-index: 999; }
  @media (max-width: 880px) {
    .popup {
      height: 90vh;
      margin-top: 60px;
      /*padding: 3vw;*/ } }

.close {
  position: fixed !important;
  top: 130px;
  right: 140px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #000; }
  @media (max-width: 880px) {
    .close {
      top: 60px;
      right: 35px; } }

.close:hover {
  color: #276ef1; }

.milepool-points {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 10px;
  margin-top: 1vw;
  margin-bottom: 1.5vw; }
  @media (max-width: 880px) {
    .milepool-points {
      gap: 5px;
      margin-bottom: 3vw; } }

.points-txt {
  width: 30%;
  border: 1.5px solid #276ef1;
  text-align: center;
  padding: 1vw;
  display: flex;
  align-items: center; }

.milepoolpopup_child1 {
  width: calc(60% - 2vw);
  text-align: left;
  margin-right: 2vw; }
  .milepoolpopup_child1 h3 {
    color: #000;
    font-size: clamp(16px, 1.6vw, 28px);
    padding: 0; }
  .milepoolpopup_child1 a {
    margin-top: 1vw; }
  .milepoolpopup_child1 p {
    font-size: clamp(12px, 1vw, 24px);
    margin: auto; }
  @media (max-width: 880px) {
    .milepoolpopup_child1 {
      width: 100%;
      padding-top: 2vw;
      margin-right: 0; }
      .milepoolpopup_child1 a {
        margin: 1vw 0; } }
  .milepoolpopup_child1 ul {
    margin-bottom: 1vw; }
    @media (max-width: 880px) {
      .milepoolpopup_child1 ul {
        margin-bottom: 2vw; } }
    .milepoolpopup_child1 ul li {
      list-style: initial;
      line-height: 1.5;
      list-style-position: inside;
      margin-left: 1.4em;
      text-indent: -1.4em;
      font-size: clamp(12px, 1vw, 24px); }
  .milepoolpopup_child1 p span {
    font-size: 1rem;
    margin-top: 5vw;
    line-height: 1; }

.memo {
  line-height: 1.2;
  text-align: left; }

.milepoolpopup_child2 {
  width: 40%;
  background-image: url("../img/milepool_img.jpg");
  background-position: 10% 33%;
  background-size: cover;
  /*img{width:80%;	object-fit:contain;}*/ }
  @media (max-width: 880px) {
    .milepoolpopup_child2 {
      width: 100%;
      height: 16vh;
      margin-top: 15px; } }

/*MILE POOL CSS ENDS HERE*/
/*MONEY & MILES CSS START HERE*/
.moneynmile {
  width: 100%;
  background-color: #FFF; }

.moneynmile_wrap {
  width: 90%;
  padding: 0 0 8rem 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; }
  @media (max-width: 480px) {
    .moneynmile_wrap {
      padding: 0; } }
  .moneynmile_wrap:nth-child(1) {
    padding: 0 0 5vw 0; }

.moneynmile_child1 {
  width: 50%;
  text-align: center;
  margin: auto;
  padding: 1vw 0; }
  .moneynmile_child1 h3 {
    color: #000;
    font-size: clamp(18px, 1.5vw, 28px); }
  .moneynmile_child1 a {
    margin: 2vw 0; }
  .moneynmile_child1 p {
    padding-top: 2vw; }
  @media only screen and (max-width: 680px) {
    .moneynmile_child1 {
      width: 100%;
      padding: 3vw 0; }
      .moneynmile_child1 h3 {
        font-size: 2rem; }
      .moneynmile_child1 a {
        margin: 3vw 0; } }

.moneynmile_child2 {
  width: 50%; }
  .moneynmile_child2 img {
    width: 100%; }
  @media only screen and (max-width: 680px) {
    .moneynmile_child2 {
      width: 100%; } }

/*MONEY & MILES CSS ENDS HERE*/
.empha {
  color: #1414d2;
  font-size: 3rem; }

.pcleftspcenter {
  text-align: left; }
  @media (max-width: 480px) {
    .pcleftspcenter {
      text-align: center; } }

.type1 {
  width: 90%;
  max-width: 1380px;
  margin: 0 auto;
  margin-top: 2vw;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center; }
  @media (max-width: 480px) {
    .type1 {
      margin-top: 2rem; } }

.type1_child {
  position: relative;
  width: 50%;
  /*@media only screen and (max-width: 880px) and (min-width: 481px) {width:100%;}*/ }
  .type1_child img {
    object-fit: contain; }
  @media (max-width: 480px) {
    .type1_child {
      width: 100%; } }
  @media (max-width: 880px) {
    .type1_child {
      width: 100%; } }
  .type1_child__txt {
    width: calc(50% - 4vh);
    padding: 2vh;
    align-self: center;
    font-size: clamp(13px, 3.4vw, 16px); }
    @media (max-width: 880px) {
      .type1_child__txt {
        width: 100%; }
        .type1_child__txt h4 {
          margin-top: 1rem;
          text-align: center; } }
    @media (max-width: 480px) {
      .type1_child__txt {
        width: 100%; }
        .type1_child__txt h4 {
          margin-top: 1rem;
          text-align: center; } }

.cap2 {
  position: absolute;
  left: 1%;
  bottom: 1%;
  color: #ffffff;
  font-size: 0.5vw;
  z-index: 999; }
  @media (max-width: 480px) {
    .cap2 {
      font-size: 6px; } }

.type2.bottom {
  padding-bottom: 5vw; }
  @media (max-width: 480px) {
    .type2.bottom {
      padding-bottom: 5rem; } }

.type2 {
  width: 90%;
  max-width: 1380px;
  margin: 0 auto;
  margin-top: 2vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media (max-width: 880px) {
    .type2 {
      gap: 1rem; } }
  @media (max-width: 480px) {
    .type2 {
      gap: 2rem;
      margin-top: 2rem; } }

.type2_child {
  width: 32%;
  padding: 1.5rem;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; }
  .type2_child h4 {
    text-align: center;
    margin: 1rem 0;
    border-top: 1.5px solid #051464;
    padding-top: 1rem; }
  .type2_child img {
    width: 100%; }
  @media (max-width: 880px) {
    .type2_child {
      width: 100%; } }
  @media (max-width: 480px) {
    .type2_child {
      width: 100%; } }
  .type2_child__logo {
    width: auto;
    margin: 0 auto;
    text-align: center;
    max-width: 280px; }
  .type2_child__txt {
    /*flex: 1 0 auto;*/
    font-size: clamp(13px, 3.4vw, 16px);
    flex: 1;
    height: 100%;
    min-height: 0%;
    padding-bottom: 2vh; }
  .type2_child__CP {
    margin-top: auto;
    flex: 2;
    height: 100%;
    min-height: 0%; }
  .type2_child__txt2 {
    /*flex: 1 0 auto;*/
    font-size: clamp(13px, 3.4vw, 16px);
    flex: 1;
    height: 100%;
    min-height: 0%;
    padding-top: 1rem; }
  .type2_child__CP2 {
    margin-top: auto;
    padding-bottom: 1vh;
    /*flex:2;
    height:100%;
    min-height:0%;*/ }

.autoadj {
  margin-top: auto; }

.strong {
  font-weight: 600; }

.b_center {
  /*margin:2vh auto;*/
  text-align: center;
  margin-top: auto;
  margin-bottom: 1rem; }
  @media (max-width: 480px) {
    .b_center {
      margin-bottom: 0; } }

.limited {
  width: 100%;
  margin-top: 1rem; }
  .limited__ttl {
    background-color: #d7d2ff;
    color: #051464;
    padding: 1rem 0;
    text-align: center;
    font-weight: 700;
    margin: auto; }
    .limited__ttl img {
      width: 2rem;
      padding-left: 1.5rem; }
  .limited__txt {
    background-color: #f7f4f2;
    padding: 1.5rem; }

.ctastyle {
  color: #1414d2;
  line-height: 1.5; }

h4 {
  color: #000;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 2rem; }

.highlight {
  background: linear-gradient(transparent 10%, #a5ebff 10% 90%, transparent 90%); }

.blink {
  animation: star 1s ease-in-out 0s infinite;
  -webkit-animation: star 1s ease-in-out infinite alternate;
  -moz-animation: star 1s ease-in-out infinite alternate; }

@keyframes star {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes star {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes star {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.super {
  font-size: 0.5vw;
  vertical-align: super; }
  @media (max-width: 480px) {
    .super {
      font-size: 0.1vw; } }

.onoff {
  display: block; }
  @media (max-width: 480px) {
    .onoff {
      display: none; } }

/*
.CPbanner{
	width:100%;
	background-color:$light-tonal-gray;
	padding:4vh 0;
	
	&__banner{
		width:90%;
		margin:0 auto;
		filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
	}
	.second{
		margin-top:4vh;
	}
}*/
.CPbanner {
  width: 90%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 4vh auto;
  justify-content: space-between;
  gap: 10px; }
  .CPbanner__banner {
    width: calc(50% - 40px);
    /*max-width: 820px;*/
    margin: 10px;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3)); }
    @media (max-width: 480px) {
      .CPbanner__banner {
        width: 100%;
        margin: 0; } }

/*affiliated card*/
.cards {
  width: 100%;
  background-image: url("../img/cards_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /*position: relative;*/
  padding: clamp(10px, 5vw, 50px) 0; }

.cards_ttl {
  width: 95%;
  padding-bottom: 3vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: auto; }
  @media (max-width: 480px) {
    .cards_ttl {
      width: 90%;
      margin: 0 auto;
      padding: 1vh 0; } }
  .cards_ttl h3 {
    color: #000;
    padding: 3vh 0 1vh 0; }

.cards_box {
  width: 90%;
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; }

.cards_child {
  width: 100%;
  margin-top: 3vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  padding-bottom: 3rem; }
  @media (max-width: 480px) {
    .cards_child {
      gap: 10px;
      margin-top: 5vh; } }
  .cards_child__pic {
    width: 40%;
    max-width: 350px;
    /*margin:0 auto;*/ }
    @media only screen and (max-width: 680px) {
      .cards_child__pic {
        width: 90%;
        margin: 0 auto; } }
  .cards_child__txt {
    width: 50%;
    align-items: center; }
    .cards_child__txt h4 {
      color: #000;
      margin-bottom: 1rem; }
    @media only screen and (max-width: 680px) {
      .cards_child__txt {
        width: 90%;
        margin: 0 auto; } }

figcaption {
  padding: 1rem;
  font-size: 1.2rem;
  text-align: center; }

details {
  padding: 0.5em 0.5em 0; }

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em 0; }

details[open] {
  padding: 0.5em 0; }

details[open] summary {
  margin-bottom: 0.5em;
  margin: -0.5em -0.5em 0.5em 0; }

.cpdate {
  background-color: #051464;
  color: #ffffff;
  margin: 1rem auto;
  padding: .5rem; }

.highlight2 {
  background: linear-gradient(transparent 10%, #d7d2ff 10% 90%, transparent 90%);
  padding: 0 .5rem; }

/*banner*/
.banner_section {
  width: 100%;
  margin: 4vh auto; }

.ttl_banner {
  width: 100%;
  text-align: center;
  line-height: 0; }
  @media (max-width: 480px) {
    .ttl_banner {
      width: 90%;
      margin: 0 auto; } }

.banner_wrap {
  width: 80%;
  max-width: 1080px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-between; }
  @media only screen and (max-width: 680px) {
    .banner_wrap {
      width: 90%; } }

.banner {
  width: 48%;
  max-width: 820px;
  margin: 2rem 0;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3)); }
  @media only screen and (max-width: 680px) {
    .banner {
      width: 100%; } }

.banner:hover {
  transform: translateY(-5px);
  transition: all 0.5s 0s ease; }

/*banner*/
.CPbnr_section {
  width: 100%;
  padding: 4vw 0;
  background-color: #F7F4F2; }

.bnr_wrap {
  width: 80%;
  max-width: 1080px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-between; }
  @media only screen and (max-width: 680px) {
    .bnr_wrap {
      width: 90%; } }

.bnr {
  width: 48%;
  max-width: 820px;
  margin: 2rem 0;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1)); }
  @media only screen and (max-width: 680px) {
    .bnr {
      width: 100%; } }

.bnr:hover {
  transform: translateY(-5px);
  transition: all 0.5s 0s ease; }

/*logo*/
.logo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 10rem auto 0; }
  @media (max-width: 480px) {
    .logo {
      margin: 4rem auto 0; } }
  .logo a {
    width: 18%; }
    @media (max-width: 480px) {
      .logo a {
        width: 50%; } }
    .logo a img {
      width: 100%;
      padding: 3rem;
      box-sizing: border-box; }

.deco2 {
  margin: 0 0 -1px;
  width: 100%;
  height: 10.9vw;
  background: url("../img/top/darkblue_bottom.svg") top/cover; }

.deco3 {
  margin: 0 0 -1px;
  width: 100%;
  height: 11vw;
  background: url("../img/common/deco_02.svg") top/cover; }

.bordertb {
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff; }

.padtop {
  padding-top: 2rem; }

.anchor {
  /*  display: block;
     padding-top: 66px;
     margin-top: -66px;*/ }