@charset "utf-8";
/*---------------------------------------------
Reset
---------------------------------------------*/

html {
	color: #40210f;
	overflow-y: scroll;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	font-size: 62.5%;
	line-height:1.5;
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; }
img { border: none; vertical-align: bottom; max-width: 100%; height: auto; margin: 0; padding: 0; }
div, dl, dt, dd, form, input, ul, ol, li, p, select, textarea, span, th, td { margin: 0; padding: 0;}
*, *:before, *:after { box-sizing: border-box;}

/*---------------------------------------------
Style
---------------------------------------------*/
body {
	text-align: center;
	margin: 0 auto;
	padding: 0;
	font-size:1.8rem;
	overflow-x: hidden;
}


.for_pc{
	display:block;
	margin:0 auto;
}

.for_sp{
	display:none;
	margin:0 auto;
}

.note{
	font-size: 1.4rem;
}

/* sp */
@media screen and (max-width: 750px){

	body {
		font-size:1.5rem;
	}
	.for_pc{
		display:none;
		margin:0 auto;
	}
	.for_sp{
		display:block;
		margin:0 auto;
	}
}

/* =========================================================
共通
========================================================= */
article{
	background-image: url("../img/gd_left.webp"), url("../img/gd_right.webp");
	background-position: left top, right top;
	background-repeat: repeat-y, repeat-y;
}

.inner{
	max-width: 1200px;
	margin: 0 auto;
}

.zenmaru{
	font-family: "Zen Maru Gothic", sans-serif;
}

h2{
	text-align: left;
	color: #006934;
	font-size: 3.4rem;
	font-weight: 600;
	text-indent: -1em;
	padding-left: 1em;
}

h2::before{
	content: "●";
	color: #fbab00;
}

h3{
	color: #006934;
	font-size: 2.4rem;
	font-weight: 600;
	padding-top: 2rem;
}

h3+p{
	font-weight: 500;
}

.contents_box{
	padding: 4rem 0 8rem;
}

.contents_yoko{
	display:flex;
	flex-wrap: nowrap;
	column-gap: 4rem;
	padding: 6rem 0 4rem;
align-items: center;
}

.contents_yoko h3{
	padding-bottom: 2rem;
}

.contents_txtbox{
	padding: 4rem 0;
}

.contents_txtbox p{
	font-weight: 500;
}

.image_small{
	max-width: 40%;
}

@media screen and (max-width: 750px) {
	article{
		background: none;
	}
	.inner{
	max-width: 90%;
	margin: 0 auto;
}
	h2{
		font-size: 2.6rem;
	}
	h3{
		padding-top: 4rem;
		font-size: 2rem;
		padding-bottom: 1rem;
	}
	
	.contents_box{
	padding: 4rem 0 10rem;
}
	
	.image_small{
		max-width: 100%;
	}
	.contents_yoko{
	display:block;
	}
	.contents_txtbox{
	padding: 0 0;
		margin-top: 4rem;
}
	.contents_yoko h3{
		padding-bottom: 1rem;
	}
}

/* =========================================================
ヘッダー
========================================================= */
header {
  text-align: left;
  padding: 1.5rem 2rem;
}

@media screen and (max-width: 750px) {
  header img {
    max-width: 50%;
    margin: 0 auto;
  }
}

