/* recruit.html専用のスタイルシート */
/* 全体スタイルの調整 */
body {
    font-family: 'メイリオ', cursive, sans-serif;
    background-color: #ffe4e1; /* 背景色をライトピンクに設定 */
}

/* ヘッダー */
header {
    background-color: #ff69b4; /* ヘッダーの背景色をホットピンクに設定 */
    color: #fff; /* ヘッダーの文字色を白に設定 */
    padding: 10px 0;
    text-align: center;
}

header h1 {
    color: #fff; /* タイトルの文字色を白に設定 */
}
/* ナビゲーションのスタイル */
nav ul {
    list-style: none; /* リストスタイルを削除 */
    padding: 0;
    margin: 0;
    display: flex; /* 横並びにする */
    justify-content: center; /* 中央揃え */
}

nav ul li {
    margin: 0 10px; /* リストアイテム間の間隔を設定 */
}

nav ul li a {
    display: block;
    padding: 10px 20px; /* パディングを追加 */
    background-color: #ff69b4; /* ボックスの背景色を黒に設定 */
    color: #fff; /* 文字色を白に設定 */
    text-decoration: none; /* 下線を削除 */
    border-radius: 5px; /* 角を丸くする */
    transition: background-color 0.3s ease; /* 背景色のトランジション効果 */
}

nav ul li a:hover {
    background-color: #ff1493; /* ホバー時の背景色をディープピンクに変更 */
}

/* スライダーのスタイル */
#slider {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}

.slider-container {
    display: flex;
    width: 100%; /* スライド数によって調整 */
    animation: slide 15s infinite;
}

.slide {
    flex: 1 0 100%; /* 各スライドがコンテナ全体の100%を取るように設定 */
    display: flex;
    justify-content: center; /* 画像を中央揃え */
    align-items: center; /* 画像を垂直方向に中央揃え */
     margin: 0; /* スライド間の余白をゼロに設定 */
    padding: 0; /* スライド内の余白をゼロに設定 */
}

.slide img {
    width: 50%; /* 画像の幅を60%に設定（変更可能） */
    height: auto;
    max-width: 300px; /* 最大幅を300pxに設定（必要に応じて調整） */
    margin: 0;
    display: block;
}

/* スライドアニメーション */
@keyframes slide {
    0% { transform: translateX(0%); }
    33% { transform: translateX(0%); }
    38% { transform: translateX(-100%); }
    71% { transform: translateX(-100%); }
    76% { transform: translateX(-200%); }
    100% { transform: translateX(-200%); }
}
/* 点滅アニメーション */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.blinking-text {
    animation: blink 1s infinite; /* 1秒ごとに点滅、無限ループ */
}

/* メインコンテンツ */
main {
    padding: 20px;
    background-color: #fff0f5; /* 背景色をラベンダーブラッシュに設定 */
    border-radius: 15px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽いシャドウを追加 */
    max-width: 800px; /* 最大幅を800pxに設定 */
    margin: 20px auto; /* 中央揃え */
}

/* セクションタイトル */
main h5 {
    color: #ff69b4; /* タイトルの文字色をホットピンクに設定 */
    text-align: center; /* 中央揃え */
    font-size: 2rem; /* フォントサイズを2remに設定 */
    margin-bottom: 10px;
    :}
    h3{
    color: #ff69b4; /* 見出しの文字色をホットピンクに設定 */
    text-align: center; /* 中央揃え */
}

/* セクション内の見出し */
.recruit-container h3{
    color: #ff69b4; /* 見出しの文字色をホットピンクに設定 */
}
.recruit-container h4 {
    color: #ff69b4; /* 見出しの文字色をホットピンクに設定 */
    margin-bottom: 10px;
}

/* セクション内のテキスト */
.recruit-container p {
    color: #333; /* テキストの文字色を濃い灰色に設定 */
    line-height: 1.6; /* 行間の調整 */
    margin-bottom: 10px;
}

.recruit-container strong {
    color: #ff69b4; /* 強調テキストの文字色をホットピンクに設定 */
}
/* メール応募のスタイル */
.centered-title {
    text-align: center; /* 中央揃え */
    font-weight: bold; /* 太字に設定 */
 
    margin-bottom: 20px; /* 下にマージンを追加 */
  
}
/* フォーム */
form {
    background-color: #fff; /* 背景色を白に設定 */
    padding: 20px; /* 20pxのパディングを追加 */
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽いシャドウを追加 */
    max-width: 600px; /* 最大幅を600pxに設定 */
    margin: 20px auto; /* 中央揃え */
}

.form-group label {
    font-weight: bold; /* 太字に設定 */
    color: #ff69b4; /* ラベルの文字色をホットピンクに設定 */
}

