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


/* =============== 背景画像ボックス指定 =============== */

/* ===== 背景画像ボックス共通仕様 ===== */

div#image_box{/* トップページの最初の背景表示用のボックス */
	width:100%;
	height:auto;
	overflow:hidden;
	/*padding:72px 0 0; #header_boxの高さ＋アキを逃げる。小画面用 */
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center 0;
	}
	
/* ===== ページ毎イメージ :: Process=納品までの流れ ===== */
body#proces div#image_box{
	background-image:url(../img/proces_bg_top_01sml_1x.jpg);
	}

/* ===== 小画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
	box-sizing:border-box;
	width:100%;/* 400px */
	height:auto;
	margin:48px auto 384px;
}
section.main_copy div.hdgroup{
	padding-left:5%;
}

/* ===== 小画面用：各背景画像ボックスの指定 ===== */

/* paralaxの為のセクションごとのボックス。上から#bg_01〜 */
#bg_01,#bg_02,#bg_03,#bg_04,#bg_05,#bg_06{
	box-sizing:border-box;
	width:100%;
	height:auto;
}
#bg_01{
  background:url(../img/bg_01.jpg) repeat scroll center 0; 
}
#bg_02{
  background:url(../img/bg_02.jpg) repeat scroll center 0; 
}
#bg_03{
  background:url(../img/bg_01.jpg) repeat scroll center 0;
}
#bg_04{
  background:url(../img/bg_02.jpg) repeat scroll center 0; 
}
#bg_05{
  background:url(../img/bg_01.jpg) repeat scroll center 0;
}
#bg_06{
  background:url(../img/bg_02.jpg) repeat scroll center 0; 
}
#bg_07{
  background:url(../img/bg_01.jpg) repeat scroll center 0; 
}


.content_box{
	margin-bottom:24px;
}
.content_box p{
	margin-bottom:24px;
	overflow:hidden;
}


div#bg_01 ul.item_list li section a:link,
div#bg_01 ul.item_list li section a:visited{
  color:#555; /* サイトによって標準色を設定のこと */  
}

/*a:hover{
  color:#555;
}*/



i{
	display:block;
	width:100%;
	margin:0 auto 12px;
	text-align:center;
	font-size:300%;
	color:#06787e;
}
h3.prof_h3{
	font-size:125%;/* 20px 行間を開けるため24pxより小さく設定 */
      line-height:1.2;/* 行間でピッチを修正 1L=24px */
	  margin-top:12px;/* このページだけの指定 */
	  margin-bottom:12px;
	  padding-bottom:6px;
}
h4.pros_h4{
	font-size:118.75%;/* 18px 行間を開けるため24pxより小さく設定 */
      line-height:1.33333333;/* 1L=24px */
	color:#ec781e;
	margin-bottom:12px;
}
/*p.pros_1{
	float:left;
}*/
h4.pros_h4 no_bottom{
	margin-bottom:12px;
}

/* ===== 小画面用記事中イラスト周りの指定 =====*/

figure.pros_01{
	width:100%;
}
figure.pros_01 img{
	display:block;
	width:60%;
	margin:0 auto 0;
}


figure.pros_02{
	width:100%;
	margin-bottom:24px;
}
figure.pros_02 img{
	display:block;
	width:100%;
	margin:0 auto;
}


figure.pros_03{
	width:100%;
}
figure.pros_03 img{
	display:block;
	width:70%;
	margin:0 auto 24px;
}

figure.pros_04{
	width:100%;
}
figure.pros_04 img{
	display:block;
	width:70%;
	margin:0 auto;
}

figure.pros_05{
	width:100%;
}
figure.pros_05 img{
	display:block;
	width:70%;
	margin:0 auto;
}

figure.pros_06{
	width:100%;
}
figure.pros_06 img{
	display:block;
	width:95%;
	margin:0 auto 24px;
}

.content_box p.pros_7{
	margin-bottom:0;
	overflow:hidden;
}
figure.pros_07{
	width:100%;
}
figure.pros_07 img{
	display:block;
	width:80%;
	margin:0 auto;
}









span.notice{
	color:#fa4b55;
	font-weight:500;
	display:block;
	margin-bottom:12px;
}

span.notice a{
	text-decoration:underline;
}
span.notice a:link,
span.notice a:visited{
	color:#fa4b55;
}
span.notice a:hover{
	color:#99cc33;
}



@media screen and (min-width:760px){

/* ===== ページ毎イメージ中画面用 :: kdwr=こだわり ===== */
body#proces div#image_box{
	background-color:#c1bdab;
	background-image:url(../img/proces_bg_top_02mdl_1x.jpg);
	}
	
	/* ===== 中画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
	width:400px;
	margin:96px auto 72px;
}
section.main_copy div.hdgroup{
	padding-left:5%;
}

.content_box p{
	margin-bottom:24px;
}



/* ===== 中画面用記事中イラスト周りの指定 =====*/

figure.pros_01{
	width:38%;
	float:right;
}
figure.pros_01 img{
	display:block;
	width:100%;
	margin:0;
}
p.pros_1{
	overflow:visible;
}

figure.pros_02{
	width:100%;
}
figure.pros_02 img{
	display:block;
	width:80%;
	margin:0 auto;
}


figure.pros_03{
	width:100%;
}
figure.pros_03 img{
	display:block;
	width:45%;
	margin:0 auto;
}
p.pros_3{
	margin:0;
}

figure.pros_04{
	width:auto;
}
figure.pros_04 img{
	display:block;
	width:40%;
	float:right;
}
p.pros_4{
	overflow:visible;
}

figure.pros_05{
	width:auto;
}
figure.pros_05 img{
	display:block;
	width:40%;
	float:left;
}
p.pros_5{
	overflow:visible;
}

figure.pros_06{
	width:100%;
}
figure.pros_06 img{
	display:block;
	width:80%;
	margin:0 auto;
}

.content_box p.pros_7{
	margin-bottom:0;
	overflow:hidden;
}
figure.pros_07{
	width:100%;
}
figure.pros_07 img{
	display:block;
	width:45%;
	margin:0 auto;
}



}

@media screen and (min-width:1024px){
	
/* ===== ページ毎イメージ大画面用 :: kdwr=こだわり ===== */
body#proces div#image_box{
	background-color:#c1bdab;
	background-image:url(../img/proces_bg_top_03lag_1x.jpg);
	}
	
	/* ===== PC画面用キャッチフレーズ周りの指定 =====*/

section.main_copy{
	width:400px;
	margin:96px auto 136px;
}
section.main_copy div.hdgroup{
	padding-left:5%;
}



h3.prof_h3{
	font-size:156.25%;/* 25px 行間を詰めるため40pxより小さく設定 */
      line-height:1.92;/* 行間でピッチを修正 1L=48px */
	  margin-top:12px;/* このページだけの指定 */
	  margin-bottom:12px;
	  padding-bottom:6px;
}
h4.pros_h4{
	 font-size:125%;/* 20px 行間を開けるため24pxより小さく設定 */ 
      line-height:1.2;/* 行間でピッチを修正 1L=24px */
	color:#ec781e;
	margin-bottom:12px;
}
/*p.pros_1{
	float:left;
}*/
h4.pros_h4 no_bottom{
	margin-bottom:12px;
}

/* ===== PC画面用キャッチフレーズ周りの指定 =====*/

figure.pros_01{
	width:40%;
	float:right;
}

figure.pros_02{
	width:100%;
}
figure.pros_02 img{
	display:block;
	width:80%;
	margin:0 auto;
}


}