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



/**********************************************
common
***********************************************/

.box{
  background-color: #f0f0f0;
  padding: 15px 20px ;
  margin-bottom: 15px;
}
.box p:last-child{
  padding-bottom: 0;
}

.box.box-yellow{
  background-color: #ffffa6;
}

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

  .box{
    background-color: #f0f0f0;
    padding: 10px 10px ;
    margin-bottom: 15px;
  }

  /*
    横スクロールさせる枠と画像に入れる
  */

  .sp-side-scroll{
    overflow: auto;
  }

  .sp-side-scroll > table{
    width: 500px;
  }

  .sp-side-scroll-img{
    width: auto;
    max-width: initial;
    max-width: auto;
    height: 200px;
  }

}


.youtube-canvas{
  text-align: center;
  padding: 20px 0;
}

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

  .youtube-canvas iframe{
    width: auto;
    height: auto;

  }
}

/**********************************************
index-menu
***********************************************/

.index-menu {
  margin-top: 20px;
  margin-bottom: 50px;
}
.index-menu-list {
}
.index-menu-list li {
  padding-bottom: 15px;
}
.index-menu-list a {
  display: block;
  background-color: #f0f0f0;
  color: #222;
  font-size: 116%;
  padding: 20px 10px 20px 15px;
  position: relative;
  text-decoration: none;
  font-weight: bold;
}
.index-menu-list a img{
  width: 45px;
  position: absolute;
  top: 10px;
  right: 10px;
}

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


  .index-menu {
    margin-top: 10px;
  }
  .index-menu-list {
    margin-left: 0;
  }
  .index-menu-list li {
    margin-left: 0;
    width: auto;
    float: none;
    padding-bottom: 5px;
  }

}


/**********************************************
item-list
***********************************************/

.item-description {
  padding: 30px 0;
}

.item-list-img{
    width: 80%;
  margin: 5px auto;
  }

.item-list h3{
  font-weight: normal;

}
.item-list li{
  box-sizing: border-box;
  border: 1px  solid #ccc;
  padding-bottom: 0;
  margin-bottom: 20px;
}

.item-list-heading {
  border-top: 1px dotted #ccc;
  background-color: #fff;
  padding: 8px 10px;
  height: 70px;
}
.item-list-lead {
  font-weight: bold;
  font-size: 100%;
  line-height: 1.4;
  margin-bottom: 3px;
　
}
.item-list-title {
  font-size: 100%;
  line-height: 1.4;
}

.item-list-number {
  font-size: 100%;
  line-height: 1.4;

}
.item-list-text {
  border-top: 1px dotted #ccc;
  background-color: #fff;
  padding: 8px 10px;
  font-size: 85%;
  height: 48px;
}

.item-list-icons {
  border-top: 1px dotted #ccc;
  background-color: #fff;
  padding: 8px 10px;
  height: 65px;
}
.item-icon {
  display: inline-block;
  padding: 3px 5px;
  line-height: 1.2;
  font-size: 93%;
  background-color: #595757;
  color: #fff;
  letter-spacing: 0;
  margin: 0 2px 2px 0;
}

.item-icon-thick {
  display: inline-block;
  padding: 3px 5px;
  line-height: 1.2;
  font-size: 93%;
  background-color: #ff4601;
  color: #fff;
  letter-spacing: 0;
  margin: 0 2px 2px 0;
}

.item-icon-li-thick {
  display: inline-block;
  padding: 3px 5px;
  line-height: 1.2;
  font-size: 93%;
  background-color: #ff8c00;
  color: #fff;
  letter-spacing: 0;
  margin: 0 2px 2px 0;
}

.item-icon-normal {
  display: inline-block;
  padding: 3px 5px;
  line-height: 1.2;
  font-size: 93%;
  background-color: #00B600;
  color: #fff;
  letter-spacing: 0;
  margin: 0 2px 2px 0;
}

.item-icon-li-thin {
  display: inline-block;
  padding: 3px 5px;
  line-height: 1.2;
  font-size: 93%;
  background-color: #ffd700;
  color: #fff;
  letter-spacing: 0;
  margin: 0 2px 2px 0;
}

.item-icon-thin {
  display: inline-block;
  padding: 3px 5px;
  line-height: 1.2;
  font-size: 93%;
  background-color: #04bdff;
  letter-spacing: 0;
  margin: 0 2px 2px 0;
}

.item-icon-isogi {
  display: inline-block;
  padding: 3px 5px;
  line-height: 1.2;
  font-size: 93%;
  color: #fff;
  background-color: #ff0000;
  letter-spacing: 0;
  margin: 0 2px 2px 0;
}


.item-list-inner {
  border-top: 1px dotted #ccc;
  background-color: #fff;
  padding: 8px 10px;
}
.item-list-link {
  padding-bottom: 10px;
}
.item-list-price-title {
}
.item-list-price-rate {
  font-size: 116%;
}
.item-list-price-rate strong{
  color: #ff3333;
}
.item-list-price-rate .red{
  color: #ff0000;
}


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


  .item-description {
    padding: 20px 0;
  }

  .item-list{
    margin-left: 0;
    border-top: 1px solid #ccc;
  }
  .item-list li{
    margin-left: 0;
    float: none;
    width: auto;
    border: none;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0;
    margin-bottom: 0;
    padding: 10px 5px;
  }
  .item-list li:nth-child(2n){
    background-color: #f6f6f6;
  }

  .item-list-img{
    width: 30%;
    float: right;
    border: 1px solid #ccc;
  }

  .item-list-heading {
    border-top: none;
    background-color: transparent;
    padding: 0 0 0 0;
  }
  .item-list-lead {
    font-size: 77%;
    padding-bottom: 3px;
  }
  .item-list-title {
    font-size: 108%;
  }
  .item-list-number {
    font-size: 93%;
  }
  .item-list-text {
  }

  .item-list-icons {
    border-top: none;
    background-color: transparent;
    padding: 2px 0;
  }
  .item-icon {
    padding: 3px 3px;
    line-height: 1.2;
    font-size: 77%;
    margin: 0 1px 1px 0;
  }
  .item-list-inner {
    border-top: none;
    background-color: transparent;
    padding: 2px 0;
  }
  .item-list-link {
  }
  .item-list-price-title {
  }
  .item-list-price-rate {
    font-size: 108%;
  }
  .item-list-price-rate strong{
    color: #ff3333;
  }

}



/**********************************************
item-detail
***********************************************/


.item-detail {
  padding-top: 10px;
  padding-bottom: 30px;
}

.item-title {
  font-size: 200%;
  padding-bottom: 10px;
}

.item-text {
}

.item-intro{
  padding-top: 25px;
}

.item-detail-anker{
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 15px;
}
.item-detail-anker li{
  display: table-cell;
}
.item-detail-anker li a{
  display: block;
  background-color: #f0f0f0;
  padding: 5px 0;
  text-align: center;
  color: #222;
  text-decoration: none;
  font-size: 93%;
}
.item-detail-anker li a i{
  opacity: 0.5;
}
.item-detail-anker li a:hover{
  background-color: #130e0e;
  color: #fff;
}


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


  .item-detail {
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .item-title {
    font-size: 139%;
    padding: 5px 10px;
    margin-bottom: 10px;
    line-height: 1.3;
    background-color: #ffe30a;
  }

  .item-text {
  }

  .item-intro{
    padding-top: 10px;
  }

  .item-detail-anker{
    margin-top: 15px;
    margin-bottom: 15px;
    border-left: 1px solid #ccc;
  }
  .item-detail-anker li{
    display: table-cell;
    border-right: 1px solid #ccc;
  }
  .item-detail-anker li a{
    font-size: 85%;
  }
  .item-detail-anker li a i{
    display: none;
  }
  .item-detail-anker li a:hover{
    background-color: #130e0e;
    color: #fff;
  }

}



/*
slider
*/

.item-img{
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.item-slider-thumbnail{
  margin-left: -1%;
}

.item-slider-thumbnail a{
  display: block;
  width: 24%;
  margin-left: 1%;
  float: left;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid #ccc;
  position: relative;
}

.item-slider-thumbnail a.active::after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #130e0e transparent transparent transparent;
  position: absolute;
  left: 0;
  top: 0;
}


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

}

/*
price-table
*/

.item-rate{
  padding-bottom: 20px;
}

.item-rate table,
.item-price-table {
  border: 1px solid #444;
  width: 100%;
}

