@charset "UTF-8";
/*************************
Vision
*************************/
.vision .v-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  width: 70%;
  margin: 5% auto;
}
.vision .v-left {
  width: 100%;
  padding: 5%;
}
.vision .v-left h1 {
  font-size: max(2vw, 25px);
  display: none;
}
.vision .v-left h2 {
  font-size: max(1.7vw, 20px);
  margin-top: 3%;
  display: none;
}
.vision .v-left p {
  font-size: max(1.1vw, 16px);
  margin-top: 3%;
}
.vision .v-left .site-btn {
  width: 30%;
  padding: 10px 20px;
}
.vision .v-right {
  width: 100%;
}

/*************************
Service
*************************/
.service h2 {
  font-size: max(8vw, 40px);
  color: #cacaca;
}
.service .se-p {
  font-size: max(2.3vw, 16px);
}
.service .pc-box {
  border: solid 0.2em #f9eb21;
  width: 90%;
  display: block;
  margin: 5% auto;
  border-radius: 1.5em;
  padding: 3%;
}
.service .service-box {
  display: flex !important;
  align-items: stretch;
  background: #f2f2f2;
  margin: 7.5% 5%;
  height: 100%;
  color: black;
  box-shadow: 0.4em 0.4em 1em rgba(0, 0, 0, 0.637);
  border-radius: 2.5em;
  position: relative;
}
.service .service-box .mark {
  position: absolute;
  width: 12%;
  right: -5%;
  top: -12%;
}
.service .service-left {
  width: 45%;
  font-size: 2vw;
}
.service .service-left img {
  margin: 10%;
  width: 80%;
  border-radius: 1em;
}
.service .service-right {
  width: 55%;
  display: flex;
  padding: 3% 3% 3% 0;
  flex-direction: column;
}
.service .service-right h3 {
  width: 90%;
  font-size: max(2.5vw, 20px);
  border-bottom: 1px solid black;
  padding: 0% 1% 1% 1%;
  margin-bottom: 3%;
  font-weight: 400;
}
.service .service-right p {
  font-size: max(1.6vw, 16px);
  line-height: 170%;
  padding-left: 10%;
  padding-top: 1%;
}
.service .site-btn {
  align-self: flex-end;
}

/*************************
PC swiper
*************************/
.container {
  padding-bottom: 0;
  margin-bottom: 0;
  width: 100%;
  padding: 0 2.5%;
}

.main2 .card-image > a {
  border: solid 0.5em #f9eb21;
}
.main2 .card-image > a h4 span {
  border-bottom: solid 0.2em #f9eb21;
}

.main .container .swiper-container .swiper-wrapper .swiper-slide:hover img {
  transform: scale(1, 1);
  transition: 0s ease;
}

.swiper-container-autoheight .swiper-wrapper {
  height: 100% !important;
  align-items: stretch !important;
}

.main .container .swiper-container .swiper-wrapper .swiper-slide {
  height: auto !important;
}
.main .container .swiper-container .swiper-wrapper .swiper-slide .card-image {
  height: 100% !important;
  margin: 0;
  padding: 0;
}

.main .container .swiper-container .swiper-wrapper .swiper-slide .card-image img {
  border-radius: 1em;
}

.main .container .swiper-container .swiper-pagination {
  bottom: 0px;
}

.card-image > a {
  background-color: white;
  display: flex !important;
  flex-wrap: wrap;
  width: 87.5%;
  box-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.515);
  padding: 3%;
  margin: 0 auto;
  color: black;
  justify-content: center;
  align-content: flex-start;
  border-radius: 2em;
  border: solid 0.5em #ff914d;
  height: 100%;
  position: relative;
  padding-bottom: 0;
}
.card-image > a img {
  border-radius: 0;
}
.card-image > a h4 {
  margin-bottom: 5%;
  font-size: max(1.3vw, 14px);
}
.card-image > a h4 span {
  padding: 0.5% 2%;
  border-bottom: solid 0.2em #ff914d;
}
.card-image > a .voice-title {
  width: 100%;
}
.card-image > a .site-left {
  width: 35%;
}
.card-image > a .site-right {
  width: 60%;
  padding: 2.5%;
  padding-top: 0;
  font-size: max(1.4vw, 14px);
}
.card-image > a .site-btn {
  position: absolute;
  bottom: 15%;
  right: 20%;
}
.card-image > a .site-btn span {
  background-color: #f9eb21;
  padding: 15% 100%;
  border-radius: 0.5em;
  font-size: max(1.2vw, 13px);
}
.card-image > a .profile {
  text-align: center;
  padding-top: 5%;
  font-size: max(1.3vw, 14px);
}

