@charset "utf-8";

/* ======================================================
                共通設定
====================================================== */
body{
	margin:0;
	padding:0;
}
/* ======================================================
                header設定
====================================================== */

/* ======================================================
               slider
====================================================== */

 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100%;
  height     : 80vh;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  object-fit: cover;
  opacity    : 0;
  animation  : slideAnime 25s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 5s }
.slide img:nth-of-type(3) { animation-delay: 10s }
.slide img:nth-of-type(4) { animation-delay: 15s }
.slide img:nth-of-type(5) { animation-delay: 20s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   10% { opacity: 1 }
  20% { opacity: 1 }
  40% { opacity: 0 }
  80% { opacity: 0 }
 100% { opacity: 0 }
}

#main_title{
	z-index:10;
}

.title_main{
	text-shadow:2px 2px 10px #000;
	color:#fff;
	font-family:serif;
	font-weight:bold;
	font-size:70px;
	position:absolute;
	right:0; left:0;
 	margin:auto;
	top:330px;
	width:650px;
	line-height:1.2em;
	height:450px;
}

.title_sub{
	text-shadow:2px 2px 8px #333;
	color:#fff;
	font-family:serif;
	font-size:30px;	
	letter-spacing:0.1em;
	font-weight:bold;
	position:absolute;
	right:0; left:0; margin:auto;
	top:500px;
	width:580px;
}

/* ======================================================
               main設定
====================================================== */
#slider{
	width:100%;
	height:1024px;
}
#main{
	text-align:center;
	margin:0 auto;
	width:1220px;
	padding-top:50px;
	overflow:hidden;
}

#main_submenu img{
	object-fit: cover;
	height:300px;
}

.img_m img{
	opacity:0.7;
}

.img_m a img:hover{
	opacity:1;
}

#main{
	position:relative;

}

.text_c{
	text-shadow:1px 1px 3px #333;
	font-family:serif;
	font-size:30px;	
	letter-spacing:0.1em;
	font-weight:bold;
	position:absolute;
	left:120px;
	top:180px;
	width:155px;	
	z-index:5;
}

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

.text_c a:hover{
	opacity:0.5;
}

.text_b{
	text-shadow:1px 1px 3px #333;
	font-family:serif;
	font-size:30px;	
	letter-spacing:0.1em;
	font-weight:bold;
	position:absolute;
	left:0; right:0; margin:auto;
	top:200px;
	width:155px;	
	z-index:5;
}

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

.text_b a:hover{
	opacity:0.5;
}

.text_p{
	text-shadow:1px 1px 3px #333;
	font-family:serif;
	font-size:30px;	
	letter-spacing:0.1em;
	font-weight:bold;
	position:absolute;
	right:120px;
	top:180px;	
	z-index:5;
	over-flow:hidden;
}

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

.text_p a:hover{
	opacity:0.5;
}

/* ======================================================
               news設定
====================================================== */

.title_sub2 {
	color:#4b5c76;
	font-size:35px;
	text-align:center;
	border-bottom:solid 2px #4b5c76;
	width:300px;
	padding:60px 0 0 0;
	margin:0 auto;
	font-family:serif;
	font-weight:bold;
}

#news{
	margin:0 auto;
}

#news table{
	padding:30px 0 0 0;

}

#news table tr{

}

.news_img{
	border-bottom:dotted 1px #ccc;
	width:300px;
	height:150px;

}

.news_img img{
	width:300px;
	object-fit: cover;
}

.news_img:hover{
	opacity:0.5;
}

.news_title{
	background:#f0f0f0;
	border-bottom:dotted 1px #ccc;
}

.news_title a{
	text-decoration:none;
	font-size:20px;
	color:#000;
	margin-left:50px;
	padding-bottom:20px;
	padding-top:20px;
	border-bottom:solid 1px #ccc;
}

.news_title span{
	padding-left:50px;
	color:#565656;
}

.news_title a:hover{
	opacity:0.5;
}

.news_link{
	border:solid 1px #ccc;
	text-align:center;
	width:300px;
	margin:0 auto; 
	padding:20px 20px 20px 20px;
	margin-top:50px;
}