.item-rate table th,
.item-price-table th {
  border: 1px solid #444;
  background-color: #444;
  color: #fff;
  padding: 4px 0;
  text-align: center;
}
.item-rate table td,
.item-price-table td {
  border: 1px solid #444;
  padding: 4px 8px;
  text-align: center;
  text-align: right;
}
.item-rate table td:first-child,
.item-price-table td:first-child {
  text-align: left;
  background-color: #f6f6f6;
}
.item-rate table td strong,
.item-price-table td strong{
  color: #ff3333;
}

.item-rate table td .red{
  color: #ff0000;
}

.item-rate table tr:first-child td,
.item-rate table tr:first-child th{
  background-color: #444;
  color: #fff;
}
.item-rate table tr:not(:first-child) th:first-child{
  text-align: left;
  background-color: #f6f6f6;
  color: #222;
  padding-left: 15px;
}


.item-price-tips{
  padding-top: 5px;
  text-align: right;
}
.item-price-tips strong{
  color: #ff3333;
  font-size: 116%;
}



/*
size-table
*/


.item-size table{
  border: 1px solid #444;
  width: 100%;
}

.item-size table tr:first-child th,
.item-size table tr:first-child td{
  border: 1px solid #888;
  background-color: #444;
  color: #fff;
  padding: 4px 0;
  text-align: center;
}
.item-size table tr:not(:first-child) td{
  border: 1px solid #444;
  padding: 4px 8px;
  text-align: center;
}


.item-size table tr:nth-child(2n+1){
  background:#f0f0f0;
}


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

  .item-rate{
    padding-bottom: 20px;
  }

  .item-rate table,
  .item-price-table {
    border: 1px solid #444;
  }
  .item-rate table th,
  .item-price-table th {
    padding: 2px 0;
    font-size: 85%;
  }
  .item-rate table td,
  .item-price-table td {
    padding: 2px 4px;
    font-size: 85%;
  }
  .item-rate table td:first-child,
  .item-price-table td:first-child {
  }
  .item-rate table td strong,
  .item-price-table td strong{
  }

  .item-price-tips{
    padding-top: 2px;
  }
  .item-price-tips strong{
    font-size: 100%;
  }




  .item-size table{
    border: 1px solid #444;
    width: 100%;
  }

  .item-size table tr:first-child th,
  .item-size table tr:first-child td{
    padding: 22px 0;
  }
  .item-size table tr:not(:first-child) td{
    padding: 2px 4px;
    text-align: center;
  }

}

/*
item-conversion-small
*/

.item-conversion-small{
  display: table;
  width: 100%;
  margin-left: -1%;
  margin-bottom: 20px;
}
.item-conversion-small li{
  display: table-cell;
  padding-left: 1%;
}

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


  .item-conversion-small{
    display: block;
    margin-left: 0;
    margin-bottom: 20px;
  }
  .item-conversion-small li{
    display: block;
    margin-left: 0;
    margin-bottom: 5px;
  }

}

/*
item-conversion-large
*/

.item-conversion-large{
  display: table;
  width: 100%;
  margin-left: -1%;
  margin-top: 20px;
  margin-bottom: 40px;
}
.item-conversion-large li{
  display: table-cell;
  padding-left: 1%;
}
.item-conversion-large li .btn{
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 154%;
  text-align: center;
}

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


  .item-conversion-large{
    display: block;
    margin-left: 0;
    margin-top: 10px;
    margin-bottom: 40px;
  }
  .item-conversion-large li{
    display: block;
    margin-left: 0;
    margin-bottom: 5px;
  }
  .item-conversion-large li .btn{
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 108%;
  }

}


/*
item-spec
*/

.item-spec {
}
.item-brand {
  float: right;
  width: 100px;
  border: 1px solid #ccc;
}
.item-spec-text {
  font-size: 93%;
}


/*
item-color
*/

.item-color {
  padding-bottom: 20px;
}
.item-color-post {
  padding-top: 15px;
}

/*
item-size
*/

.item-size {
  padding-bottom: 20px;
}
.item-size-post {
  padding-top: 15px;
}

/*
item-sample
*/

.item-sample {
  padding-bottom: 20px;
}
.item-sample-post {
}

/*
item-review
*/

.item-review {
  padding-bottom: 20px;
}

/*
item-relation
*/

.item-relation {
  padding-bottom: 20px;
}



/**********************************************
faq
***********************************************/

.faq-block{
  padding-top: 20px;
  padding-bottom: 40px;
}

.page-anker-list{

}
.page-anker-list li{

}
.page-anker-list li a{
  display: block;
  background-color: #222;
  color: #fff;
  text-decoration: none;
  font-size: 116%;
  padding: 8px 0;
  text-align: center;
  font-weight: bold;
  position: relative;
}
.page-anker-list li a i{
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -0.5em;
  font-size: 80%;
}



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

}

.faq-title{
  font-size: 116%;
  font-weight: bold;
  position: relative;
  padding: 5px 0 3px 25px;
  cursor: pointer;
  transition:all 0.2s ease;
}
.faq-title:hover{
  opacity: 0.7;
}
.faq-title::before{
  content: "Q.";
  font-family: "Roboto";
  font-size: 20px;
  color: #0092d9;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

.faq-answer {
  background-color: #f6f6f6;
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 15px;
}

.faq-text {
  font-size: 108%;
  padding-bottom: 0.6em;
  line-height: 1.8;
}


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

  .faq-title{
    font-size: 100%;
    padding: 5px 0 3px 25px;
  }
  .faq-title:hover{
  }
  .faq-title::before{
    font-size: 18px;
  }

  .faq-answer {
    padding: 10px 10px;
  }

  .faq-text {
    font-size: 93%;
    line-height: 1.5;
  }

}


/**********************************************
payment
***********************************************/

.payment-client {
  background-color: #f0f0f0;
  padding: 15px;
}

.payment-client-title {
  width: 100px;
  height: 100px;
  background-color: #222;
  text-align: center;
  font-size: 124%;
  color: #fff;
  box-sizing: border-box;
  padding-top: 40px;
  float: left;
}

.payment-client-inner {
  padding-left: 140px;
  padding-top: 10px;
}
.payment-client-text {
  font-size: 124%;
  font-weight: bold;
  line-height: 1.8;
}

.payment-card {
  background-color: #f0f0f0;
  padding: 15px;
}

.payment-info {
  width: 350px;
  float: right;
  padding-left: 20px;
  padding-bottom: 15px;
}
.payment-info-title {
  font-size: 108%;
  background-color: #ddd;
  padding: 4px 0;
  text-align: center;
  border: 1px solid #aaa;
  border-bottom: none;
}
.payment-table {
  border: 1px solid #aaa;
}
.payment-table th {
  border: 1px solid #aaa;
  padding: 4px 8px;
  text-align: left;
  font-weight: 500;
}
.payment-table td {
  border: 1px solid #aaa;
  padding: 4px 8px;
  text-align: right;
  font-weight: bold;
  color: #ff3333;
}


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



  .payment-client {
    padding: 8px;
  }

  .payment-client-title {
    width: auto;
    height: auto;
    background-color: #222;
    text-align: center;
    font-size: 116%;
    padding: 5px 0;
    float: none;
  }

  .payment-client-inner {
    padding-left: 0;
    padding-top: 10px;
  }
  .payment-client-text {
    font-size: 108%;
    line-height: 1.5;
  }

  .payment-card {
    padding: 8px;
  }

  .payment-info {
    width: auto;
    float: none;
    padding-left: 0;
    padding-bottom: 15px;
  }
  .payment-info-title {
    font-size: 100%;
    padding: 2px 0;
  }
  .payment-table {
    border: 1px solid #aaa;
  }
  .payment-table th {
    padding: 2px 4px;
    font-size: 85%;
  }
  .payment-table td {
    padding: 2px 4px;
    font-size: 85%;
  }


}




/**********************************************
page-navi
***********************************************/

.page-navi{
  margin-top: 50px;
  margin-bottom: 50px;
  background-color: #ccc;
  padding: 15px 20px 10px 20px;
}
.page-navi-list{
  margin-left: -1%;
}
.page-navi-list li{
  margin-left: 1%;
  width: 24%;
  padding-bottom: 5px;
}
.page-navi-list li a{
  display: block;
  padding: 8px 10px;
  font-size: 108%;
  color: #222;
  background-color: #fff;
  text-decoration: none;
  border-radius: 6px;
}
.page-navi-list li a{
}

