@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*---------------------------------------*/
/* 共通 */
/*---------------------------------------*/
/* logo */
.logo{
position:relative;
display:block;
}
.icon-logo-1{
position:absolute;
top:0;
left:0;
color:#004da0;
}
.icon-logo-2{
position:absolute;
top:0;
left:0;
color:#707378;
}
/* area指定 */
.areaInner{
width:90%;
max-width:1300px;
margin:0 auto;
position:relative;
z-index:10;
}
.areaInner.w1050{
max-width:1050px;
}
.areaInner.w980{
max-width:980px;
}
.areaInner.w800{
max-width:800px;
}
.areaBase{
margin:0 auto 90px;
overflow:hidden;
}
/* areaTtl */
.areaTtl{
font-size:143%;
font-weight:bold;
text-align:center;
line-height:1.6;
}
@media screen and (max-width:767px){
.areaTtl{
font-size:12pt;
}
}
#catalog .areaTtl,
#quote .areaTtl,
#basePage .areaTtl{
	margin-bottom:70px;
}
@media screen and (max-width:767px){
#catalog .areaTtl,
#quote .areaTtl,
#basePage .areaTtl{
	margin-bottom:30px;
}
}

.areaTtl .en{
font-size:70%;
font-weight:bold;
display:block;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
.areaTtl .en{
font-size:8pt;
}
}
/* btn */
.btn a{
display:block;
width:100%;
max-width:216px;
height:50px;
line-height:50px;
border:1px solid #000;
background:#000;
text-align:center;
}
/*IE用記述 */
@media all and (-ms-high-contrast: none){
.btn a{
line-height:53px;
}
}
@media screen and (max-width: 767px) {
.btn a{
max-width:inherit;
}
}
.btn a:hover{
background:none;
}
/*colum2*/
.btnOuter.colum2{
max-width: 470px;
margin: 0 auto;
}
.btnOuter.colum2 .btn{
width: 46%;
}
/*bigBtn*/
.bigBtn a{
max-width: 470px;
height: 80px;
line-height: 80px;
border: 1px solid #004da0;
background: #004da0;
font-size: 143%;
}
@media screen and (max-width: 767px) {
.bigBtn a{
font-size: 13pt;
}
}
/* pageKeyvisual */
.pageKeyvisual{
height:380px;
width:100%;
position:relative;
margin-bottom:80px;
}
@media screen and (max-width:980px){
.pageKeyvisual{
height:280px;
}
}
@media screen and (max-width:767px){
.pageKeyvisual{
height:180px;
margin-bottom:40px;
}
}
#shopList .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-shoplist.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#shopList .pageKeyvisual .img{
background:url(../images/page/key-shoplist-s.jpg) center no-repeat;
background-size:cover;
}
}
#diagnosis .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-diagnosis.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#diagnosis .pageKeyvisual .img{
background:url(../images/page/key-diagnosis-s.jpg) center no-repeat;
background-size:cover;
}
}

#construction.wallpainting .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-wallpainting.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#construction.wallpainting .pageKeyvisual .img{
background:url(../images/page/key-wallpainting-s.jpg) center no-repeat;
background-size:cover;
}
}
#construction.roofpainting .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-roofpainting.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#construction.roofpainting .pageKeyvisual .img{
background:url(../images/page/key-roofpainting-s.jpg) center no-repeat;
background-size:cover;
}
}
#construction.kitchenexchange .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-kitchenexchange.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#construction.kitchenexchange .pageKeyvisual .img{
background:url(../images/page/key-kitchenexchange-s.jpg) center no-repeat;
background-size:cover;
}
}
#construction.toiletcexchange .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-toiletcexchange.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#construction.toiletcexchange .pageKeyvisual .img{
background:url(../images/page/key-toiletcexchange-s.jpg) center no-repeat;
background-size:cover;
}
}
#construction.bathroomexchange .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-bathroomexchange.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#construction.bathroomexchange .pageKeyvisual .img{
background:url(../images/page/key-bathroomexchange-s.jpg) center no-repeat;
background-size:cover;
}
}
#construction.materialsexchange .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-materialsexchange.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#construction.materialsexchange .pageKeyvisual .img{
background:url(../images/page/key-materialsexchange-s.jpg) center no-repeat;
background-size:cover;
}
}
#construction.constructionFlow .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-construction-flow.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#construction.constructionFlow .pageKeyvisual .img{
background:url(../images/page/key-construction-flow-s.jpg) center no-repeat;
background-size:cover;
}
}
#faq .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-faq.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#faq .pageKeyvisual .img{
background:url(../images/page/key-faq-s.jpg) center no-repeat;
background-size:cover;
}
}
#exteriordiagnosis .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-exteriordiagnosis.jpg?221026) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#exteriordiagnosis .pageKeyvisual .img{
background:url(../images/page/key-exteriordiagnosis-s.jpg?221026) center no-repeat;
background-size:cover;
}
}
#cgsimulation .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-cgsimulation.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#cgsimulation .pageKeyvisual .img{
background:url(../images/page/key-cgsimulation-s.jpg) center no-repeat;
background-size:cover;
}
}
#news .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-news.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#news .pageKeyvisual .img{
background:url(../images/page/key-news-s.jpg) center no-repeat;
background-size:cover;
}
}
#blog .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-blog.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#blog .pageKeyvisual .img{
background:url(../images/page/key-blog-s.jpg) center no-repeat;
background-size:cover;
}
}
#interview .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-interview.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#interview .pageKeyvisual .img{
background:url(../images/page/key-interview-s.jpg) center no-repeat;
background-size:cover;
}
}
#corporate .pageKeyvisual .img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/page/key-corporate.jpg) center no-repeat;
background-size:cover;
}
@media screen and (max-width:767px){
#corporate .pageKeyvisual .img{
background:url(../images/page/key-corporate-s.jpg) center no-repeat;
background-size:cover;
}
}





.pageKeyvisual .pageTtl{
font-size:271%;
line-height:380px;
max-width:960px;
width:90%;
margin:0 auto;
letter-spacing:0.05em;
position:relative;
}
@media screen and (max-width:980px){
.pageKeyvisual .pageTtl{
line-height:280px;
}
}
@media screen and (max-width:767px){
.pageKeyvisual .pageTtl{
line-height:180px;
font-size:20pt;
}
}
.novisual{
margin-top:180px;
}
@media screen and (max-width:767px){
.novisual{
margin-top:80px;
}
}
/* pageTop */
.pageTop{
max-width:800px;
}
.pageTop .areaTtl{
margin-bottom: 30px;
}
.pageTop .areaTtl.txtNone{
margin-bottom: 80px;
}
/* breadcrumbs */
.breadcrumbs {
width:100%;
line-height:1;
padding:5px 0 7px;
display:inline-block;
border-top:1px solid #dfdfdf;
font-size:86%;
color:#666;
}
@media all and (-ms-high-contrast:none) {
.breadcrumbs {
padding:5px 0 3px;
}
}
@media screen and (max-width:767px){
.breadcrumbs {
font-size:7pt;
height:auto;
padding-bottom: 2px;
}
}
.breadcrumbs ol{
width:90%;
margin:0 auto;
max-width:980px;
}
.breadcrumbs li{
display:inline;
list-style:none;
vertical-align:middle;
}
.breadcrumbs li:after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
color: #ccc;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
transform: rotate(45deg);
margin: 0 12px 0 10px;
position: relative;
top: -2px;
}
@media screen and (max-width:767px){
.breadcrumbs li:after{
margin:0 8px 0 6px;
width: 3px;
height: 3px;
top: -1px;
}
}
.breadcrumbs li:last-child:after{
display:none;
}

/* pager */
.pager{
border-bottom: 1px solid #dfdfdf;
border-top: 1px solid #dfdfdf;
height: 98px;
line-height: 98px;
position: relative;
text-align: center;
z-index:120;
max-width:980px;
margin:180px auto 120px;
}
@media screen and (max-width: 767px) {
.pager{
height: 50px;
line-height: 50px;
margin:50px auto 60px;
}
}
.pager a {
border-bottom: 1px solid #fff;
padding: 0 0 5px;
margin:0 10px;
transition: all 0.3s ease 0s;
}
@media screen and (max-width: 767px) {
.pager a {
font-size:9pt;
}
}
.pager .current {
border-bottom: 1px solid #000;
padding: 0 0 5px;
margin:0 10px;
}
@media screen and (max-width: 767px) {
.pager .current {
font-size:9pt;
}
}
.pager .nextpostslink{
padding-right:10px;
position: absolute;
top:0;
right:0;
font-size:93%;
border:none;
}
.pager .previouspostslink{
padding-left:10px;
position: absolute;
top:0;
left:0;
font-size:93%;
border:none;
}
@media screen and (max-width: 767px) {
.pager .nextpostslink,
.pager .previouspostslink{
font-size:8pt;
padding:0;
}
}
.pager .previouspostslink .icon-arrow{
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.pager .icon-arrow{
width:65px;
height:65px;
text-align:center;
line-height:65px;
display:inline-block;
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.pager .icon-arrow{
width:30px;
height:30px;
line-height:30px;
}
}
/*---------------------------------------*/
/* shopList */
/*---------------------------------------*/
#shopList .mapTtl{
font-size:128%;
font-weight:bold;
padding-bottom:10px;
margin-bottom:30px;
border-bottom:1px solid #dfdfdf;
}
@media screen and (max-width: 767px) {
#shopList .mapTtl{
font-size:10pt;
margin-bottom:20px;
}
}
#shopList .mapsubTtl{
font-size:114%;
margin-bottom:30px;
}
@media screen and (max-width: 767px) {
#shopList .mapsubTtl{
font-size:9pt;
}
}
#shopList .mapsubTtl .icon{
font-size:28px;
vertical-align:middle;
margin-right:10px;
}
@media screen and (max-width: 767px) {
#shopList .mapsubTtl .icon{
font-size:23px;
}
}
#shopList .bg{
background:#f7f7f7;
padding:90px 0;
max-width:980px;
margin:0 auto 120px;
}
@media screen and (max-width: 767px) {
#shopList .bg{
padding:35px 0;
margin:0 auto 60px;
}
}
#shopList .bg .areaInner{
max-width:800px;
}
#shopList .map .map_canvas{
width:100%;
height:440px;
}
@media screen and (max-width: 767px) {
#shopList .map .map_canvas{
height:300px;
}
}
#shopList .map #map_canvas1,#shopList .map #map_canvas2{
margin-bottom:20px;
}
#shopList .map #map_canvas3{
background:url(../images/page/map-3.gif?241204)  center no-repeat;
background-size:cover;
}


#shopList .shopBox{
margin-bottom: 50px;
}
#shopList .shopBox .blockLeft{
width: 48.25%;
}
@media screen and (max-width: 767px) {
#shopList .shopBox .blockLeft{
width: 100%;
float: none;
margin-bottom: 30px;
}
}
#shopList .shopBox .blockLeft.img img{
width: 100%;
height: auto;
}
#shopList .shopBox .blockRight{
width: 48%;
}
@media screen and (max-width: 767px) {
#shopList .shopBox .blockRight{
width: 100%;
float: none;
}
}
#shopList .shopBox .gallery ul li{
display:inline;
float:left;
width: 30.85%;
margin-right: 3.725%;
margin-bottom:30px;
}
#shopList .shopBox .gallery ul li:last-child{
margin-right: 0;
}
#shopList .shopBox .gallery ul li img{
width:100%;
height:auto;
}
#shopList .shopBox .adress,
#shopList .shopBox .tel{
color:#666666;
}
@media screen and (max-width: 767px) {
#shopList .shopBox .adress,
#shopList .shopBox .tel{
}
}
#shopList .shopBox .map{
font-size:86%;
color:#666666;
}
@media screen and (max-width: 767px) {
#shopList .shopBox .map{
font-size:8pt;
}
}
#shopList .shopBox .map .icon-map{
font-size:15px;
position: relative;
top:3px;
margin-right:5px;
}
@media screen and (max-width: 767px) {
#shopList .shopBox .map .icon-map{
font-size:12px;
top:2px;
}
}

#shopList .shopListNote{
font-size:93%;
margin-bottom:30px;
}
@media screen and (max-width: 767px){
#shopList .shopListNote{
font-size:9pt;
margin-bottom:20px;
}
}
#shopList .shopList{
margin-bottom:50px;
}
@media screen and (max-width: 767px){
#shopList .shopList{
margin-bottom:20px;
}
}
#shopList .shopList.last{
margin-bottom:0;
}
#shopList .shopList li{
width:19%;
margin-right:8%;
margin-bottom:40px;
float:left;
line-height:1.5;
}
#shopList .shopList.colum3 li{
width:28%;
}
@media screen and (max-width: 767px){
#shopList .shopList.colum3 li,
#shopList .shopList li{
width:47.5%;
margin-right:5%;
margin-bottom:30px;
}
}
#shopList .shopList li:nth-child(4n){
margin-right:0;
}
@media screen and (max-width: 767px){
#shopList .shopList li:nth-child(2n){
margin-right:0;
}
}
#shopList .shopList.colum3 li:nth-child(3n){
margin-right:0;
}
@media screen and (max-width: 767px){
#shopList .shopList.colum3 li:nth-child(3n){
margin-right:5%;
}
#shopList .shopList.colum3 li:nth-child(2n){
margin-right:0;
}
}
#shopList .shopBox .name,
#shopList .shopList li .name{
font-weight:bold;
margin-bottom:5px;
}
#shopList .shopList li .adress,
#shopList .shopList li .tel{
font-size:86%;
color:#666666;
margin-bottom:5px;
}
@media screen and (max-width: 767px) {
#shopList .shopList li .adress,
#shopList .shopList li .tel{
font-size:8pt;
}
}
#shopList .shopList li .map{
font-size:78%;
color:#666666;
}
@media screen and (max-width: 767px) {
#shopList .shopList li .map{
font-size:7pt;
}
}
#shopList .shopList li .map .icon-map{
font-size:14px;
margin-right:5px;
position: relative;
top:3px;
}
@media screen and (max-width: 767px) {
#shopList .shopList li .map .icon-map{
font-size:11px;
top:2px;
}
}
/*---------------------------------------*/
/* diagnosis */
/*---------------------------------------*/
#diagnosis .u-fwBold{
font-weight: bold;
}
#diagnosis .diagnosisTtl{
margin-bottom: 80px;
}
@media screen and (max-width:767px){
#diagnosis .diagnosisTtl{
margin-bottom: 30px;
}
}
#diagnosis .diagnosisTtl .ttl{
font-size: 257%;
font-weight: bold;
text-align: center;
letter-spacing: 0.03em;
line-height: 1;
}
@media screen and (max-width:767px){
#diagnosis .diagnosisTtl .ttl{
font-size: 17pt;
}
}
#diagnosis .diagnosisTtl .note{
font-size: 129%;
line-height: 1.6;
margin: 10px auto 0;
text-align: center;
width: 90%;
}
@media screen and (max-width:767px){
#diagnosis .diagnosisTtl .note{
font-size: 10pt;
}
}
#diagnosis .thingsArea{
margin-bottom: 100px;
}
@media screen and (max-width:767px){
#diagnosis .thingsArea{
margin-bottom: 50px;
}
}
#diagnosis .thingsArea .img{
width: 29%;
margin-top: 45px;
}
@media screen and (max-width:767px){
#diagnosis .thingsArea .img{
width: 100%;
max-width: 200px;
margin-right: auto;
margin-left: auto;
margin-top: 0;
margin-bottom: 20px;
float: none;
}
}
#diagnosis .thingsArea .img img{
width: 100%;
height: auto;
}
#diagnosis .thingsArea .thingsList{
width: 62.5%;
font-size: 114%;
}
@media screen and (max-width:767px){
#diagnosis .thingsArea .thingsList{
width: 100%;
font-size: 9pt;
}
}
#diagnosis .thingsArea .thingsList li{
line-height: 1.6;
padding: 17px 60px 17px 80px;
background: #f7f7f7;
margin-bottom: 15px;
position: relative;
}
@media screen and (max-width:767px){
#diagnosis .thingsArea .thingsList li{
padding: 12px 12px 12px 50px;
margin-bottom: 10px;
}
}
#diagnosis .thingsArea .thingsList li:before{
content: "";
display: block;
position: absolute;
top: 16px;
left: 30px;
width: 28px;
height: 28px;
background: url("../images/page/parts-diagnosis-things.svg") center center no-repeat;
background-size: contain;
}
@media screen and (max-width:767px){
#diagnosis .thingsArea .thingsList li:before{
top: 10px;
left: 17px;
width: 22px;
height: 22px;
}
}

