html{
scroll-behavior: smooth;
}

body {
position: relative;
}

#contentsarea{
width: 100%;
min-width: 1200px;
margin: 0 auto;
font-size: 17px;
line-height: 2em;
background: #eeeadd;
font-family:  "Arial", 'Segoe UI', 'Hiragino Sans', 'Yu Gothic';
font-weight: 300;
letter-spacing: 0.1em;
text-align: justify;
word-break: break-all;
}

#contentsarea .sp_br{
display: none;
}

@-webkit-keyframes zoomUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

@keyframes zoomUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

#contentsarea .swiper-container{
position: relative;
}

#contentsarea .swiper-container .slide-text{
position: absolute;
z-index: 999;
color: #fff;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
margin: 0;
font-size: 24px;
line-height: 1em;
padding: 0 8%;
}

#contentsarea .swiper-container .slide-text h3{
display: inline-block; 
font-size: 54px;
line-height: 1em;
margin: 40px 0 0;
font-weight: 100;
position: relative;
}

#contentsarea .swiper-container .slide-text h3:before {
content: '';
position: absolute;
top: -22px;
display: inline-block;
width: 120%;
height: 4px;
left: 0;
background: linear-gradient(to right, rgb(221, 221, 221), transparent);
}

#contentsarea .swiper-wrapper .swiper-slide {
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

#contentsarea .swiper-wrapper .swiper-slide-active .slide-img,
#contentsarea .swiper-wrapper .swiper-slide-duplicate-active .slide-img,
#contentsarea .swiper-wrapper .swiper-slide-prev .slide-img { 
animation: zoomUp 10s linear 0s;
animation-fill-mode: both;
}

#contentsarea .swiper-wrapper .slide-img {
background-size: cover; 
background-position: center center;
height: 450px;
position: relative;
}

#contentsarea .swiper-wrapper .slide-img::after {
content: '';
background-color: rgba(0,0,0,.3);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

#contentsarea .inner_link{
width: 100%;
margin: 0 auto;
padding: 1em 0;
font-size: 14px;
line-height: 1em;
font-weight: 400;
color: #fff;
background: #a49a86;
text-align: center;
}

#contentsarea .inner_link span{
position: relative;
display: inline-block;
padding: 0 42%;
}

#contentsarea .inner_link span:before, 
#contentsarea .inner_link span:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45%;
height: 1px;
background-color: #fff;
}

#contentsarea .inner_link span:before {
left:0;
}

#contentsarea .inner_link span:after {
right: 0;
}

#contentsarea .linkbtn_area{
width: 100%;
margin: 0 auto;
padding: 0 8%;
background: #fff;
display: flex;
justify-content: space-between;
list-style: none ;
font-size: 12px;
line-height: 1.3em;
text-align: center;
flex-wrap: nowrap;
}

#contentsarea .linkbtn_area li{
width: 15.5%;
margin: 20px 0;
}

#contentsarea .linkbtn_area li a{
width: 100%;
display: block;
padding: 15px 5px;
border: 2px solid #a49a86;
border-radius: 10px;
color: #a49a86;
transition: 0.5s;
}

#contentsarea .linkbtn_area li a:hover{
background: #bab190;
color: #fff;
opacity: 1;
}

#contentsarea .linkbtn_area li i{
display: block;
width: 100%;
margin: 0 0 10px;
font-size: 24px;
line-height: 1em;
}

#contentsarea .maincontents{
width: 100%;
max-width: 1350px;
margin: 0 auto;
color: #605c4e;
padding: 0;
}

.maincontents img {
display: block;
width: 100%;
max-width: inherit !important;
border-radius: 10px;
}

.maincontents h4{
display: block;
width: 100%;
padding: 0;
font-size: 36px;
line-height: 1.2em;
margin: 0;
font-weight: 400;
position: relative;
}

