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

html {
    background-color: #f7fcff;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 10px;
}
.main-message h1 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
}
.contact-title h1 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
}
/* ファーストビューの動画とタイトルロゴ */
.first-view {
    position: absolute;
}

.top-title img {
    position: relative;
    z-index: 100;
}

.top-title img {
    position: relative;
    z-index: 100;
}

loading-overlay {
    position: relative;
    z-index: 1;
}

/* /header共通部分 */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    box-sizing: border-box;
    background: transparent;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* スクロール後：白背景に切り替え */
header.scrolled {
    background: #f7fcff;
}

.header-contact-btn {
    display: none;
}

.logo-box img {
    display: block;
}
/* PCナビゲーション (デフォルト非表示) */
.nav-pc {
    display: none;
}

.nav-pc ul {
    list-style: none;
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.nav-pc a {
    color: #000233;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s;
}

.nav-pc a:hover {
    color: #0072e3;
}

/* ハンバーガーメニューアイコン */
.menu-icon {
    /* position: fixed は不要 (headerがfixedのため) */
    width: 40px;
    height: 30px;
    z-index: 2001;
    cursor: pointer;
}

.menu-icon span {
    display: block;
    height: 4px;
    background: #003366;
    margin: 4.5px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-icon.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-icon.open span:nth-child(2) {
    opacity: 0;
}

.menu-icon.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

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

.overlay-menu.open {
    top: 0;
    opacity: 1;
}

/* 閉じるボタン */
.overlay-close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 38px;
    color: #004b9b;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2100;
    transition: 0.3s;
}

.overlay-close:hover {
    transform: scale(1.1);
}

/* メニュー内容 */
.overlay-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    max-width: 950px;
    height: 80%;
    gap: 30px;
}

.overlay-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.overlay-nav li {
    margin-bottom: 28px;
}

.overlay-nav .menu-item {
    font-family: "Roboto", sans-serif;
    display: block;
    font-size: 2rem;
    letter-spacing: 3.6px;
    font-weight: 800;
    color: #000233;
}

.overlay-nav .menu-item2 {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #000233;
}

.overlay-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-contact-btn {
    /* オーバーレイ内のボタン */
    display: inline-block;
    background: linear-gradient(to right, #ff5f4d, #ff7a73);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    border-radius: 40px;
    padding: 18px 56px;
    font-size: 1.6rem;
    transition: 0.3s ease;
}

.overlay-contact-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* //header共通部分 */

/* (10行目あたり) */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;

    /* ▼▼▼ 以下を追加 ▼▼▼ */
    background-image: url("img/asirai_top_SP.svg");
    background-repeat: no-repeat;
    background-size: auto 450vw;
    background-position: right -58.5vw top 1000px;
}

h1 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    color: #000233;
}

h2 {
    font-weight: 700;
    color: #000233;
}

h3 {
    font-weight: 700;
    color: #000233;
}

h4 {
    font-weight: 700;
    color: #000233;
    letter-spacing: 0.15em;
}

p {
    color: #000233;
    font-weight: 500;
    letter-spacing: 0.15em;
}

/* ローディングオーバーレイ*/
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 600ms ease;
}

#loading-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#loading-overlay.is-fadeout {
    opacity: 0;
    pointer-events: none;
}

.video-area {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-area video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
}

.video-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
}

.video-text h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.video-text p {
    font-size: 1.1rem;
    font-weight: 500;
}

/* ===============================
    NEWS セクション
  =============================== */
.news {
    padding: 3vw 15vw;
    border-bottom: 1px solid #ddd;
}

.news-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.news-date {
    font-size: 3vw;
    color: #555;
}

.news-label {
    color: #fff;
    font-weight: 500;
    font-size: 3vw;
    padding: 0.5vw 8px;
    border-radius: 4px;
}

.news-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-content p {
    color: #000233;
    margin: 0;
}

.news-section {
    padding: 10vw 7.5vw;
    display: none;
}

.news-left h1 {
    font-size: 10vw;
    margin-bottom: 0;
}

.news-left h2 {
    font-size: 5vw;
    margin-top: -1vw;
    margin-bottom: 5vw;
}

.news-detail-btn {
    display: inline-block;
    background: linear-gradient(90deg, #ff5f4d, #ff7a73);
    color: #fff;
    font-weight: 600;
    border-radius: 100px;
    padding: 10px 30px;
    text-decoration: none;
    transition: 0.3s ease;
    margin-bottom: 8vw;
}

.news-detail-btn:hover {
    background-color: rgba(0, 51, 102, 0.05);
}

.news-right {
    border-top: 1px solid #ddd;
}

.news-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 15px;

    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}

.news-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.news-item-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;

    grid-column: 1 / -1;
}

.news-date {
    font-size: 1.1rem;
    color: #555;
    white-space: nowrap;
}

