@charset "UTF-8";

/* ========== ========== ==========
 base
 ========== ========== ========== */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  letter-spacing: 0.05em;
  /* font-size: 16px; */
  /* color: #555555; */
}

p {
  font-size: 100%;
}

h1 {
  font-size: 200%;
  font-weight: bold;
}

h2 {
  font-size: 175%;
  font-weight: bold;
}

h3 {
  font-size: 150%;
  font-weight: bold;
}

h4 {
  font-size: 125%;
  font-weight: bold;
}

h5 {
  font-size: 100%;
  font-weight: bold;
}

h6 {
  font-size: 100%;
  font-weight: bold;
}

img {
  display: block;
}

a {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

a:hover {
  opacity: 0.8;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
  margin-bottom: -20px;
}

.flex.fd_c {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex.fd_r {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex.jc_c {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex.jc_sb {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex.jc_sa {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flex.jc_start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.flex.jc_end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.flex.ai_c {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex.ai_start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.flex.ai_end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.flex.center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex > * {
  padding: 15px;
}

.flex .col_1 {
  -ms-width: 8.333333%;
  width: calc(100% * (1 / 12));
}

.flex .col_2 {
  -ms-width: 16.666666%;
  width: calc(100% * (2 / 12));
}

.flex .col_3 {
  -ms-width: 25%;
  width: calc(100% * (3 / 12));
}

.flex .col_4 {
  -ms-width: 33.333333%;
  width: calc(100% * (4 / 12));
}

.flex .col_5 {
  -ms-width: 41.666667%;
  width: calc(100% * (5 / 12));
}

.flex .col_6 {
  -ms-width: 50%;
  width: calc(100% * (6 / 12));
}

.flex .col_7 {
  -ms-width: 58.333333%;
  width: calc(100% * (7 / 12));
}

.flex .col_8 {
  -ms-width: 66.666666%;
  width: calc(100% * (8 / 12));
}

.flex .col_9 {
  -ms-width: 75%;
  width: calc(100% * (9 / 12));
}

.flex .col_10 {
  -ms-width: 83.333333%;
  width: calc(100% * (10 / 12));
}

.flex .col_11 {
  -ms-width: 91.666666%;
  width: calc(100% * (11 / 12));
}

.flex .col_12 {
  -ms-width: 100%;
  width: calc(100% * (12 / 12));
}

.flex [class^="col_"] {
  padding: 20px;
}

.inline_flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex_center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex.no_spacing > [class^="col_"] {
  padding: 0 !important;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

/* iPad 横 */
@media screen and (max-width: 1023px) {
  .container {
    width: 768px;
    max-width: 100%;
    padding: 0 20px;
  }
}

/* iPad 縦 */
/* iPhone */
@media screen and (max-width: 767px) {
  * {
    font-size: 16px;
  }

  h1,
  h2,
  h3 {
    font-size: 20px;
  }

  h4,
  h5,
  h6 {
    font-size: 18px;
  }

  .container {
    width: 480px;
    padding: 0 10px;
  }

  .flex [class^="col_"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
  }
}

/* ex_small sp */
@media screen and (max-width: 479px) {
  .container {
    width: 320px;
    max-width: 100%;
    padding: 0 10px;
  }
}

/*# sourceMappingURL=flex.css.map */