@charset "utf-8";

/* ==================================================
PC
================================================== */

/* 非表示 */
#footstep_wrap {
	display: none !important;
}
@media screen and ( min-width: 1100px ) {
	#subsite_menu_wrap {
		display: none;
	}
}

/* ==================== レイアウト ==================== */

#mymainback {
	display: block;
	width: auto;
	padding: 0;
}


/* ==================== 背景 ==================== */

#header {
	background-color: var(--bgColor-skyblue);
	background-image:
		url(/img/sites/kids/top/bg_ground1.png),
		url(/img/sites/kids/top/bg_cloud_bottom.png),
		url(/img/sites/kids/top/bg_cloud_header.png);
	background-position:
		center bottom -450px,
		center bottom -240px,
		left center;
	background-repeat: no-repeat;
}
#header2 {
	background: none;
	margin-bottom: 38px;
}
@media screen and (width > 2000px) {
	#header {
		background-size:
			100% auto,
			100% auto,
			auto;
	}
}
#top_main_about { background: #dcdf7e; }
#top_main_news  { background: #c3da70; }
#top_main_map   { background: #dcdf7e; }
#top_main_link  { background: #f5f5d9; }
#top_menu,
[id^="top_main_"] { position: relative; }
#top_menu > *,
[id^="top_main_"] > * {
	position: relative;
	z-index: 1;
}
/* #top_menu::before, */
[id^="top_main_"]::before {
	content: '';
	display: block;
	width: 100%;
	height: 500px ;
	background-position: center top;
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
	top: -210px;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 0;
}
#top_main_about::before { content: ''; }
#top_main_news::before {
	top: -245px;
	background-image: url(/img/sites/kids/top/bg_ground2.png);
}
#top_main_map::before {
	top: -220px;
	background-image: url(/img/sites/kids/top/bg_ground3.png);
}
#top_main_link::before {
	top: -280px;
	background-image: url(/img/sites/kids/top/bg_ground4.png);
}


/* ==================== テキスト共通 ==================== */

.ttl_main {
	font-size: 2.8rem;
	font-weight: bold;
	letter-spacing: .05em;
}
.ttl_sub {
	font-size: 2.2rem;
	font-weight: bold;
	letter-spacing: .05em;
}
.txt_body {
	font-size: 1.8rem;
	font-weight: bold;
}

rt {
	font-size: 1.0rem;
	font-weight: bold;
	margin: 0 0 4px;
}
.ttl_main rt,
.ttl_sub rt {
	font-size: 1.2rem;
}


/* ==================== ヘッダ・かるた ==================== */

/* ========== ヘッダ ========== */

/* レイアウト */
#header2_box {
	display: grid;
	grid-template-columns: 1fr 360px 1fr;
	grid-template-rows: repeat(2, auto);
	grid-column-gap: 30px;
	grid-row-gap: 20px;
}
#he_left  { grid-area: 2 / 2 / 3 / 3; }
#he_right { grid-area: 1 / 1 / 2 / 4;
	margin: 0 auto;
	position: relative;
	z-index: 5; }
#cd_left  { grid-area: 2 / 1 / 3 / 2;
	margin-left: 30px; }
#cd_right { grid-area: 2 / 3 / 3 / 4;
	margin-right: 30px; }

/* ロゴ */
#he_left {
	width: auto;
	margin-left: 5px;
	position: relative;
	top: 0;
	text-align: center;
}
#he_left #logo {
	top: 0;
	padding: 52px 0 0;
	position: relative;
	z-index: 1;
}
#he_left #logo::before,
#he_left #logo::after {
	content: '';
	position: absolute;
	z-index: 0;
}
#he_left #logo::before {
	width: 234px;
	height: 94px;
	background: url(/img/sites/kids/top/top_logo_1.png) no-repeat center center / contain;
	top: 8px;
	left: calc(50% - 121px);
	opacity: 0;
}
#he_left #logo::after {
	width: 128px;
	height: 80px;
	background: url(/img/sites/kids/top/top_logo_3.png) no-repeat center center / contain;
	top: 0;
	left: -63px;
}
#he_left #logo img {
	position: relative;
	z-index: 2;
}
#he_left p {
	margin: 5px 0;
	color: #40210f;
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
}
.loaded #he_left #logo::before {
	-webkit-animation: logoPop .6s ease-out forwards;
	        animation: logoPop .6s ease-out forwards;
	-webkit-animation-delay: .5s;
	        animation-delay: .5s;
}
@-webkit-keyframes logoPop {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20%) scale(0.6);
		        transform: translateY(20%) scale(0.6);
	}
	70% {
		opacity: 1;
		-webkit-transform: translateY(-5%) scale(1.05);
		        transform: translateY(-5%) scale(1.05);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0) scale(1);
		        transform: translateY(0) scale(1);
	}
}
@keyframes logoPop {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20%) scale(0.6);
		        transform: translateY(20%) scale(0.6);
	}
	70% {
		opacity: 1;
		-webkit-transform: translateY(-5%) scale(1.05);
		        transform: translateY(-5%) scale(1.05);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0) scale(1);
		        transform: translateY(0) scale(1);
	}
}

/* 閲覧補助 */
.header_nav > div {
	padding: 10px 0;
}

/* ========== かるた ========== */

