@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------

	グローバル

------------------------------------------------------*/

body { min-width: 0px; font-size: 0.9em; line-height: 1.8;}

.ta_right-s_center { text-align: center;}
.ta_left-s_center { text-align: center;}
.ta_center-s_left { text-align: left;}

.hidden_s { display: none !important;}

/* margin */
.mb40-20 { margin-bottom: 20px !important;}
.mb60-30 { margin-bottom: 30px !important;}
.mb80-40 { margin-bottom: 40px !important;}
.mb100-60 { margin-bottom: 60px !important;}
.mb120-60 { margin-bottom: 60px !important;}
.mb140-40 { margin-bottom: 40px !important;}
.mb160-80 { margin-bottom: 80px !important;}

/* ------------------------
	ヘッダー
------------------------ */

.header { padding: 0px 60px 0px 10px; line-height: 50px;}
.header h1 img { width: auto; height: 30px; vertical-align: middle;}

select.sp_lang { border: solid 1px #000; border-radius: 3px; padding: 0.2em 0.4em; margin-left: 1em;}
.sp_logo{
    display: flex;
    align-items: center;
}

.sp_logo p{
    margin-bottom: 0;
    margin-left: 1em;
}

.sp_contact_button {
    position: fixed;
    top: 0;
    /* ハンバーガーメニューの左側に配置 */
    right: 50px; /* ハンバーガーメニューの幅（50px）＋左にずらす分の調整 */
    z-index: 100000;
    background-color: #B0966C; /* ヘッダーの問い合わせボタンと同じ色 */
    height: 50px; /* ハンバーガーメニューと同じ高さ */
    display: flex;
    align-items: center;
    padding: 0 10px; /* 画像の左右の余白 */
}

.sp_contact_button a {
    display: flex;
    align-items: center;
    height: 100%; /* 親要素の高さに合わせる */
}

.sp_contact_button img {
    height: 30px; /* 画像のサイズを調整 */
    width: auto;
}

/* ==========================
	フッター
   ========================== */
.footer_line{margin-bottom: 10px;}
.footer .box01{padding: 30px 0 40px;}
/* Google Mapを囲う要素 */
.footer .footer_map {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 23.529%;
    max-width: 680px;
    max-height: 160px;
    margin: 0 auto;
}
 
/* Google Mapのiframe */
.footer .footer_map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ------------------------
	グローバルナビ
------------------------ */

/* ハンバーガーメニュー */
.humberger {
	background: #C7000D;
	cursor: pointer;
	display: block;
	position: fixed;
	top: 0px;
	right: 0px;
	width: 50px;
	height: 50px;
	z-index: 100001;
}
.humberger span {
	background: #fff;
	border-radius: 15px;
	position: absolute;
	left: 11px;
	width: 30px;
	height: 3px;
	transition: 0.4s;
}
.humberger span:nth-of-type(1) { top: 14px;}
.humberger span:nth-of-type(2) { top: 24px;}
.humberger span:nth-of-type(3) { top: 34px;}
.humberger:after {
	color: #fff;
	content: '';
	display: block;
	font-size: 10px;
	text-decoration: none;
	text-align: center;
	transition: 0.4s;
	position: absolute;
	left: 0;
	bottom: 1px;
	width: 100%;
}
.is-open .humberger:after { content: '';}
.is-open .humberger span:nth-of-type(1) {
  -webkit-transform: translateY(11px) rotate(-45deg);
	  -ms-transform: translateY(11px) rotate(-45deg);
		  transform: translateY(11px) rotate(-45deg);
}
.is-open .humberger span:nth-of-type(2) { opacity: 0;}
.is-open .humberger span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
	  -ms-transform: translateY(-9px) rotate(45deg);
		  transform: translateY(-9px) rotate(45deg);
}
/* ナビ本体 */
.sp-navi { -webkit-text-size-adjust: 100%;}
.sp-navi.is-open {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
	background: rgba(3,3,3,.5);
	display: block;
}
.sp-navi.is-open .sp-navi-inner {
	opacity: 1;
	visibility: visible;
}
.sp-navi .sp-navi-inner {
	background: #FFFFFF;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	/*left: 0px;*/
	right: 0px;
	height: 100%;
	width: 77%;
	transition: .5s;
	padding-bottom: 80px;
    z-index: 100000;
}
.sp-navi .sp-navi-inner .navi-main{margin-bottom: 30px;}
.sp-navi .sp-navi-inner .navi-main > li {
	margin-left: 5%;
	margin-right: 5%;
	position: relative;
}
.sp-navi .sp-navi-inner .navi-main > li:before {
	background: #000;
	content: "";
	height: 3px;
	width: 0px;
	position: absolute;
	left: 5px;
	top: 20px;
}
.sp-navi .sp-navi-inner .navi-main > li:first-child {margin-top: 20px;}
.sp-navi .sp-navi-inner .navi-main > li > span {
	display: block;
	padding: 13px 10px 13px 10px;
	overflow: hidden;
	line-height: 1.3em;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
	font-size: 16px;
}

