/*
Theme Name: Marble Arch Cafe
Theme URI: https://marblearchcafe.co.jp/
Author: Aya Kudo
Description: Marble Arch Cafe オリジナルテーマ
Version: 1.0
*/

@charset "utf-8";
.cafe,
.product,
.rentalspace {
  opacity: 1;
  transition: opacity 0.5s;
}

.thesire {
  opacity: 0;
  transition: opacity 0.5s;
}

/* .thesire__box がついたら切り替え */
body.thesire__box .thesire {
  opacity: 1;
}

body.thesire__box .cafe,
body.thesire__box .product,
body.thesire__box .rentalspace {
  opacity: 0;
}

/* ================================
fv
================================ */
.article__fv {
    position: relative;
}

.article__fv::before {
    content: "";
    background-image: url(../images/fv_flower01.png);
    position: absolute;
    top: 0;
    left: -20px;
    width: 93px;
    height: 73.21px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.article__fv::after {
    content: "";
    background-image: url(../images/fv_flower04.png);
    position: absolute;
    bottom: 57px;
    right: -35px;
    width: 110px;
    height: 86.52px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
}

.article__video--sp-wrapper {
  position: relative;
  width: 100%;
  height: auto;
}

.article__video--sp-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 66px;
  background: linear-gradient(180deg, rgba(255, 253, 253, 0) 0%, rgba(255, 253, 253, 0.7) 42.31%, #FFFDFD 82.21%);
  pointer-events: none;
}

.article__video--sp {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: auto;
    margin-top: 5px;
}

.article__video--pc {
    display: none;
}

.fv__flower {
    width: 120px;
    z-index: 2;
}

.scrollarrow {
    display: none;
}

.article__content {
    margin: 25px 8% 5px;
    z-index: 0;
    margin-top: 8px;
}

.article__title {
    font-size: 2.7rem;
    font-weight: 700;
    margin: 0 5%;
}

.article__text {
    margin: 16px 5%;
    font-size: 1.6rem;
    font-weight: 400;
    position: relative;
}

.article__text p:last-of-type {
    margin-top: 6px;
}

.br__pc {
    display: none;
}

.btn_arrow {
    max-width: 65px; 
    margin: 52px 0 0 auto; 
    display: block;
}

.btn_arrow--sp,
.btn_arrow--gold { 
    max-width: 65px; 
    margin: 52px 0 0 auto; 
    display: block; 
}

.btn_arrow--gold {
    position: relative;
    z-index: 10; 
}

.btn_arrow--pc {
    display: none;
}

.article__title span {
    display: block;
}

/* fv pc（768px以下） */
@media screen and (max-width:768px) {
    .article__text::after {
        content: "";
        position: absolute;
        border-radius: 336px;
        background: radial-gradient(50% 50% at 50% 50%, rgba(247, 213, 209, 0.80) 11.54%, rgba(247, 213, 209, 0.30) 62.02%, rgba(247, 213, 209, 0.06) 98%);
        background-repeat: no-repeat;
        top: -95%;
        left: -84%;
        width: 336px;
        height: 305px;
        z-index: -1;
    }
}

/* fv pc（769px以上） */
@media screen and (min-width:769px) {
    .article {
        position: relative;
        margin: 5px 5% 0;
    }

    .article__text::before {
        content: "";
        position: absolute;
        width: 87px;
        height: 68.49px;
        bottom: -46%;
        left: -12%;
        z-index: 10;
        background-image: url(../images/fv_flower03.png);
        background-size: contain; /* 縦横比を維持して収める */
        background-repeat: no-repeat;
    }

    .article__fv::after {
        content: "";
        background-image: url(../images/fv_flower02.png);
        position: absolute;
        bottom: -38px;
        right: -33px;
        width: 122px;
        height: 96.05px;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 3;
    }   

    .article__video--sp {
        display: none;
    }

    .article__video--pc {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 100px 100px 5px 5px;
    }

    .article__fv {
        position: relative;
        margin: 0 auto;
        max-width: 927.38px;
    }

    .fv__flower--largeflower {
        display: none;
    }

    .scrollarrow {
        display: block;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: #fff;
    }

    .scrollarrow::after {
        content: "";
        background-image: url(../images/downarrow_wh.svg);
        width: 21px;
        height: 11px;
        display: inline-block;
        animation: updown 1.3s ease-in-out infinite;
    }
      
    @keyframes updown {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
    }

    .article__text::after {
        content: "";
        position: absolute;
        border-radius: 336px;
        background: radial-gradient(50% 50% at 50% 50%, #FFF1F0 35.58%, rgba(255, 241, 240, 0.45) 69.71%, rgba(255, 241, 240, 0.00) 100%);
        background-repeat: no-repeat;
        top: -18%;
        left: 20%;
        width: 216px;
        height: 194px;
        z-index: -1;
    }

    .article__text {
        margin: 175px 0 154px;
        position: relative;
    }

    .btn_arrow {
        width: 52px;
        height: 52px;
        display: block;
        margin: 32px 0 0 auto;
    }

    .btn_arrow--sp {
        display: none;
    }

    .btn_arrow--pc {
        width: 52px;
        height: 52px;
        display: block;
        margin: 32px 0 0 auto;
    }

    .btn_arrow--gold {
        width: 52px;
        height: 52px;
        display: block;
        margin: 32px auto 0;
    }

    .article__title--01 {
        display: block;
        content: "";
        z-index: 5;
        text-align: center;
        color: #413F3C;
        background-color: #fff;
        border-radius: 0 3px 3px 0;
        padding: 10px 16px;
        margin-bottom: 10px;
    }

    .article__title {
        font-size: 3.4rem;
        font-weight: 700;
        position: absolute;
        left: -1px;
        bottom: 120px;
        margin: 0;
    }

    .article__title--02 {
        display: block;
        content: "";
        z-index: 5;
        text-align: center;
        color: #413F3C;
        background-color: #fff;
        border-radius: 0 3px 3px 0;
        padding: 10px 15px 10px 13px;
        position: absolute;
    }

    .article__text {
        margin-top: 175px;
        font-size: 1.7rem;
        text-align: center;
        position: relative;
        width: 450px;
        margin: 171px auto;
    }

    .br__pc {
        display: block;
    }

    .scrollarrow img {
        display: inline-block;
        animation: updown 1.5s ease-in-out infinite;
      }
      
      @keyframes updown {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-5px);
        }
      }
}