#diagnosis .stepArea{
background: #f7f7f7;
padding-bottom: 150px;
}
@media screen and (max-width:767px){
#diagnosis .stepArea{
padding-bottom: 60px;
}
}
#diagnosis .stepArea .diagnosisTtl .ttl{
background: linear-gradient(180deg, #fff 0%, #fff 50%, #f7f7f7 50%, #f7f7f7 100%);
}
#diagnosis .stepArea .stepList{
margin-bottom: 120px;
}
@media screen and (max-width:980px){
#diagnosis .stepArea .stepList{
margin-bottom: 90px;
}
}
@media screen and (max-width:767px){
#diagnosis .stepArea .stepList{
margin-bottom: 40px;
}
}
#diagnosis .stepArea .stepList:last-child{
margin-bottom: 0;
}
#diagnosis .stepArea .img{
width: 51.04%;
}
@media screen and (max-width:767px){
#diagnosis .stepArea .img{
width: 100%;
float: none;
margin-bottom: 10px;
}
}
#diagnosis .stepArea .img img{
width: 100%;
height: auto;
}
#diagnosis .stepArea .txtBox{
width: 43.54%;
position: relative;
}
@media screen and (max-width:767px){
#diagnosis .stepArea .txtBox{
width: 100%;
float: none;
}
}
@media screen and (max-width:980px){
#diagnosis .stepArea .txtBox .ttlOuter{
min-height: 80px;
margin-bottom: 10px;
}
}
@media screen and (max-width:767px){
#diagnosis .stepArea .txtBox .ttlOuter{
min-height: 65px;
}
}
#diagnosis .stepArea .txtBox .numBox{
background: url("../images/page/parts-diagnosis-step.png")center center no-repeat;
background-size: contain;
width: 139px;
height: 139px;
margin: -17px 0 0 -17px;
text-align: center;
color: #fff;
line-height: 1.2;
letter-spacing: 0.2em;
}
@media screen and (max-width:980px){
#diagnosis .stepArea .txtBox .numBox{
width: 120px;
height: 120px;
margin: -15px 0 0 -15px;
position: absolute;
top: 0;
left: 0;
}
}
@media screen and (max-width:767px){
#diagnosis .stepArea .txtBox .numBox{
width: 100px;
height: 100px;
margin: -12px 0 0 -12px;
}
}
#diagnosis .stepArea .txtBox .numBox .txt{
font-size: 114%;
padding-top: 41px;
margin-right: 10px;
}
@media screen and (max-width:980px){
#diagnosis .stepArea .txtBox .numBox .txt{
font-size: 107%;
padding-top: 33px;
margin-right: 8px;
}
}
@media screen and (max-width:767px){
#diagnosis .stepArea .txtBox .numBox .txt{
font-size: 9pt;
padding-top: 28px;
margin-right: 6px;
}
}
#diagnosis .stepArea .txtBox .numBox .num{
font-size: 186%;
margin-right: 10px;
}
@media screen and (max-width:980px){
#diagnosis .stepArea .txtBox .numBox .num{
font-size: 171%;
margin-right: 8px;
}
}
@media screen and (max-width:767px){
#diagnosis .stepArea .txtBox .numBox .num{
font-size: 14pt;
margin-right: 6px;
}
}
#diagnosis .stepArea .txtBox .ttl{
font-size: 143%;
line-height: 1.6;
margin-bottom: 20px;
letter-spacing: 0.08em;
}
@media screen and (max-width:980px){
#diagnosis .stepArea .txtBox .ttl{
margin-left: 90px;
margin-bottom: 0;
}
}
@media screen and (max-width:767px){
#diagnosis .stepArea .txtBox .ttl{
margin-left: 80px;
font-size: 12pt;
}
}
#diagnosis .stepArea .txtBox .ttl.line01{
padding-top: 20px;
}
#diagnosis .stepArea .txtBox .ttl.line02{
padding-top: 7px;
}
@media screen and (max-width:767px){
#diagnosis .stepArea .txtBox .ttl.line01,
#diagnosis .stepArea .txtBox .ttl.line02{
padding-top: 20px;
}
}

#diagnosis .pointArea{
background: #f7f7f7;
margin-bottom: 145px;
}
@media screen and (max-width:767px){
#diagnosis .pointArea{
margin-bottom: 50px;
}
}
#diagnosis .pointArea .bgOuter{
background: linear-gradient(180deg, #f7f7f7 0%, #f7f7f7 50%, #fff 50%, #fff 100%);
}
@media screen and (max-width:767px){
#diagnosis .pointArea .bgOuter{
background: linear-gradient(to top, #fff 0%, #fff 127px, #f7f7f7 127px, #f7f7f7 100%);}
}
#diagnosis .pointArea .pointList li{
float: left;
width: 31.25%;
margin-right: 3.125%;
text-align: center;
padding-bottom: 15px;
min-height: 305px;
box-shadow: 4px 4px 20px 3px rgba(0,0,0,0.2);
background: #fff;
}
@media screen and (max-width:767px){
#diagnosis .pointArea .pointList li{
float: left;
width: 100%;
margin-right: 0;
padding-bottom: 30px;
min-height: inherit;
margin-bottom: 30px;
}
}
#diagnosis .pointArea .pointList li:last-child{
margin-right: 0;
}
@media screen and (max-width:767px){
#diagnosis .pointArea .pointList li:last-child{
margin-bottom: 0;
}
}
#diagnosis .pointArea .pointList .img{
height: 110px;
padding: 50px 0;
}
@media screen and (max-width:767px){
#diagnosis .pointArea .pointList .img{
height: 100px;
padding: 30px 0;
}
}
#diagnosis .pointArea .pointList li:last-child .img{
height: 85px;
padding: 75px 0 50px;
}
@media screen and (max-width:767px){
#diagnosis .pointArea .pointList li:last-child .img{
height: 75px;
padding: 55px 0 30px;
}
}
#diagnosis .pointArea .pointList .img img{
width: auto;
height: 100%;
}
#diagnosis .pointArea .pointList .txtBox{
max-width: 235px;
width: 80%;
margin: 0 auto;
}
@media screen and (max-width:767px){
#diagnosis .pointArea .pointList .txtBox{
max-width: 190px;
}
}
#diagnosis .pointArea .pointList .txtBox .note{
font-size: 114%;
line-height: 1.6;
}
@media screen and (max-width:767px){
#diagnosis .pointArea .pointList .txtBox .note{
font-size: 10pt;
}
}
#diagnosis .pointArea .pointList .txtBox .comment{
font-size: 86%;
line-height: 1.3;
color: #666;
margin-left: 1em;
text-align: left;
margin-top: 5px;
}
@media screen and (max-width:767px){
#diagnosis .pointArea .pointList .txtBox .comment{
font-size: 8pt;
}
}
#diagnosis .pointArea .pointList .txtBox .comment .kome{
display: inline-block;
width: 1em;
margin-left: -1em;
}

#diagnosis .importantArea{
margin-bottom: 250px;
}
@media screen and (max-width:767px){
#diagnosis .importantArea{
margin-bottom: 100px;
}
}
#diagnosis .importantArea .boxOuter{
padding-top: 65px;
}
@media screen and (max-width:767px){
#diagnosis .importantArea .boxOuter{
padding-top: 15px;
}
}
#diagnosis .importantArea .balloonBox{
width: 48.33%;
margin-right: 3.34%;
background: #f7f7f7;
position: relative;
padding: 45px 0;
}
@media screen and (max-width:980px){
#diagnosis .importantArea .balloonBox{
width: 70%;
margin-right: 30%;
float: none;
}
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox{
width: 90%;
margin-right: 10%;
padding: 35px 0;
}
}
#diagnosis .importantArea .balloonBox:last-child{
margin-right: 0;
}
#diagnosis .importantArea .balloonBox.balloon01{
border-radius: 40px 40px 40px 0;
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox.balloon01{
border-radius: 20px 20px 20px 0;
}
}
#diagnosis .importantArea .balloonBox.balloon02{
border-radius: 40px 40px 0 40px;
margin-top: 55px;
}
@media screen and (max-width:980px){
#diagnosis .importantArea .balloonBox.balloon02{
margin-right: 0;
margin-left: 30%;
}
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox.balloon02{
border-radius: 20px 20px 0 20px;
margin-left: 10%;
margin-top: 30px;
}
}
#diagnosis .importantArea .balloonBox:before{
content: "";
display: block;
width: 45px;
height: 40px;
background: url("../images/page/parts-diagnosis-imp.svg") center center no-repeat;
background-size: contain;
position: absolute;
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox:before{
width: 32px;
height: 28px;
}
}
#diagnosis .importantArea .balloonBox.balloon01:before{
top: -18px;
left: 45px;
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox.balloon01:before{
top: -12px;
left: 30px;
}
}
#diagnosis .importantArea .balloonBox.balloon02:before{
top: -18px;
right: 45px;
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox.balloon02:before{
top: -12px;
right: 30px;
}
}
#diagnosis .importantArea .balloonBox:after{
content: "";
display: block;
position: absolute;
}
#diagnosis .importantArea .balloonBox.balloon01:after{
background: url("../images/page/img-diagnosis-imp01.png") center center no-repeat;
background-size: contain;
width: 118px;
height: 69px;
top: -27px;
right: 42px;
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox.balloon01:after{
width: 90px;
height: 52px;
top: -20px;
right: 16px;
}
}
#diagnosis .importantArea .balloonBox.balloon02:after{
background: url("../images/page/img-diagnosis-imp02.png") center center no-repeat;
background-size: contain;
width: 93px;
height: 142px;
bottom: -100px;
right: 40px;
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox.balloon02:after{
width: 70px;
height: 105px;
bottom: -75px;
right: 20px;
}
}
#diagnosis .importantArea .balloonBox .ttl{
font-size: 143%;
line-height: 1.6;
margin-bottom: 25px;
padding: 0 45px;
letter-spacing: 0.08em;
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox .ttl{
font-size: 12pt;
margin-bottom: 10px;
padding: 0 30px;
}
}
#diagnosis .importantArea .balloonBox .note{
padding: 0 45px;
}
@media screen and (max-width:767px){
#diagnosis .importantArea .balloonBox .note{
padding: 0 30px;
}
}

#diagnosis .dateArea{
margin-bottom: 95px;
}
@media screen and (max-width:767px){
#diagnosis .dateArea{
margin-bottom: 50px;
}
}
#diagnosis .dateArea .dateContent{
float: left;
width: 47.92%;
margin-right: 4.16%;
margin-bottom: 50px;
box-sizing: border-box;
border: 1px solid #000;
padding: 40px 0;
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent{
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 30px;
padding: 30px 0;
}
}
#diagnosis .dateArea .dateContent:nth-child(2n){
margin-right: 0;
}
#diagnosis .dateArea .dateContent .ttl{
font-size: 143%;
text-align: center;
letter-spacing: 0.08em;
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent .ttl{
font-size: 12pt;
}
}
#diagnosis .dateArea .dateContent .numBox{
position: relative;
text-align: center;
}
#diagnosis .dateArea .dateContent.content01 .numBox{
padding: 55px 0;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content01 .numBox{
padding: 5.09vw 0;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content01 .numBox{
padding: 10.18vw 0;
}
}
#diagnosis .dateArea .dateContent.content02 .numBox{
padding: 105px 0;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content02 .numBox{
padding: 9.72vw 0;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content02 .numBox{
padding: 19.44vw 0;
}
}
#diagnosis .dateArea .dateContent.content03 .numBox,
#diagnosis .dateArea .dateContent.content04 .numBox{
padding: 50px 0 20px;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content03 .numBox,
#diagnosis .dateArea .dateContent.content04 .numBox{
padding: 4.63vw 0 1.85vw;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content03 .numBox,
#diagnosis .dateArea .dateContent.content04 .numBox{
padding: 9.26vw 0 3.7vw;
}
}
#diagnosis .dateArea .dateContent.content01 .numBox .img{
width: 157px;
margin: 0 auto;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content01 .numBox .img{
width: 14.53vw;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content01 .numBox .img{
width: 29.06vw;
}
}
#diagnosis .dateArea .dateContent.content02 .numBox .img{
width: 72px;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content02 .numBox .img{
width: 6.67vw;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content02 .numBox .img{
width: 13.34vw;
}
}
#diagnosis .dateArea .dateContent.content03 .numBox .img{
width: 78px;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content03 .numBox .img{
width: 7.22vw;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content03 .numBox .img{
width: 14.44vw;
}
}
#diagnosis .dateArea .dateContent.content04 .numBox .img{
width: 135px;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content04 .numBox .img{
width: 12.5vw;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content04 .numBox .img{
width: 25vw;
}
}
#diagnosis .dateArea .dateContent .numBox .img img{
width: 100%;
height: auto;
}
#diagnosis .dateArea .dateContent.content02 .numBox .img,
#diagnosis .dateArea .dateContent.content03 .numBox .img,
#diagnosis .dateArea .dateContent.content04 .numBox .img{
display: inline-block;
}
#diagnosis .dateArea .dateContent .numBox .num{
color: #004d96;
line-height: 1;
display: inline-block;
}
#diagnosis .dateArea .dateContent.content01 .numBox .num{
position: absolute;
top: 50%;
margin-top: -33px;
left: 50%;
margin-left: -30px;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content01 .numBox .num{
margin-top: -3.06vw;
margin-left: -2.78vw;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content01 .numBox .num{
margin-top: -6.12vw;
margin-left: -5.56vw;
}
}
#diagnosis .dateArea .dateContent.content01 .numBox .num,
#diagnosis .dateArea .dateContent.content02 .numBox .num{
font-size: 643%;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content01 .numBox .num,
#diagnosis .dateArea .dateContent.content02 .numBox .num{
font-size: 8.33vw;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content01 .numBox .num,
#diagnosis .dateArea .dateContent.content02 .numBox .num{
font-size: 16.66vw;
}
}
#diagnosis .dateArea .dateContent.content03 .numBox .num,
#diagnosis .dateArea .dateContent.content04 .numBox .num{
font-size: 814%;
position: relative;
}
@media screen and (max-width:1080px){
#diagnosis .dateArea .dateContent.content03 .numBox .num,
#diagnosis .dateArea .dateContent.content04 .numBox .num{
font-size: 10.56vw;
}
}
@media screen and (max-width:767px){
#diagnosis .dateArea .dateContent.content03 .numBox .num,
#diagnosis .dateArea .dateContent.content04 .numBox .num{
font-size: 21.12vw;
}
}
#diagnosis .dateArea .dateContent.content01 .numBox .num .middle,
#diagnosis .dateArea .dateContent.content02 .numBox .num .middle{
font-size: 29%;
}
#diagnosis .dateArea .dateContent.content03 .numBox .num .middle,
#diagnosis .dateArea .dateContent.content04 .numBox .num .middle{
font-size: 36%;
vertical-align: middle;
position: relative;
top: -10px;
}
#diagnosis .dateArea .dateContent.content01 .numBox .num .small{
font-size: 19%;
position: relative;
top: -3px;
padding-left: 2px;
}
#diagnosis .dateArea .dateContent.content03 .numBox .num .small,
#diagnosis .dateArea .dateContent.content04 .numBox .num .small{
font-size: 17%;
position: absolute;
bottom: 11px;
right: 0;
width: 2.1em;
}
#diagnosis .dateArea .dateContent .note{
width: 90%;
max-width: 370px;
margin: 0 auto;
}

