@charset "UTF-8";
/*
Theme Name: platina-luxe-house
*/

body {
	font-size:15px;
	line-height: 32px;
	font-family: "Lora", serif;
	margin: 0;
	background-color: #fff;
}

@media only screen and (max-width: 767px) {
body {
	font-size:17px;
}}

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

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

.pc2
{ display: block !important; }
.sp2 
{ display: none !important; }

@media only screen and (max-width: 900px) {
	.pc2 { display: none !important; }
	.sp2 { display: block !important; }
}

.max-1000px {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}

.max-1300px {
	max-width: 1500px;
	margin: 0 auto;
}

@media only screen and (max-width: 767px) {
.max-1000px {
	padding-left: 40px;
	padding-right: 40px;
}}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

a:hover {
	opacity: 0.6;
	transition-duration: 1s;
}

main {
	overflow: hidden;
}

.grecaptcha-badge { visibility: hidden; }

/************
フェードイン
************/

.fadeUpTrigger{
opacity: 0;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/************
ハンバーガーメニュー
************/

#nav{
	position: relative;
	position: fixed;
	height: 700px;
	width: 40%;
	right: -40%;
	top: 0;
	background-color:rgba(255,255,255,0.9);
	transition: .7s;
	z-index: 101;
}

@media screen and (max-width: 767px) {
	#nav{
	height: 100%;
	width: 100%;
	right: -100%;
	z-index: 200;
}}

#nav ul{
	padding-top: 30px;
}

#nav ul li{
	list-style-type: none;
	font-size: 20px;
}

#nav a{
	display: block;
	text-decoration: none;
	color: #9A802F;
	margin-bottom: 20px;
	transition: .5s;
}

#nav li a:hover{
	color: #000;
}

#nav ul img {
	height: 25px;
}

#hamburger {
	display: block;
	position: absolute;
	position: fixed;
	top: 30px;
	right: 30px;
	width: 50px;
	height: 44px;
	cursor: pointer;
	transition: 1s;
	z-index: 199;
	mix-blend-mode: difference;
}

@media screen and (max-width: 767px) {
#hamburger {
	right: 20px;
	z-index: 201;
}}

.inner_line {
	display: block;
	position: absolute;
	right: 0;
	width: 40px;
	height: 1px;
	background-color: #000000;
	transition: 1s;
	border-radius: 2px;
}
#line1 {
	top: 0;
}
#line2 {
	top: 15px;
}
#line3 {
	bottom: 13px;
}

.in{
	transform: translateX(-100%);
}
.line_1,.line_2,.line_3{
	background: #ffffff;
}
.line_1 {
	transform: translateY(15px) rotate(-45deg);
	top: 0;
}
.line_2 {
	opacity: 0;
}
.line_3 {
	transform: translateY(-15px) rotate(45deg);
	bottom: 0;
}

@media screen and (max-width: 767px) {
  #nav ul li h1 {
	  display: none;
}
	
  #nav ul li h2 {
	  display: block;
	  font-size: 14px;
}}

.book-btn {
	margin-top: 35px;
	margin-left: 35px;
}

.book-btn img {
	height: 50px;
}

.nav-address {
	margin-left: 35px;
	margin-top: 90px;
	display: flex;
	font-size: 14px;
	line-height: 2rem;
}

@media screen and (max-width: 767px) {
.nav-address {
	font-size: 16px;
}}

.name2 {
	font-size: 17px;
	font-weight: 600;
}


.title-on {
	display: none;
}

/*******
メインビジュアル
********/

.top-img {
	max-width: 1300px;
	position: relative;
	width: 100vw;
	height: auto;
	margin: 0 auto;
}

.title img {
	width: 35%;
	max-width: 600px;
	mix-blend-mode: difference;
	position: absolute;
	margin: 7% 7%;
	z-index: 14;
}

@media screen and (max-width: 767px) {
.title img {
	width: 65%;
}}

.flower1 img, .flower2 img, .flower3 img, .flower4 img {
	width: 10%;
	position: absolute;
	z-index: 12;
	opacity: 0;
	animation: 2s fadeIn forwards;
}

.flower1 img {
	width: 12%;
	top: 55%;
	left: 5%;
}

