@charset "utf-8";
/*
 * top.css
 * Last modify 2020/01/14 17:21
 */

/* -----------------------------------------------------
Base Style
----------------------------------------------------- */
#main{
}

#content-wrapper:after {
	clear: both;
	content:"";
	display: block;
}


/*** MOBILE DEVICES ***/
@media screen and (min-width: 481px) {

}

/*** MOBILE DEVICES ***/
@media screen and (max-width: 750px) {


}

/*** LARGER DEVICES ***/
@media screen and (min-width: 751px) {

}

/* !mainimg
---------------------------------------------------------- */
#mainimg {
	height: 400px;
}
	#mainimg img {
		width: auto !important;
	}

/*** MOBILE DEVICES ***/
@media screen and (min-width: 481px) {

}

/*** MOBILE DEVICES ***/
@media screen and (max-width: 750px) {
#mainimg {
	height: auto;
	aspect-ratio: 360 / 328.58;
}

}

/*** LARGER DEVICES ***/
@media screen and (min-width: 751px) {

}


/* !postList01
---------------------------------------------------------- */
.postList01 {
	margin: 0;
}
	.postList01 li {
		list-style: none;
		margin: 20px 0 0;
		padding: 20px;
		box-shadow:  0 0 5px 3px rgba(0, 0, 0, 0.12);
		border-radius: 20px;
	}
	.postList01 time {
		color: #333333;
		font-size: 1.6rem;
		font-weight: bold;
	}
	.postList01 .cat01,
	.postList01 .cat02,
	.postList01 .cat03,
	.postList01 .cat04,
	.postList01 .cat05,
	.postList01 .subcat01,
	.postList01 .subcat02,
	.postList01 .subcat03,
	.postList01 .subcat04,
	.postList01 .subcat05 {
		display: inline-block;
		min-width: 10rem;
		margin: 0 0 0 12px;
		padding: 5px 0 4px;
		color: #ffffff;
		font-size: 1.4rem;
		line-height: 1;
		text-decoration: none;
		text-align: center;
	}
	.postList01 .cat01:hover,
	.postList01 .cat02:hover,
	.postList01 .cat03:hover,
	.postList01 .cat04:hover,
	.postList01 .cat05:hover {
		opacity: 0.6;
		text-decoration: none;
	}
	.postList01 .cat01 {
		background: #0070bc;
	}
	.postList01 .cat02 {
		background: #009fe8;
	}
	.postList01 .cat03 {
		background: #99cc33;
	}
	.postList01 .cat04 {
		background: #ff7f00;
	}
	.postList01 .cat05 {
		background: #ff320a;
	}
	.postList01 .subcat01,
	.postList01 .subcat02,
	.postList01 .subcat03,
	.postList01 .subcat04,
	.postList01 .subcat05 {
		border: 1px solid #a0a0a0;
		color: #a0a0a0;
	}
	.postList01 .subcat01:hover,
	.postList01 .subcat02:hover,
	.postList01 .subcat03:hover,
	.postList01 .subcat04:hover,
	.postList01 .subcat05:hover {
		background: #eeeeee;
		text-decoration: none;
	}
	.postList01 .postTitle01 {
		display: block;
		margin: 10px 0;
		color: #333333;
		font-size: 1.4rem;
		text-decoration: none;
	}
	.postList01 a:hover {

	}



/*** MOBILE DEVICES ***/
@media screen and (min-width: 481px) {

}

/*** MOBILE DEVICES ***/
@media screen and (max-width: 750px) {
	.postList01 time {
		display: block;
	}
	.postList01 li time + a {
		margin-left: 0 !important;
	}
}

/*** LARGER DEVICES ***/
@media screen and (min-width: 751px) {
	.postList01 {
		padding: 0 0 20px;
	}
	.postList01 .cat01,
	.postList01 .cat02,
	.postList01 .cat03,
	.postList01 .cat04,
	.postList01 .cat05,
	.postList01 .subcat01,
	.postList01 .subcat02,
	.postList01 .subcat03,
	.postList01 .subcat04,
	.postList01 .subcat05 {
		min-width: 10rem;
		margin: 0 0 0 25px;
		padding: 7px 0 6px;
	}
	.postTitle01 {
		position: relative;
		display: inline-block !important;
	}
	.postTitle01::before {
		position: absolute;
		display: inline;
		content: "";
		width: 0;
		height: 1px;
		bottom: 0;
		left: 0;
		background-color: #333333;
		transition: all 0.5s 0s ease;
	}
	.postTitle01:hover::before {
		width: 100%;
	}
}

