:root {

    /* 文字間 */
    --lsp-120: 0.12em;
    --lsp-100: 0.1em;
    --lsp-80: 0.08em;
    --lsp-60: 0.06em;
    --lsp-50: 0.05em;
    --lsp-40: 0.04em;
    --lsp-30: 0.03em;
    --lsp-20: 0.02em;
    --lsp-10: 0.01em;

    /* 行送り */
    --lh-22: 2.2;
    --lh-18: 1.8;
    --lh-16: 1.6;

    /* 太さ */
    --fw-400: 400;
    --fw-500: 500;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

    /* カラー */
    --black: #231815;
    --pink: #EA68A2;
    --red: #DC0023;
    --blue: #005FAA;
    --l-blue: #37B9F0;
    --d-blue: #699BCD;
    --yellow: #FFE10A;
    --d-yellow: #F0AA00;
    --l-gray: #F5F5F5;
    --r-gray: #AAAAAA;
    --l-green: #69D2DC;
    --r-green: #2D914B;
    --orange: #E64B2D;

    /* フォント */
    --ff-noto: "Noto Sans JP", sans-serif;
    --ff-zmaru: "Zen Maru Gothic", sans-serif;
    --ff-mplus: "M PLUS Rounded 1c", sans-serif;
    --ff-waku: 'MyFont', sans-serif;
    --ff-showa: 'MyFont2', serif;
    
}

@font-face {
    font-family: 'MyFont';
    src: url('../font/mini-wakuwaku-maru.otf') format('truetype');
    }

@font-face {
    font-family: 'MyFont2';
    src: url('../font/gomarice_syouwa_retro_pop.ttf') format('truetype');
    }

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--ff-noto);
    color: var(--black);
    letter-spacing: var(--lsp-50);
    font-weight: var(--fw-500);
    background-image: url(../images/mv-bg.png);
    background-position: center 14px;
}

a {
    display: block;
}

img {
    display: block;
}

.l-view {
    display: none;
}

.sp-view {
    display: none;
}

.spm-view {
    display: none;
}

.btn a {
    display: block;
    width: 100%;
}

.info-btn {
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
    transition: 0.3s;
}

.info-btn:hover {
    transition: 0.3s;
    opacity: 0.7;
}

.info-btn::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background-color: #E6B400;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: -1;
}

.info-btn a {
    padding: 48px 20px;
    color: var(--blue);
    font-size: 2.8rem;
    border-radius: 100px;
    background-color: var(--yellow);
    font-weight: var(--fw-900);
    font-family: var(--ff-zmaru);
    letter-spacing: var(--lsp-80);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.info-btn a::after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(../images/btn-arrow.png);
    background-size: contain;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.info-btn a img {
    margin-left: 25px;
}

.more-btn {
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
    cursor: pointer;
}

.more-btn p {
    width: 100%;
    color: #fff;
    background-color: var(--pink);
    padding: 50px;
    border-radius: 100px;
    font-size: 2.8rem;
    font-family: var(--ff-zmaru);
    letter-spacing: var(--lsp-80);
    font-weight: var(--fw-700);
    text-align: center;
    position: relative;
}

.more-btn::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background-color: #C85087;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: -1;
}

.more-btn p::after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(../images/more-arrow.png);
    background-size: contain;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width:1600px) {
    html {
        font-size: 57%;
    }

    .l-view {
        display: block;
    }

    .info-btn {
        width: 550px;
    }

    .info-btn a {
        padding: 40px 20px;
    }

    .info-btn::after {
        bottom: -12px;
    }

    .more-btn {
        width: 550px;
    }

    .more-btn::after {
        bottom: -12px;
    }


}

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

    .info-btn a::after {
        right: 25px;
    }

}


@media screen and (max-width:1200px) {
    html {
        font-size: 52%;
    }
}

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

    html {
        font-size: 62.5%;
    }

    body {
        background-image: url(../images/mv-bg_sp.png);
        background-position: center 10px;
    }

    .pc-view {
        display: none;
    }

    .sp-view {
        display: block;
    }

    .info-btn {
        width: 100%;
    }

    .info-btn a {
        font-size: 1.6rem;
        line-height: var(--lh-16);
        text-align: center;
        padding: 15px;
    }

    .info-btn a::after {
        width: 25px;
        height: 25px;
        right: 25px;
    }

    .info-btn a img {
        width: 25px;
        height: 25px;
    }

    .info-btn::after {
        bottom: -8px;
    }

    .more-btn {
        width: 100%;
    }

    .more-btn p {
        font-size: 1.6rem;
        padding: 28px;
    }

    .more-btn p::after {
        width: 25px;
        height: 25px;
    }

    .more-btn::after {
        bottom: -8px;
    }
    

    
}

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

    .spm-view {
        display: block;
    }

}



.loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    background-color: var(--pink);
    padding-left: 30vw;
    padding-right: 30vw;
	transition: all ease-in-out 0.5s;
}

/* ローディング完了後 */
.loading.js-loaded {
    opacity: 0;
    visibility: hidden;
}

.loading-wrap {
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translateX(-50%);
}

.loading-wrap .ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
}

.loading-wrap .ribbon img {
    margin-left: 3.5vw;
    margin-right: 3.5vw;
    width: 8vw;
}

.loading .dots {
    font-family: 'MyFont', sans-serif;
    font-size: 6.5rem;
    color: #fff;
    text-align: center;
    letter-spacing: var(--lsp-40);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading .dots div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.loading .dots p {
    margin-right: 10px;
}

.loading .dots div span {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    opacity: 0;
}

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

    .loading {
        padding-left: 13vw;
        padding-right: 13vw;
    }

    .loading .dots {
        font-size: 3rem;
        letter-spacing: var(--lsp-40);
    }

    .loading .dots div span {
        width: 7px;
        height: 7px;
        margin-left: 4px;
        margin-right: 4px;
    }

    .loading-wrap .ribbon img {
        width: 18vw;
        max-width: 80px;
    }

}