.maincontents h4:after {
content: '';
position: absolute;
bottom: -25px;
display: inline-block;
width: 100px;
height: 4px;
left: 0;
background: linear-gradient(to right, rgb(231, 141, 25), rgb(255, 216, 38));
}

.maincontents h5{
display: inline-block; 
margin: 0 auto 30px;
font-size: 28px;
line-height: 1em;
font-weight: 400;
position: relative;
padding: 0 0 5px;
}

.maincontents .content_box h5:after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 7px;
background: repeating-linear-gradient(-45deg, #a49a86, #a49a86 2px, #eeeadd 2px, #eeeadd 4px);
}

.maincontents .content_box.white h5:after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 7px;
background: repeating-linear-gradient(-45deg, #a49a86, #a49a86 2px, #fff 2px, #fff 4px);
}

.maincontents h6, 
.maincontents h7{
margin: 50px auto 20px;
font-size: 22px;
line-height: 1.2em;
font-weight: 400;
position: relative;
display: block;
padding: 0.5em 0.5em 0.5em 1.8em;
background: #a49a86;
color: #fff;
}

.maincontents h6:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
font-weight: 900;
position: absolute;
left : 0.5em;
}

.maincontents h7:before {
font-family: "Font Awesome 5 Free";
content: "\f239";
font-weight: 900;
position: absolute;
left : 0.5em;
}

.maincontents h8{
display: block;
margin: 50px auto 20px;
font-size: 20px;
line-height: 1.5em;
font-weight: 400;
padding: 0.5em 0.5em 0.5em 2.3em;
border-bottom: 3px dotted;
position: relative;
}

.maincontents h8:before {
font-family: "Font Awesome 5 Free";
content: "\f0e0";
font-weight: 900;
position: absolute;
left : 0.5em;
}

.maincontents .sub_title{
width: 100%;
font-size: 20px;
line-height: 2em;
margin: 40px 0 0;
text-align: justify;
}

.maincontents .main_title{
width: 100%;
margin: 0 auto;
padding: 80px 8%;
}

.maincontents .content_box{
width: 100%;
margin: 0 auto;
padding: 80px 8%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none ;
}

.maincontents .content_box.white{
background: #fff;
}

.maincontents .content_box p, 
.maincontents .wide_content p{
width: 100%;
margin: 10px auto 0;
font-size: 16px;
line-height: 2em;
text-align: justify;
}

.maincontents .content_box p.notes,  
.maincontents .wide_content p.notes{
margin: 0 auto;
}

.maincontents .content_box p.indent_notes{
margin: 0 auto;
padding-left: 1em;
}

.maincontents .content_box p.small_text,  
.maincontents .wide_content p.small_text{
font-size: 14px;
}

.maincontents .content_box .text_area p span, 
.maincontents .content_box .access_text_area p span, 
.maincontents .wide_content p span{
display: block;
width: 100%;
font-size: 14px;
text-indent: -0.5em;
padding-left: 0.5em;
}

.maincontents .content_box .text_area{
width: 60%;
margin: 0 auto;
display: flex;
align-items: center;
order: initial;
}

.maincontents .content_box .access_text_area{
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
order: initial;
}

.maincontents .content_box .text_area .text_indent, 
.maincontents .content_box .access_text_area .text_indent{
padding-left:1em;
text-indent:-1em;
}

.maincontents .mail_btn, 
.maincontents .content_box .access_text_area .map_btn{
display: inline-block;
margin: 20px 0 0;
padding: 10px 60px;
border: 2px solid #a49a86;
color: #eeeadd;
background: #a49a86;
transition: 0.5s;
font-size: 18px;
line-height: 1em;
}

.maincontents .mail_btn:hover, 
.maincontents .content_box .access_text_area .map_btn:hover{
background: #eeeadd;
color: #a49a86;
opacity: 1;
}

.maincontents .content_box .access_text_area .inquiry_area{
width: 100%;
margin: 50px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none ;
}

.maincontents .content_box .access_text_area .inquiry_box{
width: 46%;
}

