@charset "UTF-8";
/** -----------------------------------------------
    共通
------------------------------------------------**/
body {
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color:#fff;
    font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Osaka", "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* ハンバーガーメニューがアクティブな時にスクロールを無効にする */
body.no-scroll {
    overflow: hidden;
}

/** -----------------------------------
    複数セクション共通
-------------------------------------**/
#concept, #company, #member, #environment, #faq, #recruit, #recruit-positions { 
    /* 上に40px 下に56pxの余白 */
    padding: 40px 0 56px 0;
}

#header, #footer, #recruit-positions { 
    background-color: #fff7f7;
}

.section-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

/** -----------------------------------
    テキスト
-------------------------------------**/

h2.large {
    font-weight: bold;
    font-size: 1.5em; /* 16px * 1.5 = 24px 程度 */
    line-height: 1.6;
    letter-spacing: 0.03em;
    margin-bottom: 16px; 
}


h3.large {
    font-weight: bold;
    font-size: 1.2em; 
    line-height: 1.6;
    letter-spacing: 0.03em;
}

h3.small {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.03em;
}

p.large {
    font-size: 17px;
    line-height: 2;
    letter-spacing: 0.06em;
    font-weight: bold;
}

p.medium {
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.06em;
    text-align: center;
}

p.small {
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.03em;
}

/** -----------------------------------
    ボタン
-------------------------------------**/

/** -----------------------------------
    見出し
-------------------------------------**/

.title-en {
    /* 英語見出しを中央寄せ */
    text-align: center;
    margin-bottom: 16px;
}

.icon {
    /* アイコンの横幅を16pxに設定 */
    width: 32px;
}

.title-en .title {
    /* フォント */
    font-family: "Darumadrop One", sans-serif;
    /* フォントサイズ */
    font-size: 19px;
    /* 文字間 */
    letter-spacing: 0.13em;
}

/** -----------------------------------
    レイアウト
-------------------------------------**/

.col-2 {
    /* 横並びにする */
    display: flex;
    /* 左右に散らすように水平方向の揃え方を指定する */
    justify-content: space-between;
}
.col-2 .item {
    /* 要素と要素の間の余白が24pxで左右の要素の横幅が等しくなるように指定する */
    width: calc((100% - 24px)/2);
}


/** -----------------------------------
    ヘッダー
-------------------------------------**/
#header {
    width: 100%;
    height: 70px;/* 高さを70pxに */
    display: flex;/* ロゴとそれ以外を横並びに */
    justify-content: space-between; /* 左右に散るように指定 */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 0 20px;
    box-sizing: border-box; /* paddingを含めた幅の計算 */
}

/* ロゴのコンテナ ロゴ画像＋「採用サイト」の文字*/
.header-logo {
    display: flex;
    align-items: center;
    width: auto; /* 幅を内容に合わせて自動調整 */
    max-width: 240px; /* ロゴとパディングを含めた最大幅 padding-rightの分だけ少し大きく*/
    height: auto; /* 高さを幅に合わせて自動調整 */
    flex-shrink: 0; /* ロゴは縮小しない */
    flex-grow: 0; /* ロゴは余白を占有しない */
}

/* ロゴ画像自体 */
.header-logo img {
    display: block; /* 余分なスペースをなくす */
    width: 200px; /* 親要素（.header-logo）の幅いっぱいに広げる */
    height: auto; /* 高さは幅に合わせて自動調整 */
    padding-right: 15px; /* ロゴ画像の右に余白 */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

/* 「採用サイト」の文字 */
.recruit-site-text {
    font-size: 18px;
    text-decoration: none; /* 下線を取り除く */
    white-space: nowrap; /* テキストが改行されないように */
    color: #555;
}

/* グローバルナビゲーション全体（リストとボタンを含む） */
.gnav-pc-wrap {
    display: flex; /* Flexboxで横並びに */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 6px; /* ナビゲーションリストとボタンの間隔 */
    flex-grow: 1; /* 利用可能なスペースを埋めるように広がる */
    flex-shrink: 1; /* 必要であれば縮小を許可するが、内容が重ならないように */
    justify-content: flex-end; /* 右寄せにする */
    min-width: 0; /* これを追加することで、内容がはみ出すのを防ぐ */
}

/* グローバルナビゲーションのリスト */
ul.gnav-pc {
    display: flex; /* リストアイテムをFlexboxで横並びに */
    list-style: none; /* リストの点を消す */
    margin: 0; /* デフォルトマージンをリセット */
    padding: 0; /* デフォルトパディングをリセット */
    gap: 25px; /* 各リストアイテム間の間隔を調整 */
    flex-wrap: nowrap; /* ナビゲーション項目が改行しないように */
    flex-shrink: 1; /* 必要であればナビゲーションリストも縮小を許可 */
    min-width: 0; /* これを追加することで、内容がはみ出すのを防ぐ */
}

/* 各ナビゲーションリンク */
ul.gnav-pc li a {
    white-space: nowrap; /* テキストの改行を防ぐ */
    font-family: 'Cabin', sans-serif;
    font-size: 16px;
    letter-spacing: 0.13em;
    color: #555;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease; /* ホバーエフェクト */
}

ul.gnav-pc li a:hover {
    color: #ff9999; /* ホバー時の色 */
}

/* エントリーボタン（ヘッダー用） */
.button-small {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff9999; 
    color: #fff;
    text-decoration: none;
    border-radius: 100vh;
    font-weight: bold;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* 縮小しないように */
    flex-grow: 0; /* ボタンは余白を占有しない */
}

.button-small:hover {
    background-color: #fbbb82; /* ホバー時の色 */
}

/* ハンバーガーメニューボタン */
#menu-button {
    display: none; /* デフォルトでは非表示 */
    width: 60px;
    height: 60px;
    padding: 22px 18px;
    cursor: pointer;
    z-index: 1001; /* オーバーレイより手前に */
    position: relative;
}

