@charset "UTF-8";
/*/////////////////////////////////////////////////////////////////////////////////////////////////

 config

/////////////////////////////////////////////////////////////////////////////////////////////////*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@500;700&display=swap");
:root {
  --color-brand: #E65550;
  --color-greige: #E1D7D7;
  --color-greige-middle: #E8DFDF;
  --color-greige-light: #F2EDED;
  --color-gray-light: #F2F2F2;
  --color-line: #CCC8C8;
  --color-white: #FFFFFF;
  --color-current: #403D3D;
  --color-select: #FF8080;
  --color-tag-bg: #E8DFDF;
  --color-text: #595555;
  --color-text-light: #615D5D;
  --color-red-light: #F4A8A7;
  --color-orange: #E9CBB4;
  --color-yellow: #F0E3BE;
  --color-icon: #E53835;
  --color-btn-disabled: #BFBFBF;
  --color-btn-icon: #808080;
  --text-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --text-family-zenmaru: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --text-18-bold-read: bold 18px / 1.8 var(--text-family);
  --text-16-bold-body: bold 16px / 1.8 var(--text-family);
  --text-16-regular-body: normal 16px / 1.8 var(--text-family);
  --text-14-regular-subtext: normal 14px / 1.8 var(--text-family);
  --text-14-bold-subtext: bold 14px / 1.8 var(--text-family);
  --text-14-regular: normal 14px / 1.8 var(--text-family);
  --text-13-regular-subtext: normal 13px / 1.8 var(--text-family);
  --text-13-column-regular: normal 13px / 1.8 var(--text-family);
  --text-13-bold: bold 13px / 1.8 var(--text-family);
  --heading-32-bold-h2: bold 32px / 1.5 var(--text-family-zenmaru);
  --heading-28-bold-h2-card: bold 28px / 1.5 var(--text-family-zenmaru);
  --heading-26-bold-h3: bold 26px / 1.5 var(--text-family-zenmaru);
  --heading-24-bold: bold 24px / 1.5 var(--text-family-zenmaru);
  --heading-20-bold-h2: bold 20px / 1.5 var(--text-family-zenmaru);
  --heading-18-bold: bold 18px / 1.5 var(--text-family-zenmaru);
  --nav-18-bold: bold 18px / 1.5 var(--text-family);
  --nav-16-bold: bold 16px / 1.5 var(--text-family);
  --nav-16-bold-125: bold 16px / 1.25 var(--text-family);
  --nav-14-bold: bold 14px / 1.5 var(--text-family);
  --nav-14-bold-125: bold 14px / 1.25 var(--text-family);
  --nav-14-regular: bold 14px / 1.25 var(--text-family);
  --nav-13-bold: bold 13px / 1.5 var(--text-family);
  --nav-12-bold: bold 12px / 1.5 var(--text-family);
  --nav-12-bold-125: bold 12px / 1.25 var(--text-family);
  --nav-11-bold: bold 11px / 1.25 var(--text-family);
}

@media screen and (min-width: 768px) {
  /*! Large only */
}
@media screen and (max-width: 1440px) {
  /*! Medium only */
}
@media screen and (max-width: 767px) {
  /*! Small only */
}
/*/////////////////////////////////////////////////////////////////////////////////////////////////

 Base

/////////////////////////////////////////////////////////////////////////////////////////////////*/
html, body {
  width: 100%;
  font: var(--text-16-regular-body);
  color: var(--color-text);
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
html.pagecategory {
  scroll-padding: 79px;
}
@media screen and (max-width: 767px) {
  html.pagecategory {
    scroll-padding: 47px;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

:focus {
  outline-offset: 1px;
}

:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////

 imports

/////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
---
name: inner
category: 01 Layout/L101 inner
---

## Inner
max-width: 1280px

```html
<div class="pgn-inner">Inner</div>
```

### Medium
max-width: 960px
```html
<div class="pgn-inner pgn-inner--medium">Inner</div>
```

### Small
max-width: 860px
```html
<div class="pgn-inner pgn-inner--small">Inner</div>
```

### X Small
max-width: 702px
```html
<div class="pgn-inner pgn-inner--small">Inner</div>
```

### Gutter None
SPでのガターなし
```html
<div class="pgn-inner pgn-inner--gutterNone">Inner</div>
```
*/
#pigeoninfo .pgn-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: content-box;
}
#pigeoninfo .pgn-inner--medium {
  max-width: 960px;
}
#pigeoninfo .pgn-inner--small {
  max-width: 860px;
}
#pigeoninfo .pgn-inner--xSmall {
  max-width: 702px;
}
#pigeoninfo .pgn-inner--gutterNone {
  padding-right: 0;
  padding-left: 0;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-inner--gutterNone-sp {
    padding-right: 0;
    padding-left: 0;
  }
}

#pigeoninfo .pgn-wrapper {
  background-color: var(--color-greige);
}
#pigeoninfo .pgn-wrapper--category {
  background: var(--color-yellow);
}

/*
---
name: Grid
category: 01 Layout/L102 Grid
---

## Grid
```html
<div class="pgn-grid pgn-grid--6-lg pgn-grid--1-sm">
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
</div>
```

## Gap
### Gap None
```html
<div class="pgn-grid pgn-grid--6-lg pgn-grid--1-sm gapNone">
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
</div>
```

### Gap Row Medium
`row-gap: 32px`  
SPでのみ適用
```html
<div class="pgn-grid pgn-grid--6-lg pgn-grid--1-sm pgn-gapRowMedium-sp">
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
    <div class="pgn-grid__item">グリッド</div>
</div>
```
*/
#pigeoninfo .pgn-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
@media screen and (min-width: 768px) {
  #pigeoninfo .pgn-grid--5-lg {
    grid-template-columns: repeat(5, 1fr);
  }
  #pigeoninfo .pgn-grid--4-lg {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 32px;
  }
  #pigeoninfo .pgn-grid--3-lg {
    grid-template-columns: repeat(3, 1fr);
  }
  #pigeoninfo .pgn-grid--2-lg {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-grid--1-sm {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }
  #pigeoninfo .pgn-grid--2-sm {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

#pigeoninfo .pgn-gapNone {
  gap: 0;
}

@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-gapRowMedium-sm {
    row-gap: 32px;
  }
}

/*
---
name: Section
category: 01 Layout/L103 Section
---

基本系は`.pgn-section`、エリアごとに適宜paddingや背景を調整する  
```html
<div class="pgn-section" style="margin-top: 32px; margin-bottom: 32px;">
    <div class="inner" style="height: 400px; padding-top: 80px; padding-bottom: 80px;">セクション</div>
</div>
```
*/
#pigeoninfo .pgn-section {
  position: relative;
  padding-bottom: 80px;
  background-color: var(--color-orange);
  z-index: 1;
}
#pigeoninfo .pgn-section::before, #pigeoninfo .pgn-section::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
#pigeoninfo .pgn-section::before {
  top: -32px;
  aspect-ratio: 2880/500;
  background-image: url(/images/mask_section_001.png);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-section::before {
    top: -8px;
    background-image: url(/images/mask_section_001-sp.png);
    aspect-ratio: 750/242;
  }
}
#pigeoninfo .pgn-section::after {
  bottom: 5px;
  aspect-ratio: 2880/302;
  background-image: url(/images/mask_section_002.png);
  transform: translateY(100%);
  background-position: bottom;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-section::after {
    background-image: url(/images/mask_section_002-sp.png);
    aspect-ratio: 750/81;
  }
}
#pigeoninfo .pgn-section--guide {
  padding-top: 48px;
  background-color: var(--color-greige);
}
#pigeoninfo .pgn-section--guide::before {
  top: 1.5px;
  aspect-ratio: 2880/777;
  background-image: url(/images/mask_section_003.png);
  transform: translateY(-100%);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-section--guide::before {
    background-image: url(/images/mask_section_003-sp.png);
    aspect-ratio: 750/379;
  }
}
#pigeoninfo .pgn-section--guide::after {
  aspect-ratio: 2880/292;
  background-image: url(/images/mask_section_004.png);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-section--guide::after {
    background-image: url(/images/mask_section_004-sp.png);
    aspect-ratio: 750/81;
  }
}
#pigeoninfo .pgn-section--advice {
  background-color: #F0E3BE;
  padding-bottom: 209px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-section--advice {
    padding-bottom: 114px;
  }
}
#pigeoninfo .pgn-section--advice::before {
  top: 5px;
  aspect-ratio: 2880/740;
  background-image: url(/images/mask_section_005.png);
  transform: translateY(-100%);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-section--advice::before {
    background-image: url(/images/mask_section_005-sp.png);
    aspect-ratio: 750/359;
  }
}
#pigeoninfo .pgn-section--advice::after {
  bottom: -5px;
  aspect-ratio: 2880/229;
  background-image: url(/images/mask_section_006.png);
  transform: translateY(0);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-section--advice::after {
    background-image: url(/images/mask_section_006-sp.png);
    aspect-ratio: 750/81;
  }
}
#pigeoninfo .pgn-section--search {
  padding-top: 80px;
  background-color: var(--color-greige);
}
#pigeoninfo .pgn-section--search::before, #pigeoninfo .pgn-section--search::after {
  display: none;
}
#pigeoninfo .pgn-section--category {
  position: relative;
  background-color: var(--color-gray-light);
  padding-top: 32px;
  padding-bottom: 182px;
  margin-bottom: 80px;
}
#pigeoninfo .pgn-section--category::before, #pigeoninfo .pgn-section--category::after {
  display: none;
}
#pigeoninfo .pgn-section--category + .pgn-section--advice {
  padding-top: 48px;
  padding-bottom: 0;
}
#pigeoninfo .pgn-section--category + .pgn-section--advice::before {
  top: 0;
  aspect-ratio: 2880/209;
  background-image: url(/growth/images/mask_section_001.png);
  transform: translateY(calc(-100% - 24px));
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-section--category + .pgn-section--advice::before {
    background-image: url(/growth/images/mask_section_001-sp.png);
    aspect-ratio: 750/359;
    height: 182px;
  }
}
#pigeoninfo .pgn-section--category + .pgn-section--advice::after {
  display: none;
}

#pigeoninfo .pgn-heroimage + .pgn-section {
  padding-top: 0;
}
#pigeoninfo .pgn-heroimage + .pgn-section::before {
  top: 0;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage + .pgn-section::before {
    padding-top: 48px;
  }
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage + .pgn-section {
    padding-top: 0;
  }
}

