@charset "UTF-8";

/*---------------------------
 * common
 * -------------------------*/
html {
  font-family: "Teko", sans-serif;
  --color--black: #000;
  --color--white: #FFF;
  --color--main: #69ba00;
  --color--sub1: #ff7425;
  --color--sub2: #ffcc19;
  --color--text: #514327;
  --color--bg1: #FBF7EF;
  --color--bg2: #a68f4c;
  --color--bg3: #F7FBF1;
  --color--shadow: #d9d1c1;
  --color--gray: #999;
  --color--pgray: #E7E7E7;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color--text);
  line-height: 1.6;
}

body main {
  overflow-x: hidden;
  /*margin: 0 auto;*/
  padding: 0;
}

body main.bg_ivory {
  background: var(--color--bg1);
}

body.contact {
  background: var(--color--bg1);
}

/*
body.contact main {
  max-width: 900px;
  margin: 0 auto;
  width: 800px;
}
*/

.contact_box .frame p {
  margin: 0;
}

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

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: var(--color--sub1);
}

section {
  position: relative;
}

section h2 {
  text-align: center;
  margin-bottom: 2em;
  color: var(--color--main);
  word-break: keep-all;
  overflow-wrap: break-word;
}

.section_inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 10px;
}

.scroll_text {
  display: none;
}

@media (max-width: 767px) {
  .scroll_text {
    display: block;
  }

  .scroll_text::before {
    right: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--color--text);
  }

  .scroll_text::after {
    right: 0;
    bottom: 1px;
    width: 10px;
    height: 10px;
    -webkit-transform: translateY(50%) rotate(45deg);
    transform: translateY(50%) rotate(-45deg);
    border-right: 2px solid var(--color--text);
  }

  .hide-sp {
    display: none;
  }
}

.mw760 {
  max-width: 760px;
  margin: 0 auto;
}

.mw900 {
  max-width: 900px;
  margin: 0 auto;
}

/*---------------------
 2column
---------------------*/
.twoColumn .side section {
  border: 2px solid var(--color--main);
  background: var(--color--white);
  margin: 4vw 0;
}

.twoColumn .side .title {
  background: var(--color--main);
  color: var(--color--white);
  font-weight: 700;
  padding: 15px;
  font-size: clamp(1.1em, 1.1vw, 1.1em);
}

.twoColumn .side ul {
  padding-left: 1em;
}

.twoColumn .side ul li {
  list-style: none;
  padding: 5px 0;
}

.twoColumn .side ul li::before {
  display: inline-block;
  content: "■";
  color: var(--color--sub2);
  padding-right: 10px;
}

.twoColumn .side ul li a {
  font-size: 1.1em;
  color: var(--color--text);
  font-weight: 700;
  transition: all ease 0.2s;
}

.twoColumn .side ul li a:hover {
  color: var(--color--sub1);
}

.twoColumn .contents {
  margin: 4vw 0;
}

.twoColumn .contents section {
  border: 2px solid var(--color--main);
  background: var(--color--white);
  margin-bottom: 4vw;
}

.twoColumn .contents section .title {
  background: var(--color--main);
  color: var(--color--white);
  font-weight: 700;
  padding: 15px;
}

.twoColumn .contents section .inner {
  padding: 20px;
}

.twoColumn .contents section .news {
  padding: 0;
  margin: 0;
}

.twoColumn .contents section .news li {
  list-style: none;
  display: flex;
  border-bottom: 2px solid var(--color--main);
  padding: 10px;
  font-weight: 600;
}

.twoColumn .contents section .news li .date {
  width: 10em;
}

.twoColumn .contents section .news li .news_title {
  flex: 1;
}

.twoColumn .contents section .news li:last-child {
  border: none;
}

@media (min-width: 768px) {
  .twoColumn {
    display: grid;
    grid-template-columns: 1fr 4fr;
    -moz-column-gap: 60px;
    column-gap: 60px;
  }
}

/*---------------------
 button
---------------------*/
a.button {
  background: var(--color--sub1);
  color: var(--color--white);
  padding: 10px 20px;
  display: block;
  border-radius: 40px;
  font-weight: 600;
}

a.button.button_medium {
  max-width: 180px;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
  transition: all ease 0.2s;
}

a.button.button_medium:hover {
  background: var(--color--sub2);
}

a.button.button_large {
  font-size: clamp(1.2em, 1.4vw, 1.4em);
  max-width: 480px;
  padding: 20px;
  margin: 0 auto;
  transition: all ease 0.2s;
}

a.button.button_large:hover {
  background: var(--color--sub2);
}

a.button svg {
  width: 21px;
  height: 24px;
}

input[type=submit] {
  background: var(--color--main);
  color: var(--color--white);
  padding: 10px 30px;
  display: block;
  border-radius: 10px;
  text-align: center;
  margin: 10px auto;
  font-size: 1.3em;
}

/*---------------------
 H
---------------------*/
h1 {
  font-size: clamp(1.6em, 3vw, 3em);
}

h2 {
  font-size: clamp(1.5em, 2.4vw, 2.4em);
  text-align: center;
  color: var(--color--main);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.4em, 2.2vw, 2.2em);

}

.lead {
  font-size: clamp(1em, 1.3vw, 1.3em);
}

/*---------------------------
 * flex-wrapper
 * -------------------------*/
.flex-wrapper.half,
.flex-wrapper.one-third,
.flex-wrapper.quarter,
.flex-wrapper.three-half {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-wrapper.reverse {
  flex-direction: row-reverse;
}

.flex-wrapper.itemCenter {
  align-items: center;
}

.flex-wrapper.four:after {
  display: block;
  content: "";
  width: 24%;
}

.flex-wrapper .flex-one {
  width: 100%;
}

.flex-wrapper.half .flex-one {
  width: 48%;
}

.flex-wrapper.one-third .flex-one {
  width: 32%;
}

.flex-wrapper.one-third .flex-two {
  width: 64%;
}

.flex-wrapper.three-half .flex-one {
  width: 47%;
}

.flex-wrapper.quarter .flex-one {
  width: 48%;
}

.flex-wrapper.quarter .flex-three {
  width: 48%;
}

@media (min-width: 768px) {
  .flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .flex-wrapper.three-half .flex-one {
    width: 30%;
  }

  .flex-wrapper.two .flex-one {
    width: 48%;
  }

  .flex-wrapper.three .flex-one {
    width: 33%;
  }

  .flex-wrapper.three .flex-two {
    width: 64%;
  }

  .flex-wrapper.four .flex-two {
    width: 48%;
  }

  .flex-wrapper.four .flex-one {
    width: 24%;
  }

  .flex-wrapper.four .flex-three {
    width: 72%;
  }

  .flex-wrapper.five .flex-one {
    width: 18%;
  }

  .flex-wrapper.six .flex-one {
    width: 15%;
  }

  .flex-wrapper.quarter .flex-one {
    width: 24%;
  }

  .flex-wrapper.quarter .flex-three {
    width: 72%;
  }
}

/*---------------------
 header
---------------------*/
.l_header {
  transition: all linear 0.3s;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color--white);
  position: relative;
  z-index: 100;
}

