@charset "utf-8";
/*BASE*/

@media screen and (max-width: 767.98px) {
/*BASE*/

/*About us*/
#about {
	padding:4rem 2rem;
	background-color:rgba(240,240,240,1);
}
#about .content-box .img-box {
	aspect-ratio: 4 / 3;
	margin-bottom:1rem;
	position:relative;
	overflow:clip;
}
#about .content-box .img-box img {
	width:100%;
	height:auto;
	position:absolute;
	top:-15%;
}
#about .content-box .txt-box {
}
#about .content-box .txt-box h1 {
	color:#544034;
	margin-bottom:1rem;
}
#about .content-box .txt-box .comment-box {
	color:#555;
	text-align:justify;
}

/*Shop List*/
#shop {
	background: url(../images/home/shop_bgimg.jpg) center center no-repeat fixed;
	background-size: cover;
	padding:4rem 0rem;
	position:relative;
	z-index: 0;
	overflow:hidden;
}
#shop::before {
	content: "";
	display:block;
	background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.50) 50%,
    rgba(255,255,255,0.25) 100%
  );
	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:2rem;
	width:100%;
	position:relative;
	
}
#shop .content-box > .txt-box {
	text-align:center;
	padding:0 1rem;
}
#shop .content-box > .txt-box h1 {
	color:#D71718;
	margin-bottom:1rem;
}
#shop .content-box > ul {
	padding:0 2rem;
}
#shop .content-box > ul > li a {
	display:block;
	width:100%;
	height:100%;
	color:#333;
	background-color:rgba(255,255,255,.75);
	border-radius:10px;
	overflow:clip;
	transition:background-color 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;
}
#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;
}
@media (orientation: portrait){
#shop .content-box > ul > li:not(:last-child) {
	margin-bottom:2rem;
}
}
@media (orientation: landscape){
#shop .content-box > ul {
	display:flex;
	flex-flow: row wrap;
	justify-content:center;
	align-items:stretch;
	gap:2rem;
}
#shop .content-box > ul > li {
	width:calc(100% / 2 - 2rem);
}
}

/*Order Channel*/
#order_channel {
	padding:4rem 2rem;
	background-color:rgba(240,240,240,1);
}
#order_channel .content-box {
}
#order_channel .content-box .img-box {
	aspect-ratio: 1 / 1;
	margin-bottom:1rem;
	position:relative;
	overflow:clip;
}
#order_channel .content-box .img-box img {
	width:100%;
	height:auto;
	position:absolute;
	top:-10%;
}
#order_channel .content-box .img-box img {
	width:100%;
	height:auto;
}
#order_channel .content-box .txt-box {
}
#order_channel .content-box .txt-box h1 {
	color:#544034;
	margin-bottom:1rem;
}
#order_channel ul.channel {
}
#order_channel ul.channel > li {
	padding:0 1rem 1rem 0;
}
#order_channel ul.channel > li/*:not(.ec)*/ {
	border-bottom: dotted 4px #F00;
	border-right: dotted 4px #F00;
}
#order_channel ul.channel > li:not(:last-child) {
	margin-bottom:2rem;
}

/*Media*/
#media {
	background-color:rgba(255,255,255,1);
	padding:4rem 2rem;
}
#media ul {
	display:flex;
	justify-content:center;
	align-items:center;
	column-gap:1rem;
	margin:auto;
}
#media ul li {
	flex:1;
}

/*MAP*/
#map {
	background-color:rgba(240,236,227,1);
	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;
}
}

}

@media screen and (min-width: 768px), print {
/*BASE*/
body { padding-top:0 !important; }

#header::before {
	opacity:0;
	transition:opacity ease-in-out .4s;
	
}
#header.display-on::before {
	opacity:1;
}

/*Navigation*/
/*Global*/
#headerNavi h1 a {
	pointer-events: none;
	opacity:0;
	transition:opacity ease-in-out .4s;
}

#headerNavi.display-on h1 a {
	pointer-events: auto;
	opacity:1;
}
#headerNavi ul.pc li a span,
#headerNavi ul.pc li a .ja,
#headerNavi ul.pc li a .en {
	color:rgba(251,239,221,.7);
}
#headerNavi ul.pc li.shop:hover .ja,
#headerNavi ul.pc li.shop:hover .en,
#headerNavi ul.pc li a:hover span,
#headerNavi ul.pc li a:hover .ja,
#headerNavi ul.pc li a:hover .en {
	color:rgba(251,239,221,1);
}
#headerNavi.display-on ul.pc li a .ja,
#headerNavi.display-on ul.pc li.shop:hover .ja {
	color:rgba(127,86,71,1);
}
#headerNavi.display-on ul.pc li a .en {
	color:rgba(189,143,101,1);
}
#headerNavi.display-on ul.pc li a:hover .en,
#headerNavi.display-on ul.pc li.shop:hover .en {
	color:rgba(221,106,0,1);
}
#headerNavi ul#pc-main-menu > li ul.pc-sub-menu {
	opacity:.75;
	transition:opacity ease-in-out .4s;
}
#headerNavi.display-on ul#pc-main-menu > li ul.pc-sub-menu {
	opacity:1;
}

