@charset "UTF-8";

/* ==========================================================================//
//
//　概　要：　汎用性プロパティ
//　説　明：　文字、余白、表示位置などのプロパティ毎のクラスを定義
//
// ========================================================================== */

/** -------------------------------- **
	表示切替
*** ----------------------------------------------------------------- ***/
.dp_block_sp { display: none !important; }

@media only screen and (max-width: 767px) {
    .dp_block_sp { display: block !important; }
}





/* ==========================================================================//
//
//　概　要：　汎用性パーツ
//　説　明：　ボタン、リンク、タイトルなどの細かなパーツを定義
//
// ========================================================================== */

/* ----------------------------------------------------------
	タイトル
---------------------------------------------------------- */
.ttl_border {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: min(calc(40 / 1170 * 100vw), 40px);
    color: #333;
    font-size: min(calc(28 / 1170 * 100vw), 28px);
    font-family: 'Noto Serif', serif;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.1em;
    word-break: break-word;
    text-align: center;
}
.ttl_border::before,
.ttl_border::after {
    content: '';
    display: inline-block;
    width: min(calc(35 / 1170 * 100vw), 35px);
    height: 1px;
    background-color: #000;
}
.ttl_border::before {
    margin-right: min(calc(30 / 1170 * 100vw), 30px);
}
.ttl_border::after {
    margin-left: min(calc(30 / 1170 * 100vw), 30px);
}
@media only screen and (max-width: 767px) {
    .ttl_border {
        margin-bottom: calc(30 / 375 * 100vw);
        font-size: calc(18 / 375 * 100vw);
    }
    .ttl_border::before,
    .ttl_border::after {
        width: calc(27 / 375 * 100vw);
    }
    .ttl_border::before {
        margin-right: calc(19 / 375 * 100vw);
    }
    .ttl_border::after {
        margin-left: calc(19 / 375 * 100vw);
    }
}





/* ==========================================================================//
//
//　概　要：　汎用性レイアウト
//　説　明：　見出し、リード文などの大まかなパーツを定義
//
// ========================================================================== */

/** -------------------------------- **
	パンくずリスト
*** ----------------------------------------------------------------- ***/
.breadcrumb {
    padding-top: min(calc(100 / 1090 * 100vw), 100px);
}
@media only screen and (max-width: 767px) {
    .breadcrumb {
        padding-top: calc(100 / 375 * 100vw);
    }
}


/** -------------------------------- **
	見出し
*** ----------------------------------------------------------------- ***/
.headline_block {
    background: url("../images/bg_bubble.png") no-repeat center center/cover;
}
@media only screen and (max-width: 767px) {
    .headline_block {
        background: url("../images/bg_bubble_sp.png") no-repeat center center/cover;
    }
}

.headline_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1090px;
    min-height: min(calc(190 / 1090 * 100vw), 190px);
    margin: 0 auto;
    padding: min(calc(30 / 1090 * 100vw), 30px) min(calc(40 / 1090 * 100%), 40px);
}
@media only screen and (max-width: 767px) {
    .headline_inner {
        min-height: calc(122 / 375 * 100vw);
        padding: calc(15 / 375 * 100vw) calc(20 / 375 * 100vw);
    }
}

.headline_title {
    color: #333;
    font-size: min(calc(32 / 1170 * 100vw), 32px);
    font-family: 'Noto Serif', serif;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1em;
    word-break: break-word;
    text-align: center;
}
@media only screen and (max-width: 767px) {
    .headline_title {
        font-size: calc(22 / 375 * 100vw);
    }
}


/** -------------------------------- **
	ログイン
*** ----------------------------------------------------------------- ***/
.login_block {
    max-width: 1090px;
    margin: 0 auto;
    padding: 88px min(calc(40 / 1090 * 100%), 40px) 0;
}
@media only screen and (max-width: 767px) {
    .login_block {
        padding: calc(40 / 375 * 100vw) calc(20 / 375 * 100%) 0;
    }
}

.login_password {
    max-width: 620px;
    margin: 23px auto 0;
}
@media only screen and (max-width: 767px) {
    .login_password {
        margin: calc(23 / 375 * 100vw) auto 0;
    }
}

.login_password_label {
    margin-bottom: 10px;
    color: #6C6C6C;
    font-size: 12px;
    font-family: 'Noto Serif', serif;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    word-break: break-word;
}
@media only screen and (max-width: 767px) {
    .login_password_label {
        margin-bottom: calc(10 / 375 * 100vw);
        font-size: calc(12 / 375 * 100vw);
    }
}

.login_password_input {
    margin-top: 10px;
}
.login_password_input > input[type="password"] {
    display: block;
    width: 100%;
    padding: 14px 20px;
    color: #9d8850;
    font-size: 16px;
    font-family: 'Noto Serif', serif;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    border: 1px solid #9d8850;
}
.login_password_input > input[type="password"]::placeholder {
    color: rgba(181, 154, 99, 0.5);
}
@media only screen and (max-width: 767px) {
    .login_password_input {
        margin-top: calc(10 / 375 * 100vw);
    }
    .login_password_input > input[type="password"] {
        padding: calc(14 / 375 * 100vw) calc(20 / 375 * 100vw);
        font-size: calc(16 / 375 * 100vw);
    }
}

.login_password_error {
    margin-top: 10px;
    font-size: 14px;
    font-family: 'Noto Serif', serif;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1em;
    word-break: break-word;
    text-align: center;
}
@media only screen and (max-width: 767px) {
    .login_password_error {
        margin-bottom: calc(10 / 375 * 100vw);
        font-size: calc(14 / 375 * 100vw);
    }
}

.login_submit {
    max-width: 150px;
    margin: 20px auto 0;
}
@media only screen and (max-width: 767px) {
    .login_submit {
        max-width: calc(150 / 375 * 100vw);
        margin: calc(20 / 375 * 100vw) auto 0;
    }
}

.login_submit_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0.5em 1em;
    font-size: 14px;
    color: #fff;
    font-family: 'Noto Serif', serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    word-break: break-word;
    border: 1px solid #9d8850;
    background-color: #9d8850;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}
.login_submit_button:hover {
    color: #9d8850;
    border: 1px solid #9d8850;
    background-color: #fff;
    opacity: 1;
}
@media only screen and (max-width: 767px) {
    .login_submit_button {
        min-height: calc(52 / 375 * 100vw);
        font-size: calc(14 / 375 * 100vw);
    }
}