@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;
  }

  /* トップページ
  ----------------------------------------------------*/

    #cafeaulait .insta {
		padding: 30px 0 0 0; }
		#cafeaulait .insta h4 {
			width: 435px;
			height: 86px;
			margin: 0 auto 36px auto; text-align: center; }
    
	#cafeaulait .anchor {
		width: 1000px;
		margin: 37px auto 0; }
		#cafeaulait .anchor:after {
			content: "";
			clear: both;
			display: block; }
		#cafeaulait .anchor li {
			display: block;
			width: 33.33%;
			float: left;
			background: url(../milkforbread/images/anchor_bg05.png) no-repeat left center; }
			#cafeaulait .anchor li a {
				display: block;
				width: 100%;
				height: 90px;
				background: no-repeat center;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden; }
#cafeaulait .anchor li:nth-of-type(1) a {
				background-image: url("../milkforbread/images/cafe_anchor_bg01.png"); }
			#cafeaulait .anchor li:nth-of-type(2) a {
				background-image: url(../milkforbread/images/cafe_anchor_bg02.png); }
			#cafeaulait .anchor li:nth-of-type(3) a {
				background-image: url(../milkforbread/images/cafe_anchor_bg03.png); }
			#cafeaulait .anchor li:nth-of-type(3) {
				background-image: url(../milkforbread/images/cafe_anchor_bg05.png), url(../milkforbread/images/cafe_anchor_bg05.png);
				background-position: left center, right center; }

	#cafeaulait #concept {
		margin: 90px 0 0;
		padding: 83px 0 100px;
		background: url(../milkforbread/images/cafe_concept_bg01.jpg) no-repeat center;
		background-size: cover; }
		#cafeaulait #concept h2 {
			width: 514px;
			margin: 0 auto 40px auto; }
			#cafeaulait #concept h2 > span {
				display: block;
				width: 226px;
				height: 43px;
				margin: 21px auto 0; }
			#cafeaulait #concept h2 > span span {
				display: block;
				width: 0;
				height: 100%;
				background: url(../milkforbread/images/cafe_concept_subttl01.png) no-repeat left center;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden;
				transition: width 0.8s; }
			#cafeaulait #concept.active h2 > span span {
				width: 100%; }
			.ie #cafeaulait #concept p:nth-of-type(3) {
				font-feature-settings: "palt"; }
		#cafeaulait #concept h3 {
            font-family: 'Noto Sans JP', sans-serif;
			 font-size: 2.1rem;
          
    font-weight: 600;
			letter-spacing: 0.025em;
			color: #fff;
			text-align: center; }
			#cafeaulait #concept h3:nth-of-type(2) {
				margin: 10px 0 30px 0;
				padding: 20px;
				background: url(../milkforbread/images/cafe_concept_bg02.png) no-repeat center bottom; }
			#cafeaulait #concept h3:nth-of-type(3) {
				margin: 0;
				padding: 10px;  line-height: 240%;}
		#cafeaulait #concept p {
             font-family: 'Noto Sans JP', sans-serif;
			font-size: 2rem;
			font-weight: 500;
			letter-spacing: 0.025em;
            line-height: 220%;
            margin-top: 30px;
			color: #fff;
			text-align: center; }
			#cafeaulait #concept p:nth-of-type(2) {
				margin: 30px 0 0 ;
				text-align: center; }



	#cafeaulait #features {
		padding: 86px 0 97px;  font-family: 'Noto Sans JP', sans-serif;}
		#cafeaulait #features h2 {
			width: 604px;
			margin: 0 auto 50px; }
			#cafeaulait #features h2 > span {
				display: block;
				width: 226px;
				height: 43px;
				margin: 12px auto 0; }
			#cafeaulait #features h2 > span span {
				display: block;
				width: 0;
				height: 100%;
				background: url(../milkforbread/images/cafe_features_subttl01.png) no-repeat left center;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden;
				transition: width 0.8s; }
		#cafeaulait #features h3 {
			width: 491px;
			margin: 0 auto 30px auto; }
