@charset "UTF-8";
/* Color Pallet

*/

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*========================================
    base & common
========================================*/
html,body {
    line-height: 1.6;
    font-family: "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
    background: #fff;
    color: #333;
    letter-spacing: 0.06em;
}
body.win {
    font-weight: 600;
}
body.win.chrome {
    font-weight: 600;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.4rem;
}

img {
    vertical-align: bottom;
}

a {
    color: #333;
    text-decoration: none;
}   
a:hover {
    text-decoration: underline;
}

.breakCtrl {
    display: inline-block;
}

.inner {
    margin: 0 auto;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    max-width: 980px;
}

.btn-common {
    color: #fff;
    background: #1e1e1e;
    font-size: 1.4rem;
    display: inline-block;
    border-radius: 6px;
    padding: 14px 17px;
    line-height: 1;
    text-decoration: none;
    transition: opacity 0.3s;
    max-width: 430px;
}
.btn-common:hover {
    opacity: 0.75;
    text-decoration: none;
}
.btn-common:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left: 5px solid #fff;
    margin-right: 6px;
}
.album-amazon.disable,
.album-animate.disable,
.album-towerrecords.disable  {
    opacity: 0.5;
    pointer-events: none;
}

@media (min-width: 821px) {
    .sp_only {
        display: none;
    }
    #header {
        text-align: center;
        background: #fff;
        position: fixed;
        width: 100%;
        height: 150px;
        z-index: 100;
        display: flex;
        align-items: stretch;
    }
        #header .inner {
            padding: 20px 30px 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .header-logo {
            line-height: 200%;
            font-size: 1.2rem;
        }
        .header-logo a {
            text-decoration: none;
        }
        .header-logo img {
            width: 204px;
            height: 48px;
        }
        .header-navi {
            line-height: 100%;
        }
        .header-navi li {
            display: inline-block;
            font-size: 1.2rem;
        }
        .header-navi li + li {
            margin-left: 20px;
        }
        .header-navi li a {
            position: relative;
            padding-left: 20px;
            display: inline-block;
            transition: opacity 0.3s;
            text-decoration: none;
        }
        .header-navi li a:hover {
            opacity: 0.5;
        }
        .header-navi li a:before {
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border: 4px solid transparent;
            border-top: 5px solid #333;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -3px;
        }
}

#contents {
    padding-top: 150px;
}
    #contents .inner {
        padding: 70px 30px;
    }


