@charset "UTF-8";

#ai_pickup_page {
	letter-spacing: 0.04em;
	min-height: 100vh;
	background:
		url('/resources/img/ai_pickup/line_w.png') no-repeat center 450px / cover,
		url('/resources/img/ai_pickup/line_y.png') no-repeat center 100px / cover,
		repeating-linear-gradient(
			0deg,
			#FFFFFF 0px,
			#FFFFFF 1.25px,
			transparent 1px,
			transparent 50px
		),
		repeating-linear-gradient(
			90deg,
			#FFFFFF 0px,
			#FFFFFF 1.25px,
			transparent 1px,
			transparent 50px
		);
	background-color: #F0F0E9;
	background-attachment: 
		fixed;
}

/* ヘッドライン */
.ai_pickup_headline {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #222222;
	width: 100%;
	padding: 60px 20px;
	position: relative;
}

.ai_pickup_headline > div {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 600px;
	width: 50%;
}

#ai_pickup_page h1 {
	font-size: 48px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.08em;
	margin: 0;
	border: 3px dashed #222222;
	background-color: #FFFFFF;
	padding: 20px 30px;
	display: inline-block;
	text-align: center;
}

/* h1の下のdiv（説明文と画像を含む） */
.ai_pickup_headline > div > div {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ai_pickup_headline > div > div > p {
	font-size: 16px;
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin: 0;
	text-align: left;
	flex: 1;
}

.ai_pickup_headline img {
	object-fit: contain;
	width: 78px;
	height: 78px;
	flex-shrink: 0;
}

/* メインコンテンツエリア */
.ai_pickup_content {
	padding-bottom: 120px;
	width: 80%;
	margin: 0 auto;
}

/* 2カラムコンテナ */
.ai_pickup_container {
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 20px;
	position: relative;
	z-index: 1;
}

/* 共通セクションスタイル */
.ai_recommend,
.ai_topics {
	display: flex;
	flex-direction: column;
}

.ai_recommend > div,
.ai_topics > div {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#ai_pickup_page h2 {
	color: #222222;
	font-size: 40px;
	font-weight: bold;
	padding: 20px 10px;
	margin: 0 0 30px 0;
	border-radius: 60px;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.05em;
	width: 100%;
	border: 1px solid #222222;
}

#ai_pickup_page .ai_recommend h2 {
	background-color: #FFB4A2;
}

#ai_pickup_page .ai_topics h2 {
	background-color: #76DEB3;
}

/* カードスタイル */
#ai_pickup_page h3 {
	color: #222222;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.5;
	background-color: #FFFFFF;
	padding: 25px;
	margin: 0;
}

#ai_recommend_card {
	background-color: #FFFFFF;
	border: 1px solid #222222;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* 左上の四角 */
#ai_recommend_card::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	width: 10px;
	height: 10px;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	z-index: 2;
}

/* 右下の四角 */
#ai_recommend_card::after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	width: 10px;
	height: 10px;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	z-index: 2;
}

#ai_recommend_card article {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
}

/* 右上の四角 */
#ai_recommend_card article::before {
	content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	width: 10px;
	height: 10px;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	z-index: 2;
}

/* 左下の四角 */
#ai_recommend_card article::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: -5px;
	width: 10px;
	height: 10px;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	z-index: 2;
}

#ai_recommend_content {
	font-size: 16px;
	color: #222222;
	background-color: #FFFFFF;
	padding: 0 25px;
	line-height: 1.8;
	flex: 1;
}

/* TOPICS グリッドレイアウト */
#ai_topics_contents {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* TOPICSカードのコンテナ */
.ai_topics_card {
	display: flex;
	flex-direction: column;
	height: fit-content;
	position: relative;
}

/* TOPICSカードの内側div */
.ai_topics_card > div {
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	position: relative;
	height: 100%;
}