/* =========================================================
メインビジュアル
========================================================= */
main{
	position: relative;
	height: 650px;
	background-image: url("../img/kirara_bg.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
}

h1{
	position: absolute;
	top: 35%;
	right: -10rem;
}

h1 img{
	width: 40%;
}

@media (min-width: 1000px) and (max-width: 1440px){
	main{
	position: relative;
	height: 500px;
	background-image: url("../img/kirara_bg.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
}
	h1{
	position: absolute;
	top: 35%;
	right: -20rem;
}
}

@media (min-width: 750px) and (max-width: 1000px){
	main{
	position: relative;
	height: 400px;
	background-image: url("../img/kirara_bg.webp");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
}
	h1{
	position: absolute;
	top: 35%;
	right: -30rem;
}
	h1 img{
	width: 30%;
}
}

@media screen and (max-width: 750px){
	main{
		height: 550px;
		background-image: url("../img/kirara_bg_sp.webp");
		background-position: top center;
	}
	h1{
		top:auto;
		bottom: 4rem;
		right: 0;
		left: 0;
	}
	h1 img{
		width: 70%;
	}
}

/* =========================================================
main_sub
========================================================= */
#main_sub{
	padding: 10rem 2rem 8rem;
}
.main_sub_container{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 4rem;
}

.main_sub_txtbox{
	text-align: left;
	padding-top: 5rem;
	line-height: 1.8;
	font-weight: 600;
	font-size: 2.2rem;
}

.main_sub_txtbox p{
	padding-bottom: 4rem;
}

.main_sub_txtbox a{
	color: #006934;
}

@media screen and (max-width: 750px){
	.main_sub_container{
		display:block;
	}
	.main_sub_txtbox{
		line-height: 1.6;
		font-size: 1.8rem;
	}
}

/* =========================================================
about
========================================================= */
#about{
	padding: 8rem 2rem 0;
	text-align: left;
}

/* =========================================================
product
========================================================= */
#product h4{
	color: #006934;
	font-size: 2.4rem;
	font-weight: 600;
	text-align: center;
	padding-bottom: 1rem;
	border-bottom: dashed 2px #006934;
	margin-bottom: 3rem;
}

.product_container{
	display:flex;
	flex-wrap: nowrap;
	column-gap: 4rem;
	padding: 6rem 2rem 4rem;
	align-items: center;
	text-align: left;
}

.product_name{
	font-size: 2.6rem;
	font-weight: 600;
	text-align: left;
}

.image_about_container{
	display:flex;
	flex-wrap: nowrap;
	column-gap: 4rem;
	padding: 2rem 2rem 6rem;
	align-items: center;
	text-align: left;
}

.image_about_txtbox{
	padding: 2rem 2rem 6rem;
	text-align: left;
}

.image_about{
	padding: 1rem;
	font-size: 1.8rem;
	font-weight: 500;
}

.user_voice_container{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2rem;
}

.user_voice_box{
	border: solid 3px #fbab00;
	border-radius: 20px;
	padding: 1.8rem;
	background-color: #fff;
}

.user_container{
	display:grid;
	grid-template-columns: 18% 1fr;
	justify-content: center;
	align-items: center;
	column-gap: 1.5rem;
}

.user_container p{
	font-weight: 500;
	color: #006934;
	font-size: 1.8rem;
	text-align: left;
	line-height: 1.6;
}

.majivoice{
	color: #00a0e9;
	font-weight: 600;
	font-size: 2rem;
	padding: 4rem 0;
}

.majivoice_btn a{
	display: block;
	color: #FFF;
	font-size: 2.4rem;
	background-color: #00a0e9;
	border-radius: 30px;
	padding: 1.5rem 0;
	max-width: 600px;
	margin: 0 auto;
	text-decoration: none;
}

/*------------アコーディオン--------------*/
.dropdown {
  margin: 2rem auto;
}

.toggle {
  display: none;
}

.option {
  position: relative;
  margin-bottom: 1em;
}

.btn-more,
.content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}

.btn-more, .btn-more_2, .btn-more_3 {
	margin-top: 2rem;
  padding: 0.8rem;
  display: block;
}

.content {
  max-height: 0;
  overflow: hidden;
  padding-top: 2rem;
}

.btn-more, .btn-more_2, .btn-more_3 {
  padding: 1.6rem 0.8rem;
  display: block;
  font-size: 2.2rem;
  font-weight: 500;
  background-color: #fbab00;
  border-radius: 100px;
  color: #FFF;
}

.btn-more::after,
.btn-more_2::after,
.btn-more_3::after{
  content: "▲";
  font-size: 20px;
  transform: rotate(180deg);
  transition: all .3s ease;
  margin-left: 8px;
  color: #FFF;
  display: inline-block;
}

.btn-more.close::after,
.btn-more_2.close::after
.btn-more_3.close::after{
  transform: rotate(0deg);
}

@media screen and (max-width: 750px) {
	#product h4{
		font-size: 2rem;
	}
	.product_container{
	display:block;
	text-align: center;
	}
	.product_name{
	padding: 2rem 0;
	font-size: 2.2rem;
	font-weight: 600;
		text-align: center;
}
	.image_about_container{
	display:block;
	padding: 2rem 2rem 6rem;
	align-items: center;
	text-align: left;
}

