@charset "UTF-8";
/* CSS Document */

@import url("./tools.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


/* =============================

Common

============================= */
/*
html { scroll-behavior: smooth; }
*/
body {
    width: 100%; height: 100%;
    margin: 0;
    padding: 0;

    font-family: 'Noto Sans JP', sans-serif;
    color: #000;
}

img.hiReso {
    display: block;
    width: 100%;
}

.zeh-wrapper {
    background-image: url(../img/common_hero_image.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size:contain;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}
@media screen and (max-width:768px) {
    .zeh-wrapper {
        background-image: url(../img/common_hero_image_sp.webp);
        padding-bottom: 80px;
    }
}


/* 標準ボタン */
.basicBtn {
  display: inline-block;
  padding: .6em 2em;
  background-image: none;
  background-color: #296C51;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4em;
  text-decoration: none;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  -webkit-appearance: none;
  box-shadow: 1px 1px 3px 0 rgba(0,0,0,.2);
  position: relative;
}
.basicBtn:hover,
.basicBtn:focus {
  outline: none;
}
.basicBtn:hover { background-color: #1F513D; }
.basicBtn::-moz-foucus-inner {
  padding: 0;
  border: none;
}
.basicBtn.arrow { padding-right: 2.5em; }
.basicBtn.arrow::after {
  position: absolute;
  content: "\f105";
  font-family: 'FontAwesome';
  font-weight: 900;
  top: 50%;
  right: 10px;
  left: auto;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.basicBtn.jumbo {
  padding: .6em 6em!important;
  font-size: 28px!important;
}

.basicBtn.yellow { background-color: #EDC640; }
.basicBtn.yellow:hover { background-color: #fae190; }
.basicBtn.orange { background-color: #E0A372; }
.basicBtn.orange:hover { background-color: #e0ba9c; }
.basicBtn.blue { background-color: #7eaedf; }
.basicBtn.blue:hover { background-color: #aed0f2; }
.basicBtn.green { background-color: #87b960; }
.basicBtn.green:hover { background-color: #b7dd9a; }


.basicBtn.large { font-size: 21px; margin: 15px 0;}
.basicBtn.subsidyBtn1,
.basicBtn.subsidyBtn2 { width: 300px;}


.basicBtn.detailBtn {
    margin: 60px 0;
}

@media screen and (max-width:768px) {
    .basicBtn.jumbo {
        padding: .6em 2em!important;
        font-size: 16px!important;
    }
    .basicBtn.subsidyBtn1,
    .basicBtn.subsidyBtn2 { width: 75%; margin: 0 0 10px}
    .basicBtn.subsidyBtn2 { margin: 0 0 50px;}
}




/* =============================

Hero

============================= */
#hero {
    position: relative;
    height: 500px;
}
#hero img.heroLogo {
    position: absolute;

    width: 200px;

    top: 170px;
    left: 50%;
    margin-left:-100px;
}
#hero h1 {
    position: absolute;

    width: 670px;
    height: 55px;

    top: 420px;
    left: 50%;
    margin-left:-355px;

    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    
    background-image: url(../img/common_main_copy.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size:100%;
}
#hero a.seinou {
    position: absolute;
    top: 320px;
    right: 50%;
    margin-right: -480px;
}

@media screen and (max-width:768px) {
    #hero { height:  570px; }
    #hero img.heroLogo,
    #hero h1 { display: none; }
    #hero a.seinou {
        top: 490px;
        margin-right: -140px;
    }
}


/* =============================

Navigation

============================= */
/* --- ナビ本体 --- */
.navbar {
    position: relative;
    width:100%;
    background: rgba(255,255,255,0.8);
    transition: background 0.3s ease, box-shadow 0.3s ease;
    z-index:1000;
}
.navbar.fixed {
    position: fixed;
    top:0; left:0;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.nav-container {
    max-width: 1120px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* 共通メニュー */
.nav-menu { list-style:none; display:flex; }
.nav-parent { position:relative; }

/* 親リンク */
.parent-header { display:block; }
.parent-link {
    display:block;
    padding:0.2rem 2rem;
    font-size: 18px;
    color: #296C51;
    text-decoration:none;
    transition: color 0.2s ease;
    border-left: 1px solid #296C51;
}
.parent-link:last-child {
    border-right: 1px solid #296C51;
}
.parent-link:hover { color:#007acc; }

.parent-header.selected > a  {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #78B041;
    text-underline-offset: 5px;
}

/* 子メニュー（ドロップダウン） */
.child-menu {
    position:absolute;
    top:100%; left:0;
    list-style:none;
    padding: 15px 30px;
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:opacity 0.3s ease, transform 0.3s ease;
    background:#EDFAC0;
    border-radius: 10px;
}
.nav-parent:hover > .child-menu {
    opacity:1; transform:translateY(0);
    pointer-events:auto;
}
.child-menu li .child-link {
    display:block;
    padding: 10px 40px;
    white-space:nowrap;
    font-size: 16px;
    color: #3c3c3c;
    text-decoration:none;
    transition: color 0.2s ease;
    text-indent: -.6em;
    padding-left: 1em;
}
.child-link:hover { color: #007acc!important; }
.child-menu li .child-link i {
    color: #78B041;
}

/* ハンバーガー */
.burger {
    display:none;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
    z-index:1100;
}
.burger span {
    display:block; width:25px; height:3px;
    background:#333;
    transition:transform 0.3s ease, opacity 0.3s ease;
}
.burger.open span:nth-child(1) {
    transform:rotate(45deg) translate(5px,5px);
}
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) {
    transform:rotate(-45deg) translate(5px,-5px);
}

/* 子トグルはデフォルト隠す */
.child-toggle { display:none; }

/* モバイル設定 */
@media (max-width:768px) {
    .nav-container {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background-color: #F2F2F2;
    }
    .burger {
        display:flex;
    }

    .nav-menu {
        position:absolute;
        top:100%;
        left:0;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background:#fff;
        flex-direction:column;
        max-height:0;
        overflow:hidden;
        transition:max-height 0.4s ease;
    }
    .nav-menu.open { max-height:100vh; }

    .nav-parent { display: inline; }

    /* 親ヘッダーを flex に */
    .parent-header {
        display:flex;
        justify-content:space-between;
        align-items:center;
        border-top: 1px solid #caeddf;
    }
    .parent-link {
        flex:1;
        padding:1rem;
        border-left: none;
        border-right: none;
    }
    .nav-parent:last-child .parent-header {
        border-bottom: 1px solid #caeddf;
    }   

    /* 子トグルを表示 */
    .child-toggle {
        display:inline-block;
        background:none; border:none;
        padding:1rem; font-size:1rem; line-height:1;
        cursor:pointer;
        transition:transform 0.3s ease;
    }
    .child-toggle.open {
        transform:rotate(180deg);
    }

    /* アコーディオン子メニュー本体 */
    .child-menu {
        position: static;
        margin: 0;           /* ← 追加 */
        padding: 0;          /* ← 追加 */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        border-radius: 0;
    }
    .child-menu.open {
        max-height: 500px;   /* ← 必要に応じ調整 */
    }

    /* 子リンクにインデント＆タッチ領域 */
    .child-menu li .child-link {
        display: block;
        padding: 1rem 1rem 1rem 2rem;  /* 左パディングを広めに */
    }
}




/* 追従バナー */
.scroll-banner {
    position: fixed;
    z-index: 9999;
    transition: all 0.5s ease;
}

.scroll-banner a {
    display: block;
    transition: all 0.5s ease;
    opacity: 0;
    pointer-events: none;
}

.scroll-banner a.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.scroll-banner a.hidden {
    opacity: 0;
    pointer-events: none;
}

.scroll-banner a picture img {
  width: 60px;
  height: 300px;
  object-fit: cover;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  border-radius: 10px 0 0 10px;
}

/* PC表示：縦に右側固定 */
@media screen and (min-width: 769px) {
    .scroll-banner {
    right: 0;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    }

    .scroll-banner a {
    transform: translateX(100px); /* 非表示位置 */
    }
}

/* スマホ表示：横に下部固定 */
@media screen and (max-width: 768px) {
    .scroll-banner {
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.9);
    }

    .scroll-banner a picture img {
        width: 40vw;
        height: auto;
        border-radius: 5px;
    }

    .scroll-banner a {
        transform: translateY(50px); /* 非表示位置 */
    }

    .scroll-banner a.visible {
        transform: translateY(0);
    }

    .scroll-banner a.hidden {
        transform: translateY(50px);
    }
}


/* =============================

本文エリア

============================= */
#container,
#wpmContainer {
    width: 85%!important;
    margin: 0 auto;
}

                /* タイトル エリア */
                section.title {
                    text-align: center;
                    border-bottom: 1px solid #707070;
                    padding: 30px 0;
                }
                section.title h1 em { color: #265B72; }


                

                /* 章タイトル */
                #container > h2,
                #wpmContainer > h2 {
                    font-size: 24px;
                    font-weight: bold;
                    letter-spacing: 0.1em;
                    text-align: center;
                    margin: 80px 0 50px;
                }
                @media screen and (max-width:768px) {
                    #container > h2,
                    #wpmContainer > h2 { font-size: 18px; }
                }

/* 本文 */
.blocks > h3 {
    font-size: 28px;
    line-height: 1.4em;
    font-weight: bold;
    margin-bottom: 15px;
}
.blocks p {
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0em;
    line-height: 1.5em;
}
.blocks p > span {
    font-weight: bold;
    margin-right: 15px;
}
.blocks p > em {
    font-size: 0.7em;
}
@media screen and (max-width:768px) {
    .blocks > h3 { font-size: 18px;}
    .blocks p { text-align: left; }
}


.caption {
    font-size: 11px!important;
    line-height: 1.4em!important;
    padding: 0;
    margin: 5px 0 0;
}
.full .caption {
    padding-left: 7.5vw;
    padding-right: 7.5vw;
}
.full .caption.left {
    padding-left: 7.5vw;
    padding-right: 0vw;
}
.full .caption.right {
    padding-left: 0vw;
    padding-right: 7.5vw;
}
.fullBG .full .caption {
    width: 85%;
    margin: 5px auto 0;
    text-align: center;
}

.indent1 {
    padding-left: 1em;
    text-indent: -1em;
}
.indent2 {
    padding-left: 2em;
    text-indent: -2em;
}

.blocks img { width:100%; }

.spacer { display:block; }

.blocks h3 > i,
.blocks p > i {
    /*
    font-weight: bold;
    color:#4d4d4d;
    */
    font-style: normal!important;
    background: linear-gradient(transparent 70%, #FFFF00 70%);
    /*background: linear-gradient(transparent 70%, #fef2d4 70%);*/
}
/*
.blocks p > i {
    background-color: #fce97b;
    font-style:normal;
}
*/
@media screen and (max-width:768px) {
    .spacer { display:none; }
    .full .caption.left { padding-left: 0;}
    .full .caption.right { padding-right: 0;}
}




/* =============================

ブロックパターン

============================= */

/* 親要素をはみ出して画面一杯幅に拡がる */
.blocks.full,
.inner > .full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* 背景のみ親要素をはみ出す */
.fullBG {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 50px 0;
}
.fullBG > .blocks {
    margin: 0 auto;
    max-width: 1200px;
}
.fullBG > .blocks > p {
    padding: 0 7.5vw;
}

.fullBG > .inner {
    width: 85vw;
    max-width: 1200px;
    margin: 0 auto;
}
.inner img {
    width: 100%;
}

/* 親要素をはみ出し背景画像を固定する */
.blocks.fixedBG {
    width: 100vw;
    height: 60vh;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    clip-path: inset(0);
}
.blocks.fixedBG img {
    object-fit: cover;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* 横並びの子要素が親要素をはみ出す */
.blocks.col > div.full {
    width: calc(50vw - 40px);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    margin-bottom: 30px!important;
}

/* 子要素が横並びになる */
.blocks.col { display:flex; flex-wrap:wrap;}
.blocks.col > div:first-child{ margin-right: 40px; }
.blocks.col > div:last-child { margin-left: 40px; }

/* カラム幅 7:3 */
.blocks.col7-3 > div:first-child {width: calc(70% - 40px);}
.blocks.col7-3 > div:last-child {width: calc(30% - 40px);}
/* カラム幅 3:7 */
.blocks.col3-7 > div:first-child {width: calc(30% - 40px);}
.blocks.col3-7 > div:last-child {width: calc(70% - 40px);}
/* カラム幅 6:4 */
.blocks.col6-4 > div:first-child {width: calc(60% - 40px);}
.blocks.col6-4 > div:last-child {width: calc(40% - 40px);}
/* カラム幅 4:6 */
.blocks.col4-6 > div:first-child {width: calc(40% - 40px);}
.blocks.col4-6 > div:last-child {width: calc(60% - 40px);}
/* カラム幅 5:5 */
.blocks.col5-5 > div {width: calc(50% - 40px);}
/* カラム幅 5:5 （隙間狭い） */
.blocks.col5-5.wide > div {width: calc(50% - 4px);}
.blocks.col.wide > div:first-child{ margin-right: 2px; }
.blocks.col.wide > div:last-child { margin-left: 2px; }
/* カラムを横断するキャプション */
.blocks .col > p.caption {
    width: 100%;
}

/* ブロックの上に線 */
.blocks.borderT {
    border-top: 1px solid #70707070;
    padding-top: 50px;
}
/* ブロックの下に線 */
.blocks.borderB {
    border-bottom: 1px solid #70707070;
    padding-bottom: 50px;
}

/* ３カラム */
.blocks.col3 {
    display:flex;
    flex-wrap:wrap;
}
.blocks.col3 > div {
    width: calc(33.33% - 40px);
    margin: 0 15px;
}
.blocks.col3 > div:first-child{ margin-left: 0px; }
.blocks.col3 > div:last-child { margin-right: 0px; }


@media screen and (max-width:768px) {
    .blocks.col,
    .blocks.col3 { display: block; }
    .blocks.col > div.full {  width: 100%; margin:0; }

    .blocks.col > div { margin-bottom: 30px;}
    .blocks.col > div.mb0SP { margin-bottom: 0px;}
    .blocks.col > div.mb0SP + p.caption { margin-bottom: 15px;}
    .blocks.col > div:first-child{ margin-right: 0px; }
    .blocks.col > div:last-child { margin-left: 0px; }
    .blocks.col3 > div {margin: 0 0 15px;}

    .blocks.col7-3 > div:first-child,
    .blocks.col7-3 > div:last-child,
    .blocks.col3-7 > div:first-child,
    .blocks.col3-7 > div:last-child,
    .blocks.col6-4 > div:first-child,
    .blocks.col6-4 > div:last-child,
    .blocks.col4-6 > div:first-child,
    .blocks.col4-6 > div:last-child,
    .blocks.col5-5 > div,
    .blocks.col5-5.wide > div,
    .blocks.col3 > div {width:100%;}

    /* 背景固定はiOSではできないので非表示にする */
    .blocks.fixBG { display: none; }
}







.base {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    text-align: center;
    padding: 80px 0;

    background-position: top center;
    background-size: 160%;
    background-repeat: no-repeat;

    position: relative;
}
.base > h2 {
    font-size: 36px;
    font-weight: bold;
    color: #595858;
    line-height: 1.2em;
    margin-bottom: 50px;
}
.base > h3 {
    font-size: 27px;
    font-weight: bold;
    line-height: 1.2em;
    color:#066966;
    margin-bottom: 30px;
}
.base > p {
    font-size: 18px;
    line-height: 1.6em!important;
    margin-bottom: 30px;
}

.whiteBase {
    width: 80%;
    max-width: 1120px;
    margin: 0 auto 60px;
    padding: 75px;
    background-color: #FFF;
    border-radius: 75px;
}


.whiteBase .title {
    background-color: #296C51;
    color: #FFF;
    font-size: 21px;
    font-weight: normal;
    padding: 10px 0;
    margin-bottom: 30px;
}

@media screen and (max-width:768px) {
    .base {
        width: calc(100vw - 20px);
        margin: 0 calc(50% - 50vw);
        min-width: none;
        padding: 40px 10px;
    }
    .base > h2 { font-size: 21px; margin-bottom: 20px;}
    .base > h3 { font-size: 16px; margin-bottom: 20px;}
    .base > p { font-size: 14px; text-align: left; list-style:1.8em; }

    .whiteBase {
        width: calc(100% - 30px);
        padding: 15px;
        border-radius: 15px;
    }
}
@media screen and (min-width:769px) and (max-width:980px) {
    #hero, .base {
        width: 980px;
        margin: 0;
    }
}




#topics p {
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    color: #737373;
    margin: 30px 0;
}
#topics p  span {
    font-size: 12px;
    margin-right: 10px;
}

@media screen and (max-width:768px) {
    #topics p  span::after {
        content: '\A';
        white-space: pre;
    }
}


/* article 背景 */
#nextZEH {
    background-image: url(../img/bg_upper_wg.png);
    background-color:#E6F5D4;
}

#gx {
    background-image: url(../img/bg_upper_gy.png);
    background-color:#FEFAC0;
}

#gxEQ {
    background-image: url(../img/bg_upper_yb.png);
    background-color:#E0EFFB;
}

#background {
    background-image: url(../img/bg_upper_bp.png);
    background-color:#FFD9BF;
}

#newbuild {
    background-image: url(../img/bg_upper_wy.png);
    background-color:#FEFAC0;
}

#primaryenergy {
    background-image: url(../img/bg_upper_wp.png);
    background-color:#FFD9BF;
}

#enesuke {
    background-image: url(../img/bg_upper_pg.png);
    background-color:#E6F5D4;
}

