﻿@charset "utf-8"


html{
	width: 100%;
	height: 100%;
}

*{
	font-weight: bold;
}

body{
	background-color: #fff;
}

#wrap{
	width:1340px;
	margin: 0 auto;
	background-color: rgba(227,215,163,0.7);
}

*, *:before, *:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
.cp_cont {
height: 65vh;
margin-top: -50px;
}
/* menu */
.cp_offcm03 {
position: absolute;
margin: 0 auto;
z-index: 5;
top: 25px;
//left: 0;
margin-left: 500px;
overflow: auto;
width: 480px;
height: 120px;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: #ffffff;
background-color: #039be5;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;

}
.cp_offcm03 li {
display: inline-block;

border: none;
}
.cp_offcm03 a {
display: block;
padding: 12px 45px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: #1565C0;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}



/* スマホ用 */
@media (max-width: 620px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -750px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 60px;
color: #ffffff;
background-color: #039be5;
}
.cp_offcm03 nav {
background: #29B6F6;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
border-bottom: 1px solid #ffffff;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 10;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 60px;
background-color: #039BE5;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: #eeeeee;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: #eeeeee;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
}
}
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #333333;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
	-webkit-transform: translateX(-250px);
	        transform: translateX(-250px);
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-family: 'FontAwesome';
	content: '\f0c9';
	font-size: 2em
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
	content: '\f00d';
}
/* contents */
.cp_contents {
	color: #333333;
	text-align: center;
}


header{
	background-color: #65d8f2;
	width: 1340px;
	height: 180px;
	overflow: hidden;
}


.logo_ushi{
	margin-top: 40px;
	margin-left: 50px;
	float: left;
}

.logo_ushi a{
	width: 123px;
	height: 105px;
}

.logo_moji{
	margin-top: 55px;
	margin-left: 10px;
	display: inline-block;
	float: left;
}

.nintei_bangou{
	display: inline-block;
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
font-size:16px;
	margin-top: 115px;
	margin-left: -340px;
}


.jgap_and_jouhou{
	display: inline-block;
	margin-top: -100px;
	padding: 0;
	width:320px;
	height:180px;
	float: right;
	margin-right:10px;
}

.jgap{
	width:110px;
	display: inline-block;
	margin-top: 55px;
}

.jouhou{
	padding-top: 50px;
	margin: 0 auto;
//	display: inline-block;
	width:250px;
//	margin-left: 100px;
	line-height: 1.5em;
	text-align: center;
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
}

header h1,h4{
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;}

.shamei{
	font-size: 15px;
	color : #333;
}

header h1 a{
	text-decoration: none;
	color: #333;
}

.h4{
	margin-top: 8px;
}

h4{
	font-size: 13px;
	margin-left: 25px;
	margin-top: -8px;
	color : #333;
}

}

/* PC用 */
@media screen and (min-width: 621px) {



*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}


ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: inherit;
}
.cp_cont {
	height: 65vh;
}
.cp_offcm01 {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-block;
}
/* menu */
.cp_offcm01 .cp_menu {
	position: fixed;
	top: 0;
	right: -100vw;
	width: 250px;
	height: 100%;
	cursor: pointer;
	-webkit-transition: 0.53s transform;
	        transition: 0.53s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	background-color: #607D8B;
	opacity: 0.8;
}
.cp_offcm01 .cp_menu ul {
	margin: 0;
	padding: 0;
}
.cp_offcm01 .cp_menu li {
	list-style: none;
}
.cp_offcm01 .cp_menu li a {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.cp_offcm01 #cp_toggle01 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
	-webkit-transform: translateX(-100vw);
	        transform: translateX(-100vw);
}
/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
	display: block;
	padding: 0.5em;
	cursor: pointer;
	-webkit-transition: 0.5s transform;
	        transition: 0.5s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #333333;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
	-webkit-transform: translateX(-250px);
	        transform: translateX(-250px);
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-family: 'FontAwesome';
	content: '\f0c9';
	font-size: 2em
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
	content: '\f00d';
}
/* contents */
.cp_contents {
	color: #333333;
	text-align: center;
}
}

/* 株式会社安立ファームについて */

#hidagyu{
	padding-top:70px;
	margin: 0 auto;
	text-align:center;
}

.center2{
	padding-top: 20px;	
}

.hida_beef{
//	width:850px;
	height: auto;
//	padding-top:20px;
	font-family: "游明朝","Book Antiqua";
	font-size: 36px;
	color: #333;
	text-align:center;
}

.af_co{
	font-family: "游明朝","Book Antiqua";
	font-size: 32px;
	color: #333;
//	margin-top: 30px;
	text-align:center;
}

