@charset "utf-8";
/* CSS Document */
/* - concept.css - */


.type {
  padding-top: 0;
}
/* -------------------------------------------- */
.concept {
  position: relative;
  overflow: hidden;
}
.concept__catch {
  text-align: center;
  margin: clamp(30px,calc(60 / 750 * 100%), 60px) auto;
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: calc(32 /22 * 1em);
}
.concept__imgbox {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  max-width: 844px;
}
.concept__imgbox:after {
  content: "";
  display: block;
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  background: url(../shared/img/ic_foot_w.svg) no-repeat 50% 50%;
  -webkit-background-size: contain;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(10deg);
}
.concept__img {
  position: relative;
  z-index: 3;
  display: block;
  width: calc(590 / 750 * 100%);
  margin: 0 auto;
  box-sizing: border-box;
  padding-right: calc(25 / 750 * 100%);
}
.concept__imgbox img {
}
.concept__textbox {
  box-sizing: border-box;
  padding: calc(30 / 750 * 100%) calc(30 / 750 * 100%) 0;
  margin: 0 auto;
}
.concept__textbox h3 {
  background: url(img/dot_line_or_l.svg) no-repeat bottom left;
  -webkit-background-size: auto 2px;
  background-size: auto 2px;
  box-sizing: border-box;
  padding-bottom: .5em;
  font-size: var(--fs-28);
  font-weight: 700;
  margin:  calc(60 / 690 * 100%)  auto calc(10 / 690 * 100%);
}
.concept__textbox p {
  line-height: calc(26 / 16 * 1em);
  font-size: var(--fs-26);
}
.concept__textbox p + p {
  margin-top: 1.5em;
}

/* -------------------------------------------- */
@media screen and (min-width:1000px){
  
.concept__catch {
  font-size: var(--fs-22);
}
.concept__imgbox {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  max-width: 844px;
}
.concept__imgbox:after {
  content: "";
  display: block;
  width: 320px;
  height: 0;
  padding-bottom: 320px;
  background: url(../shared/img/ic_foot_w.svg) no-repeat 50% 50%;
  -webkit-background-size: contain;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(15deg);
}
.concept__img {
  width: 480px;
  padding-right: 20px;
}
.concept__imgbox img {
}
.concept__textbox {
  box-sizing: border-box;
  padding: 30px 10px;
  max-width: 1020px;
  margin: 0 auto;
}
.concept__textbox h3 {
  background: url(img/dot_line_or_l.svg) no-repeat bottom left;
  -webkit-background-size: auto 3px;
  background-size: auto 3px;
  box-sizing: border-box;
  padding-bottom: .5em;
  font-size: var(--fs-20);
  font-weight: 700;
  margin: 60px auto 10px;
}
.concept__textbox p {
  line-height: calc(26 / 16 * 1em);
  font-size: var(--fs-16);
}
.concept__textbox p + p {
  margin-top: 1.5em;
}

  
}
/* -------------------------------------------- */
.reason {
  max-width: 1120px;
  position: relative;
  display: block;
  margin: calc(120 / 750 * 100%) auto;
  box-sizing: border-box;
  padding: 0 calc(30 / 750 * 100%);
}
.reason__title {
  border-top: 2px solid var(--c-br);
  border-bottom: 2px solid var(--c-br);
  text-align: center;
  box-sizing: border-box;
  padding: calc(40 / 670 * 100%) 0;
  margin: 0 auto calc(60 / 750 * 100%);
}
.reason__title h2 {
  font-size: var(--fs-26);
  font-weight: 700;
}
.reason__title h2 span {
  font-size: var(--fs-36);
  display: block;
  color: var(--c-or);
}
.reason__imgbox {
  margin: calc(40 / 670 * 100%) auto;
}
.reason__img {
  display: block;
  width: calc(500 / 670 * 100%);
  margin: 0 auto;
}
.reason__namebox {
  background: var(--c-green);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  padding: calc(15 / 670 * 100%);
  border-radius: 5em 10px 10px 5em;
  overflow: hidden;
  margin: calc(40 / 670 * 100%) auto;
}
.reason__nameic {
  display: block;
  width: calc( 120 / 670 * 100%);
}
.reason__nametext {
  color: #fff;
  font-size: var(--fs-22);
  width: calc(550 / 670 * 100%);
  box-sizing: border-box;
  padding-left: 1em;
  font-weight: 500;
  display: block;
  line-height: 1.25em;;
}
.reason__nametext span {
  font-size: var(--fs-28);
  display: block;
  font-weight: 700;
  margin-top: 5px;
}
.reason  h3 {
  background: url(img/dot_line_or_l.svg) no-repeat bottom left;
  -webkit-background-size: auto 2px;
  background-size: auto 2px;
  box-sizing: border-box;
  padding-bottom: .5em;
  font-size: var(--fs-28);
  font-weight: 700;
  margin:  calc(40 / 690 * 100%)  auto calc(10 / 690 * 100%);
}
.reason p {
  line-height: calc(26 / 16 * 1em);
  font-size: var(--fs-26);
}
.reason p + p {
  margin-top: 1.5em;
}
.reason02 {
  margin: calc(120 / 670 * 100%) auto;
}

