@charset "utf-8";
/* CSS Document */

header img{
	border-radius:10px;
}

header .text{
	line-height: 180%;
	letter-spacing: 1px;
	font-size: 110%;
}

header h2{
	background-image:url();
	background-position:center top;
	background-repeat: no-repeat;
	color:#333;
	margin-top:-45px;
	position:relative;
	text-align: center;
	font-size:170%;
	line-height:100%;
	letter-spacing:5px;
	padding:15px 0;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

header h2 .color{
	color: #619CB6;
	font-size: 170%;
	line-height:120%;
}

header h2 .text{
	font-size: 150%;
	line-height:120%;
}

.jizakana{
	border:solid 1px #e6e6e6;
	margin-top:50px;
	letter-spacing: 5px;
	padding: 0 0 0 40px;
}

.jizakanaIco{
	text-align: center;
	font-size:180%;
	line-height:100%;
	letter-spacing: 3px;
	margin-top:-20px;
	margin-left:-40px;
	padding: 18px 10px 10px 10px;
}

.jizakanaIco span{
	background-color: #FFF;
	background-image: url(../img/jizakana_pj/icon_illust.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
	color: #619CB6;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	padding: 20px 5px 0 50px;
	text-align: center;
	vertical-align:middle;
}

.inWrap h4{
	background:url(../img/jizakana_pj/title_border.gif) repeat-x bottom;
	color:#333;
	font-size: 150%;
	line-height:100%;
	letter-spacing: 4px;
	padding-bottom: 20px;
	margin-bottom:30px;
	text-align: center;
}

.inWrap h4 span{
	display: block;
	padding: 5px 0 0 35px;
}

.imgBottom{
	padding:0 15px;
	margin-bottom:40px;
}

.imgRecipe{
	float:left;
}

.imgBottom .img{
	display: inline-block;
}

.imgBottom ul li{
	float:left;
	width:31.9%;
}

.img li{
	padding: 5px;
}

.inWrap img{
	width: 100%;
    height: auto;
}

.imgBottom .text{
	line-height: 180%;
	letter-spacing: 1px;
	margin-bottom:10px;
	font-size: 16px;
}

.img li {
    padding: 5px;
    color: #848383;
    font-size: 85%;
}

.twoimg ul li:first-child {
    padding-right: 13px;
}
.twoimg ul li {
    float: left;
    width: 49%;
}
#about .imgcpt {
    margin-top: -17px;
    padding: 5px;
    background-color: #ebf0f2;
	font-size: 90%;
}
#video .pjimg li{
	width: 32%;
    padding-right: 19px;
}
#video .pjimg li:last-child {
    padding-right: 0;
}
#video .movie ul li{
    float: left;
    width: 48.5%;
    padding: 7px;
}
#video .movie ul li iframe{
	border-radius: 10px;
	border: 4px solid #619CB6;
}

#story p a {
    display: block;
    padding: 20px;
    border: 2px solid #736357;
    border-radius: 5px;
    width: 600px;
    text-align: center;
    font-size: 120%;
    font-weight: 600;
	color: #333;
}
#story .inWrap ul li dl dd{
	text-align: center;
	padding: 5px;
	color: #FFF;
	font-size: 20px;
}
#story .inWrap ul li dl dd span{
	font-size: 14px;
}
#story .inWrap ul li dl .curry{
    background-color: #e3b71b;
}
#story .inWrap ul li dl .tomato{
    background-color: #C13B25;
}
#story .imgArrange  ul{
	margin-bottom: 10px;
}
#story .imgArrange  ul li{
	float:left;
	width: 32%;
    padding-right: 16px;
}
#story .imgArrange ul li:last-child {
    padding-right: 0;
}

