@charset "UTF-8";


/*


    Template: swell


    Theme Name: SWELL CHILD


    Theme URI: https://swell-theme.com/


    Description: SWELLの子テーマ


    Version: 1.0.0


    Author: LOOS WEB STUDIO


    Author URI: https://loos-web-studio.com/





    License: GNU General Public License


    License URI: http://www.gnu.org/licenses/gpl.html


*/



/* =======================
共通
======================= */
.top #content {
    padding-top: 0;
}
.home .l-content {
    margin-bottom: 0;
}
.home .l-content.l-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.home .l-article {
    max-width: none;
}
.home .l-mainContent__inner>.post_content {
    padding-left: 0;
    padding-right: 0;
}
.home .post_content>* {
    margin-bottom: 0;
}
.home .post_content h3 {
    margin: 0;
}
.home .post_content ol, .home .post_content ul {
    padding-inline: 0;
}
.home .post_content li {
    margin: 0;
}
.home p {
    line-height: 1.8em;
}
.home .post_content h2 {
    margin: 0;
}
.container {
    max-width: 1040px;
    padding-inline: 15px;
    margin-inline: auto;
}
.home li {
    list-style: none;
}
img {
    object-fit: cover;
    max-width: 100%;
    width: 100%;
}
.img-arch {
    border-radius: 50vw 50vw 8px 8px;
}
.link {
    font-family: "Marcellus", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, serif;
    font-size: 16px;
    display: flex;
    align-items: center;
    column-gap: 1em;
    width: fit-content;
    position: relative;
}
.link.bigger {
    font-size: 20px;
}
.link.black {
    color: #444;
}
.link::after {
    content: "";
    width: 42px;
    height: 42px;
    border: 1px solid #444444;
    border-radius: 50%;
    flex-shrink: 0;
    transition: 0.3s
}
.link:hover::after {
    background: rgb(255 255 255 / 30%);
}
.link.bigger::after {
    width: 70px;
    height: 70px;
}
.link::before {
    content: "";
    width: 10px;
    height: 10px;
    background: url(./img/arrow-black.svg) no-repeat center/contain;
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin-block: auto;
}
.link.bigger::before {
    width: 16px;
    height: 16px;
    right: 27px;
}
.link.white {
    color: #fff;
}
.link.white::after {
    border: 1px solid #fff;
}
.link.white::before {
    background-image: url(./img/arrow-white.svg);
}
.link:hover::before {
    animation: 0.5s arrow;
}
@keyframes arrow {
    45% {
        transform: translateX(100%);
        opacity: 0;
    }
    50% {
        transform: translateX(-100%);
    }
    
}

h2.heading {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: fit-content;
    margin-inline: auto !important;
    padding-bottom: 60px;
    text-align: center;
}
h2.heading .ff-en {
    font-size: 36px;
    border-bottom: 1px solid  #444444;
}

.img-shadow {
    box-shadow: 0 0 20px rgb(182 169 168 / 80%);
}
.home section {
    position: relative;
}
.home {
    transition-delay: 3s;
    transition: 1s;
}
.img-animation {
    overflow: hidden;
    opacity: 0;
    transition: 2s;
}
.img-animation.show {
    opacity: 1;
}
.img-animation img {
    transform: scale(1.1);
    transition: 4s;
    display: block;
}
.img-animation.show img {
    transform: none;
}
.fade-animation {
    transform: translateY(20px);
    transition: 1s;
    opacity: 0;
}
.fade-animation.show {
    opacity: 1;
    transform: none;
}
.heading-animation {
    opacity: 0;
    transform: translateX(20px);
    display: inline-block;
    transition: .3s;
}
.show .heading-animation {
    transform: none;
    opacity: 1;
}
.title-animation .heading-ja{
    opacity: 0;
    transition: 1s .5s;
}
.show.title-animation .heading-ja {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    h2.heading {
        font-size: 12px;
        padding-bottom: 30px;
    }
    h2.heading .ff-en {
        font-size: 28px;
        border-bottom: 1px solid  #444444;
    }
    .link {
        font-size: 14px;
    }
    .link::after, .link.bigger::after {
        width: 40px;
        height: 40px;
    }
    .link.bigger::before {
        width: 10px;
        height: 10px;
        right: 15px;
    }
}
/* =======================
トップページ
======================= */
.bg__img {
    position: fixed;
    width: 100%;
    height: 100svh;
    top: 0;
    left: 0;
    z-index: -1;
}
.bg__img.hidden {
    display: none;
}
.fv {
    position: relative;
    height: 100svh;
    filter: blur(10px);
    transition: 2s 1s;
}

