@charset "UTF-8";

/* ======================================================================
   Shokupan LP — Styles
   Base typography, colors, and responsive breakpoints inherit from
   the main site (style.css).  This file adds LP-specific layout.
   ====================================================================== */


/* --- Header --- */

.lp-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 0;
  transition: background 0.4s, box-shadow 0.4s; }
  .lp-header.is-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
  .lp-header__inner {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media only screen and (max-width: 767px) {
      .lp-header__inner {
        padding: 0 20px; } }
  .lp-header__logo img {
    height: 20px;
    width: auto;
    transition: opacity 0.3s, filter 0.4s; }
    @media only screen and (max-width: 767px) {
      .lp-header__logo img {
        height: 16px; } }
    .lp-header__logo:hover img {
      opacity: 0.6; }
    .lp-header.is-scrolled .lp-header__logo img {
      filter: none; }
    .lp-header:not(.is-scrolled) .lp-header__logo img {
      filter: brightness(0) invert(1); }
  .lp-header__link {
    font-size: 13px;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    font-family: "Zen Kaku Gothic New", "A1 Gothic B", sans-serif;
    font-weight: bold;
    transition: opacity 0.3s; }
    .lp-header__link:hover {
      opacity: 0.6; }
    .lp-header:not(.is-scrolled) .lp-header__link {
      color: #ffffff; }
    .lp-header.is-scrolled .lp-header__link {
      color: #060e22; }


/* --- Hero --- */

.lp-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden; }
  @media only screen and (max-width: 767px) {
    .lp-hero {
      height: 520px; } }
  .lp-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; }
  .lp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(6, 14, 34, 0) 40%,
      rgba(6, 14, 34, 0.45) 100%
    ); }
  .lp-hero__content {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box; }
    @media only screen and (max-width: 767px) {
      .lp-hero__content {
        bottom: 48px;
        padding: 0 34px; } }
  .lp-hero__catch {
    max-width: 940px;
    margin: 0 auto;
    color: #ffffff; }
    .lp-hero__catch h2 {
      font-size: 38px;
      font-size: 3.8rem;
      font-family: "Zen Kaku Gothic New", "A1 Gothic M", sans-serif;
      font-weight: bold;
      letter-spacing: 0.06em;
      line-height: 1.55; }
      @media only screen and (max-width: 767px) {
        .lp-hero__catch h2 {
          font-size: 24px;
          font-size: 2.4rem;
          letter-spacing: 0.03em; } }
    .lp-hero__catch p {
      margin-top: 20px;
      font-size: 16px;
      font-size: 1.6rem;
      letter-spacing: 0.04em;
      line-height: 1.8;
      opacity: 0.9; }
      @media only screen and (max-width: 767px) {
        .lp-hero__catch p {
          font-size: 13px;
          font-size: 1.3rem;
          margin-top: 14px; } }


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

.lp-section {
  padding: 120px 0; }
  @media only screen and (max-width: 767px) {
    .lp-section {
      padding: 72px 0; } }
  .lp-section--beige {
    background: #F7F6F2; }


/* --- Title fix for centered sections --- */

.title span {
  position: relative; }


/* --- Philosophy (想い) --- */

.lp-philosophy__lead {
    font-size: 28px;
    font-size: 2.8rem;
    font-family: "Zen Kaku Gothic New", "A1 Gothic M", sans-serif;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.7;
    margin-top: 64px; }
    @media only screen and (max-width: 767px) {
      .lp-philosophy__lead {
        font-size: 20px;
        font-size: 2rem;
        margin-top: 40px; } }
  .lp-philosophy__body {
    font-size: 16px;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    line-height: 2;
    margin-top: 48px;
    max-width: 520px;
    margin-left: auto;
    margin-right: 0; }
    @media only screen and (max-width: 767px) {
      .lp-philosophy__body {
        font-size: 14px;
        font-size: 1.4rem;
        margin-top: 32px;
        max-width: 100%;
        margin-right: auto; } }


.lp-philosophy__img {
  display: block;
  max-width: 480px;
  margin: 56px auto 0; }
  @media only screen and (max-width: 767px) {
    .lp-philosophy__img {
      max-width: 100%;
      margin-top: 40px; } }


/* --- Product feature block --- */

.lp-feature {
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 30px; }
  @media only screen and (max-width: 767px) {
    .lp-feature {
      flex-direction: column;
      gap: 32px;
      padding: 0 34px; } }
  .lp-feature--reverse {
    flex-direction: row-reverse; }
    @media only screen and (max-width: 767px) {
      .lp-feature--reverse {
        flex-direction: column; } }
  .lp-feature__image {
    flex: 0 0 45%;
    max-width: 45%; }
    @media only screen and (max-width: 767px) {
      .lp-feature__image {
        flex: none;
        max-width: 100%;
        width: 100%; } }
    .lp-feature__image img {
      width: 100%;
      display: block; }
  .lp-feature__text {
    flex: 1;
    min-width: 0; }
  .lp-feature__label {
    font-size: 13px;
    font-size: 1.3rem;
    letter-spacing: 0.12em;
    color: #999;
    margin-bottom: 16px; }
  .lp-feature__name {
    font-size: 32px;
    font-size: 3.2rem;
    font-family: "Zen Kaku Gothic New", "A1 Gothic M", sans-serif;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.4; }
    @media only screen and (max-width: 767px) {
      .lp-feature__name {
        font-size: 24px;
        font-size: 2.4rem; } }
  .lp-feature__desc {
    font-size: 16px;
    font-size: 1.6rem;
    letter-spacing: 0.03em;
    line-height: 2;
    margin-top: 32px; }
    @media only screen and (max-width: 767px) {
      .lp-feature__desc {
        font-size: 14px;
        font-size: 1.4rem;
        margin-top: 24px; } }
  .lp-feature__price {
    display: inline-block;
    margin-top: 24px;
    font-size: 15px;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    color: #666;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px; }


/* --- Full-width image break --- */

.lp-visual {
  width: 100%;
  overflow: hidden; }
  .lp-visual > div {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 420px; }
    @media only screen and (max-width: 767px) {
      .lp-visual > div {
        height: 200px; } }


/* --- How to enjoy --- */

.lp-enjoy__grid {
  display: flex;
  gap: 40px;
  margin-top: 64px; }
  @media only screen and (max-width: 767px) {
    .lp-enjoy__grid {
      flex-direction: column;
      gap: 40px;
      margin-top: 40px; } }
  .lp-enjoy__grid > div {
    flex: 1; }
  .lp-enjoy__grid h4 {
    font-size: 20px;
    font-size: 2rem;
    font-family: "Zen Kaku Gothic New", "A1 Gothic M", sans-serif;
    font-weight: bold;
    letter-spacing: 0.03em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #060e22; }
    @media only screen and (max-width: 767px) {
      .lp-enjoy__grid h4 {
        font-size: 17px;
        font-size: 1.7rem; } }
  .lp-enjoy__grid p {
    font-size: 15px;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    line-height: 1.9; }
    @media only screen and (max-width: 767px) {
      .lp-enjoy__grid p {
        font-size: 14px;
        font-size: 1.4rem; } }


/* --- Delivery / Info --- */

.lp-delivery {
  text-align: center; }
  .lp-delivery__body {
    font-size: 16px;
    font-size: 1.6rem;
    letter-spacing: 0.03em;
    line-height: 2;
    margin-top: 48px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto; }
    @media only screen and (max-width: 767px) {
      .lp-delivery__body {
        font-size: 14px;
        font-size: 1.4rem;
        margin-top: 32px;
        text-align: left; } }


/* --- CTA --- */

.lp-cta {
  text-align: center;
  padding: 96px 0; }
  @media only screen and (max-width: 767px) {
    .lp-cta {
      padding: 64px 0; } }
  .lp-cta__heading {
    font-size: 26px;
    font-size: 2.6rem;
    font-family: "Zen Kaku Gothic New", "A1 Gothic M", sans-serif;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.6; }
    @media only screen and (max-width: 767px) {
      .lp-cta__heading {
        font-size: 20px;
        font-size: 2rem; } }
  .lp-cta__sub {
    font-size: 15px;
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    line-height: 1.8;
    margin-top: 24px;
    color: #666; }
    @media only screen and (max-width: 767px) {
      .lp-cta__sub {
        font-size: 13px;
        font-size: 1.3rem; } }
  .lp-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #060e22;
    color: #ffffff;
    padding: 16px 40px;
    margin-top: 40px;
    transition: opacity 0.3s;
    font-size: 16px;
    font-size: 1.6rem;
    letter-spacing: 0.05em; }
    .lp-cta__btn:hover {
      opacity: 0.8; }
    .lp-cta__btn span,
    .lp-cta__btn svg {
      display: inline-block;
      vertical-align: middle; }
    .lp-cta__btn span {
      color: #ffffff; }
    .lp-cta__btn svg {
      display: block; }
    @media only screen and (max-width: 767px) {
      .lp-cta__btn {
        padding: 14px 32px;
        font-size: 14px;
        font-size: 1.4rem; } }


/* --- How-to note --- */

.lp-howto__note {
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  color: #888;
  margin-top: 32px; }
  @media only screen and (max-width: 767px) {
    .lp-howto__note {
      font-size: 13px;
      font-size: 1.3rem;
      margin-top: 24px; } }


/* --- Ingredients --- */

.lp-ingredients {
  display: flex;
  gap: 48px;
  margin-top: 64px; }
  @media only screen and (max-width: 767px) {
    .lp-ingredients {
      flex-direction: column;
      gap: 48px;
      margin-top: 40px; } }
  .lp-ingredients__item {
    flex: 1; }
    .lp-ingredients__item h4 {
      font-size: 20px;
      font-size: 2rem;
      font-family: "Zen Kaku Gothic New", "A1 Gothic M", sans-serif;
      font-weight: bold;
      letter-spacing: 0.03em;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid #060e22; }
      @media only screen and (max-width: 767px) {
        .lp-ingredients__item h4 {
          font-size: 17px;
          font-size: 1.7rem; } }
      .lp-ingredients__item h4 span {
        font-size: 13px;
        font-size: 1.3rem;
        font-weight: normal;
        color: #888;
        margin-left: 8px; }
  .lp-ingredients__table {
    margin-bottom: 20px; }
    .lp-ingredients__table > div {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid #e8e8e4;
      font-size: 14px;
      font-size: 1.4rem;
      letter-spacing: 0.02em; }
      @media only screen and (max-width: 767px) {
        .lp-ingredients__table > div {
          font-size: 13px;
          font-size: 1.3rem; } }
    .lp-ingredients__table dt {
      color: #666; }
    .lp-ingredients__table dd {
      font-weight: bold; }
  .lp-ingredients__raw {
    font-size: 13px;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: #666;
    margin-top: 16px; }
    @media only screen and (max-width: 767px) {
      .lp-ingredients__raw {
        font-size: 12px;
        font-size: 1.2rem; } }
  .lp-ingredients__note {
    font-size: 13px;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: #999;
    margin-top: 8px; }
    @media only screen and (max-width: 767px) {
      .lp-ingredients__note {
        font-size: 12px;
        font-size: 1.2rem; } }


/* --- Back to top link --- */

.lp-back {
  display: block;
  text-align: center;
  padding: 24px 0;
  font-size: 13px;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: #999;
  transition: opacity 0.3s; }
  .lp-back:hover {
    opacity: 0.6; }


/* --- Separator line --- */

.lp-separator {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 30px; }
  @media only screen and (max-width: 767px) {
    .lp-separator {
      padding: 0 34px; } }
  .lp-separator hr {
    border: none;
    height: 1px;
    background: #e0e0e0; }