@charset "utf-8";
/*********************
モバイル対応指定
*********************/

@media screen and (max-width: 768px) {
	*{ font-size:calc(100vw /40);}
	section{ width: 98%; margin: auto;}
	.pc_mode{ display:none;}
	.sp_mode{ display:block;}
	.close_button{ display:block;}
	
/*　共通ヘッダー　*/
/*メニュー上部固定*/
header{
	/* position: static; */
	width:100%; height: 5rem; margin:auto;
	
	/*logo*/
	& #logo{
		& ul{ width:97%; margin:auto;}
		& .flex{
			align-items: flex-end;

			/* 建設ロゴ */
			& li.logo_ksc{ 
				flex-basis: 30%;
			}

			/* SNSエリア */
			& li.logo_sns{
				flex-basis: 65%;
				& .flex{
					justify-content: flex-start;
				}

				& li{flex-basis: 10%; margin: 0px 0.3em;}
				& li.grouplogo{flex-basis: 15%;} /* グループロゴだけ横に長いので大きく */
			}
			
			/* グローバルメニュー */
			& li.logo_menu{
				flex-basis: 100%; justify-content: flex-end;

				& #global_menu{
					display:none;
					width:100vw; height:96vh; box-sizing: border-box; position:absolute; left:0; z-index:3; background:rgba(255,255,255,1);

					& .gnavi_lists{
						display: block; width:100%; height: 95%; margin: auto; overflow-y: scroll; /* 画面いっぱいに出力し、はみ出た分はスクロール */
						justify-content: center;
	
						& .gnavi_list {
							width: 90%; margin: 1rem auto;

							& a { width: 100%; margin-bottom: 1rem; font-size: 1.2rem;}
							& > .dropdown_lists{
								display: flex;
								flex-direction: column;
								justify-content: center;
	
								& li{
									width: 60%; margin: auto;
									
									& a{
										font-size: 1rem;
										display: block;
										text-align: center;
									}
								}
								
							}
						}
					}
					/*	メニュー表示切り替え*/
					& .lst_sns{ display: block;}
					& .partner{ display: none;}
				}
			}
		}
	}
}

/* メニューボタン */
	#overlay-button {
		position: absolute;
		right: 0.5em;
		top: 0.5em;
		padding: 26px 11px;
		z-index: 5;
		cursor: pointer;
		user-select: none;
	}
	#overlay-button span {
		height: 4px;
		width: 35px;
		border-radius: 2px;
		background-color: #000000;
		position: relative;
		display: block;
		transition: all .2s ease-in-out;
	}
	#overlay-button span:before {
		top: -10px;
		left:0px;
		visibility: visible;
	}
	#overlay-button span:after {
		top: 10px;
		left:0px;
	}
	#overlay-button span:before, #overlay-button span:after {
		height: 4px;
		width: 35px;
		border-radius: 2px;
		background-color: #000000;
		position: absolute;
		content: "";
		transition: all .2s ease-in-out;
	}
	#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
		background: #000000;
	}

	input[type=checkbox] {
		display: none; 
		}
		  
	input[type=checkbox]:checked ~ #overlay {
		visibility: visible; 
	}
		  
	input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
		background: transparent;
	}
	input[type=checkbox]:checked ~ #overlay-button span:before {
		transform: rotate(45deg) translate(7px, 7px);		  
	}
	input[type=checkbox]:checked ~ #overlay-button span:after {
		transform: rotate(-45deg) translate(7px, -7px);
	}

