/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 2022/06/22, 21:52:14
    Author     : yuka
*/

/* Reset paramater -----------------------------------------------------------*/
html, body, div, li, a, ul, ol, dl, dt, dd, p, span, header, nav, section, article, aside, fotter {margin: 0; padding: 0;}
img {border: none;}
header, nav, section, article, aside, fotter, a, dl, dt, dd, img, ul, div {
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
a {text-decoration: none;}
a:link, a:visited {text-decoration: none;}
a:hover {opacity: 0.4;}
ul, ol {list-style: none;}

/* Basic settings ------------------------------------------------------------*/
body {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 400;
    color: #1a1a1a;
    font-size: 18px;
    line-height: 1.5em;
}
html {margin:0;}
a:link, a:visited {color: #1a1a1a;}
section {
    width: 100%;
    height: auto;
    padding: 1em 1.5em 1.5em 1.5em;
}
div {margin: 1.5em auto;}
p {margin: 1em;}
p span {font-size: 120%;}
h1, h2, h3, h4 {
    margin: 0.5em 1em 1em 1em;
    text-align: center;
    display: block;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5em;
}
h1 {font-size: 200%;}
h2 {font-size: 150%;}
h3 {font-size: 110%;}
h4 {font-size: 100%;}
dt {
    width: 90%;
    margin: 1em 5%;
    border-bottom: 1px solid rgba(26, 26, 26, 0.8);
}
dd {
    width: 88%;
    margin: 1em 5% 2em 7%;
}
.notmobile {display: block;}
.mobile {display: none;}
.thispage {opacity: 0.6;}
.titleAnt {
    font-size: 120%;
    font-weight: 400;
    line-height: 1.2em;
    text-align: center;
}

#wrapper {
    width: 100%;
    margin: 0;
}

.bxslider {
    width: 100%;
    height: auto;
    position: relative;
}
.bxslider li {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}
picture img {width: 100%;}

header {position: relative;}
#header_menu, #sub_menu {
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 3em;
    font-size: 120%;
    font-weight: 500;
    line-height: 3em;
    letter-spacing: 0.1em;
}
#header_menu {
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: none;
    z-index: 2;
}
#sub_menu {
    position: relative;
    background-image: none;
}
#header_menu ul, #sub_menu ul, #footermenu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0 1em;
}
#header_menu ul li a, #sub_menu ul li a, #footermenu ul li a{
    padding: 0 1em;
}
#header_menu ul li a img, #sub_menu ul li a img  {
    height: 1.5em;
    width: auto;
    padding: 0.4em 0 0 0;
    margin: 0.5em auto 0.5em auto;
}
#mobile_menu, #sub_mobile_menu {display: none;}

#bclist {
    width: 90%;
    margin: 1em auto;
}
#bclist ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    font-size: 90%;
    padding: 0;
}
#bclist ul li {width: auto;}
#bclist li a:after {
    content: ">";
    margin: 0 0.5em;
}

/* 2段組レイアウト */
.twocolumns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
a.twocolumns {
    border: 1px solid rgba(26, 26, 26, 0.8);
    padding: 10px;
}
.twocolumns a {margin: 0.5em 1em;}

/* イメージ、文章の2段組レイアウト */
.imgcolumn {width: 39%;}
.textcolumn {
    width: 59%;
    height: auto;
}
img.imgcolumn {
    max-width: 300px;
    height: auto;
}
.imgcolumn img {
    width: 96%;
    max-width: 450px;
    margin: 1em auto;
    text-align: center;
}

/* 左右等分の2段組レイアウト */
.equalcolumn {
    width: 49%;
    height: auto;
}

/* 2列の画像タイル */
.img2columntile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
}
.img2columntile img {
    width: 48%;
    max-width: 200px;
    height: 48%;
    max-height: 200px;
    object-fit: cover;
}

