@charset "UTF-8";

#page_content header.main_title .lead_msg{
	padding-top:10px;
}
main .shadow_box {
	padding-top: 30px;
}
main .famiImg {
	margin-bottom: 20px;
	text-align:center;
}
main .fntRed{
	color: #E01216;
}
main .ttl1{
	display: table;
	table-layout: fixed;
	width: 100%;
	margin-bottom:20px;
}
main .ttl1 > *{
	display: table-cell;
	vertical-align: middle;
}
main .ttl1 > span{
	width: 220px;
}

main .tbl1 > dd ol.annotation{
	margin: 0;
}

main .btnRow1.noImage {
	margin-top: 45px;
}

main .contents_tab {
	width: 100%;
  margin-bottom: 30px;
  display: table;
	border-collapse: separate;
  border-spacing: 12px 12px;
  padding: 0;
}
main .contents_tab li {
  display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
  width: 50%;
  padding: 8px;
}

/* インデックス 20180925 */
.sect0{
	margin-bottom:3%;
	line-height: 1.4;
}
.support_index{
	/*overflow:hidden;*/
	margin:3% 0;
}
.support_index:after {
	content:" ";
	display:block;
	clear:both;
}
#page_content .support_index header h2{
    background:none;
    padding-left:0;
}
.support_index .kouzou{
	width:66%;
	float:left;
	text-align: center;
	padding:13px;
	border:1px solid #ccc;
	box-sizing: border-box;
}
.support_index .kouzou .wrapper > div,
.support_index .setsubi > div{
	box-sizing: border-box;
	padding:10px;
}
.support_index .kouzou .wrapper{
	overflow:hidden;
}
.support_index .kouzou .wrapper .new{
	width:49%;
	float:left;
	background:#eee;
}
.support_index .kouzou .wrapper .old{
	width:49%;
	float:right;
	background:#eee;
    height: 160px;
}
.support_index .kouzou .wrapper .old .link.up{
    margin-bottom: 0;
}
.support_index .setsubi{
	width:32%;
	float:right;
	text-align: center;
	padding:13px;
	border:1px solid #ccc;
	box-sizing: border-box;
	position:relative;
}
.support_index .setsubi .i_new{
	position: absolute;
	top:-18px;
	right:-20px;
}
.support_index .setsubi > div{
	background:#eee;
	height: 160px;
}
.support_index .kouzou h2,
.support_index .setsubi h2{
	font-size:110%;
	font-weight: bold;
	line-height:1.1;
	margin-bottom:10px;
	text-align:left;
}
.support_index .kouzou h3{
	font-weight: bold;
	height:2.5em;
	margin-bottom:5px;
	line-height:1.4;
}
.support_index .setsubi h3{
	font-weight: bold;
	height: 2.5em;
	margin-bottom:5px;
	line-height:1.4;
	color:#f5627d;
}

.support_index .link{
	border:1px solid #ddd;
	background:#fff;
}
.support_index .link a{
	display:block;
	padding:10px 0 10px 10px;
	color: #006fad;
	text-align:left;
}
.support_index .setsubi .link a i{
}
.support_index .link a i {
	font-size: 120%;
	color: #aaa;
	padding: 0 8px 0 0;
}
.support_index .setsubi .link a i{
	padding: 0 15px 0 10px;
}
.support_index .link.up,
.support_index .link.up{
	margin-bottom:10px;
}
.support_index .setsubi .link a{
}

#guarantee_extending .imageset1{
	text-align: center;
	margin-bottom:30px;
}
#guarantee_extending .imageset1 .pic2{
	vertical-align: 16px;
	margin:0 12px 0 4px
}
#guarantee_extending ol.waranty{
	margin-bottom:60px;
}
#guarantee_extending ol.waranty a{
	color:#4593d0!important;
	margin-left:10px;
	margin-top:10px;
	display:block;
	width: 128px;
	height: 30px;
	line-height:30px;
	text-align: center;
	border: 1px solid #ddd;
}
#guarantee_extending ol.waranty a i {
	color: #f29600;
	float: right;
	font-size: 95%;
	vertical-align: middle;
	line-height: 30px;
	padding-right: 4px;
}
#guarantee_extending .imageset2{
	text-align:center;
	margin-bottom:20px;
}
#guarantee_extending .suport_package .imageset3{
	text-align:center;
	margin-bottom:30px;
}