/*
---
name: breakImg
category: 01 Layout/L103 breakImg
---
`background-attachment: fixed;`でパララックスとなっている  
背景画像はモディファイアをつけて、スタイルを都度指定
```html
  <div class="pgn-breakImg">
  </div>
```
*/
#pigeoninfo .pgn-breakImg {
  position: relative;
  width: 100%;
  aspect-ratio: 1440/750;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-breakImg {
    aspect-ratio: 375/522;
    overflow: hidden;
  }
}
#pigeoninfo .pgn-breakImg__inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100svh;
  aspect-ratio: 375/522;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-breakImg__inner {
    height: 522px;
  }
}
#pigeoninfo .pgn-breakImg__inner.is-fixed {
  position: fixed;
}
#pigeoninfo .pgn-breakImg__inner img {
  width: 100%;
  height: 100svh;
  object-fit: cover;
  transform: translateZ(0);
  will-change: transform;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-breakImg__inner img {
    height: 100vh;
  }
}
#pigeoninfo .pgn-breakImg--middle img {
  object-position: right;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////

 imports

/////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
---
name: Localnavi
category: 02 Part/P102 Localnavi
---

## ローカルナビ
SPでsplideを使ったカルーセル
```html
<div class="splide pgn-localnavi" data-js-localnavi>
    <div class="splide__track">
        <ul class="splide__list pgn-localnavi__list">
            <li class="splide__slide pgn-localnavi__item"><a href="">妊娠前期</a></li>
            <li class="splide__slide pgn-localnavi__item"><a href="">妊娠中期</a></li>
            <li class="splide__slide pgn-localnavi__item"><a href="">妊娠後期</a></li>
            <li class="splide__slide pgn-localnavi__item"><a href="">出産の頃</a></li>
            <li class="splide__slide pgn-localnavi__item pgn-localnavi__item--current"><a href="">新生児～ねんねの頃<span class="pgn-localnavi__subText">0歳以降～</span></a></li>
            <li class="splide__slide pgn-localnavi__item"><a href="">首がすわってくる頃<span class="pgn-localnavi__subText">1歳以降～</span></a></li>
            <li class="splide__slide pgn-localnavi__item"><a href="">首がすわってくる頃<span class="pgn-localnavi__subText">1歳以降～</span></a></li>
            <li class="splide__slide pgn-localnavi__item"><a href="">首がすわってくる頃<span class="pgn-localnavi__subText">1歳以降～</span></a></li>
            <li class="splide__slide pgn-localnavi__item"><a href="">首がすわってくる頃<span class="pgn-localnavi__subText">1歳以降～</span></a></li>
        </ul>
        <div class="splide__arrows">
            <button class="splide__arrow splide__arrow--prev">戻る</button>
            <button class="splide__arrow splide__arrow--next">次へ</button>
      </div>
    </div>
</div>
```

## ローカルナビ（画像＋テキストセット）
```html
<div class="pgn-localnaviSet">
    <div class="pgn-localnaviSet__list">
        <div class="pgn-localnaviSet__item pgn-localnaviSet__item--current">
            <a href="">
                <div class="pgn-localnaviSet__img">
                    <img src="/images/localnavi_001.png" alt="">
                </div>
                <p class="pgn-btn pgn-btn--large"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">新生児～ねんねの頃</p>
                <p class="pgn-localnaviSet__subTitle">0～3ヵ月頃</p>
            </a>
        </div>
        <div class="pgn-localnaviSet__item">
            <a href="">
                <div class="pgn-localnaviSet__img">
                    <img src="/images/localnavi_002.png" alt="">
                </div>
                <p class="pgn-btn pgn-btn--large"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">首がすわってくる頃</p>
                <p class="pgn-localnaviSet__subTitle">4～6ヵ月頃</p>
            </a>
        </div>
        <div class="pgn-localnaviSet__item">
            <a href="">
                <div class="pgn-localnaviSet__img">
                    <img src="/images/localnavi_003.png" alt="">
                </div>
                <p class="pgn-btn pgn-btn--large"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">寝返り・おすわりの頃</p>
                <p class="pgn-localnaviSet__subTitle">7～9ヵ月頃</p>
            </a>
        </div>
        <div class="pgn-localnaviSet__item">
            <a href="">
                <div class="pgn-localnaviSet__img">
                    <img src="/images/localnavi_004.png" alt="">
                </div>
                <p class="pgn-btn pgn-btn--large"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">ハイハイ・たっちの頃</p>
                <p class="pgn-localnaviSet__subTitle">10ヵ月頃～1才0ヵ月頃</p>
            </a>
        </div>
        <div class="pgn-localnaviSet__item">
            <a href="">
                <div class="pgn-localnaviSet__img">
                    <img src="/images/localnavi_005.png" alt="">
                </div>
                <p class="pgn-btn pgn-btn--large"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">あんよがはじまる頃</p>
                <p class="pgn-localnaviSet__subTitle">1才以降～</p>
            </a>
        </div>
    </div>
</div>
```
*/
#pigeoninfo .pgn-localnavi {
  position: sticky;
  top: 0;
  display: flex;
  white-space: nowrap;
  background-color: var(--color-greige-middle);
  overflow-x: auto;
  z-index: 2;
}
#pigeoninfo .pgn-localnavi::before, #pigeoninfo .pgn-localnavi::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-line);
}
#pigeoninfo .pgn-localnavi::before {
  top: 0;
}
#pigeoninfo .pgn-localnavi::after {
  bottom: 0;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnavi {
    overflow-x: visible;
  }
}
#pigeoninfo .pgn-localnavi.splide {
  visibility: visible;
}
#pigeoninfo .pgn-localnavi .splide__track {
  position: relative;
  z-index: 2;
  overflow: visible;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnavi .splide__track {
    overflow: hidden;
  }
}
#pigeoninfo .pgn-localnavi .splide__arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  height: 100%;
  z-index: 2;
  background-color: #B4ACAC;
  font-size: 0;
  border: none;
  cursor: default;
  pointer-events: none;
  display: none;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnavi .splide__arrow {
    display: block;
  }
}
#pigeoninfo .pgn-localnavi .splide__arrow::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  height: 10px;
  margin: auto;
  background-repeat: no-repeat;
  background-size: contain;
}
#pigeoninfo .pgn-localnavi .splide__arrow--prev {
  left: 0;
}
#pigeoninfo .pgn-localnavi .splide__arrow--prev::before {
  background-image: url(/images/icons/icon_prev.svg);
}
#pigeoninfo .pgn-localnavi .splide__arrow--next {
  right: 0;
}
#pigeoninfo .pgn-localnavi .splide__arrow--next::before {
  background-image: url(/images/icons/icon_next.svg);
}
#pigeoninfo .pgn-localnavi__list {
  display: flex;
  justify-content: flex-start;
}
#pigeoninfo .pgn-localnavi.splide.is-initialized:not(.is-active) .splide__list {
  display: flex;
}
#pigeoninfo .pgn-localnavi__item a {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
  font: var(--nav-12-bold);
}
#pigeoninfo .pgn-localnavi__item a:hover {
  background-color: rgba(234, 83, 80, 0.1);
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnavi__item a {
    min-width: 35%;
    white-space: nowrap;
  }
}
#pigeoninfo .pgn-localnavi__item--current a {
  background-color: var(--color-gray-light);
}
#pigeoninfo .pgn-localnavi__item--current a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 2px;
  background-color: var(--color-icon);
}
#pigeoninfo .pgn-localnavi__item:last-child a {
  border-right: 1px solid var(--color-line);
}
#pigeoninfo .pgn-localnavi__subText {
  display: block;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

#pigeoninfo .pgn-localnaviSet {
  max-width: 1024px;
  margin: 40px auto 0;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet {
    margin-top: 24px;
  }
}
#pigeoninfo .pgn-localnaviSet__list {
  display: flex;
  justify-content: center;
  gap: 6px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet__list {
    flex-direction: column;
    row-gap: 14px;
  }
}
#pigeoninfo .pgn-localnaviSet__item {
  width: 20%;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet__item {
    width: 100%;
  }
}
#pigeoninfo .pgn-localnaviSet__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet__item a {
    position: relative;
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "img btn" "img text";
    column-gap: 8px;
  }
}
#pigeoninfo .pgn-localnaviSet__item a:hover {
  text-decoration: none;
}
#pigeoninfo .pgn-localnaviSet__item a:hover .pgn-btn {
  background-color: #FDEEEE;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet__item a::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 3px;
    height: calc(100% - 34px);
    background-color: var(--color-brand);
    top: 64px;
    left: 112px;
  }
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet__item:last-child a::after {
    display: none;
  }
}
#pigeoninfo .pgn-localnaviSet__img {
  width: 100px;
  filter: saturate(80%);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet__img {
    width: 80px;
    grid-area: img;
  }
}
#pigeoninfo .pgn-localnaviSet__img img {
  border-radius: 50%;
}
#pigeoninfo .pgn-localnaviSet .pgn-btn {
  background-color: var(--color-white);
  font: var(--nav-16-bold-125);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px 0 36px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet .pgn-btn {
    margin-top: 0;
    grid-area: btn;
  }
}
#pigeoninfo .pgn-localnaviSet .pgn-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 6px;
  height: 3px;
  background-color: var(--color-brand);
  top: 0;
  right: -7px;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet .pgn-btn::after {
    display: none;
  }
}
#pigeoninfo .pgn-localnaviSet__item:last-child .pgn-btn::after {
  display: none;
}
#pigeoninfo .pgn-localnaviSet__subTitle {
  margin-top: 4px;
  font: var(--nav-13-bold);
  text-align: center;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet__subTitle {
    grid-area: text;
    font: var(--nav-12-bold);
    position: absolute;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet__item--current a::after {
    top: 65px;
  }
}
#pigeoninfo .pgn-localnaviSet__item--current .pgn-localnaviSet__img {
  filter: saturate(100%);
}
#pigeoninfo .pgn-localnaviSet__item--current .pgn-localnaviSet__img img {
  border: 3px solid var(--color-brand);
}
#pigeoninfo .pgn-localnaviSet__item--current .pgn-btn {
  border: 3px solid var(--color-brand);
  background-color: var(--color-gray-light);
}
#pigeoninfo .pgn-localnaviSet__item--current .pgn-btn::after {
  right: -9px;
}

