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

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    line-height: 1
}

ol,
ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption,
th,
td {
    text-align: left;
    font-weight: 400;
    vertical-align: middle
}

q,
blockquote {
    quotes: none
}

q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none
}

a img {
    border: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

img {
    vertical-align: bottom;
    border: none
}

button,
input,
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    font: inherit;
    outline: none
}

textarea {
    resize: vertical
}

input[type=submit],
input[type=button],
label,
button,
select {
    cursor: pointer
}

select::-ms-expand {
    display: none
}

@keyframes zoomDown {
    0% {
        transform: scale(1.12)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes arrowMove {
    0% {
        transform: translateX(0);
        opacity: 1;
        filter: invert(0) brightness(0)
    }

    50% {
        transform: translateX(50%);
        opacity: 0;
        filter: invert(0) brightness(0)
    }

    51% {
        transform: translateX(-50%);
        opacity: 0;
        filter: invert(1) brightness(10)
    }

    100% {
        transform: translateX(0);
        filter: invert(1) brightness(10);
        opacity: 1
    }
}

@keyframes arrowMove2 {
    0% {
        transform: translateX(0);
        opacity: 1
    }

    50% {
        transform: translateX(50%);
        opacity: 0
    }

    51% {
        transform: translateX(-50%);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes arrowMove3 {
    0% {
        transform: translateX(0) rotate(180deg);
        opacity: 1
    }

    50% {
        transform: translateX(-50%) rotate(180deg);
        opacity: 0
    }

    51% {
        transform: translateX(50%) rotate(180deg);
        opacity: 0
    }

    100% {
        transform: translateX(0) rotate(180deg);
        opacity: 1
    }
}

@keyframes textMove {
    0% {
        transform: translateX(0);
        opacity: 1
    }

    50% {
        transform: translateX(1rem);
        opacity: 0
    }

    51% {
        transform: translateX(-1rem);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

.anim__text-line__text {
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-origin: right bottom;
    background-size: 0 1px;
    transition: background-size .3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative
}

@media(hover: hover) {
    .anim__text-line:hover .anim__text-line__text {
        background-size: 105% 1px;
        background-position: 0 100%;
        transition: background-size .3s cubic-bezier(0.7, 0, 0.84, 0)
    }
}

.anim__text-line2__text {
    text-decoration: none;
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-origin: right bottom;
    background-size: 105% 1px;
    transition: background-size .3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative
}

@media(hover: hover) {
    .anim__text-line2:hover .anim__text-line2__text {
        background-size: 0 1px;
        background-position: 100% 100%
    }
}

@keyframes heroScrollAttention {
    0% {
        top: 0
    }

    20% {
        top: 0
    }

    80% {
        top: 100%
    }

    100% {
        top: 100%
    }
}

@keyframes heroScrollAttention2 {
    0% {
        top: 0
    }

    84% {
        top: 100%
    }

    100% {
        top: 100%
    }
}

.header {
    position: fixed;
    left: 0;
    width: 100%;
    /* padding: 26px 0; */
    z-index: 100;
    /* background-color: rgb(247, 247, 247); */
}

.header .base-width {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    max-width: none
}

@media screen and (max-width: 1024px) {
    .header {
        padding: 22px 0
    }
}

@media screen and (max-width: 599px) {
    .header {
        padding: 16px 0
    }
}

.header__logo {
    line-height: 0;
    margin: 2px 0 0
}

.header__logo a {
    display: flex;
    align-items: center;
    gap: 0 20px
}

.header__logo svg {
    max-width: 56px
}

.header__logo .text {
    font-family: var(--site-font-base);
    font-size: 24px;
    font-weight: 700;
    color: var(--site-color-logoBlue)
}

@media screen and (max-width: 1024px) {
    .header__logo svg {
        max-width: 44px
    }

    .header__logo .text {
        font-size: 20px
    }
}

@media screen and (max-width: 599px) {
    .header__logo a {
        gap: 0 16px
    }

    .header__logo svg {
        max-width: 38px
    }

    .header__logo .text {
        font-size: 16px
    }
}

.header__entry {
    position: relative;
    z-index: 104;
    flex: 1
}

.header__entry a {
    display: flex;
    align-items: center;
    line-height: 1;
    width: max-content;
    height: 80px;
    padding: 0 48px;
    margin: 0 18px 0 auto;
    background-color: #fff;
    border-radius: 10rem;
    font-family: var(--site-font-barlow);
    font-size: 24px;
    font-weight: 500
}

@media screen and (max-width: 1024px) {
    .header__entry a {
        font-size: 20px;
        height: 60px;
        padding: 0 32px
    }
}

@media screen and (max-width: 599px) {
    .header__entry a {
        font-size: 18px;
        height: 50px;
        padding: 0 26px;
        margin: 0 10px 0 auto
    }
}

.gnav__btn {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: var(--site-color-blk1);
    border-radius: 50%;
    z-index: 103;
    visibility: hidden;
    display: none;
}

.gnav__btn span {
    display: block;
    position: absolute;
    inset: 50% 0 0 50%;
    width: 38px;
    height: 3px;
    margin: -1.5px 0 0 -19px;
    background-color: #fff;
    transition: .3s
}

.gnav__btn span:nth-child(1) {
    margin-top: -12px
}

.gnav__btn span:nth-child(3) {
    margin-top: 9px
}

.gnav__btn.active span:nth-child(1),
.gnav__btn.active span:nth-child(3) {
    opacity: 0
}

.gnav__btn.active span:nth-child(2) {
    transform: rotate(-45deg)
}

.gnav__btn.active span:nth-child(4) {
    transform: rotate(45deg)
}

@media screen and (max-width: 1024px) {
    .gnav__btn {
        width: 60px;
        height: 60px
    }

    .gnav__btn span {
        width: 28px;
        margin: -1.5px 0 0 -14px
    }
}

@media screen and (max-width: 599px) {
    .gnav__btn {
        width: 50px;
        height: 50px;
    }

    .gnav__btn span {
        width: 22px;
        height: 2px;
        margin: -1px 0 0 -11px
    }

    .gnav__btn span:nth-child(1) {
        margin-top: -8px
    }

    .gnav__btn span:nth-child(3) {
        margin-top: 6px
    }
}

.gnav {
    pointer-events: none;
    position: fixed;
    inset: 0;
    opacity: 0;
    transition: .3s
}

.gnav__mask {
    position: absolute;
    inset: 0;
    background-color: var(--site-color-key);
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(circle at 90px 50%, black 100%, rgba(0, 0, 0, 0) 0%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 0%;
    will-change: contents;
    z-index: 101
}

.gnav.active {
    opacity: 1;
    pointer-events: all;
    transition: .3s
}

.gnav.active .gnav__mask {
    pointer-events: all;
    -webkit-mask-size: 260%;
    mask-size: 260%
}

.gnav__container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100vh;
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.gnav__container::-webkit-scrollbar,
.gnav__container::-webkit-scrollbar {
    display: none
}

.gnav__list {
    flex: 1;
    padding: 162px 60px 80px 72px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: max-content max-content max-content max-content;
    gap: 0 32px
}

.gnav__list__item {
    border-bottom: solid 1px rgba(255, 255, 255, .2)
}

.gnav__list__item:not(:last-child) {
    margin: 0 0 46px;
    padding: 0 0 40px
}

.gnav__list__item a {
    color: #fff
}

.gnav__list__item__title {
    font-size: 32px;
    font-family: var(--site-font-en);
    font-weight: 500
}

.gnav__list__item__title small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin: 9px 0 0
}

.gnav__list__item__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1em 1.6em;
    font-size: 15px;
    font-weight: 400;
    margin: 30px 0 0;
    max-width: 410px
}

.gnav__list__item__list li a {
    position: relative;
    opacity: .9
}

.gnav__list__item:nth-child(1) {
    order: 1
}

.gnav__list__item:nth-child(2) {
    order: 3
}

.gnav__list__item:nth-child(3) {
    order: 5
}

.gnav__list__item:nth-child(4) {
    order: 7;
    margin: 0
}

.gnav__list__item:nth-child(5) {
    order: 2
}

.gnav__list__item:nth-child(6) {
    order: 4
}

.gnav__list__item:nth-child(7) {
    order: 5
}

.gnav__list__item:nth-child(8) {
    order: 8
}

.gnav .case__search__list a {
    color: #000;
    font-size: 13px
}

.gnav__right {
    width: 250px;
    padding: 250px 99px 80px 80px;
    background-color: var(--site-color-logoBlue)
}

.logo-container {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 100px;
}

.gnav__right svg {
    width: 60%;
    height: auto;
    margin: 0px auto;
    padding: 0px 0px 0px 20%;
}

.gnav__right .member__slider--item__top__inner {
    background-color: var(--site-color-logoBlue)
}

.gnav__right .member__slider--item__top__inner .role,
.gnav__right .member__slider--item__top__inner .year {
    color: #fff
}

@media screen and (max-width: 1200px) {
    .gnav__right {
        width: 360px;
        padding: 112px 72px 80px 60px
    }

    .gnav .case__search__list a {
        font-size: 12px
    }
}

@media screen and (max-width: 1024px) {
    .gnav__list {
        padding: 142px 50px 62px;
        display: block
    }

    .gnav__list__item {
        order: initial
    }

    .gnav__list__item:nth-child(4) {
        margin: 0 0 38px
    }

    .gnav__list__item:last-child {
        border-bottom: none
    }

    .gnav__right {
        width: 44%;
        padding: 142px 67px 80px 50px;
        box-sizing: border-box
    }

    .gnav .case__search__list a {
        font-size: 12px
    }
}

@media screen and (max-width: 867px) {
    .gnav__container {
        display: block
    }

    .gnav__list {
        padding: 142px 50px 62px;
        display: grid
    }

    .gnav__list__item:nth-child(1) {
        order: 1
    }

    .gnav__list__item:nth-child(2) {
        order: 3
    }

    .gnav__list__item:nth-child(3) {
        order: 5
    }

    .gnav__list__item:nth-child(4) {
        order: 7;
        margin: 0
    }

    .gnav__list__item:nth-child(5) {
        order: 2
    }

    .gnav__list__item:nth-child(6) {
        order: 4
    }

    .gnav__list__item:nth-child(7) {
        order: 5
    }

    .gnav__list__item:nth-child(8) {
        order: 8
    }

    .gnav__list__item:last-child {
        border-bottom: solid 1px rgba(255, 255, 255, .2)
    }

    .gnav__right {
        width: 100%;
        padding: 62px 50px 50px
    }
}

@media screen and (max-width: 599px) {
    .gnav__container {
        display: block
    }

    .gnav__list {
        flex-grow: 1;
        padding: 142px 24px 42px;
        display: block
    }

    .gnav__list__item:not(:last-child) {
        margin: 0 0 36px;
        padding: 0 0 36px
    }

    .gnav__list__item:nth-child(4) {
        margin: 0 0 36px;
        padding: 0 0 36px
    }

    .gnav__list__item:last-child {
        border-bottom: none
    }

    .gnav__list__item__title {
        font-size: 27px
    }

    .gnav__list__item__title small {
        font-size: 13px;
        margin: 10px 0 0
    }

    .gnav__list__item__list {
        margin: 26px 0 0;
        display: flex;
        flex-wrap: wrap;
        gap: 1.3em 1.3em;
        font-size: 16px;
        letter-spacing: 0
    }

    .gnav__list__item__list li a {
        font-size: 15px
    }

    .gnav__list__item__list li a::before {
        top: 12px
    }

    .gnav__right {
        flex-shrink: 0;
        width: 100%;
        padding: 42px 64px 80px;
        box-sizing: border-box
    }

    .gnav .case__search__list a {
        font-size: 12px
    }
}

.base-width {
    width: calc(100% - 168px);
    max-width: 1112px;
    margin: 0 auto
}

.base-width.base-width-narrow {
    max-width: 930px !important
}

@media screen and (max-width: 1024px) {
    .base-width {
        width: calc(100% - 104px)
    }
}

@media screen and (max-width: 599px) {
    .base-width {
        width: calc(100% - 48px)
    }
}

.base-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 16px
}

.site__title {
    position: relative;
    padding: 0 0 26px
}

.site__title span {
    display: block
}

.site__title .en {
    font-size: 64px;
    font-family: var(--site-font-en);
    font-weight: 500;
    margin: 0 0 6px;
    line-height: 1.1;
    letter-spacing: .01em
}

.site__title .ja {
    font-weight: 700;
    line-height: 1
}

.site__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 60px;
    height: 5px;
    background-color: var(--site-color-darkBlue)
}

.site__title.col--wthite span {
    color: #fff
}

.site__title.bar--green::after {
    background-color: var(--site-color-green)
}

.site__title.pos--center {
    text-align: center;
    text-indent: 0
}

.site__title.pos--center::after {
    left: 50%;
    margin: 0 0 0 -30px
}

@media screen and (max-width: 1024px) {
    .site__title .en {
        font-size: 52px
    }

    .site__title .ja {
        font-size: 15px
    }
}

@media screen and (max-width: 599px) {
    .site__title {
        padding: 0 0 20px
    }

    .site__title .en {
        font-size: 42px;
        text-indent: -0.03em
    }

    .site__title .ja {
        font-size: 13px
    }

    .site__title::after {
        width: 52px;
        height: 4px
    }
}

.site__text {
    line-height: 2
}

.site__text p:not(:last-child) {
    margin: 0 0 1.75em
}

.site__text.fz18 {
    font-size: 18px;
    line-height: 1.83333
}

@media screen and (max-width: 599px) {
    .site__text.fz18 {
        font-size: 15px
    }
}

.site__btn a {
    position: relative;
    display: block;
    text-align: center;
    padding: 33px 16px 34px;
    border: solid 1px #2736cd;
    border-radius: 10rem;
    max-width: 360px;
    box-sizing: border-box;
    background-color: #fff;
    transition: .3s
}

.site__btn a::before {
    content: "";
    position: absolute;
    right: 23px;
    top: 50%;
    width: 38px;
    height: 38px;
    background-color: var(--site-color-green);
    margin: -19px 0 0;
    border-radius: 50%;
    transition: .3s
}

.site__btn a::after {
    --moveArrow: 0%;
    content: "";
    position: absolute;
    right: 34px;
    top: 50%;
    width: 17px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='18' viewBox='0 0 21 18'%3E%3Cg transform='translate(19950 12375)'%3E%3Cg transform='translate(-19949.656 -12373.824)'%3E%3Cpath d='M7.5,18H26.816' transform='translate(-7.5 -10.175)' fill='none' stroke='%233042FB' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M18,7.5l7.825,7.825L18,23.15' transform='translate(-6.736 -7.5)' fill='none' stroke='%233042FB' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Crect width='21' height='18' transform='translate(-19950 -12375)' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: -7px 0 0;
    transition: .3s
}

.site__btn a .text {
    font-size: 18px;
    font-weight: 500;
    color: var(--site-color-darkBlue);
    line-height: 1
}

.site__btn a:hover {
    background-color: #f6f8fb
}

.site__btn a:hover::before {
    transform: scale(1.15);
    background-color: var(--site-color-key)
}

.site__btn a:hover::after {
    animation: arrowMove .3s cubic-bezier(0.16, 1, 0.3, 1) 0s normal both
}

@media screen and (max-width: 1024px) {
    .site__btn a {
        padding: 28px 38px 28px;
        max-width: 320px;
        text-align: left
    }

    .site__btn a::before {
        right: 19px;
        width: 32px;
        height: 32px;
        margin: -16px 0 0
    }

    .site__btn a::after {
        right: 28px;
        top: 50%;
        width: 15px;
        height: 12px;
        margin: -6px 0 0
    }
}

@media screen and (max-width: 599px) {
    .site__btn a {
        padding: 22px 26px 24px;
        max-width: 220px
    }

    .site__btn a::before {
        right: 16px;
        width: 32px;
        height: 32px;
        margin: -16px 0 0
    }

    .site__btn a::after {
        right: 25px;
        top: 50%;
        width: 15px;
        height: 12px;
        margin: -6px 0 0
    }

    .site__btn a .text {
        font-size: 16px
    }
}

.top__section-padding {
    padding: 108px 0 0
}

.js-show-text {
    opacity: 0.9
}

.js-show-text .w {
    display: inline-block;
    opacity: 0
}

.lower .header__entry a {
    background-color: #f6f8fb
}

.lower.f-bnr-gray .footer__bnr li:nth-child(1) svg #bg {
    fill: #fff
}

.lower__header {
    padding: 186px 0 0
}

.lower__header .base-width {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap
}

@media screen and (max-width: 1024px) {
    .lower__header {
        padding: 124px 0 0
    }
}

@media screen and (max-width: 599px) {
    .lower__header {
        padding: 102px 0 0
    }
}

.lower__title {
    margin: 0 0 67px;
    padding: 0 0 26px
}

.lower__title .en {
    font-size: 80px;
    margin: 0 0 7px;
    text-indent: 0
}

.lower__title .ja {
    font-size: 20px;
    font-weight: 400
}

.lower__title::after {
    height: 7px;
    width: 78px;
    background-color: var(--site-color-key)
}

@media screen and (max-width: 1024px) {
    .lower__title {
        order: 2
    }
}

@media screen and (max-width: 867px) {
    .lower__title .en {
        font-size: 10.25vw;
        margin: 0 0 7px;
        text-indent: 0
    }
}

@media screen and (max-width: 599px) {
    .lower__title {
        margin: 0 0 36px;
        padding: 0 0 18px
    }

    .lower__title .en {
        font-size: 6.25vw;
        margin: 0 0 7px;
        text-indent: 0
    }

    .lower__title .ja {
        font-size: 15px;
        font-weight: 400;
        margin-top: 12px;
    }

    .lower__title::after {
        height: 4px;
        width: 61px
    }
}

.lower__subtitle .en {
    font-size: 50px;
    margin: 0 0 7px;
    text-indent: 0
}

.lower__subtitle .ja {
    font-weight: 500
}

.lower__subtitle::after {
    background-color: var(--site-color-key)
}

@media screen and (max-width: 1024px) {
    .lower__subtitle .en {
        font-size: 42px
    }

    .lower__subtitle .ja {
        font-size: 15px
    }
}

@media screen and (max-width: 867px) {
    .lower__subtitle .en {
        font-size: 36px;
        margin: 0 0 7px
    }
}

@media screen and (max-width: 599px) {
    .lower__subtitle .en {
        font-size: 32px;
        margin: 0 0 5px
    }

    .lower__subtitle .ja {
        font-size: 13px
    }
}

.company__main {
    width: 100%;
    margin: 0 0 81px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.company__main img {
    width: 80%;
    height: 80%;
    object-fit: cover;
}

.lower__main {
    width: 100%;
    margin: 0 0 81px
}

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

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

    .lower__main,
    .company__main {
        order: 3
    }
}

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

    .lower__main,
    .company__main {
        margin: 0 -24px;
        width: 100vw
    }
}

.pan_list {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 0;
    font-size: 12px;
    line-height: 1;
    margin: 22px 0 0
}

.pan_list li:not(:last-child) {
    position: relative;
    padding: 0 17px 0 0;
    margin: 0 9px 0 0
}

.pan_list li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 30%;
    width: 9px;
    height: 1px;
    background-color: currentColor
}

