/* content-title クラスにスタイルを適用 */
.content-title {
    position: relative;
    width: 100%;
    height: 30vh; /* 初期の高さを設定（任意） */
    background-image: url(../images/main-image002.jpg);
    background-size: cover; /* 画像が要素に合わせて拡大縮小 */
    background-position: center center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
}

/* 見出しテキストのスタイル */
.content-title h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 完全に中央に配置 */
    color: white;
    font-size: 2em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字に影をつけて視認性を向上 */
    margin: 0;
    padding: 0;
    text-align: center;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .content-title {
        height: 20vh; /* スマホやタブレットでは高さを調整 */
    }
    .content-title h2 {
        font-size: 1.5em; /* 見出しの文字サイズを小さく */
    }
}

@media (max-width: 480px) {
    .content-title {
        height: 20vh; /* スマホでさらに小さく調整 */
    }
    .content-title h2 {
        font-size: 1.2em; /* 見出しの文字サイズをさらに小さく */
    }
}

/*リード*/
.sec_lead{
    margin:5% auto;
    width: 90%;
    max-width: 900px;
}

.sec_lead h3{
    color:#003b6b;
    margin:0 0 35px 0;
    font-size:2.5rem;
}

.text_lead{
    color: #333333;
    line-height: 2.0;
    margin:0 0 15px 0;
}

@media (max-width: 768px) {
    .sec_lead h3{
        margin:35px 0 25px 0;
        font-size:2.3rem;
    }
}

/*黄色*/

.sec_yellow{
   background: linear-gradient(45deg, #81C784 0%, #C5E1A5 100%);
    padding:3% 2%;
}

.sec_yellow h3{
    color:#ffffff;
    margin:0 0 35px 0;
    font-size:2.2rem;
    text-align: center;
}

@media (max-width: 768px) {
    .sec_yellow h3{
        font-size:2.0rem;
    }
}

#wrap_casestudy{
    width: 90%;
    max-width: 960px;
    margin:0 auto;
}

#wrap_casestudy ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#wrap_casestudy li{
    background-color: #FFFFFF;    
    width: 48%;
    margin:0 0 20px 0;
}

#wrap_casestudy li h4{
    text-align: center;
    margin:15px 0 20px 0;
    font-size:2.0rem;
}

#wrap_casestudy li p{
    font-size:1.6rem;
    padding:0 3% 5% 3%;
    text-align: center;
}

/* 車両 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 青 */
/* 青い背景グラデーション */
.sec_blue_g {
    background: linear-gradient(-45deg, #2dc3e4 0%, #e7ecc4 100%);
    padding: 3% 2%;
}

.sec_blue_g h3 {
    text-align: center;
}

/* メインのコンテンツエリア */
.section_car {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0;
   
}

/* 各アイテム（画像＋テキストエリア） */
.section_car .item {
    display: flex;
    align-items: center;
     background-color: #FFFFFF;
    margin-top: 20px;
	 margin-bottom: 20px; 
	padding:15px;
}

/* 画像のスタイル */
.section_car .item img {
    width: 28%;
    height: auto;
    object-fit: cover;
    margin: 0; /* 画像間の余白を削除 */
}

/* テキストエリア */
.section_car .item .text {
    width: 62%;
}



/* レスポンシブ対応（スマホ対応） */
@media (max-width: 768px) {
    .section_car .item {
        flex-direction: column;
        text-align: center;
        gap: 0; /* ギャップをゼロに設定 */
    }

    .section_car .item.reverse {
        flex-direction: column;
    }
 .section_car .item img
   {
        width: 60%;
        margin: 0 auto; /* スマホでは余白リセット */
    }
  
    .section_car .item .text {
        width: 100%;
        margin: 0; /* スマホでは余白リセット */
    }
}

/* テーブルの基本スタイル */
.table-container {
    width: 80%; /* 親要素の幅に合わせる */
    max-width: 100%; /* 最大幅を100%に制限 */
    margin: 20px auto;
    padding: 0 20px; /* 両側に20pxの余白を追加 */
    overflow-x: auto; /* 横スクロール対応 */
}

.responsive-table {
    width: 80%;
    border-collapse: collapse;
    background-color: #fff;
    table-layout: fixed; /* 固定レイアウトにしてはみ出さないように */
	margin: 0px auto;
}

.responsive-table th,
.responsive-table td {
    border: none;
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd; /* 下線のみ */
}

/* ヘッダーのデザイン */
.responsive-table th {
    font-weight: bold;
    width: 30%;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td,
    .responsive-table th {
        display: block;
        width: 95%;
    }

    .responsive-table {
        margin: 0 auto;
    }

    .responsive-table tr {
        margin-bottom: 10px;
    }

    .responsive-table th {
        border: none;
        color: #003b6b;
       
        padding-bottom: 2px; /* 下の余白を小さく設定 */
    }

    .responsive-table td {
        padding-left: 10px;
        position: relative;
    }

    .responsive-table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        color: #333;
    }
}


/* 求人 */

.wrap_paper{
    background-image: url(../recruit/images/back_paper.jpg);
    background-repeat: repeat;
	padding:5%;
	
	margin:25px auto 35px auto;
}

