@charset "utf-8";

/*****************************************************************************
reset 
*****************************************************************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}

ul,ol {
list-style-type: none;
}

em,strong,th,address {
font-style: normal;
font-weight: normal;
text-align: left;
}

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}

img,
object,
embed {
border: 0;
vertical-align: top;
}

img {
max-width: 100%;
height: auto;
}

hr {
border-top: 1px solid #b0b0b0;
margin-bottom: 1.5em;
}

table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
}

li {
list-style-type: none;
}

strong {
font-weight: bold;
}

/*****************************************************************************
linkColor 
*****************************************************************************/

a:link {
color: #b5923e;
transition: 0.6s;
}

a:visited {
color: #b5923e;
}

a:hover,a:active {
color: #b5923e;
text-decoration: none;
}

/*****************************************************************************
clearfix 
*****************************************************************************/

.cb {
clear: both;
font-size: 1%;
height: 0;
line-height: 0;
}

.clearfix:after {
content: ".";
display: block;
height: 0.1px;
font-size: 0.1em;
line-height: 0; 
clear: both;
visibility: hidden; 
}

.clearfix {
display: inline-block;
}

/* Hide from IE-mac \*/

* html .clearfix { height: 1%; }
.clearfix { display:block; }

/* End hide from IE-mac */

/*****************************************************************************
base
*****************************************************************************/

html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
}

body {
font-family: 'Noto Serif JP', serif;
line-height: 1.5;
font-size: 1.8rem;
color: #464646;
overflow-x: hidden;
text-align: justify;
text-justify: inter-ideograph;
}
@media screen and (max-width: 670px) {
body {
font-size: 1.6rem;
}
}


.noto-sans {
font-family: 'Noto Sans JP', sans-serif;
}


.button-brown a {
position: relative;
overflow: hidden;
z-index: 1;
}
.button-brown a:after {		
position: absolute;
top: 0;
left: -30%;
content: '';
width: 130%;
height: 100%;
background: #b5923e;
transform-origin: left top;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: skewX(30deg) scale(0, 1);
z-index: -1;
}
@media screen and (max-width: 1024px) {
.button-brown a:after {
display: none;
}
}
.button-brown a:hover:after {
transform-origin: right top;
transform: skewX(30deg) scale(1, 1);
}
@media screen and (max-width: 1024px) {
.button-brown a:hover:after {
display: none;
}
}


.button-gray a {
position: relative;
overflow: hidden;
z-index: 1;
}
.button-gray a:after {		
position: absolute;
top: 0;
left: -30%;
content: '';
width: 130%;
height: 100%;
background: #464646;
transform-origin: left top;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: skewX(30deg) scale(0, 1);
z-index: -1;
}
@media screen and (max-width: 1024px) {
.button-gray a:after {
display: none;
}
}
.button-gray a:hover:after {
transform-origin: right top;
transform: skewX(30deg) scale(1, 1);
}
@media screen and (max-width: 1024px) {
.button-gray a:hover:after {
display: none;
}
}


.button-arrow {
position: relative;
}
.button-arrow:after {
content: '';
background: url(/assets/img/common/arrow01.png) no-repeat left top;
background-size: 6px auto;
width: 6px;
height: 10px;
position: absolute;
top: 50%;
right: 27px;
transform: translate(0,-50%);
z-index: 9;
}
@media screen and (max-width: 500px) {
.button-arrow:after {
right: 17px;
}
}

/*****************************************************************************
opening 
*****************************************************************************/

#loader-bg {
width: 100%;
height: 100%;
background: #ffffff;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 1;
}
#loader {
margin: -15px 0 0 -15px;
position: fixed;
top: 50%;
left: 50%;
display: none;
z-index: 2;
}
.opening {
width: 100%;
height: 100%;
background-color: #ffffff;
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9999;
animation: fadeEnd 2s linear 14s forwards;
-webkit-animation: fadeEnd 2s linear 14s forwards;
}
.opening-img00 {
width: 100%;
height: 100vh;
background: url(/assets/img/home/opening-img00.jpg) no-repeat center bottom;
background-size: cover;
position: absolute;
top: 0;
left: 0;
animation: fadeOut 2s linear 2s forwards;
-webkit-animation: fadeOut 2s linear 2s forwards;
z-index: 1000;
}
.opening-img01 {
width: 100%;
height: 100vh;
background: url(/assets/img/home/opening-img01.jpg) no-repeat center bottom;
background-size: cover;
position: absolute;
top: 0;
left: 0;
animation: fadeOut 2s linear 2s forwards;
-webkit-animation: fadeOut 2s linear 2s forwards;
z-index: 999;
}
.opening-img02 {
width: 100%;
height: 100vh;
background: url(/assets/img/home/opening-img02.jpg) no-repeat center bottom;
background-size: cover;
position: absolute;
top: 0;
left: 0;
animation: fadeOut 2s linear 4s forwards;
-webkit-animation: fadeOut 2s linear 4s forwards;
z-index: 998;
}
.opening-img03 {
width: 100%;
height: 100vh;
background: url(/assets/img/home/opening-img03.jpg) no-repeat center bottom;
background-size: cover;
position: absolute;
top: 0;
left: 0;
animation: fadeOut 2s linear 6s forwards;
-webkit-animation: fadeOut 2s linear 6s forwards;
z-index: 997;
}
.opening-img04 {
width: 100%;
height: 100vh;
background: url(/assets/img/home/opening-img04.jpg) no-repeat center bottom;
background-size: cover;
position: absolute;
top: 0;
left: 0;
animation: fadeOut 2s linear 8s forwards;
-webkit-animation: fadeOut 2s linear 8s forwards;
z-index: 996;
}
.opening-img05 {
width: 100%;
height: 100vh;
background: url(/assets/img/home/opening-img05.jpg) no-repeat center bottom;
background-size: cover;
position: absolute;
top: 0;
left: 0;
animation: fadeOut 2s linear 10s forwards;
-webkit-animation: fadeOut 2s linear 10s forwards;
z-index: 995;
}
.opening-img06 {
width: 100%;
height: 100vh;
background: url(/assets/img/home/opening-img06.jpg) no-repeat center bottom;
background-size: cover;
position: absolute;
top: 0;
left: 0;
animation: fadeOut 2s linear 12s forwards;
-webkit-animation: fadeOut 2s linear 12s forwards;
z-index: 994;
}
@keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@-webkit-keyframes fadeOut {
0% {opacity: 1}
100% {opacity: 0}
}
@keyframes fadeEnd {
0% {opacity: 1}
100% {opacity: 0}
}
@-webkit-keyframes fadeEnd {
0% {opacity: 1}
100% {opacity: 0}
}

