@charset "UTF-8";

/* //////////////////////////////////////////////////
[COMMON] 
////////////////////////////////////////////////// */

/* webFont
----------------------------------- */
#kayacStyle li .num {
	font-family: 'Cantarell', arial, serif !important;
}
/* textOutline
----------------------------------- */
#strategyDistributionFig .strategyType li {
	text-shadow: 3px 3px 1px white, 3px 1.5px 1px white, 3px 0px 1px white, 3px -1.5px 1px white, 3px -3px 1px white, 1.5px -3px 1px white, 0px -3px 1px white, -1.5px -3px 1px white, -3px -3px 1px white, -3px -1.5px 1px white, -3px 0px 1px white, -3px 1.5px 1px white, -3px 3px 1px white, -1.5px 3px 1px white, 0px 3px 1px white, 1.5px 3px 1px white;
}

/* btnMoreExp
----------------------------------- */
#btnMoreExp {
	position: relative;
	width: 50%;
	min-width: 350px;
	max-width: 500px;
	margin: 0 auto 60px;
}
#btnMoreExp a {
	display: block;
	overflow: hidden;
	height: 60px;
	background: white;
	border: solid 1px black;
	border-radius: 5px;
	text-decoration: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#btnMoreExp a .yanasawa {
	position: absolute;
	top: -7px;
	left: 5%;
}
#btnMoreExp a .main,
#btnMoreExp a .hover {
	display: block;
	position: relative;
	top: 0;
	height: 100%;
	padding: 0 20px 0 80px;
	text-align: center;
	font-size: 124%;
	font-weight: bold;
	line-height: 60px;
	text-decoration: none;

	transition: 0.2s cubic-bezier(0, 0, 0.3, 1.0);
	-webkit-transition: 0.2s cubic-bezier(0, 0, 0.3, 1.0);
	-moz-transition: 0.2s cubic-bezier(0, 0, 0.3, 1.0);
}
#btnMoreExp a:hover .main,
#btnMoreExp a:active .main,
#btnMoreExp a:hover .hover,
#btnMoreExp a:active .hover {
	top: -60px;
}
@media screen and (max-width: 480px) {
	#btnMoreExp a:hover .main,
	#btnMoreExp a:active .main,
	#btnMoreExp a:hover .hover,
	#btnMoreExp a:active .hover {
		top: 0;
	} 
	#btnMoreExp a:hover .main,
	#btnMoreExp a .hover,
	#btnMoreExp a .main,
	#btnMoreExp a:hover .hover {
		color: black;
	}
}

/* //////////////////////////////////////////////////
[HOME]
////////////////////////////////////////////////// */

/* header
----------------------------------- */
#policySectionHeader {
	padding-top: 45px;
	margin-bottom: 50px; 
}
body.en #policySectionHeader {
	padding-bottom: 50px;
}
#policySectionHeader h1 {
	margin: 0 auto 65px;
	max-width: 642px;
}
#policySectionHeader h1 img {
	width: 100%;
	height: auto;
}
#blockPolicyWish {
	height: 213px;
	padding-right: 262px;
	background: url(/img/vision/bg/policyMsg_right.png) no-repeat 100% 0;
}
#blockPolicyWishContent {
	height: 213px;
	padding-right: 126px;
	background: url(/img/vision/bg/policyMsg_middle.png) no-repeat 100% 0;
}
#blockPolicyWishContent .innr {
	height: 176px;
	padding-top: 35px;
	background: url(/img/vision/bg/policyMsg.png) 100% 31%;
	border-top: solid 1px black;
	border-left: solid 1px black;
	border-bottom: solid 1px black;
	overflow: hidden;
}
#blockPolicyWishContent p {
	margin: 0 0 30px 25px;
	font-family: "ヒラギノ明朝 Pro W3", "ＭＳ 明朝", 平成明朝, serif;
	font-size: 185%;
	line-height: 1.25;
}

/* blockPolicySentence
----------------------------------- */
.blockPolicySentence .content p {
	font-size: 108%;
	line-height: 2.1;
}
.blockPolicySentence .content .policySvg em {
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 1000px;
	height: 360px;
	margin: 0 auto;
	background: url(/img/vision/txt/msg_philosophy.png) no-repeat 50% 50%;
	background-size: 100% auto;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	text-indent: -99999px;
}
.blockPolicySentence .content #policySvgZh em {
	background: url(/img/vision/txt/msg_philosophy_zh.png) no-repeat 50% 50%;
}
.blockPolicySentence .content #policySvgKr em {
	background: url(/img/vision/txt/msg_philosophy_kr.png) no-repeat 50% 50%;
}

