@charset "utf-8";
#staticPage .cf .txt2 { display: inline-block; float: right; width: 50%; font-size: 14px; margin-bottom: 20px;}
/*=============================
 色分け
=============================*/
/*買------------*/
#flow.buyPage h2, 
#flow.buyPage #flowList .itemBox h4 b{ color: #007442;}
#flow.buyPage h1 b, 
#flow.buyPage #flowList h3, 
#flow.buyPage #flowList .itemBox h4 span, 
#flow.buyPage #flowList .itemBox > p a:hover, 
#flow.flowInfo .inner h3, 
.tableArea h3{ background: #007442;}
#flow.buyPage #flowList .itemBox > p a:hover{  color: #fff;}

.tableArea table tr th{ background:#d9ecaa;}
.tableArea table tr td.tit{ background: #f4f9dd;}

/*=============================
 買共通
=============================*/
.buyPage{}
.buyPage > *{ width: 100%; float: left;}
.buyPage h1{ position: relative; height: 60px; margin-bottom: 30px;}
.buyPage h1:after{ position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; display: block; content: ""; background: #ccc; z-index: -1;}
.buyPage h1 span{ display: inline-block; border-bottom:4px solid #008342; font-size: 30px; line-height: 60px; padding: 0 15px;}
.buyPage > section > p,.buyPage > p{ font-size: 17px;}

/*=============================
 流れ
=============================*/
#flow{}
#flow h1 b{font-size: 16px; line-height: 30px; display: inline-block; padding: 0 20px; margin-right: 15px; color: #fff; border-radius: 50px; vertical-align: middle;}
#flow h2{ font-size: 24px; margin: 0 0 5px;}
#flow > section > p{ font-size: 18px; margin-bottom: 30px;}
#flow #flowList {}
#flow #flowList h3{ display: inline-block; color: #fff; font-size: 18px; padding: 5px 30px;}
#flow #flowList .itemBox { width: 100%; float: left; padding: 20px 3%; margin: 20px 0; box-shadow: 0 1px 4px #777; background: #fff; position: relative;}
#flow #flowList .itemBox h4{ width: 90%; float: right;}
#flow #flowList .itemBox h4 span { position: absolute; left: 2%; top: 50%; width: 60px; line-height: 20px; padding: 20px 0; color: #fff; font-size: 12px; margin-top: -30px; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; text-align: center;}
#flow #flowList .itemBox h4 b{ font-size: 24px; margin-bottom: 5px;}
#flow #flowList .itemBox > p{ width: 89%; float: right; font-size: 17px; line-height: 1.8em;}
#flow #flowList .itemBox > p span{ display:inline-block; width: 55%; float: left;}
#flow #flowList .itemBox > p img{ display: inline-block; float: right; width:38%; height: auto; border-radius: 10px;}
#flow #flowList .itemBox > p span a{ display: block; border: solid 1px #999; text-align: center; line-height: 36px; border-radius: 4px; color: #333; font-size: 15px; margin-top: 15px;}
#flow #flowList .itemBox > p a:hover{ color: #fff;}
#flow + .commonLinks {margin-top: 30px;}

/*=============================
 流れ　詳細
=============================*/
#flow.flowInfo > img{ width: 100%; height: auto; margin-bottom: 15px;}
#flow.flowInfo h2{ font-size: 26px;}
#flow.flowInfo > p{ line-height: 1.8em; margin-bottom: 50px;}
#flow.flowInfo .inner{}
#flow.flowInfo .inner > *{ width: 100%; float: left;}
#flow.flowInfo .inner h3{ padding: 5px 5%; font-size: 24px; font-weight: bold; color: #fff; border-radius: 50px;}
#flow.flowInfo .inner > img{ margin: 15px 0;}
#flow.flowInfo .inner > ul{margin-bottom:40px;}
#flow.flowInfo .inner > ul li{ width: 94%; float: left; margin: 5px 3%; list-style: disc; font-size: 17px;}
#flow.flowInfo .inner > .btn{ margin: 0 0 50px;}
#flow.flowInfo .inner > .btn a{ font-weight: normal; padding: 12px 60px; font-size: 15px;}
#flow.flowInfo .inner > dl {}
#flow.flowInfo .inner > dl dt{ font-size: 18px; display: inline-block; float: left; font-weight: bold; margin-bottom: 5px; padding:0 10px  5px; border-bottom: double 3px #aaa; margin-bottom: 15px;}
#flow.flowInfo .inner > dl dd{ width: 100%; float: left; font-size: 17px; margin-bottom: 15px;}
#flow.flowInfo .inner > p{ font-size: 18px;}

/*=============================
 税金
=============================*/
.taxList h2{ font-size: 26px;}
.tableArea{ padding: 30px 0 20px;}
.tableArea h3{ display: inline-block; color: #fff; padding: 5px 30px; border-radius: 50px; font-size: 18px; }
.tableArea table{ width:100%; margin: 10px 0%;}
.tableArea table tbody tr > *{ border: solid 1px #999; font-size: 17px !important; vertical-align: middle;}
.tableArea table tr{ width: 100%;}
.tableArea table tr th{ padding: 2px 2%; text-align: left;}
.tableArea table tr td{ padding: 8px 2%;}
.tableArea table tr td.tit{ min-width: 130px;}
.tableArea table tr td .txtBox, 
.tableArea table tr td .disc{ display: block; padding-left: 10px; position: relative; margin: 10px 0;}
.tableArea table tr td .disc::before{ content: "・"; position: absolute; left: -6px;}
.tableArea p{ width: 94%; margin:10px 3% 40px; }
.tableArea p a{ text-decoration: underline; color: #1a0dab;}



/*=============================
 FAQ
=============================*/
.faq > dl *{}
.faq > dl > *{ position: relative; font-size: 20px;}
.faq > dl dt{ width: 100%; padding: 15px 6% 15px 10%; background: #eee; margin-top: 20px; font-weight: bold; cursor:pointer;}
.faq > dl dt:hover{ text-decoration: underline;}
.faq > dl dt.open{box-shadow: 0 0px 2px #999; background:#f7ffd6;}
/**/
.faq > dl dt .q{ display: block; background: #007442; color: #fff; width: 30px; height: 30px; text-align: center; position: absolute; line-height: 30px; left: 2%; top: 12px;}
.faq > dl dt.open .q{ background: #9fbe0d;}
/**/
.faq > dl dt > .line{width: 20px;height: 20px;position: absolute;right: 1%;top: 50%;margin-top: -10px;display: block;background: #fff;}
.faq > dl dt > .line::before{ width: 14px; height: 2px; right:3px; top: 9px;}
.faq > dl dt > .line::after{width: 2px; height: 14px; right:9px; top: 3px;}
.faq > dl dt > .line::before, 
.faq > dl dt > .line::after{position: absolute; background: #007442; display: block; content: ""; -webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; transition:0.4s;}
.faq > dl dt.open > .line::before{} 
.faq > dl dt.open > .line::after{ width:0px;}
.faq > dl dt.open > .line::before, 
.faq > dl dt.open > .line::after{
transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}

/**/
.faq > dl dd{ width:100%; display: none; padding: 20px 2% 15px 10%; z-index: -1; background: #fff;}
.faq > dl dd.open{ box-shadow: 0 2px 4px #999; margin-top: -2px;}
.faq > dl dd::before{ display: block; background: #f7ffd6; border: solid 1px #9fbe0d; color: #7b930a; width: 30px; height: 30px; text-align: center; position: absolute; content: "A"; line-height: 30px; left: 2%; top: 22px; font-weight: bold;}

/**/
.faq > dl dd b{ display: block;}
.faq > dl dd .txt{ display: block; margin-bottom: 20px;}
.faq > dl dd .inset{ display: block; padding:2px 0 2px 20px;}
.faq > dl dd ol{ padding-left: 30px; margin: 5px 0 10px;}
.faq > dl dd ol li{list-style:decimal; padding: 2px 0;}
/**/
.faq > dl.investment{}
/**/
@media screen and (max-width: 600px){
.faq > dl dt{width: 80%; padding: 15px 8% 15px 12%; }
.faq > dl dd{ width: 86%; padding: 20px 2% 15px 12%; }
}

@media screen and (max-width: 400px){
.faq > dl dt{ width: 76%; padding: 15px 10% 15px 14%; }
.faq > dl dd{ width: 84%; padding: 20px 2% 15px 14%; }
.faq > dl dt::before, 
.faq > dl dd::before{ width: 24px; height: 24px; line-height: 24px; left: 2%; top: 17px;}
.faq > dl dd::before{ top: 22px;}
}

.faq > dl.investment dt::before { background: #111;}
.faq > dl.investment dt.open::before { background: #fff; color: #000; border:solid 1px #333;}
 
.faq + .commonLinks{margin-top: 30px;}

/* ===============================================================
 buyTop
=============================================================== */
#buyTop{ background:url(/assets/pc/buy/img/bk.jpg) no-repeat 50% 50%; background-size: cover; height: 140px;}
#buyTop #breadcrumbs a, 
#buyTop #breadcrumbs li:after{color: #fff;}
#buyTop .contIn h1{ font-size: 40px; color: #fff;}
#buyTop .contIn p{ color: #fff;}
.buyToph2{font-size: 22px; color: #008342; border-left:solid 5px #008342; padding-left: 10px; margin-bottom: 10px;}


/* ===============================================================
 title icon
=============================================================== */
h1 .ico:before{
	content: "";
	display: inline-block;
	height:24px;
	background-image: url(/assets/pc/common/img/icon_useful_big_set.png);
	background-repeat: no-repeat;
	margin-right: 15px;
}
h1 .ico_flow:before{width: 27px;background-position: 0 0;}
h1 .ico_faq:before{width: 20px;background-position: -49px 0;}
h1 .ico_tax:before{width: 22px;background-position: -26px 0;}