.menu-button-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.menu-button-inner span {
    display: block;
    height: 2px; /* 線の太さを少し細く */
    width: 100%;
    background-color: #333;
    position: absolute;
    transition: transform 0.4s ease, opacity 0.4s ease; /* アニメーション速度を少し遅く */
}

.menu-button-inner span:nth-child(1) {
    top: 0;
}

.menu-button-inner span:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
}

.menu-button-inner span:nth-child(3) {
    bottom: 0;
}

/* ハンバーガーメニューがアクティブになった時のスタイル（「×」の形） */
#menu-button.is-active .menu-button-inner span:nth-child(1) {
    transform: translateY(7px) rotate(45deg); /* 少しだけ中央に寄せる */
}

#menu-button.is-active .menu-button-inner span:nth-child(2) {
    opacity: 0;
}

#menu-button.is-active .menu-button-inner span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg); /* 少しだけ中央に寄せる */
}

/* スマホ用オーバーレイメニュー */
.gnav-sp-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 247, 247, 0.95); /* ヘッダーの背景色に合わせた半透明 */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: hidden; /* 初期状態では非表示 */
    opacity: 0; /* 初期状態では透明 */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* スムーズな表示/非表示 */
    transform: translateX(100%); /* 右からスライドさせるための初期位置 */
    transition: transform 0.3s ease-out; /* スライドアニメーション */
}

.gnav-sp-wrap.is-active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0); /* 通常の位置に戻す */
}

ul.gnav-sp {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%; /* メニューの幅をフルにする */
}

ul.gnav-sp li {
    margin-bottom: 25px; /* 各項目間の間隔 */
}

ul.gnav-sp li a {
    display: block;
    padding: 10px 0;
    font-size: 24px; /* スマホメニューのフォントサイズ */
    font-weight: bold;
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
}

ul.gnav-sp li a:hover {
    color: #ff9999;
}

.button-large-sp { /* スマホメニュー内のエントリーボタン */
    display: inline-block;
    padding: 15px 30px;
    background-color: #ff9999;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 30px; /* メニュー項目との間隔 */
    transition: background-color 0.3s ease;
}

.button-large-sp:hover {
    background-color: #ff6666;
}

/** -----------------------------------
    メインビジュアル
-------------------------------------**/
#mainvisual {
    /* 横幅を画面いっぱいに広げる */
    width: 100%;
    /* 高さをヘッダー分（70px）減らして指定 */
    height: calc(100vh - 70px); /* ヘッダーの高さを考慮 */
    /* 背景画像を配置 */
    background-image: url("../images/mainvisual-pc.jpg");
    /* 背景画像が常に縦横比を維持したまま前面を覆うようにサイズ指定 */
    background-size: cover;
    /* 背景画像が常に中央に配置されるように指定 */
    background-position: center center;
    /* 背景画像が繰り返さないように指定 */
    background-repeat: no-repeat;
    /* 子要素を絶対配置するために必要 */
    position: relative;
    /* 余分なスクロールバーが出ないように */
    overflow: hidden;
}

