@charset "utf-8";

body {
  background:#fff;
  color:#000;

}

a { /* 通常時リンク */
  color:#00f;
  text-decoration:underline;
}

a:link { /* 未訪問リンク */
  color:#00f;
  text-decoration:underline;
}

a:visited { /* 訪問済みリンク */
  color:#00f;
  text-decoration:underline;
}

a:hover { /* マウスオーバー時リンク */
  color:#f00;
  text-decoration:none;
}

a:active { /* クリック時リンク */
  color:#00f;
  text-decoration:underline;
}

img {
  height:auto !important;
}

a img {
  transition:.5s;
  opacity:1;
}

a img:hover {
  opacity:0.4;
}

.movie-open {
  display: none;
}
.movie-content-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie-content-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.movie-open {
  position: relative;
  width: 100%;
  padding-top: 56.25% !important;
}
.movie-open iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.fv,
.fv02 {
  max-width:100%;
  height:100vh;
  position:relative;
  overflow:hidden !important;
  margin-bottom:50px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.fv::-webkit-scrollbar{
  display:none;
}


h2 {
  width:90%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 10), 0px 0px 6px rgba(255, 255, 255, 30), 0px 0px 6px rgba(255, 255, 255, 30), 0px 0px 6px rgba(255, 255, 255, 30);
  z-index:1;
}

.circle-box {
  width:480px;
  height:480px;
  position:absolute;
  top:50%;
  left:50%;
  transform: rotate3d(-1, -1, 0, 0deg) skewX(-40deg) skewY(-15deg) translate(-80%,-65%);
  opacity:0.1;
  z-index:0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow:hidden;
}

.circle-box::-webkit-scrollbar{
  display:none;
}


.circle-box img.circle {
  animation:rotacircle 25s infinite linear;
}

@keyframes rotacircle {
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}

h1 {
  width:240px;
  position:absolute;
  top:15px;
  left:10px;
  z-index:2;
}

h2 {
  text-align: center;
  font-size:3.9rem;
  /* margin-bottom:50px; */
  font-family: 'Shippori Mincho', serif;
  font-weight:800;
  line-height:1.5;
  letter-spacing:1px;
  /* text-shadow: 2px 2px 3px black; */
}

h2 span {
  font-size:1.8rem;
  display:block;
  letter-spacing:2px;
}


.scrolldown1{
  position:absolute;
  left:50%;
  bottom:10px;
  height:50px;
  z-index:10;
}
 

.scrolldown1 span{
  position: absolute;
  left:-15px;
  top: -15px;
  color: #fff;
  font-size:12px;
  font-family: 'Shippori Mincho', serif;
  font-weight:800;
}
 

.scrolldown1::after{
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 30px;
  background: #fff;
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}
 

@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

#nav-box {
  position:absolute;
  z-index:5;
  top:30px;
  right:0;
}

#nav-box a {
  color:#000;
  text-decoration:none;
  font-family: 'Shippori Mincho', serif;
  font-weight:800;
  font-size:14px;
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 10), 0px 0px 6px rgba(255, 255, 255, 30), 0px 0px 6px rgba(255, 255, 255, 30), 0px 0px 6px rgba(255, 255, 255, 30);
}

#nav-box ul {
  display:flex;
}

#nav-box ul li {
  margin-right:30px;
}


main {
  width:97%;
  /* padding-top:150px; */
  margin:0 auto;
}

ul.gallery-box {
  columns:7;
}

@media screen and (max-width: 1600px) {
ul.gallery-box {
  columns:6;
}
}

ul.gallery-box li {
  margin-bottom: 10px;
  border:1px solid #ccc;
  background:#fff;
  overflow:hidden;
  padding:3px;
  border-radius:1px;
  transition:.5s;
}

ul.gallery-box li:hover {
  box-shadow: 0px 0px 5px 0px #000000;
}


ul.gallery-box li img {
  width: 100%;
  height: auto;
}

footer p {
  text-align:center;
  padding:40px 0 40px;
  font-size:1rem;
  font-family: 'Shippori Mincho', serif;
  font-weight:600;
  letter-spacing:1px;
  margin-bottom:40px;
}

#page-top {
    width: 40px;
    height:40px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: block;
    background: url(../imgs/btn-pagetop.svg) no-repeat 0 0 / cover;
    cursor:pointer;
    z-index: 5;
}




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

a img:hover {
  opacity:1;
}

.circle-box {
  width:380px;
  height:380px;
  top:48%;
  left:48%;
}

h1 {
  width:200px;
}

h2 {
  font-size:3rem;
  margin-bottom:40px;
}

ul.gallery-box {
  columns:3;
}

#nav-box ul {
  display:block;
}

#nav-box a {
  display:block;
  padding:20px 0;
  text-align:center;
  font-size:16px;

}

main {
  width:100%;
  padding:0 4%;
}



} 



@media screen and (max-width:480px) {
h1 {
  width:200px;
}

.circle-box {
  width:300px;
  height:300px;
  top:48%;
  left:48%;
}

h2 {
  font-size:2rem;
  margin-bottom:40px;
}

h2 span {
  font-size:1.5rem;
}

ul.gallery-box {
  columns:2;
}


main {
  /* padding-top:80px; */
}
  
}