﻿/* CSS Document */

* {
	padding:0;
	margin:0px;
	outline:none;
	}
html {
	overflow: auto;
	}

body {
	min-height: 100dvh;
	text-align:center;
	font-family: "Noto Sans JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	-webkit-text-size-adjust:100%;
	color: #323333;
}
img {
	vertical-align:top;
	border:0;
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	}
li {
	list-style-type: none;
}
p,a,li,div {
	max-height: 100%;
}

/* --- class and other set --- */
.shadow {
	box-shadow:rgba(0, 0, 0, 0.15) 4px 5px 8px 8px;
}
.just {
	text-align: justify;
	/*text-justify: inter-ideograph;*/
}
a { text-decoration: none;}
.clearfix::after { content: ""; display: block; clear: both;}
.inner {
	width: 100%;
	height: 100%;
}

@media only screen and (min-width: 720px) {
	html, body {
		font-size: 1.25vw;
	}
	.sp {
		display: none;
	}
	.contents { margin-inline: auto; width: 78%; min-width: 700px;}
}
@media only screen and (min-width: 1282px) {
	html, body { font-size: 20px; }
	.contents { width: 1000px;}
}
@media only screen and (max-width: 767px) {
	html, body {
		font-size: 4vw;
	}
	.pc {
		display: none;
	}
	.contents { margin-inline: auto; width: 92%; }
}
/* --- originals --- */