.l_header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  margin: 0;
  background: var(--color--white);
  animation: navIn 1s 0.5s forwards;
  transform: translate(0, -150px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.l_header .section_inner {
  margin: 0 auto;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l_header .section_inner h1 {
  line-height: 1;
  padding: 0;
  margin: 0;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.l_header .section_inner h1 a {
  font-size: 1rem;
  text-align: center;
  color: var(--color--text);
  transition: .3s;
}

.l_header .section_inner h1 a:hover {
  opacity: 0.6;
}

.l_header .section_inner h1 img {
  width: 100%;
  height: auto;
}

.l_header .section_inner nav {
  display: flex;
  align-items: center;
}

.l_header .section_inner nav .menus {
  display: flex;
  list-style: none;
  margin: 0 20px 0 0;
  align-items: center;
}

.l_header .section_inner nav .menus li {
  list-style: none;
}

.l_header .section_inner nav .menus li a {
  padding: 5px 15px;
  display: block;
  font-weight: 600;
  font-size: 1em;
  color: var(--color--text);
  text-decoration: none;
  transition: .3s;
}

.l_header .section_inner nav .menus li a:hover {
  opacity: 0.6;
}

.l_header .section_inner nav .button {
  display: inline-block;
  width: 140px;
  text-align: center;
  padding: 5px;
}

.l_header .section_inner nav .button.l_header__login {
  background: var(--color--main);
  border: 2px solid var(--color--main);
  margin-right: 20px;
  transition: .3s;
}

.l_header .section_inner nav .button.l_header__login:hover {
  background: var(--color--bg1);
  border: 2px solid var(--color--main);
  color: var(--color--main);
}

.l_header .section_inner nav .button.l_header__member {
  background: var(--color--bg1);
  border: 2px solid var(--color--main);
  color: var(--color--main);
  transition: .3s;
}

.l_header .section_inner nav .button.l_header__member:hover {
  background: var(--color--main);
  color: var(--color--white);
}

.l_header .section_inner nav .button.l_header__submit {
  background: var(--color--main);
  border: 2px solid var(--color--main);
  color: var(--color--white);
  margin-right: 20px;
  display: block;
}

.l_header .section_inner .l_header__trigger {
  display: none;
  z-index: 2;
  margin: 0;
}

@media (max-width: 1199px) {
  .l_header .section_inner h1 {
    max-width: 208px;
  }

  .l_header .section_inner nav {
    position: absolute;
    right: 10%;
  }

  .l_header .section_inner nav .menus {
    display: none;
  }

  .l_header .section_inner .l_header__trigger {
    display: block;
    width: 30px;
  }

  .l_header .section_inner .l_header__trigger span {
    display: block;
    background: var(--color--text);
    width: 100%;
    height: 2px;
    margin: 8px 0;
    transition: transform linear 0.2s;
  }

  .l_header .section_inner .l_header__trigger:hover span:nth-of-type(1),
  .l_header .section_inner .l_header__trigger.is-active span:nth-of-type(1) {
    transform: translateY(10px) rotate(45deg);
    width: 100%;
  }

  .l_header .section_inner .l_header__trigger:hover span:nth-of-type(2),
  .l_header .section_inner .l_header__trigger.is-active span:nth-of-type(2) {
    display: none;
  }

  .l_header .section_inner .l_header__trigger:hover span:nth-of-type(3),
  .l_header .section_inner .l_header__trigger.is-active span:nth-of-type(3) {
    transform: rotate(-45deg);
    width: 100%;
  }
}

@media (max-width: 767px) {
  .l_header .section_inner h1 {
    max-width: 150px;
  }

  .l_header .section_inner nav {
    position: absolute;
    right: 15%;
  }

  .l_header .section_inner nav .button {
    width: 140px;
  }

  .l_header .section_inner nav .button.l_header__login {
    display: none;
  }

  .l_header .section_inner nav .button.l_header__member.logOut {
    left: 30%;
    position: relative;
  }

  .l_header .section_inner nav .button.l_header__submit {
    display: none;
  }

  .l_header .section_inner .l_header__trigger {
    margin-bottom: 4px;
  }
}

@keyframes navIn {
  0% {
    transform: translate(0, -150px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/*---------------------
 fv
---------------------*/
#fv {
  background-color: var(--color--main);
  padding: 40px 0 80px;
  overflow: hidden;
}

#fv .inner {
  max-width: 1220px;
  width: 95%;
  margin-inline: auto;
  position: relative;
}

#fv img {
  width: 100%;
}

#fv .textArea {
  width: 56%;
  position: absolute;
  top: 35%;
  left: 0;
}

#fv .textArea .fv_list {
  padding-left: 0;
  display: flex;
  justify-content: space-between;
}

#fv .textArea .fv_list_item {
  list-style: none;
  width: 33%;
  aspect-ratio: 1 / 1;
}

#fv .textArea .fv_list_item .line {
  font-size: 1.2em;
  background: linear-gradient(transparent 60%, #ffcc19 30%);
}

#fv .textArea .fv_list_item .big {
  font-size: 2.5em;
  font-weight: bold;
}

#fv .textArea .fv_list_item .tate {
  writing-mode: vertical-rl;
}

#fv .area_button {
  background-color: transparent;
  padding: 0;
  width: 56%;
  position: absolute;
  top: 72%;
  left: 0;
}

#fv .area_button .section_inner {
  padding: 0;
}

#fv .area_button h2 {
  color: #fff;
  font-size: clamp(1rem, 0.8222rem + 0.8889vw, 1.5rem);
  margin-bottom: 0.2em;
}

#fv .area_button .button {
  padding: 15px 20px;
  font-size: clamp(1.2em, 1.8vw, 1.8em);
}

@media screen and (max-width:767px) {
  #fv {
    padding-bottom: 30px;
  }

  #fv .inner::after {
    content: "";
    background-image: url(../img/fv_sp_bk.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0;
    display: block;
    width: 60%;
    height: 300px;
    position: absolute;
    top: 32%;
    right: -15%;
  }

  #fv .textArea {
    position: relative;
    width: 66%;
    z-index: 1;
    margin-top: 2em;
  }

  #fv .area_button {
    position: relative;
    width: 90%;
    margin: 2em auto 0;
    z-index: 1;
  }
}

@media screen and (max-width:599px) {
  #fv .textArea {
    width: 83%;
    font-size: clamp(0.8em, 4vw, 4em);
  }

  #fv .area_button {
    width: 100%;
  }
}

/*---------------------
 area_button
---------------------*/
.area_button {
  text-align: center;
}

.area_button h3 {
  margin: 0 0 5px 0;
  letter-spacing: 0.1em;
  font-size: clamp(1rem, 0.8222rem + 0.8889vw, 1.5rem);
}

.area_button .button_wrapper .button {
  position: relative;
  font-size: clamp(1.3em, 1.7vw, 1.7em);
  letter-spacing: 0.05em;
  max-width: 700px;
  margin: 0 auto 12px;
  box-shadow: 0 6px 0 #ba581b;
  transition: all ease 0.3s;
}

.area_button .button_wrapper .button:hover {
  margin: 12px auto 0;
  box-shadow: none;
}

/*---------------------
 .cta
---------------------*/
.cta .area_button {
  padding: 3vw 10px 5vw;
  background: var(--color--white);
  max-height: 220px;
  height: 20vw;
}

.cta .area_button.upper_footer {
  background: var(--color--bg1);
}

.cta .area_button .button {
  height: 3em;
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.1em;
  font-size: clamp(1.2em, 1.8vw, 1.8em);
  position: relative;
}

.section#solution .area_button .button_wrapper .button::after,
.area_button .button_wrapper .button::after,
.cta .area_button .button::after {
  content: "";
  display: block;
  width: 0.7em;
  height: 0.7em;
  background-image: url(../img/cta_arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: calc(50% - 0.35em);
  right: 5%;
}

@media (max-width: 1199px) {
  .cta .area_button {
    padding: 3vw 10px 5vw;
  }
}

@media (max-width: 767px) {
  .cta .area_button {
    padding: 20px 0;
    height: 160px;
  }

  .cta .area_button .button {
    padding: 10px 0;
  }

  .section#solution .area_button .button_wrapper .button::after,
  .area_button .button_wrapper .button::after,
  .cta .area_button .button::after {
    right: 6%;
  }
}

/*---------------------
 #problem
---------------------*/
section#problem {
  padding: 3vw 0 0;
  background: var(--color--bg2);
  position: relative;
  z-index: 1;
}

section#problem .section_inner {
  position: relative;
  max-width: 900px;
}

section#problem h2 {
  color: var(--color--bg1);
  margin-bottom: 1em;
}

section#problem .problem_item {
  position: absolute;
  text-align: center;
}

section#problem .problem_item01 {
  top: 64%;
  left: 7%;
}

section#problem .problem_item02 {
  top: 25%;
  left: 17%;
}

section#problem .problem_item03 {
  top: 14%;
  left: 41%;
}

section#problem .problem_item04 {
  top: 28%;
  right: 11%;
}

section#problem .problem_item05 {
  top: 65%;
  right: 6%;
}

section#problem .problem_item p {
  font-size: clamp(1rem, 0.5752rem + 0.885vw, 1.25rem);
  font-weight: 600;
}

section#problem .problem_item p .sp-br {
  display: none;
}

section#problem .problem_bk.pc {
  max-width: 1220px;
  width: 100%;
}

section#problem .problem_bk.sp {
  display: none;
}

/* section#problem .section_inner .flex-wrapper .flex-one {
  position: relative;
  border: 3px solid var(--color--bg2);
  margin-bottom: 110px;
  background: var(--color--bg2);
}
section#problem .section_inner .flex-wrapper .flex-one .problem__number {
  position: absolute;
  width: 174px;
  margin: 0 auto;
  background: var(--color--white);
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}
section#problem .section_inner .flex-wrapper .flex-one .imageArea {
  background: var(--color--white);
  padding-top: 40px;
}
section#problem .section_inner .flex-wrapper .flex-one .imageArea h3 {
  font-size: clamp(1em, 1.3vw, 1.3em);
  text-align: center;
  padding: 10px;
  margin: 0;
}
section#problem .section_inner .flex-wrapper .flex-one .imageArea figure {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  text-align: center;
}
section#problem .section_inner .flex-wrapper .flex-one .textArea {
  color: var(--color--white);
  padding: 15px;
}
section#problem .section_inner .flex-wrapper .flex-one .textArea p {
  font-size: 1.1em;
  margin: 0;
  padding: 0;
} */

