@charset "UTF-8";

/*
Theme Name:withreform
Description:withreform
Theme URI: -
Author: Stove & Lantern
Author URI: https://with-reform.net/
Version: 1.0
*/

/* section */
.section {padding:50px 100px;z-index: 1;color: #000; }
.section .inner {max-width: 1800px; margin: 0px auto; position: relative; z-index: 1;}
.section .inner .row {margin-left: -25px;margin-right: -25px;margin-bottom: 50px;}
.section .inner .row.non {margin-bottom: 0px;}
h1.Title {text-align: center;letter-spacing: 5px;font-size:36px;font-family: 'Lato', sans-serif;font-weight:700;line-height: 1em;}
@media screen and (max-width: 767px){
    .section {padding:0 20px 20px;z-index: 1;color: #000;}
    h1.Title {letter-spacing: 4px;font-size:24px;}
}

#mainVisual {position:relative;width: 100%;height: 100%;z-index: 0;background-color: #fff;}
#mainVisual > .inner {background-color: #666;display: block;width: calc(100% - 200px);height: calc(100% - 150px);position: absolute; top: 100px; right: 0;z-index: 1;overflow: hidden;background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url(images/common/mv_01.jpg);}
#mainVisual > .inner .leadwh {position: absolute; bottom:50px; left: -200px; z-index: 2; width: 900px}
#mainVisual .logo {width: 300px; height: 214px; position: absolute; top:25px; left: 50px; z-index: 99;}
#mainVisual .lead {position: absolute; bottom:100px; left: 50px; z-index: 0; width: 900px}
#mainVisual .arrow {height: 180px; width:100px; z-index:99; display: block; position:absolute; bottom:50px; right:50px;}
#mainVisual .arrow p { z-index:99;font-family: 'Lato', sans-serif;font-weight:400;color:#FFF;font-size: 12px;letter-spacing:1.5px;display: block; text-align: center; position: absolute;width: 100%;top:-25px;left: 0px;line-height: 1em;}
#mainVisual .arrow a {height: 180px; width: 100px;display: block;z-index:100; position: relative; overflow: hidden;}
#mainVisual .arrow a > .inner {height: 180px;width: 1px;top: 0;margin: 0;padding: 0;margin-left: 49px;display: block;position: relative;background-color:transparent;}
#mainVisual .arrow a > .inner .scrl {height: 180px;background-color:#FFF;position: absolute; left: 0px;width: 1px; z-index: 100;-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;}
#mainVisual .arrow a > .inner .scrl::before {content:'';background-color:#FFF;height: 1px; width: 10px; transform: rotate(-45deg); position: absolute; bottom: 2px; left: -1px; }
@-webkit-keyframes sdb {0% {transform: translate(0, -180px);}90% {transform: translate(0, 180px);}100% {-webkit-transform: translate(0, 180px);}}
@keyframes sdb {0% {transform: translate(0, -180px);}90% {transform: translate(0, 180px);}100% {-webkit-transform: translate(0, 180px);}}
@media screen and (max-width: 767px) {
    #mainVisual {height: 540px;margin-top: 60px;}
    #mainVisual > .inner {width:100%;height:100%;top: 0;}
    #mainVisual > .inner .leadwh { bottom:50px; left: 0px; z-index: 2; width: 100%;}
    #mainVisual .lead,
    #mainVisual .arrow,
    #mainVisual .logo {display: none;}
    @-webkit-keyframes sdb {0% {transform: translate(0, -100px);}90% {transform: translate(0, 100px);}100% {-webkit-transform: translate(0, 100px);}}
    @keyframes sdb {0% {transform: translate(0, -100px);}90% {transform: translate(0, 100px);}100% {-webkit-transform: translate(0, 100px);}}
}
@media screen and (max-width: 320px) {
    #mainVisual {height: 440px;margin-top: 60px;}
}

#presale {background-color:#e4007f; text-align: center; height: auto;}
#presale .inner {width:1200px;margin: 0 auto;padding: 25px 0}
#presale .inner h1 {font-size: 24px;color: #fff;font-weight: bold; line-height: 1.6em;}
#presale .inner .text {color: #fff; text-align: left;margin-top: 5px;}
#presale .inner .text p {margin-top: 10px;letter-spacing: 1px;}
#presale .inner .text p br {display:none;}
#presale .inner .text a {color: #fff;}
#presale .inner .text a:hover { text-decoration: underline;}
#presale .inner .btn {margin-top: 13px;}
@media screen and (max-width: 767px) {
    #presale .inner {width:auto;margin: 0;padding: 25px;}
    #presale .inner h1 {font-size: 21px;color: #fff;font-weight: bold; line-height: 1.8em;margin-bottom: 10px;}
    #presale .inner .text p {margin-top: 0px;letter-spacing: 1px;font-size: 11px;}
    #presale .inner .btn {margin: 20px auto 10px;}
}
@media screen and (max-width: 320px) {
    #presale .inner h1 {font-size: 18px;}
    #presale .inner .text p {margin-top: 0px;letter-spacing: 0px;font-size: 10px;}
}

.youtube {margin: 0px auto;padding-top: 50px; max-width: 1100px;}
@media screen and (max-width: 767px) {
    .youtube  {padding: 20px; }
}

#contents {min-width: 1200px; max-width: 1800px; margin: 0 auto;background-image: url(images/common/ami.png);background-position: center; background-repeat: repeat; background-size: 3px;position: relative;z-index: 0;}
@media screen and (max-width: 767px) {
    #contents {min-width: auto;margin-top: 0px;}
}

#interval {position: relative;z-index: 0;margin-top: 50px;width:100%; height: 600px;display: block;background-color: #333;background-size: cover; background-position: top center; background-repeat: no-repeat; background-image: url(images/common/outline.jpg);}
@media screen and (max-width: 767px) {
    #interval {margin-top: 0px;height: 300px;}
}

#outline {padding: 0px 0px 0px;position: relative;z-index: 1;}
#outline .inner {width: 100%;margin: 0 auto; padding: 0px 100px 50px;}
#outline .inner .titleBlock {width: 800px;margin: 0 auto; padding: 100px 0px;background-color: #000;position: relative;z-index: 1; color: #fff;z-index: 99;margin-top: -50px;}
#outline .inner .titleBlock::before {content: ''; position: absolute; top: 10px;left: 10px;width:calc(100% - 20px) ; height:calc(100% - 20px) ; display: block; border:1px solid #fff;}
#outline .inner .titleBlock h1 {display: block;font-family: 'Lato', sans-serif; line-height: 1em;font-weight:400;font-size: 46px; letter-spacing: 4px;margin-bottom:25px; text-align: center;}
#outline .inner .titleBlock h2 {display: block;font-family: 'Lato', sans-serif; line-height: 1em;font-weight:300;font-size: 36px; letter-spacing: 7px;margin-bottom:15px; text-align: center}
#outline .inner .titleBlock h3 {display: block;font-family: 'Lato', sans-serif; line-height: 1em;font-weight:400;font-size: 14px; letter-spacing: 6px;margin-bottom:0px; text-align: center}
#outline .inner .textArea {display: block; background-color: #fff;min-height: 300px;position:relative;margin-top: -50px;padding: 100px 150px;}
#outline .inner .textArea .lead {font-weight: bold; font-size: 24px;line-height: 2em;margin: 0 0px 50px;}
#outline .inner .textArea dl {font-size: 16px;line-height: 1.8em;}
#outline .inner .textArea dl dt {}
#outline .inner .textArea dl dd {}
#outline .inner .textArea dl,
#outline .inner .textArea dt,
#outline .inner .textArea dd {box-sizing: border-box;}
#outline .inner .textArea dl {border-bottom: 1px solid #ddd;}
#outline .inner .textArea dt,
#outline .inner .textArea dd {padding: 20px 20px 0 20px;border-top: 1px solid #ddd;}
#outline .inner .textArea dt { width: 30%;float: left; text-align: right;}
#outline .inner .textArea dd {background: #fff;margin-left: 30%;padding-bottom: 20px;}
#outline .inner .textArea dd:after {content: '';display: block;clear: both;}
#outline .inner .textArea dd ul {font-size: 14px;margin: 0;padding: 0;margin-bottom: 10px;}
#outline .inner .textArea dd ul li {display: block;margin-top: 20px;line-height: 1em;}
#outline .inner .textArea dd ul li:first-child {margin-top: 5px;}
#outline .inner .btn.std {position: relative;top: -43px;margin: 0 auto;}
@media screen and (max-width: 767px) {
    #outline .inner {width: 100%;margin: 0 auto; padding:0px 20px 0px;}
    #outline .inner .titleBlock {width:300px;margin: -25px auto 0; padding: 50px 0px;}
    #outline .inner .titleBlock::before {top: 5px;left: 5px;width:calc(100% - 10px) ; height:calc(100% - 10px);}
    #outline .inner .titleBlock h1 {display: block;font-family: 'Lato', sans-serif; line-height: 1em;font-weight:400;font-size: 24px; letter-spacing: 4px;margin-bottom:25px; text-align: center;}
    #outline .inner .titleBlock h2 {display: block;font-family: 'Lato', sans-serif; line-height: 1em;font-weight:300;font-size: 18px; letter-spacing: 5.5px;margin-bottom:15px; text-align: center}
    #outline .inner .titleBlock h3 {display: block;font-family: 'Lato', sans-serif; line-height: 1em;font-weight:400;font-size: 10px; letter-spacing: 2.5px;margin-bottom:0px; text-align: center}
    #outline .inner .textArea {padding: 80px 25px 50px;}
    #outline .inner .textArea .lead {font-size: 15px;line-height:1.8em;margin: 0 0px 25px;}
    #outline .inner .textArea .lead br {display: none;}
    #outline .inner .textArea dl {font-size: 14px;line-height: 1.8em;}
    #outline .inner .textArea dt,
    #outline .inner .textArea dd {padding: 20px 10px 0 10px;}
    #outline .inner .textArea dt { width:100%;float: none;text-align: left;display: block; font-weight: bold;}
    #outline .inner .textArea dd {margin-left: 0;border-top:none;padding-top: 10px;padding-bottom: 20px;}
    #outline .inner .textArea dd .btn.min {width: 100%;}
    #outline .inner .textArea dd ul {font-size: 13px;}
    #outline .inner .textArea dd ul li {margin-top: 10px;line-height: 1.8em;}
    #outline .inner .btn.std {position: relative;top: -33px;margin: 0 auto;}
}
@media screen and (max-width: 320px) {
        #outline .inner .titleBlock {width:260px;margin: -50px auto 0; padding: 50px 0px;}
}
#artist {padding-top: 0;position: relative;display: block;}
#artist .Title {z-index: 99;position: relative;margin-bottom: 100px;}
#artist .batsu {height: 2px; width: 200px; background-color: #000; position: absolute; top: 52%; left: 50%;margin-left: -75px;margin-top: -0px; transform: rotate(45deg);z-index: 999;}
#artist .batsu::before {content: '';position: absolute; top: -100px;left: 100px;height: 200px; width: 2px;background-color: #000; }
#artist::before {content:''; display: block;height: 600px; width: 80%;position: absolute; top: 30%; left: 10%;background-image: url(images/common/ami.png);background-position: center; background-repeat: repeat; background-size: 3px;z-index: 0;}
#artist .inner {line-height:2em;padding: 100px 100px;background-color: #fff; }
#artist .inner .profile {background-color: #FFF;padding: 75px 50px 50px;display: block;color: #000;}
#artist .inner .profile h2 {font-size: 21px;margin-bottom: 75px;display: block;line-height: 1em;font-weight:bold; letter-spacing: 5px;margin-top: 10px;}
#artist .inner .profile p {font-size: 13px;}
#artist .inner figure {position: relative;}
#artist .inner figure p {display: block;font-family: 'La Belle Aurore', cursive;line-height: 1em;font-weight:400; font-size:60px; line-height: 1em; left: 0; text-align: center;width: 100%;}
#artist .inner .toki { position: relative;display: block;width: 50%; float: left;}
#artist .inner .toki .profile {width: 550px;position: absolute; top: 50px;right: -500px;}
#artist .inner .toki figure p {position: absolute; bottom: -40px;}
#artist .inner .kan { position: relative;display: block;width: 50%; float: left;padding-left: 125px;}
#artist .inner .kan figure {margin-top: 550px;}
#artist .inner .kan .profile {width: 550px;position: absolute; bottom:50px;left: -375px;}
#artist .inner .kan .profile h2 { text-align: right;}
#artist .inner .kan figure p {position: absolute; top: -28px;}
#artist > .inner .sns {display: block;height:30px;width: 250px;margin: 25px auto 0; position: relative;z-index: 999;}
#artist > .inner .sns ul { height: 30px; text-align: left;font-size: 0; }
#artist > .inner .sns ul li {display:inline-block;;position: relative;width: 50px;height: 30px;}
#artist > .inner .sns ul li a {font-size:18px;width: 50px;height: 30px;color: #ccc;text-align: center;display: block;padding: 0px 0px 0;line-height: 30px;transition:all .5s ease;-webkit-transition:all .5s ease;}
#artist > .inner .sns ul li a:hover {color: #000;}
#artist .btn.std {position: relative;margin: -43px auto 0px;}
@media screen and (min-width: 1600px) {
    #artist .batsu {margin-top: 125px;margin-left: -150px;}
}
@media screen and (max-width: 1300px) {
    #artist .batsu {margin-top: -25px;}
    #artist .inner .profile {padding: 50px 50px 50px;}
    #artist .inner .profile h2 {margin-bottom: 50px;display: block;font-family: 'Lato', sans-serif; line-height: 1em;font-weight:400; letter-spacing: 5px;margin-top: 10px;}
}
@media screen and (max-width: 767px) {
    #artist .Title {margin-bottom: 50px;}
    #artist .inner {line-height:2em;padding: 50px 20px;background-color: #fff; }
    #artist::before {height: 1200px; width: 100%;top: 20%; left: 0;}

    #artist .batsu {height: 2px; width: 100px; background-color: #000; position: relative;top:inherit; left:inherit;margin:75px auto;}
    #artist .batsu::before {content: '';position: absolute; top: -50px;left: 50px;height: 100px; width: 2px;background-color: #000; }

    #artist .inner .toki { position: relative;display: block;width: 100%; float:none;padding-bottom: 0px;}
    #artist .inner .toki .profile,
    #artist .inner .kan .profile {;width:calc(100% - 20px);margin-left: 10px;margin-top: -20px; display: block;position: relative;top: inherit;bottom:inherit;left:inherit; right: inherit;}

    #artist .inner .kan { position: relative;display: block;width:100%; float:none;padding-left: 0px;}
    #artist .inner .kan figure {margin-top: 0px;}

    #artist .inner figure p,
    #artist .inner .kan figure p {font-size:36px;top: -13px;}

    #artist .inner .profile {background-color: #FFF;padding: 25px;display: block;color: #000;}
    #artist .inner .profile h2 {font-size: 21px;margin-bottom: 50px;display: block;line-height: 1em;font-weight:bold; letter-spacing: 5px;margin-top: 10px;}
    #artist .inner .profile p {font-size: 12px;line-height: 1.8em;}
    #artist .inner .kan .profile h2 { text-align: left;}
}

#welcomeAct {padding-top: 20px;}
#welcomeAct .inner {}
#welcomeAct .block {margin-top: -15px;padding: 50px;background-color: #fff;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
#welcomeAct .block figure {width: 50%;}
#welcomeAct .block .textArea { width: 50%;padding-left: 50px;}
#welcomeAct .block .textArea .text {}
#welcomeAct .block .textArea h2 {margin-top: 40px;font-family: 'La Belle Aurore', cursive;line-height: 1em;font-weight:400; font-size:48px;line-height: 1em;margin-bottom: 20px;}
#welcomeAct .block .textArea h3 {margin-bottom: 70px;}
#welcomeAct .block .textArea p {font-weight:bold; font-size:16px;margin-bottom: 5px;letter-spacing: 1px;}
#welcomeAct .block .textArea p span {font-size: 12px;font-family: 'Lato', sans-serif; line-height: 1em;font-weight:400; letter-spacing: 2px;margin-left: 20px;}
#welcomeAct .block .textArea .text {}
#welcomeAct .block .textArea .sns {display: block;height:30px;width: 250px;margin: 20px 0 0; position: relative;z-index: 999;}
#welcomeAct .block .textArea .sns ul { height: 30px; text-align: left;font-size: 0;margin-left: -15px;}
#welcomeAct .block .textArea .sns ul li {display:inline-block;;position: relative;width: 50px;height: 30px;}
#welcomeAct .block .textArea .sns ul li a {font-size:18px;width: 50px;height: 30px;color: #ccc;text-align: center;display: block;padding: 0px 0px 0;line-height: 30px;transition:all .5s ease;-webkit-transition:all .5s ease;}
#welcomeAct .block .textArea .sns ul li a:hover {color: #000;}
@media screen and (max-width: 767px) {
    #welcomeAct .block {margin-top: -10px;padding: 25px;background-color: #fff;display:block;-ms-flex-wrap:inherit;flex-wrap:inherit;}
    #welcomeAct .block figure {width: auto;margin: 20px -25px 0;}
    #welcomeAct .block .textArea { width: 100%;padding-left: 0px;}
    #welcomeAct .block .textArea h2 {text-align: center;margin-top: 40px;font-family: 'La Belle Aurore', cursive;line-height: 1em;font-weight:400; font-size:36px;line-height: 1em;margin-bottom: 20px;}
    #welcomeAct .block .textArea h3 {margin-bottom: 40px;}
    #welcomeAct .block .textArea p {font-weight:bold; font-size:16px;margin-bottom: 5px;letter-spacing: 1px;text-align: center;}
    #welcomeAct .block .textArea .sns {margin:25px auto 0;}
    #welcomeAct .block .textArea .text {font-size: 12px;line-height: 1.8em;}
    #welcomeAct .block .textArea .sns ul {margin-left: 0px;}
}




#ticket {padding: 0px 0px 0px;position: relative;z-index: 1;color: #fff;}
#ticket .inner {width: 100%;margin: 0 auto; padding:0px;}
#ticket .inner .Title {z-index: 99;position: relative;margin-bottom: 100px;}
#ticket .inner .textArea {display: block; background-color: #000; min-height: 300px;position:relative;margin-top:0px;padding: 100px 150px 50px;}
#ticket .inner .price {border-top: 1px solid #FFF;border-bottom: 1px solid #FFF;margin: 0;padding: 0;}
#ticket .inner .price li {position: relative;font-size: 24px;font-weight: bold;display: block; float: left; width: 50%;margin: 0;padding: 0; text-align: center;line-height: 100px; height: 100px;}
#ticket .inner .price li:first-child::before {content: '';display: block;height: 100px; width: 1px;background-color:#FFF; position: absolute; top: 0; right: 0;}
#ticket .inner .price li span {font-family: 'Lato', sans-serif; font-size: 48px;font-weight: 400;margin-left: 30px;letter-spacing: 2px;}
#ticket .inner p { text-align: right;margin-bottom: 60px;margin-top: 10px;}
#ticket .inner .ticketBtn {margin-bottom: 5px;}
#ticket .inner .ticketBtn {z-index: 0;background-color: #333;display: block;width:100%;height:80px;text-align:center;cursor:pointer;position:relative;overflow:hidden;}
#ticket .inner .ticketBtn a {position:relative;font-weight: bold;text-align: center;letter-spacing: 1px;font-size:24px;color:#FFF;text-decoration:none;line-height:80px;transition:all .3s ease;z-index:2;position:relative; display: block;}
#ticket .inner .ticketBtn a .fa-chevron-right {font-size: 24px;position: absolute;right: 25px;top: 50%;margin-top: -12px;transition:all .3s ease;}
#ticket .inner .ticketBtn a span {font-size:10px;margin-left: 25px;}
#ticket .inner .ticketBtn::before {content: '';position: absolute;bottom: 0;left: 0;z-index: 1;width: 160%;height: 100%;background: #666;transform-origin: right top;transform: skewX(-30deg) scale(0, 1);transition: transform .5s;}
#ticket .inner .ticketBtn:hover::before {transform-origin: left top;transform:skewX(-30deg) scale(1, 1);transition: transform .5s;}
#ticket .inner .ticketBtn:hover a {color: #fff;}
#ticket .inner .ticketBtn:hover {transition:.5s;}
#ticket .inner .code { text-align: center;margin-bottom: 25px;}
#ticket .inner .code li { display:inline-block; padding: 0 10px;font-family: 'Lato', sans-serif; line-height: 1em;font-weight:400; }
#ticket .inner .note { text-align: left;margin-top: 50px;}
#ticket .inner .note li { display:block;line-height: 1em;font-weight:400;margin-top: 15px;}
@media screen and (max-width: 767px) {
    #ticket .inner .Title {margin-bottom: 50px;}
    #ticket .inner .textArea {display: block; background-color: #000; min-height: 300px;position:relative;margin-top:0px;padding: 50px 25px 25px;}
    #ticket .inner .price {border-top:none;border-bottom: 1px solid #FFF;margin: 0;padding: 0;}
    #ticket .inner .price li {border-top: 1px solid #FFF;position: relative;font-size: 18px;font-weight: bold;display: block; float: none; width: 100%;margin: 0;padding: 0; text-align: center;line-height: 60px; height: 60px;}
    #ticket .inner .price li:first-child::before {content: none;}
    #ticket .inner .price li span {font-family: 'Lato', sans-serif; font-size: 30px;font-weight: 400;margin-left: 30px;letter-spacing: 2px;}
    #ticket .inner p { text-align: center;margin-bottom: 30px;margin-top: 5px;}

    #ticket .inner .ticketBtn {margin-bottom: 5px;}
    #ticket .inner .ticketBtn {height:60px;}
    #ticket .inner .ticketBtn a {font-size:18px;line-height: 60px;}
    #ticket .inner .ticketBtn a .fa-chevron-right {font-size: 18px;margin-top: -9px;}
    #ticket .inner .ticketBtn a span {font-size:10px;margin-left: 25px;}
    #ticket .inner .code { text-align: center;margin-bottom: 10px;}
    #ticket .inner .note { margin-top: 25px;}
    #ticket .inner .note li { display:block;line-height: 1.8em;font-weight:400;margin-top: 10px; font-size: 13px;}
}

#access {background-color: #fff;padding-bottom: 25px;}
#access .address {text-align: center;font-size: 12px;line-height: 60px; letter-spacing: 1px;}
#access .address span {font-weight: bold;margin-right: 15px;}
#access .address .btn {display: inline-block;margin-left: 50px;bottom: -20px;position: relative;}
@media screen and (max-width: 767px) {
    #access .address {padding: 0 20px;margin-top: 10px;text-align: center;font-size: 12px;line-height: 2em; letter-spacing: 1px;}
    #access .address span {font-weight: bold;margin-right: 0px;display: block;}
    #access .address .btn {display: block;margin-left: 0px;bottom: 0px;position: relative;width: 100%;}
}

#social { height: 30px;display: block;width: 100%;margin: 50px 0 50px;}
#social ul { text-align: center;width: 100%;margin: 0;padding: 0;}
#social ul li {display: inline-block!important; *display: block;*zoom:1;}
@media screen and (max-width: 767px) {
    #social { height: 30px;display: block;width: 100%;margin-bottom: 25px;}
}

/* --------------------------
* MediaQuery
-------------------------- */
/* pc width min */
@media screen and (min-width: 768px) {
    body,html {width: 100%; height: 100%;min-height: 640px;min-width: 1200px;}
    .row {max-width: 1800px; margin: 0 auto;padding: 0;}
    .sp_dspl { display:none!important;}
    .pc_dspl { display:block!important;}
    #spNav,#bottomNav,#hamburger {display: none;}
    .parent {display: flex;flex-direction: row;}

    #header { height: 100px;width:100%;display: block; position: absolute;top:0px; right: 0;z-index: 99;}
    #header > .inner {height: 100px;width:100%;display: block; position: relative;}
    #header > .inner .logo {display: none;width:100px;height:auto;position: absolute; top:40px; left:50px;margin: auto;z-index: 9;z-index: 10;transition:all .3s ease;-webkit-transition:all .3s ease;}
    #header > .inner .gnav {position: absolute;left: 0px;bottom:0px;line-height: 1em;z-index: 9;width: 100%;line-height: 60px;height: 60px;}
    #header > .inner .gnav > ul {font-size: 0; text-align: right;padding-right: 80px;}
    #header > .inner .gnav > ul > li {display: inline-block;font-size: 14px; font-weight: bold;height: 60px;}
    #header > .inner .gnav > ul > li > a {padding: 0px 20px 0;color: #333;display: block;height: 60px; position: relative;overflow: hidden;}
    #header > .inner .gnav > ul > li > a::before {position: absolute;bottom: 0;left: 0;z-index: -1;content: '';width: 160%;height: 3px;background: #000;transform-origin: right top;transform: scale(0, 1);transition: transform .3s;}
    #header > .inner .gnav > ul > li > a:hover::before {  transform-origin: left top;transform: scale(1, 1);transition: transform .5s;}
    #header > .inner .sns {display: block;height:30px;position: absolute; right:90px; top:35px;width: 200px; z-index: 9999;}
    #header > .inner .sns ul { height: 30px; text-align: left;font-size: 0; }
    #header > .inner .sns ul li {display:inline-block;;position: relative;width: 50px;height: 30px;}
    #header > .inner .sns ul li a {font-size:21px;width: 50px;height: 30px;color: #ccc;text-align: center;display: block;padding: 0px 0px 0;line-height: 30px;transition:all .5s ease;-webkit-transition:all .5s ease;}
    #header > .inner .sns ul li a:hover {color: #000;}
    #header > .inner h2 {display: none;}
    #header.fixed > .inner h2 {display: block;font-weight: bold;font-family: 'Lato', sans-serif;font-weight:700; letter-spacing: 1px;font-size: 10px; position: absolute; top: 26px; left: 140px;}
    #header.fixed > .inner {min-width: 1140px;background-color:rgba(255,255,255,1);height: 80px; width: 100%; display: block; position: fixed;top:-100px; left: 0; z-index: 99999;transition:all .3s ease;-webkit-transition:all .3s ease;transform: translateY(100px);box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);-moz-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);-o-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);-ms-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);}
    #header.fixed > .inner .logo {display: block;width:70px;height: 50px;position: absolute; top:10px; left:50px;margin: auto;z-index: 9;z-index: 109;}
    #header.fixed > .inner .gnav {top:10px;height: 70px}
    #header.fixed > .inner .gnav > ul > li {height: 70px;}
    #header.fixed > .inner .gnav > ul > li > a {height: 70px;}
    #header.fixed > .inner .sns {display: none;}

    #footer { position: relative;display: block;padding:25px 0 0;background-color: #000; color: #fff;}
    #footer .footNav {padding:50px 150px 25px;max-width: 1600px; margin: 0px auto;}
    #footer .footNav ul {font-size: 0; text-align:center;padding-right: 0px;}
    #footer .footNav ul > li {display: inline-block;font-size: 14px; font-weight: bold;height: 40px;}
    #footer .footNav ul > li > a {padding: 0px 20px 0;color: #FFF;display: block;height: 40px; position: relative;overflow: hidden; line-height: 30px;}
    #footer .footNav ul > li > a::before {position: absolute;bottom: 0;left: 0;z-index: 0;content: '';width: 160%;height: 1px;background: #FFF;transform-origin: right top;transform: scale(0, 1);transition: transform .3s;}
    #footer .footNav ul > li > a:hover::before {  transform-origin: left top;transform: scale(1, 1);transition: transform .5s;}
    #footer .inner {display: block; position: relative;padding: 0px 0 50px;}
    #footer .inner h1 {width: 240px; height:auto;margin: 0 auto;}
    #footer .inner h1 img { width: 100%; height:auto;display: block;padding-left: 40px;}
    #footer .inner .sns { width:100%; height: 20px;display: block;margin: 50px 0;}
    #footer .inner .sns ul {font-size: 0; text-align:center;width:100%;}
    #footer .inner .sns ul li { width: 20px;height: 20px; display: inline-block;margin:0 15px;}
    #footer .inner .sns ul li a { text-align: center;width: 20px;height: 20px; color:#333;font-size:24px;line-height: 20px;display: block;transition:all .3s ease;-webkit-transition:all .3s ease;}
    #footer .inner .sns ul li a figure img {margin-top: -6px; position: relative;width: 20px;height: 20px;}
    #footer .inner .sns ul li a:hover { color: #FFF;}
    #footer .inner .copyright {text-align:center;font-family: 'Lato', sans-serif;font-weight: 400;line-height: 1em;letter-spacing: 2px;display: block;font-weight: 400;font-size: 10px;position: relative;margin-top: 50px;}

    .bottomNav {display: none;}
}

/* smartphone */
@media screen and (max-width: 767px) {
    body,html {-webkit-overflow-scrolling: touch;overflow-x:hidden;display: block;position: relative;width: 100%; height:auto;}
    html {-webkit-text-size-adjust: 100%;}
    a:hover { text-decoration: none;}
    .sp_dspl { display:block!important;}
    .pc_dspl { display:none!important;}

    #header { height: 60px;width:100%;display: block; position: fixed;top:0px; right: 0;z-index: 9999;}
    #header > .inner {height: 60px;width:100%;display: block; position: relative; background-color: #fff;}
    #header > .inner h2 {display: none;}
    #header > .inner .logo {display: block;width:120px;height: auto;position: absolute; top:10px; left:20px;margin: auto;z-index: 9;z-index: 109;transition:all 0.5s ease;-webkit-transition:all 0.5s ease;}
    #header > .inner .gnav {display: none;}
    #header > .inner .sns {display: none;}
    #header.fixed > .inner .logo {display: block;width:55px;height: auto;position: absolute; top:11px; left:20px;margin: auto;z-index: 9;z-index: 109;}

    #hamburger {position:fixed;top: 16px; right: 20px;width: 30px;height: 29px;cursor: pointer;overflow: hidden;display: block;z-index: 99999999;}
    #hamburger span {display:block;box-sizing: border-box;transition:all 0.5s ease;-webkit-transition:all 0.5s ease;width: 100%;height: 2px;background-color:#000; position: absolute; left: 0;}
    #hamburger span:nth-of-type(1) {top: 4px;}
    #hamburger span:nth-of-type(2) {top: 13px;width: calc(100% - 5px);}
    #hamburger span:nth-of-type(3) {bottom: 5px;width: calc(100% - 10px);}
    #hamburger.active {}
    #hamburger.active span:nth-of-type(1) {width: 100%;background-color: #000; top: 0;-webkit-transform: translateY(13px) rotate(-45deg);transform: translateY(13px) rotate(-45deg);}
    #hamburger.active span:nth-of-type(2) {width: 100%;background-color: #000;bottom:0;-webkit-transform: translateY(0) rotate(45deg);transform: translateY(0) rotate(45deg);}
    #hamburger.active span:nth-of-type(3) {-webkit-transform: translateX(-100%);transform: translateX(-100%);}

    #footer .inner {display: block; position: relative;padding: 0px 0 100px;}
    #footer .inner h1 {width: 200px; height:auto;margin: 0 auto;}
    #footer .inner h1 img { width: 100%; height:auto;display: block;padding-left: 40px;}
    #footer .inner .sns { width:100%; height: 20px;display: block;margin: 50px 0;}
    #footer .inner .sns ul {font-size: 0; text-align:center;width:100%;}
    #footer .inner .sns ul li { width: 20px;height: 20px; display: inline-block;margin:0 15px;}
    #footer .inner .sns ul li a { text-align: center;width: 20px;height: 20px; color:#ddd;font-size:24px;line-height: 20px;display: block;transition:all .3s ease;-webkit-transition:all .3s ease;}
    #footer .inner .sns ul li a figure img {margin-top: -6px; position: relative;width: 20px;height: 20px;}
    #footer .inner .sns ul li a:hover { color: #000;}
    #footer .footNav {display: none;}
    #footer .inner .copyright {margin-top: 50px; font-family: 'Lato', sans-serif;font-weight: 400;line-height: 1em;letter-spacing: 1px;display: block;font-size: 10px;color:#000; text-align: center;}
    #footer .inner .copyright span {display: none;}

    #bottomNav {display: block; height: 70px; width: 100%; position: fixed; bottom: 0;left: 0; z-index: 99999;}
    #bottomNav ul {font-size: 0;margin-left: -1px;}
    #bottomNav ul li {display:block;width: 25%; height: 70px; float: left;}
    #bottomNav ul li a {padding-top: 15px;font-size: 24px;width: 100%; height: 70px!important;display: block; background-color: #000;border-left: 1px solid #333;color: #fff;text-align: center;}
    #bottomNav ul li a span {font-size: 10px; transform: scale(0.8);display: block;margin-top: 1px;}
    #bottomNav ul li a:hover {}

    #spNav {display: none;padding: 130px 0px 0px;background-color:#FFF; color: #333;z-index: 999999;position: fixed; top: 0; right: 0;height: 100%;width:300px;}
    #spNav h1 {display: block;width:120px;height: 25px;position: absolute; top:20px; left:20px;margin: auto;z-index: 9;z-index: 109;}
    #spNav p {width:260px;display: block;margin: 0 20px 30px;}
    #spNav p img {width:260px;display: block;}
    #spNavWrap {display: none;z-index: 999998; background-color: rgba(0,0,0,0.5); position: fixed; top: 0;left: 0; width: 100%; height: 100%;}
    #spNav > .inner {display: block;overflow-y:auto; height: 100%;border-top: 1px solid #ddd;width:300px;}
    #spNav > .inner ul li {border-top: 1px solid #ddd;line-height: 50px; font-size: 14px; }
    #spNav > .inner ul li a,
    #spNav > .inner ul li p {position: relative;display: block;padding: 0 20px;color: #333;}
    #spNav > .inner li a .fa-info-circle,
    #spNav > .inner li a .fa-guitar,
    #spNav > .inner li a .fa-ticket-alt,
    #spNav > .inner li a .fa-map-marked-alt,
    #spNav > .inner li a .fa-paper-plane{margin-right: 10px;font-size: 18px;width: 20px;}
    #spNav > .inner > ul {border-bottom: 1px solid #ddd;}
}