@charset "utf-8";

/*-------------------------
　header
-------------------------*/

.header {
  max-width: 100vw;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.header-logo {
  width: 16.56rem;
}

@media screen and (max-width: 1200px) {
  .header-inner {
    padding: clamp(0.5rem, 0.045rem + 1.94vw, 1.5rem) 0;
  }
  .header-logo {
    width: clamp(5.875rem, 1.018rem + 20.72vw, 16.56rem);
  }
}

/*-------------------------
　hero
-------------------------*/

.hero {
  background-image: url("/images/fv@2x.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 7.5%;
  padding-bottom: 4.6%;
  background-position: top right;
  position: relative;
  z-index: 1;
}

.hero .fusen-wrapper {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hero .fusen {
  display: inline-block;
  position: relative;
  font-size: 18px;
  padding: 8px 55px;
  border-left: 15px solid #f68c1c;
  background-color: #fff;
  font-weight: bold;
  line-height: 2;
}

.hero .fusen:nth-child(2) {
  left: 0;
  padding: 6px 32px 6px 40px;
}

.hero .fusen:nth-child(3) {
  left: -4px;
}

.hero .fusen::after {
  position: absolute;
  bottom: -3px;
  right: -7px;
  transform: rotate(3deg);
  width: 132px;
  height: 47px;
  background-color: #005c75;
  content: "";
  filter: blur(1px);
  z-index: -1;
}

.hero h1 {
  padding-top: 32px;
  font-size: 72px;
  font-weight: bold;
  color: #fff;
  line-height: 1.33;
  text-shadow: 3px 4px #005c75;
  letter-spacing: 0.048em;
}

.hero .sub-title {
  position: relative;
  left: -150px;
  letter-spacing: 0.05em;
  padding: 10px 0;
  padding-left: 150px;
  margin-top: 32px;
  font-size: 32px;
  font-weight: bold;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

@media screen and (max-width: 1200px) {
  .hero {
    padding-top: 12%;
  }

  .hero .fusen-wrapper {
    gap: clamp(0.5rem, 0.045rem + 1.94vw, 1.5rem);
  }

  .hero .fusen {
    line-height: 1.7;
    font-size: clamp(0.625rem, 0.398rem + 0.97vw, 1.125rem);
    padding: clamp(0.25rem, 0.136rem + 0.48vw, 0.5rem) clamp(0.938rem, -0.199rem + 4.85vw, 3.438rem);
    border-left: clamp(0.313rem, 0.028rem + 1.21vw, 0.938rem) solid #f68c1c;
  }

  .hero .fusen:nth-child(2) {
    padding: clamp(0.25rem, 0.136rem + 0.48vw, 0.5rem) clamp(0.25rem, -0.773rem + 4.36vw, 2.5rem) clamp(0.25rem, 0.136rem + 0.48vw, 0.5rem) clamp(0.25rem, -0.773rem + 4.36vw, 2.5rem);
  }

  .hero .fusen:nth-child(3) {
    left: 4px;
  }

  .hero .fusen::after {
    width: clamp(3rem, 0.614rem + 10.18vw, 8.25rem);
    height: clamp(1.063rem, 0.21rem + 3.64vw, 2.938rem);
  }

  .hero h1 {
    line-height: 1.375;
    text-shadow: 2px 2px #005c75;
    font-size: clamp(1.5rem, 0.136rem + 5.82vw, 4.5rem);
    padding-top: clamp(0.938rem, 0.455rem + 2.06vw, 2rem);
  }
  .hero .sub-title {
    width: 100%;
    line-height: 1.4;
    padding-left: 0;
    left: 0;
    text-align: center;
    margin-top: clamp(0.313rem, 0.17rem + 0.61vw, 0.625rem);
    padding: clamp(0.313rem, 0.17rem + 0.61vw, 0.625rem) 0;
    font-size: clamp(0.625rem, 2.67vw, 2rem);
  }
}

@media screen and (max-width: 768px) {
  .hero {
    background-image: url(/images/fv_sp@2x.png);
    background-position: top right;
  }
  .hero .fusen {
    line-height: 1.4;
  }

  .hero .fusen::after {
    bottom: calc(clamp(0.063rem, 0.017rem + 0.23vw, 0.188rem) * -1);
    right: calc(clamp(0.188rem, 0.097rem + 0.45vw, 0.438rem) * -1);
  }
}

/*-------------------------
　request
-------------------------*/
.request {
  background: repeating-linear-gradient(-65deg, #3199a8, #3199a8 10px, #379fae 10px, #379fae 20px);
}

.request-inner {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}

.request-inner p {
  text-align: center;
  letter-spacing: 0.05em;
  font-size: 24px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 30px;
}

.sp_br {
  display: none;
}

@media screen and (max-width: 1200px) {
  .request-inner {
    padding-top: clamp(1.625rem, 0.852rem + 3.86vw, 3.75rem); /* min:26px */
    padding-bottom: clamp(1.5rem, 0.682rem + 4.09vw, 3.75rem); /* min:24px */
  }

  .request-inner p {
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem); /* min:16px */
    line-height: 1.5;
    margin-bottom: clamp(0.563rem, 0.085rem + 2.39vw, 1.875rem);
  }

  .request-inner p > span {
    display: inline-block;
  }
}

@media screen and (max-width: 1200px) {
  .sp_br {
    display: block;
  }
}

/*-------------------------
　worries
-------------------------*/
.worries {
  padding-top: 156px;
  text-align: center;
}

.woories-flow-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
}

.woories-flow {
  text-align: center;
  padding-top: 48px;
}

.woories-flow p {
  width: 100%;
  font-size: 24px;
  padding: 15px 120px;
  border-radius: 48px;
  line-height: 1.3;
  background-color: #d6ebee;
  margin-bottom: 26px;
  white-space: nowrap;
}

.woories-flow p:nth-child(1) {
  background-color: #339baa;
  color: #fff;
  position: relative;
  margin-bottom: 50px;
  text-align: center;
}

.woories-flow p:nth-child(1)::after {
  position: absolute;
  content: "";
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 48px solid #339baa;
}

.worries h3 {
  display: inline-block;
  margin-top: 34px;
  color: #339baa;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.125;
}

.worries .sub-text {
  margin-top: 22px;
  line-height: 1.5;
}

.worries-border-img {
  display: block;
  margin: 0 auto;
  width: 1100px;
  height: 5px;
}

.sp_br-merit {
  display: none;
}

.sp-border-img {
  display: none;
}

@media screen and (max-width: 1200px) {
  .worries {
    padding-top: clamp(2.063rem, -0.733rem + 13.98vw, 9.75rem); /* min:33px */
  }

  .woories-flow {
    padding-top: clamp(1.688rem, 1.21rem + 2.39vw, 3rem); /* min:27px */
  }

  .woories-flow p {
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem); /* min:16px */
    padding: clamp(0.375rem, 0.17rem + 1.02vw, 0.938rem) clamp(2.625rem, 0.852rem + 8.86vw, 7.5rem);
    /* min:6px  42px*/
    margin-bottom: clamp(0.5rem, 0.091rem + 2.05vw, 1.625rem); /* min:8px */
  }
  .woories-flow p:nth-child(1) {
    margin-bottom: clamp(1.5rem, 0.909rem + 2.95vw, 3.125rem); /* min:24px */
  }

  .woories-flow p:nth-child(1)::after {
    bottom: calc(clamp(1rem, 0.636rem + 1.82vw, 2rem) * -1);
    border-left: clamp(0.5rem, 0.227rem + 1.36vw, 1.25rem) solid transparent; /* min:8px */
    border-right: clamp(0.5rem, 0.227rem + 1.36vw, 1.25rem) solid transparent; /* min:8px */
    border-top: clamp(1rem, 0.273rem + 3.64vw, 3rem) solid #339baa;
  }

  .worries h3 {
    margin-top: clamp(1.625rem, 1.443rem + 0.91vw, 2.125rem); /* min:26px */
    font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem) /* min:18px */;
  }

  .worries .sub-text {
    margin-top: 22px;
  }
}

@media screen and (max-width: 1000px) {
  .woories-flow-wrapper img {
    display: none;
  }

  .woories-flow {
    width: 90%;
  }

  .worries-border-img {
    display: none;
  }

  .pc_br {
    display: none;
  }
  .sp_br-merit {
    display: inline-block;
  }

  .worries h3 {
    line-height: 1;
  }

  .sp-border-img {
    display: block;
    height: 3px;
    margin: 0 auto;
  }

  .worries h3 .sp-border-img:nth-of-type(1) {
    width: clamp(19.625rem, 14.807rem + 24.09vw, 32.875rem);
  }

  .worries h3 .sp-border-img:nth-of-type(2) {
    width: clamp(15.875rem, 11.966rem + 19.55vw, 26.625rem);
  }

  .worries h3 .sp-border-img:nth-of-type(3) {
    width: clamp(13.063rem, 10.403rem + 13.3vw, 20.375rem);
  }
}

@media screen and (max-width: 768px) {
  .woories-flow {
    width: 95%;
  }
}

@media screen and (max-width: 480px) {
  .woories-flow {
    width: 100%;
    white-space: inherit;
  }
}

/*-------------------------
  merit
-------------------------*/
.merit {
  padding-top: 153px;
  padding-bottom: 150px;
}

.merit-wrapper {
  padding-top: 86px;
  display: flex;
  gap: 24px;
}

.merit-box {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  padding: 74px 24px;
  border: 2px solid #339baa;
  border-radius: 20px;
  box-shadow: 3px 3px 6px rgba(130, 130, 130, 0.5);
  position: relative;
}

/* 番号のベース */
.merit-box::before {
  position: absolute;
  content: "";
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
}

/* それぞれの番号の写真 */
.merit-box:nth-child(1)::before {
  background-image: url(../images/01@2x.png);
}

.merit-box:nth-child(2)::before {
  background-image: url(../images/02@2x.png);
}

.merit-box:nth-child(3)::before {
  background-image: url(../images/03@2x.png);
}

/* 白の背景 */
.merit-box::after {
  position: absolute;
  content: "";
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 72px;
  background-color: #fff;
  z-index: 1;
}

.merit-box:nth-child(1) h3,
.merit-box:nth-child(2) h3,
.merit-box:nth-child(3) h3 {
  min-height: 128px;
}

.merit-box h3 {
  color: #339baa;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.34;
  text-align: center;
  margin-bottom: 39px;
  display: flex;
  align-items: center;
}

.merit-box p {
  font-size: 18px;
  margin-top: 34px;
  line-height: 1.5;
}

@media screen and (max-width: 1200px) {
  .merit {
    padding-top: clamp(4.688rem, 2.915rem + 8.86vw, 9.563rem); /* min:75px */
    padding-bottom: clamp(4rem, 2.045rem + 9.77vw, 9.375rem);
  }
}

@media screen and (max-width: 1000px) {
  .merit-wrapper {
    flex-direction: column;
    padding-top: clamp(3.438rem, 2.733rem + 3.52vw, 5.375rem); /* min:55px */
    gap: 54px;
    width: 80%;
    margin: 0 auto;
  }

  .merit-box {
    padding: clamp(2.375rem, 1.557rem + 4.09vw, 4.625rem) clamp(0.75rem, 0.477rem + 1.36vw, 1.5rem);
  }

  .merit-box img {
    width: clamp(11.438rem, 8.642rem + 13.98vw, 19.125rem); /* min:183px */
  }

  .merit-box::before {
    top: -36px;
    width: clamp(3.625rem, 3.307rem + 1.59vw, 4.5rem); /* min:58px */
    height: clamp(3.625rem, 3.307rem + 1.59vw, 4.5rem); /* min:58px */
  }

  .merit-box::after {
    top: -36px;
    width: clamp(4.375rem, 4.057rem + 1.59vw, 5.25rem); /* min:70px */
    height: clamp(3.625rem, 3.307rem + 1.59vw, 4.5rem); /* min:58px */
  }

  .merit-box:nth-child(1) h3,
  .merit-box:nth-child(2) h3,
  .merit-box:nth-child(3) h3 {
    min-height: 0;
  }

  .merit-box h3 {
    font-size: clamp(1.25rem, 0.977rem + 1.36vw, 2rem); /* min:20px */
    margin-bottom: clamp(0.75rem, 0.136rem + 3.07vw, 2.438rem); /* min:12px */
  }

  .merit-box p {
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem); /* min:16px */
    margin-top: clamp(0.625rem, 0.08rem + 2.73vw, 2.125rem);
  }
}