.loading-cover {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: #F5F1F0;
    z-index: 170;
    transition: 0.5s;
}
:is(.loaded, .visited) .loading-cover {
    opacity: 0;
    visibility: hidden;
}
.loading {
    mask-image: none;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: 50% 50%;
    -webkit-mask-position: 50% 50%;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: #F5F1F0;
    z-index: 150;
}
.loaded .loading {
    -webkit-mask-image: url("./img/mask.png");
    mask-image: url("./img/mask.png");
    animation: loadingAnime 4s 1s forwards;
}
:is(.loaded, .visited) .fv {
    filter: none;
}
@keyframes loadingAnime {
    0% {
        mask-size: 100%;
        -webkit-mask-size: 100%;
    }
    60% {
        mask-size: 200%;
        -webkit-mask-size: 200%;
        opacity: 1;
    }
    100% {
        mask-size: 400%;
        -webkit-mask-size: 400%;
        opacity: 0;
        visibility: hidden;
    }
}
.fv__img {
    display: block;
    height: 100%;
} 
.fv__catch {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
    transition: opacity 2s;
}
:is(.loaded, .visited) .fv__catch {
    opacity: 1;
    transition-delay: 0;
}
.fixed__contact {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #84605D;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 6px;
    border: 1px solid #84605D;
    border-radius: 16px 0 0 16px;
    background: #F8F4F4;
    padding: 10px 18px;
    box-shadow: 0 0 6px #7E6F6E;
    z-index: 15;
}
.fixed__contact::before {
    content: "";
    width: 19px;
    height: 15px;
    background: url(./img/mail-icon-brown.svg) no-repeat center/contain;
}
.fixed__contact:hover {
    padding-right: 26px;
}
.fixed__reserve {
    width: 130px;
    height: 130px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 7px;
    border-radius: 50%;
    background: #84605D;
    padding: 19px 10px 20px;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 0 6px #7E6F6E;
}
.fixed__reserve-outer {
    position: fixed;
    width: 130px;
    height: 130px;
    right: 10px;
    bottom: 10px;
    font-size: 13px;
    z-index: 15;
    transition: 1s;
}
.fixed__reserve::after {
    content: "";
    width: 124px;
    height: 124px;
    border: 1px solid #B6A9A8;
    border-radius: 50%;
    position: absolute;
    inset: 0;
    margin: auto;
    transition: 0.3s;
}
.fixed__reserve .ff-en {
    font-size: 16px;
    line-height: 1.2em;
}
.fixed__reserve img {
    width: 16px;
}
.fixed__reserve:hover {
    background: #896967;
    /* color: #84605D; */
    box-shadow: none;
}
.fixed__reserve:hover::after {
    /* border: 1px solid #84605D; */
}
#closeBtn {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 10;
}
#closeBtn img {
    width: 25px;
    height: 25px;
}
.fixed__reserve-outer.off {
    opacity: 0;
    visibility: hidden;
}
@media screen and (max-width: 768px) {
    .fv {
        height: 85svh;
    }
    .loaded .loading {
        mask-image: url("./img/mask-sp.png");
        -webkit-mask-image: url("./img/mask-sp.png");
    }
    .fv__catch {
        top: 30%;
        margin: 0;
        transition: opacity 2s 4s;
    }
    .fixed__contact {
        width: 100%;
        border-radius: 0;
        -ms-writing-mode: horizontal-tb;;
        writing-mode: horizontal-tb;
        font-size: 15px;
        color: #fff;
        background: #B6A9A8;
        bottom: 0;
        top: auto;
        transform: none;
        height: 72px;
        border: none;
        column-gap: 20px;
    }
    .fixed__contact:hover {
        padding-right: 18px;
    }
    .fixed__contact::before {
        background-image: url(./img/mail-icon-white.svg);
    }
    .fixed__reserve-outer {
        width: 100px;
        height: 100px;
        font-size: 10px;
        bottom: 80px;
    }
    .fixed__reserve {
        width: 100px;
        height: 100px;
        row-gap: 3px;
    }
    .fixed__reserve::after {
        width: 96px;
        height: 96px;
    }
    .fixed__reserve .ff-en {
        font-size: 12px;
    }
}


