@charset "UTF-8";

/* ===================================================================
CSS information

file name  :page.css
style info :コンテンツエリア関係 他

input[type="text"]

=================================================================== */

html,
body {
    height: 100%;
}

.cfx {
    overflow: hidden;
}

#wrapper {
    background-color: #faf7f0;
}

table.gaiyou,
#flow .sp_flow,
footer {
    background: #fff;
}

#index {
    color: #444444;
    font-family: Meiryo, "メイリオ", sans-serif;
}

#header {
    padding: 15px 0;
}

#header h2 {
    margin-top: 5px;
    margin-bottom: -5px;
}

#wrap {
    border-top: 5px solid #2c9cd2;
}

/*-----------------------------------------------

	main_visual

-----------------------------------------------*/
#main_visual {
    background:
        url("../images/mv_town.png") repeat-x center bottom,
        url("../images/mv_ptn.png") repeat center top,
        url("../images/mv_cloud.png") repeat-x center top,
        #0e94d0;
    width: 100%;
    padding: 30px 0;
    text-align: center;
}

#main_visual img,
purchase_area_top img,
feature_area img {
    padding-bottom: 25px;
    vertical-align: top !important;
}

#main_visual img:first-child {
    padding-bottom: 25px
}

#main_visual img:nth-child(2) {
    padding-bottom: 40px
}

#main_visual .capt {
    margin-top: 10px;
}

#main_visual .content {
    position: relative;
    width: 960px;
    margin: 0 auto;
}

#main_visual .content ul.service li {
    margin-bottom: 15px;
}
#main_visual .mv-link{
    color: #fff;
    display: block;
    background-color: #f64695;
    width: 280px;
    padding: 5px 0px;
    text-decoration-line: none;
    margin: auto;
}
#main_visual .mv-link img{
    width: 15px;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
    filter: invert(100%) brightness(200%);
}
.feature_area {
    padding: 30px 0;
    background: #e3eafa;
}

.feature_area ul.feature {
    width: 930px;
    margin: 0 auto;
}

.feature_area ul.feature li {
    float: left;
    margin-right: 18px;
}

.feature_area ul.feature li.end {
    margin-right: 0;
}

.btn_area {
    width: 960px;
    margin: 0 auto;
}

.btn_area li {
    float: left;
    margin-right: 30px;
}

.btn_area li.end {
    margin-right: 0;
    float: none;
}


/*-----------------------------------------------

	purchase

-----------------------------------------------*/
#purchase {
    text-align: center;
    padding: 40px 0;
}

#purchase img.btn {
    margin-bottom: 10px;
}

.purchase_area {
    background: url("../images/btn_bg.jpg") repeat scroll left top transparent;
    ;
    text-align: center;
    padding: 50px 0;
}

.purchase_area p {
    color: #fff;
    width: 960px;
    margin: 0 auto;
    text-align: left;
    padding-top: 25px;
}

.purchase_area li img.free {
    margin-bottom: 15px;
}

.purchase_area li.caution {
    padding-top: 20px;
    font-weight: bolder;
    font-size: 16px;
    color: #333;
}

/*-----------------------------------------------

	content

-----------------------------------------------*/
h3.box_title {
    background: #8cceec;
    text-align: center;
    height: 206px;
    margin-bottom: 35px;
}

/*.point_box{
	margin:0 auto 80px;
	position:relative;
}*/
.point {
    text-align: center;
}

.point p,
.point dl {
    text-align: left;
}

.point_box .box {
    width: 960px;
    margin: 0 auto;
    padding: 30px 0 0;
}

.point_box h4 {
    text-align: center;
}

.point_box .box img {
    margin-bottom: 40px;
}

.point_box .point1 p + img {
    margin: 0 auto 30px;
    width: 640px;
    display: block;
}

.point_box .box:nth-child(2) img:last-child {
    margin-bottom: 0;
}

.point_box .point3 .box img + img {
    margin-bottom: 10px;
}

.point_box .point3 .box img + img + p {
    margin-bottom: 0;
}

.point_box .box ul {
    margin-top: 25px;
}

.point_box .box ul.p_att {
    background: url("../../../common/images/att_icon.png") no-repeat scroll left center;
    padding-left: 60px;
    min-height: 60px;
    padding-left: 4em;
}

.point_box .box ul.p_att.new_line {
    text-indent: -0.5em;
}

