@charset "UTF-8";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}

header,
footer,
nav,
section,
article,
main,
aside,
figure,
figcaption {
  display: block;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
  vertical-align: top;
}

body {
  font-family: "Noto Serif JP", serif;
  color: #222222;
  font-style: normal;
  font-weight: 500;
}

.p-main {
  background-color: #F3EFEB;
}

html,
body {
  overflow-x: hidden;
}

a,
button {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
a:hover,
button:hover {
  opacity: 0.7;
}

body.single .p-breadcrumb__item:last-child::before {
  display: none;
}
body.single .p-breadcrumb__item:last-child .post {
  display: none;
}

.l-inner {
  padding-inline: clamp(20px, -0.563rem + 7.73vw, 90px);
}

.c-button-rightdown {
  display: block;
  margin: 0 auto;
  color: #FFFFFF;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  padding-top: 25px;
  padding-bottom: 24px;
  padding-inline: 89px;
  background: #222;
  position: relative;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  z-index: 1;
}
@media screen and (min-width: 900px) {
  .c-button-rightdown {
    padding-inline: 84px;
  }
}
.c-button-rightdown::before {
  content: "";
  background-image: url(/wp-content/themes/OpenCafe/assets/img/common/svg/button-arrow-right.svg);
  width: 7.814px;
  height: 13.628px;
  position: absolute;
  right: 16.19px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.c-button-rightdown::after {
  content: "";
  width: 100%;
  height: 100%;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  position: absolute;
  right: -6px;
  top: 6px;
  pointer-events: none;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.c-button-rightdown:hover {
  -webkit-transform: translate(5px, 6px);
          transform: translate(5px, 6px);
  opacity: 1 !important;
}
.c-button-rightdown:hover::after {
  -webkit-transform: translate(-6px, -6px);
          transform: translate(-6px, -6px);
}

.c-button-top-shop {
  display: block;
  width: clamp(140px, 7.869rem + 3.76vw, 174px);
  margin-inline: auto;
  background: #222222;
  color: #FFFFFF;
  border: 1px solid #222222;
  text-align: center;
  font-size: clamp(12px, 0.698rem + 0.22vw, 14px);
  font-weight: 700;
  line-height: normal;
  padding-block: clamp(6px, 0.323rem + 0.22vw, 8px);
  margin-top: 12px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
.c-button-top-shop:hover {
  background: #FFFFFF;
  color: #222222;
}

.p-category-tab__items {
  display: grid;
  grid-template-columns: repeat(2, -webkit-max-content);
  grid-template-columns: repeat(2, max-content);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 13px;
}
@media screen and (min-width: 900px) {
  .p-category-tab__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 14px;
  }
}

.c-category-tab__item {
  background: #888888;
  color: #FFFFFF;
  padding-top: clamp(20px, 1.121rem + 0.55vw, 25px);
  padding-right: clamp(57px, 3.07rem + 2.1vw, 76px);
  padding-bottom: clamp(21px, 1.235rem + 0.33vw, 24px);
  padding-left: clamp(56px, 2.982rem + 2.21vw, 76px);
  width: clamp(161px, 9.052rem + 4.31vw, 200px);
  height: clamp(64px, 3.871rem + 0.55vw, 69px);
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
.c-category-tab__item::after {
  content: "";
  border: 1px solid #FFFFFF;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
}
.c-category-tab__item:nth-of-type(3) {
  line-height: 1.36;
}
@media screen and (min-width: 500px) {
  .c-category-tab__item {
    width: clamp(170px, 0.469rem + 32.5vw, 300px);
  }
}
@media screen and (min-width: 900px) {
  .c-category-tab__item {
    line-height: 1.25;
    width: clamp(161px, 9.052rem + 4.31vw, 200px);
  }
}
.c-category-tab__item.is-active {
  background-color: #382620;
}

.p-drawer-content-link {
  display: inline-block;
  color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 11px;
}

.p-drawer-content-link-item1 {
  font-family: "Patua One", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.88px;
}

.p-drawer-content-link-item2 {
  font-size: 10px;
  line-height: normal;
}
.p-drawer-content-link-item2::before {
  content: "/";
  padding-right: 12px;
}

.c-entry-heading-type1 {
  font-size: clamp(18px, 0.97rem + 0.66vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  padding-left: clamp(12px, 0.646rem + 0.44vw, 16px);
  border-left: clamp(4px, 0.198rem + 0.22vw, 6px) solid #382620;
}
@media screen and (min-width: 900px) {
  .c-entry-heading-type1 {
    line-height: normal;
  }
}

.c-entry-heading-type2 {
  font-size: clamp(16px, 0.896rem + 0.44vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  padding-bottom: 12px;
  border-bottom: 1px solid #382620;
}
@media screen and (min-width: 900px) {
  .c-entry-heading-type2 {
    line-height: normal;
  }
}

.c-hamburger {
  width: 60px;
  height: 60px;
  position: fixed;
  top: clamp(10px, 0.366rem + 1.1vw, 20px);
  right: clamp(10px, 0.366rem + 1.1vw, 20px);
  background-color: #382620;
  border-radius: 50%;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .c-hamburger {
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
}
body.is-subpage .c-hamburger {
  -webkit-transition: none;
  transition: none;
}
.c-hamburger.show {
  opacity: 1;
  pointer-events: auto;
}
.c-hamburger.is-checked {
  background-color: #FFFFFF;
}
.c-hamburger.is-checked .c-hamburger__bar {
  background-color: #382620;
}
.c-hamburger.is-checked .c-hamburger__bar:nth-of-type(1) {
  top: 28.75px;
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
}
.c-hamburger.is-checked .c-hamburger__bar:nth-of-type(2) {
  display: none;
}
.c-hamburger.is-checked .c-hamburger__bar:nth-of-type(3) {
  top: 28.75px;
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
}

.c-hamburger__bar {
  width: 27px;
  height: 2.25px;
  background: #FFFFFF;
  position: absolute;
  top: 22px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.c-hamburger__bar:nth-of-type(2) {
  top: 28.75px;
}
.c-hamburger__bar:nth-of-type(3) {
  top: 35.5px;
}

.c-to-top {
  display: inline-block;
  background: #FFFFFF;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: fixed;
  bottom: clamp(6px, 0.012rem + 1.55vw, 20px);
  right: clamp(8px, 0.189rem + 1.33vw, 20px);
  z-index: 98;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.c-to-top.show {
  opacity: 1;
  visibility: visible;
}

.c-main-link {
  color: #222222;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}

.c-main-link__item1 {
  font-family: "Patua One", serif;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 1.92px;
}

.c-main-link__item2 {
  font-size: 10px;
  line-height: normal;
}

.c-page-fv-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.c-page-fv-heading__en {
  color: #FFFFFF;
  font-family: "Amatic SC", serif;
  font-size: clamp(32px, 0.964rem + 4.42vw, 72px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(6.4px, 0.193rem + 0.88vw, 14.4px);
}

.c-page-fv-heading__ja {
  color: #FFFFFF;
  font-size: clamp(12px, 0.646rem + 0.44vw, 16px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(0.96px, 0.052rem + 0.04vw, 1.28px);
}

.c-shop-heading {
  font-size: clamp(20px, 1.146rem + 0.44vw, 24px);
  font-weight: 700;
  line-height: normal;
  padding-left: clamp(8px, 0.293rem + 0.88vw, 16px);
  border-left: 6px solid #382620;
}

.c-top-section-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.c-top-section-heading.c-top-section-heading--concept {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.c-top-section-heading__en {
  font-family: "Amatic SC", serif;
  font-size: clamp(40px, 2.189rem + 1.33vw, 52px);
  font-weight: 700;
  line-height: normal;
  letter-spacing: clamp(4px, 0.084rem + 0.71vw, 10.4px);
}

.c-top-section-heading__ja {
  font-size: clamp(12px, 0.698rem + 0.22vw, 14px);
  font-weight: 700;
  line-height: normal;
}

.p-breadcrumb__wrap {
  background-color: #F3EFEB;
  padding-top: clamp(4px, -0.061rem + 1.33vw, 16px);
  padding-inline: clamp(10px, -0.204rem + 3.54vw, 42px);
  max-width: 1180px;
  margin-inline: auto;
}

.p-breadcrumb__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.p-breadcrumb__item {
  font-size: clamp(12px, 0.698rem + 0.22vw, 14px);
}
.p-breadcrumb__item::before {
  content: ">";
  margin-inline: clamp(5px, 0.054rem + 1.1vw, 15px);
}
.p-breadcrumb__item:first-child::before {
  display: none;
}

.p-breadcrumb__link {
  color: #382620;
  font-size: clamp(12px, 0.698rem + 0.22vw, 14px);
  font-weight: 700;
  line-height: normal;
}

.concept__inner {
  padding-inline: clamp(20px, -0.563rem + 7.73vw, 90px);
  padding-bottom: 93px;
}
@media screen and (min-width: 1024px) {
  .concept__inner {
    padding-bottom: 55px;
  }
}

.concept-contents {
  margin-top: clamp(40px, 1.594rem + 3.87vw, 75px);
  margin-inline: auto;
  max-width: 1180px;
}

.concept-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 36px;
  position: relative;
}
.concept-item:nth-of-type(1)::after {
  content: "";
  width: clamp(335px, 4.13rem + 71.71vw, 984px);
  height: clamp(100px, 3.66rem + 11.05vw, 200px);
  position: absolute;
  background-color: #EAE0D5;
  bottom: calc(clamp(48px, 1.653rem + 5.75vw, 100px) * -1);
  right: calc(clamp(20px, -0.563rem + 7.73vw, 90px) * -1);
}
@media screen and (min-width: 768px) {
  .concept-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media screen and (min-width: 900px) {
  .concept-item {
    gap: 50px;
  }
}
@media screen and (min-width: 1024px) {
  .concept-item {
    gap: 71px;
  }
}
.concept-item:nth-of-type(2) {
  padding-top: clamp(119px, 5.288rem + 9.17vw, 202px);
}
.concept-item:nth-of-type(2)::after {
  content: "";
  width: clamp(17.75rem, 10.084rem + 32.71vw, 36.25rem);
  height: clamp(14.188rem, 8.749rem + 23.2vw, 27.313rem);
  position: absolute;
  background-color: #EAE0D5;
  bottom: calc(clamp(20px, 0.214rem + 4.42vw, 60px) * -1);
  left: calc(clamp(20px, -0.563rem + 7.73vw, 90px) * -1);
}
@media screen and (min-width: 768px) {
  .concept-item:nth-of-type(2) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
.concept-item:nth-of-type(3) {
  padding-top: clamp(92px, 2.875rem + 12.27vw, 203px);
}
.concept-item:nth-of-type(3)::after {
  content: "";
  width: clamp(184px, 5.906rem + 23.87vw, 400px);
  height: clamp(239px, 7.66rem + 31.05vw, 520px);
  position: absolute;
  background-color: #EAE0D5;
  bottom: calc(clamp(36px, 1.11rem + 4.86vw, 80px) * -1);
  right: calc(clamp(0rem, -2.331rem + 9.94vw, 5.625rem) * -1);
}

.concept-item__body {
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 900px) {
  .concept-item__body {
    width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .concept-item__body {
    width: 35.3636363636%;
  }
}

.concept-title {
  font-size: clamp(20px, 1.043rem + 0.88vw, 28px);
  font-weight: 700;
  line-height: 2.1;
}
@media screen and (min-width: 1024px) {
  .concept-title {
    font-size: 23px;
  }
}
@media screen and (min-width: 1240px) {
  .concept-title {
    font-size: 28px;
  }
}

.concept-text {
  margin-top: 32px;
  font-size: 14px;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .concept-text {
    margin-top: 26px;
  }
}

.concept-item__images {
  z-index: 2;
  width: 100%;
}
@media screen and (min-width: 900px) {
  .concept-item__images {
    width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .concept-item__images {
    width: 58.1818181818%;
  }
}

.coffee-images__wrap {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: clamp(11px, 0.454rem + 0.99vw, 20px);
}

.pasta-images__wrap {
  position: relative;
  height: clamp(281px, 10.933rem + 28.29vw, 537px);
}

.pasta-image__top {
  width: clamp(283px, 11.032rem + 28.4vw, 540px);
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
}
.pasta-image__top img {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .pasta-image__top {
    width: clamp(280px, 6.591rem + 22.73vw, 310px);
  }
}
@media screen and (min-width: 900px) {
  .pasta-image__top {
    width: clamp(310px, -12.379rem + 56.45vw, 380px);
  }
}
@media screen and (min-width: 1024px) {
  .pasta-image__top {
    width: clamp(400px, -10rem + 54.69vw, 540px);
  }
}

.pasta-image__bottom {
  width: clamp(183px, 7.113rem + 18.45vw, 350px);
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
}
.coffee-image__top {
  width: 100%;
}
.coffee-image__top img {
  width: 100%;
}

.coffee-image__bottom-contents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(11px, 0.454rem + 0.99vw, 20px);
}
.coffee-image__bottom-contents img {
  width: 100%;
}

.bread-image {
  width: clamp(294px, 9.414rem + 38.23vw, 640px);
  height: auto;
}
.bread-image img {
  width: 100%;
}

.p-drawer {
  width: 100%;
  max-width: 375px;
  height: 100vh;
  background-color: #382620;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  pointer-events: none;
}
.p-drawer.is-checked {
  opacity: 1;
  pointer-events: auto;
}

.p-drawer__logo {
  display: block;
  position: absolute;
  top: 15px;
  left: 10px;
  width: 128px;
  height: 64px;
}
.p-drawer__logo img {
  width: 100%;
}

.p-drawer-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 57px;
}

.p-drawer-content__menu {
  padding-top: 130px;
  padding-left: 40px;
  padding-right: 20px;
}

.p-drawer-content-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 32px;
}

.p-drawer-sns-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 39px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-drawer-sns-icons .p-sns-icon-item svg {
  width: 40px;
  height: auto;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-drawer-sns-icons .p-sns-icon-item svg:hover {
  opacity: 0.7;
}
.p-drawer-sns-icons .p-sns-icon-item:nth-of-type(n + 2) svg {
  width: 40px;
}

.p-drawer__bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 98;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  pointer-events: none;
}
.p-drawer__bg.is-checked {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.p-footer {
  overflow: hidden;
  padding-top: clamp(100px, 4.152rem + 8.95vw, 181px);
  background-color: #F3EFEB;
}

.p-footer__access {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #EAE0D5;
  position: relative;
}
.p-footer__access::before {
  content: "";
  background: url("/wp-content/themes/OpenCafe/assets/img/treat/top-balloon-access.webp") no-repeat center center/contain;
  width: clamp(200px, 11.671rem + 3.54vw, 232px);
  height: clamp(172px, 10.025rem + 3.09vw, 200px);
  position: absolute;
  top: calc(clamp(42px, 2.415rem + 0.9vw, 50.12px) * -1);
  left: clamp(-30px, -11.354rem + 40.44vw, 336px);
}
@media screen and (min-width: 1440px) {
  .p-footer__access::before {
    left: auto;
    right: calc(50% + 100px);
  }
}
.p-footer__access::after {
  content: "";
  background: url("/wp-content/themes/OpenCafe/assets/img/treat/treat-bread.webp") no-repeat center center/contain;
  width: clamp(190.5px, 6.766rem + 21.93vw, 389px);
  height: clamp(180px, 6.614rem + 19.78vw, 359px);
  position: absolute;
  top: calc(clamp(100px, 4.152rem + 8.95vw, 181px) * -1);
  right: calc(clamp(37px, 0.862rem + 6.19vw, 93px) * -1);
}
@media screen and (min-width: 1440px) {
  .p-footer__access::after {
    left: calc(50% + 280px);
  }
}

.p-footer__access-wrap {
  font-style: normal;
  margin-top: 43px;
  max-width: 768px;
  margin-inline: auto;
  padding-inline: 20px;
}

.p-footer__access-map {
  border: clamp(5px, 0.183rem + 0.55vw, 10px) solid #FFFFFF;
}
.p-footer__access-map iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 325/178;
}
@media screen and (min-width: 768px) {
  .p-footer__access-map iframe {
    aspect-ratio: 668/367;
  }
}

.p-access__table {
  margin-top: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-collapse: collapse;
}
@media screen and (min-width: 768px) {
  .p-access__table {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 40px;
    padding-inline: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .p-access__table {
    margin-top: 18px;
  }
}

.p-access__table-content1,
.p-access__table-content2 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
}

.p-access__table-content1 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.p-access__table-content1 .p-access__table-row:nth-of-type(1) {
  padding-top: 0px;
}

.p-access__table-row {
  width: 100%;
  border-bottom: 1px solid #222222;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 10px;
}
@media screen and (min-width: 900px) {
  .p-access__table-row {
    padding-bottom: 15px;
  }
}

.p-access__table-head,
.p-access__table-__data {
  width: 100%;
  color: #222222;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.p-access__table-head {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 56px;
          flex: 0 0 56px;
  -moz-text-align-last: left;
       text-align-last: left;
}

.p-access__table__data {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  color: #222;
  font-family: "Noto Serif JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 171.429% */
}
@media screen and (min-width: 768px) {
  .p-access__table__data {
    font-size: 13px;
  }
}
.p-access__table-content2 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
@media screen and (min-width: 768px) {
  .p-access__table-content2 .p-access__table-row:nth-of-type(1) {
    padding-top: 0px;
  }
}

.p-footer__sns {
  background: #382620;
  padding-top: 47px;
  padding-bottom: clamp(14px, 0.823rem + 0.22vw, 16px);
  position: relative;
}
.p-footer__sns::before {
  content: "";
  background: url(/wp-content/themes/OpenCafe/assets/img/treat/treat-coffee03.webp) no-repeat center center/contain;
  width: clamp(128px, 2.484rem + 23.54vw, 341px);
  height: clamp(114px, 2.619rem + 19.23vw, 288px);
  position: absolute;
  top: -57px;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
  left: calc(clamp(30px, 0.451rem + 6.08vw, 85px) * -1);
}
@media screen and (min-width: 500px) {
  .p-footer__sns::before {
    top: -60px;
  }
}
@media screen and (min-width: 768px) {
  .p-footer__sns::before {
    top: -70px;
  }
}
@media screen and (min-width: 900px) {
  .p-footer__sns::before {
    top: calc(clamp(4.375rem, -7.615rem + 21.32vw, 9.438rem) * -1);
    -webkit-transform: none;
            transform: none;
  }
}
@media screen and (min-width: 1440px) {
  .p-footer__sns::before {
    left: auto;
    right: calc(50% + 350px);
  }
}

.p-footer__sns-items {
  padding-bottom: 37px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 33px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-footer__sns-items .p-sns-icon-item svg {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  width: 24.5px;
}
.p-footer__sns-items .p-sns-icon-item svg:hover {
  opacity: 0.7;
}
.p-footer__sns-items .p-sns-icon-item:nth-of-type(2) svg {
  width: 22px;
}
.p-footer__sns-items .p-sns-icon-item:nth-of-type(3) svg {
  width: 28px;
}

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

.p-copyright__text {
  color: #FFFFFF;
  font-size: 12px;
  line-height: 2;
}

.p-form {
  color: #382620;
  padding-top: clamp(43px, 1.781rem + 3.87vw, 78px);
  max-width: 730px;
  padding-inline: 20px;
  margin: 0 auto;
  padding-bottom: 65px;
}
@media screen and (min-width: 1024px) {
  .p-form {
    padding-bottom: 0;
  }
}

.p-form__title {
  text-align: center;
  font-size: clamp(20px, 1.043rem + 0.88vw, 28px);
  font-weight: 700;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .p-form__title {
    line-height: 1.4;
  }
}

.p-form__first-text {
  margin-top: clamp(20px, 1.043rem + 0.88vw, 28px);
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  line-height: 1.7;
}

.p-form-content {
  margin-top: clamp(60px, 3.232rem + 2.21vw, 80px);
}

.p-form-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 42px;
}

.form-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
}
.form-item:nth-of-type(1) {
  gap: 23px;
}
@media screen and (min-width: 768px) {
  .form-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 28px;
  }
}

.form-item__label {
  min-width: 175px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

.form-item__label-required {
  background-color: #F07317;
  color: #FFFFFF;
  padding: 2px 6px;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
}

.form-control-wrap {
  width: 100%;
}
.form-control-wrap .form-text {
  border-radius: 6px;
  border: 1px solid #382620;
}
.form-control-wrap textarea {
  height: clamp(200px, 11.464rem + 4.42vw, 240px);
}

.form-radio-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}

.form-text {
  width: 100%;
  padding: 12px 16px 13px 16px;
}
.form-text::-webkit-input-placeholder {
  color: #ccc;
  font-size: 16px;
  line-height: normal;
}
.form-text::-moz-placeholder {
  color: #ccc;
  font-size: 16px;
  line-height: normal;
}
.form-text:-ms-input-placeholder {
  color: #ccc;
  font-size: 16px;
  line-height: normal;
}
.form-text::-ms-input-placeholder {
  color: #ccc;
  font-size: 16px;
  line-height: normal;
}
.form-text::placeholder {
  color: #ccc;
  font-size: 16px;
  line-height: normal;
}

.wpcf7-list-item {
  margin: 0;
}

.radio-input {
  width: 1px;
  height: 1px;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}
.radio-input:checked + .radio-label::after {
  opacity: 1;
}

.radio-label {
  font-size: 16px;
  line-height: normal;
  padding-left: 34px;
  position: relative;
}
.radio-label::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #382620;
  background-color: #FFFFFF;
  position: absolute;
  top: 0;
  left: 0;
}
.radio-label::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #F07317;
  position: absolute;
  left: 6px;
  top: 6px;
  opacity: 0;
}

.p-form__privacy {
  margin-top: clamp(18px, 0.97rem + 0.66vw, 24px);
}

.p-form__privacy-text {
  font-size: 14px;
  line-height: normal;
  line-height: 1.7;
}
@media screen and (min-width: 768px) {
  .p-form__privacy-text {
    line-height: normal;
  }
}

.form-submit {
  margin-top: clamp(38px, 2.323rem + 0.22vw, 40px);
  text-align: center;
}

.submit-wrapper {
  width: 289px;
  position: relative;
  color: #FFFFFF;
  margin: 0 auto;
  padding-top: 24px;
  padding-bottom: 25px;
  font-size: 16px;
  font-weight: 700;
  background: #222;
  position: relative;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media screen and (min-width: 768px) {
  .submit-wrapper {
    width: 280px;
  }
}
.submit-wrapper::after {
  content: "";
  width: 100%;
  height: 100%;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  position: absolute;
  right: -6px;
  top: 6px;
  pointer-events: none;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.submit-wrapper:hover {
  -webkit-transform: translate(5px, 6px);
          transform: translate(5px, 6px);
}
.submit-wrapper:hover::after {
  -webkit-transform: translate(-6px, -6px);
          transform: translate(-6px, -6px);
}

.wpcf7-spinner {
  display: none;
}

.wpcf7-response-output {
  display: none;
}

.submit-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.submit-button-text {
  color: #FFFFFF;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 12px;
}

.gift__inner {
  padding-inline: clamp(20px, -0.563rem + 7.73vw, 90px);
  padding-bottom: 60px;
}
@media screen and (min-width: 768px) {
  .gift__inner {
    padding-bottom: 0px;
  }
}

.gift-container {
  max-width: 1180px;
  margin-inline: auto;
  margin-top: clamp(42px, 1.693rem + 3.98vw, 78px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 19px;
     -moz-column-gap: 19px;
          column-gap: 19px;
  row-gap: 34px;
}
@media screen and (min-width: 768px) {
  .gift-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
}
@media screen and (min-width: 1024px) {
  .gift-container {
    gap: 40px;
  }
}

.p-products-card:nth-of-type(1) {
  width: 100%;
}
.p-products-card:nth-of-type(n + 2) {
  width: calc(50% - 9.5px);
}
@media screen and (min-width: 768px) {
  .p-products-card:nth-of-type(1) {
    grid-row: 1/3;
    grid-column: 1/3;
  }
  .p-products-card:nth-of-type(n + 2) {
    width: auto;
  }
}

.gift-wrapping {
  margin-top: clamp(55px, 2.505rem + 3.98vw, 91px);
  max-width: 1100px;
  margin-inline: auto;
  background-color: #FFFFFF;
  border: 4px solid #382620;
  padding-top: clamp(37px, 1.199rem + 4.75vw, 80px);
  padding-inline: clamp(40px, 1.982rem + 2.21vw, 60px);
  padding-bottom: clamp(40px, 1.464rem + 4.42vw, 80px);
  position: relative;
}
.gift-wrapping::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border: 1px solid #382620;
}

.gift-wrapping__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 34px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .gift-wrapping__content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 60px;
  }
}

@media screen and (min-width: 768px) {
  .gift-wrapping__body,
  .gift-wrapping__img {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

.gift-wrapping__head {
  color: #382620;
  font-size: clamp(16px, 0.793rem + 0.88vw, 24px);
  font-weight: 700;
  line-height: 1.7;
  padding-bottom: 22px;
  background-size: 12px 3px;
  background-image: radial-gradient(circle, #222222 1.5px, transparent 1.5px);
  background-position: left bottom;
  background-repeat: repeat-x;
}
@media screen and (min-width: 768px) {
  .gift-wrapping__head {
    padding-bottom: 20px;
  }
}

.gift-wrapping__text {
  margin-top: clamp(22px, 1.012rem + 1.55vw, 36px);
  color: #382620;
  font-size: clamp(12px, 0.646rem + 0.44vw, 16px);
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .gift-wrapping__text {
    color: #222222;
  }
}

.gift-wrapping__img {
  max-width: 460px;
}
.gift-wrapping__img img {
  width: 100%;
  height: auto;
}

.p-main-menu {
  width: 200px;
  height: auto;
  background-color: #F3EFEB;
  position: relative;
  top: 0;
  left: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: none;
}
.p-main-menu h1 {
  display: block;
  height: 93px;
  position: absolute;
  top: 27px;
  left: 18px;
  right: 16px;
}
@media screen and (min-width: 1024px) {
  .p-main-menu {
    display: block;
  }
}

.p-main-menu__logo {
  width: 166px;
  height: 93px;
  display: block;
}
.p-main-menu__logo img {
  width: 100%;
  height: auto;
}

.p-main-menu__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 63px;
}

.p-main-menu__nav {
  padding-top: 173px;
  text-align: center;
}

.p-main-menu__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 31px;
}

.p-main-menu-sns-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 28.5px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 15px;
}

.p-sns-icon-item svg {
  width: 19.5px;
  height: auto;
}
.p-sns-icon-item:nth-of-type(2) svg {
  width: 18px;
}
.p-sns-icon-item:nth-of-type(3) svg {
  width: 21px;
}

.p-menu-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: clamp(19px, 0.644rem + 2.32vw, 40px);
  -webkit-column-gap: clamp(24px, 1.086rem + 1.77vw, 40px);
     -moz-column-gap: clamp(24px, 1.086rem + 1.77vw, 40px);
          column-gap: clamp(24px, 1.086rem + 1.77vw, 40px);
  max-width: 1100px;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-menu-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .p-menu-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.p-menu-card {
  display: block;
}

.p-menu-card__img img {
  width: 100%;
}

.p-menu-card__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  margin-top: clamp(8px, 0.396rem + 0.44vw, 12px);
}

.p-menu-card__price {
  display: block;
  text-align: center;
  font-family: "Damion", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.p-archive-menu {
  margin-top: clamp(60px, 3.232rem + 2.21vw, 80px);
}

.p-archive-menu__tab {
  margin-bottom: clamp(60px, 3.232rem + 2.21vw, 80px);
}

.p-archive-menu__inner {
  padding-inline: clamp(20px, -0.563rem + 7.73vw, 90px);
}

.p-news-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 19px;
}
@media screen and (min-width: 900px) {
  .p-news-cards {
    gap: 40px;
  }
}

.p-news-card__head {
  position: relative;
}
.p-news-card__head::before {
  content: "";
  position: absolute;
  top: 35px;
  left: -8px;
  width: 0px;
  height: 0px;
  display: block;
  border-top: 8px solid #aaa;
  border-left: 8px solid transparent;
}
@media screen and (min-width: 900px) {
  .p-news-card__head::before {
    top: 41px;
  }
}

.p-news-card__tag-wrap {
  position: absolute;
  top: 10px;
  left: -8px;
}
@media screen and (min-width: 900px) {
  .p-news-card__tag-wrap {
    top: 16px;
  }
}

.p-news-card__tag {
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background-color: #222222;
  padding: 4px 10px;
  position: relative;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%);
  overflow: visible;
}
@media screen and (min-width: 900px) {
  .p-news-card__tag {
    font-size: 14px;
    padding-inline: 14px;
  }
}

.p-news-card__img {
  overflow: hidden;
}
.p-news-card__img img {
  aspect-ratio: 158/99;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media screen and (min-width: 1024px) {
  .p-news-card__img img {
    aspect-ratio: 340/213;
  }
}

.p-news-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(7px, 0.308rem + 0.55vw, 12px);
}

.p-news-card__title {
  margin-top: 10px;
  font-size: clamp(12px, 0.646rem + 0.44vw, 16px);
  font-weight: 700;
  line-height: 1.5;
}

.p-news-card__excerpt {
  font-size: clamp(12px, 0.698rem + 0.22vw, 14px);
  font-weight: 400;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .p-news-card__excerpt {
    line-height: 1.7;
  }
}

.p-news-card__date {
  font-size: clamp(12px, 0.698rem + 0.22vw, 14px);
  line-height: normal;
}

.p-widget-news-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}

.p-widget-news-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 14px;
}

.p-widget-news-card__img {
  width: 100px;
  height: 100px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.p-widget-news-card__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-widget-news-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
}

.p-widget-news-card__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.p-widget-news-card__data {
  font-size: 12px;
  line-height: normal;
}

.archive-news__inner {
  margin-top: clamp(42px, 1.719rem + 3.87vw, 77px);
  padding-inline: clamp(20px, -4.219rem + 17.5vw, 90px);
  padding-bottom: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 60px;
  max-width: 1092px;
}
@media screen and (min-width: 768px) {
  .archive-news__inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .archive-news__inner {
    gap: 72px;
    padding-bottom: 0px;
    padding-inline: 0;
    margin-left: 98px;
    margin-right: 90px;
  }
}
@media screen and (min-width: 1240px) {
  .archive-news__inner {
    margin-inline: auto;
  }
}

.p-archive-news__main {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-archive-news__main {
    width: 60%;
  }
}
@media screen and (min-width: 1240px) {
  .p-archive-news__main {
    width: calc((100% - 72px) * 720 / 1020);
  }
}

.l-archive-news__title {
  padding-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .l-archive-news__title {
    padding-bottom: 24px;
  }
}

.p-archive-news__title {
  color: #382620;
  font-size: clamp(20px, 1.146rem + 0.44vw, 24px);
  font-weight: 700;
  line-height: normal;
}

.l-pagination__list {
  margin-top: 40px;
}

.p-archive-news__side {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(40px, 0.938rem + 5vw, 60px);
}
@media screen and (min-width: 768px) {
  .p-archive-news__side {
    width: 40%;
  }
}
@media screen and (min-width: 1240px) {
  .p-archive-news__side {
    width: calc((100% - 72px) * 300 / 1020);
  }
}

.p-archive-news__widget {
  background-color: #f8f8f8;
  padding: 20px;
}

.p-widget__head {
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  padding-bottom: 20px;
  position: relative;
}
.p-widget__head::after {
  content: "";
  width: 32px;
  height: 1px;
  background-color: #222222;
  position: absolute;
  bottom: 0;
  left: 0;
}

.p-widget__body {
  margin-top: 20px;
}

.p-widget__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}

.p-widget__links-item {
  color: #382620;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-widget__links-item svg {
  margin-right: 6px;
}
.p-widget__links-item:hover {
  opacity: 0.7;
}

.p-page-fv {
  height: clamp(120px, 2.32rem + 22.1vw, 320px);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-page-fv.p-page-fv--concept {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(/wp-content/themes/OpenCafe/assets/img/concept/concept-fv.webp);
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(/wp-content/themes/OpenCafe/assets/img/concept/concept-fv.webp);
}
.p-page-fv.p-page-fv--menu {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(/wp-content/themes/OpenCafe/assets/img/menu/menu-fv.webp);
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(/wp-content/themes/OpenCafe/assets/img/menu/menu-fv.webp);
}
.p-page-fv.p-page-fv--news {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(/wp-content/themes/OpenCafe/assets/img/news/news-fv.webp);
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(/wp-content/themes/OpenCafe/assets/img/news/news-fv.webp);
}
.p-page-fv.p-page-fv--shop {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(/wp-content/themes/OpenCafe/assets/img/shop/shop-fv.webp);
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(/wp-content/themes/OpenCafe/assets/img/shop/shop-fv.webp);
}
.p-page-fv.p-page-fv--gift {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(/wp-content/themes/OpenCafe/assets/img/gift/gift-fv.webp);
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(/wp-content/themes/OpenCafe/assets/img/gift/gift-fv.webp);
}
.p-page-fv.p-page-fv--contact {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4))), url(/wp-content/themes/OpenCafe/assets/img/contact/contact-fv.webp);
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(/wp-content/themes/OpenCafe/assets/img/contact/contact-fv.webp);
}
.p-page-fv::before, .p-page-fv::after {
  content: "";
  position: absolute;
  z-index: 2;
}
.p-page-fv::before {
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  border: 2px solid #fff;
}
.p-page-fv::after {
  top: 16px;
  right: 16px;
  bottom: 16px;
  left: 16px;
  border: 1px solid #fff;
}

.p-pager {
  display: block;
  position: relative;
  height: 60px;
}

.p-pager__prev {
  position: absolute;
  left: 0;
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-pager__prev:hover {
  opacity: 0.7;
}

.p-pager__link {
  display: block;
  color: #382620;
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  font-weight: 700;
  line-height: 1.7;
}

.p-pager__prev-link svg {
  margin-right: 10px;
}

.p-pager__top {
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border: 1px solid #382620;
  padding-block: clamp(8px, 0.396rem + 0.44vw, 12px);
  padding-inline: clamp(28px, 1.543rem + 0.88vw, 36px);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-pager__top:hover {
  opacity: 0.7;
}

.p-pager__back {
  color: #382620;
  text-align: center;
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  font-weight: 700;
  line-height: 1.7;
}
@media screen and (min-width: 768px) {
  .p-pager__back {
    line-height: normal;
  }
}

.p-pager__prev,
.p-pager__next {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.p-pager__next {
  display: block;
  position: absolute;
  right: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-pager__next:hover {
  opacity: 0.7;
}

.p-pager__next-link svg {
  margin-left: 10px;
}

.p-pagination__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 12px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.p-pagination__item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 16px;
  line-height: normal;
  border: 1px solid #382620;
  background-color: #FFFFFF;
  color: #382620;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p-pagination__item svg {
  fill: currentColor;
}
.p-pagination__item:hover {
  background-color: #382620;
  color: #FFFFFF;
}
.p-pagination__item.current {
  background-color: #382620;
  color: #FFFFFF;
}

.p-products-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 19px;
}

.p-products-card:nth-of-type(1) .p-products-card__body .p-products-card__name {
  font-size: clamp(20px, 1.146rem + 0.44vw, 24px);
  margin-top: 13px;
}
.p-products-card:nth-of-type(1) .p-products-card__body .p-products-card__price {
  font-size: clamp(28px, 1.646rem + 0.44vw, 32px);
}
.p-products-card:nth-of-type(n + 2) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
}
.p-products-card:nth-of-type(n + 2) .p-products-card__body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.p-products-card__img img {
  width: 100%;
}

.p-products-card__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}

.p-products-card__price {
  display: block;
  font-family: "Damion", serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

.p-products-card__button {
  margin-top: 11px;
}

.p-shop__list {
  margin-top: clamp(48px, 2.145rem + 3.65vw, 81px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(60px, 2.17rem + 6.74vw, 121px);
  padding-bottom: 64px;
}
@media screen and (min-width: 768px) {
  .p-shop__list {
    max-width: 725px;
    margin-inline: auto;
  }
}
@media screen and (min-width: 1024px) {
  .p-shop__list {
    padding-bottom: 0;
  }
}

.p-shop-heading {
  margin-inline: clamp(1.25rem, -5.898rem + 30.5vw, 18.5rem);
  margin-bottom: clamp(20px, 1.146rem + 0.44vw, 24px);
}
@media screen and (min-width: 768px) {
  .p-shop-heading {
    margin-left: 20px;
  }
}

.p-shop__access-wrap {
  font-style: normal;
  padding-inline: 20px;
  max-width: 768px;
  margin-inline: auto;
}
.p-shop__access-wrap .p-access__table {
  margin-top: 21px;
}

.p-shop__access-map {
  border: clamp(5px, 0.183rem + 0.55vw, 10px) solid #FFFFFF;
}
.p-shop__access-map iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 325/178;
}
@media screen and (min-width: 768px) {
  .p-shop__access-map iframe {
    aspect-ratio: 668/367;
  }
}
@media screen and (min-width: 1024px) {
  .p-shop__access-map {
    width: 689px;
    height: 387px;
    margin-inline: auto;
  }
}

.p-single-news__inner {
  padding-inline: 20px;
}

.p-entry-content {
  margin-top: clamp(48px, 2.171rem + 3.54vw, 80px);
  margin-inline: auto;
  width: clamp(335px, 11.796rem + 39.01vw, 688px);
  line-height: 2;
}
.p-entry-content img {
  width: 100%;
  aspect-ratio: 688/430;
  -o-object-fit: cover;
     object-fit: cover;
  margin-block: 36px;
}
.p-entry-content h2 {
  margin-top: clamp(75px, 4.118rem + 2.43vw, 97px);
  margin-bottom: clamp(18px, 1.099rem + 0.11vw, 19px);
  font-size: clamp(18px, 0.97rem + 0.66vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  padding-left: clamp(12px, 0.646rem + 0.44vw, 16px);
  border-left: clamp(4px, 0.198rem + 0.22vw, 6px) solid #382620;
}
@media screen and (min-width: 900px) {
  .p-entry-content h2 {
    line-height: normal;
  }
}
.p-entry-content h3,
.p-entry-content h4 {
  margin-top: clamp(54px, 3.323rem + 0.22vw, 56px);
}
.p-entry-content h3 {
  margin-bottom: 20px;
  font-size: clamp(16px, 0.896rem + 0.44vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  padding-bottom: 12px;
  border-bottom: 1px solid #382620;
}
@media screen and (min-width: 900px) {
  .p-entry-content h3 {
    line-height: normal;
  }
}
@media screen and (min-width: 900px) {
  .p-entry-content h3 {
    margin-bottom: 19px;
  }
}
.p-entry-content h4 {
  font-weight: 700;
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  padding-bottom: 14px;
}
.p-entry-content ul {
  margin-top: 28px;
  padding-left: 26px;
}
.p-entry-content li {
  color: #222222;
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  line-height: normal;
  margin-bottom: 8px;
  padding-left: 9px;
  position: relative;
}
.p-entry-content li::before {
  content: "";
  width: 3px;
  height: 3px;
  background-color: #222222;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.p-entry-content li:last-child {
  margin-bottom: 0;
}
.p-entry-content .p-news-card img {
  margin-block: 0;
}

.p-entry-thumbnail img {
  margin-block: 0;
}

.p-entry-title {
  color: #382620;
  font-size: clamp(20px, 1.043rem + 0.88vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 24px;
}

.p-entry-date__wrap {
  margin-top: clamp(25px, 1.174rem + 1.66vw, 40px);
  margin-bottom: 37px;
  color: #382620;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
@media screen and (min-width: 900px) {
  .p-entry-date__wrap {
    margin-bottom: 36px;
  }
}

.p-entry-date {
  padding-right: 20px;
  border-right: 1px solid #382620;
}

.p-entry-category {
  padding-left: 20px;
}

.p-entry-content__text {
  color: #222222;
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  line-height: 2;
}

.p-entry-content__text-lists {
  margin-top: 28px;
  padding-left: 20px;
}

.p-entry-content__text-list {
  color: #222222;
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  line-height: normal;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}
.p-entry-content__text-list::before {
  content: "";
  width: 3px;
  height: 3px;
  background-color: #222222;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.p-entry-content__text-list:last-child {
  margin-bottom: 0;
}

.c-entry-heading-type3 {
  color: #382620;
  font-size: clamp(0.875rem, 0.823rem + 0.22vw, 1rem);
  font-weight: 700;
  line-height: 1.7;
}
@media screen and (min-width: 900px) {
  .c-entry-heading-type3 {
    line-height: normal;
  }
}

.p-entry-content__h4 {
  margin-bottom: clamp(14px, 0.849rem + 0.11vw, 15px);
}

.p-entry-quotation {
  margin-top: 32px;
  background-color: #f8f8f8;
  padding-inline: clamp(24px, 1.086rem + 1.77vw, 40px);
  padding-top: clamp(20px, 0.862rem + 1.66vw, 35px);
  padding-bottom: clamp(25px, 1.174rem + 1.66vw, 40px);
}

.p-entry-quotation__text {
  color: #222222;
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  font-weight: 500;
  line-height: 2;
}

.p-entry-quotation__sub {
  margin-top: 15px;
  font-size: 14px;
  text-align: right;
}

.p-entry-pager {
  margin-top: 32px;
}

.p-entry-relative__wrap {
  margin-top: clamp(100px, 5.732rem + 2.21vw, 120px);
}

.p-entry-relative__title {
  text-align: center;
  color: #382620;
  font-size: clamp(20px, 1.043rem + 0.88vw, 28px);
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 900px) {
  .p-entry-relative__title {
    line-height: 1.4;
  }
}

.p-entry-relative__cards {
  margin-top: clamp(40px, 1.982rem + 2.21vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 19px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}
@media screen and (min-width: 900px) {
  .p-entry-relative__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}
.p-entry-relative__cards .p-news-card .p-news-card__head::before {
  top: 40px;
}
@media screen and (min-width: 900px) {
  .p-entry-relative__cards .p-news-card .p-news-card__head::before {
    top: 33px;
  }
}
@media screen and (min-width: 900px) {
  .p-entry-relative__cards .p-news-card .p-news-card__head .p-news-card__tag-wrap {
    top: 2px;
  }
}

.p-thanks-title {
  margin-top: clamp(48px, 2.223rem + 3.31vw, 78px);
  color: #382620;
  text-align: center;
  font-size: clamp(20px, 1.043rem + 0.88vw, 28px);
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 768px) {
  .p-thanks-title {
    line-height: 1.4;
  }
}

.p-thanks-text {
  color: #382620;
  font-size: clamp(14px, 0.823rem + 0.22vw, 16px);
  line-height: 1.7;
  margin-top: clamp(26px, 1.573rem + 0.22vw, 28px);
  padding-inline: clamp(20px, -5.898rem + 30.5vw, 296px);
  max-width: 1180px;
  margin-inline: auto;
  padding-bottom: 61px;
}
@media screen and (min-width: 768px) {
  .p-thanks-text {
    line-height: normal;
  }
}
@media screen and (min-width: 1024px) {
  .p-thanks-text {
    padding-bottom: 0;
    padding-inline: 245px;
  }
}

.p-top-menu-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 19px;
  margin-top: clamp(20px, 1.146rem + 0.44vw, 24px);
}
@media screen and (min-width: 768px) {
  .p-top-menu-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
  }
}

.p-top-menu-card {
  display: block;
}

.p-top-menu-card__img {
  border: 5px solid #FFFFFF;
}
.p-top-menu-card__img img {
  width: 100%;
}

.p-top-menu-card__name {
  margin-top: clamp(8px, 0.396rem + 0.44vw, 12px);
  display: block;
  font-size: clamp(14px, 0.72rem + 0.66vw, 20px);
  font-weight: 700;
  line-height: normal;
}

.p-top-menu-card__price {
  display: block;
  font-family: "Damion", serif;
  font-size: clamp(24px, 1.293rem + 0.88vw, 32px);
  font-weight: 400;
  line-height: normal;
}

.p-top-menu-head {
  font-size: clamp(20px, 1.146rem + 0.44vw, 24px);
  font-weight: 700;
  line-height: normal;
  border-block: 2px solid #222222;
  padding-block: 5px;
  padding-left: clamp(10px, 0.392rem + 0.99vw, 19px);
  position: relative;
}
.p-top-menu-head::after {
  content: "";
  position: absolute;
  border-block: 1px solid #222222;
  top: 2px;
  left: 0px;
  bottom: 2px;
  right: 0px;
  z-index: 2;
}

.p-main-menu__logo--sp {
  position: fixed;
  top: 10px;
  left: 14px;
  z-index: 100;
  width: 120px;
  height: auto;
  opacity: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (min-width: 1024px) {
  .p-main-menu__logo--sp {
    display: none;
  }
}
.p-main-menu__logo--sp.click-hamburger {
  opacity: 0;
  visibility: hidden;
}

@media screen and (min-width: 1024px) {
  .p-top-hamburger {
    display: none;
  }
}

.p-top-fv__wrap {
  width: 100vw;
  height: 667px;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .p-top-fv__wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    height: 735px;
  }
}
.p-top-fv__wrap::before {
  content: "";
  width: 70vw;
  height: 60px;
  background-color: #EAE0D5;
  position: absolute;
  bottom: -60px;
  right: 0;
}

.p-top-fv {
  width: 100vw;
  height: 667px;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .p-top-fv {
    width: calc(100vw - 200px);
    height: 735px;
  }
}

.fv-swiper {
  position: relative;
  height: 100%;
}

.fv-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}

.swiper-slide-active {
  opacity: 1;
  z-index: 2;
}

.fv-slide__img {
  display: block;
  width: 100%;
  height: 667px;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  .fv-slide__img {
    height: 735px;
  }
}
.fv-slide__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform 6s ease-in-out;
  transition: -webkit-transform 6s ease-in-out;
  transition: transform 6s ease-in-out;
  transition: transform 6s ease-in-out, -webkit-transform 6s ease-in-out;
}

.swiper-slide-active .fv-slide__img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.fv-pagination {
  text-align: left;
}
.fv-pagination .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 1;
}
.fv-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #d59b71;
}
.fv-pagination .swiper-pagination-bullet:nth-of-type(1) {
  margin-left: 20px;
}
.fv-pagination .swiper-pagination-bullet:nth-of-type(n + 2) {
  margin-left: 16px;
}

.p-top-fv__text-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  top: clamp(124px, 4.768rem + 12.72vw, 174px);
  left: 20px;
  z-index: 30;
}
@media screen and (min-width: 768px) {
  .p-top-fv__text-wrap {
    top: auto;
    bottom: 61px;
    left: 27px;
  }
}

.p-top-fv__text {
  color: #FFFFFF;
  font-size: clamp(16px, 0.896rem + 0.44vw, 20px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: clamp(2.24px, 0.125rem + 0.06vw, 2.8px);
}

.p-top-fv-news__wrap {
  position: absolute;
  bottom: 33px;
  right: 20px;
  z-index: 30;
}
@media screen and (min-width: 900px) {
  .p-top-fv-news__wrap {
    bottom: 22px;
  }
}
.p-top-fv-news__wrap::before {
  content: "";
  background: url(/wp-content/themes/OpenCafe/assets/img/treat/top-balloon-pickup.webp) no-repeat center center/cover;
  width: clamp(120px, 6.464rem + 4.42vw, 160px);
  height: clamp(71px, 3.816rem + 2.65vw, 95px);
  position: absolute;
  right: 0;
  top: -37px;
  z-index: 1;
}
@media screen and (min-width: 900px) {
  .p-top-fv-news__wrap::before {
    right: 4px;
    top: -69px;
  }
}
.p-top-fv-news__wrap::after {
  content: "";
  position: absolute;
  top: 39px;
  left: -8px;
  width: 0px;
  height: 0px;
  display: block;
  border-top: 8px solid #aaa;
  border-left: 8px solid transparent;
}

.p-top-fv-news {
  width: clamp(335px, 19.565rem + 5.86vw, 388px);
  padding: clamp(12px, 0.646rem + 0.44vw, 16px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 16px;
  background-color: #FFFFFF;
  opacity: 0.85;
  position: relative;
  overflow: visible;
  cursor: pointer;
}

.p-top-fv-news__treat-img img {
  width: 100%;
}

.p-top-fv-news__head {
  position: relative;
}

.p-top-fv-news__tag-wrap {
  padding: 4px 10px;
  position: absolute;
  top: 8px;
  left: -8px;
  z-index: 1;
  background-color: #222222;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%);
}

.p-top-fv-news__tag {
  font-size: clamp(12px, 0.646rem + 0.44vw, 16px);
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1;
  background-color: #222222;
  position: relative;
  top: -2px;
}

.p-top-fv-news__img {
  width: 100px;
  height: 100px;
}
@media screen and (min-width: 768px) {
  .p-top-fv-news__img {
    width: 120px;
    height: 120px;
  }
}
.p-top-fv-news__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-fv-news__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(7px, 0.308rem + 0.55vw, 12px);
  padding-top: 10px;
}
@media screen and (min-width: 900px) {
  .p-top-fv-news__body {
    padding-top: 0;
  }
}

.p-top-fv-news__title {
  color: #222222;
  font-size: clamp(12px, 0.698rem + 0.22vw, 14px);
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .p-top-fv-news__title {
    line-height: 1.7;
  }
}

.p-top-fv-news__date {
  color: #222222;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.p-top-concept__bg-coffee {
  width: clamp(145px, 5.152rem + 16.69vw, 296px);
  height: auto;
  position: absolute;
  top: -20px;
  right: calc(clamp(17px, 0.467rem + 2.54vw, 40px) * -1);
}
@media screen and (min-width: 900px) {
  .p-top-concept__bg-coffee {
    top: 16px;
  }
}

.p-top-concept {
  padding-top: clamp(120px, 4.936rem + 10.94vw, 219px);
  padding-bottom: clamp(193px, 8.256rem + 16.24vw, 340px);
  position: relative;
  z-index: 30;
  max-width: 1280px;
  margin-inline: auto;
}
.p-top-concept::before {
  content: "";
  width: clamp(355px, 0.563rem + 92.27vw, 1190px);
  height: clamp(100px, 1.07rem + 22.1vw, 300px);
  background-color: #EAE0D5;
  position: absolute;
  bottom: clamp(120px, 4.392rem + 13.26vw, 240px);
  left: 0;
  z-index: -1;
}

@media screen and (min-width: 900px) {
  .p-top-concept__inner {
    padding-right: 131px;
  }
}

.p-top-concept__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 87px;
}
@media screen and (min-width: 900px) {
  .p-top-concept__wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 0;
  }
}

