@charset "utf-8";

/*------------------------------ 共通 ------------------------------*/
html {
  overflow-x: hidden;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
}

a {
  transition: .5s;
}

a::after {
  transition: .5s;
}

a img {
  transition: .5s;
}

a.external-link {
  line-height: 1;
}

a.external-link::after {
  display: none;
}

a.external-link::before {
  position: absolute;
  content: '';
  background-image: url('../img/common/external-link.svg');
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  transition: background-image 0.5s ease;
}

a.external-link:hover::before {
  background-image: url('../img/common/external-link-white.svg');
}

.container {
  width: 90%;
  margin-inline: auto;
}

.inner {
  width: 90%;
  margin-inline: auto;
}

.flex {
  display: flex;
}

.dib {
  display: inline-block;
}

.line-heading {
  position: relative;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.02em;
  font-weight: 200;
}

.line-heading::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 46px;
  height: 4px;
  background-color: #006E88;
}

.line-heading.center::after {
  left: 50%;
  transform: translateX(-50%);
}

.text {
  line-height: 1.84;
  letter-spacing: 0.16em;
}

.thin-link {
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 15%);
  background-color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  color: #4D4D4D;
}

.thin-link:hover {
  color: #fff;
  background-color: #4D4D4D;
}

.thin-link::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 18px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #4D4D4D;
  border-right: 1px solid #4D4D4D;
  transform: translateY(-50%) rotate(33deg) skew(-21deg);
  transition: .5s;
}

.thin-link:hover::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.map-link {
  display: flex;
  align-items: center;
  line-height: 1;
  width: 150px;
  height: 26px;
  background-color: #fff;
  border: 1px solid #666666;
  border-radius: 3px;
  font-size: 1.2rem;
  color: #666666;
  position: relative;
  padding-left: 6px;
}

.map-link:hover {
  background-color: #757575;
  color: #fff;
}

.map-link::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid #666666;
  border-right: 0;
}

.map-link:hover::after {
  border-left: 9px solid #fff;
}

.blue {
  color: #008FFF;
}

.red {
  color: #FB0000;
}

.yellow {
  color: #FFFF00;
}

.radius-img {
  border-radius: 10px;
  overflow: hidden;
}

/* パンくずリスト */
.breadcrumbs .inner {
  gap: 4px 24px;
  color: #595959;
  letter-spacing: 0.16em;
}

.breadcrumbs .inner a {
  position: relative;
}

.breadcrumbs .inner a:hover {
  color: #006E91;
}

.breadcrumbs .inner a::after {
  position: absolute;
  content: '＞';
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
}

/* 下層FV */
.under-fv {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.under-fv h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #008099;
  line-height: 1;
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
}

/* 画像とテキストのリンク */
.c-links {
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: auto;
}

.c-links a {
  overflow: hidden;
}

.c-links a p {
  background-color: #008099;
  color: #fff;
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 13px;
  position: relative;
  letter-spacing: 0.14em;
  transition: .5s;
}

.c-links a p::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 21px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(30deg) skew(-21deg);
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.c-links a p.other-external::after {
  display: none;
}

.c-links a p.other-external::before {
  position: absolute;
  content: '';
  background-image: url(../img/common/external-link-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
}

.c-links a:hover img {
  transform: scale(1.05);
}

.c-links a .img img {
  width: 100%;
}

.point-list {
  position: relative;
}

.point-list::before {
  position: absolute;
  content: "";
  border-radius: 9999px;
  background-color: #0080A1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.pdf {
  background-color: #EBEEEE;
  border: 1px solid #fff;
  box-shadow: 0px 0px 8px rgb(0 0 0 / 15%);
  height: 34px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 0 15px; */
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  color: #666666;
}

.pdf:hover {
  background-color: #757575;
  color: #fff;
}

.bold {
  font-weight: 700;
}

/* 共通dl */
.dl-wrap {
  border-top: 3px solid #006E88;
  border-bottom: 3px solid #006E88;
}

.dl-wrap dl {
  background-image: repeating-linear-gradient(90deg, #006e88, #006e88 5px, transparent 5px, transparent 10px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px;
  align-items: center;
  justify-content: space-between;
}

.dl-wrap dl:last-of-type {
  background-image: none;
}

.dl-wrap dl dt {
  font-weight: 700;
  width: 23%;
  text-align: right;
  letter-spacing: 0.04em;
}

.dl-wrap dl dd {
  line-height: 2.4;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  width: 70%;
}

/* 事業内容 数字 工程 */
.business-process .each-process {
  border: 3px solid #0080A1;
}

.business-process .each-process .number {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  color: #fff;
  background-color: #0080A1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-process .each-process .txt {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.business-process .each-process .bold {
  letter-spacing: 0.06em;
}

.left-align-gray {
  position: relative;
}

.left-align-gray::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background-color: #F2F2F2;
  height: 100%;
  z-index: -1;
}

/* 事業内容 dl */
.business-dl .dl-head {
  justify-content: space-between;
  letter-spacing: 0.04em;
  text-align: center;
  font-weight: 700;
  color: #2A6C83;
  margin-bottom: 16px;
}

.business-dl .dl-head .ttl-head {
  width: 30%;
}

.business-dl .dl-head .data-head {
  width: 70%;
}

.business-dl .dl-head .data-head p {
  width: calc(100% / 3);
}

.business-dl .dl-wrap dl dt {
  text-align: center;
  width: 30%;
}

.business-dl .dl-wrap dl dd.flex p {
  width: calc(100% / 3);
  text-align: center;
  font-weight: 700;
}

.anchor-point {
  position: absolute;
  content: "";
}


/*------------------------------ ヘッダー ------------------------------*/
header {
  box-shadow: 0 0 5px rgb(0 0 0 / 20%);
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 5;
  transform: translateY(-100%);
  /* animation: translateIn 1.2s 4.4s ease-in-out 1 forwards; */
  /* animation: translateIn 1.2s 6.9s ease-in-out 1 forwards; */
  animation: translateIn 1.2s 6s ease-in-out 1 forwards;
  pointer-events: none;
  opacity: 0;
}

@keyframes translateIn {
  0% {}

  100% {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

header.no-animation {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: none !important;
}

header .container {
  justify-content: space-between;
  align-items: center;
}

header .container .logo:hover {
  opacity: .5;
}


/*------------------------------ トップ ------------------------------*/
#top .fv {
  position: relative;
}

#top .fv .container {
  position: relative;
  height: 100vh;
}

#top .fv .container .first-txt {
  background-color: #fff;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* animation: toOpacity0 1.2s 3.6s ease-in-out 1 forwards; */
  /* animation: toOpacity0 1.2s 5.5s ease-in-out 1 forwards; */
  animation: toOpacity0 1.2s 4.6s ease-in-out 1 forwards;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

@keyframes toOpacity0 {
  0% {}

  100% {
    opacity: 0;
  }
}

#top .fv .container .first-txt p {
  /* animation: toOpacity0 1s 2.4s ease-in-out 1 forwards; */
  /* animation: toOpacity0 1s 4.4s ease-in-out 1 forwards; */
  animation: toOpacity0 1s 3.6s ease-in-out 1 forwards;
}

#top .fv .container .first-txt p span {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  letter-spacing: 0.14em;
  opacity: 0;
}

