@charset "utf-8";

/* ---------------------------------------------------
   File: how-to.css
   Version: 1.0.0
   Update: 2024-06-25
   Author: https://flowlab.co.jp

   (c)2007-2024 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */



/* =======================================================================================================================

   WIDE DESKTOP LAYOUT

======================================================================================================================= */

/* ====================================================
		Header
==================================================== */
/* -------------------------------
		Global Navigation
------------------------------- */
/* Main Menu */
#gNavi ul:first-child li:nth-child(1) a {
  color: #046c4c;
}




/* ====================================================
		Common Style
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#baby,
#kids,
#adult {
  z-index: 0;
}
#container .row article {
  padding-top: 140px;
}

/* -------------------------------
		Text Box
------------------------------- */
.vertical-row {
  display: flex;
  align-items: stretch!important;
  justify-content: space-between;
}
.vertical-row .textBox,
.vertical-row .top,
.vertical-row .bottom {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0;
}
.vertical-row .textBox {
  height: auto;
  flex: none;
  justify-content: space-between;
  padding-top: 10px;
}
.vertical-row .top,
.vertical-row .bottom {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0;
}
.vertical-row .top {
  justify-content: flex-start;
}
.vertical-row .bottom {
  width: 100%;
  gap: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.vertical-row .bottom .time {
  width: 40%;
}
.vertical-row .bottom .btnBox {
  width: 60%;
}

/* Button Only Box */
.vertical-row .bottom.btnOnlyBox {
  justify-content: flex-end;
}
.vertical-row .bottom.btnOnlyBox .btn:not(:last-child) {
  margin-right: 10px;
}

/* -------------------------------
		Banner
------------------------------- */
.iconList {
  padding: 0;
}
.iconList li {
  border: 1px solid #e8e8e8;
  border-radius: 100px;
}
.iconList li a {
  box-shadow: none;
}

/* -------------------------------
		Thumbnail List
------------------------------- */
.thumbnailList {
  padding: 60px 0 0;
}

/* -------------------------------
		Time
------------------------------- */
.time {
  font-size: 1.1rem;
  position: relative;
  padding-left: 20px;
}
.time::before {
  content: '';
  width: 14px;
  height: 14px;
  background: url("../how-to/images/icon_clock.png") no-repeat 0 0 / 14px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  
}

/* -------------------------------
		Button
------------------------------- */
.btn a {
  background: #fff;
}




/* ====================================================
		Common - Model Course
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
.course section,
.course .courseLast {
  background: #fcf9e8;
  border-radius: 20px;
  padding: 40px;
  position: relative;
}
.course section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

/* Last Contents */
.course .courseLast {
  font-size: 2rem;
  font-weight: 600;
  padding: 60px 100px;
}

/* Before / After */
.course section::before,
.course .courseLast::before,
.course section::after {
  content: '';
  position: absolute;
  display: block;
}

/* Time */
.course section::before,
.course .courseLast::before {
  width: 88px;
  height: 88px;
  top: -10px;
  left: -25px;
  background-size: 88px;
  background-position: 0 0;
  background-repeat: no-repeat;
}

/* Background - Dot */
.course section::after {
  width: 9px;
  height: 100%;
  /*background-color: #fff;*/
  background-image: radial-gradient(#f41454 30%, transparent 30%);
  background-size: 9px 9px;
  bottom: -35px;
  left: 80px;
  z-index: -1;
}

/* -------------------------------
		Photo
------------------------------- */
.course section .photo {
  width: 40%;
}
.course section .photo img {
  border-radius: 10px;
}

/* -------------------------------
		Text
------------------------------- */
.course section .textBox {
  width: 56%;
}

/* -------------------------------
		Title
------------------------------- */
.course section .textBox h4 {
  font-size: 2rem;
  padding-bottom: 20px;
}




/* ====================================================
		Common - Check List
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
.checkListBox dl.checkList {
  width: 48%;
}
.checkListBox dl.checkList dt {
  padding-top: 20px;
}
.checkListBox dl.checkList dt::before {
  top: calc(20px + 0.4em);
}
.checkListBox dl.checkList dd {
  padding-bottom: 25px;
}




/* ====================================================
		Common - Useful
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
.useful section {
  font-size: 1.5rem;
  padding-bottom: 20px;
}
.useful section.btnNone {
  padding-bottom: 70px;
}

/* -------------------------------
		Title
------------------------------- */
.useful h4 {
  font-size: 2.6rem;
  font-weight: 600;
  padding: 0 0 0 55px;
  margin-bottom: 20px;
  position: relative;
}
.useful h4::before,
.useful h4::after {
  content: '';
  position: absolute;
  display: block;
}
.useful h4::before {
  width: 36px;
  height: 36px;
  background-size: 36px;
  background: url(../img/common/bg_title_circle.png) no-repeat 0 0 / 36px;
  top: 0.2em;
  left: 6px;
  z-index: 0;
  animation: rotation 18s infinite linear;
}
.useful h4::after {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 50px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.useful .lost-child h4::after { background-image: url("../how-to/images/icon_useful_lost-child.png");}
.useful .breastfeeding h4::after { background-image: url("../img/common/icon_facilities_nursing-room.png");}
.useful .changeDiaper h4::after { background-image: url("../how-to/images/icon_useful_change-diaper.png");}
.useful .toilet h4::after { background-image: url("../img/common/icon_facilities_toilet.png");}
.useful .stroller h4::after { background-image: url("../img/common/icon_facilities_stroller.png");}
.useful #baby_lunch.lunch h4::after { background-image: url("../how-to/images/icon_useful_baby_lunch.png");}
.useful #kids_lunch.lunch h4::after { background-image: url("../how-to/images/icon_useful_kids_lunch.png");}
.useful .members h4::after { background-image: url("../how-to/images/icon_useful_members.png");}
.useful .lost-item h4::after { background-image: url("../img/common/icon_facilities_service-center.png");}
.useful .wheelchair h4::after { background-image: url("../img/common/icon_facilities_wheelchair.png");}
.useful .multipurpose-toilet h4::after { background-image: url("../how-to/images/icon_useful_multipurpose-toilet.png");}
.useful .shopping h4::after { background-image: url("../how-to/images/icon_useful_shopping.png");}


/* -------------------------------
		Text
------------------------------- */
.useful a.tel {
  color: inherit;
  border-bottom: none;
}
.useful a.tel:hover {
  border-bottom: none;
}




/* ====================================================
		Common - Title
==================================================== */
/* -------------------------------
		Page Title
------------------------------- */
/* Animals */
main h1::after {

}
  
/* -------------------------------
		SubTitle / Page Path
------------------------------- */
#subTitle-pagePath {
  padding-bottom: 40px;
}

/* -------------------------------
		Title - Type
------------------------------- */
#baby h2,
#kids h2,
#adult h2 {
  width: 320px;
  margin: 0 auto 50px;
}
#baby h2::before,
#kids h2::before,
#adult h2::before {
  content: none;
}

