@charset "UTF-8";





html { scroll-behavior: smooth;}

.wf-kokoro { font-family: "Kokoro"; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: serif, 'Kokoro' ,sans-serif;
  /* font-family: "Kokoro"; */

  
}

.flex {
  display: flex;
}
.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.wr{
  flex-wrap: wrap;

}

.font-bold {
  font-weight: bold;
}

.bottom {
  position: absolute;
  bottom: 0;
}
header {
  position: fixed;
  width: 100%;
  height: auto;
  background: #00000030;
  z-index: 3;
  transition: 1s;
}

nav {
  height: 10vh;
  font-size: 2vh;

}

nav a {
  color: #fff9;
}

.rogo {
  position: absolute;
  width: 80%;
  bottom: 0;
  max-width: 1100px;
  min-width: 150px;
  opacity: 50%;
}

.rogo img {
  width: 100%;
}

.rogo:hover {
  opacity: 100%;
}

.top-nav ul{
  justify-content: flex-end;
  position: absolute;
  right: 0;
  width: 100%;
  top: 3vh;
}

.top-nav a {
  text-decoration: none;
  margin: 5vh 2vw ;
}
nav ul {
  /* padding: 5px 50px; */
}

nav li {
  margin: 0 0px;
  list-style: none;
  transition: 0.5s;

}

.top-nav li:hover {
  background: #fff3;
  border-bottom: 5px solid #fff5;
  border-top: 5px solid #fff5;
  transform: scale(1.2, 1.2);
}

main {
  width: 100%;
  text-align: center;
  overflow-x: hidden;

}

.mv {
  position: relative;

  width: 100%;
  height: 100vh;
  text-align: center;
  z-index: 0;

}

.mv img {
  width: 100%;
  height: 100vh;
  object-fit: cover;

}
.mv video {
  width: 100%;
  height: 100vh;
  object-fit: cover;

}



.mv h1 {
  position: absolute;
  font-size: calc( 20px + 2vw );
  color: #fff;
  text-shadow: 5px 5px 5px #111;
  width: 100%;
  top: 50vh;
}

.con h2 {
  font-size: calc( 20px + 2vw );
  color: rgb(0, 0, 0);
  width: 100%;
}
.con span {
  font-size: calc( 20px + 2vw );
  color: rgb(255, 0, 0);
  width: 100%;
}

.mv span {
  position: absolute;
  font-size: calc( 20px + 2vw );
  color: #fff;
  text-shadow: 5px 5px 5px #111;
  width: 100%;
  top: 50vh;
}

.catch_copy span {
  transition: 1s;
  opacity: 0;
  transform: translateY(20px);
  display: block;
}
.catch_copy span:first-child {

  animation: catch_anime 3s forwards 1s ;　
}
.catch_copy span:nth-child(2) {
  animation: catch_anime2 3s forwards 3s ;
}
.catch_copy span:nth-child(3) {
  animation: catch_anime3 3s forwards 5s ;
}

@keyframes catch_anime {
  0% {
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(-30vh);
  }
}

@keyframes catch_anime2 {
  0% {
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(-10vh);
  }
}

@keyframes catch_anime3 {
  0% {
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(10vh);
  }
}


/*==================================================
スライダーのためのcss
===================================*/
#slider {
  width: 100%;
  height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}


/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:1%;
right:50%;
  /*矢印の動き1秒かけて永遠にループ*/
animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
    0%{bottom:10%;}
    50%{bottom:15%;}
   100%{bottom:10%;}
}

/*Scrollテキストの描写*/
.scrolldown4 span{
  /*描画位置*/
position: absolute;
left:-20px;
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;
}

/* 矢印の描写 */
.scrolldown4:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 1px;
  height: 20px;
  background: #eee;
  transform: skewX(-31deg);
}

.scrolldown4:after{
content:"";
  /*描画位置*/
position: absolute;
bottom:0;
right:0;
  /*矢印の形状*/
width:1px;
height: 50px;
background:#eee;
}


/* ////////////parallax////////// */


.bg {
    background-image: url(../img/1.jpg);
    background-size: cover;
}
.bg2 {
    background-image: url(../img/2.jpg);
    background-size: cover;
}
.bg3 {
    background-image: url(../img/3.jpg);
    background-size: cover;
}
.bg4 {
    background-image: url(../img/4.jpg);
    background-size: cover;
}
.bg5 {
    background-image: url(../img/5.jpg);
    background-size: cover;
}
.bg6 {
    background-image: url(../img/6.jpg);
    background-size: cover;
}

.parallax {
  background-attachment: fixed;
  background-position: center;
  height: auto;
  /* height: 100vh; */
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* background-size: 100vw auto; */
  background-size: cover;
  background-repeat: no-repeat;
}

/* @media screen and (min-width: 500px) {
  #p1 {
    background: blue;
  }
} */