.news_link:hover{
	opacity:0.5;
}

.news_link a{
	text-decoration:none;
	color:#000;
}

/* ======================================================
               footer設定
====================================================== */

/*.libertylife_sns{
	overflow-y: hidden;
	float:right;
	margin-top:-125px;
}

.libertylife_sns a{
	padding-left:20px;
}

.libertylife_sns a:hover{
	opacity:0.5;
}

#footer_menu{
	margin-left:-40px;
}



#footer_menu ul li{
	display:inline-block;
	padding:0 7px 0 7px;
}

#footer_menu ul li a{
	text-decoration:none;
	color:#fff;
}

#footer_menu ul li a:hover{
	opacity:0.5;
	border-bottom:solid 1px #fff;
}

#footer_menu2{
	margin-left:-40px;
}

#footer_menu2 ul{
	list-style:none;

}

#footer_menu2 ul li{
	display:inline-block;
	padding:0 7px 0 7px;
}

#footer_menu2 ul li a{
	text-decoration:none;
	color:#fff;
}

#footer_menu2 ul li a:hover{
	opacity:0.5;
	border-bottom:solid 1px #fff;
}

#footer_border{
	border-top:solid 1px #fff;
	border-bottom:solid 1px #fff;
	margin:20px 0 30px 0;
}*/



/*ページトップ footer ===================================================== */

#page_top{
  width: 80px;
  height: 80px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #333;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*content*/
.soy{
	margin:0 auto;
	align-items:center;
	display:flex;
	width:fit-content;
}
.text02{
	text-align:left;
	width:40vw;
	margin:0 auto;
	padding:20px;
	font-size:18px;
	line-height:2;
}
.text03{

	font-size:20px;
	margin:0 auto;
	margin-top:10px;
	margin-bottom:10px;
	width:40vw;
	font-family: 'Noto Serif JP', serif;

}
.serif{
	background-color:#ffe;
	width:40vw;
	margin:0 auto;
}
ol .mokuzi_in{
	
}
.contents_serviceFlow{
	display:block;
	width:80%;
	max-width:990px;
	box-sizing:border-box;
	margin:0 auto;
	padding:0 20px;
	position:relative;
}
.contents_serviceFlow ul{
	display:flex;
	margin:0 auto;
	flex-direction:column;
	width:60%;
	min-width:400px;
	padding:60px;
	background-color:#ffe;
	border-radius:10px;
	position:relative;
	list-style:none;
}
.contents_serviceFlow ul li{
	display:block;
	margin-bottom:40px;
	padding:0 0 0 56px;
	font-weight:700;
	position:relative;
	
}
.contents_serviceFlow ul li::before{
	content:'';
	display:block;
	width:16px;
	height:16px;
	box-sizing:border-box;
	background-color:#fff;
	border:solid 2px #5472cd;
	border-radius:50%;
	z-index:1;
	position:absolute;
	top:calc(50% + 1px);
	left:80px;
	transform:translateY(-50%);
}
.contents_serviceFlow ul li::after{
	content:'';
	display:block;
	width:2px;
	height:50px;
	box-sizing:border-box;
	background-color:#5472cd;
	position:absolute;
	top:20px;
	left:87px;
}
.contents_serviceFlow ul li:last-child::after{
	background-color:#fff;
}
.contents_serviceFlow ul li:first-of-type::before,.contents_serviceFlow ul li:last-of-type::before{
	background-color:#5472cd;
}
/*ここまで*/
/*取り扱い原料*/
.itemTitle{
	font-size:20px;
	font-weight:bold;
	border-bottom:1px solid #999999;
	padding-bottom:10px;
	margin:20px 0 20px 0;
}
.bg_g{
	background:#eee;
}
.ourproducts_button{
	text-align:center;
}
.ourproducts_button a{
	position:relative;
	display:inline-block;
	font-size:1em;
	line-height:1.3em;
	font-weight:700;
	letter-spacing:.03em;
	margin-bottom:1em;
	margin-top:1em;
	padding:15px 40px;
	text-decoration:none;
	transition-duration:1s;
	transition-property:color;
	cursor:pointer;
	z-index:0;
	border-radius:5px;
	border:none;
	color:#fff;
	background-color:#4b5c76;
	
}
.ourproducts_button a:hover{
	opacity:0.5;
	border-bottom:solid 1px #fff;
}
.outproducts{
	font-size:18px;
	font-weight:bold;
	float:left;	
}
.outproducts2{
	font-size:18px;
	font-weight:bold;
	padding-top:20px;
	float:left;	
}
/*添加物ページ*/
.main_table{
	width:100%;
}
.main_table td{
	width:50%;
}
/*proteinページ*/
#content_main{
	margin:0 auto;
	padding-top:50px;
	overflow:hidden;
	width:80vw;
	text-align:center;	
}
.content{
	padding-top:50px;
	margin:0 auto;
}
.content p.text{
	text-align:left;
	width:40vw;
	margin:0 auto;
	font-size:18px;
	line-height:2;
}

