@charset "UTF-8";

/* 目次
 * 1. リセット
 * 2. 共通（見出し・テーブル・ヘッダー・フッター）
 * 3. トップ(index)
 * 4. Meet Our People(interview)
 * 5.
 * 6.
 * 7.
 * 8.
 * 9.
 * 10.
*/

@media screen and (max-width:900px) {
/**************************************************
/* 1. リセット
***************************************************/

/**************************************************
/* 2. 共通
***************************************************/
.display_sp { display: block; }
.display_pc { display: none; }

.hamburger {
	display: block !important;
}

main{
	margin-top: 60px;
	width: 100%;
}

.all_bg{
	padding: 0;
	background: url(../images/tb-main_bg.jpg?=2023) no-repeat;
	background-attachment:fixed;
	background-size: 100% auto;
	background-color: #ababab;
  background-position: top 50px center;
}
.container{
	width: 100%;
}
.block{
	padding: 70px 3% 40px;
}
.block2{
	padding: 40px 3% 40px;
}
/*------------------------------
margin
------------------------------*/
.mar-b50{
	margin-bottom: 40px;
}
.mar-t50{
	margin-top: 40px;
}
.mar-b25{
	margin-bottom: 20px;
}

/*------------------------------
float
------------------------------*/

/*------------------------------
リンク画像
------------------------------*/

/*------------------------------
リンクテキスト
------------------------------*/

/*------------------------------
パンクズ
------------------------------*/

/*------------------------------
h2
------------------------------*/
.h2{
	margin-bottom: 40px;
	padding-left: 15px;
	height: 50px;
	line-height: 50px;
	background: url(../images/h2_bg.jpg?=2023) no-repeat right/cover;
	font-size: 26px;
}

/*------------------------------
table
------------------------------*/
.table thead th{
	padding: 10px;
	font-size: 17px;
}
.table tbody th{
	width: 25%;
	padding: 10px;
	font-size: 15px;
}
.table tbody td{
	width: 75%;
    padding: 10px;
	font-size: 15px;
}

/*------------------------------
ヘッダー
------------------------------*/
.header{
	width: 100%;
	height:auto;
	margin: 0;
}

.sp-header{
	position:fixed;
	top:0;
	left:0;
	z-index: 10;
	width: 100%;
	height: 60px;
	padding: 15px 20px;
	box-sizing: border-box;
	background-color: #d80c18;
}
.sp-header .logo a{
	display:block;
	width: 210px;
	height: 30px;
}
/*キャッチコピー*/
.sp-catchcopy{
	width: 100%;
	padding: 3% 20% 45% 5%;
}
/*サブナビ*/
.s-nav{
	display:block;
	background: url(../images/job_bg.png?=2023);
	padding: 30px 2%;
}
.s-nav ul li{
	width: 33.333333%;
	padding: 1%;
	box-sizing: border-box;
	float: left;
}
.s-nav ul li a{
	display:block;
	width:100%;
	height: 40px;
	line-height: 40px;
	border: 1px solid #d80c18;
	text-align: center;
	color: #d80c18;
	font-size: 16px;
	font-weight: bold;
}

/*------------------------------
フッター
------------------------------*/
#toTop {
	bottom: 15px;
	right: 15px;
}
#toTop img{
	width: 40px;
	height: 40px;
}

/**************************************************
/* 3. トップ(index)
***************************************************/
/*------------------------------
Company Profile
------------------------------*/
#company{
	background: url(../images/company_bg.jpg?=2023) no-repeat center/cover;
}

/*------------------------------
THK in Numbers
------------------------------*/
#numbers .flex-box p{
	width: 50%;
	padding: 2%;
	height: auto;
}

/*------------------------------
Movie
------------------------------*/


