@charset "UTF-8";
html,body{
    overflow-x:hidden;
}
body#life #wrapper{
    overflow:hidden;
    min-height:100vh;
}
body#life #container{
    max-height: calc(780px + 72px);
    min-height:660px;
    background-color:#8CC832;
}
_::-webkit-full-page-media, _:future, :root body#life #container {
    position:relative;
}
body#life #footer {
    width: 100%;
    min-height:70px;
}
#header {
    min-height:0;
}
#header #gnavi_blk {
    display: none;
}
.title_bg {
    background-color: #efefef;
    border-top:1px solid #ccc;
}
h1 {
    color:#333;
	width: 941px;
	margin: 0 auto;
    padding:20px 0;
    font-size: 1.6em;
    font-weight: bold;
}
.sp_pds {
    display: none;
}
br.sp {
    display: none;
}
.loader{
    width:100%;
    height:100%;
    position:absolute;
    background: rgba(0,0,0,0.7);
}
.loader img{
    padding:50px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display: block;
}
.mask {
    opacity: 0;
    transition: .5s;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.7);
    z-index: 3;
    display: flex;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}
.mask.show {
    opacity: 1;
    pointer-events: auto;
}
.mask li{
	/*display: none;*/
}
.mask.show li{
	display: block;
}

.modal {
    position: absolute;
    border-radius: 10px;
    width:90vw;
    max-width: 941px;
    background:#fff;
    z-index: 4;
    margin-top:100px;
    box-sizing:border-box;
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .modal {left:50%;transform: translateX(-50%);} /* IE11 */
}

.modal ul.md_pt {
    max-height: 60vh;
    overflow-y: auto;
    overflow-X:hidden;
    height:100%;
    /*padding-right: 20px;
    margin:0 -20px 20px -20px;*/
    margin: 40px 23px -10px 40px;
}
.modal ul.md_pt li .md_list{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-right:20px;
}
.modal ul.md_pt #mc_02 .md_list{
    border-bottom:dashed 1px #ccc;
    padding-bottom:50px;
    margin-bottom:50px;
}
.modal ul.md_pt #mc_02 .md_list:last-child{
    border-bottom:none;
    margin-bottom:0;
}
/*.modal ul.md_pt li{
    padding-right:17px;
}
.modal ul.md_pt li#a_02{
    padding-right:0px;
}*/
.pt_img {
    display: flex;
    align-items: center;
    width:35%;
}
.pt_img img {
    width:100%;
    height: auto;
}
.pt_dtl {
    width:60%;
}
.pt_dtl p {
    line-height: 1.8;
    font-size: 1.25em;
}
.modal h2.pt_ttl{
    font-size: 2em;
    font-weight: bold;
    margin: 30px auto;
    text-align: center;
}
p.used_here {
    font-size: 1.2em;
    margin-top: 9%;
    border-bottom: 2px solid #ccc;
    padding-bottom: 4px;
}
.used_link {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;
}
.used_link li {
    display: inline-block;
    min-width: 42%;
    margin-top: 10px;
    text-align: center;
    box-sizing: border-box;

}
.used_link li{
    margin-right:2%;
}
.used_link li a {
    color:#fff;
    padding: 8px 10px;
    background: #000;
    display:block;
    border-radius: 5px;
    text-decoration: none;
}
.md_pt li[id^=a_]{
    display: none;
}
.close {
    border:1px solid #fff;
    border-radius: 50%;
    width:40px;
    height: 40px;
    position:relative;
    cursor:pointer;
    left: 50%;
    transform: translate(-50%,7.3vh);
}
.close:before{
    content:"";
    width: 1px;
    height: 30px;
    transform: rotate(45deg);
    background:#fff;
    position: absolute;
    top:5px;
    left:20px;
}
.close:after{
    content:"";
    width: 1px;
    height: 30px;
    transform: rotate(-45deg);
    background:#fff;
    position: absolute;
    top:5px;
    left:20px;
}

/*.md_pt li:not(#pt_01):not(.pt_01){
    display: none;
}*/


