@import url("http://fonts.googleapis.com/css?family=Quicksand:300");

html,body {
    height: 100%;
}


body {
	margin: 0; padding: 0;
	background-color: #fff;
	height: 100%;
}

body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}


::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }


/* ===========================================================
	clear-box set	
=========================================================== */

#header,
#globalnav,
#main,
#footer,
div,
nav,
section,
.section,
.fix-box { display: block; zoom: 100%; }

#header:after ,
#globalnav:after ,
#main:after ,
#footer:after,
div:after,
nav:after,
section:after,
.section:after,
.fix-box:after { display: block; clear: both; content: " "; }



#wrapper {
	display: block;
	padding: 0;
	margin: 0;
	height: 200%;
	min-width: 1000px;
	position: relative;
}

body{
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: normal;
}
h1{
	font-size: 48px;
}
h2{
	font-size: 36px;
	font-weight: 500;
}
h3{
	font-size: 24px;
	font-weight: 500;
}
p{
	font-size: 16px;
	font-weight: 300;
}

/* ===========================================================
==============================================================
	Header set
==============================================================	
=========================================================== */

#header { display: block; position: fixed; padding: 0; margin: 0; top: 0; right: 0; z-index: 1000; }
#header p { display: block; padding: 0; margin: 0; }
#header p a {
	display: block; padding: 0; margin: 0;
	width: 40px; height: 40px; line-height: 40px;
	text-align: center;
	background-color: #000;
	color: #fff; text-decoration: none;
}
#header p a:hover {
	background-color: #333;
	color: #fff;
}

#contents-head { display: block; clear: both; padding: 0; margin: 0; height: 50%; position: relative;  }
@keyframes text-color {
  0% { color: #871e21; }
  20% { color: #b12123; }
  40% { color: #871e21; }
  60% { color: #b12123; }
  80% { color: #871e21; }
  100% { color: #b12123; }
}
@keyframes bg-color {
  0% { background-color: #b12123; }
  20% { background-color: #871e21; }
  40% { background-color: #b12123; }
  60% { background-color: #871e21; }
  80% { background-color: #b12123; }
  100% { background-color: #871e21; }
}

#text {
	display: block; padding: 0; margin: 0;
	width: 50%; min-width: 500px; height: 100%;
	top: 0; left: 0;
	background-color: #fff;
	text-decoration: none;
	float: left;
	position: relative;
	 z-index: 500;
	
}
#scroll-btn {
	display: block;
	width: 50px; height: 50px;
	margin: 0 0 0 -25px;
	position: absolute;
	bottom: 40px;
	left: 50%;
	z-index: 1000;
}
#scroll-btn a,
#scroll-btn a:hover {
	display: block;
	width: 50px;
	height: 50px;
	bottom: 40px;
	right: -25px;
	border-radius: 25px;
	animation: bg-color 20s infinite;
	color: #fff;
	border: solid 4px #fff;
	text-align: center;
	font-size: 1.2em;
	line-height: 45px;
}



#text div {
	/* display: block; */
	 padding: 0 0; 
	 /* margin: -100px 0 0 -250px; */
	max-width: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%,-50%);
}
#text div h1 {
	/* font-family: 'Quicksand', sans-serif;  */
	font-weight: 400; 
	font-size: 3.6em;
	color: #999; 
	margin: 0 0 20px 0; 
	padding: 0 20px;
	animation: text-color 20s infinite; 
	text-align: center;
}
#text div p {
	/* font-family: 'Quicksand', sans-serif;  */
	font-weight: 400; 
	font-size: 3.6em;
	color: #999; 
	margin: 0 0 20px 0; 
	padding: 0 20px;
	animation: text-color 20s infinite; 
	text-align: center;
}
#text div p {
	font-size: 0.94em;
	color: #333; margin: 0 0 1em 0; padding: 0 20px;
}
#text div p.name {
	text-align: right;
	 margin: 0;
}
#logo {
	display: block;
	 padding: 0;
	  margin: 0;
	width: 50%; min-width: 500px; height: 100%;
	background-color: #eee;
	text-decoration: none;
	float: right;
	position: relative;
	animation: bg-color 20s infinite;
	 z-index: 500;
}
#logo div {
	/* display: block;  */
	padding: 0 0; margin: -200px 0 0 -200px;
	width: 400px; height: 400px;
	position: absolute;
	top: 50%; left: 50%;
}

#contents-about { 
	display: block; 
	clear: both;
	 padding: 0; 
	 margin: 0;  
	 background-color: #333;
	 height: 100vh;
	}
