@charset "Shift_JIS";
/* ====================================================== */
/* Last Update : 2026.09.03 */
/* For : https://www.metlife.co.jp/sponsorship/campaign.html */
/* ====================================================== */
body {
color: #333333;
-webkit-text-size-adjust: 100%;
font-family: "Noto Sans JP", sans-serif;
}
img {
width: auto;
height: auto;
max-width: 100%;
}
a:link,
a:visited,
a:hover,
a:focus,
a:active {
opacity: 1;
color: #013652;
}
a:hover {
opacity: 0.7;
}
.pageup a,
.pageup a:link {
color: #013652;
text-decoration: underline;
}
.pageupBtn {
visibility: hidden;
position: fixed;
right: 0;
bottom: 121px;
background-color: #013652;
opacity: 0;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

.pageupBtn.is-visible {
visibility: visible;
z-index: 100;
opacity: 1;
transition: opacity 0.5s ease 0.2s, visibility 0.5s ease 0.2s;
}

@media print, only screen and (max-width: 767px) {
body {
font-family: "Noto Sans JP", sans-serif;
}
.pageupBtn {
bottom: 77px;
}
}
.pageupBtn a {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.only-pc {
display: block;
}
.only-smp {
display: none;
}
.noticeBox {
margin: 2.2989% 0 3.0612%;
background-color: #a7a8aa;
text-align: center;
}
.noticeBox p {
color: #000000;
line-height: 2;
font-size: 1.5rem;
font-weight: bold;
}
@media print, only screen and (max-width: 767px) {
.only-pc {
display: none;
}
.only-smp {
display: block;
}
.noticeBox {
margin: 4.0816% 0;
}
.noticeBox p {
line-height: 2.2;
}
}
/* template*/
/* ------------------------------------------------------*/
#contentsFrame .wrapFrame,
#contentsFrame .wrapFrame #mainFrame,
#contentsFrame #footerFrame .wrapFrame {
max-width: 980px;
width: 100%;
background-color: #fff;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
#contentsFrame .wrapFrame,
#contentsFrame .wrapFrame #mainFrame,
#contentsFrame #footerFrame .wrapFrame {
background-color: #fff;
}
}

