@charset "utf-8";

* {
  box-sizing: border-box;
}

.ohana-hero,
.ohana-hero-collage,
.ohana-feature-card {
  overflow: hidden;
}

.ohana-hero {
  background: #fef2e3;
}

.ohana-page .ohana-hero {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1048px;
  min-height: 0;
  padding: clamp(1.5rem, 4vw, 3rem) 24px;
}

.ohana-page .ohana-hero-collage {
  aspect-ratio: 4 / 3;
  height: auto;
  max-width: 640px;
  position: relative;
  right: auto;
  top: auto;
}

.ohana-badge-green {
  background: #91b84a;
}

.ohana-badge-orange {
  background: #e5a44f;
}

.ohana-button-primary {
  background: #8b542e;
}

.ohana-info-section {
  background: #fef2e3;
}

.ohana-button-secondary {
  border: 1px solid #e6cdaf;
}

.ohana-feature-cards {
  gap: 26px;
}

.ohana-feature-panel {
  border: 1.5px solid #ecd4b0;
}

.ohana-brand-logo,
.ohana-hero-photo,
.ohana-feature-photo,
.ohana-feature-divider,
.ohana-menu-photo,
.ohana-info-photo,
.ohana-instagram-photo {
  object-fit: cover;
}

.ohana-feature-divider {
  object-fit: fill;
  z-index: 1;
}

.ohana-feature-copy {
  z-index: 2;
}

.ohana-hero-photo {
  display: block;
}

.ohana-brand-logo,
.ohana-truck-illustration,
.ohana-heading-mark,
.ohana-heading-mark-right {
  object-fit: contain;
}

.ohana-truck-illustration {
  mix-blend-mode: multiply;
}

.ohana-info-map {
  height: 250px;
  margin-top: 28px;
  overflow: hidden;
}

.ohana-info-map-component,
.ohana-info-map-frame {
  display: block;
  height: 100%;
  width: 100%;
}

.ohana-info-map-frame {
  border: 0;
}

.ohana-hero-copy,
.ohana-hero-tape-one,
.ohana-hero-tape-two {
  z-index: 2;
}

.ohana-hero-photo-rolls {
  transform: rotate(0deg);
  z-index: 1;
}

.ohana-hero-photo-truck {
  transform: rotate(0deg);
  z-index: 2;
}

.ohana-hero-photo-slice {
  transform: rotate(-4deg);
  z-index: 3;
}

.ohana-button-primary,
.ohana-button-secondary,
.ohana-menu-button,
.ohana-instagram-button {
  text-decoration: none;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ohana-button-primary:hover,
  .ohana-button-secondary:hover,
  .ohana-menu-button:hover,
  .ohana-instagram-button:hover {
    box-shadow: 0 10px 22px rgba(91, 58, 41, 0.22);
    transform: translateY(-3px);
  }
}

.ohana-button-primary,
.ohana-button-primary:visited,
.ohana-button-primary:hover,
.ohana-button-primary:active {
  color: #f9f1e4;
  text-decoration: none;
}

.ohana-button-secondary,
.ohana-button-secondary:visited,
.ohana-button-secondary:hover,
.ohana-button-secondary:active,
.ohana-instagram-button,
.ohana-instagram-button:visited,
.ohana-instagram-button:hover,
.ohana-instagram-button:active {
  color: #5b3a29;
  text-decoration: none;
}

.ohana-menu-button,
.ohana-menu-button:visited,
.ohana-menu-button:hover,
.ohana-menu-button:active {
  color: #fff;
  text-decoration: none;
}

.ohana-button-primary:active,
.ohana-button-secondary:active,
.ohana-menu-button:active,
.ohana-instagram-button:active {
  transform: translateY(-1px);
}

.ohana-button-primary:focus-visible,
.ohana-button-secondary:focus-visible,
.ohana-menu-button:focus-visible,
.ohana-instagram-button:focus-visible {
  outline: 3px solid rgba(139, 84, 46, 0.42);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ohana-button-primary,
  .ohana-button-secondary,
  .ohana-menu-button,
  .ohana-instagram-button {
    transition: none;
  }
}

.ohana-hero-tape-one {
  transform: rotate(-18deg);
}

.ohana-hero-tape-two {
  transform: rotate(14deg);
}

.ohana-hero-paper {
  transform: rotate(-14deg);
}

.ohana-truck-icon {
  transform: scaleX(2.2);
}

