@charset "utf-8";

/* ----------------------------------------
	福島県ポケモンコラボ
	http://www.tif.ne.jp/pokemon/

	共通css
	common.css

	create 20190131- T.Y
---------------------------------------- */

/* ----- import ----- */
@import url("import_html5reset-1.6.1.css") all;	/* リセット */

/* ----- 共通 ----- */
html {
	font-size: 62.5%;
}
body {
	font-size: 1.6rem;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
	background: #FFFFFF;
	color: #333333;
	-webkit-text-size-adjust: 100%;
}
*, *::before, *::after {
	box-sizing: border-box;
}
a:hover {
	color: #FF3300;
}
.underConstruction {
	width: 100%;
	padding: 200px 0;
}
.nodata {
	width: 100%;
	padding: 50px 0px;
	line-height: 200%;
}
.textColor_red {
	color: #f00;
}
.new {
	color: #f00;
	font-weight: bold;
}

/* ------------------------------
	回り込み解除
------------------------------ */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

.clearboth {	clear: both; }



/* ------------------------------
	アイコン
------------------------------ */
.icon_img {
	vertical-align: middle;
	margin: 0px 0px 0px 5px;
	padding: 0px;
	border: 0px;
}
.tipped {color: #ccc;}



/* ------------------------------
	ローディングぐるぐる
------------------------------ */
.loading {
	margin: 0px auto;
	padding: 55px 0;
	width: 32px;
	background: url(../img/loading.gif) no-repeat 0px 40px;
	height: 32px;
}


/* ------------------------------
	オリジナルアニメ
------------------------------ */
@keyframes swingP { 
	25% { transform: rotate(5deg); }
	75% { transform: rotate(-5deg); }
	100% { transform: rotate(-0.8deg); }
}


/* ---------------------------------------------------------
	約560px未満の画面向けスタイル モバイルファースト
--------------------------------------------------------- */
body {
	background-image: url(../img/bg40_pink.png);
	background-attachment: fixed;
}
main .btnTop {
	width: 100px;
	height: 100px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 99;
}
main .btnTop a {
	position: relative;
	width: 100px;
	height: 100px;
	background-color: rgba(0,0,0,0.25);
	border-radius: 50%;
	display: block;
}
main .btnTop a > i {
	position: absolute;
	top: 3px;
	left: calc(50% - 10px);
	font-size: 20px;
	color: #666;
}
main .btnTop a > img {
	position: absolute;
	width: 70%;
	height: 70%;
	bottom: 5px;
	left: 15%;
	animation: swingP 2s cubic-bezier(0, -0.3, 0, 0.3) infinite;
	transform-origin: bottom center;
}



/* ヘッダ部
-------------------------------------------------- */
header {
	width: 100%;
}



/* ナビ部
-------------------------------------------------- */
navi {
	padding: 30px 0;
	display: block;
}
navi ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
navi ul li {
	width: calc(50% - 10px);
	margin-bottom: 10px;
	list-style: none;
}
navi ul li a {
	width: 100%;
	margin: 0 0 5px;
	padding: 5px 0;
	background-color: #fff;
	border-radius: 10px;
	display: block;
		cursor: pointer;
}
navi ul li.menu01 a {
	background-image: url(../img/bg_menu02.png);
	background-size: cover;
	border: 1px solid #11928a;
}
navi ul li.menu02 a {
	background-color: rgba(240,196,209,0.5);
	padding: 0px;
}
navi ul li.menu03 a {
	background-image: url(../img/kaoBg.png);
	background-size: cover;
}
navi ul li.menu04 a {
	background-image: url(../img/momoBg.png);
	background-size: cover;
	border: 1px solid #f1bfcf;
}
navi ul li.menu05 a {
	background-color: rgba(240,196,209,0.5);
	padding: 0px;
}
navi ul li.menu01 {	order: 0; }
navi ul li.menu02 {	order: 1; }
navi ul li.menu03 {	order: 2; }
navi ul li.menu04 {	order: 3; }
navi ul li.menu05 {	order: 4; }
navi ul li a > span > span {
	width: 100%;
	padding-bottom: 56%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
}
navi ul li.menu01 a > span {
	animation: swingP 2s cubic-bezier(0, -0.3, 0, 0.3) infinite;
	transform-origin: bottom center;
	display: block;
}
navi ul li.menu02 a > span > span {
	background-size: cover;
	padding-bottom: 62%;
	border-radius: 10px;
}
navi ul li.menu05 a > span > span {
	background-size: cover;
	padding-bottom: 62%;
	border-radius: 10px;
}
navi ul li > span {
	display: block;
	font-size: 1.2rem;
}

.snsBlock {
	margin: 30px 0 0 0;
	display: flex;
	list-style:none;
}
.snsBlock li {
	margin-right: 5px;
}



/* フッタ部
-------------------------------------------------- */
footer {
	width: 100%;
	background-color: #fff;
}

footer .footBlock01 {
	padding: 50px 0 130px;
	position: relative;
}
footer .footBlock01 .luckyLeft {
	position: absolute;
	right: calc(50% - 138px);
	bottom: 15px;
	width: 100px;
	animation: wobble 1.3s infinite;
}
footer .footBlock01 .luckyLeft img {
	width: 100%;
}
footer .footBlock01 .luckyRight {
	position: absolute;
	left: calc(50% - 138px);
	bottom: 15px;
	width: 100px;
	animation: wobble 1.3s infinite;
}
footer .footBlock01 .luckyRight img {
	width: 100%;
}
footer .footBlock01 p {
	margin-bottom: 15px;
}
footer .footBlock01 p img {
	max-width: 300px;
}
footer .footBlock01 p.banner{
	margin-bottom: 0px;
}
footer .footBlock01 p.banner img {
}
footer .footBlock02 {
	padding: 10px 0 90px;
	background-color: #F8E0E8;
	position: relative;
}
footer .footBlock02 .credit {
	text-align: left;
	font-size: 1.2rem;
	line-height: 1.6;
	padding: 0 15px 30px;
}
footer .footBlock02 .bannerP {
	font-size: 1.4rem;
}
footer .footBlock02 .bannerP a {
	display: block;
	margin: 5px 0 10px;
}
footer .footBlock02 .bannerP img {
	width: calc(100% - 15px);
	max-width: 320px;
}
footer .footBlock02 .banner {
/*
	position: absolute;
	bottom: 5px;
	left: 5px;
*/
}
footer copyright {
	font-size: 1.2rem;
	padding: 15px 0;
	display: block;
}




@media screen and (min-width: 768px){
	/*	約768px以上の画面向けスタイル（タブレット） */

	body {
		background-image: url(../img/bg80_pink.png);
	}
	header {
	}
	navi {
		padding: 30px 0 10px;
		display: block;
	}
	navi ul li {
		width: calc(25% - 8px);
		font-size: 1.6px;
	}
	navi ul li.menu01 {	order: 0; }
	navi ul li.menu02 {	order: 3; }
	navi ul li.menu03 {	order: 1; }
	navi ul li.menu04 {	order: 2; }
	navi ul li.menu05 {	order: 4; }

	navi ul li.menu02 a > span {
		padding-bottom: 56%;
	}
	navi ul li.menu02 a > span > span {
		padding-bottom: 62%;
	}
	navi ul li.menu03 a > span > span {
		padding-bottom: 56%;
		background-position: center;
	}
	navi ul li.menu05 a > span {
		padding-bottom: 56%;
	}
	navi ul li.menu05 a > span > span {
		padding-bottom: 62%;
	}

	footer .footBlock01 {
		padding: 80px 0 80px;
	}
	footer .footBlock01 .luckyLeft {
		right: calc(50% - 300px);
		top: calc(50% - 50px);
		bottom: auto;
		width: 100px;
	}
	footer .footBlock01 .luckyRight {
		Left: calc(50% - 300px);
		top: calc(50% - 50px);
		bottom: auto;
		width: 100px;
	}
	footer .footBlock02 .credit {
		text-align: center;
	}
}



@media screen and (min-width: 980px){
	/*	約980px以上の画面向けスタイル（PC標準） */

	html {
		font-size: calc(0.625rem + ((1vw - 9.8px) * 0.5333333));
	}
	body {
		background-image: url(../img/bg100_pink.png);
	}
	header {
	}
	navi {
		padding: 50px 0 30px;
		display: block;
	}
	navi ul {
		margin: 0 calc(50% - 480px);
	}
	navi ul li {
		font-size: 2rem;
	}
	navi ul li.menu02 a > span {
		padding-bottom: 56%;
	}
	navi ul li.menu05 a > span {
		padding-bottom: 56%;
	}
	navi ul li.menu01 a:hover > span
	,navi ul li.menu03 a:hover > span
	,navi ul li.menu04 a:hover > span {
		animation: heartBeat 1s 2;
		transform-origin: bottom center;
		display: block;
	}
	navi ul li.menu02 a > span > span {
		padding-bottom: 60.7%;
	}
	navi ul li.menu03 a > span > span {
		padding-bottom: 56%;
		background-position: center;
	}
	footer .footBlock02 .banner {
		left: calc(50% - 480px);
	}
	footer .footBlock02 .illust {
		right: calc(50% - 480px);
	}
}



@media screen and (min-width: 1280px){
	/*	約1280px以上の画面向けスタイル（PC大画面） */

	html {
		font-size: 72.5%;
	}
	navi ul {
		margin: 0 calc(50% - 620px);
	}
	navi ul li.menu02 a > span {
		padding-bottom: 59.3%;
	}
	navi ul li.menu05 a > span {
		padding-bottom: 59.3%;
	}
	footer .footBlock02 .banner {
		left: calc(50% - 620px);
	}
	footer .footBlock02 .illust {
		right: calc(50% - 620px);
	}
}