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

p {
  font-size: 16px;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

img {
  display: block;
}

/* .container {
  width: 1200px;
  margin: 0 auto;
} */

.flex {
  display: flex;
  flex-wrap: wrap;
}

.inline_flex {
  display: inline-flex;
  flex-wrap: wrap;
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.fd_c {
	flex-direction: column;
}

.jc_c {
	justify-content: center;
}

.jc_sb {
	justify-content: space-between;
}

.ai_s {
  align-items: flex-start;
}
.ai_c {
	align-items: center;
}

.ai_e {
  align-items: flex-end;
}

.col_1 {
  width: calc(100%/(12/1));
}
.col_2 {
  width: calc(100%/(12/2));
}
.col_3 {
  width: calc(100%/(12/3));
}
.col_4 {
  width: calc(100%/(12/4));
}
.col_5 {
  width: calc(100%/(12/5));
}
.col_6 {
  width: calc(100%/(12/6));
}
.col_7 {
  width: calc(100%/(12/7));
}
.col_8 {
  width: calc(100%/(12/8));
}
.col_9 {
  width: calc(100%/(12/9));
}
.col_10 {
  width: calc(100%/(12/10));
}
.col_11 {
  width: calc(100%/(12/11));
}
.col_12 {
  width: calc(100%/(12/12));
}

.flex_1 {
	flex: 1;
}

.flex_2 {
	flex: 2;
}

.flex_3 {
	flex: 3;
}

.flex_4 {
	flex: 4;
}

.flex_5 {
	flex: 5;
}

.flex_6 {
	flex: 6;
}

.flex_7 {
	flex: 7;
}

.flex_8 {
	flex: 8;
}

.flex_9 {
	flex: 9;
}

.flex_10 {
	flex: 10;
}

.flex_11 {
	flex: 11;
}

.flex_12 {
	flex: 12;
}

.flex [class^="col_"],
.flex [class^="flex_"] {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}

/* .flex [class^="col_"]:last-of-type,
.flex [class^="flex_"]:last-of-type {
	padding-left: 40px;
	padding-right: 0;
}

.flex [class^="col_"]:first-of-type,
.flex [class^="flex_"]:first-of-type {
  padding-left: 0;
  padding-right: 40px;
} */

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

/* iPad */
@media screen and (max-width: 1024px) {
  .container {
    padding: 0 20px;
  }
  .flex .col_1_tb {
    width: calc(100%/(12/1));
  }
  .flex .col_2_tb {
    width: calc(100%/(12/2));
  }
  .flex .col_3_tb {
    width: calc(100%/(12/3));
  }
  .flex .col_4_tb {
    width: calc(100%/(12/4));
  }
  .flex .col_5_tb {
    width: calc(100%/(12/5));
  }
  .flex .col_6_tb {
    width: calc(100%/(12/6));
  }
  .flex .col_7_tb {
    width: calc(100%/(12/7));
  }
  .flex .col_8_tb {
    width: calc(100%/(12/8));
  }
  .flex .col_9_tb {
    width: calc(100%/(12/9));
  }
  .flex .col_10_tb {
    width: calc(100%/(12/10));
  }
  .flex .col_11_tb {
    width: calc(100%/(12/11));
  }
  .flex .col_12_tb {
    width: calc(100%/(12/12));
  }
}

/* iPhone */
@media screen and (max-width: 768px) {
  /* * {
    font-size: 4vw;
  }
  h1,h2,h3 {
    font-size: 6vw;
  }
  h4,h5,h6 {
    font-size: 5vw;
  } */
  .flex [class^="col_"] {
    width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
  }
	.flex [class^="col_"],
	.flex [class^="flex_"] {
		margin-bottom: 20px;
	}
  .flex .col_1_sp {
    width: calc(100%/(12/1));
		padding: 0 10px !important;
  }
  .flex .col_2_sp {
    width: calc(100%/(12/2));
		padding: 0 10px !important;
  }
  .flex .col_3_sp {
    width: calc(100%/(12/3));
		padding: 0 10px !important;
  }
  .flex .col_4_sp {
    width: calc(100%/(12/4));
		padding: 0 10px !important;
  }
	.flex .col_5_sp {
		width: calc(100%/(12/5));
		padding: 0 10px !important;
	}
	.flex .col_6_sp {
		width: calc(100%/(12/6));
		padding: 0 10px !important;
	}
  .flex .col_7_sp {
    width: calc(100%/(12/7));
    padding: 0 10px !important;
  }
  .flex .col_8_sp {
    width: calc(100%/(12/8));
    padding: 0 10px !important;
  }
  .flex .col_9_sp {
    width: calc(100%/(12/9));
    padding: 0 10px !important;
  }
  .flex .col_10_sp {
    width: calc(100%/(12/10));
    padding: 0 10px !important;
  }
  .flex .col_11_sp {
    width: calc(100%/(12/11));
    padding: 0 10px !important;
  }
  .flex .col_12_sp {
    width: calc(100%/(12/12));
    padding: 0 10px !important;
  }
}