/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");

.sans-jp {
  font-family: "Noto Sans JP", sans-serif;
}
.serif-jp {
  font-family: "Noto Serif", serif;
}
.jost {
  font-family: "Jost", sans-serif;
}

:root {
  --blue: #004597;
  --black: #373737;
  --navy: #1b1f23;
  --dblue: #32517b;
  --lgray: #d3d3d3;
  --bluegreen: #136a8a;
  --gold: #c0994b;
}

html {
  scroll-behavior: smooth;
}
ul li {
  list-style: none;
  list-style-type: unset !important;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  width: 100%;
}
a:hover,
a:active,
a:focus {
  opacity: 0.7;
  text-decoration: none;
  transition: 1s;
}
br {
  line-height: 0;
  font-size: 0;
}
body a:where(:not(.wp-element-button)) {
  text-decoration: none;
}
.pt-05 {
  padding-top: 0.5em !important;
}
.pt-1 {
  padding-top: 1em !important;
}
.pt-2 {
  padding-top: 2em !important;
}
.pt-3 {
  padding-top: 3em !important;
}
.pt-5 {
  padding-top: 5em !important;
}
.pt-10 {
  padding-top: 10em !important;
}
.pt-15 {
  padding-top: 15em !important;
}
.py-1 {
  padding-top: 1em !important;
  padding-bottom: 1em !important;
}
.py-2 {
  padding-top: 2em !important;
  padding-bottom: 2em !important;
}
.py-3 {
  padding-top: 3em !important;
  padding-bottom: 3em !important;
}
.py-5 {
  padding-top: 5em !important;
  padding-bottom: 5em !important;
}
.py-10 {
  padding-top: 10em !important;
  padding-bottom: 10em !important;
}
.py-15 {
  padding-top: 15em !important;
  padding-bottom: 15em !important;
}
.pb-1 {
  padding-bottom: 1em !important;
}
.pb-2 {
  padding-bottom: 2em !important;
}
.pb-3 {
  padding-bottom: 3em !important;
}
.pb-5 {
  padding-bottom: 5em !important;
}
.pb-10 {
  padding-bottom: 10em !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 1em !important;
}
.mt-2 {
  margin-top: 2em !important;
}
.mt-3 {
  margin-top: 3em !important;
}
.mt-4 {
  margin-top: 4em !important;
}
.mt-5 {
  margin-top: 5em !important;
}
.mt-5 {
  margin-top: 5em !important;
}
.mt-10 {
  margin-top: 10em !important;
}
.mt-minus-5 {
  margin-top: -5em;
}
.mb-minus-1 {
  margin-bottom: -1em !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 1em !important;
}
.mb-2 {
  margin-bottom: 2em !important;
}
.mb-3 {
  margin-bottom: 3em !important;
}
.mb-4 {
  margin-bottom: 4em !important;
}
.mb-5 {
  margin-bottom: 5em !important;
}
.ml-3 {
  margin-left: 3em !important;
}

.my-0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
.mx-5 {
  margin-left: 5% !important;
  margin-right: 5% !important;
}
.px-1em {
  padding-left: 1em !important;
  padding-right: 1em !important;
}
.px-3 {
  padding-left: 3% !important;
  padding-right: 3% !important;
}
.px-5 {
  padding-left: 5% !important;
  padding-right: 5% !important;
}
.px-10 {
  padding-left: 10% !important;
  padding-right: 10% !important;
}
.px-57 {
  padding-left: 5.7% !important;
  padding-right: 5.7% !important;
}
.pl-3 {
  padding-left: 3% !important;
}
.mx-5 {
  margin-left: 5%;
  margin-right: 5%;
}
.mx-minus-5 {
  margin-left: -5.7% !important;
  margin-right: -5.7% !important;
}
.mx-minus-1 {
  margin-left: -1% !important;
  margin-right: -1% !important;
}
.flex {
  display: flex;
}
.flex img {
  min-width: 0;
}
.flex-between {
  gap: 3%;
  justify-content: space-between;
}
.link-btn .pc,
br.pc {
  display: block;
}
.link-btn .sp,
br.sp {
  display: none;
}
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }
  .sp-px-5 {
    padding-left: 5%;
    padding-right: 5%;
  }
  .sp-mx-5 {
    margin-left: 5%;
    margin-right: 5%;
  }
  .sp-mb-2 {
    margin-bottom: 2em !important;
  }
  .sp-mb-3 {
    margin-bottom: 3em !important;
  }
  .sp-mb-5 {
    margin-bottom: 5em !important;
  }
  .sp-mt-2 {
    margin-top: 2em;
  }
  .sp-mt-10 {
    margin-top: 10em;
  }
  br.pc {
    display: none;
  }
  .link-btn .sp,
  br.sp {
    display: block;
  }
}
/*文字サイズ*/
.f03em {
  font-size: 0.3em !important;
}
.f04em {
  font-size: 0.4em !important;
}
.f05em {
  font-size: 0.5em !important;
}
.f06em {
  font-size: 0.6em !important;
}
.f07em {
  font-size: 0.7em !important;
}
.f08em {
  font-size: 0.8em !important;
}
.f09em {
  font-size: 0.9em !important;
}
.f10em {
  font-size: 1em !important;
}
.f11em {
  font-size: 1.1em !important;
}
.f12em {
  font-size: 1.2em !important;
}
.f13em {
  font-size: 1.3em !important;
}
.f14em {
  font-size: 1.4em !important;
}
.f15em {
  font-size: 1.5em !important;
}
.f16em {
  font-size: 1.6em !important;
}
.f17em {
  font-size: 1.7em !important;
}
.f18em {
  font-size: 1.8em !important;
}
.f19em {
  font-size: 1.9em !important;
}
.f20em {
  font-size: 2em !important;
}
.f21em {
  font-size: 2.1em !important;
}
.f22em {
  font-size: 2.2em !important;
}
.f23em {
  font-size: 2.3em !important;
}
.f24em {
  font-size: 2.4em !important;
}
.f25em {
  font-size: 2.5em !important;
}
.f26em {
  font-size: 2.6em !important;
}
.f27em {
  font-size: 2.7em !important;
}
.f28em {
  font-size: 2.8em !important;
}
.f29em {
  font-size: 2.9em !important;
}
.f30em {
  font-size: 3em !important;
}
.f31em {
  font-size: 3.1em !important;
}
.f32em {
  font-size: 3.2em !important;
}
.f33em {
  font-size: 3.3em !important;
}
.f34em {
  font-size: 3.4em !important;
}
.f35em {
  font-size: 3.5em !important;
}
.f36em {
  font-size: 3.6em !important;
}
.f37em {
  font-size: 3.7em !important;
}
.f38em {
  font-size: 3.8em !important;
}
.f39em {
  font-size: 3.9em !important;
}
.f40em {
  font-size: 4em !important;
}
@media (max-width: 550px) {
  .sp-f13em {
    font-size: 1.3em !important;
  }
  .sp-f15em {
    font-size: 1.5em !important;
  }
  .sp-f16em {
    font-size: 1.6em !important;
  }
  .sp-f09em {
    font-size: 0.9em !important;
  }
}
@media (max-width: 768px) {
  .flex-sp100 {
    flex-direction: column !important;
  }
  .flex-sp100-wrap {
    width: 100% !important;
  }
}

html {
  scrollbar-gutter: stable; /*システムのドロワー用に確保*/
}
body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--black);
  font-size: 18px;
  overflow-x: hidden;
}
@media (max-width: 1440px) {
  body {
    font-size: calc((100vw - 320px) / 373 + 15px); /* 18px~15px */
  }
}
.separate-containers .inside-article {
  background-color: #f7f8f9;
}
/*
TOPページ
*/
.home .site-main {
  margin: 0;
}
img {
  display: block;
}
h1,
h2 {
  font-family: "Noto Serif", serif;
  font-weight: 600;
  font-size: 2em;
}
section.FV {
  position: relative;
}

