@import url(common.css);
@import url(slick.css);
@import url(slick-theme.css);

/* ------------------------------------------------
  #kv
------------------------------------------------ */

#kv{
	background: 50% 50% no-repeat;
	background-image: url(../img/basic/kv_bg.png);
	padding: 70px 0 40px;
	margin: -22px auto 0;
}
#kv .inner h1{
	color: #006a2c;
	font-size: 38px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.02em;
}
#kv .inner .subtitle{
	color: #636363;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.8;
	text-align: center;
	margin: 20px auto 0;
}
#kv .inner .subtitle span{
	color: #5cb531;
}


/*----- SP -----*/

@media screen and (max-width: 768px) {
	#kv {
		margin: 0 auto;
    padding: 37px 0 47px;
    background-size: 150%;
    background-position-y: 70%;
    background-repeat: no-repeat;
    background-position-x: center;
  }
  #kv .inner {
	  padding: 0 20px;
	}
  #kv .inner h1 {
  	font-size: 20px;
  }
  #kv .inner .subtitle {
    font-size: 14px;
    margin: 10px auto 0;
  }
}

/* ------------------------------------------------
  #contents
------------------------------------------------ */


/* ----------------------------
  common
---------------------------- */

/*.badge1,
.badge3,
.badge2{
	position: relative;
}
.badge1::before,
.badge3::before,
.badge2::before{
	content: '';
	width: 95px;
	height: 95px;
	display: inline-block;
	background-image: url(../img/basic/badge1.png);
	position: absolute;
	top: -12px;
	left: 90px;
}
.badge1::before{
	background-image: url(../img/basic/badge1.png);
}
.badge2::before{
	background-image: url(../img/basic/badge2.png);
}
.badge3::before{
	background-image: url(../img/basic/badge3.png);
}*/
.dot{
	position: relative;
}
.dot::before,
.dot::after{
	content: '';
	width: 0;
	height: 100%;
	display: inline-block;
	border-right: 3px dotted #5cb531;
	position: absolute;
}
.dot::before{
	left: 0;
	top: 0;
	transform: rotate(-40deg);
}
.dot::after{
	right: 0;
	top: 0;
	transform: rotate(40deg);
}

/* ----------------------------
  #anchor
---------------------------- */

#anchor{
  padding: 43px 15px 45px;
}
#anchor ul{
  margin: 0 auto;
}

/*----- breakpoint-style -----*/

@media screen and (max-width: 880px) {
	#anchor ul li {
		font-size: 13px;
	}
}

/*----- SP -----*/

@media screen and (max-width: 768px) {
	#anchor{
		padding: 15px 0 6px;
    margin: 0 auto;
    text-align: center;
  }
	#anchor ul  {
    display: inline-block;
    text-align: left;
  }
	#anchor ul li {
    border-bottom: none;
		background: url(../img/sp/line_dashed.png) repeat-x 0 100%;
    background-size: 60px;
    padding-bottom: 5px;
    display: inline-block;
    margin-bottom: 12px;
	}
	#anchor ul li a{
		font-size: 12px;
	}
	#anchor ul li + li {
		margin-left: 0;
	}
}

/* ----------------------------
  #sec1
---------------------------- */

#sec1 {
	padding: 0 20px;
}

#contents #sec2 .inner, #contents #sec_products_top .inner {
	padding: 0 20px;
}

/*title-block*/
.title-block {
	position: relative;
}
.title-block .txt_bg {
	margin: 0px 0 40px;
}
.title-block:before {
	content: '';
  top: 0;
  bottom: 0;
  margin: auto;
  left: 8%;
  width: 100%;
  display: block;
}
.title-block:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 6%;
  width: 95px;
	height: 95px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 38;
}
.title-block.badge1:after {
  background-image: url(../img/basic/badge1.png);
}
.title-block.badge2:after {
  background-image: url(../img/basic/badge2.png);
}
.title-block.badge3:after {
  background-image: url(../img/basic/badge3.png);
}

