@charset "UTF-8";

main{padding-top: 70px;}

.fv_area{display: flex;flex-wrap: wrap;max-width: 1286px;height: calc(100svh - 140px);min-height: 658px;max-height: 800px;background-color: #F5F2EB;border-radius: 0 0 100px 100px;margin: 0 auto 40px;overflow: hidden;}
.fv_slide{width: 50%;height: 100%;}
.fade-img-box{ width: 100%; height: 100%; position:relative;}
.fade-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit:cover;
   }
.fade-img-box li span{
    display: block; position: absolute;width: 100%; top: 50%;left: 50%;transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);font-size: 3.2rem;font-family: "yu-mincho-pr6n", sans-serif;color: #fff;text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);text-align: center;
}


.fv_text {width: 50%;height: 100%;padding: 120px 0 0;
& img{display: block;height: 300px;width: 164px;margin: 0 auto 60px;}
& p{font-family: "yu-mincho-pr6n", sans-serif;text-align: center;font-size: 2rem;}
}

.base_b{padding: 160px 0 290px 0;}

#about{position: relative;}

.pic{
    background:no-repeat left top / cover;height: 400px;width: auto;border-radius: 200px 0 0 200px;
    
    position: relative;margin-left: 63%;margin-bottom: -400px;}
.pic01{background-image: url(../img/photo_01_pc.jpg);}
.pic02{background-image: url(../img/photo_02_pc.png);}

.photo2{height: 460px;background: url(../img/photo2_pc.png);margin:60px 0 auto calc(50% - 400px);}

.overview{width: 100%;font-size:1.5rem;
    & tr{border-bottom:solid #CDBD9B 1px ;
    &:first-of-type{border-top:solid #CDBD9B 1px}}
    & th{font-weight: normal;width: 20%;min-width: 100px;text-align: center;vertical-align: middle;}
    & td{width: 80%;vertical-align: middle;padding: 20px 10px;}
    & ol{list-style: decimal;& li{margin-left: 20px;}}
}

.greeting{display: flex;flex-wrap: wrap;justify-content: space-between;
    & p:first-child{width: 65%;}
    & div{width: 30%;text-align: center;font-size: 1.5rem;
    & img{display: block;margin-bottom: 20px;}}
}

#activity{position: relative;}
.expert_txt{width: 64%;margin-bottom: 40px;}
.dogfriendly{position: relative;margin: 70px 0 0 20%;padding: 0 0 0 120px;
    & dt{font-size: 2rem;font-family: "Noto Sans JP", sans-serif;font-weight:500;line-height: 1;margin: 0 0 35px 0;}
    &::before{position: absolute;top:-15px;left: 0;font-size: 15rem;color: #CDBD9B;font-family: "yu-mincho-pr6n", sans-serif;line-height: 1;}
    &::after{position: absolute;top: 63px;left: 75px;content: "Activity";font-size: 1.4rem;color: #CDBD9B;font-family: "yu-mincho-pr6n", sans-serif;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;}
}
.df01{&::before{content: "1";}}
.df02{&::before{content: "2";}}

.jump{
height: 1px;
display: block;
padding-top: 70px;
margin-top: -70px;
}

@media screen and (max-width:1030px){
.fv_area{height:calc(100svh - 110px);margin: 0 40px;max-height: none;}

.fv_text {width: 50%;padding: 21% 0 0;
    & img{height: 40%;width: auto;margin-bottom:40px;}
    & p{font-size: 1.8rem;}}


.title_s {padding-left: 25px;line-height:1;margin-bottom:20px;
    &::before {left: 0;
}}
.base_b{padding: 160px 0;}
.pic{width: 100%;aspect-ratio: 1.3 / 1;height: auto;max-height: 352px;margin:20px 0 0 6%;}
.expert_wrap{display: flex;flex-wrap: wrap;}
.expert_txt {width: 100%;}
.pic{order: 2;}
}


@media screen and (max-width:834px){

.fv_area{border-radius: 0 0 50px 50px;}
.fv_slide{width: 100%;height: 50%;aspect-ratio: 1 / 1.1;border-radius: 0;}

.fv_text {width: 100%;height: 50%;padding: 10% 0 0;
    & img{height: 50%;width: auto;}
    & p{font-size: 1.5rem;}}

.fade-img-box li span{font-size: 2.4rem;}
main{padding-top: 74px;}

.base_b {padding: 50px 0;}

.photo2{background: url(../img/photo2_sp.png) left top / 100%;
    margin:30px 0;
    aspect-ratio: 1.53 / 1;
    height: auto;
    width: 100%;
    aspect-ratio: 1 / 1.25;}

.pic01{background-image: url(../img/photo_01_sp.jpg);}

.greeting {
    & p:first-child {width: 100%;}
    & div {width: 70%;margin: 30px auto 50px;}
}

.title_s {line-height: 1.5;
    &::before {top:5px}}

.dogfriendly{margin: 35px 0 0;padding: 110px 0 0 0;
    &::before{font-size: 10rem;}
    &::after {top:20px;left: 55px; }
    & dt{margin-bottom: 20px;}
}
}

@media screen and (max-width: 499px) {
    main {padding-top: 54px;}
    .fv_text {width: 100%;height: 50%;padding: 15% 0 0;
        & img{height: 50%;width: auto;margin-bottom: 20px;}}
    .fv_area {margin: 0 6%;height:calc(100svh - 74px);min-height: 100%;}}

    .pic01{background-image: url(../img/photo_01_sp.jpg);}

@media screen and (max-height:499px) and (max-width:499px){
    .fv_text {height: 60%;padding: 10% 0 0;
        & img{margin-bottom: 20px;}
        & p{font-size: 1.2rem;}}
    .fv_slide{height: 40%;}
}