@charset "UTF-8";
/*
* Last Update 2021-5-21
*
* 0-1.Clearfix
*
* 1-1.General
* 1-2.Structure
*
*/

/*
* Media query Setting
*SMP > below 559px
*TB > below 560px - 959px
*PC > over 960px;
*/

/*======================================

0-1.Clearfix

=======================================*/
.clearfix:after {
clear: both;
content: "";
display: block;
}

/*======================================

1-1.General

=======================================*/
* {
box-sizing: border-box;
}

*:before,
*:after {
box-sizing: border-box;
}

html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
overflow:auto;
}

body {
background-color: #fff;
color: #000;
font-family: 'Noto Serif JP', serif;
font-weight: 100;
font-size: 1.2rem;
line-height: 1.6;
overflow: hidden;
}

/*===== for   OVER - 560px =====*/
@media screen and (min-width:560px){
body {
font-size: 1.4rem;
}
}

/*===== for   OVER - 960px =====*/
@media screen and (min-width:960px){
body {
font-size: 1.6rem;
}
}

img {
max-width: 100%;
height: auto;
width
/***/
: auto;
border: none;
border-style: none;
}

img.image-full {
display: block;
width: 100%;
margin: auto;
}

img[src$=".svg"] {
width: 100%;
height: auto;
}

input,
button,
textarea,
select {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

figure {
position: relative;
line-height: 0;
}

figcaption {
color:#fff;
font-size: 1rem;
line-height: 1.6;
text-shadow: 2px 2px 5px #000;
position: absolute;
bottom: .4em;
right: .4em;
}
figcaption.noTxtShadow {text-shadow:none;}
figcaption.outFig {
color:#000;
margin-top: .4em;
text-align: right;
text-shadow:none;
position: relative;
bottom:auto;
right: auto;
}

hr {
border: none;
clear: both;
height: 1px;
}

blockquote {
font-size: 1rem;
line-height: 1.6;
margin-top: 8px;
}

/*===== for   OVER - 560px =====*/
@media screen and (min-width:560px){
figcaption {
font-size: 1.2rem;
}

hr {
height: 16px;
}

blockquote {
font-size: 1.2rem;
}
}


em,i {font-style: normal;}

a {
color: #000;
text-decoration: none;
transition: .3s all;
}

a:hover,
a:focus {}

a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

a img {
transition: .3s all;
}
a:hover img {
opacity: .8;
}

.disable {
color: #ccc;
display: block;
/* IE対応 */
pointer-events: none !important;
}

/*===== for   OVER - 960px =====*/
@media screen and (min-width:960px){
a[href*="tel:"] {
pointer-events: none!important;
cursor: default;
text-decoration: none;
}
}


#pageWrap {
display: flex;
flex-wrap: wrap;
width: 100%;
padding-top: 80px;
}

#pageWrap > * {
display: block;
margin: 0 auto;
width: 100%;
}

#pageWrap h1 {order:3;}
#pageWrap #contents {order:1;}
#pageWrap #pageFooterWrap {order:2;}

.container,
.container-narrow {
width: 94%;
margin: 0 auto;
position: relative;
}
.container-narrow {max-width: 880px;}
.container {max-width: 1200px;}
.container-fluid {width: 100%;}

.dir_col {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
}
.gut_just {
justify-content: space-between;
}
.gut_center {
justify-content: center;
}
.gut_start {
justify-content: flex-start;
}
.gut_end {
justify-content: flex-end;
}
.gut_around {
justify-content: space-around;
}

.only_sp,
.visible_sp {display: block;}

.only_md,
.only_lg,
.visible_tbpc,
.visible_pc {display: none;}


/*===== for   OVER - 560px =====*/
@media screen and (min-width: 560px) {
.only_sp,
.visible_sp {display: none;}

.only_md,
.visible_tb,
.visible_tbpc {display: block;}
}

/*===== for   OVER - 960px =====*/
@media screen and (min-width: 960px) {
#pageWrap {padding-top: 100px;}

.container {width: 94%;}

.visible_tb {display: none;}

.only_lg,
.visible_pc {display: block;}

}




/*======================================

1-2.Structure

=======================================*/

