@charset "utf-8";
/*あいさつ*/
#greeting .content-box .img-box {
	background:url(../images/tmpl/pattern_kagamiya_a080.svg) center center repeat;
}

/*運営店一覧*/
#shop .content-box > ul > li .shop-img img {
	width:100%;
}

/*沿革*/
#history {
	background-color:rgba(240,237,232,1);
}
#history img {
	max-width:100%;
}
#history h2 {
	display:flex;
	flex-flow: row wrap;
	justify-content:center;
	align-items:center;
	aspect-ratio:1/1;
	padding:0 .4em;
	font-family:"Noto Serif JP", serif;
	font-weight:700;
	line-height:1;
	letter-spacing:normal;
	text-align:center;
	color:#FFF;
	background-color:#C00;
	border-radius:50%;
}
#history ul.history ul.data-box li h3 {
	color: #C00;
	line-height:1;
	letter-spacing:.2em;
	width:max-content;
	position:relative;
}
#history ul.history ul.data-box li h3::after {
	content:"";
	display:block;
	width:100%;
	height:1px;
	background-color: #C00;
}
#history .img-box li img {
	width:100%;
}

/*MAP*/
#map {
	background-color:rgba(255,255,255,1);
}

@media screen and (max-width: 767.98px) {
/*BASE*/
#headerNavi nav .sp li.company .en {
	color:var(--color-logo) !important;
}
section:not(.keyvisual) h1.title {
	font-size:18px;
}

/*あいさつ*/
#greeting {
	padding:0 0 4rem;
	background-color:rgba(255,255,255,1);
}
#greeting .content-box {
}
#greeting .content-box .img-box {
	background-size:200px;
	text-align:center;
	width:100%;
	margin:0 auto 1rem;
}
#greeting .content-box .img-box > span {
	padding:2rem 0;
}
#greeting .content-box .img-box img {
	width:100%;
	height:auto;
}
#greeting .content-box .txt-box {
	padding:0 2rem;
}
#greeting .content-box .txt-box h1 {
	color:#544034;
	text-align:center;
	margin-bottom:1rem;
}
#greeting .content-box .txt-box .comment-box {
	color:#555;
	text-align:justify;
}
/*縦向き*/
@media (orientation: portrait){
#greeting .content-box .img-box {
	max-width:calc(100% - 4rem);
}
}
/*横向き*/
@media (orientation: landscape){
#greeting .content-box .img-box {
	max-width:60vw;
}
}

/*会社概要*/
#profile {
	background-color:#FFF;
	background-image:url(../images/tenpo/bgimg.jpg);
	padding:4rem 2rem;
}
#profile::before {
	content: "";
	display:block;
	background:rgba(240,240,240,.9);
	width:100%;
	height:120%;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
#profile .content-box > dl {
	width:max-content;
	margin:auto;
}
#profile .content-box > dl > dt {
	font-family:"Noto Serif JP", serif;
	font-weight:700;
	font-size:16px;
	text-align:justify;
	text-align-last:justify;
	width:max-content;
	min-width:4em;
	padding-bottom:.5rem;
	margin:auto;
}
#profile .content-box > dl > dd {
	text-align:center;
}
#profile .content-box > dl > dd:not(:last-of-type) {
	padding-bottom:2rem;
}
#profile .zip {
	display:block;
}

/*運営店一覧*/
#shop {
	background-color:#FFF;
	background-image:url(../images/tenpo/bgimg.jpg);
	padding:4rem 2rem;
}
#shop::before {
	content: "";
	display:block;
	background:rgba(255,255,255,.9);
	width:100%;
	height:100%;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
#shop .content-box {
	position:relative;
}
#shop .content-box > .txt-box {
	text-align:center;
}
#shop .content-box > .txt-box h1 {
	margin-bottom:1em;
}
#shop .content-box > ul {
}
#shop .content-box > ul > li:not(:last-child) {
	margin-bottom:2rem;
}
#shop .content-box > ul > li a {
	display:block;
	width:100%;
	height:100%;
	color:#333;
	background-color:rgba(255,255,255,.8);
	box-shadow:0 0 5px 0 rgba(0,0,0,.5);
	border-radius:10px;
	overflow:clip;
	transition:background-color ease-in .2s,box-shadow ease-in .2s;
}
#shop .content-box > ul > li .shop-img {
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#CCC;
	width:100%;
	height:auto;
	aspect-ratio: 4 / 3;
	border-bottom:solid 1px #CCC;
}
#shop .content-box > ul > li dl {
	text-align:center;
	padding:1rem;
}
#shop .content-box > ul > li dl dt {
	font-weight:700;
	text-align:center;
	padding-bottom:.5rem;
}
#shop .content-box > ul > li dl dd {
	font-size:12px;
}
#shop .content-box > ul > li dl dd.address {
	padding-top:.5rem;
}

