/* プロト共通css */
@font-face {
    font-family: "Noto Sans JP";
    font-style: Normal;
    font-weight: 400;
    src: url("../font/NotoSansJP-Regular.otf") format('opentype');
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: Normal;
    font-weight: 700;
    src: url("../font/NotoSansJP-Bold.otf") format('opentype');
    font-display: swap;
}

body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ　Ｐゴシック", "HelveticaNeue", "Helvetica", "Arial", Sans-Serif;
}

/* header */
.pt_com_hdr {
    background-color: #FFFFFF;
    padding: 12px 0 12px 20px;
}

@media (min-width: 760px) {
    .pt_com_hdr {
        padding: 16px 0 16px 104px;
    }
}

.pt_com_hdr_sp {
    display: block;
}

.pt_com_hdr_pc {
    display: none;
}

@media (min-width: 760px) {
    .pt_com_hdr_sp {
        display: none;
    }

    .pt_com_hdr_pc {
        display: block;
    }
}

/* footer */
.pt_com_ftr {
    background-color: #003D34;
    padding: 40px 0;
}

@media (min-width: 760px) {
    .pt_com_ftr {
        padding: 38px 0;
    }

    .pt_com_ftr_sp {
        display: none;
    }
}

/* Typography（独自） */
.pt_com_typo_headerS {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.pt_com_typo_headerM {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
}

.pt_com_typo_headerL {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.pt_com_typo_headerXL {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

@media (min-width: 760px) {
    .pt_com_typo_headerS {
        font-size: 18px;
        line-height: 26px;
    }

    .pt_com_typo_headerM {
        font-size: 22px;
        line-height: 32px;
    }

    .pt_com_typo_headerL,
    .pt_com_typo_headerXL {
        font-size: 42px;
        line-height: 50px;
    }
}

/* color */
.pt_com_typo_BLK10 {
    color: #2E2E2E;
}

.pt_com_typo_GRN12 {
    color: #006B5C;
}

/* 左右中央寄せ */
.pt_com_typo_align_left {
    text-align: left;
}

.pt_com_typo_align_center {
    text-align: center;
}

.pt_com_typo_align_right {
    text-align: right;
}

.pt_com_typo_align_left,
.pt_com_typo_align_center,
.pt_com_typo_align_right {
    word-break: break-all;
}

/* List（独自） */
.pt_com_list_content {
    display: flex;
    align-items: flex-start;
}

.pt_com_list_content:not(:first-child) {
    padding-top: 8px;
}

@media(min-width:760px) {
    .pt_com_list_padding16_pc:not(:first-child) {
        padding-top: 16px;
    }
}

.pt_com_list_content .pt_com_list_dotS,
.pt_com_list_content .pt_com_list_dotM,
.pt_com_list_content>p {
    flex-shrink: 0;
}

.pt_com_list_dotS {
    padding: 6px;
}

@media(min-width:760px) {
    .pt_com_list_dotS {
        padding: 8px;
    }

    .pt_com_list_content>p {
        min-width: 22px;
    }

    .pt_com_list_note .pt_com_list_content>p {
        min-width: auto;
    }
}

.pt_com_list_dotS div,
.pt_com_list_dotM div {
    border-radius: 50%;
    background-color: #585858;
    width: 8px;
    height: 8px;
}

.pt_com_list_dotM {
    padding: 8px;
}

@media (min-width: 760px) {
    .pt_com_list_dotM {
        padding: 9px;
    }
}

.pt_com_list_detail {
    padding-left: 4px;
    flex-grow: 1;
}

/* Button（独自） */
.pt_com_button {
    width: 280px;
    height: 56px;
    border-radius: 24px;
}

@media (min-width: 760px) {
    .pt_com_button {
        transition: cubic-bezier(0, 0.2, 0.4, 1) 200ms;
    }
}

.pt_com_button_green {
    background-color: #008673;
    border: 3px solid #008673;
}

.pt_com_button_white {
    background-color: #FFFFFF;
    border: 3px solid #008673;
}

.pt_com_button_wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 21px;
}

.pt_com_button_wrapper p {
    flex-grow: 1;
}

/* ButtonMini（独自） */
.pt_com_buttonMini {
    height: 32px;
    border-radius: 20px;
    background-color: #FFFFFF;
    border: 3px solid #008673;
}

@media (min-width: 760px) {
    .pt_com_buttonMini {
        transition: cubic-bezier(0, 0.2, 0.4, 1) 200ms;
    }

    .pt_com_buttonMini:hover {
        background-color: #CCEBE6;
    }

    .pt_com_buttonMini:hover p {
        color: #008673;
    }
}

.pt_com_buttonMini a {
    /* ボタン範囲を要素全面にするためブロック化 */
    display: block;
    height: 100%;
}

.pt_com_buttonMini_wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 13px;
}

.pt_com_buttonMini_wrapper p {
    flex-grow: 1;
}

.pt_com_buttonMini_icon {
    flex-shrink: 0;
}

/* Text Field（独自） */
.pt_com_textField_inputForm {
    position: relative;
    background-color: #F2FAF9;
    border-radius: 16px;
}

.pt_com_textField_iconArea {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 12px;
    right: 16px;
}

.pt_com_textField_visible .pt_com_textField_inactive {
    display: none;
}

.pt_com_textField_visible .pt_com_textField_active {
    display: block;
}

.pt_com_textField_invisible .pt_com_textField_inactive {
    display: block;
}

.pt_com_textField_invisible .pt_com_textField_active {
    display: none;
}

.pt_com_textField_inputText {
    width: 100%;
    padding: 16px;
    background-color: #F2FAF9;
    resize: none;
    height: 56px;
    border-radius: 16px;
    outline: none;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #2E2E2E;
    text-align: left;
}

@media(min-width:760px) {

    .pt_com_textField_inputText {
        font-size: 18px;
        line-height: 26px;
    }
}

.pt_com_textField_disable+.pt_com_textField_iconArea {
    pointer-events: none;
}

.pt_com_textField_disable+.pt_com_textField_iconArea svg path {
    fill: #939393;
}

.pt_com_textField_twoColumn {
    display: flex;
}

.pt_com_textField_helf {
    width: calc((100% - 16px) * 0.5);
}

.pt_com_textField_twoColumn .pt_com_textField_inputForm {
    /* 二つのテキストフィールドの間の余白を引いて横幅を2等分 */
    width: calc((100% - 16px) * 0.5);
}

.pt_com_textField_inputForm+.pt_com_textField_inputForm {
    margin-left: 16px;
}

.pt_com_textField_iconPd {
    padding: 16px 48px 16px 16px;
}

/* 枠線があるときのpadding */
.pt_com_textField_inputText:focus,
.pt_com_textField_error.pt_com_textField_inputText {
    padding: 15px;
}

/* アイコン+枠線があるとき */
.pt_com_textField_iconPd.pt_com_textField_inputText:focus,
.pt_com_textField_iconPd.pt_com_textField_error.pt_com_textField_inputText {
    padding: 15px 47px 15px 15px;
}

.pt_com_textField_error.pt_com_textField_inputText,
.pt_com_textField_error.pt_com_textField_inputText:focus {
    border: 1px solid #E53935;
}

/* ×ボタン非表示（IE） */
.pt_com_textField_inputText::-ms-clear {
    display: none;
}

/* 入力フォーム フォーカス時 */
.pt_com_textField_inputText:focus {
    border: 1px solid #008673;
}

/* プレースホルダー */
.pt_com_textField_inputText::placeholder {
    color: #939393;
}

.pt_com_textField_inputText:-ms-input-placeholder {
    color: #939393;
}

/* 非活性時 */
.pt_com_textField_disable.pt_com_textField_inputText {
    background-color: #D5D5D5;
    color: #939393;
    -webkit-text-fill-color: #939393;
    /* Safari対応 */
    opacity: 1;
    /* iOS対応 */
}

.pt_com_textField_iconArea>svg {
    width: 32px;
    height: 32px;
}

/* upload button */
.pt_com_updBtn>input {
    width: 335px;
    height: 100%;
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    cursor: pointer;
}

.pt_com_updBtn>input::file-selector-button {
    width: 160px;
    height: 32px;
    border-radius: 20px;
    cursor: pointer;
}

.pt_com_updBtn_fileBtm>input,
.pt_com_updBtn_fileBtm>input::file-selector-button {
    width: 160px;
}

.pt_com_updBtn_green {
    background-color: #008673;
    border: 3px solid #008673;
}

.pt_com_updBtn_white>input::file-selector-button {
    background-color: #FFFFFF;
    border: 3px solid #008673;
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    color: #008673;
    text-align: center;
    word-break: break-all;
    margin-right: 8px;
}

/* PC向けに別途調整 */
@media (min-width: 760px) {
    .pt_com_updBtn>input {
        width: 592px;
    }

    .pt_com_updBtn>input::file-selector-button {
        width: 240px;
        display: inline-block;
        font-size: 16px;
        line-height: 24px;
        margin-right: 16px;
        transition: cubic-bezier(0, 0.2, 0.4, 1) 200ms;
    }

    .pt_com_updBtn>input:hover::file-selector-button {
        background-color: #CCEBE6;
    }

    .pt_com_updBtn>input:hover::file-selector-button {
        color: #008673;
    }
}

.pt_com_updBtn_wrapper p {
    flex-grow: 1;
}

/* Progressbar（独自） */
.pt_com_pgb {
    display: flex;
    max-width: 440px;
    margin: 0 auto;
}

.pt_com_pgb_step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.pt_com_pgb_number {
    position: relative;
    background-color: #D5D5D5;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2E2E2E;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    z-index: 2;
}

@media (min-width: 760px) {
    .pt_com_pgb_number {
        height: 40px;
        width: 40px;
    }
}

.pt_com_pgb_yellow .pt_com_pgb_number {
    background-color: #FABF00;
}

.pt_com_pgb_number_typo {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    color: #939393;
    text-align: center;
}

@media (min-width: 760px) {
    .pt_com_pgb_number_typo {
        font-size: 22px;
        line-height: 32px;
    }
}

.pt_com_pgb_yellow .pt_com_pgb_number_typo {
    color: #2E2E2E;
}

.pt_com_pgb_bar {
    position: absolute;
    top: 14px;
    left: calc(100% / 2);
    width: calc(100% + 8px);
    height: 4px;
    background-color: #D5D5D5;
    z-index: 1;
}

.pt_com_pgb_bar_yellow {
    position: absolute;
    display: none;
    top: 14px;
    left: calc(100% /2);
    width: calc(100% + 8px);
    height: 4px;
    background-color: #FABF00;
    z-index: 2;
}

@media(min-width:760px) {

    .pt_com_pgb_bar,
    .pt_com_pgb_bar_yellow {
        top: 18px;
        height: 4px;
        left: calc(100% /2);
        width: calc(100% + 64px);
    }
}

.pt_com_pgb_yellow .pt_com_pgb_bar_yellow {
    display: block;
}

.pt_com_pgb_step:not(:last-child):not(:first-child) {
    margin: 0px 4px;
}

.pt_com_pgb_step:first-child {
    margin-right: 4px;
}

.pt_com_pgb_step:last-child {
    margin-left: 4px;
}

.pt_com_pgb_text {
    padding-top: 8px;
}

.pt_com_pgb_text_typo {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #939393;
    text-align: center;
}

@media (min-width: 760px) {
    .pt_com_pgb_text_typo {
        font-size: 18px;
        line-height: 26px;
    }
}

.pt_com_pgb_yellow .pt_com_pgb_text_typo {
    color: #2E2E2E;
}

@media(min-width:760px) {
    .pt_com_pgb_step:not(:last-child):not(:first-child) {
        margin: 0px 32px;
    }

    .pt_com_pgb_step:first-child {
        margin-right: 32px;
    }

    .pt_com_pgb_step:last-child {
        margin-left: 32px;
    }
}

.pt_com_pgb_yellow.pt_com_pgb_zero .pt_com_pgb_bar_yellow {
    display: none;
}

.pt_com_pgb_yellow .pt_com_pgb_number path {
    stroke: #2E2E2E;
}

.pt_com_pgb_yellow .pt_com_pgb_number circle {
    fill: #FABF00;
}

@media (min-width: 760px) {
    .pt_com_pgb_number svg {
        width: 40px;
        height: 40px;
    }
}