@charset "UTF-8";


main
{
	font-family    : 'Noto Serif JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", arial, "Lucida Sans", "メイリオ", Meiryo, "Osaka", sans-serif;
	font-size      : 18px;
	font-weight    : 400;
	line-height    : 1.8;
	
	min-width      : 1100px;
}

main::before
{
    height         : 90px;
}

a
{
	color          : #a40001;
}

a:hover
{
	color          : #f0ab50;
}


.section_title
{
	margin         : 0 auto;
	margin-bottom  : 100px;

	text-align     : center;
}

.section_title .t_main
{
	display        : block;

	color          : #ff6800;
	font-family    : "Alfa Slab One", serif;
	font-size      : 300%;
	text-align     : center;
	line-height    : 1.0;
	letter-spacing : 0.05em;
}

.section_title .t_sub
{
	display        : block;

	margin-top     : 30px;

	color          : #ff6800;
	font-size      : 100%;
	font-weight    : bold;
	text-align     : center;
	line-height    : 1.0;
	letter-spacing : 0.1em;
}


.inner
{
	margin         : 0 auto;
	width          : 1100px;
}


.site-header
{
    display        : none!important;
}

.site-footer
{
    display        : none!important;
}







/*=========================================================================================================

  HEADER

=========================================================================================================*/



#HEADER
{
	position       : fixed;
	top            : 0;

	display        : flex;
	align-items    : center;

	padding        : 0px 30px;

	width          : 100%;
	min-width      : 1100px;
	height         : 90px;

	z-index        : 100;

	background     : rgba(255,255,255,0.95);
	box-sizing     : border-box;
}


/*--------------------------------*/


#HEADER .header_logo
{
	width          : 240px;
}

#HEADER .header_logo img
{
	width          : 100%;
}


/*--------------------------------*/


#HEADER .header_nav
{
	margin-left    : auto;
}

#HEADER .header_nav ul
{
	display        : flex;
	gap            : 40px;
}

#HEADER .header_nav ul a
{
	text-decoration: none;
}

#HEADER .header_nav ul a:hover
{
	text-decoration: underline;
}


/*--------------------------------*/


#HEADER .header_sns
{
	display        : flex;
	align-items    : center;
	gap            : 30px;

	margin-left    : 50px;
}

#HEADER .header_sns li
{
	width          : 50px;
}

#HEADER .header_sns a
{
	display        : block;
	border-radius  : 50%;
	overflow       : hidden;
}

#HEADER .header_sns a.twx
{
	padding        : 5px;
	background     : #000;
}

#HEADER .header_sns img
{
	width          : 100%;
}


/*--------------------------------*/


#HEADER .menu_toggle
{
    display: none;
}




/*=========================================================================================================

  MAIN_VISUAL

=========================================================================================================*/



#MAIN_VISUAL
{
    min-width      : 1100px;
}


#MAIN_VISUAL .mv_image img
{
	width          : 100%;
}




/*=======================================================================================================*/


.info_area
{
	padding        : 30px 0 30px;
	
	background     : #fff;
	
}

.info_area .info_text_01
{
	width          : 100%;
	font-size      : 150%;
	font-weight    : bold;
	text-align     : center;
}



/*=======================================================================================================*/



.credit_belt
{
	padding        : 30px 0 30px;
	
	background     : #ff6800;
	background     : #82644f;
	
}

.credit_belt p
{
	color          : #fff;
	font-size      : 80%;
	text-align     : center;
	line-height    : 2.0;
}

.credit_belt .credit_director
{
	margin-bottom  : 10px;
	
	color          : #fff;
	font-size      : 100%;
	text-align     : center;
	line-height    : 2.0;
}

.credit_belt .credit_logo
{
	display        : block;

	margin         : 0 auto;
	margin-top     : 15px;

	width          : 240px;
	
}




/*=========================================================================================================

  TRAILER

=========================================================================================================*/



#TRAILER
{
	padding        : 120px 0 100px;

}


#TRAILER .movie
{

}

#TRAILER .movie .inbox
{

}

#TRAILER .movie .inbox iframe
{
	display        : block;

	margin         : 0 auto;
	padding        : 0;

	width          : 960px;
	height         : 540px;
}



/*=======================================================================================================*/


.news_area
{
	padding        : 60px 0 60px;
	
	background     : #edded4;
	/*border-bottom  : 10px solid #fff;*/
}

.news_area .news_title
{
	font-size      : 150%;
	font-weight    : bold;
	line-height    : 1.0;
	letter-spacing : 0.05em;
}