@media screen and (max-width: 768px) {
  .merit-wrapper {
    width: 88%;
  }
}

@media screen and (max-width: 480px) {
  .merit-wrapper {
    width: 100%;
  }
}

/*-------------------------
　utilization
-------------------------*/
.utilization {
  background-color: #feffe0;
  padding-top: 154px;
}

.utilization .sub-text {
  text-align: center;
  padding-top: 52px;
  font-size: 18px;
  line-height: 1.5;
}

.utilization .utilization-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 48px;
}

.utilization .utilization-item {
  background-color: #fff;
  border-radius: 15px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 3px 3px 6px rgba(130, 130, 130, 0.5);
}

.utilization .utilization-item:last-child {
  margin-bottom: 0;
}

.utilization .utilization-item p {
  padding-top: 27px;
  line-height: 1.5;
}

.utilization .utilization-item-inner {
  border-radius: 15px;
  border: 2px solid #339baa;
  display: flex;
  align-items: flex-start;
  padding: 22px 60px;
  gap: 76px;
}

.utilization h3 {
  font-size: 32px;
  font-weight: bold;
  color: #339baa;
  line-height: 1.34;
}

.utilization-item-inner img {
  display: block;
}

.sp-only-img {
  display: none;
}

@media screen and (max-width: 1200px) {
  .utilization {
    padding-top: clamp(4.063rem, 2.04rem + 10.11vw, 9.625rem); /* min:65px */
  }

  .utilization .sub-text {
    padding-top: clamp(1.688rem, 1.119rem + 2.84vw, 3.25rem); /* min:27px */
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem); /* min:16px */
  }

  .utilization .utilization-wrapper {
    padding-top: clamp(2.125rem, 1.807rem + 1.59vw, 3rem); /* min:34px */
  }

  .utilization .utilization-item-inner {
    padding: 22px 32px;
  }

  .utilization .utilization-item-inner img {
    width: clamp(11.438rem, 10.415rem + 5.11vw, 14.25rem);
  }

  .utilization h3 {
    font-size: clamp(1.25rem, 0.977rem + 1.36vw, 2rem);
  }
}

