@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap");
/* ----------------------------------------
｜　基本設定
---------------------------------------- */
:root {
  --width: 1440;
  --margin-cont__large: calc(190 / var(--width) * 100vw);
  --margin-cont__normal: calc(140 / var(--width) * 100vw);
  --margin-cont__lower: calc(100 / var(--width) * 100vw);
  --margin-120: calc(120 / var(--width) * 100vw);
  --margin-100: calc(100 / var(--width) * 100vw);
  --margin-80: calc(80 / var(--width) * 100vw);
  --margin-60: calc(60 / var(--width) * 100vw);
  --margin-40: calc(40 / var(--width) * 100vw);
  --margin-20: calc(20 / var(--width) * 100vw);
  --margin-10: calc(10 / var(--width) * 100vw);
  /* font-size */
  /* --font-size: calc(15 / var(--width) * 100vw); */
  --font-size: calc(18 / var(--width) * 100vw);
  --font-size--big: calc(42 / var(--width) * 100vw);
  --font-size--mid: calc(32 / var(--width) * 100vw);
  --font-size--small: 14px;
  /* color */
  --col--txt: #000;
  --col--assort: #1379b2;
  --col--accent: #c75e19;
  --col--bg: #fff;
  --col--grd: linear-gradient(
    90deg,
    #003457 0%,
    #04466e 20%,
    #0c6192 54%,
    #1172a8 82%,
    #1379b1 100%
  );
  /* font */
  --font-en: "Oswald", sans-serif;
  /* width */
  --max-width: calc(1160 / var(--width) * 100vw);
  --max-width__large: calc(1280 / var(--width) * 100vw);
  --max-width__small: calc(960 / var(--width) * 100vw);
  /* animation */
  --transition-fast: 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  --transition: 1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ----------------------------------------
｜　共通
---------------------------------------- */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-size: var(--font-size);
  font-weight: 500;
  color: var(--col--txt);
  letter-spacing: 1.75px;
  line-height: 1.75;
  margin: 0;
  overflow-x: hidden;
  font-family: "Noto Sans JP", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-feature-settings: "palt";
}

ul,
li {
  list-style-type: none;
}

.sp {
  display: none;
}

.pc {
  display: block;
}

a {
  text-decoration: none;
  color: var(--col--txt);
}

/* テキスト */
h2 {
  font-size: var(--font-size--big);
}

h3 {
  font-size: var(--font-size--mid);
}

h4 {
  font-size: calc(24 / var(--width) * 100vw);
}

h1,
h2,
h3,
h4 {
  line-height: 1;
}

.en {
  font-family: var(--font-en);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* 背景・カラー */
.bg-white {
  background-color: #fff;
}

/* ボタン */
.btn {
  border: none;
  display: inline-block;
  border: 1px solid;
  min-width: calc(200 / var(--width) * 100vw);
  min-height: calc(40 / var(--width) * 100vw);
  padding: calc(15 / var(--width) * 100vw) calc(30 / var(--width) * 100vw);
  color: var(--col--txt);
}

.btn .arrow {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: var(--col--txt);
  line-height: 1;
  width: 2em;
  height: 1px;
  background: currentColor;
  margin-left: var(--margin-20);
}

.btn .arrow::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
  transform-origin: top right;
  position: absolute;
  top: 50%;
  right: -0.05em;
  box-sizing: border-box;
}

.btn.white,
.btn.white .arrow {
  color: #fff;
}

.btn.btn-square {
  border: none;
  background-color: currentColor;
  padding: calc(40 / var(--width) * 100vw) calc(75 / var(--width) * 100vw);
  width: 100%;
  max-width: calc(400 / var(--width) * 100vw);
  min-height: calc(100 / var(--width) * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.btn-square p {
  color: #fff;
}

/* 装飾 */
.line {
  display: block;
  height: 0.5em;
  min-width: 140px;
  background-color: var(--col--assort);
}

.line.accent {
  background-color: var(--col--accent);
}

/* レイアウト */
.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.cont__l {
  max-width: var(--max-width__large);
}

.cont__s {
  max-width: var(--max-width__small);
  margin-left: auto;
  margin-right: auto;
}

.flex {
  display: flex;
}

.flex.row {
  flex-direction: row;
  flex-wrap: wrap;
}

.flex.column {
  flex-direction: column;
  gap: var(--margin-20);
}

.flex.between {
  justify-content: space-between;
}

[class*="Col"] {
  display: flex;
}

.twoCol .img-cont img {
  -o-object-fit: cover;
  object-fit: cover;
}

.twoCol [class*="col-"] {
  width: 50%;
}

.threeCol [class*="col-"] {
  width: 33.3333333333%;
}

.twoCol.c-textContOnImg {
  position: relative;
}

.twoCol.c-textContOnImg .img-cont {
  min-height: calc(360 / var(--width) * 100vw);
}

.twoCol.c-textContOnImg [class*="col-"]:has(.text) {
  width: 50%;
  text-align: left;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: var(--margin-40);
}

.twoCol.c-textContOnImg .col-1:has(.text) {
  right: 0;
}

.twoCol.c-textContOnImg .col-1:has(.img-cont) {
  width: 65%;
  margin-left: auto;
}

.twoCol.c-textContOnImg .col-2:has(.img-cont) {
  width: 65%;
  margin-right: auto;
}

.bg-img {
  position: relative;
  background: rgba(19, 121, 177, 0.7);
  color: #fff;
}

.bg-img::after {
  content: "";
  position: absolute;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.col-yellow {
  color: #ffe500;
}

/* ----------------------------------------
｜　パーツ
---------------------------------------- */
/* table */
table {
  width: 100%;
  border-collapse: collapse;
}

dt,
th {
  vertical-align: middle;
  min-width: calc(120 / var(--width) * 100vw);
}

dt,
dd,
th,
td {
  text-align: left;
  padding: var(--margin-20) 0;
}

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

.img-cont {
  display: flex;
  position: relative;
}

/* 行間 */
/* 文字サイズ */
.text__l {
  font-size: var(--font-size--big);
}

.text__m {
  font-size: var(--font-size--mid);
}

.text__s {
  font-size: var(--font-size--small);
  line-height: 1.25;
}

.title__l {
  font-size: calc(58 / var(--width) * 100vw);
}

.title__m {
  font-size: var(--font-size--big);
}

.title__s {
  font-size: var(--font-size--mid);
}

/* 縦書き */
.text-rl {
  writing-mode: vertical-rl;
}

/* 注釈 */
.notes {
  font-size: calc(13 / var(--width) * 100vw);
  font-weight: 400;
}

/* 整列 */
.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.text.long {
  max-width: calc(720 / var(--width) * 100vw);
  text-align: justify;
  line-height: 1.8;
}

/* 余白 */
.mt-100 {
  margin-top: var(--margin-100);
}

.mt-80 {
  margin-top: var(--margin-80);
}

.mt-60 {
  margin-top: var(--margin-60);
}

.mt-40 {
  margin-top: var(--margin-40);
}

.mt-20 {
  margin-top: var(--margin-20);
}

.mt-10 {
  margin-top: var(--margin-10);
}

/* 色 */
.assort {
  color: var(--col--assort);
}

.bg-assort {
  background-color: var(--col--assort);
  color: #fff;
}

.accent {
  color: var(--col--accent);
}

.bg-accent {
  background-color: var(--col--accent);
  color: #fff;
}

/* 共通ヘッダー
---------------------------------------- */
header {
  position: absolute;
  /* position: relative; */
  width: 100%;
  top: 0;
  z-index: 1000;
}

body:has(header) {
  position: relative;
}

main {
  margin-top: calc(125 / var(--width) * 100vw);
}

header .header-menu {
  width: 100%;
}

header .header-menu .container {
  max-width: none;
  height: calc(125 / var(--width) * 100vw);
  margin: 0 var(--margin-60);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .header-menu .container .col-1 {
  width: 30%;
}

header .header-menu .container .col-2 {
  width: 60%;
}

header .header-menu .container .col-2 .menu-nav {
  justify-content: flex-end;
}

/* header .header-menu .container .col-2 .menu-nav ul.flex {
  gap: var(--margin-20);
} */

header .header-menu .container .col-2 .menu-nav ul.flex {
  gap: var(--margin-40);
}
/* 固定 */
header {
  height: calc(125 / var(--width) * 100vw);
  transition: 2s ease;
}

header.is-fixed {
  position: fixed;
}

header.is-fixed .header-menu,
.header-menu.is-open .col-2 {
  opacity: 1;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

header .header-menu::after,
.header-menu .col-2::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
}

.header-menu .col-2::after {
  background: var(--col--assort);
}

header.is-fixed .header-menu::after,
.header-menu.is-open .col-2::after {
  opacity: 0.75;
}

/* ロゴ */
.logo img {
  height: auto;
  width: 100%;
  max-width: 420px;
  min-width: 200px;
}

/* 採用 追従バナー */
.c-fixed-recruit_banner--cont {
  position: fixed;
  bottom: 10%;
  right: -5em;
  width: auto;
  z-index: 300;

  opacity: 0;
  transition: var(--transition);
}
.c-fixed-recruit_banner--cont.is-scroll {
  right: 0;
  opacity: 1;
}
.c-fixed-recruit_banner--cont.p-btn-recruit {
  width: auto;
  padding: var(--margin-20);
  padding-right: var(--margin-20);
  background: var(--col--accent);
  font-size: calc(22 / var(--width) * 100vw);
  color: #fff;
  writing-mode: vertical-rl;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}

.c-fixed-recruit_banner--cont.p-btn-recruit p {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  letter-spacing: 0.3em;
}

.p-btn-recruit p::before {
  content: "";
  width: 25px;
  height: 25px;
  background: url("../images/fixed-recruitBanner-icon.png") no-repeat;
  background-size: contain;
  display: inline-block;
}

.c-fixed-recruit_banner--cont.p-btn-recruit a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 共通フッター
---------------------------------------- */
.s-banner {
  position: relative;
  padding: var(--margin-100) 0;
}

.s-banner .bg-text {
  top: 0;
  right: 0;
  left: auto;
}

.contact-cont .twoCol .col-1 {
  border-right: 1px solid #ccc;
}

footer .container.cont__l .twoCol {
  padding: var(--margin-60) 0;
}

footer .container.cont__l .twoCol .col-2 {
  width: 20%;
  min-width: 200px;
}

footer a {
  color: #fff;
}

.p-footer-otherLink {
  max-width: 100px;
}

footer .p-footer-menu-cont .menu,
footer .p-footer-menu-cont .sub-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

footer .p-footer-menu-cont .menu li {
  display: flex;
}

footer .p-footer-menu-cont .menu li a {
  width: 100%;
  border-left: 1px solid;
  padding: var(--margin-10) 0;
  padding-left: 1em;
}

footer .copyright {
  padding: var(--margin-20);
}

.footer-cont.s-banner {
  padding: 0;
}

/* ----------------------------------------
｜　トップ
---------------------------------------- */
/*--------------------
背景テキスト
--------------------*/
.bg-text {
  position: absolute;
  color: transparent;
  width: -moz-fit-content;
  width: fit-content;
  font-size: calc(180 / var(--width) * 100vw);
  font-family: var(--font-en);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.1px;
  writing-mode: vertical-rl;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--col--assort);
  z-index: 0;
}

.s-top .bg-text {
  font-size: calc(290 / var(--width) * 100vw);
}

.bg-text.tb {
  writing-mode: horizontal-tb;
}

.bg-text.lr {
  transform: rotate(-180deg);
  height: -moz-max-content;
  height: max-content;
}

.bg-text.lr.center {
  top: 50%;
  bottom: auto;
}

.bg-text.lr.right.center {
  transform: translateY(-50%);
  right: 0;
}

.bg-text.lr.left.center {
  transform: translateY(-50%) rotate(180deg);
  left: 0;
}

.bg-text.bottom {
  bottom: 0;
  transform: rotate(-180deg);
}

.bg-text.lr.right.bottom {
  right: 0;
}

.bg-text.lr.left.bottom {
  transform: rotate(180deg);
  left: 0;
}

.bg-text.white {
  -webkit-text-stroke-color: #fff;
}

.s-top .bg-text {
  font-size: calc(290 / var(--width) * 100vw);
}

section[class*="bg-"]:has(.bg-text) {
  z-index: auto;
}

.s-top:has(.bg-text) .container {
  position: relative;
  z-index: 1;
}

/*--- レイアウト ---*/
.s-top {
  padding: var(--margin-cont__normal) 0;
  position: relative;
}

section:not([class*="bg-"]) + section:not([class*="bg-"]) {
  padding-top: 0;
}

.title.underline {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--margin-40);
}

.title.underline::after {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  max-width: 165px;
  height: 2px;
  background-color: var(--col--accent);
  margin-top: var(--margin-20);
}

.title.bg-grd span {
  display: inline-block;
  color: #fff;
  background: var(--col--grd);
  padding: var(--margin-10) var(--margin-40);
  line-height: 1.2;
}

.title.bg-grd span:nth-child(2) {
  margin-top: var(--margin-20);
}

/*--------------------
MV
--------------------*/
.top-mv {
  position: relative;
  height: calc(880 / var(--width) * 100vw);
  max-height: 50em;
}

.top-mv .container {
  position: relative;
  top: 2em;
  z-index: 10;
}

.top-mv .container h1.title {
  font-size: calc(58 / var(--width) * 100vw);
  line-height: 1;
}

.top-mv .container h1.title span:last-child {
  margin-top: var(--margin-20);
}

.top-mv .container .line {
  max-width: 190px;
}

.top-mv .top-mv--img {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

picture {
  width: 100%;
  height: 100%;
}

.top-mv .top-mv--img .img-cont {
  width: 90vw;
  height: 500px;
  min-height: 26em;
  overflow: hidden;
}

.top-mv .top-mv--img .img-cont img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.top-mv--img .img-cont {
  translate: 0 -15%;
  opacity: 0;
  transition: var(--transition);
}

.is-scroll .top-mv--img .img-cont {
  opacity: 1;
  translate: 0 -20%;
}

.top-mv .top-mv--img::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 80%;
  background-color: var(--col--assort);
  transition: var(--transition);
  transition-property: width;
  transition-delay: 0.75s;
  z-index: -1;
}

.is-scroll .top-mv--img:after {
  width: 100%;
}

/*--------------------
お知らせ・ブログ
--------------------*/
#top-news {
  padding: var(--margin-100) 0;
}

#top-news h2.title {
  font-size: var(--font-size--big);
  border-right: 5px solid var(--col--accent);
}

