/* TITLE
=========================================================================
=========================================================================*/
#title {
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	padding: 138px 0 80px;
	width: 100%;
	color: #FFF;
	text-align: center;
	background: url(../images/industry/market_title_bg.jpg) center top no-repeat;
	background-size: 100% auto;
	background-color: #000510;
}

#title .inner {
	margin: 0 auto;
	width: 900px;
}

#title .inner h1 {
	margin-bottom: 50px;
	width: calc(504 / 900 * 100%);
}

#title .inner p {
	margin-bottom: 1.5em;
	text-align: left;
}

#title .inner figure {
	margin: 50px auto 60px;
	width: calc(870 / 900 * 100%);
}


/* 半導体のキホン
=========================================================================
=========================================================================*/
#basics {
	margin: 0 auto;
	padding: 100px 0;
	width: 960px;
}

#basics h2 {
	margin-bottom: 33px;
	padding-left: 30px;
	font-weight: bold;
	font-size: 2.6rem;
	color: #00446D;
}

#basics h2 span {
	font-size: 1.8rem;
}

#basics ul li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 55px;
	margin-bottom: 13px;
	padding: 30px;
	background-color: #F0F0F0;
}

#basics ul li:last-child {
	margin-bottom: 0;
}

#basics ul li figure {
	width: 290px;
}

#basics ul li .text {
	width: 555px;
}

#basics ul li h3 {
	margin-bottom: 1em;
	font-weight: bold;
	font-size: 2.6rem;
	color: #055585;
}

/* 半導体製造の過程
=========================================================================
=========================================================================*/
#process {
	padding: 100px 0 65px;
	background-color: #91C8EA;
}

#process .inner {
	margin: 0 auto;
	width: 900px;
}

#process h2 {
	margin-bottom: 35px;
	font-weight: bold;
	font-size: 2.6rem;
	color: #FFF;
}

#process h2 span {
	font-size: 1.8rem;
}

#process h3 {
	margin-bottom: 35px;
}

#process p {
	margin-bottom: 50px;
	padding: 30px 25px;
	background-color: #A5D4F7;
}

#process h4 {
	margin-bottom: 18px;
	padding-bottom: 30px;
	font-weight: bold;
	font-size: 2.3rem;
	color: #FFF;
	text-align: center;
	background: url(../images/industry/market_process_arrow.svg) center bottom no-repeat;
	background-size: 37px auto;
}

#process .flow {
	position: relative;
	margin: 0 auto;
	width: calc(743 / 900 * 100%);
}

#process .flow ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 158px;
	position: absolute;
	top: 336px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 616px;
}

#process .flow ul li {
	cursor: pointer;
	width: 229px;
}

/* ----- モーダル ----- */
/* モーダルの初期状態 */
.modal {
	visibility: hidden;
	opacity: 0;
	position: absolute;
}

/* モーダルが選択された状態 */
.modal:target {
	visibility: visible;
	opacity: 1;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 600;
	transition: all 0.4s;
}

/* モーダルコンテンツ内 */
.modal_content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 66px 44px 44px;
	width: 960px;
	max-height: 100%;
	background: #FFF;
}

.modal_content .scroll {
	overflow-y: auto;
	max-height: 100vh;
	padding-bottom: 110px;
}

.modal_content .content_01 {
	position: relative;
	padding: 68px 40px 30px 60px;
	background-color: #F8F479;
}

.modal_content .content_01 h5 {
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 20px;
	min-width: 318px;
	height: 48px;
	font-weight: bold;
	font-size: 1.9rem;
	line-height: 48px;
	color: #FFF;
	background-color: #00446D;
}

.modal_content .content_01 dl {
	display: flex;
	gap: 0 62px;
}

.modal_content .content_01 dl dd {
	width: 231px;
}

.modal_content .content_01 dl dt {
	width: 479px;
}

.modal_content .content_02 {
	position: relative;
	padding: 0 50px 36px;
	color: #FFF;
	background-color: #000510;
}

.modal_content .content_02 h6 {
	margin-bottom: 20px;
	padding: 32px 0 2px 18px;
	font-weight: bold;
	font-size: 2.0rem;
	border-left: 14px solid #860404;
}

.modal_content .content_02 ul {
	position: absolute;
	top: 0;
	right: 50px;
	display: flex;
	gap: 0 16px;
	margin-top: 32px;
	width: 314px;
	text-align: center;
}

.modal_content .content_02 ul li {
	width: 149px;
}

.modal_content .content_02 ul li figcaption {
	margin-top: 10px;
}


.modal_content .content_02 p {
	width: 422px;
	font-size: 1.4rem;
}

.modal_content p.note {
	margin-top: .5em;
	padding-left: 32px;
	font-size: 1.4rem;
}

/* モーダルコンテンツ内の☓ */
.modal_close {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	z-index: 2;
}

/* モーダルコンテンツ外の背景 */
.modal_cancel {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: default;
	background: rgba(0, 0, 0, 0.6);
}

/* 半導体の未来をつくる
=========================================================================
=========================================================================*/
#future {
	padding: 80px 0 40px;
	color: #FFF;
	background: url(../images/industry/market_future_bg.jpg) center bottom no-repeat;
	background-size: 100% auto;
	background-color: #000000;
}

