@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');


body{
	min-width: 240px;
	background:#fff;
	text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%; /* Safari */
	font-size:1.2rem;
font-family: 'Noto Sans JP', sans-serif;
}


header{max-width:1300px;margin:0 auto;}

.toiawase{
    text-align:center;
margin-bottom:5em;  
font-size:0.8rem;}

.toiawase h4{
margin-bottom:1em;  
}
.toiawase p{
margin-bottom:0.5em;  
}


footer{
     clear:both;display:block;
background:linear-gradient(180deg, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 60%),url(imagesTL/taekoLINK012.png) no-repeat;
	color: #000;
	height:50vw;
    padding-top: 2em;
	background-size:cover;
overflow:hidden;
text-align:center;			animation: flashC 3s linear infinite;

}



.alk{
    clear:both;display:block;
	color: #000;
	margin: 0 auto;
overflow:hidden;
    margin-bottom:2em;  
    font-size:1.8vw;
}

.alkBOX{
 width:90%;
    border-radius:6vw;
    overflow:hidden;
	margin:0 auto 2em;
	background:url(imagesTL/taekoLINK0ALKBOX2.png) no-repeat;
	background-size:contain;  animation: flashC 3s linear infinite;
}


.alkBOX img{
	animation: flash0 180s linear infinite; 

}
    
.alk h3{
    color: #5C6985;
    font-size:1.8vw;
	letter-spacing: 0.3em;
			margin-bottom:1em;

	animation: flashC 2s linear infinite;

    }

.alk h2{
    color: #363636;
    font-size:4.2vw;
	letter-spacing: 0.3em;
	font-family: 'Manrope', sans-serif;
			animation: flashC 3s linear infinite;
    }
.alkLead{
    text-align: center;
    	margin: 0 auto;
overflow:hidden;
    margin-bottom:2em; 
}
.alkLead p{
    	margin: 0 auto;
	overflow:hidden;
		font-size:1rem;
    margin-bottom:1em; 
	line-height:1.8em;
	letter-spacing:0.05em;
    width:90%;
}

.alkLead p:first-child{
	font-size:1.1rem;
	font-weight: normal;
}

.alkLead p:last-child{
   	font-size:0.8rem;
	font-weight: normal;
}

 .item{
     overflow:hidden;
     display:block;
background:#cfcfcf;
background: linear-gradient(90deg, rgba(255,255,255,1) 19%, rgba(244,241,236,1) 90%);
     width:100%;
     text-align:center;
    }

.item img{
	vertical-align: bottom;
    width:60%;
    }

.subT{
    font-size:0.7em;
    color:#666;
    text-align:center;
	margin:0 auto;
padding:0.5em;
}


.itemSE{
     overflow:hidden;
     display:block;
background:#7A7D34;
     width:100%;
     text-align:center;
    }

.ite,.iteLOGO{
     overflow:hidden;
     display:block;
     width:100%;
     text-align:center;
    }
.itemSE img{
	vertical-align: bottom;
    width:80%;text-align:center;
    }
.iteLOGO img{
	vertical-align: bottom;
    width:100%;
}
.ite img{
	vertical-align: bottom;
    width:60%;
    }


#shohin h3{
    font-size:0.8em;
    color:#666;
    text-align:center;
	margin:0 auto;
padding:0.5em;
}

#shohin p{
    font-size:0.8em;
    color:#666;

}


#shohin img{
    margin-bottom:0em;
}

/*----------------------------------------------------*/

.descriPtion{
     overflow:hidden;
     display:block;
		background: linear-gradient(270deg, rgba(255,255,255,1) 19%, rgba(244,241,236,1) 90%);
	line-height:1.6em;
	font-size:0.9em;

	height:auto;
     width:100%;
	text-align:center;
	padding:0.5em;

}
.descriPtion p{
     width:80%;
	text-align:center;
	font-size:0.8rem;
	margin:0 auto;

}
.descriPtion h6{

text-align:center;
letter-spacing:1.1em;
}
.descriPtion h5{
text-align:center;
	font-size:0.8rem;
	padding:0.6em 0;
}
/*----------------------------------------------------*/

.ingreDients{
		line-height:1.6em;
     overflow:hidden;
     display:block;
	background:#cfcfcf;
	background:#fff;
		height:auto;
     width:100%;
	text-align:left;
	color:#333;
	padding:0.5em;
	margin-bottom:3em;
	font-size:0.8em;

    }
.ingreDients h4{
	    width:90%;
	text-align:center;
	font-size:0.8rem;
	padding:0 1em 0 0;
	margin:0 auto;
	letter-spacing:0.1em;	
}
.ingreDients p{
     width:90%;
	text-align:left;
	padding:0.5em;
	margin:0 auto;
word-spacing:0.3em;
}
.gry{
	color:#f5cdc6;
	font-size:0.8rem;
	padding-right:0.2em;
}

