@charset "utf-8";



#main .content .hero{ position: relative; }
#main .content .hero .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#main .content .hero .bg::before,
#main .content .hero .bg::after{ content: ""; position: absolute; z-index: 20; width: 34px; height: 100%; background: url(../../../assets/image/d01.png) center 0 repeat-y; background-size: 100% auto; top: 0; }
#main .content .hero .bg::before{ left: 0; margin-left: 2%; }
#main .content .hero .bg::after{ right: 0; margin-right: 2%; transform: scaleX(-1); }
#main .content .hero .bg .bg-fill{ width: 33.34%; position: absolute; left: 0; top: 0; height: 100%; background: center center no-repeat; background-size: cover; }
#main .content .hero .bg .bg-fill::after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
#main .content .hero .bg .bg-fill01{ background-image: url(../image/hero/p01.jpg); }
#main .content .hero .bg .bg-fill02{ background-image: url(../image/hero/p02.jpg); margin-left: 33.3333%; }
#main .content .hero .bg .bg-fill03{ background-image: url(../image/hero/p03.jpg); margin-left: 66.6666%; }
#main .content .hero .deco{ position: absolute; bottom: 0; pointer-events: none; z-index: 100; }
#main .content .hero .deco01{ left: 0; width: 223px; margin: -64px 0 0 -13px; }
#main .content .hero .deco02{ right: 0; width: 220px; margin: -66px -10px 0 0; }
#main .content .hero .area-body{ position: relative; z-index: 500; text-align: center; margin: 0 auto; max-width: 283px; padding: 145px 0 170px; }
#main .content .hero .area-body .icon{ width: 10.9541%; margin: 0 auto; }
#main .content .hero .area-body .sub{ font-size: 1rem; line-height: 1.5; font-weight: bold; color: #ffffff; margin-top: 15px; display: block; }
#main .content .hero .area-body .name{ font-size: 3.3333rem; line-height: 1.2; font-weight: bold; color: #ffffff; display: block; }
#main .content .hero .area-body .map{ width: 64.6643%; margin: 20px auto 0; }
#main .content .about-section{ position: relative; padding: 110px 0 150px; }
#main .content .about-section .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../../../assets/image/bg01.jpg) center 0 repeat; }
#main .content .about-section .bg .wave-mask{ width: 100%; padding-top: 1.5642%; position: absolute; left: 0; bottom: 100%; clip-path: url(#wave-path01); background: url(../../../assets/image/bg01.jpg) center 0 repeat; z-index: 500; pointer-events: none; transform: rotate(180deg); margin-bottom: -1px; z-index: 50; }
#main .content .about-section .frame-body{ max-width: 1050px; margin: 0 auto; padding: 0 10%; position: relative; z-index: 500; }
#main .content .about-section .frame-body .message-body{ display: flex; display: -ms-flex; justify-content: space-between;flex-direction: row-reverse; }
#main .content .about-section .frame-body .message-body .photo{ width: 41.9048%; max-width: 440px; margin-left: 8.0952%; }
#main .content .about-section .frame-body .message-body .txt-body{ flex: 1; }
#main .content .about-section .frame-body .message-body .txt-body .txt{ font-size: 1rem; line-height: 2.6666; color: #0c2e6e; }
#main .content .about-section .frame-body .message-body .txt-body .txt~.txt{ margin-top: 1.2em; }
#main .content .about-section .frame-body .photo-list{ display: flex; display: -ms-flex; justify-content: space-between; margin-top: 50px; }
#main .content .about-section .frame-body .photo-list .item{ width: 31.619%; }
#main .content .pickup-section{ position: relative; padding: 0 0 100px; }
#main .content .pickup-section .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff; }
#main .content .pickup-section .bg .wave-mask{ width: 100%; padding-top: 1.5642%; position: absolute; left: 0; bottom: 100%; clip-path: url(#wave-path01); background: #ffffff; z-index: 500; pointer-events: none; transform: rotate(180deg); margin-bottom: -1px; z-index: 50; }
#main .content .pickup-section .frame-body{ max-width: 1320px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 500; border-top: 1px solid transparent; }
#main .content .pickup-section .frame-body .ttl{ max-width: 426px; margin: -50px auto 0; }
#main .content .pickup-section .frame-body .ttl img{ transform: translateX(-2%); }
#main .content .pickup-section .frame-body .list-item{ width: 100%; margin: 40px auto 0; padding-bottom: 120px; }
#main .content .pickup-section .frame-body .list-item .item .inner-body{ padding: 0 4.5454%; }
#main .content .pickup-section .frame-body .list-item .item .caption{ font-size: 0.8888rem; color: #111111; line-height: 1.7; }
#main .content .pickup-section .frame-body .list-item.non-slick{ display: flex; display: -ms-flex; justify-content: center; padding-bottom: 0; }
#main .content .pickup-section .frame-body .list-item.non-slick .item{ flex: 1; }
#main .content .pickup-section .frame-body .slick-slider .arrow{ position: absolute; width: 70px; height: 70px; background-color: #fbf8f1; bottom: 0; cursor: pointer; }
#main .content .pickup-section .frame-body .slick-slider .prev-arrow{ left: 50%; transform: translateX(-100%); border-radius: 20px 0 0 20px; }
#main .content .pickup-section .frame-body .slick-slider .next-arrow{ right: 50%; transform: translateX(100%); border-radius: 0 20px 20px 0; padding-left: 1px; }
#main .content .pickup-section .frame-body .slick-slider .next-arrow::before{ content: ""; position: absolute; width: 1px; height: 25%; left: 0; top: 50%; transform: translateY(-50%); background-color: #e3e3e3; }
#main .content .pickup-section .frame-body .slick-slider .arrow .icon{ position: absolute; left: 50%; top: 50%; width: 20%; height: 1px; background-color: #111111; transform: translate(-50%,-50%); }
#main .content .pickup-section .frame-body .slick-slider .arrow .icon::before,
#main .content .pickup-section .frame-body .slick-slider .arrow .icon::after{ content: ""; position: absolute; top: 50%; width: 50%; height: 1px; background-color: #111111; }
#main .content .pickup-section .frame-body .slick-slider .prev-arrow .icon::before{ left: 0; transform: translateY(-50%) rotate(45deg); transform-origin: 0 center; }
#main .content .pickup-section .frame-body .slick-slider .prev-arrow .icon::after{ left: 0; transform: translateY(-50%) rotate(-45deg); transform-origin: 0 center; }
#main .content .pickup-section .frame-body .slick-slider .next-arrow .icon::before{ right: 0; transform: translateY(-50%) rotate(45deg); transform-origin: right center; }
#main .content .pickup-section .frame-body .slick-slider .next-arrow .icon::after{ right: 0; transform: translateY(-50%) rotate(-45deg); transform-origin: right center; }
#main .content .etc-section{ position: relative; padding: 100px 0 146px; }
#main .content .etc-section .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #d3b572; }
#main .content .etc-section .bg .wave-mask{ width: 100%; padding-top: 1.5642%; position: absolute; left: 0; bottom: 100%; clip-path: url(#wave-path01); background: #d3b572; z-index: 500; pointer-events: none; transform: rotate(180deg); margin-bottom: -1px; z-index: 50; }
#main .content .etc-section .frame-body{ max-width: 1080px; margin: 0 auto; padding: 0 5%; position: relative; z-index: 500; }
#main .content .etc-section .frame-body .list-item{ display: flex; display: -ms-flex; justify-content: space-between; }
#main .content .etc-section .frame-body .list-item .item{ width: 32%; max-width: 322px; }
#main .content .etc-section .frame-body .list-item .item .head{ text-align: center; }
#main .content .etc-section .frame-body .list-item .item .navi{ margin-top: 24px; }
#main .content .etc-section .frame-body .list-item .item .navi a{ display: block; }



