/* CSS Document */

@media screen and (min-width:480px) {
}

@media screen and (max-width:479px) {
}



html{
	font-family: "Noto Sans JP", sans-serif;
	margin: 0px;
	padding: 0px;
    scrollbar-color: none;
    scrollbar-width: thin;
	width: 100vw;
	overflow-x:hidden;
	scroll-behavior: smooth;
	font-size:10px;
}


a{
	text-decoration: none;
}

body{
	margin: 0px;
	padding: 0px;
	width: 100%;
}

header{
	position: fixed;
	top:0;
	left: 0;
	background-color: #FFF;
	z-index: 1000;
	box-shadow: 3px 3px 5px #CCC;
}

@media screen and (min-width:480px) {
header{
	width: 100vw;
	height: 80px;
}
}

@media screen and (max-width:479px) {
header{
	width: 100vw;
	height: 80px;
}
}


header > a > img{	
}

@media screen and (min-width:480px) {
header > a > img{
	margin-top: 16px;
	margin-left:calc( ( 100vw - 1080px ) / 2 );
	
}
}

@media screen and (max-width:479px) {
header > a > img{
	margin-top: 30px;
	margin-left:20px;
	width: 30%;
	height: auto;
	
}
}

header > img{}



header > ul{
	position: absolute;
	list-style: none;
}

@media screen and (min-width:480px) {
header > ul{
	top:20px;
	right: calc( ( 100vw - 1080px ) / 2 );
}}

@media screen and (max-width:479px) {
header > ul{
	top:10px;
	right: 0px;
	display: none;
}}


header > ul > li{
	float: left;
	margin-right: 1em;
}
header > ul > li > a{
	color: #000000;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.4rem;
	
}
header > ul > a{
	
}

header > ul > a > li{}
header + div{
	background-color: #CCC;
	width: 100vw;
	height: calc(  100vw / 16 * 9 + 80px );
	margin: 0;
		
}

section{
	margin-top: 100px;
	padding-top: 100px;
}

#eyecatch{}



#mission{
	width: 100%;
	padding: 200px 0;
	text-align: center;	
}


@media screen and (min-width:480px) {
#mission > h1{
	font-size: 2.4rem;
	line-height: 1.0em;
}

#mission > h2{
	line-height: 1.5em;
	font-size: 3.6rem;
}}

@media screen and (max-width:479px) {
#mission > h1{
	font-size: 1.8rem;
	line-height: 1.0em;
}

#mission > h2{
	line-height: 1.5em;
	font-size: 2.2rem;
}}




#company{
	background-color: #333333;
	color:#FFF;
}

@media screen and (min-width:480px) {
#company{
	width: 1080px;
	padding: 100px calc( (100% - 1080px ) / 2 );
}}

@media screen and (max-width:479px) {
#company{
	width: 96%;
	padding: 50px 2%;
}}


#company > h1{
	line-height: 2.0em;
	font-size:2.4rem;
}



@media screen and (min-width:480px) {
#company > p{
	line-height: 2.0em;
	font-size:1.8rem;
}}

@media screen and (max-width:479px) {
#company > p{
	line-height: 2.5em;
	font-size:1.4rem;
}}

#job{
	
}
#job > h1{
	text-align: center;
	font-size:2.8rem;
}

#job > h2{
	text-align: center;
	font-size:2.4rem;
}

#job > p{
	text-align: center;
	line-height: 2.0em;
	margin-bottom: 50px;
}

@media screen and (min-width:480px) {
#job > p{
	font-size: 1.8rem;
}}

@media screen and (max-width:479px) {
#job > p{
	font-size: 1.4rem;
}}


#job > img{}

@media screen and (min-width:480px) {
#job > img{
	width: 600px;
	margin-left: 240px;}
}

@media screen and (max-width:479px) {
#job > img{
	width: 80%;
	margin-left: 10%;}
}





.list{
}

@media screen and (min-width:480px) {
.list{
	width: 1080px;
	margin-left: calc( (100% - 1080px ) / 2 );
}}

@media screen and (max-width:479px) {
.list{
	width: 96%;
	margin-left: 2%;
}}


.list > h1{
	text-align: center;
	font-size:2.8rem;
}

.list > h2{}

