@charset "utf-8";

/* ---------------------------------------------------
 * base
/* ---------------------------------------------------*/
	.-pc {display: block;}
	.-sp {display: none;}

	*, *::before, *::after {
		-webkit-box-sizing: inherit;
		box-sizing: inherit;/*親要素のbox-sizingを継承*/
	}

	html {
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	body {
		color: #000000;
		width: 100%;
		background-color: #fff;
		margin: 0;/* body要素のマージンをリセット */
		padding: 0;
	}

	img {
	  max-width: 100%;
	  height: auto;
	}

/* ---------------------------------------------------
 * フッター
/* ---------------------------------------------------*/
	footer {
		text-align: center;
		font-size: 15px;
		padding: 15px;
		line-height: 26.25px;
		background-color: #333;
		color: #fff;
	}
	footer a{
		color: #fff;
	}

/* ---------------------------------------------------
 * BODY
/* ---------------------------------------------------*/
	#wrap {
		width: 2000px;
		max-width: 100%;
		margin: 0 auto;
	}

	#container {
		position: relative;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}

/* ---------------------------------------------------
 * YouTube
/* ---------------------------------------------------*/
	.youtube_container{
		position: relative;
	}
	.youtube_box {
		position: absolute;
		z-index: 999;
		width: 52.5%;
		height: 86%;
		left: 50%;
		top: 57.8%;
		transform: translate(-50%, -50%);
	}

	#video-container {
		position: relative;
		max-width: 576px;
    	width: 100%;
		max-height: 324px;
    	height: 100%;
		background-color: black;
		background-size: cover;
		background-position: center; 
		cursor: pointer;
	}

	#play-button {
		position: absolute;
		max-width: 69px;
    	width: 100%;
		height: auto;
 		top: 50%; 
		left: 50%; 
		transform: translate(-50%, -50%);
	}

	.youtube_box,
	.movie_box {
	box-sizing: border-box;
}

/*---------------------
* 波紋アニメーション
---------------------*/
.ripple_container {
	position: relative;
    width: 100%;  
    height: 100%; 
	z-index: 999;
}

.ripple_01 {
    animation: rippleAnimation 1s linear infinite;
}
.ripple_02 {
    animation: rippleAnimation_02 2s linear infinite;
}
.ripple_01, .ripple_02 {
    background: #ec0b01;
    border-radius: 50%;
    z-index: 2;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5vw;
    height: 5vw; 
    pointer-events: none;
}