.maincontents .content_box .access_text_area .inquiry{
width: 100%;
margin: 40px auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
list-style: none ;
}

.maincontents .content_box .access_text_area .inquiry_sub_title{
width: 100%;
margin: 0;
font-size: 12px;
line-height: 2em;
padding: 0 0.5em 0.5em;
font-weight: 400;
border-bottom: 3px dotted;
}

.maincontents .content_box .access_text_area .inquiry_sub_title span{
padding: 0 0.5em 0 0;
font-size: 13px;
font-weight: 600;
}

.maincontents .content_box .access_text_area .inquiry_title{
width: 100%;
margin: 40px 0 0;
font-size: 42px;
line-height: 1em;
font-weight: 400;
}

.maincontents .content_box .access_text_area .inquiry li{
width: 47%;
margin: 0;
font-size: 14px;
line-height: 1em;
}

.maincontents .content_box .access_text_area .inquiry .inquiry_tel{
width: 100%;
margin: 5px 0 0;
font-size: 30px;
line-height: 60px;
font-weight: 400;
}

.maincontents .content_box .access_text_area .inquiry .inquiry_mail{
width: 100%;
margin: 5px 0 0;
font-size: 20px;
line-height: 60px;
font-weight: 400;
}

.maincontents .content_box .access_text_area .inquiry li a{
color: #605c4e;
}

.maincontents .content_box .photo_area{
width: 40%;
margin: 0 auto;
order: initial;
}

.maincontents .content_box .photo_area.left{
padding: 0 4% 0 0;
}

.maincontents .content_box .photo_area.left .content_width{
width: 100%;
}

.maincontents .content_box .photo_area.right{
padding: 0 0 0 4%;
}

.maincontents .content_box .wide_content{
width: 100%;
margin: 0 auto;
}

.maincontents .delivery{
width: 100%;
margin: 0 auto;
order: initial;
}

.maincontents .delivery .selectbox_area{
width: 100%;
position: relative;
}

.maincontents .delivery .selectbox_area::after {
position: absolute;
display: flex;
align-items: center;
top: 0px;
right: 0;
width: auto;
height: 100%;
padding: 0 10px;
font-size: 14px;
line-height: 2em;
line-height: 1em;
font-family: "Font Awesome 6 Free";
font-weight: bold;
pointer-events: none;
content: "\f107";
color: #fff;
background: #a49a86;
}

.maincontents .delivery .selectbox_area select.select_control{
width: 100%;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #a49a86;
background: #fff;
border: 2px solid #a49a86 !important;
outline: none;
}

.maincontents .delivery .selectbox_area select.select_control:focus{
border: 2px solid #a49a86 !important;
outline: none !important;
}

.maincontents .delivery #Box2,
.maincontents .delivery #Box3, 
.maincontents .delivery #Box4{
margin: 20px 0 0;
}

.maincontents .delivery .delivery_manual{
width: 100%;
margin: 0 auto;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none ;
}

.maincontents .delivery .delivery_manual .delivery_text{
width: 60%;
padding: 0 20px 0 0;
}

.maincontents .delivery .delivery_manual .delivery_adress{
width: 40%;
padding: 0 0 0 35px;
font-size: 14px;
line-height: 1em;
display: flex;
align-items: center;
}

.maincontents .content_box .payment_details{
width: 19%;
margin: 0;
padding: 20px;
background: #a49a86;
border-radius: 10px;
color: #fff;
font-size: 17px;
line-height: 2em;
text-align: center;
}

.maincontents .content_box .payment_details span{
display: block;
width: 100%;
font-size: 13px;
line-height: 1.5em;
}

.maincontents .content_box .payment_details i{
display: block;
font-size: 28px;
line-height: 1em;
margin: 0 auto 10px;
}

.maincontents .flow_area, 
.maincontents .payment_area{
width: 100%;
margin: 50px auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none ;
order: initial;
}