/* blockPolicy1st
----------------------------------- */
#btnOtherCompanyPolicy {
	float: right;
	width: 25%;
	min-width: 230px;
} 
#blockPolicy1st {
	margin-bottom: 55px;
	padding: 30px;
	background: #eee;
	background: rgba(238, 238, 238, 0.8);
}
#blockPolicy1st h3 {
	margin-bottom: 10px;
	line-height: 1.2;
	color: #777;
	font-size: 124%;
	font-weight: bold;
	text-shadow: 1px 1px 1px white;
}
#blockPolicy1st .content {
	float: left;
}
#blockPolicy1st .content p,
#blockPolicy1st .content p a {
	color: #333;
	font-size: 93%;
}
#btnOtherCompanyPolicy {
	float: right;
	width: 25%;
	min-width: 230px;
} 
#blockPolicy1st {
	margin-bottom: 55px;
	padding: 30px;
	background: rgba(238, 238, 238, 0.8);
}
#blockPolicy1st h3 {
	margin-bottom: 10px;
	line-height: 1.2;
	color: #777;
	font-size: 124%;
	font-weight: bold;
	text-shadow: 1px 1px 1px white;
}
#blockPolicy1st .content {
	float: left;
}
#blockPolicy1st .content p,
#blockPolicy1st .content p a {
	color: #333;
	font-size: 93%;
}
#btnOtherCompanyPolicy {
	float: right;
	width: 25%;
	min-width: 230px;
} 
#blockPolicy1st {
	margin-bottom: 55px;
	padding: 30px;
	background: rgba(238, 238, 238, 0.8);
}
#blockPolicy1st h3 {
	margin-bottom: 10px;
	line-height: 1.2;
	color: #777;
	font-size: 124%;
	font-weight: bold;
	text-shadow: 1px 1px 1px white;
}
#blockPolicy1st .content {
	float: left;
}
#blockPolicy1st .content p,
#blockPolicy1st .content p a {
	color: #333;
	font-size: 93%;
}
#btnOtherCompanyPolicy {
	float: right;
	width: 25%;
	min-width: 230px;
} 
#blockPolicy1st {
	margin-bottom: 55px;
	padding: 30px;
	background: rgba(238, 238, 238, 0.8);
}
#blockPolicy1st h3 {
	margin-bottom: 10px;
	line-height: 1.2;
	color: #777;
	font-size: 124%;
	font-weight: bold;
	text-shadow: 1px 1px 1px white;
}
#blockPolicy1st .content {
	float: left;
}
#blockPolicy1st .content p,
#blockPolicy1st .content p a {
	color: #333;
	font-size: 93%;
}
#btnOtherCompanyPolicy {
	float: right;
	width: 25%;
	min-width: 230px;
} 

/* policySectionBg
----------------------------------- */
#policySectionBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 650px;
	border-bottom: solid 1px black;
	overflow: hidden;
}
body.en #policySectionBg {
	height: 450px;
}
#policySectionBg .effectLine {
	position: relative;
	top: -100%;
	left: -100%;
	width: 300%;
	height: 300%;
	/* -webkit-animation: 'policyRotate' 50s ease-in-out 0s infinite; */	
}
#policySectionBg .effectLine svg {
	width: 100%;
	height: 100%;
}
@-webkit-keyframes policyRotate {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
	}
} 

/* Media Queries
----------------------------------- */
@media screen and (max-width: 950px) {
	#blockPolicyWish {
		height: auto;
		padding-right: 0;
		background: none;
	}
	#blockPolicyWishContent {
		height: auto;
		padding-right: 0;
		background: none;
	}
	#blockPolicyWishContent .innr {
		height: auto;
		background: url(/img/vision/bg/policyMsg.png) 100% 31%;
		border: solid 1px black;
	}
	#policySectionBg {
		height: 600px;
	}
	#blockPolicy1st .content {
		float: none;
		margin-bottom: 20px;
	}
	#btnOtherCompanyPolicy {
		float: none;
		margin: 0 auto;
	} 
}
@media screen and (max-width: 600px) {
	.blockPolicySentence .content .policySvg em {
		height: 230px;
	}
	#blockPolicy1st {
		padding: 15px;
	}
}
@media screen and (max-width: 400px) {
	#blockPolicyWishContent .innr {
		padding-top: 15px;
	}
	#blockPolicyWishContent p {
		margin: 0 0 15px 10px;
		font-size: 154%;
		line-height: 1.2;
	}
	.blockPolicySentence .content .policySvg em {
		height: 160px;
	}
}

/* //////////////////////////////////////////////////
[STYLE]
////////////////////////////////////////////////// */

/* --------------------------------------------------
	index 
-------------------------------------------------- */

/* header
----------------------------------- */
#kayacStyleHeader {
	margin-bottom: 30px;
}
#kayacStyleHeader h1 {
	padding: 6px 0;
	border-bottom: solid 1px black;
	font-size: 247%;
	line-height: 1.2;
}
#supKayacStyleArea {
	margin-bottom: 50px;
}
#supKayacStyleArea p {
	margin-bottom: 20px;
	font-size: 124%;
}

/* kayacStyle
----------------------------------- */
#kayacStyle {
	border-top: dotted 1px black;
	margin-bottom: 50px;
}
#kayacStyle li {
	border-bottom: dotted 1px black;
	}
#kayacStyle li a {
	display: block;
	padding: 10px 15px;
	font-weight: bold;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: 0.2s ease-in-out;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
}
#kayacStyle li a:hover,
#kayacStyle li a:active {
	background: #333;
	background: rgba(0, 0, 0, 0.8);
	color: white;
	transition: 0;
	-webkit-transition: 0;
	-moz-transition: 0;
}
#kayacStyle li span br {
	display: none;
}
#kayacStyle li .num {
	display: block;
	float: left;
	margin-right: 20px;
	font-size: 692%;
	font-weight: normal;
	color: #ccc;
	line-height: 1;
}
#kayacStyle li:hover .num {
	color: #777;
}
#kayacStyle li .main {
	display: block;
	float: left;
	padding: 25px 0;
	font-size: 247%;
	line-height: 1.2;
}
#kayacStyle li:hover .main {
	color: white;
}