#top-news .col-1 {
  width: 20%;
}

#top-news .col-2 {
  width: 70%;
}

#top-news.s-top::before {
  content: none;
}

/*--- 記事一覧 ---*/
ul.p-news-list__wrap {
  display: flex;
  flex-direction: column;
}

ul.p-news-list__wrap li {
  position: relative;
  width: 100%;
  display: inline-flex;
  gap: var(--margin-20);
  padding: var(--margin-20);
  border-bottom: 1px solid #ccc;
}

ul.p-news-list__wrap li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

ul.p-news-list__wrap li .time {
  font-family: var(--font-en);
}

#top-company {
  position: relative;
  padding-bottom: var(--margin-cont__large);
  margin-bottom: var(--margin-100);
}

#top-company .container {
  position: relative;
  z-index: 10;
}

#top-company .twoCol {
  gap: var(--margin-40);
}

#top-company .twoCol .col-1.img-cont {
  width: calc(520 / var(--width) * 100vw);
  height: calc(480 / var(--width) * 100vw);
}

#top-company .twoCol .col-1.img-cont img {
  -o-object-fit: cover;
  object-fit: cover;
}

#top-company .twoCol .col-2.text-cont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(50 / var(--width) * 100vw);
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}

#top-company .bg-text {
  font-size: calc(190 / var(--width) * 100vw);
}

#top-company ul.p-top-company-gallery {
  gap: var(--margin-40);
}

#top-company ul.p-top-company-gallery li {
  max-width: calc(33.3333333333% - var(--margin-40));
}

#top-company .p-top-company-gallery__wrap.container {
  position: absolute;
  width: 100%;
  bottom: calc(-100 / var(--width) * 100vw);
  left: 50%;
  transform: translateX(-50%);
}

#top-company.bg-img::after {
  background-image: url("../images/top-comapny-bg.jpg");
}

#top-service .twoCol {
  align-items: center;
  justify-content: space-between;
  gap: var(--margin-40);
}

#top-service .twoCol .col-1.p-top-service-img-list {
  width: 50vw;
  padding-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  flex-direction: row;
  gap: 0.1em;
}

.p-top-service-img-list .img-cont {
  position: relative;
  width: calc(33.3333333333% - 0.1em);
  opacity: 0;
  transition: 1.5s ease;
}

.p-top-service-img-list.is-scroll .img-cont {
  opacity: 1;
}

.p-top-service-img-list .img-cont:nth-child(1),
.p-top-service-img-list .img-cont:nth-child(3) {
  bottom: 5em;
}

.p-top-service-img-list.is-scroll .img-cont:nth-child(1),
.p-top-service-img-list.is-scroll .img-cont:nth-child(3) {
  bottom: 0;
}

.p-top-service-img-list .img-cont:nth-child(2) {
  top: 5em;
}

.p-top-service-img-list.is-scroll .img-cont:nth-child(2) {
  top: 0;
}

#top-service .twoCol .col-2 {
  width: 45%;
}

/* .p-top-service-list__wrap li {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  counter-increment: counter;
  text-align: center;
}

.p-top-service-list__wrap li .bg-img-cont {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.p-top-service-list__wrap li .bg-img-cont img {
  -o-object-fit: cover;
  object-fit: cover;
}

.p-top-service-list__wrap li .text {
  max-width: 360px;
  margin: 0 auto;
}

.p-top-service-list__wrap li {
  opacity: 0;
  transform: translateY(1em);
  transition: var(--transition);
}

.p-top-service-list__wrap li.is-scroll {
  opacity: 1;
  transform: translateY(0);
}

.p-top-service-list__cont {
  width: 100%;
  padding: calc(55 / var(--width) * 100vw);
  background: rgba(19, 121, 178, 0.4);
  transition: var(--transition-fast);
  z-index: 2;
}

.p-top-service-list__cont h4 {
  font-size: calc(40 / var(--width) * 100vw);
  font-weight: 600;
  margin-bottom: var(--margin-20);
}

.p-top-service-list__counter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--col--grd);
  width: 100%;
  max-width: 405px;
}

.p-top-service-list__counter::before {
  content: "";
  position: absolute;
  left: -10%;
  width: 10%;
  height: calc(20 / var(--width) * 100vw);
  background-color: #003457;
  -webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0);
  clip-path: polygon(0 50%, 100% 100%, 100% 0);
}

.p-top-service-list__counter::after {
  content: "0" counter(counter);
  font-size: calc(180 / var(--width) * 100vw);
}

.p-top-service-list__wrap li:nth-child(2) .p-top-service-list__cont {
  order: 1;
}

.p-top-service-list__wrap li:nth-child(2) .p-top-service-list__counter::before {
  left: auto;
  right: -10%;
  background-color: #1379b1;
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
} */
#top-recruit {
  color: #fff;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  z-index: auto;
}

#top-recruit h3.text__l {
  font-size: calc(52 / var(--width) * 100vw);
  line-height: 1.5;
}

#top-recruit .p-top-recruit__imgWrap {
  position: relative;
  gap: var(--margin-40);
}

#top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--margin-10);
}

#top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment li {
  font-size: calc(20 / var(--width) * 100vw);
  text-align: left;
  padding: 0.1em var(--margin-10);
  background-color: var(--col--accent);
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
}

#top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment li::before {
  content: "#";
  display: inline-block;
  line-height: 0.5;
  vertical-align: baseline;
}

#top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment span.tb,
#top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment.rl li::before {
  writing-mode: horizontal-tb;
  line-height: 1;
}

#top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment.rl {
  right: 2%;
  top: -5%;
}

#top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment.rl li {
  padding: var(--margin-10) 0.1em;
}

#top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment.tb {
  left: -5%;
  bottom: 5%;
}
#top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment.tb.sp {
  display: none;
}
#top-recruit .p-top-recruit-staff {
  /* width: 50%; */
  /* max-width: 675px; */
  position: relative;
  bottom: 0;
  left: 0;
  margin-top: var(--margin-40);
}

#top-recruit .p-top-recruit-staff .img-cont img {
  opacity: 0;
  transition: var(--transition);
}

#top-recruit .p-top-recruit-staff.is-scroll img {
  opacity: 1;
}

#top-recruit .p-top-recruit-staff .img-cont img:first-child {
  transform: translateY(2em);
}

#top-recruit .p-top-recruit-staff.is-scroll .img-cont img:first-child {
  transform: translateY(0);
}

#top-recruit .p-top-recruit-staff .img-cont img:last-child {
  transition-delay: 0.5s;
}

#top-recruit .p-top-recruit-staff .img-cont {
  position: relative;
  width: 100%;
  max-width: calc(765 / var(--width) * 100vw);
  height: 100%;
  max-height: calc(375 / var(--width) * 100vw);
  overflow: hidden;
}

#top-recruit .p-top-recruit-staff .img-cont img.staff {
  width: calc(350 / var(--width) * 100vw);
}

#top-recruit .p-top-recruit-staff .img-cont img.comment {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  max-width: calc(400 / var(--width) * 100vw);
  height: auto;
}

#top-recruit .text-cont {
  position: relative;
}

.p-recruit-bgImg__fish {
  position: absolute;
  width: calc(150 / var(--width) * 100vw);
  max-width: 170px;
  transition: var(--transition);
  top: -2em;
  right: -2em;
  opacity: 0;
}

.is-scroll .p-recruit-bgImg__fish {
  top: -1em;
  right: -1em;
  opacity: 0.5;
}

#top-recruit.bg-img::after {
  content: "";
  background-image: url("../images/top-recruit-bg.jpg");
}

/*--- ブログ ---*/
#top-blog {
  color: #fff;
}
#top-blog .container.bg-img::after {
  z-index: -2;
}
#top-blog .container.bg-img::after,
.p-blog_banner.bg-img::after {
  background-image: url("../images/blog-bg.jpg");
}

