@charset "UTF-8";
/*
Theme Name: Nakadasyokai
Theme URI: https://nakadasyokai.example.com/
Author: Nakadasyokai
Author URI: https://nakadasyokai.example.com/
Description: 有限会社中田商会 公式サイト用オリジナルテーマ
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nakadasyokai
*/

:root {
  --main-green: #DFFF00; /* ライムグリーン */
  --text-color: #333;
  --bg-light: #F9F8F0; /* 薄いベージュ */
  --font-serif: "Shippori Mincho", serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-padding-top: 80px;
}
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  color: var(--text-color);
  line-height: 1.6;
  background-color: #fff;
  padding-top: 38px;
}
.pc_no, .pc_no2, .dis_no {
  display: none;
}
.sp_no {
  display: block;
}
span.sp_no {
  display: inline;
}
br.sp_no {
  display: inline;
}
br.sp_no2 {
  display: inline;
}
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.img_pc {
  display: block;
}
.img_sp {
  display: none;
}
.clearfix {
  display: block;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix:before {
  content: "";
  display: block;
  clear: both;
}
.f_s {
  font-size: clamp(0.75rem, 1.4vw, 0.875rem);
}
.f_m {
  font-size: clamp(0.875rem, 1.6vw, 1rem);
}
.f_l {
  font-size: clamp(1rem, 2vw, 1.25rem);
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  position: relative;
}
.flex.rowre {
  flex-flow: row-reverse wrap;
}
.flex.jcfs {
  justify-content: flex-start;
}
.flex.jcc {
  justify-content: center;
}
.flex.aic {
  align-items: center;
}
.flex.aifs {
  align-items: flex-start;
}
.flex.aife {
  align-items: flex-end;
}
.flex .fg1 {
  flex-grow: 1;
}
.gap20 {
  gap: 20px;
}
.mb0 {
  margin-bottom: 0 !important;
}
.mb4 {
  margin-bottom: 0.25rem !important;
}
.mb8 {
  margin-bottom: 0.5rem !important;
}
.mb16 {
  margin-bottom: 1rem !important;
}
.mb24 {
  margin-bottom: 1.5rem !important;
}
.mb32 {
  margin-bottom: 2rem !important;
}
.mb48 {
  margin-bottom: 3rem !important;
}
.mb64 {
  margin-bottom: 4rem !important;
}
.mr0 {
  margin-right: 0 !important;
}
.mr4 {
  margin-right: 0.25rem !important;
}
.mr8 {
  margin-right: 0.5rem !important;
}
.mr16 {
  margin-right: 1rem !important;
}
.mr24 {
  margin-right: 1.5rem !important;
}
.mr32 {
  margin-right: 2rem !important;
}
.mr48 {
  margin-right: 3rem !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mt4 {
  margin-top: 0.25rem !important;
}
.mt8 {
  margin-top: 0.5rem !important;
}
.mt16 {
  margin-top: 1rem !important;
}
.mt24 {
  margin-top: 1.5rem !important;
}
.mt32 {
  margin-top: 2rem !important;
}
.mt48 {
  margin-top: 3rem !important;
}
.mt-8 {
  margin-top: -0.5rem !important;
}
.ma {
  margin: auto;
}
.w100 {
  width: 100%;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.w99 {
  width: 99%;
}
.w98 {
  width: 98%;
}
.w97 {
  width: 97%;
}
.w96 {
  width: 96%;
}
.w95 {
  width: 95%;
}
.w94 {
  width: 94%;
}
.w93 {
  width: 93%;
}
.w92 {
  width: 92%;
}
.w91 {
  width: 91%;
}
.w90 {
  width: 90%;
}
.w89 {
  width: 89%;
}
.w88 {
  width: 88%;
}
.w87 {
  width: 87%;
}
.w86 {
  width: 86%;
}
.w85 {
  width: 85%;
}
.w84 {
  width: 84%;
}
.w83 {
  width: 83%;
}
.w82 {
  width: 82%;
}
.w81 {
  width: 81%;
}
.w80 {
  width: 80%;
}
.w79 {
  width: 79%;
}
.w78 {
  width: 78%;
}
.w77 {
  width: 77%;
}
.w76 {
  width: 76%;
}
.w75 {
  width: 75%;
}
.w74 {
  width: 74%;
}
.w73 {
  width: 73%;
}
.w72 {
  width: 72%;
}
.w71 {
  width: 71%;
}
.w70 {
  width: 70%;
}
.w69 {
  width: 69%;
}
.w68 {
  width: 68%;
}
.w67 {
  width: 67%;
}
.w66 {
  width: 66%;
}
.w65 {
  width: 65%;
}
.w64 {
  width: 64%;
}
.w63 {
  width: 63%;
}
.w62 {
  width: 62%;
}
.w61 {
  width: 61%;
}
.w60 {
  width: 60%;
}
.w59 {
  width: 59%;
}
.w58 {
  width: 58%;
}
.w57 {
  width: 57%;
}
.w56 {
  width: 56%;
}
.w55 {
  width: 55%;
}
.w54 {
  width: 54%;
}
.w53 {
  width: 53%;
}
.w52 {
  width: 52%;
}
.w51 {
  width: 51%;
}
.w50 {
  width: 50%;
}
.w49 {
  width: 49%;
}
.w48 {
  width: 48%;
}
.w47 {
  width: 47%;
}
.w46 {
  width: 46%;
}
.w45 {
  width: 45%;
}
.w44 {
  width: 44%;
}
.w43 {
  width: 43%;
}
.w42 {
  width: 42%;
}
.w41 {
  width: 41%;
}
.w40 {
  width: 40%;
}
.w39 {
  width: 39%;
}
.w38 {
  width: 38%;
}
.w37 {
  width: 37%;
}
.w36 {
  width: 36%;
}
.w35 {
  width: 35%;
}
.w34 {
  width: 34%;
}
.w33b {
  width: 33.33%;
}
.w33 {
  width: 33%;
}
.w32 {
  width: 32%;
}
.w31 {
  width: 31%;
}
.w30 {
  width: 30%;
}
.w29 {
  width: 29%;
}
.w28 {
  width: 28%;
}
.w27 {
  width: 27%;
}
.w26 {
  width: 26%;
}
.w25 {
  width: 25%;
}
.w24 {
  width: 24%;
}
.w23 {
  width: 23%;
}
.w22 {
  width: 22%;
}
.w21 {
  width: 21%;
}
.w20 {
  width: 20%;
}
.w19 {
  width: 19%;
}
.w18 {
  width: 18%;
}
.w17 {
  width: 17%;
}
.w16b {
  width: 16.66%;
}
.w16 {
  width: 16%;
}
.w15 {
  width: 15%;
}
.w14 {
  width: 14%;
}
.w13 {
  width: 13%;
}
.w12 {
  width: 12%;
}
.w11 {
  width: 11%;
}
.w10 {
  width: 10%;
}
.w9 {
  width: 9%;
}
.w8 {
  width: 8%;
}
.w7 {
  width: 7%;
}
.w6 {
  width: 6%;
}
.w5 {
  width: 5%;
}
.w4 {
  width: 4%;
}
.w3 {
  width: 3%;
}
.w2 {
  width: 2%;
}
.w1 {
  width: 1%;
}
/* ヘッダー */
.header {
  height: 70px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
}
.header-inner {
  width: 100%;
  max-width: 150rem;
  margin: 0 auto;
  padding-top: 0;
  padding-left: 4%;
  padding-right: 0;
  position: relative; /* ロゴの配置基準にする */
  display: flex;
  justify-content: flex-end; /* ナビを右に寄せる */
  align-items: center;
}
.logo a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  z-index: 110; /* ヘッダーより上に */
  width: 18rem;
}
.logo a img {
  width: 100%;
}
/* メインの英語ロゴ */
.main-text {
  font-size: 40px;
  color: #1a4a3a; /* 深緑 */
  font-weight: 500;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.sub-text {
  font-size: 11px;
  color: #333;
  font-weight: normal;
  margin-top: 5px;
  /* ヘッダーの高さ(80px)を越えるように配置を調整 */
  padding-left: 2px;
}
.nav {
  display: flex;
  align-items: center;
  height: 100%;
}
.nav ul {
  display: flex;
  list-style: none;
  margin-right: 50px;
}
.nav ul li {
  margin-left: 50px;
}
.nav ul li a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 17px;
  font-weight: bold;
}
.btn-contact {
  background: var(--main-green);
  padding: 28px 60px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  font-size: 17px;
}

.main-fv{
	position: relative;
}

/* メインビジュアル（静止画バージョン） */
.mv-static {
  position: relative;
  height: auto;
  /*aspect-ratio: 3000 / 1718;*/
  min-height: 0;
  overflow: hidden;
  padding: 150px 4% 80px;
  display: flex;
  align-items: center;
}
.mv-static .mv-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
}
.mv-static .mv-overlay {
  display: none;
}
.mv-static .mv-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
  margin-top: -150px;
}
.mv-catch-img {
  margin-bottom: 30px;
  max-width: 800px;
}
.mv-catch-img img {
  width: 100%;
  height: auto;
  display: block;
}
.mv-static .mv-sub {
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 2;
  color: #fff;
  margin-bottom: 0;
  text-shadow: 0 0 6px rgba(0, 0, 0, 1);
}
.mv-bottom {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.mv-static .mv-btn {
  position: absolute;
  left: 4%;
  bottom: 60px;
  z-index: 3;
}
.mv-instagram {
  position: absolute;
  right: -10px;
  bottom: -10px;
  z-index: 3;
  display: block;
  width: 12rem;
  transition: transform 0.3s, opacity 0.3s;
}
.mv-instagram img {
  width: 100%;
  height: auto;
  display: block;
}
.mv-instagram:hover {
  transform: translateY(-3px);
  opacity: 0.85;
}
@media (max-width: 768px) {
  .mv-instagram {
    right: 0px;
    bottom: -14px;
    width: 7rem;
  }
}
@media (max-width: 768px) {
  .mv-static {
    height: auto;
    min-height: 0;
    padding: 0;
    padding-bottom: 30px;
    display: block;
    position: relative;
    overflow: visible;
  }
  /*  .mv-static .mv-bg {
        position: relative;
        inset: auto;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        height: auto;
        aspect-ratio: 4 / 3;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
*/
  .mv-static .mv-overlay {
    display: none;
  }
  .mv-static .mv-content {
    position: relative;
    margin-top: 20px;
    padding: 0 4%;
    max-width: none;
  }
  .mv-catch-img {
    display: none;
  }
  .mv-static .mv-sub {
    display: none;
  }
  .mv-bottom {
    display: none;
  }
  .mv-static .mv-btn {
    position: relative;
    left: auto;
    bottom: -10px;
    margin: 20px 4% 0;
    width: calc(100% - 8% - 110px);
    display: inline-flex;
    justify-content: space-between;
    padding: 28px 24px;
  }
  .mv-static .mv-instagram {
    position: absolute;
    right: 4%;
    bottom: 30px;
    width: 90px;
  }
}
/* メインビジュアル */
.main-visual {
  margin-top: 0;
  height: 100vh;
  position: relative;
  display: flex;
  padding: 0 4%;
  padding-top: 150px;
  overflow: hidden;
}
.mv-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mv-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
  transform: scale(1.145);
}
.mv-slide.active {
  opacity: 1;
  animation: mvZoom 6s ease-in-out forwards;
}
@keyframes mvZoom {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1.15);
  }
}
.mv-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(137, 192, 220, 0.45) 0%, rgba(137, 192, 220, 0.3) 50%, rgba(25, 84, 82, 0.0) 65%);
}
@media (max-width: 768px) {
  .main-visual .mv-slide:nth-child(1), .main-visual .mv-slide:nth-child(2) {
    background-position: right center;
  }
  .main-visual .mv-slide:nth-child(2) {
    background-size: auto 100%;
    background-position: 75% center;
  }
}
.mv-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  color: #fff;
}
@media (max-width: 768px) {
  .mv-content {
    margin-top: -120px;
  }
}
.mv-content h2 {
  font-size: clamp(28px, 4.5vw, 50px);
  line-height: 1.5;
  margin-bottom: 30px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.mv-underline {
  background-image: linear-gradient(var(--main-green), var(--main-green));
  background-size: 92% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 6px;
  padding-left: 1px;
  padding-right: 1px;
}
.mv-sub {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 2;
  color: #fff;
  margin-bottom: 40px;
}
.mv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--main-green);
  color: #000;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.4rem;
  padding: 26px 36px;
  min-width: 360px;
  transition: transform 0.3s, opacity 0.3s;
  /*margin-left: 8%;*/
}
.mv-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}
@media (max-width: 1000px) {
	.mv-btn {margin-top: 5%;}
}