/* @media (max-width: 1199px) {
  section#problem .section_inner .flex-wrapper .flex-one {
    width: 32%;
    border: 2px solid var(--color--bg2);
    margin-bottom: 60px;
  }
  section#problem .section_inner .flex-wrapper .flex-one .problem__number {
    width: 120px;
    top: -30px;
    left: 50%;
  }
  section#problem .section_inner .flex-wrapper .flex-one .imageArea {
    background: var(--color--white);
    padding-top: 40px;
  }
  section#problem .section_inner .flex-wrapper .flex-one .imageArea h3 {
    height: 4.5em;
  }
  section#problem .section_inner .flex-wrapper .flex-one .imageArea figure {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    padding: 0;
  }
  section#problem .section_inner .flex-wrapper .flex-one .textArea {
    padding: 10px;
  }
  section#problem .section_inner .flex-wrapper .flex-one .textArea p {
    font-size: 0.9em;
  }
} */
@media screen and (max-width:767px) {
  section#problem {
    padding: 3vw 0;
  }

  section#problem .problem_item01 {
    top: 50%;
    left: 8%;
  }

  section#problem .problem_item02 {
    top: 20%;
    left: 7%;
  }

  section#problem .problem_item03 {
    top: 11%;
    left: 35%;
  }

  section#problem .problem_item04 {
    top: 23%;
    right: 7%;
  }

  section#problem .problem_item05 {
    top: 53%;
    right: 6%;
  }

  section#problem .problem_item p {
    font-size: clamp(0.75rem, 0.3921rem + 1.7897vw, 1.25rem);
  }

  section#problem .problem_bk.sp {
    display: block;
    width: 100%;
  }

  section#problem .problem_bk.pc {
    display: none;
  }

  /* section#problem .section_inner .flex-wrapper .flex-one {
    width: 49%;
    border: 2px solid var(--color--bg2);
    margin-bottom: 60px;
  }
  section#problem .section_inner .flex-wrapper .flex-one .imageArea h3 {
    font-size: 0.9em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section#problem .section_inner .flex-wrapper .flex-one .imageArea figure {
    height: 120px;
  }
  section#problem .section_inner .flex-wrapper .flex-one .problem__number {
    width: 100px;
    top: -20px;
  }
  section#problem .section_inner .flex-wrapper .flex-one .imageArea {
    padding-top: 28px;
  }
  section#problem .section_inner .flex-wrapper .flex-one .imageArea img {
    width: 80%;
  } */
}

@media screen and (max-width:599px) {
  section#problem .section_inner {
    padding: 0 3px;
  }

  section#problem .problem_item01 {
    top: 50%;
    left: 6%;
  }

  section#problem .problem_item02 {
    top: 14%;
    left: 9%;
  }

  section#problem .problem_item03 {
    top: 4%;
    left: 36%;
  }

  section#problem .problem_item04 {
    top: 23%;
    right: 6%;
  }

  section#problem .problem_item05 {
    top: 52%;
    right: 4%;
  }

  section#problem .problem_item p .sp-br {
    display: block;
  }
}

@media screen and (max-width:420px) {
  section#problem .problem_item01 {
    top: 47%;
    left: 4%;
  }

  section#problem .problem_item02 {
    top: 10%;
    left: 6%;
  }

  section#problem .problem_item03 {
    top: 1%;
    left: 32%;
  }

  section#problem .problem_item04 {
    top: 21%;
    right: 3%;
  }

  section#problem .problem_item05 {
    top: 48%;
    right: 1%;
  }
}

/*---------------------
 #solution
---------------------*/
section#solution {
  background: var(--color--white);
  margin-top: -2px;
  overflow: hidden;
}

section#solution .title_wrapper {
  position: relative;
  background: var(--color--bg2);
  color: var(--color--white);
  font-size: clamp(0.875rem, 0.2972rem + 2.8889vw, 2.5rem);
  text-align: center;
  font-weight: 600;
  padding: 3vw 10px;
  clip-path: polygon(0 -1px, 100% -1px, 100% 0%, 50% 100%, 0 0%);
}

section#solution .section_inner {
  padding: 2vw 10px;
}

section#solution .section_inner .title {
  padding-left: 1em;
}

section#solution .section_inner h2 {
  font-size: clamp(1rem, -0.0667rem + 5.3333vw, 4rem);
  font-weight: bold;
  color: var(--color--text);
  background-image: url(../img/solution01.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 0;
}

section#solution .section_inner h2 img {
  max-width: 250px;
  width: 5em;
  margin-right: 0.3em;
  margin-bottom: 0.3em;
}

section#solution .section_inner h2 span.big {
  font-size: 1.25em;
}

section#solution .area_button {
  margin: 5vw auto 3vw;
  max-width: 580px;
  height: 160px;
  position: relative;
  z-index: 0;
}

section#solution .area_button::before {
  content: "";
  display: block;
  max-width: 300px;
  width: 48%;
  height: 20vw;
  background-image: url(../img/solution02.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
  position: absolute;
  bottom: 20px;
  left: -28%;
  z-index: -1;
}

section#solution .area_button::after {
  content: "";
  display: block;
  max-width: 300px;
  width: 48%;
  height: 33vw;
  background-image: url(../img/solution03.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  position: absolute;
  bottom: 20px;
  right: -28%;
  z-index: -1;
}

section#solution .area_button .button_wrapper .button {
  max-width: 580px;
  padding: 18px 0;
}

@media screen and (max-width:767px) {
  section#solution .area_button::before {
    left: -22%;
    bottom: 50px;
    height: 30vw;
  }

  section#solution .area_button::after {
    right: -22%;
    bottom: 50px;
    height: 36vw;
  }

  section#solution .area_button .button_wrapper .button {
    padding: 10px 0;
  }
}

@media screen and (max-width:599px) {
  section#solution .area_button::before {
    bottom: 70px;
  }

  section#solution .area_button::after {
    bottom: 70px;
  }
}

/*---------------------
 #about
---------------------*/
section#about {
  background: var(--color--bg1);
  scroll-margin-top: 90px;
}

section#about .title_wrapper {
  position: relative;
  background: var(--color--main);
  color: var(--color--white);
  font-size: clamp(1.4em, 2.3vw, 2.3em);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.1em;
}

section#about .title_wrapper p .bottom {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

section#about .title_wrapper p img {
  max-width: 300px;
  width: 55%;
}

/* section#about .title_wrapper::after {
  display: block;
  content: "";
  width: 120px;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 40px solid var(--color--main);
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
} */
section#about .section_inner {
  padding: 2vw 10px;
}

section#about .section_inner .catch {
  text-align: center;
  font-weight: 600;
  font-size: clamp(1em, 1.5vw, 1.5em);
  letter-spacing: 2px;
}

section#about .section_inner figure {
  text-align: center;
  margin: 0;
}

section#about .section_inner .flex-wrapper {
  max-width: 900px;
  margin: 50px auto;
}

section#about .section_inner .flex-wrapper .flex-one {
  background: var(--color--white);
  width: 44%;
  position: relative;
}

section#about .section_inner .flex-wrapper .flex-one:first-child::after {
  position: absolute;
  top: 0;
  left: 102%;
  display: block;
  content: "";
  background: url(../img/pc_arrow.png) no-repeat center;
  background-size: 70px;
  width: 96px;
  height: 100%;
}

section#about .section_inner .flex-wrapper .flex-one h3 {
  background: var(--color--main);
  color: var(--color--white);
  margin: 0 auto 0;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 20px;
  height: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

section#about .section_inner .flex-wrapper .flex-one .textArea {
  padding: 20px 15px;
}

section#about .section_inner .flex-wrapper .flex-one .textArea p {
  margin: 0;
  padding: 0;
  font-size: clamp(1em, 1.5vw, 1.5em);
  font-weight: 600;
}

section#about .section_inner .flex-wrapper .flex-one .textArea p.small {
  font-size: 0.9em;
  color: var(--color--bg2);
}

section#about .section_inner .flex-wrapper .flex-one:nth-child(1) h3 {
  background: var(--color--bg2);
}

/*
section#about .section_inner .flex-wrapper .flex-one:nth-child(2) .textArea {
  margin-top: 1.5em;
}
*/

