/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	background:transparent;
}
body {
	line-height:1;
	min-width: 1100px;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}

.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

img, object, embed, video {
	max-width: 100%;
}

		
		/*スタイルシート
	*******************************************/

	/*グローバルナビ
	*******************************************/
	
	#header {
		background-color:#123c3f;		
	}

	.airBox{
		width:1000px;
		margin:0 auto;
	}

	nav{
		float:right;
		width:461px;
	}

	h1{
		width:100px;
		float: left;
		padding-top:12px;
	}

	/*#header h1 a.backwhite{
		background-image:url(../img/common/header/logo.png);
		z-index: 9999;
		display: block;
	}*/

	#header h1 a:hover.backwhite img{
		opacity:0.75;
		filter: alpha(opacity=75);
	}

	#header h1 a.backwhite img{
		transition:all 0.3s ease;
	}
	

	li{		
		float: left; 
		text-align: center;
	}

	li a{		
		display: block;
	}

	li.home{
		width:60px;
		padding-right:40px;
	}
	
	li.about{
		width:57px;
		padding-right:40px;
		
	}
	
	li.work{
		width:55px;
		padding-right:40px;
	}

	li.blog{
		width:46px;
		padding-right:40px;
	}
	
	li.contact{
		width:83px;
	}

	li a img.responsive{
		display: none;
	}






	/*#change*/
	#change{
		background-color:#123c3f;
		position: fixed;
  		top: 0px;
  		left: 0px;
		width: 100%;
		display: none;
		z-index: 9999;
		opacity: 0.9;
	}


	#change .airBox{
		width:1000px;
		margin:0 auto;
	}

	#change nav{
		float:right;
		width:461px;
	}

	#change h1{
		width: 54px;
		height: 54px;
		float: left;
		padding: 6px 0 4px!important;
	}

	#change h1 img{
		width: 100%;
		height: auto;
	}

	/*#header h1 a.backwhite{
		background-image:url(../img/common/header/logo.png);
		z-index: 9999;
		display: block;
	}*/

	#change h1 a:hover.backwhite img{
		opacity:0.75;
		filter: alpha(opacity=75);
	}

	#change h1 a.backwhite img{
		transition:all 0.3s ease;
	}
	

	#change li{		
		float: left; 
		text-align: center;
	}

	#change li a{		
		display: block;
	}

	#change li a img{		
		height: 60px;
		overflow: hidden;
	}

	#change li.home{
		width:60px;
		padding-right:40px;
	}
	
	#change li.about{
		width:57px;
		padding-right:40px;
		
	}
	
	#change li.work{
		width:55px;
		padding-right:40px;
	}

	#change li.blog{
		width:46px;
		padding-right:40px;
	}
	
	#change li.contact{
		width:83px;
	}

	#change li a img.responsive{
		display: none;
	}

	


	
	/*メインビジュアル
	*******************************************/
	.mainVisual{
		background-image:url(../img/common/top/Mainvisual.png);
		-webkit-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
		background-position: center;
		padding-top: 10px;
		padding-bottom: 40px;
	}
	

	.welcome{
		text-align: center;
		vertical-align: middle;
		padding-top: 210px;
		padding-bottom: 210px;
	}


	section.about{
		background: #f7f6f5;
	}

	.reedMore a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	.send img:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}
	
	.open img:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	section.work a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}





	/*アバウトabout
	*******************************************/

	.aboutBox{
		width:1000px;
		margin:0 auto;		
	}

	.aboutAirBox{
		padding:116px;
	}


	h2{
		text-align: center;
		padding-top:105px;
		clear:both;
	}

	.profilePhoto{
		float:left;
		padding-top:113px;
	}

	.aboutPhoto{
		float:left;
		padding-top:118px;
	}
	
	.profile{
		width:730px;
		float:right;
		font-size: 14px;
		padding-top:85px;
		line-height: 30px;
	}

	.reedMore{
		text-align: center;
		padding-top: 80px;
		padding-bottom: 40px;
		clear:both;
	}

	.send{
		text-align: center;
		padding-bottom: 40px;
		padding-top: 0!important;
		clear:both;
	}

	a.disable{
		opacity: 1.0!important;
		filter: alpha(opacity=100);
		cursor: default;
	}





	/*ワークwork
	*******************************************/

	section.work{
		background: #f3f2f1;
	}

	.workBox{
		width:1041px;
		margin:0 auto;
	}

	.workttlbottom{
		padding-bottom: 48px;
	}


	.picture{
		margin: 40px 20px 0 20px;
		float:left;
		height: 230px;
		overflow: hidden;
		display: block;
		width: 307px;
	}	
	
	.open{
	     cursor: pointer;	     	
	}
	
	#slideBox{
		 background:#f3f2f1;	    
	     width: 1041px;
	     margin: 0 auto;
	     display: none;
	     padding-top: 40px;
	}

	.picture img{
		width: 100%;
		height: auto;		
	}

	.underaccordion{
		margin: 0 20px 40px 20px;
	}
	
	



	/*ブログblog
	*******************************************/

	section.blog{
		background: #f7f6f5;
	}

	.blogBox{
		width:1041px;
		margin:0 auto;
	}

	.blogBox .blogArticle .blogPicture{
		width:307px;
		height: 200px;
	}
	

	.blogArticle{	
		width:307px;
		height: 384px;
		margin:85px 20px 0 20px;
		float:left;
	}	
	

	h3{
		line-height: 28px;
		font-size:18px;
		padding:20px 0;
		height: 48px;
	}

	.blogText1{
		line-height: 24px;
		font-size:12px;
	}
	
	.blogPicture{
		height: 200px;
		overflow: hidden;
		display: block;
	}

	.blogPicture a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	.blogPicture img{ 
		width:100%;
		height:auto;
	}

	.continu{
		line-height: 24px;
		font-size: 14px;
	}

	.continu{
		color: #33cccc;
	}

	.continu:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}





	/*コンタクトcontact	
	*******************************************/
		
	section.contact{
		background: #f3f2f1;
	}

	.contactBox{
		width:1000px;
		margin:0 auto;
	}
	
	.sendMe{
		text-align:center;
		padding-top:80px;
		padding-bottom:40px;
	}

	.mfp_phase{	
		width:594px;
		margin:0px auto;
	}

	.mailform{
		margin:9px;
	}

	.form{
		width:457px;
		height:41px;
		margin:0;padding:0;
		background: #f6fafa;
		border: 0px solid;
		font-size:20px;
	}

	.Message{
		height:248px;
	}

	.zzz{	
		float:left;
	}
	
	.clearboth{
		clear:both;
	}

	#mailfield dl{
		border: 1px solid #eaeaea;
	}

	#mailfield dt{
		border-right: 1px solid #eaeaea;
	}

	.responsiveon{
		display: none;		
	}

	
	p.submit input{
		background: url(../img/common/top/sendmessage.png) left top no-repeat;
		width: 227px;
		height: 63px!important;
		border: 0px;
		cursor: pointer;
		text-indent: -9999px;
		display: block;
		margin: 80px auto 40px;
	}

	p.submit input:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}
	

	p.messagearea textarea{
		width: 534px;
		height: 204px;
		margin: 0 auto 3px;
		border: 1px solid #eaeaea;
		background-color: #f6fafa;
		display: block;
		font-size: 18px;
		padding: 8px 8px;
	}
	
	div.mesa{
		width: 111.5px;
		height: 24px;
		background: url(../img/common/top/message.png);
		background-position: 7.5px 0;
		background-repeat: no-repeat;
		margin: 14px 0 2px 14px;
	}


	p.emailadress input{
		width: 534px;
		height: 38px;
		margin: 0 auto 3px;
		border: 1px solid #eaeaea;
		background-color: #f6fafa;
		display: block;
		font-size: 18px;
		padding: 0 8px;
	}

	div.emailadressimg{
		width: 91.5px;
		height: 23px;
		background: url(../img/common/top/email.png);
		background-position: 7.5px 0;
		background-repeat: no-repeat;
		margin: 14px 0 2px 14px;
	}

	p.onamae input{
		width: 534px;
		height: 38px;
		margin: 0 auto 3px;
		border: 1px solid #eaeaea;
		background-color: #f6fafa;
		display: block;
		font-size: 18px;
		padding:0 8px;
	}

	div.onamaeimg{
		width: 93px;
		height: 25px;
		background: url(../img/common/top/name.png);
		background-position: 7.5px 0;
		background-repeat: no-repeat;
		margin: 0 0 4px 14px;
	}


	.screen-reader-response{
		text-align: center;
		padding-bottom: 30px;
		font-size: 18px;
		font-family: 'ヒラギノ角ゴ Pro W3';
	}

	.screen-reader-response li{
		display: none;
	}

	.wpcf7-not-valid-tip{
		padding-left: 23px;
		margin-top: 3px;
	}

	.wpcf7-response-output{
		display: none;
	}






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

	/*ブログページ
	*******************************************/

	.hederDown{
		background:#33cccc;			
	}

	.hederDownAir{
		width:1000px;
		margin:0 auto;
	}
	
	.hederDownAirblogcate{
		width:1000px;
		margin:0 auto;
		margin-bottom: 80px;
	}

	.hederDownAir h2{
		padding:44px 0;
		text-align:center;
	}
	
	.blogBoxPage{
		width:1040px;
		margin:0 auto;
	}
	
	.blogArticlePage{
		width:480px;
		height: 524px;
		margin:0px 20px 100px 20px;
		float:left;
	}

	.blogArticlePage h3{
		font-size: 20px;
		padding: 25px 0 20px 0!important;
		width: 480px;
		height: auto!important;
	}

	.blogText1Page{
		width: 474px;
		font-size:14px;
		line-height:26px;
		position: relative;
	}

	.pager{
		padding-top:75px;
		text-align: center;
	}

	.pagerNumber{
		padding-top:16px;
		padding-bottom:80px;
		text-align: center;
	}
	

	.footer{
		display: block;
		text-align: center;
		padding-top:40px;
		padding-bottom:50px;
		font-size:14px;
		color:#33cccc;
		background-color: #F3F2F1;	
	}


	.responfooter{
		display: none;	
	}

	.blogFooter{
		background-color:#f6f6ee;
	}

	.blogPicturepage{
		width: 480px;		
		height: 319px;
		overflow: hidden;　
		display: block;	
	}

	.blogPicturepagesingle{
		width: 1000px;		
		height: 576px;
		overflow: hidden;　
		display: block;	
	}

	.blogPicturepage a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	.blogPicturepage img{
		width:100%;
		height:auto;
	}

	.blogPicturepagesingle img{
		width:100%;
		height:auto;
	}
		
	/********************************************/
	/********************************************/










	/*ブログページ記事
	*******************************************/
	
	.gleanDown h3{
		font-size:18px;
		text-align: center;
		padding-top: 80px;
		padding-bottom: 60px;
	}

	.blogPageDown{
		padding-bottom: 40px;
		background-color:#f6f6ee;
	}
	
	.blogBoxPageDown{
		background-color:#fff;
		width:1000px;
		margin:0 auto;	
	}

	.blogText2PageAbove{
		width:730px;
		margin:0 auto;
	}
	
	.blogText2PageTop{
		padding-top:57px;	
		font-size:16px;
		padding-bottom:30px;
		line-height: 32px;
	}

	.time{
		font-size:12px;
		color:#232323;
		padding-bottom:20px;
		font-weight: bold;
	}

	.icon{
		padding-bottom:61px;
	}
	
	.facebook{
		margin-right:17px;
	}

	.twitter{
		margin-right:17px;
	}
	
	.evernote{
		margin-right:17px;
	}

	.gogle{
		margin-right:17px;
	}
	
	.articleVeryBigBox{
		width:1032px;
		margin:0 auto;
		padding-top:16px;
	}

	.articleTextBox{
		width:310px;
		height:77px;
		background-color:#ededed;
	}

	.articleText{
		line-height: 25px;
		padding-top:16px;
		font-size:14px;
		font-weight: bold;
	}	

	.articleText a{
		color: #232323;
		text-decoration: none;
	}

	.articleText a:hover{
		text-decoration: underline;
	}

	.pictureBlogBoxPage{
		width:307px;
		height:167px;
		overflow: hidden;
	}

	.pictureBlogBoxPage img{
		width:100%;
		height:auto;
	}

	.pictureBlogBoxPage{
		float:left;
		overflow: hidden;　
		display: block;
		padding: 0 20px;
	}

	.articleIMG img{
		width:100%;
	}

	.articleBigBox{　 
		overflow: hidden;　
		display: block;
		width:310px;
		padding:35px 16px 0px 16px;
		float:left;
	}

	.articleBigBox p.article{
		height: 206px;
		overflow: hidden;
	}

	.articleIMG{
		display: block;
		overflow: hidden;	
	 	height: 206px;
	}	
	
	p.article img{
		width:100%!important;
		height: auto;
	}

	p.article a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}


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









	/*自己紹介ページ
	*******************************************/

	
	.aboutBoxBox{
		width:1000px;
		margin:0 auto;
	}
	
	.bottun{
		clear:both;
	}

	.bottunIcon{
		float:right;
		padding-left:20px;
	}	

	.bottunIcon a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	section.aboutAbout h4{
		text-align:center;
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.skillIcon{
		width:742px;
		margin:0 auto;	
		padding-bottom: 80px;	
	}
	
	.skillbotan{
		float:left;
		padding-left: 22px;
	}

	.fb_iframe_widget span{
		padding-right: 20px;
		height: 23px!important;
	}

	.twitter-share-button{
		width: 104px!important;
	}

	#__plusone_0{
		width: 64px!important;
	}

	#I0_1419799474766{
		width: 64px!important;
	}

	.wsbl_hatena_button{
		height: 26px!important;
	}

	.wsbl_facebook_like{
		height: 26px!important;
	}

	.wsbl_twitter{
		
	}

	.wp_social_bookmarking_light{
		display: none;
	}