@media screen and (max-width: 1000px) {
  .utilization .utilization-wrapper {
    width: 80%;
    margin: 0 auto;
  }

  .utilization-item-inner > img {
    display: none;
  }

  .utilization .sp-only-img {
    display: block;
    width: clamp(11.438rem, 10.415rem + 5.11vw, 14.25rem);
    object-fit: contain;
  }

  .utilization .sp-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }

  .utilization-item-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .utilization .utilization-item p {
    padding-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .utilization .utilization-wrapper {
    width: 88%;
  }
}

@media screen and (max-width: 480px) {
  .utilization .utilization-wrapper {
    width: 100%;
  }
}

/*-------------------------
　development
-------------------------*/
.development {
  background-color: #feffe0;
  padding-top: 154px;
}

.development .sub-text {
  text-align: center;
  font-size: 18px;
  padding-top: 52px;
  line-height: 1.5;
}

.development .development-container {
  display: flex;
  justify-content: center;
  padding-top: 47px;
  gap: 24px;
}

.development .development-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px solid #339baa;
  background-color: #fff;
  border-radius: 20px;
  padding: 44px 48px 84px 48px;
  box-shadow: 3px 3px 6px rgba(130, 130, 130, 0.5);
}

.development .development-item h3 {
  display: flex;
  align-items: center;
  height: 89px;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.33;
  margin-top: 14px;
}