/*==========
HEADER
==========*/
header {
background-color: #fff;
height:80px;
width: 100%;
position: fixed;
top:0;
z-index: 99;
}
header .header_inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
margin:0 auto;
}

header h1 {
background: url(../../img/common/logo.png) no-repeat;
background-size: 100%;
height:50px;
margin:10px 0 8px;
text-indent: -9999em;
width: 119px;
}

header h1 a {
display: block;
height:100%;
width:100%;
}

.header_drawer {display: none;}

#unaviWrap #uNav {
display: flex;
align-items: center;
justify-content: space-between;
}
#unaviWrap #uNav li {
font-size:1.2rem;
/*letter-spacing: .1em;*/
margin-right:3em;
/*text-indent: .1em;*/
}
#unaviWrap .pc_nav {display: block;}

#unaviWrap #uNav li.nav_request,
#unaviWrap #uNav li.nav_reserve,
#unaviWrap #uNav li.nav_online {
font-size:116%;
margin-right: 0;
}

.nav_request a {
background-color: #f282ac;
transition: .5s all;
}
.nav_request a:hover {background-color: #e9377a;}
.nav_reserve a {
background-color: #1975d4;
display: none;
transition: .5s all;
}
.nav_reserve a:hover {background-color: #0c44c5;}
.nav_online a {
background-color: #b80101;
display: none;
transition: .5s all;
}
.nav_online a:hover {background-color: #940c0c;}

.nav_request a,
.nav_reserve a,
.nav_online a {
color:#fff;
display: block;
font-size:1.6rem;
}


header .nav_request,
header .nav_reserve,
header .nav_online {
line-height: 48px;
text-align: center;
width:150px;
}

/*.nav_reserve {display: none;}一旦非表示*/


/*===== for   BELOW - 959px =====*/
@media screen and (max-width:959px){

header .container {width:100%;}
header h1 {margin-left:3%;}

#unaviWrap {
display: block;
width: 100%;
}
#unaviWrap #uNav {
display: flex;
align-content: center;
align-items: center;
justify-content: space-between;
}
#unaviWrap #uNav li {
background-color: #ddd;
border-right:1px solid #fff;
font-size:1.2rem;
line-height: 48px;
margin:0;
text-align: center;
width:33.33%;
/*来場非表示のみwidth:33.33%;*/
}
#unaviWrap #uNav li:last-child {border-right: none}
#unaviWrap #uNav li a {display: block;}

#unaviWrap #uNav li.nav_request,
#unaviWrap #uNav li.nav_reserve,
#unaviWrap #uNav li.nav_online {margin:0;}

#unaviWrap .nav_request a,
#unaviWrap .nav_reserve a,
#unaviWrap .nav_online a {
color:#fff;
display: block;
font-size:1.2rem;
}
#unaviWrap .pc_nav {display: none;}

.header_drawer {
display: block;
height: 68px;
width:68px;
position: absolute;
top:0;
right:0;
}
.header_drawer button {
background-color:#000;
border: none;
height: 100%;
width: 100%;
position: relative;
transition: .3s;
}
.header_drawer span {
position: absolute;
top:1.6em;
left: 50%;
width: 24px;
height: 1px;
background-color: #fff;
transition: .3s;
transform: translateX(-50%);
}
.header_drawer span:nth-child(1) {
transform: translate(-50%, -6px)
}
.header_drawer span:nth-child(3) {
transform: translate(-50%, 6px)
}
.header_drawer button::after {
color:#fff;
content: 'MENU';
font-family: 'Cormorant Garamond', serif;
font-size:1.2rem;
position: absolute;
bottom:.8em;
left:50%;
transform: translateX(-50%);
}

.header_drawer button.open {background-color: #fff;}
.header_drawer button.open::after {
color:#000;
content: 'CLOSE';
}
.header_drawer .open span {
background-color: transparent;
transition: .3s;
}
.header_drawer .open span:nth-child(1) {
background-color:#000;
transform:translate(-50%, 0px) rotate(45deg);
}
.header_drawer .open span:nth-child(3) {
background-color:#000;
transform: translate(-50%, 0px) rotate(-45deg);
}

/*.nav_reserve {display: none;}一旦非表示*/


}


