@charset "utf-8";
/* ペット共生 */
#mainTitle {}
#pageTitle h1 {
  display: none;
}
#mainTitle .contents {
  position: relative;
}
#mainTitle .contents .contentsDetail {
  max-width: inherit;
  margin: 0;
  padding: 0;
}
#mainTitle .bgBox {
  position: absolute;
  width: 100%;
}
#mainTitle .bgBox img {
  min-height: 600px;
  object-fit: contain;
  object-position: right center;
  width: 100%;
}
#mainTitle .visual {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  padding: 4% 0 0 6%;
  width: 100%;
  box-sizing: border-box;
}
#mainTitle .textBox {
  position: relative;
  padding: 2% 0 5%;
  width: 100%;
  box-sizing: border-box;
}
#mainTitle h2 {
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 0 0 1% 6%;
  margin: 0;
  text-shadow: 2px 0px 8px rgba(0, 0, 0, 1);
  -webkit-text-stroke: 2px #00000061;
  paint-order: stroke;
  white-space: nowrap;
}
#mainTitle .textBox h2 br.sp2 {
  display: none;
}
#mainTitle p {
  color: #fff;
  text-align: left;
  padding: 0 0 0 6%;
  line-height: 1.6em;
  text-shadow: 2px 0px 8px rgba(0, 0, 0, 1);
  -webkit-text-stroke: 2px #00000061;
  paint-order: stroke;
  font-size: 100%;
}
#naviBox {
  display: block;
  position: relative;
  background: #fff;
}
#naviBox .flexBox2 {
  padding: 5% 0;
}
#naviBox .flexBox2 ul {
  justify-content: center;
}
#naviBox .flexBox2 ul li {
  width: auto;
  padding: 0 2%;
}
#S01 {}
#S01 .contents:nth-child(1) {
  background: url("/wp-content/themes/original-child/assets/img/pet/visual_002.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  padding: 3% 0 5%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 500px;
}
#S01 .contents:nth-child(1) .contentsDetail {
  max-width: inherit;
  margin: 0;
  padding: 0 6% 0 0;
  display: flex;
  justify-content: flex-end;
}
#S01 .visual {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}
#S01 .visual h2 {
  color: #fff;
  text-align: left;
  padding: 0 0 1%;
  margin: 0;
  text-shadow: 2px 0px 8px rgba(0, 0, 0, 1);
  -webkit-text-stroke: 2px #00000000;
  paint-order: stroke;
  font-weight: 700;
}
#S01 .contents:nth-child(2) {
  padding: 5% 0 0;
}
#S01 .contents:nth-child(2) h3 {
  font-size: 240%;
  color: #333;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
#S01 .contents:nth-child(2) h3 small {
  display: block;
  font-size: 50%;
  padding: 0 0 2%;
}
#S01 .detailBox {
  padding: 5% 0 5%;
  border-bottom: 1px dashed #666;
}
#S01 .detailBox:nth-last-child(1) {
  border-bottom: none;
}
#S01 .detailBox:nth-child(even) {
  flex-direction: row-reverse;
}
#S01 .leftBox {
  width: 50%;
}
#S01 .rightBox {
  width: 50%;
  padding: 0 0 0 2%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}
