@charset "UTF-8";
section {
  padding-block: 60px;
}
section > .section-content {
  inline-size: min(100%, 960px);
  margin-inline: auto;
}
section.with-tail-triangle {
  position: relative;
}
section.with-tail-triangle::after {
  position: absolute;
  inset-block-start: calc(100% - 1px);
  inset-inline: 50%;
  content: "";
  border: 70px solid transparent;
  border-inline-width: 117.5px;
  border-block-start-color: #fff;
  transform: translateX(-50%);
}
section.colored {
  background: #eff8ff;
}
section.colored.with-tail-triangle::after {
  border-block-start-color: #eff8ff;
}
@media screen and (width > 640px) {
  section {
    padding-inline: 60px;
  }
}
@media screen and (width <= 640px) {
  section.with-tail-triangle::after {
    border-width: 40px;
    border-inline-width: 55px;
  }
  section:not(.sp-no-side-gutter) {
    padding-inline: 10px;
  }
}
section .section-heading {
  position: relative;
  inline-size: min(960px, 100%);
  -webkit-padding-before: 40px;
          padding-block-start: 40px;
  margin: 0 auto 50px;
  font-size: 35px;
  color: var(--main-color-1);
  text-align: center;
}
section .section-heading small {
  font-size: 1.5625rem;
}
section .section-heading::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 62px;
  color: rgba(216, 228, 238, 0.7882352941);
  letter-spacing: 0.02em;
  content: attr(data-english);
  mix-blend-mode: multiply;
}
@media screen and (width <= 640px) {
  section .section-heading {
    -webkit-padding-before: 30px;
            padding-block-start: 30px;
    font-size: 1.5625rem;
  }
  section .section-heading::after {
    inline-size: 100%;
    font-size: 2.1875rem;
    text-align: center;
  }
  section .section-heading.sp-flat-size {
    -webkit-margin-after: 25px;
            margin-block-end: 25px;
    font-size: 1rem;
    line-height: 2;
  }
  section .section-heading.sp-flat-size small {
    font-size: inherit;
  }
  section .section-heading.sp-flat-size strong {
    font-size: 1.25rem;
  }
}

h3 {
  position: relative;
  inline-size: min(960px, 100%);
  -webkit-padding-before: 40px;
          padding-block-start: 40px;
  margin: 0 auto 50px;
  font-size: 35px;
  color: var(--main-color-1);
  text-align: center;
}
h3 small {
  font-size: 1.5625rem;
}
h3::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 62px;
  color: rgba(216, 228, 238, 0.7882352941);
  letter-spacing: 0.02em;
  content: attr(data-english);
  mix-blend-mode: multiply;
}
@media screen and (width <= 640px) {
  h3 {
    -webkit-padding-before: 30px;
            padding-block-start: 30px;
    font-size: 1.5625rem;
  }
  h3::after {
    inline-size: 100%;
    font-size: 2.1875rem;
    text-align: center;
  }
  h3.sp-flat-size {
    -webkit-margin-after: 25px;
            margin-block-end: 25px;
    font-size: 1rem;
    line-height: 2;
  }
  h3.sp-flat-size small {
    font-size: inherit;
  }
  h3.sp-flat-size strong {
    font-size: 1.25rem;
  }
}

.text-center {
  text-align: center;
}

strong {
  color: #ee0707;
  background-image: linear-gradient(transparent, transparent 70%, #ffed48 70%, #ffed48);
}
strong:not(.flat-size) {
  font-size: 1.2em;
}

.block-border-text {
  padding-block: 15px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--main-color-1);
  text-align: center;
  border-block: 2px solid currentcolor;
}

.large-text {
  font-size: 1.875rem;
  line-height: 1.5;
  color: var(--main-color-1);
  text-align: center;
}