#top .fv .container .first-txt p span:first-of-type {
  /* animation: toOpacity1 1.2s 0s ease-in-out 1 forwards; */
  /* animation: toOpacity1 1.2s 0s ease-in-out 1 forwards; */
  animation: toOpacity1 1.2s 0s ease-in-out 1 forwards;
}

#top .fv .container .first-txt p span:nth-of-type(2) {
  /* animation: toOpacity1 1.2s .6s ease-in-out 1 forwards; */
  /* animation: toOpacity1 1.2s 1.1s ease-in-out 1 forwards; */
  animation: toOpacity1 1.2s .9s ease-in-out 1 forwards;
}

#top .fv .container .first-txt p span:nth-of-type(3) {
  /* animation: toOpacity1 1.2s 1.2s ease-in-out 1 forwards; */
  /* animation: toOpacity1 1.2s 2.2s ease-in-out 1 forwards; */
  animation: toOpacity1 1.2s 1.8s ease-in-out 1 forwards;
}

#top .fv .container .first-txt p span:nth-of-type(4) {
  /* animation: toOpacity1 1.6s 1.8s ease-in-out 1 forwards; */
  /* animation: toOpacity1 1.6s 3.3s ease-in-out 1 forwards; */
  animation: toOpacity1 1.6s 2.7s ease-in-out 1 forwards;
}

@keyframes toOpacity1 {
  0% {}

  100% {
    opacity: 1;
  }
}

#top .fv .container .gray-mask-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-image: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #D1D1D1;
  mask-image: url('../img/top/suzutoyo.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url('../img/top/suzutoyo.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  z-index: 1;
  /* animation: grayMaskImg 1.6s 4.4s ease-in-out 1 forwards; */
  /* animation: grayMaskImg 1.6s 6.7s ease-in-out 1 forwards; */
  animation: grayMaskImg 1.6s 5.8s ease-in-out 1 forwards;
}

@keyframes grayMaskImg {
  0% {}

  100% {
    background-color: transparent;
  }
}

#top .fv .container .mask-img {
  height: 100vh;
  width: 100%;
  background-repeat: repeat-x;

  mask-image: url('../img/top/suzutoyo.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100%;

  -webkit-mask-image: url('../img/top/suzutoyo.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;

  /* animation: maskInfinite 20s 6.4s linear infinite; */
  animation: maskInfinite 20s linear infinite;

}

#top .fv .container .shadow {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);

  width: 100%;
}

#top .fv .container .shadow img {
  width: 100%;
}

#top .fv .container .scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #666666;
  line-height: 1;
  opacity: 0;
  /* animation: toOpacity1 2s 4.8s ease-in-out 1 forwards; */
  /* animation: toOpacity1 2s 7.9s ease-in-out 1 forwards; */
  animation: toOpacity1 2s 6.8s ease-in-out 1 forwards;
}

#top .fv .container .scroll::before {
  position: absolute;
  content: "";
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background-color: #666666;
}

#top .fv .container .scroll::after {
  position: absolute;
  content: "";
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  border: 1px solid #666666;
  background-color: #fff;
  animation: scrollMove .8s infinite linear alternate;
}

#top .fv .news-topic {
  position: absolute;
  top: 100vh;
  top: 100svh;
  /* top: 100dvh; */
  /* top: calc(100dvh + env(safe-area-inset-top)); */
  left: 0;
  color: #fff;
  background-color: #999999;
  /* animation: topPositionChange 1.2s 4.4s ease-in-out 1 forwards; */
  /* animation: topPositionChange 1.2s 6.9s ease-in-out 1 forwards; */
  animation: topPositionChange 1.2s 6s ease-in-out 1 forwards;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  gap: 0 16px;
  height: 70px;
  transition: .5s;
}

@keyframes topPositionChange {
  0% {}

  100% {
    top: calc(100vh - 70px);
    top: calc(100svh - 70px);
    /* top: calc(100dvh - 70px); */
    /* top: calc(100dvh - 70px + env(safe-area-inset-top)); */
    opacity: 1;
    pointer-events: auto;
  }
}

#top .fv .news-topic::before {
  position: absolute;
  content: "";
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(30deg) skew(-21deg);
}

#top .fv .news-topic::after {
  position: absolute;
  content: "";
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 70px solid transparent;
  border-left: 45px solid #999;
}

#top .fv .news-topic .ttl {
  padding-bottom: 2px;
  background: linear-gradient(#fff, #fff) 0 100%/0 1px no-repeat;
  text-decoration: none;
  transition: .3s;
}

#top .fv .news-topic:hover .ttl {
  background-size: 100% 1px;
}

#top .fv .news-topic .txt-time .fv-news {
  font-weight: 700;
  color: #FEE300;
}

#top .fv .news-topic .txt-time time {
  letter-spacing: 0.02em;
}

#top .intro-experience {
  position: relative;
}

#top .intro-experience::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background-color: #F2F2F2;
  z-index: -1;
}

#top .intro-experience .intro .container .img {
  overflow: hidden;
}

#top .intro-experience .experience .container .img {
  overflow: hidden;
}

#top .car .container .img {
  overflow: hidden;
}

#top .car .container .content a {
  background-color: #F2F2F2;
}

#top .car .container .contents a {
  border: 1px solid #fff;
  background-color: #F2F2F2;
}

#top .car .container .contents a:hover {
  background-color: #4D4D4D;
}

#top .world-sdgs {
  position: relative;
}

#top .world-sdgs::after {
  position: absolute;
  content: "";
  height: 100%;
  left: 0;
  background-color: #F2F2F2;
  z-index: -1;
}

#top .world-sdgs .container .img {
  overflow: hidden;
}

#top .world-sdgs .sdgs .container .img {
  overflow: hidden;
}

#top .recruit-wrap .recruit {
  background-image: url(../img/top/recruit.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1200 / 790;
  color: #fff;
}

#top .recruit-wrap .thin-link {
  background-color: #00B6FF;
  color: #fff;
  border: 1px solid #fff;
}

#top .recruit-wrap .thin-link:hover {
  background-color: #fff;
  color: #00B6FF;
  border: 1px solid #00B6FF;
}

#top .recruit-wrap .thin-link::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

#top .recruit-wrap .thin-link:hover::after {
  border-top: 1px solid #00B6FF;
  border-right: 1px solid #00B6FF;
}

#top .others .container .content-wrap {
  text-align: center;
}

#top .others .container .content-wrap .each-content .radius-img img {
  width: 100%;
}

#top .others .container .content-wrap .each-content a {
  margin-inline: auto;
}

#top .news {
  position: relative;
}

#top .news::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  background-color: #F2F2F2;
  height: 100%;
  z-index: -1;
}

#top .news .container .news-wrap {
  background-color: #fff;
  border-radius: 30px;
  flex-direction: column;
  justify-content: center;
}

#top .news .container .news-wrap a {
  border-bottom: .5px solid #666666;
}

#top .news .container .news-wrap a:hover {
  color: #006E91;
}

#top .news .container .news-wrap a:last-of-type {
  border-bottom: none;
}

#top .news .container .news-wrap a time {
  color: #666666;
  transition: .5s;
}

#top .news .container .news-wrap a:hover time {
  color: #006E91;
}


/*------------------------------ フッター ------------------------------*/
footer {
  position: relative;
}

