.hero {
    width: 100%;
    display: flex;
    padding-inline: 40px;
    column-gap: 16px;
    padding-top: 116px
}

@media screen and (max-width: 899px) {
    .hero {
        flex-direction: column;
        row-gap: 8px;
        padding-top: 62px;
        padding-inline: 12px
    }
}

.hero-main {
    width: 100%;
    flex: 1;
    position: relative;
    z-index: 1
}

.hero-main-logo {
    position: absolute;
    width: 16.375vw;
    top: 2.196875vw;
    left: 1.5vw
}

@media screen and (max-width: 899px) {
    .hero-main-logo {
        width: 38.5vw;
        top: 2.5vw;
        left: 2.5vw
    }
}

.hero-main-text {
    position: absolute;
    bottom: 1.5vw;
    left: 2.125vw;
    display: flex;
    flex-direction: column;
    color: #fff;
    line-height: 1.5
}

.hero-main-text>span {
    font-size: max(1.0625vw, 12px);
    font-weight: 400
}

.hero-main-text>p {
    font-size: max(1.625vw, 16px);
    font-weight: 700
}

.hero-main-video-btn {
    position: absolute;
    top: 1.25vw;
    right: 1.25vw;
    width: max(2vw, 32px);
    height: max(2vw, 32px);
    aspect-ratio: 1/1;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    transition: opacity .2s cubic-bezier(.215, .61, .355, 1)
}

.hero-main-video-btn:hover {
    opacity: .7
}

.hero-main-video-btn .icon-media,
.hero-main-video-btn .icon-media .lines {
    display: block
}

.hero-main-video-btn .icon-media .polygon,
.hero-main-video-btn.is-paused .icon-media .lines {
    display: none
}

.hero-main-video-btn.is-paused .icon-media .polygon {
    display: block
}

.hero .hero-main-common:focus-within {
    box-shadow: 0 0 0 3px #e0e0e0
}

.hero a.hero-main:hover {
    opacity: .8
}

.hero-sub {
    width: 33.3333333333%;
    display: flex;
    flex-direction: column;
    row-gap: 16px
}

@media screen and (max-width: 899px) {
    .hero-sub {
        width: 100%;
        flex-direction: row;
        column-gap: 8px
    }
}

.hero-sub-logo {
    position: absolute;
    width: 11.25vw;
    top: 1.5vw;
    left: 1.5vw
}

@media screen and (max-width: 899px) {
    .hero-sub-logo {
        width: 18vw;
        top: 2.5vw;
        left: 2.5vw
    }
}

.hero-sub-text {
    position: absolute;
    bottom: 1.25vw;
    left: 1.5vw;
    display: flex;
    flex-direction: column;
    color: #fff;
    line-height: 1.5
}

@media screen and (max-width: 899px) {
    .hero-sub-text {
        line-height: 1.4
    }
}

.hero-sub-text>span {
    font-size: max(1vw, 10px);
    font-weight: 400
}

.hero-sub-text>p {
    font-size: max(1.25vw, 13px);
    font-weight: 700
}

.hero-main-common {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    aspect-ratio: 2/1;
    transition: opacity .2s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (max-width: 899px) {
    .hero-main-common {
        aspect-ratio: 5/4
    }
}

.hero-main-common a:hover>img,
.hero-main-common a:hover video {
    transform: scale(1.02)
}

.hero-main-common>img,
.hero-main-common>video,
.hero-main-common>a>img,
.hero-main-common>a>video {
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: wipeImage 2s cubic-bezier(.215, .61, .355, 1) .4s forwards;
    transition: transform .6s cubic-bezier(.215, .61, .355, 1);
    object-fit: cover
}

.hero-main-common>video,
.hero-main-common>a>video {
    object-fit: cover
}

.hero-main-common-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f8fa;
    animation: wipeOverlay 1.2s ease forwards
}

