@charset "utf-8";

html {
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    color:#303030;
    line-height:1.5;
}

body {
    background: #f7f5f1 /*#f7f6f2*/;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

.block {
    display: block;
}

.mt-0 {
    margin-top: 0px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.plr-15 {
    padding: 0 15px !important;
}

.fw-normal {
    font-weight: normal !important;
}

.fw-bold {
    font-weight: bold !important;
}

.fc-danger {
    color: #d10a0a;
}

.fs-08 {
    font-size: 0.8em !important;
}

.fs-09 {
    font-size: 0.9em !important;
}

.fs-10 {
    font-size: 1.0em !important;
}

.fs-11 {
    font-size: 1.1em !important;
}

.fs-12 {
    font-size: 1.2em !important;
}

.fs-13 {
    font-size: 1.3em !important;
}

.fs-14 {
    font-size: 1.4em !important;
}

.wsnw{
    white-space: nowrap;
}

.w-960 {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.w-800 {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.w-600 {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.w-640 {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.w-20-per {
    width: 20% !important;
}

.w-80-per {
    width: 80% !important;
    margin: 0 auto;
}

.w-100-per {
    width: 100% !important;
}

.center {
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.download-pdf-img-btn {
    width: 80%;
}
  
.download-pdf-img-btn:hover {
    opacity: 0.6;
    cursor: pointer;
}
  
.flexbox {
    display: flex;
}

.flexbox.flexbox-wrap {
    flex-wrap: wrap;
}
  
.col-2 {
    width: 50%;
}

.wrapper {
    min-width: 768px;
    width: 100%;
    height: auto;
    margin: 0px auto;
}

.dl-table {
    display: flex;
    flex-wrap: wrap;
}

.dl-table dd {
    margin-left: 0;
}

/**
* header
*/
.header-logo {
    position: absolute;
    left: 15px;
    top: 10px;
    z-index: 1;
}

.header-logo img {
    width: auto;
    height: 60px;
}

/**
* contents
*/
.content {
    width: 100%;
    margin-bottom: 20px;
}

.content.no-title {
    margin-top: 60px;
}

.content .video {
    text-align: center;
    margin: auto;
    width: 100%;
    height: auto;
    max-width: 640px;
    max-height: 360px;
}

.content .image {
    text-align: center;
    margin: auto;
    width: 100%;
    height: auto;
}

.content .image img {
    width: 100%;
    height: auto;
}

.main-img {
    margin: 0 auto;
    width: 100%;
}

.main-img img {
    width: 100%;
}

.content-title {
    text-align: center;
    width: 80%;
    min-width: 300px;
    max-width: 640px;
    margin: 20px auto;
    padding-bottom: 0.5rem;
    border-bottom: 4px double #080d49;
}

.content-main {
    margin: 0 auto;
}

/**
* setp 01-02
*/
.summary-document-top {
    width: 100%;
}

.summary-document-top img {
    width: 100%;
    vertical-align: bottom;
}

.summary-document-middle {
    background-image: url('/export2/sites/np_pc/jp/ja/special/you_economy/assets/img/step01-02_sheet_bg_repeat.png');
    background-size: contain;
    width: 100%;
    background-repeat: repeat-y;
}

.summary-document-bottom {
    width: 100%;
}

.summary-document-bottom img {
    width: 100%;
    vertical-align: top;
}

.summary-document-main {
    font-size: 0.9em;
    width: 90%;
    margin: 0 auto;
}

.summary-document-main h4 {
    margin: 0;
    padding: 10px 5px 0;
} 

.summary-document-main ul {
    list-style: none;
    padding-left: 3px;
}

.summary-document-main p {
    padding-left: 5px;
    padding-right: 5px;
}

.summary-document-main p:last-child {
    margin-bottom: 0;
    padding-bottom: 10px;
}

.summary-document-main a {
    text-decoration-line: underline;
}

.summary-document-title {
    background-image: url('/export2/sites/np_pc/jp/ja/special/you_economy/assets/img/step01-02_checkbox.png');
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: 0 center;
    margin-top: 20px;
    padding-left: 35px;
    padding-right: 15px;
}

.summary-document-title div {
    padding: 5px 15px;
    background-color: #d7d7d7; 
    border-radius: 30px 30px 30px 30px/ 30px 30px 30px 30px;
}

.summary-document-content {
    margin: 10px 5px;
    padding: 0 5px 0 10px;
}

.list-style-dot {
    list-style: outside;
    margin-left: 30px;
    padding-left: 0px !important;
}

.list-style-decimal {
    list-style: decimal;
    margin-left: 30px;
    padding-left: 0px !important;
}

/**
* step 03-02
*/
.coupon-condition-title {
    border-left: 5px #080d49 solid;
    padding-left: 10px;
}

.dl-table.coupon-condition dt {
    width: 70px;
}

.dl-table.coupon-condition dd {
    width: calc(100% - 70px);
}

.dl-table.seq-no dt {
    width: 30px;
}

.dl-table.seq-no dd {
    width: calc(100% - 30px);
}

.btn-close-page {
    display: inline-block;
    border-radius: 12px;
    text-align: center; 
    cursor: pointer;
    padding: 6px 12px;
    background: #000066; 
    color: #ffffff;
    line-height: 1em;
    transition: .3s;
    box-shadow: 4px 4px 2px #666666;
    border: 2px solid #000066;
}
.btn-close-page:hover {
    box-shadow    : none;
    color         : #000066;
    background    : #ffffff;
}

/**
* step 06-01
*/
.np-fun-btn {
    background-image: url('/export2/sites/np_pc/jp/ja/special/you_economy/assets/img/step06-01_btn_apply.png');
    background-size: cover;
    height: 70px; 
    width: 90%; 
    max-width: 400px;
    border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.6);
}

.np-fun-btn a {
    display: block;
    width: 100%;
    height: 100%;
}

.np-fun-btn-text {
    font-size: 1.2em;
    line-height: 1.6em;
    font-weight: bold;
    color: #fff;
    padding-left: 30%;
    padding-top: calc(70px - 3.4em);
    text-align: center;
}

.np-fun-btn:hover {
    opacity: 0.8;
}

.np-fun-btn:hover .np-fun-btn-text {
    color: #777;
}

.benefits-area {
    background-color: #080d49;
    width: 90%;
    max-width: 600px;
    padding: 0 15px;
    margin-top: 20px;
}

.benefits-area ul {
    background-color: #fff;
    margin-top: 0;
}

.benefits-sub {
    color: #a1a1a1;
    padding-bottom: 10px;
}

.benefits-title {
    background-image: url('/export2/sites/np_pc/jp/ja/special/you_economy/assets/img/step06-01_benefits_ribon.png');
    background-size: cover;
    background-position: center;
    max-width: 450px;
    margin-top: 10px;
    text-align: center;
    line-height: 90px;
    height: 100px;
    font-size: 1.3em;
    color: rgb(83, 72, 6);
}

.benefits-item {
    list-style-type: decimal;
    color: #080d49;
    font-size: 1.1em;
    font-weight: bold;
    padding: 15px 0;
    margin-right: 20px;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #e3e3e3 0%, #aaa 30%, #fefefe 100%) 1/0 0 1px 0;;
    border-image-slice: 1;
    border-style: solid;
}

.benefits-item:last-child {
    border-bottom: none;
}

/* .content-titleの下線削除 */
.remove_border {
    border: none;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
}

/* 2021/02/08お申し込みはこちらボタン追加 */
.add_header_btn--wrap {
    border-bottom: 4px double #080d49;
    min-width: 300px;
    max-width: 640px;
    margin: 0 auto 20px;
    padding-bottom: 1.5rem;
    width: 80%;
}
.add_header_btn--wrap .add_header_btn {
    background-color: #000;
    border: 1px solid  #000;
    border-radius: 20px;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, .6);
    color: #fff;
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    max-width: 400px;
    margin: auto;
    padding: 20px 5px;
    text-align: center;
    transition: all .3s;
    width: 90%;
}
  
.add_header_btn--wrap .add_header_btn:hover {
    background-color: #fff;
    color: #000;
}

/**
* Step 07-01
*/
.question-about {
    width: 100%;
    padding: 10px;
}

.question-about .introduction {
    border: 3px #080d49 solid;
    border-radius: 20px;
}

.question-about .introduction .introduction-title {
    border-left: 5px #080d49 solid;
    padding-left: 10px;
    margin-left: 10px;
}

.question-about .introduction img {
    width: 80%;
}

.question-about p {
    padding: 0 10px;
}

.qa-area {
    width: 100%;
}

.qa-detail {
    margin: 0 auto 30px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: auto;
    max-width: 960px;
    height: auto;
    background-color: #fff;
}

article.qa-detail:nth-child(1),
article.qa-detail:nth-child(3) {
    max-height: 300px;
}

article.qa-detail:nth-child(2) {
    max-height: 500px;
}

article.qa-detail:nth-child(2) .qa-img {
    padding-bottom: 500px;
}

.qa-detail .question {
    flex: 0 0 auto;
    width: calc(45% + 30px);
    order: 1;
    padding: 0;
    margin: 5px 2%;
}

.qa-detail .qa-img {
    flex: 0 0 100%;
    width: 43%;
    min-width: 400px;
    order: 3;
    margin: 5px 2%;
}

.qa-detail .answer {
    flex: 0 0 auto;
    width: 45%;
    order: 2;
    margin: 5px 2%;
    padding: 0 30px 0 15px;
}

.qa-detail.img-right .question { order: 2; }
.qa-detail.img-right .qa-img { order: 1; }
.qa-detail.img-right .answer { order: 3; }

.qa-detail .question dl {
    display: flex;
    flex-wrap: wrap;
    background-color: #080d49;
    border-radius: 15px;
    color: white;
    padding: 5px 10px;
    margin-top: 0;
    margin-bottom: 5px;
}

.qa-detail .question dl dt {
    font-size: 1.4rem;
    font-weight: bold;
    flex: 0 0 50px;
}

.qa-detail .question dl dd {
    flex: 0 0 calc(100% - 50px);
    margin: 0;
    line-height: 1.5rem;
    padding: 7px 0;
}

.qa-detail .question.circle dl {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 15px;
    color: #080d49;
    padding: 5px 10px;
    font-weight: bold;
}

.qa-detail .question.circle dl dt div {
    font-size: 1.3rem;
    background-color: #080d49;
    color: #fff;
    width: 36px;
    height: 35px;
    padding: 0;
    padding-top: 1px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
}

.qa-detail .answer dl {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.qa-detail .answer dl dt {
    flex: 0 0 80px;
    margin-bottom: 8px;
}

.qa-detail .answer dl dd {
    flex: 0 0 calc(100% - 80px);
    margin: 0;
    margin-bottom: 10px;
    font-size: 0.8rem;
}

.qa-detail .qa-img img {
    width: 100%;
    max-width: 100%;
    min-width: 400px;
    height: auto;
}

.qa-detail.no-img .question-about,
.qa-detail.no-img .answer {
    width: 100%;
}

.strong-italic {
    font-style: italic;
}

.strong-italic-s {
    font-size: 1.0em;
    font-style: italic;
}

.summary {
    max-width: 960px;
    margin: 20px auto;
}

.summary-area {
    
    min-height: 250px;
    display: table;
    position: relative;
    width: 100%;
    z-index: 0;
    overflow: hidden;
}

.summary-area::before {
    content: '';    
    background: inherit;
    background-image: url('/export2/sites/np_pc/jp/ja/special/you_economy/assets/img/step07-01_summary.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    filter: grayscale(50%) opacity(0.6);
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: inherit;
    height: inherit;
    z-index: -1;
}

.summary-text {
    color: white;
    font-weight: bold;
    padding: 0 5px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    font-size: 1.6rem;
    filter: none;
    text-shadow:0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00,0 0 3px #f00;
}

/**
* Invitation
* Step 07-04, 09-01
*/
.invitation-card {
    width: auto;
}

.invitation-img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.invitation-bg-img {
    width: 100%;
    background-image: url('/export2/sites/np_pc/jp/ja/special/you_economy/assets/img/step09-01_invitation_special_bg_repeat.png');
    background-repeat: repeat-y;
    background-size: contain;
}

.invitation-bg-img div.invitation-video {
    margin: 0 auto;
    width: 76%;
    height: auto;
} 

.invitation-remark {
    margin-left: -1rem;
}

.invitation-remark li {
    list-style-type: none;
    text-indent: -1.2rem;
}

/**
* footer
*/
footer {
    border-top: 1px #c7c7c7 solid;
    box-shadow: 0 -2px 2px 0 #c7c7c7;
    margin-top: 60px;
}

.footer-container {
    display: flex;
    margin: 0 auto;
    margin-top: 20px;
    width: 90%;
    min-width: 800px;
}

.footer-container .link-info {
    width: auto;
    margin-right: 5px;
}

.footer-container .link-info-right {
    margin-right: 5px;
    margin-left: auto;
}

.footer-container .link-info ul {
    margin-top: 0px;
}

.footer-container .link-info ul li {
    list-style-type: none;
    margin-left: -10px;
}

.footer-container .link-info ul li a {
    text-decoration: none;
    padding: 6px 0;
    font-size: 0.88rem;
    color: #303030;
}

.sns-link {
    margin-bottom: 10px;
}

.link-info-title {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-weight: bold;
    font-size: 0.95rem;
}

a.sns-icon {
    margin-left: 10px;    
}

.sns-icon img {
    width: 32px;
    height: auto;
}

a.appli-download-icon {
    margin-left: 10px;
}

.appli-download-icon.appstore-badge img {
    width: auto;
    height: 40px;
    margin-bottom: 8px;
}

.appli-download-icon.googlepay-badge img {
    width: auto;
    height: 59px;
    padding-top: 1px;
}

.footer-bottom {
    font-size: 0.8em;
    text-align: right;
    margin: 0 30px 10px 0;
}

.text-right {
    text-align: right;
}

.footer-container .link-info ul li a {
    color: #080d49;
}

.footer-container ul li a:hover {
    color: #4e59d6;
}

@media screen and (max-width: 992px) {
    body {
        font-size: 1.0em;
    }

    .sp-mb-50 {
        margin-bottom: 50px !important;
    }

    .flexbox {
        flex-direction: column;
    }

    .col-2 {
        width: 100%;
    }

    .wrapper {
        min-width: 320px;
    }

    .header-logo img {
        width: auto;
        height: 40px;
    }

    .content {
        margin-top: 60px;
    }

    .content-title {
        line-height: 1.8rem;
        font-size: 1.6rem;
    }

    .content-main {
        padding: 0 10px;
    }

    .content .video img,
    .content .image img {
        width: 100% !important;
        max-width: 640px !important;
        height: auto !important;
        max-height: 360px !important;
    }

    .download-pdf-img-btn {
        width: 60%;
    }

    .summary-document-title {
        background-size: 22px 22px;
        padding-left: 25px;
    }

    .benefits-title {
        line-height: 70px;
        height: 80px;
    }

    .question-about .introduction img {
        width: 94%;
    }

    .qa-detail {
        width: auto;
        flex-wrap: nowrap;
        margin: 0;
        margin-bottom: 40px;
        padding: 0 10px;
        height: auto;
    }

    article.qa-detail:nth-child(1),
    article.qa-detail:nth-child(3) {
        max-height: unset;
    }

    article.qa-detail:nth-child(2) {
        max-height: unset;
    }

    article.qa-detail:nth-child(2) .qa-img {
        padding-bottom: unset;
    }

    .qa-detail .question,
    .qa-detail .qa-img,
    .qa-detail .answer {
        margin: 5px 0;
    }

    .qa-detail .question {
        width: 100%;
        order: 1;
    }

    .qa-detail .qa-img {
        width: 100%;
        order: 2;
        min-width: auto;
    }

    .qa-detail.img-right .question { order: 1; }
    .qa-detail.img-right .qa-img { order: 2; }
    .qa-detail.img-right .answer { order: 3; }

    .qa-detail .qa-img img {
        width: 100%;
        min-width: auto;
        height: auto;
    }

    .qa-detail .answer {
        width: 100%;
        order: 3;
        padding: 0;
    }

    .footer-container {
        flex-direction: column;
        min-width: auto;
    }

    .footer-container .link-info,
    .footer-container .link-info-right {
        width: 100%;
        margin: 0;
    }

    .footer-container .link-info {
        order: 2;
    }

    .footer-container .link-info-right {
        order: 1;
        margin-bottom: 25px;
    }

    .footer-container .link-info ul {
        padding: 0;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .footer-container .link-info ul li {
        height: 41px;
        font-size: 1.4rem;
        margin-left: 5px;
        margin-right: 5px;
        padding-top: 3px;
        border-top: 1px solid #707070;
    }

    .footer-container .link-info ul li::before {
        content: "－ ";
        display: inline;
        font-size: 0.7rem;
    }

    .sns-link,
    .appli-link {
        text-align: center;
    }
    
}

@media screen and (max-width: 767px) {
    body {
        font-size: 0.9em;
    }
}