#pigeoninfo .pgn-headingLv2--horizontal + .pgn-localnaviSet {
  margin-top: 18px;
}

/*
---
name: Pagetop
category: 02 Part/P103 Pagetop
---

```html
<div class="pgn-pagetop">
    <a href="pgn-pagetop" class="pgn-pagetop__img"><img src="/images/icons/icon_top.svg" alt="ページトップへ戻る"></a>
</div>
```
*/
#pigeoninfo .pgn-pagetop {
  height: 96px;
  background-color: transparent;
  padding-top: 28px;
  text-align: right;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-pagetop {
    height: 48px;
    padding-top: 0;
  }
}
#pigeoninfo .pgn-pagetop__link {
  position: fixed;
  bottom: 16px;
  right: 24px;
  display: inline-block;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: none;
  opacity: 0;
  z-index: 99;
  transition: opacity 0.15s;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-pagetop__link {
    bottom: 8px;
    right: 8px;
  }
}
@media (hover: hover) {
  #pigeoninfo .pgn-pagetop__link:hover {
    opacity: 0.6 !important;
  }
}
#pigeoninfo .pgn-pagetop__link.is-show {
  opacity: 1;
  transition: opacity 0.25s;
}
#pigeoninfo .pgn-pagetop__link.is-stop {
  position: relative;
  bottom: 0;
}

/*
---
name: Modal
category: 02 Part/P201 Modal
---

```html
                <div class="pgn-modal" data-js-modal>
                    <div class="pgn-charainfo__link">
                        <button class="pgn-modalOpen" data-js-modal-open><img class="pgn-icon" src="/images/icons/icon_help.svg" alt="">おたすけ隊員について</button>
                    </div>
                    <dialog class="pgn-modal__contents" data-js-modal-contents>
                        <div class="pgn-modal__inner">
                            <h2 class="pgn-modal__headingLv2">ピジョンおたすけ隊とは？</h2>
                            <p class="pgn-modal__lead">赤ちゃんの成長やママのからだを<br class="pgn-pcNone">サポートする<br class="pgn-spNone">ピジョンのおたすけ隊員。<br>出産・育児の悩みに<br class="pgn-pcNone">寄りそった情報をお届けします。</p>
                            <div class="pgn-grid pgn-grid--4-lg pgn-grid--1-sm">
                                <div class="pgn-grid__item modal__gridItem">
                                    <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                                    <div class="pgn-modal__img">
                                        <img src="/images/chara_001.png" alt="pigeon.info">
                                    </div>
                                    <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                                    <ul class="pgn-tagList pgn-modal__tagList">
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                    </ul>
                                </div>
                                <div class="pgn-grid__item pgn-modal__gridItem">
                                    <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                                    <div class="pgn-modal__img">
                                        <img src="/images/chara_002.png" alt="pigeon.info">
                                    </div>
                                    <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                                    <ul class="pgn-tagList pgn-modal__tagList">
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                    </ul>
                                </div>
                                <div class="pgn-grid__item modal__gridItem">
                                    <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                                    <div class="pgn-modal__img">
                                        <img src="/images/chara_003.png" alt="pigeon.info">
                                    </div>
                                    <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                                    <ul class="pgn-tagList pgn-modal__tagList">
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                    </ul>
                                </div>
                                <div class="pgn-grid__item modal__gridItem">
                                    <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                                    <div class="pgn-modal__img">
                                        <img src="/images/chara_004.png" alt="pigeon.info">
                                    </div>
                                    <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                                    <ul class="pgn-tagList pgn-modal__tagList">
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                        <li class="pgn-tag">母乳育児</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <button class="pgn-modal__closeBtn" type="button" data-js-modal-close>閉じる</button>
                    </dialog>
                </div>
```
*/
#pigeoninfo .pgn-modalOpen {
  background-color: transparent;
  border: none;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
  cursor: pointer;
  padding: 0;
  color: var(--color-text);
}

#pigeoninfo .pgn-modal__contents {
  display: block;
  max-width: 1024px;
  max-height: calc(100% - 24px);
  border-radius: 16px;
  padding: 0;
  border: none;
  position: fixed;
  inset-inline: 0;
  inset-block: 0;
  animation-name: fadeOut;
  animation-fill-mode: forwards;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  color: var(--color-text);
  overflow: visible;
  block-size: unset;
  padding: 24px;
  background-color: transparent;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__contents {
    max-width: none;
    width: 100%;
  }
}
#pigeoninfo .pgn-modal__contents::backdrop {
  background: rgba(225, 215, 215, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#pigeoninfo .pgn-modal__contents[open] {
  animation-name: fadeIn;
}
#pigeoninfo .pgn-modal__inner {
  padding: 32px;
  border-radius: 16px;
  background-color: var(--color-greige-light);
  block-size: auto;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__inner {
    padding: 40px 24px 48px;
  }
}
#pigeoninfo .pgn-modal__closeBtn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 0;
  background-color: transparent;
  border: none;
  background-image: url(/images/icons/icon_close_bg.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  cursor: pointer;
}
#pigeoninfo .pgn-modal__headingLv2 {
  text-align: center;
  font: var(--heading-32-bold-h2);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__headingLv2 {
    font: var(--heading-20-bold-h2);
  }
}
#pigeoninfo .pgn-modal__headingLv3 {
  text-align: center;
  font: var(--heading-20-bold-h2);
  margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__headingLv3 {
    grid-area: title;
    font: var(--heading-18-bold);
  }
}
#pigeoninfo .pgn-modal__lead {
  margin-top: 16px;
  margin-bottom: 48px;
  text-align: center;
  font: var(--nav-14-bold);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__lead {
    font: var(--nav-13-bold);
  }
}
#pigeoninfo .pgn-modal__img {
  padding-right: 31px;
  padding-left: 31px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__img {
    grid-area: img;
    padding-right: 0;
    padding-left: 0;
  }
}
#pigeoninfo .pgn-modal__text {
  margin-top: 10px;
  font: var(--text-14-regular-subtext);
  text-align: left;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__text {
    margin-top: 0;
    grid-area: text;
  }
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__grid {
    gap: 48px;
  }
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__gridItem {
    display: grid;
    grid-template-areas: "title title" "text img" "tag tag";
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
  }
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-modal__tagList {
    grid-area: tag;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*/////////////////////////////////////////////////////////////////////////////////////////////////

 imports

/////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
---
name: pgn-Link List
category: 03 Flow/F101 pgn-Link List
---

```html
<div class="pgn-linklistArea">
    <h2 class="pgn-linklistArea__heading">重要なお知らせ</h2>
    <ul class="pgn-linklist">
        <li class="pgn-linklist__item"><a class="pgn-link" href="">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。（100文字）</a></li>
        <li class="pgn-linklist__item"><a class="pgn-link" href="">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。（100文字）</a></li>
    </ul>
</div>
```
*/
#pigeoninfo .pgn-linklistArea {
  margin-top: 80px;
  padding: 24px 32px;
  border: 2px solid var(--color-brand);
  border-radius: 16px;
}
#pigeoninfo .pgn-linklistArea__heading {
  font: var(--heading-20-bold-h2);
}

#pigeoninfo .pgn-linklist__item {
  margin-top: 16px;
  text-indent: -1.25em;
  padding-left: 1.25em;
}
#pigeoninfo .pgn-linklist--2colLg {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-linklist--2colLg {
    grid-template-columns: repeat(1, 1fr);
  }
}
#pigeoninfo .pgn-linklist--2colLg .pgn-link {
  font-weight: bold;
}

#pigeoninfo .pgn-anchorLinkList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-top: 64px;
  gap: 32px;
  padding-right: 24px;
  padding-left: 24px;
  font: var(--nav-16-bold);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-anchorLinkList {
    margin-top: 56px;
    gap: 18px;
    padding-right: 16px;
    padding-left: 16px;
  }
}
#pigeoninfo .pgn-anchorLinkList__item {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-anchorLinkList__item {
    width: 100%;
    display: block;
  }
}
#pigeoninfo .pgn-anchorLinkList::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  display: block;
  width: 100%;
  height: 16px;
  border-radius: 16px 16px 0px 0px;
  border-top: 1px solid var(--color-red-light);
  border-right: 1px solid var(--color-red-light);
  border-left: 1px solid var(--color-red-light);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-anchorLinkList::before {
    width: 100%;
  }
}

/*
---
name: Anchor List
category: 03 Flow/F102 Anchor List
---

```html
<ul class="pgn-anchorLinkList">
    <li class="pgn-anchorLinkList__item"><a class="pgn-#anc01" href=""><img class="pgn-icon" src="/images/icons/icon_down.svg" alt="">飲む・食べる</a></li>
    <li class="pgn-anchorLinkList__item"><a class="pgn-#anc02" href=""><img class="pgn-icon" src="/images/icons/icon_down.svg" alt="">清潔に保つ</a></li>
    <li class="pgn-anchorLinkList__item"><a class="pgn-#anc03" href=""><img class="pgn-icon" src="/images/icons/icon_down.svg" alt="">お出かけする</a></li>
    <li class="pgn-anchorLinkList__item"><a class="pgn-#anc04" href=""><img class="pgn-icon" src="/images/icons/icon_down.svg" alt="">お部屋ですごす</a></li>
    <li class="pgn-anchorLinkList__item"><a class="pgn-#anc05" href=""><img class="pgn-icon" src="/images/icons/icon_down.svg" alt="">ママのからだをケアする</a></li>
</ul>
```
*/
/*
---
name: Thumbnail List
category: 03 Flow/F103 Thumbnail List
---

```html
<a class="pgn-thumbnailList" href="">
    <div class="pgn-grid pgn-grid--2-lg pgn-grid--1-sm">
        <div class="pgn-grid__item">
            <img src="/images/bnr_detergent.jpg" alt="">
        </div>
        <div class="pgn-grid__item">
            <p class="pgn-thumbnailList__title"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">【世界一幸せな洗濯】水通し応援キャンペーン♪「無添加ピュア　ベビー洗たく洗剤」をプレゼント！</p>
            <p class="pgn-paragraph">「世界一幸せな洗濯」出産準備の水通しを応援！<br>ピジョンのベビー洗たく洗剤で赤ちゃんにやさしいお洗たくはじめましょう。</p>
        </div>
    </div>
</a>
```
*/
#pigeoninfo .pgn-thumbnailList {
  margin-top: 80px;
  display: block;
  text-align: left;
}
#pigeoninfo .pgn-thumbnailList__title {
  font: var(--nav-18-bold);
  padding-left: 1.25em;
  text-indent: -1.25em;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-thumbnailList__title {
    font: var(--nav-16-bold);
  }
}
#pigeoninfo .pgn-thumbnailList:hover {
  text-decoration: none;
}
#pigeoninfo .pgn-thumbnailList:hover .thumbnailList__title {
  text-decoration: underline;
}
#pigeoninfo .pgn-thumbnailList .pgn-grid {
  align-items: center;
}
#pigeoninfo .pgn-thumbnailList .pgn-paragraph {
  margin-top: 16px;
  text-align: left;
}