#top-blog .container {
  position: relative;
  box-shadow: 0 var(--margin-20) 0 var(--margin-10) var(--col--accent);
}

#top-blog .container .twoCol {
  width: 50%;
  margin-left: var(--margin-40);
  margin-right: auto;
  gap: var(--margin-40);
}

#top-blog .container .col-1 {
  /* width: 10%; */
  width: auto;
  height: -moz-fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
  top: -1.5em;
}

#top-blog .container .col-1 h2 span {
  font-size: calc(40 / var(--width) * 100vw);
  padding: var(--margin-20) var(--margin-10);
}

#top-blog .container .col-2 {
  width: 80%;
  padding: var(--margin-40) 0;
}

#top-blog .container .col-2 .text.text__m {
  font-size: calc(24 / var(--width) * 100vw);
}

#top-blog .top-blog--bg_img {
  width: 30vw;
  max-width: 35%;
  position: absolute;
  bottom: 0;
  right: 0%;
}

/* 魚 */
.top-fish-scroll {
  display: flex;
}

.top-fish-scroll ul.flex.row {
  flex-wrap: nowrap;
}

.top-fish-scroll ul.flex.row li img {
  height: auto;
}

/* スライダー */
.autoplaySlider {
  display: flex;
  flex-direction: row !important;
  /* min-width: 100%; */
  /* width: -moz-min-content; */
  /* width: min-content; */
  animation: 20s linear infinite autoplaySlider;
}

@keyframes autoplaySlider {
  100% {
    transform: translateX(-50%);
  }
}
/* ----------------------------------------

｜　下層

---------------------------------------- */
.s-lower {
  position: relative;
  padding: var(--margin-cont__lower) 0;
}

.s-lower .title {
  margin-bottom: var(--margin-80);
}

/*--- 下層見出し ---*/
.lower-title__cont {
  position: relative;
  width: 100%;
  /* max-height: 70vh; */
  overflow: hidden;
}

.lower-title__cont .container.cont__l {
  width: 80vw;
  max-width: none;
  position: relative;
  margin-left: 0;
}

.lower-title__cont .container h1 {
  font-size: calc(72 / var(--width) * 100vw);
  position: absolute;
  right: -10%;
  bottom: 10%;
  z-index: 100;
}

.lower-title__cont .bg-text {
  text-transform: uppercase;
  bottom: 0;
  right: 0;
}

.lower-title__img {
  background-position: center;
  background-size: cover;
  display: flex;
  min-height: 62vh;
  overflow: hidden;
}

.lower-title__img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--col--grd);
  transition: width 0.5s ease-in;
}

.lower-title__img.is-scroll::before {
  width: 0;
}

.header-company {
  background-image: url("../images/heading-01.webp");
}

.header-service {
  background-image: url("../images/heading-02.webp");
}

.header-policy,
.header-sitemap,
.header-contact,
.header-complete,
.header-news {
  background-image: url("../images/heading-03.webp");
}

.header-blog {
  background-image: url("../images/heading-05.webp");
}

/* -- パンくずリスト -- */
.pankuzu__wrap {
  padding: var(--margin-20) 0;
}

.pankuzu__wrap ul.pankuzu {
  font-size: var(--font-size--small);
}

.pankuzu__wrap ul.pankuzu li {
  display: inline-block;
}

.pankuzu__wrap ul.pankuzu a {
  color: var(--col--txt);
}

.pankuzu__wrap ul.pankuzu li:nth-child(-n + 2)::after {
  content: "";
  margin: 0 var(--margin-20);
  display: inline-block;
  height: 2em;
  width: 1px;
  background-color: var(--col--accent);
  vertical-align: middle;
}

/* ----------------------------------------
｜　会社案内
---------------------------------------- */
.company-intro .twoCol.c-textContOnImg .col-1 {
  max-width: 70%;
}

.company-intro .twoCol.c-textContOnImg .col-1 .img-cont {
  width: calc(520 / var(--width) * 100vw);
  height: calc(480 / var(--width) * 100vw);
}

.company-intro .twoCol.c-textContOnImg .col-2 {
  width: 55%;
}

/* 社長メッセージ */
.s-lower.bg-grd,
.s-banner.bg-grd {
  background: linear-gradient(90deg, #003457 0%, #1379b1 100%);
  color: #fff;
}

#company-message h4.title.bg-grd {
  font-size: calc(32 / var(--width) * 100vw);
  margin-bottom: var(--margin-40);
}

#company-message h4.title.bg-grd span {
  background: #fff;
  color: var(--col--accent);
}
#company-message .text.long {
  margin-left: auto;
  margin-right: auto;
}

/* テーブル */
.wp-block-table table.has-fixed-layout tbody {
  width: 100%;
  display: table;
}

.wp-block-table table.has-fixed-layout tbody tr td {
  padding: 1em 0.75em;
  /* border: none; */
}

.wp-block-table table.has-fixed-layout tbody tr td:first-child {
  max-width: 180px;
  color: #fff;
  background: var(--col--assort);
}

.wp-block-table table.has-fixed-layout tbody tr td:nth-child(2) {
  border: none;
}
.wp-block-table td,
.wp-block-table th,
.wp-block-table table.has-fixed-layout tbody tr dd {
  /* td { */
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: calc(30 / var(--width) * 100vw) var(--margin-10);
}

.wp-block-table
  table.has-fixed-layout
  tbody
  tr:nth-child(2n + 1)
  td:nth-child(2) {
  background: rgba(19, 121, 177, 0.1);
}

/* ----------------------------------------
｜　事業内容
---------------------------------------- */
/* 三連バナー(共通) */
.c-linkBanner__list {
  justify-content: space-between;
  gap: var(--margin-40);
}

.c-linkBanner__cont {
  width: 33.3333333333%;
}

.c-linkBanner__cont a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--margin-20) var(--margin-40);
}

.c-linkBanner__cont a::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(135deg);
  position: absolute;
  right: 2em;
  box-sizing: border-box;
}

/* 特徴 */
.service-feature .title {
  margin-bottom: var(--margin-40);
}

.service-feature .twoCol {
  counter-increment: counter;
}

.service-feature .twoCol .title {
  font-size: calc(30 / var(--width) * 100vw);
  margin-bottom: var(--margin-20);
}

.service-feature .twoCol .title.counter::before {
  content: "0" counter(counter);
  font-size: calc(100 / var(--width) * 100vw);
  font-weight: 700;
  font-family: var(--font-en);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #fff;
  vertical-align: middle;
  margin-right: 0.1em;
}

.service-feature .bg-text {
  z-index: -1;
}

/*----- 流れ -----*/
.c-flow-list {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  flex-direction: column;
  gap: var(--margin-20);
}

.c-flow-list li {
  display: flex;
  margin-bottom: var(--margin-20);
}

.c-flow-list li .title {
  width: 50%;
  font-size: var(--font-size--mid);
  font-weight: 500;
  color: #fff;
  padding: 1em;
  margin-bottom: 0;
  position: relative;
  line-height: 1.2;
}

.c-flow-list li .title::before {
  content: "";
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background-color: var(--col--assort);
  width: 0.75em;
  height: 0.75em;
  position: absolute;
  left: 50%;
  bottom: -0.725em;
  transform: translateX(-50%);
}

.c-flow-list li .text {
  display: flex;
  align-items: center;
  text-align: justify;
  padding: var(--margin-20);
  width: 80%;
}

.c-flow-list li:nth-child(2n + 1) .title {
  background-color: var(--col--assort);
}

.c-flow-list li:nth-child(2n + 1) .text {
  background-color: rgba(19, 121, 177, 0.1);
}

.c-flow-list li:nth-child(2n) .title {
  background-color: var(--col--accent);
}

.c-flow-list li:nth-child(2n) .title::before {
  background-color: var(--col--accent);
}

.c-flow-list li:nth-child(2n) .text {
  background-color: rgba(199, 94, 25, 0.1);
}

.c-flow-list li:last-child {
  margin-bottom: 0;
}

.c-flow-list li:last-child .title::before {
  content: none;
}

/**********************

事業内容

***********************/
.c-service-list {
  position: relative;
  justify-content: center;
  text-align: justify;
  gap: var(--margin-40);
  z-index: 100;
}

.c-service-list [class*="col-"] {
  position: relative;
}
.c-service-list [class*="col-"]:has(.img-cont) {
  width: auto;
}

.c-service-list [class*="col-"]:has(.img-cont)::before {
  content: "";
  position: absolute;
  right: -50%;
  bottom: -10%;
  width: calc(400 / var(--width) * 100vw);
  height: calc(400 / var(--width) * 100vw);
  background: rgba(19, 121, 177, 0.1);
  z-index: -1;
}

.c-service-list [class*="col-"]:has(.text) {
  width: 80%;
}

.c-service-list .img-cont {
  /* width: calc(495 / var(--width) * 100vw);
  height: calc(560 / var(--width) * 100vw); */
  aspect-ratio: 3/4;
  max-width: calc(495 / var(--width) * 100vw);
}

.c-service-list .img-cont img {
  -o-object-fit: cover;
  object-fit: cover;
}

.c-service-list .title.bg-grd {
  display: inline-flex;
  flex-direction: column;
  font-size: var(--font-size--mid);
  font-weight: 700;
}

.c-service-list .title.bg-grd span {
  background: var(--col--assort);
  padding: 0.1em var(--margin-10);
}

.p-service--detail__cont {
  margin-top: var(--margin-100);
}

.p-service--detail__cont ul.p-service--detail__list {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1em;
}

.p-service--detail__cont ul.p-service--detail__list li {
  max-width: calc(360 / var(--width) * 100vw);
  width: calc(33.3333333333% - 0.1em);
  padding: var(--margin-20);
  background: rgba(0, 0, 0, 0.5);
  font-size: calc(18 / var(--width) * 100vw);
  font-weight: 500;
}

#service-02--detail.bg-img:after {
  background-image: url("../images/service-intro-bg.jpg");
}

/* ----------------------------------------
｜　お問い合わせ
---------------------------------------- */
.contact-cont .twoCol {
  gap: var(--margin-20);
}

