@charset "UTF-8";

.about03 .h1-box {
   background-image: url("../img/about_img/about03-header_pc.png")
}
.product-sp {
   display: none;
}
.product-map {
   background-image: url("../img/life_img/life-main-bg.png");
   background-repeat: no-repeat;
   background-size: 1600px auto;
   background-position: center 150px;
   padding: 100px 0 0;
   margin: 20px 0;
   height: 700px;
   position: relative;
   width: 100%;
}
.product-map:before {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: linear-gradient(#f0fcff 0%, #fff 100%);
   z-index: -1;
}
.click {
   width: 400px;
   position: absolute;
   top: 50px;
   left: calc(50% - 200px);
}

.product-map ul li {
   position: absolute;
}
.product-map ul li:nth-child(1) {
   width: 220px;
   top: 330px;
   left: calc(50% - 480px);
}
.product-map ul li:nth-child(2) {
   width: 180px;
   top: 230px;
   left: calc(50% + 280px);
}
.product-map ul li:nth-child(3) {
   width: 220px;
   top: 630px;
   left: calc(50% + 280px);
}
.product-map ul li:nth-child(n + 4) {
   width: 110px;
}
.product-map ul li:nth-child(4) {
   top: 260px;
   left: calc(50% - 190px);
}
.product-map ul li:nth-child(5) {
   top: 220px;
   left: calc(50% - 0px);
}
.product-map ul li:nth-child(6) {
   top: 430px;
   left: calc(50% - 80px);
}
.product-map ul li:nth-child(7) {
   top: 450px;
   left: calc(50% + 160px);
}
.product-map ul li:nth-child(8) {
   top: 490px;
   left: calc(50% - 360px);
}
.modal2 {
   display: none;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   z-index: 102;
}
.modal__bg2 {
   background: rgba(0,0,0,.7);
   height: 100vh;
   position: absolute;
   width: 100%;
   transition: all 1s;
}
.modal__content2 {
   width: 950px;
   max-height: 90vh;
   overflow-y: scroll;
   position: absolute;
   border: solid 1px #000;
   background: #FFF;
   z-index: 2;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 20px;
}
.modal__content2 .blue-ttl {
   width: 290px;
   height: 60px;
   background: #006CB6;
   font-size: 16px;
   text-align: center;
   color: #FFF;
   font-family: 'Noto Serif JP', serif;
   position: absolute;
   top: 50px;
   left: 0;
   z-index: 2;
   line-height: 60px;
   box-sizing: border-box;
   padding: 0 0 0;
}
.modal__content2 .ttl {
   text-align: center;
   font-family: 'Noto Serif JP', serif;
   font-size: 24px;
   color: #006CB6;
   padding: 40px 0;
}
.modal__content2 > ul {
   width: 90%;
   margin: 0 auto 30px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.modal__content2 > ul li {
   width: 29.33%;
   margin: 0 2%;
}
.modal__content2 > ul li .img-box {
   width: 80%;
   margin: 0 auto;
}
.modal__content2 > ul li p {
   font-size: 13px;
   position: relative;
   top: -50px;
}
a.js-modal-close2 {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 20px;
   height: 20px;
   background: url("../img/common_img/close-btn.svg") no-repeat center center;
   background-size: contain;
}
@media screen and (max-width: 1023px) {
.product-map {
   display: none;
}
.product-sp {
   background: url("../img/life_img/life-main-bg_sp.png") no-repeat center top;
   background-size: 100% auto;
   padding: 80% 0 0px;
   display: block;
}
.product-sp .btns {
   width: 90%;
   max-width: 260px;
   position: relative;
   margin: 0 auto;
}
.product-sp .btns li {
   position: relative;
   margin-bottom: 20px;
}
.modal__content2 {
   width: 90%;
   max-width: 400px;
   max-height: 90vh;
   overflow-y: scroll;
   position: absolute;
   border: solid 1px #000;
   background: #FFF;
   z-index: 2;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 20px;
}
.modal__content2 .blue-ttl {
   width: 200px;
   height: 40px;
   background: #006CB6;
   font-size: 13px;
   text-align: center;
   color: #FFF;
   font-family: 'Noto Serif JP', serif;
   position: absolute;
   top: 20px;
   left: 0;
   z-index: 2;
   line-height: 40px;
   box-sizing: border-box;
   padding: 0 0 0;
}
.modal__content2 .ttl {
   text-align: center;
   font-family: 'Noto Serif JP', serif;
   font-size: 18px;
   color: #006CB6;
   padding: 20px 0 10px;
   line-height: 1.5em;
}
.modal__content2 > ul {
   width: 90%;
   margin: 0 auto 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   max-width: 400px;
}
.modal__content2 > ul li {
   width: 100%;
   margin: 0 0 0;
}
.modal__content2 > ul li .img-box {
   width: 66%;
   margin: 0 auto;
}
.modal__content2 > ul li p {
   font-size: 13px;
   position: relative;
   top: -20px;
   padding: 0 6%;
}
a.js-modal-close2 {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 20px;
   height: 20px;
   background: url("../img/common_img/close-btn.svg") no-repeat center center;
   background-size: contain;
}
}


@media screen and (max-width: 767px) {
.about03 .h1-box {
   background-image: url("../img/about_img/about03-header_sp.png")
}

}