@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  width: 100%;
  scrollbar-width: none;
}
body {
  position: relative;
  font-family: sans-serif;
  font-weight: normal;
  font-size: min(calc(20 * var(--vw)), 20px);
  line-height: 1.5;
  text-align: center;
  background-color: #fff;

  /* Safari / Chrome (macOS) の描画を細めに整えて揃える */
  -webkit-font-smoothing: antialiased;

  /* Firefox (macOS) 向けの設定 */
  -moz-osx-font-smoothing: grayscale;
}
html,
body {
  overscroll-behavior: none;
}
ul li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  opacity: 0.5; /* 必要に応じて削除 */
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
button {
  border: none;
  background-color: #ffffff00;
}
:root {
  --max-content-width: 1900px;
  /* 1900px に対する 1px あたりの vw 値を定義 */
  --vw: calc(100vw / 1900);
  --note-vw: calc(100vw / 1240);
  --sp-vw: calc(100vw / 769);

  --base-color: #d0eaec;
  --main-color: #2f7cac;
  --accent-color: #ffe200;
}
.is_sp {
  display: none;
}
@media (max-width: 767px) {
  .is_sp {
    display: block;
  }
  .is_pc {
    display: none;
  }
}
/* ====================================
header
==================================== */
.header__inner {
  padding: min(calc(15 * var(--note-vw)), 15px)
    min(calc(15 * var(--note-vw)), 15px) min(calc(15 * var(--note-vw)), 15px)
    min(calc(60 * var(--note-vw)), 60px);
  max-width: 1240px;
  margin: 0 auto;
}
h1 {
  width: min(calc(300 * var(--note-vw)), 300px);
  aspect-ratio: 3/1;
}
h1 img {
  object-position: center;
}
@media (max-width: 767px) {
  .header__inner {
    padding: min(4vw, 20px);
  }
  h1 {
    width: 30%;
  }
}
/* ====================================
FV
==================================== */
.bg-container {
  position: relative;
  background-color: var(--base-color);
}
.bg-container::before,
.bg-container::after {
  content: "";
  position: absolute;
  display: block;
  width: min(calc(800 * var(--vw)), 800px);
  aspect-ratio: 3/2;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}
