@charset "UTF-8";
/* ========== 導入文 ========== */
#flowIntro {
  padding: 120px 0;
  background-image: url("../img/flow/bg_intro.png");
  background-repeat: no-repeat;
  background-position: right -50px bottom -150px;
  background-size: contain;
  position: relative; }
  #flowIntro .layer {
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; }
  #flowIntro h3 {
    color: #e5e5e5;
    top: -40px;
    left: 1%;
    font-size: clamp(4rem, 5vw, 6rem);
    position: absolute; }
    @media screen and (max-width: 800px) {
      #flowIntro h3 {
        top: -50px; } }
  #flowIntro .modBloc {
    z-index: 2;
    padding-left: 100px; }
    @media screen and (max-width: 1050px) {
      #flowIntro .modBloc {
        padding-left: 0; } }
    #flowIntro .modBloc h2 {
      margin-bottom: 40px;
      letter-spacing: 0.05em;
      font-size: clamp(22px, 2.2vw, 28px);
      line-height: 160%; }
      @media screen and (max-width: 800px) {
        #flowIntro .modBloc h2 {
          margin-bottom: 20px; } }
      #flowIntro .modBloc h2 span {
        color: #164088; }
      @media screen and (max-width: 800px) {
        #flowIntro .modBloc h2 br {
          display: none; } }

/* ========== 設備紹介メイン ========== */
#flow01 {
  padding-top: 0;
  background: #EDF5F9; }

.flowBoxWrap {
  padding-top: 40px;
  display: flex;
  gap: 40px; }
  @media screen and (max-width: 800px) {
    .flowBoxWrap {
      display: block; } }

.flowBox {
  width: 50%;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column-reverse; }
  @media screen and (max-width: 800px) {
    .flowBox {
      width: 100%;
      margin-bottom: 40px;
      display: block; } }
  .flowBox img {
    width: 90%;
    margin-left: auto;
    margin-top: 150px; }
    @media screen and (max-width: 800px) {
      .flowBox img {
        width: 100%;
        margin: 0 auto 20px; } }

.flowBoxTxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative; }
  @media screen and (max-width: 800px) {
    .flowBoxTxt {
      display: block; } }
  .flowBoxTxt h2 {
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    color: #164088;
    z-index: 5; }
    @media screen and (max-width: 800px) {
      .flowBoxTxt h2 {
        margin-bottom: 20px; } }
  .flowBoxTxt p {
    width: 90%;
    padding: 30px 40px;
    background: #fff;
    border-radius: 10px;
    z-index: 2;
    position: absolute;
    top: 25px; }
    @media screen and (max-width: 1150px) {
      .flowBoxTxt p {
        padding: 20px 30px; } }
    @media screen and (max-width: 1050px) {
      .flowBoxTxt p {
        padding: 20px; } }
    @media screen and (max-width: 800px) {
      .flowBoxTxt p {
        width: 100%;
        position: relative;
        top: inherit; } }

#flow02 {
  background: linear-gradient(to bottom, #fff 0%, #fff 10%, #eaeaea 10%, #eaeaea 100%); }
  #flow02 li {
    margin-bottom: 100px; }
    #flow02 li:nth-last-of-type(1) {
      margin-bottom: 0; }