.list img{
}

@media screen and (min-width:480px) {
.list img{
	width: 150px;
}}

@media screen and (max-width:479px) {
.list img{
	width: 30%;
}}

.list > table{
	width: 100%;
	border-collapse:collapse;
}

.list > table > tbody{}

.list > table > tbody > tr{

}

.list > table > tbody > tr > th{
	width: 30%;
	border-bottom: 1px solid #CCC;
}
.list > table > tbody > tr > th > img{
}

@media screen and (min-width:480px) {
.list > table > tbody > tr > th > img{
	width: 100px;
}}

@media screen and (max-width:479px) {
.list > table > tbody > tr > th > img{
	width: 60%;
}}

.list > table > tbody > tr > td{
	border-bottom: 1px solid #CCC;
}

@media screen and (min-width:480px) {
.list > table > tbody > tr > td{
	padding: 30px 0 10px 0;
}}

@media screen and (max-width:479px) {
.list > table > tbody > tr > td{
	padding: 0px ;
}}



.list > table > tbody > tr > td > h2{
	font-size:2.4rem;
}

@media screen and (min-width:480px) {
.list > table > tbody > tr > td > h2{
	font-size:2.4rem;
}

}

@media screen and (max-width:479px) {
.list > table > tbody > tr > td > h2{
	font-size:1.8rem;
}

}



@media screen and (min-width:480px) {
.list > table > tbody > tr > td > p{
	line-height: 2.0em;
	font-size:1.8rem;
	
}}

@media screen and (max-width:479px) {
.list > table > tbody > tr > td > p{
	line-height: 1.5em;
	font-size:1.4rem;
	
}}





#workstyle{}
#education{}
#step{}


#step{
	text-align: center;
	background-color: #FCFCFC;
}

@media screen and (min-width:480px) {
#step{
	margin: 200px 0;
	padding-bottom: 100px;
}
}

@media screen and (max-width:479px) {
#step{
	margin: 50px 0;
	padding-bottom: 50px;
}
}



#step > h1{
	margin: 50px 0;
}

@media screen and (min-width:480px) {
#step > h1{
	font-size: 2.8rem;
}}

@media screen and (max-width:479px) {
#step > h1{
	font-size: 2.4rem;
}}

#step > h2{
	line-height: 1.5em;
	color: #666666;
}

@media screen and (min-width:480px) {
#step > h2{
	font-size:2.4rem;
}}

@media screen and (max-width:479px) {
#step > h2{
	font-size:1.8rem;
}}





#step > a{}

#step > a > button{}

#step > div {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid #CCC;
  border-bottom: 0;
	margin: 0 auto;
}


#QA{
	width: 660px;
	margin-left: calc( (100% - 680px ) / 2 );
}

#QA > h1{
	text-align: center;
	margin-bottom: 50px;
}

#QA > label{
	border-bottom: 3px solid #CCC;
	margin-top: 1em;
	padding: 10px;
}

#QA > p{
	border: 1px solid #ccc;
	margin: 0px;
	line-height: 2em;
	padding: 10px;
	
}




#QA > input {
  display: none;
}

#QA > label {
  display: block;
  cursor: pointer;
}

#QA > label::before {
  content: "";	
  transition: 0.5s;
}

#QA > label,
#QA > p {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: 0.5s;
}

#QA > p {
  max-height: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s ease;
}

#QA > input:checked + label + p {
  max-height: 1000px; /* 必要に応じて調整 */
  opacity: 1;
  transform: scaleY(1);
}

#QA > input:checked + label::before {
  transform: rotate(-45deg);
}





#youkou {
	width: 100vw;
	text-align: center;
	margin: 100px 0;
}
#youkou > h1{
	margin: 50px 0;
	font-size: 2.8rem;
}
#youkou table {
	border-collapse:collapse;
	line-height: 1.5em;
	margin: auto;
}

@media screen and (min-width:480px) {
	#youkou table {}}

@media screen and (max-width:479px) {
	#youkou table {
		width: 90%;
		margin-left: 5%;
	}}


#youkou > table > thead > tr > th,
#youkou > table > thead > tr > td{
	border-bottom:3px solid #CCC;
}
#youkou table th,
#youkou table td{
	border-bottom: 1px solid #CCC;
}

