@charset "UTF-8";
/* ====================================================
　CSS 3@ Document 2020.11
==================================================== */

/* ######################################################################################

　基本設定

###################################################################################### */
html { font-size: 10px; }
body { font-size: 1.4rem; }
@media screen and (min-width: 768px) {
    html { font-size: 10px; }
    body { font-size: 1.4rem; }
}
@media screen and (min-width: 992px) {
    html { font-size: 10px; }
    body { font-size: 1.4rem; }
}
@media screen and (min-width: 1200px) {
    html { font-size: 10px; }
    body { font-size: 1.4rem; }
}
body { background: #ffffff; color: #111111; font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; }
input, button, textarea, *:before, *:after { font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: #000099; }

.serif { font-family: "游明朝 Medium", "YuMincho Medium", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
.sans { font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; }

.alignL { text-align: left !important; }
.alignC { text-align: center !important; }
.alignR { text-align: right !important; }
.alignM, .alignE { text-align: justify !important; text-justify: inter-ideograph !important; word-wrap: break-word !important; }
.alignM { -moz-text-align-last: justify !important; text-align-last: justify !important; }

img{max-width: 100%; height: auto;}
img.alignright { float: right; margin: 0.5em 0 0.5em 1em; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }

@media print, screen and (min-width: 768px) {
    a:not([href]) {cursor:default;}
        a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

.external:after {
    content: "";
    position: relative;
    top: 2px;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 0.5em;
    background-image: url(../img/contents/solarkadai/icon_external.svg);
    background-size: cover;
}
.external.small:after {
    top: 1px;
    width: 12px;
    height: 12px;
}
.external.gray:after {background-image: url(../img/contents/solarkadai/icon_external_gray.svg);}
.external.white:after {background-image: url(../img/contents/solarkadai/icon_external_white.svg);}

/* ######################################################################################

　フレーム

###################################################################################### */
body{position: relative;}
.contents {
    margin: 0 auto;
    width: 100%;
    max-width: 1273px;
    padding-right: 15px;
    padding-left: 15px;
}
.contents.narrow{
    max-width: 1140px;
    overflow-x: hidden;
}
.pageSolarKadai.reason,
.pageSolarKadai.product {background: #F9F8F8;}

@media print, screen and (min-width: 768px) {
    body{min-width:1273px; overflow-x: hidden;}
    .pageSolarKadai:not(.index) .contentsBase {padding-top: 90px;}
    .contents {
        padding-right: 15px;
        padding-left: 15px;
        max-width: 1430px;
    }
    .contents.pcZero {padding: 0;}
}
@media screen and (max-width: 767px){
    .contents {
        padding-right: 30px;
        padding-left: 30px;
    }
    .contents.spZero {padding: 0;}
    .gnav{display: none!important;}
}

/*** container ***/
@media print, screen and (min-width: 768px) {
    .container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        max-width: 1430px;
        margin: 0 auto;
        padding: 0 15px 60px;
    }
    .container .mainContainer {
        width: 78.5714%;
    }
    .container .subContainer {
        width: 15.7143%;
    }
}
@media screen and (max-width: 767px){
    .container .mainContainer {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}


/* ######################################################################################

　ヘッダ

###################################################################################### */
.header {
    position:relative;
    background: #fff;
    z-index:12;
}
.header .contents.wide {
    display:flex;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
}
.header .contents:after{content: none;}

@media print, screen and (min-width: 768px) {
    .header .contents.wide{
        position: relative;
        z-index: 10000;
        height: 110px;
        align-items:center;
    }
}
@media screen and (max-width: 767px) {
    .header .contents.wide {
        height: 60px;
        padding-top: 0.7143em;
    }
}

/* ====================================================
　ロゴ
==================================================== */
@media print, screen and (min-width: 768px) {
    .header .contents.wide{
        position: relative;
        z-index: 10000;
    }
    .header .logo {
        display: flex;
        flex-direction:column;
        justify-content: center;
        flex: 1;
    }
    .header .logo .copy {
        flex: 1;
        width:100%;
        margin-top:1em;
        padding-left:0;
        color: #005AA4;
        font-weight: bold;
        font-size: clamp(1.0rem, 0.86666vw, 1.3rem);
        line-height: 1.5;
    }
}
@media screen and (max-width: 767px) {
    .header .logo h1 {width: 209px;}
    .header .logo .copy {display: none;}
}


/* ====================================================
　グロナビ
==================================================== */
.gnav {
    display: flex;
    align-items: center;
    justify-content: right;
    width: calc(950px + 0.5em);
    padding-left: 0.5em;
}
.gnav .gnavList {padding-right: 2.1429em;}
.gnav ul {
    display:flex;
    justify-content: flex-end;
    width:100%;

}
.gnav li a {
    color: #000;
    text-decoration: none;
}
.gnav .top li a {font-size: 1.4rem; font-weight: bold;}
.gnav .top li + li  {margin-left: 25px;}
.gnav .bottom {margin-top: 18px;}
.gnav .bottom li {font-size: 1.8rem;}
.gnav .bottom li + li {margin-left: 2.2222em;}


/* ====================================================
　お問い合わせ
==================================================== */
.gnav .contact a {
    display: block;
    width: 220px;
    padding: 20px 0.5em 23px;
    background: #064B8E;
    border-radius: 35px;
    font-size: 1.8rem;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

.contact.thanks .wallBelt.lead p {
    display:flex;
    justify-content:center;
}

@media print, screen and (max-width: 1500px) and (min-width: 768px) {
    /*.header .logo .copy {padding-left: 2.0134vw;}*/
    .gnav {width: max(calc(63.8vw + 0.5em), calc(824px + 0.5em));}
    .gnav .gnavList {padding-right: 1.5vw;}
    .gnav .bottom li + li  {margin-left: 2vw;}
    .gnav .contact a {width: 150px;}
}

/* ######################################################################################

　フッター

###################################################################################### */
.footer {position:relative; background: #3A3A3A; color: #fff;}
@media print, screen and (min-width: 768px) {
    .footer {padding-top: 100px; padding-bottom: 60px;}
}
@media screen and (max-width: 767px) {
    .footer {padding-top: 60px; padding-bottom: 35px;}
}

/* ====================================================
　カタログ請求～低価格&品質保証
==================================================== */
.footer .bannerList .top li a {width: 100%;}

@media print, screen and (min-width: 768px) {
    .footer .bannerList {
        margin-bottom: 70px;
        padding-bottom: 80px;
        border-bottom: 1px solid #707070;
    }
    .footer .bannerList .top {
        margin-left: -40px;
        margin-right: -40px;
    }
    .footer .bannerList .top li {padding: 0 40px;}
    .footer .bannerList .top li a {
        padding-top: 2.4545em;
        padding-bottom: 2.4545em;
        font-size: 2.2rem;
    }
    .footer .bannerList .bottom {margin: 80px -40px 0;}
    .footer .bannerList .bottom li {padding: 0 40px;}
}
@media screen and (max-width: 767px) {
    .footer .bannerList {padding-bottom: 3.5714em;}
    .footer .bannerList .top li + li {margin-top: 1.0714em;}
    .footer .bannerList .top li a {
        padding: 1.6875em 2.5em 1.5625em 1.875em;
        font-size: 1.6rem;
        text-align: left;
    }
    .footer .bannerList .top li a.button.ico.before.arrowR:before {
        right: 1.25em;
        transform: translateX(0);
        width: 1.5em;
        height: 0.75em;
        margin: 0;
    }
    .footer .bannerList .bottom {margin-top: 3.5714em;}
    .footer .bannerList .bottom li + li {margin-top: 1.4286em;}
}

/* ====================================================
    footerNavList
==================================================== */
.footerNavList .fnav li a {
    color: #d8d8d8;
    text-decoration: none;
}

@media print, screen and (min-width: 768px) {
    .footerNavList {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 55px;
    }
    .footerNavList .fnav ul {display: flex;}
    .footerNavList .fnav li + li {margin-left: 50px;}
    .footerNavList .fnav li a {font-size: 1.5rem;}
    .footerNavList .fnav li a:hover {opacity: 0.8;}
}
@media screen and (max-width: 767px) {
    .footerNavList .logo {
        width: 72.2223%;
        margin: 0 auto 2.5em;
    }
    .footerNavList .fnav ul {border-top: 1px solid #707070;}
    .footerNavList .fnav li {border-bottom: 1px solid #707070;}
    .footerNavList .fnav li a {
        display: block;
        padding: 1.3125em 1.25em 1.25em;
        font-size: 1.6rem;
    }
}

/* ====================================================
    productList
==================================================== */
    .footer .productList .item a {color:#fff; text-decoration:none;}
    .footer .productList .item .image img {width:100%; height:auto;}
@media print, screen and (min-width: 768px) {
    .footer .productList {
        display: flex;
        justify-content:center;
        background: #3A3A3A;
        margin:auto;
        max-width:1400px;
    }

    .footer .productList dl.item {width:calc(10/9 * 20%);}
    .footer .productList dl.item:first-of-type {width:calc(10/9 * 50%);}

    .footer .productList dl.item .item { width:50%;}
    .footer .productList dl.item:first-of-type .item { width:calc(20% - 1px);}
    .footer .productList dl.item:first-of-type .item:first-of-type { width:20%;}

    .footer .productList dt {
        background:#4e4e4e;
        border-bottom: 1px solid #3A3A3A;
        padding: 0.5em 0.5em;
        font-size: 1.5rem;
        text-align: center;
    }
    .footer .productList dd {
        display: flex;
        background:#3a3a3a;
        height:90%;
    }
    .footer .productList .item {
        display: block;
        background:#4e4e4e;
/*
        padding-top: 2.13333em;
        padding-bottom: 1.4em;
*/
        font-size: 1.5rem;
        line-height: 1.86667;
        text-align: center;
        text-decoration: none;
        color: #fff;
    }
    .footer .productList .item + .item {margin-left:1px;}
    .footer .productList .item a:hover {opacity: 0.6;}
    .footer .productList .item-3 .item {width: 33.3333%;}
    .footer .productList .item .image {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100px;
    }
    .footer .productList .item p {font-size:1.1rem; text-align:left; padding:0 0.5em 0; line-height:1.1;}

    .footer .productList .item p span {display:block;}
    .footer .productList .item p span + span {margin-top:0.75em;}

    .footer .productList .item p br:last-of-type {display:none;}
}
@media screen and (max-width: 767px) {
    .footer .productList {display: none;}
}

/* ====================================================
    footerLink
==================================================== */
.footerLink {}
.footerLink .footerLink__list a {
    text-decoration: none;
    color: #b0b0b0;
}
.footerLink .copyrignt {
    display: block;
    color: #b0b0b0;
    font-size: 1.3rem;
}

@media print, screen and (min-width: 768px) {
    .footerLink {margin-top: 84px;}
    .footerLink .footerLink__list {display: flex;}
    .footerLink .footerLink__list__item + .footerLink__list__item {margin-left: 34px;}
    .footerLink .copyrignt {margin-top: 60px;}
}
@media screen and (max-width: 767px) {
    .footerLink {margin-top: 4.6429em;}
    .footerLink .footerLink__list__item + .footerLink__list__item {margin-top: 1.7143em;}
    .footerLink .copyrignt {
        margin-top: 6.9231em;
        text-align: center;
    }
}

/* ######################################################################################

　サブカラム

###################################################################################### */
/*** lineUp ***/
.container .subContainer .lineUp {background: #064B8E;}
.container .subContainer .lineUp .lineupTitle {
    margin-bottom: 0;
    border-bottom: 1px solid #2b669f;
    color: #fff;
    text-align: center;
    font-weight: 600;
}
.container .subContainer .lineUp dt,
.container .subContainer .lineUp dd a {
    color: #fff;
    text-decoration: none;
}
.container .subContainer .lineUp dt {
    border-bottom: 1px solid #2b669f;
}
.container .subContainer .lineUp dd {
    border-bottom: 1px solid #2b669f;
}
.container .subContainer .lineUp dd li {position: relative; color:#fff;}
.container .subContainer .lineUp dd a {text-decoration:underline;}
.container .subContainer .lineUp dd a:before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
}

@media print, screen and (min-width: 768px) {
    .container .subContainer {padding-bottom: 60px;}
    .container .subContainer .lineUp .lineupTitle {
        padding: 15px 0.5em 16px;
        font-size: 1.3rem;
    }
    .container .subContainer .lineUp dt {
        padding: 12px 12px 15px;
        font-size: 1.3rem;
    }
    .container .subContainer .lineUp dd {padding: 12px 12px 22px;}
    .container .subContainer .lineUp dd > ul > li{font-size: 1.3rem;}
    .container .subContainer .lineUp dd > ul > li + li{margin-top: 1em;}
    .container .subContainer .lineUp dd .productList{margin-top: 0.5em;}
    .container .subContainer .lineUp dd .productList li {padding-left: 16px;}
    .container .subContainer .lineUp dd li + li {margin-top: 2px;}
    .container .subContainer .lineUp dd a {font-size: 1.2rem; text-decoration: none;}
    .container .subContainer .lineUp dd a:hover {opacity: 0.6;}
}
@media screen and (max-width: 767px) {
    .container .subContainer {padding: 30px 30px;}
    .container .subContainer .lineUp .lineupTitle {
        padding: 1em 0.5em;
        font-size: 1.8rem;
    }
    .container .subContainer .lineUp dt {
        padding: 1em 0.75em;
        font-size: 1.6rem;
    }
    .container .subContainer .lineUp dd {padding: 1.5em 1em 1.5em;}
    .container .subContainer .lineUp dd > ul > li + li{margin-top: 1.25em;}
    .container .subContainer .lineUp dd .productList{margin-top: 0.5em;}
    .container .subContainer .lineUp dd .productList li {padding-left: 1.5em;}
    .container .subContainer .lineUp dd li + li {margin-top: 0.5em;}
    .container .subContainer .lineUp dd a {font-size: 1.5rem; text-decoration: none;}
}

/*** bannerList ***/
@media print, screen and (min-width: 768px) {
    .container .subContainer .bannerList {margin-top: 30px;}
    .container .subContainer .bannerList li + li {margin-top: 10px;}
}
@media screen and (max-width: 767px) {
    .container .subContainer .bannerList {margin-top: 2em; display: none;}
    .container .subContainer .bannerList li + li {margin-top: 0.75em;}
    .container .subContainer .bannerList li img {width: 100%; height: auto;}
}