@charset "utf-8";

:root {
	--theme_color: #000;
	--keyc1:#dc5d3d;
	--keyc2:#406bb9;
    --color_gra:linear-gradient(90deg, rgba(13,127,198,1) 0%, rgba(118,114,136,1) 51%, rgba(234,102,58,1) 100%);
	--font1:'Josefin Sans','Noto Sans JP', sans-serif;
}

*{ box-sizing: border-box;word-break: break-all;}


/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.7em;
	color: #000;
    background-color: #000;
	margin: 0;
	min-height:100%;
}

.sp_only{display: none;}
.pc_only{display: initial;}

@media only screen and (max-width: 768px){
.sp_only{display: initial;}
.pc_only{display: none!important;}
}

html {overflow-y:scroll; height:100%;}
a {  text-decoration: none;  cursor: pointer;color:#229ccd; outline:none;transition:0.3s; }
a:link {  text-decoration: none; }
a:hover {  color: #dc5d3d;  text-decoration: none;}
a:active {  text-decoration: none;}
a img { outline:none;transition:0.3s;}
a:hover img {  opacity: .8;  -webkit-opacity: .8;  -moz-opacity: .8;  filter: alpha(opacity=80);  -ms-filter: "alpha(opacity=80)";transition:0.3s;}

.arrow{ position:relative;}
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    right: 4%;
    width: 4px;
    height: 4px;
    border: 1px solid;
    border-color: transparent #fff #fff transparent;
    transform: rotate(-45deg);
}


/* border
------------------------------------------------------ */
.l-border { pointer-events: none;}
.l-border__elm { position: fixed; background-color: #fff; z-index: 100000;}
.l-border__elm--bottom, .l-border__elm--top { height: 1vw; right: 0; left: 0; width: 100%;}
.l-border__elm--left, .l-border__elm--right { width: 1vw; top: 0; bottom: 0; height: 200vh;}
.l-border__elm--top { top: 0;}
.l-border__elm--right { right: 0;}
.l-border__elm--bottom { bottom: 0;}
.l-border__elm--left { left: 0;}

@media only screen and (max-width: 768px){
.l-border__elm--bottom, .l-border__elm--top { height: 2vw; }
.l-border__elm--left, .l-border__elm--right { width: 2vw; }
}


/* =fade
/********************** fade *******************************/
#js_fade2 {position : fixed;top : 0;left : 0;width: 100%; height : 100%;background-color: #000;background-image : url( ../images/loading_b.gif );background-repeat : no-repeat; background-position : 50% 50%; z-index:99;}

/********************** header *******************************/
header{  width:96vw; margin:1.6vw auto 0; position:fixed; top:0; left:2vw; z-index:999;transition: 1s; }

header .head_logo{line-height:0;transition: 0.3s;position:absolute;left:0;top: 10px;}
header .head_logo img{width: 36vw;}
header .head_logo.active{ top:-100px;}

.toggle_nav{ float:right;}

.nav nav{ display:inline-block}
.nav ul{ width: 100%; padding-right:10px;}
.nav li {display:inline-block;  float: left; margin-right:0.5em;}
.nav li a{ display:block;  font-family:var(--font1); font-weight:600; font-size:14px; color:#fff; transition: all 0.3s ease; width:8em; height:36px; line-height:34px; position:relative;}

.nav li a span.btm{ position: absolute; bottom: 0; left:0px; width: 0%; height: 2px; background: #fff;
    -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}
.nav li a:hover span.btm,
.nav li a.active span.btm{ width: 100%;}

.nav_trigger{display: none;}

aside.sns-wrap{ display: inline-block; padding-right:1vw;}
aside.sns-wrap li{ display:inline-block; float:left; margin-right:7px;}
aside.sns-wrap a{ width:30px;  padding:0; display:block;height:38px; line-height:30px;}
aside.sns-wrap img{ width:100%; vertical-align:middle;}

/* .archive .nav li a{ color:#fff;}
.archive .nav li a span.btm{ background-color:#fff;} */


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

header{ padding:4px 2%;}
header .head_logo{padding: 8px 0 0 0;left:2%;}
header .head_logo img{width: 78vw;}
	
.global{
 width:100%;
 position:fixed;
 z-index:10;
 top:0;
 left:0;
 overflow-y: hidden;
 padding-top:0;
 height:0;
 background:#000;
 box-sizing: border-box;
 -webkit-transition: 1s ease;
 -moz-transition: 0.5s ease;
 -o-transition: 0.5s ease;
 -ms-transition: 0.5s ease;
 transition:0.5s ease;
 }
.global li{width: 100%; display:inherit;}
.nav-active .global{ height:100vh;padding-top:50px;}
.nav li.sp_top{ display: inherit;}

.toggle_nav{ -webkit-transition: 0.2s ease;  -moz-transition: 0.2s ease;  -o-transition: 0.2s ease;  -ms-transition: 0.2s ease;  transition: 0.2s ease;}
.nav{ margin-bottom:0; width:100%; height:inherit;}
.nav ul{ padding-right:0;}
.nav li{ border-bottom:1px solid #fff;  margin-right: 0; float:none;}
.nav li:first-child{ border-top:1px solid #fff;}
.nav li a:hover,nav li a.at{  border-bottom: none;}
.nav li a{ width:100%; max-width:inherit; text-align:center; padding:6vw 0; height:auto; line-height:inherit; color: #fff;}
.nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
.nav li a.on{ border-bottom:none;}

.nav nav{ width:100%;}
aside.sns-wrap{ display:block; padding-right:0;}
aside.sns-wrap li{ width:33.33%; margin-right:0; border:none;}
aside.sns-wrap li:first-child{ border:none;}
aside.sns-wrap li a{ padding:3vw 0;}
aside.sns-wrap li img{ width:40%;}

/* Default navigation icon */
.nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right:4vw; top: 10px; z-index: 200;}
.nav-active .nav_trigger { opacity: 0.7;}
.nav_icon {display: inline-block;position: relative;width: 30px;height: 2px;background-color: #ffffff;-webkit-transition-property: background-color, -webkit-transform;transition-property: background-color, -webkit-transform;transition-property: background-color, transform;transition-property: background-color, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
.nav_icon:before,
.nav_icon:after {content: '';display: block;width: 30px;height: 2px;position: absolute;background: #ffffff;-webkit-transition-property: margin, -webkit-transform;transition-property: margin, -webkit-transform;transition-property: margin, transform;transition-property: margin, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
.nav_icon:before { margin-top: -8px;}
.nav_icon:after { margin-top: 8px;}
.nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
.nav-active .nav_icon:before {margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);background: #fff;}
.nav-active .nav_icon:after {margin-top: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);background: #fff;}

.nav li a:hover span.btm,
.nav li a.active span.btm{ display:none;}
.nav li a span.jp{ font-size:3vw;}


.archive .nav li a{ color:#fff;}
}

/* =btn
-----------------------------------------------------------------------------------------*/

/* =foot
-----------------------------------------------------------------------------------------*/
footer{position: relative;padding: 6vw 0;background-color: #EDEAE5;}

footer .spotifylogo img{ width:170px;}

footer .share{ display:table; margin:0 auto 50px;}
footer .share div{ display: table-cell; vertical-align:middle; padding:0 3px;}
footer .share div.sharetit{ padding:0 10px;  font-family:var(--font1); font-weight:bold;}
footer .share img{ width:50px; margin: 0 5px;}

footer .production{ margin-bottom:10px;}

footer .sponsor{ margin-bottom:20px;}
footer .sponsor p{ margin-bottom:5px;}
footer .sponsor li{ display:inline-block; width:180px; line-height:0;}
footer .sponsor li img{ width:100%;}

footer .contact{ font-weight:bold;}

/********************** share area *******************************/

@media only screen and (max-width: 768px){
footer{ padding:4vw 3% 8vw; font-size:12px; line-height:1.5em;}
footer .share img{ width:45px;}

footer .sponsor{ margin-bottom:10px;}
footer .sponsor ul:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
footer .sponsor li{ display:inline-block; width:50%; line-height:0; float:left; padding:2px;}

footer .spotifylogo img{ width:120px;}
footer .production{ margin-bottom:5px;}
}



/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#c3a368; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family: 'Oswald';font-size:12px;}
.page_top a:hover{background-color:#d1b582; text-decoration:none;}


@media only screen and (max-width: 768px){
.page_top{ display:none;}
}


/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}


/* = parallax
------------------------------------------------------------------------------------------*/

.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}



.fadeInRight {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInLeft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInLeft;
 animation-name: fadeInLeft;
 visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}