@charset "UTF-8";

/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*,
:after,
:before {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    min-width: 0
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
    margin: 0
}

main {
    display: block
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0
}

address,
blockquote,
dl,
figure,
form,
iframe,
ol,
p,
pre,
table,
ul {
    margin: 0
}

ol,
ul {
    padding: 0;
    list-style: none
}

dt {
    font-weight: 700
}

dd {
    margin-left: 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit
}

pre {
    font-family: monospace;
    font-size: inherit
}

address {
    font-style: inherit
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit
}

abbr[title] {
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace;
    font-size: inherit
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

embed,
iframe,
img,
object,
svg {
    vertical-align: bottom
}

button,
input,
optgroup,
select,
textarea {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    text-align: inherit;
    text-transform: inherit
}

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

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

:-moz-focusring {
    outline: auto
}

select:disabled {
    opacity: inherit
}

fieldset,
option {
    padding: 0
}

fieldset {
    margin: 0;
    min-width: 0
}

legend {
    padding: 0
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

[type=number] {
    -moz-appearance: textfield
}

label[for] {
    cursor: pointer
}

details {
    display: block
}

summary {
    display: list-item
}

[contenteditable]:focus {
    outline: auto
}

table {
    border-color: inherit;
    border-collapse: collapse
}

caption {
    text-align: left
}

td,
th {
    vertical-align: top;
    padding: 0
}

th {
    text-align: left;
    font-weight: 700
}

.background-set,
.contact__form > p span:before,
.contact__select-box:after,
.contact button span:before,
.trust h2 > span:first-child:before,
.simple h2:after,
.feature h2:after,
.reason__cont h3:before,
.footer__list a:after,
.com-btn a span:after,
.com-btn--white a span:after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

html,
body {
    scroll-behavior: smooth
}

body {
    color: #263443;
    font-family: Noto Sans JP, Hiragino Kaku Gothic Pro, Meiryo, Arial, sans-serif;
    letter-spacing: .05em;
    line-height: 1
}

a {
    transition: opacity .5s
}

a:hover {
    opacity: .7
}

img {
    max-width: 100%;
    vertical-align: bottom
}

#global-container {
    min-width: 330px
}

#main-container {
    overflow: hidden
}

@media screen and (min-width: 2300px) {
    #main-container {
        overflow: visible
    }
}

.wrap {
    width: 90%;
    margin-inline: auto
}

@media screen and (max-width: 852px) {
    .wrap {
        width: 95%
    }
}

#issues,
#features,
#supported-saas,
#pricing,
#support,
#faq,
#contact {
    scroll-margin-top: 85px
}

.main-ttl {
    position: relative;
    font-size: clamp(23px, 6vw, 46px);
    font-weight: 700;
    max-width: fit-content;
    margin-inline: auto
}

@media screen and (max-width: 852px) {
    .main-ttl {
        font-size: 40px;
        font-size: clamp(28px, 7vw, 40px)
    }
}

.main-ttl:before {
    content: "";
    border-bottom: 3px solid #263443;
    width: 70%;
    bottom: -100%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    max-width: 105px
}

@media screen and (max-width: 852px) {
    .main-ttl:before {
        bottom: calc(-100% - 20px)
    }
}

.com-btn {
    width: 80%;
    max-width: 560px;
    margin-inline: auto
}

.com-btn a {
    display: flex;
    padding: 6% 0;
    background-color: #fd982e;
    border-radius: 20px;
    box-shadow: 0 0 5px #0006
}

.com-btn a span {
    font-weight: 700;
    color: #fff;
    font-size: clamp(18px, 5vw, 36px);
    text-align: center;
    width: 85%;
    margin-inline: auto;
    position: relative
}

@media screen and (max-width: 852px) {
    .com-btn a span {
        font-size: 20px;
        font-size: clamp(14px, 4vw, 20px)
    }
}

.com-btn a span:after {
    content: "";
    background-image: url(/images/btn-icon.svg);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5%;
    max-width: 12px;
    aspect-ratio: 1;
    position: absolute;
    background-size: contain
}

.com-btn--white {
    width: 80%;
    max-width: 560px;
    margin-inline: auto
}

.com-btn--white a {
    display: flex;
    padding: 6% 0;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 5px #0006
}

.com-btn--white a span {
    font-weight: 700;
    color: #fd982e;
    font-size: clamp(18px, 5vw, 36px);
    text-align: center;
    width: 85%;
    margin-inline: auto;
    position: relative
}

.com-btn--white a span:after {
    content: "";
    background-image: url(/images/btn-icon.svg);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5%;
    max-width: 12px;
    aspect-ratio: 1;
    position: absolute;
    background-size: contain
}

.com-btn--white a {
    border: 2px solid #FD982E
}

.com-btn--white a span {
    font-size: clamp(16px, 4.3vw, 32px);
    letter-spacing: .05em
}

.com-btn--white a span:after {
    background-image: url(/images/btn-icon02.svg)
}

@media screen and (max-width: 852px) {
    .com-btn--white a span {
        font-size: 20px;
        font-size: clamp(14px, 4vw, 20px)
    }
}

.d-none,
.md-none {
    display: none !important
}

@media screen and (max-width: 852px) {
    .md-none {
        display: block !important
    }
}

.md-none-flex {
    display: none !important
}

@media screen and (max-width: 852px) {
    .md-none-flex {
        display: flex !important
    }
}

.md-show {
    display: block !important
}

@media screen and (max-width: 852px) {
    .md-show {
        display: none !important
    }
}

.md-show-flex {
    display: flex !important
}

@media screen and (max-width: 852px) {
    .md-show-flex {
        display: none !important
    }
}

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

.flex-column {
    display: flex;
    flex-direction: column
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 85px;
    background-color: #fff;
    z-index: 999;
    opacity: 0;
    visibility: hidden
}

@media screen and (max-width: 852px) {
    .mobile-menu {
        display: block
    }
}

.mobile-menu ul {
    line-height: 3;
    font-size: clamp(14px, 4.3vw, 20px)
}

.mobile-menu ul a {
    display: flex;
    width: 100%;
    height: 100%
}

.mobile-menu__wrap {
    width: 90%;
    margin-inline: auto;
    padding: 30px 0;
    height: calc(100vh - 85px)
}

.mobile-menu__btn {
    padding: 0;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center
}

.mobile-menu__btn span {
    background-color: #263443;
    width: 24px;
    height: 2px;
    display: block;
    margin-bottom: 6px;
    transition: transform .5s
}

.mobile-menu__btn span:nth-last-child(1) {
    margin-bottom: 0
}

#global-container.menu-open .mobile-menu {
    opacity: 1;
    visibility: visible
}

#global-container.menu-open .mobile-menu__btn span {
    background-color: #263443
}

#global-container.menu-open .mobile-menu__btn span:nth-child(1) {
    transition-delay: 70ms;
    transform: translateY(10px) rotate(135deg)
}

#global-container.menu-open .mobile-menu__btn span:nth-child(2) {
    transition-delay: 0s;
    transform: translate(-18px) scaleX(0)
}

#global-container.menu-open .mobile-menu__btn span:nth-child(3) {
    transition-delay: .14s;
    transform: translateY(-6px) rotate(-135deg)
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background-color: #fff;
    transition: .5s
}

.header.triggered {
    background-color: #ffffffe6;
    box-shadow: 0 4px 14px #2634430f
}

.header__inner {
    max-width: 1920px
}

.header__wrap {
    height: 85px;
    gap: 5%;
    justify-content: space-between
}

.header__logo {
    width: 20%;
    max-width: 193px
}

.header__logo img {
    width: 100%
}

.header__nav {
    width: 80%;
    max-width: 1100px;
    font-size: 18px;
    font-size: clamp(8px, 1.1vw, 18px)
}

.header__nav ul {
    column-gap: 2%;
    font-weight: 500
}

.header__nav li {
    border-right: 1px solid #263443
}

.header__nav li:last-of-type {
    border: none
}

.header__nav a {
    display: flex;
    width: 100%;
    padding: 5px 0;
    padding-right: clamp(10px, 1.2vw, 18px)
}

.hero {
    margin-top: 85px;
    position: relative;
    background-color: #fff
}

@media screen and (max-width: 852px) {
    .hero {
        padding-top: 4%
    }
}

.hero__inner {
    position: relative;
    max-width: 1920px
}

