@charset "utf-8";

/* Base */
html {
	-webkit-text-size-adjust: none;
	overflow-y: scroll;
}
body {
	background: url(../images/common/background01.png) repeat center top;
	font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3";
	font-size: 14px;
	line-height: 1.4;
	margin: 0px;
	padding: 0px;
	overflow: hidden; /* shuffle.js用の調整 */
}
ol,ul {
	list-style: none;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
#wrap {
}




/* header */
header {
	width: 800px;
	margin: 0 auto;
}
header .logo01 {
	text-align: left;
	padding-top: 15px;
	padding-bottom: 5px;
}
header .logo01 h1 {
	background: url(../images/common/logo01.png) no-repeat 0px 0px;
	width: 610px;
	height: 75px;
}
header .logo01 h1 a {
	width: 610px;
	height: 75px;
	display: block;
}
header .logo01 h1 img {
	width: 100%;
}
/* header max-width:768px */
@media only screen and (max-width:768px){
	header {
		width: auto;
		padding-right: 50px;
	}
	header .logo01 {
		padding-top: 10px;
		padding-bottom: 5px;
	}
	header .logo01 h1 {
		background-image: none;
		width: 70%;
		height: auto;
		margin: 0 auto;
	}
	header .logo01 h1 a {
		width: auto;
		height: auto;
	}
}




/* mainnavArea01 */
#mainnavArea01 {
	width: 800px;
	margin: 0 auto;
}
#mainnavArea01 ul.mainnav01 {
	padding-bottom: 15px;
}
#mainnavArea01 ul.mainnav01 li {
	text-align: center;
	width: 16%;
	float: left;
	overflow: hidden;
}
#mainnavArea01 ul.mainnav01 li img {
	width: 100%;
}
#mainnavArea01 ul.mainnav01 li a {
}
#mainnavArea01 ul.mainnav01 li a:hover {
}
/* mainnavArea01 max-width:768px */
@media only screen and (max-width:768px){
	#mainnavArea01 {
		width: 100%;
		position: fixed;
		top: 0px;
		z-index: 1000;
	}
	#mainnavArea01 ul.mainnav01 {
		background: rgba(129, 191, 255, 0.7);
		padding-bottom: 10px;
	}
	#mainnavArea01 ul.mainnav01 li {
		float: none;
		width: 40%;
		margin: 0 auto;
	}
	#mainnavArea01 ul.mainnav01 li img {
		width: 80%;
	}
}




/* footer */
footer {
	background-color: #458aff;
	margin: 0 auto;
	clear: both;
	position: relative;
}
footer .cnts01 {
	color: #ffffff;
	padding: 10px;
}
footer .copyright01 {
	text-align: center;
	font-size: 12px;
}




/* footer floatingbox01 */
footer #floatingbox01 {
	text-align: center;
	width: 90px;
	position: fixed;
	top: 25%;
	right: 15px;
	z-index: 900;
}
footer #floatingbox01 #floatingbox01_inner {
}
footer #floatingbox01 #floatingbox01_inner img {
	width: 100%;
}
footer #floatingbox01 #floatingbox01_inner .floatingbox_balloon01 {
	width: 85px;
	margin: 0 auto;
}
footer #floatingbox01 #floatingbox01_inner .floatingbox_img01 {
	width: 58px;
	margin: 0 auto;
}
footer #floatingbox01 #floatingbox01_inner .floatingbox_icon01 {
	width: 48px;
	margin: 0 auto;
	padding-bottom: 2px;
}
footer #floatingbox01 #floatingbox01_inner .floatingbox_icon02 {
	width: 48px;
	margin: 0 auto;
	padding-bottom: 2px;
}
footer #floatingbox01 #floatingbox01_inner .floatingbox_txt01 {
	width: 75px;
	margin: 0 auto;
	padding-bottom: 20px;
}
footer #floatingbox01 #floatingbox01_inner .floatingbox_balloon02 {
	width: 85px;
	margin: 0 auto;
	padding-bottom: 2px;
}
footer #floatingbox01 #floatingbox01_inner .floatingbox_img02 {
	width: 56px;
	margin: 0 auto;
	padding-bottom: 2px;
}
footer #floatingbox01 #floatingbox01_inner .floatingbox_txt02 {
	width: 75px;
	margin: 0 auto;
}
/* footer floatingbox01 max-width:768px */
@media only screen and (max-width:768px){
	footer #floatingbox01 {
		width: auto;
		position: absolute;
		top: -57px;
		left: 15px;
	}
	footer #floatingbox01 #floatingbox01_inner {
		text-align: left;
		width: 280px;
		height: 60px;
		margin: 0 auto;
		position: relative;
	}
	footer #floatingbox01 #floatingbox01_inner .floatingbox_balloon01 {
		width: 59px;
		position: absolute;
		top: 0px;
		left: 0px;
	}
	footer #floatingbox01 #floatingbox01_inner .floatingbox_img01 {
		width: 40px;
		position: absolute;
		top: 3px;
		left: 60px;
	}
	footer #floatingbox01 #floatingbox01_inner .floatingbox_icon01 {
		width: 33px;
		position: absolute;
		top: 12px;
		left: 101px;
	}
	footer #floatingbox01 #floatingbox01_inner .floatingbox_icon02 {
		width: 33px;
		position: absolute;
		top: 12px;
		left: 139px;
	}
	footer #floatingbox01 #floatingbox01_inner .floatingbox_txt01 {
		width: 52px;
		position: absolute;
		top: 38px;
		left: 5px;
	}
	footer #floatingbox01 #floatingbox01_inner .floatingbox_balloon02 {
		width: 59px;
		position: absolute;
		top: 0px;
		left: 220px;
	}
	footer #floatingbox01 #floatingbox01_inner .floatingbox_img02 {
		width: 39px;
		position: absolute;
		top: 9px;
		left: 178px;
	}
	footer #floatingbox01 #floatingbox01_inner .floatingbox_txt02 {
		width: 52px;
		position: absolute;
		top: 38px;
		left: 223px;
	}
}




