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

#info_contents {
  display: flex;
  justify-content: center;
  align-items: center;
}

#selection {
  margin: 1rem;
  max-width: 720px;
}

.question {
  display: block;
  margin: 0 auto;
}

.question > img {
  display: block;
  margin: 0 auto;
}

#selection .gowa_top > img {
  /* display: block; */
  /* margin: 0 auto; */
}

/* BASE */
.mT60 { margin-top: 60px; }
.mT40 { margin-top: 40px; }
.mT20 { margin-top: 20px; }
.pB20 { padding-bottom: 20px; }

/* Top Page */
#qArea {
	padding: 10% 0;
	background: #f3f3f3;
}

.qaBox li{
	margin: 0 10%;
}

.qaBox .flickarrow_q1  ul{
	background-image:url(../images/flick_arrow_bg_q1.png);
	background-repeat: no-repeat;
	background-position: center;
}

.qaBox .flickarrow_q2 , .flickarrow_q3, .flickarrow_q4  ul{
	background-image:url(../images/flick_arrow_bg_q2_3.png);
	background-repeat: no-repeat;
	background-position: center;
}

.qaBox .flickarrow_q5 ul{
	background-image:url(../images/flick_arrow_bg_q4.png);
	background-repeat: no-repeat;
	background-position: center;
}

#qalert{
	margin: 0 7%;
    color: #ed8c61;
    text-indent: -1em;
    padding-left: 1em;
	    text-align: left;
}

.body_sph #qalert{
	font-size: 0.85em;
}

#qContainer li {
	padding: 5% 0;
}

/* 扉 */
.gowa_top{
	position: relative;
}

.gowa_start{
    position: absolute;
    left: 50%;
    top: 86%;
    width: 60%;
    transform: translate(-50%, 0);
}

.body_pc .gowa_start{
    top: 86%;
    width: 50%;
}


/* lip page */

/** 見出し **/
.ltop{
	position:relative;
}
.btn_syosai{
	position:absolute;
	bottom: 8%;
    left: 0;
    right: 0;
    padding: 0 20%;
}

.body_pc .btn_syosai{
	position:absolute;
	bottom: 8%;
    left: 0;
    right: 0;
    padding: 0 25%;
}

/** 診断結果 共通 **/
.gowatsuki_result{
	    text-align: center;
}

.gowatsuki_result .condition{
	padding: 8% 0;
    width: 90%;
}
.body_pc .gowatsuki_result .condition{
    width: 75%;
}

.gowatsuki_result .result{
    width: 97%;
}

.body_pc .gowatsuki_result .result{
    width: 85%;
}

.gowatsuki_result p{
	color: #4e60a5;
}

.gowatsuki_result .txt1{
    font-size: 1.25em;
    margin-bottom: 1.3em;
    letter-spacing: 0.05em;
}
.body_pc .gowatsuki_result .txt1{
    font-size: 1.9em;
    letter-spacing: 0.1em;
}

.gowatsuki_result .txt2{
    font-size: 1.1em;
    letter-spacing: 0.05em;
        margin: 4% 0 3%;
}
.body_pc .gowatsuki_result .txt2{
    font-size: 1.9em;
    letter-spacing: 0.05em;
        margin: 4% 0 3%;
}

.cart_btn{
    width: 75%;
    margin-bottom: 3%;
}
.body_pc .cart_btn{
    width: 50%;
    margin-bottom: 3%;
}

.bestchoice_square{
    width: 95%;
    padding-bottom: 3%;
}

.gowa_attention{
    color: #4c5fa4;
    text-align: right;
}
.body_sph .gowa_attention{
    font-size: 0.8em;
}
/** 診断結果 10% **/
.gowatsuki_10{
	background-color: #fffcf4;
}

.gowatsuki_10 a:hover{
    opacity: 0.8;
}

.bestchoice_10{
    width: 95%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    margin-bottom: 15%;
    padding-top: 8%;
}
.gowatsuki_10 .square{
    background-color: #fdf8e8;
    width: 95%;
    height: 87%;
    position: absolute;
    z-index: -1;
    bottom: -2%;
    left: 6%;
}

.body_pc .gowatsuki_10 .square{
    height: 84.5%;
    bottom: -2%;
    left: 5%;
}

.bestchoice_10 .best_item{
    width: 65%;
}
.body_pc .bestchoice_10 .best_item{
    width: 55%;
}

.otherchoice_10{
	background-color: #ffedc5;
    position: relative;
    padding-bottom: 7%;
}
.otherchoice_10 .other_item{
    width: 65%;
}

.body_pc .otherchoice_10 .other_item{
    width: 50%;
}

.otherchoice_10 .title{
    width: 50%;
    position: absolute;
    transform: translate(-50%,0);
    left: 50%;
    top: -1.5%;
}

.otherchoice_10 .choice{
    padding: 7% 0 7%;
    text-align: right!important;
}

/** 診断結果 30% **/
.gowatsuki_30{
	background-color: #fff9f5;
}

.gowatsuki_30 a:hover{
    opacity: 0.8;
}

.bestchoice_30{
    width: 95%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    margin-bottom: 15%;
    padding-top: 8%;
}
.gowatsuki_30 .square{
    background-color: #fff4eb;
    width: 95%;
    height: 84%;
    position: absolute;
    z-index: -1;
    bottom: 3%;
    left: 6%;
}