/* メインタグ　*/
	main{
		margin-top: 5rem;
		& *{scroll-margin-top: 5rem; /* ここでオフセットのピクセル数を指定します */}
	/*　ページ個別指定*/
	/*　TOP　*/
		&#top{
			& section#main_visual{
				width: 95%;

				& .swiper-wrapper {

					& .top_visual{
						& .catch{
							font-size: 2rem;
						}
		
						& .type, & .name{ 
							padding: 0 1em;
						}
		
						& .type{
							font-size: 1.5rem; 
						}
		
						& .name{
							font-size: 1.5rem;
						}
					}
				}
			}

			& #information {
				flex-flow: column nowrap;
				justify-content: center;

				& article{	
					flex-basis: 100%;
		
					&#info_movie{
						display: flex;

						.yt{ display: none;}
					}

					&#Year_list{
		
						& ul{
							& li{
								flex-basis: 20%;
							}
		
						}
		
					}
		
				}

			}

			/* top_menu */
			& #top_menu{
				& ul.gnavi_lists{
					/*
					flex-flow: row wrap;
					*/
					justify-content: flex-start;
					width: 100%; margin: auto;
	
					& li{
						margin: 0.5rem;
						flex-basis: 46%;
					}
					& a{
						font-size: 1.5rem;
					}
				}
			}

			/*top Links*/
			& #link{
				& .flex{
					/*
					flex-flow: row wrap;
					align-items: center;
					*/
	
					& li{
						flex-basis: 30%;
					}
				}
			}
		}


	/* achieve */
		&#achieve{
		
			& .selecter{
					
				& ul{
		
					& li{
						display: flex;
						flex-basis: 20%;
					}
				}
			}
		
			& #case{
				& .selecter{    
					& ul{
						justify-content: center;
						& li{
							flex-basis: 20%;
							aspect-ratio: 1 / 1;
						}
					}
				}
			}
			/*　物件切り替えボタン */
			& #achieve_menu{
		
				& .selecter{
		
					& ul{
			
						& li{
							flex-basis: 33%;
		
						}
					}
				}
			}
			
	
			& #service{
		
				& dl{
					flex-flow: column nowrap;
		
					background: linear-gradient(180deg, #000000 0%, #569BBC 25%, #666666 100%);
		
					& dt, & dd{ margin: 0px; vertical-align: middle; color:#ffffff;}
					& dt{
						text-align: center; font-size:calc(260vw / 80);
					}
		
				}
			}
	
		}

	/* 取り組み */
		&#attempt {
			
		
			& #etc{
				& .flex{
					flex-flow: column nowrap;
					justify-content: center;
		
					& li{
						flex-basis: 100%;

					}
				}
			}
		
		}
	

	/* recruit */
		&#recruit {
			text-align: center;
		
			& section{
				/* 採用TOP */
				&#rec_top{
					flex-flow: column nowrap;
					justify-content: center;
				
					& article{
						flex-basis: 100%;
					}
				}

				&#rec_movie{
					flex-flow: column nowrap;
					justify-content: center;
				
					& article{
						flex-basis: 100%;
					}
				}
		
				/* 中途採用 */
		
				& .job_conditions {
				
					& dd {
						width: 100%;
					}
				}
			}
		}

	
	/* company */
		&#company{

			& .tb_dl{
				& dt{ flex-basis: 50%; }
				& dd{ flex-basis: 100%;}
		
				& dl{

					& dt{ flex-basis: 100%; }
					& dd{ flex-basis: 100%;}
				}
			}
			
			& #greeting{

				& article{
					display: flex;
					flex-flow: column nowrap;
					justify-content: center;

				}

				& .txt_box{
					flex-basis: 95%;
				}

				& .img_box{
					align-items: flex-end;
				}
			}
		}

	/* inquiry */
		&#inquiry{
			& #partner article{
				& aside{
					flex-flow: column;
					
					& dl{
						flex-basis:95%;

						dd {
							& a{
								margin: auto;
							}
						}
					}
				}
			}
		}
	

	/*お問い合わせフォーム*/
		&#recruit, &#inquiry{
			& #form{

				& dl{
					& dt{
						flex-basis: 50%;
					}

					& dd{
						flex-basis: 100%;
						
						& label{
							
							& input[type=checkbox] {
								display: block;
							}
						}
					}
				}

			}
		}
	}

	/* フッター*/
	footer {
		& #ft_leftbox{ flex-basis: 98%;
			& h1{ text-align: center;}
		}
		& #ft_rightbox{ display: none;}
	}
}


/* @end */