@charset "utf-8";

/* ===== header ===== */
header.display-flex {
    justify-content: space-between;
    align-items: center;
    padding: 1% 8% 0;
}
header h1 {
    width: 20%;
    max-width: 140px;
}
.open-menu {
    width: 48%;
    max-width: 740px;
}
.open-btn {
    height: 100%;
}
.sub-menu {
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
}
.sub-menu li a {
    display: inline-block;
    color:#000;
    font-size:120%;
    text-decoration:none;
    position: relative;
    transition: .3s;
}
.sub-menu li a::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    content: '';
    width: 0;
    height: 1px;
    background-color: #000;
    transition: .3s;
    transform: translateX(-50%);
}
.sub-menu li a:hover::after {
    width: 100%;
}
.sub-menu li.sns-youtube img {
    width: 90px;
}
.sub-menu li.sns-x img {
    width: 24px;
}
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: block;
}
@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* scroll menu */

.dnone .sub-menu {
  display: block;
}
.dnone .sub-menu li a:hover::after {
}
.dnone .open-menu {
    position: fixed;
    top: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    display: block;
    cursor: pointer;
    transition: opacity 0.2s linear;
    z-index: 1000;
}
.dnone .open-btn span {
    display: block;
    float: left;
    clear: both;
    height: 4px;
    width: 40px;
    border-radius: 40px;
    background-color: #000;
    position: absolute;
    right: 3px;
    top: 3px;
    overflow: hidden;
    transition: all 0.4s ease;
}
.dnone .open-btn span:nth-child(1) {
    margin-top: 10px;
    z-index: 9;
}
.dnone .open-btn span:nth-child(2) {
    margin-top: 25px;
}

