@charset "utf-8";
/* CSS Document */

body {
	background:#ff99cc;
	margin:0;
}
img {
	width:100%;
}
ul {
	list-style: none;
	padding:0;
	margin:0;
}
a {
	text-decoration: none;
}
div#background_box {
	background-image: url(img/background_img.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}
/* header↓ */
header a {
	color: #FFF;
}
header li:hover {
	opacity:0.5;
}
header {
	background: #3c231a;
	width:100%;
	text-align:center;
}
header li:nth-child(1) {
	background:#8f82bc;
}
header li:nth-child(2) {
	background: #8957a1;
}
header li:nth-child(3) {
	background: #fe99ff;
}
header ul {
	display:inline-block;
}
header li {
	float: left;
	padding: 10px;
}
/* header↑ */

/* main↓ */
div#main {
	width: 100%;
	max-width: 1220px;
	padding: 35px 0;
	margin: 0 auto;
	box-sizing: border-box;
}
.top_img {
	clear: both;
}
p.text {
	text-align: center;
	padding: 25px 0;
	margin:0;
	line-height: 1.8;
}
.tiele img {
	width: 500px;
}
.tiele {
	text-align: center;
}
.logo_01 {
	width: 227px;
	position:absolute;
	z-index: 3;
	right:0;
}
.logo_02 {
	width: 200px;
	position: absolute;
	right: 0;
}
.logo {
	position: relative;
	top: -244px;
	left: 6px;
}
.logo_02 {
	width: 150px;
	position: absolute;
	right:0;
	z-index: 5;
	top:141px;
}
.logo_03 {
	animation-name: anim_sc;
}
.animation {
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1.5s;
}
@keyframes anim_sc {
 60% {
 transform: scale(1, 1);
}
 70% {
 transform: scale(1.015, 1.015);
}
 80% {
 transform: scale(1.000, 1.000);
}
 90% {
 transform: scale( 1.100, 1.100);
}
 100% {
 transform: scale(1, 1);
}
}
.page_tiele {
	width: 73%;
	margin: auto;
	position: relative;
}
.page_tiele img {
	position: absolute;
	bottom: 30px;
}
/* main↑ */

