@charset "UTF-8";
@import url("default.pc.css");

/*--------------------
　コンテンツ
--------------------*/

[id^="content-"] {
	margin-bottom: 30px;
}

[id^="content-"] p {
	padding-left: 0.5em;
}


/* みっくすQって？ */

#content-mixq02
	ul {
		background: #ffd;
		border: 1px #aaa solid;
		margin-bottom: 20px;
}

#content-mixq02
	ul li {
		position: relative;
		padding: 10px;
		overflow: hidden;
}


/* Q帯の全体 */
#content-mixq02
	ul li p:first-child {
		position: relative;
		width: 100%;
		height: 1.8em;
		overflow: hidden;
}


/* Q */
#content-mixq02
	ul li p:first-child strong {
		position: relative;
		width: 20px;
		font-size: 1.3em;
		left: 0;
		opacity: 0;
}

.animeFirstQ {
	animation: animeFadeIn 1.5s forwards;
}



/* Qに続く文字 */
#content-mixq02
	ul li p:first-child span:nth-of-type(2) {
		position: absolute;
		width: 100px;
		font-size: 1.2em;
		top: 0;
		left: 1.4em;
		opacity: 0;
}

.animeSecondStr{
	animation: animeSecondStr 1.0s 0.5s forwards;
}

@keyframes animeSecondStr {
	from {
		opacity: 0;
		transform: translateX(-10px);
		-webkit-transform: translateX(-10px);
		-moz-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
	}
	
	to {
		opacity: 1.0;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
	}
	
}


#content-mixq02
	ul li p:first-child span:last-child {
		position: absolute;
		width: 50px;
		text-align: center;
		left: 200px;
		top: 28px;
		font-size: 1.1em;
		font-weight: bold;
		color: #f33;
		
		text-shadow: 1px 1px 0 #fcc;
}

.animeThirdStr {
	animation: animeThirdStr 1.0s 1.0s forwards;
}

@keyframes animeThirdStr {
	from {
		opacity: 0;
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
	}
	to{
		opacity: 1;
		transform: translateY(-28px);
		-webkit-transform: translateY(-28px);
		-moz-transform: translateY(-28px);
		-ms-transform: translateY(-28px);
	}
	
}

/* 背景*/
#content-mixq02
	ul li p:first-child span:first-child {
		position: absolute;
		background: #bfd;
		background: linear-gradient( left, #bfd 0, #dfe 100% );
		background: -webkit-linear-gradient( left, #aec 0, #dfe 100% );
		width: 0;
		height: 0;
		left: -10px;
		box-shadow: 1px 1px 0 #3a6;
}

.animeBgcolor {
	animation: animeBgcolor 1.0s 1.0s forwards;
}

@keyframes animeBgcolor {
	from { opacity: 0; width: 0; height: 1.6em; }
	to { opacity: 1; width: 260px; height: 1.6em; }
}

/* 解説文字 */
#content-mixq02
	ul li p:last-child {
		text-indent: 0.5em;
}



/*--------------------------------------
	事業情報
--------------------------------------*/
#content-mixq03 {
}

#content-mixq03 table {
	width: 100%;
	background: #aaa;
}

#content-mixq03 table td {
	height: 70px;
	background: #fff;
}

#content-mixq03 table td {
	position: relative;
	padding: 10px;
	line-height: 1.4;
}

#content-mixq03 table td:first-child {
	font-size: 1rem;
	background: #ccc;
}


#content-mixq03 table td p {
	padding: 0;
}

#content-mixq03 .last {
	position: absolute;
	font-size: .8rem;
	color: #f00;
	bottom: 2px;
}

#content-mixq03 table td .lifs {
	line-height: 1.6;
	font-size: .8rem;
}


[id^="content-"] .btnStyle01 {
	margin-top: 50px;
}