/* ヒーローセクション */
.hero {
    width: 100vw;
    height: 54.739583vw;
    position: relative;
}

@media (max-width: 780px) {
    .hero {
        width: 100vw;
        height: 168vw;
    }
}

.hero__slider-wrap {
    width: 88.541667vw;
    height: 51.197917vw;
    position: absolute;
    top: 3.361458vw;
    left: 4.583333vw;
    overflow: hidden;
}

@media (max-width: 780px) {
    .hero__slider-wrap {
        width: 91.466667vw;
        height: 151.810667vw;
        top: 10.848vw;
        left: 4.266667vw;
    }
}

.hero__slider {
    width: 88.541667vw;
    height: 51.197917vw;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
    transition: transform 1.5s ease-in-out;
    opacity: 1;
}

@media (max-width: 780px) {
    .hero__slider {
        width: 91.466667vw;
        height: 151.810667vw;
        top: 0;
        left: 0;
    }
}

.hero__slider.active {
    transform: translateX(0);
    opacity: 1;
}

.hero__slider-image {
    width: 86.041667vw;
    height: 50.520833vw;
    border-radius: 1.5625vw;
    position: absolute;
    top: 0;
    left: 2.5vw;
    overflow: hidden;
}

@media (max-width: 780px) {
    .hero__slider-image {
        width: 82.666667vw;
        height: 144vw;
        top: 0;
        left: 8.8vw;
        border-radius: 8vw;
    }
}

.hero__slider-message-wrap {
    padding: 0.729167vw 2.5vw;
    background-color: white;
    border-radius: 0.9375vw;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1.979167vw;
}

@media (max-width: 780px) {
    .hero__slider-message-wrap {
        padding: 2.133333vw 2.666667vw;
        border-radius: 1.6vw;
        gap: 2.666667vw;
    }
}

.hero__slider-message {
    font-family: 'BIZ UDMincho', serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.739;
    letter-spacing: 0;
}

@media (max-width: 780px) {
    .hero__slider-message {
        font-size: 3.733333vw;
    }
}

.hero__slider-message-sub {
    font-family: 'BIZ UDMincho', serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.667;
    letter-spacing: 0;
}

@media (max-width: 780px) {
    .hero__slider-message-sub {
        font-size: 3.2vw;
    }
}

.hero__title-wrap {
    width: 20.3125vw;
    height: 13.28125vw;
    position: fixed;
    top: 1.979167vw;
    left: 0;
    background-color: #fff;
    z-index: 10;
}

@media (max-width: 780px) {
    .hero__title-wrap {
        width: 48vw;
        height: 31.384vw;
        position: absolute;
        top: 6.4vw;
        left: 0;
    }
}

.hero__title {
    width: 15.885417vw;
    height: 8.967188vw;
    position: absolute;
    top: 1.40625vw;
    left: 2.760417vw;
}

@media (max-width: 780px) {
    .hero__title {
        width: 37.538667vw;
        height: 21.189333vw;
        top: 3.322667vw;
        left: 6.522667vw;
    }
}

.hero__title-salon {
    width: 3.802083vw;
    height: 0.859375vw;
    position: absolute;
    top: 11.204167vw;
    left: 5.207292vw;
    overflow: hidden;
}

@media (max-width: 780px) {
    .hero__title-salon {
        width: 9.333333vw;
        height: 2.133333vw;
        top: 26.477333vw;
        left: 12.293333vw;
    }
}

.hero__logo-wrap {
    width: 2.210417vw;
    height: 17.4125vw;
    position: absolute;
    top: 20.104167vw;
    right: 2.384375vw;
    text-decoration: none;
}

@media (max-width: 780px) {
    .hero__logo-wrap {
        width: 6.933333vw;
        height: 59.306667vw;
        top: 54.928vw;
        right: unset;
        left: 4.266667vw;
    }
}

.hero__logo-wrap svg path {
    transition: fill 0.3s ease-in-out;
}

.hero__logo-wrap:hover svg path {
    fill: #5C5867;
}

