@charset "UTF-8";

/* common_setting
-------------------------------------------------------------*/
.contents_right {
text-align: center;
float: right;
width: 780px;
}
.f_left {
float:left;
}
.color_red {
color: #f00;
}

/* navigation
-------------------------------------------------------------*/
.nav_box ul {
width: 100%;
display: block;
margin-bottom: 15px;
list-style:none;
}
.nav_box li {
position: relative;
float: left;
width: 33.3%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
background: #DDD;
border-bottom: 1px solid #DDD;
}
.nav_box li.current {
background:#F90;
background-repeat: no-repeat;
background-position: center 28px;
border-bottom: none;
padding-bottom: 1px;
}
.nav_box li.current:after,
.nav_box li.current:before {
content:"";
position:absolute;
height:0;
width:0
}
.nav_box li.current:after {
bottom:-8px;
left:50%;
border:10px solid transparent;
border-bottom:15px solid #FFF;
margin-left:-10px
}
.nav_box li.current:before {
bottom:-8px;
left:50%;
border:10px solid transparent;
border-bottom:10px solid #FFF;
margin-left:-10px
}
.nav_box a{
display: block;
margin: 0;
text-align: center;
height: 40px;
line-height:43px;
font-size: 16px;
font-weight:bold;
color:#666;
border-right: 1px solid #FFF;
}
.nav_box a:hover{
text-decoration:none;
}
.nav_box li.current a{
color:#FFF;
}
.nav_box li:last-child a{
border-right:none;
}
/* explain_area
-------------------------------------------------------------*/
.explain_area {
width:100%;
margin:0 auto 20px;
text-align: left;
}
.explain_area p{
font-size: 14px;
line-height: 1.4;
}
.explain_area p.note {
padding: 5px;
text-align: right;
font-size:12px;
}
.explain_area h3{
margin-bottom: 10px;
padding-left: 8px;
border-bottom: 2px solid #F90;
line-height: 22px;
font-size: 17px;
font-weight: bold;
text-align:left;
}
.explain_area .app_store_link_wrapper {
display: flex;
justify-content: space-evenly;
margin: 5px 0 2px;
}
.explain_area .app_store_link{
display: block;
text-align: center;
}
.explain_area .app_store_link a{
display: block;
}
.explain_area .app_store_link img{
width: 165px;
height: auto;
}
.explain_area .app_store_link .qrimg{
width: 120px;
height: auto;
}


/* explain_area ex_detail
-------------------------------------------------------------*/
.explain_area .ex_detail{
margin: 0 auto;
box-sizing: border-box;
margin-bottom: 20px;
}
.explain_area .ex_detail ul{
margin-top: -5px;
padding-top: 12px;
}
.explain_area .ex_detail li{
display: block;
float: left;
width: 50%;
box-sizing: border-box;
margin: 10px 0;
}
.explain_area .ex_detail li:nth-child(odd){
padding: 0 10px 0 0;
}
.explain_area .ex_detail li:nth-child(even){
padding: 0 0 0 10px;
}
.explain_area .ex_d_imgbox {
display: table-cell;
padding-right: 10px;
vertical-align: top;
}
.explain_area .ex_d_txtbox{
display: table-cell;
vertical-align: top;
text-align: left;
padding-top: 2px;
font-size: 14px;
}

/* merit_summary
-------------------------------------------------------------*/
.explain_area .merit_summary{
background: #FFF3E2;
padding: 10px;
}
.explain_area .merit_summary .merit_title {
width: 99%;
padding: 2px 0 3px 2px;
}
.explain_area .merit_summary .merit_title a:hover {
text-decoration: none;
opacity: .8;
}
.explain_area .merit_summary .title_num {
display: table-cell;
width: 23px;
height: 23px;
background: #F90;
vertical-align: middle;
text-align: center;
line-height: 1;
color:#FFF;
box-shadow: 3px 3px 0 #CCC;
-webkit-box-shadow: 3px 3px 0 #CCC;
}
.explain_area .merit_summary .title_text {
display: table-cell;
padding-left: 5px;
border-bottom: none;
vertical-align: middle;
color: #646464;
font-size: 14px;
font-weight: bold;
text-decoration:underline;
}

