@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: rgba(55,47,29,0.5); 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 .view-wrapper{ position: relative; background: url(../images/img_view/bg01.jpg) center center no-repeat; background-size: cover; padding: 65px 0 0; }
#main-content .view-wrapper .view{ max-width: 1400px; overflow: hidden; margin: 0 auto; position: relative; }
#main-content .view-wrapper .view .photo{ cursor:grab; user-select:none; touch-action:pan-y; will-change:transform; width: 187.5%; transition: transform .35s ease; }
#main-content .view-wrapper .view .photo.dragging{ cursor:grabbing; transition: none; }
#main-content .view-wrapper .view .photo img{ pointer-events: none; max-width: none; width: 100%; height: auto; }
#main-content .view-wrapper .view .btn{ position: absolute; top: 50%; width: 54px; padding-top: 54px; background: rgba(255,255,255,0.8); transform: translateY(-50%); z-index: 10; border-radius: 50%; transition: opacity 0.5s; cursor: pointer; }
#main-content .view-wrapper .view .prev-btn{ left: 10px; }
#main-content .view-wrapper .view .next-btn{ right: 10px; }
#main-content .view-wrapper .view .btn.hide{ opacity: 0; }
#main-content .view-wrapper .view .btn::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; box-sizing: border-box; border: solid rgba(0,0,0,0.5); }
#main-content .view-wrapper .view .next-btn::before{ border-width: 1px 1px 0 0; transform: translate(-75%,-50%) rotate(45deg); }
#main-content .view-wrapper .view .prev-btn::before{ border-width: 0 0 1px 1px; transform: translate(-25%,-50%) rotate(45deg); }
#main-content .view-wrapper .txt-body{ padding: 40px 0; text-align: center; }
#main-content .view-wrapper .txt-body .floor{ font-size: 40px; line-height: 1.2; color: #8c6c5b; letter-spacing: 0.2em; padding-left: 0.2em; }
#main-content .view-wrapper .txt-body .txt{ font-size: 14px; line-height: 1.5; margin-top: 10px; }








/*--レスポンシブ追加プロパティ--------------------------------------*/
@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 .view-wrapper .view .photo{ width: 400%; }
	#main-content .view-wrapper .txt-body .floor{ font-size: 32px; }
}
@media screen and (max-width: 480px){ /*480px以下のcss*/
}