@charset "utf-8";
.loading_base {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 5000;
		background: #fff;
}
header {
		z-index: 40;
}
header::before {
		content: '';
		display: block;
		position: absolute;
		top: -720px;
		left: calc(50vw - 1100px);
		width: 2200px;
		height: 1000px;
		background: #004ea2;
		border-radius: 0 0 50% 50%;
		transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), height 0.5s cubic-bezier(0.16, 1, 0.3, 1), top 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
header.isActive {
		z-index: 51
}
header.isActive::before {
		border-radius: 0 0 20px 20px;
		width: 100%;
		top: -40px;
		left: 0;
		height: 106px;
}
.header_trigger div {
		background: #fff;
}
.header_inner {
		max-width: 1500px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		z-index: 5
}
.header_inner nav ul li a {
		color: #fff;
}
.header_inner nav ul li a::after {
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
}
.header_inner nav ul li a span::after {
		background: #fff;
}
/* isActive .header_logo img {
		filter: invert(0) brightness(1);
}
.isActive .header_inner nav ul li a {
		color: #004ea2;
}
.isActive .header_inner nav ul li a::after {
		border-right: 1px solid #004ea2;
		border-bottom: 1px solid #004ea2;
}
.isActive .header_inner nav ul li a span::after {
		background: #004ea2;
} */
@media(max-width: 767px) {
		header::before {
				width: 100%;
				height: 61vw;
				background-color: inherit;
				background-repeat: no-repeat;
				background-position: 0 0;
				background-size: 100%;
				background-image: url("https://www.kai-group.com/contents_file/fun/event/iiha2024/images/second_hdr_sp.png");
				border-radius: 0;
				top: -20px;
				left: 0;
		}
		header.isActive::before {
				border-radius: 0 0 12px 12px;
				height: 106px;
		}
}
/* =========== */
.wrap {
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 60px;
		min-height: 1500px;
		padding-top: 170px;
}
@media(max-width: 767px) {
		.wrap {
				padding: 0 20px;
		}
}
.products_separate {
		height: 170px
}
.products_hdr {
		position: absolute;
		top: 150px;
		left: 0;
		width: 100%;
		z-index: 100;
}
.products_hdr.isFixed {
		position: fixed;
		top: 66px;
		left: 0;
		width: 100%;
		z-index: 100;
}
.products_hdr_inner {
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 120px;
		display: flex;
}
@media(max-width: 840px) {
		.products_hdr_inner {
				padding-left: 110px;
		}
}
.products_hdr_inner h1 {
		font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		color: #fff;
		font-size: 42px;
		font-weight: 400;
		letter-spacing: 0.03em;
		transition: all 0.2s;
}
.products_hdr_inner h1 span {
		font-family: 'Roboto', sans-serif;
		font-size: 110%;
		margin-right: 0.3em
}
.products_hdr_inner h1.en {
		font-family: 'Roboto', sans-serif;
}
.isFixed .products_hdr_inner h1 {
		font-size: 26px;
		position: relative;
		top: -31px;
}
@media(max-width: 1200px) {
		.isFixed .products_hdr_inner h1 {
				font-size: 20px;
				top: -28px
		}
}
@media(max-width: 1024px) {
		.isFixed .products_hdr_inner h1 {
				font-size: 16px;
				top: -25px;
				left: 0px;
		}
}
.isActive .products_hdr_inner h1 {
		color: #004ea2;
}
@media(min-width: 768px) {
		.products_hdr_inner h1 br {
				display: none
		}
}
@media(max-width: 767px) {
		.products_hdr_inner {
				padding: 0 30px;
		}
		.products_hdr {
				top: 80px;
		}
		.products_hdr.isFixed {
				position: fixed;
				top: 66px;
				left: 0;
				width: 100%;
				z-index: 100;
		}
		.products_hdr_inner h1 {
				font-size: 26px;
		}
		.isFixed .products_hdr_inner h1 {
				font-size: 16px;
				top: -11px;
				left: -10px;
		}
		.isFixed .products_hdr_inner h1 br {
				display: none
		}
		.products_separate {
				height: 190px;
		}
}
@media(max-width: 410px) {
		.products_hdr_inner h1 {
				font-size: 22px;
		}
		.isFixed .products_hdr_inner h1 {
				font-size: 14px;
		}
}
.products_main {
		padding-top: 80px;
		position: relative;
		z-index: 50;
		margin-bottom: 70px;
}
.products_main img {
		width: 100%;
		height: auto;
		border-radius: 36px;
}
.products_story {
		max-width: 820px;
		margin: 0 auto 110px;
		position: relative;
		z-index: 5
}
.products_story_hd {
		font-size: 24px;
		font-weight: 400;
		font-family: 'Roboto', sans-serif;
		margin: 0 0 30px;
		line-height: 1;
}
.products_story_catch {
		font-size: 34px;
		font-weight: 500;
		line-height: 1.6;
		margin: 0 0 30px
}
.products_story p {
		line-height: 2.0;
}
@media(max-width: 767px) {
		.products_story {
				margin: 0 auto 50px;
		}
		.products_main {
				padding-top: 80px;
				margin-bottom: 40px;
		}
		.products_main img {
				border-radius: 16px;
		}
		.products_story_hd {
				font-size: 22px;
				margin: 0 0 20px
		}
		.products_story_catch {
				font-size: 22px;
				margin: 0 0 20px
		}
		.products_story p {
				line-height: 1.8;
		}
}
@media(max-width: 410px) {
		.products_story_catch {
				font-size: 20px;
		}
}
/* ============== */
section.overview {
		padding-bottom: 100px;
		position: relative;
		z-index: 5;
}
@media(max-width: 840px) {
		section.overview {
				padding-bottom: 100;
		}
}
.products_overview {
		max-width: 830px;
		margin: 0 auto;
		border-top: 1px solid #84a5d0;
		padding-top: 15px;
		padding-bottom: 90px;
		position: relative;
		z-index: 5
}
.overview_hd {
		font-family: 'Roboto', sans-serif;
		font-size: 24px;
		font-weight: 400;
		line-height: 1.6;
		margin: 0 0 50px
}
dl.overview {
		display: flex;
		margin: 0 0 35px;
		line-height: 2.0;
}
dl.overview:last-child {
		margin-bottom: 0;
}
.overview dt {
		font-weight: 500;
		width: 8em;
		margin-right: 15px;
}
.overview dd {
		flex: 1;
}
.products_overview p {
		line-height: 1.8;
		font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.material {
		display: flex;
		margin: 0;
		line-height: 1.8;
		font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.material dt {
		white-space: nowrap;
}
.material dd {
		flex: 1
}
@media(max-width: 767px) {
		.products_overview {
				padding-top: 15px;
				padding-bottom: 60px;
		}
		.overview_hd {
				font-size: 24px;
				margin: 0 0 25px
		}
		dl.overview {
				display: block;
				margin: 0 0 40px;
				line-height: 1.8;
		}
		dl.overview dt {
				width: auto;
				margin: 0 0 10px
		}
}
/* ============== */
.products_all {
		background: linear-gradient(180deg, rgba(220, 221, 221, 1) 10%, rgba(20, 84, 167, 1) 60%, rgba(9, 77, 164, 1) 100%);
}
.products_all_hd {
		max-width: 365px;
		margin: 0 auto 15px
}
.products_all_hd_jp {
		max-width: 365px;
		margin: 0 auto 75px;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
}
.products_all_hd img {
		width: 100%;
		height: auto;
}
.products_grid {
		max-width: 1020px;
		margin: 0 auto;
		padding: 0 60px;
		padding-bottom: 100px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 45px 45px;
}
.products_tile {
		min-height: 260px;
		box-sizing: border-box;
		position: relative;
		border-radius: 16px;
		overflow: hidden;
		background: #fff;
}
.products_tile a {
		position: relative;
		display: block;
		text-decoration: none;
		color: #020202;
}
.products_thumbnail {
		position: relative;
		overflow: hidden;
		border-radius: 16px 16px 0 0;
		margin-bottom: 0;
}
.products_thumbnail img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.products_caption {
		padding: 10px 25px;
		color: #094da4;
}
.products_caption .products_caption_no {
		font-family: "Roboto", sans-serif;
		font-weight: 400;
		margin: 0 0 3px
}
.products_caption p {
		font-family: "Roboto", YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		font-weight: 400;
		letter-spacing: 0.03em;
		line-height: 1.5;
}
@media(max-width: 1024px) {
		.products_grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 30px 30px;
		}
}
@media(max-width: 840px) {
		.products_grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20px 20px;
		}
		.products_tile {
				min-height: 230px;
		}
}
@media(max-width: 767px) {
		.products_all_hd {
				max-width: 200px;
				margin: 0 auto 10px
		}
		.products_all_hd_jp {
				max-width: 200px;
				margin: 0 auto 35px;
				font-size: 18px;
		}
		.products_grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 17px;
				padding: 0 20px;
		}
		.products_tile {
				min-height: 150px;
		}
		.products_caption {
				padding: 15px;
		}
		.products_caption p {
				font-size: 14px;
		}
		.products_tile {
				border-radius: 10px;
		}
		.products_thumbnail {
				border-radius: 10px 10px 0 0;
		}
}
@media(max-width: 410px) {
		.products_caption p {
				font-size: 13px;
		}
}
.products_pagenation {
		padding: 10px 0 50px;
}
.products_pagenation ul {
		display: flex;
		justify-content: space-between;
}
.products_pagenation li {
		font-size: 24px;
		font-family: 'Roboto', sans-serif;
}
.products_pagenation li a {
		color: #fff;
		text-decoration: none;
		display: flex;
		align-items: center;
		border: 1px solid #fff;
		width: 320px;
		height: 120px;
		box-sizing: border-box;
}
.products_pagenation li span {
		position: relative;
		display: inline-block;
}
.products_pagenation li span::before {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 7.5px);
		width: 65px;
		height: 15px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 65px;
		pointer-events: none;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.products_pagenation li.prev span {
		padding-left: 85px;
}
.products_pagenation li.next span {
		padding-right: 85px;
}
.products_pagenation li.prev span::before {
		background-image: url("https://www.kai-group.com/contents_file/fun/event/iiha2024/images/products_prev_pc.png");
		left: 0;
}
.products_pagenation li.next span::before {
		background-image: url("https://www.kai-group.com/contents_file/fun/event/iiha2024/images/products_next_pc.png");
		right: 0;
}
@media (hover: hover) {
		.products_pagenation li.prev a:hover span::before {
				transform: translateX(-20px)
		}
		.products_pagenation li.next a:hover span::before {
				transform: translateX(20px)
		}
}
.products_pagenation li.prev a {
		padding-right: 90px;
		justify-content: flex-end;
}
.products_pagenation li.next a {
		padding-left: 90px;
}
.products_pagenation li.prev a {
		border-radius: 0 60px 60px 0;
}
.products_pagenation li.next a {
		border-radius: 60px 0 0 60px;
}
.products_pagenation li.prev a {
		border-left: none;
}
.products_pagenation li.next a {
		border-right: none;
}
@media(max-width: 1200px) {
		.products_pagenation li {
				font-size: 20px;
		}
		.products_pagenation li a {
				width: 260px;
				height: 96px;
		}
		.products_pagenation li span::before {
				top: calc(50% - 6px);
				width: 52px;
				height: 12px;
				background-size: 52px;
		}
		.products_pagenation li.prev span {
				padding-left: 65px;
		}
		.products_pagenation li.next span {
				padding-right: 65px;
		}
		.products_pagenation li.prev a {
				padding-right: 70px;
		}
		.products_pagenation li.next a {
				padding-left: 70px;
		}
}
@media(max-width: 767px) {
		.products_pagenation {
				padding-top: 45px;
				padding-bottom: 20px;
		}
		.products_pagenation li {
				font-size: 16px;
		}
		.products_pagenation li a {
				width: 150px;
				height: 60px;
		}
		.products_pagenation li span::before {
				top: calc(50% - 7px);
				width: 44px;
				height: 15px;
				background-size: 44px;
		}
		.products_pagenation li.prev span {
				padding-left: 55px;
		}
		.products_pagenation li.next span {
				padding-right: 55px;
		}
		.products_pagenation li.prev a {
				padding-right: 40px;
		}
		.products_pagenation li.next a {
				padding-left: 40px;
		}
		.products_pagenation li.prev span::before {
				background-image: url("https://www.kai-group.com/contents_file/fun/event/iiha2024/images/products_prev_sp.png");
				left: 0;
		}
		.products_pagenation li.next span::before {
				background-image: url("https://www.kai-group.com/contents_file/fun/event/iiha2024/images/products_next_sp.png");
				right: 0;
		}
}