@charset "utf-8";

/* =====================================================================
	common.css
===================================================================== */

/* ----------------------------------------------------------------------
 * 全デバイス共通
 * ---------------------------------------------------------------------- */

/* index.html -------------------------------------------------- */
/* #MainGraphic */
#MainGraphic,
#MainGraphic ul,
#MainGraphic ul li {
	width: 100%;
	height: auto;
	overflow: hidden;
}
#MainGraphic ul {
	position: relative;
}
#MainGraphic ul li {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	opacity: 0;
	filter: blur(14px);
	transition-duration: 1s;
}
#MainGraphic ul li img {
	width: 100%;
	height: auto;
}
@keyframes animationFade {
	0% {
		opacity: 0;
		filter: blur(14px);
	}
	7% {
		opacity: 1;
		filter: blur(0);
	}
	33.3333% {
		opacity: 1;
		filter: blur(0);
	}
	40.3333% {
		opacity: 0;
		filter: blur(14px);
	}
	100% {
		opacity: 0;
		filter: blur(14px);
	}
}
#MainGraphic ul.fadeMovie li {
	animation-name: animationFade;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-duration: 15s;
}
#MainGraphic ul.fadeMovie li:nth-of-type(1) {
	animation-delay: 0s;
}
#MainGraphic ul.fadeMovie li:nth-of-type(2) {
	animation-delay: 5s;
}
#MainGraphic ul.fadeMovie li:nth-of-type(3) {
	animation-delay: 10s;
}
/* #indexNav */
#indexNav,
#indexNav ul {
	width: 100%;
}
#indexNav ul {
	display: flex;
	justify-content: center;
}
#indexNav ul li a {
	width: 100%;
	display: flex;
	background-size: contain;
	background-repeat: no-repeat;
	box-sizing: border-box;
	text-align: center;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 900;
	position: relative;
	transition: opacity 0.5s;
	opacity: 1;
}
#indexNav ul li a::before,
#indexNav ul li a::after {
	content: '';
	display: block;
	position: absolute;
}
#indexNav ul li a::before {
	background-color: #333;
	border-radius: 50%;
}
#indexNav ul li a::after {
	background-color: #fff;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#indexNav ul li:nth-of-type(1) a {
	background-color: #facb88;
	background-image: url('/img/indexNavIcon01.png');
}
#indexNav ul li:nth-of-type(2) a {
	background-color: #ee7800;
	background-image: url('/img/indexNavIcon02.png');
	color: #fff;
}
#indexNav ul li:nth-of-type(3) a {
	background-color: #a1c3d7;
	background-image: url('/img/indexNavIcon03.png');
}

/* #pickup */
#pickup {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}
#pickup::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
	background-image: url('/img/pickupBG02.jpg');
	background-size: cover;
	background-position: left;
	z-index: -1;
}
#pickup::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, .8);
	z-index: -1;
}
#pickup h2 {
	font-size: 2rem;
	font-weight: 900;
	text-align: center;
	position: relative;
}
#pickup h2 span {
	position: absolute;
	display: block;
}
#pickupSplide {
	display: block;
}
#pickupWrapper {
	transform: translateX(5px);
	box-sizing: border-box;
	padding: 0 10px 10px 0;
}
#pickupList {
	width: 100%;
	margin: 0 auto;
}
#pickupList > li {
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #898989;
	border-radius: 10px;
	position: relative;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, .4);
	overflow: hidden;
}
#pickupList h3 {
	font-size: 1.4rem;
	line-height: 1.8rem;
	font-weight: 900;
	text-align: center;
	padding: 0;
	background-color: #facb88;
	box-sizing: border-box;
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pickupInfo {
	font-size: 1.2rem;
	line-height: 1.6rem;
	width: 155px;
	margin: 0 auto;
}
.pickupInfo dl {
	border-bottom: 1px solid #ee7800;
	padding: 10px 0 5px 0;
}
.pickupInfo dt {
	font-size: 1.2rem;
	font-weight: 900;
	line-height: 1;
	background-color: #fef2dd;
	color: #ee7800;
	width: 7em;
	padding: .33em .5em;
	box-sizing: border-box;
	text-align: center;
	margin: 0 auto 10px auto;
}
.pickupInfo dd {
	text-align: center;
	font-weight: 500;
}
.pickupPoints {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.5;
	width: 155px;
	margin: 0 auto;
}
.pickupPoints li {
	position: relative;
	padding: 0 0 0 1.25em;
}
.pickupPoints li::before {
	content: '';
	position: absolute;
	width: 1em;
	height: 1em;
	background-color: #333;
	border-radius: 50%;
	top: .25em;
	left: 0;
}
.pickupImage {
	width: 155px;
	height: 100px;
	margin: 0 auto;
}
.pickupImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pickupLink {
	background-color: #ee7800;
	color: #fff;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 500;
	padding: 5.5px .5em;
	margin: 10px auto;
	display: block;
	width: 10em;
	border-radius: 2em;
}
.pickupUpdateDate {
	font-size: 1.4rem;
	font-weight: 500;
	color: #717071;
	text-align: center;
	margin-bottom: 10px;
	text-align: center;
}
#pickupBtnSet {
	margin: 40px auto 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#pickupBtnSet a {
	width: 250px;
}
#pickupBtnSet a img {
	width: 100%;
}
.splide__arrow {
	width: 4rem;
	height: 4rem;
	border-radius: 0;
	background: #333;
	right: 0;
	left: 0;
	margin: auto;
	overflow: hidden;
	text-indent: 100%;
    white-space: nowrap;
}
.splide__arrow--prev {
	transform: translateX(-432.5px);
	clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}