footer .container .address-us address a:hover img {
  transform: scale(1.02);
}

footer .container .address-us address p {
  line-height: 1.85;
  letter-spacing: 0.16em;
}

footer .container .address-us .us {
  display: flex;
  flex-direction: column;
}

footer .container .address-us .us .sns-contact .box {
  height: 75px;
  border: 1px solid #757575;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  font-size: 1.8rem;
}

footer .container .address-us .us .sns-contact a.box:hover {
  color: #fff;
  background-color: #757575;
}

footer .container .address-us .us .sns-contact a:hover img {
  transform: scale(1.05);
}

footer .container .address-us .us .sns-contact .box.contact {
  position: relative;
}

footer .container .address-us .us .sns-contact .box.contact::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 21px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(30deg) skew(-21deg);
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

footer .container .address-us .us .sns-contact .box.contact:hover::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

footer .container .address-us .us .copy {
  letter-spacing: 0.02em;
}

footer .container .address-us .us .copy br {
  display: none;
}

footer .footer-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}


/*------------------------------ 代表挨拶 ------------------------------*/
#representative .president .container {
  background-color: #fff;
  position: relative;
}

#representative .president .container h2 {
  text-align: center;
  color: #0080A1;
  letter-spacing: 0.02em;
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
}

#representative .president .container p {
  letter-spacing: 0.16em;
  line-height: 2.3;
  padding-left: 1.5em;
}

#representative .president .container p .point-list {
  padding-left: 0;
}

#representative .president .container p .point-list::before {
  left: -1.5em;
  width: 15px;
  height: 15px;
}

#representative .president .container figure {
  width: max-content;
  position: absolute;
}

#representative .president .container figure figcaption {
  flex-direction: column;
  align-items: flex-end;
}

#representative .president .container figure figcaption span {
  letter-spacing: 0.16em;
}

#representative .president .container figure .picture-img {
  position: relative;
  z-index: 0;
}

#representative .president .container figure .picture-img img {
  border-radius: 10px;
}

#representative .president .container figure .picture-img::after {
  position: absolute;
  content: "";
  top: 3%;
  left: 3%;
  width: 100%;
  height: 100%;
  background-color: #0080A1;
  z-index: -1;
  border-radius: 10px;
}


/*------------------------------ 経営理念・ビジョン ------------------------------*/
#management .under-fv {
  background-position: left;
}

#management .motto .container ul li {
  font-weight: 700;
  letter-spacing: 0.04em;
}

#management .motto .container ul li:last-of-type {
  margin-bottom: 0;
}

#management .motto .container .img {
  text-align: center;
}

#management .motto .missions .inner .heading-txt:last-of-type {
  margin-bottom: 0;
}

#management .motto .missions .inner .heading-txt h2 {
  flex-direction: column;
  align-items: center;
}

#management .motto .missions .inner .heading-txt h2 span.gray-txt {
  color: #B5B5B5;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
}

#management .motto .missions .inner .heading-txt .txt {
  background-color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#management .motto .missions .inner .heading-txt ul li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.3;
  margin-bottom: 24px;
}

#management .motto .missions .inner .heading-txt ul li:last-of-type {
  margin-bottom: 0;
}

#management .motto .missions .inner .heading-txt ul li::before {
  position: absolute;
  content: "";
  top: 8px;
  left: 0;
  width: 7px;
  height: 7px;
  background-color: #000000;
  border-radius: 9999px;
}

#management .sustainability .inner .txt-img {
  justify-content: center;
  align-items: center;
}

#management .sustainability .inner .txt-img p {
  font-weight: 700;
}

#management .sustainability .accordion {
  border-top: 1px solid #ABABAB;
}

#management .sustainability .accordion .Label {
  align-items: center;
  position: relative;
  cursor: pointer;
  padding-right: 5%;
}

#management .sustainability .accordion .Label::before {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-radius: 9999px;
  border: 1px solid #0080A1;
}

#management .sustainability .accordion .toggle:checked+.Label::before {
  transform: translateY(-50%) rotate(-45deg) !important;
  background-color: #0080A1;
  transition: .5s;
}

#management .sustainability .accordion .Label::after {
  position: absolute;
  content: "＋";
  transform: translateY(-50%);
  border-radius: 9999px;
  color: #0080A1;
  font-weight: 100;
}

#management .sustainability .accordion .toggle:checked+.Label::after {
  content: "";
  background-color: #fff;
  height: 1.5px;
  transform: none;
}

#management .sustainability .accordion .Label .img {
  text-align: center;
  width: 23%;
}

#management .sustainability .accordion .Label .ttl {
  font-weight: 700;
  width: 70%;
  text-align: center;
  letter-spacing: 0.12em;
}

#management .sustainability .accordion .content .attempt {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ADADAD;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  background-color: #E6E6E6;
  font-weight: 500;
}

#management .sustainability .accordion .content .policy ul li {
  letter-spacing: 0.04em;
}

#management .sustainability .accordion .content .policy .point-ul li {
  font-weight: 700;
  position: relative;
}

#management .sustainability .accordion .content .policy ul li:last-of-type {
  margin-bottom: 0;
}

#management .sustainability .accordion .content .policy .point-ul li span {
  background-color: #fff;
}

#management .sustainability .accordion .content .sdgs {
  gap: 0 8px;
}

#management .sustainability .to-the-next {
  width: 95%;
  position: relative;
  max-width: 1611px;
}

#management .sustainability .to-the-next .img {
  width: 100%;
  overflow: hidden;
}

#management .sustainability .to-the-next .to-the-next-txt {
  position: absolute;
}

#management .sustainability .pdf {
  gap: 0 20px;
}


/*------------------------------ 経営理念・ビジョンのアコーディオン ------------------------------*/
.toggle {
  display: none;
}

.Label,
.content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}

.content {
  height: 0;
  overflow: hidden;
  border-bottom: 1px solid #ABABAB;
}

#management .sustainability .accordion .toggle:checked+.Label+.content {
  height: auto;
  transition: all .3s;
}


/*------------------------------ 会社概要 ------------------------------*/
#profile .dl-wrap dl dt {
  color: #2A6C83;
}

@media screen and (max-width: 450px) {
  #profile .dl-wrap dl dt {
    margin-right: auto;
    text-align: center;
  }
}

#profile .access-map {
  position: relative;
}

#profile .access-map::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background-color: #F2F2F2;
  height: 100%;
  z-index: -1;
}

#profile .access-map .container .inner .map iframe {
  width: 100%;
}

#profile .access-map .container .inner .address-link address dl {
  align-items: center;
}

#profile .access-map .container .inner .address-link address dl:last-of-type {
  margin-bottom: 0;
}

#profile .access-map .container .inner .address-link address dl dt {
  color: #2A6C83;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#profile .access-map .container .inner .address-link address dl dd {
  letter-spacing: 0.14em;
}

#profile .iso .links {
  position: relative;
}

#profile .iso .links::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background-color: #F2F2F2;
  height: 100%;
  z-index: -1;
}

#profile .iso .links .inner .each-link:last-of-type {
  margin-bottom: 0;
}

#profile .iso .links .inner .each-link .number {
  line-height: 1;
  color: #fff;
  background-color: #008099;
  display: flex;
  align-items: center;
  width: max-content;
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  font-weight: 700;
}