.gryMoss{
	color:#94bd88;
	font-size:1rem;
}
/*----------------------------------------------------*/
/*-----COL-----------------------------------------*/


#shohin h3 span{
    font-size:0.9em;
    color:#f60;
    text-align:center;
}
#shohin h3 span.greenCOL{
color:#7A7D34;
}

#shohin h3 span.ggG{
	color:#999;
	font-size:1.1rem;
	letter-spacing:1em;
	font-family:serif;
}

#shohin .descriPtion h3{
	font-size:0.9rem;
color:#472a0e;
}

.greenCOL{
	color:#7A7D34;
	font-weight:bold;
}
.pinkCOL{
color:#CD5C5C;
}


/*------COL-------------------------------------------*/
/*----------------------------------------------------*/

.syamei{
	color:#000;
	font-size:0.8rem;
	letter-spacing:0.2em;

}

small{font-size:0.7rem;}

/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
@media(min-width:620px){
	
	#boxWrap{
display:block;
margin:0 auto 50px;  
 width:70%;
background:#fff;
    overflow: hidden;
}
	
.alk{clear:both;}
.alk h3{
    color: #5C6985;
    font-size:1.6vw;
		letter-spacing: 0.3em;
		margin-bottom:0.5em;
    }

.alk h2{
    color: #363636;
    font-size:2.7vw;
    letter-spacing: 0.2em;
    }
  .kaigyo{display:none;}  
	
}

/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/

@media(min-width:900px){
	
	header img{width:28%;}

.toiawase{font-size:1.1rem;}


#boxWrap{
display:block;
margin:0 auto 50px;  
 width:70%;
background:#fff;
    overflow: hidden;
}

.linkBox{
    width:33.3%;
    text-align:center;
    float:left;
}

.linkBox img{
    width:70%;
  }
	.alk{clear:both;}
	
.alk h3{
    color: #5C6985;
    font-size:1.3vw;
    letter-spacing: 0.5em;
    }

.alk h2{
    color: #363636;
    font-size:1.8vw;
    letter-spacing: 0.5em;
    }
	
	.alkBOX{
		float:left;width:60%;text-align:left;
		background-size:cover; 
} 


	.alkLead{float:right;width:40%;text-align:left; } 
	
	.alkLead p{width:90%;text-align:left;	font-size:0.9rem; line-height:1.4em;} 
	
	#wrapALK{width:86%;overflow:hidden;
		max-width:1160px;
    margin:0 auto 2em;}  
	
#shohin h3{
    font-size:0.9em;
    color:#666;
    text-align:center;
	margin:0 auto;
padding:0.5em;
}	
	
	
 .item{
     overflow:hidden;
     display:block;
background:#cfcfcf;
background: linear-gradient(90deg, rgba(255,255,255,1) 19%, rgba(244,241,236,1) 90%);

     width:100%;
     text-align:center;
    }

.item img{
	vertical-align: bottom;
    width:30%;
    }
.itemSE img{
	vertical-align: bottom;
    width:40%;text-align:center;
    }
.iteLOGO img{
	vertical-align: bottom;
    width:40%;
    }   
.ite img{
	vertical-align: bottom;
    width:40%;
    }
  .ingreDients h4{
	    width:50%;

}
.ingreDients p{
     width:50%;

}
	
}
/*----------------------------------------------------*/
@media(min-width:1000px){
	.alkLead p{width:90%;text-align:left;	font-size:0.9rem; line-height:1.8em;} 
}
@media(min-width:1200px){
	.alkLead p{width:90%;text-align:left;	font-size:1rem; line-height:2.2em;} 
	#boxWrap{width:60%;}
	
	.alk h3{
    font-size:1.2vw;
	letter-spacing: 0.4em;    }	
	.alk h2{
       font-size:1.6vw;	letter-spacing: 0.2em;    }
}
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
.arrow01{
    margin:0em auto 2em;
    display: block;
    width: 30px;
    height:30px;
    border-bottom: solid 6px #cdcdcd;
    border-left: solid 6px #9b9b9b;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


.arrow01 {
	animation: flash 2s linear infinite;
}

@keyframes flash {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

@keyframes flashC {
	0%,
	100% {
		opacity: 1;
	}

	60% {
		opacity: 0.6;
	}
}


@keyframes flash0 {
	0%,
	100% {
		opacity: 1;  transform: rotate(0deg);
	}

	50% {
		opacity: 0.5; transform: rotate(360deg);
;
	}
}