html {
  font-size: 1px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
a,
li,
h1,
h2,
p {
  text-decoration: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
input,
textarea {
  border: none;
}
input:focus,
textarea:focus {
  outline: none; /* Removes the blue glow outline */
  box-shadow: none; /* Removes shadow for some browsers */
  border: none; /* Optional: removes the border if needed */
}

.container {
  padding-inline: 210rem;
}

a {
  color: #fff;
}

body {
  /* background-color: #000; */
  font-family: "Noto Sans JP";
  color: #fff;
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.header_main {
  height: 88rem;
  padding-left: 30rem;
  justify-content: space-between;
  position: relative;
}

.header_logo img {
  width: 252px;
  height: 60px;
}

header ul {
  height: 100%;
}

header a {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
}

header .li_contact a {
  color: #fff !important;
}

.li_equipment {
  margin-right: 92rem;
}

.li_company {
  margin-right: 44rem;
}

.li_contact {
  display: flex;
  align-items: center;
  height: 100%;
  background-image: url(../assets/img/li_contact.webp);
  width: 218rem;
  justify-content: center;
}

.li_contact > a {
  display: flex;
  align-items: center;
  gap: 12rem;
}

.li_contact img {
  width: 21px;
}

.header_border {
  height: 1rem;
  width: 100%;
  background: linear-gradient(90deg, #f56b2b00, #f56c2b);
}

.d_flex {
  display: flex;
  align-items: center;
}

header a {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-size: 18rem;
  line-height: 30rem;
  letter-spacing: 0;
}

.header_sp {
  display: none;
}

/* ------------------------------------------ */
.page_group {
  background: url(../assets/img/colorful-abstract-lights1.webp);
  width: 100%;
  height: auto;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}

main .page_FV {
  width: 100%;
  height: auto;
  position: relative;
}

.page_FV_sp {
  display: none;
}

.page_FV_scroll {
  position: absolute;
  bottom: -100px;
  right: 0;
  width: 140px;
  z-index: 110;
}

.page_FV_scroll a {
  display: block;
  width: 100%;
  height: 100%;
}

.page_FV_scroll img {
  width: 100%;
  height: 100%;
}

.page_en {
  position: absolute;
  top: 115rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.page_en img {
  filter: none !important;
}

.page_FV_content {
  padding-top: 30%;
  position: relative;
  height: auto;
  z-index: 100;
}

.page_FV_content h2 {
  font-size: 86rem;
  line-height: 106rem;
  letter-spacing: 0.2rem;
  margin-bottom: 30rem;
}

.page_FV_content p {
  font-size: 18rem;
  line-height: 36rem;
  letter-spacing: 0.15rem;
  /* word-break: keep-all; */
}

.header_sp {
  height: 100%;
}

.header_sp img {
  width: 35px;
  height: 23px;
  margin-left: 35px;
}

.header_sp .li_contact {
  position: relative;
  width: 150px;
}

.header_sp .li_contact a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sp_btn,
.sp_btn_sp,
.sp_group {
  width: 89rem;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp_btn span,
.sp_btn_sp span {
  width: 60rem;
  height: 2px;
  background-color: #ec6616;
  position: relative;
}

.sp_btn span::before {
  content: "";
  display: block;
  position: absolute;
  top: -16px;
  left: 0;
  background-color: #ec6616;
  width: 100%;
  height: 2px;
}

.sp_btn span::after {
  content: "";
  display: block;
  position: absolute;
  top: 16px;
  left: 0;
  background-color: #ec6616;
  width: 100%;
  height: 2px;
}

/* =====================about========================= */
.about {
  padding-top: 30%;
}

h1 {
  font-size: 160rem;
  letter-spacing: 0.1rem;
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
}

.page_button_bg {
  position: relative;
  width: fit-content;
  height: 35rem;
  display: flex;
  align-items: center;
  margin-bottom: 40rem;
  color: #fff;
}

.page_button_bg div {
  position: absolute;
  height: 35rem;
  width: 100%;
  background-color: #f26522; /* approximated orange from image */
  transform: skew(-30deg);
}

.page_button_bg h4 {
  position: relative;
  font-size: 20rem;
  margin-inline: 20rem;
  letter-spacing: 0.1rem;
}

.about > p {
  font-size: 25rem;
  letter-spacing: 0.1rem;
  line-height: 56rem;
  word-break: keep-all;
  height: 522rem;
}

/* =================video======================== */
.img_group {
  justify-content: space-between;
  gap: 50rem;
  align-items: flex-start;
  margin-bottom: 120rem;
}

.video {
  position: relative;
  top: -1px;
  background-color: #000;
  padding-bottom: 162rem;
  z-index: 1;
}

.video p {
  font-size: 18rem;
  line-height: 28rem;
  letter-spacing: 0.1rem;
}

.video .d_flex {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.img_item {
  max-width: 500rem;
}

.video h3,
.video p {
  width: 363rem;
}

.img_group .img_item:nth-child(1) {
  margin-left: -110rem;
}

.img_group .img_item:nth-child(2) {
  margin-top: 60rem;
}

.img_group .img_item:nth-child(3) {
  margin-top: 120rem;
  margin-right: -110rem;
}

h5 {
  font-size: 26rem;
  line-height: 30rem;
  letter-spacing: 0.1rem;
}

.video h5 {
  margin-top: 25rem;
  margin-bottom: 30rem;
}

.video_footer {
  font-size: 14rem;
  line-height: 24rem;
  letter-spacing: 0.1rem;
  background: linear-gradient(-10deg, #ec6616, #333333, #ec6616);
  padding: 1rem;
  /* margin-bottom: 162rem; */
}

.video_footer p {
  width: 100%;
  padding-inline: 90rem;
  padding-block: 40rem;
  background-color: #000;
}

/* ==========================.equipment========================= */

.equipment {
  background-color: #fff;
  background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 70%,
      #fff 100%
    ),
    url(../assets/img/EQUIPMENT.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: #000;
  position: relative;
  padding-top: 188rem;
  padding-bottom: 20vw;
}

.page_button_more {
  width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 56rem;
}

.button_more {
  margin-right: 25rem;
  width: 225rem;
  height: 45rem;
  border-radius: 25rem;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.button_more span {
  position: absolute;
  width: 50rem;
  height: 1rem;
  background-color: #b7b7b7;
  top: 50%;
  right: 0;
  transform: translateX(50%);
}

.button_more span::before {
  content: "";
  width: 15rem;
  height: 1rem;
  background-color: #b7b7b7;
  position: absolute;
  display: block;
  right: 0;
  rotate: 45deg;
  transform: translate(-3rem, -5rem);
}
.button_more span::after {
  content: "";
  width: 15rem;
  height: 1rem;
  background-color: #b7b7b7;
  position: absolute;
  display: block;
  right: 0;
  rotate: -45deg;
  transform: translate(-3rem, 5rem);
}

.button_more {
  color: #fff;
  font-size: 12rem;
}

/* ======================company======================= */
.company {
  background-color: #fff;
  color: #000;
  padding-top: 100rem;
  padding-bottom: 130rem;
}

.company table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.company table th {
  width: 224px;
  padding: 30px 10px 30px 20px;
  border-top: 1px solid #ec6616;
  text-align: left;
}

.company table th:last-of-type {
  border-bottom: 1px solid #ec6616;
}

.company table td {
  width: calc(100% - 224px);
  padding: 30px 10px 30px 20px;
  border-top: 1px solid #b7b7b7;
}

.company table td:last-of-type {
  border-bottom: 1px solid #b7b7b7;
}

.company table h6 {
  margin-bottom: 20px;
  font-size: 16px;
}

.company_map iframe {
  width: 100%;
  height: 274px;
}

/* ==========================recruit========================== */

.recruit {
  background-color: #fff;
  background-image: url(../assets/img/recruit.webp);
  color: #000;
  padding-bottom: 113rem;
  width: 100%;
}

.recruit_text p {
  font-size: 18rem;
  line-height: 28rem;
}

.recruit_text a {
  color: #000;
}

.recruit .page_button_more {
  margin-top: 25rem;
}

/* =============================contact=============================== */

.contact {
  padding-top: 138rem;
  padding-bottom: 98rem;
  background: url(../assets/img/contact_bg.webp);
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: cover;
}

.contact .button_more {
  background-color: #fff;
  color: #000;
}

.contact .button_more a {
  color: #000;
}

/* ================================footer================================ */

footer {
  padding-top: 90rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 20rem;
}

footer img {
  width: 242px;
  height: 60px;
}

.footer_group {
  margin-top: 96rem;
  margin-bottom: 153rem;
  gap: 92rem;
}

.footer_group a,
footer p {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  color: #000;
  font-weight: bold;
  font-size: 18rem;
  line-height: 29rem;
  letter-spacing: 0;
}

footer p {
  font-size: 12rem;
  line-height: 30rem;
  color: #b3b3b3;
  font-weight: normal;
}

.fade-in-down {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-down.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-up {
  opacity: 0;
  transform: translateY(40px); /* start 20px below */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.button_more:hover {
  background-color: #fff;
  color: #000;
}

.button_more:hover a {
  color: #000;
}

.contact .button_more:hover {
  background-color: #000;
  color: #fff;
}

.contact .button_more:hover a {
  color: #fff;
}

/* ===================sidebar================== */

.side_bar {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: fit-content;
  flex-direction: column;
  z-index: 1000;
  text-align: center;
  background-color: #000;
  right: -100%;
  transition: all 0.5s;
}

.side_bar h3 {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-size: 46rem;
  line-height: 46rem;
}

.side_bar a {
  color: #fff !important;
}

.side_equipment {
  margin-top: 148rem;
  margin-bottom: 172rem;
}

.side_contact {
  position: relative;
  margin-bottom: 400rem;
  margin-top: 200rem;
  background-color: #fff;
  border-radius: 50rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side_bar .side_contact h3 {
  font-size: 36rem;
  padding: 30rem;
}

.side_icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 25rem;
}

/* ----------------- */
.sp_btn_sp span {
  rotate: 45deg;
  width: 40rem;
}

.sp_btn_sp span::before {
  content: "";
  width: 40rem;
  height: 2px;
  background-color: #ec6616;
  position: absolute;
  display: block;
  rotate: 90deg;
}

.hidden {
  display: none;
}

/* =================.equiment================== */

.common_main {
  background-color: #fff;
}

.common_bg h2,
.common_main h1 {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-size: 90rem;
  line-height: 90rem;
}

.common_bg {
  background: url(../assets/img/colorful.webp);
  width: 100%;
  height: 385rem;
  background-size: cover;
  display: flex;
  justify-content: left;
  align-items: center;
}

.equipment_content {
  padding-block: 50rem;
  color: #333333;
  font-size: 18rem;
  line-height: 28rem;
}

.equipment_content .content_item .equipment_img {
  width: 490rem;
  height: 330rem;
}

.equipment_img img {
  max-width: 490rem;
  height: auto;
  object-fit: cover;
}

.content_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}

.content_item .equiment_text {
  width: 490rem;
  height: fit-content;
}

.equiment_text h3 {
  font-size: 36rem;
}

.equiment_text > div {
  display: flex;
  align-items: center;
  margin-block: 20rem;
}

.equiment_text span:nth-of-type(1) {
  width: 75rem;
  height: 1px;
  background-color: #ec6616;
}

.equiment_text span:nth-of-type(2) {
  width: 100%;
  height: 1px;
  background-color: #333333;
}

.contact_content {
  color: #000;
  padding-bottom: 100rem;
  padding-top: 40rem;
}

.contact_content .wpcf7-not-valid-tip {
  position: absolute;
  bottom: 0;
  padding-left: 50rem;
}

.wpcf7-form-control .wpcf7-submit {
  text-align: center;
}

.contact_content .table_item h6 {
  font-size: 18rem;
}

.contact_content .confirm .table_item label {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.contact_content .confirm .table_item p {
  flex-direction: column;
}

.contact_content .confirm .table_item {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.contact_content .thanks {
  font-size: 18px;
}

.contact_title {
  width: 100%;
  text-align: center;
  margin-bottom: 50rem;
}

.contact_title h3 {
  font-size: 26rem;
  line-height: 26rem;
}

.contact_title p {
  font-size: 14rem;
  line-height: 26rem;
}

.contact_title h2 {
  font-size: 36rem;
  line-height: 36rem;
  margin-block: 5rem;
}

form {
  font-size: 18rem;
}

form .table_item {
  width: 100%;
}

form .table_item p {
  display: flex;
  align-items: center;
  height: 80rem;
  width: 100%;
}

.table_item > p > span > input {
  padding-left: 65rem;
}

input::placeholder {
  font-size: 18rem;
}

form .table_item p > span.wpcf7-form-control-wrap {
  width: 100%;
}

.table_item,
.table_item label,
input {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rem;
}

.table_item .form_input,
.contact_radio_group > p > span {
  border-top: 1rem solid #b7b7b7;
  width: 100%;
  height: 80rem;
}

.table_item > p > label {
  border-top: 1rem solid #ec6616;
  width: 25%;
}

.contact_radio_group label {
  gap: 19rem;
}

textarea {
  padding-block: 30rem;
  padding-inline: 65rem;
}

textarea::placeholder {
  font-size: 18rem;
}

.contact_radio_group .contact_radio {
  padding-left: 50rem;
}

.item_textarea {
  height: 260rem;
  margin-bottom: 45rem;
}

form .item_textarea p,
.item_textarea label,
.item_textarea p > span {
  height: 100%;
}

.item_textarea .form_input {
  border-bottom: 1rem solid #b7b7b7;
  height: 100%;
}
.item_textarea > p > label {
  border-bottom: 1rem solid #ec6616;
}
form > p > input {
  margin: auto;
  width: 460rem;
  height: 60rem;
  background-color: #000;
  color: #fff;
  border-radius: 50rem;
}

form > p > input:hover {
  color: #000;
  background-color: #b3b3b3;
}

.button_more:hover span {
  right: -5%;
  transition: all 0.5s;
}