@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: "fontn";
	src: url("../../img/font_n.woff") format('woff');
}
@font-face {
	font-family: "fontb";
	src: url("../../img/font_b.woff") format('woff');
}
#stage #content {
	width: 100%;
	background: #b8ce69 url(../../kids/img/bg_loop.jpg) 50% top;
	overflow: hidden;
}
#stage #content .headbg {
	position: absolute;
	width: 100%;
	height: 350px;
	background: #b8ce69 url(../../milkhistory/img/bg_pc.jpg) no-repeat 48.2% top;
	overflow: hidden;
}
#content .inner {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}
#content .border{
	position:relative;
	display: inline-block;
}
#content .border b {
	position: relative;
	height: 4.7vw;
	letter-spacing: 0;
	/* left: 0; */
	z-index: 1;
	color: #00a03c;
	transition: .24s;
	display: inline-block;
	font-weight: normal;
}
#content h3 .border b {
	position: relative;
	font-weight: bold;
}
#content .obj {
	position: absolute;
	top: 0;
	left: 0;
}
#content .obj.tractor {
	position: absolute;
	top: auto;
	left: auto;
	right: 0;
	bottom: 0;
	margin: 0 -54px 120px 0;
}
#ctsVideo ul {
	margin-left: 1.3%;
}
#content .frame {
	display: inline-block;
	position: relative;
	margin: 0 7.7% 4.1% 0;
	width: 27.965%;
	vertical-align: top;
	height: 28.8em;
	font-family: fontb;
	transition:filter .2s;
}
#content .frame:after{
	content:"";
	background: url(../../milkhistory/img/btn_play.png) no-repeat;
	background-size: contain;
	width: 2.95em;
	height: 2.95em;
	position:absolute;
	top:0;
	left:0;
	margin: 26.8% 0 0 42.7%;
	z-index:1;
	opacity: 0.9;
	transition:.2s;
	pointer-events: none;
}
#content .frame:hover:after{
	transform:scale(1.2);
	opacity:1;
}
#content .frame.coming:after{
	display:none;
}
#content .frame:hover{
	filter:brightness(1.12);
}
#content .frame.coming:hover{
	filter:brightness(1);
}
#content .frame:nth-child(3){
	margin-right:0;
}
#content .frame:nth-child(5){
	margin-right: -1.3%;
}
#content .frame img{
	width:100%;
}
#content .frame .img{
	width: 93.9%;
	position:relative;
	z-index:1;
	margin: 7.9% 0 0 0;
}
#content .frame .tl{
	width: 82.25%;
}
#content .frame.coming .tl{
	width: 34.786%;
}
#content .frame h4{
    position: relative;
    font-size: 1.3em;
    color: #00a03c;
    text-shadow: 2px 2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, -2px -2px 0px #fff, 1px 1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, -1px -1px 0px #fff, 2.5px 0px 1px #fff, 0px 2.5px 1px #fff, -2.5px 0px 1px #fff, 0px -2.5px 1px #fff, 2.8px 0px 1px #fff, 0px 2.8px 1px #fff, -2.8px 0px 1px #fff, 0px -2.8px 1px #fff;
}
#content .frame h4.narrow{
	transform:scaleX(0.95);
}
#content .frame h4 span{
    display: block;
    margin: 8.6% auto 0.8%;
    width: 19.93%;
}
#content .frame.coming h4 span{
	margin: 26.5% auto 4%;
}
#content .frame h4 span em{
    font-style: normal;
    font-size: 1.4em;
    margin: -2.2% 1% 0;
    vertical-align: top;
    display: inline-block;
}

