@charset "utf-8";
/*
 * 
 * Copyright 2021 マサクリエイツ
 * https://www.masa-cr.com/
 *
 */
/* ===============================
=====================  初期設定  */
html {
	line-height: 1.5;
	font-size:16px;
	font-family: 'Bai Jamjuree', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	color:#484848;
	background:url('../images/back_01.png') repeat top #cee2d1;
}
blockquote {border:dotted 1px #999}
dl {border:solid 1px #ccc}
table {border-top:solid 1px #ddd}
caption {background: #999;color: #fff}
th {background: #f6f6f6;border-bottom:solid 1px #ddd;padding:1em .8em;}
td {background:#fff;border-bottom:solid 1px #ddd;padding:1em .8em;}
hr {color:#ccc;background-color:#ccc}
fieldset {border:1px solid #ccc}
a {text-decoration:underline;color:#06c}
a:visited {text-decoration:;color:#609}
a:hover {text-decoration:none;color:;}
a:active {text-decoration:underline;color:#f30}


/* ===============================
=====================  ボックス  */
/***** レスポンシブbox *****/
@media screen and (min-width: 900px), print {
	.box2-a, .box2-b {width:47.5%}/* 2等分 */
	.box3-a, .box3-b, .box3-c {width:30%}/* 3等分 */
	.box4-a, .box4-b, .box4-c, .box4-d {width:21.25%}/* 4等分 */
	.box64-a, .box46-b {width:57%}/* 6:4の6 */
	.box64-b, .box46-a {width:38%}/* 6:4の4 */
	.box73-a, .box37-b {width:66.5%}/* 7:3の7 */
	.box73-b, .box37-a {width:28.5%}/* 7:3の3 */
	.box2-a,
	.box3-a, .box3-b,
	.box4-a, .box4-b, .box4-c,
	.box64-a,
	.box46-a,
	.box73-a,
	.box37-a {float:left}
	.box2-b,
	.box3-c,
	.box4-d,
	.box64-b,
	.box46-b,
	.box73-b,
	.box37-b {float:right}
	.box3-a,
	.box4-a, .box4-b {margin-right:5%}
}

/***** grid *****/
.grid01, .grid02, .grid03, .grid04, .grid05, .grid06, .grid07, .grid08, .grid09, .grid10, .grid11 {
	float:left;
	margin:0;
	padding:0;
}
.grid01 {width:8.333%}
.grid02 {width:16.666%}
.grid03 {width:25%}
.grid04 {width:33.333%}
.grid05 {width:41.666%}
.grid06 {width:50%}
.grid07 {width:58.333%}
.grid08 {width:66.666%}
.grid09 {width:75%}
.grid10 {width:83.333%}
.grid11 {width:91.666%}
.gridFirst {margin-left:0;clear:left}



/* ===============================
=====================  共通設定  */
/***** フォントサイズ *****/
.fs_5l {font-size:1.5em}/* 24 */
.fs_4l {font-size:1.25em}/* 20 */
.fs_3l {font-size:1.1875em}/* 19 */
.fs_2l {font-size:1.125em}/* 18 */
.fs_l {font-size:1.0625em}/* 17 */
.fs_m {font-size:1em}/* 16 */
.fs_s {font-size:.9375em}/* 15 */
.fs_2s {font-size:.875em}/* 14 */
.fs_3s {font-size:.8125em}/* 13 */
.fs_4s {font-size:.75em}/* 12 */
@media screen and (min-width: 560px), print {
    .fs_5l {font-size:2em}/* 32 */
    .fs_4l {font-size:1.875em}/* 30 */
    .fs_3l {font-size:1.5em}/* 24 */
    .fs_2l {font-size:1.25em}/* 20 */
    .fs_l {font-size:1.125em}/* 18 */
}

/***** 文字色 *****/
.txc_01,a.txc_01 {color:#2ea252;}/* 緑 */
.txc_02,a.txc_02 {color:#006e3f;}/* 濃い緑 */
.txc_03,a.txc_03 {}/*  */

/***** 背景 *****/
.bgc_01 {background-color:#cee2d1;}/* 薄い緑 */
.bgc_02 {background-color:#006e3f;}/* 濃い緑 */
.bgc_03 {}/*  */

/***** 見出し *****/
.h_01 {
    color:#006e3f;
    font-weight:normal;
    font-size:2.8em;
    line-height:1;
    margin:0 0 .1em;
}
@media screen and (min-width: 560px), print {
    .h_01 {
        font-size:3.4em;
    }
}
@media screen and (min-width: 900px), print {
    .h_01 {
        font-size:4em;
    }
}
.h_02::before,
.h_02::after {
    content:"｜";
}
.h_02::before {
    margin-right:.5em;
}
.h_02::after {
    margin-left:.5em;
}
.h_03 {}

/***** ボタン *****/
.btn_01 a, a.btn_01,
.btn_02 a, a.btn_02,
.btn_03 a, a.btn_03 {
    display:inline-block;
    text-decoration:none;
    line-height:1.4;
    position:relative;
}
.btn_01.dp_block a, a.btn_01.dp_block,
.btn_02.dp_block a, a.btn_02.dp_block,
.btn_03.dp_block a, a.btn_03.dp_block {
    display:block;
    text-align:center;
}
.btn_01 a, a.btn_01 {
    color:#006e3f;
    border:solid 1px #006e3f;
    border-radius:.8em;
    padding:1em;
}
.btn_01 a:hover, a.btn_01:hover {
    background:#007f41;
    color:#fff;
    border-color:#007f41;
}
.btn_02 a, a.btn_02 {}
.btn_03 a, a.btn_03 {}

/***** リスト *****/
.list_01 {}
.list_02 {}
.list_03 {}

/***** その他 *****/


/* ===============================
===============  ローディング画面  */
#loading {
    width:100vw;
    height:100vh;
    transition:all 1s;
    background-color:#fff;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
}
.spinner {
    width:100px;
    height:100px;
    margin:auto;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#ddd;
    border-radius:100%;
    animation:sk-scaleout 1.0s infinite ease-in-out;
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
    0% {
        transform:scale(0);
    } 100% {
        transform:scale(1.0);
        opacity:0;
    }
}
.loaded {
    opacity:0;
    visibility:hidden;
}


/* ===============================
====================  レイアウト  */
.inner {
    padding-left:4%;
    padding-right:4%;
}
.mxW {
    max-width:940px;
    margin-left:auto;
    margin-right:auto;
}
.pdLR {
    padding-left:5%;
    padding-right:5%;
}
.pdT {
    padding-top:3em;
}
.pdB {
    padding-bottom:3em;
}
@media screen and (min-width: 560px), print {
    .pdT {
        padding-top:4em;
    }
    .pdB {
        padding-bottom:4em;
    }
}
@media screen and (min-width: 900px), print {
    .inner {
        margin-left:4%;
        margin-right:4%;
    }
    .pdT {
        padding-top:5em;
    }
    .pdB {
        padding-bottom:5em;
    }
}
@media screen and (min-width: 1200px), print {
    .inner {
        margin-left:8%;
        margin-right:8%;
    }
}
@media print {
    #container {
        width:1000px;
    }
}

/* ===============================
======================  header  */
#header .inner {
    padding:1em 0;
}
.headerLogo {
    margin:0 20%;
    padding:0;
    font-size:1em;
    max-width:800px;
    text-align:center;
}
ul.nav {
    margin:20vw 0 0;
    padding:0;
    list-style:none;
    text-align:center;
}
ul.nav li {
    margin:0;
    padding:0;
}
ul.nav li a,
ul.nav > li > span {
    display:block;
    text-decoration:none;
    background:#006e3f;
    color:#fff;
    border-left:solid 1px #fff;
    border-top:solid 1px #fff;
    padding:.8em;
}
ul.nav > li > span {
    color:#cee2d1;
    cursor:default;
}
ul.nav > li > span .fa {
    font-size:.825em;
    vertical-align:.1em;
}
ul.nav li a:hover {
    background:#2ea252;
    color:#fff;
}
ul.nav ul {
    margin:0;
    padding:0;
    list-style:none;
}
ul.nav ul li a  {
    background:#e7f1e8;
    color:#006e3f;
}
@media screen and (min-width: 900px), print {
    #header .inner {
        padding:2em 2%;
    }
    .headerLogo {
        margin:0 auto 1em;
    }
    ul.nav {
        display:block;
        margin:0;
        font-size:0;
        position:relative;
    }
    ul.nav > li {
        display:inline-block;
        width:auto;
        margin:.5em 0;
        padding:0 .6em;
        border-left:solid 1px #484848;
        font-size:16px;
        line-height:1.2;
    }
    ul.nav > li:last-child {
        border-right:solid 1px #484848;
    }
    ul.nav > li a,
    ul.nav > li > span {
        display:inline;
        background:transparent;
        color:#484848;
        padding:0 .2em;
    }
    ul.nav > li > span .fa {
        color:#006e3f;
    }
    ul.nav > li a:hover {
        background:#e7f1e8;
        color:#006e3f;
    }
    ul.nav ul {
        display:none;
        position:absolute;
        width:12em;
        margin-left:-.6em;
        padding-top:.8em;
    }
    ul.nav ul li a {
        display:block;
        background:#006e3f;
        color:#fff;
        padding:.8em;
    }
    ul.nav ul li a:hover {
        background:#2ea252;
        color:#fff;
    }
}

/* ハンバーガーメニュー */
.nav-button {display:block}
.nav-wrap {display:none}
@media screen and (min-width: 900px), print {
	.nav-button {display:none}
    .nav-wrap {display:block !important}
}
@media screen and (max-width: 899px) {
    .nav-button {
        width:30px;
        height:30px;
        position:absolute;
        z-index:101;
        top:9vw;
        right:5%;
        cursor:pointer;
    }
    .nav-button.active {position:fixed}
    .nav-button span {
        transition:all 0.4s;
        display:inline-block;
        width:26px;
        height:2px;
        box-sizing:border-box;
        position:absolute;
        left:4px;
        background:#006e3f;
    }
    .nav-button span:nth-of-type(1) {top:8px}
    .nav-button span:nth-of-type(2) {top:14px}
    .nav-button span:nth-of-type(3) {bottom:8px}
    .nav-button.active span:nth-of-type(1) {
        -webkit-transform: translateY(6px) rotate(-45deg);
        transform: translateY(6px) rotate(-45deg);
    }
    .nav-button.active span:nth-of-type(2) {
        opacity:0;
    }
    .nav-button.active span:nth-of-type(3) {
        -webkit-transform: translateY(-6px) rotate(45deg);
        transform: translateY(-6px) rotate(45deg);
    }
    .nav-wrap {
        width:100%;
        height:100%;
        position:fixed;
        z-index:100;
        left:0;
        top:0;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior:none;
        background:#fff;
    }
	.nav-wrap.open {
	    display:block;
	    opacity:0;
	    animation-name:fadein;
	    animation-duration:.3s;
	    animation-timing-function:ease-out;
	    animation-fill-mode:forwards;
	}
	@keyframes fadein {
	    0% {
	       opacity: 0;
	       transform: translateY(16px);
	    }
	    100% {
	       opacity: 1;
	       transform: translateY(0);
	    }
	}
	.nav-wrap.close {display:none}
    .nav-wrap .nav {position:relative}
}


/* ===============================
======================  content */
img.tel-number {
    vertical-align:text-bottom;
    margin-left:.5em;
}
.fa-caret-right {
    margin-right:.25em;
}
.pageTitleWrap {
    background-image:url('../images/back_title.jpg');
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    padding-top:4em;
    padding-bottom:4em;
}
.pageTitle {
    max-width:600px;
    margin:0 auto;
    padding:1em;
    background:rgba(255,255,255,.8);
    border:solid .5em rgba(255,255,255,.6);
    text-align:center;
}
.pageTitle .h_01 {
    font-size:2em;
}
.pageTitle h1 {
    margin:0;
    line-height:1.2;
    font-weight:normal;
    font-size:1em;
    color:#006e3f;
}
@media screen and (min-width: 660px), print {
    .pageTitleWrap {
        padding-top:6em;
        padding-bottom:6em;
    }
    .pageTitle {
        padding:1.5em;
        border-width:1em;
    }
    .pageTitle .h_01 {
        font-size:2.5em;
    }
    .pageTitle h1 {
        font-size:1.125em;
    }
}
@media screen and (min-width: 900px), print {
    .pageTitle {
        padding:2em;
    }
    .pageTitle .h_01 {
        font-size:3.5em;
    }
}

/* ===============================
======================  footer  */
#footer .btn_01 span {
    display:inline-block;
}
#pagetop {
    position:fixed;
    width:54px;
    right:10px;
    bottom:0;
}

/* ===============================
=====================  個別設定  */
/* index */
.indexCatch {
    background:url('../images/photo_index_catch.jpg') no-repeat center center;
    background-size:cover;
    padding:100px 6%;
}
.indexCatch>div {
    max-width:800px;
    margin:auto;
    padding:1em 4%;
    box-sizing:border-box;
    background:rgba(255,255,255,.9);
}
.indexCatch>div:last-child {
    background:#006e3f;
}
.indexCatch .fs_l {
    font-size:1em;
}
@media screen and (min-width: 660px), print {
    .indexCatch .fs_l {
        font-size:1.125em;
    }
}
.topicsLink {
    display:flex;
    justify-content:space-between;
    align-items: center;
    flex-wrap:wrap;
    background:#cee2d1;
    padding:5%;
    text-align:center;
    margin-bottom:3em;
}
.topicsLink .h_01 {
    font-size:1.666em;
    width:100%;
    margin-bottom:5%;
}
.topicsLink a {
    display:block;
    background:#fff;
    color:#006e3f;
    width:100%;
    border-radius:.3em;
    box-shadow:.1em .1em .3em rgba(0,0,0,.3);
    text-align:center;
    text-decoration:none;
    box-sizing:border-box;
    padding:1.25%;
    display:flex;
    justify-content:space-between;
    align-items: center;
}
.topicsLink a:last-child {
    margin-top:3%;
}
.topicsLink a img {
    width:45%;
}
.topicsLink a span {
    width:63.5%;
}
@media screen and (min-width: 480px), print {
    .topicsLink {
        padding:2%;
    }
    .topicsLink a {
        width:49%;
    }
    .topicsLink a:last-child {
        margin-top:0;
    }
}
@media screen and (min-width: 660px), print {
    .topicsLink .h_01 {
        width:20%;
        margin-bottom:0;
    }
    .topicsLink a {
        width:38%;
    }
}
.servicesItemWrap {
    background-position:top -20px center;
    background-repeat:no-repeat;
    background-size:contain;
    margin-bottom:4em;
    padding-top:200px;
}
.servicesItem {
    background:#fff;
    padding-top:.5em;
}
.servicesItemWrap.solar-battery {
    background-image:url('../images/photo_solar-battery.jpg');
}
.servicesItemWrap.storage-battery {
    background-image:url('../images/photo_storage-battery_2.jpg');
}
.servicesItemWrap.all-electoric-house {
    padding-top:0;
}
.h_01.all-electoric-house {
    padding-top:50%;
    background:url('../images/photo_all-electoric-house.jpg') no-repeat top;
    background-size:contain;
}
.servicesItemWrap.reform {
    background-image:url('../images/photo_reform.jpg');
}
@media screen and (min-width: 480px), print {
    .servicesItemWrap {
        padding-top:0;
    }
    .servicesItem {
        min-height:308px;
        padding-top:0;
    }
    .servicesItemWrap.solar-battery {
        background-position:right center;
    }
    .solar-battery .servicesItem {
        margin-right:50%;
        padding-right:5%;
    }
    .servicesItemWrap.storage-battery {
        background-position:left center;
    }
    .storage-battery .servicesItem {
        margin-left:50%;
        padding-left:5%;
    }
    .h_01.all-electoric-house {
        max-width:10em;
        background:none;
        padding-top:0;
    }
    .servicesItemWrap.all-electoric-house {
        background-image:url('../images/photo_all-electoric-house.jpg');
        background-position:right center;
    }
    .all-electoric-house .servicesItem {
        margin-right:50%;
        padding-right:5%;
        min-height:180px;
    }
    .servicesItemWrap.reform {
        background-position:left center;
    }
    .reform .servicesItem {
        margin-left:50%;
        padding-left:5%;
    }
}
.linksList {
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:flex-start;
    flex-wrap: wrap;
    gap:4%;
}
.linksList li {
    width:48%;
    margin:0 0 4%;
    padding:1em 1em .5em;
    box-sizing:border-box;
    background:#cee2d1;
}
.linksList li h3 {
    font-weight:normal;
    font-size:1em;
    margin:1.2em 0 1em;
}
.linksList li p {
    font-size:.886em;
    line-height:1.4;
}
@media screen and (min-width: 660px), print {
    .linksList {
        gap:2.666%;
    }
    .linksList li {
        width:23%;
    }
}

#pageSolar-battery .pageTitleWrap {
    background-image:url('../images/solar-battery_title.jpg');
}
#pageStorage-battery .pageTitleWrap {
    background-image:url('../images/storage-battery_title.jpg');
}
#pageAll-electoric-house .pageTitleWrap {
    background-image:url('../images/all-electoric-house_title.jpg');
}
#pageReform .pageTitleWrap {
    background-image:url('../images/reform_title.jpg');
}
#pageExample .pageTitleWrap {
    background-image:url('../images/example_title.jpg');
}
#pageVoice .pageTitleWrap {
    background-image:url('../images/voice_title.jpg');
}

#pageCompany .pageTitle .h_01 {
    font-size:1.8em;
}
@media screen and (min-width: 660px), print {
    #pageCompany .pageTitle .h_01 {
        font-size:2.5em;
    }
    #pageCompany .pageTitle .txc_01 {
        font-size:1.125em;
    }
}
@media screen and (min-width: 900px), print {
    #pageCompany .pageTitle .h_01 {
        font-size:3em;
    }
}