#diagnosis .equipmentArea{
margin-bottom: 145px;
}
@media screen and (max-width:767px){
#diagnosis .equipmentArea{
margin-bottom: 50px;
}
}
#diagnosis .equipmentArea .equipmentList{
background: #f7f7f7;
padding: 80px;
}
@media screen and (max-width:767px){
#diagnosis .equipmentArea .equipmentList{
padding: 10%;
}
}
#diagnosis .equipmentArea .equipmentList li{
position: relative;
min-height: 135px;
padding-bottom: 35px;
border-bottom: 1px solid #d0d0d0;
margin-top: 35px;
}
@media screen and (max-width:767px){
#diagnosis .equipmentArea .equipmentList li{
min-height: inherit;
padding-bottom: 30px;
margin-top: 30px;
}
}
#diagnosis .equipmentArea .equipmentList li:first-child{
margin-top: 0;
}
#diagnosis .equipmentArea .equipmentList li:last-child{
padding-bottom: 0;
border: none;
}
#diagnosis .equipmentArea .equipmentList .img{
position: absolute;
width: 200px;
top: 0;
left: 0;
}
@media screen and (max-width:767px){
#diagnosis .equipmentArea .equipmentList .img{
position: relative;
width: 100%;
margin-bottom: 15px;
}
}
#diagnosis .equipmentArea .equipmentList .img img{
width: 100%;
height: auto;
}
#diagnosis .equipmentArea .equipmentList .txtBox{
margin-left: 225px;
}
@media screen and (max-width:767px){
#diagnosis .equipmentArea .equipmentList .txtBox{
margin-left: 0;
}
}
#diagnosis .equipmentArea .equipmentList .txtBox .num{
line-height: 1;
margin-bottom: 10px;
letter-spacing: 0.08em;
}
@media screen and (max-width:767px){
#diagnosis .equipmentArea .equipmentList .txtBox .num{
margin-bottom: 0;
}
}
#diagnosis .equipmentArea .equipmentList .txtBox .ttl{
font-size: 129%;
margin-bottom: 10px;
letter-spacing: 0.08em;
}
@media screen and (max-width:767px){
#diagnosis .equipmentArea .equipmentList .txtBox .ttl{
font-size: 12pt;
margin-bottom: 5px;
}
}

#diagnosis .caseArea{
margin-bottom: 140px;
}
@media screen and (max-width:767px){
#diagnosis .caseArea{
margin-bottom: 50px;
}
}
#diagnosis .caseArea .caseList li{
position:relative;
min-height:190px;
margin-bottom:95px;
}
@media screen and (max-width:980px){
#diagnosis .caseArea .caseList li{
min-height:inherit;
}
}
@media screen and (max-width:767px){
#diagnosis .caseArea .caseList li{
margin-bottom:40px;
}
}
#diagnosis .caseArea .caseList .img{
position:absolute;
top:0;
right:0;
width:47.5%;
}
@media screen and (max-width:980px){
#diagnosis .caseArea .caseList .img{
width:100%;
position:relative;
top:auto;
right:auto;
margin-bottom:10px;
}
}
#diagnosis .caseArea .caseList li.left .img{
right:auto;
left:0
}
@media screen and (max-width:980px){
#diagnosis .caseArea .caseList li.left .img{
left:auto;
}
}
#diagnosis .caseArea .caseList .img img{
width:100%;
height:auto;
}
#diagnosis .caseArea .caseList .txt{
margin-right:55%;
}
@media screen and (max-width:980px){
#diagnosis .caseArea .caseList .txt{
margin-right:0;
}
}
#diagnosis .caseArea .caseList li.left .txt{
margin-right:0;
margin-left:55%;
}
@media screen and (max-width:980px){
#diagnosis .caseArea .caseList li.left .txt{
margin-left:0;
}
}
#diagnosis .caseArea .caseList .num{
line-height: 1;
margin-bottom: 10px;
letter-spacing: 0.08em;
}
@media screen and (max-width:767px){
#diagnosis .caseArea .caseList .num{
margin-bottom: 0;
}
}
#diagnosis .caseArea .caseList .ttl{
font-size: 129%;
margin-bottom: 10px;
letter-spacing: 0.08em;
}
@media screen and (max-width:767px){
#diagnosis .caseArea .caseList .ttl{
font-size: 12pt;
margin-bottom: 5px;
}
}
#diagnosis .caseArea .caseList .btn a{
width:195px;
height:40px;
line-height:40px;
position:relative;
text-align:left;
text-indent:5%;
margin-top:20px;
font-size:93%;
}
#diagnosis .caseArea .btnOuter .btn a{
margin: 0 auto;
}
/*IE用記述 */
@media all and (-ms-high-contrast: none){
#diagnosis .caseArea .caseList .btn a{
line-height:42px;
}
}
@media screen and (max-width:767px){
#diagnosis .caseArea .caseList .btn a{
font-size:9pt;
}
}
#diagnosis .caseArea .caseList .btn a .icon-arrow{
font-size:12px;
position:absolute;
top:14px;
right:5%;
text-indent:0;
}

#diagnosis .qualArea{
margin-bottom: 150px;
}
@media screen and (max-width:767px){
#diagnosis .qualArea{
margin-bottom: 50px;
}
}
#diagnosis .qualArea .qualList .qual{
font-size: 129%;
line-height: 78px;
float: left;
width: 31.25%;
margin-right: 3.125%;
background: #f7f7f7;
text-align: center;
}
@media screen and (max-width:980px){
#diagnosis .qualArea .qualList .qual{
font-size: 114%;
width: 32%;
margin-right: 2%;
}
}
@media screen and (max-width:767px){
#diagnosis .qualArea .qualList .qual{
font-size: 10pt;
line-height: 45px;
float: none;
width: 100%;
max-width: 300px;
margin: 0 auto 10px;
}
}
#diagnosis .qualArea .qualList .qual:last-child{
margin-right: 0;
}
@media screen and (max-width:767px){
#diagnosis .qualArea .qualList .qual:last-child{
margin-right: auto;
}
}

#diagnosis .faqArea{
background: #f7f7f7;
padding: 90px 0 120px;
}
@media screen and (max-width: 767px) {
#diagnosis .faqArea{
padding: 50px 0 60px;
}
}
#diagnosis .faqArea .faqContent{
padding:26px 3.5%;
width:93%;
margin-bottom:40px;
box-shadow: 4px 4px 20px 3px rgba(0,0,0,0.2);
font-size: 114%;
background: #fff;
}
#diagnosis .faqArea .faqContent:last-child{
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
#diagnosis .faqArea .faqContent{
width:90%;
padding:15px 5%;
box-shadow: 4px 4px 15px 0 rgba(0,0,0,0.2);
font-size: 10pt;
margin-bottom:20px;
}
}
#diagnosis .faqArea .faqContent .ttl{
padding-right:50px;
position:relative;
vertical-align:middle;
cursor:pointer;
margin-left:50px;
}
@media screen and (max-width: 767px) {
#diagnosis .faqArea .faqContent .ttl{
padding-right:25px;
margin-left:25px;
}
}
#diagnosis .faqArea .faqContent .arrow{
position:absolute;
top:6px;
right:0;
font-size:16px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
#diagnosis .faqArea .faqContent .arrow{
top:5px;
font-size:14px;
}
}
#diagnosis .faqArea .faqContent .open .arrow{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#diagnosis .faqArea .faqContent .icon{
font-size: 188%;
position: absolute;
line-height: 1;
top: -1px;
left: -50px;
}
@media screen and (max-width: 767px) {
#diagnosis .faqArea .faqContent .icon{
font-size: 17pt;
top: -0;
left: -25px;
}
}
#diagnosis .faqArea .faqContent .ttl .icon{
color: #004d96;
}
#diagnosis .faqArea .faqContent .note{
display:none;
padding-top:30px;
margin-left:50px;
position: relative;
}
@media screen and (max-width: 767px) {
#diagnosis .faqArea .faqContent .note{
padding-top:20px;
margin-left:25px;
}
}
#diagnosis .faqArea .faqContent .note .icon{
top: 30px;
}
@media screen and (max-width: 767px) {
#diagnosis .faqArea .faqContent .note .icon{
top: 21px;
}
}
#diagnosis .faqArea .faqContent .note .space{
display: block;
margin-bottom: 10px;
}
/*---------------------------------------*/
/* construction */
/*---------------------------------------*/
#construction .relative,
#exteriordiagnosis .relative{
position: relative;
}
#construction .absolute,
#exteriordiagnosis .absolute{
position: absolute;
}
#construction .img,
#exteriordiagnosis .img{
width: 100%;
height: auto;
}
#construction .noteBox .note{
margin-bottom: 25px;
}
#construction .noteBox :last-child{
margin-bottom: 0;
}
#construction .pageKeyvisual .img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/page/key-exteriorwall.jpg) center no-repeat;
background-size: cover;
}
.pageKeyvisual .pageTtl{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
line-height: 1.5;
}
.pageKeyvisual .pageTtl .pageTtljp{
font-size: 37%;
letter-spacing: 2px;
}
/* エリアタイトル（h1） */
#construction .areaTtl,
#faq .areaTtl,
#exteriordiagnosis .areaTtl{
margin-bottom: 90px;
}
#construction.constructionFlow .areaTtl,
#faq .areaTtl,
#exteriordiagnosis .areaTtl{
margin-bottom: 30px;
}
/* コンテンツタイトル （h2）*/
#construction .contentsTtl,
#exteriordiagnosis .contentsTtl,
#cgsimulation .contentsTtl,
#corporate .contentsTtl{
font-size: 257%;
font-weight: bold;
text-align: center;
letter-spacing: 0.03em;
line-height: 1.2;
margin-bottom: 80px;
}
@media screen and (max-width:767px){
#construction .contentsTtl,
#exteriordiagnosis .contentsTtl,
#cgsimulation  .contentsTtl,
#corporate .contentsTtl{
font-size: 15pt;
margin-bottom: 30px;
}
}

#construction .areaBase{
margin-bottom: 150px;
}
#construction .areaBase :last-child{
margin-bottom: 0;
}
#construction.flow .areaBase{
margin-bottom: 70px;
}
#construction .areaBaseInterior{
margin-bottom: 70px;
}
@media screen and (max-width:767px){
#construction.interior .areaBase,
#exteriordiagnosis .areaBase{
margin-bottom: 70px;
}
}
#construction .constructionContents{
display: flex;
justify-content: space-between;
}
#construction .constructionContents .imgBox{
width: 41.666666%;
}
#construction .constructionContents .noteBox{
width: 50%;
}
@media screen and (max-width:767px){
#construction .constructionContents{
display: block;
}
#construction .constructionContents .imgBox{
width: 100%;
}
#construction .constructionContents .noteBox{
width: 100%;
}
#construction .constructionContents .imgBox .img{
margin-bottom: 30px;
}
}
#construction .constructionContents-re{
flex-direction: row-reverse;
}
.u-underLine{
background: linear-gradient(transparent 50%, #ffff00 50%);
}
#construction .recommendedArea{
background: #f7f7f7;
padding-bottom: 150px;
}
#construction .recommendedArea .contentsTtl{
background: linear-gradient(180deg, #fff 0%, #fff 40%, #f7f7f7 0%, #f7f7f7 100%);
}
#construction .recommendedContents{
background: #fff;
padding: 70px 0;
}
@media screen and (max-width:767px){
#construction .recommendedContents{
padding: 40px 0;
}
}
#construction .recommendedContents{
margin-top: 40px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 120px;
}
@media screen and (max-width:767px){
#construction .recommendedContents{
display: block;
}
}
#construction .recommendedContents .noteBox .productName{
font-size: 142.9%;
font-weight: bold;
letter-spacing: 2px;
}
#construction .introductTtl{
font-weight: bold;
font-size: 114.3%;
letter-spacing: 1px;
}
#construction .productintroduction{
font-size: 12pt;
margin: 10% 0 0 8%;
}
@media screen and (max-width:767px){
#construction .productintroduction{
display: inline-block;
font-size: 10pt;
margin: 10px 0 0 0;
}
}
#construction .recommendedContents .imgBox{
width: 33%;
margin-left: 5%;
}
@media screen and (max-width:767px){
#construction .recommendedContents .imgBox{
width: 90%;
}
}
#construction .recommendedContents .imgBox img{
max-width: 174px;
display: block;
margin: 0 0 0 auto;
}
@media screen and (max-width:767px){
#construction .recommendedContents .imgBox img{
width: 100%;
margin: 0 auto 30px auto;
}
}
#construction .recommendedContents .noteBox{
width: 45%;
margin-right: 5%;
}
@media screen and (max-width:767px){
#construction .recommendedContents .noteBox{
width: 90%;
text-align: center;
margin: 0 auto 0 auto;
}
}
#construction .productintroductionStar{
display: flex;
}
#construction .productintroductionStar .starMark{
position: relative;
top: -2px;
left: 9px;
}
@media screen and (max-width:980px){
#construction .recommendedContents .noteBox .productintroduction .productintroductionStar .starMark img{
top: -4px;
left: 4px;
width: 20px;
height: 20px;
}
}
@media screen and (max-width:767px){
#construction .recommendedContents .noteBox .productintroduction .productintroductionStar .starMark img{
top: -7px;
left: 4px;
width: 15px;
height: 15px;
margin: 0px;
}
}
#construction .recommendedArea .recommendedNoteBox{
display: flex;
justify-content: space-between;
}
@media screen and (max-width:767px){
#construction .recommendedArea .recommendedNoteBox{
display: block;
}
}
#construction .recommendedArea .recommendedNoteBox .noteBox{
width: 60.75%;
}
@media screen and (max-width:980px){
#construction .recommendedArea  .recommendedNoteBox .noteBox{
width: 70%;
}
}
@media screen and (max-width:767px){
#construction .recommendedArea  .recommendedNoteBox .noteBox{
width: 100%;
}
}
#construction .recommendedArea  .recommendedNoteBox .imgBox{
width: 26.25%;
}
@media screen and (max-width:767px){
#construction .recommendedArea  .recommendedNoteBox .imgBox{
position: relative;
bottom: 0;
left: 70%;
}
}
#construction .quotationMark{
top: -60px;
}
/* btn-styleA */
.btn-styleA a{
display: block;
width: 100%;
margin: 0 auto;
max-width: 480px;
height: 140px;
position: relative;
border: 1px solid #000;
background: #fff;
}
.btn-styleA a:hover{
background: #000;
}
.btn-styleA a .btnTxt{
position: absolute;
top: 50%;
left: 10%;
transform: translate(0,-50%);
}
.btn-styleA a .btnTxt .btnEn{
font-size: 114.3%;
}
.btn-styleA a .btnTxt .btnJp{
font-size: 142.9%;
}
.btn-styleA a:before{
content: "";
position: absolute;
width:25px;
height: 25px;
border-top: 1px solid #000;
border-right: 1px solid #000;
top: 50%;
right: 10%;
transform: translate(0,-50%) rotate(45deg);
transition: border 0.3s ease;
}
.btn-styleA a:hover:before{
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}

