/* ====================================================== */
/* Last Update : 2026.04.02 */
/* For : https://www.metlife.co.jp/campaign/nf/general1/index.html */
/* ====================================================== */

@charset "Shift_JIS";

/* ------------------------------------------------------ */
/* Variables */
/* ------------------------------------------------------ */
:root {
--color-blue: #0090da;
--color-green: #a4ce4e;
--color-dark-blue: #0061a0;
--color-pink: #d057a0;
--color-gray: #e6e6e6;
--color-dark-gray: #333333;
--color-light-gray: #f5f5f5;
--color-white: #ffffff;
--color-blue-30: rgba(0, 144, 218, 0.3);
--color-green-30: rgba(164, 206, 78, 0.3);
--color-dark-blue-30: rgba(0, 97, 160, 0.3);
--container-pc-width: 980px;
--container-x-gap: 1rem;
--container-y-gap: 5rem;
--container: calc(var(--container-pc-width) + var(--container-x-gap) * 2);
}

@media print, only screen and (max-width: 767px) {
:root {
--container-x-gap: 1.4545454545rem;
}
}

/* ------------------------------------------------------ */
/* Base */
/* ------------------------------------------------------ */
body {
color: var(--color-dark-gray);
-webkit-text-size-adjust: 100%;
}
img {
max-width: 100%;
}
button {
color: inherit;
}
a:link,
a:visited,
a:hover,
a:focus,
a:active {
text-decoration: none;
}
a:hover {
opacity: 0.7;
}
b {
font-weight: 600;
}
img {
height: auto;
}
.only-pc {
display: block !important;
}
.only-smp {
display: none !important;
}

/* ------------------------------------------------------ */
/* Template */
/* ------------------------------------------------------ */
#contents * {
box-sizing: border-box;
}

#contentsFrame .wrapFrame,
#contentsFrame .wrapFrame #mainFrame,
#contentsFrame #footerFrame .wrapFrame {
width: 100%;
}

@media print, only screen and (max-width: 767px) {
.only-pc {
display: none !important;
}
.only-smp {
display: block !important;
}
#contents {
width: 100%;
padding: 0 var(--container-x-gap);
box-sizing: border-box;
margin: 0;
}
}

/* ------------------------------------------------------ */
/* Contents */
/* ------------------------------------------------------ */
.conInner {
position: relative;
max-width: var(--container);
padding-inline: var(--container-x-gap);
margin-inline: auto;
}

@media print, only screen and (max-width: 767px) {
.conInner {
padding: 0;
}
}

/* ------------------------------------------------------ */
/* KV */
/* ------------------------------------------------------ */
.kvArea {
position: relative;
height: 36.6875rem;
overflow: hidden;
}
.kvImg {
width: 100%;
height: 100%;
object-fit: cover;
}
.kvInner {
position: absolute;
bottom: 5.375rem;
left: 0;
right: 0;
z-index: 1;
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--container-x-gap);
box-sizing: border-box;
color: var(--color-white);
}
.kvTitle {
margin-bottom: 2rem;
line-height: 1.4;
letter-spacing: -0.05em;
font-size: 3rem;
font-weight: 600;
}
.kvText {
margin: 0;
line-height: 1.75;
font-size: 1.25rem;
font-weight: 300;
}

@media print, only screen and (max-width: 767px) {
.kvArea {
height: 135vw;
margin-inline: calc(var(--container-x-gap) * -1);
}
.kvInner {
bottom: 1.8182rem;
padding: 0 1.3636rem;
}
.kvTitle {
font-size: 2.5455rem;
margin-bottom: 1.4545rem;
}
.kvText {
font-size: 1.6364rem;
}
}

/* ------------------------------------------------------ */
/* Title */
/* ------------------------------------------------------ */
.titleMd {
color: var(--color-blue);
line-height: 1.6;
font-size: 1.5rem;
font-weight: 600;
}
.titleLg {
color: var(--color-blue);
line-height: 1.6;
font-size: 2rem;
font-weight: 600;
}

@media print, only screen and (max-width: 767px) {
.titleMd {
font-size: 1.8182rem;
}
.titleLg {
font-size: 2rem;
}
}