#guarantee_extending .trouble_sample{
	margin-bottom:60px;
}
#guarantee_extending .trouble_sample .case{
	text-align: right;
	margin-top:-10px;
	margin-bottom:10px;
}
#guarantee_extending .trouble_sample .sample_set{
	overflow:auto;
}
#guarantee_extending .trouble_sample .sample_set .sample{
	background:#f5f2e8;
	padding:20px 14px 0 14px;
	width:220px;
	box-sizing:border-box;
	float:left;
	margin-right:14px;
	min-height:270px;
}
#guarantee_extending .trouble_sample .sample_set .sample4{
	margin-right:0;
}
#guarantee_extending .trouble_sample .sample_set .sample .pic{
	height:100px;
	margin-bottom:15px;
	text-align:center;
	box-sizing:border-box;
}
#guarantee_extending .trouble_sample .sample_set .sample2 .pic,
#guarantee_extending .trouble_sample .sample_set .sample3 .pic{
	padding-top:20px;
}
#guarantee_extending .trouble_sample .sample_set .sample .txtset .name{
	font-size:16px;
	margin-bottom:8px;
	font-weight:bold;
	line-height:1.1
}
#guarantee_extending .trouble_sample .sample_set .sample .txtset ul li{
	padding-left:1em;
	text-indent:-1em;
	margin-bottom:6px;
	line-height:1.4;
}
#guarantee_extending .trouble_sample .sample_set .sample .txtset .price{
	color:#f5627d;
	font-size:14px;
	font-weight:bold;
	line-height: 1.2;
}
#guarantee_extending .trouble_sample .sample_set .sample .txtset .price span{
	font-size:20px;
}
#guarantee_extending .pay_sample{
	text-align: right;
	font-size:12px;
	padding-top:10px;
}

#guarantee_extending .flow .imageset1{
	text-align: center;
	margin-bottom:30px;
}
#guarantee_extending .flow table{
	width:100%;
}
#guarantee_extending .flow table.items{
	margin-bottom:22px;
}
#guarantee_extending .flow table td,
#guarantee_extending .flow table th{
	padding:6px;
	border:solid 1px #ccc;
	text-align:center;
	box-sizing: border-box;
	line-height:1.4;
}
#guarantee_extending .flow table th{
	color:#fff;
	background:#eb6d80;
	vertical-align: middle;
}
#guarantee_extending .flow table td{
	width:20%;
}

/*
202110：レイアウト変更
*/
.shadow_box_wrapper .shadow_box > .sect{
    margin-bottom:80px;
}
.kakko_title{
    font-size:140%;
    font-weight: bold;
    margin-bottom:10px;
}
.kakko_title.familiar span{
    font-size:80%;
    display:inline-block
}
#sect202110 .familiar_ttl{
    font-weight: bold;
    font-size: 110%;
    margin-bottom:20px;
    padding-top:20px;
}
#sect202110 .familiar_ttl strong{
    font-size: 160%;
    font-weight: bold;
}
#sect202110 .lead,
#sect202110 .area,
#sect202110 .tenken,
#sect202110 .teian,
#sect202110 .service{
    margin-bottom:25px;
}
#sect202110 .area strong{
    color:#f44;
    font-weight: bold;
}
#sect202110 .tenken > h4,
#sect202110 .teian > h4,
#sect202110 .service > h4{
    margin-bottom:12px;
    font-weight: bold;
    font-size: 124%;
    color:#4593d0;
}
#sect202110 .tenken > p,
#sect202110 .teian > p,
#sect202110 .service > p{
    margin-bottom:12px;
}
#sect202110 ul li{
    list-style: none;
}
/* .tenken */
#sect202110 .tenken .rank{
    width:100%;
    max-width: 800px;
}
#sect202110 .tenken .rank h5{
    text-decoration: underline;
    margin-bottom: 6px;
    font-weight: bold;
}
#sect202110 .tenken .rank div{
    display:flex;
    margin-bottom:10px;
    justify-content: space-between;
    align-items: flex-start;
}
#sect202110 .tenken .rank div p{
    flex:1;
    padding-right:2em;
}
#sect202110 .tenken .rank div img{
    width:144px;
}
#sect202110 .tenken ul li{
    margin-bottom:10px;
}
#sect202110 .tenken ul li table{
    margin-left:1em;
    border:solid 1px #555;
    border-collapse: collapse;
    margin-top:5px;
}
#sect202110 .tenken ul li table th,
#sect202110 .tenken ul li table td{
    text-align: center;
    border:solid 1px #555;
    padding:0.2em 0.2em;
}
#sect202110 .tenken ul li table th{
    padding:0.2em 1em;
    background: #eee;
}
#sect202110 .tenken ul li table th:nth-child(2),
#sect202110 .tenken ul li table th:nth-child(3),
#sect202110 .tenken ul li table th:nth-child(4){
    padding:0.2em 0;
    width:7em;
}
/* .teian */
#sect202110 .teian ul{
    display:flex;
    justify-content: center;
}
#sect202110 .teian ul li{
    padding:0 4px;
}
#sect202110 .teian ul li img{
    width:100%;
}
/* .service */
#sect202110 .service h4 span{
    color:#333;
    font-size: 90%;
}
#sect202110 .service .program{
    width:96%;
    max-width:640px;
    margin:30px auto 0;
}
#sect202110 .service .program h4{
    background:#efefef;
    text-align: center;
    padding:0.3em 1em;
    margin-bottom:20px;
    border-radius: 2em;
}
#sect202110 .service .program .container{
    display:flex;
    justify-content: center;
    position:relative;
    padding:10px 0;
}
#sect202110 .service .program .container div{
    width:44%;
    text-align: center;
    margin: 0 3%;
}
#sect202110 .service .program .container div h5{
    font-weight: bold;
    margin-bottom: 14px;
}
#sect202110 .service .program .container div h5 strong{
    font-size:160%;
    font-weight: bold;
}
#sect202110 .service .program .container div img{
    width:100%;
    max-width:242px;
    margin-bottom: 14px;
}
#sect202110 .service .program .container div .b_concrete,
#sect202110 .service .program .container div .b_wood{
    background:#aaa;
    color:#fff;
    padding:0.5em;
    width:180px;
    margin:20px auto 0;
    cursor: pointer;
}
#sect202110 .service .program .container:after{
    content:"";
    background:#ccc;
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    left:50%;
    top:0;
}

