/*
Theme Name: habakiri-child
Theme URI: http://2inc.org
Description: Habakiri の子テーマ
Author: Takashi Kitajima
Author URI: http://2inc.org
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: habakiri
*/

/* 画面幅により可変する部分 */
/* デフォルト設定、および画面幅1200px以上用 */
html{ font-size: 11px; }
.top-Midashi{
	background-size: cover;
	position:relative;
	height: 350px;
	
}
.top-Midashi2{
	background-size: cover;
	position:relative;
	height: 350px;
}
.tab_item{font-size: 1.5rem;}

.anniversary{
	text-align:left;
	margin:2.0rem 0;
}
/* 20周年記念コメント用CSS */
.anniversary H3{
	color:green;
	font-size:3.5rem;
	font-family: 'HGP明朝B',serif;
	margin:3.0rem 0;
}
.anniversary div{
	font-size:1.5rem;
}
.anniversary H4{
	font-size:2.0rem;
	margin:2.8rem 0;
	font-family: 'HGP明朝B',serif;
}
.anvsign{
	font-size:1.5rem;
	margin-left:55%;
}
.anniversary p{
	margin-bottom:20px;
}

/*採用情報募集人数*/
.box-numbers1 {
	display: inline-block;
	vertical-align: middle;
}
.box-numbers2 {
	display: inline-block;
	vertical-align: middle;
}
.box-numbers2 img{
	width:200px;
	margin-left:10px;
}

/* 画面幅992-1199px用 */
@media (max-width: 1199px) {
	html {font-size: 10px; }
	.top-Midashi{ height: 300px; }
	.top-Midashi2{ height: 300px; }
	.tab_item{font-size: 1.6rem;}
	.anniversary H3{font-size:3.6rem;}
	.anniversary div{font-size:1.7rem;}
	.anniversary H4{font-size:2.2rem;}
	.anvsign{font-size:1.5rem;margin-left:57%;}
}
/* 画面幅768-991px用 */
@media (max-width: 991px) {
	html {font-size: 8px; }
	.top-Midashi{ height: 300px; }
	.top-Midashi2{ height: 300px; }
	.tab_item{font-size: 1.9rem;}
	.anniversary H3{font-size:3.9rem;}
	.anniversary div{font-size:1.9rem;}
	.anniversary H4{font-size:2.4rem;}
	.anvsign{font-size:1.5rem;margin-left:47%;}
	.anvimg img{width:100px;}
	.mailimg img{width:80px; height:auto;}
}
/* 画面幅544-767px用 */
@media (max-width: 767px) {
	html { font-size: 7px; }
	.top-Midashi{ height: 250px; }
	.top-Midashi2{ height: 250px; }
	.anniversary H3{font-size:4.0rem;}
	.anniversary div{font-size:2.0rem;}
	.anniversary H4{font-size:2.7rem;}
	.anvsign{font-size:1.5rem;margin-left:50%;}
	.anvimg img{width:100px;}
	.mailimg img{width:70px; height:auto;}
}
/* 画面幅543px以下用 */
@media (max-width: 543px) {
	html { font-size: 5px; }
	.top-Midashi{ height: 200px; }
	.top-Midashi2{ height: 200px; }
	.anniversary H3{font-size:4.1rem;}
	.anniversary div{font-size:2.8rem;}
	.anniversary H4{font-size:3.4rem;text-align:right;}
	.anvsign{font-size:1.5rem;margin-left:0;}
	.anvimg img{width:100px;}
	.mailimg img{width:60px; height:auto;}
}

/* ページ全体のフォント */
body{
	font-family: "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
    line-height: 1.8;
    font-weight: 500;
}

/* 左上ロゴ部分 */
.site-branding {
	padding-top: 5px;
}

/* グローバルナビゲーションの上空白をなくす */
.header__content .header__col {
	vertical-align:top;
	padding:0px;
}
.responsive-nav .sub-menu a, .responsive-nav .children a {
  padding: 0px; }

