@charset "UTF-8";

/* Common */
.l-container-wrap .l-container-wrap__body {
  padding-bottom: 0;
}

.p-page-history .cc-static-fv + .p-page-section {
  margin-top: 0;
}

.p-page-section {
  position: relative;
}

.p-page-section:last-child {
  margin-bottom: 0;
}

.p-page-section--has-bg {
  background:
    var(--bg-image, none)
    center / cover
    no-repeat;
}

.p-page-section--bg-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-image-overlay-white);
}

.p-page-section .cc-heading {
  margin-bottom: 4rem;
}

.p-page-section__inner {
  position: relative;
  z-index: 1;
  width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Genroku Period */
.p-page-genroku :is(.cc-heading, .cc-heading__main),
.p-page-genroku__contents {
  color: var(--color-white);
}

.p-page-genroku__body {
  font-size: 1.4rem;
  line-height: 1.714;
  letter-spacing: 0.1em;
}

.p-page-genroku__body > *:first-child {
  margin-top: 0;
}

.p-page-genroku__body > *:last-child {
  margin-bottom: 0;
}

.p-page-genroku__body > * + * {
  margin-top: 1em;
}

.p-page-genroku__sub-heading {
  margin: 3rem 0;
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: 0.1em;
}

.p-page-genroku__image-caption {
  margin-top: 1rem;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

/* Bunsei Period */
.p-page-bunsei__item {
  container: bunsai-item / inline-size;
  display: grid;
  grid-template-columns: 100%;
  gap: 3rem;
}

.p-page-bunsei__item-heading {
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.p-page-bunsei__item--origin .p-page-bunsei__item-heading {
  grid-area: heading;
}

.p-page-bunsei__item-text {
  font-size: 1.4rem;
  line-height: 1.714;
  letter-spacing: 0.1em;
}

.p-page-bunsei__item--origin .p-page-bunsei__item-text {
  grid-area: text;
}

.p-page-bunsei__item--origin .p-page-bunsei__item-image--sake-barrel {
  grid-area: left-image;
}

.p-page-bunsei__item--origin .p-page-bunsei__item-image--kanjiro {
  grid-area: right-image;
}

.p-page-bunsei__item-image-caption {
  margin-top: 1rem;
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: 0.1em;
}

.p-page-bunsei__item-image--kanjiro .p-page-bunsei__item-image-caption {
  text-align: left;
}

/* Meiji Period / Showa Period */
.p-page-meiji-showa :is(.cc-heading, .cc-heading__main),
.p-page-meiji-showa__sections,
.p-page-meiji-showa__image {
  color: var(--color-white);
}

.p-page-meiji-showa__sections {
  display: grid;
  grid-template-columns: 100%;
}

.p-page-meiji-showa__sections .p-page-section {
  margin: 0;
}

.p-page-meiji__contents,
.p-page-showa__contents {
  display: grid;
  grid-template-columns: 100%;
  gap: 3rem;
}

.p-page-meiji__contents-heading,
.p-page-showa__contents-heading {
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.p-page-meiji__contents-text,
.p-page-showa__contents-text {
  font-size: 1.4rem;
  line-height: 1.714;
  letter-spacing: 0.1em;
}

.p-page-meiji-showa__image img {
  margin: 0 auto;
}

.p-page-meiji-showa__image-caption {
  margin-top: 1rem;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.714;
  letter-spacing: 0.1em;
}

/* Heisei Period */
.p-page-heisei__contents {
  display: grid;
}

.p-page-heisei__item {
  display: grid;
}

.p-page-heisei__item-heading {
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.p-page-heisei__item-text {
  font-size: 1.4rem;
  line-height: 1.714;
  letter-spacing: 0.1em;
}

.p-page-heisei__item-image {
  margin: 0 auto;
}

.p-page-heisei__image {
  margin-top: 1rem;
}

.p-page-heisei__image-caption {
  margin-top: 1rem;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}

/* Special Column */
.p-page-column__body {
  font-size: 1.4rem;
  line-height: 1.714;
  letter-spacing: 0.1em;
}

.p-page-column__body > *:first-child {
  margin-top: 0;
}

.p-page-column__body > *:last-child {
  margin-bottom: 0;
}

.p-page-column__body > * + * {
  margin-top: 1em;
}

.p-page-column__sub-heading {
  margin: 3rem 0;
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: 0.1em;
}

.p-page-column__image-caption {
  margin-top: 1rem;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  /* Common */
  .p-page-history .cc-static-fv {
    --bg-image: url(../img/page/history/history-fv-bg_sp.webp);
  }

  .p-page-section:where(:not(.p-page-section--has-bg)) {
    margin: 6rem 0;
  }

  .p-page-section--has-bg .p-page-section__inner {
    padding: 6rem var(--container-padding);
  }

  .p-page-section .cc-heading {
    gap: 1rem;
  }

  .p-page-section .cc-heading__main {
    font-size: 2.4rem;
  }

  /* Genroku Period */
  .p-page-genroku {
    --bg-image: url(../../img/page/history/genroku-bg_sp.webp);
  }

  .p-page-genroku__image {
    margin-top: 4rem;
  }

  /* Bunsei Period */
  .p-page-bunsei {
    --bg-image: url(../../img/page/history/bunsei-bg_sp.webp);
  }

  .p-page-bunsei__contents {
    display: grid;
    grid-template-columns: 100%;
    gap: 4rem;
  }

  .p-page-bunsei__item--origin {
    grid-template-columns: 147fr 173fr;
    grid-template-areas:
      "heading heading"
      "text text"
      "left-image right-image";
    align-content: start;
    gap: 3rem calc(25 *(100vw / 375));
  }

  .p-page-bunsei__item-image {
    margin: 0 auto;
  }

  .p-page-bunsei__item--network .p-page-bunsei__item-image {
    width: 26rem;
  }

  .p-page-bunsei__item-image--sake-barrel {
    margin-top: 6rem;
  }

  .p-page-bunsei__item--origin .p-page-bunsei__item-image-caption {
    font-size: 1.2rem;
  }

  /* Meiji Period / Showa Period */
  .p-page-meiji-showa {
    --bg-image: url(../../img/page/history/meiji-showa-bg_sp.webp);
  }

  .p-page-meiji-showa .p-page-section__inner {
    display: grid;
    gap: 3rem;
  }

  .p-page-meiji-showa__sections {
    gap: 5rem;
  }

  .p-page-meiji-showa__image img {
    width: 6.9rem;
  }
  
  /* Heisei Period */
  .p-page-heisei {
    --bg-image: url(../../img/page/history/heisei-bg_sp.webp);
  }

  .p-page-heisei__contents {
    grid-template-columns: 100%;
    gap: 4rem;
  }

  .p-page-heisei__item {
    display: grid;
    grid-template-columns: 100%;
    gap: 3rem;
  }

  .p-page-heisei__item--brewing .p-page-heisei__item-image {
    width: 25.1rem;
  }

  /* Special Column */
  .p-page-column {
    --bg-image: url(../../img/page/history/column-bg_sp.webp);
  }

  .p-page-column__image {
    margin-top: 3rem;
  }
}

@media (min-width: 768px) {
  /* Common */
  .p-page-history .cc-static-fv {
    --bg-image: url(../img/page/history/history-fv-bg_pc.webp);
  }

  .p-page-section:where(:not(.p-page-section--has-bg)) {
    margin: 10rem 0;
  }

  .p-page-section--has-bg .p-page-section__inner {
    padding: 10rem var(--container-padding);
  }

  .p-page-section .cc-heading {
    gap: 4.5rem;
  }

  /* Genroku Period */
  .p-page-genroku {
    --bg-image: url(../../img/page/history/genroku-bg_pc.webp);
  }

  .p-page-genroku__contents {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(48rem, 480 *(100vw / 1400));
    column-gap: min(7rem, 70 *(100vw / 1400));
  }

  /* Bunsei Period */
  .p-page-bunsei {
    --bg-image: url(../../img/page/history/bunsei-bg_pc.webp);
  }

  .p-page-bunsei__contents {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6rem 9.09%;
  }

  .p-page-bunsei__item {
    flex: 0 0 auto;
    width: 45.455%;
  }

  .p-page-bunsei__item--origin {
    grid-template-columns: 340fr 200fr;
    grid-template-areas:
      "heading right-image"
      "text right-image"
      "left-image right-image";
    align-content: start;
    gap: 3rem 8.481%;
    width: 53.64%;
  }

  .p-page-bunsei__item--spring {
    width: 37.27%;
  }

  .p-page-bunsei__item--network .p-page-bunsei__item-image {
    width: min(26rem, 260 *(100vw / 1400));
  }

  .p-page-bunsei__item--precept .p-page-bunsei__item-image {
    width: min(36rem, 360 *(100vw / 1400));
  }

  .p-page-bunsei__item-image--sake-barrel {
    width: min(19rem, 190 *(100vw / 1400));
    margin-left: auto;
  }

  .p-page-bunsei__item--origin .p-page-bunsei__item-image-caption {
    font-size: min(1.2rem, 2.37cqw);
  }

  /* Meiji Period / Showa Period */
  .p-page-meiji-showa {
    --bg-image: url(../../img/page/history/meiji-showa-bg_pc.webp);
  }

  .p-page-meiji-showa .p-page-section__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
  }

  .p-page-meiji-showa__sections {
    flex: 0 0 76.36%;
  }

  .p-page-meiji-showa__sections {
    gap: 6rem;
  }

  .p-page-meiji-showa__image {
    flex: 0 0 auto;
  }

  .p-page-meiji-showa__image img {
    width: min(10.7rem, 107 *(100vw / 375));
  }

  /* Heisei Period */
  .p-page-heisei {
    --bg-image: url(../../img/page/history/heisei-bg_pc.webp);
  }

  .p-page-heisei__contents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10rem;
  }
  
  .p-page-heisei__item {
    grid-template-columns: subgrid;
    align-content: start;
    grid-row: span 3;
    gap: min(3rem, 30 *100vw / 1400);
  }

  .p-page-heisei__item--brewing .p-page-heisei__item-image {
    width: 36.4rem;
  }
  
  /* Special Column */
  .p-page-column {
    --bg-image: url(../../img/page/history/column-bg_pc.webp);
  }

  .p-page-column__contents {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(55rem, 550 *(100vw / 1400));
    column-gap: min(5rem, 50 *(100vw / 1400));
  }
}