/* Scss Document */
/*
---------------------------------------
benefit01
---------------------------------------
*/
#benefit01 {
  position: relative;
  overflow: hidden;
  padding-bottom: 12rem; }
  @media (max-width: 999px) {
    #benefit01 {
      margin-bottom: 6rem;
      padding-bottom: 6rem; } }
  #benefit01::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(to bottom, #fff 0%, #F7F7F7 100%);
    width: 100%;
    height: 50rem; }
  #benefit01::after {
    position: absolute;
    left: 0;
    top: 11rem;
    z-index: -1;
    width: 100%;
    height: 50rem;
    background: linear-gradient(to bottom, #f7f7f7 0%, #fff 100%);
    content: "";
    pointer-events: none;
    margin-left: max(5.335vw, calc(50vw - 70rem)); }
    @media (max-width: 999px) {
      #benefit01::after {
        left: 1rem;
        top: 2rem; } }
  #benefit01 .benefitHead {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(10rem, 8vw, 16rem);
    margin-bottom: clamp(10rem, 8vw, 16rem); }
    @media (max-width: 999px) {
      #benefit01 .benefitHead {
        display: block;
        min-height: 0;
        margin-bottom: 4rem; } }
  #benefit01 .ttl {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    font-size: 3.8rem;
    line-height: 1.7; }
    @media (max-width: 999px) {
      #benefit01 .ttl {
        display: block;
        font-size: 2.4rem;
        margin-bottom: 3rem; } }
    #benefit01 .ttl span {
      display: block; }
    #benefit01 .ttl .line02 {
      margin-top: 3rem; }
      @media (max-width: 999px) {
        #benefit01 .ttl .line02 {
          margin-top: 0; } }
  #benefit01 .txtBox {
    padding-right: 8rem; }
    @media (max-width: 999px) {
      #benefit01 .txtBox {
        padding-right: 10%;
        width: 88%;
        margin: 0 0 0 auto; } }
  #benefit01 .lead {
    margin-bottom: 7rem;
    font-size: 2.6rem;
    line-height: 1.5; }
    @media (max-width: 999px) {
      #benefit01 .lead {
        margin-bottom: 3rem;
        font-size: 1.6rem;
        line-height: 1.9; } }
  #benefit01 .message {
    margin-bottom: 9rem;
    font-size: 2.6rem;
    line-height: 1.5; }
    @media (max-width: 999px) {
      #benefit01 .message {
        margin-bottom: 4rem;
        font-size: 1.6rem; } }
  @media (max-width: 999px) {
    #benefit01 .tate {
      writing-mode: horizontal-tb; } }
  #benefit01 .mainPic {
    width: calc(100% - max(5.335vw,calc(50vw - 70rem)));
    height: auto;
    margin-left: max(5.335vw, calc(50vw - 70rem));
    aspect-ratio: 1660 / 640;
    overflow: hidden; }
    @media (max-width: 999px) {
      #benefit01 .mainPic {
        width: 94%;
        margin-left: auto;
        aspect-ratio: 375 / 230; } }
  #benefit01 .pic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; }