.maincontents .flow_area .flow_box{
width: 31%;
margin: 0;
padding: 40px 25px;
background: #a49a86;
border-radius: 10px;
color: #fff;
font-size: 17px;
line-height: 2em;
}

.maincontents .flow_area .flow_box .flow_chart{
width: 100%;
margin: 0 auto 25px;
padding: 0 0 25px;
text-align: center;
border-bottom: 3px dotted;
}

.maincontents .flow_area .flow_box .flow_chart span{
display: block;
font-size: 26px;
line-height: 1em;
margin: 0 auto 18px;
font-weight: 600;
}

.maincontents .flow_area .flow_box .notice{
display: block;
font-size: 13px;
margin: 0 auto;
text-indent: -0.5em;
padding-left: 0.5em;
}

.maincontents .flow_area .store_features{
width: 31%;
margin: 0;
padding: 0;
}

.maincontents .flow_area .store_features .features_subphoto{
width: 100%;
padding: 0;
margin: 0;
}

.maincontents .cancel{
width: 100%;
order: initial;
}

.maincontents .fadein {
opacity: 0;
transform: translate(0, 0);
transition: all 1.5s;
}

.maincontents .flow_box.fadein:nth-of-type(2), 
.maincontents .store_features.fadein:nth-of-type(2),
.maincontents .inquiry_box.fadein:nth-of-type(2) {
transition-delay: 0.3s;
}

.maincontents .flow_box.fadein:nth-of-type(3), 
.maincontents .store_features.fadein:nth-of-type(3){
transition-delay: 0.6s;
}

.maincontents .payment_details.fadein:nth-of-type(2){
transition-delay: 0.2s;
}

.maincontents .payment_details.fadein:nth-of-type(3){
transition-delay: 0.4s;
}

.maincontents .payment_details.fadein:nth-of-type(4){
transition-delay: 0.8s;
}

.maincontents .payment_details.fadein:nth-of-type(5){
transition-delay: 1s;
}

.maincontents .fadein.fadein-left {
transform: translate(-30px, 0);
}

.maincontents .fadein.fadein-right {
transform: translate(30px, 0);
}

.maincontents .fadein.fadein-bottom {
transform: translate(0, 30px);
}

.maincontents .fadein.scrollin {
opacity: 1 !important;
transform: translate(0, 0) !important;
}

.maincontents .rotation {
transition: all 1s;
opacity: 0;
transform: rotateX(180deg);
}

.maincontents .rotation.scrollin {
transform: translate(0, 0) !important;
opacity: 1 !important;
}

.toTop{
position: fixed;
right: 1em;
bottom: 1em;
pointer-events: none;
opacity: 0;
margin: 0;
transition: opacity 0.5s;
}

.toTop.is-active{
pointer-events: auto;
opacity: 1;
}

.toTop a{
color: #a49a86;
position: absolute;
bottom: 0;
right: 70px;
text-decoration: none;
display: block;
width: 165px;
padding: 0 20px 20px;
text-align: right;
transform: rotate(90deg);
transform-origin: bottom right;
font-size: 15px;
}

.toTop .arrow1{
width: 48px;
height: 1px;
background: #a49a86;
position: absolute;
top: 32%;
right: 116px;
}

.toTop .arrow2{
width: 1px;
height: 12px;
background: #a49a86;
position: absolute;
top: calc(32% + 1px);
right: 163px;
transform: rotate(-130deg);
transform-origin: top left;
}


@media only screen and (max-device-width: 1199px) {

#contentsarea{
min-width: auto;
}
}


@media only screen and (max-device-width: 849px) {

#contentsarea .inner_link span{
padding: 0 40%;
}

#contentsarea .inner_link span:before, 
#contentsarea .inner_link span:after {
width: 40%;
}

#contentsarea .linkbtn_area{
font-size: 10px;
line-height: 1.5em;
flex-wrap: wrap;
justify-content: center;
padding: 0;
}

#contentsarea .linkbtn_area li{
width: calc(100% / 3);
margin: 0;
}

