@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: "fontn";
	src: url("../../img/font_n.woff") format('woff');
}
.anm{
	opacity:0;
}
#stage {
	overflow-x: hidden;
}
#stage .opcover {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 103%;
	opacity: 1;
	background: #fff;
}
#stage #rwd-footer{
	margin-top:0
}
#stage .opcover.c2 {
	mix-blend-mode: overlay;
	pointer-events: none;
}
#milkpower .opcover,
#milkpower .opcover.c2 {
	z-index:2;
}
#stage .mainbg {
	background: url(../../milktree/img/bg_top.jpg?2) no-repeat 50% 71%;
	width: 100vw;
	height: 814px;
	position: absolute;
	background-size: cover;
	min-width: 1020px;
	opacity: 0;
}
#stage #content {
	width: 100%;
	overflow: hidden;
}
#stage .inner {
	width: 1080px;
	max-width: 95%;
	margin: 0 auto;
	position: relative;
}
#milkpower #stage .inner {
	text-align: center;
}

#content .mvlogo {
	position: relative;
	z-index: 1;
	width: 226px;
	position: absolute;
	margin: 1.25% 0.2% 0 0;
	filter: drop-shadow(0em 0.2em 0.2em rgba(0, 0, 0, 0.5));
	position: absolute;
	right: -17px;
	top: 7px;
	z-index: 2;
}
#content .mvlogo a {
	display: block;
}
#content .mvlogo img {
	position: absolute;
	left: 0;
	animation: tlatt 5s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
#content .mvlogo .en {
	width: 52%;
	margin: 0 0 0 22.8%;
	animation: none;
}
#content .mvlogo .c1 {
	width: 16.62%;
	margin: 8.6% 0 0 -1.2%;
	z-index: 6;
}
#content .mvlogo .c2 {
	width: 19.08%;
	margin: 8.4% 0 0 11%;
	z-index: 5;
	animation-delay: 0.2s;
}
#content .mvlogo .c3 {
	width: 16.925%;
	margin: 7.9% 0 0 26.5%;
	z-index: 4;
	animation-delay: 0.4s;
}
#content .mvlogo .c4 {
	width: 19.08%;
	margin: 6.58% 0 0 40.2%;
	z-index: 3;
	animation-delay: 0.6s;
}
#content .mvlogo .c5 {
	width: 15.693%;
	margin: 8.4% 0 0 55.7%;
	z-index: 2;
	animation-delay: 0.8s;
}
#content .mvlogo .c6 {
	width: 14.77%;
	margin: 10.8% 0 0 68.2%;
	z-index: 1;
	animation-delay: 1s;
}
#content .mvlogo .c7 {
	width: 18.465%;
	margin: 6.6% 0 0 79.8%;
	z-index: 0;
	animation-delay: 1.2s;
}
#content .whitebox{
	position: relative;
    background: rgb(255, 255, 255, 95%);
    width: 91.9%;
    display: block;
    margin: 0 auto !important;
    border: #f88d1a 0.3em solid;
    border-radius: 1.5em;
    height: 56.6em;
    box-shadow: rgb(0 0 0 / 25%) 0.4em 0.4em 0.6em;
    text-align: left;
}
/*============================
#ctsOp
============================*/
#ctsOp {
	position: absolute;
	z-index: 0;
	width: 100vw;
	min-width: 1700px;
	height: 58.2em;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	/* overflow: hidden; */
	background: #9cc2fe;
	/* display: none; */
}
#ctsOp img {
	position: absolute;
	width: 100%;
}
#ctsOp .obj1 {
	width: 7em;
	margin: 0.7% 0px 0 19.6%;
	transform: scaleX(-1);
}
#ctsOp .obj2 {
	width: 7.4em;
	margin: 3.1% 0 0 59%;
}
#ctsOp .obj3 {
	width: 7.6em;
	margin: 1% 0 0 90%;
}
#ctsOp .obj4 {
	width: 10.4em;
	margin: -2% 0 0 28%;
}
#ctsOp .obj5 {
	width: 11.1em;
	margin: 1.5% 0 0 63.8%;
}
#ctsOp .sky {
	transform-origin: 50% 100%;
}
#ctsOp .tree {
	width: 25.3%;
	bottom: 11%;
	margin: 0 0 0% 37.8%;
	transform-origin: 50% 300%;
}
#ctsOp .enkei {
	position: absolute;
	bottom: 0;
	width: 100%;
	transform-origin: 50% 248%;
}
#ctsOp .oka2 {
	width: 46%;
	position: absolute;
	bottom: 0;
	height: 20em;
	transform-origin: 90% 65%;
}
#ctsOp .oka3 {
	width: 46%;
	position: absolute;
	margin-left: 54%;
	bottom: 3%;
	transform-origin: 10% 65%;
	height: 20em;
	/* transition: .2s; */
}
#ctsOp .oka1 {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20.7em;
	transform-origin: 50% -52%;
}
#ctsOp .oka1 .oka{
	transform-origin: 50% 0%;
}
#ctsOp .oka1 .shiba {
	background: url(../../milktree/img/shibaloop.jpg);
	position: absolute;
	width: 100%;
	height: 5.6em;
	bottom: 0;
	background-size: 100%;
}

