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

	file name  : campt_error.css

    このcssは、下記のテンプレートで自動生成されるhtmlを対象としたレスポンシブデザイン対応版となります。
    frame.html
    index.html

	ブレイクポイント：768px

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

@charset "UTF-8";

/* クラシックスクロールバー対策 */
:where(html) {
    scrollbar-gutter: stable both-edges;
}

/* frame.html ここから */

/* header */
header {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    padding: 0.5rem;
}

/* main */
#main {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main .inner {
    width: 100%;
    height: auto;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* footer */
#footer {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    padding: 0.5rem;
}

#footer .inner {
    width: 100%;
    height: auto;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #4a0000;
}

#footer .inner div {
    line-height: normal;
    text-align: justify;
    word-break: break-all;
}

/* mainタグの高さが画面より短い場合にfooterを下部に配置 */
html,
body {
    height: 100%;
    margin: 0;
    background-color: #f2eff7;
}

div#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

div#page>header {
    flex-shrink: 0;
}

div#page>main#main {
    flex: 1 0 auto;
}

div#page>footer#footer {
    flex-shrink: 0;
}

/* frame.html ここまで */

/* index.html ここから */

/* visually-hidden */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* メインコンテンツの隙間を調整 */
#main #content {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
}

#main #content .error-title {
    width: 100%;
    height: auto;
    background-color: #ec3434;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 1rem;
}


#main #content .error-title h2.error-title-text {
    color: #ffffff;
    margin: 0.83em;
    text-align: justify;
    word-break: break-all;
}


#main #content figure {
    width: 100%;
    margin: 1rem 0;
}

#main #content figure img {
    width: 100%;
    height: auto;
}

#main #content .error-message {
    width: 100%;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    margin: 0 1rem;
}

#main #content .error-message .error-message-text {
    font-size: 1.2em;
    line-height: 1.6em;
    color: #333;
    text-align: justify;
    word-break: break-all;
}

#main #content .error-message .error-message-text span {
    font-weight: bold;
}


#main #content .error-message .error-message-text:not(:first-of-type) {
    margin-top: 1.2em;
}

/* index.html ここまで */