/* 文字を配置するエリアのコンテナ */
.mainvisual-text-area {
    position: absolute; /* 親要素(#mainvisual)を基準に配置 */

    /* 右下からの位置を指定 */
    right: 8%; /* 右端から12%の位置を8%に変更 */
    bottom: 12%; /* 下端から12%の位置 */
    width: 40%; /* 文字の幅を調整 (親要素の#mainvisualに対する割合) */
    max-width: 400px; /* 必要に応じて最大幅を設定 */

    /* 文字が右寄せになるように調整 */
    text-align: right;
}

/* 文字の画像自体 */
.mainvisual-text {
    width: 100%; /* 親要素(text-area)の幅いっぱいに表示 */
    height: auto; /* 縦横比を維持 */
    display: block; /* インライン要素からブロック要素に変更し、余分なスペースをなくす */
}

/** -----------------------------------
    コンセプト
-------------------------------------**/
#concept{
    padding-bottom: 100px;/* 下部のパディングを増やす */
    /* 横幅を画面いっぱいに広げる */
    width: 100%;
    background-image: url("../images/concept.png");
    background-position: center 25px; /*水平方向は中央に保ち、垂直方向は上端から20ピクセル下に画像を配置*/
    /* 背景画像が繰り返さないように指定 */
    background-repeat: no-repeat;
    background-size: 900px auto; /* 片方だけ指定してアスペクト比を維持: */
}

/* 見出しを中央寄せに設定 */
#concept h2.large {
    margin-bottom: 30px; /* 「私たちについて」の下に空白を追加 */
    text-align: center;
}

#concept-caption {
    text-align: left; /* 文字を左揃えにする */
    margin-left: 220px; /* 本文全体に対し左側の余白 */
    padding: 0 20px;
}


/* 最初の行「世界を、やさしさでつつむ。」のスタイル */
.first-line {
    display: block; /* spanをブロック要素にして、独立した行として扱う */
    font-weight: bold; /* 太字に */
    margin-bottom: 0.01em; /* その下のテキストとの間に空白を入れる */
}

/* 「取り組んできました。」までのブロック */
.text-block-1 {
    display: block; /* spanをブロック要素にして、独立した行として扱う */
    margin-bottom: 0.01em; /* 次のブロック「また、これからは〜」との間に空白を入れる */
}

/* 「創り出していくことがわたしたちの使命だと考えています。」までのブロック */
.text-block-2 {
    display: block; /* spanをブロック要素にして、独立した行として扱う */
    margin-bottom: 0.01em; /* 「もっともっと〜」の前の半分の余白 */
}

/* 最後の行「もっともっとやさしさでつつまれる世界を目指して。」のスタイル */
.last-line-text {
    display: block; /* spanをブロック要素にして、独立した行として扱う */
}


/** -----------------------------------
    事業内容
-------------------------------------**/
#company {
    /* 背景画像*/
    background-image: url("../images/company-background.png"); 
    background-size: cover; /* セクション全体を覆うように画像を拡大縮小 */
    background-position: center center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像の繰り返しをなしにする */

    /* 既存のスタイル */
    padding: 40px 0 56px 0; 
}

/* 事業内容セクション全体の「事業内容」見出しを中央寄せにする */
#company .section-inner h2.large {
    text-align: center;
}

/* 事業内容セクション全体の導入文を中央寄せにする */
#company .section-inner p.medium {
    text-align: center;
    margin-bottom: 40px; /* 説明文の下に余白を追加 */
}

/* 事業内容セクション内の各アイテム内の見出しをh3.largeに修正します。 */
#company .col-2 .item h3.large {
    margin-top: 50px; /* 01、02、03の見出し上に余白を追加*/
    margin-bottom: 15px; /* 見出しの下に少し余白を追加 */
    text-align: left; /* テキストを左寄せに統一 */
}

#company .col-2 .item p.medium {
    margin-bottom: 0px;
    text-align: left; /* テキストを左寄せに統一 */
}

/* 事業内容の数字のスタイル */
.business-number {
    color: #ff9999; /* ピンク色に設定 */
    font-size: 2em; /* 親要素の h3.large よりも2倍大きく */
    margin-right: 15px; /* 数字とテキストの間に少しスペースを開ける */
}

#company .col-2 .item img {
    display: block; /* 画像をブロック要素にし、必要であれば中央寄せや余白調整をしやすくする */
    max-width: 100%; /* 親要素に合わせて画像を調整 */
    height: auto; /* 縦横比を維持 */
}

/* .col-2 の Flexbox 設定を調整 */
.col-2 {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* 最も高いアイテムの高さに他のアイテムも揃える */
    /* 各事業内容ブロック間の縦の余白を調整 */
    margin-bottom: 50px; /*各ブロックの下に余白を追加 */
}

