@charset 'UTF-8';

/*----------------------------------------

	- inner_box
	+ header
		- h_btns
		- sp_btns
		+ nav
			- megamenu（sp時アコーディオンメニューに変化）
				- mega_strength
				- mega_story
				- mega_product
				- mega_company
				- mega_sustainability
				- mega_contact
	+ footer
		+ f_menu（sp時アコーディオンメニューに変化）
			- check_strength02
			- check_story02
			- check_product02
			- check_company02
			- check_sustainability02
			- check_contact02
		- f_link
		- copyright
	- scrolltop
	- breadcrumb
	- heading_01
	- heading_02
	- heading_03
	- heading_04
	- bg / triangle
	+ card_box
		- card
	- news
	- pagination
	- tag_list

-----------------------------------------*/

/*----------------------------------------
	common
-----------------------------------------*/

.inner_box {
	max-width: 1056px;
	width: 82.5%;
	margin: auto;
}

@media screen and (max-width: 768px) {
	.inner_box {
		max-width: initial;
		width: 89.744%;
	}
}

/*----------------------------------------
	header
-----------------------------------------*/

header {
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-height: 139px;
	height: 13.84vw;
	transition: background-color var(--transition05secEaseout);
}

/* 非sitetop用 */
body:not(#sitetop)>header {
	background-color: rgba(255, 255, 255, 0.7);

	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

/* sitetop用 */
body#sitetop:not(.scrolled) header {
	color: var(--color_white);
}

/* sitetop用スクロール時 */
body#sitetop.scrolled header {
	background-color: rgba(255, 255, 255, 0.7);

	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

body#sitetop.scrolled header .h_btns li::before {
	opacity: 1;
	transition: opacity var(--transition02secEaseout);
}

/* hover */
@media (hover: hover) {
	body#sitetop.scrolled header .h_btns li:hover::before {
		opacity: 0.6;
	}
}

header>div {
	display: flex;
	gap: 3%;
	justify-content: space-between;
	top: 0;
	width: 95%;
	margin: auto;
	padding: 55px 0 0 1.4%;
}

/* logo */
header h1 {
	max-width: 344px;
	min-width: 260px;
	width: 27vw;
	padding-top: 20px;
}

header h1 img {
	opacity: 0;
}

/* nav */
header nav {
	width: fit-content;
	margin-top: 34px;
	margin-right: 20px;
}

header #gnav {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	column-gap: 36px;
}

header #gnav>li {
	overflow: hidden;
	padding-bottom: 30px;
	transition: color var(--transition05secEaseout);
}

header #gnav>li:hover {
	color: var(--color_basicblue);
}

header #gnav>li>a {
	position: relative;
	padding-bottom: 12px;
	letter-spacing: 0.04em;
}

/* sitetop用 */
#sitetop header #gnav>li>a {
	color: var(--color_white);
	transition: color var(--transition05secEaseout);
}

/* sitetop用スクロール時 */
body#sitetop.scrolled header #gnav>li>a {
	color: var(--color_raisinblack);
}

header #gnav>li>a::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 0;
	width: 0;
	height: 4px;
	background: var(--color_basicblue);
	transition: width var(--transition05secEaseinout);
}

/* hover */
@media screen and (min-width: 1101px) {
	header #gnav>li:hover>a {
		color: var(--color_basicblue);
	}

	header #gnav>li:hover>a::after {
		right: auto;
		left: 0;
		width: 100%;
	}

	/* sitetop用 */
	#sitetop header #gnav>li:hover>a,
	#sitetop.scrolled header #gnav>li:hover>a {
		color: var(--color_basicblue);
	}

	header #gnav>li.current:hover>a::after {
		background: var(--color_pointgold);
	}
}

/* nav .current 現在位置表示用 */
header #gnav>li.current>a {
	color: var(--color_pointgold);
}

header #gnav>li.current>a::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--color_pointgold);
}

header #gnav>li.current>a::after {
	background: var(--color_pointgold);
}

@media screen and (max-width: 1100px) {
	header {
		max-height: 85px;
	}

	header nav {
		width: 100%;
		margin-right: 0;
	}

	header>div {
		display: flex;
		flex-direction: column;
		row-gap: 0;
		justify-content: flex-start;
		overflow: hidden;
		position: fixed;
		width: 100%;
		max-height: 85px;
		height: 13.84vw;
		padding: 0;
		transition: max-height var(--transition02secEaseout), height var(--transition02secEaseout);
	}

	header>div.active {
		overflow-y: scroll;
		max-height: 100vh;
		height: 100vh;
		transition: max-height var(--transition03secEaseinout), height var(--transition03secEaseinout);
	}

	header>div.active::after,
	#sitetop header>div::after {
		content: '';
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		background: var(--color_bg_silver);
	}

	header>div.active::after,
	#sitetop header>div.active::after {
		height: 100%;
	}

	/* logo */
	header h1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		max-width: initial;
		width: 100%;
		max-height: 85px;
		height: 13.84vw;
		padding: 0 0 0 4.1vw;
	}

	header h1 a {
		display: block;
		max-width: 320px;
		width: 50%;
	}

	/* sitetop用 */
	#sitetop header>div h1 {
		display: flex;
		background: initial;
	}

	#sitetop header>div.active h1 {
		align-items: center;
		background: var(--color_white);
	}

	header>div.active h1 {
		z-index: 1000;
		position: fixed;
		background: var(--color_white);
	}

	#sitetop header>div.active h1 {
		background: var(--color_white);
	}

	#sitetop.scrolled header>div.active h1 {
		background: var(--color_white);
	}

	header>div.active .h_btns {
		z-index: 1001;
		position: fixed;
		top: 0;
	}

	#sitetop header>div.active .h_btns li::before {
		opacity: 1;
	}

	/* gnav */
	header nav {
		margin-top: 85px;
	}

	header #gnav {
		flex-direction: column;
		padding-top: 12vw;
		background: var(--color_bg_silver);
	}

	header #gnav>li {
		width: 100%;
		margin: auto;
		padding: 0;
	}

	header #gnav>li>a {
		display: none;
	}

	header #gnav>li>a::before {
		display: none;
	}

	header #gnav>li.current>a {
		color: var(--color_raisinblack);
	}

	/* sitetop用 */
	#sitetop header #gnav>li>a {
		color: var(--color_raisinblack);
	}
}

