@charset "utf-8";
/*   
Theme Name: 株式会社堀本工作所. Vanguard Networks co,.ltd.
Theme URI: http://www.kk-horimoto.co.jp/
Description: 株式会社堀本工作所サイト用ベーステーマです。
Author: VanguardNetworks co,. ltd.
Author URI:http://vanguard.ne.jp/
*/

/* --- */
/* 共通 */
/* --- */
*{
	box-sizing:border-box;
}
html,body,div,span,applet,object,iframe,strong,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,fieldset,form,legend,caption,tbody,tfoot,thead,table,label,tr,th,td,p,img,figure{
	margin:0;
	padding:0;
	border:none;
}
body{
	line-height:1.75;
	/*color:#423a36;*/
	overflow-y:scroll;
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	-webkit-text-size-adjust:100%;
	/*
	animation-name:BodyFade;
	animation-duration:1s;
	animation-delay:0s;
	animation-iteration-count:1;
	*/
}
a{
	color:#a50e0e;
	text-decoration:none;
	transition:200ms;
}
a:hover{
	color:#423a36;
}
img{
	vertical-align:top;
	max-width:100%;
	height:auto;
}
#boxer img{
	max-width: none !important;
}
.FontArchivoBlack{
	font-family: 'Archivo Black',"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
.FontArchivo{
	font-family: 'Archivo',"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
@media screen and (max-width:767px) {
	html{
		/*font-size:14px;*/
	}
	.SpNone{
		display:none !important;
	}
}
@media print,screen and (min-width:768px) {
	html{
		/*font-size:16px;*/
	}
	.PcTabNone{
		display:none !important;
	}
}
@media print,screen and (min-width:768px) and (max-width:1023px) {
	.TabNone{
		display:none !important;
	}
}
@media print,screen and (min-width:1024px) {
	.PcNone{
		display:none !important;
	}
}
@keyframes BodyFade {
	0% {
		opacity:0;
	}
	50% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
/* ------------ */
/* ローディング用 */
/* ------------ */
#loader-bg{
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  background:#fff;
  z-index:1000;
}
/* ------------------------- */
/* コンテンツ　スクロールで出現用 */
/* ------------------------- */
/* 画面外にいる状態 */
.fadein{
    opacity:0;
    transform:translate(0, 50px);
    transition:all 750ms;
}
.fadein.NoScroll{
	transform:translate(0, 0);
}
.fadein.slideleft{
	transform:translate(-50px, 0px);
}
.fadein.fadein2 {
	transition-delay:100ms !important;
}
.fadein.fadein3 {
	transition-delay:200ms !important;
}
.fadein.fadein4 {
	transition-delay:300ms !important;
}
/* 画面内に入った状態 */
.fadein.scrollin{
    opacity:1;
    transform:translate(0, 0);
}
/* ------ */
/* header */
/* ------ */
header{
	z-index:12;
	background:rgba(255,255,255,1);
}
@media screen and (max-width:767px) {
	header{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		padding:0 100px 0 0;
	}
	header .drawer-hamburger{
		position:fixed;
		top:0;
		right:0;
		z-index:102;
		width:50px;
		height:50px;
		margin:0;
		padding:11px 13px 12px;
		border:none;
		background:#8e0909;
		cursor:pointer;
	}
}
@media print,screen and (min-width:768px) {
	header{
		position:absolute;
		width:100%;
		padding:0 26px 0 16px;
	}
	header .drawer-hamburger{
		display:none;
	}
}
/* ---------------- */
/* #HeaderContents1 */
/* ---------------- */
@media print,screen and (min-width:768px) {
	#HeaderContents1{
		max-width:1068px;
		margin:0 auto;
		padding-right:84px;
		display:flex;
		justify-content:space-between;
	}
}
/* --------------- */
/* #HeaderLogoArea */
/* --------------- */
@media screen and (max-width:767px) {
	#HeaderLogoArea{
		position: relative;
		z-index:102;
		background:#fff;
		width:100%;
		padding:0 10px;
	}
	#HeaderLogoArea a{
		display:block;
		width:108px;
		height:50px;
		background:url(images/logo_sp.png) no-repeat center;
		background-size:contain;
	}
	#HeaderLogoArea .LogoImg{
		display:none;
	}
	#HeaderLogoArea .CompanyName{
		display:none;
	}
}
@media print,screen and (min-width:768px) {
	#HeaderLogoArea{
		width:38%;
		padding:16px 0;
		line-height:0;
		display:flex;
		align-items:center;
	}
	#HeaderLogoArea .HeaderLogo{
		display:block;
		width:181px;
		margin:0 10px;
	}
	#HeaderLogoArea .CompanyName{
		width:143px;
		margin:0 10px;
	}
}
/* ---------- */
/* #GlobalNav */
/* ---------- */
@media screen and (max-width:767px) {
	#GlobalNav > ul{
		list-style:none;
		margin:0;
		padding:50px 0;
	}
	#GlobalNav > ul > li{
		margin-top:18px;
	}
	#GlobalNav > ul > li > a{
		display:block;
		padding:8px 20px;
		position:relative;
		color:#fff;
		cursor:pointer;
	}
	.drawer-dropdown-menu li{
		position:relative;
		width:calc(100% - 40px) !important;
		margin-top:8px;
		margin-left:20px;
		padding-bottom:8px;
		border-bottom:1px solid #aa4747;
	}
	.drawer-dropdown-menu li a{
		display:block;
		position:relative;
		color:#fff;
		padding:8px 20px;
		padding-left:calc(20px + 0.5em);
	}
	.drawer-dropdown-menu a::before{
		content:"";
		display:block;
		position:absolute;
		left:0.25em;
		top:50%;
		transform:translate(0,-50%);
		width:0.5em;
		height:0.5em;
		border-radius:100%;
		background:#fff;
	}
	.drawer-dropdown-menu img.Thumb{
		display:none;
	}