#docs {
    background-image: url(../img/bg_upper_gy.png);
    background-color:#FEFAC0;
}

#equipment {
    background-image: url(../img/bg_upper_wb.png);
    background-color:#E0EFFB;
}










.arrow { margin-bottom: 50px;}
.arrow div h3 {
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 33px 38px;

    font-size: 28px;
    font-weight: bold;
    line-height: 1em;
    text-align: left;
    padding-left:45px;
    margin-bottom: 15px;
}
.arrow div h3.aw1 {background-image: url(../img/index_sec2_arrow1.png);}
.arrow div h3.aw2 {background-image: url(../img/index_sec2_arrow2.png);}
.arrow div h3.aw3 {background-image: url(../img/index_sec2_arrow3.png);}
.arrow div h3.aw4 {background-image: url(../img/index_sec2_arrow4.png);}
.arrow div h3.aw5 {background-image: url(../img/index_sec2_arrow5.png);}
.arrow div h3.aw6 {background-image: url(../img/index_sec2_arrow6.png);}

.arrow div h3 span {
    font-size: 18px;
}
.arrow div h3 span::before {
    content: '\A';
    white-space: pre;
}
.arrow div p {
    text-align: left;
    font-size: 16px;
    padding-left:45px;
}



.stepBox {
    padding-left: 90px;
    text-align: left;
    
    background-repeat: no-repeat;
    background-position: left top 30px;
    background-size: 60px auto;
}
.stepBox.s1 {background-image: url(../img/index_sec3_step1.png);}
.stepBox.s2 {background-image: url(../img/index_sec3_step2.png);}
.stepBox.s3 {background-image: url(../img/index_sec3_step3.png);}