#contents #sec2 .flame,
#contents #sec1 .flame{
	background-color: transparent;
	padding: 17px 0 0;
}
#sec2 .flame .lead{
	text-align: left;

	font-size: 18px;
	line-height: 1.89;
	letter-spacing: 0.03em;
	margin-top: 25px;
}
#sec1 .flame .lead{
	font-size: 18px;
	line-height: 1.89;
	letter-spacing: 0.03em;
	text-align: center;
	margin-top: 25px;
}
#sec1 .mainbox{
	background-color: #fff;
	border-radius: 20px;
	text-align: center;
	padding: 42px 60px 44px;
	margin-top: 30px;
	position: relative;
}
#sec1 .mainbox::after{
	content: '';
	width: 0;
	height: 0;
	display: inline-block;
	border: 35px solid transparent;
	border-top: 35px solid #5cb531;
	position: absolute;
	bottom: -70px;
	left: 0;
	right: 0;
	margin: auto;
}
#sec1 .mainbox .title{
	color: #5cb531;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	padding: 0 40px;
	display: inline-block;
}
#sec1 .mainbox .component{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}
#sec1 .mainbox .component li{
	width: 50%;
	float: left;
	background-color: #f6f6f6;
	border-radius: 25px;
	text-align: center;
}
#sec1 .mainbox .component li.second{
	margin-left: 70px;
	position: relative;
}
#sec1 .mainbox .component li.second::before{
	content: '';
	width: 41px;
	height: 41px;
	display: inline-block;
	background-image: url(../img/basic/plus.png);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: -55px;
}
#sec1 .mainbox .component li .subtitle{
	max-width: 330px;
	color: #fff;
	background-color: #5cb531;
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
	border-radius: 25px;
	padding: 16px 0 13px;
	margin: -20px auto 0;
}
#sec1 .mainbox .component li .subtitle span{
	color: #fff21f;
	font-size: 22px;
	padding-right: 4px;
}
#sec1 .mainbox .component li .image{
	margin-top: 20px;
	display: inline-block;
}
#sec1 .mainbox .component li .name{
	color: #006a2c;
	font-size: 20px;
	font-weight: bold;
	margin: 15px 0 10px;
}
#sec1 .mainbox .component li .note{
	font-size: 16px;
	text-align: left;
	padding: 0 35px 15px;
	line-height: 1.75;
}

/*ph*/
#sec1 .ph{
	position: relative;
	text-align: left;
	border-bottom: 3px dotted #b5cfa0;
	padding-bottom: 50px;
	margin: 54px auto 0;
  max-width: 830px;
}
#sec1 .ph img{
	max-width: 100%;
	width: auto;
}
#sec1 .ph .text {
	position: absolute;
	top: 14%;
	right: 0;
	width: 220px;
	background: #fff;
	border: 3px solid #5cb531;
	border-radius: 50%;
	padding: 50px;
}
#sec1 .ph .text:after {
	content: '';
	position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 18px 28px 18px;
  border-color: transparent transparent #5cb531 transparent;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -33px;
  transform: rotate(-90deg);
  z-index: 0;
}
#sec1 .ph .text:before {
	content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 25px 15px;
  border-color: transparent transparent #fff transparent;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -25px;
  transform: rotate(-90deg);
  z-index: 1;
}

#sec1 .ph .text h5 {
	color: #5cb531;
	font-weight: bold;
	font-size: 23px;
}
#sec1 .ph .text p {
    line-height: 1.75;
    text-align: left;
    letter-spacing: 0.1em;
    margin-top: 1.1em;
}
#sec1 .ph .text p span{
    letter-spacing: 0.04em;
}
#sec1 .video{
	text-align: center;
	margin-top: 45px;
}
#sec1 .video h3{
	color: #006a2c;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
}
#sec1 .video .lead{
	margin-top: 15px;
}
#sec1 .video .movie{
	margin-top: 25px;
}
#sec1 .video .cm img{
	margin: 0 auto;
	display: none;
}

/*products_menu*/
#contents .products_menu ul.type > li.type1 {
	width: 100%;
}

/*block2*/
.block2 {
  margin: 50px 0;
}
.block2 .lead {
	text-align: left;
}
.block2 .row {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-top: 28px;
	direction: rtl;
}
.block2 .row .image, .block2 .row .text {
	direction: ltr;
}
.block2 .row .image {
	width: 200px;
}
.block2 .row .text {
	width: 800px;
}


/*----- IE対策 -----*/

@media all and (-ms-high-contrast:none){

	#sec1 .mainbox .component li .subtitle{
		padding: 19px 0 10px;
	}

}
.wave_sin {
    background: url(../img/benpi/sec2_wave.png) left bottom repeat-x;
    padding-bottom: 5px;
}