@media screen and (max-width: 1400px){ /*1400px以下のcss*/
	#main .content .about-section .bg .wave-mask{ width: 1400px; padding-top: 22px; left: 50%; transform: translateX(-50%) rotate(180deg); }
	#main .content .pickup-section .bg .wave-mask{ width: 1400px; padding-top: 22px; left: 50%; transform: translateX(-50%) rotate(180deg); }
	#main .content .etc-section .bg .wave-mask{ width: 1400px; padding-top: 22px; left: 50%; transform: translateX(-50%) rotate(180deg); }
}
@media screen and (max-width: 1050px) {
	#main .content .about-section .frame-body .message-body{ display: block; }
	#main .content .about-section .frame-body .message-body .photo{ width: 100%; margin: 0 auto; }
	#main .content .about-section .frame-body .message-body .txt-body{ margin-top: 30px; }
	#main .content .about-section .frame-body .photo-list{ flex-wrap: wrap; }
	#main .content .about-section .frame-body .photo-list .item{ width: 48%; margin-left: 4%; }
	#main .content .about-section .frame-body .photo-list .item:nth-child(2n+1){ margin-left: 0; }
	#main .content .about-section .frame-body .photo-list .item:nth-child(n+3){ margin-top: 4%; }
}
@media screen and (max-width: 767.5px) {
	#main .content .hero .bg::before,
	#main .content .hero .bg::after{ width: 5%; height: 100%; }
	#main .content .hero .bg::before{ margin-left: 3%; }
	#main .content .hero .bg::after{ margin-right: 3%; }
	#main .content .hero .deco01{ width: 29.0364%; margin: -8.3333% 0 0 -1.6927%; }
	#main .content .hero .deco02{ width: 28.6458%; margin: -8.5937% -1% 0 0; }
	#main .content .hero .area-body{ width: 80%; padding: 20% 0 25%; }
	#main .content .hero .area-body .sub{ margin-top: 5.3571%; }
	#main .content .hero .area-body .map{ margin-top: 7.1428%; }
	#main .content .about-section{ padding: 20% 0 25%; }
	#main .content .about-section .bg .wave-mask{ width: 100%; padding-top: 1.5642%; left: 0; transform: rotate(180deg); }
	#main .content .about-section .frame-body .message-body .txt-body{ margin-top: 5%; }
	#main .content .about-section .frame-body .photo-list{ margin-top: 5%; }
	#main .content .pickup-section .frame-body .list-item{ margin-top: 10%; }
	#main .content .pickup-section{ padding-bottom: 25%; }
	#main .content .pickup-section .bg .wave-mask{ width: 100%; padding-top: 1.5642%; left: 0; transform: rotate(180deg); }
	#main .content .etc-section{ padding: 20% 0 25%; }
	#main .content .etc-section .bg .wave-mask{ width: 100%; padding-top: 1.5642%; left: 0; transform: rotate(180deg); }
	#main .content .etc-section .frame-body .list-item{ display: block; }
	#main .content .etc-section .frame-body .list-item .item{ width: 100%; max-width: 322px; margin: 0 auto; }
	#main .content .etc-section .frame-body .list-item .item:nth-child(n+2){ margin-top: 10%; }
	#main .content .etc-section .frame-body .list-item .item .navi{ margin-top: 5%; }
}
@media screen and (max-width: 480px) {
	#main .content .about-section .frame-body .photo-list{ display: block; }
	#main .content .about-section .frame-body .photo-list .item{ width: 100%; margin-left: 0; }
	#main .content .about-section .frame-body .photo-list .item:nth-child(n+2){ margin-top: 4%; }
}









/*animation*/
#main .content .js-inview{ opacity: 0; }
#main .content .js-inview.show{ opacity: 1; transition: opacity 0.7s; }
#main .content .etc-section .frame-body .list-item .item .navi a{ display: block; transition: transform 0.2s cubic-bezier(0.47, -0.54, 0.57, 1.84); }
#main .content .etc-section .frame-body .list-item .item .navi a:active{ transform: scale(1.05); }
@media (hover: hover){
	#main .content .etc-section .frame-body .list-item .item .navi a:hover{ transform: scale(1.05); }
}