@charset "UTF-8";
/*-----------------------------------------------------------
===  [ layout CSS ]  ====================================
------------------------------------------------------------*/
/** -------------------------------------------------------
 ** 01. PC layout
 ** ------------------------------------------------------- */
@media print, screen and (min-width: 1200px) {
  /* ***************************************************************** */
  /* Display
	----------------------------------------------------*/
  .cmn-sp {
    display: none !important;
  }

  /* トップページ
  ----------------------------------------------------*/
    body {   background-color: #ffffff;
      text-align: cenetr;}
    
    #pn-butter  .mv {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    height: auto;
    margin: 30px auto 0px auto;
    overflow: hidden;
          position: relative;
          min-height: 720px; 
  }
  #pn-butter .mv .online { position: absolute; top:554px; left:50%;transform: translateX(-50%); }
      #dm-butter .mv .online { position: absolute; top:654px; left:50%;transform: translateX(-50%); }
      #pn-butter .mv .butter { position: absolute; top:655px; right:0%; width:424px; height:58px;}
     #pn-butter .mv .butter  img {width:100%;height:auto;}
    
  #dm-butter  .mv {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    height: auto;
    margin: 30px auto 0px auto;
    overflow: hidden;
  }
    #dm-butter  .mv .butter { margin-top:15px; float: right;width:362px; height:58px;}