/* contant box*/
/* ------------------------------------------------------*/
.btnApply, .btnApply2, .btnApply5{
margin: 2.35% auto;
text-align: center;
line-height: 1.33;
font-size: 1.5rem;
}
.btnApply a, .btnApply2 a {
display: block;
position: relative;
width: 48%;
margin: 1% auto 120px;
padding: 17px 0 17px;
border-radius: 3px;
box-sizing: border-box;
background-color: #3185a9;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
.btnApply5 a {
display: block;
position: relative;
width: 65%;
margin: 1% auto;
padding: 17px 0 17px;
border-radius: 3px;
box-sizing: border-box;
background-color: #3185a9;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
.btnApply a span, .btnApply2 a span, .btnApply5 a span {
color: #f9b243;
font-weight: bold;
}
.btnApply a::after {
position: absolute;
content: "";
top: 52%;
right: 2.6rem;
width: 1.125rem;
height: 1.575rem;
background-color: #f9b243; 
transform: translateY(-50%);
clip-path: polygon(0 100%, 0 0, 100% 50%);  
}
.btnApply2 a::after, .btnApply5 a::after {
position: absolute;
content: "";
top: 48%;
right: 2.6rem;
width: 1.125rem;
height: 1.575rem;
background-color: #f9b243; 
transform: translateY(-50%);
clip-path: polygon(0 100%, 0 0, 100% 50%); 
}
.btnApply.up a::after,
.btnApply2.up a::after,
.btnApply5.up a::after {
clip-path: polygon(0 100%, 0 0, 100% 50%);
}
.btnApply3_box {
display: flex;
justify-content: space-between;
width: 48%;
margin: 0 auto 1%;
}
.btnApply3_box .btnApply3 {
width: 100%;
box-sizing: border-box;
border-radius: 50px;
background-color: #FFFFFF;
outline: 2px solid #013652;
outline-offset: -2px;
line-height: 1.33;
font-size: 1.5rem;
}
.btnApply3_box .btnApply3 a {
display: block;
position: relative;
padding: 17px 40px;
color: #013652;
text-align: center;
font-weight: bold;
}
.btnApply3_box .btnApply3 a::before{
position: absolute;
content: "";
top: 50%;
right: 2rem;
width:  2.25rem;
height: 2.25rem;
border-radius: 50%;
background-color: #013652;
transform: translateY(-50%);
}
.btnApply3_box .btnApply3 a::after {
position: absolute;
content: "";
top: 52%;
right: 2.6rem;
width: 1.105rem;
height: 0.855rem;
background-color: #FFFFFF; 
transform: translateY(-50%);
clip-path: polygon(0 0, 100% 0, 50% 100%);  
}
.btnApply3_box .btnApply3.up a::after{
clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

@media print, only screen and (max-width: 980px) {
.conInner {
padding: 0 1rem;
}
.btnApply a, .btnApply2 a, .btnApply5 a {
width: 70%;
text-align: center;
}
.btnApply3_box {
width: 70%;
}
}
/* for SMP */
@media print, only screen and (max-width: 767px) {
.btnApply, .btnApply2, .btnApply5{
margin: 5.35% auto;
}
.btnApply2 a {
width: 90%;
margin: 1% auto 80px;
padding: 4.5454% 11.6363% 4.5454% 7.6363%;
font-size: 100%;
letter-spacing: 0.1rem;
}
.btnApply a, .btnApply5 a {
width: 90%;
margin: min(40px, 2.3333vw) auto min(28px, 3.7333vw);
padding: 4.5454% 11.6363% 4.5454% 7.6363%;
font-size: 100%;
letter-spacing: 0.1rem;
}
.btnApply a::before,
.btnApply2 a::before,
.btnApply5 a::before {
right: 6.3%;
width: 7.0667vw;
height: 7.0667vw;
}
.btnApply a::after,
.btnApply2 a::after,
.btnApply5 a::after {
right: 8.1%;
}
.btnApply3_box {
width: 90%;
border-radius: 50vw;
}
.btnApply3_box .btnApply3 a {
padding: 4.5454% 11.6363% 4.5454% 7.6363%;
font-size: min(2rem, 4.8vw);
}
.btnApply3_box .btnApply3 a::before {
right: 6.3%;
width: 7.0667vw;
height: 7.0667vw;
}
.btnApply3_box .btnApply3 a::after{
right: 8.35%;
width: 1.125rem;
height: 0.905rem;
}
#contents {
width: 100%;
margin: 0;
box-sizing: border-box;
}
.conInner {
padding: 0;
}
}
/* Text*/
/* ------------------------------------------------------*/
.conInner h2.conTtl {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2% 3%;
background-color: #f4f2ee;
line-height: 1;
font-size: 1.75rem;
font-weight: 600;
}
h3.conTtl {
line-height: 1;
font-size: 2rem;
font-weight: bold;
}
.conTxt {
line-height: 1.77;
font-size: 1rem;
}
.conInner .conTxt {
line-height: 1.77;
font-size: 1rem;
}
.conInner ul.txtKome li {
position: relative;
padding-left: 1.5em;
font-size: 1rem;
}
.conInner ul.txtKome li::before {
display: block;
content: "※";
position: absolute;
left: 0;
}

/* for SMP */
@media print, only screen and (max-width: 767px) {
.conInner h2.conTtl {
padding-top: 3%;
padding-bottom: 3%;
padding-right: 6%;
line-height: 1.28;
font-size: 1.63rem;
}

h3.conTtl {
font-size: 2.8rem;
}
.conInner .conTxt {
line-height: 1.87;
font-size: 1.6rem;
}
.conInner ul.txtKome li {
padding-left: 5.1724%;
font-size: 1.4rem;
}
}
/* ------------------------------------------------------ */
/* main visual */
/* ------------------------------------------------------ */
#mv .title {
display: flex;
align-items: center;
position: relative;
}
#mv .title .mvTitleTxt {
position: absolute;
width: 100%;
margin: 1.2% auto 0;
text-align: center;
}
#mv .title .mvTitleTxt h2 {
width: 100%;
}
#mv .title .mvTitleTxt h1 {
color: #90f6ac;
line-height: 1.3;
font-size: 2.6rem;
font-weight: bold;
}
#mv .title .mvTitleTxt h1 span {
line-height: 2.6;
font-size: 1.2rem;
}
#mv .title .mvTitleTxt img {
width: 30%;
margin: 1% auto 2.3%;
}
#mv .title .mvNote {
position: absolute;
right: 25px;
bottom: 0;
color: #90f6ac;
text-align: left;
font-size: 0.8rem;
font-weight: normal;
}

@media print, only screen and (max-width: 980px) {
#mv {
padding-right: 1rem;
padding-left: 1rem;
}
}
/* for SMP */
@media print, only screen and (max-width: 767px) {
#mv {
margin-bottom: 0;
padding: 0;
}
#mv .title {
text-align: center;
}
#mv .title h2 {
width: 100%;
}
#mv .title .mvTitleTxt {
margin: 1.7% auto 0;
}
#mv .title .mvTitleTxt h1 {
line-height: 1.5;
font-size: 100%;
}
#mv .title .mvTitleTxt h1 span {
line-height: 2;
font-size: 75%;
font-weight: bold;
}
#mv .title .mvTitleTxt img {
width: 45%;
margin: 1.2% auto 2.8%;
}
}
/* ------------------------------------------------------ */
/* about intro */
/* ------------------------------------------------------ */
.aboutIntro {
position: relative;
margin-bottom: 30px;
padding: 30px 0 0;
background-color: #f4f2ee;
text-align: center;
}

.aboutIntroTitle {
margin-bottom: 24px;
color: #0061a0;
font-size: 1.9rem;
font-weight: bold;
}

.aboutIntroContent {
display: flex;
justify-content: center;
gap: 54px;
}

.aboutIntroItem {
display: flex;
align-items: flex-start;
}

.aboutIntroItem.aboutIntroItem_01 .aboutIntroIcon {
order: 2;
}

.aboutIntroItem.aboutIntroItem_01 .aboutIntroText {
order: 1;
}

.aboutIntroIcon {
width: 169px;
height: 210px;
}

.aboutIntroText {
padding: 35px 19px;
border-radius: 80%;
background-color: white;
color: #013652;
line-height: 1.25;
font-size: 1.25rem;
font-weight: 600;
}

.aboutIntroSupport_triangle {
width: 100%;
height: 75px;
margin-top: -68px;
position: relative;
}

.aboutIntroSupport_triangle::before {
position: absolute;
content: "";
bottom: -1px;
right: 0;
width: 50%;
height: 100%;
background-color: #013652;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.aboutIntroSupport_triangle::after {
position: absolute;
content: "";
bottom: -1px;
left: 0;
width: 50%;
height: 100%;
background-color: #013652;
clip-path: polygon(0 100%, 0 0, 100% 100%);
}

