@charset "UTF-8";

/*
======================================
	roots-western
	2019.07.03
	last 2019.07.04

	[1]western_common
	[2]container_western
	[3]container_body
		1)container_body
		2)western_beginning
		3)western_evaluation
		4)western_meet
		5)western_start
		6)western_style
		7)western_cuisine
	[4]container-author
======================================
*/

/*
-------------------------
	[1]western_common
-------------------------
*/
.western_title {
	border-bottom: 1px solid #7f6408;
	margin-bottom: 55px;
	padding: 0 5px 15px;
	display: inline-block;
}

@media screen and (max-width: 798px) {
	.western_title {
		border-bottom: 2px solid #7f6408;
		margin-bottom: 30px;
		padding: 0 0 calc(25 / 750 * 100vw);
	}

	.flexbox-wrap-justify {
		display: block;
	}
	img {
		width: 100%;
	}
}

/*
-------------------------
	[2]container_western
-------------------------
*/
#container_western {
	margin-top: 124px;
}

@media screen and (max-width: 798px) {
	#container_western {
		margin-top: calc(60 / 640 * 100vw);
	}
}

/*
-------------------------
	[3]container_body
-------------------------
*/
/* == 1)container_body == */
.container_body {
	border-top: 16px solid #4aac71;
}

.container_body-title {
	background: #000;
	padding: 28px 0;
	text-align: center;
	position: relative;
	z-index: 2;
}

.container_body-img {
	margin-top: -1px;
	position: relative;
	z-index: 1;
}

.container_body .container_body-img figcaption {
	position: absolute;
	text-align: right;
	margin-right: 25px;
	bottom: 20px;
	right: 25px;
}

.container_body > section {
	position: relative;
	width: 880px;
	margin-left: auto;
	margin-right: auto;
}

.container_body p {
	font-size: 18px;
}

.container_body p:not(:first-of-type) {
	margin-top: 30px;
}

.container_body figcaption,
.container_body figcaption p {
	font-size: 14px;
	line-height: 1.6;
}

.container_body figcaption {
	text-align: center;
	margin-top: 10px;
}

@media screen and (max-width: 798px) {
	.container_body {
		border-top: 17px solid #4aac71;
	}

	.container_body-title {
		padding: calc(50 / 750 * 100vw) calc(40 / 640 * 100vw);
	}

	.container_body > section {
		width: 100%;
		padding: 0 30px;
	}

	.container_body p {
		font-size: 16px;
	}

	.container_body p:not(:first-of-type) {
		margin-top: calc(30 / 640 * 100vw);
	}

	.container_body figcaption,
	.container_body figcaption p {
		font-size: 12px;
		line-height: 1.5;
	}
}

/* == 2)western_beginning == */
.western_beginning > figure:first-child {
	margin-top: 7px;
}

.western_beginning > figure:last-child {
	position: relative;
	margin-top: 57px;
	z-index: 2;
}

.western_beginning-block {
	display: flex;
	position: relative;
	z-index: 2;
}

.western_beginning-block::after {
	content: "";
	position: absolute;
	background: url(../../img/roots/western/bg-western01.png);
	background-repeat: no-repeat;
	background-size: 1121px;
	background-position: 40% center;
	display: block;
	width: 1121px;
	height: 491px;
	top: -32px;
	left: -80px;
	z-index: 1;
}

.western_beginning-block .western_beginning-textblock {
	position: relative;
	text-align: left;
	z-index: 2;
	padding-top: 110px;
	margin-right: 23px;
}

.western_beginning-block .western_beginning-textblock h5 {
	margin-bottom: 36px;
}

.western_beginning-block figure {
	position: relative;
	margin-top: -39px;
	z-index: 2;
}

@media screen and (max-width: 798px) {
	.western_beginning {
		margin-top: calc(40 / 750 * 100vw);
	}

	.western_beginning > figure:last-child {
		margin-top: 50px;
	}

	.western_beginning figure{
		margin: 20px auto 0;
	}

	.western_beginning figure.western_beginning-pict{
		width: calc(500 / 750 * 100vw);
	}

	.western_beginning p:not(:first-of-type) {
		margin-top: calc(30 / 750 * 100vw);
	}
	.western_beginning-block {
		display: block;
	}
	.western_beginning-block::after {
		background-size: calc(720 / 750 * 100vw);
		background-position:center;
		width: calc(720 / 750 * 100vw);
		height:calc(315 / 750 * 100vw);
		top: 30px;
		left: 20px;
	}
	.western_beginning-block .western_beginning-textblock {
		position: relative;
		text-align: left;
		padding-top: 80px;
		margin-right:0;
	}
	.western_beginning-block .western_beginning-textblock h5 {
		margin-bottom: 30px;
	}
}

