/*common*/
#nishite_area {
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#nishite_area img {
	width: 100%;
	height: auto;
}
#nishite_area .scobj {
opacity: 0;
transition: 0.6s cubic-bezier(0,0.6,0.6,1.0);
transform: translate(0,25%);
}
#nishite_area .scobj.active {
opacity: 1;
transform: translate(0,0);
}

/*nav*/
#nishite_area .nishite_nav_area {
width: 100%;
position: relative;
z-index: 10;
}
#nishite_area .nishite_nav_area .nishite_logo {
width: 254px;
position: absolute;
top: 27px;
left: 29px;
}
#nishite_area .nishite_nav_area .nishite_nav {
position: absolute;
width: 595px;
top: 22px;
right: 10px;
}
#nishite_area .nishite_nav_area .nishite_nav.hanabi {
top: 3px;
}
#nishite_area .nishite_nav_area .nishite_nav  {
display: flex;
justify-content: space-between;
align-items: center;
}
#nishite_area .nishite_nav_area .nishite_nav li a {
width: auto;
height: 27px;
padding: 5px;
margin: 0 15px;
display: block;
flex: 1;
position: relative;
}
#nishite_area .nishite_nav_area .nishite_nav li.nav01 {
width: 298px;
}
#nishite_area .nishite_nav_area .nishite_nav li.nav02 {
width: 165px;
}
#nishite_area .nishite_nav_area .nishite_nav li.nav03 {
width: 132px;
}
#nishite_area .nishite_nav_area .nishite_nav li a img {
vertical-align: baseline;
}
#nishite_area .nishite_nav_area .nishite_nav li a::after {
content: "／";
position: absolute;
top: 0;
right: -25px;
color: #FFF;
}
#nishite_area .nishite_nav_area .nishite_nav.hanabi li a::after {
color: #003886;
}
#nishite_area .nishite_nav_area .nishite_nav li:last-child a::after {
content: none;
}
#nishite_area .btn_menu ,
#nishite_area .nishite_nav_area .nishite_nav li.close {
display: none;
}

/*sec*/
#nishite_area #sec01 ,
#nishite_area #sec02 ,
#nishite_area #sec03 {
width: 430px;
margin: 0 auto 50px;
}

/*mv*/
#nishite_area #nishite_mv {
position: relative;
}
#nishite_area #nishite_mv .hanabi_copy {
display: none;
}

/*about*/
#nishite_area #nishite_about01 .about_inner {
width: 90%;
max-width: 950px;
margin: 0 auto;
padding: 40px 0 120px;
}
#nishite_area .nishite_about02 {
width: 100%;
padding-top: 31.6%;
background: url("../img/bg_about.jpg") 0 0 no-repeat;
background-size: 100% auto;
position: relative;
}
#nishite_area .nishite_about02 p.scobj {
width: 85%;
max-width: 833px;
margin: 0 auto;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-30%);
}
#nishite_area .nishite_about02 p.scobj.active {
transform: translate(-50%,-50%);
}

/*about_hanabi*/
#nishite_area #nishite_about01_hanabi .about_inner_hanabi {
width: 100%;
padding-top: 53.5%;
background: url("../img/bg_about_hanabi.jpg") 0 0 no-repeat;
background-size: 100% auto;
position: relative;
}
#nishite_area #nishite_about01_hanabi .about_inner_hanabi p {
width: 70%;
max-width: 950px;
margin: 0 auto;
position: absolute;
top: 27%;
left: 50%;
transform: translate(-50%,-50%);
}
#nishite_area #nishite_about01_hanabi .about_inner_hanabi .about_hanabi_img {
width: 35%;
max-width: 750px;
margin: 0 auto;
position: absolute;
top: 50.4%;
left: 50%;
transform: translate(-50%,10%);
}
#nishite_area #nishite_about01_hanabi .about_inner_hanabi .about_hanabi_img.active {
transform: translate(-50%,0);
}

