@charset "UTF-8";
/* ----------------------------------------------------
[top-lsc-here]
----------------------------------------------------  */

body.modal-open {
  overflow: hidden;
}

.map-img.sp{display: none;}

.sp_inline_bk{display: inline;}

.modal-close:focus-visible {
  outline: 2px solid Highlight;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.sp_block{display: none;}
@media only screen and (max-width:640px) {
.sp_block{display: block;}
}



@media only screen and (max-width:640px) {
.map-img.pc{display: none;}
.map-img.sp{display: block;}

.sp_inline_bk{display: inline-block;}

}/*640*/



.top-lsc-here{
background: #E9F2ED;
padding-top: 0;
margin-bottom: 70px;
}

.top-lsc-here .container-here{
/*outline: 2px dashed red;*/
width: auto;
max-width: 1200px;
min-width: 980px;
/*width: 1200px;*/
margin:0 auto;
position: relative;
z-index: 1;
}

/*
.top-lsc-here .container-here .map-img.pc{
outline: 2px dashed red;
}
*/

@media only screen and (max-width:640px) {

.top-lsc-here{
margin-bottom: 20px;
}

.top-lsc-here .container-here{
max-width: none;
min-width: auto;
margin-left: -8px;
margin-right: -8px;
}
}/*640*/

.top-lsc-here .container-here .map-title{
color: #007A46;
background: #fff;
padding: 15px 25px;
display: inline-block;
position: absolute;
border-bottom-right-radius: 20px;
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
.top-lsc-here .container-here .map-title>p{
font-size: 18px;
font-weight: 700;
}
.top-lsc-here .container-here .map-title h2{
color: #007A46;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}
.top-lsc-here .container-here .map-title h2>span{
font-size:50px;
}
.top-lsc-here .container-here .map-title .map_h2_sub{
font-size:14px;
font-weight: 700;
border-top: 1px solid #007A46;
padding-top: 5px;
white-space: nowrap;
}
@media only screen and (max-width:640px) {
.top-lsc-here .container-here .map-title{
position: relative;
display: block;
display: flex;
justify-content:center;
align-items: center;
gap:20px;
border-bottom-right-radius: 0;
box-shadow: 0 3px 5px rgba(0,0,0,.1);
border: 2px solid #B2E4C7;
}

/*.top-lsc-here .container-here .map-title > *{outline: 1px dashed red;}*/

}/*640*/

@media only screen and (max-width:480px) {
.top-lsc-here .container-here .map-title{
padding: 8px 10px;
gap:12px;
}
.top-lsc-here .container-here .map-title>p{font-size: 14px; width: 4.5em;}
.top-lsc-here .container-here .map-title h2{font-size: 15px;}
.top-lsc-here .container-here .map-title h2>span{font-size:30px;}
.top-lsc-here .container-here .map-title .map_h2_sub{font-size:13px;}

}/*480*/




.map-arrow {
  position: relative;
  display: inline-block;
}

.map-arrow:focus-visible{outline: 3px solid Highlight;}

@media only screen and (max-width:640px) {
.map-arrow {display: none;}
}/*640*/


/* 全体map　*/
.map-arrow.car{position: absolute; top:72px; left:735px;}
.map-arrow.plant{position: absolute; top:472px; left:587px;}
.map-arrow.infrastructure{position: absolute; top:490px; left:840px;}
.map-arrow.office{position: absolute; top:219px; left:550px;}
.map-arrow.home{position: absolute; top:510px; left:350px;}

 @media only screen and (min-width:980px) and (max-width:1200px){
.map-arrow.car{position: absolute; top:6vw; left:61.25vw;}
.map-arrow.plant{position: absolute; top:39.33vw; left:48.92vw;}
.map-arrow.infrastructure{position: absolute; top:40.83vw; left:70vw;}
.map-arrow.office{position: absolute; top:18.25vw; left:45.83vw;}
.map-arrow.home{position: absolute; top:42.5vw; left:29.17vw;}
}/*980-1200*/

 @media only screen and (max-width:979px) {
.map-arrow.car{position: absolute; top:59px; left:600px;}
.map-arrow.plant{position: absolute; top:385px; left:479px;}
.map-arrow.infrastructure{position: absolute; top:400px; left:685px;}
.map-arrow.office{position: absolute; top:179px; left:449px;}
.map-arrow.home{position: absolute; top:416px; left:286px;}
}/*979*/


/* 家map　*/
/*
.map-arrow.hair-care{position: absolute; top:85px; left:132px;}
.map-arrow.body-care{position: absolute; top:280px; left:350px;}
.map-arrow.house-care{position: absolute; top:280px; left:700px;}
.map-arrow.electronic-devices{position: absolute; top:85px; left:505px;}
*/
.map-arrow.body-care{position: absolute; top:110px; left:132px;}
.map-arrow.electronic-devices{position: absolute; top:110px; left:540px;}
.map-arrow.hair-care{position: absolute; top:330px; left:350px;}
.map-arrow.house-care{position: absolute; top:310px; left:700px;}

 @media only screen and (max-width:979px) {
.map-arrow.body-care{position: absolute; top:11.46vw; left:13.75vw;}
.map-arrow.electronic-devices{position: absolute; top:11.46vw; left:56.25vw;}
.map-arrow.hair-care{position: absolute; top:34.38vw; left:36.46vw;}
.map-arrow.house-care{position: absolute; top:32.29vw; left:72.92vw;}
}/*641-960*/



.map-arrow img{cursor:pointer;}


.map-label {
  position: absolute;
  bottom: 100%; /* 矢印の上に表示 */
  left: 100%;
  transform: translateX(-50%);
  background-color: #fff;
  color: #333;
  padding: 7px 12px;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 50;
  border:1px solid #fff;
  box-shadow: 2px 3px 3px rgba(0,0,0,.4);
  /*background: rgba(255, 0, 0, 0.2);*/
}


.map-arrow:hover .map-label,
.map-arrow:focus-visible .map-label{
  opacity: 1;
}



/* モーダル
---------------------------------------------------- */

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

@media only screen and (max-width:640px) {
.modal{display: none !important;}
}/*640*/

/*
.modal-content {
  background-color: #fff;
  margin: 5% auto;
  max-width: 960px;
  max-height: 80vh;
  overflow: hidden;  モーダル全体でスクロールしない 
  position: relative;
}
*/

.modal-content {
  max-width: 960px;
  margin: 40px auto;
  background-color: #fff;
  border-radius: 6px;
  padding: 20px;
}


/* モーダル中身 */


.modal-inner {
  display: none;
}

.modal-inner.active {
  display: block;
    display: flex;
  justify-content:space-between;
  position: relative;
}

@media only screen and (max-width:768px) {

}/*768*/



.modal-body {
  padding: 30px;
  background: url(/ja/img/lsc-here/corner.svg) no-repeat left top;
  position: relative;
  display: flex;
}
.modal-close {
  position: absolute;
  top:20px;
  right: 15px;
  cursor: pointer;
  z-index: 100;
  background: #fff;
  padding:0;
  pointer-events: auto; /* 必須 */
}



/* 左側（固定） */
.modal-inner .left-box {
/*outline: 1px dashed rgba(48,24,255,1.00);*/
  width: 280px;
  flex-shrink: 0;
  position: relative; /* fixedだと別扱いになるのでrelativeへ */
  z-index: 11;
}

.modal-inner .left-box h3,
.modal-inner.one-col h3{
font-size: 24px;
font-weight:500;
border-left:5px solid #007A46;
line-height: 36px;
padding-left: 8px;
color: #007A46;
}

.modal-inner .left-box img{
/*outline: 1px dashed rgba(48,24,255,1.00);*/
display: block;
margin-top:25px;
}

@media only screen and (max-width:768px) {
.modal-inner .left-box {
width: 30%;
}

}/*768*/




/* 右側（スクロール） */
.modal-inner .right-box {
/*outline: 1px dashed rgba(48,24,255,1.00);*/
  width: calc(100% - 320px); /* 左右の余白考慮 */
  max-height: calc(80vh - 60px - 60px); /* モーダル高さ - padding調整 */
  overflow-y: auto;
  margin-left: 20px;
  margin-top: 60px;
  padding-right: 10px;
  padding-bottom: 20px;
}

.modal-inner .right-box ul li{
/*outline: 1px dashed rgba(48,24,255,1.00);*/
display: flex;
justify-content: space-between;
margin-bottom:40px;
align-items: flex-start; /* 追加 */
}

.modal-inner .right-box ul li:last-child{margin-bottom: 0px;}

.modal-inner .right-box ul li img{width:170px}

.modal-inner .right-box ul li .right-txt{
width: calc(100% - 195px);
}

.modal-inner .right-box ul li .right-txt h4{
font-size:17px;
padding-bottom:7px;
border-bottom:1px solid #707070;
}
.modal-inner .right-box ul li .right-txt h4 a,
.modal-inner.one-col .one-col-list ul li .txt h4 a{
color: #000;
text-decoration:none;
}
.modal-inner .right-box ul li .right-txt h4 a::before,
.modal-inner.one-col .one-col-list ul li .txt h4 a::before{
content:'▶';
font-size:12px;
vertical-align: 2px;
padding-right: 2px;
color: #007a46;
}
.modal-inner .right-box ul li .right-txt h4 a:hover,
.modal-inner.one-col .one-col-list ul li .txt h4 a:hover{
color: #007a46;
}

.modal-inner .right-box ul li .right-txt p{
padding-top:7px;
font-size:16px;
line-height: 1.6;
}




/* .modal-inner.one-col */
.modal-inner.one-col.active{
    display: block;
    width: 900px;
}


.modal-inner.one-col .one-col-list{
/*outline: 2px dashed red;*/
width:100%;
  max-height: calc(80vh - 60px - 60px); /* モーダル高さ - padding調整 */
  overflow-y: auto;
  margin-top: 25px;
  padding-bottom: 20px;
}

.modal-inner.one-col .one-col-list ul li{
display: flex;
justify-content: space-between;
align-items: flex-start; /* 追加 */
}

.modal-inner.one-col .one-col-list ul li:nth-child(n + 2){
margin-top: 50px;
}

.modal-inner.one-col .one-col-list ul li img{
display: block;
width: 280px;
height: auto;
}

.modal-inner.one-col .one-col-list ul li .txt{
width: calc(100% - 320px);
padding-right: 10px;
}

.modal-inner.one-col .one-col-list ul li .txt p + h4,
.modal-inner .right-box ul li .right-txt p + h4{
margin-top: 40px;
}
.modal-inner.one-col .one-col-list ul li .txt h4{
padding-bottom: 7px;
border-bottom: 1px solid #707070;
}


@media only screen and (max-width:768px) {
.modal-inner .right-box {
  width:70%; /* 左右の余白考慮 */
  margin-left: 20px;
  margin-top: 60px;
  padding-right: 20px;
}
.modal-inner .right-box ul li {display: block;}
.modal-inner .right-box ul li img,
.modal-inner.one-col .one-col-list ul li img{
width: 35%;
display: block;
float: left;
padding-right: 20px;
margin-bottom: 20px;
background: #fff;
position: relative;
}
.modal-inner .right-box ul li .right-txt{
width: 100%;
}
.modal-inner .right-box ul li .right-txt::after{content:'';display:block;height:0;clear:both;}

.modal-inner.one-col .one-col-list ul li .txt {
width:70%;
}

}/*768*/



/* modal-home */
#modal-home.modal-inner.one-col .one-col-list{
/*outline: 2px dashed red;*/
overflow-y: hidden;
}
#modal-home.modal-inner.one-col .one-col-list .map-img-box{
/*outline: 2px dashed blue;*/
  height: 100%;
  min-height: 350px;/* 必要なら制限値をここで調整 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#modal-home.modal-inner.one-col .one-col-list .map-img-box img{
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}


/* map btn_sp ------------------ */



.btn_sp{display: none;}

 @media only screen and (max-width:640px) {
 
 /* all map */
.map-img.sp{
  position: relative; /* これでOK */
}
.btn_sp{display: block;}

.btn_sp a{
background:#fff;
display: block;
padding:0.8vw 1.6vw;
border-radius:0.8vw;
font-size: clamp(14px, 3.73vw, 19px);
font-weight: 500;
color: #000;
text-decoration: none;
}
 
.btn_sp.car{position: absolute; top:6.67vw;left:66.67vw;}
.btn_sp.plant{position: absolute; top:37.33vw;left:50.67vw;}
.btn_sp.infrastructure{position: absolute; top:37.33vw;left:72vw;}
.btn_sp.office{position: absolute; top:22.67vw;left:24vw;}


 
 
 }/*640*/




/*.top-lsc-home
-----------------------------------------------------*/
 @media only screen and (max-width:640px) {
 
.top-lsc-home{
background: #E9F2ED;
padding: 20px 10px 30px;
margin-bottom: 40px;
position: relative;
z-index: 10;
}

.top-lsc-home .container-home{
width: auto;
max-width: 900px;
margin: 0 auto;
position: relative;z-index: 11;
}

.top-lsc-home .container-home .map-img-box{
  position: relative;
  width: 900px;
  margin-top: 30px;
  padding: 40px 60px;
  border: 3px solid #24A972;
  border-radius: 10px;
  background-color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.top-lsc-home .container-home .map-img-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  border-style: solid;
  border-width: 0 18px 90px 18px;
  border-color: transparent transparent #24A972;
  translate: -50% -100%;
}

.top-lsc-home .container-home .map-img-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  border-style: solid;
  border-width: 0 15.5px 75px 15.5px;
  border-color: transparent transparent #fff;
  translate: -50% -100%;
}





 
.top-lsc-home{
background: #E9F2ED;
padding: 0;
}

.top-lsc-home .container-home{max-width: none;}
.top-lsc-home .container-home .map-img-box{
  width: 95%;
  margin: 20px auto;
  padding: 10px 20px 30px;
  border-radius: 10px;
}

.top-lsc-home .container-home .map-img-box::before {
  left: 28%;
  border-width: 0 10px 42px 10px;
}

.top-lsc-home .container-home .map-img-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 28%;
  border-style: solid;
  border-width: 0 7.5px 37px 7.5px;
  border-color: transparent transparent #fff;
  translate: -50% -100%;
}


.top-lsc-home .container-home .map-img-box img{
position: relative;
}
 .top-lsc-home .container-home .map-img-box h4{
font-weight: 500;
 }
 
 .btn_sp.home a{
  border: 1px solid #24A972;
  padding:0.6vw 1.2vw;
}
 
.btn_sp.body-care{position: absolute; top:13.33vw;left:2.67vw;}
.btn_sp.hair-care{position: absolute; bottom:4vw;left:2.67vw;}
.btn_sp.house-care{position: absolute; bottom:4vw;right:2.67vw;}
.btn_sp.electronic-devices{position: absolute; top:13.33vw;right:2.67vw;} 
 
} /*640*/





