@charset "UTF-8";

/* ===============================================
リセット設定
   =============================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* サイズ計算を楽にする設定 */
}

html, body {
    overflow-x: hidden; /* 横スクロールの発生を防ぐ */
    width: 100%;
}

/** -----------------------------------------------
共通
------------------------------------------------**/
body {
	/*下記のCSSはご自身のデザインに合わせて書き換えてください。*/
	font-size: 16px;
	line-height: 1.6;
	color: #4A4A4A;
	background-color:#F9F7F2;
	font-family: "Zen Maru Gothic","Quicksand","Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Osaka", "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 500;
    padding-top: 10vh;
}

/** -----------------------------------------------
セクション共通
------------------------------------------------**/
.about-section-padding,.service-section-padding,.member-section-padding,.environment-section-padding,.recruit-section-padding{
    padding: 0 15vw; /* 上下は0、左右に画面幅の15%の余白を持たせる */
} 

/* すべてのメインタイトルを一括で中央寄せにする */
.main-title {
    text-align: center; /* 文字を中央に寄せる */
    font-size: 3vw;
    width: 100%; /* 幅いっぱいに広げて中央を定義する */
    padding-bottom: 3vh;
    margin-left: auto;
    margin-right: auto;
}

/** -----------------------------------------------
PC :  画面の横幅が641px以上
------------------------------------------------**/

#header {
    position: fixed;
	background-color: #F9E4D4;
    width: 100%;
    z-index: 1000;
    /* padding-inline: 5vh;  ← 一旦コメントアウトするか削除します */
    top: 0;
    left: 0;
    transition: background-color 0.4s ease, transform 0.4s ease; /* 変化を滑らかに */
}

/* スクロール後に付与するクラス（背景を薄くする） */
#header.is-scrolled {
    background-color: rgba(249, 228, 212, 0.8); /* 少し薄く（透過）する */
}

/* エントリーセクションで隠すためのクラス */
#header.is-hidden {
    transform: translateY(-100%); /* 上に隠す */
    pointer-events: none;
}

.header-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;   /* 大きな画面で中央に寄せる */
    padding: 0 20px;  /* 画面が狭くなっても左右に最低限の余白を確保 */
    height: 10vh;
    min-height: 80px; /* 小さくなりすぎないよう下限だけ設定 */
    display: flex; /* 横並びの指定 */
    align-items: center;
    justify-content: space-between;
}

.logo {
    max-width: none;
    flex-shrink: 0;
}

/* ロゴとナビを横並びにする */
.header-left {
    display: flex;
    align-items: center;
    gap: clamp(15px, 2.5vw, 40px); /* 画面幅に応じて 15pxから40pxの間で変動させる設定 */
    flex-grow: 0; /* 右側のボタンを押し出しすぎないよう、自身の幅を最小限に */
}

.nav {
    margin-left: 0;
    flex-grow: 0;    /* 中央に引っ張られないように固定 */
    margin-right: 10px; /* 必要に応じてナビ自体の最大幅を少し絞ると、ボタンとの距離が保てます */
}

.nav-list{
	display: flex;
	list-style: none;
    margin: 0;
    padding: 0;
    gap: clamp(8px, 1.2vw, 20px);  /* 項目間の隙間も自動調整 */ 
    white-space: nowrap; /* 改行を防ぐ */
}

.nav-list li a {
	text-decoration: none;
    color: #4A4A4A;
    font-weight: 500;
    font-size: clamp(13px, 0.9vw, 16px);
    transition: color 0.3s;
}

.nav-list li a:hover {
    color: #B8D8E0; /* ホバー時に薄いブルー(メインカラー)に */
}

/* ボタンを右端に固定 */
.header-btn {
    margin-left: 0; 
    display: flex;
    gap: 6px; /* ボタン同士の間隔を固定で狭める */
    flex-shrink: 0; /* ボタンが画面外に押し出されないよう保護 */
}

.btn-orange, .btn-border {
    padding: 10px 1.5vw; /* 1024px付近でボタンが大きすぎて欠けないよう、パディングを調整 */
    font-size: clamp(14px, 1vw, 18px);
    white-space: nowrap; /* ボタン内の文字が改行されないようにする */
}


.btn-orange {
    display: inline-flex;
    align-items: center;
    background-color: #E67E50;
    color: #fff;
    height: auto;
    padding: 1.5vh 2vw;
    border-radius: 50px; /* 角を丸くする */
    text-decoration: none;
    font-weight: 700;
    font-size: 1.3rem;
    transition: all 0.3s; /* アニメーション 0.3秒かけて滑らかにする */
}

.btn-orange:hover {
    text-decoration: underline 1px; /* ホバー時に下線を引く */
    color: #fff; /* 文字色は白のまま */
    opacity: 0.8; /* 少し透かして「押せる感」を出す */
}

.btn-border {
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border: 2px solid #E67E50; /* 線の太さ 直線 カラー */
    height: auto;
    padding: 1.5vh 2vw;
    border-radius: 50px; /* 角を丸くする */
    text-decoration: none;
    font-weight: 700;
    color: #4A4A4A;
    font-size: 1.3rem;
    transition: all 0.3s; /* アニメーション 0.3秒かけて滑らかにする */
}

.btn-border:hover {
  text-decoration: underline 1px; /* ホバー時に下線を引く */
  color: #E67E50; /* 文字色をオレンジに変える */
}

.hamburger{
    display: none;
}

/** -----------------------------------------------
メインビュジアル
------------------------------------------------**/
#mainvisual {
	width: 100%;
    height: 90vh; /* 画面の高さからヘッダー分（約10vh）を引いた残りを指定 */
    position: relative;
    overflow: visible;
}

/* 背景写真（FV画像） */
.mainvisual-inner {
    width: 100%;
    height: 95vh;
    background-image: url("../images/pc-mainvisual.jpg"); /* 背景画像を中央に配置しつつ、画面いっぱいに広げる */
    background-size: cover;
    background-position: center 30%; /* 少し上めに配置し、手元の写真をバランス良く見せる */
    display: flex;
    align-items: center;
    padding: 0 6.5vw; /* 左右の余白を画面幅の6.5%に */
}


/* キャッチコピーのスタイリング */
.mainvisual-copy1, .mainvisual-copy2 {
    font-weight: 700;
    font-size: 3.3vw;
	/* 背景の設定 */
	background-color: #F9E4D4;
    border-radius: 1vh;  /* 角丸 */
    display: flex; /* 文字を中央に寄せるため */
    align-items: center;
    justify-content: center;
    height: 9.8vh; /* 画面高の約10%に設定 */
    position: relative;
    z-index: 1;
}

