@charset "UTF-8";

/*------基本構造------*/

.nav-container {

  display: flex;

  display: -ms-flexbox;

  align-items: center;

  justify-content: flex-start;

  width: 1100px;

  margin: 0 auto;

}

nav ul {

  display: flex;

  flex-wrap: wrap;

  height:40px;

  align-items: center;

}

.nav-list-01 {

  display: flex;

  line-height: 1;

  background-color:#7A1A1A;

  justify-content:space-between;

  flex-basis: auto;

  align-items: flex-start;

}

.nav-list-01 > li {

  display: flex;

  flex-direction: column;

  flex:1;

  line-height: 1;

  justify-content:flex-start;

  align-items: center;

  padding:11px 0 10px;

  position: relative;

}

.nav-list-01 > li > a::after {

  position: absolute;

  display:inline-block;

  right:0;

  height:1em;

  content:"";

  width:1px;

  background-color:#fff;

}

.nav-list-01 > li > span::after {

  position: absolute;

  display:inline-block;

  right:0;

  height:1em;

  content:"";

  width:1px;

  background-color:#fff;

}

.nav-list-01 > li:last-child span::after {

  display:none;

}

.nav-list-01 > li > a {

  font-size: 18px;

  color: #fff;

  white-space: nowrap;

  line-height: 1;

}

.nav-list-01 > li a:hover {

  text-decoration: none;

}

.nav-list-01 > li > span {

  cursor: pointer;

  font-size: 18px;

  color: #fff;

  white-space: nowrap;

  line-height: 1;

  padding:0 10px;

}

.nav-list-01 > li > ul {

  margin-top:15px;

  font-size: 18px;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  flex-wrap: nowrap;

  width:100%;

  display: none;

}



.nav-list-01 > li > ul > li {

  display: flex;

  justify-content: center;

  text-align: center;

  width:100%;

}

.nav-list-01 > li > ul > li > a {

  color:#fff;

  background-color: rgba(90, 25, 25, 0.9);

  width:100%;

  padding:10px 0;

  border-bottom:1px solid #67696B;

}

.nav-list-01 > li > ul > li > a:hover {

  background-color: rgba(122, 35, 35, 0.95);

}

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

  .nav-list-01 > li > ul > li > a {

    font-size:14px;

  }

  .nav-list-01 > li > a,.nav-list-01 > li > span {

    font-size:14px;

  }

}

.nav-list-02 {

  transition: all 300ms 0s ease;

}

.nav-list-02 ul {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: absolute;

  top: 220px;

  right: 0;

  transition: all 300ms 0s ease;

}

.nav-list-02 a {

  transition: all 300ms 0s ease;

}

.nav-list-02 a:hover {

  opacity: 0.7;

  transition: all 300ms 0s ease;

}



.nav-list-02 ul li {

  line-height: 1;

  margin-bottom:5px;

}

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

  .nav-list-02 ul {

    top:-10px;

    right:0;

  }

}

.nav-list-03 {

  position: absolute;

  top: 10px;

  right: 0;

}

.nav-list-03 li a {

  font-size: 18px;

  line-height: 1;

}

.nav-list-03 li:first-child a, .nav-list-03 li:nth-child(2) a {

  border: 1px solid #436926;

  border-radius: 10px;

  padding: 2px 8px;

  margin-right: 10px;

  font-size: 11px;

  transition: all 300ms 0s ease;

}

.nav-list-03 li:first-child a:hover, .nav-list-03 li:nth-child(2) a:hover {

  text-decoration: none;

  background-color: #436926;

  color: #fff;

  font-size: 11px;

}

.nav-list-03 li:nth-child(3) {

  margin-right: 5px;

}