/* 3列の画像タイル */
.img3columntile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
}
.img3columntile a, .img3columntile div {
    width: 31%;
    max-width: 720px;
    margin: 10px 1%;
}
.img3columntile a img, .img3columntile div img {width: 100%;}
.img3columntile a h3 {height: 3em;}

/* リンクボタン */
.linkbtn {
    background-color: #666666;
    padding: 1.5em;
    width: 30%;
    margin: 0 auto 0.5em auto;
    color: #ffffff!important;
    text-align: center;
}
.linkbtn::after {
    content: "";
    display: inline-block;
    width: 70px;
    height: 20px;
    background-image: url(./images/linkObj.svg);
    background-size: contain;
    vertical-align: middle;
}

/* ハッシュタグリスト */
.hashlist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 95%;
    width: 96%;
    margin: 1em auto;
}
.hashlist li {
    margin-right: 1em;
}

/* メンテナンス中画像 */
.maintenance {
    width: 100%;
    text-align: center;
}
.maintenance img {
    width: 90%;
    max-width: 1200px;
    height: auto;
    margin: 2em auto;
}

/* テキスト中のリンク */
a.textlink {
    text-decoration: underline;
    display: inline;
}
a.textlink:visited, a.textlink:link {
    color: rgba(26, 26, 26, 0.8);
}

/* footer */
footer {
    background-color: #666666;
    color: #ffffff;
    padding: 1.5em 2em;
    font-size: 100%;
}
footer a:link, footer a:visited {color: #ffffff;}
nav#footermenu {
    font-weight: 500;
    padding-top: 0.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    letter-spacing: 0.1em;
    line-height: 3em;
}
#footermenu ul li a img {
    height: 1.5em;
    width: auto;
    padding: 0;
    margin: 0.5em auto 0.5em auto;
}
#footerprofile {
    margin-top: 1.5em;
    text-align: center;
    font-size: 18px;
}
#footerprofile img {
    width: 20%;
    max-width: 250px;
    margin: 1.5em auto 1em auto;
}
#copyright {
    font-size: 16px;
    text-align: center;
}

/* PageTopBtn */
#to_top {
    display: inline-block;
    position: fixed;
    z-index: 8;
    bottom: 0.5em;
    right: 0.5em;
}
#to_top a {
    width: 100px;
    height: 80px;
    background-image: url("./images/pageTopLink.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

/* print用は非表示 */
.print {display: none;}

/* バナー用 */
.banner {
    width: 70%;
    padding: 0.5em 1em 1em 1em;
    margin: 0 auto 0.5em auto;
}
.banner img {
    width: 100%;
    height: auto;
    margin: 0.5em auto;
}

/* Home settings -------------------------------------------------------------*/
#concept h2 {
    width: 50%;
    max-width: 640px;
    margin: 0 auto;
}

#subtitle {
    font-size: 26px;
    text-align: center;
    line-height: 1.5em;
}

#topworks {background-color: #f4f4f4;}

#news a {
    width: 80%;
    border-width: 0 0 1px 0;
    margin: 0.5em auto;
}
#news a h3 {text-align: left;}

/* Workflow Settings ---------------------------------------------------------*/
#workflow ol {
    width: 85%;
    margin: 1em auto;
}
#workflow .twocolumns {
    margin: 1em auto;
}

/* About Settings ------------------------------------------------------------*/
#gmap {
    width: 85vw;
    max-width: 900px;
    margin: 3em auto 1em auto;
    overflow: hidden;
}
#gmap iframe {
    width: 100%;
}

#staffinfo h3 {
    width: 90%;
    margin: 1em auto;
    text-align: center;
    border-bottom: 1px solid rgba(26, 26, 26, 0.8);
}

#staffinfo .twocolumns {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin: 1em auto;
}
#staffinfo img.imgcolumn {
    margin-top: 2em;
    max-width: 250px;
}