#contentsarea .linkbtn_area li:nth-child(odd){
background: #f6f4ec;
}

#contentsarea .linkbtn_area li a{
padding: 15px 5px;
border: none;
border-radius: 0px;
}

#contentsarea .linkbtn_area li i{
margin: 0 0 10px;
font-size: 16px;
line-height: 1em;
}
}


@media only screen and (max-device-width: 750px) {

#contentsarea{
font-size: 17px;
font-weight: 300;
letter-spacing: 0.1em;
}

#contentsarea .sp_br{
display: block;
}

#contentsarea .swiper-container .slide-text{
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 20px;
padding: 0 40px;
text-align: center;
}

#contentsarea .swiper-container .slide-text h3{
font-size: 50px;
margin: 40px 0 0;
font-weight: 100;
}

#contentsarea .swiper-container .slide-text h3:before {
width: 100%;
background-image: linear-gradient(to right, transparent, #fff, transparent);
}

#contentsarea .swiper-wrapper .slide-img {
height: 60vh;
}

#contentsarea .maincontents{
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0;
}

.maincontents h4{
padding: 0;
font-size: 34px;
margin: 0;
font-weight: 400;
text-align: center;
}

.maincontents h4:after {
bottom: -25px;
width: 100px;
height: 4px;
left: 50%;
transform: translateX(-50%);
}

.maincontents h5{
margin: 0 auto 30px;
font-size: 22px;
font-weight: 400;
}