/*==========
GLOBAL NAVI
==========*/

#gnaviWrap {line-height: 32px;}

#gNav {
border-left:1px solid #ccc;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#gNav li {
border-right:1px solid #ccc;
font-size:1.4rem;
letter-spacing:.1em;
text-indent: .1em;
text-align:center;
width:11.11%;
position: relative;
}
#gNav li a {
display: block;
overflow: hidden;
transition: .3s ease-in;
position: relative;
}

#gNav li a .new {
background-color: #e9377a;
color:#fff;
display: block;
font-family: 'Cormorant Garamond', serif;
font-size:1rem;
height: 12px;
line-height: 1.2;
width: 3em;
position: absolute;
top:0;
left:0;
}

#gNav li.disable a {color:#ccc;}

#gNav li.nav_request {margin:0 1em 0 2em;}
#gNav li.nav_reserve,#gNav li.nav_online {margin:0;}

.sp_nav {display: none;}


/*===== for   OVER - 960px =====*/
@media screen and (min-width:960px){
#gNav li a::before {
background-color: #e9377a;
content: '';
display: block;
height:3px;
width:0;
transition: all .2s ;
position: absolute;
bottom:0;
left:45%;
}
#gNav li a:hover::before {
width:100%;
left:0;
}
}

/*===== for   BELOW - 959px =====*/
@media screen and (max-width:959px){
#drawer {
background-color: rgba(60,60,60,1);
height:0;
opacity: 0;
width: 100%;
position: fixed;
top:116px;
left: 50%;
z-index: 10;
transform: translateX(-50%);
transition: all .5s;
}
#drawer.open {
height:auto;
opacity: 1;
width: 100%;
}
#drawer li {
text-align: center;
padding: 10px 0;
list-style: none;
}

#drawer a {
color: #fff;
text-decoration: none;
}

#gnaviWrap {
display: block;
padding-bottom: 0;
}

#gNav {
border-left:none;
display: none;
}
#drawer.open #gNav {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

#gNav li {
font-size:1.4rem;
width:33.33%;
}
#gNav span {font-size:2rem;}
#gNav li {
border-right:1px solid #fff;
border-bottom:1px solid #fff;
margin:0;
}
/*#gNav li:nth-child(4) {border-right: none;}*/
#gNav .disable,
#gNav .spnav {display: none;}
#gNav li a,
#gNav li a:hover {color:#fff;}
#gNav a span::after {
background-color: #fff;
height: 1px;
}
#gNav a:hover span::after {
background-color: #fff;
margin-left: -1em;
width:2em;
left:50%;
}

.sp_nav {display: block;}

}

/*===== for   BELOW - 559px =====*/
@media screen and (max-width:559px){
#gNav li {
font-size:1.2rem;
width: 50%;
}
#gNav li:first-child {width: 100%;}
}

/*==========
PAGE FOOTER
==========*/
#pageFooterWrap {
padding: 3em 0 0;
text-align: center;
}

#commentsWrap {
border-bottom:1px solid #fff;
padding-bottom: 5em;
}
#commentsWrap ul {
margin:0 auto;
max-width:1200px;
width:94%;
}
#commentsWrap li {
font-size:1.1rem;
padding-left: .5em;
text-align: left;
text-indent: -.5em;
}

#footernavWrap {
background-color: #fff;
border-top:1px solid #e7eaeb;
display: none;
}
#footernavWrap ul {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin:auto;
max-width: 1200px;
width:94%;
}
#footernavWrap li {
font-size:1.2rem;
margin:0 1em;
line-height: 40px;
}
#footernavWrap li a:hover {opacity: .6;}
#footernavWrap li.disable a {color:#ccc;}

#footerContactWrap {
background-color: #efefef;
padding:4em 0;
}