/* newsブロック */
.top-news {
    background: linear-gradient(to bottom, transparent, #726565);
    padding-block: 300px 70px;
    margin-top: -200px;
    position: relative;
}
.top-news .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: space-between;
    align-items: start;
    column-gap: 20px;
    color: #fff;
}
.top-news h2 {
    font-size: 30px;
    border-bottom: 1px solid #fff;
    width: fit-content;
}
.top-news .news__list {
    display: grid;
    row-gap: 24px;
}
.news__list a {
    display: flex;
    align-items: center;
    column-gap: 30px;
}
.top-news .news__date {
    font-size: 12px;
    flex-shrink: 0;
    width: 75px;
}
.top-news .news__cat-outer {
    font-size: 10px;
    width: 100px;
    flex-shrink: 0;
}
.top-news .news__cat {
    padding: 2px 7px;
    border-radius: 10px;
    background: #B6A9A8;
    width: fit-content;
}
.top-news .news__title {
    font-size: 14px;
}
.news__more {
    align-self: end;
    display: flex;
    align-items: center;
    column-gap: 17px;
    margin-left: auto;
}
.news__more::after {
    content: "";
    width: 12px;
    height: 12px;
    background: url(./img/arrow-white.svg) no-repeat center/contain;
    transition: 0.3s;
}
.news__more:hover::after {
    animation: 0.5s arrow;
    transform: translateX(5px);
}
@media screen and (max-width: 768px) {
    .top-news {
        padding-block: 160px 20px
    }
    .top-news .container {
        grid-template-columns: 1fr;
    }
    .news__list a {
        flex-wrap: wrap;
    }
    .top-news .news__list {
        row-gap: 16px;
    }
    .top-news .news__title {
        margin-top: 5px;
        width: 100%;
    }
    .top-news .news__list {
        padding-block: 30px 16px;
    }
    .news__more {
        justify-content: flex-end;
    }
}

/* Conceptブロック */
.top-concept {
    text-align: center;
    padding-block: 100px;
    position: relative;
    background: rgb(243 238 234 / 80%);
}
.top-concept::before {
    content: "";
    position: absolute;
    top: 0;
    left: 70px;
    width: 22%;
    height: 420px;
    background: url(./img/concept-bg-left.svg) no-repeat top/contain;
}
.top-concept::after {
    content: "";
    position: absolute;
    top: 0;
    right: 70px;
    width: 23%;
    height: 420px;
    background: url(./img/concept-bg-right.svg) no-repeat top/contain;
}
.top-concept .container {
    position: relative;
}
.concept__lead {
    font-size: 24px;
    padding-bottom: 50px;
}
.concept__text {
    font-size: 15px;
    padding-bottom: clamp(100px, 23vw,230px);
}
.concept-loop {
    width: calc(100vw  - var(--scrollbar));
    margin-left: calc(50% - 50vw);
    font-size: 78px;
    color: rgb(182 169 168 / 40%);
    display: flex;
    align-items: center;
    column-gap: 20px;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: clamp(50px, 13vw,130px);
    letter-spacing: 0.05em;
}
.concept-loop > div {
display: flex;
align-items: center;
column-gap: 20px;
animation: loop-slide 50s infinite linear 1s both;
}
@keyframes loop-slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.concept-img1, .concept-img3 {
    border-radius: 8px;
}
.concept-img1, .concept-img2, .concept-img3 {
    position: absolute;
}
.concept-img1 {
    bottom: -20px;
    left: 14%;
    width: clamp(148px, 25vw, 257px);
    transition-delay: .4s;
}
.concept-img2 {
    left: 0;
    right: 0;
    margin-inline: auto;
    bottom: 65px;
    width: clamp(195px, 31vw, 310px);
}
.concept-img3 {
    right: 15%;
    bottom: 150px;
    width: clamp(130px, 24vw, 240px);
    transition-delay: 1s;
}