.mainvisual-copy1 {
	position: relative; /* 星の配置基準にする */
    width: 54vw;
	margin-bottom: 3vh;
}

/* --- 左星のあしらい 画像の設定 --- */
.decoration-star-big {
	position: absolute;
    top: -9vh;  /* 上に少しはみ出す */
    left: -7vh; /* 左に少しはみ出す */
    display: block;
    width: 100%;
    height: 130%;
    background-image: url("../images/pc-mainvisual-star-big.png");
    background-size: contain; /* 画像全体が表示されるように調整 */
    background-repeat: no-repeat; /* 余白に画像が繰り返されるのを防ぐ */
}

.mainvisual-copy2 {
	position: relative; /* 星の配置基準 */
	width: 34vw;
    margin-bottom: 30vh;
}

/* --- 右星のあしらい --- */
.decoration-star-small {
	position: absolute;
    bottom: -5vh; 
    right: -24vw;
    display: block;
    width: 80%;
    height: 100%;
    background-image: url("../images/pc-mainvisual-star-small.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ボタンエリアの横並び */
.button-item {
	display: inline-flex;
    flex-direction: column; /* 内部のラベルとボタンは縦に並べる */
    align-items: center; /* ラベルとボタンを中央寄せ */
    gap: 0vh; /* ラベルとボタンの間の隙間 */
    margin-right: 2.7vw;    /* ボタン同士の間隔 */
}

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

/* ラベルのスタイリング */
.button-label {
    font-size: 1rem;
    font-weight: 700;
    display: block;
}

/* --- SCROLL誘導 --- */
.mainvisual-scroll {
    position: absolute;
    bottom: -12vh; /* 下端からの距離 */
    left: 50%; /* 画面の中央に配置 */
    transform: translateX(-50%); /* 中央寄せを確定させる */
    display: flex;
    flex-direction: column; /* 上から順に並べる */
    align-items: center;
    z-index: 20;
}

/* 文字のスタイリング */
.scroll-text {
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: #4A4A4A;
    margin-bottom: 1vh;  /* 直線との隙間 */
}

/* 縦の直線 */
.mainvisual-scroll::after {
    content: "";
    width: 1px;
    height: 10vh; /* 直線の長さ */
    background-color: #4A4A4A;
    /* 背景を「動く線」に見えるグラデーション */
    /* 下は透明（rgbaの末尾0）、真ん中だけ色（#4A4A4A）がついた線 */
    background: linear-gradient(to bottom, 
        rgba(74, 74, 74, 1) 0%, 
        rgba(74, 74, 74, 1) 50%, 
        rgba(74, 74, 74, 0) 100%);
    background-size: 100% 30px; /* 線の長さを30pxに指定 */
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden; /* 中で動く線がはみ出ないように */
    animation: scroll-line 3s ease-in-out infinite;
    display: block;
    margin-bottom: 0.5vh;   /* vとの隙間 */
}

/* 縦の直線が、高さ位置透過が変化して線が上から下に動く */
@keyframes scroll-line{
    0% {
        background-position: 0 -30px; /* 線の開始位置（枠の外上） */
    }
    100% {
        background-position: 0 10vh; /* 線の終了位置（枠の外下） */
    }
}

/* V型の画像 (::afterを使用) */
.mainvisual-scroll::before {
    content: "";
    order: 3; /* 順番を一番最後に強制 */
    display: block;
    width: 0.8vw; /* vの幅 */
    height: 0.5vw; /* vの高さ */
    background-image: url("../images/pc-mainvisual-scroll-v.png"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: v-fade 3.3s ease-in-out infinite;
}

/* vがふんわり表示されるアニメーション */
@keyframes v-fade {
    0%, 60% { opacity: 0; transform: translateY(-3px); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
}

/** -----------------------------------------------
私たちについて
------------------------------------------------**/
/* ABOUTセクション全体の基準 */
.about-section-padding {
    position: relative; /* ここがガーランドの左右配置の基準点 */
    padding-top: 0vh;
    padding-bottom: 0vh;
    background-color: #F9F7F2;
    overflow: visible;
}

/* 内部コンテンツの基準 */
.about-inner {
    z-index: 1;
    max-width: 85vw;
    margin: 0 auto;
    padding: 0 8vw; /* 左右の余白 */
    text-align: center;
    padding-bottom: 12vh;
}

/* -------------------------------------------
 * ガーランドの共通設定
 * ------------------------------------------- */
.left-garland,.right-garland {
    display: block;    /* 空のdivを表示させるために必要 */
    position: absolute;
    top: -10vh;   /* セクションの天辺に合わせる */
    width: 35vw; 
    height: 25vh; 
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;  /* 文字(about-text-box)より背面に配置 */
}

/* 左のガーランド */
.left-garland {
    left: 0vw; 
    background-image: url("../images/pc-left-garland.png");
    background-position: left top;
}

/* 右のガーランド */
.right-garland {
    right: 0vw; 
    background-image: url("../images/pc-right-garland.png");
    background-position: right top;
}

.section-title {
    margin-top: 15vh;
    margin-bottom: 5vh;
    position: relative;
    z-index: 2; /* ガーランドより手前に表示させる */
}

.about-lead {
    font-size: 3.5vw;
    color: #70DBF5;
    font-weight: bold;
    margin-top: 0vh;
    margin-bottom: 1vh;
    position: relative;
    letter-spacing: 0.05em;
}

.about-description {
    text-align: left; /* 文字を左揃え */
    display: inline-block; /* 中身の文章量に合わせた幅にする */
    max-width: 650px;      /* 読みやすい一行の長さを制限 */
    font-size: 1rem;
    line-height: 2.2; /* ゆったりした行間 */
    margin-bottom: 8vh;
}

/* 各セクションボタンエリア共通：中央寄せ */
.about-btn-area,.service-btn-area,.member-btn-area,.env-btn-area,.recruit-btn-area {
    text-align: center;
    margin-top: 0vh;
}

/* ボタン本体（青枠・丸角） */
.btn-border-blue {
    display: inline-block;
    position: relative; /* 下線の基準にするため */
    padding: 1.2vh 3vw; /* 相対値でサイズを調整 */
    border: 0.30vw solid #B8D8E0;
    background-color: #fff;
    border-radius: 5vh; /* 角を丸くしてやさしい印象に */
    color: #4A4A4A; 
    text-decoration: none; /* デフォルトの下線を消す */
    font-size: 1rem;
    transition: all 0.3s ease; /* 変化を滑らかに */
}

/* ホバー時にテキストに下線を出す */
.btn-border-blue:hover {
    text-decoration: underline; /* シンプルに文字に下線を引く */
    color: #A9D1E1; /* ホバー時に少し明るい水色に変化 */
    background-color: #f0faff;
}

/* --- フェードインの初期状態 --- */
.js-fade {
    opacity: 0; /* 最初は透明 */
    transform: translateY(30px); /* 30px下に下げておく */
    transition: opacity 1.2s ease, transform 1.2s ease; /* 1.2秒かけてゆっくり動く */
}

/* --- クラス「is-show」がついた時の状態 --- */
.js-fade.is-show {
    opacity: 1;  /* 見えるようになる */
    transform: translateY(0);    /* 元の位置に戻る */
}


/* 波線の共通設定 */
.top-wavyline-orange,.under-wavyline-blue {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10vh; /* 波の高さ */
    background-repeat: no-repeat;
    background-size: 100% 100%; /* 画面端まで波を届かせる */
    background-position: center bottom;
}

/* 1. ブルーの波線（一番下） */
.under-wavyline-blue {
    background-image: url("../images/pc-wavyline-blue.png");
    bottom: 2vh;
    z-index: 1; /* オレンジより下の層 */
}

/* 2. オレンジの波線（ブルーの上に重ねる） */
.top-wavyline-orange {
    background-image: url("../images/pc-wavyline-orange.png");
    /* ブルーより少し上に浮かせて重なりを作る */
    bottom: 0.5vh; 
    z-index: 2; /* ブルーより上の層 */
}

.left-tama {
    position: absolute;
    bottom: -13vw; 
    left: 0vw;  /* 左端からの距離 */
    width: 15vw;  /* 画像のサイズ（画面幅に合わせる） */
    height: 15vw; /* 正方形に保つ */
    background-image: url("../images/pc-left-tama.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    opacity: 0; /* 最初は隠す */
    transform: scale(0.8) translateY(20px); /* 少し小さく、下に下げておく */
    transition: opacity 1.5s ease, transform 1.5s ease; /* 1.5秒かけてゆっくり表示 */
}

/* 表示された時（is-showがついた時）の状態 */
.left-tama.is-show {
    opacity: 1;
    transform: scale(1) translateY(0); /* 元の大きさと位置に戻る */
}

/** -----------------------------------------------
事業について
------------------------------------------------**/
/* SERVICEセクション全体の基準設定 */
.service-section-padding {
    position: relative; /* 波線の配置基準 */
    padding-top: 0vh;
    padding-bottom: 20vh; /* 波線を表示するための余白を少し多めに確保 */
    overflow: visible !important; /* 波線や装飾が欠けないように */
}

/* リード文の中央揃え */
.service-description {
    text-align: center;
    margin-bottom: 5vw;
    color: #4A4A4A;
    line-height: 1.8;
}

/* カードの横並び設定 */
.service-list {
    display: flex;
    justify-content: center;
    gap: 2.5vw; /* カード間の隙間 */
    margin-bottom: 5vw;
}

/* 個別のカード */
.service-item {
    flex: 1; /* 3つの幅を均等に */
    max-width: 400px; /* カードが広がりすぎないよう上限を設定 */
    background-color: #fff;
    border: 1px solid #4A4A4A; /* 枠線1px */
    padding: 2.5vw; /* カード内余白 */
    box-shadow: 5px 6px 5px 2px rgba(0, 0, 0, 0.2); /* シャドウ */
    border-radius: 1.5vw; /* 角を少し丸く */
    /* 中身を中央に寄せるための設定を追加 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* カード内の画像設定 */
.service-img img {
    width: 100%;
    height: auto;
    margin-bottom: 1.2vw; /* 写真とタイトル間の間隔 */
}

/* 事業名 */
.service-name {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #4A4A4A;
    margin-bottom: 1.2vw; /* 事業名と説明文間の間隔 */
}

/* サービス説明文 */
.service-text {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: #4A4A4A;
}

/* ボタン本体（オレンジ枠・丸角） */
.btn-border-orange {
    display: inline-block;
    position: relative; /* 下線の基準にするため */
    padding: 1.2vh 3vw; /* 相対値でサイズを調整 */
    border: 0.30vw solid #F9E4D4;
    background-color: #fff;
    border-radius: 5vh; /* 角を丸くしてやさしい印象に */
    color: #4A4A4A; 
    text-decoration: none; /* デフォルトの下線を消す */
    font-size: 1rem;
    transition: all 0.3s ease; /* 変化を滑らかに */
}

/* ホバー時にテキストに下線を出す */
.btn-border-orange:hover {
    text-decoration: underline; /* シンプルに文字に下線を引く */
    color: #fadcc5; /* ホバー時に少し明るいオレンジに変化 */
    background-color: #faf3ee;
}

/* 右の「たま」装飾 */
.right-tama {
    position: absolute;
    bottom: -1vw;
    right: 0vw;  /* 右端からの距離 */ 
    width: 10vw; 
    height: 13vw;
    background-image: url("../images/pc-right-tama.png");
    background-size: contain;
    background-repeat: no-repeat;
    /* 波線（z-index: 1, 2）よりも「下」に配置 */
    z-index: 0; 
    pointer-events: none;
    /* ふわっと表示させるための初期状態 */
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

/* --- フェードインの初期状態 --- */
/* --- カードがふわっと表示 --- */
.service-item.js-fade {
    opacity: 0; /* 最初は透明 */
    transform: translateY(30px); /* 30px下に下げておく */
    transition: opacity 1.2s ease, transform 1.2s ease; /* 1.2秒かけてゆっくり動く */
}

/* --- クラス「is-show」がついた時の状態 --- */
.service-item.js-fade.is-show {
    opacity: 1;  /* 見えるようになる */
    transform: translateY(0);    /* 元の位置に戻る */
}

/* 2枚目のカード：0.2秒遅れてスタート */
.service-item:nth-child(2) {
    transition-delay: 0.2s;
}

/* 3枚目のカード：0.4秒遅れてスタート */
.service-item:nth-child(3) {
    transition-delay: 0.4s;
}

/* --- 事業一覧ボタンの遅延設定 --- */
.service-btn-area.js-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

/* 表示時の状態 */
.service-btn-area.js-fade.is-show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s; /* 3枚のカード（0s, 0.2s, 0.4s）のあとに表示されるよう 0.8s 遅らせる */
}

/* 表示された時の状態（JSでis-showがついた時） */
.right-tama.is-show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/** -----------------------------------------------
メンバー紹介
------------------------------------------------**/
/* MEMBERセクション全体 */
.member-section-padding {
    position: relative;
    padding: 0vh 0 15vh;
    background-color: #F9F7F2;
    overflow: visible !important; /* 波線や装飾が欠けないように */;
}

.section-title {
    text-align: center; /* 親要素内の子要素を中央寄せ */
}

/* リード文の左揃え */
.member-description {
    display: inline-block; /* pタグをインラインブロック要素に */
    text-align: left;
    margin-top: 2vw;
    margin-bottom: 4vw;
    color: #4A4A4A;
    line-height: 1.8;
}

/* 2列×2列のグリッド設定 */
.member-list {
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    justify-content: center;
    gap: 3.1vw 2.9vw; 
    max-width: 1000px;
    margin: 0 auto 5vw;
}

/* カード本体 */
.member-item {
    flex: 0 1 450px; /* 伸びすぎず、最大450px程度を目標に収まる */
    width: 100%;
    max-width: 400px;
    width: calc(50% - 1.5vw); /* 横2列にするための計算 */
    min-width: 300px; /* 画面が非常に大きくても、カードが細くなりすぎないよう最小幅を設定 */
    background: #fff;
    border: 1px solid #4A4A4A;
    padding: 5vw 3vw;
    box-shadow: 5px 6px 5px 2px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中身を中央寄せ */
    text-align: center;
}

/* --- 画像エリアの調整 --- */
.member-img {
    width: 95%; /* カードの幅に対して95% */
    margin-bottom: 0vw;
    display: flex;
    justify-content: center;
}

.member-img img {
    width: 100%;
    height: auto;
}

.member-body h2 {
    font-size: 1.3rem;
    margin-bottom: 0; 
    color: #4A4A4A;
}

.member-body h3 {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 2vw; 
    color: #4A4A4A;
}

/* 本人の声（共通） */
.member-body {
    text-align: center; /* 親要素内の子要素を中央寄せ */
}

.member-text-blue, .member-text-orange {
    display: block; 
    width: fit-content;  
    margin-right: auto;  
    margin-left: 0;  
    text-align: left;
    padding: 2px 15px;
    border-radius: 0px;
    font-size: 0.8rem;
    color: #4A4A4A;
    margin-bottom: 0.4vw;  
}

.member-text-blue { 
    background-color: #B8D8E0; 
}

.member-text-orange {
    background-color: #F9E4D4; 
}

.member-text {
    width: 100%; 
    text-align: left; 
    font-size: clamp(0.9rem, 1vw, 1.1rem);
    line-height: 1.8;
    color: #4A4A4A;
    word-break: normal;
    overflow-wrap: normal;
}

/* 1枚目（左上）：待ち時間なし */
.member-item:nth-child(1) {
    transition-delay: 0s;
}

/* 2枚目（右上）：0.2秒遅れてスタート */
.member-item:nth-child(2) {
    transition-delay: 0.2s;
}

/* 3枚目（左下）：0.4秒遅れてスタート */
.member-item:nth-child(3) {
    transition-delay: 0.4s;
}

/* 4枚目（右下）：0.6秒遅れてスタート */
.member-item:nth-child(4) {
    transition-delay: 0.6s;
}


/** -----------------------------------------------
働く環境
------------------------------------------------**/
/* セクション全体 */
.environment-section-padding {
    padding: 10vh 0 15vh;
    background-color: #F9F7F2; 
}

.section-title {
    text-align: center; /* 親要素内の子要素を中央寄せ */
}

/* リード文の左揃え */
.environment-description {
    display: inline-block; 
    text-align: left;
    margin-top: 2vw;
    margin-bottom: 4vw;
    color: #4A4A4A;
    line-height: 1.8;
}

/* 横並びの設定 */
.env-list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5vw; /* アイテム間の隙間 */
    width: 90%;   /* 画面幅に対しての基本の広さ */
    max-width: 1300px;    /* 大画面での上限を引き上げる */
    margin: 0 auto 8vw; /* 下のボタンとの距離を広げてゆとりを出す */
    padding: 5vw 4vw;      /* 内側の余白を少し広げてゆとりを出す */
    /* 枠線の設定 */
    border: 1px solid #4A4A4A; 
    border-radius: 3vw;   /* 角丸 */
    /* 枠の内側の余白 */
    padding: 2vw 3vw;     
    margin: 0 auto 5vw;
}

/* 各アイテムのカード */
.env-card {
    flex: 1;
    text-align: center;
}

/* 丸とアイコンの重なり */
.env-item {
    position: relative;
    width: 10vw;  /* 丸のサイズ */
    height: 10vw;
    margin: 0 auto 1.5vw;
}

.env-mar {
    width: 100%;
    height: auto;
    display: block;
}

.env-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 真ん中に配置 */
    width: 50%; /* アイコンのサイズ（丸に対して） */
    height: auto;
}

/* タイトルは中央寄せ */
.env-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #4A4A4A;
    margin-bottom: 0.8vw; 
    text-align: center;
}

/* 説明文はカード内の左揃え */
.env-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4A4A4A;
    text-align: left;     /* 左揃え */
    display: inline-block; /* 塊として左に寄せる */
}

/* ボタンエリア */
.env-btn-area {
    text-align: center;
    margin-bottom: 0; 
}


/* --- 働く環境カードのアニメーション設定 --- */
/* 共通の動き：下から上にふわっと動く */
.env-card.js-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.0s ease, transform 1.0s ease;
}

/* クラスがついた時の状態 */
.env-card.js-fade.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* --- 順番に出すためのディレイ（遅延）設定 --- */

/* 1枚目（左）：遅延なし */
.env-card:nth-child(1) {
    transition-delay: 0s;
}

/* 2枚目（中央）：0.2秒遅れて表示 */
.env-card:nth-child(2) {
    transition-delay: 0.2s;
}

/* 3枚目（右）：0.4秒遅れて表示 */
.env-card:nth-child(3) {
    transition-delay: 0.4s;
}

/** -----------------------------------------------
募集職種
------------------------------------------------**/
/* RECRUITセクション全体 */
.recruit-section-padding {
    position: relative;
    padding: 8vh 0;
    overflow: visible;
    background-color: #F9F7F2;
    z-index: 1;
}

/* 説明文を中央の左揃えに */
.recruit-description {
    display: inline-block;
    text-align: left;
    margin: 2vw auto 5vw;
    line-height: 1.8;
}

/* アコーディオンを包むコンテナ */
.recruit-container {
    max-width: 63vw; 
    margin: 0 auto; 
    position: relative;
    z-index: 10;
}

/* アコーディオン共通設定 */
.recruit-accordion {
    width: 100%;
    background: #fff;
    border-width: 0.2vw;
    border-style: solid;
    margin-bottom: 5.5vw; 
    border-radius: 1.5vw; 
    border-radius: 20px; /* 角を丸くする */
    overflow: hidden;
    transition: all 0.3s ease;
}

.recruit-accordion:last-of-type {
    margin-bottom: 3.9vw;
}

.border-orange { 
    border-color: #F9E4D4; 
}

.border-blue { 
    border-color: #B8D8E0; 
}

/* アコーディオンの頭部分 */
.recruit-summary {
    list-style: none;
    cursor: pointer;
    padding: 2vw 3vw; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: flex-start;
}

.recruit-summary::-webkit-details-marker {
    display: none; 
}

/* アイコンの切り替え */
.accordion-icon-box {
    width: 2.3vw; 
    height: 2.3vw;
    margin-top: 0.5vw; 
    background-image: url("../images/pc-accordion-open.png");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* 開いているとき */
details[open] .accordion-icon-box {
    background-image: url("../images/pc-accordion-close.png");
}

/* カード内の余白と間隔 */
.job-title {
    font-size: 1.8vw;
    font-weight: 400;
    margin-bottom: 2.3vw;
}

.job-lead {
    font-size: 1.6vw;
    font-weight: 700;
}

/* カード内の中身の余白 */
.recruit-content {
    padding: 0 3.1vw 2.3vw; /* 左右40px 下30px */
}

.label-border-orange {
    background-color: #F9E4D4;
    margin-bottom: 0vw;
    line-height: 1.8;
}

.label-border-blue {
    background-color: #B8D8E0;
    margin-bottom: 0vw;
    line-height: 1.8;
}

.recruit-detail-box p {
    margin-top: 0;
    margin-bottom: 1.9vw;
    line-height: 1.8;
}

/* タグの横並び */
.recruit-tags-border-orange {
    display: flex;
    gap: 1.1vw;
    margin-top: 1.9vw;
    list-style: none;
}

.recruit-tags-border-orange li {
    border: 3px solid #F9E4D4;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.recruit-tags-border-blue {
    display: flex;
    gap: 1.1vw;
    margin-top: 1.9vw;
    list-style: none;
}

.recruit-tags-border-blue li {
    border: 3px solid #B8D8E0;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* 共通：たまの基本設定 */
.recruit-left-top-tama,.recruit-right-middle-tama,.recruit-left-under-tama {
    position: absolute;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; 
}

/* 左上のたま */
.recruit-left-top-tama {
    width: 25vw; 
    height: 25vw;
    top: -5vw; 
    left: -5vw; 
    background-image: url("../images/pc-left-top-tama-orenz.png");
}

/* 右端のたま：ディレクターとUIUXの間くらい */
.recruit-right-middle-tama {
    width: 15vw;  
    height: 25vw;
    top: 45%; 
    right: 0; 
    background-image: url("../images/pc-right-middle-tama-orenz.png");
}

/* 3. 左下のたま：カスタマーサポートの横 */
.recruit-left-under-tama {
    width: 15vw; 
    height: 15vw;
    bottom: 10vw;
    left: -3vw;
    background-image: url("../images/pc-left-under-tama-orenz.png");
}

/* アニメーションの動きを定義（ふわっと浮かび上がる） */
@keyframes fuwaFade {
    0% {
        opacity: 0;
        transform: translateY(30px); /* 30px下から開始 */
    }
    100% {
        opacity: 1;
        transform: translateY(0);    /* 本来の位置へ */
    }
}

/* アニメーションの内容（下からふわっと） */
@keyframes fuwaFade {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 共通：初期状態は透明 */
.recruit-left-top-tama,.recruit-right-middle-tama,.recruit-left-under-tama {
    position: absolute;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0; /* 最初は隠す */
}

/* JSでこのクラスがついたらアニメーション開始 */
.recruit-left-top-tama.is-show,.recruit-right-middle-tama.is-show,.recruit-left-under-tama.is-show {
    animation: fuwaFade 1.5s ease-out forwards;
}

/* 個別の遅延設定（上から順に出るように） */
.recruit-left-top-tama.is-show {
    animation-delay: 0.2s; 
}

.recruit-right-middle-tama.is-show { 
    animation-delay: 0.5s; 
}

.recruit-left-under-tama.is-show {
    animation-delay: 0.8s; 
}


/** -----------------------------------------------
エントリー
------------------------------------------------**/
#entry {
    position: relative; /* 装飾の基準点 */
    overflow: hidden;   /* たまが画面外へはみ出してもスクロールバーを出さない */
    background-image: url("../images/pc-entry-background.png");
    background-size: cover;    /* 背景を画面いっぱいに広げる */
    background-position: center;
    background-repeat: no-repeat;
    padding: 1vw 0 8vw;  /* 上下左右の余白 */
    text-align: center; /* テキストとボタンを中央揃え */
    text-align: center;
    width: 100%;
}

/* --- 背景装飾：共通設定 --- */
#entry::before,#entry::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* --- 左側：オレンジグループ（大きな玉と星） --- */
#entry::before {
    width: 25vw; 
    height: 25vw;
    top: -2vw; 
    left: -1vw;
    /* 背景を複数指定することで「たま」の上に「星」を重ねます */
    background-image: 
        url("../images/pc-entry-star-big.png"), 
        url("../images/pc-entry-big-tama-orenz.png");
    /* 【重要】星をたまの右側に寄せる調整 */
    background-position: 12vw 10vw, left center; 
    /* たまを15vw程度に抑え、星を8vwにする設定 */
    background-size: 8vw 8vw, 15vw 15vw;
}

/* タイトル（エントリー） */
.entry .section-title {
    margin-bottom: 1.5vw; 
}

/* メッセージリード（私たちと一緒に〜） */
.message-lead {
    font-size: 1.5vw; 
    font-weight: 500;
    color: #4A4A4A;
    margin-bottom: 1.5vw; 
}

/* メッセージ本文（まずは、あなたの〜） */
.message-body {
    font-size: 1.5vw;
    font-weight: 400;
    line-height: 1.8;
    color: #4A4A4A;
    margin-bottom: 3.9vw;  
}

/* --- 右側：ブルーグループ --- */
#entry::after {
    width: 25vw;
    height: 25vw;
    bottom: 2vw; /* topからbottomに変更して位置を安定させる */
    right: -8vw;
    background-image: 
        url("../images/pc-entry-star-big.png"), 
        url("../images/pc-entry-big-tama-blue.png");
    /* 【重要】星をたまの左側に寄せる調整 */
    background-position: 2vw 12vw, right center; 
    background-size: 9vw 9vw, 18vw 18vw;
}

/** -----------------------------------------------
フッター
------------------------------------------------**/
#footer {
    background-color: #F9E4D4;
    padding: 3vw 0 2vw; 
    text-align: center;
}