.stepBox.n1 {background-image: url(../img/tool_sec2_num1.png);}
.stepBox.n2 {background-image: url(../img/tool_sec2_num2.png);}
.stepBox.n3 {background-image: url(../img/tool_sec2_num3.png);}
.stepBox.n4 {background-image: url(../img/tool_sec2_num4.png);}

.stepBox h5 {
    font-size: 28px;
    font-weight: bold;
    color: #296C51;
    padding: 10px;
    border-bottom: 1px solid #296C51;
}
.stepBox p {
    font-size: 18px;
    padding: 10px;
}

@media screen and (max-width:768px) {
    .arrow div h3 {
        font-size: 21px;
        background-size: 23px 27px;
        padding-left:30px;
    }
    .arrow div h3 span {
        font-size: 16px;
    }
    .arrow div p {
        padding-left:30px;
    }
    .stepBox {
        padding-left: 70px;
    }
}







/* =====================

    パナソニックの設備
        equipment.html

===================== */
.eqNaviArea {
    height: 500px;
    margin: 0 0 60px;
    background-image: url(../img/eq_sec0_01.png);
    background-repeat: no-repeat;
    background-size: 486px 487px;
    background-position: top center;
    position: relative;
}
.eqNaviArea > p {
    position: absolute;
    top:380px; left: 50%;
    width: 420px;
    margin-left: -210px;
    text-align: left;
}

