/*マップ　20240114add*/
.businessMapArea { background-image: url(images/map/business_map.jpg); background-size: cover; background-repeat: no-repeat; position: relative; aspect-ratio: 1920 / 1280; margin: 120px 0 80px; /*overflow: hidden; */}
.mapReadText { text-align: center;}

.a01 { width: 26%; top: 17%; right: 9%; }
.a02 { width: 20%; bottom: 9%; right: 30%; }
.a03 { width: 24%; top: 7%; left: 27%; }
.a04 { width: 30%; top: 49%; left: 1%; }
.a05 { width: 10%; bottom: 4%; right: 9%; }
.a06 { width: 6%; top: 37%; left: 30%; }
.a07 { width: 14%; bottom: 16.7%; left: 27%; }
.a08 { width: 15%; top: 43%; right: 1%; }

.b01 { width: 10%; bottom: 29%; right: 32%; }
.b02 { width: 10%; bottom: 10%; right: 20%; }
.b03 { width: 32%; top: 17%; left: 1%; }

.b03Aback { position: absolute; top: 0; left: 0; animation: bg-snow 6s ease infinite normal; animation-delay: 0.5s; opacity: 0;}

/*.nami {display: block; width: 37%; height: auto; position: absolute; left: 0%; bottom: 0%; animation: bg-wave 6s ease infinite alternate; transform-origin: left bottom;}*/
.nami img[src$=".svg"] { vertical-align: top;}
.nami01 {display: block; width: 5%; height: 9px; position: absolute; left: 20%; bottom: 19%; animation: wave-up 1.5s ease-in-out infinite alternate; transform-origin: center bottom; /*animation-delay: 0.3s;*/}
.nami02 {display: block; width: 5%; height: 8px; position: absolute; left: 0%; bottom: 12%; animation: wave-up 1.5s ease-in-out infinite alternate; transform-origin: center bottom; /*animation-delay: 0s;*/}
.nami03 {display: block; width: 5%; height: 8px; position: absolute; left: 2%; bottom: 18%; animation: wave-up 1.5s ease-in-out infinite alternate; transform-origin: center bottom; /*animation-delay: 0.1s;*/}
.nami04 {display: block; width: 5%; height: 8px; position: absolute; left: 33%; bottom: 7%; animation: wave-up 1.5s ease-in-out infinite alternate; transform-origin: center bottom; /*animation-delay: 0.5s;*/}
.nami05 {display: block; width: 5%; height: 8px; position: absolute; left: 29%; bottom: 3%; animation: wave-up 1.5s ease-in-out infinite alternate; transform-origin: center bottom; /*animation-delay: 0.4s;*/}
.lng { width: 20%; position: absolute; bottom: 9%; left: 5%; /*animation: lng 12s ease-in-out infinite normal;  transform-origin: center bottom;*/}
.lng02 { opacity: 1; animation: lng01 1.5s ease-in-out infinite alternate;}

.cloud01 { width: 10%; max-width: 148px; position: absolute; top: 4%; left: 87%; animation: bg-cloud01 4s ease infinite alternate;}
.cloud02 { width: 6%; max-width: 80px; position: absolute; top: 1%; left: 65%; animation: bg-cloud02 3s ease-in-out infinite alternate;}
.cloud03 { width: 6%; max-width: 80px; position: absolute; top: 9%; left: 4%; animation: bg-cloud02 3s ease-in-out infinite alternate-reverse; transform: translateY(-6px);}

.businessMapItem { position: absolute; z-index: 1; }

.mapItemComment { display: none; }

a.clickMapItem { width: 80px; height: 80px; display: block; position: absolute; opacity: 1; z-index: 1;}

.divA .clickMapItem { width: 60px; height: 80px; display: block; position: absolute; opacity: 1; background: url(images/map/icon-green.png); background-size: contain; background-repeat: no-repeat; animation: bg-gradient03 .8s cubic-bezier(0.93, 0, 0.63, 0.99) infinite alternate; bottom: 21%; left: 50%; transform: translate(-50%,0%) scaleY(85%);}
.divB .clickMapItem { width: 60px; height: 80px; display: block; position: absolute; opacity: 1; background: url(images/map/icon-orange.png); background-size: contain; background-repeat: no-repeat; animation: bg-gradient03 .8s cubic-bezier(0.93, 0, 0.63, 0.99) infinite alternate; bottom: 21%; left: 50%; transform: translate(-50%,0%) scaleY(85%);}
.divA .clickMapItem:hover { animation: none; opacity: 1; background-image: url(images/map/icon-green-on.png);}
.divB .clickMapItem:hover { animation: none; opacity: 1; background-image: url(images/map/icon-orange-on.png);}