/*
---
name: Card
category: 03 Flow/F104 Card
---

```html
<div class="pgn-card">
    <div class="pgn-grid pgn-grid--2-lg pgn-grid--1-sm">
        <div class="pgn-grid__item card__gridItem">
            <div class="pgn-card__item">
                <div class="pgn-card__body">
                    <div class="pgn-card__img">
                        <img src="/images/card_001.jpg" alt="">
                    </div>
                    <div class="pgn-card__meta">
                        <h3 class="pgn-card__title">飲む・食べる</h3>
                        <ul class="pgn-card__category">
                            <li>母乳</li>
                            <li>ミルク</li>
                            <li>母乳</li>
                            <li>ミルク</li>
                            <li>ミルク</li>
                        </ul>
                    </div>
                    <p class="pgn-card__text">リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文</p>
                </div>
                <div class="pgn-card__footer">
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                </div>
            </div>
            <div class="pgn-card__description">
                <div class="pgn-card__descriptionImg">
                    <img src="/images/chara_001.png" alt="">
                </div>
                <div class="pgn-card__descriptionComment">
                    <div class="pgn-card__descriptionCommentInner">
                        <p class="pgn-card__descriptionText">ミルクや母乳の飲み方や離乳食。本当にこれでいいの？ 不安になりますよね。<br>そんな方への情報もお届けします。</p>
                    </div>
                </div>
                <div class="pgn-card__modal modal" data-js-modal>
                    <div class="pgn-card__modalBtn">
                        <button class="pgn-modalOpen" data-js-modal-open>おくちのお助け隊員<img class="pgn-icon icon--right" src="/images/icons/icon_help.svg" alt=""></button>
                    </div>

                </div>
            </div>
        </div>
        <div class="pgn-grid__item card__gridItem">
            <div class="pgn-card__item">
                <div class="pgn-card__body">
                    <div class="pgn-card__img">
                        <img src="/images/card_001.jpg" alt="">
                    </div>
                    <div class="pgn-card__meta">
                        <h3 class="pgn-card__title">からだを<br>すこやかに保つ</h3>
                        <ul class="pgn-card__category">
                            <li>母乳</li>
                            <li>ミルク</li>
                            <li>母乳</li>
                            <li>ミルク</li>
                            <li>ミルク</li>
                        </ul>
                    </div>
                    <p class="pgn-card__text">リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文</p>
                </div>
                <div class="pgn-card__footer">
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                    <li class="pgn-card__btnItem">
                        <a class="pgn-btn" href=""><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">新生児～<br class="pgn-pcNone">ねんねの頃</a>
                    </li>
                </div>
            </div>
            <div class="pgn-card__description">
                <div class="pgn-card__descriptionImg">
                    <img src="/images/chara_001.png" alt="">
                </div>
                <div class="pgn-card__descriptionComment">
                    <div class="pgn-card__descriptionCommentInner">
                        <p class="pgn-card__descriptionText">ミルクや母乳の飲み方や離乳食。本当にこれでいいの？ 不安になりますよね。<br>そんな方への情報もお届けします。</p>
                    </div>
                </div>
                <div class="pgn-card__modal modal" data-js-modal>
                    <div class="pgn-card__modalBtn">
                        <button class="pgn-modalOpen" data-js-modal-open>おくちのお助け隊員<img class="pgn-icon icon--right" src="/images/icons/icon_help.svg" alt=""></button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
```

## card small
SPでは横スクロール

```html
<div class="pgn-cardSmall">
    <div class="pgn-grid pgn-grid--4-lg">
        <div class="pgn-grid-item">
            <div class="pgn-cardSmall__item">
                <a href="" class="pgn-cardSmall__link">
                    <img src="/images/product_001.jpg" alt="">
                    <p class="pgn-cardSmall__text"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">ピジョン商品一覧</p>
                </a>
            </div>
        </div>
        <div class="pgn-grid-item">
            <div class="pgn-cardSmall__item">
                <a href="" class="pgn-cardSmall__link">
                    <img src="/images/product_001.jpg" alt="">
                    <p class="pgn-cardSmall__text"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">ピジョン商品一覧</p>
                </a>
            </div>
        </div>
        <div class="pgn-grid-item">
            <div class="pgn-cardSmall__item">
                <a href="" class="pgn-cardSmall__link">
                    <img src="/images/product_001.jpg" alt="">
                    <p class="pgn-cardSmall__text"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">ピジョン商品一覧</p>
                </a>
            </div>
        </div>
        <div class="pgn-grid-item">
            <div class="pgn-cardSmall__item">
                <a href="" class="pgn-cardSmall__link">
                    <img src="/images/product_001.jpg" alt="">
                    <p class="pgn-cardSmall__text"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">ピジョン商品一覧</p>
                </a>
            </div>
        </div>
        <div class="pgn-grid-item">
            <div class="pgn-cardSmall__item">
                <a href="" class="pgn-cardSmall__link">
                    <img src="/images/product_001.jpg" alt="">
                    <p class="pgn-cardSmall__text"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">ピジョン商品一覧</p>
                </a>
            </div>
        </div>
    </div>
</div>
```
*/
#pigeoninfo .pgn-card {
  margin-top: 64px;
}
#pigeoninfo .pgn-card__body {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__body {
    flex-direction: column;
    row-gap: 24px;
  }
}
#pigeoninfo .pgn-card__item {
  display: block;
  border-radius: 24px;
  background-color: var(--color-gray-light);
  padding: 32px 0 56px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__item {
    padding: 0 0 48px;
    overflow: hidden;
  }
}
#pigeoninfo .pgn-card__img {
  width: 47.4%;
  transform: translate(24px, -56px);
  margin-bottom: -56px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__img {
    width: 100%;
    transform: translate(0, 0);
    margin-bottom: 0;
  }
}
#pigeoninfo .pgn-card__img img {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 292/182;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__img img {
    border-radius: 0;
  }
}
#pigeoninfo .pgn-card__meta {
  width: 47.4%;
  position: relative;
  padding-left: 32px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__meta {
    width: 100%;
    min-height: 96px;
    padding-left: 24px;
  }
}
#pigeoninfo .pgn-card__meta::before {
  content: "";
  position: absolute;
  left: 0;
  width: 12px;
  height: 100%;
  border-radius: 0px 8px 8px 0px;
  background-color: var(--color-icon);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__meta::before {
    width: 10px;
  }
}
#pigeoninfo .pgn-card__title {
  font: var(--heading-28-bold-h2-card);
}
#pigeoninfo .pgn-card__category {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  gap: 8px;
}
#pigeoninfo .pgn-card__category li {
  list-style: none;
  font: var(--text-13-regular-subtext);
}
#pigeoninfo .pgn-card__category li:not(:first-child):before {
  content: "";
  position: relative;
  top: -0.1em;
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: var(--color-icon);
  vertical-align: middle;
}
#pigeoninfo .pgn-card__text {
  grid-area: text;
  margin-top: 16px;
  padding-left: 32px;
  font: var(--text-14-regular-subtext);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__text {
    width: 100%;
    margin-top: 0;
    padding-left: 24px;
    font: var(--text-13-regular-subtext);
  }
}
#pigeoninfo .pgn-card__footer {
  margin-top: 32px;
  padding-right: 24px;
  padding-left: 24px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__footer {
    padding-right: 20px;
    padding-left: 20px;
  }
}
#pigeoninfo .pgn-card__btnList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__btnList {
    grid-template-columns: repeat(2, 1fr);
  }
}
#pigeoninfo .pgn-card__btnItem {
  list-style: none;
}
#pigeoninfo .pgn-card__btnItem .pgn-btn {
  margin-top: 0;
}
#pigeoninfo .pgn-card__description {
  display: flex;
  flex-wrap: wrap;
  transform: translateY(-21.5%);
  padding-right: 38px;
  padding-left: 38px;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__description {
    width: calc(100% + 48px);
    transform: translate(-24px, -36px);
    padding-right: 0;
    padding-left: 0;
  }
}
#pigeoninfo .pgn-card__description .pgn-modal {
  text-align: center;
}
#pigeoninfo .pgn-card__descriptionImg {
  width: 40.7%;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__descriptionImg {
    width: 46.9%;
  }
}
#pigeoninfo .pgn-card__descriptionImg > img {
  width: 93%;
}
#pigeoninfo .pgn-card__descriptionComment {
  position: relative;
  width: 57.9%;
  transform: translateY(8px);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__descriptionComment {
    width: 49%;
    transform: translateY(24px);
  }
}
#pigeoninfo .pgn-card__descriptionComment::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  display: inline-block;
  width: 23px;
  height: 18px;
  margin-top: auto;
  margin-bottom: auto;
  background-image: url(/images/icons/icon_comment.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}
#pigeoninfo .pgn-card__descriptionCommentInner {
  background: #F4E1DC;
  padding: 12px 32px;
  margin-bottom: 16px;
  border-radius: 27px;
  font: var(--nav-16-bold);
  line-height: 1.8;
  min-height: 170px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__descriptionCommentInner {
    padding: 12px 24px;
    font: var(--text-13-bold);
    min-height: 180px;
  }
}
#pigeoninfo .pgn-card__modal {
  width: 100%;
  margin-top: 10px;
}
#pigeoninfo .pgn-card__modalBtn {
  text-align: center;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__modalBtn {
    transform: translateY(-2%);
  }
}
#pigeoninfo .pgn-card__gridItem:nth-child(even) {
  transform: translateY(80px);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-card__gridItem:nth-child(even) {
    transform: none;
  }
}

