@charset "UTF-8";
/*
 * お問い合わせ CSS
*/

/*パンくずリスト*/
.breadcrumbs {
    top: 150px;
}

/*急患の場合*/
.emergency-call {
    width: calc(94% - 2px);
    color:#ff3355;
    padding: 10px 0;
    margin: 25px auto;
    border: dotted 1px rgba(35, 39, 79, .85);
    border-radius: 10px;
    text-align: center;
}
.emergency-call .note {
    color:#ff3355;
    font-weight: bold;
    margin-bottom: 10px;
}


/*入力フォーム*/
div.content {
    width: 96%;
    margin: 0 auto;
    padding: 50px 0 56px 0;
    font-size: 1.4em;
}
.required {
    display: inline-block;
    margin-left: 3px;
}
.required::after {
    content: "必須";
    font-size: .75em;
    color:#ff3355;
}
div.progress {
    margin-bottom: 35px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
    justify-content: space-between;
}
div.progress p {
    -ms-flex-negative: 0;
	flex-shrink: 0;
    position: relative;
    width: calc(100% / 3 - 8px);
    margin: 0 auto;
}
div.progress p span {
    display: block;
    width: calc(100% - 14px);
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color:  #83ccd2;
    border-right: none;
    color: #fff;
}
div.progress p span::after {
    content: "";
    position: absolute;
    display: block;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    right: -12px;
    border-style: solid;
    border-color: transparent transparent transparent #83ccd2;
    border-width: 18px 13px;
    z-index: 1;
}
div.progress p span.current {
    background-color: #23274F;
}
div.progress p span.current::after {
    border-color: transparent transparent transparent #23274F;
}
.top-error {
    display: none;
    color: #ff3355;
    margin: 10px auto;
}
.top-error.on {
    display: block;
}
div.column {
    width: 100%;
    padding: 0 0 20px 0;
}
div.column .title {
    padding: 8px;
    font-size: 1em;
    font-weight: bold;
    color: rgba(35, 39, 79, 1);
    background-color: rgba(35, 39, 79, .10);
    border-bottom: 1px dashed rgba(35, 39, 79, .85);

}
div.column .input {
    padding: 0 10px;
    margin: 10px auto;
}
section.conf div.column .input { /*-- 確認ページの場合 */
    font-size: 1.15em;
}
div.column .notice {
    margin-top: 5px;
    font-size: .90em;
    line-height: 130%;
    color:rgba(35, 39, 79, .75);
}
div.column .notice span {
    display: block;
    margin-top: 5px;
    font-weight: bold;
}
div.column ul.notice {
    width: 98%;
    margin: 15px auto 0 auto;
    list-style-type: none;
}
div.column ul.notice li {
    margin: 3px 0;
}
div.column .input .sub-title {
    position: relative;
    width: calc(100% - 10px);
    padding: 2px 5px;
    margin: 20px 0;
    height: 20px;
    line-height: 20px;
    font-size: .98em;
    border-bottom: 1px dashed rgba(35, 39, 79, .85);
    font-weight: bold;
}
div.column .input dl {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 98%;
    margin: 0 0 0 2%;
}
div.column .input dl dt {
    -ms-flex-preferred-size: 45px;
	flex-basis: 45px;
    padding-top: 12px;
}
div.column .input dl dd {
    -ms-flex-preferred-size: calc(100% - 45px);
	flex-basis: calc(100% - 45px);
}
div.column .input p.error {
    display: none;
    color: #ff0000;
    margin: 5px;
}
div.column .input p.error.on {
    display: block;
}
input[type="text"].error ,
input[type="email"].error ,
input[type="tel"].error ,
textarea.error ,
select.error {
    border: 2px solid #ffc0cb;
}

/*完了ページ*/
h2.finish ,
h2.error {
    font-size: 1.10em;
    padding: 10px 0 8px 0;
    margin: 10px 0 30px 0;
    text-align: center;
    background-color:rgba(35, 39, 79, .10);
    border-left: 5px solid #23274F;
}
div.finish-comment {
    width: 98%;
    margin: 20px auto;
    line-height: 150%;
}
/*病院情報*/
section.finish .about-pmj {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px dotted rgba(35, 39, 79, .25);
}

