/* header */
#site-header-yamae{
    width: 100%;
    margin: 0 auto;
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 100;
		text-align: center;
}
.header-yamae-wrapper{
	max-width: 1500px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 80px;
		margin: 0 auto;
}
.header-list-menu ul{
	display: flex;
	justify-content: flex-end;
}
.header-list-menu li{
	padding: 1.5rem 0.5rem;
}
.header-list-menu img{
	width: 70%;
}
/* footer */
.snap-drawers {
    display: none;
}
#colophon{
	background-color: #e1d6ad;
	    width: 100%;
}
#ft-top img{
	padding: 3rem 0;
    width: 20% !important;
    margin: 0 auto;
}
#ft-top p{
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
/*
****************** 共通 ******************************************************
*****************************************************************************/
body{
	width:100%;
	text-align: center;
	background: #fff;
	margin:0 auto;
}
h1,h2,h3,a{
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif !important;
	color:#000000;
	line-height: 160%;
	text-decoration: none;
}
p,li,span{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	color:#000000;
	line-height: 160%;
}
h1{
	font-size: 2rem;
}
h2,h3{
font-size: 1.2rem;
}
p,li,span{
	font-size: 1rem;
}
a:hover{
	opacity: 0.5;
}
/*button*/
.btn_arrow {
	font-size: 1.2rem;
    position: relative;
    display: inline-block;
    padding: 0.5em 2em;
    min-width: 15em;
    border: 1px solid currentColor;
    color: #000000;
    text-align: left;
    text-decoration: none;
    transition: 0.5s;
    text-decoration: none;
    outline: none;
		box-sizing: border-box;
}
section.btn_arrow-line{
	padding: 0 20px;
	width: 50%;
	margin: 0 auto;
}

.btn_arrow::before{
	content: '';
    position: absolute;
    top: 50%;
    left: 61%;
    width: 30%;
    height: 1px;
    background: #333;
    transition: all .3s;
}

.btn_arrow::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top: 42%;
    right: 25px;
    /*矢印の形状*/
    width: 15px;
    height:1px;
  background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btn_arrow:hover::before{
    left:80%;
}

.btn_arrow:hover::after{
    right:-10%;
}
a.btn_arrow:hover{
opacity: 1;
}

