/* CSS FOR FILE ABOUT */
.About{width: 100%;height: 100%;position: relative;text-align: center;background: url(../img/pic/175.png);background-position: center center;background-size: cover;background-attachment: fixed;color: #EEE;line-height: 1.5;}
	.About::after{content: "";display: block;clear: both;}
	.About__menu{position: absolute;z-index: 999;top: 0px;left: 0;width: 300px;text-align: center;height: 100%;}
		.About__menu .About__float{margin: 0 auto;text-align: center;font-size: 16px;width: 100%;font-weight: 100;}
			.About__menu .About__float .AboutMenu{padding: 15px 10px;width: calc(100% - 20px);}
			.About__menu .About__float .AboutMenu.active{color: #ffa500;border-left:3px solid #ffa500;}
			.About__menu .About__float .AboutRealMenu{cursor: pointer;transition:0.3s;}
			.About__menu .About__float .AboutRealMenu:hover{background: #ffa500;color: #222;transition:0.3s;}
			.About__menu .About__float .AboutMenu.active:hover{border-left:3px solid #ffe800;}
	.About__body{position: absolute;top: 0px;right: 0;width: calc(100% - 300px);height: 100%;opacity: 0.95;z-index: 998;}
	 	.About__body .midashi{font-size: 2em;font-weight: 100;padding: 10px 0 20px;}
	 	.About__body .miniMidashi{font-size: 1.5em;font-weight: 100;padding: 10px 0 20px;}
		.About__body .aboutBody{background: #FFF;opacity: 0.8;color: #222;padding: 20px;margin: 20px;}
			.About__body .aboutBody .aboutDiv{width: 100%;}
			.About__body .aboutBody .aboutDiv::after{content: "";display: block;clear: both;}
				.About__body .aboutBody .aboutDiv .div{float: left;}
				.About__body .aboutBody .aboutDiv .div--w33{width: 33.3333%;padding-bottom: 25px;}
				.About__body .aboutBody .aboutDiv .div--w50{width: 50%;padding-bottom: 25px;}
				.About__body .aboutBody .aboutDiv .div--w66{width: 66.6666%;padding-bottom: 25px;}
				.About__body .aboutBody .aboutDiv .wrapper{padding: 10px;}
			.About__body .aboutBody .aboutTable{width: 100%;margin-top: 10px;border: 0;font-size: 1em;}
				.About__body .aboutBody .aboutTable td{}
				.About__body .aboutBody .aboutTable td.helper{width: 33.3333%;padding: 15px;font-size: 0.8em;text-align: center;}
				.About__body .aboutBody .aboutTable tr:nth-child(odd)  > td.helper{background: #ddd;}
				.About__body .aboutBody .aboutTable tr:nth-child(even) > td.helper{background: #d3d3d3;}
				.About__body .aboutBody .aboutTable td.inputter{width: 66.6666%;text-align: left;padding: 10px;}
				.About__body .aboutBody .aboutTable tr:nth-child(odd)  > td.inputter{background: #eee;}
				.About__body .aboutBody .aboutTable tr:nth-child(even) > td.inputter{background: #e5e5e5;}
				.About__body .aboutBody .aboutTableTrans tr:nth-child(odd)  > td.helper{background: none !important;text-align: center;}
				.About__body .aboutBody .aboutTableTrans tr:nth-child(even) > td.helper{background: none !important;text-align: center;}
				.About__body .aboutBody .aboutTableTrans tr:nth-child(odd)  > td.inputter{background: none !important;}
				.About__body .aboutBody .aboutTableTrans tr:nth-child(even) > td.inputter{background: none !important;}
				.About__body .aboutBody .aboutTableTrans tr td.helper .profImg{margin: 0px auto;border-radius: 70px;width: 140px;height: 140px;box-shadow: 0 0 20px 0 #aaa;}
				.About__body .aboutBody .aboutTable td.helper .title{font-size: 1.4em;padding: 5px;}
				.About__body .aboutBody .aboutTable td.inputter .input{width: calc(100% - 0px);font-size: 1em;background: none;height: 100%;}
				.About__body .aboutBody .aboutTable td.inputter .input--text{height: 160px !important;transition: 0.3s;}
				.About__body .aboutBody .aboutTable td.inputter .input--text--activated{height: 160px !important;transition: 0.3s;}
				.About__body .aboutBody .aboutTable td.inputter .title{font-size: 1.3em;padding: 10px;font-weight: 100;}
				.About__body .aboutBody .aboutTable td.inputter .note{font-size: 0.9em;padding: 10px;}
				.About__body .aboutBody .aboutBtnArea{width: 100%;text-align: center;margin-top: 20px;}
				.About__body .aboutBody .aboutBtnArea .btnBox{display: inline-block;width: 25%;min-width: 150px;max-width: 300px;}
				.About__body .aboutBody .aboutBtnArea button{margin: 2px auto;padding: 10px 2px 10px 18px;font-size: 12px;border-radius: 2px;background: #222;color: #ddd;width: calc(100% - 24px);position: relative;border: 1px solid #555;}
				.About__body .aboutBody .aboutBtnArea button:hover{background: #eee;color:#111;}
				.About__body .aboutBody .aboutTable td.helper--error{color: #da3000;border-right: 3px solid #da3000;}
				.About__body .aboutBody .aboutTable td.helper--error::before{content: "入力エラーがあります。";}
			.About__body .aboutBody .aboutBlock{width: 100%;margin-top: 10px;background: #EEE;text-align: center;padding: 20px 0;}
				.About__body .aboutBody .aboutBlock .title{font-size: 1.5em;padding: 10px 0;}
			.About__body .aboutBody .aboutEC{width: 100%;height: 20px;}
				.About__body .aboutBody .aboutEC::after{content: "";display: block;clear: both;}
				.About__body .aboutBody .aboutEC ul{width: 20%;height: 100%;float: left;margin: 0;padding: 0;}
			.About__body .aboutBody .aboutInfo{padding: 10px 10px 30px;margin: 0px 0px 0;width: calc(100% - 20px);background: #eee;color: #555;font-weight: 300;}
				.About__body .aboutBody .aboutInfo .aboutInfoTitle{font-size: 1.7em;padding:20px 0 30px;font-weight: 100;}
				.About__body .aboutBody .aboutInfo .aboutInfoNotion{font-size: 0.8em;padding: 20px 0 10px;}
		.About__body a{color: #00a8e1;text-decoration: none;cursor: pointer;}
			.About__body a:hover{text-decoration: underline;}

		.About__body .masonry{width: calc(100% - 10px);height: 100%;position: relative;padding: 5px;}
			.About__body .masonry::after{content: "";display: block;clear: both;}
			.About__body .masonry .masonBox{margin: 5px;float: left;width: calc(25% - 13px);box-shadow: 0 0 4px 0 #aaa;}
				.About__body .masonry .masonBox .masonImg{width: 100%;height: 180px;}
				.About__body .masonry .masonBox .masonDet{width: calc(100% - 10px);margin-top: 10px;padding: 5px;font-size: 14px;}
	
	.lookAtMe{color: #ffa500;}
	.About__floatMenu{position: fixed;z-index: 9999;top: 65px;right: 5px;width: 50px;height: 50px;border-radius: 50%;background: #eee;color: #333;font-size: 24px;}

@media screen and (max-width: 1050px){
	.About__menu{position: absolute;z-index: 999;top: 0px;left: 0;width: 200px;text-align: center;height: 100%;}
	.About__body{position: absolute;top: 0px;right: 0;width: calc(100% - 200px);height: 100%;opacity: 0.95;}
					.About__body .aboutBody .aboutTableTrans tr td.helper .profImg{border-radius: 50%;width: 120px;height: 120px;}
			.About__body .masonry .masonBox{margin: 5px;float: left;width: calc(33.3333% - 15px);box-shadow: 0 0 4px 0 #aaa;}
}

@media screen and (max-width: 700px){
	.About__menu{height: 60px;width: 100%;position: fixed;top:60px;left: 0;}
		.About__menu::after{content: "";display: block;clear: both;}
		.About__menu li{float: left;text-align: center;height: 100%;padding: 0;}
		.About__menu li:hover{padding: 0;}
		.About__menu li.menu{width: 60px;}
			.About__menu li.menu i{font-size: 24px;}
		.About__menu li.crumb{width: calc(100% - 60px);text-align: center;font-size: 16px;}
	.About__menu__float{position: fixed;top: 60px;left: 0;width: 100%;height: calc(100% - 60px);background: #222;color: #FFF;opacity: 0.9;z-index: 99999;}
		.About__menu__float .AboutMenu{padding: 15px 10px;width: calc(100% - 20px);border-top: 1px solid #333;border-bottom: 1px solid #111;}
	.About__body{width: 100%;padding: 0;margin: 0;position: fixed;top: 120px;left: 0;height: calc(100% - 120px);}
		.About__body .midashi{font-size: 1.8em;font-weight: 100;}
		.About__body .aboutBody{background: #FFF;opacity: 0.8;color: #222;padding: 0px;margin: 0px;}
			.About__body .aboutBody .aboutDiv .div{width: 100%;padding-bottom: 35px;}
			.About__body .aboutBody .aboutTable td.helper{padding: 10px 5px;}
					.About__body .aboutBody .aboutTableTrans tr td.helper{vertical-align: top;}
					.About__body .aboutBody .aboutTableTrans tr td.helper .profImg{border-radius: 5px;width: 60px;height: 120px;margin-top: 20px;}
				.About__body .aboutBody .aboutInfo .aboutInfoTitle{font-size: 1.4em;padding:20px 0 30px;}
			.About__body .masonry .masonBox{margin: 5px;float: left;width: calc(50% - 15px);box-shadow: 0 0 4px 0 #aaa;}
}