@charset "UTF-8";

/*--- header Style ---*/
#header>nav>div>:first-child>div {
	width:156.96px;
}
#header>nav>div>:nth-child(2)>ul>li{
	width: 10%;
}
#header>nav>div>:nth-child(3) {
	width:134.96px;
	left: 114px;
}

/*--- story Style ---*/
#story>:first-child

#story>:first-child>div>ul>div>li{}
#story li.dividingLine>p {
	font-style: italic;
	font-size: 1.25rem;
}

/*--- character ---*/
#character>div>:first-child{background-color: }
/*#character>div>div>:nth-child(2)>ul>li{text-align: center;margin:10px;}
*/
#character>div>div>:nth-child(2)>ul>li {
	line-height: 0rem;
	padding:5px;
}
#character li.gridItem>div>:nth-child(1) {
	font:italic bold 1.25rem DFKai-sb;
}
#character li.gridItem>div>:nth-child(2) {
	font: italic 1rem DFKai-sb;
}
#character>div>div>:nth-child(2)>ul>li>div img {
	width: 270px;
}

/*--- Vedio Style ---*/
#vedio {
	background-color: #f3ffe6;
}
#vedio>nav>:nth-child(2)>ul>li p {
	padding: 0 2rem;
}
#vedio>nav>:nth-child(2)>ul>li img {
	border-radius: 1rem;
	height: 210px;
}

/*--- Productteam Style ---*/
#productteam>section>:nth-child(2)>section>.col3{
	width:100%;
	position:relative;
}
#productteam>section>:nth-child(2)>section>.col3>:first-child{
	overflow:hidden;
}
#productteam>section>:nth-child(2)>section>.col3>:first-child::before{
	content:" ";
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 1;
	position:absolute;
	opacity:0;
	transition:all 1s 0.2s;
	background-image:linear-gradient(to top, rgba(50,50,50,0.7) 20%, rgba(50,50,50,0.6) 30%,
		rgba(50,50,50,0) 100%);
	border-radius: 1rem;}
#productteam>section>:nth-child(2)>section>.col3:hover>:first-child::before{
	opacity: 0.8;
}
#productteam>section>:nth-child(2)>section>.col3>nav{
	border-radius: 1rem;
}
#productteam>section>:nth-child(2)>section>.col3>nav>img{
	transition:all 1s 0.2s;
	transform:scale(1);
}
#productteam>section>:nth-child(2)>section>.col3:hover>nav>img{
	transform:scale(1.2);
}
#productteam>section>:nth-child(2)>section>.col3 p{
	top:10rem;
	left: 2rem;
	z-index: 2;
	position:absolute;
	visibility: hidden;
	opacity: 0;
	transition: all 1s 0.2s;
	font-size: 1.25rem;
	font-style: italic;
	font-weight: bold;
	color: white;
	line-height: 2rem;
}
#productteam>section>:nth-child(2)>section>.col3:hover p{
	visibility: visible;
	opacity: 1;
	top:9rem;
	color: white;
}

/*--- ifYouLike Style ---*/
#ifYouLike>div>:nth-child(1)>div>p{
	font-size: 1.25rem;
}
#ifYouLike>div>:nth-child(2)>div{
	background-color:rgb(42, 126, 123,0.5);
	color: white;
	border-radius: 0.75rem;
	padding:1rem;
}
#ifYouLike>div>:nth-child(2)>div{
	transition: all 0.5s 0.2s;
	box-shadow: 0 0 0 #888888;
}
#ifYouLike>div>:nth-child(2)>div:hover{
	box-shadow: 0 0 0.75rem #888888;
}
#ifYouLike>div>:nth-child(2)>div>ul:nth-child(1){
	font-size: 2rem;
	text-align: center;
}
#ifYouLike>div>:nth-child(2)>div>ul button{
	font-size: 1.25rem;
}
#ifYouLike>div>:nth-child(3) {
	padding: 1rem 1.5rem
	;font-size: 1.5rem;
	color: white;
}
#ifYouLike>div>:nth-child(3)>:nth-child(1){
	font-size: 2rem;
}

#advice+div>div{
	top:0;
	left:100%;
	width:100%;
	background-color: orange;
	font-size: 1.5rem;
}
#advice+div>div>form>input[type=text]{
	display:inline-block;
	width:45%;
	line-height:2rem;
	outline:none;
}
#advice+div{
	overflow: hidden;
}
#advice+div{
	animation: adviceBarIn 0.5 0.2 forwards;
}
#advice:checked+div>div{
	animation:adviceBarOut 0.5 forwards;
}

/*--- footer Style ---*/




/*--- Animate ---*/
@keyframes adviceBarIn{
 from{left: -100%;opacity: 0;}
 to{left: 0;opacity: 1}
}

@keyframes adviceBarOut{
 from{left: 0;opacity: 1;}
 to{left: -100%;opacity: 0;}
}

/*--- Phone Landscape Style ---*/
@media screen and (min-width: 576px;) {
	body {background-color: brown;}
	
}

/*--- Pad Portrait Style ---*/
@media screen and (min-width: 768px;) {
	body {background-color: pink;}

}

/*--- Pad Landscape Style ---*/
@media screen and (min-width: 992px;) {
	body {background-color: lightblue;}

}

/*--- PC Style ---*/
@media screen and (min-width: 1281px;) {
	body {background-color: yellow;}

}