/****************
変数設定　色・幅
*****************/
:root {
    --contents-width: 680px; /** コンテンツ幅 **/
}

/****************

*****************/
body {
	line-height:1.25em;
	letter-spacing: 0.1em;
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	-webkit-text-size-adjust: 100%;
	height:100%;
	background-color:#ffffff;
	color:#333333;
}
html{
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media screen and (max-width:480px){
	html{
		font-size: 2.25vw;
	}
}

/*************
Googleフォント
*************/
.mplus{ font-family: "M PLUS 1p"; }
.roundedmplus { font-family: "M PLUS Rounded 1c"; }
.hannari { font-family: "Hannari"; }
.kokoro { font-family: "Kokoro"; }
.sawarabimincho { font-family: "Sawarabi Mincho"; }
.notosansjp { font-family: "Noto Sans JP"; }


main{
    height: 100dvh;
    max-width: 100%;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
main .swiper{
    width: 100%;
    height: 100dvh;
}
main section{
  max-width: var(--contents-width);
  margin-left: auto;
  margin-right: auto;
}

main section > .contents{
  height: 100dvh;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  object-fit: cover;
  position: relative;
}
main section > .contents img.bg{
  height: 100%;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  object-fit: cover;
}
main section .swiper{
  width: 85%;
  height: auto;
}
main section .swiper img{
  width: 100%;
  height: auto;
}
main section img{
  max-width: 100%;
}
@media screen and (max-width:780px){
  main section img{
    max-width: 100%;
  }
  main section > .contents img.bg{
    min-width: 100%;
  }
}

@media screen and (max-width:540px){
  .swiper,
  .swiper-wrapper,
  .swiper-slide {
    height: 100vh;
  }
  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  main section.swiper-slide > .contents {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  main section.swiper-slide > .contents img.bg {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
}

.swiper .swiper-wrapper > .tooltip{
  display: block;
  width: 8rem;
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999999999;
  box-sizing: border-box;
  padding: 1em;
  border-radius: 5px;
}
.swiper .swiper-wrapper > .tooltip:before{
  content: "";
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 1 / 1;
  width: 6rem;
}
.swiper.horizontal .swiper-wrapper > .tooltip:before{
  background-image: url(../img/icon/scoll_left.gif);
}
.swiper.vertical .swiper-wrapper > .tooltip:before{
  background-image: url(../img/icon/scoll_bottom.gif);
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 50%;
  opacity: 0.6;
  margin: 0 5px;
  transition: all 0.3s ease;
  transform: scale(0.6);
}
.swiper-pagination-bullet.active {
  transform: scale(1.4);
  /*background: #3897f0;*/
  background: #cc137d;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background: #cc137d !important;
}
.swiper-pagination-bullet.nearby1 {
  transform: scale(1.0);
  opacity: 0.8;
}
.swiper-pagination-bullet.nearby2 {
  transform: scale(0.8);
  opacity: 0.7;
}

.swiper-button{
    max-width: 100%;
    width: 60dvh;
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.swiper-button .swiper-button-prev, .swiper-button .swiper-button-next{
    top: initial;
    font-size: 2.5rem;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    padding: 0.25em;
    background-color: #8eb0be;
}
.swiper-button-prev{
  left: var(--swiper-navigation-sides-offset, 0px);
}
.swiper-button-next{
  right: var(--swiper-navigation-sides-offset, 0px);
}
.swiper-button .swiper-button-next:after, .swiper-button .swiper-button-prev:after{
    color: #ffffff;
    font-size: 70%;
}

.floating-banner{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /*width: 56dvh!important;*/
    /*width: 680px;*/
    width: 50dvh;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    /*background-color: #ffffff;*/
}
.floating-banner a.btn, .floating-banner button.btn{
    display: block;
    color: #ffffff;
    width: 100%;
    font-size: 2.4rem;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /*
    margin-top: 3dvh;
    margin-bottom: 3dvh;
    */
    box-sizing: border-box;
    padding: 1.5rem 1rem;
    padding-left: 1.5rem;
}
.floating-banner a.btn img, .floating-banner button.btn img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*************
floating-banner
*************/
.floating-banner{
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    transition: all 0.5s ease-in-out;
    z-index: 9999999;
}
.floating-banner.UpMove{
    bottom: 0;
}
/*************
modal
*************/
.modal-wrapper {
    display: none;
    position: absolute;
    top: 0; left: 0;
    /*width: 100dvw;*/
    width: 100%;
    height: 100dvh;
    z-index: 1000;
}

.modal-mask {
    cursor: pointer;
    position: absolute;
    top: 0; left: 0;
    /*width: 100dvw;*/
    width: 100%;
    height: 100dvh;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
}

.modal-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 3rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border-radius: 1rem;
    max-width: 570px;
    max-height: 80dvh;
    z-index: 1001;
    width: 90%;
    height: auto;
}

.modal-content {
    max-height: calc(80dvh - 6rem);
    overflow-y: auto;
    height: auto;
}

.modal-close {
    position: absolute;
    top: -2rem;
    right: -1rem;
    background-color: #8eb0be;
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    padding-bottom: 0.15em;
}
.modal-content h2{
    font-size: 2rem;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: bold;
}
.modal-content p{
    font-size: 1.6rem;
    line-height: 1.75;
}
/**************************
スクロールアニメーション
**************************/
.scroll-wrap{
	opacity: 0;
	transition: all 1s ease-in-out;
}
.scroll-wrap.slow{
	transition: all 1.5s ease-in-out;
}
.scroll-wrap.fast{
	transition: all 0.5s ease-in-out;
}
.scroll-wrap.is-active{
	opacity: 1;
}
/**left-right**/
.scroll-wrap.left-right{
	transform: translateX(-30px);
}
.scroll-wrap.left-right.is-active{
	transform: translateX(0%);
}
/**right-left**/
.scroll-wrap.right-left{
	transform: translateX(30px);
}
.scroll-wrap.right-left.is-active{
	transform: translateX(0%);
}
/**bottom-top**/
.scroll-wrap.bottom-top{
	transform: translateY(30px);
}
.scroll-wrap.bottom-top.is-active{
	transform: translateY(0%);
}
/**top-bottom**/
.scroll-wrap.top-bottom{
	transform: translateY(-30px);
}
.scroll-wrap.top-bottom.is-active{
	transform: translateY(0%);
}
/**************************
shiny
**************************/
.shiny-btn {
  display: block;
  position: relative;
  overflow: hidden;
  transition: 300ms;
}
.shiny-btn::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #ffffff;
  transition: 300ms;
  animation: shinyshiny 2.5s ease-in-out infinite;
  z-index: 999;
}

@-webkit-keyframes shinyshiny {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/**************************
scale
**************************/
.scale-wrap{
  animation: scale 2.5s ease-in-out infinite;
}
@-webkit-keyframes scale {
  0% { -webkit-transform: scale(0.8); }
  50% { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(0.8); }
}
/**************************

**************************/
/* スクロールダウンの位置 */
.scroll {
  padding-top: 60px;
  position: absolute;
  text-align: center;
  top: 77%;
  left: 0;
  right: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #4a7385;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.scroll *{
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
/* 矢印のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  border-bottom: 0.2rem solid #4a7385;
  border-left: 0.2rem solid #4a7385;
  content: "";
  height: 2rem;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 2rem;
}
/* 矢印のアニメーション */
@keyframes scroll {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: rotate(-45deg) translate(-20px, 20px);
  }
  100% {
    opacity: 0;
  }
}
/*************
fv
*************/
#fv{
  position: relative;
}
#fv .img001{
  position: absolute;
  top: 2.5%;
  right: 6%;
  /*width: 25rem;*/
  width: 37%;
}
/*************
section01
*************/
#section01{
  position: relative;
}
#section01 .swiper-container{
  position: absolute;
  top: 10.5%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
/*************
section02
*************/
#section02{
  position: relative;
}
#section02 .img001{
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  /*width: 23rem;*/
  width: 34%;
  margin: auto;
}
/*************
section03
*************/
#section03{
  position: relative;
}
#section03 .img001{
  position: absolute;
  top: 32%;
  left: 5%;
  /*width: 42rem;*/
  width: 62%;
  margin: auto;
}
/*************
section04
*************/
#section04{
  position: relative;
}
#section04 .img001{
  position: absolute;
  top: 2%;
  right: 5%;
  /*width: 29rem;*/
  width: 43%;
  margin: auto;
}
/*************
section05
*************/
#section05{
  position: relative;
}
#section05 .img001{
  position: absolute;
  top: 9%;
  left: 0;
  right: 0;
  /*width: 42rem;*/
  width: 62%;
  margin: auto;
}
/*************
section06
*************/
#section06{
  position: relative;
}
#section06 .img001{
  position: absolute;
  top: 17%;
  left: 0;
  right: 0;
  /*width: 58rem;*/
  width: 85%;
  margin: auto;
}
/*************
section07
*************/
#section07{
  position: relative;
}
#section07 .swiper-container{
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
/*************
section08
*************/
#section08{
  position: relative;
}
#section08 .img001{
  position: absolute;
  top: 15%;
  right: 0;
  /*width: 48rem;*/
  width: 71%;
  margin: auto;
}
/*************
section09
*************/
#section09{
  position: relative;
}
#section09 .img001{
  position: absolute;
  top: 2%;
  right: 10%;
  /*width: 19rem;*/
  width: 28%;
  margin: auto;
}
/*************
section10
*************/
#section10{
  position: relative;
}
#section10 .img001{
  position: absolute;
  top: 13%;
  left: 0;
  right: 0;
  /*width: 65rem;*/
  width: 90%;
  margin: auto;
}
#section10 .img002{
  position: absolute;
  top: 43%;
  left: 0;
  right: 0;
  /*width: 65rem;*/
  width: 90%;
  margin: auto;
}

