@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	color: #222;
	font-size: 100%;
	font-family: "Noto Sans JP", "游ゴシック", "ヒラギノ角ゴ ProN", sans-serif, inherit;
	vertical-align: baseline;
	text-decoration: none;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
	color:#222;
}

body{
	height: 100vh;
	background: #fff;
	background-image: url("../images/topimage.jpg");
	background-size: cover;
	background-attachment: fixed;
  background-repeat: no-repeat;
}

header{
	display: flex;
	width: 100%;
	height: 90px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 5;
}

#head-conts{
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 50px;
	width: 100%;
	max-width: 100%;
	height: 80px;
	position: fixed;
	box-sizing: border-box;
}

.is-scroll{
	background-color: rgba(255,255,255,0.3);
	backdrop-filter: blur(6px);
	transition: background-color 0.3s ease;
}

#head-conts .head-title{
	display: flex;
	color: #000;
	font-size: 1.5rem;
	font-weight: 600;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	gap: 20px;
}

#head-conts .head-title p:last-child{
	font-size: small;
	font-weight: 300;
}

#head-conts .nav{
	display: flex;
	padding: 0 20px;
	gap: 2em;
	align-items: center;
}

#head-conts .nav .menu{
	position: relative;
	font-weight: 400;
}

#head-conts .nav .menu a:not(.button)::after{
position: absolute;
left: 0;
top: 2em;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

#head-conts .nav .menu a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}

#head-conts .nav .menu a.button{
	display: block;
	color: #fff;
	background-color: #111;
	font-weight: 600;
	padding: 15px 30px;
	border-radius: 50px;
}

.dli-external-link {
  display: inline-block;
  vertical-align: middle;
  color: #6e6e6e;
  line-height: 1;
  width: 0.7em;
  height: 0.7em;
	margin-left: 5px;
  border: 0.1em solid #6e6e6e;
  border-radius: 0.1em;
  background: #fff;
  box-sizing: content-box;
  position: relative;
}

.dli-external-link > span {
  position: absolute;
  top: -0.2em;
  right: -0.2em;
  width: 60%;
  height: 60%;
  border: 0.1em solid #00a1ff;
  border-bottom: 0;
  border-left: 0;
  background: #fff;
  box-shadow: -0.1em 0.1em 0 0.1em #fff;
  box-sizing: border-box;
}

.dli-external-link > span::before {
  content: '';
  position: absolute;
  top: -0.05em;
  right: -0.1em;
  width: 0.1em;
  height: 0.9em;
  background: #00a1ff;
  transform: rotate(45deg);
  transform-origin: top center;
}

main{
	margin: 80px 0 0 0;
	width: 100%;
	max-width: 100%;
}

main #copy{
	max-width: 100%;
	height: 70vh;
	padding: 100px;
	gap: 100px;
	align-items: center;
}

main #copy h1{
	color: #fff;
	font-size: 12rem;
	width: 60vw;
}

main #copytxt{
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	max-width: 100%;
	padding: 150px 200px;
	margin-bottom: -1px;
	align-items: anchor-center;
}

main #copytxt div.box{
	display: flex;
	width: 1200px;
	max-width: 100%;
	flex-direction: column;
	gap: 50px;
	align-items: center;
}

main #copytxt h1{
	color: #fff;
	font-size: 2.3rem;
}

main #copytxt p{
	color: #fff;
	font-weight: 300;
	line-height: 1.5;
}

main .wrapper{
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	background: #fff;
	padding: 150px 150px 200px 150px;
	gap: 200px;
	box-sizing: border-box;
}

.b_line{ border-bottom: 1px #eee solid;}

main .wrapper #business,
main .wrapper #people,
main .wrapper #benefits,
main #company .wrap{
	display: flex;
	width: 1200px;
	max-width: 100%;
	align-items: flex-start;
	flex-direction: column;
	margin: auto;
	row-gap: 80px;
	box-sizing: border-box;
}

main .wrapper #business .b_wrap{
	display: flex;
	width: 100%;
	max-width: 100%;
	justify-content: space-between;
	gap: 50px;
}