#profile .iso .links .inner .each-link h3 {
  letter-spacing: 0.16em;
  font-weight: 700;
}


/*------------------------------ 沿革 ------------------------------*/
#history .dl-wrap dl dt {
  color: #3B7E95;
}


/*------------------------------ 品質管理 ------------------------------*/
#quality .point-list {
  font-weight: 700;
  letter-spacing: 0.16em;
}

#quality .guarantee .figure-wrap {
  background-color: #F2F2F2;
  padding: 119px 0 148px;
  text-align: center;
}

#quality .guarantee .figure-wrap .inner .each-figure {
  border-radius: 30px;
  position: relative;
}

#quality .guarantee .figure-wrap .inner .each-figure:first-of-type {
  margin-bottom: 145px;
}

#quality .inspection .inner .digital-measurement .each-inspection .img img {
  width: 100%;
  aspect-ratio: 500 / 300;
}

#quality .inspection .inner .vacuum .img {
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#quality .inspection .inner .vacuum .img img {
  box-shadow: 2px 2px 8px rgb(0 0 0 / 15%);
}

#quality .inspection .inner .bottom-txt {
  background-color: #fff;
  border: 1px solid #006E91;
  border-radius: 10px;
}

#quality .management-attempt .inner .each-attempt .deco-txt {
  background-color: #87C2D1;
  color: #fff;
  letter-spacing: 0.04em;
  border-radius: 10px;
  display: inline-block;
}

#quality .management-attempt .inner .each-attempt .img img {
  width: 100%;
  aspect-ratio: 500 / 300;
  object-fit: cover;
}

#quality .actual-intro {
  position: relative;
}

#quality .actual-intro::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  background-color: #F2F2F2;
  height: 100%;
  z-index: -1;
  width: 95%;
}

#quality .actual-intro .inner .each-actual .img img {
  width: 100%;
}


/*------------------------------ 数字で見る鈴豊精鋼 ------------------------------*/
#numbers .line-heading {
  margin-bottom: 48px;
}

#numbers .container .data-wrap {
  display: flex;
}

#numbers .container .data-wrap .each-data {
  border: 2px solid #0080A1;
  background-color: #fff;
  border-radius: 10px;
}

#numbers .container .data-wrap .each-data h3 {
  background-color: #0080A1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  height: 51px;
  line-height: 1;
  color: #fff;
  border-radius: 5px 5px 0 0;
}

#numbers .container .data-wrap .each-data .data {
  align-items: center;
  justify-content: center;
}

#numbers .container .data-wrap .each-data.gender .data {
  min-height: 140px;
}

#numbers .container .data-wrap .each-data .data .baseline {
  align-items: baseline;
  line-height: 1;
  position: relative;
  justify-content: center;
}

#numbers .container .data-wrap .each-data .data .baseline .number {
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  font-weight: 900;
}

#numbers .container .data-wrap .each-data .data .baseline .number.after-t::after {
  position: absolute;
  content: "t";
  right: -30px;
  bottom: 0;
  font-size: 4rem;
  font-weight: 400;
}

#numbers .container .data-wrap .each-data .data .baseline .unit {
  letter-spacing: 0.16em;
}

#numbers .container .data-wrap .each-data .data .baseline .year {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

#numbers .container .data-wrap .each-data .data .baseline .year.quit br {
  display: none;
}

#numbers .container .data-wrap .each-data.employee-number .data {
  flex-direction: column;
  gap: 80px 0;
  height: calc(100% - 51px);
}

#numbers .container .data-wrap .each-data.employee-number .data .img {
  text-align: center;
}

#numbers .container .data-wrap .each-data.employee-number .data .img img {
  margin-inline: auto;
}

#numbers .container .data-wrap .age-gender .each-data {
  width: 100%;
}

#numbers .container .data-wrap .age-gender .each-data.age {
  margin-bottom: 40px;
}

#numbers .container .data-wrap .age-gender .each-data.age .data {
  justify-content: center;
  gap: 0 10%;
  align-items: center;
}

#numbers .container .data-wrap .age-gender .each-data.age .data .average-baseline .average {
  text-align: center;
  letter-spacing: 0.04em;
  font-size: 2.2rem;
}

#numbers .container .data-wrap .age-gender .each-data.age .data .bar-wrap {
  width: 50%;
}

#numbers .employee .container .data-wrap .each-data h3 {
  height: 51px;
  aspect-ratio: unset;
}

#numbers .employee .container .data-wrap .set {
  flex-direction: column;
}

#numbers .employee .container .data-wrap .set .each-data {
  width: 100%;
}

#numbers .employee .container .data-wrap .set .gender .data {
  flex-direction: column;
  padding: 10%;
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar {
  align-items: center;
  justify-content: flex-end;
  gap: 0 5%;
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar:last-of-type {
  margin-bottom: 0;
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar p {
  letter-spacing: 0.16em;
}

@media screen and (max-width: 1000px) {
  #numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar p {
    font-size: 1.4rem;
  }
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar .bar {
  aspect-ratio: 188 / 37;
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar .bar .bar-number {
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  padding-left: 10px;
  letter-spacing: 0.16em;
  font-size: 1.8rem;
}

@media screen and (max-width: 1000px) {
  #numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar .bar .bar-number {
    padding-left: 4px;
    font-size: 1.4rem;
  }
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar .bar .bar-61 {
  width: 27%;
  background-color: #0354AD;
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar .bar .bar-51 {
  width: 60%;
  background-color: #10B7EB;
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar .bar .bar-41 {
  width: 100%;
  background-color: #F3D12E;
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar .bar .bar-31 {
  width: 90%;
  background-color: #F68634;
}

#numbers .employee .container .data-wrap .age-gender .each-data .data .bar-wrap .each-bar .bar .bar-20 {
  width: 57%;
  background-color: #82C93D;
}

#numbers .employee .container .data-wrap .age .data .average {
  letter-spacing: 0.16em;
  text-align: center;
}

#numbers .container .data-wrap .age-gender .each-data.gender .data {
  flex-direction: column;
  gap: 16px 0;
}

#numbers .container .data-wrap .age-gender .each-data.gender .data .gender-label {
  font-weight: 700;
  gap: 0 24px;
  letter-spacing: 0.02em;
  align-items: center;
  font-size: 2.4rem;
}

#numbers .container .data-wrap .age-gender .each-data.gender .data .gender-label .ratio {
  font-size: 4rem;
}

#numbers .container .data-wrap .age-gender .each-data.gender .data .graph {
  aspect-ratio: 660 / 30;
  width: 90%;
}

#numbers .container .data-wrap .age-gender .each-data.gender .data .graph .man {
  background-color: #0064E6;
}

#numbers .container .data-wrap .age-gender .each-data.gender .data .graph .woman {
  width: 10%;
  background-color: #FF648C;
}

#numbers .sdgs .container .data-wrap .each-data .data {
  padding: 5% 10%;
  justify-content: space-between;
}

@media screen and (max-width: 1000px) {
  #numbers .sdgs .container .data-wrap .each-data .data {
    padding: 20px;
    flex-direction: column-reverse;
    gap: 20px 0;
  }
}

#numbers .sdgs .container .data-wrap .each-data .data .img {
  width: 26%;
}

