#howto .howto-step2@charset "UTF-8";


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  PC Setting #howto
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#howto {
  margin: 0 auto;
  color: #444;
}

#howto .mv {
  background-image: url(../images/common/2025_22_suralacup_page_mv.jpg);
}
#howto .mv h1 {
  color: #000;
}



/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  PC Setting #howto
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#howto .howto-flow {
  max-width: 1000px;
  margin: 0 auto 80px;
  text-align: center;
}

#howto a.txt-link {
  color: #1558d6;
  text-decoration:underline;
}
#howto a.txt-link:hover {
  opacity: 0.7;
}

#howto span.highlight {
  color: #E40B3E;
}

#howto .howto-flow h1 {
  font-size: 4rem;
  margin-bottom: 20px;
}

#howto .howto-flow ul li {
  width: 33.3%;
}

#howto .howto-flow ul li img {
  width: 100%;
}

#howto .howto-step1 {
  margin: 0 auto 40px;
}


#howto .howto-step1 .inner,#howto .howto-step2 .inner,#howto .howto-step3 .inner {
  /*max-width: 1152px;*/
  max-width: 1000px;
  margin: 0 auto;
}

#howto .howto-step1 .inner h1,#howto .howto-step2 .inner h1,#howto .howto-step3 .inner h1 {
  text-align: left;
  border-bottom: 2px solid #8CC63F;
  font-size: 3rem;
  margin-bottom: 40px;
  /*padding-bottom: 5px;*/
}

#howto .howto-step1 .inner h2,#howto .howto-step3 .inner h2 {
  text-align: center;
  background-color: #444444;
  color:#FFF;
  font-size: 2.2rem;
  margin: 0 0 30px;
  padding:5px 0;
}

#howto .howto-step1 p.attention {
  font-size: 1.5rem;
  margin-top: 10px ;
}

#howto .howto-step1 .step1-award-check {
   margin-top:60px;
  }

#howto .howto-step1 .step1-award-check ul {
  margin: 30px 0;
}


#howto .howto-step1 table {
  width: 100%;
  font-size: 1.6rem;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: "Noto Sans", "Noto Sans JP", "Meiryo", "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "sans-serif";
}

#howto .howto-step1 table th {
  background-color: #CECECE;
}

#howto .howto-step1 table th,table td {
  padding: 15px ;
  text-align: left;
  vertical-align: middle;
  line-height: 1.3;
  border: solid 1px;
}

#howto .howto-step1 table p.home-target {
  font-size: 1.4rem;
  margin-top: 8px;
}

#howto .howto-step1 td.nowrap {
  white-space: nowrap;
}


#howto .howto-step2 {
  margin-top: 80px;
}

#howto .howto-step2 img.flow-img {
  width: 100%;
  margin: 30px 0 ;
}

#howto .howto-step2 .step2-entry-period,#howto .howto-step3 .event-period {
  border: solid 1px #C6C6C6;
  /*padding: 40px;*/
}

#howto .howto-step2 .step2-entry-period {
  padding: 25px 0;
  margin: 40px auto 0;
  text-align: center;
  max-width: 900px;
}

#howto .howto-step2 .step2-entry-period p.txt-entry {
  font-size: 2.2rem;
}

#howto .howto-step2 .step2-entry-period p.txt-date-and-time {
  font-size: 2.6rem;
}

#howto .howto-step2 .step2-entry-period p.txt-date-and-time span {
  font-size: 2rem;
}


#howto .howto-step2 .anchor_btn_2025 li {
  padding: 10px 0;
  line-height: 1;
}

#howto .howto-step2 .anchor_btn_2025 li a {
  line-height: 1.8;
  font-size: 2.4rem;
  /*padding: 10px 16px 10px 25px;*/
  height: 90px;
}
#howto .howto-step2 .anchor_btn_2025 span {
  display: block;  
  font-size: 1.4rem;
  border-top: dotted 1px #FFF;
  width: 80%;
  margin: 0 auto;
}

#howto .howto-step2 .anchor_btn_2025 li a.all::after,#howto .howto-step2 .anchor_btn_2025 li a.school::after,#howto .howto-step2 .anchor_btn_2025 li a.juku::after,#howto .howto-step2 .anchor_btn_2025 li a.parents::after {
  left: 25px;
  width: 9px;
  height: 9px;
}

#howto .howto-step2 .step2-all,#howto .howto-step2 .step2-school,#howto .howto-step2 .step2-juku,#howto .howto-step2 .step2-parents {
    margin: 80px 0 0;
}
#howto .howto-step2 .step2-parents .howto-entry-box img.homebility_bnr {
  border: solid 1px #CECECE;
  margin: 20px auto 0;
  display: block;
  width: 50%;
}