.pan_list a {
    display: block;
    color: gray
}

.pan_list abbr[title] {
    position: relative;
    text-decoration: none
}

.pan_list abbr[title]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background-color: var(--site-color-key);
    letter-spacing: .018em
}

@media screen and (max-width: 1024px) {
    .pan_list {
        width: 100%;
        order: 1;
        font-size: 11px;
        margin: 0px 0 20px
    }
}

@media screen and (max-width: 599px) {
    .pan_list {
        font-size: 10px
    }
}

.dir__title span {
    display: block
}

.dir__title .en {
    font-size: 110px;
    font-family: var(--site-font-en);
    font-weight: 500
}

.dir__title .ja {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--site-color-key);
    margin: 16px 0 0
}

@media screen and (max-width: 1024px) {
    .dir__title .en {
        font-size: min(9.6vw, 96px)
    }

    .dir__title .ja {
        font-size: 18px;
        margin: 14px 0 0
    }
}

@media screen and (max-width: 599px) {
    .dir__title .en {
        font-size: 50px
    }

    .dir__title .ja {
        font-size: 14px;
        margin: 12px 0 0
    }
}

.lower-first__nav {
    margin: 65px 0 0
}

.lower-first__nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 42px
}

.lower-first__nav li {
    width: calc((100% - 168px)/5);
    border-bottom: solid 1px #ddd
}