.sp-navi .sp-navi-inner .navi-main > li > a {
	display: block;
	padding: 20px 10px 20px 20px;
	overflow: hidden;
	line-height: 1em;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.143em;
}

.sp-navi .sp-navi-inner .navi-main > li > a::before{
	background: #000;
	content: "";
	height: 2px;
	width: 10px;
	position: absolute;
	left: 4px;
	top: 1.6em;
}
.sp-navi .sp-navi-inner .navi-main > li > a:hover{color: #000000;text-decoration: underline solid;}
.sp-navi .logo { padding: 0px 60px 0px 10px; line-height: 50px; display: flex; justify-content: space-between; align-items: center;}
.sp-navi .logo img { width: auto; height: 30px; vertical-align: middle;}
.sp-navi .sp-navi-inner .navi-contact{width: 240px;margin-left: 20px;}
.sp-navi .sp-navi-inner .navi-contact li:first-of-type{margin-bottom: 10px;}
.sp-navi .sp-navi-inner .navi-contact li div{border-radius: 10px;transition: all 0.3s 0s ease-in-out;}
.sp-navi .sp-navi-inner .navi-contact li div:hover{background-color: #333333;}
.sp-navi .sp-navi-inner .navi-contact .btn_tel,
.sp-navi .sp-navi-inner .navi-contact .btn_mail{background-color: #C7000D;}
.sp-navi .sp-navi-inner .navi-contact .btn_tel a,
.sp-navi .sp-navi-inner .navi-contact .btn_mail a{
    display: block;
    position: relative;
    width: 100%;
    color: white;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    transition: all 0.3s 0s ease-in-out;
}
.sp-navi .sp-navi-inner .navi-contact .btn_tel a{font-size: 1.4em;padding: 7px 16px 7px 59px;}
.sp-navi .sp-navi-inner .navi-contact .btn_mail a{font-size: 1.2em;padding: 11px 31px 11px 77px;}
.sp-navi .sp-navi-inner .navi-contact .btn_tel a::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
    width: 22px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.3s 0s ease-in-out;
}
.sp-navi .sp-navi-inner .navi-contact .btn_mail a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
    width: 31px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.3s 0s ease-in-out;
}
.sp-navi .sp-navi-inner .navi-contact .btn_tel a::before{background-image: url("../images/common/tel_icon_white.svg");}
.sp-navi .sp-navi-inner .navi-contact .btn_mail a::before{background-image: url("../images/common/mail_icon_white.svg");}

/* ==========================
	共通部品
   ========================== */
.box_contact{
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 30px 30px;
    border-radius: 10px;
}
.btn_contact_area{display: block;max-width: 304px;margin-left: auto;margin-right: auto;}
.btn_contact_area .btn_tel{margin-bottom: 10px;}
.btn_contact_area .btn_mail{margin-left: 0;}
.btn_contact_area div a{font-size: 1.3em;}


.page_heading{padding: 60px 0 50px;}
.page_heading h2{top: 36%;font-size: 2.8em;}
.back_grey{padding-top: 20px;padding-bottom: 40px;}


/* ==========================
	top
   ========================== */
.top_sec_01 figure{width: 100%;margin-left: 0;}
.top_sec_01 h2{left: 35%;top: 63%;font-size: 1.429em;}
.top_sec_02{padding: 40px 0 40px;position: relative;}
.top_sec_02 .container{display: block;position: relative;}
.top_sec_02 .container .box01{width: 100%;}
.top_sec_02 .container:nth-of-type(1) > .box01{margin-left: auto;margin-top: 10px;}
.top_sec_02 .container:nth-of-type(1) > .box01 h3{font-size: 1.4em;}
.top_sec_02 .container:nth-of-type(2) .box01 p{width: 100%;margin-left: 0;margin-bottom: 10px;}
.top_sec_02 .container > figure{width: 100%;position: relative;z-index: auto;}
.top_sec_02 .container:nth-of-type(2) .box01 > figure{position: relative;margin-bottom: 10px;}
.top_sec_02 .container:nth-of-type(2) .box01 > figure::before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 75px 75px 0 0;
    border-color: #C7000D transparent transparent transparent;
}

.top_sec_02 .container > figure::before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 75px 75px 0 0;
    border-color: #C7000D transparent transparent transparent;
}

