/* Style for PCs */
@media screen and (min-width: 1025px) {
  .maker-wrap {
    width: 100%;
    height: auto;
    margin-bottom: 60px;
  }
  .maker-wrap h2 {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #333;
    line-height: 1.25em;
    border-bottom: solid #1F546E 2px;
    margin-bottom: 30px;
  }
  .maker-wrap h2 span {
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-left: 2em;
  }
  .maker-wrap ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .maker-wrap ul li {
    display: block;
    width: 48%;
    height: auto;
    margin: 0 1% 2%;
    float: left;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .maker-wrap ul li a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    color: #333;
    padding: 1%;
    background-color: #f5f5f5;
    background-image: url("../img/document/ar.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 60%;
  }
  .maker-wrap ul li a h3 {
    display: block;
    width: 100%;
    height: auto;
    font-size: 24px;
    font-weight: 300;
    margin: 5px 0;
  }
  .maker-wrap ul li a span {
    display: block;
    width: 100%;
    height: auto;
    font-size: 16px !important;
    font-weight: 400 !important;
  }
  .maker-wrap ul li img {
    display: block;
    width: 25%;
    height: auto;
    float: left;
    margin-right: 20px;
  }
    
    .youtube{
        width:80%;
        height: auto;
        margin: 0 auto;
        
    }    
}
/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .maker-wrap {
    width: 100%;
    height: auto;
    margin-bottom: 60px;
  }
  .maker-wrap h2 {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #333;
    line-height: 1.25em;
    border-bottom: solid #1F546E 2px;
    margin-bottom: 30px;
  }
  .maker-wrap h2 span {
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-left: 2em;
  }
  .maker-wrap ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .maker-wrap ul li {
    display: block;
    width: 48%;
    height: auto;
    margin: 0 1% 2%;
    float: left;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .maker-wrap ul li a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    color: #333;
    padding: 1%;
    background-color: #f5f5f5;
    background-image: url("../img/document/ar.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 60%;
  }
  .maker-wrap ul li a h3 {
    display: block;
    width: 100%;
    height: auto;
    font-size: 16px;
    font-weight: 300;
    margin: 0 0 5px;
  }
  .maker-wrap ul li a span {
    display: block;
    width: 100%;
    height: auto;
    font-size: 14px !important;
    font-weight: 400 !important;
  }
  .maker-wrap ul li img {
    display: block;
    width: 25%;
    height: auto;
    float: left;
    margin-right: 15px;
  }

    .youtube{
        width:80%;
        height: auto;
        margin: 0 auto;
        
    }    
}
/* Style for iPad */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .maker-wrap {
    width: 100%;
    height: auto;
    margin-bottom: 60px;
  }
  .maker-wrap h2 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #333;
    line-height: 1.25em;
    border-bottom: solid #1F546E 2px;
    margin-bottom: 30px;
  }
  .maker-wrap h2 span {
    display: block;
    width: 100%;
    height: auto;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.25em;
    margin: 5px 0 10px !important;
  }
  .maker-wrap ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .maker-wrap ul li {
    display: block;
    width: 98%;
    height: auto;
    margin: 0 1% 2%;
    float: left;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .maker-wrap ul li a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    color: #333;
    padding: 1%;
    background-color: #f5f5f5;
    background-image: url("../img/document/ar.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 60%;
  }
  .maker-wrap ul li a h3 {
    display: block;
    width: 100%;
    height: auto;
    font-size: 16px;
    font-weight: 300;
    margin: 5px 0;
  }
  .maker-wrap ul li a span {
    display: block;
    width: 100%;
    height: auto;
    font-size: 16px !important;
    font-weight: 400 !important;
  }
  .maker-wrap ul li img {
    display: block;
    width: 25%;
    height: auto;
    float: left;
    margin-right: 20px;
  }



    .youtube{
        width:100%;
        height: auto;
        margin: 0 auto;
        
    }    }
/* Style for Smartphone */
@media screen and (max-width: 480px) {
  .maker-wrap {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
  }
  .maker-wrap h2 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #333;
    line-height: 1.25em;
    border-bottom: solid #1F546E 2px;
    margin-bottom: 30px;
  }
  .maker-wrap h2 span {
    display: block;
    width: 100%;
    height: auto;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.25em;
    margin: 5px 0 10px !important;
  }
  .maker-wrap ul {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .maker-wrap ul li {
    display: block;
    width: 98%;
    height: auto;
    margin: 0 1% 2%;
    float: left;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .maker-wrap ul li a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    color: #333;
    padding: 1%;
    background-color: #f5f5f5;
    background-image: url("../img/document/ar.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 60%;
  }
  .maker-wrap ul li a h3 {
    display: block;
    width: 100%;
    height: auto;
    font-size: 14px;
    font-weight: 300;
    margin: 10px 0 5px;
  }
  .maker-wrap ul li a span {
    display: block;
    width: 100%;
    height: auto;
    font-size: 12px !important;
    font-weight: 400 !important;
  }
  .maker-wrap ul li img {
    display: block;
    width: 25%;
    height: auto;
    float: left;
    margin-right: 20px;
  }


    .youtube{
        width:100%;
        height: auto;
        margin: 0 auto;
        
    }    
}