.aboutIntroSupport {
position: relative;
padding: 18px 20px;
background-color: #013652;
}

.aboutIntroSupportTitle {
margin-bottom: 10px;
line-height: 1.5;
font-size: 1.75rem;
font-weight: bold;
}

.aboutIntroSupportTitle .aboutIntroSupportTitle_background {
background-color: #fff;
}

.aboutIntroSupportText {
margin-bottom: 10px;
line-height: 1.5;
font-size: 1.25rem;
}

.aboutIntroSupportNote {
padding-right: 158px;
text-align: right;
font-size: 0.875rem;
}

@media print, only screen and (max-width: 767px) {
.aboutIntro {
margin: 0;
padding: min(70px, 9.3333vw) 0 0;
}

.aboutIntroTitle {
margin-bottom: min(36px, 4.8000vw);
font-size: min(48px, 6.4000vw);
}

.aboutIntroContent {
gap: min(58px, 7.7333vw);
margin-bottom: 20vw;
}
.aboutIntroSupport_triangle {
height: 8.5vw;
margin-top: -20vw;
}
.aboutIntroItem {
flex-direction: column;
align-items: center;
gap: min(18px, 2.4000vw);
}

.aboutIntroItem .aboutIntroIcon {
width: min(230px, 30.6667vw);
order: 2;
}

.aboutIntroItem .aboutIntroIcon img {
width: 100%;
}

.aboutIntroItem .aboutIntroText {
order: 1;
font-size: min(1.875rem, 4vw);
}

.aboutIntroItem.aboutIntroItem_01 .aboutIntroIcon {
order: 2;
}

.aboutIntroItem.aboutIntroItem_01 .aboutIntroText {
order: 1;
}

.aboutIntroItem.aboutIntroItem_02 .aboutIntroText {
padding: min(54px, 7.2000vw) min(15px, 2.0000vw);
}

.aboutIntroIcon {
width: 100px;
height: 100px;
margin-bottom: 15px;
}

.aboutIntroText {
width: 100%;
padding: min(35px, 4.6667vw) min(15px, 2.0000vw);
font-size: 1.125rem;
}

.aboutIntroSupport {
padding: min(30px, 4.0000vw) min(15px, 2.0000vw) min(48px, 6.4000vw);
}

.aboutIntroSupport::before {
top: -40px;
height: 40px;
}

.aboutIntroSupport::after {
bottom: -40px;
height: 40px;
}

.aboutIntroSupportTitle {
margin-bottom: min(42px, 5.6000vw);
font-size: min(2.75rem, 5.8667vw);
}

.aboutIntroSupportTitle .aboutIntroSupportTitle_background {
font-weight: 600;
}

.aboutIntroSupportText {
font-size: 4.5vw;
}

.aboutIntroSupportNote {
padding-right: min(70px, 9.3333vw);
font-size: min(20px, 2.6667vw);
}
}

/* ------------------------------------------------------ */
/* about */
/* ------------------------------------------------------ */
.about .btnBoxAbout {
display: flex;
justify-content: center;
margin-bottom: 3.0612%;
}
.about .btnBoxAbout a {
position: relative;
width: 24.4897%;
margin: 0 3.0612%;
padding: 10px 5.102%;
border: 1px solid #A7A8AA;
border-radius: 10px;
box-sizing: border-box;
background-color: #ffffff;
color: #333333;
font-size: 1.25rem;
}
.about .btnBoxAbout a::before {
position: absolute;
content: "";
top: 50%;
right: 1.8rem;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background-color: #013652;
transform: translateY(-50%);
}
.about .btnBoxAbout a::after {
position: absolute;
content: "";
top: 50%;
right: 2.25rem;
width: 0.875rem;
height: 0.687rem;
background-color: #ffffff;
transform: translateY(-50%);
clip-path: polygon(0 0, 100% 0, 50% 100%); 
}
.about .pointBlock {
padding: 4.0612% 2.6122% 3.5%;
background-color: #f4f2ee;
}
.about .pointBlock h3 {
display: flex;
align-items: center;
justify-content: center;
color: #013652;
text-align: center;
font-size: 1.75rem;
font-weight: bold;
}
.about .pointBlock h3::before {
display: block;
content: "";
width: 30px;
height: 30px;
margin-right: 10px;
background: url("../images/campaign/about_point_ttl.svg") no-repeat center / contain;
flex-shrink: 0;
}
.about .pointBlock h3::after {
display: block;
content: "";
width: 30px;
height: 30px;
margin-left: 10px;
background: url("../images/campaign/about_point_ttl.svg") no-repeat center / contain;
flex-shrink: 0;
}
.about .pointBlock2 h3 {
color: #013652;
text-align: center;
font-size: 1.45rem;
font-weight: bold;
}
.about .pointBlock p {
line-height: 1.5;
font-size: 1.25rem;
}
.about #content .pointTtl_Overview {
text-align: center;
line-height: 1.9;
}
.about #content ul {
display: flex;
justify-content: space-around;
margin-top: 30px;
}
.about #content ul li {
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
padding: 0 0 1.8rem;
border-radius: 0 0 10px 10px;
background-color: #ffffff;
}
.about #content ul .pointBlock_Point {
width: 100%;
margin: 0 auto;
padding: 3.6% 0;
border-radius: 10px 10px 0 0;
background: #013652;
text-align: center;
}
.about #content ul .pointBlock_Point .pointBlock_Point_txt {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
padding: 0;
color: #ffffff;
font-size: 1.25rem;
font-weight: 600;
}
.about #content ul .pointBlock_Point .pointBlock_Point_txt::before {
display: block;
content: "";
width: 30px;
height: 30px;
margin-right: 1.7%;
background: url("../images/campaign/about_point_icon_img.png") no-repeat center / contain;
flex-shrink: 0;
}
.about #content ul .pointBlock_Point .pointBlock_Point_img {
width: 100%;
height: auto;
}
.about #content ul p {
padding: 2.3% 9% 0;
text-align: left;
line-height: 1.5;
font-size: 1rem;
}
.about #content ul .pointBlock_Point_subtxt {
padding: 8% 3% 0;
color: #013652;
text-align: center;
font-size: 1.1rem;
font-weight: bold;
}
.about .termBg,
.about #content,
.about #howto {
position: relative;
}
.about .termBg::before {
left: unset;
right: 0;
}
.about #term {
width: 100%;
padding: 5.6% 0 5.2%;
background-color: #003652;
}
.about #term h3 {
position: relative;
width: 100%;
max-width: 375px;
margin: 0 auto 1%;;
padding: 1% 0 1% 2%;
border-radius: 50vw;
background: #ffffff;
color: #003652;
text-align: center;
line-height: 1.5;
font-size: 1.75rem;
}
.about #term h3 img {
position: absolute;
top: 50%;
left: 1%;
width: 100%;
max-width: 50px;
transform: translateY(-50%);
}
.about #term .termContent {
padding: 0;
text-align: center;
}
.about #term .termContentText {
color: #8ff5b1;
line-height: 1.6;
font-size: 1.9rem;
font-weight: bold;
letter-spacing: 0.06rem;
}
.about #term .termContentText .small {
font-size: 80%;
}
.about #term .termContentText .white {
color: #ffffff;
}