@media screen and (max-width: 1000px) {
  #numbers .sdgs .container .data-wrap .each-data .data .img {
    width: 100%;
    text-align: center;
  }
}

#numbers .sdgs .container .data-wrap .each-data.learning .data .txts h4 {
  font-size: 2.2rem;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  #numbers .sdgs .container .data-wrap .each-data.learning .data .txts h4 {
    font-size: 1.8rem;
  }
}

#numbers .sdgs .container .data-wrap .each-data.learning .data .txts .kinds {
  justify-content: flex-end;
  align-items: baseline;
}

#numbers .sdgs .container .data-wrap .each-data.learning .data .txts .kinds p {
  font-size: 2.2rem;
}

@media screen and (max-width: 1200px) {
  #numbers .sdgs .container .data-wrap .each-data.learning .data .txts .kinds p {
    font-size: 1.8rem;
  }
}

#numbers .sdgs .container .data-wrap .each-data.learning .data .txts .kinds .people {
  align-items: baseline;
  gap: 0 8px;
  font-size: 2.2rem;
}

@media screen and (max-width: 1000px) {
  #numbers .sdgs .container .data-wrap .each-data.learning .data .txts .kinds .people {
    font-size: 1.8rem;
  }
}

#numbers .sdgs .container .data-wrap .each-data.learning .data .txts .kinds .people span {
  font-size: 3.7rem;
  font-weight: 700;
}

@media screen and (max-width: 1200px) {
  #numbers .sdgs .container .data-wrap .each-data.learning .data .txts .kinds .people span {
    font-size: 3rem;
  }
}

#numbers .sdgs .container .data-wrap .each-data .data .explanation-baseline .explanation {
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}


/*------------------------------ 引抜みがき棒鋼 ------------------------------*/
#polishing .feature .container .business-process .each-process .txt .arrow-half span {
  line-height: 1;
  letter-spacing: 0.16em;
  position: relative;
}

#polishing .feature .container .business-process .each-process .txt .arrow-half span:not(:last-of-type)::after {
  position: absolute;
  content: "";
  left: calc(100% + 5px);
  bottom: 3px;
  border-bottom: 1px solid #4D4D4D;
  border-right: 1px solid #4D4D4D;
  transform: skew(45deg);
}

#polishing .diagram .container .diagrams .scroll-content {
  background-color: #fff;
  border-radius: 20px;
  padding: 5%;
  border: 1px solid #C2C2C2;
}

#polishing .diagram .container .diagrams .scroll-content .process-img {
  margin-bottom: 64px;
}


/*------------------------------ 製品紹介 ------------------------------*/
#product .under-fv {
  background-image: url(../img/business/product.jpg);
}

#product .use .img {
  text-align: center;
}

#product .use .img img {
  border: 1px solid #C2C2C2;
  border-radius: 20px;
  padding: 20px;
}


/*------------------------------ 冷間圧造用鋼線 ------------------------------*/
#steel .process .container .diagrams .scroll-content {
  background-color: #fff;
  border-radius: 20px;
  padding: 5%;
  border: 1px solid #C2C2C2;
}

#steel .facility .container .business-dl .dl-wrap dl dd.flex p.line {
  position: relative;
}

#steel .facility .container .business-dl .dl-wrap dl dd.flex p.line::after {
  position: absolute;
  content: "";
  width: 62px;
  height: 1.69px;
  background-color: #231815;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#steel .facility {
  margin-bottom: 264px;
}

#steel .facility .container .figures {
  max-width: 1000px;
  margin-inline: auto;
}

#steel .business-dl .dl-wrap dl dt {
  text-align: left;
  padding-left: 5%;
}

/*------------------------------ 冷間鍛造品 ------------------------------*/
#forging .process .container .diagrams .scroll-content {
  background-color: #fff;
  border-radius: 20px;
  padding: 5%;
  border: 1px solid #C2C2C2;
}

#forging .process .container .diagrams .process-img img {
  width: 100%;
  padding-right: 15px;
}

#forging .process .container .diagrams .figures {
  max-width: 900px;
  margin-inline: auto;
}

#forging .facility .container .business-dl .dl-head {
  justify-content: center;
}

#forging .facility .container .business-dl-beside .dl-head .ttl-head {
  width: 12.5%;
}

#forging .facility .container .business-dl-beside .dl-head .data-head {
  width: 87.5%;
}

#forging .facility .container .business-dl-vertical .dl-head .ttl-head {
  width: 20%;
}

#forging .facility .container .business-dl-vertical .dl-head .data-head {
  width: 80%;
}

#forging .facility .container .business-dl .dl-head .data-head p {
  width: 100%;
}

#forging .facility .container .business-dl-beside .dl-wrap dl dt {
  /* width: 60%; */
  width: 12.5%;
}

#forging .facility .container .business-dl-beside .dl-wrap dl dd {
  width: calc(87.5% / 6);
}

#forging .facility .container .business-dl-vertical .dl-wrap dl dt {
  width: 20%;
}

#forging .facility .container .business-dl-vertical .dl-wrap dl dd {
  width: 20%;
}

#forging .facility .container .business-dl .dl-wrap dl dd {
  font-weight: 700;
  justify-content: center;
}

#forging .feature .container .business-process {
  margin-bottom: 56px;
}

#forging .feature .container .business-process .each-process .note-img {
  position: relative;
}

#forging .feature .container .business-process .each-process .note-img::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background-image: url(../img/business/note.svg);
  z-index: -1;
}

#forging .feature .container .note .thin-link {
  background-color: #F2F2F2;
}

#forging .feature .container .note .thin-link:hover {
  background-color: #4D4D4D;
}

#forging .facility .container .business-dl h3 {
  background-color: #008099;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
}


/*------------------------------ 採用情報 共通リンク ------------------------------*/
.parts-recruit {
  width: 90%;
  margin-inline: auto;
}


/*------------------------------ 先輩社員の声 ------------------------------*/
#senior .senior-fv {
  background-color: #F2F2F2;
}

#senior .senior-fv .container {
  position: relative;
}

#senior .senior-fv .container .intro {
  background-color: rgb(0 0 0 / 55%);
  color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

#senior .senior-fv .container .intro p.voice {
  letter-spacing: 0.02em;
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  border-bottom: 1.3px solid #fff;
}

#senior .senior-fv .container .intro p:nth-of-type(2) {
  letter-spacing: 0.08em;
  line-height: 1.8;
}

#senior .senior-fv .container .intro h2 {
  letter-spacing: 0.08em;
  text-align: right;
}

#senior .senior-fv .container .intro .for-span {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#senior .senior-fv .container .intro .for-span span {
  letter-spacing: 0.08em;
}

#senior .senior-fv .container .intro p:nth-of-type(3) {
  letter-spacing: 0.14em;
  text-align: right;
}

#senior .senior-fv .container .img {
  margin-left: auto;
}

#senior .q-a:nth-of-type(2n) {
  background-color: #F2F2F2;
}

#senior .q-a .container .img img {
  width: 100%;
}

#senior .q-a .container .txt .question {
  align-items: baseline;
}

#senior .q-a .container .txt .question p:first-of-type {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  letter-spacing: 0.02em;
}

#senior .q-a .container .txt .question p:last-of-type {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  letter-spacing: 0.02em;
  position: relative;
}

