@charset "UTF-8";
/* Sass Document */
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img {
  margin: 0;
  padding: 0;
  border: none;
  line-height: 100%;
  list-style-type: none;
  font-style: normal;
  font-weight: normal;
  /*	font-family: "Noto Sans Japanese",Verdana,sans-serif;*/
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  color: #333; }

a {
  color: #333;
  text-decoration: none;
  transition: all .6s; }
  a:hover {
    filter: opacity(0.3); }

html {
  height: 100%;
  /*font-size:62.5%;*/
  overflow-y: scroll; }

h1, h2 {
  font-family: serif;
  text-align: center;
  margin: 0 auto; }

body, main {
  background: #ffffff; }

.clearfix:after {
  clear: both;
  content: '';
  display: block; }

/* globalNavi */
.hamburger {
  position: absolute;
  width: 40px;
  /* クリックしやすいようにちゃんと幅を指定する */
  height: 40px;
  /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 9999;
  border-radius: 100%;
  border: 2px solid #ABABAB;
  background-color: rgba(225, 225, 225, 0.2); }

.global-nav {
  position: fixed;
  right: -80%;
  /* これで隠れる */
  top: 0;
  width: 70%;
  /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 60px;
  background-color: #fff;
  background-image: url("../img/menu_bg.png");
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: 8% 88%;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto;
  /* メニューが多くなったらスクロールできるように */ }

.global-nav__list {
  margin: 0;
  padding: 5% 8% 0 0;
  list-style: none; }

.global-nav__item {
  text-align: right;
  vertical-align: middle; }
  .global-nav__item span {
    padding-left: 2%;
    font-family: "Sawarabi Mincho"; }
  .global-nav__item img {
    max-height: 45px; }
  .global-nav__item a {
    display: inline-block;
    padding: 2% 0;
    transition: all .6s;
    margin: 0 0 0 auto;
    background: linear-gradient(to right, #001976 0%, #001976 45%, #ffffff 45%, #ffffff 70%, #9a0d1a 70%, #9a0d1a 100%);
    background-repeat: no-repeat;
    background-size: 0 0;
    background-position: 0px 90%; }
    .global-nav__item a:hover {
      background-size: 99% 0.15em;
      background-position: 100% 90%; }

.hamburger__line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background-color: #ABABAB;
  transition: all .6s; }

.hamburger__line--1 {
  top: 12px; }

.hamburger__line--2 {
  top: 19px; }

.hamburger__line--3 {
  top: 26px; }

.black-bg {
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer; }

/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0; }

.nav-open .black-bg {
  opacity: .8;
  visibility: visible; }

.nav-open .hamburger__line {
  background-color: #ABABAB; }

.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 19px;
  left: 22%; }

.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
  transform: translateX(-50%); }

.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 19px;
  left: 22%; }