@media print, only screen and (max-width: 980px) {
.about .btnBoxAbout a {
width: 27%;
}
.about #term {
width: unset;
padding: 7.0612% 3.0303% 5.8823%;
}
.about #term p {
width: unset;
padding-left: unset;
}  
.about #term h3 {
margin-bottom: 6%;
padding-left: unset;
white-space: nowrap;
} 
}
/* for SMP */
@media print, only screen and (max-width: 767px) {

.about .btnBoxAbout {
margin-bottom: 9.0909%;
padding: 3.0303% 7.0909%;
}
.about .btnBoxAbout a {
width: 38.1818%;
box-sizing: content-box;
}
.about .btnBoxAbout a::before {
right: 1.5rem;
}
.about .btnBoxAbout a::after {
right: 1.95rem;
}
.about .pointBlock {
padding: min(50px, 9.6667vw) min(35px, 4.6667vw);
}
.about .pointBlock h3 {
font-size: min(2.75rem, 5.8667vw);
}
.about .pointBlock2 h3 {
font-size: min(2.75rem, 4.6vw);
}
.about .pointBlock h3.conTtl_Howto,
.about .pointBlock2 h3.conTtl_Howto {
font-size: 5.2vw;
}
  
.about .pointBlock h3 {
font-size: 100%;
}
.about .pointBlock h3::before {
width: 20px;
height: 20px;
margin-right: 6px;
}
.about .pointBlock h3::after {
width: 20px;
height: 20px;
margin-left: 6px;
}

.about .pointBlock p {
line-height: 1.75;
font-size: 1.45rem;
}
#content .about .pointBlock p {
padding-right: 0.9rem;
}

.about #content ul {
justify-content: center;
align-items: center;
flex-direction: column;
row-gap: 3rem;
}
.about #content ul li {
width: 100%;
padding: 0 0 2.2rem 0;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
}
.about #content ul li img {
}
.about #content ul .pointBlock_Point {
border-radius: 4px 4px 0 0;
}
.about #content ul .pointBlock_Point_subtxt {
padding: 6% 3% 0;
font-size: 95%;
}
.about #content ul .pointBlock_Point .pointBlock_Point_txt {
font-size: 100%;
}
.about #content ul p {
font-size: 80%
}
.about #content .pointTtl_Overview {
line-height: 1.3;
}
 
.about #term {
padding: 8.0612% 3.0303% 7.8823%;
}
.about #term h3 {
max-width: 280px;
margin-bottom: 4%;
padding: 3% 0 3% 6%;
font-size: 100%;
} 
.about #term h3 img {
max-width: 40px;
}
.about #term .termContentText {
line-height: 1.4;
font-size: 105%;
}
.about #term .termContentText span {
font-weight: bold;
}
.about #term .termContent {
flex-direction: column;
align-items: center;
padding: 0 3%;
}
}

@media print, only screen and (max-width: 400px) {
.about #term h3 {
max-width: 240px;
} 
}

/* ------------------------------------------------------ */
/* Floating Banner */
/* ------------------------------------------------------ */
.floating-banner {
visibility: hidden;
position: fixed;
bottom: 0;
right: 0;
z-index: 1000;
width: 100%;
padding: 20px 0;
background-color: #00000095;
opacity: 0;
text-align: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}

.floating-banner.is-visible {
visibility: visible;
opacity: 1;
transition: opacity 0.5s ease 0.2s, visibility 0.5s ease 0.2s;
}