.main_v{
    width: 100vw;
    background:url("../images/life/bg.png") no-repeat top center;
    background-size:100% auto;
    background-color:#8CC832;
    min-width:1400px;
    max-width:1920px;
    margin:0 auto;
    overflow: hidden;
    position:relative;
}
.area {
    stroke-width: 0;
    opacity: 0;
    transition: .25s;
    cursor: pointer;
}
.btn,.txt{
    display:none;
}
.main_v a{
    text-decoration: none;
}
.link:hover .btn{
    opacity: 1;
}
.link:hover text tspan{
    display: block;
}

.balloon,
.balloon_btm,
.balloon_side,
.balloon_diag{
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:45px;
    box-sizing:border-box;
}
.balloon p,
.balloon_btm p,
.balloon_side p,
.balloon_diag p{
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    white-space:pre;
    letter-spacing: 1px;
}

.balloon.show,
.balloon_btm.show,
.balloon_side.show,
.balloon_diag.show {
	opacity: 1;
}
.balloon ul,
.balloon_btm ul,
.balloon_side ul,
.balloon_diag ul{
    display: none;
}
.balloon_btm {
    background:url("../images/life/fuki_btm.svg") no-repeat center center;
    background-size:contain;
    /*transform: translate(-50%,-50%);*/
}
.balloon_side {
    background:url("../images/life/fuki_side.svg") no-repeat center center;
    background-size:contain;
    /*transform: translate(-50%,-50%);*/
}
.balloon_diag{
    background:url("../images/life/fuki_diag.svg") no-repeat center center;
    background-size:contain;
    /*transform: translate(-50%,-50%);*/
}
.balloon{
    background:url("../images/life/fuki.svg") no-repeat center center;
    background-size:contain;
    /*transform: translate(-50%,-50%);*/
}

@media screen and (max-width:1400px){
    body#life{
        overflow-y: hidden;
    }
    .main_v{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1400px;
      height:741px;  
    }
    body#life #footer {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media screen and (max-width:768px){
    
    html,body{
        height:100%;
        overflow: visible;
    }
    body#life {
        overflow-y: scroll;
    }
    body#life #wrapper{
        padding-bottom:0;
    }
    body#life #container{
        height:auto;
        max-height:100%;
    }
    body#life #header{
        top: 0;
        left: 0;
    }
    body#life #footer {
        position: static;
        bottom: 0;
        left: 0;
        transform: none;
    }
    .main_v{
        display: none;
    }
    br.sp{
        display: block;
    }
    .title_bg {
        background: url(/sp/images/bnr_life_sp.png) no-repeat;
        background-size: cover;
        width:100%;
        min-height: 214px;
        position: relative;
        margin-top:10px;
    }
    h1 {
        width:80%;
        background:rgba(255,255,255,0.9);
        font-size:22px;
        border-radius: 10px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        text-align: center;
    }
    .sp_pds{
        display: block;
        background-color:#fff;
        
    }
    .life_pds {
        display: flex;
        flex-wrap: wrap;
        margin:0 12px 30px 12px;
    }
    .life_pds li {
        width:50%;
        height: auto;
        text-align: center;
        border-bottom:1px dashed #ccc;
        box-sizing: border-box;
    }
    .life_pds li:nth-child(odd){
        border-right:1px dashed #ccc;
    }
    .life_pds li span{
        display: block;
        font-weight: bold;
        margin-bottom:20px;
    }
    .life_pds li img {
        width:  100%;
        height: auto;
        display: inline-block;
        padding:10px;
        box-sizing: border-box;
    }
/*モーダル*/
    .mask{
        overflow: auto;
    }
    .pt_dtl{
        width:100%;
        margin-top:20px;
    }
    .pt_img {
        width:70%;/*画像サイズ、見え方によって調整*/
        height:auto;
        margin:0 auto;
    }
    .modal {
        margin-top:50px;
        padding:20px;
    }
    .modal h2.pt_ttl{
        margin: 0;
        font-size: 1.6em;
    }
    .modal ul.md_pt{
        max-height: 62vh;
        overflow-y: scroll;
        padding-right: 0;
        margin:0 0 -40px 0;
    }
    .modal ul.md_pt li .md_list{
        display: block;
        margin-bottom:40px;
    }

    .used_link li {
        width:100%;
    }
    .used_link li{
        margin-right: 0;
    }
    .close{
        transform: translate(-50%,12vh);
    }
    .balloon, .balloon_btm, .balloon_side, .balloon_diag{
    	display: none;
   }
}