/* -------------------------------------------------------------
 * 共通設定
 * ---------------------------------------------------------- */
:root {
    font-size: 14px;
    /* font-size */
    --fSizeXXS: 0.7rem;
    --fSizeXS: 0.8rem;
    --fSizeS: 0.9rem;
    --fSizeM: 1.0rem;
    --fSizeL: 1.1rem;
    --fSizeXL: 1.3rem;
    --fSizeXXL: 1.7rem;
    --fSizeXXXL: 2rem;
    /* space-size */
    --sSizeXXS: 0.25rem;
    --sSizeXS: 0.5rem;
    --sSizeS: 0.75rem;
    --sSizeM: 1rem;
    --sSizeL: 1.5rem;
    --sSizeXL: 2rem;
    --sSizeXXL: 3rem;
    /* color set1 */
    --colorBase1: #ffffff;
    --colorBase2: #f7f7f9;
    --colorBaseFont: #333333;
    --colorMain1: #0074bf;
    --colorMain2: #438BC1;
    --colorMain3: #EBF7FF;
    --colorMainFont: #ffffff;
    --colorBorder1: #dadada;
    --colorBorder2: #abb4bd;
    --colorBorder3: #e0e0e0;
    --colorDisabled1: #E7E6E6;
    --colorDisabled2: #B6BEC6;
    --colorDisabledFont: #B6BEC6;
    --colorTableHeader: #EDEDED;
    --colorTableHeaderFont: #333333;
    --colorTableOddRow: #fcfcfc;
    /* color pallet */
    --colorRed1: #FBE5E5;
    --colorRed2: #F7CBCB;
    --colorRed3: #EE8E8E;
    --colorRed4: #E33F3F;
    --colorRed5: #9D1717;
    --colorBlue1: #E5F3FB;
    --colorBlue2: #CBE7F7;
    --colorBlue3: #8ECCEE;
    --colorBlue4: #3FA8E3;
    --colorBlue5: #176D9D;
    --colorYellow1: #FCFAE4;
    --colorYellow2: #FAF5C8;
    --colorYellow3: #F4EA88;
    --colorYellow4: #ECDB36;
    --colorYellow5: #A49610;
    --colorGreen1: #EEF7E9;
    --colorGreen2: #DCEFD3;
    --colorGreen3: #B4DD9F;
    --colorGreen4: #80C55D;
    --colorGreen5: #4C8430;
    --colorWhite: #ffffff;
    --colorGray1: #F4F5F6;
    --colorGray2: #E9EBED;
    --colorGray3: #EBEBEB;
    --colorGray4: #CDD2D7;
    --colorGray5: #B6BEC6;
    --colorBlack1: #ABB4BD;
    --colorBlack2: #6E6E6E;
    --colorBlack3: #5A5A5A;
    --colorBlack4: #464646;
    --colorBlack5: #333333;
}
/* -------------------------------------------------------------
 * html要素
 * ---------------------------------------------------------- */
section + section,
form + section,
section + form {
    margin-top: var(--sSizeXL);
}
section > *,
.section-content > * {
    margin-bottom: var(--sSizeL);
}
section > * > * + *,
.section-content > * > * + * {
    margin-top: var(--sSizeXS);
}
a:hover, button:hover {
    opacity: 0.7;
}
a:hover {
    text-decoration: underline;
}
h3 {
    font-size: var(--fSizeL);
    font-weight: bold;
    padding-bottom: var(--sSizeXXS);
    border-bottom: 1px solid var(--colorBorder2);
    display: inline-flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 425px;
}
input[type="text"], input[type="password"], input[type="search"], textarea, select {
    border: 1px solid var(--colorBorder2);
    border-radius: 1px;
    padding: var(--sSizeXS);
    background-color: var(--colorBase1);
    text-align: left;
}
input[type="search"] {
    background-image: url("../img/icon-search.svg");
    background-repeat: no-repeat;
    background-position: right 8px bottom 50%;
    background-size: 16px 16px;
    padding-right: 24px;
}
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: checkbox;
    appearance: auto;
    margin-right: var(--sSizeXXS);
    position: relative;
    top: -1px;
}
select {
    padding-right: var(--sSizeXL);
    position: relative;
    border-radius: 4px;
    background-image: url(../img/chevron-down-solid.svg);
    background-repeat: no-repeat;
    background-position: right 8px bottom 50%;
    background-size: var(--fSizeXXS);
    text-overflow: ellipsis;
}
input::placeholder, textarea::placeholder {
    color: var(--colorGray5);
}
*:required:invalid {
    background-color: var(--colorRed2);
}
input:disabled, input:read-only,
textarea:disabled, textarea:read-only,
select:disabled {
    background-color: var(--colorDisabled1);
    color: var(--colorDisabledFont);
}
input:disabled::placeholder, input:read-only::placeholder,
textarea:disabled::placeholder, textarea:read-only::placeholder,
select:disabled::placeholder, select:read-only::placeholder {
    color: var(--colorDisabled1);
}
*:focus-visible {
    outline: 1px dashed var(--colorMain1);
}
table {
    border-top: 1px solid var(--colorBorder1);
    border-left: 1px solid var(--colorBorder1);
    width: 100%;
}
table tr {
    background-color: var(--colorBase1);
}
table td, table th {
    border-right: 1px solid var(--colorBorder1);
    border-bottom: 1px solid var(--colorBorder1);
    padding: var(--sSizeS);
    vertical-align: middle;
}
table th {
    background-color: var(--colorTableHeader);
    color: var(--colorTableHeaderFont);
    /* Firefox で擬似要素入れると枠線が消える対応 */
    background-clip: padding-box;
}
/* -------------------------------------------------------------
 * ログイン用カスタマイズ要素
 * ---------------------------------------------------------- */