/* upbtn01 */
#upbtn01 {
	width: 110px;
	height: 140px;
	position: fixed;
	bottom: 95px;
	left: 15px;
	display: none;
	z-index: 1000;
}
#upbtn01 #upbtn01_inner {
	position: relative;
}
#upbtn01 #upbtn01_inner .upbtn01_img01 {
	width: 110px;
	height: 140px;
}
#upbtn01 #upbtn01_inner .upbtn01_img01 img {
	width: 100%;
}
#upbtn01 #upbtn01_inner .upbtn01_img02 {
	width: 60px;
	height: 60px;
	position: absolute;
	top: 126px;
	left: 38px;
}
#upbtn01 #upbtn01_inner .upbtn01_img02 img {
	width: 100%;
}
#upbtn01 #upbtn01_inner .rotate01 {
	animation: rotate01 1.0s ease-in-out 0.0s infinite alternate;
	transform-origin: 18px 0px;
}
@keyframes rotate01 {
	0% {
	transform: rotateZ(-5deg);
	}
	100% {
	transform: rotateZ(15deg);
	}
}
/* upbtn01 max-width:768px */
@media only screen and (max-width:768px){
	#upbtn01 {
		width: 88px;
		height: 112px;
		position: fixed;
		bottom: 45px;
		left: 5px;
	}
	#upbtn01 #upbtn01_inner .upbtn01_img01 {
		width: 88px;
		height: 112px;
	}
	#upbtn01 #upbtn01_inner .upbtn01_img02 {
		width: 48px;
		height: 48px;
		position: absolute;
		top: 100px;
		left: 30px;
	}
}

.pagination {
	display: block;
	margin: 0 auto;
	padding-top: 30px;
	text-align: center;
}
.pagination__container {
	text-align: center;
	font-size: 0;
}
.pagination__item {
	display: inline-block;
	overflow: hidden;
	position: relative;
	width: 40px;
	height: 40px;
	margin: 0 5px;
	line-height: 40px;
	text-decoration: none;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	white-space: nowrap;
	color: #333;
	background-color: #fff;
	border-radius: 5px;
	font-weight: bold;
	font-size: 18px;
}
a.pagination__item:hover,
a.pagination__item:focus {
	opacity: 0.6;
}
.pagination__item--current {
	color: #fff;
	background-color: #333;
}
.pagination__item--prev,
.pagination__item--next {
	font-size: 0;
}
.pagination__item--prev::before,
.pagination__item--next::before,
.pagination__item--prev::after,
.pagination__item--next::after {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	right: 0;
	bottom: 0;
	left: 0;
	width: 15px;
	height: 4px;
	background-color: #333;
	border-radius: 4px;
	margin: auto;
}
.pagination__item--prev::before {
	-webkit-transform-origin: 0 50%;
	    -ms-transform-origin: 0 50%;
	        transform-origin: 0 50%;
	-webkit-transform: translate(1px, 1px) rotate(-45deg);
	    -ms-transform: translate(1px, 1px) rotate(-45deg);
	        transform: translate(1px, 1px) rotate(-45deg);
}
.pagination__item--prev::after {
	-webkit-transform-origin: 0 50%;
	    -ms-transform-origin: 0 50%;
	        transform-origin: 0 50%;
	-webkit-transform: translate(1px, -1px) rotate(45deg);
	    -ms-transform: translate(1px, -1px) rotate(45deg);
	        transform: translate(1px, -1px) rotate(45deg);
}
.pagination__item--next::before {
	-webkit-transform-origin: 100% 50%;
	    -ms-transform-origin: 100% 50%;
	        transform-origin: 100% 50%;
	-webkit-transform: translate(-1px, 1px) rotate(45deg);
	    -ms-transform: translate(-1px, 1px) rotate(45deg);
	        transform: translate(-1px, 1px) rotate(45deg);
}
.pagination__item--next::after {
	-webkit-transform-origin: 100% 50%;
	    -ms-transform-origin: 100% 50%;
	        transform-origin: 100% 50%;
	-webkit-transform: translate(-1px, -1px) rotate(-45deg);
	    -ms-transform: translate(-1px, -1px) rotate(-45deg);
	        transform: translate(-1px, -1px) rotate(-45deg);
}

