@charset "utf-8";

:root {
  --cs-textcolor: #000000;
  --cs-textcolor-a: #663333;
  --cs-textcolor-hover: #B18C29;
  --cs-bordercolor: #c7b299; /* ボーダーのデフォルト色 */
  --cs-blue: #003366; /* 青文字として使用 */
  --cs-blue-light: #4682B4;
  --cs-blue-dark: #233B6C;
  --cs-navy: #000033;
  --cs-purple: #7e67a2;
  --cs-pink: #FF6699;
  --cs-pink-light: #e6c2bf;	
  --cs-red: #990000; /* 赤文字として使用 */
  --cs-red-light: #ffe3e5;
  --cs-red-dark: #440000;
  --cs-orange: #ff6600; /* オレンジ文字として使用 */
  --cs-yellow: #f4d668;
  --cs-green: #668c10; /* メインカラー（ロゴと同じ緑） */
  --cs-green-light: #587d1f;
  --cs-brown: #391d00; /* ロゴと同じ茶 */
  --cs-brown-light: #c7b299; /* ちょっと薄めの茶 */
  --cs-brown-dark: #403134;
  --cs-black: #000;
  --cs-white: #fff;
  --cs-gray: rgba(153, 153, 153, 1);
  --cs-gray-light: rgba(230, 230, 230, 1);
  --cs-gray-dark:  rgba(77, 77, 77, 1);
  --cs-color01: #f3f2eb; /* 薄いクリーム色 */
  --cs-color02: #FCFCFA; /* 薄い背景用 */
  --cs-color03: #819d56; /* 緑背景用 */
  --cs-color04: #668C10; /* 文字用の濃い緑 */
  --cs-color05: #796853; /* 茶背景用 */
  --cs-color06: #e9e1db; /* 茶背景用(薄め) */
  --cs-color07: #fff;
  --cs-color08: #fff;
  --cs-color09: #fff;
  --cs-color10: #fff;
  --cs-shadowcolor01: 149,157,112,; /* shadowに使用するRGB */
  --cs-shadowcolor02: 0,0,0,; /* shadowに使用するRGB */
  --cs-shadowcolor03: 255,255,255,; /* shadowに使用するRGB */
  --cs-basefont: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
  --cs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --header-bgcolor:  rgba(255,255,255,0.0); /* ヘッダー背景色 */
  --header-textcolor: #391d00;                 /* ヘッダーテキスト色 */
  --headermenu-bgcolor: rgba(255,255,255,0); /* ヘッダーメニュー背景色 */
  --headermenu-bgcolor-shadow: rgba(0,0,0,0); /* PCグランドメニューboxshadow色 */
  --headermenu-bgcolor-shadow-sp: rgba(0,0,0,0.3); /* スマホグランドメニューboxshadow色 */
  --headermenu-bgcolor-drop: #e9e1db; /* ヘッダーメニュー背景色（ドロップダウン） */
  --headermenu-bgcolor-drop-hover: #c7b299; /* ヘッダーメニュー背景色（ドロップダウンhover） */
  --headermenu-textcolor: #391d00;             /* ヘッダーメニューテキスト色 */
  --headermenu-textcolor-hover: #F7931E;    /* ヘッダーメニューテキスト色（hover） */
  --header-hbgcolor: #391d00;                  /* ハンバーガー棒の色 */
  --header-hbgcolor-close: #391d00;            /* ハンバーガー棒の色（close） */
  --hbgmenu-bgcolor: #f3f2eb;       /* ハンバーガーメニュー背景色 */
  --hbgmenu-textcolor: #391d00;                /* ハンバーガーメニューテキスト色 */
  --hbgmenu-bordercolor: #c7b299;              /* ハンバーガーメニューボーダー色 */
  --pagetitle-bgcolor: #e8e8e8;             /* ページタイトル背景 */
  --pagetitle-bgcolor-s: #f2f2f2;             /* ページタイトル背景（ストライプにした時の色） */
  --pagetitle-textcolor: #000;              /* ページタイトルテキスト色 */
  --pagetitle-bgtextcolor: rgba(255,255,255,0.2); /* ページタイトルテキストの背景色 */
  --footer-bgcolor: #f3f2eb;               /* フッター背景色 */
  --footer-textcolor: #000;              /* フッターテキスト色 */
  --copyright-bgcolor: #f3f2eb;             /* コピーライト背景色 */
  --copyright-textcolor: #000;              /* フッターテキスト色 */
  --slick-dots: #595757;                /* スリックスライダードットの色 */
  --slick-active: #000;                 /* スリックスライダードットのアクティブ色 */
  --sns-bgcolor: #fff;               /* SNS丸ボタンの背景色 */
  --sns-iconcolor: #333;             /* SNS丸ボタンのアイコン色（ロールオーバも同じ色） */
  --sns-bordercolor: #fff;           /* SNS丸ボタンのボーダー色 */
  --sns-bordercolor-hover: #333;     /* SNS丸ボタンのロールオーバ時のボーダー色 */
  --fnav-iconcolor-pc: rgba(0,0,0,1);         /* PCの時のページトップアイコンの色 */
  --fnav-iconcolor-pc-hover: rgba(0,0,0,0.7);   /* PCの時のページトップアイコンロールオーバ時の色 */
  --fnav-iconcolor-pc-shadow: rgba(255,255,255,0.7);  /* PCの時のページトップアイコンシャドウの色 */
  --fnav-bgcolor-sp: #333;           /* スマホの時のフッターアイコンの背景色 */
  --fnav-iconcolor-sp: #fff;         /* スマホの時のフッターアイコンの色 */
  --sec-bgimg-maskcolor: rgba(0,0,0,0.4);     /*コンテンツの背景に画像を配置した時の背景マスクの色*/
  --img-maru-s--size: 260px;         /* 画像を円形にトリミング（画像サイズが480px以下）画像の縦幅サイズを指定 */
}