.footer-inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* メインナビゲーション（私たちについて等） */
.nav-main {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 3.9vw; 
    margin-bottom: 2vw; /* サブナビとの間隔 */
}

.nav-main a {
    text-decoration: none;
    color: #4A4A4A;
    font-weight: 500;
    font-size: 1.1vw;
}

/* サブナビゲーション（会社情報等） */
.nav-sub {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 3.9vw; 
    margin-bottom: 4vw; /* ロゴとの間隔 */
}

.nav-sub a {
    text-decoration: none;
    color: #4A4A4A;
    font-weight: 500;
    font-size: 0.9vw;
}

/* ロゴエリア */
.footer-logo {
    margin-bottom: 4vw; /* コピーライトとの間隔 */
}

.footer-logo img {
    width: 20vw; /* ロゴのサイズ */
    height: auto;
}

/* コピーライト */
.copyright {
    font-size: 0.8vw;
    color: #4A4A4A;
}

.pc-only{
    display: block;
}

.sp-only{
    display: none;
}

/*ここからメディアクエリで各デバイスサイズに書き分けます。
今回の課題で考慮するのはPCとスマホのみでOKですが、タブレットサイズでのスタイルを書いてもOK！
また、CSSは上から下に継承されるので、変化させたいところだけ書けばOKです*/


