/* 共通スタイル */
body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
	/* 通常時もリンク時もこの画像にしたい場合 */
  cursor: url("../img/cousor.png"), auto;
}

/* リンク hover 時だけ pointer アイコンっぽい形にしたいんやったら */
a:hover {
  /* ファイル名のスペル間違いに注意！ */
  cursor: url("../img/cousor.png"), pointer;
}

a {
    text-decoration: none;
    color: white;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body, html {
    overflow-x: hidden;
}


/* 全てのスクロールバーに適用 */
*::-webkit-scrollbar {
    width: 8px; /* スクロールバーの幅 */
    height: 8px; /* 横スクロールバーの高さ */
}

*::-webkit-scrollbar-thumb {
    background-color: #cc0033;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* 内側に影をつける */
	transition: background-color 0.3s ease-in-out;
}

*::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #f1f1f1, #ffffff);
}

/* Firefoxのためのスクロールバー設定 */
* {
    scrollbar-width: thin;
    scrollbar-color: #cc0033 #f1f1f1; /* つまみとトラックの色 */
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #ff3366; /* ホバー時に色を少し明るくする */
    transition: background-color 0.3s ease;
}

@media (max-width: 768px) {
    *::-webkit-scrollbar {
        width: 6px; /* スマホでは少し狭く */
    }
}

@media (min-width: 769px) {
    *::-webkit-scrollbar {
        width: 12px; /* PCでは少し太めに */
    }
}

/* ヘッダー */
.header {
    background-color: #cc0033;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    z-index: 1000; /* 高いレイヤーに設定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.header.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ヘッダーがスクロール時に丸くなって浮くスタイル */
.header.scrolled {
    border-radius: 20px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    margin:  0 auto;
	margin-top: 20px;
    max-width: 1200px;
    width: 90%;
    transition: all 0.3s ease; /* スムーズなアニメーション */
}

.header__logo img {
    height: 50px;
}

.header__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header__nav ul {
    display: flex;
    gap: 20px;
}

.header__nav ul li a {
    color: white;
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease;
}

.header__nav ul li a:hover {
    color: #ffcccc;
}

.header__links {
    display: flex;
    gap: 10px;
}

.header__button {
    background-color: #ffffff;
    color: #cc0033;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.header__button:hover {
    background-color: #ffcccc;
    transform: scale(1.05);
}

/* ハンバーガーメニューのスタイル */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    position: relative;
    z-index: 1001; /* メニューのボタンはヘッダーより上 */
    background-color: #cc0033; /* 背景色をつけて丸みがわかりやすいように */
    border-radius: 0 0 10px 10px; /* 両方下を丸くする */
}

.hamburger-menu div {
    width: 100%;
    height: 3px;
    margin-top: 5px;
    background-color: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
}

.hamburger-menu.active div:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
}

.hamburger-menu.active div:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active div:nth-child(3) {
    transform: rotate(-45deg);
    top: -10px;
}

/* メニューが表示されたときのスタイルに丸みを追加 */
.header__nav--mobile {
    background-color: #cc0033;
    padding: 20px;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    max-height: 0; /* 初期状態の高さを0に */
    overflow: hidden; /* 要素が見えないように */
    opacity: 0;
    transform-origin: top;
    transition: max-height 0.5s ease, opacity 0.3s ease; /* 高さと透明度にアニメーションを追加 */
    border-radius: 0 0 20px 20px; /* 両方下に丸みを追加 */
}

.header__nav--mobile.open {
    max-height: 500px; /* 開いたときの高さを指定（適宜調整してください） */
    opacity: 1; /* 表示されるように */
}

.header__nav--mobile ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.header__nav--mobile ul li a {
    color: white;
    font-size: 18px;
    font-weight: bold;
    transition: color 0.3s ease;
}

/* ハンバーガーメニューの表示を制御 */
.hamburger-menu {
    display: none; /* 初期状態で非表示 */
}



@media (max-width: 768px) {
    .hamburger-menu {
        display: flex; /* スマホ表示時のみ表示 */
    }

    .header__nav,
    .header__links {
        display: none; /* スマホ表示時は通常のナビゲーションを非表示 */
    }

    .header__nav--mobile.open {
        display: block; /* モバイル用のナビゲーションを表示 */
    }
	
	/* ヘッダーがスクロール時に丸くなって浮くスタイル */
	.header.scrolled {
		margin-top: 0px;
    }
}

#red-line {
    position: absolute; /* 要素を絶対配置 */
    top: 0; /* ページのトップに配置 */
    left: 0; /* ページの左端から開始 */
    height: 6px; /* ラインの高さを設定 */
    background-color: #cc0033; /* ラインの色を赤に設定 */
    width: 100%; /* 初期状態で幅を100%に設定 */
    display: block; /* 確実に表示されるようにする */
    opacity: 1; /* ラインが確実に表示されるようにする */
}

/* アニメーションの定義 */
@keyframes expandLine {
    to {
        width: 100%; /* アニメーション終了時に幅を100%に */
    }
}

/*TOPの画像*/

.infinite-slider {
    width: 100%;
    overflow: hidden; /* スライダー外の画像が見えないように */
    position: relative;
	padding-top: 110px;
	padding-bottom: 80px;
	background-color: #1D3D5E;
}

.slider-track {
    display: flex;
    width: 200%; /* スライダー内のアイテムがすべて表示されるように */
}

.slider-item {
    flex: 0 0 auto;
    margin-right: 20px;
    width: 600px;
    height: 600px;
    overflow: hidden;
    position: relative;
}

/* 各画像に対する上下のばらつき */
.slider-item:nth-child(1) {
    margin-top: 20px; /* 画像1に対するマージン調整 */
}

.slider-item:nth-child(2) {
    margin-top: 60px; /* 画像2に対するマージン調整 */
}

.slider-item:nth-child(3) {
    margin-top: 40px; /* 画像3に対するマージン調整 */
}

.slider-item:nth-child(4) {
    margin-top: 80px; /* 画像4に対するマージン調整 */
}

.slider-item:nth-child(5) {
    margin-top: 30px; /* 画像5に対するマージン調整 */
}

.slider-item:nth-child(6) {
    margin-top: 50px; /* 画像6に対する調整 */
}

/* 同様に他の画像にも異なるマージンを設定 */

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を中央でトリミング */
    object-position: center; /* 画像の中央部分を表示 */
    border-radius: 60px; /* 画像に少し丸みをつける */
}

/* スマホ版の表示用調整 */
@media (max-width: 768px) {
   .slider-item {
    width: 250px;
    height: 250px;
    }
	
	.slider-item img {
    border-radius: 20px; /* 画像に少し丸みをつける */
	}
	
	.infinite-slider {
   
	padding-top: 80px;
	padding-bottom: 50px;
	
	}
}



/* オーバーレイのテキスト (PC版) */
.overlay-text {
    position: absolute;
    bottom: 110px; /* ここで下からの距離を調整 */
    left: 90px;
}

.overlay-text__box {
    display: block;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    width: fit-content;
}

.overlay-text__box p {
    margin: 0;
    color: black;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.4;
}

.overlay-text--pc {
    display: block;
}

/* センター表示と背景色を設定 (スマホ版) */
.mobile-overlay-text {
    display: none;
    text-align: center; /* テキストを中央揃え */
    margin: 0 auto; /* セクション自体をセンターに配置 */
}

@media (max-width: 768px) {
    .overlay-text--pc {
        display: none; /* PC版を非表示 */
    }

     .mobile-overlay-text {
        display: block;
        text-align: center; /* テキストを中央揃え */
        margin: 0 auto; /* セクション自体をセンターに配置 */
		margin-top:60px;
    }

    .mobile-overlay-box {
        background-color: #cc0033; /* 背景を赤に設定 */
        color: white; /* 文字を白に設定 */
        display: inline-block; /* インラインブロックに設定 */
        padding: 5px 10px; /* パディングを小さめに調整 */
        border-radius: 5px;
        margin-bottom: 10px;
        text-align: center;
        width: 90%; /* 幅を100%に設定 */
        box-sizing: border-box; /* パディングを含めて幅を調整 */
    }

    .mobile-overlay-box p {
        margin: 0;
        font-size: 28px;
        line-height: 1.4;
        font-weight: bold;
        white-space: nowrap; /* 改行せずにテキストを1行に収める */
    }
}


/* スクロールインジケーターのスタイルを調整 */
.scroll-indicator {
    position: absolute; /* 親要素に対して絶対配置 */
    bottom: 0px; /* セクションの一番下に配置 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1000; /* 画像の上に表示されるように設定 */
}

/* 通常のスクロールインジケーターのスタイル */
.scroll-indicator {
    position: absolute; /* 親要素に相対的に配置 */
    bottom: 20px; /* セクションの下からの距離 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1000; /* 画像の上に表示されるようにZインデックスを設定 */
}

/* 矢印のスタイル */
.arrow {
    display: block;
    width: 24px;
    height: 24px;
    border-bottom: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
    transform: rotate(45deg);
    margin: 10px auto;
    animation: bounce 1.5s infinite;
}

.arrow:nth-child(2) {
    animation-delay: 0.3s;
}

.arrow:nth-child(3) {
    animation-delay: 0.6s;
}

/* 矢印のアニメーション */
@keyframes bounce {
    0% {
        transform: translateY(0) rotate(45deg);
        opacity: 1;
    }
    100% {
        transform: translateY(20px) rotate(45deg);
        opacity: 0;
    }
}