.mv-btn-arrow {
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  .mv-content h2 {
    font-size: 26px;
    line-height: 1.5;
    margin-bottom: 80px;
  }
  .mv-sub {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 20px;
  }
  .mv-btn {
    min-width: 240px;
    padding: 22px 24px;
    gap: 20px;
    font-size: 0.9rem;
	margin-top: 36px;
	margin-left: 0;
  }
}
h3 {
  font-size: clamp(2rem, 1.818rem + 0.91vw, 2.5rem);
  color: #666666;
}
/* お知らせ */
.news {
  background-color: var(--bg-light);
  padding: 100px 0;
  margin-top: 30px;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 4%;
}
.news-layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 50px;
}
.news-layout .section-title {

}
.news-list {
  list-style: none;
}
.news-list li {
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
  display: flex;
}
.news-list li a {
  display: flex;
  text-decoration: none;
  flex-flow: row nowrap;
  color: #666662;
  position: relative;
}
.news-list li a p:hover {
  text-decoration: underline;
}
/*.news-list li a::after {
  background-color: #333; 
  bottom: 1px; 
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all .3s;
  width: 100%;
}
.news-list li a:hover::after {
  bottom: -2px; 
  opacity: 1;
}*/
.news-list li a .date {
  width: 100px;
  font-weight: bold;
}
/* お知らせタブ */
.news-tabs {
  display: flex;
  gap: 30px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  padding-bottom: 0;
}
.news-tab {
  background: none;
  border: none;
  padding: 12px 4px;
  font-size: 0.95rem;
  color: #999 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: color 0.2s;
  font-family: inherit;
}
.news-tab:hover {
  color: #666662;
}
.news-tab.active {
  color: #666662 !important;
  font-weight: bold;
}
.news-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #666662;
}
.tab-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.tab-dot-all {
  background: #666662;
}
.tab-dot-info {
  background: #187439;
}
.tab-dot-blog {
  background: #BEF009;
}
/* NEWバッジとカテゴリドット */
.news-list li {
  padding: 18px 0;
  border-bottom: 1px solid #e0e0e0;
  min-height: 70px;
  align-items: center;
}
.news-list {
  min-height: 420px;
}
.news-list li a {
  align-items: center;
  gap: 10px;
}
.news-item[data-category="blog"] .news-badge {
  background: #BEF009;
}
.news-badge {
  background: #187439;
  color: #fff;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.news-cat-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.news-cat-info {
  background: #187439;
}
.news-cat-blog {
  background: #BEF009;
}
.news-list li a p {
  margin: 0;
  flex: 1;
}
/* 丸いボタン */
.view-more-circle {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-color);
  margin-top: 20px;
}
.view-more-circle::after {
  content: "→";
  background: var(--main-green);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 10px;
}
/* 企業情報 */
.company {
  padding: 100px 0;
}
.company-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.company-image img {
  width: 100%;
  border-radius: 15px;
}
@media (max-width: 1500px) {
  .main-visual {
    height: 60vh;
  }
}
@media (max-width: 1200px) {
  .main-visual {
    height: 65vh;
  }
}
/* レスポンシブ (スマホ対応) */
@media (max-width: 768px) {
  .nav {
    display: none; /* 本来はハンバーガーメニュー等に置き換え */
  }
  .news-layout, .company-grid {
    grid-template-columns: 1fr;
  }
  .main-visual {
    height: 55vh;
  }
  .logo {
    top: 10px;
    left: 1%;
  }
  .news {
    padding: 50px 0;
  }
  .news-list li .date {
    /*margin-right: 10px;*/
  }
}
/* レイアウトの基本設定 */
.tri-layout {
  padding: 80px 0;
  background-color: #fff;
}
.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}
.container02 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
.container03 {
	margin-left: 8%;
	margin-right: 8%;
}
@media (max-width: 1000px) {
	.container03 {
	margin-left: 4%;
	margin-right: 4%;
}
}
.tri-grid {
  display: flex;
  gap: 30px; /* 要素間の隙間 */
  align-items: flex-start; /* 上揃え */
}
.tri-item {
  flex: 1; /* 3つの要素を均等幅に */
}
.tri-item.text-content {
  flex: 1.5;
}
.tri-item-center, .tri-item-right {
  flex: 0.85;
}
/* 画像のスタイル */
.tri-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* 角を少し丸く */
  object-fit: cover;
}
.tri-item .tri-img + .tri-img {
  margin-top: 20px;
}
.tri-item-center {
  margin-top: 100px;
}
.tri-item-right {
  margin-top: -60px;
}
@media (max-width: 768px) {
  .tri-item-center, .tri-item-right {
    margin-top: 0;
  }
}
/* テキスト部分のスタイル */
.text-content {
  text-align: left;
}
.tri-title {
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 20px;
  font-weight: bold;
}
.tri-desc {
  font-size: 15px;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.8;
}
/* ボタン（画像のデザインに寄せています） */
.view-more-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 14px;
}
.view-more-btn::after {
  content: "→";
  background: #DFFF00; /* ライムグリーン */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 10px;
}
.tri-layout {
  position: relative; /* 子要素の基準点にする */
  padding: 170px 0 100px;
  background-color: #fff;
  overflow: hidden; /* 画像が画面からはみ出しても横スクロールが出ないようにする */
}
.container {
  position: relative;
  z-index: 8; /* コンテンツを背景より上に */
}
@media (max-width: 768px) {
  .tri-layout {
    padding: 50px 0 90px;
  }
}
/* 背景装飾のスタイル */
.bg-decoration {
  position: absolute;
  bottom: -20px; /* 下からの位置（デザインに合わせて調整） */
  left: 0; /* 左からの位置（デザインに合わせて調整） */
  width: 50%; /* 画像のサイズ */
  z-index: 1; /* コンテンツの後ろ、背景色より前 */
  opacity: 0.9; /* 少し透かせたい場合 */
  pointer-events: none; /* 画像がリンクなどのクリックを邪魔しないようにする */
}
.bg-decoration img {
  width: 100%;
  height: auto;
}
/* --- ハンバーガーボタンのスタイル --- */
.hamburger {
  display: none; /* PCでは隠す */
  width: 30px;
  height: 24px;
  position: relative;
  cursor: pointer;
  z-index: 200;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1a4a3a;
  transition: all 0.4s;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 11px;
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
/* クリックされて「open」クラスがついた時の三本線の動き（×印になる） */
.hamburger.open span:nth-child(1) {
  transform: translateY(11px) rotate(-45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-11px) rotate(45deg);
}
/* --- スマホ用ナビゲーションのスタイル --- */
/* --- ハンバーガーボタンのスタイル --- */
.hamburger {
  display: none; /* PCでは非表示 */
  background: none;
  border: none;
  width: 30px;
  height: 24px;
  position: relative;
  cursor: pointer;
  z-index: 200;
  margin-right: 10px;
}
.hamburger span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1a4a3a;
  transition: all 0.4s ease;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 11px;
}
.hamburger span:nth-child(3) {
  bottom: 0;
}
/* クリック時のアニメーション（×印に変形） */
.hamburger.open span:nth-child(1) {
  transform: translateY(11px) rotate(-45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-11px) rotate(45deg);
}
/* --- スマホ用ナビゲーション (768px以下) --- */
@media (max-width: 768px) {
  .hamburger {
    display: block; /* スマホで表示 */
  }
  .nav {
    position: fixed;
    top: 0;
    right: -100%; /* 画面外に待機 */
    width: 100%; /* 全画面メニュー */
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.5s ease;
    z-index: 150;
  }
  .nav.open {
    right: 0; /* 画面内にスライド */
  }
  .nav ul {
    flex-direction: column;
    text-align: center;
    margin: 0 0 40px 0;
  }
  .nav ul li {
    margin: 20px 0;
  }
  /* ロゴのはみ出し微調整（スマホ時） */
  .sub-text {
    color: #1a4a3a; /* スマホでは背景が白くなるので色を濃く */
  }
}
/* --- 事業紹介 (Business) --- */
.business {
  padding: 100px 0 200px;
  position: relative;
  overflow: hidden;
  margin-bottom: 150px;
  z-index: 0;
}
.business-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  position: relative;
  z-index: 5;
}
.business-card {
  display: flex;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  align-items: center;
}
.card-center {
  grid-column: 1 / 3;
  width: 50%;
  margin: 0 auto;
}
.card-body {
  flex: 1;
  padding-right: 15px;
}
.card-body h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}
.card-body p {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}
.card-body ul {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.card-body ul li {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
  padding-left: 1.2em;
  position: relative;
}
.card-body ul li::before {
  content: "●";
  color: #1a4a3a;
  position: absolute;
  left: 0;
}
.business-partners {
  margin-top: 40px;
  text-align: center;
}
.business-partners h4 {
  font-size: 1.5rem;
  color: #666666;
  margin-bottom: 25px;
}
.business-partners ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 800px;
  text-align: left;
}
.business-partners ul li {
  font-size: 1.2rem;
  color: #666;
  line-height: 1.8;
  padding-left: 1.2em;
  position: relative;
}
.business-partners ul li::before {
  content: "●";
  color: #1a4a3a;
  position: absolute;
  left: 0;
}
.partners-etc {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  padding-left: 1.2em;
}
.card-img {
  flex: 1.2;
}
.card-img img {
  width: 100%;
  border-radius: 5px;
}
/* 背景装飾：ライムグリーンの曲線 */
.bg-decoration-line {
  position: absolute;
  bottom: 80px;
  right: 0;
  width: 60%;
  height: auto;
  z-index: 3;
}
.bg-text-intro {
  position: absolute;
  bottom: -20px;
  left: 100px;
  font-size: 115px;
  color: #f1f1f1;
  z-index: 2;
  white-space: nowrap;
  font-family: "Zalando Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth"100;
  letter-spacing: -2px;
}
/* --- 採用情報 (Recruit) --- */
.recruit {
  padding: 100px 0 50px;
  background-color: #f8f7f2; /* 薄いベージュ背景 */
}
.recruit-white-box {
  background: #fff;
  border-radius: 30px;
  padding: 60px 40px;
}
.recruit-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 0 4%;
}
.recruit-nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: #fff;
  /*background-image: linear-gradient(#FCFFE3 , #DFFF00);*/
  border-radius: 0;
  padding: 28px 15px;
  text-decoration: none;
  color: #1a4a3a;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  /*border-radius: 10px;*/
}
.recruit-nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.12);
  background-image: linear-gradient(#FCFFE3, #DFFF00);
}
.recruit-nav-icon {
  font-size: 48px !important;
  color: #1a4a3a;
}
.recruit-nav-label {
  font-size: 0.95rem;
  font-weight: bold;
  color: #1a4a3a;
}
@media (max-width: 768px) {
  .recruit-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .recruit-nav-card {
    padding: 20px 10px;
  }
  .recruit-nav-icon {
    font-size: 40px !important;
  }
  .recruit-nav-label {
    font-size: 0.85rem;
  }
}
.recruit-sub-title {
  text-align: center;
  font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
  margin-bottom: 50px;
  color: #666666;
}
.job-list-box {
  margin-bottom: 40px;
}
.job-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 50px;
  max-width: 900px;
  margin: 0 auto;
}
.job-item {
  border-bottom: 1px solid #ddd;
  padding-bottom: 30px;
}
.job-category {
  font-size: 1.2rem;
  color: #1a4a3a;
  margin-bottom: 15px;
  font-weight: bold;
}
.job-image {
  margin-bottom: 20px;
}
.job-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
/* スタッフページ v2 (staff2.html) */
.staff-page-v2 {
    background: #fff;
}

