@charset "utf-8";
@import url('html5_reset.css');

/*------------------------------------------------
共通
-------------------------------------------------*/
html { overflow: auto;}

/*
全体レイアウト
----------------------------------*/

body {
	width: 960px;
  overflow: hidden;
	margin:0 auto !important;

}

body #guide .inner {/*追加*/
    width: 69%;
    margin: 0 auto;
}


@media only screen and (max-width:754px) {
	body{
		width: 100%;
		margin:0 auto !important;/*追加*/
	}
	body #guide .inner {/*追加*/
    width: 90%;
    margin: 0 auto;
	
}
	body #guide .pc {/*追加*/
      display: none; }
    body #guide .sp {/*追加*/
      display: block; } 
}

#container {
  width: 100%;
	margin:0 auto !important;/*追加*/
}
#container_section {
  width: 740px;
  margin:0 auto !important;
}
@media only screen and (max-width:820px) {
  #container_section {
    width: 100%;
  }
}

#container_header {
	width: 740px;
	margin:0 auto !important;/*追加*/
}

@media only screen and (max-width:820px) {
	#container_header{
		width: 100%;
	}
}


.fv_movie_box {
	position: relative;
}


.fv_movie {
	position: absolute;
	top: 1200px;
	left: 110px;
	filter: drop-shadow(-25px 25px 15px rgba(0, 0, 0, .2));
}




/*
アニメーション調整
----------------------------------*/

.fade_area{
	overflow: hidden;
}

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
	opacity:0;
}

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

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

.fadeUpTrigger{
	opacity: 0;
}

.zoomIn {
	animation-name: zoomInAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
}

@keyframes zoomInAnime{
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}
.trigger{
	cursor: pointer;
}
.swipe{
	overflow: hidden;/*左右アニメーションで画面からはみ出る際に出る横スクロールバーを隠す*/
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
	display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.rightAnime{
	opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1.4s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes slideTextX100 {
	from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
	opacity: 0;
	}
	
	to {
	transform: translateX(0);/*要素を元の位置に移動*/
	opacity: 1;
	}
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1.4s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes slideTextX-100 {
	from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
	opacity: 0;
	}

	to {
	transform: translateX(0);/*要素を元の位置に移動*/
	opacity: 1;
	}
}




/*
アニメーション用背景
----------------------------------*/

.fade_area {
	position: relative;
	width: 100%;
}

.fade_position_top {
	position: absolute;
	top:0;
}

.fade_position_000 {
	position: absolute;
	bottom:6.5%;
}
.fade_position_000_2 {
	position: absolute;
	bottom:15%;
}

.fade_position_001 {
	position: absolute;
	top:0;
}

.fade_position_002 {
	position: absolute;
	top: 49%;
}

.fade_position_002_2 {
	position: absolute;
	top:5.3%;
}

.fade_position_003 {
	position: absolute;
	top:20%;
}

.fade_position_004 {
	position: absolute;
	top:48%;
}

.fade_position_005 {
	position: absolute;
	top:32%;
}

.fade_position_006 {
	position: absolute;
	top:32%;
}

.fade_position_007 {
	position: absolute;
	top:5%;
}

.fade_position_008 {
	position: absolute;
	top:5%;
}

.fade_position_009 {
	position: absolute;
	top:3.5%;
}


.fade_position_010 {
	position: absolute;
	top:0%;
}

.fade_position_011 {
	position: absolute;
	top:4%;
}

.fade_position_012 {
	position: absolute;
	top:20%;
}

.fade_position_013 {
	position: absolute;
	top:33%;
}

.fade_position_014 {
	position: absolute;
	top:22%;
}

.fade_position_015 {
	position: absolute;
	top:41%;
}

.fade_position_016 {
	position: absolute;
	top:40%;
}

.fade_position_017 {
	position: absolute;
	top:79%;
}

.fade_position_018 {
	position: absolute;
	top:76.2%;
}

.fade_position_019 {
	position: absolute;
	top:22%;
}

.fade_position_020 {
	position: absolute;
	top:22%;
}

.fade_position_021 {
	position: absolute;
	top:21%;
}

.fade_position_022 {
	position: absolute;
	top:69%;
}

.fade_position_023 {
	position: absolute;
	top:52.4%;
}

.fade_position_024 {
	position: absolute;
	top:66%;
}

.fade_position_025 {
	position: absolute;
	top:20%;
}

.fade_position_026 {
	position: absolute;
	top:2%;
}

.fade_position_027 {
	position: absolute;
	top:79%;
}

.fade_position_028 {
	position: absolute;
	top:33%;
}

.fade_position_howto {
	position: absolute;
	top:33%;
}

.fade_position_tc0102 {
	position: absolute;
	bottom:5%;
}

.fade_position_tc0301 {
	position: absolute;
	top:52.4%;
}





/*
サイズ調整
----------------------------------*/

#container_header img {
	width: 100%;
	height: auto;
}

#container img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}




@media only screen and (max-width:754px) {
	#container_header img {
		width: 100%;
		height: auto;
	}

	#container img {
		width: 100%;
		height: auto;
	}
}




/*
動画サイズ
----------------------------------*/

#v_f {
	width: 600px;
	min-height: 60%;
	min-height: 60vh;
/*
	min-height: 50%;
	min-height: 50vh;
	min-width: 50%;
	min-width: 50vw
	*/
}

.v_f_mb_30 {
	margin:0 0 50px 0;
}

@media only screen and (max-width:754px) {
	#v_f {
		min-height: 60%;
		min-height: 60vh;
		min-width: 50%;
		min-width: 50vw
		/*
		width: 100%;
		*/
		height: auto;
	}
}

@media only screen and (max-width:754px) {
	.v_f_mb_30 {
		margin:0 0 0 0;
	}
}

#v_f_b {
	width: 60%;
	height: auto;
}

@media only screen and (max-width:754px) {
	#v_f_b {
		width: 100%;
		height: auto;
	}
}

@media only screen and (max-width:754px) {
  .copy p { font-size: 1.1rem;}
}


a.bright { display: block; position: relative; overflow: hidden;}
a.bright .hikari {
  width: auto !important; height: 100% !important; position: absolute; left: 0; top: 50%; transform: translate( -100%, -50%);
  -webkit-animation: kira ease-in-out 4.5s infinite;
  animation: kira ease-in-out 4.5s infinite;
}
@-webkit-keyframes kira {
  0% { transform: translate( -100%, -50%); }
  30% { transform: translate( 140%, -50%);}
  100% { transform: translate( 140%, -50%);}
}
@keyframes kira {
  0% { transform: translate( -100%, -50%); }
  30% { transform: translate( 140%, -50%);}
  100% { transform: translate( 140%, -50%);}
}

/*reCAPTCHAバッジ（ロゴマーク）を消す*/
.grecaptcha-badge { visibility: hidden; }