@charset "utf-8";

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


/* =====================================================================
*    chart
* =================================================================== */
.chart {
	padding: calc(108 / 750 * 100%) 0 calc(146 / 750 * 100%);
	background: #ffffff url(../images/common/bg_pattern.png) repeat center /calc(200 / 750 * 100%) auto;
}

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

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

.chart_note {
	margin-top: calc(50 / 650 * 100%);
}

.chart_img {
	height: calc(802 / 750 * 100vw);
}

.chart_img img {
	position: absolute;
	top: 0;
	left: 0;
}

.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_id_01 {
	width: calc(300 / 1000* 100%);
	padding-top: calc(300 / 1000* 100%);
	margin: calc(15 / 1000* 100%) 0 0 calc(342 / 1000* 100%);
}

.chart_id_02,
.chart_id_03,
.chart_id_04,
.chart_id_05,
.chart_id_10 {
	width: calc(220 / 1000* 100%);
	padding-top: calc(220 / 1000* 100%);
}

.chart_id_02 {
	margin: calc(454 / 1000* 100%) 0 0 calc(382 / 1000* 100%);
}

.chart_id_03 {
	margin: calc(454 / 1000 * 100%) 0 0 calc(53 / 1000 * 100%);
}

.chart_id_04 {
	margin: calc(373 / 1000 * 100%) 0 0 calc(745 / 1000* 100%);
}

.chart_id_05 {
	margin: calc(705 / 1000* 100%) 0 0 calc(745 / 1000* 100%);
}

.chart_id_06,
.chart_id_07,
.chart_id_08,
.chart_id_09 {
	width: calc(154/ 1000* 100%);
	padding-top: calc(154/ 1000* 100%);
}

.chart_id_06 {
	margin: calc(193 / 1000* 100%) 0 0 calc(60 / 1000* 100%);
}

.chart_id_07 {
	margin: calc(797 / 1000* 100%) 0 0 calc(47 / 1000* 100%);
}

.chart_id_08 {
	margin: calc(797 / 1000* 100%) 0 0 calc(248 / 1000* 100%);
}

.chart_id_09 {
	margin: calc(797 / 1000* 100%) 0 0 calc(448 / 1000* 100%);
}

.chart_id_10 {
	margin: calc(10 / 1000* 100%) 0 0 calc(746 / 1000* 100%);
}



@media screen and (min-width:768px) {
	.chart {
		padding: calc(100 / 1200 * 100%) 0 calc(170 / 1200 * 100%);
		background-size: calc(130 / 1200 * 100%) auto;
	}

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

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

	.chart_note {
		margin-top: calc(60 / 1000 * 100%);
	}

	.chart_img {
		height: calc(1070 / 1200 * 100vw);
	}

	.chart_btn li {
		cursor: pointer;
	}

}

@media screen and (min-width:1200px) {
	.chart {
		padding: 100px 0 170px;
		background-size: 130px auto;
	}

	.chart_img {
		height: 1070px;
	}
}


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

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

.popup_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
}

.popup_inner {
	padding: calc(120 / 750 * 100%) 0;
	margin: 0 auto;
	z-index: 2;
}

.popup_inner::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: url(../images/chart/bg_deco1.png) no-repeat right top/contain;
	width: calc(419 / 750 * 100%);
	padding-top: calc(655 / 750 * 100%);
}

.popup_inner::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/chart/bg_deco2.png) no-repeat right top/contain;
	width: calc(342 / 750 * 100%);
	padding-top: calc(599 / 750 * 100%);
}

.popup_close {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(90 / 750 * 100%);
	background-color: #000;
	z-index: 3;
}