.flower2 img {
	width: 12%;
	bottom: -15%;
	left: 50%;
}

.flower3 img {
	width: 10%;
	top: 10%;
	right: 20%;
}

.flower4 img {
	width: 10%;
	right: 5%;
	bottom: 3%;
}


@keyframes fadeIn { 
  from { opacity: 0; }
  to { opacity: 1; }
}

@media screen and (max-width: 767px) {
.flower1 img {
	width: 17%;
	top: 37%;
	left: 1%;
}

.flower2 img {
	width: 20%;
	bottom: 5%;
	left: 2%;
}

.flower3 img {
	width: 21%;
	top: 11%;
	right: 3%;
}

.flower4 img {
	width: 20%;
	right: 5%;
	bottom: -7%;
}}


.top-cover {
	width: 100vw;
	max-width: 1300px;
	position: absolute;
	top: 0;
	z-index: 10;
}

.nav {
	width: 100vw;
	height: auto;
	text-align: center;
	display: table-cell;
}
.gnav {
	width: auto;
	max-width: 1200px;
	height: auto;
	margin: 25px auto;
	vertical-align: middle;
}

.gnav img {
	width: auto;
	height: 40px;
	margin: 0 20px;
	z-index: 20;
}

.gnav img:hover {
 opacity: 0.6;
}

/*******
main-slider 
********/

.main-slider {
	width: 84%;
	padding-top: 2%;
	padding-left: 12%;
	margin-bottom: 15%;
	max-width: 1300px;
}

@media screen and (max-width: 767px) {
.main-slider {
	width: 81%;
	padding-top: 28%;
	padding-left: 10%;
}}


/*******
追従ボタン
********/

.book-sp {
	width: 100%;
	position: fixed;
	bottom: 25px;
	text-align: center;
	z-index: 100;
}

.book-sp img{
	width: 70%;
	max-width: 400px;
}

/*******
message
********/

.message {
	width: 100vw;
	text-align: center;
}

.message-con {
	height: auto;
	text-align: center;
	padding: 150px 40px;
}

@media screen and (max-width: 767px) {
.message-con {
	padding-top: 40px;
	padding-bottom: 40px;
}}

.message-con img {
	width: 250px;
	margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
.message-con img {
	width: 230px;
	margin-bottom: 0px;
}}


.message-text {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	text-align: left;
	font-size: 16px;
	line-height: 2rem
}

@media screen and (max-width: 767px) {
.message-text {
	line-height: 1.6rem;
}}


/*******
room
********/

.room {
	width: 100vw;
	margin: 30px auto;
	text-align: center;
}

@media screen and (min-width: 767px) {
.room {
	margin: 70px auto;
	display: flex;
}}

.room-con {
	display: flex;
}

@media screen and (min-width: 767px) {
.room-con {
	width: 100vw;
}}

.room-main img {
	width: 35vw;
	max-width: 600px;
}


.room-main-sp img {
	object-fit: cover;
}

@media screen and (min-width: 768px) {
.room-main-sp {
	margin-left: -15%;
	min-width: 500px;
}

.room-main-sp img {
	min-width: 500px;
}}


@media screen and (max-width: 767px) {
.room-main-sp img {
	width: 65vw;
	max-width: 600px;
	min-width: 320px;
}}

@media screen and (min-width: 768px) and (max-width: 1000px) {
.room-main {
	width: 350px;
}
.room-main-sp {
	width: 350px;
	margin-left: -40%;
}
.room-con {
	padding: 0;
}}

.room-left {
	margin: 0 50px 0 0;
}

@media screen and (max-width: 767px) {
.room-left {
	margin: 0 auto;
	padding: auto 40px;
}}

.room-text {
	width: 35vw;
	text-align: left;
}

@media screen and (min-width: 350px) and (max-width: 767px) {
.room-text {
	width: 100%;
}}

@media screen and (max-width: 350px) {
.room-text {
	width: 55vw;
}}

.room-text img {
	height: 25px;
	margin-top: 23px;
	margin-bottom: -5px;
}

.room-text p {
	margin: 0;
	font-size: 14px;
	line-height: 1.2rem;
}

@media screen and (max-width: 767px) {
.room-text p {
	font-size: 16px;
}}

