@charset "utf-8";

.panel {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #D34467;
}

.panel__item {
	position: relative;
	width: 25%;
	padding: 84px 20px 40px;
	background-color: #fff;
	border: 1px solid #D34467;
	cursor: pointer;
	transition: 0.3s all;
}
.panel__item.is_active {
	background: #D34467;
}
.panel__item--01 {
	background: url(../img/ico_menu01.png) no-repeat 50% 20px;
}
.panel__item--02 {
	background: url(../img/ico_menu02.png) no-repeat 50% 20px;
}
.panel__item--03 {
	background: url(../img/ico_menu03.png) no-repeat 50% 20px;
}
.panel__item--04 {
	background: url(../img/ico_menu04.png) no-repeat 50% 20px;
}
.panel__item--05 {
	background: url(../img/ico_menu05.png) no-repeat 50% 20px;
}
.panel__item--06 {
	background: url(../img/ico_menu06.png) no-repeat 50% 20px;
}
.panel__item--07 {
	background: url(../img/ico_menu07.png) no-repeat 50% 20px;
}
.panel__item--08 {
	background: url(../img/ico_menu08.png) no-repeat 50% 20px;
}
.panel__item--01.is_active {
	background: #D34467 url(../img/ico_menu01_white.png) no-repeat 50% 20px;
}
.panel__item--02.is_active {
	background: #D34467 url(../img/ico_menu02_white.png) no-repeat 50% 20px;
}
.panel__item--03.is_active {
	background: #D34467 url(../img/ico_menu03_white.png) no-repeat 50% 20px;
}
.panel__item--04.is_active {
	background: #D34467 url(../img/ico_menu04_white.png) no-repeat 50% 20px;
}
.panel__item--05.is_active {
	background: #D34467 url(../img/ico_menu05_white.png) no-repeat 50% 20px;
}
.panel__item--06.is_active {
	background: #D34467 url(../img/ico_menu06_white.png) no-repeat 50% 20px;
}
.panel__item--07.is_active {
	background: #D34467 url(../img/ico_menu07_white.png) no-repeat 50% 20px;
}
.panel__item--08.is_active {
	background: #D34467 url(../img/ico_menu08_white.png) no-repeat 50% 20px;
}

.panel__item::before, .panel__item::after {
	position: absolute;
	content: "";
	bottom: 15px;
}

.panel__item::before {
	right: 18px;
	width: 2px;
	height: 15px;
	background: #D34467;
	/* background: url(../img/icon_arrow.png) no-repeat 95% 95%; */
}

.panel__item::after {
	right: 15px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #D34467;
	border-right: 2px solid #D34467;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.panel__item.is_active::before {
	background: #fff;
}
.panel__item.is_active::after {
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.panel__item.is_active::after {
	bottom: 23px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.panel__img {
	text-align: center;
}
.panel__title {
	margin-top: 10px;
	text-align: center;
	font-size: 125%;
	font-weight: bold;
	color: #D34467;
}
.panel__item.is_active .panel__title {
	color: #fff;
}

@media screen and (min-width: 768px) {
	.panel__item:hover::before {
		background: #fff;
	}
	.panel__item:hover::after {
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
	}
	.panel__item--01:hover {
		background: #D34467 url(../img/ico_menu01_white.png) no-repeat 50% 20px;
	}
	.panel__item--02:hover {
		background: #D34467 url(../img/ico_menu02_white.png) no-repeat 50% 20px;
	}
	.panel__item--03:hover {
		background: #D34467 url(../img/ico_menu03_white.png) no-repeat 50% 20px;
	}
	.panel__item--04:hover {
		background: #D34467 url(../img/ico_menu04_white.png) no-repeat 50% 20px;
	}
	.panel__item--05:hover {
		background: #D34467 url(../img/ico_menu05_white.png) no-repeat 50% 20px;
	}
	.panel__item--06:hover {
		background: #D34467 url(../img/ico_menu06_white.png) no-repeat 50% 20px;
	}
	.panel__item--07:hover {
		background: #D34467 url(../img/ico_menu07_white.png) no-repeat 50% 20px;
	}
	.panel__item--08:hover {
		background: #D34467 url(../img/ico_menu08_white.png) no-repeat 50% 20px;
	}
	.panel__item:hover .panel__title {
		color: #fff;
	}
}

@media screen and (max-width: 767px) {
	.panel__item {
		width: 50%;
		padding: 79px 15px 15px;
	}
	/* .panel__item.is_active {
		background: url(../img/icon_arrow_hover_sp.png) no-repeat 95% 95%;
	} */
	.panel__item--01, .panel__item--02, .panel__item--03, .panel__item--04, .panel__item--05, .panel__item--06, .panel__item--07, .panel__item--08, .panel__item--01.is_active, .panel__item--02.is_active, .panel__item--03.is_active, .panel__item--04.is_active, .panel__item--05.is_active, .panel__item--06.is_active, .panel__item--07.is_active, .panel__item--08.is_active {
		background-position: 50% 15px;
	}
	.panel__title {
		font-size: 112.5%;
		font-size: 100%;
		font-weight: bold;
		color: #D34467;
	}
}

.panel__body {
	display: none;
	width: 100%;
	padding: 50px 30px;
	background-color: #fff;
	border: 1px solid #D34467;
}
.panel__body.is_active {
	display: block;
}
.panel__bodyInner {
	display: none;
}
.panel__bodyInner.is_active {
	display: block;
}