@media (max-width: 767px) {
  section#about {
    scroll-margin-top: 70px;
  }

  /* section#about .title_wrapper::after {
    display: block;
    content: "";
    width: 80px;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid var(--color--main);
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
  } */
  section#about .section_inner .flex-wrapper .flex-one {
    width: 100%;
  }

  section#about .section_inner .flex-wrapper .flex-one:first-child {
    margin-bottom: 75px;
  }

  section#about .section_inner .flex-wrapper .flex-one:first-child::after {
    position: absolute;
    top: auto;
    bottom: -90px;
    left: 0;
    display: block;
    content: "";
    background: url(../img/sp_arrow.png) no-repeat center;
    background-size: 70px;
    width: 100%;
    height: 100px;
  }

  section#about .section_inner .flex-wrapper .flex-one:nth-child(2) .textArea {
    margin-top: 0;
  }

  section#about .section_inner h2 {
    margin-top: 30px;
    font-size: 1.3em;
  }

  section#about .section_inner .catch {
    letter-spacing: 0;
  }

  section#about .section_inner .frame {
    background: var(--color--white);
    margin: 20px;
  }

  section#about .section_inner .frame h3 {
    background: var(--color--main);
    color: var(--color--white);
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    font-size: 1.2em;
    line-height: 1;
  }

  section#about .section_inner .frame .textArea {
    padding: 20px;
  }

  section#about .section_inner .frame .textArea p {
    margin: 0;
    padding: 0;
    font-weight: 600;
  }
}

/*---------------------
 #flow
---------------------*/
section#flow {
  scroll-margin-top: 50px;
  padding: 3vw 0;
}

section#flow .section_inner {
  max-width: 980px;
  margin-inline: auto;
}

section#flow .section_inner h2 {
  font-size: clamp(1.4em, 2.3vw, 2.3em);
  color: #fff;
  background-color: var(--color--main);
  padding: 15px 0;
  position: relative;
}

section#flow .section_inner h2::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  /* 左の透明な三角形部分 */
  border-right: 80px solid transparent;
  /* 右の透明な三角形部分 */
  border-top: 30px solid var(--color--main);
  position: absolute;
  bottom: -28px;
  left: calc(50% - 80px);
}

section#flow .section_inner .flow_cont {
  padding: 20px 20px 20px 50px;
  display: grid;
  grid-auto-rows: 1fr;
}

section#flow .section_inner .flow_item {
  padding: 0px 10px 10px 90px;
  position: relative;
  border-left: 4px solid #d5d5d5;
  color: #605e5e;
}

section#flow .section_inner .flow_item03 {
  border-left: none;
}

section#flow .section_inner .flow_item::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: -40px;
}

section#flow .section_inner .flow_item01::before {
  background-image: url(../img/flow01.png);
}

section#flow .section_inner .flow_item02::before {
  background-image: url(../img/flow02.png);
}

section#flow .section_inner .flow_item03::before {
  background-image: url(../img/flow03.png);
}

section#flow .section_inner .flow_item .txt h3 {
  font-size: clamp(1.125rem, 0.9028rem + 1.1111vw, 1.75rem);
  display: inline-block;
  border-bottom: var(--color--bg2) 2px solid;
  margin: 0;
  padding-bottom: 10px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

section#flow .section_inner .flow_item .txt p {
  font-size: clamp(1em, 1.5vw, 1.5em);
  font-weight: 600;
}

section#flow .section_inner .flow_item .txt .small {
  font-size: 0.9em;
  color: var(--color--sub1);
}

@media screen and (max-width:767px) {
  section#flow .section_inner .flow_cont {
    padding: 10px 10px 10px 30px;
  }

  section#flow .section_inner .flow_item {
    padding-left: 40px;
  }

  section#flow .section_inner .flow_item::before {
    width: 50px;
    height: 50px;
    left: -30px;
  }
}

/*---------------------
 #reason
---------------------*/
section#reason {
  scroll-margin-top: 90px;
  padding-bottom: 3vw;
  background: url(../img/bg.jpg);
  background-size: 100%;
}

section#reason .title_wrapper {
  position: relative;
  background: var(--color--main);
  color: var(--color--white);
  font-size: clamp(1rem, 0.7333rem + 1.3333vw, 1.75rem);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0 10px;
}

section#reason .title_wrapper p .bottom {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

section#reason .title_wrapper p img {
  max-width: 300px;
  width: 55%;
}

section#reason .section_inner {
  padding: 2vw 0;
}

section#reason .section_inner article {
  position: relative;
  background: var(--color--bg1);
  padding: 20px;
  border-bottom: 2px solid var(--color--text);
  border-top: 2px solid var(--color--text);
  margin: 80px auto;
  max-width: 900px;
}

section#reason .section_inner article:nth-child(3) .number {
  position: absolute;
  top: -30px;
  right: 0;
  left: auto;
  color: var(--color--sub2);
  font-weight: 900;
  font-size: 4em;
  line-height: 1;
  padding: 0 10px;
  background: linear-gradient(to bottom, var(--color--white) 50%, var(--color--bg1) 50%);
}

section#reason .section_inner article .number {
  position: absolute;
  top: -30px;
  left: 0;
  color: var(--color--sub2);
  font-weight: 900;
  font-size: 4em;
  line-height: 1;
  padding: 0 10px;
  background: linear-gradient(to bottom, var(--color--white) 50%, var(--color--bg1) 50%);
}

section#reason .section_inner article h3 {
  text-align: center;
}

section#reason .section_inner article figure {
  text-align: center;
  max-width: 572px;
  margin: 20px auto;
}

section#reason .section_inner article p {
  font-size: clamp(0.9em, 1.3vw, 1.3em);
  max-width: 780px;
  margin: 20px auto;
}

@media (max-width: 767px) {
  section#reason {
    background-size: 200%;
    scroll-margin-top: 70px;
  }

  section#reason .section_inner h2 {
    font-size: 1.3em;
  }

  section#reason .section_inner article {
    padding: 15px;
    border-bottom: 2px solid var(--color--text);
    border-top: 2px solid var(--color--text);
    margin: 50px auto;
  }

  section#reason .section_inner article:nth-child(3) .number {
    position: absolute;
    top: -15px;
    font-size: 2em;
  }

  section#reason .section_inner article .number {
    position: absolute;
    top: -15px;
    font-size: 2em;
  }

  section#reason .section_inner article h3 {
    font-size: 1.6em;
  }

  section#reason .section_inner article figure {
    max-width: 280px;
  }

  section#reason .section_inner article p {
    margin: 10px auto;
  }
}

/*---------------------
 #comparison
---------------------*/
section#comparison {
  background: var(--color--bg1);
  padding: 4vw 0 6vw;
}

section#comparison .section_inner h2 {
  margin-bottom: 1em;
}

section#comparison .section_inner table {
  width: 100%;
  font-size: clamp(1em, 1.5vw, 1.5em);
  letter-spacing: 3px;
  font-weight: 600;
  text-align: center;
  background: var(--color--white);
}

section#comparison .section_inner table br.show-sp {
  display: none;
}

section#comparison .section_inner table thead {
  background: var(--color--bg2);
  color: var(--color--white);
}

section#comparison .section_inner table thead th {
  padding: 20px;
  width: 25%;
  text-align: center;
  border: 1px solid #DBDBDB;
}

section#comparison .section_inner table thead th:nth-child(1) {
  border-right: unset;
}

section#comparison .section_inner table thead th:nth-child(3) {
  border-left: unset;
}

section#comparison .section_inner table thead th img {
  width: 200px;
  display: block;
  margin: auto;
}

section#comparison .section_inner table thead th.ygreen {
  background: var(--color--main);
  border: unset;
  border-left: 3px solid var(--color--main);
  border-right: 3px solid var(--color--main);
  border-top: 1px solid var(--color--main);
}

section#comparison .section_inner table thead th.ygreen.table_logo {
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  letter-spacing: 0;
}

section#comparison .section_inner table tbody tr:nth-child(odd) {
  background: #F4F1E9;
}

section#comparison .section_inner table tbody tr:last-child .ygreen {
  border-bottom: 3px solid var(--color--main);
}

section#comparison .section_inner table tbody tr th {
  padding: 15px;
}

section#comparison .section_inner table tbody tr td {
  padding: 15px;
  border-right: 1px solid #DBDBDB;
  color: var(--color--bg2);
}

section#comparison .section_inner table tbody tr td:last-child {
  border-right: none;
}

section#comparison .section_inner table tbody tr td.ygreen {
  color: var(--color--sub1);
  border-right: 3px solid var(--color--main);
  border-left: 3px solid var(--color--main);
}

section#comparison .section_inner table tbody tr td.ygreen:has(.small) {
  line-height: 1.2;
}

section#comparison .section_inner table tbody tr td.ygreen .big {
  font-size: 1.8em;
  font-weight: 800;
}

section#comparison .section_inner table tbody tr td.ygreen .small {
  font-size: 0.5em;
  letter-spacing: normal;
  line-height: normal;
}

section#comparison .section_inner .scroll_icon {
  display: none;
}

