@charset "utf-8";

/*======================================
    株式会社マックス pagestyle
    201905
========================================*/


/*======================================
lease
========================================*/

.vi_title{
    width:1150px;
    margin:30px auto 30px auto;
    padding:10px;
    background:#0d138e;
}

.vi_title h3{
    font-family:inherit;
    font-weight: bold;
    font-size:11pt;
    color:#FFF;
    letter-spacing:0.1em;
}

.vi{
    width:1170px;
    margin:0 auto 10px auto;
}

.vi img{
    margin:0 50px 0 0;
    width:900px;
    height:495px;
}

.vi ul{
    width:220px;
    float:right;
    list-style-type: none;
}

.vi li{
line-height: 1.5;
border-bottom : dotted 1px rgb(73, 73, 73) ;
margin:0 0 10px 0;
padding:0 0 10px;
}

.vi span{
    color:#09579a;
    font-weight: bold;
    margin:0 30px 0 0;
}

#price_back{
    width:1050px;
    padding:20px 10px;
    margin:30px auto 60px auto;
    background:#d3e2ff;
    overflow:hidden;
}

#price_box{
    width:501px;
    margin:0 10px;
    min-height:150px;
    background: #FFF;
    border : solid 1px rgb(228, 228, 228) ;
    float:left;
}

.pr_l{
    width:390px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

.pr_l span{
    color:#646464;
    font-size:33pt;
    font-weight: bold;
}

.pr_l img{
    margin:8px 0 20px 0 ;
}

.pr_1_mbx{
    width:100px;
    height:20px;
    padding:10px;
    background:#09579a;
    margin:0 5px 5px 5px;
    color:#fff;
    font-weight: bold;
    float:left;
}

.pr_r1{
    width:150px;
    height:150px;
    background:#09579a;
    text-align:center;
    position:relative;
    float:left;
}

.pr_r2{
    width:351px;
    padding:35px 0 0 0;
    text-align:center;
    float:right;
}

.pr_r1 span{
    width:150px;
    color:#FFF;
    font-weight: bold;
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.pr_r2 span{
    color:#09579a;
    font-size:33pt;
    font-weight: bold;
}



/*======================================
price
========================================*/

.tp_title{
    width:1070px;
    margin:0 auto;
    padding:0 0 5px 0;
}

.tp_title span{
    font-weight: bold;
    color:#09579a;
}

#tp_b{
    width:1030px;
    padding:20px 20px;
    margin:0 auto 50px auto;
    background:#d3e2ff;
    overflow:hidden;
}

#tp_l{
    width:298px;
    height:148px;
    background:#FFF;
    border:solid 1px #FFF;
    float:left;
}

#tp_r{
    width:708px;
    min-height:148px;
    margin:0 0 0 20px;
    background:#FFF;
    border:solid 1px rgb(228, 228, 228);
    float:right;
}

#tp_r1{
    width:250px;
    min-height:150px;
    margin:0;
    background:#09579a;
    position:relative;
    text-align:center;
    float:left;
}

#tp_r1 span{
    width:250px;
    color:#FFF;
    font-size:15pt;
    font-weight: bold;
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    letter-spacing:0.1em;
}

#tp_r2{
    width:458px;
    min-height:115px;
    padding:35px 0 0 0;
    margin:0;
    text-align:center;
    float:right;
}

#tp_r2 span{
    color:#09579a;
    font-size:33pt;
    font-weight: bold;
}

#inclusion_c{
    width:100%;
    background:#09579a;
    padding:35px 0 35px 0;
    margin:0 0 50px 0;
    text-align:center;
}

#inclusion_b{
    width:1044px;
    margin:0 auto;
    overflow: hidden;
}

.inclusion{
    width:150px;
    height:150px;
    margin:0 10px 0 10px;
    background:#FFF;
    border:solid 2px rgb(228, 228, 228);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    position:relative;
    text-align:center;
    float:left;
}

.inclusion span{
    width:150px;
    font-family:inherit;
    color:#09579a;
    font-size:15pt;
    font-weight: bold;
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#inclusion_c h3{
    font-family:inherit;
    color:#FFF;
    font-size:15pt;
    font-weight: bold;
    margin:0 0 20px 0;
}

#inclusion_c p{
    width:1044px;
    font-family:inherit;
    color:#FFF;
    margin:20px auto 0 auto;
    text-align:left;
}

.agreement_title{
    width:1150px;
    margin:50px auto 35px auto;
    padding:10px;
    background:#0d138e;
}

.agreement_title h3{
    font-family:inherit;
    font-weight: bold;
    font-size:11pt;
    color:#FFF;
    letter-spacing:0.1em;
}

#step_area{
    width:1068px;
    min-height:110px;
    margin:0 auto 0 auto;
    background:#09579a;
    border:solid 1px #09579a;
    overflow: hidden;
}

.step_heading{
    width:200px;
    min-height:115px;
    background:#09579a;
    position:relative;
    text-align:center;
    float:left;
}