/* 各 .col-2 .item 自体を Flex コンテナにして、その中のコンテンツの配置を制御 */
.col-2 .item {
    width: calc((100% - 24px)/2);
    justify-content: flex-start; /* item の中身を上端に揃える */
}


/** -----------------------------------
    メンバー紹介
-------------------------------------**/

/* 見出しと本文を中央寄せに設定   */
#member h2.large {
    text-align: center;
}

#member p.medium {
    text-align: center;
    margin-bottom: 40px; /* Slickスライダーとの間に余白を追加 */
}

/* Slickスライダーコンテナ全体のスタイル */
.member-slider-container {
    width: 100%; /* 親要素の幅いっぱいに */
    margin: 0 auto; /* 中央寄せ */
    padding: 0 20px; /* 左右に余白を設定して、カードが端に寄りすぎないように */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

/* Slickスライダー本体 (member-slider-container内の.sliderクラス) */
.slick-list {
    margin: 0 -10px; /* カード間の余白と相殺するためのネガティブマージン */
}

.slick-slide {
    margin: 0 10px; /* 各スライド（カード）間の左右の余白 */
}

/* メンバーカードのスタイル */
.member-card {
    text-align: center;
    padding: 10px; /* 必要に応じて調整 */
    box-sizing: border-box;
}

/* 新しいラッパー要素のスタイル */
.member-image-wrap {
    position: relative; /* 擬似要素の基準 */
    overflow: hidden; /* オーバーレイがはみ出さないように */
    border-radius: 8px; /* 画像の角丸に合わせる */
}

/* 画像に適用されるスタイル */
.member-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* 角丸にする */
    margin-bottom: 10px;
    /* 淡い黄色の影 (周囲全体に) */
    box-shadow: 0px 0px 15px rgba(255, 255, 204, 0.7);
    transition: transform 0.3s ease-in-out; /* ホバーエフェクトと組み合わせる場合 */
}

/* ホバーで拡大 */
.member-card img:hover {
    transform: scale(1.05); /* 5%拡大 */
}

/* オーバーレイのスタイル */
.member-image-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 153, 153, 0); /* 初期は透明なピンク */
    border-radius: 8px;
    transition: background-color 0.3s ease-in-out;
    pointer-events: none; /* 下の画像をクリックできるようにする */
}

/* ホバー時のオーバーレイ */
.member-image-wrap:hover::before {
    background-color: rgba(255, 153, 153, 0.3); /* ホバーで半透明のピンクに */
}


.member-card h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.member-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 0;
}

/* Slickのナビゲーションドットのスタイル */
.slick-dots {
    text-align: center;
    margin-top: 30px;
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots li button {
    font-size: 0; /* テキスト非表示 */
    line-height: 0;
    display: block;
    width: 12px;
    height: 12px;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #ff9999; /* ドットの枠線 */
    border-radius: 50%;
    background: transparent; /* 背景透明 */
    outline: none;
}

.slick-dots li.slick-active button {
    background: #ff9999; /* アクティブなドットの背景色 */
}

/* Slickの矢印（Prev/Next）のスタイル */
.slick-prev, .slick-next {
    font-size: 0; /* テキスト非表示 */
    line-height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 30px;
    height: 30px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: url("../images/arrow.png") no-repeat center center; /* 矢印画像を適用 */
    background-size: contain;
    z-index: 10;
}

.slick-prev {
    left: 0px; /* 左端に配置 */
    transform: translateY(-50%) rotate(180deg); /* 左向きにするために回転 */
}

.slick-next {
    right: 0px; /* 右端に配置 */
}

@media screen and (max-width: 768px) {
    .member-slider-container {
        padding: 0 10px; /* スマホでは左右の余白を少し減らす */
    }
}


/** -----------------------------------
    働く環境
-------------------------------------**/
/* 見出しと本文を中央寄せに設定   */
#environment h2.large {
    text-align: center;
}

#environment p.medium {
    text-align: center;
}

/* -----------------------------------------------
    働く環境の項目
------------------------------------------------*/
#environment {
    background-color: #fffaf0; 
    padding: 60px 0; 
}

.environment-items {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 30px; /* アイテム間の間隔 */
    margin-top: 50px; /* 本文からの上部の余白 */
    flex-wrap: wrap; /* 必要に応じて折り返す */
}