.hero__wrap {
    padding-bottom: 3%;
    position: relative;
    align-items: flex-start
}

@media screen and (max-width: 852px) {
    .hero__wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 0;
        padding: 0 0 8%
    }
}

.hero__body {
    position: relative;
    z-index: 2;
    width: 48%;
    max-width: 840px;
    padding-top: 2%;
    color: #263443
}

@media screen and (max-width: 852px) {
    .hero__body {
        width: auto;
        margin-inline: auto;
        padding-top: 0;
        text-align: center
    }
}

.hero__body > span {
    position: relative;
    display: block;
    width: fit-content;
    min-width: 58%;
    margin-inline: auto;
    padding: 2% 4%;
    border-radius: 999px;
    background-color: #f9d888;
    color: #269774;
    font-size: clamp(10px, 1.3vw, 24px);
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    margin-bottom: 4%
}

@media screen and (max-width: 852px) {
    .hero__body > span {
        min-width: 66%;
        padding: 2% 5%;
        font-size: 1.8em;
        font-size: clamp(.9em, 4vw, 1.8em);
        margin-bottom: 3%
    }
}

.hero__body > span:after {
    content: "";
    position: absolute;
    bottom: -35%;
    left: 50%;
    width: 5%;
    height: 35%;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translate(-50%);
    background-color: #f9d888
}

.hero__body h1 {
    margin-top: 2%;
    font-size: clamp(28px, 3vw, 64px);
    font-weight: 900;
    line-height: 1.7;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .hero__body h1 {
        margin-top: 0;
        font-size: 3em;
        font-size: clamp(1.5em, 7vw, 3em);
        line-height: 1.7
    }
}

.hero__body h1 > span {
    display: block
}

.hero__body h1 > span:first-child {
    color: #10a879;
    font-size: clamp(28px, 3.3vw, 64px)
}

@media screen and (max-width: 852px) {
    .hero__body h1 > span:first-child {
        font-size: 1.2em;
        font-size: clamp(.7em, 6vw, 1.2em);
        line-height: 1.7
    }
}

.hero__body h1 > span:first-child span {
    display: inline;
    color: #263443;
    font-size: .7em
}

.hero__body p {
    margin-top: 2%;
    font-size: clamp(8px, 1.2vw, 20px);
    line-height: 1.6;
    letter-spacing: 0
}

.hero__body p span {
    color: #269774
}

@media screen and (max-width: 852px) {
    .hero__body p {
        text-align: left;
        margin-top: 4%;
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em);
        line-height: 1.7
    }
}

.hero__body > img {
    position: relative;
    display: block;
    width: 92%;
    max-width: 763px;
    margin-top: 3%;
    z-index: 1
}

@media screen and (max-width: 852px) {
    .hero__body > img {
        width: 100%;
        margin: 4% auto 0
    }
}

.hero__box {
    gap: 3%;
    align-items: flex-start;
    width: 92%;
    max-width: 754px;
    margin-top: 2%
}

@media screen and (max-width: 852px) {
    .hero__box {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin: 4% auto 0
    }
}

.hero__btn {
    width: 48.5%
}

@media screen and (max-width: 852px) {
    .hero__btn {
        width: 100%
    }
}

.hero__btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
    width: 100%;
    padding: 5% 8%;
    border: 2px solid #FD982E;
    border-radius: 999px;
    background-color: #fd982e;
    color: #fff
}

@media screen and (max-width: 852px) {
    .hero__btn a {
        position: relative;
        padding: 2% 4%
    }
}

.hero__btn svg {
    flex-shrink: 0;
    width: 18%;
    max-width: 64px;
    height: auto
}

@media screen and (max-width: 852px) {
    .hero__btn svg {
        position: absolute;
        left: 10%;
        width: 10%
    }
}

.hero__btn span {
    align-items: center;
    line-height: 1.3;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .hero__btn span {
        align-items: center
    }
}

.hero__btn span span:first-child {
    font-size: clamp(13px, 1.3vw, 24px);
    font-weight: 700
}

@media screen and (max-width: 852px) {
    .hero__btn span span:first-child {
        font-size: 2.5em;
        font-size: clamp(1.2em, 5vw, 2.5em)
    }
}

.hero__btn span span:nth-child(2) {
    margin-top: 2%;
    font-size: clamp(8px, 1vw, 18px)
}

@media screen and (max-width: 852px) {
    .hero__btn span span:nth-child(2) {
        font-size: 2em;
        font-size: clamp(1em, 3vw, 2em)
    }
}

.hero__btn + .hero__btn a {
    background-color: #fff;
    color: #fd982e
}

.hero__btn.hero__btn--download a {
    background-color: #fd982e;
    color: #fff
}

.hero__btn.hero__btn--download svg [fill]:not([fill=none]) {
    fill: #fff
}

.hero__btn.hero__btn--download svg [stroke] {
    stroke: #fff
}

.hero__btn.hero__btn--demo a {
    background-color: #fff;
    color: #fd982e
}

.hero__btn.hero__btn--demo svg [stroke] {
    stroke: #f18733
}

.hero__img {
    position: absolute;
    z-index: 1;
    top: 15%;
    right: 1%;
    width: 53%;
    max-width: 1022px
}

@media screen and (max-width: 852px) {
    .hero__img {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: auto;
        margin: 6% auto 0;
        transform: none
    }
}

.hero__img img {
    display: block
}

.hero__mockup {
    position: relative;
    z-index: 2;
    width: 100%
}

.hero__circle {
    position: absolute;
    z-index: 1;
    pointer-events: none
}

.hero__circle--01 {
    top: -22%;
    right: -16%;
    width: 48%
}

@media screen and (max-width: 852px) {
    .hero__circle--01 {
        top: -18%;
        right: -10%;
        width: 42%
    }
}

.hero__circle--02 {
    top: 30%;
    left: -5%;
    width: 45%
}

@media screen and (max-width: 852px) {
    .hero__circle--02 {
        top: 28%;
        left: -8%;
        width: 40%
    }
}

.hero__circle--03 {
    right: -5%;
    bottom: -22%;
    width: 43%
}

@media screen and (max-width: 852px) {
    .hero__circle--03 {
        right: -8%;
        bottom: -18%;
        width: 40%
    }
}

.footer {
    background-color: #002e1d;
    color: #fff
}

.footer__inner {
    max-width: 1680px
}

.footer__wrap {
    padding: 5% 0
}

.footer__body {
    justify-content: space-between;
    align-items: flex-start;
    gap: 5%
}

@media screen and (max-width: 852px) {
    .footer__body {
        width: 90%;
        margin-inline: auto;
        flex-direction: column;
        border-bottom: 1px solid rgba(244, 248, 251, .4)
    }
}

.footer__logo {
    width: 17%;
    max-width: 253px
}

@media screen and (max-width: 852px) {
    .footer__logo {
        width: 30%;
        margin-inline: auto;
        margin-bottom: 5%
    }
}

.footer__logo img {
    display: block;
    width: 100%
}

.footer__menu {
    justify-content: space-between;
    align-items: flex-start;
    width: 48%;
    gap: 6%
}

@media screen and (max-width: 852px) {
    .footer__menu {
        padding: 0 5%;
        width: 100%;
        flex-direction: column;
        border-bottom: 1px solid rgba(244, 248, 251, .4)
    }
}

.footer__list {
    width: 29.3333333333%;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .footer__list {
        width: 100%;
        margin-bottom: 10%
    }
}

.footer__list h2 {
    position: relative;
    padding-bottom: 18%;
    font-size: clamp(12px, 1.5vw, 24px);
    font-weight: 500;
    line-height: 1.4
}

@media screen and (max-width: 852px) {
    .footer__list h2 {
        padding-bottom: 3%;
        font-size: 1.8em;
        font-size: clamp(.9em, 4vw, 1.8em)
    }
}

.footer__list h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35%;
    max-width: 50px;
    height: 2px;
    background-color: #269774
}

@media screen and (max-width: 852px) {
    .footer__list h2:after {
        max-width: 30px;
        height: 1px
    }
}

.footer__list ul {
    margin-top: 25%
}

@media screen and (max-width: 852px) {
    .footer__list ul {
        margin-top: 5%
    }
}

.footer__list li {
    font-size: clamp(8px, 1.2vw, 18px);
    line-height: 1.5
}