/* == 3)western_evaluation == */
.western_evaluation {
	position: relative;
	margin-top: 130px;
}

.western_evaluation p {
	position: relative;
	z-index: 2;
}

.western_evaluation p:nth-child(4) {
	width: 800px;
	margin: 30px auto 0;
}

.western_evaluation figure {
	margin-top: 20px;
	margin-bottom: 60px;
}

.western_evaluation figure.pict01 img {
	width: 100%;
}

.western_evaluation figure.pict01 figcaption {
	text-align: left;
}

.western_evaluation figure.pict02 {
	position: relative;
	width: 1200px;
	height: 1212px;
	margin-top: -78px;
	margin-left: -160px;
	margin-bottom: -30px;
	z-index: 1;
}

.western_evaluation figure.pict02 figcaption {
	position: absolute;
	border: 1px solid #4d4d4d;
	right: 200px;
	bottom: 80px;
	padding: 12px 20px 10px 45px;
	text-align: left;
}

@media screen and (max-width: 798px) {
	.container_body > section.western_evaluation {
		padding: 0;
	}
	.western_evaluation {
		margin-top: 80px;
	}

	.western_evaluation .western_title {
		margin: 0 30px 30px;
	}
	.western_evaluation p {
		padding: 0 30px;
	}

	.western_evaluation p:nth-child(4) {
		width: auto;
		margin: 30px auto 0;
	}

	.western_evaluation figcaption {
		position: static;
		bottom: inherit;
		left: inherit;
	}

	.western_evaluation figure.pict01 {
		padding: 0 30px;
	}

	.western_evaluation figure.pict02 {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0;
		z-index: 1;
	}

	.western_evaluation figure.pict02 figcaption {
		position: static;
		border: 1px solid #4d4d4d;
		right: 0;
		bottom: 0;
		padding: 12px 15px;
		text-align: left;
		margin: 30px 30px 50px;
	}
}

/* == 4)western_meet == */
.western_meet {
	margin-top: 105px;
}

.western_meet h4 img {
	width: 1200px;
	height: 849px;
	margin-left: -160px;
}

p.western_meet-caption {
	font-size: 14px;
	text-align: right;
	margin-top: 10px;
	margin-right: -150px;
}

@media screen and (max-width: 798px) {
	.container_body > section.western_meet {
		padding: 0;
	}
	.western_meet {
		margin-top: calc(85 / 640 * 100vw);
	}
	.western_meet p {
		padding: 0 30px;
	}


	.western_meet h4 img {
		width:100%;
		height: auto;
		margin-left: 0;
	}

	p.western_meet-caption {
		margin-right: 0;
	}
}

/* == 5)western_start == */
.western_start {
	margin-top: 130px;
}

.western_start-block01 {
	position: relative;
	margin-bottom: 550px;
	margin-top: 30px;
}

.western_start-block01 figure {
	position: absolute;
	margin-left: -160px;
	left: 0;
	top: -30px;
	z-index: 1;
}

.western_start-block01 figcaption {
	width: 170px;
	position: absolute;
	right: 40px;
	bottom: 220px;
}

.western_start-block01 p {
	position: absolute;
	width: 485px;
	right: 0;
}

.western_start-block02 {
	display: flex;
}

.western_start-block02-text {
	position: relative;
	width: 430px;
	z-index: 2;
}

.western_start-block02 figure {
	position: absolute;
	right: -160px;
	bottom: -50px;
	z-index: 0;
}

.western_start-block02 figure figcaption {
	position: absolute;
	right: 223px;
	bottom: 85px;
}

.western_start > figure {
	position: relative;
	margin-bottom: 60px;
	z-index: 2;
}

.western_start > figure img {
	width: 100%;;
}

.western_start figcaption {
	text-align: left;
}

@media screen and (max-width: 798px) {
	.container_body > section.western_start {
		padding: 0;
	}
	.western_start {
		margin-top: 80px;
	}

	.western_start .western_title {
		margin: 0 30px 30px;
	}
	.western_start p{
		margin: 0 30px;
	}
	.western_start-block01 {
		margin: 20px 0 0;
	}
 .western_start-block01 p {
	 position: static;
	 width: auto;
 }
	.western_start-block01 figure {
		position: relative;
		margin-left: 0;
		left: 0;
		top: -30px;
		z-index: 1;
	}

	.western_start-block01 figcaption {
		position: static;
		width: auto;
		margin: 10px 30px 0;
	}
	.western_start figure.western_start_pict02 {
		margin: 0 30px 30px;
	}

	.western_start-block02 {
		display: block;
	}

	.western_start-block02-text {
		position: relative;
		width: auto;
		z-index: 2;
	}

	.western_start-block02 figure {
		position: static;
		right: -160px;
		bottom: -50px;
		z-index: 0;
		margin-top: -40px;
	}

	.western_start-block02 figure figcaption {
		position: static;
		margin: -60px 0 0;
		text-align: center;
	}
}