/* スマホ用のスクロールインジケーターのスタイル */
@media (max-width: 768px) {
    .scroll-indicator {
        position: absolute; /* スライダーセクション内に配置 */
        bottom: 20px; /* スライダーの下部に配置 */
        left: 50%;
        transform: translateX(-50%);
        z-index: 10; /* 画像の上に表示されるように */
    }

    /* 矢印の色を濃いグレーに変更 */
    .arrow {
        width: 18px;
        height: 18px;
        border-bottom: 3px solid #ffffff; /* 濃いグレー */
        border-right: 3px solid #ffffff;  /* 濃いグレー */
    }

    /* テキストの色も濃いグレーに変更 */
    .scroll-text {
        font-size: 14px;
        color: #ffffff; /* 濃いグレー */
    }
}


/* “コメント”セクションの赤いライン */
.title-bar-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 6px;
    background-color: #cc0033;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.text-title.in-view .title-bar-text {
    transform: scaleX(1);
}

.text-section h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.6;
    position: relative;
}

.text-section p {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 2.8;
}

.text-section {

    padding: 40px 20px; /* 上下40px、左右20pxの余白を追加 */
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .text-section {
        padding: 20px 10px; /* スマホ表示時の余白を調整 */
    }

    
   .text-section p {
    white-space: normal; /* 自動改行を有効にする */
    overflow-x: hidden; /* 横スクロールを無効化 */
    -webkit-overflow-scrolling: touch; /* スクロールをスムーズにする（タッチデバイス対応） */
    font-size: 18px ; /* スマホ表示時のフォントサイズを調整 */
    text-align: center; /* テキストをセンターに配置 */
    word-break: break-word; /* 長い単語を途中で改行して表示する */
}
}

@media (max-width: 768px) {
    .text-section h2 {
        font-size: 30px ;
        line-height: 1.5 ;
        word-break: break-word; /* 単語の途中での改行を許可 */
        text-align: center; /* テキストをセンターに配置 */
    }

    .text-section h2::after {
        content: "きっと明るい";
        display: block; /* 改行を追加 */
        text-align: center; /* 改行されたテキストもセンターに配置 */
    }

    .text-section h2 span {
        display: none; /* "きっと明るい"を一度非表示にして、カスタム改行を追加 */
    }

    .text-section {
        text-align: center; /* セクション全体のテキストをセンターに配置 */
    }
}

/* セクション全体のスタイル */

.press-release-section-margin {
    margin-top: 100px;   
}

.press-release-section-custom {
    padding: 10px 20px;
    background-color: #f9f9f9;
    max-width: 1200px;
    margin:  50px auto;
	
    border-radius: 10px;
}

/* セクションタイトル */
.section-title-custom {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 30px;
    text-align: left;
    color: #333;
}

/* ニュースリストのスタイル */
.press-release-list-custom,
.urgent-press-release-list-custom {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.press-release-item-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}

/* 日付のスタイル */
.release-date-custom {
    font-size: 20px;
    font-weight: 600;
    color: #555;
    width: 120px;
	white-space: nowrap;
}

/* タイトルのスタイル */
.release-title-custom {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    flex: 1;
    margin-left: 20px;
    position: relative;
}

/* 新着ラベル */
.new-label {
    background-color: #cc0033;
    color: white;
    font-weight: bold;
    font-size: 12px;
    padding: 3px 8px;
    margin-left: 10px;
    border-radius: 3px;
    display: inline-block;
}

/* 画像・PDFラベル */
.image-label, .pdf-label {
    background-color: #ffcc00;
    color: black;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 5px;
    margin-left: 10px;
    border-radius: 3px;
    display: inline-block;
}

.view-all-button {
    display: block;
    text-align: right;
    margin-top: 20px;
    text-decoration: none;
    font-weight: 700;
    color: #cc0033;
    font-size: 18px;
    transition: color 0.3s ease;
}

.view-all-button:hover {
    color: #ff3366;
}


/* ボタンスタイル */
.detail-button-custom {
    padding: 8px 16px;
    background-color: #cc0033;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.detail-button-custom:hover {
    background-color: #ff3366;
}

/* ビューモアボタンのスタイル */
.view-all-button {
    display: block;
    text-align: right;
    margin-top: 20px;
    text-decoration: none;
    font-weight: 700;
    color: #cc0033;
    font-size: 18px;
    transition: color 0.3s ease;
}

.view-all-button:hover {
    color: #ff3366;
}


/* モーダル内のリンクのスタイル */
.modal-content a {
    color: #007BFF; /* リンクの文字色を青に設定 */
    text-decoration: underline; /* リンクに下線を追加 */
}

/* リンクにマウスをホバーしたときのスタイル */
.modal-content a:hover {
    color: #0056b3; /* ホバー時にリンクの色を少し濃い青に変更 */
}

/* =========================
   newsModal 専用の追加デザイン
   ========================= */

/* 
  既存 .modal-content-common は他モーダルでも使われとるから直接変更せず、
  #newsModal 下だけデザインを追加・上書きする 
*/
#newsModal .modal-content-common {
    /* 必要なら枠線や背景色を追加・強調できる */
    border: 2px solid #e6e6e6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background-color: #fff; /* 既にあるなら上書きされる */
    /* ↓ transform/opacity/transition は既存のアニメを壊さないようそのまま */
    /* 追加で余白や角丸を調整可能 */
}

/* 見出しタイトルをおしゃれに */
#newsModal .modal-title {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    color: #cc0033;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd; /* 下線 */
    padding-bottom: 10px;
}

/* 本文をカード風に */
#newsModal .modal-description {
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ▼ newsModal専用の追加デザイン */
#newsModal .modal-date {
  font-size: 14px;
  color: #666;
  text-align: center;     /* 真ん中寄せ */
  margin-bottom: 10px;    /* 下に適度な余白 */
}

/* モーダル内の画像表示 */
.modal-image-container {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
}

.modal-image {
    max-width: 70%;
	max-height: 40%;
    border-radius: 10px;
    display: none;
}

.modal-image.active {
    display: block;
}

/* サムネイルのスタイル */
.thumbnails {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.thumbnail {
    width: 50px;
    height: 50px;
    margin-right: 5px;
	margin-bottom: 10px;
    cursor: pointer;
    border-radius: 5px;
    object-fit: cover;
}

.thumbnail:hover {
    opacity: 0.7;
}

/* スマホ対応: 768px以下 */
@media (max-width: 768px) {
  #newsModal .modal-title {
    font-size: 20px;
  }
  #newsModal .modal-description {
    font-size: 14px;
  }
  #newsModal .modal-image {
    max-width: 100%;
  }
  #newsModal .thumbnail {
    width: 50px; height: 50px;
  }
}


/*recruitバナー*/
/* RECRUITセクションのスタイル */
.recruit-section {
    background-image: url("../img/recruit.jpg"); /* 背景画像 */
    background-size: cover;
    background-position: top center;
    padding: 100px 0;
    text-align: center;
    position: relative;
    color: #fff; /* 白い文字 */
    font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif; /* 明朝体 */
}

.recruit-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* 少し暗めのオーバーレイ */
    z-index: 1;
}

.recruit-content {
    position: relative;
    z-index: 2; /* オーバーレイの上に表示 */
}

/* テキストとリンクのスタイル */
.recruit-content h2 {
    font-size: 48px;
    margin-bottom: 20px;
}

.recruit-content p {
    font-size: 24px;
    margin-bottom: 30px;
}

.recruit-link {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    background-color: #cc0033; /* 赤いボタン */
    padding: 15px 30px;
    border-radius: 5px;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.recruit-link:hover {
    background-color: #ff0033;
    transform: scale(1.05); /* ホバー時に少し大きくする */
}

.recruit-content h2, .recruit-content p {
    transition: transform 0.3s ease;
}

.recruit-content:hover h2, .recruit-content:hover p {
    transform: translateY(-10px); /* ホバー時に少し上に浮かせる */
}

/* スマホ向けのスタイル調整 */
@media (max-width: 768px) {
    .recruit-section {
        padding: 60px 0; /* スマホ向けにパディングを少し狭く */
		background-position: top center;
    }

    .recruit-content h2 {
        font-size: 32px; /* 見出しを小さく */
    }

    .recruit-content p {
        font-size: 18px; /* 説明文を少し小さく */
    }

    .recruit-link {
        font-size: 16px; /* ボタンの文字サイズを調整 */
        padding: 10px 20px; /* ボタンのサイズを小さく */
    }
    
    /* 背景画像の位置を調整（より上に寄せる） */
    .recruit-section {
        background-position: top;
    }
}


/* WORKSセクション */
.works-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 0;
    width: 100vw;
    margin: 0;
    box-sizing: border-box;
    background-color: white;
}

.works-image {
    flex: 1;
    margin-right: 20px;
    overflow: hidden;
    border-radius: 15px;
}

.works-image img {
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
    object-position: center;
    height: 60%;
}

.works-content {
    flex: 1;
    text-align: left;
    padding-right: 20px;
}

.works-title {
    position: relative;
    margin-bottom: 20px;
    text-align: left;
}

.title-bar-works {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 6px;
    background-color: #cc0033;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.works-title.in-view .title-bar-works {
    transform: scaleX(1);
}

.works-content h2 {
    font-size: 86px;
    font-weight: 900;
    color: #000;
    text-align: left;
}

.works-content h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #555;
    text-align: left;
}

.works-content p {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #555;
    text-align: left;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #333;
}

@media (max-width: 768px) {
    .works-section {
        flex-direction: column;
        padding: 20px;
    }

    .works-image {
        margin-right: 0;
        margin-bottom: 20px;
    }

    .works-content {
        padding-right: 0;
    }

    .cta-button {
        display: block;
        margin: 20px auto 0;
        font-size: 30px !important;
        text-align: right !important;
        padding: 12px 24px;
    }
}


