@charset "utf-8";
/* ----------------------------------------------------------------------------
	@ Style Name    : css/common.css
	----------------------------------------------------------------------------
	@ Style Information
		00. Reset
		01. Body,wrap
		02. swiper
		03. SHOP INFOMATION
		@@. Clearfix
---------------------------------------------------------------------------- */
/* =============================================================================
	00. Reset
==============================================================================*/
/* Reset */
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

li {list-style-type: none;}
dl,dt,dd,p,table,th,td,form,label,ul,li {margin:0; padding:0;}
img {border: 0; line-height: 0; vertical-align: bottom;}
body {width:100%;height: 100%;}
html {scroll-behavior: smooth;}

:root{
    --theme-red: #840634;
    --theme-orange: #d45b01;
    --theme-yellow: #b69c07;
    --theme-purple: #643483;
    --theme-green: #686d2e;
    --mv-page: #ddd;/* スライダのページバーオフ */
    --mv-page-active: #8B1E25;/* スライダのページバーオン */
    --font10: .625rem;
    --font12: .75rem;
    --font13: .8125rem;
    --font14: .875rem;
    --font15: .9375rem;
    --font16: 1rem;
    --font18: 1.125rem;
    --font20: 1.25rem;
    --font24: 1.5rem;
    --font28: 1.75rem;
    --font32: 2rem;
    --font48: 3rem;
    --transition: .8s cubic-bezier(.2, 1, .2, 1);
}

/*responsive*/
.pc{display: block;}
.sp{display: none;}
@media (max-width: 576px){
  .pc{display: none;}
  .sp{display: block;}
}

/* =============================================================================
	01. Body, font, Link ,wrap,header
==============================================================================*/
body {
	background-color: #FFF;
	font-size: var(--font16);
	color: #1a1a1a;
	/* font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif; */
	font-family: "FP-ヒラギノUD角ゴ StdN W4","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	line-height: 1.4;
}

@media only screen and (max-width:800px) {
body {
	background-color: #FFF;
	font-size: var(--font14);
	line-height: 1.4;
}
}

#shop h2.shop-tit,.area-btn li a span,.area-box h2 span {
  font-family: "CopperplateGothicLTPro-31AB";
}

a:link {color: #1a1a1a;text-decoration: underline;}
/* a:visited {color: #666;text-decoration:none;} */
a:hover {color: #444;text-decoration: underline;}
a:active {color: #444;text-decoration: underline;}

#wrap {
	width: 100%;
	margin: 0 auto;
}

#header{
	width: 100%;
	margin: 0px auto 0px;
}
#header h1 img{
	width: 300px;
    height: auto;
}
.m-logo h2{
	font-size: var(--font14);
	line-height: 1.6;
	text-align:center;
	margin: 125px 0 0px;
	padding: 0 0 5px;
	font-weight:normal;
}
#header h1 {
    position: absolute;
    top: 10px;
    left: 15px;
    /* filter: brightness(0) invert(1); */
	z-index: 1;
}
#video {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 100%;
	min-width: 100%;
	filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
    outline: none;
    border: none;
}
.m-logo {
	margin: -8px auto 0;
    padding: 125px 0 50px;
    text-align: center;
    background: url(../img/top_bg.webp) no-repeat top center;
	background-size: cover;
}
.m-logo img {
	width: 520px;
	height: 73px;
	margin: 0 auto;
}
.m-logo br.sp {
	display: none;
}

@media only screen and (max-width:800px) {
#header h1 img{
	max-width: 180px;
	height: auto;
}
.m-logo {
	background: url(../img/top_bg_sp.webp) no-repeat top center;
	padding: 0;
}
.m-logo h2{
	font-size: var(--font12);
	line-height: 1.6;
	margin: 20px 0 10px;
	padding: 2em;
	font-weight: normal;
}
.m-logo img {
	max-width: 300px;
	height: auto;
	/* margin: 70px 0 5px; */
	margin: 0 auto;
    padding: 70px 0 0;
}
.m-logo br.sp {
	display: block;
}
}

/* =============================================================================
	02. swiper （info画像スクロール）
==============================================================================*/

.l-inner {
  position: relative;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 10rem;
}
[class*=swiper]:focus {
  outline: none;
}
.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}
.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
      object-fit: cover;
}

.swiper-button-prev, .swiper-button-next {
  display: grid;
  place-content: center;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
}
.swiper-button-prev::before, .swiper-button-next::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border:solid 1px #ccc;
}
.swiper-button-prev::after, .swiper-button-next::after {
  width: 0.8rem;
  height: 0.8rem;
  content: "";
  border:solid 1px #ccc;
  border-width: 3px 3px 0 0;
}
.swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