.eqBtn {
    position: absolute;
    top:150px; left: 50%;
    width: 380px;
}
.eqBtn.left { margin-left: -570px; }
.eqBtn.right { margin-left: 200px; }
.eqBtn p {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #4d4d4d;
    margin-bottom: 15px;
}
.eqBtn ul {
    display: flex;
    justify-content: space-between;
}
.eqBtn ul li a {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    width: 180px; height: 143px;
    display: block;
    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}
.eqBtn ul li a:hover { opacity: 0.8; }
.eqBtn ul li a.btnA {background-image: url(../img/eq_sec0_btnA.png);}
.eqBtn ul li a.btnB {background-image: url(../img/eq_sec0_btnB.png);}
.eqBtn ul li a.btnC {background-image: url(../img/eq_sec0_btnC.png);}
.eqBtn ul li a.btnD {background-image: url(../img/eq_sec0_btnD.png);}




@media screen and (max-width:768px) {
    .eqNaviArea {
        height: 780px;
        background-size: contain;
    }
    .eqNaviArea > p {
        position: absolute;
        top:280px; left: 0;
        width: calc(100% - 30px);
        padding: 0 15px;
        margin-left: 0px;
        font-size: 14px;
    }
    .eqBtn {
        position: absolute;
        left: 0;
        width: 100%
    }
    .eqBtn.left { top:400px; margin-left: 0px; }
    .eqBtn.right { top:620px; margin-left: 0px; }
}