#future .inner {
	margin: 0 auto;
	width: 900px;
}

#future h2 {
	margin-bottom: 40px;
	font-weight: bold;
	font-size: 2.6rem;
}

#future h2 span {
	font-size: 1.8rem;
}

#future p {
	margin-bottom: 65px;
}

#future figure {
	margin: 0 auto;
	width: 231px;
}


/*  スマホ（740px以下）
=========================================================================
=========================================================================*/
@media (max-width:740px) {
	#title {
		padding: 96px 0 80px;
		background: url(../images/industry/market_title_bg@2x.jpg) center top no-repeat;
		background-size: 100% auto;
		background-color: #000510;
	}

	#title .inner {
		padding: 0 25px;
		width: 100%;
	}

	#title .inner h1 {
		margin-bottom: 40px;
		width: 100%;
		max-width: 288px;
	}

	#title .inner figure {
		margin: 40px auto;
		width: 100%;
	}

	#title .inner figure figcaption {
		font-size: 1.6rem;
	}

	/* 半導体のキホン
	=========================================================================
	=========================================================================*/
	#basics {
		margin: 0 auto;
		padding: 60px 25px 70px;
		width: 100%;
	}

	#basics h2 {
		margin-bottom: 37px;
		padding-left: 0;
		font-size: 1.9rem;
	}

	#basics h2 span {
		font-size: 1.3rem;
	}

	#basics ul li {
		margin-bottom: 16px;
		padding: 30px 15px;
	}

	#basics ul li figure {
		margin: 0 auto 15px;
		width: 100%;
		max-width: 243px;
	}

	#basics ul li .text {
		width: 100%;
	}

	#basics ul li h3 {
		margin-bottom: .5em;
		font-size: 1.8rem;
	}

	/* 半導体製造の過程
	=========================================================================
	=========================================================================*/
	#process {
		padding: 70px 0 40px;
	}

	#process .inner {
		padding: 0 25px;
		width: 100%;
	}

	#process h2 {
		margin-bottom: 39px;
		padding-left: 0;
		font-size: 1.9rem;
	}

	#process h2 span {
		font-size: 1.3rem;
	}

	#process h3 {
		margin-bottom: 32px;
		max-width: 288px;
	}

	#process p {
		margin-bottom: 50px;
		padding: 20px 15px;
	}

	#process h4 {
		margin-bottom: 15px;
	}

	#process .flow {
		width: 100%;
	}

	#process .flow ul {
		gap: 0 calc(16 / 276 * 100%);
		top: calc(177 / 898 * 100%);
		left: 0;
		right: 0;
		margin: 0 auto;
		width: calc(276 / 288 * 100%);
	}

	#process .flow ul li {
		cursor: pointer;
		width: calc(130 / 276 * 100%);
	}

	/* ----- モーダル ----- */
	/* モーダルコンテンツ内 */
	.modal_content {
		padding: 22px 25px 0;
		width: 100%;
	}

	.modal_content .scroll {
		padding-bottom: 110px;
	}

	.modal_content .content_01 {
		padding: 48px 15px 30px;
	}

	.modal_content .content_01 h5 {
		padding-left: 15px;
		min-width: 225px;
		height: 34px;
		font-size: 1.4rem;
		line-height: 34px;
	}

	.modal_content .content_01 dl {
		flex-wrap: wrap;
		gap: 14px 0;
	}

	.modal_content .content_01 dl dd {
		width: 100%;
	}

	.modal_content .content_01 dl dd figure {
		margin: 0 auto;
		max-width: 240px;
	}

	.modal_content .content_01 dl dt {
		width: 100%;
	}

	.modal_content .content_02 {
		padding: 0;
	}

	.modal_content .content_02 h6 {
		margin-bottom: 20px;
		padding: 0 0 0 9px;
		height: 40px;
		font-size: 1.5rem;
		line-height: 40px;
		border-left: 9px solid #860404;
	}

	.modal_content .content_02 ul {
		position: relative;
		top: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
		gap: 0 14px;
		width: 260px;
	}

	.modal_content .content_02 ul li {
		width: 123px;
	}

	.modal_content .content_02 ul li figcaption {
		margin-top: 5px;
	}

	.modal_content .content_02 p {
		padding: 26px 15px 36px;
		width: 100%;
		font-size: 1.4rem;
	}


	.modal_content p.note {
		padding-left: 0;
		font-size: 1.2rem;
	}

	/* モーダルコンテンツ内の☓ */
	.modal_close {
		top: 22px;
		right: 25px;
	}

	/* 半導体の未来をつくる
	=========================================================================
	=========================================================================*/
	#future {
		padding: 80px 0 28px;
		background: url(../images/industry/market_future_bg@2x.jpg) center bottom no-repeat;
		background-size: 100% auto;
		background-color: #000000;
	}

	#future .inner {
		padding: 0 25px;
		width: 100%;
	}

	#future h2 {
		margin-bottom: 42px;
		font-size: 1.9rem;
	}

	#future h2 span {
		font-size: 1.3rem;
	}

	#future p {
		margin-bottom: 90px;
	}

	#future figure {
		margin: 0 auto;
		width: 182px;
	}
}

/*  スマホ（480px以下）
=========================================================================
=========================================================================*/
@media (max-width:480px) {}