@charset "utf-8";

/*********************************reset*********************************/

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	margin: 0 auto;
}

body {
	margin: 0 auto;
	overflow:auto;
}

a {
	text-decoration: none;
	color: #000;
}

li {
	list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

/*********************************
link
*********************************/

#link1,#link2,#link3,#link4,#link5,#link6,#link7,#link8,#link9 {
	margin-top: -12.5rem;
    padding-top: 12.5rem;
}

@media screen and (min-width: 768px) {
	#link1,#link2,#link3,#link4,#link5,#link6,#link7,#link8,#link9 {
	margin-top: -17.5rem;
    padding-top: 17.5rem;
	}
}

/*********************************class*********************************/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

.block {
	margin-bottom: 10px;
}

.list {}
.list li {
	margin-bottom: 30px;
} 

.width-100 {
	width: 100%;
}

.m-bottom-10 {
	margin-bottom: 10px;
}
.m-bottom-50 {
	margin-bottom: 50px;
}
.pos-relative {
	position: relative;
}
.pos-absolute {
	position: absolute;
	bottom: 1.rem;
	left: 2rem;
}

.last_bottom {
	margin-bottom: 5%;
}

/*********************************
heading
*********************************/

.heading-1 {font-size: var(--size-small);}
.heading-2 {font-size: var(--size-large);}
.heading-3 {
	font-size: var(--size-medium);
	color: var(--main-color);
	margin-bottom: 10px;
}
.heading-4 {
	font-size: var(--size-small);
	margin-bottom: 5px;
}

@media screen and (min-width: 768px) {
	.heading-1 {font-size: 3rem;}
	.heading-2 {font-size: var(--size-xlarge);}
	.heading-3 {
	font-size: var(--size-large);
	color: var(--main-color);
	margin-bottom: 10px;
	}
	.heading-4 {
	font-size: var(--size-medium);
	margin-bottom: 15px;
	}
}

/*********************************
header
*********************************/
.header {
	position: fixed;
	background: #fff;
	z-index: 999;
	width: 100%;
	display: flex;
	justify-content: space-between;
	border-left: 10px var(--main-color) solid;
	padding: 1%;
}

.header-flag {
	display: inline-block;
	background: var(--main-color);
	border-radius: 3px;
	padding: 10px;	
	color: #fff;
	font-size: var(--size-medium);
	vertical-align: middle;
}

.header-icon {
	width: 60px;
    padding-top: 50%;
    padding-right: 15%;
}

@media screen and (min-width: 768px) {
	.header {
		width: 100%;
		padding: 15px;
		max-height: 195px;
	}
}

/*********************************
heading-box
*********************************/

.heading-1-box {
	margin-top: 5px;
}
.heading-2-box {
	margin-top: 5px;
	border-left: 10px var(--main-color) solid;
	padding: 1%;
/*	position: relative;*/
	margin-bottom: 20px;
}

/*********************************
benefit
*********************************/
.benefit {
	display: flex;
	flex-wrap: wrap;
    gap: 1em;
	margin-top: 10px;
}

.benefit .item {
	background: var(--second-color);
	padding: 3%;
	text-align: center;
	color: var(--third-color);
}

.item-pickup {
	background: #fff;
	border: 3px var(--main-color) solid;
	color: #000;
	font-weight: var(--weight-medium);
	padding: 2%;
	text-align: center;
}

@media screen and (min-width: 768px) {
	.benefit .item {
		padding: 2%;
		font-size: var(--size-small);
	}
}

/*********************************
article
*********************************/

.article-title {
	color: var(--third-color);
	font-size: var(--size-medium);
	margin-bottom: 10px;
}

.article-notice {
	color: var(--third-color);
	font-size: var(--size-small);
	text-align: center;
	margin-bottom: 10px;
}

.article-text {
	color: var(--third-color);
	font-size: var(--size-small);
	line-height: 1.4;
}

@media screen and (min-width: 768px) {
	.article-title {font-size: var(--size-large);}
	.article-notice {font-size: var(--size-large);}
	.article-text {font-size: var(--size-large);}
}

/*********************************
flex-column
*********************************/

.flex-column {
    display: flex;
	flex-wrap : wrap;
    justify-content: space-between;
    /* margin: 20px 10% 50px; */
    /* padding: 0 20px; */
    gap: 10px;
}
.flex-column li {
/*	width: calc(100% / 3 - );*/
/*	width: 20%;*/
}
.flex-column li {}
.flex-column a {
	color: #000;
}
.flex-column h3 {
	font-size: var(--size-small);
    font-weight: var(--weight-medium);
    padding: 5px;
    text-align: left;
	margin-bottom: 0;
}
.flex-column p {
	font-size: var(--size-small);
    font-weight: var(--weight-medium);
    padding: 5px;
    text-align: right;
	margin-bottom: 0;
}