#S01 .rightBox h4 {
  text-align: left;
  font-size: 160%;
}
#S01 .rightBox p {
  text-align: left;
  font-size: 100%;
}
#S01 .contents:nth-child(4) {
  background: #e4e6cf;
  padding: 3% 0;
}
#S01 .contents:nth-child(4) h3 {
  font-size: 180%;
  color: #333;
  display: flex;
  align-items: center;
}
#S01 .contents:nth-child(4) h3 img {
  padding: 0 10px 0 0;
}
#S01 .contents:nth-child(4) .flexBox3 ul li {
  padding: 0 10px;
}
#S01 .contents:nth-child(4) .flexBox3 ul li h4 {
  font-size: 130%;
  text-align: left;
  font-weight: 600;
}
#S01 .contents:nth-child(4) .flexBox3 ul li h4 small {
  display: block;
  font-size: 80%;
  font-weight: 500;
}
#S01 .contents:nth-child(4) .flexBox3 ul li p {
  text-align: left;
}
#S01 .contents:nth-child(5) {
  padding: 2% 0 6%;
}
#S01 .contents:nth-child(5) h3 {
  font-size: 180%;
}
#S01 .contents:nth-child(5) .flexBox3 ul {
  gap: 20px 3.5%;
  flex-wrap: wrap;
  margin-top: 30px;
}
#S01 .contents:nth-child(5) .flexBox3 ul li {
  box-sizing: border-box;
  width:31%;
}
#S01 .contents:nth-child(5) .flexBox3 ul li h4 {
  font-size: 130%;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px dashed #666;
  padding-bottom: 10px;
}
#S01 .contents:nth-child(5) .flexBox3 ul li h4 small {
  font-size: 80%;
}
#S01 .contents:nth-child(5) .flexBox3 ul li p {
  text-align: left;
  line-height: 1.6em;
    font-size: 16px;
}
#S02 {}
#S02 .contents:nth-child(1) {
  background: url("/wp-content/themes/original-child/assets/img/pet/visual_003.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: right;
  padding: 3% 0 5%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 500px;
}
#S02 .contents:nth-child(1) .contentsDetail {
  max-width: inherit;
  margin: 0;
  padding: 0 6% 0;
  display: flex;
  justify-content: flex-start;
}
#S02 .visual {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}
#S02 .visual h2 {
  color: #fff;
  text-align: left;
  padding: 0 0 1%;
  margin: 0;
  text-shadow: 2px 0px 8px rgba(0, 0, 0, 1);
  -webkit-text-stroke: 2px #00000061;
  paint-order: stroke;
  font-weight: 700;
}
#S02 .detailBox {
  padding: 5% 0 5%;
  border-bottom: 1px dashed #666;
}
#S02 .detailBox:nth-last-child(1) {
  border-bottom: none;
}
#S02 .detailBox:nth-child(even) {
  flex-direction: row-reverse;
}
#S02 .leftBox {
  width: 50%;
}
#S02 .rightBox {
  width: 50%;
  padding: 0 0 0 2%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}