/* MEMBERセクションの全体スタイル */
.member-section {
    padding: 60px 20px;
    background-color: #edeee9; /* 薄いグレーの背景色 */
    text-align: center;
    margin: 0;
    box-sizing: border-box;
}

/* セクションタイトル */
.member-header {
    margin-bottom: 40px;
    position: relative;
}

.title-bar-member {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background-color: #cc0033;
    transform-origin: left;
    transition: transform 0.5s ease;
}


.member-header.in-view .title-bar-member {
    transform: scaleX(1);
}

.member-header h2 {
    font-size: 86px;
    font-weight: 900;
    color: #000;
}

.member-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #555;
    margin-bottom: 20px;
}

.member-description {
    font-size: 20px;
    color: #777;
    margin-top: 10px;
	margin-bottom: 60px;
}

/* メンバーリストのコンテナ */
.member-list-container {
    margin: 0 auto;
    max-width: 1200px;
}

/* メンバーリスト */
.member-list {
    display: flex;
    transition: transform 0.5s ease-in-out; /* スクロールのアニメーション */
    margin-bottom: 20px;
}

/* 各メンバー項目のスタイル */
.member-item {
    min-width: 250px; /* メンバー項目の最小幅 */
    margin-right: 40px;
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
    transition: transform 0.3s ease;
    position: relative;
}

/* 奇数メンバーを少し下に */
.member-item:nth-child(odd) {
    transform: translateY(10px);
}

/* 偶数メンバーを少し上に（上にマージンを追加） */
.member-item:nth-child(even) {
    transform: translateY(-10px);
}

.member-item:hover {
    transform: scale(1.05); /* ホバー時に少し大きくなる */
}

.member-photo {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.member-info h4 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.member-info p {
    font-size: 14px;
    color: #555;
}

/* コメント上の赤いライン */
.member-divider {
    width: 80%;
    height: 3px;
    background-color: #cc0033; /* 赤いライン */
    margin: 15px auto;
}

/* ボタンのスタイル */
.member-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.left-button, .right-button {
    background-color: #cc0033;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.left-button:hover, .right-button:hover {
    background-color: #ff3366;
}

.view-more-button {
    background-color: #000;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    margin: 0 20px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.view-more-button:hover {
    background-color: #333;
}

/* メディアクエリ：スマホ対応 */
@media (max-width: 768px) {
    .member-header h2 {
        font-size: 48px;
    }

    .member-header h3 {
        font-size: 24px;
    }

    .member-description {
        font-size: 18px;
    }

    .member-item {
        min-width: 200px;
        margin-right: 10px;
    }

    .left-button, .right-button {
        font-size: 16px;
        padding: 8px 16px;
    }

    .view-more-button {
        font-size: 16px;
        padding: 12px 24px;
    }
	
	.member-list-container {
    max-width: 100%; /* 横幅を画面幅に応じて調整 */
    overflow: hidden; /* コンテナを超えないようにする */
	}


    /* スマホでは上下にずらさない */
    .member-item:nth-child(odd), 
    .member-item:nth-child(even) {
        transform: none;
        margin-top: 0;
    }
}


/* COMPANYセクションのスタイル */

.company-section-back{
	background-color: #5E9594;
}

.company-section {
    padding: 60px 20px;
    text-align: center;
    box-sizing: border-box;
    margin: 0 auto; /* 中央寄せ */
    max-width: 100%; /* コンテンツが画面幅を超えないようにする */
    overflow: hidden; /* 画面幅を超えた部分を隠す */
}

.company-header {
    margin-bottom: 40px;
    position: relative;
}

.title-bar-company {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background-color: #cc0033;
    transform-origin: left;
    transition: transform 0.5s ease;
}

.company-header h2 {
    font-size: 86px;
    font-weight: 900;
    color: #ffffff;
}

.company-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.company-description {
    font-size: 20px;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 60px;
}

/* 会社コンテンツのスタイル */
.company-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* スマホ対応 */
}

.company-image img {
    width: 100%;
    max-width: 600px; /* 画像の最大幅 */
    border-radius: 10px;
}

.company-text {
    max-width: 600px;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
}

.company-text h4 {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

.company-text p {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 15px;
}



.cta-button:hover {
    background-color: #ff3366;
}

/* スマホ対応スタイル */
@media (max-width: 768px) {
    .company-content {
        flex-direction: column;
    }

    .company-header h2 {
        font-size: 48px;
    }

    .company-header h3 {
        font-size: 24px;
    }

    .company-description {
        font-size: 18px;
    }

    .company-text {
        padding: 10px;
    }
}

/* SDGsセクション */
.sdgs-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    background-color: #f2f2f2; /* 薄いグレーの背景色 */
    position: relative;
    overflow: hidden;
    z-index: 1; /* セクション全体を前面に表示 */
}

/* 木のシルエット全体のコンテナ */
.tree-container {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 0; /* 背景として配置、文字や画像の後ろ */
}

/* 木の幹 */
.tree-trunk {
    width: 40px;
    height: 150px;
    background-color: #8b4513; /* 茶色の幹 */
    border-radius: 10px;
    position: relative;
}

/* 木の枝 (葉っぱ部分) */
.tree-branches {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 140px;
    width: 100%;
}

.branch {
    width: 120px;
    height: 120px;
    background-color: #228b22; /* 緑色の葉 */
    border-radius: 50%; /* 丸い葉っぱ */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 柔らかい影 */
    animation: growBranch 3s ease-in-out infinite; /* 無限にアニメーションを繰り返す */
    opacity: 0.7;
}

.branch:nth-child(1) {
    animation-delay: 1s;
}

.branch:nth-child(2) {
    animation-delay: 2s;
}

.branch:nth-child(3) {
    animation-delay: 3s;
}

/* 枝が成長するアニメーション */
@keyframes growBranch {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/* SDGsの画像を一番手前に表示 */
.sdgs-image {
    position: relative;
    z-index: 2; /* 画像を一番手前に表示 */
}

/* SDGsコンテンツのz-indexを高くして前面に表示 */
.sdgs-content {
    flex: 1;
    text-align: left;
    padding-right: 20px;
    position: relative;
    z-index: 1; /* コンテンツを木の上に配置 */
}

/* スマホ用スタイル */
@media (max-width: 768px) {
    .sdgs-section {
        flex-direction: column;
        padding: 20px;
    }

    .tree-container {
        left: 0;
        width: 100%;
    }
}

.sdgs-image--pc {
    flex: 1;
    margin-right: 20px;
    overflow: hidden;
    border-radius: 15px;
}

.sdgs-image--mobile {
    display: none;
    flex: 1;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 15px;
}

.sdgs-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
    object-position: center;
	z-index: 4;
}

.sdgs-content {
    flex: 1;
    text-align: left;
    padding-right: 20px;
}

.sdgs-title {
    position: relative;
    margin-bottom: 20px;
    text-align: left;
}

.title-bar-sdgs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 6px;
    background-color: #cc0033;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.sdgs-title.in-view .title-bar-sdgs {
    transform: scaleX(1);
}

.sdgs-content h2 {
    font-size: 86px;
    font-weight: 900;
    color: #000;
    margin-bottom: 10px;
}

.sdgs-content h3 {
    font-size: 28px;
    font-weight: 800;
    color: #555;
    margin-top: 5px;
    margin-bottom: 20px;
}

.sdgs-content p {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #555;
    text-align: left;
}

