@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;
  }
 
  /* トップページ
  ----------------------------------------------------*/

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

	#milktea #concept {
		overflow:hidden;
		width:100%;
		max-width:1200px;
		height:673px;
		margin: 50px 0 0;
		padding: 57px 0 60px 0;
		background: url(../milkforbread/images/mtea_concept_bg_pc.jpg) no-repeat left top;
		background-size: cover; }
		#milktea #concept h2 {
			width: 530px;
			margin: 0 auto 40px auto; }
			#milktea #concept h2 > span {
				display: block;
				width: 215px;
				height: 41px;
				margin: 21px auto 0 auto; }
			#milktea #concept h2 > span span {
				display: block;
				width: 0;
				height: 100%;
				background: url(../milkforbread/images/mtea_concept_subttl_pc.png) no-repeat left center;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden;
				transition: width 0.8s; }
			#milktea #concept.active h2 > span span {
				width: 100%; }
			.ie #milktea #concept p:nth-of-type(3) {
				font-feature-settings: "palt"; }
		#milktea #concept h3 {
             font-family: 'Noto Sans JP', sans-serif; 
			font-size: 2.1rem;
			font-weight: bold;
			letter-spacing: 0.025em;
			line-height:240%;
			color: #fff;
			text-align: center; }
			#milktea #concept h3:nth-of-type(2) {
				margin: 20px 0 30px 0;
				padding: 20px 0 0 0;
				background: url(../milkforbread/images/mtea_concept_bg02.png) no-repeat center top; }
		#milktea #concept p {
             font-family: 'Noto Sans JP', sans-serif; text-align: left;
			font-size: 1.8rem;
            line-height: 200%;
			font-weight: bold;
			
			color: #fff;
			text-align: center; }
			#milktea #concept p:nth-of-type(2) {
				margin: 30px 0 0 0;
				text-align: center; }


#milktea #features {
		padding: 86px 0 97px; font-family: 'Noto Sans JP', sans-serif;}
		#milktea #features h2 {
			width: 604px;
			margin: 0 auto 50px; }
			#milktea #features h2 > span {
				display: block;
				width: 226px;
				height: 43px;
				margin: 12px auto 0; }
			#milktea #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; }
		#milktea #features h3 {
			width: 491px;
			margin: 0 auto 30px auto; }
#milktea #features p {line-height: 240%; font-size: 1.6rem;}
		#milktea #features .point {
			width: 800px;
			margin:40px auto 0 auto;}
			#milktea #features .point:after {
				content: "";
				clear: both;
				display: block; }

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

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


#milktea #product {
    padding: 83px 0 85px;
    background: url(../milkforbread/images/bg_texture04_sp.png) repeat center top;
    position: relative; height: 1150px; }
    #milktea #product:before {
      content: "";
      display: block;
  			width: 307px;
			height: 305px;
			background: url(../milkforbread/images/mtea_product_img01_pc.png) no-repeat right center;
      position: absolute;
      right: 0;
      top: -97px; }
    #milktea #product h2 {
      width: 174px;
      margin: 0 auto 70px; }
      #milktea #product h2 > span {
        display: block;
        width: 226px;
        height: 43px;
        margin: 12px auto 0 -26px; }
        #milktea #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; }
	#milktea #product.active h2 > span span {
			width: 100%; }

#milktea #product .photo {position:absolute; top:190px; left:180px;}


#milktea #shop {
		padding: 20px 0 40px 0;
		position: relative; }
		#milktea #shop:before {
			content: "";
			display: block;
			width: 302px;
			height: 328px;
			background: url(../milkforbread/images/mtea_product_img02_pc.png) no-repeat left center;
			position: absolute;
			left: -80px;
			top: -761px; }
		#milktea #shop > p {
			width: 1000px;
			margin: 35px auto 0;
			font-size: 1.4rem;
			line-height: 1.5;
			text-align: center; }
    
/* ***************************************************************** */
}
/** -------------------------------------------------------
 ** 02. SP layout
 ** ------------------------------------------------------- */