.floating-banner.is-visible .btnApply4 {
width: 100%;
max-width: 500px;
margin: 0 auto;
border-radius: 50px;
box-sizing: border-box;
background-color: #013652;
line-height: 1.33;
font-size: min(1.5rem, 4.8vw);
}
.floating-banner.is-visible .btnApply4 a {
display: block;
position: relative;
padding: 17px 51px 17px 14px;
color: #ffffff;
font-weight: bold;
}
.floating-banner.is-visible .btnApply4 a::before{
position: absolute;
content: "";
top: 50%;
right: 2rem;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background-color: #ffffff;
transform: translateY(-50%);
}
.floating-banner.is-visible .btnApply4 a::after {
position: absolute;
content: "";
top: 52%;
right: 2.6rem;
width: 1.125rem;
height: 0.875rem;
background-color: #013652; 
transform: translateY(-50%);
clip-path: polygon(0 0, 100% 0, 50% 100%);  
}
.floating-banner.is-visible .btnApply4.up a::after{
clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.floating-banner img {
width: 470px;
height: auto;
}

@media print, only screen and (max-width: 767px) {

.floating-banner {
padding: 15px 0;
}
.floating-banner.is-visible .btnApply4 {
width: 90%; 
}
.floating-banner img {
width: min(690px, 92vw);
}
}

/* ------------------------------------------------------ */
/* 応募方法 */
/* ------------------------------------------------------ */
.about .howtoBlock {
padding: 4.0612% 5.6122% 3.5%;
background: #f4f2ee;
}
.about #howto h3  {
position: relative;
width: 240px;
margin: 0 auto 1%;
padding: 1% 0 1% 2%;
border-radius: 50vw;
background: #003652;
color: #ffffff;
text-align: center;
line-height: 1.5;
font-size: 1.75rem;
font-weight: bold;
}
.about #howto h3 img {
position: absolute;
top: 50%;
left: 1.6%;
width: 100%;
max-width: 50px;
transform: translateY(-50%);
}
.about #howto ul {
padding: 3% 0;
}
.about #howto ul li {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 3% 6%;
border: solid 1px #003652;
border-radius: 20px 0;
box-sizing: border-box;
background: #ffffff;
list-style: none;
}
.about #howto ul li .howtoContentText {
text-align: center;
font-size: 1.6rem;
font-weight: bold;
}
.about #howto .howtoContentNote {
display: flex;
justify-content: center;
margin: 1.7% auto 0;
padding-left: 1em;
text-indent: -1em;
line-height: 1.5;
font-size: 0.8rem;
}
.about #howto .howtoContentarrow {
width: 90px;
height: 30px;
margin: -0.1px auto 2%;
background: #003652;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media print, only screen and (max-width: 767px) {
.about #howto {
padding: min(50px, 6.6667vw) min(30px, 4vw);
}
.about #howto h3 {
max-width: 156px;
margin-bottom: 4%;
padding: 3% 0 3% 6%;
font-size: 100%;
} 
.about #howto h3 img {
left: 2.4%;
max-width: 40px;
}
.about #howto ul li {
width: 90%;
padding: 3.7% 6%;
}
.about #howto ul li .howtoContentText {
font-size: 80%;
}
.about #howto .howtoContentNote {
font-size: 1.1rem;
}
.about #howto .howtoContentarrow {
width: 70px;
height: 20px;
}
}

@media print, only screen and (max-width: 400px) {
.about #howto h3 img {
left: 1.6%;
}
}

/* 共通CSS */
#application.conInner h2.conTtl {
display: block;
padding: 0 3% 4%;
background-color: #00000000;
color: #013652;
text-align: center;
line-height: 1.5;
font-weight: 600;
}

/* ------------------------------------------------------ */
/* 対象試合 */
/* ------------------------------------------------------ */
.about .gameBlock {
padding: 4.0612% 5.6122% 3.5%;
background-color: #ffffff;
text-align: center;
}
.about #game h3 {
position: relative;
width: 240px;
margin: 0 auto 1%;
padding: 1% 0 1% 2%;
border-radius: 50vw;
background: #003652;
color: #ffffff;
text-align: center;
line-height: 1.5;
font-size: 1.75rem;
font-weight: bold;
}
.about #game h3 img {
position: absolute;
top: 50%;
left: 1.6%;
width: 100%;
max-width: 50px;
transform: translateY(-50%);
}
.about #game .f_lague_logo {
width: 50%;
margin: 1.7% auto;
}
.about #game .gameDivision1 {
width: 100%;
margin: 2% auto 3.5%;
border: solid 2px #3185a9;
}
.about #game .gameDivision2 {
width: 100%;
margin: 2% auto 3.5%;
border: solid 2px #42a9a6;
}
.about #game .gameDivision3 {
width: 100%;
margin: 2% auto 3.5%;
border: solid 2px #cf5166;
}
.about #game .gameDivision1 .gameDivisionTtl {
width: 100%;
padding: 1.4% 0;
background: #3185a9;
color: #ffffff;
font-size: 2rem;
font-weight: bold;
}
.about #game .gameDivision2 .gameDivisionTtl {
width: 100%;
padding: 1.4% 0;
background: #42a9a6;
color: #ffffff;
font-size: 2rem;
font-weight: bold;
}
.about #game .gameDivision3 .gameDivisionTtl {
width: 100%;
padding: 1.4% 0;
background: #cf5166;
color: #ffffff;
font-size: 2rem;
font-weight: bold;
}
.about #game dd {
padding: 4% 4.5%;
}
.about #game .gameNote {
margin: 3% auto 0;
text-align: center;
font-size: 0.8rem;
}
.about #game dd ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
}
.about #game dd ul li {
width: 45%;
padding: 0.5rem;
}
.about #game .gameDivision1 dd ul .gameDivision1Line {
border-top: 1px solid #3185a9;
}
.about #game .gameDivision1 dd ul .gameDivision1Line:nth-last-child(-n + 2) {
border-bottom: 1px solid #3185a9;
}
.about #game .gameDivision2 dd ul .gameDivision1Line {
border-top: 1px solid #42a9a6;
}
.about #game .gameDivision2 dd ul .gameDivision1Line:nth-last-child(-n + 2) {
border-bottom: 1px solid #42a9a6;
}
.about #game .gameDivision3 dd ul .gameDivision1Line {
border-top: 1px solid #cf5166;
}
.about #game .gameDivision3 dd ul .gameDivision1Line:nth-last-child(-n + 2) {
border-bottom: 1px solid #cf5166;
}
.about #game dd ul li a {
display: flex;
align-items: center;
gap: 1%;
color: #000000;
text-decoration: none;
font-size: 1.1rem;
font-weight: bold;
}
.about #game dd ul li a img {
width: 13%;
}

