@charset "utf-8";

/* ============================================= main_visual */
.products_list .main_visual {
	background: url(../imgs/products/gyro/main_visual.jpg) no-repeat center center / cover;
	/* height:440px; */
}

.main_visual .text {
	max-width: 736px;
}

.link_type_03 {
	background:#FFF;
}

.text_link a {
	color:var(--color-main);
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.sp_center h1{
		text-align:center !important;
	}
}

/* ------------------------------------- for sp */
@media ( max-width : 1040px ) {
	.inner_links {
		flex-direction: column;
	}
	.inner_links li {
		margin:10px 0 0;
		font-size:1.6rem;
		text-align:left;
		padding-left:1em;
		text-indent:-1em;
	}
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.products_list .main_visual {
		background: url(../imgs/products/gyro/main_visual_sp.jpg) no-repeat center top / cover;
		height:auto;
	}
}

.heading_02 {
	margin-bottom:18px;
}

.pc-text-col2 {
	gap: 32px;
	margin: 18px 0 0;
}
.pc-text-col2 .text {
	width: 65.5%;
}
.pc-text-col2 .image {
	width: 31%;	
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.pc-text-col2 .text,
	.pc-text-col2 .image {
		width: 100%;
	}

	.pc-text-col2 p {
		font-size: 1.44rem;
	}
}

a.link_thumbnail_text_button p span.external_link {
	background:url(../imgs/common/icon_external.svg) no-repeat right center;
	padding-right:2.2rem;
	background-size:1.2rem 1.2rem;
}
a.link_thumbnail_text_button p span.external_link::before {
	border:none !important;
}
a.link_thumbnail_text_button:hover p span.external_link {
	background:url(../imgs/common/icon_external_white.svg) no-repeat right center;
	padding-right:2.2rem;
	background-size:1.2rem 1.2rem;
}


/* ============================================= table */
/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.kasokudokei_content .table_content table td {
		word-break: break-all;
	}
}

/* ============================================= image */
.gyro_image {
	margin-left: auto;
	margin-right:auto;
}
.gyro_image img {
	width:auto;
	max-width:100%;
	/* margin:auto; */
}

.ta7457_structure {
	display:flex;
	justify-content:space-between;
}
.ta7457_structure div {
	width:48%;
}
/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.ta7457_structure {
		flex-direction:column;
	}
	.ta7457_structure div {
		width:100%;
		margin-top:30px;
	}
	.ta7457_structure div img {
		width:auto;
		max-width:100%;
		margin:auto;
	}
}


/* ============================================= about page */
.about_top_text .flex_text {
	display:flex;
	flex-wrap:wrap;
}
.about_top_text .flex_text span {
	margin:0 1rem 0 0;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.about_top_text {
		text-align:left;	
	}
	.about_top_text .flex_text {
		display:block;
	}
	.about_top_text .flex_text span {
		margin:0;
		display:block;
	}
}


/* ============================================= inner_links */
.inner_links.list {
	display:block;
	margin:50px 0;
	text-align:left;
}
.inner_links.list li {
	margin:10px 0;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.inner_links.list {
		display: grid;
		justify-content: center;
	}
	.inner_links.list li {
		margin:1.5rem 0;
		padding-left:2.5rem;
		text-indent:-2.5rem;
		text-align: left;
		width: fit-content;
	}
}


/* ============================================= related_ul */
.related_ul .related_li {
	aspect-ratio: 10 / 9 !important;
	background-size:cover;
}
.related_li .image span {
	position:absolute;
	right:10px;
	top:10px;
	z-index:1;
	color:#FFF;
	background:#000;
	padding:2px 10px 4px;
	line-height:1.4;
}
.related_li p span.external {
	background:url(../imgs/common/icon_external.svg) no-repeat right center;
	padding-right:2rem;
	background-size:1.3rem 1.3rem;
}

/* ------------------------------------- responsive */
@media screen and (min-width:1066px) and ( max-width:1200px) {
	.related_ul .related_li {
		aspect-ratio: 3 / 2 !important;
		background-size:cover;
	}
}
@media screen and (min-width:981px) and ( max-width:1065px) {
	.related_ul .related_li {
		aspect-ratio: 4 / 3 !important;
		background-size:cover;
	}
}
@media screen and (min-width:768px) and ( max-width:980px) {
	.related_ul .related_li {
		aspect-ratio: 7 / 6 !important;
		background-size:cover;
	}
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.related_ul .related_li {
		aspect-ratio: 6 / 7 !important;
		background-size:cover;
	}
	.related_li .image span {
		right:5px;
		top:5px;
		padding:2px 8px;
		line-height:1.2;
		font-size:1.2rem;
	}
}