#pigeoninfo .pgn-cardSmall {
  margin-top: 24px;
}
#pigeoninfo .pgn-cardSmall__img {
  border-radius: 8px;
}
#pigeoninfo .pgn-cardSmall__text {
  margin-top: 14px;
  font: var(--nav-16-bold);
  text-indent: -1.25em;
  padding-left: 1.25em;
}

/*
---
name: Hero Image
category: 03 Flow/F201 Hero Image
---

```html
<div class="pgn-heroimage">
    <div class="pgn-heroimage__main">
        <div class="pgn-heroimage__title">
            <img class="pgn-heroimage__welcome" src="/images/mainwelcome.svg" alt="Welcome to Pigeon info.">
            <img class="pgn-heroimage__icon" src="/images/icons/icon_child.svg" alt="">
            <img class="pgn-heroimage__catch" src="/images/maincatch.svg" alt="出産・育児ははじめての連続だから">
        </div>
        <div class="pgn-heroimage__img splide" data-js-mainvisual>
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <img class="pgn-heroimage__mainvisual" src="/images/mainvisual_001.jpg" alt="">
                    </li>
                    <li class="splide__slide">
                        <img class="pgn-heroimage__mainvisual" src="https://placehold.jp/1440x500.png" alt="">
                    </li>
                </ul>
            </div>
            <button type="button" class="pgn-heroimage__btn"><img src="/images/icons/icon_stop.svg" alt="停止する"></button>
        </div>
    </div>
    <p class="pgn-lead">赤ちゃんにやさしい世界を考え続けてきたピジョンが<br class="pgn-spNone">赤ちゃんと家族の成長のタイミングにあわせてサポートします。</p>
    <div class="pgn-heroimage__scroll">
        <img src="/images/mainscroll.svg" alt="scroll">
    </div>
</div>
```

## Hero Image Category
```html
<div class="pgn-heroimageSelect splide" data-js-sp-slider>
    <h2 class="pgn-heroimageSelect__title">Pickup</h2>
    <div class="splide__track">
        <ul class="splide__list pgn-heroimageSelect__list">
            <li class="splide__slide pgn-heroimageSelect__item">
                <a href="">
                    <p class="pgn-heroimageSelect__text">コモドライフ初企画＜あなたの出産エピソード大募集＞結果発表！！（３）「聞かせて！出産を終えてどうだった？「その２」<img class="pgn-icon pgn-icon--right" src="/images/icons/icon_arrow_thin.svg" alt=""></p>
                    <ul class="pgn-tagList pgn-heroimageSelect__tagList">
                        <li class="pgn-tag">離乳食</li>
                        <li class="pgn-tag">食べない</li>
                    </ul>
                    <img class="pgn-heroimageSelect__img" src="/growth/images/select_001.jpg" alt="">
                </a>
            </li>
            <li class="splide__slide pgn-heroimageSelect__item">
                <a href="">
                    <p class="pgn-heroimageSelect__text">コモドライフ初企画＜あなたの出産エピソード大募集＞結果発表！！（３）「聞かせて！出産を終えてどうだった？「その２」<img class="pgn-icon pgn-icon--right" src="/images/icons/icon_arrow_thin.svg" alt=""></p>
                    <ul class="pgn-tagList pgn-heroimageSelect__tagList">
                        <li class="pgn-tag">離乳食</li>
                        <li class="pgn-tag">食べない</li>
                    </ul>
                    <img class="pgn-heroimageSelect__img" src="/growth/images/select_001.jpg" alt="">
                </a>
            </li>
            <li class="splide__slide pgn-heroimageSelect__item">
                <a href="">
                    <p class="pgn-heroimageSelect__text">コモドライフ初企画＜あなたの出産エピソード大募集＞結果発表！！（３）「聞かせて！出産を終えてどうだった？「その２」<img class="pgn-icon pgn-icon--right" src="/images/icons/icon_arrow_thin.svg" alt=""></p>
                    <ul class="pgn-tagList pgn-heroimageSelect__tagList">
                        <li class="pgn-tag">離乳食</li>
                        <li class="pgn-tag">食べない</li>
                    </ul>
                    <img class="pgn-heroimageSelect__img" src="/growth/images/select_001.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
</div>
```

*/
#pigeoninfo .pgn-heroimage {
  position: relative;
  z-index: 2;
  background-color: var(--color-greige);
  padding-bottom: 72px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage {
    padding-bottom: 24px;
  }
}
#pigeoninfo .pgn-heroimage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/images/main_deco_001.png), url(/images/main_deco_002.png), url(/images/main_deco_003.png), url(/images/main_deco_004.png), url(/images/main_deco_005.png), url(/images/main_deco_006.png);
  background-repeat: no-repeat;
  background-position: top 7% left 27.5%, top 71% left 34%, top 82% left 3%, top 87% right 3%, top 90% right 11%, top 77% left 0%;
  background-size: 120px, 61px, 91px, 82px, 22px, 22px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage::before {
    background-image: url(/images/main_deco_002.png), url(/images/main_deco_003.png), url(/images/main_deco_004.png), url(/images/main_deco_005.png), url(/images/main_deco_006-sp.png);
    background-repeat: no-repeat;
    background-position: top 102% right 5%, top 33% left -3%, top 91% right 3%, top 58% right 3%, top 81% left 22%;
    background-size: 50px, 91px, 82px, 22px, 52px;
  }
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage {
    display: flex;
    flex-direction: column;
  }
}
#pigeoninfo .pgn-heroimage__btn {
  position: absolute;
  bottom: 39px;
  right: 91px;
  background-color: transparent;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  z-index: 2;
  padding: 0;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage__btn {
    right: 7px;
    bottom: 10px;
  }
}
#pigeoninfo .pgn-heroimage__btn > img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-greige);
  max-width: none;
}
#pigeoninfo .pgn-heroimage__main {
  position: relative;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage__main {
    flex-direction: column-reverse;
    justify-content: flex-end;
    order: 1;
    height: calc(100svh - 64px - 73px);
    max-height: 520px;
  }
}
@media screen and (max-height: 500px) {
  #pigeoninfo .pgn-heroimage__main {
    height: auto;
  }
}
#pigeoninfo .pgn-heroimage__title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  width: 24.7%;
  transform: translate(24%, 126px);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage__title {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    transform: translateY(-16px);
  }
}
#pigeoninfo .pgn-heroimage__welcome {
  width: 94%;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage__welcome {
    width: auto;
    height: 4.9vh;
  }
}
#pigeoninfo .pgn-heroimage__icon {
  width: 54px;
  transform: translateY(-16px);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage__icon {
    width: auto;
    height: 4.9vh;
  }
}
#pigeoninfo .pgn-heroimage__catch {
  width: 100%;
  margin-top: 12px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage__catch {
    width: 62%;
    height: 29vh;
    min-height: 192px;
    margin-right: auto;
    margin-left: auto;
    aspect-ratio: 260/271;
  }
}
#pigeoninfo .pgn-heroimage__img {
  position: relative;
  width: 68%;
  min-height: 537px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage__img {
    width: auto;
    height: 43vh;
    min-height: 240px;
    aspect-ratio: 1/1;
  }
}
#pigeoninfo .pgn-heroimage__img::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -300px;
  width: calc(100% + 300px);
  height: 149px;
  display: block;
  background-color: var(--color-greige);
  mask-image: url(/images/mainmask.png);
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage__img::after {
    left: 0;
    bottom: -3px;
    width: 100%;
    mask-image: url(/images/mainmask-sp.png);
    height: 74px;
  }
}
#pigeoninfo .pgn-heroimage__mainvisual {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage .pgn-lead {
    position: relative;
    z-index: 2;
    order: 3;
    font-size: 14px;
    padding-right: 24px;
    padding-left: 24px;
  }
}
#pigeoninfo .pgn-heroimage__scroll {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
  padding-bottom: 30px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimage__scroll {
    order: 2;
    margin-top: 32px;
    padding-bottom: 16px;
  }
}
#pigeoninfo .pgn-heroimage__scroll img {
  width: 43px;
}
#pigeoninfo .pgn-heroimage__scroll::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 1px;
  height: 30px;
  background: var(--color-btn-icon);
  animation: scrollIcon 2s ease-in-out infinite;
  opacity: 0;
  height: 16px;
}

@keyframes scrollIcon {
  0% {
    height: 0;
    top: 10px;
    opacity: 0;
  }
  30% {
    height: 16px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0;
  }
}
#pigeoninfo .pgn-heroimage .splide__track {
  height: 100%;
}
#pigeoninfo .pgn-heroimage .splide__slide {
  transition: opacity 3000ms cubic-bezier(0.25, 1, 0.5, 1) 0s;
}