section.FV .first-message {
  position: absolute;
  bottom: 10%;
  left: 3em;
  color: #fff;
  text-shadow: 1px 1px 3px #000a15;
}
.f-big {
  font-size: 4.6em;
  white-space: nowrap;
}
@media (max-width: 1440px) {
  .f-big {
    font-size: calc((100vw - 320px) / 31 + 38px) !important; /* 74px~38px */
  }
}
.f-m-big {
  font-size: 3.5em;
  white-space: nowrap;
}
@media (max-width: 1440px) {
  .f-m-big {
    font-size: calc((100vw - 320px) / 35 + 28px) !important; /* 60px~28px */
  }
}
.back-gradient {
  background: linear-gradient(to left, #004597 0%, #32517b 50%, #0f2841 100%);
}
.text-white {
  color: #fff !important;
}
.grid {
  display: grid;
  gap: 3%;
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-1-2 {
  grid-template-columns: 1fr 2fr;
}
.grid-2-1 {
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-1-2,
  .grid-2-1 {
    grid-template-columns: 1fr;
  }
}
body.home .grid-container {
  max-width: unset;
}
.pl-10 {
  padding-left: 5em;
}
.pr-10 {
  padding-right: 5em;
}
@media (min-width: 1440px) {
  .pl-10 {
    padding-left: 100px;
  }
  .pr-10 {
    padding-right: 100px;
  }
}
@media (max-width: 768px) {
  .pl-10 {
    padding-left: 0;
  }
  .pr-10 {
    padding-right: 0;
  }
  .sp-pr-5 {
    padding-right: 5%;
  }
  .sp-pl-5 {
    padding-left: 5%;
  }
}
.fw600 {
  font-weight: 600;
}
.al-end {
  align-items: flex-end;
}
section.message01 {
  margin-top: -3em;
}
section.message01 img {
  z-index: 1;
}
section.message01 img,
section.message02 img {
  max-width: 800px;
}
section.message01 p,
section.message02 p {
  text-shadow: 1px 1px 3px #000a15;
}
.message02-sp-photo {
  display: none;
}
h2.english-title {
  position: relative;
  font-family: "Jost", sans-serif;
  margin: 0;
}
h2.english-title span {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(100%) rotate(90deg);
  transform-origin: left top; /* ← これを追加！ */
  white-space: nowrap;
}
h2.english-title span.right {
  left: unset;
  right: 0;
  transform-origin: right top; /* ← 右側は right top */
}

/* ========================================
   縦書き英語タイトル スクロールアニメーション
======================================== */
.js-english-scroll {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), filter 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-english-scroll.is-visible {
  opacity: 1;
  filter: blur(0);
}
a.arrow-border-link {
  position: relative;
  display: inline-block;
  font-size: 0.8em;
  font-weight: 800;
  padding-bottom: 0.5em;
  border-bottom: 1px currentColor solid;
  transition: 0.3s;
}
a.arrow-border-link.text-blue {
  border-bottom: 1px var(--blue) solid;
}
a.arrow-border-link i {
  margin-left: 0.5em;
  display: inline-block;
  transition: transform 0.3s ease;
}

a.arrow-border-link:hover {
  border-bottom-width: 2px;
}

a.arrow-border-link:hover i {
  transform: translateX(0.3em);
  animation: arrow-bounce 0.6s ease infinite;
}

@keyframes arrow-bounce {
  0%,
  100% {
    transform: translateX(0.3em);
  }
  50% {
    transform: translateX(0.6em);
  }
}
.site-header.is-fixed .inside-header {
  padding: 0.5em 2em;
}
@media (max-width: 768px) {
  h2.english-title {
    font-size: 1em;
  }
  h2.english-title span,
  h2.english-title span.right {
    position: static;
    left: unset;
    right: unset;
    bottom: unset;
    transform: none; /* ← これで回転を解除 */
    transform-origin: unset;
  }
  .site-header.is-fixed {
    position: sticky !important;
    top: 0;
  }
  .site-header.is-fixed .inside-header {
    padding: 1.2em 2em;
  }
  .site-header .header-image {
    width: 250px;
  }
  .FV img {
    height: 65vh;
    object-fit: cover;
  }
  h2.f30em {
    font-size: 2.7em !important;
    text-shadow: 1px 1px 3px #000a15;
  }
  h1.f35em {
    font-size: 3.2em !important;
    text-shadow: 1px 1px 3px #000a15;
  }
  section.FV .first-message {
    bottom: -9em;
    left: 5%;
  }
  .message-text {
    margin-left: 5% !important;
  }
  section.message01 {
    position: relative;
    margin-top: 0;
    padding-top: 18em;
  }
  section.message01 h2.english-title {
    position: absolute;
    top: 24em;
  }
  section.message02 {
    padding-top: 5em !important;
  }

  .first-message p,
  .message-text p {
    position: relative;
    font-size: 1em !important;
    text-align: justify;
    margin-right: 7%;
    z-index: 1;
  }

  section.message01 img,
  section.message02 img {
    width: 80%;
    object-fit: cover;
    height: 70vw;
    margin-left: auto;
    margin-top: -3em;
    z-index: 0;
  }
  section.message01 img {
    width: 65%;
    height: 52vw;
  }
  .message02-sp-photo {
    display: block;
    margin-bottom: 3em;
  }
  section.message02 .message02-sp-photo img {
    width: 90%;
    height: 75vw;
  }
  section.message02 .message02-sp-photo img {
    margin-left: 0;
    margin-right: auto;
    margin-top: 0;
  }
  section.message01 .grid-2 > div:first-child,
  section.message02 .grid-2 > div:first-child {
    order: 2;
  }
  section.message02 .message-text {
    order: 1;
    margin-left: 3em;
    margin-top: 1em;
  }
  .sp-gap8 {
    gap: 8%;
  }
  h2.english-title span {
    display: inline-block;
    margin-bottom: 1em;
  }
}
/*TOP SEIVICE　section*/
section.service {
  margin-top: -3em;
}
.text-blue {
  color: var(--blue);
}
.text-dblue {
  color: var(--dblue);
}
.text-right {
  text-align: right;
}
.back-white {
  background: #fff;
}
ul {
  list-style: none;
  margin: 0;
}
section.service h2.english-title span.right {
  top: 4em;
}

.service-list.bg{
	background-image: url(/wp-content/themes/generatepress_child/assets/img/service-bg.jpg);
	background-position: center;
    background-size: cover;
}
.service-list.grid {
  gap: 0;
}
.service-list li {
  position: relative;
  min-height: 335px;
  display: grid;
  place-items: center;
  background-color: rgb(0, 0, 0, 0.4);
}

.service-list li img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-list li > div {
  z-index: 2;
  color: #fff;
  text-shadow: 1px 2px 2px var(--black);
  text-align: center;
}

.service-list li h3 {
  margin-bottom: 1em;
  font-weight: 900;
}

.service-list li p {
  margin: 0;
}
.service-list li::before {
  position: absolute;
  font-size: 4em;
  font-weight: 700;
  font-family: "Jost", sans-serif;
  font-style: italic;
  color: rgba(255, 255, 255, 0.3);
  z-index: 1;
  line-height: 1;
}

.service-list li:nth-child(1)::before {
  content: "01";
  top: 0;
  left: 0.5rem;
}

.service-list li:nth-child(2)::before {
  content: "02";
  top: 0;
  right: 0.5rem;
}

.service-list li:nth-child(3)::before {
  content: "03";
  bottom: 0;
  left: 0.5rem;
}

.service-list li:nth-child(4)::before {
  content: "04";
  bottom: 0;
  right: 0.5rem;
}
@media (max-width: 768px) {
  section.service h2.text-right {
    text-align: left;
    font-size: 1.9em;
  }
  section.service h2.english-title span.text-white {
    color: var(--blue) !important;
  }
  .service-list li {
    min-height: 250px;
    border-bottom: 3px solid #fff;
  }
  section.service .service-list li::before {
    font-size: 2em;
    top: 1em;
    right: -0.3em;
    left: unset;
    bottom: unset;
    transform: rotate(90deg);
    transform-origin: top;
  }
  section.service {
    padding-bottom: 5em !important;
  }
}
/*TOP強み*/
.proven {
  position: relative;
  z-index: 2;
}
.proven p {
  position: absolute;
  width: 100%;
  bottom: -0.4em;
  margin: 0;
  font-weight: 600;
  font-size: 5em;
  background: linear-gradient(to left, #004597 0%, #32517b 50%, #1b1f23 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
section.strengths {
  position: relative;
  margin-top: -10em;
  padding-top: 15em;
  z-index: 1;
}
ul.strength-list {
  counter-reset: strength-counter;
}
ul.strength-list li {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3%;
  align-items: flex-end;
  padding: 3em 0;
  border-bottom: 1px var(--dblue) solid;
  counter-increment: strength-counter;
}
ul.strength-list li:nth-child(2n) > *:first-child {
  order: 2;
}
ul.strength-list li:nth-child(2n) > *:last-child {
  order: 1;
  text-align: right;
}
ul.strength-list li h3 {
  color: var(--blue);
  font-weight: 800;
  position: relative;
  margin-top: 2.5em; /* カウンター分の余白 */
}
ul.strength-list li h3::before {
  content: "0" counter(strength-counter);
  position: absolute;
  top: -1.2em;
  left: 0; /* 右寄せ */
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1;
  font-family: "Jost", sans-serif;
  background: linear-gradient(to left, #004597 0%, #32517b 50%, #1b1f23 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.2;
}
ul.strength-list li:nth-child(2n) > *:last-child h3::before {
  left: unset;
  right: 0;
}
ul.strength-list li p {
  margin-bottom: 0;
}
ul.strength-list li:last-child {
  border-bottom: none;
}
@media (max-width: 768px) {
  .proven.mt-5 {
    margin-top: 0 !important;
  }
  .proven img {
    object-fit: cover;
    height: 50vw;
  }
  .proven p {
    line-height: 0.7;
    font-size: 3.3em;
    letter-spacing: -2px;
    bottom: 0;
    white-space: nowrap;
    overflow-x: hidden;
  }
  section.strengths {
    margin-top: 0;
    padding-top: 5em;
  }
  section.strengths h2.english-title span.text-white {
    color: var(--blue) !important;
  }
  ul.strength-list li {
    grid-template-columns: 1fr;
  }
  ul.strength-list li > *:first-child {
    order: 2;
  }
  ul.strength-list li > *:last-child {
    order: 1;
    text-align: left;
  }
  .strength-text p {
    text-align: justify;
  }
}
/*製品採用事例*/
.back-lightblue {
  background: #e0e9f1;
}
section.case {
  margin-top: -10em;
  padding-top: 15em;
}
section.case h2.english-title span.right {
  bottom: -7em;
}
ul.case-list {
  gap: 5%;
}
ul.case-list h3 {
  margin-top: 1em;
  font-size: 0.9em;
  font-weight: 800;
}
ul.case-list li img {
  object-fit: cover;
  height: 15em;
}
ul.case-list li p {
  font-size: 0.8em;
}
.case-list-wrap {
  width: 85%;
  margin-left: auto;
}
@media (max-width: 768px) {
  section.product h2.text-right {
    text-align: left;
  }
  .case-list-wrap {
    width: 100%;
  }
  ul.case-list {
    overflow: hidden;
    gap: 1em;
  }
  section.case h2.english-title {
    text-align: right;
  }
}
/*TOP採用情報*/
section.recruit {
  position: relative;
}
section.recruit .px-5 {
  position: relative;
  z-index: 1;
}
section.recruit h3 {
  font-size: 3.3em;
  font-weight: 600;
  text-shadow: 1px 2px 2px var(--dblue);
}
.top-recruit-img {
  position: absolute;
  right: -12%;
  bottom: -5em;
  width: 70%;
  z-index: 0;
}
@media (max-width: 768px) {
  .top-recruit-img {
    width: 85%;
    bottom: unset;
        top: 0rem;
        right: 0;
        left: 0;
        margin: 0 auto;
  }
  .top-recruit-img img {
    object-fit: cover;
    height: 60vw;
  }
  section.recruit h3 {
    font-size: 2.4em;
    margin-top: 8em !important;
  }
  section.recruit.pb-10 {
    padding-bottom: 5em !important;
  }
}

@media (max-width: 500px) {
  .top-recruit-img {
        top: 5rem;
  }

}



/*TOPお知らせ*/
ul.news-list li {
  padding: 1.5em 0;
  border-bottom: 1px solid var(--lgray);
}
ul.news-list li span.news-date {
  font-weight: 800;
  margin-right: 2em;
}
.max1080 {
  max-width: 1080px;
  margin-right: auto;
  margin-left: auto;
}
.max1400 {
  max-width: 1400px;
  margin-right: auto;
  margin-left: auto;
}
.back-paleblue {
  background: #f5f5f5;
}
@media (max-width: 768px) {
  ul.news-list li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
  }
  section.news {
    padding-top: 5em !important;
  }
}
/*TOP youtube*/
a.youtube-link.arrow-border-link {
  color: var(--bluegreen);
  border-bottom: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding-right: 6em;
  transition: color 0.3s ease;
}

a.youtube-link.arrow-border-link::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: var(--bluegreen);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* イージング変更 */
}
a.youtube-link.arrow-border-link::after {
  content: "";
  position: absolute;
  right: 1.8em;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6em 0 0.6em 1em;
  border-color: transparent transparent transparent white;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
a.youtube-link.arrow-border-link:hover::before {
  background-color: white;
  border: 2px solid var(--bluegreen);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 影追加 */
}

a.youtube-link.arrow-border-link:hover::after {
  border-color: transparent transparent transparent var(--bluegreen);
  right: 1.6em;
  transform: translateY(-50%) translateX(3px); /* 右に少し動く */
}
.youtube-samune {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* ★ アスペクト比固定 */
  overflow: hidden;
}

.youtube-samune iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 1em;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

.youtube-samune img {
  border-radius: 1em;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
@media (max-width: 768px) {
  .kitakyushubottom img {
    object-fit: cover;
    min-height: 40vw;
  }
}
/*お問い合わせセクション*/
section.contact .px-5 {
  max-width: 1400px;
  margin: 0 auto;
}
a.contact-card {
  position: relative;
  display: block;
  background: #fff;
  color: var(--blue);
  font-weight: 700;
  text-align: center;
  height: 12em;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.contact-card-inner {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
a.contact-card img {
  width: 12%;
  margin: 0 auto 1em;
}
a.contact-card .fa-solid {
  border: solid 1px currentColor;
  border-radius: 50%;
  padding: 6px;
  margin-left: 5px;
  font-size: 0.7em;
}
a.contact-card span {
  border-bottom: 1px solid var(--blue);
  padding-bottom: 0.2em;
}
a.contact-card:hover {
  transform: translateY(-10px);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 60px 70px, rgba(0, 0, 0, 0.15) 0px -15px 40px, rgba(0, 0, 0, 0.15) 0px 8px 12px, rgba(0, 0, 0, 0.2) 0px 18px 20px,
    rgba(0, 0, 0, 0.1) 0px -5px 8px;
  background: var(--blue);
  color: #fff;
}
@media (max-width: 768px) {
  section.contact {
    padding-top: 5em !important;
    padding-bottom: 5em !important;
  }
  a.contact-card {
    height: 9em;
  }
  a.contact-card img {
    width: 2em;
    margin-bottom: 1.5em;
  }
  section.contact .grid {
    max-width: 300px;
    margin: 0 auto;
    gap: 2em;
  }
  section.contact h2.company-english-title {
    font-size: 1em !important;
  }
}
/*Footer*/
.site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
  max-width: 1100px;
  margin: 0 auto;
}
.footer-widgets-container {
  color: var(--blue);
  font-weight: 700;
  font-size: 1.15em;
  padding-top: 5em;
  max-width: 1200px;
}
.site-footer .footer-widgets-container .inner-padding {
  padding: 0 0 0 2em;
}
.inside-footer-widgets > div {
  flex: 1 1 auto; /*各ウィジェットが幅に応じて変わる*/
}
.site-footer .widget ul li {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.site-footer ul.sub-menu {
  font-size: 0.9em;
  margin-top: 1em;
  margin-left: 0.5em;
}
ul.sub-menu li:last-child {
  padding-bottom: 0;
}
/*製品カテゴリ一覧*/
ul#menu-footer-menu02 > li > ul.sub-menu,
ul#menu-en-footer-menu02 > li > ul.sub-menu {
  border-left: 1px solid var(--blue);
  padding-left: 0.5em;
}
/*サブの中のサブメニュー（ディスペンサーなど）*/
ul#menu-footer-menu02 > li > ul.sub-menu ul,
ul#menu-en-footer-menu02 > li > ul.sub-menu ul {
  margin-left: 0.5em;
}
ul#menu-footer-menu02 > li > ul.sub-menu ul.sub-menu li,
ul#menu-en-footer-menu02 > li > ul.sub-menu ul.sub-menu li {
  font-size: 0.9em;
}
ul#menu-footer-menu02 > li > ul.sub-menu ul.sub-menu li::before,
ul#menu-en-footer-menu02 > li > ul.sub-menu ul.sub-menu li::before {
  content: "-";
  margin-right: 5px;
}
/*実際の導入事例など*/
ul#menu-footer-menu03,
ul#menu-en-footer-menu03 {
  font-size: 0.9em;
  padding-left: 0.5em;
  border-left: 1px solid var(--dblue);
  margin-top: 2.5em;
}
/*企業情報*/
ul#menu-footer-menu04 > li > ul.sub-menu,
ul#menu-en-footer-menu04 > li > ul.sub-menu {
  border-left: 1px solid var(--dblue);
  padding-left: 0.5em;
}
/*CSR*/
.widget ul li.menu-csrquality,
.widget ul li.privacypolicy {
  font-weight: 400;
  font-size: 0.8em;
}
.footer-bar aside:first-child {
  padding: 0 0 4em;
  color: var(--dblue);
  font-weight: 900;
}
.footer-bar a {
  position: relative;
  font-size: 1.3em;
  padding-left: 3.5em; /* アイコンの幅＋余白 */
  display: inline-block; /* 複数行リンクにも対応 */
  text-decoration: none;
}
/*英語フッター文字サイズ小さく*/
ul#menu-en-footer-menu01,
ul#menu-en-footer-menu02,
ul#menu-en-footer-menu03,
ul#menu-en-footer-menu04,
ul#menu-en-footer-menu05 {
  font-size: 0.8em;
}
.footer-bar a::before {
  content: "";
  display: inline-block;
  width: 2.5em; /* アイコン画像の幅 */
  height: 2.5em; /* アイコン画像の高さ */
  background: url(../img/youtube-blue.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.copyright-bar {
  display: none;
}
.footer-bar aside:nth-child(2) {
  margin-top: 5em;
}

@media (max-width: 768px) {
  .footer-widgets-container {
    padding: 3em 5%;
  }
  .inside-footer-widgets {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .inside-footer-widgets > div {
    flex: 1 1 100%; /* デフォルトは全幅 */
    font-size: 0.9em;
  }

  /* widget-2と3だけ50%幅 */
  .inside-footer-widgets .footer-widget-2,
  .inside-footer-widgets .footer-widget-3,
  .inside-footer-widgets .footer-widget-4,
  .inside-footer-widgets .footer-widget-5 {
    flex: 1 1 calc(50% - 10px);
    display: inline-flex;
  }

  /* widget-2と3を同じ行に */
  .footer-widget-2 {
    order: 2;
  }

  .footer-widget-3 {
    order: 2;
    margin-left: 20px;
  }

  .footer-widget-1 {
    order: 1;
  }

  .footer-widget-4 {
    order: 3;
  }

  .footer-widget-5 {
    order: 4;
  }
  .inside-footer-widgets > div:not(:last-child) {
    margin-bottom: 1em;
  }
  .widget ul li {
    padding-top: 0.5em;
    padding-bottom: 1.2em;
  }
  ul#menu-footer-menu02 > li > ul.sub-menu ul.sub-menu li {
    font-size: 1em;
  }
  ul#menu-footer-menu03 {
    margin-top: 3.5em;
  }
  ul#menu-footer-menu05 li {
    margin-bottom: 0;
  }
}