.fav-button {
	position: relative;
	width: 40px;
	height: 40px;
	color: transparent;
	background-color: transparent;
	background-image: url(../images/common/fav-star.svg);
	background-size: 40px 80px;
	background-position: 0 0;
	background-repeat: no-repeat;
	border: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	cursor: pointer;
	-webkit-transform-origin: 50% 50%;
	    -ms-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
}
.fav-button:hover,
.fav-button:focus {
	opacity: 0.8;
	-webkit-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-webkit-transition-duration: 0.1s;
	     -o-transition-duration: 0.1s;
	        transition-duration: 0.1s;
	-webkit-transition-timing-function: ease-out;
	     -o-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
}
.fav-button::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 40px;
	margin: auto;
	border-radius: 40px;
	background-color: rgba(255, 244, 0, 1);
	-webkit-transform-origin: 50% 50%;
	    -ms-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	-webkit-transform: scale(0);
	    -ms-transform: scale(0);
	        transform: scale(0);
}
.fav-button.is-active {
	background-position: 0 -40px;
}
.fav-button.is-active.is-animating {
	-webkit-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-name: fav-star-to-active;
	        animation-name: fav-star-to-active;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
}
.fav-button.is-active.is-animating::after {
	-webkit-animation-duration: 0.3s;
	        animation-duration: 0.3s;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-name: fav-halo-to-active;
	        animation-name: fav-halo-to-active;
	-webkit-animation-timing-function: ease-out;
	        animation-timing-function: ease-out;
}
.fav-button.is-animating {
	-webkit-animation-duration: 0.3s;
	        animation-duration: 0.3s;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-name: fav-star-to-deactive;
	        animation-name: fav-star-to-deactive;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
}
@-webkit-keyframes fav-star-to-active {
	0% { -webkit-transform: scale(0.7); transform: scale(0.7); }
	10% { -webkit-transform: scale(1.4); transform: scale(1.4); }
	20% { -webkit-transform: scale(1); transform: scale(1); }
	30% { -webkit-transform: scale(1.2); transform: scale(1.2); }
	40% { -webkit-transform: scale(1); transform: scale(1); }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes fav-star-to-active {
	0% { -webkit-transform: scale(0.7); transform: scale(0.7); }
	10% { -webkit-transform: scale(1.4); transform: scale(1.4); }
	20% { -webkit-transform: scale(1); transform: scale(1); }
	30% { -webkit-transform: scale(1.2); transform: scale(1.2); }
	40% { -webkit-transform: scale(1); transform: scale(1); }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes fav-halo-to-active {
	0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; }
	100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; }
}
@keyframes fav-halo-to-active {
	0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; }
	100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; }
}
@-webkit-keyframes fav-star-to-deactive {
	0% { -webkit-transform: scale(1); transform: scale(1); }
	50% { -webkit-transform: scale(0.9); transform: scale(0.9); }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes fav-star-to-deactive {
	0% { -webkit-transform: scale(1); transform: scale(1); }
	50% { -webkit-transform: scale(0.9); transform: scale(0.9); }
	100% { -webkit-transform: scale(1); transform: scale(1); }
}

/* Common */
.clear {
	clear: both;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.nodisp {
	display: none;
}
.left {
	text-align: left;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.bold {
	font-weight: bold;
}
img.w100 {
	width: 100%;
}
a:hover .hover01 {
	filter: alpha(opacity=70);
	opacity: 0.70;
	-moz-opacity: 0.70;
}
.corner01 {
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
/* Common max-width:768px */
@media only screen and (max-width:768px){
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
}