@charset "utf-8";

/*--------------------------------------------
	PC-ipad(820pxまで)の調整
--------------------------------------------*/

@media screen and (max-width: 870px) {
  .merit3_right img {
    left: 72%;
    height: 75%;
  }
}

@media screen and (max-width: 890px) {
  .company_do li {
    font-size: 1rem;
  }
  .do {
    font-size: 1.3rem;
  }
  .customer_do p {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 1043px) {
  .slick-prev {
    top: 101%;
    left: 67%;
  }
  .slick-next {
    top: 101%;
    right: -10%;
  }
  .slick-dots {
    bottom: -21px;
  }
}

@media screen and (max-width: 849px) {
  .fv_comment {
    font-size: 2.5rem;
  }
  #id .fv_comment {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 1245px) {
  .menuSub.open {
    right: 16px;
  }
}
/* @media screen and (max-width: 819px) 
ここからスマホ用 */
/*--------------------------------------------
改行&文字サイズ
--------------------------------------------*/

/* スマホのみ改行 */
@media screen and (min-width: 820px) {
  .br-sp {
    display: none;
  }
}
/* PCのみ改行 */
@media screen and (max-width: 819px) {
  .br-pc {
    display: none;
  }
}

@media screen and (max-width: 819px) {
  .number,
  .h3_right {
    font-size: 2.5rem;
  }
  .merit_text {
    font-size: 1.5rem;
  }
  .other_text {
    font-size: 1rem;
    letter-spacing: 0.8px;
  }

  .h4_merit {
    font-size: 1.1rem;
  }

  .fv_comment,
  #id .fv_comment {
    font-size: calc(100vw / 20);
  }
  #fv p,
  #id #fv p {
    font-size: calc(100vw / 27);
  }

  .solution_text span {
    font-size: 2rem;
    margin-right: 3px;
  }
  .solution_text {
    font-size: 1.5rem;
    padding-top: 70px;
  }
  .zero_text {
    margin: 1.8rem auto 1.8rem;
    font-size: 1rem;
  }
  .problem_text {
    font-size: 1.3rem;
  }
  .merit3_bg {
    padding: 3% 20px 4.5%;
  }
}

@media screen and (max-width: 600px) {
  h2 {
    font-size: 1.6rem;
    padding: 2rem 0 1.4rem;
  }
  h2 span {
    font-size: 2.3rem;
  }
  #faq_h3 {
    font-size: 1.6rem;
    padding: 1.8rem 0 0;
  }
}

@media screen and (max-width: 450px) {
  body {
    font-size: 15px;
  }
  .merit_text {
    letter-spacing: 0.5px;
    font-size: 1.2rem;
  }

  #fv p {
    font-size: calc(100vw / 23);
  }

  .fv_comment,
  #id .fv_comment {
    font-size: calc(100vw / 17);
  }
  .strengths1_text h3,
  .strengths2_text h3,
  .strengths3_text h3 {
    margin-bottom: 5%;
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
  h2 {
    font-size: 1.4rem;
    padding: 1.8rem 0 1.3rem;
  }
  #inquiry_h3 {
    font-size: 1.5rem;
  }
}

/*--------------------------------------------
ハンバーガーメニュー
--------------------------------------------*/

@media screen and (min-width: 820px) {
  /*PC時非表示にする*/
  .hamburger {
    display: none;
  }
}
@media screen and (max-width: 819px) {
  /* ヘッダーのナビ部分 */
  .header__nav {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100vh);
    transform: translateX(100%);
    background-color: #fff; /*ハンバーガーメニュークリック時のナビゲーションメニュー背景色*/
    transition: ease 0.4s;
  }
  /* ハンバーガーメニュー */
  .header__hamburger {
    width: 48px;
    height: 100%;
    margin: 10px;
  }

  .hamburger {
    background-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
    border-color: transparent; /*buttonタグデフォルトスタイルを打ち消し*/
    z-index: 9999;
  }
  /* ハンバーガーメニューの線 */
  .hamburger span {
    width: 100%;
    height: 3px;
    background-color: #333333;
    position: relative;
    transition: ease 0.6s; /*ハンバーガーメニュークリック時の三本線の動きを遅延*/
    display: block;
  }

  .hamburger span:nth-child(1) {
    top: 0;
  }

  .hamburger span:nth-child(2) {
    margin: 8px 0;
  }

  .hamburger span:nth-child(3) {
    top: 0;
  }
  /* ハンバーガーメニュークリック後のスタイル */
  .header__nav.active {
    transform: translateX(0);
  }

  .hamburger.active span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    top: -17px;
    transform: rotate(-45deg);
  }
  .nav__items,
  .nav__items_id {
    display: flex;
    gap: 1.5rem;
    margin-top: 10%;
    flex-direction: column;
    align-items: center;
  }
  .nav-items__item {
    border-bottom: 1px solid #9b9b9b;
    width: 200px;
    text-align: center;
    padding: 0.7rem;
  }
}
/*--------------------------------------------
navi
--------------------------------------------*/