/* かるた（回転） */
.carta .card {
	position: relative;
	-webkit-perspective: 1000px;
	        perspective: 1000px;
	-webkit-filter:
		drop-shadow(3px 3px 3px rgb(70 70 70 / .1))
		drop-shadow(3px 3px 3px rgb(70 70 70 / .1))
		drop-shadow(3px 3px 3px rgb(70 70 70 / .1));
	        filter:
		drop-shadow(3px 3px 3px rgb(70 70 70 / .1))
		drop-shadow(3px 3px 3px rgb(70 70 70 / .1))
		drop-shadow(3px 3px 3px rgb(70 70 70 / .1));
}

.carta .card_inner {
	position: relative;
	width: 120px;
	height: 170px;
	-webkit-transition: -webkit-transform .6s;
	transition: -webkit-transform .6s;
	-o-transition: transform .6s;
	transition: transform .6s;
	transition: transform .6s, -webkit-transform .6s;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	cursor: pointer;
}
.carta .card.is-flipped .card_inner {
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}
.carta .card img {
	vertical-align: top;
	width: 120px;
	height: 170px;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
.carta .card .back {
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}

/* かるた左 */
#cd_left {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 170px);
	grid-column-gap: 30px;
	grid-row-gap: 60px;
	margin-left: 30px;
}
#cd_left .card_inner { margin: 0 auto 0 0; }

.card.item1 { grid-area: 1 / 1 / 2 / 2; }
.card.item2 { grid-area: 1 / 2 / 3 / 3; }
.card.item3 { grid-area: 2 / 1 / 3 / 2; }

.item1 .card_inner {
	left: 31px; top: 0; }
.item2 .card_inner {
	left: 19px; top: 115px; }

/* かるた右 */
#cd_right {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 170px);
	grid-column-gap: 30px;
	grid-row-gap: 85px;
	margin-right: 30px;
	margin-top: 10px;
	position: relative;
}
#cd_right::before {
	content: '';
	background: url(/img/sites/kids/top/carta_bubble.png) no-repeat center center / contain;
	display: block;
	width: 196px;
	height: 104px;
	position: absolute;
	left: -48px;
	top: 0;
	z-index: 0;
	pointer-events: none;
}
#cd_right .card_inner { margin: 0 0 0 auto; }

.card.item4 { grid-area: 1 / 2 / 2 / 3; }
.card.item5 { grid-area: 1 / 1 / 3 / 2; }
.card.item6 { grid-area: 2 / 2 / 3 / 3; }

.item4 .card_inner {
	right: 0;    top: 0; }
.item5 .card_inner {
	right: 20px; top: 117px; }
.item6 .card_inner {
	right: 40px; top: 0; }

	/* ホバーイベント */
	.carta .card {
		-webkit-transition: -webkit-transform .2s ease;
		transition: -webkit-transform .2s ease;
		-o-transition: transform .2s ease;
		transition: transform .2s ease;
		transition: transform .2s ease, -webkit-transform .2s ease;
	}
	#cd_left.carta .card:nth-child(odd):hover,
	#cd_right.carta .card:nth-child(even):hover {
		-webkit-animation: cardJumpTiltL 1.5s ease-out 1;
				animation: cardJumpTiltL 1.5s ease-out 1;
	}
	@-webkit-keyframes cardJumpTiltL {
		0%   { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
		10%  { -webkit-transform: translateY(0) rotate(-5deg); transform: translateY(0) rotate(-5deg); }
		40%  { -webkit-transform: translateY(-15px) rotate(-5deg); transform: translateY(-15px) rotate(-5deg); }
		95%  { -webkit-transform: translateY(0) rotate(-5deg); transform: translateY(0) rotate(-5deg); }
		100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
	}
	@keyframes cardJumpTiltL {
		0%   { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
		10%  { -webkit-transform: translateY(0) rotate(-5deg); transform: translateY(0) rotate(-5deg); }
		40%  { -webkit-transform: translateY(-15px) rotate(-5deg); transform: translateY(-15px) rotate(-5deg); }
		95%  { -webkit-transform: translateY(0) rotate(-5deg); transform: translateY(0) rotate(-5deg); }
		100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
	}
	#cd_left.carta .card:nth-child(even):hover,
	#cd_right.carta .card:nth-child(odd):hover {
		-webkit-animation: cardJumpTiltR 1.5s ease-out 1;
				animation: cardJumpTiltR 1.5s ease-out 1;
	}
	@-webkit-keyframes cardJumpTiltR {
		0%   { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
		10%  { -webkit-transform: translateY(0) rotate(5deg); transform: translateY(0) rotate(5deg); }
		40%  { -webkit-transform: translateY(-15px) rotate(5deg); transform: translateY(-15px) rotate(5deg); }
		95%  { -webkit-transform: translateY(0) rotate(5deg); transform: translateY(0) rotate(5deg); }
		100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
	}
	@keyframes cardJumpTiltR {
		0%   { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
		10%  { -webkit-transform: translateY(0) rotate(5deg); transform: translateY(0) rotate(5deg); }
		40%  { -webkit-transform: translateY(-15px) rotate(5deg); transform: translateY(-15px) rotate(5deg); }
		95%  { -webkit-transform: translateY(0) rotate(5deg); transform: translateY(0) rotate(5deg); }
		100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
	}


/* ==================== メニュー（トップページ用） ==================== */

/* レイアウト */
#top_menu ul {
	display: grid;
	grid-template-columns: repeat(5, auto);
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	gap: 35px;
	width: var(--content-width, 1100px);
	margin: 0 auto;
}
#top_menu .menu1 { order: 3; }
#top_menu .menu2 { order: 2; }
#top_menu .menu3 { order: 4; }
#top_menu .menu4 { order: 1; }
#top_menu .menu5 { order: 5; }
#top_menu [class^="menu"] a {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	height: auto;
	aspect-ratio: 1 / 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: 0 auto;
	border-radius: 100%;
	outline: 2px solid #fff;
	outline-offset: -12px;
	position: relative;
	z-index: 1;
}
#top_menu [class^="menu"] a img {
	vertical-align: top;
}
#top_menu [class^="menu"] a::before {
	content: '';
	display: block;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}

