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

#en_btn{ background-image: url("../images/icon/earth_blue.svg");}
#search_btn{ background-image: url("../images/icon/search_blue.svg");}
.overlayMenuBtn::before{ color: #0086d3;}
.overlayMenuBtn span{ background: #0086d3;}
@media (min-width: 768px) {
	#header_ul>li>a{ color: #0088d2;}
	#header_ul>li:first-child>a{ border-bottom-color: #0088d2;}
	#overlay_box:hover{ background-color: transparent;}
	/*.open_sp .overlayMenuBtn::before{ color: white;}
	.open_sp .overlayMenuBtn span{ background: white;}*/
	#page_top_pc{ background-color: rgba(255,255,255,0.7); background-image: url("../images/icon/top_arrow_blue.svg");}
	main{ padding-top: 90px;}
}
@media (max-width: 890px) {
	main{ padding-top: 0;}
}
@media (max-width: 767.98px) {
	main{ padding-top: 0; font-size: 12px;}
}


#page_main{ margin: 0; background-position: center; background-size: cover; position: relative;}
#page_main>div{ margin: 0 auto; display: block; color: white; text-shadow: 2px 2px 5px black; text-align: center}
#page_main .midashi01{ margin: 0;}
#page_main .midashi01>span::before{ background-color: white; box-shadow: 2px 2px 5px black;}

#page_main_recruit{ margin: 0; background-position: left 40% bottom 50%; background-size: cover;}
#page_main_recruit>div{ margin: 0 auto; display: block; color: white; text-align: center}
#page_main_recruit .midashi09{ margin: 0;}

.breadcrumb{ background-color: transparent; padding: 2em 0; margin: 0;}
.breadcrumb a{ color:#0088d2;}

#page_menu{ padding: 0; list-style: none;}
#page_menu>li{}
#page_menu>li>a{ display: flex; align-items: center; color: #333; /*text-shadow: 2px 2px 5px black;*/ width: 100%; background-color: #eee; border-left-color: #0088d2; border-left-style: solid; background-repeat: no-repeat; background-size: auto 100%; background-position: right center; transition: .3s;}
#page_menu>li>a:hover{ text-decoration: none; opacity: 0.5;}
@media (min-width: 768px) {
	#page_main{}
	#page_main>div{ width: 1110px; padding: 100px 15px;}
	#page_main_recruit>div{ width: 1110px; padding: 60px 15px 50px;}
	#page_main::before { content: ""; background-image: url("../../images/wave/wave2.png"); background-repeat: repeat-x; background-position: center; display: block; width: 100%; height: 40px; background-size: 1156px auto; position: absolute; bottom: -2px; z-index: 1; transform: scale(-1, 1);}

	#page_menu{ display: flex; flex-wrap: wrap; margin: 0 -25px; padding-bottom: 100px;}
	#page_menu>li{ width: calc(50% - 50px); margin: 0 25px 50px;}
	#page_menu>li:nth-last-child(2),
	#page_menu>li:last-child{ margin-bottom: 0;}

	#page_menu>li>a{ height: 100px; border-left-width: 10px; padding-left: 20px; font-size: 20px;}
}
@media (max-width: 767.98px) {
	#page_main{}
	#page_main>div{ padding: 50px 10px;}
	#page_main_recruit>div{ padding: 50px 10px;}
	#page_main::before { content: ""; background-image: url("../../images/wave/wave2.png"); background-repeat: repeat-x; background-position: center; display: block; width: 100%; height: 22px; background-size: 541px auto; position: absolute; left: 0; bottom: -2px; z-index: 1; transform: scale(-1, 1);}

	#page_menu{ padding-bottom: 50px;}
	#page_menu>li{ margin-bottom: 20px;}
	#page_menu>li:last-child{ margin: 0;}
	#page_menu>li>a{ border-left-width: 5px; padding: 20px 0 20px 10px; font-size: 16px;}
}

/* 各ページ上部の画像*/
.BG_COMPANY { background: url("../images/pagevisual/company.jpg");}
.BG_CSR { background: url( ../images/pagevisual/csr.jpg);}
.BG_IR { background: url( ../images/pagevisual/ir.jpg);}
.BG_SHIRYO { background: url( ../images/pagevisual/shiryo.jpg);}
.BG_DOC { background: url(../images/pagevisual/document.jpg);}
.BG_PROFILE { background: url(../images/pagevisual/profile.jpg);}
.BG_RECRUIT { background: url(../images/pagevisual/recruit.jpg);}
.BG_RECRUIT_FRESH { background: url(../images/pagevisual/recruit_fresh.png);}
.BG_CHARACTER { background: url("../images/pagevisual/character.jpg");}


/**　共通のマージンボトム
基本マージンボトムには何も入れず、以下で調整（場所による）
*/
.middle_mb{ margin-bottom: 3.12em !important; }
.end_mb { margin-bottom: 6.25em !important; }
.small_mb { margin-bottom: 1em; }


/*デフォルトのテキスト、リスト
テキスト　上に1em下に2em隙間
リスト　上に1em下に2em、左に2em
*/
@media (min-width: 768px) {
	.normal_text { margin-bottom: 2em; margin-top: 1em;}
	.normal_list { margin-top: 1em; margin-bottom: 2em; margin-left: 2em;}
}
@media (max-width: 767.98px) {
	.normal_text { margin-bottom: 2em; margin-top: 1em;}
	.normal_list { margin-top: 1em; margin-bottom: 2em; margin-left: -2em;}
}


/* PDF css
エクセル、PDFのクラスを入れる列、aタグなどに.doc_linkを入れると上下を調節できる
*/
small.pdf { margin-left: 0.4em; display: inline-flex; align-items: center; }
small.pdf::before { display: inline-block; content: ""; background-image: url(../images/icon/pdf.png); width: 20px; height: 20px; margin-right: 0.3em; background-repeat: no-repeat; background-position: center; background-size: auto 20px;}
small.pdf { color: #000;}

small.excel { margin-left: 0.4em; display: inline-flex; align-items: center; }
small.excel::before { display: inline-block; content: ""; background-image: url(../images/icon/excel.png); width: 20px; height: 20px; margin-right: 0.3em; background-repeat: no-repeat; background-position: center; background-size: auto 20px;}
small.excel { color: #000;}

.doc_link { display: inline-flex; align-content: center; line-height: 1.7em; }

/*small.pdf {}
small.pdf { margin-left: 0.3em; line-height: 1.7em;}
small.pdf::before { display: inline-flex; background: url(../images/icon/pdf.png) no-repeat left center; width: 22px; height: 20px; content: ""; background-size: contain; }

.doc_link { align-content: center; line-height: 1.7em;}*/

@media (min-width: 768px){
	small.pdf { font-size: 10px; }
	small.excel { font-size: 10px;}
}
@media (max-width: 767.98px){
	small.pdf{ font-size: 8px;}
	small.excel{ font-size: 8px;}
}

/* GRAYTABLE BASE 
幅、マージンボトムは未設定。
そのため個別でマージンボトムとそれぞれの幅の設定をすること
テーブルのTR1列目のTHに背景グレーがきくように設定
*/
.GrayTableBase { border: 1px solid #ccc; }
.GrayTableBase tr:first-of-type th { background-color: #666; color: #fff; }
.GrayTableBase th, .GrayTableBase td { padding: 0.7em 1em; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.GrayTableBase caption { text-align: center; caption-side: top; color: #000;}

@media (min-width: 768px){
	.GrayTableBase { font-size: 14px; margin-top: 2em;}
}
@media (max-width: 767.98px){
	.GrayTableBase { font-size: 14px; margin-top: 2em;}
}


/* TABLE BASE LINE 
上下に線が入るテーブルのベースそれぞれの幅、太文字などは各自調整。
スマホ版は調整があるので未設定

例
@media (min-width: 768px){
.profile_table th{ width: 180px; font-weight: bold;}
.profile_table td{ max-width: 900px; padding-left: 36px;}
}

@media (max-width: 767.98px){
.profile_table2 { font-size: 12px; margin-bottom: 60px;}
.profile_table2 tr{ display: block; width: 100%; border-bottom: 1px solid #ddd;}
.profile_table2 th{ display: block; font-weight: bold; padding: 1.5em 0 0; margin-bottom: 0.5em;}
.profile_table2 td{ display: block; padding: 0 0 1.5em;}
}
*/

.LineTableBase { margin-left: auto; margin-right: auto;}
@media (min-width: 768px){
	.LineTableBase { width: 100%; font-size: 14px;}
	.LineTableBase tr { border-bottom: 1px solid #ddd; }
	.LineTableBase th:first-of-type { padding-left: 4.1em; } 
	.LineTableBase td:last-of-type { padding-right:4.1em; }
	.LineTableBase td, .LineTableBase th{ padding-top:2em; padding-bottom: 2em;}
}
@media (max-width: 767.98px){
	.LineTableBase { width: 100%; }
}


@media (min-width: 768px) {
	.telLink { pointer-events: none; color:#212529;}
}
@media (max-width: 767.98px) {
}


@media (min-width: 768px){
    .link_box04 { border: 1px solid #000; border-radius: 10px; padding: 7px 30px 7px 20px; color: #000; text-decoration: none; margin: 10px 0 0 0; display: inline-block; position: relative;}
	.link_box04::after { content: ""; display: inline-block; width: 15px; height: 15px; background-image: url(../../common/images/icon/arrow2_bk.svg); background-repeat: no-repeat; background-size: contain; position: absolute; top: 12px; right: 3px;}
}
@media (max-width: 767.98px){
	.link_box04 { border: 1px solid #000; border-radius: 10px; padding: 7px 30px 7px 20px; color: #000; text-decoration: none; margin: 10px 0 0 0; display: inline-block; position: relative;}
	.link_box04::after { content: ""; display: inline-block; width: 12px; height: 12px; background-image: url(../../common/images/icon/arrow2_bk.svg); background-repeat: no-repeat; background-size: contain; position: absolute; top: 10px; right: 3px;}
}