@charset "utf-8";


#westernherb #mv{
	position: relative;
	padding-top: 27.3%;
	background: url("../img/westernherb/westernherb_mv.png") no-repeat center center / cover;
	overflow-x: hidden;
}
#westernherb #mv h1{
	top: 50%;
	transform: translateY(-100%);
}

#westernherb .westernherb_wrap {
	margin-top: -115px;
	padding-top: 70px;
	padding-bottom: 260px;
	background-image: url("../common/img/kasou_bg-l.png"), url("../common/img/kasou_bg-r.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right top;
}

#westernherb .westernherb_wrap h2{
	font-size: 4rem;
	line-height: 1.44;
	color: #036eb7;
	box-sizing: border-box;
}
#westernherb .westernherb_wrap h3{
	line-height: 0;
	margin-bottom: 45px;
}
#westernherb .westernherb_wrap > .inner{
	margin-bottom: 50px;
	position: relative;
	z-index: 2;
}
#westernherb .westernherb_wrap > .inner > p{
	font-size: 2rem;
	line-height: 2.425;
	color: #036eb7;
}

#westernherb .westernherb_wrap main{
	position: relative;
}
#westernherb .westernherb_wrap main .photo{
	position: absolute;
	top: 0;
	right: 50%;
	transform: translateX(-170px);
	z-index: 2;
}

#westernherb .westernherb_wrap #section01{
	position: relative;
	background-image: url("../img/westernherb/bg_01.png");
	background-repeat: no-repeat;
	background-position: calc(50% + 230px) 135px;
	margin-bottom: 110px;
}
#westernherb .westernherb_wrap #section01 h2,
#westernherb .westernherb_wrap #section01 h2 + p{
	padding-left: 395px;
}
#westernherb .westernherb_wrap #section01 h2{
	margin-bottom: 45px;
}
#westernherb .westernherb_wrap #section01 h2::after{
	display: inline-block;
	content: "";
	width: 113px;
	height: 92px;
	background: url("../img/westernherb/num_01.svg") no-repeat center center / cover;
	float: right;
	margin-top: -40px;
}
#westernherb .westernherb_wrap #section01 h2 + p{
	font-size: 1.8rem;
	line-height: 2;
	margin-bottom: 70px;
}
#westernherb .westernherb_wrap #section01 .herb_wrap{
	padding-left: 60px;
	padding-bottom: 65px;
}
#westernherb .westernherb_wrap #section01 .herb_wrap ul{
	max-width: 880px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 5px;
}
#westernherb .westernherb_wrap #section01 .herb_wrap ul li{
	margin-left: 55px;
	margin-bottom: 30px;
}
#westernherb .westernherb_wrap #section01 .herb_wrap ul li:nth-child(3n+1){
	margin-left: 0;
}
#westernherb .westernherb_wrap #section01 .herb_wrap ul li dl dt{
	line-height: 0;
	margin-bottom: 5px;
}
#westernherb .westernherb_wrap #section01 .herb_wrap ul li dl dd{
	font-size: 1.9rem;
	font-weight: bold;
	text-align: center;
	color: #036eb7;
}
#westernherb .westernherb_wrap #section01 .herb_wrap ul li dl dd sup{
	font-size: 70%;
	font-weight: normal;
}
#westernherb .westernherb_wrap #section01 .herb_wrap .herb_title{
	height: 52px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	font-weight: bold;
	border-top: 1px solid #036eb7;
	border-bottom: 1px solid #036eb7;
	margin-bottom: 22px;
}
#westernherb .westernherb_wrap #section01 .herb_wrap ol li{
	font-size: 1.7rem;
	line-height: 2;
	font-feature-settings: "pkna";
}

#westernherb .westernherb_wrap #section02{
	position: relative;
	background-image: url("../img/westernherb/bg_02.png");
	background-repeat: no-repeat;
	background-position: calc(50% - 230px) top;
	padding: 45px 0;
	margin-bottom: 60px;
}
#westernherb .westernherb_wrap #section02 .inner{
	padding: 0 60px;
}
#westernherb .westernherb_wrap #section02 h2{
	margin-bottom: 10px;
}
#westernherb .westernherb_wrap #section02 h2 + p{
	font-size: 1.8rem;
	line-height: 2;
	margin-bottom: 25px;
}
#westernherb .westernherb_wrap #section02 ul{
	max-width: 880px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#westernherb .westernherb_wrap #section02 ul li{
	line-height: 0;
	margin-bottom: 20px;
}
#westernherb .westernherb_wrap #section02 ul li:last-child{
	margin-bottom: 0;
}
#westernherb .westernherb_wrap #section02 ul li p{
	text-align: right;
	margin-top: 22px;
}