.p-top-concept__img {
  width: 84%;
  height: auto;
}
@media screen and (min-width: 500px) {
  .p-top-concept__img {
    width: 60%;
  }
}
@media screen and (min-width: 900px) {
  .p-top-concept__img {
    width: 52.1739130435%;
  }
}
.p-top-concept__img img {
  width: 100%;
}

.p-top-concept__contents {
  padding-inline: clamp(20px, -0.563rem + 7.73vw, 90px);
}
@media screen and (min-width: 900px) {
  .p-top-concept__contents {
    padding-inline: 0;
    padding-top: 21px;
    width: 40.8695652174%;
  }
}

.p-top-concept__lead {
  margin-top: clamp(34px, 1.555rem + 2.43vw, 56px);
  font-size: clamp(20px, 1.043rem + 0.88vw, 28px);
  font-weight: 700;
  line-height: 2.1;
}
@media screen and (min-width: 900px) {
  .p-top-concept__lead {
    font-size: clamp(24px, 0.908rem + 1.05vw, 28px);
  }
}

.p-top-concept__text1,
.p-top-concept__text2 {
  font-size: 14px;
  line-height: 2;
}

.p-top-concept__text1 {
  margin-top: clamp(31px, 1.497rem + 1.88vw, 48px);
}

.p-top-concept__text2 {
  padding-top: 29px;
}