/*/////////////////////////////////////////////////////////////////////////////////////////

★★ ヘッダ固定の時のアンカー位置調整したい場合 ★★
common.jsを修正します。
PCの場合：150行目の　 headerHeight = headerHeight + 50; //ヘッダの高さ
　　　　　　　　　　　　　　　　　　　　　　　　　　↑ この数値を50から変更してください。

/////////////////////////////////////////////////////////////////////////////////////////*/

/* -------------
   共通
----------------*/

	@media print, screen and (min-width: 768px) {
		.l-article {
			padding-bottom: 100px;
			}
	}
	@media (max-width: 767px) {
		.l-article {
			padding-bottom: 50px;
			}
	}



/* ---- utility.cssの変更・追加 ---- */
	body {
    font-size: 1.5rem;
		}


/* ---- header.cssの変更・追加 ---- */
	@media print, screen and (min-width: 768px) {
		.l-home .l-headerbase.l-header-transform {
			position: relative;
			}
		.l-page .l-headerbase {
			position: relative;
			}
	}
	@media (max-width: 767px) {
		.l-header { 
			background: url(../img/common/bg_hd.gif) repeat-x center top;
			box-shadow: 0px 8px 3px -3px rgba(64,33,2,0.1);
			-webkit-box-shadow: 0px 8px 3px -3px rgba(64,33,2,0.1);
			-moz-box-shadow: 0px 8px 3px -3px rgba(64,33,2,0.1);
		}
    .l-header h1 img {
      height: 40px;
    }
		.p-hnav-bn {
			display: -webkit-flex;
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-justify-content: center;
			justify-content: center;
			gap: 10px;
			margin-top: 30px;
		}		
		
		
	}


