html { scroll-behavior: smooth;}
.wrapper{
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
a:hover{opacity: 1;}
#top footer{
    background-color: #fff7dd;
}
footer p{
    background-color:#e50113;
    text-align: center;
    color: #fff;
    font-size: 1.5rem;
    padding-bottom:2rem;
    padding-top: 2rem;
    letter-spacing: 0.1em;
}
.gototop{
    position: sticky;
    left:calc(100% - 90px);
    bottom: 0px;
    width: 90px;
    z-index: 1000;
}
@media screen and (max-width: 768px){
    .gototop{
        width: 17vw;
        left:calc(100% - 17vw);
    }
}

main{
    background-image: url(../img/bg.webp);
    background-repeat: repeat-y;
}

#top main{
    position: relative;
    padding-top: 0;
    background-color: #fff7dd;
}


.logo{position:fixed;top:1.5rem;left: 2rem;z-index:100000;}

#sp-menu{display: none;}
#pc-menu{display: block;}

header nav{
    background-color: #e50113;
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 10000;
    transition: .8s;
    font-weight: bold;
}
/*
#top nav{
    top: -100px;
}
#top nav.top-show{
    top:0;
}
*/
header nav .wrapper>ul{
    display: flex;
    justify-content: center;
    position: relative;
    min-width: 1200px;
}
header nav li{
    font-size: 1.5rem;
    box-sizing:content-box;
}
header nav .wrapper>ul>li{
    display: table;
}
header nav .wrapper>ul>li span{
    color: #fff;
    font-weight: bold;
    display: table-cell;
}
header nav li:last-child{
    border-right: none;
}
header nav li a{
    color: #fff;
    display: block;
    padding-right: 3.5rem;
    padding-left: 3.5rem;
    letter-spacing: .05em;
    padding-bottom: 10px;
    position: relative;
}
header nav .wrapper>ul li{
    position: relative;
}
header nav .wrapper>ul li a::before {
background: #fff;
content: '';
width: 100%;
height: 3px;
position: absolute;
left: 0;
bottom: 0px;
margin: auto;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .3s;
transform-origin: center top;
}
header nav .wrapper>ul li.hassub>a::before {
    content: none;
}
header nav .wrapper>ul li.hassub a::before {
    background: #ea535e;
}
header nav .wrapper>ul li.nav_saga.hassub a::before {
    background: #5c8234;
}
header nav .wrapper>ul li.nav_nagasaki.hassub a::before {
    background: #dc5310;
}
header nav .wrapper>ul li a:hover::before {
transform-origin: left top;
transform: scale(1, 1);
transform-origin: center top;
}

header nav .img{
    position: absolute;
    display: none;
}
header nav .img.left{
    left: -40px;
    top: -20px;
}
header nav .img.right{
    right: -150px;
    top: -40px;
}
@media screen and (min-width: 1280px){
    header nav .img{
        display: block;
    }
}
header nav .submenu{
    display: none;
    position: absolute;
    left: 0;
    top: 34px;
    width: calc(100% - 3px);
}
header nav .submenu li{border: none;background-color: #ea535e;}
header nav .submenu li a{
    display: block;
    text-align: center;
    color: #fff;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 2px solid #fff;
    padding-right: 0;
    padding-left: 0;
    font-size: 1.35rem;
}
.hassub .submenu li{background-color: #ea535e;}
.submenu li a:hover{background-color: #fff;}
.hassub .submenu li a:hover{color: #e50113;}

.nav_saga .submenu li{background-color: #5c8234;}
.nav_nagasaki .submenu li{background-color: #dc5310;}

.nav_saga .submenu li a:hover{color: #5c8234;}
.nav_nagasaki .submenu li a:hover{color: #dc5310;}




#fvArea{
    width: 100%;
    padding-top: 9rem;
    overflow: hidden;
}
#fvArea img{
    width: 100%;
}
#fvArea>div{
    position: relative;
}
#fvArea>div>div{
    position: absolute;
}

#fvArea>div.pcOnly .maincopy{
    right: 1vw;
    top: 8vw;
    width: 11.5vw;
}
#fvArea>div.pcOnly .subcopy{
    right: 12.5vw;
    top: 8vw;
    width: 6vw;
}
#fvArea>div.pcOnly .logowest{
    left: 8vw;
    top: 10vw;
    width: 7.8vw;
}
#fvArea>div.pcOnly .logoquest{
    left: 6.5vw;
    top: 25vw;
    width: 31.4vw;
}

