@charset "utf-8";

/* CSS information ===================================================

     file name : kamaboko_login.css
    style info : かまぼこ博物館ログイン画面用スタイル

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

/* Basic reset and font setup */
body {
    font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'sans-serif';
    margin: 0;
    padding: 0;
    color: #000;
    background-color: #FFF;
    /* スマホで余白が出ないように min-width を削除または調整 */
    /* min-width: 320px; は @media 内に移動するか、必要に応じて調整 */
}

input, textarea, button {
    font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'sans-serif';
}

/* Clearfix utility */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.clearfix {
    min-height: 1px;
}

/* Page container */
#page {
    background: #FFF;
}

.change_area {
    font-size: 100%;
}

.inner {
    margin: 0 auto;
    /* PC表示での最大幅は維持しつつ、スマホでは柔軟に対応 */
    max-width: 960px;
    /* box-sizing は @media 内で一括指定されているため、ここでは不要 */
}

/* Content structure */
.content_outer {
    clear: both;
    margin: 0 auto;
}

.content {
    clear: both;
    /* PC表示の幅は維持しつつ、スマホで100%になるようにする */
    width: 914px;
    margin: 0 auto 40px;
    background-color: #FFF;
    /* box-sizing: border-box; を追加して、paddingやborderがwidthに含まれるようにする */
    box-sizing: border-box;
}

.section {
    clear: both;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    background: transparent;
    box-sizing: border-box;
}

.section .inner {
    float: left;
    /* PC表示の幅は維持しつつ、スマホで100%になるようにする */
    width: 860px;
    padding: 20px 20px 10px;
    background-color: #FFF;
    box-sizing: border-box;
}

.section h1 {
    float: left;
    /* PC表示の幅は維持しつつ、スマホで100%になるようにする */
    width: 900px;
    border-bottom: 2px solid #cac4b7;
    background-color: #FFF;
    box-sizing: border-box;
}

.section h1 span.title {
    float: left;
    color: #333;
    font-size: 123.1%;
    line-height: 26px;
    margin: 7px 0 7px 7px;
    padding-left: 15px;
    font-weight: bold;
    display: block;
    box-sizing: border-box;
}

/* Form heading styles */
.section h2 {
    clear: both;
    padding: 7px 10px;
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: bold;
    border-left: solid 3px #888;
    background-color: #F9F9F9;
    box-sizing: border-box;
}

.section p {
    clear: both;
    margin-bottom: 20px;
    line-height: 1.6;
    box-sizing: border-box;
}

