@charset "UTF-8";
/* CSS Document */
/*-----------------------------------------------------------
===  [ layout CSS ]  ====================================
------------------------------------------------------------*/
/* ***************************************************************************** */
/*

　目次

-------------------------------------------------------------------------------

　01. PC layout
　02. SP layout

*/
/* ***************************************************************************** */
/** -------------------------------------------------------
 ** 01. PC layout
 ** ------------------------------------------------------- */
@media print, screen and (min-width: 1200px) {
  /* ***************************************************************** */
  /* Display
	----------------------------------------------------*/
  .cmn-sp {
    display: none !important;
  }
 
  /* トップページ
  ----------------------------------------------------*/
    body {   background-color: #ffffff;
    font-family: "Zen Kaku Gothic New", sans-serif;
      text-align: cenetr;}
        
   .mv {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    height: auto;
    margin: 30px auto 0px auto;
    background-color: #dee6f3;
    overflow: hidden;
  }
   .mv img {
    width: 100%;
    display: block;
  }
    
      .bnrOnline {
		padding: 20px 0 30px 0;
		background: url(../milkforbread/images/bg_milkforbread_nav.png) repeat center top;
		position: relative; }

			.bnrOnline .buttons{
				width:934px;
				height:94px;
				margin:0 auto 0 auto;
			}
			.bnrOnline .buttons p{
				display: block;
				width:208px;
				height:95px;
				vertical-align: bottom;
				float:left;}

			.bnrOnline .buttons p:nth-child(1) {
				margin: 0 10px 0 0;}

			 .bnrOnline .buttons p:nth-child(2) {
				margin: 0 10px 0 0;}

			.bnrOnline .buttons p:nth-child(3) {
				margin: 0 30px 0 0;}

			 .bnrOnline .buttons p:nth-child(4) {
				width: 250px;
				height: 63px;
				margin: 32px 0 0 0;}
	#milk .insta {
		padding: 30px 0 0 0; }
		#milk .insta h4 {
			width: 435px;
			height: 86px;
			margin: 0 auto 36px auto; text-align: center; }
  #milk .anchor {
    width: 910px;
    text-align: center;
    margin: 37px auto 0 auto;
  }
  #milk .anchor:after {
    content: "";
    clear: both;
    display: block;
  }
  #milk .anchor li {
    width: 50%;
    float: left;
    display: block;
    background: url("../milkforbread/images/anchor_bg05.png") no-repeat left center;
  }
  #milk .anchor li a {
    display: block;
    width: 100%;
    height: 90px;
    background: no-repeat center;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
  }
  #milk .anchor li:nth-of-type(1) a {
    background-image: url(../milkforbread/images/anchor_bg01.png);
  }
  #milk .anchor li:nth-of-type(2) a {
    background-image: url(../milkforbread/images/anchor_bg03.png);
  }
  #milk .anchor li:nth-of-type(2) {
    background-image: url(../milkforbread/images/anchor_bg05.png), url(../milkforbread/images/anchor_bg05.png);
    background-position: left center, right center;
  }
  #milk #concept {
    margin: 40px 0 0 0;
    padding: 83px 0 100px;
    background: url(../milkforbread/images/concept_bg01.jpg) no-repeat center;
    background-size: cover;
  }
  #milk #concept h2 {
    width: 399px;
    margin: 0 auto 20px;
  }
  #milk #concept h2 > span {
    display: block;
    width: 226px;
    height: 43px;
    margin: 21px auto 0;
  }
  #milk #concept h2 > span span {
    display: block;
    width: 0;
    height: 100%;
    background: url(../milkforbread/images/concept_subttl01.png) no-repeat left center;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.8s;
  }
  #milk #concept p {
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    color: #fff;
    text-align: center;
  }
  #milk #concept img {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  #milk #concept p:nth-of-type(2) {
    margin: 50px 0 0;
  }
  /*      #milk #concept p:nth-of-type(3) {
        margin: 30px 0 0;
        padding: 5px;background-color:#00ff00; 
        background: url(../milkforbread/images/concept_bg02.png) no-repeat center bottom;  background-color:#ff2233;}*/
  #milk #concept .dakara {
    margin: 30px 0 0;
    line-height: 5rem;
    background: url(../milkforbread/images/concept_bg02.png) no-repeat center bottom;
  }
  #milk #concept.active h2 > span span {
    width: 100%;
  }
  #milk #product {
    padding: 83px 0 85px;
    background: url(../milkforbread/images/bg_milkforbread_nav.png) repeat center top;
    position: relative;
    height: 1200px;

  }
  #milk #product:before {
    content: "";
    display: block;
    width: 308px;
    height: 265px;
    background: url(../milkforbread/images/product_bg02.png) no-repeat right center;
    position: absolute;
    right: 0;
    top: -97px;
    overflow: hidden;
  }
  #milk #product h2 {
    width: 174px;
    margin: 0 auto 70px;
  }
  #milk #product h2 > span {
    display: block;
    width: 226px;
    height: 43px;
    margin: 12px auto 0 -26px;
  }
  #milk #product h2 > span span {
    display: block;
    width: 0;
    height: 100%;
    background: url(../milkforbread/images/product_subttl01.png) no-repeat left center;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.8s;
  }
  #milk #product.active h2 > span span {
    width: 100%;
  }
  #milk #product .photo {
    position: absolute;
    top: 210px;
    left: 100px;
  }
  #product .t200 table {
    vertical-align: top;
    position: absolute;
    top: 250px;
    left: 560px;
    font-size: 1.6rem;
     
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
  }
    #product .t200 table td,#product .t500 table td { padding: 15px; font-weight: 400;}
    #product .t200 table  td span,#product .t500 table  td span { font-size:1.2rem;}
  #product .t500 table {
    vertical-align: top;
    position: absolute;
    top: 780px;
    left: 560px;
    font-size: 1.6rem;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
  }
 #product table th {
    width: 12.5em;
    height: 2.5rem;
    padding: 0 1em 0 0;
    font-weight: 600;
    background: url(../milkforbread/images/product_bg01.png) no-repeat right 30px top 1.2em;
  }
  /* ***************************************************************** */
}
/** -------------------------------------------------------
 ** 02. SP layout
 ** ------------------------------------------------------- */