@media screen and (max-width: 852px) {
    .footer__list li {
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.footer__list li + li {
    margin-top: 18%
}

@media screen and (max-width: 852px) {
    .footer__list li + li {
        margin-top: 5%
    }
}

.footer__list a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    width: 100%
}

.footer__list a:after {
    content: "";
    background-image: url(../images/arrow.svg);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5%;
    max-width: 10px;
    aspect-ratio: 10/15
}

@media screen and (max-width: 852px) {
    .footer__list a:after {
        width: 2%
    }
}

.footer__box {
    width: 22%;
    max-width: 367px
}

.footer__btn + .footer__btn {
    margin-top: 6%
}

.footer__btn a,
.footer__btn img {
    display: block;
    width: 100%
}

.footer .hero__box {
    margin: 0;
    width: 22%;
    max-width: 367px
}

@media screen and (max-width: 852px) {
    .footer .hero__box {
        padding: 5% 0;
        width: 85%;
        max-width: 100%;
        margin-inline: auto
    }
}

.footer .hero__btn {
    width: 100%;
    margin-bottom: 0
}

.footer .hero__btn.hero__btn--download {
    order: 1;
    margin-bottom: 5%
}

.footer .hero__btn.hero__btn--demo {
    order: 2
}

@media screen and (max-width: 852px) {
    .footer .hero__btn svg {
        left: 6%
    }
}

@media screen and (max-width: 852px) {
    .footer .hero__btn span span:nth-child(2) {
        font-size: clamp(.8em, 2vw, 2em)
    }
}

.footer .copy-right {
    padding-top: 2%;
    border-top: 1px solid rgba(244, 248, 251, .4);
    display: block;
    margin-top: 6%;
    font-size: clamp(10px, 1vw, 18px);
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .footer .copy-right {
        margin: 0;
        font-size: clamp(.6em, 3vw, 1.3em);
        border: none
    }
}

.safety {
    position: relative;
    max-width: 1920px;
    margin-inline: auto
}

@media screen and (min-width: 2300px) {
    .safety {
        overflow: visible
    }
}

.safety__circle {
    position: absolute;
    z-index: 0;
    pointer-events: none
}

.safety__circle--01 {
    top: -12%;
    left: -13%;
    width: 36%
}

@media screen and (max-width: 852px) {
    .safety__circle--01 {
        top: -5%
    }
}

.safety__circle--02 {
    top: -12%;
    right: -13%;
    width: 36%
}

@media screen and (max-width: 852px) {
    .safety__circle--02 {
        top: -5%
    }
}

.safety__inner {
    position: relative;
    z-index: 1;
    max-width: 1680px
}

@media screen and (min-width: 1024px) {
    .safety__inner {
        width: 75%
    }
}

.safety__wrap {
    padding: 6% 0 0
}

@media screen and (max-width: 852px) {
    .safety__wrap {
        padding: 8% 0 0
    }
}

.safety-data__head {
    text-align: center
}

.safety-data__head h2 {
    align-items: center;
    color: #263443;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0
}

.safety-data__head h2 span:first-child {
    position: relative;
    color: #269774;
    font-size: clamp(18px, 2vw, 30px);
    margin-bottom: 1%
}

@media screen and (max-width: 852px) {
    .safety-data__head h2 span:first-child {
        font-size: 1.8em;
        font-size: clamp(.9em, 4vw, 1.8em)
    }
}

.safety-data__head h2 span:first-child:before,
.safety-data__head h2 span:first-child:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14%;
    height: 2px;
    background-color: #269774
}

.safety-data__head h2 span:first-child:before {
    left: -18%;
    transform: rotate(55deg)
}

.safety-data__head h2 span:first-child:after {
    right: -18%;
    transform: rotate(-55deg)
}

.safety-data__head h2 span:nth-child(2) {
    color: #263443;
    font-size: clamp(30px, 4vw, 64px);
    margin-bottom: 1%
}

@media screen and (max-width: 852px) {
    .safety-data__head h2 span:nth-child(2) {
        font-size: 3em;
        font-size: clamp(1.5em, 7vw, 3em)
    }
}

.safety-data__head h2 span:nth-child(3) {
    color: #269774;
    font-size: clamp(38px, 5vw, 76px)
}

@media screen and (max-width: 852px) {
    .safety-data__head h2 span:nth-child(3) {
        font-size: 3em;
        font-size: clamp(1.5em, 7vw, 3em)
    }
}

.safety-data__head p {
    width: 82%;
    margin: 2% auto 0;
    color: #263443;
    font-size: clamp(12px, 1.2vw, 20px);
    line-height: 1.8;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .safety-data__head p {
        width: 92%;
        font-size: 1.3em;
        font-size: clamp(.6em, 3vw, 1.3em);
        text-align: left
    }
}

.safety-issue__inner {
    max-width: 1400px;
    margin-inline: auto
}

@media screen and (max-width: 852px) {
    .safety-issue__inner {
        padding: 5%
    }
}

.safety-issue__body {
    background-color: #fff
}

.safety-issue__body p {
    font-size: clamp(10px, .8vw, 16px);
    line-height: 1.5;
    width: 80%;
    margin-inline: auto
}

@media screen and (max-width: 852px) {
    .safety-issue__body p {
        width: 90%;
        font-size: clamp(.6em, 2vw, 1em)
    }
}

@media screen and (max-width: 852px) {
    .safety-issue__body {
        flex-direction: column;
        gap: 16px
    }
}

.safety-issue figure {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 2%;
    border-radius: 8px;
    background-color: #f5fbfb;
    text-align: center
}

@media screen and (max-width: 852px) {
    .safety-issue figure {
        min-height: auto;
        padding: 5%;
        text-align: left
    }
}

.safety-issue figure:nth-of-type(2) {
    background-color: #f9d8881a
}

.safety-issue figure > span {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    width: 50%;
    min-width: 44%;
    padding: 1% 5%;
    border-radius: 999px;
    background-color: #269774;
    color: #fff;
    font-size: clamp(11px, 1.2vw, 20px);
    font-weight: 700;
    line-height: 1.2
}

@media screen and (max-width: 852px) {
    .safety-issue figure > span {
        min-width: 80%;
        margin-inline: auto;
        font-size: 1.5em;
        font-size: clamp(.8em, 3vw, 1.5em);
        text-align: center
    }
}

.safety-issue figure small {
    font-size: .7em;
    font-weight: 500
}

.safety-issue__cont {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 5%
}

@media screen and (max-width: 852px) {
    .safety-issue__cont {
        gap: 5%;
        margin-top: 5%
    }
}

.safety-issue__cont img {
    width: 45%;
    max-width: 370px
}

@media screen and (max-width: 852px) {
    .safety-issue__cont img {
        width: 38%
    }
}

.safety-issue__box {
    flex: 1
}

.safety-issue__box figcaption {
    color: #269774;
    font-size: clamp(10px, 1.3vw, 24px);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15%
}

@media screen and (max-width: 852px) {
    .safety-issue__box figcaption {
        font-size: 2em;
        font-size: clamp(.8em, 4vw, 2em)
    }
}

.safety-issue__box p {
    margin-top: 3%;
    color: #263443;
    font-size: clamp(8px, .8vw, 14px);
    line-height: 1.7;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .safety-issue__box p {
        font-size: clamp(.6em, 2vw, 1em)
    }
}

.safety-issue__responsibility {
    position: relative;
    display: flex;
    width: 9%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #f05a5a;
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 700;
    line-height: 1.4;
    text-align: center
}

@media screen and (max-width: 852px) {
    .safety-issue__responsibility {
        width: 100%;
        padding-block: 4px;
        margin-bottom: 3%;
        font-size: clamp(.6em, 2vw, 1.3em)
    }
}

.safety-issue__responsibility:before,
.safety-issue__responsibility:after {
    content: "";
    width: 1px;
    flex: 1;
    border-left: 2px dotted #f3a0a0
}

@media screen and (max-width: 852px) {

    .safety-issue__responsibility:before,
    .safety-issue__responsibility:after {
        width: 18%;
        flex: none;
        border-top: 2px dotted #f3a0a0;
        border-left: 0
    }
}

@media screen and (max-width: 852px) {
    .safety-issue__responsibility {
        flex-direction: row;
        gap: 2%
    }
}

.safety-issue__responsibility > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-block: 8px;
    border-radius: 50%;
    background-color: #f05a5a;
    color: #fff;
    font-size: 18px
}