.p-tel-cont .tel.en span {
  font-size: calc(72 / var(--width) * 100vw);
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.p-tel-cont .tel.en::before {
  content: "";
  background: url("../images/tel-icon.png") no-repeat;
  background-size: contain;
  display: inline-block;
  width: calc(40 / var(--width) * 100vw);
  height: calc(50 / var(--width) * 100vw);
  margin-right: var(--margin-10);
  vertical-align: middle;
}

.p-tel-cont,
.p-btn-mail {
  margin-top: var(--margin-20);
}

.p-btn-mail a {
  font-size: 1.15em;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(20 / var(--width) * 100vw) !important;
  padding-right: calc(20 / var(--width) * 100vw) !important;
  vertical-align: middle;
}

.p-btn-mail a p {
  vertical-align: middle;
}

.p-btn-mail a p::before {
  content: "";
  display: inline-block;
  width: calc(40 / var(--width) * 100vw);
  height: calc(30 / var(--width) * 100vw);
  background: url("../images/icon-mail.svg") no-repeat;
  background-size: contain;
  padding-right: 0.5em;
  vertical-align: middle;
}

/* ----------------------------------------
｜　新着情報
---------------------------------------- */
.p-single__date-wrapper {
  margin-bottom: var(--margin-20);
  display: flex;
  gap: var(--margin-20);
  align-items: center;
}

.p-single__date-wrapper .time {
  font-size: calc(16 / var(--width) * 100vw);
}

.p-single__date-wrapper .category {
  font-size: calc(14 / var(--width) * 100vw);
  border: 1px solid;
  padding: 0.2em 0.5em;
}

.p-single__date-wrapper .cat-news {
  color: var(--col--assort);
}

.p-single__date-wrapper .cat-blog {
  color: var(--col--accent);
}

/*--- ページネーション ---*/
nav.navigation.pagination {
  margin-top: var(--margin-60);
}

ul.page-numbers {
  font-size: 1.25rem;
  font-family: var(--font-en);
  font-weight: 400;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5em;
}

ul.page-numbers li :not(a),
ul.page-numbers li a {
  padding: 0.25em 0.5em;
  transition: var(--transition-fast);
}

/* ul.page-numbers li:not(span.page-numbers.dots):hover, */
ul.page-numbers li a.page-numbers:hover {
  /* ul.page-numbers li a:hover { */
  background: #f5f5f5;
}

span.page-numbers.current {
  background: var(--col--accent);
  color: #fff;
}

ul.page-numbers li a.page-numbers.next,
ul.page-numbers li a.page-numbers.prev {
  background: var(--col--txt);
  color: #fff;
}

/*--- カテゴリ ---*/
.news-cont .twoCol .col-1 {
  width: 20%;
}

.news-cont .twoCol .col-2 {
  width: 80%;
}

.news-cont ul.categories li.cat-item {
  margin-top: var(--margin-20);
}

.news-cont ul.categories li.cat-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(140 / var(--width) * 100vw);
  padding: var(--margin-10);
  border: 1px solid var(--col--txt);
  transition: var(--transition-fast);
}

/*--- ブログ ---*/
.p-blog_banner {
  padding: var(--margin-20);
}

.p-blog_banner__inner {
  max-width: 60%;
  margin-left: auto;
  transform: translateY(-2em);
}

.p-blog--bg_img {
  position: absolute;
  bottom: 0;
  left: var(--margin-20);
  max-width: 30%;
}

/* 🐟 */
.p-blog--bg_fish__cont {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.p-blog--bg_fish__cont img {
  position: absolute;
  max-width: calc(250 / var(--width) * 100vw);
  width: auto;
  height: auto;
}

.fishAnime {
  width: calc(200 / var(--width) * 100vw);
  animation: fishAnime var(--transition) infinite;
}

.fishAnime:nth-child(2n + 1) {
  animation-direction: reverse;
}

@keyframes fishAnime {
  0%,
  49% {
    transform: rotate(0);
  }
  50%,
  100% {
    transform: rotate(15deg);
  }
}
.p-blog--bg_fish__cont .fishAnime:nth-child(1) {
  right: 5%;
  top: -25%;
  transform: rotate(15deg);
}

.p-blog--bg_fish__cont .fishAnime:nth-child(2) {
  right: -5%;
  top: -10%;
}

.p-blog--bg_fish__cont .fishAnime:nth-child(3) {
  left: -10%;
  /* top: -10%; */
  bottom: -10%;
  transform: rotate(-25deg) scale(-1, 1);
}

/* ----------------------------------------
｜　記事詳細
---------------------------------------- */
.p-single__title-cont {
  padding-bottom: var(--margin-60);
  border-bottom: 1px solid #ccc;
  margin-bottom: var(--margin-60);
}

.p-single__title-cont h2.title {
  font-size: calc(42 / var(--width) * 100vw);
  line-height: 1.5;
  margin-bottom: 0;
}

.p-single__article {
  text-align: justify;
  line-height: 1.8em;
  margin-bottom: var(--margin-100);
}

.p-single__article.contents h1,
.p-single__article.contents h2,
.p-single__article.contents h3,
.p-single__article.contents h4,
.p-single__article.contents h5 {
  margin-bottom: var(--margin-20);
}

.p-single__article.contents p {
  margin-bottom: var(--margin-20);
}

.p-single__article figure.wp-block-pullquote {
  padding: 2em;
  font-size: var(--font-size);
  font-style: italic;
  background: #f5f5f5;
  margin-bottom: var(--margin-40);
}

.p-single__article details summary,
.p-single__article details p {
  padding: 2em;
  background: #f5f5f5;
}

.p-single__article details p {
  padding-top: 0;
}

.p-single__article details summary {
  font-weight: 600;
}

.p-single__article figure.wp-block-pullquote::before {
  content: "“";
  display: inline-block;
  font-size: 2rem;
  color: var(--col--assort);
}

.p-single__article figure.wp-block-pullquote cite::before {
  content: "";
  display: inline-block;
  width: 2em;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 1em;
}

.p-single__btn {
  background-color: var(--col--accent);
  text-align: center;
  color: #fff;
  border: none;
}

.p-single__btn-wrapper a.p-single__btn.btn,
button[type="submit"] {
  cursor: pointer;
}
/* 画像 */
figure.wp-block-image.size-full {
  max-width: 750px;
}

/* ----------------------------------------
｜　採用情報
---------------------------------------- */
.lower.recruit h3 {
  font-size: var(--font-size--big);
}

/* ===== アニメーション ===== */
/* 下からフワッと登場 */
.animate.in-view {
  animation: fade 2s ease;
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* MV用　右からフェードイン */
.slide-in.in-view {
  animation: slide 1s ease;
}

@keyframes slide {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
/* MV用　左からフェードイン */
.slide-in_2.in-view {
  animation: slide-2 1s ease;
}

@keyframes slide-2 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
/* ぴょこっと登場 */
.piko.in-view {
  animation: piko 0.3s linear;
}

@keyframes piko {
  0% {
    transform: translateY(100px);
  }
  60% {
    transform: translateY(100px);
  }
  80% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}
/* wantedのところ用 */
.jiwa.in-view {
  animation: jiwa 1s ease;
}

@keyframes jiwa {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.recruit .icon {
  width: 5%;
}

/* MV */

.mv {
  position: relative;
}

.mv-txt {
  font-size: var(--font-size--big);
  font-weight: 900;
  position: absolute;
  margin: 0 auto;
  width: 50%;
  right: 0;
  left: 0;
  top: calc(50% - 8rem);
}

.mv-txt p:nth-of-type(1) {
  background: #fff;
  padding: 0 0.75em;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 2rem auto;
}

.mv-txt p:nth-of-type(2) {
  background: #fff;
  padding: 0 1.5rem;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 0 0;
}

#recruit-mv .mv,
#recruit-mv .mv .image.pc {
  /* height: 95vh; */
  height: calc(1070 / var(--width) * 100vw);
  min-height: 50vw;
}

#recruit-mv .mv .image.pc img {
  width: auto;
  min-width: 100%;
  object-fit: cover;
  position: relative;
  left: 50%;
  translate: -50% 0;
}
:has(.c-wave) {
  position: relative;
}
.c-wave {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: calc(300 / var(--width) * 100vw);
  background-image: url("../images/nami-1.png");
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  margin-bottom: -1%;
  overflow: hidden;
}
/* メッセージ */
.recruit-message {
  background: url("../images/nami-nomal.jpg");
  color: var(--col--bg);
  text-align: center;
  position: relative;
  padding-bottom: var(--margin-100);
}

.recruit-message .icon {
  margin: var(--margin-20) auto var(--margin-60) auto;
}

.recruit-message::before {
  /* 海賊船の画像 */
  content: "";
  background: url("../images/boat.png") no-repeat;
  background-size: 100%;
  display: block;

  width: calc(320 / var(--width) * 100vw);
  height: calc(320 / var(--width) * 100vw);
  /* width: 26%; */
  /* height: 90%; */
  position: absolute;
  z-index: 2;
  top: -15%;
  left: 5%;
  /* top: -46%; */
  /* left: 10%; */
  filter: drop-shadow(-6px 5px 0 var(--col--bg));
  animation: yura1 5s infinite linear;
}

.recruit-message .txt {
  font-size: calc(20 / var(--width) * 100vw);
  font-weight: 600;
  line-height: 2.5;
}

.recruit-message .txt p:not(:last-child) {
  margin-top: var(--margin-20);
}

@keyframes yura1 {
  0%,
  100% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}
.recruit-message::after {
  /* サメの画像 */
  content: "";
  background: url("../images/recruit-bg--shark.png");
  background-size: 100%;
  background-repeat: no-repeat;
  display: block;
  width: 30%;
  height: 40%;
  position: absolute;
  filter: drop-shadow(-6px 5px 0 var(--col--bg));
  right: 10%;
  bottom: -30%;
  animation: suui 10s infinite linear;
  z-index: 100;
}

@keyframes suui {
  0% {
    right: -100%;
  }
  100% {
    right: 100%;
  }
  0%,
  100% {
    translate: 0 50px;
  }
  50% {
    translate: 0 0;
  }
}
/*区切り波１*/
.nami-2:nth-of-type(1) {
  margin-bottom: -5%;
}

/*区切り波２*/
.nami-2:nth-of-type(2) {
  transform: rotate(180deg);
  margin-top: -5%;
}

/* WANTED */
.wanted {
  background: url("../images/recruit_bg-wood.jpg");
  background-size: 100% 100%;
  padding: var(--margin-120) 0 0 0;
}

.wanted-cont {
  background: url("../images/recruit-wanted.png") no-repeat;
  background-position: top center;
  background-size: contain;
  display: block;
  width: 100%;
  /* height: 1000px; */
  height: 80vw;
  max-height: calc(1250 / var(--width) * 100vw);
  position: relative;
  margin: var(--margin-100) auto 0;
}

.wanted-cont .inner {
  width: 70%;
  margin: 0 auto;
  padding: 2em 2em 0;
  position: absolute;
  top: 15vw;
  right: 0;
  left: 0;
  text-align: center;
}

.wanted-cont .inner .img-cont {
  margin-bottom: 1.5em;
  mix-blend-mode: darken;
  border: calc(10 / var(--width) * 100vw) solid;
}

.wanted-cont p {
  font-size: calc(18 / var(--width) * 100vw);
  font-weight: 600;
}

/* .wanted-cont p {
  position: absolute;
  text-align: center;
  width: 40%;
  margin: 0 auto;
  bottom: 14vw;
  right: 0;
  left: 0;
} */
.wanted .fukidashi {
  gap: 10%;
  align-items: center;
}

.wanted .fukidashi .fukidashi-1,
.wanted .fukidashi .fukidashi-2 {
  position: relative;
  width: 45%;
  /* padding: 3%; */
  padding: 2em 2em;
  font-size: calc(18 / var(--width) * 100vw);
  font-weight: 600;
  background: var(--col--bg);
  border-radius: 2vw;
}

.wanted .fukidashi .fukidashi-1 {
  margin-top: 5%;
}

.wanted .fukidashi .fukidashi-1::after {
  content: "";
  display: block;
  width: 3em;
  height: 3em;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--col--bg);
  position: absolute;
  bottom: -2em;
  transform: rotate(-25deg);
  right: 3%;
}

.wanted .fukidashi .fukidashi-2::after {
  content: "";
  display: block;
  width: 3em;
  height: 3em;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--col--bg);
  position: absolute;
  bottom: -2em;
  transform: rotate(25deg);
}