#pigeoninfo .pgn-heroimageSelect {
  max-width: 1072px;
  margin: 48px auto 0;
  padding-right: 24px;
  padding-left: 24px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimageSelect {
    margin-top: 32px;
  }
}
#pigeoninfo .pgn-heroimageSelect__title {
  text-align: center;
  opacity: 1;
  height: auto;
  display: block;
  font: var(--heading-24-bold);
  color: var(--color-icon);
}
#pigeoninfo .pgn-heroimageSelect__title::before, #pigeoninfo .pgn-heroimageSelect__title::after {
  content: "";
  position: relative;
  top: -0.1em;
  display: inline-block;
  height: 14px;
  width: 3px;
  margin-right: 6px;
  margin-left: 6px;
  background-color: var(--color-icon);
  border-radius: 8px;
  transform: rotate(-35deg);
}
#pigeoninfo .pgn-heroimageSelect__title::after {
  transform: rotate(35deg);
}
#pigeoninfo .pgn-heroimageSelect.splide {
  visibility: visible;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimageSelect.splide {
    overflow: hidden;
  }
}
#pigeoninfo .pgn-heroimageSelect .splide__slide {
  flex-shrink: 1;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimageSelect .splide__slide {
    flex-shrink: 0;
  }
}
#pigeoninfo .pgn-heroimageSelect .splide__track {
  overflow: visible;
  margin-top: 16px;
}
#pigeoninfo .pgn-heroimageSelect .splide__pagination {
  margin-top: 64px;
  gap: 32px;
  transform: translateY(-2px);
}
#pigeoninfo .pgn-heroimageSelect .splide__pagination li {
  width: 14px;
  height: 14px;
  line-height: 0;
}
#pigeoninfo .pgn-heroimageSelect .splide__pagination__page {
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-btn-icon);
  border: 3px solid transparent;
  cursor: pointer;
}
#pigeoninfo .pgn-heroimageSelect .splide__pagination__page.is-active {
  width: 16px;
  height: 16px;
  border-color: #E53835;
  background-color: transparent;
  transform: translateY(-1px);
}
#pigeoninfo .pgn-heroimageSelect__list {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  margin-right: -16px;
  margin-left: -16px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimageSelect__list {
    margin-right: -12px;
    margin-left: -12px;
    justify-content: flex-start;
  }
}
#pigeoninfo .pgn-heroimageSelect__item {
  width: 33.33%;
  padding-right: 16px;
  padding-left: 16px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimageSelect__item {
    padding-right: 12px;
    padding-left: 12px;
  }
}
#pigeoninfo .pgn-heroimageSelect__item a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border-radius: 50px;
  background: var(--color-orange);
  padding-top: 30px;
  box-shadow: 0px 16px 24px 0px rgba(202, 170, 154, 0.7);
}
#pigeoninfo .pgn-heroimageSelect__item a:hover {
  text-decoration: none;
}
#pigeoninfo .pgn-heroimageSelect__item a:hover .pgn-heroimageSelect__text {
  text-decoration: underline;
}
#pigeoninfo .pgn-heroimageSelect__contents {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
#pigeoninfo .pgn-heroimageSelect__text {
  padding-right: 24px;
  padding-left: 24px;
  font: var(--nav-14-bold);
  text-align: center;
}
#pigeoninfo .pgn-heroimageSelect__tagList {
  padding-right: 24px;
  padding-left: 24px;
  justify-content: center;
}
#pigeoninfo .pgn-heroimageSelect__tagList .tag {
  background-color: var(--color-gray-light);
}
#pigeoninfo .pgn-heroimageSelect__img {
  width: 100%;
  height: 100%;
  margin-top: 30px;
  object-fit: cover;
  object-position: center;
  border-radius: 0 0 50px 50px;
  aspect-ratio: 4/3;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-heroimageSelect__img {
    height: auto;
    max-height: 250px;
  }
}

/*
---
name: Chara info
category: 03 Flow/F203 Chara info
---

```html
<div class="pgn-charainfo">
    <div class="pgn-grid pgn-grid--4-lg pgn-grid--2-sm gapNone">
        <div class="pgn-grid__item">
            <img src="/images/chara_001.png" alt="">
            <p class="pgn-caption">お口の成長<br>おたすけ隊員</p>
        </div>
        <div class="pgn-grid__item">
            <img src="/images/chara_002.png" alt="">
            <p class="pgn-caption">お口の成長<br>おたすけ隊員</p>
        </div>
        <div class="pgn-grid__item">
            <img src="/images/chara_003.png" alt="">
            <p class="pgn-caption">お口の成長<br>おたすけ隊員</p>
        </div>
        <div class="pgn-grid__item">
            <img src="/images/chara_004.png" alt="">
            <p class="pgn-caption">お口の成長<br>おたすけ隊員</p>
        </div>
    </div>
    <p class="pgn-paragraph">赤ちゃんの成長やママのからだをサポートする<br class="pgn-spNone">4人のおたすけ隊員が、タイミングにあわせた<br class="pgn-spNone">コンテンツをお届けします。</p>
    <div class="pgn-modal" data-js-modal>
        <div class="pgn-charainfo__link">
            <button class="pgn-modalOpen" data-js-modal-open><img class="pgn-icon" src="/images/icons/icon_help.svg" alt="">おたすけ隊員について</button>
        </div>
        <dialog class="pgn-modal__contents" data-js-modal-contents>
            <div class="pgn-modal__inner">
                <h2 class="pgn-modal__headingLv2">ピジョンおたすけ隊とは？</h2>
                <p class="pgn-modal__lead">赤ちゃんの成長やママのからだを<br class="pgn-pcNone">サポートする<br class="pgn-spNone">ピジョンのおたすけ隊員。<br>出産・育児の悩みに<br class="pgn-pcNone">寄りそった情報をお届けします。</p>
                <div class="pgn-grid pgn-grid--4-lg pgn-grid--1-sm">
                    <div class="pgn-grid__item modal__gridItem">
                        <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                        <div class="pgn-modal__img">
                            <img src="/images/chara_001.png" alt="pigeon.info">
                        </div>
                        <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                        <ul class="pgn-tagList pgn-modal__tagList">
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                        </ul>
                    </div>
                    <div class="pgn-grid__item pgn-modal__gridItem">
                        <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                        <div class="pgn-modal__img">
                            <img src="/images/chara_002.png" alt="pigeon.info">
                        </div>
                        <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                        <ul class="pgn-tagList pgn-modal__tagList">
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                        </ul>
                    </div>
                    <div class="pgn-grid__item modal__gridItem">
                        <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                        <div class="pgn-modal__img">
                            <img src="/images/chara_003.png" alt="pigeon.info">
                        </div>
                        <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                        <ul class="pgn-tagList pgn-modal__tagList">
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                        </ul>
                    </div>
                    <div class="pgn-grid__item modal__gridItem">
                        <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                        <div class="pgn-modal__img">
                            <img src="/images/chara_004.png" alt="pigeon.info">
                        </div>
                        <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                        <ul class="pgn-tagList pgn-modal__tagList">
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                            <li class="pgn-tag">母乳育児</li>
                        </ul>
                    </div>
                </div>
            </div>
            <button class="pgn-modal__closeBtn" type="button" data-js-modal-close>閉じる</button>
        </dialog>
    </div>
</div>
```
*/
#pigeoninfo .pgn-charainfo {
  transform: translateY(-8px);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-charainfo {
    transform: none;
  }
}
#pigeoninfo .pgn-charainfo__link {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
#pigeoninfo .pgn-charainfo .pgn-modalOpen {
  font: var(--nav-16-bold-125);
}
#pigeoninfo .pgn-charainfo .pgn-grid {
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-charainfo .pgn-grid {
    margin-top: 16px;
  }
}
#pigeoninfo .pgn-charainfo__text {
  font: var(--text-18-bold-read);
  margin-top: 0;
  text-align: center;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////

 imports

/////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
---
name: Heading
category: 04 Content/C101 Heading
---

## Heading Lv1

```html
<h1 class="pgn-headingLv1">
    <span class="pgn-headingLv1__category"><img src="/images/icons/icon_child.svg" alt="">飲む・食べる</span>
    新生児～ねんねの頃
    <span class="pgn-headingLv1__age">0歳以降～</span>
</h1>
```

## Heading Lv2

```html
<h2 class="pgn-headingLv2">
    <span class="pgn-headingLv2__category"><img src="/images/icons/icon_child.svg" alt="">赤ちゃんの成長</span>
    新生児～ねんねの頃
    <span class="pgn-headingLv2__age">0歳以降～</span>
</h2>
```

```html
<h2 class="pgn-headingLv2Left">商品を探す<span>Products</span></h2>
```
*/
#pigeoninfo .pgn-headingLv1,
#pigeoninfo .pgn-headingLv2 {
  margin-top: 96px;
  text-align: center;
  font: var(--heading-32-bold-h2);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv1,
  #pigeoninfo .pgn-headingLv2 {
    font: var(--heading-26-bold-h3);
  }
}
#pigeoninfo .pgn-headingLv1__category,
#pigeoninfo .pgn-headingLv2__category {
  display: flex;
  margin-bottom: 8px;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv1__category,
  #pigeoninfo .pgn-headingLv2__category {
    margin-bottom: 6px;
  }
}
#pigeoninfo .pgn-headingLv1__category img,
#pigeoninfo .pgn-headingLv2__category img {
  width: 48px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv1__category img,
  #pigeoninfo .pgn-headingLv2__category img {
    width: 40px;
  }
}
#pigeoninfo .pgn-headingLv1__age,
#pigeoninfo .pgn-headingLv2__age {
  display: block;
  color: var(--color-icon);
  font: var(--heading-18-bold);
  letter-spacing: 5.4px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv1__age,
  #pigeoninfo .pgn-headingLv2__age {
    margin-top: 6px;
    letter-spacing: 3.2px;
    font-size: 16px;
  }
}

#pigeoninfo .pgn-headingLv2:first-child {
  margin-top: 0;
}
#pigeoninfo .pgn-headingLv2--horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  margin-top: 48px;
  font: var(--heading-24-bold);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv2--horizontal {
    flex-direction: column;
    font: var(--heading-20-bold-h2);
  }
}
#pigeoninfo .pgn-headingLv2--horizontal:first-child {
  margin-top: 120px;
}
#pigeoninfo .pgn-headingLv2--horizontal .pgn-headingLv2__category {
  margin-bottom: 0;
}
#pigeoninfo .pgn-headingLv2--horizontal .pgn-headingLv2__category img {
  width: 40px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv2--horizontal .pgn-headingLv2__category img {
    width: 32px;
  }
}

@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-localnaviSet + .pgn-headingLv2 {
    margin-top: 80px;
  }
}

#pigeoninfo .pgn-headingLv1 {
  margin-top: 0;
  letter-spacing: 2.56px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv1 {
    font-size: 28px;
  }
}
#pigeoninfo .pgn-headingLv1__category {
  letter-spacing: normal;
  font: var(--text-14-bold-subtext);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv1__category {
    font: var(--text-13-bold);
  }
}
#pigeoninfo .pgn-headingLv1__category img {
  width: 24px;
}
#pigeoninfo .pgn-headingLv1__age {
  margin-top: 0;
  color: var(--color-text);
  letter-spacing: normal;
  font: var(--nav-18-bold);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv1__age {
    font: var(--text-16-bold-body);
  }
}

#pigeoninfo .pgn-headingLv2Left {
  margin-top: 80px;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  font-family: "Zen Maru Gothic";
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv2Left {
    font-size: 26px;
  }
}
#pigeoninfo .pgn-headingLv2Left:first-child {
  margin-top: 0;
}
#pigeoninfo .pgn-headingLv2Left > span {
  display: block;
  font-size: 16px;
  letter-spacing: 3.2px;
  color: var(--color-icon);
}

