@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

.nosp{
  display: none
}
main *{
  box-sizing: border-box;
  font-family: 'Zen Maru Gothic', sans-serif;
}

.title-box{
  width: 100%;
  height: calc(438vw / (750/ 100));
  background: url("../img/bg_mvsp.jpg") no-repeat center top / contain;
  position: relative
}
.main-title{
  display: inline-block;
}
.main-title img{
  width: calc(500vw / (750 / 100));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.navbox{
  background: #f05352;
}
.nav-list{
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.nav-list>li{
  width: 50%;
}
.nav-list>li:first-child{
  width: 100%;
}
.nav-list>li:nth-child(-n+3){
  border-bottom: calc(2vw / (750 / 100)) solid #FFF;
}
.nav-list>li:nth-child(even){
  border-right: calc(2vw / (750 / 100)) solid #FFF;
}
.nav-list>li>a{
  display: block;
  text-align: center;
  padding: calc(16vw / (750 / 100)) calc(10vw / (750 / 100)) calc(36vw / (750 / 100));
  font-size: calc(26vw / (750 / 100));
  font-weight: 700;
  color: #FFF;
  position: relative;
  transition: 0.3s;
}
.nav-list>li>a::after{
  content: "";
  background: url("../img/nav_arrow_wt.png") no-repeat center center / contain;
  width: calc(23vw / (750 / 100));
  height: calc(14vw / (750 / 100));
  position: absolute;
  right: 0;
  bottom: calc(16vw / (750 / 100));
  left: 0;
  margin: auto;
}
.nav-list>li>a:hover{
  background: #FFF;
  color: #f05352;
}
.nav-list>li>a:hover::after{
  background: url("../img/nav_arrow.png") no-repeat center center / contain;
}

.content-box{
  width: 100%;
  padding: calc(30vw / (750 / 100)) 0;
  position: relative
}
.inner{
  margin: auto
}
@keyframes jump {
  50% {
    transform: scale(1.02) translateY(-20px);
  }
}
.jump-trigger.act{
  animation: jump .2s linear;
}
.head-title{
  padding: calc(20vw / (750 / 100));
  margin-bottom: calc(30vw / (750 / 100));
  text-align: center;
}
.head-title#tour{
  background: #ffd4d6;
}
.head-title#things,
.head-title#point{
  background: #fcf3cc;
}
.head-title#spot,
.head-title#faq{
  background: #e1f7de;
}
.head-title>span{
  width: 100%;
  display: inline-block;
  font-size: calc(52vw / (750 / 100));
  font-weight: 900;
  color: #f28900;
  padding: 0 calc(90vw / (750 / 100));
  position: relative
}
.head-title#spot>span,
.head-title#faq>span{
  color: #5ba77c;
}
.head-title#point>span,
.head-title#spot>span{
  letter-spacing: -0.08em
}
.head-title .head-title__sub{
  display: block;
  font-size: calc(30vw / (750 / 100));
  font-weight: 900;
  color: #24446a;
  letter-spacing: normal
}
.head-title>span::before,
.head-title>span::after{
  content: "";
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  height: calc(87vw / (750 / 100));
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto
}
.head-title#tour>span::before{
  background-image: url("../img/ico_tour_lft.png");
  width: calc(84vw / (750 / 100));
  left: 0;
}
.head-title#tour>span::after{
  background-image: url("../img/ico_tour_ryt.png");
  width: calc(68vw / (750 / 100));
  right: 0;
}
.head-title#things>span::before{
  background-image: url("../img/ico_select_lft.png");
  width: calc(84vw / (750 / 100));
  left: 0;
}
.head-title#things>span::after{
  background-image: url("../img/ico_select_ryt.png");
  width: calc(84vw / (750 / 100));
  right: 0;
}
.head-title#point>span::before{
  background-image: url("../img/ico_point_lft.png");
  width: calc(90vw / (750 / 100));
  left: 0;
}
.head-title#point>span::after{
  background-image: url("../img/ico_point_ryt.png");
  width: calc(84vw / (750 / 100));
  right: 0;
}
.head-title#spot>span::before{
  background-image: url("../img/ico_spot_lft.png");
  width: calc(90vw / (750 / 100));
  left: 0;
}
.head-title#spot>span::after{
  background-image: url("../img/ico_spot_ryt.png");
  width: calc(84vw / (750 / 100));
  right: 0;
}
.head-title#faq>span::before{
  background-image: url("../img/ico_faq_lft.png");
  width: calc(90vw / (750 / 100));
  left: 0;
}
.head-title#faq>span::after{
  background-image: url("../img/ico_faq_ryt.png");
  width: calc(84vw / (750 / 100));
  right: 0;
}