.fab {

  vertical-align: middle;

}

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

  nav ul {

    flex-direction: column;

    text-align: center;

  }

  nav ul li a {

    display: block;

    width: 100%;

    line-height: 2.5;

  }

  nav ul li:first-child a {

    display: inline;

  }

  .navi-area {

    margin: 0 10px;

    margin-top: 30px;

    margin-bottom: 30px;

  }

  .navi-area a {

    height: 40px;

  }

  .navi-area .previous a, .navi-area .next a {

    font-size: 16px;

  }

  .nav-top-inner {

    height: 60px;

  }

  a.border-link {

    width: inherit;

    display: inline-block;

    border: 1px solid #436926;

    border-radius: 10px;

    padding: 2px 8px;

    line-height: 1;

    margin: 10px 10px 10px 0;

    font-size: 11px;

    transition: all 300ms 0s ease;

  }

  a.border-link:hover {

    text-decoration: none;

    background-color: #436926;

    color: #fff;

    font-size: 11px;

  }

  .sns-link a {

    display: inline-block;

    width: inherit;

    margin: 0 2px;

  }

}

.nav span:nth-of-type(1) {

  top: 0;

}

.nav span:nth-of-type(2) {

  top: 50%;

  transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

}

.nav span:nth-of-type(3) {

  bottom: 0;

}

.nav.active span:nth-of-type(1) {

  top: 0;

}

.nav.active span:nth-of-type(3) {

  bottom: 0;

}

.nav span:nth-of-type(1) {

  -webkit-animation: menu-ber01 .75s forwards;

  animation: menu-ber01 .75s forwards;

}

.nav span:nth-of-type(2) {

  transition: all .25s .25s;

  opacity: 1;

}

.nav span:nth-of-type(3) {

  -webkit-animation: menu-ber02 .75s forwards;

  animation: menu-ber02 .75s forwards;

}

.sp___nav span:nth-of-type(1) {

  top: 0;

}

.sp___nav span:nth-of-type(2) {

  top: 5px;

}

.sp___nav span:nth-of-type(3) {

  bottom: 0;

}

.sp___nav.active span:nth-of-type(1) {

  top: -6px;

}

.sp___nav.active span:nth-of-type(3) {

  bottom: -2px;

}

.sp___nav span:nth-of-type(1) {

  -webkit-animation: menu-ber01 .75s forwards;

  animation: menu-ber01 .75s forwards;

}

.sp___nav span:nth-of-type(2) {

  transition: all .25s .25s;

  opacity: 1;

}

.sp___nav span:nth-of-type(3) {

  -webkit-animation: menu-ber02 .75s forwards;

  animation: menu-ber02 .75s forwards;

}

.active span:nth-of-type(1) {

  -webkit-animation: active-menu-ber01 .75s forwards;

  animation: active-menu-ber01 .75s forwards;

}

.active span:nth-of-type(2) {

  opacity: 0;

}

.active span:nth-of-type(3) {

  -webkit-animation: active-menu-ber03 .75s forwards;

  animation: active-menu-ber03 .75s forwards;

}

@-webkit-keyframes menu-ber01 {

  0% {

    -webkit-transform: translateY(8px) rotate(45deg);

  }

  50% {

    -webkit-transform: translateY(8px) rotate(0);

  }

  100% {

    -webkit-transform: translateY(0) rotate(0);

  }

}

@keyframes menu-ber01 {

  0% {

    transform: translateY(8px) rotate(45deg);

  }

  50% {

    transform: translateY(8px) rotate(0);

  }

  100% {

    transform: translateY(0) rotate(0);

  }

}

@-webkit-keyframes menu-ber02 {

  0% {

    -webkit-transform: translateY(-8px) rotate(-45deg);

  }

  50% {

    -webkit-transform: translateY(-8px) rotate(0);

  }

  100% {

    -webkit-transform: translateY(0) rotate(0);

  }

}

.sp-nav-inner {

  width: 100%;

  height: 100%;

}

.sp-nav-inner-list {

  font-size:30px;

  font-weight: bold;

  line-height: 1.6;

  text-align:center;

}

