@charset "utf-8";


@media screen and (min-width: 769px) {
    *{
        padding: 0;
        margin: 0;
       font-family: sans-serif;
     font-size: 18px;
        color: #280100;
        text-decoration: none;
        scroll-behavior: smooth;
    }
}

@media screen and (max-width: 768px) {
    *{
        padding: 0;
        margin: 0;
       font-family: sans-serif;
     font-size: 14px;
        color: #280100;
        text-decoration: none;
        scroll-behavior: smooth;
    }
}



p {line-height: 180%;}

body{
    padding: 0;
    margin: 0;
    background-color: #F0DDD1;
}

h2 {
    font-weight: bolder!important;
    margin-bottom: 30px;
    
}


a{
    text-decoration: none;
}

li{
    list-style: none;
}

.container{
    max-width: 1320px;
    margin: 0 auto;
}

.mainCatch img{
    opacity: 0;
    transform: scale(1.2);
    transition: 4.0s;
    position: relative;
    overflow: hidden;
}

.mainCatch img.show{
    opacity: 1;
    transform: scale(1);
}

.aboutrs{
    padding: 100px 0 70px 0;
}

.sbTtl{
    text-align: center;
    font-weight: 600;
}

.sbTtl p{
    font-size: 2.0rem;
    padding-bottom: 20px;
}

.triangle{
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #280100;
    margin: 0 auto;
}

.aboutrsTxt{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
}

.navCheck{
    background-color: #fff;
    padding: 70px 0 70px 0;
}

.navCheck .container ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 70px
}

.navCheck img{
    padding-bottom: 20px;
}

.navCheck ul li a{
    display: block;
    width: 50%;
    background-color: #F0DDD1;
    padding: 0.5rem 0 0.5rem 0;
    border-radius: 3rem;
    text-align: center;
    margin: 0 auto;
}

.navCheck ul li a:hover{
    background-color: #A47060;
    content: '';
    z-index: 2;
    width: 50%;
    height: auto;
    transition:.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

.sec1 .box1 .sbTtl{
    padding-bottom: 50px;
}

.taxWrap{
    padding-bottom: 100px;
}

.sbTtl{
    padding-bottom: 40px;
}

.sec1 .box1 .sbTtl p{
    padding-top: 30px;
}

.sec1 .box2{
    background-color: #fff;
}

.sec1 .box2 .container{
    padding-top: 50px;
}

.gdBox{
    padding-bottom: 70px;
}

.gd2col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
}

.sec2 .container{
    padding: 50px 0 40px 0;
}

.sec2 .container .box{
    width: 90%;
    margin: 0 auto;
}

.sec2 .container .box p{
    font-size: 2.0rem;
    font-weight: 600;
    text-align: center;
    padding: 30px 0 100px 0;
}

.sec3 .box1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px 50px;
    padding: 100px 0 140px 0;
}

.sec3 .box2{
    background-color: #fff;
    padding: 100px 0 100px 0;
}

