/* ========== NAV ========== */
#nav { display: none; cursor: pointer; cursor: hand; }
nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100%;
  background-color: #341298;
  font-family: neue-aachen-pro, sans-serif;
  font-weight: 500;
  font-style: normal;
}
/* チェックボックスを非表示 */
nav input,
#navBtn { display: none; }
nav > div {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 0.5%;
}
ul.menu {
  width: 100%;
  height: 100px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.menuParent { font-size: 32px; text-align: center; }
.menuParent img { width: 100%; max-height: 60px; }
.menuParent:first-child { width: 30% }
.menuParent:first-child a:first-child { width: 40% }
.menuParent:first-child a:nth-child(2) { width: 55% }
ul.menu li a,
ul.menu li a:link,
ul.menu li a:visited { display: block; color: #FFF; width: 100%; position: relative; box-sizing: border-box; }
ul.menu li a:hover { text-decoration: none; }
ul.menu li a:hover:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  display: block;
  width: 30px;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.menuParent:first-child a:hover:after { display: none; }
/* ドロップダウンメニュー */
.menuParent { position: relative; }
.menuChild {
  margin: 0; padding: 0;
  list-style: none;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  margin-top: 30px;
  margin-left: -40px;
  width: 300px;
  box-sizing: border-box;
  background-color: #FFF;
}
.menuChild li { font-size: 14px; line-height: 2.2; text-align: left; }
.menuChild li a,
.menuChild li a:link,
.menuChild li a:visited { height: auto; display: block; padding: 0 0 0 15px; }
.menuChild li a:hover:after {
  content: "\f0da";
  display: inline-block;
  padding-left: 20px;
  width: auto;
  height: auto;
  position: static;
}
/* パソコンでは V を非表示 */
.menuParent .pd { display: none; }

/* パソコン用 */
@media screen and (min-width: 620px) {
  .menuParent:hover .menuChild { visibility: visible; opacity: 1; }
}

/*
==================================================
671～1040
==================================================
*/
@media screen and (min-width:671px) and ( max-width:1040px) {
/*============
nav
=============*/
nav { background-color: transparent; }
nav > div { padding: 0; }
/* スマホの際に V を表示 */
.menuParent .pd { display: inline-block; width: 100%; }
ul.menu,ul.menu li a:hover:after { display: none; }
.menuParent { height: auto; width: 100%; border-bottom: 1px solid #DDD; background-color: #341298; }
.menuParent a { padding: 10px 0; }
.menuParent:first-child { border: none; display: block; }
.menuParent i { padding: 0px 6px; }
.menuParent:first-child { width: 100% }
.menuParent:first-child a { padding: 5px 0; }
.menuParent:first-child a:first-child { width: auto; }
.menuParent:first-child a:first-child img { width: 35% }
.menuParent:first-child a:nth-child(2) { width: auto }
.menuParent:first-child a:nth-child(2) img { width: 50% }
.menuParent:first-child { text-align: center; }
/* メニューを移動させないため */
#nav:checked ~ nav {
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}
/* ハンバーガーメニューがクリックされた時 */
#nav:checked ~ * .menu { display: block; opacity: 1; }
#nav:checked ~ * .menuParent { max-height: inherit; overflow-y: visible; }
#nav:checked ~ * .menuChild { max-height: 0; overflow-y: hidden; visibility: hidden; }
#menuParent01:checked ~ .menuChild { max-height: inherit; overflow-y: visible; visibility: visible; }
/* 子メニュー */
.menuChild {
  margin-top: 0;
  position: relative;
  opacity: 1;
  top: 0;
  margin-left: auto;
  left: auto;
  width: auto;
  background-color: #FFF;
}
.menuChild li { border-bottom: #000 1px solid }
.menuChild li a,
.menuChild li a:link,
.menuChild li a:visited { color: #FFF; padding: 10px 0; text-align: center; }
.menuParent > label { position: absolute; top: 10px; right: 70px; width: 40px }
.menuParent > label:hover { cursor: pointer; cursor: hand; }
/* 子メニューがクリックされた時 */

.angletoggle:before { content: "\f107"; color: #FFF }
nav input[type="checkbox"]:checked ~ * .angletoggle:before { content: "\f106"; }

/* 余分な最後の線を消去 */
.menuChild li:last-child { border: none; }
.menuChild li i { margin-right: 3px; }

/* ハンバーガー */
#navBtn { display: none; }
#navBtn { display: block; position: absolute; top: 10px; right: 10px; }
#navBtn span {
  display: block;
  width: 40px;
  height: 40px;
  background-color: #341298;
}
#navBtn span span {
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
#navBtn span span::before,
#navBtn span span::after,
#navBtn span::after {
  position: absolute;
  left:10px;
  content:"";
  width: 20px;
  height: 3px;
  background-color: #FFF;
}
/* 上の棒 */
#navBtn span span::before { top:10px; }
#nav:checked ~ nav label#navBtn span span::before {
  top:19px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/* 下の棒 */
#navBtn span::after { bottom:10px; }
#nav:checked ~ nav label#navBtn > span::after {
  bottom:18px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
/* 中の棒 */
#navBtn span span::after { top:18px; }
#nav:checked ~ nav label#navBtn span span::after { display: none; }
/*671～1039 END*/
}
/*
==================================================
～670
==================================================
*/
@media screen and ( max-width:670px ){
/*============
nav
=============*/
nav { background-color: transparent; }
nav > div { padding: 0; }
/* スマホの際に V を表示 */
.menuParent .pd { display: inline-block; width: 100%; }
ul.menu,ul.menu li a:hover:after { display: none; }
.menuParent { height: auto; width: 100%; border-bottom: 1px solid #DDD; background-color: #341298; }
.menuParent a { padding: 10px 0; }
.menuParent:first-child { border: none; display: block; }
.menuParent i { padding: 0px 6px; }
.menuParent:first-child { width: 100% }
.menuParent:first-child a { padding: 5px 0; }
.menuParent:first-child a:first-child { width: auto; }
.menuParent:first-child a:first-child img { width: 35% }
.menuParent:first-child a:nth-child(2) { width: auto }
.menuParent:first-child a:nth-child(2) img { width: 50% }
.menuParent:first-child { text-align: center; }
/* メニューを移動させないため */
#nav:checked ~ nav {
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
}
/* ハンバーガーメニューがクリックされた時 */
#nav:checked ~ * .menu { display: block; opacity: 1; }
#nav:checked ~ * .menuParent { max-height: inherit; overflow-y: visible; }
#nav:checked ~ * .menuChild { max-height: 0; overflow-y: hidden; visibility: hidden; }
#menuParent01:checked ~ .menuChild { max-height: inherit; overflow-y: visible; visibility: visible; }
/* 子メニュー */
.menuChild {
  margin-top: 0;
  position: relative;
  opacity: 1;
  top: 0;
  margin-left: auto;
  left: auto;
  width: auto;
  background-color: #FFF;
}
.menuChild li { border-bottom: #000 1px solid }
.menuChild li a,
.menuChild li a:link,
.menuChild li a:visited { color: #FFF; padding: 10px 0; text-align: center; }
.menuParent > label { position: absolute; top: 10px; right: 70px; width: 40px }
.menuParent > label:hover { cursor: pointer; cursor: hand; }
/* 子メニューがクリックされた時 */

.angletoggle:before { content: "\f107"; color: #FFF }
nav input[type="checkbox"]:checked ~ * .angletoggle:before { content: "\f106"; }

/* 余分な最後の線を消去 */
.menuChild li:last-child { border: none; }
.menuChild li i { margin-right: 3px; }

/* ハンバーガー */
#navBtn { display: none; }
#navBtn { display: block; position: absolute; top: 10px; right: 10px; }
#navBtn span {
  display: block;
  width: 40px;
  height: 40px;
  background-color: #341298;
}
#navBtn span span {
  display: block;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
#navBtn span span::before,
#navBtn span span::after,
#navBtn span::after {
  position: absolute;
  left:10px;
  content:"";
  width: 20px;
  height: 3px;
  background-color: #FFF;
}
/* 上の棒 */
#navBtn span span::before { top:10px; }
#nav:checked ~ nav label#navBtn span span::before {
  top:19px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/* 下の棒 */
#navBtn span::after { bottom:10px; }
#nav:checked ~ nav label#navBtn > span::after {
  bottom:18px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
/* 中の棒 */
#navBtn span span::after { top:18px; }
#nav:checked ~ nav label#navBtn span span::after { display: none; }
/*～670 END*/
}