@media print, only screen and (max-width: 767px) {
.about .gameBlock {
padding: min(50px, 8.6667vw) min(35px, 4.6667vw);
}
.about #game h3 {
max-width: 156px;
margin-bottom: 4%;
padding: 3% 0 3% 6%;
font-size: 100%;
} 
.about #game h3 img {
left: 2.4%;
max-width: 40px;
}
.about #game .f_lague_logo {
width: 60%;
margin: 2.9% auto;
}
.about #game .gameDivision1,
.about #game .gameDivision2,
.about #game .gameDivision3 {
margin: 2% auto 8.5%;
}
.about #game .gameDivision1 .gameDivisionTtl,
.about #game .gameDivision2 .gameDivisionTtl,
.about #game .gameDivision3 .gameDivisionTtl {
padding: 2.6% 0;
font-size: 90%;
font-weight: bold;
}
.about #game .gameDivision1 .gameDivisionTtl p,
.about #game .gameDivision2 .gameDivisionTtl p,
.about #game .gameDivision3 .gameDivisionTtl p {
font-weight: bold;
}
.about #game dd ul {
display: flex;
flex-direction: column;
}
.about #game dd ul li {
width: auto;
}
.about #game .gameDivision1 dd ul .gameDivision1Line {
border-bottom: none;
}
.about #game .gameDivision2 dd ul .gameDivision1Line {
border-bottom: none;
}
.about #game .gameDivision3 dd ul .gameDivision1Line {
border-bottom: none;
}
.about #game .gameDivision1 dd ul .gameDivision1Line:nth-last-child(-n + 2),
.about #game .gameDivision2 dd ul .gameDivision1Line:nth-last-child(-n + 2),
.about #game .gameDivision3 dd ul .gameDivision1Line:nth-last-child(-n + 2){
border-bottom: none;
}
.about #game .gameDivision1 dd ul .gameDivision1Line:last-child {
border-bottom: 1px solid #3185a9;
}
.about #game .gameDivision2 dd ul .gameDivision1Line:last-child {
border-bottom: 1px solid #42a9a6;
}
.about #game .gameDivision3 dd ul .gameDivision1Line:last-child {
border-bottom: 1px solid #cf5166;
}
.about #game dd ul li a {
font-size: 87%;
}
.about #game .gameNote {
margin: 2.2% auto 0;
padding-left: 1em;
text-indent: -1em;
text-align: left;
font-size: 1.1rem;
}
}

@media print, only screen and (max-width: 400px) {
.about #game h3 img {
left: 1.6%;
}
}

/* ------------------------------------------------------ */
/* ポップアップ */
/* ------------------------------------------------------ */
body.is-modal-open {
overflow: hidden;
}
/* ポップアップ全体 */
.info-modal {
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
position: fixed;
z-index: 9999;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
}

/* ポップアップ表示時 */
.info-modal.is-active {
visibility: visible;
opacity: 1;
}

/* 背景 */
.info-modal-bg {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}

/* ポップアップ本体 */
.info-modal-content {
position: relative;
z-index: 1;
width: 90%;
max-width: 700px;
max-height: 90vh;
padding: 2%;
background: #fff;
box-sizing: border-box;
}

/* 閉じるボタン */
.info-modal-close {
position: absolute;
top: -20px;
right: -20px;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: #3185a9;
color: #ffffff;
line-height: 1;
font-size: 2.6rem;
cursor: pointer;
}

/* ポップアップ内スクロール */
.info-modal-box {
max-height: calc(90vh - 70px);
padding: 2.7% 2.2% 2.7% 0;
border: solid 2px #3185a9;
border-radius: 10px;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
}

/* 各内容 */
.info-modal-item {
display: none;
}

.info-modal-item.is-active {
display: block;
}

