@charset "UTF-8";

/* reset */

.dit html, .dit body, .dit div, .dit span, .dit object, .dit iframe,
.dit h1, .dit h2, .dit h3, .dit h4, .dit h5, .dit h6, .dit p, .dit blockquote, .dit pre,
.dit abbr, .dit address, .dit img, .dit small, .dit strong, .dit sub, .dit sup, .dit var,
.dit b, .dit i,
.dit dl, .dit dt, .dit dd, .dit ol, .dit ul, .dit li,
.dit table, .dit caption, .dit tbody, .dit tfoot, .dit thead, .dit tr, .dit th, .dit td,
.dit article, .dit aside, .dit canvas, .dit details, .dit figcaption, .dit figure,
.dit nav, .dit section, .dit summary,
.dit time, .dit mark, .dit audio, .dit video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
}

.dit article,.dit aside,.dit details,.dit figcaption,.dit figure,
.dit footer,.dit header,.dit hgroup,.dit menu,.dit nav,.dit section {
    display:block;
}

.dit nav ul {
    list-style:none;
}

.dit blockquote, .dit q {
    quotes:none;
}

.dit blockquote:before, .dit blockquote:after,
.dit q:before, .dit q:after {
    content:'';
    content:none;
}

.dit a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


/* resetここまで */



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

共通設定 

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


.dit {
	font-family: 'Noto Sans JP', 'Montserrat', "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	color: #363636;
	box-sizing: border-box;
	border-bottom: #363636 1px solid;
}

.dit p {
	text-align: center;
}

.dit .wrapper_title {
	width: 980px;
	margin: 0 auto;
}

.dit .wrapper {
	width: 950px;
	margin: 0 auto;
}

.dit h2 {
	font-size: 40px;
	font-weight: 500;
	color: #fff;
	text-align: center;
}

.dit h3 {
	font-size: 30px;
	font-weight: 400;
	text-align: center;
	padding: 40px 0;
}

.dit h4 {
	font-size: 26px;
	font-weight: 900;
	line-height: 60px;
	background-color: #B60081;
	width: 980px;
	height: 60px;
	color: #fff;
	border-radius: 30px;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 20px;
}

.dit p.title {
	font-size: 18px;
	font-weight: 900;
}

.dit p.second {
	font-size: 14px;
	font-weight: 400;
	text-align: justify;
}

.dit a:hover {
  opacity: 0.5;
  transition-duration: 0.3s;
}

.dit img {
	width: 100%;
}

.dit_button {
	height: 60px;
}

.dit_button a {
	text-decoration: none !important;
	color: #fff !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 60px;
	display: block;
	background: #B60081 url(../img/arrow.png) no-repeat 95% center / 20px;
	width: 500px;
	border-radius: 10px;
	margin: 0 auto;
	text-align: center;
}

.dit_flow .dit_header,
.dit_works .dit_header,
.dit_detail .dit_header {
	position: relative;
}

.dit_flow .dit_header h2,
.dit_works .dit_header h2,
.dit_detail .dit_header h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}


@media screen and (min-width: 768px) { 
  .sp_only {
      display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .pc_only {
    display: none !important;
  }

	.dit .wrapper {
		width: 80vw;
	}

	.dit .wrapper_title {
		width: 90vw;
	}

	.dit_flow .dit_header h2,
.dit_works .dit_header h2,
.dit_detail .dit_header h2 {
	font-size: 30px;
	font-weight: 500;
	white-space: nowrap
}

	.dit h4 {
		font-size: 18px;
		line-height: 50px;
		width: 100%;
		height: 50px;
	}

	.dit p {
		text-align: left;
    width: 100%;
    margin: 0 auto;
	}

	.dit p.title {
		text-align: center;
	}

	.dit_button a {
		width: 90%;
	}
	


}

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

nav 

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

#g-nav {
	top: 0px;
}

.dit .dit_nav {
	background-color: #363636;
	padding: 7px 0;
	border-bottom: #fff 1px solid;
	z-index: 10000;
}

.dit .dit_nav ul {
	display: flex;
	justify-content: flex-end;
	text-align: right;
	align-items: center;
}

.dit .dit_nav ul li {
	list-style: none;
	border-right: #fff solid 1px;
	padding: 10px 30px;
	font-size: 14px;
	font-weight: 700;
}

.dit .dit_nav ul li:last-child {
	border-right: none;
	padding-right: 0;
}