.splide__arrow--next {
	transform: translateX(432.5px);
	clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}

/* #step */
#step {
	background-color: #fff;
}
#step h2 {
	font-size: 2rem;
	font-weight: 900;
	text-align: center;
	position: relative;
}
#step h2 span {
	position: absolute;
	display: block;
}
#stepFlow {
	margin: 60px auto 0 auto;
}
.stepNumber {
	font-size: 1.6rem;
	font-weight: 900;
	color: #ea5514;
	display: flex;
	width: 100%;
	align-items: center;
	position: relative;
}
.stepNumber::after {
	content: '';
	position: absolute;
	display: block;
	width: calc(100% - 4.5em);
	height: 2px;
	background-image : linear-gradient(to right, #f7b52c 2px, transparent 2px);
	background-size: 8px 2px;
	background-repeat: repeat-x;
	background-position: left bottom;
	top: 50%;
	right: 0;
}
.stepNumber > span {
	font-size: 2.5rem;
	margin: 0 0 0 .25em;
}
#stepFlow > li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.stepImg img {
	width: 100%;
	overflow: hidden;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, .4);
}
#stepFlow > li:nth-of-type(even) .stepImg { order: 2; }
#stepFlow > li:nth-of-type(even) .stepContent { order: 1; }
#stepFlow h3 {
	font-size: 2rem;
	line-height: 1.3;
	font-weight: 900;
	color: #7f4f21;
	margin: 20px 0;
}
#stepFlow p {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.375;
	margin: 20px 0 0 0;
}
#stepFlow a {
	width: 280px;
	display: block;
}
#stepFlow a img {
	width: 100%
}


/* --------------------------------------------------
 * 画面の横幅が960px以上（PC）
 * -------------------------------------------------- */
@media screen and (min-width: 960px){
	/* index.html -------------------------------------------------- */
	/* #MainGraphic */
	#MainGraphic ul {
		padding-top: 56.25%;
	}
	#MainGraphic ul li {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		opacity: 0;
		filter: blur(14px);
		transition-duration: 1s;
	}
	/* #indexNav */
	#indexNav ul {
		flex-wrap: nowrap;
	}
	#indexNav ul li {
		width: calc(100% / 3);
	}
	#indexNav ul li a {
		height: 80px;
		padding: 0 0 2em 120px;
	}
	#indexNav ul li a::before {
		width: 1.5em;
		height: 1.5em;
		bottom: 15%;
	}
	#indexNav ul li a::after {
		width: .5em;
		height: .3em;
		bottom: calc(15% + .6em);
		margin: 0 0 0 .1em;
	}

	/* #pickup */
	#pickup {
		background-image: url('/img/pickupBG01.jpg');
		background-size: cover;
		background-position: center;
		padding: 60px 0;
	}
	#pickup::before {
		display: block;
	}
	#pickup::after {
		display: block;
	}
	#pickup h2 span {
		top: -1em;
		left: calc(50% - 20px - 110px - 5.5em);
		width: 110px;
		height: 84px;
	}
	#pickupWrapper {
		width: 815px;
		margin: 60px auto 0 auto;
	}
	#pickupList > li {
		width: 190px;
	}
	.pickupPoints {
		padding: 1rem 0;
	}
	#pickupBtnSet {
		width: 920px;
		gap: 60px;
	}
	.splide__arrow {
		display: block;
	}

	/* #step */
	#step {
		padding: 100px 0 80px 0;
	}
	#step h2 span {
		top: -1em;
		left: calc(50% - 5.5em - 5.5em);
		width: 110px;
		height: 84px;
	}
	#stepNav ol {
		width: 880px;
		margin: 60px auto 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#stepNav ol li {
		width: calc((100% - (20px * 4)) / 5);
	}
	#stepNav ol li a {
		width: 100%;
		height: 0;
		padding-top: 100%;
		background-size: cover;
		overflow: hidden;
		display: block;
		text-indent: 100%;
		white-space: nowrap;
		transition: opacity 0.5s;
		opacity: 1;
	}
	#stepNav ol li:nth-of-type(1) a { background-image: url('/img/stepNav01.svg'); }
	#stepNav ol li:nth-of-type(2) a { background-image: url('/img/stepNav02.svg'); }
	#stepNav ol li:nth-of-type(3) a { background-image: url('/img/stepNav03.svg'); }
	#stepNav ol li:nth-of-type(4) a { background-image: url('/img/stepNav04.svg'); }
	#stepNav ol li:nth-of-type(5) a { background-image: url('/img/stepNav05.svg'); }
	#stepNav ol li a span {
		display: none;
	}
	#stepFlow {
		width: 920px;
	}
	#stepFlow > li {
		margin: 80px 0 0 0;
	}
	.stepImg {
		width: 395px;
	}
	.stepImg img {
		border-radius: 20px;
	}
	.stepContent {
		width: 480px;
	}
	#stepFlow > li:nth-of-type(odd) .stepImg { order: 1; }
	#stepFlow > li:nth-of-type(odd) .stepContent { order: 2; }
	#stepFlow .stepLink {
		margin: 0 auto 50px auto;
	}
	#stepFlow a {
		margin: 50px auto 0 auto;
	}
}