.development .development-tag {
  color: #339baa;
  line-height: 1.5;
  font-size: 18px;
  letter-spacing: 0.06em;
  display: inline-block;
  border: 2px solid #339baa;
  padding: 6px 14px;
  border-radius: 10px;
}

.development .development-item-text {
  margin-top: 30px;
  padding: 0 12px;
}

@media screen and (max-width: 1200px) {
  .development {
    padding-top: clamp(4.063rem, 2.04rem + 10.11vw, 9.625rem); /* min:65px */
  }

  .development .sub-text {
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem); /* min:16px */
    padding-top: clamp(1.688rem, 1.119rem + 2.84vw, 3.25rem); /* min:27px */
  }

  .development .development-container {
    padding-top: clamp(2.125rem, 1.83rem + 1.48vw, 2.938rem);
  }

  .development .development-item h3 {
    height: clamp(3.375rem, 2.58rem + 3.98vw, 5.563rem);
    font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  }

  .development .development-tag {
    font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  }
}

@media screen and (max-width: 1000px) {
  .development .development-container {
    flex-direction: column;
  }

  .development .development-item {
    width: 80%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .development .development-item {
    width: 88%;
  }
}

@media screen and (max-width: 480px) {
  .development .development-item {
    width: 100%;
  }
}

/*-------------------------
　release-flow
-------------------------*/

.release-flow {
  background-color: #feffe0;
  padding-top: 154px;
  padding-bottom: 150px;
}

.release-flow .sub-text {
  text-align: center;
  font-size: 18px;
  padding-top: 34px;
  line-height: 1.5;
}

.release-flow-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;
}

