@charset "UTF-8";

/*　-------------------------------------リセット/設定------------------------------------ */

*,
*:before,
*:after {
  min-height: 0vw; /*safariのclamp()不具合防止*/
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  object-fit: cover;
}

/*投稿内(エディターとフロント )以外の要素    .post-areaはフロント投稿内のクラス */
:where(*):not(.post-area *, .post-area),
:where(*):not(.post-area *, .post-area)::after,
:where(*):not(.post-area *, .post-area)::before {
  padding: 0;
  margin: 0;
}

/*contactform7 ホームボタンのズレ防止*/
div.wpcf7 .wpcf7-spinner {
  display: none !important;
}

/*postのスマホサイズの変形防止*/
/*
img[class*="wp-image-"][style*="height\:"]{
	height:auto !important;
}
*/

/*　hover */
@media (hover: hover) /* hoverできるデバイスのみ */ {
  a:hover,
  input[type="submit"]:hover,
  button:hover {
    opacity: 0.5;
  }

  a,
  input,
  textarea,
  button {
    transition: opacity 0.15s ease-in-out;
  }
}

a {
  text-decoration: none;
}

/*　-------------------------------------共通設定------------------------------------- */

/*--共通width カラー指定--*/
:root {
  color-scheme: light;
  --side-l: max(6vw, calc((100vw - 1680px) / 2));
  --side-m: max(11vw, calc((100vw - 1482px) / 2));
  --header-height: clamp(100px, 40px + 4.167vw, 120px);
  --text-trim: calc((1em - 1lh) / 2);
  --red: #ff0000;
  --font-blue01: #0065a3;
  --font-blue02: #264a7a;
  --right-blue: #e6edf3;
  --point-blue: #84b3e5;
  --gradation-base: rgb(50, 132, 176);
  --gradation: linear-gradient(
    95deg,
    rgba(50, 132, 176, 1) 0%,
    rgba(17, 71, 98, 1) 100%
  );
}

@media (max-width: 960px) /* タブレット以下 */ {
  :root {
    --side-l: 4vw;
    --side-m: 5vw;
    --header-height: 80px;
  }
}

html {
  /*scroll-behavior: smooth;*/
  scroll-padding-top: calc(var(--header-height) + 50px); /*ページ内リンク調節*/
}

.container-l {
  margin: 0 var(--side-l);
}

.container-m {
  margin: 0 var(--side-m);
}

