/* CSS Document */

html,body{
	width:100%; 
	height:auto; margin:0;padding:0;}
html{color:#000000; 
	background: #fff;}

dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, input, p, blockquote, fieldset, div, section{margin: 0;
	padding: 0; 
	box-sizing: border-box; 
	list-style: none;}
ul li, ol li{list-style: none;}
table{margin: 0;
	padding: 0;}
img{border:none; 
	display: block; 
	width: 100%;}

/*LINK
---------------------------------------*/
a,a:visited{color: inherit;
	text-decoration: none;
    border-style: none;
	outline: none;
	cursor: pointer;
}
a:hover{
	text-decoration: none;
	border-style: none;
	outline: none;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

a[href^="tel:"] {
    pointer-events: none;
}
@media (max-width: 768px){
a[href*="tel:"] {
	pointer-events: auto;
	opacity: 1;
}
}

/*COLOR
---------------------------------------*/

.bg1 {background-color:#237BD0;}
.bg2 {background-color:#f2f2f2;}
.bg3 {background-color:#daebef;}
.bg4 {background-color:#4d4d4d;}
.bg5 {background-color:#41679e;}
.bg6 {background-color:#00a99d;}
.bg7 {background-color:#4cc7f2;}


.col_w{color: #fff;}
.col_b{color: #237BD0;}

/*font-style
---------------------------------------*/
html{font-size: 10px;}

body {
	-webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
	line-height: 1.8;
	letter-spacing: 1px;
	font-size:1.6rem;
	color: #000;
	font-family: 'Hiragino Sans', '繝｡繧､繝ｪ繧ｪ', meiryo, 'MS P繧ｴ繧ｷ繝?繧ｯ', '繝偵Λ繧ｮ繝手ｧ偵ざPro W3', 'Hiragino Kaku Gothic Pro', osaka, Arial, Helvetica, Verdana, sans-serif;
}

section{font-weight: normal;}
h1,h2,h3,h4{font-weight: bold;}

.bold {font-weight: bold;}

.bold-none {font-weight: normal;}

/*fontsize-style
---------------------------------------*/
.text36 {font-size: 36px;}

.text32 {font-size: 32px;}

.text30 {font-size: 30px;}

.text28 {font-size: 28px;}

.text26 {font-size: 26px;}

.text24 {font-size: 24px;}

.text20 {font-size: 20px;}

.text18 {font-size: 18px;}

.text16 {font-size: 16px;}

.text14 {font-size: 14px;}

.text12 {font-size: 12px;}

.text10 {font-size: 10px;}

.indent {
	padding-left: 1em;
	text-indent: -1em;
}

.line-hei-2 {line-height: 1.2em}

/*text-align
---------------------------------------*/
.taCT {text-align: center;}
.taRT {text-align: right;}
.taLT {text-align: left;}

/*margin
---------------------------------------*/
.mb0 {margin-bottom: 0px !important; }
.mb5 {margin-bottom: 5px !important; }
.mb10 {margin-bottom: 10px !important; }
.mb15 {margin-bottom: 15px !important; }
.mb20 {margin-bottom: 20px !important; }
.mb30 {margin-bottom: 30px !important; }
.mb40 {margin-bottom: 40px !important; }
.mb50 {margin-bottom: 50px !important; }
.mb60 {margin-bottom: 60px !important; }
.mb70 {margin-bottom: 70px !important; }
.mb80 {margin-bottom: 80px !important; }
.mb90 {margin-bottom: 90px !important; }
.mb100 {margin-bottom: 100px !important; }

.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}
.mt60{margin-top: 60px !important; }
.mt70{margin-top:70px !important; }
.mt80{margin-top:80px !important; }
.mt90{margin-top:90px !important; }
.mt100{margin-top:100px !important;}

.mr0{margin-right:0 !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr30{margin-right:30px !important;}
.mr40{margin-right:40px !important;}
.mr50{margin-right:50px !important;}
.mr60{margin-right:60px !important;}
.mr70{margin-right:70px !important;}
.mr80{margin-right:80px !important;}
.mr90{margin-right:90px !important;}
.mr100{margin-right:100px !important;}


.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml30{margin-left:30px !important;}
.ml40{margin-left:40px !important;}
.ml50{margin-left:50px !important;}
.ml60{margin-left:60px !important;}
.ml70{margin-left:70px !important;}
.ml80{margin-left:80px !important;}
.ml90{margin-left:90px !important;}
.ml100{margin-left:100px !important;}

.m-auto{margin: 0 auto!important;}

/*float--------*/
.fL{ float: left;}
.fR{ float: right;}

/*clearfix--------*/
.clearfix{ clear:both;}
.clearfix:after{
	content: "";
	clear: both;
	display: block;
}

/* PC */
html,body{min-width:1200px;}
.no{display: none !important;}
.pc{display: block !important;}
.pc_inline{display: inline-block !important;}
.sp{ display: none !important;}
.sp_inline{display: none !important;}
.sp2{ display: none !important;}

.cont-inn{
	width:90%;
	max-width:1200px;
	margin:0 auto;
}

.inn-1200{
	width:90%;
	max-width:1200px;
	margin:0 auto;
}

.inn-1080{
	width:85%;
	max-width:1100px;
	margin:0 auto;
}


/* SP */
@media (max-width: 768px) {
html,body{min-width:initial;}
	body{
        padding-bottom: 20vw;
        font-size:3.7vw;
    }	
.pc{ display: none !important;}
.pc_inline{display: none !important;}
.sp{display: block !important;}
.sp_inline{display: inline-block !important;
}
.sp2{ display: none !important;}
.inn-1200{width:90%;}
.inn-1080{width:90%;}
}

/* SP2 */
@media (max-width: 414px) {
.pc{ display: none !important;}
.sp{ display: block !important;}
.sp2{ display: block !important;}
}

/* header-----------------------------------------------------*/
#header {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
	background:#fff;
	border-bottom: 1px solid #237BD0;
}
#header .head-flex{
	height: 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#header .head-left p{
	line-height: 1.3;
	font-size:1.2rem;
	margin-top:12px;
}
#header .head-left .logo{
	/*font-size:3.4rem;
	padding-top: 5px;
	color:#237BD0;*/
	width:100%;
	max-width: 400px
}
#header .head-right{
	display: flex;
	justify-content: space-between;
	align-items: center;}

/*#header .head-right p{
	line-height: 1.2;
	text-align: center;
	font-size:1.2rem;
	margin-right:10px;
}
#header .head-right p span{
	font-size:3.2rem;
	font-family: 'Roboto', sans-serif;
	color:#237BD0;
	position: relative;
	width:200px;
}
#header .head-right p span::before{
	content: "";
    width:20px ;
    height: 20px;
	display: inline-block;
    background-image: url("../img/tel-icon01.svg");
    background-repeat: no-repeat;
    position:absolute;
    left:-20px ;
    top: 0px;
	bottom:0;
	margin: auto
}*/

/*吹き出し*/
	#header .head-right p.huki{
		background: #faed56;
		margin-right: 20px;
		font-weight: bold;
		line-height: 1.2;
		text-align: center;
		padding: 2px 20px;
		border-radius: 30px;
		position: relative
	}
	#header .head-right p.huki .txt1{
		font-size:1.4rem
	}
	#header .head-right p.huki .txt2{
		font-size:2.0rem
	}
	#header .head-right p.huki .txt3{
		font-size:1.6rem
	}
	#header .head-right p.huki::after{
		position: absolute;
		content: '';
		bottom:5px;
		right:-10px;
		width: 0;
		height: 0;
		transform: rotate(15deg);
		border-style: solid;
		border-width: 10px 0 10px 20px;
		border-color: transparent transparent transparent #faed56;
	}



#header .btn-form + .btn-form{margin-left: 5px}
#header .btn-form a{
	min-width:150px;
	padding:10px 5px ;
	border-radius: 5px;
	text-align: center;
	display: block;
	background: #237BD0;
	color: #fff;
	font-size:1.6rem;
	font-weight: bold;
	position: relative;
}

#header .btn-form a::before{
    content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	
	background-size: contain;
	vertical-align: middle;}
