/*****************************
------------------------------
@media
------------------------------
*****************************/

/*pctb*/
@media all and (min-width: 768px) {
	.btn01:has(span):hover {
		opacity: 1;
	}

	.btn01:has(span):hover span:before {
		opacity: 0.4;
	}

	:where(.top_btns) {
		display: flex;
		justify-content: center;
		gap: 30px;
	}

	.top_btns .btn {
		min-width: auto;
		max-width: var(--btn-width);
		flex: 1;
		margin: 0;
	}

	.top_feature_item_img {
		margin-left: var(--over-margin);
		border-radius: 0 var(--border-radius) var(--border-radius) 0;
	}

	.top_feature_item:nth-of-type(2n + 1) {
		flex-direction: row-reverse;

		.top_feature_item_img {
			margin-right: var(--over-margin);
			margin-left: 0;
			border-radius: var(--border-radius) 0 0 var(--border-radius);
		}

		.top_feature_item_catch {
			padding-left: 30px;
		}

		.top_feature_item_catch:before {
			inset: auto auto 0 0;
		}
	}

	.m_footer_menu_list > .dotlist {
		display: flex;
		--gap-col: 20px;
		--gap-row: 9px;
		--col: 2;
		
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap-row) var(--gap-col);
	}
	
	.m_footer_menu_list .dotlist > li {
		margin-bottom: 0 !important;
		width: calc(100% / var(--col) - var(--gap-col) * (var(--col) - 1) / var(--col));
	}
}

@media all and (min-width: 768px) and (max-width: 1500px) {
	.header03 {
		padding: 0 15px 0 25px;
	}
	.header03 .nav_depth00_ttl {
		font-size: 1.6rem;
		padding: 10px 13px 10px;
		gap: 9px;
		letter-spacing: 0.13em;
	}
}

@media all and (min-width: 768px) and (max-width: 1279px) {

	.header03,
	.m_slider {
		width: 1280px;
	}
}