@charset "UTF-8";
/* ----------------------------------------------------
	sassを使用しています。css編集の際はご注意ください。
	compass/scss
---------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
/* ----------------------------------------------------
font
---------------------------------------------------- */
h2, h3, h4, h5, h6 {
  font-family: 'Zen Maru Gothic', sans-serif;
}

.book_title {
  font-family: 'Zen Maru Gothic', sans-serif;
}

/* ----------------------------------------------------
kodomo
---------------------------------------------------- */
main {
  margin-top: 100px;
}
@media (max-width: 599px) {
  main {
    margin-top: 15.385vw;
  }
}

/* ----------------------------------------------------
header
---------------------------------------------------- */
header a {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700 !important;
}
header .sp_navi_item .subnavibtn {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700 !important;
}
header .sp_navi_item p {
  font-family: 'Zen Maru Gothic', sans-serif;
}

#gnavibtn .btn-inr span {
  height: 3px;
  border-radius: 100px;
  background: #ffae0B;
}
#gnavibtn p {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
}

/* search
----------------------------------- */
.page.kodomo .search {
  background: none;
}

@media (max-width: 820px) {
  .search {
    padding: 3.255vw;
    margin: 0;
    background: #ffe6ae;
  }
}
@media (max-width: 599px) {
  .search {
    padding: 5.128vw;
  }
}
.search input[type="text"] {
  border-radius: 6px 0 0 6px;
}
.search input[type="submit"] {
  border-radius: 0 6px 6px 0;
  background: #f74000;
}

/* nav
----------------------------------- */
nav .nav_item.menu01 a:before {
  background: url(../images/cmn/icon_guide_pink.svg) center center/100% no-repeat;
}
nav .nav_item.menu02 a:before {
  background: url(../images/cmn/icon_login_green.svg) center center/100% no-repeat;
}
nav .nav_item.menu03 a:before {
  background: url(../images/cmn/icon_cart_blue.svg) center center/100% no-repeat;
}
@media (max-width: 599px) {
  nav .nav_item.menu04 {
    display: none;
  }
}
nav .nav_item.menu04 a:before {
  background: url(../images/cmn/icon_contact_yellow.svg) center center/100% no-repeat;
}

