@charset "utf-8";

body {
    background-color: #FFF9E8;
    font-family: "Kiwi Maru",sans-serif;
    color: #333333;
}

html {
    font-size: 18px;
    scroll-behavior: smooth;
      
}

.container {
    max-width: 1240px;
    margin: 0 auto;
}

section {
    padding: 72px 0;
}

img {
    object-fit: cover;
}


/* ヘッダーとフッター */

.global-header {
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 30px;
    z-index: 2;
}

.global-header__site-logo {
    margin: 0 0 0 30px;
    filter: drop-shadow(4px 4px 3px rgb(0,0,0,0.5));
    transition: 0.5s;
}

.global-header__site-logo:hover {
    transform: scale(0.95);
    transition: all 0.3s;
}

.gnav {
width: 360px;
}

.gnav__menu {
    display: flex;
    justify-content: space-between;
}

.gnav__linktext {
    font-family: "Zen Antique",serif;
    text-decoration: none;
    color: #fdfdfd;
}



.gnav__linktext {
    text-shadow:5px 5px 8px rgb(0,0,0,0.5);
    padding-bottom: 5px;
    position: relative;
  }
.gnav__linktext::before {
    background: #fefefe;
    content: '';
    width: 100%;
    height: 1.5px;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: auto;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
  }
.gnav__linktext:hover::before {
    transform-origin: center top;
    transform: scale(1, 1);
  }


.gnav__icon-menu {
    width: 450px;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
    margin: 0 30px 0 0;

}
.gnav__icon-img {
    width: 35px;
    filter: drop-shadow(4px 4px 3px rgb(0,0,0,0.5));
}
.gnav__icon-img:hover {
    transform: scale(0.9);
    transition: all 0.3s;
}
.menu-btn {
    display: none;
}

.sp-nav {
    display: none;
    /* transition: 0.5s; */
}

.sp-nav__icon-img {
    filter: drop-shadow(4px 4px 3px rgb(0,0,0,0.5));
}
.sp-nav__icon-img:hover {
    transform: scale(0.9);
    transition: all 0.3s;
}

.global-footer {
    height: 300px;
    background-color: #6E4926;
}


.global-footer-box {
    width: 100%;
    height: 73px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 29px 0 120px 0;
}

.global-footer__site-logo {
    margin: 0 0 0 30px;
    filter: drop-shadow(4px 4px 3px rgb(0,0,0,0.5));
}
.global-footer__site-logo:hover {
    transform: scale(0.95);
    transition: all 0.3s;
}

.gnav-footer {
    width: 360px;
}
    
.gnav__menu-footer {
    display: flex;
    justify-content: space-between;
}
.gnav__icon-menu-footer {
    width: 450px;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
    margin: 0 30px 0 0;
}