.sp-nav-inner-list li:first-child a {

  border-top:1px dotted #C50900;

}

.sp-nav-inner-list a {

  display: block;

  padding:15px 0;

  width:100%;

  border-bottom:1px dotted #C50900;

  color:#C50900;

}

.nav {

  display: block;

  z-index: 9999999;

  width: 140px;

  background-color: #3A3C40;

  position: absolute;

  height: 35px;

  top: 28px;

  right: 15px;

  cursor: pointer;

}

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

  .nav {

    width: 60px;

    height:60px;

    top:0;

    right:0;

  }

}

nav a::after {

  display: none;

}

nav a.nav_list_top {

  border-top: none;

  margin: 0;

}

.nav span {

  position: absolute;

  transition: all .4s;

  width: 100%;

  height: 2px;

  background-color: #fff;

}

p.menu {

  text-align: center;

  color: white;

  position: absolute;

  bottom: 0px;

  right: 2px;

  transition: 3s ease-in !important;

}

p.close {

  text-align: center;

  color: white;

  position: absolute;

  bottom: 0px;

  right: 3px;

  transition: 3s ease-in !important;

  display: none;

}

.none {

  display: none;

  transition: 3s ease-in !important;

}

.open {

  display: block !important;

  transition: 3s ease-in !important;

}

.nav_inner {

  width: 25px;

  height: 20px;

  z-index: 9999999;

  transition: all .4s;

  position: absolute;

  right: 16px;

  top: 13px;

}

.nav-txt {

	position: absolute;

	bottom:6px;

	left:12px;

	color: #fff;

  font-size:10px;

}

.nav-txt-02 {

	position: absolute;

	bottom:6px;

	left:15px;

	color: #fff;

  font-size:12px;

}

.navigation.on {

  display: block !important;

}

.navigation.active {

  transition: .5s ease;

  overflow-y: scroll;

  opacity: 1;

  display: block;

}

.navigation {

  position: fixed;

  width: 100vw;

  height: 100vh;

  top: 0;

  left: 0;

  z-index: 99999;

  transition: .5s ease;

  opacity: 0;

  display: none;

}

.navigation-inner {

  width: 100%;

  height: 100%;

  background-color: rgba(255, 255, 255, 0.9);

  margin-left: auto;

  position: absolute;

  top: 0;

  right: 0;

  transition: .5s ease;

  overflow-y:scroll;

}

.navigation-inner nav ul li {

  border-bottom: 1px dotted #436926;

}

/*------メニューボタンのアニメーション------*/

@keyframes menu-ber02 {

  0% {

    transform: translateY(-8px) rotate(-45deg);

  }

  50% {

    transform: translateY(-8px) rotate(0);

  }

  100% {

    transform: translateY(0) rotate(0);

  }

}

@-webkit-keyframes active-menu-ber01 {

  0% {

    -webkit-transform: translateY(0) rotate(0);

  }

  50% {

    -webkit-transform: translateY(10px) rotate(0);

  }

  100% {

    -webkit-transform: translateY(10px) rotate(45deg);

  }

}

@keyframes active-menu-ber01 {

  0% {

    transform: translateY(0) rotate(0);

  }

  50% {

    transform: translateY(10px) rotate(0);

  }

  100% {

    transform: translateY(10px) rotate(45deg);

  }

}

@-webkit-keyframes active-menu-ber03 {

  0% {

    -webkit-transform: translateY(0) rotate(0);

  }

  50% {

    -webkit-transform: translateY(-8px) rotate(0);

  }

  100% {

    -webkit-transform: translateY(-8px) rotate(-45deg);

  }

}

@keyframes active-menu-ber03 {

  0% {

    transform: translateY(0) rotate(0);

  }

  50% {

    transform: translateY(-8px) rotate(0);

  }

  100% {

    transform: translateY(-8px) rotate(-45deg);

  }

}