/*header　メニュー*/
body header.site-header .grid-container {
  max-width: 1400px;
}
@media (max-width: 1120px) {
  body header.site-header .grid-container {
    flex-direction: column;
  }
  .nav-float-right #site-navigation {
    margin: 1em auto 0;
  }
}
.main-navigation .main-nav ul li a {
  font-size: 14px;
  font-weight: 600;
  padding: 0 0.9em;
}
.main-nav ul li:last-child a {
  margin-right: 0 !important;
}
.site-header {
  z-index: 3;
  width: 100%;
}
.site-header .header-image {
  width: 100%;
}
.site-logo {
  width: 27%;
  min-width: 240px;
}
/*言語*/
.inside-header .main-navigation .main-nav ul .lang-item a,
.black-bg .lang-item a {
  display: inline;
  padding: 0.8em 0.8em;
  background: linear-gradient(to left, #004597 0%, #32517b 50%, #1b1f23 100%);
  border-radius: 0;
  color: #fff !important;
}

.main-navigation .main-nav ul .lang-item a::before,
.black-bg .lang-item a::before {
  font-family: "Font Awesome 6 Free";
  content: "\f0ac";
  font-weight: 900;
  margin-right: 5px;
}

.main-navigation .main-nav ul li a[href*="/contact/"],
.black-bg ul li a[href*="/contact/"],
.main-navigation .main-nav ul li a[href*="/contactus/"],
.black-bg ul li a[href*="/contactus/"] {
  display: inline;
  padding: 0.8em 1em;
  background: #fff;
  border-radius: 3em;
  margin-right: 1.5em;
  color: var(--dblue) !important;
  border: var(--dblue) 1.5px solid;
}
.black-bg ul li a[href*="/contact/"],
.black-bg ul li a[href*="/contactus/"] {
  display: inline-block;
  margin-right: 0;
  margin-bottom: 1em;
}
.main-navigation a[href*="/contact/"]::before,
.black-bg ul li a[href*="/contact/"]::before,
.main-navigation a[href*="/contactus/"]::before,
.black-bg ul li a[href*="/contactus/"]::before {
  font-family: "Font Awesome 6 Free";
  content: "\f0e0";
  font-weight: 400;
  margin-right: 5px;
}


/* NavのNordsonリンク */
.main-navigation .main-nav ul li a[href*="/products/nordson-efd-products/"],
.black-bg ul li a[href*="/products/nordson-efd-products/"]{
  display: inline;
  padding: 0.8em 1em;
  background: #fff;
  border-radius: 3em;
  margin-right: 0.5em;
  color: var(--dblue) !important;
  border: var(--dblue) 1.5px solid;
}

.black-bg ul li a[href*="/products/nordson-efd-products/"] {
  display: inline-block;
  margin-right: 0;
  margin-bottom: 1em;
}
/* .main-navigation a[href*="/products/nordson-efd-products/"]::before,
.black-bg ul li a[href*="/products/nordson-efd-products/"]::before{
  font-family: "Font Awesome 6 Free";
  content: "\f1b3";
  font-weight: 400;
  margin-right: 5px;
} */


/* スクロール後のガラス風スタイル */
.site-header.is-fixed {
  position: fixed;
  background: rgba(255, 255, 255, 0.7); /* 半透明 */
  backdrop-filter: blur(8px); /* ガラス風ぼかし */
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); /* 影で浮かせる */
  animation: slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-navigation {
  background-color: transparent;
}

/* 上からスッと現れるアニメーション */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  /*既存ハンバーガー*/
  .has-inline-mobile-toggle .mobile-menu-control-wrapper {
    display: none;
  }
  .has-inline-mobile-toggle .inside-header {
    padding: 5% 20px;
    align-items: flex-start;
  }
  .nav-float-right #site-navigation {
    margin: 0;
  }
}
/* ========================================
   ハンバーガー関連
======================================== */