.lower-first__nav a {
    display: block;
    position: relative;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .02em;
    padding: 17px 17px 17px 1px
}

.lower-first__nav a::before {
    content: "";
    position: absolute;
    right: 0;
    top: 19px;
    width: 8px;
    height: 10px;
    margin: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' viewBox='0 0 8 10'%3E%3Cg transform='translate(-238 -485)'%3E%3Cpath d='M6.763,5.226l.347.347a.373.373,0,0,1,0,.53L4.074,9.14a.373.373,0,0,1-.53,0L.507,6.1a.373.373,0,0,1,0-.53l.347-.347a.375.375,0,0,1,.536.006L3.184,7.115V2.625a.374.374,0,0,1,.375-.375h.5a.374.374,0,0,1,.375.375v4.49L6.227,5.232a.373.373,0,0,1,.536-.006Z' transform='translate(236.25 493.809) rotate(-90)' fill='%23d20b00'/%3E%3Cpath d='M1,1V9H7V1H1M0,0H8V10H0Z' transform='translate(238 485)' fill='%23707070' opacity='0'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain
}

.lower-first__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    background-image: linear-gradient(var(--site-color-key), var(--site-color-key));
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-origin: right bottom;
    background-size: 0 1px;
    transition: background-size .3s
}

@media screen and (max-width: 1200px) {
    .lower-first__nav__list {
        gap: 20px 42px
    }

    .lower-first__nav li {
        width: calc((100% - 126px)/4)
    }
}