/** -----------------------------------------------
Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media (max-width: 768px) {
.about-section-padding,.service-section-padding,.member-section-padding,
.environment-section-padding,.recruit-section-padding{
    padding: 0 5vw; /* 上下は0、左右に画面幅の15%の余白を持たせる */
} 

.about-inner,.service-inner,.member-inner,.environment-inner,.recruit-inner{
        padding: 0;
    }

/** -----------------------------------------------
ヘッダーとハンバーガーメニュー
------------------------------------------------**/
    #header {
        width: 100%;
        background-color: #F9E4D4; 
        position: fixed; 
        top: 0;
        left: 0;
        z-index: 1000;
    }

    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 36px; /* 左右36px固定 */
        height: 60px; 
    }

    /*  ロゴ：少し小さく調整 */
    .logo img {
        width: 32vw; /* 画面幅に合わせた相対値 */
        max-width: 120px; /* 上限 */
        height: auto;
        display: block;
    }

    /*  ハンバーガーボタン */
    .hamburger {
        display: block;
        position: relative;
        z-index: 110; /* メニューより上に表示 */
        width: 30px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .hamburger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #4A4A4A;
        transition: all 0.3s;
    }
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 11px; }
    .hamburger span:nth-child(3) { bottom: 0; }

    /* ×印のアニメーション */
    .hamburger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .hamburger.is-active span:nth-child(2) { opacity: 0; }
    .hamburger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    /*  全画面メニュー */
    .nav, .header-btn {
        position: fixed;
        right: -100%; /* 通常時は隠す */
        width: 100%;
        background-color: #F9F7F2; 
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 90;
        transition: right 0.4s ease;
    }

    /* メニュー上半分（リンク部分） */
    .nav {
        top: 0;
        height: 100vh; 
        justify-content: center; 
        padding-bottom: 35vh; 
        margin-right: 0px;
    }

    /* メニュー下半分（ボタン部分） */
    .header-btn {
        top: 60vh; 
        height: auto;
        background-color: transparent;
        gap: 7vw; /* ボタン同士の間隔 */
        pointer-events: none; /* メニューの重なりによるクリック不可を防止 */
    }

    .header-btn a {
        pointer-events: auto;
        position: relative;
        width: 45vw;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.3s;
    }

    /* メニュー表示時 */
    .nav.is-active, .header-btn.is-active {
        right: 0;
    }

    /*  フォントサイズとボタン（相対値 vw） */
    .nav-list {
        display: flex;
        flex-direction: column;
        gap: 6vw; /* 項目間の余白 */
        list-style: none;
        padding: 0;
        text-align: center;
    }

    .nav-list a {
        font-size: 6.4vw; /* 24px相当 */
        font-weight: bold;
        color: #4A4A4A;
        text-decoration: none;
    }

    /* ボタンのスタイル */
    .btn-orange,.btn-border {
        width: 75vw; /* 画面幅に合わせたボタンサイズ */
        height: 14vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3.46vw; /* 13px相当 */
        border-radius: 50px;
        text-decoration: none;
    }

    .btn-orange {
        background-color: #D68356;
        color: #fff; 
    }

    .btn-orange:hover {
        text-decoration: underline 1px;
        opacity: 0.8;
        color: #fff;
    }

    .btn-border {
        background-color: #fff;
        border: 1px solid #D68356;
        color: #4A4A4A; 
    }

    .btn-border:hover {
        text-decoration: underline 1px;
        color: #E67E50;
    }