.hamb,
.black-bg,
.lang-switcher-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* ========================================
     言語スイッチャー（スマホ用）
  ======================================== */

  .lang-switcher-mobile {
    display: flex;
    align-items: center;
    gap: 0;
    position: fixed;
    right: calc(5% + 17px + 3%); /* ハンバーガーの左側 */
    top: 28px;
    transform: translateY(-50%);
    z-index: 301;
  }

  .lang-switcher-mobile .lang-link {
    display: inline-block;
    padding: 4px 8px;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    transition: color 0.3s;
  }

  /* 区切り線 */
  .lang-switcher-mobile .lang-link:first-child::after {
    content: "|";
    margin: 0 0px 0 10px;
    color: #ddd;
  }

  /* 現在の言語 */
  .lang-switcher-mobile .lang-link.current-lang {
    color: var(--dblue);
    font-weight: bold;
  }
  .lang-switcher-mobile .lang-link:first-child {
    padding-right: 0;
  }
  /* ホバー */
  .lang-switcher-mobile .lang-link:not(.current-lang):hover {
    color: var(--dblue);
  }

  /* ========================================
     ハンバーガーボタン
  ======================================== */

  .hamb {
    display: block;
    position: fixed;
    cursor: pointer;
    z-index: 301;
    right: 5%;
    top: 23px;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
  }

  .line {
    position: absolute;
    left: 0;
    width: 28px;
    height: 2px;
    background-color: var(--dblue);
    top: 0px;
  }

  .line:nth-child(2) {
    width: 25px;
    top: 10px;
  }

  .line:nth-child(3) {
    width: 15px;
    top: 20px;
  }

  /* ×印に変化するスタイル */
  #hamb.active .line {
    background-color: var(--dblue);
    width: 28px;
  }

  #hamb.active .line:nth-child(1) {
    top: 10px;
    transform: rotate(45deg);
  }

  #hamb.active .line:nth-child(2) {
    opacity: 0;
  }

  #hamb.active .line:nth-child(3) {
    top: 10px;
    transform: rotate(-45deg);
  }

  /* ========================================
     オーバーレイメニュー
  ======================================== */

  .black-bg {
    display: block;
    position: fixed;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    top: 0;
    right: -200px;
    width: 200px;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: 300; /* ハンバーガーより下 */
  }

  .black-bg.open {
    opacity: 1;
    visibility: visible; /* ← 修正！ */
    right: 0;
  }

  .black-bg ul {
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 100%;
  }

  .black-bg ul li {
    text-align: center;
    padding: 20px 0;
  }

  .black-bg ul li a {
    color: var(--black);
    font-size: 1em;
    font-weight: bold;
    display: block;
    text-decoration: none;
  }

  /* アニメーション */
  .animation {
    transition: all 0.6s;
  }
}
/*お問合せページ*/
.page-template-template-contact .grid-container {
  max-width: unset;
}
.page-template-template-contact .site-main .inside-article {
  padding: 8em 0;
}
.page-template-template-contact .site-content {
  display: block;
}
section.contact.ohter-contact-section .px-5 {
  max-width: 1000px;
}
section.contact.ohter-contact-section .grid-2 {
  gap: 8%;
}
.ohter-contact-section .contact-card {
  height: auto;
  padding: 4em 0;
}
.ohter-contact-section .contact-card-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  gap: 7%;
}
.ohter-contact-section a.contact-card img {
  width: 2em;
  margin: 0;
}
.page-template-template-contact .FV-page {
  position: relative;
}