@media screen and (max-width: 1024px) {
    .lower-first__nav {
        margin: 54px 0 0
    }

    .lower-first__nav__list {
        gap: 20px 42px
    }

    .lower-first__nav li {
        width: calc((100% - 84px)/3)
    }
}

@media screen and (max-width: 599px) {
    .lower-first__nav {
        margin: 42px 0 0
    }

    .lower-first__nav__list {
        gap: 16px 32px
    }

    .lower-first__nav li {
        width: calc((100% - 32px)/2)
    }

    .lower-first__nav a {
        font-size: 12px;
        padding: 17px 17px 17px 1px
    }
}

.case__title {
    position: relative;
    font-size: 40px;
    font-weight: 700;
    padding: 0 0 27px;
    border-bottom: 1px solid #ddd
}

.case__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 80px;
    height: 2px;
    background-color: var(--site-color-key)
}

.lower-search {
    margin: 84px 0 0
}

.lower-search__btn {
    display: none
}

.lower-search__inner {
    background-color: #f7f7f7;
    padding: 29px 30px 26px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 29px 0
}

.lower-search__block__title {
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--site-color-blk3)
}

.lower-search__block__list.case__search__list a {
    background-color: #fff
}

@media(hover: hover)and (pointer: fine) {
    .lower-search__block__list.case__search__list a:hover {
        background-color: var(--site-color-key)
    }
}

