@charset "UTF-8";
#breadcrumb {
    padding: 5px 0;
}
.sec_bdt .contents_inner {
	padding: 60px 0;
    border-top: solid 1px #ececec;
}
section .lead{
    font-size: 16px;
}
.sbnav04 li {
    width: 18%;
}
.title_deco span{
	display: inline-block;
	position: relative;
}
.title_deco span:before{
	position: absolute;
}
.title_deco span:after{
	position: absolute;
}
.title_garland span:before,
.title_garland span:after{
	width: 70px;
	content: url("../img/common/title_garland_left.svg");
	top:0;
}
.title_garland span:before{
	left: -45%;
}
.title_garland span:after{
	right: -45%;
	transform: scale(-1, 1);
}
.title_leaf span:before,
.title_leaf span:after{
	width: 70px;
	content: url("../img/common/title_leaf_left.svg");
	top:0;
}
.title_leaf span:before{
	left:-45%;
}
.title_leaf span:after{
	right:-45%;
	transform: scale(-1, 1);
}
@media screen and (max-width: 1100px){
	.sbnav04 li {
		width: 30%;
	}
	.sbnav04 li:nth-child(4),
	.sbnav04 li:nth-child(5){
		margin-top: 20px;
	}
}
@media screen and (max-width: 980px){
	.sbnav04 li {
		width: 100%;
	}
}
@media screen and (max-width: 740px){
	.sec_bdt .contents_inner {
		padding: 30px 0;
	}
	section .lead{
		font-size: 14px;
		line-height: 2.4rem;
		text-align: left;
	}
	.title_garland span:before,
	.title_garland span:after{
		width: 40px;
	}
	.title_leaf span:before,
	.title_leaf span:after{
		width: 40px;
	}
}
/*-----------------------------------

	lead

-----------------------------------*/
#lead {
    text-align: center;
	padding: 60px 0;
}
@media screen and (max-width: 740px){
	#lead {
		padding: 30px 0;
	}
	#lead .text{
		text-align: left;
	}
}
/*-----------------------------------

	style

-----------------------------------*/
#style {
    text-align: center;
}
#style section{
	width: 48%;
	margin-top: 30px;
}
#style  .stylebox{
	background: #fff;
	position: relative;
	padding: 50px 2.5% 20px;
}
#style .stylebox:before {
    position: absolute;
    border: solid 2px #5c5034;
    content: "";
    top: 8px;
    left: 8px;
    height: 100%;
    width: 100%;
}
#style  h4{
	font-size: 28px;
	text-align: left;
	display: inline-block;
	position: relative;
	margin-bottom: 20px;
}
#style  h4 span{
	position: relative;
	padding-left: 45px;
}
#style  h4 span:before{
	width: 40px;
	height: 40px;
	position: absolute;
	left: 0;
}
#style_01 h4 span:before{
	content: url( "../img/remuneration/icon_style_01.svg");
}
#style_02 h4 span:before{
	content: url( "../img/remuneration/icon_style_02.svg");
}
#style .textbox{
	text-align: left;
	margin-left: 15px;
}
#style .textbox p{
	font-size: 16px;
	line-height: 2.4rem;
	margin-top: 10px;
}
#style .textbox ul li{
	position: relative;
	margin-top: 5px;
	padding-left: 25px;
}
#style .textbox ul li:before{
	content:url("../img/common/icon_check.svg");
	width: 20px;
	position: absolute;
	left: 0;
}
#style h5{
	color: #fff;
	text-align: left;
	display: inline-block;
	padding: 0 10px;
}
#style_01 h5{
	background: #71d1cf;
}
#style_02 h5{
	background: #ff7f7f;
}
#style .img{
	margin: 10px auto;
    margin-left: 20px;
}
@media screen and (max-width: 980px) {
	#style .stylebox {
		padding: 40px 2.5% 15px;
	}
	#style section {
		width: 98%;
		max-width: 640px;
		margin: 30px auto 0;
		float: none!important;
	}
	#style_02{
		margin-top: 30px!important;
	}
}
@media screen and (max-width: 740px){
	#style .stylebox {
		padding: 15px 2.5%;
		border: solid 2px #5c5034;
		box-shadow: 0px 0px 0px 5px #ffffff;
	}
	#style .stylebox:before {
		position: static;
		border: none;
	}
	#style section {
		width: 98%;
		float: none!important;
	}
	#style h4 {
		font-size: 21px;
		margin-bottom: 10px;
	}
	#style h4 span {
		padding-left: 30px;
	}
	#style  h4 span:before{
		width: 25px;
		height:25px;
	}
	#style .img {
		width: 95%;
		margin: 0 auto 10px;
	}
	#style .textbox {
		margin-left: 0;
	}
	#style .textbox p {
		font-size: 14px;
		line-height: 2.4rem;
		margin-top: 10px;
	}
	#style .textbox ul li {
		padding-left: 15px;
	}
	#style .textbox ul li:before {
		width: 15px;
	}
}
/*-----------------------------------

	system

-----------------------------------*/
#system {
    text-align: center;
}
#system section{
	width: 48%;
	margin-top: 30px;
}
#system  .systembox{
	background: #fff;
	position: relative;
	padding: 50px 2.5% 20px;
}
#system  .systembox:before {
    position: absolute;
    border: solid 2px #5c5034;
    content: "";
    top: 8px;
    left: 8px;
    height: 100%;
    width: 100%;
}
#system  h4{
	font-size: 32px;
	margin-bottom: 20px;
}
#system  .img{
	margin: 10px auto;
}
#system  .text_p{
	font-size: 21px;
}
#system table{
	width: 100%;
	background: #fff;
	margin: 40px 0 0 10px;
}
#system table th,
#system table td{
	padding: 5px 0;
}
#system #system_01 table th{
	background: #fffad0;
}
#system #system_02 table th{
	background: #e6ffd2;
}
#system #system_01 table td:last-child{
	border-top: solid 1px #fffad0;
}
#system #system_02 table td:last-child{
	border-top: solid 1px #e6ffd2;
}
#system table td span{
	font-size: 30px;
}
#system .bg_title{
	position: relative;
    padding: 10px 2.5% 8px 22%;
}
#system .bg_title:before{
    content: url(../img/common/incon_first.svg);
    width: 28px;
    height: 32px;
    position: absolute;
    left: 18%;
    top: 25px;
}
@media screen and (max-width: 980px) {
	#system  .systembox {
		padding: 40px 2.5% 15px;
	}
	#system  section {
		width: 98%;
		max-width: 640px;
		margin: 20px auto 0;
		float: none!important;
	}
	#system table {
		margin: 20px 0 0 0;
	}
	#system .bg_title{
		position: relative;
		padding: 10px 2.5% 8px 45px;
	}
	#system .bg_title:before{
		width: 20px;
		height: 32px;
		left: 10px;
		top: 15px;
	}
}
@media screen and (max-width: 740px){
	#system  .systembox {
		padding: 15px 2.5%;
		border: solid 2px #5c5034;
		box-shadow: 0px 0px 0px 5px #ffffff;
	}
	#system .systembox:before {
		position: static;
		border: none;
	}
	#system section {
		width: 98%;
		float: none!important;
	}
	#system h4 {
		font-size: 21px;
		margin-bottom: 10px;
	}
	#system .img {
		width: 75%;
	}
	#system .text_p {
		font-size: 16px;
	}
	#system table td span {
		font-size: 21px;
	}
}

