@charset "UTF-8";
main {
    line-height: 1;
}

main * {
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    border: 0;
}

main button {
    background: transparent;
}

main select {
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

main a,
main button,
main input,
main optgroup,
main select,
main textarea {
    outline: revert;
}

main a:focus {
    outline: revert;
}

main button,
main [type=button],
main [type=reset],
main [type=submit] {
    cursor: pointer;
}

main button:disabled,
main [type=button]:disabled,
main [type=reset]:disabled,
main [type=submit]:disabled {
    cursor: default;
}

main label[for] {
    cursor: pointer;
}

main td,
main th {
    height: auto;
}

footer {
    margin-top: 0;
}

header {
    position: relative !important;
}

body {
    padding-top: 0 !important;
}

html {
    overflow-y: initial;
}

main {
    font-family: "Roboto", "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", sans-serif;
    color: #40c3c3;
    background-color: #001e62;
    image-rendering: -webkit-optimize-contrast;
}

main img {
    height: auto;
    vertical-align: bottom;
}

main svg {
    width: auto;
    height: 1em;
    fill: currentColor;
}

[data-whatinput=mouse] main a,
[data-whatinput=touch] main a,
[data-whatinput=mouse] main button,
[data-whatinput=touch] main button {
    outline: none;
}

main [data-scroll-fade] {
    opacity: 0;
    transition-duration: 0.5s;
    transition-property: transform, opacity;
    transform: translate3d(0, 20px, 0);
}

main [data-scroll-fade][data-scroll-fade=show] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.keen-slider:not([data-keen-slider-disabled]) {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    align-content: flex-start;
    display: flex;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none;
    width: 100%;
}

.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
    min-height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
    flex-direction: row-reverse;
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
    flex-wrap: wrap;
}

.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-moves] * {
    pointer-events: none;
}

.AppInfo {
    display: grid;
    justify-items: center;
    color: #fff;
    background-color: #40c3c3;
}

@media screen and (min-width: 768.02px),
print {
    .AppInfo {
        padding: 36px 5% 32px;
    }
}

@media screen and (max-width: 768px) {
    .AppInfo {
        padding: 56px 5% 32px;
    }
}

.AppInfo__Head {
    display: grid;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
}

@media screen and (min-width: 768.02px),
print {
    .AppInfo__Head {
        grid-auto-flow: column;
        column-gap: 36px;
        align-items: end;
    }
}

@media screen and (max-width: 768px) {
    .AppInfo__Head {
        row-gap: 24px;
        justify-items: center;
    }
}

@media screen and (min-width: 768.02px),
print {
    .AppInfo__Icon {
        width: 100px;
    }
}

@media screen and (max-width: 768px) {
    .AppInfo__Icon {
        width: 90px;
    }
}

.AppInfo__Links {
    display: grid;
    grid-auto-flow: column;
    column-gap: 16px;
}

@media screen and (min-width: 768.02px),
print {
    .AppInfo__Links {
        margin-top: 16px;
    }
}

@media screen and (max-width: 768px) {
    .AppInfo__Links {
        margin-top: 24px;
    }
}

.AppInfo__Links img {
    width: auto;
    height: 50px;
}

.AppInfo__Notes {
    margin-top: 20px;
    font-size: 11px;
    line-height: 1.6363636364;
}

.Button {
    position: relative;
    padding: 15px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #001e62;
    text-align: center;
    border-radius: 9999px;
}

.Button:not(.Button--dark):not(.Button--white) {
    box-shadow: inset 0 0 0 35px #40c3c3;
    transition: box-shadow 0.3s, transform 0.3s;
    transform: scale3d(1, 1, 1);
    will-change: transform;
}

@media (hover: hover) {
    .Button:not(.Button--dark):not(.Button--white):hover {
        color: #40c3c3;
        box-shadow: inset 0 0 0 2px #40c3c3;
        transform: scale3d(1.1, 1.1, 1);
    }
}

.Button.Button--dark {
    color: #40c3c3;
    box-shadow: inset 0 0 0 35px #001e62;
    transition: box-shadow 0.3s, transform 0.3s;
    transform: scale3d(1, 1, 1);
    will-change: transform;
}

@media (hover: hover) {
    .Button.Button--dark:hover {
        color: #001e62;
        box-shadow: inset 0 0 0 2px #001e62;
        transform: scale3d(1.1, 1.1, 1);
    }
}

.Button.Button--white {
    color: #001e62;
    box-shadow: inset 0 0 0 35px #fff;
    transition: box-shadow 0.3s, transform 0.3s;
    transform: scale3d(1, 1, 1);
    will-change: transform;
}

@media (hover: hover) {
    .Button.Button--white:hover {
        color: #fff;
        box-shadow: inset 0 0 0 2px #fff;
        transform: scale3d(1.1, 1.1, 1);
    }
}

.Button.Button--plus {
    padding-right: 38px;
}

.Button.Button--plus::before,
.Button.Button--plus::after {
    position: absolute;
    top: 50%;
    right: 16px;
    display: block;
    width: 8px;
    content: "";
    border-top: 1px solid currentColor;
}

.Button.Button--plus::before {
    transform: translateX(-50%) rotate(90deg);
}

.Button.Button--plus::after {
    transform: translateX(-50%);
}

.Button.Button--close {
    padding-right: 38px;
}

.Button.Button--close::before,
.Button.Button--close::after {
    position: absolute;
    top: 50%;
    right: 16px;
    display: block;
    width: 10px;
    content: "";
    border-top: 1px solid currentColor;
}

.Button.Button--close::before {
    transform: translateX(-50%) rotate(45deg);
}

.Button.Button--close::after {
    transform: translateX(-50%) rotate(-45deg);
}

.Button.Button--triangle {
    padding-right: 40px;
}

.Button.Button--triangle::after {
    position: absolute;
    top: 50%;
    right: 18px;
    display: block;
    content: "";
    transform: translateY(-50%);
}

@media screen and (min-width: 768.02px),
print {
    .Button.Button--triangle::after {
        border-top: 8px solid currentColor;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
    }
}

