@import url("https://use.fontawesome.com/releases/v5.4.1/css/all.css");
@import url(https://fonts.googleapis.com/earlyaccess/notosanssc.css);

body,p,ul,li,dl,dt,dd,h1,h2,h3,h4 {margin:0; padding:0; list-style:none;}
body {
	font-family:"'Noto Sans',ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:16px;
	color:#242424;
	background:url(../images/bg.jpg) top left repeat;}

a:link    {color:#0079C2; text-decoration:underline;}
a:visited {color:#0079C2; text-decoration:underline;}
a:active  {color:#0079C2; text-decoration:underline;}
a:hover   {color:#0079C2; text-decoration:none;}

/*====================
 Layout
====================*/
html {font-size:62.5%;}
body {font-size:1.2rem; font-family: 'Noto Sans SC', 'Microsoft Yahei' , sans-serif;}

main{
    width: 1080px;
    padding:30px 0 0 0;
    margin: 0 auto;}

h3{ font-size: 1.6rem;
    margin: 0.5em 0 1.2em 0;}

@media all and (max-width: 640px){
    main{width: 95%;}
    
    h3 {
        font-size: 1.4rem;
        margin: 0.5em 0 1.2em 0;
        line-height: 150%;}

    #question li {
        width: calc(94% - 2px);
        border: 1px solid #ccc;
        padding: 2% 3%;
        font-size: 1.2rem;
        line-height: 140%;}
}

/*====================
 js
====================*/
.on{background: #ccc !important; width:96% !important;}
.on:hover{background: #ccc !important;}
.payment_wrap,
.order_wrap,
.shipping_wrap,
.bonuses_wrap,
.points_wrap,
#select{display: none;}
.active{display: block;}

.current{
    border-left: 5px solid #0079c7 !important;
    background: #f7fdff;}

@media all and (min-width: 641px){
    .current{
        padding-left: calc(2% - 4px) !important;}
}

@media all and (max-width: 640px){
    .current{
    padding-left: 2% !important;}
}

/*====================
 Select
====================*/
#main_faq{
    position: relative;
    font-size: 1.6rem;
    border: 1px solid #999;
    padding: 1% 2%;
    width: calc(96% - 2px);}

@media all and (max-width: 640px){
#main_faq {
    position: relative;
    font-size: 1.5rem;
    border: 1px solid #999;
    padding: 3%;
    width: calc(94% - 2px);
}
}

/*
#select{
    display: none;}
*/

#select li,
p.head{
    position: relative;
    width: calc(96% - 2px);
    border: 1px solid #ccc;
    border-top:none;
    padding: 1% 2%;
    color: #333;
    font-size: 1.4rem;
    background: #f6f6f6;}

@media all and (max-width: 640px){
#select li,
p.head{
    position: relative;
    width: calc(94% - 2px);
    border: 1px solid #ccc;
    border-top:none;
    padding: 3%;
    color: #333;
    font-size: 1.5rem;
    background: #f6f6f6;}
}

#select li:after,
p.head:after{
    content: '\f078';
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right:1.25em;
    top: calc(50% - 0.5em);
    color: #999;}

#main_faq:after{
    content: '\f078';
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 1em;
    top: calc(50% - 0.5em);
    color: #999;}

/*====================
 Question
====================*/
#question li{
    width: calc(96% - 2px);
    border: 1px solid #ccc;
    padding: 1% 2%;
    font-size: 1.3rem;}

@media all and (max-width: 640px){
#question li{
    width: calc(94% - 2px);
    border: 1px solid #ccc;
    padding: 3%;
    line-height: 150%;
    font-size: 1.3rem;}
}

#question li:not(:first-child){border-top:none;}

#question > div > div li:first-of-type {
    border-top: none !important;}

/*====================
 Answer
====================*/
#answer{}

.answer_box{
    display: none;
    margin:20px auto;
    padding:20px 20px 0 20px;
    border:1px solid #ccc;}

.answer_txt{
    width: 96%;
    background: #f8f8f8;
    padding:2% 2% 0 2%;
    margin: 1em auto 3em auto;}

.answer_txt > div{
    font-size:1.35rem;
    line-height: 170%;}

/*====================
 Vote
====================*/
.vote,
.form{
    text-align: center;
    font-size:1.4rem;
    margin: 0 auto 2em auto;
    overflow: hidden;}

.vote{width: 30%;}
.form{width: 45%;}

.btn{
    width:64%;
    margin: 2% auto;
    height: 35px;
    line-height: 35px;
    color:#fff;
    background: #0079c7;
    transition: all 0.5s;}

.btn:hover{
    background: #173d81;}

.btn_area{
    overflow: hidden;
    height: calc(35px + 4%);}

.btn_area .btn{
    width: 46%;
    margin: 2%;
    color:#fff;
    float: left;}

.btn a{
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
    color:#fff;}

.small{
    color:#666;
    font-size:1.1rem;}

@media all and (max-width: 640px){
    .vote,
    .form{width: 95%;}
    .btn{width:95%;}
    }


/*====================
 Img
====================*/
.img{
    max-width: 700px;
    text-align: center;
    margin:20px auto 0 auto;}

.img img{
    max-width: 100%;
    width:auto;
    height: auto;}


@media all and (max-width: 640px){
    .img{
        width: 95%;
        margin: 10px auto 0 auto;
        
    }
    .img img{
        width: 100%;
        height: auto;
    }
}


/*====================
 txt
====================*/
dl{
    overflow: hidden;
    line-height: 150%;
    padding:0.5em;
    font-size:1.3rem;}

dt{font-weight: bold; margin-top: 0.5em;}
dd{padding-left: 0.5em;}

dl + p{margin-top:2em;}

.answer_txt p{font-size:1.4rem;}
.answer_txt p:not(:first-child){margin-top:1em;}

.answer_txt ul,
.contact ul{
    margin:0.5em 1.0em 1.0em 1.0em;
    overflow: hidden;
    line-height: 150%;
    font-size: 1.3rem;}

.answer_txt ul:first-child{margin:0 0 1.0em 0;}

.answer_txt li,
.contact li{
    margin-top: 0.5em;
    text-indent: -1em;
    padding-left: 1em;}

.answer_txt li span{font-weight: bold;}

/*====================
 contact
====================*/
p.btn + p{
    margin-top: 1em;}

.contact{
    width: 285px;
    line-height: 130%;
    text-align: left;
    background: #f8f8f8;
    margin-top: 1em;
    padding: 0.5em;}