/* エリアから探す↓ */
.area label {
	border: solid 9px #FFF;
	width: 160px;
	font-size: 30px;
	height: 160px;
	font-weight: bold;
	cursor:pointer;
	display: inline-table;
}
.area span {
	font-size: 25px;
	font-weight: bold;
	color: #FFF;
	display: table-cell;
	vertical-align: middle;
}
.area {
	padding: 30px 0;
	width:100%;
	display:inline-block;
}
/* areaアニメーション↓ */
.menu-item, .menu-open-button, .menu-open-button_02, .menu-open-button_03, .menu-open-button_04, .menu-open-button_05, .menu-open-button_06, .menu-open-button_07, .menu-open-button_08, .menu-open-button_09, .menu-open-button_10 {
	border-radius: 100%;
	color: #FFFFFF;
	text-align: center;
	transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open, .menu-open_02, .menu-open_03, .menu-open_04, .menu-open_05, .menu-open_06, .menu-open_07, .menu-open_08, .menu-open_09, .menu-open_10 {
	display: none;
}
.menu-open:checked + .menu-open-button, .menu-open_02:checked + .menu-open-button_02, .menu-open_03:checked + .menu-open-button_03, .menu-open_04:checked + .menu-open-button_04, .menu-open_05:checked + .menu-open-button_05, .menu-open_06:checked + .menu-open-button_06, .menu-open_07:checked + .menu-open-button_07, .menu-open_08:checked + .menu-open-button_08, .menu-open_09:checked + .menu-open-button_09, .menu-open_10:checked + .menu-open-button_10 {
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
	-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
	transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item, .menu-open_02:checked ~ .menu-item, .menu-open_03:checked ~ .menu-item, .menu-open_04:checked ~ .menu-item, .menu-open_05:checked ~ .menu-item, .menu-open_06:checked ~ .menu-item, .menu-open_07:checked ~ .menu-item, .menu-open_08:checked ~ .menu-item, .menu-open_09:checked ~ .menu-item, .menu-open_10:checked ~ .menu-item {
 -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
 transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3), .menu-open_02:checked ~ .menu-item:nth-child(3), .menu-open_03:checked ~ .menu-item:nth-child(3), .menu-open_04:checked ~ .menu-item:nth-child(3), .menu-open_05:checked ~ .menu-item:nth-child(3), .menu-open_06:checked ~ .menu-item:nth-child(3), .menu-open_07:checked ~ .menu-item:nth-child(3), .menu-open_08:checked ~ .menu-item:nth-child(3), .menu-open_09:checked ~ .menu-item:nth-child(3), .menu-open_10:checked ~ .menu-item:nth-child(3) {
 transition-duration: 180ms;
 -webkit-transition-duration: 180ms;
 -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
 transform: translate3d(0.08361px, -112.99997px, 0);
}
 .menu-open:checked ~ .menu-item:nth-child(4), .menu-open_02:checked ~ .menu-item:nth-child(4), .menu-open_03:checked ~ .menu-item:nth-child(4), .menu-open_04:checked ~ .menu-item:nth-child(4), .menu-open_05:checked ~ .menu-item:nth-child(4), .menu-open_06:checked ~ .menu-item:nth-child(4), .menu-open_07:checked ~ .menu-item:nth-child(4), .menu-open_08:checked ~ .menu-item:nth-child(4), .menu-open_09:checked ~ .menu-item:nth-child(4), .menu-open_10:checked ~ .menu-item:nth-child(4) {
 transition-duration: 280ms;
 -webkit-transition-duration: 280ms;
 -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
 transform:translate3d(96.9466px, -60.47586px, 0);
}
 .menu-open:checked ~ .menu-item:nth-child(5), .menu-open_02:checked ~ .menu-item:nth-child(5), .menu-open_03:checked ~ .menu-item:nth-child(5), .menu-open_04:checked ~ .menu-item:nth-child(5), .menu-open_05:checked ~ .menu-item:nth-child(5), .menu-open_06:checked ~ .menu-item:nth-child(5), .menu-open_07:checked ~ .menu-item:nth-child(5), .menu-open_08:checked ~ .menu-item:nth-child(5), .menu-open_09:checked ~ .menu-item:nth-child(5), .menu-open_10:checked ~ .menu-item:nth-child(5) {
 transition-duration: 380ms;
 -webkit-transition-duration: 380ms;
 -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
 transform: translate3d(102.9466px, 54.47586px, 0);
}
 .menu-open:checked ~ .menu-item:nth-child(6), .menu-open_02:checked ~ .menu-item:nth-child(6), .menu-open_03:checked ~ .menu-item:nth-child(6), .menu-open_04:checked ~ .menu-item:nth-child(6), .menu-open_05:checked ~ .menu-item:nth-child(6), .menu-open_06:checked ~ .menu-item:nth-child(6), .menu-open_07:checked ~ .menu-item:nth-child(6), .menu-open_08:checked ~ .menu-item:nth-child(6), .menu-open_09:checked ~ .menu-item:nth-child(6), .menu-open_10:checked ~ .menu-item:nth-child(6) {
 transition-duration: 480ms;
 -webkit-transition-duration: 480ms;
 -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
 transform: translate3d(0.08361px, 115.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(7), .menu-open_02:checked ~ .menu-item:nth-child(7), .menu-open_03:checked ~ .menu-item:nth-child(7), .menu-open_04:checked ~ .menu-item:nth-child(7), .menu-open_05:checked ~ .menu-item:nth-child(7), .menu-open_06:checked ~ .menu-item:nth-child(7), .menu-open_07:checked ~ .menu-item:nth-child(7), .menu-open_08:checked ~ .menu-item:nth-child(7), .menu-open_09:checked ~ .menu-item:nth-child(7), .menu-open_10:checked ~ .menu-item:nth-child(7) {
 transition-duration: 680ms;
 -webkit-transition-duration: 680ms;
 -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
 transform: translate3d(-101.86291px, 56.62064px, 0)
}
/* 
 .menu-open:checked ~ .menu-item:nth-child(9), .menu-open_02:checked ~ .menu-item:nth-child(9), .menu-open_03:checked ~ .menu-item:nth-child(9), .menu-open_04:checked ~ .menu-item:nth-child(9), .menu-open_05:checked ~ .menu-item:nth-child(9), .menu-open_06:checked ~ .menu-item:nth-child(9), .menu-open_07:checked ~ .menu-item:nth-child(9), .menu-open_08:checked ~ .menu-item:nth-child(9), .menu-open_09:checked ~ .menu-item:nth-child(9), .menu-open_10:checked ~ .menu-item:nth-child(9) {
 transition-duration: 780ms;
 -webkit-transition-duration: 780ms;
 -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
 transform: translate3d(-0.25084px, -104.9997px, 0);
}
*/
.purple {
	background-color: #a79ad6;
}
.purple:hover {
	background-color:#b6add9;
}
a.menu-item.purple {
	position: absolute;
	width: 75px;
	height: 75px;
	box-sizing: border-box;
	line-height: 77px;
	font-weight: bold;
	left: 85px;
	bottom: 52px;
}
.menu {
	width: calc(100%/5);
	float: left;
	position:relative;
	text-align:center;
}
.menu:nth-child(1), .menu:nth-child(2), .menu:nth-child(3), .menu:nth-child(4), .menu:nth-child(5) {
	margin-bottom: 30px;
}
.menu:nth-child(1) label{background-color:#1556aa; }
.menu:nth-child(2) label{background-color:#0074cc; }
.menu:nth-child(3) label{background-color:#3fb5ff; }
.menu:nth-child(4) label{background-color:#9578bb; }
.menu:nth-child(5) label{background-color:#ff85d0; }
.menu:nth-child(6) label{background-color:#ff643c; }
.menu:nth-child(7) label{background-color:#ffa13d; }
.menu:nth-child(8) label{background-color:#febf00; }
.menu:nth-child(9) label{background-color:#00c087; }
.menu:nth-child(10) label{background-color:#00c0b5; }

a.menu-item.purple {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 1000;
}
.menu input:checked ~ .menu-item.purple {
 height: auto;
 opacity: 1;
}
a.menu-item.purple {
	z-index: 1;
}
.area label:hover {
	opacity: 0.7;
	/*border: solid 9px #8f82bc;
	background:#ffc9e4;*/
}
.area span:hover {
	color:#8f82bc;
}
/* areaアニメーション↑ */
/* エリアから探す↑ */

/* mook・banner・last-text↓ */
.mook_guide ul {
	display:flex;
}
.mook_guide li {
	float: left;
	color: #ff99cc;
	margin-right: 1%;
	display:table-cell;
	position:relative;
	font-weight: bold;
}
.mook_guide li:nth-child(2) {
	background:#fffbbf;
}
.mook_guide li:nth-child(3) {
	background:#ffc8fa;
}
.mook_guide li:nth-child(4) {
	background:#ffdff6;
	margin-right: 0;
}
.mook_guide {
	height: 100%;
	width: 100%;
	padding:30px 0;
}
.banner img {
	box-shadow: 2px 5px 8px #9c6380;
	border-radius: 57px;
}
.banner:hover {
	opacity: 0.9;
}
.mook_guide p {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin:0;
}
.last_text02 {
	width: 100%;
	background: #FFF;
	padding: 15px;
}
.last_text02 p {
	width: 60%;
	margin: auto;
	color: #f9c;
	font-weight: bold;
}
.last_text01 {
	width: 320px;
}
.last_text {
	position: relative;
}
.last_text01 {
	width: 320px;
	position: absolute;
	bottom: -15px;
	left: -60px;
}
.mook_guide a img:hover {
	opacity:0.8;
}
/* mook・banner・last-text↑ */

/* footer↓ */
footer {
	background: #3c231a;
	color: #FFF;
	text-align: center;
}
footer p {
	margin: 0;
	padding: 10px;
}
/* footer↑ */