/** -----------------------------------------------
メインビュジアル
------------------------------------------------**/
/* PC版で使用していた星のあしらいを非表示にする */
    .decoration-star-big,.decoration-star-small {
        display: none !important;
    }

#mainvisual {
        height: auto; /* 縦に長く */
        background-color: #F9F7F2; 
        position: relative; /* 子要素（SCROLL）の基準点にする */
        overflow: visible;  /* 線を画像からはみ出させるために必須 */
    }

.mainvisual-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* すべて左揃え */
    padding: 0;
    background-image: url("../images/sp-mainvisual.jpg");
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
}

/* キャッチコピーエリア */
.mainvisual-copy-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(100vw * (180 / 375)); /* 画像の高さ分を確保するための余白 */
}

.mainvisual-copy1, .mainvisual-copy2 {
    font-size: 15px; 
    height: auto;
    padding: 10px 20px;
    width: fit-content;
    border-radius: 5px;
    margin-left: 31px;
    margin-bottom: 0;
}

.mainvisual-copy1 {
    margin-top: 25vw;
    position: relative;
}

/* 上の流れ星 */
.mainvisual-copy1::before {
    content: "";
    position: absolute;
    top: -50px;
    left: -30px;
    width: 80px;
    height: 80px;
    background: url("../images/sp-mainvisual-star-big.png") no-repeat center/contain;
}