.room-text ul {
	margin:0 20px;
	padding: 0;
	line-height: 1.2rem;
}

.room-title {
	width: 80px;
}

@media screen and (max-width: 767px) {
.room-title {
	width: 250px;
	margin: 0 auto;
}}

.room-slider {
	width: 100vw;
	height: 300px;
	background-color: antiquewhite;
}

.slick-slider img {
	margin: 0 3px;
}

/*******
concept
********/

.concept-box {
	width: auto;
	margin: 0 auto;
}

.concept {
	height: auto;
	margin: 100px auto 100px;
	position: relative;
}

@media screen and (max-width: 767px) {
.concept {
	margin: 60px auto 170px;
}}

.concept-con img {
	width: 250px;
}

@media screen and (max-width: 767px) {
.concept-con img {
	width: 190px;
}}

.comtcept-text {
	max-width: 500px;
	text-align: left;
	font-size: 16px;
	line-height: 2rem;
}

@media screen and (max-width: 767px) {
.comtcept-text {
	line-height: 1.6rem;
	margin-top: 30px;
}}

@media screen and (max-width: 767px) {
.concept-con img {
	width: 190px;
}}

.con-back1 {
	position: absolute;
	width: 580px;
	right: 0;
	z-index: -1;
	top: -50px;
}

@media screen and (max-width: 767px) {
.con-back1 {
	position: absolute;
	width: 350px;
	left: -10%;
	top: 95%;
}}

/*******
servises
********/

.servises {
	max-width: 870px;
	height: auto;
	margin: 0 0 0 auto;
	padding: 75px 30px 40px 90px;
	background-image: url("img/img_frame-concept_r_pc.jpg");
	background-size: 1000px auto;
	line-height: 1.5rem;
	position: relative;
}

@media screen and (max-width: 767px) {
.servises {
	background-image: url("img_sp/img_frame-concept_01_sp.jpg");
	background-size: cover;
	padding: 130px 40px 50px;
}}

.con-back2 {
	position: absolute;
	width: 550px;
	left: -400px;
	top: 200px;
	z-index: -1;
}

.servises-title img {
	height: 110px;
	margin-bottom: 20px;
	margin-left: 10px;
}

@media screen and (min-width: 444px) and (max-width: 767px) {
.servises-title img  {
	height: auto;
	max-height: 180px;
	margin-bottom: 30px;
	margin-top: 12%;
	margin-left: 8%;
}}

@media screen and (max-width: 443px) {
.servises-title img {
	height: auto;
	max-height: 140px;
}}

@media screen and (min-width: 768px) {
.servises-con {
	display: flex;
}}

.servises-right {
	
}

@media screen and (min-width: 768px) {
.servises-right {
	max-width: 400px;
	margin-right: 40px;
}}

.servises-right p {
	margin: 0;
	line-height: 1.6rem;
}

.bold {
	font-weight: 800;
	font-size: 19px;
}

@media screen and (max-width: 767px) {
.bold {
	font-weight: 500;
}}

.white {
	border-radius: 10px;
	padding: 20px 30px;
	background-color: #fff;
	color: #9A802F;
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: 800;
}

@media screen and (max-width: 767px) {
.white {
	padding: 9px;
	font-weight: 600;
	margin-bottom: 0;
}}

.servises-left {
	max-width: 380px;
}

@media screen and (max-width: 767px) {
.servises-left {
	max-width: 380px;
	font-size: 13px;
}}

.servises-left-sp {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 30px;
}


.servises-left p {
	line-height: 1.5rem;
}

@media screen and (max-width: 767px) {
.servises-left p {
	line-height: 1.2rem;
	margin-top: 8px;
	margin-bottom: 40px;
}}

/*******
dinner
********/

.dinner {
	width: 100vw;
	height: auto;
	margin: 180px auto;
	text-align: center;
}

@media screen and (max-width: 767px) {
.dinner {
	margin: 40px auto;
}}

.dinner-menu {
	margin: 20px auto 45px;
}

@media screen and (min-width: 768px) {
.dinner-menu {
	display: flex;
}}