@media screen and (min-width:480px) {
#youkou table th,
#youkou table td{
	padding: 16px 50px;
}}

@media screen and (max-width:479px) {
#youkou table th,
#youkou table td{
	padding: 16px 10px;
}}



#youkou > table > thead {}
#youkou > table > thead > tr {

}
#youkou > table > thead > tr > th,
#youkou > table > thead > tr > td{
	font-weight: 600;
	color: #CCC;
}

@media screen and (min-width:480px) {
#youkou > table > thead > tr > th,
#youkou > table > thead > tr > td{
	font-size: 1.8rem;
}}

@media screen and (max-width:479px) {
#youkou > table > thead > tr > th,
#youkou > table > thead > tr > td{
	font-size: 1.4rem;
}}


#youkou > table > tbody {}
#youkou > table > tbody > tr {

}


@media screen and (min-width:480px) {
#youkou > table > tbody > tr > th,
#youkou > table > tbody > tr > td{
	font-size: 1.8rem;
}
}

@media screen and (max-width:479px) {
#youkou > table > tbody > tr > th,
#youkou > table > tbody > tr > td{
	font-size: 1.2rem;
}
}
#youkou > table > tbody > tr > td{
	text-align: left;
	line-height: 1.5em;
}

#open{
	position: relative;
	
}

@media screen and (min-width:480px) {
#open{
	width: 1080px;
	padding: 150px 0 0px 0;
	margin: 100px 0;
	margin-left: calc( ( 100% - 1080px ) / 2 );
	
}}

@media screen and (max-width:479px) {
#open{
	width: 100%;
	padding: 150px 0 0px 0;
	margin: 50px 0;
	margin-left: 0;
	
}}



#open > img{
	position: absolute;
	top:100px;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1;
	z-index: 10;
}

#open > h1,
#open > h2,
#open > p,
#open > ul,
#open > ul > li,
#open > a,
#open > a > button{
	position: relative;
	z-index: 100;
}


@media screen and (min-width:480px) {
#open > h1{
	text-align: center;
	font-size: 2.8rem;
}}

@media screen and (max-width:479px) {
#open > h1{
	text-align: center;
	font-size: 2.4rem;
}}


@media screen and (min-width:480px) {
#open > h2{
	text-align: center;
	margin-top: 50px;
	font-size: 2.4rem;
}}

@media screen and (max-width:479px) {
#open > h2{
	text-align: center;
	margin-top: 50px;
	font-size: 2.2rem;
}}


@media screen and (min-width:480px) {
#open > p{
	text-align: center;
	font-size: 1.8rem;
}}

@media screen and (max-width:479px) {
#open > p{
	text-align: center;
	font-size: 1.4rem;
	width: 80%;
	margin-left: 10%;
}}

#open > ul{
}

@media screen and (min-width:480px) {
#open > ul{
	margin-left: 360px;
	margin-bottom: 50px;
}
#open > ul > li{
	padding-left: 3em;
	text-indent: -3em;
	font-size: 1.8rem;
	line-height: 1.8em;
}
}

@media screen and (max-width:479px) {
#open > ul{
	margin-left: 10px;
	margin-bottom: 50px;
}
#open > ul > li{
	padding-left: 3em;
	text-indent: -3em;
	font-size: 1.4rem;
	line-height: 1.8em;
}
}


#open > a{
	margin-left: calc( ( 100% - 200px ) / 2 );
	
	
}
#open > a > button{

	width: 200px;
	height: 60px;
	font-size: 2.0rem;
	font-weight: 600;
	color: #FFF;
	background-color:#0200FF;
	border-radius: 10px;
	font-size: 2.4rem;
	
}

footer{
	background-color: #4F4F4F;
	padding: 30px 0px;
	
}

footer > h1,
footer > p{
	color: #FFF;
	font-size:1.8rem;
	line-height: 1.5em;
}

@media screen and (min-width:480px) {
footer > h1,
	footer > p{
	margin-left: calc( ( 100% - 1080px ) / 2 + 0px );
	
}}

@media screen and (max-width:479px) {
footer > h1,
	footer > p{
	margin-left: 10px;
	
}}



footer > p > a{
	color: #FFF;
}