@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Noto+Serif+JP:wght@400;600&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");
@import url("global.css");
.list_flow li {
  margin-bottom: 50px;
  position: relative;
}
.list_flow li .title_area {
  margin-bottom: 20px;
}
.list_flow li .title_area .num {
  text-align: center;
  color: #36638F;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}
.list_flow li .title_area .detail_title {
  text-align: center;
}
.list_flow li .content_area {
  margin-bottom: 20px;
}
.list_flow li .content_area .img_area {
  width: 35%;
  border-radius: 10px 0 10px 0;
  overflow: hidden;
}
.list_flow li .content_area .text_area {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 50px;
}
.list_flow li .content_area .text_area p + p {
  margin-top: 10px;
}
.list_flow li .link_area {
  background: #f2f2f2;
  padding: 30px;
}
.list_flow li .link_area .list_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.list_flow li .link_area .list_link li.btn_more {
  width: 33%;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 0;
}
.list_flow li .link_area .list_link li.btn_more a {
  background: #fff;
}
.list_flow li .link_area .list_link li.btn_more.wide {
  width: 45%;
}

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

 Responsive-Breakpoint-1 (1200px)

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

 Responsive-Breakpoint-2 ( 960px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .list_flow li .content_area .img_area {
    width: 40%;
  }
  .list_flow li .content_area .text_area {
    padding-left: 30px;
  }
  .list_flow li .link_area {
    padding: 20px;
  }
  .list_flow li .link_area .list_link li.btn_more {
    padding: 0 5px;
  }
  .list_flow li .link_area .list_link li.btn_more.wide {
    width: 50%;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .list_flow li {
    margin-bottom: 40px;
  }
  .list_flow li .title_area .detail_title {
    margin-bottom: 30px;
  }
  .list_flow li .content_area .img_area {
    width: 100%;
    margin-bottom: 10px;
  }
  .list_flow li .content_area .text_area {
    padding-left: 0;
  }
  .list_flow li .link_area .list_link {
    display: block;
  }
  .list_flow li .link_area .list_link li.btn_more {
    width: 100%;
    padding: 0;
    margin-bottom: 15px;
  }
  .list_flow li .link_area .list_link li.btn_more.wide {
    width: 100%;
  }
  .list_flow li .link_area .list_link li.btn_more:last-of-type {
    margin-bottom: 0;
  }
}