#cafeaulait #features p {line-height: 240%; font-size: 1.6rem;}
		#cafeaulait #features .point {
			width: 800px;
			margin:40px auto 0 auto;}
			#cafeaulait #features .point:after {
				content: "";
				clear: both;
				display: block; }

			#cafeaulait #features .point .col_mark {
				width: 240px;
				margin:0;}
			#cafeaulait #features .point .col_txt {
				text-align:left;
				width: 560px;
				padding: 50px 0 0 0;
				margin:0;}
				#cafeaulait #features .point .col_txt p {
					margin: 0 0 10px 0;
					line-height:160%;
					text-align:left;}
			#cafeaulait #features .point .left {
				float:left;
				margin:0;}
				#cafeaulait #features .point .left h5 {
					font-size: 2.4rem;
					color:#00975e;
					letter-spacing: 0.05rem;
					padding: 0 0 30px 0;
					margin: 10px 0 20px 0; }
					#cafeaulait #features .point .left h5 span{
						padding: 0 0 8px 0;
						border-bottom: 6px solid #00975e;}
				#cafeaulait #features .point .left p {
					margin: 0 10px 10px 0;
					text-align:left;}
			#cafeaulait #features .point .right {
				float:right;
				margin:0;}
				#cafeaulait #features .point .right h5 {
					font-size: 2.4rem;
					color:#00975e;
					letter-spacing: 0.05rem;
					padding: 0 0 30px 10px;
					margin: 10px 0 20px 0; }
					#cafeaulait #features .point .right h5 span{
						padding: 0 0 8px 0;
						border-bottom: 6px solid #00975e;}
				#cafeaulait #features .point .right p {
					margin: 0 0 10px 10px;
					text-align:left;}

		#cafeaulait #features p {
			font-weight: bold;
			margin: 0 0 10px 0;
			text-align: center; }
		#cafeaulait #features p:nth-of-type(2) {
			width:730px;
			text-align:right;
			margin: 25px auto 0 auto; }
		#cafeaulait #features p:nth-of-type(3) {
			margin: 25px auto 0 auto; }
		#cafeaulait #features p:nth-of-type(4) {
			margin: 25px auto 0 auto;
			line-height:160%;}
		#cafeaulait #features.active h2 > span span {
			width: 100%; }


#cafeaulait #product {
    padding: 83px 0 85px;
    background: url(../milkforbread/images/bg_texture04_sp.png) repeat center top;
    position: relative; height: 1150px; }
    #cafeaulait #product:before {
      content: "";
      display: block;
      width: 319px;
      height: 317px;
      background: url(../milkforbread/images/cafe_product_bg02.png) no-repeat right center;
      position: absolute;
      right: 0;
      top: -97px; }

     #cafeaulait #product:after  {
      content: "";
      display: block;
      width: 247px;
      height: 343px;
      background: url(../milkforbread/images/cafe_shop_bg10.png) no-repeat left center;
      background-size: contain;
      position: absolute;
      left: 0px;
      top: 455px; }
    
    
    #cafeaulait #product h2 {
      width: 174px;
      margin: 0 auto 70px; }
      #cafeaulait #product h2 > span {
        display: block;
        width: 226px;
        height: 43px;
        margin: 12px auto 0 -26px; }
        #cafeaulait #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; }
	#cafeaulait #product.active h2 > span span {
			width: 100%; }
#cafeaulait #product .photo {position:absolute; top:210px; left:220px;}


   /* ***************************************************************** */
}
/** -------------------------------------------------------
 ** 02. SP layout
 ** ------------------------------------------------------- */
