@charset "utf-8";

/* ===================================================================
PARTS
=================================================================== */

/* PINO PACMAN FRAME 900
--------------------*/

.pino-pm-frame-900 {
    width: 100%;
    max-width: 930px;
    margin: 0 auto;
    padding: 0 15px;
}

/* PINO PACMAN LINK
--------------------*/

.pino-pm-link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    color: #FFF;
    line-height: 1.1;
    text-align: center;
    background: 100% 0 / 200% 100% linear-gradient(90deg, rgba(254,133,36,1) 0%, rgba(254,71,27,1) 12.5%, rgba(250,41,27,1) 25%, rgba(214,14,184,1) 37.5%, rgba(114,10,237,1) 50%,rgba(214,14,184,1) 62.5%, rgba(250,41,27,1) 75%, rgba(254,71,27,1) 87.5%,rgba(254,133,36,1) 100%);
    border-radius: 25px;
    overflow: hidden;
    transition: color .3s cubic-bezier(.65,0,.45,1);
    animation: gradation-move 5s linear infinite;
}

.pino-pm-link.link-small {
    min-height: 80px;
    font-size: 40px;
    font-family: 'dot-m-bold';
}

.pino-pm-link.link-large {
    min-height: 120px;
    font-size: 20px;
    font-weight: 700;
}

.pino-pm-link:hover {
    color: #FF0;
}

@keyframes gradation-move {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.pino-pm-link > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    background: #000;
    border-radius: 25px;
}

.pino-pm-link > span > div {
    max-width: 359px;
    margin: 0 auto 7px;
}

/* PINO PACMAN HEADING
--------------------*/

.pino-pm-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pino-pm-heading-left,
.pino-pm-heading-right {
    max-width: 210px;
}

.pino-pm-heading-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 380px;
    min-height: 76px;
    font-size: 35px;
    font-family: 'dot-m-regular';
    letter-spacing: 0.05em;
    background: #2B52B2;
    border-radius: 100px;
}

.pino-pm-heading-bottom {
    display: none;
}

/* PINO PACMAN COLUMN
--------------------*/

.pino-pm-column {
    width: 100%;
    text-align: center;
    background: #000;
    border: 2px solid #FFF;
}

.pino-pm-column.column-p-small {
    padding: 23px;
}

.pino-pm-column.column-p-large {
    padding: 38px 38px 38px 43px;
}

/* PINO PACMAN COLUMN TITLE
--------------------*/

.pino-pm-column-title {
    font-size: 18px;
    font-weight: 700;
}

/* PINO PACMAN COLUMN TEXT
--------------------*/

.pino-pm-column-text {
    margin: 20px 0 0;
}  

.pino-pm-column-text > span {
    font-weight: 700;
}

.pino-pm-column-text > a {
    color: #FFF;
}

/* PINO PACMAN COLUMN LIST
--------------------*/

.pino-pm-column-list > ul > li {
    position: relative;
    padding: 0 0 0 30px;
    font-size: 18px;
    line-height: 1.72;
    text-align: left;
}

.pino-pm-column-list > ul > li:not(:last-child) {
    margin: 0 0 15px;
}

.pino-pm-column-list > ul > li:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background: #FF0;
	border-radius: 50px;
}

.pino-pm-column-list > ul > li > span {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 5px;
    vertical-align: top;
}

.pino-pm-column-list > ul > li > span[class^="item"] {
    margin: 0 2.5px;
}

.pino-pm-column-list > ul > li > span.pacman {
    background: url("../img/parts/column/pc/pacman.png") 100% / 100% no-repeat transparent;
}

.pino-pm-column-list > ul > li > span.pino {
    width: 32px;
    height: 28px;
    background: url("../img/parts/column/pc/pino.png") 100% / 100% no-repeat transparent;
}

.pino-pm-column-list > ul > li > span.ghost {
    background: url("../img/parts/column/pc/ghost.png") 100% / 100% no-repeat transparent;
}

.pino-pm-column-list > ul > li > span.item1 {
    background: url("../img/parts/column/pc/item01.png") 100% / 100% no-repeat transparent;
}

.pino-pm-column-list > ul > li > span.item2 {
    background: url("../img/parts/column/pc/item02.png") 100% / 100% no-repeat transparent;
}

