@charset "Shift_JIS";
/* ====================================================== */
/* Last Update : 2025.09.04 */
/* For : https://www.metlife.co.jp/campaign/nf/spwlwc/index.html */
/* ====================================================== */
body {
color: #333333;
-webkit-text-size-adjust: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
line-height: 1;
}
img {
max-width: 100%;
}
a {
box-sizing: border-box;
}
a:link,
a:visited,
a:hover,
a:focus,
a:active {
text-decoration: none;
color: inherit;
}
a:hover {
opacity: 0.7;
}
em {
font-style: normal;
}
.pageup a,
.pageup a:link {
color: #0061a0;
text-decoration: underline;
}
.pageupBtn {
position: fixed;
background-color: #0061A0;
right: 0;
bottom: 5%;
}
.pageupBtn a {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.only-pc {
display: block;
}
.only-smp {
display: none;
}
@media print, only screen and (max-width: 767px) {
body {
font-family: "‚l‚r ‚oƒSƒVƒbƒN", "Hiragino Kaku Gothic Pro",
"ƒqƒ‰ƒMƒmŠpƒS Pro W3", osaka, sans-serif;
}
.only-pc {
display: none;
}
.only-smp {
display: block;
}
}
@media print, only screen and (max-width: 400px) {
* {
font-size: 11px;
}
}



/* template*/
/* ------------------------------------------------------*/
#contentsFrame .wrapFrame {
width: 100%;
}
#bottomPageup {
max-width: 980px;
width: 100%;
margin: 0 auto;
}
@media print, screen and (min-width: 768px) and (max-width: 980px) {
#footerFrame .wrapFrame {
width: 100%;
}
}


/* attention */
/* ------------------------------------------------------ */
#attention {
padding: 0.5rem 1.4545rem;
background-color: #F2F2F2;
}
#attention dl {
display: flex;
justify-content: center;
}
#attention dl dt,
#attention dl dd {
color: #DB0A5B;
line-height: 1.6;
font-size: 1.25rem;
}
#attention dl dt {
flex-shrink: 0;
width: 3.5em;
white-space: nowrap;
}
#attention .modal-trigger {
background: none;
border: none;
color: inherit;
text-decoration: underline;
cursor: pointer;
font-family: inherit;
font-size: inherit;
padding: 0;
margin: 0;
}
#attention .modal-trigger:hover {
opacity: 0.7;
}
@media print, only screen and (max-width: 767px) {
#attention dl dt,
#attention dl dd {
font-size: 1.27rem;
}
}

/* mv */
/* ------------------------------------------------------ */
#mv .mvContent {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1052px;
margin: 0 auto;
padding: 3.375rem 0 4rem;
}
#mv .mvContent::before,
#mv .mvContent::after {
content: "";
position: absolute;
width: 99vw;
height: 2.25rem;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to right, #0090DA 0%, #0090DA 60%, #0061A0 60%, #0061A0 68%, #A4CE4E 68%, #A4CE4E 96%, #0061A0 96%, #0061A0 100%);
}
#mv .mvContent::before {
top: 0;
}
#mv .mvContent::after {
bottom: 0;
}
#mv .mvTitle {
flex: 1;
}
#mv .mvTitle h2 {
margin-bottom: 2.5rem;
color: #0090DA;
font-size: 3.25rem;
}
#mv .mvSubtitle {
display: block;
margin-bottom: 1.25rem;
color: #0090DA;
font-size: 1.25rem;
}
#mv .mvAchievement {
display: inline-block;
background-color: #0090DA;
padding: 0.875rem 1.25rem;
border-radius: 0.75rem;
color: #FFFFFF;
font-size: 1.125rem;
}
#mv .number {
font-size: 1.77em;
}
#mv .unit {
font-size: 1.22em;
}
#mv sup {
vertical-align: super;
font-size: 0.8em;
}
#mv .mvPoints {
flex: 1;
display: flex;
justify-content: center;
gap: 30px;
}
#mv .pointItem {
flex: 1;
text-align: center;
max-width: 260px;
}
#mv .mvNote {
max-width: 836px;
margin: 1.5rem auto 3.75rem;
}
#mv .mvNoteItem {
display: flex;
align-items: baseline;
gap: 0.4285em;
line-height: 1.5;
font-size: 0.875rem;
}
#mv .mvNoteItem span {
flex-shrink: 0;
width: 2em;
white-space: nowrap;
}
#mv .mvNoteItem a {
text-decoration: underline;
}

/* for Tab */
@media print, screen and (min-width: 768px) and (max-width: 1080px) {
#mv .mvContent {
padding: 3.375rem 1.4545rem 4rem;
}
#mv .mvNote {
width: 100%;
padding: 0 1.4545rem;
box-sizing: border-box;
}
}
@media print, screen and (min-width: 768px) and (max-width: 900px) {
#mv .mvContent::before, 
#mv .mvContent::after {
width: 100%;
}
#mv .mvTitle h2 {
font-size: 5.7vw;
}
}

/* for SMP */
@media print, only screen and (max-width: 767px) {
#mv .mvContent {
flex-direction: column;
gap: 2.18rem;
padding: 3.99rem 0 6.17rem;
}
#mv .mvContent::before,
#mv .mvContent::after {
height: 1.81rem;
}
#mv .mvTitle {
text-align: center;
}
#mv .mvTitle h2 {
margin-bottom: 1.4545rem;
font-size: 3.45rem;
}
#mv .mvSubtitle {
margin-bottom: 1.4545rem;
font-size: 1.63rem;
}
#mv .mvAchievement {
padding: 1.27rem 2.4545rem;
border-radius: 1.09rem;
font-size: 1.4545rem;
}
#mv .mvPoints {
gap: 1.09rem;
max-width: none;
}
#mv .pointItem {
width: 14.36rem;
}
#mv .mvNote {
width: 32rem;
margin: 2.18rem auto 3.63rem;
}
#mv .mvNoteItem {
font-size: 1.27rem;
}
}

