@charset "UTF-8";

/* CSS Document */

/*====================================

    .icon_campaign

====================================*/ 

.icon_campaign {
    position: fixed;
    right: 0;
    bottom: 30px;
    z-index: 10;
    width: 140px;
}
.icon_campaign a {
    display: block;
}
.icon_campaign a:hover {
    -webkit-animation: camp_zoom .3s;
    animation: camp_zoom .3s;
}
@-webkit-keyframes camp_zoom {
    50% {
        -webkit-transform: scale(1.05);
    }
}
@keyframes camp_zoom {
    50% {
        transform: scale(1.05);
    }
}
/*====================================

    .curtain

====================================*/ 

.parent-element > * {
    width: 100%;
    position: relative;
    z-index: 1;
}
.child-element {
    /*box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);*/
    min-height: 100vh;
    display: block;
    border-bottom: 2px solid #ccc;
}
.child-element .element_inner {
    padding: 80px 40px 80px;
    margin: 0 auto;
    width: 100%;
    max-width: 1080px;
    display: block;
}
.child-element .element_inner .canvas {
    width: 100%;
    margin-bottom: 40px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2) inset;
}
.child-element .element_inner .canvas .main_image {
    position: relative;
    z-index: -1;
}
.child-element .element_inner .copy {
    width: 100%;
    margin-bottom: 40px;
}
.child-element .element_inner .copy p {
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 120%;
}
.child-element .element_inner .copy p br {
    display: none;
}
.curtain-fixed {
    position: fixed;
    top: 0;
    z-index: 0;
}

/*====================================

    .element-main

====================================*/  