/* MV */

.mv {
    border-top: 25px solid var(--pink);
    height: 100vh;
    position: relative;
}

.mv-ttl {
    max-width: 758px;
    max-height: 278px;
    width: 39.5vw;
    position: absolute;
    top: 25vw;
    left: 12vw;
}

.mv-ttl h1 img {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.mv-ttl .ribbon {
    position: absolute;
    right: -0.5vw;
    top: -15vw;
    width: 8vw;
    transition: 3s;
    animation: mvrbnAnime 2s infinite linear alternate;
}

@keyframes mvrbnAnime {
    0% {
        transform: rotateZ(-5deg);
    }

    100% {
        transform: rotateZ(5deg);
    }
}

/* キャラクター */

.mv-images {
    max-width: 636.7px;
    max-height: 690px;
    width: 33.16%;
    aspect-ratio: 106/115;
    /* background-color: tan; */
    position: absolute;
    right: 10.4vw;
    top: 4.5vw;
    /* background-image: url(../images/mv-mix.png); */
    /* background-repeat: no-repeat; */
    /* background-size: contain; */
    z-index: 10;
}
.mv-images.highlight {
    z-index: 0;
}

.mv-images div {
    position: absolute;
    opacity: 0;
    /* width: 0; */
  }

  .mv-images div img {
    width: 100%;
  }
  
  /* バツ丸 */
  .mv-images .chara1 {
    top: 1.5vw;
    left: 4.2vw;
    z-index: 1;
    width: 37.38%;
  }
  
  /* ポチャッコ */
  .mv-images .chara2 {
    top: 0;
    right: 7vw;
    z-index: 1;
    width: 36.9%;
  }
  
  /* ハンギョドン */
  .mv-images .chara3 {
    top: 11vw;
    left: 0;
    z-index: 2;
    width: 38%;
  }
  
  /* たあぼう */
  .mv-images .chara4 {
    top: 12vw;
    left: 10vw;
    z-index: 3;
    width: 36.7%;
  }
  
  /* ペックル */
  .mv-images .chara5 {
    top: 10.5vw;
    right: 0;
    z-index: 2;
    width: 44.4%;
  }

  /* ケロッピ */
  .mv-images .chara6 {
    bottom: 0;
    left: 2.2vw;
    z-index: 4;
    width: 29.6%;
  }
  
  /* タキシードサム */
  .mv-images .chara7 {
    bottom: 12px;
    right: 8px;
    z-index: 4;
    width: 45.8%;
  }
  
  /* キティ */
  .mv-images .chara8 {
    bottom: 0.8vw;
    left: 9.3vw;
    z-index: 5;
    width: 40.6%;
  }

.mv-30th {
    position: absolute;
    top: 3vw;
    right: 4vw;
    width: 5.6vw;
}

.mv-30th img {
    width: 100%;
}

.mv-info {
    background-color: var(--pink);
    padding: 4vw 7.5vw;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.mv-info img {
    width: 100%;
}

.flower {
    position: absolute;
    bottom: 30px;
    left: 10vw;
    max-width: 142px;
    width: 7.3vw;
    animation: mvflowerAnime 2s alternate infinite;
}

@keyframes mvflowerAnime {
    0% {
        transform: rotateZ(-5deg);
    }

    100% {
        transform: rotateZ(5deg);
    }
}

.flower img {
    width: 100%;
}

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

    .mv-images {
        top: 3vw;
    }

    .mv-ttl {
        top: 25.5vw;
    }

}

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

    .mv-images {
        top: 7vw;
    }

    .mv-ttl {
        top: 28vw;
    }

}

@media screen and (max-width:768px) {
    
    .mv {
        border-top: 15px solid var(--pink);
        height: auto;
    }

    .sp-column {
        display: flex;
        flex-direction: column;
    }


    .mv-ttl {
        position: relative;
        width: 70.6vw;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10.5vw;
        top: auto;
        left: auto;
    }

    .mv-ttl h1 img {
        position: static;
    }

    .mv-ttl .ribbon {
        top: -5vw;
        width: 15vw;
    }

    .mv-images {
        position: relative;
        width: 78.74%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 7.5vw;
        margin-top: 9vw;
        top: auto;
        right: auto;
    }

      /* バツ丸 */
    .mv-images .chara1 {
        top: 4%;
        left: 12.5%;
    }

      /* ポチャッコ */
    .mv-images .chara2 {
        right: 21.5%;
    }

    /* ハンギョドン */
    .mv-images .chara3 {
        top: 30.1%;
    }

    /* たあぼう */
    .mv-images .chara4 {
        top: 33%;
        left: 31%;
    }

      /* ペックル */
    .mv-images .chara5 {
        top: 29.2%;
    }

      /* ケロッピ */
    .mv-images .chara6 {
        left: 6.8%;
    }

      /* タキシードサム */
    .mv-images .chara7 {
        bottom: 2.5%;
        right: 1%;
    }

      /* キティ */
    .mv-images .chara8 {
        bottom: 2.5%;
        left: 28.5%;
    }

    .mv-30th {
        top: 4vw;
        right: 4.5vw;
        width: 11.5vw;
    }

    .mv-info {
        position: static;
        padding: 7vw 6.5vw 10.5vw;
    }

    .flower {
        bottom: 20px;
        left: auto;
        right: 10vw;
        width: 19.7vw;
    }

}

