@charset "utf-8";


/**************************************************50
 * product
 **************************************************/
#product{
	background-color: #5654A2;
	text-align: center;
}
#product_box{
	background-color: #F7F7F7;
}
#product h2{
}
#product h2 img{
}
#products{
}
#products .products > a:first-child:hover:before{
	border: 0.75em solid #5654A2;
}
@media screen and (max-width:767px){
	#product{
		padding: 3.125%;
	}
	#product_box{
		border-radius: 0.9375em;
		padding: 3.333333333333333% 0;
	}
	#product h2{
		margin-bottom: 6.25%;
	}
	#product h2 img{
		width: 80%;
	}
	#products{
	}
}
@media screen and (min-width:768px){
	#product{
		padding: 1em;
	}
	#product_box{
		border-radius: 1.875em;
	}
	#product h2{
		margin-bottom: 3.125em;
	}
	#product h2 img{
		width: 29.25em;
	}
	#products{
		margin-bottom: -3.125em
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#product_box{
		padding: 15px;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#product_box{
		padding: 20px;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#product_box{
		padding: 25px;
	}
}
@media screen and (min-width:1200px) and (max-width:1279px){
	#product_box{
		padding: 30px;
	}
}
@media screen and (max-width:1279px){
	#product_box{
		background-position: center center;
		background-repeat: repeat;
		background-size: 36px auto;
	}
	#product.lazyloaded #product_box{
		background-image: url("https://yaokin.lucias.co.jp/lfw/images/user/product/pattern.webp");
	}
}
@media screen and (min-width:1280px){
	#product_box{
		background-repeat:no-repeat, no-repeat, repeat;
		background-size: 240px auto, 300px auto, 42px auto;
	}
	#product.lazyloaded #product_box{
		background-image: url("https://yaokin.lucias.co.jp/lfw/images/user/product/wave.svg"),  url("https://yaokin.lucias.co.jp/lfw/images/user/product/fan.webp"),  url("https://yaokin.lucias.co.jp/lfw/images/user/product/pattern.webp");
	}
	#products{
		max-width: 75em;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (min-width:1280px) and (max-width:1365px){
	#product_box{
		padding: 30px;
	}
	#product_box{
		background-position: calc(0% + 20px) 90%, right 25%, center center;
	}
}
@media screen and (min-width:1366px){
	#product_box{
		padding: 6.25em 2.5em;
	}
}
@media screen and (min-width:1366px) and (max-width:15990px){
	#product_box{
		background-position: calc(50% - 500px) 90%, calc(50% + 500px) 12.5%, center center;
	}
}
@media screen and (min-width:1600px){
	#product_box{
		background-position: calc(50% - 600px) 90%, calc(50% + 600px) 25%, center center;
	}
}


/**************************************************50
 * fertile
 **************************************************/
#fertile{
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: left;
}
_::-webkit-full-page-media, _:future, :root #fertile{
	background-attachment: scroll;
}
#fertile.lazyloaded{
	background-image: url("https://yaokin.lucias.co.jp/lfw/images/user/fertile/back_010.jpg");
}
#fertile_box{
	color: #FFFFFF;
}
#fertile_box h2{
}
#fertile_box h2 span{
}
#fertile_box_inner{
}
#fertile_box_inner p{
}
#fertile_box_inner p + p{
	margin-top: 1em;
}
@media screen and (max-width:767px){
	#fertile{
		padding-top: 12.5%;
		padding-bottom: 37.5%;
	}
	#fertile_box{
		background-color: rgba(56, 76, 112, 0.4);
		margin-left: auto;
		margin-right: auto;
		padding: 1.5625% 3.125% 1.5625%;
		width: 87.5%;
	}
	#fertile_box h2{
		line-height: 1.4;
		margin-bottom: 1em;
	}
	#fertile_box h2 span{
		disp;lay: block;
		padding: 0.25em 0 0;
		font-size: 137.5%;
	}
	#fertile_box_inner{
	}
}
@media screen and (min-width:768px){
	#fertile{
		padding-top: 6.25em;
	}
	#fertile_box{
		position: relative;
	}
	#fertile_box h2{
		color: #576B8D;
		position: absolute;
		top: 50%;
		-ms-transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		text-align: center;
	}
	#fertile_box h2 span{
		font-size: 175%;
		text-shadow:
			rgba(255, 255, 255, 0.2) 2px 0px 0px, rgba(255, 255, 255, 0.2) -2px 0px 0px,
			rgba(255, 255, 255, 0.2) 0px -2px 0px, rgba(255, 255, 255, 0.2) 0px 2px 0px,
			rgba(255, 255, 255, 0.2) 2px 2px 0px, rgba(255, 255, 255, 0.2) -2px 2px 0px,
			rgba(255, 255, 255, 0.2) 2px -2px 0px, rgba(255, 255, 255, 0.2) -2px -2px 0px,
			rgba(255, 255, 255, 0.2) 1px 2px 0px, rgba(255, 255, 255, 0.2) -1px 2px 0px,
			rgba(255, 255, 255, 0.2) 1px -2px 0px, rgba(255, 255, 255, 0.2) -1px -2px 0px,
			rgba(255, 255, 255, 0.2) 2px 1px 0px, rgba(255, 255, 255, 0.2) -2px 1px 0px,
			rgba(255, 255, 255, 0.2) 2px -1px 0px, rgba(255, 255, 255, 0.2) -2px -1px 0px,
			rgba(255, 255, 255, 0.2) 1px 1px 0px, rgba(255, 255, 255, 0.2) -1px 1px 0px,
			rgba(255, 255, 255, 0.2) 1px -1px 0px, rgba(255, 255, 255, 0.2) -1px -1px 0px;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	#fertile_box_inner{
		background-color: rgba(25, 74, 156, 0.5);
		padding: 2.5em 3em;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#fertile{
		padding-bottom: -webkit-calc(6.25em + 15%);
		padding-bottom: calc(6.25em + 15%);
	}
	#fertile_box h2{
		left: 62.5%;
		width: 37.5%;
	}
	#fertile_box_inner{
		width: 62.5%;
	}
}
@media screen and (min-width:1024px){
	#fertile{
		padding-bottom: -webkit-calc(12.5em + 2.5%);
		padding-bottom: calc(12.5em + 2.5%);
	}
	#fertile_box h2{
		left: 53.5%;
		width: 46.5%;
	}
	#fertile_box_inner{
		width: 53.5%;
	}
}


