@charset "utf-8";

/**********************************************************************　スマホ　*******************************************************************************/

body { margin: 0; }

.pc ,.sitemap,.anch {display: none;}

/**********************************************************************　デザイン　*******************************************************************************/

main { text-align: justify; }
.wrap { border-top: 1px #ccc solid; box-sizing: border-box;}
.org-content { padding: 0 40px 0; font-size: 1.0em; line-height: 1.8em; }

body.hikari #Features { padding-top: 30px; margin-top: 20px }
body.hikari #Flow { padding-top: 50px; margin-top: 20px }

body.hikari #Effect, 
body.hikari #Coating, 
body.hikari #Criterion, 
body.hikari #Steps
{ padding-top: 80px; margin-top: 20px }

.txcsp { text-align: center }

.midashitag { position: absolute; z-index: 1; top: 0; }
.midashitag { width: 180px; left: 0; }

.alignleft { text-align: left; margin: 40px 20px 20px }

ul.maru li::after { top: .60em; }

/**********************************************************************　タイポグラフィー　*******************************************************************************/

h1.entry-title { font-size: 1.4em; line-height: 1.6em }
h2 {font-size: 1.2em; line-height: 1.6em }
h2.entry-title a { font-size: 1.4em; line-height: 1.6em }
h3 {font-size: 1.2em; line-height: 1.6em }
h4 {font-size: 1.1em; line-height: 1.4em }

/************************* 　ロゴ　***************************/

header#togglebox .logo { left: 20px; top: 10px; width: 120px; }
header#togglebox .misaki { right: 80px; top: 10px; width: 120px; }

header#org .logo { width:80%; margin: 0 8%}
header#org .misaki { width:80%; margin: 0 8% }
/**********************************************************************  ナビ  *******************************************************************************/

header#togglebox { background-color: #fefefe; border-bottom: solid 1px #ccc }
header#togglebox { padding: 15px 0 0 0; height:35px; }
header#togglebox nav { background-color: hsla(0,0%,100%,1) }
header#togglebox nav ul li a { background-color: hsla(187,99%,35%,.1) ; color: #000 ; padding: 15px 0 ; border-bottom: 1px solid #ccc ; }
header#togglebox nav ul li a span.ensub { display: block ;padding: 2px 0 0 ; }

header ul li { padding: 0 }
header ul li a { font-size: 16px; line-height: 16px; padding: 30px 0; text-align: center; }

.telset { text-align: center }
.telset p { text-align: center; padding-bottom: 15px }
.telset .tel img { width: 250px; padding-top: 30px }
.telset .fb img { width: 30px; }
.telset .contact img { width: 150px; }
.topics { padding: 50px 20% 50px; }

.bread { text-align: left; margin: 10px 0 10px 20px!important; }
#content.site-content { margin: 0 0 0 20px!important; width: calc(100% - 40px)!important;  }
.org-content .logo { width: 150px; margin-left: calc(50% - 75px); margin-bottom: 30px}

body.home #imagewrap { height: 30vh; background-image: url("../index/Spimage.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left top; }

body.business #imagewrap, body.housing #imagewrap
{ height: 25vh; background-repeat: no-repeat; background-size: cover; background-position: right top; }

body.business #imagewrap { background-image: url("../business/Spbusiness.jpg"); }
body.housing #imagewrap { background-image: url("../housing/Sphousing.jpg"); }

body.home h1.image-title { font-size: 1.6em; line-height: 1.4em; left: 45%; width: 50%; top: 10vw; text-align: left; }
body.home h1.image-title span { font-size: .6em; line-height: 1.6em; display: block; padding-bottom: 6px }

body.housing h1.image-title,
body.business h1.image-title { font-size: 1.0em; line-height: 1.5em; left: 20px; width: 90%; top: 16vw; text-align: left; }
body.housing h1.image-title img,
body.business h1.image-title img { width: 30%; padding-bottom: 10px }

.topics { padding: 50px 20px 50px; }
.icon5 { width: 60px; margin: 50px auto 0; }
.house { width: 100%; margin: 50px 0% 70px; }
.housebt { padding-top: 20px; }
.flows { padding: 40vw 0 0px; margin-top: 50px }
.flows { position: relative; background-image: url("../img/flow.svg"); background-size: 100% auto; background-repeat: no-repeat; background-position: left top; }
.flows h4 { font-size: 3.6vw; left: 0; top: -.5vw; width: 100%; text-align: center; }
.flows p { left: 0; top: 25vw; width: 100%; text-align: center; }

#btbox.sanbu { width: 70%; margin: 0 15% }

.workwrap > div { width: 100%; padding: 10px 0 }

.photowrap img { width: 25% }
.photo3wrap img { width: 33.3333% }
.photo5wrap img { width: 20% }
.photo2wrap img { width: 100% }

/*********************************************************************** フッター ******************************************************************************/

footer { padding: 30px 0 30px; margin: 30px 0 0 0 }

footer#org { margin-top: 0; padding: 30px 20px 60px; font-size: .8em } 

footer#org .fst { width:40%; margin: 0 30% }
footer#org .scd { width:80%; margin: 0 8% }
footer#org .thd { width:100%; margin: 0 0% }
footer#org .thd .misaki { width:38%; margin: 30px 31% 0 }
footer#org .thd .tel { width:50%; margin: 0 25% }
footer#org .frt { width:80%; margin: 0 10% }

footer#org .scd a { border: 1px solid #ccc; padding: 10px 0; margin: 5px }