@charset "utf-8";

/*=============================
common 
==============================*/
* {
margin: 0;
padding: 0;
}
*,::before,::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}
html {
	width: 100%;
	font-size: 62.5%;
	scroll-behavior: smooth;
}
/* color */
:root {
	--black: #4A4A4A;
	--white: #ffffff;
	--gray: #979797;
	--main-color: #BE1E2D;
	--point-color: #EDCD3F;
	--Green1: #73B17B;
	--Green2: #528778;
	--Green3: #74867F;
	--bg-color: #F5F2EB;
/* font */
	--font-family-base: "Zen Maru Gothic", serif;
	--font-family-sub: "Arial", serif;
	--font-family-num:"Dangrek", sans-serif;

	/* box */
	--box-width:1120px ;
}

body {
	background-color:var(--white);
	color: var(--black);
	font-size: 1.6rem;
	font-family: var(--font-family-base);
	font-weight: 400;
	font-style: normal;
	line-height: 1.8;
    font-kerning: auto;
}
h2, h3, h3, h4,.title {
	font-family: var(--font-family-base);
}
h2 {
	font-size: 2.45rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 10px 0;
}
h3 {
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.2;
}
h4 {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
}
.title {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.2;
}
.lead_M {
	font-size:1.8rem;
	line-height: 1.6;
	font-weight: 500;
}
.text18-M {
	font-weight: 500;
	font-size: 1.8rem;
	line-height: 1.8;
}

img {
	max-width: 100%;
	height: auto;
}

a,a:link {	
	color: var(--black);
}
a:hover {opacity: 0.6;}
@media screen and (min-width:769px) {
	h2 {
		font-size: 3.6rem;
		line-height: 1.2;
		margin-bottom: 20px;
	}
	h3 {
		font-size: 2.8rem;
		line-height: 1.2;
	}
	h4 {
		font-size: 2.4rem;
		line-height: 1.2;
	}
	.title {
		font-size: 2.2rem;
		line-height: 1.2;
	}
	.text_L {
		font-size: 2rem;
		line-height: 1.8;
	}
	.text_M {
		font-size: 1.8rem;
		line-height: 1.8;
	}
	.text_S {
		font-size: 1.6rem;
		line-height: 1.8;
	}
	.text_SS {
		font-size: 1.4rem;
		line-height: 1.8;
	}
	.lead_L {
		font-size:2.6rem;
		line-height: 1.8;
		font-weight: 500;
	}
	.lead_M {
		font-size:2.4rem;
		line-height: 1.8;
		font-weight: 500;
	}
	.text20-M {
		font-size: 2rem;
		line-height: 1.8;
		font-weight: 500;
	}
}
.text_R {
	text-align: right;
}
.text_C {
	text-align: center;
}
.marker{
	background-image: linear-gradient(0deg, #EDCD3F50 0.5em, transparent 0.5em);
	color:var(--Green2);
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
}
/*反転*/
.mirror {
	transform: scale(-1, 1);
}


/*=============================
header 
==============================*/
.header {
	padding: 24px 6.4% 16px; /* 24/375*100 （全体375に対する24の比率）*/
	display: flex	;
	justify-content: space-between;
}
.logo {
	width: 150px;
}
@media screen and (min-width:769px) {
	.logo {
		width: 150px;
	}
}
.header__topic,
.nav__topic {
	color: var(--black);
	font-weight: 700;
	font-size: 2.4rem;
}

/* .nav初期表示 */
.nav {
	background: rgba(255, 255, 255, 0.90);
	width: 100%;
	height: 100vh;
	position: fixed;
	top:0;
	left:0;
	z-index: 100;
	padding: 24px 6.4%;
	transform: translateX(-100%);
	transition: transform 0.4s;
}

.nav__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav__list {
	margin-top: 66px;
}

.nav__item a{
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.1;
	color:  var(--black);
	margin-top: 52px;
	white-space: nowrap;
}

.nav__item img {
	display: inline-block;
	vertical-align: -3px;
	margin-right: 24px;
}

.nav.active {
	transform: translateX(0);
}

/*-----------------*/
/* hamburger */

.c-header {
	font-weight: 500;
	font-size: 1.8rem;
	line-height: 1.1;
  align-items: center;
  background-color: var(--white);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem; 
  width: 100%;
}
@media screen and (max-width: 1120px) {
	.c-header a, .c-header a,:link,.c-header a:visited{
		color: var(--white);
	}
}
.c-header__logo {
  color:var(--black);
  min-width: 100px; 
  text-decoration: none;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
  text-decoration: none;
}

.c-header__list-link {
  text-decoration: none;
  display: block;
  margin-right: 20px;
  padding: 10px 10px; 
}
@media screen and (max-width: 768px) {
	.c-header__list-link {
		width: 100%;
		color: var(--white);
	}

	.c-header__list-link {
		position: relative;
		padding-left: 2.5em;
	}
	.c-header__list-link a {
		position: relative;
		display: block;
		padding: 0.5em;
		border-bottom: 1px solid #ccc;
	}

.c-header__list-link::before {
  position: absolute;
  left: 1em;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f138';
  color: #fcfae2;
}

.c-header__list-link:hover {
  filter: opacity(0.6); 
}

.c-hamburger-menu {
  position: relative;
}
	}
@media screen and (max-width: 1108px) {
  .c-hamburger-menu__list {
    background-color: var(--main-color); /* ドロワー背景 */
		color: var(--white);
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; 
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s;
    top: 100%;
    width: 100%;
  }
  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
    z-index: 10;
  }
}/*max 768*/
.c-hamburger-menu__input {
  display: none;
}
.c-hamburger-menu__bg {
  background-color: var(--white);
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.6; 
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 768px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; 
    height: 32px; 
    justify-content: center;
    width: 32px; 
  }
}