/* menu */

.menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 34vw;
    height: 100vh;
    background-color: var(--l-blue);
    transition: 0.7s;
    z-index: 555;
}

.menu.open {
    left: 0;
    transition: 0.5s;
}

.hamburger {
    width: 110px;
    height: 100px;
    background-color: var(--black);
    border-radius: 0 0 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    cursor: pointer;
}

.hamburger span {
    content: "";
    display: block;
    width: 55px;
    height: 8px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
}

.hamburger span:nth-child(1) {
    top: 28px;
    left: 28px;
    transition: 0.5s;
}
.hamburger span:nth-child(2) {
    top: 46px;
    left: 28px;
    transition: 0.5s;
}
.hamburger span:nth-child(3) {
    top: 64px;
    left: 28px;
    transition: 0.5s;
}

.hamburger.close span:nth-child(1) {
    transform: rotate(45deg);
    transition: 0.5s;
    top: 46px;
}
.hamburger.close span:nth-child(2) {
    opacity: 0;
    transition: 0.5s;
}
.hamburger.close span:nth-child(3) {
    transform: rotate(-45deg);
    top: 46px;
    transition: 0.5s;
}

.menu .menu-lists {
    padding: 160px 16% 0 23%;
}

.menu .menu-lists ul li {
    margin-bottom: 55px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.3s;
}

.menu .menu-lists ul li::after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(../images/menu-arrow_b.png);
    background-repeat: no-repeat;
    background-size: contain;
    transition: 0.3s;
}

.menu .menu-lists ul li a {
    color: #fff;
    font-family: var(--ff-showa);
    font-size: 4rem;
    letter-spacing: var(--lsp-50);
    transition: 0.3s;
    width: 100%;
}

.menu .menu-lists ul li:hover a {
    color: var(--yellow);
    transition: 0.3s;
}

.menu .menu-lists ul li:hover {
    color: var(--yellow);
    transition: 0.3s;
}

.menu .menu-lists ul li:hover::after {
    background-image: url(../images/menu-arrow.png);
    background-repeat: no-repeat;
}

.menu .menu-lists ul li a span {
    font-family: var(--ff-mplus);
    font-weight: 900;
    font-size: 2rem;
    letter-spacing: var(--lsp-50);
    display: block;
    margin-bottom: 15px;
}

@media screen and (max-width:1800px) {
    .menu .menu-lists {
        padding: 160px 10% 0 10%;
    }
}

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

    .menu .menu-lists {
        padding: 130px 10% 0 10%;
    }

    .menu .menu-lists ul li {
        margin-bottom: 40px;
    }

}

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

    .hamburger {
        width: 55px;
        height: 50px;
        border-radius: 0 0 10px 0;
    }

    .hamburger span {
        width: 30px;
        height: 4px;
    }

    .hamburger span:nth-child(1) {
        top: 14px;
        left: 13px;
    }
    .hamburger span:nth-child(2) {
        top: 23px;
        left: 13px;
    }
    .hamburger span:nth-child(3) {
        top: 32px;
        left: 13px;
    }

    .hamburger.close span:nth-child(1) {
        top: 24px;
    }

    .hamburger.close span:nth-child(3) {
        top: 24px;
    }

    .menu {
        width: 100%;
    }

    .menu .menu-lists {
        padding: 29vw 6.5% 0 6.5%;
    }

    .menu .menu-lists ul li {
        margin-bottom: 35px;
    }

    .menu .menu-lists ul li::after {
        width: 30px;
        height: 30px;
    }

    .menu .menu-lists ul li a {
        font-size: 3.2rem;
    }

    .menu .menu-lists ul li a span {
        font-size: 1.6rem;
        margin-bottom: 10px;
    }
    

}

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

    .menu .menu-lists ul li a {
        font-size: 2.4rem;
    }

    .menu .menu-lists ul li a span {
        font-size: 1.4rem;
        margin-bottom: 5px;
    }

}

/* 共通 */

section {
    position: relative;
}

section h2 {
    position: relative;
    z-index: 100;
}

section h2 img {
    margin-left: auto;
    margin-right: auto;
}

.pd-group::before {
    content: "";
    width: 55%;
    height: 55vw;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
}

.bg-group::before {
    content: "";
    width: 55%;
    height: 55vw;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
}

.group-wrap {
    position: relative;
    z-index: 100;
}

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

    .pd-group::before {
        width: 93.3%;
        height: 80vw;
        top: -20vw;
    }

    .bg-group::before {
        width: 93.3%;
        height: 80vw;
        top: -20vw;
        background-image: url(../images/notice-bg_bf_sp.png);
    }

}


/* about */

.about {
    padding: 250px 7.8vw 270px;
    background-image: url(../images/about-bg.jpg);
}

.about-group {
    background-color: var(--red);
    border-radius: 30px;
    position: relative;
    padding: 0 9.8% 140px;
}

.about-group::before {
    background-image: url(../images/about-bg_bf.png);
}

.about h2 {
    margin-bottom: 60px;
}

.about h2 img {
    width: 260px;
}

.about .wrap {
    position: relative;
    z-index: 100;
    text-align: center;
    color: #fff;
    margin-bottom: 100px;
}

.about .wrap h3 {
    font-family: var(--ff-mplus);
    font-size: 5rem;
    line-height: var(--lh-16);
    letter-spacing: var(--lsp-60);
    margin-bottom: 40px;
}

.about .wrap h3 .smaller {
    font-size: 4rem;
    letter-spacing: var(--lsp-60);
}

.about .wrap p {
    font-size: 2.8rem;
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-22);
    font-weight: var(--fw-700);
}