/* content sections */
/* ------------------------------------------------------ */
.inner {
max-width: 836px;
margin: 0 auto;
}
@media print, screen and (min-width: 768px) and (max-width: 900px) {
.inner {
padding: 0 1.4545rem;
}
}
@media screen and (max-width: 767px) {
.inner {
max-width: 32rem;
}
}


/* lead */
/* ------------------------------------------------------ */
#lead {
margin-bottom: 3.375rem;
text-align: center;
}
#lead h2 {
position: relative;
display: inline-block;
margin-bottom: 2.09rem;
padding-right: 5.125rem;
}
#lead h2 p {
text-align: center;
color: #0090DA;
font-size: 2.25rem;
}
#lead h2::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 4.5rem;
height: 5.5rem;
background-image: url(/campaign/nf/spwlwc/images/lead_img.png);
background-size: contain;
background-repeat: no-repeat;
transform: translateY(-50%);
}
#lead p {
line-height: 1.75;
font-size: 1.125rem;
}

/* for SMP */
@media print, only screen and (max-width: 767px) {
#lead {
margin-bottom: 3.63rem;
}
#lead h2 {
width: 100%;
margin-bottom: 2.86rem;
padding-right: 6rem;
box-sizing: border-box;
}
#lead h2 p {
line-height: 1.5;
font-size: 2.54rem;
}
#lead h2::after {
width: 6.36rem;
height: 7.81rem;
}
#lead p {
font-size: 1.4545rem;
}
}