.site-btn {
  bottom: 15%;
  right: 20%;
  margin-top: 5%;
  width: 50%;
  justify-content: center;
  align-items: center;
  display: flex !important;
  background-color: #05c1d3;
  padding: 2% 6%;
  border-radius: 0.5em;
  border-radius: 9999px;
  color: white;
  font-weight: 800;
  margin: 0 auto;
  margin-top: 7%;
  text-align: center;
  margin-left: auto;
  margin-right: 5%;
}
.site-btn .view {
  width: 85%;
  font-size: max(1.8vw, 20px);
}
.site-btn .arrow {
  width: 15%;
  font-size: 1.8vw;
  color: transparent;
}
.site-btn .arrow span {
  background-color: rgba(255, 255, 255, 0.807);
  border-radius: 50%;
  padding: 30%;
  -webkit-text-stroke: 0.1em black;
  text-stroke: 0.1em black;
}

.card-box {
  display: flex;
  width: 90%;
  margin: 2% auto 5% auto;
}
.card-box .cards {
  width: 30%;
  margin: 3.3% auto;
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.622);
}

.reason {
  width: 90%;
  margin: 0 auto;
  border: 0;
}
.reason h4 {
  font-size: max(5vw, 65px);
  font-family: Impact !important;
}
.reason h5 {
  font-size: max(4vw, 30px);
}
.reason h5 span {
  color: #084279;
}
.reason h5 .blue1 {
  font-size: max(6vw, 50px);
}
.reason h5 .blue2 {
  font-size: max(5.5vw, 40px);
}
.reason .from {
  font-size: max(20px, 2.5vw);
  margin-top: 3%;
}
.reason ul {
  width: 90%;
  margin: 0 auto;
}
.reason ul li {
  margin: 3% 0 2% 0;
  border-bottom: dashed 0.05em gray;
  align-items: center;
  color: #545454;
  font-size: max(3vw, 20px);
  display: flex;
}
.reason ul li .img-box {
  width: 5%;
  min-width: 20px;
}
.reason ul li img {
  width: 100%;
}
.reason ul .text-box {
  padding-left: 1%;
  font-weight: 800;
}

details {
  width: 100%;
}
details p {
  font-weight: 400;
  font-size: max(1.6vw, 16px);
  padding-left: 6%;
  padding: 2% 6%;
}

details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
}
details summary .img-box {
  width: 4%;
}

details summary::-webkit-details-marker {
  display: none;
}

.d-title {
  position: relative;
  display: inline;
  padding-left: 10px;
  max-width: calc(100% - 50px);
}

details summary .d-title::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background-image: url("../../src/home/arrow.webp");
  background-size: contain;
  font-weight: 400;
  margin-left: 20px;
  color: #b5b5b5;
  right: -35px;
  bottom: 10%;
}

/**
   * アコーディオンがオープン時はマイナスアイコンに変更
  **/
details[open] summary .d-title::after {
  font-weight: 400;
  transform: rotate(180deg);
}

.review-box {
  background-color: #084279;
  box-shadow: -20px 20em 10em -10em white inset, 20px -20em 10em -10em white inset;
  padding: 10% 0% 10% 0;
}
.review-box h2 {
  font-size: max(7vw, 70px);
  line-height: 100%;
  margin-bottom: 7%;
  color: white;
  opacity: 0.5;
  margin-left: 3%;
}
.review-box main {
  margin-bottom: 5%;
}
.review-box .reviews-flex {
  display: flex;
}
.review-box .reviews-flex .reviews {
  background-color: white;
  color: black;
  padding: 1%;
  width: 20%;
  margin: 0 auto;
  border: solid 0.5em #f9eb21;
  border-radius: 2em;
}
.review-box .reviews-flex .re-top {
  display: flex;
}
.review-box .reviews-flex .top-left {
  width: 50%;
}
.review-box .reviews-flex .top-left img {
  border-radius: 1em;
}
.review-box .reviews-flex .top-right {
  width: 50%;
}
.review-box .reviews-flex .re-bottom {
  display: flex;
}
.review-box .reviews-flex .bottom-left {
  width: 50%;
}
.review-box .reviews-flex .bottom-right {
  width: 50%;
}

.news h4 {
  width: 90%;
  margin: 7% auto 2% auto;
  font-size: max(8vw, 70px);
  color: #cacaca;
}