/* !news & events
---------------------------------------------------------- */
#news {
	opacity: 0;
	top: -50px;
	padding: 0 20px 0;
	-webkit-animation: lishow01 1s ease 0.3s forwards;
	animation: lishow01 1s ease 0.3s forwards;
}
	#news h2 {
		border-bottom: 3px solid #0070bc;
		font-size: inherit;
		line-height: 1;
	}
	#news .linkList01,
	#news .linkList01SP {
		list-style: none;
	}

	#news .postList01 li:nth-of-type(1) {
		-webkit-animation: lishow01 1s ease 0.3s forwards;
		animation: lishow01 1s ease 0.3s forwards;
	}
	#news .postList01 li:nth-of-type(2) {
		-webkit-animation: lishow01 1s ease 0.6s forwards;
		animation: lishow01 1s ease 0.6s forwards;
	}
	#news .postList01 li:nth-of-type(3) {
		-webkit-animation: lishow01 1s ease 0.9s forwards;
		animation: lishow01 1s ease 0.9s forwards;
	}
	#news .postList01 li:nth-of-type(4) {
		-webkit-animation: lishow01 1s ease 1.2s forwards;
		animation: lishow01 1s ease 1.2s forwards;
	}
	#news .postList01 li:nth-of-type(5) {
		-webkit-animation: lishow01 1s ease 1.5s forwards;
		animation: lishow01 1s ease 1.5s forwards;
	}

@keyframes lishow01 {
	0% {
		opacity: 0;
		top: -50px;
	}
	100% {
		opacity: 1;
		top: 0;
	}
}

/*** MOBILE DEVICES ***/
@media screen and (min-width: 481px) {

}

/*** MOBILE DEVICES ***/
@media screen and (max-width: 750px) {
	#news h2 {
		margin: 0 0 10px;
		padding: 0 0 10px;
	}
	#news .linkList01 {
		display: none;
	}
	#news .linkList01SP {
		margin: 20px 0 0;
	}
		#news .linkList01SP li {
			margin: 0;
			text-align: center;
		}
		#news .linkList01SP li img {
			display: inline;
			width: 50.74%;
		}

}

/*** LARGER DEVICES ***/
@media screen and (min-width: 751px) {
#news {
	position: relative;
	width: 800px;
	margin: 40px auto 0;
	padding: 0;
}
	#news h2 {
		margin: 0 0 5px;
		padding: 0 0 16px;
		border-bottom: 2px solid #0070bc;
	}
	#news .linkList01 {
		margin: 3px 0 0;
	}
	#news .linkList01SP {
		display: none;
	}
	#news .linkList01 {
		position: absolute;
		top: 0;
		right: 0;
	}
	#news .linkList01:after {
		clear: both;
		content:"";
		display: block;
	}
		#news .linkList01 li {
			padding: 0 0 0 15px;
			display: inline-block;
			background: url("/wp-content/themes/hir_2026/common/img/ico_link01.png") no-repeat left center;
			font-size: 1.4rem;
		}
		#news .linkList01 li a {
			position: relative;
			color: #333333;
			text-decoration: none;
			font-weight: bold;
			transition: all 0.5s 0s ease;
		}
		#news .linkList01 li a:hover {
			opacity: 0.5;
		}
}


/* !tileList01
---------------------------------------------------------- */
#tileList01 {
	padding: 0 20px 0;
}
	#tileList01  h2 {
		padding: 0 0 10px;
		border-bottom: 2px solid #009FE8;
		line-height: 1.4;
	}
	#tileList01 #factbook h2 {
		border-bottom: 2px solid #009FE8;
	}
	#tileList01 h2 span {
		display: inline-block;
		padding-left: 14px;
	}
	#tileList01 #factbook h2 span {
		background: url("/wp-content/themes/hir_2026/common/img/ico_link01.png") no-repeat left center;
	}
	
	#tileList01 #enquete h2 {
		border-bottom: 2px solid #93C235;
	}
	#tileList01 #enquete h2 span {
		background: url("/wp-content/themes/hir_2026/common/img/ico_link02.png") no-repeat left center;
	}
		#tileList01 h2 span {
			color: #474747;
			text-decoration: none;
		}
	#tileList01 p {
		padding: 66.66vw 20px 20px;
		box-shadow:  0 0 5px 3px rgba(0, 0, 0, 0.12);
		border-radius: 20px;
		cursor: pointer;
		transition: all 0.5s 0s ease;
	}
	#tileList01 h2 {
		color: #474747;
		text-decoration: none;
	}
	#tileList01 #factbook p.tile01 {
		background: url("/wp-content/themes/hir_2026/img/img_factbook01.svg") no-repeat center top 20px;
		background-size: 73.33%;
	}
	#tileList01 #enquete p.tile01 {
		background: url("/wp-content/themes/hir_2026/img/img_enquete01.svg") no-repeat center top 20px;
		background-size: 73.33%;
	}


/*** MOBILE DEVICES ***/
@media screen and (min-width: 481px) {

}

/*** MOBILE DEVICES ***/
@media screen and (max-width: 750px) {
#tileList01 {
	margin-top: 8rem;
}
	#tileList01 section {
		margin: 0 0 4rem;
		padding: 0 0;
	}
	#tileList01 p {
		font-size: 1.4rem;
	}
	#tileList01 h2 {
		font-size: 1.8rem;
	}

}