#album {
    background-size: cover;
    min-height: 610px;
    position: relative;
    transition: opacity 2.5s;
    opacity: 0;
}
#album.animated {
    opacity: 1;
}
#album:before,
#album:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#album:before {
    z-index: 1;
}
#album:after {
    z-index: 2;
}
    #album .inner {
        position: absolute;
        left: 0;
        top: 0;
        max-width: none;
        padding: 0;
        width: 100%;
        height: 100%;
        padding: 30px;
        box-sizing: border-box;
        z-index: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.5) url(../img/img-overlay.png) repeat left top;
    }

    .album-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 920px;
        width: 100%;
    }
    .album-jacket {
        width: 48%;
        -webkit-perspective: 500;
        -moz-perspective: 500px;
        perspective: 500;
        perspective: 500px;
        transition: opacity 2.5s;
        transition-delay: 1s;
        opacity: 0;
        text-align: right;
    }
    .animated .album-jacket {
        opacity: 1;
    }
    .album-jacket img {
        width: 90%;
        height: auto;
        transform: rotateY(15deg);
        box-shadow:15px 15px 0px 0px rgba(0,0,0,0.1);
        -moz-box-shadow:15px 15px 0px 0px rgba(0,0,0,0.1);
        -webkit-box-shadow:15px 15px 0px 0px rgba(0,0,0,0.1);
    }
    .album-detail {
        width: 50%;
        transition: opacity 2.5s;
        transition-delay: 1.5s;
        opacity: 0;
    }
    .animated .album-detail {
        opacity: 1;
    }
    .album-title {
        font-size: 3.0rem;
        line-height: 1.43;
        font-weight: bold;
        font-family: "Noto Sans Japanese";
    }
    .mac .album-title {
        font-weight: 500;
    }
    .album-title span:first-child {
        margin-right: 0.5em;
    }
    .album-date {
        font-size: 1.8rem;
        color: #fff;
        background: #1e1e1e;
        padding: 5px 15px;
        display: inline-block;
        margin-top: 20px;
    }
    .album-price {
        font-size: 1.6rem;
        margin-top: 15px;
    }
    .album-bonus {
        margin-top: 20px;
        height: 145px;
        position: relative;
    }
    .album-bonus img {
        position: absolute;
        left: -80px;
        transform: rotate(-5deg);
        width: 100%;
        height: auto;
    }
    .album-bonus span {
        display: none;
    }
    .album-shop {
        display: flex;
        justify-content: center;
        margin: 40px auto 0;
        max-width: 920px;
    }
    .album-shop li {
        margin-left: 15px;
    }
    .album-shop li:first-child {
        margin-left: 0;
    }
    .album-shop li img {
        max-width: 100%;
        height: auto;
    }
    .album-shop li a {
        transition: opacity 0.3s;
    }
    .album-shop li a:hover {
        opacity: 0.75;
    }

    #bonus {
        text-align: center;
    }
    #bonus .inner {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .bonus-title {
        font-size: 2.4rem;
        font-weight: bold;
        font-family: "Noto Sans Japanese";
        margin-bottom: 30px;
    }
    .mac .bonus-title {
        font-weight: 500;
    }
    .bonus-detail {
        display: flex;
        justify-content: center;
        align-items: stretch;
        font-size: 1.8rem;
    }
    .bonus-detail em {
        color: #dd0000;
        font-weight: bold;
    }
    .bonus-text {
        position: relative;
    }
    .bonus-list {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 15px;
        box-sizing: border-box;
    }
    .bonus-text img {
        opacity: 0.15;
    }
    .bonus-text img,
    .bonus-image img {
        max-width: 300px;
        height: auto;
    }
    .bonus-note {
        font-size: 1.2rem;
        margin-top: 15px;
    }
    
    @media (min-width: 821px) {
        #album {
            background: url(../img/img-keyvisual_sky.jpg) no-repeat right bottom;
            background-size: cover;
        }
        #album:before {
            background: url(../img/img-keyvisual_build.png) no-repeat right bottom;
            background-size: cover;
        }
        #album:after {
            background: url(../img/img-keyvisual_char.png) no-repeat left bottom;
            background-size: cover;
        }
    }
    @media (max-width: 820px) {
        #album {
            background: url(../img/img-keyvisual_sp.jpg) no-repeat right bottom;
            background-size: cover;
        }
        #album:before {
            display: none;
        }
        #album:after {
            display: none;
        }
    }
    #album .scroll {
        display: block;
        width: 40px;
        height: 40px;
        background: #fff url(../img/icn-arrow_down_black.svg) no-repeat center center;
        background-size: 18px 12px;
        text-indent: -99999px;
        position: absolute;
        bottom: -1px;
        left: 50%;
        margin-left: -20px;
        z-index: 5;
    }
    #album .scroll a {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

#wallpaper {
    text-align: center;
    border-top: 1px solid #f2f2f2;
}
    .wallpaper-title {
        font-size: 2.4rem;
        line-height: 1;
        font-weight: bold;
        font-family: "Noto Sans Japanese";
    }
    .wallpaper-title + .wallpaper-text {
        margin-top: 30px;
    }
    .wallpaper-text {
        font-size: 1.4rem;
        line-height: 1.86;
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
    }
    .wallpaper-text img {
        width: 100%;
        height: auto;
        border: 1px solid #efefef;
    }
    .wallpaper-text + .wallpaper-text {
        margin-top: 20px;
    }
    .wallpaper-button {
        margin-top: 20px;
        text-align: center;
    }
    .wallpaper-button a {
        min-width: 150px;
    }
    .wallpaper-button a + a {
        margin-left: 15px;
    }


#talk {
    background: #f1f1f1;

}
#talk .inner {
    display: flex;
    flex-direction: row;
    align-items: center;
}
    .talk-img {
        width: 48%;
    }
    .talk-img img {
        height: auto;
        max-width: 100%;
    }
    .talk-txt {
        width: 52%;
        padding-right: 30px;
        box-sizing: border-box;
    }
    .talk-txt h1 {
        font-size: 1.8rem;
        font-weight: bold;
        font-family: "Noto Sans Japanese";
    }
    .mac .talk-txt h1 {
        font-weight: 500;
    }
    .talk-txt p {
        font-size: 1.4rem;
        line-height: 1.86;
        margin-top: 20px;
    }
    .talk-btn a + a {
        margin-left: 15px;
    }