.sdgs-cta-button-pc {
    display: inline-block;
    padding: 15px 30px;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.sdgs-cta-button-pc:hover {
    background-color: #333;
}

.sdgs-cta-button-mobile {
    display: none;
    padding: 15px 30px;
    background-color: black;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.sdgs-cta-button-mobile:hover {
    background-color: #333;
}

@media (max-width: 768px) {
    .sdgs-section {
        flex-direction: column;
        padding: 20px;
    }

    .sdgs-image--pc {
        display: none;
    }

    .sdgs-image--mobile {
        display: block;
    }

    .sdgs-content {
        padding-right: 0;
        text-align: left;
    }

    .sdgs-cta-button-mobile {
        display: block;
        margin: 20px auto 0;
        font-size: 16px;
        padding: 12px 24px;
    }
}

/*新経営理念*/
/* 株式会社オカモト FOR OUR HAPPY FUTURE タイトル部分 */
.philosophy-section .section-title {
    font-size: 32px;
    color: #B22222; /* 濃い赤に設定 */
    font-family: 'Noto Sans JP', sans-serif; /* ゴシック体 */
    text-align: center;
    margin-bottom: 70px;
    letter-spacing: 1px;
	
}

/* サブタイトル（PHILOSOPHYなどのすぐ上に配置） */
.philosophy-subtitle {
    font-size: 14px;
    color: #B22222!important; /* PHILOSOPHYなどと同じ色に設定 */
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 2px; /* タイトルとの余白を少なく */
    margin-top: 0; /* 上の余白をなくす */
    letter-spacing: 0.5px;
}

/* PHILOSOPHY、MISSION、VISION、VALUE のスタイル */
.philosophy-item h3 {
    font-size: 48px;
    color: #B22222; /* クレヨン文字も同じ濃い赤 */
    font-family: 'Patrick Hand SC', 'Caveat Brush', sans-serif; /* クレヨン風フォント */
    letter-spacing: 1px;
    margin-top: 0; /* サブタイトルとの余白を少なく */
    margin-bottom: 8px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 少し影をつけて立体感 */
}

/* PHILOSOPHY、MISSION、VISION、VALUE の内容テキスト */
.philosophy-item p, .philosophy-item ul {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

/* VALUE項目のリストスタイル */
.philosophy-item ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.philosophy-item ul li {
    margin-bottom: 8px;
}

/* 強調用黄色背景 */
.highlight-yellow {
    background-color: #FFEB3B; /* 黄色の背景色 */
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}

/* 各項目の背景と配置 */
.philosophy-section {
    background-color: #f9f9f9; /* 背景色を薄いグレーに設定 */
    padding: 40px 0; /* 上下だけ余白を設定 */
    text-align: center;
    border-radius: 8px;
    margin: 40px auto;
    max-width: 100%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* PHILOSOPHY、MISSION、VISION、VALUEのセクションをリスト風にする */
.philosophy-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* スクロール時にフェードインするアニメーション */
.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .philosophy-section {
        padding: 20px 0;
    }

    .philosophy-section .section-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .philosophy-item h3 {
        font-size: 24px;
    }

    .philosophy-subtitle {
        font-size: 12px;
    }

    .philosophy-item p, .philosophy-item ul {
        font-size: 16px;
    }
}




/* 代表挨拶タイトルセクションのスタイル */
.president-title-section {
    text-align: center;
    margin: 150px 40px;
    position: relative;
	margin-bottom: -10px;
}

.title-bar-president {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background-color: #cc0033; /* 赤いライン */
}

.president-title h2 {
    font-size: 48px;
    color: #000; /* 黒い文字 */
    margin-top: 20px;
}

/*挨拶*/
.ceo-greeting {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.ceo-greeting h1 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 20px;
}

.ceo-greeting .ceo-image {
  display: block;
  margin: 0 auto 20px auto;
  max-width: 300px; /* 画像の最大幅を300pxに設定 */
  width: 100%;
  height: auto;
}

.ceo-greeting h2 {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 15px;
}

.ceo-greeting p {
  line-height: 1.6;
  margin-bottom: 15px;
}

.ceo-greeting ul {
  list-style-type: none;
  padding: 0;
}

.ceo-greeting ul li {
  margin-bottom: 10px;
}

.ceo-greeting ul li strong {
  font-weight: bold;
}

.ceo-greeting .ceo-signature {
  text-align: right;
  margin-top: 30px;
  font-weight: bold;
}

/* スマートフォン表示の最適化 */
@media (max-width: 600px) {
  .ceo-greeting {
    padding: 15px;
  }

  .ceo-greeting h1 {
    font-size: 1.8em;
  }

  .ceo-greeting h2 {
    font-size: 1.3em;
  }

  .ceo-greeting p,
  .ceo-greeting ul li {
    font-size: 1em;
  }

  .ceo-greeting .ceo-signature {
    font-size: 1em;
  }

  /* スマートフォンでの画像サイズ調整 */
  .ceo-greeting .ceo-image {
    max-width: 40%; /* 画面幅に合わせて画像を縮小 */
  }
}

/* 会社概要セクション */
.company-overview-section {
  padding: 80px 20px;
  background-color: #f9f9f9;
  text-align: left;
  margin-top: 60px;
}

/* タイトル上の赤いライン */
.title-bar-overview {
  position: relative;
  top: 20px; /* タイトルの上にラインを配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 6px;
  background-color: #cc0033;
}

.company-overview-header h2 {
  font-size: 48px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}


/*経営理念*/
.corporate-philosophy-section {
    background-color: #6e1f23;
    padding: 20px 0;
    font-family: Arial, sans-serif;
    color: #333;
}
.corporate-philosophy-header {
    text-align: center;
    padding: 20px 0;
    color: white;
    font-size: 29px;
    font-weight: bold;
}
.corporate-philosophy-content-wrapper {
    background-color: white;
    margin: 20px auto;
    padding: 20px;
    max-width: 1000px;
    border: 10px solid #9b7e45;
    border-radius: 10px;
}
.corporate-philosophy-title {
    font-size: 19px;
    color: #6e1f23;
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
}
.corporate-philosophy-subtitle {
    font-size: 29px;
    color: #6e1f23;
    text-align: center;
    margin-top: 5px;
    font-family: sans-serif;
    font-weight: bold; /* 太字を適用 */
}
.corporate-philosophy-highlight {
    background-color: yellow;
    font-weight: bold;
}
.corporate-philosophy-paragraph {
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
    line-height: 2.2;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .corporate-philosophy-header {
        font-size: 22px;
        padding: 15px 0;
    }
    .corporate-philosophy-content-wrapper {
        max-width: 90%;
        padding: 15px;
        border-width: 5px;
    }
    .corporate-philosophy-title {
        font-size: 16px;
    }
    .corporate-philosophy-subtitle {
        font-size: 24px;
        font-family: 'Rafale', sans-serif; /* Rafaleフォントを適用 */
        font-weight: bold; /* 太字を適用 */
    }
    .corporate-philosophy-paragraph {
        font-size: 18px;
        line-height: 1.8;
    }
}

/* 会社概要のコンテンツ */
.company-overview-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.company-image {
  width: 40%;
}

.company-image img {
  width: 100%;
  border-radius: 10px;
}

.company-overview-text {
  width: 55%;
}

.company-info {
  padding: 20px 0;
  border-bottom: 1px solid #ddd; /* 1件ずつ区切り線を追加 */
}

.company-info p {
  margin: 0;
  line-height: 1.6;
  font-size: 18px;
}

.company-info strong {
  font-size: 20px;
  color: #cc0033;
}

/* メディアクエリ：スマホ対応 */
@media (max-width: 768px) {
  .company-overview-content {
    flex-direction: column;
    align-items: center;
  }

  .company-image,
  .company-overview-text {
    width: 100%;
  }

  .company-info {
    padding: 15px 0;
  }
}


/* 会社沿革セクション */
.company-history-section {
  padding: 60px 20px;
  background-color: #f9f9f9;
}

.history-header {
  text-align: center;
  margin-bottom: 50px;
}

.title-bar-history {
  position: relative;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 6px;
  background-color: #cc0033;
}

.history-header h2 {
  font-size: 48px;
  color: #000;
  margin: 0;
}

/* タイムラインのスタイル */
.timeline {
  position: relative;
  padding-left: 70px; /* 左の余白を少なくする */
  border-left: 4px solid #cc0033; /* タイムラインの棒 */
  margin: 0 50px;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -82px; /* タイムラインの丸い点を少し右に寄せる */
  top: 0;
  width: 20px;
  height: 20px;
  background-color: #cc0033;
  border-radius: 50%;
}

.timeline-date {
  font-weight: bold;
  color: #cc0033;
  font-size: 24px;
  margin-bottom: 5px;
}

.timeline-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  margin-left: 20px;
}

.timeline-content p {
  margin: 0;
}

/* メディアクエリでスマホ対応 */
@media (max-width: 768px) {
  .timeline {
    padding-left: 30px;
	margin: 0 10px;
  }

  .timeline-item::before {
    left: -39px;
    width: 14px;
    height: 14px;
  }

  .timeline-date {
    font-size: 20px;
  }

  .timeline-content {
    padding: 15px;
  }
}


/* 全体のスタイル */

/* MANAGEMENTセクションの全体スタイル */
.management-section {
    padding: 60px 20px;
    background-color: #ffffff; /* 背景色を白に設定 */
    text-align: center;
    margin: 0;
    box-sizing: border-box;
}

/* セクションタイトル */
.management-header {
    margin-bottom: 40px;
    position: relative;
}

.title-bar-management {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background-color: #cc0033;
}

.management-header h2 {
    font-size: 86px;
    font-weight: 900;
    color: #000;
}

.management-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #555;
    margin-bottom: 20px;
}

.management-description {
    font-size: 20px;
    color: #777;
    margin-top: 10px;
    margin-bottom: 60px;
}

/* マネージャーリストのコンテナ */
.management-list-container {
    margin: 0 auto;
    max-width: 1200px;
}

/* マネージャーリスト */
.management-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.management-item {
    width: 300px; /* 固定幅に設定 */
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
    margin-bottom: 40px;
}

.management-item:hover {
    transform: scale(1.05);
}

.management-photo {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.management-info h4 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.management-info p {
    font-size: 14px;
    color: #555;
}

/* コメント上の赤いライン */
.management-divider {
    width: 80%;
    height: 3px;
    background-color: #cc0033;
    margin: 15px auto;
}

/* モーダルのスタイル */


/* モーダル内の画像スタイル */
.modal-images {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.modal-photo-staff,
.modal-photo-staff-secondary {
    width: 45%;
    height: auto;
    border-radius: 10px;
}

/* タイムラインや詳細のスタイル */
.modal-job-details,
.modal-timeline {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.modal-timeline li,
.modal-job-details li {
    background-color: #f1f1f1;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
}

/* タイムラインのデザイン */
.modal-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0;
    margin: 20px 0;
}

/* 縦の赤いライン */
.modal-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 59px;
    width: 4px;
    background-color: #cc0033;
}

/* タイムラインアイテム */
.modal-timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 90px;
}

/* 赤い丸 */
.modal-timeline-item::before {
    content: '';
    position: absolute;
    left: 50px;
    width: 20px;
    height: 20px;
    background-color: #cc0033;
    border-radius: 50%;
}

/* 日付部分 */
.modal-timeline-date {
    flex-shrink: 0;
    width: 120px;
    font-weight: bold;
    color: #cc0033;
    text-align: left;
}

/* タイムラインの内容 */
.modal-timeline-content {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
    flex-grow: 1;
    color: #333;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .management-header h2 {
        font-size: 48px;
    }

    .management-header h3 {
        font-size: 24px;
    }

    .management-description {
        font-size: 18px;
    }

    .management-item {
        width: 70%; /* スマホでは1列に表示 */
        margin-bottom: 20px;
    }
	
	.management-section {
		margin-top: 60px;
	}

    .modal-content-staff {
        height: 70vh;
        max-height: 80vh;
        margin-top: 90px;
        padding: 20px;
        overflow-y: auto;
    }

    .modal-timeline-item {
        display: block;
        padding-left: 0;
        padding-bottom: 10px;
        text-align: center;
    }

    .modal-timeline-item::before {
        left: 2%;
        transform: translateX(-50%);
        top: 5px;
        width: 18px;
        height: 18px;
    }

    .modal-timeline::before {
        left: 1.6%;
        width: 4px;
        top: 0;
        bottom: 0;
    }

    .modal-timeline-date {
        text-align: center;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .modal-timeline-content {
        display: inline-block;
        background-color: #f1f1f1;
        padding: 15px;
        border-radius: 5px;
        width: 80%;
        margin: 0 auto;
        font-size: 14px;
    }
}

/* EMPLOYEE MEMBERセクションの全体スタイル */
.employee-member-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
}

/* セクションタイトル */
.employee-member-header {
    margin-bottom: 40px;
    position: relative;
}

.title-bar-employee-member {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background-color: #cc0033;
}

.employee-member-header h2 {
    font-size: 86px;
    font-weight: 900;
    color: #000;
}

.employee-member-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #555;
    margin-bottom: 20px;
}