/* 左上の四角 */
.ai_topics_card > div::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	width: 10px;
	height: 10px;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	z-index: 2;
}

/* 右上の四角 */
.ai_topics_card > div::after {
	content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	width: 10px;
	height: 10px;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	z-index: 2;
}

/* 左下・右下の四角（articleを利用） */
.ai_topics_card::before {
	content: "";
	position: absolute;
	bottom: -5px;
	left: -5px;
	width: 10px;
	height: 10px;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	z-index: 2;
}

.ai_topics_card::after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	width: 10px;
	height: 10px;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	z-index: 2;
}

.ai_topics_content {
	font-size: 16px;
	color: #222222;
	background-color: #FFFFFF;
	padding: 0 25px;
	line-height: 1.8;
	flex: 1;
}

#ai_recommend_content,
.ai_topics_content {
	margin-bottom: 0;
}

/* ボタンスタイル */
.ai_pickup_link_btn {
	background-color: #FFFFFF;
	text-align: center;
	padding: 30px 25px 25px;
}

#ai_pickup_page .btn {
	padding: 0;
	background-color: #FFFFFF;
	border-radius: 60px;
	color: #222222;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
	width: 100%;
	height: 80px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#ai_pickup_page .ai_recommend .btn {
	border: 5px solid #FFB4A2;
}

#ai_pickup_page .ai_topics .btn {
	border: 5px solid #76DEB3;
}

#ai_pickup_page .btn::after {
	position: absolute;
	content: "";
	right: 10px;
	top: 47%;
	width: 10px;
	height: 10px;
	border-right: 2px solid #222222;
	border-bottom: 2px solid #222222;
	transform: rotate(-45deg) translateY(-50%);
	transition: all 0.3s ease;
}

#ai_pickup_page .ai_recommend .btn:hover {
	background-color: #FFB4A2;
}

#ai_pickup_page .ai_topics .btn:hover {
	background-color: #76DEB3;
}

#ai_pickup_page .btn:focus {
	outline: 3px solid #9B0000;
	outline-offset: 3px;
}

#ai_pickup_page .btn:focus:not(:focus-visible) {
	outline: none;
}



/* 画像スタイル */
.ai_recommend_img,
.ai_topics_img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	border-bottom: 2px solid #E8DCC8;
}

/* レスポンシブ対応 - 1080px以下 */
@media screen and (max-width: 1080px) {
	#ai_pickup_page h1 {
		font-size: 30px;
		padding: 5px 5px;
	}

	.ai_pickup_headline {
		padding: 80px 10px 70px;
	}

	.ai_pickup_headline > div {
		width: 100%;
		min-width: auto;
	}

	.ai_pickup_headline > div > div {
		flex-direction: column;
	}

	.ai_pickup_headline > div > div > p {
		font-size: 16px;
		text-align: left;
		width: 100%;
	}

	.ai_pickup_headline img {
		width: 120px;
		height: 120px;
	}

	.ai_pickup_content {
		width: 95%;
	}

	.ai_pickup_container {
		grid-template-columns: 1fr;
		gap: 50px;
		margin: 0 auto;
	}

	#ai_pickup_page h2 {
		font-size: 28px;
		padding: 15px 40px;
		margin: 0 0 20px 0;
	}

	#ai_pickup_page h3 {
		font-size: 26px;
		padding: 20px 20px 10px;
	}

	#ai_recommend_content,
	.ai_topics_content {
		font-size: 16px;
		padding: 5px 25px 10px;
	}

	.ai_pickup_link_btn {
		padding: 15px;
	}

	/* TOPICSを縦並びに */
	#ai_topics_contents {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media screen and (max-width: 768px) {
	/* 設定なし */
}

@media screen and (max-width: 480px) {
	#ai_pickup_page {
		background-size:
			contain,
			contain,
			40px 40px,
			40px 40px;
		
		background-position:
			center 450px,
			center 360px,
			0 0,
			0 0;
	}
}