.about-slider {
    width: 100%;
}

.about-slider li img {
    width: 90%;
    max-width: 220px;
}

.pictures .about-pic1 {
    position: absolute;
    top: -62px;
    left: 10vw;
}

.pictures .about-pic2 {
    position: absolute;
    bottom: -18px;
    right: 6vw;
}

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

    .about .wrap h3 {
        font-size: 4rem;
    }

    .about .wrap p {
        font-size: 2.4rem;
    }

}


@media screen and (max-width:768px) {
    .about {
        padding: 140px 0 160px;
    }

    .about-group {
        border-radius: 0;
        padding: 0 0 26.6vw;
    }

    .about-group::before {
        background-image: url(../images/about-bg_bf_sp.png);
        top: -18vw;
    }

    .about h2 {
        margin-bottom: 35px;
    }

    .about h2 img {
        width: 36.2vw;
        min-width: 136px;
    }

    .about .wrap {
        margin-bottom: 40px;
        padding: 0 6.5% 0;
    }

    .about .wrap h3 {
        font-size: 2.8rem;
    }

    .about .wrap h3 .smaller {
        font-size: 2.2rem;
    }

    .about .wrap p {
        font-size: 1.6rem;
        text-align: left;
    }

    .pictures .about-pic1 {
        top: auto;
        bottom: -4vw;
        left: 6.5vw;
        width: 32vw;
    }

    .pictures .about-pic2 {
        bottom: -11px;
        right: 6.5vw;
        width: 28.8vw;
    }
}

/* notice */

.notice {
    background-color: var(--blue);
    padding-left: 7.8vw;
    padding-right: 7.8vw;
    padding-bottom: 180px;
}

.notice::before {
    background-image: url(../images/notice-bg_bf.png);
}

.notice h2 {
    margin-bottom: 30px;
}

.notice h2 img {
    width: 284px;
}

.caution {
    width: 47vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 140px;
}

.caution img {
    width: 100%;
}

.notice .wrap {
    width: 100%;
    background-color: #fff;
    border-radius: 30px;
    position: relative;
    padding: 140px 8.3vw 120px;
}

.notice .wrap1 {
    margin-bottom: 140px;
}

.notice .wrap h3 {
    position: absolute;
    top: -2vw;
    left: 50%;
    transform: translateX(-50%);
    width: 35vw;
}

.notice .wrap h3 img {
    width: 100%;
}

.notice .wrap .desc {
    font-size: 2.8rem;
    line-height: var(--lh-22);
    letter-spacing: var(--lsp-50);
    text-align: center;
    font-weight: var(--fw-500);
    margin-bottom: 60px;
}

.notice .wrap .desc .small {
    font-size: 2.0rem;
}

.notice .wrap .desc .red {
    color: var(--red);
    font-weight: var(--fw-900);
}

.notice .wrap .term {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

.notice .wrap .term dl {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
    width: 100%;
}

.notice .wrap .term dl dt {
    background-color: var(--black);
    color: #fff;
    padding: 15px 40px;
    width: 330px;
    font-size: 2.2rem;
    font-weight: var(--fw-700);
    letter-spacing: var(--lsp-50);
    margin-right: 40px;
    text-align: center;
    line-height: var(--lh-16);
}

.notice .wrap .term dl dd {
    font-size: 2.4rem;
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-22);
}

.notice .info-btn {
    margin-bottom: 60px;
}

.notice .points1 {
    background-color: var(--l-gray);
    padding: 80px 80px 35px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 50px;
}

.notice .points1 ul li {
    color: var(--r-gray);
    font-size: 1.8rem;
    letter-spacing: var(--lsp-20);
    line-height: var(--lh-22);
    margin-bottom: 12px;
    text-indent: -1.5em;
    position: relative;
}

.notice .points1 ul li::before {
    content: "※";
    margin-right: 10px;
}

.notice .wrap .points2 {
    background-color: var(--l-gray);
    padding: 40px 80px;
}

.notice .points2 ul li {
    color: var(--r-gray);
    font-size: 1.8rem;
    letter-spacing: var(--lsp-20);
    line-height: var(--lh-22);
    text-indent: -1em;
    position: relative;
}

.notice .points2 ul li::before {
    content: "※";
    margin-right: 10px;
}

@media screen and (max-width:1700px) {
    .notice .wrap .term {
        width: 90%;
    }

    .notice .wrap .term dl dt {
        width: 35%;
    }

    .notice .wrap .term dl dd {
        width: 65%;
    }
}

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

    .notice {
        padding-left: 6.5vw;
        padding-right: 6.5vw;
        padding-bottom: 80px;
    }

    .notice .wrap {
        padding: 16vw 7.6vw 60px;
        border-radius: 10px;
    }

    .notice .wrap1 {
        margin-bottom: 78px;
    }

    .notice h2 img {
        width: 39.4vw;
    }

    .caution {
        width: 100%;
        margin-bottom: 70px;
    }

    .notice .wrap h3 {
        width: 74.5vw;
        top: -6.5vw;
    }

    .notice .wrap .desc {
        font-size: 1.5rem;
        margin-bottom: 25px;
    }

    .notice .wrap .desc .small {
        font-size: 1.2rem;
    }
    
    .notice .wrap .term {
        width: 100%;
        margin-bottom: 35px;
    }

    .notice .wrap .term dl {
        flex-direction: column;
    }

    .notice .wrap .term dl dt {
        font-size: 1.4rem;
        width: 100%;
        padding: 5px 40px;
        margin-bottom: 10px;
        margin-right: 0;
    }

    .notice .wrap .term dl dd {
        width: 100%;
        font-size: 1.4rem;
    }

    .notice .points1 {
        flex-direction: column;
        background-color: #fff;
        padding: 0 0 0 14px;

    }

    .notice .points1 ul li {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .notice .wrap .points2 {
        background-color: #fff;
        padding: 0 0 0 14px;
    }

    .notice .points2 ul li {
        font-size: 1.2rem;
    }


}

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

    .notice .wrap {
        padding: 16vw 7vw 60px;
    }

}

