@charset "UTF-8";
/* ============================================================
   トップページ　メイン画像下の4つのメニュー（写真全体にうっすら色＋中央に文字）
   色の濃さ：各 .tm_xxx の --tm-color の最後の数字（.72）
             小さくすると写真が見えやすく、大きくすると文字が読みやすくなる
   ============================================================ */
.top_menu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 4px; }
.top_menu .tm_card {
	position: relative; display: block; overflow: hidden;
	height: 330px; text-decoration: none; color: #fff;
}
.top_menu .tm_bg {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	transition: transform .4s ease;
}
/* 写真全体にうっすら色 */
.top_menu .tm_card::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: var(--tm-color);
	transition: background .3s ease;
}
.top_menu .tm_body {
	position: relative; z-index: 2; box-sizing: border-box;
	height: 100%; max-width: 560px; margin: 0 auto; padding: 24px 30px;
	display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
	text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.top_menu .tm_iconwrap { display: block; height: 92px; overflow: hidden; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }  /* イラストの顔だけを見せる */
.top_menu .tm_icon { height: 120px; width: auto; display: block; }
.top_menu .tm_title { display: block; margin-top: 8px; font-size: 28px; font-weight: 900; letter-spacing: .12em; line-height: 1.4; }
.top_menu .tm_lead {
	display: block; margin: 10px 0 18px; font-size: 15px; font-weight: bold; line-height: 1.8; text-align: center;
}
.top_menu .tm_btn {
	display: inline-block; border: 2px solid #fff; padding: 9px 40px; background: rgba(255,255,255,.12);
	font-size: 14px; font-weight: bold; letter-spacing: .1em; text-shadow: none; transition: background .2s, color .2s;
}
.top_menu .tm_card:hover .tm_bg { transform: scale(1.06); }
.top_menu .tm_card:hover::after { background: var(--tm-color-hover); }
.top_menu .tm_card:hover .tm_btn { background: #fff; color: var(--tm-solid); }

/* 各メニューの色（今のサイトと同じ色） */
.top_menu .tm_business { --tm-solid: #0066ff; --tm-color: rgba(0,102,255,.72);  --tm-color-hover: rgba(0,102,255,.82); }
.top_menu .tm_shop     { --tm-solid: #e5014c; --tm-color: rgba(229,1,76,.72);   --tm-color-hover: rgba(229,1,76,.82); }
.top_menu .tm_product  { --tm-solid: #e53c01; --tm-color: rgba(229,60,1,.72);   --tm-color-hover: rgba(229,60,1,.82); }
.top_menu .tm_fukuro   { --tm-solid: #d99a12; --tm-color: rgba(222,150,10,.75); --tm-color-hover: rgba(222,150,10,.85); }

/* ---------- スマホ ---------- */
@media screen and (max-width: 768px) {
	.top_menu { grid-template-columns: 1fr; }
	.top_menu .tm_card { height: auto; min-height: 230px; }
	.top_menu .tm_body { padding: 22px 18px; }
	.top_menu .tm_iconwrap { height: 60px; }
	.top_menu .tm_icon { height: 78px; }
	.top_menu .tm_title { font-size: 21px; margin-top: 4px; }
	.top_menu .tm_lead { font-size: 13px; line-height: 1.7; margin: 8px 0 14px; }
	.top_menu .tm_btn { padding: 7px 28px; font-size: 13px; }
}