.dnone .open-btn span:nth-child(3) {
    margin-top: 40px;
}
.dnone .open-menu:before {
    height: 0;
    width: 0;
    opacity: 0;
    content: "";
    position: absolute;
    background-color: rgb(184 219 95 / 50%);
    border-radius: 50%;
    right: 0;
    top: 0;
    right: -160px;
    top: -160px;
}
.dnone .oppenned.open-menu:before {
    height: 430px;
    width: 400px;
    opacity: 1;
    animation: rotation 20s linear infinite;
}
@keyframes rotation {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

.dnone nav#g-navi {
    opacity: 0;  
}
.dnone .oppenned nav#g-navi {
    opacity: 1; 
}
.dnone .sub-menu {
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 18;
    overflow: hidden;
    width: 0;
    position: absolute;
    right: 0;
    top: 60px;
}
.dnone .oppenned .sub-menu {
    width: 220px;
}
.dnone .sub-menu li {
    display: block;
    text-align: right;
    height: auto;
    margin-right: -160px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.dnone .sub-menu li:nth-child(1) {
    -webkit-transition-delay: 0.05s;
}
.dnone .sub-menu li:nth-child(2) {
    -webkit-transition-delay: 0.10s;
}
.dnone .sub-menu li:nth-child(3) {
    -webkit-transition-delay: 0.15s;
}
.dnone .sub-menu li:nth-child(4) {
    -webkit-transition-delay: 0.20s;
}
.dnone .sub-menu li:nth-child(5) {
    -webkit-transition-delay: 0.25s;
}
.dnone .sub-menu li a {
    display: inline-block;
    font-size: 16px;
}
.dnone .oppenned .sub-menu li {
    margin: 18px 0;
}
.dnone .oppenned .open-btn span:nth-child(2) {
    overflow: visible;
}
.dnone .oppenned .open-btn span:nth-child(1),
.dnone .oppenned .open-btn span:nth-child(3) {
    z-index: 100;
    transform: rotate(45deg);
}
.dnone .oppenned .open-btn span:nth-child(1) {
    transform: rotate(45deg) translateY(12px) translateX(12px);
}
.dnone .oppenned .open-btn span:nth-child(2) {
    height: 400px;
    width: 400px;
    right: -160px;
    top: -160px;
    border-radius: 50%;
    background-color: #f8e945;
}
.dnone .oppenned .open-btn span:nth-child(3) {          
    transform: rotate(-45deg) translateY(-10px) translateX(10px);
}


/* movie */
.movie-cate {
    position: relative;
    overflow: hidden;
}
.video-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: -100;
    padding: 55% 0 0;
}
.video-box iframe {
    top: 0;
    left: 0;
}
/* wave */
.parallax > use {
    animation: move-forever 60s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -3s;
    animation-duration: 35s;
}
.parallax > use:nth-child(2) {
    animation-delay: 0;
    animation-duration: 60s;
}
.waveCate {
    width: 100%;
    padding: 11% 0 0;
    position: absolute;
}
.waveCate svg{
    transform: scaleY(0.2);
    position: absolute;
    top: 0;
    left: 0;
}
.waveCate.top {
    top: 0%;
    rotate: 180deg;
}
.waveCate.bottom {
    bottom: 0%;
}
.move .waveCate {
    top: 0%;
    rotate: 180deg;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/* ===== movie ===== */
.movie-cate .chara-img {
    bottom: -10%;
}
/* ===== container-first ===== */
.container-first {
    position: relative;
}
.container-first:before {
    background: url(../images/background_pink.png) left bottom no-repeat;
    background-size: contain;
    z-index: 1;
}
.content {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 8%;
    position: relative;
    z-index: 1;
}
.container-first h2 {
    color: #000;
    margin-bottom: 2%;
    text-align: center;
}
.container-first .inner {
    width: 100%;
    position: relative;
}
.container-first .inner li{
    position: relative;
}
.container-first .inner li:nth-child(odd){
    right: 1%;
}
.container-first .inner li:nth-child(even){
    left: 1%;
}
.container-info .inner {
    width: 98%;
    margin: auto;
    max-width: 1060px;
}

/* ===== catch-copy ===== */
.catch-copy {
    margin: 0 0 16%;
    width: 96%;
    max-width: 1600px;
    clear:both;
    position: relative;
    z-index: 100;
}
.catch-copy .catch-copy-img {
    max-width: 800px;
    width: 60%;
    height:auto;
    display: block;
    height: auto;
    margin-bottom: 100px;
    float:left;
    position: relative;
}
.catch-copy .catch-copy-img img {
    width: 100%;
}
.catch-copy .catch-copy-txt {
    width: 46%;
    margin-bottom: 12%;
    font-size: 2.5vw;
    font-weight: 600;
    letter-spacing: 8px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    float: right;
    clear:both;
    text-align: center;
}
.catch-copy .catch-copy-txt p {
    margin-bottom: 28%;
    padding: 10% 1%;
    background: rgb(255 255 255 / 90%);
}
.catch-copy .catch-copy-txt .imgdeco-illust6 {
    width: 128px;
    position: relative;
    right: 16%;
    opacity: 0;
}
.catch-copy .catch-copy-txt .imgdeco-illust6.moveAnm {
    animation-duration: .3s;
    animation-name: slideInAnm;
    animation-fill-mode: forwards;
}
@keyframes slideInAnm {
    from {
        opacity: 0;
        -webkit-transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.swiper-pagination-bullet-active {
    background: #f7ea5b!important;
}
/* ===== news ===== */
.news {
    padding: 0 0 18%;
    position: relative;
    z-index: 2;
    clear:both;
    overflow: hidden;
}
.news .news-box {
    display: flex;
    align-items: center;
    position: relative;
    background: #f2ed5e;
    margin-bottom: 1%;
    padding: 2%;
    clip-path: polygon(0% 0%, 100% 0, 100% 0%, 100% 20%, 98% 23%, 100% 25%, 100% 60%, 98.4% 62%, 100% 64%, 100% 85%, 98% 86%, 100% 88%, 100% 99%, 34% 98%, 0 100%, 0% 83%, 2% 81%, 0% 79%, 0% 36%, 1.4% 35%, 0% 33%);
}
.news .news-box figure {
    width: 40%;
    max-width: 200px;
    margin: 0;
    padding: 0;
    font-size: 0;
    transition: .2s;
    overflow: hidden;
}
.news .news-box figure img {
    transition-duration: 0.3s;
}
.news .news-box div {
    width: 70%;
    text-align: left;
    font-size: 24px;
    margin-left: 4%;
    transition: .2s;
}
.news a .news-box div {
    width: 64%;
}

.news .news-box div time {
    font-family: base-font;
}
.news .news-box div p {
    font-size: 26px;
   line-height: 28px;
}
.news .news-box.stickarrow:after {
    content: "";
    width: 40px;
    height: 8px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    transform: skew(45deg);
    position: relative;
    right: 0;
    transition: .2s;
}
.news a:hover > .stickarrow figure img {
    transform: scale(1.08);
}
.news a:hover > .stickarrow div {
    opacity: .7;
}
.news a:hover > .news-box.stickarrow:after {
    right: -2%;
}
.news .news-list {
    font-family: base-font;
    text-align: right;
    font-size: 24px;
}

/* ===== portalcharacter ===== */
.scroll-infinity-wrap {
    display: flex;
    overflow: hidden;
    position: absolute;
    bottom: 4%;
}
.scroll-infinity-list {
    display: flex;
    list-style: none;
    padding: 0;
    animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
}
.scroll-infinity-list li {
  width: calc(100vw / 9);
}
.scroll-infinity-list li > img {
  width: 100%;
}
/* ===== move(YouTube) ===== */
.move {
    padding: 12% 0 8%;
    position: relative;
    background: url(../images/contents_bg.jpg);
    background-size: cover;
}
.move .content {
    max-width: 720px;
    position: relative;
}
.move .content .inner {
    padding: 0 0 80%;
}

/* ===== container-info ===== */
.container-info {
    background: #f7bac9;
    padding: 4% 0 26%;
    position: relative;
    overflow: hidden;
}
.container-info:after {
    background: url(../images/background_green.png) left bottom no-repeat;
    background-size: contain;
    z-index: 10;
}
.container-info h2 span {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 44px;
    vertical-align: 4%;
}
.container-info p {
    font-size: 24px;
    margin-bottom: 6%;
}
.container-info .inner {
    align-content: center;
    position: relative;
    align-items: inherit;
}
.container-info .inner:not(:last-child) {
    margin-bottom: 16%;
}
.illust-img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.inner.cate1,
.inner.cate3 {
    flex-direction: row-reverse;
}
.inner .screen-img {
    position: relative;
    z-index: 5;
    width: 33%;
    max-width: 374px;
}
.inner .screen-img img {
    position: relative;
    top: 12%;
}
.inner.cate1 .screen-img,
.inner.cate3 .screen-img {
    margin-left: -3%;
}
.inner.cate2 .screen-img {
    margin-right: -3%;
}
.inner .screen-img.play-video {
    padding: 0px 0 53%;
    z-index: 50;
}
.inner .screen-img.play-video iframe {
    height: 100%!important;
    top: 12%;
}
.container-info .inner dl {
    position: relative;
    width: 56%;
    max-width: 618px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    padding: 4%;
    box-sizing: border-box;
}
.container-info .inner dl:after,
.container-info .inner dl:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.container-info .inner dl:before {
    background: #f8f8f8;
    height: 66%;
    top: 12%;
}
.inner dt, .inner dd {
    position: relative;
}
.inner dt {
    margin-bottom: 4%;
    font-size: 26px;
    color: #000;
    font-weight: 700;
}
.inner dd {
    font-size: 20px;
}
.inner.cate1 dl:before {
    clip-path: polygon(1% 42%, 0 0, 36% 2%, 73% 0, 100% 2%, 100% 34%, 98% 65%, 100% 98%, 71% 100%, 34% 98%, 2% 100%, 0 62%);
    left: 2%;
}
.inner.cate1 dl:after {
    background: url(../images/info_frame1.png) center no-repeat;
    background-size: contain;
    left: -2%;
}
.inner.cate1 .illust-img {
    width: 34%;
    bottom: -16%;
    left: -60%;
}
.inner.cate1 .illust-img img:first-child {
    width: 52%;
    max-width: 206px;
}
.inner.cate1 .illust-img img:last-child {
    width: 46%;
    max-width: 180px;
    margin-bottom: 3%;
}
.inner.cate2 dl:before {
    clip-path: polygon(1% 24%, 0 0, 28% 1%, 68% 0, 99% 2%, 100% 41%, 99% 74%, 100% 99%, 66% 100%, 22% 98%, 0 100%, 2% 66%);
    left: -6%;
}
.inner.cate2 dl:after {
    background: url(../images/info_frame2.png) center no-repeat;
    background-size: contain;
}
.inner.cate2 .illust-img {
    width: 32%;
    bottom: -26%;
    right: -70%;
}
.inner.cate2 .illust-img img:first-child {
    width: 61%;
    max-width: 255px;
}
.inner.cate2 .illust-img img:last-child {
    width: 37%;
    max-width: 156px;
    margin: 0 0 6% -6%;
}
.inner.cate3 dl:after {
    background: url(../images/info_frame3.png) center no-repeat;
    background-size: contain;
    left: -2%;
}
.inner.cate3 dl:before {
    clip-path: polygon(2% 29%, 0 1%, 31% 0, 68% 1%, 100% 0, 100% 28%, 98% 46%, 100% 72%, 100% 100%, 35% 99%, 1% 100%, 0 65%);
    left: 2%;
}
.inner.cate3 .illust-img {
    width: 32%;
    bottom: -32%;
    left: -64%;
}
.inner.cate3 .illust-img img {
    width: 100%;
    max-width: 393px;
}
/* ===== container-store ===== */
.container-store {
    background: #52aa80;
    padding: 8% 4% 6%;
    align-items: center;
    flex-wrap: wrap;
}
.trademark-text {
    text-align: center;
    font-size: 12px;
    color: #063e1e;
    margin-top: 2%;
}
.trademark-text li {
    text-align: left;
}
.app-icon {
    width: 50%;
    max-width: 656px;
}
.app-icon img {
    border-radius: 10%;
}
.app-information .display-flex {
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
    width: 72%;
    max-width: 360px;
    margin: 0 auto 4%;
}
.app-information {
    width: 50%;
}
.app-information h1 {
    max-width: 473px;
    width: 64%;
    margin: 0 auto 4%;
}
.app-information dt {
    width: 24%;
    max-width: 88px;
}
.app-information dd {
    width: 72%;
    max-width: 240px;
}
.app-information .link-store {
    width: 76%;
    margin: 0 auto 4%;
    max-width: 360px;
    justify-content: space-between;
}
.app-information .link-store li:first-child {
    width: 44%;
}
.app-information .link-store li:last-child {
    width: 54%;
}
/* ============== RESPONSIVENESS ============== */
@media screen and (min-width:1200px) {
    .catch-copy {
        margin: 0 auto 16%;
    }
    .inner.cate3 .illust-img {
        bottom: -36%;
    }
}
@media screen and (min-width:1480px) {
    .catch-copy .catch-copy-txt {
        font-size: 40px;
    }
    .inner.cate1 .illust-img {
        width: 40%;
        bottom: -22%;
        left: -86%;
    }
    .inner.cate2 .illust-img {
        width: 42%;
        bottom: -44%;
        right: -71%;
    }
    .inner.cate3 .illust-img {
        width: 393px;
        bottom: -40%;
        left: -79%;
    }

}
@media screen and (min-width:1560px) {
    .catch-copy .catch-copy-img {
        max-width: 880px;
    }
    .catch-copy .catch-copy-txt {
        left: -40px;
    }
    .scroll-infinity-list li {
      width: calc(100vw / 13);
    }
    .container-info {
        padding: 4% 0 22%;
    }
}

@media screen and (min-width:1001px) and (max-height:680px) {
    .catch-copy {
        width: 90%;
    }
    .catch-copy .catch-copy-img {
        width: 50%;
    }
}
@media screen and (min-width:641px) and (max-width:1000px) {

/* ===== common ===== */
    h2 {
        font-size: 4.8vw;
    }
    .display-flex {
        flex-wrap: wrap;
    }
    .display-sp {
        display: none;
    }
/* ===== header ===== */
    header ul.display-flex {
        font-size: 1.6vw;
        font-weight: 500;
    }
    .open-menu {
        width: 60%;
        max-width: 740px;
    }
    .dnone .open-menu {
        top: 28px;
        right: 28px;
    }
    .sub-menu li.sns-youtube img {
        width: 80px;
    }
    .sub-menu li.sns-x img {
        width: 18px;
    }

/* ===== container-first ===== */
    .container-first .link-store {
        top: -1.4%;
    }
    .content {
        width: 64%;
        padding-bottom: 24%;
    }
/* ===== catch-copy ===== */
    .catch-copy {
        width: 98%;
    }
    .catch-copy .catch-copy-img {
        width: 84%;
        margin-bottom: -6%;
    }
    .catch-copy .catch-copy-txt {
        width: 80%;
        margin-bottom: 12%;
        margin-bottom: 24%;
        font-size: 4.2vw;
        letter-spacing: 1.2vw;
    }
    .catch-copy .catch-copy-txt p {
        margin-bottom: 0;
    }
    .catch-copy .catch-copy-txt .imgdeco-illust6 {
        width: 25%;
        max-width: 128px;
        position: absolute;
        left: -12%;
        top: 62%;
    }
    .swiper-pagination{
        width: 25%!important;
    }
/* ===== news ===== */
    .news {
        padding: 4% 0 16%;
    }
    .news .chara-img.position-top {
        top: -16%;
    }
    .news .news-box div {
        font-size: 3vw;
        margin-left: 4%;
    }
    .news .chara-img.position-top {
        right: -58%;
        top: 5%;
    }
    .news .content {
        width: 80%;
        padding-bottom: 24%;
    }
    .news .news-box figure {
        width: 24%;
    }
    .news .news-box div p {
        font-size: 22px;
        line-height: 24px;
    }
    .scroll-infinity-list li {
        width: calc(100vw / 7);
    }
/* ===== container-info ===== */
    .container-info h2 span {
        font-size: 4vw;
    }
    .container-info p {
        font-size: 2.4vw;
    }
    .inner dt {
        font-size: 2.8vw;
        line-height: 110%;
    }
    .inner dd {
        font-size: 1.8vw;
    }
/* ===== container-store ===== */
    .app-information .display-flex {
        width: 76%;
        font-size: 1.5vw;
    }
    .app-information .link-store {
        width: 80%%;
    }
    .app-information dt {
        width: 24%;
    }
    .app-information dd {
        width: 76%;
    }
    .trademark-text .display-sp {
        display: block;
    }
    .trademark-text {
        font-size: 1.6vw;
    }
}
/* ============== RESPONSIVENESS ============== */
@media screen and (max-width:640px) {

/* scroll menu */
    .sub-menu {
      display: block;
    }
    .open-menu,
    .dnone .open-menu {
        position: fixed;
        top: 20px;
        right: 10px;
        width: 50px;
        height: 50px;
        display: block;
        cursor: pointer;
        transition: opacity 0.2s linear;
        z-index: 1000;
    }
    .open-btn span,
    .dnone .open-btn span {
        display: block;
        float: left;
        clear: both;
        height: 4px;
        width: 32px;
        border-radius: 40px;
        background-color: #000;
        position: absolute;
        right: 3px;
        top: 3px;
        overflow: hidden;
        transition: all 0.4s ease;
    }
    .open-btn span:nth-child(1),
    .dnone .open-btn span:nth-child(1) {
        margin-top: 10px;
        z-index: 9;
    }
    .open-btn span:nth-child(2),
    .dnone .open-btn span:nth-child(2) {
        margin-top: 23px;
    }

    .open-btn span:nth-child(3),
    .dnone .open-btn span:nth-child(3) {
        margin-top: 36px;
    }
    .open-menu:before {
        height: 0;
        width: 0;
        opacity: 0;
        content: "";
        position: absolute;
        background-color: rgb(184 219 95 / 50%);
        border-radius: 50%;
        right: 0;
        top: 0;
        right: -160px;
        top: -160px;
    }
    .oppenned.open-menu:before {
        height: 430px;
        width: 400px;
        opacity: 1;
        animation: rotation 20s linear infinite;
    }
    @keyframes rotation {
        0% {transform:rotate(0deg);}
        100% {transform:rotate(360deg);}
    }

    nav#g-navi {
        opacity: 0;  
    }
    .oppenned nav#g-navi {
        opacity: 1; 
    }
    .sub-menu {
        transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        z-index: 18;
        overflow: hidden;
        width: 0;
        position: absolute;
        right: 0;
        top: 60px;
    }
    .oppenned .sub-menu {
        width: 220px;
    }
    .sub-menu li {
        display: block;
        text-align: right;
        height: auto;
        margin-right: -160px;
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .sub-menu li:nth-child(1) {
        -webkit-transition-delay: 0.05s;
    }
    .sub-menu li:nth-child(2) {
        -webkit-transition-delay: 0.10s;
    }
    .sub-menu li:nth-child(3) {
        -webkit-transition-delay: 0.15s;
    }
    .sub-menu li:nth-child(4) {
        -webkit-transition-delay: 0.20s;
    }
    .sub-menu li:nth-child(5) {
        -webkit-transition-delay: 0.25s;
    }
    .sub-menu li a {
        display: inline-block;
        font-size: 16px;
    }
    .oppenned .sub-menu li {
        margin: 18px 0;
    }
    .oppenned .open-btn span:nth-child(2) {
        overflow: visible;
    }
    .oppenned .open-btn span:nth-child(1),
    .oppenned .open-btn span:nth-child(3) {
        z-index: 100;
        transform: rotate(45deg);
    }
    .oppenned .open-btn span:nth-child(1),
    .dnone .oppenned .open-btn span:nth-child(1) {
        transform: rotate(45deg) translateY(11px) translateX(11px);
    }
    .oppenned .open-btn span:nth-child(2) {
        height: 400px;
        width: 400px;
        right: -160px;
        top: -160px;
        border-radius: 50%;
        background-color: #f8e945;
    }
    .oppenned .open-btn span:nth-child(3),
    .dnone .oppenned .open-btn span:nth-child(3) {
        transform: rotate(-45deg) translateY(-8px) translateX(8px);
    }
    .fadeDown {
        animation: none;
        opacity: 1;
    }
/* ===== header ===== */
    header.display-flex {
        justify-content: center;
        padding: 4% 8% 4%;
    }
    header h1 {
        width: 80%;
        max-width: 240px;
        margin-bottom: 0;
    }
    .open-menu {
        width: 96%;
        max-width: 100%;
        font-size: 2.4vw;
        font-weight: 500;
    }
    .sub-menu {
        font-size: 2.4vw;
    }
/* ===== container-first ===== */
    .container-first .link-store {
        top: 0;
        padding-top: 8%;
    }
    .content {
        width: 98%;
        padding:  2% ;
        box-sizing: border-box;
    }
    .container-first h2,
    .container-first .inner {
        transform: translate(0, 0)!important;
        opacity: 1!important;
    }
/* ===== box-store ===== */
    .container-first .box-store {
        margin: 0 0 6%;
    }
    .container-first .link-store {
        padding-top: 0%;
    }
/* ===== catch-copy ===== */
    .catch-copy {
        margin: 0 0 16%;
        width: 98%;
    }
    .catch-copy .catch-copy-img {
        width: 84%;
        margin-bottom: -7%;
    }
    .catch-copy .catch-copy-txt {
        width: 80%;
        margin-bottom: 24%;
        font-size: 4.4vw;
        font-weight: 600;
        letter-spacing: 1.2vw;
    }
    .catch-copy .catch-copy-txt p {
        margin-bottom: 0;
    }
    .catch-copy .catch-copy-txt .imgdeco-illust6 {
        width: 25%;
        max-width: 128px;
        position: absolute;
        left: -15%;
        top: 62%;
    }
    .swiper-pagination{
        width: 24%!important;
    }

/* ===== news ===== */
    .news {
        padding: 0 0 48%;
    }
    .news .news-box div {
        width: 100%;
        font-size: 3.2vw;
        margin-left: 2%;
    }
    .news a .news-box div {
        width: 100%;
    }
    .news .news-box div p {
        font-size: 16px;
        line-height: 18px;
    }
    .news .news-list {
        font-size: 4vw;
    }
    .news .news-box.stickarrow:after {
        width: 24px;
        height: 6px;
        position: absolute;
        right: 6%;
        bottom: 10%;
    }
    .news a:hover > .news-box.stickarrow:after {
        right: 4%;
    }

    .scroll-infinity-list li {
        width: calc(100vw / 5);
    }

/* ===== move ===== */
    .move {
        padding: 24% 0 32%;
        background-size: cover;
    }
    .move .content {
        width: 86%;
    }
    .move .waveCate svg {
        transform: scaleY(0.3);
    }

/* ===== container-info ===== */
    .container-info {
        padding: 4% 0 36%;
    }
    .container-info h2 span {
        font-size: 6vw;
    }
    .container-info p {
        font-size: 3.8vw;
        line-height: 106%;
        margin-bottom: 8%;
    }
    .container-info .inner:not(:last-child) {
        margin-bottom: 48%;
    }
    .inner.cate1, .inner.cate3 {
        flex-direction: inherit;
    }
    .inner .screen-img {
        width: 33%;
    }   
    .inner.cate1 .screen-img,
    .inner.cate3 .screen-img,
    .inner.cate2 .screen-img {
        width: 60%;
        margin: 0 0 -20%;
    }
    .inner .screen-img.play-video {
        padding: 0px 0 96%;
    }
    .inner .screen-img img {
        top: 0;
    }
    .inner .screen-img.play-video iframe {
        top: 0%;
    }
    .container-info .inner dl {
        width: 88%;
        padding: 30% 6%;
    }
    .container-info .inner dl:before {
        height: 84%;
    }
    .inner dt {
        font-size: 4.4vw;
        line-height: 110%;
        -webkit-text-stroke: 0.1vw #000;
    }
    .inner dd {
        font-size: 3.4vw;
    }
    .inner.cate1 .illust-img {
        width: 52%;
        bottom: -16%;
        left: -42%;
        display: flex;
        align-items: flex-end;
    }
    .inner.cate2 .illust-img {
        width: 53%;
        bottom: -17%;
        right: -48%;
    }
    .inner.cate3 .illust-img {
        width: 46%;
        bottom: -18%;
        left: -62%;
    }
/* ===== container-store ===== */
    .app-icon {
        width: 72%;
        margin-bottom: 4%;
    }
    .app-information .display-flex {
        flex-wrap: wrap;
        justify-content: center;
        text-align: left;
        width: 76%;
        margin: 0 auto 4%;
        font-size: 2.6vw;
    }
    .app-information .link-store {
        width: 80%;
    }
    .app-information {
        width: 100%;
    }
    .trademark-text {
        font-size: 2vw;
    }
/* ===== container-nav ===== */
    .container-nav {
        background: #52aa80;
        padding: 6% 0;
    }
}

@media only screen and (max-device-width:844px) and (orientation:landscape) {
}