@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{ background-color: #f4f2ef; text-align: center; padding: 120px 0 160px; }
#main-content .section01 .txt{ font-size: 18px; line-height: 2.22; color: #3d3d3d; margin-top: 70px; }
#main-content .section02{ padding: 130px 0 10vh; text-align: center; }
#main-content .section02 .copy{ font-size: 20px; line-height: 1.8; font-weight: normal; }
#main-content .section02 .txt{ font-size: 16px; line-height: 2.25; margin-top: 50px; }
#main-content .section02 .movie-area{ position: relative; margin-top: 60px; }
#main-content .section02 .movie-area .dummy-layer{ width: 100%; height: 1000vh; /*background-color: #d00;*/ }
#main-content .section02 .movie-area .fixed-layer{ position: absolute; top: 0; left: 0; width: 100%; height: calc(100vh - 146px); height: calc(calc(var(--vh, 1vh) * 100) - 146px); /*background-color: rgba(0,0,0,0.5);*/ }
#main-content .section02 .movie-area .fixed-layer.fixed{ position: fixed; margin-top: 146px; }
#main-content .section02 .movie-area .fixed-layer.end{ position: absolute; top: auto; bottom: 0; transform: none; }
#main-content .section02 .movie-area .fixed-layer video{ position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); object-fit: contain; }
#main-content .section02 .movie{ margin: 60px auto 0; max-width: 1100px; }
#main-content .section02 .movie .frame{ width: 100%; padding-top: 56.25%; position: relative; }
#main-content .section02 .movie .frame video{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
#main-content .section02 .photo-body{ width: 90%; max-width: 1112px; position: relative; overflow: hidden; margin: 60px auto 0; }
#main-content .section02 .photo-body .photo img{ max-width: 100%; height: auto; }
#main-content .section02 .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{ background-color: #f4f2ef; padding: 160px 0 0; }
#main-content .section03 .box{ max-width: 1400px; margin: 0 auto; }
#main-content .section03 .box02{ margin-top: 40px; }
#main-content .section03 .box03{ margin-top: 70px; }
#main-content .section03 .box .ttl{ font-size: 30px; line-height: 1.73; color: #c3b878; letter-spacing: 0.4em; }
#main-content .section03 .box .ja{ font-size: 18px; line-height: 1.5; color: #664a26; margin-top: 10px; }
#main-content .section03 .box .txt{ line-height: 2.42; margin-top: 20px; }
#main-content .section03 .box .split-view{ display: flex; display: -ms-flex; align-items: center; }
#main-content .section03 .box .split-view .photo-body{ width: 55%; position: relative; overflow: hidden; }
#main-content .section03 .box .split-view .photo-body .photo{ width: 770px; position: relative; left: 50%; margin-left: -385px; overflow: hidden; }
#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; background-color: #ffffff; box-sizing: border-box; padding: 50px 0; }
#main-content .section03 .box .split-view .txt-body .inner-body{ max-width: 377px; }
#main-content .section03 .box01 .split-view{ flex-direction: row-reverse; }
#main-content .section03 .box01 .split-view .txt-body{ margin-right: -5%; padding-right: 10%; }
#main-content .section03 .box01 .split-view .txt-body .inner-body{ margin-left: auto; }
#main-content .section03 .box02 .split-view .txt-body{ margin-left: -5%; padding-left: 10%; }
#main-content .section03 .box02 .split-view .photo-body .caption{ right: auto; left: 0; }
#main-content .section03 .box03{ background-color: #ffffff; }
#main-content .section03 .box03 .photo-body{ max-width: 1100px; margin: 0 auto; position: relative; }
#main-content .section03 .box03 .photo-body::before{ content: ""; position: absolute; left: 50%; top: -1px; width: 100vw; height: 50%; background-color: #f4f2ef; transform: translateX(-50%); }
#main-content .section03 .box03 .photo-body .photo{ position: relative; }
#main-content .section03 .box03 .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 .box03 .txt-split{ padding: 50px 0 130px; max-width: 940px; margin: 0 auto; display: flex; display: -ms-flex; align-items: center; }
#main-content .section03 .box03 .txt-split .txt{ flex: 1; padding-left: 50px; margin-left: 50px; border-left: 1px solid #d9d9d9; }
/*--レスポンシブ追加プロパティ--------------------------------------*/
@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{ padding: 10% 5%; }
#main-content .section01 .txt{ font-size: 16px; margin-top: 10%; }
#main-content .section02{ padding: 10% 0 10vh; }
#main-content .section02 .copy{ font-size: 18px; padding: 0 5%; }
#main-content .section02 .txt{ font-size: 14px; line-height: 2; margin-top: 7%; text-align: left; padding: 0 5%; }
#main-content .section02 .movie-area{ margin-top: 5%; }
#main-content .section02 .movie-area .fixed-layer{ height: calc(100vh - 112px); height: calc(calc(var(--vh, 1vh) * 100) - 112px); }
#main-content .section02 .movie-area .fixed-layer.fixed{ margin-top: 61px; }
#main-content .section02 .photo-body{ margin-top: 5%; }
#main-content .section03{ padding: 10% 5% 10%; }
#main-content .section03 .box02{ margin-top: 0; }
#main-content .section03 .box03{ margin-top: 0; }
#main-content .section03 .box .ttl{ font-size: 22px; letter-spacing: 0.2em; }
#main-content .section03 .box .ja{ font-size: 16px; margin-top: 0; }
#main-content .section03 .box .txt{ line-height: 2.42; margin-top: 3%; }
#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 .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 .photo-body .caption{ right: 0; left: auto; }
#main-content .section03 .box03{ background-color: transparent; }
#main-content .section03 .box03 .photo-body::before{ display: none; }
#main-content .section03 .box03 .txt-split{ padding: 7% 5%; max-width: none; margin: 0 auto; display: block; background-color: #ffffff; }
#main-content .section03 .box03 .txt-split .txt{ padding-left: 0; margin-left: 0; border-left: none; }
}
@media screen and (max-width: 480px){ /*480px以下のcss*/
}