@charset "UTF-8";
/* CSS Document */
#ctsWrapper.pageTop{
	overflow: hidden;
}

/*
	キービジュアル
-----------------------------------------------------------------------------------------------*/
.kvInner{
	position: relative;
	padding-left: 130px;
}
/* ctsArea
============================== */
.kvCtsArea{
	max-width: 1140px;
	margin: 0 auto;
	padding-inline: 35px;
	position: relative;
}
/* コピー周り
============================== */
.kvCatch {
	position: absolute;
	top: 80px;
	right: 135px;
	writing-mode: vertical-rl;
	color: #fff;
	font-family: var(--noto-serif);
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
	font-weight: var(--bold);
	z-index: 100;
	white-space: nowrap;
	z-index: 102;
}
/* コピー周り(英語版)
============================== */
html[lang="en"] .kvCatch {
    writing-mode: horizontal-tb;
	white-space: normal;
	position: absolute;
	top: 480px;
	right: 50px;
}
html[lang="en"] .kvCtsArea {
    position: static; 
}
html[lang="en"] .kvTitMain {
    font-size: 5rem;
    line-height: 1.4;
    font-feature-settings: "palt";
    letter-spacing: 0.6rem;
}
html[lang="en"] .kerning {
    margin-top: 0;
    margin-bottom: 0;
}
html[lang="en"] .titMainKey {
    font-size: 5rem;
}
.kvTitMain{
	font-size: clamp(3.3rem, 5vh, 6.2rem);
	/* font-size: 6.2rem; */
	line-height: 1.4;
	font-feature-settings: "palt";
	letter-spacing: 0.8rem;
}
.titMainKey{
	/* font-size: 9.5rem; */
    font-size: clamp(6.6rem, 8vh, 9.5rem);
}
.kerning{
	margin-top: -4vh;
	margin-bottom: -4vh;
}
/* (繁体中文)
============================== */
html[lang="zh-TW"] .kerning{
	margin-top: 0;
	margin-bottom: -20px;
}
.kvTitSub{
	font-size: clamp(1.8rem, 2vh, 2.8rem);
	/* font-size: 2.8rem; */
	letter-spacing: 0.5rem;
	margin-right: 20px;
}
.KvListWrapper{
	position: relative;
	z-index: 100;
}
.KvImg{
	position: absolute;
	left: -80px;
	bottom: -270px;
	width: 850px;
	z-index: 101;
}
.kvPhRadius{
	clip-path: inset(0px 0px 0px 0px round 500px 0 0px 500px);
	height: 700px;
}

/* Swiper
============================== */

/*
	about
-----------------------------------------------------------------------------------------------*/
.aboutCtsAreaWrapper{
	position: relative;
	padding: 200px 0 260px 0;
}
.aboutCtsArea{
	width: var(--width-base);
    margin: 0 auto;
    padding-inline: 30px;
	display: flex;
	justify-content: flex-start;
	gap: 140px;
}

/* コピー周り
============================== */
.aboutTxtArea{
	font-family: var(--noto-serif);
	writing-mode: vertical-rl;
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: calc((100% - 0px) / 2);
}
/* コピー周り(英語版)
============================== */
html[lang="en"] .aboutTxtArea {
	width: 100%;
    writing-mode: horizontal-tb;
	min-width: 570px;
}

.aboutTxtArea .tit{
	font-size: 4.0rem;
	font-weight: var(--bold);
	line-height: 2;
}

.aboutTxtArea .txt{
	font-size: 1.6rem;
	color: var(--gray);
	font-weight: var(--medium);
	line-height: 3;
}

/* 画像
============================== */
.aboutImgArea{
	width: 100vw;
    margin-right: calc(50% - 50vw);
	min-width: 612px;
	position: relative;
	height: 100%;
}
/* 画像(英語版)
============================== */
html[lang="en"] .aboutImgArea {
    min-width: 570px;
}
.aboutImg{
	position: absolute;
	left: -100px;
	bottom: -120px;
	width: 350px;
	z-index: 100;
}
/* 画像(英語版)
============================== */
html[lang="en"] .aboutPh {
	clip-path: inset(0);
    height: 600px;
    min-width: 570px;
}
@media (any-hover: hover){
}