.page-template-template-contact .FV-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f4f4f499;
  pointer-events: none; /* クリックを透過 */
  z-index: 0;
}

.page-template-template-contact .FV-page img {
  display: block;
  width: 100%;
  height: auto;
}
section.contact-form {
  max-width: 700px;
  margin: 0 auto;
}
section.contact-form span.required {
  color: red;
  font-size: 0.8em;
  margin-left: 1em;
}
a.link-underline {
  text-decoration: underline;
}

/* 確認画面テーブル - シンプル版 */
.confirm-table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
}
.confirm-table p {
  margin-bottom: 0;
}
.confirm-table th {
  color: var(--navy);
  font-weight: 600;
  text-align: left;
  padding: 1em 1em;
  width: 30%;
  border: 1px solid #ddd;
}

.confirm-table td {
  padding: 1em 1em;
  border: 1px solid #ddd;
  background: #fff;
}

/* 入力フィールドをテキスト風に */
.confirm-table input,
.confirm-table textarea,
.confirm-table select {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: inherit;
  color: inherit;
  width: 100%;
}

/* selectの矢印を消す */
.confirm-table select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
}

.confirm-table select::-ms-expand {
  display: none;
}

/* チェックボックス・ラジオボタン */
.confirm-table input[type="checkbox"],
.confirm-table input[type="radio"] {
  pointer-events: none;
  margin-right: 8px;
  width: auto;
}

/* フォームボタンコンテナ */
.form-buttons {
  display: flex;
  gap: 0.5em;
  justify-content: center;
  margin-top: 3em;
}

.form-buttons p {
  display: flex;
  gap: 0.5em;
  width: 100%;
  max-width: 600px;
  margin: 0;
}

/* 送信ボタン（主要アクション）お問合せ完了ページのボタン */
.form-buttons p input.wpcf7-form-control.wpcf7-submit,
.thanks-message .btn {
  position: relative;
  flex: 1;
  background: var(--dblue);
  color: #fff;
  font-weight: 700;
  padding: 1em 2em;
  border: 2px solid var(--dblue);
  border-radius: 2em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-buttons p input.wpcf7-form-control.wpcf7-submit:hover {
  transform: translateY(-10px);
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--dblue);
}

.form-buttons p input.wpcf7-form-control.wpcf7-submit:active {
  transform: translateY(-5px);
}

/* 戻るボタン（副次アクション） */
.form-buttons p input.wpcf7-form-control.wpcf7-back {
  position: relative;
  flex: 1;
  background: #fff;
  color: var(--dblue);
  font-weight: 700;
  padding: 1em 2em;
  border: 2px solid var(--dblue);
  border-radius: 2em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-buttons p input.wpcf7-form-control.wpcf7-back:hover {
  transform: translateY(-10px);
  background: var(--dblue);
  color: #fff;
  border: 2px solid var(--dblue);
}

.form-buttons p input.wpcf7-form-control.wpcf7-back:active {
  transform: translateY(-5px);
}

/* スピナー調整 */
.form-buttons p span.wpcf7-spinner {
  display: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .form-buttons {
    gap: 1em;
  }

  .form-buttons p {
    flex-direction: column;
    gap: 1em;
  }

  .form-buttons p input.wpcf7-form-control.wpcf7-submit,
  .form-buttons p input.wpcf7-form-control.wpcf7-back {
    width: 100%;
  }
}

/* フォーカス時のアクセシビリティ対応 */
.form-buttons p input.wpcf7-form-control.wpcf7-submit:focus,
.form-buttons p input.wpcf7-form-control.wpcf7-back:focus {
  outline: 3px solid rgba(var(--dblue-rgb, 0, 123, 255), 0.5);
  outline-offset: 2px;
}
/*お問合せ完了ページ*/
.thanks-message {
  text-align: center;
  margin-top: 5em;
}
.thanks-message .btn {
  display: inline-block;
  margin-top: 3em;
}
/* お問い合わせフォーム全体 */
.contact-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em;
  background: #f7f8f9;
}
.contact-form p {
  margin-bottom: 0;
}
/* フォーム注意書き */
.contact-form .form-note {
  background: #f8f9fa;
  border-left: 4px solid var(--blue);
  padding: 1em 1.5em;
  margin-bottom: 2em;
  margin-top: 5em;
  font-size: 0.95em;
  color: #333;
}

/* フォームグループ */
.contact-form .form-group {
  margin-bottom: 2em;
}

.contact-form .form-group > p:first-child {
  font-weight: 700;
  margin-bottom: 0.8em;
  color: #333;
  font-size: 1em;
}

/* 必須マーク */
.contact-form .required {
  color: #dc3545;
  font-weight: 700;
  margin-left: 0.3em;
  font-size: 0.9em;
}

/* テキスト入力・テキストエリア・セレクトボックス共通 */
.contact-form input.form-control[type="text"],
.contact-form input.form-control[type="email"],
.contact-form input.form-control[type="tel"],
.contact-form textarea.form-control,
.contact-form select.form-control {
  width: 100%;
  padding: 0.3em 1em;
  border: 2px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
  transition: all 0.3s ease;
  background: #fff;
  box-sizing: border-box;
}

.contact-form input.form-control:focus,
.contact-form textarea.form-control:focus,
.contact-form select.form-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.contact-form input.form-control::placeholder,
.contact-form textarea.form-control::placeholder {
  color: #999;
  font-size: 0.9em;
}

/* テキストエリア */
.contact-form textarea.form-control {
  min-height: 150px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

/* セレクトボックス */
.contact-form select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.5em;
}

/* ========================================
   チェックボックス（2列レイアウト）
======================================== */

.contact-form .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 30px;
  margin-top: 15px;
}

.contact-form .wpcf7-checkbox .wpcf7-list-item {
  display: block;
  margin: 0 !important;
}

.contact-form .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.contact-form .wpcf7-checkbox .wpcf7-list-item label:hover {
  background: #fff;
  border-color: #4d78ad;
}

.contact-form .wpcf7-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 0;
  cursor: pointer;
  accent-color: #4d78ad;
  flex-shrink: 0;
}

.contact-form .wpcf7-checkbox .wpcf7-list-item-label {
  font-size: 1rem;
  font-weight: 400;
  color: #333;
  transition: color 0.3s;
}

/* チェック時のスタイル */
.contact-form .wpcf7-checkbox .wpcf7-list-item label:has(input:checked) {
  background: #f0f5fa;
  border-color: #4d78ad;
}

.contact-form .wpcf7-checkbox .wpcf7-list-item label:has(input:checked) .wpcf7-list-item-label {
  font-weight: 600;
  color: #4d78ad;
}

/* ========================================
   ラジオボタン
======================================== */

.contact-form .wpcf7-radio .wpcf7-list-item {
  display: block;
  margin-bottom: 0.8em;
}

.contact-form .wpcf7-radio .wpcf7-list-item label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.6em;
  transition: color 0.2s ease;
}

.contact-form .wpcf7-radio .wpcf7-list-item label:hover {
  color: var(--blue);
}

.contact-form .wpcf7-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-right: 0.8em;
  cursor: pointer;
  accent-color: var(--blue);
}

/* ラジオボタンを横並びにする（タブレット以上） */
@media (min-width: 768px) {
  .contact-form .wpcf7-radio .wpcf7-list-item {
    display: inline-block;
    margin-right: 1.5em;
    margin-bottom: 0.5em;
  }
}