.form-group input,
.form-group textarea {
    width: calc(100% - 20px); /* 幅を100%に設定し、パディングの分を差し引く */
    padding: 10px; /* 10pxのパディングを追加 */
    border: 1px solid #ddd; /* 薄い灰色のボーダーを追加 */
    border-radius: 5px; /* 角を丸くする */
    margin-bottom: 10px; /* 下に10pxのマージンを追加 */
}

/* ボタン */
button {
    background-color: #ff69b4; /* 背景色をホットピンクに設定 */
    color: #fff; /* 文字色を白に設定 */
    border: none; /* ボーダーを削除 */
    padding: 10px 50px; /* パディングを追加 */
    border-radius: 5px; /* 角を丸くする */
    cursor: pointer; /* カーソルをポインターに変更 */
    transition: background-color 0.3s ease; /* 背景色のトランジション効果 */
    display: block; /* ボタンをブロック要素として表示 */
    margin: 20px auto 0 auto; /* 上下のマージンを20px（上）と自動（左右）に設定し、中央揃え */
}

button:hover {
    background-color: #ff1493; /* ホバー時の背景色をディープピンクに変更 */
}

/* LINE応募セクション */
.line-apply {
    background-color: #fff; /* 背景色を白に設定 */
    padding: 20px; /* 20pxのパディングを追加 */
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽いシャドウを追加 */
    max-width: 600px; /* 最大幅を600pxに設定 */
    margin: 20px auto; /* 中央揃え */
    text-align: center; /* 中央揃え */
}

.line-qrcode {
    max-width: 150px; /* 最大幅を150pxに設定 */
    margin: 10px auto; /* 上下10pxのマージン、自動で中央揃え */
    display: block; /* ブロック要素として表示 */
}

.line-link {
    display: inline-block; /* インラインブロック要素として表示 */
    margin-top: 10px; /* 上に10pxのマージンを追加 */
    padding: 10px 20px; /* パディングを追加 */
    background-color: #00c300; /* 背景色を緑に設定 */
    color: #fff; /* 文字色を白に設定 */
    text-decoration: none; /* 下線を削除 */
    border-radius: 5px; /* 角を丸くする */
    transition: background-color 0.3s ease; /* 背景色のトランジション効果 */
}

.line-link:hover {
    background-color: #009a00; /* ホバー時の背景色を濃い緑に設定 */
}

/* 電話応募セクション */
.phone-apply {
    background-color: #fff; /* 背景色を白に設定 */
    padding: 20px; /* 20pxのパディングを追加 */
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽いシャドウを追加 */
    max-width: 600px; /* 最大幅を600pxに設定 */
    margin: 20px auto; /* 中央揃え */
    text-align: center; /* 中央揃え */
}

.phone-link {
    display: inline-block; /* インラインブロック要素として表示 */
    margin-top: 10px; /* 上に10pxのマージンを追加 */
    padding: 10px 20px; /* パディングを追加 */
    background-color: #007bff; /* 背景色を青に設定 */
    color: #fff; /* 文字色を白に設定 */
    text-decoration: none; /* 下線を削除 */
    border-radius: 5px; /* 角を丸くする */
    transition: background-color 0.3s ease; /* 背景色のトランジション効果 */
}

.phone-link:hover {
    background-color: #0056b3; /* ホバー時の背景色を濃い青に設定 */
}

/* 応募フォームとLINE応募 */
.recruit-container {
    display: flex; /* フレックスボックスでレイアウト */
    flex-direction: column; /* 縦方向に並べる */
    gap: 20px; /* コンテナ間の間隔を20pxに設定 */
    margin-top: 20px; /* 上に20pxのマージンを追加 */
    align-items: center; /* 中央揃え */
}

.recruit-container h5 {
    text-align: center; /* 中央揃え */
    color: #ff69b4; /* オレンジ色に設定 */
    margin-top: 0; /* 上マージンをゼロに設定 */
    font-weight: bold; /* 太字に設定 */
    font-size: 1.5rem; /* フォントサイズを1.5remに設定 */
}

.recruit-container p {
    margin-bottom: 10px; /* 下に10pxのマージンを追加 */
    line-height: 1.6; /* 行間の調整 */
    font-size: 1rem; /* フォントサイズを1remに設定 */
    text-align: center; /* 中央揃え */
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .recruit-container {
        flex-direction: column; /* 縦方向に並べる */
        gap: 20px; /* 各アイテム間の間隔を20pxに設定 */
    }

    form {
        max-width: 100%; /* フォームの最大幅を100%に設定 */
        padding: 10px; /* パディングを10pxに設定 */
    }

    .line-apply, .phone-apply {
        max-width: 100%; /* 最大幅を100%に設定 */
        padding: 10px; /* パディングを10pxに設定 */
    }
}