/*
	ORANGE FILM STUDIO
*/


/*=============================================================
//	定数
=============================================================*/
:root{
	--header-height:	320px;
	--copyright-top:	420px;
	--top-image-left:	360px;
}

/*=============================================================
//	ページ全体の設定
=============================================================*/
body{
	background-color: #000000;

	margin: 0px;
}

p, ul{
	font-family: 'Noto Sans JP', serif;
/*
	font-family: 'Kosugi', sans-serif;
	font-family: 'Sawarabi Gothic', sans-serif;
	font-family: 'M PLUS 1p', sans-serif;
	font-family: 'Reggae One', cursive;
*/
	white-space: nowrap;
	margin:	0px;
}

/*=============================================================
//	リンクの設定
=============================================================*/
/*	通常時	*/
a:link{
	text-decoration: none;
	color: #ffffff;
}
/*	訪問済みのリンクの色	*/
a:visited{
	color: #ffffff;
}
/*	カーソルが乗っているリンクの色	*/
a:hover{
	font-weight: bold;
	color: #ffffff;
	transform: scale( 1.1 );
}
/*	クリック中のリンクの色	*/
a:active{
	font-weight: bold;
	color: #ffffff;
	transform: scale( 1.1 );
}


/*=============================================================
//	レスポンシブデザイン
=============================================================*/
/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
}


/*=============================================================
//	アニメーション用
=============================================================*/
#opening{
	display:	none;
	position:	fixed;
	z-index:	16;
	top:	0px;
	left:	0px;

	width:	100%;
	height:	100%;

	opacity:	0.0;
}

.opening_filter{
	background-color:	#000000;
	width:	100%;
	height:	100%;

	display:	flex;
	align-items:		center;
	justify-content:	center;
}

.opening_filter p{
	font-size:	xxx-large;
	color:	#ffffff;
}

#contents{
	display:	none;
}

#catch_phrase{
//	display:	none;
}
#catch_phrase span{
	display: inline-block;
}


/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 480px )
{
	.opening_filter p{
		font-size:	xx-large;
	}
}


/*=============================================================
//	背景文字
=============================================================*/
.background_font, .background_font_contact{
	position:	absolute;
	overflow:	hidden;

	z-index:	-1;
}

.background_font p{
	color:	#202020;
	margin:	0px 0px 2em 0px;
}

.background_font_small, .background_font_contact_small{
	position:	absolute;
	left:	48px;
	top:	702px;

	z-index:	-1;
}

.background_font_small p{
	font-size:	small;
	color:	#404040;
}

.background_font_contact_small p{
	font-size:	small;
	color:	#404040;
}


.background_font_contact p{
	font-size:	xxx-large;
	color:	#000000;
	opacity:	0.5;
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
	.background_font{
		left:	32px;
		top:	160px;
		width:	calc( 100% - 32px );
	}

	.background_font p{
		font-size:	152px;
		letter-spacing: 16px;
	}

	.background_font_contact{
		left:	48px;
	}
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
	.background_font_small, .background_font_contact, .background_font_contact_small{
		display:	none;
	}

	.background_font{
		top:	960px;
		width:	100%;
	}

	.background_font p{
		font-size:	52px;
	}

	.background_font_small{
		display:	none;
	}
}


/*=============================================================
//	ヘッダー
=============================================================*/
#header_top{
	position: relative;
	width:	80%;
	height:	352px;

	z-index:	32;
}

.header{
	position: relative;
	top: 32px;
	left: 32px;
}

#header_logo{
}

#header_logo_img{
	width: 96px;
	height: 96px;
}

.header_link_container{
	width: 320px;
}

.header_link{
	display: 		flex;
	align-items:	center;
	justify-content:	space-between;
	width: 128px;
}

.header_link p{
	color: #ffffff;
}

.header_link img{
	width:	40px;
	height:	12px;
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
	.header{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
	}

	.header_link_container{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.header_link p{
		margin-right: 1em;
	}
}
/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
	.header_logo{
		padding-bottom: 48px;
	}

	.header_link{
		padding-left: 8px;
		margin-top:	32px;
	}
}


/*=============================================================
//	コピーライト
=============================================================*/
#copyright{
	position: absolute;
	left: 16px;
	top: 440px;

	display: flex;

	writing-mode:	vertical-rl;

	z-index:	32;
}

#copyright p{
	font-size: 8px;
	color: #ffffff;
}
/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
	.copyright{
		display:	none;
	}
}