.wrap_paper h4{
	color:#003b6b;
	margin:0 0 25px 0;
	text-align: center;
	font-size:2.2rem;
	
}


.wrap_paper ul {
    list-style: none; /* デフォルトの箇条書きを消す */
    padding: 0;
    display: flex; /* 横並びにする */
    gap: 25px; /* 各項目の間にスペースを追加 */
    flex-wrap: wrap; /* 幅が足りないときは折り返す */
}

.wrap_paper li {
    position: relative;
    padding-left: 25px; /* ✔︎ マークのための余白を確保 */
    font-size: 1.8rem;
    display: flex;
    align-items: center; /* 縦位置を中央揃え */
    white-space: nowrap; /* テキストが折り返されないように */
}

.wrap_paper li::before {
    content: "✔"; /* ✔︎ マークを追加 */
    color: #008596; /* マークの色 */
    font-size: 1.8rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* マークを中央揃え */
}
.table-recruit {
    width: 80%;
    max-width: 700px;
    overflow-x: auto;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 2%;
}

@media (max-width: 768px) {
.wrap_paper h4{
	
	font-size:2.0rem;
	
}
	
	.wrap_paper ul {
   
    gap: 15px; /* 各項目の間にスペースを追加 */
  
}
	
.wrap_paper li {
    position: relative;
    padding-left: 25px; /* ✔︎ マークのための余白を確保 */
    font-size: 1.7rem;
    display: flex;
    align-items: center; /* 縦位置を中央揃え */
    white-space: nowrap; /* テキストが折り返されないように */
}
}


.table-recruit table {
    width: 100%;
    min-width: 300px;
    border-collapse: collapse;
}

.table-recruit th, .table-recruit td {
    padding: 10px;
    text-align: left;
}

.table-recruit th {
    background-color: #f4f4f4;
}

.table-recruit td:first-child {
    width: 25%;
    background-color: #f0f0f0;
    font-weight: bold;
    border-bottom: 1px solid #fff;
}

.table-recruit td:last-child {
    width: 75%;
    border-bottom: 1px solid #ddd;
}

@media (max-width: 768px) {
    .table-recruit {
        width: 95%;
        padding: 1%;
        overflow-x: hidden; /* 横スクロールを防ぐ */
        box-sizing: border-box; /* パディングを含めた幅調整 */
		border-radius: 2%;
    }
    .table-recruit table {
        width: 90%; /* テーブルの幅を100%に設定 */
        border-collapse: collapse;
        margin: 0 auto; /* 余計なマージンを削除 */
    }
    .table-recruit tr {
        margin-bottom: 10px;
        padding: 10px;
        background: #fff;
    }
    .table-recruit th {
        display: none;
    }
    .table-recruit td {
        padding: 10px;
        display: block;
        width: 100%; /* セルが親の幅に合わせて広がる */
        box-sizing: border-box; /* パディング込みで幅を調整 */
    }
    .table-recruit td:first-child {
        font-weight: bold;
        background-color: transparent;
		 width: 100%;
		padding-bottom:0;
    }
	
	.table-recruit td:last-child {
   width: 100%;
		padding-top:0;

}
    .table-recruit td::before {
        content: ''; /* 「項目」「内容」を非表示に */
        display: none;
    }
}
/* スタッフセクション */
.sec_yellow {
    background-color: #ffeb3b;
    padding: 40px 20px;
    text-align: center;
}

#wrap_staff ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 auto;
	max-width: 1200px;
	width: 95%;
}

.staff-item {
    background-color: #ffffff;
    width: 24.5%;
    margin-bottom: 20px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
	border-radius: 3%;
}
@media (max-width: 768px) {
.staff-item {

    width: 48.5%;

}	
}
.staff-item img {
    max-width: 100%;
    height: auto;
    margin-bottom: 5px;
}

.staff-item h4 {
    font-size: 1.6rem;
    margin: 10px 0;
}

/* モーダルウィンドウ */
.modal {
    display: none;
    position: fixed;
    z-index: 9999; /* 最前面に表示 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* モーダルコンテンツ */
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 1000px;
    height: 70vh; /* 通常時の高さ */
    max-height: 80vh;
    transform: scale(0.8);
    animation: scaleIn 0.5s ease-out forwards;
    display: flex;
    flex-direction: column;
}

.modal-iframe-container {
    flex: 1;
    display: flex;
}

#modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* スケールインアニメーション */
@keyframes scaleIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* スマホ対応のメディアクエリ */
@media (max-width: 768px) {
	
	modal {
        z-index: 99999; /* スマホではさらに最前面に */
    }
    .modal-content {
        width: 95%;
        height: 90vh; /* スマホでは縦長に */
        max-height: 95vh;
        margin: 5% auto;
        padding: 15px;
    }

    iframe {
        height: 85vh; /* iframeも縦長に */
    }
}


@media (max-width: 480px) {
    .modal-content {
        width: 98%;
        height: 95vh; /* より縦長に */
        max-height: 100vh;
        margin: 2% auto;
        padding: 10px;
    }

    iframe {
        height: 90vh; /* iframeも縦長に */
    }
}

/* 閉じるボタン */
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    color: #aaa;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}