/* サイズ */
#top_menu .menu1 a {
	width: 240px;
	padding: 80px 0 40px;
	outline: 3px solid #fff;
	outline-offset: -13px;
}
#top_menu .menu2 a,
#top_menu .menu3 a {
	width: 200px;
	padding: 30px 0 10px;
}
#top_menu .menu3 a {
	padding-bottom: 20px;
}
#top_menu .menu4 a,
#top_menu .menu5 a {
	width: 140px;
	padding-top: 10px;
}

/* 背景色 */
#top_menu .menu1 a { background: var(--themeColor1); }
#top_menu .menu2 a { background: var(--themeColor2); }
#top_menu .menu3 a { background: var(--themeColor3); }
#top_menu .menu4 a { background: var(--themeColor4); color: #fff; }
#top_menu .menu5 a { background: var(--themeColor5); color: #fff; }

/* キャラクター */
#top_menu .menu1 a::before {
	width: 106px;
	height: 130px;
	top: -58px;
	background-image: url(/img/sites/kids/top/menu_illust_1.png);
}
#top_menu .menu2 a::before {
	width: 66px;
	height: 114px;
	top: -68px;
	background-image: url(/img/sites/kids/top/menu_illust_2.png);
}
#top_menu .menu3 a::before {
	width: 81px;
	height: 85px;
	top: -36px;
	background-image: url(/img/sites/kids/top/menu_illust_3.png);
}
#top_menu .menu4 a::before {
	width: 68px;
	height: 80px;
	top: -44px;
	background-image: url(/img/sites/kids/top/menu_illust_4.png);
}
#top_menu .menu5 a::before {
	width: 68px;
	height: 74px;
	top: -37px;
	background-image: url(/img/sites/kids/top/menu_illust_5.png);
}

/* キャラクターふきだし */
#top_menu [class^="menu"]::after {
	content: '';
	display: block;
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
#top_menu .menu1::after {
	background-image: url(/img/sites/kids/top/menu_bubble_1.png);
	width: 116px;
	height: 82px;
	top: -75px;
	left: calc(50% + 42px);
}
#top_menu .menu2::after {
	background-image: url(/img/sites/kids/top/menu_bubble_2.png);
	width: 133px;
	height: 75px;
	top: -128px;
	left: -12px;
}
#top_menu .menu3::after {
	background-image: url(/img/sites/kids/top/menu_bubble_3.png);
	width: 97px;
	height: 92px;
	top: -131px;
	left: calc(50% - 17px);
}
#top_menu .menu4::after {
	background-image: url(/img/sites/kids/top/menu_bubble_4.png);
	width: 160px;
	height: 55px;
	top: -93px;
	left: -30px;
}
#top_menu .menu5::after {
	background-image: url(/img/sites/kids/top/menu_bubble_5.png);
	width: 100px;
	height: 50px;
	top: -80px;
	left: -5px;
}

/* ボタンの影 */
#top_menu [class^="menu"] {
	position: relative;
}
#top_menu [class^="menu"]::before {
	content: '';
	display: block;
	background: rgb(0 0 0 / .12);
	border-radius: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, 50%);
	    -ms-transform: translate(-50%, 50%);
	        transform: translate(-50%, 50%);
	z-index: 0;
}
#top_menu .menu1::before {
	width: 180px;
	height: 24px;
}
#top_menu .menu2::before,
#top_menu .menu3::before {
	width: 140px;
	height: 24px;
}
#top_menu .menu4::before,
#top_menu .menu5::before {
	width: 100px;
	height: 16px;
}