@media (max-width: 767px) {
  section#comparison {
    background: var(--color--bg1);
    padding: 4vw 0 6vw;
  }

  section#comparison .section_inner h2 {
    letter-spacing: 0;
    font-size: 1.4em;
  }

  section#comparison .section_inner .table_wrapper {
    overflow-x: scroll;
  }

  section#comparison .section_inner table {
    width: 100%;
    letter-spacing: 0;
  }

  section#comparison .section_inner table br.show-sp {
    display: block;
  }

  section#comparison .section_inner table tbody tr th {
    padding: 15px 4px;
  }

  section#comparison .section_inner table thead th img {
    width: 120px;
  }

  section#comparison .section_inner table thead th.ygreen.table_logo {
    font-size: 0.8rem;
    padding: 15px 4px;
  }

  section#comparison .section_inner table tbody tr td {
    padding: 15px 4px;
  }

  section#comparison .section_inner table tbody tr td.ygreen .big {
    font-size: 1.6em;
  }

  section#comparison .section_inner .scroll_icon {
    padding: 10px 0;
    text-align: right;
    display: block;
  }
}

/*---------------------
 #voice
---------------------*/
section#voice {
  scroll-margin-top: 90px;
  background: var(--color--bg1);
  padding: 4vw 0 6vw;
}

section#voice .section_inner h2 {
  margin-bottom: 1em;
}

section#voice .section_inner .flex-wrapper .flex-one {
  background: var(--color--white);
  padding: 2em;
  box-shadow: 8px 8px 4px 0px #D9D1C0;
  margin-bottom: 4vw;
}

section#voice .section_inner .flex-wrapper .flex-one .item-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

section#voice .section_inner .flex-wrapper .flex-one .item-wrapper .item_image {
  width: 30%;
  text-align: center;
}

section#voice .section_inner .flex-wrapper .flex-one .item-wrapper .item_text {
  width: 68%;
  font-weight: 600;
  font-size: clamp(1em, 1.3vw, 1.3em);
  line-height: 1.8;
}

section#voice .section_inner .flex-wrapper .flex-one h3 {
  color: var(--color--main);
}

section#voice .section_inner .flex-wrapper .flex-one p {
  font-size: clamp(0.9em, 1.3vw, 1.3em);
}

@media (max-width: 767px) {
  section#voice {
    scroll-margin-top: 70px;
  }

  section#voice .section_inner h2 {
    letter-spacing: 6px;
    margin-bottom: 1em;
  }

  section#voice .section_inner .flex-wrapper .flex-one {
    padding: 1em 0;
    box-shadow: none;
    margin: 10px 20px;
  }

  section#voice .section_inner .flex-wrapper .flex-one .item-wrapper {
    padding: 0 .5em;
  }

  section#voice .section_inner .flex-wrapper .flex-one h3 {
    font-size: 1.2em;
    padding: 0 2em;
  }

  section#voice .section_inner .flex-wrapper .flex-one p {
    font-size: clamp(1em, 1.3vw, 1.3em);
  }

  section#voice .section_inner .flex-wrapper .flex-one>p {
    padding: 0 2em;
  }

  section#voice .slick-track {
    display: flex;
  }

  section#voice .slick-slide {
    height: auto !important;
  }

  section#voice .slide-arrow {
    position: absolute;
    margin-top: -15px;
  }

  section#voice .prev {
    position: absolute;
    top: 50%;
    left: 0;
    width: 50px;
    height: 50px;
    z-index: 9;
    background-size: contain;
    background-image: url(../img/prev_btn.png);
  }

  /*
  section#voice .prev .prev-arrow {
    position: absolute;
    top: 55%;
    left: 4px;
    border-left: 0 solid transparent;
    border-right: 15px solid var(--color--white);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
  */
  section#voice .next {
    position: absolute;
    top: 50%;
    right: 0;
    width: 50px;
    height: 50px;
    z-index: 9;
    background-size: contain;
    background-image: url(../img/next_btn.png);
  }
}

/*
  section#voice .next .next-arrow {
    position: absolute;
    top: 55%;
    right: 4px;
    border-right: 0 solid transparent;
    border-left: 15px solid var(--color--white);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
*/
@media (max-width: 400px) {
  section#voice .section_inner .flex-wrapper .flex-one .item-wrapper .item_text {
    font-size: 3.6vw;
  }
}

/*---------------------
 #qa
---------------------*/
section#qa {
  padding: 4vw 0 6vw;
  scroll-margin-top: 90px;
}

section#qa .section_inner h2 {
  margin-bottom: 1em;
}

@media screen and (max-width:767px) {
  section#qa {
    scroll-margin-top: 70px;
  }
}

/*---------------------
 Accordion
-----------------------*/
.acMenu {
  font-size: clamp(15px, 1.4vw, 1.4em);
  max-width: 900px;
  margin: 0 auto;
}

.acMenu dt {
  display: block;
  position: relative;
  background: var(--color--bg3) url(../img/arrow_down.svg) no-repeat top 30px right 20px;
  background-size: 30px 20px;
  width: 100%;
  padding: 20px 60px 20px 5em;
  margin: 20px 0 0 0;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 600;
  display: flex;
}

.acMenu dt.active {
  background-image: url(../img/arrow_up.svg);
}

.acMenu dt .q {
  position: absolute;
  top: 20px;
  left: 20px;
  color: var(--color--main);
  font-size: 1.3em;
  line-height: 1;
}

.acMenu dd {
  position: relative;
  margin: 0;
  width: 100%;
  padding: 20px;
  display: none;
  cursor: pointer;
  font-size: 1.1em;
  background: var(--color--bg3);
  padding: 20px 60px 20px 5em;
}

.acMenu dd .a {
  position: absolute;
  top: 20px;
  left: 20px;
  color: var(--color--sub1);
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 767px) {
  .acMenu dt {
    padding: 20px 60px 20px 3em;
    background-size: 20px;
  }

  .acMenu dd {
    padding: 20px 60px 20px 3em;
  }

  .acMenu dt.active {
    background-image: url(../img/arrow_up.svg);
    background-size: 20px;
  }
}

/*---------------------
 top_form
---------------------*/
section#top_form {
  padding: 4vw 0 8vw;
}

section#top_form .section_inner {
  max-width: 900px;
  margin-inline: auto;
}

section#top_form .section_inner h2 {
  margin-bottom: 1em;
}

@media screen and (max-width:767px) {
  section#top_form {
    padding: 30px 0 60px;
  }
}

/* ///////////////////////////////////////////////////////////

フォームのデザイン

//////////////////////////////////////////////////////////// */
#top_form .formCon {
  display: flex;
  margin: 1em 0;
  flex-direction: column;
}

@media(max-width:960px) {
  #top_form .formCon {
    margin: 0;
  }
}

#top_form .formTit {
  height: auto;
  padding: 0;
  font-size: 1em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 8px;
  font-weight: bold;
}

@media(max-width:960px) {
  #top_form .formTit {
    height: auto;
    width: 100%;
    margin-top: 1rem;
  }
}

#top_form .req {
  background: var(--color--sub1);
  color: #fff;
  font-size: 14px;
  border-radius: 2px;
  height: 20px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  font-weight: normal;
}

#top_form .formImp {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: .5rem 0 1rem;
}

#top_form .formmicro {
  font-size: .7em;
  margin-top: 5px;
}

#top_form .formBtn {
  margin: 1em auto 0;
  text-align: center;
  width: fit-content;
  min-width: 356px;
  background: var(--color--sub1);
  color: #fff;
  border-radius: 50px;
  position: relative;
  font-weight: bold;
  overflow: hidden;
  transition: all 0.4s ease;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  max-height: 80px;
}

#top_form .formBtn:hover {
  opacity: 0.8;
}

#top_form .formBtn input {
  background: none;
  border: none;
  height: 100%;
}

/* #top_form .formBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color--sub2);
  transition: opacity 0.4s ease;
  opacity: 0;
  z-index: -1;
}
#top_form .formBtn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 7%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  border-top: solid 2px var(--color--bg1);
  border-right: solid 2px var(--color--bg1);
  z-index: 1;
}
@media (any-hover: hover) {
  #top_form .formBtn:hover::before {
    opacity: 1;
  }
} */
#top_form .formBtn.back {
  margin: 1.5em auto;
  text-align: center;
  width: fit-content;
  min-width: 356px;
  background: var(--color--gray);
  color: var(--color--bg1) !important;
  border-radius: 5px;
  position: relative;
  font-weight: bold;
  overflow: hidden;
  transition: opacity 0.4s ease;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  max-height: 80px;
}

#top_form .formBtn.back::before {
  content: none;
}

#top_form .formBtn.back::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 7%;
  transform: translateY(-50%) rotate(-135deg);
  width: 8px;
  height: 8px;
  border-top: solid 2px var(--color--bg1);
  border-right: solid 2px var(--color--bg1);
  z-index: 1;
}

