@charset "UTF-8";


html {
    color: #000000;
}

body {
    font-size: 15px;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0;
    line-height: 1.6;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    margin-top: -24px;
}

a {
    text-decoration: none;
    display: block;
    color: #ffffff;
}


h2 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    padding-top: 88px;
    padding-bottom: 44px;
}

/* 共通ボタン */
.arrow {
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
}

.arrow::before,
.arrow::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.cover01::after {
    right: 25px;
    width: 9px;
    height: 9px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cover01:hover::after {
    border-top: 3px solid #E3335D;
    border-right: 3px solid #E3335D;
}

.cover02::after {
    right: 25px;
    width: 9px;
    height: 9px;
    border-top: 3px solid #E3335D;
    border-right: 3px solid #E3335D;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cover02:hover::after {
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
}



.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    column-gap: 30px;
    row-gap: 16px;
    flex-wrap: wrap;
}

.btn__contact {
    background-color: #E3335D;
    color: #ffffff;
    width: 296px;
    padding: 14px 0px;
    font-weight: bold;
    border: 2px solid #ffffff;
    text-align: center;
    border-radius: 6px;
    transition: all .2s;
}

.btn__paper {
    background-color: #ffffff;
    color: #E3335D;
    width: 296px;
    padding: 14px 0px;
    font-weight: bold;
    border: 2px solid #E3335D;
    text-align: center;
    border-radius: 6px;
    transition: all .2s;
}

.btn__contact:hover {
    background-color: #ffffff;
    border-color: #E3335D;
    color: #E3335D;
}

.btn__paper:hover {
    background-color: #E3335D;
    border-color: #ffffff;
    color: #ffffff;
}

/* 共通ボタン */

.header {
    height: 66px;
    background-color: #2269B1;
    display: grid;
    align-items: center;
}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
}

header figure a img {
    width: 170px;
    height: auto;
}



.header__right {
    display: flex;
    align-items: center;
    font-size: 13px;
    column-gap: 18px;
}

.header__btn--contact {
    background-color: #E3335D;
    color: #ffffff;
    width: 136px;
    padding: 7px 0px;
    font-weight: bold;
    border: 2px solid #ffffff;
    text-align: center;
    border-radius: 6px;
    transition: all .2s;
}

.header__btn--paper {
    background-color: #ffffff;
    color: #E3335D;
    width: 136px;
    padding: 7px 0px;
    font-weight: bold;
    border: 2px solid #E3335D;
    text-align: center;
    border-radius: 6px;
    transition: all .2s;
}

.header__btn--contact:hover {
    background-color: #ffffff;
    border-color: #E3335D;
    color: #E3335D;
}

.header__btn--paper:hover {
    background-color: #E3335D;
    border-color: #ffffff;
    color: #ffffff;
}



.main-visual__container {
    background-image: url(img/mv_bg.png);
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 528px;
    width: 100%;
}

.main-visual__title {
    text-align: center;
    padding-top: 40px;
}

.main-visual__title--first {
    font-size: 28px;
    color: #ffffff;
    padding-bottom: 4px;
    position: relative;
    top: -14px;
}

.bg-shade {
    padding: 16px;
}

.main-visual__title--first span {
    font-size: 20px;
    background: #fff;
    padding: 10px 20px;
    border-radius: 44px;
    color:#2269B1;
    position: relative;
    top: -18px;
}


.space {
margin-top: 10px;

}

.main-visual__title--second {
    font-size: 20px;
    color: #ffffff;
    line-height: 1.34;
}

.main-visual__title--second strong {
    color: #FFF258;
}

.main-visual h3 {
    font-size: 43px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;  
}

/* Table Data */

section.two-authentication dl.show-data {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 100%;
	border: 1px solid #ccc;
	border-bottom: none;
    font-size: 14px;
}
section.two-authentication dl.show-data dt{
	background: #f5f5f5;
	padding: 5px;
	width: 90px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
section.two-authentication dl.show-data dd{
	background: #fff;
	padding: 8px 5px;
	width: calc(100% - 111px);
	border-bottom: 1px solid #ccc;
}

section.two-authentication h2 {
    padding-top: 0;
}

.main-visual__img {
    position: relative;
}

.main-visual__img--01 {
    position: absolute;
    top: 105%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, 2%);
    -ms-transform: translate(-50%, -50%);
}



.main-visual__cta {
    margin: 125px 0 0 0;
}



.main-visual__lead {
    text-align: center;
    font-weight: bold;
    line-height: 2.46;
    margin-top: 38px;
}