#selection .pointbox {
    position: relative;
    margin: 50px 30px 0 30px;
    padding: 0.5em 1em;
    border: solid 3px #736357;
}
#selection .pointbox .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 15px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #736357;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
#selection .pointbox p {
	line-height: 180%;
    letter-spacing: 1px;
    font-size: 16px;
    margin: 10px;
    color: #736357;
    font-weight: 600;
}
#selection p a {
    display: block;
    padding: 20px;
    border: 2px solid #736357;
    border-radius: 5px;
    width: 400px;
    text-align: center;
    font-size: 120%;
    font-weight: 600;
    color: #333;
    margin-bottom: 80px;
}
#recipe h4 {
    background-color: #E09DA1;
    background-image: none;
    color: #FFF;
    font-size: 140%;
    line-height: 100%;
    letter-spacing: 4px;
    margin-bottom: 20px;
    padding: 12px 10px 10px 10px;
    text-align: center;
}
#recipe .text {
    line-height: 180%;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-size: 16px;
}
#recipe .imgRecipe {
    float: left;
    width: 65%;
}
#recipe .materials {
    margin-left: 20px;
    font-size: 16px;
	float: right;
    width: 33%;
}
#recipe .titleMaterials {
    color: #603813;
    letter-spacing: 3px;
    font-weight: bold;
}
#recipe .titleRecipe {
    color: #603813;
    font-size: 16px;
    letter-spacing: 3px;
    margin-top: 30px;
    font-weight: bold;
}
#recipe .recipe {
    line-height: 180%;
    letter-spacing: 1px;
    margin-bottom: 70px;
    font-size: 16px;
}
#recipe .recipe li {
    list-style-type: none;
    border-bottom: 1px dotted #948643;
    padding: 10px;
}
#recipe .recipe li span {
	font-size: 110%;
    font-weight: bold;
    background-color: #603813;
    padding: 2px 5px;
    color: #FFF;
    border-radius: 3px;
    margin-right: 10px;
}

#shop a {
    display: block;
    padding: 20px;
    border: 2px solid #736357;
    border-radius: 5px;
    width: 300px;
    text-align: center;
    font-size: 120%;
    font-weight: 600;
	color: #333;
	margin-bottom: 80px;
}

*, ::before, ::after {
  box-sizing: content-box;
}

body{
	letter-spacing: 0;
}

@media screen and (max-width:640px){

	img,
	.imgRecipe img{
		width: 100%;
	}

	.materials{
		width: auto;
	}

	header img{
		border-radius:0px;
	}

	header h2{
		background-image:none;
		font-size: 130%;
		padding:35px 0 10px;
		border-bottom: 1px solid #e6e5dc;
		margin: -10px 0 20px 0;
		width:100%;
	}

	header h2 .text{
		padding-top:30px;
		font-size: 100%;
	}

	.jizakanaIco{
		margin-top:0;
		letter-spacing: 0px;
		font-size: 160%;
	}
	.jizakanaIco span{
		line-height:100%;
		background-color:transparent;
	}

	h4{
		padding-top:30px;
		letter-spacing: 0;
	}

	.imgBottom{
		padding:0;
	}

	.imgRecipe{
		float:none;
	}

	.imgBottom .img{
		display: inline;
	}

	.imgBottom ul li,
	.twoimg ul li{
		float:none;
		width:100%;
	}

	.inWrap li {
		padding: 5px 0 5px 0;
	}

	.jizakanaIco {  
		padding: 10px 10px 10px 10px;
	}
	.twoimg ul li:first-child {
		padding-right: 0;
	}

	#video .pjimg li {
		width: 100%;
		padding-right: 0;
	}
	#video .movie ul li {
		float: none;
		width: auto;
		padding-right: 15px;
	}
	#video .movie ul li iframe{
		width: 100%;
		height: auto;		
	}

	#story p a,	#shop a{
		width: auto;
	}
	#story .imgArrange ul {
		margin-bottom: 0;
	}
	#story .imgArrange ul li {
		float: none;
		width: 100%;
		padding-right: 0;
	}

	#selection .pointbox p {
		margin: 0;
		font-size: 15px;
	}
	#selection p a, #shop a {
    width: auto;
	}

	#recipe h4 {
		font-size: 120%;
	}
	#recipe .imgRecipe {
		float: none;
		width: 100%;
	}
	#recipe .materials {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
	}
	#recipe .titleRecipe {
		margin-top: 20px;
	}
	#recipe .recipe {
		line-height: 120%;
	}
	#recipe .recipe li {
		text-indent: -30px;
		margin-left: 22px;
		float: none;
	}
}