@charset "UTF-8";
@import url("global.css");
#sec_process .list li {
  margin-bottom: 80px; }
  #sec_process .list li .list_title {
    font-size: min(20px,4vw);
    font-weight: 500;
    margin-bottom: 30px; }
    #sec_process .list li .list_title span {
      padding-right: 25px;
      position: relative;
      font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-size: min(22px,5vw); }
      #sec_process .list li .list_title span::after {
        content: "";
        width: 5px;
        height: 1px;
        background: #727E82;
        position: absolute;
        right: 10px;
        top: 50%; }
  #sec_process .list li .inner {
    display: flex;
    justify-content: space-between; }
    #sec_process .list li .inner figure {
      width: 30%; }
    #sec_process .list li .inner .text_area {
      flex: 1;
      padding-left: 60px; }
      #sec_process .list li .inner .text_area .link {
        display: flex;
        margin-top: 30px; }
        #sec_process .list li .inner .text_area .link li {
          margin-right: 40px;
          margin-bottom: 0; }
          #sec_process .list li .inner .text_area .link li a {
            display: inline-block;
            background-image: linear-gradient(#3E4443, #3E4443);
            background-repeat: no-repeat;
            background-position: bottom left;
            background-size: 100% 1px;
            transition: background-size 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9);
            font-size: clamp(14px, 1.9vw, 16px);
            font-family: "Marcellus", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
            #sec_process .list li .inner .text_area .link li a::after {
              content: "";
              width: 10px;
              height: 8px;
              background: url("../img/arrow.svg") no-repeat center center;
              background-size: contain;
              display: inline-block;
              margin-left: 12px;
              vertical-align: 1px;
              transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
              -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
              backface-visibility: hidden;
              -webkit-backface-visibility: hidden; }
            @media (any-hover: hover) {
              #sec_process .list li .inner .text_area .link li a:hover {
                background-position: bottom right;
                background-size: 0 1px; }
                #sec_process .list li .inner .text_area .link li a:hover::after {
                  translate: 15px 0;
                  opacity: .5; } }
      #sec_process .list li .inner .text_area .sub_block {
        margin-top: 50px;
        background: rgba(255, 255, 255, 0.5);
        padding: 40px; }
        #sec_process .list li .inner .text_area .sub_block .sub_catch {
          font-size: clamp(14px, 2vw, 17px);
          font-weight: 500;
          margin-bottom: 20px; }
          #sec_process .list li .inner .text_area .sub_block .sub_catch strong {
            display: inline-block;
            font-weight: 900;
            line-height: 1.5;
            position: relative; }
            #sec_process .list li .inner .text_area .sub_block .sub_catch strong::after {
              content: "";
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              height: 1px;
              background-color: #3E4443; }
        #sec_process .list li .inner .text_area .sub_block .sub_item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          padding-bottom: 20px;
          border-bottom: 1px solid #dcdcdc; }
          #sec_process .list li .inner .text_area .sub_block .sub_item:last-of-type {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none; }
          #sec_process .list li .inner .text_area .sub_block .sub_item figure {
            width: 120px; }
          #sec_process .list li .inner .text_area .sub_block .sub_item .sub_text_area {
            flex: 1;
            padding-left: 30px; }
            #sec_process .list li .inner .text_area .sub_block .sub_item .sub_text_area .sub_item_title {
              font-size: clamp(13px, 1.8vw, 16px);
              font-weight: 500;
              margin-bottom: 10px; }
            #sec_process .list li .inner .text_area .sub_block .sub_item .sub_text_area > p {
              font-size: clamp(12px, 1.7vw, 15px); }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #sec_process .list li {
    margin-bottom: 60px; }
    #sec_process .list li .inner .text_area {
      padding-left: 40px; }
      #sec_process .list li .inner .text_area .sub_block {
        margin-top: 30px;
        padding: 30px; }
        #sec_process .list li .inner .text_area .sub_block .sub_item figure {
          width: 100px; }
        #sec_process .list li .inner .text_area .sub_block .sub_item .sub_text_area {
          padding-left: 20px; }
          #sec_process .list li .inner .text_area .sub_block .sub_item .sub_text_area .sub_item_title {
            margin-bottom: 7px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #sec_process .list li {
    margin-bottom: 50px; }
    #sec_process .list li .list_title {
      margin-bottom: 20px; }
    #sec_process .list li .inner {
      display: block; }
      #sec_process .list li .inner figure {
        width: 100%;
        margin-bottom: 15px; }
      #sec_process .list li .inner .text_area {
        padding-left: 0; }
        #sec_process .list li .inner .text_area .link {
          margin-top: 20px; }
          #sec_process .list li .inner .text_area .link li {
            margin-right: 30px; }
        #sec_process .list li .inner .text_area .sub_block .sub_item figure {
          width: 60px; }
        #sec_process .list li .inner .text_area .sub_block .sub_item .sub_text_area {
          padding-left: 15px; }
          #sec_process .list li .inner .text_area .sub_block .sub_item .sub_text_area > p {
            line-height: 1.4; } }