@charset "UTF-8";
div.intro{
  width: min(1120px,100%);
  padding: 0 16px;
  margin-inline: auto;
  margin-bottom: 40px;

  div.textContent{
    width: min(720px,100%);
    padding: 0 16px;
    padding-top: 48px;
    margin-inline: auto;

    p.heading{
      margin-bottom: 24px;

      font-size: 24px;
      font-family: 'LINE Seed JP_OTF Bold';
      color: #1359E8;
      text-align: center;
    }
    p.text{
      line-height: 1.6;
    }
  }
}
div#access{
  position: relative;

  .float{
    position: absolute;
    z-index: -1;
    bottom: 50%;
    left: -3.4dvw;
  }

  .inner{

    width: min(1120px,100%);
    padding: 0 16px;
    margin-inline: auto;
  }

  ul.access-link{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    column-gap: 24px;
    row-gap: 24px;
    margin-bottom: 80px;

    li a{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .6em;

      color: #fff;
      background: #1359E8;
    }
  }
  h3{
    padding-bottom: 64px;
    font-size: 42px;
    font-family: 'LINE Seed JP_OTF Bold';
  }
  section{
    padding-bottom: 96px;
  }
}
div#access ul.placeCON{
  >*+*{
    margin-block-start: 56px;
  }
  >li{
    h4{
      margin-bottom: 24px;
      font-size: 25px;
      color: #1359E8;
      font-family: 'LINE Seed JP_OTF Bold';
    }
    address{
      margin-bottom: 16px;
      
      ul.address-list{
        >*+*{
          margin-block-start: 8px;
        }
        >li{
          display: flex;
          align-items: center;
          gap: .3em;

          picture{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
          }
        }
        .google-link{
          a{
            display: inline-flex;
            align-items: center;
            gap: 0.6em;
    
            color: #1359E8;
          }
      }
    }
    }
    div.content{
      display: grid;
      grid-template-columns: 1fr 1.618fr;
      column-gap: 24px;

      picture{
        width: 100%;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      iframe{
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
    div.content-imgCON{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      column-gap: 24px;

      picture{
        width: 100%;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      iframe{
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
@media (min-width : 1200px){
  div#access{
    ul.access-link{
      li a:hover{
        opacity: 0.8;
        transition: 0.3s all linear;
      }
    }
  }
  div#access ul.placeCON{
    .google-link:hover{
        a:hover{
          text-decoration: underline;
      }
    }
  }
}
@media (max-width : 1200px){
  div#access{
    ul.access-link{
      display: grid;
      grid-template-columns: repeat(3,1fr);
    }
  }
}
@media (max-width : 599px){
  div.intro{
    padding: 0 3.2dvw;
    margin-bottom: 8dvw;
  
    div.textContent{
      padding: 0 3.2dvw;
      padding-top: 9.6dvw;
  
      p.heading{
        margin-bottom: 4.8dvw;
  
        font-size: 4.8dvw;
      }
    }
  }
  div#access{
    .float{
      width: 17dvw;
    }
  
    .inner{
      padding: 0 3.2dvw;
    }
  
    ul.access-link{

      display: grid;
      grid-template-columns: repeat(2,1fr);
      column-gap: 3.2dvw;
      row-gap: 3.2dvw;
      margin-bottom: 16dvw;
    }
    h3{
      padding-bottom: 12.8dvw;
      font-size: 8.4dvw;
    }
    section{
      padding-bottom: 19.2dvw;
      position: relative;
      z-index: 1;
    }
  }
  div#access ul.placeCON{
    >*+*{
      margin-block-start: 11.2dvw;
    }
    li{
      h4{
        margin-bottom: 4.8dvw;
        font-size: 5dvw;
      }
      address{
        grid-template-columns: repeat(1,auto);
        row-gap: 1.6dvw;
        margin-bottom: 3.2dvw;
      }
      .google-link{
        margin-bottom: 4.8dvw;
      }
      div.content{
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 3.2dvw;
  
        picture{
          width: 100%;
          aspect-ratio: 16/9;
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        iframe{
          display: inline-block;
          width: 100%;
          height: auto;
          aspect-ratio: 16/9;
        }
      }
    }
  }
}