@media all and (-ms-high-contrast:none){
	#content .frame h4 span{margin: 11.6% 0 -4%;}
	#content .frame h4 span em{
		font-style: normal;
		margin: -1.2% 1% 0;
	}
	#content .video.size1 .vflame{
		height:516px;
	}
	#content .frame p{
		margin-top:0%;
	}
}
#content .frame rt{
    font-size: 0.5em;
    position: relative;
    transform: scale(0.8);
}
#content .frame p{
    position: relative;
    text-align: justify;
    width: 84.2%;
    margin: 2.4% 0 0 7.4%;
    color: #000;
    line-height: 1.6;
}
#content .frame:before {
	content: "";
	width: 160.145%;
	height: 106.43%;
	position: absolute;
	pointer-events: none;
	left: 0;
	top: 0;
	margin: -3.2% 0 0 -3.2%;
	background: url(../../milkhistory/img/cts_boad.png) no-repeat;
	background-size: contain;
}
#content .frame h3:before {
	content: "";
	width: 115.9%;
	height: 143.2%;
	position: absolute;
	left: -0.7%;
	top: 0;
	background: url(../../kids/img/h3_boad.png) no-repeat;
}
#content .frame h3 .border {
	filter: drop-shadow(0.1em 0.1em 0.05em rgba(0, 0, 0, 0.3));
}
#content .frame h3 .border:before {
	-webkit-text-stroke: 0.15em #fff;
}
#content .frame h3 {
	color: #00a03c;
	display: inline-block;
	padding: 14.7px 0;
	position: relative;
	font-size: 2.5em;
	font-family: fontb;
	font-weight: bold;
	white-space: nowrap;
	width: 366px;
	height: 60px;
	margin-left: -6px;
	position: relative;
	letter-spacing: -0.03em;
	text-decoration: none !important;
}
#content .frame a{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 1;
}

/*============================
#ctsHead
============================*/

#ctsHead {
	position: relative;
}
#ctsHead h1 {
	width: 877px;
	margin-left: 125px;
	padding-top: 57px;
	text-align: left;
}
#ctsHead h1 img {
	position: relative;
	width: 25.626%;
	margin-right: -8%;
}
#ctsHead h1 img {
	position: relative;
	width: 100%;
}
#ctsHead h2 {
	position: relative;
	z-index: 1;
	width: 237px;
	position: absolute;
	margin: 1.05% 1% 0 0;
	filter: drop-shadow(0em 0.2em 0.2em rgba(0, 0, 0, 0.5));
	position: absolute;
	right: -17px;
	top: 7px;
}
#ctsHead h2 a {
	display: block;
}
#ctsHead h2 img {
	position: absolute;
	left: 0;
	animation: tlatt 5s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
