@charset "UTF-8";

/* CSS Document */
.container {
  overflow: hidden;
}

@media(min-width:769px) {
  .nav-top {
    border-bottom: 3px solid #80CED7 ;
  }
}

/* トップ */
.section-top {
  position: relative;
}

.section-top__image-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 200px 0 70px;
}

.section-top h2 {
  text-align: left;
  width: 100%;
  font-size: clamp(20px, 3.4vw, 5rem);
  line-height: 1.64;
}

.color-007EA7 {
  color: #007EA7;
}

/* 文字アニメーションここから */
.catchphrase {
  opacity: 1;
  transition: opacity 1s ease-in-out;
  /* フェードイン・フェードアウトの時間を3秒に設定 */
}

.catchphrase__hidden {
  opacity: 0;
}
/* 文字アニメーションここまで */


.section-top__tel {
  position: absolute;
  top: 50px;
  right: -40px;
  padding-top: 5rem;
  font-size: clamp(18px, 3.4vw, 2.4rem);
  font-weight: 600;
}

.section-top__picture {
  width: 34.36%;
  min-width: 200px;
  max-width: 378px;
  height: 100%;
  margin-right: 10.9%;
  flex-shrink: 0;
}

.section-top__message-area {
  position: relative;
  padding: 200px 0;
}

/* 水玉PC */
.section-top__round_all__sp {
  display: none;
}

.section-top__round_1 {
  position: absolute;
  top: 70px;
  left: -27%;
  width: 26.54%;
  max-width: 292px;
}

.section-top__round_2 {
  position: absolute;
  top: 107px;
  left: 17%;
  width: 10%;
  max-width: 110px;
}

.section-top__round_3 {
  position: absolute;
  top: 43px;
  left: 45%;
  width: 16.63%;
  max-width: 183px;
}

.section-top__round_4 {
  position: absolute;
  top: 136px;
  right: 12%;
  width: 10%;
  max-width: 110px;
}

.section-top__round_5 {
  position: absolute;
  top: 8px;
  right: -25%;
  width: 26.54%;
  max-width: 292px;
}

.section-top__round_6 {
  position: absolute;
  bottom: 148px;
  left: -18%;
  width: 16.63%;
  max-width: 292px;
}

.section-top__round_7 {
  position: absolute;
  bottom: 78px;
  left: 20%;
  width: 16.63%;
  max-width: 183px;
}

.section-top__round_8 {
  position: absolute;
  right: 37%;
  bottom: 157px;
  width: 10%;
  max-width: 110px;
}

.section-top__round_9 {
  position: absolute;
  right: -7%;
  bottom: 8px;
  width: 26.54%;
  max-width: 292px;
}

.section-top__round_10 {
  position: absolute;
  right: -17%;
  bottom: 250px;
  width: 6.36%;
  max-width: 70px;
}
/* 水玉PCここまで */

/* ファーストビュー動きここから */
.yurayura {
  animation: yurayura 3s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}