@media (any-hover: hover) {
  #top_form .formBtn.back:hover {
    opacity: .7;
  }
}

@media(max-width:960px) {

  #top_form .formBtn,
  #top_form .formBtn.back {
    min-width: 85%;
  }

  #top_form .formBtn input,
  #top_form .formBtn.back input {
    font-size: 15px;
    font-weight: 600;
  }
}

#top_form .formImp select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-size: 20px, 100%;
  background: var(--color--bg1);
  border-radius: 4px;
  padding: 0.8em;
}

#top_form .formImp input,
#top_form .formImp textarea {
  background-size: 20px, 100%;
  background: var(--color--bg1);
  border-radius: 4px;
  padding: 0.8em;
}

#top_form .formImp label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px 0;
}

#top_form .formImp label input {
  width: auto;
}

#top_form .postal {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

#top_form input.postal {
  width: 40%;
}

#top_form input.file {
  width: auto;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
}

#top_form .check {
  margin: 2.5em auto;
  padding: 1em 1.5em;
  border: 2px solid var(--color--bg2);
  font-size: 14px;
  letter-spacing: 0;
  flex-direction: column;
  position: relative;
  align-items: center;
}

#top_form .checkB {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  position: relative;
  column-gap: .5rem;
}

#top_form input.checkbox {
  width: auto;
}

#top_form .form input:focus,
#top_form .form select:focus,
#top_form .form textarea:focus {
  border: 1px solid var(--color--black);
  outline: none;
}

/* #top_form .formBtn input[type=submit]{
box-shadow: 0 6px 0 #ba581b;
  transition: all ease 0.3s;
}
#top_form .formBtn input[type=submit]:hover {
  margin: 12px auto 0;
  box-shadow: none;
} */
/*エラー時*/
#top_form .checkB div.form_error {
  position: absolute;
  color: var(--color--sub1);
  background: var(--color--sub2);
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding: 4px 0px;
  bottom: -22px;
  line-height: 1.1;
}

#top_form .formImp div.form_error {
  background: var(--color--sub2);
  color: var(--color--sub1);
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  padding: 4px 0px;
  margin-bottom: 5px;
  order: -1;
  width: 100%;
}

#top_form .formImp select.form_error {
  border: 1px solid var(--color--sub1);
}

#top_form .formImp input.form_error {
  border: 1px solid var(--color--sub1);
  background: rgba(255, 242, 244, .3)
}

#top_form .labelerror {
  margin-top: 20px;
}

#top_form .formImp.labelerror div.form_error {
  position: absolute;
  top: 0px;
  pointer-events: none;
}

#top_form .formImp_checkbox {
  width: 100%;
}

#top_form .formImp_checkbox label {
  width: 50%;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  margin: 2px 0;
}

@media (any-hover: hover) {
  #top_form .formImp_checkbox label:hover {
    background: var(--light-blue);
  }
}

#top_form .formImp_checkbox label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: var(--color--bg1);
  border-radius: 0;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

#top_form .formImp_checkbox label input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  width: 7px;
  height: 14px;
  border: solid var(--color--bg2);
  border-width: 0 2px 2px 0;
  transform: translate(-45%, -50%) rotate(45deg);
}

#top_form .formImp.harf select,
#top_form .formImp.harf input {
  width: 100%;
}

#top_form .formImp.select {
  position: relative;
}

#top_form .formImp.select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(0% + 3%);
  transform: translateY(-50%) rotate(135deg);
  width: 8px;
  height: 8px;
  border-top: solid 2px var(--color--main);
  border-right: solid 2px var(--color--main);
  z-index: 1;
  margin-top: -1px;
}

#top_form .optional {
  background: var(--color--gray);
  color: #fff;
  font-size: 14px;
  border-radius: 2px;
  height: 20px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  font-weight: normal;
}

#top_form .multiple_allowed {
  background: #fff;
  color: var(--dark-gray);
  border: 1px solid var(--color--bg2);
  font-size: 14px;
  border-radius: 2px;
  height: 20px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  font-weight: normal;
}

@media(max-width:960px) {
  #top_form .formImp {
    margin-bottom: 0;
  }

  #top_form .check {
    padding: 1em;
    font-size: 12px;
  }

  #top_form .checkB {
    margin: 5px auto;
    column-gap: 0;
  }

  #top_form .formImp_checkbox label {
    width: 100%;
    padding: 6px 16px;
  }

  #top_form .formImp.harf select,
  #top_form .formImp.harf input {
    width: 100%;
  }

  #top_form .formImp.select::after {
    right: 5%;
  }
}

#top_form .formCon.confirmation>.formTit {
  color: var(--color--main);
}

#top_form .formCon.confirmation>.formImp {
  border-bottom: 1px solid var(--color--bg2);
  padding-bottom: 5px;
}

/*---------------------
 .l_footer
---------------------*/
footer.l_footer {
  background: var(--color--main);
  text-align: center;
  margin: 0;
  padding: 1.5vw 0;
  font-weight: 600;
  width: 100%;
}

footer.l_footer.bottom {
  position: absolute;
  bottom: 0;
}

footer.l_footer a {
  color: var(--color--text);
  margin: 0;
  transition: .3s;
}

footer.l_footer a:hover {
  opacity: 0.6;
}

footer.l_footer .logo img {
  width: 200px;
}

footer.l_footer .logo p {
  margin: 0;
}


/*----------------------------
* スマホメニュー
*----------------------------*/
#navAll {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color--bg1);
}

#navAll .menu__item {
  width: 100%;
  height: auto;
  padding: 0.5em 1em;
  text-align: center;
  color: var(--color--text);
  box-sizing: border-box;
}

/* アニメーション前のメニューの状態 */
#navAll {
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.5);
  transition: all 0.3s ease;
  z-index: 10;
}

#navAll ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navAll ul li a {
  color: var(--color--text);
  display: block;
  padding: 10px 0;
  font-weight: 600;
  font-size: 30px;
}

/* アニメーション後のメニューの状態 */
#navAll.is-active {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
}

/*---------------------
 contact
-----------------------*/
body.contact main h2 {
  font-size: clamp(1.3em, 1.5vw, 1.5em);
  margin-bottom: 1em;
}

/*
body.contact {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}
*/

/*---------------------------
 * form
 * -------------------------*/
.error_box {
  max-width: 600px;
  display: flex;
  background: #ffcbae;
  flex-direction: column;
  margin: 1em auto;
  align-items: center;
}

.error_box h3 {
  background: var(--color--sub1);
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0.5rem;
  font-size: 1rem;
  color: #fff;
}

#error_message {
  margin: 0 auto;
  padding: 1em 0 1em 1em;
}

#error_message li {
  font-size: 0.9rem;
}

.form_box {
  max-width: 900px;
  margin: 0 auto;
}

.form-item {
  padding: 20px 5px;
  border-bottom: 1px solid var(--color--bg2);
}

/*
.form-item .form-item_input.address {
  border: 1px solid var(--color--pgray);
  border-radius: 4px;
  padding: 0.8em;
  background: var(--color--pgray);
}
*/
.form-item .form-item_input.multi {
  display: flex;
  align-items: center;
}

.form-item .form-item_input.multi label {
  padding: 0 2em 0 0;
}

.form-item .form-item_input.multi .selectbox {
  padding: 0.8em;
  width: 40%;
  margin: 0 1.5em 0 0;
}

.form-item .form-item_input.multi .finance {
  margin-right: 8px;
  transform: scale(1.4);
}

.form-item .form-item_input.multi_under {
  margin: 1em 0 0 30%;
}

.form-item .require {
  display: inline-block;
  font-size: 0.8em;
  background: var(--color--sub1);
  color: var(--color--white);
  border-radius: 3px;
  padding: 0 5px;
  margin-right: 5px;
}

.form-item .optional {
  display: inline-block;
  font-size: 0.8em;
  background: var(--color--gray);
  color: var(--color--white);
  border-radius: 3px;
  padding: 0 5px;
  margin-right: 5px;
}

.form-item .preview {
  max-width: 300px;
}

.form-item input {
  border: 1px solid var(--color--pgray);
  border-radius: 4px;
  padding: 0.8em;
  background: var(--color--pgray);
}

.form-item input.input-large {
  width: 100%;
}

.form-item input.input-minimum {
  max-width: 100px;
  width: 40%;
}

.form-item input[type=file] {
  border: none;
  background: none;
  padding: 0;
}

.form-item input:focus {
  background: var(--color--white);
  border-color: var(--color--bg2);
  outline: none;
}

.form-item textarea {
  border: 1px solid var(--color--pgray);
  border-radius: 4px;
  padding: 0.8em;
  width: 100%;
  background: var(--color--pgray);
}

