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

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

body{
	font-family: 'Zen Maru Gothic', sans-serif;
	background-color: #F6EAE4;
}

/*----------------------------
共通
----------------------------*/
main{ font-weight: bold;}
main section{ padding: 70px 15px 0;}
#main_a section:last-child{ padding-bottom: 70px;}
.arrow{
	text-align: center;
	margin: 33px auto 0;
}
.arrow p{
	color: #A6504C;
	margin-bottom: 15px;
}
@media(min-width: 768px) {
	#bg_dot{
		background-image: url("../img/bg_dot.png");
		background-position: top center;
		background-repeat: repeat-y;
		background-blend-mode: multiply;
		background-color: #F6EAE4; 
	}
	.arrow p{ font-size: 24px;}
}
@media(max-width: 767px) {
	.arrow p{ font-size: 18px;}
}
.mbfix{padding-bottom: 7rem;}
/*----------------------------
クリップのフレーム
----------------------------*/
.clipbox{
	padding-top: 30px;
	margin: 0 auto;
	padding: 0 15px;
}
.frame_bg{
	position: relative;
	border:#A6504C 3px solid;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #FFE890;
}
.frame_bg::before,
.frame_bg::after{
	content: '';
	position: absolute;
	right: -3px;
}
.frame_bg::before{
	background-color: #F6EAE4;
	bottom: 0;
	width: 17px;
}
#answer .frame_bg::before{ height: 13px;}
.frame_bg::after{
	background-color: #A6504C;
	border-radius: 6px;
	width: 3px;
	height: 6px;
}
#answer .frame_bg::after{ bottom: 10px;}
.clip{
	position: absolute;
	z-index: 1;
}
.frame{
	position: relative;
	top: 0;
	right: 0;
	background-color: #fff;
	border:#A6504C 3px solid;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#mv .frame::before,
#mv .frame::after{
	content: '';
	display: inline-block;
	position: absolute;
	bottom: 0;
	width: 3px;
	background-color: #fff;
}
#mv .frame::before,
#mv .frame::after{ height: 30px;}
#mv .frame::before{ left: -3px;}
#mv .frame::after{ right: -3px;}

@media(min-width: 768px) {
	.clipbox{ max-width: 1080px;}
	#mv .frame_bg::before{ height: 43px;}
	.frame_bg{
		padding-top: 10px;
		margin-left: 10px;
	}
	.frame_bg::after{ bottom: 47px;}
	.clip{
		top: -62px;
		left: 40px;
	}
	.frame{ left: -10px;}
}
@media(max-width: 767px) {
	.clipbox{ max-width: 570px;}
	#mv .frame_bg::before{ height: 233px;}
	#mv .frame_bg::after{ bottom: 230px;}
	.frame_bg{
		padding-top: 5px;
		margin-left: 5px;
	}
	.clip{
		width: 41px;
		top: -30px;
		left: 10px;
	}
	.frame{ left: -5px;}
	#mv .frame::before{ height: 190px;}
	#mv .frame::after{ height: 223px;}
}


/*メインビジュアル
----------------------------*/
#mv h1{
	color: #A6504C;
	font-weight: bold;
	margin: 30px 0 20px;
	text-align: center;
}
.framebox::before,
.framebox::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 3px;
	height: 6px;
	background-color: #A6504C;
	border-radius: 6px;
	z-index: 2;
}
.framebox::before{ left: -3px;}
.framebox::after{ right: -3px;}

.mv_tit{ text-align: center;}
.mv_tit .logo{ margin-bottom: 20px;}
.mv_txt{
	position: relative;
	border:#A6504C 3px solid;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 15px;
	background-color: #fff;
}
.mv_txt::before,
.mv_txt::after{
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -2px;
	width: 3px;
	height: 6px;
	background-color: #A6504C;
	border-radius: 6px;
}
.mv_txt::before{ left: -3px;}
.mv_txt::after{ right: -3px;}
.mv_txt p{
	color: #A6504C;
	font-weight: bold;
	margin: 0;
	text-align: center;
}
.z_character .balloon{
	position: relative;
	padding: 10px 10px 12px;
	background-color: #A6504C;
	border-radius: 60px;
	line-height: 1.2;
	text-align: center;
	color: #FFE890;
	font-weight: bold;
	margin: 0 auto 10px;
}
.z_character .balloon::before{
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -18px;
	left: 50%;
  transform: translateX(-50%);
	width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid #A6504C;
}