/* fv pc（1441px以上） */
@media screen and (min-width:1441px) {
    .article__fv {
        margin: 0 auto;
    }
}

/* ================================
cafe
================================ */
.cafe {
    background-color: #FFF1F0;
    padding: 77.36px 0 150px;
    border-radius: 0 0 0 60px;
    margin-top: 62px;
}

.cafe__item--sp {
    margin: 33px 0 0 5%;
    display: flex;
    gap: 3%;
    justify-content: flex-end;
}

.cafe__item--sp img {
    width: 47%;
}

.cafe__drink {
    margin-right: 8%;
}

.cafe__drink--small {
    border-radius: 0 4px 4px 0;
}

.cafe__drink--large {
    display: none;
}

.cafe__item--cake {
    border-radius: 4px;
}

.text {
    margin-top: 23.5px;
}

.cafe__item--pc {
    display: none;
}

.cafe__text {
    margin-top: 36px;
}

.cafe__item--acai {
    border-radius: 4px 0 0 4px;
}

/* cafe pc（769px以上） */
@media screen and (min-width:769px) {
    .cafe {
        border-radius: 0 334px 0 0;
        padding: 169px 0 550px;
    }

    .cafe__inner {
        margin: 0 auto;
        max-width: 927.38px;
    }
    
    .cafe__content {
        display: flex;
        gap: 15%;
    }

    .cafe__text {
        width: 70.3%;
        margin-top: 44px;
    }

    .cafe__drink--small {
        border-radius: 9px;
        width: 63%;
        height: auto;
        padding-right: 0;
    }

    .cafe__item--sp {
        margin: 33px 0 0 12%;
    }

    .cafe__item--cake {
        border-radius: 9px;
    }
}

/* cafe pc（927.38px以上） */
@media screen and (min-width:927.38px) {
     .cafe__item--acai {
        border-radius: 9px;
    }
}

/* cafe pc（1440px以上） */
@media screen and (min-width:1440px) {
    .cafe__text {
        width: 45.3%;
    }

    .cafe__content {
        gap: 56px;
        max-width: 927.38px;
        margin: 0 auto;
    }

    .cafe__item--pc {
        max-width: 927.38px;
        margin: 0 auto;
    }

    .cafe__item--sp {
        display: none;
    }

    .cafe__item--pc {
        display: flex;
        justify-content: flex-end;
        position: relative;
        gap: 22px;
    }

    .cafe__item--pc img {
        border-radius: 9px;
    }

    .cafe__drink--small {
        display: none;
    }

    .cafe__drink img {
        border-radius: 0 4px 4px 0;
    }

    .cafe__drink--large {
        display: block;
        width: 417px;
        height: 434px;
        border-radius: 9px;
    }

    .cafe__item--cake {
        width: 198px;
        height: 167px;
        position: absolute;
        top: -42px;
        left: 443px;
    }

    .cafe__item--acai {
        width: 259px;
        height: 240px;
    }
}

/* ================================
thesire
================================ */
.thesire {
    text-align: center;
    padding: 50px 0 150px;
}

.heading__text--thesire {
    color: #020202;
    font-size: 1.9rem;
    font-weight: 700;
}

.heading__text--thesire span {
    background-color: #FFEFD7;
    padding: 4px 10px 3px;
    border-radius: 2px;
}