.dinner-menu2 ,.dinner-menu3, .dinner-menu4 {
	width: 320px;
	height: 272px;
	margin: 0 20px;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}

@media screen and (min-width: 444px) and (max-width: 767px) {
.dinner-menu2 ,.dinner-menu3, .dinner-menu4 {
	width: 100%;
	height: 350px;
	margin: 20px auto;
}}

@media screen and (max-width: 443px) {
.dinner-menu2 ,.dinner-menu3, .dinner-menu4 {
	width: 100%;
	height: 250px;
	margin: 20px auto;
}}

.dinner-con p {
	margin: 0;
}

.dinner-menu2 img ,.dinner-menu3 img , .dinner-menu4 img {
	width: auto;
	height: 272px;
	border-radius: 20px;
	object-fit: cover;
}

.dinner-menu3 {
	background-image: url("img/btn_dinner_02_out_pc.jpg");
	background-size: cover;
}

.dinner-menu4 {
	background-image: url("img/btn_dinner_03_out_pc.jpg");
	background-size: cover;
}


.dinner-menu2 :hover, .dinner-menu3 :hover, .dinner-menu4 :hover{
	opacity: 1;
}

.dinner-cover {
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(0,0,0,0.5);
}

.dinner-cover img {
	width: 55px;
	height: auto;
	margin-top: 50px;
}

.dinner-menu4 .dinner-cover img {
	margin-top: 35px;
}


.dinner-cover p {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	margin-top: 100px;
	letter-spacing: 0.5px;
}

.dinner-menu4 .dinner-cover p {
	margin-top: 80px;
}

@media screen and (min-width: 444px) and (max-width: 767px) {
.dinner-cover p {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	margin-top: 120px;
	letter-spacing: 0.5px;
}
	
.dinner-menu4 .dinner-cover p {
	margin-top: 100px;
}}


@media screen and (max-width: 443px) {
.dinner-cover p {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	margin-top: 80px;
	letter-spacing: 0.5px;
}
	
.dinner-menu4 .dinner-cover p {
	margin-top: 60px;
}}

.dinner-menu2:after {
	background: url(img/btn_dinner_01.jpg) no-repeat center center;
}

.dinner-menu3:after {
	background: url(img/btn_dinner_02.jpg) no-repeat center center;
}

.dinner-menu4:after {
	background: url(img/btn_dinner_03.jpg) no-repeat center center;
}

.dinner-menu2:after, .dinner-menu3:after, .dinner-menu4:after{
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .6s ease-out;
-moz-transition: all .6s ease-out;
-ms-transition: all .6s ease-out;
transition: all .6s ease-out;
}

.dinner-menu2:hover:after, .dinner-menu3:hover:after, .dinner-menu4:hover:after{
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

.dinner-menu2 a, .dinner-menu3 a, .dinner-menu4 a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100%;
text-decoration: none;
color: #fff
}

/*******
modal
********/

.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 999;
	opacity: 1;
	visibility: visible;
	overflow: scroll;
	margin: 0 auto;
}

.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    width: 100%;
	position: absolute;
	top: 0;
	z-index: -1;
}

@media screen and (max-width: 767px) {
.modal__bg{
    height: 900px;
}}

.modal__content{
    padding: 40px;
    top: 100px;
    width: 75%;
	margin: 0 auto;
	position: relative;
}

/*.modal__content{
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 75%;
}*/


.modal__content {
	max-width: 1000px;
	padding-top: 15px;
	padding-bottom: 23px;
}

@media screen and (max-width: 767px) {
.modal__content {
	max-width: 400px;
}}


@media screen and (min-width: 768px) {
.modal__content {
	display: flex;
}}

.modal-img {
	width: 70%;
	max-width: 400px;
}

@media screen and (max-width: 767px) {
.modal-img {
	width: 100%;
	max-width: 400px;
}}

.modal-text {
	position: relative;
	max-width: 400px;
	color: #fff;
	margin-left: 40px;
	line-height: 1.7rem;
	font-size: 17px;
}

@media screen and (max-width: 767px) {
.modal-text {
	margin-left: 0px;
}}

.modal-text p {
	margin: 0;
}

@media screen and (max-width: 767px) {
.modal-text p {
	font-size: 15px;
	line-height: 1.4rem;
}}