.mainvisual-copy2 {
    margin-top: 2.66vw;
    position: relative;
    margin-bottom: 15vw;
}

/* 下の流れ星 */
.mainvisual-copy2::after {
    content: "";
    position: absolute;
    bottom: -20px;
    right: -40px;
    width: 60px;
    height: 60px;
    background: url("../images/sp-mainvisual-star-small.png") no-repeat center/contain;
}

/*  ボタンエリア */
.button-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;    /* ラベルとボタンを縦軸で中央揃え */
    width: 144px; 
    margin-left: 31px;  
    margin-bottom: 25px;    /* ボタン同士の間隔を開ける */
}

.button-label {
    font-size: 13px;
    margin-bottom: 0px; 
    color: #4A4A4A;
    font-weight: 700;
    text-align: center;
}

.btn-orange {
    padding-bottom: 20px;
}

.btn-orange, .btn-border {
    width: 144px;  
    height: 43px;  
    font-size: 13px; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    text-decoration: none;
    padding: 0; /* 指定サイズを守るためpaddingをリセット */
}

/* SCROLL全体のコンテナ */
.mainvisual-scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -40px;      /* ★ここをマイナスにすることで画像からはみ出させます */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    height: 100px;      /* 直線の長さを決める高さ */
}

/** -----------------------------------------------
私たちについて
------------------------------------------------**/
.about-inner {
    position: relative;
    padding-bottom: 100px; /* 波線とボタンが重なるための余白 */
}