.element-main {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: url(/milky-pop/images/main_bg.jpg) no-repeat;
    background-size: cover;
}
.element-main .inner {
    width: 100%;
    height: 100%;
    display: table;
    padding: 0 15%;
    position: relative;
}
.element-main .inner p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.element-main .inner .icon_scroll {
    position: absolute;
    bottom: 20px;
    left: 50%;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-decoration: none;
}
.element-main .inner .icon_scroll {
    width: 50px;
    height: 50px;
    margin-left: -25px;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb {
    0% {
        -webkit-transform: rotate(0) translate(0, 0);
    }
    50% {
        -webkit-transform: rotate(0) translate(0, -10px);
    }
    100% {
        -webkit-transform: rotate(0) translate(0, 0);
    }
}
@keyframes sdb {
    0% {
        -webkit-transform: rotate(0) translate(0, 0);
    }
    50% {
        -webkit-transform: rotate(0) translate(0, -10px);
    }
    100% {
        -webkit-transform: rotate(0) translate(0, 0);
    }
}

/*====================================

    .element-news

====================================*/

.element-news {
    background: url(/milky-pop/images/news_bg.jpg) #fff;
    background-size: 200px;
}

/*  .wrap_top_sns   */

.wrap_top_sns {
    width: 100%;
    margin-bottom: 80px;
}
.wrap_top_sns .ttl {
    width: 100%;
    text-align: center;
    padding: 0 25%;
}
.wrap_top_sns .ttl img {
    margin: 0 auto;
}
.wrap_top_sns .inner {
    margin: 0 auto;
    width: 100%;
}
.wrap_top_sns .inner ul {
    display: table;
    width: 100%;
    padding: 0 15%;
}
.wrap_top_sns .inner ul li {
    display: table-cell;
    vertical-align: middle;
    width: 25%;
}

/*  .wrap_top_sns   */

.element-news .wrap_news {
    width: 100%;
    margin-bottom: 80px;
}
.element-news .wrap_news .inner {
}
.element-news .wrap_news .inner .ttl {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}
.element-news .wrap_news .inner .ttl img {
    width: 50%;
    margin: 0 auto;
}
.element-news .wrap_news .inner dl {
    width: 100%;
    display: table;
    border-top: 2px dotted #5ed2ee;
    padding: 10px 0;
    margin: 0 auto;
}
.element-news .wrap_news .inner dl:last-child {
    border-bottom: 2px dotted #5ed2ee;
}
.element-news .wrap_news .inner dl dt {
    display: table-cell;
    width: 120px;
    font-family: 'Nunito', sans-serif;
}
.element-news .wrap_news .inner dl dd {
    display: table-cell;
}
.element-news .wrap_news .inner dl dd a {
    color: #333;
    text-decoration: underline;
}
.element-news .wrap_news .inner dl dd a:hover {
    text-decoration: none;
}

/*  .howmany_bnr   */

.element-news .howmany_bnr {
    width: 100%;
    margin-bottom: 60px;
}
.element-news .howmany_bnr a {
    border: 2px solid #dd0011;
    display: block;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    overflow: hidden;
}
.element-news .howmany_bnr a:hover {
    -webkit-animation: howbnr_zoom .3s;
    animation: howbnr_zoom .3s;
}
@-webkit-keyframes howbnr_zoom {
    50% {
        -webkit-transform: scale(1.02);
    }
}
@keyframes howbnr_zoom {
    50% {
        transform: scale(1.02);
    }
}

/*  .wrap_banner   */

.element-news .wrap_banner {
    width: 100%;
}
.element-news .wrap_banner .inner {
    width: 100%;
    margin: 0 auto;
}
.element-news .wrap_banner .inner .list {
    border: 40px solid #fff64a;
    background: #fff;
    margin-bottom: -1px;
    padding: 60px 60px 40px 60px;
}
.element-news .wrap_banner .inner ul {
}
.element-news .wrap_banner .inner ul li {
    width: 48%;
    margin-bottom: 40px;
}
.element-news .wrap_banner .inner ul li:nth-child(odd) {
    float: left;
}
.element-news .wrap_banner .inner ul li:nth-child(even) {
    float: right;
}
.element-news .wrap_banner .inner ul li a {
    display: block;
}
.element-news .wrap_banner .inner ul li a:hover {
    -webkit-animation: bnr_zoom .3s;
    animation: bnr_zoom .3s;
}
@-webkit-keyframes bnr_zoom {
    50% {
        -webkit-transform: scale(1.05);
    }
}
@keyframes bnr_zoom {
    50% {
        transform: scale(1.05);
    }
}

/*====================================

    .element-calendar

====================================*/

.element-calendar {
    background: url(/milky-pop/images/bg_pattern.svg) #fdd7e6;
    background-size: 80px;
}

/*====================================

    .element-coloring

====================================*/

.element-coloring {
    background: url(/milky-pop/images/bg_pattern.svg) #fff6bc;
    background-size: 80px;
}

/*====================================

    .element-craft

====================================*/

.element-craft {
    background: url(/milky-pop/images/bg_pattern.svg) #c4f4df;
    background-size: 80px;
}

/*====================================

    .element-movie

====================================*/

.element-movie {
    background: url(/milky-pop/images/bg_pattern.svg) #cef2ff;
    background-size: 80px;
}

/*====================================

    .element-secretstory

====================================*/

.element-secretstory {
    background: url(/milky-pop/images/bg_pattern.svg) #e5dff9;
    background-size: 80px;
}

/*====================================

    .element-products

====================================*/

.element-products {
    background: url(/milky-pop/images/bg_pattern.svg) #eee;
    background-size: 80px;
}

/*====================================

    .element-finish

====================================*/

.element-finish {
    height: 100vh;
    display: table;
    background: url(/milky-pop/images/news_bg.jpg) #fff;
    background-size: 200px;
}
.element-finish .element_inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;
}
.element-finish #ft_logo {
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 100%;
}
.element-finish #ft_logo a {
    display: block;
    width: 180px;
    margin: 0 auto;
}
.element-finish #ft_logo a img {
    width: 100%;
}
.element-finish #footer {
    position: absolute;
    left: 0;
    bottom: 0;
}