#making {
    color: #fff;
    background: #1e1e1e;
}
#making .inner {
    display: flex;
    flex-direction: row-reverse;
}
    .making-title {
        width: 48%;
        text-align: center;
        font-size: 2.4rem;
        color: #fff;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: "Noto Sans Japanese";
    }
    .mac .making-title {
        font-weight: 500;
    }
    .making-coming {
        font-size: 1.4rem;
        font-weight: normal;
        margin-top: 10px;
    }

    .making-list {
        width: 52%;
    }
    .making-list:after {
        content:'';
        display: block;
        height: 0;
        font-size: 0;
        clear: both;
    }
    .making-list li {
        margin-bottom: 4%;
        width: 48%;
        padding-top: 48%;
        position: relative;
        float: left;
    }
    .making-list li:nth-child(3),
    .making-list li:nth-child(4) {
        margin-bottom: 0;
    }
    .making-list li + li  {
        margin-left: 4%;
    }
    .making-list li:nth-child(odd) {
        margin-left: 0;
    }
    .making-list li a {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
    }
    .making-list li .txt {
        position: relative;
        display: block;
        width: 100%;
        z-index: 4;
        text-align: center;
        font-size: 1.4rem;
        line-height: 1.93;
    }
    .making-list li .txt:after {
        content: '';
        display: block;
        background: url(../img/btn-play.svg) no-repeat center center;
        background-size: cover;
        width: 64px;
        height: 64px;
        margin: 15px auto 0;
    }
    .making-list li .img {
        position: absolute;
        z-index: 2;
        overflow: hidden;
        left: 10px;
        top: 10px;
        bottom: 10px;
        right: 10px;
    }
    .making-list li .img img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: auto;
        transition: width 0.3s, height 0.3s;
    }
    .making-list li a.comingsoon {
        pointer-events: none;
    }
    .making-list li a.comingsoon .txt:after {
        display: none;
    }
    .making-list li a:after,
    .making-list li a:before {
        content: '';
        display: block;
        position: absolute;
    }
    .making-list li a:after {
        background: rgba(0,0,0,0.5);
        left: 10px;
        top: 10px;
        bottom: 10px;
        right: 10px;
        z-index: 3;
        transition: opacity 0.3s;
    }
    .making-list li a:hover:after {
        opacity: 0.5;
    }
    .making-list li a:hover .img img {
        height: 120%;
    }
    .making-list li a.comingsoon:after {
        background: rgba(0,0,0,0.75);
    }
    .making-list li a:before {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url(../img/bg-slash.png) repeat left top;
        z-index: 1;
    }

#listen .inner {
    display: flex;
    justify-content: space-between;
}
    .listen-title {
        font-size: 2.4rem;
        font-weight: bold;
        text-align: center;
        font-family: "Noto Sans Japanese";
    }
    .mac .listen-title {
        font-weight: 500;
    }
    .listen-detail {
        width: 48%;
    }
    .listen-player {
        width: 48%;
    }
    .listen-embed {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
    }
    .listen-embed iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .listen-note {
        font-size: 1.4rem;
        margin-top: 30px;
    }
    .listen-track_list {
        display: flex;
        justify-content: space-between;
    }
    .listen-track_list ul {
        width: 48%;
        margin-top: 30px;
    }
    .listen-track_list ul li {
        font-size: 1.2rem;
        line-height: 1.58;
        display: flex;
    }
    .listen-track_list ul li span:first-child {
        white-space: nowrap;
    }
    .listen-track_list ul li span + span {
        padding-left: 0.57em;
    }
    .listen-track_list ul li + li {
        margin-top: 15px;
    }