.chapTitle img.mark { display: block; width: 230px!important; margin: 0 auto 50px;}
.chapTitle img.fig { display: block; width: 490px!important; margin: 0 auto 30px;}
.chapTitle p {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}



.dotBox {
    width: calc(100% - 14rem);
    max-width: 1120px;
    padding: 30px 7rem 50px;
    margin-bottom: 50px;
    position: relative;
    border: 1px dashed #4d4d4d;
    border-radius: 15px;
    text-align: left;
}
.dotBox img.ribbon {
    position: absolute;
    width: 152px;
    top:-10px; left: 15px;
}
.dotBox img.headImg {
    display: block;
    width: 360px; height: auto;
    margin: 0 auto;
}
.dotBox h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 30px 0 60px;
}
.dotBox h3 span {
    font-size: 16px;
    font-weight: normal;
}

.dotBox h4 {
    font-size: 18px;
    font-weight: bold;
    margin: 30px 0 0;
}
.dotBox p {
    font-size: 14px;
    margin: 15px 0 0;
}

p.comment {
    font-size: 11px;
    position: absolute;
    top:70px; left: 50%;
    margin-left: 150px;
}


a.itemBtn {
    display: block;
    border: 1px dashed #4d4d4d;
    border-radius: 15px;
    padding: 0px 80px 0px 10px;
    text-align: left;
    text-decoration: none;
    display: flex;
    align-items: center;
    background-image: url(../img/eq_item_btn.png);
    background-repeat: no-repeat;
    background-size: 60px;
    background-position: center right 15px;
    min-height: 140px;
    margin-bottom: 15px;
}
a.itemBtn:hover { opacity: 0.8;}