/*============================
#ctsSelect
============================*/
#stage div#ctsSelect {
	padding-top: 7.1em;
	text-align: center;
	z-index: 1;
	position: relative;
	opacity: 0;
}
#stage div#ctsSelect .lead{
	margin: -6em 0 0.2em 0.2em;
	width: 36.358em;
	display: inline-block;
}
#stage div#ctsSelect .lead img{
	width:100%;
}
#ctsSelect .gif img {
	position: absolute;
	bottom: 0;
	left: 50%;
}
#ctsSelect .gif .cow1 {
	margin: 0 0 15.3% -79.3%;
	width: 6.7em;
}
#ctsSelect .gif .cow2 {
	margin: 0 0 4.7% -52.9%;
	width: 3em;
}
#ctsSelect .gif .cow3 {
	margin: 0 0 8.3% -33.5%;
	width: 9.6em;
}
#ctsSelect .gif .cow4 {
	margin: 0 0 10.2% 27.9%;
	width: 6.4em;
}
#ctsSelect .gif .cow5 {
	margin: 0 0 3.6% 47.3%;
	width: 5.5em;
}
#ctsSelect .gif .cow6 {
	margin: 0 0 15.2% 68.7%;
	width: 6.6em;
}
#ctsSelect .gif .family {
	margin: 0 0 14.7% -17.1%;
	width: 3.6em;
}
#ctsSelect ul {
	display: flex;
	justify-content: space-between;
	width: 94.5%;
	margin: 0 auto;
	height: 28.8em;
}
#ctsSelect li {
	display: inline-block;
	width: 29.2em;
	vertical-align: top;
	text-align: center;
	position: relative;
	height: 31.2em;
}
#ctsSelect li .bg {
	position: absolute;
	width: 100%;
	left: 0;
	height: 100%;
	margin-left: 1.6%;
}
#ctsSelect li .bg img {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
}
#ctsSelect .tree h2 {
	position: relative;
	margin: 35% 0 0 20.8%;
	width: 59.2%;
}
#ctsSelect li h2 img {
	width: 100%;
}
#ctsSelect ul .arrow{
	display: inline-block;
	position: relative;
	margin: 3.3em 0 0 0.6em;
	width: 4.143em;
}
#ctsSelect .power .arrow{
	margin-top: 1.9em;
}
#ctsSelect li a {
	display: block;
}
#ctsSelect li a img {
	transition: 0.3s;
}
#ctsSelect li a:hover img {
	filter: brightness(1.25);
}
#ctsSelect li a:hover .bg img {
	filter: brightness(1);
}
#ctsSelect li a.cover {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#ctsSelect .power h2 {
	position: relative;
	margin: 25.6% 0 0 13%;
	width: 73.41%;
}
#ctsSelect .power h3 {
	position: relative;
	width: 47.913%;
	margin: 1.2% auto -1.9%;
}
#ctsSelect .power h3 img {
	width: 100%;
}
#ctsSelect .power h3.stl2 {
	position: relative;
	width: 33.41%;
	margin: 0.1% auto;
}
#ctsSelect .power h3.stl3 {
	width: 73.187%;
	margin: -1.7% auto -1.6%;
}
#ctsSelect a.return,
#milkpower a.return {
	position: relative;
	display: inline-block;
	background: #00a03c;
	color: #fff;
	font-family: fontn;
	border: #fff 3px solid;
	border-radius: 1.4em;
	padding: 0.31em 2.4em;
	font-size: 1.15em;
	letter-spacing: 0.02em;
	font-weight: 800;
	box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.4);
	transition: 0.2s;
	margin: 7.9% 0 5.4% -0.4%;
	margin: 5.3em 0 4.75em -0.3em;
	z-index: 2;
}
#ctsSelect a.return:hover,
#milkpower a.return:hover{
	text-decoration: none;
	background: #21ba5a;
}
#milkpower #stage #rwd-footer {
	margin-top: 0;
}
.wrp-sns-area,
#stage .wrp-gnav {
	position: relative;
	z-index: 5;
	background: #fff;
}

.headbg {
	background: url(../../milktree/img/bg_power.jpg) no-repeat center bottom;
	position: absolute;
	width: 100%;
	height: 73.6em;
	background-size: cover;
}

#milkpower #stage #content {
	background: url(../../milktree/img/shibaloop.jpg);
	background-size: 100%;
}
#milkpower .obj {
	position: absolute;
	left: 50%;
	top: 50%;
}

/*============================
#ctsHead
============================*/
#ctsHead {
	text-align: left;
}
#ctsHead h1 {
	padding: 3.3em 0 4.5em 2.8em;
}
#ctsHead h1 img {
	height: 5.358em;
	width: auto;
	margin-right: -1.18%;
	opacity: 0;
}
#ctsHead h1 .c5 {
	margin-right: -1%;
	margin-left: -0.03em;
}
#ctsHead h2.mvlogo {
	width: 194px;
	margin: 1.15% 4.9% 0 0;
}

