/*------------------------------
基本
------------------------------*/
#top.spend {
  background: #FFFEFB;
}
#top.spend main{
  gap:0 0;
}
#top.spend .article {
  padding-top: 0;
  padding-bottom: 0;
}
@media only screen and (max-width: 767px) {
  #top.spend .article {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.f-cormo{
  font-family: "Cormorant", serif;
}
/*------------------------------
fv
------------------------------*/
#top.spend #fv{
  position: relative;
}

#top.spend #fv .title-area2{
  position: absolute;
  top: 50%;
  right:0;
  left:0;
  transform: translateY(-50%);
  margin: auto;
}
#top.spend #fv .title-area2 [class*="title"]{
  text-align: center;
  color:#fff;
  font-size:2.8125em;
  text-shadow:0 0 4px rgba(0,0,0,.75);
}
#top.spend #fv .title-area2 .title .f-cormo{
  font-size:1.666em;
  margin-top: -.5em;
}
#top.spend #fv .title-area2 .subtitle{
  line-height: 1.875;
}
#top.spend #fv .ic-scroll {
  position: absolute;
  bottom:0;
  right:0;
  left:0;
  height: 2.75em;
  margin: auto;
  text-align: center;
  color:#fff;
}
#top.spend #fv .ic-scroll .f-cormo{
  font-size:.875em;
  font-weight: 600;
}
#top.spend #fv .ic-scroll .h-border{
  position: relative;
  width:1px;
  margin: auto;
  animation-name: borderAnim;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-iteration-count:infinite;
}
#top.spend #fv .ic-scroll .h-border::after{
  position: absolute;
  content: "";
  top:0;
  width:1px;
  height:100%;
  background: #fff;
}
@keyframes borderAnim {
  0% {
  top:0;
  height:0;
  }
  50% {
  top:0;
  height:1.4375em;
 }  
  100% {
    top:1.4375em;
    height:0;
  }
}

@media only screen and (max-width: 767px) {
  #top.spend #fv .title-area2 [class*="title"]{
    font-size:1.928em;
  }
  #top.spend #fv .title-area2 .title .f-cormo{
    font-size:2.4em;
    margin-top: -.5em;
  }
}


/*------------------------------
breadcrumbs
------------------------------*/