.copyright {
    color: #fdfdfd;
    text-align: center;
    /* font-family: "Sawarabi Mincho", serif; */
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

/* メインビジュアル */

.mainvisual {
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    padding: unset;
    position: relative;
}

.slide{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1.5s ease-in-out;
  }
  
.slide.first {
    background: url(../img/main1.jpg) no-repeat center / cover;
  }
  
.slide.second {
    background: url(../img/main2.jpg) no-repeat center / cover;
    opacity: 0;
  }
  
.slide.third {
    background: url(../img/main3.jpg) no-repeat center / cover;
    opacity: 0;
  }
  
  @keyframes slide {
    0% { opacity: 0; }
    10% { opacity: 1; }
    33.33% { opacity: 1; }
    43.33% { opacity: 0; }
    100% { opacity: 0; }
}




.slide:nth-child(1) {
    animation: slide 18s infinite;
}

.slide:nth-child(2) {
    animation: slide 18s 6s infinite; /* 18s ÷ 3 = 6s 遅延 */
}

.slide:nth-child(3) {
    animation: slide 18s 12s infinite; /* 18s ÷ 3 × 2 = 12s 遅延 */
}



.mainvisual__background-shadow {
    height: 100vh;
    width: 100%;
background: linear-gradient(0deg, rgba(253,253,253,0.01) 1%, rgba(153,153,153,0.3) 40%, rgba(51,51,51,0.4) 100%);
position: absolute;
top: 0;
right: 0;
left: 0;
}

.mainvisual__text {
    color: #fdfdfd;
    margin: auto 65px auto 0;
    z-index: 1;
    text-shadow: 5px 5px 8px rgb(0,0,0,0.5);
}
.mainvisual__title {
    font-size: 90px;
    font-family: "Lora",serif;
}

.mainvisual__subtitle {
    font-size: 26px;
    font-family: "Zen Antique",serif;
    margin: 20px 0 0 0;
    text-align: right;
}


/* イベント */
.events {
background:  url(../img/brown_circle.svg) no-repeat center / cover;
position: relative;
height: 800px;
}

.events__titlebox {
    position: relative;
    padding: 80px 0;
}

.events__title {
    font-size: 128px;
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 700;
    color: #FFE8D2;
    opacity: 0.1;
    text-align: center;
}

.events__subtitle{
    font-size: 30px;
    font-family:"Zen Antique",serif;
    color: #FFF3DA;
    text-align: center;
    position: absolute;
    top: 170px;
    bottom: 0;
    right: 0;
    left: 0;
}

.banner-area {
    overflow: hidden; /* はみ出した要素を非表示 */
    width: 100%;
}

.banner-menu {
    display: flex;

}
.banner-item {
    width: 30%;  
}

.banner-img {
    width: 100%;
    border-radius: 20px;
}

.banner-img:hover {
    transform: scale(0.95);
    transition: all 0.3s;
}

.slick-slide {
    padding: 0 10px;
}

.slick-slide.slick-cloned {
    padding: 0 10px;
}


.slick-slide.slick-active {
    padding: 0 10px;
}

.slick-slide.slick-current.slick-active {
    padding: 0 10px;
}


/* ラインナップ */
.lineup__titlebox {
    position: relative;
    padding: 80px 0;
}

.lineup__title {
    font-size: 128px;
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 700;
    color: #6E4926;
    opacity: 0.07;
    text-align: center;
}
.lineup__title.second {
    font-size: 100px;
}
.lineup__subtitle{
    font-size: 30px;
    font-family:"Zen Antique",serif;
    color: #333333;
    text-align: center;
    position: absolute;
    top: 170px;
    bottom: 0;
    right: 0;
    left: 0;
}

.lineup__subtitle.second{
    top: 240px;
}

.lineup-area {
    position: relative;
    height: 800px;
}
    
.lineup-item1 {
    width: 230px;
    position: absolute;
}

.lineup-item2 {
    width: 230px;
    position: absolute;
    left: 500px; 
 }
 
 .lineup-item3 {
 width: 230px;
 position: absolute;
 top: 220px;
 left: 240px;
 
 }
 
 .lineup-item4 {
    width: 230px;
    position: absolute;
    top: 500px;
 
 }
 
 .lineup-item5 {
    width: 230px;
     position: absolute;
     top: 500px;
     left: 500px;
 }

.lineup-item1:hover,.lineup-item2:hover,.lineup-item3:hover,.lineup-item4:hover,.lineup-item5:hover,.lineup-item6:hover {
    background: url(../img/lineup-back.png) no-repeat 0% 0% / 100%;
    transform: scale(1.05);
    transition: 0.3s;
}


.lineup-item6 {
    width: 330px;
    position: absolute;
    top: 180px;
    left: 850px;
   
}

.lineup-img {
    width: 200px;
    height: 200px;
    display: flex;
    margin: 0 auto;
}

.lineup-img2 {
    width: 300px;
    height: 300px;
    display: flex;
    margin: 0 auto;
}


.lineup-decoration {
    font-family: "Rouge Script";
    font-size: 60px;
    color: #B9936C;
    opacity: 0.6;
    letter-spacing: 4px;
}


.btn {
   text-align: center;
   padding: 100px 0 75px 0;
}

.btn.right {
    text-align: right;
}
.btn.left {
    text-align: left;
}

.btnlink.back::before {
    content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          border-left: solid 1px #fff;
          border-top: solid 1px #fff;
          transform: rotate(-45deg);
          top: 22px;
          left: 23px;
    }

.btnlink.back::after {
border-right: unset;
border-bottom: unset;
}

.btnlink {
    background-color:#D9776F;
    color: #ffffff;
    padding: 18px 60px;
    border-radius: 20px;
    display: inline-block;
    text-decoration: unset;
    position: relative;
    font-size: 18px;
    border: unset;

 outline: 1px solid;
 outline-color: #D9776F;
 outline-offset: 0px;
 display: inline-block;
 transition: .3s;
 }

 
.btnlink:hover {
 animation: light .8s infinite;
}
@keyframes light {
 100% { 
   outline-color: transparent;
   outline-offset: 12px;
 }
}

.btnlink.red {
    background-color: #A03C35;
    outline: 1px solid;
    outline-color: #A03C35;
    outline-offset: 0px;
    display: inline-block;
    transition: .3s;
}
.btnlink.red.next {
    font-family: "Kiwi Maru";
    padding: 14px 90px;
}

.btnlink.red.purchase {
    font-family: "Kiwi Maru";
    padding: 14px 60px;
}

.btnlink.submit {
    font-family: "Kiwi Maru";
    padding: 14px 90px;
}

.btnlink.submit::after {
    content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          border-right: solid 1px #fff;
          border-bottom: solid 1px #fff;
          transform: rotate(-45deg);
          top: 22px;

    }

.btnlink.brown {
    background-color: #B9936C;
    font-family: "Kiwi Maru";
    padding: 14px 60px;

    outline-color: #B9936C;
    outline-offset: 0px;
    display: inline-block;
    transition: .3s;
}

.btnlink:hover {
      letter-spacing: 2px;
      transition: all .5s;
    }

.btnlink::after {
        content: '';
              position: absolute;
              width: 10px;
              height: 10px;
              border-right: solid 1px #fff;
              border-bottom: solid 1px #fff;
              transform: rotate(-45deg);
              top: 22px;
              right: 22px;
        }


.btnlink.brown::before {
            content: '';
                  position: absolute;
                  width: 10px;
                  height: 10px;
                  border-left: solid 1px #fff;
                  border-top: solid 1px #fff;
                  transform: rotate(-45deg);
                  top: 22px;
                  left: 23px;
            }

.btnlink.brown::after {
    border-right: unset;
    border-bottom: unset;
}

.btn-area {
    display: flex;
    justify-content: center;
    gap: 11%;
}

/* お知らせ */

.news {
    background:  url(../img/brownpiano.svg) no-repeat center / cover;
    height: 810px;
    
}

.news__titlebox {
    position: relative;
    padding: 80px 0;
}

.news__title {
    font-size: 128px;
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 700;
    color: #FFE8D2;
    opacity: 0.1;
    
}
.news__subtitle{
    font-size: 30px;
    font-family:"Zen Antique",serif;
    color: #FFF3DA;
    
    position: absolute;
    top: 170px;
    bottom: 0;
    right: 0;
    left: 0;
}

.info-list {
    width: 70%;
    margin: 10px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    line-height: 40px;
    row-gap: 10px;
}

.info-link{
    display: flex;
    text-decoration: unset;
    color: #EAE6E6;
   
    
}




.info-link:hover{
    text-decoration: underline;
    transition: all .3s;
}

.info-date {
    margin: 0 100px 0 0;
    position: relative;
}


.info-date.new::after {
    content: "New";
    font-family: "Noto Sans JP", sans-serif;
    display: inline-block; /* block だと要素が折り返される可能性がある */
    height: 25px;
    width: 60px;
    border-radius: 3px;
    background-color: #B9936C;
    color: #fdfdfd;
    text-align: center;
    line-height: 25px; /* height と同じ値を指定 */
    position: absolute;
    left: 120px;
    top: 8px;
}





/* お問い合わせ */

.contact {
    background:  url(../img/circle_back.png) no-repeat 106% / 50%;
    height: 950px;
}

.contact__titlebox {
    position: relative;
    padding: 80px 0;
}

.contact__title {
    font-size: 128px;
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 700;
    color: #6E4926;
    opacity: 0.07;
}

.contact__subtitle{
    font-size: 30px;
    font-family:"Zen Antique",serif;
    color: #333333;
    
    position: absolute;
    top: 170px;
    bottom: 0;
    right: 0;
    left: 0;
}

.contact__tbody {
    display: block;
}

.contact__area {
    margin: 0 auto;
    width: 65%;
    border-spacing: 0 40px; /* 行の間に空間を作る */
    border-collapse: separate;
}

.contact__area th {
    text-align: left;
    width: 20%;
    vertical-align: top;
}

.contact__area td {
   display: flex;
   justify-content: center;
}

.name_area {
    width: 60%;
    padding: 5px;
}

.mail_area {
    width: 60%;
    padding: 5px;
}

.text_area {
    width: 60%;
    height: 200px;
    padding: 5px; /* 内側の余白 */
    
}

.contact__submit {
    display: block;
}


.contact-message {
    display: none;  /*  最初は非表示 */
    color: #B85042;  
    font-size: 18px;
    text-align: center;
    animation: fadeOut 4s ease-in-out forwards;
    margin: -70px 0 0 0;
}




/* Eventsページ */
.events-top {
    background: url(../img/events_top.jpg) no-repeat center / cover;
    height: 530px;
    display: flex;
    align-items: center;
    padding: 0 0 0 15%;
}

.events-pagetitle {
    font-family: "Lora",serif;
    font-size: 60px;
    color: #6E4926;
    text-shadow: 5px 5px 8px rgb(255,255,255,0.5);
    z-index: 1;
}

.background-shadow {
    height: 530px;
    width: 100%;
background: linear-gradient(0deg, rgba(253,253,253,0.01) 1%, rgba(153,153,153,0.2) 47%, rgba(51,51,51,0.4) 100%);
position: absolute;
top: 0;
right: 0;
left: 0;
}

.breadcrumb-menu {
    display: flex;
    padding: 54px 0 0 107px;
    font-size: 14px;
    
    color: #8C8888;
}

.breadcrumb-item {
    font-family: "Lora",serif;
}

.breadcrumb-item:not(:last-child):after {
content: ">";
margin: 0 10px 0 10px;
}

.breadcrumb-linktext {
    font-family: "Lora",serif;
    color: #8C8888;
    text-decoration: unset;
}

.breadcrumb-linktext:hover {
    text-decoration: unserline;
}

.two-column-container {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    margin: 50px 0 100px 0;
}

.two-column-maincontents {
    width: 70%;
}
.two-column-sidebar {
    width: 30%;
}

.two-column-sidebar h3 {
    margin: 0 0 10px 0;
}

.btn-wrap {
    display: none;
}

.searchbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background: rgb(255,249,232,0.9);
    pointer-events: none;
    transition: all 0.3s;
}