.p-top-concept__button {
  text-align: center;
  margin-top: 51px;
}
.p-top-concept__button .c-button-rightdown {
  width: 280px;
  padding-inline: 20px;
}
@media screen and (min-width: 900px) {
  .p-top-concept__button .c-button-rightdown {
    margin-left: 0;
  }
}
@media screen and (min-width: 900px) {
  .p-top-concept__button {
    margin-top: 54px;
    margin-left: 0;
  }
}

.p-top-concept__bg-leave {
  width: clamp(119px, 5.314rem + 9.06vw, 201px);
  position: absolute;
  bottom: 46px;
  right: -33px;
}
@media screen and (min-width: 1024px) {
  .p-top-concept__bg-leave {
    bottom: -100px;
  }
}

.p-top-lunch {
  background-color: #EAE0D5;
}

.p-top-lunch__content {
  padding-top: clamp(56px, 2.853rem + 2.76vw, 81px);
  padding-bottom: clamp(63px, 3.497rem + 1.88vw, 80px);
  position: relative;
  max-width: 1280px;
  margin-inline: auto;
}
.p-top-lunch__content::after {
  content: "";
  position: absolute;
  bottom: calc(clamp(88px, 2.263rem + 13.81vw, 213px) * -1);
  left: calc(clamp(12px, 0.232rem + 2.21vw, 32px) * -1);
  background: url(/wp-content/themes/OpenCafe/assets/img/treat/treat-leave02.webp) no-repeat center center/contain;
  width: clamp(128px, 4.426rem + 15.25vw, 266px);
  aspect-ratio: 266/293;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.p-top-lunch-treat {
  width: clamp(200px, 9.91rem + 11.05vw, 300px);
  position: absolute;
  top: -45px;
  right: -12px;
}
@media screen and (min-width: 1024px) {
  .p-top-lunch-treat {
    top: 159px;
    right: 29px;
    z-index: 1;
  }
}

.p-top-lunch__inner {
  padding-inline: clamp(0px, -1.295rem + 5.52vw, 50px);
}

.p-top-lunch__wrap {
  background-color: #fff;
  padding-inline: clamp(20px, 0.732rem + 2.21vw, 40px);
  margin-top: 62px;
  padding-top: clamp(39px, 1.894rem + 2.32vw, 60px);
  padding-bottom: clamp(20px, 0.706rem + 2.32vw, 41px);
  position: relative;
}
@media screen and (min-width: 900px) {
  .p-top-lunch__wrap {
    margin-top: 67px;
  }
}

.p-top-lunch__head {
  width: clamp(290px, 16.519rem + 6.85vw, 352px);
  position: absolute;
  top: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.p-top-lunch__head img {
  width: 100%;
  height: auto;
}

.p-top-lunch__menu-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 20px;
  -webkit-column-gap: 22px;
     -moz-column-gap: 22px;
          column-gap: 22px;
}
@media screen and (min-width: 1024px) {
  .p-top-lunch__menu-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 20px;
  }
}