@media screen and (max-width: 612px) {
	/* gnav */
	header nav {
		margin-top: 13.84vw;
	}
}

/*----------------------------------------
	megamenu
-----------------------------------------*/
header #gnav div.megamenu {
	z-index: -1;
	position: absolute;
	top: 139px;
	left: 0;
	width: 100%;
	background: var(--color_pointgold);
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--transition05secEaseinout);
}

header #gnav div.megamenu>div {
	overflow: hidden;
}

header #gnav div.megamenu [class^='mega_'] {
	display: flex;
	flex-wrap: wrap;
	gap: 26px 83px;
	align-content: center;
	align-items: center;
	max-width: 1056px;
	width: 82.5%;
	margin: 0 auto;
	padding: 33px 0;
	color: var(--color_white);
}

@media screen and (min-width: 1101px) {
	header #gnav>li:hover div.megamenu,
	header #gnav>li:focus-within div.megamenu {
		grid-template-rows: 1fr;
	}
}

header #gnav div.megamenu [class^='mega_'] a {
	letter-spacing: 0.04em;
}

header #gnav div.megamenu [class^='mega_'] a[target="_blank"] {
	position: relative;
	padding-right: 0.25em;
}

header #gnav div.megamenu [class^='mega_'] a[target="_blank"]::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
	width: 1lh;
	height: 1lh;
	background-image: url(../../img/c_ic_browser_white.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

/* hover */
@media (hover: hover) {
	header #gnav div.megamenu [class^='mega_'] a:hover {
		text-decoration: underline;
	}
}

/* ○○トップ (アコーディオン内のリンク) PC非表示 */
header #gnav div.megamenu [class^='mega_'] li:first-of-type {
	display: none;
}

@media screen and (max-width: 1100px) {
	header #gnav input[type=checkbox]+label+div.megamenu {
		position: initial;
	}

	header #gnav div.megamenu [class^='mega_'] {
		flex-direction: column;
		gap: 0;
		align-content: unset;
		align-items: flex-start;
		width: 74.359%;
		padding: 5.12vw 0;
	}

	header #gnav div.megamenu [class^='mega_'] li {
		width: 100%;
	}

	/* ○○トップ 表示 */
	header #gnav div.megamenu [class^='mega_'] li:first-of-type {
		display: block;
	}
}

/*----------------------------------------
	accordion for SP
-----------------------------------------*/
header #gnav input[type=checkbox] {
	display: none;
}

header #gnav label {
	display: none;
}

@media screen and (max-width: 1100px) {
	header #gnav.font16_15 {
		font-size: 3.84vw;
	}

	header #gnav label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 89.744%;
		height: 15.38vw;
		margin: auto;
		padding: 0 2.56vw;
		border-bottom: 1px solid var(--color_silver);
		background: var(--color_bg_silver);
		letter-spacing: 0.1em;
	}

	#sitetop:not(.scrolled) header>div.active #gnav label {
		color: var(--color_raisinblack);
	}

	header #gnav>li:first-of-type label {
		border-top: 1px solid var(--color_silver);
	}

	header #gnav input[type=checkbox]+label+div.megamenu {
		grid-template-rows: 0fr;
	}

	header #gnav input[type=checkbox]:checked+label+div.megamenu {
		grid-template-rows: 1fr;
	}

	header #gnav label::after {
		content: '';
		width: 3.07vw;
		height: 3.07vw;
		background-image: url(../img/c_ic_plus_basicblue.svg);
		background-position: center;
		background-size: 3.07vw 3.07vw;
		background-repeat: no-repeat;
	}

	header #gnav input[type=checkbox]:checked+label::after {
		background-image: url(../img/c_ic_minus_basicblue.svg);
	}

	header #gnav>li.single a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 89.744%;
		height: 15.38vw;
		margin: auto;
		padding: 0 2.56vw;
		border-bottom: 1px solid var(--color_silver);
		background: var(--color_bg_silver);
		letter-spacing: 0.1em;
	}

	header #gnav input[type=checkbox]+label+div.megamenu [class^='mega_'] li:not(:first-of-type) {
		margin-top: 6.56vw;
	}

	header #gnav input[type=checkbox]+label+div.megamenu [class^='mega_'] a {
		text-decoration: none;
	}
}

/*----------------------------------------
	h_btns
-----------------------------------------*/

header .h_btns {
	display: flex;
	gap: 1px;
	grid-area: sub;
	justify-content: flex-end;
	position: absolute;
	top: 0;
	right: 0;
}