#westernherb .westernherb_wrap #section03{
	position: relative;
	background-image: url("../img/westernherb/bg_03.png");
	background-repeat: no-repeat;
	background-position: calc(50% + 200px) top;
	padding-bottom: 25px;
	margin-bottom: 110px;
}
#westernherb .westernherb_wrap #section03 h2{
	padding-left: 95px;
	margin-bottom: 45px;
}
#westernherb .westernherb_wrap #section03 p{
	padding: 0 60px;
	font-size: 1.8rem;
	line-height: 2;
}

#westernherb .westernherb_wrap #section04{
	position: relative;
	background-image: url("../img/westernherb/bg_04.png");
	background-repeat: no-repeat;
	background-position: calc(50% - 230px) top;
	padding: 45px 0;
}
#westernherb .westernherb_wrap #section04 .inner{
	padding: 0 60px;
}
#westernherb .westernherb_wrap #section04 h2{
	margin-bottom: 10px;
}
#westernherb .westernherb_wrap #section04 h2 + p{
	font-size: 1.8rem;
	line-height: 2;
	margin-bottom: 25px;
}
#westernherb .westernherb_wrap #section04 ul{
	max-width: 880px;
	display: flex;
	justify-content: space-between;
}
#westernherb .westernherb_wrap #section04 ul li{
	max-width: 420px;
}
#westernherb .westernherb_wrap #section04 ul li figure figcaption{
	font-size: 1.6rem;
	line-height: 1.375;
}


@media screen and (max-width: 1320px){
	#westernherb #mv h1{
		transform: translateY(-80%);
	}
	#westernherb #mv h1 .inner {
		width: calc(67vw + 96px);
	}
	
	#westernherb .westernherb_wrap{
		margin-top: -7%;
	    padding-top: 7%;
	}
	#westernherb .westernherb_wrap h2{
		font-size: 3.2rem;
		line-height: 1.2;
	}
	#westernherb .westernherb_wrap h3{
		margin-bottom: 30px;
	}
	#westernherb .westernherb_wrap p{
		max-width: 880px;
	}
	#westernherb .westernherb_wrap > .inner{
		width: 88%;
	}
	#westernherb .westernherb_wrap > .inner > p {
		margin-left: 0;
	}
	
	#westernherb .westernherb_wrap main .photo{
		width: 40vw;
		transform: translateX(-100px);
	}
	#westernherb .westernherb_wrap #section01{
		background-position: 5vw 105px;
	}
	#westernherb .westernherb_wrap #section01 h2,
	#westernherb .westernherb_wrap #section01 h2 + p{
		padding-left: 38vw;
	}
	#westernherb .westernherb_wrap #section01 h2{
		display: inline-block;
	}
	#westernherb .westernherb_wrap #section01 h2::after{
		margin-right: -130px;
	}
	#westernherb .westernherb_wrap #section01 h2 + p{
		margin-bottom: 35px;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap{
		width: 88%;
		max-width: 880px;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap ul li{
		width: 30%;
		max-width: 226px;
		margin-left: 5%;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap ul li dl dd{
		font-size: 1.6rem;
	}
	
	#westernherb .westernherb_wrap #section02{
		background-position: right 5vw top;
	}
	#westernherb .westernherb_wrap #section02 ul li{
		width: 48.5%;
	}
	
	#westernherb .westernherb_wrap #section03{
		background-position: calc(5vw - 60px) top;
	}
	
	#westernherb .westernherb_wrap #section04{
		background-position: right 5vw top;
	}
	#westernherb .westernherb_wrap #section04 ul li{
		width: 48.5%;
	}
}