/* items */

.items {
    /* background-color: #fff; */
    padding: 270px 7.8vw 180px;
}

.items section {
    border-radius: 30px;
    padding-left: 7.2vw;
    padding-right: 7.2vw;
    padding-bottom: 180px;
    margin-bottom: 270px;
}

.items h2 img {
    width: 254px;    
}


/* items1 */

.items1 {
    background-color: var(--pink);
}

.items1-group::before {
    background-image: url(../images/items1-bg_bf.png);
}

/* items2 */

.items2 {
    background-color: var(--l-blue);
}

.items2-group::before {
    background-image: url(../images/items2-bg_bf.png);
}

/* items3 */

.items .items3 {
    margin-bottom: 0;
    background-color: var(--l-green);
}

.items3-group::before {
    background-image: url(../images/items3-bg_bf.png);
}

.items .items3 .wrap {
    margin-bottom: 100px;
}

.items .items3 .wrap .inner {
    display: none;
}

.items .pd-group h2 {
    margin-bottom: 50px;
}

.items .pd-group .intro {
    position: relative;
    z-index: 100;
    color: #fff;
    margin-bottom: 100px;
}

.items .pd-group .intro h3 {
    font-size: 3.5rem;
    font-family: var(--ff-mplus);
    font-weight: var(--fw-900);
    line-height: var(--lh-18);
    letter-spacing: var(--lsp-80);
    text-align: center;
    margin-bottom: 40px;
}

.items .pd-group .intro img {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

.items1 .pd-group .intro img {
    width: 35.5vw;
}

.items .pd-group .intro p {
    font-size: 2.6rem;
    font-weight: var(--fw-700);
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-22);
    text-align: center;
}

.items .pd-group .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 100px 60px;
}

.items1 .pd-group .wrap {
    margin-bottom: 120px;
}

.items .pd-group .wrap .inner {
    max-width: 380px;
    position: relative;
}

.items .pd-group .wrap .inner a {
    display: block;
}

.items .pd-group .wrap .inner a .slides {
    background-color: #fff;
    border-radius: 20px;
    margin-bottom: 40px;
    aspect-ratio: 38 / 47;
}

.items .pd-group .wrap .inner a .slides div {
    border-radius: 20px;
    overflow: hidden;
}

.items .pd-group .wrap .inner a .slides div ul li img {
    width: 100%;
}

.items .pd-group .wrap .inner a h4 {
    font-size: 2.4rem;
    font-weight: var(--fw-900);
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-16);
    text-align: center;
    color: #fff;
    margin-bottom: 5px;
}

.items .pd-group .wrap .inner a .price {
    color: #fff;
    font-size: 3.5rem;
    font-family: var(--ff-mplus);
    font-weight: var(--fw-800);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
}

.items .pd-group .wrap .inner a .price .tax {
    font-size: 2rem;
    font-weight: var(--fw-900);
    letter-spacing: var(--lsp-50);
    display: block;
    margin-left: 5px;
}

.items .pd-group .wrap .inner a .size {
    font-size: 1.6rem;
    letter-spacing: var(--lsp-50);
    color: #fff;
    text-align: center;
    position: absolute;
    bottom: 92px;
    left: 50%;
    transform: translateX(-50%);
}

/* buyボタン共通 */
.items .pd-group .wrap .inner a .buy,
.items .pd-group .wrap2 .inner a .buy {
    background-color: var(--yellow);
    font-size: 2.8rem;
    color: var(--pink);
    font-family: var(--ff-zmaru);
    letter-spacing: var(--lsp-80);
    font-weight: var(--fw-900);
    padding: 18px;
    border-radius: 50px;
    width: 250px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /* ↓ボタン公開時、opacity: 1;に変更をしてください */
    opacity: 1;
}

/* items1 */

.items1 .pd-group .wrap .inner a .buy {
    color: var(--pink);
}

/* items2 */

.items2 .pd-group .wrap .inner a .buy {
    color: var(--l-blue);
}

/* items3 */

.items3 .pd-group .wrap .inner a .buy {
    color: var(--l-green);
}

/* slick調整 */

.slick-dots {
    bottom: -15px;
}

.slick-slide img {
    width: 100%;
}

.slick-dots li {
    margin: 0;
}

.slick-dots li button:before {
    font-size: 0;
    color: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translateX(-50%)translateY(-50%);
    border-radius: 50%;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
}

/* items1 */

.items1 .slick-dots li button:before {
    background-color: var(--pink);
}

.items1 .slick-dots li.slick-active button:before {
    background-color: var(--pink);
}

/* items2 */

.items2 .slick-dots li button:before {
    background-color: var(--l-blue);
}

.items2 .slick-dots li.slick-active button:before {
    background-color: var(--l-blue);
}

/* items3 */

.items3 .slick-dots li button:before {
    background-color: var(--l-green);
}

.items3 .slick-dots li.slick-active button:before {
    background-color: var(--l-green);
}


.items .pd-group .wrap2 {
    background-color: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 80px 6.2vw 120px;
    border-radius: 30px;
}

.items .pd-group .wrap2 .info {
    width: 52%;
}

.items .pd-group .wrap2 .info .ttl-img {
    width: 100%;
    margin-bottom: 40px;
}

