@charset "UTF-8";



/*==================================================
文字背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{animation-name:bgextendAnimeBase;animation-duration:1s;animation-fill-mode:forwards;position: relative;overflow: hidden;opacity:0;animation-delay: 2s;}

@keyframes bgextendAnimeBase{
  from {opacity:0;}
  to {opacity:1;}
}

/*中の要素*/
.bgappear{animation-name:bgextendAnimeSecond;animation-duration:1s;animation-delay: 0.6s;animation-fill-mode:forwards;opacity: 0;animation-delay: 2s;}

@keyframes bgextendAnimeSecond{
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/*左から右*/
.bgLRextend::before{animation-delay: 2s;animation-name:bgLRextendAnime;animation-duration:1s;animation-fill-mode:forwards;content: "";position: absolute;width: 100%;height: 100%;background-color: #000;
}
@keyframes bgLRextendAnime{
  0% {transform-origin:left;transform:scaleX(0);}
  50% {transform-origin:left;transform:scaleX(1);}
  50.001% {transform-origin:right;}
  100% {transform-origin:right;transform:scaleX(0);}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,.bgLRextendTrigger{opacity: 0;}




/* --------------------------------------------------
vegas
-------------------------------------------------- */
.bg-slider{padding:30px 0;}

.bg{background-color: #f3f3f3;}
.imagesyosai{float:left;width:50%;}
.imagesyosai img{width:100%;height:auto;}

/* ########### 850px以下 ########### */
@media (max-width: 850px) {

.bg-slider{background:#fff;padding:30px 0;}


}/* 850px以下 end */






/* --------------------------------------------------
基本設定
-------------------------------------------------- */


html {
    /* ルートのフォントサイズを10pxに設定しておく */
	font-size: 62.5%;
}


body {margin: 0;font:16px/1 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN','Hiragino San', 'Meiryo', sans-serif;}
body,.copy-small,.contact-kinds,.contact-tel{margin: 0;font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;}
* html body {font-size: 1.6em;}
*:first-child+html body {font-size: 1.6em;}


.newBox h3,.flow-block .number{font-family: 'Montserrat', sans-serif;}
.top-list-right .header-tel a,.contactfooter-box h3,.conterts-title-en,.title-jp,.default-copy-sub,.contets-box-inner h3,.default-copy-big,#footer-inner h2,.flow-block h3,.flow-block02 h3,.conterts-title-sub,.conterts-title h3{font-family: 'Noto Sans JP', sans;}



a:link{color:#333333;}
a:visited{color:#333333;}
a:hover{color:#5d4a17;text-decoration:none;}
a:active{color:#5d4a17;text-decoration:none;}

.big{font-size:2.2rem;}
.middle{font-size:1.8rem;}
.small{font-size:1.2rem;}
.red{color:#da5050;}
.white{color:#ffffff;}
.darkblue{color:#1546ab;}
.orange{color:#f19209;}
.black{color:#000;}


.arrow{font-size:5.0rem;color:#0facd9;height:50px;}

.marker{background:linear-gradient(transparent 60%, #ff6 80%);}

.fa-dot-circle{font-size:1.5rem;font-weight:600;color:#0facd9;margin-right:10px;}
.fa-check-square{font-size:2.5rem;font-weight:600;color:#0facd9;margin-right:10px;}


/* 文字選択背景色 */
::selection {background: #0facd9; /*背景色*/color: #fff; /*文字色*/}
::-moz-selection {background: #0facd9; /*背景色*/color: #fff; /*文字色*/}


.default-copy{clear:both;font-size:2.2rem;margin-bottom:10px;padding-top:10px;padding-bottom:0px;line-height:1.9;text-align:center;font-weight:500;}
.default-copy-big{clear:both;font-size:2.3rem;margin-bottom:10px;padding-top:10px;padding-bottom:0px;line-height:1.9;text-align:center;font-weight:500;}
.default-copy span{font-size:1.6rem;margin-left:20px;}
.default-copy-sub{font-size:1.7rem;margin-bottom:20px;text-align:center;font-weight:500;line-height:1.6;}
.default-copy-sub02{font-size:2.2rem;text-align:center;font-weight:700;line-height:1.6;}
.default-copy-sub02 span{font-size:2.8rem;}

.conterts-title h3{font-size:1.8rem;line-height:1.9;}
.conterts-title-en{font-size:3.0rem;font-weight:600;color:#0facd9;}
.conterts-title-white{font-size:3.5rem;font-weight:600;color:#fff;}
.conterts-title-en span,.conterts-title-white span{font-size:1.8rem;font-weight:600;}
.conterts-title-sub{font-size:2.2rem;font-weight:600;line-height:1.9;}
.conterts-title-sub span{font-size:2.5rem;font-weight:600;}

.conterts-title-en02{font-size:3.0rem;font-weight:600;color:#0facd9;}
.conterts-title-en02 span{font-size:1.8rem;font-weight:600;}
.conterts-title02 h3{font-size:2.8rem;line-height:1.9;}
.conterts-title02 ul{margin-left:1em;}
.conterts-title02 .list-midashi li{text-indent: -1em;line-height:1.9;}


/* ################################### 画面サイズ960px以下 ########################################### */
@media screen and (max-width:960px) {

.conterts-title-en{font-size:2.5em;font-weight:600;color:#0facd9;}
.default-copy-big{font-size:2.0rem;}
.conterts-title-sub span{font-size:2.2rem;font-weight:600;}

.conterts-title02 h3{font-size:2.5rem;}

.conterts-title-en02 span{font-size:1.4rem;font-weight:600;}

}/* 960px以下end */



/* ################################### 画面サイズ600px以下 ########################################### */
@media screen and (max-width:960px) {

.conterts-title-en02{font-size:2.5rem;font-weight:600;color:#0facd9;}
.conterts-title-en02 span{font-size:1.2rem;font-weight:600;}

}/* 600px以下end */



/* --------------------------------------------------
wrapper
-------------------------------------------------- */

/* 全体の横幅を固定 */

.wrapper,.wrapper-default,.wrapper-home-inner{max-width: 1200px;margin: 0 auto;text-align:left;clear:both;width:100%;}
.wrapper-default-inner{padding: 0 30px;}

.wrapper-home-btn{max-width: 1400px;margin: 0 auto;}

.home-bg-all{background: linear-gradient(45deg,#0facd9 0%,#0facd9 70%,#0a2fa6 90%);}
.home-bg{background:linear-gradient(90deg, #7cc1d5 0%,#7cc1d5 30%,#a6d8e7 50%,#eeebc0 70%,#e3c0ee 80%,#7cc1d5 100%) 0% center / 200% auto;animation: bggradient 10s ease infinite;animation: example 30s linear infinite;}

/* 背景の横位置をズラす */
@keyframes example {
  to { background-position-x: 200%; }
}





.home-bg02{background: #f3f3f3;}
.home-bg03{background: #f6f4e5;overflow: hidden;margin-bottom:100px;}
.home-bg04{background:#4eaad5;}
.home-bg-diagnose{background: url(../imgdiagnose/diagnose_photo001.jpg) no-repeat center / cover;}

.wrapper-home-block02{width: 100%;margin-top:0;padding-top:0;padding-bottom:20px;}
.wrapper-home-block02-inner{padding:10px 0;}

.wrapper-default-block{width: 100%;background-color: #e0b625;margin-top:10px;padding-bottom:50px;}

/* ################################### 画面サイズ768px以下 ########################################### */
@media screen and (max-width:960px) {

#wrapper,#wrapper-default{padding-top:50px;}

}/* 960px以下end */



/* 文字左、写真右回り込み */

.photo-box{display: flex;max-width:1600px;width:100%;margin: 0 auto 80px;clear:both;}
.photo-box-left{flex: 5;padding:0 20px;background: url(../imghome/home001.jpg) no-repeat center / cover;}
.photo-box-right{flex: 4;margin:20px 0 ;padding:0 20px;width: 100%;position: relative;left: -5.28%;background: #fff;padding: 35px 50px;box-sizing: border-box;}
.photo-box-left img,.photo-box-right img{text-align:center;width:100%;height:auto;}


.photo-box-under{display: flex;flex-direction: row-reverse;max-width:1400px;width:100%;margin: 0 auto;padding-bottom:80px;clear:both;}
.photo-box-left-under{flex: 2;padding:0 20px;}
.photo-box-right-under{flex: 2;margin:20px 0 ;padding:0 20px;padding: 35px 50px;}
.photo-box-left-under img,.photo-box-right-under img{text-align:center;width:100%;height:auto;}


.photo-box-diagnose{display: flex;flex-direction: row-reverse;max-width:1200px;width:100%;margin: 0 auto;clear:both;}
.photo-box-left-diagnose{flex: 2;padding:0 20px;}
.photo-box-right-diagnose{flex: 2;margin:20px 0 ;padding: 35px 50px;}
.photo-box-left-diagnose img,.photo-box-right-diagnose img{text-align:center;width:100%;height:auto;}



/* ################################### 画面サイズ1200px以下 ########################################### */
@media screen and (max-width:1200px) {

.photo-box-left{flex: 1;}
.photo-box-right{flex: 1;margin:20px 0 ;padding:0 20px;width: 100%;position: relative;left: 0%;background: #fff;padding: 35px 50px;}

}/* 1200px以下end */


/* ################################### 画面サイズ960px以下 ########################################### */
@media screen and (max-width:960px) {

.photo-box,.photo-box-under{display:block;margin: 0 auto 40px;padding-bottom:0;}
.photo-box-left{height:500px;}
.photo-box-right{padding:0 20px;}

.photo-box-diagnose{display:block;margin: 0 auto 40px;}
.photo-box-left-diagnose{display:none;}


}/* 960px以下end */

/* ################################### 画面サイズ768px以下 ########################################### */
@media screen and (max-width:768px) {

.conterts-title h3{text-align:center;font-size: 1.7rem;line-height:1.9;}
.photo-box-right-under{flex: 2;margin:20px 0 ;padding: 35px 20px;}

}/* 768px以下end */


.photo-box .pr img{max-width:100px;height:auto;}


/* --------------------------------------------------
header / top-list
-------------------------------------------------- */

header{width:100%;background: #ffffff;margin-bottom:10px;}
.header-global{clear:both;width:100%;}
.header-global-inner{max-width:2000px;width:100%;margin:0 auto 0;}

.top-list-left {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.top-list-left h1{line-height:1.9;padding-top:20px;margin-bottom:5px;}
.top-list-left h1 img{max-width:270px;width:100%;height:auto;padding-right:20px;}


.top-list{display: flex;width:100%;align-items: center;}
.top-list-left{flex:3;margin-left:20px;}
.top-list-right{flex:2;text-align:right;margin-right:10px;margin-top:10px;}
.top-list a{text-decoration:none;}
.top-list-right .header-tel a{font-size:2.3rem;color:#0facd9;font-weight:500;line-height: 40px;}
.top-list-right .header-tel a .fa-phone{font-size:2.5rem;}




/* ######################################### 1500px以上 ######################################### */
@media (min-width: 1500px) {

.header-global{clear:both;max-width:1800px;width:100%;margin:0 auto 10px;}

}/* 1500px以上 end */


/* ################################### 画面サイズ1140px以下 ########################################### */
@media screen and (max-width:1140px) {

.top-list-left {display:block;}

header,.header-global{background: transparent;}
header{margin-bottom:10px;}
.top-list{display: block;}
.top-list-left{text-align:center;padding:20px 0 0;margin-left:0px;}
.top-list-right{text-align:center;margin:0;}
.top-list-right a{;font-weight:bold;}
.top-list-right .header-tel{margin-right:0;}
.top-list-left h1 img{max-width:300px;width:100%;height:auto;padding-right:0px;}

}/* 1140px以下end */



/* ################################### 画面サイズ460px以下 ########################################### */
@media screen and (max-width:460px) {

.top-list-left h1 img{max-width:260px;}
.top-list-left{text-align:center;padding:50px 0 0;}
.flow-block .header-tel a{font-size:3.0rem;}

}/* 460px以下end */



/* --------------------------------------------------
mainphoto
-------------------------------------------------- */

/* home-header */



.home-main-block{position: relative;max-width:1700px;margin: 0 auto 50px;}
.home-box{max-width:1200px;height:600px;margin:20px 0 0 auto;}

.bg-images-home{margin-left:25px;max-width:170px;height:300px;background:url(../imghome/rf10131569541_x.png) no-repeat top left;background-size: 100%;margin-top:-60px;}


.home-copy{max-width:1100px;width:100%;height:auto;position: absolute;top: 270px;left: 5%;}

.home-copy-en{font-weight:400;font-size:2.2rem;line-height:45px;letter-spacing: 0.1em;}
.home-copy-en span{background:#fff;padding:10px 10px;border-top:1px solid #999;border-bottom:1px solid #999;}

.home-copy-jpsrider{margin-top:5px;}
.home-copy-jpsrider span{font-weight:400;font-size:1.6rem;padding:10px 10px;letter-spacing: 0.1em;background:#fff;}


/* ################################### 画面サイズ650px以下 ########################################### */
@media screen and (max-width:650px) {

.home-box{height:400px;}
.home-copy{top: 140px;left: 5%;}
.home-copy-en{font-size:1.4rem;line-height:25px;}
.home-copy-jpsrider span{font-size:1.4rem;padding:10px 10px;letter-spacing: 0.1em;background:#fff;}

}/* 650px以下end */







/* --------------------------------------------------
HOME
-------------------------------------------------- */


.bg-color{animation: AnimationCompany 2 cubic-bezier(.4, 0, .2, 1) forwards;animation-fill-mode:forwards;}
.bg-color{height:10px;background: linear-gradient(90deg,#aed8e4,#aed8e4);background-size: 100% 100%;animation: AnimationCompanyColor 3s ease infinite;opacity: 1.0;animation-iteration-count: 1;}


@keyframes AnimationCompany {
0% {transform: translateX(100%);}
100% {transform: translateX(100%);}
}

@keyframes AnimationCompanyColor {
0%{background-position:0% 50%;width:0;}
100%{background-position:100% 0%;width:100%;}
}




.arrow a {
  padding-top: 60px;
  color:#0facd9;
  text-decoration:none;
}
.arrow a span {
  position: absolute;
  top: 90%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 30px;
  box-sizing: border-box;
}
.arrow a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}




/* --------------------------------------------------
4段組（HOME使用)
-------------------------------------------------- */


.contets-box{display: flex;  justify-content: space-between;flex-wrap: wrap;margin:0 auto;padding:30px 0 50px;}
.contets-box-paint{width:25%;}
.contets-box-inner{padding:4px;}

.contets-photo{overflow: hidden;}
.contets-box-inner img{-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .5s ease-in-out;transition: .5s ease-in-out;width:100%;height:auto;}
.contets-box-inner:hover img{-webkit-transform: scale(1.2);transform: scale(1.2);}
.contets-box-inner h3{text-align:center;background-color: #fff;margin-top:-7px;padding-top:25px;padding-bottom:12px;font-size:1.8rem;}



/* ########### 960px以下 ########### */
@media (max-width: 960px) {

.contets-box-paint{width:50%;}

}/* 960px以下end */


/* ########### 600px以下 ########### */
@media (max-width: 600px) {

.contets-box{display:block;}
.contets-box-paint{width:100%;}
.contets-box-inner{margin-bottom:20px;}
.contets-box-inner h3{padding-top:25px;padding-bottom:22px;}

}/* 600px以下end */





/* --------------------------------------------------
コンタクトフッターunder
-------------------------------------------------- */

.contactfooter-wrapper{clear:both;width:100%;margin:0;background:#f3f3f3;text-align:center;}
.contactfooter-box{max-width:1200px;width:100%;margin: 0 auto;clear:both;padding:40px 0;}
.contactfooter-box h3{font-size:3.0rem;font-weight:600;letter-spacing:5px;}
.contactfooter-box h3 span{font-size:1.5rem;margin-left:20px;}



/* ########### 650px以下 ########### */
@media (max-width: 650px) {

.contactfooter-box{display:block;padding:40px 0;}
.contactfooter-wrapper .btn-width{width: 350px;margin:0 auto;text-align:center;}
.contactfooter-box h3{font-size:3.0rem;}

}/* 650px以下end */



/* --------------------------------------------------
清光の安心塗装
-------------------------------------------------- */

.concept-copy{font-size: 3.7rem;color: #fff;font-weight:700;text-align:center;-webkit-text-stroke: 1px #0facd9;text-stroke: 1px #0facd9;}
.concept-block{margin-top:50px;}


/* --------------------------------------------------
塗替えをお考えの方へ
-------------------------------------------------- */

.list-wrapper{max-width:1400px;display:flex;justify-content: space-between;flex-wrap: wrap;margin:0 auto;padding:30px 30px 20px;}
.list-photo-inner{width:20%;}
.list-photo{padding:2%;}
.list-photo-inner img{width:100%;height:auto;margin-bottom:10px;}
.list-photo-inner h4{font-size: 2.2rem;font-weight:bold;line-height:1.5;color:#0facd9;}
.list-photo-inner .list-photo-block{background:#fff;padding:10px;}
.list-photo-inner .list-photo-text{text-align:left;margin-top:10px;}


/* ########### 768px以下 ########### */
@media (max-width: 768px) {

.list-wrapper::after{content:"";display: block;width:33.333%;}
.list-photo-inner{width:33.333%;}

}/* 768px以下end */


/* ########### 550x以下 ########### */
@media (max-width: 550px) {

.list-photo-inner{width:50%;}

}/* 550x以下end */



/* --------------------------------------------------
会社案内/採用情報
-------------------------------------------------- */

.table{width:100%;margin:40px 0 80px;border:1px solid #ccc;}
.table td{padding:20px;border-bottom:1px solid #ccc;line-height:1.9;}
.c-title{min-width:70px;width:200px;background:#f3f3f3;text-align:center;}

.company-photo{display: flex;}
.company-photo-left{flex:1;}
.company-photo-right{flex:1;text-align:right;}
.company-photo-right img{max-width:450px;width:100%;height:auto;}




/* ################################### 画面サイズ700px以下 ########################################### */
@media screen and (max-width: 700px) {

.company-big{font-size:3.7rem;}
.company-photo{display: block;}
.company-photo-right{text-align:center;margin-top:20px;}


}/* 700px以下end */


/* ################################### 画面サイズ500px以下 ########################################### */
@media screen and (max-width: 530px) {

.table td{padding:10px;}
.company-left,.company-right{float:none;width:100%;}
.company-big{margin:20px 20px 5px;}
.c-title{min-width:70px;width:120px;background:#f3f3f3;text-align:center;}

}/* 530px以下end */





/* --------------------------------------------------
採用情報
-------------------------------------------------- */

.c-title-re{min-width:70px;width:200px;text-align:center;background:#f3f3f3;}

/* ################################### 画面サイズ500px以下 ########################################### */
@media screen and (max-width: 530px) {

.c-title-re{min-width:70px;width:80px;background:#fff;text-align:center;}

}/* 530px以下end */






/* --------------------------------------------------
施工の流れ
-------------------------------------------------- */
.flow-block{padding:0 0 50px;}
.flow-block-top{background:#aed8e4;}
.flow-block-top02{background: #f6f4e5;}

.flow-block-default,.flow-block-top,.flow-block-top02{padding:20px 40px;}

.flow-block h3{font-size:2.2rem;font-weight:bold;clear:both;background:#8ecba2;padding:10px;color:#fff;}
.flow-block02 h3{font-size:2.2rem;font-weight:bold;clear:both;background:#aed8e4;padding:10px;color:#fff;}
.flow-block03 h3{font-size:2.2rem;font-weight:bold;clear:both;background:#db885b;padding:10px;color:#fff;}

.flow-block .number,.flow-block02 .number{font-size:2.8rem;color:#fff;margin-right:20px;vertical-align:baseline;font-style:italic;}
.flow-block .header-tel a{font-weight:500;font-size:3.4rem;font-weight:700;line-height: 50px;text-decoration:none;}



.flow-contents{display: flex;clear:both;}
.flow-contents-left{flex: 5;}
.flow-contents-right{flex: 2;margin-right:20px;}
.flow-contents-right img{width:100%;height:auto;padding:20px;}


/* ################################### 画面サイズ600px以下 ########################################### */
@media screen and (max-width:700px) {

.flow-block-default,.flow-block-top,.flow-block-top02{padding:20px 20px;}
.flow-contents{display:block;}
.flow-block img{padding:0;}
.flow-block h3,.flow-block02 h3{font-size:1.8rem;}
.flow-block .number,.flow-block02 .number{font-size:3.0rem;}

}/* 700px以下end */


/* --------------------------------------------------
よくあるご質問
-------------------------------------------------- */

.qa-list{padding-bottom:80px;}

.qa-list dl {position: relative;margin: 0;padding: 28px 80px 28px 30px;cursor: pointer;border-bottom: 1px solid #ccc;}
.qa-list dl:first-child {border-top: 1px solid #ccc;}
.qa-list dl::before {position: absolute;top: 35px;right: 35px;display: block;width: 13px;height: 13px;margin: auto;content: '';transform: rotate(135deg);border-top: 4px solid #0facd9;border-right: 4px solid #0facd9;}
.qa-list .open::before {transform: rotate(-45deg);}
.qa-list dl dt {position: relative;margin: 0;padding: 0 0 0 50px;font-weight: bold;line-height:1.6;}
.qa-list dl dt::before {font-size: 25px;line-height: 1;position: absolute;top: 0px;left: 0;display: block;content: 'Q.';color: #0facd9;}
.qa-list dl dd::before {font-size: 25px;line-height: 1;position: absolute;top: 3px;left: 2px;display: block;content: 'A.';font-weight: bold;color: #e60012;}
.qa-list dl dd {position: relative;display: none;height: auto;margin: 20px 0 0;padding: 5px 0 0 50px;}
.qa-list dl dd p {margin: 30px 0 0;line-height:1.6;}
.qa-list dl dd p:first-child{margin-top: 0;}


/* --------------------------------------------------
代表挨拶
-------------------------------------------------- */

.ceo-name{text-align:right;padding-bottom:40px;}
.greeting-date{margin-right:20px;}


/* 文字左、写真右回り込み */

.message-box{display: flex;max-width:1300px;width:100%;margin: 0 auto;padding:50px 0;clear:both;}
.message-box-left{flex: 4;padding-right:50px;}
.message-box-left h3{margin-bottom:20px;}
.message-box-right{flex: 1;text-align:center;margin-top:40px;}
.message-box-right img{width:100%; height:auto;}

/* ################################### 画面サイズ768px以下 ########################################### */
@media screen and (max-width:700px) {

.message-box{display:block;padding:50px 0 0;}
.message-box-left{flex: 1;padding-right:0;margin-bottom:40px;}
.message-box-right{flex: 1;}
.ceo-name{text-align:center;max-width:240px;margin:0 auto;}
.ceo-name img{max-width:270px;height:auto;}
.message-box-right img{width:200px;height:auto;}

}/* 768px以下end */








/* --------------------------------------------------
沿革
-------------------------------------------------- */

.symbol-box{display: flex;align-items: center;margin-bottom:50px;}
.symbol-box-left{flex: 2;margin-right:20px;}
.symbol-box-right{flex: 10;}
.symbol-box-left img{max-width:150px;width:100%;height:auto;}
.symbol-box-right h3{margin-bottom:20px;font-size:1.8rem;}



/* ################################### 画面サイズ768px以下 ########################################### */
@media screen and (max-width:700px) {

.symbol-box{display:block;}
.symbol-box-left{margin:-40px auto 20px;text-align:center;}
.symbol-box-left img{max-width:120px;width:100%;height:auto;}


}/* 768px以下end */




/* --------------------------------------------------
第2階層NAVI
-------------------------------------------------- */

.centered {position: relative;overflow: hidden;margin:20px 0 0;}
.centered ul {position: relative;left: 50%;float: left;}
.centered ul li {position: relative;left: -50%;float: left;font-size:1.6rem;line-height:1.9;}
.centered ul li a{margin:0 20px;}


/* ########### 550px以下 ########### */
@media (max-width: 550px) {

.centered ul li{font-size:1.5rem;}
.centered ul li a{margin:0 5px;}

}/* 550px以下end */

/* ########### 400px以下 ########### */
@media (max-width: 400px) {

.centered ul li {font-size:1.2rem;}

}/* 400px以下end */











/* --------------------------------------------------
tree
-------------------------------------------------- */

#tree{width:100%;}
.tree-inner{max-width:1200px;text-align:right;margin: 0 auto;padding:15px 30px;}
.tree-inner i{margin:0 15px;}
#tree .breadcrumb,#tree .breadcrumb a{font-size:1.4rem;}

/* ########### 650px以下 ########### */
@media (max-width: 650px) {

.tree-inner i{margin:0 5px;}
.tree-inner{padding-right:10px;text-align:right;}


}/* 650px以下end */



/* --------------------------------------------------
各ページメイン画像
-------------------------------------------------- */

/* 各ページメイン画像 */
#title{width:100%;padding:0;margin-top:0px;}
.title-inner{padding:0;}


.title-en{text-align:left;font-size:3.2rem;color:#fff;padding:170px 0 1px 150px;font-weight:600;text-transform: uppercase;letter-spacing:5px;}
.title-jp{text-align:left;font-size:1.8rem;color:#fff;padding:5px 0 0 155px;font-weight:600;}
.title-en02{text-align:left;font-size:3.8rem;color:#fff;padding:80px 0 1px 150px;font-weight:700;text-transform: uppercase;letter-spacing:1px;}
.title-jp-middle{font-size:2.0rem;color:#fff;font-weight:700;}

.title-en-default{text-align:left;font-size:5.0rem;color:#fff;padding:70px 0 0 90px;font-weight:700;}
.title-jp-default{font-size:1.6rem;color:#fff;padding:5px 0 0 90px;font-weight:700;}


.titleinner-default{max-width:1400px;width:100%;height:250px;margin: 0 auto;background:url(../imgmessage/message_photo001.jpg) no-repeat top center;background-size: cover;}



.titleinner-works,.titleinner-company,.titleinner-recruiting{max-width:1900px;width:100%;height:400px;margin: 0 auto;padding:0;}
.titleinner-concept,.titleinner-message,.titleinner-faq{max-width:1900px;width:100%;height:250px;margin: 0 auto;padding:0;}
.titleinner-case{max-width:1900px;width:100%;height:400px;margin: 0 auto;padding:0;}


.titleinner-works{background:url(../imgworks/works_photo001.jpg) no-repeat top center;background-size: cover;}
.titleinner-recruiting{background:url(../imgrecruiting/recruiting_photo001.jpg) no-repeat top right;background-size: cover;}
.titleinner-case{background:url(../imgcase/case_photo001.jpg) no-repeat top center;background-size: cover;}
.titleinner-company{background:url(../imgcompany/company_photo001.jpg) no-repeat top center;background-size: cover;}
.titleinner-message{background:url(../imgmessage/message_photo001.jpg) no-repeat top center;background-size: cover;}
.titleinner-faq{background:url(../imgfaq/faq_photo001.jpg) no-repeat top center;background-size: cover;}


.titleinner-concept{background:url(../imgconcept/concept_photo001.jpg) no-repeat top center;background-size: cover;}


.diagnose-bg{background:#4eaad5;}
.flow-bg{background:#8ecba2;}
.titleinner-diagnose,.titleinner-flow{max-width:1900px;width:100%;margin: 0 auto;padding:0;text-align:center;}

.diagnose-photo{vertical-align:middle;}
.diagnose-photo img{max-width:450px;width:100%;height:auto;}



/* ################################### 画面サイズ960px以下 ########################################### */
@media screen and (max-width:960px) {

.title-inner{padding:0;}
.title-en{font-size:3.0rem;}
#title{padding:0;}

}/* 960px以下end */


/* ################################### 画面サイズ700px以下 ########################################### */
@media screen and (max-width:700px) {


.titleinner-recruiting{background:url(../imgrecruiting/recruiting_photo001sp.jpg) no-repeat top right;background-size: cover;}


}/* 700px以下end */


  
/* ################################### 画面サイズ600px以下 ########################################### */
@media screen and (max-width:600px) {


.title-en{padding-left:10px;}
.title-jp{padding-left:10px;}




}/* 600px以下end */



/* ################################### 画面サイズ500px以下 ########################################### */
@media screen and (max-width:500px) {


.title-en{font-size:3.0rem;text-align:center;padding-left:0px;}
.title-jp{font-size:1.5rem;text-align:center;padding-left:0px;}


}/* 500px以下end */





/* --------------------------------------------------
banner-block
-------------------------------------------------- */

.wrapper-banner-bg{background:#081045;padding:10px 0;}
.wrapper-banner{display: flex;margin:0 auto;max-width:700px;padding:10px;}
.wrapper-banner-left,.wrapper-banner-right{text-align:center;flex:1;}
.wrapper-banner-left img,.wrapper-banner-right img{width:98%;height:auto;}
.wrapper-banner-left img:hover,.wrapper-banner-right img:hover{opacity:0.9;}


/* ################################### 画面サイズ500px以下 ########################################### */
@media screen and (max-width:500px) {

.wrapper-banner{display: block;}
.wrapper-banner-left img,.wrapper-banner-right img{max-width:300px;width:100%;height:auto;}



}/* 500px以下end */






/* --------------------------------------------------
footer
-------------------------------------------------- */

.footer-link-wrapper{max-width:1200px;margin:0 auto;font-size:1.2rem;padding-top:20px;}
.footer-link{display: flex;border-left:1px solid #ccc;}
.footer-link li{line-height:1.9;}
.footer-link-left{flex:1;border-right:1px solid #ccc;}
.footer-link-center{flex:1;border-right:1px solid #ccc;}
.footer-link-center02{flex:1;border-right:1px solid #ccc;}
.footer-link-right{flex:1;border-right:1px solid #ccc;}
.footer-link-left,.footer-link-center,.footer-link-center02,.footer-link-right{margin-left:10%;}
.footer-link a{color:#000;}
.footer-link li{list-style: circle;color:#000;}

/* ################################### 画面サイズ600px以下 ########################################### */
@media screen and (max-width:600px) {


.footer-link-wrapper{display:none;}
.footer-wrapper{padding-top:0px;}

}/* 600px以下end */





.footer-wrapper{clear: both;padding-top:0px;}
footer{clear: both;width:100%;padding:30px 0 30px;}

#footer-inner{text-align:center;color:#000;}
#footer-inner h2{text-align:center;padding-top:50px;margin-bottom:20px;font-size:2.2rem;font-family: 'Noto Sans JP', sans;font-weight:500;}
.footer-en{font-size:1.2rem;}
.copyright{clear:both;padding-top:20px; text-align:center;font-size:1.0rem;}

.pagetop {position: fixed;bottom: 20px;right: 20px;opacity: 0;filter: alpha(opacity=0);-webkit-transition: all .4s;-moz-transition: all .4s;-o-transition: all .4s;transition: all .4s;}
.pagetop a {display: block;width: 50px;height: 50px;color:#4c84c7;text-align: center;font-size:2.5rem;text-decoration: none;line-height: 50px;}
.pagetop a:hover {opacity: 0.5;filter: alpha(opacity=50);}
.pagetop.show {opacity: 1;filter: alpha(opacity=100);}



/* ########### 768px以下 ########### */
@media (max-width: 768px) {

#footer-inner p,#footer-inner h2,#footer-inner h3{text-align:center;}
.footer-listblock{float:none;width:100%;margin-top:40px;}


}/* 768px以下 end */



/* ########### 600px以下 ########### */
@media (max-width: 600px) {


#footer-inner .footer-logo img{width:300px;height:auto;}
#footer-inner h2{font-size:1.8rem;}


}/* 600px以下 end */






/* --------------------------------------------------
looding
-------------------------------------------------- */


/* ブラウザのスクロールバーを常に表示させることでカクカクッとなるのを防ぐ */
html{
  overflow-y:scroll;
}
 
/* ローディングの背景部分のCSS */
.loader{
  background:#fff;
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:999999;
}
 
/* ローディングのアニメーション部分のCSS (https://projects.lukehaas.me/css-loaders/) */
.loader-animation,
.loader-animation:after {
  border-radius: 50%;
  width: 6em;
  height: 6em;
  position:absolute;
top: 40%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

  
.loader-animation {
  margin: 0 auto;
  font-size: 1.0rem;
  position: relative;
  text-indent: -9999em;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  border-left: 2px solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* --------------------------------------------------
仕様共通
-------------------------------------------------- */


.cr { clear:both; }
.center{text-align:center;}
.right{text-align:right;}


p,h4{line-height:1.9;}
p img,h1 img,h2 img,h3 img,h4 img,.link-style img{vertical-align: middle;}
li{list-style : none ;} 
 
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */






.space01{margin:0 0 10px;}
.space02{margin:0 0 20px;}
.space03{margin:0 0 30px;}
.space04{margin:0 0 40px;}
.space05{margin:0 0 50px;}
.space06{margin:0 0 60px;}
.space07{margin:0 0 70px;}
.space08{margin:0 0 80px;}
.space09{margin:0 0 90px;}
.space10{margin:0 0 100px;}
.space11{margin:10px 0 0;}
.space12{margin:20px 0 0;}
.space13{margin:30px 0 0;}
.space14{margin:10px 0 100px;}
.space15{margin:30px 0 50px;}
.space16{padding:30px 0 100px;}
.space17{padding:60px 0;}
.space18{margin:80px 0 20px;}
.space19{padding:40px 0;}
.space20{padding-top:80px;padding-bottom:30px;}
.space21{padding:10px 0;}
.space22{padding-top:0;padding-bottom:30px;}
.space23{padding:60px 0 0;}
.space24{padding:40px 0 20px;}


/* --------------------------------------------------
entry
-------------------------------------------------- */

.entrybodyBlock{clear:both;}
.entrybodyBlock img{max-width:100%;height:auto;margin:20px 0 30px;}
.entryline h1{font-size:2.4rem;}
.entryline h1 img{vertical-align:middle;}

.entryline h1 a{margin:0 0 40px;line-height:1.7;font-size:2.0rem;font-weight:normal;text-decoration:none;}
.entry-date{margin:5px 0 30px;padding: 0;font-size:1.2rem;}
.entry{margin:0 0 100px;}


#entryside{margin:0 0 60px;}
#entryside h2{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid;border-color:#ededed;font-size:1.6rem;font-weight:normal;}
#entryside ul{margin:0 0 50px;}
#entryside li{margin:0 0 0 10px;padding: 0 0 0 16px;line-height:1.9;}

.entry-big{margin:0 0 40px;padding-top:5px;padding-bottom:5px;text-align:center;background-color: #ffff;border: 1px solid #ccc;}


/* ################################### 画面サイズ480px以下 ########################################### */
@media screen and (max-width:480px) {

.entryline h1 a{font-size:1.6rem;}

}/* 480px以下end */



/* --------------------------------------------------
news 2列
-------------------------------------------------- */

.home-contents-block{display: flex;max-width:1200px;margin:0 auto;padding-bottom:0px;}
.news-title{flex: 1;margin-right:10px;}
.news-contents{flex: 5;margin-left:10px;}


/* ########### 1200px以下 ########### */
@media (max-width: 1200px) {

.home-contents-block{margin:0 20px;}

}/* 1200px以下end */


/* ########### 650px以下 ########### */
@media (max-width: 650px) {

.home-contents-block{display:block;padding-top:50px;padding-bottom:30px;}
.news-title{margin-right:0px;}
.news-contents{flex: 1; margin-left:0px;}

}/* 650px以下end */




/* --------------------------------------------------
new
-------------------------------------------------- */

.newBox{clear:both;padding:50px 0 20px;margin:0 auto;}
.newBox h3{text-align:left;font-size:3.5rem;color:#0facd9;font-weight:600;margin-bottom:5px;}
.newBox .news{font-size:1.7rem;color:#0facd9;font-weight:700;}


span.new {display: none;color: #fff;background: #ee5555;font-size:14px;padding:1px 3px;}
span.new img {vertical-align: middle;margin:0 0 0 5px;}
span.new,span.categorylink{margin: 0 0 0 3px;font-size:1.2rem;white-space: nowrap;}


.news-cat{
	margin: 0 0 0 10px;
}

.newBox article{clear:both;padding:10px 0 15px 3px;margin:4px 0;line-height:1.7;border-bottom:1px solid #ccc;}

.day{float:left;background-color: #0facd9;padding:1px 5px;color:#fff;}
.day p{font-size: 1.2rem;}
.newstext{float: none;width: auto;margin-left: 100px;}


/* ########### 650px以下 ########### */
@media (max-width: 650px) {

.newBox{clear:both;padding:10px 0 30px;}
.newBox h3{font-size:3.0rem;}

}/* 650px以下end */




/* --------------------------------------------------
お問い合わせ
-------------------------------------------------- */

.contact-top{margin:10px 0 20px;}
.c-box{clear:both;padding:30px 0;margin:0;font-size:2.5rem;text-align:center;border:1px solid #333;line-height:1.7;}
.c-box .tel{background: #2db99c;margin-right:15px;padding:3px 10px;color:#fff;font-size:2.0rem;}
.c-box .small{font-size:1.5rem;}


.c-box02{clear:both;padding:8px 0;margin:0;font-size:1.8rem;text-align:center;border:1px solid #333;line-height:1.7;}
.c-box02 .tel{background: #2db99c;margin-right:15px;padding:3px 10px;color:#fff;font-size:2.0rem;}
.c-box02 .small{font-size:1.5rem;}

.left-contact{width:49%;float:left;}
.right-contact{width:49%;float:right;}


/* ########### 600px以下 ########### */
@media (max-width: 600px) {

.contact-top{margin:10px 0 10px;}
.left-contact,.right-contact{width:100%;float:none;margin-bottom:10px;}
.c-box{padding:30px 0;}
.c-box,.c-box span{font-size:2.0rem;}
.c-box02,.c-box02 span{font-size:1.6rem;}
	
}/* 768px以下end */




.nowr span{white-space: nowrap;}

/* ########### 610px以下 ########### */
@media (max-width: 610px) {

.nowr{text-align:center;line-height:80px;}
.nowr span{white-space: nowrap;}


}/* 610px以下 end */





/* --------------------------------------------------
塗装事例紹介
-------------------------------------------------- */

.works-footer-center{font-size:20px;text-align:center;color:#2db99c;margin:10px 0 20px;}


.gallerylist{margin-left:1%;padding-top:0;}
.gallerylist-inner{overflow:hidden;float:left;width:24%;margin-right:1%;}

.gallery-block{background-color: #fff;overflow:hidden;width:100%;background-color: #fff;margin:0 0 60px;padding-bottom:10px;border-bottom:1px solid #fff;}
.gallery-block:hover{border-bottom:1px solid #ccc;cursor:pointer;}
.gallery-block a{text-decoration:none;}
.gallery-block h2{clear:both;font-size:16px;margin: 10px 0 0;padding:0;text-align:center;line-height:1.5;}

.gallery-block img{clear:both;width:100%;height:auto;margin:0;padding:0;}
.gallery-block .gallerylist-text{padding:10px;}

.date-gallery{font-size:11px;text-align:center;margin:10px 0 3px;}
.sub-title{font-size:12px;text-align:center;margin:0 0 10px;}

.gallery-block h3{clear:both;font-size:25px;margin: 10px 0 0;padding:0;text-align:center;line-height:1.5;}
.sub-title02{font-size:12px;margin:0 0 10px;}


/* ################################### 画面サイズ960px以下 ########################################### */
@media screen and (max-width:960px) {


.gallery-block h2{font-size:18px;}

}/* 960px以下end */






/* --------------------------------------------------
アクセス
-------------------------------------------------- */


.wrapper-map{
	max-width:2500px;
	width:100%;
	margin:0 auto 200px;
}


/* --------------------------------------------------
設備一覧
-------------------------------------------------- */

.table-list table{
	margin-bottom:100px;

}



.table-list table {
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

.table-list table th,
.table-list table td {
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 10px;
  line-height:1.7;
}

.table-list table th {
  background-color: #555;
  color:#fff;
}

.table-list .nun{width:12%;}

.machine,.com,.type,.performance{width:25%;}
.machine{width:50%;}
.machine {background-color: #eee;}

.attention{text-align:center;padding-bottom:50px;color:#ff0000;}


/* ################################### 画面サイズ500px以下 ########################################### */
@media screen and (max-width: 500px) {


  .table-list table{
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

}/* 500px以下end */


/* ################################### 画面サイズ500px以上 ########################################### */
@media screen and (min-width: 600px) {

.attention{display:none;}


}/* 600px以上end */





/* --------------------------------------------------
お問い合わせ2列
-------------------------------------------------- */

.contact-kinds{display: flex;margin:0 auto;padding-bottom:0px;}
.contact-tel{flex: 1;border:1px solid #000;width:100%;text-align:center;font-size:2.0rem;padding:10px 5px;margin-right:5px;}
.contact-tel a{text-decoration:none;}
.contact-fax{flex: 1;border:1px solid #000;font-size:2.0rem;text-align:center;padding:10px 5px;margin-left:5px;}
.contact-mail{flex: 1;font-size:2.0rem;}
.mid-top{background-color: #fff;padding:5px 10px;font-size:1.7rem;color:#000;}
.daihyo{font-size:1.7rem;}


/* ########### 650px以下 ########### */
@media (max-width: 650px) {

.mid-top{margin-right:10px;}
.contact-kinds{display:block;padding-bottom:30px;}
.contact-tel{margin:0 0 10px; padding:5px 0;border:1px solid #ccc;}
.contact-tel p{ font-size:2.4rem!important;}
.contact-fax p{ font-size:1.7rem!important;}
.contact-fax{margin:0; padding:5px 0;border:1px solid #ccc;}}
.contact-mail{margin:0; padding:0;}
.contact-tel a{   text-decoration:underline; }

}/* 650px以下end */



/* --------------------------------------------------
お問い合わせ
-------------------------------------------------- */

.contactformspace{padding:100px 0 20px;}


/* ################################### 画面サイズ650px以下 ########################################### */
@media screen and (max-width:650px) {

.contactformspace{padding:100px 0 80px;}

}/* 650px以下end */






/* --------------------------------------------------
写真ギャラリー
-------------------------------------------------- */

.gallery-photo p{
	float:left;
	width:20%;
}

.gallery-photo p img{
	width:100%;
	height:auto;
}

.gallery-photo p img{
	width:100%;
	height:auto;
}

.gallery-photo p img:hover{
	opacity: 0.8;	
}






/* ################################### 画面サイズ600px以下 ########################################### */
@media screen and (max-width:600px) {



.gallery-photo p{
	float:left;
	width:50%;
}



}/* 600px以下end */




/* --------------------------------------------------
施工事例
-------------------------------------------------- */


.case-list{
	max-width:1400px;
	margin:0 auto;
	padding:0 20px;
	display: flex;
	flex-wrap: wrap; /* 折返し可 */ 
	justify-content: space-between;
	align-items: stretch;
}


/* 子要素 */
.case-list .case-block { width: 25%;margin-bottom:30px;}
.case-list .case-block .case-block-inner{padding:10px;}

/* 親要素の疑似要素 */
.case-list::after {
	content: "";
	display:block;
	width:25%;
}
.case-list::before { 
	content: ""; 
	display:block; 
	 width:25%;
	order: 1; /* アイテムの並び順 */
}

.case-list .case-block .case-photo img{width: 100%;height: auto;}
.case-list .case-block h4{font-size:1.8rem;text-align:center;margin-top:10px;padding:15px 5px;line-height:1.6;}


/* ################################### 画面サイズ600px以下 ########################################### */
@media screen and (max-width:600px) {

.case-list .case-block { width: 50%;}

}/* 600px以下end */



/* ################################### 画面サイズ450px以下 ########################################### */
@media screen and (max-width:450px) {

.case-list{padding:0 10px;}

}/* 450px以下end */


/* --------------------------------------------------
施工事例　詳細
-------------------------------------------------- */



.syosaiBox{padding-bottom:60px;}

.syosaiphotoleft{float:right;width:55%;padding-bottom:50px;}
.syosaiphotoleft img{width:100%;height:auto;}

.syosairight{float:right;width:45%;padding-bottom:50px;}
.syosairight-inner{margin:0 30px 0 0;}
.title-top-syosai h2{font-size:20px;line-height:1.5;margin-bottom:0px;}
.title-top-subcopy{font-size:15px;color:#47cfc9;}
.title-top-price{margin-top:30px;font-size:20px;color:#ec7292;}



/* 詳細table */

.table-syosai{clear:both;width:100%;margin:50px 0 50px;padding-top:50px;}
.table-syosai td{padding:25px;border:1px solid #ccc;line-height:1.9;}


/* 詳細正方形 */

.flexcontainer{
display: flex;
flex-wrap: wrap;
  align-items: center;

}

.flexcontainer p{
  width: 10%;
  text-align: center;
}

.flexcontainer p img{
  width: 100%;
  height:auto;
 border:1px solid #fff;
}


.flexcontainer p img:hover{
 opacity: 0.8;
  transition: .3s;
}




/* ################################### 画面サイズ500px以下 ########################################### */
@media screen and (max-width: 530px) {

.table-syosai td{padding:10px;}


}/* 530px以下end */



/* ################################### 画面サイズ500px以下 ########################################### */
@media screen and (max-width: 960px) {



.flexcontainer p{
  width: 20%;
  text-align: center;
}



}/* 960px以下end */



/* ########### 880px以下 ########### */
@media (max-width: 880px) {


.syosaiphotoleft{float:none;clear:both;width:100%;margin:0 auto;}
.syosairight{float:none;clear:both;width:100%;margin:0 auto;}
.syosairight-inner{margin:0;}

}/* end */



/* ########### 560px以下 ########### */
@media (max-width: 560px) {


.syosaiphotoleft img{width:100%;height:auto;}
.syosairight-inner{margin:10px 0 0 0;}

.table-works .w-01{width:80px;}

.syosai-list03{float:none;width:100%;margin-right:0%;margin-bottom:50px;text-align:center;}
.syosai-list03 h4{font-size:15px;margin-top:10px;}


}/* end */