.pino-pm-column-list > ul > li > span.item3 {
    background: url("../img/parts/column/pc/item03.png") 100% / 100% no-repeat transparent;
}

.pino-pm-column-list > ul > li > span.item4 {
    background: url("../img/parts/column/pc/item04.png") 100% / 100% no-repeat transparent;
}

.pino-pm-column-list > ul > li > span.pino-ghost {
    background: url("../img/parts/column/pc/pinoghost.png") 100% / 100% no-repeat transparent;
}

/* PINO PACMAN BACKGROUND
--------------------*/

.pino-pm-bg {
    position: relative;
    padding: 70px 0 0;
}

.pino-pm-bg::after,
.pino-pm-bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pino-pm-bg::after {
    background: url("../img/other/pc/background.png") 100% / 100% no-repeat #000;
    z-index: -3;
}

.pino-pm-bg:before {
    background: #000;
    z-index: -4;
}

/* PINO PACMAN ANIMATION
--------------------*/

.pino-pm-animation-container {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 50px;
    z-index: 100;
}

.pino-pm-animation-container.show {
    z-index: -1;
}

.pino-pm-animation-img {
    width: 100%;
    height: 100%;
    background: url("../gif/animation.gif") 0 0 / auto 50px repeat-x transparent;
    animation: pino-pacman-move-pc 5s linear infinite;
}

@keyframes pino-pacman-move-pc {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -907px 0;   
    }
}

/* ===================================================================
KV
=================================================================== */

/* PINO PACMAN KV SECTION
--------------------*/

.pino-pm-kv-sec {
    padding: 15px 0 30px;
}

/* BACKGROUND GRADATION
--------------------*/

.bg-gradation {
    background: linear-gradient(90deg, rgba(45,198,217,0.9) 0%, rgba(30,145,240,0.9) 25%, rgba(47,118,217,0.9) 50%, rgba(30,145,240,0.9) 75%, rgba(45,198,217,0.9) 100%);
}

/* PINO PACMAN KV LOGO
--------------------*/

.pino-pm-kv-logo {
    width: 100%;
    max-width: 963px;
    margin: 0 auto 44px;
}

/* PINO PACMAN KV COPYRIGHT
--------------------*/

.pino-pm-kv-copyright {
    margin: 30px 0 0;
    font-size: 12px;
    text-align: center;
}

/* ===================================================================
PLAY
=================================================================== */

/* PINO PACMAN PLAY SECTION
--------------------*/

.pino-pm-play-sec {
    padding: 70px 0 100px;
}

/* PINO PACMAN PLAY PERIOD
--------------------*/

.pino-pm-play-period {
    margin: 40px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.72;
    text-align: center;
}

/* ===================================================================
DESCRIPTION
=================================================================== */

/* PINO PACMAN DESCRIPTION SECTION
--------------------*/

.pino-pm-description-sec {
    position: relative;
    padding: 50px 0 145px;
}

.pino-pm-description-sec:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 357px;
    height: 170px;
    background: url("../img/other/pc/pino-illust.png") 100% / 100% no-repeat transparent;
}

/* PINO PACMAN DESCRIPTION TEXT
--------------------*/

.pino-pm-description-text {
    margin: 50px 0;
    font-size: 24px;
    font-family: 'dot-m-bold';
    letter-spacing: 0.1em;
    line-height: 1.6;
    text-align: center;
}

.pino-pm-description-text > span {
    padding: 0 15px;
    color: #FF0;
    font-size: 34px;
}

/* ===================================================================
ABOUT
=================================================================== */

/* PINO PACMAN ABOUT SECTION
--------------------*/

.pino-pm-about-sec {
    padding: 170px 0 100px;
}

/* ===================================================================
CONTACT
=================================================================== */

/* PINO PACMAN CONTACT SECTION
--------------------*/

.pino-pm-contact-sec {
    padding: 50px 0 55px;
}

/* PINO PACMAN CONTACT LIST
--------------------*/

.pino-pm-contact-list {
    margin: 50px 0 0;
}

.pino-pm-contact-list > ul > li {
    padding: 20px 0;
}

.pino-pm-contact-list > ul > li:first-child {
    padding: 0 0 20px;
}

.pino-pm-contact-list > ul > li:last-child {
    padding: 20px 0 0;
}