.page-navi-list li a::before{
  content: "";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f138";
  opacity: 0.5;
  margin-right: 0.2em;
}


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


  .page-navi{
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: #ccc;
    padding: 5px 5px 4px 5px;
  }
  .page-navi-list{
    margin-left: -1%;
  }
  .page-navi-list li{
    margin-left: 1%;
    width: 49%;
    padding-bottom: 1px;
  }
  .page-navi-list li a{
    display: block;
    padding: 8px 6px;
    font-size: 85%;
  }
  .page-navi-list li a{
  }


}

/**********************************************
beginner
***********************************************/

.beginner{}

.beginner-block {
  padding-bottom: 30px;
}
.beginner-img {
  width: 30%;
  float: left;
}
.beginner-img img {
  border: 1px solid #ccc;
}
.beginner-inner {
  width: 65%;
  float: right;
}

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


  .beginner{}

  .beginner-block {
    padding-bottom: 30px;
  }
  .beginner-img {
    width: 30%;
    float: right;
    padding-top: 37px;
    padding-left: 10px;
  }
  .beginner-img img {
    border: 1px solid #ccc;
  }
  .beginner-inner {
    width: auto;
    float: none;
  }

}

/**********************************************
choice
***********************************************/

.choice{

}
.choice-block {
  background-color: #f0f0f0;
  padding: 15px 20px;
}
.choice-block-title {
  font-size: 116%;
  padding-bottom: 5px;
}


.choice-kind-list{}
.choice-kind-list li{}

.choice-kind-img {
  padding-bottom: 8px;
}
.choice-kind-img img {
}

.choice-text-small {
  font-size: 85%;
}


.choice-cloth-list{}
.choice-cloth-list li{
  width: 33.3333%;
  float: left;
  border: 1px solid #ccc;
  padding: 10px 10px 15px 10px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  margin-right: -1px;
  margin-bottom: -1px;
}
.choice-cloth-title {
  text-align: center;
  font-size: 108%;
  padding-bottom: 5px;
}

.choice-cloth-box{
  padding: 5px 10px;
  font-size: 85%;
  margin-top: 8px;
  background-color: rgba(244, 221, 51, 0.8);
}

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

  .choice-block {
    padding: 8px 8px;
  }

  .choice-kind-list {
    margin-left: 0;
  }

  .choice-kind-list li {
    margin-left: 0;
    width: auto;
    float: none;
  }

  .choice-kind-img {
    padding-bottom: 8px;
  }

  .choice-kind-img img {}

  .choice-text-small {
    font-size: 85%;
  }

  .choice-cloth-list{}
  .choice-cloth-list li{
    width: auto;
    float: none;
    border: 1px solid #ccc;
    padding: 10px 10px 15px 10px;
  }
  .choice-cloth-title {
    text-align: center;
    font-size: 108%;
    padding-bottom: 5px;
  }

}

/**********************************************
size
***********************************************/

.size-box-title {
  background-color: #0092d9;
  padding: 6px 15px;
  font-size: 139%;
  color: #fff;
  line-height: 1.3;
  text-align: center;
}

.size-box {
  border: 1px solid #ccc;
  border-top: none;
}
.size-box-img {
  padding: 10px 20%;
}
.size-box-list {
}
.size-box-list li {
  padding: 5px 8%;
  font-size: 139%;
}
.size-box-list li:nth-child(odd) {
  background: #f0f0f0;
}

.size-box-number{
  display: inline-block;
  background-color: #f33;
  width: 1.5em;
  height: 1.5em;
  color: #fff;
  text-align: center;
  margin-right: 0.5em;
}

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


  .size-box-title {
    padding: 4px 10px;
    font-size: 124%;
  }

  .size-box {
  }
  .size-box-img {
    padding: 10px 10%;
  }
  .size-box-list {
  }
  .size-box-list li {
    padding: 3px 3%;
    font-size: 108%;
  }

  .size-box-number{
    display: inline-block;
    background-color: #f33;
    width: 1.5em;
    height: 1.5em;
    color: #fff;
    text-align: center;
    margin-right: 0.5em;
  }


}


/**********************************************
wear
***********************************************/


.wear-image{
  overflow: auto;
  position: relative;
  border: 1px solid #ccc;
}

.wear-photo{
  width: auto;
  max-width: initial;
  max-width: auto;
}
.wear-block {
  padding-bottom: 40px;
}
.wear-title {
  display: inline-block;
  padding: 8px 20px;
  color: #fff;
  background-color: #222;
  font-size: 154%;
}
.wear-title  small{
  margin-left: 1.5em;
}


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



  .wear-image{
    overflow: auto;
    position: relative;
    border: 1px solid #ccc;
  }

  .wear-photo{
    width: auto;
    max-width: initial;
    max-width: auto;
    height: 300px;
  }
  .wear-block {
    padding-bottom: 30px;
  }
  .wear-title {
    padding: 4px 10px;
    color: #fff;
    font-size: 124%;
  }
  .wear-title  small{
    margin-left: 1em;
  }

  .wear-size-img{
    height: 180px;
  }

}

/**********************************************
method
***********************************************/

.submission-method-list{
  margin-left: -1%;
}
.submission-method-list li{
  width: 19%;
  margin-left: 1%;
  float: left;
}
.submission-method-list li a{
  display: block;
  text-decoration: none;
  color: #222;
}
.submission-method-list-img {
  border: 1px solid #222;
}
.submission-method-list-img img {
}
.submission-method-list-img figcaption {
  background-color: #222;
  color: #fff;
  padding: 5px 0;
  text-align: center;
}

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


  .submission-method-list{
    margin-left: -2%;
  }
  .submission-method-list li{
    width: 48%;
    margin-left: 2%;
    float: left;
    margin-bottom: 8px;
  }


}

.submission-hand-list{

}
.submission-hand-list li{
  text-align: center;
}
.submission-hand-list-img{

}
.submission-hand-list-img img {
  border: 2px solid #222;
  border-radius: 6px;
  overflow: hidden;
}
.submission-hand-list-img figcaption {
  text-align: center;
  font-size: 93%;
  padding-top: 8px;
}


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


  .submission-hand-list{
    padding-bottom: 20px;
  }
  .submission-hand-list li{
    width: 48%;
    text-align: center;
  }


}


.submission-ex-box{
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ccc;
}


.submission-ps-box {
  padding-bottom: 20px;
}
.submission-ps-img {
  width: 30%;
  float: left;
}
.submission-ps-inner {
  width: 68%;
  float: right;
}
.submission-ps-title {
  font-size: 124%;
  border-bottom: 1px solid #222;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

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



  .submission-ex-box{
    padding-bottom: 20px;
    margin-bottom: 20px;
  }


  .submission-ps-box {
    padding-bottom: 10px;
  }
  .submission-ps-img {
    width: 30%;
    float: right;
    padding-left: 8px;
    padding-bottom: 8px;
  }
  .submission-ps-inner {
    width: auto;
    float: none;
  }
  .submission-ps-title {
    font-size: 116%;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 8px;
  }

}



/**********************************************
color
***********************************************/

.color-list{
  margin-left: -1.5%;
}
.color-list li{
  width: 18.5%;
  margin-left: 1.5%;
  float: left;
  padding-bottom: 30px;
  text-align: center;
}
.color-list li:nth-child(5n+1){
  clear: both;
}

.color-list-code {
  background-color: #f0f0f0;
  padding: 2px 0;
  font-size: 93%;
  font-weight: bold;
  text-align: center;
}
.color-list-title {
  padding: 3px 0;
}
.color-list-ex {
  font-size: 77%;
  line-height: 1.3;
  color: #666;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 4px 0;
  letter-spacing: 0;
}


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

  .color-list{
    margin-left: -2%;
  }
  .color-list li{
    width: 31.3%;
    margin-left: 2%;
    padding-bottom: 20px;
  }
  .color-list li:nth-child(5n+1){
    clear: none;
  }
  .color-list li:nth-child(3n+1){
    clear: none;
  }



  .color-list-code {
    font-size: 85%;
  }
  .color-list-title {
    padding: 3px 0;
    font-size: 77%;
    letter-spacing: 0;
  }
  .color-list-ex {
    padding: 4px 0;
    font-size: 50%
  }

}


/**********************************************
area
***********************************************/

.area-block-subtitle {
  font-size: 116%;
  padding-bottom: 5px;
}

.area-block {
  padding-bottom: 50px;
}


#area .box img{
  margin: 10px auto 60px;
}
#area .box img{
  margin-bottom: 90px!important;
}

#area .box img{
  width: 300px;
}

#area span{
  padding-left: 15px;
  font-size: 12px;
}