/* ホバーイベント */
#top_menu [class^="menu"] a {
	-webkit-transition: -webkit-transform .25s ease;
	transition: -webkit-transform .25s ease;
	-o-transition: transform .25s ease;
	transition: transform .25s ease;
	transition: transform .25s ease, -webkit-transform .25s ease;
}
#top_menu [class^="menu"] a:hover,
#top_menu [class^="menu"] a:focus {
	-webkit-filter:
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 0 #fff)
		drop-shadow(0 0 0 #fff)
		drop-shadow(0 0 0 #fff)
		drop-shadow(0 0 0 #fff);
	        filter:
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 1px #fff)
		drop-shadow(0 0 0 #fff)
		drop-shadow(0 0 0 #fff)
		drop-shadow(0 0 0 #fff)
		drop-shadow(0 0 0 #fff);
	/* -webkit-transform: translateY(-10px);
	    -ms-transform: translateY(-10px);
	        transform: translateY(-10px); */
}
#top_menu [class^="menu"] a:hover::before,
#top_menu [class^="menu"] a:focus::before {
	-webkit-animation: jumpOnce .25s ease-out;
	        animation: jumpOnce .25s ease-out;
}
@-webkit-keyframes jumpOnce {
	0%   { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
	40%  { -webkit-transform: translate(-50%, -10%); transform: translate(-50%, -10%); }
	100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
}
@keyframes jumpOnce {
	0%   { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
	40%  { -webkit-transform: translate(-50%, -10%); transform: translate(-50%, -10%); }
	100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
}


/* ==================== 市川市のことを知ろう ==================== */

#top_main_about {
	padding: 90px 20px 200px;
}
#top_main_about h2 {
	margin: 0 auto 40px;
	padding: calc(18px + 1rem) 35px 10px 156px;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	background: var(--themeColor6);
	border-radius: 40px;
	color: #fff;
	text-align: center;
	position: relative;
}
#top_main_about h2::before {
	content: '';
	display: block;
	width: 106px;
	height: 90px;
	display: block;
	background: url(/img/sites/kids/top/about_ttl.png) no-repeat center center / contain;
	position: absolute;
	bottom: 5px;
	left: 35px;
}
#top_main_about h2::after {
	content: '';
	width: 28px;
	height: 21px;
	background: inherit;
	background-position: center bottom 20px;
	-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
	        clip-path: polygon(50% 100%, 0 0, 100% 0);
	position: absolute;
	bottom: -20px;
	left: calc(50% - 14px);
}

#top_main_about .box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 30px;
	width: var(--content-width, 1100px);
	margin: 0 auto;
}
#top_main_about .item {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	width: 500px;
	min-height: 180px;
	padding: 20px 40px 20px 20px;
	background: rgb(255 255 255 / .7);
	border-radius: 90px;
	color: #40210f;
	display: grid;
	grid-template-columns: 140px 1fr;
	grid-template-rows: auto 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 0px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	justify-items: start;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: start;
	outline: 10px solid rgb(255 255 255 / 0);
	outline-offset: -10px;
	text-decoration: none;
	-webkit-transition: outline .2s ease-out;
	-o-transition: outline .2s ease-out;
	transition: outline .2s ease-out;
}
#top_main_about .item:hover {
	outline-color: #fff;
	text-decoration: underline;
}
#top_main_about .item::before {
	grid-area: 1 / 1 / 3 / 2;
	content: '';
	display: block;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	width: 140px;
	height: 140px;
	border: 1px solid #fff;
	background: #fff center center / cover;
	border-radius: 100%;
}
#top_main_about .item1::before {
	background-image: url(/img/sites/kids/top/about1.jpg); }
#top_main_about .item2::before {
	background-image: url(/img/sites/kids/top/about2.jpg); }
#top_main_about .item3::before {
	background-image: url(/img/sites/kids/top/about3.jpg); }
#top_main_about .item4::before {
	background-image: url(/img/sites/kids/top/about4.jpg); }
#top_main_about .ttl {
	grid-area: 1 / 2 / 2 / 3;
	background-image: -o-linear-gradient(left, currentColor 1px, transparent 2px);
	background-image: linear-gradient(to right, currentColor 1px, transparent 2px);
	background-size: 6px 2px;
	background-repeat: repeat-x;
	background-position: left bottom;
	display: inline-block;
	width: 100%;
}
#top_main_about .txt {
	grid-area: 2 / 2 / 3 / 3;
	padding: 1.5rem 0 0;
}


/* ==================== イベント情報（サブサイト新着情報） ==================== */

#top_main_news {
	padding: 0 20px 240px;
}
.section_information {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background: rgb(255 255 255 / .7);
	border-radius: 90px;
	width: var(--content-width, 1100px);
	margin: 0 auto;
	padding: 70px 75px 60px;
	position: relative;
}
.section_information h2 {
	margin: 0 auto;
	padding: calc(18px + 1rem) 163px 10px 164px;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	background: var(--themeColor7);
	border-radius: 40px;
	color: #fff;
	text-align: center
	;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%, calc(-100% + 35px));
	    -ms-transform: translate(-50%, calc(-100% + 35px));
	        transform: translate(-50%, calc(-100% + 35px));
}
.section_information h2::after {
	content: '';
	width: 28px;
	height: 21px;
	background: inherit;
	background-position: center bottom 20px;
	-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
	        clip-path: polygon(50% 100%, 0 0, 100% 0);
	position: absolute;
	bottom: -20px;
	left: calc(50% - 14px);
}
.section_information h2 > span::before,
.section_information h2 > span::after {
	content: '';
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 5px;
}
.section_information h2 > span::before {
	background-image: url(/img/sites/kids/top/event_ttl_l.png);
	width: 114px;
	height: 84px;
	left: 35px;
}
.section_information h2 > span::after {
	background-image: url(/img/sites/kids/top/event_ttl_r.png);
	width: 88px;
	height: 80px;
	right: 35px;
}
.section_information p.no_data {
	margin: 60px 0 0;
	padding: 20px 0;
	text-align: center;
}

.section_information_list ul {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}
.section_information_list ul li {
	width: 100%;
	display: table;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 0;
	background-image: -o-linear-gradient(left, currentColor 1px, transparent 2px);
	background-image: linear-gradient(to right, currentColor 1px, transparent 2px);
	background-size: 6px 2px;
	background-repeat: repeat-x;
	background-position: left bottom;
	color: #40210f;
}
.section_information_list ul li > span {
	display: table-cell;
	vertical-align: top;
}
.section_information_list ul li > span.article_date {
	width: calc(11em + 10px);
	font-size: var(--fontsize-detail-small, 1.6rem);
	padding: calc(17px + 0.1rem) 0 17px;
}
.section_information_list ul li > span.article_title a {
	display: block;
	padding: 17px 0;
	font-size: var(--fontsize-detail, 1.8rem);
}

/* 新着情報（文字拡大時） */
.font_size_changed .section_information_list ul li,
.font_size_changed .section_information_list ul li > span {
	display: block;
}
.font_size_changed .section_information_list ul li > span.article_date {
	width: auto;
	padding-bottom: 0;
}
.font_size_changed .section_information_list ul li > span.article_title a {
	padding-top: 0;
}