.c-hamburger-menu__button-mark {
  background-color: var(--black);
  display: block;
  height: 2px; 
  transition: 0.3s; 
  width: 20px; 
}

@media screen and (max-width: 768px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg);
    transform-origin: 0%; 
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg);
    transform-origin: 0%; 
  }
}
/*-----------------*/

@media screen and (max-width:768px) {
	header .cv__btn {
		display: none;
	}
	.btn__area {
	margin: 20px 10px;
	text-align: center;
	}
	.btn__area .cv__btn {
		width: calc(100% - 10px);
	}
}
@media screen and (min-width:769px) {
	.btn__area {
		display: none;
	}
	header .cv__btn {
		width: 34vw;
		max-width: 248px;
	}
}

.header__btn {
	display: block;
	width: 18px;
	height: 11px;
	cursor: pointer;
	position: absolute;
	top:37px;
	right: 6.4%;
}

/* .header pc */
@media screen and (min-width:769px) {
	.header {
		max-width:1440px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header__topic {
		font-size: 3.2rem;
		line-height: 1;
	}
	.nav {
		background: transparent;
		width: auto;
		height: auto;
		padding: 0;
		position: static;
		transform: translate(0);
	}
	.nav__list {
		margin-top: 0;
		display: flex;
	}
	.nav__item {
		margin-top: 0;
		font-weight: 500;
		font-size: 1.6rem;
		line-height: 1.1;
		color: var(--sub-color);
		margin-left: 32px;
	}
	.nav__header {
		display: none;
	}
	.nav__item img {
		display: none;
		margin-right: 0;
	}

	.nav__item:first-of-type {
		display: none;
	}

	.header__btn {
		display: none;
	}

}/* PC 769px以上 */

.bg--white {
	background-color: #ffffff;
	padding: 5px;
	display: inline-block;
}


/*=============================
main 
=============================*/
/* article header */

.about--text h2.green {
	color:  var(--Green2);
}
.hour24 {
	width: 20vw;
	position: absolute;
	top:50vw;
	left: 10px;
}
.mainCopy {
	position: absolute;
	top:30vh;
	left: 10px; 
	transform:rotate(-10deg);
}
.mainCopy h3 {
	color:var(--main-color);
	margin: 5px;
}
@media screen and (min-width:769px){
	.about--text h2.green {
		margin-top: 60px;
	}
	.mainImg {
		position: relative;
	}
	.hour24 {
		width: 24vw;
		top:4vw;
		left: 100px;
	}
	.mainCopy {
		position: absolute;
		top: 25vw;
		left: 100px; 
		transform:rotate(-10deg);
	}
	.mainCopy h3 {
		color:var(--main-color);
		margin: 5px;
	}
	.main {
		width: 100%;
	}
	section {
		padding: 40px 100px;
	}
}/* PC 769px */

/*=============================
organic
=============================*/
.section--organic {
	border-radius: 80px 10px;
	background: var(--Green1);
	color: var(--white);
	margin: 40px 10px;
	padding: 10px;
}

.organic .titleBox {display: flex;}
.organic--ttl {
	display: flex;
	justify-content: space-between;
	text-align: center;
	gap: 10px;
	padding: 20px 0;
}
.organic--ttl img {
	height: 50px;
}
.section--organic .titlebox h2{
	margin-top: 20px;
}
.organic--ph img {
	border-radius: 150px 100px 90px 160px;
	max-width: 100%;
}
	.organic--txt {
		padding: 10px;
    margin: 20px 0;
	}


	.section--organic .titlebox h2>span {
		display: block;
	}
	.organic--ttl .titlebox .lead_M{
		display: flex;
		justify-content: center;
		flex-direction: column;
		line-height: 1;
	}


@media screen and (min-width:461px) {
		.section--organic .titlebox h2>span {
			display: inline;
		}
	.organic h2>span {display: inline;}
	.organic--ttl .titlebox .lead_M{
		flex-direction: row;
	}
	.organic--txt {
		min-width: 50%;
	}
}

/* organic PC */
@media screen and (min-width:769px) {
	.section--organic {
		max-width:var(--box-width);
		margin: 40px auto;
		border-radius: 200px 20px;
		background: var(--Green1);
		color: var(--white);
		padding: 60px 80px;
	}
	.organic--block {
		display: flex;
		align-items: center;
		gap: 40px;
		align-self: stretch;
	}
	.organic--txt {
		flex-basis: 100%;
	}
	.organic--ttl img {
		height: 100px;
	}
	.organic--ph img {
		border-radius: 200px 180px 150px 200px;
	}

}/* PC 769px */
/*=============================
orgnic 
=============================*/

.btn:hover {
	opacity: 0.5;
}


@media screen and (min-width: 769px) {
}/* PC 769px */



/*=============================
faq
=============================*/

.section--faq {
	margin: auto;
	padding: 60px 20px;
}
.details {
  margin: 0 0 1.8vw;
}
.details-summary {
	border-radius: 4px;
	padding: 10px;
	position: relative;
	display: block;
	color: var(--white);
	background-color:var(--Green3);
}
.details-summary:hover {
	cursor: pointer;
	opacity: 0.8;
}
.faq_answer,
.faq_question {
	color: var(--white);
	font-size: 1.8rem;
  font-weight: 700;
	line-height: 1.2;
  padding: 1.25vw 6.5vw 1.3125vw 1.25vw;
  display: flex;
  align-items: center;
  position: relative;
}
.faq_question::before {
	content: "Q";
	font-family: var(--font-family-sub);
	font-weight: 700;
	font-size: 1.8rem;
  font-weight: 700;
	color: var(--Green2);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 50%;
	width: 3.5rem;
	height: 3.5rem;
	padding: .4375vw 0 .3125vw;
	margin-right: 2.25vw;
	flex: none;
}
.details-summary .btn {
	display: block;
	width: 20px;
	height: 3px;
	position: absolute;
	right: 0.50vw;
	transform-origin: center center;
	transition-duration: 0.2s;
}
.details-summary .btn:before,
.details-summary .btn:after {
	display: block;
	content: "";
	background:  var(--white);
	width: 20px;
	height: 3px;
}

.details-summary .btn:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.details-summary .btn:after {
	transform: rotate(90deg);
	position: absolute;
	top: 50%;
	left: 0;
}

.details-summary.is-active .btn {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.details-summary.is-active .btn:before {
	content: none;
}

.details-summary::-webkit-details-marker {
	display: none;
}
.details-content {
	padding: 40px 10px;
}

.faq_answer{
	color: var(--black);
	margin-bottom: 20px;
}
.faq_answer::before {
	content: "A";	
	font-family: var(--font-family-sub);
  font-size: 1.8rem;
  font-weight: 700;
  background: var(--Green3);
  color: var(--white);
  display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	margin-right: 2.25vw;
	flex: none;
}


@media screen and (min-width: 769px) {
	.faq_answer, .faq_question {		
		font-size: 2.2rem;
	}
	.section--faq {
			max-width:var(--box-width);
			margin: 40px auto;
			padding: 40px 0;
	}
	.details-summary .btn {
		width: 37.5px;
		height: 37.5px;
		right: 0.50vw;
	}
	.details-summary .btn:before ,
	.details-summary .btn:after {
		width: 37.5px;
		height: 4.5px;
	}
	.faq_question::before {
		width: 5rem;
		height: 5rem;
		font-size: 3.6rem;
	}
}


/*=============================
about 
=============================*/
.about--box {
	padding: 20px;
}
.about--text{
	font-weight: 700;
    font-size: 2rem;
}
/*section--about*/
	@media screen and (min-width:769px) {

	.section--about {
		padding: 0 7vw 20px;
    margin: 0 auto;
		gap: 4vw;
		display: flex;
		align-items: center;
    justify-content: space-between;
		position: relative;
		z-index: -200;
	}

	.about--slide {
		padding:  0;
        max-height: 40vw;
	}
	.sliderArea.w300 {
		max-width: 400px;
	}
}

	@media screen and (min-width:1240px) {
	.about--box {
		max-width: 1440px;
		padding: 0 2vw 5vw;
		gap: 4vw;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
}
.slick-next,
.slick-prev {
	display: none!important;
}

/*=============================
reason 
=============================*/
/*section--reason*/

.reason__bg {
	margin: auto;
	padding: 20px;
}
.wave2 {
	margin-top: -5px;
}
.wave img ,
.wave2 img{
	width: 100%;
}
.section--reason {
	background-color: var(--bg-color);
	padding: 0;
}
.reason--box {
	padding: 0 2px;
	display: block;
	margin-top: 20px;
	padding: 0 0 20px;
}
.section--reason h2 {
	text-align: center;
	color: var(--main-color);
	font-size: 3.8rem;
	margin-bottom: 40px;
}
.section--reason h2 .reason_no {
	font-family: var(--font-family-num);
	font-size: 6rem;
}
.section--reason h2 .reason_hira {
	font-size: 2.6rem;
}
.reason--copy {
	position: relative;
}
.catch--txt {
	font-family: Carattere;
	color: var(--point-color);
	font-size: 42px;
}
.reason--title {
	margin-top: -40px;
	margin-bottom: 20px;
}
.r8 {
	border-radius: 8px;
}
.reason--img{
	position: relative;
}
.reason--num {
	width: 120px;
	position: absolute;
	left: -10px;
	top: -20px;
}

@media screen and (min-width:1440px) {
	/* .reason--box:nth-child(odd) >.reason--img > .reason--num{
		left: calc(100% - 220px);
	} */
	.wave {
		margin-top: -9%;
	}
	.reason__bg {
		width: var(--box-width);
		margin: auto;
	}
	.section--reason h2 {
		font-size: 6.5rem;
	}
}


@media screen and (min-width:769px) {
	.reason--num {
		width: 100px;
		position: absolute;
		left: -10px;
		top: -20px;
	}
	.wave {
		margin-top: -9%;
	}
	.reason--box {
		display: flex;
		gap:40px;
		padding-top: 24px;
		margin-bottom: 20px;
	}
	.reason--box:nth-child(odd) > .reason--img{
		order: 2;
	}
	.section--reason h2 {
		color: var(--main-color);
		font-size: 4.8rem;
	}

	.section--reason h2 .reason_no {
		font-size: 9.6rem;
	}
	.section--reason h2 .reason_hira {
		font-size: 3.6rem;
	}
}

/*=============================
agri 
=============================*/
.section--agri {
	justify-content: center;
  padding: 40px 20px;
}
.section--agri h2 {
 letter-spacing: -0.05em;
}

.agri--box {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.agri--box >div {
    display: flex;
	flex-direction: column;
    align-items: stretch;
	flex: 1;
	justify-content: space-between;
}
.agri--box .title {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 2.4vh;
    letter-spacing: -0.05em
}
.agri--name {
	text-align: right;
	margin-bottom: 20px;
}
.agri--txt {
	margin-bottom: 20px;
    letter-spacing: -0.05em
}
.agri--ph img {
	border-radius: 20px;
	width: 100%;
}

@media screen and (min-width:769px) {
	.section--agri {
		max-width: var(--box-width);
		margin: 40px auto;
	}
	.agri--box {
		flex-direction: row;
		flex: 1;
		display: flex;
		gap: 40px;
		margin: auto;
	}
	
	.agri--catch {
		text-align: center;
		padding-right: 12em;
		font-size: 4.8rem;
		margin-bottom: -0.2em;
		padding-right: 0;
		font-size: 4.8rem;
		margin-bottom: -0.2em;
		margin-right: auto;
		width: auto;
		text-align: left;

	}
	.agri--catch img {
		width: 280px;
	}
}

/*=============================
trialset
=============================*/
.section--trialset {
	background-color: var(--bg-color);
	margin: 40px auto;
	padding: 40px 20px;
}
.trialbox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
.trial--set {
	display: flex;
	flex-direction: column;
	flex: 1;
	background-color: var(--white);
	padding: 20px 20px 0;
	border-radius: 10px;
	gap: 10px;
}
.trial--title {
	font-size: 2.8rem;
	font-weight: 700;
}
.trial--name {
	color: var(--Green2);
}
.titleBox {
	text-align: center;
	margin: auto;
}
.trial--box h2 {
	color: var(--main-color);
	margin-bottom: 20px;
}

.section--trialset .cv__btn {
	text-align: center;
	vertical-align: 0.8em;
}
.cvimg {
	border-radius: 10px;
}
.pricebox {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 auto;
}
.kind {
	font-size: 2rem;
	font-weight: 700;
}
.price {
	color: var(--main-color);	
	font-size:6rem;
	font-weight: 900;
	line-height: 1;
}
.price>span{
	font-size:2rem;
}
.tax {
	font-weight: 700;
	font-size: 1.4rem;
}
.cv--area {
	margin: 10px auto;
	text-align: center;
}
@media screen and (min-width:916px) {
	.price {
		font-size: 8rem;
	}
	.price > span{
		font-size:2.4rem;
	}
	.tax {
		font-weight: 500;
		font-size: 1.6rem;
	}
}


@media screen and (min-width:769px) {
	.section--trialset {
		margin: 40px auto;
		padding: 20px;
	}
	.trial--box h2 {
		font-size: 4.8rem;
	}
	.trial--catch {
		font-size: 4.8rem;
		margin-bottom: -0.2em;
		margin-right: auto;
		width: auto;
    margin-right: 48rem;
	}
	.trial--catch img {
		min-width: 272px;
	}
	.trialbox {
		flex-direction: row;
		gap: 20px;
	}
	.trial--box {
		max-width: var(--box-width);
		margin: 40px auto;
	}
	.titleBox h2 {
		color: var(--main-color);
	}
	.trial--title {
		font-size: 2.8rem;
	}
	.kind {
		font-size: 2.4rem;
	}
}

/*=============================
quality
=============================*/

.section--quality {
	margin: 10px;
	position: relative;
	padding: 10px;
	background-color: #EAEDEC;
	border: 10px solid var(--Green1);
}
.quality--in {
	border: 2px solid var(--Green1);
}
.quality--in > div {
	padding: 10px 0;
}
.quality--title {
	padding: 10px;
	text-align: center;
}
.quality--copy{
	font-size: 2.4rem;
	line-height: 1.8;
	font-weight: 500;
	color: var(--Green2);
	text-align: center;
	padding: 10px;
}	
.quality--img img {
	border-radius: 50%;
}
.quality--box {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: column;
}
.quality--txt {
	padding:  0 10px;
}
.quality--txt .title {
	color: var(--Green2);
	margin: 20px 0;
}
.frame1, .frame2, .frame3, .frame4 {
	width: 50px;
}
.frame1 {
	position: absolute;
	transform: scale(-1, 1);
	top:8px;
	left: 8px;
}
.frame2 {
	position: absolute;
	top:8px;
	right:8px;
}
.frame3 {
	position: absolute;
	transform: rotate(180deg);
	bottom:8px;
	left: 8px;
}
.frame4 {
	position: absolute;
	transform: rotate(90deg);
	bottom:8px;
	right:8px;
}
.ulist,.ulist li {
	position: relative;
	padding-left: 0.5em;
}
.ulist li {
	padding-left: 1em;
}
.ulist li:before {
	color:  var(--Green3);
	position: absolute;
	top: 2px;
	left: 0;
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-weight: 900;
	padding-right: 5px;
	text-indent: -1em;
	padding-left: 1em;
}
.quality--img{
	padding: 20px 0;
	margin: auto;
}
.quality--title >p >span {
	display: block;
}
@media screen and (min-width:896px) {
	.quality--copy >span {
		display: inline;
	}
}
@media screen and (min-width:769px) {
	.quality--box {
		justify-content: space-between;
		align-items: flex-start;
	}
	.quality--txt {
		max-width: 65%;
	}
	.quality--in {
		padding: 40px 80px;
	}
	.section--quality {
		max-width: var(--box-width);
		margin: auto;
		background-color: #EAEDEC;
		border: 10px solid var(--Green1);
	}
	.quality--in {
		border: 2px solid var(--Green1);
		padding: 10px 80px 60px;
	}
	.quality--title {
		text-align: center;
	}
	.quality--img img {
		border-radius: 50%;
	}
	.quality--box {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: row;
	}
	.quality--txt {
		padding:  0 10px;
		max-width: 65%;
	}
	.quality--txt .title {
		color: var(--Green2);
		margin: 20px 0;
	}
	.frame1, .frame2, .frame3, .frame4 {
		width: 150px;
	}
}

/*=============================
voice
=============================*/
.section--voice {
		padding: 20px;
		margin: auto;
}
	.voicebox {
		flex: 1; 
		background-color: var(--bg-color);
		padding: 20px;
		border-radius: 20px;
		margin-bottom: 20px;
	}
.voice--head {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	align-items: center;
}
.voice--img {
	border-radius: 50%;
	height: 100%;
}
.voice--catch,
.section--voice h2 {
	text-align: center;
}
.voicearea {
	display: flex;
	flex-direction: column;
	gap:10px;
}

@media screen and (min-width:940px) {
	.section--voice {
		max-width: var(--box-width);
		padding: 20px;
		margin: auto;
	}
	.voicearea {
	flex-direction: row;
		gap:20px;
	}

	.voicebox {
		flex: 1; 
		background-color: var(--bg-color);
		padding: 20px;
		border-radius: 20px;
	}
  .voice--catch {
    padding-right: 10em;
    font-size: 4.8rem;
    margin-bottom: -0.2em;
  }
}

/*=============================
slide 
=============================*/

.sliderArea {
  max-width: 100%;
  margin: 0 auto;
}
.slick-slide {
  margin: 0 5px;
}
.slick-vertical .slick-slide{
	margin-bottom: 10px;
}

.slick-slide img {
  width: 100%;
  height: auto;
	border-radius: 10px;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: var(--black);
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active ,
.slick-current {
	opacity: 1;
}
.thumb {
	margin: 20px 0 0;
}
.thumb .slick-slide {
	cursor: pointer;
}
.thumb .slick-slide:hover {
	opacity: .7;
}/* slick */


/*=============================
footer 
=============================*/
.footer {
	padding: 32px 4.2% 0;
}

.footer__logo {
	text-align: center;
}
.footer__logo img{
	width: 120px;
}

.menu__item {
	font-size: 1.4rem;
	line-height: 1.2;
	color: var(--black);
	margin-top: 16px;
}

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

.copy small{
	font-size: 1.2rem;
}
.footer .menu__list {
	display: flex;
	gap:20px;
	justify-content: center;
}


/* footer PC */
@media screen and (min-width: 769px) {
.footer {
	text-align: left;
	max-width: 1280px;
	padding: 64px 60px 0;
	margin: 0 auto;
	}
	.footer__group {
		display: flex;
		justify-content: space-between;
	}
	.footer .menu__list {
		display: flex;
		margin-top: 0;
	}
	.footer .menu__item {
		margin-top: 0;
		margin-left: 32px;
	}
	.footer .copy {
		text-align: center;
		margin-top: 32px;
	}

}/* PC 769px */