@charset "UTF-8";
/* CSS Document */

/*========================================*/
/*=============== flow ==================*/
/*=========================================*/
#flow {
	
}
#flow #pageTit {
  margin-bottom: 50px;
}
#flow h2.titHead {
  width: 50%;
 max-width: 300px;
  
}
#flow .itemWrap {
  max-width: 1000px;
	text-align: left;
}
#flow .itemWrap .imgBox {
  width: 45%;
}
#flow .itemWrap dl {
  width: 50%;
  padding-top: 5%
}
#flow .itemWrap dl dt {
  width: 100%;
  padding-bottom: 0.3em;
	font-size: 26px;
	color: #29438C;
}
#flow .itemWrap dl dd {
  font-size: 16px;
  line-height: 1.8;
}
#flow .arrowbox {
  width: 50%;
  max-width: 450px;
  padding: 4% 0 0;
}
#flow .itemWrap.box02 {}
#flow .itemWrap.box02 .ulWrap {
  background-color: #d8f6ff;
  position: relative;
  padding: 3% 5%;
  margin-top: 1em;
}
#flow .itemWrap.box02 .ulWrap:after {
  content: '';
  position: absolute;
  width: 96%;
  height: 92%;
  top: 4%;
  left: 2%;
  border: #215d9b solid 1px;
}
#flow .itemWrap.box02 .ulWrap h5 {
	font-weight: 300;
  padding-bottom: 0.5em;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

#flow .itemWrap.box02 ul {
  padding-left: 1em;
}
#flow .itemWrap.box02 ul li {
  font-size: 14px;
  line-height: 1.2;
  padding: 0.2em 0;
  text-indent: -1.2em;
}
#flow .itemWrap.box02 ul li:before {
  content: '●';
  color: #215d9b;
  margin-right: 0.2em;
}
#flow #captionBox {
  padding: 30px 0;
}

#flow #mrWrap {
  background-color: #333333;
  color: #fff;
  padding: 50px 0;
}
#flow #mrWrap #mrBox {
  max-width: 1000px;
}
#flow #mrWrap #mrBox .imgBox {
  width: 40%;
}
#flow #mrWrap #mrBox .txtBox {
  width: 55%;
  font-size: 16px;
  line-height: 2;
  padding-top: 30px;
}
#flow #mrWrap #mrBox .txtBox p {}
#flow #mrWrap #mrBox .txtBox .btnWrap {
  padding-top: 30px;
}
#flow #mrWrap #mrBox .txtBox .btnWrap li {
  width: 49%;
}
#flow #mrWrap #mrBox .txtBox .btnWrap a {
  display: block;
  height: 100%;
  border-radius: 0px;
  padding: 5%;
  display: flex;
   justify-content: center;
  align-items: center;
  transition :all 0.5s;
}
#flow #mrWrap #mrBox .txtBox .btnWrap a img {
  width: 70%;
}





@media screen and (max-width: 959px) {
  #flow .itemWrap {
    max-width: 500px;
  }
  #flow .itemWrap .imgBox {
    width: 100%;
  }
  #flow .itemWrap dl {
    width: 100%;
    padding-top: 2%;
  }
	#flow .itemWrap dt {
		text-align: center;
	}
  #flow .arrowbox {
    width: 50%;
    max-width: 300px;
    padding: 4% 0 3%;
  }
  #flow #mrWrap #mrBox {
    max-width: 500px;
  }
  #flow #mrWrap #mrBox .imgBox {
    width: 100%;
  }
  #flow #mrWrap #mrBox .txtBox {
    width: 100%;
    font-size: 16px;
    line-height: 2;
    padding-top: 30px;
  }
}

@media screen and (max-width: 599px) {
	#flow #pageTit {
		margin-bottom: 0px;
	}
  #flow #flowTit {
    background-color: #003457;
    padding: 40px 0;
    margin-bottom: 30px;
  }
  #flow h2.titHead {
    width: 60%;
   max-width: 280px;

  }
   #flow .arrowbox {
    width: 60%;
    padding: 8% 0 6%;
  }
  #flow .itemWrap dl dt {
		font-size: 5.3vw;
		font-size: clamp(19px, 5.3vw, 21px);
    padding: 0.5em 0;
  }
  #flow .itemWrap dl dd {
    font-size: 14px;
    line-height: 1.6;
  }
  #flow .itemWrap dl dd br {
    display: none;
  }
  #flow #mrWrap #mrBox .txtBox {
    width: 100%;
    font-size: 15px;
    line-height: 1.8;
  }
  #flow #mrWrap {
    padding: 6% 3%;
  }
  #flow #mrWrap #mrBox .txtBox {
    padding-top: 20px;
  }
  #flow #mrWrap #mrBox .txtBox .btnWrap {
    padding-top: 20px;
    max-width: 250px;
    margin: 0 auto;
  }
  #flow #mrWrap #mrBox .txtBox .btnWrap li {
    width: 100%;
    margin-bottom: 10px;
  }
}