.bg-container::before {
  top: 0;
  right: 0;
  background-image: url("../images/fv-bg-image_top.webp");
  background-position: top right;
}
.bg-container::after {
  bottom: 0;
  left: 0;
  background-image: url("../images/fv-bg-image_bottom.webp");
  background-position: bottom left;
}
#fv .fv-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  align-items: flex-end;
  max-width: 1240px;
  padding: min(calc(15 * var(--note-vw)), 15px) 0
    min(calc(80 * var(--note-vw)), 80px) min(calc(65 * var(--note-vw)), 65px);
  margin: 0 auto;
  z-index: 5;
}
#fv .fv-container .fv-left {
  width: 45%;
  padding-bottom: min(calc(35 * var(--vw)), 35px);
}
#fv .fv-container .fv-left p {
  text-align: left;
  font-weight: bold;
  font-size: min(calc(20 * var(--note-vw)), 20px);
  margin-bottom: min(calc(24 * var(--note-vw)), 24px);
}
#fv .fv-container .fv-left p.large {
  font-size: min(calc(35 * var(--note-vw)), 35px);
  line-height: 1.7;
  margin-bottom: min(calc(70 * var(--note-vw)), 70px);
}
#fv .fv-container .fv-left p.large .highlight.blue {
  display: inline-block;
  color: #fff;
  padding: min(calc(4 * var(--note-vw)), 4px)
    min(calc(12 * var(--note-vw)), 12px);
  background-color: var(--main-color);
  margin-left: min(calc(8 * var(--note-vw)), 8px);
}
#fv .fv-container .fv-left button {
  position: relative;
  display: block;
  width: 100%;
  max-width: min(calc(470 * var(--note-vw)), 470px);
  padding: 0;
  margin: 0 auto min(calc(16 * var(--note-vw)), 16px) 0;
}
#fv .fv-container .fv-left button.download {
  margin-bottom: min(calc(55 * var(--note-vw)), 55px);
}
#fv .fv-container .fv-left button a {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: var(--main-color);
  font-size: min(calc(20 * var(--note-vw)), 20px);
  font-weight: bold;
  padding: min(calc(10 * var(--note-vw)), 10px)
    min(calc(25 * var(--note-vw)), 25px);
  border: min(calc(3 * var(--note-vw)), 3px) solid var(--main-color);
  border-radius: 50px;
  background-color: #fff;
  box-shadow: rgb(51 51 51 / 50%) 0 min(calc(5 * var(--note-vw)), 5px)
    min(calc(5 * var(--note-vw)), 5px) 0;
}
#fv .fv-container .fv-left button.download a {
  padding-bottom: 0;
  align-items: flex-end;
}
#fv .fv-container .fv-left button.contact a {
  color: #fff;
  background-color: var(--main-color);
  padding-left: min(calc(30 * var(--note-vw)), 30px);
  padding-bottom: min(calc(7.5 * var(--note-vw)), 7.5px);
}
#fv .fv-container .fv-left button .lead-text {
  color: var(--main-color);
  position: absolute;
  top: max(calc(-20 * var(--note-vw)), -20px);
  left: calc(50% - (min(calc(240 * var(--note-vw)), 240px) / 2));
  width: min(calc(240 * var(--note-vw)), 240px);
  font-size: min(calc(16 * var(--note-vw)), 16px);
  padding: min(calc(4 * var(--note-vw)), 4px) 0;
  background-color: var(--accent-color);
  border-radius: 50px;
}
#fv .fv-container .fv-left button.download .img-box {
  width: min(calc(62.5 * var(--note-vw)), 62.5px);
  aspect-ratio: 1.5/1;
}
#fv .fv-container .fv-left button.download .img-box .img {
  width: auto;
  object-fit: contain;
  border: 1px solid #333;
  border-bottom: none;
}
#fv .fv-container .fv-left button.download .button-text,
#fv .fv-container .fv-left button.download .icon {
  margin-bottom: min(calc(8 * var(--note-vw)), 8px);
}
#fv .fv-container .fv-left button.contact .img {
  width: min(calc(55 * var(--note-vw)), 55px);
  aspect-ratio: 1.5/1;
  object-fit: contain;
}
#fv .fv-container .fv-left button .icon {
  width: min(calc(32 * var(--note-vw)), 32px);
  aspect-ratio: 1;
  object-fit: contain;
}
#fv .fv-container .fv-right {
  width: 55%;
}
#fv .fv-container .mockup-box {
  width: 100%;
  aspect-ratio: 1.6/1;
}
/* #fv .fv-container .mockup-box img {
  object-position: bottom;
} */
@media (max-width: 767px) {
  .bg-container::before,
  .bg-container::after {
    width: 60%;
  }
  #fv .fv-container {
    display: block;
    padding: min(4vw, 20px) min(4vw, 20px) min(20vw, 100px);
  }
  #fv .fv-container .fv-left {
    width: 100%;
    padding-bottom: min(calc(35 * var(--vw)), 35px);
  }
  #fv .fv-container .fv-left p {
    text-align: center;
    font-size: min(4.5vw, 20px);
    margin-bottom: min(4vw, 20px);
  }
  #fv .fv-container .fv-left p.large {
    font-size: min(5.5vw, 27.5px);
    line-height: 1.7;
    margin-bottom: min(4vw, 20px);
  }
  #fv .fv-container .fv-left .mockup-box {
    width: 90%;
    max-width: 450px;
    margin: 0 auto min(8vw, 40px);
  }
  #fv .fv-container .fv-left .button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  #fv .fv-container .fv-left button {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
  }
  #fv .fv-container .fv-left button.download {
    margin-bottom: min(8vw, 40px);
  }
  #fv .fv-container .fv-left button a {
    width: 100%;
    font-size: min(3.6vw, 18px);
    padding: min(3vw, 15px) min(5vw, 25px) min(2vw, 10px);
    border: min(0.5vw, 2.5px) solid var(--main-color);
    box-shadow: rgb(51 51 51 / 50%) 0 min(1vw, 5px) min(1vw, 5px) 0;
  }
  #fv .fv-container .fv-left button.contact a {
    padding: min(3vw, 15px) min(5vw, 25px) min(2vw, 10px);
  }
  #fv .fv-container .fv-left button .lead-text {
    top: max(-2.5vw, -12.5px);
    left: 25%;
    width: 50%;
    font-size: min(2.5vw, 12.5px);
    padding: min(calc(5 * var(--vw)), 5px) 0;
    background-color: var(--accent-color);
    border-radius: 50px;
  }
  #fv .fv-container .fv-left button.download .img-box {
    width: min(10vw, 50px);
    aspect-ratio: 1.5/1;
  }
  #fv .fv-container .fv-left button.download .img-box .img {
    border: 0.5px solid #333;
    border-bottom: 0;
  }
  #fv .fv-container .fv-left button.download .button-text,
  #fv .fv-container .fv-left button.download .icon {
    margin-bottom: min(2vw, 10px);
  }
  #fv .fv-container .fv-left button.contact .img {
    width: min(10vw, 50px);
  }
  #fv .fv-container .fv-left button .icon {
    width: min(5vw, 25px);
    aspect-ratio: 1;
    object-fit: contain;
  }
  #fv .fv-container .fv-right {
    display: none;
  }
}
/* ====================================
企業ロゴ
==================================== */
.company-logo-container {
  background-color: #fff;
}
.company-logo-container__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 1240px;
  padding: min(calc(30 * var(--note-vw)), 30px)
    min(calc(20 * var(--note-vw)), 20px);
  margin: 0 auto;
}
.company-logo-container .logo-box {
  width: calc(100% / 5);
  height: min(calc(100 * var(--vw)), 100px);
  padding: 0 min(calc(25 * var(--vw)), 25px);
}
.company-logo-container .logo-box.padding-none {
  padding: 0;
}
.company-logo-container .logo-box img {
  object-fit: contain;
  object-position: center;
}
.company-logo-container .logo-box.itochu {
  width: 10.5%;
}
.company-logo-container .logo-box.jfe {
  width: 13%;
}
/* ====================================
コンテンツ共通部分
==================================== */
main {
  position: relative;
}
main::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../images/bg-image.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}
section,
#about {
  margin: min(calc(35 * var(--vw)), 35px) 0 min(calc(75 * var(--vw)), 75px);
}
h2 {
  font-size: min(calc(45 * var(--vw)), 45px);
  margin-bottom: min(calc(35 * var(--vw)), 35px);
}
.highlight.yellow {
  padding: min(calc(5 * var(--vw)), 5px);
  /* 
    transparent 30%: 上から30%は透明
    #ffec6e 30%: 下から70%（100%-30%）を黄色にする
  */
  background: linear-gradient(transparent 50%, var(--accent-color) 50%);
}
.font-normal {
  font-size: min(calc(30 * var(--vw)), 30px);
}
.font-large {
  font-size: 1.5em;
  padding: 0 min(calc(5 * var(--vw)), 5px);
}
.color-blue {
  color: var(--main-color);
}
#problem .problem__img-container,
#feature .feature__bg-container .feature__flex-container,
#voice .voice__inner,
.cta .cta__inner {
  width: min(calc(1120 * var(--vw)), 1120px);
}
#problem .problem__bg-container .answer__container .answer-box h3,
#feature .feature__bg-container h3,
#case .case__box .title-container .number-box .case,
#case .case__box .title-container h3 {
  font-size: clamp(16px, calc(25 * var(--vw)), 25px);
}
@media (max-width: 767px) {
  main::before {
    background-image: url("../images/bg-image_sp.webp");
  }
  section,
  #about {
    margin: min(5vw, 25px) 0 min(10vw, 50px);
  }
  h2 {
    font-size: min(4.5vw, 22.5px);
    margin-bottom: min(5vw, 25px);
  }
  .font-normal {
    font-size: min(4vw, 17px);
  }
  .font-large {
    font-size: 1.25em;
    /* padding: 0 min(1vw, 5px); */
  }
}
/* ====================================
#about
==================================== */
#about p {
  font-size: min(calc(30 * var(--vw)), 30px);
  font-weight: bold;
  line-height: 1.7;
  padding: 0 min(calc(20 * var(--vw)), 20px);
  margin-bottom: min(calc(60 * var(--vw)), 60px);
}
#about .about__img-box {
  width: min(calc(800 * var(--vw)), 800px);
  aspect-ratio: 1.1/1;
  padding: 0 min(calc(20 * var(--vw)), 20px);
  margin: 0 auto;
}
@media (max-width: 767px) {
  #about p {
    font-size: min(4vw, 16px);
    padding: 0 min(4vw, 20px);
    margin-bottom: min(6vw, 30px);
  }
  #about .about__img-box {
    width: 90%;
    max-width: 400px;
    aspect-ratio: 1.1/1;
    padding: 0 min(4vw, 20px);
    margin: 0 auto;
  }
}
/* ====================================
#problem 現場の悩み
==================================== */
section#problem {
  margin-bottom: min(calc(35 * var(--vw)), 35px);
}
#problem .problem__img-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  margin: 0 auto min(calc(50 * var(--vw)), 50px);
}
#problem .problem__img-box {
  width: 50%;
  aspect-ratio: 2.25/1.5;
  padding: 0 min(calc(20 * var(--vw)), 20px);
}
#problem .problem__bg-container {
  position: relative;
  background-color: var(--base-color);
  padding: min(calc(175 * var(--vw)), 175px) min(calc(20 * var(--vw)), 20px)
    min(calc(75 * var(--vw)), 75px);
}
#problem .problem__bg-container svg {
  position: absolute;
  top: 0;
  left: 33%;
  width: 34%;
  aspect-ratio: 6/1;
}
#problem .problem__bg-container h2 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  line-height: 1.1;
  margin-bottom: min(calc(50 * var(--vw)), 50px);
}
#problem .problem__bg-container h2 .padding-bottom {
  display: inline-block;
  padding-bottom: min(calc(10 * var(--vw)), 10px);
}
#problem .problem__bg-container h2 .logo-img-box {
  display: inline-block;
  width: min(calc(400 * var(--vw)), 400px);
  aspect-ratio: 4.5/1;
  margin: 0 min(calc(10 * var(--vw)), 10px) 0 min(calc(15 * var(--vw)), 15px);
}
#problem .problem__bg-container h2 .logo-img-box img {
  object-fit: contain;
}
#problem .problem__bg-container .answer__container {
  width: min(calc(1300 * var(--vw)), 1300px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: min(5vw, 25px);
  margin: 0 auto;
}
#problem .problem__bg-container .answer__container .answer-box {
  width: calc((100% - min(5vw, 25px)) / 2);
  max-width: 550px;
  background-color: #fffdec;
  border-radius: min(calc(25 * var(--vw)), 25px);
  padding: min(calc(40 * var(--vw)), 40px);
}
#problem .problem__bg-container .answer__container .answer-box h3 {
  color: #ffb52f;
  font-size: clamp(16px, calc(23 * var(--vw)), 23px);
  margin-bottom: min(calc(20 * var(--vw)), 20px);
}
#problem .problem__bg-container .answer__container .answer-box .answer-img-box {
  width: min(calc(200 * var(--vw)), 200px);
  aspect-ratio: 1.14/1;
  margin: 0 auto min(calc(20 * var(--vw)), 20px);
}
#problem .problem__bg-container .answer__container .answer-box p {
  font-size: clamp(14.5px, calc(18 * var(--vw)), 18px);
}