/* == 6)western_style == */
.western_style {
	margin: 80px 0 100px;
}

.western_style > figure {
	margin-top: 20px;
}

.western_style > figure figcaption {
	text-align: right;
}

.western_style-block01 {
	display: flex;
	margin-top: 60px;
}

.western_style-block01 figure {
	margin-right: -130px;
	margin-left: 30px;
}

.western_style-block02 {
	display: flex;
	flex-flow: row-reverse;
	margin-top: -80px;
}

.western_style-block02 p {
	margin-top: 140px;
}

.western_style-block02 figure {
	margin-left: -130px;
	margin-right: 30px;
}

@media screen and (max-width: 798px) {
	.western_style {
		margin-top: calc(80 / 640 * 100vw);
	}
	.western_style .western_title {
	}

	.western_style-block01 {
		display: block;
		margin-top: 30px;
	}

	.western_style-block01 figure {
		margin: 20px 0 0;
	}

	.western_style-block02 {
		display: block;
		margin-top: 0;
	}
	.western_style-block02 p {
		margin-top: 50px;
	}
	.western_style-block02 figure {
		margin: 0 0 50px;
	}


}

/* == 7)western_cuisine == */
.container_body .western_cuisine {
	background: url("../../img/roots/western/bg-western03.png");
	background-repeat: repeat-y;
	width: 1200px;
	padding: 60px 100px;
}

.western_cuisine-block {
	background-color:rgba(255, 255, 255, 0.85);
	border-radius: 70px;
	box-shadow: 0 0 20px #c7291e;
	padding: 70px 90px;
}

.western_cuisine h4 {
	text-align: center;
	font-size: 45px;
	font-weight: lighter;
	margin-bottom: 40px;
}

.western_cuisine h4::after {
	background-color: #b60035;
	border-radius: 10px;
	content: "";
	display: block;
	height: 7px;
}

.western_cuisine h4 span {
	position: relative;
}

.western_cuisine h4 span::before,
.western_cuisine h4 span::after {
	content: "";
	display: block;
	position: absolute;
	background: url("../../img/roots/western/icon-western.png") no-repeat;
	background-size: 49px;
	width: 49px;
	height: 49px;
}

.western_cuisine h4 span::before {
	top: 10%;
	left: -65px;
}

.western_cuisine h4 span::after {
	top: 10%;
	right: -65px;
}

.western_cuisine figure {
	position: relative;
	margin-top: 20px;
	margin-left: -160px;
}

.western_cuisine figure figcaption {
	position: absolute;
	bottom: 190px;
	left: 260px;
}
@media screen and (max-width: 798px) {
	.container_body .western_cuisine {
		background: url("../../img/roots/western/bg-western03.png");
		background-repeat: repeat-y;
		width: auto;
		padding: 30px 20px;
	}

	.western_cuisine-block {
		border-radius: 35px;
		box-shadow: 0 0 20px #c7291e;
		padding: 30px 20px;
	}

	.western_cuisine h4 {
		font-size: 20px;
		line-height: 1.4em;
		margin-bottom: 30px;
	}

	.western_cuisine h4 span::before,
	.western_cuisine h4 span::after {
		content: "";
		display: block;
		position: absolute;
		background: url("../../img/roots/western/icon-western.png") no-repeat;
		background-size: 25px;
		width: 25px;
		height: 25px;
	}

	.western_cuisine h4 span::before {
		top: 25%;
		left: -40px;
	}

	.western_cuisine h4 span::after {
		top: 25%;
		right: -40px;
	}

	.western_cuisine h4::after {
		margin-top: 10px;
	}

	.western_cuisine figure {
		position: relative;
		margin-top: 20px;
		margin-left:0px;
	}
	.western_cuisine figure figcaption {
		position: static;
	}
}
/*
-------------------------
	[4]container_author
-------------------------
*/
.container_author-reference {
	font-size: 82%;
	margin: 0 auto;
	padding: 60px 0 40px;
	width: 800px;
}

.container_author-reference ul {
	list-style-type: none;
}

.container_author-reference ul li {
	position: relative;
	padding-left: 27px;
	margin-top: 5px;
}

.container_author-reference ul li::before {
	content: "";
	position: absolute;
	display: block;
	background: #5c5a57;
	width: 11px;
	height: 11px;
	left: 10px;
	top: 4px;
}

@media screen and (max-width: 798px) {
	.container_author-reference {
		width: auto;
		margin: 0 20px;
	}
}


#container_author {
  padding: 0px 0 50px;
}

@media screen and (max-width: 798px) {
	#container_author {
		padding: 0 15px 30px;
 }
}