.hero__slider-bar-wrap {
    width: 9.479167vw;
    height: 0.104167vw;
    position: absolute;
    top: 54.635417vw;
    left: 44.010417vw;
    background-color: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

@media (max-width: 780px) {
    .hero__slider-bar-wrap {
        width: 30.666667vw;
        height: 0.533333vw;
        top: 165.333333vw;
        left: 30.666667vw;
    }
}

.hero__slider-bar {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 0.520833vw;
}

@media (max-width: 780px) {
    .hero__slider-bar {
        gap: 1.333333vw;
    }
}

.hero__slider-bar-item {
    flex: 1;
    height: 100%;
    background-color: #d6d6d6;
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
}

.hero__slider-bar-item.active {
    background-color: black;
}

/* アバウトセクション */
.about {
    width: 100vw;
    height: 78.489583vw;
    position: relative;
}

@media (max-width: 780px) {
    .about {
        width: 100vw;
        height: 234.402667vw;
    }
}

.about__image {
    width: 82.513542vw;
    height: 22.585417vw;
    position: absolute;
    top: 5.764583vw;
    right: 0;
}

@media (max-width: 780px) {
    .about__image {
        width: 100vw;
        height: 35.237333vw;
        top: 10.706667vw;
        right: 0;
    }
}

.about__text-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.333333vw;
    position: absolute;
    top: 32.702083vw;
    left: 17.213542vw;
}

@media (max-width: 780px) {
    .about__text-wrap {
        width: 91.290667vw;
        top: 56.8vw;
        left: 3.461333vw;
        gap: 0;
    }
}