/* -------------------------------
		Title - H3
------------------------------- */
#container .row h3 {
  font-size: 3.4rem;
  font-weight: 600;
  font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
  letter-spacing: .1em;
  line-height: 1.6;
  position: relative;
  padding: 0 0 50px;
}
#container .row h3::before {
  content: '';
  width: 110px;
  height: 55px;
  background: url("../img/common/bg_title_yellow.png") no-repeat 0 0 / 110px 55px;
  position: absolute;
  top: -15px;
  left: -45px;
  display: block;
  z-index: 0;
  animation: fuwafuwa1 3s infinite ease-in-out .3s alternate;
}



/* ====================================================
		Title
==================================================== */
/* -------------------------------
		Page Title
------------------------------- */
/* Animals */
main h1::after {
  background-image: url("../img/common/img_header_animal_cow-c.png");
}



/* ====================================================
		How To / Banner
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#how-to {
  padding: 0 8%;
}




/* ====================================================
		Baby
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#baby {
  background: #fff url("../how-to/images/bg_baby_top.png") no-repeat 0 0 / contain;
  padding-top: 17.69%;
  position: relative;
}

/* -------------------------------
		Banner
------------------------------- */
#baby .iconList li:nth-child(1) a span::before { background-image: url("../img/common/icon_lnavi_price.png");}
#baby .iconList li:nth-child(2) a span::before { background-image: url("../how-to/images/icon_lnavi_course.png");}
#baby .iconList li:nth-child(3) a span::before { background-image: url("../how-to/images/icon_lnavi_check-list.png");}
#baby .iconList li:nth-child(4) a span::before { background-image: url("../how-to/images/icon_lnavi_lost-child.png");}
#baby .iconList li:nth-child(5) a span::before { background-image: url("../how-to/images/icon_lnavi_nursing-room.png");}
#baby .iconList li:nth-child(6) a span::before { background-image: url("../how-to/images/icon_lnavi_change-diaper.png");}
#baby .iconList li:nth-child(7) a span::before { background-image: url("../how-to/images/icon_lnavi_toilet.png");}
#baby .iconList li:nth-child(8) a span::before { background-image: url("../how-to/images/icon_lnavi_stroller.png");}
#baby .iconList li:nth-child(9) a span::before { background-image: url("../how-to/images/icon_lnavi_baby_lunch.png");}