/*
.Mark1,.Mark2の要素はjQueryで追加しています。
*/
	#GlobalNav .Mark1{
		display:block;
		position:absolute;
		top:50%;
		right:20px;
		transform:translate(0,-50%);
		width:15px;
		height:15px;
		transition:300ms;
	}
	#GlobalNav .open .Mark1{
		transform:translate(0,-50%) rotate(45deg);
	}
	#GlobalNav .Mark1::before{
		content:"";
		display:inline-block;
		position:absolute;
		bottom:50%;
		left:7px;
		width:1px;
		height:50%;
		background:#fff;
		transition:300ms;
	}
	/*
	#GlobalNav a:hover .Mark1::before{
		opacity:0;
		height:0;
	}
	*/
	#GlobalNav .open .Mark1::before,
	#GlobalNav .open a:hover .Mark1::before{
		opacity:1;
		height:50%;
	}
	#GlobalNav .Mark1::after{
		content:"";
		display:inline-block;
		position:absolute;
		top:50%;
		left:7px;
		width:1px;
		height:50%;
		background:#fff;
		transition:300ms;
	}
	/*#GlobalNav a:hover .Mark1::after,*/
	#GlobalNav .open .Mark1::after{
		opacity:0;
		height:0;
	}
	#GlobalNav .open .Mark1::after,
	#GlobalNav .open a:hover .Mark1::after{
		opacity:1;
		height:50%;
	}
	#GlobalNav .Mark2{
		display:block;
		position:absolute;
		top:50%;
		right:20px;
		transform:translate(0,-50%);
		width:15px;
		height:15px;
		transition:300ms;
	}
	#GlobalNav .open .Mark2{
		transform:translate(0,-50%) rotate(45deg);
	}
	#GlobalNav .Mark2::after{
		content:"";
		display:inline-block;
		position:absolute;
		top:50%;
		right:0;
		transform:translate(0,-50%);
		width:100%;
		height:1px;
		background:#fff;
	}
}
@media print,screen and (min-width:768px) {
	#GlobalNav{
		width:calc(100% - 38%);
		display:flex;
	}
	#GlobalNav > ul{
		width:100%;
		list-style:none;
		margin:0;
		padding:0;
		display:flex;
		justify-content:flex-end;
		align-items:flex-end;
	}
	#GlobalNav > ul > li{
		margin:0 4.75%;
		padding:0;
	}
	#GlobalNav > ul > li > a{
		display:block;
		position:relative;
		padding:25px 0;
		color:#4d4d4d;
	}
	#GlobalNav > ul > li > a:hover{
		color:#4d4d4d;
	}
	#GlobalNav > ul > li > a::after{
		content:"";
		display:block;
		visibility:hidden;
		opacity:0;
		position:absolute;
		bottom:0;
		right:50%;
		transform:translate(50%,0);
		width:5px;
		height:0;
		background:#8e0909;
		transition:250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
	}
	#GlobalNav > ul > li:hover > a::after,
	#GlobalNav > ul > li.Current > a::after{
		visibility:visible;
		opacity:1;
		height:25px;
	}
	.drawer-dropdown{
		position:relative;
		z-index:2;
	}
	.drawer-menu-item{
		position:relative;
		z-index:2;
	}
	.drawer-dropdown-menu{
		list-style:none;
		position:absolute;
		z-index:1;
		top:auto;
		right:50%;
		transform:translate(50%,0);
		width:330px;
		margin:0;
		padding:15px 15px 5px 15px;
		opacity:0;
		visibility:hidden;
		background:#efefef;
		text-align:center;
		font-size:0.875rem;
		display:flex;
		transition:0.5s ease-out;
	}
	.drawer-dropdown:hover .drawer-dropdown-menu{
		opacity:1;
		visibility:visible;
	}
	.drawer-dropdown-menu li{
		margin:5px;
		padding:0;
	}
	.drawer-dropdown-menu li a{
		display:block;
		text-decoration:none;
		color:#8e0909;
		font-weight:500;
		transition:0.5s ease-out;
	}
	.drawer-dropdown-menu li a:hover{
		opacity:0.5;
	}
	.drawer-dropdown-menu img.Thumb{
		width:140px !important;
		max-width:none;
		margin-bottom:5px;
	}
}
/* ---------------- */
/* #HeaderContents2 */
/* ---------------- */
@media screen and (max-width:767px) {
	#HeaderContents2{
		list-style:none;
		position:fixed;
		top:0;
		right:50px;
		z-index:102;
		margin:0;
		padding:0;
	}
	#HeaderContents2 li{
		margin:0;
		padding:0;
	}
	#HeaderContents2 .Contact{
		display:none;
	}
	#HeaderContents2 .Tel a{
		display:block;
		width:50px;
		height:50px;
		background:url(images/ico_phone_s.png) no-repeat center #e87e0a;
		background-size:22px;
	}
}
@media print,screen and (min-width:768px) {
	#HeaderContents2{
		position:fixed;
		top:75px;
		right:0;
		list-style:none;
		margin:0;
		padding:0;
		color:#fff;
		font-size:15px;
		font-weight:bold;
		text-align:center;
	}
}
/* ------------------ */
/* #HeaderContentsBtn */
/* ------------------ */
#HeaderContentsBtn{
	position:relative;
	width:110px;
	height:110px;
	padding:7px 0;
	overflow:hidden;
	background:#a50e0e;
	color:#fff;
	display:flex;
	justify-content:center;
	align-items:flex-end;
}
#HeaderContentsBtn:hover{
	background:#0f3da3;
}
#HeaderContentsBtn::before{
	content:"";
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	width:33px;
	height:33px;
	margin-top:-24px;
	margin-left:-17px;
	background:url(images/ico_paper_airplane.png) no-repeat center;
	background-size:cover;
}
#HeaderContentsBtn:hover::before{
	animation-name:PaperPirplaneAnimation1;
	animation-fill-mode:forwards;
	animation-duration:200ms;
}
#HeaderContentsBtn::after{
	content:"";
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	width:33px;
	height:33px;
	margin-top:-24px;
	margin-left:-17px;
	background:url(images/ico_paper_airplane.png) no-repeat center;
	background-size:cover;
	transform:translate(-80px, 80px);
}
#HeaderContentsBtn:hover::after{
	animation-name:PaperPirplaneAnimation2;
	animation-fill-mode:forwards;
	animation-duration:200ms;
	animation-delay:200ms;
}
@keyframes PaperPirplaneAnimation1 {
	0% {
		transform:translate(0,0);
	}
	100% {
		transform:translate(80px, -80px);
	}
}
@keyframes PaperPirplaneAnimation2 {
	0% {
		transform:translate(-80px, 80px);
	}
	100% {
		transform:translate(0,0);
	}
}
/* ------------- */
/* #HeaderTelBtn */
/* ------------- */
@media print,screen and (min-width:768px) {
	#HeaderTelBtn{
		position:relative;
		width:110px;
		height:110px;
		padding:7px 0 12px;
		overflow:hidden;
		background:#e87e0a;
		color:#fff;
		font-size:12px;
		line-height:1.1;
		display:flex;
		justify-content:center;
		align-items:flex-end;
	}
	#HeaderTelBtn:hover{
		background:#0f3da3;
	}
	#HeaderTelBtn::before{
		content:"";
		display:block;
		position:absolute;
		left:50%;
		top:50%;
		width:32px;
		height:32px;
		margin-top:-32px;
		margin-left:-16px;
		background:url(images/ico_phone.png) no-repeat center;
		background-size:cover;
	}
	#HeaderTelBtn .Time{
		font-size:10px;
		font-weight:normal;
	}
}
/* ---- */
/* main */
/* ---- */
main{
	display:block;
}
/* ------ */
/* 見出し */
/* ------ */
main h2{
	position:relative;
	margin-bottom:5rem;
	color:#8e0909;
	font-size:2rem;
	font-weight:bold;
	letter-spacing:0.15em;
	line-height: 1.25;
	text-align:center;
}
main h2.ColorWhite{
	color: #fff;
}
main h2 .En{
	display:block;
	margin-top: 0.5em;
	color:#423a36;
	font-family: 'Archivo',"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-size:12px;
	font-weight:normal;
	letter-spacing:0;
}
main h2.ColorWhite .En{
	color: #fff;
}
main h2::after{
	content:"";
	display:block;
	position:absolute;
	bottom:-1.5rem;
	right:50%;
	transform:translate(50%,0);
	width:10px;
	height:10px;
	border-radius:100%;
	background:#8e0909;
}
main h2.ColorWhite::after{
	background:#fff;
}
@media screen and (max-width:767px) {
	main h2{
		margin-bottom:4rem;
	}
}
@media print,screen and (min-width:768px) {
	main h2{
		margin-bottom:5rem;
	}
}

