@charset "UTF-8";


html,body { height: auto; }
#main-content{ overflow: hidden; }
#main-content .hero{ position: relative; }
#main-content .hero::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(55,47,29,0.5), rgba(55,47,29,0)); z-index: 5; }
#main-content .hero .ttl-body{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; z-index: 50; }
#main-content .hero .ttl-body > *{ color: #ffffff; }
#main-content .hero .ttl-body .en{ font-size: 28px; line-height: 1.2; font-weight: bold; letter-spacing: 0.4em; padding-left: 0.4em; }
#main-content .hero .ttl-body .ttl{ font-size: 16px; line-height: 1.5; font-weight: normal; margin-top: 10px; }
#main-content .hero .photo{ width: 1400px; height: auto; position: relative; left: 50%; transform: translate(-50%); }
#main-content .hero .photo img{ width: 100%; height: auto; }
#main-content .hero .caption{ position: absolute; right: 0; bottom: 0; padding: 2px 7px; color: #ffffff; z-index: 10; background-color: rgba(0,0,0,0.8); }
#main-content .section01{ margin: 0 auto; max-width: 1400px; position: relative; }
#main-content .section01 .copy{ font-size: 26px; line-height: 1.84; font-weight: normal; padding: 80px 0; text-align: center; color: #3d3d3d; }
#main-content .section01 .photo-list{ position: relative; }
#main-content .section01 .photo-list::before{ content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 78.57%; padding-top: 30%; background-color: #f4f2ef; margin-top: -5%; }
#main-content .section01 .photo{ position: relative; width: 78.57%; }
#main-content .section01 .photo02{ margin: 120px 0 0 auto; }
#main-content .section01 .photo img{ width: 100%; height: auto; }
#main-content .section01 .photo .caption{ position: absolute; right: 0; bottom: 0; padding: 2px 7px; color: #ffffff; z-index: 10; background-color: rgba(0,0,0,0.8); }
#main-content .section02{ margin: 0 auto; max-width: 1400px; position: relative; }
#main-content .section02 .copy{ font-size: 26px; line-height: 1.84; font-weight: normal; padding: 140px 0 90px; text-align: center; color: #3d3d3d; }
#main-content .section02 .photo{ position: relative; width: 100%; }
#main-content .section02 .photo img{ width: 100%; height: auto; }
#main-content .section02 .photo .caption{ position: absolute; right: 0; bottom: 0; padding: 2px 7px; color: #ffffff; z-index: 10; background-color: rgba(0,0,0,0.8); }
#main-content .section02 .note{ max-width: 1110px; margin: 70px auto 120px; background-color: #f4f2ef; padding: 50px; box-sizing: border-box; overflow: hidden; }
#main-content .section02 .note .note-header,
#main-content .section02 .note .note-footer{ width: 70.29%; float: left; }
#main-content .section02 .note .photo{ width: 23.76%; float: right; }
#main-content .section02 .note .note-header .ttl{ font-size: 20px; line-height: 1.5; color: #664a26; font-weight: normal; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #afafb0; }
#main-content .section02 .note .note-header .txt{ line-height: 2.28; }
#main-content .section02 .note .note-footer{ margin-top: 20px; background-color: #dfdad1; display: flex; display: -ms-flex; align-items: center; padding: 20px 0; }
#main-content .section02 .note .note-footer .name{ width: 180px; text-align: center; color: #434343; }
#main-content .section02 .note .note-footer .txt{ flex: 1; padding: 0 20px; font-size: 12px; line-height: 1.66; color: #434343; border-left: 1px solid #b9b9b9; }
#main-content .section03{ margin: 0 auto; position: relative; background-color: #372f1d; overflow: hidden; }
#main-content .section03 .copy{ font-size: 26px; line-height: 1.84; font-weight: normal; padding: 140px 0 90px; text-align: center; color: #ffffff; }
#main-content .section03 .box{ position: relative; }
#main-content .section03 .box02{ margin-top: -1px; }
#main-content .section03 .box::before{ content: ""; position: absolute; left: 0; width: 100%; height: 50%; background-color: #ffffff; }
#main-content .section03 .box01::before{ bottom: 0; }
#main-content .section03 .box .split-view{ margin: 0 auto; max-width: 1400px; position: relative; z-index: 5; display: flex; display: -ms-flex; align-items: center; }
#main-content .section03 .box .split-view .photo-body{ width: 75%; position: relative; overflow: hidden; }
#main-content .section03 .box .split-view .photo-body .photo{ width: 1050px; position: relative; left: 50%; margin-left: -525px; }
#main-content .section03 .box .split-view .photo-body .caption{ position: absolute; right: 0; bottom: 0; padding: 2px 7px; color: #ffffff; z-index: 10; background-color: rgba(0,0,0,0.8); }
#main-content .section03 .box .split-view .txt-body{ flex: 1; position: relative; z-index: 10; background-color: rgba(255,255,255,0.95); box-sizing: border-box; padding: 2.85%; }
#main-content .section03 .box .split-view .txt-body .inner-body{ max-width: 340px; }
#main-content .section03 .box .split-view .txt-body .ttl{ font-size: 30px; line-height: 1.73; color: #c3b878; letter-spacing: 0.4em; }
#main-content .section03 .box .split-view .txt-body .ja{ font-size: 18px; line-height: 1.5; color: #664a26; margin-top: 10px; }
#main-content .section03 .box .split-view .txt-body .txt{ line-height: 2.42; margin-top: 20px; }
#main-content .section03 .box01 .split-view{ flex-direction: row-reverse; }
#main-content .section03 .box01 .split-view .txt-body{ margin-right: -13%; }
#main-content .section03 .box01 .split-view .txt-body .inner-body{ margin-left: auto; }
#main-content .section03 .box02 .split-view .txt-body{ margin-left: -13%; }
#main-content .section03 .box02 .split-view .photo-body .caption{ right: auto; left: 0; }
#main-content .section03 .note{ max-width: 1110px; background-color: transparent; padding: 70px 50px 120px; box-sizing: border-box; overflow: hidden; margin: 0 auto; }
#main-content .section03 .note .note-header,
#main-content .section03 .note .note-footer{ width: 70.29%; float: left; }
#main-content .section03 .note .photo{ width: 23.76%; float: right; }
#main-content .section03 .note .note-header .ttl{ font-size: 20px; line-height: 1.5; color: #ffffff; font-weight: normal; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #afafb0; }
#main-content .section03 .note .note-header .txt{ line-height: 2.28; color: #ffffff; }
#main-content .section03 .note .note-footer{ margin-top: 20px; background-color: #4c4434; display: flex; display: -ms-flex; align-items: center; padding: 20px 0; }
#main-content .section03 .note .note-footer .name{ width: 180px; text-align: center; color: #ffffff; }
#main-content .section03 .note .note-footer .txt{ flex: 1; padding: 0 20px; font-size: 12px; line-height: 1.66; color: #ffffff; border-left: 1px solid #9a958c; }