/*-----------------------------------

	guarantee

-----------------------------------*/
#guarantee {
    text-align: center;
}
#guarantee div div{
	background: #fff;
	position: relative;
	margin-top: 30px;
	padding: 20px 2.5% 20px;
}
#guarantee div div:before {
    content: "";
    width: 250px;
    height: 5px;
    background: #ff7f7f;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#guarantee div div .img {
	width: 900px;
    margin: 10px auto;
}
#guarantee .text{
	font-size: 16px;
	text-align: left;
	margin-top: 20px;
}
@media screen and (max-width: 740px){
	#guarantee div div .img {
		width: 100%;
		max-width: 400px;
		margin: 10px auto;
	}
	#guarantee .text{
		font-size: 14px;
		margin-top: 15px;
	}
}
/*-----------------------------------

	bonus

-----------------------------------*/
#bonus {
    text-align: center;
}
#bonus .contents_inner{
    position: relative;
}
#bonus .balloon{
	width: 200px;
	position: absolute;
	right: 0;
	top:40px;
}
#bonus section{
	width: 48%;
	background: #fff;
	position: relative;
	margin-top: 30px;
	padding: 20px 2.5% 20px;
}
#bonus section:before {
    content: "";
    width: 250px;
    height: 5px;
    background: #ff7f7f;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#bonus h4{
	font-size: 28px;
	margin-bottom: 20px;
}
#bonus .pickup{
	font-size: 18px;
	margin-bottom: 10px;
}
#bonus section .img {
    margin: 10px auto;
}
#bonus section .text{
	font-size: 16px;
	line-height: 2.4rem;
	text-align: left;
	margin-top: 10px;
}
@media screen and (max-width: 980px) {
	#bonus .balloon {
		width: 18%;
		right: 0;
		top: 0;
	}
}
@media screen and (max-width: 740px){
	#bonus section{
		width: 100%;
		margin-top: 30px;
		padding: 20px 2.5% 20px;
		border-radius: 20px;
	}
	#bonus .balloon {
		width: 22%;
		right: 0;
		top: 0;
	}
	#bonus .pickup {
		font-size: 16px;
		margin-bottom: 10px;
	}
	#bonus h4 {
		font-size: 21px;
		margin-bottom: 20px;
	}
	#bonus section .text{
		font-size: 14px;
		line-height: 2.4rem;
		text-align: left;
		margin-top: 10px;
	}
}
/*-----------------------------------

	example

-----------------------------------*/
#example {
    text-align: center;
}
#example ul{
	margin-top: 40px;
}
#example ul li{
	width: 32%;
	float: left;
	margin-right: 2%;
}
#example ul li:nth-child(3n){
	margin-right:0;
}
#example h4 {
    margin-bottom: 10px;
}
#example .img{
	margin-bottom: 10px;
}
#example img {
    width: 100%;
	height: 250px;
	object-fit: cover;
}
#example .num_01 {
    font-size:90px;
	line-height: 10.0rem;
    display: inline-block;
}
#example .yen {
    font-size: 32px;
}
#example .num_02 {
    font-size: 21px;
}
#example .link_btn{
	margin-top: 20px;
}
@media screen and (max-width: 740px){
	#example ul {
		margin-top: 20px;
	}
	#example ul li{
		width: 100%;
		float: none;
		margin:10px 0 0;
	}
	#example img {
		height: 180px;
	}
	#example .num_01 {
		font-size: 28px;
		line-height: 2.8rem;
	}
	#example .yen {
		font-size: 21px;
	}
	#example .num_02 {
		font-size: 24px;
	}
}