@charset "UTF-8";

main {
  scroll-snap-type: none;
}

.page_ttl {
  display: none;
}

.pc_top {
  width: 700px;
  margin-left: 15%;
  margin-right: 100px;
  display: flex;
  height: 100svh;
  align-items: center;
}

.pc_top .wrapper {
  display: flex;
  align-items: center;
}

.pc_top .container {
  position: relative;
}

.pc_top .scrolldown2 {
  top: 100px;
  left: 0;
}

.pc_top .ttl {
  width: 540px;
  height: 32px;
  border-left: 5px solid #f2917e;
  display: flex;
  justify-content: space-between;
  margin-left: 57px;
  margin-bottom: 20px;
}

h1 {
  font-size: 18px;
  margin-left: 10px;
}

.ttl p {
  font-size: 16px;
  letter-spacing: 0.2em;
  line-height: 2;
  text-align: center;
  width: 91px;
  height: 32px;
  border: 1px solid #423732;
  border-radius: 16px;
}

.img {
  position: relative;
}

.img_pc {
  height: 348px;
}

.img_pc img {
  height: 100%;
}

.img_sp {
  width: 128px;
  position: absolute;
  top: 94px;
  left: 460px;
}

.img_sp img {
  width: 100%;
}

.sp_container {
  display: flex;
  height: 100svh;
  align-items: center;
}

.sp_top,
.sp_ttl {
  display: none;
}

.contents {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 23px;
  margin-right: 10px;
}

.bottom-txt ul {
  display: flex;
  align-items: center;
}

.sp-list {
  display: none;
}

.list_row:nth-of-type(n + 2) {
  margin-top: 5px;
}

.list_ttl {
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  color: #fffcf5;
  width: 104px;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2917e;
}

.list_txt {
  font-size: 15px;
  line-height: 1.5;
  width: 390px;
  height: 62px;
  display: flex;
  align-items: center;
  padding-left: 17px;
  border: 1px solid #f2917e;
  box-sizing: border-box;
}

.point {
  width: 705px;
  height: 398px;
  border: 1px solid #f2917e;
  border-left: 11px solid #f2917e;
  box-sizing: border-box;
  display: flex;
  position: relative;
}

h2 {
  font-size: 17px;
  color: #f2917e;
  position: absolute;
  top: 15px;
  left: 15px;
}

.point p {
  font-size: 14px;
  text-align: justify;
  width: 290px;
  height: 313px;
  margin-top: 57px;
  margin-left: 40px;
}

@media screen and (max-width: 1100px) {
  .pc_top {
    margin-left: 8%;
    margin-right: 0px;
  }

  .scrolldown2 {
    left: 10px;
  }

  .img_sp {
    left: 460px;
  }
}

@media screen and (max-width: 767px) {
  /* 画像とリストが横並び */

  .page_ttl {
    display: flex;
  }

  .inner {
    height: 650px;
  }

  .pc_top {
    width: 360px;
    margin-left: 23px;
  }

  .pc_top .container {
    margin-bottom: 111px;
  }

  .pc_top .scrolldown2 {
    top: 400px;
    left: 13px;
  }

  .pc_top .ttl {
    display: block;
    width: auto;
    height: auto;
    border: none;
    margin-left: 0;
    margin-bottom: 28px;
  }

  .pc_top h1 {
    font-size: 16px;
    width: 300px;
    border-left: 5px solid #f2917e;
    padding-left: 10px;
  }

  .pc_top p {
    font-size: 14px;
    width: 102px;
    height: 28px;
    margin-top: 10px;
    margin-left: 231px;
  }

  .pc_top .img_pc {
    height: 194px;
  }

  .pc_top .img_sp {
    width: 72px;
    top: 51px;
    left: 257px;
  }

  .pc-list {
    display: none;
  }

  /* ーーーーーーーーーー
  リスト
  ーーーーーーーーーー */

  .sp-list {
    display: flex;
    gap: 23px;
  }

  .sp-list .list_row:nth-of-type(n + 2) {
    margin-top: 23px;
  }

  .sp-list ul {
    flex-direction: column;
  }

  .sp-list .list_ttl {
    width: 240px;
    height: 39px;
  }

  .sp-list .list_txt {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 149px;
    line-height: normal;
    text-align: center;
    padding: 0px 20px;
  }
}

/* ーーーーーーーーーー
   ALL
ーーーーーーーーーー */

.pc_all {
  display: flex;
  height: 100svh;
  align-items: center;
}

.allpage {
  display: flex;
  gap: 10px;
}

.allpage p {
  writing-mode: vertical-rl;
  font-feature-settings: initial;
}

.txt_wrapper {
  display: flex;
  height: 100%;
  align-items: center;
}

.allpage > p:nth-of-type(1) {
  margin-top: 90px;
}

.allpage p:nth-of-type(2) {
  margin-top: 202px;
}

.allpage div {
  height: 100vh;
}

/* ALLを１枚の画像に変えた時 下３つのCSS*/

/* .allpage img {
  max-width: none;
}

.pc-img_all img {
  height: 100vh;
}

.sp-img_all {
  display: flex;
  align-items: center;
}

.sp-img_all img {
  height: 400px;
} */

.allpage img {
  max-width: 431px;
}

.allpage .maxheight img {
  height: 100%;
  max-width: none;
}

.allpage .width img {
  max-height: 100%;
}

.allpage .sp img {
  height: 400px;
}

.allpage > div:nth-of-type(4),
.allpage > div:nth-of-type(6) {
  display: flex;
  align-items: flex-end;
}

.allpage > div:nth-of-type(7),
.allpage > div:nth-of-type(8),
.allpage > div:nth-of-type(9),
.allpage > div:nth-of-type(10) {
  display: flex;
  align-items: center;
}

.allpage .txt_wrapper p {
  padding-bottom: 280px;
}

.pc_all > .wrapper {
  display: flex;
  align-items: flex-end;
  margin-left: 20px;
  margin-right: 150px;
}

.pc_all a {
  width: 120px;
  height: 120px;
  border-radius: 60px;
}

.btn {
  width: 120px;
  height: 120px;
  border-radius: 60px;
}

.sp_all {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp_all {
    display: block;
    width: 100vw;
    margin-top: 36px;
  }

  .sp_all p {
    width: 90%;
    margin: 0 auto;
  }

  .images_top {
    width: 90%;
    margin: 10px auto 30px;
  }

  .images {
    display: flex;
    justify-content: center;
    gap: 2%;
  }

  .images_left,
  .images_right {
    width: 44%;
  }

  .pc_all .wrapper {
    height: 400px;
    margin-right: 40px;
  }
}

/* ーーーーーーーーーー
   ボタン
ーーーーーーーーーー */

.btn p {
  font-size: 14px;
  letter-spacing: 0.2em;
  text-align: center;
  margin-top: 42px;
}

.btn img {
  width: 26px;
  display: block;
  margin: 10px auto auto;
}

/* ーーーーーーーーーーーーーーーーーーーー
PC版ALLPAGESが右からふわっとフェードイン
ーーーーーーーーーーーーーーーーーーーー*/

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeInTrigger {
  opacity: 0;
}