/******************** common */
#page-wrapper{
	width: 760px;
	margin: 0 auto;
	font-size: 15px;
	color: #47372c;
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-image: url(./img/bg-01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 10px;
}

a:hover{
	opacity: 0.8;
}

#page-wrapper img {
	width: 100%;
}



/************** 共通設定 */
#page-wrapper .flex-box{
	display: flex;
}



/************** header */
#page-wrapper h2 img{
	width: 100%;
}

#page-wrapper .header {
	position: relative;
}

#page-wrapper .header-comment{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 95px;
}
#page-wrapper .header-comment p {
	color: #492b1e;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.75;
	text-align: center;
}



/********************* contents */

#page-wrapper .contents{
	max-width: 700px;
	margin: -50px auto 0;
}

#page-wrapper .contents .flex-box {
	flex-wrap: wrap;
}
#page-wrapper .contents .flex-box li {
	width: calc(100% / 2);
}



/****************************** teacher */

#page-wrapper .teacher {
	position: relative;
	max-width: 700px;
	margin: auto;
}
#page-wrapper .teacher .text {
	color: #492b1e;
	font-size: 15px;
	position: absolute;
	width: 370px;
	height: 7.5em;
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}



/****************************** recipe */

#page-wrapper .recipe {
	background-color: #fff;
	border-radius: 30px;
	max-width: 700px;
	margin: 80px auto;
	padding-top: 20px;
	padding-bottom: 50px;
	position: relative;
}
#page-wrapper .recipe .bg {
	position: absolute;
	width: 740px;
	height: 1870px;
	top: 770px;
	left: -20px;
	margin: auto;
	z-index: 0;
}
#page-wrapper .recipe .bg2 {
	position: absolute;
	width: 740px;
	height: 1870px;
	top: 840px;
	left: -20px;
	margin: auto;
	z-index: 0;
}
#page-wrapper .recipe .bg3 {
	position: absolute;
	width: 740px;
	height: 1870px;
	top: 890px;
	left: -20px;
	margin: auto;
	z-index: 0;
}
#page-wrapper .recipe .name {
	max-width: 760px;
	margin: -50px -30px 0;
	position: relative;
	z-index: 2;
}
#page-wrapper .recipe .head {
	max-width: 650px;
	margin: -50px auto 30px;
	position: relative;
	z-index: 1;
}
#page-wrapper .recipe .head2 {
	max-width: 650px;
	margin: 30px auto;
	position: relative;
	z-index: 1;
}
#page-wrapper .recipe .head3 {
	max-width: 650px;
	margin: -15px -25px 30px auto;
	position: relative;
	z-index: 1;
}
#page-wrapper .recipe .flex-box {
	align-items: center;
	flex-wrap: wrap;
	max-width: 650px;
	margin: 30px auto;
	position: relative;
	z-index: 1;
}
#page-wrapper .recipe .flex-box .img {
	width: 305px;
}
#page-wrapper .recipe .flex-box .img.r02 {
	width: 340px;
	margin-right: -35px;
}
#page-wrapper .recipe .flex-box .img.r05 {
	width: 350px;
	margin-left: -45px;
}
#page-wrapper .recipe .flex-box .txt {
	color: #492b1e;
	line-height: 1.55;
	width: calc(100% - 325px);
}
#page-wrapper .recipe .flex-box .txt.col {
    width: 100%;
}

#page-wrapper .recipe .flex-box .txt.right {
	margin-left: 20px;
}
#page-wrapper .recipe .flex-box .txt.left {
	margin-right: 20px;
}
#page-wrapper .recipe .flex-box .txt strong {
	display: block;
	font-weight: bold;
	padding: 1em 0 .25em;
}
#page-wrapper .recipe .flex-box .txt small {
	display: block;
	font-size: 13px;
	margin-top: 1.5em;
}
#page-wrapper .recipe .flex-box .txt .no {
	width: 55px;
	margin-bottom: 10px;
}

#page-wrapper .recipe .point {
	max-width: 650px;
	margin: auto;
	position: relative;
	z-index: 1;
}
#page-wrapper .recipe .point li {
	color: #492b1e;
	line-height: 1.55;
	margin: 1em auto;
}
#page-wrapper .recipe .point li span {
	display: table-cell;
}
#page-wrapper .recipe .point li span:nth-child(1){
	color: #39b54a;
	font-size: 16px;
	padding-right: 3px;
}

#page-wrapper .recipe .reserve {
	color: #492b1e;
	max-width: 650px;
	margin: auto;
	position: relative;
	z-index: 1;
}
#page-wrapper .recipe .reserve .block-ttl {
	font-weight: bold;
	margin-bottom: 1em;
	text-align: center;
}
#page-wrapper .recipe .reserve .flex-box {
	margin: auto;
}
#page-wrapper .recipe .reserve li {
	margin: 0 15px;
	width: calc(100% / 3 - 30px);
}

#page-wrapper .recipe .movie {
	max-width: 600px;
	margin: auto;
	position: relative;
	z-index: 1;
}
#page-wrapper .recipe .movie iframe {
	width: 100%;
}