@charset "utf-8";
:root {
--fs-12: 1.1719vw;
--fs-13: 1.2695vw;
--fs-16: 1.5625vw;
--fs-17: 1.6602vw;
--fs-18: 1.7578vw;
--fs-20: 1.9531vw;
--fs-22: 2.1484vw;
--fs-26: 2.5391vw;
--fs-28: 2.7344vw;
--fs-34: 3.3203vw;
--fs-40: 3.9063vw;
--fs-50: 4.8828vw;
--fs-62: 6.0547vw;
--fs-70: 6.8359vw;
}

*, *[onclick] { -webkit-tap-highlight-color: transparent; }

#wrap .xs { display: none !important; }
#wrap .md { display: block !important; }
#wrap .md-none { display: none !important; }
#wrap .xl { display: none !important; }
#wrap .xs-flex { display: none !important; }
#wrap .md-flex { display: flex !important; }
#wrap .xl-flex { display: none !important; }

#wrap .xs-inline { display: none !important; }
#wrap .md-inline { display: inline-block !important; }
#wrap .xl-inline { display: none !important; }

#wrap .inner-wrap { padding-left: var(--w-32); padding-right: var(--w-32); }
#wrap .md-inner { padding-left: var(--w-32); padding-right: var(--w-32); }
#wrap .md-keep-all { word-break: keep-all; }

#wrap .d-md-flex { display: flex !important; }
#wrap .flex-md-center { justify-content: center !important; align-items: center !important; }
#wrap .flex-md-wrap { flex-wrap: wrap !important; }
#wrap .flex-md-ac { align-items: center !important; }
#wrap .flex-md-as { align-items: flex-start !important; }
#wrap .flex-md-ae { align-items: flex-end !important; }
#wrap .flex-md-js { justify-content: flex-start !important; }
#wrap .flex-md-je { justify-content: flex-end !important; }
#wrap .flex-md-jc { justify-content: center !important; }
#wrap .flex-md-jsb { justify-content: space-between !important; }
#wrap .flex-md-col { flex-direction: column !important; }
#wrap .flex-md-0-0-auto { flex: 0 0 auto !important; }
#wrap .flex-md-1-1-auto { flex: 1 1 auto !important; }
#wrap .flex-md-0-1-auto { flex: 0 1 auto !important; }
#wrap .flex-md-1-0-auto { flex: 1 0 auto !important; }
#wrap .mx-md-auto { margin-left: auto !important; margin-right: auto !important; }

#wrap .ellipsis-md-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
#wrap .ellipsis-md-2 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
#wrap .ellipsis-md-3 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; }
#wrap .ellipsis-md-4 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; }
#wrap .ellipsis-md-5 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; }
#wrap .ellipsis-md-6 { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 6; -webkit-box-orient: vertical; text-overflow: ellipsis; }

 
#wrap .section { width: 93.7500vw; margin: 0 auto; }
#wrap .section > .title { display: flex; flex-direction: column; padding-bottom: 3.9063vw; border-bottom: var(--static-20) solid var(--text-main-color); }
#wrap .section > .title > p { font-size: var(--fs-62); color: var(--text-main-color); font-weight: 700; }
#wrap .section > .title > span { font-size: var(--fs-22); color: #07B340; }
#wrap .section > .title > p.black { color: #333; font-size: var(--fs-40); }
#wrap .section > .title:has(.black) { display: block; border-bottom: var(--static-20) solid #333; }
#wrap .section > .title:has(.black) > span { display: block; margin-top: 0.9766vw; font-size: var(--fs-20); color: #333; }