#senior .q-a .container .txt .answer {
  border-top: 1px solid #008097;
  border-bottom: 1px solid #008097;
  letter-spacing: 0.14em;
}

#senior .schedule {
  border: 1px solid #008097;
}

#senior .schedule .inner h2 {
  text-align: center;
  letter-spacing: 0.02em;
}

#senior .schedule .inner .schedule-wrap {
  position: relative;
}

#senior .schedule .inner .schedule-wrap dl {
  display: flex;
  gap: 0 5%;
  letter-spacing: 0.14rem;
  background-image: repeating-linear-gradient(90deg, #006e88, #006e88 5px, transparent 5px, transparent 10px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px;
}

#senior .schedule .inner .schedule-wrap dl:nth-of-type(2n) {
  background-color: #F2F2F2;
}

#senior .schedule .inner .schedule-wrap dl dt {
  text-align: right;
}

.other-seniors h2 {
  text-align: center;
}

.other-seniors .container {
  justify-content: center;
  flex-wrap: wrap;
}

.other-seniors a {
  background-size: cover;
  background-repeat: no-repeat;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid #008097;
}

.other-seniors a::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

.other-seniors a:hover::after {
  transform: scale(1.05);
}

.other-seniors a.yamada::after {
  background-image: url(../img/recruit/yamada.jpg);
}

.other-seniors a.kato::after {
  background-image: url(../img/recruit/kato.jpg);
}

.other-seniors a.yasumasa::after {
  background-image: url(../img/recruit/yasumasa.jpg);
}

.other-seniors a.tomizono::after {
  background-image: url(../img/recruit/tomizono.jpg);
}

.other-seniors a.yano::after {
  background-image: url(../img/recruit/yano.jpg);
}

.other-seniors a .department-name {
  background-color: rgb(0 0 0 / 55%);
  color: #fff;
  border-radius: 0 13px 13px 0;
  flex-direction: column;
  gap: 0 10px;
  justify-content: center;
  letter-spacing: 0.14em;
  padding: 4%;
  height: fit-content;
}

.other-seniors a .department-name p:first-of-type {
  font-weight: 700;
}

.other-seniors a .department-name p:last-of-type {
  font-weight: 500;
}

.other-seniors {
  margin-bottom: 152px;
}


/*------------------------------ 研修・福利厚生 ------------------------------*/
#welfare .appeal .each-appeal:nth-of-type(2n) {
  background-color: #F2F2F2;
}


/*------------------------------ 募集要項 ------------------------------*/
#application .tabs {
  display: flex;
  flex-wrap: wrap;
}

#application .tab_label {
  color: #008097;
  font-weight: 700;
  letter-spacing: 0.16em;
  border: 1px solid #008097;
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#application .tab_label:hover {
  opacity: 0.75;
}

#application .tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;
}

#application input[name="tab_switch"] {
  display: none;
}

#application .tabs input:checked+.tab_label {
  color: #fff;
  background-color: #008097;
}

#application .tabs input:checked+.tab_label::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 10px 0 10px;
  border-color: #008097 transparent transparent transparent;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}

#tab01:checked~#tab01_content,
#tab02:checked~#tab02_content,
#tab03:checked~#tab03_content,
#tab04:checked~#tab04_content,
#tab05:checked~#tab05_content,
#tab06:checked~#tab06_content {
  display: block;
}

#application .tab_content {
  position: relative;
  animation: fadeInTab .5s ease;
}

@keyframes fadeInTab {
  0% {
    opacity: 0;
    top: 10px;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}

#application .application-content {
  border: 1px solid #008097;
  border-radius: 10px;
}

#application .application-content .text-link {
  align-items: center;
}

#application .application-content .text-link .thin-link {
  background-color: #F2F2F2;
  border: 1px solid #fff;
}

#application .application-content .text-link .thin-link:hover {
  background-color: #4D4D4D;
}

#application .application-content.suspended {
  position: relative;
}

#application .application-content.suspended::after {
  position: absolute;
  content: "※この職種は現在募集しておりません。";
  letter-spacing: 0.16em;
  color: #fff;
  background-color: #808080;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
}

#application .tab_content .application-link {
  margin-inline: auto;
  background-color: #F2F2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #008BA0;
  box-shadow: 2px 2px 4px rgb(0 0 0 / 15%);
  transition: .5s;
}

#application .tab_content .application-link:hover {
  background-color: #008BA0;
}

#application .tab_content .application-link span {
  position: relative;
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  letter-spacing: 0.06em;
  transition: .5s;
}

#application .tab_content .application-link:hover span {
  color: #fff;
}

#application .tab_content .application-link span::after {
  position: absolute;
  content: "";
  top: 50%;
  right: -24px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #4D4D4D;
  border-right: 1px solid #4D4D4D;
  transform: translateY(-50%) rotate(33deg) skew(-21deg);
  transition: .5s;
}

#application .tab_content .application-link:hover span::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}


/*------------------------------ 海外事業 ------------------------------*/
#abroad .year {
  letter-spacing: 0.04em;
}

#abroad .dl-wrap {
  margin-bottom: 8px;
}

#abroad .business .world-map {
  position: relative;
}

#abroad .business .world-map a {
  background-color: #F2F2F2;
  border: 1px solid #fff;
}

#abroad .business .world-map a:hover {
  background-color: #4D4D4D;
}

#abroad .business .world-map .img img {
  width: 100%;
}

#abroad .container .txt-img .txt .heading-logo {
  align-items: center;
}

#abroad .container .txt-img .txt .heading-logo .line-heading {
  margin-bottom: 0;
}


#abroad .container .txt-info {
  justify-content: space-between;
}

@media screen and (max-width: 1000px) {
  #abroad .container .txt-info {
    flex-direction: column;
    gap: 40px 0;
  }
}

#abroad .container .txt-info .txt-img {
  width: 42.5%;
}

@media screen and (max-width: 1000px) {
  #abroad .container .txt-info .txt-img {
    width: 100%;
  }
}

#abroad .container .txt-info .txt-img .thailand-img img {
  width: 100%;
}

#abroad .container .txt-info .info {
  width: 52.5%;
}

@media screen and (max-width: 1000px) {
  #abroad .container .txt-info .info {
    width: 100%;
  }
}

#abroad .map .google-map {
  border: 1px solid #666666;
}

#abroad .map .google-map iframe {
  width: 100%;
  border: 1px solid #666666;
}

#abroad .map .map-link {
  margin-left: auto;
}

#abroad .now {
  text-align: right;
  letter-spacing: 0.04em;
}

#abroad .thailand .container .dl-wrap {
  background-color: #fff;
}

#abroad .thailand .container .dl-wrap dl dt {
  font-weight: 400;
}

#abroad .thailand .container .dl-wrap dl dd {
  letter-spacing: 0.04em;
  line-height: 1.8;
}

#abroad .thailand .container .dl-wrap dl dd a {
  align-items: center;
  gap: 0 12px;
}

#abroad .thailand .container .dl-wrap dl dd a .img {
  display: flex;
}

#abroad .thailand .container .dl-wrap dl dd a:hover {
  opacity: .5;
}

#abroad .thailand .container .circle {
  text-align: center;
}

#abroad .thailand .container .circle .year {
  text-align: right;
  margin-inline: auto;
  padding-top: 4px;
}

#abroad .thailand .container .map-txt .tsk-link {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  letter-spacing: 0.06em;
  padding: 0 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  font-weight: 700;
}