@media (max-width: 767px) {
  section#problem {
    margin-bottom: min(5vw, 25px);
  }
  #problem .problem__img-container {
    width: 80%;
    max-width: 400px;
  }
  #problem .problem__img-box {
    width: 100%;
    padding: 0;
    margin: 0 auto min(10vw, 50px);
  }
  #problem .problem__img-box.problem2 {
    margin-bottom: 0;
  }
  #problem .problem__img-box img {
    object-fit: contain;
  }
  #problem .problem__bg-container {
    padding: min(calc(150 * var(--vw)), 150px) min(4vw, 20px) min(8vw, 40px);
  }
  #problem .problem__bg-container h2 {
    margin-bottom: min(5vw, 25px);
  }
  #problem .problem__bg-container h2 .padding-bottom {
    padding-bottom: min(1vw, 5px);
  }
  #problem .problem__bg-container h2 .logo-img-box {
    width: min(35vw, 175px);
    aspect-ratio: 4.5/1;
    margin: 0 min(1vw, 5px) 0 min(2vw, 10px);
  }
  #problem .problem__bg-container .answer__container .answer-box {
    width: 100%;
    max-width: 300px;
    padding: min(4vw, 20px) min(2vw, 10px);
  }
  #problem .problem__bg-container .answer__container .answer-box h3 {
    font-size: 1.125em;
    margin-bottom: min(4vw, 20px);
  }
  #problem
    .problem__bg-container
    .answer__container
    .answer-box
    .answer-img-box {
    width: 50%;
    max-width: 100px;
    margin: 0 auto min(4vw, 20px);
  }
  #problem .problem__bg-container .answer__container .answer-box p {
    font-size: min(4vw, 16px);
  }
}
/* ====================================
#feature 特徴
==================================== */
#feature .feature__bg-container {
  background-color: var(--base-color);
  padding: min(calc(75 * var(--vw)), 75px) min(calc(20 * var(--vw)), 20px)
    min(calc(10 * var(--vw)), 10px);
}
#feature .feature__bg-container h3 {
  font-size: min(calc(30 * var(--vw)), 30px);
  margin-bottom: min(calc(50 * var(--vw)), 50px);
}
#feature .feature__bg-container .feature__flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5%;
  margin: 0 auto min(calc(75 * var(--vw)), 75px);
}
#feature .feature__bg-container .feature__flex-container .feature-box {
  width: min(calc(265 * var(--vw)), 265px);
  font-weight: bold;
  background-color: #fff;
  padding: min(calc(25 * var(--vw)), 25px) min(calc(20 * var(--vw)), 20px);
  border-radius: min(calc(15 * var(--vw)), 15px);
}
#feature
  .feature__bg-container
  .feature__flex-container
  .feature-box
  .feature-title {
  color: #fff;
  font-size: min(calc(25 * var(--vw)), 25px);
  background-color: var(--main-color);
  border-radius: min(calc(25 * var(--vw)), 25px);
  margin-bottom: min(calc(25 * var(--vw)), 25px);
}
#feature
  .feature__bg-container
  .feature__flex-container
  .feature-box
  .feature-img-box {
  max-width: min(calc(300 * var(--vw)), 300px);
  aspect-ratio: 1.5/1;
  margin: 0 auto min(calc(30 * var(--vw)), 30px);
}
#feature
  .feature__bg-container
  .feature__flex-container
  .feature-box
  .feature-text {
  font-size: min(calc(25 * var(--vw)), 25px);
  line-height: 1.6;
}
@media (max-width: 767px) {
  #feature .feature__bg-container {
    padding: min(5vw, 25px) min(4vw, 20px) min(1vw, 5px);
  }
  #feature .feature__bg-container h3 {
    font-size: 1.25em;
    margin-bottom: min(5vw, 25px);
  }
  #feature .feature__bg-container .feature__flex-container {
    width: min(calc(525 * var(--sp-vw)), 525px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: min(3vw, 15px);
    margin: 0 auto min(10vw, 50px);
  }
  #feature .feature__bg-container .feature__flex-container .feature-box {
    width: calc(50% - min(3vw, 15px));
    max-width: 165px;
    padding: min(2vw, 10px);
  }
  #feature
    .feature__bg-container
    .feature__flex-container
    .feature-box
    .feature-title {
    font-size: min(3vw, 16px);
    border-radius: 50px;
    margin-bottom: min(2vw, 10px);
  }
  #feature
    .feature__bg-container
    .feature__flex-container
    .feature-box
    .feature-img-box {
    width: 80%;
    max-width: 120px;
    margin: 0 auto min(2vw, 10px);
  }
  #feature
    .feature__bg-container
    .feature__flex-container
    .feature-box
    .feature-text {
    font-size: min(3vw, 16px);
  }
}
/* ====================================
#case 導入事例
==================================== */
#case .case__bg-container {
  background-color: var(--base-color);
  padding: min(calc(75 * var(--vw)), 75px) min(calc(20 * var(--vw)), 20px)
    min(calc(50 * var(--vw)), 50px);
}
#case .case__box {
  width: min(calc(1200 * var(--vw)), 1200px);
  background-color: #fff;
  border-radius: min(calc(15 * var(--vw)), 15px);
  padding: min(calc(50 * var(--vw)), 50px) min(calc(40 * var(--vw)), 40px);
  margin: 0 auto min(calc(50 * var(--vw)), 50px);
}
#case .case__box .title-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: min(calc(40 * var(--vw)), 40px);
}
#case .case__box.reverse .title-container {
  flex-direction: row-reverse;
}
#case .case__box .title-container .number-box {
  width: min(calc(125 * var(--vw)), 125px);
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  border-right: min(calc(5 * var(--vw)), 5px) solid #000;
  padding-right: min(calc(15 * var(--vw)), 15px);
}
#case .case__box.reverse .title-container .number-box {
  border-right: none;
  border-left: min(calc(5 * var(--vw)), 5px) solid #000;
  padding-right: 0;
  padding-left: min(calc(15 * var(--vw)), 15px);
}
#case .case__box .title-container .number-box .number {
  display: inline-block;
  color: #ffb52f;
  font-size: 1.5em;
}
#case .case__box.case1 .title-container .number-box .number {
  margin-left: min(calc(10 * var(--vw)), 10px);
}
#case .case__box .title-container h3 {
  color: var(--main-color);
  text-align: left;
  padding-left: min(calc(25 * var(--vw)), 25px);
}
#case .case__box.reverse .title-container h3 {
  padding-left: 0;
  padding-right: min(calc(25 * var(--vw)), 25px);
}
#case .case__box .company-profile-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 min(calc(20 * var(--vw)), 20px);
  margin-bottom: min(calc(40 * var(--vw)), 40px);
}
#case .case__box.reverse .company-profile-container {
  flex-direction: row-reverse;
}
#case .case__box .company-profile-container .company-img-box {
  width: 56%;
  aspect-ratio: 2.25/1.25;
}
#case .case__box .company-profile-container .company-img-box img {
  border-radius: min(calc(15 * var(--vw)), 15px);
}
#case .case__box .company-profile-container .company-profile {
  width: 44%;
  text-align: left;
  padding-left: min(calc(20 * var(--vw)), 20px);
}
#case .case__box.reverse .company-profile-container .company-profile {
  padding-left: 0;
  padding-right: min(calc(20 * var(--vw)), 20px);
}
/* #case .case__box .company-profile-container .title-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: min(calc(40 * var(--vw)), 40px);
} */
#case .case__box.reverse .company-profile-container .title-container {
  flex-direction: row-reverse;
}
#case .case__box .company-profile-container .company-profile .logo-box {
  width: 100%;
  aspect-ratio: 4/1;
}
#case .case__box .company-profile-container .company-profile .logo-box#sekisui {
  width: min(calc(300 * var(--vw)), 300px);
  aspect-ratio: 2.5/1;
  margin-bottom: min(calc(20 * var(--vw)), 20px);
}
#case .case__box .company-profile-container .company-profile .logo-box#nisshin {
  aspect-ratio: 7.7/1;
  margin: min(calc(20 * var(--vw)), 20px) 0;
}
#case
  .case__box
  .company-profile-container
  .company-profile
  .company-name-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  font-weight: bold;
  /* margin-bottom: min(calc(40 * var(--vw)), 40px); */
}
#case
  .case__box
  .company-profile-container
  .company-profile
  .company-name-container
  .office-icon-box {
  width: min(calc(80 * var(--vw)), 80px);
  aspect-ratio: 1;
  margin-right: min(calc(20 * var(--vw)), 20px);
}
#case .case__box .company-profile-container .company-profile p {
  font-size: 0.8em;
}
#case .case__box .company-profile-container .company-profile p.profile {
  margin-bottom: min(calc(20 * var(--vw)), 20px);
}
#case .case__box .company-profile-container .company-profile p.profile .indent {
  display: inline-block;
  padding-left: 3.35em;
  text-indent: -3.35em;
}
#case .case__box .case-text {
  text-align: left;
  font-size: clamp(14.5px, calc(16 * var(--vw)), 16px);
  background-color: #fffdec;
  border-radius: min(calc(15 * var(--vw)), 15px);
  padding: min(calc(20 * var(--vw)), 20px);
}
@media (max-width: 767px) {
  #case .case__bg-container {
    /* font-size: min(2.5vw, 16px); */
    background-color: var(--base-color);
    padding: min(5vw, 25px) min(4vw, 20px);
  }
  #case .case__box {
    width: 100%;
    max-width: 600px;
    padding: min(4vw, 20px) min(3vw, 15px);
    margin: 0 auto min(5vw, 25px);
  }
  #case .case__box .title-container {
    /* display: flex;
    flex-wrap: wrap; */
    /* align-items: center;
  margin-bottom: min(calc(40 * var(--vw)), 40px); */
    align-items: flex-start;
    margin-bottom: min(4vw, 20px);
  }
  /* #case .case__box.reverse .title-container {
    flex-direction: row-reverse;
  } */
  #case .case__box .title-container .number-box {
    width: 17.5%;
    border-right: min(1vw, 2px) solid #000;
    padding-right: min(3vw, 15px);
  }
  #case .case__box.reverse .title-container .number-box {
    border-left: min(1vw, 2px) solid #000;
    padding-left: min(3vw, 15px);
  }
  #case .case__box .title-container .number-box .case {
    display: inline-block;
    font-size: 1em;
    margin-bottom: min(1vw, 5px);
  }
  #case .case__box .title-container h3 {
    font-size: 1.25em;
  }
  #case .case__box .title-container .number-box .number {
    font-size: 1.7em;
  }
  #case .case__box.case1 .title-container .number-box .number {
    margin-left: min(1vw, 5px);
  }
  #case .case__box .title-container h3 {
    width: calc(100% - (17.5% + min(1vw, 2px)));
    padding-left: min(3vw, 15px);
  }
  #case .case__box.reverse .title-container h3 {
    padding-right: min(3vw, 15px);
  }
  #case .case__box .company-profile-container {
    display: block;
    padding: 0;
    margin-bottom: 0;
  }
  #case .case__box .company-profile-container .company-img-box {
    width: 100%;
    margin-bottom: min(4vw, 20px);
  }
  #case .case__box .company-profile-container .company-profile {
    width: 100%;
    padding-left: 0;
  }
  #case .case__box.reverse .company-profile-container .company-profile {
    padding-right: 0;
  }
  /* #case .case__box .company-profile-container .title-container {
    display: none;
  } */
  #case .case__box .company-profile-container .company-profile .logo-box {
    width: min(60vw, 300px);
  }
  #case
    .case__box
    .company-profile-container
    .company-profile
    .logo-box#sekisui {
    width: min(30vw, 150px);
    margin-bottom: min(4vw, 20px);
  }
  #case
    .case__box
    .company-profile-container
    .company-profile
    .logo-box#nisshin {
    margin: min(4vw, 20px) 0;
  }
  #case
    .case__box
    .company-profile-container
    .company-profile
    .company-name-container {
    margin: 0;
  }
  #case
    .case__box
    .company-profile-container
    .company-profile
    .company-name-container.is_pc {
    display: none;
  }
  #case
    .case__box
    .company-profile-container
    .company-profile
    .company-name-container
    .office-icon-box {
    width: min(8vw, 40px);
    aspect-ratio: 1;
    margin-right: min(2vw, 10px);
  }
  #case .case__box .company-profile-container .company-profile p.profile {
    margin-bottom: min(4vw, 20px);
  }
  #case .case__box .case-text {
    font-size: min(4vw, 16px);
    padding: min(2vw, 10px) min(3vw, 15px);
    background-color: #fffdec;
  }
  /* アコーディオン */
  .accordion {
    max-width: 1000px;
    /* border: 2px solid #dddddd; */
    border-radius: 5px;
    margin: 0 auto;
  }

  .accordion summary {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    color: #333;
    font-size: 0.8em;
    font-weight: bold;
    cursor: pointer;
    padding: min(2vw, 10px) min(3vw, 15px) min(2vw, 10px);
  }

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

  .accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: min(2vw, 10px);
    height: min(2vw, 10px);
    margin-left: min(3vw, 15px);
    border-bottom: 2.5px solid #c2c2c2;
    border-right: 2.5px solid #c2c2c2;
    content: "";
    transition: transform 0.3s;
  }

  .accordion[open] summary::after {
    transform: rotate(225deg);
  }

  .accordion p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    color: #333333;
    text-align: left;
    transition:
      transform 0.5s,
      opacity 0.5s;
  }

  .accordion[open] p {
    transform: none;
    opacity: 1;
  }
}
/* ====================================
#voice お客様の声
==================================== */
#voice .voice__inner {
  padding: 0 min(calc(20 * var(--vw)), 20px);
  margin: 0 auto;
}
#voice .voice__inner .voice__box {
  position: relative;
  width: 90%;
  text-align: left;
  background-color: #fff;
  border: min(calc(5 * var(--vw)), 5px) solid var(--main-color);
  border-radius: min(calc(15 * var(--vw)), 15px);
  padding: min(calc(60 * var(--vw)), 60px) min(calc(55 * var(--vw)), 55px);
  margin: 0 auto min(calc(75 * var(--vw)), 75px) 0;
}
#voice .voice__inner .voice__box.reverse {
  margin: 0 0 min(calc(75 * var(--vw)), 75px) auto;
}
#voice .voice__inner .voice__box h3 {
  font-size: 25px;
  margin-bottom: min(calc(40 * var(--vw)), 40px);
}
#voice .voice__inner .voice__box .img-box {
  position: absolute;
}
#voice .voice__inner .voice__box .img-box.woman {
  right: -5%;
  bottom: -13%;
  width: min(calc(120 * var(--vw)), 120px);
}
#voice .voice__inner .voice__box .img-box.man1 {
  left: -15%;
  bottom: -13%;
  width: min(calc(180 * var(--vw)), 180px);
}
#voice .voice__inner .voice__box .img-box.man2 {
  right: -15%;
  bottom: -9%;
  width: min(calc(180 * var(--vw)), 180px);
}
#voice .voice__inner .voice__box p {
  font-size: 16px;
}
@media (max-width: 767px) {
  #voice .voice__inner {
    width: 100%;
    max-width: 600px;
    padding: 0 min(4vw, 20px);
  }
  #voice .voice__inner .voice__box {
    width: 95%;
    border: min(1vw, 2px) solid var(--main-color);
    border-radius: min(2vw, 10px);
    margin: 0 auto min(15vw, 75px) 0;
  }
  #voice .voice__inner .voice__box.voice1 {
    padding: min(5vw, 25px) min(8vw, 40px);
  }
  #voice .voice__inner .voice__box.voice2 {
    padding: min(5vw, 25px) min(12vw, 60px);
    margin: 0 0 min(15vw, 75px) auto;
  }
  #voice .voice__inner .voice__box.voice3 {
    padding: min(5vw, 25px) min(12vw, 60px);
  }
  #voice .voice__inner .voice__box h3 {
    font-size: 1.25em;
    margin-bottom: min(4vw, 20px);
  }
  #voice .voice__inner .voice__box .img-box.woman {
    right: -7.5%;
    bottom: -9%;
    width: min(16vw, 80px);
  }
  #voice .voice__inner .voice__box .img-box.man1 {
    left: -9%;
    bottom: -10%;
    width: min(20vw, 100px);
  }
  #voice .voice__inner .voice__box .img-box.man2 {
    right: -7.5%;
    bottom: -9%;
    width: min(20vw, 100px);
  }
  #voice .voice__inner .voice__box p {
    font-size: min(4vw, 16px);
  }
}
/* ====================================
CTA
==================================== */
.cta {
  color: #fff;
  text-align: left;
  background: linear-gradient(90deg, #68a4c9, var(--main-color));
  margin-bottom: min(calc(50 * var(--vw)), 50px);
}
/* .cta.trial {
  padding: min(calc(20 * var(--vw)), 20px) 0 0;
} */
.cta h2 {
  font-size: min(calc(45 * var(--vw)), 45px);
  margin-bottom: min(calc(25 * var(--vw)), 25px);
}
.cta.trial h2 {
  width: min(calc(1120 * var(--vw)), 1120px);
  padding: min(calc(50 * var(--vw)), 50px) 0 min(calc(25 * var(--vw)), 25px);
  margin: 0 auto;
}
.cta .cta__inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  /* padding: min(calc(20 * var(--vw)), 20px) 0 0; */
  margin: 0 auto;
}
.cta .cta__inner.reverse {
  flex-direction: row-reverse;
  align-items: flex-start;
  padding: 0 0 min(calc(40 * var(--vw)), 40px);
}
.cta .cta__inner .img-box {
  width: min(calc(325 * var(--vw)), 325px);
  margin-left: 2.5%;
}
.cta .cta__inner .img-box img:not(.cta__inner.reverse img) {
  box-shadow: rgb(51 51 51 / 50%) min(2vw, 10px) max(-1vw, -5px) min(2vw, 10px);
}
.cta .cta__inner .text-box {
  width: 57%;
  padding: min(calc(50 * var(--vw)), 50px) 0;
}
.cta .cta__inner.reverse .img-box {
  width: min(calc(600 * var(--vw)), 600px);
  aspect-ratio: 2/1.2;
  margin-left: 0;
}
.cta .cta__inner.reverse .text-box {
  width: auto;
  padding: 0;
}
/* .cta .cta__inner .text-box h2 {
  font-size: min(calc(55 * var(--vw)), 55px);
  margin-bottom: min(calc(40 * var(--vw)), 40px);
} */
.cta .cta__inner .text-box p {
  font-size: min(calc(25 * var(--vw)), 25px);
  font-weight: bold;
  margin-left: min(calc(5 * var(--vw)), 5px);
  margin-bottom: min(calc(75 * var(--vw)), 75px);
}
.cta .cta__inner .text-box button {
  position: relative;
  display: block;
  width: min(calc(450 * var(--vw)), 450px);
  padding: 0;
  margin: 0;
}
.cta .cta__inner.reverse .text-box button {
  width: min(calc(500 * var(--vw)), 500px);
  margin-top: min(calc(190 * var(--vw)), 190px);
}
.cta .cta__inner .text-box button a {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  color: #000;
  font-size: min(calc(25 * var(--vw)), 25px);
  font-weight: bold;
  padding: min(calc(15 * var(--vw)), 15px) min(calc(30 * var(--vw)), 30px);
  border: min(calc(5 * var(--vw)), 5px) solid var(--base-color);
  border-radius: 50px;
  background-color: #fff;
}
.cta .cta__inner .text-box button .icon {
  width: min(calc(40 * var(--vw)), 40px);
  aspect-ratio: 1;
  object-fit: contain;
}
@media (max-width: 767px) {
  .cta {
    margin-bottom: min(5vw, 25px);
  }
  .cta.trial {
    padding: min(8vw, 40px) 0 min(4vw, 20px) min(4vw, 20px);
  }
  .cta.trial h2 {
    width: 100%;
    max-width: 620px;
    font-size: min(4.5vw, 22.5px);
    padding: 0;
  }
  .cta .cta__inner {
    width: 100%;
    max-width: 620px;
    justify-content: space-around;
    padding: min(4vw, 20px) min(4vw, 20px) 0;
    margin: 0 auto;
  }
  .cta.trial .cta__inner {
    padding: 0;
  }
  .cta .cta__inner.reverse {
    justify-content: space-between;
    align-items: flex-end;
  }
  .cta .cta__inner .img-box {
    width: min(35vw, 200px);
    margin-left: 0;
  }
  .cta .cta__inner .text-box {
    width: 60%;
    padding: min(4vw, 20px) 0 min(10vw, 50px) min(4vw, 20px);
  }
  .cta .cta__inner.reverse .img-box {
    width: min(55vw, 400px);
  }
  .cta .cta__inner.reverse .text-box {
    width: 55%;
    padding: min(4vw, 20px) 0;
  }
  .cta .cta__inner .text-box h2 {
    font-size: min(4.5vw, 22.5px);
    margin-bottom: min(4vw, 20px);
  }
  .cta .cta__inner.reverse .text-box h2.is_pc {
    display: none;
  }
  .cta .cta__inner .text-box p {
    font-size: min(3vw, 15px);
    margin-left: min(1vw, 5px);
    margin-bottom: min(8vw, 40px);
  }
  .cta .cta__inner .text-box button {
    width: 100%;
    max-width: 250px;
  }
  .cta .cta__inner.reverse .text-box button {
    width: min(45vw, 250px);
    text-align: left;
  }
  .cta .cta__inner .text-box button a {
    font-size: min(4vw, 16px);
    padding: min(2vw, 10px) 0 min(2vw, 10px) min(2vw, 10px);
    border: min(1vw, 2px) solid var(--base-color);
  }
  .cta .cta__inner .text-box button .icon {
    width: min(5vw, 25px);
  }
}
/* ====================================
footer
==================================== */
#footer {
  margin: min(calc(100 * var(--vw)), 100px) 0 min(calc(80 * var(--vw)), 80px);
}
#footer .footer__logo-box {
  width: min(calc(500 * var(--vw)), 500px);
  aspect-ratio: 2.5/1;
  margin: 0 auto min(calc(20 * var(--vw)), 20px);
}
#footer small {
  font-size: 16px;
}
@media (max-width: 767px) {
  #footer {
    margin: min(15vw, 75px) 0;
  }
  #footer .footer__logo-box {
    width: min(60vw, 300px);
    aspect-ratio: 2.5/1;
    margin: 0 auto min(4vw, 20px);
  }
  #footer small {
    font-size: min(3vw, 15px);
  }
}
/* ====================================
.floating-cta 追従型CTA
==================================== */
.floating-cta {
  position: fixed;
  right: min(4vw, 20px);
  width: 100%;
  max-width: clamp(100px, calc(150 * var(--note-vw)), 150px);

  /* 非表示アニメーション用 */
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
  z-index: 99999;
}
.floating-cta:has(button.download) {
  bottom: calc(
    clamp(100px, calc(150 * var(--note-vw)), 150px) + min(7vw, 35px) +
      env(safe-area-inset-bottom)
  ); /* スマホのセーフエリア対策 */
}
.floating-cta:has(button.contact) {
  bottom: calc(
    min(5vw, 25px) + env(safe-area-inset-bottom)
  ); /* スマホのセーフエリア対策 */
}
.floating-cta:has(a:hover) {
  opacity: 0.5;
}
/* 非表示クラス */
.floating-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  /* スッと下に消える演出 */
  /* transform: translate(-50%, 20px);  */
  pointer-events: none;
}
/* 閉じるボタン（右上配置） */
.floating-cta__close {
  position: absolute;
  top: max(calc(-5 * var(--note-vw)), -5px);
  right: min(calc(5 * var(--note-vw)), 5px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(calc(35 * var(--note-vw)), 35px);
  aspect-ratio: 1;
  background-color: #fff;
  color: #333;
  font-size: clamp(16px, calc(20 * var(--note-vw)), 20px);
  line-height: 1;
  cursor: pointer;
  border: 2px solid var(--main-color);
  border-radius: 50%;
  padding: 0;
  z-index: 10;
}
.floating-cta__close:hover {
  background-color: #ddd;
}
.floating-cta__button {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  margin: 0 auto;
  z-index: 5;
}
.floating-cta__button a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: min(1vw, 5px);
  width: 100%;
  height: 100%;
  color: var(--main-color);
  font-size: min(calc(15 * var(--note-vw)), 15px);
  font-weight: bold;
  padding: min(calc(16 * var(--note-vw)), 16px)
    min(calc(25 * var(--note-vw)), 25px) min(calc(25 * var(--note-vw)), 25px);
  background-color: #fff;
  border-radius: 50%;
  border: min(calc(3 * var(--note-vw)), 3px) solid var(--main-color);
  border-radius: 50%;
}
.floating-cta__button a:hover {
  opacity: 1;
}
.floating-cta__button.contact a {
  gap: 0;
  color: #fff;
  background-color: var(--main-color);
  padding: min(calc(15 * var(--note-vw)), 15px)
    min(calc(25 * var(--note-vw)), 25px) min(calc(25 * var(--note-vw)), 25px);
}
.floating-cta__button .img-box {
  width: 85%;
  aspect-ratio: 1.25/1;
}
.floating-cta__button .img-box .img {
  width: auto;
  object-fit: contain;
  border: 1px solid #333;
}
.floating-cta__button.contact .img {
  width: 85%;
  height: auto;
  aspect-ratio: 1.25/1;
  object-fit: contain;
  object-position: bottom;
}
@media (max-width: 767px) {
  .floating-cta {
    right: 0;
    bottom: calc(0px + env(safe-area-inset-bottom)) !important;
    width: 100%;
    max-width: none;
    /* background-color: #fff;
    border: 1px solid #ddd; */
    padding: 0 min(2vw, 10px) min(1vw, 5px);
  }
  .floating-cta:has(a:hover) {
    opacity: 1;
  }
  /* .floating-cta__lead-text {
    font-weight: 600;
    font-size: min(2.5vw, 15px);
    margin-bottom: min(2vw, 10px);
  } */
  /* .floating-cta__close {
    top: max(-2.5vw, -10px);
    right: min(2.5vw, 10px);
    width: min(4vw, 20px);
    font-size: min(3vw, 15px);
    border: 1px solid #ddd;
  } */
  .floating-cta__button-container {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .floating-cta__button {
    width: calc((100% - min(2vw, 10px)) / 2);
    aspect-ratio: inherit;
  }
  .floating-cta__button a,
  .floating-cta__button.contact a {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    max-height: 50px;
    font-size: clamp(10px, 3.2vw, 16px);
    line-height: 1;
    padding: min(3vw, 15px) min(4vw, 40px);
    border-radius: min(1vw, 5px);
  }
  .floating-cta__button a:hover {
    opacity: 0.5;
  }
  .floating-cta__button.contact a {
    border: 1px solid #fff;
  }
  .floating-cta__button.download a .button-text,
  .floating-cta__button.download a img.icon {
    display: inline-block;
  }
  .floating-cta__button .img-box {
    width: min(9vw, 45px);
  }
  .floating-cta__button .img-box .img {
    border: 0.5px solid #333;
  }
  .floating-cta__button.contact .img-box .img {
    border: none;
    aspect-ratio: inherit;
    vertical-align: bottom;
    margin: 0 auto;
  }
  .floating-cta__button a img.icon {
    width: min(3.5vw, 20px);
    aspect-ratio: 1;
  }
}