@charset "UTF-8";

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

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

input[type="text"]

=================================================================== */
a:visited {
    color: #16aed7;
}

a:link {
    color: #16aed7;
}

a {
    color: #16aed7;
}

img: {
    display: block;
}

html,
body {
    height: 100%;
}

.cfx {
    overflow: hidden;
}

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

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

#header {
    padding: 15px 0;
    border-top: 5px solid #2c9cd2;
}

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

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

	main_visual

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

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

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

#main_visual img:nth-child(4) {
    padding-bottom: 15px
}

#main_visual img:nth-child(5) {
    padding-bottom: 15px
}

#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: 90%;
    padding: 10px 0px;
    text-decoration-line: none;
    margin: 10px auto 0;
    position: relative;
    z-index: 1;
}
#main_visual .mv-link img{
    width: 15px;
    margin-left: 5px;
    margin-top: 3px;
    padding: 0;
    filter: invert(100%) brightness(200%);
    background-color: transparent;
}
.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;
}

#main_visual .feature img {
    padding-bottom: 10px;
}

#main_visual .feature img:last-child {
    padding-bottom: 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: 25px 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

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

/*.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: 20px 0 0;
}

.point_box h4 {
    text-align: center;
}

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

.point_box .point1 p + img {
    margin: 0 auto 20px;
    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: 20px;
    font-size: 12px;
}

.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: 30px 0 0;
}


.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: 20px 0 20px;
    text-align: center;
    height: auto;
    margin-bottom: 20px;
}

#flow {
    padding-bottom: 40px;
}

#flow .flow_p {
    margin-bottom: 20px;
}

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

#flow p {
    font-size: 14px;
    line-height: 1.5rem;
    margin-bottom: 20px;
}

#flow .flow_p + p + img {
    width: 50%;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
}



.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 12px 50px;
}

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

}

table.gaiyou tbody td {
    border: 1px solid #a6a6a6;
    padding: 15px;
}

table.gaiyou td table {
    width: 500px;
    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: 240px;
}

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: 30px auto 30px;
}

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;
}

.trigger .que span {
    position: relative;
}

.trigger .que span:before {
    content: '';
    display: block;
    left: 0px;
    top: 50%;
    width: 20px;
    position: absolute;
    top: 50%;
    height: 16px;
    margin-top: -10px;
    background: url(../images/arrow1.png)no-repeat;
    background-size: contain;
    background-position: center center;
}

.trigger.active .que span:before {
    width: 16px;
    height: 20px;
    background: url(../images/arrow2.png)no-repeat;
    background-size: contain;
    margin-top: -9px;
}

/*

sp

 */
h3.box_title,
#flow,
.point_box {
    background-color: #faf7f0;
}


#header,
#main_visual .content,
.btn_area,
.purchase_area p,
.point_box .box,
.point_box .point1 p + img,
#flow .flow_wrapper {
    width: 100%;
}

#header,
#main_visual .content,
.point_box,
.purchase_area,
.flow_wrapper {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;

}

.box_title img {
    margin-top: -1px;
}

.feature {
    position: relative;
    margin-top: 15%;
}

.feature img {
    position: relative;
    z-index: 10;
    background-color: #8cceec;
}

.feature .mask {
    background: #8cceec;
    width: 300%;
    position: absolute;
    display: block;
    top: -0%;
    right: -25%;
    z-index: 0;
    height: 100%;
    background-position: top;
}

.feature .town {
    background: url(../images/mv_town.png) repeat-x center top;
    width: 300%;
    position: absolute;
    display: block;
    top: -16%;
    right: -37%;
    z-index: 0;
    height: 100%;
    background-position: top;
    background-size: 50%;
}

.step3,
.step6,
.step7,
.step8,
.step9,
.step10 {
    margin-top: -1px;
}

.point_box {
    padding-bottom: 30px;
}

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

.point_box .point2 p:last-child {
    margin-bottom: 0;
    color: #f64695;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5rem;
}

.point dl dt {
    font-size: 18px;
    margin-bottom: 5px;
}

.point dl dd {
    font-size: 14px;
    line-height: 1.4rem;
    margin-bottom: 20px;
}

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

#flow h3.box_title.flow {
    padding: 20px 0;
}

#detail {
    line-height: 1.5rem;
}

#detail .tit {
    padding: 20px 0;
    margin-top: 30px;
    background-color: #289fd7;
}

.detail + a {
    margin-top: 20px;

}

.contact {
    margin-bottom: 30px auto;
}

.acordion_tree ul.disk {
    margin-left: 15px;
}

.acordion_tree .number {
    margin-left: 1.5rem;
}

.acordion_tree ul li {
    list-style: disc outside;
}

.acordion_tree .number li {
    list-style: decimal;
}

.contents table {
    border: 1px solid #d8d8d8;
    margin: 5px 0 15px;
    width: 100%;
}

.contents table thead th {
    background: #ffe0ea;
    font-weight: normal;
    padding: 8px 0;
    text-align: center;
    border: 1px solid #d8d8d8;
}

.contents table th {
    border: 1px solid #d8d8d8;
    padding: 6px 15px;
    text-align: left;
}

.contents table td {
    border: 1px solid #d8d8d8;
    padding: 6px 15px;
}

/*----------------------------------------------------
  footer
----------------------------------------------------*/
a.tell img {
    margin: 20px auto;
}

#footer {
    border-top: 3px solid #e6e6e6;
    margin-top: 0;
    padding: 20px 10px;
    font-size: 12px;
    line-height: 1.4em;
}

#footer .foot_box ul {
    margin: 10px 0;
}

#footer .foot_box ul li {
    border-left: 1px solid #1a1a1a;
    float: left;
    margin-right: 5px;
    padding-left: 5px;
}

#footer .foot_box ul li.end {
    border-right: 1px solid #1a1a1a;
    padding-right: 5px;
    margin-right: 0;
}

p.copy {
    text-align: center;
}

/*-----ここから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: 1.5;
    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;
}

.table.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;
}

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;
    }
}
@media screen and (max-width:750px) {
table.bank_agent {
	width: 100%;
	/* white-space: nowrap; */
    table-layout: fixed;
word-break: break-word;
}
table.bank_agent th {
	width: 12%;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}
table.bank_agent td {
	width: 40%;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: 12px;
}
}