main .wrapper #business .b_wrap .l{
	display: flex;
	width: 300px;
	padding: 80px 0 0;
	flex-direction: column;
	row-gap: 50px;
}

main .wrapper #business .b_wrap .l p{
	font-size: x-large;
	font-weight: 500;
}

main .wrapper #business .b_wrap .l a.button{
	position: relative;
	color: #00a1ff;
	font-size: large;
	font-weight: 600;
}

main .wrapper #business .b_wrap .l a.button:hover{ color: #333;}

main .wrapper #business .b_wrap .l a.button::before,
main .wrapper #business .b_wrap .l a.button::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 150px;
  height: 1px;
  background-color: #333;
}
main .wrapper #business .b_wrap .l a.button::before {
  width: 80px;
}
main .wrapper #business .b_wrap .l a.button::after {
  width: 14px;
  transform-origin: right center;
  transform: translate(65px, 0px) rotate(45deg);
}

main .wrapper #business .b_wrap .r{
	width: calc(100% - 300px);
	height: 450px;
	background-image: url("../images/jobs.jpg");
	background-size: cover;
  background-repeat: no-repeat;
	background-position: center;
	border-radius: 8px;
	aspect-ratio: 16 / 9;
}

main #company{
	width: 100%;
	max-width: 100%;
	padding: 150px;
	background: rgb(235 235 235 / 90%);
	backdrop-filter: blur(8px);
	box-sizing: border-box;
}

main .wrapper #business h2,
main .wrapper #people h2,
main .wrapper #benefits h2,
main #company .wrap h2{
	font-size: 2.3rem;
}

main .wrapper #business h2 p,
main .wrapper #people h2 p,
main .wrapper #benefits h2 p,
main #company .wrap h2 p{
	color: #5b5b5b;
	font-size: 1rem;
	font-weight: 400;
	line-height: 2.5;
}

main .wrapper #business .box_wrap{
	display: flex;
	width: 100%;
	max-width: 100%;
	padding: 50px 0;
	align-items: center;
	justify-content: space-around;
}

main .wrapper #business .box_wrap .box{

}

main .wrapper #business .box .content{
	width: 300px;
	height: 380px;
	background: #ccc;
	border-radius: 10px;
}

main .wrapper #business .box h3{
	font-size: larger;
	line-height: 2;
}

main .wrapper #people .wrap{
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	flex-flow: wrap;
	row-gap: 50px;
}

main .wrapper #people .wrap .box{
	width: calc(100% / 3);
	padding: 3px;
	box-sizing: border-box;
}

main .wrapper #people .wrap .box .photo{
	width: 100%;
	height: 200px;
	background: #ccc;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 8px;
	position: relative;
	aspect-ratio: 4 / 3;
}

.photo.p_int_01{
	background-image: url(../interview/images/int01.jpg) !important;
}
.photo.p_int_02{
	background-image: url(../interview/images/int02.jpg) !important;
}
.photo.p_int_03{
	background-image: url(../interview/images/int03.jpg) !important;
}
.photo.p_int_04{
	background-image: url(../interview/images/int04.jpg) !important;
}
.photo.p_int_05{
	background-image: url(../interview/images/int05.jpg) !important;
}
.photo.p_int_06{
	background-image: url(../interview/images/int06.jpg) !important;
}


main .wrapper #people .wrap .box p.area{
	color: #fff;
	font-size: smaller;
	padding: 10px 8px;
	background: #00a1ff;
	border-radius: 3px;
	position: absolute;
	top: 0;
	right: 0;
}

main .wrapper #people .wrap p.team{
	color: #6e6e6e;
	font-size: smaller;
	line-height: 2.5;
}

main .wrapper #people .wrap p.title{
	color: #333;
	font-size: larger;
	font-weight: 500;
	line-height: 1.7;
}

/* table01 */
#company #table01{
	width: 100%;
}
#company #table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#company #table01 th,
#company #table01 td {
  padding: 24px 0;
  border: none;
	line-height: 1.8;
}