@media(min-width: 768px) {
	#mv h1{ font-size: 24px;}
	.framebox{
		display: flex;
		justify-content: space-between;
		padding: 40px 5px 0 18px;
	}
	.framebox::before,
	.framebox::after{	bottom: 27px;}
	.mv_tit{
		width: 44%;
		margin-bottom: 30px;
	}
	.mv_txt p{ font-size: 20px;}
	.z_character{
		position: absolute;
		bottom: 0;
		width: 56%;
		right: 5px;
	}
	.z_character img{
		margin-left: auto;
		margin-right: 0;
	}
	.z_character .balloon{
		width: 356px;
		font-size: 20px;
	}
}
@media(max-width: 767px) {
	#mv h1{ font-size: 17px;}
	.framebox{ padding: 40px 0 0;}
	.framebox::before{ bottom: 185px;}
	.framebox::after{	bottom: 220px;}
	.mv_tit{ padding: 0 10px;}
	.mv_tit .logo{ width: 110px;}
	.mv_tit img{ margin: 0 auto;}
	.z_character{
		position: relative;
		margin: -15px -15px 0;
		z-index: 3;
		text-align: center;
	}
	.z_character img{ margin: 0 auto;}
	.z_character .balloon{
		width: 260px;
		font-size: 15px;
	}
	.mv_txt p{ font-size: 16px;}
}