.lower-search__block__list.case__search__list .active {
    background-color: var(--site-color-key);
    color: #fff
}

@media screen and (max-width: 599px) {
    .lower-search {
        margin: 42px 0 0
    }

    .lower-search__btn {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        width: 100%;
        padding: 18px 18px 19px;
        box-sizing: border-box;
        background-color: var(--site-color-gray)
    }

    .lower-search__btn .text {
        font-weight: 700
    }

    .lower-search__btn .icon {
        position: absolute;
        right: 16px;
        top: 50%;
        display: block;
        width: 20px;
        height: 20px;
        margin: -10px 0 0
    }

    .lower-search__btn .icon::before,
    .lower-search__btn .icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 2px;
        background-color: currentColor;
        margin: -1px 0 0 -10px
    }

    .lower-search__btn .icon::after {
        transform: rotate(90deg)
    }

    .lower-search__btn.active {
        background-color: var(--site-color-blk2);
        color: #fff
    }

    .lower-search__inner {
        padding: 26px 18px 20px;
        gap: 29px 0;
        display: none
    }

    .lower-search__inner.active {
        display: grid
    }

    .lower-search__block__title {
        margin: 0 0 16px
    }

    .lower-search__block__list.case__search__list {
        gap: 6px
    }

    .lower-search__block__list.case__search__list a {
        font-size: 12px;
        padding: 8px 11px 9px
    }
}