/*history*/
#nishite_area #nishite_history {
background: url("../img/history_bg.jpg") top center repeat-y;
background-size: 100% auto;
padding: 55px 0 110px;
}
#nishite_area #nishite_history h2 {
width: 1200px;
margin: 0 auto;
}
#nishite_area #nishite_history .history_wrapper {
width: 1200px;
margin: 0 auto;
background: url("../img/history_bg02.png") top center repeat-y;
background-size: 100% auto;
position: relative;
}
#nishite_area #nishite_history .history_wrapper::after {
content: "";
width: 1200px;
height: 200px;
display: block;
background: url("../img/history_bg03.png") bottom center no-repeat;
position: absolute;
left: 0;
bottom: -30px;
z-index: 1;
}
#nishite_area #nishite_history .history_inner {
width: 900px;
margin: 0 auto;
padding-bottom: 30px;
position: relative;
z-index: 2;
}
#nishite_area #nishite_history .history_set {
position: relative;
}
#nishite_area #nishite_history .his01 {
position: relative;
padding-top: 30%;
margin: 0 0 75px;
}
#nishite_area #nishite_history .his01 .year {
position: absolute;
top: 0;
left: 0;
width: 224px;
}
#nishite_area #nishite_history .his01 .txt {
position: absolute;
top: 100px;
left: 0;
width: 475px;
}
#nishite_area #nishite_history .his01 .img {
position: absolute;
top: 0;
right: 0;
width: 385px;
}
#nishite_area #nishite_history .his02 {
position: relative;
padding-top: 33%;
margin: 0 0 75px;
}
#nishite_area #nishite_history .his02 .year {
position: absolute;
top: 15px;
left: 410px;
width: 229px;
}
#nishite_area #nishite_history .his02 .txt {
position: absolute;
top: 122px;
left: 410px;
width: 499px;
}
#nishite_area #nishite_history .his02 .img {
position: absolute;
top: -10px;
left: -31px;
width: 391px;
}
#nishite_area #nishite_history .his03 {
position: relative;
padding-top: 41.66%;
margin: 0 0 75px;
}
#nishite_area #nishite_history .his03 .year {
position: absolute;
top: 0;
left: 0;
width: 231px;
}
#nishite_area #nishite_history .his03 .txt {
position: absolute;
top: 100px;
left: 0;
width: 518px;
}
#nishite_area #nishite_history .his03 .img {
position: absolute;
top: 13px;
right: -36px;
width: 414px;
}
#nishite_area #nishite_history .his04 {
position: relative;
padding-top: 51.1%;
margin: 0 0 75px;
}
#nishite_area #nishite_history .his04 .year {
position: absolute;
top: 15px;
left: 366px;
width: 234px;
}
#nishite_area #nishite_history .his04 .txt {
position: absolute;
top: 122px;
left: 366px;
width: 503px;
}
#nishite_area #nishite_history .his04 .img {
position: absolute;
top: 36px;
left: -2px;
width: 341px;
}
#nishite_area #nishite_history .his05 {
position: relative;
padding-top: 51.1%;
margin: 0 0 25px;
}
#nishite_area #nishite_history .his05 .year {
position: absolute;
top: 80px;
left: 115px;
width: 240px;
}
#nishite_area #nishite_history .his05 .txt {
position: absolute;
top: 180px;
left: 115px;
width: 444px;
}
#nishite_area #nishite_history .his05 .img {
position: absolute;
top: -10px;
right: 83px;
width: 263px;
}
#nishite_area #nishite_history .active .year svg {
  fill: #FFF;
  stroke: #886239;
  stroke-dasharray: 400px;
  stroke-dashoffset: 400px;
  animation: line_animation 1s both;
}
@keyframes line_animation {
  0% {
    stroke-dashoffset: 400px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}
_:-ms-input-placeholder, :root #nishite_area #nishite_history .active .year svg {
    stroke-dashoffset: 0px;
}
_:-ms-input-placeholder, :root #nishite_area #nishite_history .his01 .year {
top: -35px;
}
_:-ms-input-placeholder, :root #nishite_area #nishite_history .his02 .year {
top: -15px;
}
_:-ms-input-placeholder, :root #nishite_area #nishite_history .his03 .year {
top: -35px;
}
_:-ms-input-placeholder, :root #nishite_area #nishite_history .his04 .year {
top: -15px;
}
_:-ms-input-placeholder, :root #nishite_area #nishite_history .his05 .year {
top: 45px;
}

/*secret*/
#nishite_area #nishite_secret {
width: 1200px;
margin: 0 auto;
padding: 75px 0 130px;
position: relative;
}
#nishite_area #nishite_secret .secret_img {
width: 1200px;
margin: 0 auto;
}
#nishite_area #nishite_secret .secret_inner {
position: relative;
}
#nishite_area #nishite_secret h3 {
position: absolute;
width: 267px;
top: 125px;
left: 140px;
}
#nishite_area #nishite_secret .txt01 {
position: absolute;
width: 366px;
top: 102px;
right: 46px;
}
#nishite_area #nishite_secret .txt02 {
position: absolute;
width: 325px;
top: 325px;
right: 90px;
}

