@charset "UTF-8";

/*----------------
  #top
----------------*/
#top {
	padding: 7% 0 11%;
	background: url(../img/main_img.jpg) no-repeat center top;
	background-size: cover;
	position: relative;
}
#top .title {
	width: 50%;
}

.sp-title img{
	display: none;
}

#top .btn {
	position: absolute;
	bottom: 50px;
	left: 0;
	right: 0;
	text-align: right;
}

/*----------------
  #message
----------------*/
#message {
	text-align: center;
	background: url(../img/bg_red.png) repeat center top;
}
#message .cover {
	padding: 0 0 200px;
	background: url(../img/bg_img_message.png) no-repeat center bottom 16px;
}
#message h1 {
	margin: 0 auto 80px;
	padding: 80px 0 0;
	text-align: center;
}
#message .ceo {
	margin: 75px auto 0;
	font-size: 24px;
}

/*----------------
  #service
----------------*/
#service {
	background: url(../img/bg_orange.png) repeat center top;
}
#service .cover {
	padding: 0 0 120px;
	background: url(../img/bg_img_service.png) no-repeat center bottom 18px;
}
#service h1 {
	margin: 0 auto 120px;
	padding: 80px 0 0;
	text-align: center;
}
#service .type {
	text-align: center;
}
#service .type>li {
	margin: 0 12px;
	width: 304px;
	vertical-align: top;
	display: inline-block;
}
#service .type .icon {
	margin: 0 auto 20px;
	text-align: center;
}
#service .type .hd {
	margin: 0 auto;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	background: #2e2c2a;
}
#service .type .item {
	padding: 15px 19px;
	height: 170px;
	text-align: left;
	color: #2e2c2a;
	background: rgba(255,255,255,0.5);
}
#service .type .item li {
	margin: 0 auto 5px;
	line-height: 1.8;
}
#service .type .item p {
	margin: 0 auto;
	padding: 0 0 0 1em;
}
#service .type .item .title {
	font-size: 16px;
	text-indent: -1em;
}
#service .type .item span {
	color: #fff;
}

/*----------------
  #works
----------------*/
#works {
	color: #2e2c2a;
	background: url(../img/bg_yellow.png) repeat center top;
}
#works .cover {
	padding: 0 0 120px;
	background: url(../img/bg_img_works.png) no-repeat center center;
}
#works h1 {
	margin: 0 auto 120px;
	padding: 80px 0 0;
	text-align: center;
}
#works .hd {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}
#works table {
	margin: 0 auto 60px;
	width: 960px;
	line-height: 1.4;
	table-layout: fixed;
}
#works table tr td {
	padding: 5px;
	height: 46px;
	font-size: 15px;
	font-weight: bold;
	vertical-align: middle;
	border-top: solid 1px #000;
	color: #2e2c2a;
}
#works table tr td a {
	font-weight: bold;
}
#works table tr th {
	padding: 5px;
	width: 470px;
	color: #b53241;
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
}


#works table th:nth-child(1),
#works table td:nth-child(1) {
    width: 300px;
	text-align: center;
}

#works table th:nth-child(2),
#works table td:nth-child(2) {
    width: 300px;
	text-align: center;
}

#works table th:nth-child(3),
#works table td:nth-child(3) {
    width: 300px;
	text-align: center;
}