.environment-item {
    flex: 1; /* 等しい幅で並ぶように */
    min-width: 280px; /* 最小幅を設定して小さくなりすぎないように */
    max-width: 30%; /* 各アイテムの最大幅 */
    text-align: center;
    padding: 20px;
    background-color: #fff; /* 背景色 */
    border-radius: 10px; /* 角丸 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* 軽い影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.environment-item:hover {
    transform: translateY(-5px); /* ホバーで少し浮き上がる */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 影を濃くする */
}

.environment-icon {
    width: 60px; /* アイコンのサイズ */
    height: 60px;
    margin-bottom: 20px; /* アイコン下の余白 */
}

.environment-item h3.small {
    margin-bottom: 10px; /* 見出し下の余白 */
    font-size: 1.1em; /* 少し大きめのフォントサイズ */
}

.environment-item p.small {
    font-size: 0.9em; /* 説明文のフォントサイズ */
    line-height: 1.5;
    color: #666;
}

/** -----------------------------------
    FAQ
-------------------------------------**/
/* 見出しを中央寄せに設定   */
#faq h2.large {
    text-align: center;
}

/* FAQのテキスト中央寄せ */
.faq-head p.medium,
.faq-body p.medium {
    text-align: left; /* FAQのテキストは左寄せに戻す */
}

.faq {
    border-radius: 8px;
    margin-bottom: 20px;
}

.faq-head, .faq-body {
    border-radius: 8px;
    padding: 20px 30px;
}

.faq-head {
    /* position配置の基準とする */
    position: relative;
    background-color: rgba(250, 231, 160, 0.5); /* 質問文の背景色 */
    border-radius: 8px; /* 角丸を維持 */
    padding: 20px 30px;
    cursor: pointer; /* マウスオーバー時にカーソルを指マークにする */
}

.faq-body {
    background-color: rgba(255, 243, 196, 0.5); /* 回答文の背景色 */
    border-radius: 0 0 8px 8px; /* 下部のみ角丸に（質問部分と繋がるように） */
    padding: 20px 30px;
    /* 初期状態では非表示にするため、JavaScriptで control する */
    display: none; /* 初期状態では非表示 */
}

/* 質問がアクティブ（開いている）時の矢印の回転 */
.faq-head.is-active::after {
    transform: rotate(180deg); /* 矢印を180度回転 */
}

.faq-head::after {
    content: "";
    /* ブロック表示にする */
    display: block;
    /* arrow画像を背景画像として配置する */
    background-image: url("../images/arrow.png");
    background-size: contain;
    width: 24px;
    height: 24px;

    /* 上下は中央に、右から24pxになるように配置する */
    position: absolute;
    top: 0;
    bottom: 0;
    right: 24px;
    margin: auto;
}

/** -----------------------------------
    募集要項
-------------------------------------**/
/* 見出しと本文を中央寄せに設定   */
#recruit h2.large {
    text-align: center;
}

#recruit p.medium {
    text-align: center;
}

/* -----------------------------------------------
    募集職種セクション
------------------------------------------------*/
#recruit-positions {
    padding: 40px 0 56px 0; /* 募集要項セクションと共通のパディング */
    background-color: #fff7f7; /* 背景色をヘッダー・フッターと合わせる */
}

#recruit-positions .section-inner h2.large {
    text-align: center; /* 見出しを中央寄せ */
    margin-bottom: 40px; /* 見出し下の余白 */
}

.position-buttons {
    display: flex;
    flex-wrap: wrap; /* ボタンが折り返すように設定 */
    justify-content: center; /* ボタンを中央寄せ */
    gap: 20px; /* ボタン間の間隔 */
    max-width: 700px; /* ボタン群の最大幅 */
    margin: 0 auto; /* 中央寄せ */
}

.position-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 10px); /* 2列表示で、gapの半分を考慮 */
    max-width: 300px; /* 各ボタンの最大幅 */
    height: 60px; /* ボタンの高さ */
    background-color: #ffe6e6; /* やや薄いピンクの背景色 */
    color: #555;
    text-decoration: none;
    border-radius: 12px; /* 角丸の度合い */
    font-size: 1.2em; /* フォントサイズ */
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */
}

.position-button:hover {
    background-color: #ffcccc; /* ホバー時の色を少し濃く */
    transform: translateY(-3px); /* わずかに浮き上がるアニメーション */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 影を強調 */
}

.position-button .position-title {
    white-space: nowrap; /* テキストが改行されないように */
    padding: 0 10px; /* テキストと端の間の余白 */
}

/* カスタマーサポートボタンのみ1列にするためのスタイル */
.position-button.position-single {
    width: 100%; /* 幅を100%にする */
    max-width: 300px; /* 単独表示の場合も最大幅を制限 */
    margin-top: 20px; /* 上部に余白を追加 */
}