.info-modal-item h4 {
display: flex;
align-items: center;
justify-content: center;
gap: 1%;
text-align: center;
font-size: 2.2rem;
font-weight: bold;
}
.info-modal-item h4 img {
width: 100%;
max-width: 100px;
}
.info-modal-item-gameBox {
width: 100%;
padding: 2% 0;
}
.info-modal-item-game {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 2%;
padding: 1.7% 0;
}
.info-modal-item-game .gameNumberBox {
display: flex;
justify-content: space-between;
width: 15em;
padding: 1em 0 2em 0;
background: url("../images/campaign/popup_bg.png") left top no-repeat;
background-size: contain;
}
.info-modal-item-game .gameNumberBox .gameNumberBox-num {
width: 40%;
padding: 0;
color: #fff;
text-align: right;
line-height: 1;
font-size: 3.2rem;
font-weight: bold;
}
.info-modal-item-game .gameNumberBox .gameNumberBox-txt {
width: 40%;
padding: 0;
color: #fff;
font-size: 2.6rem;
font-weight: bold;
}

.info-modal-item-game .gameMatchDay {
text-align: left;
}
.info-modal-item-game .gameMatchDay .gameMatchDay-team {
font-size: 1.8rem;
font-weight: bold;
}
.info-modal-item-game .gameMatchDay .gameMatchDay-day {
color: #cf5166;
font-size: 3.2rem;
font-weight: bold;
}
.info-modal-item-game .gameMatchDay .gameMatchDay-day .small {
color: #000000;
font-size: 1.7rem;
font-weight: bold;
}
.info-modal-item-game .gameMatchDay .gameMatchDay-day .circle {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
top: -3px;
left: 2px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #000000;
color: #fff;
font-size: 1.1rem;
}
.info-modal-item-game .gameMatchDay .gameMatchDay-txt {
font-size: 1.2rem;
font-weight: bold;
}

.info-modal-item .info-modal-logo {
display: block;
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: 1.5% 0;
}
.info-modal-item .info-modalNote {
padding: 3%;
}
.info-modal-item .info-modalNote ul li {
list-style: none;
}

/* 背景ページのスクロール停止 */
body.is-modal-open {
overflow: hidden;
}


.info-modal-item .info-modal-womensTtl {
font-size: 1.9rem;
}
.info-modal-item-gameBox2 {
padding: 2% 4%;
}
.info-modal-item-gameBox2 ul {
margin: 0 auto;
}
.info-modal-item-gameBox2 ul li {
padding: 0.7% 0;
text-align: left;
font-size: 1rem;
font-weight: bold;
list-style: none;
}
.info-modal-item-gameBox2 ul li span {
font-weight: normal;
}
.info-modal-item-gameBox2 p {
margin: 2% auto;
text-align: left;
font-size: 1rem;
font-weight: 500;
}

@media print, only screen and (max-width: 767px) {
.info-modal-box {
padding: 5.7% 2.2% 5.7% 0;
}
.info-modal-close {
top: -10px;
right: -9px;
width: 35px;
height: 35px;
font-size: 145%;
}
.info-modal-item h4 {
gap: 1%;
text-align: left;
font-size: 115%;
}
.info-modal-item h4 img {
width: 20%;
}
.info-modal-item-game .gameNumberBox {
width: 7em;
margin-left: -0.2px;
padding: 0.8em 0;
}
.info-modal-item-game .gameNumberBox .gameNumberBox-num {
width: 35%;
line-height: 0.8;
font-size: 150%;
}
.info-modal-item-game .gameNumberBox .gameNumberBox-txt {
width: 38%;
font-size: 110%;
}
.info-modal-item-game .gameMatchDay .gameMatchDay-team {
font-size: 90%;
}
.info-modal-item-game .gameMatchDay .gameMatchDay-day {
font-size: 160%;
}
.info-modal-item-game .gameMatchDay .gameMatchDay-day .small {
font-size: 70%;
}

.info-modal-item-game .gameMatchDay .gameMatchDay-day .circle {
top: -3px;
left: 3px;
width: 30px;
height: 30px;
font-size: 46%;
font-weight: bold;
}
.info-modal-item-game .gameMatchDay .gameMatchDay-txt {
font-size: 1.1rem;
}
.info-modal-item .info-modal-logo {
width: 77%;
padding: 2.5% 0;
}

.info-modal-item-gameBox2 {
padding: 2% 2% 2% 4%;
}
.info-modal-item-gameBox2 ul li {
padding: 2% 0;
font-size: 80%;
}
.info-modal-item-gameBox2 p {
margin: 3% auto;
font-size: 80%;
}
}

