@charset "UTF-8";
/*! Writen  by SCSS */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap");
.lf_ttl {
  padding: 30px 20px; }
  .lf_ttl.c1 {
    background: #071c26; }
  .lf_ttl.c2 {
    background: #071c26; }
  @media screen and (max-width: 767px) {
    .lf_ttl {
      padding: 10px 20px; } }

.lifeinfo {
  position: relative;
  /*エリアインフォサイドバー・カスタマイズ*/
  /*.minutesList::-webkit-scrollbar {
  	width: 2%;
  }
  .minutesList::-webkit-scrollbar-thumb {
  	background-color: #02243d;
  	border-radius: 0;
  }
  .minutesList::-webkit-scrollbar-track {
  	border-radius: 0;
  	background: #eee;
  }*/ }
  .lifeinfo .t1 {
    text-align: center;
    line-height: 1;
    margin-bottom: 2.5em;
    font-size: clamp(18px, calc(26vw / 11.1), 26px);
    letter-spacing: 0.1em; }
  .lifeinfo .tab {
    width: 100%;
    max-width: 1110px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between; }
    @media screen and (max-width: 767px) {
      .lifeinfo .tab {
        position: absolute;
        top: 315px;
        left: 0;
        right: 0;
        width: 100%;
        flex-wrap: wrap;
        border-right: solid 1px #071c26;
        border-bottom: solid 1px #071c26;
        z-index: 1;
        position: relative;
        top: auto; } }
    .lifeinfo .tab li {
      height: 45px;
      width: calc(183% / 11.1);
      text-align: center;
      box-sizing: border-box;
      transition: 0.2s ease-in-out;
      color: #fff;
      cursor: pointer;
      font-size: clamp(11px, calc(15vw / 11.1), 15px);
      letter-spacing: -0.03em;
      line-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      background: #9aa4a9; }
      @media screen and (max-width: 480px) {
        .lifeinfo .tab li {
          font-size: calc(13vw / 3.9); } }
      @media (hover: hover) {
        .lifeinfo .tab li:hover {
          background: #071c26; } }
      .lifeinfo .tab li.select {
        background: #071c26; }
      @media screen and (max-width: 767px) {
        .lifeinfo .tab li {
          width: calc(100% / 3);
          font-size: 11px;
          height: 40px;
          margin-left: 0; } }
  @media screen and (max-width: 767px) and (hover: hover) {
    .lifeinfo .tab li:hover {
      height: 40px; } }
      @media screen and (max-width: 767px) {
          .lifeinfo .tab li.select {
            height: 40px; }
          .lifeinfo .tab li span {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center; } }
    @media screen and (max-width: 767px) {
      .lifeinfo .tab.c1 li {
        border-right: none;
        border-bottom: none; } }
    @media (hover: hover) {
      .lifeinfo .tab.c1 li:hover {
        background: #071c26; } }
    .lifeinfo .tab.c1 li.select {
      background: #071c26; }
    @media (hover: hover) {
      .lifeinfo .tab.c2 li:hover {
        background: #071c26; } }
    .lifeinfo .tab.c2 li.select {
      background: #071c26; }
  .lifeinfo .scroll-attention {
    text-align: left;
    font-size: 11px;
    margin-left: 2px;
    margin-top: -10px;
    margin-bottom: 25px;
    position: relative; }
    .lifeinfo .scroll-attention p {
      color: #777;
      font-size: 11px;
      display: inline-block;
      background: #fff;
      position: relative;
      z-index: 2;
      padding-right: 15px; }
    .lifeinfo .scroll-attention::before {
      content: "";
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #777;
      opacity: 0.3; }
    .lifeinfo .scroll-attention::after {
      content: "";
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 20%;
      height: 1px;
      background: #777;
      opacity: 0.6;
      animation: animate1 2s 0.3s ease infinite; }
@keyframes animate1 {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }
  .lifeinfo .tab-others {
    border-right: 1px solid #DDDDDD; }
  .lifeinfo .tabContent {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden; }
    .lifeinfo .tabContent li {
      display: none;
      max-height: 600px;
      /*position: absolute;
      width: 100%;
      top: 0;
      left: 0;*/ }
      @media screen and (max-width: 767px) {
        .lifeinfo .tabContent li {
          max-height: none; } }
  .lifeinfo .tabContent li:first-child {
    position: relative; }
  .lifeinfo .tabContent li.select {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    @media screen and (max-width: 767px) {
      .lifeinfo .tabContent li.select {
        display: block; } }
  .lifeinfo .tabContent #guide-access {
    position: inherit; }
  .lifeinfo .hide {
    opacity: 0;
    z-index: -1; }
  .lifeinfo .axgmap {
    width: calc(740% / 11.1);
    height: 600px; }
    @media screen and (max-width: 767px) {
      .lifeinfo .axgmap {
        margin-bottom: 115px; } }
    @media screen and (max-width: 480px) {
      .lifeinfo .axgmap {
        margin-bottom: 0; } }
  .lifeinfo .minutesList {
    width: calc(370% / 11.1);
    max-height: 600px;
    overflow-y: scroll;
    background: #fff; }
    @media screen and (max-width: 1080px) {
      .lifeinfo .minutesList {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; } }
    @media screen and (max-width: 767px) {
      .lifeinfo .minutesList {
        width: 100%;
        display: block; } }
  .lifeinfo .minutesList .list {
    font-size: 12px;
    font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", YuMincho, "游明朝体", 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','HGS明朝E','ＭＳ Ｐ明朝', serif;
    color: #333;
    letter-spacing: -0.03em;
    width: 90%;
    margin: 0 auto 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #ccc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; }
    @media screen and (max-width: 1080px) {
      .lifeinfo .minutesList .list {
        width: 48%; } }
    @media screen and (max-width: 767px) {
      .lifeinfo .minutesList .list {
        display: block;
        width: 95%; } }
  .lifeinfo .minutesList .list h4 {
    line-height: 26px;
    color: #333;
    display: flex;
    align-items: center;
    flex: 1; }
  .lifeinfo .minutesList .list h4 span {
    display: block;
    white-space: nowrap; }
  .lifeinfo .minutesList .list h4 span:first-child {
    width: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 20px;
    font-size: 110%;
    margin-right: 5px;
    position: relative;
    z-index: 5;
    /*display: block;
    text-align: center;
    vertical-align: middle;*/ }
    .lifeinfo .minutesList .list h4 span:first-child::after {
      content: "";
      position: absolute;
      top: 1px;
      left: 1px;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      z-index: -1; }
  .lifeinfo .c1 .minutesList .list h4 span:first-child::after {
    background: #071c26; }
  .lifeinfo .c2 .minutesList .list h4 span:first-child::after {
    background: #071c26; }
  .lifeinfo .minutesList .list h4 span:nth-child(2) {
    width: calc(100% - 29px);
    text-align: left; }
  .lifeinfo #main .minutesList .list p {
    text-align: right;
    line-height: 1.3;
    letter-spacing: 0;
    color: #333;
    padding-left: 29px; }
  .lifeinfo .minutes {
    text-align: right;
    line-height: 1.3;
    letter-spacing: 0;
    color: #000;
    margin: 0 0 0 auto; }
  @media screen and (max-width: 1200px) {
    .lifeinfo .minutesList .list {
      font-size: 11px; }
    .lifeinfo .minutesList .list h4 {
      line-height: 1.5; } }
  @media screen and (max-width: 1080px) {
    .lifeinfo .tab li {
      font-size: 12px; }
    .lifeinfo .axgmap {
      width: 100%;
      float: none; }
    .lifeinfo .minutesList {
      width: 100%;
      float: none; }
    .lifeinfo .minutes {
      min-width: 17%; }
    .lifeinfo .minutesList .list h4 {
      line-height: 20px; }
    .lifeinfo .minutesList .list h4 span:first-child {
      width: 20px;
      height: 20px; } }
  @media screen and (max-width: 768px) {
    .lifeinfo .notap {
      width: 50%;
      height: 50px;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2; }
    .lifeinfo .axgmap {
      width: 100%;
      float: none;
      height: 300px;
      height: 100%;
      aspect-ratio: 1; }
    .lifeinfo .minutesList {
      width: 100%;
      float: none;
      margin-right: auto;
      margin-left: auto;
      height: 300px;
      margin-top: 30px; } }
  @media screen and (max-width: 767px) {
    .lifeinfo .minutesList .list {
      margin: 0 auto 10px;
      font-size: 12px; } }

/*# sourceMappingURL=lifeinfo.css.map */