#S02 .rightBox h4 {
  text-align: left;
  font-size: 160%;
}
#S02 .rightBox p {
  text-align: left;
  font-size: 100%;
}
#S02 .contents:nth-child(3) {
  background: #d9e3e9;
  padding: 3% 0;
}
#S02 .contents:nth-child(4) .detailBox {
  border-bottom: none;
}
#S02 .contents:nth-child(4) .leftBox {
  width: calc(100% - 400px);
}
#S02 .contents:nth-child(4) .leftBox h4 {
  text-align: left;
  font-size: 170%;
}
#S02 .contents:nth-child(4) .leftBox h4 em {
  text-align: left;
  display: block;
  font-size: 50%;
  border: 1px solid #333;
  padding: 6px;
  width: fit-content;
}
#S02 .contents:nth-child(4) .leftBox p {
  text-align: left;
  line-height: 1.6em;
  font-size: 90%;
}
#S02 .contents:nth-child(4) .rightBox {
  width: 400px;
}
/*----------------------------------------------------------- 1280px */
@media screen and (max-width: 1280px) {
  #mainTitle .visual {
    height: 460px;
  }
  #mainTitle .bgBox img {
    min-height: 460px;
    object-fit: cover;
  }
  #mainTitle h2 {
    color: #222;
    font-weight: 600;
    text-shadow: inherit;
    -webkit-text-stroke: inherit;
    paint-order: stroke;
    white-space: nowrap;
    padding: 0 5% 1% 5%;
  }
  #mainTitle p {
    color: inherit;
    padding: 0 5% 1% 5%;
    text-shadow: inherit;
    -webkit-text-stroke: inherit;
    paint-order: stroke;
  }
}
/*----------------------------------------------------------- 1280px */
@media screen and (max-width: 1280px) {
  #mainTitle h2 br.sp {
    display: block;
  }
  #mainTitle .textBox br.pc {
    display: none;
  }
  #S01 br.sp {
    display: block;
  }
  #S01 .contents:nth-child(1) {
    height: 360px;
  }
  #S02 .contents:nth-child(1) {
    height: 360px;
  }
  #S02 br.sp {
    display: block;
  }
}
/*----------------------------------------------------------- 1028px */
@media screen and (max-width: 1028px) {
  #mainTitle .bgBox img {
    min-height: 400px;
  }
  #mainTitle .visual {
    justify-content: center;
    padding: 4%;
    height: 400px;
  }
  #S01 .contents:nth-child(1) {
    align-items: flex-end;
    background-position-x: -200px;
  }
  #S01 .detailBox, #S01 .detailBox:nth-child(even), #S02 .detailBox, #S02 .detailBox:nth-child(even) {
    flex-flow: column;
  }
  #S01 .leftBox, #S02 .leftBox {
    width: auto;
  }
  #S01 .rightBox h4, #S02 .rightBox h4 {
    font-size: 130%;
    padding: 0 10px;
  }
  #S01 .rightBox p, #S02 .rightBox p {
    font-size: 90%;
    line-height: 1.6em;
    padding: 0 10px;
  }
  #S01 .leftBox img, #S02 .leftBox img {
    width: 100%;
  }
  #S01 .rightBox, #S02 .rightBox {
    width: auto;
    padding: 2% 0 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  #S01 .contents:nth-child(2) h3 {
    font-size: 180%;
  }
  #S01 .contents:nth-child(4) h3 {
    font-size: 120%;
  }
  #S01 .contents:nth-child(4) h3 img {
    width: 40px;
  }
  #S02 .contents:nth-child(1) {
    align-items: flex-end;
    background-position-x: -490px;
  }
  #S02 .contents:nth-child(4) .leftBox {
    width: auto;
  }
  #S02 .contents:nth-child(4) .rightBox {
    width: auto;
    margin: auto;
  }
  #S01 .flexBox3 ul {
    flex-flow: column;
  }
  #S01 .contents:nth-child(4) .flexBox3 ul li {
    padding: 20px 20px;
    width: auto;
  }
  #S01 .contents:nth-child(4) .flexBox3 ul li img {
    width: 100%;
  }
  #S01 .contents:nth-child(4) .flexBox3 ul li h4 {
    font-size: 130%;
  }
  #S02 .contents:nth-child(4) .leftBox h4 {
    font-size: 130%;
  }
}
/*----------------------------------------------------------- 840px */
@media screen and (max-width: 840px) {
  #mainTitle .bgBox img {
    min-height: 360px;
  }
  #mainTitle .visual {
    justify-content: flex-end;
    padding: 4%;
    height: 360px;
  }
  #S01 .visual {
    width: 320px;
  }
  #S01 .visual br {
    display: none;
  }

  #S01 .contents:nth-child(5) {
  padding: 8% 0 10%;
}
#S01 .contents:nth-child(5) h3 {
  font-size: 120%;
}
#S01 .contents:nth-child(5) h3 br {
  display: none;
}
#S01 .contents:nth-child(5) .flexBox3 ul {
  gap: 30px 0;
  margin-top: 0;
}
#S01 .contents:nth-child(5) .flexBox3 ul li {
  width:100%;
}
#S01 .contents:nth-child(5) .flexBox3 ul li h4 {
  font-size: 110%;
}
#S01 .contents:nth-child(5) .flexBox3 ul li p {
    font-size: 90%;
}
}
/*----------------------------------------------------------- 640px */
@media screen and (max-width: 640px) {
  #mainTitle .textBox h2 br.sp2 {
    display: block;
  }
  #mainTitle .textBox p {
    line-height: 1.4em;
    font-size: 90%;
  }
  #S01 .rightBox h4, #S02 .rightBox h4 {
    font-size: 100%;
  }
  #S01 .rightBox img, #S02 .rightBox img {
    margin: auto;
  }
  #S01 .contents:nth-child(4) .flexBox3 ul li h4 {
    font-size: 110%;
  }
  #S01 .contents:nth-child(4) .flexBox3 ul li p {
    text-align: left;
    font-size: 90%;
  }
}