/*ヘッダーテキスト*/
#headtxt{
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 4rem;
    letter-spacing: 0.1em;
    font-weight: bold;
}
#headtxt .schedule{
    margin-bottom: 4rem;
}
#headtxt strong{
    font-size: 200%;
    font-weight: normal;
}
#headtxt h3{
    font-size: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}
#headtxt p{
    font-size: 2rem;
    font-weight: bold;
}

@media screen and (max-width: 768px){
    /*ヘッダーテキスト*/
    #headtxt h3{
        font-size: 2rem;
    }
    #headtxt{
        text-align: center;
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
    #headtxt .schedule{
        margin-bottom: 4rem;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    #headtxt strong{
        font-size: 200%;
        font-weight: normal;
    }
    #headtxt p{
        font-size: 1.5rem;
    }
    #fvArea>div.spOnly .maincopy{
        left: 11vw;
        top: 5vw;
        width: 19.9vw;
    }
    #fvArea>div.spOnly .subcopy{
        left: 2.5vw;
        top: 5vw;
        width: 9vw;
    }
    #fvArea>div.spOnly .logowest{
        right: 4vw;
        top: 5vw;
        width: 14.3vw;
    }
    #fvArea>div.spOnly .logoquest{
        left: 19vw;
        top: 70vw;
        width: 66.9vw;
    }
}

/*ニュース*/
#news{
    padding-top: 3rem;
    padding-bottom: 5rem;
    margin-bottom: 5rem;
}
#news .wrapper>div{
    width: 25%;
}
#news .wrapper{
    display: flex;
    justify-content: space-between;
}
#news h2{
    font-size: 3rem;
    letter-spacing: 0.1em;
}
#news .wrapper .eng{
    font-size: 1.5rem;
}
#news .wrapper>div p{
    font-size: 1.75rem;
    margin-bottom: 2rem;
    font-weight: bold;
    line-height: 2.75rem;
    letter-spacing: 0.1em;
}

#news article{
    /*overflow-y: scroll;*/
    /*height: 20rem;*/
    width: 73%;
    margin-top: 10px;
}
/*
#news article::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
#news article::-webkit-scrollbar-thumb {
    background: #f00;
}
#news article::-webkit-scrollbar-track {
    background: #534d4d;
}
*/
#news dl{
    display: flex;
    border-bottom: 1px solid #666;
    font-weight: bold;
}

#news dl:first-child{
    border-top: 1px solid #666;
}
#news dt,#news dd{
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
    padding-bottom: 2rem;
    padding-top: 2rem;
    padding-right: 1rem;
}
#news dt{
    margin-right: 4rem;
}
#news a{
    color: #e50113;
}

#photoimg{
    position: relative;
    overflow: hidden;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
#photoimg ul{
    top: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    width: max-content;
    animation: moven 40s infinite linear;
}
#photoimg li{
    overflow: hidden;
    width:400px;
    margin-right: 5rem;
    transform: rotate(-10deg);
    animation: purun 2s ease-in-out infinite;
}
@keyframes moven{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}
@keyframes purun{
    0%{
        transform: rotate(-10deg);
    }
    20%{
        transform: rotate(5deg);
    }
    100%{
        transform: rotate(-10deg);
    }
}
@media screen and (max-width: 768px){
    #photoimg{
        padding-top: 1rem;
    }
    #photoimg li{
        width:60vw;
        margin-right: 8vw;
    }
}



