@charset "utf-8";
/* --------------------------------------------------------
 * support 個別ベージ R2505
 * ----------------------------------------------------- */

/* --------------------------------------------------------
 * supporter / 
 * ----------------------------------------------------- */
main.supporter:after {
  position: absolute;
  bottom: 0;
  left: auto;
  right: 0;
  z-index: 1;
  content: '';
  background-image: url("../../img/support/field_supporter/bg_parts2.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: block;
  width: 754px;
  height: 480px;
}
main.supporter section {
  position: relative;
  z-index: 2;
}
main.supporter .c-pagetitle {
  margin-bottom: 8.5rem;
}
main.supporter .c-pagetagline {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  line-height: calc(40/18);
  font-weight: bold;
}
main.supporter .c-pagetagline:before {
  margin-right: 5px;
  content: '';
  background-image: url("../../img/support/field_supporter/support_01.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: inline-block;
  width: 41px;
  height: 44px;
  vertical-align: -15px;
}

@media (max-width: 768px) {
  main.supporter:after {
    bottom: 0;
    left: auto;
    right: 0;
    background-image: url("../../img/support/field_supporter/bg_parts1_sp.png");
    display: block;
    width: 245px;
    height: 199px;
  }
  main.supporter .c-pagetitle {
    margin-bottom: 2.2rem;
  }
  main.supporter .c-pagetagline {
    margin-bottom: 1rem;
    font-size: 1.6rem;
    line-height: calc(40/16);
  }
  
}

.fs1-1 {
  margin-bottom: 10rem;
  position: relative;
  padding: 4rem 0 8rem;
  background: #F4F6FA;
}

.fs1-1:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -97px;
  left: calc(50% - 222px );
  width:0;
  height:0;
  border-style:solid;
  border-width: 98px 222px 0 222px;
  border-color: #F4F6FA transparent transparent transparent;
}
.fs1-1 h2 {
  margin-bottom: 4rem;
  padding: 20px 110px;
  position: relative;
  font-size: 3rem;
  line-height: calc(55/30);
  font-weight: bold;
}
.fs1-1 h2:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  content: '';
  background-image: url("../../img/support/field_supporter/customer_image.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: block;
  width: 78px;
  height: 87px;
}
.fs1-1 h2:after {
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: 1;
  content: '';
  background-image: url("../../img/support/field_supporter/hukidashi_icon.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: block;
  width: 106px;
  height: 114px;
}
@media (max-width: 768px) {
  .fs1-1 {
      margin-bottom: 5rem;
      position: relative;
      padding: 4rem 0 4rem;
      background: #F4F6FA;
  }

  .fs1-1:after {
      bottom: -57px;
      left: calc(50% - 114px);
      border-width: 57px 114px 0 114px;
  }
  .fs1-1 h2 {
    width: auto;
    justify-content: center;
    display: flex;
    
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    padding: 5px 60px;
    font-size: 1.8rem;
    line-height: calc(36/18);
  }
  .fs1-1 h2:before {
    top: 0;
    left: 0;
    width: 51px;
    height: 58px;
  }
  .fs1-1 h2:after {
    bottom: 0;
    right: 0;
    width: 53px;
    height: 57px;
  }
}

.fs1-2 {
  padding:0 2em;
}
.fs1-2 h2 {
  margin: 16rem auto 10px;
  position: relative;
  font-size: 3rem;
  line-height: calc(60/30);
  font-weight: bold;
  text-align: center;
  color: #004EA2;
}
.fs1-2 h3 {
  margin: 2em auto 1em;
  position: relative;
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  line-height: 1.6;
  font-weight: bold;
  color: #004EA2;
}
@media (max-width: 768px) {
  .fs1-2 h2 {
    margin: 8rem auto 5rem;
    font-size: 2rem;
    line-height: calc(40/20);
  }
}

.fs2-1 h2 {
  margin: 6rem auto;
  position: relative;
  font-size: 3rem;
  line-height: calc(64/30);
  font-weight: bold;
  text-align: center;
  position: relative;
}
.fs2-1 h2:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: calc(50% - 1px);
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: #004EA2;
}
.fs2-1 h2 span {
  position: relative;
  z-index: 2;
  padding: 0 7rem;
  display: inline-block;
  background: #fff;
}

.fs2-1-box {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8rem;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  column-gap: 5%;
}
.fs2-1-box__main {
  width: 52%;
}
.fs2-1-box__image {
  width: 43%;
}
.fs2-1-box h3 {
  margin-bottom: 4rem;
  font-size: 2.4rem;
  line-height: calc(48/24);
  font-weight: bold;
  color: #004EA2;
}
.fs2-1-box p {
  font-size: 1.6rem;
  line-height: calc(32/16);
}

.fs2-2 {
  padding-top:80px;
}
.fs2-2-box {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 7rem;
  border: 2px #004EA2 solid;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.fs2-2-box h2 {
  display: inline-block;
  padding: 0 15px 0;
  color: #004EA2;
  background: #fff;
  position: absolute;
  top: 0;
  left: 30px;
  font-size: 3rem;
  font-weight: bold;
  transform: translateY(-50%);
}
.fs2-2-box h3 {
  margin-bottom: 4.5rem;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: calc(44/24);
  color: #004EA2;
  text-align: center;
}

.fs2-3 {
  margin: 10rem auto 0;
  padding: 4rem;
  border-radius: 10px;
  background: #F7F7F7;
}
.fs2-3 h2 {
  text-align: center;
  font-size: clamp(2rem, 2vw, 2.3rem);
  font-weight: bold;
  line-height: calc(60/30);
}
@media (max-width: 768px) {
  .fs2-1 h2 {
    margin: 4rem auto;
    font-size: 2rem;
    line-height: calc(32/20);
  }
  .fs2-1 h2:after {
    height: 2px;
  }
  .fs2-1 h2 span {
    padding: 0 3rem;
    max-width: 80%;
  }

  .fs2-1-box {
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 7rem;
    flex-direction: column;
    row-gap: 4rem;
  }
  .fs2-1-box__main {
    width: 100%;
  }
  .fs2-1-box__image {
    width: 100%;
  }
  .fs2-1-box h3 {
    margin-bottom: 2.6rem;
    font-size: 1.8rem;
    line-height: calc(36/18);
  }
  .fs2-1-box p {
    font-size: 1.4rem;
    line-height: calc(28/14);
  }

  .fs2-2-box {;
    padding: 3rem 2rem;
    border: 2px #004EA2 solid;
    border-radius: 10px;
    position: relative;
    background: #fff;
  }
  .fs2-2-box h2 {
    display: inline-block;
    padding: 0 15px 0;
    top: 0;
    left: 50%;
    font-size: 2rem;
    transform: translate(-50%,-50%);
  }
  .fs2-2-box h3 {
    margin-bottom: 2.8rem;
    font-size: 1.6rem;
    line-height: 3rem;
  }
  .fs2-2-box h3 strong {
    font-size: 2.5rem;
  }
  .fs2-2-box .fs2-2-box__image {
    margin: 0 auto;
    width: calc( 232 / 375 * 100% );
  }

  .fs2-3 {
    margin: 6.5rem auto 0;
    padding: 1.6rem 3rem;
  }
  .fs2-3 h2 {
    font-size: 1.6rem;
    line-height: calc(26/16);
  }
}

.c-problem-panel {
  display: -webkit-flex;
  display: flex;
  column-gap: calc( 55 / 1000 * 100% );
  row-gap: 2em;
  justify-content: space-between;
  flex-wrap: wrap;
}
.c-problem-panel__item {
  flex: 1;
  padding: 2.5rem 2rem;
  border-radius: 10px;
  color: #004EA2;
  background: #fff;
  font-size: 1.8rem;
  line-height: calc(36/18);
  font-weight: bold;
  min-width: 45%;
}
.container {
  counter-reset: c-problem_counter item-counter;
}
.c-problem-panel__item {
  position: relative;
  counter-increment: c-problem_counter;
}
.c-problem-panel__item .item__text{
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left:90px;
  height:3em;
}
.c-problem-panel__item .item__text:before {
  content: counters(c-problem_counter, ".", decimal-leading-zero);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #004EA2;
  color: white;
  font-size: 2.2rem;
  font-weight: bold;
  position: absolute;
  left: 3%;
  z-index:5;
}
@media (max-width: 768px) {
  .c-problem-panel__item .item__text{
    padding-left:60px;
  }
  .c-problem-panel__item .item__text:before {
    width: 50px;
    height: 50px;
  }
}
.c-problem-panel__item .item__image {
  margin: 0 auto 15px;
  height: 73px;
}
.c-problem-panel__item:nth-child(1) .item__image {
  width: 93px;
}
.c-problem-panel__item:nth-child(2) .item__image {
  width: 74px;
}
.c-problem-panel__item:nth-child(3) .item__image {
  width: 47px;
}
@media (max-width: 768px) {
  .c-problem-panel {
    flex-direction: column;
    row-gap: 1.3rem;
  }
  .c-problem-panel__item {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    flex: auto;
    padding: 1.8rem;
    font-size: 1.4rem;
    line-height: calc(28/14);
    column-gap: 2rem;
  }
  .c-problem-panel__item .item__image {
    margin: 0 auto 15px;
    height: 48px;
    width: 68px !important;
    text-align: center;
  }
  .c-problem-panel__item:nth-child(1) .item__image img {
    width: 68px;
  }
  .c-problem-panel__item:nth-child(2) .item__image img {
    width: 58px;
  }
  .c-problem-panel__item:nth-child(3) .item__image img {
    width: 36px;
  }
  .c-problem-panel__item .item__text {
    flex: 1;
    text-align: left;
  }
}

#issue {
  padding-top:20px;
  counter-reset: item-counter;
}
#issue .issue-panel {
  position: relative;
  background-color:#F4F6FA;
  border-radius: 10px;
  padding:45px 10% ;
  margin-top:20px;
  counter-increment: item-counter;
}
#issue .issue-panel:after {
  content: counters(item-counter, ".", decimal-leading-zero);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #004EA2;
  color: white;
  font-size: 2.2rem;
  font-weight: bold;
  position: absolute;
  top: 10px;
  left: 3%;
  z-index:5;
}
#issue .issue-panel h2 {
  color:#004EA2;
  margin-bottom:0.75em;
  z-index:10;
  position:relative;
  font-weight:bold;
}
#issue .issue-panel h2:before {
  content: "";
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: bottom;
  margin-right: 5px;
}
#issue .issue-panel h2.n1:before {
  background-image: url(../../img/service/interior/kadai01_icon.svg);
  width: 34px;
  height: 39px;
}
#issue .issue-panel h2.n2:before {
  background-image: url(../../img/service/interior/kadai02_icon.svg);
  width: 41px;
  height: 37px;
}
#issue .issue-panel h2.n3:before {
  background-image: url(../../img/service/interior/kadai03_icon.svg);
  width: 32px;
  height: 37px;
}
#issue .issue-panel h2.n4:before {
  background-image: url(../../img/service/interior/kadai04_icon.svg);
  width: 45px;
  height: 41px;
}
#issue .issue-panel h2:after {
  content:"そのような方に！";
  font-size:14px;
  display: block;
  margin-left:40px;
}
#issue .issue-panel .bgwhite {
  padding:15px 60px 30px;
  background-color:#fff;
  border-radius: 10px;
}
#issue .issue-panel .bgwhite h3 {
  margin-bottom:0.7em;
  width:fit-content;
  background: linear-gradient(transparent 64%, #FFF4E3 0%);
  display: inline;
}
#issue .issue-panel .bgwhite ul {
  padding-left:0;
  margin-left: 1em;
  list-style-position: outside;
  list-style-type: disc;
}

@media (max-width: 768px) {
  #issue .issue-panel {
    padding:15px 10px;
  }
  #issue .issue-panel:after {
    width: 70px;
    height: 70px;
  }
  #issue .issue-panel h2 {
    padding:30px 10px 0 20px;
  }
  #issue .issue-panel h2:before {
    margin-left:30px;
  }
  #issue .issue-panel h2:after {
    margin-left:0;
  }
  #issue .issue-panel .bgwhite {
    padding:15px 10px;
  }
}