p{
    font-size: 16px;
}

section small{
    display: block;
    margin-top: 10px;
}

blockquote{
    font-size: 12px;
    margin: 10px 0 0;
    word-break: break-all;
}

blockquote a{
    text-decoration: underline;
}

#mv{
    background: url(./img/kaso_el.png) no-repeat right top / 50%;
padding: 12% 0 0;
}

#mv .ttl{
    max-width: 680px;
    padding-right: 10%;
    margin: 0 0 4%;
}

#mv h1{
    color: #993b2d;
    border-bottom: 2px solid #333;
    margin: 0;
    position: relative;
    padding: 0 0 10px;
}

#mv h1 img{
    max-width: 80px;
    position: absolute;
    top: -10px;
    margin-left: 10px;
}

#mv .breadcrumb{
    margin: 2% 0 0;
}

#mv .breadcrumb ol{
    display: flex;
}

#mv .breadcrumb ol li{
    position: relative;
}

#mv .breadcrumb ol li:first-child::after{
    content: '/';
}

#mv .breadcrumb ol li:last-child{
    opacity: 0.8;
}

#desc .inner{
    max-width: 1280px;
    margin: 0 auto;
}

#desc .cont .f{
    margin: 4% 0;
    gap: 0 2%;
}


#desc .cont .f.top .f_l{
    width: 56%;
}

#desc .cont .f.top .f_r{
    width: 40%;
}

#desc .roll{
    position: relative;
    margin: 0 auto;
}

#desc .roll > img{
    display: block;
    width: 100%;
    height: auto;
}

#desc .cont{
    padding: 6% 12%;
    background: url(./sakamoto/img/desc_bg.png) no-repeat center center / 100% 100%;
    position: relative;
    overflow: hidden;
    max-height: 0;
    transition: max-height 3s ease, opacity .6s ease;
}

#desc .roll::after{
    content: '';
    height: 10px;
    width: 94%;
    position: absolute;
    bottom:-10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    z-index: 2;
}

#desc .cont .cont-inner{
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 2.6s ease, opacity 1.0s ease;
}


#desc .roll.is-open .cont{
    max-height: var(--rollH, 1000px);
    opacity: 1;
}

#desc .roll.is-open .cont .cont-inner{
    transform: translateY(0);
    opacity: 1;
}

#desc .roll.no-anim .cont,
#desc .roll.no-anim .cont .cont-inner{
    transition: none !important;
}

#nav{
}

#nav .f{
    background-color: #ee838548;
    padding: 6%;
    align-items: center;
}

#nav .f_l{
    width: 28%;
}

#nav .f_l p{
    display: flex;
    align-items: center;
    color: #993b2d;
    font-size: 28px;
    gap: 0 10px;
    justify-content: center;
}

#nav .f_l p img{
    max-width: 40px;
}

#nav .f_r{
    width: 70%;
}

#nav .f_r ul{
    display: flex;
    flex-wrap: wrap;
    gap:40px 20px;
}

#nav .f_r ul li{
    width: calc(100% / 4 - 40px * 3 / 4);
}

#nav .f_r ul li a p{
    color: #993b2d;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
}

#nav .f_r ul li a img{
    display: block;
    overflow: hidden;
}

#nav .f_r ul li a:hover img{
    filter: brightness(120%);
    transition: all .3s;
}

#spot{
    background: url(./sakamoto/img/spot_bg.png) repeat-y center center / 100%;
}

#spot ul{
    background-color: #f6f3eac0;
    padding: 0 12% 6%;
    border-radius: 40px;
    border: 4px solid #fff;
}

#spot ul li{
    padding-top: 16%;
}


#spot ul li .txt{
    margin: 4% 0;
}

#spot ul li:not(:last-child){
    margin: 0 0 6%;
}

#spot ul li h2{
    border-bottom: 4px #123574 double;
    margin: 0 0 4%;
    width: 40%;
    padding: 0 0 10px;
    position: relative;
}

#spot ul li h2 img{
    position: absolute;
    max-width: 120px;
    right: -140px;
    bottom: -20px;
}

#spot ul li > img{
    display: block;
    margin: 0 0 2%;
}

#spot ul li p{
    line-height: 2;
}

#spot ul li .map{
    background-color: #f2d3cc;
    padding: 2% 2% 4%;
    margin: 4% auto 0;
    width: 90%;
    border-radius: 20px;
}

#spot ul li .map .frame{
    overflow: hidden;
    border-radius: 20px;
}

#spot ul li .map iframe{
    width: 100%;
    height: 18vw;
}


#spot ul li .map dl{
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    margin: 2% auto 0;
}

#spot ul li .map dl dt{
    width: 15%;
    border-right: 1px solid #000;
    padding: 1%;
}