.top-concept .link {
    margin-left: auto;
    margin-right: 15%;
}
@media screen and (max-width: 768px) {
    .top-concept {
        padding-block: 72px;
    }
    .concept__lead {
        font-size: 20px;
    }
    .top-concept::before {
        content: "";
        position: absolute;
        top: 0;
        left: 15px;
        width: 68px;
        height: 198px;
        background-image: url(./img/concept-bg-left-sp.svg);
    }
    .top-concept::after {
        content: "";
        position: absolute;
        top: 0;
        right: 15px;
        width: 66px;
        height: 210px;
        background-image: url(./img/concept-bg-right-sp.svg);
    }
    .concept__text {
        text-align: left;
        padding-bottom: 200px;
    }
    .concept-loop {
        padding-bottom: 140px;
        font-size: 40px;
    }
    .concept-img1 {
        left: 0;
        bottom: 70px;
    }
    .concept-img2 {
        bottom: 130px;
    }
    .concept-img3 {
        right: 0;
        bottom: 220px;
    }
    .top-concept .link {
        margin-right: 15px;
    }
    .top-concept .link::after {
        width: 50px;
        height: 50px;
    }
    .top-concept .link::before {
        width: 13px;
        height: 13px;
        right: 18px;
    }
}




/* Linkブロック */
.top-link {
    padding-block: 100px;
    background: #726565;
    color: #fff;
}
.top-link .container {
    display: grid;
    grid-template-columns: 40% 60%;
    column-gap: 10px;
}
.link__text {
    font-size: 15px;   
}
.link__items {
    display: grid;
}
.link__items li a {
    border-bottom: 1px solid #FFFFFF;
    padding: 30px 0 30px 10px;
    display: block;
}
.link__items li:first-of-type a {
    border-top: 1px solid #FFFFFF;
}
.link__items a:hover .link::after {
    background: rgb(255 255 255 / 30%);
}
.link__items a:hover .link::before {
    animation: 0.5s arrow;
}
.link__items h2 {
    font-size: 36px;
    padding-bottom: 10px;
}
.link__items .link__text {
    font-size: 15px;
}
.top-link .link {
    margin-left: auto;
}

@media screen and (max-width: 768px) {
    .top-link {
        padding-block: 72px;
    }
    .top-link .container {
        grid-template-columns: 1fr;
    }
    .link__text {
        padding-bottom: 60px;
    }
    .link__items li a {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: space-between;
        padding: 44px 0;
    }
    .link__items h2 {
        font-size: 24px;
        align-self: end;
    }
    .link__items .link__text {
        font-size: 13px;
        grid-row: 2;
    }
    .link__items .link {
        font-size: 14px;
        grid-row: 1 / 3;
    }

}