.flex-column::after{
  content:"";
  display: block;
  width: calc(100% / 3 - 20px);
  margin: 10px;
}

.column-item {
  width:30%;
  height:auto;
  position:relative;
}

.column-item::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top: 70%;
}
.column-item img {
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
	height:100%;
  object-fit:cover;
  object-position:center;
  background:#eee;
}

@media screen and (min-width: 768px) {
	.flex-column {
    gap: 30px;
	}
}

/*********************************menu*********************************/

.menu_column {
	display: flex;
	justify-content: space-between;
    gap: 9px;
    flex-wrap: wrap;
	margin-top: 40px;
}
.menu_column .item {
	position: relative;
	background: linear-gradient(0deg, transparent 50%, transparent 0%, var(--main-color)50%, var(--main-color));
	border: 3px var(--main-color) solid;
	border-radius: 10px;
	width: 31%;
	text-align: center;	
	height: 110px;
}
.menu-wrap {
    width: 100%;
    height: 100%;
}
.absolute-box-1 {
	position: absolute;
	top: 3%;
    left: 0%;
    right: 0%;
}
.absolute-box-1 img {
	width: 45px;
}
.absolute-box-2 {
	position: absolute;
	bottom: 10%;
    left: 0%;
    right: 0%;
}
.menu_column p {
	font-size: var(--size-medium);
	font-weight: var(--weight-medium);
}
.menu_column span {
	color: var(--main-color);
	font-size: var(--size-medium);
}
@media screen and (min-width: 768px) {
	.menu_column {
		gap: 20px;
	}
	.menu_column .item {
		height: 250px;
	}
	.absolute-box-1 img {
	width: 45%;
	}
	.menu_column p {
		font-size: var(--size-xxlarge);
	}
	.menu_column span {
		font-size: var(--size-xxlarge);
	}
}
/*
#flex_column li a::after{
  content:"";
  display: block;
  width: calc(100% / 3 - 20px);
  margin: 10px;
}
#flex_column li a ::after{
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top: 70%;
}
*/

/*********************************coupon*********************************/

.coupon-list {}

.coupon-list .item img {
	width: 100%;
}

.coupon-item {
	position: relative;
	margin-bottom: 30px;	
}

/*
.coupon-item {
	position: relative;
	margin-left: 3%;
	margin-bottom: 6%;
	padding: 2%;
	border: 2px #a6a6a6 solid;
}*/

.aligin-ribbon {
	position: absolute;
	top: 3%;
    left: -3%;
}

.ribbon {
	display: inline-block;
	position: relative;
	left: -1.8rem;
	padding: 2% 10% 3% 5%;
	font-size: var(--size-small);
	color: #fff;
	font-weight: var(--weight-medium);
	background: var(--main-color);
}

.ribbon:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 10px rgb(149, 158, 155);
}


/*保存
.ribbon {
  display: inline-block;
  position: relative;
  width: 160%;
  padding: 7% 0 7% 15%;
  font-size: var(--size-small);
  color: #fff;
  font-weight: var(--weight-medium);
  background: var(--main-color);
}

.ribbon:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 10px rgb(149, 158, 155);
}*/

/*.ribbon:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-left: solid 20px rgb(149, 158, 155);/*折り返し部分
}*/

.coupon-article {
	display: flex;
	margin-top: 3%;
	margin-bottom: 3%;
}
.coupon-article .child1 {
	flex: 1;
}
.coupon-article .child2 {
	flex: 2;
	position: relative;
	font-size: var(--size-small);
}

.coupon-article .box{
    width: 85%;
    position: relative;
    overflow: hidden;
}
.coupon-article .box::before{
    content: "";
    padding-top: 100%;
    display: block;
}
.coupon-article .box img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.coupon-title {
	font-weight: var(--weight-medium);
}
.coupon-text {
	font-size: var(--size-xsmall);
	line-height: 1.2;
}
.coupon-price {	
	position: absolute;
    bottom: 0;
    right: 0;
	color: var(--main-color);
	font-size: var(--size-xsmall);
	font-weight: var(--weight-medium);
}

.coupon-notice {
	background-color: var(--second-color);
	padding-top: 2%;
    padding-right: 2%;
    padding-bottom: 15%;
    padding-left: 2%;
	margin-bottom: 2%;
}
.coupon-notice p {
	margin-bottom: 1%;
}


@media screen and (min-width: 768px) {
	.ribbon {
		font-size: var(--size-xlarge);
		left: -3.5rem;
	}
	.ribbon:before {
		position: absolute;
		content: '';
  		top: 100%;
  		left: 0;
 		border: none;
		border-bottom: solid 15px transparent;
  		border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
	}
	.coupon-text {
	font-size: var(--size-medium);
	}
	.coupon-price {	
	font-size: var(--size-xlarge);
	}
	.coupon-notice p {
		font-size: var(--size-small);	
	}
}

