@charset "utf-8";

/* 
-------------------------------------------
custom property
-------------------------------------------
*/
@import url(./../base/var.css);

/* 
-------------------------------------------
メインビジュアル sliderの設定
-------------------------------------------
*/
/* splide pagnation */
.splide__arrow.splide__arrow--next,
.splide__arrow.splide__arrow--prev {
	display: none;
}

/* splide pagnation border */
.splide__pagination__page {
	background-color: var(--sliderline-color);
	border-radius: 0;
	opacity: 1;
	height: 2px;
	margin: 24px 6px;
	width: 56px;
}

.splide__pagination__page.is-active {
	transform: scale(1.1);
	background-color: var(--accent-color);
}


/* メインビジュアル画像の設定 */
.splide__slide img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* 
-------------------------------------------
slider image style
-------------------------------------------
*/
.pc__slider {
	display: block;
}

.sp__slider {
	display: none;
}

.splide__slide.is-active.is-visible .img-slider:hover {
	opacity: .6;
	transition: all .3s;
}

/* 
-------------------------------------------
slider image style shadow
-------------------------------------------
*/
.mv-area__container .splide__slide.img-shadow  {
	position: relative;
}

.mv-area__container .splide__slide.img-shadow::before {
	content: '';
	/* ↓暗いオーバーレイを半透明で配置 */
	background-color: rgba(0, 0, 0, 0.1);
	/* ↓全体を覆うように配置 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.mv-area__container .splide__slide.img-shadow.miniature::before {
	background-color: rgba(0, 0, 0, 0.2);
}


/* メインビジュアル　キャッチコピーの設定 */
.h-mv {
	position: relative;
}

.slide_text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
}

.h-copy {
	min-width: 1136px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: auto;
}

.h-copy h2,
.h-copy p {
	color: var(--font-footer-color);
}

/* 大きい文字 */
.h-copy h2 {
	font-size: 4rem;
	font-weight: 600;
	line-height: 1;
}

/* 小さい文字 */
.h-copy p:not(.l-button) {
	font-size: 1.5rem;
	font-weight: 500;
	margin: 16px 0 48px;
	font-feature-settings: 'palt';
	letter-spacing: 1px;
}


/* 
-------------------------------------------
newsの設定
-------------------------------------------
*/
/* tabの設定 */
.m-news__tabs {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 0 0 38px 0;
	text-align: left;
}

.m-news__tabs--item {
	width: 100%;
	border-bottom: 4px solid #191919;
	opacity: .2;
}

.m-news__tabs--item:hover {
	color: #191919;
	border-bottom: 4px solid #d6151f;
	opacity: 1;
	transition: all .4s ease;
}

.m-news__tabs--item.active {
	color: #191919;
	border-bottom: 4px solid #d6151f;
	opacity: 1;
}

.m-news__tabs--item a small {
	display: block;
	margin: 6px 0 24px;
	font-size: 1.5rem;
	font-weight: bold;
}


/* tabの文字設定 */
.m-news__head {
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1;
}

.m-news__head.alphabet {
	margin-bottom: 24px;
}

/* m-news__contentsの設定 */
.m-news__contents {
	display: none;
	opacity: 0;
}

.m-news__contents.is-active {
	display: block;
	animation-name: displayAnime;
	animation-direction: 2s;
	animation-fill-mode: forwards;
	margin: 0 0 42px 0;
}

@keyframes displayAnime {
	from{
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* お知らせの横並び */
.m-news__list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 0 40px 0;
}

.m-news__item dl {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	padding: 10px 0;
	text-align: left;
}

.m-news__item dl dt {
	width: 100%;
	display: flex;
	flex: 1;
	justify-content: flex-start;
	align-items: flex-start;
}

.m-news__item dl dt time {
	flex: 1;
}

.m-news__item dl dt span {
	flex: 2;
	text-align: center;
}

.m-news__item dl dd {
	width: 100%;
	flex: 4;
	margin: 0 32px 0 0;
}

/* お知らせのマウスオーバー */
.m-news__item > a {
	display: block;
	position: relative;
	color: #191919;
	width: calc(100% + 32px);
	margin: 0 -16px;
	padding: 0 calc(32px - 16px);
	border-radius: 16px;
}

.m-news__item > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 16px;
	height: 16px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: all .2s ease-in;
}

.m-news__item > a:hover::after {
	opacity: 1;
	border: solid 3px #ffffff;
	color: #fff;
}

.m-news__item a:hover {
	background-color: #d6151f;
	transition: all .2s ease;
}

.m-news__item a:hover dl dt,
.m-news__item a:hover dl dd {
	color: var(--font-footer-color) !important;
}


/* 
-------------------------------------------
m-cardの設定
-------------------------------------------
*/
.m-card__list {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
}