.news-search .lower-search__block {
    display: flex
}

.news-search .lower-search__block .lower-search__block__title {
    width: 84px;
    margin: 10px 0 0
}

.news-search .lower-search__block .lower-search__block__list {
    flex: 1
}

@media screen and (max-width: 599px) {
    .news-search .lower-search__block {
        display: block
    }

    .news-search .lower-search__block .lower-search__block__title {
        width: 100%;
        margin: 0 0 10px
    }

    .news-search .lower-search__block .lower-search__block__list {
        flex: 1
    }
}

.post__nav {
    display: flex;
    justify-content: center
}

.post__nav .post-link {
    font-size: 18px;
    font-weight: 500;
    color: var(--site-color-blk7)
}

.post__nav .post-link a {
    display: flex;
    align-items: center
}

.post__nav .post-link a::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 1px 5px 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='18' viewBox='0 0 21 18'%3E%3Cg transform='translate(19950 12375)'%3E%3Cg transform='translate(-19949.656 -12373.824)'%3E%3Cpath d='M7.5,18H26.816' transform='translate(-7.5 -10.175)' fill='none' stroke='%233042FB' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M18,7.5l7.825,7.825L18,23.15' transform='translate(-6.736 -7.5)' fill='none' stroke='%233042FB' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Crect width='21' height='18' transform='translate(-19950 -12375)' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 16px auto;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    transform: rotate(180deg)
}

.post__nav .index-link {
    margin: 0 157px
}

.post__nav .index-link a::before {
    width: 22px;
    height: 19px;
    background-size: 22px auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='19' viewBox='0 0 22 19'%3E%3Cg transform='translate(-588 -4932)'%3E%3Crect width='6' height='5' transform='translate(604 4932)' fill='%23fff'/%3E%3Cpath d='M1,1V4H5V1H1M0,0H6V5H0Z' transform='translate(604 4932)'/%3E%3Crect width='6' height='5' transform='translate(604 4939)' fill='%23fff'/%3E%3Cpath d='M1,1V4H5V1H1M0,0H6V5H0Z' transform='translate(604 4939)'/%3E%3Crect width='6' height='5' transform='translate(604 4946)' fill='%23fff'/%3E%3Cpath d='M1,1V4H5V1H1M0,0H6V5H0Z' transform='translate(604 4946)'/%3E%3Crect width='6' height='5' transform='translate(596 4932)' fill='%23fff'/%3E%3Cpath d='M1,1V4H5V1H1M0,0H6V5H0Z' transform='translate(596 4932)'/%3E%3Crect width='6' height='5' transform='translate(596 4939)' fill='%23fff'/%3E%3Cpath d='M1,1V4H5V1H1M0,0H6V5H0Z' transform='translate(596 4939)'/%3E%3Crect width='6' height='5' transform='translate(596 4946)' fill='%23fff'/%3E%3Cpath d='M1,1V4H5V1H1M0,0H6V5H0Z' transform='translate(596 4946)'/%3E%3Crect width='6' height='5' transform='translate(588 4932)' fill='%23fff'/%3E%3Cpath d='M1,1V4H5V1H1M0,0H6V5H0Z' transform='translate(588 4932)'/%3E%3Crect width='6' height='5' transform='translate(588 4939)' fill='%23fff'/%3E%3Cpath d='M1,1V4H5V1H1M0,0H6V5H0Z' transform='translate(588 4939)'/%3E%3Crect width='6' height='5' transform='translate(588 4946)' fill='%23fff'/%3E%3Cpath d='M1,1V4H5V1H1M0,0H6V5H0Z' transform='translate(588 4946)'/%3E%3C/g%3E%3C/svg%3E")
}

.post__nav .next-link a {
    flex-direction: row-reverse
}

.post__nav .next-link a::before {
    transform: rotate(0deg)
}

@media screen and (max-width: 1024px) {
    .post__nav .post-link {
        font-size: 16px
    }

    .post__nav .post-link a::before {
        width: 14px;
        height: 14px;
        background-size: 14px auto
    }

    .post__nav .index-link {
        margin: 0 72px
    }

    .post__nav .index-link a::before {
        width: 19px;
        height: 19px;
        background-size: 19px auto
    }
}

@media screen and (max-width: 599px) {
    .post__nav {
        flex-wrap: wrap;
        justify-content: space-between
    }

    .post__nav .post-link {
        font-size: 15px
    }

    .post__nav .post-link a::before {
        width: 14px;
        height: 14px;
        background-size: 14px auto
    }

    .post__nav .index-link {
        text-align: center;
        width: 100%;
        order: 1;
        margin: 0 0 20px
    }

    .post__nav .index-link a {
        justify-content: center;
        padding: 1em 0;
        border: 1px solid
    }

    .post__nav .index-link a::before {
        width: 19px;
        height: 19px;
        background-size: 19px auto
    }

    .post__nav .prev-link {
        order: 2
    }

    .post__nav .next-link {
        order: 3
    }
}