.wanted .human-img {
  width: 30%;
  margin: 5% auto -8px auto;
}

.wanted-stamp {
  max-width: 250px;
  width: 25vw;
  position: absolute;
  top: 2.5%;
  right: -2%;
}

.wanted-stamp.is-scroll {
  animation: wanted-stamp 0.75s forwards;
}

@keyframes wanted-stamp {
  0% {
    scale: 2;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    scale: 1.25;
  }
  100% {
    scale: 1;
  }
}
.nami-2 {
  background: url("../images/nami-nomal.jpg");
}

.nami-2.to-bottom img {
  animation: section-wave 5s ease-in-out infinite;
}

.nami-2.to-top {
  background-repeat: repeat-x;
  background-size: 100% 80%;
}

.nami-2.to-top img {
  animation: section-wave 5s ease-in-out infinite;
}

@keyframes section-wave {
  0%,
  100% {
    translate: 0 10%;
  }
  50% {
    translate: 0 0;
  }
}
/* 福利厚生 */
.recruit-welfare {
  margin-top: -1px; /*画像間若干空きが出るため調整*/
}

.recruit-welfare .welfare-bg {
  background: url("../images/nami-nomal.jpg") repeat-y;
  background-size: 100%;
}

.recruit-welfare .container {
  position: relative;
  z-index: 1;
}

.recruit-welfare .container h2.title {
  color: var(--col--bg);
  text-align: center;
}

.recruit-welfare .container .icon:nth-of-type(1) {
  margin: var(--margin-20) auto var(--margin-60) auto;
}

.welfare-list {
  margin-bottom: var(--margin-60);
  gap: var(--margin-20);
}

.welfare-list li {
  background: var(--col--bg);
  padding: 3em 1.5em 2em;
  border-radius: 2vw;
  width: 100%;
  max-width: calc(33.3333333333% - var(--margin-20));
  flex-direction: column;
  gap: 1.5em;
  text-align: justify;
}

.welfare-list li .img {
  width: 8em;
  height: 8em;
  max-width: var(--margin-80);
  max-height: var(--margin-80);
  margin: 0 auto;
}

.welfare-list li .title {
  font-size: calc(28 / var(--width) * 100vw);
  font-weight: 600;
  color: var(--col--accent);
  text-align: center;
}

.welfare-list::before,
.welfare-list::after {
  content: "";
  display: block;
  width: 8vw;
  height: 9vw;
  background: url("../images/awa.svg") no-repeat;
  background-size: 100%;
  position: absolute;
}

.welfare-list::before {
  top: 4vw;
  left: -5vw;
}

.welfare-list::after {
  bottom: 4vw;
  right: -5vw;
}

.welfare-content_2 .title {
  margin-bottom: var(--margin-60);
}

.welfare-content_2 ul.other {
  max-width: 90%;
  margin: 0 auto;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: var(--margin-20) var(--margin-10);
}

.welfare-content_2 ul.other li {
  position: relative;
  width: auto;
  padding: 0.2em 1.25em;
  font-size: calc(20 / var(--width) * 100vw);
  color: var(--col--bg);
  border: 2px solid;
  border-radius: 100vh;
  text-align: center;
}

.welfare-content_2 ul.other li:nth-child(2n + 1) {
  background-color: rgba(0, 52, 87, 0.5);
}

.welfare-content_2 ul.other li::before,
.welfare-content_2 ul.other li::after {
  content: "";
  position: absolute;
}

.welfare-content_2 ul.other li::before {
  width: 10%;
  max-width: 20px;
  height: 50%;
  left: 0.2em;
  top: 0.15em;
  border: 2px solid;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-top-left-radius: 90vh;
  opacity: 0.5;
}

.welfare-content_2 ul.other li::after {
  background-image: url("../images/welfare-others-design02.svg");
  background-size: contain;
  width: calc(25 / var(--width) * 100vw);
  height: 100%;
  background-repeat: no-repeat;
  top: -10%;
  right: -0.85em;
}

/* 1日の流れ */
.flow .container {
  margin-top: var(--margin-100);
  margin-bottom: var(--margin-100);
}

.flow .title {
  text-align: center;
  margin-bottom: var(--margin-60);
}

.flow .flow-content {
  max-width: 911px;
  margin: 0 auto;
}

.flow .flow-content .cont {
  align-items: center;
}

.flow .flow-content .cont:not(:last-child) {
  margin-bottom: var(--margin-40);
}

.flow .flow-content .cont .time {
  width: 10%;
  font-weight: bold;
  font-size: 1.2rem;
}

.flow .flow-content .cont .dot {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 100vh;
  background: var(--col--accent);
  position: relative;
}

.flow .flow-content .cont:not(:last-child) .dot::before {
  content: "";
  width: 3px;
  /* height: 7em; */
  height: calc(100% + 5em);
  background: var(--col--accent);
  position: absolute;
  top: 0;
  margin: 0 auto;
  right: 0;
  left: 0;
}

.flow .flow-content .cont .txt {
  margin-left: 4rem;
}

.flow .flow-content .cont .txt .blue {
  color: var(--col--assort);
  font-size: 1.5rem;
  font-weight: bold;
}

.bottom-content .flex {
  align-items: center;
  justify-content: flex-end;
  margin-right: -5%;
  margin-left: var(--margin-40);
  padding-bottom: var(--margin-100);
  /* padding-bottom: 7.5%; */
}

.bottom-content .img {
  width: 35%;
  animation: yura1 5s infinite linear; /*上の船のアニメーションを引用*/
}

.bottom-content .fukidashi {
  background: var(--col--assort);
  max-width: 60%;
  /* width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content; */
  border-radius: 2em;
  padding: 2em;
  color: var(--col--bg);
  position: relative;
  margin-bottom: 25%;
}

.bottom-content .fukidashi::after {
  content: "";
  display: block;
  width: 3em;
  height: 3em;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--col--assort);
  position: absolute;
  bottom: -2em;
  right: 2em;
  transform: rotate(-25deg);
}

.bottom-content .nami-img {
  /* margin-top: -8em; */
  margin-top: -18%;
  position: relative;
}

/* 募集要項 */
.requirements .container {
  margin: var(--margin-100) auto;
}

.requirements .title {
  text-align: center;
}

.requirements .icon {
  margin: var(--margin-20) auto var(--margin-60) auto;
}

.requirements .content {
  background: url("../images/kami-bg.png") no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  padding: 20% 10%;
  /* padding: 1em; */
  font-size: 15px;
}
.requirements .content table tr {
  border-bottom: 1px solid;
}

.requirements .content table {
  width: 80%;
  margin: 0 auto;
}

.requirements .content .button {
  width: 80%;
  margin: 0 auto 3% auto;
  gap: 1em;
  flex-wrap: wrap;
  justify-content: end;
}

.requirements input[type="radio"] {
  display: none;
}

.requirements .tab_class span {
  padding: 1em 3em;
  border: 1px solid;
  cursor: pointer;
  font-weight: bold;
  display: block;
}

.requirements input[type="radio"]:checked + .tab_class span {
  background: var(--col--txt);
  color: var(--col--bg);
  border: var(--col--txt) 1px solid;
}

/* ----------------------------------------

｜　フォーム設定

---------------------------------------- */
/* 基本
---------------------------------------- */
label:has(input[type="radio"]),
input[type="submit"] {
  cursor: pointer;
}

/* 送信 */
dt {
  width: 40%;
}

dd {
  width: 60%;
}

form {
  text-align: center;
}
form .c-table-wrap input,
form .c-table-wrap textarea {
  padding: 2%;
  width: 100%;
  background: #f5f5f5;
  border: 1px solid #9d9d9d;
  font-size: 1rem;
}
.c-table-inner {
  display: flex;
  flex-direction: row;
}
.c-table-inner span.require {
  display: inline-block;
  padding: 2%;
  background: var(--col--accent);
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.c-table-inner textarea {
  min-height: calc(200 / var(--width) * 100vw);
  line-height: 1.5;
}
.c-table-inner .flex.column {
  gap: var(--margin-20);
}
.c-table-inner input[type="text"],
.c-table-inner input[type="email"] {
  width: 100%;
  max-width: calc(360 / var(--width) * 100vw);
  /* min-width: calc(360 / var(--width) * 100vw); */
  height: calc(40 / var(--width) * 100vw);
}
.c-table-inner .textarea.short {
  width: auto;
  min-width: calc(200 / var(--width) * 100vw);
}
form .form-submit {
  text-align: center;
  margin-top: var(--margin-60);
}
form .form-submit input[type="submit"] {
  border: none;
}
form .form-submit button.btn.btn-square {
  display: inline-flex;
  font-size: 1.15em;
}

.error-message {
  font-size: var(--font-size--small);
  color: #ee2b00;
  display: none;
}

/* ラジオボタン
---------------------------------------- */
fieldset {
  border: none;
}

.c-form-check input[type="radio"] {
  display: none;
}

.c-form-check input[type="radio"] + label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5em;
}

.c-form-check input[type="radio"] + label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid #e6edf3;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s, background-color 0.2s;
}