@media screen and (min-width: 1024px) {
  .p-top-lunch__menu-card:nth-of-type(even) {
    margin-top: 41px;
  }
}

.lunch-card__img img {
  width: 100%;
  height: auto;
}

.lunch-card__body {
  margin-top: clamp(6px, 0.194rem + 0.77vw, 13px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(6px, 0.194rem + 0.77vw, 13px);
}

.lunch-card__number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  text-align: center;
  font-family: "Patua One", serif;
  font-size: clamp(19px, 0.851rem + 1.44vw, 32px);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: clamp(2.28px, 0.102rem + 0.17vw, 3.84px);
  background-color: #222222;
  width: clamp(24px, 0.853rem + 2.76vw, 49px);
  height: clamp(24px, 0.853rem + 2.76vw, 49px);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.lunch-card__name {
  font-size: clamp(14px, 0.771rem + 0.44vw, 18px);
  font-weight: 700;
  line-height: normal;
}

.p-top-lunch__set-wrap {
  margin-top: clamp(18px, 0.348rem + 3.31vw, 48px);
  background-color: #f7f6f4;
  padding-top: 25px;
  padding-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 1024px) {
  .p-top-lunch__set-wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 40px;
    padding-inline: clamp(10px, -14.375rem + 23.44vw, 70px);
  }
}

