@charset "utf-8";
/*btn*/
.btn a,
.btn .btnIn{
width: 260px;
height: 60px;
border-radius: 60px;
}
.reservBtn a{
width: 160px;
height: 40px;
}
.arrowBtn  a,
.arrowBtn .btnIn{
width: 36px;
height: 16px;
transition: all 0.3s ease;
}
.btn a .arrow,
.btn .btnIn .arrow{
width: 9px;
top: 50%;
transform: translate(0,-50%);
right: 30px;
}
.btn a .btnArrow{
width: 14px;
}
.reservBtn a .arrow{
right: 20px;
}
.arrowBtn  a .arrow,
.arrowBtn .btnIn .arrow{
right:12px;
}
a:hover .arrowBtn .btnIn{
background:#e95012;
}
.btn a:hover .arrow,
a:hover .btnIn .arrow{
animation: btnArrow 800ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes btnArrow {
40%,50% {
opacity: 0;
}
43% {
transform: translate(105%,-50%) scaleY(0.1);
}
44%,50% {
transform: translate(-145%,-50%) scaleY(0.1);
}
100% {
transform: translate(0,-50%) scaleY(1);
}
}
.btn a .txtOuter{
left: 30px;
top: 50%;
width: 100%;
transform: translate(0,-50%);
}
.reservBtn a .txtOuter{
left: 20px;
}
.btn a .txt{
transition: opacity 650ms,transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn a:hover .txt{
opacity: 0;
transform: translate3d(0, -130%, 0);
}
.btn a .txtAfter{
transition: opacity 650ms,transform 650ms cubic-bezier(0.165, 0.84, 0.44, 1);
top: 0;
left: 0;
opacity: 0;
width: 100%;
transform: translate3d(0, 130%, 0);
}
.btn a:hover .txtAfter{
opacity: 1;
transform: translate3d(0, 0, 0);
}
/*ttlImg*/
.ttlImg img{
height: 45px;
width: auto;
}
@media only screen and (max-width:767px){
.ttlImg img{
height: 35px;
}
.ttlJp{
  font-size: 1.6rem;
}
}
.ttlImg-u img{
height: 49px;
}
@media only screen and (max-width:767px){
.ttlImg-u img{
height: 38px;
}
}
.ttlImg-d{
height: 58px;
}
@media only screen and (max-width:767px){
.ttlImg-d{
height: 45px;
}
}
/*fade-in-on-scroll */
.fade-in-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
will-change: opacity, transform;
}
/*bgslide*/
.bgslide{
width: 100%;
height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
@media only screen and (max-width:980px){
.bgslide{
height: 350px;
}
}
@media only screen and (max-width:767px){
.bgslide{
height: 145px;
}
}
.bgslide .bg{
left: 0;
width: 100%;
height: 100vh;
min-height: 900px;
}
@media only screen and (max-width:980px){
.bgslide .bg{
height: 100%;
min-height: 100%;
}
}
.contentsArea .contents01 .bg{
top: 0px;
background: url("../images/common/bg-contents01.jpg") center no-repeat;
background-size: cover;
}
.contentsArea .contents02 .bg{
top: 300px;
background: url("../images/common/bg-contents02.jpg") center no-repeat;
background-size: cover;
}
.contentsArea .contents03 .bg{
top: 400px;
background: url("../images/common/bg-contents03.jpg") center no-repeat;
background-size: cover;
}
@media only screen and (max-width:980px){
.contentsArea .contents01 .bg{
top:0;
}
.contentsArea .contents02 .bg{
top:0;
}
.contentsArea .contents03 .bg{
top:0;
}
}
/*topArea*/
.topArea{
width: 100%;
height: 800px;
}
@media only screen and (max-width:767px){
.topArea{
height: 550px;
}
}
.topArea .movie{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: auto;
background: url("../images/common/movie.jpg") no-repeat center;
background-size: cover;
}
@media only screen and (max-width:1422px){
.topArea .movie{
width: auto;
height: 100%;
}
}
.topArea .logo{
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
width: 438px;
max-width: 70%;
}
.topArea .situationBox{
bottom: 30px;
left: 0px;
padding: 35px 40px 35px 59px
}
@media only screen and (max-width:767px){
.topArea .situationBox{
bottom: 15px;
padding: 15px 30px 15px 30px;
}
}
.topArea .situationBox .icon{
width: 30px;
margin:-1px 5px 0 -2px;
filter: grayscale(100%);
}
@media only screen and (max-width:767px){
.topArea .situationBox .icon{
width: 25px;
margin:-2px 0 0 -2px;
position: relative;
}
}
.topArea .situationBox #currentDateTime{
margin-right: 10px;
}
.topArea .situationBox #openStatusNow{
margin-right: 15px;
}
@media only screen and (max-width:767px){
.topArea .situationBox .fs-16{
font-size: 1.2rem;
}
.topArea .situationBox #openStatusNow{
font-size: 2.1rem;
}
}
/*newsArea*/
.newsArea .ttlBox{
width: 150px;
}
@media only screen and (max-width:767px){
.newsArea .ttlBox{
width: 100%;
}
.newsArea .ttlBox .jp{
margin-bottom: 20px;
}
}
.newsArea .more{
margin-right: 20px;
}
.newsArea .newsBox{
width: calc(100% - 190px);
max-width: 665px;
padding-top: 20px;
}
@media only screen and (max-width:767px){
.newsArea .newsBox{
width: 100%;
padding-top: 0;
}
}
.newsArea .newsBox .date{
width: 120px;
}
@media only screen and (max-width:767px){
.newsArea .newsBox .date{
width: 100%;
}
}
.newsArea .newsBox .ttl{
width:calc(100% - 120px);
}
@media only screen and (max-width:767px){
.newsArea .newsBox .ttl{
width: 100%;
}
}
.newsArea .newsBox .txtIn{
width: calc(100% - 76px);
margin-right: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (max-width:767px){
.newsArea .newsBox .txtIn{
width: calc(100% - 46px);
margin-right: 10px;
}
}
/*infoArea*/
.infoArea .ttlBox{
width: 150px;
}
@media only screen and (max-width:767px){
.infoArea .ttlBox{
width: 100%;
}
.infoArea .ttlBox .jp{
margin-bottom: 20px;
}
}
.infoArea .infoBox{
width: calc(100% - 190px);
max-width: 665px;
}
@media only screen and (max-width:767px){
.infoArea .infoBox{
width: 100%;
}
}
.infoArea .infoImg{
width: 112px;
margin-right: 75px;
}
@media only screen and (max-width:980px){
.infoArea .infoImg{
margin-right: 40px;
}
}
@media only screen and (max-width:767px){
.infoArea .infoImg{
width: 92px;
margin-right: 20px;
}
}
.infoArea .txtBox{
width: calc(100% - 187px);
}
@media only screen and (max-width:980px){
.infoArea .txtBox{
width: calc(100% - 152px);
}
}
@media only screen and (max-width:767px){
.infoArea .txtBox{
width: calc(100% - 112px);
white-space: nowrap;
}
.infoArea .txtBox .fs-18{
font-size: 1.4rem;
}
.infoArea .txtBox .fs-16{
font-size: 1.2rem;
}
}
.fruitful img{
margin: 0 0 0 auto;
max-width: 90%;
width: 1105px;
}
@media only screen and (max-width:767px){
.fruitful img{
max-width: 100%;
}
}
/*aboutArea*/
.aboutArea{
max-width: 1300px;
}
.aboutArea .txtBox{
margin-left: calc(50% - 490px);
width: 490px;
}
@media only screen and (max-width:1088px){
.aboutArea .txtBox{
margin-left: 5%;
width: 45%;
}
}
.aboutArea .txtBox .fs-35{
white-space: nowrap;
}
@media only screen and (max-width:980px){
.aboutArea .txtBox{
width: 50%;
}
.aboutArea .txtBox .fs-35{
font-size: 2.3rem;
white-space: normal;
}
}
@media only screen and (max-width:767px){
.aboutArea .txtBox{
width: 90%;
}
.aboutArea .txtBox .lh-maxhight {
line-height: 2.2;
}
}
.aboutArea .logo{
max-width: 278px;
}
@media only screen and (max-width:767px){
.aboutArea .logo{
max-width: 160px;
}
}
.aboutArea .imgBox{
width: 50%;
margin-top: 50px;
}
@media only screen and (max-width:980px){
.aboutArea .imgBox{
width: 45%;
}
}
@media only screen and (max-width:767px){
.aboutArea .imgBox{
width: 100%;
height: 0;
padding-top: 48%;
margin-bottom: 30px;
}
}
.aboutArea .img01{
width: 83.5%;
margin: 0 0 40px 16.5%;
}
.aboutArea .img02{
width: 40%;
margin: 0 0 55px 16.5%;
}
.aboutArea .img03{
width: 20%;
top: 0;
left: 0;
transform: translate(-50%,0);
}
@media only screen and (max-width:980px){
.aboutArea .img03{
left: 10%;
}
}
.aboutArea .img04{
width: 40%;
margin: 0 0 0 68.5%;
}
@media only screen and (max-width:980px){
.aboutArea .img04{
margin: 0 0 0 60%;
}
}
@media only screen and (max-width:767px){
.aboutArea .img01{
top: 0;
right: 0;
margin: 0;
width: 42.6%;
}
.aboutArea .img02{
bottom: 0;
left: 57.4%;
margin: 0;
width: 16%;
}
.aboutArea .img03{
top: auto;
bottom:0;
left: auto;
right: 0;
width: 19.7%;
}
.aboutArea .img04{
top: 50%;
left: 0;
transform: translate(0,-50%);
margin: 0;
width: 19.5%;
}
}
.aboutArea .parts01{
top: -50px;
left: 58.25%;
width: 21.5%;
}
.aboutArea .parts02{
bottom: -100px;
left:25%;
width: 14.7%;
}
@media only screen and (max-width:980px){
.aboutArea .parts01{
top: 50px;
}
.aboutArea .parts02{
bottom: -150px;
left:50%;
transform: translate(-50%,0);
width: 14.4%;
z-index: 10;
}
}
@media only screen and (max-width:767px){
.aboutArea .parts01{
top: -10px;
left: 57.4%;
transform: translate(-50%,0);
}
.aboutArea .parts02{
bottom: -100px;
left:50%;
transform: translate(-50%,0);
width: 14.4%;
z-index: 10;
}
}
/*restArea*/
.restArea{
width: 66%;
height: 470px;
background: url("../images/common/bg-rest.jpg") no-repeat center;
background-size: cover;
}
@media only screen and (max-width:980px){
.restArea{
width: 100%;
}
}
@media only screen and (max-width:767px){
.restArea{
height: 200px;
}
}
.restArea .parts03{
top: 100px;
left: 102%;
width: 7%;
max-width: 89px;
}
.restArea .parts04{
top: -50px;
right: 1%;
width: 6%;
max-width: 83px;
}
.restArea .parts05{
bottom:50px;
left:90%;
width: 29%;
max-width: 191px;
}
@media only screen and (max-width:980px){
.restArea .parts03{
top: -30px;
left: 88%;
}
.restArea .parts04{
top: 30px;
left: 80%;
right: auto;
}
.restArea .parts05{
bottom:-10px;
left: 88%;
width: 7%;
}
}
@media only screen and (max-width:767px){
.restArea .parts03{
width: 9.6%;
top: -20px;
left: 85%;
}
.restArea .parts04{
width: 9%;
top:20px;
left: 72%;
}
}
/*contentsArea*/
.contentsArea .contentsIn .areaInner{
max-width: 1140px;
}
.contentsArea .contentsIn .ttlBox{
width: 132px;
margin-right: 40px;
}
@media only screen and (max-width:980px){
.contentsArea .contentsIn .ttlBox{
width: 100px;
}
}
@media only screen and (max-width:767px){
.contentsArea .contentsIn .ttlBox{
width: 37px;
margin-right: 20px;
}
}
.contentsArea .contentsIn .subTtl{
transform: translate(0,-15px);
}
@media only screen and (max-width:767px){
.contentsArea .contentsIn .subTtl{
transform: translate(0,-8px);
}
}
.contentsArea .contentsIn .parts{
width: 80px;
left: calc(50% - 40px);
}
@media only screen and (max-width:980px){
.contentsArea .contentsIn .parts{
width: 60px;
left: calc(50% - 30px);
}
}
@media only screen and (max-width:767px){
.contentsArea .contentsIn .parts{
width: 20px;
left: calc(50% - 10px);
}
}
.contentsArea .contentsIn .mainBox{
width: calc(100% - 172px);
max-width: 810px;
padding-top: 100px;
}
@media only screen and (max-width:980px){
.contentsArea .contentsIn .mainBox{
width: calc(100% - 140px);
}
}
@media only screen and (max-width:767px){
.contentsArea .contentsIn .mainBox{
width: calc(100% - 57px);
padding-top: 75px;
}
.contentsArea .contentsIn .mainBox.top{
padding-top: 50px;
}
}
.contentsArea .txtBox{
max-width: 715px;
}
@media only screen and (max-width:767px){
.contentsArea .txtBox .lh-hight{
line-height: 1.5;
}
.contentsArea .txtBox .fs-16{
font-size: 1.5rem;
}
}
.contents01-1 .txtImg img{
width: 647px;
}
@media only screen and (max-width:980px){
.contents01-1 .txtImg img{
width: 550px;
}
}
@media only screen and (max-width:767px){
.contents01-1 .txtImg img{
width: 280px;
}
}
.contents01-2 .txtImg img{
width: 478px;
}
@media only screen and (max-width:980px){
.contents01-2 .txtImg img{
width: 406px;
}
}
@media only screen and (max-width:767px){
.contents01-2 .txtImg img{
width: 207px;
}
}
.contents01-2 .parts06{
top: -500px;
}
@media only screen and (max-width:980px){
.contents01-2 .parts06{
top:100px;
}
}
@media only screen and (max-width:767px){
.contents01-2 .parts06{
top:75px;
}
}
.contents01-2 .imgOuter .img{
width: 30%;
margin-right: 5%;
}
.contents01-2 .imgOuter .img:last-child{
margin-right: 0;
}
.contents01-3{
padding-bottom: 100px;
}
@media only screen and (max-width:767px){
.contents01-3{
padding-bottom: 75px;
}
}
.contents01-3 .txtImg img{
width: 462px;
}
@media only screen and (max-width:980px){
.contents01-3 .txtImg img{
width: 393px;
}
}
@media only screen and (max-width:767px){
.contents01-3 .txtImg img{
width: 185px;
}
}
.contents01-3 .parts07{
top: -350px;
}
.contents01-3 .parts08{
top: -320px;
}
.contents01-3 .parts09{
top: 310px;
}
.contents01-3 .parts10{
top: 350px;
}
@media only screen and (max-width:980px){
.contents01-3 .parts07{
top: 0;
}
.contents01-3 .parts08{
top: 70px;
}
.contents01-3 .parts09{
top: auto;
bottom:calc(25% + 70px);
}
.contents01-3 .parts10{
top: auto;
bottom: 25%;
}
}
@media only screen and (max-width:767px){
.contents01-3 .parts08{
top: 30px;
}
.contents01-3 .parts09{
top: auto;
bottom:calc(25% + 30px);
}
.contents01-3 .parts10{
top: auto;
bottom: 25%;
}
}
.contentsArea .contents02 .parts11{
top: 250px;
left: calc(50vw - 544px);
width: 80px;
z-index: 100;
}
@media only screen and (max-width:1266px){
.contentsArea .contents02 .parts11{
left: calc(5% + 25px);
}
}
@media only screen and (max-width:980px){
.contentsArea .contents02 .parts11{
top: -40px;
width: 60px;
}
}
@media only screen and (max-width:767px){
.contentsArea .contents02 .parts11{
left: 7%;
top: -10px;
width: 20px;
}
}
.contents02-1{
padding-bottom: 100px;
}
@media only screen and (max-width:767px){
.contents02-1{
padding-bottom: 75px;
}
}
.contents02-1 .txtImg img{
width: 320px;
}
@media only screen and (max-width:980px){
.contents02-1 .txtImg img{
width: 272px;
}
}
@media only screen and (max-width:767px){
.contents02-1 .txtImg img{
width: 139px;
}
}
.contents02-1 .parts12{
top: 250px;
}
@media only screen and (max-width:980px){
.contents02-1 .parts12{
top: auto;
bottom: 2%;
}
}
.contentsArea .contents03 .parts13{
top: 550px;
left: calc(50vw - 544px);
width: 80px;
z-index: 100;
}
.contentsArea .contents03 .parts14{
top: 640px;
left: calc(50vw - 544px);
width: 80px;
z-index: 100;
}
@media only screen and (max-width:1266px){
.contentsArea .contents03 .parts13,
.contentsArea .contents03 .parts14{
left: calc(5% + 25px);
}
}
@media only screen and (max-width:980px){
.contentsArea .contents03 .parts13{
top: 20px;
width: 60px;
}
.contentsArea .contents03 .parts14{
top: 90px;
width: 60px;
}
}
@media only screen and (max-width:767px){
.contentsArea .contents03 .parts13,
.contentsArea .contents03 .parts14{
left: 7%;
}
.contentsArea .contents03 .parts13{
top: 10px;
width: 20px;
}
.contentsArea .contents03 .parts14{
top: 40px;
width: 20px;
}
}
.contents03-1{
padding-bottom: 200px;
}
@media only screen and (max-width:767px){
.contents03-1{
padding-bottom: 100px;
}
}
.contents03-1 .txtImg img{
width: 320px;
}
@media only screen and (max-width:980px){
.contents03-1 .txtImg img{
width: 272px;
}
}
@media only screen and (max-width:767px){
.contents03-1 .txtImg img{
width: 139px;
}
}
.contents03-1 .parts15{
top: 450px;
}
.contents03-1 .parts16{
top: 540px;
}
.contents03-1 .parts17{
/*top: 500px;*/
top: 650px;
z-index: 10;
}
@media only screen and (max-width:980px){
.contents03-1 .parts15{
top: auto;
bottom: calc(-2% + 10px);
}
.contents03-1 .parts16{
top: auto;
bottom: calc(-2% - 60px);
}
.contents03-1 .parts17{
top: auto;
bottom: calc(-2% - 200px);
}
}
@media only screen and (max-width:767px){
.contents03-1 .parts15{
top: auto;
bottom: calc(-6% + 15px);
}
.contents03-1 .parts16{
top: auto;
bottom: calc(-6% - 15px);
}
.contents03-1 .parts17{
top: auto;
bottom: calc(-6% - 65px);
}
}
/*accessArea*/
.accessArea{
padding: 100px 0;
}
@media only screen and (max-width:767px){
.accessArea{
padding: 70px 0;
}
}
.accessArea .mapImg,
.accessArea .accessImg{
min-width: 600px;
}
.accessArea .map{
margin-left: 15px;
top: -2px;
}
@media only screen and (max-width:767px){
.accessArea .map{
margin-left: 0;
top: 0;
}
}
.accessArea .mappin{
width: 8px;
margin-right: 5px;
}