/** -----------------------------------
    CTA
-------------------------------------**/
/* 見出しを中央寄せに設定   */
#cta h2.large {
    text-align: center;
}

#cta p.large {
    text-align: center;
}

/* CTAセクションの最後の行に余白を追加 */
#cta p.cta-last-line {
    margin-top: 20px; 
}

#cta {
    width: 100%;
    /* 上下に透明から色へのグラデーションを重ねる */
    /* 上から下へ透明(rgba(255,255,255,0))から背景色に近い色(rgba(255,247,247,0.7))へのグラデーション*/
    background: linear-gradient(to bottom, rgba(255,247,247,0.7) 0%, rgba(255,247,247,0) 20%, rgba(255,247,247,0) 80%, rgba(255,247,247,0.7) 100%),
                url("../images/cta-bg-pc.png"); /* 既存の背景画像 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #555;
    padding: 90px 0;
}

/* CTAセクションのボタン */
.button-large {
    display: block; /* ブロック要素にして幅を広げる */
    width: 300px; /* ボタンの幅 */
    max-width: 80%; /* レスポンシブ対応 */
    margin: 40px auto 0 auto; /* 中央揃えと上部のマージン */
    padding: 15px 30px;
    background-color: #ff9999; 
    color: #fff;
    text-decoration: none;
    border-radius: 100vh; /* 角丸 */
    font-size: 20px; /* フォントサイズ */
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}

.button-large:hover {
    background-color: #fbbb82;
}


/** -----------------------------------
    フッター
-------------------------------------**/
#footer {
    /* リンクを中央に寄せる */
    text-align: center;
    padding: 40px 0;
    margin-top: 0px;
}

#footer a {
    /* リンクの色を白色にする */
    color: #555;
    /* 下線を消す */
    text-decoration: none;
}

.footer-link li {
    /* リストを横並びにする */
    display: inline;
    margin-right: 20px;
}

.footer-link, .copyright {
    font-size: 15px;
}

.copyright {
    /* コピーライトの色を白色にする */
    color: #555;
}


/** -----------------------------------------------
    メディアクエリ (PC, Tablet, Smartphone)
------------------------------------------------**/

/* -----------------------------------------------
    Tablet / Small Laptop : 画面の横幅が1150pxまで (PCナビゲーションを非表示、ハンバーガーメニューを表示)
------------------------------------------------*/
@media screen and (max-width: 1150px) {
    /* PC用のナビゲーションを非表示 */
    .gnav-pc-wrap {
        display: none;
    }

    /* ハンバーガーメニューボタンを表示 */
    #menu-button {
        display: block;
    }

    /* ヘッダーのロゴの右側がボタンに近くなるように調整 */
    .header-logo {
        flex-grow: 1; /* ロゴが利用可能なスペースを占有 */
    }
    .header-logo img {
        padding-right: 0; /* ロゴ画像の右の余白をなくす */
        margin-right: 15px;
    }
    .recruit-site-text {
        margin-right: 20px; /* 「採用サイト」の文字とハンバーガーボタンの間に余白 */
        margin-left: 15px;
    }

    /* メインビジュアルの高さ調整（ヘッダーは固定高のまま） */
    #mainvisual {
        height: calc(100vh - 70px);
    }
}


