/* --------------------
common
-------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #fbfaf5;
  color: #333;
  font-family: system-ui, "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.7;
  position: relative;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ul {
  list-style-type: none;
}

a {
  color: #333;
  text-decoration: none;
}

/* --------------------
loading
-------------------- */

/* Unnecessary */

/*
#loading
{
position: fixed;
z-index: 9998;
top: 0;
right: 0;
display: flex;
width: 100%;
height: 100%;
background: #dedfcd;
}
*/

/* --------------------
header
-------------------- */

.header__wrapper {
  display: block;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

.header__wrapper::after {
  background: #f7f7f3;
  content: "";
  display: block;
  height: 0;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.header__inner {
  padding-top: 0;
}

.header__logo {
  animation: roll 0.5s linear 1;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 6vw;
  transition: 1.5s ease;
  width: 35vw;
  z-index: 1;
}

@keyframes roll {
  from {
    transform: perspective(500px) rotateY(0deg);
  }

  50% {
    transform: perspective(500px) rotateY(90deg);
  }

  50% {
    transform: perspective(500px) rotateY(-90deg);
  }

  to {
    transform: perspective(500px) rotateY(0deg);
  }
}

.scroll .header__logo {
  opacity: 0;
  transition: 1s;
  transform: rotateY(0deg);
}

.header__logo:hover {
  transform: rotateY(180deg);
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .header__wrapper {
    width: 30vw;
  }

  .header__inner {
    padding-top: 30px;
  }

  .header__logo {
    margin-bottom: 30px;
    top: 0;
    width: 20vw;
  }
}

/* --------------------
hamburger
-------------------- */

.hamburger {
  align-items: center;
  background-color: #fbfaf5;
  border: 0;
  cursor: pointer;
  display: flex;
  height: 50px;
  justify-content: center;
  position: absolute;
  right: 3vw;
  top: 3vw;
  width: 50px;
  z-index: 2;
}

.hamburger__line {
  background-color: #000;
  height: 2px;
  position: relative;
  width: 25px;
}

.hamburger__line::before,
.hamburger__line::after {
  background-color: #000;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 25px;
}

.hamburger__line::before {
  top: -8px;
}

.hamburger__line::after {
  bottom: -8px;
}

.hamburger[aria-expanded="true"] .hamburger__line {
  background: transparent;
}

.hamburger[aria-expanded="true"] .hamburger__line::before {
  top: 0;
  transform: rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger__line::after {
  bottom: 0;
  transform: rotate(-45deg);
}

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

/* --------------------
gnav
-------------------- */

.gnav {
  background-color: #fbfaf5;
  display: none;
  height: 100vh;
  padding-top: 40vw;
  position: fixed;
  top: 0;
  width: 100%;
}

.gnav__list {
  border-bottom: 1px dashed #4d4d4d;
  border-top: 1px dashed #4d4d4d;
  display: block;
  margin: 0 auto;
  width: 60%;
}

.gnav__item {
  cursor: pointer;
  list-style-type: none;
  margin-bottom: 0.5em;
}

.gnav__link {
  display: block;
  font-size: 2rem;
  letter-spacing: 0.1em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .gnav {
    background-color: transparent;
    display: block;
    padding-top: 0;
    position: relative;
  }
}

/* --------------------
hero
-------------------- */

.hero {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
  margin-top: 22vw;
  padding: 0 6vw;
}

.hero__featured img {
  border: 0;
  border-radius: 20px;
  height: auto;
  max-width: 100%;
  vertical-align: top;
  width: 100%;
}

.hero__body {
  margin-top: -59px;
  z-index: 1;
}

.hero__title {
  background-color: #fff;
  color: #333;
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  padding-left: 0;
}

.hero__text {
  background-color: rgb(255 255 255 / 60%);
  font-size: 2rem;
  font-weight: inherit;
  letter-spacing: 0.1em;
  margin-top: 20px;
  padding-bottom: 0;
  padding-left: 0;
  padding-top: 0;
  text-align: justify;
  word-wrap: break-word;
}

@media screen and (min-width: 768px) {
  .hero {
    margin-top: 9vw;
    padding-left: 30vw;
    padding-right: 3vw;
  }

  .hero__body {
    margin-left: auto;
    margin-top: -20vw;
    width: 50%;
  }

  .hero__title {
    padding-left: 0.5em;
  }

  .hero__text {
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-top: 0.5em;
  }
}

/* --------------------
notice
-------------------- */

.notice {
  background-color: #e6e3c5;
  display: block;
  padding: 50px 6vw 80px;
  position: relative;
}

.notice__title {
  color: #333;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.notice__card {
  background-color: #fff;
  border-radius: 1.5rem;
  padding: 2rem 1rem;
}

.notice__card > p{
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: justify;
}

.notice__unit {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding: 1.9rem;
  padding: 2em 1em;
}

.notice__tag {
  align-items: center;
  background-color: #bbc8e6;
  border-radius: 1rem;
  color: #333;
  display: flex;
  font-size: 1.9rem;
  font-weight: 500;
  height: 1.9rem;
  padding: 0 0.9rem;
  letter-spacing: 0.1em;
}

.notice__date {
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  margin-left: 0.2em;
}

@media screen and (min-width: 768px) {
  .notice__date {
    font-size: 1.9rem;
  }
}

.notice__text {
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin-top: 0.5em;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .notice {
    padding: 50px 3vw 80px 30vw;
  }
}

/* --------------------
greeting
-------------------- */

.greeting {
  display: block;
  padding-bottom: 80px;
  padding-top: 50px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .greeting {
    padding: 50px 0 80px 30vw;
  }
}

.greeting__title {
  color: #333;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  padding-left: 6vw;
  padding-right: 6vw;
}

@media screen and (min-width: 768px) {
  .greeting__title {
    padding-left: 0;
    padding-right: 3vw;
  }
}

.greeting__body {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.7;
  padding-left: 6vw;
  padding-right: 6vw;
  text-align: justify;
}

@media screen and (min-width: 768px) {
  .greeting__body {
    padding-left: 0;
    padding-right: 3vw;
  }
}

.greeting__photo {
  margin-top: 50px;
  overflow: hidden;
  padding-left: 6vw;
  text-align: right;
  width: 100%;
}

.greeting__photo img {
  border-bottom-left-radius: 20px;
  border-top-left-radius: 20px;
  height: auto;
  max-width: 720px;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .greeting__photo img {
    padding-left: 0;
  }
}

/* --------------------
product
-------------------- */

.product {
  background-color: #e6e3c5;
  display: block;
  padding-bottom: 80px;
  padding-top: 50px;
  position: relative;
}

.product__title {
  color: #333;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  padding-left: 6vw;
  padding-right: 6vw;
}

@media screen and (min-width: 768px) {
  .product__title {
    padding-left: 0;
  }
}

.product__list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}

.product__item {
  width: 50%;
}

.product__item:nth-child(2),
.product__item:nth-child(3) {
  backdrop-filter: blur(10px);
  background-color: rgb(255 255 255 / 30%);
}

.product__inner {
  height: 100%;
  padding: 30px 10px;
}

.product__title-third {
  font-family: "Noto Serif JP", serif;
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  text-align: center;
}

.product__fig {
  display: block;
  margin-bottom: 30px;
  overflow: hidden;
}

.product__fig img {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
  transition: 1.5s;
  width: 100%;
}

.product__inner:hover .product__fig img {
  transform: scale(1.1);
}

.product__details {
  align-items: center;
  border: 1px solid #212121;
  display: flex;
  font-size: 1.9rem;
  height: 60px;
  justify-content: center;
  letter-spacing: 0.1em;
  overflow: hidden;
  position: relative;
}

.product__details::after {
  background: linear-gradient(to bottom right, rgb(255 255 255 / 0%) 50%, #212121 50.5%) no-repeat top left/100% 100%;
  bottom: 0;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  right: 0;
  width: 10px;
}

@media screen and (min-width: 768px) {
  .product {
    padding-bottom: 80px;
    padding-left: 30vw;
    padding-top: 50px;
  }

  .product__list {
    display: flex;
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 1200px) {
  .product__item {
    width: calc(50% / 2);
  }

  .product__item:nth-child(2) {
    backdrop-filter: blur(0);
    background-color: transparent;
  }

  .product__item:nth-child(odd) {
    backdrop-filter: blur(10px);
    background-color: rgb(255 255 255 / 30%);
  }
}

/* --------------------
calendar
-------------------- */

.calendar {
  display: block;
  padding: 50px 6vw 80px;
  position: relative;
}

.calendar__title {
  color: #333;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

@media screen and (min-width: 768px) {
  .calendar {
    padding-left: 30vw;
    padding-right: 3vw;
  }
}

/* --------------------
introduction
-------------------- */

.introduction {
  display: block;
  padding: 50px 6vw 80px;
  position: relative;
}

.introduction__title {
  color: #333;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.introduction__block {
  background-color: #fff;
  border-radius: 20px;
  padding: 3.7vw 1vw;
}

.introduction__table {
  align-items: flex-start;
  border-top: 1px solid #333;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  padding: 1.7vw 0;
}

.introduction__table:last-child {
  border-bottom: 1px solid #333;
}

.introduction__tableheader {
  color: #333;
  font-size: 2rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  width: 100%;
}

.introduction__tabledata {
  color: #333;
  font-size: 2rem;
  letter-spacing: 0.1em;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .introduction {
    padding-left: 30vw;
    padding-right: 3vw;
  }
}

/* --------------------
privacy
-------------------- */

.privacy {
  display: block;
  padding: 50px 6vw 80px;
  position: relative;
}

.privacy__title {
  color: #333;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.privacy__body {
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
  text-align: justify;
}

.privacy__block {
  background-color: #fff;
  border-radius: 20px;
  padding: 3.7vw 1vw;
}

.privacy__table {
  align-items: flex-start;
  border-top: 1px solid #333;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  padding: 1.7vw 0;
}

.privacy__table:last-child {
  border-bottom: 1px solid #333;
}

.privacy__tableheader {
  color: #333;
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
  width: 100%;
}

.privacy__tabledata {
  color: #333;
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
  width: 100%;
}

.privacy__list {
  padding-left: 2em;
}

@media screen and (min-width: 768px) {
  .privacy {
    padding-left: 30vw;
    padding-right: 3vw;
  }
}

/* --------------------
footer
-------------------- */

.footer {
  padding: 0 6vw 8vw;
}

.footer * {
  text-align: center;
}

.footer:last-child {
  margin-bottom: 0;
}

.footer__link {
  display: block;
  height: auto;
  margin-bottom: 6vw;
  margin-left: auto;
  margin-right: auto;
  width: 25vw;
}

.footer__logo {
  height: auto;
  width: auto;
}

.footer small {
  font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
  .footer {
    padding: 80px 0 80px 30vw;
  }

  .footer__link {
    width: 15vw;
  }
}

/* --------------------
backdecoration
-------------------- */

.backdecoration {
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -99;
}

.backdecoration *[class*="layer"] {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.1s cubic-bezier(0.3, 0.85, 0.35, 1);
}

.backdecoration *[class*="item"] {
  border-radius: 300px;
  display: block;
  position: absolute;
}

.backdecoration__item_1 {
  background-color: #aeced9;
  height: 98px;
  opacity: 0.2;
  right: -50px;
  top: 610px;
  width: 140px;
}

.backdecoration__item_2 {
  background-color: #ffd4dd;
  height: 127px;
  left: -70px;
  opacity: 0.7;
  top: 1420px;
  width: 180px;
}

.backdecoration__item_3 {
  background-color: #009188;
  height: 127px;
  left: -60px;
  opacity: 0.7;
  top: 3030px;
  width: 180px;
}

.backdecoration__item_4 {
  background-color: #094f6a;
  height: 98px;
  opacity: 0.2;
  right: -90px;
  top: 640px;
  width: 140px;
}

.backdecoration__item_5 {
  background-color: #9ca16d;
  height: 134px;
  left: 10px;
  opacity: 0.7;
  top: 1450px;
  width: 190px;
}

.backdecoration__item_6 {
  background-color: #e74237;
  height: 106px;
  left: 0;
  opacity: 0.7;
  top: 3040px;
  width: 150px;
}

.backdecoration__item_7 {
  background-color: #046365;
  height: 91px;
  left: -60px;
  opacity: 0.7;
  top: 1470px;
  width: 130px;
}

.backdecoration__item_8 {
  background-color: #b5afd8;
  height: 134px;
  opacity: 0.7;
  right: -40px;
  top: 2280px;
  width: 190px;
}

.backdecoration__item_9 {
  background-color: #2a275c;
  height: 141px;
  left: -40px;
  opacity: 0.6;
  top: 3040px;
  width: 200px;
}

/* --------------------
menu
-------------------- */

.title__wrap {
  background: url("../img/IMGmenu-heading-1-min.jpg") no-repeat center center / cover;
  height: 250px;
  margin-top: 20vw;
  position: relative;
  width: 100%;
}

.title__inner {
  display: inline-block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
  .title__wrap {
    margin-top: 0;
  }

  .title__inner {
    padding-left: 30vw;
  }
}

.title__heading--one {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: title-fade;
  color: #fff;
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

@keyframes title-fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* breadcrumb */

@media screen and (min-width: 768px) {
  .breadcrumb {
    padding-left: 30vw;
  }
}

.breadcrumb__list {
  align-items: center;
  display: flex;
  height: 45px;
  list-style-type: none;
  font-size: 1.6rem;
  margin-bottom: 1em;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: ">";
  margin-left: 0.3em;
  margin-right: 0.3em;
}

.breadcrumb__item a {
  color: #333;
  letter-spacing: 0.1em;
  text-decoration: none;
}

/* recommend */

.recommend {
  padding-left: 3vw;
  padding-right: 3vw;
}

@media screen and (min-width: 768px) {
  .recommend {
    padding-left: 30vw;
    padding-right: 0;
  }
}

.recommend__wrapper {
  display: flex;
  margin-top: 50px;
  margin-bottom: 80px;
}

.recommend .recommend__left {
  flex: 7;
  overflow-x: scroll;
}

.recommend .recommend__right {
  flex: 3;
  display: flex;
  writing-mode: vertical-rl;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.recommend__title {
  font-size: 3rem;
  font-weight: 400;
  font-family: "Noto Serif JP", serif;
}

.recommend__text {
  font-size: 2rem;
}

/* scrollingcarousel */

.scrollingcarousel {
  overflow-x: scroll;
  padding-bottom: 1em;
}

.scrollingcarousel__list {
  display: flex;
  list-style-type: none;
  transform: translateX(0);
  transition-duration: 0ms;
}

.scrollingcarousel__item {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.scrollingcarousel__item:last-child {
  margin-right: 0;
}

.scrollingcarousel__photo {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.scrollingcarousel__photo img {
  display: block;
  height: 256px;
  transition: 1.5s all;
  width: 256px;
}

.scrollingcarousel__item:hover p img {
  transform: scale(1.1);
}

.scrollingcarousel__title {
  font-size: 2.1rem;
  letter-spacing: 0.1em;
  margin-top: 0.5em;
  text-align: center;
}

.scrollingcarousel__txt {
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
  margin-top: 0.5em;
  text-align: center;
}

.slidernavi {
  display: flex;
  list-style-type: none;
  position: static;
}

.slidernavi > li > button {
  background-color: #fff;
  border: none;
  border-radius: 50%;
  color: #2c2c2c;
  cursor: pointer;
  font-size: 2.5rem;
  height: 70px;
  margin: 0 10px;
  position: relative;
  text-decoration: none;
  width: 70px;
}

.slidernavi > li > button[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* japanesesweets */

.japanesesweets {
  margin-bottom: 80px;
  margin-left: 3%;
  margin-right: 3%;
}

@media screen and (min-width: 768px) {
  .japanesesweets {
    margin-left: 30vw;
    margin-right: 0;
    width: 70vw;
  }
}

.titleimage {
  height: 40vh;
  margin-bottom: 50px;
  width: 100%;
}

.lineanime {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: line-anime;
}

@keyframes line-anime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.menucontent {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 0 50px;
  width: 100%;
  writing-mode: vertical-rl;
}

.menucontent h2 {
  color: #333;
  font-family: "Noto Serif JP", serif;
  font-size: 3rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  margin: 0 0 0 1em;
  text-size-adjust: 100%;
  word-wrap: break-word;
}

.menucontent p {
  color: #333;
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  height: 13em;
  letter-spacing: 0.1em;
  line-height: 1.7;
  word-wrap: break-word;
}

/* card */

.menuproduct__list {
  display: flex;
  flex-wrap: wrap;
}

.menuproduct__item {
  display: flex;
  flex-direction: column;
  font-size: 1.5vw;
  margin: calc(30px / 2);
  width: calc(100% / 2 - 30px);
}

@media screen and (min-width: 992px) {
  .menuproduct__item {
    width: calc(100% / 3 - 30px);
  }
}

.menuproduct__thumbnail img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.menuproduct__title {
  font-size: 2.1rem;
  letter-spacing: 0.1em;
  margin-top: 1em;
  text-align: center;
}

.menuproduct__price {
  font-size: 1.6rem;
  margin-top: 0.8em;
  text-align: center;
}

.menuproduct__comment {
  font-size: 2rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  margin-bottom: 0.9em;
  margin-top: 0.9em;
}

.menuproduct__btn {
  border: solid 1px #000;
  height: 70px;
  margin-top: auto;
  position: relative;
}

.menuproduct__btn a {
  align-items: center;
  color: #333;
  display: flex;
  font-size: 2rem;
  height: 100%;
  justify-content: center;
  letter-spacing: 0.1em;
  width: 100%;
}

.menuproduct__btn::after {
  background: linear-gradient(to bottom right, rgb(255 255 255 / 0%) 50%, #212121 50.5%) no-repeat top left/100% 100%;
  bottom: 0;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  right: 0;
  width: 10px;
}

.titleeyecatching__japanesesweets {
  background: url("../img/IMGmenu-heading-2-min.jpg") no-repeat center;
  background-size: cover;
  height: 100%;
}

/* sasadumpling */

.sasadumpling {
  margin-bottom: 80px;
  margin-left: 3%;
  margin-right: 3%;
}

@media screen and (min-width: 768px) {
  .sasadumpling {
    margin-left: 30vw;
    margin-right: 0;
    width: 70vw;
  }
}

/* goodiebag */

.goodiebag {
  margin-bottom: 80px;
  margin-left: 3%;
  margin-right: 3%;
}

@media screen and (min-width: 768px) {
  .goodiebag {
    margin-left: 30vw;
    margin-right: 0;
    width: 70vw;
  }
}

/* friedconfectionery */

.friedconfectionery {
  margin-bottom: 80px;
  margin-left: 3%;
  margin-right: 3%;
}

@media screen and (min-width: 768px) {
  .friedconfectionery {
    margin-left: 30vw;
    margin-right: 0;
    width: 70vw;
  }
}

.titleeyecatching__friedconfectionery {
  background: url("../img/IMGmenu-heading-4-min.jpg") no-repeat center;
  background-size: cover;
  height: 100%;
}

.titleeyecatching__sasadanngo {
  background: url("../img/IMGmenu-heading-3-min.jpg") no-repeat center;
  background-size: cover;
  height: 100%;
}

/* --------------------
goods
-------------------- */

.goods {
  display: block;
  margin-top: 35vw;
  padding-left: 6%;
  padding-right: 6%;
}

@media screen and (min-width: 768px) {
  .goods {
    margin-top: 3vw;
    padding-left: 30vw;
    padding-right: 5vw;
  }
}

.goods__title {
  font-size: 2.6rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  text-align: center;
}

.goods__eyecatch {
  margin: 0 auto;
  max-width: 692px;
}

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

.goods__detail {
  color: #333;
  font-size: 2rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  margin-bottom: 2em;
  text-align: left;
}

.goods__list {
  margin-bottom: 50px;
}

.goods__item {
  align-items: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #fff;
  display: flex;
  flex-wrap: wrap;
  font-size: 2rem;
  height: 100%;
  justify-content: space-between;
  list-style-type: none;
  padding: 10px 24px;
}

.goods__item span:first-child {
  font-size: 2rem;
  font-weight: 700;
  width: 40%;
}

.goods__item span:last-child {
  font-size: 1.9rem;
  width: 60%;
}

/* onecase */

.onecase {
  margin-bottom: 80px;
}

.onecase__item {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.onecase__item:nth-of-type(2n) {
  flex-direction: row-reverse;
}

.onecase__photo {
  height: 80%;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .onecase__photo {
    height: 20%;
    width: 50%;
  }
}

.onecase__title {
  color: #333;
  font-family: "Noto Serif JP", serif;
  font-size: 2.2rem;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-size-adjust: 100%;
  word-wrap: break-word;
  margin-top: 1em;
}
@media screen and (min-width: 768px) {
  .onecase__title {
    margin-top: 0;
  }
}

.onecase__image img {
  border-radius: 20px;
  height: 45vw;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .onecase__image img {
    height: 20vw;
  }
}

.onecase__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  
}

@media screen and (min-width: 768px) {
  .onecase__content {
    width: 50%;
    writing-mode: vertical-rl;
  }
}

.onecase__content p {
  color: #333;
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  -webkit-font-smoothing: antialiased;
  height: 13em;
  letter-spacing: 0.1em;
  line-height: 1.7;
  padding-bottom: 2em;
  padding-top: 2em;
  text-size-adjust: 100%;
  word-wrap: break-word;
}