@charset "UTF-8";
/* CSS Document */
/*------------------------------------------------------------------------------
 SEC 0 : メイン
-------------------------------------------------------------------------------*/
#section0 {
	width:100%;
	height:100%;
	min-height:680px;
	margin:0 auto;
	padding:0;
	padding-top: 3rem;
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:center center;
	background-image:url(../images/mmc_bg_sec1.jpg);
	position:relative;
	color:white;
	border-top:1px solid rgba(0,0,0,0);
}

@media screen and (max-width:1080px){
	#section0 {
		background-size: 123% auto;
	}
}

@media screen and (max-width:900px){
	#section0 {
	   padding-top: 8rem;
   }
}

#section0 .wrapper {
	width:100%;
	height:90%;
	max-width:1200px;
	margin-top:4%;
	padding:0;
}
#section0 img {
	width:80%;
	max-width:480px;
}
#section0 p, 
#section0 p span {
	font-family:'bold';
	text-shadow:0 0 5px #000;
}
#section0 p.number {
	font-size:550%;
	line-height:120%;
}
#section0 p span.yellow {
	color:yellow;
}
#section0 p.intro {
	font-size:200%;
}
#section0 p.intro br {
	display:none;
}
#section0 p.intro span {
	font-size:140%;
}
#section0 p.text {
	font-size:110%;
	white-space:pre;
	padding:0;
	margin:10px auto;
	width:90%;
	max-width:900px;
}
#section0 .wrapper p.text span {
	font-size:150%;
}
#section0 .height {
	height:2%;
}
@media screen and (max-width:900px) {
#section0 {
	background-size:auto 100%;
	background-position:center center;
}
#section0 p.number {
	font-size:9vw;
}
#section0 p.intro {
	font-size:4vw;
}
#section0 p.intro br {
	display:block;
}
#section0 p.text {
	white-space:normal;
	text-align:left;
	font-size:2vw;
}
#section0 .wrapper p.text span {
	font-size:3vw;
}
}
@media screen and (max-width:640px) {
#section0 .wrapper img {
	position:relative;
	margin:5% auto;
}
#section0 p.text, 
#section0 .wrapper p.text span {
	white-space:normal;
	text-align:left;
	font-size:4vw;
	line-height:120%;
}
}

/*------------------------------------------------------------------------------
 SEC 1 : マンマチャオのこだわり
-------------------------------------------------------------------------------*/
#section1 {
	height:100%;
	background-image:url(../images/mmc_sec2_bg.jpg);
	background-position:-50% bottom;
	background-size:auto 100%;
	background-repeat:no-repeat;
	position:relative;
	min-height:680px;
}
#section1 .wrapper {
	width:60%;
	height:100%;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
}
#section1 ul {
	width:100%;
	height:100%;
	position:relative;
	list-style:none;
}
#section1 ul li {
	width:50%;
	height:50%;
	float:left;
	position:relative;
	overflow:hidden;
}
#section1 ul li.title {
	background-color:#d90000;
}
#section1 ul li.title div {
	background-color:rgba(0,0,0,0.0);
	height:90%;
}
#section1 ul li.title div p {
	font-size:200%;
	text-shadow:none;
	position:relative;
	top:40%;
}
#section1 ul li div {
	height:100%;
	background-color:rgba(0,0,0,0.7);
	-webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
	position:relative;
	z-index:1;
	/*cursor:pointer;*/
}

#section1 ul li div p {
	font-family:'bold';
	font-size:130%;
	line-height:120%;
	color:white;
	text-shadow:0 0 3px black;
	z-index:2;
	position:relative;
	top:30%;
}
#section1 ul li div p img {
	margin-top:5%;
	display:block;
}

#section1 ul li:after {
	position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
	background-size:auto 100%;
	background-position:center center;
}
#section1 ul li:hover:after {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
#section1 ul li:hover div {
	background-color:rgba(0,0,0,0.3);
}
#section1 ul li.title:hover div {
	background-color:rgba(0,0,0,0.0);
}
#section1 ul li:nth-child(2):after {
	background-image:url(../images/mmc_sec2_01.jpg);
}
#section1 ul li:nth-child(3):after {
	background-image:url(../images/mmc_sec2_02.jpg);
}
#section1 ul li:nth-child(4):after {
	background-image:url(../images/mmc_sec2_03.jpg);
}
@media screen and (max-width:999px) {
#section1 {
	background-position:left top;
	height:100%;
	background-image:none;
	position:relative;
	bottom:0;
}
#section1 .wrapper {
	width:100%;
	height:100%;
	position:absolute;
	bottom:0;
}
#section1 ul li div p {
	font-size:3vw;
}
#section1 ul li.title div p {
	font-size:4vw;
}
}