@keyframes yurayura {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }

  50% {
    transform: translate(0, -7px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}

.fuwafuwa__sp {
  animation: fuwafuwa__sp 3s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}

@keyframes fuwafuwa__sp {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(0, -7px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(0, -10px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.puyon {
  animation: puyon 8s linear infinite; /* 0.3秒のアニメーション + 6.7秒の待機 */
}

.puyon1 {
  animation-delay: 0s; /* 最初の要素はすぐに開始 */
}

.puyon2 {
  animation-delay: 4s; /* 2番目の要素は2秒遅らせて開始 */
}

@keyframes puyon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(0.98, 1.06) translate(0%, -3%); } /* 幅を少し拡大 */
  20%  { transform: scale(1.02, 0.94) translate(0%, 4%); }
  30%  { transform: scale(0.98, 1.03) translate(0%, -2%); }
  40%  { transform: scale(1.02, 0.97) translate(0%, 2%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 最後の状態を維持 */
}
/* ファーストビュー動きここまで */

.section-top__message-description {
  padding: 55px 60px;
  background-color: #F6FDFD;
  text-align: left;
}

.section-top__message-title {
  margin-bottom: 6.5rem;
  font-size: 2.4rem;
  font-weight: 500;
}

.section-top__message-description p {
  margin-bottom: 37px;
}

@media(min-width:429px) {
  a[href^="tel:"] {
    color: #003249;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}
}

@media(max-width:768px) {
  .section-top__image-area {
    display: block;
  }

  .section-top__PSSKOBE {
    display: inline-block;
    width: 100%;
    margin: 0 auto 30px;
  }

  .section-top__tel {
    right: 0;
  }

  .section-top__picture {
    width: 57%;
    min-width: 176px;
    margin-right: unset;
  }

  .section-top__message-description {
    padding: 35px 0 0 0;
  }

  .section-top__message-title {
    padding: 0 2.66%;
    margin-bottom: 35px;
    font-size: 1.8rem;
    text-align: center;
  }

  .section-top__message-description p {
    padding: 0 5.33%;
    margin-bottom: 25px;
  }
}

@media(max-width:428px) {
  .section-top__image-area {
    position: relative;
    padding: 135px 0 0 0;
  }

  .section-top h2 {
    text-align: left;
    width: 57.99%;
    margin: 0 auto;
    font-size: clamp(20px, 3.4vw, 5rem);
    line-height: 1.64;
  }

  .section-top__tel {
    right: 0;
    font-size: 2.0rem;
  }

  a[href^="tel:"] {
    color: #003249;
    text-decoration: none;
}

  .section-top__PSSKOBE {
    display: inline-block;
    width: 100%;
    margin: 40px auto;
  }

  .section-top__picture {
    display: none;
  }

  .section-top__picture__sp {
    width: 57%;
    min-width: 176px;
    margin-right: unset;
  }

  /* 水玉SPここから */
  .section-top__round_all {
    display: none;
  }

  .section-top__round_all__sp {
    display: block;
  }

  .section-top__round_1__sp {
    position: absolute;
    top: 338px;
    left: -12%;
    width: 20.63%;
    max-width: 65px;
  }

  .section-top__round_2__sp {
    position: absolute;
    top: 416px;
    left: 10%;
    width: 7.93%;
    max-width: 25px;
  }

  .section-top__round_3__sp {
    position: absolute;
    top: 347px;
    left: 17%;
    width: 12.69%;
    max-width: 40px;
    z-index: -1;
  }

  .section-top__round_4__sp {
    position: absolute;
    top: 405px;
    right: 12%;
    width: 7.93%;
    max-width: 25px;
  }

  .section-top__round_5__sp {
    position: absolute;
    top: 324px;
    right: -5%;
    width: 20.63%;
    max-width: 65px;
  }

  .section-top__round_6__sp {
    position: absolute;
    bottom: 0px;
    left: -5%;
    width: 12.69%;
    max-width: 40px;
  }

  .section-top__round_7__sp {
    position: absolute;
    bottom: -22px;
    left: 22%;
    width: 12.69%;
    max-width: 40px;
  }

  .section-top__round_8__sp {
    position: absolute;
    right: 23%;
    bottom: 0px;
    width: 7.93%;
    max-width: 25px;
  }

  .section-top__round_9__sp {
    position: absolute;
    right: -17%;
    bottom: -12px;
    width: 20.63%;
    max-width: 65px;
  }

  .section-top__round_10__sp {
    position: absolute;
    right: -11%;
    bottom: 95px;
    width: 5.07%;
    max-width: 16px;
  }

  /* 水玉SPここまで */

  .section-top__message-area {
    padding: 50px 0 100px;
  }
}


/* お知らせ */
.section-news {
  margin-bottom: 300px;
  font-size: 2.0rem;
}

.section-news h3 {
  margin: 0 auto 40px;
}

.section-news li {
  padding: 20px 5.2%;
  list-style: none;
  border-bottom: 1px solid #CCDBDC;
  text-decoration: none;
  text-align: left;
}

.section-news li:nth-of-type(1) {
  border-top: 1px solid #CCDBDC;
}

.section-news span {
  color: #007EA7;
  vertical-align: middle;
  display: inline-block;
  margin-right: 5%;
}

.section-news p {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

@media(max-width:768px) {
  .section-news {
    margin-bottom: 100px;
    font-size: 1.4rem;
  }

  .section-news h3 {
    margin: 0 auto 35px;
  }
}


/* お困りごと */
.section-problem {
  margin-bottom: 175px;
}

.section-problem__speech-bubble {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 50px;
  color: #007EA7;
  font-size: 2.4rem;
}

.section-problem__speech-bubble::before,
.section-problem__speech-bubble::after {
  content: '';
  width: 1px;
  height: 45px;
  background-color: #007EA7;
}

.section-problem__speech-bubble::before {
  margin-right: 50px;
  transform: rotate(-35deg)
}

.section-problem__speech-bubble::after {
  margin-left: 50px;
  transform: rotate(35deg)
}

.section-problem_vertical-line {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80%;
  height: 100px;
  margin: 0 auto 108px;
  padding: 0 9.81% 0;
  border-left: solid #80CED7 16px;
  border-right: solid #80CED7 16px;
}

.section-problem ul {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  gap: 35px;
}

.section-problem li {
  list-style: none;
  width: 300px;
  border: solid 4px #CCDBDC;
  border-radius: 33px;
  padding: 30px 10px;
  font-size: 2.0rem;
  line-height: 1.5;
  letter-spacing: 0;
}

/*1675px*/

@media(max-width:1432px) {
  .wrap-reverse__section-problem {
    order: 3;
  }
}

@media(max-width:937px) {
  .section-problem ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
  }

  .wrap-reverse__section-problem {
    order: unset;
  }
}

.section-problem__image-area {
  width: 100%;
  background-image: url(../images/problem.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.section-problem_message {
  margin: 40px auto 80px;
  color: #007EA7;
  font-size: 2.4rem;
}

.section-problem__description {
  text-align: left;
}

.section-problem__description-first {
  margin-bottom: 40px;
}

.color-CC8080 {
  color: #CC8080;
}

@media(max-width:768px) {
  .section-problem {
    margin-bottom: 100px;
  }

  .section-problem__speech-bubble {
    margin: 0 auto 25px;
    font-size: 1.8rem;
  }

  .section-problem__speech-bubble::before,
  .section-problem__speech-bubble::after {
    content: '';
    width: 1px;
    height: 35px;
    background-color: #007EA7;
  }

  .section-problem__speech-bubble::before {
    margin-right: 30px;
    transform: rotate(-30deg)
  }

  .section-problem__speech-bubble::after {
    margin-left: 30px;
    transform: rotate(30deg)
  }

  .section-problem_vertical-line {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 70%;
    height: 40px;
    margin: 0 auto 60px;
    padding: unset;
    border-left: solid #80CED7 8px;
    border-right: solid #80CED7 8px;
    font-size: 1.8rem;
  }

  .section-problem ul {
    gap: 30px;
  }

  .section-problem h3 {
    font-size: 1.8rem;
  }

  .section-problem li {
    max-width: 315px;
    padding: 20px 3%;
    font-size: 1.6rem;
    letter-spacing: 0;
  }

  .section-problem_message {
    font-size: 1.8rem;
  }
}

@media(max-width:570px) {
  .section-problem_vertical-line {
    max-width: 100%;
  }
}


/* サービス */
.section-service {
  margin-bottom: 170px;
}

.section-service h3 {
  margin-bottom: 100px;
}

.section-service ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

.section-service li {
  list-style: none;
}

.section-service__picture {
  max-width: 80%;
}

@media(max-width:1000px) {
  .section-service ul {
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
  }

  .section-service li {
    max-width: 240px;
  }
}

.section-service__item p {
  margin-bottom: 40px;
  color: #007EA7;
  font-size: 2.4rem;
}

.section-service .cta-button {
  margin: 20px auto;
}

@media(max-width:768px) {
  .section-service {
    margin-bottom: 100px;
  }

  .section-service h3 {
    margin-bottom: 70px;
  }

  .section-service__item p {
    font-size: 1.8rem;
  }
}


/* お取り扱い製品 */
.section-products {
  margin-bottom: 170px;
}

.section-products h3 {
  margin-bottom: 100px;
}

.section-products__image-area {
  max-width: 500px;
  height: auto;
  margin: 0 auto 60px;

}

.section-products .cta-button {
  margin: 80px auto 170px;
}

@media(max-width:768px) {
  .section-products {
    margin-bottom: 100px;
  }

  .section-products h3 {
    margin-bottom: 50px;
  }
}


/* サービスに関する質問 */
.section-inquiry {
  margin-bottom: 145px;
  color: #007EA7;
  font-size: 2.4rem;
}

.section-inquiry p {
  margin-bottom: 110px;
}

@media(max-width:768px) {
  .section-inquiry {
    margin-bottom: 100px;
    font-size: 1.8rem;
  }

  .section-inquiry p {
    margin-bottom: 87px;
  }
}