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

*
{
	margin:0 ;
	padding:0 ;
		
	}

#wrapper{
	width:1000px;
	margin: 0 auto;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	margin-top:80px;
	
	
	}
	
/* ヘッダー・メニュー・フッター */

#header{
	width:auto;
	margin: 0 auto;	
	
	}
	
#nav ul {
	width:830px;
	margin: 0 auto;
	list-style:none;
	padding:10px;
	margin-top:10px;
	

	}
	
#nav li {
	float:left;
	padding-left:40px;
	padding-right:40px;
	border-right: 1px solid #666;
	font-size:15px; 
	}
	
#inner {
	width:850px;
	margin: 0 auto;	

	}
	
#footer{
	width:850px;
	margin: 0 auto;
	padding-bottom:20px;	

	}
	
#footer ul {
	width:650px;
	margin: 0 auto;
	list-style:none;
	padding:10px;
	font-size:12px;
	

	}
	
#footer li {
	float:left;
	padding-left:30px;
	padding-right:30px;
	border-right: 1px solid #666;
	 
	}

.box{
    position: relative;
	width:auto ;
	height:auto ;
}


	
	
/* リンク関連 */


a {
	color:#333 ;
	text-decoration: none;
	position: relative;
  	display: inline-block;

}

#footer ul a::after {
  position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

#footer ul a:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}


#nav ul a::after {
  position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

#nav ul a:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}

a :hover  {
	opacity: 0.5 ;
	
}




/* 共通パーツ */

/* 文字サイズ・文字種類*/

.min{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif ;
}


.fs9{
	font-size: 9px;
	}
	
.fs10{
	font-size:10px;
}

.fs12{
	font-size:12px;
}

.fs13{
	font-size:13px;
}


.fs11{
	font-size:11px;
}


.fs16{
	font-size:16px;
	}
	
.fs17{
	font-size:17px;
}


.fs19{
	font-size:19px;
}

.fs21{
	font-size:21px;
}



.fs23{
	font-size:23px;
}

.fs30 {
	font-size:30px;
}


/* margin関連*/

.mar-t15{
	margin-top:15px;
}

.mar-t20{
	margin-top:20px;
}

.mar-t25{
	margin-top:25px;
}

.mar-t30{
	margin-top:30px;
}


.mar-t35{
	margin-top:35px;
}


.mar-t40{
	margin-top:40px;
}

.mar-b5 {
	margin-bottom:5px;
}

.mar-b10 {
	margin-bottom:10px;
}


.marb-20{
	margin-bottom:15px;
	}

.marb-50 {
	margin-bottom:50px;
}
	
.marb-100 {
	margin-bottom:100px;
}


.mar-r10{
	margin-right:10px;
}

.mar-30{
	margin:30px;
}


/* padding関連*/

.pd-l10{
	padding-left:10px;
}

.pd50{
	padding:50px !important; 
}



/* width関連*/


.w-37 {
	width:37%;
}

.w-43{
	width:43% ;
}

.w-45{
	width:45% ;
}

.w-40{
	width:40% ;
}


.w-48{
	width:48% ;
}


.w-62{
	width:62%;
	}

.w-80 {
	width:80%;
}

.w-90{
	width:90%;
}


/* height関連*/
	
.h-311 {
	height:311px;
}

.h-293 {
	height:293px;
}

.h-394{
	height:394px;
}


/* 位置関連*/


.text-c {
	text-align:center;
	}
	
.text-r{
	text-align:right;
}

	
.fl-l{
	float:left;
	}
	
.fl-r{
	float:right;
	}

.clear{
	clear:both
	}
		
/* border関連*/	


.bo-l {
	border-left: 1px solid #666;
	
	}

.bo-bo-line{
	border-bottom: dotted 1px #999;
	}

.bo-so-line{
	border-bottom: solid 1px #999;
	}
	
/* line-height関連*/

.lin-h24{
	line-height:2.4em;
	}

.lin-h15{
	line-height:1.6em;
	}


.lin-h32 {
	line-height:3.2em;
}	


/* そのほか */

.mainimg{
	display:block;
	max-width: 100%;
    height: auto;
	margin-bottom:10px;
	
	
	}

.background_process {
  width: 100%;
  height: 0;
  padding-top: calc(500 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img/asink_designstudio_img_PROCESS.png) center center / cover no-repeat;
}

.background_qa {
  width: 100%;
  height: 0;
  padding-top: calc(500 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img/asink_designstudio_img_QA.png) center center / cover no-repeat;
}


.background_works{
  width: 100%;
  height: 0;
  padding-top: calc(500 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img/asink_designstudio_img_works.png) center center / cover no-repeat;
}

.background_concept{
  width: 100%;
  height: 0;
  padding-top: calc(500 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img/asink_designstudio_img_concept.png)  center center / cover no-repeat;
}