.concept__btnarea {
  box-sizing: border-box;
  background: var(--c-lor);
  padding: calc(120 / 750 * 100%) 0;
  margin: calc(120 / 750 * 100%) auto;
}

@media screen and (min-width:1000px){
.reason {
  max-width: 1120px;
  margin: 120px auto;
  padding: 0 10px;
}
.reason__title {
  padding: 40px 0;
  margin: 0 auto calc(60 / 750 * 100%);
}
.reason__title h2 {
  font-size: var(--fs-26);
  font-weight: 700;
}
.reason__title h2 span {
  font-size: var(--fs-36);
  margin-top: 20px  
}
.reason__imgbox {
  margin: 60px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.reason__img {
  display: block;
  width: calc(420 / 1100 * 100%);
  max-width: 420px;
  margin: 0;
}
.reason__textbox {
  width: calc(640 / 1100 * 100%);
  max-width: 640px;
}
.reason__namebox {
  background: var(--c-green);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  padding: 10px;
  margin: 0;
  width: 100%;
}
.reason__nameic {
  display: block;
  width: 80px;
}
.reason__nametext {
  color: #fff;
  font-size: var(--fs-18);
  width: calc(100% - 80px);
  box-sizing: border-box;
  padding-left: 1em;
  font-weight: 500;
  display: block;
  line-height: 1.25em;;
}
.reason__nametext span {
  font-size: var(--fs-26);
  display: block;
  font-weight: 700;
  margin-top: 10px;
}
.reason  h3 {
  background: url(img/dot_line_or_l.svg) no-repeat bottom left;
  -webkit-background-size: auto 3px;
  background-size: auto 3px;
  box-sizing: border-box;
  padding-bottom: 20px;
  font-size: var(--fs-20);
  line-height: calc(30 / 20 * 1em);
  font-weight: 700;
  margin:  40px  auto 20px;
}
.reason p {
  line-height: calc(26 / 16 * 1em);
  font-size: var(--fs-16);
}
.reason p + p {
  margin-top: 1.5em;
}
.reason02 {
  margin: 80px auto;
}

.concept__btnarea {
  box-sizing: border-box;
  background: var(--c-lor);
  padding: 120px 0;
  margin: 120px auto;
}
  .reason02__box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -ms-align-items: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
  }
  .reason02__box .reason__namebox {
    width: calc(520 / 1100 * 100%);
    max-width: 520px;
    margin: 0;
  }
  .reason02__box .reason__namebox + h3 {
    width: calc(530 / 1100 * 100%);
    max-width: 530px;
    margin: 0;
  }
  .reason02__textbox {
    margin-top: 40px;
  }
}