.staff-page-v2 .container {
    max-width: 1200px;
}

.staff2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 0;
    align-items: start;
    position: relative;
    z-index: 1;
}

.staff-page-v2 {
    position: relative;
    overflow: hidden;
}

.staff2-bg {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.staff2-bg img {
    width: 100%;
    height: auto;
    display: block;
}

.staff2-bg-gr02 {
    width: 60vw;
    left: 0;
    top: 400px;
}

.staff2-bg-gr02 img {
    object-position: left center;
}

.staff2-bg-green {
    width: 60vw;
    right: 0;
    top: 1300px;
}

.staff2-bg-green img {
    object-position: right center;
}

.staff2-grid > .staff-card-box {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .staff2-bg-gr02 {
        width: 35vw;
        top: 700px;
    }
    .staff2-bg-green {
        width: 35vw;
        top: 1700px;
    }
}

.staff2-grid > .staff-card-box {
    margin-bottom: 40px;
}

/* 右カラム（偶数番目）を下にずらす */
/*.staff2-grid > .staff-card-box:nth-child(even) {
    margin-top: 100px;
}*/

/* タイトルとケース番号を白枠の外に出す */
.staff-page-v2 .staff-card-box.recruit-white-box {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

.staff-page-v2 .staff-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.staff-page-v2 .staff-header-info {
    width: 100%;
}

.staff-page-v2 .staff-header-info .staff-name-sub,
.staff-page-v2 .staff-header-info .staff-meta {
    display: none;
}

.staff-page-v2 .staff-name {
    margin-bottom: 0;
}

/* 画像エリアを白枠化 */
.staff-page-v2 .staff-image-area {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 30px;
}

.staff-page-v2 .staff-image-area .staff-image {
    width: 100%;
    margin-bottom: 0;
}

.staff-page-v2 .staff-image-area .staff-image img {
    border-radius: 12px;
    aspect-ratio: auto;
    width: 100%;
    height: auto;
}

.staff-page-v2 .staff-image-info {
    right: 0;
    bottom: 0;
    width: 35%;
    padding: 12px 0 0 18px;
}

/* インタビュー部分を白枠化 */
.staff-page-v2 .staff-interview {
    background: #fff;
    padding: 30px 28px;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    .staff2-grid {
        grid-template-columns: 1fr;
    }

    .staff2-grid > .staff-card-box:nth-child(even) {
        margin-top: 0;
    }

    .staff-page-v2 .staff-image-info {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 15px;
    }
}

/* 社員インタビュー目次 */
.staff-toc {
  list-style: none;
  padding: 30px 40px;
  margin: 0 auto 60px;
  max-width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
}
.staff-toc li {
  list-style: none;
}
.staff-toc a {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #333;
  padding: 8px 4px;
  border-bottom: 1px solid #ddd;
  transition: color 0.2s;
}
.staff-toc a:hover {
  color: #1a4a3a;
}
.staff-toc a::after {
  content: "→";
  margin-left: auto;
  color: #1a4a3a;
  font-weight: bold;
}
.staff-toc-no {
  display: inline-block;
  background: var(--main-green);
  color: #000;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  flex-shrink: 0;
}
.staff-toc-title {
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .staff-toc {
    grid-template-columns: 1fr;
    padding: 20px 20px;
    gap: 8px;
  }
  .staff-toc-title {
    font-size: 0.85rem;
  }
}
.staff-card-box .staff-image {
  margin-bottom: 20px;
  width: 50%;
}
.staff-card-box .staff-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
@media (max-width: 768px) {
  .staff-card-box .staff-image {
    width: 100%;
  }
}
/* スタッフ画像 + 情報カード */
.staff-image-area {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
}
.staff-image-area .staff-image {
  width: 100%;
  margin-bottom: 0;
}
.staff-image-info {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38%;
  background: #fff;
  padding: 16px 20px;
  border-radius: 18px 0 0 0;
  /*box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);*/
  z-index: 2;
}
.staff-info-tag {
  font-size: 0.85rem;
  color: #333;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.staff-info-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a4a3a;
}
.staff-info-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #1a4a3a;
  margin-bottom: 10px;
  line-height: 1.4;
}
.staff-info-meta {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .staff-image-area {
    margin-bottom: 20px;
    width: 100%;
  }
  .staff-image-area .staff-image {
    width: 100%;
  }
  .staff-image-info {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 15px;
    padding: 0 26px;
  }
}
.job-detail {
  margin-bottom: 10px;
}
.job-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}
.job-text {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
}
.job-qualification {
  list-style: none;
  padding: 0;
  margin: 0;
}
.job-qualification li {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.8;
  padding-left: 1.2em;
  position: relative;
}
.job-qualification li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.job-note {
  font-size: 0.8rem;
  color: #999;
  margin-top: 5px;
  line-height: 1.6;
}
.values-grid {
  display: flex;
  justify-content: space-around;
  gap: 30px;
  margin-bottom: 60px;
}
.value-item {
  flex: 1;
  text-align: center;
}
.value-item .icon {
  width: 60px;
}
.value-item h4 {
  font-size: 1.8rem;
}
.value-item p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
.founder-message {
  background-color: #f2f2e8;
  border-radius: 15px;
  padding: 30px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.founder-label {
  background: none;
  font-weight: bold;
  font-size: 18px;
  white-space: nowrap;
  padding-top: 5px;
}
.founder-text p {
  font-size: 15px;
  color: #555;
  margin-bottom: 10px;
}
/* ボックス間の余白 */
.second-box, .third-box {
  margin-top: 40px;
}
/* --- 求める人材 --- */
.person-grid {
  display: flex;
  align-items: center;
  gap: 50px;
}
.person-list {
  flex: 1;
  list-style: none;
}
.person-list li {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  font-weight: bold;
  color: #444;
}
.person-list li:last-child {
  border-bottom: none;
}
.icon-green {
  width: 30px;
  margin-right: 20px;
  display: flex;
  justify-content: center;
}
.person-image {
  flex: 1.2;
}
.person-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
/* --- 待遇・制度 --- */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 30px;
}
.benefit-item {
  text-align: left;
  padding: 0 10px 0 40px;
  position: relative;
}
/* 縦の仕切り線（最後以外） */
.benefit-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: #fff;
  border-left: 2px dotted #ccc;
}
.benefit-item:first-child::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: #fff;
  border-left: 2px dotted #ccc;
}
.benefit-icon {
  width: 50px;
  margin-bottom: 20px;
}
.benefit-icon .material-icons-sharp {
  font-size: 50px;
  color: #1a4a3a;
  line-height: 1;
}
.benefit-item h4 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #333;
}
.benefit-item ul {
  list-style: none;
  text-align: left;
  display: inline-block;
}
.benefit-item ul li {
  font-size: 16px;
  color: #666;
  margin-bottom: 8px;
  position: relative;
  padding-left: 16px;
}
.benefit-item ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #177339;
  font-weight: bold;
}
/* ボックスの間隔 */
.fourth-box {
  margin-top: 40px;
  margin-bottom: 100px; /* 最後のセクションなので下を広めに */
}
/* インタビューグリッド */
.interview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
/* カードのデザイン */
a.interview-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* インタビュー スライダー */
.interview-slider {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 80px;
}