#footerContactWrap ul {
/*justify-content: center;来場非表示のみ*/
justify-content: space-between;
margin:2.5em auto 0;
max-width: 640px;
/*max-width: 480px;来場非表示のみ*/
width: 94%;
}
#footerContactWrap li {
font-size:137.5%;
width:48.6%;
/*width:100%;*/
}
#footerContactWrap li a {line-height: 4em;}
#footerContactWrap li.nav_request a {
background: rgb(242,125,169);
background: linear-gradient(90deg, rgba(242,125,169,1) 0%, rgba(239,167,194,1) 50%, rgba(242,130,172,1) 100%);
letter-spacing: .2em;
text-indent: .2em;
transition: .3s;
}
#footerContactWrap li.nav_request a:hover {
background: rgb(233,55,122,1);
opacity: .9;
}

#footerContactWrap li.nav_reserve a {
background: rgb(25,117,212);
background: linear-gradient(90deg, rgba(25,117,212,1) 0%, rgba(127,175,225,1) 50%, rgba(25,117,212,1) 100%);
letter-spacing: .2em;
text-indent: .2em;
transition: .3s;
}
#footerContactWrap li.nav_reserve a:hover {
background: rgb(12,68,197,1);
opacity: .9;
}

#footerContactWrap dt span {display: block;}
#footerContactWrap .contact_tel {
font-size:2.5em;
position:relative;
}
#footerContactWrap .contact_tel::before {
background:url(../../img/common/ic_freedial.png) no-repeat 0 50%;
background-size: 100%;
content: '';
display: inline-block;
height:25px;
margin-right: .2em;
width: 32px;
}

#footerContactWrap dd {font-size:1.1rem;}
#footerContactWrap .contact_worktime span {display: block;}


#relationBnr {
margin:3em auto 0;
max-width: 640px;
width: 90%;
}
#relationBnr p {
font-size:93%;
margin-bottom: .5em;
}

/*===== for   OVER - 560px =====*/
@media screen and (min-width:560px){
#footerContactWrap dt span {display: inline;}

#footerContactWrap dd {font-size:1.2rem;}
#footerContactWrap .contact_worktime span {
display: inline-block;
padding-left: 1em;
}
}

/*===== for   OVER - 960px =====*/
@media screen and (min-width:960px){
#footernavWrap {display: block;}
}



/*==========
FOOTER
==========*/
footer {
margin:0 auto;
padding: 24px 0 16px;
text-align: center;
width: 94%;
}

footer #companylogoWrap {
flex-wrap: wrap;
margin:auto;
/*max-width: 640px;*/
max-width: 480px;
}
/*footer #companylogoWrap li:nth-child(1) {width:24.72%;}
footer #companylogoWrap li:nth-child(2) {width:30.83%;}
footer #companylogoWrap li:nth-child(3) {width:33.61%;}*/
footer #companylogoWrap li:nth-child(1) {
margin-bottom: 24px;
width:100%;
}
footer #companylogoWrap li:nth-child(2) {width:38.125%;}
footer #companylogoWrap li:nth-child(3) {width:47.5%;}

footer #companylogoWrap li:nth-child(1) img {
display: block;
margin:auto;
width: 165px;
}

footer #privacyWrap {
font-size:1.1rem;
margin-top:1em;
}
footer #privacyWrap li:nth-child(1)::after {
content:'／';
margin:0 .5em;
}

#copyright {
font-family: 'Cormorant Garamond', serif;
font-size:1.1rem;
margin-top: 2em;
}

#copyright span {display: block;}

/* page_top */
#pagetop {
background-color: rgba(0,0,0,.5);
border-radius: 8px 0 0 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
height:40px;
width:6em;
position: fixed;
bottom: 0;
right: 0;
z-index: 1000;
}
#pagetop:hover {background-color: rgba(0,0,0,.7);}
#pagetop a {
color:#fff;
font-family: 'Cormorant Garamond', serif;
font-size:1.1rem;
text-align: center;
}

/*===== for   OVER - 560px =====*/
@media screen and (min-width:560px){
footer #privacyWrap {
display: flex;
align-items: center;
justify-content: center;
font-size:1.2rem;
}

#copyright span {display: inline;}
}

/*===== for   OVER - 960px =====*/
@media screen and (min-width:960px){
footer #privacyWrap {font-size:1.4rem;}
}

/*==========
FONT
==========*/

h1, h2, h3, h4, h5 {font-weight: 100;}

h1 {font-size:2.1em;}
h2 {font-size:1.8rem;}
h3 {font-size:1.4rem;}
h4 {font-size:1.2rem;}