/*============================
#ctsChart
============================*/
#ctsChart{
	position:relative;
}
#ctsChart {
	width: 100%;
}
#ctsChart h2 {
	margin: -1.3% 0 0 -1.8%;
	width: 38%;
}
#ctsChart h2 img {
	width: 100%;
}
#ctsChart p {
	padding: 2.7em 0 0 3.9em;
	width: 22.572em;
}
#ctsChart p img {
	width: 100%;
}
#ctsChart .chart {
	width: 98.674%;
	position: absolute;
	height: 40em;
	top: 0;
	left: 0;
	margin: 8.8% 0 0 20.9%;
}
#ctsChart .chart img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
#ctsChart .chart .s{
	width: 1.786em;
	margin: 8% 0 0 -12.4%;
}
#ctsChart .chart .m{
	width: 2.286em;

	margin: 11% 0 0 -2.4%;
}
#ctsChart .chart .pop2 .s{
	margin: 12% 0 0 -19.4%;
}
#ctsChart .chart .pop2 .m{
	margin: 16% 0 0 -6.4%;
}
#ctsChart .chart .pop3 .s{
	margin: -6.3% 0 0 -10.1%;
}
#ctsChart .chart .pop3 .m{
	margin: 1.3% 0 0 3%;
}
#ctsChart .chart .pop4 .s{
	margin: 9% 0 0 -22.4%;
}
#ctsChart .chart .pop4 .m{
	margin: 14% 0 0 -9.4%;
}
#ctsChart .chart .pop5 .s{
	margin: -2% 0 0 -4.2%;
}
#ctsChart .chart .pop5 .m{
	margin: 1.9% 0 0 4.8%;
}
#ctsChart .chart .road {
	width: 50em;
	-webkit-mask-image: linear-gradient(to left, transparent 50%, black 55%);
	mask-image: linear-gradient(to left, transparent 50%, black 53%);
	-webkit-mask-position-x: 285%;
	-webkit-mask-size: 105em;
}
#ctsChart .chart .cow {
	margin: 18.6% 0 0 -15.7%;
	width: 15.5em;
}
#ctsChart .chart .seinyu {
	margin: 31.4% 0 0 -14.3%;
	width: 11.572em;
}
#ctsChart .chart span {
	display:block;
	position: absolute;
	cursor: pointer;
	height: 6.2em;
}
#ctsChart .chart span img{
	position: relative;
	width:100%;
}
#ctsChart .chart .pr {
	width: 7.143em;
}
#ctsChart .chart .pr img{
	width:100%;
	position:absolute;
}
#ctsChart .chart .pr .att{
	-webkit-mask-image: linear-gradient(300deg, transparent 59%, black 59.3%, black 75%, transparent 76.4%);
	-webkit-mask-size: 150% 150%;
	-webkit-mask-position-x: 150%;
	transition: 0s;
	opacity: 0.5 !important;
	animation: attent 1.8s infinite cubic-bezier(0.51, 0.27, 0.25, 1);
}
@keyframes attent {
   0%,50.01%{
    -webkit-mask-position-x: 150%;
   }
   50%{
     -webkit-mask-position-x: -150%;
   }
}
#ctsChart .chart span:nth-of-type(2) .att{
	animation-delay:.1s;
}
#ctsChart .chart span:nth-of-type(3) .att{
	animation-delay:.2s;
}
#ctsChart .chart span:nth-of-type(4) .att{
	animation-delay:.3s;
}
#ctsChart .chart span:nth-of-type(5) .att{
	animation-delay: 0.6s;
}
#ctsChart .chart .pr1 {
	margin: 33.3% 0 0 3.8%;
}
#ctsChart .chart .gyunyu {
	margin: 52.2% 0 0 5.4%;
	width: 4.643em;
}
#ctsChart .chart .sign {
	width: 3.286em;
}
#ctsChart .chart .plus1 {
	margin: 17.1% 0 0 20%;
}
#ctsChart .chart .divide {
	margin: 35.4% 0 0 20%;
}
#ctsChart .chart .minus1 {
	margin: 53.7% 0 0 20%;
}
#ctsChart .chart .pr2 {
	margin: -3.5% 0 0 26.2%;
}
#ctsChart .chart .plus2 {
	margin: 6.9% 0 0 29.2%;
}
#ctsChart .chart .pr3 {
	margin: 15% 0 0 26.2%;
}
#ctsChart .chart .pr4 {
	margin: 33.4% 0 0 26.2%;
}
#ctsChart .chart .pr5 {
	margin: 51.5% 0 0 26.2%;
}
#ctsChart .chart .minus2 {
	margin: -1.6% 0 0 38.1%;
}
#ctsChart .chart .minus3 {
	margin: 35.4% 0 0 38%;
}
#ctsChart .chart .whey {
	margin: -4.6% 0 0 45.5%;
	width: 5.429em;
}
#ctsChart .chart .pr6 {
	margin: 33.3% 0 0 44.3%;
}
#ctsChart .chart .equal1 {
	margin: -1.7% 0 0 56.1%;
}
#ctsChart .chart .equal2 {
	margin: 17.1% 0 0 56.1%;
}
#ctsChart .chart .equal3 {
	margin: 35.4% 0 0 56.1%;
}
#ctsChart .chart .equal4 {
	margin: 53.8% 0 0 56.1%;
}
#ctsChart .chart .cheeze {
	margin: -3.9% 0 0 61.9%;
	width: 9.143em;
}
#ctsChart .chart .yogurt {
	margin: 14.4% 0 0 62.8%;
	width: 8.286em;
}
#ctsChart .chart .butter {
	margin: 30.9% 0 0 61.7%;
	width: 9.072em;
}
#ctsChart .chart .rennyu {
	margin: 49.9% 0 0 62.1%;
	width: 8.429em;
}
#ctsChart .cow01 {
	margin: 19.2% 0 0 -77.7%;
	width: 15.9em;
}
#ctsChart .cow02 {
	margin: 20% 0 0 70.5%;
	width: 9.8em;
}
#popup{
	position:absolute;
	width:100%;
	height:100%;
	display: none;
	pointer-events: none;
}
#popup li{
	position:absolute;
	width:100%;
	/* height:100%; */
	transform-origin: -10% 0;
}
#popup li img{
	width:100%;
}
#popup li.pop1{
	margin: 0.5% 0 0 38%;
	width: 14.358em;
}
#popup li.pop2{
	margin: 18.8% 0 0 38.5%;
	width: 11.286em;
}
#popup li.pop3{
	margin: 40.6% 0 0 36.7%;
	width: 9.786em;
}
#popup li.pop4{
	margin: 56.2% 0 0 39%;
	width: 10.929em;
}
#popup li.pop5{
	margin: 40.3% 0 0 53.8%;
	width: 15.5em;
}
/*============================
#ctsEiyo
============================*/
#ctsEiyo{
	position:relative;
}
#ctsEiyo .whitebox {
	margin: 4.6% auto !important;
	border: #df7b68 0.3em solid;
	height: 37em;
}
#ctsEiyo h2 {
	margin: -1.6% 0 0 -1.7%;
	width: 27.205%;
}
#ctsEiyo h2 img {
	width: 100%;
}
#ctsEiyo p {
	padding: 2.4em 0 0 3.8em;
	width: 14.429em;
}
#ctsEiyo p img {
	width: 100%;
}
#ctsEiyo .chart {
	position: absolute;
	width: 64.286em;
	height: 35em;
	margin: 5.6% 0 0 28.6%;
	top: 0;
	left: 0;
}
#ctsEiyo .chart .fig {
	width: 29.072em;
	z-index: 1;
	position: absolute;
}
#ctsEiyo .chart .lines.mq {
	position: absolute;
	left: 0;
	top: 0;
	margin: 4.1% 0 0 35.8%;
	width: 23.643em;
	-webkit-mask-image: linear-gradient(to left, transparent 50%, black 55%);
	mask-image: linear-gradient(to left, transparent 50%, black 53%);
	-webkit-mask-position-x: 100%;
	-webkit-mask-size: 65em;
}
#ctsEiyo .chart p {
	margin: 0 0 1% 45.8%;
	width: 17.286em;
	padding: 0;
	position: relative;
}
#ctsEiyo .chart .txt2 {
	margin: 1.7% 0 0.8% 45.8%;
}
#ctsEiyo .chart .txt3 {
	margin: 0 0 0.5% 45.8%;
}
#ctsEiyo .cow03 {
	margin: -3.1% 0 0 -61.1%;
	width: 4.3em;
}
#ctsEiyo .cow04 {
	margin: -7.7% 0 0 51.5%;
	width: 8.5em;
}

