@charset "UTF-8";

/* --------------------------------------------
ヘッダー
---------------------------------------------*/
header {
    width: 100%;
    border-bottom: 3px solid #0345b6;
    background: linear-gradient(#eee, #fff 30px);
    justify-content: space-between;
}

#logo a {
    padding-left: 1rem;
    padding-top: .5rem;
    text-decoration: none;
    display: inline-block
}

#logo img {
    vertical-align: baseline
}

#logo img.compas {
    vertical-align: bottom
}

.yuden_logo a img {
    width: 200px;
}

.yuden_logo a img.with-space {
    padding-top: 1rem;
    padding-right: 1rem;
}

.func_list {
    display: inline-block;
    vertical-align: bottom;
    list-style: none
}

.func:before {
    font-family: Font AweSome\ 5 Free;
    font-weight: 900;
    content: "\f0a9";
    color: #666666
}

.func {
    display: table-cell;
    white-space: nowrap;
    font-size: .8rem;
    padding-right: 1rem;
    position: relative
}

.func a,
.func span {
    cursor: pointer;
    color: #333;
    text-decoration: none
}

.func ul {
    display: none;
    list-style: none;
    position: absolute;
    top: 1.2rem;
    z-index: 1001;
    background: #666;
    padding: .2rem;
    padding-right: .5rem;
    text-align: left;
    border-radius: 0 0 .5rem .5rem
}

.func ul li {
    padding: .1rem;
    border-bottom: 1px dashed #fff
}

.func ul li a {
    padding: .2rem 2rem .2rem .5rem;
    color: #fff
}

.func ul li:first-child {
    border-bottom: 1px solid red
}

.func ul li:last-child {
    border-width: 0
}

.func ul li:hover {
    background-color: #000
}

.func:last-child {
    padding-right: 0
}

.navbar {
    padding: 0 8px 8px 8px;
}

ul.func_list {
    padding: 0;
}

.nav-link {
    cursor: pointer;
    color: #333;
    text-decoration: none;
}

.header_menu:hover {
    color: #333;
}

.menu {
    padding: 0;
}

/* --------------------------------------------
フッター
---------------------------------------------*/
footer {
    width: 100%;
    text-align: center;
    border-top: 1px #b9b9b9 solid;
    font-size: .9rem;
    padding: 0.5em 0;
}

#PageFooter,
#footerLink {
    display: inline-block
}

#PageFooter {
    color: #888;
    float: left;
    margin-left: 1rem
}

#footerLink {
    float: right;
    margin-right: 1rem;
    position: relative;
}

.link-item {
    padding: 0 8px;
    position: relative;
}

.link-item:not(:first-child) {
    border-left: 1px solid #888;
}

.inquiry {
    color: #136299;
}

.inquiry:hover {
    color: #0c67fe;
    text-decoration: none;
}

/* --------------------------------------------
コンポーネント
---------------------------------------------*/
.l-wrapper {
    max-width: 980px;
    margin: 40px auto;
}

.btn-accent {
    font-weight: bold;
    border-radius: 16px;
    background-color: #E60012;
    border-color: #E60012;
    padding: 4px 24px;
}

.btn.btn-accent:hover,
.btn-accent:hover {
    background-color: #C60012;
    border-color: #C60012;
}

.btn.btn-accent:active,
.btn-accent:active {
    background-color: #C60012;
    border-color: #C60012;
}

.btn.btn-accent:disabled,
.btn-accent:disabled {
    background-color: #E60012;
    border-color: #E60012;
}

.alert-requesting {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: #b6360b;
    --bs-alert-border-color: #b6360b;
}

.alert-accepted {
    --bs-alert-color: #ffffff;
    --bs-alert-bg: #24b70e;
    --bs-alert-border-color: #24b70e;
}

.c-card {
    background: #fff;
    border: solid 1px #aaa;
    border-radius: 2px;
    padding: 16px;
}

.c-card__body {
    margin: 0 auto;
}

.c-card__ttl {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: solid 1px #979BA2;
}

.c-input {
    padding-top: 16px;
}

.c-input__form {
    width: 100%;
}

.c-input__ttl {
    font-weight: bold;
}

@media (max-width:768px) {
    .c-input {
        padding-top: 8px;
    }
}

.text-divider {
    color: #666;
    margin: 0 auto;
    align-items: center;
}

.text-divider::before,
.text-divider::after {
    content: '';
    height: 1px;
    background-color: #aaa;
    flex-grow: 1;
}

.text-divider::before {
    margin-right: 8px;
}

.text-divider::after {
    margin-left: 8px;
}

.attention {
    font-weight: bold;
}

/* --------------------------------------------
ユーザーログイン画面
---------------------------------------------*/
.mainbg {
    background-color: #d2e8f6;
}

.ps_forget {
    color: #136299;
    text-decoration: underline;
}

.ps_forget:hover {
    color: #0c67fe;
    text-decoration: none;
}

/* --------------------------------------------
ユーザーホーム画面
---------------------------------------------*/
.account-table {
    background: #fff;
    border: solid 1px #aaa;
}

.account-table th,
.account-table td {
    padding: 4px 16px;
}

.account-table th {
    color: #fff;
    font-weight: bold;
    background-color: #1A85D3;
}

.account-table th:first-child {
    border-bottom: solid 1px #fff;
}

.account-table tr:first-child {
    border-bottom: solid 1px #aaa;
}

@media (max-width:768px) {

    .account-table th,
    .account-table td {
        display: block;
        border: none;
    }
}

.info_table th {
    white-space: nowrap;
    background-color: #2f79b8;
    color: #fff;
    font-weight: 400;
    padding: 4px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 3px solid #47adff;
}

.info_table th:last-child {
    border-right: none;
}

.Listline:nth-child(odd) {
    background-color: #ffffff;
}

.Listline:nth-child(even) {
    background-color: #f0f0f0;
}

.Listline td {
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    padding: 2px 16px;
    white-space: nowrap;
}

.Listline span {
    padding-right: 8px;
}

/* --------------------------------------------
新規登録画面
---------------------------------------------*/
.scrollable-box {
    max-height: 250px;
    /* 枠の最大の高さ */
    overflow-y: auto;
    /* Y軸スクロールを有効にする */
    border: 1px solid #ccc;
    padding: 10px;
}

/* --------------------------------------------
ログイン後情報編集画面
---------------------------------------------*/
@media (max-width:768px) {
    .alert-text {
        font-size: 12px;
    }
}

/* --------------------------------------------
その他
---------------------------------------------*/
.leading-spaces {
    /* テキストの先頭に空白を挿入する */
    text-indent: 1em;
}