/* ---- footer.cssの変更・追加 ---- */
	.l-footer .p-pagetop {
		width: 106px;
		height: 106px;
		background-color:#fff;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		position: absolute;
		top: -53px;
		left: 50%;
    	left : 46% ; /* IE8以下とAndroid4.3以下には近似値の指定でフォールバック */
    	left : -webkit-calc(50% - 53px) ;
	    left : calc(50% - 53px) ;
		}
	.l-footer .p-pagetop > div a  {
			width: 86px;
			height: 86px;
			margin: 10px;
			display: block;
			padding-top: 38px;
			color: #fff;
		text-decoration: none;
			background-color:#ab937a;
			border-radius: 50%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			}
			.l-footer .p-pagetop > div a:hover {
				background-color:#391d00;
				color: #fff;
				text-decoration: none;
				}
		.l-footer .p-pagetop > div span {
			width: 86px;
			display: block;
			font-size: 18px;
			font-weight: bold;
			letter-spacing: 0;
			text-align: center;
			font-weight: normal;
			position: relative;
			line-height: 1.1;
			}
			.l-footer .p-pagetop > div span::before{
				content: url(../img/common/icon_pagetop.png);
				position: absolute;
				width: 10px;
				height: 23px;
				top: 9px;
				left: 48px;
				}


	.p-footer {
    display: -webkit-flex;
    display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: center;
		justify-content: center;
		gap: 25px;
		font-size: 1.4rem;
		}
	.p-footer address {
		font-style: normal;
		}

	.p-footer-nav {
    display: -webkit-grid;
    display: grid;
		-webkit-justify-content: center;
		justify-content: center;
    gap: 2px;
		grid-template-columns: 1fr 160px 140px;
		}
	.p-footer-nav a {
		color: #000;
		text-decoration: none;
		}
		.p-footer-nav a:hover {
			color: #666;
			}
	.p-footer-nav ul {
		list-style: none;
		padding-left: 0;
		}
	.p-footer-nav > ul > li > ul {
		padding-left: 5px;
		}
		.p-footer-nav > ul > li::before {
			content: "\f0da";
			margin-right: 0.5rem;
			font-family: 'Font Awesome 6 Free';
			position: relative;
			font-weight: bold;
			top: 0px;
			color: #AB937A;			
      font-size: 1.0rem;
			}
		.p-footer-nav > ul > li > ul > li::before {
			content: "-";
			margin-right: 0.5rem;
			position: relative;
			top: 0px;
			color: #AB937A;			
      font-size: 1.0rem;
			}

	@media screen and (min-width:768px) {
		.l-footer {
			padding-top: 130px;
			padding-bottom: 10px;
			}
		.p-footer > *:nth-child(1) {
			width: 200px;
			}
		.p-footer > *:nth-child(2) {
			width: 200px;
			}
		.p-footer > *:nth-child(3) {
			width: 550px;
			}
	}
	@media (max-width: 768px) {
		.l-footer {
			padding-top: 90px;
			padding-bottom: 10px;
			}
		.p-footer > *:nth-child(2) {
			text-align: center;
			}
		.p-footer > *:nth-child(1),
		.p-footer > *:nth-child(3) {
			display: none;
			}
	}

/* ---- 右の求人情報ボタン ---- */
.fixed-button {
	position: fixed;
	top: 215px;
	right: 0;
	z-index: 9999;
	}
	.fixed-button p img {
		vertical-align: top;
		margin-bottom: 2px;
		}
@media print, screen and (max-width: 767px) {
	.fixed-button {
		display: none;
		}
}



/* -------------
   トップページ
----------------*/
/* ---- トップページ背景 ---- */
.l-home {
	background: url("../img/home/bg_home.jpg") no-repeat center top;
	}
	@media (min-width: 1921px) {
		.l-home {
			background-size: 100% auto;
			}
	}

/* ---- バナー ---- */
.p-home_bn_c > * {
	margin: auto;
	}
	@media (max-width: 768px) {
		.p-home_bn_c {
			row-gap: 10px;
			}
	}



/* -------------
   サブページ共通
----------------*/

/* ---- サブページ背景 ---- */
	@media (min-width: 798px) {
		.l-page {
			background: url("../img/common/bg_page.jpg") no-repeat center top;
			}
	}
	@media (min-width: 1921px) {
		.l-page {
			background-size: 100% auto;
			}
	}

/* ---- page title ---- */
.p-pagetitle {
	background: url(../img/page/bg_title.jpg) no-repeat left top;
	height: 110px;
	width: 100%;
	margin-top: 15px;
	margin-bottom: 75px;
	}
	@media (max-width: 767px) {
		.p-pagetitle {
			margin-top: 80px;
			margin-bottom: 10px;
			}
	}
	.p-pagetitle h1 {
		font-size: 30px;
		display: inline-block;
		height: 110px;
		width: 100%;
		margin: 3px 3px 0 0;
		padding-top: 30px;
		padding-left: 35px;
		background:url(../img/page/h1_bgimg.png) no-repeat top right;
		text-shadow:2px 2px 1px #fff,
				-2px 2px 1px #fff,
				2px -2px 1px #fff,
				-2px -2px 1px #fff;
		}
		.p-pagetitle.p-pagetitle_outerwall h1 {
			background:url(../img/page/h1_bg-outerwall.png) no-repeat top right;
			}
		.p-pagetitle.p-pagetitle_roof h1 {
			background:url(../img/page/h1_bg-roof.png) no-repeat top right;
			}
		.p-pagetitle.p-pagetitle_hosho h1 {
			background:url(../img/page/h1_bg-hosho.png) no-repeat top right;
			}
		
	@media screen and (min-width: 601px) {
		.p-pagetitle h1.moji span {
			display: none;
			}
	}
	@media screen and (max-width: 600px) {
		.p-pagetitle h1.moji {
			font-size: 24px;
			padding-top: 20px;
			padding-left: 30px;
			line-height: 1.3em;
			}
		.p-pagetitle h1.mojisize {
			font-size: 24px;
			}
	}

