@charset "utf-8";

li, dd { list-style:none;  word-break:break-word; word-break:keep-all; }
#stepList { overflow: hidden; width: 100%; max-width: 1200px; margin: 0 auto; }
#stepList li { position: relative; counter-increment: number; float: left; width: calc(33.33% - 26.66px); height: 330px; margin: 0 0 40px 40px;
                 border:10px solid transparent; box-sizing: border-box; padding: 30px 30px; background: #fff; border-radius: 20px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
#stepList li:nth-child(3n+1) { margin-left:0; }
#stepList li::before { content:''; width: 40px; height: 40px; border-radius: 100%; position: absolute; left: -50px; top:50%; margin-top: -20px;
                               background: url("/images/sub/step_arr.png") no-repeat center; }
#stepList li:nth-child(3n+1)::before { display: none; }
#stepList li dl::before { content: ''counter(number, decimal-leading-zero); color:#f4b01b; line-height: 60px; display: block;
                                  text-transform: uppercase; font-size: 2.0em; margin-bottom: 1.7em; font-weight: 600; }
#stepList li img { position: absolute; top: 20px; right: 7%; background: #f6de7e; border-radius: 100%; width: 60px; height: 60px;}
#stepList li dl { position: relative; width: 100%; display: block; }
#stepList li dl dt { font-size: 2em; color:#222; font-weight: 600; line-height: 1.1em; margin-bottom: 0.7em; }
#stepList li dl dd { font-size: 1.125em; color:#542623; line-height: 1.5em; }

#stepList li:last-child img { display: none; background: none; border-radius: 0; width: auto;}
/*#stepList li:last-child { border-color:#e04b32; }
#stepList li:last-child img { background: none; border-radius: 0; width: auto;}
#stepList li:last-child dl::before { color:#e04b32; }
#stepList li:last-child dl dt { color:#e04b32; }*/

.csPro { padding: 7% 0 0;  }
.csPro h4 { margin-bottom:1.5em; font-size: 1.8em; color:#542623; text-align: center; }
#stepList.csProcess { max-width: 1600px;  }
#stepList.csProcess li { width: calc(20% - 32px); height: 280px; padding: 0 20px; margin: 0 0 0 40px !important; text-align: center;
background: #f4b01b; border-radius: 280px; display: table; }
#stepList.csProcess li:first-child { margin-left:0 !important; }
#stepList.csProcess li:nth-child(3n+1)::before { display: block; }
#stepList.csProcess li:first-child:before { display: none; }
#stepList.csProcess li dl { display: table-cell; vertical-align: middle; }
#stepList.csProcess li dl dt { font-size: 1.8em; color:#fff;  }
#stepList.csProcess li dl::before { line-height: 1.0em; color:#fff;  }
#stepList.csProcess li dl dd {color:#fff;}

@media all and (max-width:1380px) {
  #stepList.csProcess li { height: 250px; }
  #stepList.csProcess li dl dt { font-size: 1.5em; }
  #stepList.csProcess li dl dd { font-size: 1.0em; }
}

@media all and (max-width:1280px) {
  #stepList li { height: 320px; }

  #stepList.csProcess li { width: calc(20% - 24px); height: 230px; margin: 0 0 0 30px !important; padding: 3% 1%; }
  #stepList.csProcess li::before { width: 30px; left: -40px;  background-size: 70% auto; }
}

@media all and (max-width:1080px) {
  #stepList.csProcess li { width: calc(33.33% - 20px); height: 21vw; margin: 0 0 30px 30px !important;}
  #stepList.csProcess li:nth-child(3n+1) { margin-left:0 !important; }
  #stepList.csProcess li:nth-child(3n+1)::before { display: none; }
  #stepList.csProcess li dl dt br { display: none; }
  #stepList.csProcess li dl dd { line-height: 1.3em; }
}

@media all and (max-width:976px) {
  #stepList li { height: 280px; padding: 20px 3%; }
  #stepList li img { width: 50px; height: 50px; }
  #stepList li dl::before { line-height: 50px; margin-bottom: 1.2em;  }
}

@media all and (max-width:767px) {
  #stepList li { width: calc(50% - 20px); margin: 0 0 30px 30px; height: 250px;  }
  #stepList li:nth-child(3n+1) { margin-left:30px; }
  #stepList li:nth-child(3n+1)::before { display: block; }
  #stepList li:nth-child(odd) { margin-left:0; }
  #stepList li:nth-child(odd)::before { display: none; }
  #stepList li::before { width: 30px; left: -40px;  background-size: 70% auto; }
  #stepList li dl dt { font-size: 1.8em; }

  #stepList.csProcess li:nth-child(odd)::before { display: block; }
  #stepList.csProcess li:nth-child(3n+1)::before { display: none; }
}

@media all and (max-width:640px) {
  #stepList.csProcess li { width: calc(50% - 20px); margin: 0 0 30px 30px !important; height: 140px; border-width: 8px; padding: 4% 2%;  }
  #stepList.csProcess li:nth-child(3n+1) { margin-left:30px !important; }
  #stepList.csProcess li:nth-child(odd) { margin-left:0 !important; }

  #stepList.csProcess li:nth-child(3n+1)::before { display: block; }
  #stepList.csProcess li:nth-child(odd)::before { display: none; }
}

@media all and (max-width:480px) {
  #stepList li { width: 100%; margin: 0 0 25px 0 !important; height: auto; padding: 10px 7% 10%; border-width: 8px; }
  #stepList li dl dt br,
  #stepList li dl dd br { display: none; }
  #stepList li img { right: 3%; }
  #stepList li::before { width: 100%; height: 25px; background-size: auto 30%; left:0; top: inherit; bottom: -33px;
                                -webkit-transform:rotate(90deg);  -moz-transform:rotate(90deg); }
  #stepList li:nth-child(odd)::before { display: block; }
  #stepList li:last-child::before { display: none; }

  #stepList.csProcess li { width: 100%; margin: 0 0 25px 0 !important; height: auto; padding: 7%; }
  #stepList.csProcess li::before { width: 100%; height: 25px; background-size: auto 30%; left:0; top: inherit; bottom: -33px;}
  #stepList.csProcess li:nth-child(3n+1) { margin-left:0 !important; }
  #stepList.csProcess li:nth-child(odd)::before { display: block; }
  #stepList.csProcess li:last-child::before { display: none; }
}