@charset "utf-8";
/* CSS Document */
/*
Theme Name: uesugi
Theme URI: http://
Author: Utility Factory
Description: 上杉木材店
*/
* {
	font-size: 13px;
	line-height: 150%;
	margin: 0px;
	padding: 0px;
	color: #111;
	font-family: Helvetica,HiraKakuProN-W3,'メイリオ',Meiryo,sans-serif;
}

body {
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: 100%;
}

a {
	outline: none;
}

img {
	vertical-align: bottom;
	height: auto;
	max-width: 100%;
	text-decoration: none;
	border: 0 none;
}
a img {
	border: none;
}
br {
	height: 0px;
}
a {
	color: #333333;
	text-decoration: none;
	outline: none;
}
a:hover {

}
section {
	display: block;
}

.fadeIn {
    transform: translate3d(0, -10px, 0);
    transition: 1s;
    opacity: 0;
}

.fadeIn.animated {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

main {
	padding-top: 70px;
	position: relative;
}


.inner_l {
	width: 100%;
}

.inner_m,
.inner_s {
	width: 70%;
	margin: 0 auto;
}



/***********************
   ヘッダー
************************/

header {
	background-color: #FFF;
	width: 100%;
	height: 57px;
	padding-top: 23px;
	position: fixed;
	z-index: 9998;
	box-shadow: 0 1px 5px 0 rgba(16,16,16,.2);
}

header > h1 a {
	margin: 0 auto;
	display: block;
	background-image: url(/img/logo.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 35px;
	width: 220px;
	text-indent: -9999px;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
header > h1 a:hover {
	opacity: 0.6;
}




/***********************
   ドロワーナビ
************************/



.drawer--left.drawer-open .drawer-hamburger {
    left: 10.5rem;
}

.drawer-hamburger {
  width: 2.5rem;
  padding-left: 2.2rem;
  z-index: 9999;
  padding-top: 24px;
}
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  top: -10px;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after {
    height: 3px;
}
.drawer-hamburger-icon:after {
  top: 10px;
}
.drawer-hamburger > p {
    padding-top: 10px;
    font-size: 11px;
}

#gl_nav .drawer-nav {
	padding: 0px 25px 0px 25px;
	box-sizing: border-box;
}


/***********************
   ドロワー内SNSアイコン
************************/
#sns_nav_dw {
	width: 149px;
	height: 16px;
	padding-top: 100px;
	padding-bottom: 40px;
}
#sns_nav_dw ul {
	width: 149px;
	height: 16px;
	font-size:0;
　　line-height:0;
}
#sns_nav_dw ul li {
	list-style-type: none;
	display: inline-block;
	font-size: 13px;
	line-height: 150%;
}
#sns_nav_dw ul li a {
	height: 16px;
	background-image: url(/img/sns.png);
	background-size: 149px 16px;
	background-repeat: no-repeat;
	text-indent: -99999px;
	display: block;
	padding-right: 18px;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
#sns_nav_dw ul li:last-child a {
	padding-right: 0px;
}
#sns_nav_dw ul li a:hover {
	opacity: 0.6;
}
#sns_nav_dw ul li:nth-child(1) a {
	width: 16px;
	background-position: 0px 0px;
}
#sns_nav_dw ul li:nth-child(2) a {
	width: 16px;
	background-position: -34px 0px;
}
#sns_nav_dw ul li:nth-child(3) a {
	width: 9px;
	background-position: -68px 0px;
}
#sns_nav_dw ul li:nth-child(4) a {
	width: 18px;
	background-position: -95px 0px;
}
#sns_nav_dw ul li:nth-child(5) a {
	width: 18px;
	background-position: -131px 0px;
}
/***********************
   ドロワー内SNSアイコン前4つ消す場合
************************/

/*#sns_nav_dw ul li:nth-child(1) a,
#sns_nav_dw ul li:nth-child(2) a,
#sns_nav_dw ul li:nth-child(3) a,*/
#sns_nav_dw ul li:nth-child(4) a {
	display: none;
}




#gl_nav .drawer-nav ul {
	list-style-type: none;	
}
#gl_nav .drawer-nav > ul > li {
	padding-bottom: 25px;
}
#gl_nav .drawer-nav a {
	display: block;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