#construction .btn-styleA a{
margin-top: -71px;
margin-bottom: 150px;
}
.topPage  .btn-styleA a{
display: block;
width: 100%;
margin: 0 auto;
max-width: 450px;
height: 140px;
position: relative;
border: 1px solid #000;
}
@media screen and (max-width:767px){
.topPage  .btn-styleA a{
max-width: 100%;
}
}
.topPage .btn-styleA {
width: 49%;
}
@media screen and (max-width:767px){
.topPage .btn-styleA {
width: 100%;
margin-bottom: 20px;
}
/* .topPage .btn-styleA:first-child {
margin-bottom: 20px;
}
.topPage .btn-styleA:nth-of-type(2) {
margin-bottom: 50px;
} */
.topPage .btn-styleA a{
height: 200px;
}
}
@media screen and (max-width:767px){
.topPage .btn-styleA a{
height: 150px;
}
}
@media screen and (max-width:1080px){
.topPage .btn-styleA a:before{
width:15px;
height: 15px;
}
}
/* btn-styleB */
.btn-styleB a{
display: block;
width: 100%;
max-width: 480px;
height: 140px;
position: relative;
border: 1px solid #004d80;
background: #fff;
}
.btn-styleB a:hover{
background: #004d80;
}
.btn-styleB a .btnTxt{
position: absolute;
top: 50%;
left: 10%;
transform: translate(0,-50%);
}
.btn-styleB a .btnTxt .btnEn{
font-size: 114.3%;
}
.btn-styleB a .btnTxt .btnJp{
font-size: 142.9%;
}
.btn-styleB a:before{
content: "";
position: absolute;
width:25px;
height: 25px;
border-top: 1px solid #004d80;
border-right: 1px solid #004d80;
top: 50%;
right: 10%;
transform: translate(0,-50%) rotate(45deg);
transition: border 0.3s ease;
}
.btn-styleB a:hover:before{
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
#construction .flowList .cvPoint .formContact .btn-styleB{
margin-bottom: 30px;
}
#construction .flowList .cvPoint .formContact .btn-styleB a:before{
width: 10px;
height: 10px;
}
#construction .flowList .cvPoint .formContact .btn-styleB .btnJp{
font-size: 142.9%;
font-weight: bold;
/* color: #004d80; */
}
#construction .flowList .cvPoint .formContact .btn-styleB a{
height: 75px;
max-width: 360px;
}
@media screen and (max-width:767px){
#construction .flowList .cvPoint .formContact .btn-styleB a{
height: 55px;
margin-left: 0;
}
}
/* btn-styleC */
.btn-styleC a{
display: block;
width: 100%;
margin: 0 auto;
max-width: 950px;
height: 170px;
position: relative;
border: 1px solid #000;
background: #fff;
}
.btn-styleC a:hover{
background: #000;
}
.btn-styleC a .btnTxt{
position: absolute;
top: 50%;
left: 5%;
transform: translate(0,-50%);
}
@media screen and (max-width:767px){
.btn-styleC a .btnTxt{
left: 10%;
}
}
.btn-styleC a .btnTxt .btnEn{
font-size: 114.3%;
}
.btn-styleC a .btnTxt .btnJp{
font-size: 142.9%;
}
.btn-styleC a:before{
content: "";
position: absolute;
width:25px;
height: 25px;
border-top: 1px solid #000;
border-right: 1px solid #000;
top: 50%;
right: 10%;
transform: translate(0,-50%) rotate(45deg);
transition: border 0.3s ease;
}
.btn-styleC a:hover:before{
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.topPage  .btn-styleC a{
display: block;
width: 100%;
margin: 0 auto;
max-width: 950px;
height: 170px;
position: relative;
border: 1px solid #000;
}
.topPage .btn-styleC {
width: 100%;
margin-bottom: 40px;

}
@media screen and (max-width:767px){
.topPage .btn-styleC {
width: 100%;
margin-bottom: 20px;
}
.topPage .btn-styleC a{
height: 200px;
}
}
@media screen and (max-width:767px){
.topPage .btn-styleC a{
height: 150px;
}
}
@media screen and (max-width:1080px){
.topPage .btn-styleC a:before{
width:15px;
height: 15px;
}
}

#construction .flowNavi{
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content: center;
position: relative;
margin-bottom: 100px;
}
@media screen and (max-width:980px){
#construction .flowNavi{
margin-bottom: 70px;
}
}
#construction .flowNavi .naviLink{
margin: 0 30px 20px;
}
@media screen and (max-width:980px){
#construction .flowNavi .naviLink{
margin: 0 20px 20px;
}
}
@media screen and (max-width:767px){
#construction .flowNavi .naviLink{
margin: 0 15px 8px;
}
}
#construction .flowNavi .naviLink a{
padding-right: 12px;
position: relative;
}
@media screen and (max-width:980px){
#construction .flowNavi .naviLink a{
padding-right:15px;
}
}
@media screen and (max-width:767px){
#construction .flowNavi .naviLink a{
padding-right:5px;
}
}
#construction .flowNavi .naviLink a:after{
content: "";
position: absolute;
width: 7px;
height: 7px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
right: -10px;
top: 3px;
}
@media screen and (max-width:767px){
#construction .flowNavi .naviLink a:after{
width: 4px;
height: 4px;
top: 6px;
}
}
#construction .flowBlock .folwttlBox .numBox{
background: url("../images/page/parts-diagnosis-step.png")center center no-repeat;
background-size: contain;
width: 110px;
height: 110px;
margin: -17px 0 0 -17px;
text-align: center;
color: #fff;
line-height: 1.2;
letter-spacing: 0.2em;
}
@media screen and (max-width:980px){
#construction .flowBlock .folwttlBox .numBox{
width: 90px;
height: 90px;
margin: -15px 0 0 -15px;
top: 0;
left: 0;
}
}
@media screen and (max-width:767px){
#construction .flowBlock .folwttlBox .numBox{
width: 80px;
height: 80px;
margin: -12px 0 0 -12px;
}
}
#construction .flowSubBlock .folwttlBox .numBox{
background: url("../images/page/parts-diagnosis-step-w.png")center center no-repeat;
background-size: contain;
width: 110px;
height: 110px;
margin: -17px 0 0 -17px;
text-align: center;
color: #004d80;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.2em;
}
@media screen and (max-width:980px){
#construction .flowSubBlock .folwttlBox .numBox{
width: 90px;
height: 90px;
}
}
@media screen and (max-width:767px){
#construction .flowSubBlock .folwttlBox .numBox{
width:80px;
height: 80px;
}
}
#construction .flowBlock .folwttlBox .numBox .txt{
font-size: 100%;
padding-top: 27px;
margin-right: 10px;
letter-spacing: 0;
}
@media screen and (max-width:767px){
#construction .flowBlock .folwttlBox .numBox .txt{
font-size: 9pt;
padding-top: 25px;
margin-right: 6px;
}
}
#construction .flowBlock .folwttlBox .numBox .num{
font-size: 186%;
margin-right: 7px;
margin-top: 35px;
letter-spacing: 0;
}
@media screen and (max-width:980px){
#construction .flowBlock .folwttlBox .numBox .num{
font-size: 171%;
margin-top: 25px;
margin-right: 7px;
}
}
@media screen and (max-width:767px){
#construction .flowBlock .folwttlBox .numBox .num{
font-size: 14pt;
margin-right: 5px;
}
}
#construction .flowBlock .folwttlBox .ttl{
font-size: 143%;
line-height: 1.6;
margin-bottom: 20px;
}
@media screen and (max-width:980px){
#construction .flowBlock .folwttlBox .ttl{
margin-left: 0;
margin-bottom: 0;
}
}
@media screen and (max-width:767px){
#construction .flowBlock .folwttlBox .ttl{
font-size: 12pt;
}
}
@media screen and (max-width:980px){
#construction .flowSubBlock .folwttlBox .numBox .txt{
font-size: 100%;
padding-top: 21px;
margin-right: 7px;
}
}
#construction .flowSubBlock .folwttlBox .numBox .num{
margin-top: -2px;
}
#construction .flowSubBlock .flowBox .img{
width: 59.25%;
margin-left: 40.75%;
}
@media screen and (max-width:767px){
#construction .flowSubBlock .flowBox .img{
width: 100%;
margin-left: 0;
}
}
#construction .flowBlock .folwttlBox{
display: flex;
}
#construction  .flowSubBlock .folwttlBox{
margin-left: 10%;
}
@media screen and (max-width:980px){
#construction  .flowSubBlock .folwttlBox{
margin-left: 0;
}
}
#construction .flowBlock .folwttl{
padding-top: 17px;
font-weight: bold;
}
@media screen and (max-width:767px){
#construction .flowBlock .folwttl{
padding: 12px 0 0 0;
}
}
@media screen and (max-width:980px){
#construction .flowBlock .txtBox{
margin-bottom: 30px;
}
}
#construction .flowBlock .flowBox{
display: flex;
justify-content: space-between;
margin-bottom: 70px;
}
#construction .flowBlock:last-of-type{
margin-bottom: 150px;
}
@media screen and (max-width:767px){
#construction .flowBlock .flowBox{
display: block;
}
}
#construction .flowBlock .flowBox .imgBox{
width: 41.666666%;
}
@media screen and (max-width:767px){
#construction .flowBlock .flowBox .imgBox{
width: 100%;
margin-bottom: 10px;
}
}
#construction .flowBlock .flowBox .noteBox{
width: 50%;
}
@media screen and (max-width:767px){
#construction .flowBlock .flowBox .noteBox{
width: 100%;
}
}
#construction .flowBlock .stepArea .stepList{
margin-bottom: 70px;
}
#construction .flowBlock .flowBox .noteBoxIn{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
#construction .flowBlock .noteBoxIn .img{
width: 50%;
height: auto;
}
@media screen and (max-width:767px){
#construction .flowBlock .noteBoxIn .img{
width: 30%;
height: auto;
}
}
#construction .markerLogoBlock{
display: flex;
flex-wrap: wrap;
}
#construction .markerLogoArea{
margin-bottom: 170px;
}
#construction .markerLogoArea .column4{
max-width: 800px;
}
#construction .markerLogoArea .column3{
max-width: 600px;
}
#construction .markerLogoArea .column4 .makerLogo{
width: 25%;
}
#construction .markerLogoArea .column3 .makerLogo{
width: 33.33333%;
}
/*タブ*/
#construction .purpose .navi{
border: 1px solid #333;
}
#construction .purpose .navi .tabBtn{
float: left;
width: 20%;
height: 70px;
box-sizing: border-box;
padding: 15px 5px;
border-right: 1px solid #fff;
text-align: center;
font-size: 114%;
background: #333;
color: #fff;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
#construction .purpose .navi .tabBtn{
line-height: 1.2;
font-size: 8pt;
height: 50px;
padding: 8px 5px;
}
}
#construction .purpose .navi .tabBtn.active,
#construction .purpose .navi .tabBtn:hover{
background: #fff;
color: #333;
border-right: 1px solid #333;
}
#construction .purpose .navi .tabBtn:last-child{
border-right: none;
}
#construction .purpose .navi .tabBtn:after{
content: "";
position: absolute;
bottom: 15px;
left: 50%;
width: 5px;
height: 5px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: translate(-50%,0) rotate(45deg);
transition: border 0.3s ease;
}
@media screen and (max-width:767px){
#construction .purpose .navi .tabBtn:after{
bottom: 8px;
width: 4px;
height: 4px;
}
}

#construction .purpose .navi .tabBtn.active:after,
#construction .purpose .navi .tabBtn:hover:after{
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
#construction .purpose .tabContentOuter{
display:none;
}
#construction .purpose .tabContentOuter.active{
display:block;
}
/*タブ中身*/
#construction .tabContent{
padding-top: 60px;
}
@media screen and (max-width:767px){
#construction .tabContent{
padding-top: 30px;
}
}
#construction .tabContentOuter{
border: 1px solid #000;
border-top: none;
padding-bottom: 100px;
margin-bottom: 150px;
}
@media screen and (max-width:767px){
#construction .tabContentOuter{
padding-bottom: 50px;
margin-bottom: 70px;
}
}
#construction .tabContentIn{
display: flex;
justify-content: space-between;
}
@media screen and (max-width:767px){
#construction .tabContentIn{
display: block;
}
}
#construction .tabContentIn .imgBox{
width: 43.75%;
}
@media screen and (max-width:767px){
#construction .tabContentIn .imgBox{
width: 100%;
}
}
#construction .tabContentIn .noteBox{
width: 50%;
}
@media screen and (max-width:767px){
#construction .tabContentIn .noteBox{
width: 100%;
}
}
#construction .tabContentIn .imgBox .note{
margin-top: 10px;
}
@media screen and (max-width:767px){
#construction .tabContentIn .imgBox .note{
margin-top: 5px;
}
}
@media screen and (max-width:767px){
#construction .tabContentIn .noteBox .note{
margin-top: 20px;
}
}
#construction .tabContentTtl{
font-size: 133.3%;
font-weight: bold;
margin-bottom: 30px;
}
@media screen and (max-width:767px){
#construction .tabContentTtl{
margin-bottom: 10px;
}
}

#construction .interiorreformListArea{
display: flex;
justify-content: space-between;
}
#construction .interiorreformList{
text-align: center;
width: 33.3333%;
}

#construction .interiorreformListArea .interiorreformListMiddle{
border-right: 1px solid #000;
border-left: 1px solid #000;
}