.release-flow-header .arrow {
  color: #fff;
  position: relative;
  width: 240px;
  height: 80px;
  background: #113338;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.release-flow-header .arrow::after {
  content: "";
  position: absolute;
  right: -89px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 30px solid #113338;
  border-right: 0;
  color: #113338;
  border-left-width: 15px;
  right: -15px;
  z-index: 5;
}

.release-flow-header .arrow:nth-child(2) {
  padding-left: 28px;
  background: #1c565e;
  line-height: 1.33;
}

.release-flow-header .arrow:nth-child(2)::after {
  border-left: 30px solid #1c565e;
  color: #1c565e;
  border-left-width: 15px;
  right: -15px;
  z-index: 4;
}

.release-flow-header .arrow:nth-child(3) {
  padding-left: 8px;
  background: #287885;
  line-height: 1.33;
}

.release-flow-header .arrow:nth-child(3)::after {
  border-left: 30px solid #287885;
  color: #287885;
  border-left-width: 15px;
  right: -15px;
  z-index: 3;
}

.release-flow-header .arrow:nth-child(4) {
  padding-left: 8px;
  background: #339bab;
  line-height: 1.33;
}

.release-flow-header .arrow:nth-child(4)::after {
  border-left: 30px solid #339bab;
  color: #339bab;
  border-left-width: 15px;
  right: -14px;
  z-index: 2;
}

.release-flow-header .arrow:nth-child(5) {
  padding-left: 8px;
  background: #3fbed1;
  line-height: 1.33;
}

.release-flow-header .arrow:nth-child(5)::after {
  border-left: 30px solid #3fbed1;
  color: #3fbed1;
  border-left-width: 15px;
  right: -15px;
  z-index: 1;
}

@media screen and (max-width: 1200px) {
  .release-flow {
    padding-top: clamp(4.063rem, 2.04rem + 10.11vw, 9.625rem);
    padding-bottom: clamp(4rem, 1.955rem + 10.23vw, 9.625rem);
  }

  .release-flow .sub-text {
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
    padding-top: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  }

  .release-flow-header {
    display: none;
  }
}

@media screen and (max-width: 1000px) {
}

/*-------------------------
　release-flow-content
-------------------------*/

.release-flow-content {
  padding-top: 48px;
}

.release-flow-item {
  background: #fff;
  padding: 16px;
  border-radius: 20px;
  filter: drop-shadow(3px 3px 6px rgba(130, 130, 130, 0.5));
  margin-bottom: 22px;
  position: relative;
  z-index: 6;
}

.release-flow-item .background-number {
  position: absolute;
  bottom: 4px;
  right: 74px;
  font-size: 200px;
  color: rgba(246, 140, 28, 0.1);
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  z-index: 0;
}