/* kayacStyleBg
---------------------------------- */
#kayacStyleBg li,
#kayacStyleBg p {
	position: fixed;
}
#kayacStyleBg ul,
#kayacStyleBg p {
	display: none;
}
#kayacStyleBg li svg,
#kayacStyleBg p svg {
	width: 100%;
	height: 100%;
}
#kayacStyleBg .lid {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#kayacStyleBg .who {
	top: 0;
	left: 0;
	width: 120%;
	height: 100%;
	-webkit-animation: 'memberMove' 30s ease-in-out 0s infinite;	
}
@-webkit-keyframes memberMove {
	0% {
		left: 0;
		opacity: 0;
	}
	1% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		left: -120%;
		opacity: 0;
	}
} 
#kayacStyleBg .who,
#kayacStyleBg .who svg {
	min-width: 1100px;
	min-height: 500px;
}
#kayacStyleBg .trip .daibutsu {
	bottom: -10%;
	right: 0;
	width: 50%;
	height: 100%;
	-webkit-animation: 'daibutsuMove' 10s ease-in-out 0s;	
}
@-webkit-keyframes daibutsuMove {
	0% {
		bottom: -20%;
		opacity: 0;
	}
	3% {
		opacity: 1;
	}
	100% {
		bottom: -10%;
	}
} 
#kayacStyleBg .trip .daibutsu,
#kayacStyleBg .trip .daibutsu svg {
	min-width: 500px;
	min-height: 300px;
}
#kayacStyleBg .trip .airplane {
	top: 10%;
	left: 0;
	width: 40%;
	height: 30%;
	-webkit-animation: 'airplaneMove' 10s linear 0s infinite;
}
@-webkit-keyframes airplaneMove {
	0% {
		left: -20%;
		opacity: 0;
	}
	3% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
} 
#kayacStyleBg .trip .airplane,
#kayacStyleBg .trip .airplane svg {
	min-width: 300px;
	min-height: 100px;
}
#kayacStyleBg .dice {
	bottom: 10%;
	right: 0;
	width: 40%;
	height: 80%;
	transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	animation: 'diceRotate' 2s ease-in-out 0s infinite ;	
	-webkit-animation: 'diceRotate' 2s ease-in-out 0s infinite ;
	-moz-animation: 'diceRotate' 2s ease-in-out 0s infinite ;	
}
@-webkit-keyframes diceRotate {
	0% {
		-webkit-transform: rotate(-15deg);
	}
	30% {
		-webkit-transform: rotate(-375deg);
	}
	100% {
		-webkit-transform: rotate(-375deg);
	}
} 
#kayacStyleBg .dice,
#kayacStyleBg .dice svg {
	min-width: 400px;
	min-height: 400px;
}
#kayacStyleBg .manga .superManEffect {
	top: -10%;
	right: 0;
	width: 70%;
	height: 130%;
	-webkit-animation: 'supermanEffect' 2s ease-in-out 0s 1;
}
#kayacStyleBg .manga .superManEffect,
#kayacStyleBg .manga .superManEffect svg {
	min-width: 500px;
	min-height: 910px;
}
#kayacStyleBg .manga .superMan {
	top: 0;
	right: 0;
	width: 70%;
	height: 100%;
	-webkit-animation: 'supermanEffect' 2s ease-in-out 0.1s 1;
}
@-webkit-keyframes supermanEffect {
	0% { -webkit-transform: scale(0.1); }
	5% { -webkit-transform: scale(0.1); }
	10% { -webkit-transform: scale(0.5); }
	30% { -webkit-transform: scale(1.3); }
	35% { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(1); }
}
#kayacStyleBg .manga .superMan,
#kayacStyleBg .manga .superMan svg {
	min-width: 500px;
	min-height: 700px;
}
#kayacStyleBg .quantity .bombEffect {
	top: 0;
	right: -20%;
	width: 120%;
	height: 100%;
}
#kayacStyleBg .quantity .bombEffect,
#kayacStyleBg .quantity .bombEffect svg {
	min-width: 500px;
	min-height: 700px;
}
#kayacStyleBg .quantity .bomb01 {
	top: 5%;
	right: 5%;
	width: 70%;
	height: 100%;
	-webkit-animation: 'zoomInOutEffect' 9s ease-in-out 0s 1;	
}
#kayacStyleBg .quantity .bomb01,
#kayacStyleBg .quantity .bomb01 svg {
	min-width: 200px;
	min-height: 500px;
}
#kayacStyleBg .quantity .bomb02 {
	top: 50%;
	right: -5%;
	width: 55%;
	height: 85%;
	-webkit-animation: 'zoomInOutEffect' 9s ease-in-out 0.3s 1;	
}
#kayacStyleBg .quantity .bomb02,
#kayacStyleBg .quantity .bomb02 svg {
	min-width: 300px;
	min-height: 600px;
}
#kayacStyleBg .quantity .bomb03 {
	top: 40%;
	left: -15%;
	width: 75%;
	height: 100%;
	-webkit-animation: 'zoomInOutEffect' 9s ease-in-out 0.5s 1;
}
@-webkit-keyframes zoomInOutEffect {
	0% { -webkit-transform: scale(0.1); }
	8% { -webkit-transform: scale(1.2); }
	9% { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(1); }
}
#kayacStyleBg .quantity .bomb03,
#kayacStyleBg .quantity .bomb03 svg {
	min-width: 400px;
	min-height: 700px;
}
#kayacStyleBg .brainstorm {
	position: fixed;
	z-index: 1;
	bottom: 5%;
	right: 10%;
	width: 700px;
	height: 800px;
}
#kayacStyleBg .brainstorm .lightEffect {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 83%;
	-webkit-animation: 'lightEffect' 3s ease-in-out 0s infinite;
}
#kayacStyleBg .brainstorm .light {
	position: absolute;
	bottom: 0;
	left: 14%;
	width: 55%;
	height: 83%;
}
@-webkit-keyframes lightEffect {
	0% { -webkit-transform: scale(1); }
	5% { -webkit-transform: scale(1); }
	20% { -webkit-transform: scale(1); }
	30% { -webkit-transform: scale(1.3); }
	40% { -webkit-transform: scale(1); }
	100% { -webkit-transform: scale(1); }
}
#kayacStyleBg .thanks .flower,
#kayacStyleBg .thanks .flowerEffect01,
#kayacStyleBg .thanks .flowerEffect02 {
	position: fixed;
	bottom: 10%;
	left: 0;
	width: 100%;
	height: 80%;
}
#kayacStyleBg .thanks .flower {
	-webkit-animation: 'flowerMove' 10s ease-in-out 0s;	
}
@-webkit-keyframes flowerMove {
	0% {
		left: 10%;
		opacity: 0;
	}
	2% {
		opacity: 1;
	}
	100% {
		left: 0;
	}
}
#kayacStyleBg .thanks .flowerEffect01 {
	-webkit-animation: 'flowerEffectMove' 2s ease-in-out 0s infinite alternate;
}
#kayacStyleBg .thanks .flowerEffect02 {
	-webkit-animation: 'flowerEffectMove' 3s ease-in-out 0s infinite alternate;
}
@-webkit-keyframes flowerEffectMove {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* Media Queries
----------------------------------- */
@media screen and (max-width: 680px) {
	#kayacStyle li a {
		position: relative;
		overflow: hidden;
	}
	#kayacStyle li span br {
		display: inline;
	}
	#kayacStyle li .main {
		position: relative;
		z-index: 5;
	}
	#kayacStyle li .num {
		position: absolute;
		bottom: -10px;
		right: 0;
		padding: 0;
		color: #eee;
		font-size: 800%;
		font-weight: bold;
	}
	#kayacStyleBg .brainstorm {
		width: 400px;
		height: 430px;
	}
}
@media screen and (max-width: 480px) {
	#kayacStyle li .main {
		font-size: 170%;
	}
	#kayacStyle li a:hover,
	#kayacStyle li a:active {
		background: transparent;
	}
	#kayacStyle li:hover .num {
		color: #ccc;
	}
	#kayacStyle li:hover .main {
		color: #333;
	}
}