#area table,td,th{
  table-layout: fixed;
 border:1px #000000 solid;
  }

#area table th,
#area table td{
  vertical-align: middle;
  text-align: center;
}
#area table th{
  font-weight: bold;
}
#area .size-table--main .gray{
  background: #f8f8f8;
  width: 100%;
}

#area .box{
  overflow: hidden;
}
#area .box img{
  float: left;
  margin:50px 0px 0px;
}
#area .box table{
  width: 56%;
  float: right;
}
#area .box table caption{
  font-weight: bold;
  text-align: center;
  padding-bottom: 10px;
}
#area .box table tr:first-of-type th:first-of-type{
  width: 50px;
}
#area .box table tr:first-of-type th[colspan]:first-of-type{
  width: 200px;
}
#area .box:last-of-type table tr th:first-of-type{
  width: 100px!important;
}
#area .box table tr th.wauto{
  width: auto;
}
#area .box table th span{
  display: inline-block;
  line-height: 1;
  background: #B4B4B4;
  padding: 5px 7px;
  font-size: 90%;
}
#area .box table th.sm{
  margin-top: 0;
  font-size: 70%;
  padding: 0;
}

#area table {
  margin: 15px auto 20px auto;
  border-collapse: collapse;
  text-align: left;
}
#area table th {
  padding: 8px;
  font-weight: normal;
}
#area table td {
  padding: 8px;
}

#area table th {
  background: #F5F5F5;}

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

#area　.box img{
    margin-bottom: 10px!important;
  }

#area .box img{
    float: none;
  width: 100%;
  }
#area .box table{
    width: 100%;
    float: none;
  }

#area .box table th,
#area .size-table .box table td{
    padding: 10px 5px;
  }
#area .box table tr:first-of-type th:first-of-type {
    width: 40px;
  }
#area .box table tr:first-of-type th[colspan]:first-of-type{
    width: 100px;
  }

#area table,td,th{
  table-layout: fixed;
 border:1px #000000 solid;
  }

#area table {
  margin: 15px auto 20px auto;
  border-collapse: collapse;
  text-align: left;
}
#area table th {
  padding: 8px;
  font-weight: normal;
}
#area table td {
  padding: 8px;
}

#area table{
  overflow: scroll;
  text-align: center;
}

#area .size-table--main{
  width: 100%;
}

  #area .size-table--main td{
  padding: 5px 0px;
  font-size: 80%;
  text-align: center;

}
    #area .size-table--main th{
  padding: 5px 0px;
  font-size: 70%;
  text-align: center;
}

#area table th {
  background: #F5F5F5;}
}


/**********************************************
position
***********************************************/

.position-block {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.position-block-heading {
  position: absolute;
  left: 40px;
  top: 30px;
}
.position-block-img {
  padding-left: 150px;
  text-align: center;
}

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


  .position-block {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    position: relative;
  }
  .position-block-heading {
    position: static;
  }
  .position-block-img {
    padding-left: 0;
    text-align: center;
  }


}


/**********************************************
comparison
***********************************************/

.comparison-table{
  table-layout: fixed;
}
.comparison-table th,
.comparison-table td{
  box-sizing: border-box;
}
.comparison-table thead th{
  background-color: #fee30c;
  border-right: 1px solid #fff;
  padding: 5px 0;
  text-align: center;
  font-size: 93%;
  transition:all 0.2s ease;
}
.comparison-table thead th:hover{
  background-color: #ffb400;
}
.comparison-table thead tr th:nth-child(1){
  pointer-events: none;
  width: 18%;
}
.comparison-table thead tr th:nth-child(2){
  pointer-events: none;
  width: 18%;
}
.comparison-table tbody td{
  text-align: center;
  padding: 5px 5px;
  border: 1px solid #ccc;
}
.comparison-table tr td:nth-child(2){
}

.comparison-lead {
  font-weight: bold;
  font-size: 93%;
  letter-spacing: 0;
}
.comparison-img {
}
.comparison-img img {
  width: 70px;
}
.comparison-number {
  display: inline-block;
  padding: 2px 6px;
  background-color: #0092da;
  color: #fff;
}
.comparison-text {
  font-size: 85%;
  line-height: 1.3;
  padding-bottom: 5px;
  text-align: left;
}


.comparison-review {
  text-align: center;
}
.comparison-review img {
}
.comparison-review figcaption {
  font-size: 93%;
  font-weight: bold;
}

.comparison-icon{
  display: block;
  margin-bottom: 2px;
  color: #fff;
  background-color: #888;
  text-align: center;
  font-weight: bold;
  font-size: 93%;
}
.comparison-icon-blue{
  background-color: #7db8d8;
}
.comparison-icon-red{
  background-color: #dd3220;
}
.comparison-icon-pink{
  background-color: #e598bd;
}
.comparison-icon-green{
  background-color: #13ae67;
}
.comparison-icon-yellow{
  background-color: #f8b62d;
}
.comparison-icon-orange{
  background-color: #ff6c00;
}
.comparison-icon-gray{
  background-color: #aaa;
}


.comparison-block{
  padding-bottom: 80px;
}

table.tableSorter th div.sortArrow {
  width: 11px;
  height: 6px;
  display: inline-block;
  margin-left: 5px;
  vertical-align: 2px;
  position: relative;
}

table.tableSorter th div.sortArrow div.sortArrowAscending,
table.tableSorter th div.sortArrow div.sortArrowDescending {
  position: absolute;
  display: none;
  width: 11px;
  height: 6px;
}

table.tableSorter th div.sortArrow div.sortArrowAscending {
  background: url('../../img/guide/comparison/arrow_asc.png');
}

table.tableSorter th div.sortArrow div.sortArrowDescending {
  background: url('../../img/guide/comparison/arrow_desc.png') no-repeat;
}


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

  .comparison-table{
    width: 700px !important;
  }
}



/**********************************************
designsample
***********************************************/

.designsample-tab-list{
  margin-bottom: 30px;
  margin-top: 20px;
}

.designsample-tab-list li{

}
.designsample-tab-list li a{
  display: block;
  font-weight: bold;
  font-size: 108%;
  border: 1px solid #aaa;
  padding: 10px 0;
  text-align: center;
  color: #222;
  text-decoration: none;
  cursor: pointer;
}
.designsample-tab-list li a i{
  padding-right: 0.3em;
}
.designsample-tab-list li a:hover,
.designsample-tab-list li a.is-active{
  background-color: #222;
  color: #fff;
}

.designsample-tab-list li a img{
  height: 2em;
  margin-right: 0.5em;
  vertical-align: middle;
}

.designsample-list{

}
.designsample-list li{
  padding-bottom: 30px;
}
.designsample-list li a{
  color: #222;
  text-decoration: none;
}
.designsample-list-img{
  transition:all 0.2s ease;
}
.designsample-list-img:hover{
  opacity: 0.7;
}
.designsample-list-img img{
  border: 1px solid #ccc;
}
.designsample-list-img figcaption{
  padding-top: 6px;
  font-size: 124%;
  font-weight: bold;
  text-align: center;
}

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


  .designsample-tab-list{
    margin-bottom: 20px;
    margin-top: 10px;
  }

  .designsample-tab-list li{
    width: 48%;
    padding-bottom: 3px;
  }
  .designsample-tab-list li a{
    font-size: 93%;
    border: 1px solid #aaa;
    padding: 6px 0;
  }


  .designsample-list{

  }
  .designsample-list li{
    padding-bottom: 10px;
  }
  .designsample-list-img figcaption{
    padding-top: 3px;
    font-size: 85%;
  }

}


/**********************************************
download
***********************************************/

.design-template-list{

}
.design-template-list li{
  padding-bottom: 20px;
}
.design-template-list a{
  color: #222;
  text-decoration: none;
  position: relative;
}
.design-template-list-img{
  position: relative;
}
.design-template-list-img img{
  border: 1px solid #ccc;
  transition:all 0.2s ease;
}
.design-template-list-img img:hover{
  opacity: 0.7;
}
.design-template-list-img figcaption{
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  font-size: 75%;
  font-family: "Roboto";
}
.design-template-list-img figcaption i{
  font-size: 16px;
  padding-left: 3px;
}
.design-template-list-title{
  padding-top: 6px;
  font-size: 124%;
  font-weight: bold;
  text-align: center;
}

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

  .design-template-list{

  }
  .design-template-list li{
    width: 48%;
    padding-bottom: 15px;
  }
  .design-template-list li:nth-child(2n+1){
    clear: both;
    }
  .design-template-list-img figcaption{
    right: 3px;
    bottom: 3px;
  }
  .design-template-list-img figcaption i{
    font-size: 14px;
    padding-left: 2px;
  }
  .design-template-list-title{
    font-size: 100%;
  }


}