header .h_btns li {
	z-index: 1;
	position: relative;
	/* width: 130px; */
	height: 45px;
	color: var(--color_white);
}

header .h_btns li::before {
	content: '';
	display: block;
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* sitetop用 */
#sitetop header .h_btns li::before {
	opacity: 0.7;
}

/* TSUKASA RUBBER GROUP */
header .h_btns li:first-of-type::before {
	background: #0095CC;
	transition: opacity var(--transition02secEaseout);
}

/* hover */
@media (hover: hover) {
	header .h_btns li:first-of-type:hover::before {
		opacity: 0.6;
	}
}

/* お問い合わせ */
header .h_btns li:nth-of-type(2)::before {
	display: flex;
	background: var(--color_taupegray);
	transition: opacity var(--transition02secEaseout);
}

/* hover */
@media (hover: hover) {
	header .h_btns li:nth-of-type(2):hover::before {
		opacity: 0.6;
	}
}

header .h_btns li:nth-of-type(2) a::before {
	background-image: url(../img/c_ic_contact_white.svg);
	background-size: 21.6px 14.57px;
}

/* 展開ボタン PC非表示 */
header .h_btns li:nth-of-type(3) {
	display: none;
}

header .h_btns li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	letter-spacing: 0.02em;
	padding-inline: 18px;
}

header .h_btns li:first-of-type a span {
	display: block;
}

header .h_btns li:first-of-type a::after {
	content: "";
	display: block;
	background-image: url(../img/c_ic_browser_white.svg);
	margin-left: 5px;
    background-position: center;
    background-repeat: no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
}

header .h_btns li:nth-of-type(2) a::before {
	content: '';
	width: 21.6px;
	height: 14.57px;
	margin-right: 10px;
	background-position: center;
	background-repeat: no-repeat;
}

/* PC非表示 */
header .sp_btns {
	display: none;
}

