@charset "utf-8";
/*--基本--*/
:root{
	--font-size: 15px;
	--max-width:1200px;
	--color: #2C2624;
  --cream:#FFF7E9;
  --ink:#2C2624;
  --gsc-orange:#f5811f;
  --nendoroid-orange:#F39800;
  --font-size-2: .8em;
  --font-size-1: .9em;
  --font-size1: 1.1em;
  --font-size2: 1.2em;
  --font-size3: 1.3em;
  --font-size4: 1.4em;
  --font-size5: 1.5em;
}
@media (max-width:720px){
  :root{
    --font-size: 13px;
  }
}

/*-----------
header
-----------*/
header .inner{align-items:center; }

.cnt {
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- ハンバーガー + モバイルメニュー ---------- */
.hamburger_btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:none;
  border-radius:8px;
  background:#fff;
  color:#333;
  cursor:pointer;
  flex-shrink:0;
}
@media (max-width:900px){
  .hamburger_btn{ display:flex; }
}

.mobile_menu{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.45);
  display:none;
}
.mobile_menu.open{ display:block; }

.mobile_menu_inner{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:80%;
  max-width:340px;
  background:#fff;
  box-shadow:-12px 0 32px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s ease;
}
.mobile_menu.open .mobile_menu_inner{ transform:translateX(0); }

.mobile_menu_header{
  display:flex;
  align-items:center;
  justify-content: end;
  padding:18px 20px;
  font-weight:900;
  letter-spacing:.05em;
  color:var(--ink);
  flex-shrink: 0;
}
.mobile_menu_close{
  border:none;
  background:none;
  color:#333;
  cursor:pointer;
  display:flex;
}
.mobile_menu_body{
  padding: 0 20px 20px 20px;
  overflow-y:auto;
  flex:1;
}

.mobile_menu_body .header_nav{
  display: block !important;
  font-size: 15px;
}

 /*-----------
Entrance Animation
-----------*/
header {
	opacity: 0;
	transform: translateX(-40px);
	animation: header_entrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.list {
	opacity: 0;
	transform: translateY(30px);
	animation: content_entrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: 0.7s;}

@keyframes header_entrance {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes content_entrance {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	header,
	.list {
		animation: none;
		opacity: 1;
		transform: none;
	}
}