/* 矢印が重なる部分の白背景(z-indexで調整) */
.release-flow-item:nth-child(2) {
  z-index: 5;
}

.release-flow-item:nth-child(2)::after,
.release-flow-item:nth-child(3)::after,
.release-flow-item:nth-child(4)::after,
.release-flow-item:nth-child(5)::after {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 22px;
  background-color: #fff;
}

.release-flow-item:nth-child(3) {
  z-index: 4;
}

.release-flow-item:nth-child(4) {
  z-index: 3;
}

.release-flow-item:nth-child(5) {
  z-index: 2;
}

/* item下の三角形 */
.release-flow-item::before {
  position: absolute;
  content: "";
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 94px;
  height: 50px;
  background-color: #fff; /* Triangle color */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  z-index: 0;
}

/* 最後の.release-flow-item要素のbefore疑似要素を非表示にする */
.release-flow-item:last-child::before {
  display: none;
}

/* 内側にborder */
.release-flow-inner {
  border: 2px solid #339baa;
  border-radius: 20px;
  display: flex;
  gap: 88px;
  padding: 22px 54px;
  position: relative;
  z-index: 0;
}

/* 内側矢印の緑三角形 */
.release-flow-inner::before {
  position: absolute;
  content: "";
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-top: 48px solid transparent;
  border-top-color: #339baa;
  z-index: 0;
}

/* 内側矢印の白三角形 緑の部分を残してborderとしました。 */
.release-flow-inner::after {
  position: absolute;
  content: "";
  bottom: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-top: 48px solid #fff;
  z-index: 1;
}

/* 最後の.release-flow-inner要素のbeforeおよびafter疑似要素を非表示にする */
.release-flow-item:last-child .release-flow-inner::before,
.release-flow-item:last-child .release-flow-inner::after {
  display: none;
}

.release-flow-item h3 {
  color: #339baa;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.34;
}

.release-flow-item p {
  font-size: 18px;
  padding-top: 27px;
  line-height: 1.5;
}

.release-flow-item p a {
  color: #f68c1c;
  text-decoration: underline;
}

.sp-only-img {
  display: none;
}

@media screen and (max-width: 1200px) {
  .release-flow-content {
    padding-top: clamp(3rem, 2.614rem + 1.93vw, 4.063rem);
  }

  .release-flow-inner {
    padding: clamp(1.063rem, 0.949rem + 0.57vw, 1.375rem) clamp(1.75rem, 1.159rem + 2.95vw, 3.375rem);
  }

  .release-flow-inner img {
    width: clamp(11.438rem, 10.415rem + 5.11vw, 14.25rem);
  }

  .release-flow-item .background-number {
    font-size: clamp(4.5rem, 1.591rem + 14.55vw, 12.5rem);
    right: clamp(1.25rem, 0.023rem + 6.14vw, 4.625rem);
  }

  .release-flow-item h3 {
    font-size: clamp(1.25rem, 0.977rem + 1.36vw, 2rem);
  }

  .release-flow-item p {
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
    padding-top: clamp(0.625rem, 0.239rem + 1.93vw, 1.688rem);
  }
}

@media screen and (max-width: 1000px) {
  .release-flow-inner {
    align-items: center;
  }
}

@media screen and (max-width: 768px) {
  .release-flow-inner > img {
    display: none;
  }
  .release-flow-inner .sp-only-img {
    display: block;
    width: clamp(11.438rem, 10.892rem + 2.73vw, 12.938rem);
    height: clamp(7.5rem, 5.682rem + 9.09vw, 12.5rem);
    object-fit: contain;
  }

  .release-flow-inner .sp-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}
/*-------------------------
　question
-------------------------*/

.question {
  padding-top: 154px;
}
.question-conetnt {
  padding-top: 50px;
  display: flex;
  flex-direction: column;
}

.question-item {
  font-size: 18px;
  border: 2px solid #339baa;
  box-shadow: 3px 3px 6px rgba(130, 130, 130, 0.5);
  border-radius: 20px;
  margin-bottom: 26px;
}