/*タイトル*/
.top-title {
  color: var(--font-blue01);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-title-en {
  font-size: clamp(14px, 3px + 1.912vw, 40px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
}

.top-title-en::after {
  content: "";
  display: block;
  height: clamp(2px, 1px + 0.221vw, 5px);
  width: auto;
  background-color: var(--font-blue01);
  margin: 0.5em 0;
}

.top-title-ja {
  font-size: clamp(14px, 3px + 1.912vw, 40px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
}

.top-title-text {
  font-size: clamp(10px, 3px + 1.176vw, 26px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.38;
  text-align: center;
  color: var(--font-blue01);
  word-break: keep-all;
}

/*デフォルトタイトル*/
.title-default {
  color: var(--font-blue01);
  font-size: clamp(16px, 6px + 1.765vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin-block: var(--text-trim);
}

.title-default-en {
  margin-bottom: calc(0.6em + var(--text-trim));
}

.title-default-ja {
  font-size: clamp(12px, 5px + 1.324vw, 30px);
  font-weight: 400;
}

/*ボタン*/
.btn-default {
  width: clamp(165px, 2px + 15.96vw, 308px);
  height: clamp(36px, 1px + 3.46vw, 67px);
  background: var(--gradation-base);
  background: var(--gradation);
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1em;
  font-size: clamp(10px, -1px + 1.116vw, 20px);
  font-weight: 400;
  padding-left: 1em;
  transition: all 0.3s ease-in-out;
}

.btn-default::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #fff;
  display: block;
  justify-self: end;
  transition: all 0.3s ease-in-out;
}

@media (hover: hover) {
  .btn-default:hover {
    opacity: 1;
    padding-left: 1.3em;
  }
  .btn-default:hover::after {
    width: 0%;
  }
}

/*お問い合わせボタン*/
.contact-link {
  background: var(--gradation-base);
  background: var(--gradation);
}

.contact-btn-container {
  display: grid;
  grid-template-columns: 1fr 5px 1fr;
  /*height: 193px;*/
}

.contact-btn-container::before {
  content: "";
  display: block;
  background-color: #fff;
  grid-column: 2/3;
  grid-row: 1/2;
  height: 100%;
}

.contact-btn01 {
  grid-column: 1/2;
  grid-row: 1/2;
  padding-left: var(--side-l);
}
.contact-btn02 {
  grid-column: 3/4;
  grid-row: 1/2;
  padding-right: var(--side-l);
}

.contact-btn {
  display: block;
  height: 100%;
  font-size: clamp(16px, -4px + 2.083vw, 36px);
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.72em;
  padding-block: 1.7em;
}

.contact-btn::before {
  content: "";
  width: 2.4em;
  height: 2.4em;
  display: grid;
  background-repeat: no-repeat;
  background-size: contain;
}

.contact-btn01::before {
  background-image: url(../img/icon-mail.svg);
}

.contact-btn02::before {
  background-image: url(../img/icon-request.svg);
}

@media (max-width: 560px) /* スマホ */ {
  .contact-btn-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 3px auto;
  }

  .contact-btn {
    height: 67px;
  }
  .contact-btn01 {
    grid-column: 1/2;
    grid-row: 1/2;
    padding: auto var(--side-l);
  }
  .contact-btn02 {
    grid-column: 1/2;
    grid-row: 3/4;
    padding: auto var(--side-l);
  }

  .contact-btn-container::before {
    grid-column: 1/2;
    grid-row: 2/3;

    height: 100%;
  }
}

/*下層ページタイトル下テキスト*/
.page-top-text {
  font-size: clamp(12px, 7px + 0.882vw, 24px);
  font-weight: 400;
  color: var(--font-blue01);
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin-block: var(--text-trim);
}

/*改行 表示設定*/
.sp-only-br {
  display: none;
}

.tbsp-only-br {
  display: none;
}

@media (max-width: 960px) /* タブレット */ {
  .pc-only {
    display: none;
  }

  .pc-only-br {
    display: none;
  }

  .tbsp-only-br {
    display: block;
  }
}
@media (max-width: 560px) /* スマホ */ {
  .sp-only-br {
    display: block;
  }
  .pctb-only-br {
    display: none;
  }
}

/*　-------------------------------------ヘッダー------------------------------------- */

.header {
  height: var(--header-height);
  display: grid;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: calc(infinity);
  width: 100%;
  background-color: #fff;
}
.header-nav {
  margin: 0 4%;
  display: grid;
  grid-template-columns: clamp(160px, -23px + 17.857vw, 320px) 1fr auto;
  align-items: end;
  justify-items: center;
  gap: 10px;
}

.header-nav-list {
  width: 100%;
  /*display: flex;*/
}

.header-nav-list-container {
  display: flex;
}

.header-nav-list ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /*font-size: clamp(12px, 5px + 0.67vw, 18px);*/
  font-size: clamp(11px, 4px + 0.729vw, 18px);
  font-weight: 700;
  gap: min(2%, 2em);
  justify-content: flex-start;
  margin-left: 2em;
  width: 100%;
  align-items: flex-end;
}

.header-nav-btn-container {
  display: flex;
  gap: 20px;
  margin-left: auto;
}
.header-nav-btn {
  font-size: clamp(14px, 9px + 0.446vw, 18px);
  font-weight: 700;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  width: clamp(150px, 70px + 7.813vw, 220px);
  height: clamp(40px, 29px + 1.116vw, 50px);
  border-radius: 5px;
}

.header-nav-btn::before {
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  background-size: contain;
}

.header-nav-btn01::before {
  background-image: url(../img/icon-request.svg);
}

.header-nav-btn02::before {
  background-image: url(../img/icon-mail.svg);
}
.header-nav-btn01 {
  background-color: red;
}

.header-nav-btn02 {
  background-color: #2d719a;
}

.menu-btn {
  display: none;
}

@media (max-width: 960px) {
  .header-nav {
    grid-template-columns: clamp(145px, 110px + 6.25vw, 170px) 1fr;
  }

  .menu-btn {
    display: block;
  }
  /*タブレットメニュー内*/
  .header-nav-list {
    position: fixed;
    top: 0;
  }

  /*メニュー開いた時の位置*/
  /*.open .header-nav-list {
    top: var(--header-height);
  }*/

  /*スマホナビ */

  .header-logo {
    z-index: calc(infinity);
  }

  .header-nav-list {
    top: -150vh;
    left: 0;
    transition: top 0.5s;
  }

  .open .header-nav-list {
    top: 0;
  }

  .header-nav-list {
    background-color: var(--right-blue);
    padding-top: var(--header-height);
    flex-direction: column;
    min-height: 100dvh;
  }

  .header-nav-list-container {
    flex-direction: column;
  }

  .header-nav-list::before {
    content: "";
    width: 50vw;
    height: 30vw;
    display: block;
    position: absolute;
    top: 30vh;
    left: 0;
    background-image: url(../img/logo-main.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.06;
  }

  .header-nav-list ul {
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    font-size: clamp(16px, 5.073px + 1.951vw, 20px);
    margin-left: 0;
    gap: 2.5em;
    padding-block: 10%;
  }

  .header-nav-btn-container {
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 2em;
  }

  .header-nav-btn {
    width: clamp(208px, 153px + 15.309vw, 270px);
    font-size: clamp(17px, 13px + 1.235vw, 22px);
    padding-block: 1.2em;
  }

  /*ハンバーガーボタン*/
  .menu-btn {
    all: unset;
    outline: revert;
    cursor: pointer;
    width: 40px;
    height: 40px;
    z-index: calc(infinity);
    display: grid;
    place-items: center;
    margin-left: auto;
  }

  .menu-btn::before,
  .menu-btn::after,
  .menu-btn-bar {
    grid-area: 1/1;
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--font-blue01);
    transition: transform 0.4s;
    border-radius: 100vmax;
  }

  .menu-btn::before {
    transform: translateY(-13px);
  }

  .menu-btn::after {
    transform: translateY(13px);
  }

  .open .menu-btn::before {
    transform: rotate(45deg);
  }

  .open .menu-btn::after {
    transform: rotate(-45deg);
  }

  .open .menu-btn-bar {
    transform: scale(0);
  }

  /*メニューオープン時スクロールさせない　bodyに指定*/
  .body-nav-open {
    height: 100%;
    overflow: hidden;
  }

  /*navだけスクロールできるように*/
  .header-nav-list {
    height: 100%;
    overflow: scroll;
  }
}
@media (max-width: 560px) /* スマホ */ {
}

/*　-----------------------------------fv------------------------------------- */
.fv {
  display: grid;
  grid-template-columns: var(--side-l) 1fr var(--side-l);
  grid-template-rows: clamp(40px, -40px + 8.333vw, 120px) auto;
  margin-bottom: clamp(52px, -54px + 18.971vw, 310px);
  margin-top: var(--header-height);
}

.fv::before {
  content: "";
  background: rgb(24, 83, 113);
  background: linear-gradient(
    95deg,
    rgba(24, 83, 113, 1) 0%,
    rgba(49, 117, 159, 1) 100%
  );
  grid-column: 1/3;
  grid-row: 2/4;
}

.fv-title-container {
  grid-column: 2/3;
  grid-row: 2/3;
  align-self: end;
  justify-self: end;
  z-index: 1;
  text-align: right;
  /*margin-right: 32px;*/
  margin-bottom: 10%;
}

.fv-title {
  font-size: clamp(16px, 6px + 1.765vw, 40px);
  font-weight: 700;
  color: #fff;
  line-height: 1.55;
  margin-bottom: calc(1.5em + var(--text-trim));
}

.fv-contact-btn {
  background-color: #fff;
  font-size: clamp(9px, 4px + 0.882vw, 21px);
  font-weight: 700;
  padding: 1.14em;
  line-height: 1;
  color: var(--font-blue02);
  display: flex;
  gap: 0.6em;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.fv-contact-btn::before {
  content: "";
  display: block;
  width: 1.14em;
  height: 0.77em;
  background-image: url(../img/icon-fvmail.svg);
  background-size: contain;
}

.fv-img {
  grid-column: 2/-1;
  grid-row: 1/3;
  position: relative;
  background-position: center;

  min-height: 540px;
  height: 100vh;
  max-height: clamp(540px, 91px + 43.862vw, 933px);
}

.fv-img img {
  width: 100%;
  height: 100%;
}

.fv-img::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgb(86 190 253 / 0.5);
}

.fv-scroll {
  grid-column: 1/2;
  grid-row: 2/3;
  align-self: end;
  justify-self: center;
  writing-mode: vertical-rl;
  font-size: clamp(8px, 3px + 0.882vw, 20px);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.3em;
  display: flex;
  align-items: center;
  gap: 1em;
  position: relative;
}

.fv-scroll::before {
  content: "";
  display: block;
  width: 1px;
  height: 0px;
  background-color: #fff;
  animation: scroll-anime 2s ease infinite;
  position: absolute;
}

@keyframes scroll-anime {
  0% {
    bottom: 10em;
    opacity: 0;
    height: 4em;
  }
  30% {
    opacity: 1;
  }

  100% {
    bottom: 5em;
    opacity: 0;
    height: 0px;
  }
}

.fv-back-logo {
  grid-column: 1/3;
  grid-row: 3/4;
  opacity: 0.15;
  width: 58%;
  margin-top: 130px;
}

.fv-text-container {
  grid-column: 2/3;
  grid-row: 3/-1;
  align-self: center;
  justify-self: center;
  color: #fff;
  text-align: center;
  z-index: 1;
  margin: clamp(60px, -53px + 20.147vw, 334px) 0
    clamp(84px, 16px + 12.206vw, 250px);
}

.fv-text-subtitle {
  font-size: clamp(16px, -8px + 2.5vw, 40px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
  gap: 2.78em;
  margin-bottom: 2.78em;
  display: grid;
  justify-items: center;
  grid-template-rows: auto 4.45em;
}

.fv-text-subtitle::after {
  content: "";
  display: block;
  width: 1px;
  height: 0;
  background-color: #fff;
  transition: height 0.5s;
}

.inview.fv-text-subtitle::after {
  height: 100%;
}

.fv-text-title {
  font-size: clamp(16px, -2px + 3.235vw, 60px);
  font-weight: 700;
  line-height: 1.5em;
  margin-bottom: calc(3.8em + var(--text-trim));
}

.fv-text-content {
  font-size: clamp(10px, 6px + 0.735vw, 20px);
  font-weight: 400;
  line-height: 2;
  margin: 0 auto;
  word-break: keep-all;
}

@media (max-width: 960px) {
  .fv-img {
    height: 560px;
  }
  .fv-scroll {
    margin-bottom: 2em;
  }
}

@media (max-width: 560px) {
  .fv-contact-btn {
    display: none;
  }
  .fv-text-container {
    margin-inline: var(--side-l);
  }
}

/*　------------------------------------page  fv---------------------------------- */

.page-fv {
  grid-template-rows: clamp(40px, -40px + 8.333vw, 120px) auto clamp(
      30px,
      1px + 5.147vw,
      100px
    );
  margin-bottom: clamp(87px, 20px + 11.912vw, 249px);
}

.page-fv-title {
  grid-column: 2/4;
  grid-row: 2/3;
  z-index: 2;
  justify-self: center;
  align-self: center;
  color: #fff;
  text-align: center;
}

.page-fv-title-ja {
  font-size: clamp(20px, 4px + 2.941vw, 60px);
  font-weight: 700;
}

.page-fv-title-en {
  font-size: clamp(16px, 6px + 1.765vw, 40px);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.page-fv-img {
  min-height: 560px;
  height: 80vh;
  max-height: clamp(560px, 320px + 25vw, 800px);
}

.page-fv-pankuzu {
  grid-column: 2/3;
  grid-row: 5/6;
  font-size: 16px;
  font-weight: 400;
  color: var(--font-blue02);
  margin-top: calc(3em + var(--text-trim));
}

@media (max-width: 960px) /* タブレット */ {
  .page-fv-pankuzu {
    display: none;
  }
}
@media (max-width: 560px) /* スマホ */ {
}

/*　-------------------------------------フッター------------------------------------- */
.footer {
  margin-inline: 4%;
  margin-top: clamp(59px, 22px + 3.571vw, 91px);
  margin-bottom: 74px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10%;
}

.footer-logo {
  width: clamp(171px, 1px + 16.629vw, 320px);
  height: auto;
  margin-bottom: clamp(29px, 36px + -0.67vw, 23px);
}

.footer-address {
  font-size: clamp(7px, -6px + 1.228vw, 18px);
  font-weight: 700;
  font-style: normal;
  color: var(--font-blue01);
  line-height: 1.7;
}

.footer-address-text {
  margin-top: var(--text-trim);
  margin-bottom: calc(1.38em + var(--text-trim));
}

.footer-address-mail {
  margin-top: var(--text-trim);
}

.footer-nav-list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  font-size: clamp(14px, 9px + 0.446vw, 18px);
  line-height: 1.7;
  font-weight: 700;
}

.footer-nev-list-sub {
  list-style: none;
  color: #666;
  display: grid;
  gap: calc(1.83em + var(--text-trim));
  margin-top: calc(1.5em + var(--text-trim));
}

.footer-nev-list-sub li {
  margin-block: var(--text-trim);
}

@media (max-width: 960px) /* タブレット */ {
  .footer {
    margin-top: 77px;
  }

  .footer-nav {
    justify-self: end;
  }

  .footer-logo {
    width: 236px;
    margin-bottom: 19px;
  }

  .footer-address {
    font-size: 12px;
  }

  .footer-nav-list {
    font-size: 14px;
    flex-direction: column;
    gap: 2em;
  }

  .footer-nav-list-flex {
    display: flex;
    gap: 2em;
  }

  .footer-nev-list-sub {
    margin-top: 0.4em;
  }
}
@media (max-width: 560px) /* スマホ */ {
  .footer {
    margin-top: 35px;
    grid-template-columns: 1fr;
  }
  .footer-nav {
    justify-self: start;
    margin-right: 1em;
  }
}

/*　-------------------------------------トップページ------------------------------------- */

/*事業案内*/
.top-title_top-service {
  margin-bottom: clamp(35px, 8px + 4.779vw, 100px);
}

.top-title-text_top-service {
  margin-bottom: calc(clamp(88px, 16px + 7.5vw, 160px) + var(--text-trim));
}

.top-service-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(15px, -50px + 6.771vw, 80px);
  margin-bottom: clamp(123px, 39px + 15vw, 327px);
}

.top-service-box {
  display: grid;
  grid-template-columns: 4vw 1fr 3px;
  grid-template-rows: 4vw auto 3px;
}

.top-service-box::before {
  content: "";
  background: var(--gradation-base);
  background: var(--gradation);
  grid-column: 1/-1;
  grid-row: 1/-1;
}

.top-service-box-content {
  grid-column: 2/3;
  grid-row: 2 / 3;
  display: grid;
  grid-template-rows: clamp(50px, 16px + 6.029vw, 132px) auto auto;
  background-color: #fff;
  color: var(--font-blue01);
  padding: clamp(18px, 1px + 1.771vw, 35px);
  padding-top: clamp(20px, -10px + 3.125vw, 50px);
}

.top-service-box-content hgroup {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.top-service-box-title {
  font-size: clamp(17px, -10px + 2.813vw, 44px);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-service-box-title.top-service-box-title03 {
  font-size: clamp(14px, -2px + 1.667vw, 30px);
}

.top-service-box-title::after {
  content: "";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}

.top-service-box-title01::after {
  background-image: url(../img/icon-service01.png);
  width: 1.79em;
  height: 1em;
}
.top-service-box-title02::after {
  background-image: url(../img/icon-service02.png);
  width: 1.18em;
  height: 1.18em;
}
.top-service-box-title03::after {
  background-image: url(../img/icon-service03.png);
  width: 1.7em;
  height: 1.7em;
}

.top-sesrvice-box-en {
  font-size: clamp(8px, -4px + 1.25vw, 20px);
  line-height: 1;
  margin-top: 0.5em;
}

.top-service-box-text {
  font-size: clamp(10px, 0px + 1.042vw, 20px);
  font-weight: 400;
  line-height: 1.87em;
  text-align: justify;
  margin-top: 1em;
  margin-bottom: 3em;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.top-service-box-price {
  font-size: clamp(10px, 0px + 1.042vw, 20px);
  font-weight: 400;
  line-height: 1.87em;
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

.top-service-box-price-title {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 0.5em;
}

.top-service-box-price-title::after {
  content: "";
  display: block;
  width: 10em;
  height: 2px;
  border-top: dashed 1px;
}

.top-service-box-arrow {
  width: clamp(21px, -8px + 3.021vw, 50px);
  height: clamp(21px, -8px + 3.021vw, 50px);
  background-color: var(--font-blue01);
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  align-self: end;
  justify-self: end;
  background-image: url(../img/icon-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}
@media (hover: hover) {
  .top-service-box:hover {
    opacity: 1;
  }

  .top-service-box-arrow {
    transition: margin-right 0.5s;
  }

  .top-service-box:hover .top-service-box-arrow {
    margin-right: -10px;
  }
}

@media (max-width: 960px) {
  .top-title-text_top-service {
    margin-bottom: calc(clamp(31px, -3px + 9.5vw, 88px) + var(--text-trim));
  }

  .top-service-box {
    grid-template-columns: 4vw 1fr 2px;
    grid-template-rows: 4vw auto 2px;
  }
  .top-service-box-price-title::after {
    width: 7em;
  }
}

@media (max-width: 750px) /* 縦並び */ {
  .top-service-container {
    grid-template-columns: 1fr;
  }

  .top-service-box {
    grid-template-columns: 6vw 1fr 2px;
    grid-template-rows: 6vw auto 2px;
  }

  .top-service-box-title {
    justify-content: flex-start;
    gap: 2em;
  }

  .top-service-box-title.top-service-box-title03 {
    font-size: 17px;
  }

  .top-service-box-text {
    margin-top: 2em;
    margin-bottom: 1em;
  }
  .top-service-box-arrow {
    margin-right: 10px;
  }
}

/*-------当社の特徴-------*/
.top-features {
  background-color: var(--right-blue);
  padding: clamp(138px, -27px + 17.188vw, 303px) 0
    clamp(98px, 23px + 13.382vw, 280px);
  position: relative;
}

.top-features::before {
  --line-height: clamp(119px, -17px + 24.338vw, 450px);
  content: "";
  width: clamp(1px, -14px + 1.563vw, 2px);
  height: 0px;
  display: block;
  background-color: var(--font-blue02);
  position: absolute;
  top: calc(var(--line-height) / -2);
  left: calc(var(--side-l) + 6%);
  transition: height 1s;
}

/*画面に入ったら*/
.inview.top-features::before {
  height: var(--line-height);
}

.top-features-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6%;
}

.top-features-logo {
  margin-bottom: clamp(46px, 1px + 4.353vw, 85px);
  width: clamp(111px, -21px + 23.529vw, 431px);
}

.title-default_top-features {
  margin-bottom: 1.75em;
}

.top-features-text {
  font-size: clamp(8px, -6px + 1.339vw, 20px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: justify;
  color: var(--font-blue01);
  margin-bottom: calc(5.3em + var(--text-trim));
}

.top-features-right {
  display: grid;
  gap: 70px;
}

.top-features-box {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background-color: #fff;
  border-left: solid clamp(13px, -1px + 1.339vw, 25px) var(--font-blue02);
  padding-block: clamp(26px, 20px + 1.103vw, 41px);
  padding-left: clamp(13px, -3px + 2.971vw, 54px);
  border-radius: 0 40px 0 0;
  color: var(--font-blue02);
}

.top-features-box-content {
  margin-right: clamp(0px, -31px + 3.013vw, 27px);
}

.top-features-box-title {
  font-size: clamp(21px, -5px + 2.567vw, 44px);
  font-weight: 700;
  margin-top: var(--text-trim);
  margin-bottom: calc(0.29em + var(--text-trim));
}

.top-features-box-title-en {
  font-size: clamp(8px, -6px + 1.339vw, 20px);
  font-weight: 400;
  margin-top: var(--text-trim);
  margin-bottom: calc(1.6em + var(--text-trim));
}

.top-features-box-text {
  font-size: clamp(10px, 8px + 0.441vw, 16px);
  font-weight: 400;
  line-height: 1.8em;
  margin-block: var(--text-trim);
}

.top-features-box-no {
  background-color: var(--point-blue);
  height: clamp(52px, 8px + 7.941vw, 160px);
  width: clamp(52px, 8px + 7.941vw, 160px);
  display: grid;
  place-items: center;
  border-radius: clamp(5px, -1px + 1.103vw, 20px) 0 0
    clamp(5px, -1px + 1.103vw, 20px);
  position: relative;
  right: calc(clamp(17px, 10px + 0.67vw, 23px) * -1);
}
.top-features-box-no img {
  width: clamp(42px, 21px + 3.824vw, 94px);
  height: auto;
}

.top-features-box-no::before,
.top-features-box-no::after {
  content: "";
  display: block;
  width: clamp(17px, 10px + 0.67vw, 23px);
  height: clamp(5px, -1px + 0.558vw, 10px);
  background-color: var(--font-blue02);
  position: absolute;
  right: 0;
}

.top-features-box-no::before {
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
  top: calc(clamp(5px, -1px + 0.558vw, 10px) * -1);
}

.top-features-box-no::after {
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  bottom: calc(clamp(5px, -1px + 0.558vw, 10px) * -1);
}

.btn-default_top-features-tb {
  display: none;
}

@media (max-width: 960px) /* タブレット */ {
  .top-features {
    padding-top: clamp(117px, 91px + 7.167vw, 160px);
  }

  .btn-default_top-features {
    display: none;
  }

  .btn-default_top-features-tb {
    display: grid;
    margin: 0 auto;
  }

  .top-features-container {
    display: block;
  }
  .top-features-left {
    margin-bottom: clamp(27px, 2.4px + 6.833vw, 68px);
  }

  .top-features-right {
    margin-bottom: clamp(27px, 2.4px + 6.833vw, 68px);
    gap: 20px;
  }

  .top-features-text {
    font-size: 12px;
    margin-bottom: 0;
  }

  .top-features-box {
    width: 95%;
  }

  .top-features-box-title-en {
    font-size: 10px;
  }
}

/*----依頼の流れ----*/
.top-flow {
  background-color: var(--right-blue);
  margin-bottom: clamp(61px, -33px + 16.838vw, 290px);
}

.top-title_top-flow {
  margin-bottom: clamp(42px, 19px + 4.044vw, 97px);
}

.top-title-text_top-flow {
  margin-bottom: clamp(23px, -19px + 7.5vw, 125px);
}

.top-flow-content {
  display: grid;
  gap: clamp(5px, -10px + 2.721vw, 42px);
  max-width: 1350px;
  margin: 0 auto;
  color: var(--font-blue02);
  margin-bottom: clamp(25px, 11px + 4.076vw, 89px);
}

.top-flow-box {
  display: grid;
  grid-template-columns: clamp(45px, -31px + 13.603vw, 230px) 1fr;
  background-color: #fff;
  border: solid clamp(2px, -1px + 0.313vw, 5px) var(--font-blue01);
}

.top-flow-box-icon {
  justify-self: center;
  align-self: center;
  width: clamp(37px, -1px + 6.838vw, 130px);
}

.top-flow-box-content {
  border-left: solid clamp(2px, -1px + 0.313vw, 5px) var(--font-blue01);
  padding: clamp(14px, 8px + 1.029vw, 28px) clamp(11px, -10px + 3.824vw, 63px);
}

.top-flow-box-title {
  font-size: clamp(12px, 5px + 1.324vw, 30px);
  font-weight: 700;
  color: var(--red);
  margin-top: var(--text-trim);
  margin-bottom: calc(1em + var(--text-trim));
}

.top-flow-box-text {
  font-size: clamp(10px, 4px + 1.029vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  margin-block: var(--text-trim);
}

.top-flow-link {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 7%;
}

.top-flow-link-left {
  align-self: center;
}

.top-flow-link-text {
  font-size: clamp(14px, 5px + 1.618vw, 36px);
  font-weight: 700;
  color: var(--font-blue01);
  margin-bottom: calc(2.4em + var(--text-trim));
  /*margin-right: 2.3em;*/
}

.top-flow-link-text span {
  font-size: clamp(22px, 2px + 3.529vw, 70px);
  line-height: 1;
  margin-right: 10px;
}

.top-flow-link-img {
  width: clamp(101px, 46px + 15.732vw, 348px);
}

@media (max-width: 960px) /* タブレット */ {
  .top-flow-link {
    margin-bottom: 33px;
  }
}

/*-----代表プロフィール-----*/
.top-ceo {
  padding-bottom: clamp(109px, 77px + 5.735vw, 187px);
  position: relative;
}

.top-title_top-ceo {
  margin-bottom: clamp(75px, 8px + 6.585vw, 134px);
}

.top-ceo-content {
  display: grid;
  /*grid-template-columns: auto 1fr;*/
  grid-template-columns: 1fr auto;
  gap: 7%;
  max-width: 1550px;
  margin: 0 auto;
}

.top-ceo-img {
  --side: clamp(22px, -6px + 2.917vw, 50px);
  display: grid;
  grid-template-columns: var(--side) var(--side) 1fr var(--side) var(--side);
  grid-template-rows: var(--side) var(--side) 1fr var(--side) var(--side);
  height: clamp(261px, -111px + 38.75vw, 633px);
  aspect-ratio: 3/4;
}

.top-ceo-img::before,
.top-ceo-img::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;

  background: var(--gradation-base);
  background: var(--gradation);
}

.top-ceo-img::before {
  grid-column: 3/6;
  grid-row: 1/4;
  transform: rotate(180deg);
}

.top-ceo-img::after {
  grid-column: 1/4;
  grid-row: 3/6;
}

.top-ceo-img img {
  grid-column: 2/5;
  grid-row: 2/5;
  /*width: 100%;*/
  height: 100%;
  /*aspect-ratio: 39/53;*/
  z-index: 1;
}

.top-ceo-img-cover {
  content: "";
  grid-column: 2/5;
  grid-row: 2/5;
  background-color: rgb(86 190 253 /0.3);
  z-index: 2;
}

.top-ceo-text-container {
  color: var(--font-blue02);
}

.top-ceo-text-title {
  font-size: clamp(16px, -11px + 2.679vw, 40px);
  font-weight: 700;
  line-height: 1.75;
  margin-bottom: calc(2.15em + var(--text-trim));
  word-break: keep-all;
}

.top-ceo-text {
  font-size: clamp(10px, -1px + 1.116vw, 20px);
  font-weight: 400;
  line-height: 2;
  margin-top: var(--text-trim);
  margin-bottom: calc(5.3em + var(--text-trim));
}

.top-ceo-name {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.top-ceo-name img {
  object-fit: contain;
}

.top-ceo-name01 {
  width: clamp(144px, 45px + 9.71vw, 231px);
}

.top-ceo-name02 {
  width: clamp(109px, 0.429px + 10.603vw, 204px);
}

@media (max-width: 960px) /* タブレット */ {
  .top-title_top-ceo {
    margin-bottom: clamp(31px, -30px + 16.912vw, 100px);
  }
}
@media (max-width: 560px) /* スマホ */ {
  .top-ceo-content {
    display: block;
  }
  .top-ceo-img {
    margin: 0 auto;
    width: 60%;
    height: auto;
    margin-bottom: 39px;
  }

  .top-ceo-name {
    gap: 3px;
    flex-direction: column;
    align-items: flex-end;
  }
}

/*-----よくある質問---*/
.top-faq {
  background-color: var(--right-blue);
  padding: clamp(79px, 21px + 10.441vw, 221px) 0
    clamp(46px, 7px + 6.985vw, 141px);
  color: var(--font-blue01);
  margin-bottom: clamp(87px, 40px + 8.309vw, 200px);
}

.top-faq-conteiner {
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  gap: 10%;
}

.top-faq-logo {
  margin-bottom: clamp(41px, -2px + 4.241vw, 79px);
  width: clamp(111px, 16px + 16.912vw, 341px);
}

.top-faq-title {
  font-size: clamp(16px, 7px + 1.739vw, 40px);
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-top: var(--text-trim);
  margin-bottom: calc(1.2em + var(--text-trim));
}

.top-faq-subtitle {
  font-size: clamp(12px, 5px + 1.304vw, 30px);
}

.top-faq-content {
  margin-right: 10%;
}

.top-faq-box {
  font-size: clamp(10px, -6px + 1.563vw, 24px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin-bottom: 2.41em;
  padding-bottom: 2.41em;
  border-bottom: solid 1px #c6c6c6;
}

.top-faq-box:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.top-faq-box span {
  font-size: clamp(19px, -10px + 2.79vw, 44px);
  margin-right: 0.5em;
  transform: translateY(-0.4em);
}

.top-faq-q {
  margin-top: var(--text-trim);
  margin-bottom: calc(1.54em + var(--text-trim));
  display: flex;
}
.top-faq-a {
  margin-block: var(--text-trim);
  display: flex;
}

.btn-default_top-faq-tb {
  display: none;
}

@media (max-width: 960px) /* タブレット */ {
  .btn-default_top-faq {
    display: none;
  }
  .btn-default_top-faq-tb {
    display: grid;
    margin: 0 auto;
  }

  .top-faq-conteiner {
    display: block;
  }

  .top-faq-left {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: clamp(49px, -36px + 15.25vw, 110px);
  }

  .top-faq-subtitle {
    display: block;
  }
  .top-faq-logo {
    margin-bottom: 0;
  }

  .top-faq-title {
    margin-bottom: 0;
  }

  .top-faq-content {
    margin-bottom: clamp(58px, 48px + 1.75vw, 65px);
    margin-right: 0;
  }

  .top-faq-box {
    font-size: clamp(10px, 7px + 0.5vw, 12px);
  }
  .top-faq-box span {
    font-size: clamp(16px, 10px + 1vw, 20px);
  }
}
@media (max-width: 560px) /* スマホ */ {
  .top-faq-q {
    margin-bottom: 0;
  }
}

/*伸びるライン*/

.js-line2 {
  position: relative;
}

.js-line2::before {
  --line-height: clamp(150px, 17px + 23.676vw, 472px);
  content: "";
  width: clamp(1px, -14px + 1.563vw, 2px);
  height: 0px;
  display: block;
  background-color: var(--font-blue02);
  position: absolute;
  top: calc(var(--line-height) / -2);
  left: calc(var(--side-l) + 6%);
  transition: height 1s;
}

/*画面に入ったら*/
.inview.js-line2::before {
  height: var(--line-height);
}

/*--- 新着情報 ----*/
.top-news {
  margin-bottom: clamp(67px, 15px + 9.338vw, 194px);
}

.top-news-container {
  display: grid;
  grid-template-columns: 1fr 3.6fr;
  gap: 80px;
  align-items: end;
  max-width: 1514px;
  margin: 0 auto;
}

.title-default_top-news {
  margin-bottom: 43px;
  font-size: clamp(26px, -8px + 3.542vw, 60px);
}

.title-default_top-news .title-default-ja {
  font-size: clamp(14px, -2px + 1.667vw, 30px);
}

.top-news-content {
  color: var(--font-blue02);
}

.top-news-box {
  border-bottom: solid 2px #c6c6c6;
}

.top-news-link {
  font-size: clamp(10px, -6px + 1.563vw, 24px);
  display: flex;
  align-items: center;
  gap: 2em;
  margin-block: calc(1.7em + var(--text-trim));
}

.top-news-link::after {
  content: "";
  width: 0.7em;
  height: 0.7em;
  display: block;
  background-image: url(../img/icon-news-arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  margin-right: 1em;
}

.btn-default_tpp-news-sp {
  display: none;
}

@media (max-width: 560px) /* スマホ */ {
  .btn-default_tpp-news {
    display: none;
  }

  .btn-default_tpp-news-sp {
    display: grid;
    margin-left: auto;
  }

  .top-news-container {
    display: block;
  }

  .top-news-content {
    margin-bottom: 49px;
  }

  .top-news-box:last-child {
    border-bottom: none;
  }
}

/*　-------------------------------------下層ページ------------------------------------- */
/*　-------------------------------------下層ページ--　当社の特徴----------------------------------- */
.featues {
  margin-bottom: clamp(95px, 6px + 15.809vw, 310px);
}

.title-default_features {
  margin-bottom: 2.25em;
}

.page-top-text_features {
  margin-bottom: clamp(160px, 11px + 15.521vw, 309px);
}

.fratures-content {
  display: grid;
  gap: clamp(84px, 24px + 10.735vw, 230px);
  margin-bottom: clamp(80px, 20px + 10.662vw, 225px);
}

/*特徴ボックス*/
.fratures-box {
  display: grid;
  margin-left: var(--side-m);
  grid-template-columns: 4% 19% 1fr 4% 7% auto calc(var(--side-l) - 3%);
  grid-template-rows: auto auto auto 45px 57px;
  position: relative;
}

.fratures-box::after {
  content: "";
  width: 2px;
  height: clamp(110px, 20px + 9.375vw, 200px);
  display: block;
  background-color: var(--font-blue01);
  position: absolute;
  top: calc(clamp(110px, 20px + 9.375vw, 200px) * -1);
  left: 2%;
}

.fratures-box::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  grid-column: 3/8;
  grid-row: 3/6;
  background: var(--gradation-base);
  background: var(--gradation);
}

.fratures-box-textimg {
  grid-column: 2/3;
  grid-row: 1/2;
  align-self: end;
  margin-bottom: 9px;
  width: clamp(45px, -25px + 12.5vw, 215px);
}

.fratures-box-no {
  grid-column: 2/3;
  grid-row: 2/3;
  z-index: 1;
  margin-top: 15%;
  margin-bottom: 28%;
  width: clamp(52px, -29px + 14.412vw, 248px);
}

.fratures-box-text {
  grid-column: 2/4;
  grid-row: 3/4;
  z-index: 1;
  color: var(--font-blue01);
}

.fratures-box-text-title {
  font-size: clamp(16px, 4px + 2.059vw, 44px);
  font-weight: 700;
  margin-top: var(--text-trim);
  margin-bottom: 1em;
}

.fratures-box-text-text {
  font-size: clamp(12px, 9px + 0.588vw, 20px);
  font-weight: 400;
  line-height: 1.8em;
  margin-bottom: 2em;
}

.fratures-box-img {
  grid-column: 5/7;
  grid-row: 1/4;
  z-index: 1;
  align-self: start;
  width: clamp(210px, 35px + 31.25vw, 635px);
}
.fratures-box-img img {
  width: 100%;
  aspect-ratio: 65 / 82;
}

.fratures-box-text-base {
  background-color: var(--right-blue);
  grid-column: 1/6;
  grid-row: 2/5;
}

/*2つ目　逆*/

.reverse.fratures-box {
  margin-right: var(--side-m);
  margin-left: 0;
  grid-template-columns: calc(var(--side-l) - 3%) auto 7% 4% 1fr 19% 4%;
}

.reverse.fratures-box::after {
  right: 2%;
  left: auto;
}

.reverse.fratures-box::before {
  grid-column: 1/6;
  transform: rotate(180deg);
  z-index: -1;
}

.reverse .fratures-box-textimg {
  grid-column: 5/6;
}

.reverse .fratures-box-no {
  grid-column: 5/6;
}

.reverse .fratures-box-text {
  grid-column: 5/7;
}

.reverse .fratures-box-img {
  grid-column: 2/4;
}

.reverse .fratures-box-text-base {
  grid-column: 3/8;
}

.fratures-service-btn {
  font-size: clamp(12px, 6px + 1.029vw, 26px);
  font-weight: 700;
  color: var(--font-blue01);
  display: block;
  background-color: var(--right-blue);
  text-align: center;
  max-width: clamp(240px, 9px + 41.176vw, 800px);
  padding: 1.2em;
  margin: var(--text-trim) auto;
  border-radius: 100vmax;
}

@media (max-width: 960px) /* タブレット */ {
  .fratures-box {
    margin-left: 0;
    grid-template-columns: var(--side-l) 1fr 50% var(--side-l) var(--side-l);
    grid-template-rows: 1fr 1fr;
  }
  .fratures-box-img {
    grid-column: 3 / 4;
    grid-row: 1 / 3;

    width: 100%;
    justify-self: end;
  }

  .fratures-box-img img {
    aspect-ratio: 41 / 22;
  }

  .fratures-box-text-base {
    grid-column: 1 / 5;
    grid-row: 2 / 4;
  }

  .fratures-box::before {
    grid-column: 2 / 6;
    grid-row: 3 / 6;
    padding-bottom: calc(var(--side-l) * 2);
  }

  .fratures-box-text-title {
    margin-top: 1.5em;
  }
  .fratures-box-text-text {
    margin-bottom: 3em;
  }
  .fratures-box-textimg {
    margin-left: 30%;

    margin-bottom: 5px;
  }
  .fratures-box-no {
    margin-left: 30%;
    margin-bottom: 0;
    margin-top: 15px;
  }

  .fratures-box::after {
    position: static;
    grid-column: 2 / 3;
    grid-row: 1 / 3;

    margin-left: 20%;
    height: 100%;
  }

  /*2つ目　逆*/

  .reverse.fratures-box {
    margin-right: 0;
    grid-template-columns: var(--side-l) var(--side-l) 50% 1fr var(--side-l);
  }

  .reverse.fratures-box::after {
    position: static;
    grid-column: 4 / 5;
    grid-row: 1 / 3;
  }
  .reverse .fratures-box-text-base {
    grid-column: 2 / 7;
  }

  .reverse.fratures-box::before {
    grid-column: 1/5;
  }

  .reverse .fratures-box-textimg {
    grid-column: 4/5;
  }

  .reverse .fratures-box-no {
    grid-column: 4/5;
  }

  .reverse .fratures-box-text {
    grid-column: 3/5;
  }

  .reverse .fratures-box-img {
    grid-column: 3 / 4;
    justify-self: start;
  }
}

/*　-------------------------------------下層ページ--　当社のサービス---------------------------------- */
.service {
  margin-bottom: clamp(100px, 50px + 13.974vw, 318px);
}

.service-title-container {
  margin-bottom: clamp(75px, -5px + 14.338vw, 270px);
}

.title-default_service {
  text-align: center;
}
.title-default_service {
  margin-bottom: calc(2.7em + var(--text-trim));
}

.service-content {
  margin-bottom: clamp(100px, 29px + 19.679vw, 407px);
}

/*サービスボックス*/
.service-box-container {
  background-color: var(--right-blue);
  padding: clamp(81px, 60px + 5.897vw, 173px) 0;
}

.service-box {
  display: grid;
  grid-template-columns: auto 1fr 28%;
  color: var(--font-blue01);
}

.servicee-box-title-container {
  position: relative;
  /*margin-right: 25px;*/
  display: grid;
  align-self: start;
}

.service-box-title {
  font-size: clamp(50px, 40px + 1.042vw, 60px);
  font-weight: 700;
  writing-mode: vertical-rl;
  letter-spacing: 0.13em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1em 0.3em;
  grid-column: 1/2;
  grid-row: 1/2;
}

.service-box-title::after {
  content: "";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 0.5em;
}

.service-box-title01::after {
  background-image: url(../img/icon-service01.png);
  width: 1.25em;
  height: 0.7em;
}

.service-box-title02::after {
  background-image: url(../img/icon-service02.png);
  width: 1em;
  height: 1em;
}

.service-box-title03::after {
  background-image: url(../img/icon-service03.png);
  width: 0.85em;
  height: 0.85em;
  /*position: absolute;
  top: 5.5em;
  left: 0.5em;*/
}

.service-box-line01,
.service-box-line02 {
  width: clamp(33px, 3px + 5.294vw, 105px);
  height: clamp(44px, 4px + 7.059vw, 140px);
  background-size: contain;
  grid-column: 1/2;
  grid-row: 1/2;
}

.service-box-line01 {
  background-image: url(../img/service-line01.svg);
  justify-self: end;
  margin-right: -15%;
}

.service-box-line02 {
  background-image: url(../img/service-line02.svg);
  align-self: end;
  margin-left: -15%;
}

.setvice-box-content {
  /*display: grid;
  gap: 30px;*/
  margin-left: 10%;
  margin-right: 6.7%;
}
.setvice-box-content-title {
  font-size: clamp(14px, 12px + 0.441vw, 20px);
  font-weight: 700;
  background-color: #fff;
  border-left: solid 12px;
  padding: calc(10px + var(--text-trim)) 1em;
  margin-bottom: 30px;
}

.setvice-box-content-text {
  font-size: clamp(12px, 10px + 0.441vw, 18px);
  font-weight: 400;
  line-height: 1.6em;
  margin-bottom: 2em;
}

.setvice-box-content-text_last {
  margin-bottom: 0;
}

.setvice-box-content-text-list {
  padding-left: 1em;
}

.service-box-img img {
  height: 100%;
}

/*2つめ*/
.reverse.service-box-container {
  background-color: #fff;
}

.reverse .service-box {
  grid-template-columns: 28% 1fr auto;
}

.reverse .servicee-box-title-container {
  grid-column: 3/4;
  grid-row: 1/2;
}

.reverse .setvice-box-content {
  grid-column: 2/3;
  grid-row: 1/2;
}

.reverse .service-box-img {
  grid-column: 1/2;
  grid-row: 1/2;
}

.reverse .setvice-box-content-title {
  background-color: var(--right-blue);
}
@media (max-width: 960px) /* タブレット */ {
  .service-box {
    grid-template-columns: auto 70%;
    gap: clamp(33px, 20px + 3.526vw, 88px) 0;
  }

  .service-box-title {
    font-size: clamp(18px, -36px + 9.615vw, 38px);
  }

  .service-box-title03 {
    font-size: clamp(14px, 2px + 3.333vw, 34px);
  }
  .servicee-box-title-container {
    justify-self: center;
  }
  .service-box-img {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .service-box-img img {
    width: 100%;
    aspect-ratio: 48/34;
  }
  .setvice-box-content {
    grid-column: 1/3;
    grid-row: 2/3;
    margin-inline: 0;
  }
  /*２つめ*/
  .reverse .service-box {
    grid-template-columns: 70% auto;
  }
  .reverse .service-box-img {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .reverse .servicee-box-title-container {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .reverse .setvice-box-content {
    grid-column: 1/3;
    grid-row: 2/3;
  }
}
@media (max-width: 560px) /* スマホ */ {
}

/*　-------------------------------------下層ページ--依頼の流れ　-------------------------------- */
.flow {
  margin-bottom: clamp(71px, 36px + 9.615vw, 221px);
}

.page-top-text_flow {
  text-align: center;
  margin-bottom: clamp(75px, 46px + 7.949vw, 199px);
}

.flow-content {
  display: grid;
  gap: clamp(28px, 21px + 1.987vw, 59px);
}

.flow-box {
  border: solid 1px #707070;
  padding: clamp(20px, 11px + 1.544vw, 41px) clamp(25px, 9px + 2.794vw, 63px);
  display: grid;
  grid-template-columns: 1fr 30%;
}

.flow-box::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--font-blue02);
  grid-column: 1/-1;
  grid-row: 2/3;
  margin-bottom: clamp(17px, -2px + 3.382vw, 63px);
}

.flow-title-container {
  grid-column: 1/-1;
  grid-row: 1/2;
  display: flex;
  align-items: center;
  color: var(--font-blue02);
  margin-bottom: clamp(10px, 2px + 1.471vw, 30px);
}

.flow-box-title {
  font-size: clamp(16px, 10px + 1.029vw, 30px);
  font-weight: 700;
  border-left: solid 1px;
  margin-left: 1em;
  padding-left: 1em;
  padding-block: 0.5em;
}

.flow-box-title-no {
  font-size: clamp(20px, 5px + 2.647vw, 56px);
  margin-block: var(--text-trim);
}

.flow-title-first {
  font-size: clamp(10px, 8px + 0.441vw, 16px);
  font-weight: 400;
  color: #fff;
  background-color: #ff7f7f;
  padding: 0 1em;
  border-radius: 100vmax;
  margin-left: 3.75em;
}

.flow-title-note {
  font-size: clamp(10px, 6px + 0.735vw, 20px);
  font-weight: 400;
  margin-left: 2em;
}

.flow-box-content {
  grid-column: 1/2;
  grid-row: 3/4;
}

.flow-box-img {
  grid-column: 2/3;
  grid-row: 3/4;
}

.flow-box-content {
  font-size: clamp(14px, 10px + 0.735vw, 24px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--font-blue01);
  margin-right: 4.4em;
}

.flow-box-content-text span {
  color: var(--red);
}

.flow-box-content-btn {
  font-size: clamp(12px, 9px + 0.588vw, 20px);
  width: 100%;
  display: block;
  color: #fff;
  background-color: var(--font-blue02);
  border-radius: 100vmax;
  text-align: center;
  padding-block: calc(1.6em + var(--text-trim));
  margin-top: 3em;
}

.flow-content-tri {
  width: clamp(30px, 26px + 1.09vw, 47px);
  height: clamp(20px, 15px + 1.282vw, 40px);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  background-color: var(--font-blue02);
  margin: 0 auto;
}
/*flow下*/
.flow-bottom {
  background-color: #cfd9e2;
  padding-top: 81px;
}
.flow-bottom-container {
  display: grid;
  grid-template-columns: 1fr auto;
  color: var(--font-blue01);
}
.flow-bottom-text-container {
  align-self: center;
  justify-self: center;
  max-width: 870px;
}

.flow-bottom-text {
  font-size: clamp(14px, 10px + 0.735vw, 24px);
  margin-bottom: 3em;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin-right: 2em;
}

.flow-bottom-text-point {
  font-size: clamp(24px, 20px + 1.235vw, 29px);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2em;
}

.flow-bottom-text-point span {
  font-size: clamp(44px, 35px + 2.469vw, 54px);
}

.flow-bottom-img {
  margin-right: calc(var(--side-l) * (-1));
  width: clamp(143px, 57px + 23.782vw, 514px);
  align-self: end;
}

@media (max-width: 1350px) /* br調節 */ {
  .flow-bottom-text-point .control-br {
    display: block;
  }
}

@media (max-width: 960px) /* タブレット */ {
  .page-top-text_flow {
    text-align: left;
  }

  .flow-box-content {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    margin-right: 0;
  }
  .flow-box-img {
    grid-column: 1 / 3;
    height: clamp(120px, 84px + 10vw, 180px);
  }

  .flow-box-img img {
    width: 100%;
    height: 100%;
  }
  .flow-box-content-text {
    margin-top: 2em;
  }
  .flow-title-note {
    display: block;
    margin-left: 0;
    line-height: 1;
  }

  .flow-bottom-container {
    display: block;
  }
  .flow-bottom-text {
    margin-right: 0;
  }

  .flow-bottom-img {
    margin: 0 auto;
  }
}
@media (max-width: 560px) /* スマホ */ {
  .flow-box-title {
    padding-left: 0.5em;
    margin-left: 0.5em;
  }
  .flow-title-first {
    margin-left: 0.5em;
  }
}

/*　-------------------------------------下層ページ--会社概要-------------------------------- */

/*会社概要*/
.company {
  margin-bottom: clamp(182px, 160px + 6.218vw, 279px);
}

.company-title {
  font-size: clamp(20px, 15px + 1.282vw, 40px);
  font-weight: 700;
  color: var(--font-blue02);
  text-align: center;
  margin-bottom: calc(clamp(77px, 65px + 3.397vw, 130px) + var(--text-trim));
}

.company-table {
  width: 100%;

  border-spacing: 0 5px;
}

.company-table-th {
  font-size: clamp(15px, 8px + 0.833vw, 28px);
  font-weight: 400;
  color: #fff;
  background-color: var(--font-blue01);
  width: 27%;
  text-align: left;
  padding: 0 2em;
}

.company-table-td {
  font-size: clamp(14px, 5px + 0.897vw, 28px);
  background-color: var(--right-blue);
  margin-bottom: 3px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--font-blue02);
  padding: calc(1.6em + var(--text-trim)) 1em;
}
.company-table-td_business {
  line-height: 2;
}

.company-table-td_business a {
  display: block;
  margin-top: 1em;
}
@media (max-width: 960px) /* タブレット */ {
  .company-table {
    border-collapse: collapse;
    border-spacing: 0px;
  }
  .company-table-th {
    width: 100%;
    display: block;
    padding-left: 25px;
    padding-block: 0.2em;
  }

  .company-table-td {
    width: 100%;
    display: block;
    padding-left: 25px;
    padding-block: 0.7em;
    margin-bottom: 0;
  }
  .company-table-td_business {
    line-height: 1.5;
  }
}
@media (max-width: 560px) /* スマホ */ {
}

/*about EMPOWER GATE Inc.*/
.company-about {
  margin-bottom: 192px;
}

.company-about-content {
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: clamp(55px, 49px + 1.795vw, 83px) 5%;
}

.company-about-title {
  grid-column: 1/3;
  grid-row: 1/2;
  font-size: clamp(20px, 15px + 1.282vw, 40px);
  font-weight: 700;
  color: var(--font-blue01);
  letter-spacing: 0.3em;
  line-height: 1.7;
  margin-left: 70px;
}

.company-about-title::before {
  content: "";
  width: calc(42px + var(--side-l));
  height: 5px;
  display: block;
  background-color: var(--font-blue01);
  margin-top: 0.5em;
  margin-right: 28px;
  margin-left: calc(var(--side-l) * -1);
  position: absolute;
  left: var(--side-l);
}

.company-about-text-container {
  margin-left: 70px;
  display: grid;
  gap: clamp(60px, 55px + 1.282vw, 80px);
}

.company-about-box-title {
  font-size: clamp(20px, 18px + 0.641vw, 30px);
  font-weight: 700;
  color: var(--font-blue01);
  margin-bottom: calc(1.06em + var(--text-trim));
}

.company-about-box-subtitle {
  font-size: clamp(16px, 14px + 0.641vw, 26px);
  font-weight: 700;
  color: var(--red);
  line-height: 1.5em;
  margin-bottom: calc(1.26em + var(--text-trim));
}

.company-about-box-text {
  font-size: clamp(14px, 13px + 0.385vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--font-blue02);
}

.company-about-img {
  align-self: center;
  margin-right: calc(var(--side-l) * -1 + 5%);
}

/*about ceo  トップの上書き*/
.company-ceo {
  margin-bottom: clamp(93px, 37px + 15.449vw, 334px);
}

.company-ceo .top-ceo-content {
  max-width: 100%;
  gap: clamp(55px, 49px + 1.795vw, 83px) 7%;
}

.company-ceo-title {
  font-size: clamp(20px, 15px + 1.282vw, 40px);
  font-weight: 700;
  color: var(--font-blue01);
  letter-spacing: 0.3em;
  line-height: 1.7;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2em;
  /*margin-bottom: calc(2.8em + var(--text-trim));*/
  grid-column: 2/3;
}

.company-ceo-title::after {
  content: "";
  width: calc(100% + var(--side-l));
  height: 5px;
  display: block;
  background-color: var(--font-blue01);
  margin-right: calc(var(--side-l) * -1);
}

.company-ceo .top-ceo-text-title {
  color: var(--red);
}

.company-ceo .top-ceo-text {
  margin-right: 50px;
}

.company-ceo .top-ceo-img {
  align-self: end;
}

.company-ceo .top-ceo-img::before,
.company-ceo .top-ceo-img::after {
  border-radius: 0 0 0 20px;
}

.company-ceo .top-ceo-img-cover {
  display: none;
}

.company-ceo .top-ceo-img img {
  border-radius: 0 20px 0 20px;
}

@media (max-width: 960px) /* タブレット */ {
  .company-about-title {
    margin-left: 0;
    position: relative;
  }

  .company-about-title::before {
    height: clamp(120px, 102px + 4.938vw, 140px);
    width: 2px;
    margin: 0;

    left: 1em;
    bottom: 4em;
  }

  .company-about-img {
    grid-column: 1/3;
    grid-row: 2/3;
    width: 90%;
    justify-self: center;
    margin-right: 0;
  }

  .company-about-text-container {
    grid-column: 1/3;
    grid-row: 3/4;
    margin-left: 0;
  }
  /*ceo*/

  .company-ceo-title {
    position: relative;
  }
  .company-ceo-title::after {
    height: clamp(120px, 102px + 4.938vw, 140px);
    width: 2px;
    position: absolute;
    left: 1em;
    bottom: 4em;
  }

  .company-ceo .top-ceo-content {
    gap: clamp(55px, 49px + 1.795vw, 83px) 0;
  }
  .company-ceo .company-ceo-title {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .company-ceo .top-ceo-img {
    --side: clamp(26px, 18px + 2.179vw, 60px);
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    width: 60%;
    height: 100%;
    justify-self: center;
  }

  .company-ceo .top-ceo-img img {
    height: 100%;
    width: 100%;
  }

  .company-ceo .top-ceo-text {
    margin-right: 0;
  }
}
@media (max-width: 560px) /* スマホ */ {
  .company-ceo .top-ceo-content {
    display: grid;
  }
  .company-ceo .top-ceo-img {
    margin-bottom: 0;
    width: 80%;
  }
}

/*　-------------------------------------下層ページ-よくある質問---------------------------- */
.faq {
  margin-bottom: clamp(220px, 207px + 2.353vw, 252px);
}

.page-top-text_faq {
  margin-bottom: clamp(40px, 11px + 5.147vw, 110px);
  text-align: center;
}

.faq-top-link {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  font-size: clamp(17px, 14px + 0.741vw, 20px);
  color: var(--font-blue01);
  border: solid 1px #707070;
  margin-bottom: clamp(73px, 40px + 9.136vw, 110px);
}

.faq-link-box {
  width: 100%;
}

.faq-link-box a {
  padding-block: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.faq-link-box a::after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  display: block;
  background-color: var(--font-blue01);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.faq-link-box:nth-child(2) {
  border-right: solid 1px #707070;
  border-left: solid 1px #707070;
  text-align: center;
}

.faq-content-box-container {
  display: grid;
  gap: clamp(80px, 0px + 8.333vw, 160px);
}

.faq-content-box {
  color: var(--font-blue01);
}

.faq-content-title {
  font-size: 20px;
  font-weight: 700;
  border-bottom: solid 1px;
  padding-bottom: calc(1em + var(--text-trim));
  position: relative;
  margin-bottom: calc(2.8em + var(--text-trim));
}

.faq-content-title::after {
  content: "";
  width: 11em;
  height: 4px;
  display: block;
  background-color: #84b3e5;
  position: absolute;
  bottom: -2px;
}
.faq-caontent {
  font-size: clamp(12px, 9px + 0.588vw, 20px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0 1.5em;
}

.faq-box {
  margin-bottom: 2.41em;
  padding-bottom: 2.41em;
  border-bottom: solid 1px #c6c6c6;
}

.faq-content-box:last-child .faq-box:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
*/ .faq-box span {
  font-size: 30px;
  margin-right: 0.5em;
  transform: translateY(-0.4em);
}

.faq-q,
.faq-a {
  display: flex;
  text-align: justify;
}

.faq-q {
  margin-bottom: 1em;
}

@media (max-width: 960px) /* タブレット */ {
  .faq-top-link {
    display: block;
  }

  .faq-link-box:nth-child(2) {
    border-top: solid 1px #707070;
    border-bottom: solid 1px #707070;
    border-left: none;
    border-right: none;
  }

  .faq-content-title {
    font-size: clamp(16px, 9px + 1.975vw, 24px);
    margin-bottom: calc(1.75em + var(--text-trim));
  }
}
@media (max-width: 560px) /* スマホ */ {
}

/*　-------------------------------------下層ページ-お知らせ一覧--　個別---------------------------- */
.news {
  display: grid;
  grid-template-columns: 1fr clamp(160px, 46px + 14.892vw, 332px);
  /* grid-template-rows: auto 1fr auto;*/
  gap: 7%;
  margin-bottom: clamp(112px, 9px + 10.729vw, 215px);
}

/*お知らせ一覧*/
.news-list {
  display: grid;
  gap: clamp(57px, 33px + 4.338vw, 116px);
}

.news-box {
  display: grid;
  grid-template-columns: clamp(160px, 61px + 12.987vw, 310px) 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0 clamp(16px, -10px + 2.708vw, 42px);
  align-items: center;
  color: var(--font-blue02);
}

.news-box-img {
  grid-column: 1/2;
  grid-row: 1/4;
}

.news-box-img img {
  width: 100%;
  aspect-ratio: 31/19;
}

.news-box-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 2em;
}

.news-box-catlist {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 1em;
}

.news-box-catlist li {
  font-size: clamp(10px, 4px + 0.625vw, 16px);
  font-weight: 400;
  color: #fff;
  background-color: #84b3e5;
  border-radius: 100vmax;
  padding: calc(0.3em + var(--text-trim)) 1em;
  line-height: 1;
  white-space: nowrap;
}

.news-box-time {
  font-size: clamp(10px, 2px + 0.833vw, 18px);
}

.news-box-title {
  font-size: clamp(14px, 10px + 0.417vw, 18px);
  font-weight: 700;
  line-height: 1.8;
  margin-block: clamp(5px, -2px + 0.866vw, 15px);
  align-self: start;
}

.news-box-text {
  font-size: clamp(12px, 6px + 0.625vw, 18px);
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: var(--text-trim);
}

/*ページネーション*/
.news-pagenation {
  font-size: clamp(12px, 10px + 0.441vw, 18px);
  font-weight: 700;
  color: var(--font-blue02);
  line-height: 1;
  margin-top: clamp(30px, -3px + 4.329vw, 80px);
}
.news-pagenation .nav-links {
  display: flex;
  justify-content: center;
  gap: 2em;
}

.news-pagenation .current {
  border-bottom: solid 4px;
  padding-bottom: 0.3em;
}

/*　-----------------------------お知らせ個別-------------------------- */
.news-post-title {
  font-size: clamp(18px, 10px + 0.833vw, 26px);
  font-weight: 700;
  color: var(--font-blue01);
  border-bottom: solid 1px;
  margin-bottom: calc(1em + var(--text-trim));
}

.news-box-catlist_news-post {
  margin-bottom: clamp(25px, 9px + 2.868vw, 64px);
}

.news-post-postarea {
  margin-bottom: clamp(63px, 52px + 1.985vw, 90px);
}

/*個別次のページ*/
.next-prev-pagenation {
  display: flex;
  justify-content: space-between;
  max-width: 220px;
  font-size: clamp(12px, 7px + 0.976vw, 14px);
  margin: 0 auto;
}

/*お知らせサイドバー*/

.news-side-container {
  display: grid;
  gap: 70px 0;
  align-self: start;
}

.news-side-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--font-blue02);
  margin-bottom: calc(1.1em + var(--text-trim));
  margin-top: var(--text-trim);
}

.news-side-cat {
  list-style: none;
  font-size: 12px;
  margin-bottom: calc(1.3em + var(--text-trim));
}

.news-archive-container {
  position: relative;
  font-size: 13px;
  display: grid;
  align-items: center;
}

.news-archive {
  width: 100%;
  padding: 0.5em 1em;
  border-radius: 5px;
  -webkit-appearance: none;
  appearance: none;
}

.news-archive-container::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #000;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  justify-self: end;
  right: 1em;
}

/*記事ランキング*/
.news-side-rank {
  display: grid;
  gap: 25px;
}

.news-side-rank-link {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 19px;
  align-items: center;
  height: 70px;
}

.news-side-rank-link-img {
  position: relative;
}

.news-side-rank-link-img::after {
  content: "";
  width: 21px;
  height: 21px;
  display: block;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background-color: var(--font-blue01);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
}

.news-side-rank-link:nth-child(1) .news-side-rank-link-img::after {
  content: "1";
  background-color: var(--font-blue02);
}

.news-side-rank-link:nth-child(2) .news-side-rank-link-img::after {
  content: "2";
}
.news-side-rank-link:nth-child(3) .news-side-rank-link-img::after {
  content: "3";
}
.news-side-rank-link:nth-child(4) .news-side-rank-link-img::after {
  content: "4";
}

.news-side-rank-link img {
  height: 100%;
  width: 100%;
  aspect-ratio: 8/7;
}

.news-side-rank-text {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--font-blue01);
}

@media (max-width: 960px) /* タブレット */ {
  .news-side-box_lank {
    display: none;
  }
}
@media (max-width: 560px) /* スマホ */ {
  .news {
    display: block;
  }

  .news-list {
    margin-bottom: 85px;
  }

  .news-box {
    grid-template-columns: 1fr;
  }
  .news-box-meta {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .news-box-img {
    grid-column: 1/2;
    grid-row: 1/2;
    margin-bottom: 17px;
  }

  .news-box-img img {
    aspect-ratio: 32/15;
  }

  .news-side-container {
    grid-template-columns: 1fr 1fr;
  }

  .news-list-container {
    margin-bottom: 135px;
  }
}

/*　----------------------------------投稿はありません--------------------------- */
.no-post {
  font-size: clamp(14px, 12px + 0.641vw, 24px);
  font-weight: 400;
  text-align: center;
}

/*　-------------------------------------下層ページ-お問い合わせ--------------------------- */
.contact {
  margin-bottom: clamp(109px, 95px + 3.782vw, 168px);
}

.contact-bottom-line {
  height: clamp(5px, -3px + 1.463vw, 8px);
  width: 100%;
  background: var(--gradation-base);
  background: var(--gradation);
  opacity: 0.2;
}

.page-top-text_contact {
  text-align: center;
  margin-bottom: clamp(64px, 41px + 4.118vw, 120px);
}

/*お問い合わせフロー*/
.contact-flow {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1fr 0.7fr 1fr;
  gap: clamp(20px, 12px + 1.471vw, 40px);
  align-items: center;
  justify-items: center;
  color: var(--font-blue01);
  max-width: 595px;
  margin: 0 auto;
  margin-bottom: clamp(61px, 39px + 6.173vw, 86px);
}

.contact-flow::after,
.contact-flow::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--font-blue01);
  grid-row: 1/2;
}

.contact-flow-box {
  grid-row: 1/2;
  text-align: center;
  line-height: 1;
}

.contact-flow-box-en {
  font-size: clamp(12px, 6px + 1.029vw, 26px);
  margin-bottom: 0.6em;
  white-space: nowrap;
}

.contact-flow-box-ja {
  font-size: clamp(10px, 6px + 0.735vw, 20px);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.contact-flow-box01 {
  grid-column: 1/2;
}

.contact-flow::before {
  grid-column: 2/3;
}

.contact-flow-box02 {
  grid-column: 3/4;
}

.contact-flow::after {
  grid-column: 4/5;
}

.contact-flow-box03 {
  grid-column: 5/6;
}

.current01 .contact-flow-box01 {
  font-weight: 700;
}

.current01.contact-flow::before {
  height: 4px;
}

.current02 .contact-flow-box02 {
  font-weight: 700;
}

.current02.contact-flow::after {
  height: 4px;
}

.current03 .contact-flow-box03 {
  font-weight: 700;
}

/*お問い合わせフォーム内*/
.form-container {
  max-width: 1100px;
  margin: 0 auto;
}

.contact-container {
  display: grid;
  gap: 20px;
  margin-bottom: 68px;
}
.contact-box {
  display: grid;
  grid-template-columns: 200px 1fr;
  /*font-size: 20px;*/
  border: solid 1px #84b3e5;
  border-radius: 5px;
}

.contact-box-title {
  font-size: 16px;
  background-color: var(--right-blue);
  border-right: solid 1px #84b3e5;
  padding: 1em;
  border-radius: 5px 0 0 5px;
}

.contact-box-content {
  font-size: 20px;
  align-self: center;
  border-radius: 0 5px 5px 0;
}

input[type="checkbox"] {
  color-scheme: light;
}
.text-input,
.textarea-input {
  width: 100%;
  padding: calc(1em + var(--text-trim)) 1.5em;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
}

.textarea-input {
  min-height: 10em;
  field-sizing: content;
}

.check-input {
  margin-left: 1.5em;
  display: flex;
  gap: 0 1em;
  flex-wrap: wrap;
}

.contact-note {
  font-size: clamp(14px, 13px + 0.385vw, 20px);
  font-weight: 400;
}

.contact-note a {
  color: #1691fa;
}

.contact-note-title {
  font-size: clamp(14px, 12px + 0.641vw, 24px);
  text-align: center;
  margin-bottom: calc(2em + var(--text-trim));
}

.peivacy-box {
  max-width: 365px;
  background-color: var(--right-blue);
  border: solid 1px #84b3e5;
  border-radius: 5px;
  text-align: center;
  margin: 0 auto;
  padding-block: 1em;
  margin-top: clamp(58px, 31px + 7.407vw, 88px);
  margin-bottom: clamp(75px, 67px + 2.222vw, 84px);
  display: block;
}

.peivacy-box input {
  margin-right: 1em;
}

.form-submit {
  font-size: clamp(12px, 8px + 0.988vw, 16px);
  font-weight: 700;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  position: relative;
}

.form-submit input {
  background-color: transparent;
  border: none;
}

.form-submit::after {
  content: "";
  height: 1.75em;
  width: 1.75em;
  display: block;
  background-image: url(../img/icon-form-arrow.svg);
  background-size: contain;
  transition: opacity 0.15s ease-in-out;
}
/*contactform7の注意書きの位置*/
.wpcf7-response-output {
  position: absolute;
  top: 2em;
}

@media (hover: hover) {
  .form-submit:hover::after {
    opacity: 0.5;
  }
}

@media (max-width: 960px) /* タブレット */ {
  .contact-box {
    display: block;
    border-radius: 0;
  }
  .contact-box-title {
    font-size: clamp(14px, 10px + 0.988vw, 18px);
    border-right: none;
    border-bottom: solid 1px #84b3e5;
    padding: 0.5em 1em;
    border-radius: 0;
  }

  .contact-box-content {
    font-size: clamp(14px, 10px + 0.988vw, 18px);
  }

  .check-input {
    padding-block: 1em;
  }
  .text-input,
  .textarea-input {
    padding: calc(1em + var(--text-trim)) 1em;
    border-radius: 0;
  }
}
@media (max-width: 560px) /* スマホ */ {
  .contact-container {
    gap: 10px;
  }

  .check-input {
    flex-direction: column;
  }
}

/*　-------------------------------------下層ページ-お問い合わせ-確認-------------------------- */

.contact-confirm .contact-box-content {
  padding: 1em;
}

.contact-confirm .contact-box-title {
  padding: 1em;
}

.contact-confirm .contact-box-textarea .contact-box-content {
  white-space: pre-wrap;
}
.form-submit-container {
  display: flex;
  justify-content: space-between;
  max-width: 350px;
  margin: 0 auto;
}

.form-submit-return::after {
  content: none;
}

@media (hover: hover) {
  .form-submit-return:hover {
    opacity: 0.5;
    cursor: pointer;
  }
}

@media (max-width: 560px) /* スマホ */ {
  .form-submit-container {
    justify-content: center;
    gap: 30%;
  }
}
/*　-------------------------------------下層ページ-お問い合わせ-完了-------------------------- */
.contact-thanks .contact-flow {
  margin-bottom: clamp(80px, 55px + 4.412vw, 140px);
}

.contact-thanks-btn {
  font-size: clamp(12px, 6px + 1.029vw, 26px);
  padding: 0.5em;
  color: #fff;
  background-color: var(--font-blue02);
  border-radius: 100vmax;
  text-align: center;
  display: block;
  max-width: clamp(240px, 154px + 15.441vw, 450px);
  margin: 0 auto;
}

/*　-----------------------404ページ-------------------------- */

.notfound {
  text-align: center;
  color: var(--font-blue01);
  margin-top: calc(100px + var(--header-height));
  padding-bottom: 100px;
}
.notfound-title {
  font-size: clamp(25px, 19px + 1.103vw, 40px);
  font-weight: 700;
  margin-bottom: calc(2em + var(--text-trim));
}

.not-found-text {
  font-size: clamp(14px, 12px + 0.441vw, 20px);
  margin-bottom: 3em;
}

.top-retrun-btn {
  font-size: clamp(12px, 6px + 1.029vw, 26px);
  padding: 0.5em;
  color: #fff;
  background-color: var(--font-blue02);
  border-radius: 100vmax;
  text-align: center;
  display: block;
  max-width: clamp(240px, 154px + 15.441vw, 450px);
  margin: 0 auto;
}

/*　-----------------------固定投稿------------------------- */
.page-post-area {
  margin-top: -50px;
  margin-bottom: 180px;
}