@charset "utf-8";
/* ============================================================
   KINJO ヘッダー（常設）
   ・ロゴ「KINJO」
   ・中央：KINJOステージ（キャラクター5人）
   ・右　：ご予約・お問い合わせカード
   ・メニュー4項目を均等割り
   読み込み順：style.css より後（header.php で指定済み）
   ============================================================ */

/* ---------- ロゴ ---------- */
header .logo .logo_kinjo{
	display:block;
	width:240px;
	height:auto;
	margin-left:0;
}

/* ---------- ご予約・お問い合わせカード ---------- */
.kj-info{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	position:relative;
	min-width:230px;
	padding:12px 18px;
	border:3px solid #1d2b6b;
	border-radius:16px;
	box-shadow:0 4px 0 #ffcd00;
	background:#fff;
	color:#1d2b6b;
	font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
	line-height:1.4;
	text-align:center;
}
.kj-info .kj-lb{
	position:absolute;
	top:-12px;
	left:50%;
	transform:translateX(-50%);
	padding:3px 12px;
	border-radius:999px;
	background:#e8202a;
	color:#fff;
	font-size:12px;
	font-weight:900;
	letter-spacing:.08em;
	line-height:1.4;
	white-space:nowrap;
}
.kj-info .kj-tel{
	display:flex;
	align-items:center;
	gap:6px;
	height:auto;
	margin-top:6px;
	padding:0;
	background:none;
	color:#1d2b6b;
	font:900 26px/1.1 "Arial Black","Hiragino Sans",sans-serif;
	letter-spacing:.02em;
	font-variant-numeric:tabular-nums;
	text-decoration:none;
	white-space:nowrap;
}
.kj-info .kj-tel svg{
	flex:none;
	width:22px;
	height:22px;
}
.kj-info .kj-hr{
	font-size:12px;
	font-weight:700;
	color:#4a5280;
}
.kj-info .kj-btn{
	display:inline-block;
	height:auto;
	margin-top:4px;
	padding:6px 16px;
	border:2px solid #1d2b6b;
	border-radius:999px;
	background:#ffcd00;
	color:#1d2b6b;
	font-size:13px;
	font-weight:900;
	line-height:1.4;
	text-decoration:none;
	white-space:nowrap;
	transition:transform .15s;
}
.kj-info .kj-btn:hover{
	background:#ffcd00;
	transform:translateY(-2px);
}

