button{
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	cursor: pointer;
}

.section.chart_main::before{
	background-position: left top -8px;
	background-image: url(/honeymoon/chart/images/bg-text-area-chart.png);
}
.chart_main .section-heading::before {
	background-image: url(/honeymoon/common/images/icon-area.png);
	background-size: 49px;
	margin-left: 4.5px;
}
#chartContainer{
	padding: 50px 0 140px;
}

.chart_view{
	display: none;
}
.chart_view .question:not(#q1){
	display: none;
}
[data-directory="chart"]{
	text-align: center;
}
#contentsArea .chart-heading{
	position: relative;
	font-family: var(--font-mincho);
	font-size: 4.0rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
}
.chart-heading::before{
	content: "";
	position: absolute;
	left: 0;
	top: -25px;
	width: 100%;
	height: 111px;
	background-image: url(/honeymoon/chart/images/bg-text-Q.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: auto 100%;
}
#area .chart-heading::before{
	display: none;
}
.chart-heading span{
	position: relative;
	z-index: 1;
}
.chart-image{
	max-width: 800px;
	margin-top: 45px;
}
/* .chart-image img{
	max-width: 800px;
} */
.start_button{
	height: 230px;
}
.button-start{
	background-color: #d46969;
}
.chart-select{
	margin-top: 80px;
}
.button-answer{
	position: relative;
	width: 340px;
	height: 60px;
	margin: 0 10px;
}
.button-answer .off{
	position: relative;
	z-index: 1;
}
.button-answer .on{
	position: absolute;
	left: 0;
	top: 0;
}
.chart_main{
	padding-bottom: 0;
}
.result_area{
	color: var(--color-red);
	font-size: 4.8rem;
	font-weight: bold;
	letter-spacing: -0.05em;
	margin-right: 0.1em;
}

[data-result="guam"] .result_area{
	letter-spacing: 0.05em;
}
[data-result="okinawa"] .result_area{
	letter-spacing: 0.1em;
}
[data-result="europe"] .result_area{
	letter-spacing: 0;
}
.result-select{
	display: none;
	margin-top: 80px;
}
.result-select [data-answer="reset"]{
	margin-top: 40px;
}
@media (min-width: 769px) {
	.chart-select{
		display: flex;
		justify-content: center;
	}
	.button-answer:hover .off{
		opacity: 0;
	}
}
@media (max-width: 820px) {
	#contentsArea .section-heading{
		font-size: calc( 45 / 750 * 100vw );
	}
	/* #contentsArea .chart-heading{
		height:calc( 95 / 750 * 100vw );
		padding: 0 1.5em;
	} */
}
@media (max-width: 768px) {
	.chart_view{
		margin-top: calc( 20 / 750 * 100vw );
	}
	#contentsArea .chart_main .section-heading{
		margin-bottom: 0;
	}
	.chart_main .section-heading::before {
    background-size: calc( 59 / 750 * 100vw );
    margin-left: calc( 5.5 / 750 * 100vw );
	}
	#chartContainer{
		padding-top: calc( 60 / 750 * 100vw );
		padding-bottom: calc( 150 / 750 * 100vw );
	}
	#contentsArea .chart-heading{
    font-size: calc( 37 / 750 * 100vw );
    white-space: nowrap;
	}
	.chart-heading::before{
		top: -3vw;
		height: 13vw;
		background-size: auto 100%;
	}
	#contentsArea .chart-heading img{
		width: auto;
		height: 100%;
	}
	.chart-image{
		margin-top: calc( 40 / 750 * 100vw );
	}
	.start_button, .result{
		height:calc( 300 / 750 * 100vw );
	}
	.chart-select{
		margin-top: calc( 70 / 750 * 100vw );
	}
	.button-answer{
		width: calc( 564 / 750 * 100vw );
		height: auto;
		margin: auto;
	}
	.button-answer + .button-answer,
	.result-select .button + .button{
		margin-top: calc( 50 / 750 * 100vw );
	}

	.result-select{
		margin-top: calc( 80 / 750 * 100vw );
	}
	.result_area{
		font-size: calc( 45 / 750 * 100vw );
	}
}

.relation{
	display: none;
}