@charset 'UTF-8';

/* contents */

#contents .indent{ display:inline-block; text-indent:-20px; margin-left:20px; }
#contents .pt55{ padding-top:55px !important; }
#contents .pb30{ padding-bottom:30px !important; }
#contents p.goTop{ text-align:right; margin:20px 0; }
#contents p.goTop aCATSCARF:before{ content:url(/img/arrowUp.gif); margin-right:5px; }
#contents{ text-align:center; width:100%; max-width:1000px; margin:0 auto; }
#contents .iNav{ text-align:left; border:1px solid #ccc; padding:0 15px; box-sizing:border-box; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background:#fbfbfb; }
#contents .iNav li{ display:inline-block; margin:5px 10px; }
#contents .iNav li a:before{ content:url(/img/arrowDown.gif); color:#ccc; margin-right:5px; }
#contents .capt{ text-align:left; padding:5px 15px; }
#contents .flow li{ list-style:none; text-align:left; border:1px solid red; width:45%; padding:10px; }
#contents .flow li.right{ margin-left:50%; }

/* flow */
#flow table{ text-align:left; width:100%; margin:0 auto;border-spacing: 0px !important; }
#flow th{ padding:10px; padding-right:20px; padding-bottom:33px; font-size:18px; box-sizing:border-box; }
#flow th span{ display:inline-block; padding:10px 0; }
#flow th.buy{color:#49bc49; text-align:right; }
#flow th.buy span{ border-bottom:3px dotted #49bc49; }
#flow th.sel{ color:#0c73ff; text-align:left; border-right:10px solid #8c8c8c; }
#flow th.sel span{ border-bottom:3px dotted #0c73ff; }
#flow th.sel img{ vertical-align: middle; padding-right:10px; width:30px; }
#flow th.buy img{ vertical-align: middle; padding-left:10px; width:30px; }

@media screen and (max-width:465px){
#flow .pcOnly{ display:none; }
#flow th.buy img{ padding-left:40px; }
}
@media screen and (min-width:466px){
#flow .spOnly{ display:none; }
}

#flow td{ vertical-align: top; }
#flow dl{ margin-top:-33px; margin-bottom:33px; }
#flow td.selCon{ border-right:10px solid #8c8c8c; width:50%; padding:10px; box-sizing:border-box; }
#flow td.rakusatu{ border-right:10px solid orange !important; }
#flow td.selCon dt{ position:relative; background:#0c73ff; padding:10px 15px; color:#fff; border-top-left-radius:10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft:10px;border-top-right-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topright:10px; }
#flow td.selCon dt:before{ content:""; position:absolute; top:30px; right:-21px; margin-top:-15px; border:8px solid transparent; border-left:13px solid #0c73ff; }
#flow td.selCon dd{ background:#fffcf7; padding:10px; }
#flow td.buyCon{ width:50%; padding:10px; box-sizing:border-box; }
#flow td.buyCon dt{ position:relative; background:#49bc49; padding:10px 15px; color:#fff; border-top-left-radius:10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft:10px;border-top-right-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topright:10px; }
#flow td.buyCon dt:before{ content:""; position:absolute; top:30px; left:-21px; margin-top:-15px; border:8px solid transparent; border-right:13px solid #49bc49; }
#flow td.buyCon dd{ background:#fffcf7; padding:10px; }
#flow .sten{ border:3px solid #8c8c8c; }
#flow .sten dl{ margin:0; }
#flow .sten dt{ color:#fff; font-size:15px; display:block; background:#8c8c8c; padding:15px; margin-bottom: }
#flow .sten dd{ padding:10px; }
#flow .end{ border:3px solid orange !important; }
#flow .end dt{ background:orange !important; }
@media screen and (max-width: 500px){
#flow td.buyCon dd,#flow td.selCon dd{ font-size:12px; line-height:1.4em; }
}

/* cost-howto-faq-footer */
#cost{ text-align:left; }
#cost .zero{ font-size:20px; display:inline-block; border:1px solid #ccc; padding:25px 20px 20px 20px; font-weight:bold; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; margin:0 2px; }
#cost .zero span{ color:red; font-size:30px; margin-right:5px; }
#howto{ text-align:left; }
#faq{ text-align:left; }
#faq dl{ border:1px solid #ccc; padding:5px 15px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; margin-bottom:15px;  }
#faq dt{ border-bottom:1px dotted #ccc; padding:10px 0px 10px 40px; background:url(../img/icon_qa_q.jpg) left center no-repeat; }
#faq dd{ padding:10px 10px 10px 40px; background:url(../img/icon_qa_a.jpg) left center no-repeat; }
#footer{ margin-top:50px; }