.voiceItem {
    background:#f9f5ee;
}
.voiceItem .voicePerson img {
    width:80px;
}
.voiceItem .voiceImages {
    display:flex;
    gap:2%;
}
.voiceItem .voiceImages img {
    max-height:340px;
}
@media screen and (min-width: 660px), print {
    .voiceItem .voiceDetailWrap {
        display:flex;
    }
    .voiceItem .voicePerson {
        text-align:center;
        width:22%;
        margin-right:4%;
    }
    .voiceItem .voicePerson img {
        width:166px;
    }
    .voiceItem .voiceDetail {
        flex:1;
    }
}

::-webkit-input-placeholder {color:#999}
:-moz-placeholder {color:#999}
.formArea {
    border:solid 1px #ddd;
    background:#f6f6f6;
    max-width:800px;
    padding:1em 5%;
}
.formArea table {
    border-collapse:collapse;
    width:100%;
}
.formArea tr {
    border-bottom:solid 1px #ddd;
}
.formArea th,
.formArea td {
    vertical-align:middle;
    text-align:left;
    margin:0;
    padding:1em 0;
}
.formArea th {
    font-weight:bold;
    width:10em;
}
.formArea input[type="text"],
.formArea input[type="password"],
.formArea input[type="email"],
.formArea input[type="tel"],
.formArea select,
.formArea textarea {
    border:solid 1px #ddd;
    background:#fff;
    color:#222;
    padding:.6em .4em;
    box-shadow:none;
    font-family: sans-serif;
}
.formArea input[type="text"],
.formArea input[type="password"],
.formArea input[type="email"],
.formArea input[type="tel"],
.formArea textarea {
    box-sizing:border-box;
    width:100%!important;
    max-width:100%;
}
.formArea button,
.formArea input[type="submit"],
.formArea input[type="reset"],
.formArea input[type="button"] {
	-webkit-appearance:none;
    padding:.8em 1.2em;
    border:none;
    border-radius:.2em;
    background:#ddd;
    color:#222;
}
.formArea button:hover,
.formArea input[type="reset"]:hover,
.formArea input[type="button"]:hover {
    background:#ccc;
    color:#000;
}
.formArea button.submit,
.formArea input[type="submit"] {
    background:#0b3;
    color:#fff;
}
.formArea input[type="submit"]:hover {
    background:#0d3;
}
.formArea textarea {
    height:300px!important;
}
@media screen and (max-width: 899px) {
    .formArea th,
    .formArea td {
        display:block;
    }
    .formArea th {
        width:100%;
        padding-bottom:0;
    }
}

.contactBlock {
	margin-bottom:3em;
	padding:2em 5%;
	border:solid 2px #2ea252;
	border-radius:.6rem;
	color:#2ea353;
}
.contactBlock dl {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	padding:0;
	border:none;
}
.contactBlock dl dt,
.contactBlock dl dd {
	margin-bottom:1rem;
}
.contactBlock dl dt {
	display:flex;
	justify-content:center;
	align-items:center;
	width:12%;
	min-width:1.2em;
	border:solid 2px #2ea252;
	border-radius:.3rem;
	font-size:2em;
}
.contactBlock dl dd {
	display:flex;
	align-items:center;
	width:83%;
	min-height:4.5em;
}
.contactBlock dl dd span {
	display:inline-block;
}
.contactBlock .btn_01 {
	display:flex !important;
	justify-content:space-between;
	align-items:center;
	padding:.3em .6em;
	border:none;
	background:#2ea252;
	color:#fff;
	white-space: nowrap;
}
.contactBlock .btn_01::before {
	content:url('../images/icon_click_left.png');
}
.contactBlock .btn_01::after {
	content:url('../images/icon_click_right.png');
}
@media screen and (min-width: 560px), print {
	.contactBlock dl dt {
		font-size:3em;
	}
}