@media screen and (width > 640px) {
  .when-sp {
    display: none;
  }
}
@media screen and (width <= 640px) {
  .when-pc {
    display: none;
  }
  .block-border-text {
    font-size: 0.875rem;
    line-height: 1.75;
  }
  .large-text {
    font-size: 1rem;
    line-height: 1.75;
  }
  .large-text strong {
    font-size: 1.25rem;
  }
}
.mv {
  position: relative;
  background: var(--main-color-1) -webkit-image-set(url("../img/pc/mv.jpg") 1x, url("../img/pc/mv@2x.jpg") 2x) no-repeat;
  background: var(--main-color-1) image-set(url("../img/pc/mv.jpg") 1x, url("../img/pc/mv@2x.jpg") 2x) no-repeat;
}
@media screen and (width > 640px) {
  .mv {
    position: relative;
    background-position: right center;
    background-size: calc(100% - 130px) auto;
  }
}
@media screen and (641px <= width <= 1410px) {
  .mv {
    position: relative;
    background-size: auto 100%;
  }
}
@media screen and (width >= 1200px) {
  .mv {
    position: relative;
  }
  .mv::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 130px;
    block-size: 100%;
    content: "";
    background: var(--main-color-1);
  }
  .mv::after {
    position: absolute;
    inset-block-start: calc(100% - 35px);
    inset-inline-start: 65px;
    content: image-set(url("../img/pc/mv_scroll.png") 1x, url("../img/pc/mv_scroll@2x.png") 2x);
  }
}
@media screen and (width <= 640px) {
  .mv {
    background-image: -webkit-image-set(url("../img/sp/mv.jpg") 1x, url("../img/sp/mv@2x.jpg") 2x);
    background-image: image-set(url("../img/sp/mv.jpg") 1x, url("../img/sp/mv@2x.jpg") 2x);
    background-position: center center;
    background-size: cover;
  }
}
.mv .mv-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  inline-size: min(960px, 100%);
  margin-inline: auto;
}
.mv .mv-text {
  color: #fff;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.mv .mv-text > .mv-text-main {
  font-family: YuMincho, serif;
  font-weight: 500;
  line-height: 1.2;
}
.mv .mv-text > .mv-text-main > .mv-text-1 {
  font-size: 66px;
}
.mv .mv-text > .mv-text-main > .mv-text-2 {
  -webkit-padding-after: 10px;
          padding-block-end: 10px;
  font-size: 81px;
  -webkit-border-after: 2px solid currentcolor;
          border-block-end: 2px solid currentcolor;
}
.mv .mv-text > .mv-text-sub {
  display: flex;
  align-items: center;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  font-size: 27px;
}
.mv .mv-text > .mv-text-sub > :not(img) {
  flex-grow: 1;
}
@media screen and (width > 640px) {
  .mv {
    padding-block: 25px 55px;
  }
  .mv .mv-startia-logo {
    inline-size: 122px;
  }
  .mv .mv-text {
    -webkit-margin-before: 30px;
            margin-block-start: 30px;
  }
}
@media screen and (width <= 640px) {
  .mv {
    padding-block: 15px;
    padding-inline: 10px;
  }
  .mv .mv-startia-logo {
    inline-size: 66px;
  }
  .mv .mv-text {
    margin-inline: 30px;
  }
  .mv .mv-text > .mv-text-main {
    margin-block: 0 5px;
  }
  .mv .mv-text > .mv-text-main > .mv-text-1 {
    font-size: 9.2dvw;
  }
  .mv .mv-text > .mv-text-main > .mv-text-2 {
    font-size: 11.2dvw;
  }
  .mv .mv-text > .mv-text-sub {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    font-size: 3.8dvw;
    line-height: 1.6;
  }
  .mv .mv-text > .mv-text-sub img {
    inline-size: 27.4%;
  }
}