/*----------------
  #screening
----------------*/
#screening {
	text-align: center;
	background: url(../img/bg_red.png) repeat center top;
}
#screening .cover {
	padding: 0 0 180px;
	background: url(../img/bg_img_screening.png) no-repeat center top;
}
#screening h1 {
	margin: 0 auto 100px;
	padding: 100px 0 0;
	text-align: center;
}
#screening p {
	font-size: 14px;
}
#screening .small {
	font-size: 12px;
}
#screening .lead {
	margin-bottom:40px;
}
#screening .bold {
	font-weight:bold;
	margin: 0 auto 5px;
}
#screening .bg_red{
	font-size:12px;
	color: #fff;
	background:#b53241;
	font-weight:bold;
	padding: 5px;
	margin-right:5px;
}
#screening .attention {
	margin: 0 auto 60px;
	font-size: 14px;
}
#screening .hd {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin: 30px auto 0;
}
#screening .em {
	font-size: 18px;
	font-weight: bold;
	margin: 0 auto;
}
#screening .screening_info {
	padding: 0 0 40px;
}
#screening .tickets_info {
	margin: 26px auto;
	padding: 25px 170px;
	border: solid 1px #fff;
	display: inline-block;
}
#screening .tickets_info .title{
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin: 0 auto ;
}
#screening .tickets_info ul{
	text-align:left;
}
#screening .screening_schedule{
	width: 835px;
	margin: 0 auto 30px;
	text-align:left;
}
#screening .screening_schedule .date_title{
	position:relative;
	cursor: pointer;
}
#screening .screening_schedule .date_title.detail_none{
	cursor: auto;
}
#screening .screening_schedule .date_title dt{
	width: 145px;
}
#screening .screening_schedule .date_title:after{
	position:absolute;
	top: 45%;
	right: 2%;
	width:0;
	height:0;
	content:"";
	border:8px solid transparent;
	border-top-color: #fff;
}
#screening .screening_schedule .date_title.detail_none:after{
    display: none;
}
#screening .screening_schedule .detail{
	display: none;

	color: #2e2c2b;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 15px 25px 40px;
}
#screening .screening_schedule dl{
	font-size: 18px;
	display:block;
	background: #2e2c2a;
	margin: 10px auto 0;
	padding: 7px 0 7px 20px;
}
#screening .screening_schedule ul:after{
    width: 10px;
    height: 0;
    border: 10px solid transparent;
    border-top: 10px solid #f00;
}
#screening .screening_schedule dl dt{
	display: inline-block;
	font-weight:bold;
}
#screening .screening_schedule dl dd{
	display: inline-block;
	font-weight:bold;
}
#screening .screening_schedule em {
	font-size: 16px;
	font-weight: bold;
}
#screening .story{
	width: 745px;
	margin: 20px 0;
	background: #e8e8e8;
	padding: 20px;
	color: #333;
}


/*----------------
  #company
----------------*/
#company {
	text-align: center;
	background: url(../img/bg_orange.png) repeat center top;
}
#company .cover {
	padding: 0 0 190px;
	background: url(../img/bg_img_company.png) no-repeat center bottom;
}
#company h1 {
	margin: 0 auto 120px;
	padding: 80px 0 0;
	text-align: center;
}
#company dl {
	margin: 0 auto;
	width: 580px;
	font-size: 18px;
}
#company dl dt {
	padding: 8px 0;
	width: 90px;
	text-align: left;
	vertical-align: top;
	display: inline-block;
}
#company dl dd {
	padding: 8px 0;
	width: 490px;
	text-align: left;
	vertical-align: top;
	display: inline-block;
}

/*----------------
  #access
----------------*/
#access {
	color: #2e2c2a;
	background: url(../img/bg_yellow.png) repeat center top;
}
#access .cover {
	padding: 0 0 80px;
}
#access h1 {
	margin: 0 auto 80px;
	padding: 80px 0 0;
	text-align: center;
}
#access #maps {
	margin: 0 auto 20px;
	width: 1000px;
}
#access .caption {
	text-align: center;
}
#access .caption dl {
	margin: 0 40px;
	display: inline-block;
	text-align: left;
	vertical-align: top;
}
#access .caption dl dt {
	padding: 0 20px;
	display: inline-block;
	vertical-align: top;
}
#access .caption dl dd {
	display: inline-block;
	vertical-align: top;
}