.news_area .news_list
{
	margin-top     : 25px;
}

.news_area .news_list li
{
	display        : flex;

	padding        : 15px 10px;

	border-bottom  : 1px dotted #000;
}

.news_area .news_list .news_date
{
	flex-shrink    : 0;
	
	width          : 120px;
}

.news_area .news_list .news_text
{
	
}







/*=======================================================================================================*/



.banner_area
{
	padding        : 60px 0;
}

.banner_area .bnr_box
{
	margin         : 0 auto;
	width          : 1100px;

	text-align     : center;
}

.banner_area .bnr_box img
{
	width          : 100%;
}





/*=========================================================================================================

  INTRO

=========================================================================================================*/



#INTRO
{
	padding        : 120px 0 90px;

	background     : url(/asset/img/oibokkeshi_movie/intro_back_01.jpg) no-repeat top center #eab776;
	background-size: cover;
	box-shadow     : rgba(0, 0, 0, 0.3) 0px 0px 86px -18px inset, rgba(0, 0, 0, 0.3) 0px 0px 36px -18px inset;
}

#INTRO .intro_box
{
	
}

#INTRO .intro_txt_head
{
	font-size      : 200%;
	font-weight    : bold;
	line-height    : 1.8;
}

#INTRO .intro_txt
{
	margin-top     : 40px;
	
	font-size      : 120%;
	line-height    : 2.2;
}

#INTRO .intro_img
{
	display        : flex;
	gap            : 60px;

	margin-top     : 80px;
}

#INTRO .intro_img img
{
	/*width          : 520px;*/
	width          : calc( 50% - 30px );
}









/*=========================================================================================================

  STORY

=========================================================================================================*/



#STORY
{
	padding        : 120px 0 0px;
	/*
	background     : url(/asset/img/oibokkeshi_movie/intro_back_01.jpg) no-repeat top center #eab776;
	background-size: cover;
	*/
}

#STORY .story_txt
{
	font-size      : 120%;
	text-align     : center;
	line-height    : 2.2;
}


#STORY .slider-container
{
	display        : flex;
	overflow       : hidden;
	width          : 100%;
}

#STORY .story_img
{
	display        : flex;
	flex-shrink    : 0;

	margin-top     : 100px;

	min-width      : max-content; 
  
	--speed-per-img: 8s;
	animation      : infinite-slider calc(var(--num-images) * var(--speed-per-img)) linear infinite;

	margin-right   : -1px;

/*
	 will-change: transform;  
	  transform: translate3d(0, 0, 0);
	  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  */
}

#STORY .story_img img
{
	width          : auto;
	height         : 300px;
}

@keyframes infinite-slider
{
	  0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}



/*=======================================================================================================*/


.link_area
{
	padding        : 60px 0;
	
	background     : #998374;
}

.link_area .inner
{
	padding        : 45px 40px;
	
	background     : #fff;
	box-sizing     : border-box;
}

.link_area .link_title
{
	font-size      : 130%;
	font-weight    : bold;
	line-height    : 1.0;
	letter-spacing : 0.05em;
}

.link_area .link_list
{
	margin-top     : 30px;
}

.link_area .link_list li
{
	
}

.link_area .link_list li + li
{
	margin-top     : 10px;
}


.link_area .link_list a
{
	display: flex;
	align-items:center;
	
	position: relative;
	
	padding: 0 0 0 24px;
	
	text-decoration: none;
}