.hero-sub-common {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    aspect-ratio: 2/1;
    transition: .2s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (max-width: 899px) {
    .hero-sub-common {
        aspect-ratio: 5/4
    }
}

.hero-sub-common>img {
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: wipeImage 2s cubic-bezier(.215, .61, .355, 1) .4s forwards;
    transition: transform .6s cubic-bezier(.215, .61, .355, 1);
    object-fit: cover
}

.hero-sub-common-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f8fa;
    animation: wipeOverlay 1.2s ease forwards
}

.hero a.hero-sub-common:hover>img {
    transform: scale(1.05)
}

.hero:has(.hero-sub .hero-sub-common:only-child) .hero-main {
    width: 66.6666666667%
}

@media screen and (max-width: 899px) {
    .hero:has(.hero-sub .hero-sub-common:only-child) .hero-main {
        width: 100%
    }
}

.hero .hero-sub:has(.hero-sub-common:only-child) {
    width: 33.3333333333%
}

@media screen and (max-width: 899px) {
    .hero .hero-sub:has(.hero-sub-common:only-child) {
        width: 100%
    }
}

.hero .hero-sub:has(.hero-sub-common:only-child) .hero-sub-common {
    aspect-ratio: 1/1
}

@media screen and (max-width: 899px) {
    .hero .hero-sub:has(.hero-sub-common:only-child) .hero-sub-common {
        aspect-ratio: 2.4/1
    }
}

.hero:not(:has(.hero-sub-common)) .hero-main.hero-main-common {
    aspect-ratio: 2.4/1
}

@media screen and (max-width: 899px) {
    .hero:not(:has(.hero-sub-common)) .hero-main.hero-main-common {
        aspect-ratio: 5/4
    }
}

.hero .hero-sub:not(:has(.hero-sub-common)) {
    display: none
}

@keyframes wipeImage {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes wipeOverlay {
    0% {
        transform: translate(-100%);
        opacity: 1
    }

    60% {
        opacity: 1
    }

    to {
        transform: translate(100%);
        opacity: 0
    }
}

.about {
    width: 100%;
    margin-top: 72px
}

@media screen and (max-width: 899px) {
    .about {
        margin-top: 64px
    }
}

.about-wrapper {
    max-width: 1480px;
    margin: 0 auto;
    padding-inline: 40px
}

.about-wrapper>p:nth-last-of-type(1) {
    margin-top: 8px
}

@media screen and (max-width: 899px) {
    .about-wrapper {
        padding-inline: 16px
    }
}

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

@media screen and (max-width: 899px) {
    .about-content {
        padding-left: min(12vw, 48px)
    }
}

.about-content-top {
    display: flex;
    flex-direction: row;
    column-gap: min(15vw, 60px);
    margin-top: 16px;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 899px) {
    .about-content-top {
        flex-direction: column;
        align-items: flex-start
    }
}

.about-content-top-conduct {
    margin-top: 50px
}

@media screen and (max-width: 899px) {
    .about-content-top-conduct {
        padding-block: 0;
        padding-inline: 0;
        margin-top: 40px
    }
}

.about-content-top-conduct>h3 {
    width: 100%;
    height: auto
}

@media screen and (max-width: 899px) {
    .about-content-top-conduct>h3 {
        min-width: 350px;
        min-width: unset
    }
}

.about-content-top-conduct>h3>img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 36px
}

.about-content-top-conduct>p {
    margin-top: 40px;
    font-weight: 300;
    font-size: 16px;
    font-feature-settings: "palt";
    font-kerning: none;
    letter-spacing: .16em;
    line-height: 2.2
}

@media screen and (max-width: 899px) {
    .about-content-top-conduct>p {
        font-size: 14px;
        line-height: 2.2
    }
}

.about-content-top-message {
    display: flex;
    flex-direction: column;
    margin-top: 24.92px;
    row-gap: 24px
}

@media screen and (max-width: 899px) {
    .about-content-top-message {
        margin-top: 40px;
        row-gap: 16px
    }
}

.about-content-top-message h3 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .2em
}

@media screen and (max-width: 899px) {
    .about-content-top-message h3 {
        font-size: 14px
    }
}