body {
    display: grid;
    grid-template-rows: 80px minmax(calc(100vh - 120px), auto) 40px;
}
.global-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 80px;
    padding: 0 20px;
    color: #333;
}
main {
    padding: 0 16px;
}
.contents {
    width: clamp(300px, 100%, 600px);
    margin: 54px auto 54px auto;
    padding: 40px 50px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: center;
}
.contents__sub {
    margin-bottom: 10px;
}
.login__title {
    padding-bottom: 40px;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.36;
    text-align: center;
    color: var(--colorMain1);
}
.description {
    font-size: 1.2rem;
    margin-bottom: 26px;
}
.description__sub {
    font-size: 1.2rem;
}
.description__sub a {
    color: var(--colorMain1);
    text-decoration: underline;
}
.description__sub span {
    float: center;
    padding-bottom: 26px;
    text-align: center;
}
.description__sub ul {
    list-style: disc;
    padding-left: 0;
}
.description__sub ul li {
    padding-top: 6px;
    margin-left: 22px;
    text-align: left;
}
.button__body {
    color: #fff;
    background-color: #0074bf;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.6rem;
    border-radius: 4px;
    transition: .3s;
    width: 80%;
    height: 50px;
    margin: auto;
}
.button--secondary .button__body {
    color: #0074bf;
    background-color: #fff;
    border: 1px solid #0074bf;
}
.contents__main-button {
    margin-bottom: 26px;
    text-align: center;
}
.information_area {
    font-size: 1.2rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 30px 40px;
    text-align: left;
    width: clamp(300px, 100%, 600px);
    margin: 20px auto 54px auto;
}
.information_area h3 {
    padding-bottom: 20px;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.36;
    text-align: center;
    color: #0074bf;
    border-bottom: 0;
    display: block;
    width: auto;
}
.information_area a {
    color: var(--colorMain1);
    text-decoration: underline;
}
.information_area span {
    float: left;
    padding-bottom: 20px;
    text-align: left;
}
.information_area ul {
    list-style: disc;
    padding-left: 0;
}
.information_area ul li {
    padding-top: 6px;
    margin-left: 22px;
    text-align: left;
}
footer {
    width: 100%;
    height: 40px;
    background-color: var(--colorBase1);
    align-items: center;
    display: flex;
    padding: var(--sSizeXXS) var(--sSizeXL);
    font-size: var(--fSizeS);
    border-top: 1px solid var(--colorBorder1);
}
footer ul {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    width: 100%;
}
footer ul>li:not(:first-child) {
    margin-left: 10px;
}
footer ul>li a {
    text-decoration: none;
}
footer ul>li.str-footer-copy {
    margin-left: auto;
}
.c-portal-logo {
    margin-left: var(--sSizeL);
}
.c-portal-logo__title {
    font-size: 1.3rem;
    font-weight: bold;
}
.c-question {
    position: relative;
}
.c-question::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url(static/img/icon-faq.png);
    position: relative;
    top: 3px;
    right: 0px;
}