@charset "utf-8";
/* 20240626 */
body {background-color: var(--color_l02);}
body#movie{
	display: flex;
	flex-direction: column;
	align-items: center;
	}
/* --------------------------------------------- */
/* ------------------- main -------------------- */
/* --------------------------------------------- */
body#movie main article{
	display: flex;
	justify-content: center;
	width: 100vw;
	position: relative;
}
body#movie main article .inner_width{
	display: flex;
	flex-direction: column;
	margin: calc(10vw + 4em) auto calc(4vw + 4em);
	}
	body#movie main article:nth-last-of-type(2) .inner_width{
			margin-bottom: calc(10vw + 6em);
		}

/*==================================================
foreword
===================================*/
body#movie main article#foreword .inner_width{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: calc(4vw);
	}
body#movie main article#foreword .inner_width h2{
	font-family: "WindSong", cursive, 'Noto Sans JP', sans-serif,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size: 3em;
	color: #aaa;
    transform: rotate(-6deg);
	margin-bottom: .8em;
	position: relative;
	}
	#underline {
		display     : inline-block;    /* 変形するためのブロック化 */
		line-height : 1em;             /* 行の高さ */
		transform   : rotate(3deg) scale(16, 0.5);   /* 変形 横,縦 */
		position: absolute;
		left: 1.4em;
		bottom: -.3em;
		}
body#movie main article#foreword .inner_width h1{
	line-height: 1.6em;
	margin-bottom: 1.6em;
	}
body#movie main article#foreword .inner_width h1 span{
	display: inline-block;
	}
body#movie main article#foreword .inner_width p{
	margin-bottom: 1.4em;
	}
body#movie main article#foreword .inner_width p span{
	line-height: 2em;
	display: inline-block;
	}

/*==================================================
movies 01/02
===================================*/
body#movie main article#movies .inner_width {
	margin-top: 0;
	width: 86%;
	}
body#movie main article#movies .inner_width h2 {
	margin-bottom: 1em;
	}
/*------------------------------------
ソート機能のためのcss
参考：https://mukuchi.work/sortchange/
------------------------------------*/
div#sort_button label {
	display: inline-block;
	cursor: pointer;
	background-color: #fff;
	color: #999;
	padding: .2em .4em;
	margin-right: .6em;
	margin-bottom: .4em;
	border-radius: .2em;
	}
div#sort_button label:last-of-type {
	margin-bottom: .8em;
	}
div#sort_button input {
	display: none;
	}
div#sort_button input:checked + label{
	background-color: #ccc;
	color: #333;
	}
div#sort_movies section {
	width: 100%;
	transition: .5s;
	margin-bottom: 1.6em;
	}
.hidden {
	transform: scale(0, 0);
	}

/*==================================================
movies 02/02
===================================*/
div#sort_movies section img { width: 100%;}
	@media (min-width: 640px){
		div#sort_button{ text-align:center;}
		div#sort_movies { 
			display: flex;
			flex-wrap: wrap;
			}
		div#sort_movies section{ 
			width: 48%;
			margin: 0 1% 1.6em;
			}
		}
	@media (min-width: 1200px){
		div#sort_movies section{ 
			width: 31%;
			margin: 0 1% 1.6em;
			}
		}
	@media (min-width: 1600px){
		div#sort_movies section{ 
			width: 23%;
			margin: 0 1% 1.6em;
			}
		}

/*------------------------------------
モーダル表示のためのCSS
------------------------------------*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{display: none;}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

/*モーダル内のYoutube埋め込み*/
.youtube-variable{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube-variable iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*==================================================
latest
===================================*/
body#movie main article#latest .inner_width{
	min-height: 16vh;
	}

/*-------------------------------------
背景youtube動画設定
------------------------------------*/
#latest #loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 30px;
}
#latest #loading.disappear{
  display: none;
}

/* YouTube表示エリア */
#latest #youtube-area{
  position: absolute;
  z-index: 10;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
  opacity: 0;
}
#latest #youtube-area.appear {
  animation-name:pageanimetuika;
  animation-duration:.6s;
  animation-fill-mode:forwards;
}
@keyframes pageanimetuika{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#latest #youtube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 178vh;
  height: 56vw;
  min-height: 100%;
  min-width: 100%;
}
/*YouTubeクリック防止マスクエリア*/
#latest #youtube-mask{
    position: absolute;
    z-index: 11;
    top:0;
    width:100%;
    height: 100%;
	background-color: rgba(0,0,0,.8);
	mix-blend-mode: multiply;
}
#latest #youtube-area #text-area{
	z-index: 12;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	color:#fff;
	text-align: center;
	opacity: 1;
	}
	#latest #youtube-area #text-area h2{
		margin-bottom: .4em;
		}
	#latest #youtube-area #text-area img{
		width: 100%;
		}
#latest #youtube-area #text-area{
	z-index: 12;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	color:#fff;
	text-align: center;
	}


/*==================================================
波線区切りエリア https://www.shapedivider.app/
===================================*/
.bg_wavy_l01,.bg_wavy_l02 {
    position: absolute;
	bottom: calc(0px - 4vw - 4em);
    width: 100vw;
    overflow: hidden;
    line-height: 0;
	z-index: 13;
}
.bg_wavy_l01 svg,.bg_wavy_l02 svg {
    position: relative;
    display: block;
    width: calc(144% + 1.3px);
    height: calc(4vw + 4em);
}
.bg_wavy_l01 .shape-fill {fill: var(--color_l01);}
.bg_wavy_l02 .shape-fill {fill: var(--color_l02);}

article#latest div.bg_wavy_l02{transform: rotate(180deg); bottom: -1px;}


/* --------------------------------------------- */
/* -------------------- 横長 -------------------- */
/* --------------------------------------------- */
/* 横長 */
@media (orientation: landscape){
body#movie main article .inner_width{
	width: 86vw;
	}
	body#movie main article:first-of-type .inner_width{
			margin-top: calc(4vw + 4em);
		}

/*==================================================
foreword
===================================*/
body#movie main article#foreword .inner_width{
	margin-bottom: 4em;
	}

/*==================================================
latest
===================================*/
body#movie main article#latest .inner_width{
	min-height: 30vh;
	}
#latest #youtube-area #text-area img{
    max-width: 680px;
    }

}