@charset "utf-8";
/*タイトル*/
.title--baseParts .rubyUpper,
.subTitle--baseParts .rubyUpper{
  display: none;
}
.title--baseParts .title,
.title--baseParts .rubyLower,
.subTitle--baseParts .title,
.subTitle--baseParts .rubyLower{
  font-weight: bold;
}
.titleCenter,
.subTitleCenter{
  text-align: center;
}
.titleCenter__title{
  line-height: 1.5;
}
/*ボタン*/
.btn--baseParts{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 10;
}
body .swiper-button-next,
body .swiper-button-prev{
  width: 50px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
body .swiper-button-prev::after{
  font-family: 'web-tech' !important;
  content: "\e915";
  margin-right: 3px;
}
body .swiper-button-next::after{
  font-family: 'web-tech' !important;
  content: "\e916";
}
body .swiper-button-next.swiper-button-disabled,
body .swiper-button-prev.swiper-button-disabled{
  opacity: 0;
}
.triggerLink{
  position: relative;
}
.targetImgWrap{
  position: relative;
  overflow: hidden;
}
.targetImg{
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}
div.targetImg{
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 1024px){
  .btn--baseParts{
    transition: all .6s var(--ease);
  }
  .triggerLink{
    cursor: pointer;
  }
  .triggerLink:hover .btn--baseParts,
  .btn--baseParts:hover {
    opacity: .5;
  }
  .triggerLink .targetImg{
    transform: scale(1);
    transition: transform var(--animation__time) var(--ease);
  }
  .triggerLink:hover .targetImg{
    transform: scale(1.1);
  }
}
.bnr{
  position: relative;
  display: block;
  overflow: hidden;
}
.bnr::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--color--black);
  opacity: .2;
  z-index: 10;
}
.bnr .bnrCts{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 10;
}
.parallaxScroll.targetImg{
  width: 100%;
  height: calc(100% + 100px); /*jsの値と同じ*/
}
@media screen and (min-width: 1024px){
  .parallaxScroll.targetImg{
    height: calc(100% + 150px); /*jsの値と同じ*/
  }
}

/*タイトルアニメーション*/
.animation.title--baseParts .title,
.animation.title--baseParts .rubyLower{
  position: relative;
  overflow: hidden;
}
.animation.title--baseParts .title > span,
.animation.title--baseParts .rubyLower > span{
  transform: translateY(100%);
  display: block;
}
.animation.on.title--baseParts .title > span,
.animation.on.title--baseParts .rubyLower > span{
  transform: translateY(0);
  transition-property: transform;
  transition-timing-function:  var(--ease-custom);
  transition-duration: var(--animation__time);
}
.animation.on.title--baseParts .rubyLower > span{
  transition-delay: .3s;
}