.p-top-lunch__set-img {
  width: clamp(335px, 11.485rem + 40.33vw, 700px);
}
.p-top-lunch__set-img img {
  width: 100%;
}

.p-top-lunch__set-contents {
  text-align: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.p-top-lunch__set-title {
  text-align: center;
  font-size: clamp(16px, 0.896rem + 0.44vw, 20px);
  font-weight: 700;
  line-height: normal;
}
@media screen and (min-width: 900px) {
  .p-top-lunch__set-title {
    text-align: right;
  }
}

.p-top-lunch__set-price {
  display: inline-block;
  font-family: "Damion", serif;
  font-size: clamp(40px, 1.982rem + 2.21vw, 60px);
  font-weight: 400;
  line-height: normal;
  padding-inline: 6px;
  padding-bottom: 4px;
  position: relative;
}
@media screen and (min-width: 900px) {
  .p-top-lunch__set-price {
    white-space: nowrap;
  }
}
.p-top-lunch__set-price::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px; /* ドットの高さ（4pxの線の高さ） */
  background: radial-gradient(circle, #000 2px, transparent 2px);
  background-size: 12px 4px; /* 横方向12pxごとに繰り返し、縦方向4px */
  position: absolute;
  bottom: 0;
  left: 0;
}

.p-top-lunch__set-time {
  font-size: clamp(12px, 0.698rem + 0.22vw, 14px);
  font-weight: 700;
  line-height: normal;
  padding-top: 11px;
}
@media screen and (min-width: 900px) {
  .p-top-lunch__set-time {
    padding-top: 9px;
    text-align: right;
  }
}

.p-top-menu {
  padding-top: clamp(119px, 6.402rem + 4.42vw, 159px);
  padding-bottom: clamp(192px, 10.602rem + 5.97vw, 246px);
  position: relative;
  overflow-x: hidden;
  z-index: 0;
}
.p-top-menu::before {
  content: "";
  width: clamp(274px, -2.298rem + 82.87vw, 1024px);
  background-color: #EAE0D5;
  position: absolute;
  top: clamp(368px, 18.468rem + 19.34vw, 543px);
  bottom: clamp(120px, 6.464rem + 4.42vw, 160px);
  right: 0;
  z-index: 0;
}
.p-top-menu::after {
  content: "";
  background: url(/wp-content/themes/OpenCafe/assets/img/treat/treat-coffee02.webp) no-repeat center center/contain;
  width: clamp(168.8px, 4.821rem + 24.44vw, 390px);
  aspect-ratio: 390/330;
  position: absolute;
  bottom: clamp(26.13px, 1.067rem + 2.42vw, 48px);
  right: calc(clamp(2.488rem, 0.049rem + 10.41vw, 8.375rem) * -1);
}
@media screen and (min-width: 1440px) {
  .p-top-menu::after {
    right: 0;
    left: calc(60% + 100px);
  }
}

.p-top-menu__contents-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(40px, 0.946rem + 6.63vw, 100px);
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin-inline: auto;
}
@media screen and (min-width: 900px) {
  .p-top-menu__contents-wrap {
    gap: 106px;
  }
}

