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

.sp {
  display: block;
}
.pc {
  display: none;
}

	
#head h1 {
    width: 80%;
    height: 50px;
	text-align: left;
}
#head h1 img{
	max-height:50px;
	width:auto;
}
main p{
	width:100%;
}

main p img{
	width: 100%;
}

	
/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    right: -120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#f2f2f2;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
	top:10%;
	left:10%;
	width:80%;
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
}

#g-nav li a{
	color:#3f3a39;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
	#g-nav ul .line {
		border-bottom:solid 1px #333;
		border-top:solid 1px #333;
		background-color:#fff;
		padding:10px;
	}
	
/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
	background-color: var(--main-color);
	border-radius: 10px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #fff;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
#g-nav .top-bt{
	margin:10px auto;
	background-color: var(--main-color2);
	color:#fff;
}
#g-nav .bgchuto{
	background-color: var(--main-color);
}

	
/****TOP****/
	.midashi h2{
		padding:30px 0;
	}
	.top-bt{
		margin:10px auto 0;
	}
#business-top .midashi h2 {
	padding-left:20px;}

	.business-flex {
		margin:0 10px 50px;
	}
	
	.business-flex li {
		width: 90%;
		margin: 10px 5%
	}
	.business-flex a {
	width: 50%;
	}
	.business-flex li img {
    max-width: 150px;
	}
	.business-flex a p {
		min-width: 80%;
		margin-bottom:10px;
	}
	#cross{
		padding:0 20px;
	}
	.cross-flex .img {
	width: 100%;
	}	
	.cross-flex .text {
		width: 100%;
	}
	.cross-flex .text  .cross-text{
		padding-bottom:20px;
	}
	.cross-flex {
		margin:0;
	}
	#staff .midashi h2 {
		padding-left:20px;
	}
	
	.staff-flex{
		margin:0;
	}
	.staff-flex li {
		width: 90%;
		margin: 10px 5%;
	}
	#contents .midashi h2 {
		padding-left:20px;
	}
	.contents-flex {
		margin:0 10px 50px;
	}
	.contents-flex a {
    width: 49%;
	height: 300px;
	}

	.entrywaku .midashi{
		padding-left:20px;
	}
	
	.recruit-flex .left, .recruit-flex .right  {
		width: 100%;
	}
	.recruit-flex .right {
		padding-top: 0;
	}
	.recruit-box{
		padding:10px;
	}
#recruit .recruit-flex .sp{
	display:flex;
}

	.footer-waku{
		padding:30px 0;
	}
	
	.footer-waku .logo{
	width:80%;
	max-width:278px;
	height:auto;
		margin:0 auto;
}
.footer-waku .list, .footer-waku .list2{
	width:80%;
	margin:0 10%;
	}
	
	
/************************
	下層ぺーじ
*********************/
	
#subtitle{
	width:100%;
	height:auto;
	background-size: 30%;
}
#subtitle-box {
    padding: 4vw 6vw 1vw;
	}
#subtitle-box h2{
	padding-bottom:20px;
}
	
.company-cara {
	width: 100%;
	padding:0 10%;
	}
	
	.company-midashi {
	width:100%;	
		padding:0  20px 20px;
	}
	
.company-flex .img{
	width:100%;
	padding:20px;
}

.company-flex .text{
	width:100%;
	padding:0 10px;
	font-size:16px;
}


	
.midashi2 h3:before {
    height: 27px;
	position: absolute;
}
	
/*******求める人物像*************************/

	section#personality{
    padding: 30px 0 0;
	}
	
	.personality-flex {
		padding:0 20px;
		margin: 80px auto;
	}
	.personality-flex .img {
	width:100%;
	}
	.personality-flex .text, .personality-flex .text2 {
		width:100%;
	}
	.personality-flex h3 {
		padding-bottom:20px;
	}
	
	.personality-flex .text::after, .personality-flex .text2::after {
		top:-65px;
	}
	.p-midashi span::after {
		right: -12px;
		top: 0;
		height: 50px;
	}
	.p-midashi span::before {
		left: -60px;
		height: 50px;
		top:0;
	}
	
/*******データ*************************/
	.data-box-flex {
		padding:0 10px;
	}
	.data-box-flex li {
		width: 48%;
	}
	.uriage {
		margin:30px 10px;
	}
	
/*******スタッフ*************************/	

#staff-s{
	padding-bottom:80px;
}
.staffbox-flex{
	margin:20px auto;
}
.staffbox-flex .box{
	width:100%;
}
.staffbox-flex .box img{
	width:100%;
	height:auto;
}
.staffbox-flex .text{
	width:94%;
	padding:10px 3%;
}

.staffbox-flex .text p{
	padding:20px 0;
}
	
.ffbox-text-left{
	width:100%;
	padding:30px 10px;
	margin:30px 0;
}

.ffbox-title{
	padding-bottom:50px;
	flex-direction: column;
}
.ffbox-title span{
	padding:10px 0 30px;
}
.ffbox-text-left p{
	margin-right:0;
	line-height:180%;
	max-width:100%;
	padding-bottom:20px;
	min-height:auto;
}