/* ガーランドの共通設定 */
.left-garland, .right-garland {
    position: absolute; /* 絶対配置にする */
    top: -15vh;         
    width: 40vw;
}

/* 左側のガーランドを左端へ */
.left-garland {
    left: -10vw;        /* マイナス値で画面の外側へ少し逃がす */
}

/* 右側のガーランドを右端へ */
.right-garland {
    right: -10vw;       /* マイナス値で画面の外側へ少し逃がす */
}


.main-title {
    font-size: 1.5rem;
}

.about-lead {
    font-size: 1.1rem;
}

.about-description {
    font-size: 14px;       /* 読みやすいサイズに調整 */
    line-height: 1.8;      /* 行間を広げてゆったりさせる */
    text-align: left;      /* 左揃え（またはjustify） */
    word-break: break-all; /* 単語の途中で適切に折返す */
}

/* PC用の改行タグをスマホで無効化する */
.about-description br {
    display: none;
}

.btn-border-blue {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 50px;
    text-decoration: none;        /* 最初は下線なし */
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;    /* アニメーションを滑らかに */
}

/* ホバー時のアクション（PC版と同様の設定） */
.btn-border-blue:hover {
    background-color: rgba(163, 209, 224, 0.1); /* 枠線と同じ色を薄く背景に敷く */
    color: #A3D1E0;   
    text-decoration: underline 1px;   /* 下線を表示 */
    opacity: 0.8;  /* 透明度を少し下げる */
}

/** -----------------------------------------------
事業について
------------------------------------------------**/
#service {
    position: relative;        /* 波線の位置基準にするため */
    padding-bottom: 90px;     /* ★ここを大きくすると波線が下に下がります */
}

/* PC用の改行タグをスマホで無効化する */
.service-description br {
    display: none;
}

.service-description {
    width: fit-content;      /* コンテンツの幅に合わせる */
    max-width: 85%;         /* 画面端にピッタリくっつかないよう最大幅を制限 */
    margin: 20px auto 0;   /* 左右をautoにすることで中央に配置 */
    text-align: left;  /* 文章を左揃えにする */
    font-size: 14px;
    line-height: 1.8;
    color: #4A4A4A;
}

/* カードリストを縦並びにする */
.service-list {
    padding: 0 10vw;
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 40px;              /* カード同士の間隔 */
    margin-top: 30px;
}

/* 各カード（アイテム）の調整 */
.service-item {
    width: 100%;
    background-color: #fff;
    border-radius: 12px;    /* 角を丸くしてやさしい印象に */
    overflow: hidden;
}

/* 1つ目の画像 */
.service-img1 img {
    content: url("../images/sp-service-1.png");
}

/* 2つ目の画像 */
.service-img2 img {
    content: url("../images/sp-service-2.png");
}

/* 3つ目の画像 */
.service-img3 img {
    content: url("../images/sp-service-3.png");
}

/* 画像のサイズ調整 */
.service-item img {
    width: 100%;
    margin-top: 5px;
    height: auto; 
    display: block;
    object-fit: contain; /* 画像が切れないように全体を表示 */
}

/* カード内のテキストエリア調整 */
.service-body {
    padding: 10px;
    text-align: left;
}

/* 説明文の改行リセットと行間調整 */
.service-text {
    font-size: 14px;
    line-height: 1.7;
}

.btn-border-orange {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;        /* 最初は下線なし */
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;    /* アニメーションを滑らかに */
}

/* ホバー時のアクション（PC版と同様の設定） */
.btn-border-orange:hover {
    text-decoration: underline; /* シンプルに文字に下線を引く */
    color: #fadcc5; /* ホバー時に少し明るいオレンジに変化 */
    background-color: #faf3ee;
}


/** -----------------------------------------------
メンバー紹介
------------------------------------------------**/
#member {
    position: relative;        /* 波線の位置基準にするため */
    padding-bottom: 100px;     /* ★ここを大きくすると波線が下に下がります */
}

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

.member-description {
    width: fit-content;
    max-width: 85%;
    margin: 20px auto 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
    color: #4A4A4A;
}

/* PC用の改行タグをスマホで無効化する */
.member-description br {
    display: none;
}

/* カードリストの並び（事業紹介と同じく縦並び） */
.member-list {
    display: flex;
    gap: 20px; /* カード同士の間隔 */
    margin-top: 30px;
}

/* スマホ専用画像への切り替え（nth-childで指定） */
.member-item:nth-child(1) .member-img img {
    content: url("../images/sp-member1.jpg"); 
}
.member-item:nth-child(2) .member-img img {
    content: url("../images/sp-member2.jpg"); 
}
.member-item:nth-child(3) .member-img img {
    content: url("../images/sp-member3.jpg"); 
}
.member-item:nth-child(4) .member-img img {
    content: url("../images/sp-member4.jpg"); 
}

/* 画像のサイズ調整 */
.member-img {
    width: 80%;
    margin-top: 5px;
    text-align: center;
    height: auto;
    display: block; 
}

.member-img img {
    width: 100%; /* 画像を少し小さくして、カードの縦の長さを抑える */
    height: auto;
    display: block;
    margin-bottom: 0;
}

/* カード内のテキストエリア調整 */
.member-body {
    padding: 0;
    width: 80%;
}

.member-body h3 {
    font-size: 4.7vw;
    margin-bottom: 0;
}

.member-body h4 {
    font-size: 3.8vw;
    margin-bottom: 4.8vw;
}

.member-text-blue,.member-text-orange {
    font-size: 3.5vw;
    margin-bottom: 0;
}

/* 説明文の改行リセットと行間調整 */
.member-text {
    font-size: 3.5vw;
    line-height: 1.7;
    max-width: 100%; 
    text-align: left; /* 文字自体は左揃えで見やすく */
}

/* PC用の改行タグをスマホで無効化する */
.member-text br {
    display: none;
}


/** -----------------------------------------------
働く環境
------------------------------------------------**/

.environment-description {
    width: fit-content;      /* コンテンツの幅に合わせる */
    max-width: 85%;         /* 画面端にピッタリくっつかないよう最大幅を制限 */
    margin: 20px auto 0;  
    text-align: left;  /* 文章を左揃えにする */
    font-size: 14px;
    line-height: 1.8;
    color: #4A4A4A;
}

