body.design2021 * {
	box-sizing: border-box;
}

.g1  { width: calc((100% / 12) - .01px); }
.g2  { width: calc(((100% / 12) * 2) - .01px); }
.g3  { width: calc(((100% / 12) * 3) - .01px); }
.g4  { width: calc(((100% / 12) * 4) - .01px); }
.g5  { width: calc(((100% / 12) * 5) - .01px); }
.g6  { width: calc((100% / 2) - .01px); }
.g7  { width: calc(((100% / 12) * 7) - .01px); }
.g8  { width: calc(((100% / 12) * 8) - .01px); }
.g9  { width: calc(((100% / 12) * 9) - .01px); }
.g10 { width: calc(((100% / 12) * 10) - .01px); }
.g11 { width: calc(((100% / 12) * 11) - .01px); }
.g12 { width: 100%; }
.g20p { width: calc(20% - .01px); }

.gap-5  { grid-gap:  5px; }
.gap-10 { grid-gap: 10px; }
.gap-20 { grid-gap: 20px; }
.gap-30 { grid-gap: 30px; }


/* Flex Box */
.flex-wrap {
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	-webkit-flex-wrap: wrap;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flex-left {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.flex-right {
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.flex-center {
	-webkit-justify-content: center;
	justify-content: center;
}
.flex-middle {
    align-items: center;
}
.flex-bottom {
    align-items: flex-end;
}
.flex-nowrap {
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

.flex-wrap > li {
    list-style:none;
}

.flex-gap-10 {
    margin-left:-10px;
    margin-right:-10px;
}
.flex-gap-10 > * {
    margin-left:10px;
    margin-right:10px;
}
.flex-gap-10 > .g1  { width: calc((100% / 12) - 20.01px); }
.flex-gap-10 > .g2  { width: calc(((100% / 12) * 2) - 20.01px); }
.flex-gap-10 > .g3  { width: calc(((100% / 12) * 3) - 20.01px); }
.flex-gap-10 > .g4  { width: calc(((100% / 12) * 4) - 20.01px); }
.flex-gap-10 > .g5  { width: calc(((100% / 12) * 5) - 20.01px); }
.flex-gap-10 > .g6  { width: calc((100% / 2) - 20.01px); }
.flex-gap-10 > .g7  { width: calc(((100% / 12) * 7) - 20.01px); }
.flex-gap-10 > .g8  { width: calc(((100% / 12) * 8) - 20.01px); }
.flex-gap-10 > .g9  { width: calc(((100% / 12) * 9) - 20.01px); }
.flex-gap-10 > .g10 { width: calc(((100% / 12) * 10) - 20.01px); }
.flex-gap-10 > .g11 { width: calc(((100% / 12) * 11) - 20.01px); }
.flex-gap-10 > .g12 { width: calc(100% - 20px); }
.flex-gap-10 > .g20p { width: calc(20% - 20.01px); }

.flex-gap-20 {
    margin-left:-20px;
    margin-right:-20px;
}
.flex-gap-20 > * {
    margin-left:20px;
    margin-right:20px;
}
.flex-gap-20 > .g1  { width: calc((100% / 12) - 40.01px); }
.flex-gap-20 > .g2  { width: calc(((100% / 12) * 2) - 40.01px); }
.flex-gap-20 > .g3  { width: calc(((100% / 12) * 3) - 40.01px); }
.flex-gap-20 > .g4  { width: calc(((100% / 12) * 4) - 40.01px); }
.flex-gap-20 > .g5  { width: calc(((100% / 12) * 5) - 40.01px); }
.flex-gap-20 > .g6  { width: calc((100% / 2) - 40.01px); }
.flex-gap-20 > .g7  { width: calc(((100% / 12) * 7) - 40.01px); }
.flex-gap-20 > .g8  { width: calc(((100% / 12) * 8) - 40.01px); }
.flex-gap-20 > .g9  { width: calc(((100% / 12) * 9) - 40.01px); }
.flex-gap-20 > .g10 { width: calc(((100% / 12) * 10) - 40.01px); }
.flex-gap-20 > .g11 { width: calc(((100% / 12) * 11) - 40.01px); }
.flex-gap-20 > .g12 { width: calc(100% - 40px); }
.flex-gap-20 > .g20p { width: calc(20% - 40.01px); }

.flex-gap-30 {
    margin-left:-30px;
    margin-right:-30px;
}
.flex-gap-30 > * {
    margin-left:30px;
    margin-right:30px;
}
.flex-gap-30 > .g1  { width: calc((100% / 12) - 60.01px); }
.flex-gap-30 > .g2  { width: calc(((100% / 12) * 2) - 60.01px); }
.flex-gap-30 > .g3  { width: calc(((100% / 12) * 3) - 60.01px); }
.flex-gap-30 > .g4  { width: calc(((100% / 12) * 4) - 60.01px); }
.flex-gap-30 > .g5  { width: calc(((100% / 12) * 5) - 60.01px); }
.flex-gap-30 > .g6  { width: calc((100% / 2) - 60.01px); }
.flex-gap-30 > .g7  { width: calc(((100% / 12) * 7) - 60.01px); }
.flex-gap-30 > .g8  { width: calc(((100% / 12) * 8) - 60.01px); }
.flex-gap-30 > .g9  { width: calc(((100% / 12) * 9) - 60.01px); }
.flex-gap-30 > .g10 { width: calc(((100% / 12) * 10) - 60.01px); }
.flex-gap-30 > .g11 { width: calc(((100% / 12) * 11) - 60.01px); }
.flex-gap-30 > .g12 { width: calc(100% - 60px); }
.flex-gap-30 > .g20p { width: calc(20% - 60.01px); }


/** Media Query **/

@media only screen and (max-width : 1180px) {
	.pc { display:none; }
	.sp { display:none; }
	.tb { display:inline-block; }
}
@media only screen and (max-width : 720px) {
	.tb { display:none; }
	.pc { display:none; }
	.sp { display:inline-block; }

	.flex-wrap {
		padding-bottom:0;
	}

    .g1   { width: 50%; }
    .g2   { width: 50%; }
    .g3   { width: 50%; }
    .g4   { width: 50%; }
    .g5   { width: 50%; }
    .g6   { width: 100%; }
    .g7   { width: 100%; }
    .g8   { width: 100%; }
    .g9   { width: 100%; }
    .g10  { width: 100%; }
    .g11  { width: 100%; }
    .g20p { width: 100%; }

    .flex-gap-10 > .g1   { width: calc((100% / 2) - 20.01px); }
    .flex-gap-10 > .g2   { width: calc((100% / 2) - 20.01px); }
    .flex-gap-10 > .g3   { width: calc((100% / 2) - 20.01px); }
    .flex-gap-10 > .g4   { width: calc((100% / 2) - 20.01px); }
    .flex-gap-10 > .g5   { width: calc((100% / 2) - 20.01px); }
    .flex-gap-10 > .g6 ,
    .flex-gap-10 > .g7 ,
    .flex-gap-10 > .g8 ,
    .flex-gap-10 > .g9 ,
    .flex-gap-10 > .g10 ,
    .flex-gap-10 > .g11 ,
    .flex-gap-10 > .g20p { width: 100%; }

    .flex-gap-20 > .g1   { width: calc((100% / 2) - 40.01px); }
    .flex-gap-20 > .g2   { width: calc((100% / 2) - 40.01px); }
    .flex-gap-20 > .g3   { width: calc((100% / 2) - 40.01px); }
    .flex-gap-20 > .g4   { width: calc((100% / 2) - 40.01px); }
    .flex-gap-20 > .g5   { width: calc((100% / 2) - 40.01px); }
    .flex-gap-20 > .g6 ,
    .flex-gap-20 > .g7 ,
    .flex-gap-20 > .g8 ,
    .flex-gap-20 > .g9 ,
    .flex-gap-20 > .g10 ,
    .flex-gap-20 > .g11 ,
    .flex-gap-20 > .g20p { width: 100%; }

    .flex-gap-30 > .g1   { width: calc((100% / 2) - 60.01px); }
    .flex-gap-30 > .g2   { width: calc((100% / 2) - 60.01px); }
    .flex-gap-30 > .g3   { width: calc((100% / 2) - 60.01px); }
    .flex-gap-30 > .g4   { width: calc((100% / 2) - 60.01px); }
    .flex-gap-30 > .g5   { width: calc((100% / 2) - 60.01px); }
    .flex-gap-30 > .g6 ,
    .flex-gap-30 > .g7 ,
    .flex-gap-30 > .g8 ,
    .flex-gap-30 > .g9 ,
    .flex-gap-30 > .g10 ,
    .flex-gap-30 > .g11 ,
    .flex-gap-30 > .g20p { width: 100%; }

	.hidden {
		display: inline;
	}
}