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

body { color: #000; background: #fff; font-size: 1.4vw; letter-spacing: .08em; line-height: 1.6; font-weight: 700; font-family: 'Noto Sans JP', BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; font-feature-settings: "palt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media screen and (min-width: 1600px) { body { font-size: 22.5px; } }
@media screen and (max-width: 599px) { body { font-size: 2.8vw; } }

_:lang(x)::-ms-backdrop, .selector { font-family: "Segoe UI", Meiryo, sans-serif; }

p { line-height: 1.8; }

img { border: 0; vertical-align: top; }

input, select { position: relative; top: 1px; }

table, th, td { border-collapse: collapse; border-spacing: 0; }

ul, li { list-style: none; }

a:link, a:visited { color: #000; text-decoration: none; transition: opacity 0.5s; }
a:hover, a:active { opacity: .6; }

#cover { width: 100%; height: 100%; position: fixed; background: #fff; top: 0; left: 0; z-index: 10000; }

#loader { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 300px; height: 250px; }
#loader img { width: 100%; height: auto; }
@media screen and (max-width: 599px) { #loader { width: 210px; height: 175px; } }

#wrapper { overflow: hidden; position: relative; }

#page-top { opacity: 0; position: fixed; bottom: 20px; right: 20px; z-index: 9000; width: 40px; pointer-events: none; }
#page-top img { width: 100%; height: auto; }
#page-top.fade { opacity: 1; transition: opacity .5s; pointer-events: auto; }

.dd599 { display: none; }
@media screen and (max-width: 599px) { .dd599 { display: block !important; } }

@media screen and (max-width: 599px) { .nn599 { display: none !important; } }

.fadeinS, .fadein1, .fadein2, .fadein3, .fadein4, .fadein5, .fadein6, .fadeinF { opacity: 0; transform: translateY(30px); transition: opacity 1s ease-in, transform 1s ease-out; }
.fadeinS.active, .fadein1.active, .fadein2.active, .fadein3.active, .fadein4.active, .fadein5.active, .fadein6.active, .fadeinF.active { opacity: 1; transform: translateY(0); }

.poBtn { position: relative; display: inline-block; line-height: 1; padding: 1em 3em; border: 1px solid #000; border-radius: 2em; }

.poBox { padding: 2em; border: 1px solid #000; }

#header { position: relative; z-index: 1; display: block; width: 100%; padding: 1em 5% .8em; background: #42f67c; }
@media screen and (max-width: 599px) { #header { padding: 2em 5% 1.8em; } }
#header h1 { position: relative; width: 6em; }
@media screen and (max-width: 599px) { #header h1 { width: 8em; } }
#header h1 a { display: block; }
#header h1 a img { width: 100%; height: auto; }

.headMenu nav .gMenu { position: fixed; display: block; top: 0; left: 0; width: 100%; margin: 0 auto; z-index: 999; opacity: 0; height: 0; max-height: 0; overflow: hidden; transition: max-height 0s, opacity .4s; }
.headMenu nav .gMenu.active { opacity: 1; height: 100%; max-height: 100%; background: rgba(255, 255, 255, 0.8); }
.headMenu nav .gMenu ul { position: relative; width: 100%; display: block; text-align: center; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
.headMenu nav .gMenu ul li { padding-bottom: 1.5em; }
.headMenu nav .gMenu ul li > a { display: inline-block; font-size: 160%; padding: .5em 2em; border: 2px solid #000; border-radius: 3em; background: #fff; }
.headMenu nav .gMenu ul li > a:hover { opacity: 1; border: 2px solid #3ad23c; color: #3ad23c; }
.headMenu nav .gMenu ul li.webApp a { display: inline-block; color: #fff; font-weight: 700; text-align: center; line-height: 1.4; background: #000; border: 2px solid #fff; padding: .5em 1em .4em; border-radius: 3em; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5); }
@media screen and (max-width: 599px) { .headMenu nav .gMenu ul li.webApp a { font-size: 170%; padding: .5em 1.5em .4em; } }
.headMenu nav .gMenu ul li.webApp a:hover { opacity: 1; border: 2px solid #3ad23c; color: #3ad23c; }
.headMenu nav .menu-trigger { display: block; transition: all .4s; position: fixed; z-index: 9999; text-align: center; font-weight: 900; width: 7em; padding: .3em 0; background: #fff; border-radius: 2em; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5); top: .6em; right: 3%; }
@media screen and (max-width: 599px) { .headMenu nav .menu-trigger { font-size: 140%; top: .8em; } }
.headMenu nav .menu-trigger.active { background: #42f67c; color: #fff; }

main { position: relative; z-index: 5; }
main .mainPic { position: absolute; z-index: 15; top: -5em; left: 37%; width: 75vw; height: auto; }
@media screen and (min-width: 1600px) { main .mainPic { width: 53.5em; left: calc(37% - ((100% - 1600px) / 4)); } }
@media screen and (max-width: 599px) { main .mainPic { top: -16em; left: 17%; width: 143vw; } }
main section { position: relative; }
main section#topMainSct { z-index: 10; background: linear-gradient(45deg, #90fcdd, #c9fff4 50%, #5cfd9f); padding: 10em 10% 16em; }
@media screen and (max-width: 599px) { main section#topMainSct { padding: 12em 7%; } }
main section#topMainSct .txt { font-size: 110%; font-weight: 900; margin-bottom: 1.2em; }
@media screen and (max-width: 599px) { main section#topMainSct .txt { font-size: 170%; line-height: 1.4; margin-bottom: 4.6em; } }
main section#topMainSct .logo { display: block; width: 27em; margin-bottom: .5em; }
@media screen and (max-width: 599px) { main section#topMainSct .logo { width: 30em; } }
main section#topMainSct .logo img { width: 100%; height: auto; }
main section#topMainSct .name { display: block; font-size: 200%; font-weight: 900; letter-spacing: .1em; margin-bottom: .8em; }
main section#topMainSct .webApp { position: relative; }
main section#topMainSct .webApp a { display: inline-block; color: #fff; font-size: 140%; font-weight: 700; text-align: center; line-height: 1.4; background: #000; border: 2px solid #fff; padding: .5em 1em .4em; border-radius: 3em; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5); }
@media screen and (max-width: 599px) { main section#topMainSct .webApp a { display: none; } }
main section#topMainSct .webApp a:hover { opacity: 1; border: 2px solid #3ad23c; color: #3ad23c; }
main section#topAboutSct { z-index: 11; top: -7.5em; margin-bottom: -7.5em; padding: 12em 0; background: #fff url("../img/about_bg.webp") no-repeat center bottom/127%; border-top-left-radius: 7em; border-top-right-radius: 7em; overflow: hidden; text-align: center; }
@media screen and (min-width: 1600px) { main section#topAboutSct { background-size: 2020px; } }
@media screen and (max-width: 599px) { main section#topAboutSct { padding: 10em 0; background: #fff url("../img/about_bg-sp.webp") no-repeat center bottom/100%; } }
main section#topAboutSct h2 { display: block; width: 50%; margin: 0 auto 1em; }
@media screen and (max-width: 599px) { main section#topAboutSct h2 { margin-bottom: 3.5em; } }
main section#topAboutSct h2 img { width: 100%; height: auto; }
main section#topAboutSct .txt1 { font-size: 120%; font-weight: 900; line-height: 1.6; margin-bottom: 3em; }
@media screen and (max-width: 599px) { main section#topAboutSct .txt1 { font-size: 170%; margin-bottom: 2.2em; } }
main section#topAboutSct .txt2 { margin-bottom: 3.5em; }
@media screen and (max-width: 599px) { main section#topAboutSct .txt2 { display: block; width: 86%; margin: 0 auto; font-size: 137%; text-align: left; margin-bottom: 4em; } }
main section#topAboutSct .pic { display: block; width: 70%; height: auto; margin: 0 auto; }
@media screen and (max-width: 599px) { main section#topAboutSct .pic { width: 94%; } }
main section#topScanSct { background: linear-gradient(45deg, #90fcdd, #c9fff4 50%, #5cfd9f); padding: 11em 0 8em; }
@media screen and (max-width: 599px) { main section#topScanSct { padding: 8em 0 4em; } }
main section#topScanSct::before { content: ""; position: absolute; top: 1em; right: 42%; width: 62vw; height: 62vw; background: url("../img/scan_icn.webp") no-repeat center center/contain; opacity: .6; }
@media screen and (min-width: 1600px) { main section#topScanSct::before { width: 1000px; height: 1000px; } }
@media screen and (max-width: 599px) { main section#topScanSct::before { top: -8em; right: -18%; width: 71vw; height: 71vw; } }
main section#topScanSct::after { content: ""; position: absolute; z-index: 1; top: 0; right: 0; width: 50%; height: 100%; background: #f5fff0; }
@media screen and (max-width: 599px) { main section#topScanSct::after { display: none; } }
main section#topScanSct h2 { position: relative; z-index: 5; left: 42.5%; width: 46%; margin-bottom: 2em; }
@media screen and (max-width: 599px) { main section#topScanSct h2 { left: 10%; width: 74%; margin-bottom: 3em; } }
main section#topScanSct h2 img { width: 100%; height: auto; }
main section#topScanSct .smp { position: absolute; z-index: 5; left: 22%; width: 17em; height: auto; }
@media screen and (max-width: 599px) { main section#topScanSct .smp { left: 7%; top: 20em; width: 12em; } }
main section#topScanSct .txt1 { position: relative; z-index: 5; left: 52.5%; font-size: 180%; font-weight: 900; line-height: 1.4; margin-bottom: 1em; }
@media screen and (max-width: 599px) { main section#topScanSct .txt1 { left: 9%; font-size: 230%; line-height: 1.3; margin-bottom: 1.2em; } }
main section#topScanSct .txt2 { position: relative; z-index: 5; letter-spacing: .03em; left: 52.5%; }
@media screen and (max-width: 599px) { main section#topScanSct .txt2 { left: 43%; width: 47%; font-size: 120%; } }
main section#topHowtoSct { z-index: 10; background: #fff; padding: 10em 0 12em; overflow: hidden; border-bottom-left-radius: 7em; border-bottom-right-radius: 7em; }
@media screen and (max-width: 599px) { main section#topHowtoSct { padding: 10em 0 8em; } }
main section#topHowtoSct h2 { display: block; margin: 0 auto 2em; width: 33%; }
@media screen and (max-width: 599px) { main section#topHowtoSct h2 { width: 64%; margin: 0 auto 4em; } }
main section#topHowtoSct h2 img { width: 100%; height: auto; }
main section#topHowtoSct .txt1 { display: block; text-align: center; font-size: 95%; margin-bottom: 3em; }
@media screen and (max-width: 599px) { main section#topHowtoSct .txt1 { width: 86%; margin: 0 auto 3em; font-size: 140%; text-align: left; } }
main section#topHowtoSct .howBox { position: relative; width: 90%; margin: 0 auto 4em; display: flex; justify-content: space-between; }
@media screen and (min-width: 1600px) { main section#topHowtoSct .howBox { width: 1420px; } }
@media screen and (max-width: 599px) { main section#topHowtoSct .howBox { width: 88%; display: block; margin: 0 auto 6em; } }
main section#topHowtoSct .howBox li { position: relative; width: 33%; }
@media screen and (max-width: 599px) { main section#topHowtoSct .howBox li { width: 100%; margin-bottom: 2em; } }
main section#topHowtoSct .howBox li .bgImg { width: 100%; height: auto; }
main section#topHowtoSct .howBox li .txt2 { position: absolute; top: 2.8em; width: 100%; text-align: center; color: #494949; font-size: 130%; font-weight: 900; }
@media screen and (max-width: 599px) { main section#topHowtoSct .howBox li .txt2 { font-size: 200%; } }
main section#topHowtoSct .howBox li .txt3 { position: absolute; top: 7em; width: 100%; letter-spacing: .03em; text-align: center; color: #494949; font-size: 90%; line-height: 1.4; }
@media screen and (max-width: 599px) { main section#topHowtoSct .howBox li .txt3 { font-size: 130%; } }
main section#topHowtoSct .pointBox { position: relative; width: 80%; margin: 0 auto; display: flex; justify-content: space-between; }
@media screen and (min-width: 1600px) { main section#topHowtoSct .pointBox { width: 1420px; } }
@media screen and (max-width: 599px) { main section#topHowtoSct .pointBox { display: block; width: 86%; } }
main section#topHowtoSct .pointBox li { width: 49%; }
@media screen and (max-width: 599px) { main section#topHowtoSct .pointBox li { width: 100%; margin-bottom: 4em; } }
main section#topHowtoSct .pointBox li .txt4 { font-size: 160%; font-weight: 900; line-height: 1.5; margin-bottom: 1.2em; }
@media screen and (max-width: 599px) { main section#topHowtoSct .pointBox li .txt4 { font-size: 250%; } }
main section#topHowtoSct .pointBox li .txt5 { font-size: 90%; line-height: 1.6; letter-spacing: .05em; }
@media screen and (max-width: 599px) { main section#topHowtoSct .pointBox li .txt5 { font-size: 140%; line-height: 1.7; } }
main section#topStartSct { z-index: 5; top: -7.5em; margin-bottom: -7.5em; background: linear-gradient(45deg, #90fcdd, #c9fff4 50%, #5cfd9f); padding: 18em 0 8em; text-align: center; }
main section#topStartSct h2 { position: relative; display: block; margin: 0 auto 1.6em; width: 50%; }
@media screen and (max-width: 599px) { main section#topStartSct h2 { width: 86%; margin: 0 auto 3em; } }
main section#topStartSct h2 img { width: 100%; height: auto; }
main section#topStartSct .txt1 { font-size: 180%; font-weight: 900; line-height: 1.4; margin-bottom: 1.4em; }
@media screen and (max-width: 599px) { main section#topStartSct .txt1 { font-size: 240%; } }
main section#topStartSct .txt2 { margin-bottom: 6em; }
@media screen and (max-width: 599px) { main section#topStartSct .txt2 { display: block; width: 86%; margin: 0 auto 5em; font-size: 140%; } }
main section#topStartSct .appBox { position: relative; width: 80%; margin: 0 auto; }
@media screen and (max-width: 599px) { main section#topStartSct .appBox { width: 86%; } }
main section#topStartSct .appBox .bgImg { width: 100%; height: auto; }
main section#topStartSct .appBox .inBox { position: absolute; top: 50%; left: 45%; transform: translateY(-50%); text-align: left; }
@media screen and (max-width: 599px) { main section#topStartSct .appBox .inBox { left: 0; width: 100%; text-align: center; transform: translateY(-52%); } }
main section#topStartSct .appBox .inBox .txt3 { font-size: 170%; font-weight: 900; line-height: 1.5; margin-bottom: 1.2em; }
@media screen and (max-width: 599px) { main section#topStartSct .appBox .inBox .txt3 { font-size: 240%; line-height: 1.3; margin-bottom: 14em; } }
main section#topStartSct .appBox .inBox .logo { width: 20em; height: auto; margin-bottom: .5em; }
@media screen and (max-width: 599px) { main section#topStartSct .appBox .inBox .logo { width: 86%; } }
main section#topStartSct .appBox .inBox .name { font-size: 140%; font-weight: 900; margin-bottom: 1em; }
main section#topStartSct .appBox .inBox .webApp { position: relative; }
main section#topStartSct .appBox .inBox .webApp a { display: inline-block; color: #fff; font-size: 140%; font-weight: 700; text-align: center; line-height: 1.4; background: #000; border: 2px solid #fff; padding: .5em 1em .4em; border-radius: 3em; box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5); }
@media screen and (max-width: 599px) { main section#topStartSct .appBox .inBox .webApp a { font-size: 170%; padding: .5em 1.5em .4em; } }
main section#topStartSct .appBox .inBox .webApp a:hover { opacity: 1; border: 2px solid #3ad23c; color: #3ad23c; }
main section .inner { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; }

#footer { position: relative; z-index: 50; background: #000; color: #fff; padding: 3.5em 0 3em; }
@media screen and (max-width: 599px) { #footer { padding: 6em 7% 3em; } }
#footer .inner { position: relative; padding: 0 5%; display: flex; justify-content: space-between; margin-bottom: 3em; }
@media screen and (max-width: 599px) { #footer .inner { display: block; padding: 0; text-align: center; } }
#footer .inner .caBox { position: relative; }
#footer .inner .caBox .logo { display: block; width: 20em; margin-bottom: 1em; }
@media screen and (max-width: 599px) { #footer .inner .caBox .logo { width: 100%; margin-bottom: 3em; } }
#footer .inner .caBox .logo img { width: 100%; height: auto; }
#footer .inner .caBox .fMenu { position: relative; display: flex; }
@media screen and (max-width: 599px) { #footer .inner .caBox .fMenu { display: block; width: 100%; margin-bottom: 6em; border-top: 1px solid #fff; } }
#footer .inner .caBox .fMenu > li { padding-right: 1.8em; }
@media screen and (max-width: 599px) { #footer .inner .caBox .fMenu > li { padding-right: 0; border-bottom: 1px solid #fff; } }
#footer .inner .caBox .fMenu > li a { color: #fff; font-size: 80%; }
@media screen and (max-width: 599px) { #footer .inner .caBox .fMenu > li a { display: block; font-size: 180%; padding: 1em 0; } }
#footer .inner .mrtBox { position: relative; }
#footer .inner .mrtBox .corp a { display: block; width: 12em; margin-bottom: 1.4em; }
@media screen and (max-width: 599px) { #footer .inner .mrtBox .corp a { width: 66%; margin: 0 auto 2.5em; } }
#footer .inner .mrtBox .corp a img { width: 100%; height: auto; }
#footer .inner .mrtBox .corp p { font-size: 60%; line-height: 1.3; }
@media screen and (max-width: 599px) { #footer .inner .mrtBox .corp p { font-size: 100%; margin-bottom: 5em; } }
#footer .cpr { text-align: center; font-size: 60%; letter-spacing: .05em; }
@media screen and (max-width: 599px) { #footer .cpr { font-size: 80%; } }