.dit .dit_nav ul li a {
	color: #fff;
	display: block;
	text-decoration: none;
}

.dit_nav.sticky{
  position: fixed;
  top: 0;
	width: 99%;
}

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

	.dit .dit_nav ul {
		display: block;
		text-align: left;
		padding: 0 0 30px;
	}

	.dit .dit_nav ul li {
		border-right: none;
		padding: 20px 30px;
		font-size: 14px;
		font-weight: 500;
	}

	.dit .dit_nav ul li a {
		border-bottom: #fff solid 1px;
	}

	.dit .dit_nav ul.dit_nav_inner {
		padding: 0px;
	}

	.dit .dit_nav .dit_nav_inner li  {
		padding: 20px 0px 20px 30px;
	}

	.dit .dit_nav .dit_nav_inner li:first-child {
    padding: 35px 0px 20px 30px;
	}
	
	.dit .dit_nav .dit_nav_inner li:last-child {
		padding: 20px 0px 10px 30px;
	}
	

	.dit .dit_nav .dit_nav_inner li a{
		color: #fff;
		text-decoration: none;
		border-bottom: #fff solid 1px;
	}

	#g-nav{
		/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
		position:fixed;
		z-index: 99;
		/*ナビのスタート位置と形状*/
		top:-120%;
		left:0;
		width:100%;
		height: auto;
		/*動き*/
		transition: all 0.4s;
	}
	
	/*アクティブクラスがついたら位置を0に*/
	#g-nav.panelactive{
		top: 0px;
	}
	

	/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:fixed;
  z-index: 99999;/*ボタンを最前面に*/
  top: 70px;
  right: 0px;
  cursor: pointer;
  width: 60px;
  height:60px;
	border-radius: 50% 0 0 50%;
  background-color: #B60081;
}
  
/*×に変化*/  
.openbtn1 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 17px;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
  width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
  top:20px; 
}

.openbtn1 span:nth-of-type(2) {
  top:30px;
}

.openbtn1 span:nth-of-type(3) {
  top:40px;
}

.openbtn1.active span:nth-of-type(1) {
  top: 24px;
  left: 19px;
  transform: translateY(6px) rotate(-45deg);
  width: 40%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
  top: 36px;
  left:  18px;
  transform: translateY(-6px) rotate(45deg);
  width: 40%;
}

}

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

mainvisual

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

.dit .mainvisual {
	background: #000 url(../img/dit_top_title.jpg) no-repeat top/100%;
}

.dit .mainvisual h1 img {
	display: block;
	padding-top: 255px;
}

.dit .mainvisual p {
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	padding: 40px 0 80px;
	line-height: 2.2;
}

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

	.dit .mainvisual {
		background: #000 url(../img/dit_top_title_sp.jpg) no-repeat top/100%;
	}

	.dit .mainvisual h1 img {
		display: block;
		padding-top: 180px;
	}
	
	.dit .mainvisual p {
		color: #fff;
		font-size: 18px;
		font-weight: 400;
    padding: 40px 0px;
		line-height: 2;
		text-align: justify;
	}
	

}


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

service

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

.dit .dit_service {
	background-color: #f2f2f2;
	padding-bottom: 60px;
}

.dit .dit_service .dit_3type ul {
	display: flex;
	justify-content: space-between;
	padding: 30px 0 40px;
}

.dit .dit_service .dit_3type ul li {
	width: calc(100% / 3 - 20px);
	list-style: none;
	background-color: #fff;
	border-radius: 10px;
	padding: 30px;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.dit .dit_service .dit_3type ul li img {
	padding: 20px 0;
}

.dit .dit_service .dit_support ul {
	margin-bottom: 30px;
}

.dit .dit_service .dit_support ul li {
	list-style: none;
	background-color: #fff;
	border-radius: 10px;
	padding: 30px 60px;
	box-sizing: border-box;
	margin-top: 20px;
}

.dit .dit_service .dit_support ul li p {
	text-align: justify;
}

.dit .dit_service .dit_support ul li img {
	width: 400px;
}

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

@media screen and (max-width: 767px) {
	.dit .dit_service .dit_3type ul {
		display: block;
		padding: 30px 0 40px;
	}

	.dit .dit_service .dit_3type ul li {
		width: 100%;
		list-style: none;
	}

	.dit .dit_service .dit_support ul li img {
		width: 244px;
	}

	.dit .dit_service .dit_support ul li {
		padding: 30px 60px;
	}

	.dit .dit_service .dit_support ul li p {
		padding: 10px 0;
	}

	
.dit_support_left {
	display: block;
}

..dit_support_left p.second {
	padding: 6px 0;
}

}

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

reason

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

.dit .dit_reason {
	background-color: #fff;
	padding-bottom: 60px;
}

.dit .dit_reason ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 47px auto 60px;
}

