@charset "UTF-8";
/*========================================
Re:vite
Date : 20180509
URL : http://acs-hi.jp/
Style : principal CSS "header" "footer" "nav" "principal-item"
Filename : principal.css
========================================*/

/*========================================
Header Contents
========================================*/
header {
	width: calc(100% - 100px);
	margin: 0 50px;
	background: #fff;
	border-radius: 32px;
	box-shadow: 0px 0px 6px 3px #c2c2c2;
	position: fixed;
	top: 30px;
	left: 0;
	display: block;
	overflow: hidden;
	z-index: 101;
}

/* header logo */
.header-logo_ar {
	width: 280px;/* 290px */
	height: 46px;
	margin: 8px 0 10px 30px;
	float: left;
	box-sizing: border-box;
}
.header-logo_ar a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.header-logo_ar h1 {
	font-size: 2rem;
	font-weight: 700;
	color: #474747;
}
.header-logo_ar img {
	/*width: 42px;
	height: 42px;
	margin-right: 4px;
	transition: all 800ms ease-in-out;*/
	max-width: 230px;
}
/*.header-logo_ar img:hover {
	-ms-transform: rotate(720deg);
  	-webkit-transform: rotate(720deg);
  	transform: rotate(720deg);
}*/

/* header navi */
.header-nav_ar {
	width: calc(100% - 610px);
	height: 46px;
	margin: 10px;
	float: left;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* header link */
.header-link_ar {
	width: 80px;
	height: 66px;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header-link_ar img {
	width: 32px;
	height: 32px;
	/*transition: all 800ms ease-in-out;*/
}
/*.header-link_ar img:hover {
	-ms-transform: rotate(720deg);
  	-webkit-transform: rotate(720deg);
  	transform: rotate(720deg);
}*/
.header-cont_link {
	width: 100%;
	height: 0;
	float: left;
	position: relative;
	/*z-index: -1;*/
}

/* SP menu */
.header-sp-menu_ar {
	width: 60px;
	height: 60px;
	margin: 3px;
	border-radius: 30px;
	background: #f1f1f1;
	float: right;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.header-sp-menu_ar img {
	width: 32px;
	height: 32px;
}
.header-sp-menu_ar p {
	font-size: .6rem;
	font-weight: 700;
	line-height: 1;
}

@media screen and (min-width: 319px) and (max-width: 374px){
	header {
		width: calc(100% - 20px);
		max-height: 100vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
  		overflow-scrolling: touch;
		margin: 0 10px;
		top: 20px;
	}
	.header-logo_ar {
		width: calc(100% - 146px);
		margin: 10px 0 10px 20px;
	}
	.header-logo_ar h1 {
		font-size: 1.6rem;
	}
	.header-nav_ar {
		display: none;
	}
	.header-link_ar {
		width: 60px;
	}
	.header-cont_link {
		width: 100%;
		height: auto;
		display: none;
	}
	.header-sp-menu_ar {
		display: flex;
	}
}
@media screen and (min-width: 375px) and (max-width: 767px) {
	header {
		width: calc(100% - 20px);
		max-height: 95vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
  		overflow-scrolling: touch;
		margin: 0 10px;
		top: 20px;
	}
	.header-logo_ar {
		width: calc(100% - 233px);
		margin: 10px 0 10px 15px;
	}
	.header-logo_ar h1 {
		font-size: 1.7rem;
	}
	.header-nav_ar {
		display: none;
	}
	.header-link_ar {
		width: 50px;
	}
	.header-cont_link {
		width: 100%;
		height: auto;
		display: none;
	}
	.header-sp-menu_ar {
		display: flex;
	}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
	header {
		width: calc(100% - 40px);
		max-height: 100vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
  		overflow-scrolling: touch;
		margin: 0 20px;
	}
	.header-logo_ar {
		width: calc(100% - 312px);
	}
	.header-nav_ar {
		display: none;
	}
	.header-link_ar {
		width: 60px;
	}
	.header-cont_link {
		width: 100%;
		height: auto;
		display: none;
	}
	.header-sp-menu_ar {
		display: flex;
	}
}


/*========================================
Footer Content
========================================*/
.cf:after {
	content: "";
	display: table;
	clear: both;
	visibility: hidden;
}

.cf {
	zoom: 1;
}

footer {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.footer-link_ar {
	width: 100%;
	float: left;
}
.footer-link_ar h2 {
	margin: 100px 0 0;
	font-size: 2rem;
	line-height: 1.5;
	text-align: center;
}
.footer-link_ar ul {
	width: 100%;
	margin: 30px 0 80px;
	list-style: none;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-link_ar li {
	width: auto;
	padding: 0 10px;
}
.footer-link_ar li a {
	color: #fff;
	transition: all .4s ease;
}
.footer-link_ar li a:hover {
	color: #fd7e00;
}


.footer-link_ar img {
	width: 38px;
	height: 38px;
	/*transition: all 800ms ease-in-out;*/
　　　　　margin: 30px 0 80px;
　　　　　margin: 0 auto;
}
/*.footer-link_ar img:hover {
	-ms-transform: rotate(720deg);
  	-webkit-transform: rotate(720deg);
  	transform: rotate(720deg);
}*/
.footer-cont_link {
	width: 100%;
	height: 0;
	float: left;
	position: relative;
	/*z-index: -1;*/
}








/* copyright */
.copyright_ar {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	border-top: 1px solid #fff;
	float: left;
}
.copyright_ar p {
	padding: 20px 0;
	color: #fff;
	font-size: .9rem;
	line-height: 1.2;
}
small {
	width: 100%;
}

/* Footer Link borders come in */
.footer-link_txt p:before, .footer-link_txt p:after {
	position: absolute;
	width: 0;
	height: 4px;
	background: rgba(80, 61, 18, .2);
	content: "";
	opacity: 0;
	transition: all 0.6s;
}
.footer-link_txt p:before {
	position: absolute;
	left: 50%;
	width: 0;
	bottom: 0px;
}
.footer-link_txt p:after {
	position: absolute;
	right: 50%;
	width: 0;
	bottom: 0px;
}
.footer-link_txt p:hover:before, .footer-link_txt p:hover:after {
	opacity: 1;
	width: 50%;
}


@media screen and (min-width: 319px) and (max-width: 374px){
	.footer-link_ar h2 {
		margin: 60px 0 0;
	}
	.footer-link_ar ul {
		width: calc(100% - 60px);
		margin: 30px 30px 20px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}
	.footer-link_ar li {
		width: auto;
		padding: 0 10px 20px;
		font-size: .9rem;
	}
	.copyright_ar p {
		font-size: .6rem;
	}
}
@media screen and (min-width: 375px) and (max-width: 767px) {
	.footer-link_ar h2 {
		margin: 60px 0 0;
	}
	.footer-link_ar ul {
		width: calc(100% - 60px);
		margin: 30px 30px 20px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}
	.footer-link_ar li {
		width: auto;
		padding: 0 10px 20px;
	}
	.copyright_ar p {
		font-size: .7rem;
	}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
}


/*========================================
Nav Content
========================================*/
nav {
}
.nav-main_link ul {
	width: 100%;
	list-style: none;
	float: left;
}
.nav-main_link li {
	width: auto;
	padding: 0 10px;
	font-size: 14px;
	float: left;
	box-sizing: border-box;
}
.nav-main_link a {
	color: #474747;
}
.nav-main_link a:hover {
	color: #fd7e00;
}
/*
.nav-main_link li:nth-child(1):hover > .nav-sub_link:nth-child(1) {
	height: 220px;
}
*/

.nav-sub_link {
	width: 100%;
	/*height: 0;*/
	float: left;
	overflow: hidden;
}
.nav-sub_link h3 {
	padding: 30px 0;
	font-size: 2rem;
	text-align: center;
	text-transform: uppercase;
}
.nav-sub_link a {
	padding: 14px 20px;
	color: #000;
	background: #f1f1f1;
	border-radius: 30px;
	display: block;
	position: relative;
	transition: all 0.4s;
	font-weight: bold;
}
.nav-sub_link a:after {
	content: url(../images/icon/arrow-nav_r.png);
	position: absolute;
	top: 14px;
	right: 20px;
}
.nav-sub_link a:hover {
	color: #fff;
	background: #474747;
}
.nav-sub_link ul {
	width: calc(100% - 60px);
	margin: 0 30px 10px;
	list-style: none;
	float: left;
}
.nav-sub_link li {
	width: calc(33.333% - 20px);
	margin: 0 10px 10px;
	float: left;
}

.nav-sub_link01, .nav-sub_link02, .nav-sub_link03 {
	height: 0;
	margin: 0;
	opacity: 0;
}

/* SP TABLET nav */
.nav-sp_link {
	width: 100%;
	padding: 0;
	float: left;
	display: none;
}
.nav-sp_link ul {
	width: 100%;
	margin: 0;
	padding: 5px 0;
	list-style: none;
	float: left;
}
.nav-sp_link li {
	width: calc(100% - 60px);
	height: auto;
	margin: 0 30px;
	padding: 0;
	text-align: left;
	font-size: 1.5rem;
	font-weight: 700;
	border-top: 1px solid #474747;
	background: url(../images/icon/arrow-nav_r.png) right 20px center no-repeat;
	background-size: 12px 16px;
	box-sizing: border-box;
	float: left;
}
.nav-sp_link a {
	padding: 20px;
	display: block;
	color: #474747;
}

@media screen and (min-width: 319px) and (max-width: 374px){
	.nav-sub_link h3 {
		margin: 0 30px;
		padding: 10px 20px;
		font-size: 1.5rem;
		text-align: left;
		box-sizing: border-box;
	}
	.nav-sub_link ul {
		width: calc(100% - 20px);
		margin: 0 10px 10px;
		list-style: none;
		float: left;
	}
	.nav-sub_link li {
		width: calc(50% - 10px);
		margin: 0 5px 10px;
		font-size: .75rem;
		float: left;
	}
	.nav-sub_link01, .nav-sub_link02 {
		height: auto;
		margin: 0;
		opacity: 1;
	}
	.nav-sub_link01 {
		border-top: 4px solid #474747;
	}
	.nav-sub_link02 h3 {
		border-top: 1px solid #474747;
	}
	.nav-sp_link {
		display: block;
	}
}
@media screen and (min-width: 375px) and (max-width: 767px) {
	.nav-sub_link h3 {
		margin: 0 30px;
		padding: 10px 20px;
		font-size: 1.5rem;
		text-align: left;
		box-sizing: border-box;
	}
	.nav-sub_link ul {
		width: calc(100% - 40px);
		margin: 0 20px 10px;
		list-style: none;
		float: left;
	}
	.nav-sub_link li {
		width: calc(50% - 10px);
		margin: 0 5px 10px;
		font-size: .9rem;
		float: left;
	}
	.nav-sub_link01, .nav-sub_link02, .nav-sub_link03 {
		height: auto;
		margin: 0;
		opacity: 1;
	}
	.nav-sub_link01 {
		border-top: 4px solid #474747;
	}
	.nav-sub_link02 h3 {
		border-top: 1px solid #474747;
	}
	.nav-sp_link {
		display: block;
	}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
	.nav-sub_link h3 {
		margin: 0 30px;
		padding: 10px 20px;
		font-size: 1.5rem;
		text-align: left;
		box-sizing: border-box;
	}
	.nav-sub_link ul {
		width: calc(100% - 40px);
		margin: 0 20px 10px;
		list-style: none;
		float: left;
	}
	.nav-sub_link li {
		width: calc(50% - 10px);
		margin: 0 5px 10px;
		float: left;
	}
	.nav-sub_link01, .nav-sub_link02 {
		height: auto;
		margin: 0;
		opacity: 1;
	}
	.nav-sub_link01 {
		border-top: 4px solid #474747;
	}
	.nav-sub_link02 h3 {
		border-top: 1px solid #474747;
	}
	.nav-sp_link {
		display: block;
	}
}



/*========================================
Breadcrumb
========================================*/
.breadcrumb-list_ar {
	width: 100%;
	margin: 0;
	padding: 20px 0;
	float: left;
	box-sizing: border-box;
}
.breadcrumb-list_ar li{
	display: inline;
	list-style: none;
	float: left;
	font-size: .9rem;
	color: #474747;
	position: relative;
}
.breadcrumb-list_ar li:after{
	content: '\03e';
	padding: 0 12px 0 10px;
	position: relative;
	top: -2px;
}
.breadcrumb-list_ar li:last-child:after{
	content: '';
	padding: 0;
}
.breadcrumb-list_ar li a {
	color: #474747;
	text-decoration: none;
}
.breadcrumb-list_ar li a:hover {
	color: #fd7e00;
}
@media screen and (max-width: 767px) {
	.breadcrumb-list_ar {
		margin: 0;
		padding: 20px 0 20px 10px;
		float: left;
	}
	.breadcrumb-list_ar li{
		font-size: .7rem;
	}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
	.breadcrumb-list_ar {
		margin: 0;
		padding: 20px;
		float: left;
	}
}

/*========================================
Top Return
========================================*/
.topBtn {
	z-index: :100;
  	position: fixed;
  	z-index: 10;
  	bottom: 220px;
  	right: 20px;
	width: 5em;
	height: 5em;
	margin: 10px 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0px 0px 6px 1px #ccc;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width: 767px) {
	.topBtn {
		bottom: 20px !important;
	}
}

.topBtn p {
	text-align: center;
	line-height: 1.2;
	font-size: .9rem;
	font-weight: 700;
	color: #474747;
	transition: all .4s ease;
}
.topBtn img {
	width: 14px;
	height: 14px;
	margin-bottom: 4px;
	transition: all .4s ease;
}
.topBtn:hover p {
	color: #fd7e00;
}
.topBtn:hover img {
	transform: rotateY(180deg);
}
@media screen and (min-width: 319px) and (max-width: 960px) {
	.topBtn {
		right: 5px;
	}
}