#header .btn-form.contact a::before{
	background: url("../img/mail-icon.svg") no-repeat;
	margin: 1px 5px 0 0;}
#header .btn-form.estimate a::before{
	background: url("../img/estimate-icon.svg") no-repeat;
	margin: -3px 0 0 3px;
}

@media (max-width: 768px){
    #header .head-left {
        width:100%;
        text-align: center
    }

    #header .head-left p{
        font-size:1rem;

    }
    #header .head-left .logo{
        /*font-size:2.8rem;
        padding-top: 2vw;*/
        width:70%;
        margin: 0 auto
    }
    #header .head-right{display: none;}


    /*#header .head-right p{
        font-size:1rem;
    }
    #header .head-right p span{
        font-size:2.5rem;
    }*/


    #header .btn-form a{
        padding:10px 10px 10px 10px;
        font-size:1.6vw;
    }
}

/*footer_link----------------------------------------------*/

.footer_link{
	background:#237BD0 ;
	color:#fff;
	text-align: center;
	font-size:1.2rem;
	padding:0 10px 10px;
	display: flex;
	justify-content: center
}
.footer_link p+p{margin-left: 50px}

@media (max-width: 768px) {
    .footer_link{
        background:#237BD0 ;
        color:#fff;
        text-align: center;
        font-size:1rem;
        padding:10px;
        width:100%;
        position: fixed;
        bottom:0;
        left:0
    }
}

