@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : chart.css
Description :
===================================================================== */


/* =====================================================================
*    chart
* =================================================================== */

.chart {
	background-color: #f29473;
}

.chart::before {
	content: '';
	background: url(../images/common/bg_pattern3.png) center top 22%;
	background-size: calc(115 / 750 * 100%);
	width: 100%;
	padding-top: calc(350/ 750 * 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.chart::after {
	content: '';
	background: rgba(242, 148, 115, 0.9);
	width: 100%;
	padding-top: calc(350/ 750 * 100%);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.chart .inner {
	padding: calc(120 / 750 * 100%) 0 calc(230 / 750 * 100%);
}

.chart .inner::before {
	content: "";
	display: block;
	width: calc(40 / 750 * 100%);
	padding-top: calc(320 / 750 * 100%);
	background-image: repeating-linear-gradient(0deg, transparent, transparent calc(13 / 750 * 100vw), #f6ec7f calc(13 / 750 * 100vw), #f6ec7f calc(20 / 750 * 100vw));
	-webkit-transform: skewY(40deg);
	transform: skewY(40deg);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	margin: calc(20 / 750 * 100%) 0 0;
}

.chart .sec_contents {
	z-index: 2;
}

.chart .sec_contents::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/chara/img_chara28.png) no-repeat center;
	background-size: contain;
	width: calc(182 / 630 * 100%);
	padding-top: calc(263 / 630 * 100%);
	margin: 0 0 calc(-265 / 630 * 100%) calc(-50 / 630 * 100%);
}

.chart .sec_ttl {
	margin-bottom: calc(100 / 630 * 100%);
}

.chart_box {
	width: calc(750 / 630 * 100%);
	margin-left: calc(-60 / 630 * 100%);
}

.chart_img::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: url(../images/chara/img_chara27.png) no-repeat center;
	background-size: 100% auto;
	width: calc(189 / 750 * 100%);
	padding-top: calc(194 / 750 * 100%);
	z-index: 3;
	margin-top: calc(-110 / 750 * 100%);
}

.chart_btn {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.chart_btn li {
	position: absolute;
	top: 0;
	left: 0;
}

.chart_btn_img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.chart_btn_frame {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.chart_note {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 0 calc(4 / 1000 * 100%) calc(30 / 1000 * 100%);
}

.chart_id_01 {
	width: calc(242 / 1000* 100%);
	padding-top: calc(242 / 1000* 100%);
	margin: calc(103 / 1000* 100%) 0 0 calc(398 / 1000* 100%);
}

.chart_id_02 {
	width: calc(212 / 1000* 100%);
	padding-top: calc(212 / 1000* 100%);
	margin: calc(135 / 1000* 100%) 0 0 calc(85 / 1000* 100%);
}

.chart_id_03 {
	width: calc(212 / 1000* 100%);
	padding-top: calc(220 / 1000* 100%);
	margin: calc(130 / 1000 * 100%) 0 0 calc(756 / 1000 * 100%);
}

.chart_id_04 {
	width: calc(212 / 1000* 100%);
	padding-top: calc(220 / 1000* 100%);
	margin: calc(437 / 1000 * 100%) 0 0 calc(756 / 1000* 100%);
}

.chart_id_05 {
	width: calc(130 / 1000* 100%);
	padding-top: calc(137 / 1000* 100%);
    margin: calc(495 / 1000* 100%) 0 0 calc(226 / 1000* 100%);
}

.chart_id_06 {
	width: calc(130 / 1000* 100%);
	padding-top: calc(137 / 1000* 100%);
    margin: calc(495 / 1000* 100%) 0 0 calc(366 / 1000* 100%);
}

.chart_id_07 {
	width: calc(130 / 1000* 100%);
	padding-top: calc(137 / 1000* 100%);
    margin: calc(495 / 1000 * 100%) 0 0 calc(507 / 1000 * 100%);
}

.chart_id_08 {
	width: calc(130 / 1000* 100%);
	padding-top: calc(137 / 1000* 100%);
	margin: calc(462 / 1000 * 100%) 0 0 calc(55 / 1000* 100%);
}

.chart_id_09 {
	width: calc(130 / 1000* 100%);
	padding-top: calc(130 / 1000* 100%);
	margin: calc(32 / 1000 * 100%) 0 0 calc(669 / 1000* 100%);
}


@media screen and (min-width:768px) {
	.chart::before {
		padding-top: calc(190 / 1200 * 100%);
		background-size: calc(65 / 1200 * 100%);
		background-position: center top 29%;
	}

	.chart::after {
		padding-top: calc(190 / 1200 * 100%);
	}

	.chart .inner {
		padding: calc(100 / 1200 * 100%) 0 calc(130 / 1200 * 100%);
	}

	.chart .inner::before {
		width: calc(40 / 1600 * 100%);
		padding-top: calc(320 / 1600 * 100%);
		background-image: repeating-linear-gradient(0deg, transparent, transparent calc(6 / 200 * 100%), #f6ec7f calc(7 / 200 * 100%), #f6ec7f calc(10 / 200 * 100%), transparent calc(11 / 200 * 100%));
		margin: calc(20 / 1600 * 100%) 0 0;
	}

	.chart .inner::after {
		content: "";
		display: block;
		-webkit-transform: skewY(40deg);
		transform: skewY(40deg);
		position: absolute;
		bottom: 0;
		right: 0;
		width: calc(40 / 1600 * 100%);
		padding-top: calc(320 / 1600 * 100%);
		background-image: repeating-linear-gradient(0deg, transparent, transparent calc(6 / 200 * 100%), #f6ec7f calc(7 / 200 * 100%), #f6ec7f calc(10 / 200 * 100%), transparent calc(11 / 200 * 100%));
		margin: 0 0 calc(200 / 1600 * 100%);
		z-index: 2;
	}

	.chart .sec_contents::before {
		width: calc(182 / 1200 * 100%);
		padding-top: calc(263 / 1200 * 100%);
		margin: 0 0 calc(-160 / 1200 * 100%) calc(-70 / 1200 * 100%);
	}

	.chart .sec_ttl {
		margin-bottom: calc(70 / 1000 * 100%);
	}

	.chart_img::before {
		width: calc(189 / 1200 * 100%);
		padding-top: calc(194 / 1200 * 100%);
		margin: calc(-100 / 1200 * 100%) calc(-35 / 1200 * 100%) 0 0;
	}

	.chart_btn li {
		cursor: pointer;
	}

	.chart_box {
		width: 100%;
		margin-left: 0;
	}

}

@media screen and (min-width:1200px) {
	.chart::before {
		background-size: 65px;
	}

	.chart::before,
	.chart::after {
		padding-top: 190px;
	}

	.chart .inner {
		padding: 100px 0 130px;
	}


}


/* =====================================================================
*    popup
* =================================================================== */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: none;
}

.popup_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #f6ec7f;
}

.popup_area {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.popup_inner {
	width: calc(630 / 750 * 100%);
	margin: calc(150 / 750 * 100%) auto;
	padding: 0;
}

.popup_close {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(90 / 630 * 100%);
	margin: calc(-50 / 630 * 100%) calc(-50 / 630 * 100%) 0 0;
	z-index: 110;
	border-radius: 50%;
	border: .8em solid #716040;
	background-color: #716040;
}

.popup_close::before,
.popup_close::after {
	content: "";
	display: block;
	width: 1px;
	padding-top: 100%;
	background-color: #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin: 0 auto;
}

.popup_close::after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.popup_list {
	width: 100%;
	height: 100%;
}

.popup_list::before {
	content: '';
	position: absolute;
	display: block;
	background: url(../images/chart/img_popup_chara.png) no-repeat center;
	background-size: 100% auto;
	width: calc(167 / 630 * 100%);
	padding-top: calc(82 / 630 * 100%);
	top: 0;
	left: 0;
	right: 0;
	margin: calc(-80 / 630 * 100%) auto 0;
}

.popup_details {
	display: none;
	border: 3px solid #b0a99c;
	background-color: #f5f8f8;
	outline: 1px solid #beb09f;
	outline-offset: -.5em;
	overflow: hidden;
}

.popup_details_inner {
	z-index: 2;
	margin: calc(54 / 630 * 100%) calc(45 / 630 * 100%) calc(70 / 630 * 100%);
}

.chart_photo {
	width: calc(420 / 540 * 100%);
	margin: 0 auto calc(18 / 540 * 100%);
}

.chart_name {
	margin: 0 auto calc(37 / 540 * 100%);
}

.chart_age {
	font-size: 2.7rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
}

.chart_name1 {
	display: block;
	font-size: 3.5rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	margin-bottom: calc(8 / 540 * 100%);
	padding-bottom: calc(5 / 540 * 100%);
	border-bottom: 1px solid #beb09f;
}

.chart_name1::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: calc(-20 / 540 * 100%);
	display: block;
	width: calc(208 / 540 * 100%);
	padding-top: calc(40 / 540 * 100%);
	background-image: repeating-linear-gradient(90deg, #f6ec7f 0px, #f6ec7f calc(5 / 540 * 100vw), transparent calc(6 / 540 * 100vw), transparent calc(15 / 540 * 100vw));
	-webkit-transform: skewX(-40deg);
	transform: skewX(-40deg);
	z-index: -1;
}

.chart_name1 rt {
	text-align: center;
}

/*Chrome対応*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.chart_name1 rt {
		-webkit-transform: translateY(.5rem);
		transform: translateY(.5rem);
	}
}

/*FireFox対応*/
@-moz-document url-prefix() {
	.chart_name1 rt {
		margin-bottom: -.5rem;
	}
}

.chart_name2 {
	color: #5c4e33;
	font-size: 2.8rem;
}

.chart_txt {
	font-size: 2.8rem;
}


@media screen and (min-width: 768px) {
	.popup_bg {
		cursor: pointer;
	}

	.popup_area {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.popup_inner {
		width: calc(1000 / 1200 * 100%);
		max-width: 1000px;
		margin: auto;
		padding: calc(60 / 1200 * 100%) 0 0;
		-ms-flex-item-align: start;
		align-self: flex-start;
	}

	.popup_list::before {
		width: calc(167 / 1000 * 100%);
		padding-top: calc(82 / 1000 * 100%);
		margin: calc(-80 / 1000 * 100%) auto 0;
	}

	.popup_close {
		cursor: pointer;
		width: calc(64 / 1000 * 100%);
		margin: calc(30 / 1000 * 100%) calc(-30 / 1000 * 100%) 0 0;
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.popup_close:hover {
		background-color: #f29473;
		border-color: #f29473;
	}

	.popup_close::before,
	.popup_close::after {
		-webkit-transition: 0.2s ease;
		transition: 0.2s ease;
	}

	.popup_details_inner {
		margin: calc(36 / 1000 * 100%) calc(55 / 1000 * 100%) calc(45 / 1000 * 100%);
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.chart_photo {
		width: calc(292 / 890 * 100%);
		margin: 0;
	}

	.chart_details {
		width: calc(540 / 890 * 100%);
	}

	.chart_name1 {
		font-size: 2.4rem;
	}

	.chart_name1::before {
		width: calc(325 / 540 * 100%);
		background-image: repeating-linear-gradient(90deg, #f6ec7f 0px, #f6ec7f calc(5 / 1600 * 100vw), transparent calc(6 / 1600 * 100vw), transparent calc(18 / 1600 * 100vw));
	}

	.chart_age {
		font-size: 1.6rem;
	}

	.chart_name2 {
		font-size: 1.8rem;
	}

	.chart_name2 img {
		width: 70%;
	}

	.chart_txt {
		font-size: 1.6rem;
	}
}

@media screen and (min-width: 1200px) {
	.popup_inner {
		padding: 60px 0 0;
	}
}