/* 一覧 / RSS */
.link_box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: 20px;
}
.link_box a {
	display: block;
	max-width: 50%;
	border: 3px solid #fff;
	border-radius: 25px;
	background: #fff;
	color: currentColor;
	font-size: var(--fontsize-detail-small, 1.6rem);
	text-decoration: none;
	margin: 0;
	padding: 13px 75px 3px 30px;
	position: relative;
	-webkit-transition: background-color .2s ease-out;
	-o-transition: background-color .2s ease-out;
	transition: background-color .2s ease-out;
}
.link_box a:hover,
.link_box a:focus {
	text-decoration: underline;
	background-color: transparent;
}
.link_box a.link_rss {
	padding: 8px 55px 8px 30px;
}
/* 矢印 */
.link_box a::after {
	content: '';
	display: block;
	width: 7px;
	height: 10px;
	background: url(/img/sites/kids/arrow_g.png) center center / contain;
	position: absolute;
	top: calc(50% - 5px);
	right: 30px;
	opacity: 1;
	-webkit-transition: .2s ease-out;
	-o-transition: .2s ease-out;
	transition: .2s ease-out;
}
.link_box a:hover::after,
.link_box a:focus::after {
	opacity: 0;
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	        transform: translateX(100%);
}

/* ==================== いちかわマップ ==================== */

#top_main_map {
	padding: 0 20px 100px;
}
#top_main_map .box {
	background: var(--themeColor3);
	color: #333;
	border-radius: 20px;
	position: relative;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	width: var(--content-width, 1100px);
	margin: 0 auto;
	padding: 27px 30px;
}
#top_main_map .box::before {
	content: '';
	display: block;
	background: inherit;
	background-position: center top 100px;
	border-radius: 100%;
	width: 380px;
	height: 380px;
	position: absolute;
	top: -100px;
	left: calc(50% - 190px);
	z-index: 0;
}
#top_main_map .box h2 {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin: 0;
	padding: 0;
	position: absolute;
	top: -100px;
	left: 50%;
	-webkit-transform: translate(-50%, 14px);
	    -ms-transform: translate(-50%, 14px);
	        transform: translate(-50%, 14px);
	z-index: 5;
}
#top_main_map .box h2 img {
	vertical-align: top;
}
#tab_ttl {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(2, 168px) 1fr repeat(2, 168px);
	grid-template-rows: 1fr;
	grid-column-gap: 30px;
	grid-row-gap: 0px;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	list-style: none;
	margin: 0 0 -25px;
	padding: 0 10px;
	position: relative;
}

#tab_ttl li:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
#tab_ttl li:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
#tab_ttl::before         { grid-area: 1 / 3 / 2 / 4; }
#tab_ttl li:nth-child(3) { grid-area: 1 / 4 / 2 / 5; }
#tab_ttl li:nth-child(4) { grid-area: 1 / 5 / 2 / 6; }

/* 中央イラスト */
#tab_ttl::before {
	content: '';
	background: url(/img/sites/kids/top/map_icon.png) center no-repeat;
	background-size: contain;
	display: block;
	width: 241px;
	height: 241px;
	margin: -73px calc(-13px / 2) -10px;
}

/* ボタン */
#tab_ttl button {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	width: 168px;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	padding: 50px 0 15px;
	border: 10px solid #fff;
	border-radius: 100%;
	background: #ffffd5;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: end;
	-ms-flex-line-pack: center;
	    align-content: center;
	line-height: 1.5;
	position: relative;
	-webkit-transition: border-color .2s ease-out;
	-o-transition: border-color .2s ease-out;
	transition: border-color .2s ease-out;
}
#tab_ttl button.tab_on {
	background: #fff100;
	pointer-events: none;
}

/* ボタンのキャラクター */
#tab_ttl button::before {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
#tab_ttl .item1::before {
	width: 96px;
	height: 89px;
	top: -24px;
	background-image: url(/img/sites/kids/top/map_illust_1.png);
}
#tab_ttl .item2::before {
	width: 79px;
	height: 70px;
	top: -27px;
	background-image: url(/img/sites/kids/top/map_illust_2.png);
}
#tab_ttl .item3::before {
	width: 65px;
	height: 69px;
	top: -14px;
	background-image: url(/img/sites/kids/top/map_illust_3.png);
}
#tab_ttl .item4::before {
	width: 78px;
	height: 70px;
	top: -17px;
	background-image: url(/img/sites/kids/top/map_illust_4.png);
}
/* ホバーイベント */
#tab_ttl button {
	-webkit-transition: border-color .2s ease-out;
	-o-transition: border-color .2s ease-out;
	transition: border-color .2s ease-out;
}
#tab_ttl button:hover,
#tab_ttl button:focus {
	border-color: #fff100;
	text-decoration: underline;
}
#tab_ttl button.tab_on:hover,
#tab_ttl button.tab_on:focus {
	border-color: #fff;
	text-decoration: none;
}
#tab_ttl button::before {
	-webkit-transition: -webkit-transform .2s ease;
	transition: -webkit-transform .2s ease;
	-o-transition: transform .2s ease;
	transition: transform .2s ease;
	transition: transform .2s ease, -webkit-transform .2s ease;
}
#tab_ttl button:hover::before {
	-webkit-animation: wiggleX 0.9s ease-out;
	        animation: wiggleX 0.9s ease-out;
}
@-webkit-keyframes wiggleX {
	0%   { -webkit-transform: translateX(-50%) translateX(0) rotate(0deg); transform: translateX(-50%) translateX(0) rotate(0deg); }
	20%  { -webkit-transform: translateX(-50%) translateX(-4px) rotate(-3deg); transform: translateX(-50%) translateX(-4px) rotate(-3deg); }
	45%  { -webkit-transform: translateX(-50%) translateX(3px) rotate(2deg); transform: translateX(-50%) translateX(3px) rotate(2deg); }
	70%  { -webkit-transform: translateX(-50%) translateX(-2px) rotate(-1deg); transform: translateX(-50%) translateX(-2px) rotate(-1deg); }
	100% { -webkit-transform: translateX(-50%) translateX(0) rotate(0deg); transform: translateX(-50%) translateX(0) rotate(0deg); }
}
@keyframes wiggleX {
	0%   { -webkit-transform: translateX(-50%) translateX(0) rotate(0deg); transform: translateX(-50%) translateX(0) rotate(0deg); }
	20%  { -webkit-transform: translateX(-50%) translateX(-4px) rotate(-3deg); transform: translateX(-50%) translateX(-4px) rotate(-3deg); }
	45%  { -webkit-transform: translateX(-50%) translateX(3px) rotate(2deg); transform: translateX(-50%) translateX(3px) rotate(2deg); }
	70%  { -webkit-transform: translateX(-50%) translateX(-2px) rotate(-1deg); transform: translateX(-50%) translateX(-2px) rotate(-1deg); }
	100% { -webkit-transform: translateX(-50%) translateX(0) rotate(0deg); transform: translateX(-50%) translateX(0) rotate(0deg); }
}
#tab_ttl button.tab_on:hover::before,
#tab_ttl button.tab_on:focus::before {
	-webkit-animation: none;
	        animation: none;
}