#spot ul li .map dl dd{
    width: 85%;
    padding:1% 1% 1% 4%;
}

#spot ul li .map dl dd a{
    text-decoration: underline;
}

#spot ul li .map dl dd a:hover{
    opacity: 0.8;
}

#spot .btn{
    max-width: 320px;
    margin: 6% auto 0;
}

#spot .btn a{
    background-color: #231815;
}

#spot .btn a::after{
        border-left: 8px solid #9d9d9e;
}

a#spottop{
    background-color: #231815;
    color: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    font-size: 14px;
    position: relative;
    margin-right: 20px;
}

a#spottop:hover{
    filter: brightness(120%);
    transition: all .3s;
}

a#spottop span{
    position: absolute;
    top: 10px;
    font-size: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: #9d9d9e;
}

#spottop_wrapper {
    position: fixed;
    z-index: 9999;
    bottom: 100px;
    width:auto;
    right: 0;
    display: flex;
    justify-content: flex-end;
}


@media (prefers-reduced-motion: reduce){
    #desc .cont,
    #desc .cont .cont-inner{
        transition: none !important;
    }
}
@media screen and (max-width: 1023px){
#spot ul li h2{
    width: 100%;
        margin: 0 0 8%;
}

#spot ul li h2 img {
    max-width: 60px;
    right: 0;
    bottom: auto;
    top: -10px;
}
#spot ul li .map{
    width: 100%;
}
#spot ul li .map dl{
    font-size: 16px;
}

#spot ul li .map dl dt{
    width: 20%;
}

#spot ul li .map dl dd{
    width: 80%;
}
#nav .f{
    flex-direction: column;
}

#nav .f .f_l{
    width: 100%;
    margin: 0 0 8%;
}

#nav .f_r{
    width: 100%;
}

#nav .f_r ul{
    gap: 20px 10px;
}

#nav .f_r ul li{
    width: calc(100% / 3 - 10px * 2 / 3);
}

#nav .f_r ul li a p{
    font-size: 14px;
    margin-top: 4px;
}
}

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

    p{
        font-size: 15px;
    }
    #mv{
        padding: 32% 0 0;
    }

    #mv .ttl{
        max-width: 320px;
    }

    #mv h1 img {
    max-width: 40px;
    top: -20px;
    margin-left: 0px;
}
#mv .breadcrumb ol{
    font-size: 14px;
}

#desc .cont {
    padding: 10% 10% 20%;
    background-image: url(./sakamoto/img/desc_bg_sp.png);
}

#desc .cont p{
    margin: 0 0 10px;
}

#desc .cont .f{
    flex-direction: column;
    margin: 8% 0;
}

#desc .cont img{
    width: 70%;
    display: block;
}

#desc .cont .f.top .f_l,
#desc .cont .f.top .f_r,
#desc .cont .f .f_l,
#desc .cont .f .f_r{
    width: 100%;
}

#desc .cont .f .f_l{
    margin: 0 0 8%;
}

  #desc .roll > img{
    cursor: pointer;
    position: relative;
    z-index: 10;
    pointer-events: auto;
  }

  #desc .cont{
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  #desc .roll.is-open .cont{
    pointer-events: auto;
  }

  #desc p.sp{
    text-align: center;
    margin: 0 0 10px;
  }

#nav{
    padding: 0 0 12%;
}

#spot ul{
    padding: 0 4% 10%;
}


#spot ul li > img{
    margin: 0 0 6%;
}
#spot ul li .map{
    width: 100%;
    padding: 4% 4% 8%;
}

#spot ul li .map .frame{
    margin: 0 0 4%;
}

#spot ul li .map iframe{
    height: 50vw;
}

#spot ul li .map dl{
    font-size: 15px;
    width: 100%;
}

#spot ul li .map dl dt{
    border-right: none;
    border-bottom: 1px solid #000;
    width: 100%;
    margin: 0 0 6px;
    padding: 0 0 4px;
}

#spot ul li .map dl dd{
    padding-left: 0;
    width: 100%;
    margin: 0 0 6%;
}

#spot ul li {
    padding-top: 18%;
}

#spot ul li:not(:first-child){
    padding-top: 45%;
}

a#spottop{
    font-size: 16px;
        height: 60px;
    width: 100%;
    margin: 0;
    border-radius: 20px 20px 0 0;
        border: 2px solid #fff;
}
a#spottop span{
    font-size: 14px;
    top: 50%;
    transform: translateY(-50%);
    left: auto;
    right: 20px;
}



#spottop_wrapper{
    bottom: 0;
    right: auto;
    width: 100%;
}

#pagetop_wrapper{
    bottom: 80px;
    right: 0;
}
}