@media screen and (max-width: 834px) {
    #sect202110 .teian .pic{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #sect202110 .teian .pic li{
        width:48%;
    }
    #sect202110 .teian .pic li:first-of-type{
        width:100%;
        margin-bottom:10px;
    }
}

@media screen and (max-width: 599px) {
    #sect202110 .tenken .rank div{
        display:block;
    }
    #sect202110 .tenken .rank div p{
        padding:0;
    }
    #sect202110 .tenken .rank div img{
        margin-top:10px
    }
    #sect202110 .teian .pic{
        display:block;
    }
    #sect202110 .teian .pic li{
        margin-bottom:12px;
        width:100%;
    }
    #sect202110 .service .program .container{
        display:block;
    }
    #sect202110 .service .program .container::after{
        content:none;
        display:none;
    }
    #sect202110 .service .program .container div{
        width:90%;
        margin:0 auto;
    }
    #sect202110 .service .program .container div:first-of-type{
        margin:0 auto 30px;
        padding-bottom:30px;
        border-bottom:1px solid #ccc;
    }
}



@media screen and (max-width: 834px) {
	main .ttl1 > span{
		width: 32%;
	}
	main .ttl1 > span img{
		width: 92%;
	}


	#guarantee_extending .imageset1 img{
		width:auto;
		display: block;
		margin-right:auto;
		margin-left:auto;
	}
	#guarantee_extending .imageset1 .pic2{
		vertical-align: 0;
		margin:16px auto;
	}


	.support_index .kouzou{
		width:100%;
		float:none;
		margin-bottom:20px;
	}
	.support_index .kouzou .wrapper .new{
		width:100%;
		float:none;
		margin-bottom:14px;
	}
	.support_index .kouzou .wrapper h3{
		height:auto;
		padding-bottom:5px;
	}
	.support_index .kouzou .wrapper .old h3 br{
		display:none;
	}
	.support_index .kouzou .wrapper .old{
		width:100%;
		float:none;
        height: auto;
	}
	.support_index .setsubi{
		width:100%;
		float:none;
	}
	.support_index .setsubi > div{
		height: auto;
	}
	.support_index .setsubi h3{
		height:auto;
		padding-bottom:5px;
	}
	.support_index .setsubi h3 br{
		display:none;
	}
	.support_index .setsubi .link a i{
		padding: 0 8px 0 0;
	}
	.support_index .setsubi .i_new{
		width:auto;
	}

	
	#guarantee_extending .trouble_sample .sample_set .sample{
		width:49%;
		height:auto;
		margin-bottom:12px;
		margin-right:2%;
	}
	#guarantee_extending .trouble_sample .sample_set .sample2,
	#guarantee_extending .trouble_sample .sample_set .sample4{
		margin-right:0;
	}
	#guarantee_extending .trouble_sample .sample_set .sample .pic img{
		width:auto;
	}

	#guarantee_extending .flow .imageset1 img{
		width:100%;
	}

}


@media screen and (max-width: 440px) {
	main .ttl1{
		display: block;
		margin-bottom:20px;
	}
	main .ttl1 > *{
		display: block;
	}
	main .ttl1 > span{
		width: auto;
		padding-bottom: 10px;
		text-align:center;
	}
	main .ttl1 > span img{
		width: auto;
	}
	main .contents_tab li {
		display: block;
		width: 100%;
	}
	main .contents_tab li + li {
		margin-top: 10px;
	}

	#guarantee_extending .trouble_sample .sample_set .sample{
		min-height:320px;
	}
}