/* -------------------------------
		Course
------------------------------- */
/* Time */
#baby_course.course section:nth-of-type(1)::before {background-image: url("../how-to/images/icon_1000.png");}
#baby_course.course section:nth-of-type(2)::before {background-image: url("../how-to/images/icon_1030.png");}
#baby_course.course section:nth-of-type(3)::before {background-image: url("../how-to/images/icon_1130.png");}
#baby_course.course section:nth-of-type(4)::before {background-image: url("../how-to/images/icon_1200.png");}
#baby_course.course section:nth-of-type(5)::before {background-image: url("../how-to/images/icon_1300.png");}
#baby_course.course section:nth-of-type(6)::before {background-image: url("../how-to/images/icon_1330.png");}
#baby_course.course section:nth-of-type(7)::before {background-image: url("../how-to/images/icon_1430.png");}
#baby_course.course .courseLast::before {background-image: url("../how-to/images/icon_1500.png");}


/* ====================================================
		Kids
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#kids {
  background: #fcf9e8 url("../how-to/images/bg_kids_top.png") no-repeat 0 0 / contain;
  padding-top: 17.69%;
  position: relative;
}

/* -------------------------------
		Banner
------------------------------- */
#kids .iconList li:nth-child(1) a span::before { background-image: url("../how-to/images/icon_lnavi_play.png");}
#kids .iconList li:nth-child(2) a span::before { background-image: url("../how-to/images/icon_lnavi_course.png");}
#kids .iconList li:nth-child(3) a span::before { background-image: url("../how-to/images/icon_lnavi_check-list.png");}
#kids .iconList li:nth-child(4) a span::before { background-image: url("../how-to/images/icon_lnavi_lost-child.png");}
#kids .iconList li:nth-child(5) a span::before { background-image: url("../how-to/images/icon_lnavi_toilet.png");}
#kids .iconList li:nth-child(6) a span::before { background-image: url("../how-to/images/icon_lnavi_kids_lunch.png");}
#kids .iconList li:nth-child(7) a span::before { background-image: url("../how-to/images/icon_lnavi_members.png");}

/* -------------------------------
		Course
------------------------------- */
#kids .course section,
#kids .course .courseLast {
  background: #fff;
}

/* Time */
#kids_course.course section:nth-of-type(1)::before {background-image: url("../how-to/images/icon_1000.png")}
#kids_course.course section:nth-of-type(2)::before {background-image: url("../how-to/images/icon_1015.png");}
#kids_course.course section:nth-of-type(3)::before {background-image: url("../how-to/images/icon_1030.png");}
#kids_course.course section:nth-of-type(4)::before {background-image: url("../how-to/images/icon_1130.png");}
#kids_course.course section:nth-of-type(5)::before {background-image: url("../how-to/images/icon_1300.png");}
#kids_course.course section:nth-of-type(6)::before {background-image: url("../how-to/images/icon_1400.png");}
#kids_course.course section:nth-of-type(7)::before {background-image: url("../how-to/images/icon_1430.png");}
#kids_course.course section:nth-of-type(8)::before {background-image: url("../how-to/images/icon_1530.png");}
#kids_course.course section:nth-of-type(9)::before {background-image: url("../how-to/images/icon_1600.png");}
#kids_course.course .courseLast::before {background-image: url("../how-to/images/icon_1700.png");}

/* -------------------------------
		Check List
------------------------------- */
#kids .checkListBox dl.checkList dt {
  border-top: 1px solid #fff;
}
#kids .checkListBox dl.checkList dt::before {
  background: #fff;
}
#kids .checkListBox dl.checkList dd:last-child {
    border-bottom: 1px solid #fff;
}
  
/* Button */
#kids .checkListBox .btn_shadow {
  padding-top: 70px;
}
#kids .checkListBox .btn_shadow a {
  background: #046c4c;
}

  
  