#company #table01 th {
  width: 30%;
}

main .wrapper #benefits .b_wrap{
	display: flex;
	width: 100%;
	max-width: 100%;
	flex-direction: column;
	row-gap: 80px;
}

main .wrapper #benefits .b_wrap ul{
	display: flex;
	flex-direction: row;
	gap: 50px;
	justify-content: space-evenly;
	align-items: flex-start;
}

main .wrapper #benefits .b_wrap li{
	display: flex;
	width: calc(100% / 4);
	flex-direction: column;
	row-gap: 15px;
}

main .wrapper #benefits .b_wrap ul li img{
	width: 40px;
}

main .wrapper #benefits .b_wrap ul li h3{
	font-size: larger;
	line-height: 2;
}

main .wrapper #benefits .b_wrap ul li p{
	color: #333;
	font-size: 0.9rem;
	line-height: 1.5;
}

#other{
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	background: #6e6e6e;
	padding: 80px;
	gap: 100px;
	box-sizing: border-box;
}

#other a.talk,
#other a.entry{
	display: flex;
	color: #111;
	font-size: x-large;
	padding: 20px 85px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 50px;
	justify-content: center;
	transition: letter-spacing 0.3s;
}
#other a.talk:hover,
#other a.entry:hover{
	letter-spacing: 0.08em;
}

#other a.entry{
	color: #fff;
	background: #111;
}

footer{
	display: flex;
	width: 100%;
	max-width: 100%;
	background: #222;
	padding: 80px 200px 100px;
	justify-content: center;
	box-sizing: border-box;
}

footer #f_box{
	display: flex;
	width: 1200px;
	max-width: 100%;
	justify-content: space-between;
	gap: 100px;
}

footer #f_box .l p{
	color: #fff;
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: 2px;
}

footer #f_box .l span{
	color: #ccc;
	font-size: small;
	line-height: 3;
}

footer #f_box .r{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

footer #f_box .r ul{
}

footer #f_box .r ul li{
	font-weight: 200;
	line-height: 1.4;
}

footer #f_box .r ul li:first-child{
	font-size: larger;
	font-weight: 400;
}

footer #f_box .r ul li a{
	color: #fff;
}

footer #f_box .r ul li a:hover{
	color: #0090b1;
	text-decoration: underline;
}

/****** 子ページ ******/

.no_bg{background-image: none; }

#c_page{
	display: flex;
	justify-content: center;
	margin: 30px 0 0;
	flex-direction: column;
	align-items: center;
}

.c_wrap{
	width: 1200px;
	max-width: 100%;
	padding: 80px 100px 100px;
	box-sizing: border-box;
}

.c_wrap article{
	display: flex;
	width: 100%;
	max-width: 100%;
	margin-bottom: 80px;
	flex-direction: column;
	gap: 30px;
}

.c_wrap article h1,
#president h1, #about h1, #access h1{
	font-size: 2.3rem;
	font-weight: 800;
}

#about h1{flex: none;}

.c_wrap article h1 p,
#president h1 p, #about h1 p,
#access h1 p{
	color: #5b5b5b;
	font-size: 1rem;
	font-weight: 400;
	line-height: 2.5;
}

.text h2{
	font-size: larger;
	font-weight: 600;
	padding-bottom: 15px;
}

.c_wrap div.text p,
#president p, #about p, #access p,
.recuruitment{
	color: #111;
	font-weight: 300;
	line-height: 1.8;
}

/****** 会社を知る ******/

#about p, #access p{
	line-height: 1.5;
}

#president, #about, #access{
	display: flex;
	width: 1200px;
	max-width: 100%;
	padding: 100px;
	flex-direction: column;
	gap: 30px;
	box-sizing: border-box;
}

#president{
	width: 100%;
	align-items: center;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

#about{
	flex-direction: row;
	justify-content: space-between;
	gap: 100px;
	border-bottom: 1px #444 solid;
}