.items .pd-group .wrap2 .info .ttl-img img {
    width: 100%;
}

.items .pd-group .wrap2 .info .sub-ttl {
    font-size: 3.6rem;
    letter-spacing: var(--lsp-10);
    line-height: var(--lh-16);
    font-family: var(--ff-mplus);
    font-weight: var(--fw-900);
    margin-bottom: 20px;
}

.items .pd-group .wrap2 .info .sub-ttl .pink {
    color: var(--pink);
}

.items .pd-group .wrap2 .info .texts {
    font-size: 2.4rem;
    line-height: var(--lh-22);
    letter-spacing: var(--lsp-10);
    margin-bottom: 15px;
}

.items .pd-group .wrap2 .info .caption {
    font-size: 1.8rem;
    letter-spacing: var(--lsp-50);
    color: var(--r-gray);
}


.items .pd-group .wrap2 .slides2 {
    width: 36%;
}

.items .pd-group .wrap2 .slides2 .inner a .slides {
    margin-bottom: 30px;
}

.items .pd-group .wrap2 .slides2 .inner a h4 {
    font-size: 2.4rem;
    letter-spacing: var(--lsp-50);
    margin-bottom: 10px;
    text-align: center;
    font-weight: var(--fw-900);
}

.items .pd-group .wrap2 .slides2 .inner a .price {
    font-size: 3.5rem;
    font-family: var(--ff-mplus);
    font-weight: var(--fw-800);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.items .pd-group .wrap2 .slides2 .inner a .price .tax {
    font-size: 2rem;
    font-weight: var(--fw-900);
    display: block;
    margin-left: 6px;
}

.items .pd-group .wrap2 .slides2 .inner a .size {
    font-size: 1.6rem;
    letter-spacing: var(--lsp-50);
    margin-bottom: 25px;
    text-align: center;
}

.items .pd-group .wrap2 .slides2 .slick-dotted.slick-slider {
    border-radius: 20px;
    overflow: hidden;
}

.items .pd-group .wrap2 .slides2 .slick-slide {
    overflow: hidden;
}

.items .pd-group .wrap2 .slides2 .slick-dots {
    bottom: 20px;
}

.items .pd-group .wrap2 .slides2 .slick-dots li.slick-active button:before {
    color: var(--pink);
}

.items .pd-group .wrap2 .slides2 .slick-dots li button:before {
    color: #fff;
    opacity: 1;
}


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

    .items .pd-group .wrap .inner a .buy, .items .pd-group .wrap2 .inner a .buy {
        width: 80%;
    }

    .items .pd-group .intro img {
        width: 35vw;
    }

}


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

    .items {
        padding: 160px 0 80px;
    }

    .items section {
        border-radius: 0;
        padding-left: 6.5vw;
        padding-right: 6.5vw;
        padding-bottom: 80px;
        margin-bottom: 180px;
    }

    .items h2 img {
        width: 35.2vw;
        min-width: 132px;
    }

    .items .pd-group h2 {
        margin-bottom: 20px;
    }

    .items1-group::before {
        background-image: url(../images/items1-bg_bf_sp.png);
    }
    .items2-group::before {
        background-image: url(../images/items2-bg_bf_sp.png);
    }
    .items3-group::before {
        background-image: url(../images/items3-bg_bf_sp.png);
    }

    .items .pd-group .intro {
        margin-bottom: 50px;
    }

    .items .pd-group .intro h3 {
        font-size: 2rem;
    }

    .items1 .pd-group .intro img {
        width: 100%;
    }

    .items .pd-group .intro img {
        margin-bottom: 30px;
        width: 100%;
    }

    .items .pd-group .intro p {
        font-size: 1.5rem;
        font-weight: var(--fw-500);
        text-align: left;
    }

    .items .pd-group .wrap {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        grid-template-columns: auto;
        gap: 50px 20px;
    }

    .items .pd-group .wrap .inner {
        width: 40.5%;
        max-width: none;
        min-width: 152px;
    }

    .items .pd-group .wrap .inner a .slides {
        border-radius: 10px;
        margin-bottom: 25px;
    }

    .items .pd-group .wrap .inner a h4 {
        font-size: 1.4rem;
    }

    .items .pd-group .wrap .inner a .price {
        font-size: 2.2rem;
        margin-bottom: 35px;
    }

    .items .pd-group .wrap .inner a .price .tax {
        font-size: 1.4rem;
    }

    .items .pd-group .wrap .inner a .size {
        font-size: 1.2rem;
        bottom: 46px;
    }

    .items .pd-group .wrap .inner a .buy, .items .pd-group .wrap2 .inner a .buy {
        font-size: 1.6rem;
        padding: 8px;
        width: 100%;
    }

    /* slick調整 */

    .slick-dots {
        bottom: -15px;
    }

    .slick-dots li {
        width: 10px;
        height: 10px;
    }

    .slick-dots li button {
        width: 10px;
        height: 10px;
    }

    .items .slick-dots li button:before {
        width: 4px;
        height: 4px;
    }

    .items .pd-group .wrap2 {
        flex-direction: column;
        padding: 18.5vw 7.5vw 60px;
        position: relative;
        border-radius: 10px;
    }

    .items .pd-group .wrap2 .info {
        width: 100%;
        margin-bottom: 35px;
    }

    .items .pd-group .wrap2 .info .ttl-img {
        width: 85%;
        position: absolute;
        top: -12vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .items .pd-group .wrap2 .info .sub-ttl {
        font-size: 2rem;
        text-align: center;
        line-height: var(--lh-16);
    }

    .items .pd-group .wrap2 .info .texts {
        font-size: 1.5rem;
    }

    .items .pd-group .wrap2 .info .caption {
        font-size: 1.2rem;
    }

    .items .pd-group .wrap2 .slides2 {
        width: 100%;
    }

    .items .pd-group .wrap2 .slides2 .inner a .slides {
        width: 40.5vw;
        min-width: 152px;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 38 / 47;
    }

    .items .pd-group .wrap2 .slides2 .slick-dotted.slick-slider {
        border-radius: 10px;
    }

    .items .pd-group .wrap2 .slides2 .inner a .buy {
        width: 40.5vw;
        min-width: 152px;
        margin-left: auto;
        margin-right: auto;
    }

    .items .pd-group .wrap2 .slides2 .inner a h4 {
        font-size: 1.4rem;
    }

    .items .pd-group .wrap2 .slides2 .inner a .price {
        font-size: 2.2rem;
    }

    .items .pd-group .wrap2 .slides2 .inner a .price .tax {
        font-size: 1.4rem;
    }

    .items .pd-group .wrap2 .slides2 .inner a .size {
        font-size: 1.2rem;
    }

}

