@charset "utf-8";


@keyframes anime-rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}


@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-weight: 800;
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Zen Kaku Gothic Antique';
  src: url('/fonts/ZenKakuGothicAntique-Bold.ttf') format('truetype');
  font-weight: 700;
}


header { padding: 10px 0; background-color: #2693ff; }
header .inner { display: flex; align-items: center; margin: 0 auto; padding: 0 10px; width: 97%; height: 55px; background-color: #fff; border-radius: 100px; box-shadow: 0 10px 20px rgb(26 123 110 / 10%); }
header img { width: 188px; height: auto; }
header h1 { color: #163393; font-weight: bold; font-size: 12px; line-height: 1.333; margin-left: 15px; }

#kv { padding: 10px 0; height: auto; min-height: 455px; background: url('../lp/images/lp_kv_bg_sp.svg') no-repeat center center/cover #2693ff; }
#kv .copy p { font-family: 'Noto Sans JP', sans-serif; text-align: center; }
#kv .copy p:nth-child(1) { color: #2693ff; font-weight: 700; }
#kv .copy p:nth-child(1) .square { line-height: 1; display: inline-block; margin: 1.5px; padding: 3px 5px; }
#kv .copy p:nth-child(1) .square.yellow { font-size: 26px; background-color: #ffdf74; }
#kv .copy p:nth-child(1) .square.white { font-size: 18px; background-color: #fff; }
#kv .copy p:nth-child(2) { color: #fff; font-weight: 700; font-size: 24px; margin-top: 10px; margin-bottom: 13px; }
#kv .image_inner { position: relative; }
#kv .image_wrap { position: absolute; top: 0; right: 0; left: 50%; margin-left: -135px; width: 270px; height: 270px; }
#kv .bg { position: relative; z-index: 0; width: 100%; height: 100%; animation: anime-rotate 60s linear infinite; }
#kv .bg img { position: absolute; top: 0; left: 0; }
#kv .char { position: absolute; right: 50%; z-index: 1; }
#kv .char:first-child { top: 10px; margin-right: -80px; width: 160px; }
#kv .char:last-child { top: 10px; margin-right: -82px; width: 185px; opacity: 0; }
#kv .char img  { width: auto; height: auto; }

.buttons { padding-bottom: 35px; background-color: rgb(245 245 244); }
.buttons li  { padding-top: 55px; }
.buttons a { position: relative; display: flex; flex-direction: column; align-items: center; }
.buttons span { font-weight: bold; text-align: center; letter-spacing: .05em; border-width: 2px; border-style: solid; border-radius: 9999px; }
.buttons li:first-child span { color: #fff; background-color: rgb(0 122 255); }
.buttons li:first-child .balloon { border-color: rgb(255 255 255); }
.buttons li:first-child .button { border-color: rgb(0 122 255); }
.buttons li:last-child span { color: rgb(0 122 255); background-color: rgb(255 255 255); border-color: rgb(59 130 246); }
.buttons .balloon { position: absolute; top: -33px; padding: 8px 0; width: 50%; }
.buttons .button { font-size: 18px; padding: 22px 0; width: 93%; box-shadow: 0 4px 0px #005edb; }
.buttons .balloon:before, .buttons .balloon:after { content: ''; position: absolute; left: 46%; width: 0; height: 0; border: 8px solid; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
.buttons li:first-child .balloon:before { top: 41px; border-top-color: white; }
.buttons li:first-child .balloon:after { top: 38px; border-top-color: #007aff; }
.buttons li:last-child .balloon:before { top: 41px; border-top-color: 007aff; }
.buttons li:last-child .balloon:after { top: 38px; border-top-color: white; }

.section { text-align: center; padding: 35px 10px; background-color: #f0fcff; }
.section h2 { font-weight: bold; font-size: 20px; margin-bottom: 30px; }
.section h2 .underline { background: linear-gradient(transparent 60%, rgb(255 215 0) 0%); }

#example li { position: relative; padding: 10px; background-color: #fff; border: 2px solid #0457a7; border-radius: 10px; }
#example li +li { margin-top: 20px; }
#example h3, #example h4, #example p { font-weight: bold; }
#example h3, #example h4 { font-size: 16px; }
#example h3 { color: #fff; letter-spacing: .03em; padding: 5px 0; background: #0457a7; border-radius: 4px; }
#example h4 { color: #0457a7; line-height: 1.333; position: absolute; top: -10px; right: 20px; display: flex; justify-content: center; align-items: center; width: 88px; height: 88px; }
#example h4:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../lp/images/lp_object01_yellow.svg') no-repeat center/100%; }
#example h4 .text { position: relative; z-index: 1; }
#example img { margin-top: 10px; margin-bottom: 10px; border-radius: 5px; }
#example p { font-size: 18px; }
#example p:nth-of-type(1) { color: #e73858; }

#case li { background-color: #ffdf74; border: 2px solid #0457a7; border-radius: 10px; }
#case li +li { margin-top: 20px; }
#case .ttl, #case p:last-child { text-align: left; }
#case .ttl { padding: 22px 5px 11px 95px;  background-repeat: no-repeat; background-position: 5px 5px; background-size: 85px 85px; }
#case li:nth-child(1) .ttl { background-image: url('../lp/images/lp_age_01.png?v=202402050629'); }
#case li:nth-child(2) .ttl { background-image: url('../lp/images/lp_age_02.png'); }
#case li:nth-child(3) .ttl { background-image: url('../lp/images/lp_age_03.png?v=202402051530'); }
#case li:nth-child(4) .ttl { background-image: url('../lp/images/lp_age_04.png?v=202402091545'); }
#case li:nth-child(5) .ttl { background-image: url('../lp/images/lp_age_05.png'); }
#case .text { margin: 10px; padding: 10px; background-color: #fff; border-radius: 8px; }
#case h3, #case h4, #case p:not(:last-child) { font-size: 16px; }
#case h3, #case h4, #case .salary, #case .salary em { font-weight: bold; }
#case h4 { margin-top: 5px; }
#case p:nth-of-type(1), #case p:nth-of-type(2) { display: flex; margin-right: 44px; margin-left: 44px; border-width: 3px; border-style: solid; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05); }
#case p:nth-of-type(1) { border-color: rgb(229 231 235); }
#case p:nth-of-type(2) { position: relative; margin-top: 11px; border-color: rgb(255 215 0); }
#case p:nth-of-type(2):before { content: ''; position: absolute; bottom: 62px; left: calc(50% - 10px);; width: 0; height: 0; border: 0; border-top: 10px solid gold; border-right: 20px solid transparent; border-left: 20px solid transparent; }
#case .befor, #case .after { padding: 5px; writing-mode: vertical-rl; }
#case .befor { background-color: rgb(229 231 235); }
#case .after { background-color: rgb(255 215 0); }
#case .salary { margin: 0 auto; }
#case .salary em { color: #e73858; }
#case p:last-child { margin-top: 10px; }

#reason img { margin-bottom: 15px; width: 130px; height: auto; }
#reason h3, #reason p, #reason p em { font-weight: bold; }
#reason h3 { position: relative; display: inline-block; margin-top: 15px; padding: 7px 35px; background-color: rgb(255 215 0); border-radius: 9999px; }
#reason h3:before { content: ''; position: absolute; top: 100%; left: calc(50% - 10px); border: 10px solid transparent; border-top: 15px solid rgb(255 215 0); }
#reason ul { padding: 15px; background-color: #fff; border: 2px solid #0457a7; border-radius: 10px; }
#reason li + li { border-top: 1px solid #e6e6e6; }
#reason p { color: #0457a7; font-size: 16px; margin: 20px 0 22px; }
#reason p em { font-size: 22px; }

footer { text-align: center; padding: 30px 0 40px; border-top: 5px solid #2693ff; }
footer p { color: #163393; font-weight: bold; font-size: 12px; margin-bottom: 20px; }
footer img { width: 200px; height: auto; }