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

.clearfix:after {
  clear: both;
  content: '';
  display: block;
}

#wrapper p{
	margin: 0;
	padding:0;

}

a {
  word-break: break-all;
}

#wrapper p a img{
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -ms-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;

}

#wrapper p a img:hover {
  opacity: 0.7;
}
/*a img {
  border-style:none;
  }*/
  #wrapper p a{
    height: auto;
  }

  #wrapper img{
    max-width: 100%;
    display: block;
    vertical-align: top;
  }

.green_link{
  color: #1fa575;
  text-decoration: underline;
}

.green_link:visited{
  color: #1fa575;
}

/*============================
#main
============================*/
#wrapper {
  max-width: 1200px;
  min-width: 1200px;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: block;
  font-size: 0;
}
header{
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
}
#wrapper section{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/*============================
#section(PC版CSS)
============================*/
/*共通*/

#wrapper a:link { color: #1fa575; }
#wrapper a:visited { color: #1fa575; }
#wrapper a:hover { color: #1fa575; }
#wrapper a:active { color: #1fa575; }

#wrapper .rel_wrap{
  position: relative;
  max-width: 100%;
}

/*sec_2*/
#wrapper .sec_2 .text_wrap{
  position: absolute;
  width: 100%;
  font-size: 18px;
  line-height: 40px;
  text-align:  center;
  top:40px;
}

#wrapper .sec_2 .s_text{
  position: absolute;
  font-size: 12px;
  line-height: 20px;
  text-align: left;
  top:5px;
  left: 220px;
}
#wrapper .sec_2 .btn_amazon{
  position: absolute;
  top:130px;
  left:370px;
}

/*sec_3*/
#wrapper .sec_3 .btn1_1{
  position: absolute;
  top: 290px;
  left: 152px;
}
#wrapper .sec_3 .btn1_2{
  position: absolute;
  top: 290px;
  left: 650px;
}

#wrapper .sec_3 .btn1_3{
  position: absolute;
  top: 269px;
  left: 152px;
}
#wrapper .sec_3 .btn1_4{
  position: absolute;
  top: 269px;
  left: 650px;
}

/*sec_4*/
#wrapper .sec_4 .btn_amazon{
  position: absolute;
  top: 0px;
  left:370px;
}
#wrapper .sec_4 .text_link{
  position: absolute;
  top: 120px;
  width: 100%;
  font-size: 20px;
}
#wrapper .sec_4 .text_link a {
  text-decoration: underline;
}
/*sec_5*/
#wrapper .sec_5 .text_wrap{
  position: absolute;
  width: 760px;
  font-size: 18px;
  line-height: 40px;
  text-align: left;
  top: 196px;
  left: 220px;
}
#wrapper .sec_5 .h3_text{
  position: absolute;
  width: 760px;
  font-size: 18px;
  line-height: 20px;
  text-align: left;
  top: 30px;
  left: 220px;
}
#wrapper .sec_5 .btn3{
  position: absolute;
  top: 58px;
  left: 350px;
}
/*sec_6*/
#wrapper .sec_6{
  width: 760px;
  margin:0 auto;
}
#wrapper .sec_6 a:link {
  color: #0033cc;
  text-decoration: underline;
}
#wrapper .sec_6 a:visited { color: #0033cc; }

#wrapper .sec_6 .answer_wrap{
  height: 480px;
  width: 100%;
}
#wrapper .sec_6 .answer_wrap .qa_left{
  width:340px;
  height: 480px;
  float: left;
}
#wrapper .sec_6 .answer_wrap .qa_right{
  width:240px;
  height: 480px;
  float: right;
}
#wrapper .sec_6 .button_wrap{
  margin: 20px 0;

}
#wrapper .sec_6 .button_wrap img{
  display: inline;
  margin-right: 20px;
}
/*sec_7*/
#wrapper .sec_7 .btn_amazon{
  position: absolute;
  top: 60px;
  left:130px;
}
#wrapper .sec_7 .btn_site{
  position: absolute;
  top: 60px;
  left: 610px;
}


/*============================
#acMenu(アコーディオン)
============================*/
#wrapper .acMenu{
  font-size: 18px;
  width: 100%;
  text-align: left;
}

#wrapper .acMenu dl{
  border: solid;
  border-width: 1px;
  border-color: #000;
  margin-bottom: 10px;
}
#wrapper .acMenu dt{
  font-size: 22px;
  height: 80px;
  line-height: 80px;
  padding-right: 80px;
  display: block;
  background: #000;
  color: #fff;
  text-align: center;
  background-image: url(../images/faq_close.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right 0 center;
}

#wrapper .acMenu .active{
  background-image: url(../images/faq_open.jpg);
  background-repeat: no-repeat;
  background-position: right 0 center;
}

#wrapper .acMenu .question{
  padding:4%;
  line-height: 32px;
  background-image: url(../images/icon_plus.png);
  background-repeat: no-repeat;
  background-size: 80px auto;
  background-position:right 80px center;
}
#wrapper .acMenu .active2{
  background-image: url(../images/icon_cross.png) !important;
  background-repeat: no-repeat;
}

#wrapper .acMenu .answer{
  line-height: 40px;
  position: relative;
  padding:2% 4% 2% 4%;
  border-top: 2px dotted #aaa;
  color: #1fa575;
}

#wrapper .acMenu .question{
  padding: 3% 5% 3% 5%;
  line-height: 32px;
  background-image: url(../images/icon_plus.png);
  background-repeat: no-repeat;
  background-size: 26px auto;
  background-position:right 1% center;
}