.about-content-top-message-card>ul {
    display: flex;
    column-gap: min(5.8125vw, 93px);
    position: relative
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul {
        column-gap: min(6vw, 24px)
    }
}

.about-content-top-message-card>ul>li {
    width: clamp(148px, 18.2745614035vw, 208.33px);
    position: relative
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul>li {
        width: min(37vw, 148px);
        height: min(51.25vw, 205px)
    }
}

.about-content-top-message-card>ul>li>a .about-content-top-message-card-img {
    overflow: hidden;
    width: clamp(123px, 18.2745614035vw, 208.33px);
    height: clamp(164px, 24.3666666667vw, 277.78px);
    border-radius: 4px;
    position: relative
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul>li>a .about-content-top-message-card-img {
        width: min(30.75vw, 123px);
        height: min(41vw, 164px)
    }
}

.about-content-top-message-card>ul>li>a .about-content-top-message-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.215, .61, .355, 1)
}

.about-content-top-message-card>ul>li>a .about-content-top-message-card-icn {
    width: clamp(30.75px, 3.5964912281vw, 41px);
    height: clamp(30.75px, 3.5964912281vw, 41px);
    border: .75px solid #64727F;
    border-radius: 50%;
    position: absolute;
    top: clamp(141px, 21.8421052632vw, 249px);
    left: clamp(105px, 16.1403508772vw, 184px)
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul>li>a .about-content-top-message-card-icn {
        width: min(7.6875vw, 30.75px);
        height: min(7.6875vw, 30.75px);
        top: min(35.25vw, 141px);
        left: min(26.25vw, 105px)
    }
}

.about-content-top-message-card>ul>li>a .about-content-top-message-card-icn:before {
    content: "";
    position: absolute;
    top: clamp(14px, 1.5789473684vw, 18px);
    left: clamp(10.4px, 1.2719298246vw, 14.5px);
    width: clamp(4.5px, .5263157895vw, 6px);
    border-top: .75px solid #64727F;
    transform: rotate(45deg);
    transition: transform .2s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul>li>a .about-content-top-message-card-icn:before {
        top: 43.5%;
        left: 11.4px
    }
}

.about-content-top-message-card>ul>li>a .about-content-top-message-card-icn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: clamp(-15.8px, -1.3859649123vw, -10.95px);
    width: clamp(26.48px, 3.0973684211vw, 35.31px);
    border-bottom: .75px solid #64727F;
    transform: translateY(-50%);
    transition: width .2s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul>li>a .about-content-top-message-card-icn:after {
        width: 26.48px;
        left: -10.95px
    }
}

.about-content-top-message-card>ul>li>a:hover>div>img {
    transform: scale(1.07)
}

.about-content-top-message-card>ul>li>a:hover .about-content-top-message-card-icn:before {
    transform: translate(clamp(3px, .350877193vw, 4px)) rotate(45deg)
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul>li>a:hover .about-content-top-message-card-icn:before {
        transform: translate(3.7px) rotate(45deg)
    }
}

.about-content-top-message-card>ul>li>a:hover .about-content-top-message-card-icn:after {
    width: clamp(30px, 3.5087719298vw, 40px)
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul>li>a:hover .about-content-top-message-card-icn:after {
        width: 30px
    }
}

.about-content-top-message-card>ul>li>a>span {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 20px;
    letter-spacing: .04em;
    color: #2d2926
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul>li>a>span {
        font-size: min(3.5vw, 14px)
    }
}

.about-content-top-message-card>ul>li>a>p {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 8px;
    letter-spacing: .08em;
    color: #2d2926
}

@media screen and (max-width: 899px) {
    .about-content-top-message-card>ul>li>a>p {
        font-size: min(4vw, 16px)
    }
}

.about-content-top-message-card>ul>li:focus-within {
    box-shadow: 0 0 0 3px #e0e0e0
}

.news {
    width: 100%;
    margin-top: 58px
}

@media screen and (max-width: 899px) {
    .news {
        margin-top: 72px
    }
}

.news-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 40px;
    padding-inline: 40px
}