/*------------------------------
spend-mainlist
------------------------------*/
.section-tospend .preface{
  text-align: center;
  font-size:1.125em;
  line-height: 1.88;
  color:#4B595D;
  margin-bottom: 2em;
}
@media only screen and (max-width: 767px) {
  .section-tospend .preface{
    font-size:1em;
  }
}
/*サムネイルリスト
------------------------------*/
.section-tospend .spend_thumb-list{
  gap:1.484em;
}
.section-tospend .spend_thumb-list .linkarea{
  display: inline-block;
  position: relative;
}
.section-tospend .spend_thumb-list .list-title{
  position: absolute;
  top: 50%;
  right:0;
  left:0;
  transform: translateY(-50%);
  font-size:1.5625em;
  color:#fff;
  text-shadow:0 0 5px rgba(0,0,0,1);
}
.section-tospend .spend_thumb-list img{
  width:100;
  height:auto;
}
.section-tospend .spend_thumb-list .list-title::after{
  position: absolute;
  right:0;
  left:0;
  margin:auto;
  bottom: -.5em;
  content:'';
  background: #ffffff;
  height: calc(tan(60deg) * .5em / 3);
  width: .5em;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow:0 0 5px 1px rgba(0,0,0,1);
-moz-box-shadow:0 0 5px 1px rgba(0,0,0,1);
-webkit-box-shadow:0 0 5px 1px rgba(0,0,0,1);
}
.section-tospend .spend_thumb-list .text-list{
  font-size:.875em;
  line-height: 1.785;
  margin-top: .714em;
}
@media only screen and (max-width: 767px) {
  .section-tospend .spend_thumb-list{
    gap:.8em;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .section-tospend .spend_thumb-list .list-btn{
    width:calc((100% - 2em) / 3)
  }
  .section-tospend .spend_thumb-list .list-title{
    font-size:.9em;
  }
  /*テキスト溢れ対策*/
  .section-tospend .spend_thumb-list .list-btn:nth-of-type(n+4) .list-title{
    letter-spacing: normal;
  }
  .section-tospend .spend_thumb-list .text-list{
    font-size:.7em;
    letter-spacing: .02em;
  }
}

/*メインリスト
------------------------------*/
.section-tospend .spend_main-list {
  background: url(../images/spend/spend_bg.svg) top center / contain repeat-y ;
  gap:5em 0;
  padding:5.625em 0 5em;
  margin-top: -1em;
}
.spend_main-list .listarea {
  gap:0 2em;
  flex-wrap: nowrap;
}
.spend_main-list .listarea > *{
  margin:0;
}

/*テキスト部分*/
.spend_main-list .listarea .text-area {
  padding: 0 2em;
  width: 38rem;
}
.spend_main-list .listarea .text-area .list-title_e {
  margin-bottom: .12em;
  font-size:2.625em;
  letter-spacing: .07em;
  line-height: 1.23;
  color:#4e595c;
}
.spend_main-list .listarea .text-area .list-title_j {
  font-size:1.5em;
  letter-spacing: .166em;
  line-height: 1.875;
  color:#000;
}
.spend_main-list .listarea .text-area .text-list {
  margin-top: 1.875em;
  font-size:1em;
  letter-spacing: .125em;
  line-height: 1.9375;
  color:#000;
}
.spend_main-list .listarea .text-area .font-s{
  font-size:.75em;
  margin-top: .5em;
}
@media only screen and (min-width: 768px) {
  .spend_main-list .listarea:nth-of-type(odd) {
    flex-direction: row-reverse;
    -webkit-box-pack: start;
    justify-content: flex-start;
  }
  .spend_main-list .listarea:nth-of-type(even) {
    flex-direction: row;
    -webkit-box-pack: start;
    justify-content: flex-start;
  }
}
@media only screen and (max-width: 767px) {
  .section-tospend .spend_main-list {
    background: url(../images/spend/spend_bg.svg) top center / 200% auto repeat-y ;
  }
  .spend_main-list .listarea {
    display: block;
  }
  .spend_main-list .listarea .text-area {
    width:100%;
    padding: 1.5em;
  }
  .spend_main-list .listarea .text-area .list-title_e {
    font-size:2em;
  }
  .spend_main-list .listarea .text-area .list-title_j {
    font-size:1.25em;
  }
  .spend_main-list .listarea .text-area .text-list {
    font-size:.9em;
  }
}

/*swiper部分*/
.spend_main-list .listarea .slider-area{
  width:52.1%;
}
.spend_main-list .listarea .slider-area .swiper-wrapper{
  overflow: hidden;
}
.spend_main-list .listarea:nth-of-type(odd) .slider-area .swiper-wrapper{
  border-radius: .625em 0 0 .625em;
}
.spend_main-list .listarea:nth-of-type(even) .slider-area .swiper-wrapper{
  border-radius: 0 .625em .625em 0;
}
@media only screen and (max-width: 767px) {
  .spend_main-list .listarea .slider-area{
    width:calc(100% - 1.5em);
  }
  .spend_main-list .listarea:nth-of-type(odd) .slider-area {
    margin-left: auto;
  }
  .spend_main-list .listarea:nth-of-type(even) .slider-area {
    margin-right: auto;
  }
}
/*pagination*/
.spend_main-list .listarea .slider-area .swiper-pagination {
  position: relative;
  margin-top: 1.5em;
  margin-bottom: 0;
  line-height: 1;
}
.listarea:nth-of-type(odd) .slider-area .swiper-pagination-bullets {
  text-align: left;
  padding-left: 1.2em;
}
.listarea:nth-of-type(even) .slider-area .swiper-pagination-bullets {
  text-align: right;
  padding-right: 1.2em;
}
.listarea .slider-area .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  background: #bfc3c4;
  opacity: 1;
  margin: 0 8px !important;
}
.listarea .slider-area .swiper-pagination-bullet-active {
  transform: scale(1.6);
}
.listarea .slider-area [class^="swiper-button-"] {
  top:initial;
  bottom: .5em;
  width:.875em;
  height:1em;
  font-size: 1rem;
  z-index: 99999;
}
.listarea .slider-area .swiper-button-next {
  right:0
}
.listarea:nth-of-type(odd) .slider-area .swiper-button-next {
  right:initial;
  left:6.4375em;
}
.listarea .slider-area .swiper-button-prev {
  left:0
}
.listarea:nth-of-type(even) .slider-area .swiper-button-prev {
  right:6.4375em;
  left:initial;
}
.listarea.photo2 .slider-area .swiper-button-prev {
  right:4.75em;
  left:initial;
}
.listarea.photo2-odd .slider-area .swiper-button-next {
  left:4.75em;
}
.listarea .slider-area [class^="swiper-button-"]::after {
  content:"";
  width:.875em;
  height:0.6875rem;
}
.listarea .slider-area .swiper-button-next::after {
  background: url(../images/spend/ic_tri-arrow_r.svg) right center / contain no-repeat;
}
.listarea .slider-area .swiper-button-prev::after {
  background: url(../images/spend/ic_tri-arrow_l.svg) left center / contain no-repeat;
}


/*------------------------------
特典
------------------------------*/
.section-reserve{
  background: #F6F5F1;
  padding:2em 0;
}
.section-reserve .list-title_e {
  margin-bottom: .2em;
  font-size:3.0625em;
  letter-spacing: .122em;
  line-height: 1.12;
  color:#4e595c;
}
.section-reserve .list-title_j {
  font-size:1.5em;
  letter-spacing: .166em;
  line-height: 1.875;
  color:#000;
}

@media only screen and (max-width: 767px) {
  .section-reserve .list-title_e {
    font-size:2em;
  }
  .section-reserve .list-title_j {
    font-size:1.25em;
  }
}

#top.spend .first-banner{
  padding: 5em 0 0 0;
}
#top.spend .first-banner .preface{
  font-size:1.125em;
  line-height: 1.88;
  color:#4B595D;
  padding:0;
  margin-bottom: 1em;
}
#top.spend .first-banner .content.row{
  padding:0;
}
#top.spend .first-banner .content.row .inner{
  margin:0;
}

@media only screen and (max-width: 767px) {
  #top.spend .first-banner{
    padding: 2em 1.25em  3.5em  1.25em;
  }

  /* #top.spend .first-banner .preface{
    font-size:1em;
  } */
}