/*----------------
  #recruit
----------------*/
#recruit {
	text-align: center;
	background: url(../img/bg_red.png) repeat center top;
}
#recruit .cover {
    padding: 0 0 80px;/*募集アリの場アリ*/
	/*padding: 0 0 350px;募集ナシの場合*/
	background: url(../img/bg_img_recruit.png) no-repeat center top 340px;
}
#recruit .open {
	padding: 0 0 120px;
}
#recruit h1 {
	margin: 0 auto 100px;
	padding: 80px 0 0;
	text-align: center;
}
#recruit h2 {
	margin: 0 auto 20px;
	font-weight: bold;
}
#recruit ul {
	margin: 0 auto;
	width: 800px;
}
#recruit ul li {
	margin: 0 auto 10px
}
#recruit ul li .job {
	margin: 5px;
	padding: 6px;
	font-size: 18px;
	background: #8c1e1e;
	/*cursor: pointer;*/
}
/*#recruit ul li .job:hover {
	background: #af0000;
}*/

/*
#recruit ul li .guideline {
	display: none;
}
*/
#recruit ul li table {
	border-collapse: separate;
	border-spacing: 5px;
}
#recruit ul li table th {
	margin: 5px;
	padding: 6px 14px;
	width: 100px;
	font-size: 12px;
	background: rgba(140, 30, 30, 0.6);
	text-align: left;
	vertical-align: top;
}
#recruit ul li table td {
	padding: 6px 14px;
	width: 700px;
	font-size: 12px;
	background: rgba(140, 30, 30, 0.4);
	text-align: left;
	vertical-align: top;
}
#recruit .none {
	margin: 160px auto;
	padding: 20px 170px;
	border: solid 1px #fff;
	display: inline-block;
}

/*----------------
  #contact
----------------*/
#contact {
	text-align: center;
	font-size: 16px;
	background: url(../img/bg_orange.png) repeat center top;
}
#contact .cover {
	padding: 0 0 520px;
	background: url(../img/bg_img_contact.png) no-repeat center bottom 50px;
}
#contact h1 {
	margin: 0 auto 120px;
	padding: 80px 0 0;
	text-align: center;
}
#contact .success {
	margin: 0 auto 30px;
	padding: 10px 0;
	width: 400px;
	border: solid 1px #fff;
	display: none;
}
#contact .fail {
	margin: 0 auto 30px;
	padding: 10px 0;
	width: 400px;
	border: solid 1px #fff;
	background: rgba(195, 14, 34, 0.4);
	display: none;
}
#contact dl {
	margin: 0 auto 40px;
	width: 730px;
	text-align: left;
}
#contact dl dt {
	margin: 0 auto 30px;
	width: 200px;
	vertical-align: middle;
	display: inline-block;
}
#contact dl dd {
	margin: 0 auto 30px;
	width: 530px;
	font-size: 0;
	vertical-align: middle;
	display: inline-block;
}
#contact dl dd textarea {
	margin: 0;
	padding: 8px 6px;
	width: 97%;
	font-size: 14px;
	line-height: 1.6;
}
#contact dl dd input {
	padding: 10px 6px;
	width: 97%;
	font-size: 14px;
}
#contact .error {
	display: none;
	margin: 5px 0;
	color: #c30e22;
	font-size: 14px;
}
#contact .txtErr {
	display: none;
	margin: 5px 0;
	color: #c30e22;
	font-size: 14px;
}
#contact .textBox {
	display: none;
}
#contact p.textBox {
	margin: 0 auto;
	padding: 10px 10px;
	color: #2e2c2a;
	font-size: 14px;
	line-height: 1.6;
	background: #fff;
}
.btn button#contact_submit {
	background: #b53241;
}
.btn button#contact_submit:hover {
	background: #a20e1f;
}
#contact .attention {
	margin: 0 auto 60px;
}

#contact dl {
	font-size: 0;
}

#contact dl dt,
#contact dl dd {
	display: inline-block;
	vertical-align: top; /* middle → top に変更 */
	
	padding: 0;
	font-size: 16px;
}

#contact .hidden-fields-container {
	display: none;
}

#contact .wpcf7-not-valid-tip {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	color: #c30e22;
	text-align: left;
}

#contact .wpcf7-response-output {
	display: none;
}

#contact .screen-reader-response {
    display: none ;
}