/*niigata*/
#nishite_area #nishite_niigata {
width: 100%;
}
#nishite_area #nishite_niigata .niigata_inner {
position: relative;
}

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

}

@media only screen and (max-width: 768px) {
/*nav*/
#nishite_area .nishite_nav_area .nav_wrapper {
width: 100%;
height: 100vh;
background-color: rgba(255,255,255,0.8);
position: fixed;
z-index: 10;
display: block;
top: -100vh;
left: 0;
opacity: 0;
transition: 0.5s ease-in-out;
}
#nishite_area.on .nishite_nav_area .nav_wrapper {
display: block;
top: 0;
opacity: 1;
}
#nishite_area .nishite_nav_area .nishite_logo {
width: 197px;
position: absolute;
top: 15px;
left: 15px;
}
#nishite_area .nishite_nav_area .btn_menu {
width: 38px;
position: absolute;
top: 15px;
right: 15px;
display: block;
cursor: pointer;
}
#nishite_area .nishite_nav_area .nishite_nav {
background-color: #003886;
border-radius: 16px;
position: absolute;
width: 75%;
top: 50%;
right: 50%;
transform: translate(50%,-50%);
padding: 65px 0;
display: block;
}
#nishite_area .nishite_nav_area .nishite_nav.hanabi {
top: 50%;
}
#nishite_area .nishite_nav_area .nishite_nav li.nav01 ,
#nishite_area .nishite_nav_area .nishite_nav li.nav02 ,
#nishite_area .nishite_nav_area .nishite_nav li.nav03 {
width: 100%;
}
#nishite_area .nishite_nav_area .nishite_nav li a {
width: 100%;
height: auto;
padding: 0;
margin: 18px auto;
display: block;
position: relative;
}
#nishite_area .nishite_nav_area .nishite_nav li a img {
vertical-align: inherit;
}
#nishite_area .nishite_nav_area .nishite_nav li a::after {
content: "";
position: absolute;
top: inherit;
bottom: -9px;
right: 50%;
width: 50px;
border-bottom: 1px solid #FFF;
transform: translate(50%,0);
}
#nishite_area .nishite_nav_area .nishite_nav li:last-child a::after {
content: none;
}
#nishite_area .nishite_nav_area .nishite_nav li.close {
display: block;
width: 22px;
height: 22px;
position: absolute;
top: 15px;
right: 15px;
}
#nishite_area .nishite_nav_area .nishite_nav li.close img {
vertical-align: baseline;
}

/*sec*/
#nishite_area #sec01 ,
#nishite_area #sec02 ,
#nishite_area #sec03 {
width: 68%;
margin: 0 auto 25px;
}

/*mv*/
#nishite_area #nishite_mv {
position: relative;
}
#nishite_area #nishite_mv .hanabi_copy {
display: block;
}
#nishite_area #nishite_mv .hanabi_copy p {
width: 52%;
margin: 0 auto;
padding: 5.3% 0;
}

/*about*/
#nishite_area #nishite_about01 .about_inner {
width: 85.7%;
margin: 0 auto;
padding: 30px 0 50px;
}
#nishite_area #nishite_about01 .about_inner.scobj {
opacity: 1;
transform: translate(0,0);
}
#nishite_area .nishite_about02 {
width: 100%;
padding-top: 62.13%;
background: url("../img/bg_about_sp.jpg") 0 0 no-repeat;
background-size: 100% auto;
position: relative;
}
#nishite_area .nishite_about02 p.scobj {
width: 71%;
margin: 0 auto;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
}

/*about_hanabi*/
#nishite_area #nishite_about01_hanabi .about_inner_hanabi {
padding-top: 150%;
background: url("../img/bg_about_hanabi_sp.jpg") 0 0 no-repeat;
background-size: 100% auto;
}
#nishite_area #nishite_about01_hanabi .about_inner_hanabi p {
width: 90.6%;
margin: 0 auto;
position: absolute;
top: 27%;
left: 50%;
transform: translate(-50%,-50%);
}
#nishite_area #nishite_about01_hanabi .about_inner_hanabi .about_hanabi_img {
width: 100%;
margin: 0 auto;
position: absolute;
top: 52.5%;
left: 50%;
transform: translate(-50%,10%);
}
#nishite_area #nishite_about01_hanabi .about_inner_hanabi .about_hanabi_img.active {
transform: translate(-50%,0);
}