/*
	company
-----------------------------------------------------------------------------------------------*/
#companyWrapper{
	background: url(../images/ph_top_company_bg.png) no-repeat top / cover;
}
#companyWrapper .ctsArea{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding-block: 160px;
}
/*
	oem
-----------------------------------------------------------------------------------------------*/
#oemWrapper{
	background: url(../images/ph_top_oem_bg.png) no-repeat top / cover;
}
#oemWrapper .ctsArea{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding-block: 160px;
}
.oemTxtArea{
	display: flex;
	flex-direction: column;
	gap: 60px;
}
/* ボタンエリア
============================== */
.oemBtnArea{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* (英語版)
============================== */
html[lang="en"] .oemBtnArea{
	justify-content: flex-start;
	gap: 60px;
}
a[class^="oemLink"],
button[class^="oemLink"] {
   display: flex;
   align-items: center;
   width: 420px;
   min-height: 160px;
   padding-block: 10px;
   padding-inline: 30px 55px;
   font-size: 2.0rem;
   font-weight: 600;
   color: #fff;
   font-family: var(--noto-serif);
   position: relative;
   font-weight: var(--bold);
   border: 1px solid #fff;
}
a[class^="oemLink"]::after,
button[class^="oemLink"]::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 30px;
	display: inline-block;
	width: 30px;
	height: 1px;
	border-radius: 9999px;
	background-color: #fff;
	transition: all 0.4s;
	z-index: 100;
}
a[class^="oemLink"]::before,
button[class^="oemLink"]::before {
	content: "";
	position: absolute;
	top: calc(50% - 2px);
	right: 30px;
	width: 10px;
	height: 1px;
	border-radius: 9999px;
	background-color: #fff;
	transform: rotate(45deg);
	transform-origin: calc(100% - 2px) 50%;
	transition: all 0.4s;
	z-index: 101;
}
.bgBlack::before{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.3;
	z-index: 100;
	mix-blend-mode:multiply;
	transition: all 0.4s;
}
.bgBlack .txt{
	position: relative;
	z-index: 101;
}
.oemLink01{
	background: url(../images/ph_top_oem_img01.png) no-repeat top / cover;
}
.oemLink02{
	background: url(../images/ph_top_oem_img02.png) no-repeat top / cover;
}
.oemLink03{
	background: url(../images/ph_top_oem_img03.png) no-repeat top / cover;
}
@media (any-hover: hover){
	a[class^="oemLink"]:hover,
	button[class^="oemLink"]:hover{
		opacity: 1;
	}
	a[class^="oemLink"]:hover::after,
	button[class^="oemLink"]:hover::after{
		right: 20px;
	}
	a[class^="oemLink"]:hover::before,
	button[class^="oemLink"]:hover::before{
		right: 20px;
	}
	a[class^="oemLink"]:hover .bgBlack::before{
		opacity: 0;
	}
}


/*
	products
-----------------------------------------------------------------------------------------------*/
#productsWrapper .ctsArea{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding-block: 160px;
	width: 100%;
	padding-inline: 0;
}
.productsBox{
	width: 100%;
}
.cmnItemProducts{
	width: 360px;
}
.cmnListProducts a{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-inline: 24px;
}
.productsPhArea{
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	overflow: hidden;
	padding: 0;
	/* padding: 30px; */
}
.cmnTxtProducts{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.cmnTxtProducts .listCategory > li {
	border: 1px solid #000;
	padding: 2px 5px;
	font-size: 1.2rem;
}
.cmnTxtProducts .tit{
	font-size: 2.0rem;
	font-weight: var(--bold);
	letter-spacing: 0.2rem;
}
.cmnSwiperBtn{
	background: var(--gold);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transition: all 0.2s;
}
.listCategory {
    position: static;
}
/* swiper
============================== */
.jsSwiperArticleCard.swiper{
	overflow: visible;
}
.jsSwiperArticleCard .cmnListArticleCard{
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	width: 310px;
}
.jsSwiperArticleCard .swiper-slide{
	transition: all 0.4s;
	/* transform: scale(0.9); */
}
/* .jsSwiperArticleCard .swiper-slide-active {
	transform: scale(1.0);
} */
/* swiper-button */
[class*="jsSwiperBtn"]{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color:var(--gold);
	position: absolute;
	top: 150px;
	border: 1px solid var(--gold);
	transition: all 0.4s;
}
[class*="jsSwiperBtn"]::before,
[class*="jsSwiperBtn"]::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all 0.4s;
	margin-left: -2px;
}
[class*="jsSwiperBtn"]::before{
	width: 10px;
	aspect-ratio: 1/1;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}