.p-top-menu__contents:nth-of-type(1) {
  margin-top: clamp(45px, 2.605rem + 0.88vw, 53px);
}

.p-top-menu__drink-contents {
  margin-top: clamp(20px, 1.121rem + 0.55vw, 25px);
  padding-inline: 21px;
}
@media screen and (min-width: 1024px) {
  .p-top-menu__drink-contents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-inline: 5px;
  }
}

.p-top-menu__drink-img {
  display: none;
}
@media screen and (min-width: 1024px) {
  .p-top-menu__drink-img {
    display: block;
    width: 31.1818181818%;
  }
  .p-top-menu__drink-img img {
    width: 100%;
  }
}

.p-top-menu__drink-content-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}
@media screen and (min-width: 1024px) {
  .p-top-menu__drink-content-wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 62.4545454545%;
    margin-right: 8px;
  }
}

@media screen and (min-width: 1024px) {
  .p-top-menu__drink-content {
    width: 100%;
    max-width: 197px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}

.p-top-menu__drink-head {
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  padding-bottom: clamp(10px, 0.573rem + 0.22vw, 12px);
  margin-bottom: clamp(10px, 0.573rem + 0.22vw, 12px);
  border-bottom: 1px solid #222222;
}

.p-top-menu__drink-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}

.p-top-menu__drink-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.p-top-menu__drink-name {
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}

