/*--------------------------------------------------------*/

/*  ハンバーガーメニュー　*/

/*--------------------------------------------------------*/

@media print, screen and (min-width: 768px){

#toggle {
	display: block;
	text-align: center;
	width: 36px;
	border-radius: 50%;
	position: fixed;
	top: 35px;
	right: 35px;
	z-index: 999;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:15px;
	cursor:pointer
}

#toggle { display: none; }

body.menu-ready #toggle { display: block; }

.trigger,
.trigger span {
	display: inline-block;
	transition: all .2s;
}
.trigger {
	position: relative;
	width: 100%;
	height: 24px;
}
.trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #A5A5A5;
	border-radius: 4px;
}
.trigger span:nth-of-type(1) {
	top: 0;
}
.trigger span:nth-of-type(2) {
	top: 11px;
}
.trigger span:nth-of-type(2)::after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #A5A5A5;
	border-radius: 4px;
	transition: all .2s;
}
.trigger span:nth-of-type(3) {
	bottom: 0;
}
.trigger.active span:nth-of-type(1) {
	transform: translateY(8px) scale(0);
	background-color: #FFF;
}
.trigger.active span:nth-of-type(2) {
	transform: rotate(-45deg);
	background-color: #FFF;
}
.trigger.active span:nth-of-type(2)::after {
	transform: rotate(90deg);
	background-color: #FFF;
}
.trigger.active span:nth-of-type(3) {
	transform: translateY(-8px) scale(0);
	background-color: #FFF;
}

.toggleWrap {
	display: none;
	opacity: 0;
	visibility: hidden;
}

#toggle.open + .toggleWrap {
	display: block;
	opacity: 1;
	visibility: visible;
	background-color: rgba(125, 125, 125, 0.6);
	padding: 100px 0 0 0;
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	z-index: 998;
	transition: background-color 0.8s ease;
}

ul.toggle_menu{
}

ul.toggle_menu li {
	text-align:center;
	font-family: 'Roboto', sans-serif;
	font-size:13px;
	font-weight:300;
	line-height:1.5em;
	letter-spacing:0.15em;
	font-feature-settings : "palt";
	margin-bottom:12px;
	pointer-events: none;
}

ul.toggle_menu li a{
	pointer-events: auto;
	display: inline-block !important;
	padding:3px 5px;
	color:#FFF;
	text-decoration:none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

ul.toggle_menu li a:hover{
	text-decoration:none;
}

ul.toggle_menu li.icon{
	padding-top:2px;
}

ul.toggle_menu li.icon img{
	width:14px;
	vertical-align:middle;
}

.hide {
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}
.animation {
	transition-property: opacity, visibility;
	transition-duration: .2s;
	transition-timing-function: ease-in;
}
.no-scroll {
	overflow: hidden;
}

}

@media screen and (max-width: 768px){

#toggle {
	display: block;
	text-align: center;
	width: 36px;
	border-radius: 50%;
	position: fixed;
	top: 15px;
	right: 10px;
	z-index: 999;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:10px;
	cursor:pointer
}

#toggle { display: none; }

body.menu-ready #toggle { display: block; }

.trigger,
.trigger span {
	display: inline-block;
	transition: all .2s;
}
.trigger {
	position: relative;
	width: 100%;
	height: 24px;
}
.trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #A5A5A5;
	border-radius: 4px;
}
.trigger span:nth-of-type(1) {
	top: 0;
}
.trigger span:nth-of-type(2) {
	top: 11px;
}
.trigger span:nth-of-type(2)::after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #A5A5A5;
	border-radius: 4px;
	transition: all .2s;
}
.trigger span:nth-of-type(3) {
	bottom: 0;
}
.trigger.active span:nth-of-type(1) {
	transform: translateY(8px) scale(0);
	background-color: #FFF;
}
.trigger.active span:nth-of-type(2) {
	transform: rotate(-45deg);
	background-color: #FFF;
}
.trigger.active span:nth-of-type(2)::after {
	transform: rotate(90deg);
	background-color: #FFF;
}
.trigger.active span:nth-of-type(3) {
	transform: translateY(-8px) scale(0);
	background-color: #FFF;
}

.toggleWrap {
	background-color: rgba(125, 125, 125, 0.6);
	padding: 70px 0 0 0;
	position: fixed;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	z-index: 998;
	transition: background-color 0.8s ease;
}

ul.toggle_menu{
}

ul.toggle_menu li {
	text-align:center;
	font-family: 'Roboto', sans-serif;
	font-size:12px;
	font-weight:300;
	line-height:1.5em;
	letter-spacing:0.15em;
	font-feature-settings : "palt";
	margin-bottom:10px;
	pointer-events: none;
}

ul.toggle_menu li a{
	pointer-events: auto;
	display: inline-block !important;
	padding:3px 5px;
	color:#FFF;
	text-decoration:none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

ul.toggle_menu li a:hover{
	text-decoration:none;
}

ul.toggle_menu li.icon{
	padding-top:2px;
}

ul.toggle_menu li.icon img{
	width:14px;
	vertical-align:middle;
}

.hide {
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
}
.animation {
	transition-property: opacity, visibility;
	transition-duration: .2s;
	transition-timing-function: ease-in;
}
.no-scroll {
	overflow: hidden;
}

}