.news-wrapper>p:nth-last-of-type(1) {
    margin-top: 8px
}

@media screen and (max-width: 899px) {
    .news-wrapper {
        padding-top: 0;
        padding-inline: 0
    }
}

.news-title {
    display: flex;
    align-items: center;
    column-gap: 24px
}

@media screen and (max-width: 899px) {
    .news-title {
        padding-inline: 32px;
        column-gap: min(6vw, 24px)
    }
}

.news-tab-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 32px;
    position: relative;
    border-bottom: 1px solid #dcdcdc
}

@media screen and (max-width: 899px) {
    .news-tab-wrapper {
        margin-top: 24px;
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #888888 #f1f1f1;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-bottom: none
    }

    .news-tab-wrapper::-webkit-scrollbar {
        display: none
    }
}

.news-list {
    display: flex;
    padding-left: 0;
    column-gap: 20px;
    position: relative;
    z-index: 1
}

@media screen and (max-width: 899px) {
    .news-list {
        padding-inline: 32px;
        column-gap: 0
    }
}

.news-list-item {
    cursor: pointer
}

@media screen and (max-width: 899px) {
    .news-list-item {
        border-bottom: 1px solid #dcdcdc;
        padding-right: 12px
    }
}

@media screen and (max-width: 899px) {
    .news-list-item:last-of-type {
        padding-right: 0
    }
}

.news-list-item>span {
    display: inline-block;
    padding: 16px 12px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: .06em;
    margin-bottom: -1px
}

@media screen and (max-width: 899px) {
    .news-list-item>span {
        font-size: 13px;
        padding: 16px 4px;
        white-space: nowrap
    }
}

.news-list-item {
    color: #65727f;
    position: relative;
    transition: color .2s cubic-bezier(.215, .61, .355, 1)
}

.news-list-item:hover {
    color: #2d2926
}

.news-list-item.active {
    color: #2d2926;
    font-weight: 700
}

.news-list-item.active>span {
    border-bottom: 1px solid #2D2926
}

.news-rss-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 12px
}

.news-rss {
    width: fit-content;
    display: flex;
    align-items: center;
    column-gap: 8.17px;
    font-size: 16px;
    color: #65727f;
    transition: opacity .2s cubic-bezier(.215, .61, .355, 1);
    line-height: 1.6;
    padding-right: 4px
}

@media screen and (max-width: 899px) {
    .news-rss {
        font-size: 14px;
        column-gap: 7.75px;
        padding-right: 32px
    }
}

.news-rss:hover .news-rss-text {
    border-color: #65727f
}

.news-rss-icn {
    display: inline-block;
    width: 12.5px;
    height: 12.5px;
    background: url(../img/rss-icn.svg) no-repeat center/contain;
    transition: opacity .2s cubic-bezier(.215, .61, .355, 1)
}

.news-rss-text {
    border-bottom: solid 1px transparent;
    transition: .2s cubic-bezier(.215, .61, .355, 1)
}

.news-panel {
    display: none;
    opacity: 0;
    margin-top: 8px
}

.news-panel.active {
    display: block;
    animation: fadeInTab .4s ease forwards
}

.news-panel-list {
    list-style: none;
    padding-left: 0;
    margin: 0
}

@media screen and (max-width: 899px) {
    .news-panel-list {
        padding-inline: 32px
    }
}

.news-panel-list li {
    display: flex;
    width: fit-content;
    align-items: baseline;
    position: relative;
    cursor: pointer
}

@media screen and (max-width: 899px) {
    .news-panel-list li {
        display: block
    }
}

.news-panel-list li:hover .news-panel-list-text {
    color: #195ccd;
    text-decoration: underline;
    text-decoration-color: #195ccd;
    transition: color .2s cubic-bezier(.165, .84, .44, 1), text-decoration-color .2s cubic-bezier(.165, .84, .44, 1)
}

.news-panel-list li:not(:first-child) {
    margin-top: 32px
}