.employee-member-description {
    font-size: 20px;
    color: #777;
    margin-top: 10px;
    margin-bottom: 60px;
}

/* メンバーリストのコンテナ */
.employee-member-list-container {
    margin: 0 auto;
    max-width: 1200px;
}

.employee-member-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* スペースを均等に配置 */
    gap: 20px;
}

.employee-member-item {
    width: 300px; /* 固定幅にしてマネージメントセクションと統一 */
    text-align: center;
    background-color: white;
    padding: 20px;
	margin-bottom: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    position: relative;
}

.employee-member-item:hover {
    transform: scale(1.05); /* ホバー時に拡大 */
}

.employee-member-photo {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.employee-member-info h4 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.employee-member-info p {
    font-size: 14px;
    color: #555;
}

/* コメント上の赤いライン */
.employee-member-divider {
    width: 80%;
    height: 3px;
    background-color: #cc0033;
    margin: 15px auto;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .employee-member-header h2 {
        font-size: 48px;
    }

    .employee-member-header h3 {
        font-size: 24px;
    }

    .employee-member-description {
        font-size: 18px;
    }

     .employee-member-item {
        width: 70%; /* スマホでは1列に */
        margin-bottom: 20px;
    }
}



/* トップセクション */
.top-section {
    text-align: center;
	margin-top: 60px;
    padding: 60px 20px;
    background-color: white;
}

.top-section h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.top-section p {
    font-size: 18px;
    color: #555;
}

.red-line {
    width: 100px;
    height: 6px;
    background-color: #cc0033;
    margin: 0 auto 20px;
}

/* 法人向け事業セクション */
.corporate-business-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.corporate-business-section h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 40px;
}

.business-card-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.business-card {
    width: 45%;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.business-card h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.business-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.business-card p {
    font-size: 16px;
    color: #555;
}


/*デジタルプラットフォーマーセクション*/
.concept-section {
    background-color: #f4f1e6; /* 背景色 */
    padding: 60px 20px;
    text-align: center;
}

.concept-title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    line-height: 1.4;
}

.concept-description {
    font-size: 18px;
    color: #333;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.concept-image img {
    width: 100%; /* 画像の幅を100%に設定 */
    max-width: 800px; /* 最大幅を設定 */
    height: auto;
    border: 2px solid #333; /* 枠線の色 */
    border-radius: 8px; /* 角を丸める */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を追加 */
}






/* 地域連携事業セクション */
.regional-business-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.regional-business-section h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 40px;
}