/**************************************************50
 * selected
 **************************************************/
#selected{
	background-repeat: no-repeat;
	color: #595757;
	text-align: left;
}
#selected.lazyloaded{
	background-image: url("https://yaokin.lucias.co.jp/lfw/images/user/selected/back.svg");
	background-image: url("https://yaokin.lucias.co.jp/lfw/images/user/selected/back.webp");
}
#selected figure{
}
#selected figure figcaption{
}
#selected figure figcaption h2{
	line-height: 1.5;
}
#selected figure > picture{
	text-align: center;
}
#selected figure > picture img{
	width: 100%;
}
#selected p{
}
#selected .link_to{
}
@media screen and (max-width:767px){
	#selected{
		margin-top: -25%;
		padding-bottom: 12.5%;
	}
	#selected figure{
	}
	#selected figure figcaption{
	}
	#selected figure figcaption h2{
		margin-top: 3.125%;
		margin-bottom: 3.125%;
		padding: 0 3.125%;
	}
	#selected figure figcaption h2 span{
		font-size: 137.5%;
	}
	#selected figure > picture{
		margin-bottom: 3.125%;
		padding: 0 3.125%;
	}
	#selected p{
		padding: 0 3.125%;
	}
	#selected .link_to{
		margin-top: 6.25%;
	}
}
@media screen and (min-width:768px){
	#selected{
		padding-bottom: 6.25em;
	}
	#selected figure{
	}
	#selected figure figcaption{
	}
	#selected figure figcaption h2{
		margin-top: 3.125em;
		margin-bottom: 1.5625em;
	}
	#selected figure figcaption h2 span{
		font-size: 175%;
	}
	#selected figure > picture{
	}
	#selected .link_to{
		margin-top: 3.125em;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#selected{
		margin-top: -15%;
	}
	#selected figure > picture{
		margin-bottom: 1.5625em;
	}
	#selected figure > picture img{
		width: 720px;
	}
}
@media screen and (max-width:1023px){
	#selected{
		background-position: 67.5% top;
		background-size: 300% 100%;
	}
}
@media screen and (min-width:1024px){
	#selected{
		background-position: center top;
		background-size: 100% 100%;
		margin-top: -webkit-calc(-6.25em - 2.5%);
		margin-top: calc(-6.25em - 2.5%);
		padding-top: -webkit-calc(6.25em + 2.5%);
		padding-top: calc(6.25em + 2.5%);
	}
	#selected figure{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		margin-top: -15%;
		table-layout: fixed;
		width: 100%;
	}
	#selected figure figcaption{
		padding-left: 2em;
		display: table-cell;
		position: relative;
		vertical-align: middle;
	}
	#selected figure > picture{
		display: table-cell;
		vertical-align: middle;
		width: 45.75%
	}
}
@media screen and (min-width:1280px){
	#selected figure > picture img{
		margin-right: -25%;
		width: 125%;
		max-width: 125%;
	}
}


