@charset "UTF-8";
/* =====================================
	attractions
===================================== */

#wrapper{
    background-image: url("../img/common/bg02.png"), url("../img/common/bg03.png");
    background-repeat: no-repeat, no-repeat;
    background-position: top -217px left, top 2343px right;
}

main{
    width: 100%;
    padding: 162px 50px 206px;
    position: relative;
}

main .attractions{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

main .attractions h1{
    font-size: 7.625rem;
    font-weight: 250;
    text-align: center;
    line-height: 1;
    color: #5ac0c9;
    display: table;
    width: 100%;
    max-width: 687px;
    margin: 0 auto 48px;
    padding-bottom: 38px;
    background: url("../img/department/huki01.svg") no-repeat center bottom;
    position: relative;
    z-index: 3;
}

main .attractions h1 small{
    font-size: 2.5rem;
    font-weight: normal;
    display: block;
    color: #232323;
    margin-top: -3px;
}

main .attractions .lead{
    width: 42.5%;
    position: relative;
    margin-bottom: 100px;
}

main .attractions .lead::before{
    content: "";
    background: url("../img/attractions/illust01.png") no-repeat center;
    background-size: contain;
    width: min(64.53846vw, 839px);
    height: min(50.153846vw, 652px);
    position: absolute;
    top: max(-26.1538vw, -340px);
    left: min(40vw, 520px);
}

main .attractions .lead h2{
    font-size: 3.7rem;
    line-height: 1.324;
    margin-bottom: 12px;
    color: #ef90b9;
    position: relative;
    z-index: 3;
}

main .attractions .lead p{
    line-height: 1.75;
    position: relative;
    z-index: 3;
}

main .attractions h3{
    font-size: 3.8rem;
    line-height: 1;
    margin-bottom: 36px;
}

main .attractions h3 span{
    font-size: 7.625rem;
    font-weight: 250;
    margin-right: 30px;
}

main .attractions .shop h3 span{
    color: #ef90b9;
}

main .attractions .outdoor h3 span{
    color: #5ac0c9;
}

main .attractions .shop{
    margin-bottom: 154px;
}

main .attractions ul{
    display: flex;
    flex-wrap: wrap;
    row-gap: 66px;
    column-gap: 2.495%;
}

main .attractions ul li{
    width: 31.67%;
}

main .attractions ul li img{
    border-radius: 60px 0 60px 0;
    margin-bottom: 18px;
}

main .attractions ul li h4{
    font-size: 3.2rem;
    line-height: 1.142857;
    display: inline;
    vertical-align: middle;
}

main .attractions .shop ul li h4{
    color: #ef90b9;
}

main .attractions .outdoor ul li h4{
    color: #5ac0c9;
}

main .attractions ul li h4 span{
    font-size: 2.0rem;
}

main .attractions ul li h4 small{
    font-size: 2.0rem;
    line-height: 1.35;
    display: block;
    margin-top: 3px;
}

main .attractions ul li p{
    line-height: 1.6875;
    margin-top: 5px;
}



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

#wrapper{
    background-image: url("../img/common/bg02.png"), url("../img/common/bg03.png");
    background-repeat: no-repeat, no-repeat;
    background-position: top -28.933vw left, top 312.4vw right;
}

main{
    padding: 21.6vw 0 27.467vw;
}

main .attractions{
    width: 86.979167vw;
}

main .attractions h1{
    font-size: 12.2vw;
    line-height: 0.6;
    max-width: 86.979167vw;
    margin: 0 auto 70vw;
    padding-bottom: 8vw;
    background: url("../img/department/huki01.svg") no-repeat center bottom;
    background-size: auto 2.4vw;
}

main .attractions h1 small{
    font-size: 5vw;
    line-height: 1;
    margin-top: 3vw;
}

main .attractions .lead{
    width: 100%;
    margin-bottom: 13.33vw;
}

main .attractions .lead::before{
    background: url("../img/attractions/sp/illust01.png") no-repeat center;
    background-size: contain;
    width: 100vw;
    height: 67.0588vw;
    top: -63vw;
    left: 0;
}

main .attractions .lead h2{
    font-size: 7.4vw;
    margin-bottom: 1.6vw;
}

main .attractions h3{
    font-size: 7.6vw;
    margin-bottom: 8vw;
}

main .attractions h3 span{
    font-size: 12vw;
    margin: 0 0 1vw;
    display: block;
}

main .attractions .shop{
    margin-bottom: 20.533vw;
}

main .attractions ul{
    row-gap: 17.6vw;
    column-gap: 0;
}

main .attractions ul li{
    width: 100%;
}

main .attractions ul li img{
    width: 100%;
    border-radius: 8vw 0 8vw 0;
    margin-bottom: 2.4vw;
}

main .attractions ul li h4{
    font-size: 6.4vw;
}

main .attractions ul li h4 span{
    font-size: 4vw;
}

main .attractions ul li h4 small{
    font-size: 4vw;
    margin-top: 0.4vw;
}

main .attractions ul li p{
    margin-top: 0.67vw;
}

}