@media screen and (max-width: 1199px) {
  /* ***************************************************************** */
  /* Display
	----------------------------------------------------*/
  .cmn-pc {
    display: none !important;
  }


  /* トップページ
  ----------------------------------------------------*/
 body {
    background-color: #ffffff;
    /*font-family: 'Noto Sans JP', sans-serif;*/
    width: 100%;
    height: auto;
    margin: 0px auto 0px auto;
     overflow: hidden;
  }
    

    
    
 .nav-button span {
    background-color: #009256;
  }
 .mv {
    width: 100%;
    height: auto;
    margin: 0px auto 0px auto;
    overflow: hidden;
     padding-top:85px;
  }
 .mv img {
    width: 100%;
     display: block;
  }
    
  
    
    .bnrOnline {
		margin: 0 -15px 0 -15px;
		height:auto;
		overflow:hidden;
		background: url(../milkforbread/images/bg_milkforbread_nav.png) repeat center;
		padding: 15px 15px 10px 15px;
		position: relative; }

		.bnrOnline .buttons{
			width:96%;
			margin:0 auto 0 auto;
		}
		 .bnrOnline .buttons p{
			display: block;
			width:32%;
			vertical-align: bottom;
            text-align: center;
			float:left;
        }

		 .bnrOnline .buttons p:nth-child(1) {
			margin: 0 2% 0 0;}

		 .bnrOnline .buttons p:nth-child(2) {
			margin: 0 2% 0 0;}

		.bnrOnline .buttons p:nth-child(3) {
			clear: right;
			margin: 0;}

		 .bnrOnline .buttons p:nth-child(4) {
			clear:both;
            	/*width: 60%;
			margin: 50px 20% 50px 20%;*/
		width: 77.54%;
			margin: 20px 11.23% 20px 11.23%;}
    .bnrOnline .buttons p img { width:100%; height: auto;}
    
  
  	#milk .insta {
		padding: 30px 0 0 0;
	}
		#milk .insta h4 {
			width: 77.54%;
			margin: 0 auto 36px auto;text-align: center; max-width: 435px; }
    #milk .insta h4 img { width:100%; height: auto;}

  #milk .anchor {
    margin: 28px auto -15px auto;
  }
  #milk .anchor:after {
    content: "";
    clear: both;
    display: block;
  }
  #milk .anchor li {
    display: block;
    width: 50%;
    float: left;
    background: url(../milkforbread/images/anchor_bg05_sp.png) no-repeat left center;
    background-size: 1px auto;
  }
  #milk .anchor li a {
    display: block;
    width: 100%;
    height: 73px;
    background: no-repeat center;
    background-size: auto 100%;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
  }
  #milk .anchor li:nth-of-type(1) {
    background: none;
  }
  #milk .anchor li:nth-of-type(1) a {
    background-image: url(../milkforbread/images/anchor_bg01_sp.png);
  }
  #milk .anchor li:nth-of-type(2) a {
    background-image: url(../milkforbread/images/anchor_bg03_sp.png);
  }
    
    #milk #concept {
        width:100%;
    margin: 45px -15px 0;
    padding: 46px 15px 57px;
    background: url(../milkforbread/images/concept_bg01_sp.jpg) no-repeat center;
    background-size: cover; }
    #milk #concept h2 {
      width: 257px;
      margin: 0 auto 35px; }
    #milk #concept h2 img {width:100%;height: auto;}
      #milk #concept h2 > span {
        display: block;
        width: 154px;
        height: 30px;
        margin: 12px auto 0; }
        #milk #concept h2 > span span {
          display: block;
          width: 0;
          height: 100%;
          background: url(../milkforbread/images/concept_subttl01_sp.png) no-repeat left center;
          background-size: auto 100%;
          text-indent: 150%;
          white-space: nowrap;
          overflow: hidden;
          transition: width 0.8s; }
    #milk #concept p {
      font-size: 1.0rem;
      font-weight: bold;
      letter-spacing: 0.025em;
      color: #fff;
      text-align: center; }
    #milk #concept p img {width:100%; height: auto;}
      #milk #concept p:nth-of-type(2) {
        margin: 25px 0 0; }
      #milk #concept p:nth-of-type(3) {
        margin: 45px 0 0;
        padding: 5px;
          height:1.2rem;
        background: url(../milkforbread/images/concept_bg02_sp.png) no-repeat center bottom;

        background-size: auto 4px; }
    #milk #concept.active h2 > span span {
      width: 100%; }
    
  #milk #concept.active h2 > span span {
    width: 100%;
  }
  #milk #product {
    margin: 0 -15px;
    padding: 51px 15px 19px;
    background: url(../milkforbread/images/bg_milkforbread_nav.png) repeat center top;
    background-size: 375px auto;
    position: relative;
  }
  #milk #product:before {
    content: "";
    display: block;
    width: 96px;
    height: 146px;
    background: url(../milkforbread/images/product_bg02_sp.png) no-repeat right center;
    background-size: contain;
    position: absolute;
    right: 0;
    top: -46px;
  }
  #milk #product h2 {
    width: 118px;
    margin: 0 auto 45px;
  }
  #milk #product h2 img {
    width: 100%;
    height: auto;
  }
  #milk #product h2 > span {
    display: block;
    width: 154px;
    height: 30px;
    margin: 12px auto 0 -18px;
  }
  #milk #product h2 > span span {
    display: block;
    width: 0;
    height: 100%;
    background: url(../milkforbread/images/product_subttl01_sp.png) no-repeat left center;
    background-size: auto 100%;
    text-indent: 150%;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.8s;
  }
  #milk #product .photo {
    position: static;
    width: 164px;
    margin: 10px auto 0;
  }
  #milk #product .photo img {
    width: 100%;
    text-align: center;
  }
  #product .t200 table {
    width: 80%;
    margin-left: 10%;
    position: static;
    font-size: 1.4rem;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
    line-height: 2.4rem;
    vertical-align: top;
  }
  #product .t500 table {
      margin:50px auto;
    width: 80%;
    margin-left: 10%;
    position: static;
    font-size: 1.4rem;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: left;
    line-height: 2.4rem;
    vertical-align: top;
  }
 #product table th {
    width: 12.5em;
    height: 2.5rem;
    padding: 0 1em 0 0;
    font-weight: 600;vertical-align: top;
    background: url(../milkforbread/images/product_bg01.png) no-repeat right 30px top 1.2em;
  }
  #milk #product p {
    width: 164px;
    margin: 10px auto 0;
  }
  #milk #product.active h2 > span span {
    width: 100%;
  }
}