@charset "UTF-8";

header nav ul li.on span:after {
	
	left:    0%;
	width:  100%;
	
}


#about {

	padding-top:    6em;
	padding-bottom: 7em;

}

#about p {
	
	position: relative;
	z-index: 2;
	width: 35.2em;
	margin: 0 auto;
	font-size: 23.5px;
	line-height: 1.5;

}

#about p:first-child {

	margin-bottom: 1.3em;

}

#about .tb_wrap {
	
	position: relative;
	z-index: 2;
	width: 660px;
	margin: 0 auto;
	margin-top: 7em;

}

#about .tb_wrap table {

	width: 100%;
	border-collapse: collapse;

}

#about .tb_wrap table tr th,  #about .tb_wrap table tr td {
	
	padding: 0.4em 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 25.5px;
	letter-spacing: 0.12em;

}

#about .tb_wrap table tr th {
	
	width: 22%;
	text-align: left;
	font-weight: 500;
	vertical-align: top;

}

#about .yellow {

	position: absolute;
	top:   -6.5em;
	right: -5.4em;
	width: 320px;

}

#about .red {

	position: absolute;
	bottom:  -1em;
	right:  -5.5em;
	width: 440px;

}

#about .pink {

	position: absolute;
	bottom:  29.5em;
	right:   29em;
	width: 430px;

}

#about .orange {

	position: absolute;
	bottom: -3.5em;
	left:    4.5em;
	width: 480px;

}

/* 改行 */
.break {

	display: none;

}



/* 中サイズ */
@media only screen and (max-width: 1366px) {

	#about {
		
		padding-top:    4.5em;
		padding-bottom: 5.5em;
		
	}
	
	#about p {
		
		width: 36.7em;
		font-size: 16.5px;
		line-height: 1.5;
		
	}
	
	#about p:first-child {
		
		margin-bottom: 1.2em;
		
	}
	
	#about .tb_wrap {
		
		width: 480px;
		margin-top: 6em;
		
	}
	
	#about .tb_wrap table tr th,  #about .tb_wrap table tr td {
		
		padding: 0.35em 0;
		font-size: 18px;
		letter-spacing: 0.12em;
		
	}
	
	#about .tb_wrap table tr th {
		
		width: 22%;
		
	}
	
	#about .yellow {
		
		top:   -6.5em;
		right: -5.4em;
		width: 240px;
		
	}
	
	#about .red {
		
		bottom:  -0.5em;
		right:  -5.5em;
		width: 320px;
		
	}
	
	#about .pink {
		
		bottom:  23em;
		right:   23.5em;
		width: 300px;
		
	}
	
	#about .orange {
		
		bottom: -3em;
		left:    4.5em;
		width: 330px;
		
	}

}



/* iPadPro */
@media only screen and (max-width: 1024px) {

	#about {
		
		padding-top:    4em;
		padding-bottom: 5em;
		
	}
	
	#about p {
		
		width: 37.8em;
		font-size: 14px;
		line-height: 1.5;
		
	}
	
	#about p:first-child {
		
		margin-bottom: 1.2em;
		
	}
	
	#about .tb_wrap {
		
		width: 400px;
		margin-top: 5.5em;
		
	}
	
	#about .tb_wrap table tr th,  #about .tb_wrap table tr td {
		
		padding: 0.35em 0;
		font-size: 15px;
		letter-spacing: 0.12em;
		
	}
	
	#about .tb_wrap table tr th {
		
		width: 22%;
		
	}
	
	#about .yellow {
		
		top:   -6.5em;
		right: -5.4em;
		width: 185px;
		
	}
	
	#about .red {
		
		bottom: -0.5em;
		right:  -5.5em;
		width: 250px;
		
	}
	
	#about .pink {
		
		bottom:  21.5em;
		right:   17em;
		width: 230px;
		
	}
	
	#about .orange {
		
		bottom: -3em;
		left:    4.5em;
		width: 260px;
		
	}

}



/* AndroidのＬの横 */
@media only screen and (max-width: 854px) {

	#about .pink {
		
		bottom:  26.5em;
		right:   11em;
		width: 230px;
		
	}

}



/* iPad */
@media only screen and (max-width: 768px) {
	
	#about .pink {
		
		bottom:  26.5em;
		right:   7em;
		width: 230px;
		
	}
	
	#about .orange {
		
		bottom: -3em;
		left:   1em;
		width: 260px;
		
	}
	

}



/* iPhonePlusの横 */
@media only screen and (max-width: 736px) {



}



/* iPhone8の横 */
@media only screen and (max-width: 667px) {



}



/* iPhone5の横 */
@media only screen and (max-width: 568px) {

	/* 改行 */
	.break {
		
		display: block;
		
	}
	
	#about p {
		
		width: 29em;
		font-size: 14px;
		line-height: 1.5;
		
	}

}



/* AndLoidL */
@media only screen and (max-width: 480px) {

	#about {
		
		padding-top:    4em;
		padding-bottom: 4.5em;
		
	}
	
	#about p {
		
		width: auto;
		font-size: 14.5px;
		line-height: 1.7;
		
	}
	
	#about p:first-child {
		
		margin-bottom: 1em;
		
	}
	
	#about .tb_wrap {
		
		width: auto;
		margin-top: 4.5em;
		
	}
	
	#about .tb_wrap table tr th,  #about .tb_wrap table tr td {
		
		padding: 0.35em 0;
		font-size: 14px;
		letter-spacing: 0.12em;
		
	}
	
	#about .tb_wrap table tr th {
		
		width: 22%;
		
	}
	
	#about .yellow {
		
		top:   10em;
		right: -6em;
		width: 150px;
		
	}
	
	#about .red {
		
		bottom: 4em;
		right:  -9.8em;
		width: 220px;
		
	}
	
	#about .pink {
		
		bottom:  25em;
		right:   7.5em;
		width: 180px;
		
	}
	
	#about .orange {
		
		bottom: 7em;
		left:  -5em;
		width: 230px;
		
	}

}