/* ctaSection */
/* ------------------------------------------------------ */
#cta01.ctaSection {
margin-bottom: 3.75rem;
}
#cta02.ctaSection {
margin-bottom: 5rem;
}
.ctaSection .ctaItem {  
width: 99vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding: 2.635rem 0;
background-color: #0090DA; 
}
.ctaSection .ctaItemContent {
max-width: 836px;
margin: 0 auto;
padding: 2.5rem 0;
border-radius: 6px;
background-color: #FFFFFF;
text-align: center;
}
.ctaSection .ctaItemContent h3 {
margin-bottom: 1.5rem;
color: #0061A0;
font-size: 1.75rem;
font-weight: bold;
}
.ctaSection .ctaItemContent h4 {
margin-bottom: 1.5rem;
color: #0061A0;
font-size:1.25rem;
}
.ctaSection .ctaItemContent .ctaText {
font-size: 1rem;
line-height: 1.75;
}
.ctaSection .btnWrap {
position: relative;
display: flex;
justify-content: space-between;
margin: 0 1.25rem 2.25rem 1.25rem;
padding-bottom: 1.5rem;
}
.ctaSection .btnWrap::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-image: url(/campaign/nf/spwlwc/images/section_line.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.ctaSection .btnApply {
display: inline-block;
width: 15.75rem;
padding: 1.25rem 0;
margin-bottom: 1rem;
border-radius: 0.375rem;
box-shadow: 3px 3px 3px #A7A8AA;
background-color: #DB0A5B;
line-height: 1;
font-size: 1.125rem;
color: #FFFFFF
}
.ctaSection .btnItem {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.ctaSection .btnLabel {
position: relative;
margin-bottom: 0.5rem;
padding: 1px 1em;
background: #FFC600;
border-radius: 26px;
font-size: 0.875rem;
}
.ctaSection .btnLabel::after {
content: "";
position: absolute;
bottom: -0.437rem;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 0.57em solid transparent;
border-right: 0.57em solid transparent;
border-top: 0.57em solid #FFC600;
}
.ctaSection .btnItem .btnText {
font-size: 1rem;
}
.ctaSection .btnItem button {
padding: 0;
border: none;
background: none;
text-decoration: underline;
color: #0061A0;
font-family: inherit;
font-size: 1rem;
}
.ctaSection .btnDownload,
.ctaSection .btnAnchor,
.ctaSection .btnMore {
display: inline-block;
width: 17rem;
margin-top: 1rem;
padding: 1rem 0;
border: 2px solid #0061A0;
border-radius: 0.375rem;
line-height: 1;
color: #0061A0;
}
.ctaSection .ctaLink {
padding: 5rem 0 3.375rem;
text-align: center;
}
.ctaSection .ctaDetail {
padding: 5rem 0;
}
.ctaSection .ctaDetailContent {
max-width: 746px;
margin: 0 auto;
padding: 1.5rem;
box-sizing: border-box;
background-image: url(/campaign/nf/spwlwc/images/ctaDetail_bg_pc.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
}
.ctaSection .btnDetail {
display: inline-block;
width: 19.5rem;
margin-top: 1rem;
padding: 0.9375rem;
border-radius: 0.375rem;
box-shadow: 4px 4px 4px rgba(51, 51, 51, 0.25);
background-color: #333333;
color: #FFFFFF;
font-size: 1.125rem;
}

/* for Tab */
@media print, screen and (min-width: 768px) and (max-width: 900px) {
.ctaSection .ctaItem {
width: 99vw;
}
.ctaSection .ctaItemContent {
max-width: 92vw;
}
.ctaSection .btnWrap {
flex-direction: column;
gap: 2rem;
}
.ctaSection .btnApply {
width: 18.75rem;
}
.ctaSection .ctaItemContent .ctaText {
padding: 0 1.25rem;
text-align: left;
}
}

/* for SMP */
@media print, only screen and (max-width: 767px) {
#cta01.ctaSection {
margin-bottom: 3.63rem;
}
#cta02.ctaSection {
margin-bottom: 3.63rem;
}
.ctaSection .ctaItem {
padding: 2.9rem 0;
}
.ctaSection .ctaItemContent {
max-width: 29.81rem;
padding: 2.9rem 0;
}
.ctaSection .ctaItemContent h3 {
margin-bottom: 1.4545rem;
padding: 0 1.36rem;
line-height: 1.6;
font-size: 2rem;
}
.ctaSection .ctaItemContent h4 {
padding: 0 1.25rem;
text-align: left;
line-height: 1.5;
font-size: 1.63rem;
}
.ctaSection .btnWrap {
flex-direction: column;
gap: 2.9rem;
padding-bottom: 2.9rem;
}
.ctaSection .btnApply {
width: 26.9rem;
margin-bottom: 0;
padding: 1.9rem 0;
border-radius: 0.54rem;
font-size: 1.4545rem;
}
.ctaSection .btnLabel {
margin-bottom: 0.72rem;
font-size: 1.27rem;
}
.ctaSection .btnLabel::after {
bottom: -0.63rem;
}
.ctaSection .btnItem .btnText {
margin-top: 1.09rem;
font-size: 1.27rem;
}
.ctaSection .btnItem button {
font-size: 1.27rem;
}
.ctaSection .btnDownload,
.ctaSection .btnAnchor,
.ctaSection .btnMore {
width: 22.9rem;
padding: 1.4545rem 0;
border-radius: 0.54rem;
font-size: 1.4545rem;
}
.ctaSection .ctaLink {
padding: 3.63rem 0;
}
.ctaSection .ctaItem .ctaText,
.ctaSection .ctaLink p {
line-height: 1.75;
font-size: 1.4545rem;
}
.ctaSection .ctaItem .ctaText {
padding: 0 1.25rem;
text-align: left;
}
.ctaSection .ctaDetail {
padding: 3.63rem 0;
}
.ctaSection .ctaDetailContent {
max-width: 29.81rem;
padding: 0.9rem;
background-image: url(/campaign/nf/spwlwc/images/ctaDetail_bg_smp.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.ctaSection .btnDetail {
width: auto;
border-radius: 0.54rem;
text-align: center;
font-size: 1.4545rem;
}
}

/* pointSection*/
/* ------------------------------------------------------ */
.pointSection {
position: relative;
padding-top: 3rem;
padding-bottom: 5rem;
}
.pointSection::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-image: url(/campaign/nf/spwlwc/images/section_line.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.pointSection h3 {
margin-bottom: 1.65rem;
color: #0090DA;
font-size: 0.875rem;
}
.pointSection h3 .circle {
position: relative;
display: inline-block;
margin-left: 0.75em;
color: #FFFFFF;
}
.pointSection h3 .circle::before {
content: "";
position: absolute;
top: 50%;
left: 45%;
z-index: -1;
width: 1.4em;
height: 1.4em;
border-radius: 50%;
background-color: #0090DA;
transform: translate(-50%, -50%);
}
.pointSection .pointSectionText {
position: relative;
margin-bottom: 2.25rem;
color: #0090DA;
font-size: 1.75rem;
}
.pointSection .pointSectionText em {
color: #DB0A5B;
}
.pointSection .pointSectionText small {
text-shadow: 0.3px 0.3px 0 #DB0A5B,-0.3px -0.3px 0 #DB0A5B,0.3px -0.3px 0 #DB0A5B,-0.3px 0.3px 0 #DB0A5B;
font-size: 0.7em;
}
.pointSection .pointSectionText span {
display: block;
margin-top: 1rem;
line-height: 1.75;
color: #333333;
font-size: 1.125rem;
}

/* for SMP */
@media print, only screen and (max-width: 767px) {
.pointSection {
padding-top: 2.18rem;
padding-bottom: 3.63rem;
}
.pointSection h3 {
margin-bottom: 1.4545rem;
font-size: 1.27rem;
}
.pointSection .pointSectionText {
margin-bottom: 2.18rem;
font-size: 2rem;
}
.pointSection .pointSectionText span {
line-height: 1.6;
font-size: 1.4545rem;
}
}


/* point01 */
/* ------------------------------------------------------ */
#point01 .pointSectionText::after {
content: "";
position: absolute;
top: 50%;
right: 9rem;
width: 5.375rem;
height: 6.625rem;
background-image: url(/campaign/nf/spwlwc/images/illust_money.png);
background-repeat: no-repeat;
background-size: contain;
transform: translateY(-50%);
}
#point01 .pointSectionNote {
margin-bottom: 2.25rem;
}
#point01 .pointSectionNoteList li {
list-style: disc;
margin-left: 1em;
font-size: 0.875rem;
}
#point01 .pointSectionNoteList li:first-child {
margin-bottom: 1rem;
}
#point01 .contentBlock h4 {
padding: 1rem 0;
border-radius: 0.5rem 0.5rem 0 0;
background-color: #0061A0;
text-align: center;
color: #FFFFFF;
font-size: 1.125rem;
}
#point01 .contentTable {
padding: 2.5rem 3.25rem 3.125rem;
background-color: #F2F2F2;
}
#point01 .contentTable .row {
display: flex;
flex-wrap: wrap;
padding: 1.125rem 0;
border-bottom: 1px solid #A7A8AA;
}
#point01 .contentTable .row p {
font-size: 1rem;
}
#point01 .contentTable .row:first-child {
padding-top: 0;
}
#point01 .contentTable .row:last-child {
padding-bottom: 0;
border-bottom: none;
}
#point01 .contentTable .row .left {
width: 38%;
/*width: 17rem;*/
padding-left: 1.5rem;
}
#point01 .contentTable .row .left small {
display: inline-block;
margin-top: 0.5em;
margin-left: 1.2em;
text-indent: -1.3em;
font-size: 0.875em;
}
#point01 .contentTable .row .right {
flex-shrink: 0;
}
#point01 .contentTable .row em {
font-size: 2rem;
}
#point01 .contentTable .row .highlight {
color: #DB0A5B;
}
#point01 .contentTable .row .list {
width: 100%;
margin-top: 1.125rem;
padding: 1.25rem;
border-radius: 0.375rem;
background-color: #D9D9D6;
line-height: 1.5;
font-size: 0.875rem;
}
#point01 .contentTable .row .list ul li:not(:last-child) {
margin-bottom: 0.75rem;
}
#point01 .contentTable .row .list ul.disc li {
margin-left: 1em;
list-style: disc;
}
#point01 .contentTable .row .list ul.indent li {
padding-left: 1.2em;
text-indent: -1.3em;
}
#point01 .contentTable .row .list ul.Indent li.noIndent {
text-indent: 0;
}
#point01 .contentTable .row .list a {
text-decoration: underline;
}
#point01 .contentTable .row .subTitle {
padding-top: 2rem;
text-shadow: 0.3px 0.3px 0 #0061A0,-0.3px -0.3px 0 #0061A0,0.3px -0.3px 0 #0061A0,-0.3px 0.3px 0 #0061A0;
color: #0061A0;
font-size: 1.375rem;
}
#point01 .contentTable .row .table {
margin-top: 1.125rem;
margin-bottom: 0.875rem;
overflow-x: auto;
}
#point01 .contentTable .row .tableUnit {
width: 100%;
margin-bottom: 0.5rem;
text-align: right;
font-size: 0.875rem;
}
#point01 .contentTable .row .tableContent {
height: 35.43rem;
overflow-x: scroll;
}
#point01 .contentTable .row .tableContent::-webkit-scrollbar {
height: 1rem;
background-color: #D9D9D6;
}
#point01 .contentTable .row .tableContent::-webkit-scrollbar-thumb {
border-radius: 0.625rem;
background-color: #75787B;
}
#point01 .contentTable .row .tableContent img {
max-width: none;
height: 100%;
}
#point01 .contentTable .row .tableNote {
margin-top: 0.5rem;
color: #DB0A5B;
font-size: 1rem;
}
#point01 .contentTable .row .Links {
display: flex;
justify-content: center;
gap: 6.25rem;
width: 100%;
margin-top: 3rem;
}
#point01 .contentTable .row .Links .textLink {
position: relative;
display: inline-block;
padding-right: 1em;
text-decoration: underline;
text-underline-offset: 0.38em;
color: #0061A0;
font-size: 1.125rem;
}
#point01 .contentTable .row .Links .textLink::after {
content: "";
position: absolute;
top: 50%;
right: 0;
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-left: 0.2em;
border-right: 1px solid #0061A0;
border-bottom: 1px solid #0061A0;
background: transparent;
transform: rotate(-45deg) translateY(-50%);
vertical-align: middle;
}
#point01 .contentTable .row .refundMoney {
position: relative;
}
#point01 .contentTable .row .refundMoney::after {
content: "";
position: absolute;
top: -2.375rem;
left: 11.0625rem;
width: 15.75rem;
height: 7.5rem;
background-image: url(/campaign/nf/spwlwc/images/point01_refundRate_pc.png);
background-size: contain;
background-repeat: no-repeat;
}