/* Serviceブロック */
.top-service {
    padding-block: 100px;
    background: url(./img/service-bg.jpg) no-repeat center/cover;
}
.service__lead {
    font-size: 24px;
    padding-bottom: 100px;
    text-align: center;
}
.service__items li {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: column;
    padding-bottom: 100px;
}
.service__items li:last-of-type {
    padding-bottom: 0;
}
.service__detail {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    row-gap: 36px;
    padding-left: 50px;
    padding-right: max(calc(50vw - 500px), 15px);
}
.service__items li:nth-of-type(2n+1) .img-shadow {
    border-radius: 0 25vw 20px 0;
}
.service__items h3 {
    font-size: 24px;
    align-self: end;
}
.service__text {
    font-size: 15px;
}
.service__items .link {
    align-self: start;
}

.service__items li:nth-of-type(2n) .service__detail {
    padding-right: 50px;
    padding-left: max(calc(50vw - 500px), 15px);
}
.service__items li:nth-of-type(2n) .img-animation {
    border-radius: 25vw 0 0 20px;
    grid-column: 2;
}
@media screen and (max-width: 768px) {
    .top-service {
        padding-block: 72px;
    }
    .service__lead {
        font-size: 20px;
    }
    .service__items li {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        padding-bottom: 64px;
    }
    .service__items li:nth-of-type(2n+1) .img-animation {
        border-radius: 0 160px 10px 0;
        width: calc(100% - 15px);
    }
    .service__items li:nth-of-type(2n) .img-animation {
        border-radius: 160px 0 0 10px;
        grid-column: 1;
        width: calc(100% - 15px);
        margin-left: auto;
    }
    .service__items h3 {
        font-size: 20px;
    }
    .service__detail, .service__items li:nth-of-type(2n) .service__detail {
        padding-inline: 30px
    }
    .service__items .link {
        margin-left: auto;
    }
}



/* Worksブロック */
.top-works {
    background: #B6A9A8;
    padding-block: 100px;
    color: #fff;
}
.top-works .container {
    margin-right: 0;
    margin-left: max(calc(50vw - 500px), 0px);
    max-width: none;
}
.top-works h2 {
    margin-left: 0 !important;
}
.top-works h2.heading .ff-en {
    border-bottom: 1px solid #fff;
}
.works-swiper {
    position: relative;
    padding-top: 80px;
    padding-bottom: 40px;
    overflow: hidden;
}
.works__list li {
    position: relative;
}
.works__img {
    border-radius: 8px;
    aspect-ratio: 16 / 9;
}
.works__cat {
    font-size: 11px;
    background: #B6A9A8;
    padding: 5px 10px;
    line-height: 1;
    border-radius: 10px;
    position: absolute;
    top: 7px;
    right: 7px;
}
.works__title {
    padding-top: 16px;
    font-size: 18px;
}
.top-works .link {
    margin-left: auto;
    margin-right: max(calc(50vw - 500px), 0px);
}
.swiper__arrow {
    position: absolute;
    top: 0;
    right: max(calc(50vw - 500px), 15px);
    display: flex;
    column-gap: 16px;
    justify-content: flex-end;
}
.swiper__arrow :is(.swiper-button-next, .swiper-button-prev) {
    position: relative;
    margin-top: 0;
    right: auto;
    left: auto;
    transition: 0.3s;
}
.swiper__arrow .swiper-button-next {
    width: 86px;
    height: 42px;
    border-radius: 21px;
    border: 1px solid #fff;
    justify-content: flex-end;
    padding-right: 16px;
}
.swiper__arrow .swiper-button-next::after {
    content: "";
    background: url(./img/arrow-white.svg) no-repeat center/contain;
    width: 10px;
    height: 10px;
}
.swiper__arrow .swiper-button-prev:hover, .swiper__arrow .swiper-button-next:hover {
    background: rgb(255 255 255 / 30%);
}
.swiper__arrow .swiper-button-prev {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    border: 1px solid #fff;
}
.swiper__arrow .swiper-button-prev::after {
    content: "";
    background: url(./img/arrow-white.svg) no-repeat center/contain;
    transform: rotate(180deg);
    width: 10px;
    height: 10px;
}