#abroad .thailand .container .map-txt .tsk-link:hover {
  background-color: #757575;
  color: #fff;
}

#abroad .thailand .container .map-txt .tsk-link::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 21px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(30deg) skew(-21deg);
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
}

#abroad .thailand .container .map-txt .tsk-link:hover::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

@media screen and (max-width: 1000px) {
  #abroad .india .container .txt-img-dl {
    flex-direction: column;
    gap: 40px 0;
  }
}

#abroad .india .container .txt-img-dl .txt-img .img img {
  width: 100%;
}

#abroad .india .container .txt-img-dl .info .dl-wrap dl {
  display: flex;
}

#abroad .india .container .txt-img-dl .info .dl-wrap dl dt {
  font-weight: 400;
}

#abroad .india .container .txt-img-dl .info .dl-wrap dl dd {
  letter-spacing: 0.04em;
  line-height: 2;
}

#abroad .india .container .txt-img-dl .info .profile {
  color: #2E424A;
  font-size: 3.6rem;
  margin-bottom: 30px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

#abroad .india .container .txt-img-dl .info .now {
  margin-bottom: 40px;
}

#abroad .india .container .txt-img-dl .info .scroll-wrap .process .img img {
  width: 100%;
}

#abroad .india .container .map-img {
  justify-content: space-between;
}

#abroad .india .container .map-img .map {
  width: 47.5%;
}

#abroad .india .container .map-img .img {
  width: 47.5%;
}

#abroad .india .container .circle .year {
  text-align: left;
}

#abroad .thailand .container .map-txt .txt .img img {
  width: 100%;
}


/*------------------------------ 環境活動 ------------------------------*/
#environment .point-list {
  font-weight: 700;
  letter-spacing: 0.16em;
}

#environment .action .container .txt-img .img img {
  width: 100%;
}

#environment .practice .container .practice-wrap .each-practice .img {
  margin-inline: auto;
}

#environment .practice .container .practice-wrap .each-practice .img img {
  width: 100%;
}

#environment .practice .container .practice-wrap {
  flex-wrap: wrap;
}

#environment .practice .container .practice-wrap .each-practice h3 {
  font-weight: 700;
  letter-spacing: 0.16em;
}

#environment .report .container .pdfs .each-pdf:last-of-type {
  margin-bottom: 0;
}

#environment .report .container .pdfs .each-pdf .txt .text {
  margin-bottom: 0;
}

#environment .report .container .pdfs .each-pdf .txt h3 {
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}

#environment .report .container .pdfs .each-pdf .link-update a {
  position: relative;
}

#environment .report .container .pdfs .each-pdf .link-update a .img {
  position: absolute;
  right: 5%;
}


/*------------------------------ その他コンテンツ ------------------------------*/
.other-content {
  width: 90%;
  margin-inline: auto;
}


/*------------------------------ ドローン事業 ------------------------------*/
#drone .txt-img .img {
  max-width: 400px;
  margin-inline: auto;
}

#drone .txt-img .img img {
  width: 100%;
}

#drone .fit .container .img {
  width: 60%;
  border-radius: 0 50px 50px 0;
  overflow: hidden;
}

#drone .fit .container .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#drone .fit .container .txt a {
  background-color: #F2F2F2;
}

#drone .fit .container .txt a:hover {
  background-color: #757575;
}

#drone .fit .container .txt .mission {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #99CCDA;
  color: #0063FF;
  border-radius: 5px;
  letter-spacing: 0.04em;
}

#drone .fit .container .txt h3 {
  font-weight: 700;
  line-height: 1.6;
}

#drone .service .inner .service-wrap .each-service .point-list {
  font-weight: 700;
  letter-spacing: 0.16em;
}

#drone .service .inner .service-wrap .each-service .img img {
  width: 100%;
}


/*------------------------------ 株式会社SK ------------------------------*/
#sk .about .container .imgs .img {
  max-width: 400px;
  margin-inline: auto;
}

#sk .about .container .imgs .img img {
  width: 100%;
}

#sk .group .container .img {
  border-radius: 0 50px 50px 0;
  overflow: hidden;
}

#sk .group .container .img img {
  width: 100%;
}


/*------------------------------ グリーンスティール ------------------------------*/
#green .about .container ul li {
  letter-spacing: 0.16em;
  font-weight: 700;
}

#green .about .container .imgs .img {
  max-width: 400px;
  margin-inline: auto;
}

#green .about .container .imgs .img img {
  width: 100%;
}

#green .carbon .container .img img {
  width: 100%;
}


/*------------------------------ 仕事内容 ------------------------------*/
#contents .tabs {
  display: flex;
  flex-wrap: wrap;
}

#contents .tab_label {
  color: #008097;
  font-weight: 700;
  letter-spacing: 0.16em;
  border: 1px solid #008097;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

#contents .tab_label:hover {
  opacity: 0.75;
}

#contents .tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;
}

#contents input[name="tab_switch"] {
  display: none;
}

#contents input:checked+.tab_label {
  color: #fff;
  background-color: #008097;
}

#contents input:checked+.tab_label::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 10px 0 10px;
  border-color: #008097 transparent transparent transparent;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}

#tab01:checked~#tab01_content,
#tab02:checked~#tab02_content {
  display: block;
}

#contents .tab_content {
  position: relative;
  animation: fadeInTab .5s ease;
}

@keyframes fadeInTab {
  0% {
    opacity: 0;
    top: 10px;
  }

  100% {
    opacity: 1;
    top: 0;
  }
}

#contents .tabs .tab_label:first-of-type {
  border-radius: 10px 0 0 10px;
}

#contents .tabs .tab_label:last-of-type {
  border-radius: 0 10px 10px 0;
}

#contents .tabs .tab_label.active {
  color: #fff;
  background-color: #008097;
  position: relative;
}

#contents .tabs .tab_label.active::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 10px 0 10px;
  border-color: #008097 transparent transparent transparent;
  display: block;
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
  transform: rotate(180deg);
}

#contents .tab-wrap .tabs .contents-wrap {
  border: 2px solid #008097;
  border-radius: 10px;
  background-color: #fff;
}

#contents .tab-wrap .tabs .contents-wrap .flow .each-flow .img img {
  width: 100%;
}

#contents .tab-wrap .tabs .contents-wrap .flow .each-flow .heading-txt h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  letter-spacing: 0.02em;
  border-radius: 10px;
  background-color: #008097;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #fff;
  line-height: 1;
  margin-bottom: 12px;
}

#contents .tab-wrap .tabs .contents-wrap .flow .each-flow .heading-txt-lists .lists .each-list {
  background-color: #CCE6EC;
  border-radius: 5px;
  align-items: center;
}

#contents .tab-wrap .tabs .contents-wrap .flow .each-flow .heading-txt-lists .lists .each-list .sub-list {
  font-weight: 700;
  letter-spacing: 0.16em;
}

#contents .tab-wrap .tabs .contents-wrap .jobs .inner {
  align-items: center;
  gap: 0 7%;
}

@media screen and (max-width: 1000px) {
  #contents .tab-wrap .tabs .contents-wrap .jobs .inner {
    flex-direction: column;
    gap: 40px 0;
  }
}

