@charset "utf-8";
/* flexbox 親要素
-------------------------------------------- */
.flexbox01 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flexbox02 {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.flexbox03 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.flexbox04 {
  display: flex;
  justify-content: flex-start;
	align-items: flex-end;
  flex-wrap: wrap;
}
.flexbox06 {
  display: flex;
  justify-content: center;
	align-items: center;
  flex-wrap: wrap;
}
.flexbox07 {
  display: flex;
	align-items: center;
  flex-wrap: wrap;
}
.flexbox08 {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.flexbox09 {
  display: flex;
  justify-content: flex-end;
	align-items: center;
  flex-wrap: wrap;
}
.flexbox10 {
  display: flex;
	align-items: flex-end;
  flex-wrap: wrap;
}
.flex-dire,.flex-dire02 {
  display: flex;
  justify-content: space-between;
flex-direction: column-reverse;
  flex-wrap: wrap;
}
/* flexboxの子要素 */
.box-l{
	width: 100%;
	margin: 0 0 10px 0;
}
.box-m{
	width: 95%;
	margin: 0 20px;
}
.box-m02{
	width: 95%;
	margin: 0px;
}
.box-s{
	width: 100%;
}
@media print, screen and (min-width : 768px) {
/* 基本
-------------------------------------------- */
.flexbox05 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-dire {
  display: flex;
  justify-content: flex-start;
	flex-direction: row;
  flex-wrap: wrap;
}	
.flex-dire02 {
  display: flex;
  justify-content: space-between;
	flex-direction: row;
  flex-wrap: wrap;
}
.note-box {
    width: 30%;
    
}
/* flexboxの子要素 */
.box-l{
	width: 60%;
}
.box-m{
	width: 90%;
	margin: 0 20px;
}
.box-m02{
	width: 95%;
	margin: 0px;
}
.box-s{
	width: 35%;
	margin: 0;
}
}
@media print, screen and (min-width : 1200px){
/* flexboxの子要素 */
.box-l{
	width: 60%;
}
.box-m{
	width: 45%;
	margin: 0 20px;
}
.box-m02{
	width: 45%;
	margin: 0px;
}
.box-s{
	width: 35%;
}	
	
}