/**********************************************
table
***********************************************/

.table-normal{
  border: 1px solid #ccc;
}
.table-normal th{
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: top;
  font-weight: 500;
  padding: 10px 15px;
  background-color: #f0f0f0;
  line-height: 1.8;
}
.table-normal td{
  border: 1px solid #ccc;
  text-align: left;
  vertical-align: top;
  font-weight: 500;
  padding: 10px 15px;
  line-height: 1.8;
}

.table-normal th:not(.th-flex){
  width: 25%;
}

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


  .table-normal{
    border: 1px solid #ccc;
  }
  .table-normal th{
    font-size: 93%;
    padding: 5px 5px;
    line-height: 1.5;
  }
  .table-normal td{
    font-size: 93%;
    padding: 5px 5px;
    line-height: 1.5;
  }

}

/**********************************************
corporate
***********************************************/

.map-canvas {
}
.map-canvas iframe {
  width: 100%;
}

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

  .map-canvas {
  }
  .map-canvas iframe {
    width: 100%;
    height: 250px;
  }

}


/**********************************************
contribution
***********************************************/


.contribution-staff{
  width: 45%;
  float: right;
  padding-left: 3%;
}
.contribution-staff figcaption{
  text-align: center;
  padding-top: 5px;
  font-weight: bold;
}

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


  .contribution-staff{
    width: auto;
    float: none;
    padding-left: 0;
    padding-bottom: 15px;
  }
  .contribution-staff figcaption{
    text-align: center;
    padding-top: 5px;
    font-weight: bold;
  }
}



/**********************************************
staff_interview
***********************************************/

.staff-block {
  padding-bottom: 30px;
  border-bottom: 3px dotted #ffe300;
  margin-bottom: 30px;
}
.staff-block-img {
  width: 30%;
  float: left;
}

.staff-block-inner {
  width: 65%;
  float: right;
}

.staff-block-name {
  font-size: 250%;
  line-height: 1;
  padding-bottom: 8px;
}
.staff-block-name small {
  padding-left: 1em;
  font-size: 50%;
  font-family: "Roboto";
  color: #999;
}
.staff-block-from {
  font-size: 116%;
  color: #999;
  font-weight: bold;
  margin-bottom: 10px;
}
.staff-block-title {
  display: inline-block;
  padding: 5px 15px;
  line-height: 1;
  font-weight: bold;
  font-size: 108%;
  margin-top: 0px;
  margin-bottom: 8px;
  background-color: #ffe300;
  color: #000;
}

.interview-link{
  text-align: right;
}


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

  .staff-block {
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .staff-block-img {
    width: 30%;
    float: right;
    padding-left: 2%;
  }

  .staff-block-inner {
    width: auto;
    float: none;
  }

  .staff-block-name {
    font-size: 124%;
    line-height: 1;
    padding-bottom: 5px;
  }
  .staff-block-name small {
    padding-left: 0.5em;
    font-size: 50%;
  }
  .staff-block-from {
    font-size: 85%;
    margin-bottom: 6px;
  }
  .staff-block-title {
    padding: 5px 8px;
    font-size: 100%;
    margin-bottom: 5px;
  }

}

/**********************************************
career_interview
***********************************************/

 
#career .staff-block-img {
  width: 30%;
  float: right;
}

#career .staff-block-inner {
  width: 65%;
  float: left;
}





/**********************************************
recruit
***********************************************/


.recruit-gallery{

}
.recruit-gallery a{
  display: block;
  color: #222;
  text-decoration: none;
}
.recruit-gallery a:hover{
  opacity: 0.7;
}

.recruit-gallery figcaption{
  text-align: center;
  padding-top: 5px;
  font-size: 93%;
}

.recruit-link{
  text-align:center;
  padding-top: 20px;
}

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


  .recruit-gallery figcaption{
    text-align: center;
    padding-top: 5px;
    font-size: 77%;
  }

}




/**********************************************
oneday
***********************************************/



.oneday {
}
.oneday-img {
  float: right;
  padding-left: 15px;
  padding-bottom: 15px;
}


.oneday-title {
  display: inline-block;
  padding: 8px 30px;
  margin-bottom: 15px;
  font-weight: bold;
  background-color: #d6d0bf;
  font-size: 200%;
  font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",  "HG明朝E", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "メイリオ", Meiryo, serif;
}


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


  .oneday-title {
    padding: 5px 20px;
    margin-bottom: 10px;
    font-size: 131%;
  }
  .oneday-img {
    width: 35%;
    float: right;
    padding-left: 10px;
    padding-bottom: 10px;
  }


}




/**********************************************
quick
***********************************************/

.quick-box{
  border: 3px double #222;
  padding: 15px 20px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}
.quick-box-text {
  font-size: 124%;
  line-height: 1.8;
}


.quick-img{
  float: right;
  padding-left: 15px;
  padding-bottom: 15px;
}


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


  .quick-box{
    padding: 8px 10px;
    margin-bottom: 10px;
  }
  .quick-box-text {
    font-size: 108%;
    line-height: 1.8;
  }


  .quick-img{
    float: none;
    padding-left: 0;
    padding-bottom: 0;
    text-align: center;
  }

}


/**********************************************
history
***********************************************/

.history-img-main{
  text-align: center;
  padding: 10px 0 20px;
}

.history-img-left {
  float: left;
  padding-right: 15px;
  padding-bottom: 5px;
}
.history-img-right {
  float: right;
  padding-left: 15px;
  padding-bottom: 5px;
}

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

  .history-img-left {
    float: none;
    padding-right: 0;
    padding-bottom: 0;
    text-align: center;
  }
  .history-img-right {
    float: none;
    padding-left: 0;
    padding-bottom: 0;
    text-align: center;
  }
}

/**********************************************
shipping
***********************************************/

.shipping-flow {
  margin-left: -8%;
  padding-left: 3%;
}
.shipping-flow li {
  width: 25%;
  float: left;
  margin-left: 8%;
  text-align: center;
  position: relative;
}
.shipping-flow li::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #0092da;
  position: absolute;
  right: -50px;
  top: 40%;
}
.shipping-flow li:last-child::after {
  display: none;
}

.shipping-flow li figure {
  padding: 10px 20px;
}

.shipping-flow-title {
  font-size: 131%;
  font-weight: bold;
  color: #0092da;
}



.shipping-block {
  display: table;
  width: 100%;
  margin-bottom: 40px;
}
.shipping-heading {
  width: 150px;
  display: table-cell;
  background: url(../../img/advantage/shipping/arrow.png) no-repeat center bottom ;
  padding-bottom: 120px;
}

.shipping-block:last-child .shipping-heading {
  background: none;
}
.shipping-title {
  padding: 15px 0;
  text-align: center;
  color: #fff;
  font-size: 147%;
  background: url(../../img/pattern01.png) repeat #0092da;
  border-bottom: 20px solid #fff;
}
.shipping-title small{
  display: block;
}
.shipping-inner {
  padding-left: 30px;
  display: table-cell;
}
.shipping-box {
  background-color: #f0f0f0;
  padding: 15px 30px;
  margin-bottom: 30px;
}
.shipping-subtitle {
  display: inline-block;
  border-bottom: 1px solid #222;
  font-size: 139%;
  margin-bottom: 15px;
}


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

  .shipping-flow {
    margin-left: 0;
    padding-left: 0;
  }
  .shipping-flow li {
    width: auto;
    float: none;
    margin-left: 0;
    position: relative;
    padding-bottom: 20px;
  }
  .shipping-flow li::before {
    display: none;
  }
  .shipping-flow li:last-child::after {
    display: none;
  }

  .shipping-flow li figure {
    padding: 0 0;
  }
  .shipping-flow li figure img{
    width: 120px;
  }

  .shipping-flow-title {
    font-size: 116%;
  }



  .shipping-block {
    display: block;
    width: 100%;
    margin-bottom: 00px;
  }
  .shipping-heading {
    width: auto;
    display: block;
    background: none;
    padding-bottom: 0;
  }

  .shipping-block:last-child .shipping-heading {
    background: none;
  }
  .shipping-title {
    padding: 8px 0;
    font-size: 124%;
    line-height: 1.2;
    border-bottom: 0 solid #fff;
    margin-bottom: 0;
  }
  .shipping-title small{
    display: block;
  }
  .shipping-inner {
    padding-left: 0;
    display: block;
    padding-top: 10px;
    padding-bottom: 30px;
  }
  .shipping-box {
    padding: 8px 10px;
    margin-bottom: 10px;
  }
  .shipping-subtitle {
    font-size: 116%;
    margin-bottom: 20px;
  }

}



