@charset "UTF-8";

/* ++++++++++++++++++++++++++++++++++++++++

	/hi-chew/campaign/yosistamp/

++++++++++++++++++++++++++++++++++++++++ */

body {
	background: #ffef00;
}
img {
	max-width: 100%;
}

#container {
	overflow: hidden;
	max-width: 1280px;
	margin: auto;
}

#yosistamp_title {
	position: relative;
}
#yosistamp_title h1 {
	position: relative;
}
#yosistamp_title>img {
	position: absolute;
	animation: title_deco_anim infinite;
}

#yosistamp_title .deco01 {
	left: 0;
	top: 0;
	width: 325px;
	animation-duration: 3s;
}

#yosistamp_title .deco02 {
	right: 14px;
	top: 94px;
	animation-duration: 4s;
}

#yosistamp_title .deco03 {
	left: 0;
	top: 545px;
	animation-duration: 3.5s;
}

#yosistamp_title .deco04 {
	right: 18px;
	top: 611px;
	animation-duration: 4.5s;
}

@-webkit-keyframes title_deco_anim {
	0%,100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5%);
	}
}
@keyframes title_deco_anim {
	0%,100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5%);
	}
}

#yosistamp_map {
	padding: 10px 0 80px;
	background: #ffef00;
}
#yosistamp_map h2+div {
	margin-top: 30px;
	padding: 55px 0 80px;
	border-radius: 30px;
	background: #fff;
}

#yosistamp_map .matrix {
	position: relative;
}
#yosistamp_map .matrix>img {
	position: relative;
}
#yosistamp_map .matrix ul {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
#yosistamp_map .matrix li {
	position: absolute;
}

#yosistamp_map .matrix .matrix01 {
	left: 115px;
	top: -15px;
}

#yosistamp_map .matrix .matrix02 {
	right: -8px;
	top: -32px;
}

#yosistamp_map .matrix .matrix03 {
	left: 251px;
	top: 194px;
}

#yosistamp_map .matrix .matrix04 {
	right: 179px;
	top: 87px;
}

#yosistamp_map .matrix .matrix05 {
	left: 37px;
	top: 251px;
}

#yosistamp_map .matrix .matrix06 {
	left: 13px;
	top: 590px;
}

#yosistamp_map .matrix .matrix07 {
	right: 254px;
	top: 319px;
}

#yosistamp_map .matrix .matrix08 {
	right: 66px;
	top: 657px;
}

#yosistamp_map .matrix .matrix09 {
	left: 265px;
	top: 579px;
}

#yosistamp_map .matrix .matrix10 {
	left: 187px;
	top: 800px;
}

#yosistamp_map .matrix .matrix11 {
	left: -9px;
	top: 893px;
}

#yosistamp_map .matrix .matrix12 {
	right: 228px;
	top: 857px;
}

#yosistamp_map .list {
	margin-top: 70px;
}
#yosistamp_map .list h3 {
	text-align: center;
}
#yosistamp_map .list ul {
	margin-top: 30px;
}
#yosistamp_map .list li a {
	display: block;
	position: relative;
}
#yosistamp_map .list li img {
	position: absolute;
	bottom: 0;
}
#yosistamp_map .list li:nth-child(2) img,
#yosistamp_map .list li:nth-child(10) img {
	top: 0;
	bottom: auto;
}

#yosistamp_footer {
	position: relative;
	padding: 137px 0 70px;
	background: url(../img/footer_bg.png) 50% 0 no-repeat #fff;
}
#yosistamp_footer>img {
	position: absolute;
}

#yosistamp_footer .deco01 {
	left: 2px;
	top: -179px;
	width: 194px;
}

#yosistamp_footer .deco02 {
	right: 9px;
	top: -239px;
}

#btn_pagetop {
	position: absolute;
	right: 80px;
	top: -91px;
	animation: 2.5s btn_pagetop_anim infinite;
}

@-webkit-keyframes btn_pagetop_anim {
	0%,100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5%);
	}
}
@keyframes btn_pagetop_anim {
	0%,100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5%);
	}
}

#copyright {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	margin-top: -28px; 
}
#copyright img {
	display: block;
	width: 120px;
	margin: auto;
}

#btn_brand {
	text-align: center;
}

#sns {
	margin-top: 55px;
}
#sns ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#sns li+li {
	margin-left: 70px;
}


/* ++++++++++++++++++++++++++++++++++++++++

	PC

++++++++++++++++++++++++++++++++++++++++ */