#gl_nav .drawer-nav a:hover {
	opacity: 0.6;
}
#gl_nav .drawer-nav > .inner > ul > li > a {
	padding-bottom: 15px;
}
#gl_nav .drawer-nav > .inner > ul > li > ul > li > a {
	font-size: 11px;
	padding-left: 15px;
	padding-bottom: 15px;
}



/***********************
   右上SNSアイコン
************************/
#sns_nav {
	position: absolute;
	top: 30px;
	right: 20px;
	width: 149px;
	height: 22px;
}
#sns_nav ul {
	width: 149px;
	height: 22px;
	font-size:0;
　　line-height:0;
}
#sns_nav ul li {
	list-style-type: none;
	display: inline-block;
	font-size: 13px;
	line-height: 150%;	
}
#sns_nav ul li a {
	height: 22px;
	background-image: url(/img/sns.png);
	background-size: 205px 22px;
	background-repeat: no-repeat;
	text-indent: -99999px;
	display: block;
	padding-right: 11px;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
#sns_nav ul li:last-child a {
	padding-right: 0px;
}
#sns_nav ul li a:hover {
	opacity: 0.6;
}
#sns_nav ul li:nth-child(1) a {
	width: 22px;
	background-position: 0px 0px;
}
#sns_nav ul li:nth-child(2) a {
	width: 22px;
	background-position: -47px 0px;
}
#sns_nav ul li:nth-child(3) a {
	width: 12px;
	background-position: -94px 0px;
}
#sns_nav ul li:nth-child(4) a {
	width: 24px;
	background-position: -131px 0px;
}
#sns_nav ul li:nth-child(5) a {
	width: 25px;
	background-position: -180px 0px;
}

/***********************
   右上SNSアイコン前4つ消す場合
************************/
/*#sns_nav {
	width: 25px;
}
#sns_nav ul li:nth-child(1) a,
#sns_nav ul li:nth-child(2) a,
#sns_nav ul li:nth-child(3) a,*/
#sns_nav ul li:nth-child(4) a {
	display: none;
}
/*#sns_nav ul li:nth-child(5) a {
	position: absolute;
	top: 0;
	right: 0;
}*/

/***********************
   フッター上お問合わせ
************************/

#ft_contact {
	width: 85px;
	height: 85px;
	margin: 0 auto;
	padding: 50px 0;
}
#ft_contact a {
	background-image: url(/img/btn_contact.png);
	background-size: 85px 85px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: -99999px;
	height: 85px;
	width: 85px;
	display: block;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
#ft_contact a:hover {
	opacity: 0.6;
}



/***********************
   フッター
************************/

