@charset "utf-8";
/* *************************************
header
************************************* */
.header {
  padding-block: calc(10 * var(--rem));
  height: calc(112 * var(--rem));
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background-color: var(--white);
  transition: box-shadow 0.3s ease;
  @media (width < 768px) {
    height: calc(80 * var(--rem));
  }
}

.header.is-active {
  box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 0.2);
}

.header__inner {
  padding-inline: calc(37 * var(--rem)) calc(24 * var(--rem));
  @media (width < 768px) {
    padding-inline: calc(10 * var(--rem));
  }
}

.header__container {
  display: flex;
  align-items: center;
}

.header__sub-logo {
  width: calc(66 * var(--rem));
  @media (width < 768px) {
    width: calc(40 * var(--rem));
    position: relative;
    z-index: 500;
  }
}

.header__sub-logo img {
  aspect-ratio: 113/150;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header__logo {
  width: calc(310 * var(--rem));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  @media (width < 768px) {
    width: calc(213 * var(--rem));
    margin-inline-start: calc(8 * var(--rem));
    position: relative;
    z-index: 500;
    top: revert;
    left: revert;
    transform: revert;
  }
}

.header__logo a {
  display: block;
  padding: calc(10 * var(--rem));
}

.header__logo img {
  aspect-ratio: 300/30;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header__right {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--rem));
  margin-block-start: calc(10 * var(--rem));
  margin-inline-start: auto;
  position: relative;
  z-index: 200;
}

.header__sns {
  margin-inline-start: calc(-20 * var(--rem));
  @media (width < 768px) {
    display: none;
  }
}

.header__hamburger {
  @media (width < 768px) {
    margin-block-start: calc(-10 * var(--rem));
  }
}

.header__modal {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(450 * var(--rem));
  background-color: var(--main-color);
  z-index: 100;
  height: 100vh;
  padding: calc(24 * var(--rem));
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
  overflow-y: scroll;
  @media (width < 768px) {
    width: 100%;
    padding-inline: calc(16 * var(--rem));
  }
}

.header__modal.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.header__nav {
  margin-block-start: calc(100 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(60 * var(--rem));
  }
}

.header__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(16 * var(--rem));
  @media (width < 768px) {
  column-gap: calc(12 * var(--rem));
  }
}

.header__list li {
  display: grid;
  grid-template-rows: subgrid;
}

.header__list li a {
  display: grid;
  align-items: self-start;
  border-bottom: 1px dotted var(--accent-color);
  padding-block-start: calc(16 * var(--rem));
  font-size: calc(14 * var(--rem));
}

.header__list li a span {
  text-transform: capitalize;
  font-size: calc(18 * var(--rem));
  padding-bottom: calc(8 * var(--rem));
}

.header__list li:nth-child(6) a span {
  margin-block-start: calc(-30 * var(--rem));
}

.header__tel {
  margin-block-start: calc(24 * var(--rem));
}

.header__tel a {
  font-size: calc(28 * var(--rem));
  letter-spacing: 0.1em;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(4 * var(--rem));
  align-items: center;
  width: fit-content;
  padding: calc(16 * var(--rem));
  margin-inline: auto;
}

.header__tel a::before {
  content: '';
  display: block;
  width: calc(36 * var(--rem));
  aspect-ratio: 1;
  background: url(../../library/images/common/tel.svg) no-repeat center / contain;
}

.header__modal-sns {
  text-align: center;
  display: none;
  @media (width < 768px) {
    display: block;
    padding-block-end: calc(80 * var(--rem));
  }
}

/* *************************************
footer
************************************* */
.footer {
  background-color: var(--bg);
  padding-block: calc(24 * var(--rem)) calc(63 * var(--rem));
  @media (width < 768px) {
    padding-block-end: calc(16 * var(--rem));
  }
}

.footer__inner {
  padding-inline: 20px;
  @media (width < 768px) {
    padding-inline: 10px;
  }
}

.footer__container {
  @media (width < 768px) {
    display: grid;
  }
}

.footer__list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  width: fit-content;
  margin-inline: auto;
  gap: calc(16 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
    gap: 0;
    order: 1;
  }
}

.footer__item a {
  font-size: calc(20 * var(--rem));
  letter-spacing: 0.1em;
  display: block;
  color: var(--white);
  padding: calc(16 * var(--rem));
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
    padding-block: calc(8 * var(--rem));
  }
}