.maincontents .content_box h5:after {
left: 0;
bottom: -10px;
width: 100%;
height: 7px;
background: repeating-linear-gradient(-45deg, #a49a86, #a49a86 2px, #eeeadd 2px, #eeeadd 4px);
}

.maincontents .content_box.white h5:after {
left: 0;
bottom: -10px;
width: 100%;
height: 7px;
background: repeating-linear-gradient(-45deg, #a49a86, #a49a86 2px, #fff 2px, #fff 4px);
}

.maincontents h6, 
.maincontents h7{
margin: 40px auto 20px;
font-size: 22px;
font-weight: 400;
padding: 0.5em 0.5em 0.5em 1.8em;
}

.maincontents h6:before, 
.maincontents h7:before{
font-weight: 900;
left: 0.5em;
}

.maincontents h8{
margin: 40px auto 20px;
font-size: 20px;
}

.maincontents .sub_title{
font-size: 17px;
margin: 50px 0 0;
}

.maincontents .main_title{
margin: 0 auto;
padding: 60px 30px;
}

.maincontents .content_box{
width: 100%;
margin: 0 auto;
padding: 60px 30px;
justify-content: space-between;
}

.maincontents .content_box.access_box{
padding: 60px 30px 30px !important;
}

.maincontents .content_box p, 
.maincontents .wide_content p{
margin: 10px auto 0;
}

.maincontents .content_box .text_area{
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
order: 1;
}

.maincontents .mail_btn{
width: 70%;
max-width: 250px;
display: block!important;
margin: 30px auto 0;
padding: 12px 0;
text-align: center;
}

.maincontents .content_box .text_area .map_btn, 
.maincontents .content_box .access_text_area .map_btn{
width: 70%;
max-width: 250px;
display: block;
margin: 30px auto;
padding: 5px 0;
text-align: center;
}

.maincontents .delivery{
order: 3;
}

.maincontents .content_box .photo_area{
width: 100%;
margin: 20px auto 0;
display: flex;
align-items: center;
order: 2;
}

.maincontents .content_box .photo_area.left, 
.maincontents .content_box .photo_area.right{
padding: 0 5%;
}

.maincontents .delivery .delivery{
order: initial;
}

.maincontents .delivery .selectbox_area::after {
position: absolute;
font-size: 16px;
}

.maincontents .delivery .delivery_manual .delivery_text{
width: 100%;
margin: -10px auto 0;
padding: 0;
}

.maincontents .delivery .delivery_manual .delivery_adress{
width: 100%;
padding: 0;
font-size: 14px;
margin: 40px 0 0;
text-align: center;
}

.maincontents .delivery .delivery_manual .delivery_adress span{
margin: 5px 0 0;
font-size: 24px;
}

.maincontents .payment_area{
margin: 10px auto 0;
justify-content: space-between;
order: 3;
}

.maincontents .payment_area::after{
content:"";
display: block;
width: 31%;
}

.maincontents .content_box .payment_details{
width: 31%;
margin: 20px 0 0;
padding: 15px 10px;
font-size: 14px;
}

.maincontents .content_box .payment_details span{
font-size: 10px;
margin: 6px 0 0;}

.maincontents .content_box .payment_details i{
font-size: 28px;
margin: 0 auto 10px;
}

.maincontents .flow_area{
margin: 30px auto 0;
justify-content: space-around;
order: 3;
}

.maincontents .flow_area .flow_box{
margin: 20px auto 0;
font-size: 16px;
}

.maincontents .flow_area .flow_box .flow_chart{
margin: 0 auto 20px;
padding: 0 0 15px;
border-bottom: 3px dotted;
}

.maincontents .flow_area .flow_box .flow_chart span{
font-size: 26px;
margin: 0 auto 18px;
font-weight: 600;
}

.maincontents .flow_area .store_features .features_subphoto{
width: 100%;
padding: 0;
}

.maincontents .content_box .access_text_area .inquiry_area{
margin: 0 auto;
padding: 0 5%;
}

.maincontents .content_box .access_text_area .inquiry_box{
width: 100%;
margin: 40px 0 0;
}

.maincontents .content_box .access_text_area .inquiry_sub_title, 
.maincontents .content_box .access_text_area .inquiry_sub_title span{
font-size: 14px;
}

.maincontents .content_box .access_text_area .inquiry_title{
text-align: center;
font-size: 35px;
}

.maincontents .content_box .access_text_area .inquiry{
text-align: center;
margin: 0 auto;
}

.maincontents .content_box .access_text_area .inquiry li{
width: 100%;
margin: 40px 0 0;
font-size: 13px;
}

.maincontents .content_box .access_text_area .inquiry .inquiry_tel, 
.maincontents .content_box .access_text_area .inquiry .inquiry_mail{
font-size: 28px;
margin: 5px 0 0;
}

.maincontents .cancel{
order: 4;
}

.maincontents .rotation {
text-align: center;
}

.maincontents .inquiry_box.fadein:nth-of-type(2), 
.maincontents .payment_details.fadein:nth-of-type(4){
transition-delay: 0s;
}

.maincontents .payment_details.fadein:nth-of-type(5){
transition-delay: 0.2s;
}

.toTop{
right: 0;
bottom: 1em;
}

.toTop a{
bottom: 24px;
right: 30px;
width: 130px;
padding: 0 20px 5px;
font-size: 11px;
}

.toTop .arrow1{
width: 48px;
height: 1px;
top: 42%;
right: 96px;
}

.toTop .arrow2{
width: 1px;
height: 12px;
top: calc(42% + 1px);
right: 143px;
}
}


@media only screen and (max-device-width: 650px) {

.maincontents .flow_area .flow_box{
width: 100%;
padding: 40px 20px;
}

.maincontents .flow_box.fadein:nth-of-type(2), 
.maincontents .flow_box.fadein:nth-of-type(3){
transition-delay: 0s;
}
}


@media only screen and (max-device-width: 500px) {

.maincontents .content_box .access_text_area .inquiry_area{
padding: 0;
}

.maincontents .payment_area::after{
content:"";
display: block;
width: 48%;
}

.maincontents .content_box .payment_details{
width: 48%;
}

.maincontents .payment_details.fadein:nth-of-type(3), 
.maincontents .payment_details.fadein:nth-of-type(5){
transition-delay: 0s;
}

.maincontents .payment_details.fadein:nth-of-type(4){
transition-delay: 0.2s;
}
}