/* ========================================
   個人情報保護方針
======================================== */

.contact-form .privacy-policy {
  background: #f8f9fa;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 1.5em;
  margin: 2em 0;
}

.contact-form .privacy-policy > p:first-child {
  margin-bottom: 1em;
  font-size: 0.95em;
  color: #333;
}

.contact-form .privacy-policy a.link-underline {
  color: var(--blue);
  text-decoration: underline;
  font-weight: 700;
  transition: opacity 0.2s ease;
}

.contact-form .privacy-policy a.link-underline:hover {
  opacity: 0.7;
}

.contact-form .privacy-policy .wpcf7-acceptance label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
}

.contact-form .privacy-policy .wpcf7-acceptance input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 0.8em;
  cursor: pointer;
  accent-color: var(--blue);
}

/* ========================================
   エラーメッセージ
======================================== */

.contact-form .wpcf7-not-valid-tip {
  color: #dc3545;
  font-size: 0.9em;
  margin-top: 0.5em;
  display: block;
}

.contact-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: #dc3545 !important;
}

.contact-form .wpcf7-response-output {
  border: 2px solid #dc3545;
  background: #fff5f5;
  color: #dc3545;
  padding: 1em;
  margin: 1.5em 0;
  border-radius: 4px;
}

.contact-form .wpcf7-response-output.wpcf7-mail-sent-ok {
  border-color: #28a745;
  background: #f0f9f4;
  color: #28a745;
}

/* ========================================
   英語フォーム案内
======================================== */

.language-notice-simple {
  background: #e4efff;
  padding: 1em 1.5em;
  margin-bottom: 2em;
  font-size: 0.9em;
  text-align: center;
}

.language-notice-simple i {
  margin-right: 1em;
}

.language-notice-simple p {
  margin-bottom: 0;
}

.language-notice-simple a {
  color: #667eea;
  text-decoration: underline;
  font-weight: 700;
}

.language-notice-simple a:hover {
  opacity: 0.7;
}

/* ========================================
   レスポンシブ対応
======================================== */