/*About us*/
#about {
	padding:100px 80px;
	background-color:rgba(240,240,240,1);
}
#about .content-box {
	display:flex;
	align-items:center;
	column-gap:60px;
	max-width:1440px;
	margin:auto;
}
#about .content-box .img-box {
	text-align:right;
	width:calc(40% - 60px);
}
#about .content-box .img-box img {
	width:100%;
	height:auto;
}
#about .content-box .txt-box {
	width:60%;
}
#about .content-box .txt-box h1 {
	color:#544034;
	margin-bottom:1em;
}
#about .content-box .txt-box .comment-box {
	color:#555;
	text-align:justify;
}

/*Shop List*/
#shop {
	background: url(../images/home/shop_bgimg.jpg) center center no-repeat fixed;
	background-size: cover;
	padding:100px 80px;
	position:relative;
	z-index: 0;
	overflow:hidden;
}
#shop::before {
	content: "";
	display:block;
	background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.50) 50%,
    rgba(255,255,255,0.25) 100%
  );
	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;
	position:relative;
	
}
#shop .content-box > .txt-box {
	text-align:center;
}
#shop .content-box > .txt-box h1 {
	color:#D71718;
	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,.75);
	border-radius:10px;
	overflow:clip;
	transition:background-color ease-in .2s;
}
#shop .content-box > ul > li a:hover {
	background-color:rgba(255,255,255,1)
}
#shop .content-box > ul > li .shop-img {
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#CCC;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:auto;
	aspect-ratio: 4 / 3;
}
#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;
}

#shop .content-box > ul > li.fukuiekimae .shop-img {
	background-image: url(../images/home/shop_fukuiekimae_on.jpg);
}
#shop .content-box > ul > li.ninomiya .shop-img {
	background-image: url(../images/home/shop_ninomiya_on.jpg);
}
#shop .content-box > ul > li.bell .shop-img {
	background-image: url(../images/home/shop_bell_on.jpg);
}
#shop .content-box > ul > li.tekefukuranotsuji .shop-img {
	background-image: url(../images/home/shop_tekefukuranotsuji_on.jpg);
}
#shop .content-box > ul > li.tsurugaekimae .shop-img {
	background-image: url(../images/home/shop_tsurugaekimae_on.jpg);
}
#shop .content-box > ul > li a .shop-img img {
	opacity:1;
	transition: opacity ease-in .2s;
}
#shop .content-box > ul > li a:hover .shop-img img {
	opacity:0;
}

/*Order Channel*/
#order_channel {
	padding:100px 80px;
	background-color:rgba(240,240,240,1);
}
#order_channel .content-box {
	display:flex;
	align-items:center;
	column-gap:60px;
	max-width:1440px;
	margin:auto;
}
#order_channel .content-box .img-box {
	text-align:right;
	width:calc(40% - 60px);
}
#order_channel .content-box .img-box img {
	width:100%;
	height:auto;
}
#order_channel .content-box .txt-box {
	width:60%;
}
#order_channel .content-box .txt-box h1 {
	color:#544034;
	margin-bottom:1em;
}
#order_channel ul.channel {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1.5em 3em;
}
#order_channel ul.channel > li {
	padding:0 1em 1em 0;
}
#order_channel ul.channel > li/*:not(.ec)*/ {
	border-bottom: dotted 4px #F00;
	border-right: dotted 4px #F00;
}
#order_channel ul.channel .tel {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#order_channel ul.channel .fax {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}
#order_channel ul.channel .mail {
	grid-row: 1 / 3;
	grid-column: 2 / 3;
}
#order_channel ul.channel .ec {
	grid-row: 3 / 4;
	grid-column: 1 / 3;
}

/*Media*/
#media {
	background-color:rgba(255,255,255,1);
	padding:100px 80px;
}
#media ul {
	display:flex;
	justify-content:center;
	align-items:center;
	column-gap:60px;
	max-width:1440px;
	margin:auto;
}
#media ul li {
	max-width:240px;
}

/*MAP*/
#map {
	background-color:rgba(240,236,227,1);
}
#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;
}
}

/* ==========================================
   iOSのみ fixed 無効化
   ========================================== */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    #shop {
      background-attachment: scroll;
    }
  }
}