#construction .interiorreformListArea .interiorreformList .ttl{
font-size: 166.7%;
font-weight: bold;
margin-bottom: 30px;
}
@media screen and (max-width:767px){
#construction .interiorreformListArea .interiorreformList .ttl{
font-size: 10pt;
}
}
#construction .interiorreformListArea .interiorreformList .txt{
margin-bottom: 3px;
}
@media screen and (max-width:767px){
#construction .interiorreformListArea .interiorreformList .txt{
font-size: 7pt;
padding: 0 4px 0 4px;
letter-spacing: -1px;
}
}
/*米印*/
.annotationM{
margin-left: 1em;
}
.annotationM_mark{
margin-left: -1em;
width: 1em;
display: inline-block;
}
#construction .interiorreformListArea .interiorreformList .annotation{
font-size: 85.7%;
margin-top: 40px;
text-align: left;
margin-left: 25%;
}
@media screen and (max-width:767px){
#construction .interiorreformListArea .interiorreformList .annotation{
margin-top: 10px;
}
}
#construction .interiorreformListArea .interiorreformList .annotationUp{
vertical-align: super;
font-size: 54.5%;
}
#construction.constructionFlow .flowList .flowContents{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 70px;
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .flowContents{
display: block;
margin-bottom: 30px;
}
}
#construction.constructionFlow .flowList .ttlBox{
width: 23%;
color: #004d80;
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .ttlBox{
width: 100%;
}
}
#construction.constructionFlow .flowList .ttlBox .ttl{
display: flex;
align-items: center;
}
#construction.constructionFlow .flowList .noteBox{
width: 77%;
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .noteBox{
width: 100%;
}
}
#construction.constructionFlow .flowList .noteBox .note{
padding-left: 60px;
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .noteBox .note{
padding-left: 0;
}
}
#construction.constructionFlow .flowList .ttlBox .num{
font-weight: bold;
font-size: 357.1%;
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .ttlBox .num{
font-size: 28pt;
}
}
#construction.constructionFlow .flowList .ttlBox .txt{
font-weight: bold;
font-size: 114.3%;
margin-left: 6%;
line-height: 1.4;
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .ttlBox .txt{
margin-left: 15px;
}
}
#construction.constructionFlow .flowList .noteBox:after{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 1px;
height: 100%;
background-color: #a3a3a3;
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .noteBox:after{
display: none;
}
}
#construction.constructionFlow .flowList .cvPoint{
display: flex;
justify-content: space-between;
padding: 60px;
background: #eee;
margin: 55px 0 55px 0;
}
@media screen and (max-width:980px){
#construction.constructionFlow .flowList .cvPoint{
padding: 60px 30px;
}
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .cvPoint{
display: block;
padding: 30px;
}
}
#construction.constructionFlow .flowList .cvPoint .telContact{
width: 53%;
}
@media screen and (max-width:980px){
#construction.constructionFlow .flowList .cvPoint .telContact{
width: 100%;
}
}
#construction.constructionFlow .flowList .cvPoint .formContact{
width: 45%;
}
@media screen and (max-width:980px){
#construction.constructionFlow .flowList .cvPoint .formContact{
width: 100%;
}
}
#construction.constructionFlow .flowList .cvPoint .ttl{
font-size: 142.9%;
font-weight: bold;
}
@media screen and (max-width:980px){
#construction.constructionFlow .flowList .cvPoint .ttl{
margin-bottom: 10px;
}
}
#construction.constructionFlow .flowList .cvPoint .telContact .ttl{
margin-bottom: 10px;
}
#construction.constructionFlow .flowList .cvPoint .formContact .ttl{
margin-bottom: 20px;
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .cvPoint .formContact .ttl{
margin-bottom: 10px;
}
}
#construction.constructionFlow .flowList .cvPoint .telContact .txt{
font-weight: bold;
}
#construction.constructionFlow .flowList .cvPoint .tel{
font-size: 257.1%;
font-weight: bold;
letter-spacing: 0.108em;
margin-top: -10px;
}
@media screen and (max-width:980px){
#construction.constructionFlow .flowList .cvPoint .tel{
letter-spacing: 0.01em;
}
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .cvPoint .tel{
font-size: 20pt;
letter-spacing: 0.05em;
}
}
#construction.constructionFlow .flowList .cvPoint .telContact .icon-freedial{
font-size: 71.4%;
margin-right: 8px;
}
@media screen and (max-width:980px){
#construction.constructionFlow .flowList .cvPoint .telContact .icon-freedial{
margin-right: 5px;
}
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .cvPoint .telContact .icon-freedial{
font-size: 15pt;
}
}
#construction.constructionFlow .flowList .cvPoint .telContact .time{
font-size: 128.6%;
margin-top: -10px;
margin-bottom: 35px;
}
@media screen and (max-width:980px){
#construction.constructionFlow .flowList .cvPoint .telContact .time{
font-size: 114.3%;
margin-bottom: 15px;
}
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .cvPoint .telContact .time{
font-size: 10pt;
}
}
#construction.constructionFlow .flowList .cvPoint .telContact .moreLink{
color: #004d80;
font-size: 114.3%;
font-weight: bold;
}
@media screen and (max-width:980px){
#construction.constructionFlow .flowList .cvPoint .telContact .moreLink{
font-size: 100%;
}
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .cvPoint .telContact .moreLink{
margin-bottom: 50px;
font-size: 10pt;
}
}
#construction.constructionFlow .flowList .cvPoint .formContact .moreLink{
color: #004d80;
font-size: 114.3%;
font-weight: bold;
}
@media screen and (max-width:980px){
#construction.constructionFlow .flowList .cvPoint .formContact .moreLink{
font-size: 100%;
}
}
@media screen and (max-width:767px){
#construction.constructionFlow .flowList .cvPoint .formContact .moreLink{
font-size: 10pt;
}
}
#construction.constructionFlow .flowList .cvPoint .telContact .moreLink:after,
#construction.constructionFlow .flowList .cvPoint .formContact .moreLink:after{
margin: 0 8px 0 6px;
width: 3px;
height: 3px;
top: -1px;
content: "";
display: inline-block;
width: 5px;
height: 5px;
color: #004d80;
border-top: 1px solid #004d80;
border-right: 1px solid #004d80;
transform: rotate(45deg);
margin: 0 12px 0 10px;
position: relative;
top: -2px;
}
#construction.constructionFlow .flowList .cvPoint .formContact .speechbubble{
display: flex;
align-items: center;
margin-bottom: 15px;
}
#construction.constructionFlow .flowList .cvPoint .formContact .img{
width: 36px;
height: 28px;
}
#faq .faqArea{
background: #f7f7f7;
padding: 90px 0 120px;
}
@media screen and (max-width: 767px){
#faq .faqArea{
padding: 50px 0 60px;
}
}
#faq .faqArea .faqContent{
padding:26px 3.5%;
width:93%;
margin-bottom:40px;
box-shadow: 4px 4px 20px 3px rgba(0,0,0,0.2);
font-size: 114%;
background: #fff;
}
#faq .faqArea .faqContent:last-child{
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
#faq .faqArea .faqContent{
width:90%;
padding:15px 5%;
box-shadow: 4px 4px 15px 0 rgba(0,0,0,0.2);
font-size: 10pt;
margin-bottom:20px;
}
}
#faq .faqArea .faqContent .ttl{
padding-right:50px;
position:relative;
vertical-align:middle;
cursor:pointer;
margin-left:50px;
}
@media screen and (max-width: 767px) {
#faq .faqArea .faqContent .ttl{
padding-right:25px;
margin-left:25px;
}
}
#faq .faqArea .faqContent .arrow{
position:absolute;
top:6px;
right:0;
font-size:16px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media screen and (max-width: 767px){
#faq .faqArea .faqContent .arrow{
top:5px;
font-size:14px;
}
}
#faq .faqArea .faqContent .open .arrow{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#faq .faqArea .faqContent .icon{
font-size: 188%;
position: absolute;
line-height: 1;
top: -1px;
left: -50px;
}
@media screen and (max-width: 767px){
#faq .faqArea .faqContent .icon{
font-size: 17pt;
top: -0;
left: -25px;
}
}
#faq .faqArea .faqContent .ttl .icon{
color: #004d96;
}
#faq .faqArea .faqContent .note{
display:none;
padding-top:30px;
margin-left:50px;
position: relative;
}
@media screen and (max-width: 767px) {
#faq .faqArea .faqContent .note{
padding-top:20px;
margin-left:25px;
}
}
#faq .faqArea .faqContent .note .icon{
top: 30px;
}
@media screen and (max-width: 767px) {
#faq .faqArea .faqContent .note .icon{
top: 21px;
}
}
#faq .faqArea .faqContent .note .space{
display: block;
margin-bottom: 10px;
}
#exteriordiagnosis .introductionArea{
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 767px) {
#exteriordiagnosis .introductionArea{
display: block;
}
}
#exteriordiagnosis .introductionArea .imgBox{
width: 41%;
}
@media screen and (max-width: 767px) {
#exteriordiagnosis .introductionArea .imgBox{
width: 100%;
margin-bottom: 30px;
}
}
#exteriordiagnosis .introductionArea .noteBox{
width: 50%;
}
@media screen and (max-width: 767px) {
#exteriordiagnosis .introductionArea .noteBox{
width: 100%;
}
}
#exteriordiagnosis .introductionArea .contentsTtl{
font-size: 257%;
margin-bottom: 60px;
text-align: left;
}
@media screen and (max-width: 767px){
#exteriordiagnosis .introductionArea .contentsTtl{
font-size: 15pt;
margin-bottom: 10px;
}
}
#exteriordiagnosis .checkPoint {
background: #f7f7f7;
}

#exteriordiagnosis .checkPoint .contentsTtl {
background: linear-gradient(180deg, #fff 0%, #fff 50%, #f7f7f7 50%, #f7f7f7 100%);
}
#exteriordiagnosis .othersCheckPoint .contentsTtl {
background: linear-gradient(180deg, #fff 0%, #fff 0%, #f7f7f7 0%, #f7f7f7 100%);
}
#exteriordiagnosis .checkPointIn {
overflow: visible;
}

#exteriordiagnosis .checkPointIn .subTtl{
font-size: 142.9%;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
}
#exteriordiagnosis .checkPointIn .checkPointArea{
display: flex;
flex-wrap: wrap;
margin-left: 0 auto;
margin-right: 0 auto;
overflow: visible;
}
@media screen and (max-width:767px){
#exteriordiagnosis .checkPointArea{
margin-bottom: 90px;
}
}
#exteriordiagnosis .checkPointContents{
position: relative;
margin-bottom: 90px;
width: 32%;
margin-right: 2%;
padding-left: 35px;
box-sizing: border-box;
}
@media screen and (max-width:767px){
#exteriordiagnosis .checkPointContents{
width: 100%;
margin-bottom: 20px;
margin-right: 0;
padding-left: 0;
}
}
#exteriordiagnosis .checkPointContents:nth-child(3n){
margin-right: 0;
}

@media screen and (max-width:767px){
#exteriordiagnosis .checkPointContents .flowImgBox {
margin-bottom: 40px;
}
}
#exteriordiagnosis .checkPointContents .flowImgBox .note{
font-size: 128.6%;
text-align: center;
margin-top: 10px;
}
@media screen and (max-width:980px){
#exteriordiagnosis .checkPointContents .flowImgBox .note{
font-size: 10pt;
}
}
@media screen and (max-width:767px){
#exteriordiagnosis .checkPointContents .flowImgBox .note{
margin-top: 10px;
}
}
#exteriordiagnosis .checkPoint .folwttlBox{
position: absolute;
top: -37px;
left: 0;
}
@media screen and (max-width:767px){
#exteriordiagnosis .checkPoint .folwttlBox{
top: -25px;
left: -5vw;
}
}
#exteriordiagnosis .checkPoint .numBox{
background: url("../images/page/parts-diagnosis-step-w.png")center center no-repeat;
background-size: contain;
width: 80px;
height: 80px;
margin: 0;
text-align: center;
color: #004d80;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.2em;
}
#exteriordiagnosis .checkPoint .checkPointAreaWall .numBox{
background: url("../images/page/parts-diagnosis-step.png")center center no-repeat;
background-size: contain;
width: 80px;
height: 80px;
margin: 0;
text-align: center;
color: #fff;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.2em;
}
#exteriordiagnosis .checkPoint .numBox .num{
font-size: 187.5%;
margin-right: 4px;
padding-top: 22px;
letter-spacing: 0;
}

@media screen and (max-width:767px){
#exteriordiagnosis .checkPoint .numBox .num{
margin-right: 5px;
padding-top: 23px;
}
}
#exteriordiagnosis .roofEplanationArea{
display: flex;
justify-content: space-between;
margin-bottom: 120px;
}
@media screen and (max-width:767px){
#exteriordiagnosis .roofEplanationArea{
display: block;
}
}
#exteriordiagnosis .roofEplanationArea .ttl{
font-weight: bold;
margin-bottom: 5px;
}
#exteriordiagnosis .roofEplanation {
display: flex;
width: 48.5%;
}
@media screen and (max-width:767px){
#exteriordiagnosis .roofEplanation{
display: block;
width: 100%;
margin-bottom: 40px;
}
}
#exteriordiagnosis .roofEplanation .noteBox .note{
letter-spacing: 0.1em;
line-height: 1.45;
}
#exteriordiagnosis .roofEplanation .imgBox{
width: 42%;
}
@media screen and (max-width:767px){
#exteriordiagnosis .roofEplanation .imgBox{
width: 100%;
}
}
#exteriordiagnosis .roofEplanation .noteBox{
width: 53%;
margin-left: 5%;
}
@media screen and (max-width:767px){
#exteriordiagnosis .roofEplanation .noteBox{
width: 100%;
margin-left: 0;
}
}
@media screen and (max-width:767px){
#exteriordiagnosis .roofEplanation .noteBox .note{
margin-top: 21px;
}
}
#exteriordiagnosis .importantArea .balloonBox{
width: 53.8%;
margin-right: 3.34%;
background: #fff;
position: relative;
padding: 45px 0;
}
@media screen and (max-width:980px){
#exteriordiagnosis .importantArea .balloonBox{
width: 70%;
margin-right: 30%;
float: none;
}
}
@media screen and (max-width:767px){
#exteriordiagnosis .importantArea .balloonBox{
width: 90%;
margin-right: 10%;
padding: 35px 0;
}
}
#exteriordiagnosis .importantArea .balloonBox:last-child{
margin-right: 0;
}
#exteriordiagnosis .importantArea .balloonBox.balloon01{
border-radius: 40px 40px 40px 0;
}
@media screen and (max-width:767px){
#exteriordiagnosis .importantArea .balloonBox.balloon01{
border-radius: 20px 20px 20px 0;
}
}
#exteriordiagnosis .importantArea .balloonBox:before{
content: "";
display: block;
width: 45px;
height: 40px;
background: url("../images/page/parts-diagnosis-imp.svg") center center no-repeat;
background-size: contain;
position: absolute;
}
@media screen and (max-width:767px){
#exteriordiagnosis .importantArea .balloonBox:before{
width: 32px;
height: 28px;
}
}
#exteriordiagnosis .importantArea .balloonBox.balloon01:before{
top: -18px;
left: 45px;
}
@media screen and (max-width:767px){
#exteriordiagnosis .importantArea .balloonBox.balloon01:before{
top: -12px;
left: 30px;
}
}