.main-visual__lead span {
    background-image: radial-gradient(circle at center, #E3335D 20%, transparent 20%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 1em 0.2em;
    padding-top: 0.2em;
}

.service__container {
    max-width: 630px;
    margin: 0 auto;
}

.service__lead {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    padding-bottom: 25px;
}

.service__lead span {
    background-color: #E3335D;
    color: #ffffff;
    padding: 0.4rem 0.4rem;
}

.service__text span {
    font-weight: bold;
}

.service__img {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    column-gap: 50px;
    padding-bottom: 74px;
}

.service__img figure {
    width: 245px;
    text-align: center;
}

.service__img figure img {
    width: 100%;
}

.service__img--arrow {
    width: 30px !important;
    margin: auto 0;
    transform: rotate(0deg);
}



.service__img2 {
    text-align: center;
    padding: 60px 0 83px 0;
}



.cta {
    background-color: #333C53;
    padding: 60px 0 50px 0px
}

.cta__container {
    text-align: center;
    color: #ffffff;
    font-weight: bold;

}

.cta__container p {
    padding-bottom: 62px;
    line-height: 2;
}

.week {
    background-image: url(img/week_bg.png);
}

.week__img {
    text-align: center;
    padding: 53px 0 60px 0;
}

.week__container {
    text-align: center;
}

.week__container span {
    color: #E3335D;
}

.week__container p {
    font-weight: bold;
    font-size: 20px;
}

.flow__container {
    max-width: 630px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.flow__inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 47px;
}

.flow__item {
    max-width: 427px;
    min-width: 241px;
}

.flow__item span {
    font-size: 33px;
    font-weight: bold;
    color: #227ABF;

}

.flow__item--lead {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 13px;
}

.flow__inner--text {
    line-height: 1.8;
    font-size: 14px;
}

.flow__arrow {
    text-align: center;
    padding: 17px 0 0 0;
}

.flow__inner figure {
    width: 150px;
    text-align: center;
}


.footer-cta__container {
    max-width: 1040px;
    margin: 0 auto;
    background-color: #333C53;
    padding: 62px 0 60px 0px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    position: relative;
    z-index: 1;
    box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
}



.footer-cta__container p {
    padding-bottom: 62px;
    line-height: 2;
}

.footer-menu {
    background-color: #4F5669;
    width: 100%;
    height: 443px;
    margin-top: -177px;
}

.footer-menu__container {
    max-width: 1040px;
    margin: 0 auto;
    padding-top: 235px;
    color: #ffffff;
    font-size: 12px;
}

.footer-menu__container ul {
    display: flex;
    align-items: center;
    column-gap: 15px;
    padding: 18px 0 28px 0;

}


.footer-menu__list {
    border-right: 1px solid #ffffff;
    padding-right: 15px;
}

.footer-menu__icon {
    padding-left: 0px;
}

.pc {
    display: block;
}

.sp {
    display: none;
}


section.my-num-block {
    margin: 60px 0;
}

section.my-num-block h3 {
    font-size: 20px;
    color: #444;
    margin-bottom: 22px;
}

.my-num-info {
    background: #eee;
    padding: 16px;
    border-radius: 16px;
    }


section.my-num-block span {
    display: inline-block;
    margin-bottom: 22px;
    text-align: center;
    background: #fff;
    padding: 7px 26px;
    border: 1px solid #dbdbdb;
    border-radius: 44px;
 }

 section.my-num-block span.app {
    background: #297abf;
    color: #fff;
 }

 section.my-num-block .img-block img {
    margin-top: 20px;
}

 section.my-num-block .img {
     text-align: center;
 }

 

section.my-num-block .container {
    max-width: 1280px;
    margin: 0 auto;
}



/* Two authentication Block */

section.two-authentication, section.protech-feature {
    background: #e8f0f8;
    padding: 60px 0;
}

section.two-authentication .wrap-jpki {
    max-width: 1000px;
    margin: 0 auto;
}
section.two-authentication h5 {
    text-align: center;
    font-weight: bold;
    line-height: 30px;
    font-size: 20px;
    margin-bottom: 30px;
}
section.two-authentication .two-col {
    display: flex;
    justify-content: center;
    gap: 20px;
}
section.two-authentication ul.two-col li {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 160px;
}
section.two-authentication .two-col li strong {
    margin-bottom: 16px;
    display: block;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
}
.jpki img {
    width: 120px;
}
.sec-block img.plus {
    margin-top: 50px !important;
}
section.two-authentication .block-one {
    background: #fff;
    padding: 16px;
    border: 3px solid #227ABF;
    width: 100%;
    border-radius: 8px;
    flex-grow: 1;
    flex-basis: 0;
    min-height: 280px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
    box-sizing: border-box;
}
section.two-authentication .two-col ul li img.plus, .sec-block img.plus {
    width: 40px !important;
}

section.two-authentication .tbl-data {
    margin-top:25px;
}

section.two-authentication .tbl-data strong {
    margin-bottom: 0 !important;
    background:#297abf1a;
    border-radius: 8px 0 0 0;
    padding: 10px;
}

section.two-authentication .tbl-data span {
    padding: 10px;
}

section.two-authentication .tbl-data ul li:first-child {
    border-right: none;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.three-col {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.my-num-block .arrow {
    align-self: center;
} 


@media screen and (max-width: 768px) {

    html {
        color: #000000;
    }

    body {
        font-size: 15px;

        letter-spacing: 0;
        line-height: 1.6;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        max-width: 100%;
    }

    a {
        text-decoration: none;
        display: block;
        color: #ffffff;
    }


    h2 {
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        padding-top: 75px;
        padding-bottom: 44px;
    }

    /* 共通ボタン */
    .arrow {
        position: relative;
        display: inline-block;
        padding: 0 0 0 16px;
        color: #000;
        vertical-align: middle;
        text-decoration: none;
    }

    .arrow::before,
    .arrow::after {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        content: "";
        vertical-align: middle;
    }

    .cover01::after {
        right: 25px;
        width: 9px;
        height: 9px;
        border-top: 3px solid #ffffff;
        border-right: 3px solid #ffffff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .cover01:hover::after {
        border-top: 3px solid #E3335D;
        border-right: 3px solid #E3335D;
    }

    .cover02::after {
        right: 25px;
        width: 9px;
        height: 9px;
        border-top: 3px solid #E3335D;
        border-right: 3px solid #E3335D;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .cover02:hover::after {
        border-top: 3px solid #ffffff;
        border-right: 3px solid #ffffff;
    }



    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        column-gap: 30px;
        row-gap: 16px;
        flex-wrap: wrap;
    }

    .btn__contact {
        background-color: #E3335D;
        color: #ffffff;
        width: 246px;
        padding: 16px 0px;
        font-weight: bold;
        border: 2px solid #ffffff;
        text-align: center;
        border-radius: 6px;
        transition: all .2s;
    }

    .btn__paper {
        background-color: #ffffff;
        color: #E3335D;
        width: 246px;
        padding: 16px 0px;
        font-weight: bold;
        border: 2px solid #E3335D;
        text-align: center;
        border-radius: 6px;
        transition: all .2s;
    }

    .btn__contact:hover {
        background-color: #ffffff;
        border-color: #E3335D;
        color: #E3335D;
    }

    .btn__paper:hover {
        background-color: #E3335D;
        border-color: #ffffff;
        color: #ffffff;
    }

    /* 共通ボタン */

    .header {
        height: 50px;
        background-color: #2269B1;
        display: grid;
        align-items: center;
    }

    .header__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1040px;
        width: 100%;
        margin: 0 auto;
    }

    .header__left figure {
        width: 130px;
        padding-left: 10px;
    }

    .header__left figure img {
        width: 100%;
    }


    .header__right {
        display: none;
        align-items: center;
        font-size: 13px;
        column-gap: 18px;
    }

    .header__btn--contact {
        background-color: #E3335D;
        color: #ffffff;
        width: 136px;
        padding: 7px 0px;
        font-weight: bold;
        border: 2px solid #ffffff;
        text-align: center;
        border-radius: 6px;
        transition: all .2s;
    }

    .header__btn--paper {
        background-color: #ffffff;
        color: #E3335D;
        width: 136px;
        padding: 7px 0px;
        font-weight: bold;
        border: 2px solid #E3335D;
        text-align: center;
        border-radius: 6px;
        transition: all .2s;
    }

    .header__btn--contact:hover {
        background-color: #ffffff;
        border-color: #E3335D;
        color: #E3335D;
    }

    .header__btn--paper:hover {
        background-color: #E3335D;
        border-color: #ffffff;
        color: #ffffff;
    }



    .main-visual__container {
        background-image: url(img/mv_bg_sp.png);
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 484px;
        width: 100%;
    }

    .main-visual__title {
        text-align: center;
        padding-top: 34px;
    }

    .main-visual__title--first span {
        font-size: 16px;
        display: inline-block;
        top: 0;
    }
    .main-visual h3 {
        font-size: 26px;
    }

    .main-visual__title--second {
        font-size: 16px;
        color: #ffffff;
        line-height: 1.34;
    }

    .main-visual__img {
        position: relative;
    }

    .main-visual__img--01 {
        position: absolute;
        top: 105%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, 2%);
        -ms-transform: translate(-50%, -50%);
    }

    .main-visual__cta {
        margin: 61px 0 0 0;
        padding: 0 15px;
    }



    .main-visual__lead {
        text-align: center;
        font-weight: bold;
        line-height: 1.7;
        margin-top: 28px;
    }


    .main-visual__lead span {
        background-image: radial-gradient(circle at center, #E3335D 20%, transparent 20%);
        background-position: top right;
        background-repeat: repeat-x;
        background-size: 1em 0.3em;
        padding-top: .4em;
    }

    .service__container {
        max-width: 630px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .service__lead {
        font-weight: bold;
        font-size: 18px;
        text-align: center;
        padding-bottom: 25px;
        padding: 0 14px 25px 14px;
    }

    .service__lead span {
        background-color: #E3335D;
        color: #ffffff;
        padding: 0.4rem 0.4rem;
    }

    .service__text span {
        font-weight: bold;
    }

    .service__img {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 50px;
        padding-bottom: 76px;
        flex-direction: column;
    }

    .service__img figure {
        width: 190px;
        text-align: center;
    }

    .service__img figure img {
        width: 100%;
    }

    .service__img--arrow {
        width: 28px !important;
        margin: auto 0;
        transform: rotate(90deg);
    }


    .service__img2 {
        text-align: center;
        padding: 60px 0 61px 0;
    }

    .service__img2 figure {
        width: 307px;
        margin: 0 auto;
    }

    .service__img2 figure img {
        width: 100%;

    }


    .cta {
        background-color: #333C53;
        padding: 50px 0 50px 0px
    }

    .cta__container {
        text-align: center;
        color: #ffffff;
        font-weight: bold;

    }

    .cta__container p {
        padding: 0 70px 34px 70px;
    }

    .week {
        background-image: url(img/week_bg.png);

    }

    .week__container {
        text-align: center;
        padding: 0 15px;
    }

    .week__container span {
        color: #E3335D;
    }

    .week__container p {
        font-weight: bold;
        font-size: 18px;
        padding: 0 20px;
    }

    .week__img {
        text-align: center;
        padding: 40px 0 35px 0;
    }

    .week__img figure {
        width: 275px;
        margin: 0 auto;
    }

    .week__img figure img {
        width: 100%;

    }

    .flow__container {
        max-width: 630px;
        margin: 0 auto;
        padding: 0 15px 100px 15px;
    }

    .flow__inner {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 19px;
    }

    .flow__item {
        max-width: 241px;
        min-width: 241px;
    }

    .flow__item span {
        font-size: 26px;
        font-weight: bold;
        color: #227ABF;

    }

    .flow__item--lead {
        font-size: 18px;
        font-weight: bold;
        padding-bottom: 11px;
    }

    .flow__inner--text {
        line-height: 1.5;
        font-size: 12px;
    }

    .flow__arrow {
        text-align: center;
        padding: 28px 0 10px 0;
    }

    .flow__inner figure {
        width: 99px;
        text-align: center;
    }

    .flow__inner figure img {

        width: 100%;
    }

    .flow__inner--figure--img3 {
        width: 48% !important;
    }



    .footer-cta__container {
        max-width: 1040px;
        margin: 0 15px;
        background-color: #333C53;
        padding: 42px 0 50px 0px;
        text-align: center;
        color: #ffffff;
        font-weight: bold;
        position: relative;
        z-index: 1;
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
    }



    .footer-cta__container p {
        padding: 0px 63px 38px 63px;
        line-height: 2;
    }

    .footer-menu {
        background-color: #4F5669;
        width: 100%;
        height: 443px;
        margin-top: -121px;
    }

    .footer-menu__container {
        max-width: 1040px;
        margin: 0 auto;
        padding: 165px 15px 0 15px;
        color: #ffffff;
        font-size: 12px;
    }

    .footer-menu__container figure {
        width: 158px;
    }

    .footer-menu__container figure img {
        width: 100%;
    }


    .footer-menu__container ul {
        display: flex;
        align-items: center;
        column-gap: 15px;
        padding: 18px 0 28px 0;
        flex-wrap: wrap;
        row-gap: 20px;
    }


    .footer-menu__list {
        border-right: 1px solid #ffffff;
        padding-right: 15px;
    }

  

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .three-col, .wrap-jpki.two-col {
      flex-direction: column;  
      align-items: center;
    }

    .two-col {
     grid-template-columns: 1fr !important;
    }

    section.two-authentication .block-one {
        min-height: auto;
    }

    .my-num-info .img-block img {
        width: 100%;
    }
    .my-num-block .arrow img {
        transform: rotate(90deg);
        width: 50px;
    }

    section.two-authentication {
        padding: 30px 0;
        background: none;
    }

    h2 {
        padding-top: 30px;
    }

    section.my-num-block {
        margin-bottom: 0 !important;
    }

    section.my-num-block .img-block img {
        margin-top: 0px;
    }

    section.two-authentication .two-col li strong {
        font-size: 14px !important;
        line-height: 1.5 !important; 
    }
    section.two-authentication .two-col li strong br {
        content: " ";
        display: none;
    }
}