@charset "UTF-8";

/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 99999;
  right : 2vw;
  top   : 2vw;
  width : 13vw;
  height: 13vw;
  cursor: pointer;
  text-align: center;
  background: #f9ef50;
  border-radius: 100%;
  padding-top: 1vw;
}

.hamburger .radius_box .radius {
  position: absolute;
  left: 0;
  top: 3vw;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1.2vw;
  transition: .3s;
}

.hamburger .radius_box .radius:first-child {
  top: 3vw;
}

.hamburger .radius_box .radius:nth-child(2) {
  top: 4.25vw;
}

.hamburger .radius_box.open .radius:nth-child(2) {
  top: 5.5vw;
}

.hamburger .radius_box .radius:nth-child(3) {
  top: 5.5vw;
}

.hamburger .radius span {
  display: block;
  background: #002b5b;
  width: 1.1vw;
  height: 1.1vw;
  border-radius: 100%;
}

.hamburger .text {
  font-size: 2.3vw;
  color: #002b5b;
  font-weight: bold;
  margin-top: .6vw;
  position: absolute;
  left: 0;
  bottom: 2vw;
  width: 100%;
}

nav.globalMenuSp {
  position: fixed;
  z-index : -1;
  top  : 0;
  left : 0;
  color: #fff;
  background: #002b5b;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
  height: 100svh;
  align-items: center;
  overflow: scroll;
  justify-content: center;
}

nav.globalMenuSp .cont {
  max-height: 90svh;
  width: 85%;
  background: #fff;
  border-radius: 20px;
  padding: 10vw 4vw;
  overflow: scroll;
}

nav.globalMenuSp .cont .menuBox ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4vw 6vw;
}

nav.globalMenuSp .cont .menuBox ul li a {
  display: block;
	position: relative;
}

nav.globalMenuSp .cont .menuBox ul li a .arrow {
    width: 8vw;
    height: 8vw;
    background: #002b5b;
    border-radius: 100%;
    display: block;
    background-image: url(/wp-content/themes/child/image/arrow_right_white.svg);
    background-repeat: no-repeat;
    background-position: 3.5vw;
    background-size: 1.5vw;
	position: absolute;
	right: 0;
	top: calc( 50% - 4vw );
}

nav.globalMenuSp .cont .menuBox ul li .en {
  color: #002b5b;
  font-size: 4.5vw;
}

nav.globalMenuSp .cont .menuBox ul li .jp {
  color: #4d4d4d;
  font-size: 3vw;
  display: block;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
  z-index: 999;
}


@media screen and (min-width: 767px) {

	.hamburger {
	  right : 20px;
	  top   : 20px;
	  width : 70px;
	  height: 70px;
	  padding-top: 0;
	}
	
	.hamburger .radius_box .radius {
	  top: 10px;
	  gap: 5px;
	}
	
	.hamburger .radius_box .radius:first-child {
	  top: 15px;
	}
	
	.hamburger .radius_box .radius:nth-child(2) {
	  top: 20px;
	}
	
	.hamburger .radius_box.open .radius:nth-child(2) {
	  top: 28px;
	}
	
	.hamburger .radius_box .radius:nth-child(3) {
	  top: 28px;
	}
	
	.hamburger .radius span {
	  width: 6px;
	  height: 6px;
	}
	
	.hamburger .text {
	  font-size: 12px;
	  margin-top: 0;
	  bottom: 10px;
	}
	
	nav.globalMenuSp {
	  position: fixed;
	  z-index : -1;
	  top  : 0;
	  left : 0;
	  color: #fff;
	  background: #002b5b;
	  width: 100%;
	  opacity: 0;
	  transition: opacity .6s ease, visibility .6s ease;
	  height: 100vh;
	  align-items: center;
	  overflow: scroll;
	  justify-content: center;
	}
	
	nav.globalMenuSp .cont {
	  width: 1000px;
	  padding: 80px 60px 40px 60px;
	}
	
	nav.globalMenuSp .cont .menuBox ul {
		gap: 20px 40px;
		grid-template-columns: repeat(3, 1fr);
	}
	
	nav.globalMenuSp .cont .menuBox ul li a {
	  display: block;
		position: relative;
		border-bottom: 2px dashed #ccc;
		padding-bottom: .5em;
	}
	
	nav.globalMenuSp .cont .menuBox ul li a .arrow {
	    width: 30px;
	    height: 30px;
	    background-position: 13px;
	    background-size: 6px;
		top: calc( 50% - 15px );
		right: 10px;
		transition: .3s;
	}

	nav.globalMenuSp .cont .menuBox ul li a:hover .arrow {
		right: 0;
	}
	
	nav.globalMenuSp .cont .menuBox ul li .en {
	  font-size: 20px;
	}
	
	nav.globalMenuSp .cont .menuBox ul li .jp {
	  font-size: 14px;
	}
	
}