@charset "utf-8";

/*　-----------------------　ライフインフォ　-----------------------　*/
#sec_lifeinfo {
  margin-top:  calc(100vw / 1920 * 100);
}

#sec_lifeinfo h2 {
  text-align: center;
  margin-top: calc(100vw / 1920 * 50);
  margin-bottom: calc(100vw / 1920 * 50);
}
#sec_lifeinfo h2 img {
  width: calc(100vw / 1920 * 360);
}

/*　-------　*/

#sec_lifeinfo .tabs {
    padding-bottom: 120px;
}
#sec_lifeinfo ul.tab {
    display: flex;
    justify-content: space-between;
    width:  calc(100vw / 1920 * 1012);
    margin-left: auto;
    margin-right: auto;
}
#sec_lifeinfo ul.tab li {
    width: 24%;
}
#sec_lifeinfo ul.tab li a {
    display: block;
    text-align: center;
    padding: 2px;
    transition: .3s;
    background-color: #95826c;
    color: #fff;
    font-size: 1.0vw;
    letter-spacing: 0;
    line-height: 1;
}
#sec_lifeinfo ul.tab li a span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
    width: 100%;
}


#sec_lifeinfo ul.tab li.active a span {background-image: linear-gradient(90deg, #dbd4b2, #695d35 50%, #dbd4b2);}





#sec_lifeinfo .area {
    display: none;
    opacity: 0;
    width:  calc(100vw / 1920 * 1012);
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(100vw / 1920 * 40);
}
#sec_lifeinfo .area.is-active {
    display: block;
    opacity: 1;
    animation-name: displayAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
#sec_lifeinfo .area .life_info_inner {
}

#sec_lifeinfo .area .life_info_inner .life_map {
  width: 100%;
}

/* ----------------------- */
/* 1100*/
/* ----------------------- */
@media screen and (max-width: 1280px) {


#sec_lifeinfo h2 img {
  width: 30%;
}
#sec_lifeinfo ul.tab li {
}
#sec_lifeinfo ul.tab,
#sec_lifeinfo .area {
    width: 80%;
}

}

/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {

#sec_lifeinfo h2 img {
    width: 80%;
}

#sec_lifeinfo h2 {
  font-size: 3.5vw;
}
#sec_lifeinfo h2 span {
  padding:0 1em;
}

/* ----- */

#sec_lifeinfo h2 {
    width: 90%;
    margin: auto;
    padding: 16vw 0 10vw;
}
#sec_lifeinfo .tabs {
    padding-bottom: 16vw;
}
#sec_lifeinfo ul.tab {
    width: 98%;
    flex-wrap: wrap;
    justify-content: center;
}
#sec_lifeinfo ul.tab li {
    width: 48%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 2.5vw;
}
#sec_lifeinfo ul.tab li a {
    font-size: 2.8vw;
}


#sec_lifeinfo .area {
    opacity: 0;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-top: 3vw;
}
#sec_lifeinfo .area.is-active {
    display: block;
    opacity: 1;
    animation-name: displayAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
#sec_lifeinfo .area .life_info_inner {
    display: block;
}
#sec_lifeinfo .area .life_info_inner .life_info.pc {
    display: block;
    margin-top: 5vw;
    padding: 0 5%;
}
#sec_lifeinfo .area .life_info_inner .life_map {
 text-align: center;
 letter-spacing: 0;
}

}