/* フロントページスライドショーの設定 */
.habakiri-slider__item-content {
	text-align: center;
	font-size: 3.5rem;
	color: #ffffff;
	text-shadow: 0px 0px 70px black;

}
.habakiri-slider__item-content h1 {
	font-size: 5.5rem;
}

/* トップページ全体のCSS */
.top_page { 
	text-align: center;
	margin:50px;
}

/* トップページの見出し部分の文字設定 */
.top_page h2 { 
	color: green;
	font-size: 350%;
}
/* 2文字目をオレンジに */
.js_color span:nth-child(2) { color: #F39801; }

/* トップページの線 */
.top_page hr { 
	margin: 40 0px;
	width: 100%;
}

/* 汎用設定 */
.left_box {
	text-align: left;
	display: inline-block;
	vertical-align: top;
}
.js_orange{ color: #F39801; }

list-style-type:none
#post_contents ul li { list-style-type:none; background-image:none; padding-left:0; }

/* トップページの各ブロックの見出し */
.top-Midashi h3{
	font-family: 'HGP明朝B',serif;
	font-size: 3.5rem;
	color: #FFFFFF;
	
	text-shadow: 2px 2px 4px #414141,
    -2px 2px 4px #414141,
    2px -2px 4px #414141,
    -2px -2px 4px #414141;
	
	/*background-color: rgba(204,204,204,0.40);*/
	/*text-shadow: 1px 1px 0 #000;*/
	background-color: transparent;
	
}
.midashi_child {
position: absolute;
 	top: 50%;
	left: 2%;
	right: 2%;
 	-ms-transform: translateY(-50%);
 	-webkit-transform : translateY(-50%);
 	transform : translateY(-50%);
	text-align: center;
}
/*
.top-Midashi::before{
	透過した黒を重ねる
	background-color: rgba(0,0,0,0.4);
	どの範囲に重ねるかを指定
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	content:'';
}
*/
/* 各ページのヘッダー画像（兼トップページの見出し画像 */
.top-Midashi-Service{
	background-image: url("../../uploads/service.png");
}
.top-Midashi-Recruit{
	background-image: url("../../uploads/sakura.png");
}
.top-Midashi-Partner{
	background-image: url("../../uploads/partner.png");
}
.top-Midashi-Policies{
	background-image: url("../../uploads/policies.png");
}
.top-Midashi-Companay{
	/**background-image: url("../../uploads/kaisha.png");*/
	background-image: url("../../uploads/osaki_office.jpg");
}
.top-Midashi-Inquiry{
	background-image: url("../../uploads/inquiry.jpg");
}
.top-Midashi-Data{
	/*background-image: url("../../uploads/graph.png");*/
	background-image: url("../../uploads/社員データトップ_202304_2.jpg");
}
.top-Midashi-Security{
	background-image: url("../../uploads/security.png");
}
.top-Midashi-Gorikai{
	background-image: url("../../uploads/gori_banner.png");
}
.top-Midashi-Gorikai2{
	background-image: url("../../uploads/gorikai-top.png");
}


/* トップページ-サービスのアイコン画像部分 */
.service_img {
	height: 120px;
	width: 120px;
	background-size: 120px auto;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
    margin: auto;
}

/* トップページ-サービスの各サービス部分 */
.service_area {
	margin-top: 10px;
}

/* トップページ-サービスのアイコン画像を指定 */
.service_img_makersol {
	background-image: url("../../uploads/factory01.png");
}
.service_img_maintenancesol {
	background-image: url("../../uploads/tools01.png");
}
.service_img_distributionsol {
	background-image: url("../../uploads/truck01.png");
}
.service_img_johsotrendtechsol {
	background-image: url("../../uploads/jtrend01.png");
}
.service_img_aisol {
	background-image: url("../../uploads/ai01.png");
}
.service_img_serversol {
	background-image: url("../../uploads/server01.png");
}
.service_img_securitysol {
	background-image: url("../../uploads/security01.png");
}
.service_area_makersol a:hover > .service_img_makersol{
	background-image: url("../../uploads/factory02.png");
}
.service_area_maintenancesol a:hover > .service_img_maintenancesol{
	background-image: url("../../uploads/tools02.png");
}
.service_area_johsotrendtechsol a:hover > .service_img_johsotrendtechsol {
	background-image: url("../../uploads/jtrend02.png");
}
.service_area_aisol a:hover > .service_img_aisol{
	background-image: url("../../uploads/ai02.png");
}
.service_area_distributionsol a:hover > .service_img_distributionsol{
	background-image: url("../../uploads/truck02.png");
}
.service_area_serversol a:hover > .service_img_serversol{
	background-image: url("../../uploads/server02.png");
}
.service_area_securitysol a:hover > .service_img_securitysol{
	background-image: url("../../uploads/security02.png");
}

/* 汎用ボタン用クラス */
.button{
	background-color: #22B325;
	border-color: #22B325;
	border-radius: 7px;        /* CSS3草案 */  
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 7px;   /* Firefox用 */ 
	padding: 5px 10px;
	color: white;
	font-weight: bold;
	display:inline-block;
}
.button:hover {
	background-color: limegreen;
	border-color: limegreen;
}
.button_mini{
	background-color: #22B325;
	border-color: #22B325;
	border-radius: 7px;        /* CSS3草案 */  
    -webkit-border-radius: 7px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 7px;   /* Firefox用 */ 
	padding: 3px 6px;
	color: white;
	font-weight: bold;
	display:inline-block;
	font-size:smaller;
}
.button_mini:hover {
	background-color: limegreen;
	border-color: limegreen;
}
/* 多分これ使ってないよね？ */
.contact{
	text-align: center;
	background-color: green;
	padding-left:10px;
	padding-right:10px;
	padding-top:5px;
	padding-bottom:5px;
	margin-top:30px;
	display:inline-block;
	color: white;
}

/* 各固定ページのタイトルを非表示に */
.page .entry__title{
	display: none;
}
/* トップページ以外の各ページの見出し */
.midashi_child2 {
position: absolute;
 	top: 70%;
	left: 6%;
 	-ms-transform: translateY(-50%);
 	-webkit-transform : translateY(-50%);
 	transform : translateY(-50%);
	/*text-align: center;*/
	font-family: 'HGP明朝B',serif;
	font-size: 3.5rem;
	color: #FFFFFF;
	text-shadow: 2px 2px 4px #414141,
    -2px 2px 4px #414141,
    2px -2px 4px #414141,
    -2px -2px 4px #414141;
}

/* 各固定ページCSS */
.common_page h1{
	background-image: url("../../uploads/service.png");
}
.common_page h2{
	color: green;
}
.common_page h3{
	color: green;
	font-weight: bold;
}
.common_page hr{
	margin-top: 0;
}
.common_page ul li{
	list-style-type :square;
}
.indentback{
	text-indent: -1em;
  	padding-left: 5em;
}
/* 遷移先の表示のずれを修正 */
.anchor{
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}
.common_page ul{
	padding: 0;
}
.list_host{
	color: green;
	font-weight: bold;
	font-size: large;
}
/* リストを付箋の形に */
.sol_Service_anchor ul li{
  color: #404040;
  border-left: solid 6px #1fa67a;/*左側の線*/
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: whitesmoke;
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  font-weight: bold;
}
.sub_title{
  margin: 20px 0px 20px 0px;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #72B73A;/*左線*/
  font-weight: bold; /*字の太さ*/
  font-size:1.7rem;
}
/* テーブルレイアウト */
.common_table{
  border-collapse: collapse;
  border-spacing: 0;
}
.common_table th,table td{
  overflow-wrap : break-word;
  border: solid 3px white;
  padding: 10px;
  padding-right:30px;
  text-align: left;
  font-size: 1.6rem;
}
.common_table td1{
	white-space: nowrap;
}
.common_table tr:nth-child(odd){
  background-color: #E6FFE9;
}
.common_table tr:nth-child(even){
  background-color: #FFFEFB;
}
.bold{
	font-size: 1.7rem;
	font-weight: bold;
}
/* 入力フォームCSS */
.cp_iptxt {
	position: relative;
	width: 80%;
}
.cp_iptxt input,select,textarea{
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	padding: 0.3em;
	transition: 0.3s;
	border: 1px solid #3da31f;
	border-radius: 4px;
	outline: none;
}
.cp_iptxt input:focus,textarea:focus,select:focus {
	border-color: #f2af07;
}
/* 最近の投稿ウィジェット */
.wd-table .post-title{
	font-size: 1.4rem;
	line-height: 1.5rem;
}
.wd-table .post-td{
	vertical-align:text-top;
}

.wd-table .post-date{
	font-size:1.3rem;
	padding: 0;
	margin: 0;
}
.wd-table{
	border-collapse: separate;
    border-spacing: 2px 0px;
	margin: 0;
	padding: 0;
}
.thumbnail{
	flex-shrink: 0;
	object-fit: cover;
	min-width :70px;
	min-height: 70px;
	max-width: 70px;
	max-height: 70px;
}

.inline-block{
	display: inline-block;      /* インラインブロック要素にする */
}

/*タブ切り替えエリア全体のスタイル*/
.tabs {
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: #fff;
	margin: 0 auto;
}
/*タブのスタイル*/
.tab_item {
	color: #565656;
	background-color: #d9d9d9;
	width: calc(100%/3);
	height: 50px;
	line-height: 50px;
	float: left;
	text-align: center;
	font-weight: bold;
	display: block;
	transition: all 0.2s ease;
	border: solid 3px white;
}
/*選択中のタブのスタイル*/
.tabs input:checked + .tab_item {
	background-color: #72B73A;
	color: #fff;
}

/*タブホバー時の半透明化*/
.tab_item:hover {
	opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}

/*一旦全てのタブのコンテンツを非表示*/
.tab_content {
	display: none;
	clear: both;
	overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#graduate:checked ~ #graduate_content,
#permanent:checked ~ #permanent_content,
#contract:checked ~ #contract_content {
	display: block;
}

/* 経営方針ページの社長サイン */
.sign {
	background-image: url("../../uploads/sign.png");
	background-repeat: no-repeat;
	background-size:contain;
	width:350px;
	height:59px;
	background-position:115px 0px;
	margin-left: auto;

}

.category ul{
	list-style:none;
}

/* 投稿ページ */
.post-title h3{
	margin: 0; 
    padding-top: 0;
	padding-bottom: 8px;
}
.post-date{
	color: #696969;
}
.post-info{
	text-align:right;
}

.post .col-md-8{
	border : solid 1px #ffefd5;
	padding: 15px;
	margin-bottom: 10px;
}

.post-category{
	margin-top: 20px;
}
.post hr{
	margin-top : 0;
}
.post .comment{
	margin-top : 20px;
}
.post .content{
	margin-bottom: 40px;
}

.items {
	margin-top:50px;
	margin-bottom:50px;
}
/** 会社案内の会社概要の許認可の画像部分 */
.ninsho_box {
	text-align: center;
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
}

/** その他サービスの画像を中央に揃える */
.othorservice-image{
	 text-align: center;
}

/** 下部にマーカー線を引く */
.maker{
     background: linear-gradient(transparent 60%, #ffff66 60%);
}

/** メリットはインデントを少しずらす */
.none-list{
	margin-left:20px;
}

/**アクセスの先頭位置揃え*/
.accessMG1{
	display:inline-block;
	width:10em;
}
.accessMG2{
	display:inline-block;
	width:6em;
}

/** ゴリカイ関連 */
.midashi_Gorikai{
	position:absolute;
	top: 40%;
	left: 3%;
 	-ms-transform: translateY(-50%);
 	-webkit-transform : translateY(-50%);
 	transform : translateY(-50%);
	font-family: 'HGP明朝B',serif;
	font-size: 3.5rem;
	color: #FFFFFF;
}
.JohsoGorikai{
	position:absolute;
	top: 57%;
	left: 6%;
 	-ms-transform: translateY(-50%);
 	-webkit-transform : translateY(-50%);
 	transform : translateY(-50%);
	font-family: 'HGP明朝B',serif;
	font-size: 3rem;
	color: #FFFFFF;
}

.Gorigori{
		font-weight:700;
}
.top-Gorikai{
		font-size: 4rem;
}

.GorikaiService{
		text-align: center;		
		color: green;
	    font-size: 28px;
		font-weight: 700;
}	
	
.GorikaiContent{
}
.GorikaiServicContent{   
	display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.toiawase {
    display: flex;
}

p.toi_p {
    width: 45px;
}

.ns{
	display: flex;
}

.gaisankousu{
	display:flex;
}

input[name="text-gaisankousu"] {
    width: 100px;
}

img.gorilla-icon {
    padding-right: 4px;
}

.pc-image{
	display:none;
}

.pc-gorira-image{
	display:none;
}

.sp-image{
	width:60%;
}

/** メディアクエリ */
@media only screen and (min-width: 992px) {
.flexBox{
	display:flex;
	align-items: center;
}
}
@media only screen and (min-width: 1200px) {
	.br-sp{
	display:none;
	}
	.nowrap{
		white-space: nowrap;
	}
}
@media only screen and (max-width: 992px){
	.br-sp{
	display:none;
	}
	.br-rs{
		display:none;
	}
}
@media only screen and (min-width: 992px){
	.br-re{
		display:none;
	}
	#mail-hr{
		display:none;
	}
}
/*@media (min-width: 767px) {*/
@media (min-width: 1200px){
	.br-sd{
		display:none;
	}
}
@media only screen and (max-width: 528px){
	.yoko{
		display:none;
	}
}
@media only screen and (max-width: 450px){
	h4 .accessMG1,h4 .accessMG2{
		display:initial;
		width:initial;
	}
}
@media only screen and (min-width: 450px){
	.yokoCom{
		display:none;
	}
}

@media only screen and (min-width: 480px){
	.sp-image{
		display:none;
	}
	.pc-image{
		display:block !important;
	}
}

@media only screen and (min-width: 450px){
	.yokoCom{
		display:none;
	}
}

@media only screen and (min-width: 480px){
	.sp-gorira-image{
		display:none;
	}
	.pc-gorira-image{
		display:block !important;
	}
}

@media only screen and (max-width: 450px){
	.sub_title{
		font-size:20px;
	}
}

@media(min-width:650px){
  .page-id-70 .col-md-5 {
          width: 41% !important; 
          float:left !important;
  }    
}

@media(max-width:651px){
   .page-id-70 .col-md-5{
        width:100% !important;
    }
}

@media(max-width:992px){
    .page-id-70 .row{
        margin-left: 15px;
        margin-right: -15px;
    }
}

@media only screen and (max-width: 450px){
	.page-id-70 .row{
        margin-left: 0px;
        margin-right: 0px;
    }
	
}
@media (min-width: 1199px) {
.osaki-img {
    display:flex;
}
}
@media (max-width: 1199px) {
.osaki-img img {
    padding-bottom:20px;
}
}
.br-disp{
	display:none;
}
@media (min-width: 992px) and (max-width: 1200px) {
  .br-disp{
      display:block !important;
  }
}
@media (max-width: 400px) {
.br-disp{
      display:block !important;
  }
}