/* --------------------------------------------------
	detail 
-------------------------------------------------- */

/* header
----------------------------------- */
#styleHeader {
	margin-bottom: 40px;
}
#styleHeader h1 br {
	display: none;
}

/* content
----------------------------------- */
#styleSectionContent {
	position: relative;
}
#blockStyleMain {
	margin-right: 270px;
}

/* blockStyle
----------------------------------- */
.blockStyle {
	margin-bottom: 40px;
}
.blockStyle h2 {
	margin-bottom: 30px;
}
.blockStyle h3 {
	margin-bottom: 20px;
}
.blockStyle h2 br {
	display: none;
}
.blockStyle .content {
	margin-left: 10px;
}
.blockStyle p {
	margin-bottom: 20px;
	font-size: 108%;
	line-height: 1.7;
}
.blockStyle ul,
.blockStyle ol {
	margin: 0 0 20px 20px;
}
.blockStyle li {
	line-height: 1.7;
}
.blockStyle strong {
	font-size: 108%;
	font-weight: bold;
}

/* blockDice
----------------------------------- */
#blockDice .fig img {
	width: 100%;
	max-width: 482px;
	height: auto;
} 

/* btnNextStyle
----------------------------------- */
#btnNextStyle {
	float: right;
	clear: both;
}

/* styleAside
----------------------------------- */ 
#styleAside {
	position: absolute;
	top: 0;
	right: 0;
	width: 230px;
}
#styleAside h2 {
	margin-bottom: 20px;
	font-size: 124%;
	color: #666;
	line-height: 1.3;
	text-shadow: 1px 1px 1px white;
	text-align: left;
}
#styleAside h2 .second {
	display: none;
}

/* styleAsideSection
----------------------------------- */ 
.styleAsideSection {
	margin-bottom: 30px;
	padding: 20px;
	background: #eee;
	background: rgba(238, 238, 238, 0.8); 
}
.styleAsideSection .viewMore {
	float: right;
	color: #333;
	font-size: 85%;
	font-weight: normal;
}
.styleAsideSection .outline {
	margin-bottom: 20px;
	color: #333;
	font-size: 93%;
	text-align: left;
}

/* blockImgExp
----------------------------------- */ 
.blockImgExp {
	margin-bottom: 35px;
}
.blockImgExp h3 {
	margin-bottom: 3px;
	font-size: 93%;
	color: #333;
	line-height: 1.2;
}
.blockImgExp .image {
	margin-bottom: 10px;
	text-align: center;
}
.blockImgExp .sentence {
	font-size: 85%;
}

/* blockImgBook
----------------------------------- */ 
.blockImgBook .image {
	margin-bottom: 10px;
	background: url(/img/vision/bg/styleBook.gif) no-repeat 50% 50%;
	text-align: center;
}
.blockImgBook h3 {
	margin-bottom: 30px;
	font-size: 93%;
	text-align: center;
	color: #333;
}

/* blockCapture
----------------------------------- */ 
.blockCapture {
	margin-bottom: 15px;
} 

