body#location section#fv {
  background-color: var(--expcolor);
}

body#location section#cfa {
  background-color: var(--expcolor);
}

body#location {
  nav.pageNav {
    background-color: var(--expcolor);
    ol {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      border-bottom: var(--bodycolor) solid 1px;
      li {
        display: block;
        width: 30%;
        border: var(--bodycolor) solid 1px;
        border-bottom: unset;
        &.active {
          background-color: var(--buttoncolor);
        }
        a {
          display: block;
          padding: 1rem 0;
          font-size: 1.5rem;
          color: var(--bodycolor);
          text-align: center;
          text-decoration: none;
          transition: var(--all);
          &:hover {
            opacity: .6;
          }
        }
      }
    }
  }
}

body#location section#area {
  padding-top: 10rem;
  background-color: var(--expcolor);
  .bg {
    padding: 8rem 0;
    color: var(--bodycolor);
    background-image: url(../img/location/area_bg.webp);
    .pickup {
      position: relative;
      margin: 15rem auto;
      &:before {
        position: absolute;
        left: 15%;
        bottom: -10%;
        content: "";
        width: 70%;
        height: 120%;
        background: linear-gradient(90deg,rgba(60, 51, 51, 1) 0%, rgba(200, 200, 200, 0.3) 100%);
        opacity: .6;
        mix-blend-mode: multiply;
      }
      h3 {
        position: relative;
        margin: 5rem 0;
        font-size: 1.8rem;
        &:before {
          position: absolute;
          left: 0;
          top: 50%;
          content: "";
          width: calc(50% - 26rem);
          height: 1px;
          background-color: var(--bodycolor);
        }
        &:after {
          position: absolute;
          right: 0;
          top: 50%;
          content: "";
          width: calc(50% - 26rem);
          height: 1px;
          background-color: var(--bodycolor);
        }
      }
      ol {
        li {
          figure {
            figcaption {
              color: var(--bodycolor);
            }
          }
        }
      }
    }
  }
}
body#location section#pleasure {
  padding-top: 4rem;
  background-color: var(--subcolor);
  figure {
    .title {
      position: absolute;
      left: 50%;
      bottom: -.5em;
      z-index: 2;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10rem;
      letter-spacing: .6rem;
      color: RGBA(255,255,255,.4);
      transform: translateX(-50%);
    }
  }
  .bg {
    color: var(--expcolor);
    background-image: url(../img/location/pleasure_bg.webp);
    .shimokitazawa {
      padding-top: 8rem;
      .pickup {
        margin: 8rem auto;
        padding: 0 5%;
        ol {
          li {
            figure {
              figcaption {
                color: var(--expcolor);
              }
            }
          }
        }
      }
      .culture {
        .pickup {
          ol {
            li {
              &:nth-child(1) {
                margin-top: -10vw;
              }
              &:nth-child(3) {
                margin-top: 3vw;
              }
            }
          }
        }
      }
      .shop {
        .pickup {
          ol {
            li {
              &:nth-child(2) {
                margin-top: 3vw;
              }
            }
          }
        }
      }
    }
    .ikenoue {
      padding-bottom: 10rem;
      background: linear-gradient(0deg,rgba(34, 38, 33, 0.5) 0%, rgba(34, 38, 33, 0.5) 45%, rgba(44, 44, 44, 0) 100%);
      .pickup {
        .title {
          position: relative;
          font-family: 'Cormorant Garamond', serif;
          font-size: 10rem;
          letter-spacing: .6rem;
          color: RGBA(255, 255, 255, .4);
          text-align: center;
        }
        h3 {
          position: relative;
          margin: 1rem 0;
          font-size: 1.8rem;
          color: var(--bodycolor);
          &:before {
            position: absolute;
            left: 0;
            top: 50%;
            content: "";
            width: calc(50% - 26rem);
            height: 1px;
            background-color: var(--bodycolor);
          }
          &:after {
            position: absolute;
            right: 0;
            top: 50%;
            content: "";
            width: calc(50% - 26rem);
            height: 1px;
            background-color: var(--bodycolor);
          }
        }
        .explanation {
          position: relative;
          margin-top: 3rem;
          color: var(--bodycolor);
        }
        ol {
          flex-wrap: wrap;
          margin-top: 4rem;
          li {
            width: calc(33.33% - 1.33rem);
          }
        }
        &:before {
          position: absolute;
          left: 15%;
          top: 8%;
          content: "";
          width: 70%;
          height: 98%;
          background: linear-gradient(90deg,rgba(34, 38, 33, 1) 0%, rgba(44, 44, 44, 0.3) 40%, rgba(44, 44, 44, 1) 100%);
          opacity: .3;
          /* mix-blend-mode: multiply; */
        }
      }
    }
  }
}
body#location section#area,
body#location section#pleasure {
  .bg {
    background-position: center;
    background-size: cover;
    overflow: hidden;
    .bodycopy {
      text-align: center;
    }
    .explanation {
      margin-top: 4rem;
      text-align: center;
    }
    .set {
      display: flex;
      gap: 5vw;
      align-items: center;
      margin-top: 10rem;
      .copy {
        padding-left: 10vw;
        width: 40%;
        min-width: 450px;
        .bodycopy {
          text-align: justify;
        }
        .explanation {
          text-align: justify;
          /* white-space: nowrap; */
        }
      }
      figure {
        /* min-width: 400px; */
        max-width: 1000px;
        figcaption {
        }
      }
      &.reverse {
        flex-direction: row-reverse;
        .copy {
          padding-left: unset;
          padding-right: 10vw;
        }
      }
    }
    .pickup {
      padding: 0 10vw;
      ol {
        display: flex;
        gap: 2rem;
        li {
          figure {
            figcaption {
              position: relative;
              right: unset;
              bottom: unset;
              margin-top: .5rem;
              line-height: 1.5rem;
              text-align: left;
            }
          }
        }
      }
    }
  }
}

