@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');


/* pagetitle
--------------------- */
#pagetitle .pht_bg {
	background: url("../img/answer/pagetitle.jpg") no-repeat center / cover;
}
#pagetitle:before{
	background: #F2F2F2;
}





	
	
/* realize
--------------------- */
#realize {
	width: 100%;
	background: #F2F2F2;
	padding-top: 150px;
	padding-bottom: 150px;
	margin-bottom: 150px;
}
	#realize .link {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 32%;
		height: 200px;
		margin-right: 2%;
		margin-bottom: 40px;
		background: #fff url("../img/answer/icon_plus.svg") no-repeat right 10px bottom 10px;
		font-family: 'Noto Serif JP', serif;
		font-size: 2.0rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: 1.4em;
		text-align: center;
		counter-increment: section;
		position: relative;
	}
	#realize .link:nth-child(3n) {
		margin-right: 0;
	}
	#realize .link:hover {
		opacity: 0.6;
	}
	#realize .link:before {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 10px 0 10px;
		border-color: #ffffff transparent transparent transparent;
		position: absolute;
		bottom: -10px;
		left: 50%;
		margin-left: -10px;
	}
	#realize .link:after {
		content: counter(section, decimal-leading-zero);
		font-size: 15.0rem;
		font-family: 'Rajdhani', sans-serif;
		font-weight: 500;
		color: #F4F4F4;
		text-align: center;
		line-height: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		z-index: 0;
	}
		#realize .link p {
			position: relative;
			z-index: 2;
		}


.hide-area{
	display: none;
}
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}
.modaal-video .modaal-inner-wrapper{
	padding:0;
}

	.modaal-content-container {
		padding: 50px !important;
		position: relative;
		overflow: hidden;
	}
		.modaal-content-container .number {
			font-size: 15.0rem;
			font-family: 'Rajdhani', sans-serif;
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0;
			color: #F4F4F4;
			position: absolute;
			top: -20px;
			left: -10px;
			z-index: 0;
		}

		.modaal-content-container h2 {
			font-family: 'Noto Serif JP', serif;
			font-size: 2.2rem;
			font-weight: 500;
			line-height: 1.4em;
			margin-bottom: 5px;
			z-index: 2;
			position: relative;
		}

		.modaal-content-container .join {
			font-size: 1.3rem;
			font-weight: 500;
			line-height: 1;
			margin-bottom: 25px;
			z-index: 2;
			position: relative;
		}

		.modaal-content-container .txt {
			font-size: 1.5rem;
			font-weight: 500;
			line-height: 2em;
			z-index: 2;
			position: relative;
		}
			.modaal-content-container .txt span {
				font-size: 1.2rem;
			}

		.modaal-content-container a.link-txt {
			display: block;
			background: url("../img/answer/icon_link_arrow.svg") no-repeat left center;
			padding-left: 12px;
			font-size: 1.5rem;
			font-weight: 500;
			color: #C3002F;
			text-decoration: underline;
		}
		.modaal-content-container a.link-txt:hover {
			opacity: 0.7;
			text-decoration: none;
		}

		.modaal-content-container .text {
			width: -webkit-calc(100% - 250px);
			width: calc(100% - 250px);
			padding-right: 30px;
		}

		.modaal-content-container .pht {
			width: 250px;
			height: auto;
		}

		.modaal-close {
			right: 25px !important;
			top: 25px !important;
		}



/* 1400px */
@media screen and (max-width: 1400px) {
	


}












/* 1024px */
@media screen and (max-width: 1024px) {





	
	
/* realize
--------------------- */
#realize {
	padding-top: 70px;
	padding-bottom: 70px;
	margin-bottom: 70px; 
}
	#realize .link {
		width: 48%;
		margin-right: 4%;
	}
	#realize .link:nth-child(2n) {
		margin-right: 0;
	}
	#realize .link:nth-child(3),
	#realize .link:nth-child(9),
	#realize .link:nth-child(15),
	#realize .link:nth-child(21),
	#realize .link:nth-child(27),
	#realize .link:nth-child(33),
	#realize .link:nth-child(39),
	#realize .link:nth-child(45) {
		margin-right: 4%;
	}

	
	.modaal-content-container {
		padding: 30px !important;
	}
		.modaal-content-container h2 {
			font-family: 'Noto Serif JP', serif;
			font-size: 2.0rem;
		}

		.modaal-content-container .join {
			font-size: 1.2rem;
			margin-bottom: 20px;
		}

		.modaal-content-container .txt {
			font-size: 1.4rem;
			line-height: 1.8em;
		}
			.modaal-content-container .txt span {
				font-size: 1.0rem;
			}

		.modaal-content-container a.link-txt {
			font-size: 1.4rem;
		}

		.modaal-content-container .text {
			width: -webkit-calc(100% - 250px);
			width: calc(100% - 250px);
			padding-right: 30px;
		}

		.modaal-content-container .pht {
			width: 250px;
			height: auto;
		}

		.modaal-close {
			right: 20px !important;
			top: 20px !important;
		}



}

	







/* max 768px */
@media screen and (max-width: 768px) {





	
	
/* realize
--------------------- */
#realize .inner {
	display: block;
}
	#realize .link {
		width: 100%;
		height: 150px;
		margin-right: 0 !important;
		margin-bottom: 30px;
	}

	
	.modaal-content-container {
		padding: 20px !important;
	}
		.modaal-content-container h2 {
			font-size: 1.8rem;
		}
		.modaal-content-container .join {
			margin-bottom: 12px;
		}

		.modaal-content-container .flex-start {
			display: block;
		}
		.modaal-content-container .text {
			width: 100%;
			padding-right: 0;
			padding-bottom: 20px;
		}

		.modaal-content-container .pht {
			width: 100%;
			height: auto;
		}

		.modaal-close {
			right: 20px !important;
			top: 20px !important;
		}



}