@charset "UTF-8";
.sec-methods {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 91px 0 117px;
  font-feature-settings: normal;
}
.methods-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.methods-bg-item {
  position: absolute;
  overflow: hidden;
}
.methods-bg-item--pc {
  top: -39px;
  left: 50%;
  transform: translateX(-50%);
  width: max(1920px, 100%);
  height: 1455px;
}
.methods-bg-item--pc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.methods-bg-item--sp { display: none; }
.methods-inner {
  position: relative;
  z-index: 1;
}
.methods-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.methods-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.6;
  color: var(--c-text);
}
.methods-title-s { font-size: 40px; }
.methods-title-line {
  display: block;
  width: 80px;
  height: 1px;
  margin-top: 31px;
}
.methods-lead {
  margin-top: 40px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.72px;
  color: var(--c-text);
}
.methods-br-sp { display: none; }
.methods-sp-only { display: none; }
.methods-table-scroll {
  overflow-x: auto;
  margin-top: 75px;
}
.methods-table {
  display: grid;
  grid-template-columns: 126px 200px 206px 198px 213px 205px;
  grid-template-rows: 56px 159px minmax(220px, auto) minmax(88px, auto);
  grid-template-areas:
    ".  t1 t2 t3 t4 t5"
    ".  p1 p2 p3 p4 p5"
    "lf f1 f2 f3 f4 f5"
    "lp d1 d2 d3 d4 d5";
  width: 1148px;
  margin-inline: auto;
}
.methods-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  border-radius: 8px 8px 0 0;
  background: #163b73;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: #fff;
}
.methods-tab--alt { background: #244496; }
.methods-tab--c1 { grid-area: t1; margin-left: 0; }
.methods-tab--c2 { grid-area: t2; }
.methods-tab--c3 { grid-area: t3; }
.methods-tab--c4 { grid-area: t4; }
.methods-tab--c5 { grid-area: t5; }
.methods-photo-cell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 16px;
  background: #fff;
  border-right: 1px solid #dddddd;
}
.methods-photo-cell--c1 { grid-area: p1; }
.methods-photo-cell--c2 { grid-area: p2; }
.methods-photo-cell--c3 { grid-area: p3; }
.methods-photo-cell--c4 { grid-area: p4; }
.methods-photo-cell--c5 { grid-area: p5; }
.methods-photo {
  position: relative;
  overflow: hidden;
  width: 172.109px;
  height: 129.915px;
}
.methods-photo-layer { position: absolute; }
.methods-photo img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
}
.methods-photo--sinus .methods-photo-layer { left: -5px; top: -72.17px; width: 189px; height: 239px; }
.methods-photo--sinus img { left: -0.34%; top: 4.65%; width: 105.86%; height: 100%; }
.methods-photo--socket .methods-photo-layer { left: -32px; top: -23.17px; width: 234px; height: 189px; }
.methods-photo--socket img { left: 11.42%; top: -22.63%; width: 84%; height: 132.68%; }
.methods-photo--gbr .methods-photo-layer { left: -65px; top: -41.17px; width: 237px; height: 192px; }
.methods-photo--gbr img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.methods-photo--split .methods-photo-layer { left: -12.01px; top: -4.17px; width: 194.32px; height: 157.47px; }
.methods-photo--split img { width: 100%; height: 100%; object-fit: cover; }
.methods-photo--prp .methods-photo-layer { left: -7px; top: -14.17px; width: 184px; height: 149px; }
.methods-photo--prp img { width: 100%; height: 100%; object-fit: cover; }
.methods-photo--sinus .methods-photo-layer::after,
.methods-photo--socket .methods-photo-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.02);
}
.methods-rowlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #133261;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  color: #fff;
}
.methods-rowlabel--feature {
  grid-area: lf;
  border-radius: 16px 0 0 0;
}
.methods-rowlabel--period {
  grid-area: lp;
  border-radius: 0 0 0 16px;
  border-top: 1px solid #fff;
}
.methods-feature {
  background: #fff;
  border-top: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  padding: 34px 20px 20px 23px;
}
.methods-feature--c1 { grid-area: f1; padding-left: 18px; }
.methods-feature--c2 { grid-area: f2; }
.methods-feature--c3 { grid-area: f3; }
.methods-feature--c4 { grid-area: f4; }
.methods-feature--c5 { grid-area: f5; }
.methods-feature p {
  width: 160px;
  font-weight: 300;
  font-size: 18px;
  line-height: 2;
  text-align: justify;
  color: var(--c-text);
}
.methods-period {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f8f9;
  border-right: 1px solid #dddddd;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  color: var(--c-text);
}
.methods-period--c1 { grid-area: d1; }
.methods-period--c2 { grid-area: d2; }
.methods-period--c3 { grid-area: d3; }
.methods-period--c4 { grid-area: d4; }
.methods-period--c5 { grid-area: d5; }
@media (max-width: 767px) {
  .sec-methods {
    padding: 66px 0 80px;
  }
  .methods-bg-item--pc { display: none; }
  .methods-bg-item--sp {
    display: block;
    top: -62px;
    left: -285px;
    width: 1235px;
    height: 924px;
  }
  .methods-bg-item--sp img {
    position: absolute;
    top: 0;
    left: -6.86%;
    width: 113.71%;
    height: 101.29%;
    max-width: none;
  }
  .methods-title { font-size: 28px; }
  .methods-title-s { font-size: 24px; }
  .methods-br-sp { display: inline; }
  .methods-br-pc { display: none; }
  .methods-sp-only { display: inline; }
  .methods-title-line {
    width: 40px;
    margin-top: 22px;
  }
  .methods-lead {
    width: 342px;
    max-width: calc(100% - 48px);
    font-size: 16px;
    letter-spacing: 0.16px;
    text-align: justify;
  }
  .methods-table-scroll {
    margin-top: 66px;
    padding-left: 18px;
  }
  .methods-table {
    grid-template-columns: 46px 135px 135px 136px 138px 136px;
    grid-template-rows: 38px 106px minmax(146px, auto) minmax(88px, auto);
    width: max-content;
    margin: 0;
    padding-right: 18px;
  }
  .methods-tab {
    margin: 0 3px;
    font-size: 15px;
  }
  .methods-tab--c1 { margin-left: 3px; }
  .methods-tab--c4 { letter-spacing: -1.05px; }
  .methods-photo-cell { padding-top: 10.5px; }
  .methods-photo {
    width: 114.539px;
    height: 86.459px;
  }
  .methods-photo--sinus .methods-photo-layer { left: -3.328px; top: -48.031px; width: 125.78px; height: 159.056px; }
  .methods-photo--socket .methods-photo-layer { left: -21.297px; top: -15.422px; width: 155.728px; height: 125.78px; }
  .methods-photo--gbr .methods-photo-layer { left: -43.258px; top: -27.398px; width: 157.725px; height: 127.777px; }
  .methods-photo--split .methods-photo-layer { left: -7.988px; top: -2.773px; width: 129.322px; height: 104.796px; }
  .methods-photo--prp .methods-photo-layer { left: -4.656px; top: -9.43px; width: 122.453px; height: 99.16px; }
  .methods-rowlabel { font-size: 16px; }
  .methods-rowlabel--feature { border-radius: 8px 0 0 0; }
  .methods-rowlabel--period { border-radius: 0 0 0 8px; }
  .methods-rowlabel-text {
    display: block;
    width: 1em;
    line-height: 1.05;
    word-break: break-all;
    line-break: anywhere;
  }
  .methods-feature { padding: 14px 7px 14px 8px; }
  .methods-feature--c1 { padding-left: 8px; }
  .methods-feature p {
    width: 120px;
    font-size: 15px;
    line-height: 1.6;
  }
  .methods-feature--c1 p { letter-spacing: 0.15px; }
  .methods-period { font-size: 16px; }
  .methods-photo-cell--c5,
  .methods-feature--c5,
  .methods-period--c5 { border-right: none; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .sec-methods { --mtu: min(1.2px, calc((100vw - 56px) / 726)); }
  .methods-table {
    grid-template-columns:
      calc(46 * var(--mtu)) calc(135 * var(--mtu)) calc(135 * var(--mtu))
      calc(136 * var(--mtu)) calc(138 * var(--mtu)) calc(136 * var(--mtu));
    grid-template-rows:
      calc(38 * var(--mtu)) calc(106 * var(--mtu))
      minmax(calc(146 * var(--mtu)), auto) minmax(calc(88 * var(--mtu)), auto);
    width: calc(726 * var(--mtu));
    margin-inline: auto;
  }
  .methods-tab {
    margin: 0 calc(3 * var(--mtu));
    font-size: calc(15 * var(--mtu));
  }
  .methods-tab--c1 { margin-left: calc(3 * var(--mtu)); }
  .methods-tab--c4 { letter-spacing: calc(-1.05 * var(--mtu)); }
  .methods-photo-cell { padding-top: calc(10.5 * var(--mtu)); }
  .methods-photo {
    width: calc(114.539 * var(--mtu));
    height: calc(86.459 * var(--mtu));
  }
  .methods-photo--sinus .methods-photo-layer {
    left: calc(-3.328 * var(--mtu)); top: calc(-48.031 * var(--mtu));
    width: calc(125.78 * var(--mtu)); height: calc(159.056 * var(--mtu));
  }
  .methods-photo--socket .methods-photo-layer {
    left: calc(-21.297 * var(--mtu)); top: calc(-15.422 * var(--mtu));
    width: calc(155.728 * var(--mtu)); height: calc(125.78 * var(--mtu));
  }
  .methods-photo--gbr .methods-photo-layer {
    left: calc(-43.258 * var(--mtu)); top: calc(-27.398 * var(--mtu));
    width: calc(157.725 * var(--mtu)); height: calc(127.777 * var(--mtu));
  }
  .methods-photo--split .methods-photo-layer {
    left: calc(-7.988 * var(--mtu)); top: calc(-2.773 * var(--mtu));
    width: calc(129.322 * var(--mtu)); height: calc(104.796 * var(--mtu));
  }
  .methods-photo--prp .methods-photo-layer {
    left: calc(-4.656 * var(--mtu)); top: calc(-9.43 * var(--mtu));
    width: calc(122.453 * var(--mtu)); height: calc(99.16 * var(--mtu));
  }
  .methods-rowlabel { font-size: calc(16 * var(--mtu)); }
  .methods-rowlabel--feature { border-radius: calc(8 * var(--mtu)) 0 0 0; }
  .methods-rowlabel--period  { border-radius: 0 0 0 calc(8 * var(--mtu)); }
  .methods-rowlabel-text {
    display: block;
    width: 1em;
    line-height: 1.05;
    word-break: break-all;
    line-break: anywhere;
  }
  .methods-feature {
    padding: calc(14 * var(--mtu)) calc(7 * var(--mtu)) calc(14 * var(--mtu)) calc(8 * var(--mtu));
  }
  .methods-feature--c1 { padding-left: calc(8 * var(--mtu)); }
  .methods-feature p {
    width: calc(120 * var(--mtu));
    font-size: calc(15 * var(--mtu));
    line-height: 1.6;
  }
  .methods-feature--c1 p { letter-spacing: calc(0.15 * var(--mtu)); }
  .methods-period { font-size: calc(16 * var(--mtu)); }
  .methods-photo-cell--c5,
  .methods-feature--c5,
  .methods-period--c5 { border-right: none; }
}