/*============================
#ctsStrong
============================*/
#ctsStrong{
	position:relative;
}
#ctsStrong .whitebox {
	margin: 0 auto -1.5% !important;
	border: #45b01e 0.3em solid;
	height: 93.4em;
}
#ctsStrong h2 {
	width: 40.22em;
	margin: -1.8% 0 2.6% -1.9%;
}
#ctsStrong h2 img {
	width: 100%;
}
#ctsStrong .strong01 {
	display: inline-block;
	vertical-align: top;
	width: 31.429em;
	background: rgb(169, 209, 73, 20%);
	margin: 0px 0 0 3.6%;
	border-radius: 1.4em;
	padding: 2.9em;
	box-sizing: border-box;
}
#ctsStrong .strong01 h3 {
	width: 21.643em;
}
#ctsStrong .strong01 h3 img {
}
#ctsStrong .strong01 h4 {
	width: 17.572em;
	margin: 3.7% 0 7.2%;
}
#ctsStrong .strong01 p {
	width: 17.786em;
	opacity: 1 !important;
}
#ctsStrong div img {
	width: 100%;
}
#ctsStrong .strong01 .graph {
	position: relative;
	margin: 7.6% 0 8.4%;
	width: 100.61%;
}
#ctsStrong .strong01 .graph img {
	position: relative;
}
#ctsStrong .strong01 .graph .fig {
	position: absolute;
	right: 0;
	top: 0;
	width: 7.572em;
	margin: -9.2em -2% 0 0;
}
#ctsStrong .strong01 .p2 {
	width: 26.072em;
	position: relative;
}
#ctsStrong .strong01 .illust {
	width: 100%;
	margin: 8% 0 0;
	position: relative;
	height: 22.6em;
}
#ctsStrong .strong01 .illust img {
	width: 10.215em;
	position: absolute;
}
#ctsStrong .strong01 .illust .tri {
	width: 17.9em;
	margin: 7.5% 0 0 16%;
}
#ctsStrong .strong01 .illust .illust1 {
	margin: -1.4% 0 0 30%;
}
#ctsStrong .strong01 .illust .illust2 {
	margin: 34.9% 0 0 -3.6%;
	width: 11.143em;
}
#ctsStrong .strong01 .illust .illust3 {
	margin: 39.7% 0 0 60.2%;
	width: 10.215em;
}
#ctsStrong .vartical {
	display: inline-block;
	width: 24em;
	margin-left: 3.6%;
}
#ctsStrong .strong02 {
	display: inline-block;
	width: 31.429em;
	background: rgb(169, 209, 73, 20%);
	margin: 0 3.7% 0 0;
	border-radius: 1.4em;
	padding: 2.9em;
	box-sizing: border-box;
}
#ctsStrong .strong02 h3 {
	width: 16em;
}
#ctsStrong .strong02 h4 {
	width: 19.5em;
	margin: 3% 0 4%;
}
#ctsStrong .strong02 p {
	width: 15.575em;
}
#ctsStrong .strong02 .graph {
	position: relative;
	margin: 6.6% 0 0%;
	width: 100.334%;
}
#ctsStrong .strong02 .graph .fig {
	position: absolute;
	right: 0;
	top: 0;
	width: 6.358em;
	margin: -10.2em -0.3% 0 0;
}
#ctsStrong .strong02 .graph img {
	position: relative;
}
#ctsStrong .strong03 {
	vertical-align: top;
	width: 31.429em;
	background: rgb(169, 209, 73, 20%);
	margin: 12% 0 0 0;
	border-radius: 1.4em;
	padding: 2.9em;
	box-sizing: border-box;
}
#ctsStrong .strong03 h3 {
	width: 26.215em;
	margin-top: -0.6%;
}
#ctsStrong .strong03 h4 {
	width: 23em;
}
#ctsStrong .strong03 h4 img {
	width: 21.572em;
	margin: 6.8% 0 7.6%;
}
#ctsStrong .strong03 .graph {
	width: 102.84%;
	margin: 0% 0 6.1% -1.4%;
}
#ctsStrong .strong03 p {
	width: 25.286em;
	margin-bottom: -0.3%;
}
#ctsStrong .cow05 {
	margin: -50.9% 0 0 -80.3%;
	width: 8.6em;
}
#ctsStrong .cow06 {
	margin: -55.9% 0 0 76%;
	width: 9em;
}
#ctsStrong .cow07 {
	margin: -11.4% 0 0 -64%;
	width: 8.8em;
}
#ctsStrong .cow08 {
	margin: -18.4% 0 0 55.2%;
	width: 3.6em;
}
#ctsStrong .cow09 {
	margin: 38.8% 0 0 -73.6%;
	width: 15.9em;
}
#ctsStrong .cow10 {
	margin: 18.3% 0 0 77%;
	width: 4.35em;
}
#ctsStrong .tractor {
	margin: 63.3% 0 0 56.2%;
	width: 17.3em;
}