#exteriordiagnosis .importantArea .balloonBox:after{
content: "";
display: block;
position: absolute;
}
#exteriordiagnosis .importantArea .balloonBox.balloon01:after{
background-size: contain;
width: 118px;
height: 69px;
top: -27px;
right: 42px;
}
@media screen and (max-width:767px){
#exteriordiagnosis .importantArea .balloonBox.balloon01:after{
width: 90px;
height: 52px;
top: -20px;
right: 16px;
}
}
#exteriordiagnosis .importantArea .balloonBox .ttl{
font-size: 143%;
line-height: 1.6;
margin-bottom: 25px;
padding: 0 45px;
letter-spacing: 0.08em;
}
@media screen and (max-width:767px){
#exteriordiagnosis .importantArea .balloonBox .ttl{
font-size: 12pt;
margin-bottom: 10px;
padding: 0 30px;
}
}
#exteriordiagnosis .importantArea .balloonBox .note{
padding: 0 45px;
font-size: 142.9%;
font-weight: bold;
}
@media screen and (max-width:980px){
#exteriordiagnosis .importantArea .balloonBox .note{
font-size: 14pt;
}
}
@media screen and (max-width:767px){
#exteriordiagnosis .importantArea .balloonBox .note{
padding: 0 40px;
font-size: 10pt;
}
}
#exteriordiagnosis .importantArea .boxOuter{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#exteriordiagnosis .importantArea .imgBox{
width: 46.2%;
}
@media screen and (max-width:980px){
#exteriordiagnosis .importantArea .imgBox{
width: 30%;
}
}
#exteriordiagnosis .importantArea .img {
max-width: 196px;
width: 90%;
display: block;
margin: 0 auto;
}
@media screen and (max-width:767px){
#exteriordiagnosis .importantArea .img {
width: 120%;
margin: 0 0 0 -10%;
position: relative;
z-index: 999;
}
}
#exteriordiagnosis .importantArea .noteBox{
width: 53.8%;
}
@media screen and (max-width:980px){
#exteriordiagnosis .importantArea .noteBox{
width: 70%;
}
}
#exteriordiagnosis .importantArea{
margin-bottom: 150px;
}
#exteriordiagnosis .thingsArea{
margin-bottom: 100px;
}
@media screen and (max-width:767px){
#exteriordiagnosis .thingsArea{
margin-bottom: 50px;
}
}
#exteriordiagnosis .thingsArea .img{
width: 29%;
margin-top: 45px;
}
@media screen and (max-width:767px){
#exteriordiagnosis .thingsArea .img{
width: 100%;
max-width: 200px;
margin-right: auto;
margin-left: auto;
margin-top: 0;
margin-bottom: 20px;
float: none;
}
}
#exteriordiagnosis .thingsArea .img img{
width: 100%;
height: auto;
}
#exteriordiagnosis .thingsArea .thingsList{
width: 48%;
font-size: 114%;
}
@media screen and (max-width:767px){
#exteriordiagnosis .thingsArea .thingsList{
width: 100%;
font-size: 9pt;
}
}
#exteriordiagnosis .thingsArea .thingsList li{
line-height: 1.6;
padding: 17px 60px 17px 80px;
background: #fff;
margin-bottom: 15px;
position: relative;
}
@media screen and (max-width:767px){
#exteriordiagnosis .thingsArea .thingsList li{
padding: 12px 12px 12px 50px;
margin-bottom: 10px;
}
}
#exteriordiagnosis .thingsArea .thingsList li:before{
content: "";
display: block;
position: absolute;
top: 16px;
left: 30px;
width: 28px;
height: 28px;
background: url("../images/page/parts-diagnosis-things.svg") center center no-repeat;
background-size: contain;
}
@media screen and (max-width:767px){
#exteriordiagnosis .thingsArea .thingsList li:before{
top: 10px;
left: 17px;
width: 22px;
height: 22px;
}
}
#exteriordiagnosis .othersCheckPoint {
padding-bottom: 150px;
}
@media screen and (max-width:767px){
#exteriordiagnosis .othersCheckPoint {
padding-bottom: 30px;
}
}
/*---------------------------------------*/
/* words */
/*---------------------------------------*/
#words .areaTtl {
margin-bottom: 70px;
}
#words .wordsArea .ttl{
font-size: 128%;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 30px;
border-bottom: 1px solid #dfdfdf;
}
#words .wordsArea .wordsContents {
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content: space-between;
margin-bottom: 50px;
}
@media screen and (max-width:767px){
#words .wordsArea .wordsContents {
display: block;
}
}
#words .wordsArea .wordsContents .word{
margin-bottom: 5px;
}
#words .wordsArea .wordsBox {
width: 32%;
}
@media screen and (max-width:767px){
#words .wordsArea .wordsBox {
width: 100%;
}
}
/*---------------------------------------*/
/* cgsimulation */
/*---------------------------------------*/
#cgsimulation img {
width: 100%;
height: auto;
}
#cgsimulation  .note{
margin-bottom: 25px;
}
#cgsimulation .introductionContents{
display: flex;
justify-content: space-between;
}
#cgsimulation .introductionContents .imgBox{
width: 41.666666%;
}
#cgsimulation .introductionContents .noteBox{
width: 50%;
}
@media screen and (max-width:767px){
#cgsimulation .introductionContents{
display: block;
}
#cgsimulation .introductionContents .imgBox{
width: 100%;
}
#cgsimulation .introductionContents .noteBox{
width: 100%;
}
#cgsimulation .introductionContents .imgBox .img{
margin-bottom: 30px;
}
}
#cgsimulation .beforeafter {
display: flex;
margin-bottom: 30px;
position: relative;
}
@media screen and (max-width:767px){
#cgsimulation .beforeafter {
display: block;
}
}
#cgsimulation .arrow {
position: absolute;
width: 25px;
height: 25px;
top: 60%;
left: 34%;
transform: translate(-50%,-50%);
}
@media screen and (max-width:767px){
#cgsimulation .arrow {
top: 34%;
left: 50%;
}
}
#cgsimulation .arrow::before {
content: "";
position: absolute;
top: 0;
left: -7px;
width: 25px;
height: 25px;
box-sizing: border-box;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: translate(0,-50%) rotate(45deg);
transition: border 0.3s ease;
}
@media screen and (max-width:767px){
#cgsimulation .arrow::before  {
top: 0;
left: 0px;
transform: translate(0,-50%) rotate(135deg);
}
}
#cgsimulation .beforeafter .imgBox{
width: 30%;
}
@media screen and (max-width:767px){
#cgsimulation .beforeafter .imgBox{
width: 100%;
}
}
#cgsimulation .beforeafter .imgBox:nth-child(2){
margin-right: 8%;
}
#cgsimulation .beforeafter .imgBox:nth-child(3){
margin-right: 2%;
}
#cgsimulation .beforeafter .imgBox:last-child{
margin-right: 0;
}
@media screen and (max-width:767px){
#cgsimulation .beforeafter .imgBox:nth-child(2){
margin-right: 0%;
margin-bottom: 70px;
}
#cgsimulation .beforeafter .imgBox:nth-child(3){
margin-right: 0%;
margin-bottom: 30px;
}
}
#cgsimulation .beforeafter .ttl{
margin-bottom: 5px;
}
#cgsimulation .youtubeOuter{
position: relative;
width: 100%;
padding-top: 56.25%;
margin-bottom: 3em;
}
#cgsimulation .youtubeOuter iframe{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
/*---------------------------------------*/
/* corporate */
/*---------------------------------------*/
#corporate img {
width: 100%;
height: auto;
}
#corporate  .note{
margin-bottom: 15px;
}
#corporate .areaBase {
margin-bottom: 150px;
}
#corporate .introductionContents{
display: flex;
justify-content: space-between;
}
#corporate .introductionContents .imgBox{
width: 41.666666%;
}
#corporate .introductionContents .noteBox{
width: 50%;
}
@media screen and (max-width:767px){
#corporate .introductionContents{
display: block;
}
#corporate .introductionContents .imgBox{
width: 100%;
}
#corporate .introductionContents .noteBox{
width: 100%;
}
#corporate .introductionContents .imgBox .img{
margin-bottom: 30px;
}
}
#corporate .introductionContents .noteBox .subTtl {
font-size: 114%;
font-weight: bold;
margin-bottom: 20px;
}
#corporate .introductionContents .mb25{
margin-bottom: 25px;
}
#corporate .introductionContents .link{
text-decoration: underline;
}

#corporate .introductionContents .link:hover {
text-decoration: none;
}
#corporate .introductionContents .icon-link {
margin-left: 5px;
}
#corporate .contactArea{
background: #f6f6f6;
text-align: center;
padding: 30px 0;
}
#corporate .contactArea .tel{
font-size:171%;
margin-right: 5px;
}

#corporate .contactArea .num{
font-size:271%;
}
#corporate .contactArea .note{
font-size:114%;
}
/*---------------------------------------*/
/* news */
/*---------------------------------------*/
#news .areaTtl{
margin-bottom:70px;
}
@media screen and (max-width: 767px) {
#news .areaTtl{
margin-bottom:30px;
}
}
/* cateNavi */
#news .cateNavi{
text-align:center;
margin-bottom:60px;
}
@media screen and (max-width: 767px) {
#news .cateNavi{
margin-bottom:30px;
}
}
#news .cateNavi ul{
display:inline-block;
}
#news .cateNavi ul li{
float:left;
margin:0 57px;
}
@media screen and (max-width: 980px) {
#news .cateNavi ul li{
margin:0 30px;
}
}
@media screen and (max-width: 767px) {
#news .cateNavi ul li{
margin:0 15px 10px;
}
}
#news .cateNavi ul li a{
padding-bottom:5px;
border-bottom:1px solid #fff;
}
#news .cateNavi ul li.on a,
#news .cateNavi ul li a:hover{
padding-bottom:5px;
border-bottom:1px solid #000;
}
#news .newsList{
position:relative;
padding-bottom:35px;
margin:0 auto 35px;
border-bottom:1px solid #dfdfdf;
max-width:960px;
min-height:130px;
}
@media screen and (max-width: 767px) {
#news .newsList{
padding-bottom:20px;
margin:0 auto 20px;
min-height:65px;
}
}
#news .newsList .img{
position:absolute;
top:0;
left:0;
width:196px;
}
@media screen and (max-width: 767px) {
#news .newsList .img{
width:95px;
}
}
#news .newsList .img img{
width:100%;
height:auto;
}
#news .newsList .txt{
margin-left:260px;
}
@media screen and (max-width: 767px) {
#news .newsList .txt{
margin-left:110px;
}
}
#news .newsList .txt .info{
font-size:86%;
line-height:1;
margin:0 0 15px;
}
@media screen and (max-width: 767px) {
#news .newsList .txt .info{
margin:0 0 10px;
font-size:8pt;
}
}
#news .newsList .txt .info .date{
padding-right:15px;
margin-right:15px;
border-right:1px solid #666;
color: #666;
letter-spacing:0.1em;
}
#news .newsList .txt .info .cate{
color:#004da0;
}
#news .newsList .txt .ttl{
font-size:107%;
font-weight:bold;
margin-bottom:10px;
line-height:1.4;
height:2.8em;
}
@media screen and (max-width: 767px) {
#news .newsList .txt .ttl{
font-size:10pt;
}
}
#news .newsList .note{
height:3.6em;
color:#666;
margin-left:260px;
}
@media screen and (max-width: 767px) {
#news .newsList .note{
margin-left:0;
margin-top:10px;
}
}
#news .newsContent{
max-width:980px;
margin:0 auto 120px;
}
@media screen and (max-width: 767px) {
#news .newsContent{
margin-bottom:60px;
}
}
#news .newsContent .ttl{
font-size:143%;
font-weight:bold;
line-height:1.4;
margin-bottom:10px;
}
@media screen and (max-width: 767px) {
#news .newsContent .ttl{
font-size:10pt;
}
}
#news .newsContent .info{
font-size:86%;
line-height:1;
margin:0 0 55px;
}
@media screen and (max-width: 767px) {
#news .newsContent .info{
margin:0 0 10px;
font-size:8pt;
}
}
#news .newsContent .info .date{
padding-right:15px;
margin-right:15px;
border-right:1px solid #666;
color: #666;
letter-spacing:0.1em;
}
#news .newsContent .info .cate{
color:#004da0;
}
#news .newsContent .note{
color: #666;
}
#news .newsContent .note img{
margin-bottom:1.8em;
max-width:100%;
height:auto;
}
#news .newsContent .note p{
margin-bottom:1.8em;
}
#news .newsContent .btn{
margin-top:110px;
}
@media screen and (max-width: 767px) {
#news .newsContent .btn{
margin-top:50px;
}
}
/*---------------------------------------*/
/* blog */
/*---------------------------------------*/
#blog .areaTtl{
margin-bottom:70px;
}
@media screen and (max-width: 767px) {
#blog .areaTtl{
margin-bottom:30px;
}
}
/* cateNavi */
#blog .cateNavi{
position:relative;
background:#f7f7f7;
padding:15px 5%;
width:90%;
margin-bottom:60px;
min-height:25px;
}
@media screen and (max-width: 980px) {
#blog .cateNavi{
text-align:center;
}
}
@media screen and (max-width: 767px) {
#blog .cateNavi{
margin-bottom:30px;
}
}
#blog .cateNavi .naviTtl{
position:absolute;
top:18px;
left:5%;
line-height:1;
}
@media screen and (max-width: 980px) {
#blog .cateNavi .naviTtl{
position:static;
text-align:center;
margin-bottom:15px;
}
}
#blog .cateNavi .naviTtl .abel{
font-size:150%;
letter-spacing:0.1em;
}
#blog .cateNavi .naviTtl .small{
font-size:71%;
margin-left:5px;
}
#blog .cateNavi ul{
margin:8px 0 0 230px;
line-height:1;
color:#666;
}
@media screen and (max-width: 1060px) {
#blog .cateNavi ul{
margin:8px 0 0 170px;
}
}
@media screen and (max-width: 980px) {
#blog .cateNavi ul{
position:static;
display:inline-block;
margin:0;
}
}
@media screen and (max-width: 767px) {
#blog .cateNavi ul{
padding-left:0;
}
}
#blog .cateNavi ul li{
float:left;
padding:0 15px;
border-right:1px solid #666;
}
#blog .cateNavi ul li:first-child{
border-left:1px solid #666;
}
@media screen and (max-width: 767px) {
#blog .cateNavi ul li:first-child{
border-left:none;
}
}