.body_pc .gowatsuki_30 .square{
    height: 79.5%;
    bottom: 3%;
    left: 5%;
}

.bestchoice_30 .best_item{
    width: 65%;
}
.body_pc .bestchoice_30 .best_item{
    width: 50%;
}

.otherchoice_30{
	background-color: #ffddc4;
    position: relative;
    padding-bottom: 7%;
}
.otherchoice_30 .other_item{
    width: 60%;
}

.body_pc .otherchoice_30 .other_item{
    width: 45%;
}

.otherchoice_30 .title{
    width: 50%;
    position: absolute;
    transform: translate(-50%,0);
    left: 50%;
    top: -1.5%;
}

.otherchoice_30 .choice{
    padding: 7% 0 7%;
    text-align: right!important;
}

/** 診断結果 70% **/
.gowatsuki_70{
	background-color: #f5feff;
}

.gowatsuki_70 a:hover{
    opacity: 0.8;
}

.bestchoice_70{
    width: 95%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    margin-bottom: 15%;
    padding-top: 8%;
}
.gowatsuki_70 .square{
    background-color: #e8f7f9;
    width: 95%;
    height: 81.5%;
    position: absolute;
    z-index: -1;
    bottom: 4%;
    left: 6%;
}

.body_pc .gowatsuki_70 .square{
    height: 79%;
    bottom: 3%;
    left: 5%;
}

.bestchoice_70 .best_item{
    width: 70%;
}
.body_pc .bestchoice_70 .best_item{
    width: 50%;
}

.otherchoice_70{
	background-color: #cfeff4;
    position: relative;
    padding-bottom: 7%;
}
.otherchoice_70 .other_item{
    width: 70%;
}

.body_pc .otherchoice_70 .other_item{
    width: 45%;
}

.otherchoice_70 .title{
    width: 50%;
    position: absolute;
    transform: translate(-50%,0);
    left: 50%;
    top: -1.5%;
}

.otherchoice_70 .choice{
    padding: 7% 0 7%;
    text-align: right!important;
}
.otherchoice_70 .gowatsuki_result .txt1{
    font-size: 1.25em;
    margin-bottom: 1.3em;
    letter-spacing: 0.05em;
}

/** 診断結果 95% **/
.gowatsuki_95{
	background-color: #f5f7fe;
}

.gowatsuki_95 a:hover{
    opacity: 0.8;
}

.bestchoice_95{
    width: 95%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    margin-bottom: 15%;
    padding-top: 8%;
}
.gowatsuki_95 .square{
    background-color: #eff2f9;
    width: 95%;
    height: 83%;
    position: absolute;
    z-index: -1;
    bottom: 3%;
    left: 6%;
}

.body_pc .gowatsuki_95 .square{
    height: 79.5%;
    bottom: 3%;
    left: 5%;
}
.bestchoice_95 .best_item{
    width: 70%;
}
.body_pc .bestchoice_95 .best_item{
    width: 50%;
}

.otherchoice_95{
	background-color: #d4daf0;
    position: relative;
    padding-bottom: 7%;
}
.otherchoice_95 .other_item{
    width: 70%;
}

.body_pc .otherchoice_95 .other_item{
    width: 45%;
}

.otherchoice_95 .title{
    width: 50%;
    position: absolute;
    transform: translate(-50%,0);
    left: 50%;
    top: -1.5%;
}

.otherchoice_95 .choice{
    padding: 7% 0 7%;
    text-align: right!important;
}


/** 下部のボタン **/
.rebtn{
	text-align: center;
    margin: 0 auto;
    width: 75%;
    padding: 7% 0 5%;
}
.body_pc .rebtn{
    width: 55%;
    padding: 5% 0 5%;
}

.rebtn img{
	margin-bottom: 5%;
}


.snsarea {
	text-align:center;
	background-color: #FFF;
    padding: 5% 0;
}

.snsarea p {
	font-size: 1.1em;
	margin-bottom: 3%;
}

.body_pc .snsarea p {
	font-size: 1.4em;
}
.snsbtn {
    margin: 0 auto;
}

.snsbtn p {
	margin-right: 10%;
	display: inline-block;
}

.body_sph .snsbtn p {
	width: 15%;
}

.snsbtn p:last-child {
	margin-right: 0;
}


/* SPH */

.body_sph .rebtn img {
	width: 80%;
}

@media screen and (max-width: 768px) {
  #selection {
    max-width: 375px;
  }

  #qalert {
    font-size: 0.85em;
  }

  .gowa_attention {
    font-size: 0.8em;
  }

  .snsbtn p {
    width: 15%;
  }

  .rebtn img {
    width: 80%;
  }

  .qaBox .flickarrow_q1 {
	background-image:url(../images/flick_arrow_bg_q1.png);
	background-repeat: no-repeat;
	background-position: center;
    background-size: contain;
    max-width: 360px;
  }

  .qaBox .flickarrow_q2 , .flickarrow_q3, .flickarrow_q4 {
	background-image:url(../images/flick_arrow_bg_q2_3.png);
	background-repeat: no-repeat;
	background-position: center;
    background-size: contain;
    max-width: 360px;
  }

  .qaBox .flickarrow_q5 {
	background-image:url(../images/flick_arrow_bg_q4.png);
	background-repeat: no-repeat;
	background-position: center;
    background-size: contain;
    max-width: 360px;
  }
}