/*回答--------------*/
#answer .logo{
	display: block;
	margin: 28px 0 10px auto;
}
.chartbox{ position: relative;}
.chartbox::before,
.chartbox::after{
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -3px;
	width: 3px;
	height: 6px;
	background-color: #A6504C;
	border-radius: 6px;
	z-index: 2;
}
.chartbox::before{ left: -3px;}
.chartbox::after{ right: -3px;}
.share{
	font-weight: bold;
	text-align: center;
}
.share p{
	color: #A6504C;
	text-align: center;
	display: inline-block;
	border-bottom: #A6504C 3px solid;
	margin-bottom: 30px;
}
.share a{
	display: block;
	width: 200px;
	height: 56px;
	margin: 0 auto;
	line-height: 56px;
	background-color: #A6504C;
	border-radius: 30px;
	color: #fff;
	font-size: 20px;
	border: #A6504C 2px solid;
}
.pie_chart{
	position: relative;
	background-color: #fff;
	border-radius: 50%;
	overflow: hidden;
}
.chart_area{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.pie_chart .chart{
	position: absolute;
	top: 50%;
	left: 50%;
  transform: translateY(-50%) translateX(-50%);
	background-color: #fff;
	border-radius: 50%;
	z-index: 10;
}
.pie_chart .chart p{
	position: absolute;
	top: 50%;
	left: 50%;
  transform: translateY(-50%) translateX(-50%);
	font-weight: bold;
	color: #A6504C;
	margin-bottom: 0;
}
.pie_chart .chart p span{ vertical-align: 2px;}
@media(min-width: 768px) {
	.result{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 35px 30px;
		max-width: 910px;
		margin: 0 auto;
	}
	.share{ flex: 1;}
	.share p{ font-size: 22px;}
	.pie_chart{
		width: 320px;
		height: 320px;
		margin-left: 30px;
	}
	.pie_chart .chart{
		width: 180px;
		height: 180px;
	}
	.pie_chart .chart p{ font-size: 75px;}
	.pie_chart .chart p span{ font-size: 50px;}
}
@media(max-width: 767px) {
	#answer .logo{ width: 110px;}
	.result{ padding: 30px 15px;}
	.share img{ max-width: 280px;}
	.share p{ font-size: 20px;}
	.pie_chart{
		width: 250px;
		height: 250px;
		margin: 40px auto 0;
	}
	.pie_chart .chart{
		width: 140px;
		height: 140px;
	}
	.pie_chart .chart p{ font-size: 55px;}
	.pie_chart .chart p span{ font-size: 30px;}
}

/*----------------------------
質問
----------------------------*/
.qbox{
	position: relative;
	border:#A6504C 3px solid;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin: 0 auto;
	padding: 10px 10px 0;
	background-color: #fff;
}
.qbox a{
	color: #A6504C;
	text-decoration: underline;
}
.qbox::before,
.qbox::after{
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -2px;
	width: 3px;
	height: 6px;
	background-color: #A6504C;
	border-radius: 6px;
}
.qbox::before{ left: -3px;}
.qbox::after{ right: -3px;}

.qbox > img{ position: absolute;}
.qinbox{
	border-bottom:none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#q01{ padding-top: 45px !important;}
#q01 .qinbox{ background-color: #D0F1FF;}
#q02 .qinbox{ background-color: #FFE890;}
#q03 .qinbox{ background-color: #FAD8E0;}
#q04 .qinbox{ background-color: #D0F1D5;}
#q05 .qinbox{ background-color: #FAD8BD;}

.question{ position: relative;}
#q01 .question > img,
#q04 .question > img,
#q05 .question > img{ z-index: 2;}
.question p{
	color: #A6504C;
	margin-bottom: 0;
}
.question > img{ position: absolute;}
.choice{
	position: relative;
	z-index: 1;
}
.z_answer{
	max-width: 350px;
	margin: 30px auto 0; 
}
.z_answer h2{
	color: #A6504C;
	font-size: 20px;
	font-weight: bold;
}
.z_answer img{
	position: relative;
	z-index: 1;
}
.answer{
	color: #A6504C;
	margin-top: 30px;
}
.answer h2{
	position: relative;
	font-weight: bold;
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: #A6504C 3px solid;
	display: inline-block;
}
.answer h2::before,
.answer h2::after{
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -3px;
	background-color: #A6504C;
}
.answer h2::before{ height: 3px;}
.answer h2::after{
	right: -3px;
	width: 6px;
	height: 3px;
	border-radius: 6px;
}
.y_answer p{
	margin-bottom: 20px;
	color: #333;
}
.commentary p:not(:last-child){ margin-bottom: 5px;}
.commentary p:last-child{ margin-bottom: 0;}


@media(min-width: 768px) {
	.qbox{ max-width: 700px;}
	.qbox > img{
		width: 80px;
		height: 80px;
		top: -35px;
		left: 25px;
	}
	#main_q .question{ padding: 45px 35px 25px;}
	#main_a .question{ padding: 45px 35px 0;}
	.question p{ font-size: 21px;}
	
	#q01 .question > img{
		right: 40px;
		bottom: 0;
	}
	#q02 .question > img{ right: 40px;}
	#main_q #q02 .question > img{ bottom: -45px;}
	#main_a #q02 .question > img{ bottom: 0;}
	#q03 .question > img{ right: 40px;}
	#main_q #q03 .question > img{ bottom: -30px;}
	#main_a #q03 .question > img{ bottom: 0;}
	#q04 .question > img{ right: 40px;}
	#main_q #q04 .question > img{ bottom: -10px;}
	#main_a #q04 .question > img{ bottom: 0;}
	#q05 .question > img{ right: 20px;}
	#main_q #q05 .question > img{ bottom: -10px;}
	#main_a #q05 .question > img{ bottom: -60px;}
	.choice,
	.answer{ padding: 0 35px 30px;}
	.answer h2,
	.answer p{ font-size: 18px;}
	.answer h2::before{
		left: -46px;
		width: 46px;
	}
}
@media(max-width: 767px) {
	.qbox{ max-width: 374px;}
	.qbox > img{
		width: 65px;
		height: 65px;
		top: -28px;
		left: 20px;
	}
	#main_q .question{ padding: 40px 12px 20px;}
	#main_a .question{ padding: 40px 12px 0;}
	.question p{ font-size: 18px;}
	#q01 .question > img{ width: 100px;}
	#main_q #q01 .question > img{
		right: 10px;
		bottom: 80px;
	}
	#main_a #q01 .question > img{
		right: 20px;
		bottom: -75px;
	}
	#q02 .question > img{ width: 80px;}
	#main_q #q02 .question > img{
		right: -8px;
		bottom: -30px;
	}
	#main_a #q02 .question > img{
		right: 10px;
		bottom: 20px;
	}
	#q03 .question > img{ width: 80px;}
	#main_q #q03 .question > img{
		right: 10px;
		bottom: -20px;
	}
	#main_a #q03 .question > img{
		right: 20px;
		bottom: 38px;
	}
	#q04 .question > img{
		width: 85px;
		right: 20px;
	}
	#main_q #q04 .question > img{ bottom: 5px;}
	#main_a #q04 .question > img{ bottom: 50px;}
	#q05 .question > img{
		width: 125px;
		right: 20px;
	}
	#main_q #q05 .question > img{ bottom: 80px;}
	#main_a #q05 .question > img{ bottom: 50px;}
	.choice,
	.answer{ padding: 0 10px 35px;}
	.answer h2,
	.answer p{ font-size: 15px;}
		.answer h2::before{
		left: -22px;
		width: 22px;
	}
}
@media(max-width: 399px) {
	.question p{ font-size: 17px;}
}
	
