@charset "UTF-8";
/* CSS Document */

/*-----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

:root {
	--main-font-color: #4C4948;
	--main-bg-color: #e19576;
	--main-bg-color-alpha: #f5f2e9;
	--main-bg-color-dark: #e4ab99;
	--font-color: #4c4948;
	--sub-bg-color: #966e50;
	--sub-font-color: #966e50;
	--sub-font: "Cormorant Garamond", serif;
}

body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { max-width: 100%; width: auto; height: auto; vertical-align: top; }

body { color: var(--main-font-color); font-family: "Shippori Mincho", serif; font-weight: 400; font-style: normal; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-align: justify; text-justify: inter-ideograph; }
a { color: var(--main-font-color); text-decoration: none; transition: .3s; }

#Container { position: relative; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; overflow: hidden; }
#Contents { width: calc(100% - 100px); margin-left: 100px; }
a[href^="tel:"] { cursor: default; }

/*-----------------------------------------------------
Header
----------------------------------------------------- */
header { width: 100px; height: 100vh; background: #FFF; position: fixed; top: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; z-index: 4; }
header .logo a,header .event a { display: block; background: var(--main-bg-color); width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; }
header .event a { background: var(--main-bg-color-dark); }
header .logo img { width: 43px; }
header .logo a { background: #FFF; }
header .event img { width: 28px; }
header .name { width: 25px; margin-top: 20px; margin-bottom: auto; }

header #Menu { display: block; width: 30px; height: 25px; z-index: 5; cursor: pointer; position: absolute; top: 0; bottom: 0; margin: auto; }
header #Menu span { display: inline-block; transition: all .4s; box-sizing: border-box; width: 30px; }
header #Menu span { position: absolute; left: 0; right: 0; margin: auto; height: 1px; background-color: #251e1c; border-radius: 1px; }
header #Menu span:nth-of-type(1) { top: 0px; }
header #Menu span:nth-of-type(2) { top: 0; bottom: 0; }
header #Menu span:nth-of-type(3) { bottom: 0; width: 15px; right: auto; }
header #Menu.open span:nth-of-type(1) { transform: translateY(12px) rotate(45deg); }
header #Menu.open span:nth-of-type(2) { opacity: 0; }
header #Menu.open span:nth-of-type(3) { transform: translateY(-12px) rotate(-45deg); width: 30px; }

header + nav { position: fixed; top: 0; height: 100vh; width: 450px; background: rgba(255,255,255,0.95); z-index: 3; transform: translateX(-100%); padding: 0 35px; transition: .5s; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; visibility: hidden; }
header + nav.open { transform: translateX(100px); transition: .5s; visibility: visible; }
header + nav p { font-family: var(--sub-font); font-size: 3.438em; width: 165px; margin-top: 100px; letter-spacing: 0.15em; }
header + nav dl { margin-left: 15px; }
header + nav dl dt { margin-top: 25px; position: relative; font-size: 1.500em; }
header + nav dl dt::after { content: ""; display: inline-block; width: 10px; height: 20px; background: url(../images/ic_arrow.svg) no-repeat center; position: absolute; right: 0; }
header + nav dl dt.none::after { display: none; }
header + nav dl dt.open::after { transform: rotate(90deg); }
header + nav dl dd { display: none; border-left: 1px solid #251e1c; padding-left: 20px; margin-top: 25px; font-size: 1.250em; }
header + nav ul li + li { margin-top: 20px; }
header + nav dl dt.open:last-child::after,header + nav dl dt.open:nth-last-child(2)::after { transform: rotate(0); }
header + nav dl a { display: block; }
header + nav > ul { display: flex; justify-content: space-around; width: 210px; margin-top: 25px; margin-left: 5px; }
header + nav > ul li { width: 54px; margin-top: 0!important; }


/*-----------------------------------------------------
Footer
----------------------------------------------------- */
footer { width: calc(100% - 100px); margin-left: auto; background: var(--main-bg-color); margin-top: 150px; }
footer > .inner { max-width: 1700px; width: 100%; padding: 25px 50px 15px 50px; box-sizing: border-box; }
footer nav { background: #8a7a72; }
footer nav .inner { max-width: 1700px; width: 100%; display: flex; justify-content: space-between; padding: 40px 50px 60px 50px; box-sizing: border-box; }
footer nav .inner .column { width: 20%; padding: 0 15px; box-sizing: border-box; }
footer nav .inner .column + .column { border-left: 1px solid #FFF; }
footer nav .inner p { color: #FFF; font-size: 0.938em; font-weight: 400; letter-spacing: 0.1em; border-bottom: 1px solid #FFF; padding-bottom: 5px; }
footer nav .inner ul { font-size: 0.813em; line-height: 1.7em; margin-top: 15px; }
footer nav .inner ul li a { color: #FFF; }
footer .mail { position: relative; z-index: 1; width: 255px; height: 30px; display: flex; justify-content: center; align-items: center; color: var(--main-bg-color); font-size: 0.750em;  letter-spacing: 0.05em; margin: -40px 0 0 auto; }
footer .mail:after { content: ""; border: 1px solid var(--main-bg-color); background: #FFF; transform: skewX(-35deg); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
footer p a { color: #FFF; }
footer .mail a { color: var(--font-color); display: block; width: 100%; text-align: center; padding: 0 15px; box-sizing: border-box; }
footer .mail .mark { width: 10px; height: auto; margin: 0 2px 0 2px; }
footer .flex { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; }
footer .flex { font-size: 0.750em; color: #fff; line-height: 1.5em; font-weight: 400; }
footer .flex strong { font-size: 1.125rem; display: inline-block; margin-left: 0.5em; font-weight: 400; }
footer .flex p:last-child { font-weight: 400; }
footer p.copy { font-size: 0.750em; text-align: center; color:#e0f9ed; padding-bottom: 15px; }
#Floating { display: none; }
.slick-prev, .slick-next { z-index: 0!important; }

@media screen and (max-width:960px) {
	#Contents { width: 100%; margin-left: auto; }
	
/*-----------------------------------------------------
Header
----------------------------------------------------- */
	header { width: 100%; height: 50px; flex-direction: row; justify-content: space-between; align-items: center; }
	header .logo a,header .event a { width: 50px; height: 50px; }
	header .logo img { width: 31px; }
	header .event { display: none; }
	header .name { width: 20px; height: 25px; margin: auto auto auto 20px; transform: rotate(-90deg); }
	header #Menu { position: relative; margin-right: 15%; }
	header + nav { transform: translate(-100%,50px); width: 100%; visibility: hidden; }
	header + nav.open { transform: translate(0,50px); visibility: visible; }
	header + nav p { width: calc(23em + 165px); margin-left: auto; margin-right: auto; }
	header + nav p img { width: 165px; }
	header + nav dl { width: 23em; margin: 0 auto; }
	header + nav dl dt:first-child { margin-top: 0; }
	header + nav > ul { width: 23em; margin: 25px auto 0 auto; }
	
	footer { width: 100%; margin-left: auto; padding-bottom: 60px; }
	footer > .inner { padding: 25px 30px 50px 30px; background: var(--main-bg-color-dark); }
	footer nav { display: none; }
	footer .mail { width: 255px; margin: -40px auto 0 auto; }
	footer .flex { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #FFF; }
	footer .flex p { margin-top: 20px; }
	footer .flex p + p { margin-top: 15px; }
	footer .flex strong { font-size: 1.125rem; display: block; margin: 5px 0; }
	footer .flex strong + br { display: none; }
	footer p.copy { text-align: center; padding-bottom: 10px; margin-top: 10px; }
  
  #Floating { position: fixed; bottom: 0; width: 100%; display: flex; justify-content: space-between; z-index: 100; transition: 0.8s; }
  #Floating a { width: 50%; padding: 15px 0; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;}
  #Floating a.siryo { background: var(--main-bg-color-dark); }
  #Floating a.siryo img { width: 28px; margin-left: 5px; }
  #Floating a.oc { background: #b2a4c4; }
  #Floating a.oc img { width: 150px; }
  
}


@media screen and (max-width:600px) {
	header .name { width: 15px; height: 25px; margin: auto auto auto 20px; transform: rotate(-90deg); }
	
	header #Menu { width: 20px; margin-right: 5%; }
	header #Menu span { width: 20px; }
	header #Menu span:nth-of-type(3) { bottom: 5px; width: 10px; }
	header #Menu span:nth-of-type(1) { top: 5px; }
	header #Menu.open span:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
	header #Menu.open span:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); width: 20px; }
	header + nav { padding: 0 15px; }
	header + nav p { width: calc(18em + 100px); margin: 20px auto 0 auto; }
	header + nav p img { width: 100px; }
	header + nav dl { width: 18em; margin-top: 10px; }
	header + nav dl dt { font-size: 1.250rem; margin-top: 20px; }
	header + nav dl dd { font-size: 1.063rem; }
	header + nav > ul { width: 18em; justify-content: flex-start; margin: 25px auto 0 auto; }
	header + nav > ul li + li { margin-left: 30px; }
	
	footer .flex strong { font-size: 1.000rem; }
	footer p.copy { font-size: 0.625rem; }
}