#president .box{
	display: flex;
	width: 1000px;
	max-width: 100%;
	padding: 0;
	flex-direction: column;
	box-sizing: border-box;
	gap: 50px;
}

#president .text{
	display: flex;
	gap: 50px;
}

#president .l{
	width: 700px;
	max-width: 100%;
}

#president ol{
	font-weight: 300;
	list-style: auto;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
}

#president li{
	padding-bottom: 10px;
}

#president .r{
	width: 345px;
	height: 380px;
	background: #ccc;
	background-image: url(../company/images/president.jpg);
	background-position: center;
	background-size: cover;
	border-radius: 8px;
	aspect-ratio: 3 / 4;
}

#about .table_wrap{
	display: flex;
	width: calc(100% / 2);
	max-width: 100%;
	flex-direction: column;
	gap: 10px;
}

#about .company_table{
	display: flex;
	width: 100%;
	max-width: 100%;
	gap: 30px;
}

#about .company_table .l{
	width: 40%;
}

#about .company_table .r{
	width: 80%;
}

#access h2{
	font-size: larger;
}

#access div.text{
	display: flex;
	width: 1200px;
	max-width: 100%;
	justify-content: space-between;
	margin-bottom: 50px;
	gap: 50px;
}

#access div.text:last-child{
	margin-bottom: 0;
}

#access div.text .l{
	width: 50%;
	max-width: 100%;
	line-height: 2;
}

#access div.text .r{
	width: 50%;
}

#access .map{
	width: 100%;
	height: 380px;
	border-radius: 8px;
}

/****** 働く環境 ******/

.c_wrap article .data{
	display: flex;
	width: 100%;
	max-width: 100%;
}

.c_wrap article .data ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.c_wrap article .data li{
	width: calc(100% / 3 - 20px);
}

.c_wrap article .data ul div.box{
	display: flex;
	width: 100%;
	padding: 30px;
	border:1px #ccc solid;
	border-radius: 20px;
	box-sizing:border-box;
	flex-direction: column;
	align-items: center;
}

.c_wrap article .data h2{
	font-size: 1.3rem;
	padding-bottom: 30px;
}

.c_wrap article .data ul div.box img{
	width: 80%;
}



.c_wrap article .work{
	display: flex;
	width: 100%;
	max-width: 100%;
	flex-direction: column;
	gap: 30px;
}

.c_wrap article .work ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 15px;
}

.c_wrap article .work li{
	width: calc(100% / 3 - 10px);
	border: 1px #ccc solid;
	border-radius: 20px;
	padding: 30px;
	box-sizing: border-box;
}

.c_wrap article .work h3{
	padding-bottom: 0.8rem;
}

.c_wrap article .work p{
	color: #444;
	font-size: smaller;
	line-height: 1.5;
}

.ben_img{
	background-image: url(../work/images/bene01.jpg);
	background-position: 10% 25% !important;
}



/****** 採用について ******/

.rec_img, .ben_img{
	width: 100%;
	max-width: 100%;
	height: 280px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 8px;
}

.rec_img{
	background-image: url(../recruit/images/img01.jpg);
}

.recruitment{
	display: flex;
	width: 100%;
	max-width: 100%;
	align-items: flex-start;
	line-height: 1.5;
}

.recruitment div.l{
	display: flex;
	width: 250px;
	font-weight: 500;
	justify-content: start;
}

.recruitment div.r{
	width: calc(100% - 250px);
	font-weight: 300;
}

#it_area{
	display: flex;
	width: 100%;
	max-width: 100%;
	margin-bottom: 100px;
	box-sizing: border-box;
	gap: 50px;
}

#it_area h2{
	font-size: x-large;
	font-weight: 600;
	padding-bottom: 0.5em;
}

#it_area .osaka, #it_area .tokyo{
	display: flex;
	font-weight: 300;
	line-height: 1.5;
	padding: 50px 30px;
	box-sizing: border-box;
	border: 1px #b5b1b1 solid;
	border-radius: 8px;
	flex-direction: column;
	gap: 10px;
}