/* for tab */
@media print, screen and (min-width: 768px) and (max-width: 900px) {
#point01 .contentTable .row .refundMoney::after {
width: 28.53vw;
height: 13.59vw;
max-width: 15.75rem;
max-height: 7.5rem;
}
}

/* for SMP */
@media print, only screen and (max-width: 767px) {
#point01 .pointSectionText::after {
top: 1rem;
right: 2.5rem;
width: 5.09rem;
height: 6.27rem;
transform: unset;
}
#point01 .pointSectionNote {
margin-bottom: 2.18rem;
}
#point01 .pointSectionNoteList li {
font-size: 1.27rem;
}
#point01 .contentBlock h4 {
border-radius: 0.72rem 0.72rem 0 0;
font-size: 1.4545rem;
}
#point01 .contentTable {
padding: 2.18rem 1.4545rem 3.27rem;
}
#point01 .contentTable .row {
padding: 1.63rem 0;
}
#point01 .contentTable .row p {
font-size: 1.4545rem;
}
#point01 .contentTable .row .left {
width: 100%;
margin-bottom: 1.81rem;
padding-left: 0;
}
#point01 .contentTable .row .right {
width: 100%;
}
#point01 .contentTable .row em {
font-size: 2.18rem;
}
#point01 .contentTable .row .list {
margin-top: 1.63rem;
padding: 1.4545rem 0.9rem;
border-radius: 0.54rem;
font-size: 1.27rem;
}
#point01 .contentTable .row .list ul li:not(:last-child) {
margin-bottom: 1.09rem;
}
#point01 .contentTable .row .subTitle {
width: 100%;
padding-top: 2.9rem;
text-align: center;
font-size: 1.81rem;
}
#point01 .contentTable .row .table {
margin-top: 0.5454rem;
margin-bottom: 0.5454rem;
}
#point01 .contentTable .row .tableUnit {
font-size: 1.27rem;
}
#point01 .contentTable .row .tableContent {
height: 40rem;
}
#point01 .contentTable .row .tableNote {
font-size: 1.27rem;
}
#point01 .contentTable .row .Links {
justify-content: space-between;
gap: 0;
margin-top: 3.27rem;
}
#point01 .contentTable .row .Links .textLink {
font-size: 1.4545rem;
}
#point01 .contentTable .row .refundMoney::after {
top: -9.09rem;
left: auto;
right: -1.4545rem;
width: 15.81rem;
height: 11.72rem;
background-image: url(/campaign/nf/spwlwc/images/point01_refundRate_smp.png);
background-size: contain;
background-repeat: no-repeat;
}
}