a.itemBtn img {
    display: block;
    width: 135px; height: 120px;
    margin-right: 5px;
}
a.itemBtn p.btnTitle {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3em;
    margin: 10px 0 5px;
    color: #000;
}
a.itemBtn p.btnTitle span { font-size: 12px;}
a.itemBtn p {
    font-size: 14px;
    color: #000;
    margin: 0 0 10px;
}

img.w650 {
    display: block;
    max-width: 650px;
    margin: 0 auto;
}
img.w700 {
    display: block;
    max-width: 700px;
    margin: 0 auto;
}
img.w890 {
    display: block;
    max-width: 890px;
    margin: 0 auto;
}

@media screen and (max-width:768px) {
    a.itemBtn {
        flex-wrap: wrap;
        background-position: top 30px right 30px;
        padding: 0px 10px 10px 10px;
    }
    a.itemBtn img {
        width: 50%;
        margin-right: 0;
    }
    a.itemBtn p.btnTitle {
        margin: 0 0 5px;
    }
    .dotBox {
        width: calc(100% - 2rem);
        padding: 30px 1rem 50px;
        margin-bottom: 50px;
        position: relative;
        border: 1px dashed #4d4d4d;
        border-radius: 15px;
        text-align: left;
    }
    .dotBox img.ribbon {
        position: absolute;
        width: 80px;
        top:-10px; left: 15px;
    }
    .dotBox img.headImg {
        width: 80%; height: 80%;
    }
    .dotBox h3 {
        font-size: 18px;
        text-align: left;
        margin: 20px 0 30px;
    }
    .dotBox h4 {
        font-size: 16px;
    }
}