.p-top-menu__drink-price {
  font-family: "Damion", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}

.p-top-menu__button {
  margin-top: clamp(43px, 2.403rem + 1.22vw, 54px);
  text-align: center;
}
.p-top-menu__button .c-button-rightdown {
  width: 280px;
  padding-inline: 20px;
}

.p-top-gallery {
  padding-top: clamp(60px, 3.232rem + 2.21vw, 80px);
  padding-bottom: calc(100px - 20 * (100vw - 375px) / 905);
  background-color: #EAE0D5;
  position: relative;
}
.p-top-gallery svg {
  width: clamp(12.5rem, 10.797rem + 7.27vw, 16.609rem);
  height: auto;
  position: absolute;
  top: -57px;
  right: calc(50% + 7px);
}
@media screen and (min-width: 900px) {
  .p-top-gallery svg {
    top: -20.48px;
    right: calc(50% + 77px);
  }
}

.p-top-gallery__items {
  max-width: 1280px;
  margin-inline: auto;
  width: 100%;
  margin-top: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(19px, 1.058rem + 0.55vw, 24px);
}

.sb_instagram_header {
  display: none;
}

.sbi_follow_btn,
.sbi_custom {
  display: none !important;
}

.sbi_load {
  display: none !important;
}

.sbi_load_btn {
  display: none !important;
}