/*LIFEINFOMATGION*/
body#location section#lifeinformation {
  margin: 10rem auto;
  h2 {
  }
  figure {
    margin: 1.5rem 0 4rem;
  }
  nav {
    margin-top: 4rem;
    border-bottom: var(--expcolor) solid 1px;
    ul {
      display: flex;
      flex-wrap: noWrap;
      justify-content: center;
      gap: clamp(0.625rem, 0.208rem + 0.87vw, 1.25rem);
      margin: auto;
      width: 90%;
      li {
        position: relative;
        list-style: none;
        width: calc( 14.28% - 17px);
        font-size: 1rem;
        line-height: 3.75;
        text-align: center;
        color: var(--expcolor);
        border: var(--expcolor) solid 1px;
        border-bottom: unset;
        cursor: pointer;
        &.active {
          color: var(--bodycolor);
          background-color: var(--subcolor);
        }
      }
    }
  }
  .place {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    .gmap {
      width: 800px;
      height: 600px;
      .flag {
        h4 {
          margin: 0 5px 5px;
          padding: 2px 5px;
          color:#fff;
        }
        p {
          margin-bottom: 0;
        }
      }
      .gm-ui-hover-effect {
        outline: none;
      }
    }
    .list {
      position: relative;
      padding: 2px;
      width: 300px;
      height: 600px;
      background-color: var(--bodycolor);
      &>div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        &.active {
          visibility: visible;
        }
        ul {
          height: 100%;
          overflow-y: scroll;
          li {
            display: block;
            padding: .5em 1em;
            text-align: justify;
            line-height: 1em;
            border-bottom: var(--bodycolor) solid 1px;
            background-color: #f5f5f5;
            cursor: pointer;
            p {
              /* margin-bottom: .5rem; */
              pointer-events: none;
            }
            .name {
              text-indent: -2em;
              margin-left: 2em;
              font-size: 1.2rem;
              .num {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;
                margin-top: 3px;
                margin-right: 3px;
                border-radius: 50%;
                box-sizing: border-box;
                font-size: 120%;
                text-indent: 0em;
                line-height: 1.4;
                color: #FFF;
                text-align: center;
                letter-spacing: 0;
              }
            }
            .spec {
              font-size: 1rem;
              text-indent: 2.5em;
              line-height: 1.8em;
            }
          }
        }
      }
    }
  }
}

section#lifeinformation .place .list>div.shopping ul li .name .num {
  background-color: #ea5556;
}
section#lifeinformation .place .list>div.public ul li .name .num {
  background-color: #863991;
}
section#lifeinformation .place .list>div.finance ul li .name .num {
  background-color: #f0bb43;
}
section#lifeinformation .place .list>div.education ul li .name .num {
  background-color: #765449;
}
section#lifeinformation .place .list>div.park ul li .name .num {
  background-color: #1d9558;
}
section#lifeinformation .place .list>div.medical ul li .name .num {
  background-color: #394899;
}