.aiseg3 {
    width: 95%;
    margin: 0 auto 60px;
}
.aiseg3 p {
    text-align: center;
    margin: 0 0 10px;
}

.aiseg3 .step1 div,
.aiseg3 .step3 div {
    display: flex;
    justify-content: space-around;
}

.aiseg3 .step3 div p b { font-size: 1.3em;}

@media screen and (max-width:768px) {
    .aiseg3 {
        width: 100%;
        margin: 0 auto 60px;
    }
    .aiseg3 p { display: none; }


}









/* =====================

    テーブル

===================== */
.scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* Table */
.zeh-table,
.zeh-table_b,
.zeh-table_c {
  width: 100%;
  min-width: 967px; /* 最低横幅（調整可能） */
  border-collapse: collapse;
  text-align: center;
  font-family: sans-serif;

}


.zeh-table th,
.zeh-table td {
  border: 1px solid #333;
  padding: 8px;
}
.zeh-table thead tr:first-child {
  background-color: #145c43;
  color: white;
}
.zeh-table thead tr:nth-child(2) {
  background-color: #cde3d7;
  font-weight: bold;
}
.zeh-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}


.zeh-table_b th,
.zeh-table_b td {
  padding: 5px;
  border: solid #818181;
  border-width:  0px 1px 1px 0px;
}
.zeh-table_b th {
  background: #E2EFFF;
}
.zeh-table_b th.keisan {
  background: #84BAEA;
  text-align: center;
}
.zeh-table_b th.kokko {
  background: #E5CCB0;
  text-align: center;
}
.zeh-table_b th.kankyo {
  background: #BAEBAC;
  text-align: center;
}
.zeh-table_b th.zeh-table_b250 {
  width: 240px;
}
.zeh-table_b th.zeh-table_b375 {
  width: 365px;
}
.zeh-table_b th.zeh-table_b750 {
  width: 740px;
}


.zeh-table_c th,
.zeh-table_c td {
  padding: 5px;
  border: solid #818181;
  border-width:  0px 1px 1px 0px;
}
.zeh-table_c th {
  background: #c0ac89;
  color: #FFFFFF;
}
.zeh-table_c th.lccm {
  background: #4c4298;
  text-align: center;
}
.zeh-table_c th.zeh_n {
  background: #0086c0;
  text-align: center;
}
.zeh-table_c th.zeh_p {
  background: #0086c0;
  text-align: center;
}
.zeh-table_c th.zeh {
  background: #00a796;
  text-align: center;
}
.zeh-table_c th.zeh_m {
  background: #ec6d34;
  text-align: center;
}
.zeh-table_c .zeh-table_c50 {
  width: 240px;
}
.zeh-table_c .zeh_table375 {
  width: 365px;
}
.zeh-table_c .zeh_table750 {
  width: 740px;
}
.zeh-table_c .font_s {
  font-size: 0.8em;
}





p.badge {
    width: 20px;
    margin: 0 auto 8px;
    padding: 8px 15px 3px;
    color: #FFF;
    background-color: #4C4A4A;
    font-size: 14px;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
    line-height: 1em;
}