/* ------------------------------------------------------ */
/* Text */
/* ------------------------------------------------------ */
.textSm {
line-height: 1.5;
font-size: 0.875rem;
font-weight: 300;
}
.textBase {
line-height: 1.75;
font-size: 1rem;
font-weight: 300;
}
.textMd {
line-height: 1.75;
font-size: 1.25rem;
font-weight: 300;
}
.textPink {
color: var(--color-pink);
}
.textBlack {
color: var(--color-dark-gray);
}
.textBold {
font-weight: 600;
}
.textCenter {
text-align: center;
}
.noteAst {
flex-shrink: 0;
}
.textNote {
padding-left: 1.4em;
line-height: 1.75;
text-indent: -1.4em;
}
.textNoteIndentMd {
padding-left: 2em;
text-indent: -2em;
}
.textNoteIn {
display: inline-block;
}

@media print, only screen and (max-width: 767px) {
.textSm {
font-size: 1.2727rem;
}
.textBase {
font-size: 1.4545rem;
}
.textMd {
font-size: 1.6364rem;
}
.textNote {
font-size: 1.2727rem;
}
}

/* ------------------------------------------------------ */
/* Layout */
/* ------------------------------------------------------ */
.iconText {
display: grid;
grid-template-columns: 7.5rem 1fr;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.spaceYxs > * + * {
margin-top: 0.75rem;
}
.spaceYsm > * + * {
margin-top: 1rem;
}
.spaceYmd > * + * {
margin-top: 1.5rem;
}
.spaceYlg > * + * {
margin-top: 3rem;
}
.spaceY > * + * {
margin-top: 5rem;
}
.secGroup {
padding-block: var(--container-y-gap);
}
.secGroup > * + * {
margin-top: var(--container-y-gap);
}

@media print, only screen and (max-width: 767px) {
.iconText {
grid-template-columns: 7.2727rem 1fr;
gap: 1.4545454545rem;
}
.spaceYmd > * + * {
margin-top: 1.4545rem;
}
.spaceYlg > * + * {
margin-top: 2.1818rem;
}
.secGroup {
padding-block: 4.3636rem;
}
.secGroup > * + * {
margin-top: 3.6364rem;
}
}

/* ------------------------------------------------------ */
/* Point */
/* ------------------------------------------------------ */
.point02 {
max-width: 40rem;
margin-inline: auto;
}
.pointHeading {
margin: 0 0 1.5rem;
color: var(--color-blue);
text-align: center;
line-height: 1.5;
font-size: 2rem;
font-weight: 600;
}
.pointBox {
width: fit-content;
margin-inline: auto;
padding: 1.5rem;
border-radius: 0.625rem;
background-color: var(--color-green-30);
text-align: center;
}
.point02 .pointBox {
width: 100%;
background: var(--color-blue-30);
}
.pointBoxTitle {
margin: 0 0 0.75rem;
line-height: 1.5;
font-size: 1.5rem;
font-weight: 600;
}
.pointBoxText {
margin: 0;
line-height: 1.6;
font-size: 1.25rem;
font-weight: 300;
}

@media print, only screen and (max-width: 767px) {
.pointHeading {
font-size: 2rem;
}
.pointBoxTitle {
font-size: 1.8182rem;
}
.pointBoxText {
font-size: 1.6364rem;
text-align: left;
}
}

/* ------------------------------------------------------ */
/* CTA */
/* ------------------------------------------------------ */
.ctaArea {
position: relative;
padding: 3.75rem 0;
box-sizing: border-box;
background-color: var(--color-blue);
}
.ctaLabel {
margin: 0;
color: var(--color-white);
text-align: center;
line-height: 1.75;
font-size: 1.25rem;
font-weight: 300;
}
.ctaHeading {
margin-bottom: 1.5rem;
color: var(--color-white);
text-align: center;
line-height: 1.6;
font-size: 2rem;
font-weight: 600;
}
.ctaHeading br {
display: none;
}
.ctaBox {
display: grid;
grid-template-columns: 9.375rem 1fr 18.5rem;
align-items: center;
gap: 1.25rem;
width: 100%;
padding: 1.5rem;
border-radius: 0.625rem;
background-color: var(--color-white);
}
.ctaBookWrap {
text-align: center;
}
.ctaBook img {
width: 100%;
height: auto;
}
.ctaBookNote {
margin: 0.5rem 0 0;
color: var(--color-dark-gray);
text-align: center;
line-height: 1.5;
white-space: nowrap;
font-size: 0.875rem;
}
.ctaBoxText {
margin: 0;
color: var(--color-dark-gray);
line-height: 1.75;
font-size: 1.125rem;
font-weight: 300;
}
a.ctaBtn {
display: inline-block;
padding: 0.75rem 2.5rem;
border-radius: 2.5rem;
box-sizing: border-box;
background-color: var(--color-pink);
color: var(--color-white);
text-align: center;
line-height: 1.75;
font-size: 1.125rem;
font-weight: 600;
}
a.ctaBtnOl {
border: 1px solid;
background-color: transparent;
color: var(--color-pink);
}
.ctaLinkWrap {
margin-top: 1.5rem;
text-align: center;
}
a.ctaLink {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--color-white);
text-decoration: underline;
line-height: 1.75;
font-size: 1.25rem;
font-weight: 600;
}
.ctaLink:link,
.ctaLink:visited {
color: var(--color-white);
}
.ctaArrow {
display: inline-block;
width: 0.8em;
height: 0.8em;
border-right: 0.125rem solid var(--color-white);
border-bottom: 0.125rem solid var(--color-white);
transform: rotate(-45deg);
}