.searchbox h3 {
    margin: 0 0 10px 0;
}

.searchbox.show {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.search_modal {
    font-size: 14px;
    height: 90vh;
    overflow: auto;
}

body.modal-open {
    overflow: hidden;
}

.keyword_box {
    padding: 3px;
}

.sidebar-search {
    margin: 0 0 20px 0;
}

.sidebar-month {
    margin: 0 0 20px 0;
}
#month-filter {
    padding: 3px;
}

.sidebar-category {
    margin: 0 0 20px 0;
}

.sidebar-location {
    margin: 0 0 20px 0;
}

.location-filter {
    padding: 3px;
}

.sidebar-btn-wrap {
    margin: 35px 0 50px 0;
}
.calendar {
    width: 82%;
    height: 350px;
}

.btn-clear {
    color: #ffffff;
    border-radius: 20px;
    text-decoration: unset;
    border: unset;
    background-color: #B9936C;
    font-family: 'Kiwi Maru',serif;
    padding: 10px 43px;
    border: none;
    display: inline-block;
    transition: .3s;
}

.btn-clear:hover {
    opacity: 0.7;
    transition: 0.3s;
}


.events-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 70px;
}

.events-item {
    width: 45%;
}

.event-link {
    text-decoration: unset;
}

.events-img {
    width: 100%;
    border-radius: 20px;
}