/*------------------------------------------------------------------------------
 SEC 2 : 主婦の味方
-------------------------------------------------------------------------------*/
#section2, 
#section10 {
	height:100%;
	min-height:680px;
	position:relative;
}
#section2 .title, 
#section10 .title {
	margin:20px 0;
	position:relative;
}
#section2 .title div, 
#section10 .title div {
	width:100%;
	position:relative;
	top:23%;
	padding:2px 0;
	border-bottom:1px solid #001966;
}
#section2 .title p, 
#section10 .title p {
	font-size:250%;
	font-family:'bold';
	color:#001966;
 	border-bottom:2px solid #001966;
}
#section2 ul, 
#section10 ul {
	list-style:none;
	width:100%;
	height:40%;
	position:absolute;
}
#section2 ul li, 
#section10 ul li {
	width:33.3%;
	height:100%;
	float:left;
	background-color:rgba(255,255,255,0.8);
}
#section2 ul li:nth-child(2n) {
	background:none;
}
#section2 ul li div {
	width:90%;
	height:80%;
	position:relative;
	top:10%;
	font-size:100%;
	color:#666;
	text-align:left;
}
#section2 ul li div p {
	font-family:'bold';
	font-size:150%;
	color:#001966;
	text-align:center;
}
#section2 ul li div img {
	display:block;
	width:30%;
	max-width:90px;
}
#section2 ul li div span {
	font-family:'bold';
	color:#d90000;
}
@media screen and (max-width:640px) {
#section2 .title, 
#section10 .title {
	height:15%;
}
#section2 .title p, 
#section10 .title p {
	font-size:5vw;
	padding-top:5%;
}
#section2 ul {
	height:85%;
}
#section2 ul li {
	font-size:3vw;
	width:50%;
	height:33.3%;
}
#section2 ul li:nth-child(3) {
	background:none;
}
#section2 ul li:nth-child(3n+1) {
	background-color:rgba(255,255,255,0.8);
}
}

/*------------------------------------------------------------------------------
 SEC 3 : サポートも充実
-------------------------------------------------------------------------------*/
#section10 ul {
	min-height:650px;
}
#section10 ul li {
	width:33.3%;
	height:100%;
	position:relative;
	overflow:hidden;
}
#section10 ul li:nth-child(1) {
	background-image:url(../images/mmc_sec3_01bg.png);
	background-size:100% auto;
}
#section10 ul li:nth-child(2) {
	background-image:url(http://www.amiche.co.jp/stockfoto/stockfoto_30350664_S.jpg);
	background-position:center 85%;
	background-size:100% auto;
	background-repeat:no-repeat;
	background-color:white;
}
#section10 ul li div {
	width:90%;
	padding:1%;
	margin:0 auto;
}
#section10 ul li:nth-child(1) div {
	color:white;
}
#section10 ul li div p {
	margin:5% auto;
	font-size:130%;
	font-family:'bold';
}
#section10 ul li p.small {
	font-size:90%;
	font-family:'normal';
}
#section10 ul li a {
	position:absolute;
	bottom:20%;
	left:0;
	right:0;
	background-color:white;
	color:#333;
	text-decoration:none;
}
#section10 ul li a:hover {
	background-color:rgba(255,255,255,0.7);
}
#section10 ul li img {
	width:50%;
	max-width:300px;
	margin-top:10%;
}

@media screen and (max-width:900px) {
#section10 ul li:nth-child(2) {
	background-image:url(http://www.amiche.co.jp/stockfoto/stockfoto_30350664_S.jpg);
	background-position:right 85%;
	background-size:100% auto;
	background-repeat:no-repeat;
	background-color:white;
}
#section2 ul li div p, 
#section10 ul li div p {
	font-size:2vw;
}
#section10 ul li div br {
	display:none;
}
}
@media screen and (max-width:640px) {
#section10 ul {
	height:80%;
}
#section10 ul li {
	width:100%;
	height:31.5%;
}
#section10 ul li:nth-child(2) {
	background-image:url(http://www.amiche.co.jp/stockfoto/stockfoto_30350664_S.jpg);
	background-position:right bottom;
	background-size:30% auto;
	background-repeat:no-repeat;
	background-color:white;
}
#section10 ul li div p, 
#section10 ul li div {
	text-align:left;
}
#section10 ul li a {
	position:absolute;
	bottom:2%;
	right:0;
	left:auto;
	font-size:3vw;
	background-color:rgba(255,255,255,0);
}
#section10 ul li div {
	font-size:3vw;
	line-height:120%;
}
#section10 ul li div p {
	top:3%;
	font-size:3.5vw;
}
#section10 ul li div br {
	display:inline;
}
#section10 ul li .small, 
#section10 #player {
	display:none;
}
#section10 ul li img {
	position:absolute;
	top:0;
	right:-30px;
	opacity:0.1;
	padding:0;
}

}

a.yellow {color:yellow;}
#player {
	position:relative;
	width:70%;
	height:40%;
}