/* merit_detail
-------------------------------------------------------------*/
.explain_area .merit_detail {
margin: 15px auto 0;
padding: 0 5px;
}
.explain_area .merit_detail + .merit_detail {
margin: 40px auto 0;
padding: 0 5px;
}
.explain_area .merit_detail .merit_title {
padding: 5px 10px;
}
.explain_area .merit_detail .merit_title .title_text {
border-bottom: 1px solid #F90;
padding-left: 48px;
text-indent: -48px;
color: #646464;
font-size: 16px;
font-weight: bold;
}
.explain_area .merit_detail .merit_title .title_num {
margin-right: 5px;
font-weight: bold;
color: #F90;
}
.explain_area .merit_detail .merit_contents {
padding: 12px 0 0;
background: #FFF;
text-align: left;
}
.explain_area .merit_detail .merit_contents_inner {
margin: 0 auto 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
}
.explain_area .merit_detail .merit_contents_inner:last-child {
margin: 0 auto 25px;
padding-bottom: 0;
border-bottom: none;
}
.explain_area .merit_detail .merit_img{
width: 55%;
border: solid 1px #ccc;
border-radius: 2px;
margin: 6px 0;
}
.explain_area .merit_detail .merit_img img {
width: 100%;
height: auto;
}
.explain_area .merit_detail .merit_contents span.arrow {
display: block;
width: 0;
height: 0;
margin: 100px 30px 5px;
border-style: solid;
border-width: 10px 5px 10px 12px;
border-color: transparent transparent transparent #F90;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/* howto_title
-------------------------------------------------------------*/
.explain_area .explain_inner2 {
margin:10px auto 0;
padding: 8px 5px;
border: 1px solid #F90;
border-radius: 3px;
}
.explain_area .explain_inner2 .box_left {
float:left;
width:50%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.explain_area .explain_inner2 .box_right {
float:right;
width:50%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.explain_area .howto_title {
display: table;
width: 95%;
border-bottom: 1px solid #F90;
}
.explain_area .howto_title .title_num {
display: table-cell;
width: 14px;
padding: 5px;
background: #F90;
font-size: 16px;
color: #FFF;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.explain_area .howto_title .title_text {
display: table-cell;
padding-left: 5px;
vertical-align: middle;
color: #646464;
font-size: 16px;
font-weight: bold;
}
.explain_area .howto_contents {
padding:10px 10px 15px;
background: #FFF;
text-align:left;
}
.explain_area .capture {
display: block;
margin: 0 auto;
width: 100%;
max-width: 350px;
border-radius: 2px;
text-align: center;
}
.explain_area .caption_top {
margin-bottom: 5px;
font-size: 13px;
text-align:left;
}
.explain_area .caption_top.br {
margin-bottom: 20px;
font-size: 13px;
text-align:left;
}
.explain_area .caption_top.center {
margin-top: 5px;
font-size: 13px;
text-align:center;
}
.explain_area .caption_bottom {
margin-top: 5px;
font-size: 13px;
text-align:left;
}
.explain_area .caption_bottom2 {
margin-top: 8px;
font-size: 14px;
text-align:center;
}

/* tab
-------------------------------------------------------------*/
.app_box_wrapper{
width: 100%;
padding-top: 3px;
}
.app_box_wrapper ul{
display: table;
width: 100%;
margin: 0 auto;
}
.app_box_wrapper ul li {
display:table-cell;
width:50%;
line-height:28px;
}
.app_box_wrapper ul li:hover{
cursor: pointer;
}
.app_box_wrapper ul li span { /* 非選択BOX-左右共通 */
display: block;
text-align: center;
border-radius: 3px 3px 0 0;
border-top: 3px solid #888888;
border-bottom: 1px solid #FF7709;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.app_box_wrapper ul li:nth-child(1) span { /* 非選択BOX-左 */
border-right: none;
border-left: 1px solid #888888;
}
.app_box_wrapper ul li:nth-child(2) span { /* 非選択BOX-右 */
border-right: 1px solid #888888;
border-left: none;
}
.app_box_wrapper ul li.selected span { /* 選択BOX */
display: block;
opacity: 1;
border-top: 3px solid #F90;
border-right: 1px solid #F90;
border-bottom: 1px solid rgba(0,0,0,0);
border-left: 1px solid #F90;
}
.app_box_wrapper .tab_text{ 
color: #888888;
font-weight: bold;
font-size: 14px;
text-align:center;
}
.app_box_wrapper li.selected .tab_text{
color: #333;
padding-top: 5px;
font-size: 17px;
}
.tab_inner{
border-left: solid 1px #f90;
border-bottom: solid 1px #f90;
border-right: solid 1px #f90;
border-radius: 0 0 3px 3px;
margin-bottom: 20px;
margin-top: -1px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.tab_inner .explain_area {
width: 95%;
}
/* tab_cat1
-------------------------------------------------------------*/
.cat1_tab{
display: block;
width: 100%;
padding: 15px 2px 0 3px;
}
.cat1_tab:after{
content: " ";
display: block;
clear: both;
}
.cat1_img{
float:left;
}
.cat1_con{
padding: 0 10px 0 68px;
}
.cat1_imgwidt{
width:60px;
height:60px;
}

/* tab_cat2
-------------------------------------------------------------*/
.cat2_top{
padding-top:15px;
margin-bottom: 0px;
}
.cat2_img_ic{
width:25px;
height: auto;
margin: 0px 4px;
}


/* dif_table
-------------------------------------------------------------*/
.explain_area .dif_table {
margin:5px auto;
text-align:center;
}
.explain_area .dif_table img {
width: 100%;
height: auto;
}

/* device_img
-------------------------------------------------------------*/
.explain_area .device_img img {
display: block;
margin: 5px auto;
max-width: 100%;
height: auto;
text-align: center;
}

/* more_link
-------------------------------------------------------------*/
.explain_area .more_link {
text-align:right;
font-size:13px;
}
.explain_area .more_link .arrow {
display: inline-block;
width: 0;
height: 0;
margin: 0 4px 0 2px;
border-style: solid;
border-width: 5px 0 5px 9px;
border-color: transparent transparent transparent #F90;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.explain_area .more_link a,
.explain_area .more_link a:hover {
color: #333;
font-weight: normal;
}

/* faq/inquiry
-------------------------------------------------------------*/
.red_btn {
position:relative;
margin: 5px auto;
padding: 10px 0;
width: 55%;
height: 50px;
background: #F90;
border: 1px solid #F90;
border-radius: 5px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
color: #FFF;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 30px;
}
.red_btn:hover {
background: #FFB62F;
}
.red_btn a {
color: #FFFFFF;
display: block;
}
.red_btn a:hover {
text-decoration: none;
}
.red_btn .arrow {
position: absolute;
top: 19px;
right: 8px;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #FFF;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/* announce_area
-------------------------------------------------------------*/
.announce_area {
margin: 10px auto;
width: 80%;
}
.announce_area_inner {
background: #fdfbba;
border: 2px dotted #1c1259;
border-radius: 10px;
padding: 15px;
}
.announce_area .announce_caption {
padding: 5px 0;
line-height: 1;
text-align: center;
font-size: 2em;
font-weight: bold;
color:#1c1259;
}
.announce_area .announce_caption img {
margin: 0 5px 5px 0;
}
.announce_area .announce_caption .note {
font-size: 0.7em;
font-weight: normal;
}
.announce_area .announce_caution {
font-size: 14px;
}
.announce_area .explain_txt {
display: flex;
width: 440px;
margin: 10px auto 0;
background: #fff;
border-radius: 10px 10px 0 0;
font-size: 14px;
font-weight: bold;
}
.announce_area .explain_txt .setting {
padding-top: 10px;
border-radius: 10px;
text-align: center;
color: #333;
}
.announce_area .explain_txt .setting.left {
width: 68%;
}
.announce_area .explain_txt .setting.left:hover {
text-decoration:none;
}
.announce_area .explain_txt .setting.left .underline {
text-decoration:underline;
}
.announce_area .explain_txt .setting.right {
width: 32%;
}
.announce_area .explain_img {
margin: 0 auto 10px;
text-align: center;
}
.announce_area .explain_img a:hover img {
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
filter: alpha(opacity=100);
-ms-filter: "alpha(opacity=100)";
}
.announce_area .explain_img img.left {
border-radius: 0 0 0 10px;
}
.announce_area .explain_img img.right {
border-radius: 0 0 10px 0;
}
.announce_area .announce_push {
text-align: center;
font-size: 1.7em;
font-weight: bold;
padding-bottom: 5px;
color:#f00;
}