.sub-title__tour{
  font-size: calc(46vw / (750 / 100));
  font-weight: 900;
  color: #f05352;
  text-align: center;
  margin-bottom: calc(20vw / (750 / 100));
}
.sub-title__tour>span{
  font-size: calc(26vw / (750 / 100));
  color: #24446a;
  display: inline-block;
  margin-right: calc(10vw / (750 / 100));
}
.tour-card{
  width: 90vw;
  margin: auto;
}
.tour-card *{
  font-family: "メイリオ", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif
}
.tour-card>li{
  flex: 0 0 80%;
  border: calc(10vw / (750 / 100)) solid #ff9499;
  border-radius: calc(20vw / (750 / 100));
  transition: 0.3s
}
.tour-card>li:hover{
  background: #ffd4d6;
}
.tour-card>li::after{
  content: none
}
.card-photo.card-photo__type4{
  height: calc(380vw / (750 / 100));
}
.card-photo.card-photo__type4 img{
  border-radius: calc(10vw / (750 / 100));
  object-fit: cover;
  object-position: center;
  position: static;
  width: 100%;
  height: calc(380vw / (750 / 100));
  top: 0;
  left: 0;
  transform: translate(0, 0)
}
.port{
  background: #77c6f0;
  padding: calc(10vw / (750 / 100));
}
.tour-card.tour-card__type4>li .card-item{
  padding-bottom: calc(64vw / (750 / 100));
}
.tour-card.tour-card__type4>li .card-item .card-title{
  color: #333;
}
.baby-trip__icon{
  display: flex;
  align-items: flex-start;
  margin-top: auto;
  position: absolute;
  bottom: 0;
}
.baby-trip__icon>li{
  width: calc(110vw / (750 / 100));
  display: none;
}
.baby-trip__icon>li.true{
  display: block
}
.baby-trip__icon>li+li{
  margin-left: calc(6vw / (750 / 100));
}
.baby-trip__icon>li:not(.true)+li{
  margin-left: 0
}
.baby-trip__icon>li::before{
  content: "";
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(107vw / (750 / 100));
  height: calc(51vw / (750 / 100));
  display: inline-block;
}
.baby-trip__icon>li.icon-welcome::before{
  background-image: url("../img/ico_welcome.png")
}
.baby-trip__icon>li.icon-goods::before{
  background-image: url("../img/ico_goods.png")
}
.baby-trip__icon>li.icon-bath::before{
  background-image: url("../img/ico_bath.png")
}