.modal__button-area {
  max-width: 843px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 17px;
  padding-top: 15px;
}


.button {
  background: orange;
  border-radius: 12px;
  box-shadow: 2px 4px 6px 3px rgba(0, 0, 0, .24);
  border: 1px solid orange;
  font-size: 16px;
  line-height: 1.6;
  display: block;
  padding: 12px 20px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  margin: 0;
}

.modal-tittle {
	color: #CEBB66;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 1px;
}

@media screen and (max-width: 767px) {
.modal-tittle {
	font-size: 20px;
}}

.modal-small {
	color: #CEBB66;
	font-size: 15px;
	font-weight: 600;
}

@media screen and (max-width: 767px) {
.modal-small {
	font-size: 14px;
}}

.modal__button-wrap {
  position: absolute;
  right: 50px;
  top: -50px;
  display: inline-flex;
}

@media screen and (max-width: 767px) {
.modal__button-wrap {
	left: auto;
	right: 40px;
}}

.close-button {
	width: 120px;
	height: 40px;
	background: #939393;
	padding: 0;
	border: transparent;
	cursor: pointer;
	color: #fff;
	font-size: 14px;
	letter-spacing: 1px;
	font-family: "Lora", serif;
}

.close-button:hover {
	opacity: 0.6;
	transition-duration: 1s;
}

.close-button p {
	margin: 0;
}

/*******
cafe
********/

.cafe {
	height: auto;
	margin: 0 auto 0 0;
	padding: 90px 80px 40px 120px;
	background-image: url("img/img_frame-concept_l_pc.jpg");
	background-size: cover;
	background-position: right;
	line-height: 1.5rem;
	position: relative;
}

@media screen and (min-width: 768px) {
.cafe {
	max-width: 800px;
}}

@media screen and (max-width: 767px) {
.cafe {
	background-image: url("img_sp/img_frame-concept_02_sp.jpg");
	background-size: cover;
	background-position: top;
	padding: 120px 40px 50px;
}}

.cafe-sp-img {
	margin: 0 calc(50% - 50vw);
	margin-bottom: 30px;
}

.cafe-sp-img2 {
	height: 200px;
	display: flex;
	margin-top: 20px;
	text-align: center;
}

.cafe-sp-img2 img {
	height: 100%;
	margin-right: 10px;
}

.cafe-con {
	display: flex;
}

.cafe-left {
	margin-right: auto;
}

@media screen and (min-width: 768px) {
.cafe-left {
	width: 400px;
}}


.cafe-right {
	width: 280px;
	margin-right: 0;
	
}

.cafe-right p {
	margin: 0;
	line-height: 1.5rem;
}

.cafe-title img {
	max-height: 140px;
	margin-right: 10px;
}

@media screen and (min-width: 444px) and (max-width: 767px) {
.cafe-title img {
	margin-bottom: 30px;
	margin-top: 12%;
	margin-left: 8%;
}}

@media screen and (max-width: 443px) {
.cafe-title img {
	margin-bottom: 30px;
}}

.con-back3 {
	position: absolute;
	width: 440px;
	top: 30%;
	right: -45%;
	z-index: -1;
}

.con-back3 img {
	object-fit: cover;
}

/*******
Instagram
********/

.instagram {
	text-align: center;
	margin: 150px auto 0;
}

@media screen and (max-width: 767px) {
.instagram {
	text-align: center;
	margin: 60px;
}}

.instagram img {
	width: 100px;
}

@media screen and (max-width: 767px) {
.instagram img {
	width: 90px;
}}

.instagram img:hover {
	opacity: 0.7;
}

/*******
concierge
********/

.concierge {
	width: 100vw;
	height: auto;
	background-image: url("img/bg_concierge_pc.jpg");
	background-size: cover;
	text-align: center;
	padding: 130px 0;
}

@media screen and (max-width: 767px) {
.concierge {
	padding: 50px 0;
}}

.concierg-title img{
	width: 300px;
}

.concierge-child {
	margin: 40px 0 40px;
}

@media screen and (max-width: 767px) {
.concierge-child {
	height: 600px;
	margin: 10px 0 20px;
}}

.btn-contact img {
	width: 200px;
}

