@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

html {
  font-size:62.5%;
}

body {
  font-family: 'Noto Serif JP', serif;
  font-size:1.5rem;
  line-height:1.8em;
  margin:0;
  padding:70px 40px 40px;
}
body::after {
  content:"";
  position:fixed;
  z-index:10000;
  bottom:0;
  left:0;
  width:100%;
  height:40px;
  background-color:#FFF;
}
img {
  max-width:100%;
  height:auto;
  pointer-events:none;
}




/* header
------------------*/
.main-header {
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  background-color:#FFF;
  width:100%;
  padding:15px 40px 10px;
  box-sizing:border-box;
}
.site-name {
  font-family: 'Cinzel', serif;
  font-size:3rem;
  font-weight: normal;
  margin:0;
}
.site-name .logo {
  height:40px;
}
.main-header .menu-btn {
  display:block;
  width:60px;
  height:30px;
  position:absolute;
  top:20px;
  right:40px;
}
.main-header .menu-btn span {
  display:block;
  position:absolute;
  width:100%;
  height:1px;
  background-color:#000;
  left:0;
  transition:all .3s ease;
}
.main-header .menu-btn span:nth-of-type(1) {
  top:0;
}
.main-header .menu-btn span:nth-of-type(2) {
  top:14px;
}
.main-header .menu-btn span:nth-of-type(3) {
  top:29px;
}
.main-header .menu-btn.--active span:nth-of-type(1) {
  transform: translateY(14px) rotate(45deg);
}
.main-header .menu-btn.--active span:nth-of-type(2) {
  opacity:0;
}
.main-header .menu-btn.--active span:nth-of-type(3) {
  transform: translateY(-14px) rotate(-45deg);
}

.global-nav {
  position: absolute;
  right: 40px;
  width: 220px;
  background-color:rgba(255,255,255,.75);
  backdrop-filter: blur(3px);
  top: 70px;
  padding: 20px;
  transition:all .5s ease;
  transform:translateX(10px);
  visibility: hidden;
  opacity:0;
}
.global-nav.--active {
  transform: translateX(0);
  visibility:visible;
  opacity: 1;
}
.global-nav > .list {
  margin:0;
}
.global-nav .item {
  margin-bottom:10px;
  font-size:1.8rem;
  line-height:1.05em;
}
.global-nav a {
  color:#333;
  text-decoration:none;
  display:block;
  padding:8px 4px;
  transition:all .3s ease;
}
.global-nav a.--hover {
  background-color:rgba(0,0,0,.25);
}




/* footer
------------------*/
.main-footer .copyright {
  margin-bottom:0;
  text-align:right;
}






/* Home
------------------*/
.main-visual {
  position:relative;
  height:60vh;
}
.main-visual-vr {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  height:100%;
}

.section-title {
  text-align:center;
  margin:0 0 25px;
}
.section-title .en {
  display:block;
  font-family: 'Cinzel', serif;
  font-size:40px;
  line-height:1.05em;
  font-weight: 200;
  margin-bottom:15px;
}
.section-title .ja {
  display:block;
  font-size:18px;
  line-height:1.05em;
}

.gallery {
  padding-top:50px;
  padding-bottom:50px;
}
.gallery ul {
  list-style: none;
  padding-left:0;
  display:flex;
  flex-wrap: wrap;
  width:1000px;
  margin:0 auto;
}
.gallery li {
  width:30%;
  margin:0 1.5% 30px;
  background-color:#000;
}
.gallery li > a {
  display: block;
  position:relative;
  color:#FFF;
  text-decoration: none;
}
.gallery li > a span {
  display:block;
  position: absolute;
  width:100%;
  font-size:18px;
  text-align:center;
  top:50%;
  left:0;
  transform: translateY(-20%);
  opacity:0;
  transition:all .5s ease;
}
.gallery li > a.--hover span {
  transform: translateY(-50%);
  opacity:1;
}
.gallery li > a img {
  display:block;
  transition:all .5s ease;
}
.gallery li > a.--hover img {
  opacity: .6;
}


.news {
  padding-top:50px;
  padding-bottom:70px;
  background-color:#f7f7f7;
}
.news .post {
  width:1000px;
  margin:0 auto 50px;
}


.list-link-btn {
  font-family: 'Cinzel', serif;
  text-decoration: none;
  display:flex;
  justify-content: center;
  align-items: center;
  width:200px;
  height:50px;
  color:#333;
  border:1px solid #333;
  margin:25px auto;
  font-size:26px;
  transition:all .3s ease;
}
.list-link-btn.--hover {
  background-color:#333;
  color:#FFF;
}
.list-link-btn .ico {
  margin-right:.5em;
}
.list-link-btn rect {
  transition:all .3s ease;
}
.list-link-btn.--hover rect {
  fill:#FFF;
}