@media screen and (max-width: 767px){
	#westernherb #mv {
		margin-top: 50px;
		padding-top: 44.4%;
		background: url(../img/westernherb/sp/westernherb_mv.png) no-repeat center center / cover;
	}
	#westernherb #mv h1 {
		font-size: 7.47vw;
		line-height: 1.4;
		transform: translateY(-70%);
	}
	
	#westernherb .westernherb_wrap {
		background: none;
		padding-bottom: 0;
	}
	#westernherb .westernherb_wrap h2{
		font-size: 6vw;
		line-height: 1.52;
	}
	#westernherb .westernherb_wrap h3{
		margin-bottom: 20px;
	}
	
	#westernherb .westernherb_wrap > .inner{
		margin-bottom: 15px;
	}
	#westernherb .westernherb_wrap > .inner > p {
		font-size: 4vw;
		line-height: 2.17;
	}
	
	#westernherb .westernherb_wrap main .photo{
		width: 100%;
		position: static;
		line-height: 0;
		transform: none;
	}	
	
	#westernherb .westernherb_wrap #section01{
		background-image: url(../img/westernherb/sp/bg_01.png);
		background-position: left top;
		background-size: cover;
		padding: 30px 0 35px;
		margin-bottom: 0;
	}
	#westernherb .westernherb_wrap #section01 h2,
	#westernherb .westernherb_wrap #section01 h2 + p{
		padding-left: 0;
	}
	#westernherb .westernherb_wrap #section01 h2{
		margin-bottom: 25px;
	}
	#westernherb .westernherb_wrap #section01 h2::before {
		display: inline-block;
		vertical-align: middle;
		content: "";
		width: 15vw;
		height: 12.27vw;
		background: url(../img/westernherb/sp/num_01.svg) no-repeat center center / cover;
		float: left;
		margin: 10px 15px 0 0;
	}
	#westernherb .westernherb_wrap #section01 h2::after{
		display: none;
	}
	#westernherb .westernherb_wrap #section01 h2 + p{
		font-size: 3.73vw;
		margin-bottom: 25px;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap{
		width: 100%;
		padding-left: 0;
		padding-bottom: 0;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap ul{
		margin-bottom: 10px;
		flex-direction: column;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap ul li{
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-bottom: 25px;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap ul li dl{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap ul li dl dt{
		width: 30vw;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap ul li dl dd{
		width: calc(100% - 35vw);
		font-size: 4.13vw;
		text-align: left;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap .herb_title{
		height: auto;
		font-size: 4vw;
		text-align: center;
		padding: 10px 0;
		margin-bottom: 10px;
	}
	#westernherb .westernherb_wrap #section01 .herb_wrap ol li{
		font-size: 2.8vw;
	}
	
	#westernherb .westernherb_wrap #section02{
		background: none;
		padding: 20px 0 40px;
		margin-bottom: 0;
	}
	#westernherb .westernherb_wrap #section02 .inner{
		padding: 0;
	}
	#westernherb .westernherb_wrap #section02 h2::before {
		display: inline-block;
		vertical-align: middle;
		content: "";
		width: 17.6vw;
		height: 12.27vw;
		background: url(../img/westernherb/sp/num_02.svg) no-repeat center center / cover;
		float: left;
		margin: 10px 15px 0 0;
	}
	#westernherb .westernherb_wrap #section02 h2 + p{
		font-size: 3.73vw;
	}
	#westernherb .westernherb_wrap #section02 ul li{
		width: 50%;
	}
	#westernherb .westernherb_wrap #section02 ul li:nth-child(even){
		text-align: right;
	}
	#westernherb .westernherb_wrap #section02 ul li:last-child,
	#westernherb .westernherb_wrap #section02 ul li:nth-last-child(2){
		margin-bottom: 5px;
	}
	#westernherb .westernherb_wrap #section02 ul li img{
		width: 43vw;
	}
	#westernherb .westernherb_wrap #section02 ul + p{
		font-size: 2.8vw;
		text-align: right;
	}
	
	#westernherb .westernherb_wrap #section03{
		background-image: url(../img/westernherb/sp/bg_03.png);
		background-position: left top;
		background-size: cover;
		padding: 30px 0 40px;
		margin-bottom: 0;
	}
	#westernherb .westernherb_wrap #section03 h2{
		margin-bottom: 10px;
		padding: 0;
	}
	#westernherb .westernherb_wrap #section03 h2::before {
		display: inline-block;
		vertical-align: middle;
		content: "";
		width: 16.67vw;
		height: 12.27vw;
		background: url(../img/westernherb/sp/num_03.svg) no-repeat center center / cover;
		float: left;
		margin: 10px 15px 0 0;
	}
	#westernherb .westernherb_wrap #section03 p{
		padding: 0;
		font-size: 3.73vw;
	}
	
	#westernherb .westernherb_wrap #section04{
		background: none;
		padding: 30px 0 40px;
		margin-bottom: 0;
	}
	#westernherb .westernherb_wrap #section04 .inner{
		padding: 0;
	}
	#westernherb .westernherb_wrap #section04 h2{
		position: relative;
		padding-left: calc(17.87vw + 15px);
	}
	#westernherb .westernherb_wrap #section04 h2::before {
		display: inline-block;
		vertical-align: middle;
		content: "";
		width: 17.87vw;
		height: 12.27vw;
		background: url(../img/westernherb/sp/num_04.svg) no-repeat center center / cover;
		position: absolute;
		top: 0;
		left: 0;
		margin: 10px 15px 0 0;
	}
	#westernherb .westernherb_wrap #section04 h2 + p{
		font-size: 3.73vw;
	}
	#westernherb .westernherb_wrap #section04 ul li{
		width: 43vw;
	}
	#westernherb .westernherb_wrap #section04 ul li figure figcaption{
		font-size: 2.8vw;
	}
}