#comment {
    text-align: center;
    border-top: 1px solid #f2f2f2
}
    .comment-title {
        font-size: 2.4rem;
        line-height: 1;
        font-weight: bold;
        font-family: "Noto Sans Japanese";
    }
    .mac .comment-title {
        font-weight: 500;
    }
    .comment-description {
        font-size: 1.4rem;
        line-height: 1.6;
        width: 47%;
        margin: 30px auto;
        text-align: left;
    }

    .comment-list {
        margin-top: 50px;
    }
    .comment-list li {
        display: block;
    }
    .comment-list li + li {
        margin-top: 50px;
    }
    .comment-profile {
        padding: 0 15px;
        box-sizing: border-box;
    }
    .comment-name {
        font-size: 1.4rem;
        margin-top: 15px;
    }
    .comment-name span {
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 2rem;
        margin-right: 1rem;
    }
    .comment-text {
        box-sizing: border-box;
        text-align: left;
        margin-top: 10px;
        padding-top: 30px;
        width: 100%;
        background: url(../img/img-baloon_arrow_sp.png) no-repeat center top;
    }
    .comment-text p span {
        display: block;
        background: #f2f2f2;
        padding: 3px 30px;
        line-height: 2;
        font-size: 1.2rem;
    }
    .comment-text p:before {
        content: '';
        display: block;
        background: url(../img/img-baloon_top.png) no-repeat left top;
        background-size: cover;
        width: 100%;
        padding-top: 3%;
        margin-bottom: -1px;
    }
    .comment-text p:after {
        content: '';
        display: block;
        background: url(../img/img-baloon_bottom.png) no-repeat left top;
        background-size: cover;
        width: 100%;
        padding-top: 3%;
        margin-top: -1px;
    }

    #footer {
        background: #1e1e1e;
        color: #fff;
        text-align: center;
        position: relative;
        margin-top: 40px;
    }
    #footer .inner {
        padding: 50px 30px;
    }
    .footer-pgtp {
        position: absolute;
        margin-left: -20px;
        left: 50%;
        top:-40px;
        width: 40px;
        height: 40px;
    }
    .footer-pgtp a {
        display: block;
        width: 40px;
        height: 40px;
        background: #1e1e1e url(../img/icn-arrow_up_white.svg) no-repeat center center;
        background-size: 18px 12px;
        text-indent: -99999px;
        outline: none;
    }
    .footer-sns {
        margin-top: 30px;
    }
    .footer-sns li {
        display: inline-block;
    }
    .footer-sns li + li {
        margin-left: 15px;
    }
    .footer-sns li img {
        width: 30px;
        height: 30px;
    }
    .footer-copy {
        margin-top: 30px;
        font-size: 1.0rem;
        line-height: 2;
    } 
    .footer-copy span {
        display: block;
    }