@media screen and (max-width: 852px) {
    .safety-issue__responsibility > span {
        width: 24px;
        height: 24px;
        margin-block: 0;
        font-size: 16px;
        font-size: clamp(12px, 3vw, 16px)
    }
}

.safety-issue__responsibility p {
    writing-mode: vertical-rl
}

@media screen and (max-width: 852px) {
    .safety-issue__responsibility p {
        writing-mode: horizontal-tb
    }
}

.safety-issue__wrap > p {
    font-weight: 500;
    margin-top: 3%;
    color: #263443;
    font-size: clamp(12px, 1.2vw, 20px);
    line-height: 1.7;
    text-align: center
}

@media screen and (max-width: 852px) {
    .safety-issue__wrap > p {
        margin-top: 6%;
        font-size: 1.5em;
        font-size: clamp(.6em, 2.5vw, 1.5em)
    }
}

.safety-issue__wrap > p span {
    font-size: 1.2em;
    color: #269774
}

.safety-issue ul {
    display: flex;
    width: 85%;
    margin: 2% auto 0;
    flex-direction: column;
    gap: 14px
}

@media screen and (max-width: 852px) {
    .safety-issue ul {
        width: 100%;
        margin-top: 5%;
        gap: 12px
    }
}

.safety-issue li {
    display: flex;
    align-items: center;
    gap: 3%;
    min-height: 96px;
    padding: 1.5% 4%;
    border: 1px solid #dfe8e8;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 14px #2634430f
}

@media screen and (max-width: 852px) {
    .safety-issue li {
        align-items: flex-start;
        gap: 2%;
        min-height: auto;
        padding: 2%
    }
}

.safety-issue li > img {
    width: 10%;
    max-width: 120px;
    min-width: 50px
}

@media screen and (max-width: 852px) {
    .safety-issue li > img {
        width: 20%;
        max-width: 100%
    }
}

.safety-issue li > div {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    position: relative;
    padding-left: 4%
}

@media screen and (max-width: 852px) {
    .safety-issue li > div {
        padding-left: clamp(30px, 6%, 55px)
    }
}

.safety-issue li span {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3%;
    aspect-ratio: 1;
    max-width: 40px;
    border-radius: 50%;
    background-color: #269774;
    color: #fff;
    font-size: clamp(10px, 1vw, 16px);
    font-weight: 700;
    line-height: 1
}

@media screen and (max-width: 852px) {
    .safety-issue li span {
        width: 8%;
        max-width: 30px;
        font-size: 1em;
        font-size: clamp(.5em, 2vw, 1em)
    }
}

.safety-issue li h3 {
    color: #263443;
    font-size: clamp(15px, 1.3vw, 22px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2
}

@media screen and (max-width: 852px) {
    .safety-issue li h3 {
        font-size: 1.5em;
        font-size: clamp(.8em, 3vw, 1.5em)
    }
}

.safety-issue li p {
    width: 100%;
    color: #263443;
    font-size: clamp(10px, 1vw, 16px);
    line-height: 1.7;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .safety-issue li p {
        font-size: 1em;
        font-size: clamp(.8em, 2.5vw, 1em)
    }
}

.keepit {
    margin-top: -100px;
    position: relative;
    max-width: 1920px;
    margin-inline: auto
}

@media screen and (max-width: 852px) {
    .keepit {
        margin-top: -10%
    }
}

@media screen and (min-width: 2300px) {
    .keepit {
        overflow: visible
    }
}

.keepit__circle {
    position: absolute;
    z-index: 0;
    pointer-events: none
}

.keepit__circle--01 {
    top: 0%;
    left: -5%;
    width: 30%
}

.keepit__circle--02 {
    right: -9%;
    bottom: -5%;
    width: 36%
}

.keepit__inner {
    position: relative;
    z-index: 1;
    max-width: 1680px
}

@media screen and (min-width: 1024px) {
    .keepit__inner {
        width: 85%
    }
}

.keepit__inner > img {
    width: 65%;
    max-width: 980px;
    display: block;
    margin-top: 15%;
    margin-inline: auto
}

@media screen and (max-width: 852px) {
    .keepit__inner > img {
        width: 90%
    }
}

.keepit__wrap {
    justify-content: space-between;
    align-items: center;
    gap: 5%;
    padding: 6% 0
}

@media screen and (max-width: 852px) {
    .keepit__wrap {
        flex-direction: column
    }
}

.keepit__body {
    width: 48%;
    color: #263443;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .keepit__body {
        width: auto;
        text-align: center
    }
}

.keepit__body > img {
    display: block;
    width: 90%;
    margin-top: 7%
}

@media screen and (max-width: 852px) {
    .keepit__body > img {
        width: auto
    }
}

.keepit h2 {
    align-items: flex-start;
    font-weight: 700;
    line-height: 1.5;
    color: #263443;
    font-size: clamp(25px, 3vw, 50px);
    text-align: center
}

@media screen and (max-width: 852px) {
    .keepit h2 {
        align-items: center;
        font-size: 3.3em;
        font-size: clamp(1.5em, 7vw, 3.3em)
    }
}

.keepit h3 {
    margin-top: 7%;
    font-size: clamp(16px, 1.8vw, 30px);
    font-weight: 700;
    line-height: 1.7
}

@media screen and (max-width: 852px) {
    .keepit h3 {
        margin-top: 2%;
        font-size: 2em;
        font-size: clamp(1em, 4vw, 2em)
    }
}

.keepit h3 span {
    color: #269774
}

.keepit p {
    margin-top: 4%;
    font-size: clamp(11px, 1.2vw, 20px);
    line-height: 1.9
}

@media screen and (max-width: 852px) {
    .keepit p {
        text-align: left;
        font-size: clamp(.5em, 2.8vw, 1.3em)
    }
}

.keepit__img {
    width: 47%;
    max-width: 770px
}

@media screen and (max-width: 852px) {
    .keepit__img {
        width: auto
    }
}

.keepit__img img {
    display: block;
    width: 100%
}

.security {
    position: relative;
    background-color: #002e1d;
    z-index: 1
}

.security__inner {
    max-width: 1800px
}

.security__wrap {
    justify-content: space-between;
    align-items: center;
    gap: 2%;
    padding: 1% 0
}

@media screen and (max-width: 852px) {
    .security__wrap {
        padding: 3% 0;
        flex-direction: column
    }
}

.security__wrap > img {
    display: block;
    width: 40%;
    max-width: 640px
}

@media screen and (max-width: 852px) {
    .security__wrap > img {
        width: auto;
        max-width: 90%
    }
}

.security__body {
    width: 60%;
    color: #fff;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .security__body {
        width: 80%
    }
}