.news-label {
    font-weight: 500;
    font-size: 1rem;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.news-item:nth-child(2) .news-label {
}

.news-desc {
    /* ▼▼▼ 再々修正 (flex関連の指定を削除) ▼▼▼ */
    /* flex: 1; */
    /* margin-right: 15px; */

    font-size: 1.2rem;
    color: #000233;
    margin: 0;
    line-height: 1.6;

    /* 文字数制限 (これはOK) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 表示する行数 */
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis; /* ...で省略 */
}

.news-arrow {
    font-size: 1.8rem;
    color: #aaa;
    font-weight: bold;

    /* ▼▼▼ 再々修正 (flex関連の指定を削除) ▼▼▼ */
    /* flex-shrink: 0; */
}

/* === main-message === */
.main-message {
    margin-top: 20vw;
    padding: 0vw 12vw;
    text-align: left;
}

.main-message .desc {
    margin-top: 7.5vw;
    font-size: 1.5rem;
    line-height: 1.8;
    color: #000233;
    /* max-width: 60%; */
    margin-bottom: 10vw;
    filter: drop-shadow(0px 0px 10px white)
            drop-shadow(0px 0px 10px white)
            drop-shadow(0px 0px 10px white)
            drop-shadow(0px 0px 10px white)

}

/* 背景装飾 */
.main-message::before {
    content: "";
    position: absolute;
    top: -60px;
    right: 0;
    width: 200px;
    height: 200px;
    background: url("") no-repeat center/contain;
    opacity: 0.2;
}

/* === MESSAGE セクション === */

.message {
    padding: 10vw 7.5vw 0;
    text-align: left;
}

.message h1 {
    font-size: 10vw;
}

.message .subtitle {
    margin-top: 0vw;
    font-size: 5vw;
    font-weight: 700;
    margin-bottom: 7.5vw;
}

.message-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.message-image img {
    display: block; /* ← 追加 */
    margin: 0 auto; /* ← 追加 */
    width: 80%;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.message-text {
    text-align: left; /* ← 'center' から変更 */
    width: 80%; /* ← 追加 (画像と幅を合わせる) */
    box-sizing: border-box; /* ← 念のため追加 */
}

.message-text h3 {
    margin-top: 5vw;
    font-weight: 900;
    letter-spacing: 6px;
    font-size: 6.1vw;
    line-height: 1.3;
    color: #000233;
    margin-bottom: 2.5vw;
}

.message-text .name {
    font-size: 3vw;
    font-weight: 500;
}

/* ボタン */
.message-text .btn {
    display: inline-block;
    background: linear-gradient(to right, #ff5f4d, #ff7a73);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 15px 42px;
    text-decoration: none;
    transition: 0.3s ease;
    margin-top: 30px;
}

.message-text .btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
/* ↓ これを追加 */
.message-text .button-wrapper {
    text-align: right;
}
/* ↓ これを追加 */

/* .message{
  padding: 30px 100px 30px 200px;
}
.message-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.message-image img {
  width: 100%;
  max-width: 380px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.message-text {
  text-align: center;
}

 .subtitle{

} */

/* === BUSINESS セクション === */
.business {
    text-align: center;
    position: relative;
    text-align: left;
    padding-top: 15vw;
}

.business h1 {
    padding: 0vw 7.5vw;
    font-size: 10vw;
}

.business .subtitle {
    padding: 0vw 7.5vw;
    font-size: 5vw;
    font-weight: 700;
    margin-bottom: 7.5vw;
}

/* スライダー構造 */
.slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding-bottom: 30px;
}

.slider {
    display: flex;
    width: max-content;
    gap: 20px;
    justify-content: flex-start;
    padding: 0 40px;
    transition: transform 0.6s ease;
}

.card img {
    padding-bottom: 30px;
}
.card {
    background: #ffe699;
    padding-top: 50px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 69.5vw;
    height: 450px;
    max-width: 350px;
    flex-shrink: 0;
    text-align: center;

    /* ↓ 3行追加 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.image-frame {
    width: 235px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    background: none;
    flex-shrink: 0; /* ← 追加 */
}

.image-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.card-text {
    /* padding: 32px 0 32px 0; ← パディングは下で調整 */
    font-size: 1.6rem;
    color: #000233;
    line-height: 1.5;
    background-color: #f7fcff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    /* ↓ 6行追加・変更 */
    flex-grow: 1; /* 残りの高さをすべて使う */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 上下中央寄せ */
    align-items: center; /* 左右中央寄せ */
    padding: 10px 15px; /* 新しいパディング (上下10px, 左右15px) */
}

/* スライドボタン */
.slide-btn {
    position: absolute;
    top: 50.8%;
    transform: translateY(-50%);
    background: #fff;
    border: 0.8px solid #000233;
    color: #000233;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: none; /* ← 追加 (デフォルト非表示) */
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* ========== ▼▼▼ CSS 追加 1/3 (グローバル) ▼▼▼ ========== */
/* === スライダー ドット === */
.dots-container {
    display: none; /* デフォルト(PC)では非表示 */
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 6vw; /* スライダーとの隙間 */
    height: 12px; /* 高さを指定 */
    margin-bottom: 10vw;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cee0ee; /* 非アクティブ時の色 (薄いグレー) */
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: #0068b6; /* アクティブ時の色 (濃い青) */
    transform: scale(1.1); /* 少し大きくする */
}
/* ========== ▲▲▲ CSS 追加 1/3 (ここまで) ▲▲▲ ========== */

.work-style {
    width: 100%;
    margin: 0 auto;
    background-image: url("img/work_background_tb.svg");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px 30px 0 0;
    /* padding: 60px 30px; */
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.work-style .title {
    padding-left: 7.5vw;
    margin-top: 30px;
    font-size: 10vw;
    color: #fff;
    letter-spacing: 2px;
}

.work-style .subtitle {
    padding-left: 7.5vw;
    font-size: 5vw;
    font-weight: 700;
    color: #fff;
}

.work-style h3 {
    margin-top: 7.5vw;
    padding-left: 7.5vw;
    font-size: 6.1vw;
    color: #fff;
    line-height: 1.8;
    margin-bottom: 7.5vw;
}

/* 左右ブロック */
.block {
    position: relative;
    width: 100%;
    margin-bottom: 60px;
    display: flex; /* ← 追加 */
    align-items: flex-start; /* ← 追加 (上の位置を揃える) */
}

.left-block {
    justify-content: flex-end; /* アイテムを右に寄せる */
    gap: 5px; /* アイテム間の隙間を20pxに固定 */
}
.left-block p {
    margin-right: 50px;
}
.right-block p {
    margin-left: 50px;
}
/* ↓ これを追加 */
.right-block {
    justify-content: flex-start; /* アイテムを左に寄せる */
    gap: 5px; /* アイテム間の隙間 (お好みで調整) */
}

.left-block .side-text {
    writing-mode: vertical-rl;
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 8px;
    color: #fff;
    margin-top: 50px; /* ← 'top: 20px' の代わり */
    flex-shrink: 0; /* ← 追加 (テキストが縮まないように) */
}

/* (676行目あたり) */
.left-frames {
    background-image: url("../images/workstyle01.png");
    background-size: cover;
    background-position: center;
    width: 70%;
    height: 250px;
    border-top-left-radius: 25px;
    /* margin-left: auto; ← この行を削除、またはコメントアウト */
}

.right-block .side-text {
    writing-mode: vertical-rl;
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 8px;
    color: #fff;
    margin-top: 50px; /* ← 'top: 20px' の代わり */
    flex-shrink: 0; /* ← 追加 (テキストが縮まないように) */
    order: 2; /* ← 追加 (順序を2番目にする) */
}

.right-frame {
    width: 70%;
    height: 250px;
    border-top-right-radius: 25px;
    background-image: url("../images/workstyle02.png");
    background-size: cover;
    background-position: center;
    order: 1; /* ← 追加 (順序を1番目にする) */
}

.button-area {
    text-align: center;
    margin-top: 40px;
}

.btn-work {
    display: inline-block;
    padding: 20px 40px;
    background: #fff;
    border-radius: 30px;
    color: #000233;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 10vw;
}

.btn-work:hover {
    background: #000233;
    color: #fff;
}

/* スマホ用リクルート */

.recruit-container {
    width: 100%;
    /* ↓ 下のパディングを追加・調整 */
    padding-bottom: 10vw; /* 例: 10vwのスペースを追加 (お好みで調整) */
}

.recruit-container .title-block {
    text-align: left;
    margin-bottom: 40px;
}

.recruit-container .title-block .title {
    font-size: 10vw;
}

.recruit-container .title-block .subtitle {
    font-size: 5vw;
}

.recruit-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.recruit-item {
    width: 90%;
    max-width: 76vw;
    margin-bottom: 0; /* ← 30px から 0 に変更 */
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 25px;
    transition: all 0.3s ease;
    justify-content: center;
}

.recruit-item:hover {
    transform: translateY(-3px);
}

.recruit-item .icon-frame {
    width: 45px;
    height: 45px;
}

.recruit-item .icon-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.recruit-item .text {
    color: #000233;
    font-size: 1.4rem;
    font-weight: 700;
}

/* (905行目あたり) */
.company-section {
    width: 100%;
    background-color: #f7fcff; /* ← これがcompany-sectionの背景色 */
    border-radius: 30px 30px 0 0;
    padding: 15vw 7.5vw; /* ← 上下のパディングは 10vw */
    box-sizing: border-box;
    text-align: left;
    margin: 0 auto;

    /* ▼▼▼ 以下を追加 ▼▼▼ */
    margin-top: -5vw; /* ← マイナス値で上に移動 (5vwは例、お好みで調整) */
    position: relative; /* ← z-indexを効かせるため */
    z-index: 10; /* ← work-styleより上に表示 */
}

.company-info .info-block {
    padding-top: 15px; /* ← ブロックの上に余白を追加 */
    padding-bottom: 15px; /* ← ブロックの下に余白を追加（これで間隔が開きます）*/
    border-bottom: 1px solid #ddd; /* ← ブロックの下に線を追加 */
}

/* h3とpのデフォルトマージンをリセット */
.company-info .info-block h3,
.company-info .info-block p {
    margin: 0;
}

/* (任意)項目名と内容の間に少しだけ隙間を開ける場合 */
.company-info .info-block h3 {
    padding-bottom: 5px;
}
/* タイトル */
.company-title {
    font-size: 10vw;
}

.company-subtitle {
    font-size: 5vw;
    color: #000233;
    margin-bottom: 10vw;
}

/* 会社情報部分 */
.company-info {
    padding: 0vw 7.5vw;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 1.2rem;
    background: transparent;
}

.company-info tr {
    border-bottom: 1px solid #ccc;
}

.company-info th {
    text-align: left;
    font-weight: 700;
    padding: 10px 0;
    width: 150px;
    vertical-align: top;
}

.company-info td {
    padding: 10px 0;
    line-height: 1.6;
}

/* 地図部分 */
.map-frame {
    margin-top: 40px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    overflow: hidden;
}

.map-frame iframe {
    width: 100%;
    height: 300px;
    border: none;
}

.contact-section {
    padding: 0vw 7.5vw;
    min-height: 379px;
    margin-top: 100px;
    /* ポジションで位置調整 */
    background-image: url("img/logo_lightbule.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}

/* (1016行目あたりから) */
.contact-content {
    /* text-align: right; ← 削除 */
    color: #0a0a33;
    width: 100%;

    /* ▼▼▼ Flexbox設定を追加 ▼▼▼ */
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    align-items: flex-start; /* 全体を左寄せにする（デフォルト）*/
}

/* 見出し */
.contact-title {
    font-family: "Zen Kaku Gothic New", sans-serif; /*日本語*/
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.4;
    color: #000233;
    margin: -50px 0 20px 0;
    width: 100%; /* ← Flexアイテムになったので幅を指定 */
}

/* 説明文 */
.contact-text {
    font-size: 1.2rem;
    color: #000233;
    line-height: 1.6;
    margin: 0 0 20px 0;
    width: 100%; /* ← Flexアイテムになったので幅を指定 */
}

/* 会社名 */
.contact-company {
    font-size: 12px;
    color: #333333;
    margin-bottom: 25px;
    width: 100%; /* ← Flexアイテムになったので幅を指定 */
}

/* ボタン */
.contact-button {
    display: inline-block; /* inline-blockのままでOK */
    background: linear-gradient(to right, #ff5f4d, #ff7a73);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
    padding: 16px 35px;
    border-radius: 30px;
    transition: 0.2s ease;

    margin-left: auto; /* ← 右寄せにするキープロパティ */
    /* または align-self: flex-end; でも可 */
}

@media (max-width: 768px) and (min-width: 466px) {

    /* header共通 */
    header {
        padding-right: 6vw;
        padding-left: 6vw;
        padding-top: 2vw;
    }
    .overlay-content {
        flex-direction: column;
        gap: 30px;
    }

    .overlay-nav ul {
        display: block;
    }

    .overlay-nav li {
        text-align: start;
    }

    .overlay-menu {
        position: fixed;
        top: -110%; /* 初期状態は画面外 */
        left: 0;
        width: 100%;
        height: 100vh; /* スマホでは全画面 */
        height: 100dvh; /* モダンなアプリではこれ（上下の枠を除く100vh） */
        background-image: url(../images/SP_humberger_back.svg);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 10px;
        box-sizing: border-box;
        opacity: 0;
        transition: all 0.6s ease;
        z-index: 2000;
        display: flex;
        align-items: center; /* スマホでは中央揃え */
    }

    .logo-box img {
        height: 8vw;
        display: block; /* 余計な隙間防止 */
    }

    .recruit-item a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*// header共通 */
}

@media (max-width: 465px) {
    /* header共通 */
    header {
        padding-right: 6vw;
        padding-left: 6vw;
        padding-top: 2vw;
    }
    .overlay-content {
        flex-direction: column;
        gap: 30px;
    }

    .overlay-nav ul {
        display: block;
    }

    .overlay-nav li {
        text-align: start;
    }

    .overlay-menu {
        position: fixed;
        top: -110%; /* 初期状態は画面外 */
        left: 0;
        width: 100%;
        height: 100vh; /* スマホでは全画面 */
        height: 100dvh; /* モダンなアプリではこれ（上下の枠を除く100vh） */
        background-image: url(../images/SP_humberger_back3.svg);
        background-repeat: no-repeat;
        background-size: cover;
        box-sizing: border-box;
        opacity: 0;
        transition: all 0.6s ease;
        z-index: 2000;
        display: flex;
        align-items: center; /* スマホでは中央揃え */
    }

    .logo-box img {
        height: 8vw;
        display: block; /* 余計な隙間防止 */
    }
    /*// header共通 */

    .recruit-item a {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width: 767px) {
    /* ファーストビューのタイトルロゴ */
    .top-title img {
        width: 100%;
        top: 65vh;
        left: -2%;
    }
    /* footer共通部分 */
    /* フッター（モバイル） */
    .footer-mobile {
        background: transparent url("../images/footer_back.svg") no-repeat
            center;
        background-size: cover;

        padding: 0 15vw 24px;
        text-align: left;
        color: #000233;
    }

    .footer-mobile .footer-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-mobile .footer-nav li {
        margin-bottom: 5.6vw;
    }

    .footer-mobile .footer-nav a {
        font-family: "Roboto", sans-serif; /*セクションの英語*/
        text-decoration: none;
        font-size: clamp(20px, 6vw, 28px);
        color: #000233;
        letter-spacing: 3px;
        font-weight: 900;
    }

    .footer-mobile .footer-nav span {
        display: block;
        font-weight: 700;
        font-size: clamp(10px, 3vw, 14px);
        letter-spacing: 2px;
        opacity: 0.8;
    }

    .footer-mobile .footer-copy {
        font-family: "Roboto", sans-serif; /*セクションの英語*/
        font-size: clamp(10px, 2.5vw, 14px);
        font-weight: 500;
        letter-spacing: 2px;
        opacity: 0.8;
        margin-top: 40px;
        text-align: center;
    }

    .footer-pc {
        display: none;
    }
    /* //footer共通部分 */

    /* ========== ▼▼▼ CSS 追加 2/3 (スマホ) ▼▼▼ ========== */
    .dots-container {
        display: flex;
    }
    /* ========== ▲▲▲ CSS 追加 2/3 (ここまで) ▲▲▲ ========== */
    .news-content {
        font-size: 1.4rem;
    }

    .news-date {
        font-family: "Roboto", sans-serif;
        font-size: 1.3rem;
        letter-spacing: 1px;
    }

    .message h1 {
        letter-spacing: 6px;
    }

    .business h1 {
        letter-spacing: 6px;
    }

    .recruit-container .title {
        letter-spacing: 6px;
    }

    .main-message h1 {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 7vw;
        font-weight: 900;
        letter-spacing: 5px;
        line-height: 1.5;
        text-align: left;
        color: #000233;
    }
}

/* タブレット用 */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .top-title img {
        width: 95%;
        top: 60vh;
        left: -3%;
        }

    body {
        background-image: url("img/asirai_top_TB.svg"); /* ← タブレット用画像 */
        /* ↓ 画像サイズと位置をタブレット用に調整 */
        background-size: auto 300vw;
        background-position: right -20vw top 1300px;
    }

    /*/header共通部分 */
    /* ヘッダーのお問い合わせボタン (タブレットでは非表示のまま) */
    header {
        padding-right: 4vw;
        padding-left: 4vw;
        padding-top: 2vw;
    }
    .header-contact-btn {
        display: none;
    }
    .logo-box img {
        height: 7vw;
        display: block; /* 余計な隙間防止 */
    }
    .overlay-menu {
        position: fixed;
        top: -110%;
        left: 0;
        width: 100%;
        background-image: url(../images/TB_humberger_back.svg);
        background-repeat: no-repeat;

        background-size: 100% auto;
        background-position: center top;

        border-radius: 10px;
        box-sizing: border-box;
        opacity: 0;
        transition: all 0.6s ease;
        z-index: 2000;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 80px;
        padding-bottom: 115px;
        overflow-y: auto;
    }

    .overlay-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 90%; /* 幅を少し可変に */
        margin: 0 auto;
        padding: 4vw 5vw; /* 画面幅に応じて余白を調整 */
        gap: 5vw; /* 文字とボタンの間隔を相対値で */
    }

    .overlay-nav ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2vw 4vw; /* カラム間の隙間も相対値に */
        text-align: left;
    }

    .overlay-nav .menu-item {
        font-size: clamp(1.4rem, 1.8vw, 2.2rem); /* ← 可変フォント */
        letter-spacing: 0.2vw;
    }

    .overlay-nav .menu-item2 {
        font-size: clamp(1rem, 1.2vw, 1.6rem);
    }

    .overlay-right {
        flex: 0 0 auto;
        align-self: flex-end;
        margin-right: 4vw;
    }

    .overlay-contact-btn {
        font-size: clamp(1.2rem, 1.5vw, 1.8rem); /* ← ボタン文字も可変 */
        padding: 1.2em 3em;
    }
    /* //header共通部分 */

    .recruit-item a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* footer共通部分 */
    /* モバイル用のフッターは非表示 */
    .footer-mobile {
        display: none;
    }

    .footer-pc {
        display: block;
        padding: 80px 7.6vw 20px 7.6vw;
        color: #000233;
    }

    .footer-inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 60px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .footer-left {
        flex: 1;
    }

    .footer-menu {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 30px 80px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-menu a {
        font-family: "Roboto", sans-serif; /*セクションの英語*/
        text-decoration: none;
        font-size: 1.8rem;
        font-weight: 900;
        letter-spacing: 3px;
        color: #000233;
    }

    .footer-menu span {
        letter-spacing: 3px;
        font-size: 1.2rem;
        font-weight: 700;
        margin-top: 3px;
    }

    .footer-right {
        flex: 1;
        text-align: left;
        background: url("../images/logo_lightbule.png") no-repeat right
            bottom;
        background-size: contain;
        padding-left: 40px;
    }

    .footer-right h2 {
        font-size: 3.6rem;
        font-weight: 900;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    .footer-text {
        font-size: 1.2rem;
        line-height: 1.8;
        font-weight: 700;
        margin-bottom: 30px;
    }

    /* フッターのお問い合わせボタン */
    .footer-btn {
        display: inline-block;
        background: linear-gradient(90deg, #ff5f4d, #ff7a73);
        color: #fff;
        font-size: 1.4rem;
        font-weight: 500;
        text-decoration: none;
        padding: 24px 60px;
        border-radius: 100px;
        transition: all 0.3s ease;
        letter-spacing: 3px;
    }

    .footer-btn:hover {
        transform: translateY(-2px);
    }

    .footer-copy {
        text-align: center;
        font-weight: 500;
        margin-top: 60px;
        font-size: 1.4rem;
        opacity: 0.8;
    }

    .footer-menu_top li {
        margin-top: 20px;
    }
    .footer-menu_news li {
        margin-top: 20px;
    }

    /* //footer共通部分 */

    /* ========== ▼▼▼ NEWS Tablet Layout ▼▼▼ ========== */
    /* (タブレット用メディアクエリ内) */

    /* ========== ▼▼▼ NEWS Tablet Layout ▼▼▼ ========== */

    .main-message h1 {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 5vw;
        font-weight: 900;
        letter-spacing: 5px;
        line-height: 1.5;
        text-align: left;
        color: #000233;
    }

    .news {
        /* ← これを追加！ */
        display: none;
    }

    .news-section {
        display: flex; /* 左右分割 */
        gap: 40px; /* 左右の隙間 */
        padding: 80px 60px; /* タブレットでの上下左右の余白 */
    }

    .news-left {
        flex: 0 0 200px; /* 左側の幅を固定 */
        text-align: left;
    }

    .news-left h1 {
        font-size: 5.4rem;
        letter-spacing: 8.4px;
    }

    .news-left h2 {
        font-size: 2rem;
        margin-top: -5px;
        margin-bottom: 30px;
    }

    .news-detail-btn {
        margin-bottom: 0; /* 下の余白をリセット */
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 2px;
        padding: 24px 52px;
        margin-top: 30%;
    }

    .news-right {
        flex: 1; /* 右側が残りの幅を取る */
    }

    .news-item {
        padding: 20px 0; /* 上下の余白を調整 */
        /* ▼▼▼ 再々修正 (gridレイアウトはグローバルから継承) ▼▼▼ */
    }

    .news-date {
        font-family: Roboto;
        font-size: 1.4rem;
        font-weight: 500;
    }

    .news-label {
        font-size: 1.4rem;
    }

    .news-section .news-item .news-item-top {
        display: flex;
        align-items: center; /* Flexが効いていればこれも効くはず */
    }
    /*
  
  /* (1199行目あたり - グローバルスコープ内ですが影響します) */
    /* (1199行目あたり - グローバルスコープ) */
    .news-item-top {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px; /* (前回調整した値) */

        /* ▼▼▼ 再々修正 (grid-columnはグローバルから継承) ▼▼▼ */
    }

    .news-desc {
        font-size: 1.4rem; /* 説明文のサイズ調整 */

        /* (グローバルの line-clamp: 2 が継承されます) */

        /* (もしタブレットで1行表示にしたいなら、以下のコメントを解除) */
        /* -webkit-line-clamp: 1; */
        /* line-clamp: 1; */
    }
    /* PCでは3つ表示するため、タブレットでは最後の1つを隠す */
    .news-item:last-child {
        display: none;
    }
    /* ========== ▲▲▲ NEWS Tablet Layout ▲▲▲ ========== */

    /* メインメッセージ */
    .main-message {
        max-width: 500px;
        margin: 100px 100px 100px;
        padding: 0 0px;
        text-align: left;
    }

    .main-message h1 {
        letter-spacing: 4px;
        font-size: 4.8rem;
        margin-bottom: 40px;
    }

    .main-message .desc {
        font-size: 1.4rem;
        line-height: 1.8;
        color: #000233;
        max-width: 70%;
        margin-bottom: 0vw;
        margin-top: 4vw;
    }

    .main-message::before {
        content: "";
        position: absolute;
        top: -60px;
        right: 0;
        width: 200px;
        height: 200px;
        background: url("") no-repeat center/contain;
        opacity: 0.2;
    }

    .message {
        padding: 100px 7.6vw;
    }

    .message h1 {
        font-size: 5.4rem;
        letter-spacing: 8.4px;
    }

    .message .subtitle {
        font-size: 2rem;
    }

    .message-image img {
        max-width: 100%;
    }

    .message-text h3 {
        font-size: 3.6rem;
        font-weight: 900;
        letter-spacing: 0.12em;
    }

    /* ... (タブレット用メディアクエリ内) ... */

    .message-text .name {
        font-size: 1.6rem; /* ← 14px相当。3vwだと思ったより大きくなるためrem指定に変更 */
        /* 1.2rem (12px) や 1.6rem (16px) など、好みに合わせて調整してください */
    }

    /* ↓ このルールを追加 */
    .message-text {
        font-size: 1.6rem;
        max-width: 100%; /* ← スマホ用の360px制限を解除 */
    }

    .message-text .btn {
        padding: 24px 56px;
        letter-spacing: 3px;
    }

    /* ↓ このルールを追加 */
    .message-text .button-wrapper {
        float: right; /* ← ボタンを右側に配置 */
        margin-left: 20px; /* ← テキストとボタンがくっつきすぎないよう隙間を確保 */
        /* text-align: right; はスマホ用のCSSで設定済みなので不要です */
    }

    .business h1 {
        font-size: 5.4rem;
        letter-spacing: 8.4px;
    }

    .business .subtitle {
        font-size: 2rem;
        margin-bottom: 50px;
    }

    .card-text {
        font-size: 1.6rem;
    }

    .work-style .title {
        padding: 7.6vw 7.6vw 5px;
        font-size: 5.4rem;
        letter-spacing: 8.4px;
    }

    .work-style .subtitle {
        padding-left: 7.6vw;
        font-size: 2rem;
    }

    .work-style h3 {
        padding-left: 13vw;
        font-size: 3.6rem;
    }

    .left-block .side-text {
        writing-mode: vertical-rl;
        font-size: 3.6rem;
        font-weight: 700;
        letter-spacing: 12px;
        color: #fff;
        margin-top: 50px; /* ← 'top: 20px' の代わり */
        flex-shrink: 0; /* ← 追加 (テキストが縮まないように) */
    }

    .right-block .side-text {
        writing-mode: vertical-rl;
        font-size: 3.6rem;
        font-weight: 700;
        letter-spacing: 12px;
        color: #fff;
        margin-top: 50px; /* ← 'top: 20px' の代わり */
        flex-shrink: 0; /* ← 追加 (テキストが縮まないように) */
        order: 2; /* ← 追加 (順序を2番目にする) */
    }
    .left-block .side-text {
        margin-top: 30px;
        margin-right: 10px;
    }

    .right-block .side-text {
        margin-top: 30px;
        margin-left: 70px;
    }
    .left-block .side-text {
        margin-right: 70px;
    }

    .btn-work {
        font-size: 1.6rem;
    }
    /* リクルートページ */
    .recruit-container .title-block .title {
        font-size: 5.4rem;
        letter-spacing: 8.4px;
    }

    .recruit-container .title-block .subtitle {
        font-size: 2rem;
    }

    .recruit-section {
        display: flex;
        flex-direction: column;
        gap: 25px;
        align-items: center;
    }
    .recruit-item {
        width: 100%;
        max-width: 500px;
        margin-bottom: 30px;
        background: #fff;
        border-radius: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        display: flex;
        gap: 20px;
        padding: 18px 25px;
        transition: all 0.3s ease;
        margin: 0 auto;
    }

    .recruit-item:hover {
        transform: translateY(-3px);
    }

    .recruit-item .icon-frame {
        width: 45px;
        height: 45px;
    }

    .recruit-item .icon-frame img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .recruit-item .text {
        color: #000233;
        font-size: 1.6rem;
        font-weight: 700;
    }

    /* まさたかの追加 */
    .text-letter-spacing {
        letter-spacing: 10px;
    }

    .company-section {
        padding: 11vw 7.6vw;
    }

    /* タイトル */
    .company-title {
        font-size: 5.4rem;
        letter-spacing: 8.4px;
    }

    .company-subtitle {
        font-size: 2rem;
    }

    .company-section .info-block {
        display: flex;
        align-items: flex-start; /* 上揃えにする */
        padding: 12px 0; /* 上下の余白 */
        border-bottom: 1px solid #ddd; /* 罫線 */
    }

    .company-section .info-block h3 {
        font-size: 1.6rem;
        width: 150px; /* 項目名の幅を固定 */
        flex-shrink: 0; /* 項目名が縮まないようにする */
        font-weight: 700;
        padding-right: 20px; /* 項目と内容の間の隙間 */
        margin: 0; /* h3のデフォルトマージンをリセット */
    }

    .company-section .info-block p {
        font-size: 1.6rem;
        flex: 1; /* 内容が残りの幅をすべて取る */
        margin: 0; /* pのデフォルトマージンをリセット */
        line-height: 1.7;
    }

    /* ========== ▼▼▼ CSS 追加 3/3 (タブレット) ▼▼▼ ========== */
    .dots-container {
        display: flex;
    }
    /* ========== ▲▲▲ CSS 追加 3/3 (ここまで) ▲▲▲ ========== */

    .contact-section {
        display: none;
    }
}

/*ヘッダーの調整用のメディアクエリ  */
@media (min-width: 1161px) {
    .header-contact-btn {
        padding: 24px 56px;
    }
}
@media (max-width: 1160px) and (min-width: 1060px) {
    .header-contact-btn {
        padding: 20px 40px;
    }
}

@media (max-width: 1060px) and (min-width: 1025px) {
    .header-contact-btn {
        padding: 20px 30px;
    }
}

@media (min-width: 768px) {
}

@media (min-width: 1161px) {

    .header-contact-btn {
        padding: 24px 56px;
    }
}

@media (max-width: 1160px) and (min-width: 1060px) {
    .header-contact-btn {
        padding: 20px 40px;
    }
}

@media (max-width: 1060px) and (min-width: 1025px) {
    .header-contact-btn {
        padding: 20px 30px;
    }
}
@media (min-width: 1025px) {

    .top-title img {
        width: 100%;
        top: 55vh;
        left: -2%;
        }

    /* header共通部分 */
    header {
        padding-right: 2vw;
        padding-left: 2vw;
    }

    .header-contact-btn {
        display: inline-block;
        background: linear-gradient(to right, #ff5f4d, #ff7a73);
        color: #fff;
        font-weight: 500;
        text-decoration: none;
        border-radius: 100px;
        font-size: clamp(12px, 1vw, 18px);
        letter-spacing: 4px;
        transition: 0.3s ease;
        order: 2;
    }

    .menu-icon {
        display: none;
    }

    .overlay-menu {
        display: none !important;
    }

    .nav-pc {
        display: block;
        order: 1;
        font-size: clamp(12px, 1vw, 18px);
        margin-left: auto;
        margin-right: 20px;
        letter-spacing: 3px;
    }
    .logo-box img {
        height: 5vw;
        display: block; /* 余計な隙間防止 */
    }

    /* //header共通部分 */
    /* footer共通部分 */
    /* モバイル用のフッターは非表示 */
    .footer-mobile {
        display: none;
    }

    /* PC用のフッター */
    .footer-pc {
        display: block;
        padding: 80px 8% 20px 8%;
        color: #000233;
    }

    .footer-inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 60px;
        max-width: 1400px;
        margin: 0 auto;
    }

    .footer-left {
        flex: 1;
    }

    .footer-menu_top li {
        margin-top: 20px;
    }
    .footer-menu_news li {
        margin-top: 20px;
    }
    .footer-menu {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 30px 80px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-menu a {
        font-family: "Roboto", sans-serif; /*セクションの英語*/
        text-decoration: none;
        font-size: 2.4rem;
        letter-spacing: 3.6px;
        font-weight: 900;
        color: #000233;
    }

    .footer-menu span {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: 2.4px;
        opacity: 0.8;
        margin-top: 3px;
    }

    .footer-right {
        flex: 1;
        text-align: left;
        background: url("../images/logo_lightbule.png") no-repeat right
            bottom;
        background-size: contain;
        padding-left: 40px;
    }

    .footer-right h2 {
        font-size: 4.8rem;
        font-weight: 900;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    .footer-text {
        font-size: 1.6rem;
        line-height: 1.8;
        font-weight: 700;
        margin-bottom: 40px;
    }

    .footer-btn {
        display: inline-block;
        background: linear-gradient(90deg, #ff5f4d, #ff7a73);
        color: #fff;
        font-size: 1.6rem;
        font-weight: 500;
        text-decoration: none;
        padding: 24px 60px;
        border-radius: 100px;
        letter-spacing: 4px;
        transition: all 0.3s ease;
    }

    .footer-btn:hover {
        transform: translateY(-2px);
    }

    .footer-copy {
        font-weight: 500;
        text-align: center;
        margin-top: 60px;
        font-size: 1.6rem;
        opacity: 0.8;
    }

    .main-message h1 {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 10vw;
        font-weight: 900;
        letter-spacing: 5px;
        line-height: 1.5;
        text-align: left;
        color: #000233;
    }
}

/* //footer共通部分 */

/* PC版 */
@media screen and (min-width: 1025px) {
    body {
        background-image: url(img/asirai_top_PC.svg);
        /* ↓ 画像サイズと位置をPC用に調整 */
        background-size: auto 150vw;
        background-position: right -15vw top 110vh;
    }

    h1 {
        font-family: "Roboto", sans-serif;
        font-weight: 900;
        color: #000233;
        font-size: 5vw; /* 基本のスマホサイズ */
    }

    h2 {
        letter-spacing: 2px;
        font-weight: 700;
        color: #000233;
        font-size: 1.66vw; /* 基本のスマホサイズ */
    }
    /* ビデオ(PC用) */
    .video-area {
        height: 100vh;
    }

    .video-text h1 {
        font-size: 3rem;
    }

    .video-text p {
        font-size: 1.3rem;
    }

    /* (PC用メディアクエリ内に追加) */

    /* ========== ▼▼▼ NEWS PC Layout ▼▼▼ ========== */
    .news {
        /* ← これを追加！ */
        display: none;
    }

    .news-section {
        display: flex; /* 左右分割 */
        gap: 60px; /* 左右の隙間 */
        padding: 80px 100px; /* PCでの上下左右の余白 */
        align-items: flex-start; /* 上揃え */
    }

    .news-left {
        flex: 0 0 250px; /* 左側の幅を固定 */
        text-align: left;
    }

    .news-left h1 {
        font-size: 7.2rem; /* PC Title Size */
        letter-spacing: 10px;
    }

    .news-left h2 {
        font-size: 2.4rem; /* PC Subtitle Size */
        margin-top: 0px;
    }

    .news-detail-btn {
        margin-top: 20%;
        margin-bottom: 0; /* 下の余白をリセット */
        font-size: 1.6rem;
        letter-spacing: 5px;
        padding: 28px 50px;
    }

    .news-right {
        flex: 1; /* 右側が残りの幅を取る */
    }

    .news-item {
        padding: 25px 0; /* アイテム上下の余白をさらに広げる */
        /* ▼▼▼ 再々修正 (gridレイアウトはグローバルから継承) ▼▼▼ */
    }

    .news-date {
        font-size: 1.6rem;
    }

    .news-label {
        font-size: 1.4rem;
        padding: 5px 10px;
    }

    .news-desc {
        font-size: 1.6rem; /* 説明文のサイズ調整 */
        -webkit-line-clamp: 1; /* PCでも1行表示に */
        line-clamp: 1;
    }
    /* PCでは :last-child を再表示 (display: flex; でOK) */
    .news-item:last-child {
        display: grid; /* ▼▼▼ 再々修正: flex から grid に変更 ▼▼▼ */
    }

    .main-message {
        max-width: 60%;
        margin: 70px 0px;
        padding: 0px 120px;
    }

    .main-message h1 {
        font-size: 5.4rem;
        letter-spacing: 4px;
        margin-bottom: 40px;
    }

    .main-message .desc {
        margin-top: 30px;
        max-width: 800px;
        font-size: 1.8rem;
        margin-bottom: 0;
    }

    .message {
        padding: 100px 100px 0 100px;
        text-align: left;
    }

    .message h1 {
        font-size: 7.2rem; /* PC Title Size */
        letter-spacing: 10px;
    }

    .message .subtitle {
        font-size: 2.4rem;
        letter-spacing: 2px;
    }

    .message-inner {
        margin-left: 80px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .message-image img {
        width: 35vw;
        max-width: 1000px;
    }

    .message-text {
        margin-left: 20vw;
    }

    .message-text h3 {
        font-size: 4rem;
        line-height: 1.4;
    }

    .message-text .name {
        font-size: 1.6rem;
    }

    .message-text .btn {
        margin-top: 50px;
        letter-spacing: 5px;
        font-size: 1.6rem;
        padding: 24px 52px;
    }

    /* ========== ▼▼▼ PC用ボタン表示 ▼▼▼ ========== */
    .business .slide-btn {
        display: block;
    }
    /* ========== ▲▲▲ PC用ボタン表示 ▲▲▲ ========== */

    /* PCビジネス */
    .business {
        padding: 130px 0px 100px;
    }

    .business h1 {
        font-size: 7.2rem; /* PC Title Size */
        letter-spacing: 10px;
        padding: 0px 100px;
    }

    .business .subtitle {
        font-size: 2.4rem;
        letter-spacing: 2px;
        padding: 0px 100px;
        margin-bottom: 50px;
    }
    .card {
        width: 35vw;
        max-width: 500px;
    }

    /* ▼▼▼ 修正 (ドット表示) ▼▼▼ */
    .slider-container {
        position: relative; /* ← 念のため確認 */
        overflow: hidden;
        width: 100%;
        max-width: 100vw; /* ← PCでは 1200px より 100vw が良いかも */
        margin: 0 auto;
        padding-bottom: 30px;
        /* ... (他はそのまま) ... */
    }

    .dots-container {
        display: flex;
        justify-content: flex-end; /* 右寄せ */
        align-items: center;
        margin-top: 40px;
        margin-bottom: 0;
        padding-right: 100px; /* businessセクションの左右paddingと合わせる */
        box-sizing: border-box;
        width: 100%;
        height: 35px; /* 高さを指定 (ボタンの位置決めに使う) */
    }

    /* ドットはそのまま */
    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #cee0ee;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 0.5px;
    }

    .dot:last-of-type {
        margin-right: 0;
    }

    .dot.active {
        background: #0068b6;
        transform: scale(1.1);
    }
    /* ========== ▲▲▲ CSS 追加 1/3 (ここまで) ▲▲▲ ========== */

    /* ... (中略 - business セクションの h1, subtitle のパディングも確認) ... */

    /* スライドボタン */

    .slide-btn {
        position: static;
        transform: none;
        display: block; /* ← flex をやめて block に */

        width: 35px;
        height: 35px;

        line-height: 35px; /* heightと同じ値に */
        text-align: center; /* 左右中央揃え */
        padding: 0; /* padding を確実に 0 に */

        box-sizing: border-box;
        margin: 0;
        /* ... (他のスタイルはそのまま) ... */
        flex-shrink: 0;
    }

    /* prev ボタンの位置 */
    .dots-container .prev {
        margin-left: 30px; /* 最後のドットとprevボタンの間の隙間 */
        order: 2; /* ドット(order:1)の次に表示 */
    }
    .dots-container .next {
        margin-left: 10px; /* prevボタンとnextボタンの間の隙間 */
        order: 3; /* 最後に表示 */
    }
    .btn-position {
        position: relative;
        top: -3px;
        left: 1px;
    }

    .dots-container .dot {
        order: 1;
    }

    /* work-style(PC用) */

    .work-style {
        position: relative;
        width: 100%;
        background-image: url("img/work_background_pc.svg");
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 80px 80px 0 0;
        padding: 50px 0px 0px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .work-bg-frame {
        width: 100%;
        max-width: 1400px;
        padding: 0;
        box-sizing: border-box;
    }

    .work-style .title {
        font-size: 7.2rem; /* PC Title Size */
        letter-spacing: 10px;
        font-weight: 800;
        color: #fff;
        padding: 0;
        padding-left: 100px;
    }

    .work-style .subtitle {
        font-size: 2.4rem;
        letter-spacing: 2px;
        color: #fff;
        opacity: 0.9;
        margin-bottom: 40px;
        padding-left: 100px;
    }

    .work-style h3 {
        font-size: 6.4rem;
        letter-spacing: 0.15em;
        font-weight: 800;
        color: #fff;
        line-height: 1.6;
        margin-bottom: 100px;
        padding-left: 180px;
    }

    /* 1737行目あたりから */

    .block {
        position: relative;
        display: flex;
        align-items: center;

        /* ▼▼▼ 修正 ▼▼▼ */
        justify-content: flex-start; /* 左寄せ */
        width: 100%;
        margin-bottom: 60px; /* 隙間を少し詰める */
        box-sizing: border-box; /* padding のために追加 */

        /* ▼▼▼ お好みの「左からの余白」を vw で指定 ▼▼▼ */
        padding-left: 15vw;

        /* ▼▼▼ 画像とテキストの隙間 ▼▼▼ */
        gap: 30px;
    }

    /* ▼▼▼ 追加 (タブレット用の指定を上書き) ▼▼▼ */
    .left-block,
    .right-block {
        justify-content: flex-start;
        gap: 30px;
    }

    .left-frames,
    .right-frame {
        margin-left: 0;
        height: 320px;
        background-size: cover;
        background-position: center;

        /* ▼▼▼ 修正 (両方の画像の幅を統一) ▼▼▼ */
        width: 700px; /* 例: 700px (お好みで調整) */
        max-width: 55%; /* または % (お好みで調整) */
        flex-shrink: 0; /* 縮まないように */

        /* ▼▼▼ 修正 (角丸を統一) ▼▼▼ */
        border-radius: 25px;

        /* ▼▼▼ 修正 (画像が先) ▼▼▼ */
        order: 1;
    }

    .left-frames {
        /* width, height など共通設定は上記へ移動 */
        background-image: url("img/remote.jpg");
    }

    .right-frame {
        /* width, height など共通設定は上記へ移動 */
        background-image: url("img/office.jpg");
    }

    .left-block .side-text,
    .right-block .side-text {
        /* ← 具体的なセレクタに変更 */
        position: static;
        transform: none;
        order: 2;

        writing-mode: horizontal-tb; /* 横書きを指定 */
        text-orientation: mixed; /* これは影響しないはず */

        font-size: 4.4rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: 3px;

        align-self: center; /* 上下中央揃え */
        margin-top: 0; /* グローバルの margin-top をリセット */
        margin-left: 8%;
    }

    /* ▼▼▼ 追加 (タブレット用の指定を上書き) ▼▼▼ */
    .right-block .side-text {
        order: 2;
    }
    .right-frame {
        order: 1;
    }

    .button-area {
        text-align: right;
        margin-top: 100px;
        width: 100%;
        padding-right: 15vw; /* 左の画像と同じくらい右に余白 (padding-left と合わせる) */
        box-sizing: border-box;
    }

    .btn-work {
        display: inline-block;
        padding: 30px 84px;
        background: #fff;
        color: #000233;
        border-radius: 100px;
        font-size: 1.8rem;
        font-weight: 600;
        text-decoration: none;
    }

    .btn-work:hover {
        background: #000233;
        color: #fff;
    }

    /* リクルート(PC用) */
    .recruit-section {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 50px;
        width: 85%;
        margin: 0 auto;
        padding: 60px 60px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .recruit-container .title-block .title {
        font-size: 7.2rem; /* PC Title Size */
        letter-spacing: 10px;
    }

    .recruit-container .title-block .subtitle {
        font-size: 2.4rem;
        letter-spacing: 2px;
        margin-bottom: 100px;
    }

    /* PC用メディアクエリ内 */
    .recruit-item {
        flex: 1;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 15px 30px;
        text-align: center;
        position: relative;
        transition: transform 0.25s ease;
        display: block; /* ← 追加 (flexを解除) */
        justify-content: normal; /* ← 追加 (centerをリセット) */
        max-width: none;
    }

    .recruit-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 25%;
        height: 50%;
        width: 1px;
        background: #d3d6e4;
    }

    .recruit-item:hover {
        transform: translateY(-5px);
    }

    /* PC用メディアクエリ内 */
    .recruit-item .icon-frame {
        /* ← セレクタを具体的に */
        width: 80px; /* ← 大きくしたサイズ */
        height: 80px; /* ← 大きくしたサイズ */
        margin-bottom: 25px; /* ← 間隔調整 */
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .recruit-item .icon-frame img {
        /* ← セレクタを具体的に */
        display: block;
        width: 100%; /* ← 親要素いっぱいに */
        height: 100%; /* ← 親要素いっぱいに */
        object-fit: contain; /* ← アスペクト比を保って内接 */
        max-width: 100%; /* はみ出さないように */
    }
    /* PC用メディアクエリ内 */
    /* ↓ セレクタを .recruit-item .text に変更して具体性を高めます */
    .recruit-item .text {
        font-size: 2.2rem;
        font-weight: 700;
        color: #000233;
        letter-spacing: 1px;
        flex: none; /* ← 追加 (スマホ用の flex: 1 をリセット) */
    }

    .company-section {
        width: 100%;
        margin: 0 auto;
        padding: 130px 100px 100px;
        background-color: #f7fcff;
        border-radius: 80px 80px 0 0;
    }

    .company-title {
        font-size: 7.2rem; /* PC Title Size */
        letter-spacing: 10px;
    }

    .company-subtitle {
        font-size: 2.4rem;
        letter-spacing: 2px;
        color: #000233;
        margin-bottom: 70px;
    }

    .company-info {
        max-width: 100%;
        font-size: 1.6rem;
        border-spacing: 0;
    }

    .company-info th {
        width: 200px;
        font-size: 1.1rem;
    }

    .company-info td {
        font-size: 1.6rem;
        line-height: 1.7;
    }

    .map-frame {
        margin-top: 80px;
    }

    .map-frame iframe {
        height: 500px;
        border-radius: 20px;
    }

    .info-block {
        display: flex;
    }
    .company-section .info-block p {
        font-size: 1.8rem;
    }
    .company-section .info-block h3 {
        font-size: 1.6rem;
        width: 150px; /* 項目名の幅を固定 */
        flex-shrink: 0; /* 項目名が縮まないようにする */
        font-weight: 700;
        padding-right: 70px; /* 項目と内容の間の隙間 */
        margin: 0; /* h3のデフォルトマージンをリセット */
    }

    .contact-section {
        display: none;
    }
}