/* diceRankingTable
----------------------------------- */ 
#diceRankingTable {
}
#diceRankingTable td,
#diceRankingTable th {
	padding-bottom: 30px;
}
#diceRankingTable th {
	width: 65px;
}
#diceRankingTable .winnerCrown {
	position: relative;
	top: -77px;
	left: -12px;
}
#diceRankingTable td {
	padding: 5px 0 5px 10px;
	color: #333;
}
#diceRankingTable td .name {
	margin-bottom: 5px;
	text-align: center;
}
#diceRankingTable td .rank {
	margin-right: 10px;
}
#diceRankingTable td .avg {
	font-size: 170%;
	text-align: center;
}

/* smileSection
---------------------------------- */ 
body#dice .styleAsideSection h2 img,
body#thanks .styleAsideSection h2 img {
	margin-left: 5px;
	vertical-align: middle; 
}
.smileSection {
	position: relative;
	margin: 30px 0 25px;
	padding: 30px 20px 20px;
	background: white;
}
.smileSection h3 {
	margin-bottom: 20px;
	line-height: 1.2;
}
.smileSection .sentence {
	margin-bottom: 15px;
}
.smileSection .sentence p {
	font-size: 93%;
}
.smileSection figure .photo {
	position: absolute;
	top: -35px;
	right: 0;
	width: 80px;
	height: 60px;
	background: url(/img/team/arrow.png) no-repeat 60% 0%;
}
.smileSection figure .photo li {
	position: absolute;
	box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.smileSection figure .photo .from {
	top: 12px;
	left: 0;
	transform: rotate(-12deg);
	-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
}
.smileSection figure .photo .for {
	bottom: 0;
	right: 0;
	transform: rotate(20deg);
	-webkit-transform: rotate(15deg);
	-moz-transform: rotate(20deg);
}
.smileSection .supInfo {
	padding-right: 4%;
	font-size: 93%;
	text-align: right;
}
.smileSection .supInfo a {
	display: inline-block;
}

/* thanksSection
---------------------------------- */ 
.thanksSection {
	margin-bottom: 30px;
	padding: 20px;
	background: white;
}
.thanksSection:last-of-type {
	margin-bottom: 15px;
}
.thanksSection h3 {
	margin-bottom: 20px;
	color: #333;
	text-align: left;
}
.thanksSection p {
	color: #333;
}
.thanksSection .sentence {
	margin-bottom: 20px;
	font-size: 93%;
	text-align: left;
}
.thanksSection .from {
	float: right;
	text-align: right;
	font-size: 93%;
}
.thanksSection .from time {
	display: block;
}

/* unitPicture
----------------------------------- */ 
.unitPicture {
	width: 187px;
	margin: 0 0 15px;
}
.unitPicture .image {
	margin-bottom: 5px;
}
.unitPicture .image img {
	width: 100%;
	height: auto;
}
.unitPicture figcaption {
	font-size: 85%;
	text-align: center;
}
.unitPicture figcaption a {
	text-decoration: underline;
}
.unitPicture figcaption a:hover,
.unitPicture figcaption a:active {
	text-decoration: none;
}

/* other
----------------------------------- */ 
#styleAside .attention {
	margin: 25px 0 20px;
	color: #333;
	font-size: 85%;
}
#styleAside .externalLink li a {
	font-size: 85%;
	text-decoration: underline;
}
#styleAside .externalLink li a:hover,
#styleAside .externalLink li a:active {
	text-decoration: none;
}


/* Media Queries
----------------------------------- */ 
@media screen and (max-width: 1040px) {
	#blockStyleMain {
		margin: 0 0 50px !important;
		height: auto !important;
	}
	#styleAside {
		position: static;
		width: auto;
		height: auto !important;
	}
	body#brainstorm .styleAsideSection,
	body#manga .styleAsideSection,
	body#dice .styleAsideSection,
	body#quantity .styleAsideSection,
	body#thanks .styleAsideSection {
		display: inline-block;
		margin-right: 30px;
		width: 190px;
		vertical-align: top;
	}
	#styleAside .body {
		text-align: center;
	}
	.blockImgExp {
		display: inline-block;
		width: 22%;
		margin: 0 2% 20px 0;
	}
	.blockImgExp h3 {
		text-align: left;
	}
	.blockImgExp .image img {
		width: 100%;
		height: auto;
	} 
	.unitPicture {
		display: inline-block;
		width: 22%;
		max-width: 186px;
		margin: 0 2% 20px 0;
	}
	#styleAside h2 br {
		display: none;
	}
	#styleAside .attention {
		clear: both;
	}
}
@media screen and (max-width: 800px) {
	.blockImgExp {
		width: 40%;
		margin: 0 5% 20px 0;
		max-width: 186px;
	}
	.unitPicture {
		width: 40%;
		margin: 0 5% 20px 0;
		max-width: 186px;
	}
	#styleAside h2 .second {
		display: inline;
	}
}
@media screen and (max-width: 500px) {
	#styleHeader h1 br {
		display: inline;
	}
	.blockStyle h2 br {
		display: inline;
	}
	.styleAsideSection {
		padding: 10px;
		background: #eee;
	}
	body#dice .styleAsideSection,
	body#quantity .styleAsideSection,
	body#thanks .styleAsideSection {
		margin-right: 0;
		padding: 20px;
	}
	.blockImgExp {
		width: 47%;
		margin: 0 2% 20px 0;
	}
	.blockImgExp .viewMore {
		font-size: 77%;
	}
	.unitPicture {
		width: 45%;
		margin: 0 2% 20px 0;
	}
	#btnMoreExp {
		width: auto;
		min-width: 0;
		margin-bottom: 40px;
	}
	#btnMoreExp a .main,
	#btnMoreExp a .hover {
		font-size: 100%;
	}
}

