@charset "utf-8";

.hanko-relative {
    position: relative;
}

@media only screen and (max-width: 767px) {
.hanko-animation{
  position: absolute;
  animation: pikopiko 1s steps(2, start) infinite;
  width: 40px;
  height:auto;
}
}

@media only screen and (min-width: 768px) {
.hanko-animation{
  position: absolute;
  animation: pikopiko 1s steps(2, start) infinite;
  width: 80px;
  height:auto;
}
}

.hanko-h1 {
    right: 5%;
    top: -20%;
}
.hanko-h2 {
    left: 5%;
    top: 20%;
}
.hanko-h3 {
    left: 5%;
    top: -20%;
}
.hanko-h4 {
    right: 5%;
    top: 20%;
}

@keyframes pikopiko {
  0% {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-10deg);
  }
}




/*========= スクロールダウンのためのCSS ===============*/
/*スクロールダウン全体の場所*/
.scrolldown{
  position:absolute;
  bottom:10px;
  left:50%;
}

/*Scrollテキストの描写*/
.scrolldown span{
  position: absolute;
  left:10px;
  bottom:10px;
  color: #66a09b;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown::before {
  content: "";
  position: absolute;
  left:-4px;
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#66a09b;
  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;}
 }

/* 線の描写 */
.scrolldown:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:2px;
  height: 50px;
  background:#66a09b;
}

/* ふわっ */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger{
    opacity: 0;
}

.blurTrigger{
    opacity: 0;
}

/* Loading背景画面設定　*/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#fff;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* ↓ スライドの外枠 */
.slide-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; /* はみ出したスライドを隠す */
}
/*  ↓ スライド（コンテンツ） */
.slide { /*スライド全体 */
  width: 300%;
  height: 100%;
  display: flex;
  transition: all 0.3s;
}
.slide div { /* スライド */
  width: 33.33%;
  height: 100%;
  font-size: 16px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.slide1 { /* スライドさせるために必要なクラス */
  transform: translateX(0);
}
.slide2 { /* スライドさせるために必要なクラス */
  transform: translateX(-33.33%);
}
.slide3 { /* スライドさせるために必要なクラス */
  transform: translateX(-66.66%);
}
/* ↓ 左右のボタン */
.next {
  position: absolute;
  width: 15px;
  height: 15px;
  right: 10px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(45deg) translateY(50%);
  transform: rotate(45deg) translateY(50%);
}
.prev {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 25px;
  bottom: 50%;
  z-index: 10;
  cursor: pointer;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  -webkit-transform: rotate(-135deg) translateY(-50%);
  transform: rotate(-135deg) translateY(-50%);
}


/* ↓ インジケーター */
ul.indicator {
  width: 100%;
  position: absolute;
  bottom: 20px;
  display: flex;
  column-gap: 18px;
  z-index: 10;
  justify-content: center;
  align-items: center;
}
ul.indicator li {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  list-style: none;
  background-color: #fff;
  border: 2px #000 solid;
  cursor: pointer;
}
ul.indicator li:first-of-type {
  background-color: #000;
}

li.maru {
  list-style: none;
}

.btn:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor:not-allowed;
}