/* Sub Page
------------------*/
.page-header {
  position:relative;
  height:150px;
  background-color:#f7f7f7;
}
.page-header > .title {
  margin:0;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size: 3rem;
  font-weight: normal;
  font-family: 'Cinzel', serif;
}



/* About Us
------------------*/
.about-us-message {
  margin:0 auto;
  padding:50px 15px;
  text-align:center;
}
.about-us-profile {
  width:1000px;
  margin:0 auto;
  padding:50px 15px;
}




/* News
------------------*/
.news-section {
  padding-top:50px;
  padding-bottom:70px;
}
.news-section:nth-of-type(even) {
  background-color:#f7f7f7;
}
.news-section .title {
  width:1000px;
  margin:0 auto 25px;
  font-size:3rem;
}
.news-section .post {
  width:1000px;
  margin:0 auto 50px;
}





/* Gallery
------------------*/
.gallery .year,
.gallery .day {
  font-size:2.8rem;
  text-align:center;
}
.gallery-photo {
  margin-top:60px;
}
.gallery-photo .title {
  font-size:2.4rem;
  font-weight:normal;
  text-align: center;
}
.gallery-photo .photo-canvas {
  text-align:center;
}
.gallery-photo .canvas {
  width:100%;
  height:60vh;
}




/* Contact
------------------*/
.contact-form {
  width:1000px;
  margin:0 auto;
}
.contact-form-message {
  padding:50px 15px;
  text-align: center;
}
.form-tbl {
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.form-tbl tr {
  border-bottom:1px solid #000;
}
.form-tbl th {
  font-size:1.6rem;
  font-weight:normal;
  text-align:left;
  vertical-align: top;
  padding:30px 15px 15px;
  width:25%;
  box-sizing: border-box;
}
.form-tbl td {
  vertical-align: top;
  padding:30px 15px 15px;
  width:75%;
  box-sizing: border-box;
}
.form-tbl input[type="text"],
.form-tbl input[type="email"],
.form-tbl input[type="tel"],
.form-tbl textarea {
  border:0;
  padding:7px;
  width:100%;
  box-sizing:border-box;
  background-color:#ececec;
}
.form-tbl textarea {
  height:7em;
}
.form-tbl td p {
  margin:0;
}
.contact-form .required {
  display: inline-block;
  margin-left: .8em;
  font-size: 1.3rem;
  color: #FFF;
  background-color: #333;
  padding: .5em .7em;
  line-height: 1em;
}
.contact-form .btn-area {
  display:flex;
  justify-content: center;
}
.contact-form .btn-reset,
.contact-form .btn-back,
.contact-form .btn-submit {
  font-family: 'Cinzel', serif;
  text-decoration: none;
  display:flex;
  justify-content: center;
  align-items: center;
  width:200px;
  height:50px;
  color:#333;
  border:1px solid #333;
  margin:25px auto;
  font-size:1.8rem;
  transition:all .3s ease;
}
.contact-form .link-back-home {
  color:#333;
}






@media screen and (max-width:1159px) {
  .gallery ul {
    width:90%;
  }
  .news {
    padding-left:5%;
    padding-right:5%;
  }
  .news .post {
    width:auto;
  }


  /* About Us
  ------------------*/
  .about-us-profile {
    width:90%;
  }


  /* News
  ------------------*/
  .news-section .title,
  .news-section .post {
    width:90%;
  }


  /* Contact
  ------------------*/
  .contact-form {
    width:90%;
  }

}

@media screen and (max-width:739px) {

  body {
    padding:60px 20px 20px;
  }
  body::after {
    height:20px;
  }



  /* header
  ------------------*/
  .main-header {
    padding: 12px 20px 5px;
  }
  .main-header .menu-btn {
    top:17px;
    right:20px;
  }
  .site-name {
    font-size:2.6rem;
  }
  .global-nav {
    top:62px;
    right:20px;
  }



  /* footer
  ------------------*/
  .main-footer .copyright {
    margin-top:10px;
  }




  .main-visual {
    height:50vh;
  }

  .gallery ul {
    justify-content:space-between;
  }
  .gallery li {
    width:47%;
    margin-left:0;
    margin-right:0;
  }


  /* Contact
  ------------------*/
  .contact-form-message {
    padding-left:0;
    padding-right:0;
  }
  .form-tbl th,
  .form-tbl td {
    display:block;
    width:100%;
  }
  .form-tbl td {
    padding-top:0;
  }

}