/* ====================================================
		Adult
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#adult {
  background: #fff url("../how-to/images/bg_baby_top.png") no-repeat 0 0 / contain;
  padding-top: 17.69%;
  position: relative;
}

/* -------------------------------
		Banner
------------------------------- */
#adult .iconList li:nth-child(1) a span::before { background-image: url("../how-to/images/icon_lnavi_course.png");}
#adult .iconList li:nth-child(2) a span::before { background-image: url("../how-to/images/icon_lnavi_flower.png");}
#adult .iconList li:nth-child(3) a span::before { background-image: url("../img/common/icon_lnavi_information-access.png");}
#adult .iconList li:nth-child(4) a span::before { background-image: url("../how-to/images/icon_lnavi_wheelchair.png");}
#adult .iconList li:nth-child(5) a span::before { background-image: url("../how-to/images/icon_lnavi_multipurpose-toilet.png");}
#adult .iconList li:nth-child(6) a span::before { background-image: url("../how-to/images/icon_lnavi_shopping.png");}
#adult .iconList li:nth-child(7) a span::before { background-image: url("../how-to/images/icon_lnavi_members.png");}

/* -------------------------------
		Course
------------------------------- */
/* Time */
#adult_course.course section:nth-of-type(1)::before {background-image: url("../how-to/images/icon_1000.png");}
#adult_course.course section:nth-of-type(2)::before {background-image: url("../how-to/images/icon_1030.png");}
#adult_course.course section:nth-of-type(3)::before {background-image: url("../how-to/images/icon_1100.png");}
#adult_course.course section:nth-of-type(4)::before {background-image: url("../how-to/images/icon_1200.png");}
#adult_course.course section:nth-of-type(5)::before {background-image: url("../how-to/images/icon_1300.png");}
#adult_course.course section:nth-of-type(6)::before {background-image: url("../how-to/images/icon_1430.png");}
#adult_course.course section:nth-of-type(7)::before {background-image: url("../how-to/images/icon_1500.png");}
#adult_course.course section:nth-of-type(8)::before {background-image: url("../how-to/images/icon_1530.png");}
#adult_course.course section:nth-of-type(9)::before {background-image: url("../how-to/images/icon_1700.png");}
#adult_course.course .courseLast::before {background-image: url("../how-to/images/icon_1700.png");}

/* -------------------------------
		Flower
------------------------------- */
#adult_flower ul {
  padding-top: 50px;
}
#adult_flower li {
  width: 32%;
  text-align: center;
  padding-bottom: 20px;
}
#adult_flower li div {
  position: relative;
  top: -1.1em;
}

/* Photo */
#adult_flower li .photo img {
  border-radius: 20px;
}

/* Tag */
#adult_flower li div .tag {
  width: auto;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  border-radius: 42% 63% 31% 42% / 59% 73% 57% 83%;
  padding: 6px 40px;
}
#adult_flower li div .tag.spring { background: #f41454;}
#adult_flower li div .tag.summer { background: #2cacdc;}
#adult_flower li div .tag.autumn { background: #fc941c;}

/* Name */
#adult_flower li div strong {
  color: #1d1d1d;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  display: block;
  padding-top: 10px;
}

/* Text */
#adult_flower .text {
  font-size: 1.8rem;
  text-align: center;
  line-height: 2;
  padding-top: 50px;
}












/* =======================================================================================================================

   TABLET

======================================================================================================================= */
@media screen and (min-width: 897px) and (max-width: 1299px) {

  /* ====================================================
      Common Style
  ==================================================== */
  /* -------------------------------
      Text Box
  ------------------------------- */
  .bottom {
    display: block!important;
  }
  .bottom .time {
    width: 100%!important;
    margin-top: 20px;
  }
  .bottom .btnBox {
    width: 100%!important;
  }
  
  /* Button Only Box */
  .vertical-row .bottom.btnOnlyBox {
    display: block;
  }
  .vertical-row .bottom.btnOnlyBox .btn:not(:last-child) {
    margin-right: 0;
  }
  
  
  
  /* ====================================================
		Common - Model Course
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  .course section,
  .course .courseLast {
    padding: 30px;
  }
  .course section {
    margin-bottom: 30px;
  }
  
  /* Last Contents */
  .course .courseLast {
    padding: 50px 80px;
  }
  
}