/*************
section12
*************/
#section12{
  position: relative;
}
#section12 .img001{
  position: absolute;
  top: 67.8%;
  right: 8%;
  /*width: 11rem;*/
  width: 16%;
  cursor: pointer;
}
#section12 .img001 img{
  max-width: 100%;
}

/*************
section13
*************/
#section13{
  position: relative;
}
#section13 .img001{
  position: absolute;
  top: 61.5%;
  right: 15%;
  /*width: 11rem;*/
  width: 16%;
  cursor: pointer;
}
#section13 .img001 img{
  max-width: 100%;
}
#section13 .img002{
  position: absolute;
  top: 68%;
  right: 15%;
  /*width: 11rem;*/
  width: 16%;
  cursor: pointer;
}
#section13 .img002 img{
  max-width: 100%;
}

/*************
section15
*************/
#section15{
  position: relative;
}
#section15 .img001{
  position: absolute;
  top: 67.8%;
  right: 8%;
  /*width: 11rem;*/
  width: 16%;
  cursor: pointer;
}
#section15 .img001 img{
  max-width: 100%;
}
#section15 #top-slide-btn{
  position: absolute;
  bottom: 18%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
}

@media screen and (max-width:540px){
  .floating-banner{
    height: 15%;
    width: auto;
  }
  .floating-banner a.btn, .floating-banner button.btn{
    width: auto;
    height: 100%;
  }
  .floating-banner a.btn img, .floating-banner button.btn img{
    width: auto;
    height: 100%;
  }
  .scroll{
    top: 68%;
  }
  #section15 #top-slide-btn{
    top: 73%;
  }
}