.kage { position: absolute; position: absolute; width: 20px; height: 8px; background: #000; left: 48%; bottom: 27%; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; opacity: 0.3;}


.b02 .clickMapItem:nth-of-type(1) { left: 15%; bottom: 42%;}
.b02 .clickMapItem:nth-of-type(2) { left: 85%; bottom: 42%;}

.b03 .clickMapItem:nth-of-type(1) { left: 45%; bottom: 35%;}
.b03 .clickMapItem:nth-of-type(2) { left: 70%; bottom: 35%;}

.a01 .clickMapItem { animation-delay: 0; bottom: 48px;}
.a02 .clickMapItem { animation-delay: 0.1s; bottom: 27%;}
.a03 .clickMapItem { animation-delay: 0.4s;}
.a04 .clickMapItem { animation-delay: 0.8s;}
.a05 .clickMapItem { animation-delay: 0.2s; bottom: 13%;}
.a06 .clickMapItem { animation-delay: 0.7s; bottom: 15%;}
.a07 .clickMapItem { animation-delay: 1s; bottom: 34%;}
.a08 .clickMapItem { animation-delay: 0.5s; bottom: 30%;}

.b01 .clickMapItem { animation-delay: 0.9s; bottom: 28%;}
.b02 .clickMapItem { animation-delay: 0.3s;}
.b02 .b02B2.clickMapItem { animation-delay: 0.7s;}
.b03 .clickMapItem { animation-delay: 0.6s;}
.b03 .b03B2.clickMapItem { animation-delay: 0.1s;}

/*影*/
.a01 .a01K { left: 48%; bottom: 50px;}
.a02 .a02K { left: 47%; bottom: 29%;}
.a03 .a03K { left: 47.5%; bottom: 25%;}
.a04 .a04K { left: 48%; bottom: 27%;}
.a05 .a05K { left: 44%; bottom: 16%;}
.a06 .a06K { left: 42%; bottom: 18%;}
.a07 .a07K { left: 45%; bottom: 36%;}
.a08 .a08K { left: 46%; bottom: 33%}
.b01 .b01K { left: 44%; bottom: 30%;}
.b02 .b02K { left: 10%; bottom: 43%;}
.b02 .b02BK { left: 79%; bottom: 43%;}
.b03 .b03K { left: 43%; bottom: 36%;}
.b03 .b03BK { left: 68%; bottom: 36%;}

@keyframes bg-gradient03 {
    0% {
        transform: translate(-50%,0) scaleY(85%);
    }
    2% {
        transform: translate(-50%,0) scaleY(85%);
    }
    100% {
        transform: translate(-50%,-30px) scaleY(100%);
    }
}

@keyframes bg-snow {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translate(-10px,10px);
    }
    40% {
        opacity: 1;
        transform: translate(0px,20px);
    }
    60% {
        opacity: 1;
        transform: translate(-10px,30px);
    }
    80% {
        opacity: 0.5;
        transform: translate(0px, 40px);
    }
    90%{
        opacity: 0;
        transform: translate(0px, 40px)
    }
    100% {
        opacity: 0;
    }
}
@keyframes wave-up {
    0% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0px);
    }
}
@keyframes lng01 {
    0% { opacity: 1;}
    100% { opacity: 0;}
}
@keyframes bg-cloud01 {
    0% {
        transform: translateY(12px);
    }
    100% {
        transform: translateY(-12px);
    }
}
@keyframes bg-cloud02 {
    0% {
        transform: translateY(6px);
    }
    100% {
        transform: translateY(-6px);
    }
}


.mapItemComment { width: 300px; height: auto; text-align: center; background:rgba(255,255,255,0.8); padding: 1rem; border-radius: 10px; position: absolute; z-index: 99;}
p.mapItemTitle { font-size: 2.0rem; font-weight: 500; margin: 0 auto; padding: 0;}
.mapItemText { font-size: 1.4rem; line-height: 1.4; margin: 0 auto; padding: 0;}