/**********************************************
maschine
***********************************************/

.maschine-img-left{
  float: left;
  padding-right: 15px;
  padding-bottom: 15px;
}
.maschine-img-right{
  float: right;
  padding-left: 15px;
  padding-bottom: 15px;
}


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

  .maschine-img-left,
  .maschine-img-right{
    float: none;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 10px;
  }

}


/**********************************************
class
***********************************************/

.class-melit-list {
  padding-top: 10px;
  padding-bottom: 10px;
}
.class-melit-list li {
  display: inline-block;
  background: url(../../img/icon/icon_tshirt1.png) no-repeat left 0 / 26px 26px;
  font-size: 116%;
  padding: 4px 20px 10px 32px;
  font-weight: bold;
}

.school-bnr{
  padding-bottom: 15px;
}

.school-link{
  text-align: center;
}

.school-flow {
  margin-left: 0;
  margin-bottom: 40px;
}
.school-flow li {
  width: 25%;
  float: left;
  background-color: #0092da;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  position: relative;
}
.school-flow li::before,
.school-flow li::after {
  content: "";
  display: block;
  width: 20px;
  height: 51%;
  background-color: #fff;
}
.school-flow li::before{
  position: absolute;
  right: 0;
  top: 0;
  transform-origin:left top;
  transform:skewX( 15deg);
}
.school-flow li::after{
  position: absolute;
  right: 0;
  bottom: -1px;
  transform-origin:left bottom;
  transform:skewX( -15deg);
}
.school-flow li:last-child::before,
.school-flow li:last-child::after {
  transform:skewX( 0);
}
.school-flow-number {
  font-family: "Roboto";
  font-weight: 700;
  font-size: 124%;
  border-bottom: 2px solid #fff;
  margin-bottom: 10px;
  margin-right: 20px;
}
.school-flow-text {
  font-size: 154%;
  font-weight: bold;
}


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

  .class-melit-list {
    padding-top: 5px;
    padding-bottom: 10px;
  }
  .class-melit-list li {
    display: block;
    font-size: 116%;
    padding: 4px 20px 2px 32px;
  }

  .school-bnr{
    padding-bottom: 10px;
  }

  .school-flow {
    margin-left: 0;
    margin-bottom: 20px;
  }
  .school-flow li {
    width: auto;
    float: none;
    padding: 10px 20px;
    margin-bottom: 5px;
  }
  .school-flow li::before,
  .school-flow li::after {
    display: none;
  }
  .school-flow-number {
    font-size: 124%;
    border-bottom: 1px solid #fff;
    margin-bottom: 6px;
    margin-right: 0;
  }
  .school-flow-text {
    font-size: 131%;
  }


}

/*
school-flow-block
*/

.school-flow-block {
  border: 3px double #222;
  padding: 30px 30px 0 30px;
}
.school-flow-list {
}
.school-flow-list li {
  padding-bottom: 30px;
}
.school-flow-list-number {
  width: 130px;
  float: left;
  background-color: #222;
  color: #fff;
  font-family: "Roboto";
  font-weight: 700;
  padding: 5px 0;
  text-align: center;
  font-size: 131%;
  border-radius: 6px;
  letter-spacing: 0.1em;
}
.school-flow-list-inner {
  padding-left: 170px;
}
.school-flow-list-title {
  font-size: 139%;
  border-bottom: 1px solid #222;
  padding-bottom: 5px;
  margin-bottom: 12px;
}


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


  .school-flow-block {
    border: 3px double #222;
    padding: 10px 10px 0 10px;
  }
  .school-flow-list {
  }
  .school-flow-list li {
    padding-bottom: 20px;
  }
  .school-flow-list-number {
    width: 80px;
    float: none;
    padding: 2px 0;
    font-size: 85%;
    border-radius: 3px;
    margin-bottom: 3px;
  }
  .school-flow-list-inner {
    padding-left: 0;
  }
  .school-flow-list-title {
    font-size: 116%;
    border-bottom: 1px solid #222;
    padding-bottom: 3px;
    margin-bottom: 8px;
  }

}


/**********************************************
gakuwari
***********************************************/

.gakuwari-list {
  border-top: 8px solid #222;
  margin-bottom: 20px;
}
.gakuwari-list li {
  background-color: #fee30c;
  border-bottom: 8px solid #222;
  padding: 5px 2% 3px;
}
.gakuwari-list-title {
  width: 48%;
  float: left;
}
.gakuwari-list-text {
  width: 48%;
  float: right;
}



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

  .gakuwari-list {
    border-top: 4px solid #222;
  }
  .gakuwari-list li {
    border-bottom: 4px solid #222;
  }
  .gakuwari-list-title {
    width: auto;
    float: none;
    padding-right: 0;
  }
  .gakuwari-list-text {
    width: auto;
    float: none;
    padding-left: 80px;
  }

}



/**********************************************
interview
***********************************************/

.interview-block{
  padding-top: 20px;
  padding-bottom: 50px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ccc;
}

.interview-heading {
  margin-bottom: 20px;
}
.interview-user-img {
  width: 100px;
  float: left;
}
.interview-user-img img {
  border: 1px solid #ccc;
}
.interview-heading-inner {
  padding-left: 140px;
}
.interview-heading-title {
  font-size: 154%;
  margin-bottom: 5px;
  line-height: 1.2;
}

.interview-heading-balloon {
  border: 1px solid #222;
  border-radius: 10px;
  padding: 12px 20px;
  line-height: 1.66;
  font-size: 108%;
  position: relative;
}

.interview-heading-balloon::before {
  content: "";
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #fff;
  transform: scaleY(.5) rotate(45deg) translate(-50%, -50%);
  position: absolute;
  top: 20px;
  left: -12px;
}




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


  .interview-block{
    padding-top: 0;
    padding-bottom: 30px;
    margin-bottom: 20px;
  }

  .interview-heading {
    margin-bottom: 10px;
  }
  .interview-user-img {
    width: 50px;
    float: left;
  }
  .interview-user-img img {
    border: 1px solid #ccc;
  }
  .interview-heading-inner {
    padding-left: 60px;
  }
  .interview-heading-title {
    font-size: 116%;
    margin-bottom: 3px;
    line-height: 1.2;
  }

  .interview-heading-balloon {
    border-radius: 6px;
    padding: 5px 8px;
    line-height: 1.5;
    font-size: 93%;
  }

  .interview-heading-balloon::before {
    width: 8px;
    height: 8px;
    top: 10px;
    left: -5px;
  }

}



/**********************************************
voice
***********************************************/

.category-box{
  background-color: #f0f0f0;
  padding: 15px 20px 20px 20px;
}

.category-list-boxgroup{
  margin-left: -1%;
}
.category-list-boxgroup li{
  margin-left: 1%;
  width: 24%;
  float: left;
  margin-bottom: 5px;
}
.category-list-boxgroup li a{
  display: block;
  border: 1px solid #ccc;
  padding: 8px 10px 6px 10px;
  background-color: #fff;
  font-size: 108%;
  text-decoration: none;
  color: #222;
}
.category-list-boxgroup li a img{
  height: 1.7em;
  margin-right: 0.3em;
  vertical-align: middle;
  margin-top: -2px;
}

.category-list-linkgroup{
  background-color: #fff;
  padding: 15px 20px;
}
.category-list-linkgroup li{
  display: inline-block;
  padding-right: 15px;
  padding-bottom: 3px;
}
.category-list-linkgroup a{
  color: #0092da;
}


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


  .category-box{
    background-color: #f0f0f0;
    padding: 8px 10px 5px 10px;
  }

  .category-list-boxgroup{
    margin-left: -1%;
  }
  .category-list-boxgroup li{
    margin-left: 1%;
    width: 49%;
    float: left;
    margin-bottom: 3px;
  }
  .category-list-boxgroup li a{
    padding: 8px 8px 6px 8px;
    background-color: #fff;
    font-size: 93%;
  }
  .category-list-boxgroup li a img{
  }

  .category-list-linkgroup{
    background-color: #fff;
    padding: 5px 10px 5px 10px;
  }
  .category-list-linkgroup li{
    display: inline-block;
    padding-right: 10px;
    padding-bottom: 2px;
  }
  .category-list-linkgroup a{
  }


}