#howto .howto-step2 .step2-school .award-howto-entry .btn_round {
  background-color: #00A29A;
}

#howto .howto-step2 .entry-bnr_introduction {
  margin: 50px auto;
  text-align: center;
}

#howto .howto-step2 .entry-bnr_introduction h2 {
  font-size: 3rem;
  margin-bottom: 10px;
}

#howto .howto-step3 {
  margin-bottom: 120px;
}

#howto .howto-step3 h3 {
    font-size: 2.2rem;
    margin: 30px 0 10px;
}

#howto .howto-step3 .sub-ttl {
  font-size: 1.9rem;
  margin-bottom: 5px;
}

#howto .howto-step3 .mb30 {
  margin-bottom: 30px;
}

#howto .howto-step3 .event-period {
  max-width: 1000px;
  margin: 0 auto 50px;
  padding: 20px;
  /*text-align: center;*/
} 

#howto .howto-step3 .event-period p {
    font-size: 1.8rem;
    width: 45%;
    margin: 0 auto;
} 

#howto .howto-step3 .download-btn li {
  width: 32%;
}

#howto .howto-step3 .download-btn li:nth-child(2) {
  margin: 0 2% 0 2%;
}


#howto .howto-step3 .download-btn-two li {
  width: 49%;
}

#howto .howto-step3 .download-btn-two li:nth-child(2) {
  margin: 0 1% 0 1%;
}

#howto .howto-step3 .download-btn li a,#howto .howto-step3 .download-btn-two li a {
    font-size: 1.8rem;
    display: block;
    vertical-align: middle;
    text-align: center;
    height: 70px;
    line-height: 50px;
    position: relative;
    text-decoration: none;
}

#howto .howto-step3 .download-btn li a,#howto .howto-step3 .download-btn-two li a {
    background: #00A29A;
    color: #FFF;
    padding: 10px 16px 10px 25px;
    text-decoration: none;
    border-radius: 4rem;
}


#howto .howto-step3 .download-btn li a::after,#howto .howto-step3 .download-btn-two li a::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 2px #FFF;
    border-right: solid 2px #FFF;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 54%;
    left: 20px;
    margin-top: -6px;
    text-decoration: none;
}

#howto .howto-step3 .download-btn li a:hover,#howto .howto-step3 .download-btn-two li a:hover {
   cursor: pointer;
   text-decoration: none;
  -webkit-animation: btn_round 0.5s both;
  -moz-animation: btn_round 0.5s both;
  animation: btn_round 0.5s both;
    text-decoration: none;
}

#howto .howto-entry-box .howto-entry-box-conts .box-left-surala {
  padding: 40px 0 0;
}

#howto .howto-entry-box .howto-entry-box-conts .box-left-pitadri-btn-on {
  padding: 60px 0 0;
}

#howto .howto-entry-box .howto-entry-box-conts .box-left-pitadri-btn-off {
  padding: 40px 0 0;
}

#howto .howto-entry-box .howto-entry-box-conts .box-left-surala-drill-btn-on {
  padding: 65px 0 0;
}

#howto .howto-entry-box .howto-entry-box-conts .box-left-surala-drill-btn-off {
  padding: 45px 0 0;
}

#howto .howto-entry-box .howto-entry-box-conts .box-left-surala-btn-on {
  padding: 60px 0 0;
}