.site-pager {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 28px
}

.site-pager .nth-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px
}

.site-pager .nth-box a,
.site-pager .nth-box span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 46px;
    font-size: 18px;
    font-weight: 500;
    box-sizing: border-box;
    border-bottom: solid 3px #fff
}

.site-pager .nth-box .current {
    color: var(--site-color-key);
    border-bottom: solid 3px var(--site-color-key)
}

.site-pager .prev,
.site-pager .next {
    position: relative;
    width: auto;
    height: auto
}

.site-pager .prev a,
.site-pager .prev span,
.site-pager .next a,
.site-pager .next span {
    display: block;
    width: 40px;
    height: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='18' viewBox='0 0 21 18'%3E%3Cg transform='translate(19950 12375)'%3E%3Cg transform='translate(-19949.656 -12373.824)'%3E%3Cpath d='M7.5,18H26.816' transform='translate(-7.5 -10.175)' fill='none' stroke='%230C6DFF' stroke-linejoin='round' stroke-width='2'/%3E%3Cpath d='M18,7.5l7.825,7.825L18,23.15' transform='translate(-6.736 -7.5)' fill='none' stroke='%230C6DFF' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3Crect width='21' height='18' transform='translate(-19950 -12375)' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 16px auto;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    box-sizing: border-box
}

.site-pager .prev::before,
.site-pager .prev::after,
.site-pager .next::before,
.site-pager .next::after {
    display: none
}

.site-pager .prev {
    transform: rotate(180deg)
}

.site-pager .no-link {
    pointer-events: none
}

@media screen and (max-width: 1024px) {
    .site-pager {
        gap: 0 25px
    }

    .site-pager .nth-box a,
    .site-pager .nth-box span {
        width: 50px;
        height: 50px;
        font-size: 16px
    }

    .site-pager .prev a,
    .site-pager .prev span,
    .site-pager .next a,
    .site-pager .next span {
        width: 50px;
        height: 50px;
        background-size: 14px auto
    }
}

@media screen and (max-width: 599px) {
    .site-pager {
        gap: 0 22px
    }

    .site-pager .base-width {
        gap: 0 22px
    }

    .site-pager .nth-box {
        gap: 0 12px
    }

    .site-pager .nth-box a,
    .site-pager .nth-box span {
        width: 32px;
        height: 40px;
        font-size: 16px
    }

    .site-pager .prev a,
    .site-pager .prev span,
    .site-pager .next a,
    .site-pager .next span {
        width: 32px;
        height: 40px;
        background-size: 16px auto
    }
}

.top_white {
    position: relative;
    background: #fff;
    z-index: 3
}

.hero {
    position: relative;
    width: 100%;
    height: 140lvh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: hidden;
    z-index: -1;
    background-color: #ddd
}

.hero__slider {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100lvh;
    z-index: 0;
    overflow: hidden
}

.hero__slider .swiper-slide,
.hero__slider .hero__slider__pic {
    position: relative;
    width: 100vw;
    height: 100lvh
}

.hero__slider .swiper-slide img,
.hero__slider .hero__slider__pic img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: scale(1.12)
}

.hero__slider .swiper-slide-active,
.hero__slider .swiper-slide-duplicate-active,
.hero__slider .swiper-slide-prev {
    z-index: 2
}

.hero__slider .swiper-slide-active img,
.hero__slider .swiper-slide-duplicate-active img,
.hero__slider .swiper-slide-prev img {
    animation: zoomDown 7s linear 0s normal both
}

.hero__slider .swiper-pagination-bullets.swiper-pagination-horizontal {
    position: absolute;
    left: 50%;
    bottom: 126px;
    width: calc(100% - 144px);
    height: 1px;
    transform: translateX(-50%);
    display: flex
}

.hero__slider .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
    width: 44px;
    height: 1px;
    background-color: #fff;
    border-radius: 0;
    margin: 0 6px 0 0;
    opacity: 1
}

.hero__slider .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active {
    background-color: var(--site-color-key)
}

.hero__text {
    z-index: 30;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100lvh;
    display: flex;
    align-items: center
}

.hero .hero__title {
    opacity: 1
}

.hero__sub {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--site-font-en);
    line-height: 1.6428;
    margin: 16px 0 0;
    max-width: 330px
}

@media screen and (max-width: 1024px) {
    .hero__sub {
        font-size: 12px;
        margin: 14px 0 0
    }
}

@media screen and (max-width: 599px) {
    .hero__sub {
        font-size: 11px;
        margin: 13px 0 0
    }
}

.hero__logo {
    max-width: 165px;
    margin: 41px 0 0
}

@media screen and (max-width: 1024px) {
    .hero__logo {
        max-width: 135px;
        margin: 31px 0 0
    }
}

@media screen and (max-width: 599px) {
    .hero__logo {
        max-width: 115px;
        margin: 21px 0 0
    }
}