/*
---------------------------------------
benefit02
---------------------------------------
*/
#benefit02 {
  --inner-width:min(89.33vw,140rem);
  --side-width:calc((100vw - var(--inner-width)) / 2);
  position: relative; }
  @media (max-width: 999px) {
    #benefit02 {
      --inner-width:89.33vw;
      --side-width:5.335vw;
      margin-bottom: 6rem; } }
  #benefit02::before {
    position: absolute;
    top: 20%;
    left: 0;
    z-index: -1;
    width: calc(100% - var(--side-width));
    height: calc(100% - 26rem);
    background: linear-gradient(to bottom, #f7f7f7 0%, #fff 100%);
    content: "";
    pointer-events: none; }
    @media (max-width: 999px) {
      #benefit02::before {
        top: 32rem;
        width: 96%;
        height: calc(100% - 32rem); } }
  #benefit02 .introBox {
    margin-bottom: clamp(12rem, 10vw, 18rem);
    text-align: center; }
    @media (max-width: 999px) {
      #benefit02 .introBox {
        margin-bottom: 8rem;
        text-align: left; } }
    #benefit02 .introBox .ttl {
      margin: 0 0 6rem;
      font-size: 3.8rem; }
      @media (max-width: 999px) {
        #benefit02 .introBox .ttl {
          margin-bottom: 3rem;
          font-size: 2.4rem;
          text-align: center; } }
    #benefit02 .introBox .txt strong {
      font-weight: 500; }
  #benefit02 .subTtl {
    margin: 0 0 6rem;
    font-size: 3.2rem; }
    @media (max-width: 999px) {
      #benefit02 .subTtl {
        margin-bottom: 3rem;
        font-size: 2.2rem; } }
  #benefit02 .benefitBox {
    margin-bottom: clamp(10rem, 9vw, 16rem); }
    @media (max-width: 999px) {
      #benefit02 .benefitBox {
        margin-bottom: 4rem; } }
  #benefit02 .benefitCards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem; }
    @media (max-width: 999px) {
      #benefit02 .benefitCards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem; } }
  #benefit02 .benefitCard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
    padding: 1rem 0rem 2rem;
    border: 1px solid;
    text-align: center;
    overflow: hidden; }
    @media (max-width: 999px) {
      #benefit02 .benefitCard {
        min-height: 13rem;
        padding: 0; } }
    #benefit02 .benefitCard .num {
      position: absolute;
      top: -2.2rem;
      left: -2.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 8rem;
      height: 8rem;
      border-radius: 50%;
      background: #333;
      color: #fff;
      font-size: 2.6rem;
      line-height: 1; }
      @media (max-width: 999px) {
        #benefit02 .benefitCard .num {
          top: -1.6rem;
          left: -1.6rem;
          width: 4rem;
          height: 4rem;
          font-size: 1.3rem; } }
      #benefit02 .benefitCard .num span {
        margin-right: -1rem;
        margin-bottom: -1rem; }
  #benefit02 .cardTtl {
    margin-bottom: 0;
    font-size: clamp(1.8rem, 1.4vw, 2.4rem); }
    @media (max-width: 999px) {
      #benefit02 .cardTtl {
        margin-bottom: 0;
        font-size: 1.4rem;
        line-height: 1.5; } }
  #benefit02 .ico {
    width: 14rem;
    margin: 0; }
    @media (max-width: 999px) {
      #benefit02 .ico {
        width: 8rem; } }
    #benefit02 .ico img {
      display: block;
      width: 100%;
      height: auto; }
  #benefit02 .flowCards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    padding-top: 6rem; }
    @media (max-width: 999px) {
      #benefit02 .flowCards {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 0; } }
    #benefit02 .flowCards::before {
      position: absolute;
      top: 1.7rem;
      left: 12.5%;
      width: 75%;
      height: 3px;
      background: #333;
      content: ""; }
      @media (max-width: 999px) {
        #benefit02 .flowCards::before {
          width: 2px;
          height: 78%;
          left: 1.75rem;
          top: 1rem; } }
  #benefit02 .flowCard {
    position: relative; }
    @media (max-width: 999px) {
      #benefit02 .flowCard {
        display: grid;
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 0; } }
  #benefit02 .flowNum {
    position: absolute;
    top: -6rem;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-size: 2rem;
    transform: translateX(-50%); }
    @media (max-width: 999px) {
      #benefit02 .flowNum {
        position: relative;
        top: 0;
        left: 0;
        align-self: start;
        width: 4rem;
        height: 4rem;
        transform: none; } }
  #benefit02 .flowInner {
    height: 100%;
    padding: 3rem 0;
    background: #f7f7f7;
    text-align: center; }
    @media (max-width: 999px) {
      #benefit02 .flowInner {
        padding: 1.5rem;
        margin-left: 0%;
        z-index: -1;
        display: flex;
        align-items: center;
        text-align: left; } }
    #benefit02 .flowInner .ico {
      width: 14rem;
      margin: 0 auto 2rem; }
      @media (max-width: 999px) {
        #benefit02 .flowInner .ico {
          width: 6rem;
          margin: 0;
          margin-bottom: 0rem;
          margin-right: 0.5rem; } }
    #benefit02 .flowInner .cardTtl {
      margin-bottom: 1rem;
      font-size: 2rem; }
      @media (max-width: 999px) {
        #benefit02 .flowInner .cardTtl {
          font-size: 1.6rem;
          margin-bottom: 0.5rem; } }
    #benefit02 .flowInner .txt {
      margin: 0;
      font-size: 1.6rem; }
      @media (max-width: 999px) {
        #benefit02 .flowInner .txt {
          font-size: 1.2rem; } }

/*
---------------------------------------
benefit03
---------------------------------------
*/
#benefit03 {
  position: relative;
  padding: clamp(10rem, 8vw, 16rem) 0;
  background: url("../img/benefit/03_pic_01.jpg") center center/cover no-repeat;
  overflow: hidden; }
  @media (max-width: 999px) {
    #benefit03 {
      padding: 6rem 0;
      margin-bottom: 6rem;
      background-position: center center; } }
  #benefit03 .contentInner {
    position: relative;
    z-index: 1; }
  #benefit03 .txtBox {
    color: #fff;
    text-align: center; }
  #benefit03 .ttl {
    margin: 0 0 4rem;
    font-size: 3.8rem; }
    @media (max-width: 999px) {
      #benefit03 .ttl {
        margin-bottom: 2.5rem;
        font-size: 2.4rem; } }
  #benefit03 .lead, #benefit03 .bottomTxt {
    font-size: 3.2rem;
    line-height: 1.5; }
    @media (max-width: 999px) {
      #benefit03 .lead, #benefit03 .bottomTxt {
        font-size: 2rem; } }
  #benefit03 .message {
    margin-bottom: 4rem; }
    @media (max-width: 999px) {
      #benefit03 .message {
        margin-bottom: 2rem; } }
  #benefit03 .contactBox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 90rem);
    min-height: 16rem;
    margin: 0 auto;
    padding: 3rem 10rem 3rem 4rem;
    background: #fff;
    color: #333;
    text-decoration: none;
    transition: background-color .3s,color .3s; }
    @media (max-width: 999px) {
      #benefit03 .contactBox {
        min-height: 11rem;
        padding: 2rem 6rem 2rem 2rem; } }
    #benefit03 .contactBox:hover {
      background: rgba(255, 255, 255, 0.8);
      opacity: 1; }
      #benefit03 .contactBox:hover .arrow {
        transform: translate(0.5rem, -50%); }
  #benefit03 .contactTxt {
    font-size: 2.4rem; }
    @media (max-width: 999px) {
      #benefit03 .contactTxt {
        font-size: 1.4rem; } }
  #benefit03 .arrow {
    position: absolute;
    top: 50%;
    right: 4rem;
    display: block;
    width: 5rem;
    height: auto;
    transform: translateY(-50%);
    transition: transform .3s,filter .3s; }
    @media (max-width: 999px) {
      #benefit03 .arrow {
        right: 2rem;
        width: 3rem; } }
    #benefit03 .arrow::after {
      position: absolute;
      top: -.5rem;
      right: 0;
      width: 1rem;
      height: 1rem;
      border-top: 1px solid #333;
      border-right: 1px solid #333;
      content: "";
      transform: rotate(45deg); }