/* マップ */
#main_body {
	width: 100%;
	height: 600px;
	border-radius: 10px;
	overflow: hidden;
	background: #333;
	color: #fff;
	position: relative;
	z-index: 10;
}
#main_body a {
	color: inherit;
}
#main_body div[class*="detail_"] {
	margin: 0;
	height: 100%;
}
#main_body iframe {
	width: 100% !important;
	height: 100% !important;
	border: none;
}
#main_body .detail_map + div:not([class^="detail_"]) {
	display: none;
}

/* ========== 文字サイズ変更時 ========== */

.font_size_changed #tab_ttl {
	grid-template-columns: repeat(2, 193px) 1fr repeat(2, 193px);
	grid-column-gap: 10px;
	padding: 0;
}
.font_size_changed #tab_ttl button {
	border-radius: 95px;
	width: 193px;
}
.font_size_changed #tab_ttl .item1::before { top: -44px; }
.font_size_changed #tab_ttl .item3::before { top: -29px; }
.font_size_changed #tab_ttl .item4::before { top: -32px; }


/* ==================== おすすめサイト ==================== */

#top_main_link {
	padding: 0 20px 40px;
}
#top_main_link h2 {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	color: #40210f;
	text-align: center;
	width: var(--content-width, 1100px);
	max-width: 100%;
	margin: 0 auto;
	padding: 20px;
	position: relative;
}
#top_main_link h2::before {
	content: '';
	display: block;
	width: ;
}

#top_main_link .box {
	width: var(--content-width, 1100px);
	margin: 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

#top_main_link .box a.link {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background: var(--themeColor7);
	border: 1px solid #158436;
	border-radius: 10px;
	overflow: hidden;
	color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 255px;
	text-align: center;
	text-decoration: none;
	outline: 3px solid rgb(21 132 54 / .0);
	-webkit-transition: outline .2s ease-out;
	-o-transition: outline .2s ease-out;
	transition: outline .2s ease-out;
}
#top_main_link .box a.link:hover,
#top_main_link .box a.link:focus {
	outline: 3px solid rgb(21 132 54 / .3);
	text-decoration: underline;
}
#top_main_link .box a.link::before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	content: '';
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 255 / 120;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 1px solid #158436;
	-webkit-transition: -webkit-transform .4s ease-out;
	transition: -webkit-transform .4s ease-out;
	-o-transition: transform .4s ease-out;
	transition: transform .4s ease-out;
	transition: transform .4s ease-out, -webkit-transform .4s ease-out;
}
#top_main_link .box a.link.item1::before {
	background-image: url(/img/sites/kids/top/link1.jpg); }
#top_main_link .box a.link.item2::before {
	background-image: url(/img/sites/kids/top/link2.jpg); }
#top_main_link .box a.link.item3::before {
	background-image: url(/img/sites/kids/top/link3.jpg); }
#top_main_link .box a.link.item4::before {
	background-image: url(/img/sites/kids/top/link4.jpg); }

#top_main_link .box a.link .txt {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	display: inline-block;
	padding: .75em 10px 0px;
	max-width: 100%;
	line-height: 2;
}
#top_main_link .box a.link:hover::before,
#top_main_link .box a.link:focus::before {
	-webkit-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	        transform: scale(1.05);
}


/* ==================== 背景色変更 ==================== */

