@charset "UTF-8";

#second{
	overflow-x: hidden;
}

#second #main{
	width:100%;
	height:180px;
	margin-bottom: 5%;
	background-color: #f1f1f1;
	position: relative;
}

#second #main h1{
	width: 1200px;
	margin: 0 auto;
	text-align: center;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	font-size: 3em;
	line-height: 1.3;
	font-weight: 300;
  font-family: "Roboto", Avenir, Verdana, helvetica, Meiryo, Osaka, arial, sans-serif;
	letter-spacing:0.1em;
	color: #6f74a4;
	background-image: url("../img/common/main.png");
	background-position: middle center;
	background-size: 100% auto;
	background-repeat: no-repeat;
}
#second #main h1 span{display: block;font-size: 0.4em;letter-spacing:normal;}

#second h2{
	font-weight: 500;
	font-size: 2em;
	line-height: 1.25;
	margin-bottom:7%;
}

#second h2 span{display: block;font-size: 0.4em;letter-spacing:normal;}


/* about */
#second #containar.about{
  width:100%;
	clear: both;
}
#second #containar.about table{
	width: 90%;
	margin: 0 5%;
}


/* recruit */
#second #containar.recruit{
  width:100%;
	clear: both;
}
#second #containar.recruit table{
	width: 90%;
	margin: 0 5%;
}
#second #containar.recruit table .zero{
	width:100%;
	margin: 0;
}
#second #containar.recruit table .zero th{
	text-align: right;
}
#second #containar.recruit .caption{
	font-weight: 500;
	font-size: 1.6em;
	margin-bottom:8%;
	text-align: center;
}


/* contact */
#second #containar.contact{
  width:100%;
	clear: both;
}

#second #containar.contact .form{
	width: 80%;
	margin: 0 10%;
}
#second #containar.contact .caption{
	font-weight: 500;
	font-size: 1.6em;
	margin-bottom:8%;
	text-align: center;
}



/* design */
#second #containar.design{
  width:100%;
	clear: both;
}

@keyframes tabAnim{
0%{opacity:0;}
100%{opacity:1;}
}
input[type="radio"]{display:none;}

.tab_area{
  width: 100%;
	font-size:0;
	text-align: left;
	display: flex;
  flex-wrap: wrap;
	gap: 10px;
}
.tab_area label{
	flex: 0 0 calc((100% - 10px * 5) / 6);   
  box-sizing: border-box;
  text-align: center;
  padding:30px 15px;
	margin:0 0 0 0;
	font-size:16px;
	cursor:pointer;
	transition:ease 0.2s opacity;
	line-height: 1;
  background-color: #d0d1d1;
	border-radius: 4px;
	color: #fff;
}
.tab_panel{margin:0 ;opacity:0; display:none;}

.panel_area{
	margin: auto;
	padding: 5% 0;
	text-align: center;
}
#tab1:checked ~ .tab_area .tab1,
#tab2:checked ~ .tab_area .tab2,
#tab3:checked ~ .tab_area .tab3,
#tab4:checked ~ .tab_area .tab4,
#tab5:checked ~ .tab_area .tab5,
#tab6:checked ~ .tab_area .tab6{background:#6f74a4; color:#fff; margin-bottom: -2px;}

#tab1:checked ~ .panel_area #panel1,
#tab2:checked ~ .panel_area #panel2,
#tab3:checked ~ .panel_area #panel3,
#tab4:checked ~ .panel_area #panel4,
#tab5:checked ~ .panel_area #panel5,
#tab6:checked ~ .panel_area #panel6{display:block; animation:tabAnim ease 0.6s forwards; -ms-animation:tabAnim ease 0.6s forwards;padding-bottom: 5%;}

#second #containar.design .flexBox{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:left;
	box-sizing: border-box;
	
}
#second #containar.design .flexBox .item3{
	width: calc(33% - 20px);
	box-sizing: border-box;
	margin-bottom: 30px;
}
#second #containar.design .flexBox .item3 figcaption{font-size: 0.95em; font-weight: 600;}
#second #containar.design .flexBox .item3 a{text-decoration: none;color:inherit;}
#second #containar.design .flexBox .item3 a:hover{color:#ccc;}





/* ここからタブ
--------------------------------------------------------------------------------------*/
/* 
--------------------------------------------------------------------------------------*/
@media screen and (max-width: 960px) {

}


/* ここからスマホ
--------------------------------------------------------------------------------------*/
/* 
--------------------------------------------------------------------------------------*/

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

#second{}


#second #main{
	width:100%;
	height:140px;
	margin-bottom: 5%;
	padding: 0;
	position: relative;
	background-color: #f1f1f1;
	background-image: url("../img/common/mainS.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top center;
}
#second #main h1{
	width: 100%;
	margin: 0;
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	font-size: 2em;
	font-weight: 700;
	background-image: none;
}
#second #main h1 span{display: block;font-size: 0.4em;letter-spacing:normal;font-weight: 400;}
	
#second h2{
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.25;
	margin-bottom:3%;
}

#second h2 span{display: block;font-size: 0.4em;letter-spacing:normal;}



/* about */
#second #containar.about,
#second #containar.design,
#second #containar.recruit,
#second #containar.contact{
  width:90%;
	margin: 0 5%;
	clear: both;
}
#second #containar.about table,
#second #containar.recruit table{
	width: 100%;
	margin: 0 0;
}

	
/* design */
.tab_area label{
	flex: 0 0 calc((100% - 10px * 2) / 3);   
  padding:15px 5px;
	font-size:13px;
}

.panel_area{
	padding: 10% 0;
	text-align: center;
}


#second #containar.design .flexBox{
	/*
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:left;
	box-sizing: border-box;
	*/
}
#second #containar.design .flexBox .item3{
	width: calc(50% - 10px);
	box-sizing: border-box;
	margin-bottom: 30px;
}

	
/* recruit */
#second #containar.recruit .caption,
#second #containar.contact .caption{
	font-size: 1.05em;
	line-height: 1.4;
}

#second #containar.contact .form{
	width: 100%;
	margin: 0;
}

	
	
}