html {
	font-size: 10px;
}

body {
	margin: 0px;
	font-family: Verdana, sans-serif;
	font-size: 1.6rem;
}

/*  */

.div_page {
	width:800px;
	margin: auto;
}

/*  */

.div01 {
	width: 800px;
	background-color: ;
}

	.div01_1 {
			display: inline-block;
			width:49%;
	}
	.div01_2 {
			display: inline-block;
			text-align: right;
			width:50%;
	}

.rogo {
	height: 70px;
}

.tel {
	height: 70px;
}

/*  */

.div02 {
	width: 800px;
	height: 50px;
	background-color: #0099cc;
	text-align: center;
}

.div02 > nav {
	padding-top: 5px;
}

.ul01 {
	margin: 0px;
	list-style-type: none;
	padding-left: 0px;
}

.ul01 > a {
		color: white;
		text-decoration: none;
	}

	.div02_1 {
		width: 19%;
		height: 40px;
		display: inline-block;
		position: relative;
	}

.div02_1 > li {
	width: 100%;
	height: 50%;
	position: absolute;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

.div02_1:hover {
	background-color: #99ccff;
}


/*  */

.topimg {
	width: 800px;
}

/*  */

.div03 {
	width: 800px;
	margin-bottom: 30px;
}

.div03_1 {
	width: 600px;
	word-wrap:break-word;
	display: inline-block;
	vertical-align: top;
}

.div03_2 {
	width: 194px;
	display: inline-block;
	/* background-color: blue; */
	vertical-align: top;
}

.div03_2_1 {
	width: 100%;
	word-wrap: break-word;
	border: 1px solid #347eb0;
	text-align: center;
	padding-bottom: 3px;
}

			.img_inqu01 {
				width: 100%;
			}

			.img_inqu02:hover {
				opacity: 0.6;
			}


.div03_2_2 {
	width: 100%;
	word-wrap:break-word;
	background-color: green;
}

.div03_2_3 {
	width: 100%;
	height: 203px;
	word-wrap:break-word;
	background-color: #347eb0;
	color: white;
	margin-top: 10px;
	margin-bottom: 10px;
}

		.div03_2_3_1 {
			width: 100%;
			height: 30px;
			word-wrap:break-word;
			background-color: #347eb0;
			color: white;
			padding: 10px 0px 0px 0px;
		}
		.div03_2_3_2 {
			width: 95%;
			word-wrap:break-word;
			background-color: #375596;
			color: white;
			padding: 0px 0px 0px 0px;
			margin-top: 0px;
			margin-left: auto;
			margin-right: auto;
		}

.minilist {
	padding-top: 6px;
	padding-left: 30px;
	padding-bottom: 6px;
	margin: 0px;
}

.minilist > li {
	margin: 0px;
	font-size: 1.4rem;
	/* border-bottom: 1px solid #0099cc; */
}

.h1_minilist {
	color: white;
	text-decoration: none;
	font-size: 1.6rem;
	/* padding-top: 10px; */
	padding-left: 16px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-weight: normal;
}


.h1_01 {
	background-color: #eeeeee;
	border-bottom: 3px solid #0099cc;
	margin-top: 0px;
}

.h1_02 {
	margin-top: 0px;
}

.p_toplink {
	text-align: right;
}

.p_toplink > a {
	text-decoration: none;
	font-size: 1.2rem;
}

/* 各コンテンツ */
.img_contents {
	width: 600px;
	height: 200px;
}

.img_bn01 {
	width: px;
	height: px;
	border-radius: 20px;
	border: 1px solid #aaa;
	box-shadow: 0px 0px 5px #aaa;
	margin-bottom: 10px;
}

.img_bn02 {
	width: 280px;
	height: 90px;
	border-radius: 8px;
	border: 1px solid #ccc;
	box-shadow: 0px 0px 2px #ccc;
	margin-bottom: 5px;
}

.img_download {
	width: 550px;
	height: 90px;
	border-radius: 8px;
}

.h1_03 {
	border-left: 6px solid royalblue;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 10px;
	font-weight: normal;
}

.p_item {
	margin-bottom: 0px;
}

.table_01 {
	border: 1px solid gray;
	border-collapse: collapse;
	width: 550px;
}

.table_01 caption {
	color: ;
	border-top: 1px solid gray;
	border-left: 1px solid gray;
	border-right: 1px solid gray;
	padding: 10px;
}

.table_01 tbody {
}

.table_01 tr ,
.table_01 td {
	border: 1px solid gray;
	padding: 10px;
}

.table_01 th {
	width: 100px;
	padding: 10px;
}






		/* 複数ラインナップ用 */
		.img_rad {
			width: 180px;
			border-radius: 50%;
			border: 5px solid white;
			box-shadow: 0px 0px 3px gray;
		}
		.img_rad:hover {
			opacity: 0.6;
		}

		.h2_variety {
			border-top: 1px solid gray;
			border-bottom: 1px solid gray;
			padding-top: 10px;
			padding-bottom: 10px;
		}




/* パンくずリスト ここから*/

.cp_breadcrumb *, .cp_breadcrumb *:after, .cp_breadcrumb *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_breadcrumb {
	margin: 10px auto;
	/* margin: 1em auto; */
	padding: 1em 2em;
	background-color: #3949AB;
	color: #fff;
	border-radius: 0.5em;
}
.cp_breadcrumb a {
	text-decoration: none;
	color: #7986CB;
}
.cp_breadcrumb .breadcrumbs {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.cp_breadcrumb li {
	display: inline-block;
	position: relative;
	padding-right: calc(16px + 8px);
	margin-right: 8px;
	color: #7986CB;
}
.cp_breadcrumb li::before {
	content: '›';
	width: 1em;
	height: 1em;
	line-height: 1;
	text-align: center;
	font-size: 1em;
	color: inherit;
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.cp_breadcrumb li:last-child {
	margin-right: 0;
	padding-right: 0;
	color: #ffffff;
}
.cp_breadcrumb li:last-child::before {
	content: normal;
}

/* パンくずリスト ここまで*/

/* 表示/非表示　制御ここから */
/* 1番目 */
.expand {/*全体*/
  width: 100%;
  padding:0px 0px;
  max-height: 100px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #aaa;
  transition: .01s;
}

.expand::before {/*グラデーション部分*/
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
    transition: .01s;
}

.contenedor {
	margin-bottom: 30px;
}

.contenedor input {/*input要素は隠しておく*/
  visibility: hidden;
}

.contenedor label {/*ボタン部分のスタイル*/
  position: absolute;
  /* bottom: -.8em; */
  display: block;
  font-size: .9em;
  padding: .20em 10px;
  /* right: 0; */
  background: #aaa;
  box-shadow:-5px 0 white;
  color: white;
  z-index:999;
  cursor: pointer;
}

.contenedor label:before {/*閉じている際のボタンのテキスト*/
  content: "成分を全表示";
}

.contenedor input:checked + label:before {/*開いているときは:checked状態なので、その際はボタンテキストを変える*/
  content: "閉じる";
}

input[type=checkbox]:checked ~ .expand {
 max-height: 100%;
}

input[type=checkbox]:checked ~ .expand:before {
 opacity: 0;
}

/* 2番目 */
.expand2 {/*全体*/
  width: 100%;
  padding:0px 0px;
  max-height: 100px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #aaa;
  transition: .01s;
}

.expand2::before {/*グラデーション部分*/
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
    transition: .01s;
}

.contenedor2 {
	margin-bottom: 30px;
}

.contenedor2 input {/*input要素は隠しておく*/
  visibility: hidden;
}

.contenedor2 label {/*ボタン部分のスタイル*/
  position: absolute;
  /* bottom: -.8em; */
  display: block;
  font-size: .9em;
  padding: .20em 10px;
  /* right: 0; */
  background: #aaa;
  box-shadow:-5px 0 white;
  color: white;
  z-index:999;
  cursor: pointer;
}

.contenedor2 label:before {/*閉じている際のボタンのテキスト*/
  content: "成分を全表示";
}

.contenedor2 input:checked + label:before {/*開いているときは:checked状態なので、その際はボタンテキストを変える*/
  content: "閉じる";
}

input[type=checkbox]:checked ~ .expand2 {
 max-height: 100%;
}

input[type=checkbox]:checked ~ .expand2:before {
 opacity: 0;
}

/* 3番目 */
.expand3 {/*全体*/
  width: 100%;
  padding:0px 0px;
  max-height: 100px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #aaa;
  transition: .01s;
}

.expand3::before {/*グラデーション部分*/
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
    transition: .01s;
}

.contenedor3 {
	margin-bottom: 30px;
}

.contenedor3 input {/*input要素は隠しておく*/
  visibility: hidden;
}

.contenedor3 label {/*ボタン部分のスタイル*/
  position: absolute;
  /* bottom: -.8em; */
  display: block;
  font-size: .9em;
  padding: .20em 10px;
  /* right: 0; */
  background: #aaa;
  box-shadow:-5px 0 white;
  color: white;
  z-index:999;
  cursor: pointer;
}

.contenedor3 label:before {/*閉じている際のボタンのテキスト*/
  content: "成分を全表示";
}

.contenedor3 input:checked + label:before {/*開いているときは:checked状態なので、その際はボタンテキストを変える*/
  content: "閉じる";
}

input[type=checkbox]:checked ~ .expand3 {
 max-height: 100%;
}

input[type=checkbox]:checked ~ .expand3:before {
 opacity: 0;
}

/* 表示/非表示　制御ここまで */

/*  */

.div04 {
	width: 800px;
	height: 250px;
	background-color: #347eb0;
	text-align: center;
}

.div04_0 {
	width: 190px;
	height: 200px;
	display: inline-block;
	background-color: #375596;
	vertical-align: top;
	text-align: left;
	color: white;
	padding-top: 10px;
	margin-top: 10px;
	margin-right: 10px;
	filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.6));
}

.div04_0 > h1 {
	font-size: 1.6rem;
	padding-left: 6px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-weight: normal;
}

.div04_1 {
	width: 180px;
	height: 200px;
	display: inline-block;
	background-color: #375596;
	vertical-align: top;
	text-align: left;
	color: white;
	padding-top: 10px;
	margin-top: 10px;
}

.div04_1 > h1 {
	font-size: 1.6rem;
	padding-left: 6px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-weight: normal;
}

.ftp01 {
	margin-top: 6px;
	margin-left: 15px;
	font-size: 1.4rem;
}

.ftlist {
	padding-top: 0px;
	padding-left: 30px;
	margin-top: 6px;
}

.ftlist > li {
	margin: 0px;
	font-size: 1.4rem;
}
.a_li_footer {
	color: white;
	text-decoration: none;
}

.a_li_footer:hover {
	color: red;
}

.a_h1_footer {
	color: white;
	text-decoration: none;
}

.a_h1_footer:hover {
	color: red;
}

.h2_ft {
	font-size: 1.6rem;
	padding-left: 6px;
	margin-top: 8px;
	margin-bottom: 0px;
	font-weight: normal;
}

.a_h2_footer {
	color: white;
	text-decoration: none;
}

.a_h2_footer:hover {
	color: red;
}

/* フォーム蘭 */
　/* 全リセット */
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


.p01 {
	color: #555;
	font-weight: normal;
}