/**********************************************
price
***********************************************/

.price-info {
  margin-left: -5%;
  padding-top: 10px;
}
.price-info li {
  width: 20%;
  margin-left: 5%;
  float: left;
  position: relative;
}
.price-info li:not(:last-child)::after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: url(../../img/price/plus.png) no-repeat center center / cover;
  position: absolute;
  right: -33px;
  top: 35%;
}
.price-info-img {
}
.price-info-img img{
  border: 3px solid #222;
  box-sizing: border-box;
}
.price-info-img figcaption {
  text-align: center;
  padding-top: 10px;
  font-weight: bold;
}



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

  .price-info {
    margin-left: -3%;
    padding-top: 0;
  }
  .price-info li {
    width: 22%;
    margin-left: 3%;
  }
  .price-info li:not(:last-child)::after {
    display: none;
  }
  .price-info-img {
  }
  .price-info-img img{
    border: 2px solid #222;
  }
  .price-info-img figcaption {
    font-size: 77%;
    padding-top: 5px;
  }

}


.price-box{
  border: 3px solid #222;
  padding: 20px 30px;
  margin-top: 20px;
}


.price-list{
  margin-bottom: 15px;

}
.price-list li{
  float: left;
  width: 20%;
}

.price-block{
  padding-bottom: 30px;
}
.price-block > h4{
  padding-top: 40px;
}

.price-block p{
	padding:10px 0 10px;
}

.price-block h3{
	padding-top: 20px;
}


.price-table{
  border: 1px solid #aaa;
  margin-bottom: 5px;
}
.price-table thead th{
  border: 1px solid #aaa;
  background-color: #222;
  color: #fff;
  font-weight: bold;
  padding: 8px 0;
  text-align: center;
}
.price-table tbody th{
  border: 1px solid #aaa;
  font-weight: bold;
  padding: 10px 5px;
  text-align: center;
  vertical-align: middle;

}
.price-table tbody td{
  border: 1px solid #aaa;
  text-align: center;
  vertical-align: middle;
  padding: 6px 5px;
}

.price-table-number{
  font-weight: bold;
  font-size: 139%;
  color: #e60012;
}
.price-table-down{
  font-size: 131%;
  font-weight: bold;
  background-color: #f0f0f0;
}


.price-option {
  margin-bottom: 20px;

}
.price-option li {

}
.price-option li img {
  border: 1px solid #222;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}



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

  .price-box{
    border: 1px solid #222;
    padding: 6px 8px;
    margin-top: 10px;
  }


  .price-list{
    margin-bottom: 10px;
  }
  .price-list li{
    width: 33%;
  }

  .price-block{
    padding-bottom: 30px;
  }
  .price-block > h4{
    padding-top: 20px;
  }


  .price-table{
  }
  .price-table thead th{
    padding: 4px 0;
    font-size: 93%;
  }
  .price-table tbody th{
    padding: 6px 5px;
    font-size: 93%;

  }
  .price-table tbody td{
    padding: 6px 5px;
    font-size: 93%;
  }

  .price-option {
    margin-bottom: 20px;
  }
  .price-option li {
    width: 48%;
    padding-bottom: 4px;
  }


}

/**********************************************
corporation
***********************************************/



.corporation-img-left {
  float: left;
  padding-right: 25px;
  padding-bottom: 5px;
}
.corporation-img-right {
  float: right;
  padding-left: 25px;
  padding-bottom: 5px;
}

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


  .corporation-img-left {
    width: 28%;
    float: left;
    padding-right: 10px;
    padding-bottom: 5px;
  }
  .corporation-img-right {
    width: 28%;
    float: right;
    padding-left: 10px;
    padding-bottom: 5px;
  }
}


/**********************************************
repeat
***********************************************/


.repeat-box{
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}

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

  .repeat-box *{
    float: none !important;
  }


}


/**********************************************
process
***********************************************/

.process-img{
  width: 40%;
  float: right;
  padding-left: 3%;
}


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

}


/*
cutting
*/


.cutting-bg{
  background: url(../../img/process/cutting/bg.jpg) no-repeat right 50px;
}

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

  .cutting-bg{
    background: none;
  }
}

/*
inkjet
*/


.inkjet-flow {
  background: url(../../img/process/inkjet/maschine.jpg) no-repeat left center ;
  padding-left: 230px;
  margin-top: 30px;
  margin-bottom: 20px;
}

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

.inkjet-flow {
  background: none;
  padding-left: 0;
  margin-top: 30px;
  margin-bottom: 20px;
}

}




.inkjet li{
  display: inline-block;
  width: 340px;
  vertical-align: top;
  margin: 20px 15px 30px 0px;
  border: #cccccc 1px solid;
  padding: 15px;
  text-align: center;
  font-size: 120%;
  line-height: 140%;
  }
  .inkjet li img{
  margin:10px 0 0 0;}



/*
transcri
*/


.transcription-flow {
  background: url(../../img/process/transcription/maschine.jpg) no-repeat left center ;
  background-size:;
  padding-left: 230px;
  margin-top: 30px;
  margin-bottom: 20px;
  height: 202px;
}

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

.transcription-flow {
  background: none;
  padding-left: 0;
  margin-top: 30px;
  margin-bottom: 20px;
}

}




/*
silk
*/

.silk-block{
  padding: 10px 0 20px;
}
.silk-img{
  width: 35%;
  float: left;
}
.silk-inner{
  width: 63%;
  float: right;
}

.silk-title{
  font-size: 154%;
  margin-bottom: 10px;
}
.silk-number{
  display: inline-block;
  background-color: #222;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.5em;
  text-align: center;
  font-size: 18px;
  font-family: "Roboto";
  line-height: 1.7;
}


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


  .silk-block{
    padding: 10px 0 10px;
  }
  .silk-img{
    width: auto;
    float: none;
    margin-bottom: 10px;
    text-align: center;
  }
  .silk-inner{
    width: auto;
    float: none;
  }

  .silk-title{
    font-size: 124%;
    margin-bottom: 6px;
  }
  .silk-number{
    width: 22px;
    height: 22px;
    font-size: 15px;
    line-height: 1.7;
  }

}



/*
刺繍 embroidery
*/


.embroidery-flow {
  margin-left: -1%;
  margin-bottom: 40px;
}
.embroidery-flow li {
  width: 24%;
  margin-left: 1%;
  float: left;
  background-color: #0092da;
  padding: 15px 10px;
  box-sizing: border-box;
  color: #fff;
  position: relative;
}

.embroidery-flow-title {
  font-size: 124%;
  margin-bottom: 10px;
  margin-right: 20px;
  font-weight: bold;
}
.embroidery-flow-text {
  font-size: 93%;
}


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

  .embroidery-flow {
    margin-left: 0;
    margin-bottom: 20px;
  }
  .embroidery-flow li {
    width: auto;
    float: none;
    padding: 10px 10px;
    margin-bottom: 5px;
  }

  .embroidery-flow-title {
    font-size: 116%;
    border-bottom: 1px solid #fff;
    margin-bottom: 6px;
    margin-right: 0;
  }
  .embroidery-flow-text {
    font-size: 100%;
  }

}



/**********************************************
movie
***********************************************/



.movie-list{

}
.movie-list li{
  padding-bottom: 40px;

}
.movie-list-box {
  margin-bottom: 10px;
}
.movie-list-box iframe {
  width: 100%;
  height: 250px;
}
.movie-title {
  background-color: #0092da;
  font-weight: bold;
  font-size: 116%;
  padding: 4px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  color: #fff;
}
.movie-text {
  line-height: 1.8;
  font-size: 108%;
}


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


  .movie-list{
    margin-left: 0;
  }
  .movie-list li{
    margin-left: 0;
    width: auto;
    float: none;
    padding-bottom: 30px;
  }

  .movie-list-box iframe {
    width: 100%;
    height: 180px;
  }

}


/**********************************************
simulation
***********************************************/

.simulation{

}
.simulation-img{
  float: left;
  width: 30%;
}
.simulation-inner{
  width: 68%;
  float: right;
}

.simulation-table{
  border: 1px solid #aaa;
  table-layout: fixed;
}
.simulation-table th{
  border: 1px solid #aaa;
  background-color: #f0f0f0;
  text-align: center;
  padding: 6px 0;
}
.simulation-table td{
  border: 1px solid #aaa;
  text-align: center;
  padding: 10px 8px;
  color: #0092da;
  font-weight: bold;
}
.simulation-table th:first-child{
  color: #222;
  width: 30%;
}
.simulation-table td:first-child{
  color: #222;
  font-weight: bold;
}