/* アコーディオン
---------------------------------------------------- */

.top-lsc-accordion{display: none; padding-bottom: 50px;}


 @media only screen and (max-width:640px) {
 
.top-lsc-accordion{display: block;}
 
.accordion {
    width: auto;
    margin-bottom: 7px;
    border: 2px solid #B1D7C7;
    background:#fff url(/ja/img/lsc-here/corner.svg) no-repeat left top;
    background-size:auto 60px;
}

.hr-accd{
  content: "";
  display: block;
  height: 40px;
  margin-top: -40px;
  visibility: hidden;
}


.accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 15px 10px;
    cursor: pointer;
}
.accordion summary:focus-visible {
 outline: 3px solid Highlight;
}
.accordion summary h3{
font-size: 18px;
color: #007A46;
 font-weight: 500;
 border-left:4px solid #007A46;
 padding-left: 7px;
}
.accordion summary h3>span{font-size: 14px; font-weight: 400;}

.accordion summary::-webkit-details-marker {
    display: none;
}


.accordion summary {
    position: relative;
}

.accordion summary::before,
.accordion summary::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 16px;
    height: 2px;
    background: #888;
    transition: transform 0.3s ease;
}

.accordion summary::after {
    transform: rotate(90deg);
}

.accordion[open] summary::after {
    transform: rotate(0deg);
}