/* point02 */
/* ------------------------------------------------------ */
#point02 {
padding-bottom: 3.375rem;
}
#point02 .pointSectionText::after {
content: "";
position: absolute;
bottom: 0;
right: 10rem;
width: 6.25rem;
height: 7.25rem;
background-image: url(/campaign/nf/spwlwc/images/point02_img.png);
background-repeat: no-repeat;
background-size: contain;
}
#point02 .contentBlock {
margin-bottom: 2.25rem;
padding: 1.5rem 2.5rem;
background-color: #F2F2F2;
}
#point02 .contentBlock h4 {
margin-bottom: 1.5rem;
text-align: center;
line-height: 1.5;
font-size: 1.375rem;
}
#point02 .contentBlock h4 em {
color: #DB0A5B;
}
#point02 .contentList {
display: flex;
justify-content: center;
gap: 2.25rem;
}
#point02 .contentList .contentListItem {
position: relative;
display: flex;
align-items: center;
width: 22.5rem;
padding: 1.5rem 1.25rem;
box-sizing: border-box;
background-color: #FFFFFF;
}
#point02 .contentList .contentListItem:nth-child(1)::after {
content: "";
position: absolute;
top: 50%;
right: 1.25rem;
width: 4rem;
height: 4.625rem;
background-image: url(/campaign/nf/spwlwc/images/illust_money.png);
background-size: contain;
background-repeat: no-repeat;
transform: translateY(-50%);
}  
#point02 .contentList .contentListItem:nth-child(2)::after {
content: "";
position: absolute;
top: 50%;
right: 1.25rem;
width: 8.875rem;
height: 5rem;
background-image: url(/campaign/nf/spwlwc/images/illust_family.png);
background-size: contain;
background-repeat: no-repeat;
transform: translateY(-50%);
}  
#point02 .contentList .contentListItem p {
line-height: 1.5;
font-size: 1.375rem;
}
#point02 .contentDescription p {
line-height: 1.77;
font-size: 1.125rem;
}
#point02 .contentDescription span {
line-height: 1.5;
font-size: 0.875rem;
}
#point02 .contentDescription em {
color: #DB0A5B;
}

/* for Tab */
@media print, screen and (min-width: 768px) and (max-width: 900px) {
#point02 .contentList .contentListItem p {
font-size: 2.4vw
}
#point02 .contentList .contentListItem:nth-child(1)::after {
width: 7.1vw;
}
#point02 .contentList .contentListItem:nth-child(2)::after {
width: 15.7vw;
}
}


/* for SMP */
@media print, only screen and (max-width: 767px) {
#point02 {
padding-bottom: 3.63rem;
}
#point02 .pointSectionText::after {
right: 2.5rem;
width: 5.36rem;
height: 6.27rem;
}
#point02 .contentBlock {
margin-bottom: 3.45rem;
padding: 1.4545rem;
}
#point02 .contentBlock h4 {
margin-bottom: 1.4545rem;
font-size: 1.81rem;
}
#point02 .contentList {
flex-direction: column;
align-items: center;
gap: 1.4545rem;
}
#point02 .contentList .contentListItem {
width: 26.9rem;
min-height: 8.36rem;
padding: 1.4545rem 1.81rem;
}
#point02 .contentList .contentListItem:nth-child(1)::after {
right: 2.9rem;
width: 4.72rem;
height: 5.45rem;
}  
#point02 .contentList .contentListItem:nth-child(2)::after {
right: 1.81rem;
width: 10.54rem;
height: 6rem;
}  
#point02 .contentList .contentListItem p {
font-size: 1.63rem;
}
#point02 .contentDescription p {
font-size: 1.4545rem;
}
#point02 .contentDescription span {
font-size: 1.27rem;
}
}

