body {
    margin: 0;
    padding: 0;
/*    font-family: 'Noto Sans JP', sans-serif,Arial,'ＭＳ Ｐゴシック','MS P Gothic','メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif,Helvetica;*/
    font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
	color: #3f3d39 ;
	background: #00387c;
    background-repeat: repeat;

	--goodscollect:#e15fa8 ;
	--tsutaya:#00509b ;
	--friends:#00a970 ;
}
body::before {
    background-image: url(../img_events/bg_check_events.svg);
    background-repeat: repeat;

    position: fixed;
    display: block;
    width: 100vw;
    height: 100vh;
    background-position: center top;
	background-size: 100px ;
    content: '';
    /* background-size: 100% auto; */
	opacity: .3 ;
    z-index: -999;
}

div, ul, li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html{ 

} 


a:link, a:visited {
    text-decoration: none;   
	color: #3fb4ff ;
}
a:hover {
	cursor: pointer ;
}
ul {
	list-style: none ;
}

.w100 {
	width: 100% ;
	height: auto ;
}
.mt_15 {
	margin-top: 15px;
}
.mt_20 {
	margin-top: 20px;
}
.mt_50 {
	margin-top: 50px;
}
.mt_75 {
	margin-top: 75px;
}
.iconimg {
	display: inline-block ;
	width: 20px ;
	top: 2px ;
	position: relative ;
}

.bg_check {
	position: relative ;
	&::before {
		content: '' ;
		background: url(../img_events/bg_check_events.svg) repeat center top;
		position: absolute;
    	display: block;
		width: 100%;
		height: 100%;
		top: 0 ; 
		left: 0 ;
		background-size: 100px ;
		opacity: .3 ;
		z-index: 0 ;
	}
}