.footer__item:nth-child(2) a {
  position: relative;
}

.footer__item:nth-child(2) a::before {
  content: '';
  display: block;
  width: 3px;
  height: 34%;
  background-color: var(--white);
  position: absolute;
  top: 57%;
  left: calc(-9 * var(--rem));
  transform: translate(0%, -50%);
  @media (width < 768px) {
    display: none;
  }
}

.footer__copy {
  font-size: calc(14 * var(--rem));
  font-weight: bold;
  color: var(--white);
  text-align: center;
  letter-spacing: 0.1em;
  @media (width < 768px) {
    order: 3;
    margin-block-start: calc(40 * var(--rem));
  }
}

.footer__logo {
  width: calc(500 * var(--rem));
  margin-inline: auto;
  margin-block-start: calc(80 * var(--rem));
  @media (width < 768px) {
    width: 100%;
    padding-inline: 20px;
    order: 2;
    margin-block-start: calc(24 * var(--rem));
  }
}

.footer__logo img {
  aspect-ratio: 300/ 30;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* *************************************
thanks & page-404
************************************* */
.thanks,
.page-404 {
  margin-block-start: calc(40 * var(--rem));
  padding-block-end: calc(80 * var(--rem));
}

.thanks__title,
.page-404__title {
  font-size: calc(30 * var(--rem));
  text-align: center;
  @media (width < 768px) {
    font-size: calc(26 * var(--rem));
  }
}

.thanks__text,
.page-404__text {
  font-size: calc(18 * var(--rem));
  margin-block-start: calc(40 * var(--rem));
  text-align: center;
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
  }
}

.thanks__btn,
.page-404__btn {
  margin-block-start: calc(40 * var(--rem));
  text-align: center;
}

/* *************************************
mv
************************************* */
/* *************************************
news
************************************* */
.news {
  margin-block-start: calc(80 * var(--rem));
}

.news__list {
  margin-block-start: calc(40 * var(--rem));
}

.news__btn {
  text-align: center;
  margin-block-start: calc(40 * var(--rem));
}

/* *************************************
movie
************************************* */
.movie {
  margin-block-start: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.movie__video {
  margin-block-start: calc(24 * var(--rem));
  width: min(100%, calc(868 * var(--rem)));
  margin-inline: auto;
}

.movie__video video {
  aspect-ratio: 360 /200;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #e0e0e0;
}

/* *************************************
mission
************************************* */
.mission {
  margin-block-start: calc(80 * var(--rem));
  background: url(../../library/images/top/mission-bg.webp) no-repeat center / cover;
  padding-block: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
    padding-block: calc(40 * var(--rem));
  }
}

.mission__title {
  font-size: calc(40 * var(--rem));
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0.18em;
  color: var(--white);
  text-transform: uppercase;
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
  }
}

.mission__container {
  display: grid;
  grid-template-columns: 3fr 7fr;
  margin-block-start: calc(80 * var(--rem));
  align-items: self-start;
  @media (width < 768px) {
    grid-template-columns: 1fr;
    margin-block-start: calc(24 * var(--rem));
  }
}

.mission__lead {
  margin-block-start: calc(-16 * var(--rem));
  font-size: calc(40 * var(--rem));
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0.2em;
  color: var(--white);
  text-transform: uppercase;
  @media (width < 768px) {
    margin: 0;
    font-size: calc(30 * var(--rem));
  }
}

.mission__text {
  letter-spacing: 0.15em;
  line-height: 2;
  width: min(100%, calc(780 * var(--rem)));
  @media (width < 768px) {
    margin-block-start: calc(24 * var(--rem));
  }
}

/* *************************************
message
************************************* */
.message {
  background-color: var(--main-color);
  padding-block: calc(80 * var(--rem));
  @media (width < 768px) {
    padding-block: calc(40 * var(--rem));
  }
}

.message__container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(77 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
    gap: calc(40 * var(--rem));
  }
}

.message__img1 {
  width: calc(370 * var(--rem));
}

.message__img1 img {
  aspect-ratio: 153 / 101;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message__title {
  margin-block-start: calc(82 * var(--rem));
  margin-inline-start: calc(6 * var(--rem));
  font-size: calc(40 * var(--rem));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
    margin-block-start: calc(40 * var(--rem));
  }
}