.cta {
  min-block-size: 100px;
  padding-block: 45px;
  background: -webkit-image-set(url("../img/pc/cta_bg02.jpg") 1x, url("../img/pc/cta_bg02@2x.jpg") 2x) no-repeat center center/cover;
  background: image-set("../img/pc/cta_bg02.jpg" 1x, "../img/pc/cta_bg02@2x.jpg" 2x) no-repeat center center/cover;
}
.cta > .cta-content {
  inline-size: min(960px, 100%);
  margin-inline: auto;
}
.cta > .cta-content .cta-message {
  position: relative;
  margin: 0 0 40px;
  font-size: 1.875rem;
  color: #fff;
  text-align: center;
}
@media screen and (width > 640px) {
  .cta > .cta-content .cta-message::before, .cta > .cta-content .cta-message::after {
    position: absolute;
    inset-block: 50%;
    inline-size: 13%;
    block-size: 2px;
    content: "";
    background: currentcolor;
  }
  .cta > .cta-content .cta-message::before {
    inset-inline-start: 0;
  }
  .cta > .cta-content .cta-message::after {
    inset-inline-end: 0;
  }
}
@media screen and (width <= 640px) {
  .cta > .cta-content .cta-message {
    -webkit-margin-after: 25px;
            margin-block-end: 25px;
    font-size: 1.5625rem;
  }
}
.cta > .cta-content .cta-buttons {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
}
@media screen and (width <= 640px) {
  .cta > .cta-content .cta-buttons {
    flex-direction: column;
    gap: 10px;
  }
}
.cta.with-recruitment-area {
  padding-block: 35px 25px;
  background-image: -webkit-image-set(url("../img/pc/cta_bg01.jpg") 1x, url("../img/pc/cta_bg01@2x.jpg") 2x);
  background-image: image-set(url("../img/pc/cta_bg01.jpg") 1x, url("../img/pc/cta_bg01@2x.jpg") 2x);
}
.cta.with-recruitment-area .cta-message {
  -webkit-margin-after: 25px;
          margin-block-end: 25px;
}
.cta.with-recruitment-area .recruitment-area {
  padding: 1px;
  -webkit-margin-after: 40px;
          margin-block-end: 40px;
  line-height: 1;
  color: var(--main-color-1);
  text-align: center;
  background: rgba(255, 255, 255, 0.85);
}
.cta.with-recruitment-area .recruitment-area .recruitment-area-title {
  margin-block: 20px;
  font-size: 2.1875rem;
}
.cta.with-recruitment-area .recruitment-area .recruitment-area-content {
  margin-block: 25px 40px;
  font-size: 1.5625rem;
}
.cta.with-recruitment-area .recruitment-area .recruitment-area-content small {
  font-size: 1rem;
}
@media screen and (width <= 640px) {
  .cta.with-recruitment-area {
    padding-inline: 10px;
  }
  .cta.with-recruitment-area .recruitment-area {
    -webkit-margin-after: 20px;
            margin-block-end: 20px;
  }
  .cta.with-recruitment-area .recruitment-area .recruitment-area-title {
    margin-block: 20px;
    -webkit-margin-after: 10px;
            margin-block-end: 10px;
    font-size: 1.5625rem;
  }
  .cta.with-recruitment-area .recruitment-area .recruitment-area-content {
    margin-block: 10px 20px;
    font-size: 1.25rem;
  }
  .cta.with-recruitment-area .recruitment-area .recruitment-area-content small {
    font-size: 0.875rem;
  }
}
.cta.text-only .cta-message {
  -webkit-margin-after: 25px;
          margin-block-end: 25px;
  font-size: 2.1875rem;
}
.cta.text-only .cta-message::before, .cta.text-only .cta-message::after {
  content: none;
}
.cta.text-only .cta-message.small {
  margin: 0;
  font-size: 1rem;
}
@media screen and (width <= 640px) {
  .cta.text-only .cta-message {
    font-size: 1.5625rem;
  }
  .cta.text-only .cta-message.small {
    font-size: 0.875rem;
  }
}
.cta.mv-cta {
  padding-block: 20px;
  background: var(--main-color-1);
}
.cta.mv-cta .cta-content {
  inline-size: min(880px, 100%);
}
.cta.mv-cta .cta-message {
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
  font-size: 1.125rem;
  font-weight: 400;
}
.cta.mv-cta .cta-message::before, .cta.mv-cta .cta-message::after {
  inline-size: 31%;
  block-size: 1px;
}
@media screen and (width <= 640px) {
  .cta.mv-cta {
    position: relative;
  }
  .cta.mv-cta .cta-message {
    font-size: 0.875rem;
  }
  .cta.mv-cta .cta-message::before, .cta.mv-cta .cta-message::after {
    position: absolute;
    inset-block: 50%;
    inline-size: 13%;
    block-size: 1px;
    content: "";
    background: currentcolor;
  }
  .cta.mv-cta .cta-message::before {
    inset-inline-start: 10px;
  }
  .cta.mv-cta .cta-message::after {
    inset-inline-end: 10px;
  }
}
@media screen and (width <= 640px) {
  .cta {
    padding-block: 25px;
    background-image: -webkit-image-set(url("../img/sp/cta_bg02.jpg") 1x, url("../img/sp/cta_bg02@2x.jpg") 2x);
    background-image: image-set("../img/sp/cta_bg02.jpg" 1x, "../img/sp/cta_bg02@2x.jpg" 2x);
  }
}

.solution-figure {
  margin-block: 40px;
}

