@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Noto+Sans+JP:wght@400;500;600;700;900&family=Zen+Maru+Gothic:wght@700&display=swap");

/* I'm NOT A Baby! ブランドTOP（SPファースト。PCは左intro固定＋右SP流し込み） */

body {
  margin: 0;
}

/* CMSパンくずの下にページ背景色が覗かないようにする */
.pane-topic-path {
  background: #fff;
}

.block-topic-path {
  margin-block: 0;
}

#imn-brand {
  --imn-text: #000;
  --imn-title: #595757;
  --imn-muted: #999;
  --imn-quote: #5897ca;
  --imn-blue: #96c4e3;
  --imn-yellow: #fee975;
  --imn-yellow-bg: #fef7be;
  --imn-yellow-point: #d99100;
  --imn-peach: #ffb8ad;
  --imn-peach-bg: #fee5dc;
  --imn-coral: #e36960;
  --imn-tag-wash: rgb(150 196 227 / 80%);
  --imn-tag-moist: #d6e8a5;
  --imn-tag-intensive: #c8b8dd;
  --imn-en: "Lato", "Noto Sans JP", sans-serif;
  --imn-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --imn-maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  /* SP 430幅基準。PC（769px〜）は 600/430 倍 */
  --imn-text-scale: 1;
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
  background: #fff;
  color: var(--imn-text);
  font-family: var(--imn-sans);
  font-feature-settings: "palt";

  @media (width >= 769px) {
    overflow-x: visible;
    --imn-text-scale: calc(600 / 430);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

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

  a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;

    @media (any-hover: hover) {
      &:hover {
        opacity: 0.8;
      }
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  p,
  h1,
  h2,
  h3 {
    margin: 0;
  }

  > .inner {
    width: min(580px, 100%);
    margin-inline: auto;
    padding-inline: 0;
    overflow-x: clip;

    @media (width >= 769px) {
      width: 100%;
      overflow-x: visible;
    }
  }

  .imn-layout {
    display: grid;
    grid-template-areas:
      "intro"
      "body";
    background: color-mix(in srgb, var(--imn-blue) 70%, transparent);

    @media (width >= 769px) {
      grid-template-columns: min(46vw, 600px) minmax(0, 1fr);
      grid-template-areas: "intro body";
      align-items: start;
    }
  }

  .imn-body {
    grid-area: body;
    min-width: 0;
    max-width: min(600px, 100%);
    margin-inline: auto;
    overflow: clip;

    @media (width >= 769px) {
      max-width: min(600px, 100%);
    }
  }

  /* 背景デコ（位置の微調整はここ。幅は固定、横は中央基準） */
  .imn-deco {
    position: absolute;
    z-index: 0;
    max-width: none;
    height: auto;
    pointer-events: none;
    /* Figma Vector 1107.59。画面幅に追従させない */
    width: 1107.59px;
    /* 430幅時 left:-440.63 を 50% 基準に換算 */
    left: calc(50% - 655.63px);

    @media (width >= 769px) {
      /* 右カラム600幅でもSPに近い波の大きさになるよう拡大 */
      width: calc(1107.59px * 600 / 430);
      left: calc(50% - 655.63px * 600 / 430);
    }
  }

  .imn-deco--intro {
    bottom: -91px;

    @media (width >= 769px) {
      bottom: -160px;
    }
  }

  .imn-deco--about {
    bottom: -52px;
    left: calc(50% - 426.63px);

    @media (width >= 769px) {
      bottom: -93px;
      left: calc(50% - 442.63px * 600 / 430);
    }
  }

  .imn-deco--lines {
    bottom: -92px;
  }

  .imn-deco--organic {
    bottom: -100px;

    @media (width >= 769px) {
      bottom: -120px;
    } 
  }

  .imn-deco--kids {
    bottom: 50px;

    @media (width >= 769px) {
      bottom: 0;
    }
  }

  .imn-intro > *:not(.imn-deco),
  .imn-intro-bottom > *:not(.imn-deco),
  .imn-about > *:not(.imn-deco),
  .imn-lines > *:not(.imn-deco),
  .imn-organic > *:not(.imn-deco),
  .imn-kids > *:not(.imn-deco) {
    position: relative;
  }

  .imn-sup-text::after {
    content: "*" attr(data-sup);
    font-size: 0.645em;
    font-weight: 700;
    vertical-align: super;
    line-height: 1;
  }

  /* タイトル */
  .imn-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-height: 37px;
    padding-block: 20px;
    padding-inline: 16px;
    background: #fff;
    color: var(--imn-title);
    position: relative;
    z-index: 10;

    @media (width >= 769px) {
      padding-inline: 24px;
    }
  }

  .imn-title__en {
    font-size: 19.2px;
    font-weight: 900;
    line-height: 1.2;
  }

  .imn-title__ja {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
  }

  /* イントロ */
  .imn-intro {
    grid-area: intro;
    position: relative;
    z-index: 10;
    /* padding-block-end: 40px; */
    overflow-x: clip;
    background: var(--imn-blue);

    @media (width >= 769px) {
      position: sticky;
      top: 0;
      align-self: start;
      width: 100%;
      /* タイトル行のぶんを引いて、注釈が左カラム内に収まるようにする */
      /* height: calc(100dvh - 85px); */
      height: 100dvh;
      overflow-x: visible;
      overflow-y: auto;
      padding-block-end: 16px;
    }
  }

  .imn-intro__visual {
    position: relative;
  }

  .imn-intro__mv {
    width: 100%;
    height: auto;

    @media (width >= 769px) {
      /* max-height: 42vh; */
      object-fit: cover;
      object-position: 50% 28%;
    }
  }

  .imn-intro__catch,
  .imn-intro__lead {
    position: relative;
    z-index: 1;
    margin-top: 7px;
    padding-inline: 22px;
    color: var(--imn-text);
    font-family: var(--imn-maru);
    font-size: calc(18px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.44;
    text-align: center;
  }

  .imn-intro__lead {
    margin-top: 13px;
  }

  .imn-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;

    @media (width >= 769px) {
      margin-top: 58px;
    }
  }

  .imn-nav__card {
    display: flex;
    flex-direction: column;
    min-height: 101px;
    padding: 13px 10px 12px;
    background: #fff;
    box-shadow: 0 3px 3px 0 rgb(150 196 227 / 50%);

    @media (width >= 769px) {
      padding: 20px 10px 14px;
    }
  }

  .imn-nav__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    flex: 1;
  }

  .imn-nav__card--organic {
    border-radius: 0 10px 10px 0;
    padding-inline-start: 15px;
  }

  .imn-nav__card--kids {
    border-radius: 10px 0 0 10px;
    padding-inline-end: 15px;
  }

  .imn-nav__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(calc(173px * var(--imn-text-scale)), 100%);
    min-height: calc(26px * var(--imn-text-scale));
    padding-inline: 10px;
    margin-block-end: 5px;
    border-radius: 100px;
    font-family: var(--imn-en);
    font-size: calc(15px * var(--imn-text-scale));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  .imn-nav__card--organic .imn-nav__label {
    background: var(--imn-yellow);
  }

  .imn-nav__card--kids .imn-nav__label {
    background: var(--imn-peach);
  }

  .imn-nav__items {
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .imn-nav__item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    margin-top: 4px;
    font-size: calc(9px * var(--imn-text-scale));
    font-weight: 600;
    line-height: 1.33;
  }

  .imn-nav__item img {
    width: 14px;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .imn-nav__arrow {
    width: 10px;
    margin-block-start: auto;
    margin-inline: auto;

    @media (width >= 769px) {
      width: 14px;
      margin-block-start: 8px;
    }
  }

  .imn-intro__footnote {
    margin-top: 10px;
    padding-inline: 22px;
    font-size: calc(8px * var(--imn-text-scale));
    font-weight: 500;
    line-height: 1.5;
    text-align: right;
  }

  .imn-intro__note {
    margin-top: 16px;
    padding-inline: 22px;
    font-family: var(--imn-maru);
    font-size: calc(14px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.7;
    line-break: strict;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .imn-intro-bottom {
    position: relative;
    z-index: 9;
    min-height: 50px;
    padding-block: 0;
    background: var(--imn-blue);

    @media (width >= 769px) {
      min-height: 96px;
    }
  }

  /* アバウト */
  .imn-about {
    position: relative;
    z-index: 8;
    padding-block: 144px 16px;
    padding-inline: 0;
    overflow-x: clip;

    @media (width >= 769px) {
      padding-block-start: 220px;
    }
  }

  .imn-about > .imn-about__heading {
    position: relative;
    z-index: 2;
    padding-inline: 22px;
    font-size: calc(22px * var(--imn-text-scale));
    font-weight: 900;
    line-height: 1.7;
  }

  .imn-about > .imn-about__row {
    position: relative;
    z-index: 0;
    margin-top: 9px;
  }

  .imn-about__quote {
    width: min(220px, 64%);
    margin-inline-start: 22px;
    color: var(--imn-quote);
    font-size: calc(14px * var(--imn-text-scale));
    font-weight: 900;
    line-height: 1.7;

    @media (width >= 769px) {
      width: calc(100% - 44px);
    }
  }

  .imn-about__text {
    position: relative;
    z-index: 1;
    margin-top: 24px !important;
    padding-inline: 22px;
    color: var(--imn-muted);
    font-size: calc(12px * var(--imn-text-scale));
    font-weight: 500;
    line-height: 2;
  }

  .imn-about > .imn-lines__heading {
    position: relative;
    z-index: 2;
    margin-block-start: 74px;
    margin-block-end: calc(-1 * (20px * var(--imn-text-scale) * 1.7 * 2 + 15px));
    padding-inline: 22px;
    font-size: calc(20px * var(--imn-text-scale));
    font-weight: 900;
    line-height: 1.7;
    text-align: center;

    @media (width >= 769px) {
      margin-block-start: 136px;
    }
  }

  .imn-intro-bottom .imn-about__photo {
    position: absolute;
    top: calc(100% - 54px);
    right: -20px;
    width: min(220px, 58%);
    z-index: 1;
    /* pointer-events: none; */

    @media (width >= 769px) {
      top: calc(100% - 80px);
      width: min(426px, 58%);
    }
  }

  /* 2ライン */
  .imn-lines {
    position: relative;
    z-index: 7;
    padding: calc(20px * var(--imn-text-scale) * 1.7 * 2 + 15px) 22px 50px;
    background: var(--imn-yellow-bg);
  }

  .imn-lines__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .imn-lines__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }

  .imn-lines__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 185 / 204;
  }

  .imn-lines__name {
    margin-top: 15px;
    font-family: var(--imn-en);
    font-size: calc(18px * var(--imn-text-scale));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-align: center;
  }

  .imn-lines__feats {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin-top: 14px;
    margin-inline: auto;
    margin-bottom: 20px;
    text-align: left;
  }

  .imn-lines__feats li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: calc(11px * var(--imn-text-scale));
    font-weight: 600;
    line-height: 1.3;
  }

  .imn-lines__feats img {
    width: 16px;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .imn-lines__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(161px, 100%);
    min-height: 30px;
    margin-top: auto;
    padding-block: 8px;
    padding-inline: 12px;
    border-radius: 100px;
    font-size: calc(10px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }

  .imn-lines__btn--organic {
    background: var(--imn-yellow);
  }

  .imn-lines__btn--kids {
    background: var(--imn-peach);
  }

  .imn-lines__footnote {
    width: 100%;
    margin-top: 8px;
    font-size: calc(8px * var(--imn-text-scale));
    font-weight: 500;
    line-height: 1.5;
    text-align: right;
  }

  /* オーガニック */
  .imn-organic {
    position: relative;
    z-index: 6;
    scroll-margin-top: 100px;
    padding-block: 80px 48px;
    background: var(--imn-yellow-bg);
    overflow-x: clip;
  }

  .imn-organic__title,
  .imn-kids__title {
    padding-inline: 22px;
    font-family: var(--imn-en);
    font-size: calc(30px * var(--imn-text-scale));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.1;
    text-align: center;
  }

  .imn-organic__lead,
  .imn-kids__lead {
    margin-top: 10px;
    padding-inline: 22px;
    font-size: calc(13px * var(--imn-text-scale));
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
  }

  .imn-organic__visual {
    position: relative;
    z-index: 2;
    width: calc(100% - 44px);
    margin: 27px auto 0;
  }

  .imn-organic__photo,
  .imn-kids__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 386 / 280;
    object-fit: cover;
    border-radius: 10px;
  }

  .imn-kids__photo {
    width: calc(100% - 44px);
    margin: 27px auto 0;
    z-index: 2;
  }

  .imn-organic__badge {
    position: absolute;
    z-index: 1;
  }

  .imn-organic__badge--cosmos {
    top: 14px;
    right: 23px;
    width: 41px;
  }

  .imn-organic__badge--vegan {
    top: 80px;
    right: 11px;
    width: 55px;
  }

  /* POINT */
  .imn-point {
    margin-top: -30px;
    padding: 50px 22px 34px;
  }

  .imn-point--organic {
    background: rgb(255 221 59 / 40%);
  }

  .imn-point--kids {
    background: rgb(254 182 171 / 50%);
  }

  .imn-point__label {
    font-family: var(--imn-en);
    font-size: calc(20px * var(--imn-text-scale));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.7;
    text-align: center;
  }

  .imn-point--organic .imn-point__label {
    color: var(--imn-yellow-point);
  }

  .imn-point--kids .imn-point__label {
    color: var(--imn-coral);
  }

  .imn-point__list {
    display: grid;
    column-gap: 10px;
    row-gap: 0;
    margin-top: 6px;
  }

  .imn-point__list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
  }

  .imn-point__list--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    column-gap: 16px;
  }

  .imn-point__list li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    min-width: 0;
    justify-items: center;
    text-align: center;
  }

  .imn-point__list img {
    width: min(110px, 100%);
    border-radius: 50%;
  }

  .imn-point__desc {
    margin-top: 12px;
    font-size: calc(10px * var(--imn-text-scale));
    font-weight: 500;
    line-height: 1.5;
  }

  .imn-point__name {
    margin-top: 8px;
    font-size: calc(12px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.5;
  }

  .imn-point__list--3 .imn-point__name {
    font-size: calc(11px * var(--imn-text-scale));
  }

  .imn-point__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 25px;
    margin-block-end: 15px;
    border-radius: 5px 5px 0 0;
    background: rgb(227 105 96 / 50%);
    color: #fff;
    font-size: calc(10px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.5;
  }

  .imn-point__note {
    margin-top: 17px;
    font-size: calc(8px * var(--imn-text-scale));
    font-weight: 500;
    line-height: 1.5;
    text-align: right;
  }

  .imn-point__goat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
  }

  .imn-point__goat img {
    width: calc(110px * var(--imn-text-scale));
    flex-shrink: 0;
    border-radius: 50%;
  }

  .imn-point__goat-text {
    flex-shrink: 0;
    width: min(calc(122px * var(--imn-text-scale)), calc(100% - 110px * var(--imn-text-scale) - 20px));
  }

  .imn-point__why {
    width: 100%;
    margin: 16px auto 0;
    padding-block: 16px;
    border-block: 1px solid #fff;
  }

  .imn-point__why-title {
    color: var(--imn-coral);
    font-size: calc(15px * var(--imn-text-scale));
    font-weight: 900;
    line-height: 1.7;
    text-align: center;
  }

  .imn-point__why-text {
    margin-top: 5px;
    padding-inline: 12px;
    font-size: calc(11.38px * var(--imn-text-scale));
    line-height: 1.5;
  }

  /* 商品カード */
  .imn-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 16px;
    width: calc(100% - 68px);
    margin: 24px auto 0;
  }

  .imn-organic .imn-items {
    padding-block: 30px 10px;
  }

  .imn-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .imn-item__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    background: #fff;
  }

  .imn-item__thumb img {
    width: 100%;
    mix-blend-mode: multiply;
  }

  .imn-item__tag {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    aspect-ratio: 1;
    border-radius: 50%;
    color: #fff;
    font-size: calc(9px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.5;
    text-align: center;

    @media (width >= 769px) {
      width: 55px;
    }
  }

  .imn-item__tag--wash {
    background: var(--imn-tag-wash);
  }

  .imn-item__tag--moist {
    background: var(--imn-tag-moist);
  }

  .imn-item__tag--intensive {
    background: var(--imn-tag-intensive);
  }

  .imn-item__tag--multi {
    line-height: 1.2;
  }

  .imn-item__subtag {
    position: absolute;
    top: 59px;
    left: 7px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    padding-block: 4px;
    color: rgb(0 0 0 / 50%);
    font-size: calc(9px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    border-block: 1px solid rgb(0 0 0 / 20%);

    @media (width >= 769px) {
      top: 70px;
      width: 52px;
    }
  }

  .imn-item__name {
    display: block;
    margin-top: 15px;
    font-size: calc(11px * var(--imn-text-scale));
    font-weight: 400;
    line-height: 1.5;
  }

  .imn-item__price {
    display: block;
    margin-top: 4px;
    font-size: calc(13px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.6;
  }

  /* ギフト */

  .imn-gift__label {
    color: var(--imn-yellow-point);
    font-family: var(--imn-en);
    font-size: calc(26px * var(--imn-text-scale));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-align: center;
  }

  .imn-gift {
    position: relative;
    z-index: 2;
    width: calc(100% - 68px);
    margin: 20px auto 0;
  }

  .imn-gift__lead {
    margin-top: 2px;
    font-family: var(--imn-maru);
    font-size: calc(14px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    position: relative;
    z-index: 2;
  }

  .imn-gift__link {
    display: block;
    margin-top: 14px;
  }

  .imn-gift__visual {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 362 / 226;
    border-radius: 10px;
    background: #f3ead6;
  }

  .imn-gift__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 66%;
    border-radius: inherit;
  }

  .imn-gift__deco {
    position: absolute;
    top: -98px;
    left: -34px;

    width: 113px;
    pointer-events: none;
  }

  .imn-gift__badge {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 83px;
    height: auto;
    pointer-events: none;
  }

  /* キッズ */
  .imn-kids {
    position: relative;
    z-index: 5;
    scroll-margin-top: 100px;
    padding-block: 90px 198px;
    background: linear-gradient(to bottom, var(--imn-peach-bg) calc(100% - 200px), #fff calc(100% - 200px));
    overflow-x: clip;
  }

  .imn-kids .imn-items {
    margin-inline: auto;
  }

  .imn-kids .imn-point + .imn-items {
    margin-top: 24px;
  }

  .imn-recommend {
    z-index: 2;
    margin-top: 40px;
    padding-inline: 34px;
  }

  .imn-recommend__label {
    color: var(--imn-coral);
    font-family: var(--imn-en);
    font-size: calc(26px * var(--imn-text-scale));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-align: center;
  }

  .imn-recommend__lead {
    margin-top: 2px;
    font-family: var(--imn-maru);
    font-size: calc(14px * var(--imn-text-scale));
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
  }

  .imn-recommend__photo {
    width: 100%;
    margin-top: 12px;
    height: auto;
    aspect-ratio: 362 / 226;
    object-fit: cover;
    object-position: 50% 40%;
    border-radius: 10px;
  }
}