#ctsHead h2 .en {
	width: 52%;
	margin: 0 0 0 22.8%;
	animation: none;
}
#ctsHead h2 .c1 {
	width: 16.62%;
	margin: 8.6% 0 0 -1.2%;
	z-index: 6;
}
#ctsHead h2 .c2 {
	width: 19.08%;
	margin: 8.4% 0 0 11%;
	z-index: 5;
	animation-delay: .2s;
}
#ctsHead h2 .c3 {
	width: 16.925%;
	margin: 7.9% 0 0 26.5%;
	z-index: 4;
	animation-delay: .4s;
}
#ctsHead h2 .c4 {
	width: 19.08%;
	margin: 6.58% 0 0 40.2%;
	z-index: 3;
	animation-delay: .6s;
}
#ctsHead h2 .c5 {
	width: 15.693%;
	margin: 8.4% 0 0 55.7%;
	z-index: 2;
	animation-delay: .8s;
}
#ctsHead h2 .c6 {
	width: 14.77%;
	margin: 10.8% 0 0 68.2%;
	z-index: 1;
	animation-delay: 1s;
}
#ctsHead h2 .c7 {
	width: 18.465%;
	margin: 6.6% 0 0 79.8%;
	z-index: 0;
	animation-delay: 1.2s;
}
@keyframes tlatt {
	0%, 40%, 100% {
		transform: scale(1)
	}
	10%,
	12% {
		transform: scale(1.2)
	}
	24% {
		transform: scale(0.9)
	}
}
#ctsHead .ctsMenu {
	display: block;
	font-family: fontn;
	margin: 63px 0 71px -2px;
	letter-spacing: -0.03em;
	font-size: 1.9em;
}
#ctsHead .ctsMenu li {
	position: relative;
	display: inline-block;
	width: 310px;
	height: 89px;
	margin-right: 33px;
}
#ctsHead .ctsMenu li:before {
	content: "";
	width: 115.8%;
	height: 146.3%;
	position: absolute;
	left: 0;
	background: url(../../kids/img/menu_boad.png) no-repeat;
}
#ctsHead .ctsMenu li:last-child {
	margin-right: 0;
	font-size: 1.06em;
}
#ctsHead .ctsMenu li a {
	display: block;
	padding: 15.7px 0;
	width: 100%;
	position: relative;
	text-decoration: none !important;
}
#ctsHead .ctsMenu li .border{
    display: block;
    filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.5));
}
#ctsHead .ctsMenu li a:hover b {
	color: #21ba5a;
}
#ctsHead p.lead {
	font-family: fontb;
	color: #63541f;
	font-size: 1.45em;
	margin: 74px 0 168px 8px;
	line-height: 1.7em;
	text-align: left;
}
#ctsHead .ctsMenu span:after {
	content: "";
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1.08em;
	margin: 0% -1.7% -1.7% 5%;
	background: url(../../kids/img/arrow_menu_pc.png?2) no-repeat;
	transition: .1s;
}
#ctsHead .ctsMenu a:hover span:after {
	margin-bottom: -2.5%;
}
#ctsHead .c6 {
	width: 14.334%;
}
#ctsHead .c7 {
	width: 13.5%;
}
#ctsHead .c8 {
	width: 5.167%;
}
#ctsHead .border i{
	filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.5));
	-webkit-text-stroke: 0.23em #fff;
	letter-spacing: 0;
	white-space: nowrap;
	font-style: inherit;
}
#ctsHead .tree1 {
	margin: 30.5% 0 0 106%;
}
#ctsHead .caw1 {
	margin: 31.6% 0 0 -15.2%;
}
#ctsHead .theater {
	margin: 36.9% 0 0 56.3%;
	width: 49.6%;
}
#ctsHead .human0 {
	margin: 57.2% 0 0 53.4%;
	width: 37.2%;
}
#ctsHead .human1 {
	margin: 54.7% 0 0 53.2%;
	width: 3.3%;
}
#ctsHead .human2 {
	margin: 62.3% 0 0 74.5%;
	width: 4.2%;
}
#ctsHead .human3 {
	margin: 60.7% 0 0 93%;
	width: 6.7%;
}
#content .cover {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	background: #fff;
	z-index: 6;
}
#content .cover.c2 {
	mix-blend-mode: overlay;
	pointer-events: none;
}
#content .video {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 3;
	display: none;
}
#content .video .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0.8;
}
#content .video .vflame {
	width: 760px;
	height: 483px;
	background: #fff;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0em 0.3em 0.2em rgba(0, 0, 0, 0.3);
}
#content .video.size1 .vflame {
	width: 803px;
	height: 519px;
}
#content .video .close {
	position: absolute;
	right: 0;
	top: 0;
	margin: -36px -29px 0 0;
	cursor: pointer;
	transition: .2s;
	z-index: 2;
}
#content .video .close:hover {
	transform: scale(1.1);
	filter: brightness(1.1);
}
#content .video .embed {
	position: relative;
	width: 720px;
	height: 405px;
	background: #000;
	margin: 20px 20px 19px;
	overflow: hidden;
}
#content .video.size1 .embed {
	width: 762px;
	height: 431px;
}
#content .video .embed iframe{
	position: absolute;
	height: 100% !important;
	width: 100%  !important;
}
#content .video.size1 .embed iframe{
	width: 101%  !important;
	height: 101% !important;
	margin: -0.25%;
}
#content .video .embed .videoEnv{
	position: absolute;
	height:100%;
	width:100%;
	top:0;
}
#content .video .play {
	left: 50%;
	top: 46%;
	position: absolute;
	margin: -30px;
}
#content .video h4 {
	width: 100%;
	text-align: center;
	font-family: fontb;
	text-align: center;
	font-size: 25px;
	color: #00a03c;
}
#content .video h4 .tl{
	width: 45.55%;
	margin-top: -2%;
	margin-left: 1%;
}
#content .video h4 .long .tl{
	width: auto;
	height: 1.7em;
	margin-top: -1%;
	margin-left: 2.3%;
}
#content a.return {
	position: relative;
	display: inline-block;
	background: #00a03c;
	color: #fff;
	font-family: fontn;
	border: #fff 3px solid;
	border-radius: 1.4em;
	padding: 0.41em 1.2em;
	font-size: 1.15em;
	letter-spacing: .02em;
	box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, .4);
	transition: .2s;
	margin: 3.7% 0 7.5% 2.2%;
}
#content a.return:hover{
	text-decoration: none;
	background:#21ba5a;
}
#ctsVideo{position:relative;}
#ctsVideo .tree1{
    margin: -24px 0 0 -211px;
}
#ctsVideo .tree2{margin: 772px 0 0 -197px;transform: scaleX(-1);}
#ctsVideo .tree3{margin: 377px 0 0 1072px;}
#ctsVideo .caw1{
    margin: 664px 0 0 1062px;
    transform: scaleX(-1);
}
#ctsVideo .caw2{
    margin: -45px 0 0 1062px;
}
#ctsVideo .caw3{
    margin: 423px 0 0 -134px;
}
#ctsVideo .caw4{
	margin: -137px 0 0 -87px;
	transform: scaleX(-1);
}
@media (min-width: 737px) {
  .forsp{
    display:none !important;
  }
}