.top_sec_02 .heading{width: 190px;padding: 10px 0;}
.top_sec_02 .container:nth-of-type(2) .heading{margin-bottom: 10px;}
.top_sec_02 .heading h2 span:nth-of-type(1){font-size: 1.75em;}
.top_sec_02 .heading h2 span:nth-of-type(2){font-size: 1.0em;}
.top_sec_02 .container:nth-of-type(2) > figure{margin-left: 0;}
.top_sec_02 .container:nth-of-type(1) .heading{
    position: relative;
    z-index: auto;
    left: auto;
    top: auto;
    transform: none;
    margin-bottom: 10px;
}
.top_sec_02 .container:nth-of-type(1) .heading h2{margin-left: 60px;}
.top_sec_02 .container:nth-of-type(2) .box01 .btn_read_more{margin-left: 0;}
.top_sec_03{margin-bottom: 40px;}
.top_sec_03 .red_polygon{
    background-color: #C7000D;
    padding: 40px 10px;; 
    clip-path: polygon(30px 0%, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}

.top_sec_03::after{
    position: absolute;
    content: "";
    right: -20px;
    bottom: -20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 20px 20px;
    border-color: #B0966C transparent transparent transparent;
    transform: rotate(315deg)
}

/* ==========================
	advantage
   ========================== */
.advantage_sec_02 .box01,.advantage_sec_03 .box01{padding: 40px 20px;}
.advantage_sec_04 ul{display: block;margin-bottom: 60px;}
.advantage_sec_04 ul li{width: 100%;}
.advantage_sec_04 ul li:not(:last-of-type){margin-bottom: 10px;}

/* ==========================
	business
   ========================== */
.business_sec_02 > div{padding: 25px 20px;}
.business_sec_03 > div{display: block;}
.business_sec_03 > div > section{width: 100%;}
.business_sec_03 > div > .left_panel{margin-bottom: 20px;}
.business_sec_03 > div > .right_panel{margin-left: 0;}
.business_sec_03 .box02 h4{
    width: 3.7em;
    padding: 5px 12px;
    line-height: 1em;
    margin-bottom: 15px;
    color: white;
}
.business_sec_04 > figure{max-width: 700px;margin: 0 auto;}

/* ==========================
	woks
   ========================== */
.works_sec_02 > div{padding: 25px 20px;}
.works_sec_04 ul{display: block;margin-bottom: 60px;}
.works_sec_04 ul li{width: 100%;display: flex;justify-content: center;}
.works_sec_04 ul li:not(:last-of-type){margin-bottom: 10px;}
.table_wrap{overflow-x: hidden;}
.works_table{min-width:620px;}
.works_table thead {font-size: 1.1em;}
.works_table thead tr th{padding: 1em;}
.works_table tr td {font-size: 0.9em;}
.works_table tbody td {padding: 1em 1em;}

@media (max-width: 620px) {
	.table_wrap{overflow-x: scroll;}
    .sp_hidden{display: block;margin-bottom: 0;}
}

/* ==========================
	company
   ========================== */
.company_sec_02 h2,.company_sec_03 h2,.company_sec_04 h2{font-size: 2em;margin-bottom: 30px;}
.company_sec_02 div{padding: 30px 0em;width: 100%;}
.company_sec_02 table{width: 100%;margin: 0 auto;padding: 0 20px;}
.company_sec_02 table tr th{font-size: 1em;line-height: 1.3em;width: 5em;}
.company_sec_02 table tr td{padding-left: 1em;line-height: 1.5em;}
.company_sec_03 > div{display: block;width: 100%;margin: 0 auto;}
.company_sec_03 > div > figure{width: 100%;max-width: 183px;margin: 0 auto 20px;}
.company_sec_03 > div > div{width: 100%;margin-left: auto;padding-top: 0;text-align: center;}
.company_sec_03 > div > div > p:first-of-type{margin-bottom: 30px;}
.company_sec_03 .btn_download{margin: 0 auto;}
.company_sec_03 .btn_download a {text-align: left;padding-left: 20px;background-position: calc(100% - 20px) center;}
.company_sec_04 p{line-height: 1em;}

/* ==========================
	recruit
   ========================== */
.recruit_sec_02{margin-bottom: 60px;}
.recruit_sec_02 h2{font-size: 2em;margin-bottom: 30px;}
.recruit_sec_02 .tab li{font-size: 1.3em;padding: 0.6em 1.4em;line-height: 1em;}
.recruit_sec_02 .tab{margin-bottom: 20px;}
.recruit_sec_02 .tab li:nth-of-type(2){margin-left: 20px;}
.recruit_sec_02 .content h3{font-size: 1.5em;margin-bottom: 20px;}
.recruit_sec_02 .content > li section{padding: 30px 20px;}
.recruit_sec_02 table tr th{font-size: 1.1em;line-height: 1.3em;}
.recruit_sec_02 table tr td{line-height: 1.3em;padding-bottom: 20px;padding-left: 1em;}

/* ==========================
	contact
   ========================== */
.contact_sec_02 h2{font-size: 2em;margin-bottom: 30px;}
.contact_sec_02 .list01 li:first-child { margin-right: 3em;}
.contact_sec_02 .list01 figure { padding: 0px 30%;}
.contact_sec_02 .list01 .tel { font-size: 2em;}
.contact_sec .btn_area input { font-size: 1.5em;}
@media only screen and (max-width: 640px) {
	.contact_sec_02 .list01 { font-size: 2.2vw;margin-bottom: 40px;}
	.contact_sec dl, .contact_sec dl > * { display: block; width: auto !important;}
	.contact_sec dt { padding-bottom: 3px;}
	.contact_sec dt .hissu { float: none; margin-left: 0.6em;}
}

@media only screen and (max-width: 480px) {
	.contact_sec_02 .list01 { display: block; font-size: 1em;}
	.contact_sec_02 .list01 li:first-child { margin: 0px 0px 25px;}
	.contact_sec_02 .list01 figure img { width: 5em;}
}