.goldline_top, .goldline_bottom {
	width: 100% ;
	height: 15px ;
	background: linear-gradient(90deg, #bf9633, #f4cf75 50%, #bf9633);
	position: absolute ;
	left: 0 ;
	&:after {
		content: '';
		position: absolute ;
		width: 100% ;
		height: 0;
		border-bottom: 5px dotted #c3a463;
		left: 0 ;
	}
}
.goldline_top {
	top: 0 ;
	&::after {
		top: 30px ;
	}
}
.goldline_bottom {
	bottom: 0;
	&::after {
		bottom: 30px ;
	}
}

.notice_list_kome, .notice_list_diamond {
	ul {
		li {
			padding-left: 30px ;
			margin-top: 10px ;
			position: relative ;
			line-height: 1.3;
			&::before {
				content: '※' ;
				left: 0 ;
				position: absolute ;
				width: 30px ;
				text-align: center ;
			}
			&:first-child {
				margin-top: 0 ;
			}
		}
	}
}
.notice_list_diamond {
	ul {
		li {
			&::before {
				content: '' ;
				background: url(../img_events/notice_list_diamond.svg) no-repeat center ;
				height: 12px ;
				top: 5px ;
			}
		}
	}
}

.linkbtn {
	a {
		display: inline-block;
		line-height: 66px ;
		height: 66px ;
		color: #e59d15 ;
		background: #fff;
		font-size: 20px ;
		border: 2px solid #e59d15 ;
		border-radius: 40px;
		padding: 0 70px 0 30px ;
		position: relative ;
		filter: drop-shadow(0 10px 3px #a1aab7);
		transition: .25s ;
		top: 0 ;
		&::before {
			content: '';
			position: absolute;
			top: 50% ;
			transform: translateY(-50%);
			right: 8px ;
			width: 50px ;
			height: 50px ;
			background: #e59d15;
			border-radius: 40px ;
		}
		&::after {
			content: '';
			position: absolute ;
			top: 50% ;
			transform: translateY(-50%);
			width: 27px ;
			height: 23px ;
			right: 18px ;
			background: url(../img_events/linkbtn_arrow.svg) no-repeat ;
			background-size: contain ;
		}
		&:hover {
			top: 5px ;
			filter: drop-shadow(0 5px 3px #a1aab7);
		}
	}
}

@media screen and (max-width: 768px) {
	body::before {
		background-size: 80px ;
	}

	.bg_check {
		&::before {
			background-size: 80px ;
		}
	}


	.goldline_top, .goldline_bottom {
		&:after {
			border: none ;
			background-image: radial-gradient(circle, #c3a463 1px, transparent 1px);
			background-position: left top;
			background-repeat: repeat-x;
			background-size: 9px 2px;
			height: 2px;
		}
	}
	.goldline_top {
		&::after {
			top: 22px ;
		}
	}
	.goldline_bottom {
		&::after {
			bottom: 22px ;
		}
	}
	.notice_list_kome, .notice_list_diamond {
		ul {
			li {
				font-size: 14px ;
				margin-top: 5px ;
			}
		}
	}
	.linkbtn {
		a {
			line-height: 56px ;
			height: 56px ;
			font-size: 17px ;
			border-radius: 40px;
			padding: 0 60px 0 30px ;
			&::before {
				right: 6px ;
				width: 40px ;
				height: 40px ;
			}
			&::after {
				width: 27px ;
				height: 23px ;
				right: 11px ;
				background: url(../img_events/linkbtn_arrow.svg) no-repeat ;
				background-size: contain ;
			}
			&:hover {
				top: 5px ;
				filter: drop-shadow(0 5px 3px #a1aab7);
			}
		}
	}
}

.wf-loading {
    opacity: 0;
}



/* ----------------
header
----------------*/
.header {
    width: 100%;
    position: absolute ;
    z-index:9999;
	top: 0 ;
	left: 0 ;
	right: 0 ;
	margin: 0 auto;
}

.header_wrap {
    margin:0 auto;
    max-width: 450px ;
	width: 90% ;
	filter: drop-shadow(0 10px 3px rgba(0, 39, 103, 0.45));
}
.header_inner {
	width: 100% ;
	padding-bottom: 15.4%;
	background: url(../img_events/header_bg.png) no-repeat center top;
	background-size: contain ;
}
.header_logo {
	display: block;
	position: absolute ;
	left: 0 ;
	right: 0 ;
	width: 30% ;
	padding-bottom: 15.4%;
	margin: 0 auto ;
	background: url(../img_events/10years_goodscollection_logo.png) no-repeat center ;
	background-size: contain ;
}

@media screen and (max-width: 768px) {
	.header_wrap {
		max-width: 450px ;
		width: 100% ;
	}
}

/* ----------------
hero
----------------*/
#hero {
	width: 100% ;
	overflow: hidden ;

}
.hero_wrap {
	max-width: 1200px ;
	margin: 0 auto ;
	border: #9e874c solid 5px ;
	position: relative ;
	&:after {
		content: '';
		position: absolute ;
		width: calc(100% - 30px);
		height: calc(100% - 30px) ;
		top: 10px;
		left: 10px;
		border: #9e874c dotted 5px;
		z-index: 3 ;
		pointer-events: none ;
	}
}
.hero_main {
	display: flex ;
	padding: 3%;
	align-items: center;
	background: linear-gradient(90deg, #00387c, #00469b 50%, #00387c);
	&.bg_check::before {
		background-position: bottom ;
	}
}

.hero_deco_item01 {
	position: absolute ;
	background: url(../img_events/hero_item01.png) no-repeat center ;
	background-size: contain ;
	z-index: 11 ;
	width: 250px ;
	height: 250px ;
	bottom: -5% ;
	left: -3% ;
	animation: fuyofuyo3 5s infinite ;
}
.hero_deco_item02 {
	position: absolute ;
	background: url(../img_events/hero_item02.png) no-repeat center ;
	background-size: contain ;
	z-index: 11 ;
	width: 180px ;
	height: 110px ;
	top: 1% ;
	right: 5% ;
	animation: fuyofuyo1 5s infinite ;
}
.hero_deco_item03 {
	position: absolute ;
	background: url(../img_events/hero_item03.png) no-repeat center ;
	background-size: contain ;
	z-index: 11 ;
	width: 140px ;
	height: 100px ;
	top: 15% ;
	right: -3% ;
	animation: fuyofuyo2 5s infinite ;
}
.hero_deco_hana01 {
	position: absolute ;
	background: url(../img_events/hero_hana01.png) no-repeat center ;
	background-size: contain ;
	z-index: 11 ;
	width: 70px ;
	height: 300px ;
	top: 5% ;
	right: -1% ;
	animation: fuyofuyo3 6s infinite ;
}
.hero_deco_hana02 {
	position: absolute ;
	background: url(../img_events/hero_hana02.png) no-repeat center ;
	background-size: contain ;
	z-index: 11 ;
	width: 250px ;
	height: 300px ;
	bottom: -3% ;
	left: -1% ;
	animation: fuyofuyo1 6s infinite ;
}
@keyframes fuyofuyo1 {
	0% {
		transform: rotate(-5deg) translateY(0);

	}
	50% {
		transform: rotate(5deg) translateY(10px);
	}
	100% {
		transform: rotate(-5deg) translateY(0);
	}
}
@keyframes fuyofuyo2 {
	0% {
		transform: rotate(-5deg) translateY(5);

	}
	50% {
		transform: rotate(5deg) translateY(-5px);
	}
	100% {
		transform: rotate(-5deg) translateY(5);
	}
}
@keyframes fuyofuyo3 {
	0% {
		transform: rotate(-2deg) translate(0, 0);

	}
	50% {
		transform: rotate(2deg) translate(3px, 3px);
	}
	100% {
		transform: rotate(-2deg) translate(0, 0);
	}
}

.hero_mainvisual {
	width: 49% ;
	position: relative ;
	z-index: 1 ;
}
.hero_mainvisual_image {
	width: 100%;
	padding-bottom: 148.9%;
	background: url(../img_events/hero_mainvisual_pc.png) no-repeat center;
	background-size: contain ;
}
.hero_lead {
	width: 51%;
	margin-left: 3%;
	position: relative;
	z-index: 2;
	margin-top: 5% ;

	img {
		display: block ;
		margin: 0 auto ;
	}
}
.hero_date {
	width: 60% ;
	margin-top: -3% !important ;
}
.hero_mission {
	left: -15% ;
	width: 115% ;
	position: relative ;
	z-index: 0 ;
	img {
		width: 100%;
	}
}
.hero_leadimg {
	margin-top: -14% !important;
	filter: drop-shadow(10px 10px 5px #002767);
	position: relative ;
	z-index: 1;
	display: block ;
	img {
		width: 100% ;
	}
}

.hero_detail {
	background: linear-gradient(90deg, #00a5e7, #00b9f2 50%, #00a5e7);
	padding-top: 100px;
	position: relative;
	z-index: 2 ;
	padding: 3% ;
	color: #fff ;
	&.bg_check::before {
		opacity: .7;
	}
}
.hero_detail_box {
	width: 49%;
	margin-right: auto ;
	text-align: center ;
	position: relative ;
	z-index: 10 ;
	&::after {
		content: '';
		position: absolute ;
		width: 100% ;
		padding-bottom: 100% ;
		background: url(../img_events/hero_prize.png) no-repeat center ;
		background-size: contain ;
		left: 105%;
		top: -42% ;
	}
}
.hero_detail_txt {
	font-size: 2vw ;
	font-weight: bold ;
	line-height: 1.5 ;
	filter: drop-shadow(0 0 3px #003893);
	span {
		font-size: 2.5vw;
		margin-right: 3px ;
		line-height: 1.2;
		color: #fdd300 ;
	}
}
.hero_shoplist {
	ul {
		display: flex ;
		justify-content: space-between ;
		margin-top: 15px ;
		li {
			width: calc(95% / 3) ;
			border: 3px solid #fff ;
			padding: 2% ;
			border-radius: 10px;
			& > div {
				width: 100% ;
				padding-bottom: 100% ;
				position: relative ;
				img {
					position: absolute;
					left: 0 ;
					right: 0 ;
					top: 50% ;
					transform: translateY(-50%);
				}
			}
			&:nth-child(1) {
				background: var(--goodscollect) ;
			}
			&:nth-child(2) {
				background: var(--tsutaya) ;
				& > div > img {
					height: 100% ;
				}
			}
			&:nth-child(3) {
				background: var(--friends) ;
			}
		}
	}
}
.hero_shoplist_title {
	font-size: 1.75vw ;
	font-weight: bold ;
	filter: drop-shadow(0 0 3px #003893);
	display: flex ;
	gap: 10px ;
	align-items: center ;
	justify-content: center ;
	&::before, &::after {
		content: '' ;
		background: url(../img_events/hero_shoplist_titleline.svg) no-repeat center ;
		width: 175px;
		height: 6px;
		background-size: contain;
	}
	&::before {
		transform: rotate(180deg);
	}
}

@media screen and (min-width: 1200px){
	.hero_detail_txt {
		font-size: 25px ;
		span {
			font-size: 34px ;
		}
	}
}

@media screen and (max-width: 1020px){
	.hero_deco_item02 {
	width: 160px ;
	height: 90px ;
	top: 0.5% ;
	right: 3% ;
	}
	.hero_deco_item03 {
	width: 120px ;
	height: 80px ;
	top: 15% ;
	right: -5% ;
	}
	.hero_mainvisual {
		width: 48%;
	}
	.hero_lead {
		width: 52% ;
		margin-left: 1% ;
	}
}

@media screen and (max-width: 768px) {
	.hero_wrap {
		&:after {
			content: '';
			position: absolute ;
			width: calc(100% - 12px);
			height: calc(100% - 12px) ;
			top: 6px;
			left: 6px;
			/* border: #9e874c dotted 3px;
			border-image-source: url(../img_events/sp_dotted.svg);
			border-image-slice: 4;
			border-image-width: 4px;
			border-image-repeat: round ; */
			border: none ;
			background-image: radial-gradient(circle, #c3a463 1px, transparent 1px), radial-gradient(circle, #c3a463 1px, transparent 1px), radial-gradient(circle, #c3a463 1px, transparent 1px), radial-gradient(circle, #c3a463 1px, transparent 1px);
			background-position: left top, right top, left bottom, left top;
			background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
			background-size: 9px 2px, 2px 9px, 9px 2px, 2px 9px;
		}
	}
	.hero_main {
		display: flex ;
		flex-direction: column ;
		padding: 15.4% 5% 0 ;
		&::after {
			display: block ;
			content: '';
			position: relative ;
			width: 100% ;
			padding-bottom: 20px ;
		}

	}
	.hero_main {
	display: flex ;
	padding: 15.4% 3% 3%;
	align-items: center;
	background: linear-gradient(90deg, #00387c, #00469b 50%, #00387c);
	&.bg_check::before {
		background-position: bottom ;
	}
}
	
	.hero_deco_item01 {
		width: 35vw ;
		height: 35vw ;
		bottom: -5% ;
		left: -6% ;
	}
	.hero_deco_item02 {
		width: 30vw ;
		height: 30vw ;
		top: 7% ;
		right: 10% ;
	}
	.hero_deco_item03 {
		width: 20vw ;
		height: 20vw ;
		top: 30% ;
		right: -3% ;
	}
	.hero_deco_hana01 {
		width: 12vw ;
		height: 40vw ;
		top: 20% ;
		right: 1% ;
	}
	.hero_deco_hana02 {
		width: 40vw ;
		height: 40vw ;
		bottom: -3% ;
		left: -5% ;
	}
	
	.hero_mainvisual {
		width: 98% ;
	}
	.hero_mainvisual_image {
		right: 1% ;
		position: relative ;
	}
	.hero_lead {
		width: 101%;
		max-width: 700px ;
		margin-left: 0 ;
		position: absolute ;
		margin-top: 0 ;
		bottom: 25px ;
	}
	.hero_mission {
		left: auto ;
		right: -0.5% ;
		bottom: -28% ;
		width: 38% ;
		position: absolute ;
	}
	.hero_leadimg {
		margin-top: 0 ;
		filter: drop-shadow(10px 10px 5px #002767);
		position: absolute ;
		width: 53% ;
		right: 3% ;
		bottom: -107% ;
	}
	
	.hero_detail {
		padding-top: 60vw ;
		z-index: 1 ;
	}
	.hero_detail_box {
		width: 100%;
		&::after {
			width: 68% ;
			padding-bottom: 68% ;
			left: -5%;
			top: -60vw ;
		}
	}
	.hero_detail_txt {
		font-size: 4vw ;
		span {
			font-size: 5vw;
		}
	}
	.hero_shoplist {
		ul {
			margin-top: 20px ;
			margin-bottom: 20px ;
		}
	}
	.hero_shoplist_title {
		font-size: 3.5vw ;
		gap: 10px ;
		align-items: center ;
		justify-content: center ;
		&::before, &::after {
			width: 120px;
			height: 4px;
		}
	}
}


/* ----------------
pageNav
----------------*/
#pageNav {
	background: repeating-linear-gradient(135deg, #003893, #003893 2px, #002e72 2px, #002e72 4px);
	padding: 40px 5% ;
}
.pagenav_wrap {
	max-width: 1200px ;
	margin: 0 auto;
	ul {
		display: flex ;
		justify-content: space-evenly ;
		li {
			width: 100% ;
			position: relative ;
			letter-spacing: 3px;
			transition: .25s ;
			&:after {
				content: '';
				position: absolute ;
				width: 3px ;
				height: 100% ;
				border-radius: 10px ;
				background: #fff ;
				top: 0;
				right: 0;
			}
			&:last-child:after {
				display: none ;
			}
			a {
				display: inline-block ;
				text-align: center;
				padding: 5px 30px ;
				font-size: 18px;
				color: #fff ;
				margin: 0 auto;
				width: 100% ;
				box-sizing: border-box;
				transition: .25s ;
			}
			&:hover {
				letter-spacing: 1px ;
				a {
					color: #fdd300 ;
				}
			}
		}
	}
}

@media screen and (max-width: 1020px) {
	#pageNav {
		padding: 40px 3% ;
	}
	.pagenav_wrap {
		ul {
			li {
				a {
					padding: 5px 20px ;
					font-size: 16px;
				}
			}
		}
	}
}
@media screen and (max-width: 768px) {
	#pageNav {
		padding: 0 ;
	}
	.pagenav_wrap {
		ul {
			flex-wrap: wrap ;
			li {
				letter-spacing: 3px;
				width: 50% ;
				border-right: 1px solid #9e874c ;
				border-bottom: 1px solid #9e874c ;
				box-sizing: border-box ;
				&:after {
					display: none ;
				}
				&:nth-child(2n) {
					border-right: none ;
				}
				&:nth-child(n + 3) {
					border-bottom: none ;
				}
				a {
					font-size: 18px;
					padding: 20px ;
				}
				&:hover {
					letter-spacing: 3px ;

				}
			}
		}
	}
}


/* ----------------
section
----------------*/
.container{
	overflow: hidden ;
}
.section_wrap {
	position: relative ;
	z-index: 1 ;
}
.section_inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 100px 3%;
}
.section_title {
	max-width: 500px;
	margin: 0 auto ;
	padding-bottom: 50px ;
}

@media screen and (max-width: 768px) {
	.section_wrap {
	}
	.section_inner {
		padding: 75px 3% ;
	}
	.section_title {
		max-width: 400px;
		width: 90%;
	}
}


/* ----------------
Overview
----------------*/
#Overview {
	--overview: #9a854c;
	background: #fffee6 ;
	&.bg_check:before {
		opacity: .9;
	}
}
.overview_subtitle {
	max-width: 600px ;
	font-size: 25px ;
	letter-spacing: 5px ;
	margin: 0 auto;
	display: flex ;
	align-items: center ;
	color: var(--overview);
	&:after, &:before {
		content: '' ;
    	height: 1px;
    	flex-grow: 1;
		border-bottom: 5px dotted var(--overview);
    	/* background-color: var(--overview); */
	}
	&:before {
		margin-right: 1rem ;
	}
	&:after {
		margin-left: 1rem ;
	}
}

.overview_period_date {
	max-width: 500px ;
	margin: 0 auto ;
	margin-top: 50px ;
}

.overview_step {
	text-align: center ;
	border: 2.5px solid var(--overview);
	background: #fff;
	padding: 5% ;
	margin-bottom: 90px ;
	position: relative ;
	.overview_step_txt {
		font-size: 20px;
		line-height: 1.5;
		span {
			color: #ff0039 ;
			font-weight: bold ;
			font-size: 23px;
		}
	}
	&::after {
		content: '';
		position: absolute ;
		width: 37px ;
		height: 70px ;
		right: 0 ;
		left: 0 ;
		margin: 0 auto ;
		bottom: -80px ;
		background: url(../img_events/overview_step_arrow.svg) no-repeat center ;
		background-size: contain ;
	}
	&:last-child::after {
		display: none ;
	}
}
.overview_step_badge {
	position: absolute ;
	top: -40px ;
	left: -40px ;
	width: 170px ;
}
.overview_step_icon {
	height: 150px ;
	margin: 0 auto;
	margin-bottom: 25px ;
	img {
		height: 100% ;
	}
}
.overview_step1 {

}
.overview_step3 {
	margin-bottom: 50px ;
	.overview_step_txt {
		background: var(--goodscollect);
		font-size: 25px;
		display: inline-block ;
		padding: 5px 15px ;
		border-radius: 10px ;
		color: #fff ;
		font-weight: bold ;
	}
}
.overview_step_mapwrap {
	position: relative ;
	&:after {
		content: '' ;
		position: absolute ;
		background: url(../img_events/overview_minimyne.png) no-repeat center ;
		background-size: contain ;
		width: 200px ;
		height: 300px ;
		bottom: -50px ;
		right: -200px ; 
		opacity: 0 ;
		transition: 1s ;
		animation: tekuteku 2s infinite;
	}
	&.is-active:after {
		right: -100px ; 
		opacity: 1 ;
	}
}
@keyframes tekuteku {
	0%, 49% {
		transform: rotate(-5deg);
	}
	50%, 99% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(-5deg);
	}
}
.map_img {
	background: url(../img_events/overview_step_map.jpg) no-repeat ;
	background-size: contain ;
	padding-bottom: 56.6% ;
}
.map_txtwrap {
	position: absolute ;
	top: -15px;
	left: 0 ;
	right: 0 ;
	margin: 0 auto ;
}
/* .map_txt {
	display: inline-block;
	height: 50px;
	line-height: 50px;
	text-align: center ;
	padding: 0 1rem;
	background: #cf0b20 ;
	font-size: 20px ;
	color: #fff ;
	font-weight: bold ;
	position: relative ;
	&::before,&::after {
		content: '';
		position: absolute ;
		top: 0 ;
		width: 0 ;
		height: 0;
		border-color: #cf0b20 transparent ;

		border-style: solid ;
	}
	&::before {
		left: -20px ;
		border-width: 25px 0 25px 20px;
	}
	&::after {
		right: -20px ;
		border-width: 25px 20px 25px 0;
	}
} */
.map_txt {
	display:inline-block;
padding:15px;
background:#cf0b20;
position:relative;
margin:0 20px;
font-size: 20px ;
color: #fff;
text-align:left;
	&::before, &::after {
		content:"";
		width:20px;
		height:100%;
		top:0;
		position:absolute;
	}
	&::before {
		left:-20px;
		background:linear-gradient(to bottom left, #cf0b20 50%, transparent 50%) top left/ 100% 50% no-repeat, linear-gradient(to top left, #cf0b20 50%, transparent 50%) bottom left / 100% 50% no-repeat;
	}
	&::after {
		right:-20px;
		background:linear-gradient(to bottom right, #cf0b20 50%, transparent 50%) top left/ 100% 50% no-repeat,linear-gradient(to top right, #cf0b20 50%, transparent 50%) bottom left / 100% 50% no-repeat;
	}
}
.map_icon {
	width: 44px ;
	display: inline-block ;
	position: absolute ;
	z-index: 10 ;
	&.pin1 {
		bottom: 26% ;
		right: 23% ;
		animation: pinJump 3s ease backwards infinite;
	}
	&.pin2 {
		top: 19% ;
		right: 31% ;
		animation: pinJump 3s ease backwards infinite;
	}
	&.pin3 {
		bottom: 37% ;
		left: 8% ;
		animation: pinJump 3s ease backwards infinite;
	}
}

@keyframes pinJump {
	0%, 40%, 50%, 60%, 100% {
		transform: translatey(0);
	}
	45%, 55% {
		transform: translateY(-10px);
	}
}

@media screen and (max-width: 768px) {
	#Overview {
	}
	.overview_subtitle {
		font-size: 23px ;
		letter-spacing: 3px ;
		&:after, &:before {
			/* border-bottom: 3px dotted var(--overview); */
			/* background-color: var(--overview); */
			border: none ;
			background-image: radial-gradient(circle, var(--overview) 2px, transparent 2px);
			background-position: left top;
			background-repeat: repeat-x;
			background-size: 12px 4px;
			height: 4px;
		}
	}
	
	.overview_period_date {
		width: 80%;
	}
	
	.overview_step {
		border: 2px solid var(--overview);
		padding: 3% ;
		.overview_step_txt {
			font-size: 17px;
			span {
				font-size: 20px;
			}
		}
	}
	.overview_step_badge {
		top: -30px ;
		left: -8px ;
		width: 110px ;
	}
	.overview_step_icon {
		height: 130px ;
		margin-bottom: 15px ;
		margin-top: 15px ;
	}
	.overview_step1 {
	
	}
	.overview_step3 {
		.overview_step_txt {
			font-size: 5vw ;
		}
	}
	.overview_step_mapwrap {
		&:after {
			width: 30%;
            height: 65%;
            bottom: -10%;
            right: -20%;
		}
		&.is-active:after {
			right: -12% ; 
		}
	}
	/* .map_txt {
		height: 40px;
		line-height: 40px;
		font-size: 18px ;
		&::before,&::after {
			content: '';
			position: absolute ;
			top: 0 ;
			width: 0 ;
			height: 0;
			border-color: #cf0b20 transparent ;
	
			border-style: solid ;
		}
		&::before {
			left: -15px ;
			border-width: 20px 0 20px 15px;
		}
		&::after {
			right: -15px ;
			border-width: 20px 15px 20px 0;
		}
	} */
	.map_txt {
		padding:10px;
		font-size: 18px ;
		
	}
	.map_icon {
		width: 25px ;
		&.pin1 {
			bottom: 26% ;
			right: 24% ;
		}
		&.pin2 {
			top: 23%;
            right: 32%;
		}
		&.pin3 {
			bottom: 36% ;
			left: 9% ;
		}
	}
	.overview_step_shopbtn {
		margin-bottom: 15px ;
	}
}


/* ----------------
Shoplist
----------------*/
#Shoplist {
	--shoplist: #9a854c ;
	background: linear-gradient(90deg, #f3c124, #f8cd3f 50%, #f3c124);
	&.bg_check:before {
		opacity: 1;
		mix-blend-mode: color-dodge ;
	}
}
.shoplist_box {
	background: rgba(255, 255, 255, 0.8);
	border: 2px solid var(--shoplist) ;
	border-radius: 20px ;
	padding: 5% ;
	position: relative ;
	margin-bottom: 50px ;

	h3 {
		width: 114% ;
		line-height: 50px ;
		border-top: 3px solid #fff ;
		border-bottom: 3px solid #fff ;
		left: -7% ;
		position: relative ;
		text-align: center;
		color: #fff ;
		font-size: 25px ;
		font-weight: bold ;
	}
}
.shoplist_box1 {
	h3 {
		background: var(--goodscollect);
		box-shadow: 0 -5px var(--goodscollect), 0 5px var(--goodscollect);
	}
}
.shoplist_box2 {
	h3 {
		background: var(--tsutaya);
		box-shadow: 0 -5px var(--tsutaya), 0 5px var(--tsutaya);
		line-height: 30px ;
		padding: 10px 0 ;
	}
}
.shoplist_box3 {
	h3 {
		background: var(--friends);
		box-shadow: 0 -5px var(--friends), 0 5px var(--friends);
	}
	.notice_list_kome {
		padding-bottom: 10px ;
	}
}
.shoplist_lead {
	font-size: 20px ;
	line-height: 1.2 ;
}
.shoplist_tag {
	position: relative ;
	margin-bottom: 20px ;
	&:after {
		content: '' ;
		position: absolute ;
		bottom: -10px ;
		left: 0;
		width: 100% ;
		height: 0 ;
		border-bottom: 3px dotted var(--shoplist);
	}
	
	h5 {
		display:inline-block;
		padding: 7px 15px;
		background: var(--shoplist) ;
		position:relative;
		margin:0 15px 0 0 ;
		letter-spacing: 3px ;
		color: #fff;
		text-align:left;
		&::after {
			content:"";
			width:15px;
			height:100%;
			top:0;
			position:absolute;
			right:-15px;
			background:linear-gradient(to bottom right, var(--shoplist) 50%, transparent 50%) top left/ 100% 50% no-repeat,linear-gradient(to top right, var(--shoplist) 50%, transparent 50%) bottom left / 100% 50% no-repeat;
		}
	}
}
.shoplist_novelty_txt {
	font-size: 18px ;
}
.shoplist_novelty_img {
	max-width: 600px ;
	margin: 0 auto ;
	margin-top: 10px ;
}
.shoplist_mapbox {
	margin-top: 30px ;
}
.shoplist_maptxt {
	font-size: 13px;
}
.shoplist_map {
	margin-top: 10px ;
	iframe {
		width: 100% ;
		height: 300px ;
	}
}

.shoplist_friendsmenu {
	ul {
		display: flex ;
		justify-content: space-between ;
		li {
			width: 48.5% ;
			background: #fff ;
			position: relative ;
			padding: 3% 3% 50px ;
			text-align: center ;
			border-radius: 10px ;
		}
	}
}
.menu_img {
	width: 100% ;
	position: relative ;
	&::before {
		content: '';
		border: 5px solid var(--shoplist);
		position: absolute;
		top: 0 ;
		left: 0 ;
		width: 100% ;
		height: 100% ;
		z-index: 1;
		box-sizing: border-box ;
	}
}
.menu_title {
	font-size: 23px ;
	font-weight: bold ;
	margin-top: 15px;
}
.menu_taste {
	font-size: 18px ;
	margin-top: 10px;
}
.menu_price {
	position: absolute ;
	width: 100% ;
	bottom: 15px ;
	font-size: 20px;
	font-weight: bold ;
	span {
		font-size: 15px;
	}
}

@media screen and (max-width: 768px) {
	.shoplist_box {
		padding: 5% 3% 3% ;	
		h3 {
			font-size: 20px ;
			line-height: 30px ;
			padding: 10px 0 ;
			width: 110% ;
			left: -5% ;
			span {
				display: inline-block ;
			}
		}
	}
	.shoplist_lead {
		font-size: 18px ;
	}
	.shoplist_tag {
		&:after {
			border: none ;
			background-image: radial-gradient(circle, var(--shoplist) 2px, transparent 2px);
			background-position: left top;
			background-repeat: repeat-x;
			background-size: 12px 4px;
			height: 4px;
		}
	}
	.shoplist_novelty_txt {
		font-size: 16px ;
	}
	.shoplist_maptxt {
		line-height: 1.2 ;
	}
	
	.shoplist_friendsmenu {
		ul {
			li {
				width: 49% ;
				padding: 2% 2% 40px ;
			}
		}
	}
	.menu_title {
		font-size: 4.7vw ;
	}
	.menu_taste {
		font-size: 17px ;
	}
	.menu_price {
		position: absolute ;
		bottom: 10px ;
		font-size: 18px;
		font-weight: bold ;
		span {
			font-size: 15px;
		}
	}
}


/* ----------------
Contact
----------------*/
#Contact {
	background: linear-gradient(90deg, #d9ecfd, #eaf5ff 50%, #d9ecfd);
	&.bg_check:before {
		opacity: 1;
	}
}
.contact_wrap {
	background: #fff ;
	padding: 3% ;
}
.contact_formbtn {
	text-align: center ;
}


/* ----------------
Notice
----------------*/
#Notice {
	background: linear-gradient(90deg, #00a5e7, #29bef9 50%, #00a5e7);
	&.bg_check:before {
		opacity: 1;
	}
}
.notice_wrap {
	background: rgba(17, 72, 117, 0.7) ;
	border: 2px solid #fff;
	color: #fff ;
	padding: 3% ;
}
.contact_formbtn {
	text-align: center ;
}


/* ----------------
footer
----------------*/
.footer {
    margin: 75px auto;
    text-align: center;
    color: #7da1bc;
    font-size: 14px;
	position: relative ;
	.goldline_top {
		top: -75px;
	}
}
.footer_wrap {
	max-width: 1200px ;
	margin: 0 auto ;
	padding: 0 3%;
}
.copylight {
	margin-top: 50px ;
}

.banner_list {
    display: flex;
	flex-wrap: wrap ;
    justify-content: center ;
    align-items: center;
    gap: 1rem;
	li {
		height: 70px ;
		img {
    		width: auto ;
			height: 100%;
		}
		&:nth-child(-n + 2) {
			height: 120px ;
		}
	}
	.banner_dummy {
		width: 100% ;
		height: 0 ;
	}
}

.share_list {
	ul {
		display: flex ;
		justify-content: center ;
		gap: 3% ;
		li {
			width: 50px ;
			height: 50px ;
		}
	}
}

@media screen and (max-width: 768px) {
	.footer {
		font-size: 12px;
	}
	
	.banner_list {
		flex-direction: column;
		gap: .5rem;
		li {
			height: auto  ;
			&:nth-child(-n + 2) {
				height: auto ;
			}
			img {
				max-width: 352px;
				height: auto ;
				width: 100% ;
			}
		}
		.banner_dummy {
			display: none ;
		}
	}
}