.interview-viewport {
  overflow: hidden;
}

.interview-track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s ease;
}

.interview-track > .interview-card {
  flex: 0 0 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
}

.interview-prev,
.interview-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid #b5b5b5;
  background: #fff;
  color: #555;
  font-size: 26px;
  font-weight: 300;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 0 4px 0;
  transition: all 0.2s;
}

.interview-prev:hover,
.interview-next:hover {
  border-color: #1a4a3a;
  color: #1a4a3a;
  background: #fff;
}

.interview-prev {
  left: 0;
}

.interview-next {
  right: 0;
}

.interview-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.interview-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.interview-dots button.active {
  background: #1a4a3a;
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .interview-slider {
    padding: 0 40px;
  }
  .interview-track {
    gap: 0;
  }
  .interview-track > .interview-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .interview-prev {
    left: 2px;
  }
  .interview-next {
    right: 2px;
  }
}

.interview-card {
  position: relative;
  border-radius: 25px;
  overflow: hidden; /* 画像の角を丸める */
  background: #000; /* 画像が読み込まれるまでの背景 */
  aspect-ratio: 3 / 4; /* カードの縦横比を固定 */
}
.interview-img {
  width: 100%;
  height: 100%;
  position: relative;
}
.interview-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を枠いっぱいに広げる */
  transition: transform 0.5s ease;
}
/* ホバー時に画像を少し大きくする演出 */
.interview-card:hover .interview-img img {
  transform: scale(1.05);
}
/* テキストの重なり部分 */
.interview-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 40%);
  color: #fff;
}
.interview-message {
  font-size: 14px;
  line-height: 1.6;
  font-weight: bold;
  margin-bottom: 8px;
}
.interview-profile {
  font-size: 12px;
  opacity: 0.8;
}
/* ボックス間隔 */
.fifth-box {
  margin-top: 40px;
}
/* タイムライン全体のコンテナ */
.timeline-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  /* 垂直線の位置を基準にするため、左側に余白を確保 */
  padding-left: 0;
}
/* 垂直なライン（位置を固定） */
.timeline-container::before {
  content: '';
  position: absolute;
  left: 100px; /* 左から100pxの位置に線を引く */
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-color: #DFFF00; /* ライムグリーン */
  z-index: 1;
}
.timeline-item {
  display: flex;
  margin-bottom: 40px;
  position: relative;
  align-items: flex-start;
}
.timeline-img img {
  border-radius: 25px;
}
.timeline-img, .timeline-text {
  width: 50%;
}
/* 時間ラベル部分 */
.time-label {
  width: 100px; /* 線までの幅と合わせる */
  text-align: left;
  padding-top: 5px;
}
.time {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}
.timeline-text h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.timeline-text {
  color: #666;
}
/* タイムライン上の点（線の中央にぴったり重ねる） */
.dot {
  width: 12px;
  height: 12px;
  background-color: #1a4a3a; /* 深緑 */
  border-radius: 50%;
  position: absolute;
  left: 101px; /* 線(100px) + 線の太さの半分(1px) - ドットの半径(6px) = 95px 付近で微調整 */
  transform: translateX(-50%); /* 自分の幅の半分だけ左に戻して中心を合わせる */
  top: 14px; /* 時間の文字の高さに合わせる */
  z-index: 2;
}
/* コンテンツ部分 */
.timeline-content {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding-left: 40px;
  padding-top: 5px;
}
/* --- お問い合わせセクション --- */
.contact-section {
  padding: 60px 0 100px;
  background-color: #f8f7f2; /* 採用セクションと同じ背景色 */
}
.contact-cta-box {
  background-image: linear-gradient(#d2ff02, #7fbf26);
  border-radius: 40px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}
.contact-cta-box h2 {
  font-size: 32px;
  color: #1a4a3a; /* 深緑 */
  margin-bottom: 20px;
}
.contact-cta-box p {
  font-size: 16px;
  color: #1a4a3a;
  margin-bottom: 40px;
}
/* ボタンレイアウト */
.cta-button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.btn-main-white, .btn-outline-white {
  display: block;
  width: 280px;
  padding: 20px 0;
  border-radius: 15px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.3s ease;
  line-height: 0.8;
}
/* 白背景ボタン */
.btn-main-white {
  background-color: #fff;
  color: #1a4a3a;
}
.btn-main-white:hover {
  background-color: #f0f0f0;
  transform: translateY(-3px);
}
/* 枠線ボタン */
.btn-outline-white {
  background-color: #DFFF00;
  border: 2px solid #DFFF00;
  color: #1a4a3a;
}
.btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}
/* --- フッター --- */
.footer {
  background-color: #2D3E33; /* ダークグリーンの背景 */
  color: #fff;
  padding: 60px 0 40px;
}
.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 4%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 下揃え */
}
.footer-logo-text {
  font-size: 28px;
  margin-bottom: 15px;
}
.footer-address {
  font-style: normal;
}
.footer-address p {
  font-size: 19px;
  opacity: 0.8;
  margin-bottom: 5px;
}
.footer-contact-details {
  font-size: 19px;
  opacity: 0.8;
}
.footer-contact-details span {
  margin-right: 20px;
}
.footer-copy-area {
  text-align: right;
}
.footer-catchphrase {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 20px;
}
.copyright {
  font-size: 12px;
  opacity: 0.6;
}
.tc {
  text-align: center;
}
/* レスポンシブ対応（スマホ表示） */
.recruit_title {
  background: url('./assets/img/recruit_fv.jpg') no-repeat center center / cover;
  padding: 5rem 0;
}
@media (max-width: 960px) {
  .pc_no {
    display: block;
  }
  br.pc_no, span.pc_no {
    display: inline;
  }
  .sp_no, br.sp_no {
    display: none;
  }
  span.sp_no {
    display: none;
  }
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレットで2列 */
    gap: 40px;
  }
  .benefit-item:nth-child(2)::after {
    display: none; /* 2列時の仕切り線調整 */
  }
  .interview-grid {
    grid-template-columns: 1fr; /* タブレット・スマホで1列 */
    max-width: 500px;
    margin: 0 auto;
  }
	.interview-slider {padding: 0 50px;}
  .interview-img img {
    object-position: center top;
  }
}
@media (max-width: 768px) {
  .text-content {
    /*  order: -1;  スマホの時だけテキストを一番上にしたい場合はこれ */
    text-align: center;
  }
  .bg-decoration {
    width: 80%;
    left: 0;
    bottom: 0;
  }
  .tri-grid {
    flex-direction: column; /* 縦並びに変更 */
    gap: 40px;
  }
  .business-grid, .values-grid {
    grid-template-columns: 1fr;
    display: block;
  }
  .business-card {
    flex-direction: column;
    margin-bottom: 20px;
  }
  .card-center {
    width: 100%;
  }
  .card-body {
    padding-right: 0;
    margin-bottom: 15px;
  }
  .founder-message {
    flex-direction: column;
    gap: 15px;
  }
  .bg-text-intro {
    font-size: 50px;
  }
  .recruit {
    padding-top: 50px;
  }
  .value-item .icon {
    width: 30px;
  }
  .value-item h4 {
    font-size: 1.3rem;
  }
  .person-grid {
    flex-direction: column;
  }
  .person-list {
    width: 100%;
  }
  .person-list li {
    padding: 12px 0 12px 10px;
  }
  .benefits-grid {
    grid-template-columns: 1fr; /* スマホで1列 */
  }
  .benefit-item::after {
    display: none; /* スマホでは仕切り線を消す */
  }
  .benefit-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
  }
  .benefits-grid {
    gap: 20px;
    padding: 0 20px;
  }
  .benefit-icon {
    width: 40px;
    margin-right: 10px;
  }
  .benefit-item ul {
    width: 100%;
  }
  .benefit-item:last-child {
    border-bottom: none;
  }
  .benefit-item:first-child::before {
    display: none;
  }
  .timeline-container::before {
    left: 60px; /* スマホでは線を左に寄せる */
  }
  .time-label {
    width: 60px;
  }
  .dot {
    left: 61px; /* 線の位置に合わせてドットも移動 */
  }
  .timeline-content {
    padding-left: 30px;
    flex-wrap: wrap;
  }
  .timeline-img, .timeline-text {
    width: 100%;
  }
  .time {
    font-size: 1.2rem;
  }
  .cta-button-group {
    flex-direction: column;
    align-items: center;
  }
  .btn-main-white, .btn-outline-white {
    width: 100%;
    max-width: 300px;
  }
  .job-list-grid {
    grid-template-columns: 1fr;
  }
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .footer-copy-area {
    text-align: left;
  }
  .recruit-white-box {
    padding: 30px 10px;
  }
  .fourth-box {
    margin-bottom: 50px;
  }
  .recruit-sub-title {
    margin-bottom: 25px;
  }
  .value-item p {
    margin-bottom: 20px;
  }
  .bg-decoration-line {
    width: 90%;
    bottom: 40px;
  }
  .bg-text-intro {
    left: 0;
    bottom: 0;
  }
  .business {
    padding-bottom: 100px;
    margin-bottom: 50px;
    padding-top: 50px;
  }
	  .interview-card {
    aspect-ratio: 7 / 6; /* モバイルでは少し横長の方が収まりが良い */
  }
	.interview-overlay{
		padding: 16px 14px;
	}
	.interview-slider {padding: 0 10px;}
}
.interview-prev, .interview-next{
	width: 20px;
    height: 20px;
	font-size: 16px;
	    border: 1px solid #b5b5b5;
}
/* スタッフページ */
.staff-page {
  padding: 130px 0 60px;
  background-color: var(--bg-light);
}
.staff-card-box {
  margin-bottom: 40px;
}
.staff-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 2px solid #1a4a3a;
}
.staff-header-info {
  flex: 1;
}
.staff-case-no {
  display: inline-block;
  background: var(--main-green);
  color: #000;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 8px 18px;
  align-self: flex-start;
  flex-shrink: 0;
}
.staff-name {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  color: #1a4a3a;
  margin-bottom: 10px;
  line-height: 1.4;
}
.staff-name-sub {
  font-size: 1rem;
  color: #666;
  font-weight: bold;
  margin-bottom: 12px;
}
.staff-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.staff-meta-tag {
  display: inline-block;
  background: #1a4a3a;
  color: #fff;
  font-size: 0.8rem;
  padding: 4px 14px;
  border-radius: 20px;
}
.staff-interview {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.staff-qa-section {
  margin-bottom: 10px;
}
.staff-section-heading {
  font-size: 1.1rem;
  color: #1a4a3a;
  padding-left: 15px;
  border-left: 4px solid #1a4a3a;
  margin-bottom: 20px;
}
.staff-qa {
  margin-bottom: 20px;
  padding-left: 20px;
}
.staff-question {
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  position: relative;
  padding-left: 1.5em;
}
.staff-question::before {
  content: "Q.";
  color: #1a4a3a;
  font-weight: bold;
  position: absolute;
  left: 0;
}
.staff-answer {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.8;
  padding-left: 1.5em;
  position: relative;
}
.staff-answer::before {
  content: "A.";
  color: #c8a45a;
  font-weight: bold;
  position: absolute;
  left: 0;
}
.staff-message-box {
  background: #f0f6f3;
  border-left: 4px solid #1a4a3a;
  padding: 20px 25px;
  border-radius: 0 10px 10px 0;
  margin-top: 10px;
}
.staff-message-box p {
  font-size: 1rem;
  color: #333;
  font-weight: bold;
  line-height: 1.8;
}
.hissu {
  display: inline-block;
  background: #c35;
  color: #fff;
  font-size: 0.7rem;
  padding: 0.1rem 0.25rem;
  vertical-align: middle;
  position: relative;
  margin: -0.1rem 0.25rem 0.25rem 0;
  /* border-radius: 0.25rem; */
  line-height: 1.5;
}
.hissu::before {
  content: "必須";
}
/*-- FORM/ --*/
.contact-page form {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: middle;
  background: transparent;
}
.contact-page form label {
  vertical-align: middle;
}
.contact-page select, input, textarea, button {
  width: auto;
  max-width: 100%;
  -webkit-appearance: none;
  vertical-align: middle;
  position: relative;
  line-height: 1.5;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  margin: 0 5px 0 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid #777;
  box-shadow: none;
  z-index: 0;
  box-sizing: border-box; /*border-radius: 0.25rem;*/ background: rgba(255, 255, 255, 0.5);
}
.contact-page input[type="text"] {
  margin: 0 0.25rem 0 0;
}
.contact-page input.long {
  width: 100%;
  margin: 0;
  position: relative;
}
.contact-page button, a.btn, .contact-page input[type="button"], .contact-page input[type="submit"]:not(.adminbar-button) {
  display: inline-block !important;
  vertical-align: middle;
  -webkit-appearance: none;
  overflow: visible;
  width: auto;
  min-width: 9rem;
  line-height: 1.6rem;
  letter-spacing: 0.1rem;
  margin: 0.5rem 0.25rem 0.5rem 0;
  color: #fff !important;
  position: relative;
  text-decoration: none;
  transition: all .2s;
  box-sizing: border-box;
  cursor: pointer; /*border-radius: 0.25rem;*/ padding: 0.5rem 2rem;
  background: var(--black) url(./assets/img/i_arrow_rw.svg) left 0.75rem center /1rem no-repeat;
}
.contact-page input::placeholder, .contact-page textarea::placeholder {
  color: #777;
}
.contact-page button.b_back, a.btn.b_back, .contact-page input[type="button"].back_button {
  background: #fff url(./assets/img/i_arrow_l.svg) left 0.75rem center /1rem no-repeat !important;
  color: var(--black) !important;
  margin-top: 2rem;
}
.contact-page .b_back::after {
  content: "";
  position: absolute;
  display: inline-block;
  left: 10px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--black);
  border-right: 2px solid var(--black);
  transform: rotate(45deg);
  box-sizing: border-box;
}
.contact-page button:hover, .contact-page a.btn:hover, .contact-page input[type="button"]:hover, .contact-page input[type="submit"]:hover {
  text-decoration: none;
  filter: brightness(85%);
  color: #fff;
}
.contact-page button[disabled], a.btn[disabled], .contact-page .button[disabled], .contact-page input[type="button"][disabled], .contact-page input[type="submit"][disabled], button[disabled]:hover, a.btn[disabled]:hover, .contact-page .button[disabled]:hover, input[type="button"][disabled]:hover, .contact-page input[type="submit"][disabled]:hover {
  background: #ddd;
  border: none;
  color: #fff;
  opacity: 1.0;
  cursor: default;
  position: relative;
}
.contact-page a.btn {
  padding-right: 2rem;
  position: relative;
}
.contact-page a.btn[target='_blank']::after {
  right: -0.5rem;
  background: url(./assets/img/i_blank_w.svg) center bottom /100% no-repeat !important;
}
.contact-page button.mini, .button.mini {
  min-width: 0;
}
.contact-page input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 3px rgba(255, 111, 63, 1);
  border: 1px solid var(--orange);
}
.contact-page input.button {
  width: 15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  margin: 0 auto;
  padding: 0.5rem 2rem;
  background: var(--orange) url("./assets/img/arrow_rw.svg") right 0.75rem center /1.25rem no-repeat;
  color: #fff;
  border-radius: 0.25rem;
}
.contact-page input.button:hover {
  background: var(--orange) url("./assets/img/arrow_rw.svg") right 0.75rem center /40px no-repeat;
}
.contact-page .Form-Item {
  margin-bottom: 1.5rem;
}
.contact-page .notice {
  background: var(--bg-light);
  padding: 1rem 1.5rem;
}
@media (max-width: 768px) {
  .staff-page {
    padding: 110px 0 40px;
  }
  .staff-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 10px;
    margin-bottom: 18px;
  }
  .staff-qa {
    padding-left: 10px;
  }
  .resp100 {
    width: 100%;
  }
  .resp95 {
    width: 95%;
  }
  .resp90 {
    width: 90%;
  }
  .resp85 {
    width: 85%;
  }
  .resp80 {
    width: 80%;
  }
  .resp75 {
    width: 75%;
  }
  .resp70 {
    width: 70%;
  }
  .resp65 {
    width: 65%;
  }
  .resp60 {
    width: 60%;
  }
  .resp55 {
    width: 55%;
  }
  .resp50 {
    width: 50% !important;
  }
  .resp48 {
    width: 48% !important;
  }
  .resp49 {
    width: 49% !important;
  }
  .resp45 {
    width: 45%;
  }
  .resp40 {
    width: 40%;
  }
  .resp35 {
    width: 35%;
  }
  .resp30 {
    width: 30%;
  }
  .resp25 {
    width: 25%;
  }
  .resp20 {
    width: 20%;
  }
  .resp15 {
    width: 15%;
  }
  .resp10 {
    width: 10%;
  }
  .resp05 {
    width: 5%;
  }
  .index_box.sdgs {
    width: 100%;
  }
  .resp_no {
    display: none;
  }
  .resp_ma {
    margin: auto;
  }
  .resp_tc {
    text-align: center;
  }
}
/* ページの上部に戻るボタン */
.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--main-green);
  border: none;
  cursor: pointer;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
  padding: 0;
}
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}
.scroll-top:focus-visible {
  outline: 2px solid #1a4a3a;
  outline-offset: 2px;
}
.scroll-top-arrow {
  display: block;
  width: 14px;
  height: 14px;
  border-top: 3px solid #1a4a3a;
  border-right: 3px solid #1a4a3a;
  transform: rotate(-45deg);
  margin-top: 5px;
}
@media (max-width: 768px) {
  .scroll-top {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
  .scroll-top-arrow {
    width: 12px;
    height: 12px;
    border-width: 2.5px;
    margin-top: 4px;
  }
}