/*** LARGER DEVICES ***/
@media screen and (min-width: 751px) {
#tileList01 {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2列に均等分割。列数を増やすなら数字を変更 */
	gap: 40px; /* 左右の間隔 */
	align-items: stretch;
	width: 800px;
	margin: 60px auto 0;
	padding: 0 0 10px;
}

#tileList01 section {
	display: contents; /* sectionの箱をなくし、中身をgridの子として扱う */
}

#tileList01 h2 {
	grid-row: 1; /* 全sectionのh2を同じ行に配置 → 高さが揃う */
	margin: 0;
	display: flex;
	align-items: center; /* 行内で文字を縦中央に */
	font-size: 2rem;
}

#tileList01 h2 span {
	display: block;
	transition: all 0.5s 0s ease;
}
#tileList01 h2 span:hover {
	cursor: pointer;
	opacity: 0.5;
}
#tileList01 p {
	padding-top: 316px;
	font-size: 1.4rem;

}
#tileList01 p.tile01 {
	grid-row: 2; /* 全sectionのpを同じ行に配置 → 高さが揃う */
	margin: 0;
}
#tileList01 #factbook p.tile01 {
	background-position: center top 30px;
	background-size: 320px;
}
#tileList01 #enquete p.tile01 {
	background-position: center top 30px;
	background-size: 320px;
}
#tileList01 p.tile01:hover {
	background-color: #F4F4F4 !important;
}

}


/* !detailWrap
---------------------------------------------------------- */
#detailBgWrap {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(6, 11, 65, 0.7);
	transition: all 0.5s ease;
	z-index: 150;
	opacity: 0;

}
#detailBgWrap.active {
	display: flex !important;
	justify-content: center;
	align-items: center;
	opacity: 1;
}
#detailBgWrap.inactive {
}

#detailWrap {
	display: none;
	position: relative;
	background: #fff;
	border-radius: 20px;
	margin: 0 20px;
}

.closeBtn {
	position: absolute;
	top: 16px;
	right: 16px;
	transition: all 0.5s ease;
}
.closeBtn:hover {
	opacity: 0.6;
	cursor: pointer;
}
.tileModal {
	display: none;
	padding: 30px 20px 30px;
}
.tileModal.active {
	display: block;
}
	.tileModal h2 {
		padding: 0 0 10px;
		border-bottom: 2px solid #009FE8;
		font-size: 2rem;
		line-height: 1.4;
	}
	#detail01 h2 {
		border-bottom: 2px solid #009FE8;
	}
	#detail02 h2 {
		border-bottom: 2px solid #93C235;
	}
	.tileModal ul {
		display: block;
		margin: 0;
		padding-top: 40vw;
	}
	#detail01 ul {
		background: url("/wp-content/themes/hir_2026/img/img_factbook01.svg") no-repeat center top;
		background-size: 48vw;
	}
	#detail02 ul {
		background: url("/wp-content/themes/hir_2026/img/img_enquete01.svg") no-repeat center top;
		background-size: 48vw;
	}
	.tileModal li {
		list-style: none;
		margin: 12px 0 0;
		padding: 10px;
		box-shadow:  0 0 5px 3px rgba(0, 0, 0, 0.12);
		border-radius: 10px;
		font-size: 1.4rem;
		transition: all 0.5s 0s ease;
	}
	.tileModal li:hover {
		background-color: #F4F4F4 !important;
	}
	.tileModal li.no-link:hover {
		background-color: #fff !important;
	}

	.tileModal a {
		color: #333333;
		text-decoration: none;
	}
	.tileModal time {
		display: block;
		margin-bottom: 2px;
		color: #333333;
		font-weight: bold;
	}
	.tileModal p {
		margin-bottom: 0;
		padding-left: 14px;
	}
	#detail01 p {
		background: url("/wp-content/themes/hir_2026/common/img/ico_link01.png") no-repeat left center;
	}
	#detail02 p {
		background: url("/wp-content/themes/hir_2026/common/img/ico_link02.png") no-repeat left center;
	}

	.tileModal li.no-link p {
		background-image: none !important;
		padding-left: 0;
	}

/*** MOBILE DEVICES ***/
@media screen and (max-width: 750px) {
}

/*** LARGER DEVICES ***/
@media screen and (min-width: 751px) {
.closeBtn{
	top: 22px;
	right: 22px;
}
.tileModal {
	padding: 30px 30px 40px;
}
	.tileModal ul {
		min-height: 200px;
		padding: 0 0 0 270px;
	}
	#detail01 ul {
		background: url("/wp-content/themes/hir_2026/img/img_factbook01.svg") no-repeat left center;
		background-size: 240px;
	}
	#detail02 ul {
		background: url("/wp-content/themes/hir_2026/img/img_enquete01.svg") no-repeat left center;
		background-size: 240px;
	}
	.tileModal li {
		width: 400px;
		margin: 20px 0 0;
		padding: 10px 20px;
	}
	.tileModal p {
		font-size: 1.6rem;
	}
}