/* -----------------------------------------------
    Smartphone : 画面の横幅が768pxまで (既存のスマホ調整 + mainvisualの調整)
------------------------------------------------*/
@media screen and (max-width: 768px) {
    #header {
        height: 60px;
        padding: 0;
    }

    #header .header-logo { /* h1ではなくheader-logoクラスを使う */
        /* スマートフォンでのロゴの幅を調整 */
        max-width: 180px; /* 必要に応じて調整 */
        height: auto;
        padding-left: 20px; /* 左側に余白を追加 */
    }
    
    .recruit-site-text {
        font-size: 14px; /* スマホでのフォントサイズ調整 */
        margin-right: 15px; /* スマホでの右余白調整 */
    }

    /* メインビジュアルの高さ調整（ヘッダーは固定高のまま） */
    #mainvisual {
        height: calc(100vh - 60px); /* スマホヘッダーの高さに合わせ調整 */
    }
    /* メインビジュアルの背景画像をスマホ用に変更 */
    #mainvisual {
        background-image: url("../images/mainvisual-sp.png");
    }

    /* メインビジュアルのテキストエリアの調整 */
    .mainvisual-text-area {
        display: block; /* 中央寄せのためにブロック要素にする */
        width: 80%; /* スマホでの文字の幅を調整 */
        margin-left: auto; /* 左マージンを自動調整 */
        margin-right: auto; /* 右マージンを自動調整 */
        max-width: 300px; /* スマホでの最大幅を設定 */
        height: auto;
        bottom: 7%; /* 下端からの位置を調整 */
    }

    /* 複数セクション共通のパディング調整 */
    #concept, #company, #member, #environment, #faq, #recruit, #recruit-positions { /* #recruit-positions を追加 */
        padding: 30px 0 40px 0; /* 上下左右のパディングを調整 */
    }

    .section-inner {
        padding: 0 20px; /* 左右にパディング */
        box-sizing: border-box; /* パディングを含めて幅を計算 */
    }

    h2.large {
        font-size: 1.3em; /* スマホでのh2サイズ調整 */
        margin-bottom: 12px;
    }

    h3.large {
        font-size: 1.1em; /* スマホでのh3サイズ調整 */
    }

    p.large {
        font-size: 16px; /* スマホでのp.largeサイズ調整 */
    }

    p.medium {
        font-size: 14px; /* スマホでのp.mediumサイズ調整 */
    }

    .col-2 {
        flex-direction: column; /* スマホでは縦並びにする */
    }

    .col-2 .item {
        width: 100%; /* スマホでは幅を100%にする */
        margin-bottom: 30px; /* アイテム間の余白 */
    }

    .col-2 .item:last-child {
        margin-bottom: 0; /* 最後のアイテムの下部余白をなくす */
    }

    /* 事業内容セクション内の見出しとテキストの調整 */
    #company .col-2 .item h3.large {
        margin-top: 30px; /* スマホでの見出し上余白調整 */
        text-align: center; /* スマホでは中央寄せ */
    }
    #company .col-2 .item p.medium {
        text-align: center; /* スマホでは中央寄せ */
    }
    .business-number {
        font-size: 1.8em; /* スマホでの数字サイズ調整 */
    }

    /* 事業内容の画像アイテムの余白を調整 */
    #company .col-2 .item.image-item {
        margin-top: 20px; /* 画像の上部に余白 */
    }

    /* フォトブックセクションの並び順調整 (画像とテキストの順をPCと逆にする) */
    .photobook-section {
        flex-direction: column-reverse; /* スマホで並び順を逆にする */
    }

    /* コンセプトセクションの背景画像とパディング調整 */
    #concept {
        padding-bottom: 60px; /* スマホでの下部パディング調整 */
        background-image: url("../images/concept-sp.png"); /* スマホ用背景画像 */
        background-size: cover; /* 背景画像の表示方法。必要に応じて調整 */
        background-position: center 20px; /* スマホでの位置調整 */
        background-size: auto; /* スマホでのサイズ調整 */
        min-height: 200px;
        background-repeat: no-repeat;
    }

    /* コンセプトのテキスト調整 */
    #concept-caption {
        padding: 0 15px; /* さらに左右のパディングを狭くする */
        margin-left: 0; /* スマホでは左マージンを0にする */
        text-align: left; /* スマホでも左揃えにする */
        /* スマホでの行間の調整 */
        line-height: 1.8; /* 行間を少し広げて読みやすくする */
    }
    #concept-caption .first-line,
    #concept-caption .text-block-1,
    #concept-caption .text-block-2,
    #concept-caption .last-line-text {
        font-size: 15px; /* フォントサイズを調整（元のp.large:16pxに対し、少し小さめに） */
        line-height: 1.7; /* 各ブロック内の行間 */
        text-align: left; /* 各テキストブロックも左揃えにする */
        margin-bottom: 1em; /* 各テキストブロック間に十分な余白を設定 */
    }
    /* スマホで段落の途中の改行タグを非表示にする（既に設定済み） */
    #concept-caption br {
        display: none;
    }

    /* CTAセクションのパディングとボタンの調整 */
    #cta {
        padding: 60px 0; /* スマホでのパディング調整 */
    }
    .button-large {
        width: 90%; /* スマホでのボタン幅調整 */
        font-size: 18px; /* スマホでのボタンフォントサイズ調整 */
    }

    /* フッターのリンクリストの調整 */
    .footer-link li {
        display: block; /* スマホでは縦並びにする */
        margin-right: 0;
        margin-bottom: 10px; /* 縦並びになった時の間隔 */
    }
    .footer-link li:last-child {
        margin-bottom: 0;
    }
    .footer-link, .copyright {
        font-size: 13px; /* スマホでのフォントサイズ調整 */
    }

    /* -----------------------------------------------
        メディアクエリ (Smartphone: 募集職種セクション)
    ------------------------------------------------*/
    .position-buttons {
        flex-direction: column; /* スマートフォンでは縦1列に */
        gap: 15px; /* ボタン間の間隔 */
        padding: 0 20px; /* 左右に余白 */
    }

    .position-button {
        width: 100%; /* 幅を100%にする */
        max-width: none; /* 最大幅の制限をなくす */
        height: 70px; /* スマホでのボタンの高さ */
        font-size: 1.1em; /* スマホでのフォントサイズ */
    }

    /* スマートフォンではposition-singleのmargin-topを調整 */
    .position-button.position-single {
        margin-top: 0; /* スマホでは特別なマージンは不要 */
    }

    /* -----------------------------------------------
        メディアクエリ (Smartphone: 働く環境の項目)
    ------------------------------------------------*/
    .environment-items {
        flex-direction: column; /* スマートフォンでは縦並び */
        gap: 20px; /* アイテム間の間隔 */
        margin-top: 30px; /* スマホでの上部の余白 */
        padding: 0 20px; /* 左右の余白 */
    }

    .environment-item {
        width: 100%; /* 幅を100%に */
        max-width: none; /* 最大幅の制限をなくす */
        min-width: unset; /* 最小幅の設定を解除 */
        padding: 15px; /* パディングを調整 */
    }

    .environment-icon {
        width: 50px; /* スマホでのアイコンサイズ */
        height: 50px;
        margin-bottom: 15px;
    }
}
/* -----------------------------------
    moreボタンのスタイル (最終調整：常に右寄せ)
-------------------------------------*/
.more-button {
    display: inline-flex; /* Flexboxでテキストと矢印を横並びにする */
    align-items: center; /* 縦方向中央揃え */
    padding: 8px 0; /* 上下のパディングを少し調整 */
    background-color: transparent; /* 背景色を透明にする */
    color: #333; /* テキストの色 */
    text-decoration: none; /* 下線を削除 */
    font-weight: bold;
    transition: transform 0.2s ease-in-out; /* ホバーアニメーション */
    margin: 20px 0 0 auto; /* 上マージンを調整、右に寄せるために左マージンをauto、右マージンを0に */
    padding-right: 25px; /* 矢印分の右パディングを追加 */
    position: relative; /* 矢印の絶対配置の基準とする */
    border-radius: 0; /* 角丸をなくす */
    box-shadow: none; /* 影をなくす */
    width: auto; /* 幅を内容に合わせて自動調整 */
}