.pino-pm-contact-list > ul > li:not(:last-child) {
    border-bottom: 2px solid #FFF;
}

.pino-pm-contact-list > ul > li > div {
    position: relative;
    padding: 0 0 0 35px;
}

.pino-pm-contact-list > ul > li > div:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 32px;
}

.pino-pm-contact-list > ul > li > div.question {
    margin: 0 0 5px;
    color: #FF0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.72;
}

.pino-pm-contact-list > ul > li > div.question:before {
    background: url("../img/contact/pc/question.svg") 0 0 / 18px 27px no-repeat transparent;
}

.pino-pm-contact-list > ul > li > div.answer {
    line-height: 1.68;
}

.pino-pm-contact-list > ul > li > div.answer:before {
    background: url("../img/contact/pc/answer.svg") 0 0 / 18px 27px no-repeat transparent;
}

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

    /* ===================================================================
    PARTS
    =================================================================== */

    /* PINO PACMAN FRAME 900
    --------------------*/

    .pino-pm-frame-900 {
        max-width: 375px;
    }

    /* PINO PACMAN LINK
    --------------------*/

    .pino-pm-link {
        max-width: 288px;
        border-radius: 15px;
    }

    .pino-pm-link.link-small {
        min-height: 50px;
        font-size: 23px;
    }

    .pino-pm-link.link-large {
        min-height: 70px;
        font-size: 12px;
    }

    .pino-pm-link:hover {
        color: #FFF;
    }

    .pino-pm-link > span {
        width: calc(100% - 3px);
        height: calc(100% - 3px);
        border-radius: 15px;
    }

    .pino-pm-link > span > div {
        max-width: 225px;
        margin: 0 auto 4px;
    }

    /* PINO PACMAN HEADING
    --------------------*/

    .pino-pm-heading {
        display: block;
    }

    .pino-pm-heading-left,
    .pino-pm-heading-right {
        display: none;
    }

    .pino-pm-heading-center {
        width: 200px;
        min-height: 40px;
        margin: 0 auto 25px;
        font-size: 20px;
    }

    .pino-pm-heading-bottom {
        display: block;
        max-width: 274px;
        margin: 0 auto;
    }

    /* PINO PACMAN COLUMN
    --------------------*/

    .pino-pm-column.column-p-small {
        padding: 18px;
    }

    .pino-pm-column.column-p-large {
        padding: 23px 24px 23px 23px;
    }

    /* PINO PACMAN COLUMN TITLE
    --------------------*/

    .pino-pm-column-title {
        font-size: 16px;
    }

    /* PINO PACMAN COLUMN TEXT
    --------------------*/

    .pino-pm-column-text {
        margin: 15px 0 0;
        font-size: 12px;
    }  

    .column-f-sp-samll {
        font-size: 10px;
    }

    /* PINO PACMAN COLUMN LIST
    --------------------*/

    .pino-pm-column-list > ul > li {
        padding: 0 0 0 18px;
        font-size: 12px;
        line-height: 1.66;
    }

    .pino-pm-column-list > ul > li:before {
        top: 5px;
        width: 8px;
        height: 8px;
    }

    .pino-pm-column-list > ul > li > span {
        width: 20px;
        height: 20px;
        margin: 0 2px;
    }

    .pino-pm-column-list > ul > li > span[class^="item"] {
        margin: 0;
    }

    .pino-pm-column-list > ul > li > span.pacman {
        background: url("../img/parts/column/sp/pacman.png") 100% / 100% no-repeat transparent;
    }
    
    .pino-pm-column-list > ul > li > span.pino {
        width: 22px;
        height: 20px;
        background: url("../img/parts/column/sp/pino.png") 100% / 100% no-repeat transparent;
    }
    
    .pino-pm-column-list > ul > li > span.ghost {
        background: url("../img/parts/column/sp/ghost.png") 100% / 100% no-repeat transparent;
    }
    
    .pino-pm-column-list > ul > li > span.item1 {
        background: url("../img/parts/column/sp/item01.png") 100% / 100% no-repeat transparent;
    }
    
    .pino-pm-column-list > ul > li > span.item2 {
        background: url("../img/parts/column/sp/item02.png") 100% / 100% no-repeat transparent;
    }
    
    .pino-pm-column-list > ul > li > span.item3 {
        background: url("../img/parts/column/sp/item03.png") 100% / 100% no-repeat transparent;
    }
    
    .pino-pm-column-list > ul > li > span.item4 {
        background: url("../img/parts/column/sp/item04.png") 100% / 100% no-repeat transparent;
    }
    
    .pino-pm-column-list > ul > li > span.pino-ghost {
        background: url("../img/parts/column/sp/pinoghost.png") 100% / 100% no-repeat transparent;
    }

    /* PINO PACMAN BACKGROUND
    --------------------*/

    .pino-pm-bg {
        padding: 50px 0 0;
        overflow: hidden;
    }

    .pino-pm-bg::after {
        top: 90px;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100vh;
        background: url("../img/other/sp/background.png") center / cover no-repeat #000;
    }

    /* PINO PACMAN ANIMATION
    --------------------*/

    .pino-pm-animation-container {
        bottom: 50px;
        width: 100%;
        height: 42px;
    }

    .pino-pm-animation-img {
        background: url("../gif/animation.gif") 0 0 / auto 42px repeat-x transparent;
        animation: pino-pacman-move-sp 5s linear infinite;
    }

    @keyframes pino-pacman-move-sp {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -761px 0;   
        }
    }

    /* ===================================================================
    KV
    =================================================================== */

    /* PINO PACMAN KV SECTION
    --------------------*/

    .pino-pm-kv-sec {
        padding: 7px 0 13px;
    }

    /* PINO PACMAN KV LOGO
    --------------------*/

    .pino-pm-kv-logo {
        max-width: 326px;
        margin: 0 auto 16px;
    }

    /* PINO PACMAN KV COPYRIGHT
    --------------------*/

    .pino-pm-kv-copyright {
        margin: 15px 0 0;
        font-size: 10px;
    }

    /* ===================================================================
    PLAY
    =================================================================== */

    /* PINO PACMAN PLAY SECTION
    --------------------*/

    .pino-pm-play-sec {
        padding: 50px 0;
    }

    /* PINO PACMAN PLAY PERIOD
    --------------------*/

    .pino-pm-play-period {
        margin: 20px 0;
        font-size: 12px;
        line-height: 1.66;
    }

    /* ===================================================================
    DESCRIPTION
    =================================================================== */

    /* PINO PACMAN DESCRIPTION SECTION
    --------------------*/

    .pino-pm-description-sec {
        padding: 30px 0 80px;
    }

    .pino-pm-description-sec:after {
        width: 202px;
        height: 96px;
        background: url("../img/other/sp/pino-illust.png") 100% / 100% no-repeat transparent;
    }

    /* PINO PACMAN DESCRIPTION TEXT
    --------------------*/

    .pino-pm-description-text {
        margin: 25px 0;
        font-size: 14px;
        line-height: 1.7;
    }

    .pino-pm-description-text > span {
        padding: 0 10px;
        font-size: 20px;
    }

    /* ===================================================================
    ABOUT
    =================================================================== */

    /* PINO PACMAN ABOUT SECTION
    --------------------*/

    .pino-pm-about-sec {
        padding: 90px 0 50px;
    }

    /* ===================================================================
    CONTACT
    =================================================================== */

    /* PINO PACMAN CONTACT SECTION
    --------------------*/

    .pino-pm-contact-sec {
        padding: 30px 0
    }

    /* PINO PACMAN CONTACT LIST
    --------------------*/

    .pino-pm-contact-list {
        margin: 25px 0 0;
    }

    .pino-pm-contact-list > ul > li > div {
        padding: 0 0 0 25px;
    }

    .pino-pm-contact-list > ul > li > div:before {
        width: 14px;
        height: 22px;
    }

    .pino-pm-contact-list > ul > li > div.question {
        font-size: 12px;
        line-height: 1.66;
    }

    .pino-pm-contact-list > ul > li > div.question:before {
        background: url("../img/contact/sp/question.svg") 0 0 / 12px 18px no-repeat transparent;
    }

    .pino-pm-contact-list > ul > li > div.answer {
        font-size: 12px;
        line-height: 1.66;
    }

    .pino-pm-contact-list > ul > li > div.answer:before {
        background: url("../img/contact/sp/answer.svg") 0 30% / 12px 14px no-repeat transparent;
    }
    
}