/*----- breakpoint-style -----*/

@media screen and (max-width: 970px) {
	.txt_bg {
		font-size: 1.4em;
	}
}
@media screen and (max-width: 970px) {
	#sec1 .ph{
		text-align: center;
		border-bottom: 3px dotted #b5cfa0;
		padding-bottom: 50px;
		margin: 54px auto 0;
	  max-width: 830px;
	}
	#sec1 .ph .text {
		position: relative;
		width: auto;
		background: #fff;
		border: 3px solid #5cb531;
		border-radius: 20px;
		padding: 20px;
		margin-top: 15px;
	}
	#sec1 .ph .text:after {
		content: '';
	  top: -28px;
	  bottom: auto;
	  right: 0;
	  left: 0;
	  margin: auto;
	  transform: rotate(0deg);
	}
	#sec1 .ph .text:before {
		content: '';
	  top: -25px;
	  bottom: auto;
	  right: 0;
	  left: 0;
	  margin: auto;
	  transform: rotate(0deg);
	}
	#sec1 .ph .text h5 br {
		display: none;
	}
}

@media screen and (max-width: 360px) {
	/*title*/
	#sec1 .mainbox .component li .subtitle {
    width: 90% !important;
	}
	#sec1 .mainbox .title {
		font-size: 13px !important;
    padding: 0 11px !important;
	}
	#sec1 .flame .mainbox .title span {
    font-size: 19px !important;
	}
	.dot::before {
    transform: rotate(-25deg) !important;
	}
	.dot::after {
    transform: rotate(25deg) !important;
	}
	/*ph*/
	#sec1 .ph img {
		max-width: 100% !important;
	}
}

/*----- SP -----*/

@media screen and (max-width: 768px) {
	/*title*/
	.title-block:after {
	  content: '';
    top: -20px;
    bottom: 0;
    margin: auto;
    left: -15px;
    width: 18%;
    height: 60px;
	}
	.title-block .txt_bg {
    margin: 0px 0 20px;
  }
	.txt_bg {
		font-size: 17px;
		text-indent: 0 !important;
	}
	#sec1 {
		padding: 5px 20px 0;
	}
	#sec1 .flame .lead {
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0.03em;
    padding: 0 2.3189%;
    text-align: left;
    margin-top: 0;
	}
	#sec1 .mainbox .title {
		font-size: 15px;
		padding: 0 10px;
		font-feature-settings: "palt";
		line-height: 1.65;
	}
	#sec1 .flame .mainbox {
    text-align: center;
    padding: 6.3769%;
    margin-top: 4.3479%;
    position: relative;
	}
	#sec1 .flame .mainbox .title span {
    font-size: 20px;
	}
	.dot::before {
    transform: rotate(-30deg);
	}
	.dot::after {
    transform: rotate(30deg);
	}

	#sec1 .mainbox .component {
		display: block;
    margin-top: 30px;		
	}
	#sec1 .mainbox .component li {
		width: 100%;
	}
	#sec1 .mainbox .component li .name {
		font-size: 15px;
	}
	#sec1 .mainbox .component .image img{
		max-width: 105px;
	}
	#sec1 .mainbox .component li.second {
		margin-left: 0;
		margin-top: 100px;
	}
	#sec1 .mainbox .component li.second::before {
		content: '';
    top: -80px;
    bottom: auto;
    margin: auto;
    left: 0;
    right: 0;
	}
	#sec1 .mainbox .component li .subtitle {
		width: 260px;
		font-size: 14px;
    border-radius: 50px;
	}
	#sec1 .mainbox .component li .subtitle span {
		font-size: 18px;
	}
	#sec1 .mainbox .component li .note {
		padding: 0 20px 20px;
		font-size: 13px;
	}

	/*ph*/
	#sec1 .ph .text h5 {
		font-size: 18px;
	}
	#sec1 .ph .text {
		margin-top: 15px;
	}
	#sec1 .ph img {
		max-width: 350px;
	}

	/*video*/
	#sec1 .video h3 {
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.32;
	}


	/*block2*/
	.block2 {
    margin: 20px 0 0;
	}
	.block2 .row {
		display: block;
	}
	.block2 .row .image {
    margin: 0px 0 -10px;
    text-align: center;
	}
	.block2 .row .image img{
    max-width: 150px;
  }
	.block2 .row .image, .block2 .row .text {
		width: 100%;
	}
}