@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital@0;1&display=swap');


/*共通*/
@media only screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }

  #sb-container {
    display: none !important;
  }
}

main * {
  color: #1D1D1D;
}

:root {
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-family-default: 'Lato', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  --font-family-marugo: dnp-shuei-mgothic-std, "Shuei MaruGo", var(--font-family-default);
  --font-family-worksans: "Work Sans", sans-serif;
  --background-color-maternity_light: #fff3f4;
  --background-color-baby_light: #fef8ea;
  --background-color-kids_light: #fff2e1;
  --background-color-face_light: #ffe9e4;
  --background-color-care_light: #faeef2;
  --background-color-uv_light: #f0f9ff;
  --border-color-maternity: #fcdadc;
  --border-color-baby: #fae9c2;
  --border-color-kids: #fce3c2;
  --border-color-face: #fad3ca;
  --border-color-care: #f5d8e0;
  --border-color-uv: #b7dcf3;
  --color-maternity: #fba2a6;
  --color-baby: #dfa726;
  --color-kids: #fbaa3c;
  --color-face: #fba592;
  --color-care: #d596a1;
  --color-uv: #6db9e7;
}

.worksans {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#header .header-top a {
  color: #666;
}

.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.marugo {
  font-family: var(--font-family-marugo) !important;
}

html,body {
  font-family: var(--font-family-default);
}

html {
  scroll-behavior: smooth;
}

#contents a {
  color: #1D1D1D;
  text-decoration: none;
}

a:hover {
  opacity: .5;
  transition: .3s;
}

#contents img {
  width: 100%;
}

p {
  margin: 0;
}

#contents {
  margin-top: 48px;
}

@media (max-width: 768px) {
  #contents {
    margin-top: 0px;
  }
}

#wrapper {
  position: relative;
}

html .contents_wrap_maxwidth {
  max-width: none;
}

@media (max-width: 768px) {
.head_navi_top li a p,.head_navi_top li .nav_btn p {
  color: #666;
}
}

#contents .contents {
  width: 100%;
  max-width: 1160px;
  margin: auto;
  padding: 40px 20px;
}

@media (max-width: 768px) {
  .contents {
    padding: 20px;
  }
}

.contents_area:not(:last-child) {
  border-bottom: solid 1px #EEEEEE;
}

.contents_heading_wrapper {
  margin-bottom: 30px;
}

.contents_heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.contents_heading_main {
  font-size: 28px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .contents_heading_main {
    font-size: 14px;
  }
}

.contents_heafing_sub {
  margin-top: 5px;
  font-size: 14px;
  color: #888888;
}

/*アイコン付きリンク*/
#contents  .contents_heading_link {
  flex-shrink: 0;
  position: relative;
  font-size: 14px;
  color: #5EA8DD;
}

@media (max-width: 768px) {
  #contents .contents_heading_link {
    font-size: 12px;
  }
}

.contents_heading_link::before {
  position: absolute;
  top: 0;
  left: -25px;
  display: block;
  width: 20px;
  height: 20px;
  background: #5EA8DD;
  border-radius: 20px;
  content: "";
}

.contents_heading_link::after {
  position: absolute;
  top: 0;
  left: -25px;
  display: block;
  width: 20px;
  height: 20px;
  background: url("../img/arrow-right-s-line-white.png");
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

.contents_list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
}

.contents_list_item {
  display: flex;
  gap: 20px;
  width: calc(100% / 2 - (40px - 40px / 2));
}

@media (max-width: 768px) {
  .contents_list_item {
    width: 100%;
    margin: 0 4px;
  }
}

.contents_list_category {
  margin-bottom: 16px;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .contents_list_category {
    margin-bottom: 10px;
  }
}

.category_name {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
  font-size: 16px;
  color: #666666;
}

@media (max-width: 768px) {
  .category_name {
    font-size: 12px;
  }
}

.category_name::before {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 34px;
  height: 34px;
  background: #FFF9D7;
  border-radius: 34px;
  transform: translate(-50%, -50%);
  content: "";
}

@media (max-width: 768px) {
  .category_name::before {
  left: 12px;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  transform: translate(-50%, -50%);
  content: "";
}
}

.category_name::after {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 17px;
  height: 17px;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  content: "";
}

@media (max-width: 768px) {
  .category_name::after {
  left: 13px;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
}
}

.category_name.baby::after {
  background-image: url("../img/baby.png");
}

.category_name.maternity::after {
  background-image: url("../img/maternity.png");
}

.category_name.beauty::after {
  background-image: url("../img/beauty.png");
}

#main .contents_list_category .category_date {
  padding-left: 7px;
  color: #888888;
  font-size: 16px;
}