.events-img:hover {
    transform: scale(0.95);
    transition: all 0.3s;
}

.events-caption {
    color: #333333;
    margin: 20px 0 0 0;
}

.event-title {
    font-family: "Zen Antique",serif;
    font-size: 20px;
    margin: 0 0 15px 0;
}

.event-date {
    margin: 0 0 5px 0;
}
.event-detail {
    margin: 15px 0 0 0;
    line-height: 23px;
}


/* Lineupページ */
.lineup-top {
    background: url(../img/lineup_top.jpg) no-repeat center / cover;
    height: 530px;
    display: flex;
    align-items: center;
    padding: 0 0 0 15%;
}

.lineup-pagetitle {
    font-family: "Lora",serif;
    font-size: 60px;
    color: #fdfdfd;
    text-shadow: 5px 5px 8px rgb(0,0,0,0.5);
    z-index: 1;
}

.lineup-box {
    margin: 50px 0 100px 0;
}

.lineup-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.lineup-item {
    width: 30%;
}

.lineup-item__img {
    width: 100%;
    border-radius: 20px;
    aspect-ratio: 4 / 3;
    box-shadow: 2px 4px 5px rgb(0,0,0,0.5);
   
}

.lineup-item__img:hover {
    transform: scale(0.95);
    transition: all 0.3s;
}
.lineup-item__link {
    text-decoration: unset;
}