@media all and (min-width: 769px) and (max-width: 1000px) {

  body#location section#area,
  body#location section#pleasure {
    & .bg {
      & .set {
        .copy {
          min-width: 40%;
        }
      }
    }
  }

}



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

  body#location {
    nav.pageNav {
      ol {
        li {
          width: 100%;
          &.active {
          }
          a {
          }
        }
      }
    }
  }

  body#location section#area {
    padding-top: 2rem;
    .bg {
      padding: 4rem 0;
      .pickup {
        margin: 5rem auto;
        &:before {
        }
        h3 {
          margin: 5rem 0 1rem;
          font-size: 3vw;
          line-height: 2rem;
          &:before {
            width: 6vw;
          }
          &:after {
            width: 6vw;
          }
        }
        ol {
          gap: 10px;
          li {
            figure {
              figcaption {
              }
            }
          }
        }
      }
    }
  }
  body#location section#pleasure {
    padding-top: 2rem;
    figure {
      .title {
        font-size: 10vw;
      }
    }
    .bg {
      .shimokitazawa {
        padding-top: 4rem;
        .pickup {
          margin: 4rem auto;
          ol {
            gap: 10px;
            li {
              figure {
                figcaption {
                }
              }
            }
          }
        }
        .culture {
          .pickup {
            ol {
              li {
                &:nth-child(1) {
                  margin-top: unset;
                }
                &:nth-child(3) {
                  margin-top: unset;
                }
              }
            }
          }
        }
        .shop {
          .pickup {
            ol {
              li {
                &:nth-child(2) {
                  margin-top: unset;
                }
              }
            }
          }
        }
      }
      .ikenoue {
        padding-bottom: 5rem;
        .pickup {
          .title {
            font-size: 10vw;
          }
          h3 {
            /* margin: 5rem 0 1rem; */
            font-size: 3.5vw;
            line-height: 2rem;
            &:before {
              width: 10vw;
            }
            &:after {
              width: 10vw;
            }
          }
          .explanation {
            margin-top: 2rem;
            font-size: 3vw;
          }
          ol {
            gap: 10px;
            margin-top: 2rem;
            margin-left: -5%;
            width: 110%;
            li {
              width: calc(50% - 5px);
            }
          }
          &:before {
            top: 3%;
            height: 100%;
          }
        }
      }
    }
  }
  body#location section#area,
  body#location section#pleasure {
    .bg {
      .bodycopy {
        line-height: clamp(2.4rem, 1.6rem + 1.67vw, 3.6rem);
      }
      .explanation {
        margin-top: 1rem;
        line-height: clamp(2.4rem, 1.6rem + 1.67vw, 3.6rem);
      }
      .set {
        flex-direction: column-reverse;
        margin-top: 5rem;
        .copy {
          padding: 0 5%;
          width: 100%;
          min-width: unset;
          .bodycopy {
          }
          .explanation {
          }
        }
        figure {
          figcaption {
          }
        }
        &.reverse {
          flex-direction: column-reverse;
          .copy {
            padding: 0 5%;
          }
        }
      }
      .pickup {
        padding: 0 5vw;
        ol {
          li {
            figure {
              figcaption {
              }
            }
          }
        }
      }
    }
  }

  /*LIFEINFOMATGION*/
  body#location section#lifeinformation {
    margin: 5rem auto;
    h2 {
      font-size: 4vw;
    }
    figure {
    }
    nav {
      margin-top: 2rem;
      border-bottom: unset;
      ul {
        gap: 6px;
        flex-wrap: wrap;
        width: 100%;
        li {
          width: calc(50% - 3px);
          border: var(--expcolor) solid 1px;
          order: 1;
          &.active {
            /* width: 100%;
            order: 0; */
          }
        }
      }
    }
    .place {
      flex-direction: column;
      margin-top: 10px;
      .gmap {
        width: 100%;
        height: 60vh;
        .flag {
          h4 {
          }
          p {
          }
        }
        .gm-ui-hover-effect {
        }
        &::before {
          position: absolute;
          left: 0;
          top: 50%;
          z-index: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          transform: translateY(-50%);
          content: "\02195";
          padding: 2em 5px;
          font-size: 200%;
          color: var(--bodycolor);
          background-color: var(--subcolor)
        }
      }
      .list {
        width: 100%;
        height: 180px;
        &>div {
          &.active {
          }
          ul {
            li {
              p {
              }
              .name {
                .num {
                }
              }
              .spec {
              }
            }
          }
        }
      }
    }
  }

}