.m-card__item {
	width: 100%;
	overflow: hidden;
}

.m-card__link {
	display: block;
	position: relative;
	text-decoration: none;
	color: #fff;
	transition: all .3s;
	overflow: hidden;
}

.m-card__body {
	position: absolute;
	max-width: 1136px;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: left;
}

/* 各バナーの文字設定 */
.m-card__body h2,
.m-card__body p {
	color: var(--font-footer-color);
}

/* バナータイトルの設定 */
.m-card__body h2 {
	font-size: 3.375rem;
	font-weight: 600;
	line-height: 1;
	margin: 0 0 32px 0;
}

.m-card__title {
	font-size: 1.5rem;
	font-weight: bold;
	margin: 8px 0 38px
}



/*
---------------main nav 各画像の読み込み設定----------------
*/
.m-card__link .product,
.m-card__link .technology,
.m-card__link .ir,
.m-card__link .csr,
.m-card__link .about,
.m-card__link .recruit,
.m-card__link .contact {
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: all .3s;
	height: 434px;
	position: relative;
}

.m-card__link:hover .product,
.m-card__link:hover .technology,
.m-card__link:hover .ir,
.m-card__link:hover .csr,
.m-card__link:hover .about,
.m-card__link:hover .recruit,
.m-card__link:hover .contact {
	transform: scale(1.05);
}

/* product */
.m-card__link .product {
	background-image: url(./../../img/top/contents_product_pc.webp);
}

/* technology */
.m-card__link .technology {
	background-image: url(./../../img/top/contents_technology.webp);
}

/* ir */
.m-card__link .ir {
	background-image: url(./../../img/top/contents_ir.webp);
}

/* csr */
.m-card__link .csr {
	background-image: url(./../../img/top/contents_csr.webp);
}

/* about */
.m-card__link .about {
	background-image: url(./../../img/top/contents_about.webp);
}

/* recruit */
.m-card__link .recruit {
	background-image: url(./../../img/top/contents_recruit.webp);
}

/* contact */
.m-card__link .contact {
	background-image: url(./../../img/top/contents_contact.webp);
}