.form-item textarea:focus {
  background: var(--color--white);
  border-color: var(--color--bg2);
  outline: none;
}

.form-item a {
  color: var(--color--main);
}

input[type=submit],
.btn_box button {
  background: var(--color--sub1);
  color: var(--color--white);
  text-align: center;
  padding: 10px 80px;
  border-radius: 8px;
  cursor: pointer;
}

.text-center input[type=submit] {
  background: var(--color--sub1);
  color: var(--color--white);
  text-align: center;
  padding: 8px 60px;
  padding: 10px 20px;
  max-width: 180px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
}

.btn_box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.btn_box input,
.btn_box button {
  margin: 2em 1em 0;
}

.btn_box .back_btn {
  background: var(--color--sub2);
}

.frame {
  background: var(--color--white);
  padding: 2em;
  margin: 2em auto;
  border-radius: 30px;
  max-width: 800px;
}

.frame.frame__login {
  border: 2px solid var(--color--text);
  margin: 10px auto;
  background: var(--color--white);
}

.selectbox {
  border: 1px solid var(--color--pgray);
  border-radius: 4px;
  padding: 0.8em;
  background: var(--color--pgray);
  display: flex;
}

.selectbox select {
  width: 100%;
}

@media (max-width: 600px) {
  .error_box {
    margin: 1em;
  }

  .addFileUploadBtn {
    bottom: -6px;
    font-size: 0.9rem;
  }

  .plus-icon {
    width: 20px;
    height: 20px;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .form-box {
    margin: 0 1em;
  }

  .frame {
    margin: 2em 1em;
  }

  .form-item .form-item_label {
    padding-bottom: 0.5em;
    font-weight: 600;
  }

  .mainUpload {
    flex-direction: column;
  }

  input[type=submit] {
    padding: 10px 20px;
  }

  .btn_box {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
  }

  .btn_box input,
  .btn_box button {
    margin: 1em 1em 0;
  }

  .form-item .form-item_input.multi_under {
    margin: 1em 0 0 0;
  }

  .form-item .form-item_input.multi {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .form-item .form-item_input.multi label {
    padding: 0 0 1em;
    display: flex;
    align-items: center;
  }

  .form-item .form-item_input.multi .selectbox.second {
    margin-top: 1em;
  }

  .form-item .form-item_input.multi .finance {
    transform: scale(0.7);
  }
}

@media (min-width: 768px) {
  .form-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .form-side {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .form-item .form-item_label {
    width: 28%;
    font-weight: 600;
  }

  .form-item .form-item_input {
    width: 70%;
  }
}

/*---------------------------
 * sub
 * -------------------------*/
body.sub section h2 {
  margin-bottom: 1em;
}

/*---------------------------
 * login member
 * -------------------------*/
section#login {
  padding: 0 0 5vw;
}

section#login .form-item {
  border: none;
  display: block;
}

section#login .form-item .form-item_label {
  width: 100%;
  margin-bottom: 1em;
  font-weight: 600;
}

section#login .form-item .form-item_input {
  width: 100%;
}

section#login .button {
  text-align: center;
  font-size: 1.1em;
}

section#registration {
  padding: 0 0 5vw;
}

/*# sourceMappingURL=style.css.map */

/*---------------------------
 * fileUpload
 * -------------------------*/
.fileUpload {
  max-width: 800px;
  margin: 2em auto;
}

.form-box {
  background: var(--color--white);
  padding: 2em;
  border-radius: 8px;
  margin-bottom: 20px;
  position: relative;
}

.mainUpload {
  display: flex;
  position: relative;
}

.mainUpload_label {
  padding: 1em 0;
}

#addFileUpload {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: absolute;
  right: 5%;
  bottom: 30px;
}

.plus-icon {
  background-color: var(--color--sub2);
  color: var(--color--white);
  font-size: 1.5rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  padding: 2px 0 0 1px;
  line-height: 1;
}

#addFileUpload:hover .plus-icon {
  opacity: 0.5;
}

.addFileUploadBtn {
  position: absolute;
  bottom: 20px;
  right: 0;
  display: flex;
  align-items: center;
}

.invoiceUploadBtn {
  background: var(--color--main);
  color: #fff;
  padding: 0.5em 1.5em;
  border-radius: 30px;
  position: absolute;
  right: 3%;
  bottom: -70px;
  margin-bottom: 20px;
}

/* ステップバー */
.progressbar {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.progressbar li {
  position: relative;
  list-style-type: none;
  text-align: center;
  text-transform: uppercase;
  width: 33.333%;
  color: var(--color--bg2);
  font-weight: bold;
  counter-increment: steps;
}

.progressbar li:before {
  display: block;
  width: 26px;
  height: 26px;
  margin: 7px auto 20px auto;
  content: '';
  line-height: 26px;
  font-size: 12px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--color--white);
  content: counter(steps);
}

.progressbar li:after {
  position: absolute;
  z-index: -1;
  top: 20px;
  left: -50%;
  width: 100%;
  height: 2px;
  content: '';
  background-color: var(--color--white);
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active,
.progressbar li.complete {
  color: var(--color--sub1);
}

.progressbar li.active:before,
.progressbar li.complete:before {
  background-color: var(--color--sub1);
  color: #FFF;
}

.progressbar li.active:after,
.progressbar li.complete:after {
  background-color: var(--color--sub1);
}

/* 注意事項 */
.attention-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color--white);
  padding: 2em;
  border-radius: 8px;
  margin-bottom: 20px;
}

.attention-form h3 {
  margin: 0 0 20px;
  font-size: clamp(1.3em, 1.5vw, 1.5em);
}

.attention-form p {
  margin: 0 1em 20px;
}

.attention-box {
  display: flex;
}

.attention-form-image {
  width: 150px;
  margin: 5px 20px 0;
}

.attention-form-checkbox-wrapper {
  display: flex;
  margin-bottom: 10px;
}

.attention-form-checkbox-wrapper label {
  padding-right: 8px;
}

.attention-form-explanation dd {
  margin: 0;
}

.attention-form-description1-text2 {
  color: var(--color--bg2);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .attention-form {
    margin: 0 1em 20px;
  }

  .attention-box {
    flex-direction: column;
    align-items: center;
  }

  .invoiceUploadBtn {
    padding: 0.5em 1em;
    font-size: 0.9rem;
  }
}

@media (max-width: 600px) {
  .addFileUploadBtn {
    bottom: -6px;
    font-size: 0.9rem;
  }

  .plus-icon {
    width: 20px;
    height: 20px;
    font-size: 1rem;
  }
}

@media (max-width: 425px) {
  .plus-icon {
    padding: 0;
  }
}

/*---------------------------
 * customerList
 * -------------------------*/
.customer_info_box {
  width: 100%;
}

.customer_info_inner {
  text-align: left;
}

.customer_info_inner tr {
  border-bottom: 1px solid var(--color--bg2);
}

.customer_info_inner th {
  width: 25%;
  padding: 0.5em 0;
}

@media (max-width: 600px) {
  .customer_info_inner tr {
    display: flex;
    flex-direction: column;
  }

  .customer_info_inner th {
    width: 100%;
  }
}

/*---------------------------
 * privacyPolicy,terms
 * -------------------------*/
#pripacy {
  margin: 0 auto 4em;
  padding: 0 5em;
  max-width: 1220px;
}

#pripacy h2 {
  font-size: clamp(1.5em, 2.4vw, 2.4em);
}

#pripacy h3 {
  font-size: 1.2rem;
  margin: 20px 0 10px 0;
  padding: 8px 0 8px 20px;
  border-left: 5px solid var(--color--sub2);
  background: var(--color--white);
}

#pripacy p,
#pripacy ol {
  padding: 0 10px;
  margin-bottom: 2em;
}

#pripacy ol {
  padding: 0 10px 0 40px;
}

#pripacy .pTitle {
  margin-bottom: 1em;
}

#pripacy .indentation {
  padding: 0 5px 0 20px;
}

#pripacy .tR {
  margin: 20px 0 0 0;
  text-align: right;
}

@media (max-width: 768px) {
  #pripacy {
    padding: 0 1em;
  }
}

.flextable {
  width: 100%;
  margin: 1.5em auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.flextable th {
  text-align: center;
  background: var(--color--sub2);
  color: #fff;
  font-weight: 400;
  width: 30%;
  border: 1px solid var(--color--bg2);
  vertical-align: middle;
  line-height: 1.3;
  padding: 1em;
  font-size: 1vw;
}

.flextable td {
  width: 70%;
  border: 1px solid var(--color--bg2);
  vertical-align: middle;
  line-height: 1.3;
  padding: 1em;
  font-size: 1vw;
}

.bluecell {
  background: var(--color--bg1) !important;
  color: rgba(34, 34, 34, 1) !important;
}

/*---------------------------
 * company
 * -------------------------*/
.company_body {
  background: var(--color--bg1);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}

#company {
  background: var(--color--bg1);
  width: 100%;
  margin: 0 auto;
  padding: 1em;
}