.card03 {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #fff;
}
.card03 .swiper {
  overflow: visible;
}
.card03 .swiper-button-prev, .card03 .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
.card03 .swiper-button-prev::before, .card03 .swiper-button-next::before {
  background-color: rgb(255 255 255 / 0%);
}
.card03 .swiper-button-prev:hover::before, .card03 .swiper-button-next:hover::before {
  background-color: rgb(255 255 255 / 80%);
}
.card03 .swiper-button-prev::after, .card03 .swiper-button-next::after {
  border-color: #ccc;
}
.card03 .swiper-button-prev:hover::after, .card03 .swiper-button-next:hover::after {
  border-color: #aaa;
}
.card03 .swiper-button-prev {
  right: calc(100% - 1.6rem);
}
.card03 .swiper-button-next {
  left: calc(100% - 1.6rem);
}
.card03 .slide {
  overflow: hidden;
  -webkit-transition: var(--transition), opacity 1s;
  transition: var(--transition), opacity 1s;
  border-radius: 0px;
  box-shadow: 1px 1px 2px -1px #ccc;/* 影：水平,垂直,ボカシ具合,広がり,色*/
}
.card03 .slide-media {
  padding-top: 55.55%;
  border-radius: 4px;
}
.card03 .swiper-slide:not(.swiper-slide-visible) .slide {
  pointer-events: none;
  filter: brightness(0.5);
}
.card03 .swiper-wrapper {
  align-items: flex-end;
}

.card03 .swiper-pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 1.2rem 0.8rem;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1.2rem;
  text-align: center;
}
.card03 .swiper-pagination-bullet {
  width: 1.6rem;
  height: 3px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  vertical-align: top;
  background-color: var(--mv-page);
}
.card03 .swiper-pagination-bullet-active {
  width: 4rem;
  background-color: var(--mv-page-active);
}

@media (min-width: 1025px) {
  .swiper-button-prev::before, .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .card03 .slide img {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .card03 .slide:hover {
    filter: brightness(1.1);
  }
}

@media (max-width: 1025px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  .l-inner {
    padding: 0rem;
  }
  .card03 .swiper {
    padding: 0rem;
  }
  .card03 .swiper-button-prev {
    right: calc(100% - 2.2rem);
  }
  .card03 .swiper-button-next {
    left: calc(100% - 2.2rem);
  }
}


/* =============================================================================
	03. SHOP INFOMATION
==============================================================================*/
#shop h2.shop-tit{
	margin: 5rem auto 2rem;
	font-size: var(--font24);
	text-align: center;
}
@media (min-width:1024px) {
#shop h2.shop-tit{
	margin: 8rem auto 2rem;
	font-size: var(--font32);
	text-align: center;
}
}
hr.hr01 {
	border:none;
    border-top:solid 1px #CCC;
    height:1px;
    color:#FFFFFF;
    margin: 10;
}
#container {
margin: 0 auto;
}


/*---------------------------
 エリア(.area-btn/area-box)
 ----------------------------*/
.area-btn ul {
    display: flex;
    margin: 3rem auto;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.area-btn li{
    list-style-type: none;
}
.area-btn li a {
    display: block;
    background: #fff;
    border: solid 1px #999;
    filter: drop-shadow(2px 2px 2px #eee);
    padding: 0.5rem 0 0.2rem;
    width: 14rem;
    margin: 0.5rem;
    position: relative;
    font-size: var(--font14);
    line-height: 1.1rem;
    text-align: center;
    text-decoration: none;
    /* color: #000; */
}
.area-btn li a::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-display: swap;
    position: absolute;
    right: 0;
    bottom: 0;
    content: '\f078';
    color: #e1e1e1;
    font-size: var(--font24);
}
.area-btn li a span{
    font-size: var(--font10);
    display: block;
}
.area-btn li a:hover {
    background: #000;
    color: #fff;
}
@media (min-width: 1024px) {
.area-btn ul {
    display: flex;
    flex-direction: row;
    margin: 3rem auto 10rem;
}
.area-btn li a {
    width: 10rem;
}
}
@media (min-width: 1400px) {
.area-btn li a {
    width: 16rem;
}
}

.area-box {
    position: relative;
    isolation: isolate;
}
.area-box h2 {
    font-size: var(--font20);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 1rem;
}
.area-box h2 span {
    font-size: var(--font12);
    font-weight: normal;
	margin: .2rem 0 0;
}
@media (min-width: 1024px) {
.area-box h2 {
    font-size: var(--font24);
    margin: 0 auto 2rem;
}
}

/* --- item --- */
.itemwrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto 5rem;
    padding: 0 2%;
}
.item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0px;
    border: 1px solid #999;
    background: #fff;
    margin: 0 2% 1rem;
    filter: drop-shadow(2px 2px 2px #eee);
    position: relative;
}
.itemwrap a,.itemwrap a:hover{
    text-decoration: none;
    /* color: #000; */
}
.itemwrap a:hover{
    opacity: 0.7;
}
/* --- 左側：ロゴbox --- */
.logo-box {
    flex-shrink: 0;
    width: 25%;
    aspect-ratio: 1 / 1;
    padding: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}