/*****************************************************************************
header 
*****************************************************************************/

.header {
width: 100%;
height: 140px;
background: #ffffff;
position: fixed;
top: 0;
left: 0;
z-index: 999;
animation: fadeIn 1s ease 1 normal;
-webkit-animation: fadeIn 1s ease 1 normal;
transition: 0.6s;
}
.header.smaller {
height: 100px;
}
@media screen and (max-width: 500px) {
.header {
height: 65px;
}
.header.smaller {
height: 65px;
}
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
.header-logo {
width: 360px;
position: absolute;
top: 50%;
left: 50px;
transform: translate(0,-50%);
}
@media screen and (max-width: 1780px) {
.header-logo {
width: 260px;
}
}
@media screen and (max-width: 1280px) {
.header-logo {
width: 230px;
}
}
@media screen and (max-width: 1024px) {
.header-logo {
left: 30px;
}
}
@media screen and (max-width: 500px) {
.header-logo {
width: 165px;
left: 15px;
}
}
.header__nav-wrapper {
height: 100%;
margin: 0 50px;
}
@media screen and (max-width: 1000px) {
.header__nav-wrapper {
margin: 0 30px;
}
}
@media screen and (max-width: 500px) {
.header__nav-wrapper {
margin: 0 15px;
}
}
@media screen and (max-width: 1000px) {
.header__nav-wrapper {
width: 100%;
height: 100vh;
box-sizing: border-box;
background: #ffffff;
margin: 0;
padding: 50px;
position: absolute;
top: 0;
left: 0;
transform: translateY(30px);
transition: 0.3s;
visibility: hidden;
opacity: 0;
z-index: 999;
}
.state-nav-open .header__nav-wrapper {
transform: translateX(0);
visibility: visible;
opacity: 1;
display: block;
}
}
@media screen and (min-width: 1001px) {
.header__nav-wrapper {
display: block !important;
}
}
.header__nav-sub {
padding: 19px 0 42px;
display: flex;
justify-content: flex-end;
transition: 0.6s;
}
.smaller .header__nav-sub {
padding: 19px 0 17px;
}
@media screen and (max-width: 1000px) {
.header__nav-sub {
display: none;
}
}
.header__nav-sub li {
border-left: 1px solid #a2a2a2;
margin-left: 7px;
padding-left: 7px;
line-height: 1;
font-size: 1.5rem;
display: flex;
align-items: center;
}
.header__nav-sub li:first-child {
border-left: none;
margin-left: 0;
padding-left: 0;
}
.header__nav-sub li img {
width: 17px;
margin-right: 4px;
}
.header__nav-sub li a {
display: flex;
align-items: center;
color: #464646;
text-decoration: none;
}
.header__nav-sub li a:hover {
opacity: 0.5;
}
.header__nav {
display: flex;
justify-content: flex-end;
}
@media screen and (max-width: 1000px) {
.header__nav {
width: 100%;
display: block;
}
}
.header__nav li {
padding-left: 40px;
}
@media screen and (max-width: 1780px) {
.header__nav li {
padding-left: 20px;
}
}
@media screen and (max-width: 1000px) {
.header__nav li {
margin-bottom: 15px;
padding-left: 0;
}
}
.header__nav li a {
box-sizing: border-box;
/*font-size: 2.2rem;*/
font-size: 1.1458333vw;
color: #464646;
text-decoration: none;
z-index: 1;
}
@media screen and (max-width: 1000px) {
.header__nav li a {
font-size: 1.8rem;
}
}
.header__nav li a:hover {
opacity: 0.5;
}
.header__nav li.cr a {
opacity: 0.5;
}


.header__nav_sp {
display: none;
}
@media screen and (max-width: 1000px) {
.header__nav_sp {
display: block;
}
}
.header__nav_sp-reservation {
margin: 30px 0;
text-align: center;
font-size: 1.8rem;
}
.header__nav_sp-reservation a {
background: #444444;
padding: 10px;
color: #ffffff;
text-decoration: none;
display: block;
}
.header__nav_sp-live {
margin-bottom: 30px;
font-size: 1.6rem;
}
.header__nav_sp-live a {
display: flex;
align-items: center;
color: #464646;
text-decoration: none;
}
.header__nav_sp-live img {
width: 30px;
margin-left: 15px;
}
.header__nav_sp-wrapper {
display: flex;
justify-content: space-between;
}
.header__nav_sp-sns {
display: flex;
}
.header__nav_sp-sns li {
width: 30px;
margin-right: 12px;
}
.header__nav_sp-language {
font-size: 1.4rem;
}
.header__nav_sp-language a {
color: #464646;
text-decoration: none;
}


.sp-button {
background: none;
padding: 0;
position: absolute;
top: 50%;
right: 50px;
transform: translate(0,-50%);
height: 60px;
width: 30px;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
display: none;
z-index: 9999;
}
@media screen and (max-width: 1000px) {
.sp-button {
right: 30px;
}
}
@media screen and (max-width: 500px) {
.sp-button {
right: 15px;
}
}
.sp-button-box {
height: 20px;
margin-bottom: 5px;
position: relative;
}
@media screen and (max-width: 500px) {
.sp-button-box {
margin-bottom: 8px;
}
}
.sp-button span {
position: absolute;
display: block;
background: #444444;
width: 30px;
height: 2px;
transition: 0.3s;
}
.sp-button span:nth-of-type(1) {
top: 0;
}
.sp-button span:nth-of-type(2) {
top: 9px;
}
.sp-button span:nth-of-type(3) {
bottom: 0;
}
.sp-button label {
line-height: 1;
font-size: 1.1rem;
}
@media screen and (max-width: 1000px) {
.sp-button {
display: block;
}
.state-nav-open .sp-button span:nth-of-type(1) {
transform: rotateZ(45deg) translate(6.5px,6.5px);
}
.state-nav-open .sp-button span:nth-of-type(2) {
opacity: 0;
}
.state-nav-open .sp-button span:nth-of-type(3) {
transform: rotateZ(-45deg) translate(6.5px,-6.5px);
}
}

/*****************************************************************************
visual 
*****************************************************************************/

.home__visual {
margin: 0 50px;
padding-top: 140px;
position: relative;
}
@media screen and (max-width: 1024px) {
.home__visual {
margin: 0 30px;
}
}
@media screen and (max-width: 500px) {
.home__visual {
margin: 0 15px;
padding-top: 65px;
}
}
.home__visual-nav {
width: 100%;
padding: 10px 0;
/*
display: flex;
justify-content: space-between;
align-items: center;
*/
background: rgba(0,0,0,0.5);
position: absolute;
top: 140px;
left: 0;
}
@media screen and (max-width: 1680px) {
.home__visual-nav {
background: rgba(68,68,68,1);
position: relative;
top: auto;
left: auto;
}
}
@media screen and (max-width: 1024px) {
.home__visual-nav {
padding: 0;
}
}
/*
.home__visual-nav-news {
width: 35%;
padding: 0 30px;
font-size: 1.6rem;
order: 1;
}
@media screen and (max-width: 900px) {
.home__visual-nav-news {
width: 100%;
background: #ffffff;
padding: 20px 0;
}
}
.home__visual-nav-news span {
border-right: 1px solid #ffffff;
margin-right: 15px;
padding-right: 15px;
line-height: 1;
color: #ffffff;
display: inline-block;
}
@media screen and (max-width: 900px) {
.home__visual-nav-news span {
border-right: 1px solid #464646;
color: #464646;
}
}
.home__visual-nav-news a {
color: #ffffff;
}
@media screen and (max-width: 900px) {
.home__visual-nav-news a {
color: #464646;
}
}
*/
.home__visual-nav-link {
display: flex;
align-items: center;
flex-wrap: wrap;
/*justify-content: center;*/
}
@media screen and (max-width: 500px) {
.home__visual-nav-link {
display: block;
}
}
.home__visual-nav-link li {
/*width: 20%;*/
width: 25%;
box-sizing: border-box;
border-left: 1px solid rgba(146,146,146,0.5);
padding: 0 30px;
font-size: 1.0416666vw;
}
@media screen and (max-width: 1780px) {
.home__visual-nav-link li {
padding: 0 15px;
}
}
/*
@media screen and (max-width: 1680px) {
.home__visual-nav-link li {
width: 50%;
}
}
*/
@media screen and (max-width: 1024px) {
.home__visual-nav-link li {
width: 50%;
border-bottom: 1px solid rgba(146,146,146,0.5);
font-size: 1.6rem;
}
}
/*
@media screen and (max-width: 900px) {
.home__visual-nav-link li {
border-bottom: 1px solid rgba(146,146,146,0.5);
}
}
*/
@media screen and (max-width: 500px) {
.home__visual-nav-link li {
width: 100%;
border-left: none;
padding: 0 15px;
}
}
.home__visual-nav-link li:first-child {
border-left: none;
/*padding-left: 0;*/
}
@media screen and (max-width: 1024px) {
.home__visual-nav-link li:first-child {
width: 100%;
}
}
/*
@media screen and (max-width: 1680px) {
.home__visual-nav-link li:first-child {
border-left: 1px solid rgba(146,146,146,0.5);
padding-left: 30px;
}
}
@media screen and (max-width: 900px) {
.home__visual-nav-link li:first-child {
border-left: none;
}
}
@media screen and (max-width: 500px) {
.home__visual-nav-link li:first-child {
padding-left: 15px;
}
}
*/
.home__visual-nav-link li a {
padding: 15px 0;
display: flex;
align-items: center;
color: #ffffff;
text-decoration: none;
}
.home__visual-nav-link li a:hover {
opacity: 0.5;
}
.home__visual-nav-link li img {
width: 30px;
margin-right: 5px;
}
@media screen and (max-width: 500px) {
.home__visual-nav-link li img {
width: 20px;
min-width: 20px;
}
}
.home__visual-wrapper {
position: relative;
}
.home__visual-title {
text-shadow: 0px 0px 10px #333333;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
letter-spacing: 5px;
line-height: 2;
font-size: 4.5rem;
color: #ffffff;
position: absolute;
top: 20%;
right: 5%;
z-index: 9;
}
@media screen and (max-width: 1440px) {
.home__visual-title {
font-size: 3.6rem;
}
}
@media screen and (max-width: 900px) {
.home__visual-title {
top: 10%;
}
}
@media screen and (max-width: 500px) {
.home__visual-title {
font-size: 2.6rem;
}
}
.home__visual-item {
overflow: hidden;
}
.home__visual-item-title {
color: #ffffff;
position: absolute;
top: 15.625%;
left: 10.416666%;
right: 10.416666%;
z-index: 9;
}
.home__visual-bg {
position: relative;
}
.home__visual .slick-slider,
.home__visual .slick-list {
margin: 0;
padding: 0;
line-height: 0;
}
.home__visual-bg:after {
content: '';
padding-top: 46.703296703%;
display: block;
}
@media screen and (max-width: 900px) {
.home__visual-bg:after {
padding-top: 600px;
}
}
@media screen and (max-width: 500px) {
.home__visual-bg:after {
padding-top: 400px;
}
}
.home__visual-bg img {
}
.current .home__visual-bg {
-webkit-animation: scale-up 10s linear both;
animation: scale-up 10s linear both;
}
@-webkit-keyframes scale-up {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes scale-up {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.home__visual-item .bg-switch {
background-position: center top;
background-size: cover;
}
.home__visual-bg.hide_sp {
}
@media screen and (max-width: 900px) {
.home__visual-bg.hide_sp {
display: none;
}
}
.home__visual-bg.hide_pc {
display: none;
}
@media screen and (max-width: 900px) {
.home__visual-bg.hide_pc {
display: block;
}
}


.home__visual .slick-dots {
bottom: 43px;
}
.home__visual .slick-dots li {
width: 135px;
height: 5px;
margin: 0 10px;
}
@media screen and (max-width: 1440px) {
.home__visual .slick-dots li {
width: 100px;
}
}
@media screen and (max-width: 900px) {
.home__visual .slick-dots li {
width: 50px;
}
}
@media screen and (max-width: 500px) {
.home__visual .slick-dots li {
width: 25px;
height: 3px;
margin: 0 5px;
}
}
.home__visual .slick-dots li button:before {
content: '';
opacity: .4;
background: #ffffff;
width: 135px;
height: 5px;
}
@media screen and (max-width: 1440px) {
.home__visual .slick-dots li button:before {
width: 100px;
}
}
@media screen and (max-width: 900px) {
.home__visual .slick-dots li button:before {
width: 50px;
}
}
@media screen and (max-width: 500px) {
.home__visual .slick-dots li button:before {
width: 25px;
height: 3px;
}
}
.home__visual .slick-dots li.slick-active button:before {
opacity: .9;
}
.home__visual .slick-dotted.slick-slider {
margin-bottom: 0;
}

/*****************************************************************************
contents 
*****************************************************************************/
.home__point {
background: url(/assets/img/home/point-bg.jpg) no-repeat center bottom;
background-size: 100% auto;
position: relative;
}
@media screen and (max-width: 900px) {
.home__point {
background: url(/assets/img/home/point-bg_sp.jpg) no-repeat center bottom;
background-size: 100% auto;
}
}
.home__point:after {
content: '';
padding-top: 34.791666%;
display: block;
}
@media screen and (max-width: 900px) {
.home__point:after {
padding-top: 64.791666%;
}
}
.home__point-title {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
margin: 10% 0 0 5%;
}
@media screen and (max-width: 900px) {
.home__point-title {
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
margin: 5% 30px 0 30px;
}
}
@media screen and (max-width: 500px) {
.home__point-title {
margin: 5% 15px 0 15px;
}
}
.home__point-title h2 {
margin-left: 50px;
letter-spacing: 5px;
line-height: 2;
font-size: 4.5rem;
}
@media screen and (max-width: 1440px) {
.home__point-title h2 {
margin-left: 30px;
font-size: 3.6rem;
}
}
@media screen and (max-width: 900px) {
.home__point-title h2 {
margin: 0 0 20px 0;
letter-spacing: 2px;
line-height: 1.5;
font-size: 3.0rem;
}
}
@media screen and (max-width: 900px) {
.home__point-title h2 {
margin: 0 0 10px 0;
font-size: 2.6rem;
}
}
.home__point-title p {
letter-spacing: 5px;
line-height: 3;
font-size: 2.4rem;
}
@media screen and (max-width: 1440px) {
.home__point-title p {
line-height: 2.6;
font-size: 2.0rem;
}
}
@media screen and (max-width: 900px) {
.home__point-title p {
letter-spacing: normal;
line-height: 2;
font-size: 1.8rem;
}
.home__point-title p br {
display: none;
}
}
@media screen and (max-width: 500px) {
.home__point-title p {
font-size: 1.6rem;
}
}
.home__point-wrapper {
margin: 0 -20px;
display: flex;
flex-wrap: wrap;
position: relative;
}
@media screen and (max-width: 900px) {
.home__point-wrapper {
margin: 0;
display: block;
}
}
.home__point-box {
width: 33.3333%;
box-sizing: border-box;
margin-top: -280px;
padding: 0 20px;
}
@media screen and (max-width: 900px) {
.home__point-box {
width: 100%;
margin: 0 0 10px;
padding: 0;
}
}
.home__point-box a {
background: #ffffff;
color: #464646;
text-decoration: none;
display: block;
}
@media screen and (max-width: 900px) {
.home__point-box a {
display: flex;
align-items: center;
}
}
.home__point-box-img {
overflow: hidden;
}
@media screen and (max-width: 900px) {
.home__point-box-img {
width: 50%;
}
}
@media screen and (max-width: 400px) {
.home__point-box-img {
width: 40%;
}
}
.home__point-box-img img {
transition: 0.6s;
}
a:hover .home__point-box-img img {
opacity: 0.8;
}
.home__point-box-text {
padding: 50px 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.0rem;
}
@media screen and (max-width: 1024px) {
.home__point-box-text {
font-size: 1.6rem;
}
}
@media screen and (max-width: 900px) {
.home__point-box-text {
width: 50%;
padding: 0 30px;
justify-content: flex-start;
}
}
@media screen and (max-width: 900px) {
.home__point-box-text {
width: 60%;
padding: 0 15px;
}
}
@media screen and (min-width: 501px) {
.home__point-box-text br {
display: none;
}
}
.home__point-box-text img {
width: 30px;
margin-right: 5px;
}
@media screen and (max-width: 500px) {
.home__point-box-text img {
width: 20px;
min-width: 20px;
}
}


.home__news p a:link, .home__news p a:visited {
    color: #FFF;
}
.home__news p {
    line-height: 2;
    font-size: 1.6rem;
}
.home__news {
background: #444444;
padding: 30px 0 70px;
}
@media screen and (max-width: 500px) {
.home__news {
padding: 15px 0 35px;
}
}
.home__news .headline-lv1 {
padding: 70px 0;
color: #ffffff;
}
@media screen and (max-width: 500px) {
.home__news .headline-lv1 {
padding: 40px 0;
}
}
.home__news-list {
margin: 0 140px 38px;
}
@media screen and (max-width: 1024px) {
.home__news-list {
margin: 0 0 38px;
}
}
.home__news-list dl {
margin-bottom: 12px;
display: flex;
align-items: center;
}
@media screen and (max-width: 900px) {
.home__news-list dl {
display: block;
}
}
.home__news-list dt {
margin-right: 20px;
letter-spacing: 1px;
color: #acacac;
}
@media screen and (max-width: 900px) {
.home__news-list dt {
margin-bottom: 5px;
}
}
.home__news-list dd {
display: flex;
align-items: center;
}
.home__news-list dd a {
color: #ffffff;
text-decoration: none;
}
.home__news-list dd a:hover {
opacity: 0.5;
}
.home__news-btn {
width: 100%;
max-width: 260px;
margin: 0 auto;
text-align: center;
font-size: 2.0rem;
position: relative;
}
@media screen and (max-width: 500px) {
.home__news-btn {
font-size: 1.8rem;
}
}
.home__news-btn:after {
content: '';
background: url(/assets/img/common/arrow02.png) no-repeat left top;
background-size: 50px auto;
width: 50px;
height: 13px;
position: absolute;
top: 17px;
right: 18px;
z-index: 9;
}
.home__news-btn a {
background: #131313;
padding: 11px 0 9px;
color: #ffffff;
text-decoration: none;
display: block;
}


.home__about-wrapper {
margin: 0 150px;
}
@media screen and (max-width: 1680px) {
.home__about-wrapper {
margin: 0 100px;
}
}
@media screen and (max-width: 1440px) {
.home__about-wrapper {
margin: 0;
}
}
.home__about-box {
margin-bottom: 140px;
display: flex;
align-items: center;
}
@media screen and (max-width: 900px) {
.home__about-box {
display: block;
}
}
@media screen and (max-width: 500px) {
.home__about-box {
margin-bottom: 70px;
}
}
.home__about-box-img {
width: 51.851851%;
}
@media screen and (max-width: 900px) {
.home__about-box-img {
width: 100%;
}
}
.home__about-box-block {
width: 48.148148%;
box-sizing: border-box;
padding: 0 60px;
}
@media screen and (max-width: 1024px) {
.home__about-box-block {
padding: 0 30px;
}
}
@media screen and (max-width: 900px) {
.home__about-box-block {
width: 100%;
padding: 60px 60px 0;
}
}
@media screen and (max-width: 500px) {
.home__about-box-block {
padding: 30px 15px 0;
}
}
.home__about-box-title {
margin-bottom: 30px;
font-size: 2.8rem;
}
@media screen and (max-width: 1440px) {
.home__about-box-title br {
display: none;
}
}
@media screen and (max-width: 500px) {
.home__about-box-title {
margin-bottom: 20px;
font-size: 2.2rem;
}
}
.home__about-box-text {
margin-bottom: 30px;
line-height: 1.8;
}
@media screen and (max-width: 1440px) {
.home__about-box-text br {
display: none;
}
}
.home__about-box-btn {
width: 100%;
max-width: 400px;
text-align: center;
font-size: 2.0rem;
}
@media screen and (max-width: 500px) {
.home__about-box-btn {
font-size: 1.8rem;
}
}
.home__about-box-btn a {
border: 1px solid #464646;
padding: 15px 30px 13px;
color: #464646;
text-decoration: none;
display: block;
}
.home__about-box-btn a:hover {
color: #ffffff;
}
@media screen and (max-width: 1024px) {
.home__about-box-btn a:hover {
color: #464646;
}
}
.home__about-box.order .home__about-box-img {
order: 2;
}
.home__about-box.order .home__about-box-block {
order: 1;
}


.home__reservation {
padding-bottom: 100px;
}
.home__reservation-img {
position: relative;
}
.home__reservation-img:after {
content: '';
padding-top: 31.25%;
display: block;
}
@media screen and (max-width: 900px) {
.home__reservation-img:after {
padding-top: 41.25%;
}
}
.home__reservation-img.bg-switch {
background-position: center top;
background-size: cover;
}
.home__reservation-img.hide_sp {
}
@media screen and (max-width: 900px) {
.home__reservation-img.hide_sp {
display: none;
}
}
.home__reservation-img.hide_pc {
display: none;
}
@media screen and (max-width: 900px) {
.home__reservation-img.hide_pc {
display: block;
}
}
.home__reservation-title {
margin: 64px 0 26px;
text-align: center;
font-size: 3.0rem;
}
@media screen and (max-width: 500px) {
.home__reservation-title {
margin: 32px 0 13px;
text-align: left;
font-size: 2.4rem;
}
}
.home__reservation-text {
margin-bottom: 56px;
text-align: center;
line-height: 2;
}
@media screen and (max-width: 500px) {
.home__reservation-text {
margin-bottom: 28px;
text-align: left;
}
.home__reservation-text br {
display: none;
}
}
.home__reservation-btn {
width: 100%;
max-width: 680px;
margin: 0 auto;
text-align: center;
font-size: 2.4rem;
}
@media screen and (max-width: 500px) {
.home__reservation-btn {
font-size: 2.0rem;
}
}
.home__reservation-btn a {
background: #444444;
padding: 20px 0 18px;
color: #ffffff;
text-decoration: none;
display: block;
}


.home__facilities {
background: #e5e5e5;
padding-bottom: 40px;
}
@media screen and (max-width: 500px) {
.home__facilities {
padding-bottom: 20px;
}
}
.home__facilities-wrapper {
}
.home__facilities-wrapper ul {
margin: 0 -25px;
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 1024px) {
.home__facilities-wrapper ul {
margin: 0 -15px;
}
}
@media screen and (max-width: 500px) {
.home__facilities-wrapper ul {
margin: 0;
display: block;
}
}
.home__facilities-wrapper li {
width: 33.3333%;
box-sizing: border-box;
margin-bottom: 50px;
padding: 0 25px;
}
@media screen and (max-width: 1024px) {
.home__facilities-wrapper li {
padding: 0 15px;
}
}
@media screen and (max-width: 900px) {
.home__facilities-wrapper li {
width: 50%;
}
}
@media screen and (max-width: 500px) {
.home__facilities-wrapper li {
width: 100%;
margin-bottom: 30px;
padding: 0;
}
}
.home__facilities-wrapper li span {
margin-top: 12px;
font-size: 1.6rem;
display: block;
}


.home__store {
background: #c7ac77;
padding: 80px 0;
}
@media screen and (max-width: 500px) {
.home__store {
padding: 40px 0;
}
}
.home__store .headline-lv1 {
padding: 0 0 60px;
text-align: left;
color: #ffffff;
}
@media screen and (max-width: 900px) {
.home__store .headline-lv1 {
text-align: center;
}
}
@media screen and (max-width: 500px) {
.home__store .headline-lv1 {
padding: 0 0 30px;
}
}
.home__store-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
.home__store-wrapper {
display: block;
}
}
.home__store-block {
width: 50%;
}
@media screen and (max-width: 900px) {
.home__store-block {
width: 100%;
}
}
.home__store-img_pc {
width: 50%;
box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
.home__store-img_pc {
padding: 0 50px;
}
}
@media screen and (max-width: 900px) {
.home__store-img_pc {
display: none;
}
}
.home__store-img_sp {
display: none;
}
@media screen and (max-width: 900px) {
.home__store-img_sp {
margin-bottom: 60px;
display: block;
}
}
@media screen and (max-width: 500px) {
.home__store-img_sp {
margin-bottom: 30px;
}
}
.home__store-btn {
width: 100%;
max-width: 480px;
text-align: center;
font-size: 2.0rem;
}
@media screen and (max-width: 900px) {
.home__store-btn {
margin: 0 auto;
}
}
@media screen and (max-width: 500px) {
.home__store-btn {
font-size: 1.8rem;
}
}
.home__store-btn a {
background: #232323;
padding: 20px 20px 18px;
color: #ffffff;
text-decoration: none;
display: block;
}


.home__banner {
background: #d6c09b;
padding: 50px 0 44px;
}
@media screen and (max-width: 500px) {
.home__banner {
padding: 30px 0 24px;
}
}
.home__banner-wrapper {
}
.home__banner-wrapper ul {
margin: 0 -3px;
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 500px) {
.home__banner-wrapper ul {
margin: 0;
display: block;
}
}
.home__banner-wrapper li {
width: 33.3333%;
box-sizing: border-box;
margin-bottom: 6px;
padding: 0 3px;
}
@media screen and (max-width: 900px) {
.home__banner-wrapper li {
width: 50%;
}
}
@media screen and (max-width: 500px) {
.home__banner-wrapper li {
width: 100%;
padding: 0;
}
}
.home__banner-wrapper li a:hover {
opacity: 0.5;
}

/*****************************************************************************
footer 
*****************************************************************************/

.footer {
background: #444444;
}
@media screen and (max-width: 900px) {
.footer .inner {
padding: 0;
}
}
.footer-logo {
width: 380px;
padding: 80px 0 60px;
}
@media screen and (max-width: 1780px) {
.footer-logo {
width: 280px;
}
}
@media screen and (max-width: 900px) {
.footer-logo {
width: 140px;
margin: 0 auto;
}
}
@media screen and (max-width: 500px) {
.footer-logo {
width: 100px;
padding: 40px 0 30px;
}
}
.footer-logo .hide_sp {
}
@media screen and (max-width: 900px) {
.footer-logo .hide_sp {
display: none;
}
}
.footer-logo .hide_pc {
display: none;
}
@media screen and (max-width: 900px) {
.footer-logo .hide_pc {
display: block;
}
}
.footer__upper {
margin-bottom: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
.footer__upper {
margin-bottom: 0;
display: block;
}
}
.footer__upper-about {
width: 100%;
max-width: 360px;
order: 2;
}
@media screen and (max-width: 900px) {
.footer__upper-about {
margin: 0 auto 60px;
}
}
@media screen and (max-width: 500px) {
.footer__upper-about {
margin: 0 auto 30px;
}
}
.footer__upper-about-logo {
width: 280px;
margin-bottom: 20px;
}
@media screen and (max-width: 900px) {
.footer__upper-about-logo {
margin: 0 auto 20px;
}
}
@media screen and (max-width: 500px) {
.footer__upper-about-logo {
width: 240px;
}
}
.footer__upper-about-btn {
text-align: center;
font-size: 2.0rem;
}
.footer__upper-about-list {
margin-bottom: 12px;
display: flex;
align-items: center;
color: #ffffff;
}
.footer__upper-about-list dt {
width: 70px;
margin-right: 10px;
text-align: right;
font-size: 1.6rem;
}
.footer__upper-about-list dd {
line-height: 1.3;
}
.footer__upper-about-list dd.tel {
font-size: 3.4rem;
}
.footer__upper-about-list dd.tel a {
color: #ffffff;
text-decoration: none;
}
.footer__upper-about-btn {
margin-top: 40px;
}
@media screen and (max-width: 900px) {
.footer__upper-about-btn {
padding: 0 15px;
}
}
.footer__upper-about-btn a {
background: #666666;
padding: 16px 0 14px;
color: #ffffff;
text-decoration: none;
display: block;
}
.footer__upper-nav {
width : calc(100% - 360px);
order: 1;
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
.footer__upper-nav {
width : 100%;
box-sizing: border-box;
background: #ffffff;
padding: 40px 40px 0;
}
}
@media screen and (max-width: 670px) {
.footer__upper-nav {
padding: 40px 20px 0;
}
}
.footer__upper-nav-box {
width: 100%;
max-width: 240px;
margin-bottom: 40px;
}
@media screen and (max-width: 900px) {
.footer__upper-nav-box {
width: 33.3333%;
max-width: inherit;
}
}
@media screen and (max-width: 500px) {
.footer__upper-nav-box {
width: 100%;
}
}
.footer__upper-nav-box:first-child {
max-width: 480px;
}
@media screen and (max-width: 900px) {
.footer__upper-nav-box:first-child {
width: 66.6666%;
max-width: inherit;
}
}
@media screen and (max-width: 500px) {
.footer__upper-nav-box:first-child {
width: 100%;
}
}
.footer__upper-nav-split {
display: flex;
flex-wrap: wrap;
}
.footer__upper-nav-split li {
width: 100%;
max-width: 240px;
}
.footer__upper-nav-split li:nth-child(1),
.footer__upper-nav-split li:nth-child(2) {
margin-top: 0;
}
@media screen and (max-width: 900px) {
.footer__upper-nav-split li {
width: 50%;
max-width: inherit;
}
}
@media screen and (max-width: 320px) {
.footer__upper-nav-split li {
width: 100%;
}
}
.footer__upper-nav-box ul {
}
.footer__upper-nav-box li {
margin-top: 14px;
font-size: 1.6rem;
}
@media screen and (max-width: 500px) {
.footer__upper-nav-box li {
margin-top: 10px;
font-size: 1.4rem;
}
}
.footer__upper-nav-box li a {
color: #ffffff;
text-decoration: none;
}
@media screen and (max-width: 900px) {
.footer__upper-nav-box li a {
color: #464646;
}
}
.footer__upper-nav-box li a:hover {
opacity: 0.5;
}
.footer__upper-nav-title {
margin-bottom: 20px;
font-size: 2.0rem;
color: #8a8a8a;
}
@media screen and (max-width: 500px) {
.footer__upper-nav-title {
margin-bottom: 10px;
}
}
.footer__lower {
background: #ffffff;
padding: 45px 0 30px;
}
@media screen and (max-width: 1280px) {
.footer__lower {
padding: 45px 0 100px;
}
}
.footer__lower-sns {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.footer__lower-sns li {
width: 90px;
box-sizing: border-box;
padding: 0 12px;
}
@media screen and (max-width: 500px) {
.footer__lower-sns li {
width: 70px;
}
}
.footer__lower-sns li a:hover {
opacity: 0.5;
}
.footer__lower-language {
margin-bottom: 30px;
text-align: center;
font-size: 1.4rem;
}
.footer__lower-language a {
color: #464646;
text-decoration: none;
}
.footer__lower-language a:hover {
opacity: 0.6;
}
.footer__lower-url {
margin-bottom: 5px;
text-align: center;
font-size: 3.0rem;
}
@media screen and (max-width: 500px) {
.footer__lower-url {
font-size: 2.4rem;
}
}
.footer__lower-url a {
color: #464646;
text-decoration: none;
}
.footer__lower-url a:hover {
opacity: 0.6;
}
.footer__lower-copyright {
text-align: center;
font-size: 1.2rem;
}


#page-top {
width: 80px;
position: fixed;
bottom: 87px;
right: 6.25%;
z-index: 99;
}
@media screen and (max-width: 1440px) {
#page-top {
width: 50px;
right: 3.25%;
}
}
@media screen and (max-width: 500px) {
#page-top {
width: 40px;
}
}


