@charset "utf-8";

/*メディアクエリ設定*/

@media screen and (max-width: 959px) {
	html{overflow-x: hidden;
}
	
	/* hamburger-menu-position-active */
			
	.sp-gnav01 a{
		opacity: 1.0;
	}
	
	.sp-gnav05 a{
		opacity: 0.6;
	}


	/*mainVisual*/
#maincatch{
		display: none;	
	}
	
	#maincatch_sp{
		display: block!important;
		width: 100%;
		height: 100px;
		box-sizing: border-box;
		position: relative;
		margin: 60px auto 15px;
	}

.catch01_sp{
	display: block;
	position: relative;
	top: 0%;
	left: 0%;
	font-weight: 500;
	width: 200px;
	height: 90px;
	background: #FFFFFF;
	color: #262626;
	font-size: 2.6rem;
	font-family: 'Roboto', sans-serif;
	z-index: -1;
	overflow: hidden;
	padding-left: 20px;
}

.catch01_sp:before{
	content: "";
	display: block;
	position: absolute;
	top:0;
	left: 0;
	background:#228B22;
	opacity: 0.8;
	width: 100%;
	height: 60%;
	animation-name: square_box_slide;
	animation-timing-function:ease;
	animation-duration: 4s;
	animation-fill-mode: forwards;
	z-index: -2;
}

@keyframes square_box_slide{
0% {
	width: 0%;
}
  50%{
	  width: 100%;
  }
 100% {
	 transform: translateX(200%);
 } 
}
	
.title_jp{
	display: none;
}
	
	.title_jp_sp{
	display: block;
	position: absolute;
	top: 36%;
	left: 0;
	width: 80%;
	margin: 30px 0 0 5px;
	font-size: 1.1rem;
	font-weight: 600;	
	font-family: 'Noto Sans JP', sans-serif;
	padding-left: 18px;
}	
	
#mainVisual_area01{
		display: none;
	}

	.subcatch{
		display: none;
	}

.subcatch_sp{
	display: block;
	position: absolute;
	top: 130%;
	left: 0%;
	right: 0%;
	margin: auto;
	width: 92%;
	height: 30px;
	}
	
		
.catch02_sp{
	text-align: left;
	font-size: 1.4rem;
	font-weight: 600;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.1em;
	line-height: 1.2;
	}
	
.catch02_detail_sp{
	width: 100%;
	margin: 30px 0 0;
	text-align: left;
	line-height: 1.2;
	font-size: 1.1rem;
	font-family: 'Noto Sans JP', sans-serif;
}

#mainVisual_area01_sp{
	display: block;
	width: 78%;
	margin: 200px auto 60px;
}

.business01-images_sp,
.business03-images_sp{
	width: 76%;
	height: auto;
	margin: 30px auto;
}
	
	
.main-title{
	width: 90%;
	height: 30px;
	display: block;
}
	
	.application-title{
	display: block;		
	width: 260px;
	margin: 0 60px 30px 0px;
}
	
.application-title01{
	display: block;	
	width: 260px;
	margin: 0 30px 80px 0px;
}
	
	.application-title  a,
	.application-title01  a{
 	color:#6A6666;
}

	.application-title  a:hover,
	.application-title01  a:hover{
  	color:#cccccc;
}

	.application-title  a::after,
	.application-title01  a::after {
    content: '';
    position: absolute;
    top: 120%;
    left: 0;
    width: 65%;
    height: 2px;
    background:#1FB146;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: left top;
}

	.application-title a::after,
	.application-title01  a::after {
    transform: scale(0.2, 1);
}

.application-title a:hover::after,
.application-title01 a:hover::after {
    transform: scale(1, 1);
}

.application_title_jpn{
	display: block;
	width: 100%;
	font-size: 1.1rem;
	font-weight: 600;
	text-align: left;
	font-family: 'Noto Sans JP', sans-serif;
}

.application_title_eng{
	display: block;
	width: 70%;
	font-size: 0.8rem;
	margin: 10px 0px 5px;
	text-align: left;
	color: #41A63E;
	font-family: 'Roboto', sans-serif;
}

/*contents*/
	
	#contents{
	margin: 100px auto 120px;	
	line-height: 1.8;
	width: 98%;
	font-family: 'Noto Sans JP', sans-serif;
}

	#recruitment-sec{
	width: 90%;
	margin:0 auto;
}
 
#recruitment-sec p{
	width: 100%;
	text-align: left;
	font-size: 1.0rem; 
}
	

/*タブ切り替え全体のスタイル*/
.tabs {
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
	margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 60px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 28px;
  font-size: 0.9rem;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#test:checked ~ #test_content,
#test-part:checked ~ #test-part_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

.c-txtsp{
	font-size: 1.1rem;
	font-weight: 600;
}
	
	

/*application_info*/

#application_info{
	width: 80%;
}

.graduate-info{
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
}

.application-data{
	width: 100%;
	margin: 30px auto;
}

.app-list{
	display: block;
	width: 28%;
	margin: 10px 0px 0 5px;
	font-size: 1.0rem;
	text-align: left;
	border-bottom:none;
	color: #2B190E;
	padding: 0 0 6px 5px;
}

.app-detail{	
	display: block;
	width: 98%;
	margin: 10px 0px 0px 5px;
	font-size: 1.0rem;
	border-bottom: #CECECE double 4px;
	text-align: left;
	padding: 0 0 6px 15px;
}

#appselect-sec01,
#appselect-sec02{
	width: 90%;
	margin: 60px auto;
}

#apphowto-title,
#select-title{
	width: 80%;
	margin: 0 0 30px 0;
	padding-bottom: 10px;
	font-size: 1.1rem;
	font-weight: 600;
	border-bottom: #1FB146 solid 2px;
}

.apphowto-detail{
	width: 100%;
	margin: 0 0 10px;
	font-size: 1.0rem;
}

.address{
	display: block;
	width: 80%;
	background:#E8E3E3;
	margin: 10px 5px 0px 0px;
	padding: 12px 0 12px 22px;
}

.address p{
	font-weight: 600;
	font-size: 1.0rem;
}

.address ul{
	font-size: 1.0rem;
}

.info_02{
	display: block;
	width: 100%;
	margin: 0 0 120px 10px;
}

dl.recruit_detail_02{
	display: flex;
	height: 80px;
	padding: 14px 0px 14px 0px;
}

dt.detail_head_02{
	width: 20%;
	background:#F3E196;
	padding: 5px 0px 0px 5px; 
	text-align: left;
	margin: 5px 10px 0px 5px; 
	font-size: 1.0rem;
}

dd.detail_inner_02{
	width: 80%;
	padding: 0;
	margin: 6px 0 0 5px;
	font-size: 1.0rem;
}