#pigeoninfo .pgn-headingLv3 {
  margin-top: 56px;
  padding-bottom: 12px;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  font-family: "Zen Maru Gothic";
  border-bottom: 1px solid var(--color-icon);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-headingLv3 {
    margin-top: 64px;
  }
}

#pigeoninfo .pgn-headingLv2Left + .pgn-headingLv3 {
  margin-top: 24px;
}

/*
---
name: Text
category: 04 Content/C102 Text
---

## Text

```html
<p class="pgn-paragraph">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
```

## Lead
```html
<p class="pgn-lead">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
```

## Caption
```html
<p class="pgn-caption">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
```
*/
#pigeoninfo .pgn-paragraph {
  font: var(--text-16-regular-body);
  margin-top: 32px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-paragraph {
    font: var(--text-14-regular-subtext);
  }
}

#pigeoninfo .pgn-lead {
  margin-top: 32px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-lead {
    font: var(--text-14-regular-subtext);
  }
}
#pigeoninfo .pgn-lead--small {
  margin-top: 24px;
  font: var(--text-16-regular-body);
}
#pigeoninfo .pgn-lead--smallLeft {
  margin-top: 80px;
  padding-left: 32px;
  font: var(--text-16-regular-body);
  text-align: left;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-lead--smallLeft {
    margin-top: 64px;
    padding-left: 0;
  }
}

#pigeoninfo .pgn-caption {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
#pigeoninfo .pgn-caption > span {
  font-size: 14px;
}

/*
---
name: Tag
category: 04 Content/C104 Tag
---

## Text

```html
<ul class="pgn-tagList">
    <li class="pgn-tag">母乳育児</li>
    <li class="pgn-tag">母乳育児</li>
    <li class="pgn-tag">母乳育児</li>
    <li class="pgn-tag">母乳育児</li>
    <li class="pgn-tag">母乳育児</li>
    <li class="pgn-tag">母乳育児</li>
    <li class="pgn-tag">母乳育児</li>
    <li class="pgn-tag">母乳育児</li>
</ul>
```
*/
#pigeoninfo .pgn-tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

#pigeoninfo .pgn-tag {
  padding: 2px 6px 3px;
  border-radius: 4px;
  background-color: var(--color-greige-middle);
  font-size: 10px;
  line-height: 1.5;
}

/*
---
name: Article Select
category: 04 Content/C105 Article Select
---

```html
<div class="pgn-articleSelect" id="anc01">
    <div class="pgn-articleSelect__head">
        <div class="pgn-articleSelect__meta">
            <h2 class="pgn-articleSelect__headingLv2">飲む・食べる</h2>
            <ul class="pgn-articleSelect__category">
                <li>母乳</li>
                <li>ミルク</li>
                <li>母乳</li>
                <li>ミルク</li>
                <li>ミルク</li>
            </ul>
        </div>
        <div class="pgn-articleSelect__description">
            <div class="pgn-articleSelect__descriptionComment">
                <div class="pgn-articleSelect__descriptionCommentInner">
                    <p class="pgn-articleSelect__descriptionText">ミルクや母乳の飲み方や離乳食。本当にこれでいいの？ 不安になりますよね。<br>そんな方への情報もお届けします。</p>
                </div>
            </div>
            <div class="pgn-articleSelect__descriptionImg">
                <img src="/images/chara_001.png" alt="">
            </div>
            <div class="pgn-articleSelect__modal pgn-modal" data-js-modal>
                <div class="pgn-articleSelect__modalBtn">
                    <button class="pgn-modalOpen" data-js-modal-open>おくちの<br class="pgn-pcNone">お助け隊員<img class="pgn-icon pgn-icon--right" src="/images/icons/icon_help.svg" alt=""></button>
                </div>
                <dialog class="pgn-modal__contents" data-js-modal-contents="">
                    <div class="pgn-modal__inner">
                        <h2 class="pgn-modal__headingLv2">ピジョンおたすけ隊とは？</h2>
                        <p class="pgn-modal__lead">赤ちゃんの成長やママのからだを<br class="pgn-pcNone">サポートする<br class="pgn-spNone">ピジョンのおたすけ隊員。<br>出産・育児の悩みに<br class="pgn-pcNone">寄りそった情報をお届けします。</p>
                        <div class="pgn-grid pgn-grid--4-lg pgn-grid--1-sm">
                            <div class="pgn-grid__item pgn-modal__gridItem">
                                <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                                <div class="pgn-modal__img">
                                    <img src="/images/chara_001.png" alt="pigeon.info">
                                </div>
                                <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                                <ul class="pgn-tagList pgn-modal__tagList">
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                </ul>
                            </div>
                            <div class="pgn-grid__item pgn-modal__gridItem">
                                <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                                <div class="pgn-modal__img">
                                    <img src="/images/chara_002.png" alt="pigeon.info">
                                </div>
                                <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                                <ul class="pgn-tagList pgn-modal__tagList">
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                </ul>
                            </div>
                            <div class="pgn-grid__item pgn-modal__gridItem">
                                <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                                <div class="pgn-modal__img">
                                    <img src="/images/chara_003.png" alt="pigeon.info">
                                </div>
                                <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                                <ul class="pgn-tagList pgn-modal__tagList">
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                </ul>
                            </div>
                            <div class="pgn-grid__item pgn-modal__gridItem">
                                <h3 class="pgn-modal__headingLv3">お口の成長<br class="pgn-spNone">おたすけ隊員</h3>
                                <div class="pgn-modal__img">
                                    <img src="/images/chara_004.png" alt="pigeon.info">
                                </div>
                                <p class="pgn-modal__text">はじめて育児の強い味方。飲み方や食べ方、乳歯のケアなど成長段階に合わせた、口の成長のサポート情報を紹介していきます。自身も1児の働くママ。</p>
                                <ul class="pgn-tagList pgn-modal__tagList">
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                    <li class="pgn-tag">母乳育児</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <button class="pgn-modal__closeBtn" type="button" data-js-modal-close="">閉じる</button>
                </dialog>
            </div>
        </div>
    </div>

    <div class="pgn-articleSelect__card" data-js-more-list>
        <div class="pgn-grid pgn-grid--4-lg pgn-grid--2-sm pgn-gapRowMedium-sm">
            <div class="pgn-grid-item" data-js-more-item>
                <div class="pgn-articleSelect__item">
                    <a href="" class="pgn-articleSelect__link">
                        <img src="/images/product_001.jpg" alt="">
                        <p class="pgn-articleSelect__text"><img class="pgn-icon" src="/images/icons/icon_arrow.svg" alt="">コモドライフ初企画＜あなたの出産エピソード大募集＞結果発表！！（３）「聞かせて！出産を終えてどうだった？その２」</p>
                        <ul class="pgn-tagList">
                            <li class="pgn-tag">0ヵ月～</li>
                            <li class="pgn-tag">0ヵ月～</li>
                        </ul>
                    </a>
                </div>
            </div>
        </div>
        <button class="pgn-articleSelect__btn pgn-btn" type="button" data-js-more-btn>飲む・食べる記事をもっと見る<img class="pgn-icon pgn-icon--right pgn-icon--large" src="/images/icons/icon_add.svg" alt=""></button>
    </div>
</div>
```
*/
#pigeoninfo .pgn-articleSelect {
  margin-top: 96px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect {
    margin-top: 64px;
  }
}
#pigeoninfo .pgn-articleSelect:first-child {
  margin-top: 160px;
}
#pigeoninfo .pgn-articleSelect + .pgn-articleSelect {
  margin-top: 120px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect + .pgn-articleSelect {
    margin-top: 48px;
  }
}
#pigeoninfo .pgn-articleSelect__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: -64px;
  padding-top: 28px;
  padding-left: 32px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__head {
    width: calc(100% + 48px);
    transform: translateX(-24px);
    padding-left: 24px;
    flex-direction: column;
    margin-bottom: 0;
  }
}
#pigeoninfo .pgn-articleSelect__head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  display: block;
  width: 100px;
  height: 12px;
  border-radius: 0px 0px 8px 8px;
  background-color: var(--color-icon);
}
#pigeoninfo .pgn-articleSelect__head::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 101px;
  background: linear-gradient(180deg, rgba(225, 215, 215, 0.8) 0%, rgba(225, 215, 215, 0) 100%);
  border-radius: 32px 32px 0px 0px;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__head::after {
    width: calc(100% - 24px);
    border-top-left-radius: 0;
  }
}
#pigeoninfo .pgn-articleSelect__meta {
  width: 48%;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__meta {
    width: 100%;
  }
}
#pigeoninfo .pgn-articleSelect__comment {
  width: 52%;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__comment {
    width: 100%;
  }
}
#pigeoninfo .pgn-articleSelect__headingLv2 {
  font-family: "Zen Maru Gothic";
  font-size: 40px;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__headingLv2 {
    font: var(--heading-28-bold-h2-card);
  }
}
#pigeoninfo .pgn-articleSelect__category {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  gap: 8px;
}
#pigeoninfo .pgn-articleSelect__category li {
  list-style: none;
  font: var(--text-13-regular-subtext);
}
#pigeoninfo .pgn-articleSelect__category li:not(:first-child)::before {
  content: "";
  position: relative;
  top: -0.1em;
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: var(--color-icon);
  vertical-align: middle;
}
#pigeoninfo .pgn-articleSelect__description {
  width: 53%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  transform: translateY(-64px);
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__description {
    width: 100%;
    margin-top: 40px;
    margin-bottom: -16px;
    transform: none;
  }
}
#pigeoninfo .pgn-articleSelect__description .pgn-modal {
  text-align: center;
  margin-top: 10px;
}
#pigeoninfo .pgn-articleSelect__descriptionImg {
  width: 37%;
  margin-top: -20px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__descriptionImg {
    width: 52%;
    transform: translateY(-16px);
    margin-top: 0;
  }
}
#pigeoninfo .pgn-articleSelect__descriptionImg > img {
  width: 94%;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__descriptionImg > img {
    padding: 10px 10px 0;
  }
}
#pigeoninfo .pgn-articleSelect__descriptionComment {
  position: relative;
  width: 50%;
  margin-bottom: 28px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__descriptionComment {
    width: 48%;
    margin-bottom: 0;
  }
}
#pigeoninfo .pgn-articleSelect__descriptionCommentInner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-yellow);
  padding: 32px 24px;
  border-radius: 27px;
  font: var(--nav-16-bold);
  line-height: 1.8;
  min-height: 180px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__descriptionCommentInner {
    padding: 12px 16px;
    font: var(--nav-14-bold);
  }
}
#pigeoninfo .pgn-articleSelect__descriptionCommentInner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -12px;
  display: inline-block;
  width: 13px;
  height: 18px;
  margin-top: auto;
  margin-bottom: auto;
  background-image: url(/images/icons/icon_comment-right.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  transform: translateY(16px);
}
#pigeoninfo .pgn-articleSelect__descriptionText {
  font: var(--text-14-regular-subtext);
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__descriptionText {
    font: var(--text-13-bold);
  }
}