@media screen and (max-width: 600px) {
  .logo {
    height: 35px;
  }
  .layout_header {
    margin: 4px;
  }

  .otoiawase_btn {
    margin: -10px;
  }

  .fa-xl {
    font-size: 1.5em;
  }

  .layout_header {
    margin: -1px;
    height: 33px;
  }

  #fv {
    margin: 5rem auto 0 auto;
  }

  .logo {
    height: 33px;
  }
}

@media screen and (max-width: 400px) {
  .layout_header {
    margin: 0px;
  }

  .otoiawase_btn p {
    font-size: 0.8rem;
  }

  .header__hamburger {
    width: 35px;
    margin: 0 0 0 6px;
  }
  .fa-xl {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 420px) {
  .otoiawase_btn,
  .otoiawase_btn_2,
  .otoiawase_btn_2_id {
    padding: 0.4rem 0.51rem;
  }
}
@media screen and (max-width: 350px) {
  .fa-xl {
    font-size: 1em;
  }
  .otoiawase_btn {
    margin: -15px;
    padding: 0.3rem 0.4rem;
  }
  header {
    padding: 0.7rem 0.7rem;
  }
  .fa-xl {
    font-size: 1.3em;
  }
  .logo {
    height: 30px;
  }
}

/*--------------------------------------------
FV
--------------------------------------------*/
@media screen and (max-width: 819px) {
  #fv {
    background-size: 157% auto;
    background-position: left 52% bottom 55%;
  }

  .fv_bg {
    padding: 0 3%;
  }
}

@media screen and (max-width: 600px) {
  #fv {
    background-size: 210% auto;
    background-position: left 63% bottom 87%;
    padding: 10% 5% 14%;
  }
  .otoiawase_btn_2,
  .otoiawase_btn_2_id {
    margin: 20% 0 0 0;
  }
}
@media screen and (max-width: 540px) {
  p.jisseki_1,
  .jisseki span {
    font-size: 1.7rem;
  }

  .jisseki_2 {
    font-size: 0.8rem;
  }

  .zero_jisseki {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    margin-bottom: 8%;
  }
}

@media screen and (max-width: 460px) {
  #fv {
    background-size: 231% auto;
    background-position: left 60% bottom 75%;
    padding: 11% 3% 20%;
  }
}

