@charset "UTF-8";

/* 共通部分
------------------------------------- */
html{
  font-size: 100%;

}
body{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: #000;
  /* overflow-x: hidden; */
}
a{
  text-decoration: none;
}

/* main
--------------------------------- */
#main{
  position: relative;
}
.logo{
  position: absolute;
  width: 10%;
  margin-top: 30px;
  margin-left: 30px;
}

.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
#cat{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -100;
}
.video-box2{
  display: none;
}



/*===  丸が動いてスクロールを促す ====*/
/*スクロールダウン全体の場所*/
.scroll{
  position:absolute;
  bottom:10px;
  left:50%;
}
.scroll a{
  display: block;
  width: 30px;
  height: 50px;
}

/*Scrollテキストの描写*/
.scroll span{
  /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
  /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scroll:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-4px;
  /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#eee;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
  0%{bottom:45px;}
  100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
  0%{opacity:0;}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

/* 線の描写 */
.scroll:after{
  content:"";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
  /*線の形状*/
  width:2px;
  height: 50px;
  background:#eee;
}


/* #g-navi
------------------------------------------ */
#g-navi{
  display: grid;
  gap: 0px;
  grid-template-columns: repeat(9, minmax(1px, 1fr));
  margin: 0;
  padding: 0;
}
.g-item img{
  height: 100%;
  width: 100%;
}
.box1{
  grid-column: 1/3;
}
/* スクロールでナビをトップ固定用  */
.nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
}


/* .cat-tower
--------------------------------------------------------- */

/* iOSでバグ起こる。 */
/* .cat-tower{
  background-image: url(../images/about-bg.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
} */


/* 背景画像を擬似要素で固定。。。。。。１枚だけ背景固定 */
.cat-tower::before {
  background: url(../images/about-bg.jpg) no-repeat center;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1000;
  }



/* About
----------------------------------- */

h2{
  font-size: 2rem;
  text-align: center;
  padding: 180px 0 100px;
}

.text{
  text-align: center;
  padding-bottom: 80px;
}
#about-vis{
  width: 100%;
  padding: 0 10% 150px;
}
.about-vism{
  display: none;
}

/* price
-------------------------------------- */
#price{
  padding-bottom: 300px;
}

h3{
  text-align: center;
  padding: 0 0 30px;
}
.price-info{
  text-align: center;
  margin-bottom: 150px;
}

/* gallery
--------------------------------------- */
#gallery{
  background-color: #fff;
}

#gallery-vis{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 10px;
  margin: 0 auto;
  padding: 0 10% 40%;
}
.item img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.item img{
  transform: scale(1);
  transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.item a:hover img{/*hoverした時の変化*/
  transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}
/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.big-box1{
  grid-column: 1/3;
  grid-row: 1/3;
}
.big-box8{
  grid-column: 1/3;
  grid-row: 4/5;
}
.big-box9{
  grid-column: 3/5;
  grid-row: 3/5;
}


/* Access
--------------------------------------------------- */

.access-bg{
  background-image: url(../images/access.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 130vh;
  padding-top: -80%;
}

/* #access{
  background-image: url(../images/access.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
} */

h4{
  padding: 5px;
}
.a-box{
  padding: 0 3% 5%;
}
.access-info{
  display: flex;
  justify-content: center;
}
.time{
  max-width: 400px;
      margin: 0 auto;
      text-align: center;
}
.time p{
    display: inline-block;
    text-align: left;
}
.map{
    text-align: center;
}
iframe{
  width: 70%;
  margin: 70px auto 30%;
}


/* page-top ボタン
------------------------------------------------------- */
#page-top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 100;
}

/* footer
------------------------------------------------------- */
footer{
  background: #000;
  text-align: center;
  padding: 10% 0;
}
#footer-logo img{
  width: 5%;
}
footer p{
  color: #fff;
  font-size: 0.875rem;
}



/* モバイル版------------------------------------------------- */

@media(max-width: 600px){
  /* *{margin: 0;
padding: 0; } */

  /* モバイル用動画配置 -----------------------*/
.video-box{
  display: none;
}
.video-box2 {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
#cat2{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -100;
}

/* scrolldownを50px上に表示 */
.scroll{
  bottom:50px;
}

/* g-navi----------------------------------- */
.box1, .box7{
  display: none;
}
#g-navi{
  display: grid;
  gap: 0px;
  grid-template-columns: repeat(6, minmax(1px, 1fr));
  margin: 0;
  padding: 0;
}
/* cat-tower----------------------------------- */
.cat-tower::before{
  background-position: 20%;

}
/* about---------------------------------- */
#about-vis{
display: none;
}
.about-vism{
display: block;
width: 80%;
margin: 0 10% 50px;
}
h2{
  text-align: center;
  padding: 100px 0;
}
.text{
      padding-bottom: 50px;
      font-size: 0.9rem;
}

/* price------------------------------------ */
.table{
width: 80%;
margin: 0;
}

/* Gallery----------------------------------- */
#gallery-vis{
  grid-template-columns: repeat(2, minmax(100px, 1fr));
}
.big-box1{
  grid-column: 1/3;
  grid-row: 1/3;
}
.big-box8{
  grid-column: 1/3;
  grid-row: 4/5;
}
.big-box9{
  grid-column: 1/3;
  grid-row: 7/9;
}


/* Access----------------------------------- */
.map iframe{
 width:100%;
}






}
/* /@media(max-width: 600px) */