.dit .dit_reason ul li {
	width: calc(100% /2 - 10px);
	background-color: #f2f2f2;
	border-radius: 10px;
	list-style: none;
	padding: 30px;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.dit .dit_reason ul li p.title {
	padding-bottom: 20px;
}

.dit_reason_inner {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.dit_reason_inner p.second {
	width: 200px;
}

.dit_reason_inner img {
	width: 182px;
}

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

	.dit .dit_reason ul {
		display: block;
	}

	.dit .dit_reason ul li {
		width: 100%;
	}
	

	.dit_reason_inner {
		flex-direction: column-reverse
	}

	.dit_reason_inner p.second {
		width: 90%;
	}

	.dit_reason_inner img {
		display: block;
		margin: 0 auto 20px;
	}
	
}

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

FAQ

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

.dit .dit_faq {
	background-color: #f2f2f2;
	padding-bottom: 60px;
}

.dit .dit_faq dl dt.ac-parent {
	position: relative;
	background-color: #fff;
	text-align: left;
	cursor: pointer;
	padding: 18px 80px 18px 55px;
	border-radius: 10px;
	margin-top: 20px;
	display: flex;
}

.dit .dit_faq dl dt.ac-parent.open {
	border-radius: 10px 10px 0 0;

}


.dit .dit_faq dl dt.ac-parent .ac-parent_head {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	padding-right: 24px;
	color: #666;
}

.dit .dit_faq dl dd.ac-child {
	position: relative;
	background-color: #fff;
	text-align: left;
	padding: 18px 80px 18px 55px;
	border-radius: 0 0 10px 10px;
	font-size: 14px;
	font-weight: 400;
}

.dit .dit_faq dl dd.ac-child .ac-child_flexbox {
	display: flex;
}

.dit .dit_faq dl dd.ac-child .ac-child_head {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	padding-right: 24px;
	color: #B60081;
}

.dit .dit_faq dl dd.ac-child {
  display: none;
}

/* プラスの横線 */
.ac-parent:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 40px;
	width: 20px;
	height: 2px;
	background: #B60081;
	transform: translateY(-50%);
}

/* プラスの縦線 */
.ac-parent:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 49px;
	width: 2px;
	height: 20px;
	background: #B60081;
	transform: translateY(-50%);
	transition: .3s;
}

/* openクラスを付与 */
.ac-parent.open:after {
	top: 25%;
	opacity: 0;
	transform: rotate(90deg);
}

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

	.dit .dit_faq dl dt.ac-parent,
	.dit .dit_faq dl dd.ac-child {
		padding: 18px 74px 18px 24px;
	}

}


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

contact

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

.dit .dit_contact {
	background-color: #fff;
	padding: 40px 0 60px;
	display: flex;
	justify-content: space-between;
}

.dit .dit_contact .dit_button a {
	width: 400px;
	text-decoration: none;
  color: #fff;
}

.dit .dit_contact p {
	padding-top: 10px;
}


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

	.dit .dit_contact {
		display: block;
	}

	.dit .dit_contact .dit_button a {
		width: 300px;
		margin-top: 30px;
	}

	.dit .dit_contact p {
		text-align: center;
		padding-top: 10px;
	}

}



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

開催までの流れページ

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

.dit_flow .dit_step {
	padding: 80px 0 60px;
}

.dit_flow .dit_step2,
.dit_flow .dit_step4 {
	background: #f2f2f2 url(../img/dit_flow_arrow_white.png) no-repeat top center / 9%;
}

.dit_flow .dit_step3 {
	background: #fff url(../img/dit_flow_arrow_gray.png) no-repeat top center / 9%;
}

.dit_flow .dit_step_flexbox {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
}

.dit_flow .dit_step_flexbox .dit_step_icon {
	width: 110px;
}

.dit_flow .dit_step_flexbox .dit_step_textbox {
	width: 536px;
}

.dit_flow .dit_step_flexbox .dit_step_textbox p {
	text-align: left;
}