/* //////////////////////////////////////////////////
[MESSAGE]
////////////////////////////////////////////////// */

/* header
----------------------------------- */
#msgHeader {
	position: relative;
	margin-bottom: 40px;
}
#msgHeader h1 {
	padding: 6px 0;
	border-bottom: solid 1px black;
	font-size: 247%;
	line-height: 1.2;
}
#msgHeader h1 br {
	display: none;
}
#msgHeader h1 .first {
	display: inline;
}
#msgHeader aside {
	position: absolute;
	top: -25px;
	right: 40px;
	width: 230px;
	height: 125px;
}
#msgHeader .balloon,
#msgHeader .yana {
	position: absolute;
}
#msgHeader .balloon {
	top: 0;
	left: 0;
	-webkit-animation: 'balloonAnm' 2.5s ease-in-out 0s infinite alternate, 'balloonAnmFeed' 2.3s ease-in-out 0s;
}
@-webkit-keyframes balloonAnm {
	0% { top: 0; }
	100% { top: -10px; }
}
@-webkit-keyframes balloonAnmFeed {
	0% { opacity: 0; }
	99% { opacity: 0; }
	100% { opacity: 1; }
}
#msgHeader .yana {
	bottom: 0;
	right: 0;
	-webkit-animation: 'yanaJumpAnm' 2.2s ease-in-out 0s;
}	
@-webkit-keyframes yanaJumpAnm {
	0% { opacity:0; }
	70% { opacity:0; bottom: 0; }
	91% { opacity:1; bottom: 30px; }
	100% { opacity:1; bottom: 0; }
} 

/* blockMsg
---------------------------------- */
.blockMsg {
	margin-bottom: 45px;
}
.blockMsg h2 {
	margin-bottom: 25px;
}
.blockMsg h3 {
	margin-bottom: 15px;
}
.blockMsg p {
	margin-bottom: 25px;
	font-size: 108%;
	line-height: 2.1;
}
.blockMsg ul {
	margin: 0 35px 25px;
}
.blockMsg li {
	margin-bottom: 15px;
	font-size: 108%;
}
.blockMsg blockquote {
	position: relative;
	max-width: 790px;
	padding: 10px 30px;
	margin: 0 auto 30px;
	color: #666;
}
.blockMsg blockquote:before,
.blockMsg blockquote:after {
	position: absolute;
	font-size: 500%;
	line-height: 1;
}
.blockMsg blockquote:before {
	content: '“';
	top: 0;
	left: 0;
}
.blockMsg blockquote:after {
	content: '”';
	bottom: -30px;
	right: 0;
}
.blockMsg blockquote .sentence {
	margin-bottom: 10px;
} 
.blockMsg blockquote .from {
	text-align: right;
	margin: 0;
} 

/* moreLiks
---------------------------------- */
.blockMsg .moreLinks li {
	margin-bottom: 15px; 
	padding-left: 15px;
	background: url(/img/common/ico/utility_sprite.png) no-repeat 0 -495px;
}
.blockMsg .moreLinks li span {
	display: block;
	line-height: 1.6;
}
.blockMsg .moreLinks li .linktoExternal {
	font-size: 94%;
}
.blockMsg .moreLinks li span a {
	text-decoration: underline;
}
.blockMsg .moreLinks li span a:hover,
.blockMsg .moreLinks li span a:active {
	text-decoration: none;
}

/* goPageTop
----------------------------------- */
body.message #goPageTop {
	position: absolute;
	top: -54px;
	right: 0;
}
body.message #goPageTop:hover {
	top: -60px;
}
body.message #goPageTop a {
	padding: 10px 0 60px 0;
	background: url(/img/common/img_yanaMan.png) no-repeat 50% 100%;
}
body.message #goPageTop a:hover,
body.message #goPageTop a:active {
	text-decoration: none;
	background: url(/img/common/img_yanaMan.png) no-repeat 50% 100%;
}

/* Media Queries
----------------------------------- */
@media screen and (max-width: 950px) {
	#msgHeader h1 br {
		display: inline;
	}
	#msgHeader aside {
		right: 0;
	}
}
@media screen and (max-width: 600px) {
	#msgHeader {
		padding-top: 150px;
	}
	#msgHeader h1.haveSub {
		text-align: center;
	}
	.blockMsg ul {
		margin: 0 0 25px;
	}
	#msgHeader aside {
		top: 0;
		right: 50%;
		margin-right: -115px;
	} 
}
@media screen and (max-width: 400px) {
	#msgHeader h1 {
		font-size: 200%;
	}
} 

/* //////////////////////////////////////////////////
[PHILOSOPHY]
////////////////////////////////////////////////// */

/* content 
----------------------------------- */
#philosophyContent {
	position: relative;
}
#philosophyContentMain {
	margin-right: 270px;
	padding-bottom: 350px;
}


/* philosophyContentAside
----------------------------------- */ 
#philosophyContentAside {
	position: absolute;
	top: 0;
	right: 0;
	width: 230px;
}
#philosophyContentAside h2 {
	margin-bottom: 20px;
	font-size: 124%;
	color: #666;
	line-height: 1.3;
	text-shadow: 1px 1px 1px white;
	text-align: left;
}

/* philosophyAsideSection
----------------------------------- */ 
.philosophyAsideSection {
	margin-bottom: 30px;
	padding: 20px;
	background: #eee;
	background: rgba(238, 238, 238, 0.8); 
}