/*********************************table*********************************/

/*table-1*/
#table-1 {
	width: 100%;
	table-layout: fixed;
	text-align: center;
    font-size: var(--size-smail);
}
#table-1 th {
	width: 40%;
	border: 2px var(--second-color) solid;
}
#table-1 td {
	border: 2px var(--second-color) solid;
}
#table-1 th,td {
	padding: 2%;
	vertical-align: middle;
}

/*table-2*/
#table-2 {
	font-size: var(--size-xsmall);
	color: var(--third-color);
}
#table-2 td {
	border: none;
}
#table-2 th {
	text-align: right;
}
#table-2 td { padding: 0px;}


/*table-3*/
#table-3 {
	width: 100%;
	table-layout: fixed;
}
#table-3 th {
	background: var(--second-color);
	border: 2px var(--second-color) solid;
	color: var(--third-color);
	width: 33%;
	font-size: var(--size-smail);
	line-height: 1.5;
}
#table-3 td {
	border: 2px var(--second-color) solid;
	font-size: var(--size-smail);
	line-height: 1.5;
}
#table-3 th,td {
	padding: 2%;
	vertical-align: middle;
}

.saturday {
	background-color: #deefff;
	color: #1976d2;
}
.sunday {
	background-color: #ffe9e7;
	color: #f44336;	
}

.name {
	font-size: 1.2rem;
	font-weight: var(--weight-regular);
}

.usable-icon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
}
.usable-icon li {
	width: 15%;
}
.traffic-icon {
	width: 60%;
}

#table-3 .custom {
	max-width: 150px;
}

@media screen and (min-width: 768px) {
/*table-1*/
#table-1 {
    font-size: var(--size-large);
}

/*table-2*/
	#table-2 {
	font-size: var(--size-medium);
	width: inherit;
}
	/*table-2*/
	#table-3 th {font-size: var(--size-medium);}
	#table-3 td {font-size: var(--size-medium);}
	
	.name {font-size: var(--size-large);}
}

/*********************************button*********************************/

button {
	width: 100%;
	font-size: var(--size-xsmall);
}
button a {
	display: block;
}
button img {
	width: 2rem;
	margin-right: 1%;
	vertical-align: sub;
}

.button-1 {
	background: var(--main-color);
	border-radius: 3px;
	padding: 3%;
	font-weight: var(--weight-regular);
	color: #fff;
	text-align: center;
	z-index: 99;
}
.button-1 a {
	color: #fff;
}

.button-2 {
	background: #fff;
	border: 2px var(--main-color) solid;
	border-radius: 3px;
	padding: 3%;
	font-weight: var(--weight-regular);
	color: var(--main-color);
	text-align: center;
}
.button-2 a {
	color: var(--main-color);
}
.button-2 img {
	border-radius: 50%;	
	padding: 2%;
	background-color: var(--main-color);
}

.button-3 {
	border: 2px var(--second-color) solid;
	border-radius: 3px;
	padding: 3%;
	font-weight: var(--weight-regular);
	color: var(--third-color);
	text-align: center;
}

.button-box {
	display: flex;
	gap: 2px;
}

.button-item {
	width: 50%;
}

.button-absolute {
	position: absolute;
    width: 92%;
    bottom: 2.9%;
    right: 0%;
    left: 5%;
	padding: 2%;
}

/*
.button-coupon {
	position: absolute;
    bottom: 2%;
    left: 6%;
    width: 89%;
    padding: 2%;
}
*/
.opacity-box {
	position: relative;
}

.tap-icon {
	position: absolute;
	background: var(--second-color);
	color: var(--teriary-color);
	z-index: 99;
	width: 5rem;
	height: 5rem;
	padding: 1rem;
	font-size: 2.6rem;
	text-align: center;
	opacity: 0.6;
	right: 5%;
	bottom: 5%;
	pointer-events: none;
}

@media screen and (min-width: 768px) {
	button {
	font-size: var(--size-xlarge);
	}
	button img {
		width: 8%;
	}
}

/*********************************fixed*********************************/

#fixed-bottom {
	position: fixed;
	bottom: 0;
    width: 100%;
	background: #fff;
	z-index: 99;
}
#fixed-bottom .content {
	margin: inherit;
}

@media screen and (min-width: 768px) {
	#fixed-bottom {
		position: inherit;
		width: inherit;
		padding-bottom: var(--bottom-gap);
	}
	#fixed-bottom .content {
	margin: var(--side-gap);
	}
}

/*********************************

*********************************/
.dummy {
	background: #dcdcdc;
	text-align: center;
}

.test {
	background-color: var(--second-color) ;
}