#wrap .form-wrap { padding: 7.3242vw 0; }
#wrap .form-wrap > form > dl { display: flex; }
#wrap .form-wrap > form > dl~dl { border-top: var(--static-10) solid #E2E2E2; }
#wrap .form-wrap > form > dl > dt { font-size: var(--fs-18); flex: 0 0 auto; width: 26.3672vw; height: 8.3008vw; display: flex; align-items: center; color: var(--text-main-color); }
#wrap .form-wrap > form > dl > dt.required { display: flex; gap: 0.1953vw; }
#wrap .form-wrap > form > dl > dt.required::after { content: '*'; color: #07B340; }
#wrap .form-wrap > form > dl > dd { flex: 1 1 0; display: flex; justify-content: space-between; align-items: center; }
#wrap .form-wrap > form > dl > dd > input[type=email],
#wrap .form-wrap > form > dl > dd > input[type=tel],
#wrap .form-wrap > form > dl > dd > input[type=text] { border: var(--static-10) solid #bfbfbf; border-radius: 0.3906vw; background: #fff; height: 5.0781vw; width: 100%; padding: 0 1.5625vw; font-size: var(--fs-16); }
#wrap .form-wrap > form > dl > dd > input.harf { width: 33.2031vw; }
#wrap .form-wrap > form > dl > dd > input::placeholder { color: rgba(0,0,0,0.45); }
#wrap .form-wrap > form > dl > dd > select { border: var(--static-10) solid #bfbfbf; border-radius: 0.3906vw; height: 5.0781vw; width: 100%; padding: 0 1.5625vw; font-size: var(--fs-16); color: rgba(0,0,0,0.45); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8L10 12L14 8' stroke='%23212222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 1.5625vw) center/1.9531vw 1.9531vw no-repeat #fff; }
#wrap .form-wrap > form > dl > dd > select.active { color: var(--text-body); }
#wrap .form-wrap > form > dl > dd > ul { display: flex; flex-wrap: wrap; gap: 1.9531vw; padding: 2.3438vw 0; }
#wrap .form-wrap > form > dl > dd > ul > li { flex: 0 0 auto; width: 31.2500vw; }
#wrap .form-wrap > form > dl > dd > ul > li > input[type=checkbox] { display: none; }
#wrap .form-wrap > form > dl > dd > ul > li > label { display: flex; align-items: center; gap: 0.9766vw; font-size: var(--fs-16); }
#wrap .form-wrap > form > dl > dd > ul > li > label::before { content: ''; width: 2.3438vw; height: 2.3438vw; border-radius: 0.3906vw; border: var(--static-10) solid #bfbfbf; }
#wrap .form-wrap > form > dl > dd > ul > li > input:checked+label::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M13 1L5.0625 9L1 4.90909' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1.3672vw 0.9766vw no-repeat #fff; }
#wrap .form-wrap > form > dl > dd > textarea { resize: none; width: 100%; height: 19.5313vw; overflow-y: auto; border-radius: 0.3906vw; border: var(--static-10) solid #bfbfbf; margin-top: 1.4648vw; padding: 1.5625vw; font-size: var(--fs-16); }
#wrap .form-wrap > form > div.promotion { margin-top: 2.9297vw; border-top: var(--static-10) solid #BFBFBF; display: flex; gap: 2.9297vw; align-items: center; justify-content: center; padding: 3.4180vw 0; }
#wrap .form-wrap > form > div.promotion > p { width: 8.0078vw; height: 8.0078vw; flex: 0 0 auto; }
#wrap .form-wrap > form > div.promotion > div { font-size: var(--fs-28); color: #07B340; line-height: 1.39; }
#wrap .form-wrap > form > div.privacy { display: flex; padding: 3.9063vw 0; justify-content: center; align-items: center; }
#wrap .form-wrap > form > div.privacy > input[type=checkbox] { display: none; }
#wrap .form-wrap > form > div.privacy > label { display: flex; align-items: center; gap: 0.9766vw; font-size: var(--fs-20); }
#wrap .form-wrap > form > div.privacy > label::before { content: ''; width: 2.3438vw; height: 2.3438vw; border-radius: 0.3906vw; border: var(--static-10) solid #bfbfbf; }
#wrap .form-wrap > form > div.privacy > input:checked+label::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M13 1L5.0625 9L1 4.90909' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1.3672vw 0.9766vw no-repeat #fff; }
#wrap .form-wrap > form > div.privacy > label a { color: #07B340; font-size: var(--fs-20); margin-left: 0.4883vw; }
#wrap .form-wrap > form > p { display: flex; justify-content: center; }
#wrap .form-wrap > form > p > input[type=submit] { width: 27.3438vw; height: 8.5938vw; border-radius: 9.7656vw; background: #212222; color: #fff; border: 0; font-size: var(--fs-22); cursor: pointer; }