.solution-text {
  color: var(--main-color-1);
  text-align: center;
  border-block: 2px solid currentcolor;
}
.solution-text strong {
  font-size: 1.5625rem;
}
@media screen and (width <= 640px) {
  .solution-text {
    font-size: 0.875rem;
  }
  .solution-text strong {
    font-size: 1.25rem;
  }
}

.flow {
  counter-reset: flow-index;
}
.flow > .flow-item {
  position: relative;
  padding: 25px 85px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: #666;
}
.flow > .flow-item::before {
  position: absolute;
  inset-block-start: -50px;
  inset-inline-start: -50px;
  z-index: 1;
  content: "";
  border: 60px solid transparent;
  border-inline-end-color: #fff;
  transform: rotate(45deg);
}
.flow > .flow-item:not(:last-child) {
  -webkit-margin-after: 25px;
          margin-block-end: 25px;
}
.flow > .flow-item:not(:last-child)::after {
  position: absolute;
  inset-block-start: calc(100% - 1px);
  inset-inline: 50%;
  content: "";
  border: 25px solid transparent;
  border-block-start-color: #666;
  border-inline-width: 30px;
  transform: translateX(-50%);
}
.flow > .flow-item > .flow-index {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-start: 20px;
  z-index: 2;
  font-size: 30px;
  line-height: 1;
  color: #666;
}
.flow > .flow-item > .flow-title {
  -webkit-padding-after: 20px;
          padding-block-end: 20px;
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
  font-size: 25px;
  -webkit-border-after: 2px solid currentcolor;
          border-block-end: 2px solid currentcolor;
}
.flow > .flow-item > .flow-text {
  font-size: 20px;
}
.flow > .flow-item:nth-of-type(1) {
  background: var(--main-color-1);
}
.flow > .flow-item:nth-of-type(1)::after {
  border-block-start-color: var(--main-color-1);
}
.flow > .flow-item:nth-of-type(1) > .flow-index {
  color: var(--main-color-1);
}
.flow > .flow-item:nth-of-type(2) {
  background: var(--main-color-2);
}
.flow > .flow-item:nth-of-type(2)::after {
  border-block-start-color: var(--main-color-2);
}
.flow > .flow-item:nth-of-type(2) > .flow-index {
  color: var(--main-color-2);
}
.flow > .flow-item:nth-of-type(3) {
  background: var(--main-color-3);
}
.flow > .flow-item:nth-of-type(3)::after {
  border-block-start-color: var(--main-color-3);
}
.flow > .flow-item:nth-of-type(3) > .flow-index {
  color: var(--main-color-3);
}
.flow > .flow-item:nth-of-type(4) {
  background: var(--main-color-4);
}
.flow > .flow-item:nth-of-type(4)::after {
  border-block-start-color: var(--main-color-4);
}
.flow > .flow-item:nth-of-type(4) > .flow-index {
  color: var(--main-color-4);
}
@media screen and (width <= 640px) {
  .flow > .flow-item {
    padding-inline: 10px;
  }
  .flow > .flow-item > .flow-title {
    -webkit-margin-start: 40px;
            margin-inline-start: 40px;
  }
  .flow > .flow-item > .flow-text {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.75;
  }
}

.service > .service-title {
  padding: 3px 8px;
  margin: 0 0 10px;
  font-size: 25px;
  color: #fff;
  background: var(--main-color-1);
  -webkit-border-start: 7px solid var(--main-color-3);
          border-inline-start: 7px solid var(--main-color-3);
}
@media screen and (width <= 640px) {
  .service > .service-title {
    font-size: 1.25rem;
  }
}
.service > .service-content picture, .service > .service-content img {
  display: block;
}
.service > .service-content p {
  margin: 0;
}
@media screen and (width > 640px) {
  .service > .service-content {
    display: grid;
    gap: 15px;
  }
}
@media screen and (width <= 640px) {
  .service > .service-content {
    font-size: 0.875rem;
    line-height: 2;
  }
  .service > .service-content > picture, .service > .service-content img {
    inline-size: 100%;
    margin-block: 10px;
  }
}
.service .dealing-makers .makers-heading {
  padding: 4px 10px;
  margin: 0;
  font-size: 1.25rem;
  color: var(--main-color-1);
  -webkit-border-after: 2px solid currentcolor;
          border-block-end: 2px solid currentcolor;
}
.service .dealing-makers .maker-logo {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
  min-block-size: 65px;
  background: #fff;
}
@media screen and (width <= 640px) {
  .service .dealing-makers .makers-heading {
    text-align: center;
  }
  .service .dealing-makers .maker-logo {
    flex-direction: column;
    gap: 10px;
    min-block-size: unset;
    padding: 15px;
  }
  .service .dealing-makers .maker-logo picture, .service .dealing-makers .maker-logo img {
    inline-size: auto;
    margin: 0;
  }
}
.service.tiny > .service-title {
  text-align: center;
}
.service.tiny > .service-content {
  grid-template-columns: 215px 1fr;
}
.service:not(.tiny) > .service-content {
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr 287px;
}
.service:not(.tiny) > .service-content picture {
  grid-row: 1/3;
  grid-column: -1;
}
.service:not(.tiny) > .service-content p {
  grid-row: 1;
  grid-column: 1/3;
}
.service:not(.tiny) > .service-content .dealing-makers {
  grid-row: 2;
  grid-column: 1/3;
}