/**************************************************50
 * carefully
 **************************************************/
#carefully{
	color: #595757;
	text-align: left;
}
#carefully figure{
}
#carefully figure figcaption{
}
#carefully figure figcaption h2{
}
#carefully figure figcaption h2 img{
	width: 100%;
}
#carefully figure figcaption p{
}
#carefully figure picture{
}
#carefully figure picture img{
	width: 100%;
}
@media screen and (max-width:767px){
	#carefully{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#carefully figure{
	}
	#carefully figure figcaption{
		margin-bottom: 6.25%;
	}
	#carefully figure figcaption h2{
		margin-bottom: 3.125%;
	}
	#carefully figure figcaption p{
		padding: 0 3.125%;
	}
	#carefully figure picture{
		padding: 0 3.125%;
	}
	#carefully .link_to{
		margin-top: 6.25%;
	}
}
@media screen and (min-width:768px){
	#carefully{
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#carefully figure{
	}
	#carefully figure figcaption{
	}
	#carefully figure figcaption h2{
		margin-bottom: 3.125em;
	}
	#carefully figure figcaption p{
	}
	#carefully .link_to{
		margin-top: 3.125em;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#carefully figure figcaption{
		margin-bottom: 3.125em;
	}
	#carefully figure picture{
		padding: 0 12.5%;
	}
}
@media screen and (max-width:1023px){
	#carefully figure figcaption h2{
		padding: 0 12.5%;
	}
}
@media screen and (min-width:1024px){
	#carefully{
		padding-right: 0;
		max-width: 120em;
	}
	#carefully figure:after{
		clear: both;
		content: "";
		display: block;
	}
	#carefully figure figcaption{
		float: left;
		width: 40%;
	}
	#carefully figure picture{
		float: right;
		width: 57.5%;
	}
	#carefully figure picture img{
		position: relative;
		z-index: -1;
	}
}


/**************************************************50
 * news_wrap
 **************************************************/
#news_wrap{
	background-color: #EDEFF0;
	text-align: center;
}
#news{
}
#news h2{
	line-height: 1.2;
}
#news > hr{
}
#news_list{
	text-align: left;
}
#news_list > a{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	line-height: 1.5;
	transition: opacity 0.2s ease-out 0s;
}
#news_list > a:hover{
	opacity: 0.7;
}
#news_list > a time{
}
#news_list > a p{
}
@media screen and (max-width:319px){
}
@media screen and (min-width:320px) and (max-width:359px){
}
@media screen and (min-width:360px) and (max-width:413px){
}
@media screen and (min-width:414px) and (max-width:479px){
}
@media screen and (min-width:480px) and (max-width:639px){
}
@media screen and (min-width:640px) and (max-width:767px){
}
@media screen and (max-width:767px){
	#news_wrap{
		padding-top: 12.5%;
		padding-bottom: 12.5%;
	}
	#news{
		margin-bottom: 6.25%;
	}
	#news h2{
	}
	#news h2 span{
		font-size: 175%;
	}
	#news > hr{
		margin: 6.25% auto;
		width: 93.75%;
	}
	#news_list{
	}
	#news_list > a{
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 0.25em 0;
		width: 87.5%;
	}
	#news_list > a + a{
		margin-top: 3.125%;
	}
	#news_list > a time{
	}
	#news_list > a p{
	}
}
@media screen and (min-width:768px){
	#news_wrap{
		padding-top: 6.25em;
		padding-bottom: 6.25em;
	}
	#news{
		padding-left: 15.75em;
		margin: 0 auto 3.125%;
		position: relative;
	}
	#news h2{
		position: absolute;
		top: 50%;
		left: 0;
		-ms-transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		width: 13.75em;
	}
	#news h2 span{
		font-size: 175%;
	}
	#news > hr{
		height: 100%;
		margin: 0;
		position: absolute;
		top: 50%;
		left: 13.75em;
		-ms-transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		width: 1px;
	}
	#news_list{
		padding: 0.25em 0;
	}
	#news_list > a{
		border-collapse: separate;
		border-spacing: 0;
		display: table;
		padding: 0.25em 0;
		table-layout: fixed;
		text-decoration: none;
		width: 100%;
	}
	#news_list > a time{
		display: table-cell;
		vertical-align: middle;
		width: 6em;
	}
	#news_list > a p{
		display: table-cell;
		vertical-align: middle;
	}
	#news_list > a p span{
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#news{
		width: 100%;
	}
}
@media screen and (min-width:1024px) and (max-width:1279px){
	#news{
		width: 93.75%;
	}
}
@media screen and (min-width:1280px){
	#news{
		width: 80%;
	}
}