.fixed__nav {
position: fixed;
top: 170px;
left: 0;
z-index: 99;
}
@media screen and (max-width: 1000px) {
.fixed__nav {
width: 100%;
display: flex;
top: auto;
bottom: 0;
left: 0;
}
}
.fixed__nav ul {
}
@media screen and (max-width: 1000px) {
.fixed__nav ul {
width: 100%;
display: flex;
}
}
.fixed__nav li {
width: 70px;
height: 200px;
font-size: 2.2rem;
}
@media screen and (max-width: 1440px) {
.fixed__nav li {
width: 50px;
height: 160px;
font-size: 1.8rem;
}
}
@media screen and (max-width: 1000px) {
.fixed__nav li {
width: 50%;
height: 70px;
font-size: 2.0rem;
}
}
@media screen and (max-width: 500px) {
.fixed__nav li {
font-size: 1.8rem;
}
}
.fixed__nav li a {
height: 100%;
background: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
text-decoration: none;
}
.fixed__nav li:first-child a {
background: #961e4b;
}
.fixed__nav li a:hover {
opacity: 0.8;
}
.fixed__nav li span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 1000px) {
.fixed__nav li span {
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
}
.fixed__nav li span:before {
content: '';
background: url(/assets/img/common/icon06.png) no-repeat left top;
background-size: 27px auto;
width: 27px;
height: 23px;
display: inline-block;
margin-bottom: 8px;
z-index: 9;
}
@media screen and (max-width: 1440px) {
.fixed__nav li span:before {
background-size: 20px auto;
width: 20px;
height: 17px;
margin-bottom: 4px;
}
}
.fixed__nav li.hide_pc span:before {
background-image: url(/assets/img/common/icon07.png);
}
@media screen and (max-width: 1000px) {
.fixed__nav li span:before {
margin: 0 8px 0 0;
vertical-align: middle;
}
.fixed__nav li.hide_pc span:before {
margin: 0 2px 0 0;
}
}
.fixed__nav li:first-child span:before {
background: url(/assets/img/common/icon05.png) no-repeat left top;
background-size: 27px auto;
}
@media screen and (max-width: 1440px) {
.fixed__nav li:first-child span:before {
background-size: 20px auto;
}
}
.fixed__nav li.hide_sp {
}
@media screen and (max-width: 500px) {
.fixed__nav li.hide_sp {
display: none;
}
}
.fixed__nav li.hide_pc {
display: none;
}
@media screen and (max-width: 500px) {
.fixed__nav li.hide_pc {
display: block;
}
}


.hide-sp {
}
@media screen and (max-width: 900px) {
.hide-sp {
display: none!important;
}
}
.hide-pc {
display: none;
}
@media screen and (max-width: 900px) {
.hide-pc {
display: block!important;
}
}

/*****************************************************************************
 transform 
 *****************************************************************************/

.img-effect {
position: relative;
overflow: hidden;
}
.img-effect.img-effect-side img {
display: block;
position: relative;
opacity: 0;
width: 100%;
transition-delay: .5s;
}
.img-effect.img-effect-side:before {
content: "";
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #303030;
}
.img-effect.img-effect-side.fadeIn img {
opacity: 1;
}
.img-effect.img-effect-side.fadeIn:before {
width: 100%;
left: 100%;
transition: width .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), left .4s cubic-bezier(0.55, 0.085, 0.68, 0.53) .5s;
}

