@charset "UTF-8";
/* テキストカラー */
/* カラー */
/* 背景 */
/* ボーダーカラー */
/* reset */
*, *::before, *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
input, button, select, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
outline: none;
}
textarea {
resize: vertical;
}
input[type=checkbox], input[type=radio] {
display: none;
}
input[type=submit], input[type=button], label, button, select {
cursor: pointer;
}
select::-ms-expand {
display: none;
}
/* set */
html, body {
width: 100%;
}
html {
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 62.5%;
}
body {
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.875;
font-size: 1.6rem;
color: #333333;
height: 100%;
-webkit-text-size-adjust: 100%;
background: #f9f8f6;
}
*:focus {
outline: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a {
text-decoration: none;
color: inherit;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a img {
-webkit-transition: 0.3s;
transition: 0.3s;
}
li {
list-style-type: none;
}
img {
max-width: 100%;
height: auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
select {
vertical-align: middle;
}
p {
margin-bottom: 30px;
}
p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
p {
margin-bottom: 20px;
}
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
/*
------------------------------------------------------------------------------------------------------------------------
parts
------------------------------------------------------------------------------------------------------------------------
*/
.in890 {
display: none;
}
@media screen and (max-width: 890px) {
.in890 {
display: block;
}
}
.in768 {
display: none;
}
@media screen and (max-width: 768px) {
.in768 {
display: block;
}
}
.in500 {
display: none;
}
@media screen and (max-width: 768px) {
.in500 {
display: block;
}
}
@media screen and (max-width: 890px) {
br.in890 {
display: inline-block;
}
.out891 {
display: none;
}
}
@media screen and (max-width: 768px) {
br.in768 {
display: inline-block;
}
.out769 {
display: none;
}
}
@media screen and (max-width: 500px) {
br.in500 {
display: inline-block;
}
.out501 {
display: none;
}
}
.wrap {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding-right: 30px;
padding-left: 30px;
}
@media screen and (max-width: 768px) {
.wrap {
padding-left: 20px;
padding-right: 20px;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
header
------------------------------------------------------------------------------------------------------------------------
*/
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
color: #fff;
z-index: 20;
/*@include common.mq("wrap") {
.weather {
padding: 20px 0 0 20px;
}
.logo {
right: 52px;
top: 25px;
a {
width: 180px;
height: 116px;
}
}
.nav {
top: 15px;
right: 15px;
}
}*/
}
#header .weather {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 40px 0 0 40px;
}
#header .weather li {
font-family: "Zen Kaku Gothic New", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.3rem;
}
#header .weather li .icon {
margin-right: 7px;
}
#header .weather li span {
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 700;
}
#header .weather li span.b {
font-size: 1.6rem;
}
#header .weather li span.s {
font-size: 1.2rem;
margin-top: 3px;
}
#header .weather li.time {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 16px;
}
#header .weather li.time .icon {
width: 17px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
#header .weather li.time span.b {
margin: 0 4px 0 8px;
}
#header .weather li.temp .icon {
width: 8px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
#header .weather li.temp span.b:nth-child(2) {
margin: 0 2px 0 8px;
}
#header .weather li.temp span.s:nth-child(3) {
margin-right: 6px;
}
#header .weather li.temp span.s:nth-child(5) {
margin-left: 2px;
}
#header .logo {
position: absolute;
left: 0;
right: 0;
top: 48px;
}
#header .logo a {
width: 212px;
height: 137px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
font-size: 0;
margin: 0 auto;
}
#header .nav {
position: fixed;
top: 30px;
right: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
}
#header .nav .lang {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 20px 0 0;
}
#header .nav .lang li {
margin: 0 14px 0 0;
}
#header .nav .lang li a, #header .nav .lang li span {
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
font-size: 1.6rem;
display: block;
}
#header .nav .lang li span {
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #fff;
}
#header .nav .lang li a {
position: relative;
}
#header .nav .lang li a:after {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
#header .nav .lang li a:hover:after {
opacity: 1;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#header .nav .lang li a:hover:after {
opacity: 1;
}
}
#header .nav .lang li:last-child {
margin: 0;
}
#header .nav .booking {
margin: 0 20px 0 0;
}
#header .nav .booking span, #header .nav .booking a {
display: none;
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
height: 40px;
line-height: 40px;
border-radius: 30px;
border: 1px solid #fff;
text-align: center;
font-size: 2rem;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
padding: 0 25px;
}
#header .nav .booking span.off, #header .nav .booking a.off {
display: block;
}
@media (hover: hover) and (pointer: fine) {
#header .nav .booking span:hover, #header .nav .booking a:hover {
border: 1px solid #bc9d63;
background: #bc9d63;
color: #fff;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#header .nav .booking span:hover, #header .nav .booking a:hover {
border: 1px solid #bc9d63;
background: #bc9d63;
color: #fff;
}
}
#header .nav .booking a {
display: block;
}
#header .nav .booking.active span {
background: #fff;
border: 1px solid #fff;
color: #bc9d63;
position: relative;
}
#header .nav .booking.active span:after {
content: "";
position: absolute;
top: 39px;
left: 0;
right: 0;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 4px;
height: 4px;
border: 6px solid transparent;
border-left: 6px solid #fff;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
#header .nav .booking.active span.off {
display: none;
}
#header .nav .booking.active span.on {
display: block;
}
@media (hover: hover) and (pointer: fine) {
#header .nav .booking.active span:hover {
background: #bc9d63;
border-color: #bc9d63;
color: #fff;
}
#header .nav .booking.active span:hover:after {
border-left-color: #bc9d63;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#header .nav .booking.active span:hover {
background: #bc9d63;
border-color: #bc9d63;
color: #fff;
}
#header .nav .booking.active span:hover:after {
border-left-color: #bc9d63;
}
}
#header .nav .menu {
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#header .nav .menu span {
width: 23.5px;
height: 1px;
background: #333333;
display: block;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#header .nav .menu span:first-child {
top: 25px;
}
#header .nav .menu span:nth-child(2) {
top: 33px;
}
#header .nav .menu:after {
content: "Menu";
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
color: #333333;
position: absolute;
left: 0;
right: 0;
top: 34px;
text-align: center;
font-size: 1.4rem;
}
#header .nav .menu.active span:first-child {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
top: 29px;
}
#header .nav .menu.active span:nth-child(2) {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
top: 29px;
}
#header .nav .menu.active:after {
content: "Close";
}
@media (hover: hover) and (pointer: fine) {
#header .nav .menu:hover {
background: #b3b0b0;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#header .nav .menu:hover {
background: #b3b0b0;
}
}
#header.scroll, #header.color {
color: #bc9d63;
}
#header.scroll .weather li.time .icon, #header.color .weather li.time .icon {
width: 17px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
#header.scroll .weather li.temp .icon, #header.color .weather li.temp .icon {
width: 8px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
#header.scroll .logo a, #header.color .logo a {
width: 212px;
height: 137px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
#header.scroll .nav .booking span, #header.scroll .nav .booking a, #header.color .nav .booking span, #header.color .nav .booking a {
border-color: #bc9d63;
}
#header.scroll .nav .booking.active span, #header.scroll .nav .booking.active a, #header.color .nav .booking.active span, #header.color .nav .booking.active a {
border-color: #fff;
}
@media (hover: hover) and (pointer: fine) {
#header.scroll .nav .booking.active span:hover, #header.scroll .nav .booking.active a:hover, #header.color .nav .booking.active span:hover, #header.color .nav .booking.active a:hover {
border-color: #bc9d63;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#header.scroll .nav .booking.active span:hover, #header.scroll .nav .booking.active a:hover, #header.color .nav .booking.active span:hover, #header.color .nav .booking.active a:hover {
border-color: #bc9d63;
}
}
#header.scroll .nav .lang li span, #header.color .nav .lang li span {
border-color: #bc9d63;
}
#header.scroll .nav .menu, #header.color .nav .menu {
background: #bc9d63;
}
#header.scroll .nav .menu span, #header.color .nav .menu span {
background: #fff;
}
#header.scroll .nav .menu:after, #header.color .nav .menu:after {
color: #fff;
}
@media screen and (max-width: 1140px) {
#header .weather {
display: none;
}
#header .logo {
top: 30px;
right: 0;
}
#header .logo a {
width: 150px;
height: 109px;
}
#header .nav {
position: static;
}
#header .nav .lang {
position: fixed;
left: 15px;
top: 20px;
display: none;
}
#header .nav .lang li a, #header .nav .lang li span {
font-size: 1.3rem;
}
#header .nav .lang li span {
width: 35px;
height: 35px;
}
#header .nav .booking {
position: fixed;
bottom: 0;
margin: 0;
width: 50%;
}
#header .nav .booking span, #header .nav .booking a {
width: 100%;
height: 70px;
line-height: 70px;
background: #4b4343;
border: none;
border-radius: 0;
color: #fff !important;
}
#header .nav .booking.first {
left: 0;
border-right: 1px solid #fff;
}
#header .nav .booking.secound {
right: 0;
}
#header .nav .booking.active span {
color: #bc9d63 !important;
}
#header .nav .booking.active span:after {
top: -11px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
@media screen and (max-width: 1140px) and (hover: hover) and (pointer: fine) {
#header .nav .booking.active span:hover {
color: #fff !important;
}
}
@media screen and (max-width: 1140px) and (-ms-high-contrast: none), screen and (max-width: 1140px) and (-ms-high-contrast: active) {
#header .nav .booking.active span:hover {
color: #fff !important;
}
}
@media screen and (max-width: 1140px) {
#header .nav .menu {
position: fixed;
top: 10px;
right: 10px;
width: 60px;
height: 60px;
}
#header .nav .menu span:first-child {
top: 20px;
}
#header .nav .menu span:nth-child(2) {
top: 28px;
}
#header .nav .menu:after {
font-size: 1.2rem;
top: 29px;
}
#header .nav .menu.active span:first-child {
top: 24px;
}
#header .nav .menu.active span:nth-child(2) {
top: 24px;
}
#header.color .logo a {
width: 170px;
height: 109px;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
ハンバーガーメニュー内
------------------------------------------------------------------------------------------------------------------------
*/
.fix_nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(52, 43, 43, 0.9);
z-index: 20;
overflow: auto;
display: none;
/*@include common.mq("wrap") {
.inner {
.wrap {
.top {
.weather {
padding: 20px 0 0 20px;
}
}
.logo {
right: 52px;
top: 25px;
a {
width: 180px;
height: 116px;
}
}
.nav {
top: 15px;
right: 15px;
}
}
}
}*/
}
.fix_nav .inner {
overflow: hidden;
background: #4b4343;
padding: 245px 0 90px;
color: #fff;
border-radius: 0 0 50px 0;
margin-bottom: 30px;
}
.fix_nav .inner .wrap {
max-width: 1156px;
}
.fix_nav .inner .wrap .top .weather {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 40px 0 0 40px;
position: absolute;
top: 0;
left: 0;
}
.fix_nav .inner .wrap .top .weather li {
font-family: "Zen Kaku Gothic New", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.3rem;
}
.fix_nav .inner .wrap .top .weather li .icon {
margin-right: 7px;
}
.fix_nav .inner .wrap .top .weather li span {
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 700;
}
.fix_nav .inner .wrap .top .weather li span.b {
font-size: 1.6rem;
}
.fix_nav .inner .wrap .top .weather li span.s {
font-size: 1.2rem;
margin-top: 3px;
}
.fix_nav .inner .wrap .top .weather li.time {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 16px;
}
.fix_nav .inner .wrap .top .weather li.time .icon {
width: 17px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
.fix_nav .inner .wrap .top .weather li.time span.b {
margin: 0 4px 0 8px;
}
.fix_nav .inner .wrap .top .weather li.temp .icon {
width: 8px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
.fix_nav .inner .wrap .top .weather li.temp span.b:nth-child(2) {
margin: 0 2px 0 8px;
}
.fix_nav .inner .wrap .top .weather li.temp span.s:nth-child(3) {
margin-right: 6px;
}
.fix_nav .inner .wrap .top .weather li.temp span.s:nth-child(5) {
margin-left: 2px;
}
.fix_nav .inner .wrap .logo {
position: absolute;
left: 0;
right: 0;
top: 48px;
}
.fix_nav .inner .wrap .logo a {
width: 212px;
height: 137px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
font-size: 0;
margin: 0 auto;
}
.fix_nav .inner .wrap .nav {
position: absolute;
top: 30px;
right: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
}
.fix_nav .inner .wrap .nav .lang {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 20px 0 0;
}
.fix_nav .inner .wrap .nav .lang li {
margin: 0 14px 0 0;
}
.fix_nav .inner .wrap .nav .lang li a, .fix_nav .inner .wrap .nav .lang li span {
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
font-size: 1.6rem;
display: block;
}
.fix_nav .inner .wrap .nav .lang li span {
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #fff;
}
.fix_nav .inner .wrap .nav .lang li a {
position: relative;
}
.fix_nav .inner .wrap .nav .lang li a:after {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.fix_nav .inner .wrap .nav .lang li a:hover:after {
opacity: 1;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_nav .inner .wrap .nav .lang li a:hover:after {
opacity: 1;
}
}
.fix_nav .inner .wrap .nav .lang li:last-child {
margin: 0;
}
.fix_nav .inner .wrap .nav .booking {
margin: 0 20px 0 0;
}
.fix_nav .inner .wrap .nav .booking span, .fix_nav .inner .wrap .nav .booking a {
display: none;
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
height: 40px;
line-height: 40px;
border-radius: 30px;
border: 1px solid #fff;
text-align: center;
font-size: 2rem;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
padding: 0 25px;
}
.fix_nav .inner .wrap .nav .booking span.off, .fix_nav .inner .wrap .nav .booking a.off {
display: block;
}
@media (hover: hover) and (pointer: fine) {
.fix_nav .inner .wrap .nav .booking span:hover, .fix_nav .inner .wrap .nav .booking a:hover {
border: 1px solid #bc9d63;
background: #bc9d63;
color: #fff;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_nav .inner .wrap .nav .booking span:hover, .fix_nav .inner .wrap .nav .booking a:hover {
border: 1px solid #bc9d63;
background: #bc9d63;
color: #fff;
}
}
.fix_nav .inner .wrap .nav .booking a {
display: block;
}
.fix_nav .inner .wrap .nav .booking.active span {
background: #fff;
border: 1px solid #fff;
color: #bc9d63;
position: relative;
}
.fix_nav .inner .wrap .nav .booking.active span:after {
content: "";
position: absolute;
top: 39px;
left: 0;
right: 0;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 4px;
height: 4px;
border: 6px solid transparent;
border-left: 6px solid #fff;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.fix_nav .inner .wrap .nav .booking.active span.off {
display: none;
}
.fix_nav .inner .wrap .nav .booking.active span.on {
display: block;
}
@media (hover: hover) and (pointer: fine) {
.fix_nav .inner .wrap .nav .booking.active span:hover {
background: #bc9d63;
border-color: #bc9d63;
color: #fff;
}
.fix_nav .inner .wrap .nav .booking.active span:hover:after {
border-left-color: #bc9d63;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_nav .inner .wrap .nav .booking.active span:hover {
background: #bc9d63;
border-color: #bc9d63;
color: #fff;
}
.fix_nav .inner .wrap .nav .booking.active span:hover:after {
border-left-color: #bc9d63;
}
}
.fix_nav .inner .wrap .nav .menu {
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.fix_nav .inner .wrap .nav .menu span {
width: 23.5px;
height: 1px;
background: #333333;
display: block;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.fix_nav .inner .wrap .nav .menu span:first-child {
top: 29px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.fix_nav .inner .wrap .nav .menu span:nth-child(2) {
top: 29px;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.fix_nav .inner .wrap .nav .menu:after {
content: "Close";
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
color: #333333;
position: absolute;
left: 0;
right: 0;
top: 34px;
text-align: center;
font-size: 1.4rem;
}
.fix_nav .inner .wrap .nav .menu.active span:first-child {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
top: 29px;
}
.fix_nav .inner .wrap .nav .menu.active span:nth-child(2) {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
top: 29px;
}
.fix_nav .inner .wrap .nav .menu.active:after {
content: "Close";
}
@media (hover: hover) and (pointer: fine) {
.fix_nav .inner .wrap .nav .menu:hover {
background: #b3b0b0;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_nav .inner .wrap .nav .menu:hover {
background: #b3b0b0;
}
}
.fix_nav .inner .wrap .sitemap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 30px;
}
.fix_nav .inner .wrap .sitemap ul {
margin: 0 40px 0 0;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml {
margin-bottom: 5px;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a {
display: inline-block;
font-size: 2rem;
font-weight: 700;
position: relative;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a:before {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 17px;
left: -20px;
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a.active:before {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
.fix_nav .inner .wrap .sitemap ul.main li.ml a:hover:before {
opacity: 1;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_nav .inner .wrap .sitemap ul.main li.ml a:hover:before {
opacity: 1;
}
}
.fix_nav .inner .wrap .sitemap ul.main li.ml:last-child {
margin-bottom: 0;
}
.fix_nav .inner .wrap .sitemap ul.main li ul {
margin-bottom: 20px;
}
.fix_nav .inner .wrap .sitemap ul.main li ul li a {
font-size: 1.6rem;
color: #b3b0b0;
}
@media (hover: hover) and (pointer: fine) {
.fix_nav .inner .wrap .sitemap ul.main li ul li a:hover {
text-decoration: underline;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_nav .inner .wrap .sitemap ul.main li ul li a:hover {
text-decoration: underline;
}
}
.fix_nav .inner .wrap .sitemap ul.sub {
padding: 0 0 0 38px;
position: relative;
}
.fix_nav .inner .wrap .sitemap ul.sub:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 225px;
background: #3d3838;
display: block;
}
.fix_nav .inner .wrap .sitemap ul.sub li a {
color: #b3b0b0;
}
@media (hover: hover) and (pointer: fine) {
.fix_nav .inner .wrap .sitemap ul.sub li a:hover {
text-decoration: underline;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_nav .inner .wrap .sitemap ul.sub li a:hover {
text-decoration: underline;
}
}
.fix_nav .inner .wrap .sitemap ul:last-child {
margin: 0;
}
.fix_nav .inner .wrap .sns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.fix_nav .inner .wrap .sns li {
margin: 0 24px 0 0;
}
.fix_nav .inner .wrap .sns li a {
display: block;
line-height: 0;
}
.fix_nav .inner .wrap .sns li:last-child {
margin: 0;
}
@media screen and (max-width: 1140px) {
.fix_nav .inner {
padding: 180px 0 45px;
margin-bottom: 100px;
}
.fix_nav .inner .wrap .top .weather {
display: none;
}
.fix_nav .inner .wrap .logo {
top: 30px;
right: 0;
}
.fix_nav .inner .wrap .logo a {
width: 170px;
height: 109px;
}
.fix_nav .inner .wrap .nav {
position: static;
}
.fix_nav .inner .wrap .nav .lang {
position: absolute;
left: 15px;
top: 20px;
}
.fix_nav .inner .wrap .nav .lang li a, .fix_nav .inner .wrap .nav .lang li span {
font-size: 1.3rem;
}
.fix_nav .inner .wrap .nav .lang li span {
width: 35px;
height: 35px;
}
.fix_nav .inner .wrap .nav .booking {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
z-index: 2;
}
.fix_nav .inner .wrap .nav .booking span, .fix_nav .inner .wrap .nav .booking a {
width: 100%;
height: 70px;
line-height: 70px;
background: #4b4343;
border: none;
border-radius: 0;
color: #fff !important;
}
.fix_nav .inner .wrap .nav .booking.active span {
color: #bc9d63 !important;
}
.fix_nav .inner .wrap .nav .booking.active span:after {
top: -11px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
@media screen and (max-width: 1140px) and (hover: hover) and (pointer: fine) {
.fix_nav .inner .wrap .nav .booking.active span:hover {
color: #fff !important;
}
}
@media screen and (max-width: 1140px) and (-ms-high-contrast: none), screen and (max-width: 1140px) and (-ms-high-contrast: active) {
.fix_nav .inner .wrap .nav .booking.active span:hover {
color: #fff !important;
}
}
@media screen and (max-width: 1140px) {
.fix_nav .inner .wrap .nav .booking.active a {
background: #fff;
color: #4b4343 !important;
}
.fix_nav .inner .wrap .nav .menu {
position: fixed;
top: 10px;
right: 10px;
width: 60px;
height: 60px;
}
.fix_nav .inner .wrap .nav .menu span:first-child {
top: 24px;
}
.fix_nav .inner .wrap .nav .menu span:nth-child(2) {
top: 24px;
}
.fix_nav .inner .wrap .nav .menu:after {
font-size: 1.2rem;
top: 29px;
}
.fix_nav .inner .wrap .sitemap {
display: block;
}
.fix_nav .inner .wrap .sitemap ul {
margin-right: 0;
}
.fix_nav .inner .wrap .sitemap ul.main {
margin-bottom: 10px;
}
.fix_nav .inner .wrap .sitemap ul.main li {
margin-bottom: 10px;
margin-right: 0;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml {
margin-bottom: 12px;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a {
font-size: 1.7rem;
line-height: 1.65;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a:before {
width: 4px;
height: 4px;
top: 16px;
left: -12px;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a.click {
display: block;
width: 100%;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a.click span {
display: block;
position: relative;
cursor: pointer;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a.click span:before, .fix_nav .inner .wrap .sitemap ul.main li.ml a.click span:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: #fff;
margin: auto 0;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a.click span:before {
width: 12px;
height: 1px;
right: 0;
}
.fix_nav .inner .wrap .sitemap ul.main li.ml a.click span:after {
width: 1px;
height: 12px;
right: 6px;
}
.fix_nav .inner .wrap .sitemap ul.main li.sl ul {
display: none;
}
.fix_nav .inner .wrap .sitemap ul.sub {
padding: 0;
margin: 0;
}
.fix_nav .inner .wrap .sitemap ul.sub:before {
display: none;
}
.fix_nav .inner .wrap .sns {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 0 0 30px;
margin: 0 0 30px;
position: relative;
}
.fix_nav .inner .wrap .sns:after {
content: "";
width: 100vw;
height: 1px;
background: #3d3838;
position: absolute;
bottom: 0;
left: -20px;
right: -20px;
}
.fix_nav .inner .wrap .weather li {
font-family: "Zen Kaku Gothic New", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.3rem;
}
.fix_nav .inner .wrap .weather li .icon {
margin-right: 7px;
}
.fix_nav .inner .wrap .weather li span {
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 700;
}
.fix_nav .inner .wrap .weather li span.b {
font-size: 1.6rem;
}
.fix_nav .inner .wrap .weather li span.s {
font-size: 1.2rem;
margin-top: 3px;
}
.fix_nav .inner .wrap .weather li.time {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 16px;
}
.fix_nav .inner .wrap .weather li.time .icon {
width: 17px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
.fix_nav .inner .wrap .weather li.time span.b {
margin: 0 4px 0 8px;
}
.fix_nav .inner .wrap .weather li.temp .icon {
width: 8px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
.fix_nav .inner .wrap .weather li.temp span.b:nth-child(2) {
margin: 0 2px 0 8px;
}
.fix_nav .inner .wrap .weather li.temp span.s:nth-child(3) {
margin-right: 6px;
}
.fix_nav .inner .wrap .weather li.temp span.s:nth-child(5) {
margin-left: 2px;
}
}
@media screen and (max-width: 768px) {
.fix_nav .inner .wrap {
padding: 0 30px;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
fix 予約モジュール
------------------------------------------------------------------------------------------------------------------------
*/
.ui-widget {
font-family: "Zen Old Mincho", serif !important;
}
.fix_rsv {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(128, 113, 93, 0.9);
z-index: 20;
overflow: auto;
display: none;
}
.fix_rsv .inner {
background: #928169;
padding: 245px 0 90px;
color: #fff;
border-radius: 0 0 0 50px;
margin-bottom: 30px;
}
.fix_rsv .inner .top .weather {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 40px 0 0 40px;
position: absolute;
top: 0;
left: 0;
}
.fix_rsv .inner .top .weather li {
font-family: "Zen Kaku Gothic New", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.3rem;
}
.fix_rsv .inner .top .weather li .icon {
margin-right: 7px;
}
.fix_rsv .inner .top .weather li span {
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 700;
}
.fix_rsv .inner .top .weather li span.b {
font-size: 1.6rem;
}
.fix_rsv .inner .top .weather li span.s {
font-size: 1.2rem;
margin-top: 3px;
}
.fix_rsv .inner .top .weather li.time {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 16px;
}
.fix_rsv .inner .top .weather li.time .icon {
width: 17px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
.fix_rsv .inner .top .weather li.time span.b {
margin: 0 4px 0 8px;
}
.fix_rsv .inner .top .weather li.temp .icon {
width: 8px;
height: 17px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
}
.fix_rsv .inner .top .weather li.temp span.b:nth-child(2) {
margin: 0 2px 0 8px;
}
.fix_rsv .inner .top .weather li.temp span.s:nth-child(3) {
margin-right: 6px;
}
.fix_rsv .inner .top .weather li.temp span.s:nth-child(5) {
margin-left: 2px;
}
.fix_rsv .inner .logo {
position: absolute;
left: 0;
right: 0;
top: 48px;
}
.fix_rsv .inner .logo a {
width: 212px;
height: 137px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
font-size: 0;
margin: 0 auto;
}
.fix_rsv .inner .nav {
position: absolute;
top: 30px;
right: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
}
.fix_rsv .inner .nav .lang {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 20px 0 0;
}
.fix_rsv .inner .nav .lang li {
margin: 0 14px 0 0;
}
.fix_rsv .inner .nav .lang li a, .fix_rsv .inner .nav .lang li span {
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
font-size: 1.6rem;
display: block;
}
.fix_rsv .inner .nav .lang li span {
width: 40px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #fff;
}
.fix_rsv .inner .nav .lang li a {
position: relative;
}
.fix_rsv .inner .nav .lang li a:after {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.fix_rsv .inner .nav .lang li a:hover:after {
opacity: 1;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_rsv .inner .nav .lang li a:hover:after {
opacity: 1;
}
}
.fix_rsv .inner .nav .lang li:last-child {
margin: 0;
}
.fix_rsv .inner .nav .booking {
margin: 0 20px 0 0;
}
.fix_rsv .inner .nav .booking span, .fix_rsv .inner .nav .booking a {
display: none;
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
width: 200px;
height: 40px;
line-height: 40px;
border-radius: 30px;
text-align: center;
font-size: 2rem;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
background: #fff;
border: 1px solid #fff;
color: #bc9d63;
position: relative;
}
.fix_rsv .inner .nav .booking span:after, .fix_rsv .inner .nav .booking a:after {
content: "";
position: absolute;
top: 39px;
left: 0;
right: 0;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 4px;
height: 4px;
border: 6px solid transparent;
border-left: 6px solid #fff;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.fix_rsv .inner .nav .booking span.off, .fix_rsv .inner .nav .booking a.off {
display: none;
}
.fix_rsv .inner .nav .booking span.on, .fix_rsv .inner .nav .booking a.on {
display: block;
}
@media (hover: hover) and (pointer: fine) {
.fix_rsv .inner .nav .booking span:hover, .fix_rsv .inner .nav .booking a:hover {
border: 1px solid #bc9d63;
background: #bc9d63;
color: #fff;
}
.fix_rsv .inner .nav .booking span:hover:after, .fix_rsv .inner .nav .booking a:hover:after {
border-left-color: #bc9d63;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_rsv .inner .nav .booking span:hover, .fix_rsv .inner .nav .booking a:hover {
border: 1px solid #bc9d63;
background: #bc9d63;
color: #fff;
}
.fix_rsv .inner .nav .booking span:hover:after, .fix_rsv .inner .nav .booking a:hover:after {
border-left-color: #bc9d63;
}
}
.fix_rsv .inner .nav .booking a {
display: block;
}
.fix_rsv .inner .nav .booking.active span {
background: #fff;
border: 1px solid #fff;
color: #bc9d63;
position: relative;
}
.fix_rsv .inner .nav .booking.active span:after {
content: "";
position: absolute;
top: 39px;
left: 0;
right: 0;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 4px;
height: 4px;
border: 6px solid transparent;
border-left: 6px solid #fff;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.fix_rsv .inner .nav .booking.active span.off {
display: none;
}
.fix_rsv .inner .nav .booking.active span.on {
display: block;
}
@media (hover: hover) and (pointer: fine) {
.fix_rsv .inner .nav .booking.active span:hover {
background: #bc9d63;
border-color: #bc9d63;
color: #fff;
}
.fix_rsv .inner .nav .booking.active span:hover:after {
border-left-color: #bc9d63;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_rsv .inner .nav .booking.active span:hover {
background: #bc9d63;
border-color: #bc9d63;
color: #fff;
}
.fix_rsv .inner .nav .booking.active span:hover:after {
border-left-color: #bc9d63;
}
}
.fix_rsv .inner .nav .menu {
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.fix_rsv .inner .nav .menu span {
width: 23.5px;
height: 1px;
background: #333333;
display: block;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.fix_rsv .inner .nav .menu span:first-child {
top: 25px;
}
.fix_rsv .inner .nav .menu span:nth-child(2) {
top: 33px;
}
.fix_rsv .inner .nav .menu:after {
content: "Menu";
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
color: #333333;
position: absolute;
left: 0;
right: 0;
top: 34px;
text-align: center;
font-size: 1.4rem;
}
.fix_rsv .inner .nav .menu.active span:first-child {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
top: 29px;
}
.fix_rsv .inner .nav .menu.active span:nth-child(2) {
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
top: 29px;
}
.fix_rsv .inner .nav .menu.active:after {
content: "Close";
}
@media (hover: hover) and (pointer: fine) {
.fix_rsv .inner .nav .menu:hover {
background: #b3b0b0;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_rsv .inner .nav .menu:hover {
background: #b3b0b0;
}
}
.fix_rsv .inner .calendar {
border-bottom: 1px solid #837156;
padding-bottom: 35px;
margin-bottom: 45px;
}
.fix_rsv .inner #calendar {
position: relative;
z-index: 2;
color: #fff;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.875;
}
@media screen and (max-width: 768px) {
.fix_rsv .inner #calendar {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 30px;
}
}
.fix_rsv .inner #calendar .ui-widget.ui-widget-content {
width: 100% !important;
margin: 0 auto;
background: none;
border: none;
padding: 0 65px;
}
@media screen and (max-width: 890px) {
.fix_rsv .inner #calendar .ui-widget.ui-widget-content {
padding: 0 35px;
}
}
.fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-header {
background: none;
border: none;
position: static;
font-size: 2rem;
margin-bottom: 10px;
color: #fff;
}
.fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-prev, .fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-next {
border: none;
width: 17px;
height: 31px;
padding: 0;
margin: 0;
top: 35.5px;
bottom: 50px;
margin: auto 0;
}
.fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-prev span, .fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-next span {
display: none;
}
@media screen and (max-width: 768px) {
.fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-prev, .fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-next {
width: 17px;
height: 25px;
top: 100px;
}
}
.fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-prev {
background: url("../img/common/cl_prev.png") no-repeat;
background-position: center;
background-size: 17px;
left: 0;
}
@media screen and (max-width: 768px) {
.fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-prev {
background-size: 12px;
}
}
.fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-next {
background: url("../img/common/cl_next.png") no-repeat;
background-position: center;
background-size: 17px;
right: 0;
}
@media screen and (max-width: 768px) {
.fix_rsv .inner #calendar .ui-datepicker .ui-datepicker-next {
background-size: 12px;
}
}
.fix_rsv .inner #calendar th span {
width: 24px;
height: 24px;
display: block;
line-height: 21px;
margin: 0 auto;
color: #fff;
font-size: 16px;
}
.fix_rsv .inner #calendar .ui-datepicker-week-end span {
border-radius: 50%;
}
.fix_rsv .inner #calendar .ui-datepicker-week-end:first-child span {
background: #fff;
color: #928169;
}
.fix_rsv .inner #calendar .ui-datepicker-week-end:last-child span {
border: 1px solid #fff;
}
.fix_rsv .inner #calendar td {
padding: 2px;
}
.fix_rsv .inner #calendar td a {
border: 0;
text-align: center;
background: none;
width: 24px;
height: 24px;
display: block;
line-height: 22px;
border-radius: 50%;
padding: 0;
margin: 0 auto;
font-weight: 600;
color: #fff;
font-size: 16px;
}
@media (hover: hover) and (pointer: fine) {
.fix_rsv .inner #calendar td a:hover {
background: #fff;
color: #928169;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_rsv .inner #calendar td a:hover {
background: #fff;
color: #928169;
}
}
.fix_rsv .inner #calendar td.ui-datepicker-current-day a {
background: #fff;
color: #928169;
}
.fix_rsv .inner .module .container {
/*max-width: 890px;*/
margin: 0 auto;
line-height: 0;
position: relative;
}
.fix_rsv .inner .module .container .top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
margin-bottom: 20px;
}
.fix_rsv .inner .module .container .top:after {
content: "";
position: absolute;
bottom: 0;
right: 20px;
left: 0;
width: calc(100% - 25px);
height: 1px;
background: #fff;
}
.fix_rsv .inner .module .container .top .checkin {
position: relative;
}
.fix_rsv .inner .module .container .top .checkin:before {
content: "";
width: 16px;
height: 20px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
bottom: 9px;
left: 0;
pointer-events: none;
}
.fix_rsv .inner .module .container .top .checkin .arrival {
background: #928169;
color: #fff;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.875;
padding: 5px 10px 5px 30px;
width: 200px;
display: block;
margin: 0 10px 0 0;
font-size: 1.6rem;
}
.fix_rsv .inner .module .container .top .selectbox {
line-height: 1.5;
margin: 0 10px 0 0;
position: relative;
max-width: 142px;
width: 100%;
}
.fix_rsv .inner .module .container .top .selectbox:before {
content: "";
width: 16px;
height: 16px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
bottom: 11px;
left: 0;
pointer-events: none;
}
.fix_rsv .inner .module .container .top .selectbox select {
background: #928169;
color: #fff;
padding: 5px 10px 5px 25px;
font-size: 1.6rem;
height: 100%;
display: block;
}
.fix_rsv .inner .module .container .top .selectbox select option {
color: #333333;
}
.fix_rsv .inner .module .container .bottom {
border-bottom: 1px solid #fff;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 25px;
}
.fix_rsv .inner .module .container .bottom input {
width: calc((100% - 30px) / 3);
font-size: 1.7rem;
padding: 5px 0;
color: #fff;
}
.fix_rsv .inner .module .container .bottom input:placeholder {
color: #fff;
opacity: 1;
}
.fix_rsv .inner .module .container #bookSubmit {
position: absolute;
top: 0;
right: 0;
font-size: 1.7rem;
width: 220px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
border-radius: 30px;
text-align: center;
display: block;
}
.fix_rsv .inner .module .container .linklist {
line-height: 1.5;
font-size: 1.3rem;
font-family: "Zen Kaku Gothic New", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.fix_rsv .inner .module .container .linklist li {
margin: 0 22px 0 0;
}
.fix_rsv .inner .module .container .linklist li a {
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.fix_rsv .inner .module .container .linklist li a:hover {
text-decoration: none;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fix_rsv .inner .module .container .linklist li a:hover {
text-decoration: none;
}
}
.fix_rsv .inner .module .container .linklist li:last-child {
margin: 0;
}
@media screen and (max-width: 1060px) {
.fix_rsv .inner .module .container .top:after {
width: 100%;
}
.fix_rsv .inner .module .container #bookSubmit {
position: static;
margin: 0 auto 30px;
}
}
@media screen and (max-width: 1140px) {
.fix_rsv .inner {
padding: 210px 0 90px;
}
.fix_rsv .inner .top .weather {
padding: 20px 0 0 20px;
}
.fix_rsv .inner .logo {
right: 52px;
top: 25px;
}
.fix_rsv .inner .logo a {
width: 180px;
height: 116px;
}
.fix_rsv .inner .nav {
top: 15px;
right: 15px;
}
}
@media screen and (max-width: 890px) {
.fix_rsv .inner {
padding: 180px 0 90px;
}
.fix_rsv .inner .top .weather {
display: none;
}
.fix_rsv .inner .logo {
top: 30px;
right: 0;
}
.fix_rsv .inner .logo a {
width: 170px;
height: 109px;
}
.fix_rsv .inner .nav {
position: static;
}
.fix_rsv .inner .nav .lang {
position: absolute;
left: 15px;
top: 20px;
}
.fix_rsv .inner .nav .lang li a, .fix_rsv .inner .nav .lang li span {
font-size: 1.3rem;
}
.fix_rsv .inner .nav .lang li span {
width: 35px;
height: 35px;
}
.fix_rsv .inner .nav .booking {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
z-index: 200;
}
.fix_rsv .inner .nav .booking span, .fix_rsv .inner .nav .booking a {
width: 100%;
height: 70px;
line-height: 70px;
background: #4b4343;
border: none;
border-radius: 0;
color: #fff !important;
}
.fix_rsv .inner .nav .booking span:after, .fix_rsv .inner .nav .booking a:after {
display: none;
}
.fix_rsv .inner .nav .booking.active span {
color: #bc9d63 !important;
}
.fix_rsv .inner .nav .booking.active span:after {
top: -11px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
@media screen and (max-width: 890px) and (hover: hover) and (pointer: fine) {
.fix_rsv .inner .nav .booking.active span:hover {
color: #fff !important;
}
}
@media screen and (max-width: 890px) and (-ms-high-contrast: none), screen and (max-width: 890px) and (-ms-high-contrast: active) {
.fix_rsv .inner .nav .booking.active span:hover {
color: #fff !important;
}
}
@media screen and (max-width: 890px) {
.fix_rsv .inner .nav .menu {
position: fixed;
top: 10px;
right: 10px;
width: 60px;
height: 60px;
}
.fix_rsv .inner .nav .menu span:first-child {
top: 20px;
}
.fix_rsv .inner .nav .menu span:nth-child(2) {
top: 28px;
}
.fix_rsv .inner .nav .menu:after {
font-size: 1.2rem;
top: 29px;
}
}
@media screen and (max-width: 834px) {
.fix_rsv .inner #calendar {
max-width: 450px;
margin: 0 auto;
}
.fix_rsv .inner #calendar .ui-widget.ui-widget-content {
max-width: 400px;
}
}
@media screen and (max-width: 660px) {
.fix_rsv .inner .module .container .top {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.fix_rsv .inner .module .container .top .checkin {
width: 100%;
border-bottom: 1px solid #fff;
margin-bottom: 10px;
}
.fix_rsv .inner .module .container .top .selectbox {
width: 50%;
max-width: none;
margin: 0;
}
.fix_rsv .inner .module .container .top .selectbox:before {
bottom: 8px;
}
.fix_rsv .inner .module .container .top .selectbox:nth-child(2), .fix_rsv .inner .module .container .top .selectbox:nth-child(3) {
border-bottom: 1px solid #fff;
margin-bottom: 10px;
}
.fix_rsv .inner .module .container .linklist {
display: block;
}
}
@media screen and (min-width: 769px) {
.fix_rsv select,
.fix_rsv ::picker(select) {
-webkit-appearance: base-select;
-moz-appearance: base-select;
appearance: base-select;
}
.fix_rsv ::picker(select) {
color: #333333;
border: none;
}
}
input::-webkit-input-placeholder {
color: #fff;
}
input:-moz-placeholder {
color: #fff;
}
input::-moz-placeholder {
color: #fff;
}
input:-ms-input-placeholder {
color: #fff;
}
@media screen and (max-width: 768px) {
#top .main .txt #form .container .bottom input::-webkit-input-placeholder,
.fix_rsv .inner .module .container .bottom input::-webkit-input-placeholder {
font-size: 0.9rem;
}
#top .main .txt #form .container .bottom input:-moz-placeholder,
.fix_rsv .inner .module .container .bottom input:-moz-placeholder {
font-size: 0.9rem;
}
#top .main .txt #form .container .bottom input::-moz-placeholder,
.fix_rsv .inner .module .container .bottom input::-moz-placeholder {
font-size: 0.9rem;
}
#top .main .txt #form .container .bottom input:-ms-input-placeholder,
.fix_rsv .inner .module .container .bottom input:-ms-input-placeholder {
font-size: 0.9rem;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
footer
------------------------------------------------------------------------------------------------------------------------
*/
#footer {
background: url(../img/common/foot_bg_pc.webp) no-repeat;
background-size: cover;
background-position: center;
color: #fff;
}
#footer .wrap {
position: relative;
}
#footer .wrap .us {
padding: 74px 0 60px;
}
#footer .wrap .us .logo {
text-align: center;
margin: 0 0 50px;
}
#footer .wrap .us .logo a {
display: inline-block;
line-height: 0;
}
#footer .wrap .us .logo a img {
max-width: 820.5px;
width: 100%;
}
#footer .wrap .us ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
#footer .wrap .us ul li {
margin: 0 30px;
font-family: "Zen Kaku Gothic New", serif;
font-weight: 400;
line-height: 1.875;
}
#footer .wrap .us ul li .ttl {
font-size: 1.9rem;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 700;
margin-bottom: 10px;
}
#footer .wrap h1 {
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
font-weight: 400;
text-align: center;
font-family: "Zen Kaku Gothic New", serif;
font-weight: 400;
line-height: 1.875;
font-size: 1.5rem;
padding: 20px 0;
margin: 0 0 60px;
}
#footer .wrap .sitemap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 0 60px;
}
#footer .wrap .sitemap ul {
margin: 0 15px 0 0;
}
@media (hover: hover) and (pointer: fine) {
#footer .wrap .sitemap ul li a:hover {
text-decoration: underline;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#footer .wrap .sitemap ul li a:hover {
text-decoration: underline;
}
}
#footer .wrap .sitemap ul.main li a {
font-weight: 700;
font-size: 1.7rem;
}
#footer .wrap .sitemap ul.sub li a {
font-weight: 700;
font-size: 1.4rem;
color: #b3b0b0;
}
#footer .wrap .sitemap ul:last-child {
margin: 0;
}
#footer .wrap .sns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#footer .wrap .sns li {
margin: 0 10px;
}
#footer .wrap .sns li a {
display: inline-block;
line-height: 0;
}
#footer .wrap .sns li a img {
vertical-align: top;
}
#footer .wrap .scroll {
position: absolute;
bottom: 0;
right: 20px;
line-height: 0;
}
#footer small {
margin-top: 60px;
background: #4b4343;
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
display: block;
width: 100%;
padding: 27px 20px;
text-align: center;
font-size: 1.4rem;
}
@media screen and (max-width: 890px) {
#footer {
padding-bottom: 70px;
}
#footer .wrap .sitemap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#footer .wrap .sitemap .main {
width: 33.3333333333%;
margin: 0;
}
#footer .wrap .sitemap .sub {
width: 50%;
margin: 0;
}
#footer small {
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
}
@media screen and (max-width: 768px) {
#footer {
background: url(../img/common/foot_bg_sp.webp) no-repeat;
background-position: center;
background-size: cover;
}
#footer .wrap .us {
padding: 64px 0 44px;
}
#footer .wrap .us .logo {
margin: 0 0 40px;
}
#footer .wrap .us .logo a img {
max-width: 192px;
}
#footer .wrap .us ul {
display: block;
}
#footer .wrap .us ul li {
width: 100%;
margin: 0 0 30px;
}
#footer .wrap .us ul li:last-child {
margin: 0;
}
#footer .wrap .sitemap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 0 40px;
}
#footer .wrap .sitemap ul.main {
width: 50%;
}
#footer .wrap .sitemap ul.main li a {
font-size: 1.6rem;
}
#footer .wrap .sitemap ul.main:nth-child(3) {
width: 100%;
margin: 20px 0;
}
#footer .wrap .scroll {
bottom: -68px;
}
#footer small {
margin-top: 100px;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
GDPR
------------------------------------------------------------------------------------------------------------------------
*/
.gdpr {
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
width: calc(100vw - 40px);
z-index: 20;
background: #fff;
padding: 20px 30px;
line-height: 1.5;
font-size: 1.3rem;
}
.gdpr p a {
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.gdpr p a:hover {
text-decoration: none;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.gdpr p a:hover {
text-decoration: none;
}
}
.gdpr .ttl {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 15px;
}
.gdpr ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.gdpr ul li {
margin: 0 30px 0 0;
}
.gdpr ul li button {
display: block;
background: #928169;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
width: 140px;
height: 34px;
line-height: 32px;
text-align: center;
}
.gdpr ul li:last-child {
margin: 0;
}
.gdpr ul li:last-child a {
font-size: 1.4rem;
text-decoration: underline;
color: #888;
}
@media (hover: hover) and (pointer: fine) {
.gdpr ul li:last-child a:hover {
text-decoration: none;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.gdpr ul li:last-child a:hover {
text-decoration: none;
}
}
@media screen and (max-width: 890px) {
.gdpr {
bottom: 80px;
left: 10px;
right: 10px;
width: calc(100vw - 20px);
}
.gdpr ul {
display: block;
}
.gdpr ul li {
width: 100%;
margin: 0 0 10px;
}
.gdpr ul li button {
width: 100%;
}
.gdpr ul li:last-child {
margin: 0;
text-align: center;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
parts
------------------------------------------------------------------------------------------------------------------------
*/
.mb50 {
margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
.mb50 {
margin-bottom: 40px;
}
}
.mb80 {
margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
.mb80 {
margin-bottom: 60px;
}
}
.mb140 {
margin-bottom: 140px;
}
@media screen and (max-width: 768px) {
.mb140 {
margin-bottom: 100px;
}
}
.align_center {
text-align: center;
}
.mv {
position: relative;
margin-bottom: 80px;
}
.mv .img {
line-height: 0;
}
.mv .img img {
width: 100%;
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
}
.mv .txt {
position: absolute;
bottom: 60px;
left: 0;
right: 0;
color: #fff;
text-align: center;
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
padding: 0 30px;
}
.mv .txt h1 {
font-size: 4.8rem;
font-weight: 400;
line-height: 1.25;
margin: 0 0 35px;
}
.mv .txt .scroll {
font-size: 1.8rem;
text-align: center;
}
.mv .txt .scroll span {
display: inline-block;
position: relative;
padding-bottom: 44px;
cursor: pointer;
}
.mv .txt .scroll span:before, .mv .txt .scroll span:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 1px;
background: #fff;
margin: 0 auto;
}
.mv .txt .scroll span:before {
height: 40px;
bottom: 0;
opacity: 0.3;
}
.mv .txt .scroll span:after {
height: 20px;
bottom: 20px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.mv .txt .scroll span:hover:after {
bottom: 0;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.mv .txt .scroll span:hover:after {
bottom: 0;
}
}
@media screen and (max-width: 768px) {
.mv .img img {
height: calc(100vh - 70px);
}
.mv .txt {
bottom: 40px;
}
.mv .txt h1 {
font-size: 4rem;
margin: 0 0 25px;
}
}
.s-mv {
padding: 280px 0 180px;
}
.s-mv h1 {
text-align: center;
color: #bc9d63;
font-size: 4.8rem;
font-weight: 400;
margin-bottom: 55px;
padding: 0 20px;
}
.s-mv .slick-slider {
margin-bottom: 0 !important;
}
.s-mv .slick-slider .slick-slide {
line-height: 0;
margin: 0 1.95vw;
}
.s-mv .slick-slider .slick-slide img {
width: 100%;
}
.s-mv .slick-slider .slick-dots {
position: static;
margin: 20px 0 0;
line-height: 0;
}
.s-mv .slick-slider .slick-dots li {
width: 6px;
height: 6px;
}
.s-mv .slick-slider .slick-dots li button {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ece3d2;
margin: 0;
padding: 0;
font-size: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.s-mv .slick-slider .slick-dots li button:before {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.s-mv .slick-slider .slick-dots li button:hover {
background: #bc9d63;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.s-mv .slick-slider .slick-dots li button:hover {
background: #bc9d63;
}
}
.s-mv .slick-slider .slick-dots li.slick-active button {
background: #bc9d63;
}
.s-mv.brown {
background: rgb(75, 66, 66);
background: linear-gradient(-45deg, rgb(75, 66, 66) 0%, rgb(88, 81, 81) 100%);
}
@media screen and (max-width: 768px) {
.s-mv {
padding: 215px 0 95px;
}
.s-mv h1 {
font-size: 3.6rem;
margin-bottom: 50px;
}
.s-mv .slick-slider .slick-slide {
margin: 0 1.94vw;
}
}
.n-mv {
padding: 260px 0 70px;
color: #bc9d63;
text-align: center;
font-size: 4.8rem;
font-weight: 400;
}
@media screen and (max-width: 768px) {
.n-mv {
padding: 215px 0 35px;
font-size: 4rem;
}
}
.p-ttl {
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
font-size: 4rem;
line-height: 1.5;
position: relative;
margin-bottom: 50px;
}
.p-ttl:after {
content: "";
display: block;
width: 30px;
height: 1px;
background: #b08b46;
position: absolute;
bottom: 0;
left: 0;
}
.p-ttl.white:after {
background: #fff;
}
.p-ttl.pr {
padding-right: 190px;
}
.p-ttl.jp {
font-size: 3.4rem;
letter-spacing: -0.02em;
}
@media screen and (max-width: 768px) {
.p-ttl {
margin-bottom: 40px;
font-size: 3.5rem;
}
.p-ttl.pr {
padding-right: 0;
}
.p-ttl.jp {
font-size: 3.2rem;
}
}
.n-ttl {
font-size: 3rem;
font-weight: 400;
border-bottom: 1px solid #ddd9c3;
padding-bottom: 15px;
margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
.n-ttl {
font-size: 2.6rem;
}
}
.fs30 {
font-size: 3rem;
font-weight: 400;
line-height: 1.8;
margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
.fs30 {
font-size: 2.3rem;
}
}
.fs24 {
font-size: 2.4rem;
font-weight: 400;
line-height: 1.8;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.fs24 {
font-size: 2rem;
}
}
.txtlink {
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.txtlink:hover {
text-decoration: none;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.txtlink:hover {
text-decoration: none;
}
}
.lt-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 50px;
}
.lt-flex .box {
width: 31.48%;
margin: 0 2.78% 40px 0;
}
.lt-flex .box .img {
line-height: 0;
margin-bottom: 25px;
}
.lt-flex .box .img a {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 340/220;
}
.lt-flex .box .img a img {
width: 100%;
}
.lt-flex .box .img a .ttl {
background: rgba(0, 0, 0, 0.6);
color: #fff;
line-height: 1.5;
padding: 8px 54px 8px 24px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 1.5rem;
}
.lt-flex .box .img a .ttl:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 18px;
height: 18px;
background: url(../img/common/link_white.webp) no-repeat;
background-size: 18px;
background-position: center;
margin: auto 0;
}
@media (hover: hover) and (pointer: fine) {
.lt-flex .box .img a:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.lt-flex .box .img a:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
.lt-flex .box .txt {
font-size: 1.5rem;
line-height: 1.5;
}
.lt-flex .box:nth-child(3n) {
margin: 0 0 40px;
}
@media screen and (max-width: 768px) {
.lt-flex {
margin-bottom: 50px;
display: block;
margin-left: -20px;
margin-right: -20px;
}
.lt-flex .box {
width: auto;
margin: 0 1.94vw !important;
}
.lt-flex .box .img {
margin-bottom: 20px;
}
.lt-flex .box .img a .ttl {
padding: 8px 54px 8px 20px;
}
.lt-flex .slick-arrow {
position: absolute;
top: auto;
bottom: -22px;
z-index: 2;
font-size: 0;
width: 30px;
height: 30px;
}
.lt-flex .slick-arrow.slick-prev {
left: 20px;
background: url(../img/common/slide_prev.png) no-repeat;
background-size: 30px;
background-position: center;
}
.lt-flex .slick-arrow.slick-next {
right: 20px;
background: url(../img/common/slide_next.png) no-repeat;
background-size: 30px;
background-position: center;
}
.lt-flex .slick-arrow:before {
display: none;
}
.lt-flex .slick-dots {
position: static;
margin: 45px 0 0;
}
.lt-flex .slick-dots li {
width: 6px;
height: 6px;
}
.lt-flex .slick-dots li button {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ece3d2;
margin: 0;
padding: 0;
font-size: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.lt-flex .slick-dots li button:before {
display: none;
}
}
@media screen and (max-width: 768px) and (hover: hover) and (pointer: fine) {
.lt-flex .slick-dots li button:hover {
background: #bc9d63;
}
}
@media screen and (max-width: 768px) and (-ms-high-contrast: none), screen and (max-width: 768px) and (-ms-high-contrast: active) {
.lt-flex .slick-dots li button:hover {
background: #bc9d63;
}
}
@media screen and (max-width: 768px) {
.lt-flex .slick-dots li.slick-active button {
background: #bc9d63;
}
}
.dt-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
}
.dt-flex .box {
width: 30.55%;
margin: 0 4.175% 50px 0;
}
.dt-flex .box .img {
line-height: 0;
margin-bottom: 25px;
}
.dt-flex .box .img img {
width: 100%;
}
.dt-flex .box .txt p:not(.ttl) {
line-height: 2;
}
.dt-flex .box .txt .ttl {
font-size: 2.6rem;
color: #b08b46;
font-weight: 400;
margin-bottom: 15px;
}
.dt-flex .box:nth-child(3n) {
margin: 0 0 50px;
}
@media screen and (max-width: 768px) {
.dt-flex {
display: block;
}
.dt-flex .box {
width: 100%;
margin: 0 0 60px;
}
.dt-flex .box .img {
margin-bottom: 15px;
}
.dt-flex .box .txt .ttl {
font-size: 2.4rem;
margin-bottom: 10px;
}
.dt-flex .box .txt .d-dl {
margin-top: 30px;
}
.dt-flex .box:nth-child(3n) {
margin: 0 0 60px;
}
}
.dd-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.dd-flex .box {
width: 47.22%;
margin: 0 5.56% 60px 0;
}
.dd-flex .box .img {
line-height: 0;
margin-bottom: 30px;
position: relative;
}
.dd-flex .box .img img {
width: 100%;
}
.dd-flex .box .img .cp {
color: #fff;
text-shadow: 0 0 3px #000;
position: absolute;
bottom: 10px;
right: 10px;
line-height: 1.5;
font-size: 1.2rem;
}
.dd-flex .box .txt p:not(.ttl) {
line-height: 2;
}
.dd-flex .box .txt .ttl {
font-size: 3rem;
font-weight: 700;
color: #b08b46;
margin-bottom: 15px;
}
.dd-flex .box:nth-child(2n) {
margin: 0 0 60px;
}
@media screen and (max-width: 768px) {
.dd-flex {
display: block;
}
.dd-flex .box {
width: 100%;
margin: 0 0 60px;
}
.dd-flex .box .img {
margin-bottom: 20px;
}
.dd-flex .box .txt .ttl {
font-size: 2.8rem;
margin-bottom: 10px;
}
.dd-flex .box .txt .d-dl {
margin-top: 30px;
}
.dd-flex .box:nth-child(2n) {
margin: 0 0 60px;
}
}
.n-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.n-flex .img {
width: 38.88%;
margin: 0 0 0 11.22%;
}
.n-flex .img img {
width: 100%;
}
.n-flex .txt {
width: 49.9%;
}
.n-flex .txt .ttl {
font-size: 3rem;
margin-bottom: 55px;
}
.n-flex.left .img {
margin: 0 11.22% 0 0;
}
.n-flex.left .txt {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
@media screen and (max-width: 768px) {
.n-flex {
display: block;
}
.n-flex .img, .n-flex .txt {
width: 100%;
}
.n-flex .img {
margin: 0 !important;
}
.n-flex .txt {
margin: 0 0 50px;
}
.n-flex .txt .ttl {
margin: 0 0 20px;
font-size: 2.6rem;
}
}
.prwrap {
position: relative;
}
.blink a {
font-size: 1.6rem;
font-weight: 700;
display: inline-block;
position: relative;
line-height: 1.5;
}
.blink a span {
display: block;
padding: 0 50px 10px 0;
position: relative;
}
.blink a span:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 6px;
right: 0;
width: 18px;
height: 18px;
background: url(../img/common/link_black.webp) no-repeat;
background-size: 18px;
background-position: center;
margin: auto 0;
}
.blink a:before, .blink a:after {
content: "";
display: block;
position: absolute;
bottom: 0;
height: 1px;
}
.blink a:before {
width: 100%;
left: 0;
right: 0;
background: #c9c5c0;
}
.blink a:after {
width: 18px;
right: 0;
background: #333333;
}
.blink a[href$=".pdf"] span:after {
background: url(../img/common/pdf_black.webp) no-repeat;
background-size: 12px;
width: 12px;
height: 15.5px;
}
.blink.white {
color: #fff;
}
.blink.white a:after {
background: #fff;
}
.blink.white a span:after {
background: url(../img/common/link_white.webp) no-repeat;
background-size: 18px;
background-position: center;
}
.blink.white a[href$=".pdf"] span:after {
background: url(../img/common/pdf_white.webp) no-repeat;
background-size: 12px;
}
.blink.pa {
position: absolute;
top: 11px;
right: 0;
}
@media screen and (max-width: 768px) {
.blink.pa {
position: static;
}
}
.btn-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.btn-group li {
margin: 0 50px 20px 0;
}
.btn-group li:last-child {
margin: 0 0 20px;
}
@media screen and (max-width: 500px) {
.btn-group {
display: block;
}
}
.bgbaige {
background: #f1f1ea;
padding: 85px 0 105px;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.bgbaige {
padding: 60px 0 80px;
}
}
.bgbrown {
background: #4f4747;
padding: 85px 0 105px;
font-weight: 700;
color: #fff;
}
@media screen and (max-width: 768px) {
.bgbrown {
padding: 60px 0 80px;
}
}
.d-dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-top: 1px solid #e0dcc7;
}
.d-dl dt {
width: 100px;
color: #b08b46;
border-bottom: 1px solid #e0dcc7;
padding: 15px 0;
}
.d-dl dd {
width: calc(100% - 100px);
border-bottom: 1px solid #e0dcc7;
padding: 15px 0;
}
.db-dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-top: 1px solid #e0dcc7;
}
.db-dl dt {
width: 150px;
color: #b08b46;
border-bottom: 1px solid #e0dcc7;
padding: 20px 20px 20px 0;
}
.db-dl dd {
width: calc(100% - 150px);
border-bottom: 1px solid #e0dcc7;
padding: 20px 0;
}
@media screen and (max-width: 768px) {
.db-dl dt {
width: 100px;
padding: 15px 20px 15px 0;
}
.db-dl dd {
width: calc(100% - 100px);
padding: 15px 0;
}
}
.n-dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-top: 1px solid #ddd9c3;
}
.n-dl dt {
width: 236px;
border-bottom: 1px solid #ddd9c3;
padding: 15px 0;
color: #b08b46;
}
.n-dl dd {
width: calc(100% - 236px);
border-bottom: 1px solid #ddd9c3;
padding: 15px 0;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.n-dl {
display: block;
}
.n-dl dt, .n-dl dd {
width: 100%;
}
.n-dl dt {
padding: 15px 0 0;
border: none;
margin: 0 0 5px;
}
.n-dl dd {
padding: 0 0 15px;
line-height: 1.5;
}
}
.parallax {
position: relative;
background-size: cover !important;
height: 0%;
min-height: 700px;
}
.parallax .txt {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
padding: 140px 0 180px;
}
.parallax .txt .wrap {
width: 100%;
}
.parallax .txt .wrap .inner {
max-width: 580px;
}
@media screen and (max-width: 768px) {
.parallax {
background-position: center !important;
}
.parallax .txt {
padding: 100px 0;
}
}
.tab_btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tab_btn li {
background: #fff;
border-radius: 50px;
color: #bc9d63;
width: 32.4%;
margin: 0 1.4% 26px 0;
padding: 10px 20px;
text-align: center;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
position: relative;
font-size: 1.6rem;
}
.tab_btn li:after {
content: "";
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 4px;
height: 4px;
border: 6px solid transparent;
border-left: 6px solid #bc9d63;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition: 0.3s;
margin: 0 auto;
opacity: 0;
}
.tab_btn li:nth-child(3n) {
margin: 0 0 26px;
}
.tab_btn li.active {
background: #bc9d63;
color: #fff;
}
.tab_btn li.active:after {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
.tab_btn li:hover {
background: #bc9d63;
color: #fff;
}
.tab_btn li:hover:after {
opacity: 1;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.tab_btn li:hover {
background: #bc9d63;
color: #fff;
}
.tab_btn li:hover:after {
opacity: 1;
}
}
.tab_btn.bottom li:after {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
top: auto;
bottom: 100%;
}
@media screen and (max-width: 768px) {
.tab_btn {
display: block;
}
.tab_btn li {
width: 100%;
margin: 0 0 20px;
}
}
.tab_area .tab_block {
display: none;
}
.tab_area .tab_block.active {
display: block;
}
.dot_list li {
list-style-type: disc;
margin-left: 17px;
}
.catelink {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 50px;
}
.catelink li {
margin: 0 10px 10px 0;
}
.catelink li a, .catelink li span {
background: #fff;
color: #bc9d63;
padding: 2px 20px;
font-size: 1.5rem;
font-weight: 400;
line-height: 1.5;
border-radius: 50px;
display: block;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.catelink li a:hover, .catelink li span:hover {
background: #bc9d63;
color: #fff;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.catelink li a:hover, .catelink li span:hover {
background: #bc9d63;
color: #fff;
}
}
.catelink li:last-child {
margin: 0 0 10px;
}
.catelink li.active a, .catelink li.active span {
background: #bc9d63;
color: #fff;
}
.catelink.ntab li a, .catelink.ntab li span {
cursor: auto;
}
@media (hover: hover) and (pointer: fine) {
.catelink.ntab li a:hover, .catelink.ntab li span:hover {
background: #fff;
color: #bc9d63;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.catelink.ntab li a:hover, .catelink.ntab li span:hover {
background: #fff;
color: #bc9d63;
}
}
@media (hover: hover) and (pointer: fine) {
.catelink.ntab li.active:hover a, .catelink.ntab li.active:hover span {
background: #bc9d63;
color: #fff;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.catelink.ntab li.active:hover a, .catelink.ntab li.active:hover span {
background: #bc9d63;
color: #fff;
}
}
@media screen and (max-width: 768px) {
.catelink {
margin-bottom: 40px;
}
.catelink li a, .catelink li span {
padding: 2px 10px;
font-size: 1.4rem;
}
}
.listblock {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.listblock .box {
width: 47.22%;
margin: 0 5.56% 60px 0;
}
.listblock .box .img {
line-height: 0;
margin-bottom: 30px;
position: relative;
}
.listblock .box .img a {
display: block;
overflow: hidden;
}
.listblock .box .img a img {
width: 100%;
}
@media (hover: hover) and (pointer: fine) {
.listblock .box .img a:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.listblock .box .img a:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
.listblock .box .img .cp {
color: #fff;
text-shadow: 0 0 3px #000;
position: absolute;
bottom: 10px;
right: 10px;
line-height: 1.5;
font-size: 1.2rem;
}
.listblock .box .txt p:not(.ttl) {
font-weight: 400;
}
.listblock .box .txt p:not(.ttl) strong {
font-weight: 700;
}
.listblock .box .txt .category {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.listblock .box .txt .category li {
font-size: 1.3rem;
font-weight: 400;
padding: 0 0 0 14px;
margin-bottom: 15px;
margin-right: 14px;
position: relative;
line-height: 1.5;
}
.listblock .box .txt .category li:before {
content: "";
display: block;
width: 6px;
height: 6px;
position: absolute;
top: 8px;
left: 0;
background: #b08b46;
border-radius: 50%;
}
.listblock .box .txt .category li:last-child {
margin-right: 0;
}
.listblock .box .txt .ttl {
/*font-size: 3.4rem;*/
font-size: 2.8rem;
line-height: 1.5;
color: #b08b46;
margin-bottom: 20px;
}
.listblock .box:nth-child(2n) {
margin: 0 0 60px;
}
@media screen and (max-width: 768px) {
.listblock {
display: block;
}
.listblock .box {
width: 100%;
margin: 0 0 50px;
}
.listblock .box .txt .category {
margin-bottom: 10px;
}
.listblock .box .txt .ttl {
/*font-size: 2.8rem;*/
font-size: 2.4rem;
}
}
.list_wrap .listblock {
display: none;
}
.list_wrap .listblock.active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.bgblock {
position: relative;
color: #fff;
margin-bottom: 5px;
overflow: hidden;
}
.bgblock .img {
line-height: 0;
margin-left: -1px;
width: calc(100% + 1px);
}
.bgblock .img img {
width: 100%;
}
.bgblock .txt {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bgblock .txt .wrap {
width: 100%;
}
.bgblock .txt .wrap .inner {
max-width: 435px;
}
.bgblock:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.bgblock .txt .wrap .inner .blink {
margin-top: 35px;
}
}
.wp-pagenavi {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
}
.wp-pagenavi .pages, .wp-pagenavi .last {
display: none;
}
.wp-pagenavi .page, .wp-pagenavi .current, .wp-pagenavi .nextpostslink {
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 38px;
font-size: 1.6rem;
border: 1px solid #b28f4d;
margin: 0 5px 10px;
}
.wp-pagenavi .page {
color: #b28f4d;
}
@media (hover: hover) and (pointer: fine) {
.wp-pagenavi .page:hover {
background: #b28f4d;
color: #fff;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.wp-pagenavi .page:hover {
background: #b28f4d;
color: #fff;
}
}
.wp-pagenavi .current {
background: #b28f4d;
color: #fff;
}
.wp-pagenavi .extend {
color: #b28f4d;
margin: 0 15px 0 10px;
}
.wp-pagenavi .nextpostslink, .wp-pagenavi .prevpostslink {
font-size: 0;
position: relative;
margin-bottom: 10px;
}
.wp-pagenavi .nextpostslink:after, .wp-pagenavi .prevpostslink:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 4px;
left: 0;
margin: auto;
width: 8px;
height: 8px;
border-top: 1px solid #b28f4d;
border-right: 1px solid #b28f4d;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.wp-pagenavi .nextpostslink:hover, .wp-pagenavi .prevpostslink:hover {
background: #b28f4d;
}
.wp-pagenavi .nextpostslink:hover:after, .wp-pagenavi .prevpostslink:hover:after {
border-color: #fff;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.wp-pagenavi .nextpostslink:hover, .wp-pagenavi .prevpostslink:hover {
background: #b28f4d;
}
.wp-pagenavi .nextpostslink:hover:after, .wp-pagenavi .prevpostslink:hover:after {
border-color: #fff;
}
}
.wp-pagenavi .prevpostslink:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
right: -4px;
}
.font_s {
font-size: 1.4rem;
}
.mfp-bg {
background: #393030 !important;
opacity: 0.9 !important;
}
.mfp-content {
position: static !important;
/*.mfp-img {
max-width: 800px !important;
width: 100%;
max-height: 500px !important;
}*/
}
.mfp-content .mfp-close {
width: 70px !important;
height: 70px !important;
border-radius: 50%;
background: #fff !important;
top: 30px !important;
right: 30px !important;
opacity: 1 !important;
}
.mfp-content .mfp-close:after {
content: "";
background: url(../img/naturecenter/close.png) no-repeat;
background-size: 32px;
width: 32px;
height: 27.5px;
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.mfp-content .mfp-bottom-bar {
position: static !important;
font-size: 1.6rem;
margin-top: 1px;
}
.mfp-content .mfp-bottom-bar .mfp-title {
text-align: center;
}
.mfp-content .mfp-bottom-bar .mfp-counter {
display: none;
}
.mfp-content .mfp-figure:after {
display: none;
}
.mfp-arrow {
width: 70px !important;
height: 70px !important;
opacity: 1 !important;
}
.mfp-arrow:before, .mfp-arrow:after {
display: none !important;
}
.mfp-arrow.mfp-arrow-left {
background: url(../img/naturecenter/prev.png) no-repeat !important;
background-size: 70px !important;
}
.mfp-arrow.mfp-arrow-right {
background: url(../img/naturecenter/next.png) no-repeat !important;
background-size: 70px !important;
}
.ui-widget.ui-widget-content {
z-index: 200000 !important;
}
/*
------------------------------------------------------------------------------------------------------------------------
top
------------------------------------------------------------------------------------------------------------------------
*/
#top .main {
position: relative;
margin-bottom: 125px;
}
#top .main .img {
line-height: 0;
position: relative;
width: 100%;
height: 100vh;
}
#top .main .img img, #top .main .img video {
width: 100%;
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
}
#top .main .img:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(17, 17, 17);
background: -webkit-gradient(linear, left bottom, left top, from(rgba(17, 17, 17, 0.6005602925)), color-stop(50%, rgba(17, 17, 17, 0.1047619731)), to(rgba(17, 17, 17, 0.6005602925)));
background: linear-gradient(0deg, rgba(17, 17, 17, 0.6005602925) 0%, rgba(17, 17, 17, 0.1047619731) 50%, rgba(17, 17, 17, 0.6005602925) 100%);
display: block;
}
#top .main .txt {
position: absolute;
bottom: 0;
right: 0;
left: 0;
color: #fff;
}
#top .main .txt .catch {
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
font-size: 4.8rem;
line-height: 1.5;
padding: 0 20px;
text-align: center;
}
#top .main .txt .scroll {
font-size: 1.8rem;
text-align: center;
}
#top .main .txt .scroll span {
display: inline-block;
position: relative;
padding-bottom: 44px;
cursor: pointer;
}
#top .main .txt .scroll span:before, #top .main .txt .scroll span:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 1px;
background: #fff;
margin: 0 auto;
}
#top .main .txt .scroll span:before {
height: 40px;
bottom: 0;
opacity: 0.3;
}
#top .main .txt .scroll span:after {
height: 20px;
bottom: 20px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
#top .main .txt .scroll span:hover:after {
bottom: 0;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#top .main .txt .scroll span:hover:after {
bottom: 0;
}
}
#top .main .txt #form {
padding: 0 20px 45px;
margin: 0 auto;
}
#top .main .txt #form .container {
max-width: 890px;
margin: 0 auto;
line-height: 0;
position: relative;
}
#top .main .txt #form .container .top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
margin-bottom: 20px;
}
#top .main .txt #form .container .top:after {
content: "";
position: absolute;
bottom: 0;
right: 20px;
left: 0;
width: calc(100% - 25px);
height: 1px;
background: #fff;
}
#top .main .txt #form .container .top .checkin {
position: relative;
}
#top .main .txt #form .container .top .checkin:before {
content: "";
width: 16px;
height: 20px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
bottom: 9px;
left: 0;
pointer-events: none;
}
#top .main .txt #form .container .top .checkin .arrival {
background: none;
color: #fff;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.875;
padding: 5px 10px 5px 30px;
width: 155px;
display: block;
margin: 0 10px 0 0;
font-size: 1.6rem;
}
#top .main .txt #form .container .top .selectbox {
line-height: 1.5;
margin: 0 10px 0 0;
position: relative;
max-width: 110px;
width: 100%;
}
#top .main .txt #form .container .top .selectbox:before {
content: "";
width: 16px;
height: 16px;
display: block;
background-image: url('data:image/svg+xml;utf8,');
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
bottom: 11px;
left: 0;
pointer-events: none;
}
#top .main .txt #form .container .top .selectbox select {
background: none;
color: #fff;
padding: 7px 10px 5px 25px;
font-size: 1.6rem;
height: 100%;
display: block;
margin: 0;
line-height: 1.5;
}
#top .main .txt #form .container .bottom {
border-bottom: 1px solid #fff;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 25px;
}
#top .main .txt #form .container .bottom input {
width: calc((100% - 30px) / 3);
font-size: 1.7rem;
padding: 5px 0;
color: #fff;
}
#top .main .txt #form .container #bookSubmit {
position: absolute;
top: 0;
right: 0;
font-size: 1.7rem;
width: 220px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
border-radius: 30px;
text-align: center;
display: block;
}
#top .main .txt #form .container .linklist {
line-height: 1.5;
font-size: 1.3rem;
font-family: "Zen Kaku Gothic New", serif;
font-weight: 400;
line-height: 1.875;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#top .main .txt #form .container .linklist li {
margin: 0 22px 0 0;
}
#top .main .txt #form .container .linklist li a {
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
#top .main .txt #form .container .linklist li a:hover {
text-decoration: none;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#top .main .txt #form .container .linklist li a:hover {
text-decoration: none;
}
}
#top .main .txt #form .container .linklist li:last-child {
margin: 0;
}
@media screen and (min-width: 769px) {
#top .main .txt #form select,
#top .main .txt #form ::picker(select) {
-webkit-appearance: base-select;
-moz-appearance: base-select;
appearance: base-select;
}
#top .main .txt #form ::picker(select) {
color: #333333;
border: none;
}
}
#top .main .txt .picup {
background: #000;
}
#top .main .txt .picup a {
background: #4f4747;
padding: 15px 60px 15px 40px;
position: relative;
display: block;
}
#top .main .txt .picup a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto 0;
width: 18px;
height: 18px;
background: url(../img/common/link_white.webp) no-repeat;
background-size: 18px;
background-position: center;
}
@media (hover: hover) and (pointer: fine) {
#top .main .txt .picup a:hover {
opacity: 0.7;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#top .main .txt .picup a:hover {
opacity: 0.7;
}
}
#top .location {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 135px;
}
#top .location .img {
width: 47.5vw;
margin-right: calc(-50vw + 540px);
}
#top .location .img img {
width: 100%;
}
#top .location .txt {
width: 50.81%;
}
#top .location .txt h3 span {
font-size: 1rem;
}
#top .location .txt p:not(.blink) {
font-weight: 700;
}
#top .rooms {
margin-bottom: 100px;
}
#top .dining {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 96px;
}
#top .dining .img {
width: 46.88vw;
margin-right: calc(-50vw + 540px);
line-height: 0;
}
#top .dining .img img {
width: 100%;
}
#top .dining .txt {
width: 45.37%;
}
#top .dining .txt p:not(.blink) {
font-weight: 700;
}
#top .dining .txt .blink {
margin-top: 50px;
}
#top .naturecenter {
background: #f0eee4;
position: relative;
padding-top: 110px;
}
#top .naturecenter:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 284px;
background: rgb(222, 218, 196);
background: -webkit-gradient(linear, left bottom, left top, from(rgba(222, 218, 196, 0)), to(rgb(222, 218, 196)));
background: linear-gradient(0deg, rgba(222, 218, 196, 0) 0%, rgb(222, 218, 196) 100%);
}
#top .naturecenter .wrap {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#top .naturecenter .wrap .txt {
width: 42.59%;
margin-left: 5%;
}
#top .naturecenter .wrap .txt p:not(.blink) {
font-weight: 700;
}
#top .naturecenter .wrap .img {
width: 49.22vw;
margin-right: calc(-50vw + 540px);
}
#top .naturecenter .wrap .img img {
width: 100%;
}
#top .facility {
position: relative;
padding: 110px 0;
background: #f0eee4;
}
#top .facility .wrap {
position: relative;
/*z-index: 2;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#top .facility .wrap .txt {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
width: 42.59%;
margin-left: 5%;
}
#top .facility .wrap .txt p:not(.blink) {
font-weight: 700;
}
#top .facility .wrap .img {
width: 49.22vw;
margin-left: calc(-50vw + 540px);
}
#top .facility .wrap .img img {
width: 100%;
}
#top .highlights {
background: #f0eee4;
padding: 0 20px 85px;
}
#top .highlights .inner {
background: #eae7d8;
max-width: 1200px;
margin: 0 auto;
padding: 75px 0 72px;
}
#top .highlights .inner .n-dl {
margin-bottom: 50px;
}
#top .gallery {
background: #f0eee4;
padding-bottom: 150px;
}
#top .gallery ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#top .gallery ul li {
width: 24.07%;
margin: 0 1.24% 12px 0;
line-height: 0;
}
#top .gallery ul li img {
width: 100%;
}
#top .gallery ul li:nth-child(4n) {
margin: 0 0 12px;
}
#top .gallery .blink.pa {
right: 30px;
}
@media screen and (max-width: 1140px) {
#top .location .img {
margin-right: -30px;
}
#top .dining .img {
margin-right: -30px;
}
#top .naturecenter .wrap .img {
margin-right: -30px;
}
#top .facility .wrap .img {
margin-left: -30px;
}
}
@media screen and (max-width: 890px) {
#top .main .txt #form .container .top:after {
width: 100%;
}
#top .main .txt #form .container #bookSubmit {
position: static;
margin: 0 auto 30px;
}
}
@media screen and (max-width: 768px) {
#top .main {
margin-bottom: 80px;
}
#top .main .img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#top .main .img video {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
#top .main .txt {
position: relative;
z-index: 2;
padding-top: 200px;
}
#top .main .txt .catch {
font-size: 3.6rem;
line-height: 1.25;
margin: 0 0 10px;
}
#top .main .txt .scroll {
margin: 0 0 10px;
}
#top .main .txt .picup a {
font-size: 1.5rem;
padding: 10px 60px 10px 20px;
}
#top .location {
display: block;
padding-bottom: 37px;
position: relative;
margin-bottom: 80px;
}
#top .location .img, #top .location .txt {
width: 100%;
}
#top .location .txt {
margin: 0 0 30px;
}
#top .location .txt .blink {
position: absolute;
bottom: 0;
left: 20px;
}
#top .location .img {
margin: 0 -20px 30px 0;
width: calc(100% + 20px);
}
#top .rooms {
margin-bottom: 85px;
}
#top .dining {
display: block;
margin-bottom: 100px;
}
#top .dining .txt {
width: 100%;
margin: 0 0 50px;
}
#top .dining .txt .p-ttl {
margin-bottom: 30px;
}
#top .dining .txt .blink {
margin-top: 35px;
}
#top .dining .img {
width: calc(100% + 20px);
margin-right: -20px;
}
#top .naturecenter {
padding-top: 80px;
}
#top .naturecenter .wrap {
display: block;
}
#top .naturecenter .wrap .txt {
width: 100%;
margin: 0 0 60px;
}
#top .naturecenter .wrap .txt .p-ttl {
margin-bottom: 25px;
}
#top .naturecenter .wrap .txt .fs30 {
margin-bottom: 25px;
}
#top .naturecenter .wrap .txt .blink {
margin-top: 30px;
}
#top .naturecenter .wrap .img {
margin-right: -20px;
width: calc(100% + 20px);
}
#top .facility {
padding: 80px 0 55px;
}
#top .facility .wrap {
display: block;
}
#top .facility .wrap .txt {
width: 100%;
margin: 0 0 60px;
}
#top .facility .wrap .txt .p-ttl {
margin-bottom: 25px;
}
#top .facility .wrap .txt .fs30 {
margin-bottom: 25px;
}
#top .facility .wrap .txt .blink {
margin-top: 30px;
}
#top .facility .wrap .img {
margin-left: -20px;
width: calc(100% + 20px);
}
#top .highlights {
padding: 0 20px 65px;
}
#top .highlights .inner {
padding: 55px 15px 60px;
}
#top .highlights .inner .wrap {
padding: 0;
}
#top .highlights .inner .wrap .n-dl {
margin-bottom: 40px;
}
#top .gallery {
padding-bottom: 100px;
}
#top .gallery ul {
margin-bottom: 30px;
}
#top .gallery ul li {
width: 48.4375%;
margin: 0 3.125% 10px 0;
}
#top .gallery ul li:nth-child(2n) {
margin: 0 0 10px;
}
}
@media screen and (max-width: 660px) {
#top .main .txt #form {
margin: 0 auto;
padding-bottom: 25px;
}
#top .main .txt #form .container .top {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#top .main .txt #form .container .top .checkin {
width: 100%;
border-bottom: 1px solid #fff;
margin-bottom: 10px;
}
#top .main .txt #form .container .top .selectbox {
width: 50%;
max-width: none;
margin: 0;
}
#top .main .txt #form .container .top .selectbox:before {
bottom: 8px;
}
#top .main .txt #form .container .top .selectbox:nth-child(2), #top .main .txt #form .container .top .selectbox:nth-child(3) {
border-bottom: 1px solid #fff;
margin-bottom: 10px;
}
#top .main .txt #form .container .linklist {
display: block;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
rooms - index
------------------------------------------------------------------------------------------------------------------------
*/
#rooms .lead {
margin-bottom: 0;
padding-bottom: 100px;
}
#rooms .lead.ppr {
background: #f1f1ea;
}
#rooms .lead.pristine {
background: #4f4747;
}
#rooms .lead .bgbrown .fs30, #rooms .lead .bgbaige .fs30 {
color: #bc9d63;
font-weight: 700;
}
#rooms .lead .bgbrown p, #rooms .lead .bgbaige p {
font-weight: 400;
}
#rooms .lead .bgbrown + figure, #rooms .lead .bgbaige + figure {
text-align: center;
}
#rooms .lead .bgbrown + figure img, #rooms .lead .bgbaige + figure img {
margin: 0 auto;
}
#rooms .lead figure {
line-height: 0;
padding: 0 20px;
background: #f1f1ea;
}
#rooms .lead figure img {
width: 100%;
max-width: 1140px;
}
#rooms .lead .bgbrown + figure {
background: #4f4747;
}
#rooms .lead .map_list {
line-height: 0;
background: #fff;
padding: 35px 0 40px;
max-width: 1140px;
width: calc(100vw - 40px);
margin: 0 auto;
}
#rooms .lead .map_list figure {
background: #fff;
}
#rooms .room_list {
margin-bottom: 100px;
}
#rooms .room_list .bgblock .txt .wrap .inner {
max-width: 490px;
}
#rooms .others {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 100px;
}
#rooms .others .img {
width: 46.88vw;
margin-right: calc(-50vw + 540px);
line-height: 0;
}
#rooms .others .img img {
width: 100%;
}
#rooms .others .txt {
width: 45.37%;
}
@media screen and (max-width: 1140px) {
#rooms .others .img {
margin-right: -30px;
}
}
@media screen and (min-width: 769px) {
#rooms .room_list .bgblock .txt .wrap .inner .p-ttl {
font-size: 3.4rem;
}
}
@media screen and (max-width: 768px) {
#rooms .plan {
margin-bottom: 75px;
}
#rooms .plan .blink {
margin-top: 50px;
}
#rooms .lead {
margin-bottom: 0;
padding-bottom: 0;
}
#rooms .lead figure {
padding: 0;
}
#rooms .lead .map_list {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
#rooms .room_list .bgblock .txt .wrap .inner .p-ttl {
font-size: 2.5rem;
}
#rooms .others {
display: block;
}
#rooms .others .img {
width: calc(100% + 20px);
margin-right: -20px;
}
#rooms .others .txt {
width: 100%;
margin: 0 0 50px;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
rooms - detail
------------------------------------------------------------------------------------------------------------------------
*/
#rooms_detail .s-mv {
padding-bottom: 115px;
/*h1 {
font-size: 2.4rem;
}*/
}
#rooms_detail .s-mv .slick-slider {
margin-bottom: 75px !important;
}
#rooms_detail .s-mv .detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 70px;
}
#rooms_detail .s-mv .detail .txt {
width: 64.85%;
margin: 0 5.5% 0 0;
}
#rooms_detail .s-mv .detail .txt .db-dl {
margin-top: 50px;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more_block {
display: none;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more {
margin-top: 15px;
width: 126px;
position: relative;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more span {
border: 1px solid #333;
display: none;
border-radius: 50px;
height: 30px;
line-height: 27px;
padding: 0 30px 0 13px;
position: relative;
width: 100%;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more span:after, #rooms_detail .s-mv .detail .txt .db-dl dd .more span:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
background: #333;
margin: auto 0;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more span:before {
width: 7.2px;
height: 1px;
right: 10px;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more span:after {
width: 1px;
height: 7.2px;
right: 13.1px;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more span.on {
display: inline-block;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 6px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #333;
margin: auto 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more.active {
width: 93px;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more.active span {
background: #fff;
color: #4f4747;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more.active span:after, #rooms_detail .s-mv .detail .txt .db-dl dd .more.active span:before {
background: #4f4747;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more.active span:after {
display: none;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more.active span.on {
display: none;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more.active span.off {
display: inline-block;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more.active:after {
border-color: #4f4747;
}
@media (hover: hover) and (pointer: fine) {
#rooms_detail .s-mv .detail .txt .db-dl dd .more:hover span {
background: #fff;
color: #4f4747;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more:hover span:after, #rooms_detail .s-mv .detail .txt .db-dl dd .more:hover span:before {
background: #4f4747;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more:hover:after {
border-color: #4f4747;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#rooms_detail .s-mv .detail .txt .db-dl dd .more:hover span {
background: #fff;
color: #4f4747;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more:hover span:after, #rooms_detail .s-mv .detail .txt .db-dl dd .more:hover span:before {
background: #4f4747;
}
#rooms_detail .s-mv .detail .txt .db-dl dd .more:hover:after {
border-color: #4f4747;
}
}
#rooms_detail .s-mv .detail .img {
width: 29.65%;
line-height: 0;
}
#rooms_detail .s-mv .detail .img img {
width: 100%;
}
#rooms_detail .s-mv.brown {
color: #fff;
}
#rooms_detail .s-mv.brown .detail .txt .db-dl {
border-color: #fff;
}
#rooms_detail .s-mv.brown .detail .txt .db-dl dt {
border-color: rgba(255, 255, 255, 0.5);
}
#rooms_detail .s-mv.brown .detail .txt .db-dl dd {
border-color: rgba(255, 255, 255, 0.5);
}
#rooms_detail .s-mv.brown .detail .txt .db-dl dd .more:not(.active):after {
border-color: #fff;
}
#rooms_detail .s-mv.brown .detail .txt .db-dl dd .more:not(.active) span {
border-color: #fff;
}
#rooms_detail .s-mv.brown .detail .txt .db-dl dd .more:not(.active) span:before, #rooms_detail .s-mv.brown .detail .txt .db-dl dd .more:not(.active) span:after {
background: #fff;
}
#rooms_detail .other_rooms {
background: #f1f1ea;
padding-top: 100px;
}
#rooms_detail .other_rooms .room_tab {
margin-bottom: 46px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#rooms_detail .other_rooms .room_tab li {
font-size: 2.4rem;
font-weight: 700;
padding-bottom: 5px;
position: relative;
-webkit-transition: 0.3s;
transition: 0.3s;
margin-right: 50px;
cursor: pointer;
}
#rooms_detail .other_rooms .room_tab li:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #b08b46;
display: block;
width: 100%;
height: 1px;
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#rooms_detail .other_rooms .room_tab li.active {
color: #b08b46;
}
#rooms_detail .other_rooms .room_tab li.active:after {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
#rooms_detail .other_rooms .room_tab li:hover {
color: #b08b46;
}
#rooms_detail .other_rooms .room_tab li:hover:after {
opacity: 1;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#rooms_detail .other_rooms .room_tab li:hover {
color: #b08b46;
}
#rooms_detail .other_rooms .room_tab li:hover:after {
opacity: 1;
}
}
#rooms_detail .other_rooms .room_tab li::last-child {
margin-right: 0;
}
#rooms_detail .other_rooms .room_tabarea .room_tabblock {
display: none;
}
#rooms_detail .other_rooms .room_tabarea .room_tabblock .bgblock .txt .wrap .inner {
max-width: 490px;
}
#rooms_detail .other_rooms .room_tabarea .room_tabblock .bgblock .txt .wrap .inner .p-ttl {
font-size: 3.4rem;
}
#rooms_detail .other_rooms .room_tabarea .room_tabblock.active {
display: block;
}
@media screen and (max-width: 768px) {
#rooms_detail .s-mv {
padding-bottom: 100px;
}
#rooms_detail .s-mv .slick-slider {
margin-bottom: 45px !important;
}
#rooms_detail .s-mv .detail {
display: block;
margin-bottom: 36px;
}
#rooms_detail .s-mv .detail .txt, #rooms_detail .s-mv .detail .img {
width: 100%;
}
#rooms_detail .s-mv .detail .txt {
margin: 0 0 40px;
}
#rooms_detail .s-mv .btn-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#rooms_detail .s-mv .btn-group li {
margin: 0 25px 0 0;
}
#rooms_detail .s-mv .btn-group li:last-child {
margin: 0;
}
#rooms_detail .other_rooms {
padding-top: 80px;
}
#rooms_detail .other_rooms .room_tab {
display: block;
}
#rooms_detail .other_rooms .room_tab li {
width: 100%;
font-size: 2rem;
}
#rooms_detail .other_rooms .room_tabarea .room_tabblock .bgblock .txt .wrap .inner .p-ttl {
font-size: 2.5rem;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
dining
------------------------------------------------------------------------------------------------------------------------
*/
#dining .contents {
margin-bottom: 60px;
}
#dining .contents .catelink {
margin-top: 70px;
}
#dining .contents .listblock .box .img a {
aspect-ratio: 510/340;
}
#dining .contents .listblock .box .img a img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 768px) {
#dining .contents {
margin-bottom: 115px;
}
#dining .contents .catelink {
margin-top: 55px;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
dining - detail
------------------------------------------------------------------------------------------------------------------------
*/
#dining_detail .s-mv {
padding-bottom: 105px;
}
#dining_detail .s-mv .slider {
margin-bottom: 65px !important;
}
#dining_detail .s-mv .slider .slick-slide {
aspect-ratio: 750/500;
}
#dining_detail .s-mv .slider .slick-slide img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#dining_detail .s-mv .wrap .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 50px;
}
#dining_detail .s-mv .wrap .flex .txt {
width: 64.85%;
margin: 0 5.5% 0 0;
}
#dining_detail .s-mv .wrap .flex .txt .db-dl {
margin-top: 40px;
}
#dining_detail .s-mv .wrap .flex .txt .db-dl dd .catelink {
margin-bottom: 0;
}
#dining_detail .s-mv .wrap .flex .link {
width: 200px;
}
#dining_detail .s-mv .wrap .flex .link .blink li {
margin-bottom: 40px;
}
#dining_detail .s-mv .wrap .flex .link .blink li a {
width: 100%;
}
#dining_detail .s-mv .wrap .flex .link .blink li:last-child {
margin-bottom: 0;
}
#dining_detail .s-mv .wrap .last a {
margin-right: 30px;
}
#dining_detail .other_dining {
background: #f1f1ea;
padding: 140px 0 85px;
}
@media screen and (max-width: 768px) {
#dining_detail .s-mv {
padding-bottom: 95px;
}
#dining_detail .s-mv .slider {
margin-bottom: 40px !important;
}
#dining_detail .s-mv .wrap .flex {
display: block;
}
#dining_detail .s-mv .wrap .flex .txt, #dining_detail .s-mv .wrap .flex .link {
width: 100%;
}
#dining_detail .s-mv .wrap .flex .txt {
margin: 0 0 40px;
}
#dining_detail .s-mv .wrap .flex + .blink {
text-align: center;
}
#dining_detail .other_dining {
background: #f1f1ea;
padding: 80px 0 60px;
}
}
.other_dining .listblock .box .img a {
aspect-ratio: 510/340;
}
.other_dining .listblock .box .img a img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/*
------------------------------------------------------------------------------------------------------------------------
news - index
------------------------------------------------------------------------------------------------------------------------
*/
#news {
margin-bottom: 90px;
}
#news .n-dl {
margin-bottom: 55px;
}
/*
------------------------------------------------------------------------------------------------------------------------
news - detail
------------------------------------------------------------------------------------------------------------------------
*/
#news_detail {
margin-bottom: 130px;
}
#news_detail .date {
color: #b28f4d;
font-weight: 700;
margin-bottom: 5px;
}
#news_detail .contents {
padding-bottom: 85px;
margin-bottom: 35px;
border-bottom: 1px solid #ddd9c3;
}
#news_detail .contents .db-dl {
margin: 95px 0;
}
#news_detail .bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#news_detail .bottom .blink {
margin-right: 40px;
margin-bottom: 0;
}
#news_detail .bottom .sns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#news_detail .bottom .sns li {
margin: 0 20px 0 0;
}
#news_detail .bottom .sns li a {
display: block;
line-height: 0;
}
#news_detail .bottom .sns li:last-child {
margin: 0;
}
@media screen and (max-width: 768px) {
#news_detail {
margin-bottom: 100px;
}
#news_detail .contents .db-dl {
margin: 60px 0;
}
}
@media screen and (max-width: 500px) {
#news_detail .bottom {
display: block;
text-align: center;
}
#news_detail .bottom .blink {
margin: 0 0 30px;
}
#news_detail .bottom .sns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
plan
------------------------------------------------------------------------------------------------------------------------
*/
#plan {
margin-bottom: 100px;
}
#plan .catelink {
padding-bottom: 25px;
border-bottom: 1px solid #ddd9c3;
margin-bottom: 60px;
}
#plan .listblock .box {
margin-bottom: 110px;
}
#plan .listblock .box .txt .d-dl {
margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
#plan .listblock .box {
margin-bottom: 60px;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
plan - detail
------------------------------------------------------------------------------------------------------------------------
*/
#plan_detail .s-mv .catelink {
margin-bottom: 10px;
}
#plan_detail .s-mv .ttl {
position: relative;
margin-bottom: 55px;
}
#plan_detail .s-mv .ttl .fs30 {
border-bottom: 1px solid #ddd9c3;
padding-bottom: 15px;
margin-bottom: 0;
padding-right: 225px;
}
#plan_detail .s-mv .ttl .blink {
position: absolute;
top: 0;
right: 0;
}
#plan_detail .s-mv .ttl .blink a {
width: 195px;
}
#plan_detail .s-mv .slider {
margin-bottom: 65px !important;
}
#plan_detail .s-mv .contents .db-dl {
margin: 75px 0;
}
#plan_detail .s-mv .contents .bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#plan_detail .s-mv .contents .bottom .right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#plan_detail .s-mv .contents .bottom .right .blink {
margin-right: 40px;
margin-bottom: 0;
}
#plan_detail .s-mv .contents .bottom .right .sns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#plan_detail .s-mv .contents .bottom .right .sns li {
margin: 0 20px 0 0;
}
#plan_detail .s-mv .contents .bottom .right .sns li a {
display: block;
line-height: 0;
}
#plan_detail .s-mv .contents .bottom .right .sns li:last-child {
margin: 0;
}
@media screen and (max-width: 768px) {
#plan_detail .s-mv .ttl .fs30 {
margin-bottom: 25px;
padding-right: 0;
}
#plan_detail .s-mv .ttl .blink {
position: static;
}
#plan_detail .s-mv .slider {
margin-bottom: 35px !important;
}
#plan_detail .s-mv .contents .db-dl {
margin: 55px 0;
}
#plan_detail .s-mv .contents .bottom {
display: block;
text-align: center;
}
#plan_detail .s-mv .contents .bottom .blink a {
width: 195px;
text-align: left;
}
#plan_detail .s-mv .contents .bottom .right {
display: block;
text-align: center;
}
#plan_detail .s-mv .contents .bottom .right .blink {
margin: 0 0 30px;
}
#plan_detail .s-mv .contents .bottom .right .sns {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
activities
------------------------------------------------------------------------------------------------------------------------
*/
#activities .lead {
margin-bottom: 60px;
}
#activities .tab_btn.top {
margin-bottom: 65px;
}
#activities .tab_btn.bottom {
margin-bottom: 105px;
}
#activities .tab_area {
margin-bottom: 20px;
}
/*
------------------------------------------------------------------------------------------------------------------------
facilities
------------------------------------------------------------------------------------------------------------------------
*/
#facilities .s-mv {
padding-bottom: 50px;
}
#facilities .s-mv h1 {
margin-bottom: 30px;
}
#facilities .s-mv .anchor_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#facilities .s-mv .anchor_list li {
margin: 0 40px 10px 0;
}
#facilities .s-mv .anchor_list li a {
color: #bc9d63;
display: inline-block;
position: relative;
padding-right: 28px;
line-height: 1.5;
}
#facilities .s-mv .anchor_list li a:after {
content: "";
width: 18px;
height: 18px;
display: block;
position: absolute;
top: 4px;
right: 0;
background: url(../img/common/link_anchor.webp) no-repeat;
background-size: 18px;
background-position: center;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#facilities .s-mv .anchor_list li a[href^="#"]:after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
@media (hover: hover) and (pointer: fine) {
#facilities .s-mv .anchor_list li a:hover {
opacity: 0.7;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#facilities .s-mv .anchor_list li a:hover {
opacity: 0.7;
}
}
#facilities .s-mv .anchor_list li:last-child {
margin: 0;
}
@media screen and (max-width: 768px) {
#facilities .s-mv {
padding-bottom: 35px;
}
}
#facilities #map {
background: #fff;
margin-bottom: 120px;
}
#facilities #map figure {
line-height: 0;
margin-bottom: 35px;
}
#facilities #map figure img {
width: 100%;
}
#facilities #map .img {
padding-bottom: 35px;
line-height: 0;
}
@media screen and (max-width: 768px) {
#facilities #map {
margin-bottom: 50px;
}
}
#facilities .lead {
margin-bottom: 150px;
}
#facilities .lead .btn-group {
margin-bottom: 65px;
}
#facilities .lead .pristine {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#facilities .lead .pristine dt {
width: 42.96vw;
margin-left: calc(-50vw + 540px);
line-height: 0;
}
#facilities .lead .pristine dt img {
width: 100%;
}
#facilities .lead .pristine dd {
width: 49.62%;
}
@media screen and (max-width: 1140px) {
#facilities .lead .pristine dt {
margin-left: -30px;
}
}
@media screen and (max-width: 768px) {
#facilities .lead {
margin-bottom: 90px;
}
#facilities .lead .pristine {
display: block;
}
#facilities .lead .pristine dt, #facilities .lead .pristine dd {
width: 100%;
}
#facilities .lead .pristine dt {
margin: 0 0 30px;
}
}
@media screen and (max-width: 500px) {
#facilities .lead .btn-group li {
margin: 0 0 20px;
}
#facilities .lead .btn-group li a {
width: 100%;
}
}
#facilities .rec .bgblock .img img {
height: 700px;
-o-object-fit: cover;
object-fit: cover;
}
#facilities .rec .bgblock .txt .wrap .inner {
max-width: 704px;
}
#facilities .rec .bgblock .txt .wrap .inner .catch {
font-size: 3rem;
}
@media screen and (max-width: 768px) {
#facilities .rec .rec .txt .wrap .inner .catch {
font-size: 2.6rem;
}
}
@media screen and (max-width: 500px) {
#facilities .rec .bgblock .img img {
height: 800px;
-o-object-fit: cover;
object-fit: cover;
}
#facilities .rec .bgblock .txt .wrap .inner .btn-group {
margin-top: 35px;
}
#facilities .rec .bgblock .txt .wrap .inner .btn-group li {
margin: 0 0 20px;
}
#facilities .rec .bgblock .txt .wrap .inner .btn-group li a {
width: 100%;
}
}
#facilities .others {
background: #f2f2ec;
padding: 85px 0 30px;
}
#facilities .others .wrap .list_wrap .listblock .box .txt .d-dl dt {
width: 122px;
}
#facilities .others .wrap .list_wrap .listblock .box .txt .d-dl dd {
width: calc(100% - 122px);
}
/*
------------------------------------------------------------------------------------------------------------------------
service
------------------------------------------------------------------------------------------------------------------------
*/
#service .s-mv {
padding-bottom: 70px;
}
#service .s-mv h1 {
margin-bottom: 30px;
}
#service .s-mv .anchor_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 115px;
}
#service .s-mv .anchor_list li {
margin: 0 40px 10px 0;
}
#service .s-mv .anchor_list li a {
color: #bc9d63;
display: inline-block;
position: relative;
padding-right: 28px;
line-height: 1.5;
}
#service .s-mv .anchor_list li a:after {
content: "";
width: 18px;
height: 18px;
display: block;
position: absolute;
top: 4px;
right: 0;
background: url(../img/common/link_anchor.webp) no-repeat;
background-size: 18px;
background-position: center;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#service .s-mv .anchor_list li a[href^="#"]:after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
@media (hover: hover) and (pointer: fine) {
#service .s-mv .anchor_list li a:hover {
opacity: 0.7;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#service .s-mv .anchor_list li a:hover {
opacity: 0.7;
}
}
#service .s-mv .anchor_list li span {
color: #bc9d63;
display: inline-block;
position: relative;
line-height: 1.5;
padding-bottom: 5px;
}
#service .s-mv .anchor_list li span:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1px;
background: #bc9d63;
}
#service .s-mv .anchor_list li:last-child {
margin: 0;
}
@media screen and (max-width: 768px) {
#service .s-mv {
padding-bottom: 65px;
}
#service .s-mv .anchor_list {
margin-bottom: 50px;
}
}
#service .list {
padding: 80px 0 20px;
background: #f1f1ea;
}
#service .rec .bgblock .img img {
height: 700px;
-o-object-fit: cover;
object-fit: cover;
}
#service .rec .bgblock .txt .wrap .inner {
max-width: 704px;
}
@media screen and (max-width: 500px) {
#service .rec .bgblock .img img {
height: 800px;
-o-object-fit: cover;
object-fit: cover;
}
#service .rec .bgblock .txt .wrap .inner .btn-group {
margin-top: 35px;
}
#service .rec .bgblock .txt .wrap .inner .btn-group li {
margin: 0 0 20px;
}
#service .rec .bgblock .txt .wrap .inner .btn-group li a {
width: 100%;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
event-space
------------------------------------------------------------------------------------------------------------------------
*/
#event .s-mv {
padding-bottom: 115px;
}
#event .s-mv h1 {
margin-bottom: 30px;
}
#event .s-mv .anchor_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 40px;
}
#event .s-mv .anchor_list li {
margin: 0 40px 10px 0;
}
#event .s-mv .anchor_list li a {
color: #bc9d63;
display: inline-block;
position: relative;
padding-right: 28px;
line-height: 1.5;
}
#event .s-mv .anchor_list li a:after {
content: "";
width: 18px;
height: 18px;
display: block;
position: absolute;
top: 4px;
right: 0;
background: url(../img/common/link_anchor.webp) no-repeat;
background-size: 18px;
background-position: center;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#event .s-mv .anchor_list li a[href^="#"]:after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
@media (hover: hover) and (pointer: fine) {
#event .s-mv .anchor_list li a:hover {
opacity: 0.7;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#event .s-mv .anchor_list li a:hover {
opacity: 0.7;
}
}
#event .s-mv .anchor_list li span {
color: #bc9d63;
display: inline-block;
position: relative;
line-height: 1.5;
padding-bottom: 5px;
}
#event .s-mv .anchor_list li span:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 1px;
background: #bc9d63;
}
#event .s-mv .anchor_list li:last-child {
margin: 0;
}
#event .s-mv .slick-slider {
margin-bottom: 115px !important;
}
@media screen and (max-width: 768px) {
#event .s-mv {
padding-bottom: 65px;
}
#event .s-mv .anchor_list {
margin-bottom: 50px;
}
#event .s-mv .slick-slider {
margin-bottom: 35px !important;
}
}
#event .detail {
background: #f1f1ea;
padding: 90px 0 140px;
}
#event .detail .d-dl {
margin-bottom: 30px;
}
#event .detail .d-dl + p {
font-size: 1.4rem;
}
@media screen and (max-width: 768px) {
#event .detail {
padding: 80px 0 90px;
}
}
#event .rec .bgblock .img img {
height: 700px;
-o-object-fit: cover;
object-fit: cover;
}
#event .rec .bgblock .txt .wrap .inner {
max-width: 704px;
}
@media screen and (max-width: 500px) {
#event .rec .bgblock .img img {
height: 800px;
-o-object-fit: cover;
object-fit: cover;
}
#event .rec .bgblock .txt .wrap .inner .btn-group {
margin-top: 35px;
}
#event .rec .bgblock .txt .wrap .inner .btn-group li {
margin: 0 0 20px;
}
#event .rec .bgblock .txt .wrap .inner .btn-group li a {
width: 100%;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
access
------------------------------------------------------------------------------------------------------------------------
*/
#access .location {
margin-bottom: 80px;
}
#access .location .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 20px;
}
#access .location .flex .img {
width: 47.5vw;
margin-right: calc(-50vw + 540px);
}
#access .location .flex .img img {
width: 100%;
}
#access .location .flex .txt {
width: 50.81%;
padding-bottom: 50px;
}
#access .location .flex .txt h3 span {
font-size: 1rem;
}
#access .location .flex .txt p:not(.blink) {
font-weight: 700;
}
#access .location .iframe {
aspect-ratio: 16/9;
margin-bottom: 30px;
}
#access .location .iframe iframe {
width: 100%;
height: 100%;
}
@media screen and (max-width: 1140px) {
#access .location .flex .img {
margin-right: -30px;
}
}
@media screen and (max-width: 768px) {
#access .location .flex {
display: block;
padding-bottom: 37px;
position: relative;
margin-bottom: 10px;
}
#access .location .flex .img, #access .location .flex .txt {
width: 100%;
}
#access .location .flex .txt {
margin: 0 0 30px;
padding-bottom: 0;
}
#access .location .flex .txt .blink {
position: absolute;
bottom: 0;
left: 20px;
}
#access .location .flex .img {
margin: 0 -20px 30px 0;
width: calc(100% + 20px);
}
}
#access .route {
background: #f1f1ea;
padding: 90px 0 80px;
margin-bottom: 90px;
}
#access .route .fonts {
font-size: 1.4rem;
}
#access .route .airplane {
width: 100%;
margin-bottom: 50px;
border: 1px solid #daceb4;
}
#access .route .airplane th, #access .route .airplane td {
border: 1px solid #daceb4;
}
#access .route .airplane th {
background: #daceb4;
padding: 5px 2px;
border-right: 1px solid #fff;
}
#access .route .airplane th:last-child {
border-right: none;
}
#access .route .airplane td {
text-align: center;
padding: 5px 2px;
}
@media screen and (max-width: 768px) {
#access .route .btn-group li {
margin: 0 0 20px;
}
#access .route .btn-group li a {
width: 100%;
}
}
#access .transportation {
margin-bottom: 105px;
}
#access .transportation .fonts {
font-size: 1.4rem;
}
/*
------------------------------------------------------------------------------------------------------------------------
Nature Center
------------------------------------------------------------------------------------------------------------------------
*/
#naturecenter .rtr {
margin-bottom: 140px;
}
#naturecenter .rtr .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 130px;
}
#naturecenter .rtr .flex .img {
width: 45.3125vw;
margin-right: calc(-50vw + 540px);
}
#naturecenter .rtr .flex .img .slick-slider {
margin: 0;
}
#naturecenter .rtr .flex .img .slick-slide {
line-height: 0;
}
#naturecenter .rtr .flex .img .slick-slide img {
width: 100%;
}
#naturecenter .rtr .flex .img .slick-dots {
bottom: 30px;
line-height: 0;
}
#naturecenter .rtr .flex .img .slick-dots li {
width: 6px;
height: 6px;
}
#naturecenter .rtr .flex .img .slick-dots li button {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ece3d2;
margin: 0;
padding: 0;
font-size: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#naturecenter .rtr .flex .img .slick-dots li button:before {
display: none;
}
@media (hover: hover) and (pointer: fine) {
#naturecenter .rtr .flex .img .slick-dots li button:hover {
background: #bc9d63;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#naturecenter .rtr .flex .img .slick-dots li button:hover {
background: #bc9d63;
}
}
#naturecenter .rtr .flex .img .slick-dots li.slick-active button {
background: #bc9d63;
}
#naturecenter .rtr .flex .txt {
width: 53.7%;
margin: 0 10.55% 0 0;
font-weight: 700;
}
#naturecenter .rtr .flex .txt .open {
display: inline-block;
border-bottom: 1px solid #b08b46;
padding-right: 59px;
position: relative;
margin-top: 25px;
color: #b08b46;
}
#naturecenter .rtr .flex .txt .open .date {
font-size: 3rem;
margin-right: 10px;
}
#naturecenter .rtr .flex .txt .open .fs {
font-size: 1.8rem;
}
#naturecenter .rtr .flex .txt .open:after {
content: "";
position: absolute;
bottom: 5px;
right: 0;
width: 44.5px;
height: 63px;
background: url(../img/naturecenter/rtr_icon.webp) no-repeat;
background-size: 44.5px;
}
#naturecenter .rtr #movie {
position: relative;
}
#naturecenter .rtr #movie video {
width: 100%;
}
#naturecenter .rtr #movie .btn {
position: absolute;
line-height: 0;
width: 100px;
height: 134px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
cursor: pointer;
}
#naturecenter .rtr .movie_caption {
text-align: right;
font-size: 11px;
color: #777;
line-height: 1.5;
}
@media screen and (max-width: 768px) {
#naturecenter .rtr {
margin-bottom: 90px;
}
#naturecenter .rtr .flex {
display: block;
margin-bottom: 50px;
}
#naturecenter .rtr .flex .img, #naturecenter .rtr .flex .txt {
width: 100%;
}
#naturecenter .rtr .flex .txt {
margin: 0 0 50px;
}
#naturecenter .rtr .flex .txt .open {
margin-top: 0;
}
}
#naturecenter .enjoy {
background: #f1f1ea;
padding: 135px 0 120px;
margin-bottom: 120px;
}
#naturecenter .enjoy .dd-flex {
margin-top: 65px;
}
#naturecenter .enjoy .dd-flex .box .txt .ttl span {
font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
#naturecenter .enjoy {
padding: 70px 0 60px;
margin-bottom: 80px;
}
}
#naturecenter .eco {
margin-bottom: 175px;
}
#naturecenter .eco .dt-flex {
margin-top: 60px;
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
#naturecenter .eco {
margin-bottom: 80px;
}
}
#naturecenter .gallery {
background: #f1f1ea;
padding: 175px 0 187px;
}
#naturecenter .gallery .img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#naturecenter .gallery .img li {
width: 24.07%;
margin: 0 1.24% 13px 0;
line-height: 0;
}
#naturecenter .gallery .img li img {
width: 100%;
}
#naturecenter .gallery .img li:nth-child(4n) {
margin: 0 0 13px;
}
#naturecenter .gallery .gallery_caption {
text-align: right;
font-size: 11px;
color: #777;
}
@media screen and (max-width: 768px) {
#naturecenter .gallery {
padding: 80px 0 90px;
}
#naturecenter .gallery .img li {
width: 49%;
margin: 0 2% 10px 0;
}
#naturecenter .gallery .img li:nth-child(2n) {
margin: 0 0 10px;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
gallery
------------------------------------------------------------------------------------------------------------------------
*/
#gallery .tab_btn {
margin-bottom: 40px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#gallery .tab_btn li {
width: auto;
margin-right: 1.4%;
}
#gallery .tab_btn li:last-child {
margin-right: 0;
}
#gallery .tab_area {
margin-bottom: 105px;
}
#gallery .tab_area .tab_block .list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#gallery .tab_area .tab_block .list li {
width: calc((100% - 40px) / 5);
margin: 0 10px 10px 0;
line-height: 0;
}
#gallery .tab_area .tab_block .list li a {
display: block;
aspect-ratio: 1/1;
overflow: hidden;
}
#gallery .tab_area .tab_block .list li a img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
#gallery .tab_area .tab_block .list li:nth-child(5n) {
margin: 0 0 10px;
}
@media screen and (max-width: 768px) {
#gallery .tab_area .tab_block .list li {
width: calc((100% - 20px) / 3);
}
#gallery .tab_area .tab_block .list li:nth-child(5n) {
margin-right: 10px;
}
#gallery .tab_area .tab_block .list li:nth-child(3n) {
margin-right: 0;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
faq
------------------------------------------------------------------------------------------------------------------------
*/
#faq {
margin-bottom: 145px;
}
#faq .tab_btn {
margin-bottom: 20px;
}
#faq .tab_btn li:nth-child(3n) {
margin-right: 1.4%;
}
#faq .tab_btn li:last-child {
margin-right: 0;
}
#faq .tab_area .tab_block .faq dt {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid #e0dcc7;
position: relative;
}
#faq .tab_area .tab_block .faq dt span:not(.q) {
font-size: 2.4rem;
line-height: 1.5;
padding: 30px 70px 30px 0;
width: calc(100% - 85px);
}
#faq .tab_area .tab_block .faq dt .q {
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
display: block;
width: 85px;
height: 48px;
line-height: 48px;
font-size: 4.8rem;
font-weight: 700;
color: #bc9d63;
text-align: center;
padding-top: 22px;
}
#faq .tab_area .tab_block .faq dt:before {
content: "";
width: 24px;
height: 24px;
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23bc9d63%3B%7D.cls-1%2C.cls-2%7Bstroke-width%3A0px%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%2F%3E%3Crect%20class%3D%22cls-2%22%20x%3D%227%22%20y%3D%2211%22%20width%3D%2210%22%20height%3D%222%22%20transform%3D%22translate(0%2024)%20rotate(-90)%22%2F%3E%3Crect%20class%3D%22cls-2%22%20x%3D%227%22%20y%3D%2211%22%20width%3D%2210%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E");
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
}
#faq .tab_area .tab_block .faq dt.active {
border-bottom: 1px solid rgba(0, 0, 0, 0);
}
#faq .tab_area .tab_block .faq dt.active:before {
width: 24px;
height: 24px;
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c8c5c5%3B%7D.cls-1%2C.cls-2%7Bstroke-width%3A0px%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22cls-1%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%2F%3E%3Crect%20class%3D%22cls-2%22%20x%3D%227%22%20y%3D%2211%22%20width%3D%2210%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E");
background-size: 100%;
background-repeat: no-repeat;
}
#faq .tab_area .tab_block .faq dd {
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 96px;
border-bottom: 1px solid #e0dcc7;
display: none;
}
#faq .tab_area .tab_block .faq dd .a {
font-family: "Cardo", serif;
font-weight: 400;
line-height: 1.875;
display: block;
width: 85px;
height: 48px;
line-height: 48px;
font-size: 4.8rem;
font-weight: 700;
color: #969191;
text-align: center;
padding-top: 22px;
}
#faq .tab_area .tab_block .faq dd .txt {
font-size: 1.6rem;
line-height: 1.625;
padding: 20px 30px 20px 0;
width: calc(100% - 85px);
}
@media screen and (max-width: 768px) {
#faq {
margin-bottom: 90px;
}
#faq .tab_area .tab_block .faq dt span:not(.q) {
font-size: 1.8rem;
width: calc(100% - 60px);
padding-right: 33px;
}
#faq .tab_area .tab_block .faq dt .q {
font-size: 3.5rem;
width: 60px;
}
#faq .tab_area .tab_block .faq dt:before {
right: 0;
}
#faq .tab_area .tab_block .faq dd .a {
font-size: 3.5rem;
width: 60px;
}
#faq .tab_area .tab_block .faq dd .txt {
width: calc(100% - 60px);
}
}
/*
------------------------------------------------------------------------------------------------------------------------
contact
------------------------------------------------------------------------------------------------------------------------
*/
#contact {
margin-bottom: 90px;
}
#contact .lead {
background: #f1f1ea;
padding: 55px 0 50px;
text-align: center;
margin-bottom: 65px;
}
#contact .lead .name {
font-size: 2.4rem;
margin: -20px 0 25px;
padding-bottom: 20px;
border-bottom: 1px solid #e0dcc7;
}
#contact .lead .tel a {
color: #9c7b2b;
font-size: 2.4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#contact .lead .tel a:before {
content: "";
width: 33px;
height: 33px;
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2033.19%2033.19%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%239c7b2b%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M16.59%2C0C7.44%2C0%2C0%2C7.44%2C0%2C16.59s7.44%2C16.6%2C16.59%2C16.6%2C16.6-7.45%2C16.6-16.6S25.75%2C0%2C16.59%2C0ZM22.2%2C25.77c-1.31.85-3.83%2C0-5.61-1.33-1.38-1.04-3.19-2.83-4.49-4.83-1.38-2.12-2.2-4.38-2.58-6.07-.49-2.16-.24-4.81%2C1.08-5.66.66-.43%2C2.13-.85%2C2.34-.81%2C0%2C0%2C.58.89.7%2C1.09l1.93%2C2.98c.14.22-.41.96-.84%2C1.27-.57.42-1.66.56-1.66.56-.4.29-.32.71-.31%2C1.53.01%2C1%2C.78%2C2.47%2C1.53%2C3.69.81%2C1.18%2C1.84%2C2.48%2C2.75%2C2.9.74.34%2C1.1.58%2C1.52.34%2C0%2C0%2C.57-.94%2C1.19-1.29.46-.26%2C1.36-.46%2C1.5-.24l1.93%2C2.98c.13.2.71%2C1.09.71%2C1.09-.05.21-1.03%2C1.38-1.69%2C1.81Z%22%2F%3E%3C%2Fsvg%3E");
background-size: 100%;
background-repeat: no-repeat;
margin-right: 10px;
}
@media screen and (min-width: 769px) {
#contact .lead .tel a {
pointer-events: none;
}
}
#contact .form .form_dl {
margin-bottom: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-top: 1px solid #e0dcc7;
}
#contact .form .form_dl dt {
width: 308px;
padding: 37px 0 37px 88px;
color: #b08b46;
position: relative;
border-bottom: 1px solid #e0dcc7;
}
#contact .form .form_dl dt span {
display: block;
width: 69px;
height: 27px;
background: #e60000;
color: #fff;
font-size: 1.3rem;
font-weight: 700;
line-height: 27px;
border-radius: 4px;
text-align: center;
position: absolute;
top: 40px;
left: 8px;
}
#contact .form .form_dl dd {
width: calc(100% - 308px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 25px 20px 25px 0;
border-bottom: 1px solid #e0dcc7;
}
#contact .form .form_dl dd input[type=text], #contact .form .form_dl dd input[type=tel], #contact .form .form_dl dd input[type=email], #contact .form .form_dl dd textarea {
background: none;
border: 1px solid #b8b8b8;
width: 100%;
font-size: 1.6rem;
padding: 11px 10px;
}
#contact .form .form_dl dd textarea {
min-height: 400px;
}
#contact .form .form_dl dd .cp_ipselect {
overflow: hidden;
width: 100%;
text-align: center;
position: relative;
}
#contact .form .form_dl dd .cp_ipselect select {
width: 100%;
padding-right: 1em;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis;
outline: none;
background: transparent;
background-image: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: left;
border: 1px solid #999;
padding: 12px 38px 12px 8px;
color: #666666;
}
#contact .form .form_dl dd .cp_ipselect select:-ms-expand {
display: none;
}
#contact .form .form_dl dd .cp_ipselect:before {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
right: 0.9em;
width: 0;
height: 0;
padding: 0;
content: "";
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666666;
pointer-events: none;
}
#contact .form .form_dl dd .top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 10px;
}
#contact .form .form_dl dd .top span {
margin-right: 20px;
}
#contact .form .form_dl dd .top input {
width: 168px;
margin-right: 30px;
}
#contact .form .form_dl dd .top .cp_ipselect {
width: 168px;
}
#contact .form .form_dl dd input[type=checkbox] {
display: inline-block;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
margin-right: 5px;
}
#contact .form .form_dl dd input[type=radio] {
display: inline-block;
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
margin-right: 5px;
}
#contact .form .form_dl dd .blink {
margin-top: 15px;
}
#contact .form .form_dl dd.radio {
padding: 35px 20px 35px 0;
}
#contact .form .form_dl dd.radio label {
margin-right: 15px;
display: inline-block;
}
#contact .form .form_dl dd.radio label:last-child {
margin-right: 0;
}
#contact .form .form_dl div[data-class=wpcf7cf_group] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
#contact .form .form_ul {
margin-bottom: 55px;
}
#contact .form .form_ul li {
position: relative;
margin-bottom: 10px;
}
#contact .form .form_ul li .rq {
display: block;
width: 69px;
height: 27px;
background: #e60000;
color: #fff;
font-size: 1.3rem;
font-weight: 700;
line-height: 27px;
border-radius: 4px;
text-align: center;
position: absolute;
top: 3px;
left: 0;
}
#contact .form .form_ul li .rq + .wpcf7-form-control-wrap {
padding: 0 0 0 89px;
display: block;
}
#contact .form .form_ul li .rq + .wpcf7-form-control-wrap input[type=checkbox] {
display: inline;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
margin-right: 5px;
}
#contact .form .submit input {
width: 200px;
height: 40px;
line-height: 38px;
text-align: center;
color: #9c7b2b;
background: none;
border-radius: 50px;
border: 1px solid #9c7b2b;
margin: 0 auto;
display: block;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media (hover: hover) and (pointer: fine) {
#contact .form .submit input:hover {
background: #9c7b2b;
color: #f1f1ea;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#contact .form .submit input:hover {
background: #9c7b2b;
color: #f1f1ea;
}
}
#contact .form .submit .wpcf7-spinner {
display: none;
}
#contact.thanks {
margin-bottom: 0;
}
#contact.thanks .lead {
margin-bottom: 0;
padding: 80px 0;
}
#contact.thanks .lead .blink {
margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
#contact .form .form_dl {
display: block;
}
#contact .form .form_dl dt, #contact .form .form_dl dd {
width: 100%;
}
#contact .form .form_dl dt {
padding: 20px 0 15px 87px;
border-bottom: none;
}
#contact .form .form_dl dt span {
top: 22px;
}
#contact .form .form_dl dd {
padding-top: 0;
padding-right: 0;
}
#contact .form .form_dl dd textarea {
min-height: 250px;
}
#contact .form .form_dl dd .top {
margin: 0;
}
#contact .form .form_dl dd .top span:not(.wpcf7-form-control-wrap) {
width: 64px;
margin: 0 30px 10px 0;
}
#contact .form .form_dl dd .top .wpcf7-form-control-wrap {
margin-right: 0 !important;
}
#contact .form .form_dl dd .top .wpcf7-form-control-wrap input {
width: 100%;
}
#contact .form .form_dl dd .top .cp_ipselect, #contact .form .form_dl dd .top .wpcf7-form-control-wrap {
width: calc(100% - 94px);
margin: 0 0 10px;
}
#contact .form .form_dl dd.radio {
padding: 0 0 25px 0;
}
#contact .form .form_dl div[data-class=wpcf7cf_group] {
display: block;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
txtpage
------------------------------------------------------------------------------------------------------------------------
*/
#txtpage {
margin-bottom: 135px;
}
#txtpage .lead {
margin-bottom: 75px;
}
#txtpage .block {
margin-bottom: 80px;
}
#txtpage .block .txtlink {
word-break: break-all;
}
@media screen and (max-width: 768px) {
#txtpage {
margin-bottom: 90px;
}
}
/*
------------------------------------------------------------------------------------------------------------------------
sitemap
------------------------------------------------------------------------------------------------------------------------
*/
#sitemap .contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 130px;
}
#sitemap .contents .sitemap {
margin-right: 95px;
}
#sitemap .contents .sitemap li {
margin-bottom: 20px;
}
#sitemap .contents .sitemap li a {
display: inline-block;
position: relative;
line-height: 1.5;
font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
#sitemap .contents .sitemap li a:hover {
text-decoration: underline;
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
#sitemap .contents .sitemap li a:hover {
text-decoration: underline;
}
}
#sitemap .contents .sitemap li .mlink {
padding: 0 0 0 26px;
}
#sitemap .contents .sitemap li .mlink:before {
content: "";
width: 18px;
height: 18px;
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23333333%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M9%2C1c4.41%2C0%2C8%2C3.59%2C8%2C8s-3.59%2C8-8%2C8S1%2C13.41%2C1%2C9%2C4.59%2C1%2C9%2C1M9%2C0C4.03%2C0%2C0%2C4.03%2C0%2C9s4.03%2C9%2C9%2C9%2C9-4.03%2C9-9S13.97%2C0%2C9%2C0h0Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%226.81%207%2012%209%206.81%2011%207.81%209%206.81%207%22%2F%3E%3C%2Fsvg%3E");
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
top: 4px;
left: 0;
}
#sitemap .contents .sitemap li ul {
padding: 0 0 0 26px;
margin-top: 5px;
}
#sitemap .contents .sitemap li ul li {
margin-bottom: 5px;
}
#sitemap .contents .sitemap li ul li a {
padding: 0 0 0 17px;
}
#sitemap .contents .sitemap li ul li a:before {
content: "";
width: 5.1875px;
height: 4px;
display: block;
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205.19%204%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23333333%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%220%200%205.19%202%200%204%201%202%200%200%22%2F%3E%3C%2Fsvg%3E");
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
top: 12px;
left: 0;
}
#sitemap .contents .sitemap:last-child {
margin-right: 0;
}
@media screen and (max-width: 768px) {
#sitemap .contents {
display: block;
margin-bottom: 90px;
}
#sitemap .contents .sitemap {
margin: 0;
}
}