/* profile */

.profile {
    background-image: url(../images/about-bg.jpg);
    padding: 250px 7.8vw 270px;
}

.profile .pd-group {
    padding: 0 8vw 180px;
}

.profile h2 {
    margin-bottom: 110px;
}

.profile h2 img {
    width: 336px;
}

.profile .wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 100px 4vw;
    position: relative;
    z-index: 10;
}

.profile .wrap .inner {
    width: 19vw;
    max-width: 380px;
    background-color: #fff;
    padding: 60px 50px 70px;
    border-radius: 20px;
}

.profile .wrap .inner img {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
}

.profile .wrap .inner h3 {
    font-size: 2.8rem;
    font-family: var(--ff-mplus);
    letter-spacing: var(--lsp-30);
    font-weight: var(--fw-900);
    margin-bottom: 20px;
    text-align: center;
}

.profile .wrap .inner:nth-child(1) {
    padding-top: 60px;
}

.profile .wrap .inner:nth-child(1) img {
    width: 9.3vw;
}

.profile .wrap .inner:nth-child(2) {
    padding-top: 70px;
}

.profile .wrap .inner:nth-child(2) img {
    width: 9.8vw;
}

.profile .wrap .inner:nth-child(3) {
    padding-top: 55px;
}

.profile .wrap .inner:nth-child(3) img {
    width: 10.6vw;
}

.profile .wrap .inner:nth-child(4) img {
    width: 8.5vw;
}

.profile .wrap .inner:nth-child(5) img {
    width: 8.5vw;
}

.profile .wrap .inner:nth-child(6) img {
    width: 8.5vw;
}

.profile .wrap .inner:nth-child(7) img {
    width: 8.5vw;
}

.profile .wrap .inner:nth-child(8) img {
    width: 9.6vw;
}


.profile .wrap .inner:nth-child(1) h3 {
    color: var(--red);
} 
.profile .wrap .inner:nth-child(2) h3 {
    color: var(--r-green);
} 
.profile .wrap .inner:nth-child(3) h3 {
    color: var(--blue);
} 
.profile .wrap .inner:nth-child(4) h3 {
    color: var(--orange);
} 
.profile .wrap .inner:nth-child(5) h3 {
    color: var(--yellow);
} 
.profile .wrap .inner:nth-child(6) h3 {
    color: var(--d-blue);
} 
.profile .wrap .inner:nth-child(7) h3 {
    color: var(--pink);
} 
.profile .wrap .inner:nth-child(8) h3 {
    color: var(--d-yellow);
} 


.profile .wrap .inner p {
    font-size: 1.8rem;
    line-height: var(--lh-22);
    letter-spacing: var(--lsp-30);
}

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

    .profile .wrap .inner {
        padding: 60px 25px 70px;
    }

}

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

    .profile .wrap .inner {
        width: 30vw;
    }

}

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

    .profile {
        padding: 140px 0 160px;
    }

    .profile .pd-group {
        padding: 0 6.5vw 80px;
    }

    .profile h2 {
        margin-bottom: 54px;
    }

    .profile h2 img {
        width: 50vw;
        min-width: 176px;
    }

    .profile .wrap {
        flex-direction: column;
        gap: 35px 0;
    }

    .profile .wrap .inner {
        width: 100%;
        max-width: none;
        padding: 60px 25px 50px;
        border-radius: 10px;
        padding-top: 35px;
    }

    .profile .wrap .inner {
        padding-top: 35px;
    }

    .profile .wrap .inner:nth-child(1),
    .profile .wrap .inner:nth-child(2) {
        padding-top: 35px;
    }



    .profile .wrap .inner:nth-child(1) img {
        width: 36vw;
    }

    .profile .wrap .inner:nth-child(2) img {
        width: 37.3vw;
    }

    .profile .wrap .inner:nth-child(3) {
        padding-top: 35px;
    }

    .profile .wrap .inner:nth-child(3) img {
        width: 40vw;
    }
    .profile .wrap .inner:nth-child(4) img,
    .profile .wrap .inner:nth-child(5) img,
    .profile .wrap .inner:nth-child(6) img,
    .profile .wrap .inner:nth-child(7) img

     {
        width: 32vw;
    }

    .profile .wrap .inner:nth-child(8) img {
        width: 36vw;
    }

    .profile .wrap .inner h3 {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    .profile .wrap .inner p {
        font-size: 1.4rem;
        text-align: center;
    }

}

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

    .profile .wrap .inner {
        padding: 35px 20px 50px;
    }

}

/* information */