.logo-box img {
    display: block;
    max-height: 100px;
    height: auto;
}
/* --- 右側：店舗情報box --- */
.info-box {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
}
.shop-name {
    font-size: var(--font16);
    font-weight: bold;
    margin: .5rem 0 0 .5rem;
}
.shop-name span{
    font-size: var(--font10);
    font-weight: normal;
    margin: 0 0 0 .5rem;
}
.shop-detail {
    font-size: var(--font10);
    margin: .3rem .5rem 0;
    height: 3rem;
}
/* --- エリアと時間情報の共通スタイル --- */
.info-row {
    display: flex;
    gap: .2rem;
    font-size: var(--font10);
    padding: 2px;
}
/* --- エリア情報（2:1で分割） --- */
.area-info {
    text-align: center;
    color: #fff;
}
.area-info span.area-1 {
    flex: 2;
    background: var(--theme-red);
}
.area-info span.area-2 {
    flex: 1;
    background: var(--theme-orange);
}
/* --- 時間情報（1:1:1で分割） --- */
.time-info {
    text-align: center;
    color: #fff;
}
.time-info span.time-1 {
    flex: 1;
    background: var(--theme-yellow);
}
.time-info span.time-2 {
    flex: 1;
    background: var(--theme-purple);
}
.time-info span.time-3 {
    flex: 1;
    background: var(--theme-green);
}
/* --- 時間情報（1:2で分割） --- */
.time-info span.time-4 {
    flex: 1;
    background: var(--theme-purple);
}
.time-info span.time-5 {
    flex: 2;
    background: var(--theme-green);
}
span.bg-off{
    background: #ccc !important;
}

/* --- エリア/時間のアイコン --- */
.area-info span::before,.time-info span::before{
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;  
    font-display: swap;
    padding-right: .2rem;
}
.area-info span.area-1::before{
    content:'\f4e3';
}
.area-info span.area-2::before{
    content:'\f3c5';
}
.time-info span.time-1::before{
    content:'\f2e7';
}
.time-info span.time-2::before,.time-info span.time-4::before{
    content:'\f005';
}
.time-info span.time-3::before,.time-info span.time-5::before{
    content:'\f017';
}

@media (min-width: 576px) {
.itemwrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
}
.item {
    display: flex;
    flex-direction: column;
    width: 240px;
    margin-left: .5rem;
}
.logo-box {
    width: 100%;
    padding: 0;
    border-bottom: solid 1px #ccc;
}
.logo-box img {
    max-width: 80%;
    min-width:70%;
    max-height: 180px;
}
}

@media (min-width: 1024px) {
  .itemwrap {
  /* justify-content: flex-start; */
  margin: 0 auto 10rem;
  max-width: 1300px;
  }
  .shop-detail {
  margin: .5rem;
  }
  .shinbashi-aichi-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  }
  .shinbashiwrap {
  margin: 0 8rem;
  }
  .aichiwrap {
  margin: 0 8rem;
  }
}

/* リボン */
.ribbon17-content {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 89px;
  height: 91px;
  overflow: hidden;
  }
.ribbon17 {
  display: inline-block;
  position: absolute;
  padding: 7px 0;
  left: -23px;
  top: 22px;
  width: 160px;
  text-align: center;
  font-size: var(--font15);
  line-height: 16px;
  background: linear-gradient(to right, #b3a063 0%, #f1da8b 50%, #b3a063 100%);
  color: #fff;
  letter-spacing: 0.05em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.ribbon17:before, .ribbon17:after {
  position: absolute;
  content: "";
  border-top: 4px solid #b2751b;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  bottom: -4px;
}
.ribbon17:before {
  left: 14px;
}
.ribbon17:after {
  right: 18px;
}

/*---------------------------
 関連サイト(.expansion)
 ----------------------------*/
.expansion {
    width: 90%;
    margin: 0 auto 3rem;
}
.expansion h2 {
    font-size: var(--font20);
    text-align: center;
    margin: 0 auto 1rem;
}
.expansion-box-wrap {
    display: flex;
    flex-direction: column;
}
.expansion-img a:hover{
    opacity: 0.7;
}
.expansion-txt h3 {
    font-size: var(--font16);
    margin: 1rem 0 .5rem;
}
.expansion-txt p {
    font-size: var(--font12);
    margin: 0 0 3rem;
}
.expansion-box {
    padding: 0 1%;
}

@media (min-width: 576px) {
    .expansion-box-wrap {
        display: flex;
        flex-direction: row;
        max-width: 1024px;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
.expansion h2 {
    font-size: var(--font24);
    margin: 0 auto 2rem;
}
.expansion-box {
    padding: 0 5%;
}
}


/* --------------------------------------------------------------------------------------------------
	footer
--------------------------------------------------------------------------------------------------*/
footer {
    margin: 0;
    padding: 0;
}
#copy{
    font-size: var(--font12);
    text-align: center;
    padding: 0;
}
a#top-button {
    z-index: 5;
    color: #fff;
    background-color: rgb(88 88 88 / 30%);
    border-color: #fff;
    opacity: 0.5;
    border-radius: 10%;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-right: .5rem;
    margin-bottom: .5rem;
    font-size: var(--font28);
    padding: .5rem 1rem;
}

/* =============================================================================
	@@. Clearfix
==============================================================================*/
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clear {
    clear: both;
}

/* スクロールでクラス付与 */
.js-scroll {
  opacity : 0;
  transition:all 2s;
}
.js-scroll.is-active {
  opacity : 1;
}