@media screen and (max-width: 1100px) {
	header .h_btns {
		gap: 0;
	}

	header .h_btns li {
		max-width: 85px;
		width: 13.84vw;
		max-height: 85px;
		height: 13.84vw;
	}

	header .h_btns li a::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	header .h_btns li a::after {
		display: none !important;
	}

	/* TSUKASA RUBBER GROUP */
	header .h_btns li:first-of-type a::before {
		background-image: url(../img/c_ic_grop_white.svg);
		background-size: 55.55% auto;
	}

	/* お問い合わせ */
	header .h_btns li:nth-of-type(2) {
		display: block;
	}

	header .h_btns li:nth-of-type(2) a::before {
		width: 100%;
		height: 100%;
		margin-right: 0;
		background-size: 40.74% auto;
	}

	/* 展開ボタン 表示 */
	header div .h_btns li:nth-of-type(3) {
		content: '';
		display: block;
		background-image: url(../img/c_ic_border_basicblue.svg);
		background-position: center;
		background-size: 29.62% auto;
		background-repeat: no-repeat;
		background-color: var(--color_white);
		cursor: pointer;
		transition: background-image var(--transition0secEaseout);
	}

	header>div.active .h_btns li:nth-of-type(3) {
		background-image: url(../img/c_ic_cross_basicblue.svg);
		background-size: 24.07% auto;
		transition: background-image var(--transition0secEaseout);
	}

	/* ボタンテキスト非表示 */
	header .h_btns li:first-of-type a span,
	header .h_btns li:nth-of-type(2) a span {
		display: none;
	}

	/* sp用ボタン表示 */
	header .sp_btns {
		display: flex;
		flex-direction: column;
		gap: 5.12vw;
		align-items: center;
		width: 100%;
		padding: 15.38vw 5.12vw 25vw;
		background: var(--color_bg_silver);
	}

	/* ボタン調整 */
	.sp_btns .font16_14 {
		font-size: 3.58vw;
	}

	.sp_btns .btn-m {
		width: 46.15vw;
		height: 13.33vw;
	}

	.sp_btns .btn-m.long {
		width: 72vw;
	}

	.sp_btns .btn-ic-contact {
		display: flex;
		flex-flow: row-reverse;
		align-items: center;
	}

	.sp_btns .btn-ic-contact::after {
		width: 5.64vw;
		height: 3.84vw;
		margin: 0 2.56vw 0 0;
		background-size: 5.64vw 3.84vw;
	}

	.sp_btns .closeBtn {
		display: flex;
		column-gap: 2vw;
		justify-content: center;
		align-items: center;
		color: var(--color_basicblue);
		transform: translateY(9vw);
		font-size: 4vw;
		cursor: pointer;
	}

	.sp_btns .closeBtn::before {
		content: '';
		display: inline-block;
		width: 1em;
		height: 1em;
		margin: auto;
		background-image: url(../img/c_ic_cross_basicblue.svg);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.sp_btns .closeBtn span {
		display: inline-block;
	}
}

/*----------------------------------------
	footer
-----------------------------------------*/

footer {
	margin-top: 140px;
}

footer>div:not(:last-of-type) {
	max-width: 1056px;
	width: 82.5%;
	margin: auto;
}

@media screen and (max-width: 768px) {
	footer {
		margin-top: 26.1vw;
	}

	footer>div:not(:last-of-type) {
		width: 100%;
	}
}

/* logo
-------------------------*/

footer>div>p {
	width: 305px;
}

footer>div>p a {
	display: block;
}

@media screen and (max-width: 768px) {
	footer>div>p {
		width: 55vw;
		margin: auto;
	}
}

/*----------------------------------------
	accordion / f_menu
-----------------------------------------*/

footer .f_menu {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	justify-content: flex-start;
	margin: 61px auto 0;
}

footer .f_menu>li>a {
	display: block;
	margin-bottom: 7px;
	color: var(--color_basicblue);
	letter-spacing: 0.03em;
}

/* hover */
@media (hover: hover) {
	footer .f_menu>li>a:hover {
		text-decoration: underline;
	}
}

footer .f_menu input,
footer .f_menu label {
	display: none;
}

footer .f_menu>li ul {
	display: grid;
	gap: 16px 50px;
	grid-template-columns: auto;
	grid-template-rows: repeat(6, auto);
	padding-top: 17px;
	border-top: 1px solid var(--color_silver);

	grid-auto-flow: column;
}

footer .f_menu>li:last-of-type ul {
	grid-template-rows: repeat(6, auto);
}

/* アコーディオン用 */
footer .f_menu>li ul[class^='mega_'] li:first-of-type {
	display: none;
}

footer .f_menu>li li {
	width: 163px;
}

footer .f_menu>li li a {
	color: var(--color_fmenu_gray);
	letter-spacing: 0.03em;
}

footer .f_menu>li li a[target="_blank"] {
	position: relative;
	padding-right: 0.25em;
}

footer .f_menu>li li a[target="_blank"]::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
	width: 1lh;
	height: 1lh;
	background-image: url(../../img/c_ic_browser_taupegra.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

footer .f_menu>li li br {
	display: block;
}

/* hover */
@media (hover: hover) {
	footer .f_menu>li li a:hover {
		text-decoration: underline;
	}
}

footer .f_menu>li li a span {
	display: block;
}

@media screen and (max-width: 768px) {
	footer .f_menu {
		flex-direction: column;
		flex-wrap: initial;
		gap: 0;
		margin-top: 10.6vw;
	}

	footer .f_menu>li {
		position: relative;
	}

	footer .f_menu>li::after {
		content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 89.744%;
        height: 0;
		border-bottom: 1px solid var(--color_silver);
	}

	footer .f_menu>li>a {
		display: none;
	}

	footer .f_menu label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 89.744%;
		height: 14.2vw;
		margin: auto;
		padding: 0 2.56vw;
		border-bottom: 1px solid transparent;
		color: var(--color_basicblue);
		letter-spacing: 0.03em;
		transition: border-color 0s 0.5s;
	}

	footer .f_menu li:first-of-type>label {
		border-top: 1px solid var(--color_silver);
	}

	footer .f_menu input[type=checkbox]:checked+label {
		border-bottom: 1px solid var(--color_silver);
		transition: border-color 0s 0s;
	}

	footer .f_menu label::after {
		content: '';
		width: 3.07vw;
		height: 3.07vw;
		background-image: url(../img/c_ic_plus_basicblue.svg);
		background-position: center;
		background-size: 3.07vw 3.07vw;
		background-repeat: no-repeat;
		filter: grayscale(100%) brightness(120%);
	}

	footer .f_menu input[type=checkbox]:checked+label::after {
		background-image: url(../img/c_ic_minus_basicblue.svg);
	}

	footer .f_menu input[type=checkbox]+label+div {
		display: grid;
		grid-template-rows: 0fr;
		background: var(--color_bg_silver);
		transition: grid-template-rows var(--transition05secEaseinout);
	}

	footer .f_menu input[type=checkbox]:checked+label+div {
		grid-template-rows: 1fr;
	}

	footer .f_menu input[type=checkbox]+label+div>div {
		overflow: hidden;
	}

	footer .f_menu>li ul {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 84.615%;
		margin: auto;
		padding: 5.12vw 0;
		border: initial;
	}

	footer .f_menu>li li {
		width: 100%;
		white-space: nowrap;
	}

	/* アコーディオン用 */
	footer .f_menu>li ul[class^='mega_'] li:first-of-type {
		display: block;
	}

	footer .f_menu>li li a span {
		display: inline-block;
	}

	footer .f_menu>li li+li {
		margin-top: 6.92vw;
	}

	footer .f_menu>li li br {
		display: none;
	}
}

/*----------------------------------------
	f_link
-----------------------------------------*/

footer .f_link {
	display: flex;
	flex-wrap: wrap;
	column-gap: 63px;
	row-gap: 30px;
	margin-top: 50px;
}

footer .f_link ul {
	display: flex;
	gap: 63px;
}

footer .f_link ul li {
	letter-spacing: 0.03em;
}

footer .f_link ul:first-of-type li {
	color: var(--color_basicblue);
}

footer .f_link ul:last-of-type li {
	color: var(--color_raisinblack);
}

/* hover */
@media (hover: hover) {
	footer .f_link ul li a:hover {
		text-decoration: underline;
	}
}

@media screen and (max-width: 768px) {
	footer .f_link {
		flex-direction: column;
		flex-wrap: wrap;
		gap: 8.3vw;
		width: 89.744%;
		margin: 6.41vw auto 0;
	}

	footer .f_link ul {
		display: flex;
		flex-wrap: wrap;
		gap: 7.69vw;
	}

	footer .f_link ul:nth-of-type(2) {
		gap: 6.15vw;
	}
}

/*----------------------------------------
	copyright
-----------------------------------------*/

footer>div:last-of-type {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 180px;
	margin-top: 76px;
	background: var(--color_basicblue);
}

footer>div:last-of-type>div {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px 60px;
	max-width: 1056px;
	width: 82.5%;
	margin: auto;
	color: var(--color_white);
}

/* left */
footer>div:last-of-type>div .f_profile {
	letter-spacing: 0.03em;
}

/* 住所 */
footer>div:last-of-type>div .f_profile p:nth-of-type(2) {
	margin-top: 14px;
	letter-spacing: 0.03em;
}

/* 電話 */
footer>div:last-of-type>div .f_profile p:last-of-type {
	letter-spacing: 0.03em;
}

footer>div:last-of-type>div .f_profile p span {
	display: inline-block;
}

/* right */
footer>div:last-of-type>div>div:last-of-type {
	grid-column: 1/-1;
	text-align: right;
}

/* 中間サイズ */
@media screen and (min-width: 769px) and (max-width: 950px) {
	footer>div:last-of-type {
		height: 240px;
	}
}

/* spサイズ */
@media screen and (max-width: 768px) {
	footer>div:last-of-type {
		align-items: flex-start;
		height: 56.66vw;
		margin-top: 20.51vw;
	}

	footer>div:last-of-type>div .f_profile {
		margin-top: 0;
	}

	/* 会社名 */
	footer>div:last-of-type>div .f_profile p:first-of-type {
		line-height: 2;
		letter-spacing: 0;
	}

	/* 住所 */
	footer>div:last-of-type>div .f_profile p:nth-of-type(2) {
		margin-top: 2.48vw;
		letter-spacing: 0;
	}

	/* 電話 */
	footer>div:last-of-type>div .f_profile p:last-of-type {
		gap: 5.6vw;
		margin-top: 1vw;
		letter-spacing: 0;
	}

	footer>div:last-of-type>div {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 6.11vw 5.128vw;
		width: 89.744%;
		margin: 8.974vw auto auto;
	}

	footer>div:last-of-type>div>div:last-of-type {
		width: 100%;
		text-align: center;
		margin-bottom: 0;
	}

	footer>div:last-of-type small {
		font-weight: 300;
		line-height: 1.5;
	}

	footer>div:last-of-type small span {
		display: block;
	}
}

/*----------------------------------------
	scrolltop
-----------------------------------------*/

.scrolltop {
	opacity: 0;
	z-index: 1000;
	position: fixed;
	right: 50px;
	bottom: 50px;
	width: 60px;
	height: 60px;
	background-image: url(../img/c_ic_scrolltop.svg);
	background-position: center;
	background-size: 60px 60px;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: opacity var(--transition05secEaseout);
}

.scrolltop:not(.active) {
	pointer-events: none;
}

.scrolltop.active {
	opacity: 1;
	bottom: 50px;
}

.scrolltop.stop {
	position: absolute;
	bottom: 150px;
}

/* hover */
@media (hover: hover) {
	.scrolltop.active:hover {
		opacity: 0.6;
	}
}

@media screen and (max-width: 1280px) {
	.scrolltop {
		right: 1.25vw;
	}
}

@media screen and (max-width: 950px) {
	.scrolltop.active {
		bottom: 50px;
	}

	.scrolltop.stop {
		bottom: 210px;
	}
}

@media screen and (max-width: 768px) {
	.scrolltop {
		right: 4.1vw;
		bottom: 4.1vw;
		width: 12.82vw;
		height: 12.82vw;
		background-size: 12.82vw;
	}

	.scrolltop.active {
		bottom: 4.1vw;
	}

	.scrolltop.stop {
		bottom: 50.51vw;
	}
}

/*----------------------------------------
	breadcrumb (パンくず)
-----------------------------------------*/

.breadcrumb {
	max-width: 1056px;
	width: 82.5%;
	margin: 20px auto 90px;
}

.breadcrumb ol {
	display: flex;
	align-items: center;
}

.breadcrumb li {
	display: flex;
	align-items: center;
}

.breadcrumb li a {
	color: var(--color_taupegray);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* hover */
@media (hover: hover) {
	.breadcrumb li a:hover {
		text-decoration: underline;
	}
}

.breadcrumb li span {
	color: var(--color_raisinblack);
	letter-spacing: 0.03em;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.breadcrumb li:not(:last-of-type)::after {
	content: '';
	width: 6px;
	height: 8px;
	margin: 0 19px;
	background-image: url(../img/c_ic_arw_r_s_taupegray.svg);
	background-position: center;
	background-size: 6px 8px;
	background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
	.breadcrumb {
		display: none;
	}
}

/*----------------------------------------
	heading_01 (ページ見出し)
-----------------------------------------*/

/* トップページ以外 */
.heading_01 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 160px;
	margin-top: 140px;
}

.heading_01.sustainability {
	height: 400px;
}

.heading_01.error {
	height: 30px;
	background: var(--color_basicblue);
}

.heading_01::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.heading_01.news::before {
	background-image: url(../img/news_heading_bg01.webp);
}

.heading_01.products::before {
	background-image: url(../img/products_heading_bg01.webp);
}

.heading_01.strengths::before {
	background-image: url(../img/strength_heading_bg01.webp);
}

.heading_01.company::before {
	background-image: url(../img/company_heading_bg01.webp);
}

.heading_01.recruit::before {
	background-image: url(../img/recruit_heading_bg01.webp);
}

.heading_01.story::before {
	background-image: url(../img/story_heading_bg01.webp);
}

.heading_01.sustainability::before {
	background-image: url(../img/sustainability_heading_bg01.webp);
}

.heading_01.contact::before,
.heading_01.policy::before {
	z-index: -1;
	background: var(--color_basicblue);
}

.heading_01 h1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1;
	position: relative;
	max-width: 1280px;
	height: 100%;
	margin-top: 15px;
	color: var(--color_white);
}

.heading_01.contact h1,
.heading_01.policy h1 {
	margin-top: 0;
	letter-spacing: 0.03em;
}

.heading_01 h1 span {
	display: block;
}

.heading_01 h1 span:first-of-type {
	line-height: 1.04;
}

.heading_01 h1 span:last-of-type {
	margin-top: 15px;
	letter-spacing: 0.03em;
}

/* 中間サイズ */
@media screen and (min-width: 769px) and (max-width: 1100px) {
	.heading_01 {
		margin-top: 85px;
	}
}

/* spサイズ */
@media screen and (max-width: 768px) {
	.heading_01 {
		height: 25.64vw;
		margin: 85px auto 12.82vw;
		/*margin-top: 13.84vw;*/
	}

	.heading_01.sustainability {
		height: 82.05vw;
	}

	.heading_01.sustainability::before {
		background-image: url(../img/sustainability_heading_bg02.webp);
	}

	.heading_01.error {
		height: 5.12vw;
	}

	.heading_01 h1 {
		margin-top: 1.02vw;
	}

	.heading_01 h1 span:first-of-type {
		line-height: 1.27;
	}

	.heading_01 h1 span:last-of-type {
		margin-top: 1.02vw;
	}
}

@media screen and (max-width: 612px) {
	.heading_01 {
		margin-top: 13.84vw;
	}
}

/*----------------------------------------
	heading_02 (見出し / テキスト上線)
-----------------------------------------*/

.heading_02 {
	max-width: 1056px;
	width: 82.5%;
	margin: 0 auto 51px;
}

.heading_02 .font36_24 {
	position: relative;
	padding-top: 33px;
	color: var(--color_raisinblack);
	letter-spacing: 0.04em;
	text-align: center;
}

.heading_02 .font36_24::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 230px;
	height: 4px;
	background: var(--color_pointgold);
}