.more-link{
  width: 94vw;
  margin: calc(30vw / (750 / 100)) auto;
}
.more-link+.sub-title__tour{
  margin-top: calc(80vw / (750 / 100));
}
.more-link>a{
  display: block;
  text-align: center;
  font-size: calc(30vw / (750 / 100));
  font-weight: 700;
  color: #f05352;
  line-height: calc(80vw / (750 / 100));
  position: relative;
  border: calc(4vw / (750 / 100)) solid;
  border-radius: calc(60vw / (750 / 100));
  transition: 0.3s
}
.more-link>a::after{
  content: "";
  background: url("../img/btn_arrow.png") no-repeat center center / contain;
  width: calc(32vw / (750 / 100));
  height: calc(20vw / (750 / 100));
  position: absolute;
  top: 0;
  right: 3%;
  bottom: 0;
  margin: auto;
}
.more-link>a:hover{
  background: #f05352;
  color: #FFF;
}
.more-link>a:hover::after{
  background: url("../img/btn_arrow_wt.png") no-repeat center center / contain;
}
.icon-assort{
  width: 94vw;
  margin: auto;
  background: #ffd4d6;
  padding: calc(20vw / (750 / 100));
  border-radius: calc(20vw / (750 / 100));
}
.icon-list dt{
  font-size: calc(36vw / (750 / 100));
  font-weight: 700;
  color: #24446a;
  margin-bottom: calc(20vw / (750 / 100));
}
.icon-list dd{
  font-size: calc(24vw / (750 / 100));
  font-weight: 400;
  color: #24446a;
  padding-left: calc(120vw / (750 / 100));
  position: relative;
  margin-bottom: calc(40vw / (750 / 100));
}
.icon-list dd:last-child{
  margin-bottom: calc(20vw / (750 / 100));
}
.icon-list dd::before{
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(107vw / (750 / 100));
  height: calc(51vw / (750 / 100));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto
}
.icon-list .icon1::before{
  background-image: url("../img/ico_welcome.png");
}
.icon-list .icon2::before{
  background-image: url("../img/ico_goods.png");
}
.icon-list .icon3::before{
  background-image: url("../img/ico_bath.png");
}
.read-copy{
  width: 94vw;
  font-size: calc(30vw / (750 / 100));
  font-weight: 700;
  color: #4c4c4c;
  margin: 0 auto calc(40vw / (750 / 100));
}
.things-list{
  width: 94vw;
  margin: auto
}
.things-list>li{
  position: relative;
  padding-left: calc(200vw / (750 / 100));
  margin-bottom: calc(40vw / (750 / 100));
}
.things-list>li::before{
  content: "";
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(200vw / (750 / 100));
  height: calc(200vw / (750 / 100));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto
}
.things-list>li[data-type="things1"]::before{
  background-image: url("../img/ill_select01.png")
}
.things-list>li[data-type="things2"]::before{
  background-image: url("../img/ill_select02.png")
}
.things-list>li[data-type="things3"]::before{
  background-image: url("../img/ill_select03.png")
}
.things-list>li[data-type="things4"]::before{
  background-image: url("../img/ill_select04.png")
}
.things-list>li[data-type="things5"]::before{
  background-image: url("../img/ill_select05.png")
}
.things-list>li[data-type="things6"]::before{
  background-image: url("../img/ill_select06.png")
}
.things-list>li[data-type="things7"]::before{
  background-image: url("../img/ill_select07.png")
}
.things-list>li[data-type="things8"]::before{
  background-image: url("../img/ill_select08.png")
}
.things-list>li[data-type="things9"]::before{
  background-image: url("../img/ill_select09.png")
}
.things-list>li[data-type="things10"]::before{
  background-image: url("../img/ill_select10.png")
}
.things-inbox{
  border-bottom: calc(6vw / (750 / 100)) dashed #b6e4fc;
  padding-bottom: calc(20vw / (750 / 100));
  text-align: center;
}
.things-title{
  display: inline-block;
  font-size: calc(32vw / (750 / 100));
  font-weight: 700;
  color: #f28900;
  margin-bottom: calc(20vw / (750 / 100));;
  padding-left: calc(60vw / (750 / 100));;
  position: relative
}
.things-title::before{
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(50vw / (750 / 100));
  height: calc(50vw / (750 / 100));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto
}
.things-list>li[data-type="things1"] .things-title::before{
  background-image: url("../img/num_01.png");
}
.things-list>li[data-type="things2"] .things-title::before{
  background-image: url("../img/num_02.png");
}
.things-list>li[data-type="things3"] .things-title::before{
  background-image: url("../img/num_03.png");
}
.things-list>li[data-type="things4"] .things-title::before{
  background-image: url("../img/num_04.png");
}
.things-list>li[data-type="things5"] .things-title::before{
  background-image: url("../img/num_05.png");
}
.things-list>li[data-type="things6"] .things-title::before{
  background-image: url("../img/num_06.png");
}
.things-list>li[data-type="things7"] .things-title::before{
  background-image: url("../img/num_07.png");
}
.things-list>li[data-type="things8"] .things-title::before{
  background-image: url("../img/num_08.png");
}
.things-list>li[data-type="things9"] .things-title::before{
  background-image: url("../img/num_09.png");
}
.things-list>li[data-type="things10"] .things-title::before{
  background-image: url("../img/num_10.png");
}
.things-txt{
  text-align: left
}