.security h2 {
    text-align: center;
    position: relative;
    padding-bottom: 4%;
    font-size: clamp(26px, 3.1vw, 64px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .05em
}

@media screen and (max-width: 852px) {
    .security h2 {
        font-size: 3.3em;
        font-size: clamp(1.6em, 7vw, 3.3em)
    }
}

.security h2 span {
    color: #00d37f;
    font-size: 1.3em
}

.security p {
    margin-top: 4%;
    font-size: clamp(12px, 1.5vw, 24px);
    line-height: 1.8;
    font-weight: 500
}

@media screen and (max-width: 852px) {
    .security p {
        text-align: center;
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.security__box {
    gap: 3%;
    width: 92%;
    max-width: 754px;
    margin-top: 6%
}

.security__btn {
    width: 48.5%
}

.security__btn a,
.security__btn img {
    display: block;
    width: 100%
}

.security .hero__btn:nth-of-type(1) {
    margin-bottom: 2%
}

@media screen and (max-width: 852px) {
    .security .hero__btn:nth-of-type(1) {
        order: 2
    }
}

.security__wrapper {
    position: relative;
    max-width: 1920px;
    margin-inline: auto
}

.security__wrapper-inner {
    max-width: 1470px;
    margin-inline: auto
}

@media screen and (max-width: 852px) {
    .security__wrapper-inner {
        width: 100%
    }
}

@media screen and (min-width: 1024px) {
    .security__wrapper-inner {
        width: 75%
    }
}

.security__wrapper .security__circle {
    position: absolute;
    z-index: 0;
    pointer-events: none
}

.security__wrapper .security__circle--01 {
    top: -35%;
    left: -8%;
    width: 34%
}

@media screen and (max-width: 852px) {
    .security__wrapper .security__circle--01 {
        display: none
    }
}

.security__wrapper .security__circle--02 {
    bottom: -50%;
    left: -8%;
    width: 34%
}

@media screen and (max-width: 852px) {
    .security__wrapper .security__circle--02 {
        display: none
    }
}

.security__wrapper .security__circle--03 {
    bottom: -15%;
    right: -8%;
    width: 34%
}

@media screen and (max-width: 852px) {
    .security__wrapper .security__circle--03 {
        display: none
    }
}

.security.security--cta {
    margin: 8% 0 12%
}

@media screen and (max-width: 852px) {
    .security.security--cta {
        margin: 12% 0 20%;
        padding: 10% 0
    }
}

.security.security--cta h2 {
    font-size: clamp(22px, 2.3vw, 47px)
}

@media screen and (max-width: 852px) {
    .security.security--cta h2 {
        font-size: clamp(1.6em, 7vw, 3.3em)
    }
}

.security.security--cta p {
    font-size: clamp(12px, 1.3vw, 18px)
}

@media screen and (max-width: 852px) {
    .security.security--cta p {
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.security.security--cta .hero__box {
    width: 100%
}

.reason {
    position: relative;
    max-width: 1920px;
    margin-inline: auto
}

@media screen and (min-width: 2300px) {
    .reason {
        overflow: visible
    }
}

.reason__inner {
    max-width: 1680px;
    position: relative;
    z-index: 1
}

.reason__circle {
    position: absolute;
    z-index: 0;
    pointer-events: none
}

.reason__circle--01 {
    top: -5%;
    right: -8%;
    width: 34%
}

@media screen and (max-width: 852px) {
    .reason__circle--01 {
        top: -5%
    }
}

.reason__wrap {
    padding: 7% 0
}

.reason h2 {
    align-items: center;
    color: #263443;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center
}

.reason h2 > img {
    display: block;
    width: 10%;
    max-width: 180px
}

@media screen and (max-width: 852px) {
    .reason h2 > img {
        width: 20%;
        max-width: 300px;
        margin-bottom: 3%
    }
}

.reason h2 > span:nth-child(2) {
    font-size: clamp(30px, 4.3vw, 76px)
}

@media screen and (max-width: 852px) {
    .reason h2 > span:nth-child(2) {
        font-size: clamp(1.6em, 7vw, 3.3em)
    }
}

.reason h2 > span:nth-child(2) span {
    color: #269774;
    font-size: 1.5em
}

@media screen and (max-width: 852px) {
    .reason h2 > span:nth-child(2) span {
        line-height: 0
    }
}

.reason h2 > span:nth-child(3) {
    font-weight: 400;
    margin-top: 2%;
    font-size: clamp(12px, 1.3vw, 20px);
    line-height: 1.8
}

@media screen and (max-width: 852px) {
    .reason h2 > span:nth-child(3) {
        font-size: clamp(.6em, 3vw, 1.3em)
    }
}

.reason__body {
    justify-content: space-between;
    align-items: center;
    gap: 5%;
    margin-top: 6%
}

@media screen and (max-width: 852px) {
    .reason__body {
        flex-direction: column
    }
}

.reason__cont {
    width: 48%;
    color: #263443;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .reason__cont {
        width: 95%;
        margin-bottom: 5%;
        max-width: 500px
    }
}

.reason__cont h3 {
    position: relative;
    padding-bottom: 4%;
    font-size: clamp(25px, 2.8vw, 50px);
    font-weight: 700;
    line-height: 1.5
}

@media screen and (max-width: 852px) {
    .reason__cont h3 {
        font-size: clamp(1.2em, 5vw, 2.5em)
    }
}

.reason__cont h3:before {
    content: "";
    background-image: url(../images/01.svg);
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10%;
    width: 45%;
    max-width: 463px;
    aspect-ratio: 463/369
}

@media screen and (max-width: 852px) {
    .reason__cont h3:before {
        width: 20%;
        top: 0;
        left: -5%
    }
}

.reason__cont h3:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    max-width: 58px;
    height: 4px;
    background-color: #269774
}

.reason__cont h3 span {
    color: #269774
}

@media screen and (max-width: 852px) {
    .reason__cont h3 span {
        font-size: clamp(.9em, 3vw, 1.2em)
    }
}

.reason__cont p {
    margin-top: 5%;
    font-size: clamp(11px, 1.1vw, 20px);
    line-height: 1.9
}

@media screen and (max-width: 852px) {
    .reason__cont p {
        font-size: clamp(.5em, 2.8vw, 1em)
    }
}

.reason__cont > img {
    display: block;
    width: 60%;
    max-width: 400px;
    margin-top: 6%
}

@media screen and (max-width: 852px) {
    .reason__cont > img {
        width: auto;
        max-width: 100%
    }
}

.reason__box {
    width: 60%;
    margin-top: 6%;
    padding: 2% 3%;
    gap: 9px;
    border-radius: 20px;
    background-color: #fff;
    color: #269774;
    font-size: clamp(12px, 1.5vw, 24px);
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 4px 14px #2634430f;
    border: 1px solid #dfe8e8;
    z-index: 1;
    position: relative
}

@media screen and (max-width: 852px) {
    .reason__box {
        width: 80%;
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.reason__box-icon {
    flex: 0 0 auto;
    width: 30%;
    aspect-ratio: 1
}

.reason__img {
    width: 47%;
    max-width: 805px
}

@media screen and (max-width: 852px) {
    .reason__img {
        width: auto
    }
}

.reason__img img {
    display: block;
    width: 100%
}

.feature {
    position: relative;
    max-width: 1920px;
    margin-inline: auto
}

@media screen and (min-width: 2300px) {
    .feature {
        overflow: visible
    }
}

.feature__circle {
    position: absolute;
    z-index: 0;
    pointer-events: none
}

.feature__circle--01 {
    top: -15%;
    left: -8%;
    width: 34%
}

@media screen and (max-width: 852px) {
    .feature__circle--01 {
        top: -5%
    }
}

.feature__inner {
    position: relative;
    z-index: 1;
    max-width: 1680px
}

.feature__wrap {
    padding: 7% 0
}

.feature h2 {
    position: relative;
    align-items: center;
    color: #263443;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center
}

.feature h2:after {
    content: "";
    background-image: url(../images/02.svg);
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10%;
    width: 30%;
    max-width: 463px;
    aspect-ratio: 463/369
}

@media screen and (max-width: 852px) {
    .feature h2:after {
        top: auto;
        transform: none;
        bottom: -15%;
        right: 0
    }
}

.feature h2 span:first-child {
    position: relative;
    color: #269774;
    font-size: clamp(18px, 2.5vw, 30px);
    line-height: 1.4
}

@media screen and (max-width: 852px) {
    .feature h2 span:first-child {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.feature h2 span:first-child:before,
.feature h2 span:first-child:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 50%;
    height: 2px;
    background-color: #269774
}

.feature h2 span:first-child:before {
    right: 120%
}

.feature h2 span:first-child:after {
    left: 120%
}

.feature h2 span:nth-child(2) {
    margin-top: 1%;
    font-size: clamp(28px, 4vw, 64px)
}

@media screen and (max-width: 852px) {
    .feature h2 span:nth-child(2) {
        font-size: 2.5em;
        font-size: clamp(1.3em, 6vw, 2.8em)
    }
}

.feature h2 span:nth-child(2) span {
    color: #269774
}

.feature__body {
    justify-content: space-between;
    align-items: center;
    gap: 5%;
    margin-top: 5%
}

@media screen and (max-width: 852px) {
    .feature__body {
        flex-direction: column
    }
}

.feature__cont {
    background-color: #fff;
    width: 45%
}

@media screen and (max-width: 852px) {
    .feature__cont {
        width: 90%;
        margin-bottom: 5%
    }
}

.feature__cont > span {
    display: block;
    width: fit-content;
    margin-bottom: 5%;
    padding: 2% 8%;
    border-radius: 999px;
    background-color: #269774;
    color: #fff;
    font-size: clamp(12px, 1.4vw, 24px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .feature__cont > span {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.feature__item {
    align-items: center;
    gap: 4%;
    padding: 4% 0;
    border-bottom: 1px solid #e4e8e8
}

.feature__item img {
    width: 14%;
    max-width: 90px
}

.feature__box {
    flex: 1;
    color: #263443;
    letter-spacing: 0
}

.feature__box h3 {
    color: #269774;
    font-size: clamp(14px, 1.6vw, 24px);
    font-weight: 700;
    line-height: 1.5
}

@media screen and (max-width: 852px) {
    .feature__box h3 {
        font-size: 1.3em;
        font-size: clamp(.9em, 3vw, 1.3em)
    }
}

.feature__box p {
    margin-top: 3%;
    font-size: clamp(10px, 1vw, 18px);
    line-height: 1.7
}

@media screen and (max-width: 852px) {
    .feature__box p {
        font-size: 1em;
        font-size: clamp(.8em, 2.5vw, 1em)
    }
}

.feature__img {
    width: 50%;
    max-width: 820px
}

@media screen and (max-width: 852px) {
    .feature__img {
        width: 90%
    }
}

.feature__img img {
    display: block;
    width: 100%
}

.simple {
    position: relative;
    max-width: 1920px;
    margin-inline: auto
}

@media screen and (min-width: 2300px) {
    .simple {
        overflow: visible
    }
}

.simple__circle {
    position: absolute;
    z-index: 0;
    pointer-events: none
}

.simple__circle--01 {
    right: -8%;
    top: -10%;
    width: 36%
}

.simple__inner {
    max-width: 1680px
}

.simple__wrap {
    padding: 7% 0
}

.simple__body {
    justify-content: space-between;
    align-items: center;
    gap: 5%
}

@media screen and (max-width: 852px) {
    .simple__body {
        flex-direction: column
    }
}

.simple__cont {
    width: 48%;
    color: #263443;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .simple__cont {
        width: 90%
    }
}

.simple__cont > img {
    display: block;
    width: 90%;
    margin-top: 7%
}

.simple h2 {
    position: relative;
    padding-bottom: 2%;
    font-size: clamp(28px, 3.5vw, 64px);
    font-weight: 700;
    line-height: 1.7
}

@media screen and (max-width: 852px) {
    .simple h2 {
        font-size: 3em;
        font-size: clamp(1.5em, 7vw, 3em)
    }
}

.simple h2 span {
    color: #269774
}

.simple h2:after {
    content: "";
    background-image: url(../images/03.svg);
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0%;
    width: 50%;
    max-width: 463px;
    aspect-ratio: 463/369
}

@media screen and (max-width: 852px) {
    .simple h2:after {
        width: 40%
    }
}

.simple p {
    margin-top: 5%;
    font-size: clamp(11px, 1.2vw, 20px);
    line-height: 1.9
}

@media screen and (max-width: 852px) {
    .simple p {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.simple__items {
    gap: 2%;
    flex: 1 1 auto;
    justify-content: space-between
}

@media screen and (max-width: 852px) {
    .simple__items {
        margin-bottom: 5%
    }
}

.simple__box {
    margin-top: 5%;
    padding: 2%;
    width: 33%;
    background-color: #ebf5f5
}

.simple__box img {
    display: block;
    width: 70%;
    margin-inline: auto;
    aspect-ratio: 1/.8;
    object-fit: cover
}

.simple__box p {
    font-weight: 700;
    text-align: center;
    font-size: clamp(9px, .8vw, 18px)
}

@media screen and (max-width: 852px) {
    .simple__box p {
        font-size: 1.2em;
        font-size: clamp(.6em, 2.5vw, 1.2em)
    }
}

.simple__box:nth-of-type(3) img {
    position: relative;
    right: 8px
}

.simple__img {
    z-index: 1;
    width: 47%;
    max-width: 830px
}

@media screen and (max-width: 852px) {
    .simple__img {
        width: 90%
    }
}

.simple__img img {
    display: block;
    width: 100%
}

.trust {
    position: relative
}

.trust__circle {
    position: absolute;
    z-index: 0;
    pointer-events: none
}

.trust__circle--01 {
    top: 5%;
    left: -15%;
    width: 40%
}

.trust__circle--02 {
    top: 10%;
    right: -15%;
    width: 40%
}

.trust__inner {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin-inline: auto
}

@media screen and (min-width: 1024px) {
    .trust__inner {
        width: 90%
    }
}

.trust__wrap {
    padding: 6% 0;
    z-index: 1;
    position: relative
}

.trust h2 {
    align-items: center;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center
}

.trust h2 > span:first-child {
    font-weight: 900;
    position: relative;
    color: #269774;
    margin-bottom: 5%;
    font-size: clamp(15px, 2vw, 30px);
    letter-spacing: .02em
}

@media screen and (max-width: 852px) {
    .trust h2 > span:first-child {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em);
        margin-bottom: 15%
    }
}

.trust h2 > span:first-child:before {
    content: "";
    background-image: url(../images/04.svg);
    background-size: contain;
    position: absolute;
    transform: translate(-50%, -30%);
    top: 50%;
    left: 50%;
    width: 110%;
    aspect-ratio: 463/369
}

@media screen and (max-width: 852px) {
    .trust h2 > span:first-child:before {
        transform: translate(-50%, -10%);
        width: 80%
    }
}

.trust h2 > span:first-child:after {
    content: "";
    position: absolute;
    bottom: -60%;
    left: 50%;
    width: 50%;
    max-width: 90px;
    height: 3px;
    transform: translate(-50%);
    background-color: #269774
}

.trust h2 > span:nth-child(2) {
    font-size: clamp(26px, 2.8vw, 58px)
}

@media screen and (max-width: 852px) {
    .trust h2 > span:nth-child(2) {
        font-size: 2.5em;
        font-size: clamp(1.2em, 5vw, 2.5em)
    }
}

.trust h2 > span:nth-child(2) span {
    color: #f18733
}

.trust h2 > span:nth-child(3) {
    margin-top: 1%;
    font-size: clamp(16px, 2vw, 36px)
}

@media screen and (max-width: 852px) {
    .trust h2 > span:nth-child(3) {
        font-size: 1.5em;
        font-size: clamp(.7em, 3vw, 1.5em)
    }
}

.trust__cont {
    justify-content: center;
    align-items: stretch;
    gap: 2%;
    width: 90%;
    max-width: 1685px;
    margin: 5% auto 0
}

@media screen and (max-width: 852px) {
    .trust__cont {
        width: auto;
        flex-direction: column;
        gap: 10px
    }
}

.trust__item {
    width: 32%;
    padding: 5% 3%;
    border-radius: 8px;
    background-color: #dff1f3;
    color: #263443;
    text-align: center;
    letter-spacing: 0;
    box-shadow: 0 4px 4px #00000040
}

@media screen and (max-width: 852px) {
    .trust__item {
        width: auto;
        display: flex;
        align-items: flex-start;
        text-align: left;
        gap: 5%
    }
}

.trust__item h3 {
    color: #269774;
    font-size: clamp(13px, 1.5vw, 30px);
    font-weight: 700;
    line-height: 1.5
}

@media screen and (max-width: 852px) {
    .trust__item h3 {
        margin-bottom: 10%;
        font-size: 1.8em;
        font-size: clamp(.9em, 4vw, 1.8em)
    }
}

.trust__item p {
    font-size: clamp(10px, 1.5vw, 20px);
    line-height: 1.8;
    text-align: left
}

@media screen and (max-width: 852px) {
    .trust__item p {
        font-size: 1.3em;
        font-size: clamp(.9em, 3vw, 1.3em)
    }
}

.trust__box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px
}

@media screen and (max-width: 852px) {
    .trust__box {
        width: 65%;
        min-height: auto
    }
}

.trust__icon {
    position: relative;
    display: block;
    width: 80%;
    max-width: 320px;
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    background-color: #f5fbfb;
    margin-bottom: 5%
}

@media screen and (max-width: 852px) {
    .trust__icon {
        width: 35%
    }
}

.support {
    background-color: #ebf5f5;
    position: relative;
    z-index: 1;
    overflow: hidden;
    max-width: 1920px;
    margin-inline: auto
}

@media screen and (min-width: 2300px) {
    .support {
        overflow: visible
    }
}

.support__circle {
    position: absolute;
    z-index: 0;
    pointer-events: none
}

.support__circle--01 {
    top: -10%;
    left: -10%;
    width: 22%
}

.support__circle--02 {
    right: -5%;
    bottom: 0%;
    width: 24%
}

.support__visual {
    position: absolute;
    top: 8%;
    right: 0;
    z-index: 0;
    display: block;
    width: 45%;
    max-width: 760px
}

@media screen and (max-width: 852px) {
    .support__visual {
        top: 4%;
        width: 55%;
        height: 20%;
        object-fit: cover
    }
}

.support__inner {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin-inline: auto
}

.support__wrap {
    padding: 7% 0 8%
}

.support__wrap > p {
    width: auto;
    margin-top: 3%;
    color: #263443;
    font-size: clamp(12px, 2vw, 24px);
    line-height: 1.9;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .support__wrap > p {
        width: auto;
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.support h2 {
    position: relative;
    padding-bottom: 3%;
    color: #263443;
    font-size: clamp(32px, 4vw, 64px);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .support h2 {
        font-size: 3em;
        font-size: clamp(1.5em, 7vw, 3em)
    }
}

.support h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 18%;
    max-width: 160px;
    height: 3px;
    background-color: #269774
}

.support h2 span {
    color: #269774
}

.support__body {
    align-items: stretch;
    gap: 2%;
    margin-top: 8%;
    width: 95%;
    margin-inline: auto
}

@media screen and (max-width: 852px) {
    .support__body {
        width: auto;
        flex-direction: column;
        gap: 20px
    }
}

.support__card {
    position: relative;
    width: 32%;
    padding: 10% 3% 7%;
    border: 1px solid #dfe8e8;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 18px #2634430f;
    color: #263443;
    text-align: center;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .support__card {
        width: auto;
        display: flex;
        gap: 5%;
        text-align: left;
        align-items: center
    }
}

.support__card img {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 40%;
    max-width: 230px;
    transform: translate(-50%, -50%)
}

@media screen and (max-width: 852px) {
    .support__card img {
        width: 25%;
        position: static;
        left: auto;
        transform: none
    }
}

.support__card h3 {
    color: #263443;
    font-size: clamp(14px, 1.6vw, 30px);
    font-weight: 700;
    line-height: 1.55
}

@media screen and (max-width: 852px) {
    .support__card h3 {
        font-size: 1.8em;
        font-size: clamp(.9em, 4vw, 1.8em)
    }
}

.support__card p {
    margin-top: 6%;
    font-size: clamp(9px, 1vw, 18px);
    line-height: 1.8;
    text-align: left
}

@media screen and (max-width: 852px) {
    .support__card p {
        font-size: 1.3em;
        font-size: clamp(.6em, 3vw, 1.3em)
    }
}

.support__card p span {
    color: #269774;
    font-weight: 700
}

@media screen and (max-width: 852px) {
    .support__box {
        width: 75%
    }
}

.clumn {
    background-color: #fff
}

.clumn__inner {
    max-width: 1600px
}

.clumn__wrap {
    padding: 8% 0
}

.clumn__head {
    color: #263443;
    text-align: center;
    letter-spacing: 0
}

.clumn__head h2 {
    align-items: center;
    font-weight: 700;
    line-height: 1.4
}

.clumn__head h2 span:first-child {
    position: relative;
    color: #269774;
    font-size: clamp(15px, 2.5vw, 30px);
    letter-spacing: .05em;
    margin-bottom: 2%
}

@media screen and (max-width: 852px) {
    .clumn__head h2 span:first-child {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.clumn__head h2 span:first-child:before,
.clumn__head h2 span:first-child:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 70%;
    height: 2px;
    background-color: #269774
}

.clumn__head h2 span:first-child:before {
    right: 135%
}

.clumn__head h2 span:first-child:after {
    left: 135%
}

.clumn__head h2 span:nth-child(2) {
    margin-top: 1%;
    font-size: clamp(32px, 4vw, 64px)
}

@media screen and (max-width: 852px) {
    .clumn__head h2 span:nth-child(2) {
        font-size: 3em;
        font-size: clamp(1.5em, 7vw, 3em)
    }
}

.clumn__head p {
    margin-top: 2%;
    font-size: clamp(12px, 2vw, 24px);
    line-height: 1.8
}

@media screen and (max-width: 852px) {
    .clumn__head p {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.clumn__slider {
    width: 90%;
    margin: 5% auto 0;
    padding-bottom: 1%
}

.clumn .swiper-wrapper {
    align-items: stretch
}

.clumn .swiper-slide {
    height: auto
}

.clumn__card {
    padding: 2% 2% 6%;
    overflow: hidden;
    border: 1px solid #91979D;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 4px 18px #2634430f
}

.clumn__card > a {
    display: block;
    height: 100%;
    color: inherit
}

.clumn__img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 344/190;
    padding: 12% 0 3%;
    background-color: #f5fbfb;
    margin-bottom: 10%;
    border-radius: 12px
}

.clumn__img span {
    position: absolute;
    z-index: 1;
    top: 0%;
    left: 0%;
    padding: 2% 4%;
    background-color: #269774;
    color: #fff;
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 700;
    line-height: 1.4;
    border-radius: 8px
}

@media screen and (max-width: 852px) {
    .clumn__img span {
        font-size: 1em;
        font-size: clamp(.8em, 2.5vw, 1em)
    }
}

.clumn__img img {
    display: block;
    width: 90%;
    object-fit: contain
}

.clumn__img--empty {
    background-color: #f5fbfb
}

.clumn__cont {
    color: #263443;
    letter-spacing: 0
}

.clumn__cont > span {
    color: #000;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1.5
}

@media screen and (max-width: 852px) {
    .clumn__cont > span {
        font-size: clamp(.6em, 3vw, 1.3em)
    }
}

.clumn__cont h3 {
    margin-top: 4%;
    font-size: clamp(11px, 1.5vw, 24px);
    font-weight: 700;
    line-height: 1.6;
    color: #000
}

@media screen and (max-width: 852px) {
    .clumn__cont h3 {
        font-size: 1.5em;
        font-size: clamp(.8em, 3vw, 1.5em)
    }
}

.clumn__cont p:not(.clumn__link) {
    margin-top: 5%;
    font-size: clamp(7px, .9vw, 16px);
    line-height: 2
}

@media screen and (max-width: 852px) {
    .clumn__cont p:not(.clumn__link) {
        font-size: clamp(.6em, 3vw, 1.3em)
    }
}

.clumn__cont .clumn__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10%;
    color: #269774;
    font-size: clamp(10px, .9vw, 16px);
    font-weight: 700;
    line-height: 1.5
}

@media screen and (max-width: 852px) {
    .clumn__cont .clumn__link {
        font-size: clamp(.9em, 3vw, 1.3em)
    }
}

.clumn__cont .clumn__link svg {
    width: .7em;
    height: auto
}

.clumn__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3%;
    margin-top: 3%
}

.clumn .swiper-pagination {
    position: static;
    width: auto;
    line-height: 1
}

.clumn .swiper-pagination-bullets.swiper-pagination-horizontal {
    width: 20%
}

@media screen and (max-width: 852px) {
    .clumn .swiper-pagination-bullets.swiper-pagination-horizontal {
        width: 40%
    }
}

.clumn .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 6px;
    background-color: #dfe8e8;
    opacity: 1
}

.clumn .swiper-pagination-bullet-active {
    background-color: #269774
}

.clumn__more {
    display: flex;
    align-items: center;
    gap: .8em;
    color: #269774;
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 700;
    line-height: 1.5
}

@media screen and (max-width: 852px) {
    .clumn__more {
        font-size: 1.3em;
        font-size: clamp(.9em, 3vw, 1.3em)
    }
}

.clumn__more svg {
    width: .7em;
    height: auto
}

.faq {
    background-color: #ebf5f5
}

.faq__inner {
    max-width: 1470px
}

@media screen and (min-width: 1024px) {
    .faq__inner {
        width: 75%
    }
}

.faq__wrap {
    padding: 7% 0
}

.faq__head {
    color: #263443;
    text-align: center;
    letter-spacing: 0
}

.faq__head h2 {
    align-items: center;
    font-weight: 700;
    line-height: 1.4
}

.faq__head h2 span:first-child {
    position: relative;
    color: #269774;
    font-size: clamp(15px, 2.5vw, 30px);
    letter-spacing: .05em
}

@media screen and (max-width: 852px) {
    .faq__head h2 span:first-child {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.faq__head h2 span:first-child:before,
.faq__head h2 span:first-child:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 70%;
    height: 2px;
    background-color: #269774
}

.faq__head h2 span:first-child:before {
    right: 135%
}

.faq__head h2 span:first-child:after {
    left: 135%
}

.faq__head h2 span:nth-child(2) {
    margin-top: 1%;
    font-size: clamp(32px, 4vw, 64px)
}

@media screen and (max-width: 852px) {
    .faq__head h2 span:nth-child(2) {
        font-size: 3em;
        font-size: clamp(1.5em, 7vw, 3em)
    }
}

.faq__head p {
    font-weight: 500;
    margin-top: 2%;
    font-size: clamp(12px, 2vw, 24px);
    line-height: 1.8
}

@media screen and (max-width: 852px) {
    .faq__head p {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.faq__list {
    margin: 5% auto 0
}

.faq details {
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 18px #2634430f
}

.faq details + details {
    margin-top: 3%
}

.faq details[open] {
    padding-bottom: 1%
}

.faq summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3%;
    padding: 3% 7% 3% 3%;
    color: #263443;
    font-size: clamp(12px, 1.5vw, 20px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
    cursor: pointer;
    list-style: none
}

@media screen and (max-width: 852px) {
    .faq summary {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary:before {
    content: "Q";
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2em;
    max-width: 46px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #269774;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700
}

@media screen and (max-width: 852px) {
    .faq summary:before {
        font-size: 1em;
        font-size: clamp(.8em, 2.5vw, 1em)
    }
}

.faq summary:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 3%;
    width: .6em;
    aspect-ratio: 1;
    border-right: 2px solid #269774;
    border-bottom: 2px solid #269774;
    transform: translateY(-65%) rotate(45deg)
}

.faq details[open] summary:after {
    transform: translateY(-35%) rotate(225deg)
}

.faq details p {
    position: relative;
    margin: 0 2%;
    padding: 2% 4% 2% 8%;
    border-radius: 6px;
    font-weight: 500;
    background-color: #ebf5f5;
    color: #263443;
    font-size: clamp(11px, 1.1vw, 16px);
    line-height: 1.8;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .faq details p {
        padding: 2% 4% 2% 10%;
        font-size: 1.3em;
        font-size: clamp(.6em, 3vw, 1.3em)
    }
}

.faq details p:before {
    content: "A";
    position: absolute;
    top: 50%;
    left: 3%;
    display: grid;
    place-items: center;
    width: 2.2em;
    max-width: 46px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #269774;
    color: #fff;
    font-size: 1.4em;
    font-weight: 700;
    transform: translateY(-50%)
}

@media screen and (max-width: 852px) {
    .faq details p:before {
        top: 15%;
        left: 2%;
        font-size: clamp(.8em, 2.5vw, 1em)
    }
}

.contact {
    position: relative;
    max-width: 1920px;
    margin-inline: auto;
    background-color: #fff
}

@media screen and (min-width: 2300px) {
    .contact {
        overflow: visible
    }
}

.contact__circle {
    position: absolute;
    pointer-events: none;
    z-index: 0
}

.contact__circle--01 {
    top: 0;
    left: -5%;
    width: 30%
}

.contact__circle--02 {
    left: -8%;
    top: 70%;
    transform: translateY(-50%);
    width: 26%
}

.contact__circle--03 {
    right: -8%;
    top: 50%;
    transform: translateY(-50%);
    width: 26%
}

.contact__inner {
    position: relative;
    max-width: 1680px;
    z-index: 1
}

.contact__wrap {
    padding: 7% 0
}

.contact__head {
    color: #263443;
    text-align: center;
    letter-spacing: 0
}

.contact__head h2 span {
    display: block;
    margin-top: 3%;
    font-size: clamp(25px, 4vw, 55px);
    font-weight: 700;
    line-height: 1.4
}

@media screen and (max-width: 852px) {
    .contact__head h2 span {
        font-size: 2.5em;
        font-size: clamp(1.2em, 5vw, 2.5em)
    }
}

.contact__head img {
    display: block;
    width: 40%;
    max-width: 800px;
    margin-inline: auto
}

@media screen and (max-width: 852px) {
    .contact__head img {
        width: 60%
    }
}

.contact__head p {
    margin-top: 2%;
    font-size: clamp(12px, 2vw, 20px);
    line-height: 1.8
}

@media screen and (max-width: 852px) {
    .contact__head p {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.contact__form {
    position: relative;
    width: 90%;
    margin: 6% auto 0;
    padding: 5%;
    box-shadow: 0 4px 18px #2634430f;
    background: #fbfbfb;
    box-shadow: -1px 2px 9px 7px #00000026;
    border-radius: 35px
}

@media screen and (max-width: 852px) {
    .contact__form {
        border-radius: 15px
    }
}

.contact__form > p {
    margin-top: 3%;
    color: #263443;
    font-size: clamp(12px, 1.5vw, 24px);
    line-height: 1.8;
    text-align: center
}

@media screen and (max-width: 852px) {
    .contact__form > p {
        text-align: left;
        font-size: .8em;
        font-size: clamp(.5em, 2vw, .8em);
        max-width: fit-content;
        margin-inline: auto
    }
}

.contact__form > p span {
    position: relative
}

.contact__form > p span:before {
    content: "";
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    width: 4%;
    max-width: 30px;
    aspect-ratio: 30/32;
    background-image: url(../images/form-icon02.svg)
}

.contact__form > p a {
    color: #269774;
    border-bottom: 1px solid #269774
}

.contact__form > .contact__select select {
    padding: 2%
}

@media screen and (max-width: 852px) {
    .contact__form > .contact__select select {
        padding: 4%
    }
}

.contact__row {
    gap: 3%
}

@media screen and (max-width: 852px) {
    .contact__row {
        flex-direction: column
    }
}

.contact__row label {
    width: 48.5%
}

@media screen and (max-width: 852px) {
    .contact__row label {
        width: 100%
    }
}

.contact label {
    display: block;
    margin-bottom: 4%;
    color: #263443;
    font-size: clamp(11px, 1vw, 18px);
    font-weight: 700;
    letter-spacing: 0
}

@media screen and (max-width: 852px) {
    .contact label {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em)
    }
}

.contact label > span {
    display: block;
    margin-bottom: 2%
}

.contact small {
    margin-left: 1em;
    color: #8c8c8c;
    font-size: .8em
}

.contact .is-required {
    color: #269774
}

.contact input,
.contact select,
.contact textarea {
    width: 100%;
    padding: 4%;
    border: 3px solid #dfe8e8;
    border-radius: 8px;
    font-size: clamp(10px, 1.5vw, 20px);
    font-weight: 500
}

@media screen and (max-width: 852px) {

    .contact input,
    .contact select,
    .contact textarea {
        font-size: 1em;
        font-size: clamp(.8em, 2.5vw, 1em)
    }
}

.contact input::placeholder,
.contact textarea::placeholder {
    font-weight: 500;
    color: #91979d;
    font-size: clamp(10px, 1.5vw, 20px)
}

@media screen and (max-width: 852px) {

    .contact input::placeholder,
    .contact textarea::placeholder {
        font-size: 1em;
        font-size: clamp(.8em, 2.5vw, 1em)
    }
}

.contact select {
    padding-right: 8%
}

.contact__select-box {
    position: relative
}

.contact__select-box:after {
    content: "";
    background-image: url(../images/form-icon03.svg);
    background-size: contain;
    aspect-ratio: 14/21;
    position: absolute;
    width: 10%;
    max-width: 14px;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    color: #269774;
    pointer-events: none
}

.contact textarea {
    min-height: 230px;
    resize: vertical
}

.contact button {
    display: block;
    width: 100%;
    margin: 2% auto 0;
    padding: 2%;
    border-radius: 10px;
    background-color: #269774;
    color: #fff;
    font-size: clamp(14px, 1.4vw, 24px);
    font-weight: 700;
    text-align: center
}

@media screen and (max-width: 852px) {
    .contact button {
        font-size: 1.5em;
        font-size: clamp(.7em, 3.5vw, 1.5em);
        padding: 4%
    }
}

.contact button span {
    position: relative
}

.contact button span:before {
    content: "";
    position: absolute;
    right: 120%;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    max-width: 34px;
    aspect-ratio: 34/29;
    background-image: url(../images/form-icon01.svg)
}

@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical > .swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, #00000080, #0000)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translateZ(0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translate(-50%);
    white-space: nowrap
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.br-sp {
    display: none;
}

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

    .br-sp {
        display: inline-block;
    }
}