html {
	background-color: rgba(255, 255, 255, 1);
}

.h1 {font-size: 10em;}
.h2 {font-size: 9em;}
.h3 {font-size: 8em;}
.h4 {font-size: 7em;}
.h5 {font-size: 6em;}
.h6 {font-size: 5em;}
.h7 {font-size: 4em;}
.h8 {font-size: 3em;}
.h9 {font-size: 2em;}
.h10 {font-size: 1.5em;}
.h11 {font-size: 1em;}
.h12 {font-size: 0.9em;}
.h13 {font-size: 0.8em;}

.lh1 {line-height: 1em;}
.lh2 {line-height: 1.5em;}
.lh3 {line-height: 2em;}
.lh4 {line-height: 2.5em;}
.lh5 {line-height: 3em;}

.ls1 {letter-spacing: 0.2em;}


.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

.flex {
	display: flex;
}
.flex-center {
	
	flex-flow: wrap;
	justify-content: space-around;
	align-items: center;
}

.bold100 {font-weight: 100;}
.bold200 {font-weight: 200;}
.bold300 {font-weight: 300;}
.bold400 {font-weight: 400;}
.bold500 {font-weight: 500;}
.bold600 {font-weight: 600;}
.bold700 {font-weight: 700;}
.bold800 {font-weight: 800;}
.bold900 {font-weight: 900;}

.grid {display: grid;}
.grid.grid19 {grid-template-columns: 10% 90%;}
.grid.grid28 {grid-template-columns: 20% 80%;}
.grid.grid37 {grid-template-columns: 30% 70%;}
.grid.grid46 {grid-template-columns: 40% 60%;}
.grid.grid55 {grid-template-columns: 50% 50%;}
.grid.grid64 {grid-template-columns: 60% 40%;}
.grid.grid73 {grid-template-columns: 70% 30%;}
.grid.grid82 {grid-template-columns: 80% 20%;}
.grid.grid91 {grid-template-columns: 90% 10%;}
.grid.grid333 {grid-template-columns: auto auto auto;}
.grid.grid4444 {grid-template-columns: 25% 25% 25% 25%;}
@media screen and (max-width: 720px) {
	.grid.sp-grid-none {grid-template-columns: 100%;}
	.grid.sp-grid22 {grid-template-columns: 50% 50%;}
}

.grid .grid-joint2 {grid-column: 1/3;}
.grid .grid-joint3 {grid-column: 1/4;}
.grid .grid-joint4 {grid-column: 1/5;}
.grid .grid-joint5 {grid-column: 1/6;}

@keyframes slider-1 {
  0% {
	opacity: 0;
	transform: scale(1); /* ズームのための指定 */
  }
  4.16% {
	opacity: 1;
  }
  33.33% {
	opacity: 1;
  }
  41.66% {
	opacity: 0;
	transform: scale(1.2); /* ズームのための指定 */
  }
  100% {
	opacity: 0;
  }
}

@media screen and (max-width: 720px) {
	
	.h1 {font-size: 6.5em;}
	.h2 {font-size: 6em;}
	.h3 {font-size: 5.5em;}
	.h4 {font-size: 5em;}
	.h5 {font-size: 4.5em;}
	.h6 {font-size: 4em;}
	.h7 {font-size: 2.5em;}
	.h8 {font-size: 2em;}
	.h9 {font-size: 1.5em;}
	.h10 {font-size: 1.4em;}
	.h11 {font-size: 1.2em;}
	.h12 {font-size: 1em;}
	.h13 {font-size: 0.8em;}
	
	html {
		font-size: 12px;
	}
	
	.sp-p-none {
		padding: 0;
	}
}