@media screen and (max-width: 1199px) {
  /* ***************************************************************** */
  /* Display
	----------------------------------------------------*/
  .cmn-pc {
    display: none !important;
  }


  /* トップページ
  ----------------------------------------------------*/
    	#milktea .insta {
		padding: 30px 0 0 0;
	}
		#milktea .insta h4 {
			width: 77.54%;
			margin: 0 auto 36px auto;text-align: center; max-width: 435px; }
    #milktea .insta h4 img { width:100%; height: auto;}
    
    #milktea .anchor {
		margin: 28px -15px 0 auto; }
		#milktea .anchor:after {
			content: "";
			clear: both;
			display: block; }
		#milktea .anchor li {
			display: block;
			width: 33%;
			float: left;
			background: url(../milkforbread/images/mtea_anchor_line_sp.png) no-repeat left center;
			background-size: 1px auto; }
			#milktea .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; }
			#milktea .anchor li:nth-of-type(1) {
				background: none; }
			#milktea .anchor li:nth-of-type(1) a {
				background-image: url(../milkforbread/images/mtea_anchor_01_sp.png); }
			#milktea .anchor li:nth-of-type(2) a {
				background-image: url(../milkforbread/images/mtea_anchor_02_sp.png); }
			#milktea .anchor li:nth-of-type(3) a {
				background-image: url(../milkforbread/images/mtea_anchor_03_sp.png); }
                
	#milktea #concept {
		margin: 45px -15px 0;
		padding: 46px 15px 57px;
		background: url(../milkforbread/images/mtea_concept_bg_sp.jpg) no-repeat center;
		background-size: cover; }
		#milktea #concept h2 {
			width: 257px;
			margin: 0 auto 35px; }
			#milktea #concept h2 > span {
				display: block;
				width: 154px;
				height: 30px;
				margin: 12px auto 0; }
    #milktea #concept h2 img { width:100%; height: auto;}
    
			#milktea #concept h2 > span span {
				display: block;
				width: 0;
				height: 100%;
				background: url(../milkforbread/images/mtea_concept_subttl_sp.png) no-repeat left center;
				background-size: auto 100%;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden;
				transition: width 0.8s; }
		#milktea #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%;}
			#milktea #concept h3:nth-of-type(2) {
				margin: 10px 0 20px 0;
				padding-top:1rem;
				background: url(../milkforbread/images/mtea_concept_bg02_sp.png) no-repeat center top;
				background-size: auto 4px; }
		#milktea #concept p {
			font-size: 1.2rem;
			font-weight: bold;
			letter-spacing: 0.025em;
			color: #fff;line-height: 240%;
			text-align: center; }
		#milktea #concept.active h2 > span span {
			width: 100%; }

    

    
    
	#milktea #features {
		padding: 56px 15px 62px;
		text-align:center;}
		#milktea #features h2 {
			/*width: 96%;
			margin: 0 auto 20px; }*/
            width: 96%;
    max-width: 604px;
			margin: 0 auto 50px; }
       #milktea #features h2 img {width:100%; height: auto;}
			#milktea #features h2 > span {
				display: block;
				width: 154px;
				height: 30px;
				margin: 12px auto 0; }

			#milktea #features h2 > span span {
				display: block;
				width: 0;
				height: 100%;
				background: url(../milkforbread/images/mtea_features_subttl_sp.png) no-repeat left center;
				background-size: auto 100%;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden;
				transition: width 0.8s; }
		#milktea #features h3 {
			max-width:610px; width:88%;
			margin: 0 auto 20px; }
    #milktea #features h3 img { width:100%; height:auto;}

		#milktea #features h4 {
			/*width: 280px;*/
            width:60%;
			margin: 20px auto 20px auto; }
#milktea #features h4 img { width:100%; height:auto;}
		#milktea #features h5 {
			width: 100%;
			margin: 0 auto 20px; }
    #milktea #features h5 img { width:100%; height:auto;}
		#milktea #features p {
            font-size: 1.6rem;
			letter-spacing:0px;
			font-weight: 500;
			text-align: center;
			padding-bottom:1.5rem;line-height: 200%; }
		#milktea #features.active h2 > span span {
		width: 100%; }

		#milktea #features .photo img {
			padding-bottom:20px;
			}


	#milktea #product {
		margin: 0 -15px;
		padding: 51px 15px 19px;
		background: url(../milkforbread/images/bg_texture04_sp.png) repeat center top;
		background-size: 375px auto;
		position: relative; }
		#milktea #product:before {
			content: "";
			display: block;
			width: 114px;
			height: 158px;
			background: url(../milkforbread/images/mtea_product_img01_sp.png) no-repeat right center;
			background-size: contain;
			position: absolute;
			right: 0;
			top: -46px; }
		#milktea #product h2 {
			width: 118px;
			margin: 0 auto 45px; }
			#milktea #product h2 > span {
				display: block;
				width: 154px;
				height: 30px;
				margin: 12px auto 0 -18px; }
			#milktea #product h2 > span span {
				display: block;
				width: 0;
				height: 100%;
				background: url(../milkforbread/images/mtea_product_subttl01_sp.png) no-repeat left center;
				background-size: auto 100%;
				text-indent: 150%;
				white-space: nowrap;
				overflow: hidden;
				transition: width 0.8s; }



		#milktea #product dl {
			padding: 0 5.22%; }
			#milktea #product dl dt {
				width: 7.77em;
				padding: 0 2.42em 0 0;
				margin: 10px 0 0;
				font-size: 1.2rem;
				font-weight: bold;
				letter-spacing: 0.05em;
				background: url(../milkforbread/images/mtea_product_bg01_sp.png) no-repeat right 11px top 0.8em;
				background-size: 20px auto; }
				#home #product dl dt:first-child {
					margin-top: 0; }
				#home #product dl dd {
					border:1px solid #000;
					margin: -1.9em 0 0 7.77em;
					font-size: 1.2rem; }
		#home #product ul {
			margin: 15px auto 0;
			padding: 0 5.22%; }
			#home #product ul li {
				font-size: 1.1rem;
				line-height: 1.5;
				text-indent: -1em;
				padding-left: 1em; }
		#milktea #product p {
			width: 164px;
			margin: 10px auto 0; }
		#milktea #product p {
			width: 164px;
			margin: 10px auto 0; }
		#milktea #product.active h2 > span span {
			width: 100%; }

	#milktea #shop {
		padding: 50px 0 38px;
		position: relative; }
		#milktea #shop:before {
			content: "";
			display: block;
			width: 144px;
			height: 165px;
			background: url(../milkforbread/images/mtea_product_img02_sp.png) no-repeat left center;
			background-size: contain;
			position: absolute;
			left: -15px;
			top: -120px; }

		#milktea #shop.active h2 > span span {
			width: 100%; }
			#milktea #shop > p {
				margin: 30px 0 0;
				line-height: 1.5; }
    
      #milktea #product .photo {position:static;   width: 164px;
      margin: 10px auto 0;}
    #milktea #product .photo img { width:100%; text-align: center;}



}