@charset "UTF-8";

/*
=====================================
全体設定
=====================================
*/
body {
  background-color: #fff;
}

main {
  border: solid 10px #00696D;
  box-sizing: border-box;
  font-family: "FOT-筑紫ゴシック Pr5 L", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  margin: 61px auto 0;
  max-width: 1280px;
  padding: 0 11.4% 14.5%;
  position: relative;
}

main::after {
  border: solid 1px #00696D;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 94%;
  height: 99.6%;
  margin: auto;
  z-index: -10;
}

.pcbr {
  display: none;
}

@media screen and (min-width: 480px) {}

@media screen and (min-width: 768px) {
  main {
    margin: 78px auto 0;
    padding: 0 11.4% 10.5%;
  }

  main::after {
    width: 97.5%;
    height: 99.5%;
  }
}

@media screen and (min-width: 1024px) {
  main {
    padding: 0px 165px 30px;
  }

  main::after {
    width: 97.5%;
    height: 99.3%;
  }
}


/*
=====================================
intro
=====================================
*/

main .prologue::before {
  content: "";
  height: 1px;
  width: 100%;
  background-color: #00696D;
  position: absolute;
  left: 0;
}

main .prologue::after {
  content: "";
  height: 1px;
  width: 100%;
  background-color: #00696D;
  position: absolute;
  left: 0;
}

main h2 {
  padding-top: 9%;
  padding-bottom: 3.2%;
}

main h2 img {
  display: block;
  width: 86%;
  margin: auto;
}

main .prologue h3 {
  padding-top: 12%;
  padding-bottom: 9%;
}

.prologue h3 img {
  display: block;
  width: 83%;
  margin: auto;
}

main .prologue h4 {
  padding-bottom: 2%;
}

main .prologue p {
  font-size: 0.98rem;
  line-height: 1.72;
  padding-bottom: 8%;
}


@media screen and (min-width: 768px) {
  main h2 {
    padding-top: 6%;
  }

  main h2 img {
    width: 55%;
  }

  main .prologue h3 {
    padding-top: 9%;
    padding-bottom: 6%;
  }

  .prologue h3 img {
    width: 52%;
  }

  .prologue h4 img {
    display: block;
    width: 67%;
    margin: auto;
  }

  main .prologue h4 {
    padding-bottom: 3%;
  }

  main .prologue p {
    font-size: 1.05rem;
  }

}


@media screen and (min-width: 1024px) {
  main h2 {
    padding-top: 28px;
    padding-bottom: 5px;
  }

  main h2 img {
    max-width: 265px;
  }

  main .prologue h3 {
    padding-top: 62px;
    padding-bottom: 51px;
  }

  .prologue h3 img {
    display: block;
    width: 37%;
    margin: auto;
  }

  main .prologue h4 {
    padding-bottom: 20px;
  }

  .prologue h4 img {
    width: 57%;
  }

  main .prologue p {
    font-size: 1.32rem;
    line-height: 1.65;
    padding-bottom: 50px;
  }
}


/*
=====================================
item-list
=====================================
*/

main .item_list li {
  padding-top: 11%;
}

main .item_list li::after {
  content: "";
  height: 1px;
  width: 100%;
  background-color: #00696D;
  position: absolute;
  left: 0;
}

.item_list li figure {
  padding-bottom: 10%;
}

.item_list figure img {
  width: 100%;
}

.item_list section h5 {
  padding-bottom: 5%;
}

.item_list section h5 img {
  display: block;
  margin: auto;
}

.item_list section .space img {
  width: 37%;
}

.item_list section .shirakawa img {
  width: 40%;
}

.item_list section .flowers img {
  width: 30%;
}

.item_list section .dreamtime img {
  width: 88%;
}

.item_list section .storytime img {
  width: 38%;
}

.item_list section .metamorphose img {
  width: 88%;
}

.item_list section .turtle img {
  width: 35%;
}

.item_list section .trees img {
  width: 68%;
}

.item_list section p {
  font-feature-settings: "palt";
  font-size: 0.93rem;
  line-height: 1.75;
  padding-bottom: 8%;
}

@media screen and (min-width: 768px) {
  .item_list {
    display: flex;
    flex-direction: column;
    gap: 38px;
  }

  main .item_list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 0;
  }

  .item_list li:nth-of-type(2n) {
    flex-direction: row-reverse;
  }

  main .item_list li:first-of-type::after {
    height: 0px;
  }

  .item_list li figure {
    width: 48.5%;
    padding-top: 45px;
    padding-bottom: 0;
  }

  .item_list li section {
    width: 48%;
    padding-top: 45px;
  }

  .item_list section h5 img {
    margin: 0 auto 0 0;
  }

  .item_list section p {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 1024px) {

  main .item_list li {
    padding-top: 0px;
  }

  main .item_list li:first-of-type {
    padding-top: 45px;
  }

  .item_list li figure {
    padding-top: 45px;
  }

  .item_list li:first-of-type figure {
    padding-top: 0;
  }

  .item_list li:first-of-type section {
    padding-top: 0;
  }

  .item_list li section {
    padding-top: 45px;
  }

  .item_list section h5 {
    padding-top: 17px;
    padding-bottom: 35px;
  }

  .item_list section .dreamtime {
    padding-top: 0;
  }

  .item_list section .space img {
    width: 29%;
  }

  .item_list section .shirakawa img {
    width: 35%;
  }

  .item_list section .flowers img {
    width: 24%;
  }

  .item_list section .dreamtime img {
    width: 71%;
  }

  .item_list section .storytime img {
    width: 30%;
  }

  .item_list section .metamorphose img {
    width: 69%;
  }

  .item_list section .turtle img {
    width: 28%;
  }

  .item_list section .trees img {
    width: 54%;
  }

  .item_list section p {
    font-size: 1.12rem;
    line-height: 1.8;
  }

}


/*
=====================================
epilogue
=====================================
*/
.epilogue {
  padding-top: 13%;
}

.epilogue h4 img {
  display: block;
  width: 80%;
  margin: auto;
  padding-bottom: 8%;
}

@media screen and (min-width:768px) {
  .epilogue {
    padding-top: 5.6%;
  }

  .epilogue::before {
    content: "";
    height: 1px;
    width: 100%;
    background-color: #00696D;
    position: absolute;
    left: 0;
  }

  .epilogue h4 img {
    width: 48%;
    padding-top: 12%;
    padding-bottom: 4%;
  }

  main .epilogue p {
    font-size: 1.05rem;
    padding-bottom: 0;
  }
}

@media screen and (min-width: 1024px) {
  .epilogue {
    padding-top: 32px;
  }

  .epilogue h4 img {
    width: 35%;
    padding-top: 100px;
    padding-bottom: 20px;
  }

  main .epilogue p {
    font-size: 1.32rem;
    line-height: 1.72;
    padding-bottom: 125px;
  }
}

/*
=====================================
pager
=====================================
*/
.pager ul {
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  width: 90%;
  max-width: 950px;
  padding: 50px 0px;
  font-size: 1rem;
  margin: 0 auto;
}

.pager ul li {
  width: 49.8%;
}

/* .pager ul li:first-of-type::before {
  content: "<<";
} */

.pager ul li:last-of-type {
  text-align: right;
}

/* .pager ul li:last-of-type::after {
  content: ">>";
} */

.pager ul li a:hover {
  color: #aaa;
}