@media screen and (max-width: 400px) {
	#guarantee_extending .trouble_sample .sample_set .sample{
		width:100%;
		padding-bottom:14px;
		min-height:auto;
	}
}



/*
#modal
*/
#modal{
    visibility: hidden;
    opacity: 0;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 1000;
    overflow-x:hidden;
    transition-duration: 0.5s;
    line-height: 1.5;
}
#modal.show{
    visibility: visible;
    opacity: 1;
}
#modal p,
#modal div{
    margin:0;
    padding:0;
}
#modal > p.b_close{
    width:50px;
    height: 50px;
    position:absolute;
    top:10px;
    right:10px;
    cursor: pointer;
}
#modal > p.b_close:before,
#modal > p.b_close:after{
    width:100%;
    height: 1px;
    position:relative;
    top:25px;
    right:0;
    content:"";
    display:block;
    background:#333;
}
#modal > p.b_close:before{
    transform: rotate(45deg);
}
#modal > p.b_close::after{
    transform: rotate(-45deg);
}
#modal .bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(100,100,100,0.2)
}
#modal .content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:94%;
    height:80%;
    max-width:800px;
    max-height:900px;
    background:#fff;
    overflow-y: scroll;
    border-top:solid #fff 6px;
    border-bottom:solid #fff 6px;
}
#modal article{
    width:100%;
    padding:30px;
    box-sizing: border-box;
    text-align: left;
}
#modal article header{
    font-size:130%;
    font-weight: bold;
    margin-bottom: 40px;
    border-bottom: solid 1px #bbb;
    padding-bottom: 16px;
    line-height: 1.4;
}
#modal article header h1{
    margin:0;
}
#modal article header strong{
    font-weight: bold;
    font-size:140%;
}
#modal article .ttl{
    display: flex;
    align-items: center;
    margin-bottom:30px;
}
#modal article .ttl img{
    width:200px;
    height:auto
}
#modal article .ttl .txt{
    flex:1;
    padding-left:1.5em;
    margin:0;
    font-size:120%;
}
#modal article .graph{
    margin-bottom:40px;
}
#modal article .graph img{
    margin-top:5px;
}
#modal article .target{
    display:flex;
    align-items: flex-start;
    margin: 0 0 50px;
    justify-content: flex-start;
}
#modal article .target:first-of-type{
    margin-bottom: 10px;
}
#modal article.wood .target dt{
    background:#5ba02d;
}
#modal article .target dt{
    width:6em;
    padding:1em;
    background:#f29600;
    border-radius: 0.2em;
    color:#fff;
    font-weight: bold;
    text-align: center;
}
#modal article .target dd{
    flex:1;
    padding:0.3em 0 0.3em 1em;
    margin:0;
}
#modal article .target dd span{
    font-size: 80%;
}
#modal article .flow h2{
    border-left:8px solid #4593d0;
    padding-left:0.6em;
    font-size:130%;
    font-weight: bold;
    margin-bottom: 24px;
}
#modal article .flow p{
    position:relative;
    margin:0 6% 24px;
    padding:0.6em 1em;
    border:solid 2px #aaa;
    background:#fff;
}
#modal article .flow p:first-of-type{
    text-align: center;
    font-size:130%;
    background:#d3e6f5;
}
#modal article .flow p:first-of-type a{
    display:block;
    height:100%;
}
#modal article .flow p:first-of-type a i{
    display:inline-block;
    margin-left:0.5em;
    width:1em;
    height:1em;
    background:url(../img/i_modal_arrow.svg) no-repeat;
    background-size: cover;
    vertical-align: -3px;
}
#modal article .flow p:not(:last-of-type):after{
    content:"";
    background:#aaa;
    display:block;
    width:30px;
    height:30px;
    position:absolute;
    left:50%;
    bottom:0;
    transform:translate(-50%, 50%) rotate(45deg);
    z-index: -1;
}
#modal article .flow p strong{
    color:#4593d0;
    font-weight: bold;
}



@media screen and (max-width: 599px) {
    #modal article header{
        margin-bottom: 30px;
    }
    #modal article{
        padding:16px;
    }
    #modal article .ttl{
        display: block;
        margin-bottom:24px;
    }
    #modal article .ttl img{
        width:160px;
        margin-bottom: 12px;
    }
    #modal article .ttl .txt{
        padding:0;
    }
    #modal article .ttl .txt br{
        display: none;
    }
}