@media (max-width: 736px) {
	.forpc{
	  display:none !important;
	}
	html,body{
		overflow-x:hidden;
	}
	#content .inner {
		width: 100%;
	}
	#content .mvlogo {
		right: 0.9%;
		top: 0.6em;
		width: 32.5%;
	}
	#content h1{
		width: 42.6%;
		margin-left: 1.5%;
		padding-top: 3.3%;
	}
	#stage #content {
		width: 100%;
		font-size: 1.9022vw;
		background-size: 150%;
	}
	#stage #content .headbg {
		width: 100%;
		height: 26.1em;
		background: #b8ce69 url(../../milkhistory/img/bg_sp.jpg) no-repeat 50% top;
		background-size: cover;
	}
	#content .border:before {
		-webkit-text-stroke: 0.23em #fff;
		letter-spacing: 0;
	}
	#content .frame {
		margin: 11% 0 14%;
	}
	#content .frame .img{
		margin: 7.9% 0 0 0;
	}
	#content .frame:after {
		width: 121.8%;
		height: 146.3%;
		margin: -3% 0 0 2.9%;
		background-size: contain;
	}
	#content .frame .new {
		width: 8.95em;
		margin: -6.6% 0 0 8%;
	}
	#content h3:before {
		width: 117.3%;
		height: 143.2%;
		left: -1.1%;
		background-size: 100% 100%;
	}
	#content h3 .border {
		filter: drop-shadow(0.1em 0.1em 0.05em rgba(0, 0, 0, 0.3));
	}
	#content h3 .border:before{
		font-weight:bold;
	}
	#content h3 .border:before {
		-webkit-text-stroke: 0.15em #fff;
	}
	#content h3 {
		padding: 2% 0;
		font-size: 2.5em;
		width: 48%;
		height: 1.4em;
		margin-left: -0.6%;
		letter-spacing: -0.03em;
	}
	#content .sublead {
		font-size: 1.75em;
		margin: 6% 0 1.9%;
		letter-spacing: 0.02em;
	}
	/*============================
	#ctsHead
	============================*/

	#ctsHead h1 {
		width: 108.1%;
		margin-left: 2.7%;
		padding-top: 12.1%;
		margin-bottom: -0.5%;
	}
	#ctsHead h2 {
		width: 237px;
		margin: 1.05% 1% 0 0;
		filter: drop-shadow(0em 0.2em 0.2em rgba(0, 0, 0, 0.5));
		right: -17px;
		top: 7px;
	}
	#ctsHead .ctsMenu {
		margin: 6% 0 7% -0.6%;
		letter-spacing: -0.03em;
		font-size: 1.73em;
	}
	#ctsHead .ctsMenu li {
		width: 29%;
		height: 3.1em;
		margin-right: 3.1%;
		vertical-align: top;
	}
	#ctsHead .ctsMenu li:before {
		width: 126.9%;
		height: 144.3%;
		background: url(../../kids/img/menu_boad_sp.png) no-repeat;
		background-size: contain;
	}
	#ctsHead .ctsMenu li a {
		padding: 3.6% 0 15%;
		width: 100%;
		transition: .24s;
	}
	#ctsHead p.lead {
		font-size: 1.92em;
		margin: 2.7% 0 77.5% 1%;
		line-height: 1.48em;
		background-size: 94%;
		padding: 4.6% 0 4.4%;
		text-align: center;
	}
	#ctsHead .ctsMenu span:after {
		width: 3.5vw;
		height: 2.58vw;
		margin: 5.1vw 0 0 -5.4%;
		background: url(../../kids/img/arrow_menu_sp.png) no-repeat;
		background-size: contain;
		transition: .1s;
		position: absolute;
		left: 50%;
	}
	#ctsHead .ctsMenu a:hover b:after {
		margin-bottom: -3%;
	}
	#ctsHead .c6 {
		width: 14.334%;
	}
	#ctsHead .c7 {
		width: 13.5%;
	}
	#ctsHead .c8 {
		width: 5.167%;
	}
	#ctsHead .theater {
		margin: 86.6% 0 0 7.6%;
		width: 92.4%;
	}
	#ctsHead .human0 {
		margin: 124.3% 0 0 4.8%;
		width: 69.2%;
	}
	#ctsHead .human1 {
		margin: 119.7% 0 0 3.2%;
		width: 6.1%;
	}
	#ctsHead .human2 {
		margin: 133.9% 0 0 44%;
		width: 7.9%;
	}
	#ctsHead .human3 {
		margin: 131% 0 0 76%;
		width: 12.4%;
	}

	#content .video .vflame {
		width: 96%;
		height: 63.5vw;
		filter: drop-shadow(0em 0.3em 0.2em rgba(0, 0, 0, 0.3));
	}
	#content .video.size1 .vflame {
		width: 96%;
		height: 63.1vw;
	}
	#content .video .close {
		margin: -3.7% -2% 0 0;
		transition: .2s;
		width: 11.7vw;
	}
	#content .video .embed {
		width: 94.17%;
		height: 50.8vw;
		margin: 3vw 3vw 3%;
	}
	#content .video.size1 .embed {
		width: 94.17%;
		height: 50.1vw;
	}
	#content .video .play {
		left: 50%;
		top: 46%;
		margin: -30px;
	}
	#content .video h4 {
		width: 100%;
		font-size: 4.1vw;
	}
	#content .video.size1 h4{
		margin-left: 0.2em;
		letter-spacing: -0.02em;
	}
	#content .video h4 .tl{
		margin-left: 0.2em;
		width: 57.55%;
	}
	#content .video h4 .long .tl{
		width: auto;
		height: 1.4em;
		margin-top: -0.7%;
		margin-left: 2.3%;
	}
	#content .video.size2 h4{
		letter-spacing: -0.04em;
		font-size: 1.73em;
		line-height: 1.9;
	}
    
    #ctsVideo ul {
		margin-left: -0.7%;
	}
	#content .frame {
		margin: 0 0 13.4% 0;
		width: 70.065%;
		height: 51.7em;
	}
	#content .frame:after{
		width: 5.45em;
		height: 5.45em;
		margin: 25.6% 0 0 42.3%;
	}
	#content .frame:nth-child(5){
		margin-right: -1.3%;
	}
	#content .frame img{
		width: 93.9%;
	}
	#content .frame h4{
		font-size: 2em;
	}
	#content .frame.coming .tl {
		width: 31.4%;
	}
	#content .frame h4 span{
		margin: 10.6% auto 2.3%;
		width: 19.13%;
	}
	#content .frame .tl{
		width: 73.73%;
	}
	#content .frame.coming h4 span{
		margin: 26.8% auto 4%;
	}
	#content .frame h4 span em{
		font-size: 1.3em;
		margin: -1.6% 1% 0;
	}
	#content .frame rt{
		font-size: 0.5em;
		transform: scale(0.8);
	}
	#content .frame p{
		width: 80.8%;
		margin: 3.3% 0 0 9.2%;
		line-height: 1.6;
		font-size: 1.63em;
	}
	#content .frame:before {
		width: 160.145%;
		height: 106.43%;
		margin: -3.2% 0 0 -3.2%;
	}
	#content .frame h3:before {
		width: 115.9%;
		height: 143.2%;
		left: -0.7%;
	}
	#content .obj.tractor{
		width: 32.5%;
		margin: 0 2.9% 33.6% 0;
	}
	#ctsVideo .tree2 {
		top:auto;
		bottom:0;
		margin: 0 0 23.1% 2.8%;
		width: 19.2%;
		transform: scaleX(-1);
	}
	#content a.return {
		border: #fff 0.2em solid;
		padding: 0.31em 2.4em;
		font-size: 2.25em;
		margin: 15.5% 0 14.9%;
	}
}