@media screen and (max-width: 768px) {
    .top-works {
        padding-block: 72px;
    }
    .top-works h2 {
        margin-left: auto !important;
    }
    .works-swiper {
        width: calc(100vw - var(--scrollbar));
        margin-left: -15px;
        padding-bottom: 20px;
    }

}

/* Voice&about usブロック */
.voice-spacer {
    position: relative;
    height: 300px;
    margin-bottom: -50px !important;
    z-index: 0;
}
.spacer__inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0);
}
.spacer__bg{
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw - var(--scrollbar));
    height: 100vh;
    background: url(./img/works-bottom.jpg) no-repeat 100%/cover;
    z-index: -1;
}
.top-voiceabout {
    border-radius: 50px 50px 0 0;
    padding-block: 100px;
    background: url(./img/voice-bg.png) #EBE3DE no-repeat center/cover;
}
.top-voice ul {
    display: grid;
    row-gap: 85px;
}
.voice__list a {
    display: grid;
    grid-template-columns: 40% auto;
    column-gap: 50px;
    grid-template-rows: 1fr auto 1fr;
    row-gap: 24px;
}
.voice__img {
    grid-row: 1 / 4;
    border-radius: 10px;
    aspect-ratio: 4 / 3;
}
.voice__name {
    color: #84605D;
    align-self: end;
}
.voice__title {
    font-size: 18px;
}
.voice__more {
    font-size: 16px;
    position: relative;
    width: fit-content;
    align-self: start;

}
.voice__more::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #444;
    position: absolute;
    left: 0;
    bottom: 0;
}
.top-voice a:hover .voice__more::after {
    animation: voice-bar 0.5s;
}
@keyframes voice-bar {
    0% {
        width: 0;
    }
}
.top-voice .link {
    margin-left: auto;
}

.top-about {
    padding: 150px 15px 0;
}
.about__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10%;
}
.about__list li {
    position: relative;
}
.about__list li > a:first-of-type {
    display: block;
}
.about__list .about__en {
    position: absolute;
    top: min(11vw, 110px);
    right: -0.4em;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: clamp(59px,7.5vw,75px)   ;
    color: rgb(255 255 255 / 60%);
    line-height: 1;
}
.about__detail {
    border-left: 1px solid #707070;
    margin-left: 30px;
    padding: 25px 0 0 17px;
}
.about__detail h3 {
    font-size: 24px;
    padding-bottom: 30px;
}
.about__company {
    margin-top: 130px !important;
}
.top-about .link {
    margin-left: auto;
    margin-top: 30px;
}


@media screen and (max-width: 768px) {
    .voice-spacer {
        height: 200px;
    }
    .top-voiceabout {
        border-radius: 20px 20px 0 0;
        padding-block: 72px;
    }
    .voice__list a {
        grid-template-columns: 1fr;
    }
    .voice__title {
        font-size: 16px;
    }
    .top-voice ul {
        padding-bottom: 40px;
    }
    .top-voice .link__outer {
        border-top: 1px solid #C1C1C1;
        border-bottom: 1px solid #C1C1C1;
    }
    .top-voice .link {
        margin-right: auto;
        padding-block: 20px;
    }
    .top-about {
        padding-top: 72px;
    }
    .about__list {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }
    .about__list .about__en {
        font-size: 60px;
        top: 28vw;
    }
    .about__detail {
        border:none;
        margin-left: 0;
        padding: 20px 0;
    }
    .about__detail h3 {
        font-size: 20px;
    }
    .about__company {
        margin-top: 0 !important;
    }
    .top-about .link {
        margin-left: auto;
        padding-block: 20px;
    }
}



