/*　top
------------------------------------------------------------------------------------------------*/
#top-slider {
  position: relative;
  background: #1B5FDE;
  margin-bottom: 13vw;
}
#top-slider::before {
  content: "";
  display: block;
  width: 100%;
  height: 8.6vw;
  background: url(../westoita/img/header-btm.svg) center bottom no-repeat;
  background-size: 101% auto;
  position: absolute;
  left: 0;
  bottom: calc(1px - 8.5vw);
  z-index: -1;
}

@media (max-width: 768px) {
  #top-slider {
    margin-bottom: 9rem;
  }
  #top-slider::before {
    height: 15.3vw;
    bottom: calc(1px - 15.2vw);
  }
  #top-slider .swiper-wrapper {
    height: 60vh;
  }
  #top-slider .swiper-wrapper img {
    max-height: 100%;
    max-width: none;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

#top-slider .control-wrap {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  position: absolute;
  left: 50%;
  bottom: -9.5rem;
  transform: translateX(-50%);
}
#top-slider .control-wrap .btn {
  display: flex;
  align-items: center;
}
#top-slider .swiper-button-prev {
  margin-right: 4rem;
}
#top-slider .swiper-button-next,
#top-slider .swiper-button-prev {
  position: unset;
  margin-top: 0;
}
#top-slider .swiper-scrollbar {
  width: 24rem !important;
  margin: 0 6.4rem 0 0;
  background: #A8A8A8;
}
#top-slider .swiper-scrollbar-drag {
  background: #fff;
}

@media (max-width: 768px) {
  #top-slider .control-wrap {
      justify-content: center;
      width: 60%;
      bottom: -4.5rem;
  }
  #top-slider .swiper-button-prev {
    margin-right: 1.5rem;
  }
  #top-slider .swiper-scrollbar {
    width: 100% !important;
    margin-right: 2rem;
  }
}

#top-slider .slide-txt {
  position: absolute;
  right: 5rem;
  bottom: 5rem;
  font-weight: bold;
  text-align: right;
}
#top-slider .slide-txt .top-txt {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0 0.8em;
  font-size: 4.8rem;
  color: #fff;
  letter-spacing: 0.05em;
  background: #1B5FDE;
}
#top-slider .slide-txt .sub-txt {
  display: inline-block;
  padding: 0.3em 0.8em 0.1em 0.8em;
  font-size: 2.8rem;
  background: #fff;
}

@media (max-width: 768px) {
  #top-slider .slide-txt {
    right: 1rem;
    bottom: 1rem;
    max-width: 90%;
  }
  #top-slider .slide-txt .top-txt {
    font-size: 2.6rem;
    line-height: 1.5;
  }
  #top-slider .slide-txt .sub-txt {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}


/* index-toptxt */
.index-toptxt {
  display: block;
  margin-bottom: 8rem;
}
.index-toptxt .ttl {
  margin-bottom: 2rem;
  font-size: 3.8rem;
  font-weight: bold;
  text-align: center;
}
.index-toptxt p {
  font-size: 1.8rem;
}

@media (max-width: 768px) {
  .index-toptxt {
    margin-bottom: 4rem;
  }
  .index-toptxt .ttl {
    margin-bottom: 1rem;
    font-size: 2rem;
    line-height: 1.7;
  }
  .index-toptxt p {
    font-size: 1.6rem;
  }
}