#dm-butter .mv .butter img {width:100%;height:auto;}

	#pn-butter #concept,#dm-butter #concept {
		width: 1120px;
		padding: 0;
		position:relative;
		margin: 0px auto 0 auto;}
		#pn-butter #concept:after,#dm-butter #concept:after {
			content: "";
			display: block;
			width: 1px;
			height: 200px;}
		#pn-butter #concept h1,#dm-butter #concept h1 {
			width: 213px;
			padding:40px 0 0 0;
			margin: 0px auto 40px auto; }

		#pn-butter #concept h2,#dm-butter #concept h2 {
			font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #009256;
			font-size: 2.4rem;
			letter-spacing: 0.025em;
			text-align: center;
			width: 600px;
			line-height:160%;
			margin: 0px auto 40px auto; }

		#pn-butter #concept p,#dm-butter #concept p{
			text-align:left;
			width: 640px;
			margin: 0 auto 0 0;
			padding: 0 20px 0 20px;
			 font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
			line-height:180%;
            font-size: 1.8rem;
			letter-spacing: 0.025em;
			color: #231815 !important;
			}
			#pn-butter #concept .dimg {
				width: 460px;
				margin: 0 0 0 -4px;
				position: absolute;
				left: 700px;
				top: 240px;
				z-index: 100;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; }
    
    	#dm-butter #concept .dimg {
				width: 460px;
				margin:20px 0 0 -4px;
				position: absolute;
				left: 700px;
				top: 330px;
				z-index: 100;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; }
    
			#pn-butter #concept .dimg.active,#dm-butter #concept .dimg.active {
				margin-left: -50px;
				opacity: 1; }

		#pn-butter #concept .dimg img,#dm-butter #concept .dimg img {
			float: right;
			width: 460px;
			height: 374px;
			margin: 0;
			}

	/* 区切り線のアニメーション */
	.deviderWP {
		display:table;
		width: 864px;
		height: 80px;
		margin: 0px auto 0px auto;
        text-align: cenetr;
	}
	.devider {
		display:block;
		position:absolute;
		z-index: 1;
		width: 864px;
		height:79px;
		margin:0 auto 0 auto;
		overflow: hidden;
	}

	.img-animation {
		animation: img-opacity 1.5s cubic-bezier(.4, 0, .2, 1);
		overflow: hidden;
		position: relative;}

	.img-animation:before {
		animation: img-animation 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
		background: #fff;
		bottom: 0;
		content: '';
		left: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;}

    @keyframes img-opacity {0% {opacity: 0;}}
		@keyframes img-animation {100% {transform: translateX(100%);}}

	
	#pn-butter #ambassadors2021 {
		position:relative;
		width: 1126px;
		padding: 0;
		margin: 30px auto 0px auto;
		top:0;
		left:0; text-align: center;
     font-family: 'Noto Serif JP', serif;
			font-weight: 500;}
		#pn-butter #ambassadors2021:after {
			content: "";
			display: block;
			width: 1px;
			height: 50px;}

		#pn-butter #ambassadors2021 h1 {
			width: 516px;
			height: 70px;
			margin: 0px auto 20px auto; }
		#pn-butter #ambassadors2021 h2 {
			font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #009256;
			font-size: 2.4rem;
			letter-spacing: 0.025em;
			text-align: center;
			margin: 0px auto 20px auto; }

		#pn-butter #ambassadors2021 h3 {
			position: relative;
			font-family: 'Noto Serif JP', serif;
			font-weight: 500;
            
			color: #000;
			font-size: 20px;
			letter-spacing: 0.025em;
			text-align: center;
			width: 989px;
			line-height:160%;
			margin: 70px auto 90px auto; }
			#pn-butter #ambassadors2021 h3:before {
				content: "";
				display: block;
				width: 989px;
				height: 28px;
				background: url(../butter/images/pc_amba_line_top.png) no-repeat;
				position: absolute;
				right: 0px;
				top: -50px;
				z-index:50;}
			#pn-butter #ambassadors2021 h3:after {
				content: "";
				display: block;
				width: 989px;
				height: 28px;
				background: url(../butter/images/pc_amba_line_bottom.png) no-repeat;
				position: absolute;
				right: 0px;
				bottom: -40px;
				z-index:50;}

		#pn-butter #ambassadors2021 .photo {
			width:1009px;
			height:415px;
			margin: 0 auto 0 auto;
			padding:0;
		}
		#pn-butter #ambassadors2021 .photo img{
			display:block;
			padding-bottom:10px;
		}

		#pn-butter #ambassadors2021 .photo .item{
			position: relative;
			z-index: 20;
			opacity:0;
			transition: opacity 1.2s; }
			#pn-butter #ambassadors2021 .photo .item.active{
				opacity: 1; }

		#pn-butter #ambassadors2021 .photo .left{
			width: 289px;
			padding:0;
			margin:0 10px 0 0;
			float:left;
		}
		#pn-butter #ambassadors2021 .photo .mid{
			width: 411px;
			padding:0;
			margin:0 10px 0 0;
			float:left;
		}
		#pn-butter #ambassadors2021 .photo .right{	
			width: 289px;
			padding:0;
			margin:0;
			float:left;
		}

		#pn-butter #ambassadors2021 .list{
			display:block;
			width:1024px;
			margin:60px auto 80px auto;
			padding:0;
			text-align:center;
           
		}
		#pn-butter #ambassadors2021 .list .head{
			width:1024px;
			height:101px;
			background: url(../butter/images/pc_amba_frame_top.jpg) no-repeat top center;
			background-size:contain;
		}
		#pn-butter #ambassadors2021 .list .right{
			width:99px;
			height:auto;
			background: url(../butter/images/pc_amba_frame_right.jpg) repeat-y;
			background-size:contain;
		}
		#pn-butter #ambassadors2021 .list .bottom{
			width:1024px;
			height:101px;
			background: url(../butter/images/pc_amba_frame_bottom.jpg) no-repeat;
			background-size:contain;
		}
		#pn-butter #ambassadors2021 .list .left{
			width:99px;
			height:auto;
			background: url(../butter/images/pc_amba_frame_left.jpg) repeat-y top left;
			background-size:contain;
		}
		#pn-butter #ambassadors2021 .list .main{
			width:826px;
			background-color:#ffffff;
			padding:40px 0;
		}
		#pn-butter #ambassadors2021 .list .main h1{
			width:745px;
			height:218px;
			margin:0 auto 40px auto;
			padding:0;
		}
		#pn-butter #ambassadors2021 .list .main p{
			width:745px;
			font-family: 'Noto Sans JP', sans-serif;
			font-weight:500;
			margin: 20px auto 0 auto;
			font-size:1.8rem;
            line-height: 240%;
		}
		#pn-butter #ambassadors2021 .list .main .cta{
			width:675px;
			height:108px;
			margin: 20px auto 0 auto;
		}

	#pn-butter #features,#dm-butter #features  {
		position:relative;
		width: 1122px;
		padding: 0;
		margin: 30px auto 0px auto;
		top:0;
		left:0;
         font-family: 'Noto Sans JP', sans-serif;
			font-weight: 500;
		}
    
    
		#pn-butter #features:before {
			content: "";
			display: block;
			width: 231px;
			height: 163px;
			background: url(../butter/images/pc_knife_i.png) no-repeat;
			position: absolute;
			right: 50px;
			top: -180px;
			z-index:50;}
		#pn-butter #features:after {
			content: "";
			display: block;
			width: 1px;
			height: 100px;}
    
    		#dm-butter #features:before {
			content: "";
			display: block;
			width: 182px;
			height: 261px;
			background: url(../butter/images/dm-butter/pc_whisk_i.png) no-repeat;
			position: absolute;
			left: 50px;
			top: -200px;
			z-index:50;
              
    }
		#dm-butter #features:after {
			content: "";
			display: block;
			width: 1px;
			height: 200px;}

		#pn-butter #features h1,#dm-butter #features h1 {
			width: 239px;
			height: 65px;
			margin: 0px auto 40px auto; }

		#pn-butter #features h2,#dm-butter #features h2 {
			font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #009256;
			font-size: 2.4rem;
			letter-spacing: 0.025em;
			text-align: center;

			width: 600px;
			margin: 0px auto 20px auto; }
		#pn-butter #features h3,#dm-butter #features h3 {
			width: 491px;
			margin: 0 auto 30px auto; }

		#pn-butter #features .point,#dm-butter #features .point {
			border:1px solid #fff;
			position:relative;
			width: 1120px;
			margin:40px 0 40px 0;}

			#pn-butter #features .point .mark,#dm-butter #features .point .mark {
				position:absolute; top:0; left:0; z-index: 4;
			}
			#pn-butter #features .point .dimg1 {
				width: 375px;
				height: 400px;
				margin: 0 0 0 -4px;
				position: absolute;
				left: 800px;
				top: 0px;
				z-index: 100;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; }
			#pn-butter #features .point .dimg1.active {
				margin-left: -50px;
				opacity: 1; }
			#pn-butter #features .point .dimg2 {
				width: 375px;
				height: 400px;
				margin: 0 0 0 -4px;
				position: absolute;
				left: 800px;
				top: 50px;
				z-index: 100;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; }
			#pn-butter #features .point .dimg2.active {
				margin-left: -50px;
				opacity: 1; }
			#pn-butter #features .point .dimg3 {
				width: 375px;
				height: 400px;
				margin: 0 0 0 -4px;
				position: absolute;
				left: 800px;
				top: 130px;
				z-index: 100;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; }
			#pn-butter #features .point .dimg3.active {
				margin-left: -50px;
				opacity: 1; }
    

			#dm-butter #features .point .dimg1 {
				width: 425px;
				height: 430px;
				margin: 0 0 0 -4px;
				position: absolute;
				left: 800px;
				top: 0px;
				z-index: 100;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; }
			#dm-butter #features .point .dimg1.active {
				margin-left: -50px;
				opacity: 1; }
			#dm-butter #features .point .dimg2 {
				width: 425px;
				height: 430px;
				margin: 0 0 0 -4px;
				position: absolute;
				left: 800px;
				top: 30px;
				z-index: 100;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; }
			#dm-butter #features .point .dimg2.active {
				margin-left: -50px;
				opacity: 1; }
    

			.point table {
				width:700px;
				margin:80px 0px 40px 75px;
				border: 2px solid #019257;
				border-collapse:collapse;}
				.point th {
					font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			font-size: 2rem;

					color: #ffffff;

					line-height:160%;
					width: 700px;
					background-color: #019257;
					padding: 32px 10px 32px 120px;
					border: 1px solid #019257;
					text-align:left;}
				.point td {
					width: 700px;
					border: 1px solid #019257;
					padding: 30px 45px 30px 60px;
					text-align:left;
					font-family: 'Noto Sans JP', sans-serif;
					font-size: 16px;
					font-weight: 300 !important;
					line-height:180%;
					letter-spacing: 0.025em;
					color: #231815 !important;}

	#pn-butter #product,#dm-butter #product {
		position:relative;
		width: 1120px;
		padding-bottom: 100px;
		margin: 30px auto 0px auto; text-align: center;}

		#pn-butter #product h1,#dm-butter #product h1 {
			width: 239px;
			height: 65px;
			margin: 0px auto 40px auto; }

		#pn-butter #product h2,#dm-butter #product h2 {
				font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #009256;
			font-size: 2.4rem;
			letter-spacing: 0.025em;
			text-align: center;
			width: 600px;
			margin: 0px auto 80px auto; }

		#pn-butter #product table,#dm-butter #product table {
			display:block;
			width: 560px;
			height:350px;
			margin: 0 0 0 auto;}
			#pn-butter #product td,#dm-butter #product td {
				display: table-cell;
				height: 50px;
				padding: 0 0 0 5px;
				vertical-align: top; }
				#pn-butter #product table td.header,#dm-butter #product table td.header {
					width:120px;
					height: 50px;
					text-align:left;
					vertical-align: top; }
				#pn-butter #product table td.reader,#dm-butter #product table td.reader {
					width:20px;
					height: 50px;
					text-align:center;
					vertical-align: top; }
					#pn-butter #product table td.reader p,#dm-butter #product table td.reader p {
						 font-family: 'Noto Sans JP', sans-serif;
			font-weight: 500;
						line-height:120% !important;
						font-size: 18px;}
			#pn-butter #product td p,#dm-butter #product td p{
				display:inline;
				font-family: 'Noto Sans JP', sans-serif;
				line-height:120% !important;
				font-size: 18px;
				font-weight: 300 !important;
				letter-spacing: 0.025em;
				margin:0px;
				padding:0px;}
	
		#pn-butter #product .pimg,#dm-butter #product .pimg{
			width:550px;
			text-align:center;
			margin:0 100px 0 0;
			padding:0;
			position: absolute;
			z-index: 100;
			opacity: 0;
			transition: opacity 0.8s, margin 0.8s; }
			#pn-butter #product .pimg.active,#dm-butter #product .pimg.active {
				margin-left: 50px;
				opacity: 1; }
			#pn-butter #product .pimg img,#dm-butter #product .pimg img{
				width:404px;
				height:310px;
				margin:0 auto 0 auto;
				}



	#pn-butter #info,#dm-butter #info {
		width: 1120px;
		padding: 0px;
		margin: 30px auto 0px auto;
		text-align:center;
		}
		#pn-butter #info:after,#dm-butter #info:after {
			content: "";
			clear:both;
			display: block;
			width: 1px;
			height: 10px;}

		#pn-butter #info h1,#dm-butter #info h1  {
			width: 239px;
			height: 65px;
			margin: 0px auto 40px auto; }

		#pn-butter #info h2,#dm-butter #info h2 {
				font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #009256;
			font-size: 2.4rem;
			letter-spacing: 0.025em;
			text-align: center;
			width: 600px;
			margin: 0px auto 40px auto; }

		#pn-butter #info p,#dm-butter #info p  {
			font-family: 'Noto Sans JP', sans-serif;
			font-size: 18px;
			line-height:160%;
			font-weight: 300 !important;
			letter-spacing: 0.025em;
		}

		#pn-butter #info .cta,#dm-butter #info .cta {
			width:305px;
			margin:0 auto 100px auto;
			padding:40px 0 0 0;
    
		}
    #pn-butter #info .cta img ,#dm-butter #info .cta img { width:100%; height: auto;}

		#pn-butter #info .cta p,#dm-butter #info .cta p{
			margin: 0 0 40px 0;
		}

		#pn-butter #info .cta p.tel a,#dm-butter #info .cta p.tel a{
			display: table;
			width: 100%;
			height: 66px;
			/*background: url("../butter/images/pc_tel_t.png") no-repeat center;*/
			color: #222;
			text-decoration: none;}

		#pn-butter #info .cta p.mail a,#dm-butter #info .cta p.mail a{
			display: table;
			width: 100%;
			height: 52px;
			background: url(../butter/images/pc_mail_button.png) no-repeat center;
			color: #222;
			text-decoration: none; }
    
    
    
     /* ***************************************************************** */
}
/** -------------------------------------------------------
 ** 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;
      text-align: cenetr;
    overflow: hidden;}
    
      #pn-butter .nav-button span {
  /*  background-color: #009256;*/
  }
 .mv {
    width: 100%;
    height: auto;
    margin: 0px auto 0px auto;
    overflow: hidden;
      text-align: cenetr;
     
  }
    .mv img { width:100%; height: auto;}
    
    .mv .btn { width:80%; margin: 0 auto;}
    
    	#pn-butter #concept,#dm-butter #concept {
		width: 96%;
		padding: 120px 0 0 0;
		position:relative;
		margin: 0px auto 0 auto; text-align: center;}
		#pn-butter #concept:after,#dm-butter #concept:after {
			content: "";
			display: block;
			width: 1px;
			height: 80px;}
		#pn-butter #concept h1,#dm-butter #concept h1 {
			width: 50%; max-width: 263px;    
			margin: 0px auto 40px auto; }
    #pn-butter #concept h1 img,#dm-butter #concept h1 img {width:100%; height: auto;}
		#pn-butter #concept h2 {
				font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #009256;
			font-size: 2rem;
			letter-spacing: 0.025em;
			text-align: center;

			width: 100%;
			line-height:160%;
			margin: 0px auto 40px auto;
    }
   #dm-butter #concept h2 {
				font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #009256;
			font-size: 1.4rem;
			letter-spacing: 0em;
			text-align: center;

			width: 100%;
			line-height:160%;
			margin: 0px auto 40px auto;
    }


		#pn-butter #concept p,#dm-butter #concept p {
			text-align:left;
			width: 96%;
			margin: 0px auto;
	/*		padding: 0 20px 0 20px;*/
			font-family: 'Noto Sans JP', sans-serif;
			line-height:180%;
			font-size: 1.6rem;
			font-weight: 100 !important;
			letter-spacing: 0.025em;
			color: #231815 !important;}

		#pn-butter #concept .dimg,#dm-butter #concept .dimg {
			width: 100%;
			margin: 20px -50px 25px 20px;
			position: relative;
			z-index: 1;
			opacity: 0;
			transition: opacity 0.8s, margin 0.8s; }
    #pn-butter #concept .dimg img,#dm-butter #concept .dimg  img { width:100%; height: auto;}
		#pn-butter #concept .dimg.active,#dm-butter #concept .dimg.active {
			margin-left: 0;
			opacity: 1; }

	/* 区切り線のアニメーション */
    	.deviderWP {
/*		display:table;
		width: 864px;
		height: 80px;
		margin: 0px auto 0px auto;*/
     /*       display: block;
        text-align: cenetr;*/
	}
	.devider {
	/*	position:absolute;*/
		z-index: 1;
		margin:0 auto 0 auto;
		overflow: hidden;
		width: 96%;
		height:58px;
		display:block;
    max-width: 626px;}
    
    .devider img  { width:100%; height: auto;}
		.img-animation {
		animation: img-opacity 1.5s cubic-bezier(.4, 0, .2, 1);
		overflow: hidden;
		position: relative;}

	.img-animation:before {
		animation: img-animation 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
		background: #fff;
		bottom: 0;
		content: '';
		left: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;}

		@keyframes img-opacity {0% {opacity: 0;}}
		@keyframes img-animation {100% {transform: translateX(100%);}}


	
	#pn-butter #ambassadors2021 {
		position:relative;
		width: 100%;
		padding: 0;
		margin: 0px auto 0px auto;
		top:0;
		left:0;

    }
		#pn-butter #ambassadors2021:after {
			content: "";
			display: block;
			width: 1px;
			height: 0px;}

		#pn-butter #ambassadors2021 h1 {
			z-index: 90;
			width: 80%; max-width: 481px;
			margin: 0px auto 0px auto; }
    #pn-butter #ambassadors2021 h1 img { width:100%; height: auto;}
    
		#pn-butter #ambassadors2021 h2 {
				font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #009256;
			font-size: 1.8rem;

			letter-spacing: 0.025em;
			text-align: center;
			width: 100%;
			margin: 20px auto 40px auto; }

		#pn-butter #ambassadors2021 h3 {
			position: relative;
			font-size:1.3rem;
			width:100%;
			text-align:center;
			margin:30px auto 40px auto;
            line-height: 200%;
          
			}
			#pn-butter #ambassadors2021 h3:before {
				content: "";
				display: block;
				width:100%;
				height: 30px;
				background: url(../butter/images/sp_amba_line_top.png) no-repeat top center;
				background-size:contain;
				position: absolute;
				left: 50%;
                transform: translateX(-50%);
				top: -30px;
				z-index:50;  max-width:684px;
    }
			#pn-butter #ambassadors2021 h3:after {
				content: "";
				display: block;
				width:100%;
				height: 30px;
				background: url(../butter/images/sp_amba_line_bottom.png) no-repeat top center;
				background-size:contain;
				position: absolute;
				left: 50%;
                transform: translateX(-50%);
				bottom: -30px;
                z-index:50;  max-width:684px;}

		#pn-butter #ambassadors2021 .photo {
			width:100%;
			height:auto;
			margin: 0 auto 0 auto;
			padding:0;
		}
		#pn-butter #ambassadors2021 .photo img{
			display:block;
			width:100%;
           
		}

		#pn-butter #ambassadors2021 .photo .item{
			position: relative;
			z-index: 20;
			opacity:0;
			transition: opacity 1.2s; }
			#home #ambassadors2021 .photo .item.active{
				opacity: 1; }

		#pn-butter #ambassadors2021 .list{
			display:block;
			width:100%;
			margin:20px auto 80px auto;
			padding:0;
			text-align:center;
		}
		#pn-butter #ambassadors2021 .list .head,
		#pn-butter #ambassadors2021 .list .right,
		#pn-butter #ambassadors2021 .list .main,
		#pn-butter #ambassadors2021 .list .bottom,
		#pn-butter #ambassadors2021 .list .left{
			display:none;
		}

    #pn-butter #ambassadors2021 .list img { width:100%; height: auto;}
	#pn-butter #features,#dm-butter #features  {
		position:relative;
		width: 96%;
		padding: 0;
		margin: 0px auto 0px auto;
		top:80px;
		left:0;
        clear: both; 
         
    }
		#pn-butter #features:before {
			content: "";
			display: block;
			width: 56px;
			height: 138px;
			background: url("../butter/images/sp_knife_i.png") no-repeat;
			background-size:contain;
			position: absolute;
			right: -10px;
			top: -180px;
			z-index:50;}
		#pn-butter #features:after {
			content: "";
			display: block;
			width: 1px;
			height: 0px;}
    
    #dm-butter #features:before {
			content: "";
			display: block;
			width: 75px;
			height: 150px;
			background: url(../butter/images/dm-butter/sp_whisk_i.png) no-repeat;
			background-size:contain;
			position: absolute;
			left: -10px;
			top: -180px;
			z-index:50;}
		#dm-butter #features:after {
			content: "";
			display: block;
			width: 1px;
			height: 30px;}
    

		#pn-butter #features h1,#dm-butter #features h1 {
            clear: both;
			z-index: 90;
			width: 50%; max-width: 291px;
			height: 85px;
			margin: 0px auto 0px auto; }
    #pn-butter #features h1 img,#dm-butter #features h1 img { width:100%; height:auto;}
    

		#pn-butter #features h2,#dm-butter #features h2 {
				font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #009256;
			font-size: 2rem;
			letter-spacing: 0.025em;
			text-align: center;

			width: 100%;
			margin: 20px auto 30px auto;}

		#pn-butter #features .point,#dm-butter #features .point  {
			border:1px solid #fff;
			position:relative;
			width: 100%;
			margin:60px 0 40px 0;}

			.point .mark {
				width:100px !important;
				position:absolute; top:-53px; left:-10px; z-index: 4;}

			.point .dimg1 {
				width: 90%;
				margin: -2% -50px 25px 50px;
				position: relative;
				z-index: 1;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; }
			.point .dimg1.active {
				margin-left: 5%;
				opacity: 1; }

			.point .dimg2 {
				width: 90%;
				margin: -2% -50px 25px 50px;
				position: relative;
				z-index: 1;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; }
			.point .dimg2.active {
				margin-left: 5%;
				opacity: 1; }

			.point .dimg3 {
				width: 90%;
				margin: -2% -50px 25px 50px;
				position: relative;
				z-index: 1;
				opacity: 0;
				transition: opacity 0.8s, margin 0.8s; padding-bottom:80px; }
			.point .dimg3.active {
				margin-left: 5%;
				opacity: 1; }
    .point .dimg1 img,.point .dimg2 img,.point .dimg3 img { width:100%; height: auto;}

			.point table {
				width:100%;
				margin:0;
				border: 2px solid #019257;
				border-collapse:collapse;}
				.point th {
						font-family: 'Noto Serif JP', serif;
			font-weight: 500; 
			color: #ffffff;
			font-size: 1.8rem;
			letter-spacing: 0.025em;

                    
					line-height:120%;
					width: 100%;
					background-color: #019257;
					padding: 60px 10px 10px 10px;
					border: 1px solid #019257;
					text-align:left;}
				.point td {
					width: 100%;
					border: 1px solid #019257;
					padding: 10px 10px 40px 10px;
					text-align:left;
					font-family: 'Noto Sans JP', sans-serif;
					font-size: 16px;
					font-weight: 300 !important;
					line-height:180%;
					letter-spacing: 0.025em;
					color: #231815 !important;}

	#pn-butter #product,#dm-butter #product {
		position:relative;
		width: 100%;
		padding: 0;
		margin: 10px auto 0px auto; text-align: center;}
		#pn-butter #product:after,#dm-butter #product:after {
			content: "";
			clear:both;
			display: block;
			width: 1px;
			height: 50px;}

		#pn-butter #product h1,#dm-butter #product h1 {
			width: 50%; max-width: 280px;
			height: 85px;
			margin: 120px auto 0px auto; }
    #pn-butter #product h1 img,#dm-butter #product h1 img { width:100%; height: auto; }
		#pn-butter #product h2,#dm-butter #product h2 {
			font-family: 'Noto Sans JP', sans-serif;
			color: #009256;
			font-weight: 500;
			font-size: 20px;
			letter-spacing: 0.025em;
			text-align: center;
			width: 100%;
			margin: 0px auto 20px auto; }

		#pn-butter #product table,#dm-butter #product table  {
			display:block;
			width: 80%;
			margin: 0; margin: 0 auto;}

			#pn-butter #product td,#dm-butter #product td {
				font-family: 'Noto Sans JP', sans-serif;
				font-size: 15px;
				line-height:120%;
				font-weight: 300 !important;
				letter-spacing: 0.025em;
				padding: 0 0 1rem 5px;
				vertical-align: top;
    text-align: left;}
				#pn-butter #product table td.header,#dm-butter #product table td.header {
					width:100px;
					padding:0 0 1rem 0;
					text-align:left;
					vertical-align: top; }
				#pn-butter #product table td.reader,#dm-butter #product table td.reader {
					padding:0 0 1rem 0;
					width:20px;
					text-align:center;
					vertical-align: top; }

		#pn-butter #product .pimg,#dm-butter #product .pimg{
            
            width: 100%;
			margin: 20px -50px 25px 20px;
			position: relative;
			z-index: 1;
			opacity: 0;
			transition: opacity 0.8s, margin 0.8s;
       }
    #pn-butter #product .pimg img ,#dm-butter #product .pimg img { width:60%; height: auto;}
		#pn-butter #product .pimg.active,#dm-butter #product .pimg.active {
			margin-left: 0;
			opacity: 1; }


	#pn-butter #info,#dm-butter #info {
		width: 100%;
		padding: 0px;
		margin: 30px auto 0px auto;
		text-align:center;
        display: block;
    }
		#pn-butter #info:after,#dm-butter #info:after {
			content: "";
			clear:both;
			display: block;}

		#pn-butter #info h1,#dm-butter #info h1 {
			width: 40%; max-width: 132px;
			height: 60px;
			margin: 90px auto 40px auto; }
    #pn-butter #info h1 img,#dm-butter #info h1 img { width:100%; height: auto;}

		#pn-butter #info h2,#dm-butter #info h2 {
			font-family: 'Noto Sans JP', sans-serif;
			color: #009256;
			font-weight: 500;
			font-size: 20px;
			letter-spacing: 0.025em;
			text-align: center;
			width: 100%;
			margin: 0px auto 40px auto; }

		#pn-butter #info p,#dm-butter #info p {
			width:80%;
			font-family: 'Noto Sans JP', sans-serif;
			font-size: 16px;
			line-height:160%;
			font-weight: 300 !important;
			letter-spacing: 0.025em; margin: 0 auto;}

		#pn-butter #info .cta,#dm-butter #info .cta {
			width:100%;
			margin:40px auto 100px auto;
            }

		#pn-butter #info .cta p,#dm-butter #info .cta p{
			margin: 0 0 40px 0;}

		#pn-butter #info .cta,#dm-butter #info .cta{
			width: 286px;
			height: 66px;
            margin: 60px auto;
		/*	background: url(../butter/images/sp_tel_t.png);
			background-size: contain;*/
			color: #222;
 }
    #pn-butter #info .cta img,#dm-butter #info .cta img { width:100%; height: auto;}

		#pn-butter #info .cta p.mail a,#dm-butter #info .cta p.mail a{
			display: table;
			width: 100%;
			height: 52px;
			background: url(../butter/images/pc_mail_button.png) no-repeat center;
			color: #222;
			text-decoration: none; }
    
      /* ***************************************************************** */
}
/* ***************************************************************************** */