.point1 ul.p_att li,
.point4 ul.p_att li {
    padding-top: 15px;
}

.point_box p {
    margin-bottom: 30px;
}

.point_box .point1 p:last-child {
    margin-bottom: 0;
}

.point_box p strong {
    font-weight: bold;
    display: block;
}

.point_box .box.point4 {
    position: relative;
}

.point_box .box.point4 img.illust {
    position: absolute;
    right: 0;
    top: 0;
}

.point {
    padding: 40px 0 0;
}

.point:last-child {
    padding-bottom: 30px;
}

.point dl {}

.point dl dt {
    color: #0073a9;
    font-size: 24px;
    margin-bottom: 10px;
}

.point dl dd {
    font-size: 20px;
    line-height: 36px;
    margin-bottom: 30px;
}

.difference {
    width: 960px;
    margin: 0 auto 80px;
}

/*ご契約までの流れ*/
#flow h3.box_title.flow {
    background: #058bca;
    padding: 45px 0 35px;
    text-align: center;
    height: auto;
}

#flow {
    margin-bottom: 40px;
}

#flow p.flow_p {
    padding: 20px 0;
    margin-top: 20px;
    width: 600px;
    height: 200px;
    padding-right: 360px;
    line-height: 1.6em;
    font-size: 24px;
    font-weight: bold;
    color: #444;
    background: url(../images/flow_img01.png) no-repeat;
    background-position: 608px 20px;
}

#flow .flow_wrapper {
    width: 960px;
    margin: 0 auto;
}

#flow .sp_flow {
    border: #ccc 1px solid;
    border-top: none;
}

#flow .sp_flow_title {
    background: #3b7eeb;
    margin: -8px auto 30px;
    border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
}

#flow .sp_flow li {
    position: relative;
    width: 920px;
    margin: 0 auto;
}

#flow .sp_flow ul {
    padding-bottom: 20px;
}

#flow .sp_flow li.step0 {
    padding-bottom: 20px;
}

#flow .sp_flow li p {
    position: absolute;
    width: 300px;
    top: 58px;
    left: 95px;
}

#flow .sp_flow span {
    /*overflow:hidden;
	text-indent:100%;
	white-space:nowrap;*/
    display: none;
}

#flow .sp_flow .step1 {
    height: 147px;
    background: url("../images/sp_flow_step01.png") no-repeat;
}

#flow .sp_flow li.step1 p {
    top: 75px;
    left: 95px;
}

#flow .sp_flow .step2 {
    height: 91px;
    background: url("../images/sp_flow_step02.png") no-repeat;
}

#flow .sp_flow li.step2 p,
#flow .sp_flow li.step5 p,
#flow .sp_flow li.step9 p {
    left: 568px;
    padding: 0 0 20px;
    z-index: 1;
}

#flow .sp_flow li.step2 p {
    width: 230px;
}

#flow .sp_flow .step3 {
    height: 126px;
    background: url("../images/sp_flow_step03.png") no-repeat;
}

#flow .sp_flow .step4 {
    height: 132px;
    background: url("../images/sp_flow_step04.png") no-repeat;
}

#flow .sp_flow .step5 {
    height: 104px;
    background: url("../images/sp_flow_step05.png") no-repeat;
}

#flow .sp_flow .step6 {
    height: 236px;
    background: url("../images/sp_flow_step06.png") no-repeat;
}

#flow .sp_flow .step7 {
    height: 226px;
    background: url("../images/sp_flow_step07.png") no-repeat;
}

#flow .sp_flow .step8 {
    height: 179px;
    background: url("../images/sp_flow_step08.png") no-repeat;
}

#flow .sp_flow .step9 {
    height: 122px;
    background: url("../images/sp_flow_step09.png") no-repeat;
}

#flow .sp_flow .step10 {
    height: 186px;
    background: url("../images/sp_flow_step10.png") no-repeat;
}


/*キャンペーン*/
#campaing {
    margin: 0 auto;
    width: 958px;
    padding: 40px 0;
}

#campaing ul li.camp_title {
    text-align: center;
    background: #fff;
    width: 890px;
    border-radius: 8px;
    margin: 15px 0;
    padding: 7px 0 0;
}

#campaing ul {
    background: url("../../../common/images/campaing_bg.jpg") repeat;
    padding: 5px 0 20px 30px;
    margin-top: -10px;
}