/* =======================================================================================================================

   MOBILE

======================================================================================================================= */
@media screen and (max-width: 896px) {
  
  /* ====================================================
      Common Style
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #container .row article {
    padding-top: 80px;
  }
  
  /* -------------------------------
      Thumbnail List
  ------------------------------- */
  .thumbnailList {
    padding: 30px 0 0;
  }
  
  /* -------------------------------
      Text Box
  ------------------------------- */
  .vertical-row {
    display: block;
  }
  .bottom {
    display: block!important;
  }
  .bottom .time {
    width: 100%!important;
    margin-top: 15px;
  }
  .bottom .btnBox {
    width: 100%!important;
  }
  
  /* Button Only Box */
  .vertical-row .bottom.btnOnlyBox {
    display: block;
    padding-top: 10px;
  }
  .vertical-row .bottom.btnOnlyBox .btn:not(:last-child) {
    margin-right: 0;
  }
  
  /* Button */
  .btn a {
    width: calc(100% - 30px - 2px);
  }
  .btn {
    padding-top: 6px;
  }
  
  
  
  
  /* ====================================================
      Common - Model Course
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  .course section,
  .course .courseLast {
    border-radius: 10px;
    padding: 20px 20px 30px;
  }
  .course section {
    display: block;
    margin-bottom: 30px;
  }

  /* Last Contents */
  .course .courseLast {
    font-size: 1.4rem;
    padding: 40px 10%;
  }

  /* Time */
  .course section::before,
  .course .courseLast::before {
    width: 60px;
    height: 60px;
    background-size: 60px;
    left: -15px;
  }

  /* Background - Dot */
  .course section::after {
    left: 50%;
    transform: translateX(-50%);
  }

  /* -------------------------------
      Photo
  ------------------------------- */
  .course section .photo {
    width: 100%;
  }

  /* -------------------------------
      Text
  ------------------------------- */
  .course section .textBox {
    width: 100%;
    padding-top: 15px;
  }

  /* -------------------------------
      Title
  ------------------------------- */
  .course section .textBox h4 {
    font-size: 1.4rem;
    padding-bottom: 10px;
  }
  
  
  
  
  /* ====================================================
      Common - Check List
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  .checkListBox dl.checkList {
    width: 100%;
  }
  .checkListBox dl.checkList dt {
    padding-top: 10px;
  }
  .checkListBox dl.checkList dt::before {
    top: calc(10px + 0.4em);
  }
  .checkListBox dl.checkList dd {
    padding-bottom: 12px;
  }
  .checkListBox dl.checkList:last-child dt:first-child {
    border-top: none;
  }
  
  
  
  
  
  
  /* ====================================================
      Common - Useful
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  .useful section {
    font-size: 1.3rem;
    padding-bottom: 30px;
  }
  .useful section.btnNone {
    padding-bottom: 30px;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  .useful h4 {
    font-size: 1.5rem;
    padding-left: 40px;
    margin-bottom: 10px;
  }

  /* Icon */
  .useful h4::before {
    width: 28px;
    height: 28px;
    background-size: 28px;
    top: 0.2em;
    left: 4px;
  }
  .useful h4::after {
    width: 30px;
    height: 30px;
    background-size: 30px;
  }
  
  /* -------------------------------
      Button
  ------------------------------- */
  .useful .btn {
    padding-top: 15px;
  }
  
  
  
  /* ====================================================
      Common - Title
  ==================================================== */
  /* -------------------------------
      Title - Type
  ------------------------------- */
  #baby h2,
  #kids h2,
  #adult h2 {
    width: 180px;
    margin: 0 auto 20px;
  }
  
  /* -------------------------------
      Title - H3
  ------------------------------- */
  #container .row h3 {
    font-size: 1.6rem;
    padding-bottom: 10px;
  }
  #container .row h3::before {
    width: 60px;
    height: 30px;
    background-size: 60px 30px;
    top: -5px;
    left: -25px;
  }
  
  
  
  
  /* ====================================================
      Kids
  ==================================================== */
  
  /* -------------------------------
      Thumbnail List
  ------------------------------- */
  #kids .thumbnailList li a:hover {
    background: none;
  }
  
  /* -------------------------------
      Check List
  ------------------------------- */
  #kids .checkListBox dl.checkList:last-child dt:first-child {
    border-top: none;
  }
  
  /* Button */
  #kids .checkListBox .btn_shadow {
    padding-top: 20px;
  }
  
  
  
  
  /* ====================================================
      Adult
  ==================================================== */
  /* -------------------------------
      Flower
  ------------------------------- */
  #adult_flower ul {
    padding-top: 30px;
  }
  #adult_flower li {
    width: 100%;
    padding-bottom: 0;
  }
  #adult_flower li:not(:last-child) {
    padding-bottom: 15px;
  }
  
  /* Photo */
  #adult_flower li .photo img {
    border-radius: 10px;
  }
  
  /* Tag */
  #adult_flower li div .tag {
    padding: 4px 16px;
  }
  
  /* Name */
  #adult_flower li div strong {
    font-size: 1.3rem;
  }
  
  /* Text */
  #adult_flower .text {
    font-size: 1.3rem;
  }
  
  
  
  
  
  
  
  
  
  
  
}