@media (max-width: 768px) {
  #main .contents_list_category .category_date {
  font-size: 12px;
}
}

.contents_list_heading {
  font-size: 16px;
}

@media (max-width: 768px) {
  .contents_list_heading {
  font-size: 12px;
}
}

.category_tag {
  display: inline-block;
  padding: 3px 5px;
  margin-bottom: 4px;
  line-height: 1;
  font-size: 12px;
  background: #FFF9D7;
}

#main .category_date_blue {
  margin-bottom: 4px;
  color: #5EA8DD;
}

.contents_list_image {
  flex-shrink: 0;
  width: 40%;
  max-width: 140px;
}

@media (max-width: 768px) {
  .contents_list_text {
    flex-basis: 75%;
  }
}

@media (max-width: 768px) {
  .contents_list_image {
    flex-shrink: 10;
    width: 100%;
  }
}

.useful_column_area .contents_list_image img {
  object-fit: cover;
  aspect-ratio: 1 / 1; 
}

.contents_place .place {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 10px;
  font-size: 14px;
}

.contents_place .place_icon {
  width: 13px;
  height: 13px;
}

#main .contents_tag_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap:4px;
}

#main .contents_line_tag {
  margin-top: 6px;
  border: solid 1px #5ea8dd;
  color: #5ea8dd;
  background-color: #fff;
  border-radius: 3px;
  padding: 5px 15px;
  font-size: 1.2rem;
  line-height: 1;
}

@media (max-width: 768px) {
  #main .contents_line_tag {
    padding: 5px;
  }
}

.contents_description {
  margin-top: 30px;
}

.break {
  display: none;
}

@media (max-width: 768px) {
  .break {
    display: block;
  }
}

/*slick*/
.slick-track {
  display: flex;
}

.slick-track::before,
.slick-track::after {
  content: "";
  display: table;
}

.slick-slide {
  float: none;
  height: auto !important;
}

.slick-next,
.slick-prev {
  position: absolute;
  /* top: calc((100vh - (70px + 80px + 48px + 40px)) / 2); */
  top: calc(435px / 2);
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  color: transparent !important;
  filter: drop-shadow(0 0 3px #888888);
  z-index: 9;
}

@media (max-width: 768px) {

  .slick-next,
  .slick-prev {
    top: calc(44vw / 2);
    width: 30px;
    height: 30px;
  }
}

.slick-next:focus-visible,
.slick-prev:focus-visible {
  outline: none;
}

.slick-prev {
  /* left: calc((100% - 1160px) / 2 + 110px); */
  left: 25px;
}

.slick-next {
  /* right: calc((100% - 1160px) / 2 + 110px); */
  right: 25px;
}

.slick-prev::before,
.slick-prev::after {
  left: 15px;
}

@media (max-width: 768px) {
  .slick-prev::before,
  .slick-prev::after {
    left: 20px;
  }
}

.slick-next::before,
.slick-next::after {
  right: 15px;
}

@media (max-width: 768px) {
  .slick-next::before,
  .slick-next::after {
    right: 8px;
  }
}

.slick-prev::before,
.slick-next::before,
.slick-prev::after,
.slick-next::after {
  display: block;
  position: absolute;
  width: 3px;
  height: 30px;
  background: #FFFFFF;
  background-size: contain;
  content: "";
}

.slick-prev::after,
.slick-next::before {
  transform: rotate(-45deg);
}

.slick-prev::before,
.slick-next::before {
  top: 0;
}

@media (max-width: 768px) {
  .slick-prev::before,
  .slick-next::before {
    top: -2px;
  }
}

.slick-prev::after,
.slick-next::after {
  bottom: 0;
}

@media (max-width: 768px) {
  .slick-prev::before {
    bottom: 0;
  }
}

.slick-next::before {
  bottom: 8px;
}

@media (max-width: 768px) {
  .slick-next::before {
      bottom: 0;
    }
}

.slick-prev::before,
.slick-next::after {
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .slick-prev::before,
  .slick-next::before,
  .slick-prev::after,
  .slick-next::after {
    height: 20px;
  }
}


.slick-disabled::before,
.slick-disabled::after {
  display: none;
}

/*ナビゲーション*/
.contents_navi {
  position: fixed;
  top: 161px;
  left: 0;
  width: 100%;
  background: #FFFFFF;
  border-bottom: solid 1px #EEEEEE;
  z-index: 10;
}

@media (max-width: 768px) {
  .contents_navi {
    position: sticky;
    top: 50px;
    white-space: nowrap;
    overflow-x: scroll;
  }
}

.contents_navi_list {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1160px;
  margin: auto;
  padding: 0;
}

.contents_navi_item {
  /* width: calc(100% / 7); */
  width: calc(100% / 6);
  height: 48px;
  padding: 8px;
}

@media (max-width: 768px) {
  .contents_navi_item {
    width: 100%;
    /* border-right: solid 1px #EEEEEE;
    border-bottom: solid 1px #EEEEEE; */
  }
}

/* @media (max-width: 768px) {
  .contents_navi_item:nth-child(3) {
    border-right: none;
  }
} */

@media (max-width: 768px) {
  .contents_navi_item:nth-child(6) {
    border-right: none;
  }
}

/* @media (max-width: 768px) {
  .contents_navi_item:nth-child(-n + 3) {
    width: calc(100% / 3 - (1px - 1px / 3));
  }
}

@media (max-width: 768px) {
  .contents_navi_item:nth-child(n + 4):nth-child(-n + 7) {
    width: calc(100% / 4 - (1px - 1px / 4));
  }
} */

.contents_navi_item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #1D1D1D;
  font-size: 15px;
  text-decoration: none;
}