.accordion>div {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding:10px 15px 20px;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion[open] >div {
    transform: none;
    opacity: 1;
}

.accordion .top-img{
width: 90%;display: block; margin: 0 auto;
}

/* list-accd */
.list-accd{
/*outline:1px dashed rgba(63,29,255,1.00);*/
margin-top: 10px;
}

.list-accd li{
display: flex;
justify-content: space-between;
gap: 15px;
align-items: flex-start;
margin-top: 40px;
}

/*
.list-accd li > *{
outline:1px dashed rgba(63,29,255,1.00);
}
*/

.list-accd li > img,
.list-accd li > .img_sub{
width: 30%;
}
.list-accd li > .right-txt{
width: calc(100% - 31%);
}

.list-accd li > .right-txt h4,
.list-accd-2>li .txt h4{
font-size: 15px;
font-weight: 500;
padding-bottom: 5px;
border-bottom: 1px solid #000;
margin-bottom: 5px;
}
.list-accd li > .right-txt h4 a,
.list-accd-2>li .txt h4 a{
color: #000;
text-decoration:none;
}
.list-accd li > .right-txt h4 a::before,
.list-accd-2>li .txt h4 a::before{
content:'▶';
font-size:12px;
vertical-align: 2px;
padding-right: 2px;
color: #007a46;
}
.list-accd li > .right-txt h4 a:hover,
.list-accd-2>li .txt h4 a:hover{
color: #007a46;
}



.list-accd li > .right-txt p,
.list-accd-2>li .txt p{
font-size: 14px;
line-height: 1.5;
}

}/*640*/


/*
.list-accd-2,
.list-accd-2>li{
outline:1px dashed rgba(63,29,255,1.00);
}
*/

.list-accd-2>li {margin-top: 40px;}

.list-accd-2>li .txt{
margin: 20px;
}

.list-accd li > .right-txt p + h4,
.list-accd-2>li .txt p + h4{
margin-top:20px;
}