@charset "utf-8";
/*----------------------------------------------------
	カスタムプロパティ
----------------------------------------------------*/
:root {
  --mainSize: 1100; /*デザインのアートボードサイズ*/
  --mainColor: #ff8201;
  --subColor: #0081ff;
  --grayColor: #f1f1f1;
  --17px: clamp(1.6rem, 100vw * 17 / var(--mainSize), 1.7rem);
  --18px: clamp(1.6rem, 100vw * 18 / var(--mainSize), 1.8rem);
  --20px: clamp(1.8rem, 100vw * 20 / var(--mainSize), 2.0rem);
  --24px: clamp(2.2rem, 100vw * 28 / var(--mainSize), 2.8rem);
}
.text17 { font-size: var(--17px, 1.7rem); }
.text18 { font-size: var(--18px, 1.8rem); }

/*----------------------------------------------------
	フォントサイズ設定
----------------------------------------------------*/
body { font-size: clamp(1.4rem, 100vw * 16 / var(--mainSize), 1.6rem); }

/*----------------------------------------------------
	ボックスサイズ設定
----------------------------------------------------*/
.main { width: min(100%, var(--mainSize) * 1px); margin-inline: auto; line-height: 1.8; }
.main ol, .main ul { margin: 1em 0 1em 2em; }
.wrap { width: min(100% - 4rem, 1100px); margin-inline: auto; }
.wrapSmall { width: min(100% - 4rem, 800px); margin-inline: auto; }
.wrapCenter { max-inline-size: max-content; margin-inline: auto; }
.inner { padding: 5em 0; }
@media (max-width: 767px) { /* SP */
.inner { padding: 3em 0; }
}

/*----------------------------------------------------
	header
----------------------------------------------------*/
.header__inner { width: min(100%, 1400px); margin-inline: auto; }
#check { display: none; }