/* 共通 */
.color_change .carta .card,
.color_change #top_main_map .box h2 {
	background-color: transparent !important;
}
.color_change #top_menu [class^="menu"] a:hover,
.color_change #top_menu [class^="menu"] a:focus {
	-webkit-filter: none;
	        filter: none;
	outline: 3px solid rgb(255 255 255 / .5);
}
.color_change #cd_right::before,
.color_change #top_menu [class^="menu"]::after {
	-webkit-filter: brightness(100) grayscale(1);
	        filter: brightness(100) grayscale(1);
}
.color_change #top_main_about h2::before,
.color_change .section_information h2 > span::before,
.color_change .section_information h2 > span::after {
	display: none;
}
.color_change #top_main_about h2 {
	padding: calc(18px + 1rem) 35px 10px 45px;
}
.color_change .section_information h2 {
	padding: calc(18px + 1rem) 100px 10px;
}
/* 黒 */
.color_black #top_menu [class^="menu"] a:hover,
.color_black #top_menu [class^="menu"] a:focus {
	background-color: #333 !important;
}
/* 青 */
.color_blue #top_menu [class^="menu"] a:hover,
.color_blue #top_menu [class^="menu"] a:focus {
	background-color: #00a !important;
}

/* ==================================================
PC ここまで
================================================== */