/*=============================================================
//	orangefilm.jp
=============================================================*/
.site_name{
	position: absolute;
	top: 32px;
	z-index: 8;

	writing-mode:	vertical-rl;
	transform:	rotate( 180deg );

	z-index:	32;
}

.site_name p{
	color: #FF4500;
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
	.site_name{
		right: 32px;
	}

	.site_name p{
		font-size: 48px;
		letter-spacing: 2px;
	}
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
	.site_name{
		right: 0px;
	}

	.site_name p{
		font-size: 64px;
		letter-spacing: 8px;
	}
}


/*=============================================================
//	トップ画像
=============================================================*/
.top_image_container{
	margin-bottom:	64px;
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
	.top_image_container{
		position: relative;

		left: var( --top-image-left );
		width: calc( 100% - var( --top-image-left ) );
		height:	768px;

		overflow: hidden;
	}

	.top_image{
		position: relative;
		left: calc( ( 100% - 1280px ) / 2);

		width: 1280px;
		height: 720px;
	}
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
	.top_image_container{
		width: 100%;
	}

	.top_image{
		width: 100%;
		height: 56.25vw;	/*	9/16 vw	*/
	}
}


/*=============================================================
//	キャッチフレーズ
=============================================================*/
.catch_phrase{
	overflow: hidden;
}

.catch_phrase_container{
	display:	flex;
	flex-direction:	column;
}

.catch_phrase p{
	font-weight: bold;
	color: #ffffff;
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
	.catch_phrase{
		position: absolute;
		top: var( --copyright-top );
		left: 64px;

		width:	calc( 100% - 64px );
	}

	.catch_phrase p{
		font-size: 80px;
	}
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
	.catch_phrase{
		width:	100%;
		margin-bottom:	64px;
		display:	flex;
		justify-content:	center;
	}

	.catch_phrase p{
		font-size: 32px;
	}
}


/*=============================================================
//	キャッチフレーズ
=============================================================*/
/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
	.phrase_1{
		padding-left:	48%;
	}
	.phrase_2{
		padding-left:	16%;
		top:	-32px;
	}
	.phrase_3{
		padding-left:	32%;
		top:	32px;
	}

	.phrase_container{
		position: relative;
		display: flex;

		width:	100%;
		box-sizing:	border-box;
	}

	.phrase_caption_jpn{
		font-size: xxx-large;
	}

	.phrase_caption_eng{
		font-size: small;
	}

	.phrase p{
		font-size:	large;
	}

	.phrase_align_top{
		display:	flex;
	}

	.phrase_align_bottom{
		display:	flex;
		align-items:	flex-end;
	}
}
/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
	.phrase_container{
		display: flex;

		width:	90%;
		margin:	0px auto;
	}

	.phrase_1, .phrase_2, .phrase_3{
		margin-bottom:	128px;
	}

	.phrase_caption_jpn{
		font-size: xx-large;
	}

	.phrase_caption_eng{
		font-size: x-small;
	}

	.phrase p{
		font-size:	small;
	}
}

.phrase_top{
	position: relative;

	width: 100%;

	z-index: 8;
}

.phrase_caption{
	writing-mode: vertical-rl;
	margin-right: 32px;
}

.phrase_caption_jpn{
	font-weight: bold;
	color: #ffffff;
	margin: 0px;
}

.phrase_caption_eng{
	transform: rotate( 180deg );

	font-weight: bold;
	text-align: right;
	color: #404040;
}

.phrase_caption span{
	color: #dd4000;
	text-shadow: 0px 1px #c0c0c0;
}

.phrase{
}

.phrase p{
	color:	#ffffff;
	margin:	0.3em 0px;
//	white-space:	normal;
}


/*=============================================================
//	WORKS
=============================================================*/
.works_top{
	width:	100%;

	display: flex;
	flex-wrap:	wrap;
}

.works_img_container{
	flex-basis: 48%;
	flex-grow:	1;
}

.works_img{
	width: 100%;
	object-fit: cover;
	background-color: #808080;
}

.works_img{
	width: 100%;
	height:	672px;
	object-fit: cover;
	background-color: #808080;
}

.works_container{
	flex-basis: 52%;
	flex-grow:	1;
	flex-shirnk: 0;
	background-color: #dd4000;

	display:	flex;
	flex-direction:	column;
	justify-content:	space-between;
}

.works_title_container{
	width: 50%;
	margin-bottom: 32px;

	height:	128px;
}

.works_title{
	letter-spacing: 16px;
}