.regional-card-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.regional-card {
    width: 45%;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.regional-card h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.regional-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.regional-card p {
    font-size: 16px;
    color: #555;
}

/* ドコモショップエリアセクション */
.docomo-area-section {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.area-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.area-content h2 {
    font-size: 28px;
    color: #cc0033;
    margin-bottom: 20px;
    font-weight: 700;
}

.area-content p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 画像部分のスタイル */
.area-map img {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* モーダル内のGoogleマップのスタイル */
.modal-detail-box iframe.modal-map {
    width: 100%;
    height: 300px;
    border: 0; /* 枠線を消す */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 影をつける */
}

/* モーダルのレスポンシブ対応 */
@media screen and (max-width: 768px) {
    .modal-detail-box iframe.modal-map {
        height: 200px; /* モバイルでの高さ調整 */
    }
}
/* ドコモショップセクション */
.docomo-shop-section {
    padding: 60px 20px;
}

.docomo-shop-section h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 40px;
}

.store-card-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

/* カード全体のデザイン */
.store-card-overview {
    background-color: #f1f1f1;
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    width: 300px;
    transition: transform 0.3s ease;
    overflow: hidden;
    padding: 10px; /* カード全体に余白を追加 */
}

/* カードホバー時の拡大効果 */
.store-card-overview:hover {
    transform: scale(1.05);
}

/* 看板部分 */
.store-sign {
    background-color: #cc0033; /* 背景色を赤に変更 */
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid #ccc; /* 下に境界線 */
}

/* 看板内の店舗名のデザイン */
.store-sign h3 {
    font-size: 23px; /* 文字サイズを調整 */
    color: #fff; /* 文字色を白に */
    padding: 5px 0;
    margin: 0;
    text-align: center;
    background-color: #cc0033; /* 背景を赤に統一 */
    border-radius: 5px;
}

/* ドア部分（店舗画像） */
.store-door {
    width: 100%;
    height: 200px;
    background-color: #e0e0e0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 10px; /* 上部に余白を追加 */
    overflow: hidden;
}

.store-door img {
    width: 95%; /* 画像に余白を持たせる */
    height: auto;
    object-fit: cover;
    border-radius: 5px;
    margin: 0 auto;
    display: block; /* 画像を中央に配置 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* モーダルスタイル */

/* 店舗名のスタイル */
.store-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
	white-space: pre-wrap; /* 改行文字を解釈 */
}


/* 店舗画像ギャラリー */
.store-images-gallery {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* 小さい画面でも折り返し対応 */
    margin-bottom: 20px;
}

.store-images-gallery img {
    width: 30%;
    margin-bottom: 10px; /* 画像間のスペースを確保 */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 画像モーダル */
.image-modal {
    display: none; /* デフォルトは非表示 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* 背景を暗く */
    justify-content: center;
    align-items: center;
}

.modal-image-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}

.close-image-modal {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

/* モーダル内のセクションタイトルのスタイル */
.modal-title-box {
    background-color: #cc0033;
    color: white;
    font-size: 18px;
    padding: 10px;
    border-radius: 5px 5px 0 0;
    text-align: left;
}

/* モーダル内の詳細ボックス */
.modal-detail-box {
    background-color: white;
    padding: 20px;
    border-radius: 0 0 10px 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* 詳細部分のスタイル */
.modal-detail-box p {
    font-size: 16px;
    color: #333;
}

/* 店舗情報のリスト */
.store-info-section ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.store-info-section ul li {
    margin-bottom: 10px;
    font-size: 16px;
}

.store-info-section ul li strong {
    color: #cc0033;
}

.store-info-section a {
    color: #cc0033;
    text-decoration: none;
}

.store-info-section a:hover {
    text-decoration: underline;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .business-card,
    .regional-card,
    .store-card-overview {
        width: 100%;
        margin-bottom: 20px;
    }

    .store-images-gallery {
        flex-direction: column; /* 縦に並べる */
        align-items: center; /* 中央揃え */
    }

    .store-images-gallery img {
        width: 80%; /* スマホで画像を大きく表示 */
        margin-bottom: 15px; /* 画像の間隔を少し広げる */
		pointer-events: none; /* 画像のクリックを無効にする */
    }

    .modal-content-store {
        width: 95%;
        padding: 10px;
        margin-top: 130px;
        margin-bottom: 150px;
    }
}

/* ニュース一覧セクションの赤いライン */
.title-bar-news {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 6px;
    background-color: #cc0033;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.section-title-custom.in-view .title-bar-news {
    transform: scaleX(1);
}

.news-page .press-release-section-custom {
    margin-top: 150px; /* 必要な余白に応じてpx数を調整 */
}

.normal-news-page .press-release-section-custom {
    margin-top: 150px; /* 必要に応じて変更 */
}


/* タイトルバーのデザイン (member.htmlと一致) */
.title-bar {
    position: relative;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background-color: #cc0033;
    margin-bottom: 40px;
}

/* アニメーション用のクラス */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

/* コンテンツセクションのスタイル */
.privacy-policy-section {
    max-width: 1200px;
    margin: 100px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.privacy-content p, .privacy-content h2, .privacy-content h3, .privacy-content ul {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #555;
    animation: fadeInUp 0.8s ease forwards;
}

.privacy-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: #cc0033;
    animation-delay: 0.2s;
}

.privacy-content h3 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    animation-delay: 0.4s;
}

.privacy-content ul {
    padding-left: 20px;
}

.privacy-content ul li {
    list-style-type: disc;
}

/* セクションタイトルのセンター表示 */
.section-title-privacy {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 70px;
    text-align: center; /* タイトルをセンターに */
}

/* フォームのスタイル */
.entry-form-section {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
}

form label {
    margin-top: 15px;
    font-weight: 700;
}

form input, form textarea, form select {
    margin-top: 5px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}

form button {
    margin-top: 20px;
    padding: 10px;
    font-size: 18px;
    background-color: #cc0033;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #ff3366;
}

/* アニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

/* PC向け: コンテンツの幅を最大1200pxに制限 */
.entry-form-section {
    max-width: 1200px; /* PC向けの最大幅を指定 */
    margin: 0 auto; /* 中央揃え */
	margin-top: 90px;
    padding: 20px;
    box-sizing: border-box; /* パディング込みで幅を計算 */
}

/* フォームフィールドの幅を調整 */
form input, form textarea, form select {
    width: 100%; /* フィールドを幅いっぱいに */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* ボタンの幅も画面幅に対応 */
form button {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    background-color: #cc0033;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* スマホ対応用のメディアクエリ */
@media screen and (max-width: 600px) {
    .entry-form-section {
        max-width: 100%; /* スマホでは画面幅に合わせる */
        padding: 15px;
    }

    .header__nav ul {
        display: flex;
        flex-direction: column; /* スマホで縦並び */
        align-items: center;
		
    }

    .header__nav ul li {
        margin-bottom: 10px;
    }
}

/* 必須入力が未入力の場合のスタイル */
input.error, textarea.error {
    border: 2px solid red;
    background-color: #ffe6e6;
}

form input, form textarea, form select {
    width: 90%; /* フィールドを幅いっぱいに */
    
}

.email-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.email-container input {
    flex: 2; /* 入力フィールドが大きくなる */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
	width: 80%;
}

.email-container select {
    flex: 1; /* ドメイン選択が適切なサイズになる */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-left: 10px; 
	width: 50%;/* アドレスとドメインの間に余白 */
}

.email-container span {
    margin-left: 10px; /* "@"の前に余白 */
    font-size: 16px;
}

.section-title-entry {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

/* 販売経路セクションのスタイリング */
.sales-roadmap {
    padding: 50px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.sales-roadmap h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.sales-roadmap p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.sales-roadmap img {
    max-width: 100%;
    height: auto;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sales-roadmap__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

@media (min-width: 768px) {
    .sales-roadmap h2 {
        font-size: 2.5rem;
    }

    .sales-roadmap p {
        font-size: 1.2rem;
    }
}

/* SDGs タイトルエリアのスタイル */
.sdgs-title-section-custom {
    padding: 50px 20px;
    background-color: #f9f9f9;
    text-align: center;
    margin-top: 90px;
}

.title-container-custom {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* 赤いラインのスタイル */
.title-red-line-custom {
    width: 100px;
    height: 6px;
    background-color: #cc0033;
    margin: 0 auto 20px auto;
}

.sdgs-title-section-custom h1 {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.goals-image-custom img {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.text-container-custom {
    margin-top: 30px;
}

.text-container-custom h2 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.text-container-custom p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
}

/* SDGsセクション全体のスタイル */
.sdgs-section-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    margin-bottom: 40px;
    background-color: #f9f9f9;
}

.sdgs-content-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.sdgs-image-custom {
    flex: 1;
    margin-right: 20px;
}

.sdgs-image-custom img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.sdgs-text-custom {
    flex: 1;
    text-align: left;
}

.sdgs-text-custom h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #333;
}

.sdgs-goals-custom {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.sdgs-goals-custom img {
    width: 50px;
    height: 50px;
}

.sdgs-text-custom p {
    font-size: 18px;
    color: #cc0033;
    margin-bottom: 20px;
}

.sdgs-text-custom ul {
    list-style: none;
    padding: 0;
    font-size: 16px;
}

.sdgs-text-custom ul li {
    margin-bottom: 10px;
    color: #666;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .sdgs-content-custom {
        flex-direction: column;
        text-align: center;
    }

    .sdgs-image-custom {
        margin-bottom: 20px;
    }

    .sdgs-text-custom h2 {
        font-size: 28px;
    }

    .sdgs-text-custom p {
        font-size: 16px;
    }

    .sdgs-goals-custom img {
        width: 40px;
        height: 40px;
    }
}

/*コンタクトフォーム*/
/* 基本レイアウトの設定 */
.contact-form-section {
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
	margin-top: 90px;
}

.contact-form-section h1 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 20px;
}

.contact-form-section p {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
}

/* フォームのスタイル */
#contactForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#contactForm label {
    font-size: 16px;
}

#contactForm input,
#contactForm textarea,
#contactForm select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.email-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.email-container input {
    flex: 2;
}

.email-container span {
    flex: 0.2;
    text-align: center;
}

.email-container select {
    flex: 1;
}

/* 送信ボタン */
#sendButton {
    background-color: #cc0033;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#sendButton:hover {
    background-color: #a80029;
}

/* スマホ対応のレスポンシブスタイル */
@media screen and (max-width: 768px) {
    .contact-form-section {
        padding: 30px;
    }

    #contactForm {
        gap: 15px;
    }

    #contactForm input,
    #contactForm textarea,
    #contactForm select {
        font-size: 14px;
    }

    #sendButton {
        font-size: 14px;
        padding: 10px;
    }

    .email-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .email-container input {
        flex: 1;
        width: 100%;
    }

    .email-container select {
        flex: 1;
        width: 100%;
    }
}

/* リクルート */

.floating-entry-button {
    position: fixed;
    right: 20px;
    bottom: 90px;
    background-color: #9D8C56; /* ボタンの背景色 */
    color: white;
    padding: 15px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.3rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 影を追加 */
    z-index: 1000;
    animation: float 3s ease-in-out infinite; /* ふらふら動くアニメーション */
}

.floating-entry-button:hover {
    background-color: #FFCB00; /* ホバー時の色変更 */
}

/* スマホ用調整 */
@media (max-width: 768px) {
    .floating-entry-button {
        bottom: 10px; /* スマホ表示時の位置を少し下に */
        right: 5px;  /* スマホ表示時の位置を少し右に */
        padding: 12px 20px;
        font-size: 14px;
    }
}



/* ふらふらと浮くアニメーション */
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* 上に10px動く */
    }
    100% {
        transform: translateY(0); /* 元の位置に戻る */
    }
}


/* HEROセクションのスタイル */
.hero-section-okamoto-2024 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #233b54;
    height: 100vh;
    padding: 0 5%;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-text-container-okamoto-2024 {
    max-width: 50%;
    position: relative;
    z-index: 2; /* 画像より上に表示されるように調整 */
}

.hero-text-container-okamoto-2024 h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.hero-text-container-okamoto-2024 h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero-text-container-okamoto-2024 p {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.hero-logo-okamoto-2024 {
    max-width: 30%;
    height: auto;
    margin: 20px 0;
}

/* 画像のスタイル */
.hero-image-container-okamoto-2024 {
    max-width: 70%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1; /* テキストの後ろに表示 */
    top: 170px; /* 画像を上に30px移動 */
}

.hero-image-okamoto-2024 {
    width: 90%; /* 画像の大きさ調整 */
    height: auto;
    opacity: 0.9; /* 少し透明にすることでテキストが見やすくなる */
}



/* SCROLLアニメーションセクション */
.scroll-animation-okamoto-2024 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
	margin-left: -90px;
}

.scroll-text {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: white; /* 文字色を白に設定 */
    animation: scroll-text-move 2s infinite;
}

/* 矢印のアニメーション */
.scroll-arrows .arrow {
    width: 15px;
    height: 15px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg);
    margin: 5px 0;
    animation: arrow-bounce 1.5s infinite;
}

.scroll-arrows .arrow:nth-child(1) {
    animation-delay: 0s;
}

.scroll-arrows .arrow:nth-child(2) {
    animation-delay: 0.3s;
}

.scroll-arrows .arrow:nth-child(3) {
    animation-delay: 0.6s;
}

/* テキストアニメーションの定義 */
@keyframes scroll-text-move {
    0% {
        opacity: 0;
        transform: translateY(20px); /* 下から上に移動 */
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px); /* 上に消える */
    }
}