@media (min-width: 769px) {
	.sp,
	[src$='_sp.jpg'],
	[src$='_sp.png'] {
		display: none !important;
	}

	#container {
		min-width: 1100px;
	}
	#container a {
		display: inline-block;
		transition: .2s opacity;
	}
	#container a:hover {
		opacity: .7;
	}

	h1 img {
		position: relative;
		left: 50%;
		max-width: none;
		margin-left: -640px;
	}

	#yosistamp_map h2,
	#yosistamp_map h2+div {
		width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}

	#yosistamp_map .matrix,
	#yosistamp_map .list ul {
		width: 988px;
		margin: auto;
	}

	#yosistamp_map .list ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30px;
	}
	#yosistamp_map .list li {
		width: 468px;
	}
	#yosistamp_map .list li:nth-child(n+3) {
		margin-top: 30px;
	}
	#yosistamp_map .list li a {
		height: 240px;
	}
}



/* ++++++++++++++++++++++++++++++++++++++++

	SP

++++++++++++++++++++++++++++++++++++++++ */

@media only screen and (max-width: 769px) {
	.pc,
	[src$='_pc.jpg'],
	[src$='_pc.png'] {
		display: none !important;
	}

	#yosistamp_title .deco01 {
		top: -.465%;
		width: 45.73%;
	}

	#yosistamp_title .deco02 {
		right: 0;
		top: 15.25%;
		width: 27.73%;
	}

	#yosistamp_title .deco03 {
		top: 78.69%;
		width: 27.2%;
	}

	#yosistamp_title .deco04 {
		right: 1.46%;
		top: 81.67%;
		width: 29.06%;
	}

	#yosistamp_map {
		padding: 4.4% 0 21.6%;
	}

	#yosistamp_map h2+div {
		margin: 2.8% 6.93% 0;
		padding: 4% 4.4% 6.8%;
		border-radius: 10px;
	}

	#yosistamp_map .matrix .matrix01 {
		left: 11.72%;
		top: -3.94%;
		width: 27.58%;
	}

	#yosistamp_map .matrix .matrix02 {
		right: -.86%;
		top: -2.57%;
		width: 20.34%;
	}

	#yosistamp_map .matrix .matrix03 {
		left: 25.34%;
		top: 9.55%;
		width: 29.31%;
	}

	#yosistamp_map .matrix .matrix04 {
		right: 19.65%;
		top: 4.85%;
		width: 20.51%;
	}

	#yosistamp_map .matrix .matrix05 {
		left: 3.27%;
		top: 20.03%;
		width: 20.34%;
	}

	#yosistamp_map .matrix .matrix06 {
		left: 1.55%;
		top: 52.8%;
		width: 20.34%;
	}

	#yosistamp_map .matrix .matrix07 {
		right: 27.24%;
		top: 27.46%;
		width: 20.34%;
	}

	#yosistamp_map .matrix .matrix08 {
		right: 6.55%;
		top: 56.75%;
		width: 20.34%;
	}

	#yosistamp_map .matrix .matrix09 {
		left: 26.89%;
		top: 50.53%;
		width: 20.34%;
	}

	#yosistamp_map .matrix .matrix10 {
		left: 18.96%;
		top: 69.8%;
		width: 20.34%;
	}

	#yosistamp_map .matrix .matrix11 {
		left: -.86%;
		top: 77.54%;
		width: 20.51%;
	}

	#yosistamp_map .matrix .matrix12 {
		right: 22.93%;
		top: 75.87%;
		width: 20.34%;
	}

	#yosistamp_map .list {
		margin-top: 6.89%;
	}
	#yosistamp_map .list h3 img {
		width: 78.1%;
	}
	#yosistamp_map .list ul {
		margin-top: -1.2%;
	}
	#yosistamp_map .list li+li {
		margin-top: 8.62%;
	}
	#yosistamp_map .list li a {
		padding-top: 50.86%;
	}

	#yosistamp_footer {
		padding: 10.8% 0 6.8%;
		background-size: 100%;
	}

	#yosistamp_footer .deco01 {
		left: 0;
		top: 0;
		width: 26.8%;
		margin-top: -24.8%;
	}

	#yosistamp_footer .deco02 {
		right: 0;
		top: 0;
		width: 25.2%;
		margin-top: -38.4%;
	}

	#btn_pagetop {
		right: 6.4%;
		top: 0;
		width: 11.2%;
		margin-top: -13.6%;
	}

	#copyright {
		margin-top: -11.2%; 
	}
	#copyright img {
		width: 19.2%;
	}

	#btn_brand img {
		width: 60.4%;
	}

	#sns {
		margin-top: 6%;
	}
	#sns li {
		width: 8%;
	}
	#sns li+li {
		margin-left: 7.6%;
	}
}