@media screen and (max-width: 899px) {
    .news-panel-list li:not(:first-child) {
        margin-top: 24px
    }
}

.news-panel-list li .news-panel-list-date {
    font-size: 14px;
    color: #464f58;
    letter-spacing: .06em;
    line-height: 1.5;
    white-space: nowrap;
    position: relative;
    margin-right: 16px;
    min-width: 113px;
    z-index: 2
}

@media screen and (max-width: 899px) {
    .news-panel-list li .news-panel-list-date {
        font-size: 12px;
        width: 100%
    }
}

.news-panel-list li .news-panel-list-badges {
    display: flex
}

.news-panel-list li .news-panel-list-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    justify-content: center;
    /* font-size: 13px; */
    font-size: 11px;
    margin-right: 4px;
    padding-block: 3px 4px;
    padding-inline: 12px;
    background-color: #e0e3e5;
    color: #464f58;
    line-height: 1;
    border-radius: 2px;
    flex-shrink: 0;
    white-space: nowrap
}

.news-panel-list li .news-panel-list-badge:not(:has(+.news-panel-list-badge)) {
    margin-right: 16px
}

@media screen and (max-width: 899px) {
    .news-panel-list li .news-panel-list-badge {
        width: auto;
        /* font-size: 12px; */
        font-size: 8px;
        margin-top: 4px;
        margin-right: 2px;
        padding-block: 2px 3px;
        padding-inline: 12px
    }
}

.news-panel-list li .news-panel-list-badge:nth-child(1) {
    min-width: 120px
}

@media screen and (max-width: 899px) {
    .news-panel-list li .news-panel-list-badge:nth-child(1) {
        min-width: 100px
    }
}

.news-panel-list li .news-panel-list-badge.is-timely {
    background-color: #b8e7ff
}

.news-panel-list li .news-panel-list-badge-icn {
    margin-left: 8px;
    transform: translateY(2px)
}

.news-panel-list li .news-panel-list-text {
    display: flex
}

.news-panel-list li .news-panel-list-text>img {
    width: 15.714px;
    height: 18.571px;
    margin-left: 15.37px;
    transform: translateY(4px)
}

@media screen and (max-width: 899px) {
    .news-panel-list li .news-panel-list-text {
        margin-top: 8px
    }
}

.news-panel-list li .news-panel-list-text {
    transition: color .2s cubic-bezier(.215, .61, .355, 1), text-decoration-color .2s cubic-bezier(.215, .61, .355, 1)
}

.news-panel-list li a {
    display: flex;
    align-items: baseline;
    font-size: 16px;
    color: #2d2926;
    line-height: 1.5
}

@media screen and (max-width: 899px) {
    .news-panel-list li a {
        flex-direction: column;
        font-size: 14px;
        margin-top: 8px
    }
}

.news-panel-list li a:visited {
    color: #65727f;
    text-decoration: underline
}

.news-panel-list li a>img {
    width: 15.7px;
    height: 18.6px;
    transform: translateY(2px);
    margin-left: 8px
}

@media screen and (max-width: 899px) {
    .news-panel-list li a>img {
        transform: translateY(5px)
    }
}

.news-button {
    margin-top: 40px
}

@media screen and (max-width: 899px) {
    .news-button {
        margin-top: 24px;
        margin-left: 32px
    }
}

.news-important {
    display: flex;
    align-items: flex-start;
    padding-block: 18px;
    padding-inline: 17.5px;
    column-gap: 8px;
    margin-top: 32px;
    color: #d31d51;
    background-color: #f4f5f6;
    line-height: 1;
    border-radius: 4px
}

@media screen and (max-width: 899px) {
    .news-important {
        margin-top: 24px;
        margin-inline: 32px;
        font-size: 14px
    }
}

.news-important>a {
    display: flex;
    text-decoration: underline rgba(0, 0, 0, 0);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    line-height: 1.6;
    letter-spacing: .06em
}