/* ----------------------------------------------------
tb-kodomo-navi
---------------------------------------------------- */
.tb-kodomo-navi {
  display: none;
}
@media (max-width: 820px) {
  .tb-kodomo-navi {
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 6.51vw;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 820px) and (max-width: 599px) {
  .tb-kodomo-navi {
    margin-bottom: 12.821vw;
  }
}
@media (max-width: 820px) {
  .tb-kodomo-navi div {
    width: 45.052vw;
    height: 11.719vw;
  }
}
@media (max-width: 820px) and (max-width: 599px) {
  .tb-kodomo-navi div {
    width: 43.59vw;
    height: 23.077vw;
  }
}
@media (max-width: 820px) {
  .tb-kodomo-navi div a {
    padding: 0 4.146vw;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 2.439vw;
    font-weight: 700;
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 8px;
    background: #fff;
  }
}
@media (max-width: 820px) and (max-width: 599px) {
  .tb-kodomo-navi div a {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 3.846vw;
  }
}
@media (max-width: 820px) {
  .tb-kodomo-navi .guide a {
    border: 2px solid #ea2d5f;
  }
  .tb-kodomo-navi .guide a:before {
    content: "";
    display: inline-block;
    background: url(../images/cmn/icon_guide_pink.svg) center center/100% no-repeat;
    width: 3.646vw;
    height: 3.646vw;
    margin-right: 1.302vw;
  }
}
@media (max-width: 820px) and (max-width: 599px) {
  .tb-kodomo-navi .guide a:before {
    margin: 0 auto 5px auto;
    display: block;
    background: url(../images/cmn/icon_guide_pink.svg) center center/7.179vw no-repeat;
    width: 100%;
    height: 7.179vw;
  }
}
@media (max-width: 820px) {
  .tb-kodomo-navi .tag a {
    border: 2px solid #004f84;
  }
  .tb-kodomo-navi .tag a:before {
    content: "";
    display: inline-block;
    background: url(../images/cmn/icon_tag_blue.svg) center center/100% no-repeat;
    width: 3.646vw;
    height: 3.646vw;
    margin-right: 1.302vw;
  }
}
@media (max-width: 820px) and (max-width: 599px) {
  .tb-kodomo-navi .tag a:before {
    margin: 0 auto 5px auto;
    display: block;
    width: 6.667vw;
    height: 6.667vw;
  }
}

@media (max-width: 599px) {
  .tb-kodomo-navi {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ----------------------------------------------------
side
---------------------------------------------------- */
.side-title, .side-inr {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700 !important;
}

/* ----------------------------------------------------
top
---------------------------------------------------- */
/* swiper
----------------------------------- */
.top-mv-slider {
  padding: 50px 0;
  margin-bottom: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: url(../images/cmn/bg_wave_yellow.jpg) bottom repeat-x #ffe6ae;
}
@media (max-width: 1024px) {
  .top-mv-slider {
    padding: 4.883vw 0;
    margin-bottom: 9.766vw;
  }
}
@media (max-width: 820px) {
  .top-mv-slider {
    padding: 0 0 6.51vw 0;
    margin-bottom: 13.021vw;
  }
}
@media (max-width: 599px) {
  .top-mv-slider {
    padding-bottom: 10.256vw;
    margin-bottom: 12.821vw;
    border-bottom: 0;
    position: relative;
  }
}
.top-mv-slider .logo {
  width: 29.167vw;
  line-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1024px) {
  .top-mv-slider .logo {
    margin-bottom: 25px;
    width: 100%;
  }
}
@media (max-width: 820px) {
  .top-mv-slider .logo {
    margin-bottom: 3.255vw;
  }
}
.top-mv-slider .logo img {
  width: 21.927vw;
  height: auto;
}
@media (max-width: 1024px) {
  .top-mv-slider .logo img {
    width: 33.789vw;
  }
}
@media (max-width: 820px) {
  .top-mv-slider .logo img {
    width: 45.052vw;
  }
}
@media (max-width: 599px) {
  .top-mv-slider .logo img {
    width: 51.282vw;
  }
}

.swiper {
  margin-left: auto;
  width: calc(100% - 29.167vw);
}
@media (max-width: 1024px) {
  .swiper {
    margin: 0;
    width: 100%;
  }
}
.swiper-slide {
  transform: scale(0.9, 0.9);
}
@media (max-width: 1024px) {
  .swiper-slide {
    transform: scale(1, 1);
  }
}
.swiper-slide-active {
  transform: scale(1, 1);
}
.swiper-pagination {
  margin: 0 0 0 auto;
  width: calc(100% - 29.167vw);
  text-align: left !important;
}
@media (max-width: 1024px) {
  .swiper-pagination {
    margin: 20px 0 0 0;
    width: 100%;
    text-align: center !important;
  }
}
@media (max-width: 820px) {
  .swiper-pagination {
    margin-top: 2.604vw;
  }
}
@media (max-width: 599px) {
  .swiper-pagination {
    margin-top: 5.128vw;
  }
}
.swiper-pagination span {
  margin: 0 12px 0 0;
  width: 12px;
  height: 12px;
  border-radius: 100px;
  background: #fff;
}
.swiper-pagination span.swiper-pagination-bullet-active {
  background: #199e15;
}
@media (max-width: 1024px) {
  .swiper-pagination span {
    margin: 6px;
  }
}
.swiper-nav {
  margin-left: 29.167vw;
  width: 800px;
  top: -20px;
  position: relative;
}
@media (max-width: 1024px) {
  .swiper-nav {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    width: 78.125vw;
  }
}
@media (max-width: 820px) {
  .swiper-nav {
    top: 42%;
    width: 100%;
  }
}
@media (max-width: 599px) {
  .swiper-nav {
    top: 50%;
  }
}
.swiper-nav-prev, .swiper-nav-next {
  position: absolute;
  top: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
  z-index: 20;
  border-radius: 100px;
  border: 1px solid #f74000;
}
.swiper-nav-prev {
  left: auto;
  right: 46px;
  background: url(../images/top/icon_prev_orange.svg) center center/100% no-repeat;
}
@media (max-width: 1024px) {
  .swiper-nav-prev {
    right: auto;
    left: 20px;
  }
}
.swiper-nav-next {
  right: 0;
  background: url(../images/top/icon_next_orange.svg) center center/100% no-repeat;
}
@media (max-width: 1024px) {
  .swiper-nav-next {
    right: 20px;
  }
}

/* news-index
----------------------------------- */
@media (max-width: 820px) {
  .news-index {
    margin-bottom: 6.51vw;
  }
}

/* ----------------------------------------------------
breadcrumbs
---------------------------------------------------- */
.breadcrumbs {
  background: #ffe6ae;
}
@media (max-width: 1024px) {
  .breadcrumbs + main {
    margin-top: 9.766vw;
  }
}
@media (max-width: 820px) {
  .breadcrumbs + main {
    margin-top: 13.021vw;
  }
}
@media (max-width: 599px) {
  .breadcrumbs + main {
    margin-top: 15.385vw;
  }
}

/* ----------------------------------------------------
cart
---------------------------------------------------- */
.cart_area {
  font-family: 'Zen Maru Gothic', sans-serif;
}
.cart_area .btn a {
  border-radius: 6px;
}
.cart_area .btn.cart a {
  background: url(../images/cmn/icon_arrow_white_r.svg) center right 40px/10px no-repeat #f74000;
}

/* ----------------------------------------------------
btn
---------------------------------------------------- */
.btn01 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
}
.btn01 a {
  border-radius: 8px;
  background: #f74000;
}
.btn01.blue a {
  background: #0b76ce;
}

.btn02 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
}
.btn02 a {
  border-radius: 8px;
  background: #f74000;
}
.btn02.blue a {
  background: #0b76ce;
}

/* ----------------------------------------------------
footer
---------------------------------------------------- */
footer .f_nav a {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
}
@media (max-width: 820px) {
  footer .f_nav ul li:first-child a:before {
    background: url(../images/cmn/icon_login_green.svg) center center/100% no-repeat;
  }
  footer .f_nav ul li:nth-child(2) a:before {
    background: url(../images/cmn/icon_cart_blue.svg) center center/100% no-repeat;
  }
}