.works_title > p{
	line-height: 1em;
	font-weight:	bold;
}

.works_sub_title{
	padding-top: 16px;
	flex-basis: 50%;
}

.works_sub_title > p{
	line-height: 1em;
	color: rgba( 80, 80, 80, 0.1 );
}

.works_menu_container{
	display:	flex;
	flex-wrap:	wrap;
	justify-content:	space-around;
}

.works_menu_container p{
}


/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
	.works_title > p{
		font-size: 80px;
	}

	.works_sub_title > p{
		font-size: 56px;
	}
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
	.works_title > p{
		font-size: 64px;
	}

	.works_sub_title > p{
		font-size: 48px;
	}
}


/*=============================================================
//	SERVICE
=============================================================*/
.service_top{
	width:	100%;
	height:	192px;

	display:	flex;
	align-items:	center;
	background-color:	#ffffff;
}

.service_container{
	width:	80%;
	margin:	0px auto;

	display:	flex;
	flex-wrap:	wrap;
	align-items:	center;
}

.service_container p{
}


/*=============================================================
//	ページトップへ
=============================================================*/
.to_top{
	position:	fixed;
	right: 16px;
	bottom: 8%;
	transform:	rotate( -90deg );
	text-align:	center;
	z-index:	80;
}

.to_top p{
	font-size:	x-small;
	color:	#808080;
}

.to_top img{
	width:	32px;
	height:	8px;
	filter:	contrast( 0% );
}

.to_top_narrow{
	text-align:	center;
	background-color:	#ffffff;
	padding-bottom:	16px;
}

.to_top_narrow p{
	font-size:	small;
	font-weight:	bold;
	color:	#000000;
}