@media screen and (max-width: 767px) {
.btn-contact img {
	width: 150px;
}}

/*******
concierge-slider
********/

#Slider .slide{
    width: 630px;
}

li.concierg-post.slick-slide {
	margin: 0 20px;
	text-align: center;
}

@media screen and (min-width:768px){
li.concierg-post.slick-slide {
	display: flex;
	margin: 0 50px;
	}}

.concierg-post {
	width: 630px;
	padding: 20px 30px;
	border: #000 solid 1.5px;
	background-color: #fff;
	-webkit-box-shadow: 10px 3px 0 #000;
	box-shadow: 10px 3px 0 #000;
	border-radius: 15px;
}

@media screen and (min-width:767px){
.concierg-post {
	padding: 20px 20px;
}}

.concierg-post-left {
	padding: 10px;
	width: 60%;
	max-width: 250px;
	margin: 0 auto;
}

@media screen and (min-width:768px){
.concierg-post-left {
	width: 25%;
	min-width: 190px;
}}

.concierg-post-light {
	margin-left: 20px;
	margin-top: 20px;
	margin: 0 auto;
}

@media screen and (min-width:768px){
.concierg-post-light {
	text-align: left;
	width: 70%;
}}

.concierg-post-light p {
	margin: 0;
}

.concierge-name {
	font-size: 27px;
}

@media screen and (max-width:767px){
.concierge-name {
	font-size: 24px;
}}


.concierge-position {
	color: #9A802F;
	font-size: 14px;
	line-height: 1.2rem;
	margin-top: 10px;
}

.concierge-text {
	line-height: 1.5rem;
	margin-top: 15px;
}



.content_area{
  max-width: 700px;
  padding: 0 40px;
  margin: 0 auto;
	background: #75E1D6;
}

.slick-item p {
  font-size: 18px;
  line-height: 150px;
  text-align: center;
  margin: 10px;
  padding: 2%;
  background: white;
  position: relative;
}

@media screen and (max-width:767px){
  .content_area{
    padding: 0 30px;
  }
	
  .slick-item p {
    font-size: 15px;
    line-height: 100px;
    margin: 5px;
    padding: 1.5%;
  }
}

/*矢印の設定*/
.slick-arrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 38px;
  color: transparent;
  z-index: 1;
  transition: opacity 0.5s;
}

.slick-arrow:hover {
  opacity: 0.7;
}

/* 共通設定 */

.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.slick-next::after,
.slick-prev::after {
  width: 20px;
  height: 20px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
margin: auto 25px;
}

/* next */

.slick-next {
  right: 26px;
}
.slick-next::after {
  right: 4px;
  transform: rotate(45deg);
}

/* prev */

.slick-prev {
  left: 26px;
}
.slick-prev::after {
  left: 4px;
  transform: rotate(-135deg);
}

@media screen and (max-width: 767px) {
  .slick-next {
    right: 8px;
  }
  .slick-prev {
    left: 8px;
  }
  .slick-next::after {
    right: 2px;
  }
}

/*******
carousel
********/

.slide-items {
  width: 100%;
  height: 100%;
}

.slide-items img {
  width: 100%;
  object-fit: cover;
}

/*******
access
********/

.access {
	width: 100vw;
	text-align: center;
	padding: 130px 0;
}

@media screen and (max-width: 767px) {
.access {
	padding: 80px 0 10px;
}}

.access-con {
	max-width: 1000px;
	margin: 0 auto;
}

@media screen and (min-width: 900px) {
.access-con {
	display: flex;
}}

.access-right {
	margin-left: 35px;
}

@media screen and (max-width: 900px) {
.access-right {
	margin-left: 0;
	padding: 0 40px;
}}

.map {
	width: 800px;
	height: 500px;
	background-color: antiquewhite;
	margin-bottom: 50px;
}

@media screen and (max-width: 900px) {
.map {
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 30px;
}}

@media screen and (max-width: 900px) {
.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%; 
	margin: 0 calc(50% - 50vw);
	margin-bottom: 30px;
}}

.access-title img {
	width: 100px;
}

@media screen and (max-width: 767px) {
.access-title img {
	width: 160px;
}}