p.data{
	text-align:left;
	margin-top:50px;
	font-weight:bold;
	font-size:20px;
}
#chapter1{
	color: #494949;/*文字色*/
	margin:0 auto;
	margin-top:10px;
	margin-bottom:10px;	
	
}
.mokuzi{
	
	text-align:left;
	margin:0 auto;
	width:40vw;
	border:1px solid #CCD3D3;
	padding:20px;
}
.mokuzi li{
	position:relative;
	margin:10px;
}
h4{
	position:relative;
	padding: 1rem 2rem;
	width:40vw;
	margin:0 auto;
	text-align:left;
}
h4::before{
	content:'';
	display:block;
	width:24px;
	height:24px;
	background:#5472cd;
	border-radius:5px;
	position:absolute;
	top:15px;
	left:0;
}
ol{
	list-style:none;
}
.blog{
	width:50vw;
	margin:0 auto;
}
.blog_img img{
	width:50%;
	height:50%;
	border-radius:10px;
	text-align:center;
	margin:10px 10px;
}
.marker{
	background-image: linear-gradient(to top,#f99 10%,transparent 10%);
}
h1 {
  position: relative;
  color: white;
  background: #4b5c76;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}
h1:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}
.content h2{
 
 	color: #010101;/*文字色*/
 	text-align:left;
 	border-bottom: solid 3px #516ab6;/*下線*/
	width:50%;
	margin:0 auto;
}
h3{
	position: relative;
	margin:0 auto;
	border-bottom: solid 3px #cce4ff;
	width:40vw;
	text-align:left;
	margin-top:10px;
}
h3:after{
	position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}
.inlink{
	width:40vw;
	border:1px solid #CCD3D3;
	margin:0 auto;
	margin-bottom:10px;
}
.blog_mokuzi{
	border-top: solid #1e366a 1px;/*上のボーダー*/
  	border-bottom: solid #1e366a 1px;/*下のボーダー*/
	margin:0 auto;
	text-align:left;
	padding:20px;
}

.blog_mokuzi ul li{
	text-align:left;
}
.bloglist{
	text-align:left;
	margin:0 auto;
}
.mokuzi >li > a::before{
	content:'';
	display:block;
	width:24px;
	height:24px;
	background:#5472cd;
	border-radius:50%;
	position:absolute;
	top:0;
	left:0;
}
.mokuzi >li > a::after{
	content:'';
	display:block;
	width:6px;
	height:10px;
	border-right:2px solid #fff;
	border-bottom:2px solid #fff;
	position:absolute;
	top:6px;
	left:9px;
	transform:rotate(45deg);
}
.toc-list{
	text-decoration:none;
	display:block;	
	padding-left:32px;
	color:#5472cd;
	line-height:1.5;
	font-weight:700;
	position:relative;
}
li.mokuzi1{
	font-size:20px;
}
/*レスポンシブ*/
	@media screen and (max-width: 480px){
#sabmenu_a{
	overflow:auto;
	white-space:nowrap;
 }
.text_p{
display:none;
}
.text_b{
 display:none;
 }
.text_c{
display:none;
 }
#slider{
	height:250px;
 }
.slide{
	
 }
.contents_serviceFlow ul{
	padding:10px;
 }
}