/*****************************************************************************
****************** トップ *****************************************************
*****************************************************************************/
/* slick */
.slick-slide img {
  display: block;
  width: 100%;
}
#yks_wrap{
	max-width: 1500px;
	margin:0 auto;
}
#yks_wrap img{
	width: 100%;
	margin: 2rem auto;
}
#yks_wrap .yks_top img{
	margin:0 auto;
	margin-bottom: 2rem:
}
.yks_top h1{
	position: absolute;
    top: 15rem;
    left: 75rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-align: left;
    background: #fff;
    display: inline-block;
		padding: 1rem 0.5rem;
		font-size: 1.8rem;
}
.yks_top h2{
	position: absolute;
    top: 15rem;
    left: 70rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-align: left;
    background: #fff;
    display: inline-block;
    padding: 1rem 0.5rem;
    font-size: 1.8rem;
}
.yks_top{
  position: relative;
	margin-top: 5rem
}
/*****************************************************************************
****************** 動画紹介 *****************************************************
*****************************************************************************/
.yks_contents01{
	margin-bottom: 5rem;
	margin-top: 3rem;
}
.yks_contents01_flex,.yks_contents02_flex {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
.yks_contents01_flex p,.yks_contents02_flex p{
	text-align: left;
}
.flex-contents02{
	display: flex;
  justify-content: center;
}
.movie-image{
	flex-basis: 60%;
}
.right-contents{
	margin-top: 9rem;
}
.flex-contents01{
	flex-basis: 40%;
	flex-wrap: wrap;
	margin-left: 3rem;
	margin-right: 3rem;
}
.yks_contents01 .agebitashi-title{
	width:80%;
	margin:0 auto;
}
.yks_contents02 .chicken-title{
	width:60%;
	margin:0 auto;
}
.yks_contents01 .flex-contents02 {
	flex-basis: 40%;
}
.yks_contents02 .flex-contents02 {
	flex-basis: 60%;
}
.yks_contents01 .flex-contents02 .products-title img{
	width:20% !important;
}
.yks_contents01 .flex-contents02-text{
	flex-basis:60%;
	padding-top: 5rem;
	border-bottom: 1px solid #000000;
	height: 8rem;
}
.yks_contents02 .flex-contents02-text{
	flex-basis:40%;
	padding-top: 5rem;
	border-bottom: 1px solid #000000;
	height: 6rem;
}
.yks_contents01 .flex-contents02-text p.company,
.yks_contents02 .flex-contents02-text p.company{
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	text-align: center;
	color:#a1997c;
	font-size: 0.8rem;
}
.yks_contents02 .flex-contents02 .products-title img{
	width:20% !important;
}
.yks_contents01 .flex-contents02 div,
.yks_contents02 .flex-contents02 div{
flex-basis: 50%;
}
.left-contents,
.right-cintents{
	flex-wrap:wrap;
	margin:0 auto;
}
/*****************************************************************************
****************** バナー *********************************************
*****************************************************************************/
.flex-bunner{
	display: flex;
  justify-content: center;
  margin: 3rem 0;
}
.flex-bunner img{
	width: 80% !important;
}
/*****************************************************************************
****************** bootstrap調整 *********************************************
*****************************************************************************/
ul{
	margin-bottom: 0;
}
/*****************************************************************************
******************TOPレスポンシブ *********************************************
*****************************************************************************/
/*iPads リード文*/
@media screen and (max-width:1200px){
	.yks_top h1,.yks_top h2{
		position: inherit;
		writing-mode: horizontal-tb;
    text-align: left;
		background: #fff;
		font-size: 1.5rem;
	}
}
/*iPads*/
@media screen and (max-width:1200px) and (min-width:481px){
	.yks_top h1,.yks_top h2{
		position: inherit;
		writing-mode: horizontal-tb;
		text-align: left;
		background: #fff;
		font-size: 1.8rem;
	}
  .yks_top {
    margin-top: 100px;
    position: unset;
  }
	.yks_contents01 .flex-contents02-text,
	.yks_contents02 .flex-contents02-text {
    border-bottom: none;
  }
}
/*スマホ*/
@media screen and (max-width:480px){
	.header-yamae-wrapper{
		display: block;
    height: 100px;
  }
  .header-list-menu img{
  	width: 50%;
  }
  .header-list-menu li {
    padding: 0.5rem;
  }
  .header-yamae img{
    width:50%;
  }
	.yks_top {
    margin-top: 100px;
    position: unset;
  }
	.header-list-menu ul {
		justify-content: center;
    height: 50px;
  }
  .header-list-menu li {
    width: 15%;
  }
  #ft-top img {
    padding: 3rem 0;
    width: 50% !important;
    margin: 0 auto;
  }
  .yks_contents01 {
    margin-top: 0;
  }
  .yks_contents01 p{
  	text-align: left;
  }
  .yks_top h2{
  	padding:0;
  	margin-bottom: 3rem;
  }
	.flex-contents01{
		display: block;
		margin-left: 1rem;
    margin-right: 1rem;
	}
	.yks_contents01 .movie-image,
	.yks_contents02 .movie-image{
    width: 100%;
	}
	.yks_contents02 .chicken-title {
    width: 70%;
  }
  .right-contents{
  	margin-top: 0;
  }
	.yks_contents01_flex,
	.yks_contents02_flex{
		display: block;
	}
	.yks_contents01 .flex-contents02,
  .yks_contents02 .flex-contents02{
		display: block;
		margin-top: 3rem;
	}
	.left-contents,
	.right-contents{
		display: block;
	}
	.yks_contents02 img{
		width: 100%;
		margin:2rem 0;
	}
	.yks_contents01 .flex-contents02 .products-title img,
	.yks_contents02 .flex-contents02 .products-title img {
    width: 60% !important;
	}
	.yks_contents01 .flex-contents02-text,
	.yks_contents02 .flex-contents02-text {
    padding-top: 2rem;
  }
  section.btn_arrow-line {
    display: flex;
		justify-content: center;
    padding: 0;
    width: 100%;
    margin: 0 auto;
  }
  .flex-bunner{
  	display: block;
  	margin-top: 5rem;
  }
  .flex-bunner div{
  	padding:0;
  	margin-top:2rem;
  }
}
/*****************************************************************************
******************それぞれのレシピページ *********************************************
*****************************************************************************/