@media screen and (max-width: 768px){
    #news{
        padding-top: 3rem;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
    #news h2{
        font-size: 2.5rem;
    }
    #news .wrapper{
        display: block;
    }
    #news .wrapper>div{
        width: 98%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #news .wrapper>div p{
        font-size: 1.5rem;
        margin-bottom: 2rem;
        font-weight: bold;
        line-height: 2.5rem;
    }
    #news article{
        width: 96%;
        margin-left: auto;
        margin-right: auto;
        /*height: 30rem;*/
        height: auto;
    }
    #news dl{
        display: block;
        margin-bottom: 0;
    }
    #news dt{
        margin-bottom: 0rem;
        padding: 0;
        padding-top: 1rem;
        padding-bottom: 0.75rem;
    }
    #news dd{
        margin: 0;
        padding: 0;
        padding-bottom: 1rem;
    }
}

/*topics*/
#topics{
    overflow: hidden;
    margin-bottom: 5rem;
    mask-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20vw);
}
#topics h2{
    font-size: 3rem;
    margin-bottom: 1rem;
    transform: translateX(22%);
    letter-spacing: 0.05em;
}
#topics .wrapper>div{
    transform: translateX(22%);
    width: auto;
    
}
#topics .wrapper>div>div{
    background-image: url(../img/bg_tile.png);
    padding: 3rem;
    width: 200%;
}
#topics ul.pu_content{
    display: flex;
    width: max-content;
    margin-left: -100px;
    
}
#topics ul.pu_content li{
    padding-right: 3rem;
}

#topics nav{
    font-size: 2.5rem;
    transform: translateX(85%);
    margin-top: -4rem;
    letter-spacing: 0.1em;
}
#topics nav button{
    all: unset;
}
#topics span{
    display: inline-block;
    width: 3rem;
    text-align: justify;
}
@media screen and (max-width: 768px){
    /*topics*/
    #topics{
        mask-image: none;
    }
    #topics h2{
        transform: translateX(15%);
        margin-bottom: 0;
    }
    #topics .wrapper>div{
        transform: translateX(15%);
    }
    #topics .wrapper>div>div{
        background-image: url(../img/bg_tile.png);
        padding: 3rem;
    }
    #topics ul.pu_content{
        display: flex;
        width: max-content;
        margin-left: -70px;
    }
    #topics ul.pu_content li{
        padding-right: 3rem;
        width: 250px;
        transition: 1s;
    }
    #topics ul.pu_content li img{
        width: 100%;
    }

    #topics nav{
        font-size: 2rem;
        transform: translateX(60%);
        margin-top: -3rem;
    }
    #topics nav button{
        all: unset;
    }
    #topics span{
        width: 2rem;
    }
}



#map{
    width: 100%;
    position: relative;
    padding-bottom: 4rem;
    text-align: center;
}
@media screen and (max-width: 768px){
    #map{
        display: none;
    }
}


#corp{
    padding: 3rem;
    margin-top: 3rem;
}
#corp h2{
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: 0.1em;
}
.gov{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3rem;
}
.company{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

#corp li{
    margin-bottom: 2rem;
    overflow: hidden;
    margin-left: 2rem;
    margin-right: 2rem;
}
#corp li a img{transition: 0.5s;}
#corp li a:hover img{transform: scale(1.05);}

#corp .gov li{
    width: 24%;
}



.pcOnly{
    display: block;
}
.spOnly{
    display: none;
}