@media (max-width: 768px) {
  /* チェックボックスをスマホでは1列に */
  .contact-form .wpcf7-checkbox {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contact-form .wpcf7-checkbox .wpcf7-list-item label {
    padding: 10px 12px;
  }
}
/* ========================================
     企業情報ページ
  ======================================== */
.page-template-template-company .grid-container {
  max-width: unset;
}
.separate-containers .site-main {
  margin: 0;
}
.FV-page {
  position: relative;
}
.FV-page img {
  min-height: 315px;
  object-fit: cover;
}
.FV-page h1 {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  font-size: 2em;
  line-height: 1.2;
}
.FV-page h1 .english-title {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 2.5em;
  background: linear-gradient(to left, #004597 0%, #32517b 50%, #1b1f23 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.FV-page h1 .japanese-title {
  color: var(--blue);
  font-size: 0.7em;
  margin-left: 0.5em;
}
.site-main > * {
  margin-bottom: 0;
}
/* レイアウト */
.l-page-layout {
  display: flex;
  margin: 0 auto;
}

/* サイドバー（固定） */
.l-page-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: #ebf0f5;
  padding: 1em 0;
}

.c-page-nav {
  position: sticky;
  top: 115px; /* ヘッダーの高さ + 余白 */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
}
/* ナビゲーションスタイル */
ul.c-page-nav__list {
  text-align: right;
  list-style: none;
  padding: 0;
  margin: 0 1em;
  color: var(--blue);
}
li.c-page-nav__item {
  margin: 0;
}
/*一番親*/
li.c-page-nav__item--parent {
  border-bottom: 1px solid var(--blue);
}
li.c-page-nav__item--parent:last-child {
  border-bottom: none;
  border-top: 1px solid var(--blue);
}
li.c-page-nav__item--parent > a {
  font-size: 0.9em;
  font-weight: 600;
}
li.has__sublist {
  border-bottom: none;
}
/*国内拠点海外拠点*/
li.c-page-nav__item--sub > a {
  font-size: 0.8em;
  font-weight: 600;
}
/*一番子*/
ul.c-page-nav__childlist li > a {
  font-size: 0.7em;
}
.c-page-nav__link {
  display: block;
  padding: 0.4em 0.4em 0.6em 0;
  color: var(--blue);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: all 0.3s;
}
ul.c-page-nav__sublist {
  border-right: 1px solid var(--blue);
  border-right: 1px solid var(--blue);
  padding: 0 0.5em;
  margin: 0 1em 1em 0;
}
/*最小リスト*/
ul.c-page-nav__childlist {
  margin: 0;
}
ul.c-page-nav__childlist li a {
  padding-right: 1em;
}
ul.c-page-nav__childlist li a::after {
  content: "-";
  margin-left: 5px;
  font-weight: 900;
}
.c-page-nav__link:hover {
  color: var(--accent);
  background-color: #ddd;
}

/* アクティブ状態 */
.c-page-nav__link.is-active {
  color: #7bb0ee;
  font-weight: bold;
}

/* メインコンテンツ */
.l-page-main {
  flex: 1;
  flex-grow: 1;
  min-width: 0; /* flexboxのはみ出し防止 */
}

.p-company__section {
  margin-bottom: 80px;
  scroll-margin-top: 100px; /* スクロール時のオフセット */
}

/* スマホはべつナビゲーション */
@media (max-width: 768px) {
  aside.l-page-sidebar {
    display: none;
  }
  .FV-page h1 .english-title {
    font-size: 1.7em;
  }
}
/*メインセクション　会社概要*/
h2.company-english-title {
  position: relative;
  font-family: "Jost", sans-serif;
  margin: 0;
}
h2.company-english-title span {
  position: absolute;
  left: -1em;
  bottom: 0;
  font-size: 0.6em;
  transform: translateY(100%) rotate(90deg);
  transform-origin: left top; /* ← これを追加！ */
  white-space: nowrap;
}
h2.company-english-title span.right {
  left: unset;
  right: -2em;
  transform-origin: right top;
  transform: translateY(100%) rotate(90deg);
}
.c-table-wrapper {
  overflow-x: auto;
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #ddd;
  border-left: none;
}

.c-table tr {
  border-bottom: 1px solid #ddd;
}

.c-table th {
  width: 180px;
  padding: 1.5em 1em;
  text-align: left;
  font-weight: 600;
  vertical-align: top;
  border-right: none;
}

.c-table td {
  padding: 1.5em 1em;
  line-height: 1.8;
  vertical-align: top;
  border-right: none;
}
.c-table td ol {
  margin-left: 1em;
}
.c-table__list {
  margin: 0;
}

.c-table__list li {
  margin-bottom: 8px;
}

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

.c-table__company-name-en {
  font-size: 0.9em;
}

.c-table__note {
  margin-top: 12px;
  font-size: 0.8em;
  text-align: right;
}

@media (max-width: 768px) {
  h2.company-english-title {
    font-size: 1em !important;
  }
  .page-template-template-company h2.company-english-title {
    font-size: 1.5em !important;
  }
  h2.company-english-title span {
    position: static;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
    transform: none !important;
    transform-origin: unset !important;
    margin-bottom: 1em;
    display: inline-block;
  }

  .c-table-wrapper {
    margin-top: 3em !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .c-table th {
    width: 140px;
    padding: 16px 12px;
    font-size: 0.8em;
  }

  .c-table td {
    padding: 16px 12px;
    font-size: 0.8em;
  }
}
/* スマホ：縦並び */
@media (max-width: 600px) {
  section.profile.px-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .c-table,
  .c-table tbody,
  .c-table tr,
  .c-table th,
  .c-table td {
    display: block;
    width: 100%;
  }

  /* 元のボーダーを打ち消す */
  .c-table {
    border-top: none;
  }

  .c-table tr {
    border-bottom: none;
    border-bottom: 1px solid #ddd;
  }

  .c-table tr:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .c-table th {
    padding: 1em;
    background-color: #ebf0f5;
    font-size: 0.8em;
  }

  .c-table td {
    padding: 1em;
    font-size: 0.8em;
    border-bottom: none;
  }
}
/*沿革セクション*/
.back-lightblue2 {
  background: #f4f9ff;
}
/* タイムライン全体 */
.c-timeline {
  position: relative;
  padding-left: 0;
}

/* 縦線 */
.c-timeline::before {
  content: "";
  position: absolute;
  left: calc(85px + 5%); /* 年号の幅に合わせて調整 */
  top: 14px;
  bottom: -1em;
  width: 1px;
  background-color: var(--blue);
}

/* 各項目 */
.c-timeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}

.c-timeline__item:last-child {
  margin-bottom: 0;
}

/* 年号 */
.c-timeline__year {
  width: 60px;
  flex-shrink: 0;
  font-size: 1em;
  font-weight: 700;
  font-family: "Jost", sans-serif;
  color: var(--blue);
  padding-top: 4px;
}

/* ドット（丸） */
.c-timeline__dot {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin: 10px 20px 0;
  background: radial-gradient(circle, #3f4c6b 0%, rgba(0, 69, 151, 0.76) 100%);
  border-radius: 50%;
  z-index: 1;
}

/* 内容 */
.c-timeline__content {
  flex: 1;
  padding-top: 0;
}

.c-timeline__content p {
  margin: 0;
  line-height: 1.8;
  color: #333;
}

/* レスポンシブ：タブレット */
@media (max-width: 768px) {
  section.history .px-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .c-timeline::before {
    left: 60px;
  }

  .c-timeline__item {
    margin-bottom: 32px;
  }

  .c-timeline__year {
    width: 50px;
    font-size: 0.9em;
  }

  .c-timeline__dot {
    margin: 0.5em 5px 0;
  }

  .c-timeline__content {
    font-size: 0.9em;
    margin-left: 1em;
  }
}

/*拠点情報*/
h3.p-company__subtitle {
  color: var(--dblue);
  font-size: 1.4em;
  font-weight: 500;
  margin-top: 2em;
  padding: 0 0 0.5em 1em;
  border-bottom: 1px solid var(--dblue);
}
h4.p-company__itemtitle {
  display: inline-block;
  background: #fff;
  border: solid var(--dblue) 1px;
  color: var(--dblue);
  font-size: 0.9em;
  font-weight: 500;
  padding: 0 1em 0.1em;
}
.p-company__item {
  background: #f8f9fb;
  padding: 2em 5%;
  margin-bottom: 2em;
}
.p-company__item .grid {
  margin: 0 auto;
  gap: 5%;
}
.p-company__item .location-map iframe {
  width: 100%;
}
.p-company__item dt {
  border-bottom: solid var(--dblue) 1px;
  color: var(--dblue);
  font-weight: 600;
  padding: 0 0.5em 0.1em;
  margin-bottom: 0.5em;
}
.p-company__item dd {
  color: var(--dblue);
  font-size: 0.9em;
  padding-left: 0.5em;
  margin: 0 0 1em;
  line-height: 1.8;
}
.p-company__item strong {
  background: var(--dblue);
  color: #fff;
  font-size: 0.7em;
  font-weight: 500;
  padding: 0 0.5em 2px;
  margin-right: 1em;
}
.grid-18-10 {
  grid-template-columns: 1.8fr 1fr;
  align-items: center;
}
.dairiten-info p {
  color: var(--dblue);
  font-weight: 600;
  position: relative;
  padding-left: 2em;
  margin-top: 3em;
}
.dairiten-info p::before {
  position: absolute;
  content: "";
  background: url(../img/phone-navy-cricle.png);
  background-size: contain;
  width: 1.5em;
  height: 1.5em;
  left: 0;
  top: 0em;
}
@media (max-width: 768px) {
  section.locations .px-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/*企業理念*/
/* ========================================
   企業理念セクション - 背景
======================================== */
.philosophy-photo-back {
  background: url(../img/grade-photo-philo.webp?v=20260504);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}
section.philosophy {
  overflow-x: hidden;
}
/* ========================================
   ぼかし円 - 共通スタイル
======================================== */
.blur-circle-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.blur-circle {
  position: relative;
  display: block;
  width: 60%;
  aspect-ratio: 1/1;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* スクロールで表示 */
.blur-circle.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ぼかし円の背景エフェクト */
.blur-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0);
  box-shadow: 4px 4px 58px rgba(131, 131, 131, 0.25);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 0;
}

/* 内部コンテンツ */
.blur-circle-inner {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* テキストスタイル */
.blur-circle p {
  line-height: 2;
  margin-bottom: 0;
}

.blur-circle h3.jost {
  text-shadow: 1px 1px 1px #8d8d8d;
}

/* ========================================
   ぼかし円 - 個別配置
======================================== */
.blur-circle-first {
  margin: -10em -9% 0 auto;
  transition-delay: 0s;
}

.blur-circle-second {
  margin: -35% auto 0 -5%;
  transition-delay: 0.3s;
}

.blur-circle-third {
  margin: -35% -5% 0 auto;
  transition-delay: 0.5s;
}

/* ========================================
   グラデーション円 - 共通スタイル
======================================== */
.grade-circle {
  position: absolute;
  top: 0;
  right: -1em;
  display: inline-block;
  width: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 6px 2px 30px rgba(126, 126, 126, 0.25), inset 9px 32px 59px 17px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(61px);
  -webkit-backdrop-filter: blur(61px);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

.blur-circle.is-visible .grade-circle {
  opacity: 1;
  transform: scale(1);
}

/* ========================================
   グラデーション円 - カラーバリエーション
======================================== */
.grade-circle-navy {
  background: linear-gradient(225deg, rgba(50, 81, 123, 0.08) 0%, rgba(113, 178, 255, 0.53) 50%, rgba(255, 255, 255, 0.67) 100%);
}

.grade-circle-blue {
  background: linear-gradient(122deg, rgba(50, 81, 123, 0.08) 0%, rgba(96, 191, 255, 0.41) 50%, rgba(255, 255, 255, 0.67) 100%);
}

.grade-circle-perple {
  background: linear-gradient(300deg, rgba(50, 81, 123, 0.21) 0%, rgba(143, 170, 233, 0.75) 50%, rgba(255, 255, 255, 0.67) 100%);
}

/* ========================================
   グラデーション円 - 個別配置
======================================== */
.blur-circle-second .grade-circle {
  right: unset;
  left: -5%;
}

.blur-circle-third .grade-circle {
  right: -10%;
  left: unset;
  top: unset;
  bottom: -5%;
}

/* ========================================
   番号付きリスト
======================================== */
ol.number-double-list {
  list-style: none;
  counter-reset: item;
  text-align: left;
  width: fit-content;
  margin: 0 auto;
  line-height: 2;
}

ol.number-double-list li {
  counter-increment: item;
}

ol.number-double-list li::before {
  content: "0" counter(item) ". ";
  font-style: italic;
  font-family: "Jost", sans-serif;
  margin-right: 0.3em;
}

/* ========================================
   ユーティリティクラス
======================================== */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.w-black {
  font-weight: 900;
}
.lh14 {
  line-height: 1.4;
}
.b {
  font-weight: bold;
}
@media (max-width: 1050px) {
  .blur-circle {
    width: 80%;
  }
  .blur-circle-second {
    margin: -10vw auto 0 -5%;
  }
  .blur-circle p {
    font-size: 1em !important;
  }
  html[lang="en-US"] .blur-circle p {
    font-size: 0.8em !important;
  }
  .blur-circle-third {
    margin: -10vw -5% 0 auto;
  }
}
@media (max-width: 840px) {
  .blur-circle {
    width: 90%;
  }
}
@media (max-width: 700px) {
  .blur-circle-first {
    margin: 0 -5% 0 auto;
  }
  section.philosophy.py-10 {
    padding-top: 5em !important;
    padding-bottom: 5em !important;
  }
}
@media (max-width: 490px) {
  .blur-circle-wrap {
    font-size: 0.9em;
  }
  .blur-circle {
    width: 115%;
  }
  .blur-circle-second {
    margin: -10vw auto 0 -20%;
  }
}
/*スマホ用ナビゲーションページ下部固定*/
@media (max-width: 768px) {
  .c-page-nav-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); /* iPhone対応 */
  }

  .c-page-nav-mobile__list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .c-page-nav-mobile__item {
    flex: 1;
    text-align: center;
  }

  .c-page-nav-mobile__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--dblue);
    font-size: 0.8em;
    transition: all 0.3s ease;
  }

  .c-page-nav-mobile__link:hover,
  .c-page-nav-mobile__link.is-active {
    color: #32517b;
  }

  .c-page-nav-mobile__icon {
    font-size: 1.2em;
    transition: transform 0.3s ease;
  }

  .c-page-nav-mobile__link.is-active .c-page-nav-mobile__icon {
    transform: scale(1.2);
  }

  /* コンテンツ下部に余白 */
  .l-page-layout {
    padding-bottom: 80px;
  }
}
@media (min-width: 768px) {
  .c-page-nav-mobile {
    display: none;
  }
}
/* ========================================
   採用ページ
======================================== */
.page-template-template-recruit .grid-container {
  max-width: unset;
}
.recruit-page-content.back-gradient {
  background: linear-gradient(to right, #73879b 0%, #004597 100%);
}
.recruit-page-content .FV-page img {
  z-index: 2;
  position: relative;
  width: 60%;
  margin: 10em 0 0 auto;
}
.recruit-page-content .first-message {
  position: absolute;
  top: 50%;
  left: 3em;
  transform: translateY(-50%);
  z-index: 2;
}
.recruit-page-content .FV-page h1 {
  position: static;
}
.recruit-page-content .FV-page h1 .english-title {
  color: white;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: white;
}
.recruit-link-btn {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  padding: 0.7em 1em;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.recruit-link-btn i {
  transition: transform 0.3s ease;
  margin-left: 1em;
}
.recruit-link-btn:hover i {
  transform: translateX(4px);
}
.recruit-link-largebtn {
  width: 60%;
  min-width: 280px;
}
section.recruit-message {
  position: relative;
  margin-top: -3em;
  background-image: url(../img/japanearth.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}
section.recruit-message::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8); /* ここで透過度を調整 */
  z-index: 1;
  pointer-events: none;
}
section.recruit-message > * {
  position: relative;
  z-index: 2;
}
section.recruit-message p {
  text-align: justify;
  line-height: 2;
}
.iei-logo img {
  margin-bottom: -2em;
  margin-left: auto;
  max-width: 150px;
}
.photo-collection {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.photo-collection img {
  object-fit: cover;
  height: 13em;
}
/*働く魅力*/
.whychoose-txt h3 {
  display: inline-block;
  background: var(--dblue);
  color: #fff;
  padding: 0.3em 0.5em;
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 0.5em;
}
section.whychoose .grid {
  gap: 4%;
}
section.whychoose h2.english-title span.right {
  bottom: -7.5em;
}
@media (min-width: 700px) {
  section.whychoose .grid-1-2 > img:first-child,
  section.whychoose .grid-2-1 > img:last-child {
    width: 50vw; /* ビューポート幅の55% */
    max-width: 550px; /* 最大サイズ制限 */
  }
}
/*勤務環境*/
ul.environment-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3%;
  max-width: 1080px;
}
ul.environment-list li {
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  padding: 1.5em 1.5em 1.5em;
}
ul.environment-list li h3 {
  font-size: 1.2em;
  font-weight: 600;
}
ul.environment-list li svg {
  width: 4.5em;
  height: 4.5em;
  fill: #fff;
  margin: 1.5em 0 1em;
}
ul.environment-list li p {
  font-size: 0.9em;
  text-align: justify;
}
section.environment.px-10,
section.benefits > .px-10 {
  width: fit-content;
  max-width: 1500px;
  margin: 0 auto;
}
/*福利厚生*/
ul.benefit-list.environment-list li {
  color: var(--blue);
  border: 2px solid var(--blue);
}
ul.benefit-list.environment-list li svg {
  fill: var(--blue);
}
section.benefits h2.company-english-title span.right {
  bottom: -3.5em;
}

@media (max-width: 768px) {
  section.recruit-message p {
    font-size: 1em !important;
  }
  .page-template-template-recruit .FV-page {
    display: flex;
    flex-direction: column-reverse;
  }
  .recruit-page-content .first-message {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    padding-top: 5em;
    padding-left: 5%;
  }

  .recruit-page-content .FV-page img {
    width: 95%;
    margin-top: 3em;
  }

  section.recruit-message .grid,
  ul.environment-list {
    grid-template-columns: 1fr;
    gap: 2em;
  }
  .page-template-template-recruit .english-title .text-white {
    color: var(--blue) !important;
  }
  .iei-logo img {
    max-width: 100px;
  }
  .whychoose-txt h3 {
    font-size: 1.1em;
  }
  section.recruit-message {
    background-size: 150%;
    background-position: 48% 4%;
  }
  section.whychoose h2,
  section.benefits h2 {
    text-align: left;
  }
  section.whychoose .grid {
    gap: 0;
  }
  section.whychoose .grid:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
  }
  section.whychoose p {
    line-height: 1.7;
  }
}
@media (max-width: 440px) {
  .page-template-template-recruit .f-big {
    font-size: 2.45em !important;
    white-space: wrap;
  }
}
/* ========================================
   パンくずリスト
======================================== */