/*--------------------------------------------------------*/

/*  グリッドレイアウト　*/

/*--------------------------------------------------------*/

@media print, screen and (min-width: 768px){

.index_container{
	max-width:1100px;
	margin:0 auto;
	padding:0 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 95vh;
	box-sizing:border-box;
}

.toybox{
	cursor:pointer;
}

.toybox img{
	width: 150px;
	height:auto;
	transition: all  0.2s ease;
}

.toybox img:hover{
	opacity: 0.7;
}

.top-grid{
	display: grid;
	grid-template-columns: repeat(6, minmax(0,1fr)); /* PC初期値: 6列 */
	gap: 15px;
}

.is-hidden { display: none; }

.cell{
	position: relative;
	display: flex;
	aspect-ratio: 1 / 1;  /* 正方形 */
	align-items: center;
	justify-content: center;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease;
	/* border: 2px dotted #DDD; */
}

.cell a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transition: all  0.2s ease;
}

.cell a:hover{
	opacity: 0.7;
}

.cell.visible {
	opacity: 1;
}

.cell img {
	width: 70%;
	height: auto;
	display: block;
	object-fit: contain;
}

.cell.logo {
	aspect-ratio: auto;  /* 正方形の制約を解除 */
	grid-column: 3 / span 2;
	grid-row: 2 / span 2;
	background: transparent;
	place-items:center;
	z-index: 1;
	opacity: 0;
	transition: opacity 1s ease;
}

.cell.logo.visible {
	opacity: 1;
}

.logo img{
	width: 50%;
	height: auto;
}

.top-grid .cell.sp_cell { display: none; }

}

@media (max-width: 768px){

.index_container{
	padding:10px 10px;
}

.toybox{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor:pointer;
}

.toybox img{
	width: 130px;
	height:auto;
	transition: all  0.2s ease;
}

.toybox img:hover{
	opacity: 0.7;
}

.top-grid {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:8px;
}

.is-hidden { display: none; }

.cell {
	position: relative;
	display: flex;
	/*aspect-ratio: 1 / 1; */
	align-items: center;
	justify-content: center;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.8s ease;
	/* border: 2px dotted #DDD; */
	padding:0 5px;
}

.cell a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transition: all  0.2s ease;
}

.cell a:hover{
	opacity: 0.7;
}

.cell.visible {
	opacity: 1;
}

.cell img {
	width:75%;
	height:auto;
	display:block;
	object-fit: contain;
}

.cell.logo {
	z-index: 1;
	opacity: 0;
	transition: opacity 1s ease,;
	grid-column: 1 / -1;      /* ←ここが肝。3列ぶんを横断 */
	aspect-ratio: auto;       /* ロゴは正方形制約を外す */
	display: flex;
	align-items: center;
	justify-content: center;
	padding:25px 0 25px;
}

.cell.logo.visible {
	opacity: 1;
}

.logo img{
	max-width: 140px;
	height: auto;
}

}

/*--------------------------------------------------------*/

/*  キャラクターの動き　*/

/*--------------------------------------------------------*/

@keyframes start_hop {
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-10%)}
  70%{transform:translateY(0)}
}

@keyframes start_shake {
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(4.5deg)}
  50%{transform:rotate(-4.5deg)}
  70%{transform:rotate(3.5deg)}
  80%{transform:rotate(-2.5deg)}
  90%{transform:rotate(1.5deg)}
}

@keyframes wobble {
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(5.5deg)}
  50%{transform:rotate(-5.5deg)}
  75%{transform:rotate(5.5deg)}
}

@keyframes wobble2 {
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(5.5deg)}
  50%{transform:rotate(-5.5deg)}
  70%{transform:rotate(5.5deg)}
  80%{transform:rotate(-3.0deg)}
  90%{transform:rotate(3.0deg)}
}

@keyframes wobble3 {
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(6.5deg)}
  50%{transform:rotate(-5.5deg)}
  75%{transform:rotate(4.0deg)}
}

@keyframes hop {
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-10%)}
  70%{transform:translateY(0)}
}

@keyframes hop2 {
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-8%)}
  70%{transform:translateY(0)}
}

@keyframes hop3 {
  0%, 100%{ transform: translateY(0); }
  20%{ transform: translateY(-9%); }
  40%{ transform: translateY(0); }
  60%{ transform: translateY(-6%); }
  80%{ transform: translateY(0); }
}

@keyframes baloon {
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-18%)}
  70%{transform:translateY(0)}
}

@keyframes korogaru {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-90deg); }
  60%  { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

/* クラスを付けたら1回だけ動く */

.start_hop { animation: start_hop 0.5s ease-in-out; }
.start_shake { animation: start_shake 0.5s ease-in-out; }
.wobble { animation: wobble 0.5s ease-in-out; }
.wobble2   { animation: wobble2 0.6s ease-in-out; }
.wobble3   { animation: wobble3 0.5s ease-in-out; }
.hop    { animation: hop 0.5s ease-in-out; }
.hop2    { animation: hop2 0.4s ease-in-out; }
.hop3    { animation: hop3 0.65s ease-in-out; }
.baloon    { animation: baloon 0.8s ease-in-out; }
.korogaru { animation: korogaru 1.0s ease-in-out; }