/*------------------------------
Our Business
------------------------------*/
#business h3.trapezoid {
	width: 480px;
	height: 35px;
	line-height: 35px;
	margin-bottom: 15px;
	padding-left: 15px;
	font-size: 22px;
}
#business h3.trapezoid:after {
  border-right: 35px solid transparent;
  border-top: 35px solid #d80c18;
}
#business p{
	width: 100%;
	padding-right: 0;
}
#business .business-m{
	width: 100%;
}

/*------------------------------
THK’s Highlights
------------------------------*/
#highlights h3.trapezoid {
	width: 200px;
	height: 35px;
	line-height: 35px;
	margin-bottom: 15px;
	padding-left: 15px;
	font-size: 22px;
}
#highlights h3.trapezoid:after {
  border-right: 35px solid transparent;
  border-top: 35px solid #d80c18;
}
#highlights h4{
	margin-bottom: 10px;
	font-size: 20px;
	color: #fff;
	font-weight:bold;
}
#highlights div:nth-of-type(odd){
	width: 100%;
	height: auto;
	padding: 20px;
	background: #d80c18;
}
#highlights div:nth-of-type(even){
	width: 100%;
	height: auto;
	padding: 20px;
	background: #000;
}
#highlights div p:nth-of-type(1){
	width: 100%;
	margin:0 auto;
}
#highlights div p:nth-of-type(2){
	width: 100%;
	padding-left: 0;
}

/*------------------------------
Meet Our People
------------------------------*/
#people .inner:nth-of-type(1){
	width: 50%;
	padding-right: 20px;
	box-sizing: border-box;
}
#people .inner:nth-of-type(2){
	width: 50%;
	padding-left: 20px;
	box-sizing: border-box;
}
#people h3{
	width: 100%;
}
#people ul{
	width: 100%;
	padding-left: 20px;
	box-sizing: border-box;
}
#people ul li{
	margin: 5px 0;
	list-style-image: url(../images/list-img.png?=2023);
}
/*
#people ul li:before{
	content: "■";
	color:  #d80c18;
	margin-right: 5px;
}*/

/*------------------------------
internship
------------------------------*/

/*------------------------------
Job Information
------------------------------*/
#job h3.trapezoid {
	width: 160px;
	height: 35px;
	line-height: 35px;
	margin-bottom: 15px;
	padding-left: 15px;
	font-size: 22px;
}
#job h3.trapezoid:after {
	border-right: 35px solid transparent;
	border-top: 35px solid #d80c18;
}


/**************************************************
/* 4. Meet Our People(interview)
***************************************************/
#interview .interview01{
	width: 100%;
	padding: 50px 0;
	background: url(../images/interview01_main.jpg?=2023) no-repeat right/contain;
}
#interview .interview02{
	width: 100%;
	padding: 50px 0;
	background: url(../images/interview02_main.jpg?=2023) no-repeat right/contain;
}
#interview h3{
	width: 45%;
}
#interview h3 img{
	width: 55%;
	margin: 20px 22.5%;
}
#interview h3 .trapezoid{
	display: block;
	width: 95%;
	height: 35px;
	line-height: 35px;
	margin-bottom: 20px;
	padding-left: 15px;
	font-size: 22px;
}
#interview h3 .trapezoid:after {
  border-right: 35px solid transparent;
  border-top: 35px solid #d80c18;
}
#interview h4{
	margin-bottom: 10px;
	font-size: 20px;
}
#interview h4:before{
	content: "■";
	color:  #d80c18;
	margin-right: 5px;
}

#interview .question:nth-of-type(odd) p:nth-of-type(1){
	width: 100%;
	padding-bottom: 10px;
}
#interview .question:nth-of-type(odd) p:nth-of-type(2){
	width: 100%;
	padding-left: 0;
}
#interview .question:nth-of-type(even) p:nth-of-type(1){
	width: 100%;
	padding-bottom: 10px;
}
#interview .question:nth-of-type(even) p:nth-of-type(2){
	width: 100%;
	padding-right: 0;
}
/*下部リンク*/
#interview .link p:nth-of-type(1){
	padding-right: 10px;
}
#interview .link p:nth-of-type(2){
	padding-left: 10px;
}


}



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

