html {
    scroll-behavior: smooth;
}

.for-sp {
    display: none;
}

.top {
    position: relative;
    max-width: 100vw;
    width: 100%;
}

.mainvisual {
    width: 100%;
    height: auto;
}

.topmenu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2;
}

.nav {
    display: flex;
    margin-top: 5px;
}

.nav li {
    list-style: none;
    margin-right: 5px;
}

.nav li:hover {
    opacity: 0.5
}

.exp {
    display: flex;
    position: absolute;
    bottom: -80px;
    width: 100%;
    z-index: 3;
    padding-left: 79px;
}

.exp img {
    width: 150px;
    height: 150px;
}

.balloon-1,
.balloon-2 {
    transition: all 0.5s;
}

.balloon-1:hover,
.balloon-2:hover {
    transform: scale(1.2);
}

.balloon-2 {
    margin-left: 79px;
}

.welcome {
    background: url(../img/welcomeback.png);
    background-size: 1000px 667px;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: 122px;
    width: 1000px;
    height: 667px;
    position: relative;
}

.welcome p {
    font-size: 48px;
    color: #43dfef;
    padding-top: 70px;
    padding-left: 120px;
}

.welcome-smile {
    position: absolute;
    top: 0;
    right: 0;
}

.slogan {
    width: 750px;
    height: auto;
    margin-top: 100px;
    margin-left: 65px;
    margin-bottom: 20px;
}

.secondvisual {
    display: flex;
    justify-content: space-around;
}

.secondvisual-txt {
    font-size: 24px;
    margin-top: 30px;
}

.sctxt2 {
    margin-top: 30px;
}

.secondvisual-photo {
    width: 728px;
    height: 485px;
}

.newstitle {
    position: relative;
    background: #43dfef;
}

.news-toptitle {
    margin: 0 auto;
    margin-top: 100px;
    padding: 10px;
}

.bluedragon {
    position: absolute;
    right: 0;
    top: 2330px;
}

.news-article li {
    font-size: 30px;
    margin-left: 220px;
}

.news-article li span {
    font-size: 18px;
    margin-left: 30px;
}

.article1 {
    margin-top: 60px;
}

.article1,
.article2,
.article3,
.article4,
.article5 {
    margin-bottom: 15px;
    transition: all 0.5s;
}

.news-article li a {
    text-decoration: underline;
}

.article1:hover a,
.article2:hover a,
.article3:hover a,
.article4:hover a,
.article5:hover a {
    text-decoration: none;
}

.readmore-1,
.viewmenu,
.readmore-2 {
    width: 250px;
    height: 31px;
    margin: 0 auto;
    margin-right: 60px;
    transition: all 0.5s;
}

.readmore-1:hover,
.viewmenu:hover,
.readmore-2:hover {
    background-color: #43dfef;
}

.menutitle {
    position: relative;
    background: #ffffc5;
}

.menu-toptitle {
    margin: 0 auto;
    margin-top: 260px;
    padding: 10px;
}

.reddragon {
    position: absolute;
    top: 2917px;
}

.menutext1 {
    margin-top: 70px;
    margin-left: 220px;
    margin-right: 220px;
    font-size: 24px;
}

.menutext2 {
    margin-top: 20px;
    margin-left: 220px;
    margin-right: 220px;
    font-size: 24px;
}

.exa-menu {
    display: flex;
}

.exa-menu1,
.exa-menu2 {
    text-align: center;
    margin-top: 80px;
    margin-left: 260px;
}

.besttitle {
    position: relative;
    background: #43dfef;
}

.best-toptitle {
    margin: 0 auto;
    margin-top: 250px;
    padding: 10px;
}

.witchgirl1,
.witchgirl2 {
    position: absolute;
}

.witchgirl1 {
    top: 4088px;
    left: 40px;
}

.witchgirl2 {
    top: 4126px;
    right: 40px;
}

.bestnovel {
    display: flex;
    justify-content: space-around;
}

.bestnovel h3 {
    font-size: 36px;
}

