@charset "UTF-8";
/*====================================
	
	----------------------------------
		HEADER
	----------------------------------
	====================================*/
.header-container{ position:relative; width:100%; height:80px; z-index:999999; }
.header-container-top , .header-container-corporate{position:relative; background:#e2a3a8;}

.header {
	width: 100%;
	position:relative;

	transition: all 0.3s ease; 
	padding:0px 0;

}
.home .header {top:0px; }
.logo-area{padding:20px 0; text-align:center;}

.loading__wrapper{position:relative;}

#is-loading {
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #eed0ce;
	
}
#loading {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 188px;
	margin-top: -104px;
	margin-left: -150px;
	text-align: center;
	color: #000000;
	
}

.loading-txt{margin-top:30px; letter-spacing:1.0em; color:#ee86a8;}


.top-logo{position:absolute; top:20px; left:30px;}
.navright{position:absolute; top:70px; right:20px; display:flex;}
.topaccess a {color:#ffffff; font-size:1.4rem; letter-spacing:0.4rem;}
.topaccess{border:1px solid #5bc0de; background:#5bc0de; padding:5px 20px; }

/* ==========================================================================
	fixed
	========================================================================== */
/*.headera.fixed {
	width:100%;
	position: fixed;
	left: 0;
	top: 0;
	background: #1c1c1c;
	box-shadow: 0px 7px 20px #1c1c1c;
	height:80px;
	color:red;
}
.headera.fixed .header-container-top .header-logo{display:block;}

.headera.fixed .header-nav a {color: #f8f8f8; }
.headera.fixed .header-nav__btn__pc:hover {background: #212121; }
.headera.fixed .header-nav__btn__pc:hover a {color: #fff; }

@media screen and (min-width: 768px)  {
	.headera.fixed {height:80px; padding:0;}
}
*/
/* ==========================================================================
	Nav
	========================================================================== */
.header-nav__ul { display: none;}
.header-nav__ul a {
	color:#22252c;
	font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1.6rem;
	font-weight: 300;
	font-feature-settings: "palt";
	line-height: 60px;
	padding: 0 10px;
}
.header-container-corporate .header-nav__ul a{font-size:1.7rem;}
.header-container-top .header-nav__ul a{color:#000000;}
.header.fixed .header-nav__ul a{color:#f8f8f8;}


.header-nav__btn__pc {transition: all 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0s; }
.header-nav__btn__pc:hover {background: #44af35; }
.header-nav__btn__pc:hover a {color: #fff; }

.header-nav__btn__pc a.current {position: relative; }
.header-nav__btn__pc a.current:after {
	content: '';
	background-color: #44af35;
	width: 70%;
	right: 50%;
	transform: translateX(50%);
	height: 6px;
	position: absolute;
	display: block;
	bottom: 0;
}

.header-social { display: none; }
.header-nav__li { transition: all 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0s; position: relative; }
.header-nav__li__link .n_ja{display:block; text-align:center;}
.header-nav__li__link .n_en{display:block; text-align:center;}
.header-nav__li:before, .header-nav__li:after {content: ''; position: absolute; bottom: 0; width: 0; right: 0; height: 3px; }
.header-nav__li:before {transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.1s; background: #fff; }
.header-nav__li:after {	transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); background-color: #ee86a8; }
.header-nav__li:hover:before {left: 0; width: 100%; }
.header-nav__li:hover:after { left: 0; width: 100%; }
.header-nav__li.current:before {display: none; }
.header-nav__li.current:after {background-color: #44af35; width: 70%; right: 50%; transform: translateX(50%); }
.header-nav__li.current:hover:before {display: none; }
.header-nav__li.current:hover:after {width: 70%; right: 50%; left: initial; transform: translateX(50%); }
.header-nav__li.contact:before, .header-nav__li.contact:after {display: none; }
.header-nav__li.contact a {font-size: 2rem; background: #44af35; transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s; }



.header-nav__icon a{display: block; color:#22252c; font-size: 1.5rem; padding: 0 6px;}

@media screen and (min-width: 768px){
	.header-nav__ul { display: flex;}
	.header-nav__ul a {padding: 0 15px;}
	.header-nav-wrap{display: flex; align-items: center; justify-content:center; background:red;}
	.top-header-nav-wrap{display: flex; align-items: center; justify-content: center;}
	
}

/* subnav
----------------------------------------------------------------- */
.header-nav__btn__pc:hover > .header-subnav {
	transform: translate(0, 0);
	transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, -webkit-transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
opacity: 1; visibility: visible; }

.header-subnav {
	transition: transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, -webkit-transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
	transform: translate(0, 0px);
	opacity: 0;
	z-index: -1;
	visibility: hidden;
	position: absolute;
	top: 80px;
	left: 0;
}
.fixed .header-subnav{top:70px;}

.header-subnav.works {width: 100%; height: 220px; padding: 30px 0;}
.header-subnav.works {width: 100%; height: 220px; padding: 30px 0; background:#22252c; }
.header-subnav li {margin-bottom: 20px; background-size: cover;}
.header-subnav.company {
	width: 100%;
	height: 400px;
	padding: 30px 0;
	background: url(https://f-chiyoda.com/wp/wp-content/themes/chiyoda/img/bg_header_service.jpg) no-repeat; background-size: cover; 
}

.header-subnav.company li {margin-bottom: 20px; }
.header-subnav.company li:nth-of-type(2) a {background: url(https://f-chiyoda.com/wp/wp-content/themes/chiyoda/img/subnav_fureai.jpg) no-repeat; background-size: cover; }
.header-subnav.company li:nth-of-type(3) a {background: url(https://f-chiyoda.com/wp/wp-content/themes/chiyoda/img/subnav_fureai.jpg) no-repeat; background-size: cover; }
.header-subnav.company li:nth-of-type(4) a {background: url(https://f-chiyoda.com/wp/wp-content/themes/chiyoda/img/subnav_fureai.jpg) no-repeat; background-size: cover; }
.header-subnav.company li:nth-of-type(5) a {background: url(https://f-chiyoda.com/wp/wp-content/themes/chiyoda/img/subnav_fureai.jpg) no-repeat; background-size: cover; }
.header-subnav.company li:nth-of-type(6) a {background: url(https://f-chiyoda.com/wp/wp-content/themes/chiyoda/img/subnav_fureai.jpg) no-repeat; background-size: cover; }

.header-subnav.company .header-subnav__in {flex-wrap: wrap; width: 970px; justify-content: space-between; }
.header-subnav__in {width: 900px; margin: 0 auto; align-items: center; display: flex; flex-wrap: wrap; width: 970px; justify-content: space-between; }
.header-subnav__in li { width: 300px; height: 160px; overflow: hidden; }
.header-subnav__in li a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 93px 0 0;
	color: #fff; /*!important;*/
	transition:transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); 
}

.header-subnav__in li span {display: block; line-height: 1.4; }
.header-subnav__in li span.en {font-size: 1.8rem; }
.header-subnav__in li span.ja {font-size: 1.6rem; }
.header-subnav__in li:hover a {transform: scale(1.1); }
.header-subnav__in li.ttl {
	font-size: 2.8rem;
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 600;
	letter-spacing: .3rem;
	text-align: center;
	height: auto; 
}

.header-subnav__in li.ttl span{display:block; font-size:1.6rem;}
.header-subnav__in li.ttl span a{color:#22252c;}
/* pc-large */
@media screen and (min-width: 1280px) {
	.header-nav__ul a {padding: 0 15px;}
}



/*====================================
	
	----------------------------------
		DROWEW
	----------------------------------
	
	====================================*/
.toggle_nav{
	position: fixed;
	top: 30px;
	right: 25px;
	width: 56px;
	height: 56px;
	padding: 13px 17px 0;
	cursor: pointer;
	background:#44af35;
	border-radius: 50%;
}
/*.header-container-top .toggle_nav{top: 10px;}*/

.toggle_nav > div{position: relative; width: 22px;}
.toggle_nav span {
	width: 100%;
	height: 1px;
	left: 0;
	display: block;
	background: #ffffff;
	position: absolute;
	transition: top .5s ease, -webkit-transform .6s ease-in-out;
	transition: transform .6s ease-in-out, top .5s ease;
	transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}
/*.header-container-top .toggle_nav{top:60px;}*/
.header-container-top .toggle_nav span {background: #ffffff;}


.fixed .toggle_nav{	top: 10px;}
.top-toggle-fixed .toggle_nav span {background:#ffffff;}
.top-toggle-fixed .toggle_nav{top: 10px; transition: all 0.3s ease;}
.toggle-fixed .toggle_nav{top: 10px; transition: all 0.3s ease;}




.toggle_nav span:nth-child(1) {top: 6px;}
.toggle_nav span:nth-child(2) {top: 14px;}
.toggle_nav span:nth-child(3) {top: 22px;}
.toggle_nav:hover span:nth-child(1) {top: 4px;}
.toggle_nav:hover span:nth-child(3) {top: 23px;}
.on .toggle_area span {background: #f1f1f1;}
.on .toggle_area span:nth-child(1) {top: 15px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.on .toggle_area span:nth-child(2) {top: 15px; width: 0; left: 50%;}
.on .toggle_area span:nth-child(3) {top: 15px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}




@media screen and (min-width: 768px){
	.top_toggle_nav .toggle_nav{background:#ffffff;}
	.top_toggle_nav .toggle_nav span {background:#000000;}
	.header.fixed .toggle_nav{	top: 10px;}
	.header-container-top .toggle_nav{top:50px;}
	.header-container-top .top-toggle-fixed .toggle_nav{top: 10px;}
	.toggle-fixed .toggle_nav{top: 10px;}
}


/*transition & delay*/
.transition10{transition:all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.delay01{transition-delay: .1s;}
.delay02{transition-delay: .2s;}
.delay03{transition-delay: .3s;}
.delay04{transition-delay: .4s;}
.delay05{transition-delay: .5s;}
.delay06{transition-delay: .6s;}
.delay07{transition-delay: .7s;}
.delay08{transition-delay: .8s;}
.delay09{transition-delay: .9s;}
.delay10{transition-delay: 1s;}
.delay11{transition-delay: 1.1s;}



/*fullnav*/
.fullnav{
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

/*fullnav__nav*/
.fullnav__nav{
	align-items: center;
	background: #fff;
	display: flex;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 0;
}
/*gnav*/
.gnav{margin: 0 auto; width: 80%;}
.gnav__menu__item{margin:20px 0; opacity: 0; transform: translateY(100px);}
.gnav a{color: #333; text-decoration: none;}

/*fullnav__cnt*/
.fullnav__cnt{
	align-items: center;
	background: #44af35;
	color: #fff;
	display: flex;
	height: 100%;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 0;
}
.fullnav__cnt__inner{margin: 0 auto; width: 80%; }
.fullnav__cnt__title{
	/*margin-left: 20px;*/
	margin-bottom: 20px;
	opacity: 0;
	transform: translateY(100px);
}
.fullnav__cnt__title.fct01{color:#555555;}
.fullnav__cnt__title.fct02{color:#ffffff;}
.fullnav__cnt__menu{list-style: none;}
.fullnav__cnt__menu__item{margin:20px 0; opacity: 0; transform: translateY(100px);}
.fullnav__cnt__menu__item a{color: #fff;}
.fullnav.on .fullnav__nav{opacity: 1; width: 50%;}
.fullnav.on .gnav li{opacity: 1; transform: translateY(0);}
.fullnav.on .fullnav__cnt{opacity: 1; width: 50%;}
.fullnav.on .fullnav__cnt__title{opacity: 1; transform: translateY(0);}
.fullnav.on .fullnav__cnt__menu__item{opacity: 1; transform: translateY(0);}

/******/
.h_upper , .ranch-nav {padding:0 2%;}
.h_upper{background:#1c1c1c; display:flex; justify-content: space-between; align-items:center;}


.h_upper ul{display:flex; padding:7px 0; align-items:center;}
.h_upper_nav li{margin-right:20px;}
.h_upper_nav  li a{color:#f8f8f8; font-size:1.3rem; justify-content: space-between;}

.h_upper_right li{margin-left:10px;}
.h_upper_right li a{ color:#f8f8f8; font-size:2.0rem;}
.h_upper_right .hu_goshop{border:1px solid #ffffff; padding:0px 30px;}
.h_upper_right .hu_goshop a{font-size:1.3rem;}
.h_upper_sns li a.icon{font-size:2.2rem;}



.h_ranch_top{display:flex; justify-content: space-between; align-items:center; margin:10px 0 0 0; }
.h_ranch_top_right {display:flex; align-items:center;}
.h_ranch_top_right ul{display:flex;}
.h_ranch_top_right ul.linkbtn a{background:#f6f4ef; font-size:1.4rem; padding:10px 25px;}




.h_ranch_top ul.upper{display:flex; align-items:center; justify-content: flex-end;}

.h_ranch_top ul .linkbtn a{background:#f6f4ef; font-size:1.2rem; padding:10px 25px;}
.bo-r{border-right:1px solid #eceae6;}
.ranch-sns{font-size:2.4rem; margin-left:8px;}

.h_ranch_animal{display:flex; align-items: center; font-feature-settings: "palt";}
.h_ranch_animal div{margin-right:10px;}
.h_ranch_animal_txt{font-size:1.4rem;}

.ranch-nav{display:flex; justify-content: space-between;}
.ranch-nav ul {
	display: flex;
	justify-content: space-between;
	align-items:center;
	margin:10px 0 10px 0;
}
.ranch-nav ul.nav li {
	/*width: calc(100%/5);*/
	margin:0 15px;
}
.ranch-nav ul.nav li a {
	color: #1c1c1c;
	text-decoration: none;
}

.ranch-nav ul li a .ja{display:block; font-size:1.5rem; font-weight:500; font-feature-settings: "palt"; line-height:1.0em;}
.ranch-nav ul li a .en{display:block; font-size:1.2rem; color:#5c5c5c;}

.ranch-btn a ,.ranch-btn-bl a{color:#f8f8f8; font-size:1.4rem; letter-spacing:0.05em; }
.ranch-btn{border:3px solid #5bc0de; background:#5bc0de;  padding:1px 15px; margin-left:5px; border-radius: 5px;}
.ranch-btn-bl{border:3px solid #1c1c1c; background:#1c1c1c;  padding:5px 15px; margin-left:10px; border-radius: 5px;}
.btn-sm{}
.btn-sm a{color:#5bc0de;}
.r-arrow{
	position: relative;
	display: inline-block;
	padding-left: 15px;
}

.r-arrow::before{
	content: '';
	width: 6px;
	height: 6px;
	border: 0px;
	border-top: solid 2px #5bc0de;
	border-right: solid 2px #5bc0de;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: calc(50% - 2px);
	left: 0;
}





/*====================================
	
	----------------------------------
		header-bg
	----------------------------------
	
	====================================*/
.header-bg {position:relative;}


.all-news .page-bg {background: url(../img/dummy.jpg) no-repeat; background-size: cover; }
.about .page-bg {background: url(../img/dummy.jpg) no-repeat; background-size: cover; }
.contact .page-bg {background: url(../img/dummy.jpg) no-repeat; background-size: cover; }

@media (max-width: 768px) {
	.all-news .page-bg {background: url(../img/dummy.jpg) no-repeat;background-size: cover; }
	.about .page-bg {background: url(../img/dummy.jpg) no-repeat;background-size: cover; }
	.contact .page-bg {background: url(../img/dummy.jpg) no-repeat;background-size: cover; }
}

.kv {
	width: 100%;
	height:300px;
	position: relative;
z-index: 0; }
.kv-ttl {
	color: #ffffff;
	text-align: center;
	letter-spacing: .8rem;
	text-shadow: 2px 4px 20px #000000;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
text-align: center; }
.kv-ttl span {
	display: inline-block;
	transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
	/*color:#ffffff;*/
}
.kv-ttl .big {
	font-family: "Barlow Condensed", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 2.8rem;
	margin-bottom:20px;
/*transform: translateX(-10%);*/ }
.kv-ttl .small {
	display: block;
	font-size: 1.2rem;
	color:#ffffff;
/*transform: translateX(10%);*/ }

.kv-bread {
	position: absolute;
	bottom: 0;
	padding-left: 40px;
	padding-bottom: 25px;
	color: #fff;
	font-family: "NotoSansCJKjp";
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
line-height: 2; }
.kv-bread li {display: inline-block; margin-right: 10px; }
.kv-bread li.current {border-bottom: 1px solid #fff; }
.kv-bread a {color: #fff; }
.kv-bread a:not(.current):after {
	content: '/';
	display: inline-block;
margin-left: 10px; }








@media (max-width: 1030px) {
	.kv {margin-top: 50px; } 
}

@media (max-width: 768px) {
	.pc {display: none !important; }
	.sp {display: initial !important; }
	.kv {height: 0; padding-top: 125%; }
	.kv-ttl {width: 100%; padding: 0 15px; }
	.kv-ttl .big {font-size: 3rem; }
	.kv-ttl .small {font-size: 1.8rem; letter-spacing: .5rem; display: block; margin-top: 8px; }
	.kv-bread {display: none; }
}