@import url(common/css/common.css);

.mainvisual {
  position: relative;
}
.mainvisual p.maincopy {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

p.eachTextAnime {
  width: 768px;
  font-family: shippori-mincho, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  font-size: 60px;
  line-height: 1.5;
}
p.eachTextAnime span:nth-child(3),
p.eachTextAnime span:nth-child(13),
p.eachTextAnime span:nth-child(18),
p.eachTextAnime span:nth-child(26),
p.eachTextAnime span:nth-child(27) {
  font-size: 36px;
}

/*========= 1文字ずつ出現させるためのCSS ===============*/

.eachTextAnime span {
  opacity: 0;
}
.eachTextAnime.appeartext span {
  animation: text_anime_on 1s ease-out forwards;
}
@keyframes text_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

main section {
  padding: 144px 0;
}

main .value {
  padding: 48px 65px;
  background-color: #fff;
  border: 2px solid #762c3d;
  box-shadow: 15px 15px #762c3d;
}

.min {
  display: none;
}

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  left: 50%;
  top: -128px;
  /*全体の高さ*/
  height: 96px;
}

/* 線の描写 */
.scrolldown1::after {
  content: "";
  /*描画位置*/
  position: absolute;
  top: -128px;
  /*線の形状*/
  width: 1px;
  height: 96px;
  background: #762c3d;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0;
    top: -128px;
    opacity: 0;
  }
  30% {
    height: 96px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 96px;
    opacity: 0;
  }
}

main section.service .title {
  height: 400px;
  width: 100%;
  color: #fff;
  background-color: #762c3d;
  position: relative;
}

main section.service .title aside {
  padding-top: 48px;
}

main section.service ul {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  transform: translateY(-151px);
}

main section.service ul li {
  width: calc(50% - 15px);
}

main section.service ul li div {
  background-color: #fff;
}

main section.service ul li:hover {
  transform: translateY(-15px);
  transition: 0.3s;
}

main section.service ul li img {
  height: 270px;
  object-fit: cover;
}
main section.service ul li:nth-child(4) img {
  object-position: top;
}

main section.service h3 {
  padding: 24px 0;
  font-size: 24px;
  text-align: center;
}

main section.service p.text {
  padding: 0 65px;
  padding-bottom: 24px;
  height: 8em;
}

main section.service p.link {
  padding: 24px 0;
  margin: 0 15px;
  font-size: 20px;
  text-align: center;
  border-top: 1px solid #333;
}

main section.company {
  padding: 96px 0;
  background-color: #fff;
  width: 100%;
  position: relative;
}

main section.company .container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  column-gap: 30px;
}

main section.company .container div {
  flex: 1;
}

main section.company img {
  max-width: 350px;
  height: 362px;
  object-fit: cover;
  box-shadow: 15px 15px #762c3d;
}

main section.company div.title {
  padding-left: 30px;
  padding-bottom: 0;
  margin-bottom: 96px;
  text-align: left;
  border-left: 1px solid #333;
}

main section.company dl div {
  padding-left: 30px;
  padding-bottom: 24px;
  display: flex;
  column-gap: 30px;
}
main section.company dl div:last-child {
  padding-bottom: 0;
}

main section.company dl div dt {
  flex-basis: 65px;
}

main section.company dl div dd {
  flex: 1;
}

main section.contact {
  padding-top: 288px;
}

main section.contact > div {
  padding: 48px 0 165px 0;
  background-image: url(img/contactbg.jpg);
  background-position: center;
  width: 100%;
  color: #fff;
  position: relative;
}

main section.contact p.text {
  padding-bottom: 48px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-size: 24px;
}

/* レスポンシブ */
@media (max-width: 1199px) {
  p.eachTextAnime {
    width: 600px;
    font-size: 48px;
  }
  p.eachTextAnime span:nth-child(3),
  p.eachTextAnime span:nth-child(13),
  p.eachTextAnime span:nth-child(18),
  p.eachTextAnime span:nth-child(26),
  p.eachTextAnime span:nth-child(27) {
    font-size: 24px;
  }

  main .value {
    box-shadow: 8px 8px #762c3d;
  }

  main section.service ul {
    gap: 15px;
  }
  main section.service ul li {
    width: calc(50% - 8px);
  }
  main section.service p.text {
    padding: 0 15px;
  }

  main section.company img {
    box-shadow: 8px 8px #762c3d;
  }
}

@media (max-width: 991px) {
  p.eachTextAnime {
    width: 500px;
    font-size: 40px;
  }
  p.eachTextAnime span:nth-child(3),
  p.eachTextAnime span:nth-child(13),
  p.eachTextAnime span:nth-child(18),
  p.eachTextAnime span:nth-child(26),
  p.eachTextAnime span:nth-child(27) {
    font-size: 20px;
  }

  main section.service p.text {
    height: 10em;
  }

  main section.contact p.text {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .pc {
    display: none;
  }

  p.eachTextAnime {
    width: 400px;
    font-size: 32px;
  }
  p.eachTextAnime span:nth-child(3),
  p.eachTextAnime span:nth-child(13),
  p.eachTextAnime span:nth-child(18),
  p.eachTextAnime span:nth-child(26),
  p.eachTextAnime span:nth-child(27) {
    font-size: 16px;
  }

  .mainvisual p.maincopy {
    top: 30%;
  }
  .mainvisual {
    padding-bottom: 48px;
  }

  main section {
    padding: 48px 0;
  }

  main .value {
    padding: 48px 15px;
  }

  main section.service .title {
    height: 200px;
  }
  main section.service ul {
    transform: translateY(-48px);
  }
  main section.service p.text {
    height: 12em;
  }

  main section.contact {
    padding: 96px 0;
  }

  main section.contact p.text {
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  p.eachTextAnime {
    width: 95%;
    font-size: 28px;
  }
  p.eachTextAnime span:nth-child(3),
  p.eachTextAnime span:nth-child(13),
  p.eachTextAnime span:nth-child(18),
  p.eachTextAnime span:nth-child(26),
  p.eachTextAnime span:nth-child(27) {
    font-size: 16px;
  }
  .mainvisual p.maincopy {
    top: 25%;
  }

  .min {
    display: block;
  }

  main section.service ul {
    display: block;
  }
  main section.service ul li {
    width: 100%;
    padding-bottom: 24px;
  }
  main section.service ul li:last-child {
    padding-bottom: 0;
  }
  main section.service p.text {
    height: 10em;
  }

  main section.company {
    padding: 48px 0;
  }
  main section.company .container {
    display: block;
  }
  main section.company div.title {
    padding-left: 0;
    border-left: none;
    margin-bottom: 48px;
    text-align: center;
  }
  main section.company dl div:last-child {
    padding-bottom: 48px;
  }
}