@charset "UTF-8";
@font-face {
  font-family: "mplus";
  src: url("../font/MPLUSRounded1c-Bold.ttf");
}
:root {
  --transition: ease 0.3s;
  --white: #fff;
  --black: #111;
  --primary1: #239ff7;
  --primary2: #235cf7;
  --primary3: #1240e3;
  --primary4: #238cf7;
  --tryad: #f7f723;
  --green-gradient: linear-gradient(
    180deg,
    rgba(18, 163, 70, 1) 0%,
    rgba(5, 100, 39, 1) 100%
  );
  --green-gradient-hover: linear-gradient(
    180deg,
    rgb(78, 189, 101) 0%,
    rgb(55, 133, 67) 100%
  );
  --orange-gradient: linear-gradient(
    180deg,
    rgba(247, 125, 35, 1) 0%,
    rgba(247, 38, 35, 1) 100%
  );
  --orange-gradient-hover: linear-gradient(
    180deg,
    rgb(249, 161, 98) 0%,
    rgb(248, 67, 64) 100%
  );
  --shadow: 4px 5px 0 var(--black);
  --radius: clamp(5px, 1.21212vw, 24px);
  --font_mplus: "mplus";
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(14px, 1.36364vw, 15px);
  font-weight: 400;
  color: var(--white);
  background-color: var(--primary1);
}
.pc {
  display: block;
}
.sp {
  display: none;
}
.br {
  display: block;
}
.br_pc {
  display: block;
}
.br_sp {
  display: none;
}
.bold {
  font-weight: 700;
}
a {
  color: var(--white);
}
img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font_mplus);
  font-weight: normal;
}
h4 {
  font-size: clamp(21px, 2.12121vw, 28px);
}
/* ------------------------------
矢印
--------------------------------- */
.arrow {
  line-height: 1.3;
  position: relative;
}
.arrow img,
.circle img {
  position: absolute;
  width: clamp(17px, 1.51515vw, 20px);
  margin: auto;
  inset: 0;
}
/* ------------------------------
矢印+丸
--------------------------------- */
.circle {
  position: relative;
  width: clamp(30px, 3.0303vw, 33px);
  height: clamp(30px, 3.0303vw, 33px);
  border-radius: 100vmax;
  background-color: var(--white);
}
/* ------------------------------
ボタン
--------------------------------- */
.btn {
  display: flex;
  justify-content: center;
}
.btn a {
  font-family: var(--font_mplus);
  font-size: clamp(21px, 2.12121vw, 23px);
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: clamp(15px, 1.51515vw, 17px) clamp(65px, 6.06061vw, 67px)
    clamp(15px, 1.51515vw, 17px) clamp(30px, 3.0303vw, 33px);
  transition: color var(--transition), box-shadow var(--transition),
    border var(--transition);
  text-align: center;
  border: clamp(3px, 0.30303vw, 4px) solid var(--white);
  border-radius: 100vmax;
  box-shadow: var(--shadow);
}
.btn a:hover {
  box-shadow: none;
}
.btn a img {
  left: calc(100% + clamp(15px, 1.51515vw, 17px));
}
.small {
  font-size: clamp(17px, 1.74242vw, 19px);
}
.orange-gradient {
  background: var(--orange-gradient);
}
.btn a.orange-gradient:hover {
  background: var(--orange-gradient-hover);
}
.green-gradient {
  background: var(--green-gradient);
}
.btn a.green-gradient:hover {
  background: var(--green-gradient-hover);
}
.btn-flash a {
  overflow: hidden;
}
.btn-flash a::before {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  content: "";
  transition: 0.5s;
  background-image: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 80%
  );
}
.btn-flash a:hover::before {
  top: 0;
  left: 100%;
}
/* ------------------------------
見出し
--------------------------------- */
hgroup {
  position: relative;
  width: fit-content;
  margin: auto;
}
h3 {
  font-size: clamp(33px, 3.33333vw, 44px);
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(55px, 5.68182vw, 63px);
  padding: clamp(8px, 0.75758vw, 10px) clamp(30px, 3.0303vw, 33px);
  text-align: center;
  color: var(--white);
  border: clamp(3px, 0.30303vw, 4px) solid var(--white);
  border-radius: clamp(11px, 1.13636vw, 15px);
}
h3::after {
  position: absolute;
  right: 0;
  bottom: clamp(-23px, -2.27273vw, -25px);
  left: 0;
  width: clamp(38px, 3.78788vw, 42px);
  height: clamp(23px, 2.27273vw, 25px);
  margin: auto;
  content: "";
  transform: rotate(180deg);
  background-color: var(--white);
  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
}
hgroup > h3 + p {
  font-family: var(--font_mplus);
  font-size: clamp(50px, 7.57576vw, 100px);
  line-height: clamp(54px, 7.87879vw, 87px);
  position: absolute;
  z-index: -1;
  display: flex;
  justify-content: center;
  height: fit-content;
  margin: auto;
  text-align: center;
  inset: 0;
}
.s-intro_wrap hgroup > h3 + p {
  color: #0e8de9;
}
.s-list_wrap hgroup > h3 + p {
  color: var(--primary3);
}
/* ------------------------------
イラスト
--------------------------------- */
img[src*="illust"] {
  position: absolute;
  z-index: 10;
}
img[src*="illust01"] {
  right: 0;
  bottom: 0;
  width: clamp(105px, 11.36364vw, 125px);
}
img[src*="illust02"] {
  top: clamp(39px, 10.30303vw, 113px);
  right: 0;
  width: clamp(93px, 12.12121vw, 133px);
}
img[src*="illust03"] {
  top: 0;
  right: 0;
  width: clamp(87px, 11.36364vw, 125px);
}
/* ------------------------------
メイン画像
--------------------------------- */
.hero_wrap {
  position: relative;
  width: clamp(352px, 93.93939vw, 1033px);
  margin: auto;
  padding: clamp(30px, 3.0303vw, 33px) 0;
}
.logo {
  position: absolute;
  z-index: 10;
  top: clamp(65px, 4.92424vw, 54px);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(205px, 20.45455vw, 225px);
  height: clamp(56px, 5.60606vw, 62px);
  padding: clamp(11px, 1.13636vw, 15px) clamp(27px, 2.65152vw, 29px);
  border-radius: 100vmax;
  background-color: var(--white);
}
.hero_container {
  position: relative;
}
.hero_bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 620px;
  padding-bottom: clamp(11px, 3.0303vw, 33px);
  border-radius: clamp(189px, 18.93939vw, 208px) clamp(76px, 7.57576vw, 83px)
    clamp(303px, 30.30303vw, 333px) clamp(114px, 11.36364vw, 125px);
  background-image: url(../images/hero.jpg);
  background-position: center 40%;
  background-size: cover;
  gap: clamp(16px, 4.39394vw, 48px);
}
.hero_text {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: clamp(12px, 3.18182vw, 35px);
  gap: clamp(7px, 1.9697vw, 22px);
}
.hero_text picture source,
.hero_text picture img {
  display: block;
  width: clamp(288px, 40.75758vw, 448px);
}
.l-s {
  letter-spacing: clamp(-5px, -0.37879vw, -4px);
}
.hero_wrap .btn {
  justify-content: flex-start;
}
.hero_img {
  width: clamp(91px, 24.24242vw, 267px);
  height: clamp(134px, 35.75758vw, 393px);
}
/* ------------------------------
注目のサービス
--------------------------------- */
section > div[class$="_wrap"] {
  position: relative;
  z-index: 10;
  padding: clamp(50px, 7.57576vw, 83px) 0;
}
.s-intro_wrap {
  width: fit-content;
  margin: 0 auto;
}
.s-intros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
  gap: clamp(17px, 4.54545vw, 50px);
}
.s-intros:nth-of-type(2) {
  margin-top: clamp(17px, 4.54545vw, 50px);
}
.s-intro {
  display: flex;
  flex-direction: column;
  max-width: clamp(145px, 38.63636vw, 425px);
  padding: clamp(45px, 4.54545vw, 50px) clamp(30px, 3.0303vw, 33px);
  color: var(--black);
  border-radius: 100vmax;
  background-color: var(--tryad);
  gap: clamp(24px, 2.42424vw, 30px);
  font-feature-settings: "palt";
}
.s-intro_logo,
.s-intro_img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}
.s-intro_logo {
  max-width: clamp(260px, 26.51515vw, 292px);
  min-height: 80px;
  max-height: 80px;
}
.s-intro_img {
  min-height: 160px;
}
.jcom .s-intro_img,
.eco .s-intro_img {
  min-height: 220px;
}
.s-intro h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  text-align: center;
}
.s-intro p {
  font-size: clamp(14px, 1.36364vw, 18px);
  height: 100%;
  max-height: 320px;
}
.s-intro.jcom h4 {
  font-size: clamp(21px, 1.9697vw, 22px);
}
.s-intro.eco p {
  font-feature-settings: normal;
}
/* ------------------------------
スライド
--------------------------------- */
.s-intros .s-intro {
  opacity: 0;
}
.s-intros .s-intro:nth-child(1).is-visible,
.s-intros .s-intro:nth-child(3).is-visible {
  animation: slideLeft 1s 1 ease-out forwards;
}
@keyframes slideLeft {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.s-intros .s-intro:nth-child(2).is-visible,
.s-intros .s-intro:nth-child(4).is-visible {
  animation: slideRight 1s 1 ease-out forwards;
}
@keyframes slideRight {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* ------------------------------
サービスリスト
--------------------------------- */
.s-list_wrap {
  background-color: var(--primary2);
}
.s-list_container {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.s-lists {
  width: clamp(307px, 81.81818vw, 900px);
  margin: 0 auto;
}
.s-lists h4 {
  margin-bottom: clamp(14px, 1.51515vw, 30px);
}
.s-lists a {
  display: flex;
}
.s-list {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 1.51515vw, 30px);
  border-bottom: clamp(2px, 0.15152vw, 3px) dotted var(--white);
  gap: clamp(3px, 0.75758vw, 15px);
}
.s-list hgroup {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: clamp(10px, 0.75758vw, 15px);
}
.s-lists h4 {
  margin-top: clamp(60px, 6.06061vw, 120px);
  margin-bottom: clamp(14px, 1.51515vw, 30px);
}
.s-list h5 {
  font-size: clamp(17px, 1.74242vw, 23px);
  color: var(--white);
}
.s-list p {
  font-size: clamp(14px, 1.36364vw, 18px);
}
.s-lists a .hover_line {
  text-decoration: underline;
}
.s-lists a:hover .hover_line {
  text-decoration: none;
}
.s-list .circle.arrow {
  flex: 0 1 auto;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .br_pc {
    display: none;
  }
  .br_sp {
    display: block;
  }
  .small {
    font-size: inherit;
    line-height: 1;
  }
  .hero_wrap {
    width: calc(100% - clamp(40px, 10.66667vw, 60px));
  }
  .hero_bg {
    padding-bottom: clamp(40px, 10.66667vw, 60px);
    background-image: url(../images/hero_sp.jpg);
  }
  .hero_text {
    margin-top: 0;
    padding-left: clamp(10px, 2.66667vw, 15px);
  }
  section > div[class$="_wrap"] {
    position: relative;
    z-index: 10;
    padding: clamp(50px, 7.57576vw, 83px) clamp(20px, 5.33333vw, 30px);
  }
  .s-intro {
    max-width: none;
  }
  .s-intro:nth-of-type(2) {
    margin-top: clamp(17px, 4.54545vw, 50px);
  }
  .s-intro_img {
    height: auto;
  }
  .s-intro.eco p {
    font-feature-settings: "palt";
  }
  @media (orientation: landscape) {
    .hero_text {
      margin-top: clamp(45px, 11.994vw, 120px);
    }
  }
}