/* .contents_navi_item a {
	-webkit-tap-highlight-color: transparent;
} */

@media (max-width: 768px) {
  .contents_navi_item a {
    padding: 8px 12px;
      font-size: 11px;
      font-weight: bold;
      color: #666;
    }
}

.contents_navi_item.active a {
  border-radius: 48px;
  background: #f0f9ff;
}

/* ホバー操作ができる端末（PC）のみ。タッチ端末ではタップ後に :hover が
   残り続け、文字が薄く見えてしまうため除外する */
@media (hover: hover) and (pointer: fine) {
  .contents_navi_item:hover {
    opacity: .5;
    transition: .3s;
  }
}

/* タッチ端末では、グローバルの a:hover（opacity:.5）がタップ後も
   残り続けてナビが薄くなるため、ナビのリンクだけ濃いまま固定する */
@media (hover: none), (pointer: coarse) {
  .contents_navi_item a:hover {
    opacity: 1;
  }
}

/* .contents_navi_item.active {
  background: #f0f9ff;
} */

#mainContents {
  color: #7d7d7d;
  font-family: var(--font-family-default);
  margin: auto;
}

/*ページ内遷移時の位置ずれ対策*/
#contents,#useful_column,#youtube,#podcast,#liveshopping,#instagram,#event {
  scroll-margin-top: 48px;
}

@media (max-width: 768px) {
#contents,#useful_column,#youtube,#podcast,#liveshopping,#instagram,#event {
  scroll-margin-top: calc(48px + 53px);
}
}

/*ファーストビュー*/
.first_view_area {
  padding: 20px 0;
  background: #F7F7F7;
  width: 100%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .first_view_area {
    padding: 10px 20px;
    overflow: hidden;
  }
}

.first_view_area .slick-list {
	overflow: visible !important;
}

.first_view_slider_wrapper {
  max-width: 970px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .first_view_slider_wrapper {
  max-width: none;
}
}

/* .first_view_slick {
  max-width: 870px;
  margin: auto;
  opacity: 1;
} */

@media (max-width: 768px) {
  .first_view_slick .slick-next{
    right: calc(5% / 2);
  }

  .first_view_slick .slick-prev {
    left: calc(5% / 2 - 12px);
  }
}

.first_view_item {
  padding: 0 50px;
}

@media (max-width: 768px) {
  .first_view_item {
    max-height: none;
    padding: 0 4px;
  }
}

.first_view_item img {
  width: 100%;
  /* max-height: calc(100vh - (70px + 80px + 48px + 40px)); */
  max-height: 435px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .first_view_item img {
    max-height: 44vw;
    border: solid 1px #E6E6E6;
  }
}

.first_view_text {
  margin-top: 8px;
  font-size: 20px;
}

@media (max-width: 768px) {
  .first_view_text {
    font-size: 12px;
  }
}

/*お役立ちコラム*/
.useful_column_area .contents_list_heading {
  color: #666666;
}

/*YouTube*/
.movie_list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 20px;
}

@media (max-width: 768px) {
  .mobile_slider .slick-next {
    right: calc(5% / 2);
  }

  .mobile_slider .slick-prev {
    left: calc(5% / 2 - 12px);
  }
}

.movie_list_item {
  width: calc(100% / 4 - (20px - 20px / 4));
}

@media (max-width: 768px) {
  .movie_list_item {
    width: 100%;
    padding: 0 4px;
  }
}

.movie_thum {
  margin-bottom: 8px;
}

.movie_title {
  font-size: 16px;
}

/*Instagram*/
@media (max-width: 768px) {
  .instagram_slider .slick-next { right: -16px; }
  .instagram_slider .slick-prev { left: -25px; }
}

