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

*{
	box-sizing:border-box;
}
/*PC・SP表示非表示*/
.pc{display:none;}
@media screen and (min-width:640px){
.pc{display:inline-block;}
.sp{display:none;}
}


p{
	font-size:2.133333333333333vw;
}

/*Reset*/
h1,h2,h3,h4,h5,h6,
p,
address,
ul,ol,li,dl,dt,dd,table,caption,th,td,
img,
form{
	border:none;
	border-collapse:collapse;
	font-style:normal;
	font-weight:normal;
	font-size:100%;
	line-height:100%;
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:left;
	vertical-align:top;
}


/*全体*/
html{
	font-size:62.5%;
}
body{
	background:#f7f7f8;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial, "メイリオ",Meiryo,sans-serif;
	font-weight:500;
	letter-spacing:0.05rem;
	line-height:1.5;
	margin:0 auto;
	padding:0;
}
article{
	background:#fff;
	margin:0 auto;
	padding:0;
	width:100%;
	max-width:640px;
}
@media screen and (min-width:640px) {
article{
padding:0;
}	
}


/*共通*/
a{
	color:#0005dc;
	text-decoration:underline;
}
p{
	color:#111;
	font-size:15px;
	font-size:1.5rem;
	line-height:1.8;
	margin:30px 10px 0;
}
img{
	display:block;
	margin:0;
	padding:0;
	width:100%;
}

p.pr{
	color: #111;
	font-size: 12px;
	line-height: 1;
	margin: 0 12px;
	padding: 0;
	text-align: right;
	position: absolute;
	top: 5px;
	right: 0;
	font-weight: bold;
}
@media screen and (min-width:640px) {
	p.pr{
		font-size:14px;
	}
}
@media screen and (max-width:375px) {
	p.pr{
		font-size:11px;
	}
}
h1{
	position: relative;
}


/*page_view*/
/*
.page_view{
	font-size:14px;
	font-weight:bold;
	line-height:2;
	margin:5px 15px 0;
	text-align:right;
}
.page_view span{
	color:#5eb6d3;
	font-size:16px;
}
@media screen and (min-width:640px) {
.page_view{
font-size:16px;
}
.page_view span{
font-size:18px;
}
}
*/

/*section.questionnaire*/
.questionnaire{
	background:#5eb6d3;
	margin:0;
	padding:15px;
}
.questionnaire div{
	background:#fff;
	padding:12px 12px 40px;
}
.questionnaire__balloon{
	display:inline-block;
	margin:30px 5px 0;
	width:15%;
	vertical-align:top;
}
.questionnaire__balloon.mt0{
	margin:0 5px;
}
.questionnaire__question{
	border-bottom:1px dotted #bebebe;
	font-size:20px;
	font-weight:700;
	line-height:1.5;
	margin:3px 0 0;
}

ul.q1_ul,
ul.q2_ul,
ul.q3_ul,
ul.q4_ul,
ul.q5_ul{
	overflow:visible;
	padding-right:40%;
	position:relative;
}
ul.q1_ul:after{
	background:url("../img/q1_illust.png") no-repeat;
	background-size:100% auto;
	background-position:right top;
	content:"";
	width:40%;
	height:500px;
	position:absolute;
	top:-10px;
	right:0;
}
@media screen and (min-width: 640px){
ul.q1_ul:after{
width:30%;
}
}

ul.q2_ul:after{
	background:url("../img/q2_illust.png") no-repeat;
	background-size:100% auto;
	background-position:right top;
	content:"";
	width:40%;
	height:500px;
	position:absolute;
	top:-10px;
	right:0;
}
@media screen and (min-width: 640px){
ul.q2_ul:after{	
width:30%;
}
}

ul.q3_ul:after{
	background:url("../img/q3_illust.png") no-repeat;
	background-size:100% auto;
	background-position:right top;
	content:"";
	width:40%;
	height:500px;
	position:absolute;
	top:-10px;
	right:0;
}
@media screen and (min-width: 640px){
ul.q3_ul:after{
width:25%;
}
}

ul.q4_ul:after{
	background:url("../img/q4_illust.png") no-repeat;
	background-size:100% auto;
	background-position:right top;
	content:"";
	width:35%;
	height:500px;
	position:absolute;
	top:-10px;
	right:0;
}
@media screen and (min-width: 640px){
ul.q4_ul:after{
width:25%;
}
}

ul.q5_ul:after{
	background:url("../img/q5_illust.png") no-repeat;
	background-size:100% auto;
	background-position:right top;
	content:"";
	width:40%;
	height:500px;
	position:absolute;
	top:-10px;
	right:0;
}
@media screen and (min-width: 640px){
ul.q5_ul:after{
width:30%;
}
}

.questionnaire li{
	color:#333;
	line-height:1.8;
	font-size:15px;
	font-size:1.5rem;
	margin:20px 0 0;
	display:flex;
	align-items:center;
	/*justify-content:space-between;*/
}
.questionnaire input{
	display:none;
}
.questionnaire input + span{
	cursor:pointer;
	display:inline-block;
	line-height:1.6;
	margin:0 .2em;
	padding:0 0 0 2em;
	position:relative;
}
.questionnaire input + span::before{
	background:#fff;
	border:2px solid #333;
	border-radius:2px;
	content:"";
	display:block;
	width:1em;
	height:1em;
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
}
.questionnaire input:checked + span::after{
	border-left:4px solid #FF0000;
	border-bottom:4px solid #FF0000;
	content:"";
	display:block;
	width:1em;
	height:.3em;
	position:absolute;
	top:50%;
	margin-top:-.2em;
	left:0;
	transform:translateY(-50%) rotate(-45deg);
}
@media screen and (min-width: 640px){
.questionnaire div{
padding:12px 12px 60px;
}
}
@media screen and (max-width: 30em){
.questionnaire{
padding:10px;
}
.questionnaire__balloon{
width:20%;
}
.questionnaire__question{
font-size:16px;
}
}