@media screen and (max-width: 980px) {
#blog .cateNavi ul li{
padding:0 15px;
}
}
@media screen and (max-width: 767px) {
#blog .cateNavi ul li{
width:50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
font-size:8pt;
margin-bottom:10px;
margin-left:-1px;
margin-right:0;
padding-right:0;
}
}
@media screen and (max-width: 767px) {
#blog .cateNavi ul li:nth-child(2n){
border-right:none;
}
}
#blog .blogList{
width:31.25%;
margin-right:3.125%;
float:left;
margin-bottom:65px;
}
@media screen and (max-width: 767px) {
#blog .blogList{
width:100%;
margin-right:0;
margin-bottom:40px;
}
}
#blog .blogList:nth-child(3n){
margin-right:0%;
}
#blog .blogList .img{
margin-bottom:15px;
}
#blog .blogList .img img{
width:100%;
height:auto;
}
#blog .blogList .txt .info{
font-size:86%;
line-height:1;
margin:0 0 15px;
padding:10px 0 0;
}
@media screen and (max-width: 767px) {
#blog .blogList .txt .info{
margin:0 0 10px;
padding:0;
font-size:8pt;
}
}
#blog .blogList .txt .info .date{
padding-right:15px;
margin-right:15px;
border-right:1px solid #666;
color: #666;
letter-spacing:0.1em;
}
#blog .blogList .txt .info .cate{
color:#004da0;
}
#blog .blogList .txt .ttl{
font-size:107%;
font-weight:bold;
margin-bottom:10px;
line-height:1.4;
height:2.8em;
}
@media screen and (max-width: 767px) {
#blog .blogList .txt .ttl{
font-size:10pt;
height:auto;
}
}
#blog .blogList .note{
height:3.6em;
color:#666;
}
@media screen and (max-width: 767px) {
#blog .blogList .note{
margin-left:0;
margin-top:10px;
}
}
#blog .pager{
margin-top:120px;
}
@media screen and (max-width: 767px) {
#blog .pager{
margin-top:50px;
}
}
#blog .blogContent{
border-top:1px solid #dfdfdf;
}
@media screen and (max-width: 767px) {
#blog .blogContent{
border-top:none;
}
}
#blog .blogContent .blogMain{
width:62%;
padding:45px 0 120px;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogMain{
width:100%;
margin-bottom:60px;
padding:0;
}
}
#blog .blogContent .blogMain .ttl{
font-size:143%;
font-weight:bold;
line-height:1.4;
margin-bottom:10px;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogMain .ttl{
font-size:10pt;
}
}
#blog .blogContent .blogMain .info{
font-size:86%;
line-height:1;
margin:0 0 55px;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogMain .info{
margin:0 0 10px;
font-size:8pt;
}
}
#blog .blogContent .blogMain .info .date{
padding-right:15px;
margin-right:15px;
border-right:1px solid #666;
color: #666;
letter-spacing:0.1em;
}
#blog .blogContent .blogMain .info .cate{
color:#004da0;
}
#blog .blogContent .blogMain .note img{
margin-bottom:1.8em;
max-width:100%;
height:auto;
}
#blog .blogContent .blogMain .note p{
margin-bottom:1.8em;
line-height: 2.2;
font-size: 107%;
}
#blog .blogContent .blogMain .note h2{
position: relative;
padding: 35px 0 15px;
border-top: 1px solid #dfdfdf;
box-sizing: border-box;
font-size: 150%;
margin-top: 35px;
}
#blog .blogContent .blogMain .note h2:after{
content: "";
position: absolute;
top: -1px;
left: 0;
width: 30px;
height: 1px;
background: #004da0;
}
#blog .blogContent .blogMain .note h3{
font-size: 125%;
font-weight: bold;
}
#blog .blogContent .blogMain .note h4{
font-size: 112.5%;
font-weight: bold;
}
#blog .blogContent .blogMain .note h5{
font-weight: bold;
}
#blog .blogContent .blogMain .note .youtubeOuter{
position: relative;
width: 100%;
padding-top: 56.25%;
margin-bottom: 3em;
}
#blog .blogContent .blogMain .note .youtubeOuter iframe{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
#blog .blogContent .blogMain .note .youtubeOuter p{
margin-bottom: 0;
}
#blog .blogContent .blogMain .note .wp-caption{
	max-width: 100%;
}
#blog .blogContent .blogMain .btn{
margin-top:110px;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogMain .btn{
margin-top:50px;
}
}
#blog .blogContent .blogSide{
width:29%;
border-left:1px solid #dfdfdf;
padding:45px 0 20px 3%;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogSide{
width:100%;
border-left:none;
padding:0 0 20px 0;
}
}
#blog .blogContent .blogSide .sideBase{
margin-bottom:100px;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogSide .sideBase{
margin-bottom:40px;
}
}
#blog .blogContent .blogSide .sideTtl{
margin-bottom:20px;
}
#blog .blogContent .blogSide .sideTtl .abel{
font-size:150%;
letter-spacing:0.1em;
line-height:1.4;
}
#blog .blogContent .blogSide .sideTtl .jp{
font-size:71%;
display:block;
}
#blog .blogContent .blogSide .sideList{
line-height:2.3;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogSide .sideList li{
float:left;
width:50%;
}
}
#blog .blogContent .blogSide .sideList li:before{
content:">";
font-size:71%;
position:relative;
top:-2px;
margin-right:10px;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogSide .sideList li:before{
font-size:7pt;
}
}
#blog .blogContent .blogSide .popularList li{
margin-bottom:45px;
position:relative;
min-height: 56px;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogSide .popularList li{
margin-bottom:25px;
}
}
#blog .blogContent .blogSide .popularList li .img{
position:absolute;
top:0;
left:0;
width:85px;
}
@media screen and (max-width: 980px) {
#blog .blogContent .blogSide .popularList li .img{
width:100%;
position:relative;
margin-bottom:10px;
}
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogSide .popularList li .img{
position:absolute;
width:90px;
margin-bottom:0;
}
}
#blog .blogContent .blogSide .popularList li .img img{
width:100%;
height:auto;
}
#blog .blogContent .blogSide .popularList li .txt{
margin-left:100px;
}
@media screen and (max-width: 980px) {
#blog .blogContent .blogSide .popularList li .txt{
margin-left:0;
}
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogSide .popularList li .txt{
margin-left:115px;
}
}
#blog .blogContent .blogSide .popularList li .txt .info{
font-size:86%;
line-height:1;
margin:0 0 5px;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogSide .popularList li .txt .info{
margin:0 0 10px;
font-size:8pt;
}
}
#blog .blogContent .blogSide .popularList li .txt .date{
padding-right:8px;
margin-right:8px;
border-right:1px solid #666;
color: #666;
letter-spacing:0.1em;
}
#blog .blogContent .blogSide .popularList li .txt .cate{
color:#004da0;
}
#blog .blogContent .blogSide .popularList li .txt .ttl{
font-weight:bold;
font-size:86%;
line-height:1.4;
height:2.8em;
}
@media screen and (max-width: 767px) {
#blog .blogContent .blogSide .popularList li .txt .ttl{
font-size:9pt;
}
}
#blog .blogContent .relatedArea{
border-top: 1px solid #dfdfdf;
padding-top: 45px;
margin-bottom: 120px;
}
@media screen and (max-width: 767px) {
#blog .blogContent .relatedArea{
border-top: none;
padding-top: 0;
margin-bottom: 20px;
}
}
#blog .blogContent .relatedArea .sideTtl{
margin-bottom:20px;
}
#blog .blogContent .relatedArea .sideTtl .abel{
font-size:150%;
letter-spacing:0.1em;
line-height:1.4;
}
#blog .blogContent .relatedArea .sideTtl .jp{
font-size:71%;
display:block;
}
@media screen and (max-width: 767px) {
#blog .blogContent .relatedArea .blogList{
position:relative;
min-height: 56px;
margin-bottom:25px;
}
#blog .blogContent .relatedArea .blogList .img{
position:absolute;
top:0;
left:0;
width:90px;
margin-bottom:0;
}
#blog .blogContent .relatedArea .blogList .img img{
width:100%;
height:auto;
}
#blog .blogContent .relatedArea .blogList .txt{
margin-left:115px;
}
#blog .blogContent .relatedArea .blogList .txt .info{
line-height:1;
margin:0 0 10px;
font-size:8pt;
}
#blog .blogContent .relatedArea .blogList .txt .date{
padding-right:8px;
margin-right:8px;
border-right:1px solid #666;
color: #666;
letter-spacing:0.1em;
}
#blog .blogContent .relatedArea .blogList .txt .cate{
color:#004da0;
}
#blog .blogContent .relatedArea .blogList .txt .ttl{
font-weight:bold;
font-size:9pt;
line-height:1.4;
height:2.8em;
}
}
/*---------------------------------------*/
/* interview */
/*---------------------------------------*/
/* cateNavi */
#interview .cateNavi{
position:relative;
background:#f7f7f7;
padding:15px 5%;
width:90%;
margin-bottom:60px;
min-height:25px;
}
@media screen and (max-width: 980px) {
#interview .cateNavi{
text-align:center;
}
}
@media screen and (max-width: 767px) {
#interview .cateNavi{
margin-bottom:30px;
}
}
#interview .cateNavi .naviTtl{
position:absolute;
top:18px;
left:5%;
line-height:1;
}
@media screen and (max-width: 980px) {
#interview .cateNavi .naviTtl{
position:static;
text-align:center;
margin-bottom:15px;
}
}
#interview .cateNavi .naviTtl .abel{
font-size:150%;
letter-spacing:0.1em;
}
#interview .cateNavi .naviTtl .small{
font-size:71%;
margin-left:5px;
}
#interview .cateNavi ul{
margin:8px 0 0 230px;
line-height:1;
color:#666;
}
@media screen and (max-width: 1060px) {
#interview .cateNavi ul{
margin:8px 0 0 170px;
}
}
@media screen and (max-width: 980px) {
#interview .cateNavi ul{
position:static;
display:inline-block;
margin:0;
}
}
@media screen and (max-width: 767px) {
#interview .cateNavi ul{
padding-left:0;
}
}
#interview .cateNavi ul li{
float:left;
padding:0 15px;
border-right:1px solid #666;
}
#interview .cateNavi ul li:first-child{
border-left:1px solid #666;
}
@media screen and (max-width: 767px) {
#interview .cateNavi ul li:first-child{
border-left:none;
}
}
@media screen and (max-width: 980px) {
#interview .cateNavi ul li{
padding:0 15px;
}
}
@media screen and (max-width: 767px) {
#interview .cateNavi ul li{
width:50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
font-size:8pt;
margin-bottom:10px;
margin-left:-1px;
margin-right:0;
padding-right:0;
}
}
@media screen and (max-width: 767px) {
#interview .cateNavi ul li:nth-child(2n){
border-right:none;
}
}
#interview .interviewListOuter{
background:#f7f7f7;
padding:35px 80px;
max-width:800px;
margin:0 auto;
}
@media screen and (max-width: 980px) {
#interview .interviewListOuter{
padding:35px 40px;
}
}

@media screen and (max-width: 767px) {
#interview .interviewListOuter{
padding:20px 5%;
}
}
#interview .interviewList{
position:relative;
padding-bottom:35px;
margin:0 auto 35px;
border-bottom:1px solid #dfdfdf;
min-height:130px;
}
@media screen and (max-width: 767px) {
#interview .interviewList{
padding-bottom:20px;
margin:0 auto 20px;
min-height:65px;
}
}
#interview .interviewList .img{
position:absolute;
top:0;
left:0;
width:196px;
}
@media screen and (max-width: 767px) {
#interview .interviewList .img{
width:100%;
position:relative;
}
}
#interview .interviewList .img img{
width:100%;
height:auto;
}
#interview .interviewList .txt{
margin-left:230px;
}
@media screen and (max-width: 767px) {
#interview .interviewList .txt{
margin-left:0;
}
}
#interview .interviewList .txt .info{
line-height:1;
margin:0 0 15px;
}
@media screen and (max-width: 767px) {
#interview .interviewList .txt .info{
margin:10px 0;
}
}
#interview .interviewList .txt .ttl{
font-size:128.5%;
font-weight:bold;
margin-bottom:10px;
line-height:1.4;
height:2.8em;
}
@media screen and (max-width: 767px) {
#interview .interviewList .txt .ttl{
font-size:10pt;
}
}
#interview .interviewList table{
height:3.6em;
font-size:93%;
color:#666;
margin-left:230px;
}
@media screen and (max-width:980px) {
#interview .interviewList table{
font-size:86%;
}
}
@media screen and (max-width: 767px) {
#interview .interviewList table{
margin-left:0;
margin-top:10px;
font-size:8pt;
}
}
#interview .interviewList table td:nth-child(2){
padding-left:5em;
}
@media screen and (max-width:980px) {
#interview .interviewList table td:nth-child(2){
padding-left:2em;
}
}


#interview.novisual .areaTtl{
margin-bottom:90px;
}
@media screen and (max-width: 767px) {
#interview.novisual .areaTtl{
margin-bottom:40px;
}
}

#interview .interviewContentOuter{
background:#f7f7f7;
padding:60px 80px 130px;
max-width:800px;
margin:0 auto 130px;
}
@media screen and (max-width: 980px) {
#interview .interviewContentOuter{
padding:40px 40px 80px;
margin:0 auto 80px;
}
}

@media screen and (max-width: 767px) {
#interview .interviewContentOuter{
padding:20px 5% 40px;
margin:0 auto 40px;
}
}
#interview .interviewContent .ttl{
font-size:150%;
font-weight:bold;
margin-bottom:50px;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .ttl{
font-size:12pt;
margin-bottom:20px;
}
}
#interview .interviewContent .img{
width:100%;
}
#interview .interviewContent .img img{
width:100%;
height:auto;
}
#interview .interviewContent .topImg{
margin-bottom:60px;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .topImg{
margin-bottom:30px;
}
}
#interview .interviewContent .sliderArea{
padding-bottom:60px;
margin-bottom:60px;
border-bottom:1px solid #dfdfdf;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .sliderArea{
padding-bottom:30px;
margin-bottom:30px;
}
}
#interview .interviewContent .sliderArea .blockLeft{
width:60%;
overflow:hidden;
}
@media screen and (max-width: 980px) {
#interview .interviewContent .sliderArea .blockLeft{
width:100%;
margin-bottom:30px;
}
}
#interview .controlWrap ul li{
width:23%;
margin-right:2.666%;
margin-top:15px;
display:inline;
float:left;
}
#interview .controlWrap ul li:nth-child(4n){
margin-right:0;
}
#interview .controlWrap ul li img{
width:100%;
height:auto;
}
#interview .interviewContent .sliderArea .blockRight{
width:37%;
}
@media screen and (max-width: 980px) {
#interview .interviewContent .sliderArea .blockRight{
width:100%;
}
}
#interview .interviewContent .sliderArea .blockRight .dataTtl{
font-size:128.5%;
font-weight:bold;
margin-bottom:15px;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .sliderArea .blockRight .dataTtl{
font-size:11pt;
margin-bottom:10px;
}
}
#interview .interviewContent .sliderArea .blockRight table{
width:100%;
color:#666;
line-height:1.5;
}
#interview .interviewContent .sliderArea .blockRight table th{
width:25%;
padding:7px 0;
}
#interview .interviewContent .sliderArea .blockRight table td{
width:75%;
padding:7px 0;
}
#interview .interviewContent .sliderArea .blockRight .btn{
margin-top:90px;
}
@media screen and (max-width: 980px) {
#interview .interviewContent .sliderArea .blockRight .btn{
margin-top:30px;
}
}
@media screen and (max-width: 767px) {
#interview .interviewContent .sliderArea .blockRight .btn{
margin-top:20px;
}
}
#interview .interviewContent .interviewBlock{
margin-bottom:55px;
}
@media screen and (max-width:767px){
#interview .interviewContent .interviewBlock{
margin-bottom:30px;
}
}
#interview .interviewContent .interviewBlock .interviewTtl{
font-size:128.5%;
font-weight:bold;
margin-bottom:15px;
line-height:1.5;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .interviewBlock .interviewTtl{
font-size:11pt;
margin-bottom:10px;
}
}