.instagram.contents_list {
  gap: 20px;
}

.hacobune-grid-container {
  position: relative;
  z-index: 0;
}

.instagram_area .hacobune-mix-list-item-description[data-v-16023111] {
  display: block;
}

.hacobune-mix-list-item-description > span {
  display: block;
  font-size: 12px;
}

.instagram_slider .hacobune-grid-col[data-v-56a78f0f] {
  flex: none;
  width: calc(100% / 6 - (20px - 20px / 6));
  max-width: none;
  border: solid 1px #EEEEEE;
}

@media (max-width: 768px) {
  .hacobune-grid-col {
    margin: 0 4px;
  }
}

.instagram_area .hacobune-video-icon  {
  display: none;
}

.instagram_area .hacobune-logo[data-v-98dff1d2] {
  display: none;
}

.hacobune-app-container {
  padding: 0;
}

.hacobune-mix-search {
  display: none;
}

/* カードを固定高さにし、画像以外の余白を文章で埋める */
.instagram_area .hacobune-mix-list-item {
  height: 385px;
  overflow: hidden;
}

.instagram_area .hacobune-mix-list-item-wrapper[data-v-16023111] {
  overflow: hidden;
}

.instagram_area .hacobune-mix-list-item-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.instagram_area .hacobune-swiper-wrapper {
  gap: 20px;
}

@media (max-width: 768px) {
  .instagram_area .hacobune-swiper-wrapper {
      gap: 8px;
    }
}

.instagram_area .hacobune-app-container[data-v-ad5aa956] {
  padding: 0;
}

.instagram_area .hacobune-mix-list-item-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.instagram_area .hacobune-swiper-slide {
  width: calc(100% / 6 - (20px - 20px / 6)) !important;
  margin: auto;
  /* height: 385px; */
}

@media (max-width: 768px) {
  .instagram_area .hacobune-swiper-slide {
    width: calc(100% / 2 - (8px - 8px / 2)) !important;
  }
}

.instagram_area .hacobune-card-slider-list-item-figure-thumbnail[data-v-36636ddc] {
  aspect-ratio: auto;
  border: solid 1px #EEEEEE;
}

.instagram_area .hacobune-card-slider-list-item[data-v-36636ddc] {
  padding: 0;
}

.instagram_area .hacobune-card-slider-list-item-description[data-v-36636ddc] {
  display: none;
}

.hacobune-card-slider-list-item-caption-profile-head {
  display: none;
}

.hacobune-card-slider-list-item-caption[data-v-36636ddc], .hacobune-card-slider-list-item-main[data-v-36636ddc] {
  height: auto;
}

.hacobune-containers-card-slider[data-v-3466951c] .card-slider-hacobune-slider-prev,
.hacobune-containers-card-slider[data-v-3466951c] .card-slider-hacobune-slider-next {
  top: 50%;
  z-index: 9 !important;
}

/* 画像は潰さず自然な高さを保つ */
.instagram_area .hacobune-mix-list-item-figure {
  flex-shrink: 0;
}

.hacobune-mix-list-item-description {
  padding: 8px;
  overflow: hidden;
  /* 残りの余白を文章で埋める */
  flex: 1 1 auto;
  min-height: 0;
}

/* 3点リーダーは JS(adjustInstagramClamp) が本文を直接切り詰めて付与する。
   span は通常のブロックとして残り高さ内に表示し、はみ出しは隠す。 */
.hacobune-mix-list-item-description > span {
  display: block;
  padding: 8px;
  line-height: 1.5;
}

.instagram_area .slick-slide .hacobune-mix-video-icon {
  display: none;
}

/*イベントエリア*/
@media (max-width: 768px) {
  .event_area .contents_list_item {
    flex-direction: column;
    padding: 10px;
    border: solid 1px #EEEEEE;
  }

  .event_area .contents_list_image{
    width: 100%;
    max-width: none;
    margin-bottom: 8px;
  }

  .event_slider .slick-next,
  .event_slider .slick-prev {
    top: 50%;
  }

  .event_slider .slick-next {
    right: calc(5% / 2);
  }

  .event_slider .slick-prev {
    left: calc(5% / 2 - 12px);
  }
}

/*バナーエリア*/
.banner_list {
  display: flex;
  flex-wrap: wrap;
  gap: 35px 10px;
}

@media (max-width: 768px) {
  .banner_list {
    gap: 10px;
  }
}

.banner_item {
  display: inline-block;
  width: calc(100% / 2 - (10px - 10px / 2));
}

@media (max-width: 768px) {
  .banner_item {
    width: 100%;
  }
}