/*揚げ浸し*/
#yks_wrap-howto{
max-width: 1500px;
display:flex;
justify-content:center;
padding-top: 3rem;
margin: 0 auto;
}
.yks_contents-recipe{
	flex-basis: 70%;
	margin-top: 3rem;
	text-align: center;
	width: 800px;
	height: 1000px;
  overflow: auto;
	/*IE(Internet Explorer)・Microsoft Edgeへの対応*/
 -ms-overflow-style: none;
 /*Firefoxへの対応*/
 scrollbar-width: none;
}

/*Google Chrome、Safariへの対応*/
.yks_contents-recipe::-webkit-scrollbar{
 display: none;
}
.yks_contents-recipe img{
	width: 100%;
}
#recipe-arcive{
	flex-basis: 30%;
    padding-top: 2rem;
    padding-left: 2rem;
		margin-top: 3rem;
}

#recipe-arcive .recipe-arcive-title {
	border-bottom: 1px solid #000000;
}
#recipe-arcive .recipe-arcive-title h2{
	font-size: 1.5rem;
}
#recipe-arcive img{
	padding-top: 2.5rem;
	width: 100%;
}
.recipe-arcive-contents{
	width:80%;
	text-align: left;
	margin:0 auto;
}
	.yks_contents-recipe .yks_howto-logo img{
	width:30%;
	margin:0 auto;
	padding-bottom: 1rem;
}
img.scroll{
	width:5%;
	margin:0 auto;
}
.yks_contents-recipe .yks_howto-logo{
	width: 800px;
    margin: 0 auto;
    border-bottom: 1px solid #000000;
}
.yks_howto-contents{
width:800px;
margin: 3rem auto;
}
.yks_howto-contents-title{
	margin-bottom: 3rem;
}
.yks_howto-contents-title h2{
	margin-bottom: 1rem;
}
.yks_howto-contents-title p{
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 1.5rem;
}
.yks_howto-contents .base-flex-wrap{
	background: #e1d6ad;
    background-size: contain;
    width: 800px;
    height: 251px;
    margin-top: -0.5rem;
}
.yks_howto-contents .base-flex-wrap h3{
	padding:2rem 0;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif !important;
}
.yks_howto-contents .base-flex{
	display: flex;
    width: 55%;
    margin: 0 auto;
    justify-content: center;
}
.yks_howto-contents .base-flex ul{
	flex-basis: 50%;
}
.yks_howto-contents .base-flex li{
	text-align: left;
	list-style: disc;
}
.yks_howto-contents .recipe-flex-wrap{
	margin-bottom: 5rem;
}
.yks_howto-contents .recipe-flex{
	display: flex;
	justify-content: space-between;
	margin:2rem 0;
}
.yks_howto-contents .recipe-box{
	flex-basis: 30%;
}
.recipe-flex .recipe-box p{
	text-align: justify;
	margin-left: 1.4em;
	text-indent: -1.4em;
	font-size: 1rem;
}
#yks_wrap-howto .section.btn_arrow-line{
	margin: 0 !important;
}
/*****************************************************************************
******************レシピページレスポンシブ *********************************************
*****************************************************************************/
/*スマホ*/
@media screen and (max-width:480px){
	#yks_wrap-howto {
	     display: block;
			 width: 100%;
	}
	.yks_contents-recipe {
    width: 100%;
		overflow:visible;
		height: auto;
		margin-top: 100px;
}
.yks_howto-contents{
	width: 100%;
}
.yks_contents-recipe .yks_howto-logo img {
    width: 70%;
}
.yks_contents-recipe .yks_howto-logo {
    width: 95%;
	}
	img.scroll {
	    width: 10%;
	}
.yks_howto-contents .base-flex-wrap{
	width: 100%;
	height: 350px;
}
.yks_howto-contents .base-flex{
	display: block;
    width: 60%;
}
.yks_howto-contents .recipe-flex{
	display:block;
	padding:0 1rem;
	margin:0;
}
.recipe-flex .recipe-box{
margin:3rem	0;
}
#recipe-arcive{
	padding:3rem 1rem;
}
}