@media screen and (max-width: 768px){
    .pcOnly{
        display: none;
    }
    .spOnly{
        display: block;
    }
    .menubtn{
        position: fixed;
        top:1.5rem;
        right: 2rem;
        z-index: 100000;
        width: 7vw;
        height: 7vw;
    }
    .menubtn ul{
        position: relative;
    }
    .menubtn li{
        position: absolute;
        top: 0;
        left: 0;
        display: none;
    }
    .menubtn li.sp-open{
        display: block;
    }
    header .logo{
        width: 13%;
    }
    .wrapper{
        width: 94%;
        margin-right: auto;
        margin-left: auto;
    }
    
    footer p{
        font-size: 1rem;
        padding: 2rem 0 5rem;
    }
    footer .gototop img{width: 15%;}
    
    #fvArea{
        text-align: center;
        margin-top: -3rem;
    }
    #fvArea h1{margin-bottom: 2rem;}
    #fvArea .schedule{margin-bottom: 4rem;}
    

    #pc-menu{display: none;} 
    #sp-menu{display: block;} 
    header nav#sp-menu{
        display: block;
        width: 100%;
        min-width: auto;
        top: -150vh;
        padding-top: 6rem;
        height: 100vh;
        padding-bottom: 10rem;
        z-index: 10000;
    }
    header nav#sp-menu.show{
        top: 0;
    }
    header nav#sp-menu .wrapper{
        overflow-y: scroll;
        height: 100%;
    }
    header nav#sp-menu .wrapper::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    header nav#sp-menu .wrapper::-webkit-scrollbar-thumb {
        background: none;
    }
    header nav#sp-menu .wrapper::-webkit-scrollbar-track {
        background: none;
    }
    header nav#sp-menu .wrapper>ul{
        display: block;
        justify-content: center;
        position: relative;
        min-width: auto;
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        border-top: 1px solid #fff;
        padding-top: 1rem;
    }
    header nav .wrapper>ul>li{
        border-right: none;
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 1.5rem;
        display: block;
        color: #fff;
        text-align: center;
        border-bottom: 1px solid #fff;
        padding-bottom: 1rem;
    }
    
    header nav li a{
        padding: 0;
    }
    header nav .wrapper>ul li a::before {
    background: none;
    }
    header nav .wrapper>ul li.nav_kumamoto a::before,
    header nav .wrapper>ul li.nav_miyazaki a::before,
    header nav .wrapper>ul li.nav_kagoshima a::before
    {
        background: none;
    }
    header nav .wrapper>ul li a:hover::before {
    transform: none;
    }
    
    header nav .submenu{
        border-top: 1px dashed #fff;
        margin-top: 1rem;
        margin-bottom: 0.75rem;
        position: relative;
        display: block;
        top: 0;
    }
    header nav .wrapper .submenu li{
        background:none;
        width: auto;
        border: none;
        margin-bottom: 0;
        margin-top: 1.25rem;
        display:block;
    }
    header nav .wrapper .nav_saga .submenu li,
    header nav .wrapper .nav_nagasaki .submenu li{
        display:inline-block;
        border-right: 1px solid #fff;
    }
    header nav .submenu li a{
        padding: 0rem 2rem;
        font-size: 1.25rem;
        border-top: none;
    }
    header nav .img{display: none;}

    #corp .gov{
        display: block;
        width: 100%;
    }
    #corp .gov li{
        width: 70%;
        margin: 0 auto 1rem;
    }
    #corp .company{
        justify-content:space-between;
    }
    #corp .company li{
        width: 48%;
        margin: 0;
        margin-bottom: 1rem;
    }
 }



#gowest{
    width: 30%;
    margin: 8rem auto 0rem;
}
#gowest img{
    width: 100%;
}
@media screen and (max-width: 768px){
    #gowest{
        width: 80%;
        margin: 5rem auto 0rem;
    }
}



 /*--------下層ページ*/
.special .cont_header::before {background-color: #fcde7f;}
.kumamoto .cont_header::before {background-color: #ea535e;}
.kumamoto #spots h3{color: #ea535e;}
.miyazaki .cont_header::before {background-color:#6bbc6e;}
.miyazaki #spots h3{color: #6bbc6e;}
.kagoshima .cont_header::before {background-color: #1bb8ce;}
.kagoshima #spots h3{color: #1bb8ce;}


main{
    position: relative;
    padding-top: 10rem;
}
 #spots{
    width: 1080px;
 }
 #spots li i{
    display: inline-block;
    margin-right: 5px;
 }

#spots .pleft{
    display: flex;
    justify-content: space-between;
}
#spots .pright{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.photo{
    width: 560px;
    position: relative;
}
.photo i{
    position: absolute;
    top: -60px;
    left: -20px;
    animation: icon-anime infinite ease-in-out 2s;
    width: 190px;
    z-index:1000;
}

@keyframes icon-anime {
    0%{
        transform: rotate(-5deg);
    }
    50%{
        transform: rotate(20deg);
    }
    100%{
        transform: rotate(-5deg);
    }
    
}
.info{
    width: 460px;
    position: relative;
}
.checkin{
    position: absolute;
    top: -3.5rem;
    right: 10px;
    width: 100px;
    animation: icon-anime-check infinite ease-in-out 1.5s;
    z-index:1000;
}