/* Blogブロック */
.top-blog {
    padding-block: 100px;
    background: #B6A9A8;
    color: #fff;
}
.top-blog h2.heading .ff-en {
    border-color: #fff;
}
.blog__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    padding-bottom: 70px;
}
.blog__list li {
    position: relative;
}
.blog__img {
    border-radius: 8px;
    aspect-ratio: 16 / 9;
}
.blog__cat {
    font-size: 11px;
    background: #B6A9A8;
    padding: 5px 10px;
    line-height: 1;
    border-radius: 10px;
    position: absolute;
    top: 7px;
    right: 7px;
}
.blog__title {
    padding-top: 16px;
    font-size: 18px;
}
.top-blog .link {
    margin-inline: auto;
}
.blog-swiper {
    position: relative;
    padding-top: 80px;
    padding-bottom: 40px;
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    .top-blog {
        padding-block: 72px;
    }
    .top-blog .link {
        margin-right: 0;
    }
    .blog__list {
        column-gap: 0;
        padding-bottom: 0;
    }
    .blog-swiper {
        width: calc(100vw - var(--scrollbar));
        margin-left: -15px;
        padding-bottom: 20px;
    }
}



/* SNSブロック */
.top-sns {
    padding-block: 100px;
    background: #F5F1F0;
}
.sns__follow {
    font-size: 28px;
    color: #84605D;
    display: flex;
    column-gap: 36px;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
}
.sns__follow::before, .sns__follow::after {
    content: "";
    position: static !important;
    height: 1px;
    background: #896967;
    flex-grow: 1;
}
.sns__insta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 140px;
    row-gap: 40px;
    padding: 0 50px 60px;
    border-bottom: 1px solid #896967;
}
.sns__insta h3 {
    padding-bottom: 15px;
}
.sns__insta a {
    display: flex;
    align-items: center;
    column-gap: 14px;
}
.sns__insta a::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(./img/insta-icon-brown.svg) no-repeat center/contain;
}
.sns__hanahome img {
    width: 132px;
    height: 30px;
    object-fit: contain;
}
.sns__sumaimu img {
    width: 122px;
}
.sns__cafe {
    font-size: 22px;
    text-align: center;
    margin-top: 70px !important;
    padding-bottom: 50px;
}
.cafe__link {
    display: grid;
    grid-template-columns: 62% 38%;
}
.cafe__detail {
    background: #fff;
    display: grid;
    place-items: center;
    position: relative;
}
.cafe__detail::before {
    content: "";
    width: 50px;
    height: 50px;
    background: #896967;
    clip-path: polygon(100% 0 , 100% 100%, 0 100%);
    position: absolute;
    bottom: 0;
    right: 0;
}
.cafe__detail::after {
    content: "";
    width: 12px;
    height: 12px;
    background: url(./img/arrow-white.svg) no-repeat center/contain;
    position: absolute;
    bottom: 9px;
    right: 8px;
}
.cafe__link:hover {
    transform: translateY(3px);
    box-shadow: none;
}
.cafe__link:hover .cafe__detail::after {
    animation: 0.7s arrow;
}
.cafe__detail img {
    width: 160px;
    align-self: end;
}
.cafe__detail p {
    margin-top: 14px;
    font-size: 14px;
    align-self: start;
}
@media screen and (max-width: 768px) {
    .top-sns {
        padding-block: 72px;
    }
    .sns__follow {
        font-size: 20px;
    }
    .sns__insta {
        grid-template-columns: 1fr;
        padding-inline: 15px !important;
    }
    .sns__cafe {
        font-size: 20px;
        margin-top: 36px !important;
        padding-bottom: 24px;
    }
    .cafe__link {
        grid-template-columns: 58% 42%;
    }
    .cafe__detail img {
        width: 61%;
        margin-inline: auto;
    }
    .cafe__detail p {
        font-size: 10px;
    }
    .cafe__detail::before {
        width: 30px;
        height: 30px;
    }
    .cafe__detail::after {
        width: 8px;
        height: 8px;
        bottom: 5px;
        right: 5px;
    }

}

/* マップ */
.google-map {
    height: 400px;
}
.google-map iframe {
    width: 100%;
    height: 400px;
}
.google-map img {
    width: 50px;
    object-fit: contain;
}