/* .parallax {
  content: "";
  position: fixed;
  top: 0;
  height: 100vh;
  left: 0;
  right: 0;
  z-index: -1;
  background: url("/img/bg.png") center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  } */


.box {
  width: 100%;
  height: auto;
  padding: 3vh 0 ;
}


.news-container {
  flex-wrap: wrap;

}

.news-container a {
  color: #000;
  font-size: 24px;
  overflow-wrap: break-word;

}

.news-container dt {
  text-align: right;
}
.news-container dd {
  width:100% ;
}





/* ////////////////main-cont////////////////// */
.main-cont {
  width: 100%;
}



/* ///////////////info///////////////// */



.news {
  text-align: center;
  width: 50%;
  top: 100px;
  min-width: 100px;
  display: block;
  
}
.news2 {
  text-align: center;
  width: 80%;
  top: 100px;
  /* background-color: rgba(205, 255, 214, 0.322); */
  /* min-width: 100px; */
  display: block;
  
}

.news2 a {
  padding: 0 10px;
  background-color: #fff8;
}


.main-cont h2 {
  color: #000;
  padding: 1% 5%;
  font-size: 4vh;
  text-shadow:3px 3px 3px #FFF5, -3px -3px 3px #FFF5,
  -3px 3px 3px #FFF5, 3px -3px 3px #FFF5,
  0px 3px 3px #FFF5,  0 -3px 3px #FFF5,
  -3px 0 3px #FFF5, 3px 0 3px #FFF5;
  z-index: 2;
  
}

.cont-auction {

/* padding: 1vh; */
overflow: hidden;
/* flex-wrap: wrap; */


}

.cont-auction h2 {
  color: #000;
  /* padding: 1% 2%; */
  font-size: calc(5px +  1.5vw) ;
  text-shadow:3px 3px 3px #FFF5, -3px -3px 3px #FFF5,
  -3px 3px 3px #FFF5, 3px -3px 3px #FFF5,
  0px 3px 3px #FFF5,  0 -3px 3px #FFF5,
  -3px 0 3px #FFF5, 3px 0 3px #FFF5;
  z-index: 2;
  
}

.cont-auction span {
  color: rgb(84, 0, 219);
  /* padding: 1% 5%;
  font-size: 3.5vh;
  text-shadow:3px 3px 3px #FFF5, -3px -3px 3px #FFF5,
  -3px 3px 3px #FFF5, 3px -3px 3px #FFF5,
  0px 3px 3px #FFF5,  0 -3px 3px #FFF5,
  -3px 0 3px #FFF5, 3px 0 3px #FFF5;
  z-index: 2; */
  
}

.news iframe {
  border-top: 1px solid #000;
  width: 80%;
  height: 80%;
  margin: 0 auto;
}
/* ////////////////main-cont end////////////////// */


.cont-news {
  width: 100%;
  height: auto;
  padding: 1vh;
  background: #fff9;
  text-align: center;

}

.logo {

  width: 100%;
  top: -10%;
  
}
.logo img{
  opacity: 1;
  width: 30%;
  height: auto;
}

.name {


  width: 50%;
  text-align: center;
  margin: auto; 

}

.name h1 {
  font-size: calc( 10px + 3vw );

}

