@charset "UTF-8";
html {
overflow: auto;
font-size: 1px;
font-family: "Noto Sans JP", sans-serif;
color: #000;
}
body {
font-size: 15rem;
overflow-x: hidden;
}
* {
position: relative;
box-sizing: border-box;
}
img,
svg {
max-width: 100%;
vertical-align: bottom;
}
a {
text-decoration: underline;
text-underline-offset: 6rem;
transition-duration: 0.3s;
color: unset;
}
a:hover {
text-decoration: none;
transition-duration: 0.3s;
}
a.tel_link {
text-decoration: none;
/*cursor: default;*/
}
a {
/*color: #000;
text-decoration: none;
text-decoration: underline transparent;*/
transition: 0.2s linear;
/*backface-visibility: hidden;*/
}
@media (hover: hover) and (pointer: fine) {
a:hover {
opacity: 0.7;
}
a.tel_link {
/*pointer-events: none;*/
}
}
p {
line-height: 2;
}
b {
font-weight: 700;
}
small {
font-size: 13rem;
}
.jost {
font-family: "Jost", sans-serif;
/*font-optical-sizing: auto;*/
/*font-style: normal;*/
}
/*-------------------------
"jost"のfont-weight
400-regular
500-medium
600-semibold
700-bold
-------------------------*/
.flex {
display: flex;
}
.flex.column2 li {
width: 48%;
}
.flex.column3 li {
width: 32%;
}
.flex.column4 li {
width: 24%;
}
.inner {
width: 1000rem;
margin-left: auto;
margin-right: auto;
position: relative;
}
.pc_none {
display: none !important;
}
.sp_none {
display: block !important;
}
.fc-white {
color: #fff;
}
h1 {
font-size: 25rem;
}
.btn {
width: 350rem;
height: 50rem;
background: #61bd93;
color: #fff;
font-weight: bold;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
transition-duration: 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.btn:hover {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
transition-duration: 0.3s;
}
.btn:hover span {
position: relative;
}
.btn:hover span::after {
right: -20rem;
transition-duration: 0.3s;
}
.btn a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
}
.btn span {
position: relative;
}
.btn span::before {
content: "";
width: 7rem;
height: 7rem;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
position: absolute;
top: -3rem;
right: -15rem;
margin-top: 0;
display: flex;
align-items: center;
font-size: 20rem;
transition-duration: 0.3s;
}
.btn.white {
background: #fff;
color: #000;
}
.btn.link_blank span {
position: relative;
}
.btn.link_blank span::before {
display: none;
}
.btn.link_blank span::after {
display: block;
content: "";
width: 23rem;
height: 23rem;
background: url(../../assets/image/common/icon_link_blank_w.svg) no-repeat center;
background-size: contain;
position: absolute;
top: -11rem;
right: -35rem;
margin-top: 0;
}
.btn.link_blank.white span::after {
background: url(../../assets/image/common/icon_link_blank.svg) no-repeat center;
background-size: contain;
}
.btn.link_blank.pdf span::after {
width: 9rem;
height: 12rem;
background: url(/assets/image/common/icon_link_pdf.svg) no-repeat center;
}
.btn.modal_btn {
position: relative;
cursor: pointer;
}
.btn.modal_btn::before {
display: block;
content: "＋";
font-size: 18rem;
width: 30rem;
position: absolute;
right: 0;
}
.pin {
display: flex;
align-items: center;
}
.pin::before {
content: "";
background-image: url(/assets/image/common/icon_pin.svg);
background-repeat: no-repeat;
background-size: 100%;
width: 11rem;
height: 13rem;
margin: 0 0.4em;
}
.ttl_top {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
font-size: 36rem;
font-weight: 500;
line-height: 1.5;
}
.ttl_top.ico::before {
content: "";
background-image: url(/assets/image/common/icon_ttl_common_white.svg);
background-repeat: no-repeat;
background-size: 100%;
width: 61rem;
height: 51rem;
margin-bottom: 0.5em;
}
.ttl_top.green {
color: #158f4e;
font-size: 35rem;
top: 40rem;
margin-bottom: 200rem;
}
.ttl_top.green.ico::before {
background-image: url(/assets/image/common/icon_ttl_common_green.svg);
margin-bottom: 1em;
}
.ttl_common {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.ttl_common.ico::before {
content: "";
background-image: url(/assets/image/common/icon_ttl_common.svg);
background-repeat: no-repeat;
background-size: 100%;
width: 61rem;
height: 51rem;
margin-bottom: 1.5em;
}
.ttl_common .jp {
color: #00267F;
/*font-size: 34rem;*/
font-size: 30rem;
font-weight: 600;
letter-spacing: 0.15em;
}
.ttl_common .en {
color: #6ABADC;
display: inline-block;
font-size: 13rem;
font-weight: normal;
margin-top: 1.5em;
letter-spacing: 0.05em;
}
section h2,
section h3,
section h4 {
text-align: center;
}
/*----- to_top（PC） -----*/
#to_top {
display: none;
position: fixed;
bottom: 30rem;
right: 30rem;
z-index: 10;
}
#to_top a {
color: #fff;
font-size: 20rem;
/*background-color: #4285f4;*/
background-color: #999;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
height: 60rem;
width: 60rem;
text-decoration: none;
}
/*-------------------------
多言語メニュー（PC）
-------------------------*/
.lang {
cursor: pointer;
font-size: 12rem;
/*position: relative;*/
position: fixed;
top: 50rem;
right: 120rem;
width: 110rem;
z-index: 1000;
text-align: center;
transition: all 0.3s linear;
}
.lang .ttl {
background-color: #00267f;
/*background: rgba(0, 0, 0, 0.7);*/
/*border: 1px solid #fff;*/
line-height: 2;
}
.lang .ttl a {
color: #fff;
/*color: #00267f;*/
display: block;
position: relative;
z-index: 2;
pointer-events: none !important;
cursor: pointer;
padding: 0 0.5em;
text-decoration: none;
}
.lang .ttl a::after {
border-top: 1px solid #fff;
/*border-top: 1px solid #00267f;*/
border-right: 1px solid #fff;
/*border-right: 1px solid #00267f;*/
content: "";
display: block;
position: absolute;
top: 50%;
right: 0.5em;
width: 0.3em;
height: 0.3em;
transform: translateY(-50%) rotate(135deg) skew(-2.5deg, -2.5deg);
transition: 0.2s linear;
}
.lang ul {
border: 1px solid #00267f;
border-top: none;
background: rgba(255, 255, 255, 0.8);
/*background: rgba(0, 0, 0, 0.8);*/
border-radius: 0 0rem 10rem 10rem;
position: absolute;
left: 0;
/*top: 39rem;*/
/*background-color: #fff;*/
width: 100%;
z-index: 1;
transition: 0.3s;
display: none;
/*display: block !important;*/
transition: opacity 0.3s ease;
/*margin-top: 0.2em;*/
padding-bottom: 0.5em;
overflow: auto;
}
.lang ul li {
/*padding: 10rem 0 10rem 30rem;*/
transition: 0.3s;
}
.lang ul li a {
color: #0c308e;
display: block;
width: 100%;
height: 100%;
line-height: 2.3;
/*padding: 0 0.5em;*/
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.lang ul li:hover {
/*background-color: #00267f;*/
/*background-color: #fff;*/
/*background: rgba(255, 255, 255, 1);*/
}
.lang ul li:hover a {
/*color: #fff;*/
/*color: #00267f;*/
opacity: 0.5;
}
}
.lang ul li + li {
/*margin-top: 0.5em;*/
}
.lang ul li + li a {
position: relative;
}
.lang ul li + li a::after {
background-color: #fff;
content: "";
width: 70%;
height: 1rem;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
@media (hover: hover) and (pointer: fine) {
.lang:hover ul {
transform: translateY(0);
}
}
.lang.active .ttl {
background-color: #fff;
transition: all 0.3s linear;
}
.lang.active .ttl a {
color: #00267f;
}
.lang.active .ttl a::after {
border-top: 1px solid #00267f;
border-right: 1px solid #00267f;
}
.lang.active ul {
background: #00267f;
background: rgba(0, 38, 127, 0.9);
border: 1px solid #496cc4;
border-top: none;
}
.lang.active ul li a {
color: #fff;
}
.lang.active ul li + li a::after {
background-color: #496cc4;
}
/*-------------------------
ヘッダー・ナビ・メニューボタン（PC）
-------------------------*/
#header {
position: fixed;
/*header固定*/
height: 100rem;
/*Headerの高さ設定*/
width: 100%;
z-index: 9;
/*display: flex;
justify-content: center;
align-items: center;
background: #fff;*/
background-color: rgba(255, 255, 255, 0.7);
transform: translateY(-100%);
transition: all 0.3s linear;
}
#header .logo {
margin: 0.6em 0 0 0.6em;
width: 150rem;
}
#header.fixed {
transform: translateY(0);
}
#g-nav {
position: fixed;
z-index: 999;
bottom: -120%;
width: 100%;
height: 100vh;
background: #0b308e;
transition: all 0.6s;
}
#g-nav.panelactive {
bottom: 0;
}
#g-nav #g-nav-list {
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;
/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#g-nav .logo_wrap {
font-size: min(calc(18 / 1920 * 100vw),18px);
position: absolute;
z-index: 999;
left: min(calc(120 / 1920 * 100vw),120px);
top: 60%;
transform: translateY(-60%);
}
#g-nav .logo_wrap .logo {
width: min(calc(288 / 1920 * 100vw),288px);
}
#g-nav .logo_wrap .insta_link {
position: absolute;
right: -5.5em;
top: 9em;
width: min(calc(60 / 1920 * 100vw),60px);
}
#g-nav .logo_wrap .address {
color: #fff;
border-top: 1px solid;
margin-top: min(calc(80 / 1920 * 100vw),80px);
line-height: 1.6;
padding-top: 0.5em;
}
#g-nav ul {
position: absolute;
z-index: 999;
right: min(calc(240 / 1920 * 100vw),240px);
top: 50%;
transform: translateY(-50%);
width: min(calc(550 / 1920 * 100vw),550px);
}
#g-nav ul li {
list-style: none;
/*text-align: center;*/
}
#g-nav ul li.txt a {
color: #fff;
text-decoration: none;
padding: 1.2em 0 0.3em;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: min(calc(34 / 1920 * 100vw),34px);
font-weight: bold;
border-bottom: 1px solid #496cc4;
text-align: left;
}
#g-nav ul li.txt a::before {
content: "";
position: absolute;
top: 70%;
transform: translateY(-70%);
right: 0.8em;
width: 0;
height: 0;
border-style: solid;
border-width: 0.3em 0 0.3em 0.4em;
border-color: transparent transparent transparent #fff;
}
@media (hover: hover) and (pointer: fine) {
#g-nav ul li.btn:hover {
opacity: 0.7;
}
}
#g-nav ul li.btn.white {
color: #0b308e !important;
font-size: min(calc(30 / 1920 * 100vw),30px);
height: min(calc(85 / 1920 * 100vw),85px);
width: 100%;
box-shadow: unset;
position: relative;
margin-top: min(calc(50 / 1920 * 100vw),50px);
}
#g-nav ul li.btn.white::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0.9em;
width: 0;
height: 0;
border-style: solid;
border-width: 0.4em 0 0.4em 0.5em;
border-color: transparent transparent transparent #0b308e;
/*border-radius: 0.2em;*/
}
#g-nav ul li.btn.navy {
border: 1px solid;
background-color: #0b308e;
color: #fff;
font-size: min(calc(18 / 1920 * 100vw),18px);
height: min(calc(45 / 1920 * 100vw),45px);
width: 100%;
box-shadow: unset;
position: relative;
margin-top: min(calc(30 / 1920 * 100vw),30px);
}
#g-nav ul li.btn.navy::before {
display: none;
}
.openbtn {
position: fixed;
z-index: 9999;
top: 30rem;
right: 30rem;
cursor: pointer;
width: 60rem;
height: 60rem;
/*border-left: 2px solid #333;*/
background-image: url(/assets/image/common/icon_openbtn.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: 100%;
/*transform: translateX(150%);*/
transition: all 0.3s linear;
}
.openbtn.fixed {
/*transform: translateX(0);*/
}
.openbtn.active {
/*transform: translateX(0);*/
background-image: url(/assets/image/common/icon_closebtn.svg?241009);
}
/*-------------------------
フッター（PC）
-------------------------*/
.footer_wrap .footer {
padding: 30rem 0;
overflow: hidden;
}
.footer_wrap .footer::before {
display: block;
content: "";
width: 3500px;
height: 2000px;
border-radius: 100%;
background: #0b308e;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.footer_wrap .footer .footer_navi {
justify-content: center;
margin-top: 20rem;
gap: 0 40rem;
}
.footer_wrap .footer h2 {
/*margin: 40rem auto 0;*/
margin: 60rem auto 0;
width: 200rem;
}
.footer_wrap .footer .address {
text-align: center;
/*margin-top: 20rem;*/
margin-top: 40rem;
font-size: 18rem;
}
.footer_wrap .footer .tel {
text-align: center;
font-size: 18rem;
margin: -12rem auto;
}
.footer_wrap .footer .tel span {
font-size: 30rem;
}
@media (hover: hover) and (pointer: fine) {
.footer_wrap .footer .btn:hover {
opacity: 0.7;
}
}
.footer_wrap .footer .btn.white {
color: #0b308e !important;
font-size: 18rem;
height: 65rem;
width: 300rem;
box-shadow: unset;
position: relative;
margin-top: 30rem;
margin-left: auto;
margin-right: auto;
}
.footer_wrap .footer .btn.white::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0.9em;
width: 0;
height: 0;
border-style: solid;
border-width: 0.4em 0 0.4em 0.5em;
border-color: transparent transparent transparent #0b308e;
/*border-radius: 0.2em;*/
}
.footer_wrap .footer .btn.navy {
border: 1px solid;
background-color: #0b308e;
color: #fff;
font-size: 14rem;
height: 35rem;
width: 300rem;
box-shadow: unset;
position: relative;
margin-top: 20rem;
margin-left: auto;
margin-right: auto;
}
.footer_wrap .footer .btn.navy::before {
display: none;
}
.footer_wrap .footer .Copyright {
text-align: center;
margin-top: 35rem;
}
.footer_wrap .footer .insta_link {
position: absolute;
/*bottom: 85rem;*/
bottom: 225rem;
left: 27%;
transform: translateX(-50%);
z-index: 5;
display: flex;
gap: 0 12rem;
}
.footer_wrap .footer .insta_link a {
border: 1px solid #fff;
border-radius: 50%;
}
/*-------------------------
TOPページ（PC）
-------------------------*/
.btn {
margin: 0 auto;
}
.kv {
max-width: 1920px;
height: 800px;
margin: 0 auto;
}
.kv h1 {
position: absolute;
top: 30%;
left: 100rem;
z-index: 5;
}
.kv h1 span {
display: block;
margin-top: 50rem;
}
.kv h1 span.lead {
color: #0b308e;
font-size: 32rem;
line-height: 1.2;
}
.kv .insta_link {
position: absolute;
bottom: -10rem;
left: 100rem;
z-index: 5;
display: flex;
gap: 0 12rem;
}
.kv h2 {
position: absolute;
top: 150rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.kv h2.catch {
color: #0b308e;
/*font-size: 39rem;*/
font-size: 36rem;
left: 50%;
line-height: 1.6;
width: -moz-max-content;
width: max-content;
}
.kv h2.catch.white {
color: #fff;
text-shadow: 0 0 10px rgb(0, 0, 0);
}
.kv .bnr {
position: absolute;
bottom: 20rem;
right: 50rem;
z-index: 2;
}
.kv .slide_area {
width: 1390px;
height: 800px;
border-radius: 0 0 0 120rem;
overflow: hidden;
position: absolute;
top: 0;
left: 30%;
}
.navi_wrap {
position: fixed;
top: 300rem;
right: 0;
/*z-index: 10;*/
z-index: 11;
}
.navi_wrap a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
padding: 10rem 0;
}
.navi_wrap a::before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px;
border-color: transparent transparent transparent #fff;
position: absolute;
right: 1%;
top: 43%;
}
.navi_wrap a:hover {
opacity: 0.7;
}
.navi_wrap .btn_booking {
/*width: 180rem;*/
width: 70rem;
/*height: 70rem;*/
height: 180rem;
background: #1eaa39;
color: #fff;
font-size: 18rem;
font-weight: bold;
text-align: center;
writing-mode: vertical-rl;
border-radius: 20rem 0rem 0rem 20rem;
padding-right: 1em;
letter-spacing: 0.1em;
}
.navi_wrap .btn_booking a {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.navi_wrap .btn_booking a::before {
right: -30%;
}
.navi_wrap .navi {
margin-top: 5rem;
color: #fff;
width: 180rem;
background: #0b308e;
padding: 20rem;
border-radius: 0 0 0 60rem;
}
.navi_wrap .navi li {
border-bottom: 1px solid #fff;
line-height: 1.3;
}
.navi_wrap .navi li:last-child {
border: none;
}
.navi_wrap .navi a::before {
right: -9%;
top: 43%;
transform: rotate(90deg);
}
.sec_cnt {
/*padding-top: 40rem;*/
padding-top: 100rem;
padding-bottom: 80rem;
}
.about {
margin-top: 400rem;
padding-bottom: 260rem;
}
.about::before {
display: block;
content: "";
width: 100%;
height: 16.6666666667vw;
background: url(../../assets/image/top/bg_about_top.png) no-repeat top center;
background-size: 100%;
position: absolute;
top: -14.5833333333vw;
left: 50%;
transform: translateX(-50%);
}
.about::after {
display: block;
content: "";
width: 100%;
height: 100%;
background: url(../../assets/image/top/bg_about_bottom.png) no-repeat bottom center;
background-size: cover;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
.about .inner {
margin-top: -60rem;
}
.about .txt_ttl {
text-align: center;
margin-bottom: -155rem;
margin-left: -300rem;
}
.about p {
width: 425rem;
margin: 0 auto;
}
.about p.intro {
margin-top: 110rem;
}
.about ul {
margin-top: 85rem;
margin-left: -250rem;
justify-content: space-around;
}
.about .btn.modal_btn {
margin-top: 30rem;
}
.about .ph_01 {
position: absolute;
top: 0;
left: -460rem;
}
.about .ph_02 {
position: absolute;
top: 0;
right: -460rem;
}
.about .ph_04 {
position: absolute;
bottom: -10rem;
right: -70rem;
}
.about .ph_05 {
margin-top: -135rem;
margin-right: -90rem;
text-align: right;
}
.about .pic_01 {
position: absolute;
top: 280rem;
left: 54%;
transform: translateX(-50%);
}
.about .pic_02 {
margin-top: 25rem;
}
.about .pic_03 {
position: absolute;
bottom: -50rem;
left: 51%;
transform: translateX(-50%);
}
.about .btn.white {
border: 1px solid;
border-radius: 11rem;
color: #1f8154;
font-size: 18rem;
height: 65rem;
width: 500rem;
/*box-shadow: unset;*/
position: relative;
bottom: -170rem;
}
.about .btn.white::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 2em;
width: 0;
height: 0;
border-style: solid;
border-width: 0.3em 0 0.3em 0.4em;
border-color: transparent transparent transparent #1f8154;
}
.modal_cnt {
width: 100vw;
height: 100vh;
display: none;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transform: translate(-50%, -50%);
z-index: 10;
}
.modal_cnt .inner {
background: #fff;
height: 90vh;
position: absolute;
top: 57%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: auto;
padding: 60rem;
}
.modal_cnt .inner .modal_close {
width: 50rem;
height: 50rem;
border: 1px solid #707070;
background: #f5f5f5;
position: absolute;
top: 0;
right: 0;
z-index: 11;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
font-size: 24rem;
cursor: pointer;
}
.modal_cnt .inner .modal_close span {
font-size: 11rem;
}
.modal_cnt .inner h2 {
font-size: 20rem;
font-weight: bold;
text-align: left;
}
.modal_cnt .inner .room_type {
text-align: center;
}
.modal_cnt .inner .room_type + .room_type {
margin-top: 50rem;
}
.activity {
padding-bottom: 600rem;
padding-top: 80rem;
}
.activity::before {
display: block;
content: "";
width: 100%;
/*height: 107%;*/
height: 111%;
background: url(../../assets/image/top/bg_activity_v2.webp) no-repeat bottom center;
background-size: cover;
position: absolute;
top: -145rem;
left: 50%;
transform: translateX(-50%);
z-index: -2;
}
.activity .future {
margin-top: 30rem;
padding: 35rem 0 40rem;
text-align: center;
background: rgba(1, 111, 164, 0.75);
border-radius: 30rem;
}
.activity .future h4 {
color: #fff;
/*font-size: 28rem;*/
font-size: 26rem;
font-weight: 500;
letter-spacing: -0.05em;
}
.activity .future p {
margin-top: 30rem;
}
.activity .future .ph_01 {
position: absolute;
top: -160rem;
left: -80rem;
}
.activity .future .ph_02 {
position: absolute;
bottom: -215rem;
left: -45rem;
}
.activity .future .ph_03 {
position: absolute;
bottom: -270rem;
left: 330rem;
}
.activity .future .ph_04 {
position: absolute;
bottom: -230rem;
right: -45rem;
}
.activity .future .ph_05 {
position: absolute;
top: -160rem;
right: -70rem;
}
.activity .pickup h3 {
margin-top: 370rem;
}
.activity .pickup ul {
margin: 30rem auto;
gap: 20rem;
flex-wrap: wrap;
}
.activity .pickup ul li {
background: rgba(0, 49, 71, 0.75);
border-radius: 30rem;
padding-bottom: 30rem;
}
.activity .pickup ul li .txt_wrap {
margin-top: 15rem;
padding: 0 25rem 0;
}
.activity .pickup ul li .txt_wrap h5 {
height: 45rem;
font-size: 20rem;
font-weight: bold;
line-height: 1.2;
display: flex;
align-items: center;
}
.activity .pickup ul li .txt_wrap p {
margin-top: 20rem;
line-height: 1.5;
}
.activity .pickup ul li p.note {
font-size: 13rem;
line-height: 1.2;
font-feature-settings: "palt";
padding: 0 17rem;
margin-top: 15rem;
}
.activity .pic_01 {
position: absolute;
top: 160rem;
left: 260rem;
}
.access {
/*padding-bottom: 170rem;*/
padding-bottom: 300rem;
}
.access::before {
display: block;
content: "";
width: 100%;
height: 109%;
background: url(../../assets/image/top/bg_access.webp) no-repeat bottom center;
background-size: cover;
position: absolute;
top: -205rem;
left: 50%;
transform: translateX(-50%);
z-index: -3;
}
.access p.desc {
margin-top: 40rem;
text-align: center;
}
.access p.tel {
text-align: center;
margin-top: 60rem;
font-size: 18rem;
}
.access p.tel span {
font-size: 30rem;
}
.access p.address {
text-align: center;
margin-bottom: 30rem;
line-height: 1.7;
}
.access .pic_map {
position: absolute;
top: 10rem;
right: -210rem;
}
.access .pic_01 {
position: absolute;
top: 190rem;
left: 42%;
transform: translateX(-50%);
}
.access .route {
width: 90%;
margin: 0 auto;
}
.access .route h3 {
font-size: 18rem;
font-weight: bold;
background: #61bd93;
color: #fff;
width: 240rem;
height: 30rem;
display: flex;
align-items: center;
padding-left: 6rem;
}
.access .route.to_sado {
margin-top: 40rem;
}
.access .route.to_sado .tabstyle {
margin-top: 20rem;
}
.access .route.to_sado .tabstyle .tab_wrap {
display: flex;
align-items: flex-end;
justify-content: flex-start;
position: relative;
}
.access .route.to_sado .tabstyle .tab_wrap .tab_btn {
width: 240rem;
cursor: pointer;
background: #b2b2b2;
color: #000;
height: 50rem;
border-radius: 20rem 20rem 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.access .route.to_sado .tabstyle .tab_wrap .tab_btn.active {
background: #fff;
}
.access .route.to_sado .tabstyle .tab_cnt {
display: none;
background: #fff;
color: #000;
padding: 30rem;
}
.access .route.to_sado .tabstyle .tab_cnt.active {
display: block;
}
.access .route.to_sado .tabstyle .tab_cnt h4 {
font-size: 18rem;
color: #1eaa39;
font-weight: bold;
text-align: left;
}
.access .route.to_sado .tabstyle .tab_cnt .pic_route {
margin: 20rem auto;
}
.access .route.to_sado .tabstyle .tab_cnt p {
text-align: center;
line-height: 1.5;
}
.access .route.to_sado .tabstyle .tab_cnt p span {
color: #ff7200;
}
.access .route.at_sado {
margin-top: 20rem;
}
.access .route.at_sado p {
margin-top: 10rem;
}
.access .gmap {
text-align: center;
}
.access .gmap iframe {
margin-top: 30rem;
margin-left: auto;
margin-right: auto;
border-radius: 30rem;
width: 690rem;
height: 380rem;
}
.access .gmap .btn.white {
border: 1px solid;
border-radius: 11rem;
color: #01293e;
font-size: 18rem;
height: 65rem;
width: 500rem;
/*box-shadow: unset;*/
position: relative;
margin-top: 50rem;
}
.access .gmap .btn.white::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 2em;
width: 0;
height: 0;
border-style: solid;
border-width: 0.3em 0 0.3em 0.4em;
border-color: transparent transparent transparent #01293e;
}
.guide {
padding-top: 100rem;
padding-bottom: 250rem;
}
.guide::before {
display: block;
content: "";
width: 100%;
height: 120%;
background: url(../../assets/image/top/bg_guide.webp) no-repeat bottom center;
background-size: cover;
position: absolute;
top: -260rem;
left: 50%;
transform: translateX(-50%);
z-index: -4;
}
.guide .inner {
background: #fff;
border-radius: 30rem;
padding: 40rem;
}
.guide p.desc {
text-align: center;
margin: 85rem auto 25rem;
}
.guide .step_wrap {
margin-top: 60rem;
flex-wrap: wrap;
gap: 35rem 25rem;
}
.guide .step_wrap .step {
width: 31%;
border: 1px solid #127440;
padding: 20rem 10rem;
display: flex;
flex-direction: column;
align-items: center;
}
.guide .step_wrap .step .tag {
width: 50rem;
height: 50rem;
background: #127440;
color: #fff;
font-size: 20rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.guide .step_wrap .step h3 {
font-size: 20rem;
font-weight: bold;
margin: 15rem 0 10rem;
text-align: center;
min-height: 50rem;
display: flex;
align-items: center;
line-height: 1.2;
}
.guide .step_wrap .step p {
line-height: 1.5;
font-size: 20rem;
margin: 10rem 20rem 0;
}
.guide .step_wrap .step .btn {
width: 288rem;
margin-top: 30rem;
}
.guide .step_wrap .step:first-child h3 {
margin: 20rem 0 15rem;
}
.guide .step_wrap .step.no_border {
border: none;
}
.guide .step_wrap .step.wide {
width: 48%;
justify-content: space-between;
}
.guide .step_wrap .step.wide h3 {
margin: 0 auto;
font-size: 24rem;
color: #127440;
}
.guide .comment {
display: block;
margin: 10rem 0 0;
}
.guide .pic_01 {
position: absolute;
top: 260rem;
left: 48%;
transform: translateX(-50%);
}
.guide .pic_02 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*-------------------------
下層ページ共通（PC）
-------------------------*/
.lower_page .mv {
max-width: 1920px;
margin: 0 auto;
align-items: center;
}
.lower_page .mv .logo_wrap {
width: 320rem;
}
.lower_page .mv .logo_wrap .logo {
width: 200rem;
margin: 0 auto;
}
.lower_page .mv .ttl_wrap {
margin-left: 20rem;
margin-right: -320rem;
width: 100vw;
background: #0b308e;
border-radius: 0 0 0 80rem;
height: 160rem;
display: flex;
align-items: center;
}
.lower_page .mv h1 {
font-size: 36rem;
color: #fff;
margin-left: 100rem;
}
.lower_page .breadcrumb {
max-width: 1920px;
margin: 0 auto;
padding: 25rem 0;
}
.lower_page .breadcrumb a {
text-decoration: none;
}
.lower_page .breadcrumb ul {
margin-right: 30rem;
justify-content: flex-end;
gap: 0 33rem;
}
.lower_page .breadcrumb ul li::before {
display: block;
content: "/";
position: absolute;
top: -1rem;
left: -20rem;
}
.lower_page .breadcrumb ul li:first-child::before {
display: none;
}
.lower_page main {
margin-bottom: 80rem;
}
.lower_page main h2 {
text-align: left;
font-size: 22rem;
font-weight: bold;
color: #16308c;
margin-bottom: 30rem;
}
.lower_page main dl {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.lower_page main dl + dl {
margin-top: 30rem;
}
.lower_page main dl dt,
.lower_page main dl dd {
padding: 15rem;
border-bottom: 1px dotted #dedede;
}
.lower_page main dl dt {
width: 25%;
font-weight: bold;
}
.lower_page main dl dd {
width: 75%;
}
/*-------------------------
宿泊（PC）
-------------------------*/
.stay_page {
/*/main*/
}
@media (hover: hover) and (pointer: fine) {
.stay_page .btn:hover {
opacity: 0.7;
}
}
.stay_page .btn.lightblue {
background: #F8FAFF;
border: 1px solid;
color: #00267F;
font-size: 16rem;
font-weight: normal;
width: 750rem;
height: 42rem;
box-shadow: unset;
position: relative;
}
.stay_page .btn.lightblue::before {
content: "";
border-top: solid 1px #00267F;
border-right: solid 1px #00267F;
display: block;
position: absolute;
top: 40%;
right: 1em;
width: 6rem;
height: 6rem;
transform: rotate(135deg) skew(-2.5deg, -2.5deg);
}
.stay_page .btn.navy {
background: #00267F;
font-size: 22rem;
width: 750rem;
height: 75rem;
box-shadow: unset;
position: relative;
}
.stay_page .btn.navy::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0.8em;
width: 0;
height: 0;
border-style: solid;
border-width: 0.4em 0 0.4em 0.4em;
border-color: transparent transparent transparent #fff;
border-radius: 0.2em;
}
.stay_page .swiper_outer {
position: relative;
z-index: 0;
/*width: 480rem;*/
}
.stay_page .swiper_outer .swiper-slide img {
border-radius: 45rem;
width: 100%;
}
.stay_page .swiper_outer .swiper-button-prev,
.stay_page .swiper_outer .swiper-button-next {
/*top: calc(50% - 25rem);*/
top: 50%;
width: 50rem;
height: 50rem;
background-repeat: no-repeat;
background-size: 100%;
/*margin-top: 12rem;*/
/* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
}
.stay_page .swiper_outer .swiper-button-next {
background-image: url(/assets/image/stay/arrow_next.svg);
right: -30rem;
}
.stay_page .swiper_outer .swiper-button-prev {
background-image: url(/assets/image/stay/arrow_prev.svg);
left: -30rem;
}
.stay_page .swiper_outer .swiper-button-next:after,
.stay_page .swiper_outer .swiper-button-prev:after {
display: none;
}
.stay_page .swiper_outer .swiper-pagination {
/*display: flex;*/
left: 0;
right: 0;
margin-top: 0.5em;
margin-left: auto;
margin-right: auto;
}
.stay_page .swiper_outer .swiper-pagination span + span {
margin-left: 0.5em;
}
.stay_page .swiper_outer .swiper-pagination .swiper-pagination-bullet {
width: 10rem;
height: 10rem;
}
.stay_page .swiper_outer .swiper-pagination .swiper-pagination-bullet-active {
background: #00267F !important;
}
.stay_page .swiper_outer .row_btns button {
display: block;
cursor: pointer;
margin-top: 0.3em;
margin-right: 20rem;
margin-left: auto;
z-index: 10;
position: relative;
}
.stay_page .mv {
align-items: flex-start;
}
.stay_page .mv .logo_wrap .logo {
margin-top: 100rem;
margin-left: auto;
margin-right: auto;
}
.stay_page .mv .ttl_wrap {
background: url(/assets/image/stay/bg_mv.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 481rem;
}
.stay_page .mv h1 {
position: absolute;
left: -40rem;
bottom: -50rem;
width: 451rem;
}
.stay_page main {
/*/section*/
}
.stay_page main section {
margin-top: 0;
/*/anchor*/
/*/type_area*/
/*/facilities_amenities*/
/*/bbq*/
/*/gallery*/
}
.stay_page main section h2 {
text-align: center;
}
.stay_page main section.anchor {
text-align: center;
padding-top: 80rem;
}
.stay_page main section.anchor .lead {
font-size: 16rem;
line-height: 2.2;
}
.stay_page main section.anchor .check {
background-color: #F8FAFF;
color: #00267F;
padding: 30rem 0 40rem;
margin-top: 50rem;
margin-left: auto;
margin-right: auto;
width: 670rem;
}
.stay_page main section.anchor .check ul {
display: flex;
justify-content: center;
font-size: 20rem;
}
.stay_page main section.anchor .check ul li:nth-of-type(1) {
padding-right: 2em;
}
.stay_page main section.anchor .check ul li:nth-of-type(2) {
border-left: 1px dotted;
padding-left: 2em;
}
.stay_page main section.anchor .check .txt {
font-size: 12rem;
line-height: 2;
margin-top: 2em;
}
.stay_page main section.anchor .check .btn.lightblue {
margin-top: 1.5em;
width: 450rem;
height: 40rem;
}
.stay_page main section.anchor .btn_wrap {
display: flex;
justify-content: center;
margin-top: 60rem;
}
.stay_page main section.anchor .btn_wrap li + li {
margin-left: 30rem;
}
.stay_page main section.type_area {
padding-bottom: 180rem;
text-align: center;
}
.stay_page main section.type_area .type {
/*/madori_wrap*/
}
.stay_page main section.type_area .type .inner {
/*width: 800rem;*/
width: 750rem;
}
.stay_page main section.type_area .type .madori_wrap .accordion {
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.stay_page main section.type_area .type .madori_wrap .accordion .btn:hover {
opacity: 1;
}
}
.stay_page main section.type_area .type .madori_wrap .accordion .btn.lightblue::before {
transform: rotate(-45deg) skew(-2.5deg, -2.5deg);
}
.stay_page main section.type_area .type .madori_wrap .accordion.active .btn.lightblue::before {
transform: rotate(135deg) skew(-2.5deg, -2.5deg);
}
.stay_page main section.type_area .type .madori {
margin-top: 15rem;
margin-left: auto;
margin-right: auto;
width: 600rem;
height: -moz-fit-content;
height: fit-content;
position: relative;
/*&::after {
content: "";
background-image: url("/assets/image/stay/icon_zoomin.svg");
background-repeat: no-repeat;
background-size: 100%;
width: 25rem;
height: 25rem;
position: absolute;
right: -40rem;
bottom: 0;
}*/
}
.stay_page main section.type_area .type .madori .ico {
position: absolute;
right: -40rem;
bottom: 7rem;
}
.stay_page main section.type_area .type .fig {
margin-top: 60rem;
}
.stay_page main section.type_area .type .btn.lightblue {
margin-top: 50rem;
}
.stay_page main section.type_area .type .btn.lightblue::before {
transition: all 0.3s linear;
}
.stay_page main section.type_area .type .btn.navy {
margin-top: 50rem;
}
.stay_page main section.type_area .type.type_a {
margin-top: 120rem;
}
.stay_page main section.type_area .type.type_a .swiper_outer::after {
content: "";
background-image: url(/assets/image/stay/deco_type_a.png);
background-repeat: no-repeat;
background-size: 100%;
width: 1208rem;
height: 563rem;
position: absolute;
top: 60rem;
right: -65rem;
z-index: 1;
}
.stay_page main section.type_area .type.type_bc {
margin-top: 120rem;
}
.stay_page main section.type_area .type.type_bc .swiper_outer::after {
content: "";
background-image: url(/assets/image/stay/deco_type_bc.png);
background-repeat: no-repeat;
background-size: 100%;
width: 1211rem;
height: 547rem;
position: absolute;
top: 40rem;
right: -65rem;
z-index: 1;
}
.stay_page main section.facilities_amenities {
padding-bottom: 150rem;
text-align: center;
}
.stay_page main section.facilities_amenities .inner {
padding-top: 100rem;
border-top: 1px solid #707070;
}
.stay_page main section.facilities_amenities .frame {
background-color: #EBEEF6;
padding: 60rem 100rem 30rem;
/*/cont*/
}
.stay_page main section.facilities_amenities .frame h3 {
text-align: left;
padding-bottom: 1em;
border-bottom: 1px solid #DCDCDC;
}
.stay_page main section.facilities_amenities .frame h3 .jp {
color: #00267F;
font-size: 24rem;
font-weight: 600;
}
.stay_page main section.facilities_amenities .frame h3 .en {
color: #929DB7;
font-size: 16rem;
margin-left: 0.5em;
}
.stay_page main section.facilities_amenities .frame .cont {
display: flex;
flex-wrap: wrap;
margin-top: 30rem;
/*/box*/
}
.stay_page main section.facilities_amenities .frame .cont .box {
margin-bottom: 35rem;
width: 133rem;
}
.stay_page main section.facilities_amenities .frame .cont .box:not(:nth-of-type(5n)) {
margin-right: 33rem;
}
.stay_page main section.facilities_amenities .frame .cont .box .txt {
font-size: 14rem;
margin-top: 0.5em;
line-height: 1.2;
}
.stay_page main section.facilities_amenities .frame.facilities {
margin-top: 75rem;
}
.stay_page main section.facilities_amenities .frame.amenities {
margin-top: 60rem;
}
.stay_page main section.bbq {
background-color: #62be93;
background-image: url(/assets/image/stay/bg_bbq.png);
background-position: top center;
background-repeat: no-repeat;
/*background-size: 100%;*/
background-size: auto;
/*padding-top: 230rem;*/
padding-top: 280rem;
padding-bottom: 130rem;
text-align: center;
/*/frame*/
}
.stay_page main section.bbq .ttl_bbq {
display: inline-block;
position: relative;
}
.stay_page main section.bbq .ttl_bbq::before, .stay_page main section.bbq .ttl_bbq::after {
content: "";
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
/*z-index: 1;*/
}
.stay_page main section.bbq .ttl_bbq::before {
background-image: url(/assets/image/stay/pic_ttl_bbq01.png);
width: 159rem;
height: 128rem;
left: -180rem;
top: -40rem;
}
.stay_page main section.bbq .ttl_bbq::after {
background-image: url(/assets/image/stay/pic_ttl_bbq02.png);
width: 99rem;
height: 82rem;
right: -140rem;
top: -40rem;
}
.stay_page main section.bbq .ttl_bbq .jp {
color: #fff;
font-size: 30rem;
font-weight: 600;
letter-spacing: 0.1em;
}
.stay_page main section.bbq .ttl_bbq .en {
color: #fff;
display: block;
/*font-size: 16rem;*/
font-size: 14rem;
font-weight: normal;
margin-top: 1.5em;
letter-spacing: 0.05em;
}
.stay_page main section.bbq .lead {
color: #fff;
font-size: 16rem;
line-height: 1.8;
margin-top: 2em;
}
.stay_page main section.bbq .frame {
background-color: #fff;
background-image: url(/assets/image/stay/bg_bbq_frame.png);
background-position: bottom center;
background-repeat: no-repeat;
background-size: 100%;
border-radius: 65rem;
padding: 60rem 0 60rem;
margin-top: 60rem;
/*/box*/
}
.stay_page main section.bbq .frame .yoyaku .ttl {
background-color: #31674e;
color: #fff;
font-size: 16rem;
font-weight: bold;
line-height: 2.5;
margin-top: 3em;
margin-left: auto;
margin-right: auto;
width: 800rem;
}
.stay_page main section.bbq .frame .yoyaku .txt {
font-size: 16rem;
font-weight: bold;
margin-top: 1em;
}
.stay_page main section.bbq .frame .yoyaku .note {
font-size: 12rem;
margin-top: 0.5em;
}
.stay_page main section.bbq .frame .box {
display: flex;
justify-content: center;
/*/desc*/
}
.stay_page main section.bbq .frame .box .pic_wrap p {
font-size: 12rem;
margin-top: 0.5em;
text-align: left;
}
.stay_page main section.bbq .frame .box .desc {
font-size: 16rem;
}
.stay_page main section.bbq .frame .box .desc h3 {
color: #62be93;
background-color: #fff;
border: 1px solid;
border-radius: 2em;
font-weight: bold;
padding: 0.7em 3em;
}
.stay_page main section.bbq .frame .box .desc .price {
text-align: right;
margin-top: 0.8em;
line-height: 1.2;
}
.stay_page main section.bbq .frame .box .desc .ul_wrap {
display: flex;
justify-content: center;
}
.stay_page main section.bbq .frame .box .desc .ul_wrap ul {
margin-top: 2em;
list-style: disc;
line-height: 1.2;
margin-left: 1em;
text-align: left;
width: 150rem;
}
.stay_page main section.bbq .frame .box .desc .ul_wrap ul li::marker {
color: #62be93;
}
.stay_page main section.bbq .frame .box .desc .ul_wrap ul li + li {
margin-top: 0.5em;
}
.stay_page main section.bbq .frame .box.box01 .pic_wrap .pic {
width: 346rem;
}
.stay_page main section.bbq .frame .box.box01 .desc {
margin-left: 30rem;
}
.stay_page main section.bbq .frame .box.box02 {
flex-direction: row-reverse;
margin-top: 50rem;
}
.stay_page main section.bbq .frame .box.box02 .pic_wrap .pic {
width: 233rem;
}
.stay_page main section.bbq .frame .box.box02 .desc {
margin-top: 11rem;
margin-right: 20rem;
}
.stay_page main section.bbq .frame .box.box03 .pic_wrap .pic {
width: 221rem;
}
.stay_page main section.bbq .frame .box.box03 .desc {
margin-top: 40rem;
margin-left: 30rem;
}
.stay_page main section.bbq .frame .box.box04 {
flex-direction: row-reverse;
margin-left: 20rem;
margin-top: -200rem;
}
.stay_page main section.bbq .frame .box.box04 .pic_wrap .pic {
width: 342rem;
}
.stay_page main section.bbq .frame .box.box04 .desc {
margin-top: 320rem;
margin-right: 10rem;
}
.stay_page main section.bbq .frame .box.box04 .desc .txt {
line-height: 1.6;
text-align: left;
}
.stay_page main section.bbq .frame .box.box04 .desc .note {
font-size: 11rem;
margin-top: 2em;
text-align: left;
}
.stay_page main section.gallery {
background-color: #BDE1D0;
padding-top: 65rem;
padding-bottom: 110rem;
text-align: center;
}
.stay_page main section.gallery .ttl_gallery {
display: inline-block;
position: relative;
}
.stay_page main section.gallery .ttl_gallery::before, .stay_page main section.gallery .ttl_gallery::after {
content: "";
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
/*z-index: 1;*/
}
.stay_page main section.gallery .ttl_gallery::before {
background-image: url(/assets/image/stay/pic_ttl_gallery01.png);
width: 85rem;
height: 50rem;
left: -110rem;
top: -10rem;
}
.stay_page main section.gallery .ttl_gallery::after {
background-image: url(/assets/image/stay/pic_ttl_gallery02.png);
width: 130rem;
height: 94rem;
right: -145rem;
top: -10rem;
}
.stay_page main section.gallery .ttl_gallery .jp {
color: #31674E;
/*font-size: 34rem;*/
font-size: 30rem;
font-weight: 600;
letter-spacing: 0.15em;
}
.stay_page main section.gallery .ttl_gallery .en {
color: #31674E;
display: block;
font-size: 18rem;
font-weight: normal;
margin-top: 1em;
letter-spacing: 0.1em;
}
.stay_page main section.gallery .inner {
/*width: 800rem;*/
width: 750rem;
}
.stay_page main section.gallery .swiper_outer {
margin-top: 40rem;
}
.stay_page main section.gallery .swiper_outer .swiper-button-next {
background-image: url(/assets/image/stay/arrow_gallery_next.svg);
}
.stay_page main section.gallery .swiper_outer .swiper-button-prev {
background-image: url(/assets/image/stay/arrow_gallery_prev.svg);
}
.stay_page main section.gallery .swiper_outer .swiper-pagination .swiper-pagination-bullet {
opacity: 0.7;
background: #fff !important;
}
.stay_page main section.gallery .swiper_outer .swiper-pagination .swiper-pagination-bullet-active {
background: #61BD93 !important;
}
.stay_page main section.guide {
padding-top: 120rem;
}
/*/stay_page*/
/*-------------------------
アクセス／周辺観光（PC）
-------------------------*/
.access_page {
/*/main*/
}
.access_page .btn.detail {
border-radius: 7rem;
font-size: 13rem;
font-weight: normal;
width: 230rem;
height: 35rem;
background: #003147;
}
.access_page .btn.detail span::before {
width: 6rem;
height: 6rem;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
top: -3rem;
right: -1.3em;
}
.access_page .btn.white {
border: 1px solid #003147;
color: #003147 !important;
}
.access_page .btn.link_blank span::after {
width: 12rem;
height: 12rem;
/*background-size: 100%;*/
top: -0.4em;
right: -1.6em;
}
.access_page .swiper_outer .swiper-button-next:after,
.access_page .swiper_outer .swiper-button-prev:after {
display: none !important;
}
.access_page .mv {
align-items: flex-start;
}
.access_page .mv .logo_wrap .logo {
margin-top: 100rem;
margin-left: auto;
margin-right: auto;
}
.access_page .mv .ttl_wrap {
background: url(/assets/image/access/bg_mv.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 481rem;
}
.access_page .mv h1 {
position: absolute;
left: -40rem;
bottom: -50rem;
}
.access_page main {
/*padding-bottom: 220rem;*/
/*/sec_cnt*/
}
.access_page main .sec_cnt {
margin-top: 0;
/*/cont*/
}
.access_page main .sec_cnt h2 {
text-align: center;
}
.access_page main .sec_cnt .cont {
display: flex;
flex-wrap: wrap;
margin-top: 60rem;
/*/box*/
}
.access_page main .sec_cnt .cont .box {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-bottom: 40rem;
width: 230rem;
/*/box_inner*/
}
.access_page main .sec_cnt .cont .box:not(:nth-of-type(4n)) {
margin-right: 26rem;
}
.access_page main .sec_cnt .cont .box .box_inner .ph img {
border-radius: 30rem;
}
.access_page main .sec_cnt .cont .box .box_inner .desc h3 {
border-bottom: 1px solid #C1C1C1;
color: #003147;
font-size: 16rem;
font-weight: bold;
margin-top: 1.3em;
text-align: left;
padding: 0 0 0.5em;
}
.access_page main .sec_cnt .cont .box .box_inner .desc .txt {
font-size: 16rem;
margin-top: 0.6em;
line-height: 1.6;
}
.access_page main .sec_cnt .cont .box .box_inner .desc .address {
font-size: 13rem;
margin-top: 0.8em;
}
.access_page main .sec_cnt .cont .box .duration {
border-top: 1px solid #C1C1C1;
border-bottom: 1px solid #C1C1C1;
color: #858588;
font-size: 13rem;
margin-top: 1em;
padding: 0.8em 0;
}
.access_page main .sec_cnt .cont .box .btn {
margin-top: 0.6em;
width: 230rem;
}
.access_page main .sec_cnt.access {
padding-top: 70rem;
padding-bottom: 160rem;
}
.access_page main .sec_cnt.access::before {
display: none;
}
.access_page main .sec_cnt.access .address {
color: #000;
margin-top: 0.5em;
font-size: 15rem;
}
.access_page main .sec_cnt.access .tel {
color: #000;
font-size: 18rem;
margin: 0 auto;
line-height: 1.6;
}
.access_page main .sec_cnt.access .tel span {
font-size: 30rem;
}
.access_page main .sec_cnt.access .route h3 {
background: #6ABADC;
width: 100%;
height: 40rem;
}
.access_page main .sec_cnt.access .route.to_sado .tabstyle {
margin-top: 35rem;
}
.access_page main .sec_cnt.access .route.to_sado .tabstyle .tab_wrap {
margin-bottom: -1rem;
z-index: 1;
}
.access_page main .sec_cnt.access .route.to_sado .tabstyle .tab_wrap .tab_btn {
border-top: 1px solid #2CA6E0;
border-left: 1px solid #2CA6E0;
border-right: 1px solid #2CA6E0;
}
.access_page main .sec_cnt.access .route.to_sado .tabstyle .tab_wrap .tab_btn + .tab_btn {
margin-left: 0.7em;
}
.access_page main .sec_cnt.access .route.to_sado .tabstyle .tab_cnt {
border: 1px solid #2CA6E0;
}
.access_page main .sec_cnt.access .route.to_sado .tabstyle .tab_cnt h4 {
color: #003147;
}
.access_page main .sec_cnt.access .route.at_sado {
margin-top: 50rem;
}
.access_page main .sec_cnt.access .route.at_sado p {
color: #000;
margin-top: 30rem;
}
.access_page main .sec_cnt.access .gmap iframe {
border-radius: unset;
margin: 60rem calc(50% - 50vw) 0;
width: 100vw;
height: 450rem;
}
.access_page main .sec_cnt.access .gmap .btn_gmap {
margin-top: -120rem;
text-align: right;
}
.access_page main .sec_cnt.access .ttl_accessto {
margin-top: 135rem;
}
.access_page main .sec_cnt.access .ttl_parking {
margin-top: 100rem;
}
.access_page main .sec_cnt.access .box_parking {
margin-left: auto;
margin-right: auto;
width: 900rem;
}
.access_page main .sec_cnt.access .box_parking h3 {
font-size: 18rem;
font-weight: bold;
background: #FF0099;
color: #fff;
height: 30rem;
display: flex;
align-items: center;
padding-left: 6rem;
margin-top: 2em;
}
.access_page main .sec_cnt.access .box_parking .txt {
color: #000;
font-size: 16rem;
margin-top: 2em;
}
.access_page main .sec_cnt.sightseeing {
background-color: #EDEFF5;
padding-top: 50rem;
padding-bottom: 60rem;
}
.access_page main .sec_cnt.activity {
background-color: #C3DAE3;
padding-top: 50rem;
padding-bottom: 60rem;
}
.access_page main .sec_cnt.activity .btn.link_blank {
margin-top: 20rem;
}
.access_page main .sec_cnt.shop, .access_page main .sec_cnt.restaurant {
background-color: #fff;
}
.access_page main .sec_cnt.shop .cont, .access_page main .sec_cnt.restaurant .cont {
margin-top: 50rem;
}
.access_page main .sec_cnt.shop .cont .box, .access_page main .sec_cnt.restaurant .cont .box {
margin-bottom: 90rem;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc h3, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc h3 {
margin-top: 0;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc h3 a, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc h3 a {
color: #00267F;
/*text-decoration: none;*/
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc .address, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc .address {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc .address .text, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc .address .text {
width: 120rem;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc .address .qrcode, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc .address .qrcode {
width: 100rem;
}
.access_page main .sec_cnt.shop .btn.link_blank, .access_page main .sec_cnt.restaurant .btn.link_blank {
margin-top: -10rem;
}
.access_page main .sec_cnt.shop {
padding-top: 100rem;
padding-bottom: 0;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc .address {
display: block;
}
.access_page main .sec_cnt.restaurant {
padding-top: 100rem;
padding-bottom: 140rem;
}
.access_page main .sec_cnt.spa {
padding-top: 0;
margin-top: -40rem;
background-color: #fff;
}
.access_page main .sec_cnt.spa .cont .box .box_inner .desc h3 {
margin-top: 0;
}
.access_page main .sec_cnt.spa .cont .box .box_inner .desc h3 a {
line-height: 1.6;
}
.access_page main .sec_cnt.spa .cont .box .box_inner .desc .address .text {
display: inline-block;
}
.access_page main .sec_cnt.guide {
padding-top: 130rem;
}
/*/access_page*/
/*-------------------------
もろもろ調整（PC）
-------------------------*/
.company_page .lang,
.contact_page .lang {
display: none;
}
.company_page .openbtn,
.contact_page .openbtn {
border: 1px solid #fff;
border-radius: 50%;
}
.company_page .openbtn.active,
.contact_page .openbtn.active {
border: none;
}
.company_page #g-nav .pagein,
.contact_page #g-nav .pagein {
display: none;
}
.company_page .navi_wrap,
.contact_page .navi_wrap {
display: none !important;
}
/*-------------------------
多言語調整（PC）
-------------------------*/
/*日本語調整*/
.lang_jp .lang {
/*display: none;*/
}
@media screen and (min-width: 1900px) {
.kv .slide_area {
right: 0;
}
.activity::before {
/*height: 115%;*/
/*top: calc(-250 / 1900 * 100vw);*/
}
.access::before {
height: 115%;
top: -13.1578947368vw;
}
.guide::before {
height: 123%;
top: -13.6842105263vw;
}
}
@media screen and (max-width: 1600px) {
.kv h1 {
left: 6%;
}
.kv h2 {
left: 28%;
}
.kv .slide_area {
left: 40%;
}
.kv .insta_link {
left: 6%;
}
}
@media screen and (max-width: 980px) {
html {
font-size: 0.2666666667vw;
}
body {
font-size: 13rem;
}
img {
width: 100%;
}
a.tel_link {
text-decoration: underline;
cursor: pointer;
}
p {
line-height: 1.7;
}
small {
font-size: 11rem !important;
}
.inner {
width: 100%;
}
.pc_none {
display: block !important;
}
.sp_none {
display: none !important;
}
.btn {
width: 260rem;
height: 55rem;
}
.btn.link_blank span::after {
width: 15rem;
height: 15rem;
top: -8rem;
right: -23rem;
}
.pin::before {
width: 11rem;
height: 14rem;
}
.ttl_top {
/*font-size: 20rem;*/
font-size: 24rem;
line-height: 1.4;
width: auto !important;
z-index: 1;
/*text-shadow: rgba(0, 0, 0, 0.7) 0 0 10rem;*/
}
.ttl_top.ico::before {
width: 54rem;
height: 45rem;
margin-bottom: 0.5em;
}
.ttl_top.green {
font-size: 26rem;
top: 30rem;
margin-bottom: 140rem;
width: auto;
}
.ttl_top.green.ico::before {
margin-bottom: 1em;
}
.ttl_common {
width: auto !important;
}
.ttl_common.ico::before {
width: 54rem;
height: 45rem;
margin-bottom: 1em;
}
.ttl_common .jp {
font-size: 27rem;
letter-spacing: 0.15em;
}
.ttl_common .en {
font-size: 12rem;
margin-top: 1em;
}
/*----- to_top（SP） -----*/
#to_top {
bottom: 80rem;
right: 10rem;
}
#to_top a {
height: 50rem;
width: 50rem;
}
/*-------------------------
多言語メニュー（SP）
-------------------------*/
.lang {
top: 20rem;
right: 90rem;
}
.lang .ttl {
line-height: 3;
}
.lang ul li a {
line-height: 3;
}
.lang.active .ttl {
transition: unset;
}
/*-------------------------
ヘッダー・ナビ・メニューボタン（SP）
-------------------------*/
#header {
/*height: 90rem;*/
height: 75rem;
transform: translateY(0);
}
#header .logo {
width: 120rem;
}
#g-nav .logo_wrap {
font-size: 15rem;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
transform: unset;
width: 290rem;
}
#g-nav .logo_wrap .logo {
margin-left: auto;
margin-right: auto;
width: 166rem;
}
#g-nav .logo_wrap .insta_link {
right: 0;
width: 30rem;
}
#g-nav .logo_wrap .address {
border-top: none;
margin-top: 20rem;
}
#g-nav ul {
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
transform: unset;
width: 275rem;
}
#g-nav ul li.txt a {
font-size: 21rem;
}
#g-nav ul li.btn.white {
font-size: 16rem;
height: 55rem;
margin-top: 30rem;
}
#g-nav ul li.btn.navy {
font-size: 13rem;
height: 45rem;
margin-top: 10rem;
}
.openbtn {
top: 7rem;
right: 7rem;
width: 60rem;
height: 60rem;
transition: unset;
/*transform: translateX(0);*/
}
/*-------------------------
フッター（SP）
-------------------------*/
.footer_wrap .footer {
/*padding-bottom: 80rem;*/
padding-bottom: 10rem;
}
.footer_wrap .footer::before {
width: 1500rem;
height: 2000rem;
}
.footer_wrap .footer .footer_navi {
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 35rem;
gap: 35rem 0;
font-size: 15rem;
}
.footer_wrap .footer h2 {
width: 160rem;
}
.footer_wrap .footer h3 {
width: 45rem;
margin: 0 auto;
}
.footer_wrap .footer .address {
margin-top: 12rem;
font-size: 16rem;
}
.footer_wrap .footer .tel {
font-size: 15rem;
margin: -5rem auto 3rem;
}
.footer_wrap .footer .tel span {
font-size: 24rem;
}
.footer_wrap .footer .btn.white {
font-size: 13rem;
height: 55rem;
margin-top: 80rem;
width: 280rem;
}
.footer_wrap .footer .btn.navy {
font-size: 13rem;
height: 45rem;
margin-top: 10rem;
width: 280rem;
}
.footer_wrap .footer .Copyright {
font-size: 11rem;
/*margin-top: 80rem;*/
margin-top: 40rem;
}
.footer_wrap .footer .insta_link {
width: 45rem;
/*bottom: 35rem;*/
bottom: 190rem;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
/*-------------------------
TOPページ（SP）
-------------------------*/
.kv {
height: auto;
}
.kv h1 {
position: relative;
top: 0;
left: 0;
transform: none;
width: 180rem;
margin: 0 auto;
padding-top: 35rem;
text-align: center;
width: 215rem;
}
.kv h1 img {
width: 180rem;
}
.kv h1 span {
margin: 15rem auto 0;
text-align: center;
}
.kv h1 span.lead {
/*font-size: 20.5rem;*/
font-size: 16rem;
margin: 25rem auto 0;
}
.kv .insta_link {
top: 150rem;
bottom: auto;
left: 7%;
width: 45rem;
gap: 0 6rem;
display: block;
}
.kv h2 {
top: 70rem;
left: 44%;
width: 190rem;
}
.kv h2.catch {
/*font-size: 20.5rem;*/
font-size: 19rem;
left: 44%;
}
.kv .bnr {
width: 120rem;
bottom: -65rem;
right: 5rem;
}
.kv .slide_area {
margin-top: 45rem;
position: relative;
width: 100%;
height: auto;
left: 25rem;
border-radius: 60rem 0 0 60rem;
}
.kv .slide_area img {
width: 100%;
}
.navi_wrap {
top: auto;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row-reverse;
font-size: 11rem;
height: 65rem;
}
.navi_wrap a {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.navi_wrap a::before {
border-width: 6px 6px;
position: absolute;
top: auto;
bottom: 5rem;
right: auto;
left: 53%;
transform: translateX(-50%);
}
.navi_wrap .btn_booking {
width: 20%;
height: auto;
font-size: 11rem;
writing-mode: lr-tb;
border-radius: 20rem 0rem 0rem 0rem;
padding-right: 0;
letter-spacing: 0.1em;
}
.navi_wrap .navi {
display: flex;
width: 100%;
padding: 0;
margin: 0;
border-radius: unset;
height: 65rem;
}
.navi_wrap .navi li {
width: 25%;
border-bottom: none;
border-right: 1px solid #fff;
text-align: center;
line-height: 1;
}
.navi_wrap .navi li a {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.navi_wrap .navi li a::before {
top: auto;
bottom: 0;
right: auto;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
.sec_cnt h2 {
width: 70rem;
margin: 0 auto;
}
.about {
margin-top: 150rem;
padding-top: 60rem;
padding-bottom: 130rem;
}
.about::before {
height: 65rem;
background: url(../../assets/image/top/bg_about_top_sp.png) no-repeat top center;
background-size: 100%;
top: -60rem;
}
.about::after {
background: url(../../assets/image/top/bg_about_bottom_sp.png) no-repeat bottom center;
background-size: cover;
}
.about .txt_ttl {
width: 145rem;
margin-bottom: -80rem;
margin-left: 10rem;
z-index: 1;
}
.about ul {
flex-direction: column;
width: 90%;
margin: 45rem auto 0;
}
.about ul .txt_wrap p {
position: relative;
width: 200rem;
margin-top: -70rem;
margin-left: 0rem;
}
.about .btn.modal_btn {
margin-top: 15rem;
}
.about p.intro {
margin-top: 56rem;
width: 91%;
}
.about .ph_01 {
width: 130rem;
top: 25rem;
left: -5rem;
}
.about .ph_02 {
width: 130rem;
top: 25rem;
right: -5rem;
}
.about .ph_04 {
width: 150rem;
bottom: -152rem;
right: 45rem;
width: 151rem;
}
.about .ph_05 {
width: 145rem;
margin-top: -47rem;
margin-right: -30rem;
margin-left: auto;
}
.about .pic_01 {
width: 290rem;
top: 255rem;
left: 58%;
}
.about .pic_02 {
position: absolute;
width: 65rem;
right: -15rem;
bottom: 95rem;
z-index: 1;
}
.about .pic_03 {
width: 65rem;
bottom: -100rem;
left: 115rem;
}
.about .btn.white {
font-size: 13rem;
height: 55rem;
width: 280rem;
bottom: -20rem;
}
.about .btn.white::before {
right: 1em;
border-width: 0.4em 0 0.4em 0.5em;
}
.modal_cnt .inner {
width: 95vw;
padding: 30rem 20rem;
top: 59%;
}
.modal_cnt .inner .modal_close {
width: 40rem;
height: 40rem;
font-size: 22rem;
right: 4rem;
}
.modal_cnt .inner .modal_close span {
font-size: 10rem;
}
.modal_cnt .inner h2 {
font-size: 18rem;
text-align: left;
width: auto;
}
.modal_cnt .inner .room_type + .room_type {
margin-top: 40rem;
}
.activity {
padding-bottom: 200rem;
}
.activity::before {
background: url(../../assets/image/top/bg_activity_sp_v2.webp) no-repeat bottom center;
background-size: cover;
height: 108%;
top: -80rem;
}
.activity .future {
width: 90%;
margin: 35rem auto 0;
padding: 25rem 0 20rem;
}
.activity .future h4 {
font-size: 16rem;
line-height: 1.4;
width: 145rem;
margin: 0 auto;
}
.activity .future p {
margin-top: 15rem;
}
.activity .future .ph_01 {
width: 120rem;
top: -20rem;
left: -30rem;
}
.activity .future .ph_02 {
width: 120rem;
bottom: -90rem;
left: -30rem;
}
.activity .future .ph_03 {
width: 150rem;
bottom: -130rem;
left: 110rem;
}
.activity .future .ph_04 {
width: 90rem;
bottom: -70rem;
right: -20rem;
}
.activity .future .ph_05 {
width: 120rem;
top: -15rem;
right: -30rem;
}
.activity .pickup h3 {
width: 180rem;
margin: 200rem auto 0;
}
.activity .pickup ul {
flex-direction: column;
margin: 15rem auto;
}
.activity .pickup ul li {
width: 95%;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: space-between;
}
.activity .pickup ul li picture {
width: 150rem;
}
.activity .pickup ul li .txt_wrap {
width: 58%;
margin-top: 15rem;
padding: 0 10rem 0;
}
.activity .pickup ul li .txt_wrap h5 {
height: 40rem;
margin-top: 0;
font-size: 15rem;
}
.activity .pickup ul li .txt_wrap p {
margin-top: 10rem;
line-height: 1.4;
}
.activity .pickup ul li .txt_wrap p.note {
padding: 0;
font-size: 11rem;
}
.activity .pic_01 {
width: 245rem;
top: 165rem;
left: 42rem;
}
.access {
padding-top: 30rem;
padding-bottom: 90rem;
}
.access::before {
background: url(../../assets/image/top/bg_access_sp.webp) no-repeat bottom center;
background-size: cover;
height: 108%;
top: -95rem;
}
.access p.desc {
width: 90%;
margin: 40rem auto 0;
}
.access p.address {
text-align: center;
margin-bottom: 20rem;
}
.access p.tel {
margin-top: 40rem;
font-size: 15rem;
}
.access p.tel span {
font-size: 24rem;
}
.access .pic_map {
position: absolute;
width: 100%;
top: 560rem;
left: 0;
}
.access .pic_01 {
width: 90rem;
top: 150rem;
left: 38%;
}
.access .route {
width: 90%;
margin: 0 auto;
}
.access .route h3 {
font-size: 15rem;
width: 170rem;
height: 25rem;
padding-left: 4rem;
}
.access .route.to_sado {
margin-top: 200rem;
}
.access .route.to_sado .tabstyle {
margin-top: 20rem;
}
.access .route.to_sado .tabstyle .tab_wrap .tab_btn {
width: 120rem;
height: 45rem;
border-radius: 20rem 20rem 0 0;
text-align: center;
margin-bottom: -2rem;
}
.access .route.to_sado .tabstyle .tab_cnt {
padding: 20rem 10rem;
}
.access .route.to_sado .tabstyle .tab_cnt h4 {
font-size: 15rem;
}
.access .route.to_sado .tabstyle .tab_cnt p {
line-height: 1.3;
}
.access .route.at_sado {
margin-top: 20rem;
}
.access .route.at_sado p {
margin-top: 10rem;
}
.access .gmap iframe {
margin-top: 210rem;
border-radius: 15rem;
width: 335rem;
height: 225rem;
}
.access .gmap .btn.white {
font-size: 13rem;
margin-top: 30rem;
height: 55rem;
width: 280rem;
}
.access .gmap .btn.white::before {
right: 1em;
border-width: 0.4em 0 0.4em 0.5em;
}
.guide {
padding-top: 60rem;
padding-bottom: 150rem;
}
.guide::before {
background: url(../../assets/image/top/bg_guide_sp.webp) no-repeat bottom center;
background-size: cover;
height: 107%;
top: -110rem;
}
.guide .inner {
width: 90%;
margin: 0 auto;
border-radius: 15rem;
padding: 30rem 15rem;
}
.guide h2 {
width: 48rem;
margin: 0 auto;
}
.guide p.desc {
margin: 30rem auto 0;
}
.guide .step_wrap {
margin-top: 25rem;
flex-wrap: wrap;
gap: 35rem 25rem;
}
.guide .step_wrap .step {
width: 100%;
flex-direction: row;
justify-content: space-between;
}
.guide .step_wrap .step .tag {
width: 37rem;
height: 37rem;
font-size: 15rem;
}
.guide .step_wrap .step h3 {
font-size: 15rem;
min-height: auto;
}
.guide .step_wrap .step .ph {
width: 40%;
}
.guide .step_wrap .step p {
width: 55%;
margin: 0;
font-size: 16rem;
}
.guide .step_wrap .step .btn {
width: 260rem;
height: 55rem;
}
.guide .step_wrap .step.wide {
width: 100%;
}
.guide .step_wrap .step.wide h3 {
font-size: 15rem;
}
.guide .step_wrap .step.wide p {
text-align: center;
}
.guide .pic_01 {
width: 170rem;
top: 200rem;
left: 45%;
}
.guide .pic_02 {
width: 90rem;
}
/*-------------------------
下層ページ共通（SP）
-------------------------*/
.lower_page .inner {
width: 95%;
margin: 0 auto;
}
.lower_page .mv {
max-width: 1920px;
margin: 0 auto;
align-items: center;
}
.lower_page .mv .logo_wrap {
width: 180rem;
}
.lower_page .mv .logo_wrap .logo {
margin: 0 auto;
margin-left: 10rem;
width: auto;
display: flex;
justify-content: center;
}
.lower_page .mv .logo_wrap .logo a {
display: block;
width: 115rem;
}
.lower_page .mv .ttl_wrap {
margin-left: 10rem;
margin-right: -60rem;
border-radius: 0 0 0 60rem;
height: 100rem;
}
.lower_page .mv h1 {
font-size: 24rem;
margin-left: 40rem;
}
.lower_page .breadcrumb {
width: 95%;
margin: 0 auto;
padding: 15rem 0 30rem;
}
.lower_page .breadcrumb ul {
margin-right: 0;
font-size: 11rem;
}
.lower_page main {
margin-bottom: 50rem;
}
.lower_page main h2 {
font-size: 22rem;
}
.lower_page main dl {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.lower_page main dl + dl {
margin-top: 30rem;
}
.lower_page main dl dt,
.lower_page main dl dd {
width: 100%;
padding: 10rem;
}
.lower_page main dl dt {
background: #f3f3f3;
}
.lower_page .footer_wrap .footer {
padding-bottom: 10rem;
}
/*-------------------------
宿泊（SP）
-------------------------*/
.stay_page .inner {
width: 335rem;
}
.stay_page .btn.lightblue {
font-size: 13rem;
width: 100%;
height: 45rem;
}
.stay_page .btn.lightblue::before {
right: 1.5em;
}
.stay_page .btn.navy {
font-size: 18rem;
width: 100%;
height: 55rem;
}
.stay_page .swiper_outer {
width: 100%;
}
.stay_page .swiper_outer .swiper-slide img {
border-radius: 22.5rem;
}
.stay_page .swiper_outer .swiper-button-prev,
.stay_page .swiper_outer .swiper-button-next {
top: 50%;
width: 37.5rem;
height: 37.5rem;
}
.stay_page .swiper_outer .swiper-button-next {
right: -15rem;
}
.stay_page .swiper_outer .swiper-button-prev {
left: -15rem;
}
.stay_page .swiper_outer .row_btns button {
margin-right: 0;
/*width: 15.5rem;*/
}
.stay_page .mv {
margin-top: 90rem;
}
.stay_page .mv .ttl_wrap {
margin-left: auto;
margin-right: 0;
border-radius: 30rem 0 0 30rem;
background-image: url(/assets/image/stay/bg_mv_sp.jpg);
background-size: cover;
height: 190rem;
width: 335rem;
}
.stay_page .mv h1 {
left: -70rem;
bottom: -30rem;
width: 261.5rem;
}
.stay_page main {
/*/section*/
}
.stay_page main section {
/*/anchor*/
/*/type_area*/
/*/facilities_amenities*/
/*/bbq*/
/*/gallery*/
}
.stay_page main section.anchor {
padding-top: 20rem;
}
.stay_page main section.anchor .lead {
font-size: 13rem;
line-height: 1.6;
}
.stay_page main section.anchor .check {
padding: 30rem 20rem 30rem;
margin-top: 50rem;
width: 100%;
}
.stay_page main section.anchor .check ul {
display: inline-block;
font-size: 21rem;
}
.stay_page main section.anchor .check ul li:nth-of-type(1) {
padding-right: 0;
padding-bottom: 1em;
}
.stay_page main section.anchor .check ul li:nth-of-type(2) {
border-left: none;
border-top: 1px dotted;
padding-left: 0;
padding-top: 1em;
}
.stay_page main section.anchor .check .txt {
font-size: 10rem;
line-height: 1.6;
margin-top: 2em;
}
.stay_page main section.anchor .check .btn.lightblue {
width: 225rem;
}
.stay_page main section.anchor .btn_wrap {
margin-top: 60rem;
}
.stay_page main section.anchor .btn_wrap li + li {
margin-left: 15rem;
}
.stay_page main section.type_area {
padding-bottom: 90rem;
}
.stay_page main section.type_area .type .inner {
width: 335rem;
}
.stay_page main section.type_area .type .madori {
margin-top: 15rem;
width: 100%;
/*&::after {
width: 25rem;
height: 25rem;
right: 0;
bottom: 0;
}*/
}
.stay_page main section.type_area .type .madori .ico {
width: 25rem;
height: 25rem;
right: 0;
}
.stay_page main section.type_area .type .fig {
margin-top: 50rem;
}
.stay_page main section.type_area .type .btn.lightblue {
margin-top: 30rem;
}
.stay_page main section.type_area .type .btn.navy {
margin-top: 30rem;
}
.stay_page main section.type_area .type.type_a {
margin-top: 60rem;
}
.stay_page main section.type_area .type.type_a .swiper_outer::after {
background-image: url(/assets/image/stay/deco_type_sp.png);
width: 345.5rem;
height: 216rem;
top: 10rem;
right: -5rem;
}
.stay_page main section.type_area .type.type_bc {
margin-top: 60rem;
}
.stay_page main section.type_area .type.type_bc .swiper_outer::after {
background-image: url(/assets/image/stay/deco_type_sp.png);
width: 345.5rem;
height: 216rem;
top: 10rem;
right: -5rem;
}
.stay_page main section.facilities_amenities {
padding-bottom: 70rem;
}
.stay_page main section.facilities_amenities .inner {
padding-top: 40rem;
}
.stay_page main section.facilities_amenities h2 {
margin-left: auto;
margin-right: auto;
width: 323.5rem;
}
.stay_page main section.facilities_amenities .frame {
padding: 30rem 20rem 15rem;
/*/cont*/
}
.stay_page main section.facilities_amenities .frame h3 {
padding-bottom: 1em;
}
.stay_page main section.facilities_amenities .frame h3 .jp {
font-size: 21rem;
}
.stay_page main section.facilities_amenities .frame h3 .en {
font-size: 13rem;
}
.stay_page main section.facilities_amenities .frame .cont {
margin-top: 30rem;
/*/box*/
}
.stay_page main section.facilities_amenities .frame .cont .box {
margin-bottom: 12rem;
width: 90rem;
}
.stay_page main section.facilities_amenities .frame .cont .box:not(:nth-of-type(5n)) {
margin-right: 0;
}
.stay_page main section.facilities_amenities .frame .cont .box:not(:nth-of-type(3n)) {
margin-right: 12.5rem;
}
.stay_page main section.facilities_amenities .frame .cont .box .txt {
font-size: 11rem;
}
.stay_page main section.facilities_amenities .frame.facilities {
margin-top: 40rem;
}
.stay_page main section.facilities_amenities .frame.amenities {
margin-top: 40rem;
}
.stay_page main section.bbq {
background-size: 100%;
padding-top: 70rem;
padding-bottom: 60rem;
/*/frame*/
}
.stay_page main section.bbq h2 {
margin-left: auto;
margin-right: auto;
width: 342rem;
}
.stay_page main section.bbq .ttl_bbq {
top: 25rem;
width: auto;
}
.stay_page main section.bbq .ttl_bbq::before {
width: 90rem;
height: 72rem;
left: -90rem;
top: -35rem;
}
.stay_page main section.bbq .ttl_bbq::after {
width: 70rem;
height: 58rem;
right: -80rem;
top: -35rem;
}
.stay_page main section.bbq .ttl_bbq .jp {
font-size: 26rem;
/*letter-spacing: 0.05em;*/
line-height: 1.3;
}
.stay_page main section.bbq .ttl_bbq .en {
font-size: 13rem;
margin-top: 1em;
}
.stay_page main section.bbq .lead {
font-size: 13rem;
line-height: 1.2;
margin-top: 2em;
text-align: left;
}
.stay_page main section.bbq .frame {
border-radius: 20rem;
padding: 35rem 20rem 50rem;
margin-top: 30rem;
/*/box*/
}
.stay_page main section.bbq .frame .yoyaku .ttl {
font-size: 13rem;
line-height: 1.5;
margin-top: 3em;
width: 100%;
padding: 0.7em 0;
}
.stay_page main section.bbq .frame .yoyaku .txt {
font-size: 13rem;
}
.stay_page main section.bbq .frame .yoyaku .note {
font-size: 9rem;
}
.stay_page main section.bbq .frame .box {
/*/desc*/
}
.stay_page main section.bbq .frame .box .pic_wrap .pic {
margin-left: auto;
margin-right: auto;
}
.stay_page main section.bbq .frame .box .pic_wrap p {
font-size: 9rem;
margin-top: 0.5em;
}
.stay_page main section.bbq .frame .box .desc {
font-size: 13rem;
}
.stay_page main section.bbq .frame .box .desc h3 {
border-radius: 2em;
margin-top: 0;
padding: 0.5em 1em;
width: 100%;
}
.stay_page main section.bbq .frame .box .desc .price {
margin-top: 0.5em;
}
.stay_page main section.bbq .frame .box .desc .ul_wrap {
display: flex;
justify-content: center;
}
.stay_page main section.bbq .frame .box .desc .ul_wrap ul {
margin-top: 2em;
width: 50%;
}
.stay_page main section.bbq .frame .box.box01 .pic_wrap {
margin-top: 20rem;
}
.stay_page main section.bbq .frame .box.box01 .pic_wrap .pic {
width: 280rem;
}
.stay_page main section.bbq .frame .box.box01 .desc {
margin-left: 0;
}
.stay_page main section.bbq .frame .box.box02 {
margin-top: 30rem;
margin-left: 15rem;
padding-top: 70rem;
position: relative;
}
.stay_page main section.bbq .frame .box.box02 .pic_wrap .pic {
width: 158rem;
}
.stay_page main section.bbq .frame .box.box02 .desc {
margin-right: 30rem;
}
.stay_page main section.bbq .frame .box.box02 .desc h3 {
position: absolute;
top: -80rem;
width: 290rem;
left: -10rem;
}
.stay_page main section.bbq .frame .box.box02 .desc .price {
position: absolute;
margin-top: 0;
top: -45rem;
left: 180rem;
width: 7.5em;
}
.stay_page main section.bbq .frame .box.box02 .desc .ul_wrap {
display: block;
}
.stay_page main section.bbq .frame .box.box02 .desc .ul_wrap ul {
margin-top: 0;
width: 100%;
}
.stay_page main section.bbq .frame .box.box02 .desc .ul_wrap ul + ul {
margin-top: 0.5em;
}
.stay_page main section.bbq .frame .box.box03 {
margin-top: 50rem;
}
.stay_page main section.bbq .frame .box.box03 .pic_wrap {
margin-left: -20rem;
}
.stay_page main section.bbq .frame .box.box03 .pic_wrap .pic {
width: 158rem;
}
.stay_page main section.bbq .frame .box.box03 .desc {
margin-top: 40rem;
margin-left: 10rem;
width: 144rem;
}
.stay_page main section.bbq .frame .box.box04 {
flex-direction: column;
margin-top: -110rem;
margin-left: 0;
}
.stay_page main section.bbq .frame .box.box04 .pic_wrap .pic {
width: 264.5rem;
}
.stay_page main section.bbq .frame .box.box04 .desc {
margin-top: 0;
margin-right: 0;
}
.stay_page main section.bbq .frame .box.box04 .desc .txt {
line-height: 1.6;
margin-top: 1em;
}
.stay_page main section.bbq .frame .box.box04 .desc .note {
font-size: 11rem;
margin-top: 2em;
}
.stay_page main section.gallery {
padding-top: 40rem;
padding-bottom: 70rem;
}
.stay_page main section.gallery h2 {
margin-left: auto;
margin-right: auto;
width: 335rem;
}
.stay_page main section.gallery .ttl_gallery {
width: auto;
}
.stay_page main section.gallery .ttl_gallery::before {
width: 54rem;
height: 32rem;
left: -70rem;
}
.stay_page main section.gallery .ttl_gallery::after {
width: 84rem;
height: 61rem;
right: -90rem;
}
.stay_page main section.gallery .ttl_gallery .jp {
/*font-size: 19rem;*/
font-size: 24rem;
}
.stay_page main section.gallery .ttl_gallery .en {
/*font-size: 10rem;*/
font-size: 11rem;
margin-top: 1.2em;
}
.stay_page main section.gallery .inner {
width: 335rem;
}
.stay_page main section.gallery .swiper_outer {
margin-top: 0;
}
.stay_page main section.gallery .swiper_outer .swiper-button-next {
right: -15rem;
}
.stay_page main section.gallery .swiper_outer .swiper-button-prev {
left: -15rem;
}
.stay_page main section.guide {
padding-top: 60rem;
}
/*/stay_page*/
/*-------------------------
アクセス／周辺観光（SP）
-------------------------*/
.access_page .inner {
width: 335rem;
}
.access_page .swiper_outer .swiper-container {
overflow: visible;
}
.access_page .swiper_outer .swiper-button-prev {
left: -0.5em;
}
.access_page .swiper_outer .swiper-button-next {
right: -0.5em;
}
.access_page .swiper_outer .swiper-button-prev,
.access_page .swiper_outer .swiper-button-next {
display: block !important;
top: 120rem;
width: 25rem;
height: 26rem;
background-size: 100%;
}
.access_page .swiper_outer .swiper-button-next:after,
.access_page .swiper_outer .swiper-button-prev:after {
display: block !important;
color: #00267F;
font-size: 25rem;
font-weight: bold;
}
.access_page .mv {
margin-top: 90rem;
}
.access_page .mv .ttl_wrap {
margin-left: auto;
margin-right: 0;
border-radius: 30rem 0 0 30rem;
background-image: url(/assets/image/access/bg_mv_sp.jpg);
background-size: cover;
height: 190rem;
width: 335rem;
}
.access_page .mv h1 {
left: -70rem;
bottom: -25rem;
width: 261.5rem;
}
.access_page main {
/*/sec_cnt*/
}
.access_page main .sec_cnt.access {
padding-top: 20rem;
padding-bottom: 90rem;
}
.access_page main .sec_cnt.access .route {
width: 100%;
margin-top: 30rem !important;
margin-left: auto;
margin-right: auto;
}
.access_page main .sec_cnt.access .route h3 {
width: 100%;
}
.access_page main .sec_cnt.access .route.to_sado .tabstyle .tab_wrap .tab_btn {
margin-bottom: 0;
}
.access_page main .sec_cnt.access .ttl_access {
margin-left: auto;
margin-right: auto;
width: 123.5rem;
}
.access_page main .sec_cnt.access .gmap iframe {
margin: 30rem calc(50% - 50vw) 0;
width: 100vw;
height: 325rem;
}
.access_page main .sec_cnt.access .gmap .btn_gmap {
margin-top: -90rem;
text-align: right;
width: 127.5rem;
margin-right: auto;
}
.access_page main .sec_cnt.access .ttl_accessto {
margin-top: 60rem;
margin-left: auto;
margin-right: auto;
width: 310.5rem;
}
.access_page main .sec_cnt.access .ttl_parking {
margin-top: 50rem;
margin-left: auto;
margin-right: auto;
width: 200rem;
}
.access_page main .sec_cnt.access .box_parking {
width: 100%;
}
.access_page main .sec_cnt.access .box_parking h3 {
font-size: 15rem;
height: 40rem;
padding-left: 4rem;
}
.access_page main .sec_cnt.access .box_parking .txt {
font-size: 13rem;
}
.access_page main .sec_cnt .cont {
margin-top: 30rem;
}
.access_page main .sec_cnt .cont .box {
margin-bottom: 50rem;
width: 100%;
}
.access_page main .sec_cnt .cont .box:not(:nth-of-type(4n)) {
margin-right: 0;
}
.access_page main .sec_cnt .cont .box .box_inner .ph {
width: 150rem;
}
.access_page main .sec_cnt .cont .box .box_inner .ph img {
border-radius: 15rem;
}
.access_page main .sec_cnt .cont .box .box_inner .desc h3 {
font-size: 13rem;
}
.access_page main .sec_cnt .cont .box .box_inner .desc .txt {
font-size: 13rem;
line-height: 1.4;
}
.access_page main .sec_cnt .cont .box .box_inner .desc .address {
font-size: 13rem;
}
.access_page main .sec_cnt .cont .box .duration {
font-size: 11rem;
padding: 0.5em 0;
}
.access_page main .sec_cnt.sightseeing {
padding-bottom: 10rem;
/*/cont*/
}
.access_page main .sec_cnt.sightseeing h2 {
margin-left: auto;
margin-right: auto;
width: 124rem;
}
.access_page main .sec_cnt.sightseeing .cont {
/*/box*/
}
.access_page main .sec_cnt.sightseeing .cont .box {
min-height: 175rem;
position: relative;
/*/desc*/
}
.access_page main .sec_cnt.sightseeing .cont .box .box_inner {
display: flex;
justify-content: space-between;
}
.access_page main .sec_cnt.sightseeing .cont .box .box_inner .desc {
width: 175rem;
}
.access_page main .sec_cnt.sightseeing .cont .box .box_inner .desc h3 {
margin-top: 0;
}
.access_page main .sec_cnt.sightseeing .cont .box .duration {
position: absolute;
left: 0;
top: 115rem;
width: 150rem;
}
.access_page main .sec_cnt.sightseeing .cont .box .pin::before {
margin: -1.4em 0.4em 0 0;
}
.access_page main .sec_cnt.activity {
padding-bottom: 40rem;
/*/cont*/
}
.access_page main .sec_cnt.activity h2 {
margin-left: auto;
margin-right: auto;
width: 209.5rem;
}
.access_page main .sec_cnt.activity .cont {
/*/box*/
}
.access_page main .sec_cnt.activity .cont .box {
/*/desc*/
}
.access_page main .sec_cnt.activity .cont .box .box_inner {
display: flex;
justify-content: space-between;
}
.access_page main .sec_cnt.activity .cont .box .box_inner .desc {
width: 175rem;
}
.access_page main .sec_cnt.activity .cont .box .box_inner .desc h3 {
margin-top: 0;
}
.access_page main .sec_cnt.activity .cont .box .btn {
margin-top: 1.5em;
width: 280rem;
}
.access_page main .sec_cnt.activity .btn.link_blank {
margin-top: 0;
}
.access_page main .sec_cnt.shop, .access_page main .sec_cnt.restaurant, .access_page main .sec_cnt.spa {
padding-top: 40rem;
}
.access_page main .sec_cnt.shop .cont, .access_page main .sec_cnt.restaurant .cont, .access_page main .sec_cnt.spa .cont {
/*display: none !important;*/
flex-wrap: nowrap;
}
.access_page main .sec_cnt.shop .cont .box, .access_page main .sec_cnt.restaurant .cont .box, .access_page main .sec_cnt.spa .cont .box {
margin-bottom: 0;
/*/box_inner*/
}
.access_page main .sec_cnt.shop .cont .box .box_inner, .access_page main .sec_cnt.restaurant .cont .box .box_inner, .access_page main .sec_cnt.spa .cont .box .box_inner {
margin-left: auto;
margin-right: auto;
width: 275rem;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc h3, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc h3, .access_page main .sec_cnt.spa .cont .box .box_inner .desc h3 {
border-bottom: 1px solid #C1C1C1;
color: #003147;
font-size: 13rem;
font-weight: bold;
margin-top: 1.3em;
text-align: left;
padding: 0 0 0.5em;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc .txt, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc .txt, .access_page main .sec_cnt.spa .cont .box .box_inner .desc .txt {
font-size: 13rem;
margin-top: 0.6em;
line-height: 1.6;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc .address, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc .address, .access_page main .sec_cnt.spa .cont .box .box_inner .desc .address {
font-size: 11rem;
margin-top: 0.8em;
align-items: flex-start;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc .address .text, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc .address .text, .access_page main .sec_cnt.spa .cont .box .box_inner .desc .address .text {
width: 200rem;
}
.access_page main .sec_cnt.shop .cont .box .box_inner .desc .address .qrcode, .access_page main .sec_cnt.restaurant .cont .box .box_inner .desc .address .qrcode, .access_page main .sec_cnt.spa .cont .box .box_inner .desc .address .qrcode {
width: 100rem;
}
.access_page main .sec_cnt.shop .cont .box .duration, .access_page main .sec_cnt.restaurant .cont .box .duration, .access_page main .sec_cnt.spa .cont .box .duration {
border-top: 1px solid #C1C1C1;
border-bottom: 1px solid #C1C1C1;
color: #858588;
font-size: 11rem;
margin-top: 1em;
margin-left: auto;
margin-right: auto;
padding: 0.8em 0;
width: 275rem;
}
.access_page main .sec_cnt.shop .btn.link_blank, .access_page main .sec_cnt.restaurant .btn.link_blank, .access_page main .sec_cnt.spa .btn.link_blank {
margin-top: 40rem;
}
.access_page main .sec_cnt.shop {
padding-bottom: 60rem;
}
.access_page main .sec_cnt.shop .swiper_outer .swiper-button-prev,
.access_page main .sec_cnt.shop .swiper_outer .swiper-button-next {
top: 80rem;
}
.access_page main .sec_cnt.shop h2 {
margin-left: auto;
margin-right: auto;
width: 124rem;
}
.access_page main .sec_cnt.restaurant {
padding-bottom: 60rem;
}
.access_page main .sec_cnt.restaurant h2 {
margin-left: auto;
margin-right: auto;
width: 186rem;
}
.access_page main .sec_cnt.spa {
margin-top: 0rem;
}
.access_page main .sec_cnt.spa .cont .box .box_inner .desc h3 {
height: auto !important;
}
.access_page main .sec_cnt.spa .cont .box .box_inner .desc h3 a {
line-height: 1.8;
}
.access_page main .sec_cnt.spa .cont .box .box_inner .desc .address .text {
width: 100%;
height: auto !important;
}
.access_page main .sec_cnt.guide {
padding-top: 60rem;
}
/*/access_page*/
/*-------------------------
もろもろ調整（SP）
-------------------------*/
.company_page .lang,
.contact_page .lang,
.top_page .lang {
transform: translateY(-170%);
}
.company_page .lang.active,
.contact_page .lang.active,
.top_page .lang.active {
transform: translateY(0);
}
.company_page .lang.fixed,
.contact_page .lang.fixed,
.top_page .lang.fixed {
transform: translateY(0);
}
.company_page #header,
.contact_page #header,
.top_page #header {
transform: translateY(-100%);
}
.company_page #header.fixed,
.contact_page #header.fixed,
.top_page #header.fixed {
transform: translateY(0);
}
.company_page #to_top,
.contact_page #to_top {
bottom: 10rem;
}
.contact_page .openbtn {
transform: translateY(-150%);
transition: all 0.3s linear;
}
.contact_page .openbtn.fixed {
transform: translateY(0);
}
.contact_page .openbtn.active {
transform: translateY(0);
}
/*-------------------------
多言語調整（SP）
-------------------------*/
.lang_jp #g-nav ul {
/*top: 100rem;*/
top: 130rem;
}
.lang_jp #g-nav .logo_wrap {
/*top: 440rem;*/
top: 460rem;
}
.lang_jp #g-nav .insta_link {
top: 8em;
display: flex;
gap: 0;
}
}
/*-------------------------
アニメーション
-------------------------*/
.fuwafuwa {
animation: fuwafuwa 3s infinite ease-in-out 0.5s alternate;
transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, -10px);
}
100% {
transform: translate(0, 0);
}
}
.fuwafuwa02 {
animation: fuwafuwa02 3.5s infinite ease-in-out 0.5s alternate;
transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa02 {
0% {
transform: translate(0, 0);
}
60% {
transform: translate(0, -15px);
}
100% {
transform: translate(0, 0);
}
}
.FadeIn {
opacity: 0;
}
.FadeIn.on {
animation-name: FadeIn;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes FadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.FadeInUp {
opacity: 0;
}
.FadeInUp.on {
animation-name: FadeInUp;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes FadeInUp {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kv_animation.delay01,
.animation.delay01 {
animation-delay: 0.5s;
}
.kv_animation.delay02,
.animation.delay02 {
animation-delay: 1s;
}
.kv_animation.delay03,
.animation.delay03 {
animation-delay: 1.5s;
}
.kv_animation.delay04,
.animation.delay04 {
animation-delay: 2s;
}
.kv_animation.delay05,
.animation.delay05 {
animation-delay: 2.5s;
}
.kv_animation.delay06,
.animation.delay06 {
animation-delay: 3s;
}
/*-------------------------
アニメーション（おもに下層用）
-------------------------*/
/*フェードイン*/
.fadein {
animation: fade 2s ease 0s 1 both;
opacity: 0;
will-change: opacity;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*スクロールしたらフェードイン*/
.s_fadein {
opacity: 0;
transition: all 0.8s;
}
.s_fadein.effect-scroll {
opacity: 1;
}/*# sourceMappingURL=style.css.map */