@charset "utf-8";

/************************************************
 共通設定
************************************************ */

html {
font-size: 62.5%;
}

body {
    color: #666;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    background-color: #FFF;
    font-size: 72.5%;
    line-height: 150%;
    letter-spacing: 0.1em;
}



/* コンテナ枠 */
#container {
    margin: 0 auto;
margin-bottom: 178px;
    padding: 0 0px;
    max-width: 950px;
    background: #fff;
    text-align: left;
}




.b_color01{
 background-color:#dcdcdc;
 height: 20px;  
}

.b_color02{
 background-color:#e4e4e4;
 height: 20px;  
}

.b_color03{
 background-color:#f6f6f6;
 height: 20px;  
}



/* ==============================================
 ユーティリティ
=============================================== */
/* フロート回り込み解除
----------------------------------------------- */
.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    line-height: 0px;
    visibility: hidden;
    content: ".";
}
.clearfix {
    display: block; /* for IE8 */
}
.clear {
    clear: both;
}

/* リンク指定
----------------------------------------------- */
a:link,
a:visited {
    color: #39c;
    text-decoration: none;
}
a:link:hover,
a[href]:hover {
	color: #0000FF;
	text-decoration: underline;
}

/* 画像リンク *********/

a img {
    transition: 1s;
}

a:hover img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

/* 見出し、フォント関連
----------------------------------------------- */
h1,
h2,
h3,
h4,
h5 {
    font-size: 100%;
    line-height: 150%;
}

.font10 {
font-size: 10px;
}

.font11 {
font-size: 11px;
}

.font12 {
font-size: 12px;
}

.font13 {
font-size: 13px;
}

.font14 {
font-size: 14px;
}

.font15 {
font-size: 15px;
}

.font16 {
font-size: 16px;
}

.font17 {
font-size: 17px;
}

.font18 {
font-size: 18px;
}

.font19 {
font-size: 19px;
}

.font20 {
font-size: 20px;
}

.red {
color: #FF0000;
}

.blue {
color: blue;
}

/*************************************************************
【marginの設定】
*************************************************************/
.m0{margin:0 !important} /* margin 0px を指定するクラス */
.mt0{margin-top:0 !important}	 /* margin-top0px を指定するクラス */
.mr0{margin-right:0 !important}	 /* margin-right0px を指定するクラス*/
.mb0{margin-bottom:0 !important}	/* margin-bottom0px を指定するクラス*/
.ml0{margin-left:0 !important}	 /* margin-left0px を指定するクラス*/

.m5{margin:5px !important}
.mt5{margin-top:5px !important}
.mr5{margin-right:5px !important}
.mb5{margin-bottom:5px !important}
.ml5{margin-left:5px !important}

.m10{margin:10px !important}
.mt10{margin-top:10px !important}
.mr10{margin-right:10px !important}
.mb10{margin-bottom:10px !important}
.ml10{margin-left:10px !important}

.m15{margin:15px !important}
.mt15{margin-top:15px !important}
.mr15{margin-right:15px !important}
.mb15{margin-bottom:15px !important}
.ml15{margin-left:15px !important}

.m20{margin:20px !important}
.mt20{margin-top:20px !important}
.mr20{margin-right:20px !important}
.mb20{margin-bottom:20px !important}
.ml20{margin-left:20px !important}

.m25{margin:25px !important}
.mt25{margin-top:25px !important}
.mr25{margin-right:25px !important}
.mb25{margin-bottom:25px !important}
.ml25{margin-left:25px !important}

.m30{margin:30px !important}
.mt30{margin-top:30px !important}
.mr30{margin-right:30px !important}
.mb30{margin-bottom:30px !important}
.ml30{margin-left:30px !important}

.m35{margin:35px !important}
.mt35{margin-top:35px !important}
.mr35{margin-right:35px !important}
.mb35{margin-bottom:35px !important}
.ml35{margin-left:35px !important}

.m40{margin:40px !important}
.mt40{margin-top:40px !important}
.mr40{margin-right:40px !important}
.mb40{margin-bottom:40px !important}
.ml40{margin-left:40px !important}

.m45{margin:45px !important}
.mt45{margin-top:45px !important}
.mr45{margin-right:45px !important}
.mb45{margin-bottom:45px !important}
.ml45{margin-left:45px !important}

.m50{margin:50px !important}
.mt50{margin-top:50px !important}
.mr50{margin-right:50px !important}
.mb50{margin-bottom:50px !important}
.ml50{margin-left:50px !important}

.m55{margin:55px !important}
.mt55{margin-top:55px !important}
.mr55{margin-right:55px !important}
.mb55{margin-bottom:55px !important}

.ml55{margin-left:55px !important}
.m60{margin:60px !important}
.mt60{margin-top:60px !important}
.mr60{margin-right:60px !important}
.mb60{margin-bottom:60px !important}
.ml60{margin-left:60px !important}

.m65{margin:65px !important}
.mt65{margin-top:65px !important}
.mr65{margin-right:65px !important}
.mb65{margin-bottom:65px !important}
.ml65{margin-left:65px !important}

.m70{margin:70px !important}
.mr70{margin-right:70px !important}
.mb70{margin-bottom:70px !important}
.ml70{margin-left:70px !important}

.m75{margin:75px !important}
.mt75{margin-top:75px !important}
.mr75{margin-right:75px !important}
.mb75{margin-bottom:75px !important}
.ml75{margin-left:75px !important}

.m80{margin:80px !important}
.mt80{margin-top:80px !important}
.mr80{margin-right:80px !important}
.mb80{margin-bottom:80px !important}
.ml80{margin-left:80px !important}