/*history*/
#nishite_area #nishite_history {
background: url("../img/history_bg.jpg") top center repeat-y;
background-size: 100% auto;
padding: 25px 0 60px;
}
#nishite_area #nishite_history h2 {
width: 100%;
margin: 0 auto;
}
#nishite_area #nishite_history .history_wrapper {
width: 100%;
margin: 0 auto;
background: url("../img/history_bg02_sp.png") top center repeat-y;
background-size: 100% auto;
position: relative;
}
#nishite_area #nishite_history .history_wrapper::after {
content: "";
width: 100%;
height: 75px;
display: block;
background: url("../img/history_bg03_sp.png") bottom center no-repeat;
background-size: 100% auto;
position: absolute;
left: 0;
bottom: -30px;
z-index: 1;
}
#nishite_area #nishite_history .history_inner {
width: 85%;
margin: 0 auto;
padding-bottom: 25px;
position: relative;
z-index: 2;
}
#nishite_area #nishite_history .history_set {
position: relative;
}
#nishite_area #nishite_history .his01 {
position: relative;
padding-top: 0;
margin: -30px auto 25px;
}
#nishite_area #nishite_history .his01 .year {
position: relative;
top: inherit;
left: inherit;
width: 34.2%;
margin: 10px auto;
}
#nishite_area #nishite_history .his01 .txt {
position: relative;
top: inherit;
left: inherit;
width: 100%;
margin: 0 auto;
}
#nishite_area #nishite_history .his01 .img {
position: relative;
top: inherit;
right: inherit;
width: 98%;
margin: 0 auto 15px;
}
#nishite_area #nishite_history .his02 {
position: relative;
padding-top: 0;
margin: 0 auto 25px;
}
#nishite_area #nishite_history .his02 .year {
position: relative;
top: inherit;
left: inherit;
width: 34.2%;
margin: 10px auto;
}
#nishite_area #nishite_history .his02 .txt {
position: relative;
top: inherit;
left: inherit;
width: 100%;
margin: 0 auto;
}
#nishite_area #nishite_history .his02 .img {
position: relative;
top: inherit;
left: inherit;
width: 98%;
margin: 0 auto 15px;
}
#nishite_area #nishite_history .his03 {
position: relative;
padding-top: 0;
margin: 0 auto 25px;
}
#nishite_area #nishite_history .his03 .year {
position: relative;
top: inherit;
left: inherit;
width: 34.2%;
margin: 10px auto;
}
#nishite_area #nishite_history .his03 .txt {
position: relative;
top: inherit;
left: inherit;
width: 100%;
margin: 0 auto;
}
#nishite_area #nishite_history .his03 .img {
position: relative;
top: inherit;
right: inherit;
width: 98%;
margin: 0 auto 15px;
}
#nishite_area #nishite_history .his04 {
position: relative;
padding-top: 0;
margin: 0 auto 25px;
}
#nishite_area #nishite_history .his04 .year {
position: relative;
top: inherit;
left: inherit;
width: 34.2%;
margin: -20% auto 10px;
}
#nishite_area #nishite_history .his04 .txt {
position: relative;
top: inherit;
left: inherit;
width: 100%;
margin: 0 auto;
}
#nishite_area #nishite_history .his04 .img {
position: relative;
top: inherit;
right: inherit;
width: 98%;
margin: 0 auto 15px;
}
#nishite_area #nishite_history .his05 {
position: relative;
padding-top: 0;
margin: 0 auto 25px;
}
#nishite_area #nishite_history .his05 .year {
position: relative;
top: inherit;
left: inherit;
width: 34.2%;
margin: -17% auto 10px;
}
#nishite_area #nishite_history .his05 .txt {
position: relative;
top: inherit;
left: inherit;
width: 100%;
margin: 0 auto;
}
#nishite_area #nishite_history .his05 .img {
position: relative;
top: inherit;
right: inherit;
width: 98%;
margin: 0 auto 15px;
}

/*secret*/
#nishite_area #nishite_secret {
width: 100%;
margin: 0 auto;
padding: 60px 0 40px;
position: relative;
}
#nishite_area #nishite_secret .secret_img {
width: 100%;
margin: 0 auto;
}
#nishite_area #nishite_secret .secret_inner {
position: relative;
margin-top: -25px;
}
#nishite_area #nishite_secret h3 {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
#nishite_area #nishite_secret .txt01 {
position: static;
width: 100%;
margin: -12% auto 0;
}
#nishite_area #nishite_secret .txt02 {
position: static;
width: 100%;
margin: 0 auto;
}

/*niigata*/
#nishite_area #nishite_niigata {
width: 100%;
}
#nishite_area #nishite_niigata .niigata_inner {
position: relative;
}
}