.company-frame {
  background: var(--color--white);
  padding: 2em;
  margin: 2em auto;
  border-radius: 30px;
  max-width: 800px;
}

#company h2 {
  margin-bottom: 0;
}

.company-item {
  padding: 20px 5px 5px;
  border-bottom: 1px solid var(--color--bg2);
  display: flex;
  justify-content: space-between;
}

.company-item:nth-child(1) {
  padding: 0 5px 5px;
}

.company-item .company-item_title {
  width: 30%;
  font-size: 1.2em;
  font-weight: 600;
}

.company-item .company-item_input {
  width: 70%;
}

.company-item .company-item_input a {
  color: var(--color--text);
}

.company-item .company-item_input a::after {
  display: inline-block;
  content: "";
  width: 18px;
  height: 18px;
  background: url(../img/icon-link.svg) no-repeat center center;
  background-size: contain;
  margin-left: 5px;
  position: relative;
  top: 2px;
}

.company-item .optional {
  display: inline-block;
  font-size: 0.8em;
  background: var(--color--gray);
  color: var(--color--white);
  border-radius: 3px;
  padding: 0 5px;
  margin-right: 5px;
}

.company-item .preview {
  max-width: 300px;
}

@media (max-width: 768px) {
  .company-frame {
    padding: 2em 1em;
  }

  .company-item {
    flex-direction: column;
  }

  .company-item .company-item_title {
    font-size: 1em;
    width: 100%;
  }

  .company-item .company-item_input {
    width: 100%;
  }
}

/*---------------------------
 * progressbar
 * -------------------------*/
.progressbar_box {
  border: none !important;
}

.progressbar {
  display: flex;
  flex-wrap: wrap;
  background: var(--color--bg1);
}

.progressbar .item {
  position: relative;
  width: 20%;
  text-align: center;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 13px 0;
  line-height: 1.5;
  background: var(--color--white);
  color: #999999;
}

.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 100%;
  content: '';
  border: 37px solid transparent;
  border-left: 20px solid var(--color--white);
  margin: auto;
}

.progressbar .item:not(:last-child)::before {
  margin-left: 1px;
  border-left-color: var(--color--white);
}

@media screen and (max-width: 767px) {
  .progressbar .item {
    font-size: 11px;
    line-height: 1.4;
    padding: 10px 0;
  }

  .progressbar .item:not(:last-child)::before,
  .progressbar .item:not(:last-child)::after {
    border-width: 25px;
    border-left-width: 12px;
  }
}

/* active */
.progressbar .item.active {
  z-index: 1;
  background: var(--color--sub1);
  color: var(--color--white);
}

.progressbar .item.active:not(:last-child)::after {
  border-left-color: var(--color--sub1);
}

.progressbar .item.active:not(:last-child)::before {
  border-left: none;
}



.application_history_list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 400px;
  overflow-y: auto;
}

.application_history_list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  flex-wrap: wrap;
}

.application_history_list li:not(:last-child) {
  border-bottom: 1px solid #000;
}

.vertical_wap {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}

.application_id {
  font-weight: bold;
}

.application_id,
.application_date,
.application_status,
.application_link {
  margin: 5px;
}

.application_link {
  padding-right: 20px;
  font-size: 2rem;
}

.application_status p {
  min-width: 100px;
  text-align: center;
  padding: 5px 0;
  color: #fff;
  font-weight: bold;
}

.application_status p.pre_contract {
  background-color: #ffcc19;
}

.application_status p.contract {
  background-color: #69ba00;
}

.details {
  display: none;
  width: 100%;
  /*border-top: 1px solid #000;*/
}

.contract_detail {
  max-width: 500px;
  margin: 0;
  padding: 0 0 10px 10px;
}

.contract_detail li {
  min-height: auto;
  border: none !important;
}

.contract_head,
.contract_date {
  margin: 5px 0 5px 10px;
  font-weight: bold;
}

.contract_wrap {
  display: flex;
  justify-content: space-between;
}

.contract_wrap div {
  display: flex;
  align-items: center;
}

.cansel_button {
  background: #ff7425;
  color: #fff;
  padding: 10px 10px;
  font-weight: bold;
  line-height: 1.6;
  margin-right: 20px;
}

@media screen and (max-width: 767px) {
  .contract_wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .cansel_button {
    margin: 0 0 10px 10px;
  }
}

/* cancel */
.form-container {
  padding: 20px;
  margin: auto;
  max-width: 800px;
}

.form-header,
.form-footer {
  margin-bottom: 20px;
}

.cancel_text {
  background: var(--color--white);
  padding: 2em;
  margin-bottom: 20px;
  border-radius: 30px;
  text-align: center;
}

.form-body {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 30px;
  padding: 2em;
}

label {
  display: block;
  margin-bottom: 5px;
}

.form-input {
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.form-footer {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 30px;
  padding: 2em;
}

.form-footer textarea {
  width: 100%;
  background-color: #eee;
  border: 1px solid #babbbb;
}

.cancel_text ul {
  padding: 0;
}

.cancel_text ul li {
  list-style: none;
  text-align: left;
  padding: 30px 0;
  border-bottom: #514327 1px solid;
}

.cancel_text ul li span {
  font-weight: bold;
  padding-right: 10px;
}

/*----------------------------
thanks
----------------------------*/
body.contact main.thanks .sp {
  display: none;
}
body.contact main.thanks .pc {
  display: block;
}
body.contact main.thanks h2 {
  font-size: clamp(1.6em, 3vw, 3em);
  margin-bottom: 0;
  background: linear-gradient(transparent 70%, var(--color--sub2) 70%);
  display: inline-block;
}

body.contact main.thanks section {
  text-align: center;
}

body.contact main.thanks .frame p>span {
  color: var(--color--sub1);
}

body.contact main.thanks .flow h2 {
  margin-top: 0;
  font-size: clamp(1.3em, 1.5vw, 1.5em);
  margin-bottom: 2em;
}

body.contact main.thanks .flow .frame>p {
  text-align: left;
}

body.contact main.thanks .flow .frame .flow_item {
  display: flex;
  gap: 4px;
  margin-bottom: 1em;
}

body.contact main.thanks .flow .frame .flow_item>div {
  padding: 1.4em 0 1em;
  border-radius: 8px;
  position: relative;
}

body.contact main.thanks .flow .frame .flow_item>div .box-title {
  position: absolute;
  display: inline-block;
  top: -20px;
  left: calc(50% - 15px);
  padding: 0 9px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  font-size: 17px;
  background: var(--color--bg2);
  color: #fff;
  font-weight: bold;
  border-radius: 100px;
}

body.contact main.thanks .flow .frame .flow_item>div .flow_title {
  font-weight: bold;
}

body.contact main.thanks .flow .frame .flow_item>div img {
  max-width: 180px;
  width: 25vw;
  margin: 1em 0;
}

body.contact main.thanks .flow .frame .flow_item .flow_item02 .box-title {
  background: var(--color--main);
}

body.contact main.thanks .flow .frame .flow_item .flow_item01,
body.contact main.thanks .flow .frame .flow_item .flow_item03 {
  flex: 1;
  border: var(--color--bg2) 2px solid;
}

body.contact main.thanks .flow .frame .flow_item .flow_item01 .flow_item_p,
body.contact main.thanks .flow .frame .flow_item .flow_item03 .flow_item_p {
  font-size: 12px;
}

body.contact main.thanks .flow .frame .flow_item .flow_item02 {
  flex: 1.2;
  border: var(--color--main) 2px solid;
  background: var(--color--bg3);
}

body.contact main.thanks .flow .frame .flow_item .flow_item02 .flow_item_p {
  font-size: 14px;
}

body.contact main.thanks .flow .frame .flow_item .flow_item02 .flow_item_p.document {
  text-align: left;
  margin: .6em 0 0;
  display: inline-block;
}

body.contact main.thanks .flow .frame .flow_arrow {
  width: 140px;
  margin-top: 1em;
}

body.contact main.thanks .flow .frame>div>p {
  font-size: clamp(1.3em, 1.5vw, 1.5em);
  font-weight: bold;
  margin-top: .8em;
}

body.contact main.thanks .flow .frame .line_cta {
  width: 100%;
  max-width: 470px;
  margin: .6em 0 1em;
}

@media (max-width: 768px) {
  body.contact main.thanks .sp {
    display: block;
  }
  body.contact main.thanks .pc {
    display: none;
  }
  body.contact main.thanks .frame {
    padding: 2em .4em;
    margin: 2em .4em;
  }
}