/* area-list */
.area-list .left-col,
.area-list .right-col {
  margin: 8rem 0 15rem 0;
  position: relative;
}
.left-col .top-img,
.right-col .top-img {
  display: block;
  margin-bottom: 4rem;
}
.left-col .top-img img,
.right-col .top-img img {
  width: 100%;
}
.left-col .lead {
  position: absolute;
  top: 16rem;
  left: 10%;
  font-size: 3.8rem;
  font-weight: bold;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
}
.right-col .lead {
  position: absolute;
  top: 16rem;
  right: 10%;
  font-size: 3.8rem;
  font-weight: bold;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
}
.left-col .lead span,
.right-col .lead span {
  display: inline;
  padding: 0.8em 0.5em 0.8em 0.4em;
  background: linear-gradient(transparent 0%, #fff 0%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: 2.8;
}

.left-col .content,
.right-col .content {
  display: flex;
  justify-content: space-between;
}
.right-col .content {
  flex-direction: row-reverse;
}
.left-col .img-box,
.right-col .img-box {
  width: 44%;
}
.left-col .img-box img,
.right-col .img-box img {
  width: 100%;
}
.left-col .info-box,
.right-col .info-box {
  width: 53%;
}
.left-col .info-box .sub-img,
.right-col .info-box .sub-img {
  display: flex;
  justify-content: space-between;
}
.left-col .info-box .sub-img img,
.right-col .info-box .sub-img img {
  display: block;
  margin-bottom: 1rem;
  width: 48%;
}
.left-col .info-box .ttl,
.right-col .info-box .ttl {
  font-size: 3.6rem;
  font-weight: bold;
  letter-spacing: 0.06em;
}
.left-col .info-box .ttl span,
.right-col .info-box .ttl span {
  margin-right: 0.5em;
  font-size: 4.2rem;
  font-weight: 600;
  color: #1B5FDE;
}
.left-col .info-box .sub-ttl,
.right-col .info-box .sub-ttl {
  margin-bottom: 1rem;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.8;
}
.left-col .info-box p,
.right-col .info-box p {
  font-size: 1.6rem;
}

@media (max-width: 768px) {
  .area-list .left-col,
  .area-list .right-col {
    margin: 4rem 0 5rem 0;
  }
  .left-col .top-img,
  .right-col .top-img {
    margin-bottom: 2rem;
    height: 200px;
  }
  .left-col .top-img img,
  .right-col .top-img img {
    max-height: 100%;
    max-width: none;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .left-col .lead {
    top: 6rem;
    font-size: 2.4rem;
  }
  .right-col .lead {
    top: 6rem;
    font-size: 2.4rem;
  }
  .left-col .content,
  .right-col .content {
    display: block;
  }
  .left-col .img-box,
  .right-col .img-box {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .left-col .info-box,
  .right-col .info-box {
    width: 100%;
  }
  .left-col .info-box .ttl,
  .right-col .info-box .ttl {
    font-size: 2.6rem;
  }
  .left-col .info-box .ttl span,
  .right-col .info-box .ttl span {
    font-size: 3.2rem;
  }
  .left-col .info-box .sub-ttl,
  .right-col .info-box .sub-ttl {
    font-size: 2rem;
  }
  .left-col .info-box .btn-1,
  .right-col .info-box .btn-1 {
    margin-top: 2rem;
  }
}


/* attraction */
.attraction {
  max-width: 127rem;
  padding: 0 min(4.16%, 8rem);
  margin: 0 auto;
}
.attraction .top-ttl {
  margin-bottom: 5rem;
  font-size: 7.3rem;
  font-weight: 400;
  color: #1B5FDE;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.attraction .top-ttl span {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.attraction .list {
  display: flex;
  flex-wrap: wrap;
}
.attraction .list li {
  margin-bottom: 1rem;
  list-style: none;
  width: 23%;
  margin-right: 2.6%;
  position: relative;
}
.attraction .list li:nth-child(4n) {
  margin-right: 0;
}
.attraction .list li a {
  display: block;
  padding: 0.8rem 2rem;
  color: #fff;
  background: #1B5FDE;
  border: 1px solid #1B5FDE;
}
.attraction .list li a:hover {
  color: #1B5FDE;
  background: #fff;
}
.attraction .list li svg {
  width: 1.6rem;
  position: absolute;
  top: 50%;
  right: 2.2rem;
  transform: translateY(-50%);
}
.attraction .list li svg path {
  stroke: #fff;
}
.attraction .list li a:hover svg path{
  stroke: #1B5FDE;
}

@media (max-width: 768px) {
  .attraction {
    width: 100%;
    padding: 0 2.4rem;
  }
  .attraction .top-ttl {
    margin-bottom: 3rem;
    font-size: 3rem;
    line-height: 1.2;
  }
  .attraction .top-ttl span {
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0.7em 0 0;
  }
  .attraction .list {
    justify-content: space-between;
  }
  .attraction .list li {
    width: 48%;
    margin-right: 0;
  }
  .attraction .list li a {
    padding: 0.8rem 3rem 0.8rem 1rem;
  }
  .attraction .list li svg {
    width: 1.5rem;
    right: 1.5rem;
  }
}


/* banner */
.banner {
  display: block;
  margin: 10rem 0;
  position: relative;
}
.banner::before {
  content: '';
  background: url(../westoita/img/txt_attraction.svg) center center no-repeat;
  background-size: 100%;
  width: 101%;
  min-height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  z-index: -1;
}
.banner .banner-list {
  max-width: 127rem;
  padding: 0 min(4.16%, 8rem);
  margin: 0 auto;
}
.banner .banner-list .col {
  background: #fff;
}
.banner .banner-list .col a img {
  margin: 2em 0;
}
.banner .banner-list .col a:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .banner {
    margin: 4rem 0;
  }
  .banner .banner-list {
    width: 100%;
    padding: 0 2.4rem;
  }
}


/* modelcourse */
.modelcourse {
  margin: 15rem auto;
}
.modelcourse .top-ttl {
  margin-bottom: 5rem;
  font-size: 7.3rem;
  font-weight: 400;
  color: #1B5FDE;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.modelcourse .top-ttl span {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .modelcourse {
    margin: 5rem 0;
  }
  .modelcourse .top-ttl {
    margin-bottom: 3rem;
    font-size: 3rem;
    line-height: 1.2;
  }
  .modelcourse .top-ttl span {
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0.7em 0 0;
  }
}


/* sub
------------------------------------------------------------------------------------------------*/
.sub-topimg {
  position: relative;
  background: #1B5FDE;
  margin-bottom: 7.7vw;
}
.sub-topimg::before {
  content: "";
  display: block;
  width: 100%;
  height: 3.3vw;
  background: url(../westoita/img/header-btm.svg) center bottom no-repeat;
  background-size: 101% auto;
  position: absolute;
  left: 0;
  bottom: calc(1px - 3.2vw);
  z-index: -1;
}

@media (max-width: 768px) {
  .sub-topimg {
    margin-bottom: 5rem;
    height: 60vh;
  }
  .sub-topimg::before {
    height: 5.3vw;
    bottom: calc(1px - 5.2vw);
  }
  .sub-topimg img {
    max-height: 100%;
    max-width: none;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.sub-topimg .topimg-txt {
  position: absolute;
  right: 5rem;
  bottom: 5rem;
  font-weight: bold;
  text-align: right;
  letter-spacing: 0.05em;
}
.sub-topimg .topimg-txt .number {
  color: #1B5FDE;
  text-align: left;
  font-size: 7.3rem;
  font-weight: 500;
  line-height: 0.65;
}
.sub-topimg .topimg-txt .top-txt {
  display: inline-block;
  padding: 0 0.8em;
  font-size: 4.8rem;
  color: #fff;
  background: #1B5FDE;
}

@media (max-width: 768px) {
  .sub-topimg .topimg-txt {
    right: 1rem;
    bottom: 2rem;
    max-width: 90%;
  }
  .sub-topimg .topimg-txt .number {
    font-size: 4rem;
  }
  .sub-topimg .topimg-txt .top-txt {
    font-size: 2.6rem;
    line-height: 1.5;
  }
}


/* sub-toptxt */
.sub-toptxt {
  display: block;
  margin-bottom: 8rem;
}
.sub-toptxt .ttl {
  margin-bottom: 2rem;
  font-size: 3.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.sub-toptxt p {
  font-size: 1.8rem;
}

@media (max-width: 768px) {
  .sub-toptxt {
    margin-bottom: 4rem;
  }
  .sub-toptxt .ttl {
    margin-bottom: 1rem;
    font-size: 2rem;
    line-height: 1.7;
  }
  .sub-toptxt p {
    font-size: 1.6rem;
  }
}


/* content-list */
.content-list {
  padding: 4rem;
  background: #F5F5F5;
  margin-bottom: 10rem;
}
.content-list .ttl {
  margin-bottom: 1.2rem;
  font-size: 4.2rem;
  color: #1B5FDE;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.content-list .list {
  display: flex;
  flex-wrap: wrap;
}
.content-list .list li {
  margin-bottom: 1rem;
  list-style: none;
  width: 23%;
  margin-right: 2.6%;
  position: relative;
}
.content-list .list li:nth-child(4n) {
  margin-right: 0;
}
.content-list .list li a {
  display: flex;
  align-items: center;
  padding: 0.8rem 4rem 0.8rem 2rem;
  color: #fff;
  background: #1B5FDE;
  border: 1px solid #1B5FDE;
  height: 100%;
  line-height: 1.6;
}
.content-list .list li a:hover {
  color: #1B5FDE;
  background: #fff;
}
.content-list .list li svg {
  width: 1.6rem;
  position: absolute;
  top: 50%;
  right: 2.2rem;
  transform: translateY(-50%) rotate(90deg);
}
.content-list .list li svg path {
  stroke: #fff;
}
.content-list .list li a:hover svg path{
  stroke: #1B5FDE;
}

@media (max-width: 768px) {
  .content-list {
    padding: 2rem;
    margin-bottom: 5rem;
  }
  .content-list .ttl {
    margin-bottom: 1rem;
    font-size: 2.4rem;
  }
  .content-list .list {
    justify-content: space-between;
  }
  .content-list .list li {
    width: 48%;
    margin-right: 0;
  }
  .content-list .list li a {
    padding: 1.1rem 3rem 1.1rem 1rem;
  }
  .content-list .list li svg {
    width: 1.5rem;
    right: 1.5rem;
  }
}


/* pickup */
.pickup {
  position: relative;
}
.pickup .right-img {
  margin: 10rem 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 3%;
  position: relative;
}
.pickup .right-img::before {
  content: "";
  display: block;
  width: 100%;
  height: 18vw;
  background: url(../westoita/img/line_01.svg) center top no-repeat;
  background-size: 101% auto;
  position: absolute;
  left: 0;
  top: -10rem;
  z-index: -1;
}
.pickup .right-img .img,
.pickup .left-img .img  {
  width: 55%;
}
.pickup .right-img .txt,
.pickup .left-img .txt {
  width: 32%;
}
.pickup .right-img .txt .ttl,
.pickup .left-img .txt .ttl {
  margin-bottom: 2rem;
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.pickup .right-img .txt p,
.pickup .left-img .txt p {
  font-size: 1.6rem;
}
.pickup .left-img {
  margin: 10rem 0;
  display: flex;
  align-items: flex-end;
  gap: 3%;
  position: relative;
}
.pickup .left-img::before {
  content: "";
  display: block;
  width: 100%;
  height: 18vw;
  background: url(../westoita/img/line_02.svg) center top no-repeat;
  background-size: 101% auto;
  position: absolute;
  left: 0;
  top: -10rem;
  z-index: -1;
}


@media (max-width: 768px) {
  .pickup .right-img,
  .pickup .left-img {
    display: block;
    margin: 4rem 0;
  }
  .pickup .right-img::before,
  .pickup .left-img::before {
    top: 23rem;
  }
  .pickup .right-img .img {
    width: auto;
    margin: 0 0 1.5rem 2.4rem;
  }
  .pickup .left-img .img {
    width: auto;
    margin: 0 2.4rem 1.5rem 0;
  }
  .pickup .right-img .txt,
  .pickup .left-img .txt {
    width: 100%;
    padding: 0 2.4rem;
  }
  .pickup .right-img .txt .ttl,
  .pickup .left-img .txt .ttl {
    margin-bottom: 0.5rem;
    font-size: 2.2rem;
    line-height: 1.7;
  }
  .pickup .right-img .txt p,
  .pickup .left-img .txt p {
    font-size: 1.4rem;
  }
}


/* spot */
.spot {
  padding: 12rem 0;
  background: #F5F5F5;
  position: relative;
}
.spot::before {
  content:"SPOT";
  position: absolute;
  top: -8.4rem;
  right: 0;
  color: #D3E2FF;
  font-size: 13rem;
  font-weight: 400;
}
.spot-box {
  max-width: 127rem;
  padding: 0 min(4.16%, 8rem);
  margin: 0 auto;
}

@media (max-width: 768px) {
  .spot {
    padding: 6rem 0;
  }
  .spot::before {
    top: -3.3rem;
    font-size: 5rem;
  }
}

.spot-box .spot-ttl {
  margin-bottom: 5rem;
  text-align: center;
}
.spot-box .spot-ttl .top-ttl {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.8rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #1B5FDE;
  background: #fff;
  border: 1px #1B5FDE solid;
}
.spot-box .spot-ttl .ttl {
  margin-bottom: 3.8rem;
  font-size: 3rem;
  font-weight: bold;
  position: relative;
}
.spot-box .spot-ttl .ttl::before {
  content:"";
  position: absolute;
  left: 50%;
  bottom: -3rem;
  background: #000000;
  width: 1px;
  height: 3rem;
}
.spot-box .spot-ttl .top-txt {
  font-size: 1.6rem;
}

@media (max-width: 768px) {
  .spot-box .spot-ttl {
    margin-bottom: 3rem;
  }
  .spot-box .spot-ttl .ttl {
    margin-bottom: 3rem;
    font-size: 2rem;
  }
  .spot-box .spot-ttl .top-ttl {
    font-size: 1.2rem;
  }
  .spot-box .spot-ttl .ttl::before {
    bottom: -2.3rem;
    height: 2rem;
  }
  .spot-box .spot-ttl .top-txt {
    font-size: 1.4rem;
  }
}

.col3-sp2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2.8%;
  row-gap: 7rem;
}
.col3-sp2 li p {
  margin-top: 0.5rem;
  font-size: 1.6rem;
}
.col3-sp2.post-li li a.btn-1 {
  display: flex;
}
.col3-sp2 .btn-1 {
  background: #fff;
}
.col3-sp2 .btn-1:hover {
  background: #1B5FDE;
}
.btn-1 {
  max-width: 34rem;
  height: auto;
}

@media (max-width: 768px) {
  .col3-sp2{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    row-gap: 3rem;
  }
  .col3-sp2 li .ttl {
    font-size: 1.6rem;
  }
  .col3-sp2 .ttl.arrow-ttl{
    padding: 1rem 4rem 1rem 0;
  }
  .col3-sp2 .cat-wrap .cat {
    font-size: 1rem;
    line-height: 2.2;
    border-radius: 1.2em;
    padding: 0 0.8em;
  }
  .col3-sp2 .cat-wrap{
    gap: 0.4rem;
  }
  .col3-sp2 li p {
    font-size: 1.4rem;
  }  
  .col3-sp2 .btn-1 {
    margin-top: 2rem;
    padding: 0.8rem 3rem 0.8rem 1rem;
  }
  .col3-sp2 .btn-1 svg {
    right: 1.5rem;
  }
}


/* spot-wh */
.spot-wh {
  padding: 12rem 0;
  position: relative;
}
.spot-wh::before {
  content:"SPOT";
  position: absolute;
  top: -8.4rem;
  left: 0;
  color: #D3E2FF;
  font-size: 13rem;
  font-weight: 400;
}
.spot-wh .col3-sp2 {
  position: relative;
}
.spot-wh .col3-sp2 .decoration {
  position: absolute;
  right: 10rem;
  bottom: 3rem;
  width: 28%;
}

@media (max-width: 768px) {
  .spot-wh {
    padding: 6rem 0 22rem 0;
  }
  .spot-wh::before {
    top: -3.3rem;
    font-size: 5rem;
  }
  .spot-wh .col3-sp2 .decoration {
    right: 23%;
    bottom: -20rem;
    width: 50%;
  }
}


/* gourmet */
.gourmet {
  padding: 12rem 0;
  position: relative;
}
.gourmet::before {
  content:"GOURMET";
  position: absolute;
  top: -8.4rem;
  left: 0;
  color: #D3E2FF;
  font-size: 13rem;
  font-weight: 400;
}
.gourmet .col3-sp2 {
  position: relative;
}
.gourmet .col3-sp2 .decoration {
  position: absolute;
  right: -4rem;
  bottom: 3rem;
  width: 28%;
}

@media (max-width: 768px) {
  .gourmet {
    padding: 6rem 0 7rem 0;
  }
  .gourmet::before {
    top: -3.3rem;
    font-size: 5rem;
  }
  .gourmet .col3-sp2 .decoration {
    left: 0;
    bottom: -8.5rem;
    width: 50%;
    z-index: 1;
  }
}


/* photo */
.photo {
  padding: 12rem 0;
  background: #F5F5F5;
  position: relative;
}
.photo::before {
  content:"PHOTO";
  position: absolute;
  top: -8.4rem;
  right: 0;
  color: #D3E2FF;
  font-size: 13rem;
  font-weight: 400;
}

@media (max-width: 768px) {
  .photo {
    padding: 6rem 0;
  }
  .photo::before {
    top: -3.3rem;
    font-size: 5rem;
  }
}


/* history */
.history {
  padding: 12rem 0;
  background: #F5F5F5;
  position: relative;
}
.history::before {
  content:"HISTORY";
  position: absolute;
  top: -8.4rem;
  right: 0;
  color: #D3E2FF;
  font-size: 13rem;
  font-weight: 400;
}

@media (max-width: 768px) {
  .history {
    padding: 6rem 0;
  }
  .history::before {
    top: -3.3rem;
    font-size: 5rem;
  }
}


/* featuredspot */
.featuredspot {
  max-width: 143rem;
  padding: 0 min(4.16%, 8rem);
  margin: 10rem auto 12rem auto;
}
.featuredspot .top-ttl {
  margin-bottom: 5rem;
  font-size: 7.3rem;
  font-weight: 400;
  color: #1B5FDE;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.featuredspot .top-ttl span {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.featuredspot .map {
  display: block;
}
.featuredspot .map iframe {
  width: 100%;
  height: 550px;
}

@media (max-width: 768px) {
  .featuredspot {
    margin: 5rem 0;
    padding: 0 2.4rem;
  }
  .featuredspot .top-ttl {
    margin-bottom: 3rem;
    font-size: 3rem;
    line-height: 1.2;
  }
  .featuredspot .top-ttl span {
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0.7em 0 0;
  }
  .featuredspot .map iframe {
    height: 350px;
  }
}


/* ticket */
.ticket {
  max-width: 127rem;
  padding: 0 min(4.16%, 8rem);
  margin: 0 auto 11rem auto;
  position: relative;
}
.ticket .ticket-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #EAF1FF;
  padding: 4rem 5rem;
}
.ticket .ticket-col .ttl {
  font-size: 2.6rem;
  font-weight: bold;
  width: 35%;
}
.ticket .ticket-col p {
  font-size: 1.6rem;
  width: 60%;
}
.ticket .icon {
  position: absolute;
  right: -4rem;
  bottom: -12rem;
  max-width: 300px;
  z-index: 1;
}

@media (max-width: 768px) {
  .ticket {
    width: 100%;
    margin: 0 auto 7rem auto;
    padding: 0 2.4rem;
  }
  .ticket .ticket-col {
    display: block;
    padding: 2rem 3rem;
  }
  .ticket .ticket-col .ttl {
    font-size: 2rem;
    width: 100%;
    margin-bottom: 1rem;
  }
  .ticket .ticket-col p {
    font-size: 1.4rem;
    width: 100%;
  }
  .ticket .icon {
    right: 1rem;
    bottom: -9rem;
    width: 50%;
  }
}

/* check */
.check {
  padding: 12rem 0;
  background: #F5F5F5;
  position: relative;
}
.check::before {
  content:"CHECK";
  position: absolute;
  top: -8.4rem;
  right: 0;
  color: #D3E2FF;
  font-size: 13rem;
  font-weight: 400;
}
.check .col3-sp2 {
  position: relative;
}
.check .col3-sp2 .decoration {
  position: absolute;
  right: 0;
  bottom: 8rem;
  width: 43%;
}

@media (max-width: 768px) {
  .check {
    padding: 6rem 0 20rem 0;
  }
  .check::before {
    top: -3.3rem;
    font-size: 5rem;
  }
  .check .col3-sp2 .decoration {
    right: 0;
    bottom: -16rem;
    width: 100%;
  }
}


/* recommend */
.recommend {
  padding: 12rem 0;
  background: #F5F5F5;
  position: relative;
}
.recommend::before {
  content:"RECOMMEND";
  position: absolute;
  top: -8.4rem;
  right: 0;
  color: #D3E2FF;
  font-size: 13rem;
  font-weight: 400;
}
.recommend .col3-sp2 {
  position: relative;
}
.recommend .col3-sp2 .decoration {
  position: absolute;
  right: 0;
  bottom: 4rem;
  width: 28%;
  z-index: 1;
}
.recommend .decoration-tanourara {
  position: absolute;
  left: -4rem;
  bottom: -6.5rem;
  width: 37%;
  z-index: 1;
}

@media (max-width: 768px) {
  .recommend {
    padding: 6rem 0;
  }
  .recommend::before {
    top: -3.3rem;
    font-size: 5rem;
  }
  .recommend .col3-sp2 .decoration {
    left: 0;
    bottom: -15rem;
    width: 50%;
  }
  .recommend .decoration-tanourara {
    left: 5%;
    bottom: -5.5rem;
    width: 90%;
  }
  #recommend_02 {
    margin-bottom: 6rem;
  }
  #recommend_03 {
    margin-bottom: 9rem;
  }
}


/* cycleshare */
.cycleshare {
  max-width: 127rem;
  padding: 0 min(4.16%, 8rem);
  margin: 10rem auto;
  position: relative;
}
.cycleshare .cycleshare-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #EAF1FF;
  padding: 4rem 5rem;
}
.cycleshare .cycleshare-box .img-col {
  width: 40%;
}
.cycleshare .cycleshare-box .txt-col {
  width: 55%;
}
.cycleshare .cycleshare-box .txt-col .ttl {
  margin-bottom: 0.5rem;
  font-size: 2.6rem;
  font-weight: bold;
}
.cycleshare .cycleshare-box .txt-col p {
  font-size: 1.6rem;
}
.cycleshare .btn-1 {
  background: #fff;
  max-width: 36rem;
}
.cycleshare .btn-1:hover {
  background: #1B5FDE;
}
.cycleshare .icon {
  position: absolute;
  right: -5rem;
  bottom: -20rem;
  max-width: 180px;
}

@media (max-width: 768px) {
  .cycleshare {
    margin: 6rem auto;
  }
  .cycleshare .cycleshare-box {
    display: block;
    padding: 3rem;
  }
  .cycleshare .cycleshare-box .img-col {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .cycleshare .cycleshare-box .txt-col {
    width: 100%;
  }
  .cycleshare .cycleshare-box .txt-col .ttl {
    line-height: 1.7;
  }
  .cycleshare .btn-1 {
    margin-top: 2rem;
    padding: 0.8rem 3rem 0.8rem 1rem;
  }
  .cycleshare .icon {
    right: 0;
    top: -4rem;
    max-width: 33%;
  }
}