.hidden-area {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.btn a {
    display: inline-block;
    margin: 0 10px;
    width: 305px;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    background: #3c427b;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn a:hover {
    background: #2a2e5a; /* ホバー色の例 */
}

.inputBox button,
.inputBox input[type="submit"],
.inputBox #submitBtn input {
    display: inline-block;
    width: 200px;
    padding: 10px 0;
    margin: 5px;
    font-size: 16px;
    text-align: center;
    background: #3c427b;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
}

.inputBox button:hover,
.inputBox input[type="submit"]:hover,
.inputBox #submitBtn input:hover {
    background: #2a2e5a;
}

#confirmArea dl {
    margin: 0 auto 40px;
    width: 730px;
    text-align: left;
    font-size: 0;
}

#confirmArea dl dt,
#confirmArea dl dd {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    font-size: 16px;
}

#confirmArea dl dd {
    width: 530px; /* 右側の幅指定 */
    border: 1px solid #fff; /* 枠をつける */
    padding: 8px; /* 内側の余白 */
    box-sizing: border-box;
}

/* 確認画面の送信ボタン */
#submitBtn input[type="submit"] {
    background: #b53241;  /* 赤色 */
    color: #fff;
    font-size: 16px;
    padding: 10px 0;
    width: 200px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#submitBtn input[type="submit"]:hover {
    background: #a20e1f; /* ホバー時の濃い赤 */
}

/* 確認画面のボタンを横並びで中央に揃える */
#confirmArea + .inputBox {
    display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    gap: 10px;               /* ボタン間の隙間 */
    flex-wrap: wrap;         /* 横幅足りない場合は折り返す */
}

/* ボタンの共通スタイル */
#confirmArea + .inputBox button,
#confirmArea + .inputBox input[type="submit"] {
    width: 200px;           /* ボタン幅 */
    padding: 10px 0;        /* 上下余白 */
    display: inline-block;
    margin: 0;              /* 不要なmarginをリセット */
    vertical-align: middle; /* 上下中央に揃える */
}

/* SP（上書き） */
@media (max-width: 768px) {
	.title img {
		display: none;
	}

	.sp-title img{
		display: inline-block;
		max-width: 100%;
		height: auto;
		vertical-align: top;
	}

	#top {
		padding: 0;
	}

	#top .btn {
		display: none;
	}
/*----------------
  #message
----------------*/
#message .inner {
	margin: 0 20px;
}

#message .cover {
    padding: 0 0 100px;
}

#message h1 {
	margin: 0;
	padding: 40px 0;
}

#message .cover {
    padding: 0 0 24%;
    background: url(../img/bg_img_message.png) no-repeat center bottom 6%;
    background-size: 95%;
}

#message .ceo {
	max-width: 230px;
	margin: 60px auto 0;
	font-size: 18px;
}
	
/*----------------
  #service
----------------*/

#service .inner {
	margin: 0 15px;
}

#service h1 {
	margin: 0 auto 8%;
	padding: 20px 0 0;
	text-align: center;
}

#service .type {
    text-align: left;
  }

  #service .type > li {
    display: flex;         /* ←上書き */
    flex-wrap: wrap;
    width: 100%;           /* ←これ超重要 */
    max-width: none;       /* ←固定幅解除 */
    margin: 0 0 20px;      /* ←中央寄せやめる */
  }

  #service .type .hd {
    order: 1;
    width: 100%;
  }

  #service .type .hd {
	margin: 0 auto 10px;

	font-size: 11px;
	font-weight: bold;
	background: #2e2c2a;
}


  #service .type .icon {
    order: 2;
    width: 30%;
    box-sizing: border-box;
  }

  #service .type .item {
    order: 3;
    width: 70%;
  }

   /* 高さ固定を解除 */
  #service .type .item {
    height: auto;
	background: none;
  }

  /* 念のため */
  #service .type .item li {
    display: block;
  }

   #service .type > li {
    display: flex;
    flex-wrap: wrap;
  }



  #service .type .item {
    width: 70%;
  }

  #service .type .icon img {
    max-width: 70%;
    height: auto;
    margin: 12px;
  }



  #service .type .item {
    width: 70%;
    box-sizing: border-box; /* ←これが最重要 */
    padding: 10px;          /* ←ちょい減らすと安定 */
  }

  #service .cover {
	padding: 0 0 55%;
	background: url(../img/bg_img_service.png) no-repeat center bottom 20px;
	background-size: 36%;
}

