@charset "UTF-8";


#footer-content{ margin-top: 0; }
#main-content::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 161px; background-color: #000000; }
#main-content .intro{ overflow: hidden; padding: 161px 0 70px; background-color: rgb(35,24,21); }
#main-content .intro .photo-body{ position: relative; }
#main-content .intro .photo-body .caption{ position: absolute; right: 0; bottom: 0; margin-bottom: 10%; padding: 2px 7px; color: #ffffff; z-index: 10; }
#main-content .intro .photo{ position: relative; }
#main-content .intro .photo::before{ content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 25%; background: linear-gradient(to bottom, rgba(35,24,21,0) 0%, rgba(35,24,21,1) 50%); }
#main-content .intro .photo img{ width: 100%; height: auto; }
#main-content .intro .txt-body{ margin-top: 0; position: relative; margin-top: -10%; }
#main-content .intro .txt-body .copy{ text-align: center; margin: 0 auto; width: 65%; }
#main-content .intro .txt-body .copy img{ width: 100%; height: auto; }
#main-content .intro .txt-body .txt{ font-size: 18px; line-height: 3.33; color: #ffffff; text-align: center; margin-top: 70px; }
#main-content .intro .movie{ max-width: 1112px; margin: 70px auto 0; padding: 0 5%; }
#main-content .intro .movie a{ display: block; position: relative; }
#main-content .intro .movie a img{ width: 100%; height: auto; }
#main-content .intro .movie a .btn{ max-width: 80px; width: 14.491%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#main-content .section01{ background: url(../images/img_concept/bg01.jpg) center bottom no-repeat; background-size: cover; padding: 80px 5%; position: relative; }
#main-content .section01::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 200px; background: linear-gradient(to bottom, rgba(35,24,21,1) 0%, rgba(35,24,21,0) 100%); margin-top: -1px; }
#main-content .section01 .movie{ max-width: 1112px; margin: 50px auto 0; position: relative; background-color: #ffffff; }
#main-content .section01 .movie a{ display: block; position: relative; }
#main-content .section01 .movie a::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #ffffff; box-sizing: border-box; }
#main-content .section01 .movie a img{ width: 100%; height: auto; }
#main-content .section01 .movie a .btn{ max-width: 80px; width: 14.491%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#main-content .section01 .note{ max-width: 920px; margin: 0 auto; background: url(../images/img_concept/bg02.jpg) center right no-repeat #ffffff; background-size: auto 100%; border: 1px solid #cccccc; position: relative; padding: 20px 6% 20px 20px; box-sizing: border-box; min-height: 206px; }
#main-content .section01 .note .photo-body{ position: absolute; left: 20px; top: 20px; }
#main-content .section01 .note .txt-body{ margin-left: 184px; }
#main-content .section01 .note .txt-body *{ line-height: 1.5; }
#main-content .section01 .note .txt-body .name .ja{ font-size: 26px; display: inline-block; padding-right: 0.2em; }
#main-content .section01 .note .txt-body .name .en{ font-family: 'YakuHanMP', 'EB Garamond', 'Cormorant Garamond', 'Lora', 'Noto Serif JP', serif; display: inline-block; }
#main-content .section01 .note .txt{ margin: 10px 0 0 184px; line-height: 1.5; }




/*--レスポンシブ追加プロパティ--------------------------------------*/
@media screen and (max-width: 1112px){ /*1112px以下のcss*/
}
@media screen and (max-width: 768px){ /*768px以下のcss*/
	#main-content::before{ display: none; }
	#main-content .intro{ padding: 0 0 10%; }
	#main-content .intro .photo{ width: auto; margin: 0 -8.214%; }
	#main-content .intro .photo::before{ background: linear-gradient(to bottom, rgba(35,24,21,0) 0%, rgba(35,24,21,1) 60%); height: 50%; }
	#main-content .intro .txt-body{ margin-top: -5%; }
	#main-content .intro .txt-body .copy{ width: 82%; }
	#main-content .intro .txt-body .txt{ font-size: 14px; line-height: 2.57; margin-top: 10%; }
	#main-content .intro .movie{ margin-top: 10%; }
	#main-content .section01{ padding: 10% 5%; }
	#main-content .section01::before{ height: 0; padding-top: 20%; }
	#main-content .section01 .movie{ margin-top: 5%; }
	#main-content .section01 .note{ min-height: 0; background-size: 47px auto; padding: 5% 52px 5% 5%; }
	#main-content .section01 .note .head{ display: flex; display: -ms-flex; align-items: center; }
	#main-content .section01 .note .photo-body{ position: relative; left: auto; top: auto; max-width: 164px; width: 50%; }
	#main-content .section01 .note .txt-body{ margin-left: 3%; }
	#main-content .section01 .note .txt-body *{ line-height: 1.5; }
	#main-content .section01 .note .txt-body .name .ja{ display: block; padding-right: 0; }
	#main-content .section01 .note .txt-body .name .en{ display: block; }
	#main-content .section01 .note .txt{ margin: 3% auto 0; }
}
@media screen and (max-width: 480px){ /*480px以下のcss*/
	#main-content .section01 .note .txt-body .name .ja{ font-size: 20px; }
}