#pigeoninfo .pgn-lead--smallLeft + .pgn-articleSelect {
  margin-top: 76px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-lead--smallLeft + .pgn-articleSelect {
    margin-top: 32px;
  }
}

#pigeoninfo .pgn-articleSelect__card {
  margin-top: 32px;
  position: relative;
  z-index: 2;
  padding-right: 32px;
  padding-left: 32px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-articleSelect__card {
    margin-top: 48px;
    padding-right: 0;
    padding-left: 0;
  }
}
#pigeoninfo .pgn-articleSelect__text {
  margin-top: 8px;
  padding-left: 1.25em;
  text-indent: -1.25em;
  font: var(--nav-14-bold);
}
#pigeoninfo .pgn-articleSelect .pgn-tagList {
  margin-top: 12px;
}
#pigeoninfo .pgn-articleSelect .pgn-btn {
  max-width: 619px;
  display: block;
  margin: 48px auto 0;
  padding-right: 34px;
  padding-left: 20px;
}
#pigeoninfo .pgn-articleSelect__link:hover {
  text-decoration: none;
}
#pigeoninfo .pgn-articleSelect__link:hover .pgn-articleSelect__text {
  text-decoration: underline;
}
#pigeoninfo .pgn-articleSelect__link:hover .pgn-tagList {
  text-decoration: none;
}
#pigeoninfo .pgn-articleSelect__link > img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background-color: var(--color-gray-light);
}

#pigeoninfo [data-js-more-item] {
  display: none;
}

/*
---
name: Mainvisual Category
category: 04 Content/C106 Mainvisual Category
---

```html
<div class="pgn-mainvisualCategory">
    <div class="pgn-mainvisualCategory__inner">
        <div class="pgn-mainvisualCategory__img">
            <picture>
                <source srcset="/growth/images/main-baby0-2months-sp.jpg" media="(max-width: 768px)" />
                <img src="/growth/images/main-baby0-2months.jpg" alt="">
            </picture>
        </div>
    </div>
</div>
```
*/
#pigeoninfo .pgn-mainvisualCategory {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
#pigeoninfo .pgn-mainvisualCategory__inner {
  position: absolute;
  top: 0;
  margin-right: auto;
  margin-left: auto;
  z-index: -1;
  width: 1920px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 1440px) {
  #pigeoninfo .pgn-mainvisualCategory__inner {
    left: -250px;
    transform: none;
  }
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-mainvisualCategory__inner {
    width: 750px;
    left: 50%;
    transform: translateX(-50%);
  }
}
#pigeoninfo .pgn-mainvisualCategory__img {
  position: relative;
  width: 100%;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////

 imports

/////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
---
name: Link
category: 05 Action/A101 Link
---

## Link

```html
<a class="pgn-link" href=""><img class="pgn-icon" src="/common/images/icons/icon_arrow.svg" alt="">【世界一幸せな洗濯】水通し応援キャンペーン♪「無添加ピュア　ベビー洗たく洗剤」をプレゼント！</a>
```

## Anchor Link

```html
<a class="pgn-link" href=""><img class="pgn-icon" src="/common/images/icons/icon_arrow.svg" alt="">【世界一幸せな洗濯】水通し応援キャンペーン♪「無添加ピュア　ベビー洗たく洗剤」をプレゼント！</a>
```

## Link Small

```html
<a class="pgn-link" href=""><img class="pgn-icon" src="/common/images/icons/icon_arrow.svg" alt="">【世界一幸せな洗濯】水通し応援キャンペーン♪「無添加ピュア　ベビー洗たく洗剤」をプレゼント！</a>
```

## Link Prev

```html
<a class="pgn-link" href=""><img class="pgn-icon" src="/common/images/icons/icon_arrow.svg" alt="">【世界一幸せな洗濯】水通し応援キャンペーン♪「無添加ピュア　ベビー洗たく洗剤」をプレゼント！</a>
```

## Link Next

```html
<a class="pgn-link" href=""><img class="pgn-icon" src="/common/images/icons/icon_arrow.svg" alt="">【世界一幸せな洗濯】水通し応援キャンペーン♪「無添加ピュア　ベビー洗たく洗剤」をプレゼント！</a>
```
*/
#pigeoninfo .pgn-link {
  text-decoration: none;
  color: var(--color-text);
  font: var(--text-16-regular-body);
}
#pigeoninfo .pgn-link:hover {
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-link {
    font: var(--text-14-regular);
  }
}

/*
---
name: Button
category: 05 Action/A102 Button
---

## Button

```html
<a href="" class="pgn-btn pgn-btn--large"><img class="pgn-icon" src="/common/images/icons/icon_arrow.svg" alt="">ボタンラベル</a>
```

```html
<a href="" class="pgn-btn pgn-btn--large"><img class="pgn-icon" src="/common/images/icons/icon_arrow.svg" alt="">ボタンラベル</a>
```

## Localnavi Button

```html
<a href="" class="pgn-btn">記事を見る<img class="pgn-icon icon--right icon--large" src="/images/icons/icon_add.svg" alt=""></a>
```

```html
<button type="button" class="pgn-btn">記事を見る<img class="pgn-icon icon--right icon--large" src="/images/icons/icon_add.svg" alt=""></button>
```

## Options

```html
<a href="" class="pgn-btn pgn-btn--autoWidth"><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">ボタンラベル</a>
```

```html
<button type="button" class="pgn-btn pgn-btn--autoWidth"><img class="pgn-icon" src="/images/icons/icon_arrow_thin.svg" alt="">ボタンラベル</button>
```

```html
<a href="" class="pgn-btn pgn-btn--disabled"><img class="pgn-icon" src="/images/icons/" alt="">ボタンラベル</a>
```

```html
<button type="button" class="pgn-btn pgn-btn--disabled" disabled><img class="pgn-icon" src="/images/icons/" alt="">ボタンラベル</button>
```
*/
#pigeoninfo .pgn-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 17px 0 29px;
  text-align: center;
  border-radius: 24px;
  border: 1px solid var(--color-red-light);
  background-color: var(--color-white);
  font: var(--nav-14-bold-125);
  color: var(--color-text);
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-btn {
    font: var(--nav-12-bold-125);
    padding: 0 16px 0 28px;
  }
}
#pigeoninfo .pgn-btn:hover {
  text-decoration: none;
  background-color: #FDEEEE;
}
#pigeoninfo .pgn-btn:visited {
  color: var(--color-text);
}
#pigeoninfo .pgn-btn--large {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding: 11px 21px 11px 34px;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-btn--large {
    font: var(--nav-16-bold);
  }
}
#pigeoninfo .pgn-btn--autoWidth {
  width: auto;
  padding-left: 37px;
}
#pigeoninfo .pgn-btn--disabled {
  border-color: #BFBFBF;
  opacity: 0.2;
  background-color: var(--color-white);
  cursor: default;
  pointer-events: none;
}
#pigeoninfo .pgn-btn .pgn-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 16px;
  margin-top: auto;
  margin-bottom: auto;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-btn .pgn-icon {
    left: 16px;
  }
}
#pigeoninfo .pgn-btn .pgn-icon--right {
  left: auto;
  right: 11px;
}
#pigeoninfo .pgn-btn .pgn-icon--large {
  width: 24px;
}

/*
---
name: SNS
category: 05 Action/A103 SNS
---

## SNS

```html
<div class="pgn-sns">
    <p class="pgn-sns__lead pgn-lead">成長のタイミングにあわせて<br>アドバイスが届く！</p>
    <img class="pgn-sns__img" src="/images/img_003.jpg" alt="">
    <p class="pgn-sns__text">4人のおたすけ隊員が、<br>Lineで赤ちゃんの成長やママのからだを<br>サポートするコンテンツをお届け！</p>
    <a href="" class="pgn-sns__link">
        <img class="pgn-sns__linkImg" src="/images/sns_line.png">
        <p class="pgn-sns__linkText"><span>ピジョン公式LINE</span>ピジョンインフォ</p>
    </a>
</div>
```
*/
#pigeoninfo .pgn-sns {
  margin-top: 24px;
  text-align: center;
}
#pigeoninfo .pgn-sns__lead {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-sns__lead {
    font: var(--nav-18-bold);
  }
}
#pigeoninfo .pgn-sns__img {
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-sns__img {
    width: 100%;
    max-width: none;
  }
}
#pigeoninfo .pgn-sns__text {
  margin-top: 16px;
  text-align: center;
  font: var(--text-14-regular);
}
#pigeoninfo .pgn-sns__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 32px auto 0;
  background-color: var(--color-white);
  border-radius: 8px;
  padding: 16px;
}
#pigeoninfo .pgn-sns__linkImg {
  width: 48px;
}
#pigeoninfo .pgn-sns__linkText {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
#pigeoninfo .pgn-sns__linkText span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////

 imports

/////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
---
name: Icon
category: 06 Utility/U101 Icon
---

```html
<img class="pgn-icon" src="/common/images/icons/icon_arrow.svg" alt="">
```
*/
#pigeoninfo .pgn-icon {
  position: relative;
  top: -0.1em;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  margin-right: 0.25em;
}
#pigeoninfo .pgn-icon--right {
  margin-right: 0;
  margin-left: 0.25em;
}

/*
---
name: Display
category: 06 Utility/U101 Display
---

```html
<img class="pgn-pcNone" src="/common/images/icons/icon_arrow.svg" alt="">
```

```html
<img class="pgn-spNone" src="/common/images/icons/icon_arrow.svg" alt="">
```
*/
#pigeoninfo .pgn-pcNone {
  display: none;
}
@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-pcNone {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  #pigeoninfo .pgn-spNone {
    display: none;
  }
}