@media screen and (max-width: 1199px) {
  /* ***************************************************************** */
  /* Display
	----------------------------------------------------*/
  .cmn-pc {
    display: none !important;
  }


  /* トップページ
  ----------------------------------------------------*/
    	#cafeaulait .insta {
		padding: 30px 0 0 0;
	}
		#cafeaulait .insta h4 {
			width: 77.54%;
			margin: 0 auto 36px auto;text-align: center; max-width: 435px; }
    #cafeaulait .insta h4 img { width:100%; height: auto;}

    
    #cafeaulait .anchor {
		margin: 28px -15px 0; }
		#cafeaulait .anchor:after {
			content: "";
			clear: both;
			display: block; }
		#cafeaulait .anchor li {
			display: block;
			width: 33.33%;
			float: left;
			background: url(../milkforbread/images/cafe_anchor_bg05_sp.png) no-repeat left center;
			background-size: 1px auto; }
			#cafeaulait .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; }
			#cafeaulait .anchor li:nth-of-type(1) {
				background: none; }
			#cafeaulait .anchor li:nth-of-type(1) a {
				background-image: url(../milkforbread/images/cafe_anchor_bg01_sp.png); }
			#cafeaulait .anchor li:nth-of-type(2) a {
				background-image: url(../milkforbread/images/cafe_anchor_bg02_sp.png); }
			#cafeaulait .anchor li:nth-of-type(3) a {
				background-image: url(../milkforbread/images/cafe_anchor_bg03_sp.png); }
    
    
	#cafeaulait #concept {
		margin: 45px -15px 0;
		padding: 46px 15px 57px;
		background: url(../milkforbread/images/cafe_concept_bg01_sp.jpg) no-repeat center;
		background-size: cover; }
		#cafeaulait #concept h2 {
			width: 257px;
			margin: 0 auto 35px; }
    #cafeaulait #concept h2 img {width:100%; height: auto;}
			#cafeaulait #concept h2 > span {
				display: block;
				width: 154px;
				height: 30px;
				margin: 12px auto 0; }
			#cafeaulait #concept h2 > span span {
				display: block;
				width: 0;
				height: 100%;
				background: url(../milkforbread/images/cafe_concept_subttl01_sp.png) no-repeat left center;
				background-size: auto 100%;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden;
				transition: width 0.8s; }
		#cafeaulait #concept h3 {
			margin: 10px 0 10px 0;
			font-size: 1.6rem;
			font-weight: bold;
			letter-spacing: 0.025em;
			color: #fff;
			text-align: center; line-height: 240%; }
			#cafeaulait #concept h3:nth-of-type(2) {
				margin: 10px 0 20px 0;
				background: url(../milkforbread/images/cafe_concept_bg02_sp.png) no-repeat center bottom;
				background-size: auto 4px; }
		#cafeaulait #concept p {
			font-size: 1.2rem;
			font-weight: bold;
			letter-spacing: 0.025em;
            line-height: 240%;
			color: #fff;
			text-align: center; }
    
		#cafeaulait #concept.active h2 > span span {
			width: 100%; }
    
    #cafeaulait #features {
		padding: 56px 15px 62px; }
		#cafeaulait #features h2 {
			width: 310px;
			margin: 0 auto 20px; }
    #cafeaulait #features h2 img {width:100%; height: auto;}
    
			#cafeaulait #features h2 > span {
				display: block;
				width: 154px;
				height: 30px;
				margin: 12px auto 0; }
			#cafeaulait #features h2 > span span {
				display: block;
				width: 0;
				height: 100%;
				background: url(../milkforbread/images/cafe_features_subttl01_sp.png) no-repeat left center;
				background-size: auto 100%;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden;
				transition: width 0.8s; }
		#cafeaulait #features h3 {
			width: 318px;
			margin: 0 auto 20px; }
     #cafeaulait #features h3 img {width:100%; height: auto;}
		#cafeaulait #features h4 {
			width: 280px;
			margin: 20px auto 20px auto; }
    #cafeaulait #features h4 img {width:100%; height: auto;}
		#cafeaulait #features h5 {
			text-align:center;
			font-size: 2.1rem;
            line-height: 240%;
			color:#00975e;
			letter-spacing: 0.05rem;
			padding: 0 0 10px 0;
			margin: 10px auto 20px auto; }
			#cafeaulait #features h5 span{
				padding: 0 0 8px 0;
				border-bottom: 6px solid #00975e;}
		#cafeaulait #features p {
			font-weight: bold; font-size: 1.4rem; width:80%; margin: 0 auto;
			text-align: center; line-height: 240%; max-width: 608px; display: block;}
    #cafeaulait #features p img {width:100%; height: auto;}
		#cafeaulait #features.active h2 > span span {
		width: 100%; }

    
	#cafeaulait #product {
		padding: 83px 0 85px;
		background: url(../milkforbread/images/bg_texture04_sp.png) repeat center top;
		position: relative; }
    
    #cafeaulait #product:before {
			content: "";
			display: block;
			width: 96px;
			height: 158px;
			background: url(../milkforbread/images/cafe_product_bg02.png) no-repeat right center;
			background-size: contain;
			position: absolute;
			right: 0;
			top: -46px; }
    
		
		#cafeaulait #product h2 {
			width: 174px;
			margin: 0 auto 70px; }
			#cafeaulait #product h2 > span {
				display: block;
				width: 226px;
				height: 43px;
				margin: 12px auto 0 -26px; }
			#cafeaulait #product h2 > span span {
				display: block;
				width: 0;
				height: 100%;
				background: url(../milkforbread/images/cafe_product_subttl01.png) no-repeat left center;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden;
				transition: width 0.8s; }
			#cafeaulait #product.active h2 > span span {
			width: 100%; }

    
        #cafeaulait #product .photo {position:static;   width: 164px;
      margin: 10px auto 0;}
    #cafeaulait #product .photo img { width:100%; text-align: center;}

    
    



		#cafeaulait #product p {
			width: 295px;
			margin: 0 180px 0 0;
			position: absolute;
			right: 50%;
			top: 180px;
			z-index: 10; }
    
    
}