/**************************************************
/* 2. 共通
***************************************************/
*{
	font-size: 14px;
}
.font18{
	font-size: 16px;
}
.font15{
	font-size: 13px;
}

main{
	margin-top: 50px;
	width: 100%;
}
.all_bg{
	padding: 0;
	background: url(../images/sp-main_bg.jpg?=2023) no-repeat;
	background-size: 100% auto;
   background-position: top 50px center;
}
.block{
	padding: 50px 3% 30px;
}
.block2{
	padding: 30px 3% 30px;
}

/*------------------------------
margin
------------------------------*/
.mar-b50{
	margin-bottom: 30px;
}
.mar-t50{
	margin-top: 30px;
}
.mar-b25{
	margin-bottom: 15px;
}

/*------------------------------
リンクテキスト
------------------------------*/

/*------------------------------
パンクズ
------------------------------*/

/*------------------------------
h2
------------------------------*/
.h2{
	margin-bottom: 30px;
	padding-left: 10px;
	height: 40px;
	line-height: 40px;
	background: url(../images/h2_bg.jpg?=2023) no-repeat right/cover;
	font-size: 24px;
}

/*------------------------------
table
------------------------------*/
.table thead th{
	padding: 10px;
	font-size: 16px;
	border: 0;
}
.table tbody th{
	display:block;
	width: 100%;
	padding: 5px 10px;
	font-size: 14px;
}
.table tbody td{
	display:block;
	width: 100%;
    padding: 10px;
	font-size: 14px;
}
/*------------------------------
sp-scrollbar
------------------------------*/
.sp-scrollbar{
  height: auto;
  overflow: auto;
  /* padding-right: 20px; */
}
/*スクロールバーの横幅指定*/
.sp-scrollbar::-webkit-scrollbar {
  height: 10px;
}
/*スクロールバーの背景色・角丸指定*/
.sp-scrollbar::-webkit-scrollbar-track {
  border-radius: 5px;
  background: #ccc;
}
/*スクロールバーの色・角丸指定*/
.sp-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background:#888;
}
/*---------------------------------------
ヘッダー
----------------------------------------*/
.sp-header{
	width: 100%;
	height: 50px;
	padding: 10px 15px;
}
.sp-header .logo a{
	display:block;
	width: 210px;
	height: 30px;
}
/*キャッチコピー*/
.sp-catchcopy{
	width: 100%;
	padding: 3% 10% 45% 3%;
}
/*サブナビ*/
.s-nav{
	padding: 20px 2%;
}
.s-nav ul li{
	width: 50%;
}
.s-nav ul li a{
	height: 35px;
	line-height: 35px;
	font-size: 14px;
}

/*----------------------------------------
フッター
-----------------------------------------*/
#toTop {
	bottom: 10px;
	right: 10px;
}
#toTop img{
	width: 30px;
	height: 30px;
}
.footer{
	padding: 10px 0;
}
footer .copyright{
	font-size: 11px;
}
/*------------------------------
SNSボタン
------------------------------*/
#sns{
	padding: 0 3%;
	background: url(../images/sns_bg.png?=2023);
}
#sns .sns-btn1{
	margin: 5px 10px 5px 0;
}
#sns .sns-btn2{
	margin: 5px 10px;
}

/**************************************************
/* 3. トップ(index)
***************************************************/
/*------------------------------
Company Profile
------------------------------*/
#company{
	background: url(../images/company_bg.jpg?=2023) no-repeat center/cover;
}

/*------------------------------
THK in Numbers
------------------------------*/
#numbers .flex-box p{
	width: 100%;
	padding: 2% 5%;
	height: auto;
}

/*------------------------------
Movie
------------------------------*/