@media (max-width: 1136px) and (min-width: 1000px) {
	#milkpower #stage #content {
		font-size: 1.2325vw;
	}
}
@media (max-width: 1001px) and (min-width: 737px) {
	#milkpower #stage #content {
		font-size: 12.325px;
	}
}

@media (min-width: 737px) {
	.forsp {
		display: none !important;
	}
	#popup .close{
		display:none;
	}
}

@media (max-width: 736px) {
	.forpc {
		display: none !important;
	}
	html,
	body {
		overflow-x: hidden;
	}
	.headbg {
		background: url(../../milktree/img/bg_power_sp.jpg) no-repeat center bottom;
		width: 100%;
		height: 71.5em;
		background-size: cover;
	}
	#stage {
		overflow-x: hidden;
	}
	#stage .mainbg {
		background: url(../../milktree/img/bg_top_sp.jpg?2) no-repeat center;
		height: 228.8vw;
		min-width: 0;
		background-size: cover;
	}
	#stage #content {
		background-size: 100%;
		font-size: 1.9022vw;
		overflow: hidden;
	}
	#stage .inner {
		width: 100%;
		max-width: 95%;
		margin: 0 auto;
	}
	#content .mvlogo {
		right: -0.8%;
		top: 0.7em;
		width: 34.2%;
	}
	/*============================
 #ctsOp
 ============================*/
	#ctsOp {
		height: 199.1vw;
		background: #9cc2fe;
		min-width: 0;
	}
	#ctsOp .obj1 {
		width: 6.4em;
		margin: -2.4% 0 0 32.6%;
		transform: scaleX(-1);
	}
	#ctsOp .obj2 {
		width: 5.4em;
		margin: 2.2% 0 0 52.5%;
	}
	#ctsOp .obj3 {
		width: 6.4em;
		margin: 0% 0 0 81%;
	}
	#ctsOp .obj4 {
		width: 9.4em;
		margin: -2% 0 0 12%;
	}
	#ctsOp .obj5 {
		width: 10em;
		margin: 5.2% 0 0 85.1%;
	}
	#ctsOp .obj6 {
		width: 10.8em;
		margin: 26.5% 0 0 65.8%;
	}
	#ctsOp .obj7 {
		width: 11.7em;
		margin: 58.2% 0 0 29.1%;
	}
	#ctsOp .sky {
		transform-origin: 50% 200%;
	}
	#ctsOp .enkei {
		position: absolute;
		bottom: 54.3%;
		width: 100%;
		transform-origin: 50% 185%;
	}
	#ctsOp .tree {
		width: 36.3%;
		bottom: 0;
		margin: 0 0 105.6% 30.8%;
		transform-origin: 56% 109%;
	}
	#ctsOp .oka2 {
		width: 63%;
		bottom: 57.2%;
		height: 9em;
		transform-origin: 169% -42%;
	}
	#ctsOp .oka3 {
		width: 72%;
		margin-left: 28%;
		bottom: 59.3%;
		height: 9em;
		transform-origin: -74% -54%;
	}
	#ctsOp .oka1 {
		bottom: 0;
		width: 100%;
		height: 69.4em;
		transform-origin: 50% -21%;
	}
	#ctsOp .oka1 .shiba {
		background: url(../../milktree/img/shibaloop.jpg);
		position: absolute;
		width: 100%;
		height: 61.9em;
		bottom: 0;
		background-size: 100%;
	}

	/*============================
	 #ctsSelect
	 ============================*/
	#stage div#ctsSelect {
		padding-top: 7.3em;
	}
	#stage div#ctsSelect .lead{
		margin: 2.3em 0 5.4em -0.2em;
		width: 42.1em;
	}
	#ctsSelect .gif .cow1 {
		margin: 0 0 25.4% 63.4%;
		width: 7.3em;
		transform: scaleX(-1);
	}
	#ctsSelect .gif .cow2 {
		margin: 0px 0 29.9% 33.5%;
		width: 4.9em;
	}
	#ctsSelect .gif .cow3 {
		margin: 0 0 88.1% -73.5%;
		width: 9.4em;
	}
	#ctsSelect .gif .cow4 {
		margin: 0 0 81.2% 29.3%;
		width: 10em;
	}
	#ctsSelect .gif .cow5 {
		margin: 0 0 41% -49%;
		width: 8.8em;
		transform: scaleX(-1);
	}
	#ctsSelect .gif .cow6 {
		display: none;
	}
	#ctsSelect .gif .family {
		margin: 0 0 91.4% -39.2%;
		width: 5.7em;
	}
	#ctsSelect ul {
		width: 93.7%;
		height: 79em;
		display: block;
	}
	#ctsSelect li {
		width: 32.6em;
		height: 30.8em;
		margin-bottom: 20%;
	}
	#ctsSelect li .bg {
		margin-left: 1.6%;
	}
	#ctsSelect li .bg img {
	}
	#ctsSelect .tree h2 {
		margin: 35.4% 0 0 20.7%;
		width: 58.464%;
	}
	#ctsSelect ul .arrow{
		margin: 3.8em 0 0 0.8em;
		width: 4.543em;
	}
	#ctsSelect li a img {
		transition: 0.3s;
	}
	#ctsSelect .power h2 {
		margin: 25.4% 0 0 14%;
		width: 73.41%;
	}
	#ctsSelect .power h3 {
		width: 47.913%;
		margin: 1.2% auto -1.9%;
	}
	#ctsSelect .power h3.stl2 {
		width: 33.41%;
		margin: 0.1% auto;
	}
	#ctsSelect .power h3.stl3 {
		width: 73.187%;
		margin: -1.7% auto -1.6%;
	}
	#ctsSelect a.return {
		border: #fff 0.2em solid;
		padding: 0.31em 2.4em;
		font-size: 2.25em;
		margin: -2.5% 0 15.4%;
		z-index: 2;
	}

	/*============================
	#ctsHead
	============================*/
	#ctsHead h1 {
		padding: 2.6em 0 2.6em 0.3em;
	}
	#ctsHead h1 img {
		height: 5.258em;
		margin-right: -1.78%;
	}
	#ctsHead h1 .c5 {
		margin-right: -1.3%;
		margin-left: 0.07em;
	}
	#ctsHead h2.mvlogo {
		width: 34.3%;
		margin: 1.15% -0.1% 0 0;
	}
	
	/*============================
	#ctsChart
	============================*/
	#ctsChart .whitebox {
		width: 96.5%;
		display: block;
		margin: 0 auto !important;
		border-width: .5em;
		border-radius: 1.5em;
		height: 89.9em;
	}
	#ctsChart h2 {
		margin: -2.3% 0 0 -3.1%;
		width: 64%;
	}
	#ctsChart p {
		padding: 1em 0 0 3.3em;
		width: 41.572em;
	}
	#ctsChart .chart {
		width: 100%;
		height: 40em;
		margin: 48.8% 0 0 14.2%;
	}
	#ctsChart .chart .road {
		width: 37.3em;
		-webkit-mask-image: linear-gradient(0deg, transparent 50%, black 55%);
		/* -webkit-mask-position-x: 0; */
		-webkit-mask-position-y: -90%;
		-webkit-mask-size: 100% 220%;
	}
	#ctsChart .chart .cow {
		margin: -14.9% 0 0 -3.3%;
		width: 20em;
	}
	#ctsChart .chart .seinyu {
		margin: -14.3% 0 0 28.3%;
		width: 12.972em;
	}
	#ctsChart .chart .pr {
		width: 7.54em;
	}
	#ctsChart .chart .pr1 {
		margin: 12.1% 0 0 40.1%;
	}
	#ctsChart .chart .gyunyu {
		margin: 6.2% 0 0 68.1%;
		width: 5.243em;
	}
	#ctsChart .chart .sign {
		width: 3em;
	}
	#ctsChart .chart .plus1 {
		margin: 36.5% 0 0 21.6%;
	}
	#ctsChart .chart .divide {
		margin: 36.5% 0 0 44.6%;
	}
	#ctsChart .chart .minus1 {
		margin: 36.5% 0 0 67.5%;
	}
	#ctsChart .chart .pr2 {
		margin: 50.2% 0 0 -6.6%;
	}
	#ctsChart .chart .plus2 {
		margin: 54% 0 0 9.6%;
	}
	#ctsChart .chart .pr3 {
		margin: 50.2% 0 0 16.5%;
	}
	#ctsChart .chart .pr4 {
		margin: 50.2% 0 0 39.5%;
	}
	#ctsChart .chart .pr5 {
		margin: 50.2% 0 0 62.9%;
	}
	#ctsChart .chart .minus2 {
		margin: 68.2% 0 0 -1.6%;
	}
	#ctsChart .chart .minus3 {
		margin: 68.2% 0 0 44.6%;
	}
	#ctsChart .chart .whey {
		margin: 80.1% 0 0 -5.2%;
		width: 6.329em;
	}
	#ctsChart .chart .pr6 {
		margin: 81.9% 0 0 39.6%;
	}
	#ctsChart .chart .equal1 {
		margin: 100.3% 0 0 -1.7%;
	}
	#ctsChart .chart .equal2 {
		margin: 100.1% 0 0 21.7%;
	}
	#ctsChart .chart .equal3 {
		margin: 100.1% 0 0 44.7%;
	}
	#ctsChart .chart .equal4 {
		margin: 100.1% 0 0 67.6%;
	}
	#ctsChart .chart .cheeze {
		margin: 111.6% 0 0 -9.3%;
		width: 10.443em;
	}
	#ctsChart .chart .yogurt {
		margin: 110.8% 0 0 15.3%;
		width: 9.486em;
	}
	#ctsChart .chart .butter {
		margin: 109.9% 0 0 38.3%;
		width: 10.272em;
	}
	#ctsChart .chart .rennyu {
		margin: 107.2% 0 0 61.7%;
		width: 8.629em;
	}
	#ctsChart .cow01 {
		margin: 0.7% 0 0 -50.5%;
		width: 15.3em;
	}
	#ctsChart .cow02 {
		margin: 22.4% 0 0 37.7%;
		width: 9.8em;
	}
	#ctsChart .cow03 {
		margin: 78.4% 0 0 46.7%;
		width: 4.3em;
	}
	#popup{
		position:fixed;
		background:rgb(255,255,255,0.7);
		top:0;
		left:0;
		pointer-events: all;
		z-index: 2;
	}
	#popup li{
		margin: 0 !important;
		width: 100% !important;
		opacity: 0;
		height: 100%;
	}
	#popup li img{
		position:absolute;
		left:50%;
		top:50%;
		width:.1em;
	}
	#popup li img.close{
		position:absolute;
		left:50%;
		top:50%;
		width: 5.9em;
		margin: -24.8% 0 0 15%;
	}
	#popup li .mq{
		position:absolute;
		left:50%;
		top:50%
	}
	#popup li.pop1 .mq{
		margin: -27.2% 0 0 -30.9%;
		width: 31em;
	}
	#popup li.pop2 .mq{
		margin: -25.4% 0 0 -22.9%;
		width: 24.2em;
	}
	#popup li.pop3 .mq{
		margin: -23.5% 0 0 -19.8%;
		width: 21em;
	}
	#popup li.pop4 .mq{
		margin: -22.9% 0 0 -22.5%;
		width: 23.2em;
	}
	#popup li.pop5 .mq{
		margin: -30.5% 0 0 -27.4%;
		width: 29.6em;
	}
	#popup li.pop2 img.close{
		margin: -23.3% 0 0 11.5%;
	}
	#popup li.pop3 img.close{
		margin: -22.1% 0 0 10.3%;
	}
	#popup li.pop4 img.close{
		margin: -22.1% 0 0 11.5%;
	}
	#popup li.pop5 img.close{
		margin: -27.5% 0 0 15%;
	}
	#popup li .m,
	#popup li .s{
		display:none;
	}
	/*============================
	#ctsEiyo
	============================*/
	#ctsEiyo .whitebox {
		width: 96.5%;
		margin: 8.6% auto !important;
		border-width: 0.5em;
		border-radius: 1.5em;
		height: 69.1em;
	}
	#ctsEiyo h2 {
		margin: -2.8% 0 0 -2.8%;
		width: 45.505%;
	}
	#ctsEiyo p {
		padding: 1.6em 0 0 3.3em;
		width: 31.929em;
	}
	#ctsEiyo .chart {
		position: absolute;
		width: 64.286em;
		height: 35em;
		margin: 35.4% 0 0 0;
		top: 0;
		left: 0;
	}
	#ctsEiyo .chart .fig {
		width: 32.072em;
		z-index: 1;
		position: absolute;
		margin-left: 12.6%;
	}
	#ctsEiyo .chart .lines.mq {
		position: relative;
		left: 0;
		top: 0;
		margin: 33.9% 0 -23.2% 5.1%;
		width: 41.943em;
		-webkit-mask-image: linear-gradient(0deg, transparent 50%, black 55%);
		/* -webkit-mask-position-x: 0; */
		-webkit-mask-position-y: 90%;
		-webkit-mask-size: 100% 220%;
	}
	#ctsEiyo .chart p {
		margin: 0 0 2.9% 5.4%;
		width: 18.986em;
		padding: 0;
		display: inline-block;
		vertical-align: top;
	}
	#ctsEiyo .chart .txt2 {
		margin: 0 0 0 4.5%;
		width: 19.186em;
	}
	#ctsEiyo .chart .txt4{
		margin: -1.3% 0 0 4.5%;
		width: 19.086em;
	}
	#ctsEiyo .chart .txt3 {
		margin: 0 0 0 5.4%;
	}
	#ctsEiyo .cow03 {
		margin: -28.5% 0 0 19.7%;
		width: 16em;
	}
	#ctsEiyo .cow04 {
		margin: -78.3% 0 0 -54%;
		width: 8.5em;
	}
	#ctsEiyo .cow05 {
		margin: 69.7% 0 0 40.5%;
		width: 7.9em;
	}
	/*============================
	#ctsStrong
	============================*/
	#ctsStrong .whitebox {
		width: 96.5%;
		margin: 0 auto -1.5% !important;
		border-radius: 1.5em;
		border-width: 0.5em;
		height: auto;
	}
	#ctsStrong h2 {
		width: 46.22em;
		margin: -3.4% 0 5.2% -3%;
	}
	#ctsStrong .strong01 {
		width: 41.629em;
		margin: 0px 0 0 6.8%;
		border-radius: 1.4em;
		padding: 3.5em;
	}
	#ctsStrong .strong01 h3 {
		width: 25.843em;
	}
	#ctsStrong .strong01 h4 {
		width: 22.172em;
		margin: 2.5% 0 4.2%;
	}
	#ctsStrong .strong01 p {
		width: 24.686em;
	}
	#ctsStrong .strong01 .graph {
		margin: 7.6% 0 10%;
		width: 100.21%;
	}
	#ctsStrong .strong01 .graph .fig {
		width: 9.872em;
		margin: -11.9em -1.4% 0 0;
	}
	#ctsStrong .strong01 .p2 {
		width: 34.472em;
	}
	#ctsStrong .strong01 .illust {
		width: 100%;
		margin: 9.5% 0 0;
		height: 31em;
	}
	#ctsStrong .strong01 .illust img {
		width: 13.815em;
	}
	#ctsStrong .strong01 .illust .tri {
		width: 24.5em;
		margin: 7.5% 0 0 16%;
	}
	#ctsStrong .strong01 .illust .illust1 {
		margin: -1.4% 0 0 30%;
	}
	#ctsStrong .strong01 .illust .illust2 {
		margin: 35.2% 0 0 -3.6%;
		width: 15.143em;
	}
	#ctsStrong .strong01 .illust .illust3 {
		margin: 39.9% 0 0 60.2%;
		width: 14.015em;
	}
	#ctsStrong .vartical {
		display: block;
		width: 100%;
		margin: 0;
	}
	#ctsStrong .strong02 {
		width: 41.629em;
		margin: 6.4% 0 6.4% 6.8%;
		border-radius: 1.4em;
		padding: 3.5em;
	}
	#ctsStrong .strong02 h3 {
		width: 19.4em;
	}
	#ctsStrong .strong02 h4 {
		width: 24.8em;
		margin: 3% 0 4.5%;
	}
	#ctsStrong .strong02 p {
		width: 21.475em;
	}
	#ctsStrong .strong02 .graph {
		margin: 7.5% 0 0%;
		width: 100.334%;
	}
	#ctsStrong .strong02 .graph .fig {
		width: 9.458em;
		margin: -15.4em 0.4% 0 0;
	}
	#ctsStrong .strong03 {
		width: 41.629em;
		margin: 0px 0 7% 6.8%;
		border-radius: 1.4em;
		padding: 3.5em;
	}
	#ctsStrong .strong03 h3 {
		width: 31.515em;
		margin-top: -0.6%;
	}
	#ctsStrong .strong03 h4 {
		width: 27.272em;
		margin: 3.2% 0 4.6%;
	}
	#ctsStrong .strong03 h4 img {
		width: 100%;
		margin: 0;
	}
	#ctsStrong .strong03 .graph {
		width: 101.04%;
		margin: 0% 0 10.1% 0%;

	}
	#ctsStrong .strong03 p {
		width: 35.172em;
		margin-bottom: -0.3%;
	}
	#ctsStrong .cow05 {
		margin: 240.5% 0 0 -51.3%;
		width: 8.6em;
	}
	#ctsStrong .cow06 {
		margin: -195.1% 0 0 -55.2%;
		width: 8.7em;
	}
	#ctsStrong .cow07 {
		margin: -12.3% 0 0 -69.4%;
		width: 8.8em;
	}
	#ctsStrong .cow08 {
		margin: -19.7% 0 0 59.9%;
		width: 3.7em;
	}
	#ctsStrong .cow09 {
		margin: 82.1% 0 0 -66.2%;
		width: 15.3em;
	}
	#ctsStrong .cow10 {
		margin: 122.7% 0 0 47.7%;
		width: 4.35em;
	}
	#ctsStrong .tractor {
		margin: 261.8% 0 0 17.9%;
		width: 17.1em;
	}
	#milkpower a.return {
		border: #fff 0.2em solid;
		padding: 0.31em 2.4em;
		font-size: 2.25em;
		margin: 14.8% 0 15.6%;
	}
}