/* pointOther */
/* ------------------------------------------------------ */
#pointOther .contentGraph  {
margin-bottom: 2.25rem;
padding: 1.875rem;
background-color: #F2F2F2;
}
#pointOther .contentGraph h4 {
margin-bottom: 1.25rem;
text-align: center;
line-height: 1.5;
font-size: 1.375rem;
}
#pointOther .contentGraph h4 span {
display: inline-block;
margin-top: 1rem;
font-size: 1.125rem;
}
#pointOther .graphImage {
margin-bottom: 1.25rem;
}
#pointOther .graphList li {
margin-bottom: 0.75rem;
margin-left: 1.2em;
text-indent: -1.2em;
font-size: 0.875rem;
}
#pointOther .graphSource {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.875rem;
}
#pointOther .graphSource span {
flex-shrink: 0;
width: 2.2em;
white-space: nowrap;
}
#pointOther .contentImage {
margin-bottom: 3rem;
}
#pointOther .contentImage:last-child {
margin-bottom: 0;
}
#pointOther .contentImage p {
line-height: 1.77;
font-size: 1.125rem;
}
#pointOther .contentImage p em {
color: #DB0A5B;
}
#pointOther .ImageWrap {
display: flex;
justify-content: space-between;
margin-top: 1.5rem;
}
#pointOther .ImageWrap .ImageItem {
width: 25rem;
}
#pointOther .ImageWrap .ImageItem p {
margin-top: 1rem;
text-align: center;
font-size: 1.125rem;
}

/* for Tab */
@media print, screen and (min-width: 768px) and (max-width: 900px) {
#pointOther .ImageWrap {
gap: 4vw;
}
}


/* for SMP */
@media print, only screen and (max-width: 767px) {
#pointOther .contentGraph  {
margin-bottom: 3.63rem;
padding: 2.18rem 1.4545rem;
}
#pointOther .contentGraph h4 {
margin-bottom: 1.4545rem;
font-size: 1.81rem;
}
#pointOther .contentGraph h4 span {
font-size: 1.4545rem;
}
#pointOther .graphImage {
margin-bottom: 0.5rem;
overflow-x: auto;
}
#pointOther .graphImage::-webkit-scrollbar {
height: 1rem;
background-color: #D9D9D6;
}
#pointOther .graphImage::-webkit-scrollbar-thumb {
border-radius: 0.625rem;
background-color: #75787B;
}
#pointOther .graphImage img {
max-width: none;
height: 100%;
}
#pointOther .graphNote {
margin-bottom: 2.18rem;
color: #DB0A5B;
font-size: 1.27rem;
}
#pointOther .graphList li {
margin-bottom: 1rem;
font-size: 1.27rem;
}
#pointOther .graphSource {
font-size: 1.27rem;
}
#pointOther .contentImage {
margin-bottom: 3.63rem;
}
#pointOther .contentImage p {
font-size: 1.4545rem;
}
#pointOther .ImageWrap {
flex-direction: column;
align-items: center;
gap: 2.18rem;
margin-top: 2.18rem;
}
#pointOther .ImageWrap .ImageItem {
width: 29.8rem;
}
#pointOther .ImageWrap .ImageItem p {
font-size: 1.4545rem;
}
}

/* flow*/
/* ------------------------------------------------------ */
#flow {
padding: 5rem 0;
}
#flow h3 {
margin-bottom: 2.5rem;
color: #0090DA;
text-align: center;
font-size: 2rem;
}
#flow .flowContent {
display: flex;
justify-content: center;
gap: 2.68rem;
margin-bottom: 4rem;
}
#flow .flowItem {
flex: 1;
padding: 1.875rem 1.25rem;
background-color: #F2F2F2;
}
#flow .flowItem:nth-child(2) {
position: relative;
}
#flow .flowItem:nth-child(2)::before,
#flow .flowItem:nth-child(2)::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
background: transparent;
border-left: 1.25rem solid #0061A0;
border-top: 0.625rem solid transparent;
border-bottom: 0.625rem solid transparent;
}
#flow .flowItem:nth-child(2)::before {
left: -1.875rem;
}
#flow .flowItem:nth-child(2)::after {
right: -2.06rem;
}
#flow .flowItem h4 {
margin-bottom: 1.5rem;
text-align: center;
color: #0061A0;
font-size: 1.125rem;
}
#flow .flowItem p {
line-height: 1.75;
font-size: 1rem;
}
#flow h4 {
margin-bottom: 2.25rem;
text-align: center;
color: #0061A0;
font-size: 1.25rem;
}
#flow .flowLink {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2.5rem;
width: 36.5rem;
margin: 0 auto;
}
#flow .flowLinkItem {
flex: 1;
}
#flow .flowLinkItem a {
display: inline-block;
width: 17rem;
padding: 1.125rem 0;
border-radius: 0.375rem;
background-color: #0061A0;
text-align: center;
color: #FFFFFF;
font-size: 1.125rem;
}
#flow .flowLinkItem p {
margin-top: 1rem;
padding-left: 1.2em;
text-indent: -1.2em;
line-height: 1.5;
font-size: 0.875rem;
}

/* for SMP */
@media print, only screen and (max-width: 767px) {
#flow {
padding: 3.63rem 0;
}
#flow h3 {
margin-bottom: 1.81rem;
font-size: 2.18rem;
}
#flow .flowContent {
flex-direction: column;
gap: 3.72rem;
margin-bottom: 3.63rem;
}
#flow .flowItem {
padding: 1.81rem;
}
#flow .flowItem:nth-child(2)::before,
#flow .flowItem:nth-child(2)::after {
top: unset;
transform: unset;
background: transparent;
border-top: 1.81rem solid #0061A0;
border-right: 0.9rem solid transparent;
border-left: 0.9rem solid transparent;
}
#flow .flowItem:nth-child(2)::before {
top: -2.72rem;
left: 50%;
transform: translateX(-50%);
}
#flow .flowItem:nth-child(2)::after {
bottom: -3.36rem;
right: unset;
left: 50%;
transform: translateX(-50%);
}
#flow .flowItem h4 {
margin-bottom: 1.27rem;
font-size: 1.63rem;
}
#flow .flowItem p {
font-size: 1.4545rem;
}
#flow h4 {
margin-bottom: 2.72rem;
line-height: 1.5;
font-size: 1.63rem;
}
#flow .flowLink {
flex-direction: column;
gap: 1.81rem;
width: 24.72rem;
}
#flow .flowLinkItem {
text-align: center;
}
#flow .flowLinkItem a {
width: 22.9rem;
padding: 1.54rem 0;
border-radius: 0.54rem;
font-size: 1.4545rem;
}
#flow .flowLinkItem p {
margin-top: 1.4545rem;
text-align: left;
font-size: 1.27rem;
}
}