/* Contact Settings ----------------------------------------------------------*/
#contacts {
    width: 80%;
    text-align: center;
    margin: 2em auto;
}
#contacts ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-flow: row wrap;
                    flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    margin: 1em auto;
    padding: 0;
}
#contacts ul li {
    width: 45%;
    height: auto;
    margin: 1em 1%;
    padding: 1em;
    border: 2px solid rgba(26, 26, 26, 0.8);
    border-radius: 5%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: rgba(260, 260, 260, 0.8);
}
#contacts ul li a img {
    width: 150px;
    text-align: center;
    margin: 1em auto;
}
#contacts ul li a p {margin: 1em 1em 0.5em 1em;}
#contacts ul li a span {
    font-size: 120%;
    font-weight: 500;
}

/* WorksDetailSettings -------------------------------------------------------*/
#mainimg {
    width: 80%;
    max-width: 720px;
    margin: 1em auto 1em auto;
}
#mainimg img{
    width: 100%;
    margin: 1em auto;
}
#mainimg p {
    width: 90%;
    margin: 1em auto;
}

#subimgs {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    margin: 1em auto;
}
#subimgs div {
    width: 50%;
    max-width: 720px;
}
#subimgs div p {
    width: 90%;
    margin: 1em auto;
}
#subimgs div img {
    width: 90%;
    margin: 1em auto;
}
#worksdetail .linkbtn {
    width: 90%;
    max-width: 50vw;
    margin: 2em auto 1em auto;
    background-color: #aaaaaa;
}
#worksdetail #shopinfo {
    width: 100%;
}
#worksdetail #shopinfo h2 {
    padding-top: 1em;
    border-top: 1px solid rgba(26, 26, 26, 0.8);
    width: 95%;
    max-width: 960px;
    margin: 1em auto;
}
#worksdetail #shopinfo p {
    width: 90%;
    max-width: 960px;
    margin: 1em auto;
}

/* Blog Detail Settings ----------------------------------------------------- */
.blogprof {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    width: 50%;
    margin: 0.5em auto;
}
.blogprof dt, .blogprof dd {
    width: auto;
    margin: 0;
    border: none;
}

#blogdetail {
    width: 90%;
    margin: 1em auto;
}
#blogdetail span {
    padding-left: 1em;
    font-weight: 400;
    font-size: 100%;
}
#blogdetail .twocolumns {
    width: 90%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
}
#blogdetail .textcolumn {
    width: 50%;
    max-width: 500px;
    padding: 0.5em;
}
#blogdetail .textcolumn p {
    margin: 1em auto;
}
#blogdetail .imgcolumn {
    width: 50%;
    max-width: 500px;
    padding: 1em;
    margin: 2.5em 0;
}
.bloglist {
    padding: 0.5em 2.5em;
    list-style: square;
}
.blogano {
    padding: 0.5em 2.5em;
    font-size: 80%;
}
.blogano li {
    list-style-type: none;
    counter-increment: cnt;
}
.blogano li::before {
    content: "※" counter(cnt) ":　";
}
#blogdetail .linkbtn {
    width: 90%;
    background-color: #aaaaaa;
}
/* 2025/04 住宅省エネ */
.enetable3clumn, .enetable2clumn, .enetable1clumn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
            flex-flow: row wrap;
            justify-content: center;
        align-content: flex-end;
        align-items: stretch;
    list-style: none;
}
.enetable3clumn li, .enetable2clumn li, .enetable1clumn li {
    text-align: center;
    background-color: #eeeeee;
    padding: 0.25em;
    box-sizing: border-box;
    align-content: center;
}
.enetable3clumn li:last-child, .enetable2clumn li:last-child {margin-right: 0;}
.enetable3clumn li strong, .enetable2clumn li strong, .enetable1clumn li strong {
    font-size: 150%;
    display: inline-block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.enetable3clumn li {
    width: calc((100% - 1em)/3);
    margin-right: 0.5em;
}
.enetable2clumn li {
    width: calc((100% - 0.5em)/2);
    margin-right: 0.5em;
}
.enetable1clumn li {
    width: 100%;
    margin-right: 0;
}