.jsSwiperBtnPrev{
	left: 200px;
	transform: rotate(-180deg);
}
.jsSwiperBtnNext{
	right: 200px;
}
@media (any-hover: hover){
	[class*="jsSwiperBtn"]:hover{
		background-color: #fff;
	}
	[class*="jsSwiperBtn"]:hover:before{
		border-top: 2px solid var(--gold);
		border-right: 2px solid var(--gold);
	}
	[class*="jsSwiperBtn"]:hover:after{
		background-color: #fff;
	}
}
/*
	column
-----------------------------------------------------------------------------------------------*/
#columnWrapper{
	background: var(--gold);
}
#columnWrapper .ctsArea{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding-block: 160px;
}
#columnWrapper [class^="cmnTitCenter"] .txt,
#columnWrapper [class^="cmnTitBtmLineCenter"] .txt {
	font-weight: var(--regular);
}
.columnBox{
	display: flex;
    flex-direction: column;
	max-width: var(--width-840);
	margin: 0 auto;
	gap: 60px;
}
.columnArticleArea{
	display: flex;
    flex-direction: column;
	gap: 60px;
}
.columnArticleInner > .tit{
	color: #fff;
	font-family: var(--noto-serif);
	font-size: 3.0rem;
	font-weight: var(--bold);
	margin-bottom: 30px;
	letter-spacing: 0.4rem;
}
.cmnListArticleCard {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 30px;
}
.cmnListArticleCard > li{
    width: 260px;
}
.cmnListArticleCard > li a {
    display: flex;
    flex-direction: column;
    position: relative;
	background: #fff;
	height: 100%;
}
.cmnListArticleCard > li [class*="listCategory"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}
.cmnListArticleCard > li [class*="listCategory"] > .useful,
.cmnListArticleCard > li [class*="listCategory"] > .manufactur {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 5px;
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.0;
}
.cmnListArticleCard > li [class*="listCategory"] > .useful{
    background-color: var(--orange);
}
.cmnListArticleCard > li [class*="listCategory"] > .manufactur {
    background-color: var(--blue);
}
.cmnListArticleCard > li figure.img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 175px;
    margin-bottom: 25px;
    background-color: #fff;
    overflow: hidden;
}
.cmnListArticleCard > li figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: all 0.4s;
}
.cmnListArticleCard > li .TxtArea {
    padding: 0 20px 25px 20px;
}
.cmnListArticleCard > li .tit {
    width: 100%;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: var(--bold);
	letter-spacing: 0.2rem;
	color: var(--gold);
}
.cmnListArticleCard > li .txt {
    margin-bottom: 10px;
    font-size: 1.2rem;
    text-align: justify;
}
.cmnListArticleCard > li .dataBtnArea .date{
    font-size: 1.2rem;
	color: var(--gold-50);
	font-weight: var(--bold);
	font-family: var(--roboto);
}
.cmnListArticleCard > li .btn::after {
    content: "";
    width: 26px;
    aspect-ratio: 1 / 1;
    background-color: var(--gold);
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px auto;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%) scale(0.23);
    transition: all 0.4s;
}
@media (any-hover: hover){
	.cmnListArticleCard > li a:hover{
		opacity: 1;
	}
	.cmnListArticleCard > li a:hover .imgTitArea .ico{
		transform: scale(1);
	}
	.cmnListArticleCard > li a:hover .imgTitArea .tit{
		color: #fff;
	}
	.cmnListArticleCard > li a:hover img{
		transform: scale(1.1);
	}
	.cmnListArticleCard > li a:hover .btn::after{
		background-image: url("../images/ico_arrow_wh.svg");
		transform: translateY(-50%) scale(1);
	}
}