/* info*/
/* ------------------------------------------------------ */
#info h3 {
margin-bottom: 1.5rem;
line-height: 1.5;
font-size: 2rem;
}
#info p {
line-height: 1.75;
font-size: 1.125rem;
}
#info .infoDescription {
margin-bottom: 2.625rem;
}
#info .infoSection {
margin-bottom: 5rem;
}
#info .infoSection h4 {
margin-bottom: 1.5rem;
color: #DB0A5B;
text-shadow: 0.3px 0.3px 0 #DB0A5B,-0.3px -0.3px 0 #DB0A5B,0.3px -0.3px 0 #DB0A5B,-0.3px 0.3px 0 #DB0A5B;
font-size: 1.5rem;
}
#info .infoSection h4 + p {
margin-bottom: 2.625rem;
}
#info .infoSubSection {
margin-bottom: 3.75rem;
}
#info .infoSubSection h5 {
margin-bottom: 1.5rem;
color: #DB0A5B;
text-shadow: 0.3px 0.3px 0 #DB0A5B,-0.3px -0.3px 0 #DB0A5B,0.3px -0.3px 0 #DB0A5B,-0.3px 0.3px 0 #DB0A5B;
font-size: 1.125rem;
}
#info .infoSection02 .infoSubSection h5 {
font-size: 1.625rem;
}
#info .infoSubSection h5 + p {
margin-bottom: 1.5rem;
}
#info .infoSubSection .infoTable {
margin-bottom: 2rem;
}
#info .infoSubSection .infoTable img {
display: block;
margin: 0 auto;
}
#info .infoSubSection .infoTable p {
margin-bottom: 0.5rem;
}
#info .infoSubSection .infoFootNote {
margin-bottom: 1.5rem;
}
#info .infoSubSection .infoFootNote li {
display: flex;
align-items: baseline;
gap: 0.624rem;
font-size: 1rem;
}
#info .infoSubSection .infoFootNote li span {
flex-shrink: 0;
width: 2em;
white-space: nowrap;
}
#info .infoSubSection .infoFootNote li p {
font-size: 1rem;
}
#info .infoSubSection .infoAnnotation {
padding-left: 1.2em;
text-indent: -1.3em;
font-size: 1rem;
}
#info .infoSubSection .infoListCost li {
margin-bottom: 2rem;
margin-left: 1.5em;
list-style: disc;
}
#info .infoSubSection .infoListCost li p:first-child {
margin-bottom: 0.5em;
text-shadow: 0.3px 0.3px 0 #333333,-0.3px -0.3px 0 #333333,0.3px -0.3px 0 #333333,-0.3px 0.3px 0 #333333;
}
#info .infoSubSection .infoListCost li p:last-child {
margin-left: -1em;
}
#info .infoSubSection .infoListRisk li {
margin-bottom: 1.5rem;
margin-left: 1.2em;
list-style: disc;
}
#info .infoSubSection .infoListRisk li span {
display: block;
padding-left: 1em;
text-indent: -1.1em;
line-height: 1.75;
font-size: 1.125rem;
}
#info .infoCompany {
position: relative;
text-align: center;
}
#info .infoCompany::before {
content: "";
position: absolute;
top: -2.5rem;
left: 0;
width: 100%;
height: 1px;
background-color: #333333;
}

/* for SMP */
@media print, only screen and (max-width: 767px) {
#info h3 {
margin-bottom: 1.81rem;
font-size: 2.18rem;
}
#info p {
font-size: 1.4545rem;
}
#info .infoDescription {
margin-bottom: 2.72rem;
}
#info .infoSection {
margin-bottom: 3.63rem;
}
#info .infoSection h4 {
margin-bottom: 1.81rem;
font-size: 1.81rem;
}
#info .infoSection h4 + p {
margin-bottom: 2.72rem;
}
#info .infoSubSection {
margin-bottom: 3.63rem;
}
#info .infoSubSection h5 {
margin-bottom: 1.81rem;
line-height: 1.5;
font-size: 1.4545rem;
}
#info .infoSection02 .infoSubSection h5 {
font-size: 2rem;
}
#info .infoSubSection h5 + p {
margin-bottom: 1.81rem;
}
#info .infoSubSection .infoFootNote {
margin-bottom: 1.81rem;
}
#info .infoSubSection .infoFootNote li {
gap: 0.45rem;
font-size: 1.27rem;
}
#info .infoSubSection .infoFootNote li p {
font-size: 1.27rem;
}
#info .infoSubSection .infoAnnotation {
font-size: 1.27rem;
}
#info .infoSubSection .infoListCost li {
margin-bottom: 2.72rem;
margin-left: 1.2em;
}
#info .infoSubSection .infoListCost li p:last-child {
margin-left: -1.2em;
}
#info .infoSubSection .infoListRisk li {
margin-bottom: 1.4545rem;
}
#info .infoSubSection .infoListRisk li span {
font-size: 1.27rem;
}
#info .infoCompany::before {
top: -1.81rem;
}
}