.about__text-title {
    font-family: 'BIZ UDMincho', serif;
    font-size: 2.604vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

@media (max-width: 780px) {
    .about__text-title {
        font-size: 4.8vw;
    }
}

.about__logo {
    display: none;
}

@media (max-width: 780px) {
    .about__logo {
        display: block;
        width: 52.92vw;
        height: 11.741333vw;
        margin-top: 2.165333vw;
    }
}

.about__text {
    font-size: 1.25vw;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

@media (max-width: 780px) {
    .about__text {
        font-size: 3.733333vw;
        margin-top: 7.426667vw;
    }
}

.about__title-wrap {
    position: absolute;
    top: 9.957813vw;
    right: 13.079167vw;
    width: 6.295833vw;
     width: 7.2vw;
    height: 34.194271vw;
    background-color: #fff;
}

@media (max-width: 780px) {
    .about__title-wrap {
        width: 13.890667vw;
        width: 14.89vw;
        height: 66.672vw;
        top: 17.341333vw;
        right: 14.405333vw;
    }
}

.about__title {
    position: absolute;
    top: 0.8333vw;
    right: 0.8333vw;
    font-family: 'BIZ UDMincho', serif;
    font-size: 2.60416vw;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.4em;
    writing-mode: vertical-rl;
}

@media (max-width: 780px) {
    .about__title {
        top: 2.133333vw;
        right: 2.133333vw;
        font-size: 4.8vw;
    }
}

.about__title-text {
    position: absolute;
    top: 1.454167vw;
    left: 0.8333vw;
    font-size: 1.6667vw;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.4em;
    writing-mode: vertical-rl;
}

@media (max-width: 780px) {
    .about__title-text {
        top: 2.133333vw;
        left: 2.133333vw;
        font-size: 3.733333vw;
    }
}

.recommend {
    width: 100vw;
    position: relative;
    background-color: #E5DFD9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.166667vw;
    padding: 4.166667vw 8.333333vw;
}

@media (max-width: 780px) {
    .recommend {
        width: 100vw;
        padding: 10.666667vw 4.266667vw;
        gap: 10.666667vw;
    }
}

.recommend__title-wrap {
    font-family: 'BIZ UDMincho', serif;
    font-size: 50px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

@media (max-width: 780px) {
    .recommend__title-wrap {
        font-size: 4.8vw;
    }
}

.recommend__wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2.604167vw;
    row-gap: 2.604167vw;
    padding: 0 2.265625vw;
}

@media (max-width: 780px) {
    .recommend__wrap {
        padding: 0;
        gap: 6.133333vw;
    }
}

.recommend__item {
    width: 17.708333vw;
    display: flex;
    flex-direction: column;
    gap: 0.833333vw;
}

@media (max-width: 780px) {
    .recommend__item {
        width: 42.666667vw;
        gap: 4.266667vw;
    }
}

.recommend__item:nth-child(even) {
    padding-top: 2.604167vw;
}

@media (max-width: 780px) {
    .recommend__item:nth-child(even) {
        padding-top: 6.4vw;
    }
}

.recommend__item-image {
    width: 17.708333vw;
    height: 26.041667vw;
    border-radius: 1.5625vw;
    overflow: hidden;
}

@media (max-width: 780px) {
    .recommend__item-image {
        width: 42.666667vw;
        height: 61.333333vw;
        border-radius: 2.133333vw;
    }
}

.recommend__item-image img {
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.recommend__item-image:hover img {
    transform: scale(1.05);
}


.recommend__item-title-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 780px) {
    .recommend__item-title-wrap {
        gap: 4px;
    }
}

.recommend__item-date {
    color: #545454;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

@media (max-width: 780px) {
    .recommend__item-date {
        font-size: 3.2vw;
    }
}

.recommend__item-title {
    color: black;
    font-family: 'BIZ UDMincho', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
}

@media (max-width: 780px) {
    .recommend__item-title {
        font-size: 3.733333vw;
    }
}

.recommend__item-text {
    color: black;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0;
}

@media (max-width: 780px) {
    .recommend__item-text {
        font-size: 3.2vw;
    }
}

.recommend__item-button-wrap {
    padding-top: 0.833333vw;
    border-top: 1px solid #66300E;
    display: flex;
    gap: 0.416667vw;
}

@media (max-width: 780px) {
    .recommend__item-button-wrap {
        padding-top: 4.266667vw;
        gap: 2.133333vw;
    }
}

.recommend__item-favorite-button {
    width: 0.995833vw;
    height: 0.888542vw;
    cursor: pointer;
}

@media (max-width: 780px) {
    .recommend__item-favorite-button {
        width: 5.098667vw;
        height: 4.549333vw;
    }
}

.recommend__item-favorite-button path {
    transition: fill 0.3s ease-in-out, stroke 0s ease-in-out;
}

.recommend__item-favorite-button:hover path {
        fill: #FFD2BA;
        stroke: #FFD2BA;
}

.recommend__item-share-button {
    width: 0.9125vw;
    height: 0.910417vw;
    cursor: pointer;
}

@media (max-width: 780px) {
    .recommend__item-share-button {
        width: 4.672vw;
        height: 4.661333vw;
    }
}

.recommend__button {
    width: 16.667vw;
    height: 4.271vw;
    border: 2px solid #333;
    border-radius: 0.833vw;
    cursor: pointer;
    font-size: 1.25vw;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    padding-top: 1.25vw;
    padding-left: 4.167vw;
    position: relative;
}

.recommend__button.active {
    padding-left: 6vw;
}

.recommend__button::after {
    position: absolute;
    top: 1.51vw;
    right: 4.167vw;
    content: '';
    display: block;
    width: 1.25vw;
    height: 1.25vw;
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6103_709)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.7044 11.2932C15.8919 11.4807 15.9972 11.735 15.9972 12.0002C15.9972 12.2653 15.8919 12.5197 15.7044 12.7072L10.0474 18.3642C9.95517 18.4597 9.84482 18.5359 9.72282 18.5883C9.60081 18.6407 9.46959 18.6683 9.33681 18.6694C9.20404 18.6706 9.07236 18.6453 8.94946 18.595C8.82656 18.5447 8.71491 18.4705 8.62102 18.3766C8.52713 18.2827 8.45287 18.171 8.40259 18.0481C8.35231 17.9252 8.32701 17.7936 8.32816 17.6608C8.32932 17.528 8.3569 17.3968 8.40931 17.2748C8.46172 17.1528 8.5379 17.0424 8.63341 16.9502L13.5834 12.0002L8.63341 7.05018C8.45125 6.86158 8.35046 6.60898 8.35274 6.34678C8.35502 6.08458 8.46019 5.83377 8.64559 5.64836C8.831 5.46295 9.08182 5.35778 9.34401 5.35551C9.60621 5.35323 9.85881 5.45402 10.0474 5.63618L15.7044 11.2932Z' fill='%23333333'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6103_709'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.recommend__button.active::after {
    transform: rotate(270deg);
}

@media (max-width: 780px) {
    .recommend__button {
        width: 74.133333vw;
        height: 14.93333vw;
        border-radius: 4.266667vw;
        font-size: 4.266667vw;
        line-height: 1;
        padding-top: 4.53333vw;
        padding-left: 21.333333vw;
    }

    .recommend__button.active {
        padding-left: 26vw;
    }

    .recommend__button::after {
        top: 3.7333vw;
        right: 21.333333vw;
        width: 6.4vw;
        height: 6.4vw;
    }

    .recommend__button.active::after {
        transform: rotate(270deg);
    }
}   

.articles {
    width: 100vw;
    padding: 4.166667vw 6.25vw;
    position: relative;
}

@media (max-width: 780px) {
    .articles {
        width: 100vw;
        padding: 10.666667vw 4.266667vw;
    }
}

.articles__wrap {
    width: 100%;
    background-color: #fff;
    border-radius: 1.25vw;
    padding: 4.166667vw;
    display: flex;
    flex-direction: column;
    gap: 4.166667vw;
}

@media (max-width: 780px) {
    .articles__wrap {
        padding: 10.666667vw 4.266667vw;
        gap: 10.666667vw;
        border-radius: 2.133333vw;
    }
}

.articles__list-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.083333vw;
}

@media (max-width: 780px) {
    .articles__list-wrap {
        gap: 6.4vw;
    }
}

.articles__list-title-wrap {
    display: flex;
    align-items: center;
    gap: 1.25vw;
    text-decoration: none;
    color: unset;
}

@media (max-width: 780px) {
    .articles__list-title-wrap {
        gap: 4.266667vw;
    }
}

.articles__list-title {
    font-family: 'BIZ UDMincho', serif;
    font-size: 50px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

@media (max-width: 780px) {
    .articles__list-title {
        font-size: 4.8vw;
    }
}

.articles__list-arrow-wrap {
    width: 2.604167vw;
    height: 2.604167vw;
    border: 1px solid black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 780px) {
    .articles__list-arrow-wrap {
        width: 6.4vw;
        height: 6.4vw;
    }
}

.articles__list-arrow {
    width: 0.833333vw;
    height: 0.520833vw;
}

@media (max-width: 780px) {
    .articles__list-arrow {
        width: 2.133333vw;
        height: 1.333333vw;
    }
}

.articles__list-box {
    width: 100%;
}

@media (max-width: 780px) {
    .articles__list-box {
        width: 100%;
        overflow: scroll;
    }
}

.articles__list {
    display: flex;
    gap: 3vw;
}

@media (max-width: 780px) {
    .articles__list {
        width: 100%;
        justify-content: unset;
        gap: 24px;
    }
}

.articles__list-item {
    width: 17.708333vw;
    display: flex;
    flex-direction: column;
    gap: 0.9375vw;
}

@media (max-width: 780px) {
    .articles__list-item {
        width: 64vw;
        height: 80.266667vw;
        gap: 4.266667vw;
    }
}

.articles__list-item-image {
    width: 17.708333vw;
    height: 17.708333vw;
    border-radius: 1.25vw;
    overflow: hidden;
}

@media (max-width: 780px) {
    .articles__list-item-image {
        width: 64vw;
        height: 64vw;
        border-radius: 2.133333vw;
    }
}

.articles__list-item-image img {
      object-fit: cover;
}

.articles__list-item-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 780px) {
    .articles__list-item-text-wrap {
        gap: 2.133333vw;
    }
}

.articles__list-item-date {
    color: #545454;
    font-size: 1.11vw;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

@media (max-width: 780px) {
    .articles__list-item-date {
        font-size: 3.2vw;
    }
}

.articles__list-item-title {
    color: black;
    font-family: 'BIZ UDMincho', serif;
    font-size: 1.389vw;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
}

@media (max-width: 780px) {
    .articles__list-item-title {
        font-size: 3.733333vw;
    }
}

/* フッターセクション */
.footer {
    width: 100vw;
    background-color: black;
    padding: 3.333333vw 8.333333vw;
}

@media (max-width: 780px) {
    .footer {
        width: 100vw;
        padding: 10.666667vw 8vw;
    }
}

.footer__container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 780px) {
    .footer__container {
        flex-direction: column;
        justify-content: unset;
    }
}

.footer__logo {
    width: 8.333333vw;
    height: 5.786458vw;
}

@media (max-width: 780px) {
    .footer__logo {
        width: 64vw;
        height: 14.584vw;
    }
}

.footer__list {
    list-style: none;
    display: flex;
    gap: 1.510417vw;
}

@media (max-width: 780px) {
    .footer__list {
        gap: 7.733333vw;
        margin-top: 10.666667vw;
    }
}

.footer__list-item {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

@media (max-width: 780px) {
    .footer__list-item {
        font-size: 3.733333vw;
    }
}

.footer__list-item a {
    color: white;
    text-decoration: none;
}

.footer__copyright {
    color: white;
    font-size: 10px;
    font-weight: 500;
    line-height: 2.8;
    letter-spacing: 0.05em;
}

@media (max-width: 780px) {
    .footer__copyright {
        font-size: 2.666667vw;
        margin-top: 4.266667vw;
    }
}

.to-top {
    position: fixed;
    top: 2.083vw;
    right: 2.124vw;
    width: 2.21vw;
    height: 9.792vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 780px) {
    .to-top {
        width: 9.290667vw;
        height: 42.666667vw;
        top: 6.4vw;
        right: 0;
    }
}