@media screen and (min-width: 768px) and (max-width: 900px) {
.access-title img {
	width: 250px;
}}

.pl-access {
	position: relative;
}


@media screen and (min-width: 768px) {
.japan-map img {
	width: 280px;
	position: absolute;
	right: 30px;
	top: 40px;;
	z-index: -1;
}}

.pl-access th {
	vertical-align: top;
	padding-bottom: 15px;
	padding-left: 20px;
	font-size: 18px;
}

.pl-access table tr {
	text-align: left;
	line-height: 2rem;
}

.pl-access table td {
	padding-bottom: 15px;
	padding-left: 20px;
	font-size: 18px;
}

.pl-access table td img {
	width: 200px;
	margin-top: 40px;
}

.access-text {
	width: 35vw;
	text-align: left;
}

@media screen and (max-width: 767px) {
.access-text {
	width: 100%;
}}

.access-text p {
	margin: 0;
	font-size: 14px;
	line-height: 1.2rem;
}

.access-text img {
	height: 35px;
	margin-top: 23px;
	margin-bottom: -5px;
}

.name {
	font-size: 23px;	
}


.btn-contact2 {
	text-align: left;
	margin-top: 30px;
}

.btn-contact2 img {
	width: 150px;
}

/*******
route
********/

.route-con {
	max-width: 900px; 
	margin: 130px auto;
	text-align: center;
}

@media screen and (max-width: 767px) {
.route-con {
	margin: 0 auto;
	padding-left: 30px;
	padding-right: 30px;
}}

.route-by {
	margin-top: -40px;
	vertical-align: top;
}

.route-by img {
	width: 95%;
	height: 95%;
}

@media screen and (max-width: 767px) {
.route-by img {
	width: 100%;
	margin-top: -80px;
}}

.route-title {
	width: 100%;
	text-align: left;
}

@media screen and (max-width: 767px) {
.route-title {
	text-align: center;
	margin-bottom: 20px;
}}

.route-title img {
	width: 180px;
}

@media screen and (max-width: 767px) {
.route-title img {
	width: 120px;
}}

.route-line {
	margin-top: 50px;
	margin-bottom: 150px;
}

@media screen and (max-width: 767px) {
.route-line {
	margin: 0px auto;
}	
	
.route-line img {
	width: 85%;
	margin-bottom: 30px;
}}

.neardy {
	max-width: 700px;
	margin: 100px auto;
	border: #CEBB66 solid 1px;
	position: relative;
	text-align: left;
	padding-left: 40px; 
}

@media screen and (max-width: 767px) {
.neardy {
	margin: 60px auto;
	padding-left: 20px; 
	padding-right: 20px; 
}}

.neardy img {
	width: 150px;
	position: absolute;
	top: -30px;
	left: 0;
}

@media screen and (max-width: 767px) {
.neardy img {
	width: 150px;
	top: -30px;
}}

.route-line-img {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 30px;
}

/*******
contact
********/

.contact {
	background-color: #EEE7D5;
	text-align: center;
}

@media screen and (max-width: 767px) {
.contact p {
	margin: 0;
}}

.contact-title img {
	width: 300px;
	margin: 200px auto 80px auto;
}

@media screen and (max-width: 767px) {
.contact-title img {
	width: 200px;
	margin: 50px auto 30px auto;
}}

.contact-book {
	max-width: 700px;
	margin: 0 auto 80px;
}

@media screen and (min-width: 767px) {
.contact-book {
	display: flex;
}}

.contact-book img {
	max-width: 300px;
	margin: 20px;
}

@media screen and (max-width: 767px) {
.contact-book img {
	width: 100%;
	max-width: 260px;
	margin: 8px auto;
}}

.bold-g {
	font-size: 20px;
	font-weight: 800;
	color: #C7B45B;
}

.tell-g {
	font-size: 50px;
	font-weight: bolder;
	color: #9A802F;
}

@media screen and (max-width: 767px) {
.bold-g {
	font-size: 17px;
	font-weight: 800;
	color: #C7B45B;
}

.tell-g {
	font-size: 30px;
	font-weight: bolder;
	color: #9A802F;
	margin: 0;
}}

/*******
form
********/