.lineup-item__title {
    text-align: center;
    font-size: 20px;
    color: #333333;
    margin: 20px 0 15px 0;   
}
.lineup-item__price {
    text-align: center;
    font-size: 20px;
    color: #B85042;
}




/* ラインナップ詳細 */
.lineup-container {
    background: url(../img/circle_back.png) no-repeat 8% 50% / 40%;
    padding: 50px 0 100px 0;
}



.lineup__detail__img {
border-radius: 20px;

}

.lineup__detail {
    display: flex;
    flex-direction: column; /* 子要素を縦並びにする */
    align-items: flex-start; /* 左寄せ（調整可） */
}



.lineup__detail__content {
    display: flex;
    width: 100%;
    justify-content: space-between; /* 画像と説明を横並びに */
    align-items: center;
    gap: 7%;
}

.lineup__detail .btn {
    margin-top: 20px; /* 画像＋説明の下に間隔を開ける */
    align-self: center;
}

.cart-message {
    display: none;  /*  最初は非表示 */
    color: #B85042;  
    font-size: 18px;
    margin: 10px 0 0 0;
    text-align: center;
    animation: fadeOut 4s ease-in-out forwards;
}

/* ✅ 追加されたときに表示する */
.cart-message.show {
    display: block;
    opacity: 1;
}

/* ✅ ふわっと消えるアニメーション */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}



.lineup__detail__titlebox {
    display: flex;
    justify-content: center;
    gap: 7%;
}
.lineup__detail-title {
    text-align: center;
    font-size: 20px;
    color: #333333;
    margin: 0 0 15px 0;   
}
.lineup__detail-price {
    text-align: center;
    font-size: 20px;
    color: #B85042;
}



.lineup-item__description {
    margin: 30px 0 0 0;
    line-height: 23px;
}

.lineup-item__description_line {
    margin: 0 0 23px 0;
}


/* Newsページ */
.news-top {
    background: url(../img/news_top.jpg) no-repeat center / cover;
    height: 530px;
    display: flex;
    align-items: center;
    padding: 0 0 0 15%;
}

.news-pagetitle {
    font-family: "Lora",serif;
    font-size: 60px;
    color: #fdfdfd;
    text-shadow: 5px 5px 8px rgb(0,0,0,0.5);
    z-index: 1;
}


.news__list {
    background: url(../img/kenban_naname.png) no-repeat center / cover;
}