footer {
	padding: 40px 30px 10px 30px;
	bckground-color: #FFF;
}
footer > div {
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
footer > div > ul {
	width: 12%;
	list-style-type: none;
}
footer > div a {
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
footer > div a:hover {
	opacity: 0.6;
}
	
footer > div > ul > li > a {
	display: block;
	padding-bottom: 10px;
}
footer > div > ul > li > ul {
	list-style-type: none;
}
footer > div > ul > li > ul > li > a {
	font-size: 11px;
	display: block;
	padding-bottom: 10px;
}

footer address {
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-align: center;
	padding-top: 40px;
}



/***********************
   写真＋文章　横並び
************************/
.float_left {
	overflow: hidden;
	padding-bottom: 50px;
}
.float_left img {
	float: left;
	width: 55%;
}
.float_left div {
	float: right;
	width: 35%;
}

.float_right {
	overflow: hidden;
	padding-bottom: 50px;
}
.float_right img {
	float: right;
	width: 55%;
}
.float_right div {
	float: left;
	width: 35%;
}

.float_left div h3,
.float_right div h3 {
	font-size: 23px;
	font-weight: normal;
	padding-bottom: 20px;
	font-family: "Sawarabi Mincho";
}
.float_left div p,
.float_right div p {
	font-size: 13px;
	padding-bottom: 10px;
}
.float_left div h3+p,
.float_right div h3+p {
	font-size: 16px;
	padding-bottom: 20px;
}


/***********************
   ブログ一覧
************************/
.blog_3 {
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}

.blog_3::after {
  content:"";
  width:30%;
}

.blog_4 {
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}

.blog_4::before {
  content:"";
  width:20%;
  order: 1;
}
.blog_4::after {
  content:"";
  width:20%;
}

.blog_3 > a {
	width: 30%;
	padding-bottom: 30px;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.blog_4 > a {
	width: 21%;
	padding-bottom: 30px;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.blog_3 > a:hover,
.blog_4 > a:hover {
	opacity: 0.6;
}

.blog_3 article > div,
.blog_4 article > div {
	position: relative;
	padding-top: 23px;
}
.blog_3 article img,
.blog_4 article img {
	/*width: 100%;*/
}
.blog_3 article .blog_icon,
.blog_4 article .blog_icon {
	position: absolute;
    top: 0;
    left: 0;
}
.blog_3 article .blog_icon img,
.blog_4 article .blog_icon img{
	width: 70px;
}

.blog_3 article h5,
.blog_4 article h5 {
	font-weight: normal;
	padding: 10px 0;
	font-size: 18px;
}
.blog_3 article p,
.blog_4 article p {
	
}

#event_article > a:nth-child(1),
#event_article > a:nth-child(2) {
	width: 45%;
}

/***********************
   ブログ個別
************************/
main article .img_wrap {
	text-align: center;
	padding-bottom: 30px;
}

main > article > p {
	padding-bottom: 30px;
}


/***********************
   縦線
************************/
.line {
	padding: 30px 0;
}
.line p {
	height: 30px;
	width: 1px;
	margin: 0 auto;
	background-color: #000;
}




/***********************
   セカンドページタイトル
************************/
#page_title {
	padding-top: 40px;
	box-sizing: border-box;
	padding-bottom: 50px;
}
#page_title h3 {
	text-align: center;
	font-size: 18px;
	font-weight: normal;
}
#page_title h3 span {
	display: block;
	padding-bottom: 10px;
	border-bottom: 1px solid #222;
	margin-bottom: 15px;
	font-size: 30px;
	font-weight: normal;
	font-family: times,'PT Serif', serif;
	letter-spacing: 0.2em;
}
#page_title p {
	text-align: center;
	padding-top: 15px;
}

@media screen and (min-width:650px){
.nonepc{
    display: none;
}
}



@media screen and (max-width: 800px) {
/***********************
   写真＋文章　横並び
************************/	
.float_left img {
	width: 35%;
}
.float_left div {
	width: 55%;
}
.float_right img {
	width: 35%;
}
.float_right div {
	width: 55%;
}
.float_left div h3,
.float_right div h3 {
	font-size: 21px;
	padding-bottom: 10px;
}
.float_left div h3+p,
.float_right div h3+p {
	padding-bottom: 10px;
}

/***********************
   ヘッダー
************************/	
.drawer-hamburger {
    padding-left: 1.2rem;
}
#sns_nav {
	width: 25px;
	right: 15px;
}
#sns_nav ul {
	width: 25px;
}
#sns_nav ul li {
	display: none;
}
#sns_nav ul li:last-child {
	display: block;
}

	
/***********************
   フッター
************************/

footer > div > ul {
	width: 30%;
	padding-bottom: 30px;
}
	
}


@media screen and (max-width: 650px) {
.nonemb{
    display: none;
}
/***********************
   上杉茂樹の仕事
************************/	
.float_left img {
	float: none;
	width: 100%;
	padding-bottom: 10px;
}
.float_left div {
	float: none;
	width: 100%;
}
.float_right img {
	float: none;
	width: 100%;
	padding-bottom: 10px;
}
.float_right div {
	float: none;
	width: 100%;
}
.float_left div h3,
.float_right div h3 {
	padding-bottom: 10px;
}
.float_left div h3+p,
.float_right div h3+p {
	padding-bottom: 10px;
}


/***********************
   ブログ・情報発信
************************/
.blog_3 > a {
	width: 45%;
	padding-bottom: 20px;
}
.blog_4 > a {
	width: 45%;
	padding-bottom: 20px;
}

}



@media screen and (max-width: 550px) {
.nonepc{
    display: none;
}
.inner_m {
	width: 90%;
	margin: 0 auto;
}
.inner_s {
	width: 80%;
	margin: 0 auto;
}





/***********************
   フッター
************************/

footer > div > ul {
	width: 100%;
}
	
}