/*エラー*/
div.error-comment {
    width: 98%;
    margin: 20px auto;
    line-height: 150%;
}

/*不正アクセス*/
div.content {
    min-height: 60vh;
    min-height: calc(var(--vh, 1vh) * 60);
}
.unauthorized {
    padding: 20px 0;
}
.unauthorized-title {
    font-size: 1.10em;
    padding: 10px 0 8px 0;
    margin: 10px 0 30px 0;
    text-align: center;
    background-color:rgba(255, 0, 0, .10);
    border-left: 5px solid #ff0000;
}
.unauthorized div {
    margin: 30px 0;
    line-height: 150%;
    text-align: center;
}

/*スマホ横 */
@media (max-width: 767px) and (orientation: landscape) {
    div.content {
        width: calc(98% - 40px);
    }
}

/*タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /*急患の場合*/
    .emergency-call {
        width: 60%;
        margin: 40px auto;
    }
    /*ページタイトル*/
    h2.pg-title {
        position: relative;
        top: 0;
        background-color: #23274F;
    }
    div.notes {
        width: calc(90% - 32px);
    }
    /*パンくずリスト*/
    .breadcrumbs {
        top: 180px;
    }
    /*ステータス*/
    div.progress p span::after {
        right: -11px;
    }

    /*完了ページ*/
    h2.finish ,
    h2.error {
        font-size: 1.25em;
        padding: 20px 0 18px 0;
        margin: 50px 0 30px 0;
    }
    div.finish-comment ,
    div.error-comment {
        width: 90%;
    }
    section.finish .about-pmj {
        padding-left: 5%;
        padding-right: 5%;
    }
    /*エラー*/
    section.unauthorized {
        width: 90%;
        margin: 0 auto;
    }
    .unauthorized div {
        margin: 50px 0;
    }
}
/*タブレット横*/
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    div.content {
        width: 80%;
    }
    div.finish-comment ,
    div.error-comment {
        width: 90%;
        margin: 30px auto;
        line-height: 150%;
    }
}

/*PC */
@media screen and (min-width: 1025px) {
    /*急患の場合*/
    .emergency-call {
        width: 60%;
        margin: 40px auto;
    }
    /*ページタイトル*/
    h2.pg-title {
        background-color: #23274F;
    }
    /*----エラー時のフォーカス位置の設定の都合上こちらのタグで調整*/
    .content-outer {
        padding-top: 67px;
    }
    /*パンくずリスト*/
    .breadcrumbs {
        top: 176px;
    }
    /*幅調整*/
    div.content {
        width: 90%;
        max-width: 1000px;
    }
    /*間隔調整*/
    div.progress {
        margin-top: 20px;
        margin-bottom: 50px;
    }
    div.column .input {
        width: 95%;
        margin: 0 auto;
        padding: 25px 0;
    }
    /*完了ページ*/
    h2.finish ,
    h2.error {
        font-size: 1.25em;
        padding: 20px 0 18px 0;
        margin: 50px 0 30px 0;
    }
    div.finish-comment ,
    div.error-comment {
        width: 90%;
        margin: 30px auto;
        line-height: 150%;
    }
    section.finish .about-pmj {
        padding-left: 5%;
        padding-right: 5%;
    }
    /*エラー*/
    section.unauthorized {
        width: 90%;
        margin: 0 auto;
    }
    .unauthorized div {
        margin: 50px 0;
    }
}


/*20220519 その他お問い合わせリンクなど*/
.top-message {
    margin: 20px auto;
}
.other-contact-links {
    margin: 20px auto;
    list-style-type: none;
}
.other-contact-links li {
    margin: 10px 0;
    text-align: right;
}
.other-contact-links li a {
    font-weight: bold;
}
.other-contact-links li a.emergency {
    color: #ff0000;
}
.other-contact-links li a i,
.other-contact-links li a svg {
    margin-right: 5px;
}