body{
  padding: 0px;
  margin: 0px;
  font-family: "WDXL Lubrifont JP N", 'M PLUS Rounded 1c', 'Product Sans', Arial, sans-serif;
  background-image: url(/img/bg.jpg);
  background-color:rgba(255,255,255,0.7);
  background-position: center center;
  background-blend-mode:lighten;
  background-repeat: no-repeat;
  background-size: cover;
}
ul#logo{
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  margin: auto auto;
  padding: 0;
  list-style-type: none;
  transform: translate(-50%, -50%);
  z-index: 10;
  /*display: none;*/
}
  ul li{
    position: relative;
    padding: 0;
    height: 53px;
  }
  ul li:last-child img{
    padding-top: 20px;
  }
    ul li img{
      position: absolute;
      top: 0;
      left: 50%;
      padding: 0;
      margin: 0;
      width: 80px;
      transform: translate(-50%, -50%);
    }
div#photos{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
  div#photos img{
    width: 100%;
  }
div#contents{
  position: relative;
  z-index: 1;
}
  /** お問い合わせ */
  div#contents section.inquiry{
    position: relative;
    width: 100%;
    padding-top: 10%;
    box-sizing: border-box;
    text-align: center;
  }
    div#contents section.inquiry h3{
      padding-bottom: 3%;
    }
    div#contents section.inquiry div.form{
      width: 70%;
      box-sizing: border-box;
      margin: auto auto;
    }
    div#contents section.inquiry label{
      padding-right: 20px;
      line-height: 40px;
      background-color: #ccc;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
    }
    div#contents section.inquiry p{
      display: grid;
      grid-template-columns: 30% 70%;
    }
      div#contents section.inquiry p.center{
        grid-template-columns: 100%;
        padding-top: 30px;
      }
        div#contents section.inquiry p button{
          display: inline-block;
          width: 200px;
          border-radius: 20px;
          line-height: 40px;
          border: 0;
          margin: auto auto;
          background-color: #ccc;
          transition : all 0.5s ease 0s;
        }
          div#contents section.inquiry p button:hover{
            background-color: #bbb;;
          }
    div#contents section.inquiry input{
      padding: 5px 15px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      border: 0;
    }
    div#contents section.inquiry textarea{
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      border: 0;
      width: 100%;
      height: 200px;
    }
    *:focus {
      outline: none;
      background-color: #f5f5f5;
    }

  /** お知らせ・催し案内 */
  div#contents section.event{
    position: relative;
    width: 100%;
    padding-top: 10%;
    box-sizing: border-box;
    text-align: center;
  }
    div#contents section.event h3{
      padding-bottom: 5%;
    }
    div#contents section.event .items{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3%;
    }
      div#contents section.event .items .square,
      div#contents section.event .items .triangle,
      div#contents section.event .items .circle{
        position: relative;
        width: 25%;
      }
      div#contents section.event .items .summary {
        text-align: left;
        padding: 3%;
        padding-top: 10%;
      }
      div#contents section.event .items .circle .photo .inner {
        width: 70%;
        aspect-ratio: 1 / 1;
        background-image: url('/img/content/1.jpg');
        background-position: center center;
        background-size: cover;
        border-radius: 100%;
        margin: auto auto;
      }
      div#contents section.event .items .square .photo .inner {
        width: 70%;
        aspect-ratio: 1 / 1;
        background-image: url('/img/content/1.jpg');
        background-position: center center;
        background-size: cover;
        margin: auto auto;
      }
      div#contents section.event .items .triangle .photo .inner {
        width: 80%;
        aspect-ratio: 1/cos(30deg);
        clip-path: polygon(50% 0,100% 100%,0 100%);
        background-image: url('/img/content/3.webp');
        background-position: center center;
        background-size: cover;
        margin: auto auto;
      }





  /** 地図 */
  div#contents section.map{
    position: relative;
    width: 100%;
    margin-top: 15%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 30% 70%;
    height: 400px;
    overflow: hidden;
  }
    div#contents section.map div.corp{
      position: relative;
      padding: 0;
      box-sizing: border-box;
    }
      div#contents section.map div.corp p{
        position: absolute;
        bottom: 15px;
        width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        text-align: center;
      }
      div#contents section.map div.corp ul{
        list-style-type: none;
        padding: 20px;
        margin: 0;
      }
        div#contents section.map div.corp ul li{
          padding: 0;
          margin: 0;
          height: 30px;
          line-height: 30px;
        }
          div#contents section.map div.corp ul li span:last-child{
            font-weight: bold;
          }
        div#contents section.map div.corp ul li:first-child{
          font-size: 20pt;
          font-weight: bold;
          padding-bottom: 60px;
        }
        div#contents section.map div.corp ul li:nth-child(n+2){
          display: grid;
          grid-template-columns: 80px auto;
        }
        div#contents section.map div.corp ul li:nth-child(2){
          height: 80px;
          line-height: 25px;
        }
    div#contents section.map .inner{
      width: 100%;
      height: 400px;
      filter: grayscale(100%);
    }
      div#contents section.map .inner iframe{
        width: 100%;
        height: 100%;
      }
  div#contents section.left{
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 30% 70%;
    height: 400px;
  }
    div#contents section.left.big{
      grid-template-columns: 40% 60%;
      height: 450px;
      padding-bottom: 50px;
    }
  div#contents section.center,
  div#contents section.right{
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 70% 30%;
    height: 400px;
  }
  div#contents section.center{
    grid-template-columns: 60% 40%;
  }
    div#contents section.right.long{
      grid-template-columns: 40% 60%;
      margin-top: 5%;
    }
    div#contents section.center div.photo,
    div#contents section.right div.photo,
    div#contents section.left div.photo{
      position: relative;
      text-align: center;
    }
      div#contents section.center div.photo .inner,
      div#contents section.right div.photo .inner,
      div#contents section.left div.photo .inner{
        box-sizing: border-box;
        width: 75%;
        margin-top: 15%;
        margin-left: 15%;
        aspect-ratio: 1 / 1;
        background-color: #aaa;
        background-image: url('/img/content/1.jpg');
        background-position: center center;
        background-size: cover;
      }
        div#contents section.center div.photo .inner{
          margin-left: 0;
          margin-right: 20%;
          width: 45%;
        }
        div#contents section.left.big div.photo .inner{
          width: 80%;
        }
        div#contents section.right.long div.photo .inner{
          width: 100%;
          aspect-ratio: 7 / 3;
          margin: 0;
        }
      div#contents section.right div.photo .inner{
        background-image: url('/img/content/2.jpg');
      }
      div#contents section.circle div.photo .inner{
        border-radius: 100%;
      }
      div#contents section.triangle div.photo .inner{
        position: absolute;
        top: 0;
        right: 100px;
        width: 300px;
        aspect-ratio: 1/cos(30deg);
        clip-path: polygon(50% 0,100% 100%,0 100%);
        background-image: url('/img/content/3.webp');
        background-position: center center;
        background-size: cover;
      }
      div#contents section.square div.photo .inner{
        aspect-ratio: 1 / 1;
        background-image: url('/img/content/2.jpg');
      }
    div#contents section.center div.text,
    div#contents section.right div.text,
    div#contents section.left div.text{
      text-align: center;
    }
      div#contents section.center div.text .inner,
      div#contents section.right div.text .inner,
      div#contents section.left div.text .inner{
        writing-mode: vertical-rl;
        display: inline-block;
        text-align: left;
        height: 100%;
        padding-top: 5%;
      }
        div#contents section.center div.text .inner h3,
        div#contents section.right div.text .inner h3,
        div#contents section.left div.text .inner h3{
          font-size: 16pt;
        }
          div#contents section.center div.text .inner p,
          div#contents section.right div.text .inner p,
          div#contents section.left div.text .inner p{
            padding-top: 16pt;
          }






  div#contents section.c1{
    position: absolute;
    top: -280px;
    left: -150px;
    border-radius: 100%;
    width: 50%;
    aspect-ratio: 1 / 1;
    background-color: #aaa;
    background-image: url('/img/content/1.jpg');
    background-position: center center;
    background-size: contain;
  }
  div#contents section.s1{
    position: absolute;
    top: 450px;
    right: 20px;
    width: 50%;
    aspect-ratio: 6 / 3;
    background-color: #aaa;
    background-image: url('/img/content/2.jpg');
    background-position: center center;
    background-size: contain;
  }
  div#contents section.s2{
    position: absolute;
    top: 950px;
    left: 100px;
    width: 30%;
    aspect-ratio: 1 / 1;
    background-color: #aaa;
    background-image: url('/img/content/3.webp');
    background-position: center center;
    background-size: contain;
  }
  div#contents section.t1{
    position: absolute;
    bottom: 0;
    right: -450px;
    width: 70%;
    aspect-ratio: 2 / 1;
    transform:skewX(-65deg);
    background-color: #aaa;
    overflow: hidden;
  }
    div#contents section.t1 img{
      width: 100%;
      transform:skewX(65deg);
    }
    div#contents section.t1 iframe{
      width: 100%;
      transform:skewX(65deg);
    }
  div#contents section.t2{
    position: absolute;
    top: 0;
    right: 100px;
    width: 300px;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% 0,100% 100%,0 100%);
    background-image: url('/img/content/3.webp');
    background-position: center center;
    background-size: cover;
  }