/* letterNumSection
---------------------------------- */ 
.letterNumSection {
	margin-bottom: 30px;
}
.letterNumSection:last-of-type {
	margin-bottom: 0;
}
.letterNumSection h3 {
	margin-bottom: 5px;
	color: #333;
	font-size: 108%;
	text-align: left;
}
.letterNumSection .content {
	padding: 20px;
	background: white;
}
.letterNumSection p {
	color: #333;
}
.letterNumSection .ttl {
	margin-bottom: 20px;
	font-weight: bold;
	text-align: left;
}
.letterNumSection .ttl em {
	font-size: 124%;
}
.letterNumSection .sentence {
	margin-bottom: 20px;
	font-size: 93%;
	text-align: left;
}
.letterNumSection .link {
	float: right;
}

/* philosophyKeywordsRanking
---------------------------------- */ 
#philosophyKeywordsRanking li {
	margin-bottom: 15px;
	font-size: 110%;
	text-align: left;
}
#philosophyKeywordsRanking li span {
	margin-right: 20px;
	font-weight: bold;
}
#philosophyKeywordsRanking li .top3 {
	background: #333;
}

/* Media Queries
----------------------------------- */ 
@media screen and (max-width: 1040px) {
	#philosophyContentMain {
		margin: 0 0 50px !important;
		height: auto !important;
	}
	#philosophyContentAside {
		position: static;
		width: auto;
		height: auto !important;
	}
	#philosophyContentAside .body {
		text-align: center;
	}
	#philosophyContentAside h2 br {
		display: none;
	}
	.philosophyAsideSection {
		display: inline-block;
		margin-right: 30px;
		width: 190px;
		vertical-align: top;
	}
}
@media screen and (max-width: 480px) {
	philosophyAsideSection {
		padding: 20px;
		margin-right: 0;
		background: #eee;
	}
}


/* //////////////////////////////////////////////////
[STRATEGY]
////////////////////////////////////////////////// */

/* header
----------------------------------- */
.strategyHeader {
	margin-bottom: 40px;
}

/* blockStrategy
----------------------------------- */
.blockStrategy {
	margin-bottom: 60px;
}
.blockStrategy p {
	margin-bottom: 40px;
	font-size: 108%;
	line-height: 2.1;
}

/* managementSystem
----------------------------------- */
#managementSystem {
}

/* managementSystemFig
----------------------------------- */
#managementSystem .managementSystemFig {
	float: right;
	width: 290px;
}
#managementSystem .managementSystemFig table {
	margin-bottom: 10px;
}
#managementSystem .managementSystemFig table td,
#managementSystem .managementSystemFig table th {
	width: 25%;
	height: 30px;
	padding: 5px;
	font-size: 93%;
	text-align: center;
	line-height: 1.1;
	vertical-align: middle;
}
#managementSystem .managementSystemFig .arrow {
	width: 168px;
	height: 36px;
	margin: 0 auto 10px;
	padding-top: 15px;
	background: url(/img/vision/bg/arrow.png) no-repeat 50% 50%;
	font-size: 93%;
	line-height: 1.2;
	text-align: center;
}
#managementSystem .managementSystemFig .exp {
	display: table-cell;
	width: 220px;
	height: 60px;
	margin: 0 auto 10px;
	padding: 30px 35px;
	background: url(/img/vision/bg/cloud.png) no-repeat 50% 50%;
}
#managementSystem .managementSystemFig #expZh {
	padding: 40px 35px;
}
#managementSystem .managementSystemFig .exp p {
	margin: 0;
	font-size: 93%;
	line-height: 1.2;
}

/* managementSystemCaption
----------------------------------- */
#managementSystem .managementSystemCaption {
	margin-right: 320px;
}
#managementSystem .managementSystemCaption .blockManagement {
	margin-bottom: 30px;
}
#managementSystem .managementSystemCaption .blockManagement h4 {
	background: transparent;
} 
#managementSystem .managementSystemCaption .blockManagement h4 span {
	padding: 3px;
	color: white;
	font-size: 124%;
	font-weight: normal;
	background: black;	
}

/* strategyDistributionFig
----------------------------------- */
#strategyDistributionFig {
	position: relative;
	max-width: 900px;
	height: auto;
	margin: 0 auto 40px;
	padding: 0;
}
#strategyDistributionFig .strategyType {
	margin: 0;
}
#strategyDistributionFig .strategyType li {
	margin-bottom: 10px;
	padding: 30px 20px;
	border: solid 1px black;
	font-size: 139%;
	font-weight: bold;
}
#strategyDistributionFig .strategyType li br {
	display: none;
}
#strategyDistributionFig .strategyType li.contents {
	background: #eee;
	background-image: -webkit-gradient(linear, left top, right top, from(#eee), color-stop(50%, #eee), color-stop(50%, #999), to(#999));  
	-webkit-background-size: 2px 2px;
		
}
#strategyDistributionFig .strategyType li.social {
	background: #bbb; 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(50%, #eee), color-stop(50%, #ccc), to(#ccc));  
	-webkit-background-size: 4px;
}
#strategyDistributionFig .strategyType li.infrastructure {
	background: #ddd; 
	background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(255,255,255, 0.1)), color-stop(0.5, rgba(255,255,255, 0.1)), color-stop(0.5, rgba( 0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))),