#wrapper .acMenu .question::before{
  position: absolute;
  margin-left: -34px;
  content: "Q.";
}

#wrapper .acMenu .answer::before{
  position: absolute;
  margin-left: -4%;
  content: "A.";
}

#wrapper .acMenu2 {
  border: solid;
  border-width: 1px;
  border-color: #000;
  padding:0 3% 0 3%;
}

#wrapper .acMenu .answer .answer_left{
    padding-left: 2em;
}
#wrapper .acMenu .answer_imgIn{
  position: relative;
  padding:3% 10% 3% 5%;
  border-top: dotted;
  border-color: #aaa;
  color: #1fa575;
  line-height: 32px;
}

#wrapper .acMenu .answer_imgIn p {
padding-left: 0.6em;
position: relative;
}
#wrapper .acMenu .answer_imgIn p:before{
  margin: 0.3em 0.2em 0 -1em;
  content: "A.";
  position: absolute;
  top:0;
  left:0.3em;
  line-height: 20px;
}

#wrapper .acMenu .answer_imgIn span {
  display: block;
  position: relative;
}
#wrapper .acMenu .answer_imgIn span:before{
  position: absolute;
  margin-left: -6%;
  content: "A.";
}

#wrapper .acMenu .answer_imgIn .active2{
  background-image: none;
}


#wrapper .acMenu2 .small_text{
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  line-height: 24px !important;
}

#wrapper .answer_imgIn div.youtube {
  width: 100%;
  padding-top: 56%;
  position: relative;
  margin-top: 3%;
}

#wrapper .answer_imgIn div.youtube div.youtube_inner iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*accordion*/
.accordion dt{
  position: relative;
}

.accordion dt:before {
  content: '';
  background-image: url(icon_arrow.png);
  width: 20px;
  height: 20px;
  background-size: cover;
  position: absolute;
  top: 40%;
  right: 5%;
}

.accordion dt.active:before {
  top: 40%;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}


/*table*/
.qrio_table{
  min-width: 100%;
  text-align: center;
  margin: 10px 0 10px -25px;
}
.qrio_table th, td{
  min-width: 167px;
}
.qrio_table th{
  color:#fff;
  border: 2px solid #5c5c5c;
  padding:5px;
  background: #5c5c5c;
  white-space: nowrap;
}
.qrio_table td{
  color:#5c5c5c;
  border: 2px solid #5c5c5c;
  background: #fff;
  line-height:18px;
  padding: 18px;
  vertical-align: middle;
}
.qrio_table .title{
  min-width: 210px;
}
.qrio_table .table2_title{
  min-width: 200px;
}
.qrio_table .table2_col{
  min-width: 255px;
}
.table2 td{
  padding:12px;
  line-height: 30px;
}
.qrio_table .ta_l{
  text-align: left;
}
.qrio_table .va_t{
  vertical-align: top;
}

/*スマートフォン*/
.smp_table{
  width: 760px;
  font-size: 18px;
  text-align: center;
  margin: 0 auto;
  line-height: 30px;
}
.smp_table th{
  color:#fff;
  border: 2px solid #5c5c5c;
  font-size: 20px;
  padding:10px;
  background: #5c5c5c;
  white-space: nowrap;
}
.smp_table td{
  color:#5c5c5c;
  border: 2px solid #5c5c5c;
  background: #fff;
  line-height:18px;
  padding: 30px;
  vertical-align: middle;
}
.smp_table .small_text{
  font-size: 12px;
  line-height: 2;
  margin-top: 25px;
  width: 100%;
  text-align: left;
}
.smp_table .va_t{
  vertical-align: top;
}

/*info*/
.info_table{
  width: 760px;
  font-size: 18px;
  text-align: center;
  margin: 10px auto;
  line-height: 30px;
}
.info_table .info_title{
  color:#fff;
  font-size: 20px;
  border: 2px solid #5c5c5c;
  padding: 10px;
  background: #5c5c5c;
  white-space: nowrap;
}
.info_table .info_detail{
  color:#000;
  border: 2px solid #5c5c5c;
  padding: 20px;
  white-space: nowrap;
}
/*sum*/
.sum_table{
  width: 760px;
  font-size: 18px;
  text-align: center;
  margin: 0 auto;
  line-height: 30px;
}
.sum_table .info_title{
  color:#fff;
  border: 2px solid #5c5c5c;
  font-size: 20px;
  padding: 10px;
  background: #5c5c5c;
  white-space: nowrap;
}
.sum_table .info_detail_1{
  color:#000;
  border: 2px solid #5c5c5c;
  vertical-align: middle;
  white-space: nowrap;
  background-repeat: no-repeat;
}
.sum_table .info_detail_2{
  color:#000;
  border: 2px solid #5c5c5c;
  padding: 25px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.sum_table .info_detail_2 img{
  margin: 0 auto;
}
.sum_table .sum_text{
  margin-left: 180px;
  text-align: left;
}
.sum_table .detail_1{
  background-image: url(../images/icon1.png);
  background-position: top 16px left 40px;
}
.sum_table .detail_2{
  background-image: url(../images/icon2.png);
  background-position: top 16px left 40px;
}
.sum_table .detail_3{
  background-image: url(../images/icon3.png);
  background-position: top 16px left 75px;
}
.sum_table .detail_4{
  background-image: url(../images/icon4.png);
  background-position: top 30px left 40px;
}