.divA .mapItemTitle { color: #739406;}
.divB .mapItemTitle { color: #ff9204;}

.a01C { top: 10%; right: 11%; border: solid 2px #a0b94d;}
.a02C { bottom: 2%; right: 27%; border: solid 2px #a0b94d;}
.a03C { top: 23%; left: 27%; border: solid 2px #a0b94d;}
.a04C { top: 42%; left: 5%; border: solid 2px #a0b94d;}
.a05C { bottom: 15%; right: 1%; border: solid 2px #a0b94d;}
.a06C { top: 52%; left: 22%; border: solid 2px #a0b94d;}
.a07C { bottom: 9%; left: 22%; border: solid 2px #a0b94d;}
.a08C { top: 36%; right: 1%; border: solid 2px #a0b94d;}

.b01C { bottom: 49%; right: 25%; border: solid 2px #f1961b;}
.b02C { bottom: 10%; right: 15%; border: solid 2px #f1961b;}
.b02C2 { bottom: 10%; right: 12%; border: solid 2px #f1961b;}
.b03C { top: 35%; left: 3%; border: solid 2px #f1961b;}
.b03C2 { top: 35%; left: 11%; border: solid 2px #f1961b;}

.a01C .mapItemTitle { color: #739406;}
.a02C .mapItemTitle { color: #739406;}
.a03C .mapItemTitle { color: #739406;}
.a04C .mapItemTitle { color: #739406;}
.a05C .mapItemTitle { color: #739406;}
.a06C .mapItemTitle { color: #739406;}
.a07C .mapItemTitle { color: #739406;}
.a08C .mapItemTitle { color: #739406;}

.b01C .mapItemTitle { color: #ff9204;}
.b02C .mapItemTitle { color: #ff9204;}
.b02C2 .mapItemTitle { color: #ff9204;}
.b03C .mapItemTitle { color: #ff9204;}
.b03C2 .mapItemTitle { color: #ff9204;}


.hovered { display: block; }

/*各事業ページのアンカーリンクのヘッダー分上に移動*/
#g01,#g02,#g03,#g04,#g05,#g06,#g07,#g08,#e01,#e02,#e03,#e04 {scroll-margin-top: 120px;}

/*.businessMapArea input { display: none;}*/
.businessMapArea input { position: absolute; z-index: 2;}
.businessMapArea label { width: 40%; height: 60px; font-size: 1.8rem; color: #333; font-weight: 500; padding: 15px 3%; cursor: pointer; opacity: 0.5; position: absolute; top: -80px;}
.gasBtn { top: -60px; left: 6%;}
.gasLabel { border:solid 2px #739406; background: #b9c982; border-radius: 10px; left: 5%;}
.energyBtn { top: -60px; left: 56%;}
.energyLabel { border:solid 2px #ff9204; background: #fec880; border-radius: 10px; left: 55%;}

.businessMapArea input:checked + label { opacity: 1;}
.gasBtn ~ .divA .clickMapItem { display: none;}
.gasBtn ~ .divB .clickMapItem { display: none;}
.gasBtn:checked ~ .divA .clickMapItem { display: block;}
.energyBtn:checked ~ .divB .clickMapItem { display: block;}

@media only screen and (max-width:768px){
    .mapReadText { text-align: left;}
    .businessMapCont { overflow-x: scroll;}
    .businessMapArea { width: auto; height: 80vh; margin-top: 250px;}
    
    .mapSpText { position: sticky; width: 80vw; top: -50px; left: 5%; text-align: center; font-weight: 700;}
    .businessMapArea label { position: sticky; display: block; width: 90vw; padding: 15px 0 15px 6%;}
    .businessMapArea input { position: sticky; display: block; width: 20px; height: 20px;}
    .businessMapArea .gasBtn { /*top: -60px;*/ left: 5%; margin-top: -220px;}
    .businessMapArea .gasLabel { left: 0%; margin-top: -43px;}
    .businessMapArea .energyBtn { margin-top: 20px; left: 5%;}
    .businessMapArea .energyLabel { left: 0%; margin-top: -43px;}

    .businessMapItem .clickMapItem { top: -15px; z-index: 1;}
    .a04 .clickMapItem { top: -35px;}
    .a05 .clickMapItem { top: -33px;}
    .a08 .clickMapItem { top: -33px;}
    .a07 .clickMapItem { top: -5px;}
    .b03 .clickMapItem { top: 3px;}
    .b03 .b03B2.clickMapItem { top: 3px;}
    .b02 .clickMapItem { top: 8%;}
    .b02 .b02B2.clickMapItem { top: 8%;}

    .b01C { bottom: 54%; right: 19%;}
    .b02C { right: 11%;}
    .b02C2 { right: 4%;}
    .b03C2 { left: 5%;}
    .a01C { top: 32%; right: 5%;}
    .a02C { right: 23%;}
    .a03C { left: 19%;}
    .a04C { top: 62%; left: 0;}
    .a05C { bottom: 20%; right: 0%;}
    .a06C { left: 14%;}
    .a07C { left: 13%;}
    .a08C { top: 57%; right: 0%;}

    /*影*/
    .a01 .a01K { left: 46%; bottom: 41%;}
    .a02 .a02K { left: 45%; bottom: 33%;}
    .a03 .a03K { left: 46%;}
    .a04 .a04K { left: 47%;}
    .a05 .a05K { left: 41%;}
    .a06 .a06K { left: 33%; bottom: 16%;}
    .a07 .a07K { left: 44%;}
    .a08 .a08K { left: 44%;}
    .b01 .b01K { left: 39%; bottom: 34%;}
    .b02 .b02K { left: 5%;}
    .b02 .b02BK { left: 75%;}
    .b03 .b03K { left: 42%;}
    .b03 .b03BK { left: 67%;}

    .lng { bottom: 7%;}
    .nami01 { bottom: 17%;}



}