.breadcrumbs {
  padding: 1.5em 0;
  background: #f8f9fa;
  font-size: 0.9em;

  /* 改行対策 */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.8;
}

/* 各パンくず項目 */
.breadcrumbs span,
.breadcrumbs a {
  /* 項目内では改行させない */
  white-space: nowrap;
  display: inline;
}

.breadcrumbs a {
  color: #4d78ad;
  text-decoration: none;
  transition: opacity 0.3s;
}

.breadcrumbs a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.breadcrumbs .breadcrumb_last {
  color: #666;
  font-weight: 600;
}

/* 矢印を少し小さく、色を薄く */
.breadcrumbs .fa-arrow-right {
  font-size: 0.7em;
  margin: 0 1em;
  color: #d0d0d0;
  opacity: 0.6;
}

/* 区切り文字の後で改行を許可 */
.breadcrumbs .breadcrumb_last::after,
.breadcrumbs span[property="itemListElement"]::after {
  white-space: normal;
  margin-right: 0.3em;
}

/* ========================================
   レスポンシブ対応
======================================== */

@media (max-width: 768px) {
  .breadcrumbs {
    font-size: 0.85em;
    line-height: 2;

    /* スマホでは横スクロール可能に */
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px;
  }

  /* スクロールバー */
  .breadcrumbs::-webkit-scrollbar {
    height: 3px;
  }
  .breadcrumbs::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .breadcrumbs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
  }

  /* 矢印のマージンを狭く */
  .breadcrumbs .fa-arrow-right {
    margin: 0 0.5em;
  }
}

/* ========================================
   ローディング画面 - ベース
======================================== */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease-out;
}

/* フェードアウト */
.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ========================================
   ローディングコンテナ
======================================== */
.loading-container {
  position: relative;
  width: 100px;
  height: 100px;
}

/* ========================================
   メインローディング円（ぼかし効果）
======================================== */
.loading-blur-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 3px 3px 38px rgba(131, 131, 131, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: pulse 2s ease-in-out infinite;
}

/* ========================================
   グラデーション回転円（塗布イメージ）
======================================== */
.loading-grade-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 107px;
  height: 107px;
  margin: -53.5px 0 0 -53.5px;
  border-radius: 50%;
  background: linear-gradient(225deg, rgba(50, 81, 123, 0.08) 0%, rgba(113, 178, 255, 0.53) 50%, rgba(255, 255, 255, 0.67) 100%);
  box-shadow: 4px 1px 20px rgba(126, 126, 126, 0.25), inset 6px 21px 39px 11px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  animation: rotate 3s linear infinite;
}

/* ========================================
   塗布アニメーション円（コーティング表現）
======================================== */
.loading-coating {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(96, 191, 255, 0.6);
  border-right-color: rgba(143, 170, 233, 0.4);
  animation: coating 1.5s ease-in-out infinite;
}

/* ========================================
   中央ロゴ・テキストエリア
======================================== */
.loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  line-height: 1;
}

.loading-logo {
  font-size: 1.2em;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  color: #32517b;
  text-shadow: 1px 1px 1px #c0c0c0;
  letter-spacing: 0.05em;
}

.loading-text {
  font-size: 0.5em;
  color: #666;
  letter-spacing: 0.1em;
}

/* ========================================
   ドットアニメーション（オプション）
======================================== */
.loading-dots {
  display: inline-block;
}

.loading-dots span {
  animation: blink 1.4s infinite;
  animation-fill-mode: both;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* ========================================
   アニメーション定義
======================================== */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes coating {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

/* ========================================
   レスポンシブ対応
======================================== */
@media (max-width: 768px) {
  .loading-container {
    width: 150px;
    height: 150px;
  }

  .loading-grade-circle {
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
  }

  .loading-coating {
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
  }

  .loading-logo {
    font-size: 1em;
  }

  .loading-text {
    font-size: 0.7em;
  }
}

/* ========================================
   フロントページ スクロールアニメーション
======================================== */

/* 画像：ほんの少しスケールダウン */
.js-image-scale {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-image-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* テキスト：フェード＋Y移動 */
.js-text-fade {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-text-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延アニメーション（複数要素がある場合） */
/* .js-text-fade:nth-of-type(1) {
  transition-delay: 0s;
}

.js-text-fade:nth-of-type(2) {
  transition-delay: 0.05s;
}

.js-text-fade:nth-of-type(3) {
  transition-delay: 0.1s;
} */