.c-form-check input[type="radio"] + label::after {
  content: "";
  position: absolute;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.c-form-check input[type="radio"]:checked + label::after {
  background-color: var(--col--assort);
}

.c-form-check label span {
  font-size: 1rem; /* 必要に応じて調整 */
  color: #333;
}

@keyframes anim-radio-1 {
  0% {
    box-shadow: 0 0 0 1px transparent;
  }
  50% {
    box-shadow: 0 0 0 10px rgba(19, 121, 177, 0.2);
  }
  100% {
    box-shadow: 0 0 0 10px transparent;
  }
}
/* ----------------------------------------
｜　プライバシーポリシー
---------------------------------------- */
.policy-wrap .policy-cont .title {
  margin-bottom: var(--margin-20);
  color: var(--col--assort);
}

.policy-wrap .policy-cont:not(:last-child) {
  margin-bottom: var(--margin-40);
}

/* ----------------------------------------
｜　サイトマップ
---------------------------------------- */
ul.c-sitemap-cont li {
  font-size: 1.25rem;
  padding-top: var(--margin-20);
}

/* アニメ
---------------------------------------- */
@media (any-hover: hover) {
  /* リンク
  ---------------------------------------- */
  /* 文字 */
  a:not([class]) {
    transition: var(--transition-fast);
  }
  a:not([class]):hover {
    opacity: 0.75;
  }
  /* ボタン */
  .btn,
  .btn > * {
    transition: var(--transition-fast);
  }
  .btn {
    position: relative;
    z-index: 5;
  }
  .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: var(--transition-fast);
    z-index: -1;
  }
  .btn:hover::before {
    width: 100%;
  }
  .btn:hover span.arrow {
    transform: translateX(2.5em);
  }
  .btn:hover span.arrow::after {
    animation: arrow-rotate 0.3s forwards;
  }
  @keyframes arrow-rotate {
    0%,
    50%,
    100% {
      height: 0.45em;
      transform: rotate(45deg);
    }
    25%,
    75% {
      height: 0;
      transform: rotate(0deg);
    }
  }
  .p-top-service-list__wrap li .p-top-service-list__counter,
  .p-top-service-list__wrap li .p-top-service-list__counter::after {
    transition: var(--transition-fast);
  }
  .p-top-service-list__wrap li:hover .p-top-service-list__cont {
    opacity: 0;
  }
  .p-top-service-list__wrap li:hover .p-top-service-list__counter {
    width: 0;
    opacity: 0;
  }
  .p-top-service-list__wrap
    li:hover
    .p-top-service-list__cont
    ul.p-news-list__wrap
    li {
    position: relative;
  }
  ul.p-news-list__wrap li::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background: #f5f5f5;
    transition: 0.5s ease;
    opacity: 0;
    z-index: -1;
  }
  ul.p-news-list__wrap li:hover::before {
    width: 100%;
    opacity: 1;
  }
  /*--- カテゴリ ---*/
  ul.categories li.cat-item a:hover {
    background: var(--col--txt);
    color: #fff;
  }
  /*--- 採用 追従バナー ---*/
  .c-fixed-recruit_banner--cont.p-btn-recruit {
    transition: 0.3s ease;
  }
  .c-fixed-recruit_banner--cont.p-btn-recruit:hover {
    padding-right: var(--margin-40);
    background-color: #ff7316;
    opacity: 1;
  }
}
/* ----------------------------------------

最大

---------------------------------------- */
@media screen and (min-width: 1580px) {
  :root {
    --width: 1780;
    --font-size: calc(18 / var(--width) * 100vw);
    --margin-cont__lower: calc(180 / var(--width) * 100vw);
  }
  main {
    margin-top: calc(85 / var(--width) * 100vw);
  }
  header .header-menu .container {
    height: calc(85 / var(--width) * 100vw);
  }
  .lower-title__cont,
  .lower-title__img.img-cont,
  .lower-title__cont .container {
    max-height: 75vh;
  }
  .lower-title__img {
    align-items: center;
  }
  .lower-title__cont .bg-text {
    font-size: 10rem;
  }
  .company-intro .twoCol.c-textContOnImg .col-1 .img-cont {
    width: calc(680 / var(--width) * 100vw);
    height: calc(580 / var(--width) * 100vw);
  }
}
@media screen and (max-width: 1040px) {
  :root {
    --width: 960;
    /* width */
    --max-width: calc(840 / var(--width) * 100vw);
    --max-width__large: calc(900 / var(--width) * 100vw);
    --max-width__small: calc(578 / var(--width) * 100vw);
  }
  /* ----------------------------------------
  ｜　共通設定
  ---------------------------------------- */
  main {
    margin-top: calc(80 / var(--width) * 100vw);
  }
  .twoCol.c-textContOnImg [class*="col-"]:has(.text) {
    padding: calc(20 / var(--width) * 100vw);
  }
  /**********************
  ヘッダー
  ***********************/
  header .header-menu .container {
    margin: 0 var(--margin-20);
    height: calc(80 / var(--width) * 100vw);
    font-size: 0.85rem;
  }
  /**********************
  お問い合わせ
  ***********************/
  .p-tel-cont .tel.en span {
    font-size: calc(42 / var(--width) * 100vw);
  }
  .p-tel-cont .tel.en::before {
    width: calc(30 / var(--width) * 100vw);
    height: calc(40 / var(--width) * 100vw);
  }
  /**********************
  事業内容
  ***********************/
  .service-feature .twoCol .title.counter::before {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.25;
  }
}
/* ----------------------------------------

SP

---------------------------------------- */
/* ipad */
@media screen and (min-width: 769px) {
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --width: 800;
    --margin-cont__large: calc(100 / var(--width) * 100vw);
    --margin-cont__normal: calc(80 / var(--width) * 100vw);
    --margin-cont__lower: calc(60 / var(--width) * 100vw); /* 上下 */
    /* 余白 */
    --margin-120: calc(100 / var(--width) * 100vw);
    --margin-100: calc(80 / var(--width) * 100vw);
    --margin-80: calc(60 / var(--width) * 100vw);
    --margin-60: calc(40 / var(--width) * 100vw);
    --margin-40: calc(30 / var(--width) * 100vw);
    --margin-20: calc(20 / var(--width) * 100vw);
    --margin-10: calc(10 / var(--width) * 100vw);
    /* font */
    --font-size: calc(15 / var(--width) * 100vw);
    --font-size--big: calc(30 / var(--width) * 100vw);
    --font-size--mid: calc(24 / var(--width) * 100vw);
    --font-size--small: calc(13 / var(--width) * 100vw);
    /* max-width */
    --max-width: calc(640 / var(--width) * 100vw);
    --max-width__large: calc(700 / var(--width) * 100vw);
    --max-width__small: calc(560 / var(--width) * 100vw);
  }
  /* 
  共通ヘッダー
  ---------------------------------------- */
  header {
    background-color: #fff;
    height: calc(77 / var(--width) * 100vw);
  }
  .logo img {
    max-width: calc(360 / var(--width) * 100vw);
  }
  main {
    margin-top: calc(77 / var(--width) * 100vw);
  }
  .pankuzu__wrap ul.pankuzu {
    font-size: 13px;
  }
  /* ----------------------------------------
  ｜　共通設定
  ---------------------------------------- */
  .btn {
    min-width: auto;
  }
  .btn.btn-square {
    padding: 0;
  }
  .pankuzu__wrap {
    padding: 1em 0;
  }
  .pankuzu__wrap ul.pankuzu li:nth-child(-n + 2)::after {
    height: 1em;
  }
  .title__l {
    /* font-size: 2.5em; */
    font-size: calc(28 / var(--width) * 100vw);
  }
  .s-top .bg-text {
    font-size: calc(180 / var(--width) * 100vw);
  }
  /**********************
  下層
  ***********************/
  .lower-title__cont .container h1 {
    font-size: calc(42 / var(--width) * 100vw);
  }
  /**********************
  トップページ
  ***********************/
  .top-mv .container .line {
    display: none;
  }
  .top-mv .container h1.title {
    font-size: calc(48 / var(--width) * 100vw);
  }
  .top-mv .container h1.title span:last-child {
    margin-top: 0.25em;
  }
  .top-mv .top-mv--img .img-cont {
    width: 95vw;
  }
  .top-mv--text.text.pc {
    display: none;
  }
  .top-mv--text.text.sp {
    display: block;
  }
  /*-- お知らせ --*/
  #top-news .col-1 {
    width: 30%;
  }
  #top-news .col-2 {
    width: 65%;
  }
  #top-news h2.title {
    display: inline-block;
    padding-bottom: var(--margin-20);
    border-right: none;
    border-bottom: 5px solid var(--col--accent);
  }
  ul.p-news-list__wrap li {
    flex-direction: column;
    gap: 0;
    padding: var(--margin-10);
  }
  /*--- 会社概要 ---*/
  #top-company .twoCol {
    gap: 0;
  }
  #top-company .twoCol .col-1.img-cont,
  #top-company .twoCol .col-2 {
    width: 50%;
  }
  #top-company .twoCol .col-2.text-cont {
    padding: var(--margin-40);
  }
  /*--- 事業内容 ---*/
  .p-top-service-list__wrap li .text {
    max-width: none;
  }
  .p-top-service-list__cont h4 {
    font-size: var(--font-size--mid);
  }
  .p-top-service-list__counter {
    max-width: 20%;
  }
  .p-top-service-list__counter::after {
    font-size: 5em;
  }
  /*--- 採用情報 ---*/
  #top-recruit h3.text__l {
    font-size: calc(48 / var(--width) * 100vw);
  }
  #top-recruit .p-top-recruit-staff {
    width: 90vw;
  }
  #top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment.rl.pc {
    display: none;
  }
  #top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment.tb.sp {
    display: inline-flex;
  }
  #top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment li {
    font-size: calc(15 / var(--width) * 100vw);
  }
  .c-fixed-recruit_banner--cont.p-btn-recruit {
    padding: 0.75em 0.65em;
  }
  .c-fixed-recruit_banner--cont.p-btn-recruit p {
    font-size: var(--font-size);
  }
  /*--- ブログ ---*/
  #top-blog .container .twoCol {
    width: 100%;
    justify-content: center;
  }
  #top-blog .top-blog--bg_img {
    left: auto;
    right: -5%;
    max-width: 30vw;
  }
  .p-blog--bg_fish__cont img {
    max-width: calc(180 / var(--width) * 100vw);
  }
  /**********************
  明治工業について
  ***********************/
  #top-company ul.p-top-company-gallery {
    gap: var(--margin-20);
  }
  #top-company ul.p-top-company-gallery li {
    max-width: calc(33.3333333333% - var(--margin-20));
  }
  /**********************
  事業内容
  ***********************/
  .service-feature .twoCol .title {
    font-size: var(--font-size--mid);
  }
  .c-service-list [class*="col-"]:has(.text) {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
  }
  .c-service-list [class*="col-"]:has(.img-cont)::before {
    width: 80%;
    height: 80%;
    right: 0;
    bottom: -1em;
  }
  /****** 対応する工事 ******/
  .p-service--detail__cont {
    margin-top: 0;
  }
  .p-service--detail__cont ul.p-service--detail__list li {
    width: calc(25% - var(--margin-20));
    padding: 1em;
    font-size: 1rem;
  }
  /**********************
  お知らせ
  ***********************/
  .news-cont .twoCol {
    flex-direction: column;
  }
  .news-cont .twoCol .col-1,
  .news-cont .twoCol .col-2 {
    width: 100%;
  }
  .news-cont .twoCol .col-1 ul.categories {
    margin-bottom: var(--margin-40);
  }
  .news-cont .twoCol .col-1 ul.categories li {
    display: inline-block;
  }
  /*--- ブログ ---*/
  .p-blog--bg_img {
    max-width: 45%;
    left: -5%;
  }
  /* ----------------------------------------
  ｜　🍔
  ---------------------------------------- */
  header .header-menu .container {
    width: 100%;
    height: calc(77 / var(--width) * 100vw);
    max-width: 90vw;
    margin: 0 auto;
    /* padding: 0 var(--margin-40); */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 10000;
  }
  header .header-menu .container a {
    font-size: calc(20 / var(--width) * 100vw);
  }
  header .header-menu .container .col-1 {
    max-width: 70%;
    width: auto;
  }
  header .header-menu .container .col-2 {
    display: block;
    visibility: hidden;
    position: absolute;
    top: calc(77 / var(--width) * 100vw);
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: var(--transition);
  }
  header .header-menu .container .col-2 .menu-nav {
    width: 100%;
    max-width: var(--max-width);
    height: 100vh;
    margin: 0 auto;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }
  header .header-menu .container .col-2 .menu-nav ul.flex {
    width: 100%;
    /* flex-direction: column; */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
    margin-top: var(--margin-20);
  }
  header .header-menu .container .col-2 .menu-nav ul.flex li {
    /* width: 100%; */
    width: 45%;
    display: inline-flex;
    opacity: 0;
    translate: 0 25%;
    transition: var(--transition);
  }
  header .header-menu.is-open .container .col-2 .menu-nav ul.flex li {
    translate: 0 0;
    opacity: 1;
  }
  header .header-menu .container .col-2 .menu-nav ul.flex li a {
    width: 100%;
    padding: var(--margin-40) 0;
    color: #fff;
  }
  header .header-menu .container .col-2 .menu-nav ul.flex li ::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: var(--transition);
    transition-delay: 0.5s;
  }
  header .header-menu .container .col-2 .menu-nav ul.flex li.pc {
    display: none;
  }
  header .header-menu .container .col-2 .sp-menu {
    width: 100%;
    visibility: hidden;
    opacity: 0;
    translate: 0 25%;
    transition: var(--transition);
    transition-delay: 0s;
  }
  header .header-menu .container .col-2 .sp-menu [class*="p-btn-"] a {
    max-width: none;
    min-height: auto;
    padding: calc(20 / var(--width) * 100vw);
  }
  header .header-menu .container .col-2 .sp-menu [class*="p-btn-"] a p::before {
    padding-right: 0.5em;
    vertical-align: middle;
  }
  header .header-menu.is-open .container .col-2 {
    visibility: visible;
    z-index: -1;
  }
  header .header-menu.is-open .container .col-2 .menu-nav ul.flex li ::before {
    width: 100%;
  }
  header .header-menu.is-open .container .col-2 .menu-nav .sp-menu {
    visibility: visible;
    translate: 0 0;
    opacity: 1;
    transition-delay: 0.75s;
  }
  header .header-menu .sp {
    display: block;
  }
  .header-policy,
  .header-sitemap,
  .header-contact,
  .header-news {
    background-position: left;
  }
  /*--- バーガー ---*/
  .hamburger.bg-assort {
    position: relative;
    display: inline-block;
    padding: calc(20 / var(--width) * 100vw) calc(16 / var(--width) * 100vw);
    width: calc(60 / var(--width) * 100vw);
    height: calc(60 / var(--width) * 100vw);
    border-radius: 100px;
  }
  .hamburger.bg-assort .menu-toggle {
    position: relative;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .hamburger.bg-assort .menu-toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: inline-block;
    background: #fff;
    width: 100%;
    height: 2px;
    transition: var(--transition-fast);
  }
  .hamburger.bg-assort .menu-toggle span:first-child {
    top: 0;
  }
  .hamburger.bg-assort .menu-toggle span:nth-last-child(2) {
    top: auto;
    bottom: 0;
  }
  .hamburger.bg-assort .menu-toggle span:last-child {
    top: 50%;
    translate: -50% -50%;
  }
  .is-open .hamburger.bg-assort span:first-child {
    rotate: -45deg;
    top: 50%;
  }
  .is-open .hamburger.bg-assort span:nth-last-child(2) {
    rotate: 45deg;
    top: 50%;
    bottom: auto;
  }
  .is-open .hamburger.bg-assort span:last-child {
    opacity: 0;
  }
  /* エントリー */
  a.goal-btn.bg-grd {
    font-size: calc(24 / var(--width) * 100vw);
    width: 100%;
    height: auto;
    padding: calc(30 / var(--width) * 100vw);
    margin-top: var(--margin-40);
  }
  /* スクロール不可 */
  html:has(header .header-menu.is-open) {
    overflow: hidden;
  }
  .lower-title__cont .container.cont__l {
    width: 90vw;
  }
  .lower-title__cont .bg-text {
    font-size: 4rem;
  }
  .lower-title__img {
    min-height: auto;
    height: 32vh;
  }

  /**********************
  会社案内
  ***********************/
  #company-message .c-service-list .col-2 {
    width: 80%;
  }
  #company-message .c-service-list .img-cont {
    width: calc(200 / var(--width) * 100vw);
    height: calc(300 / var(--width) * 100vw);
  }
  .wp-block-table table.has-fixed-layout tbody tr td {
    padding: 0.75em;
    border: none !important;
  }
  .wp-block-table table.has-fixed-layout tbody tr td:first-child {
    font-weight: 600;
  }
  /**********************
  採用
  ***********************/
  #recruit-mv .mv,
  #recruit-mv .mv .image.pc {
    height: 80vh;
  }
  .c-wave {
    max-height: calc(150 / var(--width) * 100vw);
  }
  .recruit .icon {
    width: 8%;
  }
  /* MV */
  .mv-txt {
    font-size: calc(27 / var(--width) * 100vw);
    top: 40%;
  }
  .recruit-message::before {
    width: 30%;
    height: 47%;
    left: 4%;
  }
  .recruit-message::after {
    width: calc(200 / var(--width) * 100vw);
    height: calc(60 / var(--width) * 100vw);
    bottom: 2%;
  }
  .recruit-message .message-text {
    max-width: var(--max-width);
    margin: 0 auto;
  }
  .nami-2 {
    margin-top: -1px;
  }
  /* WANTED */
  .wanted-cont {
    height: 100vw;
  }
  .wanted-cont .inner .img-cont {
    margin-top: 1rem;
  }
  .wanted-cont p {
    /* width: 55%; */
    bottom: 11vw;
  }
  .wanted .human-img {
    width: 47%;
  }
  /* 福利厚生 */
  .welfare-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3%;
  }
  .welfare-list .img {
    width: 5em;
    height: 5em;
  }
  .welfare-content_2 .other p {
    font-size: calc(17 / var(--width) * 100vw);
  }
  .welfare-list::before,
  .welfare-list::after {
    width: 11vw;
    height: 13vw;
  }
  .welfare-list::before {
    top: 15vw;
    left: -2vw;
  }
  .welfare-list::after {
    bottom: 8vw;
    right: -3vw;
  }
  /* 1日の流れ */
  .flow .flow-content .cont .txt {
    margin-left: 2%;
  }
  .bottom-content .flex {
    max-width: var(--max-width);
    margin: 0 auto;
  }
  .bottom-content .img {
    width: 100%;
  }
  .bottom-content .nami-img {
    margin-top: -5em;
  }
  .bottom-content .fukidashi {
    max-width: 100%;
  }
  /* 募集要項 */
  .requirements .container {
    max-width: 90%;
  }
  .content table {
    width: 90%;
  }
  .requirements .content .button {
    width: 100%;
  }
}
/* スマホ */
@media screen and (max-width: 460px) {
  :root {
    --width: 375;
    /* font */
    --font-size: calc(14 / var(--width) * 100vw);
    --font-size--big: calc(28 / var(--width) * 100vw);
    --font-size--mid: calc(24 / var(--width) * 100vw);
    --font-size--small: calc(13 / var(--width) * 100vw);
    /* max-width */
    --max-width: calc(340 / var(--width) * 100vw);
    --max-width__large: calc(350 / var(--width) * 100vw);
    --max-width__small: calc(320 / var(--width) * 100vw);
  }
  /* ----------------------------------------
  ｜　共通設定
  ---------------------------------------- */
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  /* dt,
  th {
    padding-top: 0;
  }
  dd,
  td {
    padding: 0 0 var(--margin-60) 0;
  } */
  th,
  dd,
  td {
    display: block;
    width: 100%;
    border: none;
  }
  .text.long {
    line-height: 2.2;
  }
  .container.cont__s {
    max-width: var(--max-width);
  }
  .flex.row {
    flex-direction: column;
  }
  .twoCol {
    flex-direction: column;
  }
  [class*="Col"] {
    flex-direction: column;
    gap: var(--margin-60);
  }
  [class*="Col"] .col-1,
  [class*="Col"] .col-2 {
    width: 100%;
  }
  .twoCol.c-textContOnImg {
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
  .twoCol.c-textContOnImg .img-cont {
    width: var(--max-width);
    margin-right: auto;
    margin-left: auto;
    min-height: auto;
    display: flex;
  }
  .twoCol.c-textContOnImg [class*="col-"]:has(.img-cont) {
    width: 100%;
    order: 1;
  }
  .twoCol.c-textContOnImg [class*="col-"] {
    order: 2;
  }
  .twoCol.c-textContOnImg [class*="col-"]:has(.text) {
    width: var(--max-width) !important;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 0;
    transform: unset;
  }
  .twoCol.c-textContOnImg .col-1:has(.img-cont) {
    margin: 0;
  }
  /* ----------------------------------------
  ｜　パーツ
  ---------------------------------------- */
  .contact-cont .twoCol .col-1 {
    border: none;
  }
  /* リンクボタン */
  .btn {
    width: 100%;
    text-align: center;
  }
  /* 背景テキスト */
  .bg-text {
    opacity: 0.3;
  }
  .s-top .bg-text {
    font-size: calc(180 / var(--width) * 100vw);
    line-height: 0.5;
  }
  /* 見出し
  ---------------------------------------- */
  .title.bg-grd span {
    padding: 0.15em 0.5em;
  }
  .title.bg-grd span:nth-child(2) {
    margin-top: 0.5em;
  }
  /* 下層
  ---------------------------------------- */
  .s-lower .title {
    margin-bottom: var(--margin-40);
  }
  .p-single__title-cont h2.title {
    font-size: var(--font-size--mid);
  }
  .bg-text {
    font-size: calc(140 / var(--width) * 100vw);
  }
  /* 共通ヘッダー
  ---------------------------------------- */
  header .header-menu .container a {
    font-size: var(--font-size);
  }
  header .header-menu .container .col-2 .menu-nav ul.flex li {
    width: 100%;
  }
  header .header-menu .container .col-2 .menu-nav ul.flex li a {
    padding: var(--margin-20);
  }
  /* 共通フッター
  ---------------------------------------- */
  .footer-cont .twoCol .col-1,
  .footer-cont .twoCol .col-2 {
    width: 100% !important;
  }
  footer .p-footer-menu-cont .menu {
    flex-wrap: wrap;
    flex-direction: row;
  }
  footer .p-footer-menu-cont .menu li {
    width: 50%;
  }
  footer .p-footer-menu-cont .menu .sub-menu {
    flex-direction: row;
  }

  /**********************
  トップページ
  ***********************/
  /*-- MV --*/
  .top-mv {
    margin-bottom: 0;
    max-height: 90vh;
  }
  .top-mv .container h1.title {
    font-size: calc(32 / var(--width) * 100vw);
  }
  /* .top-mv .top-mv--img .img-cont {
    height: calc(240 / var(--width) * 100vw);
  } */
  /*-- お知らせ --*/
  .col-1,
  .col-2 {
    width: 100% !important;
  }
  ul.p-news-list__wrap li {
    padding-left: 0;
    padding-right: 0;
  }
  /*-- 明治工業について --*/
  #top-company {
    padding-top: 0;
    margin-top: var(--margin-100);
  }
  #top-company .twoCol {
    transform: translateY(-10%);
  }
  #top-company .twoCol .col-1.img-cont {
    width: 100%;
    max-height: 60vw;
  }
  #top-company .twoCol .col-2.text-cont {
    padding: var(--margin-40) var(--margin-20);
    text-align: center;
  }
  .p-top-intro__cont {
    background-size: 180%;
    padding: calc(100 / var(--width) * 100vw) 0;
  }
  .p-top-intro__cont .text {
    background-size: 180%;
    width: var(--max-width__large);
    margin: 0 auto;
  }
  #top-service .twoCol .col-1.p-top-service-img-list {
    padding: 0;
    margin: 0 auto;
  }
  /*-- parallax --*/
  .parallax-cont.img-cont {
    height: calc(250 / var(--width) * 100vw);
  }
  #top-company ul.p-top-company-gallery {
    justify-content: center;
    flex-direction: row;
    gap: 0.5em;
  }
  #top-company ul.p-top-company-gallery li {
    max-width: calc(50% - 0.5em);
  }
  /* #top-company .p-top-company-gallery__wrap.container {
    bottom: -2em;
  } */
  /*-- 事業紹介 --*/
  .p-top-service-list__wrap li {
    flex-direction: column;
  }
  /* カウンター */
  .p-top-service-list__counter {
    max-width: none;
    order: 1;
    padding: var(--margin-10);
    background: linear-gradient(
      180deg,
      #003457 0%,
      #04466e 20%,
      #0c6192 54%,
      #1172a8 82%,
      #1379b1 100%
    );
  }
  .p-top-service-list__wrap
    li:nth-child(2)
    .p-top-service-list__counter::before,
  .p-top-service-list__counter::before {
    background: #1379b1;
    left: 50% !important;
    right: auto;
    bottom: -1em;
    width: 5%;
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translateX(-50%);
    height: calc(20 / var(--width) * 100vw);
    z-index: 10;
  }
  .p-top-service-list__counter::after {
    font-size: calc(40 / var(--width) * 100vw);
  }
  .p-top-service-list__cont {
    padding: var(--margin-60) var(--margin-20);
    order: 2 !important;
  }
  /*--- 採用情報 ---*/
  #top-recruit .container.center {
    text-align: left;
  }
  #top-recruit .container.center .text-cont h2.title.underline {
    align-items: flex-start;
    font-size: var(--font-size--mid);
  }
  #top-recruit .container.center .text-cont h2.title.underline::after {
    width: 20%;
  }
  #top-recruit h3.text__l {
    font-size: var(--font-size--big);
  }
  #top-recruit .text-cont .p-recruit-bgImg__fish {
    max-width: 35vw;
    top: -10em;
  }
  .is-scroll#top-recruit .text-cont .p-recruit-bgImg__fish {
    max-width: 35vw;
    top: -8em;
  }
  /* 画像 */
  #top-recruit .p-top-recruit__imgWrap {
    flex-direction: column;
    margin-top: var(--margin-40);
  }
  #top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment li {
    font-size: calc(13 / var(--width) * 100vw);
  }
  #top-recruit .p-top-recruit__imgWrap ul.p-top-recruit__comment.rl {
    top: -2em;
  }
  #top-recruit .p-top-recruit-staff {
    width: 95vw;
    max-width: none;
  }
  #top-recruit .p-top-recruit-staff .img-cont img.staff {
    width: 35%;
  }
  #top-recruit .p-top-recruit-staff .img-cont img.comment {
    width: 70%;
  }
  /*--- 社長ブログ ---*/
  #top-blog .container {
    box-shadow: 5px 10px 0 5px var(--col--accent);
  }
  #top-blog .container .twoCol {
    margin: 0 auto;
    padding: 5% 5% 10em;
  }
  #top-blog .container .col-1 {
    top: 0;
    left: -8.5%;
  }
  #top-blog .container .col-1 h2 {
    writing-mode: horizontal-tb;
  }
  #top-blog .container .col-1 h2 span {
    font-size: var(--font-size--mid);
    padding: var(--margin-10) var(--margin-20);
  }
  #top-blog .container .col-2 .text.text__m {
    font-size: 1.25em;
    line-height: 1.5;
  }
  #top-blog .container .col-2 {
    /* width: auto !important; */
    padding: 0;
  }
  #top-blog .top-blog--bg_img {
    width: 45%;
    max-width: none;
    right: auto;
    left: -8%;
  }
  /**********************
  会社案内
  ***********************/
  .company-intro .twoCol.c-textContOnImg {
    gap: 0;
  }
  .company-intro .twoCol.c-textContOnImg .col-1 {
    max-width: none;
  }
  .company-intro .twoCol.c-textContOnImg .col-1 .img-cont {
    width: 100%;
    height: 60vw;
  }
  .company-intro .twoCol.c-textContOnImg .col-2 {
    width: 100% !important;
    text-align: justify;
  }
  /* テーブル */
  .wp-block-table table.has-fixed-layout {
    border: none;
  }
  /* .wp-block-table table.has-fixed-layout tbody tr dd,
  td { */
  .wp-block-table table.has-fixed-layout tbody tr dd {
    padding: 0.5em;
    background: none;
    border: none;
  }
  .wp-block-table table.has-fixed-layout tbody tr td:first-child {
    max-width: none;
  }
  .wp-block-table
    table.has-fixed-layout
    tbody
    tr:nth-child(2n + 1)
    td:nth-child(2) {
    background: none;
  }
  .wp-block-table table.has-fixed-layout tbody tr td:nth-child(2) {
    border: none;
    margin-bottom: 1em;
  }
  /**********************
  事業内容
  ***********************/
  /****** ページ内リンク ******/
  .c-linkBanner__list {
    flex-direction: column;
    gap: var(--margin-20);
  }
  .c-linkBanner__list li {
    width: 100%;
  }
  .service-feature .twoCol {
    gap: 0;
  }
  .service-feature .twoCol .title {
    font-size: var(--font-size--mid);
  }
  .service-feature .twoCol .title.counter::before {
    font-size: calc(72 / var(--width) * 100vw);
    position: absolute;
    margin: 0;
    top: -0.75em;
    right: auto;
  }
  .service-content {
    width: 100%;
  }
  /****** 対応する工事 ******/
  .p-service--detail__cont ul.p-service--detail__list li {
    width: 100%;
  }
  .c-flow-list {
    gap: 0;
  }
  .c-flow-list li .title {
    font-size: 1.25em;
    width: 20%;
  }
  /**********************
  お知らせ
  ***********************/
  /*--- カテゴリ ---*/
  .news-cont ul.categories li.cat-item a {
    font-size: var(--font-size--small);
    width: auto;
    min-width: calc(100 / var(--width) * 100vw);
    background: var(--col--txt);
    color: #fff;
  }
  .news-cont .twoCol .col-1 ul.categories {
    margin-bottom: 0;
  }
  /*--- ブログ ---*/
  .p-blog_banner {
    padding-left: var(--margin-40);
  }
  .p-blog_banner__inner {
    width: 100%;
    max-width: 62.5%;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
  .p-blog--bg_img {
    left: auto;
    right: -5%;
  }
  /* 魚 */
  .p-blog--bg_fish__cont img {
    max-width: 40vw;
  }
  .p-blog--bg_fish__cont .fishAnime:nth-child(1) {
    right: 0;
    /* top: auto;
    bottom: 0; */
  }
  .p-blog--bg_fish__cont .fishAnime:nth-child(2) {
    /* top: auto; */
    /* right: -15%; */
    /* bottom: -20%; */
    right: -10%;
    max-width: 35vw;
  }
  .p-blog--bg_fish__cont .fishAnime:nth-child(3) {
    bottom: -25%;
    /* top: -10%; */
  }
  /**********************
  採用
  ***********************/
  #recruit-mv .mv .image.sp {
    height: 100%;
  }
  #recruit-mv .mv .image.sp img {
    object-fit: cover;
    object-position: 0 50%;
  }
  .recruit .icon {
    width: 10%;
  }
  /*MV*/
  .mv-txt {
    width: 90%;
    top: 30%;
  }
  .mv-txt p:nth-of-type(1) {
    margin: 0 0 0.5em 0;
  }
  #recruit-mv .nami-1 img {
    margin-top: -50px;
  }
  /* メッセージ */
  .recruit-message::before {
    top: -18%;
  }
  .recruit-message .txt {
    font-size: 15px;
  }
  /* WANTED */
  .wanted-cont {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    height: calc(500 / var(--width) * 100vw);
  }
  .wanted-cont .inner {
    width: 90%;
  }
  .wanted-cont p {
    text-align: justify;
    font-size: 0.8rem;
    line-height: 1.5;
    bottom: 16vw;
  }
  .wanted .fukidashi {
    flex-direction: column;
    gap: 2em;
  }
  .wanted .fukidashi .fukidashi-1,
  .wanted .fukidashi .fukidashi-2 {
    width: 70%;
    font-size: 0.85rem;
  }
  .wanted .fukidashi .fukidashi-1 {
    margin-right: auto;
  }
  .wanted .fukidashi .fukidashi-1::after {
    left: 30%;
  }
  .wanted .fukidashi .fukidashi-2 {
    margin-left: auto;
  }
  .wanted .fukidashi .fukidashi-2::after {
    right: 30%;
  }
  .wanted .human-img {
    width: 80%;
  }
  .nami-2:nth-of-type(2) {
    margin-top: -30px;
  }
  /* 福利厚生 */
  .welfare-list {
    flex-wrap: wrap;
    gap: 1em;
  }
  .welfare-list li {
    max-width: 100%;
  }
  .welfare-list .ttl h3 {
    font-size: 1.5rem;
  }
  .welfare-list .txt {
    font-size: 15px;
  }
  .welfare-content_2 .other {
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
  }
  .welfare-list::after,
  .welfare-list::before {
    width: 16vw;
    height: 18vw;
  }
  .welfare-list::after {
    /* bottom: 45vw; */
    bottom: -15vw;
    right: 5vw;
  }
  .welfare-content_2 ul.other {
    gap: var(--margin-10);
  }
  .welfare-content_2 ul.other li {
    font-size: var(--font-size);
  }
  /* １日の流れ */
  .flow .flow-content .cont {
    flex-direction: column;
    align-items: start;
  }
  .flow .flow-content .cont .txt,
  .flow .flow-content .cont .time {
    margin-left: 10%;
  }
  .flow .flow-content .cont .time {
    margin-bottom: -1.5em;
  }

  .flow .flow-content .cont:not(:last-child) .dot::before {
    height: 12em;
  }
  .bottom-content .flex {
    position: relative;
    /* bottom: -1em; */
    flex-direction: column;
    /* font-size: 15px; */
  }
  .bottom-content .img {
    width: 85%;
  }
  .bottom-content .nami-img {
    margin-top: -1.5em;
  }

  .bottom-content .fukidashi {
    margin-bottom: var(--margin-20);
  }
  .bottom-content .fukidashi::after {
    left: 3em;
  }
  /* 募集要項 */
  .requirements .content {
    background: none; /*spでは画像伸びるのでなし*/
    padding: 0;
    background: url("../images/sp-requirements_bg.png") repeat-y;
    background-size: 100%;
  }
  .requirements .img-top {
    display: flex;
  }
  .requirements .content .button {
    font-size: 15px;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin: 0 auto 20% auto;
  }
  .requirements .tab_class span {
    padding: 10px 0;
  }
  .requirements table td {
    padding-top: 0;
  }
  .requirements table tr:nth-of-type(1) {
    border-top: 1px solid;
  }
  .c-table-inner {
    flex-direction: column;
  }
  .c-table-inner dd {
    padding: 0;
  }
  dt,
  dd {
    width: 100%;
  }
} /*# sourceMappingURL=style.css.map */