@media screen and (max-width: 768px) {
	.heading_02 {
		width: 89.744%;
		margin: 12.82vw auto 9.23vw;
	}

	.heading_02 .font36_24 {
		padding-top: 7.17vw;
	}

	.heading_02 .font36_24::before {
		width: 28.2vw;
		height: 0.51vw;
	}
}

/*----------------------------------------
	heading_03 (見出し / テキスト左縦線)
-----------------------------------------*/

.heading_03 .font24_20,
.heading_03 .font28_18,
.heading_03 .font28_20 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 74px;
	padding-left: 20px;
	border-left: 6px solid var(--color_pointgold);
	letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
	.heading_03 .font24_20,
	.heading_03 .font28_18,
	.heading_03 .font28_20 {
		min-height: 6.92vw;
		padding-left: 2.56vw;
		border-left-width: 1.02vw;
	}
}

/*----------------------------------------
	heading_04 (見出し / テキスト左横線) 
-----------------------------------------*/

.heading_04 .font16_14,
.heading_04 .font24_16 {
	display: flex;
	align-items: center;
	letter-spacing: 0.03em;
}

.heading_04 .font16_14::before {
	content: '';
	width: 30px;
	height: 3px;
	margin: 3px 14px 0 0;
	background: var(--color_pointgold)
}