#howto .howto-entry-box .howto-entry-box-conts .box-left-surala-btn-off {
  padding: 40px 0 0;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Tab Setting #howto
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media only screen and (max-width: 1079px) and (min-width: 768px) {

  #howto .howto-flow .inner {
    width: 94%;
    margin: 0 auto;
  }
  #howto .howto-step1 .inner, #howto .howto-step2 .inner, #howto .howto-step3 .inner {
    width: 94%;
  }

  #howto .howto-entry-box .howto-entry-box-conts .box-left-pitadri,#howto .howto-entry-box .howto-entry-box-conts .box-left-surala,#howto .howto-entry-box .howto-entry-box-conts .box-left-surala-drill {
    padding: 75px 0 0;
  }

  #howto .howto-step2 .step2-entry-period {
    padding: 25px 40px;
  }
  #howto .howto-step2 .anchor_btn_2025 li {
    padding: 2px 0;
  }

  #howto .howto-step3 {
    margin-bottom: 80px;
  }

  #howto .howto-step3 .download-btn li,#howto .howto-step3 .download-btn-two li {
    width: 80%;
    margin: 0 auto;
  }
  #howto .howto-step3 h3 {
    text-align: center;
  }

  #howto .howto-step3 .download-btn li:nth-child(2) {
    margin: 20px auto 20px ;
  }
  #howto .howto-step3 .event-period p {
    font-size: 1.7rem;
    width: 60%;
    text-align: left;
  } 
  #howto .howto-step2 .step2-entry-period {
    width: 70%;
  }
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SP Setting-page
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media screen and (max-width: 480px) {

  p {
    font-size: 15px;
  }
  #howto .howto-flow .inner {
    width: 90%;
    margin: 0 auto;
  }

  #howto .howto-flow .inner ul li {
    width: 100%;
  }

  #howto .howto-step1 .inner h1, #howto .howto-step2 .inner h1, #howto .howto-step3 .inner h1 {
    font-size: 2.8rem;
    line-height: 1.4;
    padding-bottom: 10px;
  }

  #howto .howto-step1 .inner h2, #howto .howto-step3 .inner h2 {
    padding: 15px 20px;line-height: 1.6;
  }

  #howto .howto-step1 .inner, #howto .howto-step2 .inner, #howto .howto-step3 .inner {
    width: 95%;
  }

  #howto .howto-step2 .step2-all, #howto .howto-step2 .step2-school, #howto .howto-step2 .step2-juku, #howto .howto-step2 .step2-parents {
    margin: 50px 0 0;
  }

  #howto .howto-step2 .entry-bnr_introduction img {
    width: 80%;
}

  #howto .howto-step2 .entry-bnr_introduction h2 {
    font-size: 2.2rem;
  }
  
  #howto .howto-step2 .step2-parents .howto-entry-box img.homebility_bnr {
    width: 100%;
  }

  #howto .howto-entry-box .howto-entry-box-conts .box-left-pitadri-btn-on,#howto .howto-entry-box .howto-entry-box-conts .box-left-pitadri-btn-off,#howto .howto-entry-box .howto-entry-box-conts .box-left-surala  {
    padding: 30px 0 ;
  }

  #howto .howto-entry-box .howto-entry-box-conts .box-left-surala-drill-btn-on,#howto .howto-entry-box .howto-entry-box-conts .box-left-surala-drill-btn-off {
    padding: 40px 0 ;
  }
  #howto table {
    width: 100%;
  }

  #howto .howto-entry-box .howto-entry-box-conts .box-left-pitadri,#howto .howto-entry-box .howto-entry-box-conts .box-left-surala-drill {
    padding: 40px 0;
  }

  #howto .howto-entry-box .howto-entry-box-conts .box-left-surala-btn-on,#howto .howto-entry-box .howto-entry-box-conts .box-left-surala-btn-off {
    padding: 30px 0 ;
  }

  #howto .howto-step2 .anchor_btn_2025 li a.all::after,#howto .howto-step2 .anchor_btn_2025 li a.school::after,#howto .howto-step2 .anchor_btn_2025 li a.juku::after,#howto .howto-step2 .anchor_btn_2025 li a.parents::after {
    left: 25px;
  }
  #howto .howto-step2 .step2-entry-period {
    padding: 25px 10px;
    width: 100%;
  }

  #howto .howto-step2 .step2-entry-period p.txt-entry {
    margin-bottom: 15px;
    font-size: 1.5rem;
    border-bottom: solid 1px #6C6C6C;
    padding-bottom: 5px;
  }
  #howto .howto-step2 .step2-entry-period p.txt-date-and-time {
    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 10px;
  }

  #howto .howto-step2 .step2-entry-period p.txt-date-and-time span {
    font-size: 1.6rem;
  }
  #howto .howto-step1 td {
    white-space: nowrap;
  }

  .table-scroll {
      overflow-x:scroll;
    }
 
  #howto .howto-step2 .anchor_btn_2025 li {
    padding: 0;
  }

  #howto .howto-step2 img.flow-img {
    width: 100%;
    display: inline;
    margin: 30px 0 10px;
  }

  #howto .howto-step3 {
    margin-bottom: 60px;
  }
  
  #howto .howto-step3 .event-period {
    margin: 0 auto 30px;
  }

#howto .howto-step3 .event-period p {
    font-size: 1.7rem;
    width: 100%;
    text-align: left;
} 

  #howto .howto-step1 .inner h2, #howto .howto-step3 .inner h2 {
  margin: 0 0 20px;
  } 
  #howto .howto-step3 h3 {
    text-align: center;
  }
  #howto .howto-step3 .download-btn li,#howto .howto-step3 .download-btn-two li {
    width: 100%;
  }

  #howto .howto-step3 .download-btn-two li a {
    line-height: 1.4;
  }
  
  #howto .howto-step3 .download-btn li:nth-child(2) {
    margin: 20px 0 ;
  }

}