#contents-about > div {
	display: block; clear: both; padding: 30px 0; margin: 0 auto; width: 1000px;
	color: #fff;
}
#contents-about > div h1 {
	display: block; clear: both;
	font-family: 'Quicksand', sans-serif; font-weight: 400; font-size: 5.0em;
	color: #fff;
	animation: text-color 20s infinite;
	margin: 0 0 30px 0;
}
#contents-about > div table {
	max-width: 500px;
	width: 100%;
	font-size: 0.75em;
	line-height: 1.6;
	margin: 0 auto;
	table-layout: fixed;
}
/* #contents-about > div table:last-child {
	margin: 0;
} */
#contents-about > div table th,
#contents-about > div table td {
	border-bottom: solid 1px #444;
	padding: 15px 5px;
	vertical-align: top;
}

#contents-about > div table th {
	white-space: nowrap;
	width: 25%;
	background-color: #313131;
	text-align: center;
}
#contents-about div table tr td a{
	color: #fff;
}
.main-logo{
	margin: 0 auto;
	display: flex;
  	justify-content: center;
  	align-items: center;
}
.text-area{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.footer-menu ul li a{
	text-decoration: none;
	color: #fff;
}

#footer { display: block; position: fixed; padding: 0; margin: 0; bottom: 0; right: 0; z-index: 1000; }
#footer p { display: block; padding: 20px; margin: 0; text-align: right; font-size: 0.75em; color: #fff; }


@media(max-width:768px){
	#wrapper{
		height: 100%;
	}
	#logo{
		min-width: initial;
		width: 100%;
	}
	#text{
		min-width: initial;
		width: 100%;
	}
	#logo div{
		width: 250px;
		height: 250px;
	}

}
@media screen and (max-width: 1024px){
	aside#logo {
    display: unset;
    width: 100%;
    margin: 0 auto;
	}
}
@media screen and (max-width: 1024px){
	#wrapper{
		width:100%;
	}
article#text {
    display: unset;
    width: 100%;
    margin: 0 auto;
}
}
@media screen and (max-width: 1024px){
div#contents-head {
    flex-direction: column;
}
#wrapper {
    min-width: unset;	
}
#contents-about > div{
	width: 100%;
}
}
.inner{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#contents-main_txt{
	
	background-color: #871e21;
	color: #fff;
	padding-top: 150px;
	padding-bottom: 150px;
	clear: both;
}
.main_txt h2{
	margin-bottom: 60px;
	font-size:64px ;
}
.main_txt h3{
	margin-bottom: 30px;
}
#contents-business{
	margin-top: 50px;
	margin-bottom: 80px;
	
}
.business-list{
	display: grid;
	grid-template-columns:1fr 1fr;
    justify-content: center;
    text-align: center;
	gap: 20px;
}
.business-list-item{
	padding: 40px 20px;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);

}
.business-list li:first-child{
	background-color: #871e21;
	color: #ffffff;
}
.business-list li:nth-child(2){
	background-color: #e9e9e9;
	color: #000;
}
.business-list li:last-child{
	background-color:#4e4e4e ;
	color: #fff;
}
.business-list-item_dd{
	text-align: left;
}
.business-list-item_dd-title{
	padding: 30px 0;
}
/* #contents-recruit{
	background:linear-gradient(45deg, #871e21,,#b12123);
	background-size: 200% 200%;
	animation: bggradient 5s ease infinite;
} */
#contents-recruit{
	color: #fff;
	text-align: center;
	padding: 120px 0;
}
.recruit-box{
	padding: 80px 0;
	text-align: center;
}

/* ボタン */
.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}


a.btn-flat {
	overflow: hidden;
	padding: 1.5rem 6rem;
	color: #000;
	border-radius: 0;
	background: #fff;
	margin: 30px 0;
}
  
a.btn-flat span {
position: relative;
}

a.btn-flat:before {
position: absolute;
top: 0;
left: 30px;
width: 150%;
height: 500%;
content: '';
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-70%) rotate(135deg);
transform: translateX(-98%) translateY(-70%) rotate(135deg);
background: #871e21;
}

a.btn-flat:hover:before {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(135deg);
transform: translateX(-9%) translateY(-25%) rotate(135deg);
}
a.btn-flat:hover{
color: #fff;
}
@media(max-width:768px){
.inner{
	padding: 0 15px;
}
#contents-main_txt{
	padding-top: 80px;
	padding-bottom: 80px;
}
.main_txt h2{
	font-size: 32px;
	margin-bottom: 30px;
}
#contents-business{
	margin-top: 80px;
	margin-bottom: 80px;
}
.business-list {
	grid-template-columns: 1fr;
}
#contents-recruit{
	padding: 80px 0;
}
a.btn-flat{
	margin: 15px 0;
	padding: 20px 40px;
}
a.btn-flat{
	font-size: 14px;
}
#contents-about > div h1{
	font-size: 32px;
}


}