@keyframes icon-anime-check {
    0%{
        transform: rotate(-10deg);
    }
    5%{
        transform: rotate(10deg);
    }
    10%{
        transform: rotate(-5deg);
    }
    15%{
        transform: rotate(5deg);
    }
    20%{
        transform: rotate(-3deg);
    }
    25%{
        transform: rotate(3deg);
    }
    50%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(0deg);
    }
    
}

#spots article{
    padding: 5rem 0;
}
#spots article h2{
    font-size: 2.5rem;
    letter-spacing: 0.15em;
}
#spots article h3{
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.15em;
}
#spots article p{
    font-size: 1.5rem;
    line-height: 2em;
}
#spots article ul{
    margin-top: 2rem;
}
#spots article li{
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

#spots .column2{
    display: flex;
    justify-content: space-between;
}
#spots .column2 article{
    width: 48%;
}
.pup .photo{
    margin-bottom: 3rem;
    width: 100%;
}
.pup .info{
    width: 100%;
}

.cont_header{
    position: relative;
    padding-top: 2rem;
}
.cont_header::before {
    content: '';
    position: absolute;
    top: -10rem;
    bottom: 19rem;
    left: 0;
    right: 0;
    transform: skewY(-5deg);
    z-index: -1;
}
.cont_header .map{
    position: absolute;
    right: 5rem;
    top: 3rem;
}
.cont_header p{
    transform: skewY(-5deg) translateY(-38px) translateX(20px);
    font-size: 1.5rem;
    margin-bottom: 5rem;
}

.special .cont_header::before {
    bottom: 15rem;
}


@media screen and (max-width: 768px){
    header{
        height: 6rem;
        background-color: #e50113;
        position: fixed;
        z-index: 100000;
        top: 0;
        left: 0;
        width: 100%;
    }
    main{
        position: relative;
        padding-top: 8rem;
    }
    #spots{
        width: 94%;
        margin-left: auto;
        margin-right: auto;
    }
    #spots li i{
        display: inline-block;
        margin-right: 5px;
    }

    #spots .pleft{
        display: block;
    }
    #spots .pright{
        display: block;
    }
    .photo{
        width: 100%;
        margin-bottom: 3rem;
    }
    .photo img{
        width: 100%;
    }
    .photo i{
        top: -60px;
        left: -20px;
        width:40vw;
    }
    .info{
        width: 100%;
    }
    .checkin{
        position: absolute;
        top: -3.5rem;
        right: 0px;
        width: 80px;
    }
    #spots article{
        padding: 5rem 0;
    }
    #spots article h2{
        font-size: 2rem;
    }
    #spots article h3{
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }
    #spots article p{
        font-size: 1.5rem;
        line-height: 2em;
    }
    #spots article ul{
        margin-top: 2rem;
    }
    #spots article li{
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    #spots .column2{
        display: block;
        justify-content: space-between;
    }
    #spots .column2 article{
        width:100%;
    }
    .pup .photo{
        margin-bottom: 3rem;
        width: 100%;
    }
    .pup .info{
        width: 100%;
    }

    .cont_header{
        position: relative;
        padding-top: 1rem;
        width: 100%;
        padding-left:2%;
        padding-right:2%;
    }
    .cont_header::before {
        content: '';
        position: absolute;
        top: -10rem;
        bottom: 28rem;
        left: 0;
        right: 0;
        transform: skewY(-5deg);
        z-index: -1;
    }
    .cont_header h1{
        width: 80%;
    }
    .special .cont_header h1{
        width: 100%;
    }
    .cont_header .map{
        right: 1rem;
        top: 15rem;
        width: 33%;
    }
    .cont_header p{
        margin-bottom: 5rem;
        width: 65%;
        margin-top: 6rem;
        margin-left: -1rem;
    }
}






/*個別調整css*/
.fs75{
    font-size: 75%;
    letter-spacing: 0;
    line-height: 1 !important;
}
.fs65{
    font-size: 65%;
    letter-spacing: 0;
    line-height: 1 !important;
}
.fs60{
    font-size: 60%;
    letter-spacing: 0;
    line-height: 1 !important;
}