/*画像アニメーション*/
.animation.targetImgWrap{
  position: relative;
}
.animation.targetImgWrap::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color--item);
  z-index: 0;
}
.animation.targetImgWrap .targetImgCts{
  position: relative;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
.animation.on.targetImgWrap .targetImgCts{
  opacity: 1;
  transition: opacity var(--animation__time) var(--ease-in) .3s;
}

/*フェードインアニメーション*/
.animation.move,
.start.move,
.animation.move--sp,
.start.move--sp{
  opacity: 0;
}
.animation.on.move,
.start.on.move,
.animation.on.move--sp,
.start.on.move--sp{
  opacity: 1;
  transition: opacity var(--ease-custom);
  transition-duration: var(--animation__time);
}
.animation.activeMove,
.start.activeMove,
.animation.activeMove--sp,
.start.activeMove--sp{
  opacity: 0;
  -webkit-transform: translate3d(0,50px,0);
  transform: translate3d(0,50px,0);
}
.animation.on.activeMove,
.start.on.activeMove,
.animation.on.activeMove--sp,
.start.on.activeMove--sp{
  opacity: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: transform var(--ease-custom),opacity var(--ease-custom);
  transition-duration: var(--animation__time);
}
.animation.slideMove,
.start.slideMove,
.animation.slideMove--sp,
.start.slideMove--sp{
  opacity: 0;
  -webkit-transform: translate(-50px,0);
  transform: translate(-50px,0);
}
.animation.on.slideMove,
.start.on.slideMove,
.animation.on.slideMove--sp,
.start.on.slideMove--sp{
  opacity: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: transform var(--ease-out),opacity var(--ease-custom);
  transition-duration: var(--animation__time);
}
@media screen and (min-width: 768px){
  .animation.move--tpc,
  .start.move--tpc{
    opacity: 0;
  }
  .animation.on.move--tpc,
  .start.on.move--tpc{
    opacity: 1;
    transition: opacity var(--ease-custom);
    transition-duration: var(--animation__time);
  }
  .animation.activeMove--tpc,
  .start.activeMove--tpc{
    opacity: 0;
    -webkit-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
  }
  .animation.on.activeMove--tpc,
  .start.on.activeMove--tpc{
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: transform var(--ease-custom),opacity var(--ease-custom);
    transition-duration: var(--animation__time);
  }
  .animation.slideMove--tpc,
  .start.slideMove--tpc{
    opacity: 0;
    -webkit-transform: translate(-50px,0);
    transform: translate(-50px,0);
  }
  .animation.on.slideMove--tpc,
  .start.on.slideMove--tpc{
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: transform var(--ease-out),opacity var(--ease-custom);
    transition-duration: var(--animation__time);
  }
}
@media screen and (min-width: 1024px){
  .animation.move,
  .start.move,
  .animation.move--pc,
  .start.move--pc{
    opacity: 0;
  }
  .animation.on.move,
  .start.on.move,
  .animation.on.move--pc,
  .start.on.move--pc{
    opacity: 1;
    transition: opacity var(--ease-custom);
    transition-duration: var(--animation__time);
  }
  .animation.activeMove,
  .start.activeMove,
  .animation.activeMove--pc,
  .start.activeMove--pc{
    opacity: 0;
    -webkit-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
  }
  .animation.on.activeMove,
  .start.on.activeMove,
  .animation.on.activeMove--pc,
  .start.on.activeMove--pc{
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: transform var(--ease-custom),opacity var(--ease-custom);
    transition-duration: var(--animation__time);
  }
  .animation.slideMove,
  .start.slideMove,
  .animation.slideMove--pc,
  .start.slideMove--pc{
    opacity: 0;
    -webkit-transform: translate(-50px,0);
    transform: translate(-50px,0);
  }
  .animation.on.slideMove,
  .start.on.slideMove,
  .animation.on.slideMove--pc,
  .start.on.slideMove--pc{
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: transform var(--ease-out),opacity var(--ease-custom);
    transition-duration: var(--animation__time);
  }
}
.animation.on.timing1,
.animation.on.timing1--sp,
.start.on.timing1,
.start.on.timing1--sp{
  transition-delay: .1s;
}
.animation.on.timing2,
.animation.on.timing2--sp,
.start.on.timing2,
.start.on.timing2--sp{
  transition-delay: .2s;
}
.animation.on.timing3,
.animation.on.timing3--sp,
.start.on.timing3,
.start.on.timing3--sp{
  transition-delay: .3s;
}
.animation.on.timing4,
.animation.on.timing4--sp,
.start.on.timing4,
.start.on.timing4--sp{
  transition-delay: .4s;
}
.animation.on.timing5,
.animation.on.timing5--sp,
.start.on.timing5,
.start.on.timing5--sp{
  transition-delay: .5s;
}
.animation.on.timing6,
.animation.on.timing6--sp,
.start.on.timing6,
.start.on.timing6--sp{
  transition-delay: .6s;
}
.animation.on.timing7,
.animation.on.timing7--sp,
.start.on.timing7,
.start.on.timing7--sp{
  transition-delay: .7s;
}
.animation.on.timing8,
.animation.on.timing8--sp,
.start.on.timing8,
.start.on.timing8--sp{
  transition-delay: .8s;
}
.animation.on.timing9,
.animation.on.timing9--sp,
.start.on.timing9,
.start.on.timing9--sp{
  transition-delay: .9s;
}
.animation.on.timin10,
.animation.on.timin10--sp,
.start.on.timin10,
.start.on.timin10--sp{
  transition-delay: 1s;
}
@media screen and (min-width: 768px){
  .animation.on.timing1--tpc,
  .start.on.timing1--tpc{
    transition-delay: .1s;
  }
  .animation.on.timing2--tpc,
  .start.on.timing2--tpc{
    transition-delay: .2s;
  }
  .animation.on.timing3--tpc,
  .start.on.timing3--tpc{
    transition-delay: .3s;
  }
  .animation.on.timing4--tpc,
  .start.on.timing4--tpc{
    transition-delay: .4s;
  }
  .animation.on.timing5--tpc,
  .start.on.timing5--tpc{
    transition-delay: .5s;
  }
  .animation.on.timing6--tpc,
  .start.on.timing6--tpc{
    transition-delay: .6s;
  }
  .animation.on.timing7--tpc,
  .start.on.timing7--tpc{
    transition-delay: .7s;
  }
  .animation.on.timing8--tpc,
  .start.on.timing8--tpc{
    transition-delay: .8s;
  }
  .animation.on.timing9--tpc,
  .start.on.timing9--tpc{
    transition-delay: .9s;
  }
  .animation.on.timing10--tpc,
  .start.on.timing10--tpc,{
    transition-delay: 1s;
  }
}
@media screen and (min-width: 1024px){
  .animation.on.timing1,
  .animation.on.timing1--pc,
  .start.on.timing1,
  .start.on.timing1--pc{
    transition-delay: .1s;
  }
  .animation.on.timing2,
  .animation.on.timing2--pc,
  .start.on.timing2,
  .start.on.timing2--pc{
    transition-delay: .2s;
  }
  .animation.on.timing3,
  .animation.on.timing3--pc,
  .start.on.timing3,
  .start.on.timing3--pc{
    transition-delay: .3s;
  }
  .animation.on.timing4,
  .animation.on.timing4--pc,
  .start.on.timing4,
  .start.on.timing4--pc{
    transition-delay: .4s;
  }
  .animation.on.timing5,
  .animation.on.timing5--pc,
  .start.on.timing5,
  .start.on.timing5--pc{
    transition-delay: .5s;
  }
  .animation.on.timing6,
  .animation.on.timing6--pc,
  .start.on.timing6,
  .start.on.timing6--pc{
    transition-delay: .6s;
  }
  .animation.on.timing7,
  .animation.on.timing7--pc,
  .start.on.timing7,
  .start.on.timing7--pc{
    transition-delay: .7s;
  }
  .animation.on.timing8,
  .animation.on.timing8--pc,
  .start.on.timing8,
  .start.on.timing8--pc{
    transition-delay: .8s;
  }
  .animation.on.timing9,
  .animation.on.timing9--pc,
  .start.on.timing9,
  .start.on.timing9--pc{
    transition-delay: .9s;
  }
  .animation.on.timin10,
  .animation.on.timin10--pc,
  .start.on.timin10,
  .start.on.timin10--pc{
    transition-delay: 1s;
  }
}
.scrollSign{
  position: relative;
  overflow-x: scroll;
}
@media screen and (max-width: 767px){
  .scrollSign{
    scrollbar-width: none;
  }
  .scrollSign::-webkit-scrollbar{
    display: none;
  }
}
.scrollSign .scrollSign__wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  visibility: hidden;
  opacity: 0;
  transition: visibility var(--animation__time) var(--ease-in),opacity var(--animation__time) var(--ease-in);
  z-index: 10;
}
.scrollSign.active .scrollSign__wrap{
  visibility: visible;
  opacity: 1;
}
.scrollSign .scrollSign__inner{
  position: relative;
}
.scrollSign .scrollSign__inner::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--color--black);
  opacity: .5;
}
.scrollSign .scrollSign__icon{
  overflow: hidden;
}
.scrollSign .scrollSign__icon div{
  display: inline-block;
  -webkit-animation: scrollSignIcon var(--animation__time) var(--ease) infinite;
  animation: scrollSignIcon var(--animation__time) var(--ease) infinite;
}
@-webkit-keyframes scrollSignIcon {
  0% {
    margin-left: 100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  70%{
    opacity: 0;
  }
  100% {
    margin-left: -30px;
  }
}
@keyframes scrollSignIcon {
  0% {
    margin-left: 100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  70%{
    opacity: 0;
  }
  100% {
    margin-left: -30px;
  }
}
.scrollSign .scrollSign__icon,
.scrollSign .scrollSign__cts{
  position: relative;
  z-index: 10;
}
.scrollSign .scrollSign__icon svg{
  width: 28px;
  height: 28px;
}
@media screen and (min-width: 768px){
  .scrollSign .scrollSign__icon svg{
    width: 38px;
    height: 38px;
  }
}
#form table{
  width: 100%;
  table-layout: fixed;
}
#form th{
  text-align: left;
  padding-top: calc(15px * var(--space__value));
  margin-bottom: calc(10px * var(--space__value));
  width: 100%;
  display: block;
  line-height: 1.5;
}
#form td{
  width: 100%;
  /*display: block;*/
  padding-bottom: calc(15px * var(--space__value));
}
#form input,
#form select{
  width: 100%;
  border: solid 1px var(--color--gray);
  font-size: 16px;
  line-height: 1.5;
  padding: calc(10px * var(--space__value)) calc(15px * var(--space__value));
}
#form .formBtn__submit{
  width: 60%;
}
#form .formBtn__reset{
  width: 35%;
}
#form .radio__item{
  position: relative;
}
#form .radio__item .radio__input{
  opacity: 0;
  position: absolute;
  top: 40%;
  left: 0;
}
#form .radio__item .radio__label{
  display: block;
  background-color: var(--color--bg);
  border-radius: 5px;
}
#form .radio__item .radio__input:checked + .radio__label {
  background-color: var(--color--base);
  color: var(--color--white);
}
#form .address__number,
#form .address{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#form .address__number input{
  width: 20%;
}
#form textarea{
  width: 100%;
  border: solid 1px var(--color--gray);
  font-size: 16px;
  line-height: 1.5;
}
#form .formBtn{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: calc(10px * var(--space__value));
}
#form .formBtn__reset input{
  border: none;
  padding: calc(20px * var(--space__value)) calc(15px * var(--space__value));
}
#form .formBtn__submit input{
  border: none;
  background-color: var(--color--base);
  color: #fff;
  padding: calc(20px * var(--space__value)) calc(15px * var(--space__value));
}
#form .form__fieldTrip.animation{
  opacity: 0;
  visibility: hidden;
  height: 0;
}
#form .form__fieldTrip.animation.on{
  opacity: 1;
  visibility: visible;
  height: 100%;
  transition: all var(--animation__time) var(--ease-in);
}
@media screen and (min-width: 768px){
  #form .radio__item .radio__input:hover,
  #form .radio__item .radio__label:hover{
    cursor: pointer;
  }
}