.new,
.ranking,
.good {
    transition: all 0.5s
}

.new:hover,
.ranking:hover,
.good:hover {
    transform: scale(1.1);
}

.others {
    font-size: 14px;
    padding-left: 180px;
}

.bestnovel a {
    text-decoration: none;
}

.new-novel,
.novel-ranking,
.good-novel {
    text-align: center;
    margin-top: 80px;
}

.new,
.good {
    margin-top: 60px;
    margin-bottom: 21px;
}

.good {
    width: 220px;
    height: 311px;
}

.readmore-2 {
    margin-top: 40px;
}

.accesstitle {
    background: #ffffc5;
}

.access-toptitle {
    margin: 0 auto;
    margin-top: 100px;
    padding: 10px;
}

.access-txt-map {
    display: flex;
    justify-content: space-around;
    margin-top: 70px;
}

.access-txt {
    margin-left: 40px;
}

.access-txt h3 {
    font-size: 33px;
}

.access-txt p {
    font-size: 22px;
}

.address,
.drc {
    margin-top: 15px;
}

.bysicle,
.under {
    margin-top: 25px;
}

.access-title2 {
    margin-top: 40px;
}

.car {
    margin-left: 22px;
}

.map {
    margin-right: 75px;
}

.faqtitle {
    background: #43dfef;
}

.faq-toptitle {
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 60px;
    padding: 10px;
}

.q-a {
    background-color: #fff;
}

.q-ablock {
    width: 750px;
    margin: 20px auto;
}

.q-abox {
    margin-bottom: 20px;
}

.q-abox .q {
    background-color: #014897;
    border: 1px solid #014897;
    padding: 20px 25px;
    position: relative;
    cursor: pointer;
    color: #fff;
}

.toggle_icon {
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 20px;
    height: 20px;
    margin-top: -15px;
}

.toggle_icon:before {
    position: absolute;
    content: "▼";
    margin: auto;
    box-sizing: border-box;
    vertical-align: middle;
}

.q.open .toggle_icon:before {
    position: absolute;
    content: "ー";
    margin: auto;
    box-sizing: border-box;
    vertical-align: middle;
}

.q-abox .a {
    display: none;
    padding: 25px 30px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    background: #fff;
}

.q_txt {
    display: block;
    padding-left: 35px;
    position: relative;
    line-height: 1.5;
    font-size: 20px;
}

.q_txt::before {
    position: absolute;
    left: 0;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.a_txt {
    display: block;
    padding-left: 35px;
    position: relative;
    line-height: 1.5;
}

.a_txt::before {
    position: absolute;
    left: 0;
    color: #de0000;
    font-size: 20px;
    font-weight: bold;
}

.sns1-2 {
    display: flex;
    justify-content: space-around;
}

.instagram,
.X {
    text-align: center;
    margin-top: 50px;
}

.instagram {
    margin-left: 100px;
}

.X {
    margin-right: 100px;
}

.sns3 {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-left: 330px;
}

.instagram p,
.X p {
    font-size: 24px;
}

.sns3 p {
    margin-top: 58px;
    font-size: 24px;
}


.insta-icon,
.X-icon,
.line {
    width: 150px;
    height: 150px;
}

.insta-icon,
.X-icon {
    margin-top: 15px;
}

.line {
    margin-bottom: 50px;
}

.gotop {
    scroll-behavior: smooth;
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
}

.gotop a {
    display: block;
    text-decoration: none;
}

footer {
    background-color: #2a71a3;
    color: #fff;
}

.footer-shopname {
    margin: 0 auto;
    padding-top: 30px;
}

.tel,
.footermenu {
    text-align: center;
    margin-top: 30px;
}

.footermenu a {
    text-decoration: none;
}


.copylight {
    font-size: 11px;
    text-align: right;
    margin-right: 25px;
    margin-top: 20px;
}


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

    .for-pc {
        display: none;
    }

    .top {
        width: 100vw;
        height: 100%;
    }

    .mainvisual-sp {
        width: 100%;
        height: 240px;
    }


}