#it_area .osaka p, #it_area .tokyo p{
	font-size: smaller;
	padding-bottom: 1em;
}

#it_area ul{
	display: flex;
	font-weight: 500;
	padding: 5px 0;
	gap: 10px;
	justify-content: space-between;
}

#it_area ul li{
	width: 80%;
	font-weight: 300;
}

/****** 人を知る ******/
#int_box{
	display: flex;
	width: 100%;
	max-width: 100%;
	gap: 30px;
}

.c_wrap article h1.int_h{
	font-weight: 500;
	margin-bottom: 30px;
}

.c_wrap article h1.int_ttl{
	font-size: 2rem;
}

.c_wrap article h2.int_ttl{
	color: #00a1ff;
}


#int_box div.l{
	width: calc(100% / 2);
	font-weight: 300;
	line-height: 1.8;
}

#int_box div.l p.team{
	display: inline-block;
	color: #fff;
	font-weight: 500;
	margin-bottom: 15px;
	padding: 3px;
	background: #00a1ff;
	border-radius: 5px;
}

#int_box div.l ul{
	display: flex;
	font-size: larger;
	font-weight: 500;
	gap: 20px;
}

#int_box div.l ul li{
	font-weight: 300;
}

#int_box div.r{
	width: calc(100% / 2);
	height: 300px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

#int_box div.int_img01{
	background-image: url(../interview/images/int01.jpg);
}
#int_box div.int_img02{
	background-image: url(../interview/images/int02.jpg);
}
#int_box div.int_img03{
	background-image: url(../interview/images/int03.jpg);
}
#int_box div.int_img04{
	background-image: url(../interview/images/int04.jpg);
}
#int_box div.int_img05{
	background-image: url(../interview/images/int05.jpg);
}
#int_box div.int_img06{
	background-image: url(../interview/images/int06.jpg);
}


#navArea{display: none;}




/* 1020px以下cssレイアウト */
@media screen and (max-width: 1020px){
	main #copy h1{
		font-size: 120px;
		width: 100%;
	}
	#head-conts .nav{
		padding: 0;
	}
}

/* タブレット & SP */
@media only screen and (max-width: 880px) {

	body{background-position: center;}
	#head-conts, #head-conts .nav{display: none;}
	#navArea{display: block;}
	#c_page{margin: 0;}

	/*============
	nav
	=============*/
	nav {
	  display: block;
	  position: fixed;
	  top: 0;
	  left: -300px;
	  bottom: 0;
	  width: 300px;
	  background: #ffffff;
	  overflow-x: hidden;
	  overflow-y: auto;
	  -webkit-overflow-scrolling: touch;
	  transition: all .5s;
	  z-index: 3;
	  opacity: 0;
	}
	.open nav {
	  left: 0;
	  opacity: 1;
	}
	nav .inner {
	  padding: 25px;
	}
	nav .inner ul {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}
	nav .inner ul li {
	  position: relative;
	  margin: 0;
	  border-bottom: 1px solid #333;
	}
	nav .inner ul li a {
	  display: block;
	  color: #333;
	  font-size: 14px;
	  padding: 1em;
	  text-decoration: none;
	  transition-duration: 0.2s;
	}
	nav .inner ul li a:hover {
	  background: #e4e4e4;
	}
	@media screen and (max-width: 767px) {
	  nav {
	    left: -250px;
	    width: 250px;
	  }
	}
	/*============
	.toggle_btn
	=============*/
	.toggle_btn {
	  display: block;
	  position: fixed;
	  top: 30px;
	  right: 30px;
	  width: 30px;
	  height: 30px;
	  transition: all .5s;
	  cursor: pointer;
	  z-index: 3;
	}
	.toggle_btn span {
	  display: block;
	  position: absolute;
	  left: 0;
	  width: 30px;
	  height: 2px;
	  background-color: #333;
	  border-radius: 4px;
	  transition: all .5s;
	}
	.toggle_btn span:nth-child(1) {
	  top: 4px;
	}
	.toggle_btn span:nth-child(2) {
	  top: 14px;
	}
	.toggle_btn span:nth-child(3) {
	  bottom: 4px;
	}
	.open .toggle_btn span {
	  background-color: #fff;
	}
	.open .toggle_btn span:nth-child(1) {
	  -webkit-transform: translateY(10px) rotate(-315deg);
	  transform: translateY(10px) rotate(-315deg);
	}
	.open .toggle_btn span:nth-child(2) {
	  opacity: 0;
	}
	.open .toggle_btn span:nth-child(3) {
	  -webkit-transform: translateY(-10px) rotate(315deg);
	  transform: translateY(-10px) rotate(315deg);
	}
	/*============
	#mask
	=============*/
	#mask {
	  display: none;
	  transition: all .5s;
	}
	.open #mask {
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #000;
	  opacity: .8;
	  z-index: 2;
	  cursor: pointer;
	}