/*footer-----------------------------------------------------*/
footer{
	background:#4D4D4D ;
	color:#fff;
	text-align: center;
	font-size:1.2rem;
	padding:10px;
}
@media (max-width: 768px) {
    footer{
        background:#4D4D4D ;
        color:#fff;
        text-align: center;
        font-size:1rem;
        padding:10px;
        width:100%;
        position: fixed;
        bottom:0;
        left:0;
        z-index: 100;
    }
}


/* cv */
.cv-wrap{
	width: 100%;
	/*background: #004785;*/
	background: #134c95;
	padding:20px 0;
}

.cv-wrap .cv-inn{
	max-width: 860px;
	margin: 8px auto;
	background: #fff;
	border-radius: 100px;
	padding:20px 20px 20px 20px;
	display: flex;
	justify-content: space-between;
	position: relative;
	box-shadow: 0px 8px 5px 0px rgba(0,0,0,0.45);
	transition: .2s;
}

.cv-wrap .cv-inn:hover {
	box-shadow: none;
	margin-top: 16px;
	margin-bottom: 0px;
}
.cv-wrap .cv-inn::after{
	position: absolute;
	content: '';
	width:calc(100% - 12px);
	height:calc(100% - 12px);
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	border-radius: 100px;
	border:3px #237BD0 solid;
	background-image: url("../img/icon-click.svg");
	background-repeat: no-repeat;
	background-size:6%;
	background-position: center right 3%
}
.cv-wrap .cv-inn .img{
	width:100px;
	height:100px;
	background-image: url("../img/lineup-03.png");
	background-size:130%;
	background-position: center;
	border-radius: 50%
}
.cv-wrap .cv-inn .txt{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.cv-wrap .cv-inn .txt-inn{
	text-align: center;
	font-weight: bold;
	line-height: 1.1;
	letter-spacing: 0.3em
}
.cv-txt1 .marker{
	padding:5px;
	background:linear-gradient(transparent 40%, #faed56 40%);
}
.cv-txt1-1{
	font-size: 3.0rem
}
.cv-txt1-2{
	font-size: 5.0rem;
}
.cv-txt1-3{
	font-size: 4.0rem
}
.cv-txt2{
	letter-spacing: 0;
	font-size:1.4rem;
    margin-bottom:10px;
}
.cv-txt2 span{
	margin-top: 10px;
	display: inline-block
}

@media (max-width: 768px){
	
    .cv-wrap{
        width: 100%;
        padding:3vw 0;
    }
    .cv-wrap .cv-inn{
        max-width: 96%;
        margin: 0 auto;
        background: #fff;
        border-radius: 100px;
        padding:3vw 3vw 3vw 3vw;
        box-shadow: 0px 2vw 0px 0px #1d477f;
    }
    .cv-wrap .cv-inn:hover {
        box-shadow: 0px 2vw 0px 0px #1d477f;
        margin: 0 auto;
    }
    .cv-wrap .cv-inn::after{
        position: absolute;
        content: '';
        width:calc(100% - 3vw);
        height:calc(100% - 3vw);
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin: auto;
        border-radius: 100px;
        border:3px #237BD0 solid;
		background-size:8vw;
		background-position: center right 4vw
    }
    .cv-wrap .cv-inn .img{
        width:16vw;
        height:16vw;
    }
    .cv-wrap .cv-inn .txt{
        width:100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .cv-wrap .cv-inn .txt-inn{
        text-align: center;
        font-weight: bold;
        line-height: 1.3;
        letter-spacing: 0.3em
    }
    .cv-txt1 .marker{
        padding:0.5vw;
        background:linear-gradient(transparent 40%, #faed56 40%);
    }
    .cv-txt1-1{
        font-size: 5vw
    }
    .cv-txt1-2{
        font-size: 7vw;
    }
    .cv-txt1-3{
        font-size: 6vw
    }
}
	

/*cta*/
.cta-wrap{
		display: flex
	}
@media (max-width: 768px){	
.cta-wrap .btn-form{
	width:50%;
	height:12vw;
	display: flex;
	align-items: center;
	justify-content: center
	}	
.cta-wrap .btn-form a{
	width:100%;
	height:100%;
	box-sizing: border-box;
	background: #237BD0;
	text-align: center;
	color: #fff;
	font-size:1.6rem;
	font-weight: bold;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center
}

.cta-wrap .btn-form a::before{
    content: "";
	display: inline-block;
	width: 20px;
	height: 25px;
	background-size: contain;
	vertical-align: middle;
	}
.cta-wrap  .btn-form +	.btn-form{border-left:#fff 1px solid}
.cta-wrap  .btn-form.contact a::before{
	background: url("../img/mail-icon.svg") no-repeat;
	margin: 8px 5px 0 0;}
.cta-wrap  .btn-form.estimate a::before{
	background: url("../img/estimate-icon.svg") no-repeat;
	margin: -2px 3px 0 3px;
}

.cta-wrap .btn-form a:hover{opacity: 1}
.cta-fix{
	width:100%;
	position: fixed;
	z-index: 999999;
	bottom:38px;
	left:0;
	}

a.cta-works{
    position: relative;
    background: #fff;
    color:#2274B6;
    border:2px solid #2274B6;
	font-size:1.6rem;
	font-weight: bold;
    height:12vw;
	display: flex;
	align-items: center;
	justify-content: center;
    }
a.cta-works::after{
    display:inline-block;
    content:'';
    background: url("../img/fl-btn-arrow.svg") no-repeat;
    width:3.5vw;
    height:3.5vw;
    background-size: 100%;
    margin-left:1vw;
    }
}

/* 施工実績　フローティング
---------------------------------------------------------------------------- */
.works_cta{
	width: 60px;
	height: 200px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	position: fixed;
	right:0;
	top: 11%;
	background:rgba(255,255,255,0.90);
	border:2px solid #2274B6;
	border-right:none;
	transition: .3s;
	padding:0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3
}
.works_cta:hover{opacity: .8;
	border:2px solid #2274B6;
	border-right:none;
}
.works_cta img{
	height:90%;
	width:auto
}

@media (max-width: 768px){
    .works_cta{display: none;}
}


/* h2 */
h2{position: relative;}
h2 span{
	color:#237BD0;
	font-size:2rem;
    font-weight: bold;
    display: block;
    position: relative;
    z-index: 1;
    left:80px;
}

@media (max-width: 768px){
	h2{
        width:100%;
        line-height: 1.8;
        left:0;
    }
    h2 span{font-size: 5vw;}
}

/* btn */
.btn-w a{
	width:485px;
	border-radius: 30px;
	padding:10px;
	background: #fff;
	color: #237BD0;
	border: 2px solid #237BD0;
	text-align: center;
	display: block;
	font-size:1.8rem;
	font-weight: bold;
	margin:50px  auto 0 auto ;
	position: relative;
}

.btn-w a::after{
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: -2px -60px 0 60px;
	background: url("../img/arrow-01.svg") no-repeat;
	background-size: contain;
	vertical-align: middle;
}


@media (max-width: 768px){
	.btn-w a{
		box-sizing: border-box;
		width:100%;
		font-size:3.6vw;
		margin:30px  auto 0 auto ;
	}
	.btn-w a::after{
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        margin: -2px -10px 0 10px;
        background: url("../img/arrow-01.svg") no-repeat;
        background-size: contain;
        vertical-align: middle;
    }

}

/* アイテム数 セレクト*/
.item-su select{width:5em}

.item-su select::-ms-expand {
    display: none;
}
.item-su select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 30px 5px 10px;
    font-size: 93%;
    line-height: 1.1em;
    border-radius: 3px;
    border: 1px solid #333;
    background-image: url("../estimate/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: right 10px center;
    background-color: #fff;
}

/*GW営業停止のお知らせ*/
.gw-news{
	font-size:1.4rem;
	font-weight: bold;
    line-height: 1.5;
    color: #fff;
    width:100%;
    margin:10px auto 0;
}
.gw-news p{
    border-radius: 8px;
    background: red;
    width:100%;
    margin:0 auto;
    padding:10px;
    text-align: center;
}