.news-list {
    width: 70%;
    margin: 100px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    line-height: 40px;
    
}

.news-link{
    display: flex;
    text-decoration: unset;
    color: #333333;
  
}


.news-link:hover{
    text-decoration: underline;
    transition: all .3s;
}

.news-date {
    margin: 0 100px 0 0;
    position: relative;
}

.news-date.new::after {
    content: "New";
    font-family: "Noto Sans JP", sans-serif;
    display: inline-block; /* block だと要素が折り返される可能性がある */
    height: 25px;
    width: 60px;
    border-radius: 3px;
    background-color: #B9936C;
    color: #fdfdfd;
    text-align: center;
    line-height: 25px; /* height と同じ値を指定 */
    position: absolute;
    left: 110px;
    top: 8px;
}




.news-line {
    border-top: 0.5px solid #B9936C;
    width: 1000px;
    margin: 10px 0;
}


/* News詳細ページ */
.news-container {
    background: url(../img/onpu_naname.png) no-repeat center / cover;
}

.news__detailbox {
    margin: 75px 0 0 0;
}

.news__detail_title {
    font-family: "Zen Antique",serif;
    font-size: 24px;
    margin: 0 0 10px 0;
}
.news__detail_date {
    color: #4f4f4f;
}

.news__detail {
    display: flex;
    gap: 7%;  
    margin: 50px 0 0 0;
    width: 100%;
}

.news__detail__img {
border-radius: 20px;
width: 50%;
}

.news__description {
    margin: 50px 0 0 0;
    line-height: 23px;
    width: 50%;
}

.news__description_line {
    margin: 0 0 10px 0;
}

.news__description_line.date {
    font-size: 20px;
}
.news__description_line.place {
    font-size: 20px;
    margin: 0 0 20px 0;
}


.news__description_unity {
    margin: 0 0 23px 0;
}


/* Cartページ */
.cart-top {
    background: url(../img/cart_top.jpg) no-repeat center / cover;
    height: 530px;
    display: flex;
    align-items: center;
    padding: 0 0 0 15%;
}

.cart-pagetitle {
    font-family: "Lora",serif;
    font-size: 60px;
    color: #6E4926;
    text-shadow: 5px 5px 8px rgb(255,255,255,0.5);
    z-index: 1;
}


.cart-detail {
    width: 100%;
    border-spacing: 0 30px; /* 行の間に空間を作る */
    border-collapse: separate;
}

.cart-detail th {
    text-align: center;
    border-bottom: 1px solid #B9936C;
    padding: 30px;
}

.cart-detail td {
    vertical-align: middle;
    /* padding: 10px; */
}
.quantity-select {
    padding: 3px;
}

.cart-goods {
    display: flex;
    align-items: center;
    gap: 50px; 
    width: 100%;
}


.cart-goods__img {
    object-fit: cover; /* 画像のサイズを揃える */
    border-radius: 15px;
    width: 35%;
}

.cart-goods__name {
    width: 65%;
}
.cart-quantity {
    width: 10%;
    text-align: center;
}
.cart-price {
    width: 25%;
    text-align: right;
}


.cart-line td {
    border-top: 1px solid #B9936C;
    height: 10px; /* 罫線を見やすくするための高さ */
}

/* お客様情報とお支払い情報の間の罫線 */
.cart-line {
    border-top: 1px solid #B9936C;
    margin: 20px 0; /* 罫線の上下の余白 */
    height: 10px; /* 高さを統一 */
}

.cart-total__price {
    text-align: right;
    font-weight: bold;
    font-size: 18px;
    color: #B85042;
}

.cart-total__price span {
    font-size: 24px;
    padding: 0 0 0 35px;
}

#clear-cart {
    color: #ffffff;
    border-radius: 20px;
    text-decoration: unset;
    border: unset;
    background-color: #B9936C;
    font-family: 'Kiwi Maru',serif;
    padding: 10px 43px;
    border: none;
    display: inline-block;
    transition: .3s;
}

#clear-cart:hover {
    opacity: 0.7;
    transition: 0.3s;
}