.font4L {font-size: 2.1rem;}
.font3L {font-size: 1.8rem;}
.font2L {font-size: 1.5rem;}
.fontL {font-size: 1.35rem;}
.fontM {font-size: 1.2rem;}
.fontS {font-size: 1.1rem;}
.font2S {font-size: 1rem;}

.fontRed {color:#f00;}

.fontTxt_en {font-family: 'Cormorant Garamond', serif;}

.txt_note {
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
font-size: 1rem;
text-align: right;
}

.txt_center {text-align: center;}
.txt_lead {line-height: 2.4;}


.body_catch {
font-size:1.65rem;
font-feature-settings: 'palt';
margin-bottom: 2em;
text-align: center;
}

@media screen and (min-width:560px){
h1 {font-size:2.45rem;}
h2 {font-size:1.9rem;}
h3 {font-size:1.6rem;}
h4 {font-size:1.4rem;}

.font4L {font-size: 2.45rem;}
.font3L {font-size: 2.1rem;}
.font2L {font-size: 1.75rem;}
.fontL {font-size: 1.55rem;}
.fontM {font-size: 1.4rem;}
.fontS {font-size: 1.2rem;}
.font2S {font-size: 1.1rem;}

.txt_note {font-size: 1.2rem;}
.txt_lead {text-align: center;}

.body_catch {font-size:1.92rem}
}

@media screen and (min-width:960px){
h1 {font-size:2.8rem;}
h2 {font-size:2.4rem;}
h3 {font-size:1.8rem;}
h4 {font-size:1.6rem;}

.font4L {font-size: 2.8rem;}
.font3L {font-size: 2.4rem;}
.font2L {font-size: 2rem;}
.fontL {font-size: 1.8rem;}
.fontM {font-size: 1.6rem;}
.fontS {font-size: 1.4rem;}
.font2S {font-size: 1.2rem;}

.body_catch {font-size:2.2rem}
}


/*================
CONTENTS TITLE
================*/
#pageWrap h1 {
background-color: #dfdfdf;
border-top:1px solid #fff;
font-size: 1rem;
padding: 1.4em 3%;
text-align: center;
}

#titleWrap {
display: flex;
align-content: center;
align-items: center;
height:200px;
margin-bottom: 5em;
position: relative;
width: 100%;
z-index: -1;
}
#titleWrap::after {
content:'image photo';
display: block;
font-size:1.1rem;
position: absolute;
bottom:-1.8em;
right:.6em;
}
#titleWrap h2 {
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%);
font-family: 'Cormorant Garamond', serif;
font-size:2.5rem;
letter-spacing: .2em;
width: 100%;
position: absolute;
bottom:0;
left:0;
}
#titleWrap h2 span {
display: block;
margin:auto;
max-width: 1200px;
width: 94%;
}

#titleWrap.non_mv {
display: flex;
align-content: center;
align-items: center;
height:140px;
margin-bottom:2em;
position: relative;
width: 100%;
z-index: -1;
}
#titleWrap.non_mv::after {display: none;}
#titleWrap.non_mv h2 {
background: none;
width: auto;
position: absolute;
top:50%;
left:50%;
bottom:auto;
transform: translate(-50%,-50%);
}
#titleWrap.non_mv h2 span {
display: block;
margin:auto;
max-width: 1200px;
width: 94%;
}


/*===== for   OVER - 560px =====*/
@media screen and (min-width:560px){
#pageWrap h1 {font-size: 1.15rem; }

#titleWrap {height:240px;}
#titleWrap h2 {font-size:3.2rem;}

#titleWrap::after {
color:#fff;
font-size:1.2rem;
text-shadow:1px 1px 1px #000;
position: absolute;
bottom:.6em;
right:.6em;
}

#titleWrap.non_mv {
height:180px;
margin-bottom:2em;
}
#titleWrap.non_mv h2::before {height:120px;}
}

/*===== for   OVER - 960px =====*/
@media screen and (min-width: 960px) {
#pageWrap h1 {font-size: 1.2rem;}

#titleWrap {height:360px;}
#titleWrap h2 {font-size:4.8rem;}

}