@charset "utf-8";

/* ========================================================
	recruitment.css => テンプレート用CSS

/* ======================================================== */

		.container-interview {
			max-width: 1100px;
			margin: 0 auto;
		}

 .section {
            display: flex;
            align-items: flex-start; /* 垂直方向の中央揃え */
            margin-bottom: 40px; /* 各セクションの下に余白 */
        }
        .section-reverse {
            flex-direction: row-reverse; /* 左右を反転 */
        }
        .content-block {
            flex: 3; /* 利用可能なスペースを均等に分配 */
        }
        .image-block {
            flex: 2;
            text-align: center; /* 画像を中央揃え */
			padding: 0px 0px 0px 40px;
        }

        .image-block img {
            max-width: 100%; /* 親要素の幅に合わせて画像を縮小 */
            height: auto; /* アスペクト比を維持 */
            display: block; /* 余分な下部スペースを削除 */
            margin: 0 auto; /* 画像を中央揃え */
			border-radius: 20px;
        }
		.section-reverse .image-block {
			padding: 0px 40px 0px 0px;
        }


        /* レスポンシブ対応: 画面が小さい場合は縦並びにする */
        @media (max-width: 768px) {
            .section, .section-reverse {
                flex-direction: column;
            }
            .content-block, .image-block {
                padding: 10px;
            }
        }


        /* Hero Section */
        .hero {
            /*background: linear-gradient(135deg, #2c5aa0 0%, #1e3d72 100%);*/
			color: #1a1a1a;
            padding: 100px 0 0 0;
            text-align: center;
            position: relative;
            overflow: hidden;
			background: url("../images/interview/test.jpg");
 			 /* 画像を常に天地左右の中央に配置 */
  			background-position: center center;
   			/* 画像をタイル状に繰り返し表示しない */
  			background-repeat: no-repeat;
   			/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
			background-attachment: fixed;
   			/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  			background-size: cover;
   			/* 背景画像が読み込まれる前に表示される背景のカラー */
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }

        .hero-content {
            position: relative;
            z-index: 1;
			padding-top: 60px;
        }

        .hero-content header{
            text-align: left;
			margin-top: -25px;
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 700;
            letter-spacing: 2px;
			color:#1e3d72;
        }

        .hero h2 {
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: 1px;
			color:#1e3d72;
        }

        /*.hero-subtitle {
            font-size: 1.6rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }*/

        .employee-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            margin: 40px auto 0;
            max-width: 600px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

 		.employee-card img {
            border-radius: 20px;
        }

        /*.employee-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(45deg, #4a90e2, #357abd);
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            font-weight: bold;
            color: white;
            border: 4px solid rgba(255, 255, 255, 0.3);
        }*/

        .employee-info h2 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }

        /*.employee-role {
            font-size: 1.1rem;
            opacity: 0.8;
        }*/

        /* Main Content */
        /* ここから - コンテンツ範囲開始 */
        .main-content {
            /*padding: 80px 0;*/
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            color: #4a6cf7;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #2c5aa0, #4a90e2);
            border-radius: 2px;
        }

        .section-title p {
            color: #6c757d;
            font-size: 1.1rem;
        }

        /* Interview Section */
        .interview-section {
            max-width: 80%;
            margin: 0 auto;
        }

        .interview-section h2 {
            font-size: 2.5rem;
			font-weight: 600;
			color: #1e3d72;
			line-height: 1.4;
			margin-top: 30px;
			margin-bottom: 30px;
			position: relative;
			padding: 0 40px;
			text-align: center;
        }


		/* 社員インタビュー　テーブル */
        .interview-section table {
            width: 80%;
            margin: 20px auto;
            background-color: #fff;
			border-radius: 15px;
			border-collapse: separate;
			border-spacing: 0;
			border: 1px solid #656565;
        }

        .interview-section table th, td {
            padding: 1.8rem;
            text-align: left;
			font-size: 1.6rem;
        }

        .interview-section table td {
            border-bottom: 1px solid #656565;
        }


        .interview-section table td.time {
            color: #1e40af;
			font-size: 1.6rem;
			font-weight: 700;
        }

		.interview-section table tr:first-child th
		{
		background-color: #1e3d72;
		color: white;
		font-size: 1.8rem;
		font-weight: 700;
		}

		/* Rounded corners for the first row */
		.interview-section table tr:first-child th:first-child {
			border-top-left-radius: 15px;
		}
		.interview-section table tr:first-child th:last-child {
			border-top-right-radius: 15px;
		}

		/* Rounded corners for the last row */
		.interview-section table tr:last-child td:first-child {
			border-bottom-left-radius: 15px;
			border-bottom: 0px;
		}

		.interview-section table tr:last-child td:nth-child(2) {
			border-bottom: 0px;
		}

		.interview-section table tr:last-child td:last-child {
			border-bottom-right-radius: 15px;
			border-bottom: 0px;
		}

		.interview-section table td:last-child {
			border-right: 0px;
		}

        .qa-item {
            margin-bottom: 50px;
            background: #fff;
            border-radius: 15px;
            overflow: hidden;
			border: 1px solid #656565;
            /*box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);*/
            /*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
        }

        .qa-item:hover {
            /*transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);*/
        }

        .question {
            background: linear-gradient(135deg, #2c5aa0, #1e3d72);
            color: white;
            padding: 25px 30px;
            font-weight: 600;
            font-size: 1.8rem;
            position: relative;
			border-radius: 15px 15px 0px 0px;
			border: 1px solid #656565;
        }

        .question::before {
            content: 'Q';
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 3rem;
            font-weight: 700;
            opacity: 0.7;
        }

        .question-text {
            margin-left: 40px;
        }

        .answer {
            padding: 30px;
            background: #fff;
            position: relative;
			border-radius: 0px 0px 15px 15px;
        }

.section-reverse .answer {
			border: 1px solid #656565;
        }

        .answer::before {
            content: 'A';
            position: absolute;
            left: 30px;
            top: 30px;
            font-size: 3rem;
            font-weight: 700;
            color: #4a6cf7;
        }

        .answer-text {
            margin-left: 40px;
            font-size: 1.6rem;
            line-height: 1.8;
        }

        /* Highlight Section */
        .highlight-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 40px 0;
            margin: 40px 0 40px 0;
            text-align: center;
            position: relative;
        }

        .highlight-content {
            max-width: 1200px;
            margin: 0 auto;
        }

        .highlight-quote {
            font-size: 2.5rem;
            font-weight: 600;
            color: #4a6cf7;
            line-height: 1.4;
			margin-top: 30px;
            margin-bottom: 30px;
            position: relative;
            padding: 0 40px;
        }

        .highlight-description {
            font-size: 1.1rem;
            color: #6c757d;
            font-style: italic;
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #2c5aa0 0%, #1e3d72 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
        }

        .cta-content h3 {
            font-size: 2.2rem;
            margin-bottom: 20px;
        }

        .cta-content p {
            font-size: 1.6rem;
            margin-bottom: 40px;
            opacity: 0.9;
        }

        /*
		.cta-button {
            display: inline-block;
            background: #fff;
            color: #4a6cf7;
            padding: 18px 50px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.8rem;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            background: #f8f9fa;
        }
		*/

        /* Footer */
        .footer {
            background: #343a40;
            color: white;
            padding: 50px 0 30px;
        }

        .footer-content {
            text-align: center;
        }

        .footer-nav {
            margin-bottom: 30px;
        }

        .footer-nav a {
            color: white;
            text-decoration: none;
            margin: 0 20px;
            font-size: 1rem;
            transition: color 0.3s ease;
        }

        .footer-nav a:hover {
            color: #4a90e2;
        }

        .footer-copyright {
            color: #adb5bd;
            font-size: 0.9rem;
            border-top: 1px solid #495057;
            padding-top: 20px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1.1rem;
            }

            .employee-card {
                padding: 30px 20px;
                margin: 30px 20px 0;
            }

            .section-title h2 {
                font-size: 2rem;
            }

            .qa-item {
                margin: 0 10px 30px;
            }

            .question,
            .answer {
                padding: 20px;
            }

            .question-text,
            .answer-text {
                margin-left: 30px;
            }

            .highlight-quote {
                font-size: 1.5rem;
                padding: 0 20px;
            }

            .footer-nav a {
                display: block;
                margin: 10px 0;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 0 15px;
            }

            .hero {
                padding: 60px 0;
            }

            .main-content {
                padding: 60px 0;
            }

            .question-text,
            .answer-text {
                margin-left: 0;
            }

            .question::before,
            .answer::before {
                position: static;
                display: block;
                margin-bottom: 10px;
            }
        }

        /* ここまで - コンテンツ範囲終了 */

        /* 採用情報　タイトル */

		.recruitment-page-title
		 {
			font-size: 3rem;
			color: #FFFFFF;
			width: 100%;
			padding-top: 60px;
		}

		@media (max-width: 768px) {
		.recruitment-page-title
	 {
		font-size: 2rem;
		height: 50px;
		color: #FFFFFF;
		width: 100%;
		padding-top: 30px;
	}
		}


        /* 採用情報　募集要項テーブル */
		.recruitment-table {
			width: 80%;
			border: 1px solid #d9d9d9;
			line-height: 1.6;
			font-size: 1.6rem;
			table-layout: fixed;
			margin: 0 auto;
		}

		@media (max-width: 768px) {
	 		.recruitment-table {
			font-size: 1.4rem;
		}
		}

		.recruitment-table th,
		.recruitment-table td {
			padding: 0.6em 1em;
			border: 1px solid #d9d9d9;
			word-wrap:break-word;
		}
		.recruitment-table th {
			background:#f2f2f2;
		}




	 	/*sk-recruitment.cssから抜粋、後に統合*/
		.bottom-cta {
			background: linear-gradient(135deg, #2c5aa0 0%, #1e3d72 100%);
			color: white;
			text-align: center;
			padding: 50px 0;
		}

		.bottom-cta h2 {
			font-size: 3rem;
			font-weight: 700;
			margin-bottom: 20px;
		}

		.bottom-cta p {
			font-size: 2rem;
			font-weight: 700;
			margin-bottom: 40px;
			opacity: 0.9;
		}

		.cta-button {
			background: white;
			color: #4a6cf7;
			border: 4px solid #4a6cf7;
			padding: 15px 40px;
			border-radius: 50px;
			font-size: 2.2rem;
			font-weight: 600;
			text-decoration: none;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.cta-button:hover
		 {
			background: #d8d8d8;
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
		}

body {
    font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}