@charset "UTF-8";

/* styles_random.css */

/* ベースフォントのスタイルを調整 */
body {
    font-family: "Yu Gothic", "Meiryo", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #e8f0f2; /* 背景色を目に優しい淡い水色に */
    color: #333; /* テキストカラーを落ち着いたトーンに */
}

/* ヘッダースタイル */
h1, h2 {
    text-align: center;
    color: #336; /* 見出しの色を目に優しい深いブルーに */
}

h1 {
    font-size: 18px;
    padding-bottom: 10px; /* 見出し下の余白を維持 */
}

h2 {
    font-size: 16px;
    padding-bottom: 8px;
}

/* ナビゲーションのスタイル */
nav {
    text-align: center;
    margin-bottom: 20px;
}

nav a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    background-color: #ffffff;
    color: #333;
    border-radius: 5px;
    margin: 5px;
    border: 1px solid #aaa; /* ボーダー色を少し柔らかいグレーに */
    transition: background-color 0.3s ease;
}

nav a:hover {
    background-color: #d3e0e5; /* ホバー時に少し淡い色に変える */
}

/* 画像のスタイル */
img {
    max-width: 100%; /* スマホに合わせて画像を拡大縮小 */
    height: auto;
}


/* ボタンのスタイル */
button, input[type="submit"], input[type="reset"] {
    padding: 10px 15px;
    background-color: #f0f7f9;
    color: #333;
    border: 1px solid #999;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 5px 0;
}


button:hover, input[type="submit"]:hover, input[type="reset"]:hover {
    background-color: #d0e9ec; /* ホバー時に少し濃い色に */
}


/* フォームのスタイル */
form {
    max-width: 95%; /* 幅を95%に変更 */
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}

input[type="text"], input[type="password"], input[type="email"], input[type="file"], textarea {
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* レスポンシブデザイン */
@media screen and (max-width: 600px) {
    nav a {
        padding: 10px;
        font-size: 14px; /* スマホでは少し小さく */
    }

    input[type="text"], input[type="file"], textarea {
        padding: 8px;
        font-size: 14px;
    }

    button, input[type="submit"], input[type="reset"] {
        padding: 8px;
        font-size: 14px;
    }
}


/* セレクトボックスのスタイル */
select {
    padding: 10px; /* クリックしやすいように十分なパディングを追加 */
    margin-bottom: 10px; /* 下に余白を追加 */
    border: 1px solid #ccc; /* 枠線を追加 */
    border-radius: 5px; /* 角を少し丸める */
    background-color: #f0f7f9; /* 背景色を柔らかい青緑色に */
    font-size: 16px; /* フォントサイズを少し大きめに */
    appearance: none; /* デフォルトの矢印アイコンを非表示に */
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
}

select:focus {
    outline: none; /* フォーカス時の枠線を消す */
    border-color: #888; /* フォーカス時の枠線色を変える */
}

/* セレクトボックス用のカスタム矢印 */
.select-container {
    position: relative;
    display: inline-block;
    width: 95%; /* 幅を95%にしてレスポンシブ対応 */
}

.select-container::after {
    content: '▼'; /* カスタム矢印を追加 */
    font-size: 12px;
    color: #333;
    position: absolute;
    top: 50%;
    right: 10px;
    pointer-events: none;
    transform: translateY(-50%);
}

.select-container select {
    padding-right: 30px; /* 矢印分のスペースを追加 */
}

/* レスポンシブ対応 */
@media screen and (max-width: 600px) {
    select {
        font-size: 14px; /* スマホ画面用にフォントサイズを調整 */
    }
}