@media print, only screen and (max-width: 767px) {
.ctaArea {
padding: 2.5455rem 1.4545rem;
margin-inline: calc(var(--container-x-gap) * -1);
}
.ctaLabel {
font-size: 1.6364rem;
}
.ctaHeading {
font-size: 2rem;
}
.ctaHeading br {
display: block;
}
.ctaBox {
grid-template-columns: 1fr;
justify-items: center;
gap: 0.9091rem;
}
.ctaBookWrap {
width: 12.1818rem;
}
.ctaBoxText {
font-size: 1.4545rem;
}
.ctaBookNote {
font-size: 1.2727rem;
}
a.ctaBtn {
width: 100%;
padding: 1.0909rem;
font-size: 1.4545rem;
}
a.ctaLink {
font-size: 1.6364rem;
}
}

/* ------------------------------------------------------ */
/* Section01 */
/* ------------------------------------------------------ */
.sec01 {
padding: 3.75rem 1rem var(--container-y-gap);
}
.sec01 .conInner {
display: grid;
grid-template-columns: 28rem 28.75rem;
justify-content: space-between;
gap: 1.5rem;
}
.sec01Group {
display: contents;
}
.sec01Title {
color: var(--color-blue);
line-height: 1.6;
font-size: 2rem;
font-weight: 600;
}
.sec01Text {
color: var(--color-dark-gray);
line-height: 1.75;
font-size: 1.25rem;
font-weight: 300;
}
.sec01Figure {
display: grid;
place-content: center;
grid-row: span 2;
}
.sec01Text .txtPink {
font-size: 1.125rem;
}
.sec01Circles {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5625rem;
grid-row: span 2;
}
.sec01Circle {
display: flex;
width: 12.5rem;
aspect-ratio: 1 / 1;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.sec01Circle span {
line-height: 1.5;
text-align: center;
font-size: 1.75rem;
font-weight: 500;
}
.sec01CircleBlue {
background-color: var(--color-blue);
color: var(--color-white);
}
.sec01CircleGreen {
background-color: var(--color-green);
color: var(--color-dark-gray);
}
.sec01Plus {
color: var(--color-dark-blue);
line-height: 3.125rem;
font-size: 2.25rem;
font-weight: 900;
}

@media print, only screen and (max-width: 990px) {
.sec01 .conInner {
grid-template-columns: 1fr;
gap: 1rem;
}
}

@media print, only screen and (max-width: 767px) {
.sec01 {
padding: 3.6364rem 0;
}
.sec01Group {
display: flex;
flex-direction: column-reverse;
}
.sec01Figure img {
width: 100%;
}
.sec01Title {
font-size: 2rem;
}
.sec01Circle {
width: 100%;
}
.sec01Circle span {
font-size: 2.5455rem;
}
.sec01Plus {
flex-shrink: 0;
font-size: 2.5455rem;
}
.sec01Text {
margin-bottom: 3.6364rem;
font-size: 1.6364rem;
}
.sec01Text .txtPink {
font-size: 1.8182rem;
}
}

/* ------------------------------------------------------ */
/* Section02 */
/* ------------------------------------------------------ */
.sec02Etc {
width: 12.5rem;
margin-left: auto;
margin-top: -1lh;
padding-right: 0;
color: var(--color-dark-gray);
font-size: 1.125rem;
}

@media print, only screen and (max-width: 767px) {
.sec02Title {
font-size: 1.8182rem;
}
.sec02Etc {
width: 100%;
margin-top: 0;
text-align: right;
font-size: 1.6364rem;
}
}

/* ------------------------------------------------------ */
/* Section03 */
/* ------------------------------------------------------ */
.sec03Table {
margin-top: 1.5rem;
}
.sec03Note {
margin-top: 1rem;
}
.sec03Note > * + * {
margin-top: 0.25rem;
}
.sec03TablePc {
display: block;
margin-bottom: 1rem;
}
.sec03TablePc table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.sec03TablePc th,
.sec03TablePc td {
border: 1px solid var(--color-dark-gray);
padding: 0.75rem 0.5rem;
text-align: center;
vertical-align: middle;
line-height: 1.5;
}
.sec03TablePc th {
width: 15.3125rem;
padding: 0.5rem;
font-weight: 500;
}
.sec03TablePc thead th {
border-top: none;
font-weight: 500;
font-size: 1.25rem;
}
.sec03TablePc thead th:nth-child(2) {
background: var(--color-blue-30);
}
.sec03TablePc thead th:nth-child(3) {
background: var(--color-green-30);
}
.sec03TablePc thead th:nth-child(4) {
background: var(--color-dark-blue-30);
}
.sec03TablePc th:first-child,
.sec03TablePc td:first-child {
border-left: none;
}
.sec03Table {
margin-bottom: 1rem;
}
.sec03Table table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.sec03Table th,
.sec03Table td {
border: 1px solid var(--color-dark-gray);
padding: 0.5rem 0.25rem;
text-align: center;
vertical-align: middle;
line-height: 1.5;
font-size: 1rem;
}
.sec03Table thead th {
background-color: var(--color-white);
font-weight: 400;
}

@media print, only screen and (max-width: 767px) {
.sec03Table th,
.sec03Table td {
font-size: 1.2727rem;
padding: 0.5455rem 0.1818rem;
}
}

/* ------------------------------------------------------ */
/* Section06 */
/* ------------------------------------------------------ */
.sec06 {
margin-top: 5rem;
}
.sec06Tabs {
display: flex;
gap: 1.5rem;
border-bottom: 0.125rem solid;
margin-bottom: 0;
}
.sec06Tab {
flex: 1;
border: none;
border-radius: 0.5rem 0.5rem 0 0;
padding: 1rem 0.75rem;
background: var(--color-dark-blue-30);
text-align: center;
cursor: pointer;
}
.sec06Tab.sec06TabActive {
background: var(--color-dark-blue);
pointer-events: none;
}
.sec06TabMain {
display: block;
line-height: 1.4;
font-size: 1.5rem;
font-weight: 600;
}
.sec06Tab.sec06TabActive .sec06TabMain {
color: var(--color-white);
}
.sec06TabSub {
display: block;
margin-top: 0.125rem;
line-height: 1.4;
font-size: 0.875rem;
font-weight: 300;
}
.sec06Tab.sec06TabActive .sec06TabSub {
color: var(--color-white);
}
.sec06Content {
display: none;
}
.sec06Content.sec06ContentActive {
display: block;
}
.sec06Placeholder {
padding: 2.5rem 0;
color: #999999;
text-align: center;
font-size: 1rem;
}

/* ------------------------------------------------------ */
/* Section06: Tab */
/* ------------------------------------------------------ */
@media print, only screen and (max-width: 767px) {
.sec06 {
margin-top: 3.6364rem;
}
.sec06Tabs {
gap: 0.7273rem;
}
.sec06Tab {
padding: 0.5455rem;
}
.sec06TabMain {
font-size: 1.6364rem;
}
.sec06TabSub {
font-size: 1.4545rem;
}
}

/* ------------------------------------------------------ */
/* Section06: Category */
/* ------------------------------------------------------ */
.sec06Category {
display: grid;
gap: 3.75rem;
grid-template-columns: 1fr 1fr;
margin-top: var(--container-y-gap);
}
.sec06Category:last-child {
margin-bottom: 0;
}
.sec06CategoryTitle {
margin-bottom: 0.5rem;
}
.sec06Category .textNote {
margin-top: 0.75rem;
text-align: left;
}
.sec06CatLabel {
margin-bottom: 0.5rem;
color: var(--color-blue);
line-height: 1.5;
font-size: 1.5rem;
font-weight: 600;
}
.sec06CatText {
margin: 0 0 1rem;
color: var(--color-dark-gray);
line-height: 1.6;
font-size: 1.25rem;
font-weight: 300;
}
.sec06CategoryOne {
grid-column: span 2;
text-align: center;
}
.sec06Category .ctaBtn {
margin-top: 1.25rem;
font-size: 1rem;
}

@media print, only screen and (max-width: 767px) {
.sec06Category {
grid-template-columns: 1fr;
gap: 3.6364rem;
margin-top: 5.4545rem;
}
.sec06CategoryOne {
grid-column: span 1;
}
.sec06CategoryTitle {
font-size: 1.8182rem;
text-align: left;
}
.sec06CategoryText {
text-align: left;
}
.sec06Category .ctaBtn {
margin-top: 1.4545rem;
font-size: 1.2727rem;
}
.sec06Category .textNote {
margin-top: 1.4545rem;
}
}

/* ------------------------------------------------------ */
/* Section06: Product */
/* ------------------------------------------------------ */
.sec06Product {
position: relative;
border-radius: 0.5rem;
background: var(--color-white);
text-align: center;
}
.sec06Fukidashi {
display: block;
position: relative;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
border-radius: 62.4375rem;
background: var(--color-blue-30);
line-height: 1.75;
font-size: 1.25rem;
font-weight: 600;
}
.sec06Fukidashi::after {
position: absolute;
bottom: -0.75rem;
inset-inline: 0;
width: 0.875rem;
height: 0.875rem;
margin-inline: auto;
background-image: url(/campaign/nf/general1/images/triangle.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
content: "";
}
.sec06ProdName {
color: var(--color-dark-gray);
line-height: 1.4;
font-size: 1.25rem;
font-weight: 600;
}
.sec06ProdBtn:hover {
opacity: 0.7;
}
.sec06Product .textNote {
font-size: 1rem;
}
.sec06Dot {
flex-shrink: 0;
}
a.sec06NoteLink {
color: inherit;
text-decoration: underline;
}
.sec06 .ctaBtnOl {
width: 15.25rem;
}

@media print, only screen and (max-width: 767px) {
.sec06Fukidashi::after {
width: 1.4545rem;
height: 1.4545rem;
bottom: -1.0909rem;
}
.sec06Fukidashi {
font-size: 1.6364rem;
}
.sec06Product {
padding: 0;
}
.sec06ProdName {
font-size: 1.6364rem;
}
.sec06Product .textNote {
font-size: 1.4545rem;
}
.sec06 .ctaBtnOl {
font-size: 1.4545rem;
width: 22.1818rem;
}
}

/* ------------------------------------------------------ */
/* Section07 */
/* ------------------------------------------------------ */
.sec07 {
text-align: center;
}
.sec07Icon {
width: 7.5rem;
}
.sec07List b {
max-width: 37.5rem;
margin-left: auto;
margin-right: auto;
color: var(--color-pink);
font-size: 1.125rem;
font-weight: 600;
}

@media print, only screen and (max-width: 767px) {
.sec07Icon {
width: 10.3637rem;
}
}

/* ------------------------------------------------------ */
/* Section09 */
/* ------------------------------------------------------ */
.sec09 {
text-align: center;
}
.sec09Icon {
width: 9.375rem;
height: 9.375rem;
}
.sec09Label {
color: var(--color-blue);
line-height: 1.75;
font-size: 1rem;
}

@media print, only screen and (max-width: 767px) {
.sec09Label {
font-size: 1.6364rem;
}
}

/* ------------------------------------------------------ */
/* section10 */
/* ------------------------------------------------------ */
.tablePlane {
overflow-x: auto;
font-size: 1rem;
}
.tablePlane table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.tablePlane th,
.tablePlane td {
border: 1px solid #cccccc;
padding: 1rem;
color: var(--color-dark-gray);
text-align: left;
line-height: 1.5;
vertical-align: top;
font-weight: 300;
}
.tablePlane th {
width: 10rem;
}
.sec10Notes {
margin: 0.75rem 0;
}

@media print, only screen and (max-width: 767px) {
.tablePlane th {
width: auto;
white-space: nowrap;
}

.tablePlane th,
.tablePlane td {
padding: 0.7273rem;
}
}

/* ------------------------------------------------------ */
/* Section Last */
/* ------------------------------------------------------ */
.secLast {
padding-block: 5rem;
}
.secLastCode {
text-align: right;
}

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