/* main h3 */
main h3{

	margin: 1.5em 0 1em;
	font-size: 1.25em;
}
/* ---- */
/* 段落 */
/* ---- */
main p{
	margin-top:1em;
	margin-bottom:1em;
}
/* ------------------ */
/* .SectionAreaStyle1 */
/* ------------------ */
.SectionAreaStyle1{
	position:relative;
	z-index:2;
	max-width:1160px;
	margin:0 auto;
	padding:0 20px
}
@media screen and (max-width:767px) {
	.SectionAreaStyle1{
		margin:50px 0;
	}
}
@media print,screen and (min-width:768px) {
	.SectionAreaStyle1{
		margin-top:90px;
		margin-bottom:75px;
	}
}
/* ------- */
/* .UlDate */
/* ------- */
.UlDate{
	list-style:none;
	margin:0;
	padding:0;
	border-top:1px solid #999999;
}
.UlDate > li{
	position:relative;
	border-bottom:1px solid #999999;
	background:#fff;
	display:flex;
	transition:400ms;
}
.UlDate > li:hover{
	background:#f4eded;
}
.UlDate .Date{
	display:inline-block;
	width:7rem;
	color:#808080;
	font-size:1.125rem;
	font-weight:bold;
}
.UlDate .Status{
	display:inline-block;
	width:9rem;
	background:#8e0909;
	color:#fff;
	letter-spacing:0.15em;
	text-align:center;
}
.UlDate .Status.company-info{
	background:#4d4d4d;
}
.UlDate .Status.recruit-info{
	background:#0a3956;
}
.UlDate .Contents{
	display:block;
}
.UlDate a{
	color:#423a36;
}
.UlDate a:hover{
	color:#a50e0e;
}
@media screen and (max-width:767px) {
	.UlDate > li{
		padding:20px 15px;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	.UlDate .Status{
		width:calc(100% - 8.5rem)
	}
	.UlDate .Contents{
		margin-top:1em;
	}
}
@media print,screen and (min-width:768px) {
	.UlDate > li{
		padding:20px 50px;
		justify-content:space-between;
		align-items:flex-start;
	}
	.UlDate .Status{
		padding:0.3em 0;
		font-size:14px;
	}
	.UlDate .Contents{
		padding-top:0.15em;
		width:calc(100% - 7rem - 9rem - 12.5%);
	}
/*
.Mark1,.Mark2の要素はjQueryで追加しています。
*/
	.UlDate .Mark1{
		display:block;
		position:absolute;
		top:50%;
		right:22px;
		transform:translate(0,-50%);
		width:15px;
		height:15px;
		transition:300ms;
	}
	.UlDate .Mark1::before{
		content:"";
		display:inline-block;
		position:absolute;
		bottom:50%;
		left:7px;
		width:1px;
		height:50%;
		background:#ccc;
		transition:300ms;
	}
	.UlDate li:hover .Mark1::before{
		opacity:0;
		height:0;
		background:#8e0909;
	}
	.UlDate .Mark1::after{
		content:"";
		display:inline-block;
		position:absolute;
		top:50%;
		left:7px;
		width:1px;
		height:50%;
		background:#ccc;
		transition:300ms;
	}
	.UlDate li:hover .Mark1::after{
		opacity:0;
		height:0;
	}
	.UlDate .Mark2{
		display:block;
		position:absolute;
		top:50%;
		right:22px;
		transform:translate(0,-50%);
		width:15px;
		height:15px;
		transition:300ms;
	}
	.UlDate .Mark2::after{
		content:"";
		display:inline-block;
		position:absolute;
		top:50%;
		right:0;
		transform:translate(0,-50%);
		width:100%;
		height:1px;
		background:#ccc;
		transition:300ms;
	}
	.UlDate li:hover .Mark2::after{
		opacity:0;
		height:0;
	}
}
/* -------------- */
/* .FlexCenterTxt */
/* -------------- */
.FlexCenterTxt{
	width: 100%;
	display: flex;
	justify-content: center;
}
/* ---------- */
/* .bwWrapper */
/*
jquery.BlackAndWhite.jsを使用する際に必要です。
*/
/* ---------- */
.bwWrapper {
	position:relative;
	display:block;
}
/* ------ */
/* footer */
/* ------ */
footer{
	position:relative;
}
/* ---- */
/* #Map */
/* ---- */
#Map iframe{
	vertical-align: top;
}
@media screen and (max-width:767px) {
	#Map iframe{
		width:100%;
		height:350px
	}
}
@media print,screen and (min-width:768px) {
	#Map iframe{
		width:100%;
		height:405px
	}
}
/* ---------- */
/* #MapCanvas */
/* ---------- */
#MapCanvas img{
	max-width:none !important;
}
@media screen and (max-width:767px) {
	#MapCanvas{
		height:350px;
	}
}
@media print,screen and (min-width:768px) {
	#MapCanvas{
		height:405px;
	}
}
/* ------------------ */
/* #FooterContentWrap */
/* ------------------ */
#FooterContentWrap{
	position:relative;
}
@media screen and (max-width:767px) {
	#FooterContentWrap{
		background:url(images/footer_bg_sp.jpg) no-repeat center;
		background-size:cover;
	}
}
@media print,screen and (min-width:768px) {
	#FooterContentWrap{
		background:url(images/footer_bg.jpg) no-repeat center;
		background-size:cover;
	}
}
/* --------------- */
/* #FooterContents */
/* --------------- */
#FooterContents{
	position:relative;
	z-index:2;
	color:#fff;
}
@media screen and (max-width:767px) {
	#FooterContents{
		padding:50px 20px;
	}
}
@media print,screen and (min-width:768px) {
	#FooterContents{
		max-width:1160px;
		margin:0 auto;
		padding:80px 20px;
		display:flex;
		justify-content:space-between;
	}
}
/* ---------------- */
/* #FooterAboutArea */
/* ---------------- */
@media screen and (max-width:767px) {
	#FooterAboutArea .LogoArea{
		position:relative;
		width:248px;
		max-width:100%;
		margin:0 auto;
	}
	#FooterAboutArea .LogoArea::after{
		content:"";
		display:block;
		width:100%;
		padding-top:43.5%;
		background:url(images/footer_logo_sp.png) no-repeat center;
		background-size:contain;
	}
	#FooterAboutArea .LogoArea img{
		display:none;
	}
	#FooterAboutArea .Heading{
		margin:40px 0 0;
		padding:0;
		border-bottom:1px solid #fff;
		font-size:18px;
		text-align:center;
	}
	#FooterAboutArea .Address{
		margin:24px 0.5rem 0;
	}
}
@media print,screen and (min-width:768px) {
	#FooterAboutArea{
		width:50%;
		display:flex;
		align-items:center;
		flex-wrap:wrap;
	}
	#FooterAboutArea .LogoArea{
		width:50%;
		min-width:280px;
		margin:18px 0;
		text-align:center;
	}
	#FooterAboutArea .LogoArea img{
		max-width:249px !important;
	}
	#FooterAboutArea .DetailArea{
		width:50%;
		min-width:280px;
		margin:5px 0;
	}
	#FooterAboutArea .Heading{
		margin:0;
		padding:0 7px 7px;
		border-bottom:1px solid #fff;
		font-size:18px;
	}
	#FooterAboutArea .Address{
		margin:7px 7px 0;
		font-size:14px;
	}
}
/* -------------- */
/* #FooterNavArea */
/* -------------- */
#FooterNavArea{
	padding:0 0.5rem;
	display:flex;
	justify-content:flex-end;
}
@media screen and (max-width:767px) {
	#FooterNavArea{
		margin-top:30px;
		font-size:16px;
	}
}
@media print,screen and (min-width:768px) {
	#FooterNavArea{
		width:50%;
		padding:0 0.5rem;
	}
}
/* ---------- */
/* .FooterNav */
/* ---------- */
.FooterNavWrap{
	display:flex;
}
.FooterNavWrap.Wrap2{
	justify-content:flex-end;
}
.FooterNav{
	list-style:none;
	margin:5px 0;
	padding:0;
}
.FooterNav li{
	margin-top:10px;
}
.FooterNav a{
	display:inline-block;
	position:relative;
	color:#fff;
}
.FooterNav a::after{
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:0%;
	height:1px;
	background:#fff;
	transition:200ms;
}
.FooterNav a.Heading::after{
	display:none;
}
.FooterNav a:hover::after{
	visibility:visible;
	opacity:1;
	width:100%;
}
.FooterNav .Facebook a{
	padding-right:1.5em;
	background:url(images/ico_window.png) no-repeat right center;
	background-size:1em auto;
}
.FooterNav ul{
	list-style:none;
	margin:0;
	padding:0;
}
.FooterNav ul li{
	padding-left:1em;
}
.FooterNav ul li a{
	position:relative;
	font-size:0.875em;
}
.FooterNav ul li a::before{
	content:"";
	display:block;
	position:absolute;
	left:-1em;
	top:50%;
	transform:translate(0, -50%);
	width:0.5em;
	height:0.5em;
	border-radius:100%;
	background:#fff;
}
@media screen and (max-width:767px) {
	.FooterNavWrap{
		width:50%;
		padding:0 5px;
	}
}
@media print,screen and (min-width:768px) {
	.FooterNavWrap{
		min-width:calc(140px - 0.5rem);
	}
	.FooterNav > li:nth-of-type(1){
		margin-top:0;
	}
}
/* ----------------- */
/* #FooterBgContents */
/* ----------------- */
#FooterBgContents{
	position:absolute;
	top:0;
	right:50%;
	z-index:1;
	transform:translate(50%,0);
	height:100%;
	width:100%;
	margin:0 auto;
	overflow-x: hidden;
}
#FooterBgContents > .ContentsInner{
	position:relative;
	display:flex;
	justify-content:space-between;
	max-width:1120px;
	height:100%;
	margin: 0 auto;	
}
#FooterBgContents .ContentsBlock{
	height:100%;
	border-right:1px solid #8e1f13;
	border-left:1px solid #8e1f13;
}
#FooterBgContents .ContentsBlock:nth-of-type(1){
	border-left-width:2px;
}
#FooterBgContents .ContentsBlock:nth-of-type(4){
	border-right-width:2px;
}
@media screen and (max-width:767px) {
	#FooterBgContents{
		padding:0 20px;	
	}
	#FooterBgContents .ContentsBlock{
		width:50%;
	}
	#FooterBgContents .ContentsBlock:nth-of-type(2),
	#FooterBgContents .ContentsBlock:nth-of-type(3){
		display:none;
	}
}
@media print,screen and (min-width:768px) {
	#FooterBgContents{
		padding:0 20px;
	}
	#FooterBgContents .ContentsBlock{
		width:25%;
	}
}
@media print,screen and (min-width:1680px) {
	#FooterBgContents > .ContentsInner::before,
	#FooterBgContents > .ContentsInner::after{
		content:"";
		display:block;
		position:absolute;
		width:280px;
		height:100%;
		box-sizing:border-box;
	}
	#FooterBgContents > .ContentsInner::before{
		top:0;
		left:-280px;
		border-left:2px solid #8e1f13;
	}
	#FooterBgContents > .ContentsInner::after{
		top:0;
		right:-280px;
		border-right:2px solid #8e1f13;
	}
}
/* ------------- */
/* #FooterBottom */
/* ------------- */
#FooterBottom{
	background:#fff;
}
@media screen and (max-width:767px) {
	#FooterBottom{
		height:50px;
		display:flex;
		justify-content:center;
		align-items:center;
	}
}
@media print,screen and (min-width:768px) {
	#FooterBottom > .AreaInner{
		max-width:1160px;
		height:50px;
		margin:0 auto;
		padding:0 20px;
		display:flex;
		justify-content:flex-end;
		align-items:center;
	}
}
/* ---------- */
/* #Copyright */
/* ---------- */
#Copyright{
	display:block;
}
@media screen and (max-width:767px) {
	#Copyright{
		font-size:10px;
	}
}
@media print,screen and (min-width:768px) {
	#Copyright{
		font-size:12px;
	}
}
/* ----------- */
/* #PageBottom */
/* ----------- */
#PageBottom{
	position:fixed;
	bottom:49px;
	right:0;
	display:none;
	z-index:10;
}
#PageBottom a.Pagetop{
	display:block;
	position:relative;
	width:50px;
	height:50px;
	background:#fff;
	color:#999999;
	font-size:12px;
	line-height:1;
	text-align:center;
}
#PageBottom a.Pagetop img{
	position:absolute;
	top:50%;
	right:50%;
	transform:translate(50%,-50%);
	width:24px;
	transition:0.2s ease-out;
}
#PageBottom a.Pagetop:hover img{
	margin-top:-3px;
}
/* ----------- */
/* #BgContents */
/* ----------- */
#BgContents{
	position:fixed;
	top:0;
	right:50%;
	z-index:-1;
	transform:translate(50%,0);
	height:100vh;
	width:100%;
	max-width: calc(100vw - 17px);
	margin:0 auto;
	overflow-x: hidden;
}
#BgContents > .ContentsInner{
	position:relative;
	display:flex;
	justify-content:space-between;
	max-width:1120px;
	height:100vh;
	margin: 0 auto;
}
#BgContents .ContentsBlock{
	height:100vh;
	border-right:1px solid #e6e6e6;
	border-left:1px solid #e6e6e6;
}
#BgContents .ContentsBlock:nth-of-type(1){
	border-left-width:2px;
}
#BgContents .ContentsBlock:nth-of-type(4){
	border-right-width:2px;
}
@media screen and (max-width:767px) {
	#BgContents{
		padding:0 20px;	
	}
	#BgContents .ContentsBlock{
		width:50%;
	}
	#BgContents .ContentsBlock:nth-of-type(2),
	#BgContents .ContentsBlock:nth-of-type(3){
		display:none;
	}
}
@media print,screen and (min-width:768px) {
	#BgContents{
		padding:0 20px;
	}
	#BgContents .ContentsBlock{
		width:25%;
	}
}
@media print,screen and (min-width:1680px) {
	#BgContents > .ContentsInner::before,
	#BgContents > .ContentsInner::after{
		content:"";
		display:block;
		position:absolute;
		width:280px;
		height:100%;
		box-sizing:border-box;
	}
	#BgContents > .ContentsInner::before{
		top:0;
		left:-280px;
		height:100%;
		width:2px;
	}
	#BgContents > .ContentsInner::after{
		top:0;
		right:-280px;
		height:100%;
		width:2px;
	}
	#BgContents > .ContentsInner::before,
	#BgContents > .ContentsInner::after{
		background:#e6e6e6;
	}
}
/* --------------- */
/* .AreaBgContents */
/* --------------- */
.AreaBgContents{
	/*position:fixed;*/
	position:absolute;
	top:0;
	right:50%;
	z-index:50;
	transform:translate(50%,0);
	height:100%;
	width:100%;
	margin:0 auto;
	overflow: hidden;
	/*
※z-indexの値はここでは変更しない方が良いです。
※各コンテンツの子要素にして、都度そちらで変更してください。
	*/
}
.AreaBgContents > .ContentsInner{
	position:relative;
	display:flex;
	justify-content:space-between;
	max-width:1120px;
	height:100%;
	margin: 0 auto;	
}
.AreaBgContents .ContentsBlock{
	height:100%;
	border-right:1px solid #e6e6e6;
	border-left:1px solid #e6e6e6;
}
.AreaBgContents.BgContentsRed .ContentsBlock{
	border-right-color:#7F0000;
	border-left-color:#7F0000;
}
.AreaBgContents.BgContentsPink .ContentsBlock{
	border-right-color:#b33434;
	border-left-color:#b33434;
}
.AreaBgContents.BgContentsGray .ContentsBlock{
	border-right-color:#e6e6e6;
	border-left-color:#e6e6e6;
}
.AreaBgContents .ContentsBlock:nth-of-type(1){
	border-left-width:2px;
}
.AreaBgContents .ContentsBlock:nth-of-type(4){
	border-right-width:2px;
}
@media screen and (max-width:767px) {
	.AreaBgContents{
		padding:0 20px;	
	}
	.AreaBgContents .ContentsBlock{
		width:50%;
	}
	.AreaBgContents .ContentsBlock:nth-of-type(2),
	.AreaBgContents .ContentsBlock:nth-of-type(3){
		display:none;
	}
}
@media print,screen and (min-width:768px) {
	.AreaBgContents{
		padding:0 20px;
	}
	.AreaBgContents .ContentsBlock{
		width:25%;
	}
}
@media print,screen and (min-width:1680px) {
	.AreaBgContents > .ContentsInner::before,
	.AreaBgContents > .ContentsInner::after{
		content:"";
		display:block;
		position:absolute;
		width:280px;
		height:100%;
		box-sizing:border-box;
	}
	.AreaBgContents > .ContentsInner::before{
		top:0;
		left:-280px;
		height:100%;
		width:2px;
	}
	.AreaBgContents > .ContentsInner::after{
		top:0;
		right:-280px;
		height:100%;
		width:2px;
	}
	.AreaBgContents > .ContentsInner::before,
	.AreaBgContents > .ContentsInner::after{
		background:#e6e6e6;
	}
	.AreaBgContents.BgContentsRed > .ContentsInner::before,
	.AreaBgContents.BgContentsRed > .ContentsInner::after{
		background:#7F0000;
	}
	.AreaBgContents.BgContentsPink > .ContentsInner::before,
	.AreaBgContents.BgContentsPink > .ContentsInner::after{
		background:#b33434;
	}
	.AreaBgContents.BgContentsGray > .ContentsInner::before,
	.AreaBgContents.BgContentsGray > .ContentsInner::after{
		background:#e6e6e6;
	}
}
/* ---- */
/* test */
/* ---- */
/* ---- */
/* LAST */
/* ---- */