body {
    background-color: #FFFFFF;
}

/* タイトル */
.top_ttlArea {
    padding: 32px 20px 40px;
    background-color: #F2FAF9;
}

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

.top_ttlTop {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

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

.top_ttlTop_txt_sp {
    padding: 0px 4px;
}

.top_ttlTop_txt_pc {
    display: none;
}

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

    .top_ttlTop_txt_pc {
        display: block;
        padding: 0px 4px;
    }
}

.top_ttlTxtArea {
    padding-top: 12px;
}

@media (min-width: 760px) {
    .top_ttlTxtArea {
        padding-top: 20px;
        display: flex;
        justify-content: center;
    }
}

.top_ttlTxt {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.top_ttlTxt:last-child {
    position: relative;
}

.top_ttlTxtCont {
    display: flex;
    align-items: baseline;
}

.top_ttlTxtCont p {
    z-index: 1;
}

.top_ttl_underber {
    width: 114px;
    height: 8px;
    background-color: #FABF00;
    border-radius: 20px;
    position: absolute;
    top: 34px;
}

@media (min-width: 760px) {
    .top_ttl_underber {
        width: 160px;
        top: 32px;
    }
}

.top_ttlTxt_sp {
    padding-top: 8px;
}

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

/* タイポ独自実装 */
.top_typo {
    font-size: 28px;
    line-height: 32px;
    font-weight: 700;
}

@media (min-width: 760px) {
    .top_typo {
        font-size: 40px;
        line-height: 35px;
    }

    .top_ttlTop_typo {
        font-size: 24px;
        line-height: 35px;
        font-weight: 700;
    }
}

.top_typo_span {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
}

@media (min-width: 760px) {
    .top_typo_span {
        font-size: 37px;
        line-height: 35px;
    }
}

.top_typo_bodyXSN {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}

@media (min-width: 760px) {
    .top_typo_bodyXSN {
        font-size: 14px;
        line-height: 20px;
    }
}

.top_typo_typo_BLK8 {
    color: #585858;
}

.top_typo_align_left {
    text-align: left;
    word-break: break-all;
}

.top_typo_BLK {
    color: #2E2E2E;
}

.top_typo_align_center {
    text-align: center;
    word-break: break-all;
}

.top_ttl_imgeArea {
    padding-top: 24px;
    text-align: center;
}

@media (min-width: 760px) {
    .top_ttl_imgeArea {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 40px;
    }
}

@media (min-width: 760px) {
    .top_ttl_img img {
        width: 314px;
        height: 226px;
    }
}

.top_ttl_subTtl {
    padding-top: 24px;
}

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

.top_ttl_subTxt p br {
    display: none;
}

@media (min-width: 760px) {
    .top_ttl_subTxt p br {
        display: block;
    }
}

/* 提出メリットを見るリンク */
.top_meritMdl {
    display: flex;
    justify-content: center;
    padding-top: 16px;
}

@media (min-width: 760px) {
    .top_meritMdl {
        display: block;
        padding-top: 20px;
    }
}

/* モーダル中身 */
.top_meritMdlTxt {
    padding-top: 24px;
}

@media (min-width: 760px) {
    .top_meritMdlTxt {
        padding-top: 32px;
    }
}

.top_meritMdl_cardArea {
    padding-top: 24px;
}

.top_meritMdl_cardArea+.top_meritMdl_cardArea {
    padding-top: 16px;
}

@media (min-width: 760px) {
    .top_meritMdl_cardArea {
        padding-top: 32px;
    }

    .top_meritMdl_cardArea+.top_meritMdl_cardArea {
        padding-top: 24px;
    }
}

.top_meritMdl_card {
    padding: 24px;
    background-color: #F2FAF9;
    border-radius: 16px;
}

@media (min-width: 760px) {
    .top_meritMdl_card {
        padding: 32px;
    }
}

.top_meritMdl_txt {
    padding: 16px 0 16px;
}

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

.top_meritMdl_reportArea {
    padding-top: 16px;
    display: flex;
}

@media (min-width: 760px) {
    .top_meritMdl_reportArea {
        padding-top: 24px;
        align-items: center;
    }
}

.top_meritMdl_report {
    position: relative;
}

.top_meritMdl_logo {
    display: flex;
}

.top_meritMdl_logo_imgWrap {
    position: relative;
    max-width: 150px;
}

@media (min-width: 760px) {
    .top_meritMdl_logo_imgWrap {
        max-width: 204px;
    }
}

.top_meritMdl_logo img {
    width: 100%;
    padding: 10px 11px 0 0;
}

@media (min-width: 760px) {
    .top_meritMdl_logo img {
        width: 204px;
        padding: 0;
    }
}

.top_meritMdl_logo_kome {
    position: absolute;
    top: -10px;
    right: 0;
}

@media (min-width: 760px) {
    .top_meritMdl_logo_kome {
        top: -12px;
        right: -24px;
    }
}

.top_meritMdl_img img {
    width: 105px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

@media (min-width: 760px) {
    .top_meritMdl_img img {
        width: 160px;
        height: 229px;
    }
}

.top_meritMdl_img {
    padding-left: 16px;
}

@media (min-width: 760px) {
    .top_meritMdl_img {
        padding: 0 34px 0 54px;
    }
}

.top_meritMdl_link {
    padding-top: 16px;
}

@media (min-width: 760px) {
    .top_meritMdl_link {
        padding-top: 24px;
    }
}

.top_meritMdl_link a {
    flex-shrink: 0;
}

.top_meritMdl_logoCont {
    font-size: 0;
    text-align: left
}

.top_meritMdl_logoCont p {
    display: inline;
}

@media (min-width: 760px) {
    .top_meritMdl_logoCont {
        font-size: initial;
    }
}

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

.top_meritMdl_cardTxt {
    padding-top: 8px;
}

.top_meritMdl_cardTxt p br {
    display: none;
}

@media (min-width: 760px) {
    .top_meritMdl_cardTxt p br {
        display: block;
    }
}

.top_meritMdl_cardImg {
    display: flex;
    justify-content: center;
    padding-top: 16px;
}

@media (min-width: 760px) {
    .top_meritMdl_cardImg {
        padding-top: 24px;
    }
}

.top_meritMdl_imgArea {
    display: flex;
    align-items: center;
    width: 241px;
    height: 114px;
}

.top_meritMdl_cardImg_resize {
    width: 114px;
    height: 114px;
}

.top_meritMdl_imgTri {
    display: flex;
    padding: 0 2px 0 4px;
}

.top_meritMdl_imgArea svg {
    width: 8px;
    height: 14px;
}

@media (min-width: 760px) {
    .top_meritMdl_imgArea {
        width: 310px;
        height: 136px;
    }

    .top_meritMdl_cardImg_resize {
        width: 136px;
        height: 136px;
    }

    .top_meritMdl_imgTri {
        padding: 0 12px 0 15px;
    }

    .top_meritMdl_imgTri svg {
        width: 12px;
        height: 20px;
    }
}

/* ベストスタイル 健康サポート・キャッシュバック特約詳細リンク独自実装 */
.top_meritMdl_cashLinkArea {
    padding-top: 16px;
    display: flex;
}

@media (min-width: 760px) {
    .top_meritMdl_cashLinkArea {
        padding-top: 24px;
    }

    .top_meritMdl_cashLinkArea>a {
        transition: cubic-bezier(0, 0.2, 0.4, 1) 200ms;
    }

    .top_meritMdl_cashLinkArea a:hover {
        background-color: #CCEBE6;
    }

    .top_meritMdl_cashLinkArea a:hover p {
        color: #008673;
    }

}

.top_meritMdl_textLink_typo_14_20,
.top_meritMdl_textLink_typo_14_20_16_24 {
    font-size: 14px;
    line-height: 24px;
}

@media (min-width: 760px) {
    .top_meritMdl_textLink_typo_14_20_16_24 {
        font-size: 16px;
        line-height: 24px;
    }
}

.top_meritMdl_textLink_typo_light p {
    color: #008673;
    font-weight: 700;
    text-align: left;
}

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

.top_meritMdl_cashTxt {
    padding-top: 24px;
}

@media (min-width: 760px) {
    .top_meritMdl_cashTxt {
        padding-top: 32px;
    }
}

.top_meritMdl_list {
    padding-top: 24px;
}

@media (min-width: 760px) {
    .top_meritMdl_list {
        padding-top: 32px;
    }
}

.top_meritMdl_cashLink {
    padding-top: 16px;
}

/* 最適な提出方法エリア */

.top_subArea {
    background-color: #FFFFFF;
    padding: 40px 20px;
    overflow: hidden;
}

@media (min-width: 760px) {
    .top_subArea {
        padding: 64px 0;
        margin: 0 auto;
    }
}

.top_subTxt {
    padding-top: 8px;
}

@media (min-width: 760px) {
    .top_subTxt {
        padding-top: 16px;
    }

    .top_subTxt p br {
        display: none;
    }
}

/* カードエリア */
.top_cardArea {
    padding-top: 32px;
    display: flex;
    align-items: flex-start;
}

@media (min-width: 760px) {
    .top_cardArea {
        padding-top: 40px;
        width: 600px;
        margin: 0 auto;
    }
}

.top_card {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    background-color: #F2FAF9;
    padding: 32px 16px 24px;
    transition: all 0.4s cubic-bezier(0, 0.2, 0.4, 1);
    border-radius: 16px;
    flex-shrink: 0;
    position: relative;
}

@media (min-width: 760px) {
    .top_card {
        padding: 40px 32px 32px;
    }
}

.top_rslt {
    background-color: #FFF9E5;
}

.top_active {
    visibility: visible;
    opacity: 1;
}

.top_circle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    background-color: #FABF00;
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    top: 0;
    left: 50%;
}

@media (min-width: 760px) {
    .top_circle {
        width: 36px;
        height: 36px;
    }

    .top_circle svg {
        width: 32px;
        height: 32px;
    }
}

.top_txtArea {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top_txtArea_qa {
    height: 48px;
}

@media (min-width: 760px) {
    .top_txtArea_qa {
        height: auto;
    }
}

.top_txt {
    display: inline;
    text-align: center;
    font-size: 0;
}

.top_txt p {
    display: inline;
}

@media (min-width: 760px) {

    .top_txt p br,
    .top_rslt_upd p br,
    .top_rslt_mnp p br,
    .top_rslt_qr p br,
    .top_rslt_line p br,
    .top_txt_sub p br {
        display: none;
    }
}

.top_txt_rslt {
    display: none;
}

.top_active .top_active_subTxtRslt {
    display: inline;
}

.top_btnArea,
.top_rslt_onceAgain {
    padding-top: 16px;
    display: flex;
    justify-content: center;
}

@media (min-width: 760px) {

    .top_btnArea,
    .top_rslt_onceAgain {
        padding-top: 24px;
    }
}

/* ボタン独自実装 */
.top_button {
    max-width: 280px;
    height: 56px;
    border-radius: 24px;
}

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

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

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

.top_button {
    flex-grow: 1;
    flex-basis: 0;
}

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

@media (min-width: 760px) {
    .top_button+.top_button {
        margin-left: 24px;
    }
}

.top_rslt_button {
    width: 280px;
    height: 56px;
    border-radius: 24px;
}

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

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

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

    .top_rslt_button:hover .top_button_icon svg path {
        fill: #008673;
    }

    .top_rslt_button:hover .top_button_icon svg circle {
        fill: none;
    }
}

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

.top_button a {
    display: block;
    height: 100%;
}

.top_button_icon {
    padding-left: 4px;
}

.top_button_icon_not,
.top_button_icon_link {
    padding-right: 21px;
}

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

.top_button_wrapper p {
    flex-grow: 1;
}

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

.top_rslt_btn {
    display: none;
}

.top_active_btn {
    display: inline;
}

.top_rslt_btn_wd {
    display: flex;
    justify-content: center;
    width: 303px;
}

@media (min-width: 760px) {
    .top_rslt_btn_wd {
        width: 384px;
    }
}

.top_rslt_notesTxtArea {
    padding-top: 8px;
}

@media (min-width: 760px) {
    .top_rslt_notesTxtArea {
        padding-top: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.top_cmpl_komeTxtArea {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4px;
}

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

.top_cmpl_komeTxt {
    padding-left: 4px;
}

/* テキストリンク独自実装 */
.top_textLink {
    display: flex;
}

.top_textLink .top_textLink_typo_light,
.top_textLink .top_textLink_typo_dark {
    display: flex;
    align-items: center;
}

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

    .top_textLink a:hover {
        background-color: #CCEBE6;
    }

    .top_textLink a:hover p {
        color: #008673;
    }
}

.top_textLink_icon {
    flex-shrink: 0;
}

.top_textLink_icon_left {
    padding-right: 4px;
}

.top_textLink_typo_14_20,
.top_textLink_typo_14_20_16_24 {
    font-size: 14px;
    line-height: 24px;
}

@media (min-width: 760px) {
    .top_textLink_typo_14_20_16_24 {
        font-size: 16px;
        line-height: 24px;
    }
}

.top_textLink_typo_light p {
    color: #008673;
    font-weight: 700;
}

/* ＭＹほけんページでのお手続方法 */
.top_procArea {
    padding: 40px 20px;
    background-color: #006B5C;
}

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

.top_proc_ttlTxt {
    padding-top: 8px;
}

@media (min-width: 760px) {
    .top_proc_ttlTxt {
        padding-top: 16px;
    }

    .top_proc_ttlTxt p br {
        display: none;
    }
}

/* カードエリア */
.top_proc_cardArea {
    padding-top: 24px;
}

@media (min-width: 760px) {
    .top_proc_cardArea {
        display: flex;
        max-width: 800px;
        margin: 0 auto;
        padding-top: 32px;
    }
}

.top_proc_cardBox {
    position: relative;
    border-radius: 16px;
    background-color: #FFFFFF;
}

.top_proc_cardBox+.top_proc_cardBox {
    margin-top: 24px;
}

@media (min-width: 760px) {
    .top_proc_cardBox {
        width: calc(100% / 2);
    }

    .top_proc_cardBox+.top_proc_cardBox {
        margin-top: 0;
        margin-left: 32px;
    }
}

.top_proc_card {
    padding: 24px 24px 32px;
    display: block;
    position: relative;
    height: 100%;
}

@media (min-width: 760px) {
    .top_proc_card {
        transition: opacity 0.3s;
    }

    .top_proc_card:hover {
        opacity: 0.5;
    }
}

.top_proc_cardBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    box-shadow: 0px 8px 32px 0px #2E2E2E;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.top_proc_card:last-of-type:is(.top_proc_card:last-of-type.top_cardBorder) {
    padding: 20px 20px 28px;
}

@media (min-width: 760px) {
    .top_proc_card {
        padding: 32px 32px 40px;
    }

    .top_proc_card:last-of-type:is(.top_proc_card:last-of-type.top_cardBorder) {
        padding: 28px 28px 36px;
    }
}

.top_proc_cardTtl {
    display: flex;
    align-items: center;
    justify-content: center;
}

.top_proc_cardTtlTxt {
    padding-left: 8px;
}

.top_proc_cardTxt {
    padding-top: 8px;
}

@media (min-width: 760px) {
    .top_proc_cardTxt {
        padding-top: 16px;
    }
}

.top_proc_cardLink {
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 760px) {
    .top_proc_cardLink {
        padding-top: 24px;
    }

    .top_proc_cardBox:first-of-type .top_proc_card:first-of-type .top_proc_cardLink {
        padding-top: 50px;
    }
}

.top_proc_cardLinkIcon {
    padding-left: 4px;
}

/* テキストリンクタイポ独自実装 */
.top_link_typo {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}

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

.top_link_typo_GRN {
    color: #008673;
    ;
}

.top_link_typo_align_center {
    text-align: center;
    word-break: break-all;
}

/* ほかにも担当者が手続きをサポートする方法エリア */
.top_sptArea {
    padding: 40px 20px;
}

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

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

.top_sptTxt {
    padding-top: 8px;
}

@media (min-width: 760px) {
    .top_sptTxt {
        padding-top: 16px;
    }
}

/* ＭＹほけんページにログインできないが、オンラインで手続きしたいカード */
@media (min-width: 760px) {
    .top_sptCardArea {
        display: flex;
        max-width: 800px;
        margin: 0 auto;
    }
}

.top_sptCardBox {
    padding-top: 24px;
}

.top_sptCardBox+.top_sptCardBox {
    padding-top: 16px;
}

@media (min-width: 760px) {
    .top_sptCardBox {
        padding-top: 40px;
        width: calc(100% / 2);
    }

    .top_sptCardBox+.top_sptCardBox {
        padding-top: 40px;
        margin-left: 32px;
    }
}

.top_sptCard {
    padding: 24px 0 8px;
    background-color: #F8F8F8;
    border-radius: 16px;
}

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

.top_sptCardTtl {
    padding: 0 24px;
}

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

.top_sptCardTxt {
    padding-top: 8px;
}

.top_sptListArea {
    padding-top: 16px;
}

.top_sptListArea:last-of-type:not(.top_sptList:last-of-type.top_cardBorder) {
    padding-top: 0;
}

@media (min-width: 760px) {
    .top_sptCard>.top_sptListArea:last-of-type:has(.top_sptList:last-of-type.top_cardBorder) {
        padding-top: 0px;
    }
}

/* オンラインの手続きが困難な場合カード */
.top_difficCard {
    padding: 24px;
    background-color: #F8F8F8;
    border-radius: 16px;
}

@media (min-width: 760px) {
    .top_difficCard {
        padding: 32px;
        height: 100%;
    }
}

.top_difficList {
    padding-top: 32px;
}

/* リスト独自実装 */
.top_sptList {
    position: relative;
    padding: 16px 24px;
}

.top_sptList:last-of-type:is(.top_sptList:last-of-type.top_cardBorder) {
    padding: 12px 20px;
}

@media (min-width: 760px) {
    .top_sptList {
        padding: 16px 32px;
    }

    .top_sptList:last-of-type:is(.top_sptList:last-of-type.top_cardBorder) {
        padding: 12px 28px;
    }
}

.top_sptList_content {
    display: flex;
    align-items: center;
}

.top_sptList_content .top_sptList_dotM,
.top_sptList_content>p {
    flex-shrink: 0;
}

.top_sptList_dotM {
    padding: 8px;
}

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

.top_sptList_dotM div {
    border-radius: 50%;
    background-color: #33AD9C;
    width: 8px;
    height: 8px;
}

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

.top_sptListTxt {
    padding: 4px 0 0 28px;
}

.top_sptKomeTxtArea {
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 760px) {
    .top_sptKomeTxtArea {
        padding-top: 24px;
    }
}

.top_sptKomeTxt {
    padding-left: 4px;
}

/* コミュニケーションセンターエリア */
.top_spt_ccArea {
    padding-top: 40px;
}

.top_spt_ccArea p br {
    display: none;
}

@media (min-width: 760px) {
    .top_spt_ccArea p br {
        display: block;
    }
}

.top_spt_ccLink {
    padding-top: 16px;
    display: flex;
    justify-content: center;
}

/* ハイライト */
/* ボーダー */
.top_cardBorder {
    border: 4px solid #FABF00;
    border-radius: 16px;
}

.top_cardRecTxt {
    width: 158px;
    height: 32px;
    border-radius: 40px;
    padding: 6px 16px;
    background-color: #FABF00;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 760px) {
    .top_cardRecTxt {
        width: 176px;
        padding: 4px 16px;
    }
}

.top_sptRecTxt {
    width: 140px;
    height: 24px;
    border-radius: 40px;
    padding: 4px 16px;
    background-color: #FABF00;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 760px) {
    .top_sptRecTxt {
        width: 158px;
        height: 28px;
        top: -18px;
    }
}

/* 非表示クラス */
.top_hidden {
    display: none;
}