p.thanks{
	font-size:16px;
	font-weight:bold;
	line-height:1.4;
	margin:40px auto 0;
	padding:0;
	text-align:center;
}
@media screen and (min-width: 640px){
p.thanks{
font-size:20px;
margin:50px auto 0;
}
}


/*p.before_btn*/
p.before_btn{
	color:#111;
	font-size:22px;
	font-weight:bold;
	line-height:1.4;
	margin:30px 0 0;
	text-align:center;
}
p.before_btn span{
	font-size:24px;
	font-weight:bold;
}
p.before_btn span.green{
	color:#00aa46;
}
p.before_btn span.red{
	color:#fa0f0f;
}
@media screen and (min-width:640px) {
p.before_btn{
font-size:24px;
margin:50px 0 0;
}
p.before_btn span{
font-size:24px;
}
}


/*section.cta*/
section.cta{
	margin:0;
	overflow:hidden;
}

/*ボタンアニメーション設定*/
#sb-part-1060.sb-custom-part-l9qsmmapehq25ni6ll
.auraBtn{
  height:220px;
  position:relative;
  width:85%;/*横幅*/
  margin:60px auto;/*外側の余白｜上下余白｜左右余白（auto=センタリング）｜*/
  /*-webkit-transition: .2s;
  transition: .2s;*/
}

#sb-part-1060.sb-custom-part-l9qsmmapehq25ni6ll
/*ボタンが広がるアニメーション（1番目）*/
.auraBtn:before{
  /*アニメーションの設定 変更する場合は該当場所を修正してください。
   アニメーション名、動きの速さ.2s（=0.2秒）、動き具合、動く回数*/
  -webkit-animation:auraBtn 2s ease-out infinite;
  animation:auraBtn 2s ease-out infinite
}

#sb-part-1060.sb-custom-part-l9qsmmapehq25ni6ll
/*ボタンが広がるアニメーション（2番目）*/
.auraBtn:after{
  /*アニメーションの設定 変更する場合は該当場所を修正してください。
   アニメーション名、動きの速さ.2s（=0.2秒）、動き具合、動く回数*/
  -webkit-animation:auraBtn 2s ease-out 1s infinite;
  animation:auraBtn 2s ease-out 1s infinite
}

#sb-part-1060.sb-custom-part-l9qsmmapehq25ni6ll
/*ボタンが広がるアニメーション（共通設定）*/
.auraBtn:before,
#sb-part-1060.sb-custom-part-l9qsmmapehq25ni6ll .auraBtn:after {
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  border-radius:20px;/*ボタンの角丸*/
  background:#a5ebc3;/*FFB79B*//*広がるボタンの色(green, red, blue以外の場合はここを修正してください）*/
  -webkit-transform:translate3d(0, 0, 0); /*広がるボタンの初期位置*/
  transform:translate3d(0, 0, 0);
}
.auraBtn p{
	margin:0;
}
#sb-part-1060.sb-custom-part-l9qsmmapehq25ni6ll
/*ボタン自体の設定*/
.auraBtn a{
  height:220px;
  display:block;
  padding:8px 0;
  border-radius:20px;
  text-align:center;
  text-decoration:none;
  background:rgb()0,0,0,0;
  position:relative;
  z-index:1;
}
@media screen and (max-width:640px) {
#sb-part-1060.sb-custom-part-l9qsmmapehq25ni6ll
/*ボタン自体の設定*/
.auraBtn a{
height:31vw;
}
#sb-part-1060.sb-custom-part-l9qsmmapehq25ni6ll
.auraBtn{
height:31vw;
margin:14vw auto;
}
}

/*広がるボタンのアニメーション（変更する場合は該当する箇所を修正してください）*/
@keyframes auraBtn {
/*0秒時*/
0%{
-webkit-transform:scale(0.95);/*拡大率（1=100％）*/
transform:scale(0.95);
opacity:1/*透明度（0=透明、1=不透明）*/
}
/*1.8秒時*/
90%{
opacity:.1/*透明度*/
}
/*2秒時*/
to{
-webkit-transform:scale(1.2, 1.5);/*拡大率　1番目の値はX軸、2番目の値はY軸*/
transform:scale(1.2, 1.5);
opacity:0/*透明度*/
}
}


/*p.note*/
.note{
	font-size:1.2rem;
	line-height:1.8;
	margin:0 10px;
	text-align:right;
}


/*footer*/
footer{
	background:#0d4169;
	margin:0 auto;
	padding:15px 0 20px;
	width:100%;
	max-width:640px;
	text-align:center;
}
footer div{
	border-left:1px solid #fff;
	display:inline-block;
	margin:0;
	padding:0 10px;
}
footer div:first-child{
	border-left:none;
}
footer div a{
	color:#fff;
	font-size:13px;
	text-decoration:none;
}
@media screen and (min-width:640px) {
footer div a{
font-size:15px;
}
}
.line_dtl{
	background:#195a8c;
}
.line_dtl_ttl{
	padding-top: 20px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
	font-weight: bold;
}
.line_dtl_txt {
	margin-top: 10px;
    padding: 0 20px 20px 20px;
	color: #ffffff;
    text-align: center;	
	font-size: 12px;
	line-height: 1.5;
}