.message__lead {
  margin-block-start: calc(20 * var(--rem));
  margin-inline-start: calc(4 * var(--rem));
  font-size: calc(40 * var(--rem));
  font-family: var(--font-sub);
  letter-spacing: 0.27em;
  line-height: 2;
  @media (width < 768px) {
    font-size: calc(24 * var(--rem));
    line-height: 1.5;
  }
}

.message__sublead {
  margin-block-start: calc(16 * var(--rem));
  margin-inline-start: calc(8 * var(--rem));
  font-family: var(--font-sub);
  letter-spacing: 0.2em;
  @media (width < 768px) {
    font-size: calc(14 * var(--rem));
  }
}

.message__img2 {
  margin-block-start: calc(115 * var(--rem));
  width: calc(415 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.message__img2 img {
  aspect-ratio: 171 /114;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message__img3 {
  margin-block-start: calc(128 * var(--rem));
  width: calc(507 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.message__img3 img {
  aspect-ratio: 210 /269;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message__img4 {
  height: calc(670 * var(--rem));
}

.message__img4 img {
  aspect-ratio: 186 /277;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message__text {
  margin-block-start: calc(62 * var(--rem));
  font-size: calc(20 * var(--rem));
  letter-spacing: 0.26em;
  line-height: 2.3;
  font-feature-settings: 'palt';
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
    margin-block-start: calc(40 * var(--rem));
  }
}

.message__img5 {
  margin-block-start: calc(95 * var(--rem));
  width: calc(543 * var(--rem));
  height: calc(362 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.message__img5 img {
  aspect-ratio: 255 / 151;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* *************************************
olive-oil
************************************* */
.olive-oil {
  margin-block-start: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.olive-oil__container {
  margin-block-start: calc(65 * var(--rem));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(99 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
    margin-block-start: calc(40 * var(--rem));
    gap: calc(40 * var(--rem));
  }
}

.olive-oil__subtitle {
  writing-mode: vertical-rl;
  font-size: calc(50 * var(--rem));
  font-weight: 400;
  font-family: var(--font-sub);
  letter-spacing: 0.13em;
  line-height: 1.6;
  margin-block-end: calc(16 * var(--rem));
  @media (width < 768px) {
    margin: 0;
    writing-mode: revert;
    font-size: calc(30 * var(--rem));
    text-align: center;
  }
}

.olive-oil__text-title {
  font-size: calc(36 * var(--rem));
  line-height: 1;
  letter-spacing: 0.35em;
  font-weight: 400;
  font-feature-settings: 'palt';
  @media (width < 768px) {
    font-size: calc(26 * var(--rem));
    text-align: center;
    line-height: 1.5;
  }
}

.olive-oil__text {
  width: min(100%, calc(710 * var(--rem)));
  margin-block-start: calc(35 * var(--rem));
  line-height: 2.3;
  letter-spacing: 0.15em;
  @media (width < 768px) {
    width: 100%;
    margin-block-start: calc(24 * var(--rem));
  }
}

.olive-oil__img {
  margin-block-start: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.olive-oil__img img {
  aspect-ratio: 596 / 300;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* *************************************
growing-olives
************************************* */
.growing-olives {
  background: url(../../library/images/top/growing-olives-bg.webp) no-repeat center / cover;
  padding-block: calc(80 * var(--rem));
  @media (width < 768px) {
    padding-block: calc(40 * var(--rem));
  }
}

.growing-olives__container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(20 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.growing-olives__img {
  @media (width < 768px) {
    order: 2;
  }
}

.growing-olives__img img {
  aspect-ratio: 178/150;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.growing-olives__wrap {
  @media (width < 768px) {
    display: contents;
  }
}

.growing-olives__title {
  font-size: calc(38 * var(--rem));
  font-weight: bold;
  letter-spacing: 0.15em;
  color: var(--white);
  @media (width < 768px) {
    order: 1;
    font-size: calc(28 * var(--rem));
    text-align: center;
  }
}

.growing-olives__text {
  margin-block-start: calc(80 * var(--rem));
  line-height: 2;
  letter-spacing: 0.1em;
  @media (width < 768px) {
    order: 3;
    margin-block-start: 0;
  }
}

/* *************************************
story-action
************************************* */
.story-action {
  background-color: var(--main-color);
  padding-block: calc(80 * var(--rem));
  @media (width < 768px) {
    padding-block: calc(40 * var(--rem));
  }
}

.story-action__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: calc(80 * var(--rem));
  gap: calc(80 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
    margin-block-start: calc(40 * var(--rem));
    gap: calc(40 * var(--rem));
  }
}

.story-action__item-title {
  font-size: calc(30 * var(--rem));
  letter-spacing: 0.05em;
  font-weight: 400;
  @media (width < 768px) {
    font-size: calc(22 * var(--rem));
    text-align: center;
  }
}

.story-action__item-text {
  margin-block-start: calc(24 * var(--rem));
  line-height: 1.9;
  letter-spacing: 0.2em;
  @media (width < 768px) {
    margin-block-start: calc(8 * var(--rem));
  }
}

/* *************************************
product-btn
************************************* */
.product-btn {
  text-align: center;
  padding-block: calc(80 * var(--rem));
  @media (width < 768px) {
    padding-block: calc(40 * var(--rem));
  }
}

/* *************************************
about
************************************* */
.about {
  margin-block-start: calc(80 * var(--rem));
  padding-block-end: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
    padding-block-end: calc(40 * var(--rem));
  }
}

.about__container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(100 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
    gap: calc(24 * var(--rem));
  }
}

.about__img {
  width: calc(505 * var(--rem));
  @media (width < 768px) {
    order: 2;
    width: 100%;
  }
}

.about__img img {
  aspect-ratio: 209 / 269;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__wrap {
  @media (width < 768px) {
    display: contents;
  }
}

.about__title {
  @media (width < 768px) {
    order: 1;
  }
}

.about__title-en {
  text-transform: uppercase;
  font-size: calc(40 * var(--rem));
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.15em;
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
  }
}

.about__title-jp {
  margin-block-start: calc(30 * var(--rem));
  letter-spacing: 0.1em;
  text-transform: capitalize;
  font-size: calc(20 * var(--rem));
  @media (width < 768px) {
    font-size: calc(16 * var(--rem));
    margin-block-start: calc(16 * var(--rem));
  }
}

.about__title-jp span {
  letter-spacing: 0.01em;
  margin-inline-start: calc(20 * var(--rem));
}

.about__text {
  margin-block-start: calc(24 * var(--rem));
  letter-spacing: 0.22em;
  line-height: 1.9;
  @media (width < 768px) {
    order: 3;
    margin-block-start: 0;
  }
}

.about__company-name {
  text-align: center;
  margin-block-start: calc(80 * var(--rem));
  letter-spacing: 0.3em;
  font-weight: 400;
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.about__list {
  margin-block-start: calc(15 * var(--rem));
  display: grid;
  gap: calc(10 * var(--rem));
}

.about__list + .about__list {
  margin-block-start: calc(40 * var(--rem));
}

.about__item {
  text-align: center;
  letter-spacing: 0.13em;
  line-height: 1.6;
}

/* *************************************
history
************************************* */
.history {
  margin-block-start: calc(80 * var(--rem));
  padding-block-end: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
    padding-block-end: calc(40 * var(--rem));
  }
}

.history__inner.inner {
  max-width: calc(1140 * var(--rem));
}

.history__list {
  margin-block-start: calc(24 * var(--rem));
  display: grid;
  gap: calc(16 * var(--rem));
  @media (width < 768px) {
    gap: calc(16 * var(--rem));
  }
}

.history__item > dt {
  letter-spacing: 0.35em;
}

.history__item > dd ul {
  display: grid;
  gap: calc(8 * var(--rem));
}

.history__item > dd ul li {
  position: relative;
  padding-inline-start: calc(20 * var(--rem));
  letter-spacing: 0.1em;
  @media (width < 768px) {
    margin-block-start: calc(4 * var(--rem));
  }
}

.history__item > dd ul li::before {
  content: '';
  display: block;
  width: calc(4 * var(--rem));
  aspect-ratio: 1;
  background-color: var(--black);
  position: absolute;
  top: calc(14 * var(--rem));
  left: calc(6 * var(--rem));
  transform: translate(-50%, 0);
  border-radius: 100vmax;
}

/* *************************************
olive-field
************************************* */
.olive-field {
  margin-block-start: calc(80 * var(--rem));
  padding-block-end: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
    padding-block-end: calc(40 * var(--rem));
  }
}

.olive-field__inner.inner {
  max-width: calc(1130 * var(--rem));
}

.olive-field__table {
  display: grid;
  margin-block-start: calc(40 * var(--rem));
  grid-template-columns: repeat(2, 1fr);
  gap: calc(4 * var(--rem)) calc(80 * var(--rem));
  @media (width < 768px) {
    grid-template-columns: 1fr;
    row-gap: calc(16 * var(--rem));
  }
}

.olive-field__item {
  display: grid;
  gap: calc(8 * var(--rem));
}

.olive-field__item dt,
.olive-field__item dd {
  letter-spacing: 0.08em;
}

/* *************************************
about-olive
************************************* */
.about-olive {
  margin-block-start: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.about-olive__text {
  width: min(100%, calc(730 * var(--rem)));
  margin-inline: auto;
  margin-block-start: calc(40 * var(--rem));
  letter-spacing: 0.095em;
  line-height: 1.8;
}

.about-olive__list {
  margin-block-start: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

/* *************************************
top-slider-area
************************************* */
.top-slider-area {
  margin-block-start: calc(100 * var(--rem));
}

.top-slider-area__list {
  display: grid;
  gap: calc(107 * var(--rem));
}

.top-slider-area__slider {
  margin-block-start: calc(60 * var(--rem));
}

/* *************************************
instagram
************************************* */
.instagram {
  margin-block-start: calc(100 * var(--rem));
}

.instagram__inner.inner {
  max-width: calc(1170 * var(--rem));
}

.instagram__title {
  font-size: calc(45 * var(--rem));
  font-weight: bold;
  letter-spacing: 0.15em;
  text-transform: capitalize;
  text-align: center;
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
  }
}

.instagram__container {
  margin-block-start: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.instagram__img {
}

.instagram__img img {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #e0e0e0;
}

/* *************************************
contact
************************************* */
.contact {
  margin-block-start: calc(100 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(80 * var(--rem));
  }
}

.contact__inner.inner {
  max-width: calc(923 * var(--rem));
}

.contact__form {
  margin-block-start: calc(40 * var(--rem));
}

/* *************************************
quality-policy
************************************* */
.quality-policy {
  margin-block-start: calc(100 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(80 * var(--rem));
  }
}

.quality-policy__title {
  text-align: center;
  font-size: calc(40 * var(--rem));
  letter-spacing: 1em;
  @media (width < 768px) {
    font-size: calc(30 * var(--rem));
  }
}

.quality-policy__lead {
  font-size: calc(20 * var(--rem));
  font-family: var(--font-sub);
  text-align: center;
  font-weight: bold;
  margin-block-start: calc(20 * var(--rem));
  @media (width < 768px) {
    font-size: calc(20 * var(--rem));
  }
}

.quality-policy__list {
  margin-block-start: calc(26 * var(--rem));
  width: min(100%, calc(888 * var(--rem)));
  margin-inline: auto;
  display: grid;
  gap: calc(30 * var(--rem));
}

.quality-policy__item {
  letter-spacing: 0.09em;
  line-height: 2.2;
  counter-increment: num;
  position: relative;
  padding-inline-start: calc(24 * var(--rem));
  @media (width < 768px) {
    padding-inline-start: calc(20 * var(--rem));
  }
}

.quality-policy__item::before {
  content: counter(num, decimal-leading) '.';
  position: absolute;
  top: 0;
  left: 0;
}

.quality-policy__text {
  width: fit-content;
  margin-inline: auto calc(105 * var(--rem));
  margin-block-start: calc(50 * var(--rem));
  text-align: right;
  letter-spacing: 0.08em;
  @media (width < 768px) {
    width: 100%;
    margin-inline: auto 0;
    margin-block-start: calc(32 * var(--rem));
  }
}

/* *************************************
about-table
************************************* */
.about-table {
  margin-block-start: calc(110 * var(--rem));
}

.about-table__inner.inner {
  width: min(100%, calc(1052 * var(--rem)));
}

.about-table__container {
  display: grid;
  gap: calc(104 * var(--rem));
}

.about-table__title {
  font-size: calc(30 * var(--rem));
  letter-spacing: 0.05em;
  @media (width < 768px) {
    font-size: calc(26 * var(--rem));
  }
}

.about-table__table {
  margin-block-start: calc(10 * var(--rem));
}

/* *************************************
sns-box
************************************* */
.sns-box {
  margin-block-start: calc(80 * var(--rem));
  padding-block-end: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
    padding-block-end: calc(40 * var(--rem));
  }
}

.sns-box__container {
  display: grid;
  justify-items: center;
  gap: calc(23 * var(--rem));
}

.sns-box__logo {
  width: calc(138 * var(--rem));
}

.sns-box__logo img {
  aspect-ratio: 169/150;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* *************************************
product-top
************************************* */
.page-top {
  margin-block-start: calc(80 * var(--rem));
}

/* *************************************
recommended-products
************************************* */
.recommended-products {
  margin-block-start: calc(155 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(80 * var(--rem));
  }
}

/* *************************************
product-image
************************************* */
.product-image {
  margin-block-start: calc(157 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.product-image__img img {
  aspect-ratio: 597 /324;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* *************************************
product-list-section
************************************* */
.product-list-section {
  margin-block-start: calc(216 * var(--rem));
  overflow: hidden;
  @media (width < 768px) {
    margin-block-start: calc(80 * var(--rem));
  }
}

.product-list-section__text {
  margin-block-start: calc(80 * var(--rem));
  border-block: 3px solid #6fba2b;
  min-height: calc(250 * var(--rem));
  display: grid;
  place-content: center;
  text-align: center;
  font-size: calc(26 * var(--rem));
  font-weight: bold;
  line-height: 1.8;
  @media (width < 768px) {
    margin-block-start: calc(80 * var(--rem));
    font-size: calc(18 * var(--rem));
  }
}

/* *************************************
shop
************************************* */
.shop {
  margin-block-start: calc(80 * var(--rem));
}

.shop__list {
  margin-block-start: calc(40 * var(--rem));
}

.shop__text {
  margin-block-start: calc(40 * var(--rem));
  text-align: center;
  letter-spacing: 0.1em;
}

/* *************************************
voice
************************************* */
.voice {
  margin-block-start: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

.voice__inner.inner {
  /* max-width: calc(800 * var(--rem)); */
}

.voice__list {
  margin-block-start: calc(80 * var(--rem));
  @media (width < 768px) {
    margin-block-start: calc(40 * var(--rem));
  }
}

/* *************************************
news-archive
************************************* */

.news-archive {
  margin-block-start: calc(100 * var(--rem));
  padding-block-end: calc(80 * var(--rem));
}

.news-archive__pagination {
  margin-block-start: calc(100 * var(--rem));
}

/* *************************************
confirm
************************************* */
.confirm {
  margin-block-start: calc(80 * var(--rem));
  padding-block-end: calc(80 * var(--rem));
}

.confirm__inner.inner {
  max-width: calc(800 * var(--rem));
}

/* *************************************
oos-archive
************************************* */
.oos-archive {
  margin-block-start: calc(100 * var(--rem));
 padding-block-end: calc(80 * var(--rem));
}

.oos-archive__cat-list {
}

.oos-archive__list {
  margin-block-start: calc(40 * var(--rem));
}

.oos-archive__pagination {
  margin-block-start: calc(100 * var(--rem));
}

/* *************************************
top-oos
************************************* */
.top-oos {
  margin-block-start: calc(100 * var(--rem));
}

.top-oos_list {
  margin-block-start: calc(40 * var(--rem));
}

.top-oos__btn {
  text-align: center;
  margin-block-start: calc(40 * var(--rem));
}

/* *************************************
oos-single
************************************* */
.oos-single {
  margin-block-start: calc(100 * var(--rem));
  padding-block-end: calc(80 * var(--rem));
}

.oos-single__inner.inner {
  max-width: calc(850 * var(--rem));
}

.oos-single__time {
  display: block;
  text-align: center;
  color: #6fba2b;
}

.oos-single__title {
  text-align: center;

}

.oos-single__content {
  margin-block-start: calc(40 * var(--rem));
}

.oos-single__btn {
  text-align: center;
  margin-block-start: calc(80 * var(--rem));
}