/*--レスポンシブ追加プロパティ--------------------------------------*/
@media screen and (min-width: 1400px){ /*1400px以上のcss*/
	#main-content .hero .photo{ width: 100%; left: auto; transform: none; }
}
@media screen and (max-width: 1112px){ /*1112px以下のcss*/
}
@media screen and (max-width: 768px){ /*768px以下のcss*/
	#main-content .hero .photo{ width: 100%; left: auto; transform: none; }
	#main-content .hero .ttl-body .en{ letter-spacing: 0.2em; padding-left: 0.2em; }
	#main-content .section01 .copy{ font-size: 20px; padding: 10% 5%; }
	#main-content .section01 .photo02{ margin: 8.57% 0 0 auto; }
	#main-content .section02 .copy{ font-size: 20px; padding: 10% 5%; }
	#main-content .section02 .note{ margin: 7% 5%; padding: 7% 5%; box-sizing: border-box; }
	#main-content .section02 .note .note-header,
	#main-content .section02 .note .note-footer{ width: 100%; float: none; box-sizing: border-box; }
	#main-content .section02 .note .photo{ width: 100%; max-width: 240px; float: none; margin: 5% auto 0; }
	#main-content .section02 .note .note-header .ttl{ font-size: 20px; }
	#main-content .section02 .note .note-header .txt{ line-height: 2; }
	#main-content .section02 .note .note-footer{ margin-top: 5%; display: block; padding: 5%; }
	#main-content .section02 .note .note-footer .name{ width: 100%; text-align: left; }
	#main-content .section02 .note .note-footer .txt{ padding: 10px 0 0; border-top: 1px solid #b9b9b9; border-left: none; }
	#main-content .section03 .copy{ font-size: 20px; padding: 10% 5%; }
	#main-content .section03 .box{ position: relative; }
	#main-content .section03 .box02{ margin-top: 0; }
	#main-content .section03 .box::before{ display: none; }
	#main-content .section03 .box .split-view{ display: block; }
	#main-content .section03 .box .split-view .photo-body{ width: 100%; }
	#main-content .section03 .box .split-view .photo-body{ width: 100%; }
	#main-content .section03 .box .split-view .photo-body .photo{ width: 100%; left: 0; margin-left: 0; }
	#main-content .section03 .box .split-view .photo-body .photo img{ width: 100%; height: auto; }
	#main-content .section03 .box .split-view .txt-body{ padding: 7% 5%; margin: 0; }
	#main-content .section03 .box .split-view .txt-body .inner-body{ max-width: none; }
	#main-content .section03 .box .split-view .txt-body .ttl{ font-size: 22px; letter-spacing: 0.2em; }
	#main-content .section03 .box .split-view .txt-body .ja{ font-size: 16px; margin-top: 0; }
	#main-content .section03 .box .split-view .txt-body .txt{ line-height: 2.42; margin-top: 3%; }
	#main-content .section03 .note{ margin: 0; padding: 7% 5%; box-sizing: border-box; }
	#main-content .section03 .note .note-header,
	#main-content .section03 .note .note-footer{ width: 100%; float: none; box-sizing: border-box; }
	#main-content .section03 .note .photo{ width: 100%; max-width: 240px; float: none; margin: 5% auto 0; }
	#main-content .section03 .note .note-header .ttl{ font-size: 20px; }
	#main-content .section03 .note .note-header .txt{ line-height: 2; }
	#main-content .section03 .note .note-footer{ margin-top: 5%; display: block; padding: 5%; }
	#main-content .section03 .note .note-footer .name{ width: 100%; text-align: left; }
	#main-content .section03 .note .note-footer .txt{ padding: 10px 0 0; border-top: 1px solid #b9b9b9; border-left: none; }
}
@media screen and (max-width: 480px){ /*480px以下のcss*/
}