.sec3 .box2 ul{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sec3 .box2 ul li{
    width: 45%;
}

.btUp, .centered {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.sec3 .box2 ul li a p{
    color: #fff;
    font-size: 2.0rem;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.sec3 .box2 ul li a img{
    max-width: 100%;
}

.centered {
    margin: 0 auto;
}

footer{
    background-color: #fff;
    padding-top: 50px;
}

.whob{
    width: 40%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 4fr 1fr;
    align-items: end;
    gap: 30px;
    padding: 0 0 20px 0;
}

.brob p{
    text-align: center;
    padding: 20px 0;
    background: rgba(40,1,0,0.5);
    color: #fff;
}

.fadeInst{
    animation-name:fadeInAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity:0;
}

.fadeIn.active{
    animation-name:fadeInAnime;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeInAnime{
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeUp.active {
    opacity: 0;
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
}

@keyframes fadeUpAnime{
    from {
        opacity: 0;
    transform: translateY(100px);
    }

    to {
        opacity: 1;
    transform: translateY(0);
    }
}

.delay-time01{
    animation-delay: 0.5s;
}

.delay-time02{
    animation-delay: 1.0s;
}

.btUp span{
    position:relative;
    display: block;
    overflow: hidden;
}

.btUp span::before{
    content:"";
    position: absolute;
    z-index: 2;
    left:0;
    top:0;
    opacity:0;
    transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
    background:#A47060;
    width:100%;
    height: 100%; 
}

.btUp:hover span::before{
    opacity:1;
    transform: translateY(0);
}

.btUp p{
    z-index: 3;
}

.reserveBtn{
    letter-spacing: 0.8rem;
    display: block;
    width: 100%;
    background-color: #F0DDD1;
    padding: 0.5rem 0 0.5rem 0;
    border-radius: 3rem;
    text-align: center;
    margin: 30px auto 70px auto;
}

.reserveBtn:hover{
    background-color: #A47060;
    content: '';
    z-index: 3;
    width: 100%;
    height: auto;
    transition:.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

.sec3box_d0927{
    padding-bottom: 140px;
}

.sec3box_d0927 img:first-child{
    padding-bottom: 100px;
}

.w80{
    width: 80%;
    margin: 0 auto;
    padding-bottom: 50px;
}

.w80:first-child{
    padding-top: 80px;
}

.w80 img{
    padding-bottom: 15px;
}

.w80 .sb{
    font-size: 15px;
}

.m6mb{
    font-size: 2rem;
    padding-bottom: 10px;
}

.areaUn_nav_pc{
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 5;
}

.areaUn_navTtl{
    background-color: #744840;
    color: #fff;
    padding: 30px;
    text-align: center;
}

.areaUn_navBox_pc{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.areaUn_nav_pc .areaUn_navBox_pc li:nth-child(even){
    background-color: #50332C;
}

.areaUn_nav_pc .areaUn_navBox_pc li:nth-child(odd){
    background-color: #744840;
}

.areaUn_nav_pc .areaUn_navBox_pc li a p{
    padding: 50px 30px;
    text-align: center;
    color: #fff;
}

.areaUn_nav_pc.none {
    opacity: 0;
    z-index: -1;
}

.GPmojiBWrap{
    width: 500px;
    margin: 0 auto 50px auto;
    background-color: #50332C;
    text-align: center;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.GPmojiBWrap .GPmojiBBox a:hover{
    opacity: 0.5;
}

.GPmojiBWrap p{
    color: #fff;
    text-align: center;
}



@media screen and (min-width: 769px) {
    .sp{
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .pc{
        display: none;
    }

    .container{
        width: 90%;
    }

    .aboutrs{
        padding: 50px 0 50px 0;
    }
    
    .sbTtl {
        padding-bottom: 20px;
    }

    .sbTtl p {
        font-size: 2.0rem;
        padding-bottom: 10px;
    }

    .triangle {
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #280100;
    }

    .aboutrsTxt {
        display: block;
    }

    .aboutrsTxt .sp{
        padding-bottom: 50px;
    }

    .navCheck .container ul {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .navCheck .container ul li {
        padding-bottom: 70px;
    }

    .navCheck .container ul li:last-child {
        padding-bottom: 0;
    }

    .sec1 .box1 .sbTtl{
        padding-bottom: 15px;
    }

    .sec1 .box1 .container .sp{
        width: 65%;
    }

    .taxWrap{
        text-align: center;
    }

    .sec3 .box2 ul {
        display: block;
        width: 70%;
    }

    .sec3 .box2 ul li {
        margin-bottom: 50px;
    }

    .sec3 .box2 {
        padding: 50px 0 10px 0;
    }

    .sec2 .container .box p{
        padding: 20px 0 50px 0;
    }

    .sec3 .box1 {
        padding: 50px 0 50px 0;
        gap: 35px 25px;
    }

    .whob {
        width: 80%;
    }

    .brob p {
        font-size: 0.5rem;
    }

    .sec3 .box2 ul li{
        width: 100%;
    }

    .m6mb{
        font-size: 18px;
    }

    .w80 .sb {
        font-size: 10px;
        line-height: 14px;
    }

    .w80{
        padding-bottom: 35px;
    }

    .w80:first-child {
        padding-top: 30px;
    }

    .w80:last-child {
        padding-bottom: 0;
    }

    .areaUn_nav{
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index: 5;
    }
    
    .areaUn_navTtl{
        background-color: #BCAC9B;
        color: #280100;
        padding: 30px;
        text-align: center;
        cursor: pointer;
        position: relative;/*+マークの位置基準とするためrelative指定*/
        transition-duration: .6s;
    }
    
    .areaUn_navWrap{
        display: none;
    }
    
    .areaUn_nav .areaUn_navBox{
        display: block;
        transition: all .5s ease;
    }
    
    .areaUn_nav .areaUn_navBox li:nth-child(even){
        background-color: #50332C;
    }
    
    .areaUn_nav .areaUn_navBox li:nth-child(odd){
        background-color: #744840;
    }
    
    .areaUn_nav .areaUn_navBox li a p{
        padding: 30px;
        text-align: center;
        color: #fff;
        font-size: 0.8rem;
    }


    /*アイコンの＋と×*/
    .areaUn_navTtl::before,
    .areaUn_navTtl::after{
        position: absolute;
        content:'';
        width: 20px;
        height: 2px;
        background-color: #280100;
        
    }

    .areaUn_navTtl::before{
        top:48%;
        left: 30px;
        transform: rotate(0deg);
        
    }

    .areaUn_navTtl::after{    
        top:48%;
        left: 30px;
        transform: rotate(90deg);

    }

    .areaUn_navTtl.close::before{
        transform: rotate(45deg);
    }
    
    .areaUn_navTtl.close::after{
        transform: rotate(-45deg);
    }

    .areaUn_navTtl.none {
    opacity: 0;
    z-index: -1;
    }

    .sec3box_d0927 img:first-child {
        padding-bottom: 50px;
    }

    .sec3box_d0927 {
        padding-bottom: 65px;
    }

    .taxWrap {
        padding-bottom: 50px;
    }

    .GPmojiBWrap{
        width: 300px;
    }

}


@media screen and (min-width: 769px) and (max-width: 1425px) {
    .container{
        width: 90%;
    }
}


@media screen and (max-width: 400px) {
    .sbTtl p,
    .sec2 .container .box p {
        font-size: 1.0rem;
    }
}


@media screen and (min-width: 900px) and (max-width: 1130px) {
    .sec3 .box2 ul li a p {
        font-size: 1.5rem;
    }
}


@media screen and (min-width: 769px) and (max-width: 899px) {
    .sec3 .box2 ul li a p {
        font-size: 1.2rem;
    }

    .navCheck ul li a {
        font-size: 0.8rem;
    }
}


@media screen and (min-width: 520px) and (max-width: 768px) {
    .sec3 .box2 ul li a p {
        font-size: 1.5rem;
    }
}


@media screen and (max-width: 519px) {
    .sec3 .box2 ul li a p {
        font-size: 1.0rem;
    }
}

@media screen and (max-width: 839px) {
    .areaUn_nav ul{
        display: block;
    }

    .areaUn_nav ul li a p {
        padding: 10px 0;
    }
    
    .areaUn_nav ul li a p .pc{
        display: none;
    }
}