.form {
	text-align: center;
	width: auto;
	height: auto;
}

/* 全幅指定 */
.full-width {
	margin: 15px calc(50% - 50vw);
	padding-bottom: 5em;
	color: #ffffff;
}
/* pタグの余白を削除 */
.wpcf7-form p {
	padding-top: 30px;
    margin: 0;
}
/* 背景色 */
section.contact {
	margin: 0;
}
/*  フォーム */
.contactForm {
	display: inline-block;
	text-align: left;
	margin-top: 20px;
    margin: 0 auto;
}
/* 各項目の下部余白 */
.contact_item {
    margin-bottom: 0px;
}
/* 項目名 */
.label {
    font-size: 16px;
	font-weight: 600;
	color:  #000;
}

/* ユーザーが入力する箇所 */
.inputs {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="text"],input[type="email"],input[type="tel"] {
	width: 100%;
    border: solid 1px #fff;
    padding: .5rem;
	box-sizing: border-box;
	font-size: 15px;
}
/* お問い合わせ内容を入力する箇所 */
textarea.wpcf7-form-control {
	width: 100%;
    height: 207px;
    border: solid 1px #fff;
    padding: .5rem;
	box-sizing: border-box;
	resize: vertical;
	font-size: 15px;
}

span.wpcf7-list-item a{
	color: #ffffff;
}

.wpcf7-list-item{
	margin: 0;
}

.wpcf7-form-control wpcf7-acceptance {
	text-align: center;
	color: #fff;
	font-size: 14px;
}

.wpcf7-not-valid-tip{
	color: darkred;
}

/* ボタン */
.btnArea {
	max-width: 250px;
    text-align: center;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	margin: 20px auto 60px auto;
	font-family: "Lora", serif;
}

/*input[type="submit"]{
	border: solid 1px #000;
    background: #000;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    padding: 10px;
    /*transition: all .3s;
	font-size: 17px;
    
}*/

input[type="submit"] {
font-family: "Lora", serif;
    width: 100%;
	height: 50px;
	border: 2px solid #000;
	letter-spacing: 2px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	border-radius: 30px;
	background: #000;
	cursor: pointer;
	-webkit-box-shadow: 4px 4px 0 #fff,
						5px 5px 0 #000;
	box-shadow: 4px 4px 0 #fff,
				5.8px 5.8px 0 #000;
	
}

.btnArea p {
	font-size: 14px;
	margin: 0;
	padding: 5px;
}
	

div.wpcf7 .wpcf7-spinner {
    display: none !important;
}

.wpcf7 form .wpcf7-response-output{
	width: 50%;
	margin: 0 auto;
	color: #000;
	border: none;
	padding-bottom: 50px;
}

/* モバイル版 */
@media screen and (max-width: 767px) {
	
.contactForm {
    margin: 0 auto;
}

input wpcf7-form-control wpcf7-text wpcf7-validates-as-required{
	width: 100%;
}
	
.label {
	margin-bottom: .4rem;
}
.label_tag {
	font-size: 1.1rem;
}
	
input[type="text"],input[type="email"],input[type="tel"] {
	padding: .4rem;
}
	
textarea {
	padding: .4rem;
}
	
input[type="submit"]{
	font-size: 16px;
}}


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

footer {
	width: 100%;
	height: 500px;
	background-image: url("img/footer.jpg");
	background-size: cover; 
	background-position: 0 -320px;
	text-align: center;
}

@media screen and (max-width: 767px) {	
footer {
    height: 500px;
}}

.footer {
	padding-top: 60px;
	font-weight: 400;
}

.footer p {
	margin: 5px;
}

.footer img {
	width: 35px;
	margin: 40px auto;
}

.footer p {
	text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff;
}

.footer-text2 {
	font-size: 13px;
	line-height: 1.4rem;
}

.copy {
	font-size: 13px;
	margin-top: 30px;
	margin: 0;
}

@media screen and (max-width: 767px) {	
footer p {
    margin: 0;
}}

.page_top_btn {
	z-index: 998;
}

.recapcha-copy {
	margin-top: 40px;
}

.recapcha-copy p {
	font-size: 11px;
	line-height: 1rem;
}

.recapcha-copy a {
	color: #000;
}