/*------------------------------
Our Business
------------------------------*/
#business h3.trapezoid {
	width: 100%;
	height: auto;
	line-height: 35px;
	margin-bottom: 10px;
	padding-left: 10px;
	font-size: 20px;
}
#business h3.trapezoid:after {
  border-right: 0;
  border-top: 0;
}
#business p{
	width: 100%;
	padding-right: 0;
}
#business .business-m{
	width: 100%;
}

/*------------------------------
THK’s Highlights
------------------------------*/
#highlights h3.trapezoid {
	width: 160px;
	height: 35px;
	line-height: 35px;
	margin-bottom: 10px;
	padding-left: 10px;
	font-size: 20px;
}
#highlights h3.trapezoid:after {
  border-right: 35px solid transparent;
  border-top: 35px solid #d80c18;
}
#highlights h4{
	margin-bottom: 10px;
	font-size: 18px;
	color: #fff;
	font-weight:bold;
}
#highlights div:nth-of-type(odd){
	width: 100%;
	height: auto;
	padding: 20px;
	background: #d80c18;
}
#highlights div:nth-of-type(even){
	width: 100%;
	height: auto;
	padding: 20px;
	background: #000;
}
#highlights div p:nth-of-type(1){
	width: 100%;
	margin:0 auto 10px;
}
#highlights div p:nth-of-type(2){
	width: 100%;
	padding-left: 0;
}

/*------------------------------
Meet Our People
------------------------------*/
#people .inner:nth-of-type(1){
	width: 100%;
	padding-right: 0;
	margin-bottom: 30px;
}
#people .inner:nth-of-type(2){
	width: 100%;
	padding-left: 0;
}
#people h3{
	width: 100%;
}
#people ul{
	width: 100%;
	padding-left: 20px;
	box-sizing: border-box;
}
#people ul li{
	margin: 5px 0;
	list-style-image: url(../images/list-img.png?=2023);
}
/*
#people ul li:before{
	content: "■";
	color:  #d80c18;
	margin-right: 5px;
}*/

/*------------------------------
internship
------------------------------*/
#internship h4{
	margin-top: 15px;
	font-size: 18px;
}
#internship ul.font15>li{
  font-size: 13px;
}
#internship .sp-scrollbar img{
  min-width: 700px;
  padding: 10px 0;
}
/*------------------------------
Job Information
------------------------------*/
#job h3.trapezoid {
	width: 150px;
	height: 35px;
	line-height: 35px;
	margin-bottom: 10px;
	padding-left: 10px;
	font-size: 20px;
}
#job h3.trapezoid:after {
	border-right: 35px solid transparent;
	border-top: 35px solid #d80c18;
}
#job h4{
	margin-top: 15px;
	font-size: 18px;
}
#job h5{
  font-size: 13px;
}
#job ul.font15>li{
  font-size: 13px;
}
/**************************************************
/* 4. Meet Our People(interview)
***************************************************/
#interview .interview01{
	width: 100%;
	padding: 18% 0 6%;
	background: url(../images/interview01_main.jpg?=2023) no-repeat right/contain;
}
#interview .interview02{
	width: 100%;
	padding: 18% 0 6%;
	background: url(../images/interview02_main.jpg?=2023) no-repeat right/contain;
}
#interview h3{
	width: 100%;
}
#interview h3 img{
	width: 30%;
	margin: 10px;
}
#interview h3 .trapezoid{
	display: block;
	width: 260px;
	height: 35px;
	line-height: 35px;
	margin-bottom: 0;
	padding-left: 10px;
	font-size: 20px;
}
#interview h3 .trapezoid:after {
  border-right: 35px solid transparent;
  border-top: 35px solid #d80c18;
}
#interview h4{
	margin-bottom: 10px;
	font-size: 18px;
}
/*下部リンク*/
#interview .link p:nth-of-type(1){
	width: 100%;
	padding: 0 0 10px 0;
}
#interview .link p:nth-of-type(2){
	width: 100%;
	height: auto;
	padding-left: 0;
}


}