/* おせちページ作成 202509 */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
.strawberry2026 {
  --color-primary: #920000;
  --color-secondary: #917020;
  --bg-black: #220c0c;
  --bg-beige: #F2E6DE;
  font-family: "Noto Serif JP", serif;
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #212020;
  margin: 0;
  padding: 0;
}

/* utility */
.ib {
  display: inline-block;
}

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

.font-en {
  font-family: "Quattrocento", serif;
  letter-spacing: 1px;
}

.bold {
  font-weight: bold;
}

.opacity08 {
  opacity: 0.8;
}

.strawberry2026 b {
  font-weight: bold;
}

.color-primary {
  color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.color-yellow {
  color: #DEE060;
}

/* bases */
.strawberry2026 .header {
  min-width: 120px;
  margin: 0;
  max-width: 170px;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 12%;
  z-index: 99;
}

.strawberry2026 .header_logo {
  margin: 0;
  width: 100%;
}

.strawberry2026 .main {
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  position: relative;
}

.strawberry2026 img {
  max-width: 100%;
}

.section {
  line-height: normal;
  max-width: 100%;
  padding: 5rem 1em 6rem;
  position: relative;
  text-align: center;
}

.section_title {
  font-weight: normal;
  padding: 10px 0 30px;
  margin: 0 auto;
}

.section_lead {
  font-size: clamp(18px, 2.8vw, 20px);
  line-height: 2.1;
  margin: 0;
  padding: 0;
  position: relative;
}

.section_title_text {
  font-size: min(8vw, 36px);
  font-weight: bold;
}

.section_shopName {
  font-size: clamp(16px, 2.7vw, 18px);
  opacity: 0.8;
}

.section_shopName .logo {
  width: 90px;
  display: block;
  margin: 0 auto 0.5em;
}

.section_shopName .logo.-white {
  filter: contrast(0) brightness(100);
}

.note {
  font-size: 0.9em;
  margin: 1.5em auto 0;
  text-align-last: left;
  width: fit-content;
}

.fz-large12 {
  font-size: 1.2em;
}

.fz-small9 {
  font-size: 0.9em;
}

.fz-small8 {
  font-size: 0.8em;
}

.fz-small7 {
  font-size: 0.7em;
}

.fz-small65 {
  font-size: 0.65em;
}

@media (max-width: 767px) {
  .for_pc {
    display: none !important;
  }

  .section {
    padding: 2em 1em 3em;
  }

  .section_title {
    padding-bottom: 10px;
  }

  .section_lead {
    font-size: clamp(16px, 2.4vw, 18px);
  }
}

@media only screen and (min-width: 768px) {
  .for_sp {
    display: none !important;
  }
}

.btn_white {
  align-items: center;
  background-color: white;
  border: 1px solid white;
  border-radius: 30px;
  box-shadow: 0px 4px 7px 1px #0000003d;
  color: var(--color-secondary);
  display: flex;
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.2;
  min-height: 60px;
  margin: 2.5em auto 0;
  padding: 0.3em 3.5em;
  text-align: center;
  text-decoration: none;
  width: fit-content;
}

@media (hover:hover) {

  .btn_gold,
  .btn_white,
  .btn_blue {
    transition: opacity 0.3s;
  }
  .btn_white:hover {
    opacity: 0.8;
    text-decoration: none;
  }
}

@media (max-width: 767px) {
  .btn_white {
    font-size: 16px;
    max-width: 350px;
    padding-left: 1em;
    padding-right: 1em;
    justify-content: center;
    width: 80%;
  }
}

/* mainVisual */
.mainVisual {
  align-items: flex-end;
  animation: 2s linear 0s 1 normal forwards running anime_top;
  background-color: #000;
  color: white;
  display: flex;
  height: 100vh;
  overflow: hidden;
  padding-bottom: 2em;
  position: relative;
  width: 100%;
  z-index: 1;
}

.mainVisual_img {
  height: 100%;
  left: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.mainVisual_img img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.mainVisual_logo {
  filter: brightness(100);
  min-width: 200px;
  margin: 0.5em;
  max-width: 323px;
  position: absolute;
  top: 0;
  width: 28%;
}

.mainVisual_text {
  font-size: clamp(24px, 7vw, 28px);
  position: relative;
  text-shadow: 0px 1px 8px #000;
  text-align: center;
  width: 100%;
}

.mainVisual_text-date {
  font-size: clamp(32px, 8vw, 40px);
  letter-spacing: 1px;
  position: relative;
  text-align: center;
  width: 100%;
}

@media (max-width: 767px) {
  .mainVisual_text {
    font-size: clamp(20px, 7vw, 24px);
  }
}

/* lead */
.strawberry2026 .lead {
  animation: 2s linear 0s 1 normal forwards running anime_top;
  background-image: linear-gradient(0deg, var(--bg-black), black);
  color: white;
  padding: 4em 0;
  position: relative;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.strawberry2026 .lead_bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.strawberry2026 .lead_bg img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

.strawberry2026 .lead_inner {
  margin: 0 auto;
  padding: 2em;
  position: relative;
  width: fit-content;
}

.strawberry2026 .lead_inner:before {
  background-color: #000;
  content: '';
  height: 95%;
  left: 0;
  display: block;
  opacity: 0.3;
  position: absolute;
  top: 0;
  width: 100%;
  filter: blur(1.5rem);
}

.strawberry2026 .lead_inner * {
  position: relative;
}

.strawberry2026 .lead_text {
  text-shadow: 0px 1px 8px #000;
}

.strawberry2026 .lead_price {
  background-color: #00000074;
  border: 1px solid white;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.6;
  margin: 2em auto 0;
  padding: 0.7em 1.5em;
  text-align: center;
  max-width: 100%;
  width: fit-content;
}

@media (max-width: 767px) {
  .strawberry2026 .lead_inner {
    padding-left: 15px;
    padding-right: 15px;
  }

  .strawberry2026 .lead {
    font-size: 18px;
    padding-top: 0;
  }

  .strawberry2026 .lead_price {
    font-size: 1.1rem;
    padding: 0.7em 2em;
  }

  .strawberry2026 .note {
    font-size: 0.85em;
    width: 90%;
  }
}

/* sweetMenu */
.sweetMenu {
  background-image: linear-gradient(0deg, #780000, var(--bg-black));
  color: white;
  line-height: 1.78;
  position: relative;
}

.sweetMenu_title {
  align-items: center;
  display: flex;
  font-size: clamp(26px, 5vw, 42px);
  font-weight: normal;
  justify-content: center;
  gap: 0 0.5em;
  opacity: 0.75;
  line-height: 1.1;
}

.sweetMenu_title:before,
.sweetMenu_title:after {
  background-color: #fff;
  content: '';
  display: block;
  height: 2px;
  width: 20px;
}

.sweetMenu_list {
  list-style: none;
}

.sweetMenu_list li {
  line-height: 1.4;
  margin-bottom: 1em;
}

@media (max-width: 767px) {
  .sweetMenu {
    padding-bottom: 5em;
  }

  .sweetMenu_list li .ib {
    display: block;
  }
}

/* sarasCafeBrasserie */
.sarasCafeBrasserie {
  /* background-image: linear-gradient(0deg, rgba(47, 47, 46, 0.4), rgba(47, 47, 46, 0.9) 20%, rgba(47, 47, 46, 1)); */
  /* background: linear-gradient(0deg, #efe6da 0.000%, #e5d7ca 16.667%, #dac7b9 33.333%, #cfb6a9 50.000%, #c4a699 66.667%, #b9968b 83.333%, #af887e 100.000%); */
  background-image: linear-gradient(0deg, #ebe8e3 0.000%, #e3dbd4 7.667%, #dac7b9 13.333%, #cfb6a9 17%, #C4A698 25.667%, #b9968b 34.333%, #af887e 100%);
  color: white;
  padding-top: 4em;
}

.sarasCafeBrasserie_title {
  font-weight: bold;
  line-height: 1.2;
  position: relative;
}

.sarasCafeBrasserie_title:after {
  background-color: #fff;
  content: '';
  display: block;
  opacity: 0.8;
  height: 2px;
  margin: 1em auto;
  width: 100px;
}

.sarasCafeBrasserie_price {
  /* font-size: clamp(24px, 2.8vw ,28px); */
}

.sarasCafeBrasserie_price .price {
  font-size: clamp(26px, 2.8vw, 30px);
}

.sarasCafeBrasserie_lead {
  margin: 0 auto;
  text-align: center;
  width: 90%;
}

.sarasCafeBrasserie_mainimg {
  display: block;
  margin: 4em auto 2em;
  max-width: 600px;
  width: 70%;
}

.sarasCafeBrasserie_inner {
  margin: 0 auto;
  max-width: 1200px;
  overflow: hidden;
  padding: 55px 0 0;
}

.sarasCafeBrasserie_content {
  /* background-color: rgba(255, 255, 255, 0.6); */
  color: var(--color-black);
  display: flex;
  flex-wrap: wrap;
  margin-right: -3%;
  padding: 30px 45px;
  position: relative;
  text-align: center;
  width: 100%;
}

.sarasCafeBrasserie_content-title {
  border-bottom: 1px solid #fff;
  font-size: clamp(30px, 4vw, 36px);
  opacity: 0.8;
  padding: 0.5em;
  text-align: left;
  width: 48%;
}

.sarasCafeBrasserie_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  text-align: left;
  width: 100%;
}

.sarasCafeBrasserie_menu dl {
  margin: 0 1em 3em;
  text-align: left;
  width: calc(50% - 2em);
}

.sarasCafeBrasserie_menu dl:first-of-type,
.sarasCafeBrasserie_menu dl:last-of-type {
  width: 100%;
}

/* .sarasCafeBrasserie_menu dl:last-of-type dd {
  display: inline-block;
  width: 52%;
}
.sarasCafeBrasserie_menu dl:last-of-type dd:nth-child(odd) {
  width: 47%;
} */
.sarasCafeBrasserie_menu dl dt {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 1em;
}

.sarasCafeBrasserie_menu dl dd {
  margin: 0;
  padding-left: 1em;
  padding-right: 1em;
  text-indent: -1em;
}

img.sarasCafeBrasserie_img1 {
  display: block;
  margin-left: auto;
  margin-right: 0;
  max-width: 635px;
  right: 1%;
  position: absolute;
  width: 50%;
}

.strawberry2026 .deco {
  filter: brightness(0.8) contrast(1.7);
  max-width: 250px;
  position: absolute;
}

.deco1 {
  bottom: 26%;
  left: 5%;
  position: absolute;
  transform: rotate(20deg);
  width: 140px;
}

.deco2 {
  top: -11%;
  left: 90%;
  position: absolute;
  transform: rotate(-30deg);
  width: 120px;
  z-index: 2;
}

.deco3 {
  bottom: 46%;
  left: 74%;
  margin: 0;
  position: absolute;
  transform: rotate(-212deg);
  width: 190px;
}

.deco4 {
  bottom: -74px;
  left: 500px;
  position: absolute;
  transform: rotate(-21deg);
  width: 100px;
  z-index: 1;
}

.deco5 {
  top: 13%;
  left: 2%;
  margin: 0;
  position: absolute;
  right: 0;
  width: 132px;
  transform: rotate(45deg);
}

.deco6 {
  bottom: 63%;
  right: 0%;
  position: absolute;
  transform: rotate(20deg);
  width: 140px;
  z-index: 2;
}

.deco7 {
  left: 79%;
  position: absolute;
  top: 5%;
  transform: rotate(-2deg);
  width: 200px;
}

.deco8 {
  bottom: 28%;
  margin: 0;
  position: absolute;
  right: -3%;
  transform: rotate(-212deg);
  width: 124px;
}

.deco9 {
  bottom: -74px;
  left: 500px;
  position: absolute;
  transform: rotate(-21deg);
  width: 110px;
  z-index: 1;
}

.deco10 {
  top: 15%;
  left: 2%;
  margin: 0;
  position: absolute;
  right: 0;
  transform: rotate(45deg);
  width: 132px;
}

.deco11 {
  bottom: 57%;
  margin: 0;
  position: absolute;
  left: 0;
  transform: rotate(68deg) scale(1, -1);
  width: 205px;
}

.deco12 {
  bottom: -74px;
  top: -74px;
  right: -98px;
  position: absolute;
  transform: rotate(41deg);
  width: 250px;
}

.deco13 {
  bottom: -8%;
  left: -6%;
  margin: 0;
  position: absolute;
  right: 0;
  transform: rotate(73deg);
  width: 161px;
}

.strawberry2026 .bg {
  position: absolute;
  max-width: 415px;
  width: 40%;
}

.bg1 {
  left: 50%;
  transform: translateX(60%);
}

.bg2 {
  bottom: 0;
  margin: auto;
  right: 50%;
  transform: translateX(-50%);
  top: 0;
}

.bg3 {
  bottom: 8%;
  left: 50%;
  transform: translateX(50%);
}

.novelty_content-logo {
  margin-bottom: 1em;
}

.novelty_content-lead {
  font-size: 18px;
  line-height: 2;
}

.novelty_box {
  background-color: var(--color-primary);
  color: white;
  margin-top: 1.5em;
  padding: 1em 25px;
  text-align: left;
}

.novelty_box b {
  font-size: 18px;
}

.sarasCafeBrasserie_bottom {
  color: #212020;
  font-weight: 18px;
  line-height: normal;
}

.sarasCafeBrasserie_bottom-box {
  margin: 0 auto;
  background-color: #ffffff7d;
  padding: 2em 5em 3em;
  position: relative;
  width: fit-content;
}

.sarasCafeBrasserie_bottom-ttl {
  /* color: var(--color-primary); */
  font-size: 1.4em;
}

.sarasCafeBrasserie_bottom .btnList {
  display: flex;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
}

.sarasCafeBrasserie_bottom .btnList_item {
  margin: 0;
}

.strawberry2026 .info {
  background-color: var(--color-primary);
  color: white;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.78;
  margin: 0 auto 4em;
  max-width: 860px;
  width: 90%;
}

/* 768px未満の場合 */
@media (max-width: 767px) {
  .sarasCafeBrasserie_mainimg {
    left: 0;
    margin: 2em auto;
    right: 0;
    width: 100%;
  }

  .sarasCafeBrasserie_content {
    padding: 0 15px;
  }

  img.sarasCafeBrasserie_img1 {
    position: relative;
    width: 100%;
  }

  .sarasCafeBrasserie_content-title {
    width: 100%;
  }

  .sarasCafeBrasserie_menu dl {
    margin: 0 auto 2em;
    width: 100%;
  }

  .sarasCafeBrasserie_menu dl:last-of-type dd {
    width: 100%;
  }

  .sarasCafeBrasserie_bottom-ttl {
    font-size: 1.2em;
  }

  .sarasCafeBrasserie_bottom-box {
    padding: 15px 5% 35px;
    width: 90%;
  }

  .strawberry2026 .deco {
    max-width: 110px;
  }

  .deco1 {
    left: -10%;
    width: 30%;
  }

  .strawberry2026 .deco3 {
    left: 74%;
    max-width: 130px;
    transform: rotate(-335deg);
    width: 32%;
  }

  .deco4 {
    left: 0;
    margin: auto;
    right: 0;
    width: 26%;
    bottom: -54px;
  }

  .strawberry2026 .deco5 {
    left: -5%;
    max-width: 130px;
    width: 39%;
    transform: rotate(69deg);
  }

  .deco6 {
    bottom: 58%;
        bottom: 65%;
        right: -8%;
        width: 27%;
  }

  .deco8 {
    width: 100px;
  }

  .deco9 {
        bottom: -8em;
        left: 0;
        width: 25%;
        right: 0;
        margin: auto;
  }

  .deco10 {
        left: -5%;
        top: 24%;
        width: 26%;
  }

  .strawberry2026 .deco12 {
    top: -40px;
    left: 85%;
    max-width: 165px;
    width: 64%;
  }

  .strawberry2026 .bg {
    position: relative;
    width: 80%;
  }

  .strawberry2026 .bg3 {
    left: auto;
    right: auto;
    margin: 0 auto -2em;
    transform: none;
  }
}

/* sarasPatisserie */
.deco14 {
  bottom: 3%;
  left: -2%;
  position: absolute;
  transform: rotate(101deg) scale(1, -1);
  width: 154px;
  z-index: 1;
}

.deco15 {
  top: 18%;
  right: 2%;
  margin: 0;
  position: absolute;
  right: -3%;
  transform: rotate(76deg);
  width: 188px;
}

.sarasPatisserie {
  background-image: linear-gradient(180deg, #ebe8e3 0.000%, #f5f3f0 7.667%, #fff 100%);
  padding-top: 10em;
}

.pickupBlock {
  max-width: 1000px;
  margin: 0 auto;
}

.pickupBlock_title {
  font-size: clamp(20px, 3vw, 26px);
  border-bottom: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  padding: 1em 0 0.5em;
}

.pickupBlock_list {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-evenly;
  padding: 0;
  width: 100%;
}

.pickupBlock_list li {
  width: calc(33% - 1em);
}

.pickupBlock_list .title {
  color: var(--color-secondary);
  font-size: 1.2;
  margin-bottom: 0.5em;
}

.pickupBlock_list .price {
  margin-top: 0;
}

/* more_box */
.strawberry2026 .grad-trigger {
  display: none;
  /*チェックボックスは常に非表示*/
}

/* 768px未満の場合 */
@media (max-width: 767px) {
  .strawberry2026 .section_title_text {
    font-size: min(25px, 6vw, 33px);
  }

  .pickupBlock_list li {
    width: calc(50% - 1em);
  }


  /* more_box */
  .strawberry2026 .btn_more {
    display: none;
    cursor: pointer;
  }
  .strawberry2026 .btn_more .contents_desc {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .strawberry2026 .btn_toggle {
    cursor: pointer;
  }
  .strawberry2026 .grad-trigger {
    display: none;
  }
  .strawberry2026 .btn_toggle .contents_desc {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }

  .strawberry2026 .btn_toggle {
    border-bottom: 2px solid #fff;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: 500px;
    order: 5;
    padding: 0 0.5em;
    text-align: center;
    width: fit-content;
  }
  .strawberry2026 .btn_toggle::before {
      content: "詳細はこちら";
  }
  .strawberry2026 .btn_toggle::after {
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    content: "";
    display: inline-block;
    margin-left: 0.3em;
    margin-top: 3px;
    height: 9px; 
    transform: rotate(-45deg) scaleY(1);
    width: 9px;
  }
  .strawberry2026 .toggle_moreShow {
    box-sizing: border-box;
    height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
  }
  .strawberry2026 .grad-trigger:checked ~ .toggle_moreShow,
  #osechi .grad-trigger:checked ~ * .toggle_moreShow {
    clear: both;
    display: block;
    height: auto;
    opacity: 1;
    visibility: visible;
  }
  .strawberry2026 .grad-trigger:checked ~ .btn_toggle::before {
    content: "閉じる";
  }
  .strawberry2026 .grad-trigger:checked ~ .btn_toggle::after {
    margin-top: 9px;
    transform: rotate(136deg);
  }
}
/* 768px以上の場合 */
@media (max-width: 768px) {

}
@keyframes anime_top {
  0% {
    opacity: 0;
  }

  /* 
  30% {
    opacity: 1;
  } */
  100% {
    opacity: 1;
    /* transform: scale(1.15); */
  }
}

@keyframes anime_party {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  65% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    z-index: 1;
  }
}

.btn_totop a,
.btn_back a {
  align-items: center;
  background: black;
  bottom: 0;
  color: white;
  display: inline-flex;
  font-size: 18px;
  line-height: 1.1;
  margin: 0 auto;
  padding: 8px 1em;
  position: fixed;
  right: 15px;
  text-decoration: none;
  width: fit-content;
  z-index: 999;
}

.btn_back a:after {
  border-right: 3px solid white;
  border-top: 3px solid white;
  content: '';
  display: block;
  height: 10px;
  margin-left: 5px;
  margin-top: 2px;
  transform: rotate(45deg);
  width: 10px;
}

.btn_totop a:before {
  border-right: 3px solid white;
  border-top: 3px solid white;
  content: '';
  display: block;
  height: 10px;
  margin-right: 7px;
  margin-top: 9px;
  transform: rotate(-45deg);
  width: 10px;
}

.mainStart {
  animation: 2s linear 0s 1 normal forwards running anime_top;
  background-image: linear-gradient(0deg, #974b4b, #d9a9a9);
  color: white;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;;
  padding: 4em 20px 3em;
  position: relative;
  text-align: center;
}
.mainStart > .deco:nth-child(1) {
    top: -6%;
    right: 0%;
    position: absolute;
    transform: rotate(-30deg);
    width: 176px;
    z-index: 1;
}
.mainStart > .deco:nth-child(2) {
    bottom: 6%;
    left: 0%;
    position: absolute;
    transform: rotate(-30deg) scaleX(-1);
    width: 176px;
    z-index: 2;
}
.mainStart_title {
  margin: 0 auto;
  position: relative;
  width: fit-content;
}
.mainStart_title .deco:nth-child(1) {
  bottom: 0;
  right: 104%;
  margin: auto;
  top: 0;
  width: 95px;
}
.mainStart_title .deco:nth-child(2) {
  bottom: 0;
  left: 104%;
  margin: auto;
  top: 0;
  width: 95px;
}
.mainStart h1 {
  margin: 0;
  text-shadow: none;
  width: fit-content;
}
.linkList {
  gap: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  list-style: none;
  margin: 0;
  padding: 1em 1em 2em;
}
.linkList li {
  line-height: 1.1;
  padding: 0 1em;
}
.linkList a {
  color: white;
}
@media only screen and (min-width: 768px) {
  .mainStart_title {

  }
  .linkList {
    justify-content: center;
  }
  .linkList li + li {
    border-left: 1px solid #fff;
  }
}