/*Pagenation*/
.pagenation {
    margin: 0 0 80px;
    text-align: center;
}
.pagenation:after, .pagenation ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.pagenation ul {
    margin: 0;
    display: inline-block;
}
.pagenation li {
    float: left;
    list-style: none outside none;
    margin-left: 3px;
}
.pagenation li:first-child {
    margin-left: 0;
}
.pagenation li.active {
    background-color: #66cccc;
    border-radius: 3px;
    color: #fff;
    cursor: not-allowed;
    padding: 10px 20px;
}
.pagenation li a {
    background: none repeat scroll 0 0 #66cccc;
    border-radius: 3px;
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.pagenation li a:hover {
    background-color: #1fc8d3;
    color: #fff;
    opacity: 0.7;
    transition-duration: 400ms;
    transition-property: all;
    transition-timing-function: ease;
}



/******************************************/
/* thanks */
	.thanks{
		text-align: center;
		padding-top: 100px;
		padding-bottom: 110px;
	}

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


.size-medium{
	max-width: none;
	height: auto;
}








@media screen and (max-width: 768px) {
/* 表示領域が768px以下の場合に適用するスタイル */
body{
	min-width: 100%;
}

div.airBox {
	width: 100%;
}

div.airBox h1{
	width: 8%;
	margin: 0 auto;
	padding-top: 1.2%;
	padding-bottom: 1%;
	float: none;
}

div.airBox h1 img{
	width: 100%;
}

div.airBox nav{
	width: 80%;
	margin: 0 auto;
	float: none;
	padding-bottom: 2.4%;
	text-align: center;
}

div.airBox nav ul{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

div.airBox nav ul li{		
		float: none;
		display: inline-block; 
		text-align: center;
	}

	div.airBox nav ul li a{		
		display: block;
	}

	div.airBox nav ul li.home{
		width:60px;
		padding-right:7%;
		padding-left:5%;
		padding-bottom: 3%;
	}
	
	div.airBox nav ul li.about{
		width:57px;
		padding-right:10%;
		padding-left:10%;
		padding-bottom: 3%;
	}
	
	div.airBox nav ul li.work{
		width:55px;
		padding-right:4%;
		padding-left:7%;
		padding-bottom: 3%;
	}

	div.airBox nav ul li.blog{
		width:46px;
		padding-right:6%;
		padding-left:14%;
	}
	
	div.airBox nav ul li.contact{
		width:83px;
		padding-right:8.5%;
		padding-left:10.5%;
		padding-bottom: 1%;
	}

div.airBox nav ul li img{
	display: none;
}	

div.airBox nav ul li img.responsive{
	width: 100%;
	display: block;
}




/*メインビジュアル
	*******************************************/
.mainVisual{
	width: 100%;
	height: auto;
	padding-top:15%;
	padding-bottom:15%;
	background-image:url(../img/common/top/Mainvisual.png);
	-webkit-background-size: 100% 100%;
	     -o-background-size: 100% 100%;
	        background-size: 100% 100%;
	}
	

	.welcome{
		width: 50%;
		margin: 0 auto;
		padding: 0;
	}

	.welcome img{
		width: 100%;
	}



	/*アバウトabout
	*******************************************/

	.aboutBox{
		width:100%;
		margin:0 auto;		
	}

	.aboutAirBox{
		padding:116px;
	}


	h2{
		text-align: center;
		padding-top: 11%;
		clear:both;
	}

	.profilePhoto{
		float:none;
		width: 24%;
		margin: 0 auto;
		padding-top: 7%;
	}


	.profilePhoto img{
		width: 100%;
	}
	

	.profile{
		width: 80%;
		float: none;
		font-size: 14px;
		padding: 7% 10% 0;
		line-height: 30px;
	}


	.reedMore{
		width: 28%;
		margin: 0 auto;
		text-align: center;
		padding-top: 10%;
		padding-bottom: 12%;
		clear:both;
	}

	.reedMore img{
		width: 100%;
		height: auto;
	}



	/*ワークwork
	*******************************************/

	section.work{
		background: #f3f2f1;
	}

	.workBox{
		width: 100%;
		margin: 0 auto;
	}

	.workttlbottom{
		padding-bottom: 1%;	
	}


	.picture{
		margin: 7% auto 0;
		float: none;
		height: 380px;
		overflow: hidden;
		display: block;
		width: 80%;
	}	
	
	.open{
	     cursor: pointer;	     	
	}
	
	#slideBox{
		 background: #f3f2f1;	    
	     width: 100%;
	     margin: 0 auto;
	     padding-top: 0; 
	     padding-bottom: 0;    
	}

	.picture img{
		width:100%;
		height:auto;		
	}

	.underaccordion{
		margin: 0 auto 7%;
	}



	/*ブログblog
	*******************************************/

	section.blog{
		background: #f7f6f5;
	}

	.blogBox{
		width: 100%;
		margin: 0 auto;
	}

	.blogBox .blogArticle .blogPicture{
		width: 100%;
		height: auto;
	}
	

	.blogArticle{	
		width: 80%;
		height: auto;
		margin: 10% auto 0;
		float: none;
	}	
	

	h3{
		line-height: 28px;
		font-size: 18px;
		padding: 20px 0;
		height: 48px;
	}

	h3.blogtopttl{
		line-height: 28px;
		font-size: 20px;
		padding: 4% 0 2%;
		height: auto;
	}

	.blogText1{
		line-height: 26px;
		font-size: 14px;
	}
	
	.blogPicture{
		height: 200px;
		overflow: hidden;
		display: block;
	}

	.blogPicture a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	.blogPicture img{ 
		width: 100%;
		height: auto;
	}

	.continu{
		line-height: 24px;
		font-size: 14px;
	}

	.continu{
		color: #33cccc;
	}

	.continu:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}




	/*コンタクトcontact	
	*******************************************/
		
	section.contact{
		background: #f3f2f1;
	}

	.contactBox{
		width: 100%;
		margin: 0 auto;
	}
	
	.sendMe{
		width: 30%;
		margin: 0 auto;
		text-align: center;
		padding-top: 7%;
		padding-bottom: 5%;
		clear: both;
	}

	.sendMe img{
		width: 100%;
	}

	.mfp_phase{	
		width: 80%;
		margin:0px auto;
	}

	.mailform{
		margin: 2%;
	}

	.form{
		width: 100%;
		height: 41px;
		margin:0;
		padding:0;
		background: #f6fafa;
		border: 0px solid;
		font-size:20px;
	}



	.Message{
		height:248px;
	}

	.formIcon{
		width: 100%;	
	}

	.zzz{
		width: 100%;	
		float: none;
	}
	
	.clearboth{
		clear:both;
	}

	#mailfield dl{
		width: 100%;
		border: none;
	}

	#mailfield dt{
		width: 100%;
		padding: 4% 0;
		border-right: none;
	}

	.responsiveon{
		display: block;		
	}

	.responsiveoff{
		display: none;	
	}


	p.submit{
		width: 42%;
		margin: 0 auto;
	}

	p.submit input{
		background: url(../img/common/top/sendmessage.png) left top no-repeat;
		background-size: contain;    
		height: 63px!important;
		border: 0px;
		cursor: pointer;
		text-indent: -9999px;
		display: block;
		margin: 36% auto 10%;
		width: 82%;
	}

	p.submit input:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	.send{
		padding-bottom: 0;
	}
	

	p.messagearea textarea{
		width: 95%;
		height: 204px;
		margin: 0 auto 3px;
		border: 1px solid #eaeaea;
		background-color: #f6fafa;
		display: block;
		font-size: 16px;
		padding: 8px 8px;
	}
	
	div.mesa{
		width: 111.5px;
		height: 24px;
		background: url(../img/common/top/message.png);
		background-position: 7.5px 0;
		background-repeat: no-repeat;
		margin: 14px 0 4px 0px;
	}


	p.emailadress input{
		width: 95%;
		height: 38px;
		margin: 0 auto 3px;
		border: 1px solid #eaeaea;
		background-color: #f6fafa;
		display: block;
		font-size: 16px;
		padding: 0 8px;
	}

	div.emailadressimg{
		width: 91.5px;
		height: 23px;
		background: url(../img/common/top/email.png);
		background-position: 7.5px 0;
		background-repeat: no-repeat;
		margin: 14px 0 2px 0px;
	}

	p.onamae input{
		width: 95%;
		height: 38px;
		margin: 0 auto 3px;
		border: 1px solid #eaeaea;
		background-color: #f6fafa;
		display: block;
		font-size: 16px;
		padding:0 8px;
	}

	div.onamaeimg{
		width: 93px;
		height: 25px;
		background: url(../img/common/top/name.png);
		background-position: 7.5px 0;
		background-repeat: no-repeat;
		margin: 0 0 4px 0px;
	}


	.screen-reader-response{
		text-align: center;
		padding-bottom: 30px;
		font-size: 18px;
		font-family: 'ヒラギノ角ゴ Pro W3';
	}

	.screen-reader-response li{
		display: none;
	}

	.wpcf7-not-valid-tip{
		padding-left: 23px;
		margin-top: 3px;
	}

	.wpcf7-response-output{
		display: none;
	}





	/*自己紹介ページ
	*******************************************/

	.hederDownAir{
		width: 100%;
		margin: 0 auto;
		margin-bottom: 10%;
	}

	.aboutBoxBox{
		width: 100%;
		margin: 0 auto;
	}

	h2.aboutttl{
		width: 16%;
		margin: 0 auto;
		padding: 3.8% 0!important;
	}

	h2.aboutttl img{
		width: 100%;
	}

	.aboutPhoto{
		width: 24%;
		margin: 0 auto;
		float: none;
		padding-top: 0;
	}

	.aboutPhoto img{
		width: 100%;
	}
	
	.bottun{
		clear:both;
		width: 80%;
		margin: 0 auto;
	}

	.bottunIcon{
		float:right;
		padding-right: 0;
		padding-left: 3%;
		width: 5%;
	}	

	.bottunIcon img{
		width: 100%;
	}

	.bottunIcon a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	section.aboutAbout h4{
		text-align:center;
		padding-top: 10%;
		padding-bottom: 4%;
		width: 32%;
		margin: 0 auto;
	}

	section.aboutAbout h4 img{
		width: 100%;
	}

	.skillIcon{
		width: 80%;
		margin: 0 auto;	
		text-align: center;
		padding-bottom: 6%;	
	}
	
	.skillbotan{
		width: 12%;
		height: auto;
		float: none;
		display: inline-block;
		padding: 4% 2%;
	}

	.skillbotan img{
		width: 100%;
	}

	.seventh{
		padding-left: 2%;
	}

	.eighth{
		padding-left: 2%;
	}

	.fb_iframe_widget span{
		padding-right: 20px;
		height: 23px!important;
		padding-bottom: 10px;
	}

	.twitter-share-button{
		width: 104px!important;
		padding-bottom: 10px;
	}

	#___plusone_0{
		padding: 0 60px 13px 0!important;
	}

	#I0_1419799474766{
		width: 64px!important;
	}

	.wsbl_hatena_button{
		height: 26px!important;
	}

	.wsbl_facebook_like{
		height: 26px!important;
	}

	.wsbl_twitter{
		
	}

	.wp_social_bookmarking_light{
		display: none;
	}




	/*ブログページ
	*******************************************/

	
	h2.blogcatettl{
		width: 11.6%;
		margin: 0 auto;
		padding: 3.7% 0!important;
	}

	h2.blogcatettl img{
		width: 100%;
	}
	
	.blogBoxPage{
		width: 100%;
		margin: 0 auto;
	}
	
	.blogArticlePage{
		width: 80%;
		height: auto;
		margin: 11% auto 0;
		float: none;
	}

	.blogArticlePage h3{
		font-size: 22px;
		padding: 4% 0!important;
		width: 100%;
		height: auto!important;
	}

	.blogText1Page{
		width: 100%;
		font-size: 14px;
		line-height: 28px;
		position: relative;
	}

	.pager{
		padding-top:75px;
		text-align: center;
	}

	.pagerNumber{
		padding-top: 16px;
		padding-bottom: 80px;
		text-align: center;
	}
	

	.blogFooter{
		background-color: #f6f6ee;
	}

	.blogPicturepage{
		width: 100%;		
		height: auto;
		overflow: hidden;　
		display: block;	
	}


	.blogPicturepage a:hover{
		opacity: 0.6;
		filter: alpha(opacity=60);
	}

	.blogPicturepage img{
		width: 100%;
		height: auto;
	}

	.blogPicturepagesingle img{
		width: 100%;
		height: auto;
	}

	.pagenation{
		margin: 7.8% 0 8.2%;
	}



	/*ブログページ記事
	*******************************************/
	

	.blogPicturepagesingle{
		width: 80%;	
		margin: 0 auto;	
		height: auto;
		overflow: hidden;　
		display: block;	
	}	

	.blogPicturepagesingle img{
		width: 100%;
	}
	
	.gleanDown{
		width: 80%;
		margin: 0 auto;
	}


	.gleanDown h3{
		font-size: 20px;
		text-align: center;
		padding-top: 0;
		padding-bottom: 9%;
		height: auto;
	}

	.blogPageDown{
		padding-bottom: 0;
		background-color:#f6f6ee;
	}
	
	.blogBoxPageDown{
		background-color: #fff;
		width: 100%;
		margin:0 auto;	
	}

	.blogText2PageAbove{
		width: 80%;
		margin: 0 auto;
		height: auto;
	}
	
	.blogText2PageTop{	
		font-size: 15px;
		padding-top: 0;
		padding-bottom: 8%;
		line-height: 32px;
		height: auto;
	}

	.time{
		font-size:12px;
		color:#232323;
		padding-bottom:20px;
		font-weight: bold;
	}

	.icon{
		padding-bottom:61px;
	}
	
	.facebook{
		margin-right:17px;
	}

	.twitter{
		margin-right:17px;
	}
	
	.evernote{
		margin-right:17px;
	}

	.gogle{
		margin-right:17px;
	}
	
	.articleVeryBigBox{
		width: 100%;
		margin: 0 auto;
		padding-top: 8%;
	}

	.articleTextBox{
		width:310px;
		height:77px;
		background-color:#ededed;
	}

	.articleText{
		line-height: 25px;
		padding-top: 4%;
		padding-bottom: 10%;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
	}	

	.articleText a{
		color: #232323;
		text-decoration: none;
	}

	.articleText a:hover{
		text-decoration: underline;
	}

	.pictureBlogBoxPage{
		width:307px;
		height:167px;
		overflow: hidden;
	}

	.pictureBlogBoxPage img{
		width:100%;
		height:auto;
	}

	.pictureBlogBoxPage{
		float:left;
		overflow: hidden;　
		display: block;
		padding: 0 20px;
	}

	.articleIMG img{
		width:100%;
	}

	.articleBigBox{　 
		overflow: hidden;　
		display: block;
		width: 80%;
		padding: 0 0px 0px 0px;
		float: none;
		margin: 0 auto;
	}

	.articleBigBox p.article{
		height: auto;
		overflow: hidden;
	}

	.articleIMG{
		display: block;
		overflow: hidden;	
	 	height: 206px;
	}	
	
	p.article img{
		width: 100%!important;
		height: auto;
	}

	p.article a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}


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



	.footer{
		display: none;
	}

	.responfooter{
		display: block;
		text-align: center;
		padding-top:40px;
		padding-bottom:50px;
		font-size:14px;
		color:#33cccc;
		background-color: #F3F2F1;	
		line-height: 22px;
	}