/*----------------
  #works
----------------*/

#works table th:nth-child(1),
#works table td:nth-child(1) {
    width: auto;
}

#works .cover {
	padding: 0 0 60%;
	background: url(../img/bg_img_works.png) no-repeat center bottom 1%;
	background-size: 79%;
}

#works h1 {
	margin: 0 auto 8%;
	padding: 20px 0 0;
}

#works .hd {
	margin: 0 auto;
	font-size: 20px;
}

#works .inner {
	margin: 0 15px;
}

#works table {
	margin: 0 auto 20px;
	width: 100%;
	line-height: 1.4;
}

#works table tr td {
	margin: 8px 0 0;
	padding: 8px 0 1px;
	width: 100%;
	border-top: solid 1px #000;
	font-size: 10px;
	height: auto;
}
	

#works table tr td+td {
	margin: 0;
	padding: 8px 0 1px;
	border-top: none;
}
#works table tr td a {
	font-weight: bold;
}

#works table tr th {
	padding: 0 5px 0 0;
	color: #b53241;
	vertical-align: middle;
	display: inline-block;
}

#works table tr:first-child th {
    display: table-cell;
  }



  /* 見出し行を消す */
  .works-list {
    display: none;
  }
  


  /* tdを縦並び */
  .works-data td {
    display: flex; 
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
    width: 100%;
    padding: 5px 0;
    font-size: 12px;
	color: #2e2c2a;
  }

  /* ラベルを付ける */
  .works-data td:nth-child(1)::before {
    content: "作品";
    display: block;
    font-weight: bold;
    color: #b53241;
	padding: 0 20px;
  }

  .works-data td:nth-child(2)::before {
    content: "配給";
    display: block;
    font-weight: bold;
    color: #b53241;
	padding: 0 20px;
  }

  .works-data td:nth-child(3)::before {
    content: "公開";
    display: block;
    font-weight: bold;
    color: #b53241;
	padding: 0 20px;
  }

  .works-data td::before {
  flex: 0 0 30px;  /* ←幅固定（これが本命） */
}


/*----------------
  #screening
----------------*/
#screening {
	text-align: center;
	background: url(../img/bg_red.png) repeat center top;
	background-size: 50%;
}
#screening .cover {
	padding: 0 0 14%;
	background: url(../img/bg_img_screening.png) no-repeat center top;
	background-size: 300%;
}
#screening .inner {
	margin: 0 15px;
}
#screening h1 {
	margin: 0 auto 8%;
	padding: 40px 0 0;
	text-align: center;
}
#screening p {
	font-size: 12px;
	line-height: 1.6;
}
#screening .small {
	font-size: 10px;
}
#screening li {
	font-size: 12px;
}
#screening .attention {
	margin: 0 auto 40px;
}
#screening .lead {
	margin-bottom: 8%;
}
#screening .bold {
	font-size: 12px;
	font-weight:bold;
	margin: 0 auto 5px;
}
#screening .bg_red{
	font-size: 12px;
	color: #fff;
	background: #b53241;
	font-weight:bold;
	padding: 5px;
	margin-right:5px;
}
#screening .attention {
	margin: 0 auto 60px;
	font-size: 14px;
}
#screening .hd {
	margin: 0 auto;
	font-size: 20px;
}
#screening .em {
	font-size: 14px;
	font-weight: bold;
	margin: 5px auto;
}
#screening .screening_info {
	padding: 0 0 5%;
}
#screening .tickets_info {
	margin: 5% auto 10%;
	padding: 5% 3%;
	width: 95%;
	border: solid 1px #fff;
	display: inline-block;
}
#screening .tickets_info li{
	text-align: center;
	font-size: 12px;
	line-height: 1.6;
}
#screening .tickets_info .title{
    margin: 0 auto;
    font-size: 20px;
}
#screening .tickets_info ul{
	text-align:left;
}