.effect-fade {
opacity: 0;
transition: all 2s;
}
.effect-fadeIn {
opacity: 1.0;
}


.effect {
opacity: 0;
transform: translate(0,30px);
transition: all 2s;
}
.fadeIn {
opacity: 1.0;
transform: translate(0,0);
}


/* ------ margin ------ */
.mt10  { margin-top:10px !important; }
.mt20  { margin-top:20px !important; }
.mt30  { margin-top:30px !important; }
.mt40  { margin-top:40px !important; }
.mt50  { margin-top:50px !important; }
.mt60  { margin-top:60px !important; }
.mt70  { margin-top:70px !important; }
.mt80  { margin-top:80px !important; }

.mb10  { margin-bottom:10px !important; }
.mb20  { margin-bottom:20px !important; }
.mb30  { margin-bottom:30px !important; }
.mb40  { margin-bottom:40px !important; }
.mb50  { margin-bottom:50px !important; }
.mb60  { margin-bottom:60px !important; }
.mb70  { margin-bottom:70px !important; }
.mb80  { margin-bottom:80px !important; }

.pt10  { padding-top:10px !important; }
.pt20  { padding-top:20px !important; }
.pt30  { padding-top:30px !important; }
.pt40  { padding-top:40px !important; }
.pt50  { padding-top:50px !important; }
.pt60  { padding-top:60px !important; }
.pt70  { padding-top:70px !important; }
.pt80  { padding-top:80px !important; }

.pb10  { padding-bottom:10px !important; }
.pb20  { padding-bottom:20px !important; }
.pb30  { padding-bottom:30px !important; }
.pb40  { padding-bottom:40px !important; }
.pb50  { padding-bottom:50px !important; }
.pb60  { padding-bottom:60px !important; }
.pb70  { padding-bottom:70px !important; }
.pb80  { padding-bottom:80px !important; }