/* 矢印のバウンスアニメーション */
@keyframes arrow-bounce {
    0% {
        opacity: 0;
        transform: translateY(-10px) rotate(45deg); /* 矢印が少し上に */
    }
    50% {
        opacity: 1;
        transform: translateY(0) rotate(45deg); /* 真ん中で見える状態 */
    }
    100% {
        opacity: 0;
        transform: translateY(10px) rotate(45deg); /* 矢印が下に移動して消える */
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .scroll-text {
        font-size: 1.2rem;
    }

    .hero-text-container-okamoto-2024 {
        max-width: 100%;
    }

    .hero-image-container-okamoto-2024 {
        max-width: 100%;
    }
    
    .hero-image-okamoto-2024 {
        width: 100%;
        margin-top: 130px;
		margin-left: 0px;
    }
	
	.floating-entry-button {
    
    font-size: 0.8rem;
	
    }
	
	.hero-text-container-okamoto-2024 {
    max-width: 100%;
	margin-top: 70px;
    position: relative;
    z-index: 2; /* 画像より上に表示されるように調整 */
}

.hero-text-container-okamoto-2024 h1 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.hero-text-container-okamoto-2024 h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.hero-text-container-okamoto-2024 p {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.hero-logo-okamoto-2024 {
    max-width: 30%;
    height: auto;
    margin: 20px 0;
}
	
}

/*mirai*/
.squash-up {
    display: inline-block;
    animation: squash-up 0.5s ease;
}

@keyframes squash-up {
    0% {
        transform: scaleY(1);
        opacity: 1;
    }
    50% {
        transform: scaleY(0); /* 縦に潰れる */
        opacity: 0;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* メッセージセクションのスタイル */
.message-section-recruit-2024-09 {
    padding: 60px 20px;
    color: white;
    text-align: center;
    background-color: #1d3d5e;
}

.message-content-recruit-2024-09 h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.message-content-recruit-2024-09 p {
    font-size: 1.25rem;
    margin-bottom: 40px;
}

.message-btn-recruit-2024-09 {
    border: 2px solid white;
    padding: 10px 40px;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.message-btn-recruit-2024-09:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* 通常のスタイル（PC向け） */
.news-section-recruit-2024-09 {
    position: relative;
    background-image: url('../img/washi2.jpg'); /* 背景画像のパス */
    background-size: cover; /* 背景が全体をカバー */
    background-position: center;
    padding: 40px 140px; /* PC版での余白 */
    text-align: center;
    z-index: 1;
}
.news-section-recruit-2024-09::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6); /* 白色の半透明オーバーレイ */
    z-index: -1;
}

.news-section-recruit-2024-09 h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.news-list-recruit-2024-09 {
    list-style: none; /* リストのスタイルをなしに */
    padding: 0;
    margin: 0 auto;
    display: block; /* リストの幅を調整 */
    text-align: left; /* リストアイテムは左揃えに */
    max-width: 80%; /* 最大幅を80%にして、左右の余白を減らす */
}

.news-list-recruit-2024-09 li {
    padding: 10px 0;
    border-bottom: 1px solid #ccc; /* 各ニュースの下に下線を追加 */
    display: flex;
    flex-wrap: wrap; /* スマホ表示で改行されるように設定 */
}

.news-list-recruit-2024-09 li strong {
    display: inline-block;
    width: 150px; /* 日付の幅を少し広く */
}

.news-list-recruit-2024-09 strong {
    margin-right: 10px;
}

.news-list-recruit-2024-09 span {
    background-color: #69c9a7;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 5px; /* お知らせラベルと本文の間に余白を追加 */
}

/* スマホ表示用のスタイル（幅768px以下） */
@media (max-width: 768px) {
    .news-section-recruit-2024-09 {
        padding: 20px 20px; /* 上下左右の余白を縮小 */
    }

    .news-list-recruit-2024-09 {
        max-width: 100%; /* 幅を100%にして余白をなくす */
    }

    .news-section-recruit-2024-09 h2 {
        font-size: 1rem; /* 見出しのフォントサイズを少し小さく */
    }

    .news-list-recruit-2024-09 li {
        display: block; /* スマホ表示で縦並びにする */
        text-align: left;
    }

    .news-list-recruit-2024-09 li strong,
    .news-list-recruit-2024-09 li span {
        display: block; /* 日付とお知らせラベルを改行 */
        margin-bottom: 5px; /* ラベルと本文の間に余白を追加 */
    }

    .news-list-recruit-2024-09 li strong {
        width: auto; /* 日付の幅を自動調整 */
    }
}

/* Interviewセクション */
/* 背景全体を青に設定 */
.interview-section-recruit-2024-09 {
    background-color: #0475BF; /* 空の色に近い青 */
    position: relative;
    overflow: hidden; /* 雲が外にはみ出さないように */
    padding: 60px 20px;
    text-align: center;
    z-index: 1; /* セクション自体のz-indexを設定 */
}

/* 雲のアニメーション */
@keyframes floatClouds {
    0% {
        transform: translateX(-200px); /* 初期位置（画面外左） */
    }
    100% {
        transform: translateX(100vw); /* 最終位置（画面外右） */
    }
}

/* 雲のスタイル */
.cloud {
    position: absolute;
    background: white;
    opacity: 0.3; /* 控えめな透明度 */
    border-radius: 50%;
    box-shadow: 0px 0px 50px 20px rgba(255, 255, 255, 0.5); /* ぼんやりとした影 */
    z-index: -1; /* 雲を背景に移動 */
}

/* 各雲のサイズとアニメーションのタイミングを変えて複数作成 */
.cloud1 {
    width: 200px;
    height: 80px;
    top: 20%;
    left: -200px;
    animation: floatClouds 30s linear infinite;
}

.cloud2 {
    width: 150px;
    height: 60px;
    top: 40%;
    left: -250px;
    animation: floatClouds 40s linear infinite;
}

.cloud3 {
    width: 250px;
    height: 100px;
    top: 60%;
    left: -300px;
    animation: floatClouds 35s linear infinite;
}

.cloud4 {
    width: 180px;
    height: 70px;
    top: 30%;
    left: -350px;
    animation: floatClouds 50s linear infinite;
}

/* アニメーション */
@keyframes floatClouds {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100vw); /* 画面右端まで移動 */
    }
}

/* 背景の青さを抑える */
.interview-section-recruit-2024-09::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* 背景色をさらに後ろに */
}

.interview-section-recruit-2024-09 h2,
.interview-section-recruit-2024-09 h3,
.interview-section-recruit-2024-09 p,
.interview-section-recruit-2024-09 .interview-text h4 {
    color: white; /* すべての見出しとテキストを白に */
}

/* 「INTERVIEW」タイトル */
.interview-section-recruit-2024-09 h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.interview-section-recruit-2024-09 h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.interview-section-recruit-2024-09 p {
    color: white;
    font-size: 1.2rem;
}

/* インタビューテキストと画像 */
.interview-main {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.interview-text {
    text-align: left;
    margin-right: 20px;
    color: white;
}

.interview-main-img img {
    width: 300px;
    height: auto;
    border-radius: 10px;
}

/* プロフィールカード */
/* プロフィールカードのふわふわアニメーション */
.floating {
    animation: floating 4s ease-in-out infinite; /* アニメーションを追加 */
    position: relative; /* 親要素に対しての相対位置を指定 */
}

/* 各カードに異なるアニメーションを適用 */
.floating-1 {
    animation: floating 4s ease-in-out infinite;
}

.floating-2 {
    animation: floating 4.5s ease-in-out infinite;
}

.floating-3 {
    animation: floating 5s ease-in-out infinite;
}

.floating-4 {
    animation: floating 5.5s ease-in-out infinite;
}

/* プロフィールカードの共通アニメーション */
@keyframes floating {
    0% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-10px); /* ふわふわ上がる */
    }
    100% {
        transform: translateY(0); /* 元に戻る */
    }
}

/* インタビューセクション */
.interview-profiles {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 40px;
}

.profile-card {
    text-align: center;
    width: 180px;
    margin: 20px;
}

.profile-card img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    margin-bottom: 10px;
}

.profile-card h4 {
    font-size: 1.2rem;
    color: white;
}

.profile-card p {
    font-size: 1rem;
    color: white;
    background-color: #c0392b;
    padding: 5px;
    border-radius: 5px;
}

/* 「もっと見る」ボタン */
.interview-more {
    margin-top: 40px;
}

.btn-more {
    background-color: #c0392b;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}

/* スマホ表示用のスタイル */
@media (max-width: 768px) {
    .interview-main {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center;
        margin-bottom: 20px;
    }
	
	.interview-profiles {
        justify-content: center; /* プロフィールカードを中央揃え */
        flex-wrap: wrap; /* プロフィールカードを並べる */
    }

    .interview-text {
        margin-right: 0; /* マージンを削除 */
        text-align: center; /* テキスト中央揃え */
    }

    .interview-main-img img {
        width: 80%; /* 画像を小さめにする */
        margin-bottom: 20px;
    }

    .profile-card {
        width: 40%; /* 幅を45%にして2列並びに */
        margin: 10px;
    }

    .profile-card img {
        width: 120px; /* 画像サイズを120pxに拡大 */
        height: 120px;
    }

     .profile-card h4 {
        font-size: 1.1rem; /* 名前のフォントサイズを少し大きく */
    }

    .profile-card p {
        font-size: 1rem; /* 職種のフォントサイズ */
        padding: 8px 12px; /* ラベルの内側の余白も調整 */
    }

    .interview-more {
        text-align: center; /* ボタンも中央に */
    }
}


/* 全体を左右に分ける */
.about-ntt-okamoto-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 60px 0;
    position: relative;
    background-color: #2980b9;
}

/* 左半分 (テキスト) */
.about-left {
    flex: 1;
    padding: 0 20px; /* 左右に余白を追加 */
}

.about-content {
    text-align: left;
    color: white;
}

.about-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.about-content h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-content p {
    font-size: 1.2rem;
}

/* 右半分 (リンク) */
.about-right {
    flex: 1;
    padding: 0 20px; /* 左右に余白を追加 */
}

.about-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid white;
    padding: 15px;
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    transition: background-color 0.3s, color 0.3s;
}

.about-link:hover {
    background-color: white;
    color: #2980b9;
}

/* PC版の背景用ストライプ */
.yellow-stripes {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 500px;
    background-image: repeating-linear-gradient(
        180deg,
        #f1c40f 0%,
        #f1c40f 50%,
        transparent 50%,
        transparent 100%
    );
    z-index: -1;
}

/* スマホ表示用のスタイル */
@media (max-width: 768px) {
    .about-ntt-okamoto-section {
        flex-direction: column; /* スマホ版では上下に並べる */
    }

    .about-left, .about-right {
        padding: 20px;
    }
	

    .yellow-stripes {
        display: none; /* スマホ版ではストライプを非表示 */
    }
}


/* 全体レイアウト */
.working-environment-section-recruit, .recruitment-info-section-recruit {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 60px 0;
    position: relative;
    background-color: #008CC6; /* 適宜背景色を変更 */
}

/* 左側テキスト */
.working-environment-left-recruit, .recruitment-info-left-recruit {
    flex: 1;
    padding: 0 20px;
}

.working-environment-left-recruit h2, .recruitment-info-left-recruit h2 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 10px;
}

.working-environment-left-recruit h3, .recruitment-info-left-recruit h3 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
}

.working-environment-left-recruit p, .recruitment-info-left-recruit p {
    font-size: 1.2rem;
    color: white;
}