/* ---- title ---- */		
.p-title_border {
	border: #c7b299 solid 1px;
	padding-top: 8px;
	padding-bottom: 8px;
	}
	.p-title_border > span {
		display: block;
		width: 100%;
		width: -webkit-calc( 100% + 2px );
		width: -moz-calc( 100% +  2px ); 
		width: calc( 100% +  2px );
		background-color: #fff;
		margin-left: -1px;
		margin-right: -2px;
		padding-left: 20px;
		padding-right: 20px;
		}


/* ---- link・button ---- */		
.p-linelink {
	background: url("../img/common/line_link.png") no-repeat left bottom;
	width: 237px;
	font-size: 1.3rem;
	margin-left: auto;
	padding: 10px 0 2px;
	color: var(--cs-brown);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	}
.p-linelink:hover {
	padding-left: 10px;
	}


/* -------------
   屋根・瓦塗装
----------------*/
.p-kikan {
	}
	@media screen and (min-width:800px) {
		.p-kikan {
			display: -webkit-flex;
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			padding: 0;
			}
		.p-kikan > * {
			width: 140px;
			height: 140px;
			}
		.p-kikan_meyasu {
			margin-top: 10px;
			float: right;
			background: url("../img/roof/bg_arrow.png") no-repeat right center;
			text-align: center;
			width: 70%;
			max-width: 780px;
			}
		.p-kikan_meyasu span {
			display: inline-block;
			background-color: #fff;
			padding: 12px 10px 0 15px;
			}
	}
		@media screen and (min-width:800px) and (max-width:980px){
			.p-kikan > * {
				width: 120px;
				height: 120px;
				}
		}
	@media (max-width: 799px) {
		.p-kikan {
			padding: 0 10px;
			}
		.p-kikan > * {
			padding: 5px;
			margin-bottom: 10px;
			}
		.p-kikan_meyasu {
			text-align: right;
			margin-top: 5px;
			}
	}



/* ----------------------------------------------------
   リニューアル前のスタイル
-------------------------------------------------------*/

/* -------------
   共通
----------------*/

/* ---- 下のお問合せボタン ---- */
/* pc */
.bt-inquiry-pc {
	display: block;
	width: 685px;
	height: 113px;
	margin-left: auto;
	margin-right: auto;
	background: url(../img/common/bt_inquiry.jpg) no-repeat;
	text-align:left;
	text-decoration: none;
	}
	.bt-inquiry-pc p:first-child {
		padding: 33px 0 0 130px;
		line-height: 1em;
		}
	.bt-inquiry-pc p:last-child {
		padding: 15px 0 0 295px;
		line-height: 1em;
		font-size: 1.8em;
		letter-spacing: 0.2em;
			-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		}
    .bt-inquiry-pc:hover p:last-child {
			margin-left: 5px;
   	 }