.af_co_wagyu{
//	margin-top: 20px;
	font-family: "游明朝","Book Antiqua",serif;
	font-size: 24px;
	color: #333;
//	text-align:center
	margin: 0 auto;;
}


/* 安立ファームの歴史 */

#history{
	width: 890px;
	overflow: hidden;
	margin: 0 auto;
	text-align: center;
	padding-top: 200px;
	font-family: "游明朝","Book Antiqua",serif;
}


.history{
	text-align: center;
	padding-bottom: 30px;
	font-size: 32px;
}

.td2, .td3{
	text-align: left;
	padding: 15px;
}
.td1{
	width: 340px;
	float: left;
	padding-top: 20px;
}
.td2{
	width: 540px;
	float: left;
	margin-left: 10px;
}

.td3{
	width:500px;
	float: left;
	margin-top: -10px;
	margin: right: 10px;
	padding-left: 0px;
}
.td4{
	width:380px;
	float: left;
	padding-top: 10px;

}

.td2, .td3{
	font-size: 17px;
	color: #333;

}


/* 環境 */
.kodawari1{
	clear: both;
	width: 850px;
	margin:0 auto;
	text-align: center;
	padding-bottom: 30px;
}

.koukuu{
	padding-top: 30px;

}

.kodawari{
	margin-top: 200px;
	font-family: "游明朝","Book Antiqua";
	font-size: 32px;
	padding-bottom: 20px;

}


.deruta {
	width: 700px;
	font-family: "游明朝","Book Antiqua";
	font-size: 17px;
	padding-top:20px;
	margin: 0 auto;
	text-align: left;
} 


#ike_to_ushi{
	width: 820px;
	overflow: hidden;
	margin: 0 auto;
	text-align: center;
}

.ike_to_ushi1,.ike_to_ushi2,.ike_to_ushi3,.ike_to_ushi4{
	float: left;

	margin: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.chikasui,.momigara{
	clear: both;
	width: 830px;
	margin: 0 auto;
	text-align: left;
	font-family: "游明朝","Book Antiqua";
	font-size: 17px;
}

.clean_farm{
	width: 370px;
	font-size: 17px;
	float: right;
	color: #1c9665;
	padding-left: 150px;
}

.momigara1,.momigara2{
	clear: both;
}


/* こだわり */

.kodawari2{
	clear: both;
	width: 850px;
	margin: 0 auto;
	text-align: center;
}

.bimontopc{
	margin:10px;

}

.bimontopc span{
	margin: 5px;
}

.bimon{
	padding-top: 20px;
}

.bimon,.data,.pass,.esa1,.esa2{
	width: 700px;
	margin: 0 auto;
	text-align: left;
	font-family: "游明朝","Book Antiqua";
	font-size: 17px;
//	margin-bottom: 20px;
}

#ear_tag{
	padding-top: 30px;
}

.ear_tag1,.ear_tag2{
	display:inline-block;
	padding-right:10px;
}

/* 愛情と衛生管理 */

.kodawari3{
	text-align:center;
}

.hirobiro_seiketsu{
	margin-top:30px;
}

.hirobiro_seiketsu span{
	margin: 5px;
}

.seiketsu{
	width: 800px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 20px;
	text-align: left;
	font-family: "游明朝","Book Antiqua",serif;
	font-size: 17px;
}
.staff{
	margin-top: 20px;
}

.seicho{
	width: 650px;
	margin: 0 auto;
	font-family: "游明朝","Book Antiqua",serif;
	font-size: 17px;
	margin-top: 20px;
}

.smile{
	margin-top: 30px;
//	margin-bottom: 250px;
}

.egao{
	margin: 0 auto;
	font-family: "游明朝","Book Antiqua",serif;
	font-size: 24px;
	margin-top:30px;
	padding-bottom:300px;	
}

/* バナー */
#bannar{
	margin-bottom: 50px;
	text-align:center;
}



h2{
	font-family: 游明朝;
	font-size: 36px;
	font-weight: bold; 
	color: #333;
}


h3{
	font-family: 游明朝;
	font-size: 24px;
	font-weight: bold;
	color: #32467b;
	line-height:1.5em;
	text-align: center;	
}



footer{
	width: 1340px;
	height: 300px;
	background-color: #e5b35c;
	margin: 0 auto;
}

footer nav ul{
	width: auto;
	height: 40px;
	padding-top: 30px;
	text-align: center;
}

footer nav ul li{
	width:200px;
	display: inline-block;
	text-align:center;
}

.copy p{
	color:#74b7d8;
	margin-top: 50px;
	text-align: center;
}