/* ==================================================
スマートフォン
================================================== */
@media screen and (max-width: 1100px) {
	
	/* 非表示 */
	#subsite_menu_wrap {
		display: none;
	}

	/* 共通 */
	.ttl_main {
		font-size: 2.4rem;
	}


	/* ==================== レイアウト ==================== */

	#mymainback {
		margin: 0;
	}

	.ttl_sub { font-size: 1.8rem; }
	.ttl_sub rt { margin: 0 0 3px; }


	/* ==================== 背景 ==================== */




	/* ==================== ヘッダ・かるた ==================== */

	/* レイアウト */
	#header2 {
		margin-bottom: -40px;
	}
	#header2_box {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	#he_left  { grid-area: 1 / 1 / 2 / 3;
		margin: 0 auto; }
	#he_right { grid-area: inherit; }
	#cd_left  { grid-area: 2 / 1 / 3 / 2; }
	#cd_right { grid-area: 2 / 2 / 3 / 3; }

	/* ロゴ */
	#he_left #logo::before {
		width: 182px;
		height: 97px;
		left: calc(50% - 93px);
		top: 5px;
	}
	#he_left #logo::after {
		width: 105px;
		height: 66px;
		top: -2px;
		left: calc(50% - 178px);
	}
	#he_left #logo img {
		width: 275px;
		height: auto;
	}

	/* ふきだし */
	#cd_right::before {
		display: none;
	}
	#cd_left::before {
		content: '';
		background: url(/img/sites/kids/top/carta_bubble.png) no-repeat center center / contain;
		display: block;
		width: 187px;
		height: auto;
		aspect-ratio: 196 / 104;
		position: absolute;
		left: -60px;
		top: -120px;
		z-index: 0;
		pointer-events: none;
	}

	/* かるたの配置 */
	#cd_left,
	#cd_right {
		grid-template-columns: repeat(2, 120px);
		grid-row-gap: clamp(20px, 5.3333vw, 40px);
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		position: relative;
	}
	#cd_left {
		margin: clamp(20px, 5.3333vw, 40px) 15px clamp(20px, 5.3333vw, 40px) auto;
	}
	#cd_right {
		margin: clamp(20px, 5.3333vw, 40px) auto clamp(20px, 5.3333vw, 40px) 15px;
	}
	#cd_left .card_inner,
	#cd_right .card_inner {
		margin: 0;
		left: 0;
		top: 0;
	}
	.card.item2,
	.card.item5 {
		top: calc(50% - 85px);
	}

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

		#header2 {
			margin-bottom: -150px;
		}

		#header2_box {
			display: block;
		}
		#cd_left,
		#cd_right {
			margin: clamp(20px, 5.3333vw, 40px) 0;
			grid-column-gap: calc((100vw - 240px) / 4);
		}
		#cd_left {
			margin-top: 140px;
		}
		#cd_left::before {
			left: calc(50% - 200px);
		}
		.card.item2 {
			top: calc(-50% + 85px);
		}
		.card.item5 {
			top: 0;
		}
		.card.item4,
		.card.item6 {
			top: calc(-100% - 85px - clamp(20px, 5.3333vw, 40px));
		}

	}

	@media screen and (max-width: 430px) {
		
		#cd_left::before {
			left: 5px;
		}

	}


	/* ==================== メニュー（トップページ用） ==================== */

	/* レイアウト */
	#top_menu ul {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-column-gap: 0px;
		grid-row-gap: 50px;
	}
	#top_menu [class^="menu"] {
		-webkit-box-ordinal-group: 1;
		    -ms-flex-order: 0;
		        order: 0;
	}
	#top_menu .menu1 { grid-area: 1 / 1 / 2 / 3; }
	#top_menu .menu2 { grid-area: 2 / 1 / 3 / 2; }
	#top_menu .menu3 { grid-area: 2 / 2 / 3 / 3; }
	#top_menu .menu4 { grid-area: 3 / 1 / 4 / 2; }
	#top_menu .menu5 { grid-area: 3 / 2 / 4 / 3; }

	/* サイズ */
	#top_menu .menu1 a {
		width: 190px;
		padding: 40px 0 0;
	}
	#top_menu .menu2 a,
	#top_menu .menu3 a {
		width: 160px;
	}
	#top_menu .menu4 a,
	#top_menu .menu5 a {
		width: 112px;
		margin-top: 10px;
	}
	#top_menu .menu1 a img { width: 113px; height: auto; }
	#top_menu .menu2 a img { width: 108px; height: auto; }
	#top_menu .menu3 a img { width: 103px; height: auto; }
	#top_menu .menu4 a img { width:  76px; height: auto; }
	#top_menu .menu5 a img { width:  71px; height: auto; }

	/* キャラクター */
	#top_menu .menu1 a::before {
		width: 85px;
		height: 104px;
		top: -46px;
	}
	#top_menu .menu2 a::before {
		width: 53px;
		height: 91px;
		top: -62px;
	}
	#top_menu .menu3 a::before {
		width: 65px;
		height: 68px;
		top: -28px;
	}
	#top_menu .menu4 a::before {
		width: 54px;
		height: 64px;
		top: -35px;
	}
	#top_menu .menu5 a::before {
		width: 54px;
		height: 60px;
		top: -30px;
	}
	/* キャラクターふきだし */
	#top_menu .menu1::after {
		width: 93px;
		height: 66px;
		top: -60px;
		left: calc(50% + 38px);
	}
	#top_menu .menu2::after {
		width: 86px;
		height: 47px;
		top: -76px;
		left: calc(50% - 96px);
	}
	#top_menu .menu3::after {
		width: 62px;
		height: 59px;
		top: -66px;
		left: calc(50% - 15px);
	}
	#top_menu .menu4::after {
		width: 102px;
		height: 35px;
		top: -42px;
		left: calc(50% - 74px);
	}
	#top_menu .menu5::after {
		width: 64px;
		height: 32px;
		top: -33px;
		left: calc(50% - 62px);
	}

	/* ==================== 市川市のことを知ろう ==================== */

	#top_main_about h2 {
		padding-left: 30px;
		padding-right: 30px;
	}
	#top_main_about h2::before {
		top: -78px;
		left: calc(50% - 53px);
	}
	#top_main_about .item {
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: start;
		border-radius: 45px;
		grid-template-columns: 90px 1fr;
		grid-template-rows: auto auto;
		padding: 20px;
	}
	#top_main_about .item::before {
		width: 90px;
		height: 90px;
	}
	#top_main_about .ttl {
		font-size: 2.2rem;
	}



	/* ==================== イベント情報（サブサイト新着情報） ==================== */

	#top_main_news {
		padding-bottom: 200px;
	}
	.section_information {
		padding: 60px 20px;
		border-radius: 45px;
	}
	.section_information h2 {
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		min-width: 295px;
		padding: calc(18px + 1rem) 30px 10px;
	}
	.section_information h2 > span::before {
		top: -70px;
		left: 10px;
	}
	.section_information h2 > span::after {
		top: -67px;
		right: 10px;
	}
	.section_information p.no_data {
		padding: 20px 0;
	}
	.section_information_list ul {
		margin: 0;
	}
	.section_information_list ul li {
		display: block;
		width: auto;
	}
	.section_information_list ul li > span {
		display: block;
	}
	.section_information_list ul li > span.article_date {
		width: auto;
		padding: .75em 0 0;
	}
	.section_information_list ul li > span.article_title a {
		padding: 0 0 1em;
	}

	/* 一覧 / RSS */
	.link_box {
		padding: 30px 0 0;
		gap: 20px;
	}
	.link_box a {
		width: 100%;
		max-width: 500px;
		min-width: calc(50% - 5px);
		margin: 0 auto;
		font-size: var(--fontsize-detail-small);
	}


	/* ==================== いちかわマップ ==================== */

	/* レイアウト */
	#top_main_map .box {
		padding: 5px 20px 20px;
	}
	#tab_ttl {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-column-gap: 20px;
		grid-row-gap: 15px;
		margin: 0 0 20px;
		padding: 0;
	}
	#tab_ttl::before         { grid-area: 1 / 1 / 2 / 3; }
	#tab_ttl li:nth-child(1) { grid-area: 2 / 1 / 3 / 2; }
	#tab_ttl li:nth-child(2) { grid-area: 2 / 2 / 3 / 3; }
	#tab_ttl li:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
	#tab_ttl li:nth-child(4) { grid-area: 3 / 2 / 4 / 3; }

	/* 中央イラスト */
	#top_main_map .box::before {
		width: 266px;
		height: 266px;
		top: -40px;
		left: calc(50% - 133px);
		background-position: center top 40px;
	}
	#top_main_map .box h2 {
		top: -44px;
	}
	#top_main_map .box h2 img {
		width: 186px;
		height: auto;
	}
	#tab_ttl::before {
		width: 168px;
		height: 168px;
		margin: 0 auto;
	}

	/* ボタン */
	#tab_ttl button {
		width: 100%;
		max-width: 180px;
		border-width: 8px;
		padding: 35px 0 0;
	}

	/* ボタンのキャラクター */
	#tab_ttl .item1::before {
		width: 77px;
		height: 71px;
	}
	#tab_ttl .item2::before {
		width: 63px;
		height: 56px;
	}
	#tab_ttl .item3::before {
		width: 52px;
		height: 55px;
	}
	#tab_ttl .item4::before {
		width: 62px;
		height: 58px;
	}


	/* ==================== おすすめサイト ==================== */

	#top_main_link .box {
		gap: 10px;
	}
	#top_main_link .box a.link {
		width: calc(50% - 5px);
	}
	#top_main_link .box a.link .txt {
		font-size: 1.4rem;
		padding-left: 0;
		padding-right: 0;
	}
	#top_main_link .box a.link .txt rt {
		font-size: 1rem;
		letter-spacing: -.01em;
	}



	/* ==================== 背景色変更 ==================== */

	/* 共通 */
	.color_change #cd_left::before {
		-webkit-filter: brightness(100) grayscale(1);
		        filter: brightness(100) grayscale(1);
	}
	.color_change .section_information h2 {
		padding: calc(18px + 1rem) 30px 10px;
	}

}
/* ==================================================
スマートフォン ここまで
================================================== */