.information {
    background-color: var(--blue);
    padding-left: 7.8vw;
    padding-right: 7.8vw;
    padding-bottom: 180px;
    margin-bottom: 260px;
}

.information::before {
    background-image: url(../images/notice-bg_bf.png);
}

.information h2 {
    margin-bottom: 140px;
}

.information h2 img {
    width: 542px;
}

.information .wrap {
    background-color: #fff;
    border-radius: 30px;
    padding: 120px 8vw;
}

.information .wrap .inner {
    margin-bottom: 80px;
    padding-bottom: 100px;
    border-bottom: 5px dotted var(--r-gray);
}

.information .wrap .inner:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.information .wrap .inner h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 40px;
    font-size: 3.5rem;
    font-weight: var(--fw-900);
    color: var(--blue);
    letter-spacing: var(--lsp-50);
    font-family: var(--ff-mplus);
}

.information .wrap .inner h3 img {
    margin-right: 20px;
}

.information .wrap .inner .lists {
    margin-bottom: 60px;
}

.information .wrap .inner .lists ul {
    margin-bottom: 50px;
}

.information .wrap .inner li {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

.information .wrap .inner li:before {
    content: "※";
    margin-right: 10px;
}

.information .wrap .inner .lists ul li {
    font-size: 2rem;
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-22);
    margin-bottom: 15px;
}

.information .wrap .inner .lists ul li .red {
    color: var(--red);
    font-weight: var(--fw-900);
}

.information .wrap .inner .lists .info-btn {
    width: 550px;
    margin-right: auto;
    margin-left: 0;
}

.information .wrap .inner .lists .info-btn a {
    padding: 40px;
    font-size: 2.4rem;
    line-height: var(--lh-16);
}

.information .wrap .inner .texts li {
    font-size: 2rem;
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-22);
    margin-bottom: 25px;
}

.information .wrap .inner .texts li:last-child {
    margin-bottom: 0;
}

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

    .information .wrap .inner .lists .info-btn {
        width: 480px;
    }

    .information .wrap .inner .lists .info-btn a {
        padding: 30px;
    }

    .info-btn::after {
        bottom: -10px;
    }
}

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

    .information {
        padding-bottom: 80px;
        margin-bottom: 37vw;
    }

    .information::before {
        background-image: url(../images/notice-bg_bf_sp.png);
        top: -20vw;
    }

    .information h2 {
        margin-bottom: 50px;
    }

    .information h2 img {
        width: 74vw;
        min-width: 278px;
    }

    .information .wrap {
        border-radius: 10px;
        padding: 40px 7.5vw 60px;
    }

    .information .wrap .inner {
        padding-bottom: 50px;
        border-bottom: 4px dotted var(--r-gray);
        margin-bottom: 32px;
        position: relative;
    }

    .information .wrap .inner h3 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        line-height: var(--lh-16);
    }

    .information .wrap .inner h3 img {
        min-width: 20px;
        width: 20px;
        margin-right: 10px;
        line-height: var(--lh-16);
    }

    .information .wrap .inner .lists ul {
        margin-bottom: 25px;
    }

    .information .wrap .inner .lists ul li {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }

    .information .wrap .inner li:before {
        margin-right: 5px;
    }

    .information .wrap .inner .lists .info-btn {
        width: 100%;
    }

    .information .wrap .inner .lists .info-btn a {
        font-size: 1.6rem;
        padding: 15px;
    }

    .information .wrap .inner .lists {
        margin-bottom: 40px;
    }

    .information .wrap .inner .texts li {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }

}

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

    .information .wrap .inner {
        border-bottom: none;
        position: relative;
        padding-bottom: 0;
    }

    .information .wrap .inner::after {
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background-image: url(../images/info-dotted.png);
        background-repeat: repeat-x;
        background-position: center;
        margin-top: 50px;
        background-size: 8px;
    }

    .information .wrap .inner:last-child::after {
        display: none;
    }


}


/* footer */

footer {
    background-color: var(--pink);
    padding: 100px 0 120px;
    text-align: center;
    position: relative;
}

footer .logo {
    margin-bottom: 50px;
}

footer .logo img {
    margin: 0 auto;
}

footer .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 65px;
}

footer .wrap li {
    margin-left: 30px;
    margin-right: 30px;
}

footer .copy ul li {
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: var(--lsp-50);
    font-weight: var(--fw-400);
    color: #fff;
}

footer .copy ul li:nth-child(1) {
    margin-bottom: 25px;
}

.footer-images {
    position: absolute;
    top: -10.5vw;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
}

.footer-images img {
    width: 100%;
}

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

    footer {
        padding: 60px 0 140px;
    }

    .footer-images {
        width: 49%;
        top: -47vw;
    }

    footer .logo {
        margin-bottom: 30px;
    }

    footer .logo img {
        width: 123px;
    }

    footer .wrap {
        margin-bottom: 45px;
    }

    footer .wrap li:nth-child(1) img {
        width: 34px;
    }

    footer .wrap li:nth-child(2) img {
        width: 40px;
    }

    footer .wrap li:nth-child(3) img {
        width: 40px;
    }

    footer .copy ul li {
        font-size: 1.2rem;
    }

    footer .copy ul li:nth-child(1) {
        margin-bottom: 20px;
    }

}

/* ページトップ */

#pagetop {
    position: fixed;
    bottom: 30px;
    right: 20px;
    opacity: 0;
    transition: 0.3s;
    z-index: 100;
}

#pagetop.show {
    opacity: 1;
    transition: 0.3s;
}

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

    #pagetop {
        width: 18.5vw;
    }

    #pagetop img {
        width: 100%;
    }

}