.m90{margin:90px !important}
.mt90{margin-top:90px !important}
.mr90{margin-right:90px !important}
.mb90{margin-bottom:90px !important}
.ml90{margin-left:90px !important}

.m100{margin:10px !important}
.mt100{margin-top:100px !important}
.mr100{margin-right:100px !important}
.mb100{margin-bottom:100px !important}
.ml100{margin-left:100px !important}

/**************************************************************
【paddingの設定】
**************************************************************/
.p0{padding:0 !important}			/* padding-0px を指定するクラス */
.pt0{padding-top:0 !important}	 /* padding-top0px を指定するクラス */
.pr0{padding-right:0 !important}	/* padding-right0px を指定するクラス */
.pb0{padding-bottom:0 !important}	/* padding-bottom0px を指定するクラス */
.pl0{padding-left:0 !important}	 /* padding-left0px を指定するクラス */

.p5{padding:5px !important}
.pt5{padding-top:5px !important}
.pr5{padding-right:5px !important}
.pb5{padding-bottom:5px !important}
.pl5{padding-left:5px !important}

.p10{padding:10px !important}
.pt10{padding-top:10px !important}
.pr10{padding-right:10px !important}
.pb10{padding-bottom:10px !important}
.pl10{padding-left:10px !important}


/* 行揃え
----------------------------------------------- */
.alignC {
    text-align: center;
}
.alignR {
    text-align: right;
}
.alignL {
    text-align: left;
}


/* フォーム関連
----------------------------------------------- */
select {
    border: solid 1px #ccc;
}
input[type='text'],
input[type='password'] {
    border: solid 1px #ccc;
    padding: 2px;
}

/* boxピクセル指定 ********************************/

.box40 {
    width: 40px;
}
.box60 {
    width: 60px;
}
.box100 {
    width: 100px;
}
.box120 {
    width: 120px;
}
.box140 {
    width: 140px;
}
.box145 {
    width: 145px;
}
.box150 {
    width: 150px;
}
.box240 {
    width: 240px;
}
.box300 {
    width: 300px;
}
.box320 {
    width: 320px;
}
.box350 {
    width: 350px;
}
.box380 {
    width: 380px;
}

/* パーセント指定 ********************************/

.grid10 {
    width: 10%;
}
.grid20 {
    width: 20%;
}
.grid30 {
    width: 30%;
}
.grid40 {
    width: 40%;
}
.grid50 {
    width: 50%;
}
.grid60 {
    width: 60%;
}
.grid70 {
    width: 70%;
}
.grid80 {
    width: 80%;
}
.grid90 {
    width: 90%;
}
.grid100 {
    width: 100%;
}


/**************************************************************
  css start
**************************************************************/




img{
 width: 100%;
    height: auto;
vertical-align:top;
}

#header_wrap {
    margin: 0 auto;
    max-width: 950px;
text-align: center;
}

.h_blank{
    height: 10px;
}

.h_logo{
float: left;
max-width:68.4%;
height:auto;
}

.h_con{
float: right;
max-width:31.6%;
height:auto;
}

#footer_wrap {
	display: block;
    bottom: 0;
    width: 100%;
height: 400px;
background-color: #CCC;
}

.footer_area{
margin-left: auto;
margin-right: auto;
-moz-box-sizing: border-box;
   box-sizing: border-box;
   background-size:contain;
height: 400px;
max-width: 950px;
}

.f_mail{
position: absolute;
top: 37.2%;
right: 24%;
width: 27.1%;
background-color: #CCC;
}

.order{
position: relative;
margin-left: auto;
margin-right: auto;
-moz-box-sizing: border-box;
    box-sizing: border-box;
    background-size:contain;
height: ;
background-color: #CCC;
}

.order_mail{
position: absolute;
top: 49%;
right: 10%;
width: 35%;
background-color: #CCC;
}


.f_logo{
float: left;
max-width:40%;
margin-top : 70px ;
margin-left : 70px ;
height:auto;
}


.f_company{
float: right;
max-width:60%;
margin-top  : 70px ;
margin-right : 130px ;
height:auto;
font-color: #FFF;
}





@media screen and (max-width:480px) {
.footer_area{
height: 400px;
}

#footer_wrap {
		display: block;
    width: 100%;
background-color: #CCC;
	height: 400px;
}

.f_logo{
	float: left;
max-width: 50%;
margin-top: 5%;
margin-left: 25%;
}


.f_company{
	float: left;
max-width: 80%;
margin: 10%;
margin-left: 15%;
font-color: #FFF;
}



}





@media screen and (min-width:480px) and (max-width:767px) {
.footer_area{
height: 250px;
}

#footer_wrap {
		display: block;
	  bottom: 0;
    width: 100%;
background-color: #CCC;
	height: 250px;
}

.f_logo{
float: left;
max-width: 30%;
margin: 5%;
}


.f_company{
float: right;
max-width: 50%;
margin: 5%;
height: auto;
font-color: #FFF;
font-size: 7px;
}

.f_mail{
width: 24%;
right: 26%;
}

 .order{
height: ;
 }
}

  @media screen and (min-width:768px) and (max-width:1200px) {
.footer_area{
height: 0px;
}


#footer_wrap {
	display: block;
	height: 300px;
	 bottom: 0;
    width: 100%;
background-color: #CCC;
}

.f_logo{
float: left;
max-width: 35%;
margin-top : 70px;
margin-left: 15%;
}


.f_company{
float: right;
max-width: 55%;
margin-top  : 70px;
margin-right : 15%;
font-color: #FFF;
}

.f_mail{
width: 24%;
right: 26%;
}


.order{
height: ;
}
}