/*ラジオボタン
----------------------------*/
.radioinput {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
	background-color: #A6504C;
	border-radius: 60px;
	margin-bottom: 12px;
	line-height: 1.2;
}
.radioinput:hover,
.input_radio:hover:checked + .dummyinput{ background-color: #b79094;}
.radioinput:hover .dummyinput{ background-color: #b79094;}
.input_radio {
  opacity: 0;
  width: 0;
  margin: 0;
}
.input_radio:focus + .dummyinput{
  border: solid 2px #fff;
  background-color: #A6504C;
}
.input_radio:checked + .dummyinput{
  border: solid 2px #fff;
}
.input_radio:checked + .dummyinput::before{
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}
.dummyinput{
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #A6504C;
  border: solid 2px #fff;
}
.labeltext{
  margin-left: 12px;
  display: block;
	margin-bottom: 3px;
  font-weight: bold;
	color: #fff;
	flex: 1;
}
@media(min-width: 768px) {
	.labeltext{ font-size: 21px;}
}
@media(max-width: 767px) {
	.labeltext{ font-size: 17px;}
}
@media(max-width: 399px) {
	.labeltext{ font-size: 16px;}
}

/*ボタン
----------------------------*/
.push_btn{
  position: relative;
  text-decoration: none;
  display: block;
  text-align: center;
  background-color: #FFE890;
  border-radius: 10px;
  border: solid 3px #A6504C;
	font-weight: bold;
  transition: all 0.3s ease;
	padding: 0;
	margin: 0 auto;
	width: 100%;
}
.push_btn:hover,
.push_btn:focus{ text-decoration: none;}
.push_btn span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 15px;
  background-color:#fff;
  border: solid 3px #A6504C;
  border-radius: 10px;
  color:#A6504C;
  transition: all 0.3s ease;
	margin: -3px;
  transform: translate(-8px, -8px);
}
.push_btn::before {
	content: '';
  position: absolute;
	z-index: -1;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
	border-radius: 30px;
}
.push_btn:hover span {
  color: #A6504C;
  transform: translate(0, 0);
}
@media(min-width: 768px) {
	.push_btn{
		font-size: 24px;
		max-width: 450px;
	}
	.push_btn::before{ transition-duration: 0.3s;}
}
@media(max-width: 767px) {
	.push_btn{
		font-size: 20px;
		max-width: 330px;
	}
}
/*スタートボタン*/
.start_btn{ margin: 40px 0;}
/*回答ボタン*/
.answer_btn{
	position: relative;
	margin: 40px auto 0;
	text-align: center;
	margin-bottom: 70px;
}
.answer_btn::before,
.answer_btn::after{
	content: '';
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	mix-blend-mode: multiply;
}
.answer_btn::before{ background-image: url("../img/l_dot.png");}
.answer_btn::after{
	background-image: url("../img/r_dot.png");
	bottom: 0;
	right: 0;
}
.answer_btn p{
	color: #A6504C;
	margin: 15px 0 0;
}
@media(min-width: 768px) {
	.answer_btn{ max-width: 560px;}
	.answer_btn::before{
		width: 64px;
		height: 73px;
		top: -40px;
		left: -30px;
	}
	.answer_btn::after{
		width: 57px;
		height: 50px;
	}
	.answer_btn p{ font-size: 20px;}
}
@media(max-width: 767px) {
	.answer_btn{ max-width: 370px;}
	.answer_btn::before{
		width: 50px;
		height: 57px;
		top: -75px;
		left: 0;
	}
	.answer_btn::after{
		width: 40px;
		height: 36px;
	}
	.answer_btn p{ font-size: 17px;}
}

/*Simeji定型文とは？*/
.what_is{ margin-bottom: 40px;}
.what_is .btn{
	background-color: #A6504C;
	color: #fff;
	font-weight: bold;
	margin: 0 auto;
	display: block;
	max-width: 260px;
	border-radius: 10px;
	padding: 10px;
	border: #A6504C 2px solid;
}
@media(min-width: 768px) {
	.what_is .btn{
		font-size: 18px;
	}
}

/*----------------------------
フッター
----------------------------*/
footer{
	background-color: #FBFBFB;
	text-align: center;
	color: #7c7d82;
	padding: 30px 0;
}
footer .copy{
	display: inline-block;
}
.keyboard{
	text-align: center;
	font-weight: bold;
}
.keyboard .download{ margin: 15px 0 30px;}
.keyboard .download a{
	color: #fff;
	width: 260px;
	height: 40px;
	line-height: 32px;
	font-size: 18px;
	background-color: #A6504C;
	border: #A6504C 2px solid;
	border-radius: 30px;
	padding: 0 10px;
}
.keyboard .download a:hover,
.keyboard .download a:focus,
.what_is .btn:hover,
.what_is .btn:focus,
.share a:hover,
.share a:focus{
	color: #A6504C;
	background-color: #fff;
	text-decoration: none;
}
.follow{ margin-bottom: 30px;}
.follow p{
	color: #A6504C;
	font-size: 20px;
	display: inline-block;
	border-bottom: #A6504C 2px solid;
	padding-bottom: 5px;
	margin-bottom: 15px;
}
.follow ul{
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0;
	list-style: none;
}
.follow ul li:not(:last-child){ margin-right: 15px;}
.site_link{
	padding: 0;
	margin-bottom: 30px;
	list-style: none;
}
.site_link li:not(:last-child){ margin-bottom: 10px;}
.site_link li a{ color: #000;}
.info_link{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 40px 0 20px;
	list-style: none;
}
.info_link li:not(:last-child){ border-right: #7d7d7d 1px solid;}
.info_link li a{
	color: #7c7d82;
	padding: 0 10px;
	display: block;
	line-height: 1;
}
.iso_logo{ width: 130px;}
@media(min-width: 768px) {
	.keyboard .download{
		display: flex;
		justify-content: center;
	}
	.keyboard .download a:first-child{ margin-right: 20px;}
}
@media(max-width: 767px) {
	.keyboard .download a{
		display: block;
		margin: 0 auto;
	}
	.keyboard .download a:first-child{ margin-bottom: 15px;}
}