.point-list{
  width: 94vw;
  margin: auto;
  display: flex;
  align-items: flex-start;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.point-list>li{
  flex: 0 0 85%;
  margin-right: calc(20vw / (750 / 100));
}
.point-list>li:nth-child(even){
}
.point-copy{
  background: url("../img/ballon_point.png") no-repeat center top / contain;
  padding:  calc(80vw / (750 / 100))  calc(80vw / (750 / 100)) calc(60vw / (750 / 100));
  font-size:  calc(36vw / (750 / 100));
  font-weight: 700;
  text-align: center;
  color: #f05352;
}
.point-txt>span{
  font-size: calc(26vw / (750 / 100));
  font-weight: 700;
  border-bottom: calc(6vw / (750 / 100)) dashed #b6e4fc;
  line-height: 1.8
}
.point-txt{
  padding-top: calc(480vw / (750 / 100));
  position: relative;
}
.point-txt::before{
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(428vw / (750 / 100));
  height: calc(472vw / (750 / 100));
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto
}
.point-list>li[data-type="point1"] .point-txt::before{
  background-image: url("../img/ill_withAbaby.png")
}
.point-list>li[data-type="point2"] .point-txt::before{
  background-image: url("../img/ill_haihai.png")
}
.point-list>li[data-type="point3"] .point-txt::before{
  background-image: url("../img/illl_cry.png")
}
.point-list>li[data-type="point4"] .point-txt::before{
  background-image: url("../img/ill_diaper.png")
}
.point-list>li[data-type="point5"] .point-txt::before{
  background-image: url("../img/ill_family.png")
}

.sub-title__spot{
  text-align: center;
  margin-bottom: calc(20vw / (750 / 100));
}
.sub-title__spot>span{
  font-size: calc(48vw / (750 / 100));;
  font-weight: 700;
  color: #5ba77c;
  display: inline-block;
  position: relative;
  padding: 0 calc(80vw / (750 / 100));;
}
.sub-title__spot>span::before,
.sub-title__spot>span::after{
  content: "";
  position: absolute;
  top: 50%;
  width: calc(60vw / (750 / 100));;
  height: calc(12vw / (750 / 100));;
  background-color: #fde67c;
  border-radius: calc(60vw / (750 / 100));;
}
.sub-title__spot>span::before{
  left: 0
}
.sub-title__spot>span::after{
  right: 0
}
.spot-list{
  width: 94vw;
  margin: auto;
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
.spot-list>li{
  flex: 0 0 85%;
  margin-right: 3%;
}
.spot-img{
  margin-bottom: calc(20vw / (750 / 100));
}
.spot-img img{
  border-radius: calc(20vw / (750 / 100));
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: calc(400vw / (750 / 100));
}
.spot-name{
  font-size: calc(36vw / (750 / 100));
  font-weight: 700;
  color: #f28900;
  text-align: center;
  line-height: 1.2;
  margin-bottom: calc(10vw / (750 / 100));
}
.spot-name>small{
  display: block;
  font-size: calc(22vw / (750 / 100));
}
.spot-list+.sub-title__spot{
  margin-top: calc(50vw / (750 / 100));
}

.q-txt{
  background: #fde67c;
  padding: calc(40vw / (750 / 100)) 0 calc(40vw / (750 / 100)) calc(20vw / (750 / 100));
  text-align: center;
  position: relative;
  border-bottom: calc(6vw / (750 / 100)) solid #FFF
}
.q-txt.on::after{
  content: "";
  width: 0;
  height: 0;
  border: calc(30vw / (750 / 100)) solid transparent;
  border-top: calc(30vw / (750 / 100)) solid #fde67c;
  position: absolute;
  bottom: calc(-60vw / (750 / 100));
  right: 0;
  left: 0;
  margin: auto;
}
.q-txt>span{
  width: 100%;
  display: inline-block;
  font-size: calc(30vw / (750 / 100));
  font-weight: 700;
  color: #24446a;
  position: relative;
  padding-right: calc(30vw / (750 / 100))
}
.q-txt>span::before{
  content: "Q.";
  color: #5ba77c;
  display: inline-block;
  margin-right: 0.5em;
}
.q-txt>span::after{
  content: "";
  background: url("../img/aco_off.png") no-repeat center center / contain;
  width: calc(24vw / (750 / 100));
  height: calc(6vw / (750 / 100));
  position: absolute;
  top: 0;
  right: calc(10vw / (750 / 100));
  bottom: 0;
  margin: auto;
}
.q-txt.on>span::after{
  content: "";
  background: url("../img/aco_on.png") no-repeat center center / contain;
  width: calc(22vw / (750 / 100));
  height: calc(22vw / (750 / 100));
}
.a-txt{
  padding: calc(30vw / (750 / 100));
  display: none
}
.a-txt.open{
  display: block
}
.a-txt::before{
  content: "A.";
  font-size: calc(30vw / (750 / 100));
  font-weight: 700;
  color: #5ba77c;
  display: inline-block;
  margin-right: 1.0em;
}

.img-bnr{
  width: 94vw;
  margin: calc(30vw / (750 / 100)) auto 0;
  display: flex;
  flex-wrap: wrap;
}
.img-bnr>li{
  width: calc(98% / 2);
  margin-right: 2%;
  margin-bottom: 2%;
}
.img-bnr>li:nth-child(even){
  margin-right: 0;
}
.img-bnr>li>a{
  display: block
}
.img-bnr>li>a:hover{
  opacity: 0.8
}