@charset "UTF-8";

/* =========================
   hamburger（右端＋ヘッダー縦中央＋伸縮）
========================= */

.hamburger{
  display: flex;
  align-items: center;
  justify-content: center;
  width:  clamp(2.4rem, 4.5vw, 3rem);
  height: clamp(2.4rem, 4.5vw, 3rem);
  position: fixed;
  right: clamp(0.9rem, 2vw, 1.4rem);
  top: calc(clamp(5.6rem, 8vw, 7.5rem) / 2);
  transform: translateY(-50%);
  z-index: 10000;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =========================
   3本線（box-shadow） + activeで×（疑似要素）
========================= */
.hamburger__icon{
  position: relative;

  /* 横線サイズ */
  width: clamp(2rem, 3.6vw, 2.4rem);
  height: 0.14rem;                 /* 細線（統一） */

  background-color: #000;

  /* 上下2本をbox-shadowで生成（通常時のみ） */
  box-shadow:
    0 -0.55rem 0 #000,
    0  0.55rem 0 #000;

  transition:
    background-color 0.4s,
    box-shadow 0.4s;
}

/* ×用の2本（通常は非表示） */
.hamburger__icon::before,
.hamburger__icon::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 0.14rem;                 /* ← 必ず同じ太さ */
  background: #000;

  transform-origin: center;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);

  transition: opacity 0.4s, transform 0.4s;
}

/* active：3本を消して×を表示 */
.hamburger.active .hamburger__icon{
  background-color: transparent;
  box-shadow: none;
}

/* 1本目（／） */
.hamburger.active .hamburger__icon::before{
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 2本目（＼） */
.hamburger.active .hamburger__icon::after{
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}



.fat-nav {
	top: 0;
	left: 0;
	z-index: 9999;
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.9);
	-moz-transform: scale(1.4);
	-ms-transform: scale(1.4);
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
	-moz-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;

}
.fat-nav__wrapper {
  width: 100%;
  height: 100%;
  display: table;
  table-layout: fixed;
}
.fat-nav.active {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.fat-nav ul {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.fat-nav li {
	list-style-type: none;
	text-align: center;
	font-size: 18px;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	width: 50%;
	margin-right: auto;
	margin-left: auto;
    border-bottom: solid 1px #666;
}
.fat-nav li, .fat-nav li a {
  color: #000;
}
.fat-nav li a {
  text-decoration: none;
}

.fat-nav li span {
display: block;
color: #999999;
font-size: 12px;
line-height: 1.2em;
}

.fat-nav li.logo img {
width: 50%;
margin: 0 auto 2rem;
}

.fat-nav li.logo {
border-bottom: none;
}

@media (max-width: 32.5em) {
.hamburger__icon {
  margin-top: 0;
}
.fat-nav li {
width: 90%;
}
.fat-nav li.logo {
width: 50%;
margin-top: 3rem;
border-bottom: none;
}
.fat-nav li a {
font-weight: 900;
}
.fat-nav li.logo img {
width: 100%;
margin: 0 auto;
}
}