.heading_04 .font24_16::before {
	content: '';
	width: 30px;
	height: 3px;
	margin: 3px 25px 0 0;
	background: var(--color_pointgold);
}

.heading_04 span {
	display: flex;
	align-items: center;
}

.heading_04 span::before {
	content: '';
	width: 30px;
	height: 30px;
	margin-right: 8px;
	background-position: center;
	background-size: 30px 30px;
	background-repeat: no-repeat;
}

.heading_04 span.icon_white::before {
	background-image: url(../img/c_ic_search_white.svg);
}

.heading_04 span.icon_blue::before {
	background-image: url(../img/c_ic_search_basicblue.svg);
}

@media screen and (max-width: 768px) {
	.heading_04 .font24_16::before {
		width: 7.69vw;
		height: 0.51vw;
		margin: 0.51vw 2.56vw 0 0;
	}

	.heading_04 span::before {
		width: 7.69vw;
		height: 7.69vw;
		margin-right: 1.28vw;
		background-size: 7.69vw 7.69vw;
	}
}

/*----------------------------------------
	bg / triangle (背景色 / 三角)
-----------------------------------------*/

[class^='bg_'] {
	overflow: hidden;
	position: relative;
	padding: 47px 0 100px;
}

/* サイズ大*/
[class^='bg_'].triangle {
	background-size: 62.5vw 39.06vw;
	background-repeat: no-repeat;
	background-position: right bottom;
}

/* サイズ小 */
[class^='bg_'].triangle-small {
	background-size: 36.32vw 22.65vw;
	background-repeat: no-repeat;
	background-position: right bottom;
}

/* 三角カラー */
.bg_silver.triangle,
.bg_silver.triangle-small {
	background-image: url(../img/c_bg_triangle_white.svg);
}