/* pageInfo*/
/* ------------------------------------------------------ */
#pageInfo {
padding: 5rem 0;
}
#pageInfo .contactInfo {
margin-bottom: 5rem;
}
#pageInfo .contactInfo h3 {
margin-bottom: 2rem;
color: #0090DA;
font-size: 1.62rem;
}
#pageInfo .contactInfoContent .contactInfoText {
font-size: 1.125rem;
}
#pageInfo .contactInfoContent .contactInfoPhone {
color: #0061A0;
line-height: 2;
font-size: 1.5rem;
}
#pageInfo .contactInfoContent .contactInfoTime {
font-size: 1rem;
}
#pageInfo .disclaimer {
padding: 1.75rem 1.125rem;
border: 1px solid #333333;
border-radius: 0.375rem;
}
#pageInfo .disclaimer p {
line-height: 2.28;
font-size: 0.875rem;
}
#pageInfo .disclaimer .disclaimerNumber {
text-align: right;
line-height: 1.6;
font-size: 1.125rem;
}

/* for SMP */
@media print, only screen and (max-width: 767px) {
#pageInfo {
padding: 3.63rem 0;
}
#pageInfo .contactInfo {
margin-bottom: 3.63rem;
}
#pageInfo .contactInfo h3 {
margin-bottom: 2.9rem;
line-height: 1.38;
font-size: 2.36rem;
}
#pageInfo .contactInfoContent .contactInfoText {
line-height: 1.875;
font-size: 1.4545rem;
}
#pageInfo .contactInfoContent .contactInfoPhone {
font-size: 1.81rem;
}
#pageInfo .contactInfoContent .contactInfoTime {
font-size: 1.36rem;
}
#pageInfo .disclaimer {
padding: 2.54rem 1.63rem;
border-radius: 0.54rem;
}
#pageInfo .disclaimer p {
font-size: 1.27rem;
}
#pageInfo .disclaimer .disclaimerNumber {
font-size: 1.63rem;
}
}




/* Modal */
/* ------------------------------------------------------ */
#modal,
#modal2 {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#modal .modalContent,
#modal2 .modalContent {
position: relative;
top: 50%;
left: 50%;
width: 80%;
max-width: 1052px;
max-height: 95vh;
padding: 3.75rem 6.75rem 1.25rem 6.75rem;
box-sizing: border-box;
background-color: #FFFFFF;
transform: translate(-50%, -50%);
overflow-y: auto;
}
#modal .close,
#modal2 .close2 {
position: absolute;
right: 1.5rem;
top: 1.5rem;
float: right;
color: #333333;
font-size: 2.5rem;
cursor: pointer;
}
#modal p,
#modal2 p {
line-height: 1.75;
font-size: 1.125rem;
}
#modal .infoSection h4,
#modal .infoSubSection h5 {
margin-bottom: 1.5rem;
color: #DB0A5B;
text-shadow: 0.3px 0.3px 0 #DB0A5B,-0.3px -0.3px 0 #DB0A5B,0.3px -0.3px 0 #DB0A5B,-0.3px 0.3px 0 #DB0A5B;
font-size: 1.5rem;
}
#modal .infoSection h4 + p {
margin-bottom: 2.5rem;
}
#modal .infoSubSection {
margin-bottom: 2.5rem;
}
#modal .infoSubSection .infoListRisk li {
margin-bottom: 1.5rem;
margin-left: 1.2em;
line-height: 1.75;
font-size: 1.125rem;
list-style: disc;
}
#modal .infoSubSection .infoListRisk li span {
display: block;
padding-left: 1em;
text-indent: -1.1em;
line-height: 1.75;
font-size: 1rem;
}
#modal2 #flow {
padding: 0;
}

/* for Tab */
@media print, screen and (min-width: 768px) and (max-width: 1080px) {
#modal .modalContent,
#modal2 .modalContent {
max-height: 90vh;
}
#modal2 .modalContent {
width: 90%;
padding: 3.75rem 1.5rem 1.25rem 1.5rem
}
#modal2 #flow .flowItem {
padding: 1.875rem 0.5rem;
}
}   
    
/* for SMP */
@media print, only screen and (max-width: 767px) {
#modal,
#modal2 {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#modal .modalContent,
#modal2 .modalContent {
width: 30rem;
padding: 5.45rem 1.4545rem 0 1.4545rem;
max-height: 80vh;
overflow-y: auto;
} 
#modal .close,
#modal2 .close2 {
font-size: 2.18rem;
right: 1.81rem;
top: 1.81rem;
}
#modal p,
#modal2 p {
font-size: 1.4545rem;
}
#modal .infoSection h4,
#modal .infoSubSection h5 {
margin-bottom: 1.81rem;
line-height: 1.5;
font-size: 1.81rem;
}
#modal .infoSection h4 + p {
margin-bottom: 2.72rem;
}
#modal .infoSubSection {
margin-bottom: 3.63rem;
}
#modal .infoSubSection .infoListRisk li {
margin-bottom: 1.4545rem;
font-size: 1.4545rem;
}
#modal .infoSubSection .infoListRisk li span {
font-size: 1.27rem;
}
}


/* ------------------------------------------------------ */
/* stylesheet E N D */
/* ------------------------------------------------------ */