@media screen and (max-width: 768px) {
    .Button.Button--triangle::after {
        border-top: 6px solid currentColor;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
    .Hero .Button.Button--triangle {
        padding: 10px 24px 10px 16px;
        font-size: 12px;
    }
    .Hero .Button.Button--triangle::after {
        right: 12px;
    }
}

.Drawing {
    background-color: #000e2d;
}

.Drawing [data-drawing-container] {
    height: 100vh;
    overflow: hidden;
}

.Drawing__Inner {
    position: absolute;
}

@media screen and (min-width: 768.02px),
print {
    .Drawing__Inner {
        top: 50%;
        left: 0;
        max-width: 450px;
        transform: translateY(-50%);
    }
}

@media screen and (max-width: 768px) {
    .Drawing__Inner {
        top: 6%;
        left: 0;
        width: 100%;
    }
}

.Drawing__Heading {
    font-weight: 700;
    line-height: 1.4117647059;
}

@media screen and (min-width: 768.02px),
print {
    .Drawing__Heading {
        font-size: 34px;
    }
}

@media screen and (max-width: 768px) {
    .Drawing__Heading {
        font-size: 26px;
    }
}

.Drawing__Text {
    line-height: 1.875;
}

@media screen and (min-width: 768.02px),
print {
    .Drawing__Text {
        max-width: 380px;
        margin-top: 20px;
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .Drawing__Text {
        margin-top: 16px;
        font-size: 15px;
    }
    .Drawing__Text:lang(fr),
    .Drawing__Text:lang(de),
    .Drawing__Text:lang(es),
    .Drawing__Text:lang(pt),
    .Drawing__Text:lang(ru) {
        font-size: 13px;
        line-height: 1.7;
    }
}

[data-drawing] {
    opacity: 0;
}

@media screen and (max-width: 768px) {
    [data-drawing=heading-pc],
    [data-drawing=text-pc] {
        display: none;
    }
}

@media screen and (min-width: 768.02px),
print {
    [data-drawing=heading-sp],
    [data-drawing=text-sp] {
        display: none;
    }
}

[data-drawing=video] {
    position: absolute;
    z-index: -1;
}

@media screen and (min-width: 768.02px),
print {
    [data-drawing=video] {
        top: 50%;
        left: 66%;
        width: 90%;
        transform: translate(-50%, -50%);
    }
}

@media screen and (max-width: 768px) {
    [data-drawing=video] {
        bottom: 0;
        left: 50%;
        width: 100%;
        transform: translate(-50%);
    }
}

[data-drawing=flash] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
}

[data-drawing=body-wrapper] {
    position: absolute;
    transform: translate(-50%, -50%);
}

@media screen and (min-width: 768.02px),
print {
    [data-drawing=body-wrapper] {
        top: 50%;
        left: 69%;
        width: 28%;
    }
}

@media screen and (max-width: 768px) {
    [data-drawing=body-wrapper] {
        top: 70%;
        top: calc(70% - env(safe-area-inset-bottom));
        left: 50%;
        width: 70%;
        max-width: 300px;
    }
}

[data-drawing=body] {
    width: 100%;
}

[data-drawing=body] img {
    width: 100%;
}

[data-drawing=body-side] {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 30%;
    transform: translate(-50%, -50%);
}

[data-drawing=body-side] img {
    width: 100%;
}

[data-drawing=examples] {
    position: absolute;
    top: 50%;
    left: 53%;
    width: 67%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
    [data-drawing=examples] {
        max-width: 280px;
    }
}

[data-drawing=examples] ul {
    display: flex;
}

[data-drawing=examples] ul>li {
    flex-shrink: 0;
    width: 100%;
}

@media screen and (min-width: 768.02px),
print {
    [data-drawing=examples] ul>li:not(:first-child) {
        margin-left: 50%;
    }
}

@media screen and (max-width: 768px) {
    [data-drawing=examples] ul>li:not(:first-child) {
        margin-left: 32%;
    }
}

[data-drawing=examples] ul>li img {
    width: 100%;
}

[data-drawing=examples-rest] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.Emoji {
    position: relative;
    top: -0.1em;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.Feature {
    display: grid;
    align-content: start;
    justify-items: start;
}

.Feature.Feature--center {
    justify-items: center;
    text-align: center;
}

.FunMode__Scroll .Feature {
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Scroll .Feature {
        column-gap: 20px;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Scroll .Feature {
        column-gap: 10px;
    }
}

.Feature__New {
    display: inline-block;
    padding: 4px 8px;
    font-weight: 700;
    color: #001e62;
    background-color: #f266bf;
    border-radius: 2px;
    transform: skewY(-4deg);
}

@media screen and (min-width: 768.02px),
print {
    .Feature__New {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .Feature__New {
        font-size: 12px;
    }
}

.Feature__Head {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
}

.Feature__New+.Feature__Head {
    margin-top: 12px;
}

.Feature__Icon {
    display: inline-block;
    border-radius: 50%;
}

@media screen and (min-width: 768.02px),
print {
    .Feature__Icon {
        width: 56px;
        height: 56px;
    }
}

@media screen and (max-width: 768px) {
    .Feature__Icon {
        width: 44px;
        height: 44px;
    }
}

.Feature__Label {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    background-image: linear-gradient(to top, currentColor 0 1px, transparent 1px 5px, currentColor 5px 6px, transparent 6px);
}

@media screen and (min-width: 768.02px),
print {
    .Feature__Label {
        margin-left: 16px;
        font-size: 22px;
    }
}

@media screen and (max-width: 768px) {
    .Feature__Label {
        margin-left: 12px;
        font-size: 18px;
    }
}

.Feature__Icon+.Feature__Label {
    margin-left: 12px;
}

@media screen and (min-width: 768.02px),
print {
    .Feature.Feature--small .Feature__Label {
        font-size: 20px;
    }
}

@media screen and (max-width: 768px) {
    .Feature.Feature--small .Feature__Label {
        font-size: 18px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Feature.Feature--large .Feature__Label {
        font-size: 38px;
    }
}

@media screen and (max-width: 768px) {
    .Feature.Feature--large .Feature__Label {
        font-size: 26px;
    }
}

.Feature__Title {
    font-weight: 700;
    line-height: 1.5;
}

@media screen and (min-width: 768.02px),
print {
    .Feature__Title {
        font-size: 34px;
    }
}

@media screen and (max-width: 768px) {
    .Feature__Title {
        font-size: 26px;
    }
}

.Feature__Head+.Feature__Title {
    margin-top: 20px;
}

@media screen and (min-width: 768.02px),
print {
    .OtherFeatures .Feature__Title {
        margin-top: 30px;
        font-size: 26px;
    }
}

@media screen and (max-width: 768px) {
    .OtherFeatures .Feature__Title {
        font-size: 22px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Feature.Feature--small .Feature__Title {
        font-size: 25px;
    }
}

@media screen and (max-width: 768px) {
    .Feature.Feature--small .Feature__Title {
        font-size: 22px;
    }
}

.Feature__Text {
    line-height: 1.875;
    color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .Feature__Title+.Feature__Text {
        margin-top: 24px;
    }
}

@media screen and (max-width: 768px) {
    .Feature__Title+.Feature__Text {
        margin-top: 14px;
    }
}

.Feature__Notes {
    font-size: 13px;
    opacity: 0.6;
}

.Feature__Title+.Feature__Button {
    margin-top: 20px;
}

.Feature__Text+.Feature__Button {
    margin-top: 24px;
}

.FunMode {
    overflow: hidden;
    color: #001e62;
    background-color: #40c3c3;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode {
        padding-top: 6vh;
    }
}

@media screen and (max-width: 768px) {
    .FunMode {
        padding-top: 4vh;
    }
}

.FunMode__Grid {
    display: grid;
    grid-gap: 5px;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid {
        grid-template-rows: auto auto 80px auto;
        grid-template-columns: 4fr 5fr;
        padding-right: min(66px, 5%);
        padding-left: min(66px, 5%);
        margin-top: 190px;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid {
        padding-right: 10px;
        padding-left: 10px;
        margin-top: 48px;
    }
}

.FunMode__Grid__Image {
    position: relative;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__Image {
        grid-row: span 2;
    }
    .FunMode__Grid__Image img {
        position: absolute;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__Image {
        width: 100%;
    }
}

.FunMode__Grid__Image img {
    width: 100%;
}

.FunMode__Grid__MatchTest,
.FunMode__Grid__FramePrint,
.FunMode__Grid__Sketch,
.FunMode__Grid__CollagePrint {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.3);
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__MatchTest,
    .FunMode__Grid__FramePrint,
    .FunMode__Grid__Sketch,
    .FunMode__Grid__CollagePrint {
        padding: 40px 30px;
    }
}

.FunMode__Grid__MatchTest {
    display: flex;
    align-items: center;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__MatchTest {
        padding-top: 12%;
        padding-bottom: 12%;
        padding-left: 7%;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__MatchTest {
        padding-bottom: 150px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__MatchTest_Feature {
        max-width: 360px;
    }
}

.FunMode__Grid__MatchTest__Image01,
.FunMode__Grid__MatchTest__Image02,
.FunMode__Grid__MatchTest__Image03 {
    position: absolute;
    z-index: -1;
}

.FunMode__Grid__MatchTest__Image01 {
    top: 100%;
    left: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__MatchTest__Image01 {
        width: 60%;
        transform: translate(-73%, -64%);
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__MatchTest__Image01 {
        width: 270px;
        transform: translate(-64%, -67%);
    }
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__MatchTest__Image02 {
        right: 27%;
        bottom: -15%;
        width: 26%;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__MatchTest__Image02 {
        top: 95%;
        left: 7%;
        width: 180px;
        transform: translate(-50%, -50%);
    }
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__MatchTest__Image03 {
        top: -11%;
        right: -7%;
        width: 25%;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__MatchTest__Image03 {
        top: 8%;
        left: 100%;
        width: 180px;
        transform: translate(-50%, -50%);
    }
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__FramePrint {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: 2/span 2;
        grid-column: 2;
        align-items: center;
        padding-left: 7%;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__FramePrint {
        padding-bottom: 72%;
    }
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__FramePrint__Feature {
        padding-top: 12%;
        padding-right: 7%;
        padding-bottom: 16%;
    }
    .FunMode__Grid__FramePrint__Image {
        height: 100%;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__FramePrint__Image {
        position: absolute;
        bottom: 0%;
        left: 0%;
        width: 100%;
        transform: translateY(34%);
    }
}

.FunMode__Grid__FramePrint__Image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: left;
    object-position: left;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__Sketch {
        grid-row: span 2;
        grid-column: 1;
        padding: 6%;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__Sketch {
        padding-bottom: 180px;
    }
}

.FunMode__Grid__Sketch__Image {
    position: absolute;
    z-index: -1;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__Sketch__Image {
        top: 100%;
        left: 100%;
        width: 70%;
        transform: translate(-105%, -80%);
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__Sketch__Image {
        top: 100%;
        left: 50%;
        width: 300px;
        transform: translate(-40%, -86%);
    }
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__CollagePrint {
        padding-top: 4%;
        padding-right: 6%;
        padding-bottom: 31%;
        padding-left: 6%;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__CollagePrint {
        padding-bottom: 190px;
    }
}

.FunMode__Grid__CollagePrint__Image {
    position: absolute;
    left: 50%;
    z-index: -1;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Grid__CollagePrint__Image {
        top: 100%;
        width: 70%;
        transform: translate(-50%, -65%);
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Grid__CollagePrint__Image {
        bottom: 0;
        width: 315px;
        transform: translate(-50%, 15%);
    }
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Scroll {
        padding-top: 6vh;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Scroll {
        padding-top: 4vh;
    }
}

.FunMode__Scroll__Wrapper {
    position: relative;
    width: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Scroll__Wrapper {
        margin-top: 40px;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Scroll__Wrapper {
        margin-top: 16px;
    }
}

.FunMode__Scroll__List {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-gap: 10%;
    width: 360%;
    padding-right: 5%;
}

.FunMode__Card {
    display: grid;
    background-color: #001e62;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Card {
        grid-template-columns: 3fr 4fr;
        grid-auto-flow: column;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Card {
        grid-template-rows: auto 1fr;
    }
}

.FunMode__Card__Main {
    background-color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Card__Main {
        grid-row: 1;
        grid-column: 1;
        padding: 10.5% 12%;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Card__Main {
        padding: 8% 9%;
    }
}

.FunMode__Card__Title {
    font-weight: 700;
    line-height: 1.4;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Card__Title {
        font-size: 26px;
    }
    .FunMode__Card__Title:lang(ru),
    .FunMode__Card__Title:lang(fr),
    .FunMode__Card__Title:lang(de) {
        font-size: 24px;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Card__Title {
        font-size: 22px;
    }
    .FunMode__Card__Title:lang(ru),
    .FunMode__Card__Title:lang(fr),
    .FunMode__Card__Title:lang(de) {
        font-size: 17px;
    }
    .FunMode__Card__Title:lang(ko),
    .FunMode__Card__Title:lang(es),
    .FunMode__Card__Title:lang(pt) {
        font-size: 20px;
    }
}

.FunMode__Card__Text {
    margin-top: 5%;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__Card__Text {
        font-size: 16px;
        line-height: 1.8;
    }
    .FunMode__Card__Text:lang(ru),
    .FunMode__Card__Text:lang(fr),
    .FunMode__Card__Text:lang(de) {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__Card__Text {
        font-size: 14px;
        line-height: 1.7;
    }
    .FunMode__Card__Text:lang(ru),
    .FunMode__Card__Text:lang(fr),
    .FunMode__Card__Text:lang(de) {
        font-size: 12px;
    }
    .FunMode__Card__Text:lang(ko),
    .FunMode__Card__Text:lang(es),
    .FunMode__Card__Text:lang(pt) {
        font-size: 12px;
    }
}

.FunMode__Card__Button {
    margin-top: 6%;
}

.FunMode__ImageFrame {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 66.6666666667%;
    background-color: #001e62;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__ImageFrame {
        grid-row: 1;
        grid-column: 2;
        align-self: center;
    }
}

.FunMode__ImageFrame__Inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[data-air-1] {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

[data-air-1] img {
    width: 100%;
}

[data-air-1=body] {
    top: 68%;
    left: 26%;
    width: 76%;
}

[data-air-1=button] {
    top: 24%;
    left: 15%;
    width: 18%;
}

[data-air-1=press] {
    top: 18%;
    left: 44%;
    width: 13%;
}

[data-air-1=line] {
    top: 23%;
    left: 87%;
    width: 49%;
}

[data-air-1=effects] {
    top: 75%;
    left: 77%;
    width: 49%;
}

[data-air-1=shake] {
    top: 56%;
    left: 49%;
    width: 27.5%;
}

[data-air-1=example] {
    top: 100%;
    left: 100%;
}

@media screen and (min-width: 768.02px),
print {
    [data-air-1=example] {
        width: 32.5%;
        transform: translate(-70%, -80%);
    }
}

@media screen and (max-width: 768px) {
    [data-air-1=example] {
        width: 28.5%;
        transform: translate(-80%, -75%);
    }
}

[data-air-2] {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

[data-air-2] img {
    width: 100%;
}

[data-air-2=hand] {
    top: 138%;
    left: 9%;
    width: 71%;
}

[data-air-2=phone] {
    top: 67%;
    left: 50%;
    width: 37%;
}

[data-air-2=tap] {
    top: 48%;
    left: 22%;
    width: 12%;
}

[data-air-2=draw] {
    top: 29%;
    left: 79%;
    width: 12%;
}

[data-air-2=example] {
    top: 100%;
    left: 100%;
}

@media screen and (min-width: 768.02px),
print {
    [data-air-2=example] {
        width: 32.5%;
        transform: translate(-70%, -80%);
    }
}

@media screen and (max-width: 768px) {
    [data-air-2=example] {
        width: 28.5%;
        transform: translate(-80%, -75%);
    }
}

[data-air-3] {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

[data-air-3] img {
    width: 100%;
}

[data-air-3=photo] {
    top: 86%;
    left: 31%;
    width: 25%;
}

[data-air-3=scan] {
    top: 20%;
    left: 72%;
    width: 13.5%;
}

[data-air-3=scanning] {
    top: 62%;
    left: 78%;
    width: 68%;
}

[data-air-3=phone] {
    top: 100%;
    left: 100%;
}

@media screen and (min-width: 768.02px),
print {
    [data-air-3=phone] {
        width: 32.5%;
        transform: translate(-65%, -84%);
    }
}

@media screen and (max-width: 768px) {
    [data-air-3=phone] {
        width: 28.5%;
        transform: translate(-80%, -80%);
    }
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__PhotoExamples {
        margin-top: 130px;
        margin-bottom: 140px;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__PhotoExamples {
        margin-top: 80px;
        margin-bottom: 70px;
    }
}

.FunMode__PhotoExamples__Loop {
    --item-margin: 0%;
    display: flex;
    animation: marquee 30s linear infinite;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__PhotoExamples__Loop {
        --item-width: 220%;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__PhotoExamples__Loop {
        --item-width: 1800px;
    }
}

.FunMode__PhotoExamples__Loop.FunMode__PhotoExamples__Loop--reverse {
    animation-direction: reverse;
}

@keyframes marquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(calc(-1 * (var(--item-width) + var(--item-margin))), 0, 0);
    }
}

.FunMode__PhotoExamples__Loop>li {
    flex-shrink: 0;
    width: var(--item-width);
    margin-left: var(--item-margin);
}

.FunMode__PhotoExamples__Loop>li img {
    width: 100%;
    height: auto;
}

.FunMode__PhotoExamples__Text {
    padding-right: 16px;
    padding-left: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    text-align: center;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__PhotoExamples__Text {
        margin-top: -14px;
        margin-bottom: 14px;
        font-size: 100px;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__PhotoExamples__Text {
        margin-top: 4px;
        margin-bottom: 11px;
        font-size: 50px;
    }
    .FunMode__PhotoExamples__Text:lang(ru) {
        font-size: 45px;
    }
}

.FunMode__PhotoExamples__Text:lang(ja) {
    margin-left: 0.5em;
    line-height: 1.2;
}

@media screen and (min-width: 768.02px),
print {
    .FunMode__PhotoExamples__Text:lang(ja) {
        margin-top: -7px;
        font-size: 64px;
    }
}

@media screen and (max-width: 768px) {
    .FunMode__PhotoExamples__Text:lang(ja) {
        font-size: 34px;
    }
}

.FunMode__PhotoExamples__Punctuation {
    margin-right: -0.25em;
}

.HeadingBlock {
    position: relative;
    z-index: 0;
    padding-right: 5%;
    padding-left: 5%;
    overflow: hidden;
    font-weight: 700;
    text-align: center;
}

@media screen and (min-width: 768.02px),
print {
    .HeadingBlock {
        padding-top: 17%;
        padding-bottom: 17%;
        font-size: 100px;
    }
}

@media screen and (max-width: 768px) {
    .HeadingBlock {
        display: grid;
        align-items: center;
        height: 430px;
        font-size: 50px;
    }
}

.HeadingBlock__Image {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: -1;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
}

.Hero {
    position: relative;
    z-index: 0;
    height: 80vh;
    overflow: hidden;
    background-color: #001e62;
}

@media screen and (min-width: 768.02px),
print {
    .Hero {
        min-height: 580px;
        max-height: 700px;
    }
}

@media screen and (max-width: 768px) {
    .Hero {
        min-height: 500px;
        max-height: 540px;
    }
}

.Hero [data-hero] {
    opacity: 0;
}

.Hero__LanguageSwitcher {
    position: absolute;
}

@media screen and (min-width: 768.02px),
print {
    .Hero__LanguageSwitcher {
        top: 20px;
        right: 16px;
    }
}

@media screen and (max-width: 768px) {
    .Hero__LanguageSwitcher {
        top: 16px;
        left: 5%;
    }
}

.Hero__OuterWidth {
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 768.02px),
print {
    .Hero__OuterWidth {
        width: calc(100% - 60px);
        max-width: 1090px;
        max-width: clamp(1090px, 80vw, 1300px);
    }
}

.Hero__Width {
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Width {
        max-width: 1300px;
    }
}

@media screen and (max-width: 768px) {
    .Hero__Width {
        max-width: 400px;
    }
}

.Hero__Inner {
    position: relative;
    display: grid;
    align-content: center;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 768px) {
    .Hero__Inner:lang(ja) {
        padding-top: 28%;
    }
    .Hero__Inner:not(:lang(ja)) {
        padding-top: 26%;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Inner:lang(en) {
        padding-bottom: 2%;
    }
    .Hero__Inner:lang(ko) {
        padding-bottom: 1%;
    }
    .Hero__Inner:lang(zh) {
        padding-bottom: 2%;
    }
}

.Hero__Copy {
    font-weight: 700;
}

@media screen and (max-width: 768px) {
    .Hero__Copy {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        min-height: 140px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(ja) {
        padding-left: 56%;
        font-size: 55px;
        font-size: min(55px, 5vw);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(ja) {
        padding-left: 45%;
        font-size: 30px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(en) {
        padding-left: 51%;
        font-size: 70px;
        font-size: min(70px, 7vw);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(en) {
        padding-left: 44%;
        font-size: 39px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(fr) {
        padding-left: 56%;
        font-size: 67px;
        font-size: min(67px, 5vw);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(fr) {
        padding-left: 44%;
        font-size: 32px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(de) {
        padding-left: 56%;
        font-size: 66px;
        font-size: min(66px, 5vw);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(de) {
        padding-left: 48%;
        font-size: 32px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(ru) {
        padding-left: 56%;
        font-size: 67px;
        font-size: min(67px, 5vw);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(ru) {
        padding-left: 44%;
        font-size: 30px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(pt) {
        padding-left: 56%;
        font-size: 67px;
        font-size: min(67px, 5vw);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(pt) {
        padding-left: 44%;
        font-size: 30px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(es) {
        padding-left: 56%;
        font-size: 67px;
        font-size: min(67px, 5vw);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(es) {
        padding-left: 44%;
        font-size: 29px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(ko) {
        padding-left: 56%;
        font-size: 62px;
        font-size: min(62px, 5vw);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(ko) {
        padding-left: 54%;
        font-size: 32px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(zh) {
        padding-left: 56%;
        font-size: 64px;
        font-size: min(64px, 5vw);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(zh) {
        padding-left: 48%;
        font-size: 32px;
    }
}

.Hero__Copy:lang(ja),
.Hero__Copy:lang(zh),
.Hero__Copy:lang(ko) {
    text-align: left;
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:lang(ja),
    .Hero__Copy:lang(zh),
    .Hero__Copy:lang(ko) {
        display: flex;
        flex-wrap: wrap;
        margin-right: -50px;
        line-height: 1.35;
        letter-spacing: 0.09em;
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:lang(ja),
    .Hero__Copy:lang(zh),
    .Hero__Copy:lang(ko) {
        line-height: 1.5;
    }
}

.Hero__Copy:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)) {
    word-break: break-word;
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Copy:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)) {
        line-height: 1.1;
        letter-spacing: 0.02em;
    }
}

@media screen and (max-width: 768px) {
    .Hero__Copy:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)) {
        line-height: 1.2;
        letter-spacing: 0.05em;
    }
}

.Hero__Copy__Punctuation {
    margin-right: -0.3em;
}

@media screen and (max-width: 768px) {
    .Hero__Copy__IsInTheAir {
        display: block;
        padding-left: 44px;
    }
}

.Hero__Copy__Small {
    font-size: 80%;
}

.Hero__Spacer {
    visibility: hidden;
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Spacer {
        min-height: 60px;
        padding-top: 8.5%;
    }
    .Hero__Spacer:lang(en),
    .Hero__Spacer:lang(fr),
    .Hero__Spacer:lang(es) {
        padding-top: 7%;
    }
    .Hero__Spacer:lang(ko),
    .Hero__Spacer:lang(zh) {
        padding-top: 7.5%;
    }
}

@media screen and (max-width: 768px) {
    .Hero__Spacer {
        min-height: 30px;
        padding-top: 33%;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Contents {
        padding-left: 55%;
    }
    .Hero__Contents:lang(en) {
        padding-left: 56.7%;
    }
}

@media screen and (max-width: 768px) {
    .Hero__Contents {
        padding-left: 57%;
    }
    .Hero__Contents:not(:lang(ja)) {
        padding-left: 56%;
    }
}

.Hero__List {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
    .Hero__List {
        display: none;
    }
}

.Hero__List>li {
    position: relative;
    padding-left: 18px;
}

.Hero__List>li:not(:first-child) {
    margin-top: 4px;
}

.Hero__List>li::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    display: block;
    width: 6px;
    height: 6px;
    content: "";
    background-color: #40c3c3;
    border-radius: 50%;
}

.Hero__Image {
    position: absolute;
    z-index: -1;
    width: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .Hero__Image {
        left: -2vw;
    }
    .Hero__Image:lang(ja) {
        top: 29%;
        transform: translate(0%, -41%);
    }
    .Hero__Image:not(:lang(ja)) {
        top: 39%;
        transform: translate(0%, -50%);
    }
}

@media screen and (max-width: 768px) {
    .Hero__Image {
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.Hero__Image img {
    width: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .Hero__NameLogo:lang(ja) {
        max-width: 240px;
        margin-left: 4px;
    }
}

@media screen and (max-width: 768px) {
    .Hero__NameLogo:lang(ja) {
        max-width: 130px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Hero__NameLogo:not(:lang(ja)) {
        max-width: 206px;
    }
}

@media screen and (max-width: 768px) {
    .Hero__NameLogo:not(:lang(ja)) {
        max-width: 110px;
    }
}

.Hero__NameLogo img {
    width: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .Hero__ScrollDown {
        position: absolute;
        bottom: 36px;
        left: 100%;
        z-index: 0;
        display: grid;
        place-items: center;
        width: 100px;
        height: 100px;
        font-size: 28px;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 768px) {
    .Hero__ScrollDown {
        display: none;
    }
}

.Hero__ScrollDown__Text {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    animation: rotation 10s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (hover: hover) {
    a:hover .Hero__ScrollDown__Text,
    button:hover .Hero__ScrollDown__Text {
        animation-duration: 3s;
    }
}

.Hero__ScrollDown__Icon {
    width: 28px;
    height: 28px;
}

.Information {
    background-color: #001649;
}

.Information__Inner {
    position: relative;
    display: grid;
    padding-top: 32px;
    padding-bottom: 28px;
}

@media screen and (min-width: 768.02px),
print {
    .Information__Inner {
        grid-template-columns: auto 1fr;
        grid-auto-flow: column;
        column-gap: 5%;
    }
}

@media screen and (max-width: 768px) {
    .Information__Inner {
        row-gap: 20px;
    }
}

.Information__Label {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.Information__List {
    overflow: hidden;
}

.Information__List[aria-hidden=true] {
    height: 0;
}

@media screen and (min-width: 768.02px),
print {
    .Information__List>li {
        display: grid;
        grid-auto-flow: column;
        align-items: baseline;
        justify-content: start;
    }
}

.Information__List>li:not(:first-child),
.Information__List+.Information__List>li:first-child {
    margin-top: 20px;
}

@media screen and (min-width: 768.02px),
print {
    .Information__Date {
        /* min-width: 96px; */
        font-size: 16px;
        padding-right: 15px;
    }
}

@media screen and (max-width: 768px) {
    .Information__Date {
        min-width: 72px;
        font-size: 14px;
    }
}

.Information__Text {
    line-height: 1.875;
}

@media screen and (min-width: 768.02px),
print {
    .Information__Text {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .Information__Text {
        display: block;
        margin-top: 4px;
        font-size: 14px;
    }
}

.Information__Text a[href] {
    background-image: linear-gradient(to top, #40c3c3 0 1px, transparent 1px 100%);
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .Information__Text a[href]:hover {
        opacity: 0.7;
    }
}

.Information__New {
    color: #f266bf;
}

@media screen and (min-width: 768.02px),
print {
    .Information__New {
        margin-right: 16px;
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .Information__New {
        margin-left: 16px;
        font-size: 14px;
    }
}

.Information__Button {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
}

@media screen and (min-width: 768.02px),
print {
    .Information__Button {
        width: 48px;
        height: 48px;
    }
}

@media screen and (max-width: 768px) {
    .Information__Button {
        width: 40px;
        height: 40px;
    }
}

.Information__Button::before,
.Information__Button::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 14px;
    height: 2px;
    content: "";
    background-color: #001e62;
}

.Information__Button::before {
    transform: translate(-50%, -50%);
}

.Information__Button::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.Information__Button[aria-expanded=true]::after {
    transform: translate(-50%, -50%);
}

.Information__Button__Circle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #40c3c3;
    border-radius: 50%;
    transition: transform 0.3s;
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
}

@media (hover: hover) {
    a:hover .Information__Button__Circle,
    button:hover .Information__Button__Circle {
        transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1);
    }
}

.Intro {
    overflow: hidden;
}

@media screen and (min-width: 768.02px),
print {
    .Intro {
        padding-top: 120px;
    }
}

@media screen and (max-width: 768px) {
    .Intro {
        padding-top: 60px;
    }
}

.Intro__Heading {
    font-weight: 700;
    line-height: 1.3043478261;
}

@media screen and (min-width: 768.02px),
print {
    .Intro__Heading {
        font-size: 46px;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .Intro__Heading {
        font-size: 28px;
    }
}

.Intro__Video {
    margin-top: 40px;
}

.LanguageList {
    min-width: 185px;
    padding-top: 16px;
    padding-bottom: 16px;
    overflow-y: auto;
    font-size: 14px;
    background-color: #fff;
}

.LanguageList>li>a {
    position: relative;
    display: block;
    padding: 13px 30px;
}

.LanguageList>li>a::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #000;
    opacity: 0;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .LanguageList>li>a:hover::before {
        opacity: 0.05;
    }
}

.LocalNavPc {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    color: #001e62;
    background-color: #40c3c3;
}

@media screen and (max-width: 768px) {
    .LocalNavPc {
        display: none;
    }
}

.LocalNavPc__Inner {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    min-height: 56px;
}

.LocalNavPc.LocalNavPc--sub .LocalNavPc__Inner {
    padding-right: clamp(0px, (1500px - 100vw) / 2, 120px);
}

.LocalNavPc__List {
    display: grid;
    grid-auto-flow: column;
    column-gap: 4px;
    align-items: center;
    justify-self: center;
    width: 100%;
    max-width: 860px;
    height: 100%;
}

.LocalNavPc__List li {
    height: 100%;
}

.LocalNavPc__List a {
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
    padding-right: 3%;
    padding-left: 3%;
    font-size: 14px;
    line-height: 1.25;
}

.LocalNavPc__List a::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #000;
    opacity: 0;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .LocalNavPc__List a:hover::before {
        opacity: 0.05;
    }
}

.LocalNavPc__Language {
    position: absolute;
    top: 50%;
    right: 20px;
    height: 100%;
    padding: 15px 40px 15px 24px;
    font-size: 14px;
    font-weight: 700;
    transform: translateY(-50%);
}

.LocalNavPc__Language::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #000;
    opacity: 0;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .LocalNavPc__Language:hover::before {
        opacity: 0.05;
    }
}

.LocalNavPc__Language::after {
    position: absolute;
    top: 50%;
    right: 18px;
    display: block;
    content: "";
    transform: translateY(-50%);
}

@media screen and (min-width: 768.02px),
print {
    .LocalNavPc__Language::after {
        border-top: 8px solid currentColor;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
    }
}

@media screen and (max-width: 768px) {
    .LocalNavPc__Language::after {
        border-top: 6px solid currentColor;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
}

.LocalNavSp {
    position: relative;
    z-index: 10010;
}

@media screen and (min-width: 768.02px),
print {
    .LocalNavSp {
        display: none;
    }
}

[data-menu-button] {
    opacity: 0;
}

.LocalNavSp__MenuButton {
    position: fixed;
    bottom: 40px;
    left: -8px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: -1.414px 1.414px 6px 0px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .LocalNavSp__MenuButton:hover {
        opacity: 0.7;
    }
}

.LocalNavSp__MenuButton.LocalNavSp__MenuButton--open {
    background-color: #fff;
}

.LocalNavSp__MenuButton.LocalNavSp__MenuButton--close {
    background-color: rgba(0, 0, 0, 0.3);
}

.LocalNavSp__LineOpen {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 18px;
    height: 2px;
    background-color: #001e62;
}

.LocalNavSp__LineOpen:nth-child(1) {
    transform: translate(-50%, -50%) translateY(6px);
}

.LocalNavSp__LineOpen:nth-child(2) {
    transform: translate(-50%, -50%);
}

.LocalNavSp__LineOpen:nth-child(3) {
    transform: translate(-50%, -50%) translateY(-6px);
}

.LocalNavSp__LineClose {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 20px;
    height: 1px;
    background-color: #fff;
}

.LocalNavSp__LineClose:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.LocalNavSp__LineClose:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.LocalNavSp__Modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #001e62;
}

.LocalNavSp__Modal:not(.is-open) {
    display: none;
}

.LocalNavSp__Dialog {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #40c3c3;
}

[aria-hidden=false] .LocalNavSp__Dialog {
    animation: nav-dialog-show 0.3s ease-in;
}

[aria-hidden=true] .LocalNavSp__Dialog {
    animation: nav-dialog-hide 0.3s ease-in;
}

@keyframes nav-dialog-show {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes nav-dialog-hide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.LocalNavSp__List {
    display: grid;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.LocalNavSp__List button {
    margin-bottom: 20px;
}

.LocalNavSp__List a {
    display: block;
    padding: 20px;
    font-size: 16px;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .LocalNavSp__List a:hover {
        opacity: 0.7;
    }
}

.ModalSimple {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: scroll;
}

.ModalSimple[aria-hidden=true] {
    display: none;
}

.ModalSimple__Background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: #000;
    opacity: 0.5;
}

.ModalSimple.ModalSimple--video .ModalSimple__Background {
    opacity: 1;
}

.ModalSimple__Dialog {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    max-height: 100%;
    color: #001e62;
}

.ModalSimple.ModalSimple--video .ModalSimple__Dialog {
    width: 100%;
    max-width: 900px;
}

.ModalSimple__Close {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    margin-left: auto;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .ModalSimple__Close:hover {
        opacity: 0.7;
    }
}

@media screen and (min-width: 768.02px),
print {
    .ModalSimple__Close {
        margin-bottom: 12px;
    }
}

@media screen and (max-width: 768px) {
    .ModalSimple__Close {
        margin-bottom: 6px;
    }
}

.ModalSimple__Close::before,
.ModalSimple__Close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 36px;
    height: 2px;
    content: "";
    background-color: #fff;
}

.ModalSimple__Close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ModalSimple__Close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ModalSimple__List {
    min-width: 185px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 14px;
    background-color: #fff;
}

.ModalSimple__List>li>a {
    display: block;
    padding: 13px 30px;
}

.ModalSimple__Content {
    overflow-y: auto;
}

.ModalSlide {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10030;
    overflow-x: hidden;
    color: #40c3c3;
}

.ModalSlide:not(.is-open) {
    display: none;
}

.ModalSlide__Background {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

.ModalSlide__Dialog {
    position: absolute;
    z-index: 0;
    max-width: 1140px;
    max-height: 100%;
    overflow-y: auto;
    background-color: #001e62;
}

@media screen and (min-width: 768.02px),
print {
    .ModalSlide__Dialog {
        top: 0;
        right: 0;
        width: 95%;
        height: 100%;
        padding: 100px 80px;
    }
}

@media screen and (max-width: 768px) {
    .ModalSlide__Dialog {
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        padding: 80px 5%;
    }
}

.ModalSlide[aria-hidden=false] .ModalSlide__Dialog {
    animation: dialog-show 0.3s ease-in;
}

.ModalSlide[aria-hidden=true] .ModalSlide__Dialog {
    animation: dialog-hide 0.3s ease-in;
}

@keyframes dialog-show {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes dialog-hide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.ModalSlide__Dialog h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    margin-bottom: 34px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    background-image: linear-gradient(to top, currentColor 0 1px, transparent 1px 5px, currentColor 5px 6px, transparent 6px);
}

.ModalSlide__Close {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    margin-left: auto;
    color: #001e62;
}

@media screen and (min-width: 768.02px),
print {
    .ModalSlide__Close {
        width: 62px;
        height: 62px;
        margin-top: -62px;
        transform: translate(50%, -100%);
    }
}

@media screen and (max-width: 768px) {
    .ModalSlide__Close {
        width: 50px;
        height: 50px;
        margin-top: -50px;
        transform: translate(30%, -120%);
    }
}

.ModalSlide__Close::before,
.ModalSlide__Close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 20px;
    height: 2px;
    content: "";
    background-color: currentColor;
}

.ModalSlide__Close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ModalSlide__Close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ModalSlide__Close__Circle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #40c3c3;
    border-radius: 50%;
    box-shadow: -1.414px 1.414px 6px 0px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
    transform: scale3d(1, 1, 1);
}

@media (hover: hover) {
    a:hover .ModalSlide__Close__Circle,
    button:hover .ModalSlide__Close__Circle {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@media screen and (min-width: 768.02px),
print {
    .ModalSlide__BottomClose {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .ModalSlide__BottomClose {
        display: grid;
        max-width: 132px;
        margin-top: 70px;
        margin-right: auto;
        margin-left: auto;
    }
}

.ModalSlide__MathTestImage {
    display: grid;
    text-align: center;
}

@media screen and (min-width: 768.02px),
print {
    .ModalSlide__MathTestImage {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 48px;
        align-items: start;
    }
}

@media screen and (max-width: 768px) {
    .ModalSlide__MathTestImage {
        row-gap: 42px;
        justify-content: center;
    }
}

@media screen and (min-width: 768.02px),
print {
    .ModalSlide__MathTestImage picture img {
        width: 75%;
        max-width: 180px;
    }
}

@media screen and (max-width: 768px) {
    .ModalSlide__MathTestImage picture img {
        width: 50%;
        max-width: 480px;
    }
}

.ModalSlide__MathTestImage h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 2.4444444444;
}

@media screen and (min-width: 768.02px),
print {
    .ModalSlide__MathTestImage h3 {
        margin-top: 10px;
    }
}

@media screen and (max-width: 768px) {
    .ModalSlide__MathTestImage h3 {
        margin-top: 8px;
    }
}

.ModalSlide__MathTestImage p {
    font-size: 14px;
    line-height: 1.8571428571;
    color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .OtherFeatures {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

@media screen and (max-width: 768px) {
    .OtherFeatures {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.OtherFeatures__Main {
    display: grid;
}

@media screen and (min-width: 768.02px),
print {
    .OtherFeatures__Main {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: column;
        align-items: center;
    }
}

@media screen and (max-width: 768px) {
    .OtherFeatures__Main {
        row-gap: 60px;
    }
}

.OtherFeatures__Example {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    justify-items: center;
    justify-self: center;
    color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .OtherFeatures__Example {
        row-gap: 20px;
        column-gap: 28px;
        width: 84%;
        font-size: 18px;
    }
}

@media screen and (max-width: 768px) {
    .OtherFeatures__Example {
        row-gap: 12px;
        column-gap: 20px;
        font-size: 14px;
    }
}

.OtherFeatures__Example em {
    font-weight: 700;
}

.OtherFeatures__Example img {
    width: 100%;
}

.OtherFeatures__Box {
    position: relative;
    overflow: hidden;
    background-color: #001649;
}

@media screen and (min-width: 768.02px),
print {
    .OtherFeatures__Box {
        padding: 56px;
        margin-top: 120px;
    }
}

@media screen and (max-width: 768px) {
    .OtherFeatures__Box {
        padding: 36px 20px 180px 20px;
        margin-top: 70px;
    }
}

.OtherFeatures__Box__Title {
    font-weight: 700;
    line-height: 1.5;
}

@media screen and (min-width: 768.02px),
print {
    .OtherFeatures__Box__Title {
        max-width: 390px;
        font-size: 26px;
    }
}

@media screen and (max-width: 768px) {
    .OtherFeatures__Box__Title {
        font-size: 22px;
    }
}

.OtherFeatures__Box__Text {
    line-height: 1.875;
    color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .OtherFeatures__Box__Text {
        max-width: 390px;
        margin-top: 18px;
    }
}

@media screen and (max-width: 768px) {
    .OtherFeatures__Box__Text {
        margin-top: 12px;
    }
}

.OtherFeatures__Box__Image {
    position: absolute;
}

@media screen and (min-width: 768.02px),
print {
    .OtherFeatures__Box__Image {
        right: 8.4%;
        bottom: -32px;
        width: 46%;
        max-width: 536px;
    }
}

@media screen and (max-width: 768px) {
    .OtherFeatures__Box__Image {
        bottom: -10px;
        left: 52%;
        width: 100%;
        max-width: 330px;
        transform: translateX(-60%);
    }
}

.PrintMode {
    overflow: hidden;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode {
        padding-top: 110px;
        padding-bottom: 110px;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode {
        padding-top: 80px;
        padding-bottom: 100px;
    }
}

.PrintMode__SimplePrint {
    position: relative;
    z-index: 0;
    display: grid;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__SimplePrint {
        grid-template-columns: 28% 1fr 30%;
        justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__SimplePrint {
        row-gap: 40px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__SimplePrint__Feature {
        grid-row: 1;
        grid-column: 2;
        justify-self: center;
        max-width: 380px;
        padding-top: 23%;
    }
}

.PrintMode__SimplePrint__Image {
    position: relative;
    width: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__SimplePrint__Image {
        z-index: -1;
        grid-row: 1;
        grid-column: 1/span 3;
        padding-top: 56%;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__SimplePrint__Image {
        padding-top: 80%;
    }
}

.PrintMode__SimplePrint__Image [data-simple-print] {
    position: absolute;
    opacity: 0;
}

.PrintMode__SimplePrint__Image [data-simple-print] img {
    width: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__SimplePrint__Image [data-simple-print="01"] {
        top: 8%;
        left: 4%;
        width: 25%;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__SimplePrint__Image [data-simple-print="01"] {
        top: 6%;
        left: 4%;
        width: 38%;
    }
}

.PrintMode__SimplePrint__Image [data-simple-print="02"] {
    top: 0%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to right, #000 0% 50%, transparent 50% 100%);
    mask-image: linear-gradient(to right, #000 0% 50%, transparent 50% 100%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100%;
    mask-position: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__SimplePrint__Image [data-simple-print="02"] {
        left: 50.5%;
        width: 61%;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__SimplePrint__Image [data-simple-print="02"] {
        left: 45.5%;
        width: 35%;
    }
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__SimplePrint__Image [data-simple-print="03"] {
        top: 24%;
        right: 0%;
        width: 31%;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__SimplePrint__Image [data-simple-print="03"] {
        top: 16%;
        right: 4%;
        width: 55%;
    }
}

.PrintMode__SimplePrint__Image [data-simple-print="03"] [data-simple-print="04"] {
    top: -19%;
    left: 41%;
    width: 67%;
    -webkit-mask-image: linear-gradient(208deg, black 51%, transparent 53%);
    mask-image: linear-gradient(208deg, black 51%, transparent 53%);
}

.PrintMode__SnsShare {
    display: grid;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__SnsShare {
        grid-template-columns: 45% 40%;
        column-gap: 70px;
        align-items: center;
        margin-top: 40px;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__SnsShare {
        row-gap: 32px;
        margin-top: 84px;
    }
}

.PrintMode__SnsShare__Image {
    position: relative;
    z-index: 0;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__SnsShare__Image {
        grid-row: 1;
        grid-column: 1;
        width: 100%;
        padding-top: 100%;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__SnsShare__Image {
        width: 88%;
        padding-top: 88%;
        margin-right: auto;
        margin-left: auto;
    }
}

.PrintMode__SnsShare__Image [data-sns-share] img {
    width: 100%;
}

.PrintMode__SnsShare__Image [data-sns-share="01"] {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: 47%;
    opacity: 0;
    transform: translateY(-50%);
}

.PrintMode__SnsShare__Image [data-sns-share=grid] {
    position: absolute;
    top: 50%;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1px;
    width: 60%;
    transform: translateY(-50%);
}

.PrintMode__SnsShare__Image [data-sns-share=tile] {
    opacity: 0;
}

.PrintMode__InstaxCamera {
    display: grid;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__InstaxCamera {
        grid-template-columns: 1fr 47%;
        column-gap: 40px;
        align-items: center;
        margin-top: 120px;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__InstaxCamera {
        row-gap: 16px;
        margin-top: 100px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__InstaxCamera__Feature {
        grid-row: 1;
        grid-column: 1;
        max-width: 600px;
        padding-bottom: 10%;
    }
}

.PrintMode__InstaxCamera__Image {
    position: relative;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__InstaxCamera__Image {
        grid-row: 1;
        grid-column: 2;
        width: 100%;
        padding-top: 80%;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__InstaxCamera__Image {
        justify-self: center;
        width: 92%;
        padding-top: 64.4%;
    }
}

.PrintMode__InstaxCamera__Image [data-instax-camera] {
    position: absolute;
}

.PrintMode__InstaxCamera__Image [data-instax-camera] img {
    width: 100%;
}

.PrintMode__InstaxCamera__Image [data-instax-camera=body] {
    bottom: 0%;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__InstaxCamera__Image [data-instax-camera=body] {
        left: 0%;
        width: 45%;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__InstaxCamera__Image [data-instax-camera=body] {
        left: 10%;
        width: 35%;
    }
}

.PrintMode__InstaxCamera__Image [data-instax-camera=front-arrow],
.PrintMode__InstaxCamera__Image [data-instax-camera=back-arrow] {
    top: -10%;
    left: 22%;
    width: 66%;
}

.PrintMode__InstaxCamera__Image [data-instax-camera=hand] {
    bottom: 0;
    z-index: 0;
}

@media screen and (min-width: 768.02px),
print {
    .PrintMode__InstaxCamera__Image [data-instax-camera=hand] {
        right: 10%;
        width: 31%;
    }
}

@media screen and (max-width: 768px) {
    .PrintMode__InstaxCamera__Image [data-instax-camera=hand] {
        right: 10%;
        width: 31%;
    }
}

.PrintMode__InstaxCamera__Image [data-instax-camera=image] {
    top: 44%;
    left: 50%;
    z-index: -1;
    width: 53%;
    transform: translate(-50%, -50%);
}

.ProductDesign {
    overflow: hidden;
    background-color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .ProductDesign {
        padding-top: 80px;
        padding-bottom: 120px;
    }
}

@media screen and (max-width: 768px) {
    .ProductDesign {
        padding-top: 56px;
    }
}

.ProductDesign__Heading {
    font-weight: 700;
}

@media screen and (min-width: 768.02px),
print {
    .ProductDesign__Heading {
        font-size: 100px;
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .ProductDesign__Heading {
        font-size: 50px;
    }
}

.ProductDesign__List.keen-slider:not([data-keen-slider-disabled]) {
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
}

@media screen and (min-width: 768.02px),
print {
    .ProductDesign__List.keen-slider:not([data-keen-slider-disabled]) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 4%;
        margin-bottom: 100px;
    }
}

@media screen and (max-width: 768px) {
    .ProductDesign__List.keen-slider:not([data-keen-slider-disabled]) {
        width: 87%;
        margin-bottom: 60px;
    }
}

.ProductDesign__List.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide {
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}

@media screen and (max-width: 768px) {
    .ProductDesign__List.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide {
        padding-right: 2%;
        padding-left: 6%;
    }
}

.ProductDesign__List img {
    width: 100%;
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled]) {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
    margin-top: -20px;
}

@media screen and (min-width: 768.02px),
print {
    .ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled]) {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled]) {
        display: grid;
    }
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide {
    padding-top: 40px;
    font-size: 14px;
    color: #cdcdcd;
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide::before,
.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide::after {
    position: absolute;
    top: 20px;
    left: 50%;
    display: block;
    content: "";
    transform: translate(-50%, -50%);
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide::before {
    width: 100%;
    height: 2px;
    background-color: #ededed;
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide::after {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide.pink::after {
    background-color: #e3bfc0;
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide.white::after {
    background-color: #fff;
    border: 1px solid #b7b7b7;
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide.blue::after {
    background-color: #5f637e;
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide.active {
    font-weight: 700;
    color: #001e62;
}

.ProductDesign__Thumbs.keen-slider:not([data-keen-slider-disabled])>.keen-slider__slide.active::before {
    background-color: #b7b7b7;
}

.ProductDesign__Shadow {
    position: absolute;
    top: 102%;
    left: 56%;
    z-index: -1;
    width: 120%;
    transform: translate(-50%, -50%);
}

.ProductDesign__ColorName {
    position: absolute;
    top: 19%;
    right: -4%;
    font-weight: 700;
    color: #001e62;
    transform: translateY(-50%) rotate(27deg);
    transform-origin: right;
}

@media screen and (max-width: 768px) {
    .ProductDesign__ColorName {
        display: none;
    }
}

.ProductDesign__Links {
    font-size: 20px;
    line-height: 1.3;
}

@media screen and (min-width: 768.02px),
print {
    .ProductDesign__Links {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        row-gap: 24px;
        column-gap: 2.5%;
        margin-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .ProductDesign__Links {
        margin-top: 80px;
    }
}

.ProductDesign__Links>li {
    border-top: 1px solid #cdcdcd;
    border-bottom: 1px solid #cdcdcd;
}

@media screen and (max-width: 768px) {
    .ProductDesign__Links>li:not(:first-child) {
        border-top: none;
    }
}

.ProductDesign__Links>li>a {
    position: relative;
    display: grid;
    grid-template-columns: 50px 1fr;
    column-gap: 20px;
    align-items: center;
    font-weight: 700;
}

.ProductDesign__Links>li>a::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #000;
    opacity: 0;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .ProductDesign__Links>li>a:hover::before {
        opacity: 0.05;
    }
}

@media screen and (min-width: 768.02px),
print {
    .ProductDesign__Links>li>a {
        padding: 30px 16% 30px 8%;
    }
}

@media screen and (max-width: 768px) {
    .ProductDesign__Links>li>a {
        padding: 28px 16% 28px 4%;
    }
}

.ProductDesign__Links>li>a::after {
    position: absolute;
    top: 50%;
    display: block;
    width: 24px;
    height: 24px;
    content: "";
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 40.33 33.69"><polygon points="23.82 0 21.7 2.12 34.92 15.35 0 15.35 0 18.34 34.26 18.34 21.04 31.57 23.16 33.69 40.33 16.52 23.82 0" fill="%2348bec3"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(50%, -50%);
}

@media screen and (min-width: 768.02px),
print {
    .ProductDesign__Links>li>a::after {
        right: 7%;
    }
}

@media screen and (max-width: 768px) {
    .ProductDesign__Links>li>a::after {
        right: 32px;
    }
}

.ProductDesign__Links>li>a img {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768.02px),
print {
    .ProductDesign__AppInfo {
        margin-top: 48px;
    }
}

.Spec {
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 768.02px),
print {
    .Spec {
        padding-top: 80px;
        padding-bottom: 88px;
    }
}

@media screen and (max-width: 768px) {
    .Spec {
        padding-top: 60px;
        padding-bottom: 80px;
    }
}

.Spec h1 {
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

@media screen and (min-width: 768.02px),
print {
    .Spec h1 {
        font-size: 44px;
    }
}

@media screen and (max-width: 768px) {
    .Spec h1 {
        font-size: 32px;
    }
}

.Spec__List {
    display: grid;
    line-height: 1.875;
    color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .Spec__List {
        margin-top: 72px;
    }
}

@media screen and (max-width: 768px) {
    .Spec__List {
        margin-top: 50px;
    }
}

.Spec__List>li {
    display: grid;
    background-image: linear-gradient(to right, #40c3c3 0 28%, rgba(255, 255, 255, 0.2) 28% 100%);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 1px;
}

.Spec__List>li:last-child {
    background-image: linear-gradient(to right, #40c3c3 0 28%, rgba(255, 255, 255, 0.2) 28% 100%), linear-gradient(to right, #40c3c3 0 28%, rgba(255, 255, 255, 0.2) 28% 100%);
    background-position: top, bottom;
}

@media screen and (min-width: 768.02px),
print {
    .Spec__List>li {
        grid-template-columns: 28% 1fr;
        column-gap: 28px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media screen and (max-width: 768px) {
    .Spec__List>li {
        row-gap: 8px;
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

.Spec__Heading {
    font-weight: 700;
}

.Spec__Notes {
    margin-top: 40px;
    font-size: 13px;
    line-height: 1.8461538462;
    color: #fff;
    opacity: 0.6;
}

.Spec__Notes>li {
    position: relative;
    padding-left: 20px;
}

.Spec__Notes>li::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "●";
}

.Supplies {
    overflow: hidden;
}

@media screen and (min-width: 768.02px),
print {
    .Supplies {
        padding-top: 160px;
        padding-bottom: 70px;
    }
}

@media screen and (max-width: 768px) {
    .Supplies {
        padding-top: 60px;
        padding-bottom: 40px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Section {
        display: grid;
        grid-template-columns: 28% 1fr;
        row-gap: 98px;
        column-gap: 3%;
    }
}

.Supplies__Heading {
    font-weight: 700;
    line-height: 1.5;
    word-break: break-word;
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Heading {
        align-self: start;
        font-size: 42px;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Heading {
        font-size: 36px;
    }
    .Supplies__Heading:not(:first-child) {
        margin-top: 70px;
    }
}

.Supplies__Heading span {
    padding-bottom: 10px;
    background-image: linear-gradient(to top, currentColor 0 1px, transparent 1px 5px, currentColor 5px 6px, transparent 6px);
}

.Supplies__Film {
    position: relative;
    z-index: 0;
    display: grid;
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Film {
        grid-template-columns: 2.4fr 5fr;
        row-gap: 40px;
        column-gap: 20px;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Film {
        grid-template-columns: 1fr 1fr;
        row-gap: 36px;
        margin-top: 24px;
    }
}

.Supplies__Film img {
    width: 100%;
}

.Supplies__Film__Background {
    position: relative;
    z-index: -1;
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Film__Background {
        grid-row-start: 2;
        grid-column: 1/span 2;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Film__Background {
        grid-row-start: 1;
        grid-column-start: 2;
    }
}

.Supplies__Film__Background img {
    position: absolute;
    top: 45%;
    left: -30%;
    width: auto;
    max-width: none;
    transform: translateY(-50%);
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Film__Background img {
        height: 120%;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Film__Background img {
        height: 50%;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Film__Head {
        display: flex;
        grid-column: span 2;
        align-items: center;
        justify-content: space-between;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Film__Head {
        display: grid;
        align-self: center;
    }
}

.Supplies__Film__Button {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 136px;
}

.Supplies__Film__Package img,
.Supplies__Film__Example img {
    filter: drop-shadow(-5.657px 5.657px 6px rgba(0, 0, 0, 0.1)) drop-shadow(-13.435px 13.435px 16.74px rgba(0, 0, 0, 0.1));
}

.Supplies__Film__Package {
    justify-self: center;
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Film__Package {
        grid-row-start: 2;
        grid-column-start: 1;
        width: 71%;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Film__Package {
        grid-row-start: 1;
        grid-column-start: 2;
        width: 75%;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Film__Example {
        grid-row-start: 2;
        grid-column-start: 2;
        padding-right: 5%;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Film__Example {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

.Supplies__Label {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Film__Head .Supplies__Label {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Film__Head .Supplies__Label {
        margin-bottom: 20px;
    }
}

.Supplies__Row {
    display: grid;
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Row {
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        column-gap: 20px;
    }
    .Supplies__Row+.Supplies__Row {
        margin-top: 44px;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Row {
        row-gap: 40px;
        margin-top: 40px;
    }
}

.Supplies__Row img {
    width: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Hardcase {
        width: 67%;
    }
    .Supplies__Frame {
        width: 50%;
    }
}

.Supplies__Notes {
    font-size: 11px;
    line-height: 1.6363636364;
    color: #fff;
    opacity: 0.6;
}

@media screen and (min-width: 768.02px),
print {
    .Supplies__Notes {
        margin-top: 100px;
    }
}

@media screen and (max-width: 768px) {
    .Supplies__Notes {
        margin-top: 56px;
    }
}

.Tutorial {
    background-color: #000e2d;
}

@media screen and (min-width: 768.02px),
print {
    .Tutorial {
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 768px) {
    .Tutorial {
        padding-bottom: 80px;
    }
}

.Tutorial__Heading {
    text-align: center;
}

@media screen and (min-width: 768.02px),
print {
    .Tutorial__Heading {
        font-size: 20px;
    }
}

@media screen and (max-width: 768px) {
    .Tutorial__Heading {
        font-size: 12px;
    }
}

.Tutorial__Video {
    margin-top: 18px;
}

.VideoPlayer {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

.VideoPlayer>iframe,
.VideoPlayer>video {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
    .VideoPlayer.VideoPlayer--promotional {
        padding-top: 100%;
    }
}

.VideoPlayer__Thumbnail {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: calc(100% + 1px);
    transform: translateX(-50%);
}

.VideoPlayer__Thumbnail img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.VideoPlayer__Cover {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
}

.VideoPlayer.VideoPlayer--promotional .VideoPlayer__Cover {
    background-color: rgba(0, 0, 0, 0.3);
}

.VideoPlayer__Cover__Layout {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    height: 100%;
}

@media screen and (min-width: 768.02px),
print {
    .VideoPlayer__Cover__Layout {
        row-gap: 20px;
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .VideoPlayer__Cover__Layout {
        row-gap: 10px;
        font-size: 12px;
    }
}

.VideoPlayer__Play {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #40c3c3;
}

@media screen and (min-width: 768.02px),
print {
    .VideoPlayer__Play {
        width: 140px;
        height: 140px;
    }
}

@media screen and (max-width: 768px) {
    .VideoPlayer__Play {
        width: 80px;
        height: 80px;
    }
}

.VideoPlayer__Play::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    border: 2px solid currentColor;
    border-radius: 50%;
    transition: transform 0.3s;
    transform: scale3d(1, 1, 1);
}

@media (hover: hover) {
    a:hover .VideoPlayer__Play::before,
    button:hover .VideoPlayer__Play::before {
        transform: scale3d(1.1, 1.1, 1);
    }
}

.VideoPlayer__Play::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 26%;
    height: 26%;
    content: "";
    background-color: currentColor;
    transform: translate(-50%, -50%) translateX(12%);
    -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 26 30"><path fill="%23000000" d="M25.133,14.100 L2.472,0.915 C1.673,0.450 0.675,1.031 0.675,1.961 L0.675,28.330 C0.675,29.260 1.673,29.841 2.472,29.376 L25.133,16.191 C25.932,15.727 25.932,14.564 25.133,14.100 Z" /></svg>');
    mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 26 30"><path fill="%23000000" d="M25.133,14.100 L2.472,0.915 C1.673,0.450 0.675,1.031 0.675,1.961 L0.675,28.330 C0.675,29.260 1.673,29.841 2.472,29.376 L25.133,16.191 C25.932,15.727 25.932,14.564 25.133,14.100 Z" /></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.Width {
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 768.02px),
print {
    .Width {
        width: calc(100% - 60px);
        max-width: 1160px;
        max-width: clamp(1160px, 80.5555555556vw, 1392px);
    }
    .Width.Width--narrow {
        max-width: 962px;
        max-width: clamp(962px, 66.8055555556vw, 1154.4px);
    }
}

@media screen and (max-width: 768px) {
    .Width {
        width: 90%;
    }
}

.NewFunction {
    padding-bottom: 80px;
}

@media screen and (min-width: 768.02px),
print {
    .NewFunction {
        padding-top: 90px;
    }
}

@media screen and (max-width: 768px) {
    .NewFunction {
        padding-top: 60px;
    }
}

.NewFunction h1 {
    font-weight: 700;
}

@media screen and (min-width: 768.02px),
print {
    .NewFunction h1 {
        margin-bottom: 62px;
        font-size: 34px;
        line-height: 1.4117647059;
    }
}

@media screen and (max-width: 768px) {
    .NewFunction h1 {
        margin-bottom: 62px;
        font-size: 26px;
        line-height: 1.5384615385;
    }
}

.NewFunction h2 {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 34px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    background-image: linear-gradient(to top, currentColor 0 1px, transparent 1px 5px, currentColor 5px 6px, transparent 6px);
}

.NewFunction> :not(h1)+h2 {
    margin-top: 70px;
}

.NewFunction h3 {
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
}

.NewFunction> :not(h1):not(h2)+h3 {
    margin-top: 40px;
}

.NewFunction p {
    font-size: 16px;
    line-height: 1.875;
    color: #fff;
}

.NewFunction> :not(h1):not(h2):not(h3)+p {
    margin-top: 40px;
}

.NewFunction> :not(h1):not(h2):not(h3)+img,
.NewFunction> :not(h1):not(h2):not(h3)+picture img {
    margin-top: 40px;
}

.NewFunction> :not(h1):not(h2):not(h3)+figure {
    margin-top: 40px;
}

.NewFunction figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8571428571;
    color: #fff;
}

.NewFunction__BackButtonArea {
    display: grid;
    justify-content: center;
}

.NewFunction :not(h1):not(h2):not(h3)+.NewFunction__BackButtonArea {
    margin-top: 50px;
}

.NewFunction__BackButton {
    position: relative;
    display: inline-block;
    min-width: 136px;
    padding: 15px 24px 15px 38px;
    font-size: 14px;
    color: #001e62;
    text-align: center;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 35px #40c3c3;
    transition: box-shadow 0.3s, transform 0.3s;
    transform: scale3d(1, 1, 1);
    will-change: transform;
}

@media (hover: hover) {
    .NewFunction__BackButton:hover {
        color: #40c3c3;
        box-shadow: inset 0 0 0 2px #40c3c3;
        transform: scale3d(1.1, 1.1, 1);
    }
}

.NewFunction__BackButton::before {
    position: absolute;
    top: 50%;
    left: 20px;
    display: block;
    width: 10px;
    height: 10px;
    content: "";
    border-bottom: 1px solid currentColor;
    border-left: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.NewFunction__ColumnLayout {
    display: grid;
    row-gap: 60px;
}

.NewFunction :not(h1):not(h2):not(h3)+.NewFunction__ColumnLayout {
    margin-top: 40px;
}

.NewFunction__ColumnLayout__Row {
    display: grid;
    row-gap: 40px;
}

@media screen and (min-width: 768.02px),
print {
    .NewFunction__ColumnLayout__Row {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 28px;
    }
}

.NewFunction :not(h1):not(h2):not(h3)+.NewFunction__StepLayout {
    margin-top: 40px;
}

.NewFunction__LinkList {
    display: grid;
    row-gap: 12px;
    background-color: #001649;
}

.NewFunction :not(h1):not(h2):not(h3)+.NewFunction__LinkList {
    margin-top: 60px;
}

@media screen and (min-width: 768.02px),
print {
    .NewFunction__LinkList {
        padding: 40px;
    }
}

@media screen and (max-width: 768px) {
    .NewFunction__LinkList {
        padding: 25px 20px;
    }
}

.NewFunction__LinkList>li {
    font-size: 16px;
    line-height: 1.5;
    text-decoration: underline;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.NewFunction__LinkList a {
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .NewFunction__LinkList a:hover {
        opacity: 0.7;
    }
}

.StepLayout {
    display: grid;
    row-gap: 40px;
}

@media screen and (min-width: 768.02px),
print {
    .StepLayout {
        grid-template-columns: repeat(5, 1fr);
        column-gap: 40px;
    }
}

@media screen and (max-width: 768px) {
    .StepLayout {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        padding-right: 20px;
    }
}

@media screen and (min-width: 768.02px),
print {
    .StepLayout.StepLayout--multi-row>li:nth-child(5n) {
        grid-column-start: 1;
    }
}

.StepLayout__Image {
    position: relative;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .StepLayout__Image {
        padding-right: 32px;
    }
}

.StepLayout>li:not(:last-child) .StepLayout__Image::after {
    position: absolute;
    top: 50%;
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    border-top: 2px solid #40c3c3;
    border-right: 2px solid #40c3c3;
    transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width: 768.02px),
print {
    .StepLayout>li:not(:last-child) .StepLayout__Image::after {
        right: -20px;
    }
}

@media screen and (max-width: 768px) {
    .StepLayout>li:not(:last-child) .StepLayout__Image::after {
        right: 0;
    }
}

.StepLayout__Image img {
    width: 100%;
}

.StepLayout__Step {
    font-size: 18px;
    font-weight: 700;
}

@media screen and (min-width: 768.02px),
print {
    .StepLayout__Step {
        margin-top: 24px;
    }
}

@media screen and (max-width: 768px) {
    .StepLayout__Step {
        margin-top: 20px;
    }
}

.StepLayout__Text {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8571428571;
    color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .Support {
        padding-top: 90px;
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 768px) {
    .Support {
        padding-top: 60px;
        padding-bottom: 80px;
    }
}

.Support h1 {
    margin-bottom: 60px;
    font-weight: 700;
    text-align: center;
}

@media screen and (min-width: 768.02px),
print {
    .Support h1 {
        font-size: 44px;
    }
}

@media screen and (max-width: 768px) {
    .Support h1 {
        font-size: 32px;
    }
}

.Support h2 {
    margin-bottom: 40px;
    font-weight: 700;
    text-align: center;
}

.Support h2 span {
    display: inline-block;
    padding-bottom: 20px;
    background-image: linear-gradient(to top, currentColor 0 1px, transparent 1px 5px, currentColor 5px 6px, transparent 6px);
}

@media screen and (min-width: 768.02px),
print {
    .Support h2 {
        margin-top: 100px;
        font-size: 34px;
    }
}

@media screen and (max-width: 768px) {
    .Support h2 {
        margin-top: 80px;
        font-size: 26px;
    }
}

.Support p {
    font-size: 16px;
    line-height: 1.875;
}

.Support__AnchorList {
    display: grid;
    justify-items: center;
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 768.02px),
print {
    .Support__AnchorList {
        grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .Support__AnchorList {
        grid-auto-flow: row;
        row-gap: 20px;
    }
}

.Support__AnchorButton {
    position: relative;
    display: block;
    width: 100%;
    max-width: 270px;
    padding: 15px 38px 15px 24px;
    font-size: 14px;
    color: #001e62;
    text-align: center;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 35px #40c3c3;
    transition: box-shadow 0.3s, transform 0.3s;
    transform: scale3d(1, 1, 1);
    will-change: transform;
}

@media (hover: hover) {
    .Support__AnchorButton:hover {
        color: #40c3c3;
        box-shadow: inset 0 0 0 2px #40c3c3;
        transform: scale3d(1.1, 1.1, 1);
    }
}

.Support__AnchorButton::after {
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    width: 8px;
    height: 8px;
    content: "";
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-60%) rotate(45deg);
}

.Faq+.Faq {
    margin-top: 10px;
}

.Faq__Question {
    width: 100%;
}

.Faq__Question__Inner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    width: 100%;
    background-color: #001649;
}

@media screen and (min-width: 768.02px),
print {
    .Faq__Question__Inner {
        column-gap: 16px;
        padding: 30px 60px 30px 30px;
    }
}

@media screen and (max-width: 768px) {
    .Faq__Question__Inner {
        column-gap: 14px;
        padding: 20px 50px 20px 20px;
    }
}

.Faq__Question__Inner::before,
.Faq__Question__Inner::after {
    position: absolute;
    top: 50%;
    display: block;
    width: 16px;
    height: 2px;
    content: "";
    background-color: #40c3c3;
}

@media screen and (min-width: 768.02px),
print {
    .Faq__Question__Inner::before,
    .Faq__Question__Inner::after {
        right: 30px;
    }
}

@media screen and (max-width: 768px) {
    .Faq__Question__Inner::before,
    .Faq__Question__Inner::after {
        right: 20px;
    }
}

.Faq__Question__Inner::before {
    transform: translateY(-50%);
}

.Faq__Question__Inner::after {
    transition: transform 0.5s;
    transform: translateY(-50%) rotate(-90deg);
}

.Faq__Question[aria-expanded=true] .Faq__Question__Inner::after {
    transform: translateY(-50%);
}

.Faq__Question__Icon {
    font-weight: 700;
}

@media screen and (min-width: 768.02px),
print {
    .Faq__Question__Icon {
        font-size: 26px;
    }
}

@media screen and (max-width: 768px) {
    .Faq__Question__Icon {
        font-size: 22px;
    }
}

.Faq__Question__Text {
    font-size: 16px;
    line-height: 1.875;
    color: #fff;
    text-align: left;
}

.Faq__Question__Text__Label {
    display: block;
    font-size: 80%;
    font-weight: bold;
    color: #40c3c3;
}

.Faq__Answer {
    overflow: hidden;
}

.Faq__Answer__Inner {
    display: grid;
    color: #001e62;
    background-color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .Faq__Answer__Inner {
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        padding: 28px 30px;
    }
}

@media screen and (max-width: 768px) {
    .Faq__Answer__Inner {
        row-gap: 14px;
        padding: 24px 20px;
    }
}

.Faq__Answer__Icon {
    font-weight: 700;
}

@media screen and (min-width: 768.02px),
print {
    .Faq__Answer__Icon {
        font-size: 26px;
    }
}

@media screen and (max-width: 768px) {
    .Faq__Answer__Icon {
        font-size: 22px;
    }
}

.Faq__Answer__Content>p:not(:first-child) {
    margin-top: 24px;
}

.Faq__Answer__Content a {
    display: inline-block;
    transition: opacity 0.2s;
    text-decoration: underline;
}

@media (hover: hover) {
    .Faq__Answer__Content a:hover {
        opacity: 0.7;
    }
}

.Faq__Answer__Content>picture:not(:first-child) img {
    margin-top: 20px;
}

.Faq__Answer__Content>h3 {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.875;
}

.Faq__Answer__Content>h3:not(:first-child) {
    margin-top: 30px;
}

.Faq__OrderedList {
    font-size: 16px;
    line-height: 1.875;
    counter-reset: item;
}

.Faq__OrderedList:not(:first-child) {
    margin-top: 28px;
}

.Faq__OrderedList>li {
    position: relative;
    padding-left: 26px;
}

.Faq__OrderedList>li::before {
    position: absolute;
    top: 0;
    right: calc(100% - 26px);
    content: counter(item) "）";
    counter-increment: item;
}

.Faq__BulletList {
    display: grid;
    row-gap: 5px;
    font-size: 16px;
    line-height: 1.7;
}

.Faq__BulletList:not(:first-child) {
    margin-top: 20px;
}

.Faq__BulletList>li {
    position: relative;
    padding-left: 16px;
}

.Faq__BulletList>li::before {
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 6px;
    height: 6px;
    content: "";
    background-color: currentColor;
    border-radius: 100%;
}

.Faq__Image:not(:first-child) {
    margin-top: 26px;
}

.Faq__Image__Caption {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.875;
}

.Faq__Image__List {
    display: flex;
    flex-wrap: wrap;
    margin-top: -24px;
    margin-left: -18px;
}

@media screen and (max-width: 768px) {
    .Faq__Image__List {
        flex-wrap: wrap;
    }
}

.Faq__Image__List li {
    margin-top: 24px;
    margin-left: 18px;
}

@media screen and (min-width: 768.02px),
print {
    .Faq__Image__List li {
        width: 26%;
    }
}

@media screen and (max-width: 768px) {
    .Faq__Image__List li {
        width: calc(50% - 18px);
    }
}

.Faq__Image__List picture img {
    width: 100%;
}

.Faq__Table {
    width: 100%;
    table-layout: fixed;
    border-top: solid 1px #001e62;
    border-right: solid 1px #001e62;
}

.Faq__Table:not(:first-child) {
    margin-top: 20px;
}

.Faq__Table thead {
    color: #fff;
    background: #697691;
}

.Faq__Table td,
.Faq__Table th {
    padding: 12px 10px;
    font-size: 14px;
    line-height: 1.5714285714;
    border-left: solid 1px #001e62;
}

.Faq__Table tbody th {
    background-color: #edf0f6;
}

.Faq__Table :not(thead)>tr>th,
.Faq__Table :not(thead)>tr>td {
    border-bottom: solid 1px #001e62;
}

@media screen and (max-width: 768px) {
    .Faq__Table.Faq__Table--pc {
        display: none;
    }
}

@media screen and (min-width: 768.02px),
print {
    .Faq__Table.Faq__Table--sp {
        display: none;
    }
}

.Faq__Table.Faq__Table--sp+.Faq__Table.Faq__Table--sp {
    margin-top: 0;
    border-top: none;
}

.ManualList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    grid-auto-rows: minmax(120px, 1fr);
    row-gap: 44px;
    column-gap: 5%;
    color: #fff;
}

@media screen and (min-width: 768.02px),
print {
    .ManualList {
        margin-top: 76px;
    }
}

@media screen and (max-width: 768px) {
    .ManualList {
        margin-top: 40px;
    }
}

.ManualList__Link {
    display: grid;
    grid-auto-flow: row;
    row-gap: 12px;
    text-align: center;
}

.ManualList__Link[href] {
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .ManualList__Link[href]:hover {
        opacity: 0.7;
    }
}

.ManualList__Icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 58px;
    font-weight: 700;
    background-image: url('data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 45 57"><path fill="%23FFFFFF" d="M38.1,6.6L31.3,0H0v57h45V13.2L38.1,6.6z M41.8,12.9H31.6V3.1l5.2,5L41.8,12.9z M2,55V2h27.6v12.9H43V55H2z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ManualList__Text {
    font-size: 16px;
    line-height: 1.5;
}

.AnchorPoint {
    --offset: 0px;
    position: absolute;
    margin-top: calc((var(--local-nav-height) - var(--common-header-height) + var(--offset)) * -1);
    visibility: hidden;
}

.AnchorPoint.AnchorPoint--long {
    --offset: 50px;
}

[data-scroll-lock-locked=true] .AnchorPoint {
    --common-header-height: 0px;
}

.tw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.tw-relative {
    position: relative;
}

.tw-inline-block {
    display: inline-block;
}

.tw-flex {
    display: flex;
}

.tw-h-full {
    height: 100%;
}

.tw-w-1\/6 {
    width: 16.666667%;
}

.tw-w-1\/3 {
    width: 33.333333%;
}

.tw-w-2\/3 {
    width: 66.666667%;
}

.tw-items-center {
    align-items: center;
}

.tw-overflow-hidden {
    overflow: hidden;
}

.tw-bg-video-background {
    --tw-bg-opacity: 1;
    background-color: rgb(0 14 45 / var(--tw-bg-opacity));
}

.tw-text-center {
    text-align: center;
}

.tw-text-right {
    text-align: right;
}

@media screen and (min-width: 768.02px),
print {
    .pc\:tw-hidden {
        display: none;
    }
    .pc\:tw-text-right {
        text-align: right;
    }
}

@media screen and (max-width: 768px) {
    .sp\:tw-inline-block {
        display: inline-block;
    }
    .sp\:tw-hidden {
        display: none;
    }
    .sp\:tw-w-full {
        width: 100%;
    }
    .sp\:tw-whitespace-nowrap {
        white-space: nowrap;
    }
}

.Spec .Spec__List a {
    color: #40c3c3;
}


/* 20221004追記 */

.new_function_alignment {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.new_function_app {
    padding: 100px 0;
}

.new_function_icon {
    display: block;
    margin: 0 auto 35px;
    width: 12%;
}

.new_function_sub {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin: 0 auto 40px;
}

.new_function_app .btn2 {
    width: 535px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.new_function_app .btn2>li.apple {
    width: 239px;
}

.new_function_app .btn2>li.google {
    width: 268px;
}

.new_function_app .btn2>li a {
    display: block;
    margin: 0 auto 15px;
}

.new_function_app .btn2>li a img {
    width: auto;
    height: 80px;
    display: block;
}

.new_function_app .btn2>li span {
    display: block;
    font-size: 12px;
    line-height: 18px;
}

@media screen and (max-width: 768px) {
    .new_function_alignment {
        flex-wrap: wrap;
    }
    .new_function_alignment li {
        max-width: 45%;
        margin-top: 10px;
    }
    .new_function_app {
        padding: 45px 0 0;
    }
    .new_function_icon {
        width: 24%;
        margin: 0 auto 20px;
    }
    .new_function_sub {
        font-size: 16px;
        margin: 0 auto 20px;
    }
    .new_function_app .btn2 {
        width: auto;
        display: block;
        margin: 0 auto 45px;
    }
    .new_function_app .btn2>li.apple,
    .new_function_app .btn2>li.google {
        width: auto;
    }
    .new_function_app .btn2>li a {
        height: auto;
        margin: 0 auto 5px;
    }
    .new_function_app .btn2>li a img {
        width: 100%;
        height: 100%;
    }
    .new_function_app .btn2>li a.appstore {
        width: 209px;
    }
    .new_function_app .btn2>li a.gplay {
        width: 235px;
    }
    .new_function_app .btn2>li {
        margin: 0 10px 20px;
    }
    .new_function_app .btn2>li span {
        display: block;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
    }
}


/* 20221004追記ここまで */


/* 20230405追記ここから*/

.faq_img_list_2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

.faq_img_box_2 {
    width: calc(50% - 30px);
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    margin: 15px auto;
}

.faq_img_text {
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

.faq_img_text p {
    line-height: 1.6em;
}

p.model_title {
    font-weight: bold;
}

@media only screen and (min-width: 769px) and (max-width: 1090px) {
    .faq_img_text {
        height: 100px;
        margin-bottom: 15px;
    }
    .faq_img_text p {
        line-height: 1.3em;
    }
}

@media only screen and (max-width: 768px) {
    .faq_img_box_2 {
        width: 100%;
    }
    .faq_img_box_2 img {
        width: 70%;
    }
    .faq_img_text {
        height: 80px;
        align-items: flex-end;
        margin-bottom: 15px;
    }
    .faq_img_text p {
        line-height: 1.6em;
    }
}


/* 20230405追記ここまで*/