/*
@mixin tabMpc { 
	@media screen and (min-width: 768px) and (max-width: 1280px){
		@content;
	}	
}
@mixin tabwMpc { 
	@media screen and (min-width: 961px) and (max-width: 1280px){
		@content;
	}	
}
*/
#flow {
  /* ----------------------------------------
  	#flowList
  ---------------------------------------- */ }
  #flow #flowList {
    /*.ol.reverse{
         @include minTabw{
            flex-direction: row-reverse;
        }
     }*/ }
    #flow #flowList .inner {
      max-width: 1000px;
      margin: 0px auto; }
    #flow #flowList .item {
      background: #ffffff;
      padding: 15px 15px;
      border-radius: 10px;
      margin-bottom: 50px;
      border: 4px solid #f7edde; }
      @media screen and (min-width: 768px) {
        #flow #flowList .item {
          padding: 30px 40px; } }
      @media screen and (max-width: 960px) {
        #flow #flowList .item {
          max-width: 600px;
          margin: 0px auto;
          margin-bottom: 30px; } }
    #flow #flowList h2.contentTitle {
      text-align: left;
      font-weight: 900;
      font-size: clamp(2rem, 3.33vw, 3rem);
      color: #5C411F;
      margin-bottom: 15px;
      line-height: 1.0; }
      #flow #flowList h2.contentTitle span.free {
        font-size: clamp(1.6rem, 1.33vw, 2rem);
        display: inline-block;
        background: #F18900;
        color: #ffffff;
        padding: 5px 10px;
        line-height: 1.0;
        font-weight: bold;
        border-radius: 5px;
        margin-left: 10px; }
    #flow #flowList div.step {
      background: #006934;
      color: #ffffff;
      font-family: "Lato", serif;
      display: inline-block;
      line-height: 1.0;
      padding: 7px 25px 8px 25px;
      font-size: 2.4rem;
      font-weight: 900;
      border-radius: 30px;
      margin-bottom: 15px; }
    @media screen and (min-width: 961px) {
      #flow #flowList .ol {
        display: flex;
        justify-content: space-between; } }
    @media screen and (min-width: 961px) {
      #flow #flowList .ol .photoArea {
        width: 30%; } }
    #flow #flowList .ol .photoArea img {
      border-radius: 10px;
      width: 100%; }
    @media screen and (max-width: 960px) {
      #flow #flowList .ol .textArea {
        margin-bottom: 15px; } }
    @media screen and (min-width: 961px) {
      #flow #flowList .ol .textArea {
        width: 67%; } }