#contents .tab-wrap .tabs .contents-wrap .jobs .inner h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  letter-spacing: 0.02em;
  color: #008097;
  padding: 15px;
  border: 1px solid #008097;
  white-space: nowrap;
}

#contents .tab-wrap .tabs .contents-wrap .jobs .inner .left-line p {
  position: relative;
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  letter-spacing: 0.02em;
  color: #008097;
  padding-left: 16px;
}

#contents .tab-wrap .tabs .contents-wrap .jobs .inner .left-line p::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 5px;
  background-color: #008097;
}

#contents .tab-wrap .tabs .contents-wrap .jobs .inner .left-line p:first-of-type {
  margin-bottom: 24px;
}

#contents .tab-wrap .tabs .contents-wrap .job-wrap .each-job {
  align-items: center;
  background-image: repeating-linear-gradient(90deg, #006e88, #006e88 5px, transparent 5px, transparent 10px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px;
}

#contents .tab-wrap .tabs .contents-wrap .job-wrap .each-job:last-of-type {
  background: none;
}

#contents .tab-wrap .tabs .contents-wrap .job-wrap .each-job .number-img .number {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #008097;
  color: #fff;
  line-height: 29px;
}

#contents .tab-wrap .tabs .contents-wrap .job-wrap .each-job .number-img .img img {
  width: 100%;
}


/*------------------------------ トップに戻る ------------------------------*/
#page-top {
  position: fixed;
  z-index: 9;
  bottom: 0;
  right: 0;
  display: none;
}

#page-top a {
  width: 0;
  height: 0;
}

#page-top a::after {
  content: "";
  position: absolute;
  background-color: #fff;
  height: 0px;
}

#page-top a:hover:after {
  transition: .2s;
}

#page-top a:before {
  content: "";
  position: absolute;
  transform: rotate(45deg);
}


/*------------------------------ js-inの挙動 ------------------------------*/
.js-in {
  opacity: 0;
  pointer-events: none;
}

.js-in.from-left {
  transform: translateX(-30px);
}

.js-in.from-left.active {
  animation: jsInLeft 1s .3s ease-in-out 1 forwards;
}

@keyframes jsInLeft {
  0% {}

  100% {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.js-in.from-right {
  transform: translateX(30px);
}

.js-in.from-right.active {
  animation: jsInRight 1s .3s ease-in-out 1 forwards;
}

@keyframes jsInRight {
  0% {}

  100% {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.js-in.from-under {
  transform: translateY(20px);
}

.js-in.from-under.active {
  animation: jsInUnder .7s .2s ease-in-out 1 forwards;
}

@keyframes jsInUnder {
  0% {}

  100% {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}


/*------------------------------ フィギュア ３つ並び ------------------------------*/
.figures figure .img {
  margin-bottom: 8px;
}

.figures figure .img img {
  width: 100%;
}

.figures figure figcaption {
  letter-spacing: 0.16em;
}

/* 共通パーツ */
.parts {
  background-color: #F2F2F2;
}

.parts h2 {
  text-align: center;
}


/*------------------------------ 404 ------------------------------*/
#not-found .text-btn {
  flex-direction: column;
  align-items: center;
}

#not-found .text-btn h2 {
  letter-spacing: 0.02em;
  text-align: center;
}

#not-found .text-btn .thin-link {
  background-color: #F2F2F2;

  border: 1px solid #fff;
}

#not-found .text-btn .thin-link:hover {
  background-color: #4D4D4D;
  border: 1px solid #4D4D4D;
}


/*------------------------------ お知らせ一覧 ------------------------------*/
#news .news {
  position: relative;
}

#news .news::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  background-color: #F2F2F2;
  height: 100%;
  z-index: -1;
}

#news .news .inner {
  padding: 5%;
}

#news .news .inner {
  background-color: #fff;
  border-radius: 28px;
}

#news .news .inner .news-wrap a {
  border-bottom: .5px solid #666666;
}

#news .news .inner .news-wrap a:hover {
  color: #006E91;
}

#news .news .inner .news-wrap a time {
  color: #666666;
  transition: .5s;
}

#news .news .inner .news-wrap a:hover time {
  color: #006E91;
}

#news .news .inner .news-wrap a:last-of-type {
  border-bottom: none;
}

#news .news .inner .pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-inline: auto;
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
}

#news .news .inner .pagination .current {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4D4D4D;
  color: #F2F2F2;
  font-weight: 600;
  font-size: 1.8rem;
}

#news .news .inner .pagination a.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F2F2;
  color: #4D4D4D;
  font-weight: 600;
  font-size: 1.8rem;
}

#news .news .inner .pagination span.page-numbers.dots {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: #F2F2F2;
  color: #4D4D4D;
}

#news .news .inner .pagination a.page-numbers:hover {
  background: #4D4D4D;
  color: #F2F2F2;
}

#news .news .inner .pagination a.page-numbers.prev {
  position: relative;
}

#news .news .inner .pagination a.page-numbers.prev::after {
  position: absolute;
  content: "";
  top: 50%;
  border-top: 1px solid #4D4D4D;
  border-right: 1px solid #4D4D4D;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(213deg) skew(-21deg);
  transition: .5s;
}

#news .news .inner .pagination a.page-numbers.prev:hover::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

#news .news .inner .pagination a.page-numbers.next {
  position: relative;
}

#news .news .inner .pagination a.page-numbers.next::after {
  position: absolute;
  content: "";
  top: 50%;
  border-top: 1px solid #4D4D4D;
  border-right: 1px solid #4D4D4D;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(33deg) skew(-21deg);
  transition: .5s;
}

#news .news .inner .pagination a.page-numbers.next:hover::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}


/*------------------------------ お知らせ詳細 ------------------------------*/
#single-news .heading time {
  letter-spacing: 0.16em;
}

#single-news .single-news {
  position: relative;
}

#single-news .single-news::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  background-color: #F2F2F2;
  height: 100%;
  z-index: -1;
}

#single-news .single-news .inner {
  padding: 5%;
}

#single-news .single-news .inner {
  background-color: #fff;
  border-radius: 28px;
}

#single-news .single-news .inner a {
  margin-inline: auto;
  background-color: #F2F2F2;
}

#single-news .single-news .inner a:hover {
  background-color: #4D4D4D;
}

#single-news .single-news .inner a::after {
  display: none;
}

/* ブロックエディタ */
#single-news .single-news .inner p {
  line-height: 1.84;
  letter-spacing: 0.16em;
}

#single-news .single-news .inner figure {
  margin-inline: auto;
  text-align: center;
}


/*------------------------------ 先輩社員の声 ------------------------------*/
#seniors .other-seniors {
  background-color: #F2F2F2;
  margin-inline: auto;
}


/*------------------------------ プライバシーポリシー ------------------------------*/
#privacy .breadcrumbs .inner {
  padding-left: 0;
}

#privacy .inner h2 {
  font-weight: 700;
  letter-spacing: 0.16em;
}

#privacy .inner h2 span {
  padding-left: 0;
}

#privacy .inner .text-list {
  display: flex;
  align-items: baseline;
}

#privacy .inner .text-list span {
  font-weight: 700;
}

#privacy .inner article ol li {
  display: flex;
  align-items: baseline;
  line-height: 1.84;
  letter-spacing: 0.16em;
}

#privacy .inner article ol li span {
  font-weight: 700;
}