/* =====================

    コンバージョンエリア
        /common/cv.html

===================== */
#cvArea {
    background-color:#FBFFC6;
}
#cvArea .whiteBase { border-radius: 0;}

.cv-icon {
    display: block;
    width: 100px!important;
    margin: 0 auto 30px;
}

h4.cv-catch {
    font-size: 26px;
    font-weight: bold;
    color: #595858;
    margin-bottom: 10px;
}
.cv-tamarie { margin:100px auto 0; }
.cv-tamarie p {
    font-size: 18px;
    font-weight: bold;
    color: #e98e8a;
    margin-bottom: 30px;
}
.cv-tamarie img {
    width: 30%;
}

.zeh_line {
    width: 100%; height: 4px;
    background-image: url(../img/zeh_line.png);
    background-repeat: repeat-x;
    background-position: top center;
    margin: 30px 0 60px;
}

@media screen and (max-width:768px) {
    .cv-catch {
        width: 100%!important;
    }
    .cv-tamarie { margin:50px auto 0; }
    .cv-tamarie p { margin-bottom: 15px; text-align: center; }
    .cv-tamarie img { width: 100%; }
}








/* =====================

    お役立ち情報エリア
        /common/links.html

===================== */
#useful,
#useful .whiteBase {
    background-color:#F9F9F9;
}
#useful .whiteBase { padding-top: 0; }


h3.linksTitle {
    margin-bottom: 10px;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid #296C51;
}
.links ul { margin-bottom: 30px;}
.links ul li {
    text-align: left;
    margin-top: 5px;
    font-size: 14px;
}
.links ul li.tab {
    margin-top: 20px;
}
.links ul li a {
    display: block;
    text-indent: -.7em;
    padding-left: 1em;
    font-size: 16px;
}

.links ul li a::before {
  content: "\f105";
  font-family: 'FontAwesome';
  font-weight: 900;
  color: #78B041;
  margin-right: 5px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}






/* =====================

    モーダルウィンドウ

===================== */
.remodal h1 {
    font-size: 24px;
    font-weight: bold;
    color: #296C51;
}

.mwGXbox {
    display: flex;
    margin: 30px 0;
}

.mwGXbox img {
    width:240px;
    margin: 0 auto;
}
.mwGXbox p {
    margin-left: 15px;
    text-align: left;
    font-size: 16px;
    line-height: 1.4em;
}

.mwGXbox p span { color:#FF9400;}



.remodal.equipment > img {
    width: 100%;
    margin-bottom: 30px;
}

@media screen and (max-width:768px) {
    .mwGXbox {
        display: block;
    }
    

}


.gallery-wrapper {
  max-width: 630px;
  width: 100%;
  margin: 0 auto 30px;
}

.thumbnails {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}

.thumb {
  width: 180px;
  height: 60px;
  object-fit: cover;
  object-position: top;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
  border-radius: 4px;
}

.thumb.active {
  opacity: 1;
  border-bottom: 2px solid #007BFF;
}

.main-image {
  position: relative;
  background-color: white;
  overflow: hidden;
}

.main-display {
  width: 100%;
  display: block;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 2;
}



/* =============================

inview.js

============================= */
/* フェードイン（ふわっと）*/
.fadeIn {
    opacity: 0;
    transition: 1s;
}
/* 下からフェードイン（ふわっと）*/
.fadeUp {
    opacity: 0;
    transform: translate(0, 25%);
    transition: 1s;
}
/* 上からフェードイン（ふわっと）*/
.fadeDown {
    opacity: 0;
    transform: translate(0, -25%);
    transition: 1s;
}
/* 左からフェードイン（ふわっと）*/
.fadeLeft {
    opacity: 0;
    transform: translate(-25%, 0);
    transition: 1s;
}
/* 右からフェードイン（ふわっと）*/
.fadeRight {
    opacity: 0;
    transform: translate(25%, 0);
    transition: 1s;
}

.fadeIn.is-show,
.fadeUp.is-show,
.fadeDown.is-show,
.fadeLeft.is-show,
.fadeRight.is-show {
    transform: translate(0, 0);
    opacity: 1;
}




@media print {
    @page {
        margin: 20mm 10mm;
        size: A4 portrait;
    }




 }