@keyframes rippleAnimation {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    to {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

@keyframes rippleAnimation_02 {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    to {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* ---------------------------------------------------
 * 第1,2,3,4話バー
/* ---------------------------------------------------*/
	.movie_container {
	   position: relative;
	} 
	.movie_box {
		position: absolute;
		max-width: 578px;
		width: 110%;
		left: 50%;
		top: 45%;
		transform: translate(-50%, -50%);
		margin: 0 auto;
	}
/*-----------------タブレットサイズ-----------------------*/
@media (min-width: 600px) and (max-width: 1024px) {
	.movie_box {
		position: absolute;
		width: 52.5%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0 auto;
		}
	}
	.movie_box ul {
		display: flex;
		align-items: center;
		gap: 0 5px;
		padding: 0; 
		margin-bottom: 0;
		list-style: none; /*デフォルトのリスト スタイルを削除*/
		align-items: flex-end; /*下の端に沿ってアイテムを整列*/
	}
	/*CommingSoon画像の大きさ*/	
	.movie_box ul li {
		flex: 1;
	}
	/*視聴中のGIFの大きさ*/
	.movie_box ul li:nth-child(1) {/*GIFの順番*/
		flex: 1.26;
	}
	.movie_box .now,
	.movie_box .commingsoon {
		pointer-events: none;
		cursor: default;
	}
	.youtube_box iframe,
	.movie_box ul {
		width: 100%;
		height: 100%;
	}

/* ---------------------------------------------------
 * CTA
/* ---------------------------------------------------*/
	/*フォーム*/
	.form_box {
		position: absolute;
		z-index: 99;
		width: 52.5%;
		left: 0;
		right: 0;
		margin: auto;
		top: 7%;
	}

	/*ボタン*/
	.btn:hover {
	  filter: brightness(110%);
	}
	.btn_box{
		position: relative;
		width: 100%;
	}
	.anime {
		animation: anime1 0.5s ease 0s infinite alternate;
		transform-origin: center;
		cursor: pointer;
	}
	@keyframes anime1 {
		from {
			transform: scale(0.9,0.9);
			  }
		to {
			transform: scale(1,1);
			}
	}

/* ---------------------------------------------------
 * 背景画像を指定
/* ---------------------------------------------------*/
	section#section-01 {
		background:url(../img_pc/section_01.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-02 {
		background:url(../img_pc/section_02.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-03 {
		background:url(../img_pc/section_03.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-04 {
		background:url(../img_pc/section_04.jpg) no-repeat top center;
		height: px;
		background-size: cover;
	}
	section#section-05 {
		background:url(../img_pc/section_05.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-06 {
		background:url(../img_pc/section_06.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-07 {
		background:url(../img_pc/section_07.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-08 {
		background:url(../img_pc/section_08.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-09 {
		background:url(../img_pc/section_09.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-10 {
		background:url(../img_pc/section_10.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-11 {
		background:url(../img_pc/section_11.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-12 {
		background:url(../img_pc/section_12.jpg) no-repeat top center;
		height: px; 
		background-size: cover;
	}
	section#section-13 {
		background:url(../img_pc/section_13.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-14 {
		background:url(../img_pc/section_14.jpg) no-repeat top center;
		height: px; 
		background-size: cover;
	}
	section#section-15 {
		background:url(../img_pc/section_15.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-16 {
		background:url(../img_pc/section_16.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-17 {
		background:url(../img_pc/section_17.jpg) no-repeat top center;
		height: px; 
		background-size: cover;
	}
	section#section-18 {
		background:url(../img_pc/section_18.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-19 {
		background:url(../img_pc/section_19.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-20 {
		background:url(../img_pc/section_20.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-21 {
		background:url(../img_pc/section_21.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-22 {
		background:url(../img_pc/section_22.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-23 {
		background:url(../img_pc/section_23.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-24 {
		background:url(../img_pc/section_24.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-25 {
		background:url(../img_pc/section_25.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-26 {
		background:url(../img_pc/section_26.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-27 {
		background:url(../img_pc/section_27.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-28 {
		background:url(../img_pc/section_28.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-29 {
		background:url(../img_pc/section_29.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-30 {
		background:url(../img_pc/section_30.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-31 {
		background:url(../img_pc/section_31.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-32 {
		background:url(../img_pc/section_32.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-33 {
		background:url(../img_pc/section_33.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-34 {
		background:url(../img_pc/section_34.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-35 {
		background:url(../img_pc/section_35.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-36 {
		background:url(../img_pc/section_36.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-37 {
		background:url(../img_pc/section_37.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-38 {
		background:url(../img_pc/section_38.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-39 {
		background:url(../img_pc/section_39.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-40 {
		background:url(../img_pc/section_40.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-41 {
		background:url(../img_pc/section_41.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-42 {
		background:url(../img_pc/section_42.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-43 {
		background:url(../img_pc/section_43.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-44 {
		background:url(../img_pc/section_44.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-45 {
		background:url(../img_pc/section_45.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-46 {
		background:url(../img_pc/section_46.jpg) no-repeat top center;
		height: px; 
		background-size: cover;
	}
	section#section-47 {
		background:url(../img_pc/section_47.jpg) no-repeat top center;
		height: px; 
		background-size: cover;
	}
	section#section-48 {
		background:url(../img_pc/section_48.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-49 {
		background:url(../img_pc/section_49.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-50 {
		background:url(../img_pc/section_50.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-51 {
		background:url(../img_pc/section_51.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-52 {
		background:url(../img_pc/section_52.jpg) no-repeat top center;
		height: px;
		background-size: cover;
	}
	section#section-53 {
		background:url(../img_pc/section_53.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-54 {
		background:url(../img_pc/section_54.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-55 {
		background:url(../img_pc/section_55.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-56 {
		background:url(../img_pc/section_56.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-57 {
		background:url(../img_pc/section_57.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-58 {
		background:url(../img_pc/section_58.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-59 {
		background:url(../img_pc/section_59.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-60 {
		background:url(../img_pc/section_60.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-61 {
		background:url(../img_pc/section_61.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-62 {
		background:url(../img_pc/section_62.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-63 {
		background:url(../img_pc/section_63.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-64 {
		background:url(../img_pc/section_64.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-65 {
		background:url(../img_pc/section_65.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-66 {
		background:url(../img_pc/section_66.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-67 {
		background:url(../img_pc/section_67.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-68 {
		background:url(../img_pc/section_68.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-69 {
		background:url(../img_pc/section_69.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-70 {
		background:url(../img_pc/section_70.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-71 {
		background:url(../img_pc/section_71.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-72 {
		background:url(../img_pc/section_72.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-73 {
		background:url(../img_pc/section_73.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-74 {
		background:url(../img_pc/section_74.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-75 {
		background:url(../img_pc/section_75.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-76 {
		background:url(../img_pc/section_76.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-77 {
		background:url(../img_pc/section_77.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-78 {
		background:url(../img_pc/section_78.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-79 {
		background:url(../img_pc/section_79.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-80 {
		background:url(../img_pc/section_80.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-81 {
		background:url(../img_pc/section_81.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-82 {
		background:url(../img_pc/section_82.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-83 {
		background:url(../img_pc/section_83.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-84 {
		background:url(../img_pc/section_84.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-85 {
		background:url(../img_pc/section_85.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-86 {
		background:url(../img_pc/section_86.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-87 {
		background:url(../img_pc/section_87.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-88 {
		background:url(../img_pc/section_88.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-89 {
		background:url(../img_pc/section_89.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-90 {
		background:url(../img_pc/section_90.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-91 {
		background:url(../img_pc/section_91.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-92 {
		background:url(../img_pc/section_92.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-93 {
		background:url(../img_pc/section_93.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-94 {
		background:url(../img_pc/section_94.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}
	section#section-95 {
		background:url(../img_pc/section_95.jpg) no-repeat top center;
		height: px;  
		background-size: cover;
	}

/*-----------------スマホサイズ-----------------------*/

@media screen and (max-width:600px) {

    .-pc {
        display: none;
    }
    .-sp {
        display: block;
    }
	
/* ---------------------------------------------------
 * BODY
/* ---------------------------------------------------*/
	body {
        font-size: 6px;
    }
	#wrap {
		width: 1100px;
		margin: 0 15px;
		max-width: 100%;
        width: 100%;
		margin: 0 auto;
	}
	#container {
		position: relative;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
	
/* ---------------------------------------------------
 * フッター
/* ---------------------------------------------------*/
    footer {
        text-align: center;
        font-size: 12px;
        padding: 15px;
		line-height: 21px;
		background-color: #333;
		color: #fff;
    }
    footer a{
        color: #fff;
    } 
	
	/* ---------------------------------------------------
	 * 背景画像を指定
	/* ---------------------------------------------------*/
    section#section-01,
    section#section-02,
    section#section-03,
    section#section-04,
    section#section-05,
    section#section-06,
    section#section-07,
    section#section-08,
    section#section-09,
    section#section-10,
    section#section-11,
    section#section-12,
    section#section-13,
    section#section-14,
    section#section-15,
    section#section-16,
    section#section-17,
    section#section-18,
    section#section-19,
    section#section-20,
    section#section-21,
    section#section-22,
    section#section-23,
    section#section-24,
    section#section-25,
    section#section-26,
    section#section-27,
    section#section-28,
    section#section-29,
    section#section-30,
    section#section-31,
    section#section-32,
    section#section-33,
    section#section-34,
    section#section-35,
    section#section-36,
    section#section-37,
    section#section-38,
    section#section-39,
    section#section-40,
    section#section-41,
    section#section-42,
    section#section-43,
    section#section-44,
    section#section-45,
    section#section-46,
    section#section-47,
    section#section-48,
    section#section-49,
    section#section-50,
    section#section-51,
    section#section-52,
    section#section-53,
    section#section-54,
    section#section-55,
    section#section-56,
    section#section-57,
    section#section-58,
    section#section-59,
    section#section-60,
    section#section-61,
    section#section-62,
    section#section-63,
    section#section-64,
    section#section-65,
    section#section-66,
    section#section-67,
    section#section-68,
    section#section-69,
    section#section-70,
    section#section-71,
    section#section-72,
    section#section-73,
    section#section-74,
    section#section-75,
    section#section-76,
    section#section-77,
    section#section-78,
    section#section-79,
    section#section-80,
    section#section-81,
    section#section-82,
    section#section-83,
    section#section-84,
    section#section-85,
    section#section-86,
    section#section-87,
    section#section-88,
    section#section-89,
    section#section-90,
    section#section-91,
    section#section-92,
    section#section-93,
    section#section-94,
    section#section-95{
    background: none !important;
  }		

/* ---------------------------------------------------
 * YouTube
/* ---------------------------------------------------*/
	.youtube_container{
		position: relative;
	}
	.youtube_box {
		position: absolute;
		z-index: 999;
		width: 89%;
		height: 85.6%;
		left: 50%;
		top: 57%;
		transform: translate(-50%, -50%);
	}
	#video-container {
        max-width: 387px;
        width: 101%;
        max-height: 324px;
        height: 100%;
        margin: 0 auto;
        margin-left: -0.5%;
    }
	
	/*---------------------
	* 波紋アニメーション
	---------------------*/
	.ripple_01, .ripple_02 {
		width: 20vw;
		height: 20vw; 
	}
	
/* ---------------------------------------------------
 * 第1,2,3,4話バー
/* ---------------------------------------------------*/
	.movie_box {
		position: absolute;
		max-width: 576px;
		width: 90%;
		left: 50%;
		top: 44%;
		transform: translate(-50%, -50%);
		margin: 0 auto;
	}
	
/* ---------------------------------------------------
 * CTA
/* ---------------------------------------------------*/
	.form_box {
		position: absolute;
		z-index: 99;
		width: 90%;
		left: 0;
		right: 0;
		margin: auto;
		top: 8%;
	}
}