@charset "utf-8";

/**
 * ページ固有のレイアウトを定義
 */

/* 登録内容確認画面
   ========================================================================== */

.p-confirm-overview {
    border: 1px solid #a1aeb8;
    padding: 20px;
}

.marker-strong {
    background-color: #f5cdc5;
    width: 285;
    height: 27;
}

.p-confirm-mynaPortalFolder{
    padding: 20px;
}

/* 操作案内画面
   ========================================================================== */

.p-guidance__img {
    display: flex;
    justify-content: center;
}

.p-guidance__attention {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fffae3;

    padding: 20px;
}

.p-guidance__attention--text strong {
    background-image: url(../../../images/attention.svg);
    background-repeat: no-repeat;
    background-position-y: 0.2em;
    display: block;
    padding-left: 25px;
}

.error_caution {
    background: #fff4f5;
    padding: 20px;
}

.error_caution strong {
    background-image: url(../../../images/err_icon.svg);
    background-repeat: no-repeat;
    background-position-y: 0.3em;
    display: block;
    padding-left: 25px;
}

/* 受付完了画面
   ========================================================================== */

.p-after-complete {
    border: 1px solid #a1aeb8;
    padding: 20px;
}

/* エラー画面
   ========================================================================== */

.p-warn-msg-area {
    background: #f5f5f5;
    padding: 20px;
    margin-top: 20px;
}

.p-warn-msg-area .s-warn-msg-area--text {
    background-image: url(../../../images/notice.svg);
    background-repeat: no-repeat;
    background-position-y: 0.3em;
    display: block;
    padding-left: 25px;
}

.p-error-msg-area {
    background: #fff4f5;
    padding: 20px;
}
.p-error-msg-area .s-error-msg-area--text {
    background-image: url(../../../images/err_icon.svg);
    background-repeat: no-repeat;
    background-position-y: 0.3em;
    display: block;
    padding-left: 25px;
}

/* メンテナンス画面
   ========================================================================== */
.p-alink-btn {
    list-style: none;
}


/* モック画面(PC版)
   ========================================================================== */

.p-dialog-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-dialog-container__inner,
.p-meter-area {
    width: 90%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-dialog__password {
    width: 5em;
    letter-spacing: 0.125em;
}

.p-dialog__btns {
    width: 280px;
    display: flex;
    justify-content: space-between;
}

.p-dialog__btn {
    width: 120px;
    height: 38px;
}

.p-dialog__btn--ok {
    letter-spacing: 6px;
}

.p-dialog__font-size--description {
    width: 100%;
}

/* プログレスバー */
.p-meter {
    width: 200px;
    height: 30px;

    position: relative;
    border: 1px solid gray;
}

.p-meter > span {
    display: block;
    height: 100%;

    background-color: rgb(43,194,83);
    box-shadow:
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

.p-meter > span::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.8) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.8) 75%,
        rgba(255, 255, 255, 0.8) 75%,
        rgba(255, 255, 255, 0.8)
    );
    background-size: 100%;
    overflow: hidden;
}

.p-meter.p-meter--animate > span::after {
    animation: move 20s linear infinite;
}

@keyframes move {
    0% {
        background-position: -1000px;
    }
    100% {
        background-position: 1000px;
    }
}

/* モック画面(SP版)
   ========================================================================== */

.p-mock-android__base {
    width: 100%;
    height: 100%;

    position: relative;
    overflow: hidden;
}

.p-mock-android {
    width: 100%;
    height: 100%;

    position: absolute;
    transform: translateX(100%);
}

.p-mock-android.p-initial {
    transform: translateX(0%);
}

.p-mock-android__img {
    width: 100%;
    height: 100%;
}

.p-mock-android__element {
    position: absolute;
 }

.p-mock-android__pass {
    width: 93%;
    height: 4.5%;

    top: 15.5%;
    left: 3.5%;

    border-style: none;
    box-shadow: -1px 1px 9px 0px rgba(0,0,0,0.15);
}

.p-mock-android__show-pw--border {
    width: 4.5%;
    height: 3%;
    top: 22%;
    left: 5%;

    border: 3px solid rgb(0,89,183);
    background: rgb(237,235,234);
}

.p-mock-android__show-pw {
    width: 100%;
    height: 100%;
}

.p-mock-android__cancel {
    width: 47%;
    height: 8%;
    top: 89.5%;
    left: 3.5%;
}

.p-mock-android__ok {
    width: 47%;
    height: 8.5%;
    top: 89.5%;
    left: 50%;
}

.p-mock-android__previous {
    width: 11%;
    height: 3.5%;
    top: 95%;
    left: 16%;
}

.p-mock-android__finish {
    width: 20%;
    height: 8%;
    top: 46%;
    left: 72.5%;
}

/* 画面遷移 */

.p-animate.p-mock-android__second-scrern {
    animation: transit--2 4s linear 0s 1 normal forwards;
}
.p-animate.p-mock-android__third-scrern {
    animation: transit--2 4s linear 4s 1 normal forwards;
}
.p-animate.p-mock-android__fourth-scrern {
    animation: transit--4 4s linear 8s 1 normal forwards;
}

@keyframes transit--1 {
    0% {
        transform: translateX(0%);
    }
    0.5% {
        transform: translateX(-100%);
    }
}
@keyframes transit--2 {
    0% {
        transform: translateX(100%);
    }
    0.5% {
        transform: translateX(0%);
    }
    99.5% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes transit--4 {
    0% {
        transform: translateX(100%);
    }
    0.5% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* ポータルページ
   ========================================================================== */

.p-cards {
    display: flex;
    flex-wrap: wrap;
}

.p-cards.p-cards--row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.p-cards--row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.p-card {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    height: 60px;
    width: 15%;
    min-width: 190px;

    text-align: center;
    margin: 3px;

    border: 1px solid #dadce0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
    background: white;;

    color: #333;
}

.p-card__wrapper {
     width: 15%;
     min-width: 190px;
}
.p-card__wrapper .p-card {
    width: 100%;
}

.p-qr-code {
    border: 1px solid #dadce0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26)
}
/* トップページ
   ========================================================================== */

@media screen and (min-width:768px){
    .index-recommend__cv2 {
        margin-top: -78px !important;
    }
}

.index-recommend__cv2 a {
        line-height: 40px;
}

.index-recommend__cv2 > a {
    border-radius: 10px !important;
}

@media screen and (min-width:768px){
.index-recommend__cv2 > a {
    width: 250px !important;
}
}

.index-recommend__cv3 {
    margin-top: 28px !important;
}

.index-recommend__cv3 > a {
    border-radius: 10px !important;
}