.m-card__link .product::before,
.m-card__link .technology::before,
.m-card__link .ir::before,
.m-card__link .csr::before,
.m-card__link .about::before,
.m-card__link .recruit::before,
.m-card__link .contact::before {
	content: '';
	/* ↓暗いオーバーレイを半透明で配置 */
	background-color: rgba(0, 0, 0, 0.3);
	/* ↓全体を覆うように配置 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}


/* 
-------------------------------------------
m-seal-navの設定
-------------------------------------------
*/
.m-seal-nav .sealQuickSearcher {
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	position: relative;
}

.m-seal-nav .sealQuickSearcher::after {
	content: '';	
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: +1;
	transition: all .3s;
	background-image: url(../../img/top/sealQuickSearcher.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

.m-seal-nav .sealQuickSearcher:hover::after {
	opacity: 0;
}


/* 
-------------------------------------------
SPとPC表示の設定の設定
-------------------------------------------
*/
.pc__view,
.m-seal-nav a .pc__view {
	display: block;
}

.sp__view,
.m-seal-nav a .sp__view {
	display: none;
}

/* 
-------------------------------------------
GDPR設定
-------------------------------------------
*/
.gdpr {
	width: 100%;
	max-width: 1136px;
	height: 144px;
	margin: 0 auto;
	background-color: #f5f5f5;
	box-shadow: 0 0 16px rgba(25, 25, 25, .3);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 80px;
 gap: 32px;
	position: fixed;
	bottom: 21px;
	left: 50%;
	z-index: 10;
	transform: translateX(-50%);

	font-size: 100%;
	font-display: swap;
}

.gdpr__text p {
	width: 100%;
	text-align: left;
}

/* 個人情報保護方針の設定 */
.gdpr__link {
	color: var(--accent-color);
	text-decoration: underline;
}


/* 同意ボタンの設定 */
.gdpr__btn {
	width: 30%;
	display: flex;
	align-items: center;
	justify-content: right;
}

.gdpr__btn button {
	background-color: #d6151f;
	color: var(--font-footer-color);
	display: block;
	padding: 12px 20px 14px;
	border-radius: 40px;
	cursor: pointer;
	border: none;
}

.gdpr__btn button:hover {
	opacity: .6;
}

/* GDPR js連動　同意ボタンを押したら非表示にする */
.gdpr.close {
	display: none;
}


/* 
-------------------------------------------
901～1180pxだった場合の設定
-------------------------------------------
*/
@media screen and (min-width: 901px) and (max-width: 1180px) {

	/* メインビジュアルの設定 */
	.h-copy {
		top: 8.375%;
		max-width: 1136px;
		min-width: 0;
		width: 88.8%;
	}

	.m-card__body {
		max-width: 1136px;
		min-width: 0;
		width: 88.8%;
	}

	/* 文字サイズの設定 */
	.h-copy h2,
	.m-card__body h2 {
		font-size: 	2.625rem;
	}

	.h-copy p:not(.l-button) {
		font-size: 1.3125rem;
	}

	/* GDPR */
	.gdpr {
		width: 88.8%;
	}

	.gdpr__btn {
		width: 20%;
	}

}


/* 
-------------------------------------------
width900までの設定
-------------------------------------------
*/
@media screen and (max-width: 900px){

	/* splideの画像調整 */
	.splide__slide img {
		width: 100%;
		height: 667px;
		object-fit: cover;
	}

	.splide__slide img.sp__slider {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.h-copy {
		padding: 5.6%;
  width: 100%;
		min-width: 100%;
		padding: 5.6%;
	}


	/* tabの設定 */
	.m-news__tabs {
		gap: 15px;
	}

	/* お知らせのレイアウト設定 */
	.m-news__item dl {
		flex-direction: column;
	}

	.m-news__item dl dt time {
		flex: none;
		width: 20%;
	}
	
	.m-news__item dl dt span {
		flex: none;
		width: 40%;
		text-align: center;
	}

	.m-news__item {
		border-bottom: 1px solid #e1e1e1;
		padding: 6px 0 10px;
	}

	.m-news__item:first-of-type {
		padding: 0 0 6px 0;
	}


	/* 文字サイズの設定 */
	/* メインビジュアルの設定 */
	.h-copy h2,
	.m-card__body h2 {
		font-size: 	2.625rem;
	}

	.h-copy p:not(.l-button) {
		font-size: 1.3125rem;
	}


	/* tabの文字設定 */
	.m-news__head {
		font-size: 2.625rem;
		letter-spacing: -.1rem;
	}

	.m-news__tabs--item a small {
		margin: 12px 0 24px;
		font-size: 1.0625rem;
	}


	/* linkエリア */
	/* ここはEN版のみの指定 */
 .m-card__heading {
		margin: 0 0 36px 0;
	}

	.m-card__title {
		font-size: 1.0625rem;
		margin: 12px 0 38px;
	}

	.m-card__body {
		width: 88.8%;
	}


	/*
	---------------main nav 各画像の読み込み設定----------------
	*/
	.m-card__link .product,
	.m-card__link .technology,
	.m-card__link .ir,
	.m-card__link .about,
	.m-card__link .contact {
		height: 0;
		padding-bottom: 68%;
	}

	/* product */
	.m-card__link .product {
		background-image: url(./../../img/top/contents_product_sp.webp);
	}

	/*
	---------------GDPR設定----------------
	*/
	.gdpr {
		width: 88.8%;
		flex-direction: column;
		padding: 20px;
		height: 180px;
		max-width: 90%;

	}

	.gdpr__text p {
		width: 100%;
		font-size: .875rem;
	}

	/* 同意ボタンの設定 */
	.gdpr__btn {
		width: 50%;
		justify-content: center;
		font-size: .875rem;
	}
}

/* 
-------------------------------------------
769～899pxだった場合の設定
-------------------------------------------
*/
@media screen and (min-width: 769px) and (max-width: 899px) {
	/* メインビジュアル */
	.h-mv img {
		height: auto;
		object-fit: contain;
	}

}

/* 
-------------------------------------------
768pxまでの設定
-------------------------------------------
*/
@media screen and (max-width: 768px) {
	/* SPとPC表示の設定 */
	.pc__view,
	.m-seal-nav a .pc__view {
		display: none;
	}

	.sp__view,
	.m-seal-nav a .sp__view {
		display: block;
	}


	/* 
	-------------------------------------------
	slider image style
	-------------------------------------------
	*/
	.pc__slider {
		display: none;
	}
	
	.sp__slider {
		display: block;
	}

	/* news datetime */
	.m-news__item dl dt time {
		width: 100%;
	}
	/* 
	-------------------------------------------
	entrance banner font size
	-------------------------------------------
	*/
	.m-card__body p {
		font-size: 0.875rem;
	}

	/* 
	-------------------------------------------
	sealQuickSearcher
	-------------------------------------------
	*/
	.m-seal-nav .sealQuickSearcher::after {
		content: none;
	}

}

/* 
-------------------------------------------
450pxまでの設定
-------------------------------------------
*/
@media screen and (max-width: 450px) {
	/* 
	-------------------------------------------
	slider line style
	-------------------------------------------
	*/
	.splide__pagination__page {
		width: 42px;
	}

	.splide__slide img.pc__slider,
	.splide__slide img.sp__slider {
		height: auto;
		object-fit: contain;
	}
}