/*沿革*/
#history {
	padding:4rem 2rem;
}
#history h2 {
	font-size:18px;
	width:60px;
}
#history ul.history > li {
	display:flex;
	flex-flow: row wrap; 
	align-items:flex-start;
}
#history ul.history > li:not(:last-child) {
	padding-bottom:2rem;
}
#history ul.data-box {
	width:calc(100% - 60px);
}
#history ul.history ul.data-box > li {
	padding-bottom:2rem;
}
#history ul.history ul.data-box li h3 {
	font-size:16px;
	width:max-content;
	padding:0 0 1rem 1rem;
}
#history ul.history ul.data-box li h3::after {
	margin-top:1rem;
}
#history ul.history ul.data-box li:nth-of-type(1) h3 {
	padding-top:.25rem;
}
#history ul.history ul.data-box li .txt-box {
	padding:0 0 0 1rem;
}
#history ul.history ul.data-box li .txt-box > li:not(:last-of-type) {
	padding-bottom:1em;
}
#history ul.history ul.data-box li .txt-box .comment-box {
	font-size:12px;
	text-align:justify;
	padding:.5rem 0 0;
}
#history .img-box {
	width:100%;
	max-width:360px;
	padding-bottom:2rem;
	margin:auto;
}
#history .img-box li:not(:last-child) {
	padding-bottom:1rem;
}
#history .img-box li {
	width:calc(100% - 60px - 1rem);
	margin-left:auto;
}

/*MAP*/
#map {
	padding:4rem 0 0;
}
#map .menu-box {
	text-align:center;
}
#map .menu-box h1 {
	font-size:20px;
}
#map .menu-box .menu {
	display:flex;
	flex-flow: row wrap; 
	justify-content:center;
	gap:.5rem 1rem;
	padding:1rem 2rem;
}
#map .menu-box .menu li a {
	display:block;
	font-size:12px;
	color:rgba(215,23,24,1);
	background-color:rgba(215,23,24,0);
	padding:.5em 1em;
	border: solid 1px rgba(215,23,24,1);
	border-radius:6px;
}
#map .menu-box .menu li a.displayed {
	color:#FFF;
	background-color:rgba(215,23,24,1);
}
#map .map iframe {
	display:block;
	width:100%;
	height:auto;
	aspect-ratio: 1 / 1;
}
@media (orientation: portrait){
#map .menu-box .menu li {
	width:calc(100% / 2 - 1rem);
}
#map .map iframe {
	aspect-ratio: 1 / 1;
}
}
@media (orientation: landscape){
#map .menu-box .menu li {
	width:calc(100% / 3 - 1rem);
}
#map .map iframe {
	aspect-ratio: 2 / 1;
}
}

}

/*PC NPC TAB*/
@media screen and (min-width: 768px), print {

/*BASE*/
#headerNavi li.company .en {
	color:var(--color-logo) !important;
}
	
/*HEADER*/

/*あいさつ*/
#greeting {
	padding:100px 80px;
	background-color:rgba(255,255,255,1);
}
#greeting .content-box {
	display:flex;
	align-items:center;
	column-gap:60px;
	max-width:1440px;
	margin:auto;
}
#greeting .content-box .img-box {
	display:flex;
	align-items:center;
	text-align:right;
	width:calc(40% - 60px);
	background-size:60%;
	border:solid 1px #FFF;
	border-radius:8px 0 0 8px;
	overflow:clip;
}
#greeting .content-box .img-box > span {
	padding:2em 0;
}
#greeting .content-box .img-box img {
	width:100%;
	height:auto;
}
#greeting .content-box .txt-box {
	width:60%;
}
#greeting .content-box .txt-box h1 {
	color:#544034;
	margin-bottom:1em;
}
#greeting .content-box .txt-box .comment-box {
	color:#555;
	text-align:justify;
}

/*会社概要*/
#profile {
	background-color:#FFF;
	background-image:url(../images/tenpo/bgimg.jpg);
	padding:100px 80px;
}
#profile::before {
	content: "";
	display:block;
	background:rgba(240,240,240,.9);
	width:100%;
	height:120%;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
#profile .content-box > dl {
	width:max-content;
	margin:auto;
}
#profile .content-box > dl > dt {
	font-family:"Noto Serif JP", serif;
	font-weight:700;
	font-size:clamp(16px, 1.6vw, 18px);
	text-align:justify;
	text-align-last:justify;
	width:max-content;
	min-width:4em;
	padding-bottom:.5rem;
	margin:auto;
}
#profile .content-box > dl > dd {
	text-align:center;
}
#profile .content-box > dl > dd:not(:last-of-type) {
	padding-bottom:4rem;
}
#profile .zip {
	display:inline-block;
	margin-right:1em;
}

/*運営店一覧*/
#shop {
	background-color:#FFF;
	background-image:url(../images/tenpo/bgimg.jpg);
	padding:100px 80px;
}
#shop::before {
	content: "";
	display:block;
	background:rgba(255,255,255,.9);
	width:100%;
	height:100%;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