.hero__text1 {
    position: fixed;
    z-index: 22;
    transform: rotate(0.0001deg);
    filter: blur(0px)
}

.hero__text1 .hero__title {
    padding: 1.6em 0 0
}

.hero__text1 .hero__title .text {
    color: #fff
}

@media screen and (max-width: 1024px) {
    .hero__text1 .hero__title {
        padding: 0
    }
}

@media screen and (max-width: 599px) {
    .hero__text1 .hero__title {
        padding: 0
    }
}

.hero__text1 .hero__sub {
    color: #fff
}

.hero__text1 .hero__logo {
    color: #fff
}

.hero__text2 {
    position: fixed;
    z-index: 22;
    transform: rotate(0.0001deg);
    filter: blur(0px);
    will-change: transform
}

.hero__text2 .hero__title {
    padding: 1.6em 0 0
}

.hero__text2 .hero__title .text {
    color: var(--site-color-key)
}

@media screen and (max-width: 1024px) {
    .hero__text2 .hero__title {
        padding: 0
    }
}

@media screen and (max-width: 599px) {
    .hero__text2 .hero__title {
        padding: 0
    }
}

.hero__text2 .hero__sub {
    opacity: 0
}

.hero__text2 .hero__logo {
    opacity: 0
}

.top__text__wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    overflow: hidden;
    clip-path: border-box
}

#fiexed_target {
    opacity: 0
}

.intro {
    position: relative;
    z-index: 2;
    padding: 78px 0 0
}

.intro .base-width {
    position: relative;
    display: flex;
    align-items: flex-start
}

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

.intro__title .text {
    font-size: 45px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.4347826087;
    color: var(--site-color-key)
}

.intro__text {
    width: 50%;
    margin: 0 0 0 auto;
    padding: 10px 0 0;
    font-size: 20px;
    line-height: 2.05
}

.intro__text p:not(:last-child) {
    margin: 0 0 1.75em
}

.my-icon-sp {
    visibility: hidden;
    display: none;
}

@media screen and (max-width: 1024px) {
    .intro__text {
        font-size: 18px
    }
}

@media screen and (max-width: 867px) {
    .my-icon {
        visibility: hidden;
        display: none;
    }

    .my-icon-sp {
        visibility: visible;
        display: block;
    }

    .intro {
        padding: 72px 0 0
    }

    .intro .base-width {
        display: block
    }

    .intro__text {
        margin: 24px 0 0;
        width: 100%
    }
}

@media screen and (max-width: 599px) {
    .intro__title .text {
        font-size: 36px
    }

    .intro__text {
        font-size: 16px
    }
}

/* nav */

.header nav {
    /* display: flex; */
    /* align-items: flex-start;
    justify-content: space-between; */
    box-sizing: border-box;
    max-width: none;
    /* background-color: #fff; */
    color: #333;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px;
    max-width: 1200px;
    margin: auto;
    flex-wrap: wrap;
}

/* .header__logo svg {
    height: 50px;
} */

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
}

.hamburger div {
    height: 4px;
    background-color: #333;
    width: 100%;
}

.menu-container {
    display: flex;
    gap: 20px;
}

.menu-section {
    position: relative;
    padding: 15px 0;
}

.menu-title {
    font-size: 16px;
    font-weight: bold;
    cursor: default;
    /* color: var(--site-color-key) !important; */
}

.menu-subtitle {
    display: none;
    font-size: 12px;
    opacity: 0.8;
    margin-top: 4px;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #007aff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100;
    width: max-content;
    min-width: 180px;
    padding: 10px 0;
    font-size: 14px;
}

.submenu a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: white !important;
    white-space: nowrap;
}

.submenu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu-section:hover .submenu {
    display: block;
}

.py-4 {
    margin-top: -120px !important;
}

.title55 {
    font-size: 55px;
}

.fontProject {
    padding-top: 12px;
}

.ComProject {
    padding-top: 12px;
}

@media (max-width: 768px) {
    nav {
        background-color: #007aff;
        color: white;
    }

    .header {
        padding: 5px 0;
        background-color: #007aff !important;
    }

    .hamburger {
        display: flex;
    }

    .menu-container {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .menu-container.open {
        display: block;
    }

    .menu-section {
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .menu-subtitle {
        display: block;
    }

    .submenu {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 12px;
        padding-top: 10px;
        background: none;
        box-shadow: none;
    }

    .submenu a {
        padding: 4px 0;
    }

    .menu-title {
        color: #fff !important;
    }

    .menu-title a {
        color: #fff !important;
    }

    .menu-section:hover .submenu {
        display: grid;
    }

    .hamburger div {
        background-color: white;
    }

    .header__logo svg {
        height: 40px;
    }

    .header.fixed .menu-title,
    .header.fixed .menu-title a {
        color: #fff !important;
    }

    .header.fixed .submenu a {
        color: #fff !important;
    }

    .title55 {
        font-size: 30px;
    }

    .ComProject {
        padding-top: 0px;
    }

}

img.size-full {
    width: 80%;
    height: 80%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}