.background_contact{
  width: 100%;
  height: 0;
  padding-top: calc(500 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(img/asink_designstudio_img_contact.png)  center center / cover no-repeat;
}

	
.pc{
	display: block;
	}
	
.sp{
	display: none;
	}

.bold {
	font-weight:bold;
}


.red {
	color:#F00;
}

h3 {
	font-weight:100;
}


/* 各ページCSS */


/* 業務内容・実績 */

	
.works{
	font-size: 22px;
	color:#505050;
	text-align:center;
	font-weight:100 ;
	padding:10px;
}



.bg-gray{
	background:#EFEFEF;
	padding:10px;
}

.worksbox  {
	margin-bottom:20px;
}


.worksbox ul {
	font-size:15px;
}



.worksbox li{
	padding:5px 5px 5px 0px;
	margin-left:50px;
}

.h3-bk {
	background-color:#EFEFEF;
	border-left:#333 10px solid;
	font-size:24px;
	font-weight:200 ;
	padding:10px;
	margin-bottom:20px;
}



.worksbox2 {
	border: solid #666 1px;
	text-align:center;
	line-height:1.2em;
	padding:10px;
}





/* 制作工程 */

.content_process{
	width:700px;
	margin: 0 auto;
}



/* よくある質問 */


.answer {
	padding-top:10px;
	padding-bottom:10px;
}

/* コンタクト */

.form-text{ 
width:97%;
font-size:1.4em;
font-weight:bold; 
border:1px solid #ccc;
padding: 10px;
color: #000;
background:#f5f5f5;
margin-bottom:20px;

}


.form-text2{ 
width:97%;
font-size:1em;
border:1px solid #ccc;
padding: 5px;
color: #000;
background:#f5f5f5;
margin-bottom:20px;
padding:20px;
}


.form-submit{
margin-top:1em;
width:100%;
padding:20px;
font-size:1.6em;
border:1px solid #989898;
border-radius: 5px;
-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
-moz-border-radius: 5px;
color:#fff;
background: #989898; /* for non-css3 browsers */
box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);}
.form-submit:hover{
background: #494949; /* for non-css3 browsers */
}



#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}






	
	
@media only screen and (max-width: 1000px)

{
	
img {
max-width: 100%;
height: auto;
}
	
#wrapper {
	width:auto;
	padding:10px;
}

#inner {
	width:auto;

	}

#footer{
	width:auto;
	}

.sp{
	display: block;
	}
	
.pc{
	display: none;
	}
	
.under{
	border-bottom: dotted 1px #999;
	}

.w-62 {
	width:auto;
}

.fl-l , .fl-r{
	float:none;
}

.text-csp {
	text-align:center;
}


.mar-t35 , .mar-t15 , .mar-t25 , .mar-t30 , .mar-r10 {
	margin:10px;
	text-align:center;
}

.mainimg {
	margin-top:80px;
}

.logo{
	margin:10px;
}

.fl-lsp{
	float:left;
}

.w-75{
	width:75%;
}

.mar-r10sp{
	margin-right:10px;
}




header {
    position:fixed;
    width:100%;
    height:61px;
	padding:5px;
    top:0;
    left:0;
    background:#FFF;
    border-bottom:1px solid #000;
    z-index:100;
}
.spmenu_btn {
    display:block;
    position:absolute;
    top:25px;
    right:30px;
    width:30px;
    height:22px;
    background:#000;
    border-top:10px solid #fff;
    border-bottom:10px solid #fff;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.spmenu_btn:before {
    content:'';
    position:absolute;
    width:30px;
    height:2px;
    background:#000;
    top:-9px;
    right:0;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.spmenu_btn:after {
    content:'';
    position:absolute;
    width:30px;
    height:2px;
    background:#000;
    bottom:-9px;
    right:0;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.spmenu_btn.active {
    background:#FFF;
}
.spmenu_btn.active:before {
    -moz-transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
    transform:rotate(-135deg);
    top:0;
    right:0;
}
.spmenu_btn.active:after {
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
    bottom:0;
    right:0;
}
 
.spmenu {
    display:none;
    position:absolute;
    top:51px;
    left:0;
    width:100%;
    background:#000;
}
nav {
    display:block;
    width:100%;
    margin:0 auto;
}
nav li a {
    display:block;
    width:100%;
    color:#FFF;
    padding:15px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:relative;
    border-bottom:1px solid #999;
}

ul li{
	float:none;
}

ul{
	padding:0px;
}


.w-37 , .w-48 , .content_process , .w-80 , .w-90 , .background_process , .background_qa  ,  .background_works , .background_concept , .background_contact , .w-43 {
	width:auto ;
}


.h-311 , .h-293 , .h-300 , .h-394  {
	height:auto ;
}

.worksbox li {
	margin-left:30px;
}

.text-lsp {
	text-align:left;
}

#formWrap {
    width: auto !important;

}

.form-text2 , .form-text {
	width:95% ;
}



.bo-l {
    border-left: none;
}

	}