/*
	recruit
-----------------------------------------------------------------------------------------------*/
#recruitWrapper{
	background: url(../images/ph_top_recruit_bg.png) no-repeat top / cover;
}
#recruitWrapper .ctsArea{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding-block: 160px;
}
/*
	news
-----------------------------------------------------------------------------------------------*/
#newsWrapper .cmnListNewsWrapper {
    width: 800px;
	display: flex;
	flex-direction: column;
	gap: 60px;
}
#newsWrapper .ctsArea{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    padding-block: 160px;
}
.cmnListNewsBox{
	display: flex;
	flex-direction: column;
	gap: 30px;
}
#newsWrapper [class^="btnBaseBorder"]{
	width: 100%;
	font-size: 1.6rem;
}
@media screen and (max-width:812px){
	/*
		キービジュアル
	-----------------------------------------------------------------------------------------------*/
	.kvInner{
		position: relative;
		padding-left: 20px;
	}
	/* ctsArea
	============================== */
	.kvCtsArea{
		width: var(--width-base);
		max-width: 500px;
		padding-inline: 20px;
	}
	/* コピー周り
	============================== */
	.kvCatch {
		position: absolute;
		top: 140px;
		right: 20px;
	}
	html[lang="en"] .kvCatch {
		top: 50px;
		right: auto;
		left: 30px;
		max-width: 300px;
	}
	/* (繁体中文)
	============================== */
	html[lang="zh-TW"] .kvCatch {
		top: 280px;
    }
	.kvTitMain{
		font-size: 2.8rem;
		line-height: 1.5;
		letter-spacing: 0.4rem;
	}
	/* コピー周り(英語版)
	============================== */
	html[lang="en"] .kvTitMain {
		font-size: 2.5rem;
	}
	.titMainKey{
		font-size: 3.8rem;
	}
	/* コピー周り(英語版)
	============================== */
	html[lang="en"] .titMainKey {
		font-size: 2.5rem;
	}
	.kerning{
		margin-top: -20px;
		margin-bottom: -20px;
	}
	/* (繁体中文)
	============================== */
	html[lang="zh-TW"] .kerning{
		margin-top: 0;
		margin-bottom: -10px;
}
	.kvTitSub{
		font-size: 1.3rem;
		letter-spacing: 0.4rem;
		margin-right: 10px;
	}
	.KvListWrapper{
		position: relative;
		z-index: 100;
	}
	.KvImg{
		position: absolute;
		left: -30px;
		bottom: -120px;
		width: 100%;
		max-width: 360px;
	}
	.kvPhRadius{
		clip-path: inset(0px 0px 0px 0px round 500px 0 0px 500px);
		height: 500px;
	}
	.kvPh{
		width: 100%;
		min-width: 355px;
	}
		/*
		about
	-----------------------------------------------------------------------------------------------*/
	.aboutCtsAreaWrapper{
		padding: 120px 0 120px 0;
	}
	.aboutCtsArea{
		padding-inline: 30px;
		flex-direction: column;
		gap: 30px;
	}

	/* コピー周り
	============================== */
	.aboutTxtArea{
		display: flex;
		flex-direction: row;
		gap: 30px;
		width: 100%;
	}
	/* コピー周り(英語版)
	============================== */
	html[lang="en"] .aboutTxtArea {
		flex-direction: column;
		min-width: 100%;
	}
	.aboutTxtArea .tit{
		font-size: 2.0rem;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	/* コピー周り(英語版)
	============================== */
	html[lang="en"] .aboutTxtArea .tit{
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.aboutTxtArea .txt{
		font-size: 1.4rem;
		line-height: 2;
		writing-mode: horizontal-tb;
		display: flex;
        justify-content: center;
	}

	/* 画像
	============================== */
	.aboutImgArea{
		min-width: 312px;
	}
	.aboutImg{
		left: -20px;
		bottom: -90px;
		width: 180px;
	}
	/* 画像(英語版)
	============================== */
	html[lang="en"] .aboutImgArea {
		min-width: 100%;
	}
	/* 画像(英語版)
	============================== */
	html[lang="en"] .aboutPh {
		height: 100%;
		min-width: 100%;
	}
		/*
		company
	-----------------------------------------------------------------------------------------------*/
	#companyWrapper .ctsArea{
		gap: 30px;
		padding-block: 60px;
	}
	.cmnListBorderColumn > li > a {
		flex-direction: row;
		gap: 10px;
	}
	.companyList > li{
		width: 100%;
		padding: 30px 10px;
	}
	.companyList > li:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid #000;
	}
	.companyLink::before {
		bottom: auto;
		top: 50%;
		left: auto;
		right: 0px;
		transform: translateY(-50%) rotate(45deg);
	}
	.companyLink::after {
		bottom: auto;
		top: 50%;
		left: auto;
		right: 0px;
		transform: translateY(-50%);
	}
	@media (hover: hover) and (pointer: fine) {
		.companyLink:hover::after{
			left: auto;
			right: 0;
		}
		.companyLink:hover::before{
			left: auto;
			right: 0;
		}
	}
		/*
		oem
	-----------------------------------------------------------------------------------------------*/
	#oemWrapper .ctsArea{
		padding-block: 60px;
	}
	.cmnTitBtmLineLeftOem{
		justify-content: center;
		align-items: center;
	}
	.cmnTitBtmLineLeftOem .tit{
		text-align: center;
		align-items: center;
	}
	.oemTxtArea{
		display: flex;
		flex-direction: column;
		gap: 60px;
	}
	/* ボタンエリア
	============================== */
	.oemBtnArea{
		gap: 20px;
		justify-content: flex-start;
	}
	a[class^="oemLink"],
	button[class^="oemLink"] {
		width: 100%;
		min-height: 100px;
		padding-block: 10px;
		padding-inline: 20px;
		font-size: 1.8rem;
	}
	/* (英語版)
	============================== */
	html[lang="en"] .oemBtnArea{
		gap: 30px;
	}
	a[class^="oemLink"]::after,
	button[class^="oemLink"]::after {
		right: 30px;
		width: 25px;
	}
	a[class^="oemLink"]::before,
	button[class^="oemLink"]::before {
		right: 30px;
		width: 5px;
	}
	.bgBlack .txt{
		font-size: 1.6rem;
	}
	/*
		products
	-----------------------------------------------------------------------------------------------*/
	#productsWrapper .ctsArea{
		padding-block: 60px;
		gap: 30px;
	}
	.cmnItemProducts{
		width: 180px;
	}
	.cmnListProducts a{
		gap: 15px;
		padding-inline: 20px;
	}
	.productsPhArea{
		width: 150px;
		height: 150px;
		/* padding: 20px; */
	}
	.cmnTxtProducts{
		gap: 5px;
	}
	.cmnTxtProducts .listCategory > li {
		border: 1px solid #000;
		padding: 2px 5px;
		font-size: 1.0rem;
	}
		/* (英語版)
	============================== */
	html[lang="en"] .cmnTxtProducts .listCategory > li {
		text-align: center;
	}
	.cmnTxtProducts .txt{
		font-size: 1.0rem;
	}
	.cmnTxtProducts .tit{
		font-size: 1.6rem;
	}
	.cmnSwiperBtn{
		background: var(--gold);
		width: 40px;
		height: 40px;
	}
	/* swiper
	============================== */
	/* swiper-button */
	[class*="jsSwiperBtn"]{
		width: 40px;
		height: 40px;
	}
	[class*="jsSwiperBtn"]::before{
		width: 8px;
		aspect-ratio: 1/1;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.jsSwiperBtnPrev{
		left: 80px;
		transform: rotate(-180deg);
	}
	.jsSwiperBtnNext{
		right: 80px;
	}

	/*
		column
	-----------------------------------------------------------------------------------------------*/
	#columnWrapper .ctsArea{
		gap: 30px;
		padding-block: 60px;
	}
	.columnBox{
		gap: 60px;
	}
	.columnArticleArea{
		gap: 40px;
	}
	.columnArticleInner > .tit{
		font-size:	2.0rem;
		margin-bottom: 20px;
		text-align: center;
	}
	#columnWrapper .cmnListArticleCard {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}
	#columnWrapper .cmnListArticleCard > li{
		width: 100%;
		max-width: 320px;
	}
	#columnWrapper .cmnListArticleCard > li [class*="listCategory"] > li {
		min-width: 52px;
		font-size: 1.0rem;
	}
	#columnWrapper .cmnListArticleCard > li figure.img {
		height: 175px;
		margin-bottom: 20px;
	}
	#columnWrapper .cmnListArticleCard > li .tit {
		font-size: 1.4rem;
	}
	#columnWrapper .cmnListArticleCard > li .txt {
		font-size: 1.2rem;
	}
	#columnWrapper .cmnListArticleCard > li .dataBtnArea .date{
		font-size: 1.1rem;
	}
	/*
		recruit
	-----------------------------------------------------------------------------------------------*/
	#recruitWrapper .ctsArea{
		gap: 30px;
		padding-block: 60px;
	}
	/*
		news
	-----------------------------------------------------------------------------------------------*/
	#newsWrapper .ctsArea {
		gap: 30px;
        padding-block: 60px;
	}
    #newsWrapper [class^="cmnTitBtmLineLeft"] {
		align-items: center;
		text-align: center;
    }
	#newsWrapper [class^="cmnTitBtmLineLeft"] .tit{
        text-align: center;
		align-items: center;
    }
	.newsBox{
		flex-direction: column;
		gap: 30px;
	}
	#newsWrapper .cmnListNewsWrapper {
		width: 100%;
		gap: 30px;
	}
	#newsWrapper [class^="btnBaseBorder"] {
		font-size: 1.2rem;
	}
	.cmnListNewsBox{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}