@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700|Montserrat:300,400,500,700|Oswald:400,700|Alatsi');
* {box-sizing:border-box;}
html, html a, * {-webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;}
body {margin:0 auto; padding:0; color:#333; -webkit-text-size-adjust:none; font-family:'Oswald', 'Noto Sans JP', Hiragino Sans, Hiragino Kaku Gothic ProN, 'Meiryo', sans-serif; font-weight:400; font-size:14px; line-height:1.75; word-wrap:break-word;}
pre {color:#fff;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {line-height:1.75;}
a {color:#fff; transition:all .3s ease-in-out;}
a:hover {color:#fff; text-decoration:underline;}
p {margin-bottom:0;}
img[src$='.svg'] {width:100%; height:auto;}
.bg-cover {position:relative; background-size:cover; background-position:top -50px center; background-repeat:no-repeat;}
.bg-cover::before {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .75));}
.bg-position-top {background-position:top center;}
.btn {position:relative; overflow:hidden; transition:all .3s ease-in-out;}
.btn.focus, .btn:focus {box-shadow:none;}
.btn-sm {line-height:1;}
.more {margin-top:2rem; text-align:center;}
.btn-more {padding:.75rem 3rem; border:1px solid #fff; border-radius:0; color:#fff;}
.btn-more::before,
.btn-more::after {position:absolute; z-index:-1; display:block; content:'';}
.btn-more::after {top:0; left:-100%; width:100%; height:100%; transition:all .3s ease-in-out;}
.btn-more:hover {color:#000;}
.btn-more:hover::after {left:0; background-color:#fff;}
.btn-other {padding:.5rem 1rem; border:1px solid #fff; border-radius:0; color:#fff;}
.btn-other::before,
.btn-other::after {position:absolute; z-index:-1; display:block; content:'';}
.btn-other::after {top:0; left:-100%; width:100%; height:100%; transition:all .3s ease-in-out;}
.btn-other:hover {color:#000;}
.btn-other:hover::after {left:0; background-color:#fff;}
.modal-content {background-color:#000; border:none; border-radius:0; color:#fff;}
.modal-content .close {display:block; position:absolute; top:0; right:0; width:30px; height:30px; background-image:url(../images/common/close.svg); background-size:30px auto; background-repeat:no-repeat; background-position:center center; opacity:.75; z-index:10; cursor:pointer; transition:all .3s ease-in-out;}
.modal-content .close:hover {opacity:1 !important;}

#loading {display:flex; align-items:center; justify-content:center; position:fixed; z-index:999; width:100%; height:100%; background-color:#000; transition:all .3s ease .8s; z-index:100;}
#loading::after {content:''; display:block; width:150px; height:100%; position:absolute; top:-180px; left:0; background-color:rgba(255, 255, 255, .375); opacity:0; transform:rotate(45deg); animation:reflect 3s 0s ease-in-out infinite; z-index:1;}
@keyframes reflect {
0% { transform:scale(0) rotate(45deg); opacity:0; }
80% { transform:scale(0) rotate(45deg); opacity:0.5; }
81% { transform:scale(4) rotate(45deg); opacity:1; }
100% { transform:scale(50) rotate(45deg); opacity:0; }
}
.loaded #loading {transform:scaleY(0);}
.loader {display:inline-block; position:relative; width:320px; height:auto; z-index:2;}
.loader .img-logo {animation:zoom 2s ease-in-out;}
@keyframes zoom {
0% { transform:scale(3); opacity:0; }
100% { transform:scale(1); opacity:1; }
}
.loader .img-10th {width:250px;}

body {position:relative; background-color:#000;}
body.page-index::before {position:absolute; display:block; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0); content:''; z-index:10;}

#wrapper {position:relative; min-height:100%;}

#header {padding-top:1rem; padding-bottom:1rem; background-color:transparent; border-bottom:1px solid rgba(255, 255, 255, .175); z-index:1060; transition:all .3s ease-in-out;}
#header.active,
#header.scrolling {min-height:70px; background-color:rgba(0, 0, 0, .9);}
#header.active {min-height:100vh; align-items:start !important;}
#header #navigation {width:100%; padding:0;}
#header #navigation .navbar-brand {width:110px; height:auto; margin:0; padding:0; line-height:1; z-index:1000; visibility:visible; opacity:1; transition:all .3s ease-in-out;}
#header.scrolling #navigation .navbar-brand {width:90px;}
#header #navigation .navbar-brand a {display:block; width:100%; height:100%;}
#header #navigation .navbar-toggler {position:absolute; top:0; right:0; width:50px; height:50px; padding:0; background-color:transparent; border:none; border-radius:0; outline:none; z-index:1000; transition:all .3s ease-in-out;}
#header #navigation .navbar-toggler .navbar-toggler-bar {display:block; height:2px; background-color:#fff; position:absolute; right:0; transition:all .3s ease-in-out;}
#header #navigation .navbar-toggler .navbar-toggler-bar:nth-child(1) {top:calc(50% - 7px); width:50px;}
#header #navigation .navbar-toggler .navbar-toggler-bar:nth-child(2) {top:calc(50% - 1px); width:35px;}
#header #navigation .navbar-toggler .navbar-toggler-bar:nth-child(3) {top:calc(50% + 5px); width:20px;}
#header #navigation .navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(1) {top:calc(50% - 1px); right:10px; width:35px; transform:rotate(45deg);}
#header #navigation .navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(2) {visibility:hidden; opacity:0;}
#header #navigation .navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(3) {top:calc(50% - 1px); right:10px; width:35px; transform:rotate(-45deg);}
#header #navigation .navbar-nav .nav-link {padding-left:1rem; padding-right:1rem; font-family:'Alatsi', sans-serif; letter-spacing:.15rem;}
#header #navigation .navbar-nav .nav-link:hover {color:#c00000;}
#header #navigation .navbar-global {padding-top:1rem; padding-bottom:1rem;}
#header #navigation .navbar-language {display:block; overflow:hidden; padding-top:1rem; border-top:1px solid rgba(255, 255, 255, .175);}
#header #navigation .navbar-language .nav-item {position:relative; display:block; float:left; width:50%; text-align:center;}
#header #navigation .navbar-language .nav-item:first-child::before,
#header #navigation .navbar-language .nav-item:last-child::after {position:absolute; top:calc(50% - 10px); content:''; width:1px; height:20px; background-color:rgba(255, 255, 255, .175);}
#header #navigation .navbar-language .nav-item:first-child::before {right:0;}
#header #navigation .navbar-language .nav-item:last-child::after {left:0;}

.container {min-width:auto;}

body:not(.page-index) .content {padding-top:82px;}

/*----------
COMMON
----------*/
.list-news .article .article-title {margin-bottom:0;}
.list-news .article .article-link {display:block;}
.list-news .article .article-link:hover {text-decoration:none; opacity:.5;}
.list-sns {text-align:center;}
.list-sns > ul {display:inline-block; overflow:hidden;}
.list-sns > ul > li {float:left;}
.list-sns > ul > li:not(:last-child) {margin-right:1rem;}
.list-sns > ul > li > a {display:block; padding-top:.5rem; width:40px; height:40px; line-height:1; border:1px solid rgba(255, 255, 255, .175); font-size:1.25rem;}
.list-sns > ul > li > a:hover {background-color:#fff; color:#000;}
.list-local-nav {margin-bottom:3rem; text-align:center;}
.list-local-nav > ul {display:inline-block; overflow:hidden; margin:0; padding-left:0; list-style:none;}	
.list-local-nav > ul > li {float:left;}
.list-local-nav > ul > li:not(:last-child) {margin-right:.5rem;}
.list-local-nav > ul > li > a {position:relative; display:block; padding-left:.25rem; padding-right:.25rem; padding-bottom:.15rem; text-decoration:none; font-size:1rem; letter-spacing:.15rem;}
.list-local-nav > ul > li > a::after {position:absolute; bottom:0; left:calc(50% - 15px); width:30px; height:2px; content:''; background-color:#fff; opacity:0; transition:all .3s ease-in-out;}
.list-local-nav > ul > li > a:hover::after,
.list-local-nav > ul > .active > a::after {opacity:1;}

/*----------
INDEX
----------*/
#tubular-container {display:none !important;}

.section {position:relative; padding-top:3rem; padding-bottom:3rem; overflow:hidden; background-color:#000; color:#fff; z-index:10;}
.section-heading {margin-bottom:2rem; padding-bottom:1rem; text-align:center; position:relative; line-height:1; font-family:'Oswald', sans-serif; letter-spacing:.15rem;}
.section-heading::after {position:absolute; bottom:0; left:calc(50% - 35px); content:''; background-color:#fff; display:block; width:70px; height:2px;}
.section-content {color:#fff;}

#main-visual {padding-top:0; padding-bottom:0; position:relative; height:100vh; background-image:url(../images/page-index/dot.png); background-position:top left; background-repeat:repeat; background-size:2px;}
#main-visual::after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background-image:url(../images/page-index/dot.png); background-position:top left; background-repeat:repeat; background-size:2px; z-index:5;}
#main-visual .swiper-container {width:100%; height:100%;}
#main-visual .swiper-slide {background-size:cover; width:100%; height:100vh;}

#release .box-release {margin-bottom:1rem; padding:0; background-color:rgba(0, 0, 0, .85); text-align:center;}
#release .box-release strong {font-size:1rem;}
#release .box-release .box-release-title {font-size:.9rem; line-height:1.25;}
#release .box-release .box-release-links {margin-top:5px;}
#release .box-release .box-release-links a {display:block; margin:0 5px 10px;}
#release .official-links {padding-left:0; list-style:none;}
#release .official-links > li:not(:last-child) {margin-bottom:10px;}
#release .official-links > li:nth-child(1) a,
#release .official-links > li:nth-child(2) a {padding-left:75px; padding-right:75px;}
#release .official-links a {position:relative; display:block; padding:10px 15px; background-color:rgba(0, 0, 0, .85); border:1px solid rgba(255, 255, 255, .175); text-align:center;}
#release .official-links a:hover {opacity:.75;}
#release .btn-release {display:block; margin-top:10px; padding:10px 5px; background-color:rgba(0, 0, 0, .85); border:1px solid rgba(255, 255, 255, .175); text-align:center;}

#introduction {height:auto;}
#introduction .introduction-wrap {position:relative; height:120vh; display:flex; justify-content:center; align-items:center;}
#introduction .introduction {position:static; top:0; left:0; width:100%; height:120vh; padding-top:8rem; padding-bottom:3rem;}
#introduction .introduction .animation {margin:0; display:block; position:relative; margin:0 auto; height:auto; transform:translateX(0);}
#introduction .introduction .animation:not(:last-child) {margin-bottom:3rem;}
#introduction .introduction .animation img {width:100%;}
#introduction .introduction .animation-1 {width:50%; left:-50%;}
#introduction .introduction .animation-2 {width:80%; left:80%;}
#introduction .introduction .animation-3 {width:80%; left:-80%;}

#movie .swiper-pagination {position:static;}
#movie .swiper-slide {position:relative; cursor:pointer;}
#movie .swiper-slide::before,
#movie .swiper-slide::after {position:absolute; content:'';}
#movie .swiper-slide::before {top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, .35); transition:all .5s ease-in-out;}
#movie .swiper-slide::after {top:0; left:0; width:100%; height:100%; background-image:url(../images/common/video-play.svg); background-size:130px auto; background-repeat:no-repeat; background-position:center center; transition:all .5s ease-in-out;}
#movie .swiper-slide:hover::before {opacity:.5;}
#movie .swiper-slide:hover::after {transform:scale(1.15);}
#movie .swiper-pagination-bullet {width:70px; height:3px; background-color:#fff; border-radius:0; opacity:.5;}
#movie .swiper-pagination-bullet-active {opacity:1;}

#profile .list-members .item-profile:not(:last-child) {padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid rgba(255, 255, 255, .175);}
#profile .list-members .item-profile .item-profile-title {font-size:1.25rem;}
#profile .list-members .item-profile .item-profile-excerpt {margin-bottom:1.5rem; padding:.5rem 1rem; background-color:rgba(255, 255, 255, .1); font-size:.75rem;}

#news .list-news .article:not(:last-child) {padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid rgba(255, 255, 255, .175);}
#news .list-news .article .article-title {font-size:1rem;}

#discography .discography-loading {text-align:center; padding-top:5rem; padding-bottom:5rem;}
#discography .list-discography .item-discography {display:block; margin-bottom:3rem;}
#discography .list-discography .item-discography:hover {text-decoration:none; opacity:.5;}
#discography .list-discography .item-discography-thumbnail {margin-bottom:1rem;}
#discography .list-discography .item-discography-title {margin-bottom:0; font-size:1rem;}

.shop-link {display:block;}
.shop-link-text {margin-top:5px; text-align:left; font-size:12px; display:none;}
.modal {z-index:2000;}

#about {padding-top:3rem; padding-bottom:1rem;}
#about .section-heading {margin-bottom:1rem;}
#about .section-content p {font-size:.8rem;}
#about .section-content .more {margin-top:1rem;}

/*----------
PAGE COMPONENTS
----------*/
.page-header {padding-top:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255, 255, 255, .175); color:#fff;}
.page-header .page-title {margin-bottom:0; padding-bottom:1rem; text-align:center; position:relative; line-height:1; font-size:2rem; font-family:'Oswald', sans-serif; letter-spacing:.15rem;}
.page-header .page-title::after {position:absolute; bottom:0; left:calc(50% - 35px); content:''; background-color:#fff; display:block; width:70px; height:2px;}
.paging {display:inline-block; margin-top:2rem; text-align:center;}
.paging > li {display:inline-block;}
.paging > li > a,
.paging > li > span {display:inline-block; padding:1rem; font-size:1.25rem; font-weight:700;}

/*----------
ARTICLE
----------*/
.article .article-title {margin-bottom:1.5rem; font-size:1.25rem;}
.article .article-content {color:#fff !important;}
.article .article-content img {max-width:100%; height:auto;}
.article .article-content iframe {width:100%;}

/*----------
MEMBER
----------*/
#member .article-sns {margin-bottom:2rem; text-align:center;}
#member .article-sns .social-link {display:inline-block; width:40px; height:40px; padding-top:10px; background-color:rgba(255, 255, 255, .175); border-radius:50%;}
#member .article-sns .social-link:hover {background-color:rgba(255, 255, 255, 1); color:#000;}
#member .article-sns .social-link:not(:last-child) {margin-right:1rem;}
#member .article-sns i {font-size:1.25rem;}
#member .article-sns .social-twitter {background-color:#1da1f2;}
#member .article-sns .social-instagram {background-color:#d93177;}
#member .article-sns .social-weibo {background-color:#d52a2c;}
#member .article-sns .social-home {background-color:background-color:rgba(255, 255, 255, .175); color:#fff;}
#member .article-thumbnail {margin-bottom:3rem;}
#member .article-content {color:#fff !important;}

/*----------
MOVIES
----------*/
#movie .list-movies .item-movie {display:block; position:relative; margin-bottom:2rem; overflow:hidden; background-color:#000; border:1px solid rgba(255, 255, 255, .175); padding:1rem; cursor:pointer;}
#movie .list-movies .item-movie::before,
#movie .list-movies .item-movie::after {position:absolute; content:'';}
#movie .list-movies .item-movie::before {top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, .5); opacity:.5; transition:all .5s ease-in-out;}
#movie .list-movies .item-movie::after {top:0; left:0; width:100%; height:100%; background-image:url(../images/common/video-play.svg); background-size:65px auto; background-repeat:no-repeat; background-position:center center; transition:all .5s ease-in-out;}
#movie .list-movies .item-movie:hover::before {opacity:0;}
#movie .list-movies .item-movie:hover::after {transform:scale(1.15);}

/*----------
PRODUCT
----------*/
#product .product-release-date {}
#product .product-text {margin-bottom:5rem;}
#product .article-product:not(:last-child) {padding-bottom:1.5rem; margin-bottom:3rem; border-bottom:1px solid rgba(255, 255, 255, .175);}
#product .article-product-meta-disk-type {font-size:1.5rem; line-height:1.5;}
#product .item-disk {height:100%; padding:.5rem 1rem .75rem; border:1px solid rgba(255, 255, 255, .175); transition:all .3s ease-in-out;}
#product .item-disk:hover {background-color:rgba(255, 255, 255, .1);}
#product .item-disk-title {border-bottom:1px solid rgba(255, 255, 255, .175); padding-bottom:.25rem; font-size:1.25rem;}
#product .list-audio {}
#product .list-audio > .list-group-item {padding:.25rem .5rem; background-color:transparent; border:none; border-radius:0; transition:all .3s ease-in-out;}
#product .list-audio > .list-group-item:hover {background-color:rgba(255, 255, 255, .1);}
#product .list-audio > .list-group-item .list-group-item-text2 {font-size:85%;}
#product .list-audio > .list-group-item .btn-audio,
#product .list-audio > .list-group-item .btn-youtube {display:block; width:auto; height:25px; border:none;}
#product .list-audio > .list-group-item .btn-audio {color:#fff;}
#product .list-audio > .list-group-item .btn-youtube {color:#fe0000;}
#product .list-audio > .list-group-item .btn-audio::before,
#product .list-audio > .list-group-item .btn-youtube::before {font-family:'FontAwesome';}
#product .list-audio > .list-group-item .btn-audio::before {content:'\f144';}
#product .list-audio > .list-group-item .btn-audio.on::before {content:'\f28b';}
#product .list-audio > .list-group-item .btn-youtube::before {content:'\f16a';}
.modal-links a {display:block; padding:10px;}
.modal-links {text-align:center;}
.modal-links.official a {display:inline-block; padding:5px 10px; border:1px solid #fff;}
.modal-links.official a:hover {background-color:#fff; color:#000; text-decoration:none;}
.modal-links.official a:not(:last-child) {margin-right:.5rem;}

/*----------
FOOTER
----------*/
#menu .list-menu {overflow:hidden;}
#menu .list-menu > .item-menu {position:relative; float:left; display:block; overflow:visible; width:50%; height:auto; text-decoration:none; transition:all .2s ease-in-out;}
#menu .list-menu > .item-menu img {width:100%; height:auto;}
#menu .list-menu > .item-menu h3 {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; margin-bottom:0; line-height:1; letter-spacing:.15rem; font-size:1.25rem;}

#pagetop {position:fixed; right:15px; bottom:15px; text-align:center; z-index:100; opacity:0; text-decoration:none; transition:all .3s ease-in-out;}
#pagetop i {display:block; width:50px; height:50px; padding-top:5px; background-color:rgba(0, 0, 0, .75); font-size:36px; line-height:1; color:#fff;}
#pagetop i:hover {background-color:rgba(0, 0, 0, 1);}

footer {position:relative; z-index:10;}

@media (min-width:576px) {
    /*----------
    INDEX
    ----------*/
    #introduction .introduction-wrap {height:200vh;}
    #introduction .introduction {height:200vh; padding-top:0;}
}

@media (min-width:768px) {
    body {min-width:1080px;}
    body:not(.page-index) .content {padding-top:90px;}
    .modal-content .close {top:-30px; right:-30px; width:65px; height:65px; background-image:url(../images/common/close.svg); background-size:65px auto;}
    .container {min-width:1080px; max-width:1080px;}
    #loading::after {width:300px;}
    .loader {width:400px; height:auto;}
    .loader .img-10th {width:300px;}
    #header {padding-top:0; padding-bottom:0; min-height:90px;}
    #header #navigation .navbar-brand {}
    #header #navigation .navbar-brand a {}
    #header #navigation .navbar-toggler {position:static; width:60px; height:60px;}
    #header #navigation .navbar-toggler .navbar-toggler-bar {}
    #header #navigation .navbar-toggler .navbar-toggler-bar:nth-child(1) {top:calc(50% - 11px); width:60px;}
    #header #navigation .navbar-toggler .navbar-toggler-bar:nth-child(2) {width:40px;}
    #header #navigation .navbar-toggler .navbar-toggler-bar:nth-child(3) {top:calc(50% + 9px); width:20px;}
    #header #navigation .navbar-toggler.active {}
    #header #navigation .navbar-toggler.active .navbar-toggler-bar:nth-child(1) {width:40px;}
    #header #navigation .navbar-toggler.active .navbar-toggler-bar:nth-child(3) {width:40px;}
    #header #navigation .container {padding-left:0; padding-right:0;}
    #header #navigation .navigation {padding-top:140px; padding-bottom:0; padding-left:50px; padding-right:50px;}
    #header #navigation .navbar-global {padding-top:0; padding-bottom:0;}
    #header #navigation .navbar-language {display:flex; justify-content:flex-end; padding-top:0; border-top:none;}
    #header #navigation .navbar-language .nav-item {float:none; width:auto; text-align:left;}
    #header #navigation .navbar-language .nav-item:first-child::before,
    #header #navigation .navbar-language .nav-item:last-child::after {position:absolute; top:calc(50% - 10px); content:''; width:1px; height:20px; background-color:rgba(255, 255, 255, .175);}
    #header #navigation .navbar-language .nav-item:first-child::before {right:0;}
    #header #navigation .navbar-language .nav-item:last-child::after {left:0;}

    /*----------
    COMMON
    ----------*/
    .list-local-nav > ul > li:not(:last-child) {margin-right:1rem;}
    .list-local-nav > ul > li > a {padding-left:.5rem; padding-right:.5rem; padding-bottom:.25rem; font-size:1.25rem; letter-spacing:.15rem;}

    /*----------
    INDEX
    ----------*/
    #tubular-container {display:block !important;}

    .section {padding-top:5rem; padding-bottom:5rem;}

    #main-visual {padding-top:0; padding-bottom:0; height:100vh;}
    #main-visual .box-release {position:fixed; width:240px; right:50px; bottom:221px; padding:20px 15px; background-color:rgba(0, 0, 0, .85); text-align:center; color:#fff; z-index:8;}
    #main-visual .box-release strong {font-size:.9rem;}
    #main-visual .box-release strong span {font-size:.8rem;}
    #main-visual .box-release .box-release-title {font-size:.8rem; line-height:1.25;}
    #main-visual .box-release .box-release-links {margin-top:5px;}
    #main-visual .box-release .box-release-links a {display:block; margin:0 5px 10px;}
    #main-visual .official-links {position:fixed; width:240px; right:50px; bottom:50px; margin-bottom:0; list-style:none; padding-left:0; z-index:8;}
    #main-visual .official-links > li:not(:last-child) {margin-bottom:1px;}
    #main-visual .official-links a {position:relative; display:block; padding:10px 15px; background-color:rgba(0, 0, 0, .85); text-align:center;}
    #main-visual .official-links a:hover {opacity:.75;}
    #main-visual .btn-main-visual-video {position:fixed; bottom:50px; left:50px; color:#fff; z-index:10;}
    #main-visual .btn-main-visual-video:hover {color:#c00000;}
    #main-visual .btn-main-visual-video span {font-size:.85rem;}

    #release .box-release {padding:20px 15px;}

    #introduction .introduction-wrap {}
    #introduction .introduction {padding-top:5rem; padding-bottom:5rem;}

    #news .list-news .article .article-title {font-size:1.25rem;}

    #discography .list-discography .item-discography-title {font-size:1.25rem;}

    #about {padding-top:10rem; padding-bottom:3rem;background-position:top -30px center;}
    #about .section-heading {margin-bottom:2rem;}
    #about .section-content p {font-size:14px;}
    #about .section-content .more {margin-top:2rem;}

    #profile .list-members .item-profile:not(:last-child) {padding-bottom:3rem; margin-bottom:3rem;}
    #profile .list-members .item-profile .item-profile-title {font-size:1.75rem;}
    #profile .list-members .item-profile .item-profile-excerpt {padding:0; background-color:transparent; font-size:.8rem;}

    /*----------
    PAGE COMPONENTS
    ----------*/
    .page-header {padding-top:5rem; padding-bottom:5rem;}
    .page-header .page-title {font-size:2.5rem;}

    /*----------
    ARTICLE
    ----------*/
    .article .article-title {margin-bottom:2rem; font-size:1.75rem;}

    /*----------
    MEMBER
    ----------*/
    #member .article-sns {margin-bottom:3rem;}
    #member .article-sns .social-link {width:50px; height:50px; padding-top:12px;}
    #member .article-sns .social-link:not(:last-child) {margin-right:1rem;}
    #member .article-sns i {font-size:1.5rem;}

    /*----------
    FOOTER
    ----------*/
    #menu .list-menu {}
    #menu .list-menu > .item-menu {width:14.285714%; height:500px;}
    #menu .list-menu > .item-menu img {width:auto; height:500px; -webkit-filter:grayscale(100%); filter:grayscale(100%); transition:all .3s ease-in-out;}
    #menu .list-menu.active > .item-menu {width:14%;}
    #menu .list-menu.active > .item-menu.active {width:16%;}
    #menu .list-menu.active > .item-menu.active img {-webkit-filter:grayscale(0); filter:grayscale(0);}
    #menu .list-menu > .item-menu h3 {top:0; left:0; display:block; width:auto; height:auto; font-size:1.75rem; transform:rotate(90deg) translate(20px, -48px); transform-origin:top left; z-index:5;}

    #pagetop {position:fixed; right:50px; bottom:50px;}
}