/* Form table styles based on sample */
.normal_tbl {
    clear: both;
    /* PC表示の幅は維持しつつ、スマホで100%になるようにする */
    width: 860px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.normal_tbl th {
    width: 200px; /* PC表示では固定幅を維持 */
    padding: 2em 2em;
    vertical-align: middle;
    background-color: #f5f2e9;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    box-sizing: border-box;
}

.normal_tbl th.loginTitle {
    background-color: #f5f2e9;
}

.normal_tbl th.secretTitle {
    background-color: #f5f2e9;
}

.normal_tbl td {
    padding: 2em 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}

/* Input field styles */
input[type=text],
input[type=password],
input[type=email],
input[type=tel],
textarea,
select {
    margin: 1px 0;
    padding: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* ここにも追加 */
}

.pc_300px {
    width: 300px !important; /* PC表示では固定幅を維持 */
    box-sizing: border-box;
}

.make_good {
    margin-left: 0.5em;
    font-size: 85%;
    color: #888;
}

/* Alert/notice styles */
ul.alert {
    clear: both;
    margin-bottom: 20px;
    box-sizing: border-box;
}

ul.alert li {
    padding-bottom: 5px;
    font-size: 93%;
    line-height: 1.4;
    box-sizing: border-box;
}

/* Special styling for login section buttons */
.suzuhiro_login_input_single {
    width: 400px; /* PC表示では固定幅を維持 */
    margin: 0 auto 20px;
    box-sizing: border-box;
}

.suzuhiro_login_input_single a.submit,
.suzuhiro_login_input_single input[type=submit],
.suzuhiro_login_input_single input[type=button] {
    width: 100%;
    margin: 0 auto;
    padding: 15px 10px;
    font-size: 116%;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    color: #FFF !important;
    background-color: #003F73;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    border-radius: 10px;
}

.suzuhiro_second_btn {
    background-color: #505050 !important;
}

.suzuhiro_login_input_single a.submit:hover,
.suzuhiro_login_input_single input[type=submit]:hover,
.suzuhiro_login_input_single input[type=button]:hover {
    background-color: #3a88de;
}

.suzuhiro_second_btn:hover {
    background-color: #686868 !important;
}

/* Login form specific message */
.suzuhiro_login_input_button_body {
    font-weight: bold;
    color: red;
    text-align: center;
    box-sizing: border-box;
}

/* Link colors matching sample */
a:link,
a:visited {
    color: #003F73;
}

a:hover,
a:active {
    color: #E9459B;
}

/* Margin utility */
.mb_50px {
    margin-bottom: 50px !important;
}

#guest-login {
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Responsive styles for mobile devices */
@media only screen and (max-width: 767px) {
    /* 全ての要素に box-sizing: border-box; を適用し、パディングやボーダーを幅に含める */
    * {
        box-sizing: border-box;
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-width: 320px; /* スマートフォンでの最低幅を設定 */
        -webkit-text-size-adjust: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .content {
        clear: both;
        padding: 0 10px; /* 左右に少しパディングを追加して端に寄りすぎないようにする */
        margin: 0 auto 10px;
        width: 100%;
    }

    .section .inner {
        clear: both;
        padding: 15px 10px 10px; /* PCと共通の左右パディングで幅を計算しやすくする */
        width: 100%;
    }

    /* h1要素の固定幅を解除し、paddingで調整 */
    .section h1 {
        width: 100%; /* 固定幅を解除 */
        /* padding-left: 15px; は span.title にあるのでここでは不要 */
    }

    /* span.title のマージンを調整し、はみ出しを抑える */
    .section h1 span.title {
        margin: 7px 0 7px 0; /* 左マージンを0にするか、必要に応じて調整 */
        padding-left: 10px; /* タイトルの左パディング */
        width: calc(100% - 10px); /* 親の幅からパディング分を引く */
    }

    .normal_tbl {
        clear: both;
        width: 100%; /* 固定幅を解除 */
        margin-bottom: 20px;
    }

    .normal_tbl th {
        /* スマホではthもtdも100%幅で縦に積む */
        width: 100%; /* 固定幅を解除 */
        padding: 1em 10px; /* 左右のパディングを調整 */
        font-weight: bold;
        vertical-align: middle;
        background-color: #f5f2e9;
        display: block;
    }

    .normal_tbl td {
        /* スマホではthもtdも100%幅で縦に積む */
        width: 100%; /* 必要に応じて追加 */
        padding: 8px 10px; /* 左右のパディングを調整 */
        font-size: 116%;
        display: block;
    }

    input[type=text],
    input[type=password],
    input[type=email],
    input[type=tel],
    textarea,
    select {
        width: 100%; /* スマホでは必ず100%幅 */
        box-sizing: border-box; /* inputにもbox-sizingを徹底 */
        padding: 8px; /* パディングを調整して見やすく */
        font-size: 100%; /* フォントサイズも調整 */
    }

    /* .pc_300px はスマホでは無効にするか、width: auto; に上書きする */
    .pc_300px {
        width: 100% !important; /* スマホでは100%幅に上書き */
    }

    .suzuhiro_login_input_single {
        width: 90%;
        margin: 20px auto 20px;
    }

    .suzuhiro_login_input_single a.submit,
    .suzuhiro_login_input_single input[type=submit],
    .suzuhiro_login_input_single input[type=button] {
        margin: 0 auto;
        padding: 20px 10px;
        font-size: 110%;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        line-height: 1.2;
        color: #FFF !important;
        background-color: #003F73;
        border: none;
        box-sizing: border-box;
        border-radius: 10px;
        cursor: pointer;
        display: block;
    }

    /* 追加：必要に応じてフォーム要素のマージンなどを調整 */
    .suzuhiro_login_input_button_body {
        padding: 0 10px; /* 左右にパディングを追加 */
    }

    .make_good {
        display: block; /* 縦並びにしてはみ出しを防ぐ */
        margin-left: 0; /* マージンを調整 */
        margin-top: 5px;
    }

}