.news-box {
  display: flex;
  gap: 0 5%;
  margin: 0 auto;
  width: 90%;
}
.news-box .blog {
  width: 50%;
  padding: 2.5%;
  padding-top: 2%;
  border-radius: 2em;
  border: solid 3px #fce65f;
}
.news-box .blog h5 {
  font-size: max(4vw, 30px);
  color: #fce65f;
  padding-bottom: 2%;
}
.news-box .blog a {
  display: flex !important;
  color: black;
  margin-bottom: 7.5%;
}
.news-box .blog a .thumb {
  width: 50%;
}
.news-box .blog a .detail {
  margin: 0% 2.5%;
  width: 45%;
  border-bottom: 1px solid #fce65f;
}
.news-box .instagram {
  width: 50%;
  background-image: url("../../src/home/bg-yellow.webp");
  background-size: cover;
}
.news-box .instagram .insta-title {
  background-color: white;
  margin: 5% 0;
}
.news-box .instagram .insta-title img {
  width: 50%;
  margin: 2% auto;
}
.news-box .instagram .insta-cards {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10%;
  gap: 0 10%;
}
.news-box .instagram .insta-cards a {
  width: 45%;
  margin-top: 0%;
  margin-bottom: 7.5%;
}

@media (max-width: 700px) {
  .vision .v-box {
    display: flex;
    flex-direction: column-reverse;
    width: 90%;
  }
  .vision .v-left {
    width: 100%;
  }
  .vision .v-right {
    width: 100%;
  }
  .service .service-box {
    flex-direction: column;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.637);
    margin-bottom: 40px;
  }
  .service .service-left {
    width: 100%;
  }
  .service .service-right {
    width: 100%;
    padding: 5%;
    padding-top: 0;
  }
  .service .service-box .mark {
    width: 22%;
    right: -6%;
    top: -6%;
  }
  .site-btn {
    width: 60%;
  }
  .site-btn .view {
    font-size: 17px;
  }
  .site-btn .arrow span {
    font-size: 17px;
  }
  .vision .v-left .site-btn {
    width: 60%;
  }
  .card-box {
    display: block;
  }
  .card-box .cards {
    width: 90%;
    margin: 5% auto;
  }
  .review-box {
    padding: 50px 0;
  }
  .card-image > a {
    border: solid 3px #ff914d;
  }
  .card-image > a h4 {
    margin-bottom: 10px;
  }
  .card-image > a h4 span {
    border-bottom: solid 2px #ff914d;
  }
  .card-image > a .site-left {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
  }
  .card-image > a .site-left img {
    width: 30% !important;
    margin: 0% 10%;
  }
  .card-image > a .profile {
    width: 50% !important;
    text-align: left;
  }
  .card-image > a .site-right {
    padding-left: 0;
    padding: 5%;
    width: 100%;
  }
  .main2 .card-image > a {
    border: solid 3px #f9eb21;
  }
  .main2 .card-image > a h4 span {
    border-bottom: solid 2px #f9eb21;
  }
  .swiper-pagination {
    bottom: 0% !important;
  }
  .main .container .swiper-container {
    padding-bottom: 50px;
  }
  details summary {
    align-items: center;
  }
  details summary .d-title::after {
    width: 25px;
    height: 25px;
  }
  .reason ul {
    margin: 10px auto;
    width: 100%;
    margin-bottom: 30px;
  }
  .reason ul li {
    margin-bottom: 15px;
  }
  .reason .from {
    margin-top: 20px;
  }
  .news h4 {
    margin-top: 50px;
  }
  .news-box {
    display: block;
    margin-bottom: 100px;
  }
  .news-box .blog {
    width: 100%;
    padding: 5%;
  }
  .news-box .blog a {
    display: block !important;
  }
  .news-box .blog a .thumb {
    width: 100%;
  }
  .news-box .blog a .detail {
    padding: 10px 0;
    width: 100%;
    margin: 0;
  }
  .news-box .instagram {
    width: 100%;
    margin-top: 50px;
    padding-top: 10px;
  }
  .news-box .instagram .insta-title img {
    width: 60%;
    margin: 0px auto;
    padding: 10px 0;
  }
  .news-box .instagram .insta-cards {
    padding: 0 5%;
    gap: 0 5%;
  }
  .news-box .instagram .insta-cards a {
    width: 47.5%;
  }
}/*# sourceMappingURL=home.css.map */