/*
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:33
    Author     : yuka
*/

/* Basic settings ------------------------------------------------------------*/
body {
    font-size: 15px;
    line-height: 1.5em;
}
section {padding: 0.5em 0px;}
div {margin: 0.5em auto 1em auto;}
p {margin: 0.5em;}
h1, h2, h3, h4 {margin: 0.5em;}
.mobile {display: inline-block;}
.pc {display: none;}
.notmobile {display: none;}

#header_menu, #sub_menu {display: none;}
#mobile_menu, #sub_mobile_menu {
    display: block;
    width: 100%;
    height: 3em;
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: 500;
    z-index: 10;
    position: relative;
    padding: 0.6em 0 0 1.2em;
    background-color: rgba(255, 255, 255, 0.8);
    background-image: url(./images/menuObj.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
#mobile_menu {margin: -3em 0 0 0;}
#sub_mobile_menu {margin: 0;}
#mobile_menu ul, #sub_mobile_menu ul {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
    border-width: 0 1px 1px 1px;
    border-color: rgba(26, 26, 26, 0.8);
    background-color: #ffffff;
    position: absolute;
    left: 0;
    top: 3em;
    width: 100%;
    border-bottom: 2px solid rgba(26, 26, 26, 0.8);
    margin: 0 0 1em 0;
}
#mobile_menu ul li, #sub_mobile_menu ul li {
    width: 100%;
    line-height: 1.5em;
    text-align: center;
    display: block;
    position: relative;
    margin: 0.5em 0;
    padding: 0;
}
#mobile_menu ul li a, #sub_mobile_menu ul li a {
    height: auto;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0.5em 0;
}
#mobile_menu ul li a img, #mobile_menu img, #sub_mobile_menu ul li a img, #sub_mobile_menu img {
    height: 1.5em;
    width: auto;
    padding: 0;
}
#mobile_menu ul li a img, #sub_mobile_menu ul li a img {margin: 0 auto;}
.mobileMenu_active {background-image: url(./images/menu_exit.svg);}

#footermenu ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    text-align: center;
    line-height: 2em;
    padding: 0;
}
#header_menu ul li a, #footermenu ul li a{padding: 0 20px;}

/* 2段組レイアウトは上下に */
.twocolumns {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    width: 94%;
}
a.twocolumns {padding: 10px;}
.twocolumns a {margin: 0.5em;}

/* 左にイメージ、右にテキストの2段組は上下にレイアウト */
.imgcolumn {width: 96%;}
.textcolumn {width: 96%;}

/* 左右等分の2段組レイアウトは上下に */
.equalcolumn {width: 100%;}

/* 2列の画像タイル */
.img2columntile img {
    width: 48%;
    margin: 0.5em 1%;
}

/* 3列の画像タイルは1列の画像タイルに */
.img3columntile {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    width: 96%;
    margin: 0.5em auto;
}
.img3columntile a, .img3columntile div {
    width: 98%;
    margin: 1em auto;
}
.img3columntile a h3 {height: auto;}

/* リンクボタン */
.linkbtn {width: 70%;}

footer {font-size: 18px;}
#footerprofile {
    margin-top: 1em;
    font-size: 15px;
}
#footerprofile img {width: 50%;}
#copyright {font-size: 14px;}

#to_top a {
    width: 80px;
    height: 64px;
}

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

/* バナー用 */
.banner {
    width: 90%;
}

/* Home settings -------------------------------------------------------------*/
#concept h2 {width: 100%;}

#subtitle {font-size: 20px;}

/* Workflow Settings ---------------------------------------------------------*/
#workflow ol {
    width: 100%;
    padding: 0;
}
#workflow .twocolumns {margin: 1em auto;}
#workflow .imgcolumn {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}
#workflow .textcolumn {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    max-width: 300px;
}

/* Contact Settings ----------------------------------------------------------*/
#contacts ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    padding: 0;
}
#contacts ul li {
    width: 98%;
    margin: 1em auto;
}

#gmap {height: 85vw;}

/* Works Detail Settings -----------------------------------------------------*/
#mainimg {
    width: 100%;
    max-width: 720px;
    text-align: center;
}
#mainimg p {
    text-align: left;
    width: 90%;
    margin: 0.5em auto;
}
#mainimg img {
    width: 90%;
    margin: 0.5em auto;
}

#subimgs {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
}
#subimgs div {width: 100%;}
#subimgs div img {margin: 0.5em auto;}

/* Blog Detail Settings ----------------------------------------------------- */
#blogdetail .textcolumn {width: 100%;}
#blogdetail .imgcolumn {
    width: 100%;
    margin: 0;
}
#blogtxt1{-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1;}
#blogimg1{-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2;}
#blogtxt2{-webkit-box-ordinal-group: 4;-ms-flex-order: 3;order: 3;}
#blogimg2{-webkit-box-ordinal-group: 5;-ms-flex-order: 4;order: 4;}

/* 2025/04 住宅省エネ */
.enetable3clumn li {width: calc((100% - 1em)/2);}
.enetable3clumn li:nth-child(2){margin-right: 0;}
.enetable3clumn li:nth-child(3) {margin-top: 0.5em;}