/* --------------------------------------------------
 * 画面の横幅が959pxまで（タブレット端末横）
 * -------------------------------------------------- */
@media screen and (max-width: 959px){
	/* index.html -------------------------------------------------- */
	/* #MainGraphic */
	#MainGraphic ul {
		padding-top: 153.18%;
	}
	#MainGraphic ul li {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		opacity: 0;
		filter: blur(14px);
		transition-duration: 1s;
	}
	/* #indexNav */
	#indexNav ul {
		flex-wrap: wrap;
	}
	#indexNav ul li {
		width: 100%;
	}
	#indexNav ul li a {
		height: 60px;
		padding: 22px 50px 22px 80px;
		line-height: 1;
	}
	#indexNav ul li a::before {
		width: 34px;
		height: 34px;
		top: 13px;
		bottom: 0;
		right: 6%;
	}
	#indexNav ul li a::after {
		width: 10px;
		height: 6px;
		top: 28px;
		bottom: 0;
		right: calc(6% + 11px);
		margin: 0;
	}

	/* #pickup */
	#pickup {
		padding: 20px 0;
	}
	#pickup::before {
		display: none;
	}
	#pickup::after {
		display: none;
	}
	#pickup h2 {
		padding: 70px 0 0 0;
	}
	#pickup h2 span {
		top: 0;
		left: 0;
		right: 0;
		width: calc(110px / 3 * 2);
		height: calc(84px / 3 * 2);
		margin: 0 auto;
	}
	#pickupWrapper {
		width: 88%;
		margin: 40px auto 0 auto;
	}
	#pickupList {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}
	#pickupList > li {
		width: 250px;
	}
	.pickupPoints {
		padding: 1rem 0 0 0;
	}
	.pickupImage {
		display: none;
	}
	#pickupBtnSet {
		width: 88%;
		flex-direction: column;
		gap: 40px;
	}
	#pickupBtnSet a {
		margin: 0 auto;
	}
	.splide__arrow {
		display: none;
	}

	/* #step */
	#step {
		padding: 0 0 40px 0;
	}
	#step h2 {
		padding: 70px 0 0 0;
	}
	#step h2 span {
		top: 0;
		left: 0;
		right: 0;
		width: calc(110px / 3 * 2);
		height: calc(84px / 3 * 2);
		margin: 0 auto;
	}
	#stepNav ol {
		display: none;
	}
	#stepFlow {
		width: 88%;
	}
	#stepFlow > li {
		flex-direction: column;
		margin: 40px 0 0 0;
	}
	.stepImg {
		width: 100%;
	}
	.stepImg img {
		border-radius: 2.1875vw;
		margin: 30px 0 0 0;
	}
	.stepContent {
		width: 100%;
	}
	#stepFlow > li:nth-of-type(odd) .stepImg { order: 2; }
	#stepFlow > li:nth-of-type(odd) .stepContent { order: 1; }
	#stepFlow .stepLink {
		margin: 0 auto 30px auto;
	}
	#stepFlow a {
		margin: 30px auto 0 auto;
	}
}