.cart-count {
    background-color:#A03C35;
    color: #fdfdfd;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translate(-50%, -50%);
}
.cart-count.cart-count--header {
    top: 20px;
    right: 115px;
}

.cart-count.cart-count--sp {
    top: 594px;
    left: 142px;
}
.gnav__icon-menu-footer li {
    position: relative;
}

.cart-count.cart-count--footer {
   bottom: 21px;
    right: -23px;
}



/* お気に入り */
.favorite-count {
    background-color:#A03C35;
    color: #fdfdfd;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translate(-50%, -50%);
}

.favorite-count.favorite-count--header{
    top: 20px;
    right: 60px;
}


.favorite-count.favorite-count--sp{
    top: 594px;
    left: 214px;
}

.favorite-count.favorite-count--footer {
    bottom: 19px;
    right: -25px;
 }

.favorite-table {
    width: 100%;
    border-collapse: collapse;
}

.favorite-table td {
    vertical-align: middle;
    margin: 20px 0;
    /* padding: 10px; */
}

.favorite-goods {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

.favorite-goods__img {
    object-fit: cover; /* 画像のサイズを揃える */
    border-radius: 15px;
    width: 35%;
}

.favorite-goods__name {
    width: 50%;
}

.favorite-price {
    width: 15%;
    text-align: right;
}

.favorite-actions {
    text-align: center;
}

.favorite.btn.red {
    color: #ffffff;
    border-radius: 20px;
    text-decoration: unset;
    border: unset;
    background-color: #A03C35;
    font-family: 'Kiwi Maru',serif;
    padding: 10px;
    border: none;
    display: inline-block;
    transition: .3s;
    margin: 0 0 10px 0;
}

.favorite.btn.red:hover {
    opacity: 0.7;
}

.favorite-remove {
    text-align: center;
}

.favorite-remove.button {
    color: #ffffff;
    border-radius: 20px;
    text-decoration: unset;
    border: unset;
    background-color: #B9936C;
    font-family: 'Kiwi Maru',serif;
    padding: 10px 43px;
    border: none;
    display: inline-block;
    transition: .3s;

}

.favorite-remove.button:hover {
    opacity: 0.7;
}



.favorite-line td {
    border-bottom: 1px solid #B9936C;
    height: 10px;
    margin: 20px 0;
}

#cart-count,
#favorite-count {
    display: none; /* 最初は非表示 */
}

#favorite-container {
    margin: 20px 0;
}

/* ステップインジケータ */

.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    margin: 50px 0 100px 0;
}

.step {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #D8C2A4; /* 未完了のステップの色 */
    color: #666;
    font-weight: bold;
}

/* 選択中のステップ */
.step.active {
    background: #B9936C; /* 強調色 */
    color: white;
}

/* 線を作る */
.step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -70px;
    width: 70px;
    height: 2px;
    background: #D8C2A4;
    transform: translateY(-50%);
}

.customer__area {
    margin: 0 auto;
    width: 65%;
    border-spacing: 0 40px; /* 行の間に空間を作る */
    border-collapse: separate;
}

.payment__area {
    margin: 0 auto;
    width: 65%;
    border-spacing: 0 40px; /* 行の間に空間を作る */
    border-collapse: separate;
}
.card_month {
    padding: 3px;
}

.card_year {
    padding: 3px;
}

.information {
    font-family: "Zen Antique",serif;
    font-size: 24px;
    text-align: center;
    margin: 50px 0;
}

.information.second {
    margin: 100px 0 0 0;
}

.payment_method {
    text-align: center;
}

.address_area {
    width: 60%;
    padding: 5px;
}

.tel_area {
    width: 60%;
    padding: 5px;
}

.number_area {
    width: 60%;
    padding: 5px;
}

.code_area {
    padding: 5px;
}

.complete_wrapper {
    text-align: center;
}

.complete_title {
    font-family: "Zen Antique",serif;
    font-size: 24px;
    text-align: center;
    margin: 50px 0;
}

.complete_message {
    line-height: 30px;
}