#wrap .form-wrap > form+.title { margin-top: 4.8828vw; }
#wrap .form-wrap > .information { display: flex; }
#wrap .form-wrap > .information > dl { flex: 1 1 0; text-align: center; font-size: var(--fs-18); }
#wrap .form-wrap > .information > dl > dt { color: #333; padding: 2.9297vw 0; }
#wrap .form-wrap > .information > dl > dd { padding: 2.9297vw 0; border-top: var(--static-10) solid #E2E2E2; border-bottom: var(--static-10) solid #E2E2E2; }
#wrap .form-wrap > .information > dl > dd > a { color: var(--text-body); font-size: var(--fs-20); }

 
#wrap .section1 { width: 100%; padding: 7.8125vw 5.8594vw; background: url('../img/bg-tab.webp') 100%/cover no-repeat; }
#wrap .section1 .inner { width: 100%; }
#wrap .section1 .inner > p { font-size: var(--fs-50); color: var(--text-main-color); font-weight: 700; }
#wrap .section1 .inner > div { margin-top: 5.8594vw; display: flex; gap: 2.9297vw; flex-direction: column; }
#wrap .section1 .inner > div > p { width: 30.9570vw; flex: 0 0 auto; }
#wrap .section1 .inner > div > p > img { width: 100%; }
#wrap .section1 .inner > div > div { font-size: var(--fs-26); color: #333; line-height: 1.7; }
#wrap .section1 .inner > div > div > p.text1 {line-height: 3.5vw;}
#wrap .section1 .inner > div > div > p.text2 { margin-top: 1.4vw; line-height: 3.5vw;}
#wrap .section1 .inner > div > div > p.text3 { margin-top: 1.4vw; line-height: 3.5vw;}


#wrap .section2 { width: 100%; padding: 7.8125vw 5.8594vw; background: #172451; color: #fff; }
#wrap .section2 .inner { width: 100%; }
#wrap .section2 .inner > p { font-size: var(--fs-70); font-weight: 700; }
#wrap .section2 .inner > ul { margin-top: 2.9297vw; }
#wrap .section2 .inner > ul > li { font-size: var(--fs-26); line-height: 1.2; display: flex; gap: 1.7578vw; }
#wrap .section2 .inner > ul > li::before { content: ''; width: 1.3672vw; height: 1.3672vw; border-radius: 9.7656vw; background: #fff; margin-top: 0.6836vw; line-height: 1.2; }
#wrap .section2 .inner > ul > li~li { margin-top: 2.4414vw; }