/* new color */
.bg_basicblue.triangle,
.bg_pointgold.triangle,
.bg_basicblue.triangle-small,
.bg_pointgold.triangle-small {
	background-image: url(../img/c_bg_triangle_blue.svg);
}

.bg_silver.triangle,
.bg_silver.triangle-small {
	background-image: url(../img/c_bg_triangle_white.svg);
}

@media screen and (max-width: 768px) {
	[class^='bg_'] {
		padding: 8.71vw 0 16.15vw;
	}

	[class^='bg_'].triangle,
	[class^='bg_'].triangle-small {
		background-size: 62.3vw 38.71vw;
	}
}

/*----------------------------------------
	card_box (カードレイアウト)
-----------------------------------------*/

/* 共通 */
.card_box {
	display: grid;
	z-index: 2;
	position: relative;
	max-width: 1056px;
	width: 82.5%;
	margin: 47px auto 0;
}

.card_box.gray {
	gap: 2px;
}

.card_3column.white {
	gap: 30px;
}

/* カード色 */
.card_box.gray .card {
	background: var(--color_flashwhite);
}

.card_box.white .card {
	background: var(--color_white);
}

.card a {
	display: grid;
	grid-template-columns: 1fr;
	align-content: space-between;
	position: relative;
	width: 100%;
	height: 100%;
}

/* hover */
@media (hover: hover) {
	.card_box .card a::after {
		content: '';
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0 solid var(--color_pointgold);
		transition: opacity .2s ease-out, border .2s ease-out;
	}

	.card_box .card a:hover::after {
		opacity: 1;
		border: 7px solid var(--color_pointgold);
		transition: opacity .2s ease-out, border .2s ease-out;
	}
}

.card figure {
	margin: auto;
}

.card figure img {
	height: 100%;
	object-fit: contain;
}

.card p {
	padding: 0 6%;
	color: var(--color_raisinblack);
	letter-spacing: 0.03em;
	text-align: center;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.card a>img {
	width: 24px;
	height: 17px;
	margin: 0 auto;
}

.card p>br.sp {
	display: none;
}

/* 3カラム */
.card_3column {
	grid-template-columns: repeat(3, 1fr);
}

/* 4カラム */
.card_4column {
	grid-template-columns: repeat(4, 1fr);
}

/* 中間サイズ */
@media screen and (min-width: 769px) and (max-width: 1280px) {
	.card .font16_13 {
		font-size: 1.25vw;
		letter-spacing: 0;
	}

	.card .font18_14 {
		font-size: 1.4vw;
	}

	.card .font20_14,
	.card .font20_16 {
		font-size: 1.56vw;
	}

	.card a>img {
		width: 1.87vw;
		height: 1.32vw;
	}
}

/* spサイズ */
@media screen and (max-width: 768px) {
	/* 共通 */
	.card_box {
		grid-template-columns: repeat(2, 1fr);
		width: 89.744%;
		margin-top: 9.23vw;
	}

	/* グレーカード */
	.card_box.gray {
		width: calc(100% - 2px * 2);
	}

	/* 矢印 */
	.card a>img {
		width: 4.35vw;
		height: 3.07vw;
	}

	.card p>br.sp {
		display: block;
	}
}

/*----------------------------------------
	製品分野から探す / 企業情報
-----------------------------------------*/

/* 製品分野から探す */
.card_3column.gray .card {
	aspect-ratio: 1 / 0.94;
}

.card_3column.gray .card a {
	padding: 20px 0 30px;
}

.card_3column.gray .card figure {
	max-height: 190px;
	height: 14.84vw;
	aspect-ratio: 1.63 / 1;
}

/* 企業情報 */
.card_3column.white .card {
	aspect-ratio: 0.94 / 1;
}

.card_3column.white figure {
	width: 100%;
	max-height: 220px;
	height: 17.18vw;
	aspect-ratio: 1.5 / 1;
}

/* 中間サイズ */
@media screen and (min-width: 769px) and (max-width: 1280px) {
	/* 製品分野から探す */
	.card_3column.gray .card a {
		padding: 1.56vw 0 2.34vw;
	}
}

@media screen and (max-width: 768px) {
	/* 製品分野から探す */
	.card_3column.gray .card {
		aspect-ratio: 1 / 1.083;
	}

	.card_3column.gray .card a {
		padding: 2.82vw 0 3.58vw;
	}

	.card_3column.gray .card figure {
		max-height: initial;
		height: 26.66vw;
	}

	/* 企業情報 */
	.card_box.card_3column.white {
		gap: 2.56vw;
	}

	.card_3column.white figure {
		width: 100%;
		max-height: 60vw;
		height: 100%;
	}
}

/*----------------------------------------
	news (テキスト)
-----------------------------------------*/

.news_date {
	color: var(--color_raisinblack);
	letter-spacing: 0.03em;
}

.news_tag {
	width: 100px;
	color: var(--color_white);
	letter-spacing: 0.02em;
	text-align: center;
}

.notice .news_tag {
	background: var(--color_basicblue);
}

.technology .news_tag {
	background: var(--color_pointgold);
}

.news_label {
	display: flex;
	gap: 12px;
	align-items: center;
	color: var(--color_raisinblack);
	letter-spacing: 0.03em;
}

.news_label::before {
	content: '';
	width: 30px;
	height: 2px;
}

.notice .news_label::before {
	background: var(--color_basicblue);
}

.technology .news_label::before {
	background: var(--color_pointgold);
}

.news_new {
	letter-spacing: 0.02em;
	color: var(--color_red);
	border: 1px solid var(--color_red);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45px;
	height: 20px;
}

.news_title {
	color: var(--color_raisinblack);
	letter-spacing: 0.03em;
}

.news_title span.browser,
.news_title span.pdf {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-bottom: -0.5em;
	background-position: center;
	background-size: 30px 30px;
	background-repeat: no-repeat;
}

.news_title span.browser {
	background-image: url(../img/c_ic_browser_basicblue.svg);
}

.news_title span.pdf {
	background-image: url(../img/c_ic_pdf_red.svg);
}

@media screen and (max-width: 768px) {
	/* 共通 */
	.news_tag {
		width: 25.64vw;
	}

	.news_label {
		gap: 3.07vw;
	}

	.news_new {
		width: 11.53vw;
		height: 5.12vw;
	}

	.news_label::before {
		width: 7.69vw;
		min-height: 2px;
		height: 0.51vw;
	}

	.news_title span.browser,
	.news_title span.pdf {
		width: 6.15vw;
		height: 6.15vw;
		margin-bottom: -0.6em;
		background-size: 6.15vw 6.15vw;
	}
}

/*----------------------------------------
	pagination
-----------------------------------------*/

.pagination {
	display: flex;
	gap: 18px;
	justify-content: center;
	align-items: center;
	margin-top: 60px;
}

.pagination li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 40px;
}