#sbi_images {
  gap: clamp(19px, 1.058rem + 0.55vw, 24px) !important;
  padding-top: clamp(3px, -0.046rem + 0.99vw, 12px) !important;
}

.p-top-gallery__button {
  margin-top: clamp(11px, 0.377rem + 1.33vw, 23px);
  text-align: center;
}
.p-top-gallery__button .c-button-rightdown {
  width: 280px;
  padding-inline: 20px;
}
@media screen and (min-width: 900px) {
  .p-top-gallery__button .c-button-rightdown {
    padding-inline: 60px;
  }
}

.p-top-news {
  padding-top: clamp(116px, 7.146rem + 0.44vw, 120px);
  padding-bottom: 61px;
  position: relative;
}
@media screen and (min-width: 900px) {
  .p-top-news {
    padding-bottom: 0;
  }
}
.p-top-news::before {
  content: "";
  background: url(/wp-content/themes/OpenCafe/assets/img/treat/treat-plate.webp) no-repeat center center/contain;
  position: absolute;
  width: clamp(204.4px, 8.901rem + 16.53vw, 354px);
  aspect-ratio: 354/320;
  top: calc(clamp(10px, -2.845rem + 14.81vw, 144px) * -1);
  left: calc(clamp(3.25rem, 2.344rem + 3.87vw, 5.438rem) * -1);
}
@media screen and (min-width: 1440px) {
  .p-top-news::before {
    left: 0;
  }
}

.p-top-news__wrap {
  max-width: 1280px;
  margin-inline: auto;
  margin-top: clamp(42px, 2.366rem + 1.1vw, 48px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(22px, 0.987rem + 1.66vw, 37px);
}
@media screen and (min-width: 768px) {
  .p-top-news__wrap {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.p-top-news__top .p-news-card {
  opacity: 1 !important;
}
.p-top-news__top .p-news-card .p-news-card__head .p-news-card__tag-wrap {
  top: 20px;
  z-index: 1;
}
.p-top-news__top .p-news-card .p-news-card__head .p-news-card__tag-wrap .p-news-card__tag {
  font-size: clamp(12px, 0.646rem + 0.44vw, 16px);
  padding-inline: clamp(4px, 0.521rem + 0.44vw, 14px);
}
.p-top-news__top .p-news-card .p-news-card__head .p-news-card__img {
  width: 100% !important;
  aspect-ratio: 335/210;
  overflow: hidden;
}
.p-top-news__top .p-news-card .p-news-card__head .p-news-card__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
.p-top-news__top .p-news-card .p-news-card__head::before {
  content: "";
  position: absolute;
  top: 46px;
  left: -8px;
  width: 0px;
  height: 0px;
  display: block;
  border-top: 8px solid #aaa;
  border-left: 8px solid transparent;
}
.p-top-news__top .p-news-card .p-news-card__body .p-news-card__title {
  font-size: clamp(14px, 0.72rem + 0.66vw, 20px);
  margin-top: 20px;
}
.p-top-news__top .p-news-card:hover .p-news-card__img img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
@media screen and (min-width: 768px) {
  .p-top-news__top {
    width: calc(48% - clamp(22px, 0.987rem + 1.66vw, 37px) / 2);
  }
}

.p-top-news__second-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: clamp(19px, 0.566rem + 2.65vw, 43px);
     -moz-column-gap: clamp(19px, 0.566rem + 2.65vw, 43px);
          column-gap: clamp(19px, 0.566rem + 2.65vw, 43px);
  row-gap: clamp(19px, 0.851rem + 1.44vw, 32px);
}
@media screen and (min-width: 768px) {
  .p-top-news__second-wrap {
    width: calc(52% - clamp(22px, 0.987rem + 1.66vw, 37px) / 2);
  }
}
.p-top-news__second-wrap .p-news-card {
  width: calc(50% - clamp(19px, 0.566rem + 2.65vw, 43px) / 2);
  opacity: 1 !important;
}
.p-top-news__second-wrap .p-news-card .p-news-card__head {
  position: relative;
}
.p-top-news__second-wrap .p-news-card .p-news-card__head .p-news-card__img {
  width: 100%;
  aspect-ratio: 158/98.75;
  overflow: hidden;
}
.p-top-news__second-wrap .p-news-card .p-news-card__head .p-news-card__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
.p-top-news__second-wrap .p-news-card .p-news-card__head .p-news-card__tag-wrap {
  top: 9px;
  z-index: 1;
}
.p-top-news__second-wrap .p-news-card .p-news-card__head::before {
  content: "";
  position: absolute;
  top: 34px;
  left: -8px;
  width: 0px;
  height: 0px;
  display: block;
  border-top: 8px solid #aaa;
  border-left: 8px solid transparent;
}
.p-top-news__second-wrap .p-news-card:hover .p-news-card__img img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.p-top-news__button {
  padding-top: clamp(33px, 1.57rem + 2.1vw, 56px);
  text-align: center;
}
.p-top-news__button .c-button-rightdown {
  width: 280px;
  padding-inline: 20px;
}

.u-br-xs {
  display: none;
}
@media screen and (max-width: 360px) {
  .u-br-xs {
    display: inline;
  }
}

.u-br-sp {
  display: none;
}
@media screen and (max-width: 375px) {
  .u-br-sp {
    display: inline;
  }
}

.u-br-sm {
  display: inline;
}
@media screen and (min-width: 500px) {
  .u-br-sm {
    display: inline;
  }
}

.u-br-tab {
  display: inline;
}
@media screen and (min-width: 768px) {
  .u-br-tab {
    display: none;
  }
}

.u-br-md {
  display: inline;
}
@media screen and (min-width: 900px) {
  .u-br-md {
    display: none;
  }
}

.u-br-pc {
  display: inline;
}
@media screen and (min-width: 1024px) {
  .u-br-pc {
    display: none;
  }
}

.u-br-lg {
  display: inline;
}
@media screen and (min-width: 1240px) {
  .u-br-lg {
    display: none;
  }
}

.u-br-xl {
  display: inline;
}
@media screen and (min-width: 1440px) {
  .u-br-xl {
    display: none;
  }
}