/******************************************/
/* thanks */
	.thanks{
		width: 85%;	
		margin: 0 auto;
		height: auto;
		padding-top: 4%;
		padding-bottom: 14%;
	}

	.thanks img{
		width: 100%;
	}

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

.size-medium{
     max-width:80%;
     height:auto;
}

}











@media screen and (max-width: 400px) {
/* 表示領域が400px以下の場合に適用するスタイル */
body{
	min-width: 100%;
}

div.airBox {
	width: 100%;
}

div.airBox h1{
	width: 15%;
	margin: 0 auto;
	padding-top: 2.4%;
	padding-bottom: 1.2%;
	float: none;
}

div.airBox h1 img{
	width: 100%;
}

div.airBox nav{
	width: 90%;
	margin: 0 auto;
	float: none;
	padding-top: 2.4%;
	padding-bottom: 4.8%;
	text-align: center;
}

div.airBox nav ul{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

div.airBox nav ul li{		
		float: none;
		display: inline-block; 
		text-align: center;
	}

	div.airBox nav ul li a{		
		display: block;
	}

	div.airBox nav ul li.home{
		width:60px;
		padding-right:5%;
		padding-left:3%;
		padding-bottom: 6%;
	}
	
	div.airBox nav ul li.about{
		width:57px;
		padding-right:8%;
		padding-left:8%;
		padding-bottom: 6%;
	}
	
	div.airBox nav ul li.work{
		width:55px;
		padding-right:2%;
		padding-left:5%;
		padding-bottom: 6%;
	}

	div.airBox nav ul li.blog{
		width:46px;
		padding-right:2%;
		padding-left:14%;
	}
	
	div.airBox nav ul li.contact{
		width:83px;
		padding-right:3%;
		padding-left:12%;
		padding-bottom: 1%;
	}

div.airBox nav ul li img{
	display: none;
}	

div.airBox nav ul li img.responsive{
	width: 100%;
	display: block;
}



/*メインビジュアル
	*******************************************/
.mainVisual{
	width: 100%;
	height: auto;
	padding-top:13%;
	padding-bottom:13%;
	background-image:url(../img/common/top/Mainvisual.png);
	-webkit-background-size: 100% 100%;
	     -o-background-size: 100% 100%;
	        background-size: 100% 100%;
	}
	

	.welcome{
		width: 70%;
		margin: 0 auto;
		padding: 0;
	}

	.welcome img{
		width: 100%;
	}





	/*アバウトabout
	*******************************************/

	.aboutBox{
		width:100%;
		margin:0 auto;		
	}

	.aboutAirBox{
		padding:116px;
	}


	h2{
		text-align: center;
		padding-top:10%;
		clear:both;
	}

	.profilePhoto{
		float:none;
		width: 40%;
		margin: 0 auto;
		padding-top: 8%;
	}


	.profilePhoto img{
		width: 100%;
	}

	
	.profile{
		width: 80%;
		float: none;
		font-size: 12px;
		padding: 7% 10% 0;
		line-height: 30px;
	}

	.reedMore{
		width: 42%;
		margin: 0 auto;
		text-align: center;
		padding-top: 10%;
		padding-bottom: 12%;
		clear: both;
	}

	.reedMore img{
		width: 100%;
	}



	/*ワークwork
	*******************************************/

	section.work{
		background: #f3f2f1;
	}

	.workBox{
		width: 100%;
		margin: 0 auto;
	}

	.workttlbottom{
		padding-bottom: 2%!important;	
	}

	h2.workttl{
		text-align: center;
		padding-top:10%;
		padding-bottom: 8%;
		clear:both;
	}	


	.picture{
		margin: 8% auto 0;
		float: none;
		height: 160px;
		overflow: hidden;
		display: block;
		width: 80%;
	}	
	
	.open{
	     cursor: pointer;	     	
	}
	
	#slideBox{
		 background:#f3f2f1;	    
	     width: 100%;
	     margin: 0 auto;
	     padding-top: 0; 
	     padding-bottom: 0;    
	}

	.picture img{
		width:100%;
		height:auto;		
	}

	.underaccordion{
		margin: 0 auto 7%;
	}	



	/*ブログblog
	*******************************************/

	section.blog{
		background: #f7f6f5;
	}

	.blogBox{
		width:100%;
		margin:0 auto;
	}

	.blogBox .blogArticle .blogPicture{
		width: 100%;
		height: auto;
	}

	.blogBox .blogArticle .blogPicture img{
		width: 100%;
	}
	

	.blogArticle{	
		width: 80%;
		height: auto;
		margin:14% auto 0;
		float:none;
	}	
	

	h3.blogtopttl{
		line-height: 28px;
		font-size:18px;
		padding:4% 0 2%;
		height: auto;
	}

	.blogText1{
		line-height: 24px;
		font-size:12px;
	}
	
	.blogPicture{
		height: 200px;
		overflow: hidden;
		display: block;
	}

	.blogPicture a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	.blogPicture img{ 
		width:100%;
		height:auto;
	}

	.continu{
		line-height: 24px;
		font-size: 14px;
	}

	.continu{
		color: #33cccc;
	}

	.continu:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	.blogreedMore{
		width: 42%;
		margin: 0 auto;
		text-align: center;
		padding-top: 12%;
		padding-bottom: 14%;
		clear: both;
	}



	/*コンタクトcontact	
	*******************************************/
		
	section.contact{
		background: #f3f2f1;
	}

	.contactBox{
		width: 100%;
		margin: 0 auto;
	}
	
	.sendMe{
		width: 42%;
		margin: 0 auto;
		text-align: center;
		padding-top: 8%;
		padding-bottom: 9%;
		clear: both;
	}

	.sendMe img{
		width: 100%;
	}

	.mfp_phase{	
		width: 80%;
		margin:0px auto;
	}

	.mailform{
		margin: 2%;
	}

	.form{
		width: 100%;
		height: 41px;
		margin:0;
		padding:0;
		background: #f6fafa;
		border: 0px solid;
		font-size:20px;
	}



	.Message{
		height:248px;
	}

	.formIcon{
		width: 100%;	
	}

	.zzz{
		width: 100%;	
		float: none;
	}
	
	.clearboth{
		clear:both;
	}

	#mailfield dl{
		width: 100%;
		border: none;
	}

	#mailfield dt{
		width: 100%;
		padding: 4% 0;
		border-right: none;
	}

	.responsiveon{
		display: block;		
	}

	.responsiveoff{
		display: none;	
	}

	p.submit{
		width: 64%;
		margin: 0 auto;
	}


	p.submit input{
		background: url(../img/common/top/sendmessage.png) left top no-repeat;
		background-size: contain;    
		width: 82%;
		height: 63px!important;
		border: 0px;
		cursor: pointer;
		text-indent: -9999px;
		display: block;
		margin: 20% auto 10%;
	}

	p.submit input:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}
	

	p.messagearea textarea{
		width: 95%;
		height: 204px;
		margin: 0 auto 3px;
		border: 1px solid #eaeaea;
		background-color: #f6fafa;
		display: block;
		font-size: 14px;
		padding: 8px 8px;
	}
	
	div.mesa{
		width: 111.5px;
		height: 24px;
		background: url(../img/common/top/message.png);
		background-position: 7.5px 0;
		background-repeat: no-repeat;
		margin: 14px 0 4px 0px;
	}


	p.emailadress input{
		width: 95%;
		height: 38px;
		margin: 0 auto 3px;
		border: 1px solid #eaeaea;
		background-color: #f6fafa;
		display: block;
		font-size: 14px;
		padding: 0 8px;
	}

	div.emailadressimg{
		width: 91.5px;
		height: 23px;
		background: url(../img/common/top/email.png);
		background-position: 7.5px 0;
		background-repeat: no-repeat;
		margin: 14px 0 2px 0px;
	}

	p.onamae input{
		width: 95%;
		height: 38px;
		margin: 0 auto 3px;
		border: 1px solid #eaeaea;
		background-color: #f6fafa;
		display: block;
		font-size: 14px;
		padding:0 8px;
	}

	div.onamaeimg{
		width: 93px;
		height: 25px;
		background: url(../img/common/top/name.png);
		background-position: 7.5px 0;
		background-repeat: no-repeat;
		margin: 0 0 4px 0px;
	}


	.screen-reader-response{
		text-align: center;
		padding-bottom: 30px;
		font-size: 18px;
		font-family: 'ヒラギノ角ゴ Pro W3';
	}

	.screen-reader-response li{
		display: none;
	}

	.wpcf7-not-valid-tip{
		padding-left: 23px;
		margin-top: 3px;
	}

	.wpcf7-response-output{
		display: none;
	}



	/*自己紹介ページ
	*******************************************/

	.hederDownAir{
		width: 100%;
		margin: 0 auto;
		margin-bottom: 10%;
	}

	.aboutBoxBox{
		width: 100%;
		margin: 0 auto;
	}

	h2.aboutttl{
		width: 24%;
		margin: 0 auto;
		padding: 6% 0!important;
	}

	h2.aboutttl img{
		width: 100%;
	}

	.aboutPhoto{
		width: 40%;
		margin: 0 auto;
		float: none;
		padding-top: 0;
	}

	.aboutPhoto img{
		width: 100%;
	}
	
	.bottun{
		width: 80%;
		clear:both;
		margin: 0 auto;
		padding-top: 2%;
	}

	.bottunIcon{
		float:right;
		padding-right: 0;
		padding-left: 6%;
		width: 10%;
	}	

	.bottunIcon img{
		width: 100%;
	}

	.bottunIcon a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	section.aboutAbout h4{
		text-align:center;
		padding-top: 16%;
		padding-bottom: 8%;
		width: 56%;
		margin: 0 auto;
	}

	section.aboutAbout h4 img{
		width: 100%;
	}

	.skillIcon{
		width: 80%;
		margin: 0 auto;	
		text-align: center;
		padding-bottom: 11%;	
	}
	
	.skillbotan{
		width: 18%;
		height: auto;
		float: none;
		display: inline-block;
		padding: 4% 2%;
	}

	.skillbotan img{
		width: 100%;
	}

	.seventh{
		padding-left: 2%;
	}

	.eighth{
		padding-left: 2%;
	}

	.fb_iframe_widget span{
		padding-right: 20px;
		height: 23px!important;
		padding-bottom: 10px;
	}

	.twitter-share-button{
		width: 104px!important;
		padding-bottom: 10px;
	}

	#___plusone_0{
		padding: 0 60px 13px 0!important;
	}

	#I0_1419799474766{
		width: 64px!important;
	}

	.wsbl_hatena_button{
		height: 26px!important;
	}

	.wsbl_facebook_like{
		height: 26px!important;
	}

	.wsbl_twitter{
		
	}

	.wp_social_bookmarking_light{
		display: none;
	}




	/*ブログページ
	*******************************************/

	
	h2.blogcatettl{
		width: 20%;
		margin: 0 auto;
		padding: 6% 0!important;
	}

	h2.blogcatettl img{
		width: 100%;
	}
	
	.blogBoxPage{
		width: 100%;
		margin: 0 auto;
	}
	
	.blogArticlePage{
		width: 80%;
		height: auto;
		margin: 13% auto 0;
		float: none;
	}

	.blogArticlePage h3{
		font-size: 20px;
		padding: 4% 0!important;
		width: 100%;
		height: auto!important;
	}

	.blogText1Page{
		width: 100%;
		font-size:14px;
		line-height:26px;
		position: relative;
	}

	.pager{
		padding-top:75px;
		text-align: center;
	}

	.pagerNumber{
		padding-top:16px;
		padding-bottom:80px;
		text-align: center;
	}
	

	.blogFooter{
		background-color:#f6f6ee;
	}

	.blogPicturepage{
		width: 100%;		
		height: auto;
		overflow: hidden;　
		display: block;	
	}


	.blogPicturepage a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}

	.blogPicturepage img{
		width:100%;
		height:auto;
	}

	.blogPicturepagesingle img{
		width:100%;
		height:auto;
	}

	.pagenation{
		margin: 14% 0 10%;
	}



	/*ブログページ記事
	*******************************************/


	h2.blogcatettl{
		width: 20%;
		margin: 0 auto;
		padding: 6% 0!important;
	}

	h2.blogcatettl img{
		width: 100%;
	}	
	

	.blogPicturepagesingle{
		width: 80%;	
		margin: 0 auto;	
		height: auto;
		overflow: hidden;　
		display: block;	
	}	

	.blogPicturepagesingle img{
		width: 100%;
	}
	
	.gleanDown{
		width: 80%;
		margin: 0 auto;
	}


	.gleanDown h3{
		font-size: 20px;
		text-align: center;
		padding-top: 0;
		padding-bottom: 9%;
		height: auto;
	}

	.blogPageDown{
		padding-bottom: 0;
		background-color:#f6f6ee;
	}
	
	.blogBoxPageDown{
		background-color: #fff;
		width: 100%;
		margin:0 auto;	
	}

	.blogText2PageAbove{
		width: 80%;
		margin: 0 auto;
		height: auto;
	}
	
	.blogText2PageTop{	
		font-size: 15px;
		padding-top: 0;
		padding-bottom: 8%;
		line-height: 32px;
		height: auto;
	}

	.time{
		font-size:12px;
		color:#232323;
		padding-bottom:20px;
		font-weight: bold;
	}

	.icon{
		padding-bottom:61px;
	}
	
	.facebook{
		margin-right:17px;
	}

	.twitter{
		margin-right:17px;
	}
	
	.evernote{
		margin-right:17px;
	}

	.gogle{
		margin-right:17px;
	}
	
	.articleVeryBigBox{
		width: 100%;
		margin: 0 auto;
		padding-top: 16px;
	}

	.articleTextBox{
		width:310px;
		height:77px;
		background-color:#ededed;
	}

	.articleText{
		line-height: 25px;
		padding-top: 4%;
		padding-bottom: 10%;
		font-size:14px;
		font-weight: bold;
	}	

	.articleText a{
		color: #232323;
		text-decoration: none;
	}

	.articleText a:hover{
		text-decoration: underline;
	}

	.pictureBlogBoxPage{
		width:307px;
		height:167px;
		overflow: hidden;
	}

	.pictureBlogBoxPage img{
		width:100%;
		height:auto;
	}

	.pictureBlogBoxPage{
		float:left;
		overflow: hidden;　
		display: block;
		padding: 0 20px;
	}

	.articleIMG img{
		width:100%;
	}

	.articleBigBox{　 
		overflow: hidden;　
		display: block;
		width: 80%;
		padding: 0 0px 0px 0px;
		float: none;
		margin: 0 auto;
	}

	.articleBigBox p.article{
		height: auto;
		overflow: hidden;
	}

	.articleIMG{
		display: block;
		overflow: hidden;	
	 	height: 206px;
	}	
	
	p.article img{
		width: 100%!important;
		height: auto;
	}

	p.article a:hover{
		opacity:0.6;
		filter: alpha(opacity=60);
	}


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



	.footer{
		display: none;
	}

	.responfooter{
		display: block;
		text-align: center;
		padding-top:40px;
		padding-bottom:50px;
		font-size:14px;
		color:#33cccc;
		background-color: #F3F2F1;	
		line-height: 22px;
	}


/******************************************/
/* thanks */
	.thanks{
		width: 85%;	
		margin: 0 auto;
		height: auto;
		padding-top: 4%;
		padding-bottom: 14%;
	}

	.thanks img{
		width: 100%;
	}

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

.size-medium{
     max-width:100%;
     height:auto;
}

}