.ohana-menu-card,
.ohana-info-card,
.ohana-instagram-photo {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .ohana-page .ohana-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ohana-page .ohana-hero-collage {
    margin: 0;
  }

  .ohana-hero-title-line,
  .ohana-feature-text {
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .ohana-page .ohana-hero {
    grid-template-columns: 440px minmax(0, 1fr);
  }

  .ohana-page .ohana-hero-collage {
    aspect-ratio: 1 / 1;
  }
}

/* Shared page scale */
.ohana-page .ohana-hero,
.ohana-page .ohana-feature-panel,
.ohana-page .ohana-menu-cards,
.ohana-page .ohana-info-columns,
.ohana-page .ohana-instagram-grid {
  max-width: 1100px;
}

.ohana-page .ohana-instagram-grid .webgene-blog {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ohana-page .ohana-instagram-grid .instagram-post {
  margin: 0;
  min-width: 0;
}

.ohana-page .ohana-instagram-grid .instagram-post-link {
  display: block;
}

.ohana-page .ohana-instagram-grid .instagram-post-link img {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.ohana-page h1 { font-size: 42px; }
.ohana-page h2 { font-size: 30px; }
.ohana-page h3 { font-size: 20px; }
.ohana-page h4 { font-size: 18px; }
.ohana-page p { font-size: 16px; }
.ohana-page .ohana-badge-green,
.ohana-page .ohana-badge-orange,
.ohana-page .ohana-info-caption { font-size: 14px; }
.ohana-page .ohana-button-primary,
.ohana-page .ohana-button-secondary,
.ohana-page .ohana-menu-button,
.ohana-page .ohana-instagram-button { font-size: 16px; }

@media (min-width: 768px) {
  .ohana-page .ohana-instagram-grid .webgene-blog {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ohana-page .ohana-feature-card {
    height: 284px;
    min-height: 284px;
  }
}

@media (max-width: 767px) {
  .ohana-page h1 { font-size: 32px; }
  .ohana-page h2 { font-size: 24px; }
  .ohana-page h3 { font-size: 20px; }
  .ohana-page h4 { font-size: 18px; }
}

*{box-sizing:border-box}

/* 米粉にこだわる理由 */
.ohana-page .ohana-feature-section {
  background: #fcf2e5;
  padding: 32px;
}

.ohana-page .ohana-feature-panel {
  background: #fefaf2;
  border: 1px solid #844010;
  border-radius: 24px;
  max-width: 1100px;
  padding: 24px 32px;
}

.ohana-page .ohana-feature-intro {
  color: #542308;
  margin: 0 auto;
}

.ohana-page .ohana-feature-intro .ohana-section-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 24px;
}

.ohana-page .ohana-feature-intro-text {
  color: #542308;
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
}

.ohana-page .ohana-feature-reasons {
  margin: 48px auto 0;
  max-width: 1100px;
}

.ohana-page .ohana-feature-heading {
  gap: 16px;
  margin-bottom: 24px;
}

.ohana-page .ohana-feature-heading .ohana-heading-mark,
.ohana-page .ohana-feature-heading .ohana-heading-mark-right {
  flex: 0 0 44px;
  height: 44px;
  margin: 0;
  width: 44px;
}

.ohana-page .ohana-feature-heading .ohana-section-title {
  color: #542308;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.ohana-page .ohana-feature-cards {
  display: flex;
  gap: 16px;
}

.ohana-page .ohana-feature-card {
  background: #fdf9f2;
  border: 1px solid #f8eddf;
  border-radius: 16px;
  flex: 1 1 0;
  height: 268px;
  margin: 0;
  min-height: 268px;
}

.ohana-page .ohana-feature-illustration {
  bottom: 0;
  height: 267px;
  object-fit: contain;
  object-position: right bottom;
  position: absolute;
  right: 0;
  width: 227px;
}

.ohana-page .ohana-feature-copy {
  background: transparent;
  height: 100%;
  left: 0;
  padding: 24px;
  position: relative;
  top: 0;
  width: 150px;
}

.ohana-page .ohana-feature-number {
  color: #f49d69;
  font-size: 40px;
  line-height: 1;
  margin: 0 0 8px;
}

.ohana-page .ohana-feature-number-two { color: #fbc059; }
.ohana-page .ohana-feature-number-three { color: #f288b2; }

.ohana-page .ohana-feature-card h3.ohana-feature-name {
  color: #542308;
  font-size: 24px;
  line-height: 1.3;
}

.ohana-page .ohana-feature-text,
.ohana-page .ohana-feature-text.ohana-feature-text-first {
  color: #542308;
  font-size: 16px;
  line-height: 1.18;
  margin: 8px 0 0;
  white-space: normal;
}

@media (max-width: 767px) {
  .ohana-page .ohana-feature-section { padding: 24px 16px; }
  .ohana-page .ohana-feature-panel { padding: 24px 20px; }
  .ohana-page .ohana-feature-intro .ohana-section-title,
  .ohana-page .ohana-feature-heading .ohana-section-title { font-size: 24px; }
  .ohana-page .ohana-feature-reasons { margin-top: 32px; }
  .ohana-page .ohana-feature-heading { gap: 8px; }
  .ohana-page .ohana-feature-heading .ohana-heading-mark,
  .ohana-page .ohana-feature-heading .ohana-heading-mark-right {
    flex-basis: 32px;
    height: 32px;
    width: 32px;
  }
  .ohana-page .ohana-feature-cards { flex-direction: column; }
}

*{box-sizing:border-box}

*{box-sizing:border-box}

*{box-sizing:border-box}

*{box-sizing:border-box}

*{box-sizing:border-box}

*{box-sizing:border-box}