.cont-1 {
  position: relative;
  width: 100%;
  height: auto;
  background: linear-gradient(#fff,#fff8, #fff2);
  text-align: center;
  
}

.title {
  position: absolute;
  top: -20vh;
  left: 10vw;
  width: 30%;
  height: auto;
  border-bottom: 1px solid #000;

}

.cont-1 img {
  object-fit: contain;

}

.sub-txt p {
  font-size: calc( 10px + 1.5vw );
  color: #000;
  text-shadow: 2px 2px 2px #0004;
}



/* //////////////////concept///////////////// */



.con {
  width: 90%;
  height: auto;
  padding: 3% 0 3%;
  margin-left: auto;
  margin-right: auto }





  .menu a {
    display: block;
    font-size: calc( 10px + 2vw );
    margin:  auto ;
    opacity: 70%;
    color: #444;
    text-shadow: 5px 5px 2px #0004;
  }
  

  /* /////////////////menu//////////// */
  .menu {
    width: 100%;
    height: auto;
    text-align: center;
  }

  .list {
    /* position: relative; */
    /* width: 25%; */
    list-style: none;
    height: auto;
    /* min-width: 300px; */
    margin: auto;
    overflow: hidden;
    margin: 0 0 3vh 0;
    flex-wrap: wrap;

  }


  .list2 {
    overflow: hidden;
    line-height: 1.5;
    width: 100%;
    background-color: rgb(200, 255, 170);
    padding: 20px;	/*ボックス内の余白*/
    /* position: relative; */
    /* width: 25%; */
    list-style: none;
    height: auto;
    /* min-width: 300px; */
    margin: auto;
    overflow: hidden;
    margin: 0 0 3vh 0;
    flex-wrap: wrap;

  }
  .list-nav {
    width: 100%;
    height: auto;
  }
  
  .item {
    width: 10vw;
    height: auto;
    /* overflow: hidden; */
    margin: .5vw;
    padding: 3vh 0;
    /* display: inline; */
    /* position: fixed; */
    min-width: 80px;

    
  }
  
  .item img{
    /* object-fit: contain; */
    min-width: 80px;
    min-height: 80px;
    transition: 1.5s;
    opacity: .5;
    border-radius: 50%;
    object-fit: cover;
    width: 10vw;
    height: 10vw;

}
  .item img:hover{
    transition: 1s;
    opacity: 1;
    /* object-fit: contain; */

}
  .item:hover{
    transition: 1s;
    /* object-fit: contain; */
    transform:scale(1.2,1.2);

}
/* /////////////////////////////////// */


/* ///////////////////////////////// */
/* //////////////////sns//////////////////// */



.sns_scr {
  width: 50%;
 padding: 10px;
  min-width: 400px;;
  max-height: 400px;
  overflow: scroll;
  overflow: hidden visible;

}
.sns_scr img {
  padding: auto;
  width: 100%;
  overflow: cover;
}



.in_rogo {
  position: relative;
  width: auto;
  height: 30%;
  
}
.in_rogo a {
  font-size: calc( 10px + 2vw );
  margin:  auto ;
  opacity: 70%;
  color: #444;
  text-shadow: 5px 5px 2px #0004;
}
.in_rogo img{
  position: absolute;
  margin:  auto ;
  min-width: 10px;
  width: 20%;
  opacity: 30%;
}


/* ////////////////sohpinfo///////// */

.shop {
  padding: 5vh;
}

.shop h3{
  padding: 1.5vh;
}


.map {
  display: inline-block;
  /* border-radius: 50%; */
  width: 100%;
  /* height: 100vh; */

}
.info h3{ 
  font-size: calc( 20px + 1vw );
}
.map h3{ 
  font-size: calc( 20px + 1vw );
}


.map p{
  color: #000;
  padding: 1% 5%;
  font-size: calc( 10px + 1.5vw );
  text-shadow:3px 3px 3px #FFF5, -3px -3px 3px #FFF5,
  -3px 3px 3px #FFF5, 3px -3px 3px #FFF5,
  0px 3px 3px #FFF5,  0 -3px 3px #FFF5,
  -3px 0 3px #FFF5, 3px 0 3px #FFF5;
  z-index: 2;


}

.info {
  width: 50%;
  min-width: 300px;
}

.info img{
  width: 50vh;
  min-width: 50px;

}
/* 
.map iframe {
  filter: grayscale(1);
  opacity: 0.8;
  vertical-align: bottom ;
  width: 50vh;
  height: 50vh;
  transition: 1.5s;
  border-radius: 50%;
}

.map iframe:hover{
  filter: none;
  opacity: 1;
  transition: 1.5s;
  border-radius: 10%;
} */



#cont {
  text-align: center;
}

#cont p {
  text-align: center;
  margin: 1em 0;

  font-size: 4vh;
  font-family: "Sawarabi Mincho";
  color: #000;
  text-shadow: 4px 4px 8px #0008;
}

#cont input ,textarea {
  width: 40%;
  height: auto;
  background: #ddd8;
}

#cont .sousin {
  width: 100%;
}


#cont .sousin input {
  border-radius: 10px;
  margin: 3%;
  width: 10%;
  height: auto;
background: #aaa8;
}

/* /////////////////////フェード */

.fa{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
.fa-d{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(-30px);
}

.fa-xr{
	opacity : 0;
	visibility: hidden;
	transition: 1.5s;
	transform: translateX(300px);
}
.fa-xl{
  opacity : 0;
	visibility: hidden;
	transition: 1.5s;
	transform: translateX(-300px);
}
.fa-r{
  opacity : 0;
	visibility: hidden;
	transition: 1.5s;
	transform: rotateY(-90deg) translateY(-300px);
}
.fa-r2{
  opacity : 0;
	visibility: hidden;
  
	transition: 1s;
  transform: rotate(-180deg) translateX(-300px);
}
.fa-r3{
  opacity : 0;
	visibility: hidden;
  /* left: 0; */
  
	transition: 2s;
  transform: rotate(-180deg) translateX(1000px);
}
.fa-opa{
  position: absolute;
  background: #00ff4750;
  opacity : 0;
	visibility: hidden;
	transition: 1s 1.5s;
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translate(0);
}

/* .re {
  position: relative;
  width: 100%;
} */

.re_top {
  position: fixed;
  bottom: 10vh;
  right: -40vw;
  height: 48px;
  width: 100%;
}

.re img{

  width:  calc(30px + 5vw);

}

footer {
  position: relative;
  padding: .25em 10%;
  align-items: center;
  /* position: fixed; */
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
}
footer p {

  text-align: center;

}