/* ---------- KINJOステージ ---------- */
.kj-stage{
	position:relative;
	width:340px;
	max-width:100%;
	aspect-ratio:3.1/1;
	margin:0 auto;
	isolation:isolate;
	user-select:none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:transparent;
}
.kj-bg{
	position:absolute;
	inset:-6% 0 0;
	z-index:-1;
	overflow:hidden;
	pointer-events:none;
	-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
	mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.kj-sun{
	position:absolute;
	left:50%;
	top:70%;
	z-index:-1;
	width:120%;
	aspect-ratio:1;
	transform:translate(-50%,-50%);
	pointer-events:none;
	background:repeating-conic-gradient(from 0deg,rgba(255,206,0,.55) 0 9deg,rgba(255,255,255,0) 9deg 18deg);
	-webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);
	mask:radial-gradient(circle,#000 18%,transparent 62%);
	animation:kj-spin 40s linear infinite;
}
.kj-glow{
	position:absolute;
	left:50%;
	top:62%;
	z-index:-1;
	width:60%;
	aspect-ratio:2/1;
	transform:translate(-50%,-50%);
	border-radius:50%;
	background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,236,170,0));
	pointer-events:none;
}
@keyframes kj-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.kj-row{
	position:absolute;
	inset:0;
	display:flex;
	align-items:flex-end;
	justify-content:center;
}
.kj-c{
	position:relative;
	height:92%;
	margin:0 -1.2%;
	cursor:pointer;
	transform-origin:50% 100%;
	animation:kj-wave 7s ease-in-out infinite;
}
.kj-c img{
	display:block;
	width:auto;
	max-width:none;
	height:100%;
	filter:drop-shadow(0 3px 2px rgba(80,40,0,.25));
	pointer-events:none;
}
.kj-c:nth-child(1){animation-delay:0s;transform:rotate(-3deg)}
.kj-c:nth-child(2){animation-delay:.18s}
.kj-c:nth-child(3){animation-delay:.36s;z-index:2}
.kj-c:nth-child(4){animation-delay:.54s}
.kj-c:nth-child(5){animation-delay:.72s;transform:rotate(3deg)}
@keyframes kj-wave{
	0%,8%,100%{translate:0 0}
	3%{translate:0 -14%}
	5.5%{translate:0 0}
	6.5%{translate:0 -4%}
}
.kj-c.jump{animation:kj-jump .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes kj-jump{
	0%{translate:0 0;scale:1 1}
	20%{scale:1.08 .9}
	55%{translate:0 -22%;scale:.95 1.06}
	100%{translate:0 0;scale:1 1}
}

/* ふきだし */
.kj-say{
	position:absolute;
	bottom:96%;
	left:50%;
	z-index:5;
	padding:6px 10px;
	border:2px solid #1d2b6b;
	border-radius:999px;
	box-shadow:0 3px 0 #ffcd00;
	background:#fff;
	color:#1d2b6b;
	font:900 12px/1.2 "Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
	white-space:nowrap;
	opacity:0;
	transform:translate(-50%,6px) scale(.6);
	transition:.25s cubic-bezier(.3,1.6,.5,1);
	pointer-events:none;
}
.kj-say:after{
	content:"";
	position:absolute;
	left:50%;
	top:100%;
	margin-left:-6px;
	border:6px solid transparent;
	border-top-color:#1d2b6b;
}
.kj-c.talk .kj-say{opacity:1;transform:translate(-50%,0) scale(1)}
.kj-c:first-child .kj-say{left:20%}
.kj-c:last-child .kj-say{left:70%}

/* きらきら */
.kj-spark{
	position:absolute;
	width:10px;
	height:10px;
	background:#ffcd00;
	clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
	pointer-events:none;
	animation:kj-tw 2.4s ease-in-out infinite;
}
.kj-spark.r{background:#e8202a}
.kj-spark.b{background:#1f6fd1}
@keyframes kj-tw{0%,100%{opacity:0;scale:.3}50%{opacity:1;scale:1}}

@media (prefers-reduced-motion:reduce){
	.kj-sun,.kj-c,.kj-spark{animation:none !important}
}

/* ============================================================
   PC・タブレット（769px 以上）
   ============================================================ */
@media (min-width:769px){
	/* ヘッダーが高くなるので「重ねる」のをやめて通常配置にする
	   （下のコンテンツ側で空けていた余白は下で打ち消す） */
	header{position:relative}
	.sliderWrapper{padding-top:0 !important}
	.subpage .main{padding-top:20px}

	header .wrapper{
		display:flex;
		align-items:center;
		height:auto;
		min-height:160px;			/* カード＋上のラベルが収まる高さ */
		padding:30px 268px 10px 0;	/* 上：ふきだしの場所 ／ 右：カードの場所 */
	}
	header .logo{flex:none}
	header .wrapper .box_img{
		position:static;
		flex:1 1 0;
		min-width:0;
		width:auto;
		padding:0 12px;
	}

	/* カードはメニュー帯のすぐ上・右端に置く */
	.tel_button_wrap .kj-info{
		position:absolute;
		right:0;
		bottom:10px;
		width:250px;
		min-width:0;
		padding-left:10px;
		padding-right:10px;
	}

	/* メニュー：4項目を均等割り */
	nav .navigation{display:flex}
	nav .navigation>li{
		flex:1 1 0;
		float:none;
		width:auto !important;
	}
}

/* 幅がせまいPC・タブレット（769〜1200px） */
@media (min-width:769px) and (max-width:1200px){
	header .wrapper{padding-left:10px;padding-right:262px}
	header .logo .logo_kinjo{width:200px}
	header .logo p{font-size:12px}
	.tel_button_wrap .kj-info{right:10px;width:236px}
	.kj-info .kj-tel{font-size:23px}
}
@media (min-width:769px) and (max-width:860px){
	header .logo .logo_kinjo{width:170px}
	header .logo p{font-size:11px}
}

/* ============================================================
   スマートフォン（768px 以下）
   ステージはPCのみ（.show-pc）。カードはスライドメニューの中に出る
   ============================================================ */
@media (max-width:768px){
	header .logo .logo_kinjo{width:150px;margin-top:6px}
	.tel_button_wrap .kj-info{
		min-width:0;
		margin:26px 10px 15px;
		padding:12px 8px 10px;
	}
	.kj-info .kj-tel{font-size:20px}
	.kj-info .kj-tel svg{width:18px;height:18px}
}