.image_about_txtbox{
	padding: 2rem 0 6rem;
}
	
	.user_voice_container{
		display:block;
	}
	.user_voice_box{
		margin-top: 2rem;
	}
	
.btn-more, .btn-more_2, .btn-more_3 {
  padding: 1.2rem 0.8rem;
  display: block;
  font-size: 1.8rem;
	}
}

/* =========================================================
ues ユニー・エッグ・システム
========================================================= */
#ues{
	padding: 8rem 2rem 0;
	text-align: left;
}

.ues_about{
	font-weight: 500;
	font-size: 1.8rem;
	padding: 0 2rem 4rem;
}

.ues_box{
	position: relative;
	border-radius: 20px;
	border: solid 2px #006934;
	background-color: #fff;
	padding: 6rem 3rem 2rem;
	margin: 4rem 0;
}

.ues_box_ttl{
	position: absolute;
	top: -3rem;
	left: 0;
	right: 0;
	max-width: 70%;
	margin: 0 auto;
	background-color: #006934;
	color: #fff;
	font-weight: 500;
	font-size: 2rem;
	text-align: center;
	border-radius: 100px;
	padding: 1rem 3rem;
}

h5{
	color: #006934;
	font-size: 2.2rem;
	font-weight: 600;
	text-align: left;
	padding-bottom: 1.5rem;
	border-bottom: solid 1px #fbab00;
}

.ues_box ul {
	list-style-type: none;
	padding: 2rem 2rem 4rem;
	font-weight: 500;
}

.ues_box ul li{
	 text-indent: -1em;
   padding-left: 1em;
}

@media screen and (max-width: 750px) {
	.ues_box_ttl{
		max-width: 90%;
		font-size: 1.6rem;
		line-height: 1.4;
	}
	.ues_box{
	position: relative;
	border-radius: 20px;
	border: solid 2px #006934;
	background-color: #fff;
	padding: 6rem 2rem 0;
	margin: 4rem 0 0;
}
	h5{
		font-size: 1.8rem;
		text-indent: -1em;
		padding-left: 1em;
	}
	.ues_box ul {
	list-style-type: none;
	padding: 2rem 1rem 4rem;
	font-weight: 500;
}
}

/* =========================================================
検査体制
========================================================= */
#kensa{
	padding: 8rem 2rem;
	text-align: left;
}

.kensa_container{
	display:flex;
	flex-wrap: nowrap;
	column-gap: 4rem;
	padding: 2rem;
	margin-bottom: 2rem;
}

.kensa_container ul{
	list-style-type: none;
	padding: 1rem 2rem 2rem;
	font-weight: 500;
}

.kensa_container ul li{
	 text-indent: -1em;
   padding-left: 1em;
}

.kensa_title{
	color: #006934;
	font-size: 2.2rem;
	font-weight: 600;
}

.kensa_subtitle{
	color: #006934;
	font-size: 2rem;
	font-weight: 600;
}

.kensa_txtbox{
	margin-top: 2rem;
}

@media screen and (max-width: 750px) {
	.kensa_container{
	display:block;
	}
	.kensa_title{
		font-size: 2rem;
	}
	.kensa_subtitle{
		font-size: 1.8rem;
	}
}

/* =========================================================
ページトップ リンク
========================================================= */

/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#006934;
	border-radius: 100px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:1.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #40210f;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
    bottom: 10px;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

@media screen and (max-width: 960px) {

#page-top.UpMove {
    animation: UpAnime 0.5s forwards;
    bottom: 10px;
}
}

@media screen and (max-width: 750px){
	#page-top {
	right: 20px;
}
}


/*---------------------------------------------
フッター
---------------------------------------------*/

footer{
	width: 100%;
	padding: 20px 0;
	font: Arial, Helvetica, sans-serif;
	background: #40210f;
}

footer a{
	color: #fff;
	text-decoration: none;
}

footer address{
	color: #fff;
}

/* sp */
@media screen and (max-width: 520px){
	footer{
		padding:10px 0;
	}
	
	#page-top a{
	margin: 0 -10px 0 0;
	}
}