.popup_close::before,
.popup_close::after {
	content: "";
	display: block;
	width: 1px;
	padding-top: 100%;
	background-color: #f6f6f6;
	-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 {
	height: 100%;
	width: calc(650 / 750 * 100%);
	margin: auto;
}

.popup_details {
	display: none;
}

.chart_photo {
	width: calc(560 / 650 * 100%);
	margin: 0 auto calc(70 / 650 * 100%);
	height: calc(582 / 750 * 100vw);
}

.chart_photo_whole {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(360 / 650 * 100%);
	margin: calc(-17 / 650 * 100%) 0 0 calc(-86 / 650 * 100%);
	z-index: 1;
}

.btn_change {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
	width: calc(146 / 650 * 100%);
	padding-top: calc(146 / 650 * 100%);
	margin: 0 calc(-10 / 650 * 100%) calc(-52 / 650 * 100%) 0;
}

.chart_name_wrap {
	margin: 0 auto;
}

.chart_name_wrap::before {
	content: '';
	position: absolute;
	bottom: .85em;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #65365b;
}

.chart_name {
	margin-bottom: 1.2em;
	font-weight: 700;
	letter-spacing: 0.12em;
	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;
	-ms-align-items: flex-end;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	color: #65365b;
}

.chart_name > * {
	background-color: #ded3db;
	line-height: 1;
}

.chart_age {
	font-size: 3.2rem;
}

.chart_name1 {
	font-size: 5.4rem;
	padding-right: .4em;
}

.chart_name1 rudy {
	text-align: left;
	line-height: 1;
}

/*IE対策*/
_:-ms-lang(x)::-ms-backdrop,
.chart_name_wrap::before {
	bottom: 1.2em;
}

_:-ms-lang(x)::-ms-backdrop,
.chart_name1 {
	margin-bottom: -.35em;
}

.chart_name1 rt {
	text-align: center;
	font-size: 2rem;
	margin-bottom: .2em;
}

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

/*Edge対策*/
@supports (-ms-ime-align:auto) {
	.chart_name1 rt {
		top: .3em;
	}
}

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

.chart_name2 {
	font-size: 3.2rem;
	padding: .3em 0 .2em .7em;
}

.chart_name2 small {
	position: absolute;
	display: block;
	font-size: 2rem;
	right: 0;
	margin-top: .5em;
}

.chart_txt {
	font-size: 2.6rem;
	letter-spacing: .25rem;
	line-height: 1.85;
}

.btn_comment {
	margin-top: calc(70 / 650 * 100%);
}

.btn_comment a {
	-webkit-box-shadow: 0.6em 0.6em 0 0 rgba(180, 156, 174, 0.8);
	box-shadow: 0.6em 0.6em 0 0 rgba(180, 156, 174, 0.8);
}

/*仙夏ver*/
.popup_details:first-child .chart_photo {
	width: calc(582 / 650 * 100%);
}

.popup_details:first-child .chart_name_wrap {
	width: calc(540 / 650 * 100%);
}


@media screen and (min-width: 768px) {
	.popup_area {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: calc(100vw + 3px);
	}

	.popup_area::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		background: url(../images/chart/bg_deco1.png) no-repeat right top/contain;
		width: calc(418 / 1200 * 100%);
		padding-top: calc(655 / 1200 * 100%);
	}

	.popup_area::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		background: url(../images/chart/bg_deco2.png) no-repeat right top/contain;
		width: calc(342 / 1200 * 100%);
		padding-top: calc(599 / 1200 * 100%);
	}

	.popup_bg {
		cursor: pointer;
	}

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

	.popup_inner::before,
	.popup_inner::after {
		display: none;
	}

	.popup_close {
		cursor: pointer;
		width: calc(70 / 1200 * 100%);
		-webkit-transition: 0.3s ease;
		transition: 0.3s ease;
	}

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

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

	.popup_close:hover::before,
	.popup_close:hover::after {
		background-color: #000;
	}

	.popup_list {
		width: 100%;
	}

	.chart_photo {
		width: calc(400 / 940 * 100%);
		margin: 0 auto calc(23 / 940 * 100%);
		height: calc(407 / 1200 * 100vw);
	}

	.chart_photo_whole {
		width: calc(252 / 940 * 100%);
		margin: calc(-21 / 940 * 100%) 0 0 calc(163 / 940 * 100%);
	}

	.btn_change {
		cursor: pointer;
		width: calc(118 / 940 * 100%);
		padding-top: calc(118 / 940 * 100%);
		margin: 0 calc(168 / 940 * 100%) calc(-14 / 940 * 100%) 0;
	}

	.chart_name_wrap {
		width: calc(420 / 940 * 100%);
		margin-bottom: calc(30 / 940 * 100%);
	}

	.chart_name1 {
		font-size: 4rem;
		padding-right: .1em;
	}

	.chart_name1 rt {
		font-size: 1.4rem;
	}

	.chart_age {
		font-size: 2.2rem;
	}

	.chart_name2 {
		font-size: 2.2rem;
		padding: .3em 0 .15em .3em;
	}

	.chart_name2 small {
		font-size: 1.2rem;
	}

	.chart_txt {
		letter-spacing: .05rem;
		font-size: 1.6rem;
		line-height: 2;
	}

	.btn_comment {
		width: calc(270 / 940 * 100%);
		margin-top: calc(50 / 940 * 100%);
	}

	/*仙夏ver*/
	#chart_id_01 .chart_photo {
		width: calc(407 / 940 * 100%);
	}

	#chart_id_01 .chart_name_wrap {
		width: calc(375 / 940 * 100%);
	}

}

@media screen and (min-width: 1200px) {

	.popup_area::before {
		width: 418px;
		padding-top: 655px;
	}

	.popup_area::after {
		width: 342px;
		padding-top: 599px;
	}

	.popup_inner {
		padding: 32px 30px;
	}

	.popup_close {
		width: 70px;
	}

	.chart_photo {
		height: 407px;
	}
}