#wrap .section3 { background: #F5F5F7; padding: 5.8594vw; width: 100%; }
#wrap .section3 > div { display: flex; justify-content: space-between; align-items: center; }
#wrap .section3 > div > p { font-size: var(--fs-62); color: var(--text-main-color); font-weight: 700; }
#wrap .section3 > div > a { padding: 1.5625vw 2.3438vw; border-radius: 9.7656vw; background: #07B340; color: #fff; font-size: var(--fs-18); display: flex; align-items: center; line-height: 1; gap: 0.7813vw; }
#wrap .section3 > div > a > span { padding-top: 0.1953vw; }
#wrap .section3 > ul { margin-top: 3.9063vw; display: grid; grid-template-columns: repeat(2, 42.6758vw); gap: 2.9297vw; }
#wrap .section3 > ul > li { background: #fff; border-radius: 1.9531vw; width: 100%; height: 52.2461vw; padding: 1.9531vw; position: relative; display: flex; flex-direction: column; }
#wrap .section3 > ul > li > p { position: absolute; left: 2.1484vw; top: 2.1484vw; width: 8.2031vw; height: 8.2031vw; border-radius: 8.7891vw; border: var(--static-10) solid #07B340; display: flex; align-items: center; justify-content: center; font-size: var(--fs-20); color: #07b340; }
#wrap .section3 > ul > li > div { width: 100%; height: 39.0625vw; flex: 0 0 auto; border-bottom: var(--static-10) solid #D3D3D5; }
#wrap .section3 > ul > li > ul { padding: 1.9531vw 0 0; }
#wrap .section3 > ul > li > ul > li { font-size: var(--fs-17); line-height: 1.66; color: #616161; display: flex; align-items: center; gap: 0.9766vw; }
#wrap .section3 > ul > li > ul > li::before { content: ''; width: 0.3906vw; height: 0.3906vw; background: #616161; border-radius: 9.7656vw; }
#wrap .section3 > ul > li > span { display: block; margin-top: 0.4883vw; font-size: var(--fs-12); color: #8c8c8c; padding-left: 1.6vw;}

#wrap .section3 > ul > li > div { text-align: center; }
#wrap .section3 > ul > li:nth-of-type(1) > div > img { width: 37.9883vw; margin-top: 13.6719vw; }
#wrap .section3 > ul > li:nth-of-type(2) > div > img { width: 11.4258vw; margin-top: 9.7656vw; }
#wrap .section3 > ul > li:nth-of-type(3) > div > img { width: 36.0352vw; margin-top: 14.1602vw; }
#wrap .section3 > ul > li:nth-of-type(4) > div > img { width: 38.3789vw; margin-top: 10.7422vw; }
#wrap .section3 > ul > li:nth-of-type(5) > div > img { width: 24.1211vw; margin-top: 11.3281vw; }
#wrap .section3 > ul > li:nth-of-type(6) > div > img { width: 16.5039vw; margin-top: 6.8359vw; }


#wrap #footer { background: #000; color: #fff; padding: 5.8594vw; height: 26.3672vw; display: flex; justify-content: space-between; }
#wrap #footer a { color: #fff; }
#wrap #footer > div {}
#wrap #footer > div > div { display: flex; align-items: center; }
#wrap #footer > div > div > p:nth-of-type(1) { font-size: var(--fs-34); font-weight: 700; }
#wrap #footer > div > div > a { margin-left: 2.6367vw; width: 3.3203vw; }
#wrap #footer > div > div > a > img { width: 100%; }
#wrap #footer > div > div > p:nth-of-type(2) { margin-left: 1.2695vw; font-size: var(--fs-13); color: #878787; }
#wrap #footer > div > ul { margin-top: 3.9063vw; display: flex; gap: 1.9531vw; font-size: var(--fs-16); }
#wrap #footer > div > p { margin-top: 1.3672vw; font-size: var(--fs-13); color: #878787; }
#wrap #footer > p { width: 17.3828vw; }
#wrap #footer > p > img { width: 100%; }


.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; z-index: 90; padding: 5.8594vw; display: none; box-sizing: border-box; }
.popup * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; }
.popup .close { cursor: pointer; }
.popup > div { display: flex; flex-direction: column; width: 100%; height: 100%; }
.popup > div > div:nth-of-type(1) { flex: 0 0 auto; display: flex; justify-content: space-between; font-size: var(--fs-62); font-weight: 700; color: var(--text-main-color); align-items: center; }
.popup > div > div:nth-of-type(2) { font-size: var(--fs-18); margin-top: 3.9063vw; overflow-y: auto; white-space: pre-wrap; line-height: 1.3; }