@media screen and (max-width: 340px) {
  p.jisseki_1,
  .jisseki span {
    font-size: 1.4rem;
  }

  .jisseki_2 {
    font-size: 0.6rem;
  }
}
/*--------------------------------------------
.problem
--------------------------------------------*/
@media screen and (max-width: 819px) {
  .problem_example {
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: left;
  }
  .problem_group {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .fa-message-check {
    margin: 1rem 0 0.5rem;
  }

  .fa-regular {
    font-weight: 400;
    margin-right: 4%;
  }
  .balloon {
    padding: 2em;
  }
  .rect {
    width: 80%;
  }

  .rect:before {
    top: 4%;
    left: 2%;
  }
  .fa-message-check {
    font-size: 2em;
  }
}

@media screen and (max-width: 500px) {
  .balloon {
    padding: 1.4em;
    margin: auto 4%;
  }

  .rect {
    width: 90%;
  }
  #solution {
    background-size: 210% auto;
    padding-bottom: 8%;
  }
  .solution_text {
    font-size: 1.2rem;
    padding-top: 62px;
  }
}
/*--------------------------------------------
merit
--------------------------------------------*/
@media screen and (max-width: 819px) {
  .customer_company {
    display: flex;
    flex-direction: column;
  }
  .balloon2 {
    margin: 4% auto;
  }
  .merit1_bg {
    padding: 3% 0;
  }

  .h4_merit {
    padding: 0 20px;
  }

  .merit_circle p {
    margin: 1.8% 0 6%;
  }
  h3.merit1,
  h3.merit2,
  h3.merit3 {
    display: flex;
    align-items: center;
    margin-bottom: 5%;
    flex-direction: column;
    text-align: center;
  }
  h3.merit2 {
    padding: 0 20px;
  }
  .merit3_sp {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .merit3_right img {
    width: 38%;
    margin-bottom: 3%;
  }
  .merit3_right {
    text-align: center;
  }
  .merit3_content p {
    line-height: 2rem;
    padding: 0 40px;
    width: 100%;
  }
  .merit1_left .h4_merit {
    display: none;
  }

  .merit_circle {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  .h4_merit_sp {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .merit1_left {
    width: 92%;
  }
}

@media screen and (min-width: 820px) {
  .h4_merit_sp {
    display: none;
  }
}

@media screen and (max-width: 819px) {
  .company_table_sp {
    overflow: scroll;
  }
  table {
    width: 750px;
  }
  .merit_circle p,
  .merit3_content p,
  .merit2_text,
  .merit4_text,
  .strengths1_text p,
  .strengths2_text p,
  .strengths3_text p,
  .answer {
    line-height: 1.8rem;
  }
  table,
  td,
  th {
    line-height: 1.4rem;
    font-size: 0.9rem;
  }
  .none {
    width: 13%;
  }
}

@media screen and (max-width: 400px) {
  table,
  td,
  th {
    line-height: 1.2rem;
    font-size: 0.8rem;
  }
  table {
    width: 600px;
  }
}

@media screen and (max-width: 600px) {
  .merit2_text,
  .merit3_content p,
  .h4_merit {
    padding: 0 15px;
  }
  .merit4_bg {
    padding: 3% 15px 5%;
  }
  .merit3_bg {
    padding: 3% 15px 4.5%;
  }
}

@media screen and (max-width: 500px) {
  .customer img,
  .company img {
    height: 21rem;
  }
}
@media screen and (max-width: 400px) {
  .company_do li {
    line-height: 1.6rem;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 430px) {
  .balloon2 {
    width: 90%;
  }

  .otoiawase_btn_3 a {
    display: flex;
    width: 226px;
    height: 65px;
    background: #32d3c5;
    color: #ffffff;
    font-weight: bold;
    font-size: 19px;
    text-align: center;
    border-radius: 50px;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.5s;
    align-items: center;
    flex-direction: row;
    margin: 30px auto 27px auto;
  }
}
/*--------------------------------------------
strengths
--------------------------------------------*/
@media screen and (max-width: 819px) {
  .strengths1,
  .strengths3 {
    flex-direction: column;
  }

  .strengths2 {
    flex-direction: column-reverse;
  }
  .strengths1 img,
  .strengths2 img,
  .strengths3 img {
    width: 100%;
  }

  .strengths1_text,
  .strengths2_text,
  .strengths3_text {
    margin: 5% 80px 5% 80px;
    max-width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .strengths1_text,
  .strengths2_text,
  .strengths3_text {
    margin: 5% 40px 4% 40px;
  }
  #strengths {
    margin: 0 auto 2rem;
  }
}
@media screen and (max-width: 450px) {
  .strengths1_text,
  .strengths2_text,
  .strengths3_text {
    margin: 5% 15px 5%;
  }
}
/*--------------------------------------------
voice
--------------------------------------------*/
@media screen and (max-width: 819px) {
  .slick-prev,
  .slick-next,
  .slick-prev:before,
  .slick-next:before {
    display: none;
  }
  .slick-dots {
    bottom: -25px;
    left: 0;
    width: 100%;
    margin: 0;
  }
  .company_infomation {
    display: none;
  }
}
@media screen and (min-width: 820px) {
  .company_infomation_sp {
    display: none;
  }
}
@media screen and (max-width: 500px) {
  .voice_text,
  .answer {
    line-height: 1.6rem;
    max-width: 900px;
    margin: 0 auto;

    padding: 0 2%;
  }
  .question {
    line-height: 1.8rem;
    margin: 5% 0px 2%;
  }
}
/*--------------------------------------------
faq
--------------------------------------------*/
@media screen and (max-width: 723px) {
  .accordion-title::after {
    right: 2%;
  }
}
@media screen and (max-width: 460px) {
  .accordion-title {
    margin: 0.1rem;
  }
}
/*--------------------------------------------
inquiry
--------------------------------------------*/
@media screen and (max-width: 819px) {
  .inquiry_flame {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  #inquiry_h3 {
    margin-bottom: 0.8rem;
  }
  .otoiawase_btn_4 {
    margin-top: 5%;
  }
  .balloon3 {
    padding: 1em;
    margin-bottom: 2rem;
  }
}

/*--------------------------------------------
footer
--------------------------------------------*/
@media screen and (max-width: 819px) {
  #footer {
    border-top: 1px solid #d9d9d9;
    margin: 2rem auto 0;
    padding: 2rem 2rem 0.5rem;
  }
}