.news-important>a:after {
    content: "";
    display: inline-block;
    width: 17.8px;
    height: 14.7px;
    background-image: url(../img/important-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    top: 4px;
    left: 1px
}

.news-important>a {
    transition: text-decoration-color .2s cubic-bezier(.215, .61, .355, 1)
}

.news-important>a:hover {
    text-decoration-color: #d31d51
}

.news-important>img {
    width: 28px;
    height: 28px;
    position: relative
}

@keyframes fadeInTab {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.pickup {
    width: 100%;
    margin-top: 80px;
    position: relative;
    z-index: 1
}

@media screen and (max-width: 899px) {
    .pickup {
        margin-top: 72px
    }
}

.pickup-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: 40px
}

.pickup-wrapper>p:nth-last-of-type(1) {
    margin-top: 8px
}

@media screen and (max-width: 899px) {
    .pickup-wrapper {
        padding-inline: 32px
    }
}

.pickup-title {
    display: flex;
    align-items: center;
    column-gap: 24px
}

@media screen and (max-width: 899px) {
    .pickup-title {
        column-gap: min(6vw, 24px)
    }
}

.pickup-list {
    width: 100%
}

.pickup-list>ul {
    display: flex;
    column-gap: 35px;
    margin-top: 32px
}

@media screen and (max-width: 899px) {
    .pickup-list>ul {
        flex-wrap: wrap;
        column-gap: 4%;
        row-gap: 24px
    }
}

.pickup-list>ul>li {
    width: 273.75px;
    height: 215.02px;
    cursor: pointer
}

@media screen and (max-width: 899px) {
    .pickup-list>ul>li {
        width: 47.5%;
        height: auto
    }
}

.pickup-list>ul>li>a>div {
    border-radius: 4px;
    overflow: hidden
}

.pickup-list>ul>li>a>div>img {
    object-fit: cover;
    transform: scale(1);
    transition: transform .6s cubic-bezier(.215, .61, .355, 1)
}

.pickup-list>ul>li>a>p {
    margin-top: 24px;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .08em;
    color: #2d2926;
    transition: opacity .2s cubic-bezier(.215, .61, .355, 1)
}

@media screen and (max-width: 899px) {
    .pickup-list>ul>li>a>p {
        font-size: min(3.5vw, 14px);
        margin-top: 18px
    }
}

.pickup-list>ul>li>a:hover>div>img {
    transform: scale(1.07)
}

.pickup-list>ul>li>a:hover>p {
    opacity: .7
}

.pickup-list>ul>li:focus-within {
    box-shadow: 0 0 0 3px #e0e0e0
}

.business {
    background-image: linear-gradient(178deg, #f0f3f7, #fff);
    margin-top: -153px;
    padding-top: 275px;
    position: relative
}

@media screen and (max-width: 899px) {
    .business {
        margin-top: -58.75vw;
        padding-top: 81.5vw
    }
}

.business-wrapper {
    max-width: 1480px;
    padding-inline: 40px;
    padding-bottom: 64px;
    margin: 0 auto;
    position: relative
}

@media screen and (max-width: 899px) {
    .business-wrapper {
        padding-inline: 16px;
        padding-bottom: 40px
    }
}

.business-wrapper:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background-color: #dcdcdc
}

@media screen and (max-width: 899px) {
    .business-wrapper:after {
        left: 16px;
        right: 16px
    }
}

.business-wrapper .business-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

@media screen and (max-width: 899px) {
    .business-wrapper .business-top {
        flex-direction: column;
        row-gap: 25px
    }
}

.business-wrapper .business-list {
    margin-top: 40px
}

.business-wrapper .business-list>ul {
    display: flex;
    gap: min(.0625vw, 1px);
    flex-wrap: wrap;
    border-radius: 4px;
    overflow: hidden;
    justify-content: space-between
}

@media screen and (max-width: 899px) {
    .business-wrapper .business-list>ul {
        gap: min(.25vw, 1px)
    }
}

.business-wrapper .business-list>ul>li {
    width: 24.9%;
    overflow: hidden
}

@media screen and (max-width: 899px) {
    .business-wrapper .business-list>ul>li {
        width: 49.8%
    }
}

.business-wrapper .business-list>ul>li .business-list-thumbnail>img {
    transform: scale(1);
    transition: transform .6s cubic-bezier(.215, .61, .355, 1)
}

.business-wrapper .business-list>ul>li>a {
    display: block;
    width: 100%;
    position: relative;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 1.5;
    letter-spacing: .04em
}

@media screen and (max-width: 899px) {
    .business-wrapper .business-list>ul>li>a {
        font-size: min(4vw, 16px)
    }
}

.business-wrapper .business-list>ul>li>a .business-text-overlay {
    position: absolute;
    left: 16px;
    bottom: 16px
}

@media screen and (max-width: 899px) {
    .business-wrapper .business-list>ul>li>a .business-text-overlay {
        font-size: min(4vw, 16px);
        left: min(4vw, 16px);
        bottom: min(4vw, 16px)
    }
}

.business-wrapper .business-list>ul>li:hover .business-list-thumbnail>img {
    transform: scale(1.08)
}

.business-wrapper .business-list>ul>li:focus-within {
    box-shadow: 0 0 0 3px #e0e0e0;
    position: relative;
    z-index: 10
}

.search {
    width: 100%
}

.search .search-wrapper {
    max-width: 1280px;
    padding-inline: 40px;
    margin: 0 auto;
    position: relative
}

@media screen and (max-width: 899px) {
    .search .search-wrapper {
        padding-inline: 24px
    }
}

.search .search-wrapper .search-content {
    width: 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding-block: 64px 16px
}

@media screen and (max-width: 899px) {
    .search .search-wrapper .search-content {
        width: 100%;
        padding-block: 40px 16px
    }
}

.search .search-wrapper .search-content>p:nth-of-type(1) {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .2em;
    color: #2d2926
}

@media screen and (max-width: 899px) {
    .search .search-wrapper .search-content>p:nth-of-type(1) {
        font-size: 18px
    }
}

.search .search-wrapper .search-content>p:nth-of-type(2) {
    font-size: 16px;
    font-weight: 300;
    margin-top: 24px;
    line-height: 1.83;
    text-align: center;
    color: #2d2926
}

@media screen and (max-width: 899px) {
    .search .search-wrapper .search-content>p:nth-of-type(2) {
        font-size: 16px
    }
}

.search .search-wrapper .search-content .SS_searchForm {
    display: flex;
    position: relative;
    margin-top: 32px;
    width: 100%
}

.search .search-wrapper .search-content .SS_searchForm input[type=search] {
    width: 580px;
    padding-block: 20.5px;
    padding-inline: 32px 27px;
    font-size: 18px;
    background-color: #f4f5f6;
    border: none;
    border-radius: 60px;
    cursor: text;
    outline: none
}

@media screen and (max-width: 899px) {
    .search .search-wrapper .search-content .SS_searchForm input[type=search] {
        width: 100%;
        padding-block: 22px;
        padding-inline: 24px 18.5px;
        font-size: min(4vw, 16px)
    }
}

.search .search-wrapper .search-content .SS_searchForm input[type=search]:focus {
    outline: 2px solid #003DA5;
    outline-offset: 0px;
    background-color: #fff
}

.search .search-wrapper .search-content .SS_searchForm input::placeholder {
    font-weight: 400;
    line-height: 1.25;
    color: #65727f
}

@media screen and (max-width: 899px) {
    .search .search-wrapper .search-content .SS_searchForm input::placeholder {
        line-height: 1.25
    }
}

.search .search-wrapper .search-content .SS_searchForm input[type=submit] {
    position: absolute;
    top: 19px;
    right: 27px;
    width: 26px;
    height: 26px;
    border: none;
    cursor: pointer;
    background: url(../img/search-icn.svg) center center/contain no-repeat
}

@media screen and (max-width: 899px) {
    .search .search-wrapper .search-content .SS_searchForm input[type=submit] {
        width: min(4.875vw, 19.5px);
        height: min(4.875vw, 19.5px);
        top: 23.5px;
        right: 18.5px
    }
}