.link_area .link_list a::before,
.link_area .link_list a::after
{
	content: "";
	
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.link_area .link_list a::before
{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ff6800;
}
.link_area .link_list a::after
{
	left: 7px;
	
	width: 5px;
	height: 5px;
	
	border: 5px solid transparent;
	border-left: 5px solid #fff;
	
	box-sizing: border-box;
}

.link_area .link_list a:hover
{
	text-decoration:underline;

}








/*=========================================================================================================

  STAFF

=========================================================================================================*/



#STAFF
{
	padding        : 120px 0 120px;

	background     : url(/asset/img/oibokkeshi_movie/staff_back_01.jpg) repeat top center #f2f1f0;

}

#STAFF .sc_list
{

}

#STAFF .sc_list li
{
	display        : flex;
	gap            : 40px;

	padding        : 40px;

	background     : #fff;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.15) 0px 10px 40px -30px
}

#STAFF .sc_list li + li
{
	margin-top     : 80px;
}

#STAFF .sc_list .photo_box
{
	flex-shrink    : 0;
	
	width          : 300px;
}

#STAFF .sc_list .photo_box img
{
	width          : 100%;
}

#STAFF .sc_list .photo_box .caption
{
	margin-top     : 5px;

	font-size      : 80%;
}

#STAFF .sc_list .text_box
{

}

#STAFF .sc_list .text_box .sc_role
{
	color          : #ff6800;
	font-size      : 90%;
}

#STAFF .sc_list .text_box .sc_name
{
	color          : #ff6800;
	font-size      : 180%;
	font-weight    : bold;
}

#STAFF .sc_list .text_box .sc_text
{
	margin-top     : 15px;
}





/*=========================================================================================================

  COMMENT

=========================================================================================================*/



#COMMENT
{
	padding        : 120px 0 80px;
	background     : #ccc;
}

#COMMENT .comment_list
{
	display        : flex;
	flex-wrap      : wrap;
	gap            : 60px 60px;
}

#COMMENT .comment_list li
{
	width          : 520px;
}

#COMMENT .comment_list li .comment_text
{
	text-align     : left;
}

#COMMENT .comment_list li .comment_name
{
	color          : #9d000a;
	font-size      : 150%;
	font-weight    : bold;
	text-align     : right;
	line-height    : 1.2;
}

#COMMENT .comment_list li .comment_name span
{
	margin-right   : 10px;
	letter-spacing : -0.1em; 
}

#COMMENT .comment_list li .comment_job
{
	color          : #9d000a;
	font-size      : 90%;
	text-align     : right;
}

#COMMENT .note_text
{
	margin-top     : 60px;
	
	font-size      : 90%;
	text-align     : right;
}



/*=========================================================================================================

  THEATER

=========================================================================================================*/



#THEATER
{
	padding        : 120px 0 100px;

	background     : #ddd;
}
/*
#THEATER ul li
{
	display        : flex;
	justify-content: space-between;
}

#THEATER ul li:nth-child(odd)
{
	background     : #fcf3ee;
}

#THEATER ul li:nth-child(even)
{
	background     : #fae3d6;
}

#THEATER ul li a:hover
{
	color          : #dd7700;
	text-decoration: none;
}

#THEATER ul li .theater_place
{
	padding        : 10px 15px;
	
	width          : 10%;
	
	text-align     : left;
	
	border-right   : 2px solid #fff;
}

#THEATER ul li .theater_name
{
	padding        : 10px 15px;
	
	width          : 48%;
	
	text-align     : left;
	
	border-right   : 2px solid #fff;
}

#THEATER ul li .theater_tel
{
	padding        : 10px 15px;
	
	width          : 16%;
	
	text-align     : center;
	
	border-right   : 2px solid #fff;
}

#THEATER ul li .theater_date
{
	padding        : 10px 15px;
	
	width          : 26%;
	
	text-align     : left;
}

#THEATER ul li .theater_exbox
{
	margin         : 10px 0 5px;
	padding        : 10px;
	
	border         : 3px solid #cb9;
	background     : #fff;
	
	display        : block;
}
*/


/*===============
    #theater
===============*/

#THEATER .inner {
    margin: 0 auto;
    padding: 55px 50px 88px;
    text-align: left;
    background: #fff;
    position: relative;
	box-sizing:border-box;
}

#THEATER ul {
    background: url(/asset/kuwaigawa_movie/img/bor_dotted.png) repeat-x left bottom;
}

#THEATER ul li {
	display:flex;
	flex-wrap:wrap;
	gap:30px;
	
    padding: 30px 0px 30px 10px;
    background: url(/asset/kuwaigawa_movie/img/bor_dotted.png) repeat-x left top;
}

#THEATER .place {
	flex-shrink:0;
    width: 150px;
}

#THEATER .name {
	flex-shrink:0;
	width: 430px;
}

#THEATER .date {
	flex-shrink:0;
	width: 180px;
}

#THEATER .tel {
	flex-shrink:0;
	width: 140px;
}






#THEATER .talkEvent {
	width: calc( 100% - 10px );
	padding: 20px 30px;
	background: #edded4;
	box-sizing:border-box;
	font-size: 90%;
}




/*=======================================================================================================*/


.footer_area
{
	padding        : 20px 0;
	background     : #edded4;
}

.footer_area .copyright
{
	font-size      : 80%;
	text-align     : center;
}


.topicpath ol
{
	padding        : 0 30px;
	width          : 100%;
	box-sizing     : border-box;
}