.pagination .prev,
.pagination .next {
	background-position: center;
	background-size: 30px 30px;
	background-repeat: no-repeat;
}

.pagination .prev {
	margin-right: calc(50px - 18px);
	background-image: url(../img/c_ic_arw_l_m_basicblue.svg);
}

.pagination .next {
	margin-left: calc(50px - 18px);
	background-image: url(../img/c_ic_arw_r_m_basicblue.svg);
}

.pagination .current {
	position: relative;
}

.pagination .current:first-of-type {
	margin-left: 82px;
}

.pagination .current:last-of-type {
	margin-right: 82px;
}

.pagination .current::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color_basicblue);
}

.pagination .omitted {
	position: relative;
}

.pagination .omitted::before {
	content: '…';
	position: absolute;
	bottom: 0.4em;
}

.pagination .disabled a {
	pointer-events: none;
}

.pagination a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.04em;
}

/* hover */
@media (hover: hover) {
	.pagination li:not(.disabled) {
		transition: opacity var(--transition02secEaseout);
	}

	.pagination li:not(.disabled):hover {
		opacity: 0.6;
	}

	.pagination li:not(.disabled).prev,
	.pagination li:not(.disabled).next {
		transition: opacity var(--transition02secEaseout);
	}

	.pagination li:not(.disabled).prev:hover,
	.pagination li:not(.disabled).next:hover {
		opacity: 0.6;
	}
}

@media screen and (max-width: 768px) {
	.pagination {
		gap: 0;
		justify-content: space-around;
		margin-top: 10.25vw;
	}

	.pagination li {
		width: calc(100% / 10);
		height: 10.25vw;
	}

	.pagination .prev,
	.pagination .next {
		margin: 0;
		background-size: 7.69vw 7.69vw;
		flex: 1;
	}

	.pagination .current:first-of-type:not(:last-of-type) {
		flex: 1;
	}

	.pagination .current:last-of-type:not(:first-of-type) {
		flex: 1;
	}

	.pagination .current::before {
		display: none;
	}

	.pagination .prev a,
	.pagination .next a {
		max-width: 8.97vw;
	}

	.pagination .current a {
		position: relative;
	}

	.pagination .current:first-of-type {
		padding-left: 10%;
		margin: 0 auto;
	}

	.pagination .current:last-of-type {
		padding-right: 10%;
		margin: 0 auto;
	}

	.pagination .current:first-of-type a {
		max-width: 8.97vw;
		margin: 0 0 0 auto;
	}

	.pagination .current:last-of-type a {
		max-width: 8.97vw;
		margin: 0 auto 0 0;
	}

	.pagination .current a::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 5.12vw;
		height: 2px;
		transform: translateX(-50%);
		background-color: var(--color_basicblue);
	}
}

/*----------------------------------------
	tag_list (製品タグリスト)
-----------------------------------------*/

.tag_list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 4px;
}

.tag_list li {
	border-radius: 10em;
}

.tag_list a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	letter-spacing: 0.03em;
}

/* サイズ */
.tag_list.tag-l a {
	padding: 4.5px 20px;
	letter-spacing: 0.03em;
}

.tag_list.tag-s li {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 3px 21px;
	letter-spacing: 0.03em;
}

/* カラー */
.tag_list.tag_silver li {
	border: 1px solid var(--color_silver);
	background: var(--color_white);
}

/* new color */
.tag_list.tag_basicblue li,
.tag_list.tag_pointgold li {
	color: var(--color_white);
}

.tag_list.tag_basicblue li {
	background: var(--color_basicblue);
}

.tag_list.tag_pointgold li {
	background: var(--color_pointgold);
}

@media screen and (max-width: 768px) {
	.tag_list {
		gap: 1.02vw;
	}

	/* サイズ */
	.tag_list.tag-l a {
		padding: 1.278vw 3.07vw;
	}

	.tag_list.tag-s li {
		padding: 0.77vw 2.56vw;
	}
}