@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Gothic');
/* Nav
-----------------------------------------*/
.Nav a {
 text-decoration: none !important;
}
.Nav {
 margin: 0px;
 font-size: 1rem;
 font-weight: 600;
 font-family: "Sawarabi Gothic";
}
.Nav span {
 font-size: 0.7rem;
}
@media screen and (max-width: 1000px) {
 .Nav {
  position: relative;
  border-top: none;
  font-weight: 500;
 }
}
.Nav .navbtn {
 display: none;
}
@media screen and (max-width: 1000px) {
 .Nav .navbtn {
  display: block;
  position: absolute;
  top: -380px;
  right: 10px;
  z-index: 19;
 }
}
@media screen and (max-width: 750px) {
 .Nav .navbtn {
  display: block;
  position: absolute;
  top: -50px;
  right: 10px;
 }
}
@media screen and (max-width: 1000px) {
 .Nav .navbtn a, .Nav .navbtn a.close {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #44192a;
 }
 .Nav .navbtn a::before, .Nav .navbtn a.close::before {
  position: absolute;
  top: 10px;
  left: 10px;
  content: "";
  width: 20px;
  height: 3px;
  background-color: #fff;
  transition: .2s;
 }
 .Nav .navbtn a.open::before {
  top: 19px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
 }
 .Nav .navbtn a::after, .Nav .navbtn a.close::after {
  position: absolute;
  bottom: 10px;
  left: 10px;
  content: "";
  width: 20px;
  height: 3px;
  background-color: #fff;
  transition: .2s;
 }
 .Nav .navbtn a.open::after {
  bottom: 18px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
 }
}
@media screen and (max-width: 1000px) {
 .Nav .navbtn a.open {}
}
@media screen and (max-width: 1000px) {
 .Nav .navbtn a span {
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
 }
 .Nav .navbtn a span::after, .Nav .navbtn a.close span::after {
  position: absolute;
  top: 18px;
  left: 10px;
  content: "";
  width: 20px;
  height: 3px;
  background-color: #FFF;
 }
 .Nav .navbtn a.open span::after {
  display: none;
 }
}
.Nav ul.close {
 display: none;
 border-top: solid 1px #F5F4F0;
}
.Nav > ul {
 margin-left: auto;
 margin-right: auto;
 max-width: 1000px;
}
@media screen and (max-width: 1000px) {
 .Nav > ul {
  top: -390px;
 }
}
@media screen and (max-width: 750px) {
 .Nav > ul {
  top: -60px;
 }
}
@media screen and (max-width: 1000px) {
 .Nav > ul {
  display: none;
  position: absolute;
  margin-bottom: 0px;
  /*top: -60px; ★★★★★*/
  left: 0;
  right: 0;
  z-index: 9;
  background-color: rgba(108, 33, 61, 0.7);
 }
}
.Nav > ul > li {
 position: relative;
 display: inline-block;
 vertical-align: bottom;
 color: #44192a;
}
@media screen and (max-width: 1000px) {
 .Nav > ul > li {
  display: block;
  border-bottom: solid 1px #542536;
 }
}
.Nav > ul > li a {
 display: block;
 position: relative;
 text-decoration: none;
 padding: 19px 10px 8px;
 margin-bottom: 20px;
 color: #44192a;
 z-index: 2;
}
.Nav > ul > li.parent > a {
 padding-right: 25px;
}
.Nav > ul > li.parent > a::before {
 display: block;
 content: "";
 position: absolute;
 top: 63%;
 right: 8px;
 width: 6px;
 height: 6px;
 margin: -6px 0 0 0;
 border-top: solid 2px #44192a; /*矢印右*/
 border-right: solid 2px #44192a; /*矢印左*/
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);
}
@media screen and (max-width: 1000px) {
 .Nav > ul > li.parent.open > a::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
 }
}
@media screen and (max-width: 1000px) {
 .Nav > ul > li.parent.open {
  border-bottom: none;
 }
}
.Nav > ul > li.parent.open > a {
 color: #FFF;
}
.Nav > ul > li.parent.open > a::after {
 background: #44192a;
 -webkit-transform: scale(1);
 transform: scale(1);
}
@media screen and (max-width: 1000px) {
 .Nav > ul > li.parent.open > a {
  color: #FFF;
 }
}
.Nav > ul > li a:hover {
 color: #44192a;
}
.Nav > ul > li a::after {
 position: absolute;
 z-index: -1;
 display: block;
 content: '';
}
.Nav > ul > li a, .Nav > ul > li a::after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
}
.Nav > ul > li a::after {
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 -webkit-transform: scale(.5);
 transform: scale(.5);
}
/*▼▼▼▼▼▼▼▼▼▼
    hover */
.Nav > ul > li a:hover::after {
 /*background: #333;*/
 border-bottom: solid 3px #44192a;
 -webkit-transform: scale(1);
 transform: scale(1);
}
/* 2階層 */
.Nav > ul > li > ul {
 display: none;
 position: absolute;
 top: 53px;
 left: 0;
 width: auto;
 background-color: rgba(68, 25, 42, 0.8);
 z-index: 9;
}
@media screen and (max-width: 1000px) {
 .Nav > ul > li > ul {
  background-color: rgba(108, 33, 61, 0.4);
  position: static;
 }
 .Nav > ul > li a:hover::after {
  background-color: rgba(68, 25, 42, 0.8);
  border-bottom: solid 1px #44192a;
  -webkit-transform: scale(1);
  transform: scale(1);
 }
 .Nav > ul > li a {
  color: #fff;
 }
 .Nav > ul > li a:hover {
  color: #fff;
 }
}
/*------------------*/
.Nav > ul > li > ul li {
 white-space: nowrap;
}
.Nav > ul > li > ul li a {
 position: relative;
 color: #fff;
 padding: 12px 27px 12px 27px;
}
@media screen and (max-width: 1000px) {
 .Nav > ul > li > ul li a {
  border-bottom: solid 1px #44192a;
  background-color: rgba(68, 25, 42, 0.6);
 }
}
.Nav > ul > li > ul li a::before {
 display: block;
 content: "";
 position: absolute;
 top: 50%;
 left: 10px;
 width: 6px;
 height: 6px;
 margin: -6px 0 0 0;
 border-top: solid 2px #fff;
 border-right: solid 2px #fff;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}
.Nav > ul > li > ul li a:hover {
 text-decoration: none !important;
 color: #fff;
 background-color: rgba(68, 25, 42, 0.8);
}
@media screen and (max-width: 1000px) {
 .Nav > ul > li > ul li a:hover {
  background-color: rgba(68, 25, 42, 0.6);
 }
}
.Nav > ul > li > ul li ul li a {
 padding-left: 42px;
}
.Nav > ul > li > ul li ul li a::before {
 left: 20px;
}
/*-------------------------*/
.pagetop {
 display: none;
 position: fixed;
 bottom: 30px;
 right: 0px;
}
.pagetop a {
 display: block;
 text-align: center;
 color: #222;
 font-size: 12px;
 text-decoration: none;
 padding: 5px 3px;
}
.pagetop a:hover {
 display: block;
 text-align: center;
 color: #fff;
 font-size: 12px;
 text-decoration: none;
 padding: 5px 3px;
}
@media screen and (max-width: 420px) {
 .pagetop {
  display: none;
 }
}