.to_top_narrow img{
	width:	12px;
	height:	40px;
	filter:	invert( 100% );
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
/*
@media screen and ( min-width: 782px )
{
	.to_top_narrow{
		display:	none;
	}
}
*/

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
/*
@media screen and ( max-width: 782px )
{
	.to_top{
		display:	none;
	}
}
*/

/*=============================================================
//	FOOTER
=============================================================*/
.footer_top{
	width:	100%;
	background-color:	#000000;
}

.footer_top p{
	color:	#ffffff;
}

.footer_container{
	width:	80%;
	margin:	0px auto;
}


.footer_logo{
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
	.footer_logo{
		display:	none;
	}
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
}


/*=============================================================
//	仕事ページトップ
=============================================================*/
.works_page_top{
	position: relative;

	margin:	0px auto;
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px ){
	.works_page_top	{	width:	70%;	}
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px ){
	.works_page_top	{	width:	96%;	}
}


/*=============================================================
//	仕事ページ見出し
=============================================================*/
.works_page_caption_set{
	margin-bottom:	64px;
}

.works_page_caption{
	font-size:	xx-large;
	color:	#ffffff;
}

.works_page_caption_sub{
	font-size:	large;
	color:	#404040;
}

.works_page_date{
}

.works_page_date > p{
	font-size:	x-small;
	color: #FF4500;
}


/*=============================================================
//	仕事ページ表示枠
=============================================================*/
.works_box_large, .works_box_small{
	position:	relative;

	display:	flex;
	flex-direction:		column;
	justify-content:	center;
	align-items:		center;

	margin-bottom:	128px;
	background-color:	#e5e5e5;
}


.works_box_large{
	width:	100%;

	padding-top:	64px;
	padding-bottom:	32px;
}

.works_box_small{
	flex-basis:	48%;
	min-width:	320px;

	padding-left:	8px;
	padding-right:	8px;
	padding-top:	64px;
	padding-bottom:	64px;

	box-sizing:	border-box;
}

.works_box_small iframe{
	width:	100%;
	height:	100%;
}

.works_box_img{
	position:	absolute;
	top:	0px;
	left:	0px;

	width:	96px;
	height:	auto;
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px ){
	.works_box_small{
	}
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px ){
	.works_box_small{
		width:	100%;
		flex-grow:	1;
	}
}


/*=============================================================
//	配信関係
=============================================================*/
.live_img_frame{
	width:	80%;
	height:	auto;
}

.live_img_frame img{
	width:	100%;
	height:	100%;
	object-fit: contain;

	margin-bottom:16px;
}

.live_icon_container{
	width:	80%;

	display:	flex;
	justify-content:	space-around;
	align-items:	center;

	flex-wrap:	wrap;

	margin-bottom:16px;
}

.live_brief_container{
	width:	70%;
	justify-self:	flex-start;
}

.live_brief_container p{
	font-size:	small;
}


/*=============================================================
//	動画関係
=============================================================*/
.video_container{
	position:	relative;

	display:	flex;
	flex-wrap:	wrap;
	justify-content:	space-between;
}

.video_frame{
	width:	80%;
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px ){
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px ){
}


/*=============================================================
//	写真関係
=============================================================*/
.photo_img_frame{
	width:	80%;

	display:	flex;
	margin-bottom:	32px;
}

.photo_img_frame img{
	width:	100%;
	height:	100%;
	object-fit: contain;
}

.photo_desc_container
{
	width:	80%;
	display:	flex;
	flex-direction:	column;
	align-items:	flex-end;
}

.photo_brief{
	font-size:	small;
}


/*=============================================================
//	HP関係
=============================================================*/
.hp_container{
	width:	100%;

	display:	flex;
	flex-wrap:	wrap;
	justify-content:	space-between;
}

.hp_img_frame{
	width:	80%;
}

.hp_img_frame img{
	width:	100%;
	height:	100%;
	object-fit: contain;
}


/*=============================================================
//	動画、HPの説明表示
=============================================================*/
.works_desc_button{
	position:	absolute;
	right:	32px;
	bottom:	16px;

	font-size:	x-small;
	color: #FF4500;
}

.works_desc_filter{
	position:	absolute;

	width:	100%;
	height:	100%;

	background-color:	rgba( 1.0, 1.0, 1.0, 0.75 );

	display:	flex;
}

.works_desc{
	width:		70%;
	height:		192px;
	display:	flex;
	flex-direction:		column;
	justify-content:	space-around;
	margin:	auto auto;
}

.works_desc_title{
	font-size:	medium;
	color:	#ffffff;
}

.works_desc_brief{
	font-size:	small;
	color:	#ffffff;
}

.works_desc_stuff{
	font-size:	x-small;
	color:	#ffffff;
}


/*=============================================================
//	Contact
=============================================================*/
/*-------------------------------------------------------------
	Contact	タイトル
-------------------------------------------------------------*/
.contact_page_top{
	width:	64%;
	margin-left:	auto;
	margin-right:	auto;
}

.contact_title{
	font-size:	xx-large;
	margin-bottom:	32px;
}

.contact_desc{
	margin-bottom:	32px;
}

.contact_desc p{
	margin:	0px;
}

.contact_form_top{
	width:	100%;
	display:	flex;
	flex-direction:	column;
	align-items:	center;
}

.contact_page_top span{
	color:	#ff0000;
}

.contact_form_container{
	margin-bottom:	16px;
	width:	80%;
}

.contact_form_container_privacy{
	margin-bottom:	16px;
	display:	flex;
}

.contact_form_container_submit{
	margin-top:	16px;
	margin-bottom:	16px;
}

.contact_form_container input{
	width:	100%;
}

.contact_form_container textarea{
	width:	100%;
	line-height:	1.3em;
	height:	calc( 1.3em * 5 );
}

/*	通常時	*/
form a:link{
	color: #0000EE;
	text-decoration: underline;
}
/*	訪問済みのリンクの色	*/
form a:visited{
	color: #551A8B;
	text-decoration: underline;
}
/*	カーソルが乗っているリンクの色	*/
form a:hover{
}
/*	クリック中のリンクの色	*/
form a:active{
	color: #FF0000;
	text-decoration: underline;
}


/*=============================================================
//	Privacy policy
=============================================================*/
.privacy_top{
	margin-bottom:	64px;
}

/*-------------------------------------------------------------
	画面の幅782ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 782px )
{
	.privacy_top{
		position: relative;

		left: var( --top-image-left );
		width: calc( 100% - var( --top-image-left ) );
	}
}

/*-------------------------------------------------------------
	画面の幅782ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 782px )
{
	.privacy_top{
		width: 90%;
		margin-left:	auto;
		margin-right:	auto;
	}
}


.privacy_container{
	margin-bottom:	64px;
}

h2, h3{
	margin-bottom:	0px;
}

.plivacy_headline_1{
}

.plivacy_headline_2{
}


/*=============================================================
//	Company
=============================================================*/
.corp_info_top{
	width:	60%;
	margin-left:	auto;
	margin-right:	auto;
}

.corp_info_item{
	display:	flex;
	align-items:	center;
	margin-bottom:	16px;
}

.corp_info_caption{
	width:	80px;
	flex-shrink:	0;
}

.corp_info_desc{
}