@media (max-width: 820px) {
    .btn-common {
        display: block;
        text-align: center;
        margin: 0 auto;
    }
    .inner {
        padding: 0 15px;
    }
    #header {
        position: fixed;
        height: 50px;
        background: #fff;
        top:0;
        left: 0;
        width: 100%;
        z-index: 100;
    }
        #header .inner {
        }
        .header-logo {
            margin-top: 5px;
            font-size: 1rem;
            letter-spacing: 0.01em;
            text-align: center;
        }
        .header-logo img {
            width: 100%;
            height: auto;
            max-width: 102px;
            margin-right: 6px;
            vertical-align: middle;
        }
        .header-logo a {
            text-decoration: none;
        }

    .header-menu {
        width: 40px;
        position: fixed;
        right: 15px;
        top: 15px;
    }

        .header-menu_btn {
            position: relative;
            width: 24px;
            height: 19px;
            display: block;
            margin: 0 auto;
            cursor: pointer;
        }

        .header-menu_btn span,
        .header-menu_btn:before,
        .header-menu_btn:after {
            content: '';
            display: block;
            width: 24px;
            height: 3px;
            background: #1e1e1e;
            position: absolute;
            left: 0;
            transition: all 0.3s;
        }
        .header-menu_btn span {
            top:50%;
            margin-top: -2px;
        }
        .header-menu_btn:before {
            top:0;
            transform-origin:left top;
        }
        .header-menu_btn:after {
            bottom:0;
            transform-origin:left bottom;
        }
        .active .header-menu_btn span {
            opacity: 0;
        }
        .active .header-menu_btn:before {
            transform: rotate(45deg);
        }
        .active .header-menu_btn:after {
            transform: rotate(-45deg);
        }
    
    .header-navi {
        position: fixed;
        overflow: scroll;
        left: -100vw;
        width: 100%;
        height: 100vh;
        background: rgba(255,255,255,0.90);
        text-align: center;
        top:50px;
        transition: opacity 0.3s;
        opacity: 0;
    }
    #header.active .header-navi {
        opacity:1;
        left: 0;
    }
        .header-navi li {
            margin-top: 30px;
        }
        .header-navi li a {
            text-decoration: none;
        }

    #contents {
        padding-top: 50px;
    }
    #contents .inner {
        padding: 50px 15px;
    }

    #album {
        min-height: 500px;
    }
    #album .inner {
        padding: 60px 15px 80px;
    }
    .album-title {
        font-size: 2.6rem;
    }
    .album-date {
        font-size: 1.6rem;
    }
        
    .wallpaper-button {
    }
    .wallpaper-button a + a {
        margin-left: auto;
        margin-top: 15px;
    }

    #talk .inner {
        display: block;
    }
        .talk-img {
            width: 100%;
            text-align: center;
            margin-top: 30px;
        }
        .talk-txt {
            width: 100%;
            padding-right: 0;
        }
        
        .talk-btn a + a {
            margin-left: auto;
            margin-top: 15px;
        }

    #making .inner {
        display: block;
    }
    .making-title {
        width: 100%;
    }
    .making-list {
        width: 100%;
        margin-top: 30px;
    }
    
    @media (max-width: 640px){
        
        #album {
            display: block;
            position: relative;
        }
        #album .inner {
            display: block;
            position: relative;
            padding: 30px 15px 70px;
        }
        .album-box {
            display: block;
            position: relative;
        }
        .album-detail {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            background: rgba(255,255,255,0.30);
            padding: 15px;
            margin-top: 25px;
            box-sizing: border-box;
        }
        .album-jacket {
            width: 100%;
            text-align: center;
        }
        .album-jacket img {
            transform: none;
            max-width: 300px;
        }
        .album-title {
            margin-top: 0;
            font-size: 1.8rem;
            letter-spacing: 0;
        }
        .album-date {
            font-size: 1.4rem;
            letter-spacing: 0;
            margin-top: 20px;
            display: block;
            text-align: center;
        }
        .album-bonus {
            margin-top: 20px;
            height: auto;
            position: relative;
        }
        .album-bonus img {
            display: none;
        }
        .album-bonus span {
            display: block;
            font-size: 1.8rem;
            font-weight: bold;
            font-family: "Noto Sans Japanese";
        }
        .mac .album-bonus span {
            font-weight: 500;
        }
        .album-bonus span em {
            color: #de0000;
        }
        .album-shop {
            margin-top: 20px;
            max-width: 400px;
        }
        
        .album-shop li a {
            position: relative;
        }
        .album-shop li img {
            visibility: hidden;
        }
        .album-amazon:before,
        .album-animate:before,
        .album-towerrecords:before {
            content: '';
            display: block;
            width: 100%;
            padding-top: 27.27%;
            position: absolute;
            left: 0;
            top:0;
        }
        .album-amazon:before {
            background: url(../img/btn-amazon_sp.png) no-repeat left top;
            background-size: contain;
        }
        .album-animate:before {
            background: url(../img/btn-animate_sp.png) no-repeat left top;
            background-size: contain;
        }
        .album-towerrecords:before {
            background: url(../img/btn-towerrecords_sp.png) no-repeat left top;
            background-size: contain;
        }
        .bonus-title {
            font-size: 2rem;
        }
        .bonus-detail {
            font-size: 1.6rem;
            display: block;
        }
        .bonus-text img {
            display: none;
        }
        .bonus-list {
            position: static;
            display: block;
            padding: 0;
        }
        .bonus-image {
            margin-top: 15px;
            margin-left: 0;
        }
        .bonus-image img {
            width: 80%;
        }
        .bonus-note {
            text-align: left;
        }
        .bonus-title,
        .wallpaper-title,
        .listen-title,
        .making-title,
        .comment-title {
            font-size: 2.0rem;
        }
        .making-list li {
            float: none;
            width: 100%;
            padding-top: 56.25%;
            margin: 30px auto 0;
        }
        .making-list li + li {
            margin-left: auto;
        }
        .making-list li:first-child {
            margin-top: 0;
        }
        .making-list li .img img {
            width: 100%;
            height: auto;
        }
        .making-list li a:hover .img img {
            width: 120%;
            height: auto;
        }
        .making-list li .txt:after {
            width: 48px;
            height: 48px;
        }
    
        #listen .inner {
            display: block;
        }
        .listen-detail {
            width: 100%;
        }
        .listen-player {
            width: 100%;
            margin-top: 30px;
        }
        .comment-description {
            width: 90%;
        }
        .comment-name span {
            display: block;
            margin-right: 0;
        }
        .comment-text p span {
            padding: 5px 15px;
            line-height: 1.7;
        }

        .comment-list {
            margin-top: 30px;
        }
        .comment-list li + li {
            margin-top: 30px;
        }
    }

    #footer .inner {
        padding: 30px 15px;
    }
}

/**
 * Magnific Popup
 */

.mfp-iframe-holder .mfp-close {
    top: -30px;
    right: 0;
    width: 20px;
    height: 20px;
    background: url(../img/btn-close_popup.svg) no-repeat left top;
    background-size: cover;
}
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}