/* sp */
.bt-inquiry-sp {
	display: block;
	width: 95%;
	max-width: 400px;
	height: 48px;
	margin-left: auto;
	margin-right: auto;
	border: #d8d0ca solid 1px;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#d3ccc6');
		/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
		/*Element must have a height (not auto)*/
		/*All filters must be placed together*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#d3ccc6')";
		/*Element must have a height (not auto)*/
		/*All filters must be placed together*/
		background-image: -moz-linear-gradient(top, #ffffff, #d3ccc6);
		background-image: -ms-linear-gradient(top, #ffffff, #d3ccc6);
		background-image: -o-linear-gradient(top, #ffffff, #d3ccc6);
		background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#d3ccc6));
		background-image: -webkit-linear-gradient(top, #ffffff, #d3ccc6);
		background-image: linear-gradient(top, #ffffff, #d3ccc6);
		/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
	}
	.bt-inquiry-sp p {
		padding: 0 10px 0 45px;
		margin: 15px 10px;
		line-height: 1em;
		text-align: center;
		display: inline-block;
		position: relative;
		}
		.bt-inquiry-sp p::before {
			content: url(../img/common/bt_inquiry-sp.png);
			position: absolute;
			top: -8px;
			left: 5px
			}
	@media screen and (max-width: 480px) {
		.bt-inquiry-sp p {
			margin: 15px 0px;
			}
	}



/* ------ page lead  -------*/

#page-lead {
	width: 100%;
	border: #d8d0ca solid 1px;
	margin-bottom: 60px;
	}

	#page-lead > div:first-child {
		margin: 5px 5px 0 5px;
		height: 415px;
		position: relative;
		}


	#page-lead div:last-child {
		margin: 0 5px 5px 5px;
		padding: 15px;
		background-color: #e7e0d9;
		color: #3f1f00;
		font-size: 20px;
		line-height: 1.2em;
		}

	@media screen and (max-width: 767px) {
		#page-lead div:last-child {
			font-size: 14px;
			line-height: 1.1em;
			}
	}


/* ------ 施工事例 -------*/
.ex dl {
	margin: 0;
	padding: 10px;
	background-color: #dfd8d0;
	}
.ex dt {
	margin: 0;
	padding: 0 0 20px;
	font-size: 1.5em;
	}
.ex dd {
	margin: 0;
	padding: 0px;
	}

.ex dl,
.ex figure {
	margin-bottom: 50px;
	}


@media print, screen and (min-width: 980px) {

	.ex01 dl {
		float: left;
		width: 290px;
		height: 610px;
		}
	.ex01 figure {
		float: right;
		width: 620px;
		height: 610px;
		}

	.ex02 dl {
		float: left;
		width: 290px;
		height: 290px;
		}
	.ex02 figure {
		float: right;
		width: 620px;
		height: 290px;
		}

	.ex03 dl {
		float: left;
		width: 290px;
		height: 610px;
		}
	.ex03 figure {
		float: right;
		width: 620px;
		height: 610px;
		}

	.ex04 dl {
		float: left;
		width: 290px;
		height: 870px;
		}
	.ex04 figure {
		float: right;
		width: 620px;
		height: 870px;
		}

	.ex05 dl {
		float: left;
		width: 290px;
		height: 532px;
		}
	.ex05 figure {
		float: right;
		width: 620px;
		height: 532px;
		}
}
@media screen and (max-width: 979px) {

	.ex05 dl,
	.ex04 dl,
	.ex03 dl,
	.ex01 dl,
	.ex02 dl {
		width: 100%;
		margin-bottom: 20px;
		}
	.ex05 figure,
	.ex04 figure,
	.ex03 figure,
	.ex01 figure,
	.ex02 figure {
		width: 100%;
		}

}

/* -------------
   金利組み換え
----------------*
/* hikaku */
	.hikaku h3 {
		border: #aea396 solid 1px;
		font-size: 22px;
		font-weight: normal;
		padding: 8px;
		margin: 0;
		text-align: center;
		}
	
	.hikakuL,
	.hikakuC,
	.hikakuR {
		float: left;
		}
	.hikakuL {
		width: 46%;
		}
	.hikakuC {
		width: 8%;
		padding: 8px 1% 0 1%;
		}
	.hikakuR {
		width: 46%;
		}
		
		.hikaku .table-bordered > tbody > tr >th,
		.hikaku .table-bordered > tbody > tr > td,
		.hikaku .table-bordered {
			border-color: #aea396 ;
			padding: 15px;
			font-weight: normal;
			}
			
		.table-responsive{
			border-color: #aea396 ;
			}

/* case (中古物件でも使用）*/

@media screen and (max-width: 767px) {
	.caseNo {
		font-size: 18px;
		padding-left: 25px;
		}
		.caseNo::after {
			position: absolute;
			content:"";
			top: 0;
			left: 0;
			width: 20px;
			height: 20px;
			background-color:#819d56;
			border-radius: 50%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			}
	.casedata {
		padding-left: 10px;
		padding-top: 10px;
		}
}
@media print, screen and (min-width: 768px) {
	.caseNo {
		position: absolute;
		top: 0;
		left: 0;
		width: 45px;
		height: 45px;
		background-color:#819d56;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		color: #fff;
		line-height: 45px;
		text-align: center;
		font-size: 18px;
		}
	.casedata {
		padding-left: 60px;
		}
}


/* -------------
   シロアリ駆除
----------------*/
.page-lead-shiroari {
	background: url(../img/shiroari/bg_lead.jpg) no-repeat center top;
	height: 217px;
	}
	@media screen and (max-width: 767px) {
		.page-lead-shiroari {
			height: 170px;
			background-size: auto 100%;;
			}
	}



/* -------------
   求人情報
----------------*/
.recruit-step ul {
	margin: 0 auto;
	text-align: left;
	}

	.recruit-step li {
		border: #d8d0ca solid 1px;
		}
		.recruit-step dt {
			width: 110px;
			float: left;
			font-weight: normal;
			}
	
		.recruit-step dd {
			float: right;
			text-align: left;
			line-height: 1.1em;
			}
		.recruit-step li.step03 dd {
			display: none; 
			}
	@media print, screen and (min-width: 980px) {
		.recruit-step li {
			display: inline-table;
			margin-right: 45px;
			position: relative;
			}
		.recruit-step li.step03 {
			margin-right: 0px;
			}
	
		.recruit-step dt {
			width: 110px;
			float: left;		
			}
	
		.recruit-step dd {
			float: right;
			text-align: left;
			line-height: 1.1em;
			}
		.recruit-step li.step01 dd {
			width: 260px;
			padding: 0.7em 0 0 1em;
			}
		.recruit-step li.step02 dd {
			width: 220px;
			padding: 1.2em 0 0 1.5em;
			}
		.recruit-step li.step03 dd {
			display: none; 
			}
		.recruit-step li.step02::after,
		.recruit-step li.step01::after {
			content: url(../img/common/arrowR3.gif);
			position: absolute;
			right: -40px;
			top: 40%;
			}
	}

	@media (max-width: 979px) {
		.recruit-step li {
			margin-bottom: 45px;
			position: relative;
			}
	
		.recruit-step li dd {
			width: 97.9%; /*IE9未満とかプレフィックス使ってもだめなブラウザやOS対応*/
			widht: -webkit-calc(100% - 110px);/*Chrome19~25対応*/
			width: -moz-calc(100% - 110px);/*Firefox4~15対応*/
			width: calc(100% - 110px);  
			padding: 1.2em 0 0 1.5em;
			}
		.recruit-step li.step02::after,
		.recruit-step li.step01::after {
			content: url(../img/common/arrowB3.gif);
			position: absolute;
			bottom: -40px;
			left: 49%;
			}
	}

	@media (max-width: 540px) {
		.recruit-step li.step01 dd {
			padding: 0.7em 0 0 1em;
			}
		.recruit-step li.step02 dd {
			padding: 1.2em 0 0 1.5em;
			}
	}



	.recruit-step dl {
		margin: 2px;
		height: 70px;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#d3ccc6');
		/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
		/*Element must have a height (not auto)*/
		/*All filters must be placed together*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#d3ccc6')";
		/*Element must have a height (not auto)*/
		/*All filters must be placed together*/
		background-image: -moz-linear-gradient(top, #ffffff, #d3ccc6);
		background-image: -ms-linear-gradient(top, #ffffff, #d3ccc6);
		background-image: -o-linear-gradient(top, #ffffff, #d3ccc6);
		background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#d3ccc6));
		background-image: -webkit-linear-gradient(top, #ffffff, #d3ccc6);
		background-image: linear-gradient(top, #ffffff, #d3ccc6);
		/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
		}

	.recruit-step dt {
		font-size: 1.8em;
		letter-spacing: 0.2em;
		padding: 0.3em 0;
		width: 110px;
		text-align: center;
		border-right: #d3c2b6 solid 2px;
		float: left;		
		}
	.recruit-step li:last-child dt {
		border-right: none;
		}
	.recruit-step dt span {
		display: inline-block;
		margin-top: 0.1em;
		margin-right: 0.3em;
		font-size: 1.1em;
		font-weight: normal;
		letter-spacing: -0.1em;
		}