.more-button:hover {
    transform: translateX(5px); /* ホバーで少し右に動かす */
    background-color: transparent; /* ホバー時も背景は透明 */
    box-shadow: none; /* ホバー時も影はなし */
}

.more-button .text-more {
    font-family: sans-serif; /* シンプルなサンセリフフォントに変更 */
    font-size: 16px; /* フォントサイズを調整 */
    letter-spacing: 0.05em; /* 文字間隔を調整 */
    color: #333; /* テキストの色 */
}

/* 矢印の作成 */
.more-button::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: translateY(-50%) rotate(45deg); /* 矢印の形に */
    transition: transform 0.2s ease-in-out; /* ホバーアニメーション */
}

.more-button:hover::after {
    transform: translateY(-50%) translateX(3px) rotate(45deg); /* ホバーで少し右に動かす */
}

/* moreボタンを右寄せにするためのコンテナ */
.more-button-container {
  display: flex; /* Flexboxを有効にする */
  justify-content: flex-end; /* 子要素を右端に寄せる */
  margin-top: 30px; /* 必要に応じて上部の余白を調整 */
}

/* （既存の.more-buttonのスタイルはそのまま維持） */
.more-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #fff; /* 例: ボタンの背景色 */
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.more-button .text-more {
  text-decoration: underline; /* ここを追加 */
  text-underline-offset: 4px; /* 下線とテキストの間に少し隙間を作る（任意） */
}

/* スマートフォン向けの調整 */
@media screen and (max-width: 768px) {
    .more-button {
        /* スマホでも右寄せを維持 */
        margin: 20px 0 0 auto; /* 上マージンを調整、右に寄せるために左マージンをauto、右マージンを0に */
        padding-right: 20px; /* パディング調整 */
    }

    .more-button::after {
        right: 0; /* 右端に配置 */
    }

    /* スマートフォンでもテキストを右寄せに */
    .more-button .text-more {
        text-align: right; 
    }
}