-webkit-gradient( linear, left top, right top, from(white), color-stop(0.5, white), color-stop(0.5, #CCC), to(#CCC));

	-webkit-background-size: 3px;
	
}
#strategyDistributionFig .strategyType li.communication {
	margin-bottom: 0;
	background: #ccc;
	background-image: -webkit-gradient(linear, left top, right bottom, from(#eee), color-stop(25%, #eee), color-stop(25%, #999), color-stop(50%, #999), color-stop(50%, #eee), color-stop(75%, #eee), color-stop(75%, #999), to(#999));  
	-webkit-background-size: 5px;
}

#strategyDistributionFig .strategyContent {
	margin: 0;
}
#strategyDistributionFig .strategyContent li {
	position: absolute;
	font-size: 108%;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
}
#strategyDistributionFig .strategyContent li.social,
#strategyDistributionFig .strategyContent li.houseco,
#strategyDistributionFig .strategyContent li.artMeter,
#strategyDistributionFig .strategyContent li.WonderflJsdoit,
#strategyDistributionFig .strategyContent li.koebu {
	width: 145px;
	height: 17px;
	padding: 35px 0;
	background: url(/img/vision/bg/strategyBalloon02.png) no-repeat 50% 50%;
}

#strategyDistributionFig .strategyContent li.social { top: 1%; left: 30%; }
#strategyDistributionFig .strategyContent li.houseco { top: 25%; left: 30%; }
#strategyDistributionFig .strategyContent li.artMeter { top: 25%; left: 50%; }
#strategyDistributionFig .strategyContent li.WonderflJsdoit { top: 25%; left: 70%; }
#strategyDistributionFig .strategyContent li.koebu { top: 38%; left: 17%; }

#strategyDistributionFig .strategyContent li.client {
	top: 0;
	right: 0;
	width: 117px;
	height: 17px;
	padding: 132px 0;
	background: url(/img/vision/bg/strategyBalloon03.png) no-repeat 50% 50%;
}
#strategyDistributionFig .strategyContent li.facebook,
#strategyDistributionFig .strategyContent li.mixi,
#strategyDistributionFig .strategyContent li.google,
#strategyDistributionFig .strategyContent li.docomo,
#strategyDistributionFig .strategyContent li.au,
#strategyDistributionFig .strategyContent li.softbank {
	width: 109px;
	height: 17px;
	padding: 32px 0;
	background: url(/img/vision/bg/strategyBalloon01.png) no-repeat 50% 50%;
} 
#strategyDistributionFig .strategyContent li.facebook { top: 50%; left: 52%; }
#strategyDistributionFig .strategyContent li.mixi { top: 50%; left: 72%; }
#strategyDistributionFig .strategyContent li.google { top: 62%; left: 19%; }
#strategyDistributionFig .strategyContent li.docomo { top: 75%; left: 32%; }
#strategyDistributionFig .strategyContent li.au { top: 75%; left: 52%; }
#strategyDistributionFig .strategyContent li.softbank { top: 75%; left: 72%; }

.policySvg em {
	font-size: 240%;
	line-height: 1.2;
}


/* Media Queries
----------------------------------- */ 
@media screen and (max-width: 680px) {
	#managementSystem .managementSystemFig {
		float: none;
		margin: 0 auto 40px;

	}
	#managementSystem .managementSystemCaption {
		margin-right: 0;
	} 
	#strategyDistributionFig .strategyType li {
		height: 45px;
		margin-bottom: 5px;
		padding: 7px 5px 0;
		border: solid 1px black;
		font-size: 100%;
		font-weight: bold;
		line-height: 1.1;
	}
	#strategyDistributionFig .strategyType .communication {
		padding: 33px 5px 0;
		height: 19px;
	}
	#strategyDistributionFig .strategyType li br {
		display: inline;
	} 
	#strategyDistributionFig .strategyContent li {
		font-size: 85%;
		line-height: 1.2;
	}

	#strategyDistributionFig .strategyContent li.social,
	#strategyDistributionFig .strategyContent li.houseco,
	#strategyDistributionFig .strategyContent li.artMeter,
	#strategyDistributionFig .strategyContent li.WonderflJsdoit,
	#strategyDistributionFig .strategyContent li.koebu {
		width: 110px;
		height: 13px;
		padding: 28px 0;
		background-size: 100% auto;
	}
	#strategyDistributionFig .strategyContent li.social { top: 1%; left: 30%; }
	#strategyDistributionFig .strategyContent li.houseco { top: 25%; left: 23%; }
	#strategyDistributionFig .strategyContent li.artMeter { top: 21%; left: 43%; }
	#strategyDistributionFig .strategyContent li.WonderflJsdoit { top: 25%; left: 63%; }
	#strategyDistributionFig .strategyContent li.koebu { top: 38%; left: 13%; }
	
	#strategyDistributionFig .strategyContent li.client {
		top: 0;
		right: -2%;
		width: 65px;
		height: 13px;
		padding: 74px 0;
		background-size: 100% auto;
	}
	#strategyDistributionFig .strategyContent li.facebook,
	#strategyDistributionFig .strategyContent li.mixi,
	#strategyDistributionFig .strategyContent li.google,
	#strategyDistributionFig .strategyContent li.docomo,
	#strategyDistributionFig .strategyContent li.au,
	#strategyDistributionFig .strategyContent li.softbank {
		width: 75px;
		height: 13px;
		padding: 22px 0;
		background-size: 100% auto;
	} 
	#strategyDistributionFig .strategyContent li.facebook { top: 50%; left: 48%; }
	#strategyDistributionFig .strategyContent li.mixi { top: 50%; left: 67%; }
	#strategyDistributionFig .strategyContent li.google { top: 62%; left: 14%; }
	#strategyDistributionFig .strategyContent li.docomo { top: 75%; left: 32%; }
	#strategyDistributionFig .strategyContent li.au { top: 75%; left: 52%; }
	#strategyDistributionFig .strategyContent li.softbank { top: 75%; left: 72%; }
}