/* --- header --- */
header { position: fixed; top: 0; width: 100%; background-color: #fff; text-align: left; display: flex; align-items: center; justify-content: space-between;  z-index: 11; }
/* --- common --- */
@media only screen and (min-width: 768px) {
header { height: 100px; transition: height ease .4s;}
header img { width: 200px; margin: 0 36px;  transition: all ease .4s;}
header a:nth-of-type(1) img { width: 200px;}
header a:nth-of-type(2) img { width: 220px; margin-top: 5px;}
header.float, lower header { height: 66px;}
header.float a:nth-of-type(1) img,  lower header a:nth-of-type(1) img { width: 160px;}

}/* --- pc --- */
@media only screen and (max-width: 767px) {
header { height: 60px;}
header a:nth-of-type(1) img { width: 100px; margin: 0 0 0 10px; }
header a:nth-of-type(2) img { width: 140px; margin: 6px 70px 0 0; }
}/* --- sp --- */


/* --- slide --- */
div#slide .container { width: 100%; overflow: hidden; position: relative; font-size: 0;}
div#slide .container div { position: absolute;  animation-duration: 18s; animation-iteration-count: infinite; z-index: 3; }
div#slide .container div.slide { width: 100%; height: 100%; left: 0; top: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; opacity: 0; animation-name:zoomIn;}
div#slide .container div.bowl { display: block; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; background-color: #726256; }
div#slide .container div.bowl img { width: 76.5%; margin-top: 26.8%;}
div#slide .container div.slide:nth-of-type(1) { animation-delay: 0s;}
div#slide .container div.slide:nth-of-type(2) { animation-delay: 6s;}
div#slide .container div.slide:nth-of-type(3) { animation-delay: 12s;}
div#slide .container div.bowl:nth-of-type(4) { animation-delay: 0s; }
div#slide .container div.bowl:nth-of-type(5) { animation-delay: 6s; }
div#slide .container div.bowl:nth-of-type(6) { animation-delay: 12s;}

@keyframes zoomIn {
0%{ transform: scale(120%); opacity: 0;}
10%{ opacity: 1;}
50%{ transform: scale(100%);}
90%{ opacity: 1}
100%{ opacity: 0; z-index: 0;}
}
@keyframes bowlFromRight {
6%{ transform: rotate(360deg); right: -35%;}
11%{ transform: rotate(0deg); right: 3.2%;}
90%{ transform: rotate(0deg); right: 3.2%;}
100%{ z-index: 0;}
}
@keyframes bowlFromLeft {
6%{ transform: rotate(-360deg); left: -35%;}
11%{ transform: rotate(0deg); left: 3.2%;}
90%{ transform: rotate(0deg); left: 3.2%;}
100%{ z-index: 0;}
}
@keyframes bowlFromRightSp {
6%{ transform: rotate(240deg); right: -70%;}
11%{ transform: rotate(0deg); right: 3.5%;}
90%{ transform: rotate(0deg); right: 3.5%;}
100%{ z-index: 0;}
}
@keyframes bowlFromLeftSp {
6%{ transform: rotate(-240deg); left: -70%;}
11%{ transform: rotate(0deg); left: 3.5%;}
90%{ transform: rotate(0deg); left: 3.5%;}
100%{ z-index: 0;}
}


/* --- common --- */
@media only screen and (min-width: 768px) {
div#slide .container { margin-top: 100px; height: calc(100svh - 144px);}
div#slide .container div.slide:nth-of-type(1) { background-image: url(../top/slide01.jpg);}
div#slide .container div.slide:nth-of-type(2) { background-image: url(../top/slide02.jpg);}
div#slide .container div.slide:nth-of-type(3) { background-image: url(../top/slide03.jpg);}
div#slide .container div.bowl { height: 60%; top: calc(50svh - 72px - 12.5svw);}
div#slide .container div.bowl:nth-of-type(4) { animation-name: bowlFromRight; transform: rotate(360deg); right: -35%;}
div#slide .container div.bowl:nth-of-type(5) { animation-name: bowlFromLeft; transform: rotate(-360deg); left: -35%;}
div#slide .container div.bowl:nth-of-type(6) { animation-name: bowlFromRight; transform: rotate(360deg); right: -35%;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
div#slide .container { margin-top: 60px; height: calc(100svh - 60px);}
div#slide .container div.slide:nth-of-type(1) { background-image: url(../top/slide01_sp.jpg);}
div#slide .container div.slide:nth-of-type(2) { background-image: url(../top/slide02_sp.jpg);}
div#slide .container div.slide:nth-of-type(3) { background-image: url(../top/slide03_sp.jpg);}
div#slide .container div.bowl { width: 62%; }
div#slide .container div.bowl:nth-of-type(4) { animation-name: bowlFromLeftSp; transform: rotate(240deg); top: 1rem; left: -70%; center bottom;}
div#slide .container div.bowl:nth-of-type(5) { animation-name: bowlFromLeftSp; transform: rotate(-240deg); bottom: 0.7rem; left: -70%; background-position: center top;}
div#slide .container div.bowl:nth-of-type(6) { animation-name: bowlFromRightSp; transform: rotate(240deg); bottom: 0.7rem; right: -70%;}
}/* --- sp --- */

/* --- nav --- */
/* --- common --- */
nav a { font-weight: 500; }

@media only screen and (min-width: 768px) {
nav { display: block; width: 100%; height: 44px; position: sticky; top: 66px;  z-index: 11; background-color: #726256;}
nav ul { height: 42px; font-size: 14px; text-align: right; margin-right: 16px;}
nav ul li { display: inline; text-align: center; }
nav ul li a { display: inline-block; line-height: 42px; color: #fff; padding: 0 1em; position: relative; }
nav ul li a:hover { color: #FFE453;}
nav ul li a::before { content: ""; display: block; width: 1px; height: 1em; background-color: #fff; position: absolute; left: 0; top: 14px; }
nav ul li a:last-child()::bafter { content: ""; display: block; width: 1px; height: 1em; background-color: #fff; position: absolute; right: 0; top: 14px; }
}/* --- pc --- */
@media only screen and (max-width: 767px) {
nav .menubtn a { z-index: 12; position: fixed; right: 0px; top: 0px; width: 60px; height: 60px; box-sizing: border-box; align-items: center; justify-content: center; }
nav .menubtn a.open { display: flex;}
nav .menubtn a.close { display: none;}
nav .menubtn a.open img { width: 50%;}
nav .menubtn a.close img { width: 35%;}
nav.open .menubtn a.open { display: none;}
nav.open .menubtn a.close { display: flex;}
nav ul { width: 100svw; height: calc(100svh - 60px); position: fixed; z-index: 11; left: 100svw;  top: 60px; background-color: #EBE3BD; transition: left ease .3s; }
nav ul li a { display: block; color: #323333; padding: 3svh 0; margin: 0 5%;; font-size: 1.3rem; border-bottom: 0.05rem solid #B5A69C;}
nav ul li:first-child a { margin-top: 3svh;}
nav.open ul { left: 0;}
}/* --- sp --- */

/* --- content --- */
section hgroup h2 { color: #726256; }
/* --- common --- */
@media only screen and (min-width: 768px) {
section { margin-top: 4.5rem;}
section hgroup h2 { font-size:1.9rem; margin-bottom: 2.4rem; }
}/* --- pc --- */
@media only screen and (max-width: 767px) {
section { padding-top: 3.5rem;}
section hgroup h2 { font-size:1.9rem; margin-bottom: 2.4rem; }
}/* --- sp --- */

/* --- topics --- */
section#topics p#calendar a,#access .lyt-btn a { display: block; border: 0.05rem solid #B3B3B3; border-radius: 0.4em; margin-inline: auto; color: #726256; font-weight: 500; text-decoration: none }
section#topics .box .unit { text-align: left;}
section#topics .box .unit p.ttl { margin: 0.6em 0 0.25em; line-height: 1.4; font-weight: 600;}
section#topics .box .unit p.sub { text-align: justify;}
section .shelf .unit { border: 0.05rem solid #B3B3B3; border-top: none; text-align: left;}
section .shelf .unit p.ttl { width: 100%; background-color: #726256; color: #fff; font-weight: 500; line-height: 2.4; text-align: center;}
section#topics .shelf .unit p.date { margin-left: 0.3rem;}
section .shelf .unit p.sub { font-weight: 500;}
section#topics .shelf .unit p.sub {  padding-left: 1.2em;  position: relative; }
section#topics .shelf .unit p.sub::after { content: ""; display: block; width: 0.7em; height: 0.7em; background-color: #323333; position: absolute; left: 0; top: 0.45em; clip-path: polygon(0% 0%, 100% 0%, 100% 100%); transform: rotate(45deg);}
section .shelf .unit p.sub a { color: #323333; }
section .shelf .unit p.sub a:hover {  text-decoration: underline;}
/* --- common --- */
@media only screen and (min-width: 768px) {
section#topics p#calendar,#access .lyt-btn { margin-bottom: 4rem; }
section#topics p#calendar a,#access .lyt-btn a { font-size: 1.25rem; line-height: 3.4rem; width: 23.4rem; transition: all ease .3s; }
section#topics p#calendar a:hover,#access .lyt-btn a:hover { border-color: #726256; background-color: #726256; color: #fff; }
section#topics .box { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem 6%; padding-bottom: 5.5rem;}
section#topics .box figure { aspect-ratio: 1 / 1; overflow: hidden; }
section#topics .box figure img {  transition: all ease .4s; }
section#topics .box figure:hover img { transform: scale(1.1);}
section#topics .box .unit p.ttl { font-size: 1.1rem;}
section#topics .box .unit p.sub { font-size: 0.9rem; }
section .shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4%;}
section .shelf .unit { padding: 0 0 2rem;}
section .shelf .unit .txtarea { padding: 1.2rem 1rem; margin: 0;}
section .shelf .unit p.sub { margin-bottom: 1.2em;}
section .shelf .unit p.date { font-size: 0.8rem;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
section#topics p#calendar,#access .lyt-btn { margin: -1rem 0 3rem; }
section#topics p#calendar a,#access .lyt-btn a { font-size: 1rem; line-height: 3.4rem; width: 20em; }
section#topics .box { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 6%; padding-bottom: 3rem;}
section#topics .box .unit p.sub { font-size: 0.9rem; }
section .shelf .unit { padding: 0 0 1rem;}
section .shelf .unit:not(:first-of-type) { margin-top: 1.5rem;}
section .shelf .unit .txtarea { padding: 0 1rem; margin: 0;}
section#topics .shelf .unit p.sub { margin: 0 0.6rem 1rem;}
section#topics .shelf .unit p.date { font-size: 0.9rem; margin: 1rem 0.9rem 0.25em;}
}/* --- sp --- */


/* --- foot-area --- */

/* --- common --- */
section#foot-area h2 { font-weight: 600; color: #726256; }
section#foot-area #reservation p.sub { font-weight: 500; }
section#foot-area #reservation a { color: #323333;}
section#foot-area #reservation a:hover { text-decoration: underline;}
section#foot-area #access #map iframe { width: 100%; height: 100%;}
section#foot-area p.link { line-height: 1; }
@media only screen and (min-width: 768px) {
section#foot-area { margin-top: 6.5em; padding-bottom: 3rem;}
section#foot-area h2 { font-size: 1.5rem;  margin-bottom: 0.25em;}
section#foot-area #reservation p.sub strong { font-weight: 600; display: block; font-size: 1.45rem;}
section#foot-area #access { padding-top: 4rem;}
section#foot-area #access p.ttl { font-size: 1.2rem;}
section#foot-area #access p.sub { font-size: 0.8rem; margin-bottom: 1.75em;}
section#foot-area #access #map { margin-top: 3rem; width: 80svw; margin-left: calc(50% - 40svw); aspect-ratio: 3 / 1;}
section#foot-area #access .logo { width: 14.5rem; margin: 3rem auto; }
section#foot-area p.link { font-size: 0.75rem;}
section#foot-area p.link a {display: inline-block; padding: 0 1em; color: #323333; border-left: 0.05rem solid #323333;}
section#foot-area p.link a:nth-of-type(2) { border-right: 0.05rem solid #323333; }
section#foot-area p.copyright { font-size: 0.55rem; margin-top: 1.5em;}
.pagetop { width: 2.7rem; position: fixed; z-index; 11; bottom: 2rem; right: -3rem; transition: right ease .4s;}
.pagetop.show { right: 2rem;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
section#foot-area { margin-top: 1rem; padding-bottom: 2rem;}
section#foot-area h2 { font-size: 1.6rem;  margin-bottom: 0.5em;}
section#foot-area #reservation p.sub strong { font-weight: 600; display: block; font-size: 1.5rem; line-height: 1; margin: 0.5em 0 0.75em;}
section#foot-area #access { padding-top: 5rem;}
section#foot-area #access p.ttl { font-size: 1.2rem; margin-bottom: 0.25em;}
section#foot-area #access p.sub { font-size: 0.85rem; margin-bottom: 1.75em;}
section#foot-area #access #map { margin-top: 3rem; width: 100%; aspect-ratio: 1 / 1;}
section#foot-area #access .logo { width: 12rem; margin: 3rem auto; }
section#foot-area p.link { font-size: 0.75rem;}
section#foot-area p.link a {display: inline-block; padding: 0 1em; color: #323333; border-left: 0.05rem solid #323333;}
section#foot-area p.link a:nth-of-type(2) { border-right: 0.05rem solid #323333; }
section#foot-area p.copyright { font-size: 0.55rem; margin-top: 1.5em;}
}/* --- sp --- */





/* --- lower pages --- */

.lower h1 { display: inline-block; padding: 0 2em; background-image: url(../images/icon_bowl.jpg); background-repeat: no-repeat; background-size: 1.4em; background-position: left center;}
.lower section.lower-section { text-align: left; margin-top: 0; }
.lower section.lower-section h2 { padding-left: 1.3em; position: relative; }
.lower section.lower-section h2::before { content: ""; display: block; width: 1em; height: 1em; border-radius: 50%; background-color: #999899; position: absolute; left: 0; top: 0.35em;}
.lower section p.caution { margin-top: 1em;}
.lower section p a { color: #726256; text-decoration: underline; font-weight: 500;}
.lower section#foot-area #reservation p a { text-decoration: none;}
.lower section p.caution.indent { margin-left: 1em;}
.lower section p.caution.indent span.lead { margin-left: -1em;}
.lower section.lower-section .unit { text-align: left;}
.lower section.lower-section .unit　figcaption{ font-size: 0.9rem;}
.lower section.lower-section h3 { font-weight: 600;}
.lower section.lower-section hgroup h3 { margin: 0;}
.lower section.lower-section .unit .txtarea p.sub, .lower section.lower-section .unit .txtarea p.exp { text-align: justify;}
.lower section.lower-section .unit .txtarea p span.small { font-size: 90%;}
.lower section.lower-section .unit .txtarea p.link a { display: block; background-color: #726256; color: #fff; text-align: center; line-height: 2.6; border-radius: 0.3em; }
.lower section.lower-section .unit .txtarea p.link a span { display: inline-block; padding: 0 2.8em; position: relative;}
.lower section.lower-section .unit .txtarea p.link a span::after { content: ""; display: block; width: 1.6em; height: 0.5em; transform: skew(50deg); border-bottom: 0.05rem solid #fff; border-right: 0.1rem solid #fff; position: absolute; right: 0; bottom:1.1em;}
section table { border-collapse: collapse; width: 100%; font-weight: 500; line-height: 1.5;  }
section th, section td { border: 0.05rem solid #323333;  padding: 0.5em 0.75em; vertical-align: middle; text-align: center; }
section th.lt, section td.lt { text-align: left;}
section th { background-color: #EBE3BD;}
section table.tri td, section table.tri th { width: 33%;}
section table.quad td, section table.quad th { width: 25%;}
/* --- common --- */
@media only screen and (min-width: 768px) {
.lower h1 { color: #726256; font-size:1.9rem;  margin: 150px auto 2rem; }
.lower section.lower-section { text-align: left; padding-top: 4rem;}
.lower section.lower-section h2 { margin: 0 0 1.5rem; font-size: 1.5rem;}
.lower section.lower-section h2 span.note { font-size: 75%; margin-left: 1em; font-weight: 500;}
.lower section p.caution { font-size: 0.8rem;}
.lower section p.caution a { margin-left: 1em;}
.lower section.lower-section .unit { display: grid; grid-template-columns: 1fr 1fr; gap: 5%;}
.lower section.lower-section .shelf .unit { display: block;}
.lower section.lower-section hgroup,
.lower section.lower-section h3 { margin: 3rem 0 1em;}
.lower section.lower-section h3 { font-size:1.25rem;}
.lower section.lower-section hgroup p { margin: 0.25em 0 0; font-size: 0.9rem;}
.lower section.lower-section .article h3 { margin-bottom: 0.9em;}
.lower section.lower-section h3:first-of-type { margin-top: 0;}
.lower section.lower-section .unit .imgarea p.caution { margin-top: 0.8em;}
.lower section.lower-section .unit .txtarea { margin-top: 2px;}
.lower section.lower-section .unit .txtarea p.exp { font-size: 0.9rem; }
.lower section.lower-section .unit .txtarea p.sub { font-size: 0.95rem; }
.lower section.lower-section .unit .txtarea p.link { font-size: 1.05rem; margin-top: 2rem;}
section th, section td ,section th span.normal,section td span.normal{ font-size: 0.9rem; font-weight: 500;}
.lower section.lower-section .unit .txtarea p.caution { text-align: justify; margin-top: 2.5em;}
.lower section#foot-area #reservation p a:hover { text-decoration: underline;}
section td.fe { font-size: 1.15rem; font-weight: 600;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
.lower h1 { color: #726256; font-size:1.9rem;  margin: 0 0 3rem 1em; padding-top: 7rem; background-position: left 7.15rem;}
.lower section.lower-section { text-align: left; padding: 2rem 0;}
.lower section.lower-section h2 { margin: 0 0 1rem; font-size: 1.5rem;}
.lower section.lower-section h2 span.note { font-size: 75%; font-weight: 500; display: block;}
.lower section p.caution { font-size: 0.8rem;}
.lower section p.caution a.cnt { margin-left: 1em;}
.lower section.lower-section hgroup,
.lower section.lower-section h3 { margin: 3rem 0 1em;}
.lower section.lower-section h3 { font-size:1.25rem;}
.lower section.lower-section hgroup p { margin: 0.25em 0 0; font-size: 0.9rem;}
.lower section.lower-section .article h3 { margin-bottom: 0.9em;}
.lower section.lower-section h3:first-of-type { margin-top: 0;}
.lower section.lower-section .unit .imgarea p.caution { margin-top: 0.8em;}
.lower section.lower-section .unit .txtarea { margin-top: 1.5rem;}
.lower section.lower-section .unit .txtarea p.exp { font-size: 0.9rem; }
.lower section.lower-section .unit .txtarea p.sub { font-size: 0.95rem; }
.lower section.lower-section .unit .txtarea p.link { font-size: 1.05rem; margin-top: 1rem;}
section th, section td ,section th span.normal,section td span.normal{ font-size: 0.8rem; font-weight: 500;}
.lower section.lower-section .unit .txtarea p.caution { text-align: justify; margin-top: 1.5em;}
section td.fe { font-size: 1.15rem; font-weight: 600;}
}/* --- sp --- */

/* --- service --- */
section#service ul.box li a.sel { position: relative; background-color: #EBE3BD;}
section#service ul.box li a.sel::after { content: ""; display: block; width: 0.8em; height: 0.8em; background-color: #726256; clip-path: polygon(0% 0%, 50% 100%, 100% 0%); position: absolute; left: calc(50% - 0.24em); bottom: -1.3em; }
section#service .article{ border: 0.15rem solid #EBE3BD; display: none;}
section#service .article.sel { display: block;}
section .unit .txtarea.props p.exp { margin-left: 4em;}
section .unit .txtarea.props p.exp span.lead { display: inline-block; padding: 0 0.35em 0.1em 0.5em; margin-right:0.9em; margin-left: -4em; border-radius: 0.2rem; letter-spacing: 0.15em; color: #fff; background-color: #79A57C; font-weight: 600;}
section#service .unit p.mat { background-color: #EDF7F7; text-align: justify; padding: 1em; border-radius: 0.8em; margin-top: 1.25em;}
section#service .unit p.mat strong { font-weight: 500; color: #FF6600; text-align: justify; }
/* --- common --- */
@media only screen and (min-width: 768px) {
section#service ul.box { display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.5%;}
section#service ul.box li a { display: block; border: 0.05rem solid #999899; border-radius: 0.4rem; padding: 0.5em 0; text-align: center; color: #323333; font-weight: 500; transition: background-color ease .3s;}
section#service ul.box li a:hover { background-color: #EBE3BD; }
section#service ul.box li a { font-size: 1.05rem;}
section#service .article { margin-top: 2rem; padding: 1.5rem 1.5rem 2rem;}
section#service h3 { margin-top: 0;}
section#service .unit:not(:last-child) { padding-bottom: 2rem; margin-bottom: 1.5rem; border-bottom: 0.01rem solid #999899;}
section#service .article .unit:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
section .unit .txtarea.props p.exp,
section .unit .txtarea.props p.sub { margin-bottom: 1em;}
section#service .unit p.mat { font-size: 0.85rem;}
section#service .unit p.mat strong { display: block; font-size: 0.8rem; margin-bottom: 0.25em;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
section#service ul.box { display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.5%;}
section#service ul.box li a { display: block; border: 0.05rem solid #999899; border-radius: 0.4rem; padding: 0.5rem 0; text-align: center; color: #323333; font-weight: 500; transition: background-color ease .3s;}
section#service ul.box li a { font-size: 1rem; line-height: 1.5;}
section#service ul.box li:nth-of-type(3) a { font-size: 80%; line-height: 1.4; padding: 0.15em 0; }
section#service .article { margin-top: 2rem; padding: 1rem 1rem 1.5rem;}
section#service h3 { margin-top: 0;}
section#service .unit:not(:last-child) { padding-bottom: 2rem; margin-bottom: 1.5rem; border-bottom: 0.01rem solid #999899;}
section#service .article .unit:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
section .unit .txtarea.props p.exp,
section .unit .txtarea.props p.sub { margin-bottom: 0.5em;}
section#service .unit p.mat { font-size: 0.85rem;}
section#service .unit p.mat strong { font-size: 0.8rem; margin-bottom: 0.25em;}

}/* --- sp --- */

/* --- facilities --- */
.lower#facilities section .unit .txtarea p.exp { margin-top: 0.15em; text-align: justify:}
.lower#facilities section .unit .txtarea p.sub {font-weight: 600;}
.lower#facilities section .unit .txtarea p.sub:not(:nth-of-type(1)) { margin-top: 1.25em;}
.lower#facilities section#bowling-facilities  .unit .txtarea p.caution { margin-top: 0;}
/* --- common --- */
@media only screen and (min-width: 768px) {
}/* --- pc --- */
@media only screen and (max-width: 767px) {
}/* --- sp --- */


/* --- reservation --- */
.lower#reservation section#playtime { background-color: #EDF7F7; }
.lower#reservation section#playtime h2 { padding-left: 0; line-height: 3.5;}
.lower#reservation section#playtime h2::before { content: none;}
.lower#reservation section#playtime h2 span.lead { display: inline-block; font-size: 50%; width: 4em; height: 4em; color: #fff; background-color: #79A57C; font-weight: 500; border-radius: 50%; text-align: center; vertical-align: middle; box-sizing: border-box; padding-top: 0.2em; margin-right: 1em; }
.lower#reservation section#playtime h2 span.note { display: inline-block; vertical-align: baseline; font-size: 75%;}
.lower#reservation section#playtime th { background-color: transparent;}
.lower#reservation section#about-meal .contents { padding-bottom: 3rem; border-bottom: 0.05rem solid #999899;}
.lower#reservation section#about-meal .unit .txtarea h3 {line-height: 1; }
.lower#reservation section#about-meal .unit .imgarea p.caution { margin-top: 2.4em;}
/* --- common --- */
@media only screen and (min-width: 768px) {
.lower#reservation section#playtime { padding: 0.5rem 0 2.5rem 0; margin-top: 4rem;}
.lower#reservation section#playtime h2 { margin-bottom: 0.5rem; }
.lower#reservation section#playtime th span { display: flex; width: 100%; justify-content: space-between;}
.lower#reservation section#about-meal .unit .txtarea h3 { margin: 0rem 0 0.75rem; }
.lower#reservation section#about-meal .unit .txtarea h3:not(:nth-of-type(1)) { margin-top: 2rem;}
.lower#reservation section#about-meal .unit .txtarea p.exp {}
.lower#reservation section#about-meal .unit .txtarea p.link { margin-top: 1.25rem;}
.lower#reservation section#about-meal .unit .txtarea p.caution { margin-top: 3rem;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
.lower#reservation section#playtime { padding: 0.5rem 0 2.5rem 0; margin-top: 2rem;}
.lower#reservation section#playtime h2 { margin-bottom: 0; }
.lower#reservation section#about-meal .unit .txtarea h3 { margin: 2rem 0 0.75rem; }
.lower#reservation section#about-meal .unit .txtarea h3:not(:nth-of-type(1)) { margin-top: 2rem;}
.lower#reservation section#about-meal .unit .txtarea p.exp {}
.lower#reservation section#about-meal .unit .txtarea p.link { margin-top: 1.25rem;}
.lower#reservation section#about-meal .unit .txtarea p.caution { margin-top: 3rem;}
}/* --- sp --- */


/* --- membership --- */
.lower#membership p.headcopy {margin-top: 1em;}
.lower#membership #annual-fee .shelf .unit p.sub span { display: inline-block; width: 14em;}
.lower#membership #benefits p.exp.marker { margin-left: 1.3em; line-height: 1.7;}
.lower#membership #benefits p.exp.marker strong { display: block; font-weight: 500; font-size: 100%; position: relative;}
.lower#membership #benefits p.exp.marker strong::before { content: ""; display: block; width: 1em; height: 1em; background-color: #323333; position: absolute; left: -1.3em; top: 0.35em; border-radius: 50%;}
.lower#membership .shelf .unit .txtarea p.exp.indent { margin-left: -0.5em; margin-bottom: 0.75em;}
.lower#membership .shelf .unit .txtarea p.exp.indent span { display: inline-block; width: 7em;}
.lower#membership #benefits .unit .txtarea.props p.exp span.ib { display: inline-block; width: 4em;}
.lower#membership #benefits table.bi { width: 66%;}
.lower#membership #benefits table.bi td, .lower#membership #benefits table.bi th { width: 50%;}
/* --- common --- */
@media only screen and (min-width: 768px) {
.lower#membership p.headcopy { font-size: 0.9rem;}
.lower#membership .shelf { gap : 2rem 4%;}
.lower#membership .shelf .unit:nth-of-type(2) .txtarea p.exp span { width: 10em;}
.lower#membership .shelf .unit:nth-of-type(3) .txtarea p.sub { margin-bottom: 0;}
.lower#membership .shelf .unit:nth-of-type(3) .txtarea p.exp { margin-top: 0.75em;}
.lower#membership .shelf .unit:nth-of-type(3) .txtarea p.caution { margin-top: 0;}
.lower#membership .shelf .unit .txtarea p.exp span.ib { display: inline-block; vertical-align: top; width: 16em; text-align: left;}
.lower#membership .shelf .unit .txtarea p.caution { margin-top: 0.5rem;}
.lower#membership .shelf .unit .txtarea p.exp.green { color: #87BD42; font-weight: 500; margin: 1.25rem 0 0 0; }
.lower#membership #benefits p.exp.marker { font-size: 0.95rem;}
.lower#membership #benefits table.bi { margin-top: 2rem;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
.lower#membership p.headcopy { font-size: 0.9rem; text-align: justify;}
.lower#membership .shelf .unit:nth-of-type(2) .txtarea p.exp span { width: 10em;}
.lower#membership .shelf .unit:nth-of-type(3) .txtarea p.sub { margin-bottom: 0;}
.lower#membership .shelf .unit:nth-of-type(3) .txtarea p.exp { margin-top: 0.75em;}
.lower#membership .shelf .unit:nth-of-type(3) .txtarea p.caution { margin-top: 0;}
.lower#membership .shelf .unit .txtarea p.exp span.ib { display: inline-block; vertical-align: top; width: 16em; text-align: left;}
.lower#membership .shelf .unit .txtarea p.caution { margin-top: 0.5rem;}
.lower#membership .shelf .unit .txtarea p.exp.green { color: #87BD42; font-weight: 500; margin: 1.25rem 0 0 0; }
.lower#membership #benefits p.exp.marker { font-size: 0.95rem;}
.lower#membership #benefits table.bi { margin-top: 2rem;}
}/* --- sp --- */




/*25.03.13 追加*/
.lyt-txt{
	padding: 0 0 .5em;	
}

.joint + .lyt-txt{
	padding-top: 1.5em;
}




/* --- lower pages --- */
/* --- common --- */
@media only screen and (min-width: 768px) {
}/* --- pc --- */
@media only screen and (max-width: 767px) {
}/* --- sp --- */
