.intro .subcopy {
  color: #c87f52; }

#reason {
  background: url("../images/share/bg_stripe01.png") center center/26px auto repeat; }
  #reason .main-title {
    grid-column: span 2;
    color: #fff;
    text-align: center;
    background-color: #c87f52;
    font-size: clamp(24px, calc(21.7444px + 0.6015vw), 28px);
    letter-spacing: 0.1em;
    line-height: 1.4;
    padding: 6px; }
  #reason .contents-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px; }

.reason-block .lead {
  text-align: left; }
.reason-block:not(:first-of-type) {
  margin-top: 60px; }

.reason-title {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center; }
  .reason-title .text {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    font-size: clamp(20px, calc(17.7444px + 0.6015vw), 24px);
    letter-spacing: 0.1em; }
  .reason-title .icon {
    width: clamp(70px, calc(57.594px + 3.3083vw), 92px);
    height: auto;
    margin-inline: auto; }
  .reason-title + .lead {
    margin-top: 10px; }

.reason01 {
  grid-column: span 2; }
  .reason01 .reason-header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px; }
    .reason01 .reason-header .reason-title {
      grid-column: span 2;
      margin-top: 1rem; }
    .reason01 .reason-header .attention {
      background-color: #fff;
      align-self: center;
      text-align: center;
      font-size: clamp(16px, calc(13.7444px + 0.6015vw), 20px);
      padding: 1rem 10px;
      letter-spacing: 0.05em;
      margin-top: 10px; }
      .reason01 .reason-header .attention strong {
        color: #c87f52; }
        .reason01 .reason-header .attention strong .large {
          font-size: 170%; }
  .reason01 .reason-body {
    margin-top: 3rem; }
    .reason01 .reason-body .sub-title {
      font-size: clamp(20px, calc(17.7444px + 0.6015vw), 24px);
      letter-spacing: 0.1em;
      padding: 6px 0;
      border: 1px solid #c87f52;
      border-width: 1px 0;
      text-align: center; }
  .reason01 .merit-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 30px; }
  .reason01 .merit {
    background-color: #fff;
    padding: 30px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); }
    .reason01 .merit .title {
      font-size: clamp(16px, calc(13.7444px + 0.6015vw), 20px);
      letter-spacing: 0.1em;
      line-height: 1.4;
      padding: 6px 0;
      text-align: center;
      background-color: #a28d6f;
      color: #fff;
      border-radius: 50vh; }
    .reason01 .merit .img,
    .reason01 .merit .lead,
    .reason01 .merit .flow {
      margin-top: 1rem; }
    .reason01 .merit.merit04 .title {
      background-color: #c87f52; }

.reason02 .img {
  max-width: 408px;
  margin-inline: auto;
  margin-top: 2rem; }
  .reason02 .img .cap {
    margin-top: 5px; }

.reason03 .img {
  margin-inline: auto;
  margin-top: 2rem;
  background: #fff;
  box-sizing: border-box;
  padding: 1rem 5%;
  max-width: 440px; }
  .reason03 .img img {
    mix-blend-mode: multiply;
    display: block; }
  .reason03 .img::after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 23px 27.5px 0 27.5px;
    border-color: #B5B5B6 transparent transparent transparent;
    margin-top: 2rem;
    margin-inline: auto;
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%); }
  .reason03 .img .note {
    margin-top: 1rem; }
.reason03 .attention {
  background-color: #fff;
  color: #a28d6f;
  align-self: center;
  text-align: center;
  font-size: clamp(16px, calc(13.7444px + 0.6015vw), 20px);
  padding: 1.5rem 10px;
  margin: auto;
  margin-top: 3.5rem;
  letter-spacing: 0.05em;
  max-width: 440px; }
.reason03 .cap {
  margin: auto;
  margin-top: 1rem; }
  .reason03 .cap.out {
    max-width: 440px; }

.page-note strong {
  color: #c87f52;
  font-weight: 600; }

@media screen and (max-width: 1024px) {
  #reason .contents-wrap {
    column-gap: 30px; }

  .reason01 .reason-header {
    column-gap: 30px; }
  .reason01 .merit-list {
    gap: 20px; } }
@media screen and (max-width: 768px) {
  #reason .main-title {
    grid-column: span 1; }
  #reason .contents-wrap {
    grid-template-columns: 1fr; }

  .reason01 {
    grid-column: span 1; }
    .reason01 .reason-header {
      grid-template-columns: 1fr; }
      .reason01 .reason-header .reason-title {
        grid-column: span 1; }
    .reason01 .merit-list {
      grid-template-columns: 1fr; }
    .reason01 .merit {
      padding: 20px; }
    .reason01 .img,
    .reason01 .flow {
      max-width: 380px;
      margin-inline: auto; } }