/* PC用の改行タグをスマホで無効化する */
.environment-description br {
    display: none;
}

.env-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70vw;           
    min-height: 156vw;
    border-radius: 8vw;    /* 角丸 */
    padding: 3.2vw 8vw;  
    gap: 30px; /* カード同士の間隔 */
}

/* 白い丸のエリア（81x78px） */
.env-item {
    position: relative;
    width: 21.6vw;        
    height: 20.8vw;        
    margin-bottom: 0; 
}

/* 白い丸（背景） */
.env-mar {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 中のアイコン */
.env-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13.8vw;           /* 52px相当 */
    height: 13.6vw;          /* 51px相当 */
    object-fit: contain;
}

/* テキスト部分 */
.env-name {
    font-size: 4.5vw;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 1.5vw;
    text-align: center;
}

.env-text {
    font-weight: 400;
    margin-top: 0;
}


/** -----------------------------------------------
募集職種
------------------------------------------------**/
#recruit {
    position: relative;
    padding-bottom: 30px; 
}

.recruit-inner {
    width: 100%;
    padding-left: 0; 
    padding-right: 0; 
}

/* PC用の改行タグをスマホで無効化する */
.recruit-description br {
    display: none;
}

.recruit-description {
    width: fit-content;      /* コンテンツの幅に合わせる */
    max-width: 85%;         /* 画面端にピッタリくっつかないよう最大幅を制限 */
    margin: 13px auto 0;   /* 左右をautoにすることで中央に配置 */

    text-align: left;  /* 文章を左揃えにする */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #4A4A4A;
}

.recruit-container {
    max-width: 100%; 
    margin-top: 19px;
    margin-bottom: 30px;
}

.recruit-accordion {
    width: 100%;           /* コンテナいっぱいに広げる */
    margin-bottom: 30px;   /* アコーディオン同士の間隔 */
    background-color: #fff;
    border-radius: 5px; 
    overflow: hidden;      /* 中身が角丸からはみ出さないように */
}

.job-title {
    font-size: 5vw;
    font-weight: 400;
}

.job-lead {
    font-size: 4vw;
    font-weight: 700;
}

.accordion-icon-box {
    width: 5vw;
    height: 2.3vw;
    margin-top: 2vw;
}

.label-border-orange,.label-border-blue {
    padding: 5px 10px;
    font-size: 4vw;
    font-weight: 700;
}

.recruit-content p {
    font-size: 3.8vw;
    font-weight: 400;
}

/* PC用の改行タグをスマホで無効化する */
.recruit-content br {
    display: none;
}

.recruit-tags-border-orange,.recruit-tags-border-blue {
    display: flex;
    flex-wrap: wrap;       /* 折り返しを許可 */
    gap: 15px 5%;          /* 縦の間隔  / 横の間隔  */
    padding: 0;
    list-style: none;
    font-size: 3.5vw;
    font-weight: 700;
}

/* 各タグ（li）を2列の幅にする */
.recruit-tags-border-orange li,.recruit-tags-border-blue li {
    box-sizing: border-box;
    text-align: center;    /* 文字を中央に */
    border: 2px solid; 
}

.recruit-tags-border-orange li {
    border-color: #F9E4D4;
}

.recruit-tags-border-blue li {
    border-color: #B8D8E0;
}

.recruit-left-top-tama {
    top: 8vw;  /* 元の位置より下げる */
    left: -5vw;
}

.recruit-right-middle-tama {
    top: 140vw;    
    right: -3vw;
}

.recruit-left-under-tama {
    bottom: 55vw; 
    left: 0vw;
}

/** -----------------------------------------------
エントリー
------------------------------------------------**/
#entry {
    background-image: url("../images/sp-entry-background.png"); 
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 0;
    padding-bottom: 0; 
}

#entry .section-title {
    margin-top: 50px;
    margin-bottom: 20px; 
}

#entry .main-title {
    padding-bottom: 0;
    margin-bottom: 0; 
}

.entry-message {
    margin-top: -10px; 
    text-align: center;
}

#entry .button-item {
    display: flex;
    flex-direction: column; 
    align-items: center;    /* ラベルとボタンを縦軸で中央揃え */
    justify-content: center;
    text-align: center;
    width: auto; 
    margin-left: auto; 
    margin-right: auto; 
}

.message-lead {
    margin-bottom: 10px; 
    font-size: 3.8vw; 
    font-weight: 400;
}

.message-body p {
    max-width: 80%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.8vw;
    line-height: 1.6; 
}

/* #entryの中にあるbutton-itemだけに限定して適用 */
#entry .button-item {
    display: flex;
    flex-direction: column; /* ラベルとボタンを縦に並べる */
    align-items: center;    /* 中央揃え */
    justify-content: center;
    text-align: center;
    margin-left: 0;
    margin-bottom: 20px;    /* ボタン同士の間隔 */
}

#entry .button-label {
    font-size: 3.5vw;
    font-weight: 700;
}

/** -----------------------------------------------
フッター
------------------------------------------------**/
#footer {
    padding: 0px 40px 0px; /* 左右に少し余白を作る */
    background-color: #F9E4D4; 
    text-align: center;
}

.footer-inner {
    margin: 0;
}

.footer-nav {
    display: flex;
    justify-content: space-between; /* 両端に寄せる */
    align-items: flex-start;
    max-width: 500px;  /* 広がりすぎ防止 */
    margin: 0 auto 30px;   /* 中央配置し、下に余白 */
    text-align: left;  /* 文字自体は左揃え */
}

/* リストの基本設定 */
.nav-main, .nav-sub {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    align-items: flex-start; /* 左揃えにする */
    padding: 0;
    list-style: none;
    margin: 0;
    gap: 2vw;
}

/* 各項目の間隔とフォント */
.nav-main li,.nav-sub li {
    margin-bottom: 5px; /* 縦の間隔 */
}

.footer-nav a {
    text-decoration: none;
    color: #4A4A4A;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap; /* 折り返し防止 */
}

/* ロゴの配置調整 */
.footer-logo {
    width: 100%;             /* 横幅いっぱいに広げて中央を確定させる */
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    margin-bottom: 5px;     /* コピーライトとの間隔 */
}

.footer-logo img {
    width: 150px; /* TSUTSUMUロゴのサイズ調整 */
    height: auto;
    display: block;
}

.copyright {
    font-size: 10px;
    font-weight: 200;
    color: #4A4A4A;
    display: block;
    text-align: center;      /* テキストを中央揃え */
    width: 100%;             /* 横幅いっぱいに広げて中央を確定させる */
}

}