#interview .interviewContent .interviewBlock .note{
margin-left:58px;
color:#666;
margin-bottom:1em;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .interviewBlock .note{
margin-left:50px;
}
}
#interview .interviewContent .interviewBlock .note .name{
display:inline-block;
margin-left:-58px;
width:58px;
font-weight:bold;
color:#000;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .interviewBlock .note .name{
margin-left:-50px;
width:50px;
}
}
#interview .interviewContent .interviewBlock .note .name.long{
width:118px;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .interviewBlock .note .name.long{
width:100px;
}
}
#interview .interviewContent .interviewBlock .img{
margin-top:35px;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .interviewBlock .img{
margin-top:20px;
}
}
#interview .interviewContent .message{
background:#fff;
padding:35px;
position:relative;
margin-bottom:115px;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .message{
padding:20px 5%;
margin-bottom:40px;
}
}
#interview .interviewContent .message .messageTtl{
position:absolute;
top:35px;
left:35px;
line-height:1.5;
font-weight:bold;
}
@media screen and (max-width: 980px) {
#interview .interviewContent .message .messageTtl{
position:static;
margin-bottom:1em;
}
}
#interview .interviewContent .message .messageTtl .small{
font-size:86%;
display:block;
}
@media screen and (max-width: 980px) {
#interview .interviewContent .message .messageTtl .small{
display:inline;
}
}
#interview .interviewContent .message .note{
margin-left:130px;
color:#666;
}
@media screen and (max-width: 980px) {
#interview .interviewContent .message .note{
margin-left:0;
}
}
#interview .interviewContent .interviewBlock .movie{
position:relative;
width:100%;
padding-top:53.83%;
}
#interview .interviewContent .interviewBlock .movie iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
border: none;
}
#interview .interviewContent .btnOuter .btn a{
margin:0 auto;
}
/*caseetudy追記*/
#interview .interviewContent .caseLead{
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
#interview .interviewContent .caseLead .caseLeadTtl{
font-size: 128.5%;
font-weight: bold;
margin-bottom: 15px;
line-height: 1.5;
text-align: center;
}
#interview .interviewContent .flowNavi{
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
#interview .interviewContent .flowNavi .naviLink{
margin: 0 1.5em 10px;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .flowNavi .naviLink{
margin: 0 0.5em 10px;
}
}
#interview .interviewContent .flowNavi .naviLink .list{
font-size: 114%;
font-weight: bold;
margin-left: 1.5em;
line-height: 1.5;
}
#interview .interviewContent .flowNavi .naviLink .list .list_num{
margin-left:-1.5em;
width: 1.5em;
display:inline-block;
}
#interview .interviewContent .flowBlock{
margin-bottom: 50px;
}
#interview .interviewContent .flowBlock.mini{
margin-bottom: 10px;
}
#interview .interviewContent .flowBlock .flowTtl{
font-size: 128.5%;
font-weight: bold;
margin-bottom: 15px;
line-height: 1.5;
}
#interview .interviewContent .flowBlock .flow .img{
width: 40%;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .flowBlock .flow .img{
width: 100%;
margin-bottom: 15px;
}
}
#interview .interviewContent .flowBlock .flow .flowNote{
width: 55%;
line-height: 2;
}
@media screen and (max-width: 767px) {
#interview .interviewContent .flowBlock .flow .flowNote{
width: 100%;
}
}
#interview .interviewContent .btnOuter.colum2{
margin-bottom: 30px;
}
#interview  .interviewContent .leadBlock{
margin-bottom: 50px;
}
#interview .interviewContent .mb90{
margin-bottom: 90px;
}
#interview .interviewContent .flowOuter{
margin-bottom: 90px;
}
/*---------------------------------------*/
/*  .caseStudy  */
/*---------------------------------------*/
#interview.caseStudy .interviewContent .sliderArea{
padding-bottom:0;
margin-bottom:30px;
border-bottom:none;
}
#interview.caseStudy .interviewContent .caseLead .caseLeadTtl{
margin-top: 50px;
}
/*---------------------------------------*/
/* work */
/*---------------------------------------*/
/* 共通 */
#work .areaTtl{
margin-bottom: 70px;
}
@media screen and (max-width:767px){
#work .areaTtl{
margin-bottom: 30px;
}
}

#work .topArea{
margin-bottom: 50px;
}
@media screen and (max-width:767px){
#work .topArea{
margin-bottom: 30px;
}
}
#work .topArea .en{
font-size:143%;
margin:8px 0 20px;
}
@media screen and (max-width:767px){
#work .topArea .en{
font-size:11pt;
margin:8px 0;
}
}
#work .topArea .topTtl{
font-size:242%;
font-weight:bold;
line-height:1;
margin-bottom:40px;
}
@media screen and (max-width:767px){
#work .topArea .topTtl{
font-size:18pt;
margin-bottom:15px;
}
}
#work .topArea .boxInner{
position: relative;
}
#work .topArea .imgBox{
width: 35%;
margin-bottom: 20px;
}
@media screen and (max-width:767px){
#work .topArea .imgBox{
width: 100%;
}
}
#work .topArea .img img{
width: 100%;
height: auto;
}
#work .topArea .txtBox{
width: 62%;
}
@media screen and (max-width:767px){
#work .topArea .txtBox{
width: 100%;
}
}
@media screen and (max-width:980px){
#work .topArea .txtBox.box02{
width: 100%;
}
}
#work .topArea .txtBox .ttl,
#work .topArea .txtBox .note{
margin-left: 1em;
}
#work .topArea .txtBox .ttl{
font-weight: bold;
margin-bottom: 5px;
}
#work .topArea .txtBox .ttl .dot{
display: inline-block;
width: 1em;
margin-left: -1em;
}
#work .topArea .txtBox .note{
margin-bottom: 10px;
color: #666;
}
#work .topArea .txtBox .menuList li{
float: left;
margin-left: 16px;
margin-right: 20px;
line-height: 1.4;
margin-bottom: 5px;
}
#work .topArea .txtBox .menuList li .list{
margin-left:-16px;
display:inline-block;
width:16px;
font-size:86%;
position:relative;
top:-2px;
}
@media screen and (max-width:767px){
#work .topArea .txtBox .menuList li .list{
margin-left:-12px;
width:12px;
font-size:7pt;
}
}
#work .topArea .txtBox .menuList li .small{
font-size:86%;
}
@media screen and (max-width:767px){
#work .topArea .txtBox .menuList li .small{
font-size:8pt;
}
}
#work .workArea .workContent{
margin-bottom: 20px;
}
#work .workArea .ttl .small{
font-size: 86%;
}
@media screen and (max-width:767px){
#work .workArea .ttl .small{
font-size: 8pt;
}
}
#work .workArea .note{
color: #666;
}
#work .workArea .txtBox{
position: relative;
padding: 20px 10% 20px 5%;
background: #f6f6f6;
cursor: pointer;
}
#work .workArea .txtBox.noImgBox{
cursor: inherit;
}
#work .workArea .txtBox .ttl{
font-weight: bold;
line-height: 1.4;
margin-bottom: 5px;
}
#work .workArea .txtBox .icon{
position: absolute;
display: block;
top: 50%;
margin-top: -10px;
right: 5%;
font-size: 20px;
transition: all 0.3s ease;
}
@media screen and (max-width:767px){
#work .workArea .txtBox .icon{
margin-top: -7px;
font-size: 14px;
}
}
#work .workArea .txtBox.open .icon{
transform: rotate(90deg);
margin-top: -6px;
}
#work .workArea .imgBox{
display: none;
padding: 20px 5%;
}
#work .workArea .imgBox .comparisonArea{
margin-bottom: 50px;
}
@media screen and (max-width:767px){
#work .workArea .imgBox .comparisonArea{
width: 85%;
margin: 0 auto 30px;
}
}
#work .workArea .imgBox .comparisonArea .img{
float: left;
width: 45%;
margin-right: 10%;
position: relative;
}
@media screen and (max-width:767px){
#work .workArea .imgBox .comparisonArea .img{
float: none;
width: 100%;
margin-right: 0;
margin-bottom: 40px;
}
}
#work .workArea .imgBox .comparisonArea .img:nth-child(2n):before{
content: "";
display: block;
position: absolute;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 22px solid #666;
top: 50%;
margin-top: -30px;
left: -11%;
margin-left: -10px;
}
@media screen and (max-width:767px){
#work .workArea .imgBox .comparisonArea .img:nth-child(2n):before{
border-top: 10px solid #666;
border-bottom: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -30px;
margin-top: 0;
left: 50%;
margin-left: -5px;
}
}
#work .workArea .imgBox .comparisonArea .img:nth-child(2n){
margin-right: 0;
}
#work .workArea .imgBox .comparisonArea .img img{
width: 100%;
height: auto;
margin-bottom: 10px;
}
#work .workArea .imgBox .stepArea .stepTtl{
font-weight: bold;
line-height: 1.4;
margin-bottom: 5px;
}
#work .workArea .imgBox .stepArea .stepList .step{
width: 22.75%;
margin-right: 3%;
float: left;
margin-bottom: 20px;
}
@media screen and (max-width:1150px){
#work .workArea .imgBox .stepArea .stepList .step{
width: 31.5%;
margin-right: 2.75%;
}
}
@media screen and (max-width:767px){
#work .workArea .imgBox .stepArea .stepList .step{
width: 48.5%;
margin-right: 3%;
}
}
#work .workArea .imgBox .stepArea .stepList .step:nth-child(4n){
margin-right: 0;
}
@media screen and (max-width:1150px){
#work .workArea .imgBox .stepArea .stepList .step:nth-child(4n){
margin-right: 2.75%;
}
#work .workArea .imgBox .stepArea .stepList .step:nth-child(3n){
margin-right: 0;
}
}
@media screen and (max-width:767px){
#work .workArea .imgBox .stepArea .stepList .step:nth-child(3n){
margin-right: 3%;
}
#work .workArea .imgBox .stepArea .stepList .step:nth-child(2n){
margin-right: 0;
}
}
#work .workArea .imgBox .stepArea .stepList .step .ttl{
line-height: 1.4;
margin-left: 1em;
margin-bottom: 5px;
}
#work .workArea .imgBox .stepArea .stepList .step .ttl .number{
margin-left: -1em;
display: inline-block;
width: 1em;
}
@media screen and (max-width:980px){
#work .workArea .imgBox .stepArea .stepList .step .ttl{
font-size: 93%;
}
}
@media screen and (max-width:767px){
#work .workArea .imgBox .stepArea .stepList .step .ttl{
font-size: 9pt;
}
}
#work .workArea .imgBox .stepArea .stepList .step .img img{
width: 100%;
height: auto;
}
#work .aquaArea{
margin-top: -50px;
margin-bottom: 30px;
text-align: right;
}
#work .aquaArea .hide{
display: none;
}
/*---------------------------------------*/
/* formContent */
/*---------------------------------------*/
.formContent .formTop .ttl{
font-size:128%;
font-weight:bold;
margin-bottom:20px;
}
@media screen and (max-width: 767px) {
.formContent .formTop .ttl{
font-size:10pt;
margin-bottom:10px;
}
}
.formContent .formTop .note{
margin-bottom:1em;
}
#request .formContent{
position:relative;
min-height:160px;
}
@media screen and (max-width: 580px) {
#request .formContent{
min-height:inherit;
}
}
#request .formContent .img{
width:184px;
position:absolute;
top:0;
right:0;
}
@media screen and (max-width: 580px) {
#request .formContent .img{
position:static;
width:80%;
max-width:250px;
margin:0 auto 10px;
}
}
#request .formContent .img img{
width:100%;
height:auto;
}
#request .formContent .txtBlock{
margin-right:204px;
}
@media screen and (max-width: 580px) {
#request .formContent .txtBlock{
margin-right:0;
}
}
#quote .formContent{
position:relative;
min-height:160px;
}
@media screen and (max-width: 580px) {
#quote .formContent{
min-height:inherit;
}
}
#quote .formContent .img{
width:184px;
position:absolute;
top:0;
right:0;
}
@media screen and (max-width: 580px) {
#quote .formContent .img{
position:static;
width:80%;
max-width:250px;
margin:0 auto 10px;
}
}
#quote .formContent .img img{
width:100%;
height:auto;
}
#quote .formContent .txtBlock{
margin-right:204px;
}
@media screen and (max-width: 580px) {
#quote .formContent .txtBlock{
margin-right:0;
}
}
.formContent .formTtl{
font-size:128%;
font-weight:bold;
padding-bottom:10px;
margin-bottom:30px;
border-bottom:1px solid #dfdfdf;
}
@media screen and (max-width: 767px) {
.formContent .formTtl{
font-size:10pt;
margin-bottom:20px;
}
}
.formContent .box-tel .ttl{
font-size:114%;
font-weight:bold;
margin-bottom:10px;
}
@media screen and (max-width: 767px) {
.formContent .box-tel .ttl{
font-size:9pt;
}
}
.formContent .box-tel .tel{
font-size: 343%;
line-height: 1;
margin-bottom: 5px;
}
@media screen and (max-width: 980px) {
.formContent .box-tel .tel{
font-size: 300%;
}
}
@media screen and (max-width: 640px) {
.formContent .box-tel .tel{
font-size: 30pt;
}
}
.formContent .box-tel .tel span {
font-size: 60%;
letter-spacing: normal;
margin-right:10px;
}
@media screen and (max-width: 640px) {
.formContent .box-tel .tel span {
font-size: 18pt;
}
}
/*---------------------------------------*/
/* privacy */
/*---------------------------------------*/
.ppContent{
margin-bottom:30px;
border-bottom:1px solid #dfdfdf;
}
@media screen and (max-width: 767px) {
.ppContent{
margin-bottom:20px;
}
}
.ppContent .ttl{
font-size:114%;
font-weight:bold;
margin-bottom:10px;
}
@media screen and (max-width: 767px) {
.ppContent .ttl{
font-size:10pt;
}
}
.ppContent .note{
margin-bottom:1em;
}
.ppContent .listTtl{
margin-top:30px;
}
@media screen and (max-width: 767px) {
.ppContent .listTtl{
margin-top:20px;
}
}
.ppContent .list{
margin-left:1.5em;
line-height:1.65;
margin-bottom:5px;
}
.ppContent .list .num{
margin-left:-1.5em;
display:inline-block;
width:1.5em;
}
.ppContent p:last-child{
margin-bottom:30px;
}
@media screen and (max-width: 767px) {
.ppContent p:last-child{
margin-bottom:20px;
}
}
/*---------------------------------------*/
/* bacePage */
/*---------------------------------------*/
#basePage .btn a{
	margin:20px auto 0;
}