#campaing ul li ul {
    padding: 5px 0 0;
}

#campaing ul li {
    color: #fff;
}

hr {
    width: 890px;
    color: #fff !important;
}


.contents img {
    vertical-align: top;
}

.contents img.img_att {
    margin-top: 30px;
}

ul.contract_flow {
    width: 900px;
    margin: 0 auto 60px;
}

ul.contract_flow li {
    float: left;
}

ul.contract_flow li.f_none {
    float: none;
}

table.gaiyou {
    width: 960px;
    margin: 40px auto;
}

table.gaiyou thead th {
    table-layout: fixed;
    padding: 0;
}

table.gaiyou tbody th {
    border: 1px solid #a6a6a6;
    table-layout: fixed;
    text-align: left;
    width: 220px;
    padding: 15px;
}

table.gaiyou tbody th {
    width: 580px\9;
}

table.gaiyou tbody th:not(:target) {
    width: 580px\9;
}

table.gaiyou th.title {
    background: #289fd7;
    text-align: left;
    padding: 20px 0 20px 40px;
}

table.gaiyou ol li {
    list-style-type: decimal;

}

/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
table.gaiyou tbody th{
	width:580px !important;
}
}*/
table.gaiyou tbody td {
    border: 1px solid #a6a6a6;
    padding: 15px;
}

table.gaiyou td table {
    width: 600px;
    margin-bottom: 10px;
}

table.gaiyou td table thead {
    background: #ffe0ea;
    text-align: left;
}

table.gaiyou td table th,
table.gaiyou td table td {
    padding: 5px 10px;
}

table.gaiyou td table th {
    width: 340px;
}

table.gaiyou td.docs p {
    margin-top: 1em;
}

table.gaiyou td.docs p:first-child {
    margin-top: 0;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    table.gaiyou td table th {
        width: 240px !important;
    }
}

table.gaiyou td table td {
    width: auto;
}

a.detail_link {
    display: block;
    width: 328px;
    margin: 0 auto 40px;
}

table.gaiyou tbody td ul.disk,
table.gaiyou tbody td ol.disk {
    margin-left: 15px;
}

table.gaiyou tbody td ul.disk li {
    list-style: disc outside;
}




/*-----ここからIE7用記述-----*/

*:first-child + html . {}

/*-----ここからIE6用記述-----*/

* html . {}

/*20230309追加分*/
table tr td {
    padding: 1em 0 1em;
    border-top: 1px solid #cecece;
}

table.bank_agent {
    width: 100%;
    max-width: 960px;
    /*white-space: nowrap;*/
    line-height: 2.1;
    margin: 0 auto;
}

table.bank_agent tr {
    border-top: 1px solid;
}

table.bank_agent tr.both {
    border-bottom: 2px solid;
    border-top: 2px solid;
    border-color: #cecece;
}

table.bank_agent tr.bottom {
    border-bottom: 2px solid;
    border-color: #cecece;
}

.able.bank_agent tr:last-child {
    border-top: 1px solid;
    border-bottom: 2px solid;
    border-color: #cecece;
}

table.bank_agent th {
    width: 20%;
    background-color: #efeeee;
    padding-left: 1em;
    padding-right: 1em;
    font-weight: 600;
    border-top: 1px solid #cecece;
    text-align: left;
}

table.bank_agent td {
    width: 40%;
    padding-left: 1em;
    padding-right: 1em;
}

table.bank_agent td.leftt {
    border-left: 2px solid;
    border-color: #cecece;
}

p.bank_agentt {
    text-align: right;
    padding-bottom: 2em;
    margin-top: 2em;
    max-width: 960px;
    margin: 1em auto 0;
}

#wrap bank_agentt a:link {
    color: #959494;
}

p.aki {
    line-height: 1.6;
    max-width: 960px;
    margin: 3em auto 2em;
}

@media screen and (max-width: 912px) {
    .doko {
        top: 304px;
    }
}

@media screen and (max-width: 820px) {
    .doko {
        top: 268px;
    }
}

@media screen and (max-width: 768px) {
    .doko {
        top: 250px;
    }
}

@media screen and (max-width: 700px) {
    .doko {
        width: 203px;
        position: absolute;
        top: -44px;
        left: -26px;
    }

    .col02-item {
        margin: 25px 0 15px;
    }
}

@media screen and (max-width:500px) {
    p.bank_agentt {
        margin-top: 0;
    }
}