/* 右側リンクボタン */
.working-environment-right-recruit, .recruitment-info-right-recruit {
    flex: 1;
    padding: 0 20px;
}

.career-link-recruit, .recruitment-link-recruit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid white;
    padding: 15px;
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    margin-bottom: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.career-link-recruit:hover, .recruitment-link-recruit:hover {
    background-color: white;
    color: #2980b9;
}

/* ストライプの背景 */
.yellow-stripes-recruit {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 500px;
    background-image: repeating-linear-gradient(
        180deg,
        #f1c40f 0%,
        #f1c40f 50%,
        transparent 50%,
        transparent 100%
    );
    z-index: -1;
}

/* スマホ用レイアウト */
@media (max-width: 768px) {
    .working-environment-section-recruit, .recruitment-info-section-recruit {
        flex-direction: column;
    }

    .working-environment-left-recruit, .recruitment-info-left-recruit,
    .working-environment-right-recruit, .recruitment-info-right-recruit {
        padding: 20px;
    }
	
	
	
	
	

    .yellow-stripes-recruit {
        display: none;
    }
}

/* リクルートセクションのスタイル */
/* 全体レイアウト */
.recruit-section-modern {
    background-color: #f9f9f9;
    padding: 40px 60px;
    color: #333;
    text-align: center;
    max-width: 100%;
    margin: 20 0;
}

/* 見出し */
.recruit-header h2 {
    font-size: 2.5rem;
    color: #D6974A;
    margin-bottom: 10px;
}

.recruit-header p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 40px;
}

/* カードレイアウト */
.recruit-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.recruit-card {
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.recruit-card h3 {
    font-size: 1.5rem;
    color: #D6974A;
    margin-bottom: 15px;
}

.recruit-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

/* 応募情報 */
.recruit-application {
    background-color: #D6974A;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.1rem;
}

/* スマホ表示用 */
@media (max-width: 768px) {
    .recruit-cards {
        grid-template-columns: 1fr;
	}

    .recruit-header h2 {
        font-size: 2rem;
    }

    .recruit-header p {
        font-size: 1rem;
    }

    .recruit-card h3 {
        font-size: 1.3rem;
    }

    .recruit-card p {
        font-size: 0.9rem;
    }
	
	.recruit-section-modern {
    
    padding: 40px 20px;
    }
}


/* recruit手紙モーダル全体のスタイル */
.modal-recruit-2024-09 {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    justify-content: center;
    align-items: center;
}

/* モーダルコンテンツのスタイル */
.modal-content-recruit-2024-09 {
    background-color: #fff;
    width: 80%;
    max-width: 600px;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    font-family: 'Zen Kurenaido', sans-serif; /* 便箋風フォントに変更 */
    border: 3px solid #5E9594; /* 便箋のイメージカラー */
}

/* モーダルのタイトル */
.modal-content-recruit-2024-09 h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #5E9594; /* 便箋のイメージカラー */
    font-family: 'Zen Kurenaido', sans-serif; /* タイトルにもフォント適用 */
}

/* 手紙風の内容エリア */
.letter-content-recruit-2024-09 {
    padding: 20px;
    background-color: #fffaf0; /* クリーム色の便箋 */
    border: 1px solid #5E9594; /* 便箋のイメージカラー */
    height: 400px;
    overflow-y: auto; /* 長文対応のスクロール */
    font-size: 1rem;
    line-height: 1.6;
    font-family: 'Zen Kurenaido', sans-serif; /* 便箋風フォントに変更 */
}


/* モーダル表示時のアニメーション */
@keyframes modal-fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-recruit-2024-09.open {
    display: flex;
    animation: modal-fade-in 0.5s ease-in-out;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .modal-content-recruit-2024-09 {
        width: 90%;
    }
}


/*RECRUITメンバーボタン*/
.cta-button-recruit-2024-09 {
    display: inline-block;
    padding: 15px 30px;
    background-color: #D6974A;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button-recruit-2024-09:hover {
    background-color: #b57d39;
    transform: scale(1.05);
}

.interview-more-link {
    text-align: center;
    margin-top: 30px;
}


/* 社員行事セクション */
.events-section {
    padding: 60px 20px;
    background-color: #f3f3f3;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
}

.events-header {
    margin-bottom: 40px;
    position: relative;
}

.title-bar-events {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background-color: #cc0033;
    transform-origin: left;
    transition: transform 0.5s ease;
}

.events-header h2 {
    font-size: 86px;
    font-weight: 900;
    color: #000;
}

.events-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #555;
    margin-bottom: 20px;
}

.events-description {
    font-size: 20px;
    color: #777;
    margin-top: 10px;
    margin-bottom: 60px;
}

/* カードグリッド */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.event-card {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    cursor: pointer;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.event-card:hover .event-image {
    transform: scale(1.05);
}

/* カード内画像 */
.event-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-bottom: 2px solid #cc0033;
}

/* カードテキスト */
.event-info {
    padding: 20px;
    text-align: left;
}

.event-info h4 {
    font-size: 20px;
    font-weight: 700;
    color: #cc0033;
    margin-bottom: 10px;
}

.event-info p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .event-image {
        height: 150px;
    }

    .events-header h2 {
        font-size: 48px;
    }

    .events-header h3 {
        font-size: 24px;
    }

    .events-description {
        font-size: 18px;
    }
}


/* recruit_infoページ用追加スタイル */

/* 共通セクションスタイル */
.section-container {
  max-width:1200px;
  margin:40px auto;
  padding:20px;
  text-align:center;
}

/* 求める人物像 */
.personality-section {
  background:#f9f9f9;
  padding:60px 20px;
  text-align:center;
}
.personality-qualities {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:center;
  margin-top:40px;
}
.personality-qualities .quality {
  background:white;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  padding:20px;
  width:250px;
  transition:transform 0.3s ease;
}
.personality-qualities .quality:hover {
  transform:scale(1.05);
}
.personality-qualities img {
  width:80px;
  margin-bottom:10px;
}

/* 人事部からのメッセージ */
.hr-section {
  background:#fff;
  padding:60px 20px;
  text-align:center;
}
.hr-section img {
  width:200px;
  border-radius:50%;
  margin-bottom:20px;
}

/* スタッフ育成について */
.staffdev-section {
  background:#f2f2f2;
  padding:60px 20px;
  text-align:center;
}

.dev-steps {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:center;
  margin-top:40px;
}
.dev-step {
  background:white;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  padding:20px;
  width:250px;
  transition:transform 0.3s ease;
}
.dev-step:hover {
  transform:scale(1.05);
}
.dev-step h3 {
  margin-bottom:10px;
  font-size:1.2rem;
  color:#cc0033;
}

.dev-images {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  margin-top:40px;
}
.dev-images img {
  width:300px;
  border-radius:10px;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  transition:transform 0.3s ease;
}
.dev-images img:hover {
  transform:scale(1.05);
}

/* フッター */
.footer {
    background-color: #cc0033;
    padding: 20px;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__logo img {
    width: 100px;
    margin-bottom: 10px;
}

.footer__nav ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.footer__nav ul li {
    display: inline;
}

.footer__nav ul li a {
    color: white;
    font-weight: bold;
}

.footer p {
    margin: 0;
}

@media (max-width: 768px) {
    .footer {
        padding: 20px 10px;
    }

    .footer__logo img {
        width: 200px;
    }

    .footer__nav ul {
        flex-direction: column;
        gap: 10px;
    }

    .footer p {
        font-size: 14px;
    }
}

/* Q&Aセクションのスタイル */
.qa-item {
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.qa-item h4 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.qa-item p {
    font-size: 16px;
    color: #555;
    margin: 0;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .qa-item h4 {
        font-size: 16px;
    }

    .qa-item p {
        font-size: 14px;
    }
}


/* Q&Aセクションカスタムデザイン */
.qa-item {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff7f7; /* 薄いピンクの背景色 */
    border: 1px solid #ffd1d1; /* ピンクのボーダー */
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.qa-item h4 {
    font-size: 18px;
    font-weight: bold;
    color: #cc0033; /* 赤色の文字 */
    margin-bottom: 10px;
}

.qa-item p {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    margin: 0;
}

/* Qラベルのスタイル */
.qa-item h4::before {
    content: "Q";
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #cc0033;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
}

/* Aラベルのスタイル */
.qa-item p::before {
    content: "A";
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #ff9999;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
}

/* Q&A全体を囲むスタイル */
.qa-container {
    padding: 20px;
    background-color: #ffeaea; /* 全体の背景色 */
    border-radius: 15px;
    border: 1px solid #ffcccc;
    margin-top: 20px;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .qa-item h4 {
        font-size: 16px;
    }

    .qa-item p {
        font-size: 14px;
    }

    .qa-item h4::before,
    .qa-item p::before {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
    }
}





/* =========================================
   すべてのモーダルの背景（暗転部分）を統一
========================================= */


.modal-overlay {
    visibility: hidden;  /* デフォルト非表示 */
    opacity: 0;          /* 透明にしとく */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    z-index: 9999; /* 一番手前に表示する */
}

/* モーダル表示時のアニメーション */
.modal-show {
    visibility: visible;
    opacity: 1;           /* 不透明に */
    transition: opacity 0.3s ease;
}

/* =========================================
   すべてのモーダルの中身を統一
========================================= */

/* ▼ もとのスタッフモーダルっぽいデザインをベースにする */
.modal-content-common {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 1200px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
    box-sizing: border-box;
}

/* 表示時はスケール＆opacityを元に戻す */
.modal-show .modal-content-common {
    opacity: 1;
    transform: scale(1);
}