.step_heading span{
    width:200px;
    font-size:15pt;
    color:#FFF;
    font-weight: bold;
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.step_text{
    width:868px;
    min-height:115px;
    background:#FFF;
    position:relative;
    float:right;
}

.step_text p{
    width:836px;
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-48%,-50%);
}

#step_mark{
    width:1070px;
    height:100px;
    margin:0 auto;
    background:url(../../common/img/step.png) no-repeat 50% 50%;
}

/*======================================
merit
========================================*/

#merit_b{
    width:970px;
    margin:30px auto;
    overflow: hidden;
}

.merit_box{
    width:170px;
    min-height:170px;
    margin:0 10px;
    background:#FFF;
    border:solid 2px #09579a;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    float:left;

    position:relative;
    text-align:center;
}

.merit_box_t{
    padding:5px 0;
    background:#09579a;
    text-align:center;

    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    
    color:#FFF;
    font-weight: bold;
}

.merit_box_c{
    padding:15px 0 0 0;
    text-align:center;
}


.merit_box_b{
    width:170px;
    text-align:center;
    font-weight: bold;
    position:absolute;
    color:#09579a;
    top: 80%;
    left:50%;
    transform: translate(-50%,-50%);
}

.merit_title{
    width:1150px;
    margin:30px auto 35px auto;
    padding:10px;
    background:#0d138e;
}

.merit_title h3{
    font-family:inherit;
    font-weight: bold;
    font-size:11pt;
    color:#FFF;
    letter-spacing:0.1em;
}

/*======================================
FAQ
========================================*/

#faq_b{
    width:1170px;
    margin:45px auto 0 auto;
}

/*ボックス全体*/
.switchbox {
    margin: 10px 0;
    padding: 0;
}
/*ラベル*/
.switchbox label {
    width:1170px;
    padding:5px 0;
    background:#09579a;
    font-size:15pt;
    color:#FFF;
    display: block;
    font-weight: bold;
    cursor :pointer;
}
/*チェックボックスを非表示にする*/
.switchbox input {
    display: none; 
}
/*中身を非表示にしておく*/
.switchbox div {
    width:1080px;
    height: 0;
    background:#FFF;
    font-size:15pt;
    font-weight: bold;
    color:#09579a;
    overflow-y: hidden;
    transition: 0.8s;/*ゆっくり表示させる*/
    opacity: 0;
    padding:5px 40px 5px 46px;
    margin:0 0 10px 0;
    border-left:solid 2px #09579a;
    border-right:solid 2px #09579a;
    border-bottom:solid 2px #09579a;
}
/*クリックで中身を表示*/
.switchbox input:checked + label + div {
    height: auto;
    opacity: 1;
}
/*アイコン*/
.switchbox label::before {
    content: url("../img/icon-1.png");
    padding-right: 20px;
    padding-left: 8px;
}
/*クリックでアイコン入れ替え*/
.switchbox input:checked + label::before {
    content: url("../img/icon-2.png");
}


/*======================================
info
========================================*/

#info_b{
    width:1170px;
    margin:0 auto 50px auto;
}

#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
    border:1px solid #FFF;
    color:#FFF;
    padding:10px;
	background:#09579a;
}
table.formTable th{
    width:30%;
    color:#FFF;
	font-weight:bold;
	background:#09579a;
	text-align:left;
}
/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}

.sb{
    text-align:center;
    margin:20px 0 0 0;
}

/*======================================
thanks
========================================*/

#thanks_b{
    width:1170px;
    margin:0 auto 0 auto;
    text-align:center;
    padding:50px 0 50px 0;
}

#thanks_b h3{
    font-family:inherit;
    font-weight: bold;
    font-size:25pt;
    color:#09579a;
    letter-spacing:0.1em;
}

#thanks_b p{
    font-family:inherit;
    font-size:11pt;
    letter-spacing:0.1em;
}

/*======================================
Corporate
========================================*/

#corp_b{
    width:1070px;
    margin:0 auto;
    padding:50px 0 0 0;
    overflow: hidden;
}

.cp_li{
    padding:0 0 5px 0;
    margin:0 0 50px 0;
    border-bottom:1px dashed; 
    overflow: hidden;
}


.cp_li_l{
    width:15%;
    padding:0 20px;
    font-weight: bold;
    float:left;
}

.cp_li_r{
    width:79%;
    padding:0 20px 0 0;
    float:right;
}

.map{
    width:1070px;
    margin:0 auto 50px auto;
    overflow: hidden;
}

/*======================================
Corporate
========================================*/

#sm_b{
    width:1070px;
    margin:0 auto;
    padding:50px 0 0 0;
    overflow: hidden;
}

.sm_li{
    padding:50px 0 50px 0;
    border-bottom:1px dashed; 
    overflow: hidden;
}


.sm_li_l{
    width:15%;
    padding:0 20px;
    font-weight: bold;
    float:left;
}

.sm_li_r{
    width:79%;
    padding:0 20px 0 0;
    float:right;
}