@media screen and (max-width:768px) {
  .simulation{

  }
  .simulation-img{
    float: none;
    width: auto;
    text-align: center;
  }
  .simulation-img img{
    max-width: 200px;
  }
  .simulation-inner{
    float: none;
    width: auto;
  }

  .simulation-table{
    border: 1px solid #aaa;
    table-layout: fixed;
  }
  .simulation-table th{
    padding: 4px 2px;
    font-size: 93%;
  }
  .simulation-table td{
    padding: 4px 2px;
    font-size: 85%;
  }

}


/**********************************************
enquete
***********************************************/

.enquete-box{
  padding: 30px 0;
  border-bottom: 1px solid #ccc;
}

/**********************************************
post
***********************************************/

.post{
  padding-bottom: 30px;
}

.post p{
  font-size: 108%;
  line-height: 1.75;
  margin-bottom: 1em;
}

.post p + p{
  margin-bottom: 0;
}



.enquete-post h3{
  margin-top: 30px;
  font-size: 124%;
  color: #0092d9;
}
.enquete-post h4{
  margin-top: 30px;
  font-size: 124%;
  color: #0092d9;
}
.enquete-post p{
  font-size: 108%;
  line-height: 1.75;
  margin-bottom: 1em;
}





/**********************************************
stock-table
***********************************************/
/*

.stock-table{
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 1px;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
.stock-table thead th{
  border: 1px solid #ccc;
  background-color: #e0e0e0;
  padding: 6px 0;
  font-weight: 500;
  text-align: center;
  font-size: 100%;
  white-space: nowrap;
}
.stock-table tbody th{
  background-color: #f0f0f0;
  padding: 0 10px;
  vertical-align: middle;
  border: 1px solid #ccc;
  white-space: nowrap;
}
.stock-table tbody td{
  max-width: 80px;
  height: 40px;
  padding: 0 20px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 85%;
  white-space: nowrap;
  width: 100px;
}
*/
/*

.stock-table{
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 1px;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
.stock-table thead th{
  border: 1px solid #ccc;
  background-color: #e0e0e0;
  font-weight: 500;
  text-align: center;
  font-size: 100%;
  white-space: nowrap;
}
.stock-table tbody th{
  background-color: #f0f0f0;
  vertical-align: middle;
  border: 1px solid #ccc;
  white-space: nowrap;
}
.stock-table tbody td{
  max-width: 80px;
  width: 100px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 85%;
  white-space: nowrap;
}
*/

.stock-table{
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 1px;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
.stock-table thead th{
  border: 1px solid #ccc;
  background-color: #e0e0e0;
  font-weight: 500;
  text-align: center;
  font-size: 100%;
  white-space: nowrap;
}
.stock-table tbody th{
  background-color: #f0f0f0;
  vertical-align: middle;
  border: 1px solid #ccc;
  white-space: nowrap;
}
.stock-table tbody td{
  max-width: 80px;
  width: 100px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 85%;
  white-space: nowrap;
}



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

}


/**********************************************
              sport
***********************************************/

.rela {
  position: relative;
}

@media screen and (min-width:769px) {
  .abs {
    position: absolute;
    right: 30px;
    top: 50%;
    display: table;
    text-align: center;
    background: #fff;
    width: 42%;
    margin: -150px 0 0;
    padding: 0 40px;
    height: 300px;
  }

  .abs_box {
    font-size: 2.5rem;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
  }
}

.estimate {
  width: 80%;
  background: #e72c2f;
  color: #fff;
  margin: 30px auto 10px;
  height: 100px;
}

.estimate_btn {
  text-decoration: none;
  font-size: 3rem;
  color: #fff;
  font-weight: bold;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
}

@media screen and (max-width:768px) {
  .estimate_btn {
    font-size: 2rem;
  }
}

.bor {
  border: 2px solid #000;
  text-align: center;
  padding: 10px;
  margin: 20px 0;
}

 /* エラー用 */
 div.alert {
  background-color:#FFEFEF;
  margin:0 0 1em 0; padding:10px;
  color:#C25338;
  border:1px solid #D4440D;
  line-height:1.5;
  clear:both;
  background-repeat:no-repeat;
  background-position:5px 5px;
  font-size: 2rem;
}
div.alert span {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/cancel_48.png', sizingMethod='scale');
  width:48px; height:48px;
  position:relative;
  top:-5px; left:-5px;
  display:block;
  text-indent:-9999px;
  float:left;
}
html>body div.alert { background-image:url(/content/img/css/cancel_48.png); }
html>body div.alert span { visibility:hidden; }
/* 警告用 */
div.warning {
  background-color:#ffff80;
  border-color:#E5A500;
  color:#CC7600;
}
div.warning span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/warning_48.png', sizingMethod='scale'); }
html>body div.warning { background-image:url(images/warning_48.png); }
html>body div.warning span { visibility:hidden; }

ul.lnk_ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

li.lnk_li {
  width: 30%;
  margin-top: 20px;
}

@media screen and (max-width:768px) {
  li.lnk_li {
    width: 49%;
  }
}

a.deco {
  text-decoration: none;
}

figcaption.figc_tlt {
  background: #000;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 1.5rem;
}

.lnk_box {
  position: relative;
}

p.lnk_txt {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 2rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}

/* school */
.melit_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 26px 0 0;
}
.melit_list .item {
  position: relative;
  width: calc(48% - 10px);
  margin: 0 0 40px 10px;
}
.melit_list .item:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  display: inline-block;
  width: 55px;
  height: 55px;
}
.melit_list .item._01:before {
  background: url(../../img/school/class/ico01.png) 0 0 / cover;
}
.melit_list .item._02:before {
  background: url(../../img/school/class/ico02.png) 0 0 / cover;
}
.melit_list .item._03:before {
  background: url(../../img/school/class/ico03.png) 0 0 / cover;
}
.melit_list .item._04:before {
  background: url(../../img/school/class/ico04.png) 0 0 / cover;
}
.melit_list .item._05:before {
  background: url(../../img/school/class/ico05.png) 0 0 / cover;
}
.melit_list .item._06:before {
  background: url(../../img/school/class/ico06.png) 0 0 / cover;
}
.melit_list .item .img {
  width: 100%;
}
.melit_list .item .ttl {
  margin: 15px 0 10px;
  line-height: 1.2;
  font-size: 17px;
  font-weight: bold;
  color: #00a0e9;
}
.melit_list .item .txt {
  line-height: 1.5;
  font-size: 14px;
}
.malit_txt_box {
  width: 100%;
  text-align: center;
}
.melit_ttl {
  position: relative;
  display: inline-block;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 20px;
  color: #fff;
  background: #00a0e9;
}
.melit_ttl:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;
  border-top: 10px solid #00a0e9;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateX(-50%);
}
.melit_txt {
  margin: -18px 0 0;
  padding: 34px 30px 30px;
  line-height: 1.6;
  text-align: left;
  border: solid 1px #00a0e9;
}
.school-link._add .btn {
  margin: 0 10px;
}
@media screen and (max-width:768px) {
  .melit_list .item {
    width: calc(100% - 10px);
  }
  .school-link._add .btn {
    margin: 10px 0;
  } 
}


/* シミュレーター */

.title-scroll{
	text-align: center;
	padding: 8px 0 5px;
	margin: 0px!important;
	font-size: 130%;
}
#designsimulator .scroll{
	width: 90%;
height: 400px;
overflow-y: scroll;
	margin:5px auto 30px;
	border: 1px #c0c0c0 solid;
	line-height: 1.5em;
	padding: 10px;
}

#designsimulator h3{
	padding: 20px 0 10px;
}

#designsimulator .scroll h4{
padding-top: 10px;
	
}

#designsimulator .scroll p{
}


#designsimulator .l-block .designsimulator-box p{
	padding: 10px 25px 40px;
	font-size: 120%;
}




#designsimulator .btn{
	text-align: center;
	font-size: 150%;
	padding-top: 20px;
	padding-bottom:20px;
}

.btn-center{
	text-align: center;
}



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


#designsimulator .btn{
font-size: 130%;	 
}

#designsimulator .l-block .designsimulator-box p{
	padding: 10px 25px 40px;
	font-size: 90%;
}


}

/* stoock */

.stock p{
	margin-bottom: 20px;
	color:red;
}