.question-header {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(51, 155, 170, 0.2);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 12px 28px;
}

.question-header img {
  width: 34px;
  height: 34px;
}

.question-answer {
  padding: 24px 40px;
}

@media screen and (max-width: 1200px) {
  .question {
    padding-top: clamp(4.063rem, 2.04rem + 10.11vw, 9.625rem);
  }

  .question-conetnt {
    padding-top: clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem);
  }

  .question-item {
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
    margin-bottom: clamp(1.5rem, 1.455rem + 0.23vw, 1.625rem);
  }

  .question-header {
    gap: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
    padding: 18px 28px;
  }
}

/*-------------------------
　contact
-------------------------*/

.contact {
  padding-top: 136px;
  padding-bottom: 57px;
}

.contact-header {
  padding: 0 24px;
}

.contact .sub-title {
  font-size: 18px;
  text-align: center;
  padding-top: 47px;
  line-height: 1.33;
  letter-spacing: 0.005em;
  padding-bottom: 57px;
}

.form-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #eff6f7;
}

form {
  margin: 0 auto;
  max-width: 842px;
  padding: 64px 24px;
}

.form-group {
  margin-bottom: 34px;
}

.form-group label {
  display: block;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.31;
  margin-bottom: 15px;
}

.form-group span {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.31;
  color: #ff584d;
}

.form-group input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  background-color: #fff;
  padding: 10px 16px;
  border: 1px solid #339baa;
  border-radius: 5px;
}

.form-group textarea {
  min-height: 400px;
}

.btn-wrapper {
  text-align: center;
  padding-top: 6px;
}

@media screen and (max-width: 1200px) {
  .contact {
    padding-top: clamp(4.063rem, 2.449rem + 8.07vw, 8.5rem);
    padding-bottom: clamp(4rem, 1.955rem + 10.23vw, 9.625rem);
  }

  .contact .sub-title {
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
    padding-top: 47px;
    padding-bottom: 57px;
  }

  form {
    padding: clamp(1.625rem, 0.761rem + 4.32vw, 4rem) 24px;
  }

  .form-group textarea {
    min-height: clamp(15.625rem, 12.216rem + 17.05vw, 25rem);
  }

  .btn-wrapper {
    padding-top: 6px;
  }
}

@media screen and (max-width: 768px) {
  .form-group label {
    font-size: 16px;
  }

  .form-group span {
    font-size: 16px;
  }

  .contact .sub-title {
    padding-top: 27px;
    padding-bottom: 28px;
  }

  .form-group {
    margin-bottom: 26px;
  }

  .form-group label {
    margin-bottom: 10px;
  }
}


/*-------------------------
　footer
-------------------------*/

footer {
  margin-top: 90px;
  padding: 64px 0 44px 0;
  background-color: #333333;
  color: #fff;
}

.footer-inner {
  display: flex;
  justify-content: flex-start;
  gap: 140px;
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.footer-inner ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
  margin-right: 20px;
}

.footer-inner ul li {
  font-size: 18px;
  line-height: 1.3;
}

.footer-inner ul li a {
  color: #fff;
}

.footer-inner ul li a:hover {
  opacity: 0.5;
}

.footer-text {
  font-size: 18px;
  padding-top: 20px;
  color: #707070;
  text-align: right;
}

@media screen and (max-width: 1200px) {
  footer {
    margin-top: clamp(4rem, 3.409rem + 2.95vw, 5.625rem);
    padding: clamp(1.5rem, 0.591rem + 4.55vw, 4rem) 0 clamp(1.5rem, 1.045rem + 2.27vw, 2.75rem) 0;
  }

  .footer-inner {
    flex-direction: column;
    gap: clamp(0.938rem, -2.131rem + 15.34vw, 9.375rem);
  }

  .footer-inner img {
    width: clamp(7.313rem, 3.949rem + 16.82vw, 16.563rem);
  }

  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
    margin-right: 0;
  }

  .footer-inner ul li {
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  }

  .footer-text {
    font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
    padding-top: 20px;
  }
}

@media screen and (max-width: 1000px) {
}