@charset "utf-8";
/* テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */

#cont1 {
  background: url(../images/kumo-1.png) no-repeat left top;
  background-size: 200px;
}

#cont2 {
  background-image: url(../images/kumo-2.png);
  background-size: 150px;
  background-position: left top;
  background-repeat: no-repeat;
}

#cont3 {
  background-image: url(../images/kumo-3.png) ;
  background-size: 200px;
  background-position: left top;
  background-repeat: no-repeat;
}

h3 {
  color:#552500;
  font-size: 2.0rem;/*元のサイズ*/
  font-size: 2.3rem;
}

/*splideスライドのimg指定打ち消し

.splide__slide img{
  width:auto;
  height:auto;
  object-fit: contain;
  padding:0 ;
}*/

/*グローバルメニューw100に変更して装飾*/
.nav-wrap {
  width:100%;
  /*background: rgba(204, 176, 10,1);*/
 /* background: rgba(228, 183, 83, 0.25);*/
}

#contents-menu li a {
  color:#683006;
}

/*再生停止次へボタン非表示
.splide__arrows {
  display: none;
}*/

/*スライド背景*/
.slide-area-wrap {
  width:100%;
  position: relative;
  background: linear-gradient(rgba(204, 176, 10,0), rgba(204, 176, 10,1.0));
  border-bottom:solid 24px rgba(204, 176, 10,1.0)
}

/*スライドズーム*/
.splide__slide.is-active img,
.splide__slide.is-prev img,
.splide__slide img.is-prev {
  /*animation: scale 7s linear 0s normal both;*/
  animation: scale 2.5s linear 0s normal both;
}
@keyframes scale {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.0);
  }
}

/* スライドのサイズ調整 */
.splide__slide img {
  height: auto;
  width: 100%;
}

/*タイトルアニメーション*/
.animation-image::before {
  content: "";
  display: block;
  padding-top: 35.15%;
}

.animation-image img, .shisho{
  opacity: 0;
}

.shisho {
  width: 7%;
  max-width:70px;
  position: absolute;
 /* top: 160px;*/
/* top: calc(50% - 1.25em - 6em);spがNGのため保留*/
 top: calc(25% - 1.25em);
  left: 50%;
  transform: translateX(-50%);
  z-index:8888;
  animation: title2 1s 0s linear forwards;
  animation-delay: 14s;
}


/*タイトル部分の指定*/
/*.animation-image h1 {*/
.container > h2.ttl-visible{
  opacity: 0;
  /*width:38vw;*/
  width:43vw;
  display: inline-block;
  margin: 0;
  text-align: center;
  position: absolute;
  font-weight: bold;
 /* font-size: 3rem;*/
 /*font-size: clamp(1rem, 0.432rem + 2.27vw, 2.25rem);*/
 font-size: clamp(1.125rem, -2.25rem + 6vw, 2.25rem);
 font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  letter-spacing: 0.1rem;
  padding:7% 1.5% 2% 1.5%;
  color: #fff;
  top: calc(50% - 1.25em);
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.7);
  border:solid 1px rgba(204, 176, 10,1.0);
  z-index: 99;
  animation: title 1s 0s linear forwards;
  animation-delay: 14s;
}

@media print, screen and (min-width: 900px) and (max-width: 1280px) {
  .container > h2.ttl-visible{
    min-width:65%;
  }
  .shisho {
    width: 6.5%;
    max-width:60px;
  }
}

.container > h2.ttl-visible span#eng {
 /* font-size:1.6rem;*/
  font-size: clamp(0.8rem, -1.175rem + 4.12vw, 1.4rem);
  font-weight:normal;
  letter-spacing: .2rem;
}

/*spのみ改行*/
.br-sp {
  display: none;
}

@media (max-width: 900px) {
  .br-sp {
      display: block;
  }

  .container > h2.ttl-visible {
    line-height:1.2;
  }
}


@media (min-width : 901px) and (max-width : 1024px){
  .container > h2.ttl-visible{
    font-size:2.0rem;
  }
  .shisho {
    max-width:75px;
    margin-bottom:3em;
   /*top:30px;*/
   top: 35%;
  }
}

@media (min-width : 768px) and (max-width : 1024px){
  .container > h2.ttl-visible{
    width:65vw;
  /*  top:100px;*/
    font-size:2rem;
  }

  .shisho {
  width: 6.5%;
  max-width:60px;
 /* top:28%;*/
 top:20%;
  }
}

@media (max-width : 767px){
  .page-main {
    border:solid 2px skyblue;
  }
  .container > h2.ttl-visible{
    width:85%;
    /*top:80px;*/
   /* top:150px;*/
    line-height:1.0;
    font-size:1.5rem;
    padding:10% 1.5% 2% 1.5%;
  }
  .shisho {
    width: 8%;
    max-width:75px;
   /*top:20px;*/
   top:28%;
  }

  .slide-area-wrap {
    border-bottom:solid 8px rgba(204, 176, 10,1.0);
  }
  }


@keyframes title {
  0% {
    opacity: 0;
    transform: translate(-50%, -38%);
  }
  100% { opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes title2 {
  0% {
    opacity: 0;
    transform: translate(-50%, -80%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/*アニメーション追加*/

/*アニメーションここまで*/

/*ページ内リンク背景色*/
.bg-gradation {
  background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0));
}

.bg-gradation a{
  color: #FFFFFF;
}


/* インジケーター が重複するため消す
.splide__pagination {
  display:none;
}*/


.twitter{
  margin-right: 60px;
}