/* ==============================================================
陦ｨ遉ｺ蛻�ｊ譖ｿ縺�
============================================================== */
.sp-hide {
  display: none;
}
.pc-hide {
  display: none;
}
@media screen and (min-width: 400px) {
  .sp-hide-sm {
    display: none;
  }
  .sp-show-sm {
    display: block;
  }
  .pc-hide-sm {
    display: none;
  }
  .pc-show-sm {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .sp-hide-md {
    display: none;
  }
  .sp-show-md {
    display: block;
  }
  .pc-hide-md {
    display: none;
  }
  .pc-show-md {
    display: block;
  }
}
@media screen and (min-width: 1210px) {
  .sp-hide-lg {
    display: none;
  }
  .sp-show-lg {
    display: block;
  }
  .pc-hide-lg {
    display: none;
  }
  .pc-show-lg {
    display: block;
  }
}
/* ==============================================================
FLEX
============================================================== */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media screen and (min-width: 400px) {
  .flex-sm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 768px) {
  .flex-md {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 1210px) {
  .flex-lg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/*邵ｦ荳ｦ縺ｳ*/
.flexCol {
  -webkit-flex-direction: column;
  flex-direction: column;
}
@media screen and (min-width: 400px) {
  .flexCol-sm {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .flexCol-md {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
@media screen and (min-width: 1210px) {
  .flexCol-lg {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

/*邵ｦ荳ｦ縺ｳ�磯€�ｻ｢��*/
.flexColR {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
@media screen and (min-width: 400px) {
  .flexColR-sm {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 768px) {
  .flexColR-md {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 1210px) {
  .flexColR-lg {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

/*讓ｪ荳ｦ縺ｳ*/
.flexRow {
  -webkit-flex-direction: row;
  flex-direction: row;
}
@media screen and (min-width: 400px) {
  .flexRow-sm {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media screen and (min-width: 768px) {
  .flexRow-md {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media screen and (min-width: 1210px) {
  .flexRow-lg {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}

/*讓ｪ荳ｦ縺ｳ�磯€�ｻ｢��*/
.flexRowR {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media screen and (min-width: 400px) {
  .flexRowR-sm {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 768px) {
  .flexRowR-md {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 1210px) {
  .flexRowR-lg {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}

/*謚倥ｊ霑斐＠縺ｪ縺�*/
.flexNoWrap {
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
@media screen and (min-width: 400px) {
  .flexNoWrap-sm {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}
@media screen and (min-width: 768px) {
  .flexNoWrap-md {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}
@media screen and (min-width: 1210px) {
  .flexNoWrap-lg {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

/*謚倥ｊ霑斐＠險ｱ蜿ｯ*/
.flexWrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media screen and (min-width: 400px) {
  .flexWrap-sm {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 768px) {
  .flexWrap-md {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media screen and (min-width: 1210px) {
  .flexWrap-lg {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/*蟾ｦ謠�∴*/
.flexL {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
@media screen and (min-width: 400px) {
  .flexL-sm {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
}
@media screen and (min-width: 768px) {
  .flexL-md {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
}
@media screen and (min-width: 1210px) {
  .flexL-lg {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }
}

/*荳ｭ螟ｮ謠�∴*/
.flexC {
  -webkit-justify-content: center;
  justify-content: center;
}
@media screen and (min-width: 400px) {
  .flexC-sm {
    -webkit-justify-content: center;
    justify-content: center;
  }
}
@media screen and (min-width: 768px) {
  .flexC-md {
    -webkit-justify-content: center;
    justify-content: center;
  }
}
@media screen and (min-width: 1210px) {
  .flexC-lg {
    -webkit-justify-content: center;
    justify-content: center;
  }
}

/*蜿ｳ謠�∴*/
.flexR {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
@media screen and (min-width: 400px) {
  .flexR-sm {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
}
@media screen and (min-width: 768px) {
  .flexR-md {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1210px) {
  .flexR-lg {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
}


/*荳頑純縺�*/
.flexAlT {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
@media screen and (min-width: 400px) {
  .flexAlT-sm {
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
}
@media screen and (min-width: 768px) {
  .flexAlT-md {
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
}
@media screen and (min-width: 1210px) {
  .flexAlT-lg {
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
}

/*邵ｦ譁ｹ蜷代�荳ｭ螟ｮ謠�∴*/
.flexAlC {
  -webkit-align-items: center;
  align-items: center;
}
@media screen and (min-width: 400px) {
  .flexAlC-sm {
    -webkit-align-items: center;
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  .flexAlC-md {
    -webkit-align-items: center;
    align-items: center;
  }
}
@media screen and (min-width: 1210px) {
  .flexAlC-lg {
    -webkit-align-items: center;
    align-items: center;
  }
}

/*荳区純縺�*/
.flexAlB {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
@media screen and (min-width: 400px) {
  .flexAlB-sm {
    -webkit-align-items: flex-end;
    align-items: flex-end;
  }
}
@media screen and (min-width: 768px) {
  .flexAlB-md {
    -webkit-align-items: flex-end;
    align-items: flex-end;
  }
}
@media screen and (min-width: 1210px) {
  .flexAlB-lg {
    -webkit-align-items: flex-end;
    align-items: flex-end;
  }
}

/*邵ｦ縲€蝮�ｭ画純縺�*/
.flexAlBet {
  -webkit-align-items: space-between;
  align-items: space-between;
}
@media screen and (min-width: 400px) {
  .flexAlBet-sm {
    -webkit-align-items: space-between;
    align-items: space-between;
  }
}
@media screen and (min-width: 768px) {
  .flexAlBet-md {
    -webkit-align-items: space-between;
    align-items: space-between;
  }
}
@media screen and (min-width: 1210px) {
  .flexAlBet-lg {
    -webkit-align-items: space-between;
    align-items: space-between;
  }
}

/*荳｡繧ｵ繧､繝峨ｒ蜷医ｏ縺帙※蝮�ｭ画純縺�*/
.flexCBet {
  -webjustify-content: space-between;
  justify-content: space-between;
}
@media screen and (min-width: 400px) {
  .flexCBet-sm {
  -webjustify-content: space-between;
  justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  .flexCBet-md {
  -webjustify-content: space-between;
  justify-content: space-between;
  }
}
@media screen and (min-width: 1210px) {
  .flexCBet-lg {
  -webjustify-content: space-between;
  justify-content: space-between;
  }
}

.flexAro {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
@media screen and (min-width: 400px) {
  .flexAro-sm {
  -webkit-justify-content: space-around;
  justify-content: space-around;
  }
}
@media screen and (min-width: 768px) {
  .flexAro-md {
  -webkit-justify-content: space-around;
  justify-content: space-around;
  }
}
@media screen and (min-width: 1210px) {
  .flexAro-lg {
  -webkit-justify-content: space-around;
  justify-content: space-around;
  }
}


.col1 {
  width: 100%;
}
@media screen and (min-width: 400px) {
  .col1-sm {
    width: calc(100% / 1);
  }
}
@media screen and (min-width: 768px) {
  .col1-md {
    width: calc(100% / 1);
  }
}
@media screen and (min-width: 1210px) {
  .col1-lg {
    width: calc(100% / 1);
  }
}

.col2 {
  width: 50%;
}
@media screen and (min-width: 400px) {
  .col2-sm {
    width: calc(100% / 2);
  }
}
@media screen and (min-width: 768px) {
  .col2-md {
    width: calc(100% / 2);
  }
}
@media screen and (min-width: 1210px) {
  .col2-lg {
    width: calc(100% / 2);
  }
}

.col3 {
  width: calc(100% / 3);
}
@media screen and (min-width: 400px) {
  .col3-sm {
    width: calc(100% / 3);
  }
}
@media screen and (min-width: 768px) {
  .col3-md {
    width: calc(100% / 3);
  }
}
@media screen and (min-width: 1210px) {
  .col3-lg {
    width: calc(100% / 3);
  }
}

.col4 {
  width: 100%;
}
@media screen and (min-width: 400px) {
  .col4-sm {
    width: calc(100% / 4);
  }
}
@media screen and (min-width: 768px) {
  .col4-md {
    width: calc(100% / 4);
  }
}
@media screen and (min-width: 1210px) {
  .col4-lg {
    width: calc(100% / 4);
  }
}

.col5 {
  width: 100%;
}
@media screen and (min-width: 400px) {
  .col5-sm {
    width: calc(100% / 5);
  }
}
@media screen and (min-width: 768px) {
  .col5-md {
    width: calc(100% / 5);
  }
}
@media screen and (min-width: 1210px) {
  .col5-lg {
    width: calc(100% / 5);
  }
}