.ffbox-text-left .img-right{
	position: static;
	width:100%;
	height:auto;
}
.ffbox-text-right{
	width:100%;
	padding:30px 10px;
	margin:30px 0;
}
.ffbox-text-right p{
	margin-left:0;
	line-height:180%;
	max-width:100%;
	padding-bottom:20px;
	min-height:auto;
}

.ffbox-text-right .img-left{
	position: static;
	width:100%;
	height:auto;
}
	
/*******ReCRUIT*************************/
	
.recruit-s-flex dt{
	width:100%;
	font-weight:600;
}
.recruit-s-flex dd{
	width:100%;
}
	
/*********************************
 お問い合わせ
*********************************/
#apply-box{
	font-size:16px;
	padding:10px;
}
	
#apply-box .apply-box-l{
	width:100%;
	padding:10px;
}

#apply-box .apply-box-r{
    width:100%;
    border-bottom:1px solid #ccc;
    padding:10px;
}
/* セレクト */
select{
width:100%;
}
.wpcf7-text {
    width: 100%;
}	
#thx{
	font-size:16px;
}	
/*********************************
 ビジネスモデルと業界の未来
*********************************/
.future-cara {width: 100%;}
.future-midashi{width:100%;padding:10px 2%;}
.future-text{margin:20px 0 50px;padding:0 10px;}
.model-flex li, .model-flex li.box{width:100%;}
.tsuyomi{padding: 20px 10px;}
.tsuyomi ul{line-height:180%;}

/*********************************
 一日の流れ
*********************************/
	.flow-flex {margin: 0 10px;}
.flow-flex .img{width:90%;margin:0 5%;}
.flow-flex .text{width:90%;margin: 0 5%;;}
.flow-flex .text h4{font-size:20px;}
.flow-flex .text h4 span{font-size:16px;font-weight:500;}
.flow-flex .time{width:90%;padding-left:0;margin:0 5%;}
.flow-flex .time h4{font-size:20px;}
.flow-flex .time h4 span{font-size:16px;}
.w1100{max-width:1100px;margin:0 auto;}


/**************************************************************
キャリア
**************************************************************/

#career h3 {
    font-size: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem);
    font-weight: 800;
    text-align: center;
    padding: 40px 0;
}

#career h3.no1::before{position:absolute;content:'1';top:0px;left:calc(50% - 20px);padding:0 10px;}
#career h3.no2::before{position:absolute;content:'2';top:0px;left:calc(50% - 20px);padding:0 10px;}
#career h3.no3::before{position:absolute;content:'3';top:0px;left:calc(50% - 20px);padding:0 10px;}

.career-waku{margin:10px 10px 20px 10px;}
.career-box li{padding:10px 10px 10px 30px;margin:10px;}
.career-box li::before{padding:0 10px;left: -5px;top:0;}
.career-flex2{margin: 20px 15px;gap:10px 5%;}
.career-flex2 img{width:100%;}
.career-flex2 p{width:100%;line-height:180%;font-size:15px;}
.step-flex{margin:10px;}
.step-flex li{width:48%;}
.step-flex li.box{width:48%;}
.step-flex h4{;font-size:16px;}
.step-flex p{padding:7px;font-size:14px;}
.step-flex p span{font-size:18px;}
.yakushoku{padding:10px;margin-bottom:30px;}
.yakushoku li{text-align:center;font-size:16px;padding:10px;margin-bottom:30px;}
.yakushoku li h4{display:block;width:100%;}

/**************************************************************
よくある質問
**************************************************************/
#qa .title {
    font-size:16px;
}
#qa .title span {
	display: inline-block;
	padding:5px 13px;
}

#qa .box .aa {
	padding:5px 15px;
}	
	
/**************************************************************
研修教育制度
**************************************************************/

.en-flex{
	padding:20px 20px 30px;
	margin-bottom:40px;
}
.en-flex .img{
	width:100%;
}

.en-flex .text{
	width:100%;
	line-height:150%;
}
.en-flex .text h3{
	font-size:20px;
	padding:20px 0;
}

/**************************************************************
座談会
**************************************************************/

.talk-flex{
	margin:50px 4%;;
	gap:30px 6%;
}
.talk-flex li{
	width:100%;
}
.talk-top h3 {
	padding: 30px 5px 50px;
	}
.talk-top h3 span{
	padding:7px 10px;
	min-width:200px;
	}
.talk-top::before {
    height: 200px;	
	}
.speech-flex {
    padding: 10px;
	}
	
.speech-box .qqq {
    padding: 20px 10px 20px 60px;
	}
.speech-box .qqq:before{
	padding:7px;
	margin-left:10px;
	}
.speech-box .aaa01, .speech-box .aaa02 {
	padding:20px;
	margin-right:5px;
	}
.aaa-flex img {
    width: 60px;
    height: 60px;
	margin-right: 10px;
	margin-left:5px;
	}
.speech-box .aaa01::after, .speech-box .aaa02::after {
    top: 20%;
	}
	
	
/*********************************************************************/
}