.topic__thesire {
    font-size: 2.7rem;
    font-weight: 700;
    margin-top: 8.8px;
    color: #fff;
}

.text__thesire {
    font-size: 1.6rem;
    font-weight: 400;
    color: #fff;
}

.thesire__box {
    position: relative;
    background-image: url(../images/sp_top_thesire.jpg);
    background-size: contain;
    overflow: hidden;
    z-index: 0;
}

/* thesire pc（769px以上） */
@media screen and (min-width:769px) {
    .topic__thesire {
        margin-top: 17px;
    }

    .text__thesire {
        margin-top: 20px;
    }

    .thesire__box {
        position: relative;
        background: linear-gradient(180deg, #00060C 0%, #01182D 100%);
        overflow: hidden;
        z-index: 0;
    }
    
    /* 回転する星画像 */
    .thesire__box::before {
        content: "";
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%; 
        height: 100%;
        background: url("../images/star01.png") center/cover no-repeat;
        transform: translate(-50%, -50%);
        animation: spin 60s linear infinite;
        z-index: 1;
    }
    
    .thesire__box::after {
        content: "";
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: url("../images/star02.png") center/cover no-repeat;
        transform: translate(-50%, -50%);
        animation: spin 30s linear infinite;
        z-index: 2;
    }
    
    /* 子要素の文字などを上に出す */
    .thesire__box > * {
        z-index: 3;
    }
    
    /* 回転アニメーション */
    @keyframes spin {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
}

/* ================================
product
================================ */
.product {
    margin-bottom: 50px;
}

.product__item--sp {
    margin-top: 31px;
    border-radius: 4px;
}

.product__item--pc {
    display: none;
}

/* product pc（769px以上） */
@media screen and (min-width:769px) {
    .product {
        margin: 0 0 80px;
    }

    .product__content {
        display: flex;
        gap: 56px;
        max-width: 927.38px;
        margin: 0 auto;
    }

    .product__item--sp {
        display: none;
    }

    .product__item--pc {
        display: block;
        border-radius: 9px;
    }

    .product__wrapper {
        margin: 78px 0 15px;
    }

    .product__inner {
        margin: 0 8%;
    }
}

/* product pc（1440px以上） */
@media screen and (min-width:1440px) {
    .product__content {
        max-width: 927.38px;
        margin: 0 auto;
    }
}

/* ================================
rentalspace
================================ */
.rentalspace {
    background-image: url(../images/event_background-sp.png);
    background-size: cover;      
    background-position: top center; 
    background-repeat: no-repeat;
    width: 100%;
    padding: 75px 0 118px;
}

.rentalspace__items {
    width: 92%;
    border-radius: 0 4px 4px 0;
    margin: 21px 8% 0 0;
}

.rentalspace__event {
    width: 92%;
    border-radius: 4px 0 0 4px;
    margin: 34px 0 0 8%;
}

.rentalspace__items--pc {
    display: none;
}

.rentalspace__event--pc {
    display: none;
}

/* rentalspace pc（769px以上） */
@media screen and (min-width:769px) {
    .rentalspace {
        background-image: url(../images/event_background-pc.png);
        background-size: cover;      
        background-position: top center; 
        background-repeat: no-repeat;
        width: 100%;
        padding: 241px 8% 118px;
    } 

    .rentalspace__content {
        display: flex;
        max-width: 927.38px;
        margin: 0 auto;
    }

    .rentalspace__wrapper {
        width: 67%;
        margin: auto 0;
    }

    .rentalspace__items--pc,
    .rentalspace__event--pc {
        border-radius: 9px;
    }

    .rentalspace__items {
        display: none;
    }

    .rentalspace__item {
        margin-left: 7%;
    }

    .rentalspace__items--pc {
        display: block;
        max-width: 249px;
        width: 249px;
        height: 185px;
        margin: 0;
    }

    .rentalspace__event {
        display: none;
    }

    .rentalspace__event--pc {
        display: block;
        width: 89%;
        margin: 34px 0 0 8%;    
    }
}

/* rentalspace pc（1440px以上） */
@media screen and (min-width:1440px) {
    .rentalspace__content {
        max-width: 927.38px;
        margin: 0 auto;
    }
}

/* ================================
map
================================ */
.marquee {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.8rem;
    background-color: rgba(91, 61, 27, 0.69);
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    padding: 5px 0;
}
  
.marquee-text {
    flex-shrink: 0;
    padding-right: 2rem;
}

.map__sp iframe {
    width: 100%;
    height: 640px;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.map__pc {
    display: none;
}

/* map pc（769px以上） */
@media screen and (min-width:769px) {
    .map__pc {
        display: block;
    }
    
    .map__pc iframe {
        width: 100%;
        height: 717px;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
    }

    .map__sp {
        display: none;
    }

    .marquee {
        font-size: 2.5rem;
    }
}