.dit_flow .dit_step_flexbox .dit_step_textbox p.dit_step_title {
	font-size: 26px;
	font-weight: 400;
	padding-bottom: 20px;
}

.dit_flow .dit_step_flexbox .dit_step_textbox p.dit_step_text small {
	font-size: 12px;
}

.dit_flow .dit_step_flexbox .dit_step_illust {
	width: 244px;
}

.dit_flow .dit_step2_ask {
	background-color: #fff;
	border: #B60081 2px solid;
	border-radius: 10px;
	padding: 30px;
}

.dit_flow .dit_step2_ask ul {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.dit_flow .dit_step2_ask ul li {
	list-style: none;
	background-color: #B60081;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	width: 215px;
	height: 50px;
	border-radius: 25px;
	text-align: center;
	line-height: 50px;
}


@media screen and (max-width: 767px) {
	.dit_flow .dit_step_flexbox {
		display: block;
	}

	.dit_flow .dit_step2,
.dit_flow .dit_step4 {
	background-size : 30%;
}

.dit_flow .dit_step3 {
	background-size : 30%;
}


	.dit_flow .dit_step_flexbox {
		position: relative;
	}

	.dit_flow .dit_step_flexbox .dit_step_textbox {
		width: 100%;
		margin-top: 10px;
	}

	.dit_flow .dit_step_flexbox .dit_step_textbox p.dit_step_title {
		font-size: 20px;
	}

	.dit_flow .dit_step_flexbox .dit_step_illust {
		width: 175px;
		position: absolute;
		top: 0;
    right: 0;
	}
	
	.dit_flow .dit_step2_ask ul {
		display: block;
	}
	
	.dit_flow .dit_step2_ask ul li {
		font-size: 15px;
		width: 100%;
		margin-top: 10px;
	}
}


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

開催事例ページ

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

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

subnav

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

.dit_works .dit_works_subnav {
	background-color: #363636;
	padding: 7px 0;
	margin-bottom: 60px;
}

.dit_works .dit_works_subnav ul {
	display: flex;
	justify-content: center;
	text-align: center;
}

.dit_works .dit_works_subnav ul li {
	list-style: none;
	padding: 10px 70px;
	font-size: 14px;
	font-weight: 500;
}

.dit_works .dit_works_subnav ul li a {
	color: #fff;
	display: block;
	text-decoration: none;
	background: url(../img/arrow_under.png) no-repeat 100% center / 20px;
	padding-right: 46px;
}


@media screen and (max-width: 767px) {
	
	.dit_works .dit_works_subnav ul {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
	}
	
	.dit_works .dit_works_subnav ul li {
    width: 30%;
    padding: 5px 10px 30px;
		border-right: #fff 1px solid;
	}

	.dit_works .dit_works_subnav ul li:last-child {
		border-right: none;
	}
	
	.dit_works .dit_works_subnav ul li a {
		padding: 0;
    background: none;
		height: 60px;
		position: relative;
	}

	.dit_works .dit_works_subnav ul li a:nth-child(2+X) {
		line-height: 3.5;
	}

	.dit_works .dit_works_subnav ul li::after {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../img/arrow_under.png) no-repeat center / cover;
    position: absolute;
		margin: 0 10px 0 -10px;
	}

	.dit_works .dit_works_subnav ul li a.dit_works_subnav_02,
	.dit_works .dit_works_subnav ul li a.dit_works_subnav_03 {
		line-height: 3.5;
	}
}

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

section

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

.dit_works .works_dit iframe {
	margin: 40px auto;
	display: block;
}

.dit_works .content ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 70px;
}

.dit_works .content ul li {
	width: 256px;
	list-style: none;
	display: flex;
  flex-direction: column;
	margin-bottom: 70px;
	margin-left: 60px;
}

.dit_works .content ul li:nth-child(3n+1) {
	margin-left: 0px;
}

.dit_works .content .content_box_dit li.is-hidden,
.dit_works .content .content_box_okugai li.is-hidden,
.dit_works .content .content_box_okunai li.is-hidden {
	display: none;
}

.dit_works .content ul li a {
	text-decoration: none;
	color: #363636;
	display: block;
}

.dit_works .content ul li p.works_thumb_date {
	font-size: 12px;
	font-weight: 400;
	color: #666;
	margin-bottom: 10px;
}