#shop .content-box {
	display:flex;
	flex-flow: column nowrap;
	justify-content:center;
	gap:60px;
	width:100%;
	min-height:600px;
	max-width:1440px;
	margin:auto;
	position:relative;
}
#shop .content-box > .txt-box {
	text-align:center;
}
#shop .content-box > .txt-box h1 {
	margin-bottom:1em;
}
#shop .content-box > ul {
	display:flex;
	flex-flow: row wrap;
	justify-content:center;
	align-items:stretch;
	gap:60px;
}
#shop .content-box > ul > li {
	width:calc(100% / 3 - 40px);
}
#shop .content-box > ul > li a {
	display:block;
	width:100%;
	height:100%;
	color:#333;
	background-color:rgba(255,255,255,.8);
	box-shadow:0 0 5px 0 rgba(0,0,0,.5);
	border-radius:10px;
	overflow:clip;
	transition:background-color ease-in .2s,box-shadow ease-in .2s;
}
#shop .content-box > ul > li a:hover {
	background-color:rgba(255,255,255,1);
	box-shadow:0 0 10px 0 rgba(0,0,0,.5);
}
#shop .content-box > ul > li .shop-img {
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#CCC;
	width:100%;
	height:auto;
	aspect-ratio: 4 / 3;
	border-bottom:solid 1px #CCC;
}
#shop .content-box > ul > li dl {
	text-align:center;
	padding:1rem;
}
#shop .content-box > ul > li dl dt {
	font-weight:700;
	text-align:center;
	padding-bottom:.5rem;
}
#shop .content-box > ul > li dl dd {
	font-size:clamp(12px, 1.2vw, 14px);
}
#shop .content-box > ul > li dl dd.address {
	padding-top:.5rem;
}

/*沿革*/
#history {
	padding:100px 80px;
}
#history .content-box {
	max-width:1440px;
	margin:auto;
}
#history h2 {
	font-size:clamp(20px, 2vw, 28px);
	width:8%;
	max-width:100px;
}
#history ul.history > li {
	display:flex;
	align-items:flex-start;
}
#history ul.history > li:not(:last-child) {
	padding-bottom:4em;
}
#history ul.data-box {
	flex:1;
}
#history ul.history ul.data-box > li {
	padding-bottom:4em;
}
#history ul.history ul.data-box li h3 {
	font-size:clamp(18px, 1.8vw, 20px);
	padding:0 0 1em clamp(20px, 30vw, 60px);
}
#history ul.history ul.data-box li h3::after {
	margin-top:1em;
}
#history ul.history ul.data-box li:nth-of-type(1) h3 {
	padding-top:.25em;
	margin-bottom:1em;
}
#history ul.history ul.data-box li:nth-of-type(1) h3::after {
	position:absolute;
	left:0;
	bottom:0;
}
#history ul.history ul.data-box li .txt-box {
	padding:0 clamp(20px, 30vw, 60px);
}
#history ul.history ul.data-box li .txt-box > li:not(:last-of-type) {
	padding-bottom:1em;
}
#history ul.history ul.data-box li .txt-box .comment-box {
	font-size:clamp(12px, 1.2vw, 14px);
	text-align:justify;
	padding:.5em 0 0;
}
#history .img-box {
	align-self:stretch;
	width:24%;
	max-width:360px;
	padding-bottom:4em;
	position:relative;
}
#history .img-box li:not(:last-child) {
	padding-bottom:2em;
}
#history .img-box li img {
	width:100%;
}
#history ul.img-box li {
	position:sticky;
	top:40%;
}
#history div.img-box ul {
	position:sticky;
	top:120px;
}

/*MAP*/
#map .content-box {
	display:flex;
	flex-direction:row-reverse;
}
#map .menu-box {
	display:flex;
	flex-flow: column wrap;
	justify-content:center;
	padding:0 80px 0 40px;
}
#map .menu-box h1 {
	font-size:clamp(20px, 2vw, 24px);
	margin-bottom:1em;
}
#map .menu-box .menu {
	font-size:clamp(16px, 1.6vw, 18px);
}
#map .menu-box .menu li:not(:last-child) {
	margin-bottom:.5em;
}
#map .menu-box .menu li a {
	display:block;
	color:rgba(215,23,24,1);
	background-color:rgba(215,23,24,0);
	padding:.5em 2em;
	border: solid 1px rgba(215,23,24,1);
	border-radius:6px;
}
#map .menu-box .menu li a:hover {
	background-color:rgba(215,23,24,.25);
}
#map .menu-box .menu li a.displayed {
	color:#FFF;
	background-color:rgba(215,23,24,1);
}
#map .map {
	flex:1;
}
#map .map iframe {
	display:block;
	width:100%;
	height:auto;
	aspect-ratio: 2 / 1;
}

}

/*iPdd用補正*/
@supports (-webkit-touch-callout: none) {
	@media (hover: none) and (pointer: coarse) {
		#profile, #shop {
			top:-1px;
		}
	}
}