@charset "utf-8";
/* CSS Document */

body, p, h1, h2, h3, h4, h5, h6, span, small, strong, div, ul, li, figure, img, header, footer, nav, section {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  vertical-align: bottom;

}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 1050px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}
.wrapper {
	overflow: hidden;
}
.image-container {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.image-container img {
  width: auto;
  height: auto;
  object-fit: cover;
  opacity: 0; /* 初期状態で透明 */
  clip-path: inset(0 100% 0 0); /* 初期状態で右側を隠す */
  transition: clip-path 3s ease-in-out, opacity 3s ease-in-out; /* アニメーションの設定 */
}

.image-container.visible img {
  opacity: 1; /* フェードイン */
  clip-path: inset(0 0 0 0); /* 右側を完全に表示 */
}
/* フェードインアニメーション */


.fade-in {
  opacity: 0;
  transition: opacity 4s ease-out, transform 4s ease-out;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

.updown {
  animation-name:updown1;   /* アニメーション名の指定 */
  animation-delay:0s;   /* アニメーションの開始時間指定 */
  animation-duration: 4s;   /* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
  animation-iteration-count: infinite; 
  }
  @keyframes updown1 {
  0% {
  transform: translateY(0);
  }
  50% {
  transform: translateY(-10px);
  }
  100% {
  transform: translateY(0);
  }
  }

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.active {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.active {
  opacity: 1;
  transform: translateX(0);
}







.catch {
  background-image: url(../img/catch_bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  margin: 0;
  padding: 0;
  margin-bottom: 50px;
}
.rank {
  background-image: url(../img/rank_bg.jpg);
  background-repeat: repeat-y;
  background-position: center top;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  margin-top: 0px;
}
.way {
  background-image: url(../img/way_bg.jpg);
  background-repeat: repeat-y;
  background-position: center top;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  margin-top: 0px;
}
table {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
.weapon {
  background-image: url(../img/weapon_bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
.contents {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.umidashi {
  background-image: url(../img/u_midashi.png);
  background-position: center top;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
.tmidashi {
  background-image: url(../img/tm_bg.jpg);
  background-position: center top;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  margin-top: 100px;
}
.toku {
  background-image: url(../img/t_bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  background-attachment:fixed; 
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  padding-bottom: 100px;
}
.step {
  background-image: url(../img/step_bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  margin: 0;
  padding: 0;
}
.pro {
  background-image: url(../img/pro_bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  margin: 0;
  padding: 0;
}
.qa {
  background-image: url(../img/qa_bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  margin: 0;
  padding: 0;
}
.contents {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.th {
  background-image: url(../img/tm_bgb.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.stepb {
  background-image: url(../img/step_bgb.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.menseki {
  background-image: url(../img/mensekibg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  text-align: center;
  margin: 0;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.hukidasi  {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.kabuse  {
  position: absolute;
  z-index: 5;
  top: 260px;
}
.w1100  {
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 1050px) {
  .catch {
    background-image: url(../img/catch_bg_sm.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    text-align: center;
    background-size: contain;
    margin: 0;
    padding: 0;
    margin-bottom: 0px;
  }
img  {
  width: 100% !important;
}
.kabuse  {
  position: absolute;
  top: 77vw;
  z-index: 5;
  width: 30% !important;
  left: -22px;
}
.contents {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.weapon {
  background-image: url(../img/weapon_bg_sm.jpg);
  background-repeat: repeat;
  background-position: center top;
  text-align: center;
  background-size: contain;
  margin: 0;
  padding: 0;
}
.tokuten {
  background-image: url(../img/tokuten_bg_sm.jpg);
  background-repeat: repeat;
  background-position: center top;
  text-align: center;
  background-size: contain;
  margin: 0;
  padding: 0;
}
.image-containerb {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.image-containerb img {
  width: auto;
  height: auto;
  object-fit: cover;
  opacity: 0; /* 初期状態で透明 */
  clip-path: inset(0 100% 0 0); /* 初期状態で右側を隠す */
  transition: clip-path 4s ease-in-out, opacity 4s ease-in-out; /* アニメーションの設定 */
}

.image-containerb.visible img {
  opacity: 1; /* フェードイン */
  clip-path: inset(0 0 0 0); /* 右側を完全に表示 */
}
/* フェードインアニメーション */
}
address {
	font-style: normal;
	font-weight: 900;
	color: #FFF;
	text-align: center;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	height: 30px;
	line-height: 30px;
	overflow: auto;
	width: 100%;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	font-size: 16px;
	background-color: #000;
}
iframe {
  border: none; /* 枠線を消す */
  outline: none; /* 一部ブラウザでの枠を消す */
}
.formbg {
  background-image: repeating-linear-gradient(45deg, #edfbfd, #edfbfd 10px, transparent 10px, transparent 20px);
  padding-bottom: 0px;
}

.formb {
  width: 100%;
  height: 670px;
}
.formc {
  width:100%;
  height:1050px;
  top: -190px;
}

@media only screen and (max-width: 950px) {
  .kabuse  {
    position: absolute;
    top: 75vw;
    z-index: 5;
    width: 40% !important;
  }
  .form  {
    width: 100% !important;
    height: 1200px;
  }
  .formb {
    width: 100%;
    height: 700px;
  }
  .formc {
    width:100%;
    height:1000px;
    top: -450px;
  }
  .formbg {
    background-image: repeating-linear-gradient(45deg, #edfbfd, #edfbfd 10px, transparent 10px, transparent 20px);
    padding-bottom: 0px;
  }
  .sage {
    margin-top: 0px;
  }
}