.authorized-agent {
  padding: 30px 15px;
  background: #fff;
}
@media screen and (width <= 640px) {
  .authorized-agent p {
    line-height: 1.75;
  }
  .authorized-agent p:not(.large-text) {
    font-size: 0.875rem;
  }
}

.dealing-machines .machines-heading {
  position: relative;
  padding-inline: 10px;
  margin-block: 30px;
  font-size: 1.5625rem;
  color: var(--main-color-1);
  text-align: center;
}
.dealing-machines .machines-heading::before, .dealing-machines .machines-heading::after {
  position: absolute;
  inset-block: 50%;
  inline-size: 37%;
  block-size: 2px;
  content: "";
  background: currentcolor;
}
.dealing-machines .machines-heading::before {
  inset-inline-start: 0;
}
.dealing-machines .machines-heading::after {
  inset-inline-end: 0;
}
.dealing-machines .machine {
  display: flex;
  gap: 20px;
}
.dealing-machines .machine .machine-picture {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.dealing-machines .machine .machine-picture img {
  max-inline-size: unset;
}
.dealing-machines .machine .machine-content .machine-name {
  font-size: 1.25rem;
  color: var(--main-color-1);
}
.dealing-machines .machine .machine-content .machine-name small {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: #393939;
}
.dealing-machines .machine .machine-content p {
  font-weight: 400;
  line-height: 1.75;
}
@media screen and (width <= 640px) {
  .dealing-machines .machine {
    flex-direction: column;
    align-items: center;
  }
  .dealing-machines .machine .machine-name {
    -webkit-padding-after: 10px;
            padding-block-end: 10px;
    text-align: center;
    -webkit-border-after: 2px solid var(--main-color-1);
            border-block-end: 2px solid var(--main-color-1);
  }
}
.dealing-machines .machines {
  display: grid;
}
@media screen and (width > 640px) {
  .dealing-machines .machines {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
}
@media screen and (width <= 640px) {
  .dealing-machines .machines-heading {
    font-size: 1.25rem;
  }
  .dealing-machines .machines-heading::before, .dealing-machines .machines-heading::after {
    inline-size: 17%;
  }
}

.services {
  display: grid;
  gap: 55px 30px;
}
@media screen and (width > 640px) {
  .services {
    grid-template-columns: 1fr 1fr;
  }
  .services > .authorized-agent,
.services > .service:not(.tiny) {
    grid-column: span 2;
  }
}

footer {
  -webkit-padding-before: 50px;
          padding-block-start: 50px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  background: #253746;
}
footer a:-webkit-any-link {
  color: inherit;
}
footer a:-moz-any-link {
  color: inherit;
}
footer a:any-link {
  color: inherit;
}
footer a:-webkit-any-link:not(:hover) {
  text-decoration: none;
}
footer a:-moz-any-link:not(:hover) {
  text-decoration: none;
}
footer a:any-link:not(:hover) {
  text-decoration: none;
}
footer hr {
  block-size: 2px;
  margin-block: 15px;
  background: #fff;
  border: none;
}
@media screen and (width <= 640px) {
  footer hr {
    inline-size: 100%;
  }
}
footer .startia-info p {
  padding-inline: 1em;
  margin: 0;
}
@media screen and (width <= 640px) {
  footer .startia-info {
    align-self: stretch;
  }
}
footer .startia-logo {
  justify-content: flex-start;
}
footer .ssl-logo {
  justify-content: flex-end;
}
footer .startia-logo,
footer .ssl-logo {
  display: flex;
  flex: 1;
}
footer nav {
  margin-block: 30px 10px;
}
footer nav > ul {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}
footer nav > ul li {
  display: block;
  padding: 1em;
}
@media screen and (width > 640px) {
  footer nav > ul li:nth-child(n+2)::before {
    position: relative;
    inset-inline-start: -1em;
    content: "|";
  }
}
@media screen and (width <= 640px) {
  footer nav > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 0.75rem;
  }
  footer nav > ul li {
    padding: 0;
    margin-block: 8px;
  }
  footer nav > ul li:nth-of-type(odd) a {
    display: block;
    -webkit-border-start: 1px solid currentcolor;
            border-inline-start: 1px solid currentcolor;
  }
  footer nav > ul li:nth-of-type(even) a {
    display: block;
    border-inline: 1px solid currentcolor;
  }
}
footer .footer-content {
  inline-size: min(960px, 100%);
  margin-inline: auto;
}
@media screen and (width <= 640px) {
  footer .footer-content {
    padding-inline: 10px;
  }
}
footer .footer-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (width <= 640px) {
  footer .footer-layout {
    flex-direction: column;
    gap: 30px;
  }
}
footer .copyright {
  padding: 12px;
  background: var(--main-color-1);
}
@media screen and (width <= 640px) {
  footer .copyright {
    font-size: 0.875rem;
  }
}

.agency-type {
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.agency-type p {
  line-height: 1.875rem;
  text-align: center;
}
.agency-type .proposal {
  font-size: 1.25rem;
  color: #ee0707;
}
.agency-type .triangle {
  display: block;
  margin-inline: auto;
}
.agency-type .agency-type-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 330px;
}
.agency-type > .agency-type-name {
  padding-block: 25px;
  margin: 0;
  font-size: 1.25rem;
  color: #fff;
  text-align: center;
  background: var(--main-color-1);
}
@media screen and (width > 640px) {
  .agency-type > .agency-type-content {
    padding: 15px;
  }
}
@media screen and (width <= 640px) {
  .agency-type > .agency-type-content {
    padding: 10px;
  }
}

.agencies {
  display: grid;
}
@media screen and (width > 640px) {
  .agencies {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
}
@media screen and (width <= 640px) {
  .agencies {
    gap: 30px;
  }
  .agencies p {
    font-size: 0.875rem;
  }
}

.value {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  font-size: 1.25rem;
}
.value img {
  grid-row: 1/6;
  grid-column: 1;
}
.value .value-name {
  position: relative;
  display: flex;
  grid-row: 5;
  grid-column: 1;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(4, 57, 103, 0.79);
}
.value .value-name::before, .value .value-name::after {
  position: absolute;
  inset-block: 50%;
  inline-size: 12%;
  block-size: 2px;
  content: "";
  background: currentcolor;
}
.value .value-name::before {
  inset-inline-start: 5px;
}
.value .value-name::after {
  inset-inline-end: 5px;
}
@media screen and (width <= 640px) {
  .value {
    font-size: 0.8125rem;
  }
  .value .value-name::before, .value .value-name::after {
    inline-size: 8%;
    block-size: 1px;
  }
  .value .value-name::before {
    inset-inline-start: 5px;
  }
  .value .value-name::after {
    inset-inline-end: 5px;
  }
}

.values {
  display: grid;
}
@media screen and (width > 640px) {
  .values {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}
@media screen and (width <= 640px) {
  .values {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.worry {
  font-size: 1.25rem;
  color: var(--main-color-1);
}
.worry .title {
  padding: 20px;
  color: #fff;
  text-align: center;
  background: var(--main-color-1);
}
.worry .content {
  padding: 15px;
  line-height: 3;
}

.worries {
  display: grid;
}
@media screen and (width > 640px) {
  .worries {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
}
@media screen and (width <= 640px) {
  .worries {
    gap: 10px;
  }
  .worries .worry .content {
    font-size: 0.875rem;
    line-height: 2;
  }
}

.faq-item {
  border: 2px solid var(--main-color-1);
}
.faq-item > .question {
  position: relative;
  padding: 20px 25px;
  font-size: 1.25rem;
  color: #fff;
  cursor: pointer;
  background: var(--main-color-1);
}
.faq-item > .question::before {
  content: "Q：";
}
.faq-item > .question::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 30px;
  inline-size: 21px;
  block-size: 13px;
  content: "";
  background: url("assets/img/faq_arrow.svg");
  transform: translateY(-50%);
}
.faq-item > .answer {
  display: none;
  padding: 15px 25px;
  font-weight: 400;
  background: #fff;
}
.faq-item > .answer::before {
  color: var(--main-color-1);
  content: "A：";
}
.faq-item > .question,
.faq-item > .answer {
  position: relative;
  -webkit-padding-start: 60px;
          padding-inline-start: 60px;
}
.faq-item > .question::before,
.faq-item > .answer::before {
  position: absolute;
  inset-inline-start: 25px;
  font-size: 1.25rem;
  font-weight: 700;
}
.faq-item.collapsed > .question::after {
  transform: translateY(-50%) rotate(180deg);
}
@media screen and (width <= 640px) {
  .faq-item > .question,
.faq-item > .answer {
    -webkit-padding-start: 45px;
            padding-inline-start: 45px;
  }
  .faq-item > .question::before,
.faq-item > .answer::before {
    inset-inline-start: 10px;
  }
  .faq-item > .question {
    -webkit-padding-end: 45px;
            padding-inline-end: 45px;
  }
  .faq-item > .question::after {
    inset-inline-end: 10px;
  }
  .faq-item > .answer {
    font-size: 0.875rem;
    line-height: 1.75;
  }
}

.faq-container {
  display: grid;
  gap: 30px;
}

form {
  font-weight: 400;
}
form button[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 372px;
  block-size: 73px;
  font-family: inherit;
  font-size: 1.25rem;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(#ffcc54, #f19d0e);
  border: none;
  border-radius: 10px;
}
form textarea,
form input[type=text],
form input[type=tel],
form input[type=email] {
  display: block;
  inline-size: 100%;
  padding: 10px 15px;
  font-size: 0.9375rem;
  border: 1px solid #929090;
  border-radius: 5px;
}
form textarea::-moz-placeholder, form input[type=text]::-moz-placeholder, form input[type=tel]::-moz-placeholder, form input[type=email]::-moz-placeholder {
  color: #b5b5b5;
}
form textarea::placeholder,
form input[type=text]::placeholder,
form input[type=tel]::placeholder,
form input[type=email]::placeholder {
  color: #b5b5b5;
}
form .required-label {
  padding: 3px 0.8em;
  color: #fff;
  background: #ee0707;
}
form .form-message {
  -webkit-margin-before: 50px;
          margin-block-start: 50px;
  text-align: center;
}
form .form-message .information {
  padding: 25px;
  margin-block: 30px;
  background: var(--light-color);
}
form .form-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-content {
  inline-size: min(720px, 100%);
  margin-inline: auto;
}

.tel-contact {
  display: flex;
  justify-content: center;
}
.tel-contact img {
  display: block;
}

.form-layout {
  display: grid;
  row-gap: 25px;
  margin-block: 50px;
}
.form-layout .form-item-group {
  display: grid;
  grid-template-columns: 1fr 1fr 432px;
}
@media screen and (width <= 640px) {
  .form-layout {
    row-gap: 20px;
  }
  .form-layout .form-item-group {
    grid-template-columns: auto 1fr;
    gap: 7px 20px;
  }
  .form-layout .form-item-group .input-control {
    grid-row: 2;
    grid-column: span 2;
  }
}
@media screen and (width > 640px) {
  .form-layout .form-item-group label,
.form-layout .form-item-group .label {
    -webkit-margin-before: 0.5rem;
            margin-block-start: 0.5rem;
  }
}

* {
  box-sizing: border-box;
}

:root {
  --main-color-1: #043967;
  --main-color-2: #0d589a;
  --main-color-3: #157dd9;
  --main-color-4: #56b0ff;
  --link-color: #0b7fc5;
  --light-color: #eff8ff;
}

html {
  font-family: YuGothic, "Yu Gothic", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.42;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #393939;
}

img {
  max-inline-size: 100%;
}

a:-webkit-any-link {
  color: var(--link-color);
}

a:-moz-any-link {
  color: var(--link-color);
}

a:any-link {
  color: var(--link-color);
}
/*# sourceMappingURL=style.css.map */