.dit_works .content ul li p.works_thumb_title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 10px;
	display: inline;
	border-bottom: #363636 1px solid;
	text-align: left;
	flex-grow: 1;
}

.dit_works .content ul li p.works_thumb_info {
	font-size: 12px;
	font-weight: 400;
	margin: 10px 0;
	text-align: left;
}

.dit_works .more {
	cursor: pointer;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 60px;
	display: block;
	background: #B60081 url(../img/plus.png) no-repeat 95% center / 20px;
	width: 500px;
	border-radius: 10px;
	margin: 0 auto 60px;
	text-align: center;
}

.dit_works .more:hover {
	opacity: 0.5;
  transition-duration: 0.3s;
}

@media screen and (max-width: 767px) {
	.dit_works .more {
		width: 90%;
	}

	.dit_works .works_dit iframe {
		width: 90%;
	}
	
	.dit_works .content ul {
		margin-top: 30px;
	}

	.dit_works .content ul li {
		margin-bottom: 0;
		width: 100%;
		margin-left: 0;
		padding: 30px;
	}

}

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

上映事例詳細ページ

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

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

header

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

.dit_detail .dit_header {
	position: relative;
}

.dit_detail .dit_header h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

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

case title

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

.dit_detail .dit_case_contain {
	border-bottom: #666 2px solid;
	margin: 40px auto;
	text-align: center;
	padding-bottom: 60px;
}

.dit_detail .dit_case_contain .dit_casedate {
	font-size: 14px;
	font-weight: 400;
	color: #666;
	margin-bottom: 10px;
}

.dit_detail .dit_case_contain .dit_casetitle {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 10px;
	display: inline;
	border-bottom: #363636 1px solid;
}

.dit_detail .dit_case_contain .dit_casecaption {
	font-size: 14px;
	font-weight: 400;
	margin: 10px 0;
}

@media screen and (max-width: 767px) {
	
	.dit_detail .dit_case_contain .dit_casedate {
		font-size: 12px;
	}
	
	.dit_detail .dit_case_contain .dit_casetitle {
		font-size: 18px;
	}
	
	.dit_detail .dit_case_contain .dit_casecaption {
		font-size: 12px;
		color: #666;
	}

		
	.dit_detail .dit_case_contain .dit_casecaption {
		font-size: 14px;
	}
}


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

aside

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

.dit_detail aside img {
	max-width: 600px;
	display: block;
  margin: 40px auto;
}

.dit_detail p {
	font-weight: 400;
	text-align: justify;
	margin: 0 auto 60px;
	width: 600px;
}

@media screen and (max-width: 767px) {
	.dit_detail p {
		width: 100%;
	}
}

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

subnav

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

.dit_detail .dit_detail_subnav {
	background-color: #363636;
	padding: 7px 0;
	margin-top: 60px;
}

.dit_detail .dit_detail_subnav ul {
	display: flex;
	justify-content: center;
	text-align: center;
}

.dit_detail .dit_detail_subnav ul li {
	list-style: none;
	padding: 10px 70px;
	font-size: 14px;
	font-weight: 500;
}

.dit_detail .dit_detail_subnav ul li.dit_detail_subnav_back {
	border-left: #fff solid 1px;
	border-right: #fff solid 1px;
}

.dit_detail .dit_detail_subnav ul li.dit_detail_subnav_prev a {
	background: url(../img/arrow_back.png) no-repeat 0 center / 20px;
	padding-left: 90px;
}

.dit_detail .dit_detail_subnav ul li.dit_detail_subnav_next a {
	background: url(../img/arrow.png) no-repeat 100% center / 20px;
	padding-right: 90px;
}


.dit_detail .dit_detail_subnav ul li a {
	color: #fff;
	display: block;
	text-decoration: none;
}

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

	.dit_detail .dit_detail_subnav ul li {
		padding: 10px;
	}

	.dit_detail .dit_detail_subnav ul li.dit_detail_subnav_prev,
	.dit_detail .dit_detail_subnav ul li.dit_detail_subnav_next {
		width: 25%;
	}

	.dit_detail .dit_detail_subnav ul li.dit_detail_subnav_back {
		width: 50%;
	}

	.dit_detail .dit_detail_subnav ul li.dit_detail_subnav_prev a {
		padding-left: 25px;
	}
	
	.dit_detail .dit_detail_subnav ul li.dit_detail_subnav_next a {
		padding-right: 25px;
	}

}