/* ------------------------------------------------------ */
/* 応募規約 */
/* ------------------------------------------------------ */
.conInner {
position: relative;
padding: 35px min(30px, 4vw);
background: #f4fff8;
}
#application .qnaAccoBox {
position: relative;
}
#application .qnaAccoBox::before,
#application .qnaAccoBox::after {
position: absolute;
content: "";
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(to right, #3185a9, #64d1ce);
}
#application .qnaAccoBox::before {
top: 0;
}
#application .qnaAccoBox::after {
bottom: 0;
}
#application .qnaAccordion {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 4% 3%;
line-height: 1;
font-size: 1.75rem;
font-weight: normal;
}
#application .qnaAccordion::before,
#application .qnaAccordion::after {
position: absolute;
content: "";
right: 29px;
top: 50%;
width: 12px;
height: 2px;
background-color: #000;
transform: translateY(-50%);
}
#application .qnaAccordion::after {
transform: translateY(-50%) rotate(90deg);
}
#application .qnaAccoCon.active .qnaAccordion::after {
opacity: 0;
}
#application .qnaAccordion .accordion-status {
position: absolute;
right: 49px;
top: 50%;
font-size: 14px;
transform: translateY(-50%);
}
#application .qnaAccoCon.active .qnaAccordion .accordion-status {
font-size: 0;
}
#application .qnaAccoCon.active .qnaAccordion .accordion-status::after {
content: "閉じる";
font-size: 14px;
}
#application .qnaAccordion img {
width: 100%;
max-width: 205px;
margin: 0 auto;
}
#application .qnaPanel {
position: relative;
height: 0;
overflow: hidden;
line-height: 1.5;
font-size: 1rem;
transition: all 0.3s ease-out;
}
#application .qnaAccoCon.active .qnaPanel {
height: auto;
margin-top: 2%;
padding-bottom: 6.8736%;
}
#application .qnaAccoCon .qnaPanel b {
display: block;
margin-top: 3.0612%;
font-size: 1.125rem;
font-weight: 600;
}
#application .qnaAccoCon .qnaPanel b:first-child {
margin-top: 1.5306%;
}
#application .qnaAccoCon .qnaPanel b::before {
display: inline;
content: "■ ";
font-size: 0.85rem;
}
#application .qnaAccoCon .qnaPanel .bTxt::before {
display: inline;
content: " ";
font-size: 0.85rem;
}
#application .qnaAccoCon .qnaPanel p {
margin: 0;
margin-top: 1.6327%;
font-size: 1rem;
}
#application .qnaAccoCon .qnaPanel p a:hover {
opacity: 0.7;
color: #013652;
}
#application .qnaAccoCon .qnaPanel .komeTxt li{
padding-left: 1.3rem;
text-indent: -1.3rem;
}
.info-modal-item .info-modalNote .komeTxt li{
padding-left: 1.2em;
text-indent: -1.2em;
}
#application .qnaAccoCon .qnaPanel .komeTxt li::before,
.info-modal-item .info-modalNote .komeTxt li::before{
display: inline;
content: "※";
font-size: 1.125rem;
}
#application .qnaAccoCon .qnaPanel .tennTxt {
margin-top: 1.6327%;
}
#application .qnaAccoCon .qnaPanel .tennTxt li {
padding-left: 1.3rem;
text-indent: -1.3rem;
list-style: none;
}
#application .qnaAccoCon .qnaPanel .tennTxt li::before {
content: "・";
top: 50%;
left: 5px;
font-size: 1.125rem;
transform: translateY(-50%);
}
#application .qnaAccoCon .qnaPanel .numberTxt {
margin-top: 1.6327%;
padding-left: 0;
list-style: none;
counter-reset: note;
}
#application .qnaAccoCon .qnaPanel .numberTxt li {
position: relative;
padding-left: 1.3rem;
counter-increment: note;
}
#application .qnaAccoCon .qnaPanel .numberTxt li::before {
position: absolute;
content: counter(note) ")";
left: 0;
top: 0;
}

.qnaAccoTable {
width: 100%;
margin: 2.6% auto;
border-collapse: collapse;
}

.qnaAccoTable th,
.qnaAccoTable td {
padding: 10px;
border: 1px solid #333;
}

.qnaAccoTable th,
.qnaAccoTable td {
width: 50%;
font-size: 1rem;
font-weight: bold;
}

.qnaAccoTable th {
text-align: center;
}

.qnaAccoTable td {
text-align: left;
vertical-align: middle;
}

.qnaAccoTable .tableTitle {
width: auto;
text-align: center;
}

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

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

.qnaAccoTable .tableKome {
padding-left: 1em;
text-indent: -1em;
text-align: left;
font-size: 1rem;
font-weight: bold;
}
.qnaAccoTable .tableKome::before {
display: inline;
content: "※";
font-size: 1.125rem;
}


/* for SMP */
@media print, only screen and (max-width: 767px) {
#application {
margin: 0 0 7.1212% 0;
}
#application .qnaAccordion {
padding: 6.0606% 0 6.0606% 3%;
}
#application .qnaAccordion .accordion-status {
right: 8.5%;
}
#application .qnaAccordion::before,
#application .qnaAccordion::after {
right: 3.5%;
}
#application .qnaAccordion img {
width: 42%;
}
#application .qnaAccordion p {
width: 90.9091%;
font-size: 1.07rem;
}
#application .qnaAccoCon.active .qnaPanel {
margin-top: 5%;
padding-bottom: 13%;
}
#application .qnaAccoCon .qnaPanel b {
margin-top: 7.2727%;
font-size: 1.07rem;
}
#application .qnaAccoCon .qnaPanel b:first-child {
margin-top: 0%;
}
#application .qnaAccoCon .qnaPanel b::before {
font-size: 1.07rem;
}
#application .qnaAccoCon .qnaPanel p {
margin-top: 3.0612%;
font-size: 1.07rem;
}
#application .qnaAccoCon .qnaPanel .komeTxt li,
#application .qnaAccoCon .qnaPanel .komeTxt li::before,
#application .qnaAccoCon .qnaPanel .tennTxt li,
#application .qnaAccoCon .qnaPanel .tennTxt li::before,
.info-modal-item .info-modalNote .komeTxt li,
.info-modal-item .info-modalNote .komeTxt li::before,
.qnaAccoTable .tableKome,
.qnaAccoTable .tableKome::before {
font-size: 1.1rem;
}
.info-modal-item .info-modalNote .komeTxt li{
padding-left: 1em;
text-indent: -1em;
}
#application .qnaAccoCon .qnaPanel .tennTxt li::before {
top: 8px;
}
  
.qnaAccoTable {
margin: 5.6% auto;
}
}
/* ------------------------------------------------------ */
/* stylesheet E N D */
/* ------------------------------------------------------ */