@charset "UTF-8";

/* ====================================
	共通スタイル
===================================== */


.second_mainvisual_img {
	background-image: url(./images/main-visual.png);
	background-position: top right 20%;
}

.setup_box_item {
	padding-block: 10rem;
}

.setup_box_item:nth-of-type(n+2) {
	border-top: 1px solid var(--color-line);
}

.setup_box_item h4 {
	font-size: 2.6rem;
	margin-block-end: 3rem;
}

.setup_box_item > p {
	margin-block-end: 5rem;
}

.setup_box_item .grid_4col {
	text-align: center;
}

.setup_box_item .grid_4col p {
	margin-block-start: 3rem;
	font-size: 1.4rem;
}


/* アプリ */

.link_app_qr {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10%;
	margin-block: 5rem 0;
	margin-inline: auto;
}

.link_app_qr span {
	display: inline-block;
	width: 150px;
}

.link_app_store {
	display: inline-block;
	margin-inline-start: 1em;
}

.link_app_store img {
	height: 60px;
	width: auto;
}

#CATEGORY_02 .second_contents_box h4:before {
	display: none;
}

#CATEGORY_02 .second_contents_box em {
	display: inline-block;
	margin-inline-end: 1rem;
	color: var(--color-point);
}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover:hover) and (pointer: fine) {

	.link_app_store a:hover {
		opacity: 0.6;
	}
		
}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {

	.second_mainvisual_img {
		background-position: top center;
	}

	.setup_box_item {
		padding-block: 5rem;
	}

	.setup_box_item h4 {
		font-size: 2rem;
		margin-block-end: 3rem;
	}

	.setup_box_item > p {
		margin-block-end: 3rem;
	}

	.setup_box_item .grid_4col {
		text-align: center;
	}

	.setup_box_item .grid_4col p {
		margin-block-start: 2rem;
	}

	.setup_box_item .grid_4col .grid_4col_item {
		margin-block: 3rem 0;
	}

	.setup_box_item .grid_4col .grid_4col_item img {
		height: 160px;
		width: auto;
		object-fit: contain;
	}

	.setup_box_item .grid_4col .grid_4col_item:nth-of-type(n+2) {
		border-top: 1px solid var(--color-line);
		padding-block-start: 3rem;
	}

	/* アプリ */

	.link_app_qr {
		gap: 5%;
		margin-block: 0;
	}

	.link_app_qr span {
		display: none;
	}

	.link_app_store {
		margin-inline-start: 0;
	}

	.link_app_store img {
		height: 45px;
		width: auto;
	}

}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {

}

/* ====================================
	タブレット専用スタイル（768px～1024px）
===================================== */
@media screen and (768px <=width < 1024px) {

}

/* ====================================
	PC専用スタイル（1024px～）
===================================== */
@media print,
screen and (1024px <=width) {}