.screening_schedule{
	max-width: 100%;
}

.date_title {
	font-size: 12px;
}

.date_title dt {
	font-size: 14px;
}
.date_title dd {
	font-size: 14px;

}
.detail {
	font-size: 12px;
}

#screening .screening_schedule .date_title dt{
	max-width: 90px;
}
#screening .screening_schedule dl{
	margin: 10px auto 0;
	padding: 5 20px;
}

#screening .story{
	width: 250px;
}

/*----------------
  #company
----------------*/
#company {
	text-align: center;
	background: url(../img/bg_orange.png) repeat center top;
	background-size: 50%;
}
#company .cover {
	padding: 0 0 40%;
	background: url(../img/bg_img_company.png) no-repeat center bottom;
	background-size: 188%;
}
#company .inner {
	margin: 0 15px;
}

#company .inner img{
	padding: 0 ;
}

#company h1 {
	margin: 0 30px;
	padding: 20px 0;
	text-align: center;
}

#company dl {
	width: 100%;
	font-size: 14px;
	text-align: left;
}

#company dl dt {
	width: auto;
	width: 60px;
    font-weight: bold;
	padding: 10px;
}


#company dl dd {
	padding: 10px;
	border-bottom: 1px solid #000;
	margin-bottom: 10px;
}

#company dl dt,
#company dl dd {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

/*----------------
  #access
----------------*/
#access {
	color: #2e2c2a;
	background: url(../img/bg_yellow.png) repeat center top;
	background-size: 50%;
}
#access .cover {
	padding: 0 0 5%;
}
#access .inner {
	margin: 0 15px;
}
#access h1 {
	margin: 0 auto 8%;
	padding: 20px 0 0;
	text-align: center;
}
#access #maps {
	margin: 0 auto 10px;
	width: 100%;
}
#access #maps iframe {
	max-width: 100%;
}
#access .caption {
	text-align: center;
}
#access .caption dl {
	margin: 0 auto 10px;
	text-align: left;
}

#access .caption dl dt {
	font-weight: bold;
	padding:  10px 20px;
}

#access .caption dl dd {
	padding:  0 20px;
}

/*----------------
  #recruit
----------------*/
#recruit {
	text-align: center;
	background: url(../img/bg_red.png) repeat center top;
	background-size: 50%;
}
#recruit .cover {
	background: url(../img/bg_img_recruit.png) no-repeat center top 200px;
	background-size: 65%;
	padding: 0 0 30px;
}

#recruit .inner {
	margin:  0 15px;
}
#recruit .list {
	max-width: 100%;
}

#recruit .none {
	padding: 20px;
	margin: 20px　100px;
}

#recruit h1 {
	padding: 30px 0 0;
	margin: 0 auto 30px;
}

/*----------------
  #contact
----------------*/
#contact {
	text-align: center;
	background: url(../img/bg_orange.png) repeat center top;
	background-size: 50%;
}
#contact .cover {
	padding: 0 0 80%;
	background: url(../img/bg_img_contact.png) no-repeat center bottom 6%;
	background-size: 51%;
}
 #contact .inner {
    margin: 0 15px;
  }

  #contact dl {
    width: 100%;
  }

  #contact dl dt,
  #contact dl dd {
    display: block;
    width: 100%;
  }

  #contact dl dt {
    margin-bottom: 5px;
    font-weight: bold;
  }

  #contact dl dd {
    margin-bottom: 15px;
  }

  #contact input,
  #contact textarea {
    width: 100%;
    box-sizing: border-box;
  }

  #contact h1 {
	margin: 0;
	padding: 30px;
  }

}

.grecaptcha-badge {
    visibility: hidden;
}