/* Iphone12 Pro Max */
@media only screen and (max-width: 428px) {

	#about {
		
		padding-top:    4em;
		padding-bottom: 4em;
		
	}
	
	#about p {
		
		width: auto;
		font-size: 14px;
		line-height: 1.8;
		letter-spacing: 0.18em;
		
	}
	
	#about p:first-child {
		
		margin-bottom: 1em;
		
	}
	
	#about .tb_wrap {
		
		width: auto;
		margin-top: 4em;
		
	}
	
	#about .tb_wrap table tr th,  #about .tb_wrap table tr td {
		
		padding: 0.35em 0;
		font-size: 13.5px;
		letter-spacing: 0.1em;
		
	}
	
	#about .tb_wrap table tr th {
		
		width: 22%;
		
	}
	
	#about .yellow {
		
		top:   10em;
		right: -6em;
		width: 140px;
		
	}
	
	#about .red {
		
		bottom: 4em;
		right:  -9.8em;
		width: 210px;
		
	}
	
	#about .pink {
		
		bottom:  25em;
		right:   7.5em;
		width: 170px;
		
	}
	
	#about .orange {
		
		bottom: 5.7em;
		left:  -5em;
		width: 220px;
		
	}

}


/* iPhonePlus */
@media only screen and (max-width: 414px) {



}


/* iPhone12 Pro */
@media only screen and (max-width: 390px) {

	#about {
		
		padding-top:    4em;
		padding-bottom: 4em;
		
	}
	
	#about p {
		
		font-size: 13.5px;
		line-height: 1.8;
		letter-spacing: 0.14em;
		
	}
	
	#about p:first-child {
		
		margin-bottom: 1em;
		
	}
	
	#about .tb_wrap {
		
		margin-top: 4em;
		
	}
	
	#about .tb_wrap table tr th,  #about .tb_wrap table tr td {
		
		padding: 0.35em 0;
		font-size: 13px;
		letter-spacing: 0.08em;
		
	}
	
	#about .tb_wrap table tr th {
		
		width: 22%;
		
	}
	
	#about .yellow {
		
		top:   10em;
		right: -6em;
		width: 130px;
		
	}
	
	#about .red {
		
		bottom: 3.5em;
		right:  -10em;
		width: 200px;
		
	}
	
	#about .pink {
		
		bottom:  25.5em;
		right:   7em;
		width: 160px;
		
	}
	
	#about .orange {
		
		bottom: 5.5em;
		left:  -5em;
		width: 210px;
		
	}

}


/* iPhone8 */
@media only screen and (max-width: 375px) {



}



/* Galaxy */
@media only screen and (max-width: 360px) {

	#about {
		
		padding-top:    4em;
		padding-bottom: 4em;
		
	}
	
	#about p {
		
		font-size: 13px;
		line-height: 1.8;
		letter-spacing: 0.14em;
		
	}
	
	#about p:first-child {
		
		margin-bottom: 1em;
		
	}
	
	#about .tb_wrap {
		
		margin-top: 4em;
		
	}
	
	#about .tb_wrap table tr th,  #about .tb_wrap table tr td {
		
		padding: 0.35em 0;
		font-size: 12.5px;
		letter-spacing: 0.08em;
		
	}
	
	#about .tb_wrap table tr th {
		
		width: 22%;
		
	}
	
	#about .yellow {
		
		top:   10em;
		right: -6em;
		width: 120px;
		
	}
	
	#about .red {
		
		bottom: 3.5em;
		right:  -10em;
		width: 190px;
		
	}
	
	#about .pink {
		
		bottom:  25em;
		right:   6.5em;
		width: 160px;
		
	}
	
	#about .orange {
		
		bottom: 5.5em;
		left:  -5em;
		width: 200px;
		
	}

}



/* iPhone5 */
@media only screen and (max-width: 320px) {

	#about {
		
		padding-top:    4em;
		padding-bottom: 4em;
		
	}
	
	#about p {
		
		font-size: 12.5px;
		line-height: 1.8;
		letter-spacing: 0.1.2em;
		
	}
	
	#about p:first-child {
		
		margin-bottom: 1em;
		
	}
	
	#about .tb_wrap {
		
		margin-top: 4em;
		
	}
	
	#about .tb_wrap table tr th,  #about .tb_wrap table tr td {
		
		padding: 0.35em 0;
		font-size: 12px;
		letter-spacing: 0.08em;
		
	}
	
	#about .tb_wrap table tr th {
		
		width: 20%;
		
	}
	
	#about .yellow {
		
		top:   10em;
		right: -5.5em;
		width: 110px;
		
	}
	
	#about .red {
		
		bottom: 3.5em;
		right:  -10em;
		width: 180px;
		
	}
	
	#about .pink {
		
		bottom:  26em;
		right:   6.5em;
		width: 140px;
		
	}
	
	#about .orange {
		
		bottom: 5.2em;
		left:  -5em;
		width: 190px;
		
	}

}