main #copy{
	height: 40vh;
	padding: 50px;
}

main #copy h1{
	font-size: 70px;
}

main #copytxt{
	padding: 50px;
}

main #copytxt div.box{
	gap: 30px;
}

main .wrapper{
	padding: 50px;
}

main .wrapper #business, main .wrapper #people, main .wrapper #benefits, main #company .wrap{
	row-gap: 20px;
}

main .wrapper #business .b_wrap{
	flex-direction: column-reverse;
}

main .wrapper #business .b_wrap .l{
	width: 100%;
	padding: 0;
	row-gap: 30px;
}

main .wrapper #business .b_wrap .r{
	width: 100%;
	height: auto;
}

main .wrapper #people .wrap{
	row-gap: 30px;
}

main .wrapper #people .wrap .box{
	width: 100%;
}

main .wrapper #people .wrap .box .photo{
	width: 100%;
	height: auto;
}

main .wrapper #people .wrap p.title{
	font-size: large;
}

main #company{
	padding: 50px;
}

main .wrapper #benefits .b_wrap{
	row-gap: 30px;
}

main .wrapper #benefits .b_wrap ul{
	flex-wrap: wrap;
	justify-content: space-space-between;
	gap: 15px;
	row-gap: 30px;
}

main .wrapper #benefits .b_wrap li{
	width: calc(100% / 2 - 15px);
	align-items: center;
}

#other{
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

#other a.talk, #other a.entry{
	width: 80%;
	font-size: medium;
}

footer{
	padding: 50px;
}

footer #f_box{
	flex-direction: column-reverse;
	gap: 50px;
}

footer #f_box .l p{
	font-size: 1.8rem;
}

.c_wrap{
	padding: 0 50px;
}

#president, #about, #access{
	padding: 50px;
}

#president .text{
	flex-direction: column-reverse;
	gap: 30px;
}

#president .r{
	width: 100%;
	height: auto;
}

#about{
	flex-direction: column;
	gap: 0;
}

#about .table_wrap{
	width: 100%;
}

#access div.text{
	flex-direction: column;
	gap: 30px;
}

#access div.text .l,
#access div.text .r{
	width: 100%;
}

#access .map{
	width: 100%;
	height: auto;
	aspect-ratio: 4/ 3;
}

#company #table01 th,
#company #table01 td {
    width: 100%;
    display: block;
  }

#company #table01 th {
    width: 100%;
  }

#company #table01 td {
    padding-top: 0;
  }

.c_wrap article .data li{
		width: 100%;
}

.rec_img, .ben_img{
	height: 150px;
}

.c_wrap article .work li{
	width: 100%;
}
.c_wrap article .work li:last-child{
	display: none;
}

.recruitment{
	flex-direction: column;
}

.recruitment div.l,
.recruitment div.r{
	width: 100%;
}

#it_area{
	flex-direction: column;
}

#it_area ul{
	flex-direction: column;
}

#it_area ul li{
	width: 100%;
}

#int_box{
	flex-direction: column-reverse;
}

#int_box div.l, #int_box div.r{
	width: 100%;
}

#int_box div.l ul{
	font-size: medium;
	flex-direction: column;
	gap: 0;
}

}