.language { color: #ccc; margin-bottom: 1em; text-align: right; font-size: 2.2rem; font-family: 'Anuphan', sans-serif; letter-spacing: .15em; }
.language a { color: #ccc; }
.language a:hover { color: var(--mainColor); }
.language .-on { color: var(--mainColor); }

@media (min-width: 768px) { /* PC */
.header { position: sticky; top: 0; margin: 0 auto; z-index: 100; background: #fff; }
.header__inner { padding: 0; display: flex; justify-content: space-between; align-items: flex-end; max-height: 200px; }
.header__link { display: block; margin-top: -200px; padding-top: 200px; } /*pc 追従ヘッダーの高さ*/
.headerLogo { width: 26%; text-align: right; padding-left: 1em; padding-top: 2.5em; margin-bottom: auto; }
.headerNav { width: 46%; }
.headerContact { width: 17%; background: var(--mainColor); height: 100%;　margin-top: auto; }

header .nav__list { display: flex; justify-content: space-around; list-style: none; text-align: center; letter-spacing: .1em; text-indent: .1em; font-weight: bold; margin-bottom: 3.2em; }
header .nav__item { position: relative; z-index: 1; white-space: nowrap; font-size: clamp(1.3rem, 100vw * 17 / 1400, 1.7rem); }
header .nav__item.-none { display: none; }
header .nav__item span { font-size: 1.2rem; line-height: 3.0; color: var(--subColor); }
header .nav__item::after {
  content: '';
  position: absolute;
  bottom: -.5em;
  left: 15%;
  width: 70%;
  height: 2px;
  background: #000;
  transition: all .3s;
  transform: scale(1, 1);
  transform-origin: center top;
}
header .nav__item:hover::after { transform: scale(1, 1); background: var(--mainColor); }
header .nav__item:hover .nav__sublist { visibility: visible; opacity: 1; }
header .nav__link { color: #000; padding-left: .25em; padding-right: .25em; text-decoration: none; display: block; }
header .nav__link:hover { color: var(--subColor); transition: all .3s; }
header .nav__item:hover span { color: #000; transition: all .3s; }

header .headerContact .nav__item span { color: #000; }
header .headerContact .nav__item::after { background: #fff; }
header .headerContact .nav__item:hover::after { background: var(--subColor); }
header .headerContact .nav__link { color: #fff; }
header .headerContact .nav__link:hover { color: var(--subColor); }
header .headerContact .nav__item:hover span { color: #fff; }
}
@media (max-width: 767px) { /* SP */
.header { position: sticky; top: 0; z-index: 100; background: #fff; }
.header__inner { padding: 1em; height: 100px; }
.header__link { display: block; margin-top: -100px; padding-top: 100px; }/*sp 追従ヘッダーの高さ*/
.headerLogo { width: 80%; text-align: center; }
header .nav__list { width: 100vw; height: 100vh; position: fixed; top: 0; right: -100%; z-index: 2; background: rgba(0,0,0,0.8); list-style: none; text-align: center; padding: 2em 0; }
header .nav__item:first-child { margin: 2em 0 .5em; }
header .nav__item { font-size: 2.0rem; padding: .5em 0; }
header .nav__item span { font-size: 1.6rem; line-height: 2.0; color: var(--subColor); }
header .nav__link { color: #fff; text-decoration: none; display: block; }

header .nav__spButton { background: var(--mainColor) url("../images/btn.png") no-repeat; display: block; width: 50px; height: 50px; position: absolute; top: 10px; right: 10px; cursor: pointer; z-index: 200; }

#check:checked ~ .nav__list { right: 0; transition: .4s; }
#check:checked ~ .nav__spButton { background-position: -50px 0; z-index: 300; }

.language { text-align: center; margin-top: .5em; }
}

/*----------------------------------------------------
	pageTop
----------------------------------------------------*/
.pageTop { text-align: center; }

/*----------------------------------------------------
	footer
----------------------------------------------------*/
.footer__inner { width: min(100% - 4em, 900px); margin-inline: auto; clear: both; }
footer { margin-top: 3em; }
footer .nav__list { list-style: none; column-count: 2; font-weight: bold; line-height: 1.8; margin-left: auto;}
footer .nav__item { border-left: var(--subColor) 2px solid; }
footer .nav__link { display: block; color: #000; text-decoration: none; padding: 0 0 0 1em; }
.footer__add { font-size: 1.4rem; margin-top: 1.8em; line-height: 1.3; }
.footer__tel { font-size: 3.6rem; font-family: 'Anuphan', sans-serif; color: var(--subColor); margin-bottom: 1.5em; padding-top: .3em; }
.footerCopyright { font-size: 1.2rem; text-align: center; margin: 2em 0; border-top: #999 1px solid; padding-top: 1.5em; }

.footer__recruit { 
  background: var(--mainColor) url("../images/recruit.jpg") no-repeat center bottom;
  padding: 5em 0;
}
.footer__recruit__wrap { width: min(100% - 2em, 1100px); margin-inline: auto; }
.footer__recruit__text { width: min(100%, 500px); margin-left: auto; color: #fff; }
.footer__recruit__en { font-size: clamp(7.0rem, 100vw * 120 / var(--mainSize), 12.0rem); font-family: 'Anuphan', sans-serif; }
.footer__recruit__jp { font-size: clamp(2.5rem, 100vw * 40 / var(--mainSize), 4.0rem); letter-spacing: .1em; font-weight: bold; margin-bottom: .5em; }
.footer__recruit__contents { line-height: 1.3; margin-top: .3em; }
.footer__recruit__button {
  display: inline-block;
  padding: 1em 2em;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  transition: .25s;
  border-radius: 100vh;
}
.footer__recruit__button:focus,
.footer__recruit__button:hover {
  background: #fff;
  border-color: currentColor;
  color: var(--mainColor);
}

.top .footer__recruit { padding-top: 10em; }

@media (min-width: 768px) { /* PC */
.footer__inner { display: flex; justify-content: space-between; align-items: flex-start; }
.footerLogo { margin-right: 3.5em; }
.footerContact { display: none; }
}
@media (max-width: 767px) { /* SP */
.footer__tel { margin-bottom: .5em; }
footer .nav__list { margin-bottom: 1em; }
.footerCopyright { line-height: 1.3; }

.footer__recruit { background: var(--mainColor) url("../images/recruit.jpg") no-repeat center bottom / cover; padding: 1.5em 0 2em; }
.footer__recruit__text { margin-inline: auto; text-shadow: 0px 0px 20px #000; }
.footer__recruit__jp { margin: .2em 0; }
.footer__recruit__contents { margin-top: 0; }
.footer__recruit__button { background: rgba(0,0,0,0.3); }
}

/*----------------------------------------------------
	line
----------------------------------------------------*/
hr { height: 0; border: 0; border-top: 1px solid #aab4c8; margin: 2em 0; }

/*----------------------------------------------------
	link
----------------------------------------------------*/
a { text-decoration: none; }

/*----------------------------------------------------
	共通タイトル
----------------------------------------------------*/
/*タイトル*/
.title { background-repeat: no-repeat; background-position: center; background-size: cover; color: #fff; }
.title.-noimage { background-color: var(--subColor); }
.title.-company { background-image: url("../../company/images/title_company.jpg"); }
.title.-products { background-image: url("../../products/images/title_products.jpg"); }
.title.-technology { background-image: url("../../technology/images/title_technology.jpg"); }
.title.-inquiries { background-image: url("../../inquiries/images/title_inquiries.jpg"); }
.title.-privacy { background-image: url("../../privacy/images/title_privacy.jpg"); }
.title__inner { width: min(100% - 4em, var(--mainSize)); margin-inline: auto; }
.title__text {
  text-align: center;
  padding: 3.3em 0 2em;
  font-weight: normal;
}
.title__mainText { font-size: 5.0rem; font-family: 'Anuphan', sans-serif; }
.title__subText { font-size: 1.5rem; letter-spacing: .1em; text-indent: .1em; font-weight: bold; }
@media (max-width: 767px) { /* SP */
.title__text { padding: 1.5em 0; font-weight: normal; }
.title__mainText { font-size: 4.0rem; }
.title__subText { font-size: 1.5rem; }
}

/*----------------------------------------------------
	back
----------------------------------------------------*/
.full { margin: 0 calc(50% - 50vw); width: 100vw; } /*全幅*/
.fullBack { margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); width: 100vw; } /*背景全幅*/
.fullRight { margin-right: calc(50% - 50vw); } /*右側へ要素を広げる*/
.fullLeft { margin-left: calc(50% - 50vw); } /*左側へ要素を広げる*/
.fullBoxRight { flex: 1; margin-right: calc(50% - 50vw); } /*右側へ要素を広げる*/
.fullBoxLeft { flex: 2; margin-left: calc(50% - 50vw); } /*左側へ要素を広げる*/