@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Modern+Antiqua);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.9 'Noto Sans JP',Verdana,メイリオ, Arial,游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #fff;
	background: rgb(84, 80, 78);
}

a{
	color: rgb(225, 47, 47);
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}


/* ヘッダー
------------------------------------------------------------*/
#mainnav a{
	color: #fff;
	font-family: 'BankGothic Md BT','Impact','Noto Sans JP',sans-serif,serif;
}


/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 10px 50px 0;
	text-align: center;
	font-size: 12px;
}


/* 共通
------------------------------------------------------------*/
h1, h2{
	font-family: 'BankGothic Md BT','Impact','Noto Sans JP',sans-serif,serif;
}

img{
	max-width: 100%;
	height: auto;
}

section{
  clear: both;
}

section h2{
	width: 60%;
	margin: 50px auto;
	font-size: 26px;
	font-weight:normal;
	text-align: center;
}

section h2 span {
	padding-bottom: 6px;
	border-bottom: 2px solid rgb(174, 52, 52);
}

.inner{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 50px;
}

#sec03 .inner, #sec04 .inner{
	border-bottom: 1px solid #fff;
}

.innerS{
	width: 70%;
	margin: 0 auto;
	padding-bottom: 80px;
	text-align: center;
}

.innerSS{
	width: 47%;
	margin: 0 auto;
	padding-bottom: 80px;
}



.innerL{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 20px;
}



g{
	color:rgb(255, 78, 107)
}


.img_wrap img:hover{
	transform: rotate(360deg);
	transition-duration: 0.5s;
  } 
  


  .img_arap img{
	cursor: pointer;
	filter: grayscale(0%);
	transition-duration: 1s;
  }
  .img_arap img:hover{
	filter: grayscale(100);
	transition-duration: 1s;
  }

  .img_brap img{
	cursor: pointer;
	transition-duration: 0.5s;
  }
  .img_brap img:hover{
	transform: scale(1.2) rotate(9deg);
	transition-duration: 0.5s;
  }

  .img_block{
    /* PCの右クリック禁止 */
    pointer-events: none;
	/* SPの長押し禁止 */
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	user-select:none;
}

		
.box img {
	animation: rotation 12s linear infinite;
	height: auto;
	width: 25%;
  }
  /* アニメーション */
  @keyframes rotation {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }
  
  
  .scroll_up {
	transition: 2s ease-in-out;
	transform: translateY(15px);
	opacity: 0;
  }
  .scroll_up.on {
	transform: translateY(0);
	opacity: 1.0;
  }


.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}


 


	


/* SEC02 SERVICE
------------------------------------------------------------*/
#sec02{
	padding: 0 !important;
}

#sec02 header{
	display: none;
}

#gallery{
	overflow: hidden;
}

#gallery li{
	float: left;
	width: calc(100%/3);
	line-height: 0;
}
#gallery li.full{
	width: 100%;
}


#gallery img{
	display: block;
	width: 100%;
	height: auto;
}
  
  
	




/* SEC03 PROJECT
------------------------------------------------------------*/
.col4 .img{
	margin: 0 auto;
}


  
  



/* SEC04 WORKS
------------------------------------------------------------*/
#sec04{
	padding-bottom: 0 !important;
}

.article{
	clear: both;
	overflow: hidden;
}

.article img{
	float: left;
	margin: 0 auto;
}


.container {
	position: relative;
	margin: 0 auto;
	width: 85%;
	padding-bottom: 60%
  }
  .image {
	position: absolute;
	width: 100%;
	opacity: 0;
	animation: change-img-anim 19s infinite;
  }
  .image:nth-of-type(1) {
	animation: change-img-anim-first 19s infinite;
	animation-delay: 0s;
  }
  .image:nth-of-type(2) {
	animation-delay: 5s;
  }
  .image:nth-of-type(3) {
	animation-delay: 9s;
  }
  .image:nth-of-type(4) {
	animation-delay: 13s;
  }
  .image:nth-of-type(5) {
	animation-delay: 17s;
  }
  
  @keyframes change-img-anim-first {
	0%{ opacity: 1;}
	25%{ opacity: 1;}
	30%{ opacity: 1;}
	50%{ opacity: 0;}
	100%{ opacity: 0;}
  }
  @keyframes change-img-anim {
	0%{ opacity: 0;}
	25%{ opacity: 1;}
	30%{ opacity: 1;}
	50%{ opacity: 0;}
	100%{ opacity: 0;}
  }


  .workflow {
	position: relative;
	margin: 0 auto;
	width: 95%;
  }

  

  @keyframes infinity-scroll-left {
	from {
	  transform: translateX(0);
	}
	  to {
	  transform: translateX(-100%);
	}
	}
	.scroll-infinity__wrap {
	  display: flex;
	  overflow: hidden;
	}
	.scroll-infinity__list {
	  display: flex;
	  list-style: none;
	  padding: 0
	}
	.scroll-infinity__list--left {
	  animation: infinity-scroll-left 60s infinite linear 0.5s both;
	}
	.scroll-infinity__item {
	  width: calc(100vw / 1.3);
	}
	.scroll-infinity__item>img {
	  width: 100%;
	}


  
  


  /* solid017 */
.button_solid017 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 300px;
    padding: 10px 25px;
    color:rgb(255, 255, 255);
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: rgb(147, 55, 55);
    border-radius: 50px;
    border: 0.2rem solid rgb(147, 55, 55);
    box-shadow: 0.2rem 0.2rem 0px 0.1rem #000000;
}
.button_solid017 a:hover {
  transform: translate3d(0.2rem, 0.2rem, 0);
  box-shadow: none;
  opacity: 1;
  transition: all 0.2s;
}
.button_solid017 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}




/* solid019 */
.button_solid019 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 350px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background:rgb(147, 55, 55);
    filter: drop-shadow(0px 2px 4px #4e4e4e);
    border-radius: 3px;
    border-radius: 50px;
}
.button_solid019 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 46%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button_solid019 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(54, 54, 54, 0.15), 0 0 5px rgba(55, 55, 55, 0.15);
}



/* SEC05 CONTACT
------------------------------------------------------------*/
#sec05 p{
	margin-bottom: 4px;
}

.col2 li{
	display: inline-block;
	width: 100%;
  margin: 0px 0;
  margin-bottom: 16px;
}

#gorira{
	display: inline-block;
	position: relative;
	padding-bottom: 22%;
	height: 0;
	overflow: visible;
	z-index: auto;
	margin-bottom: 20px;
}

.follow-me {
	list-style: none;
	margin: 0 0 -8px;
	overflow: hidden;
	padding: 0;
	margin-bottom: 20px;
  }
  .follow-me li {
	float: left;
	margin: 0 12px 12px 0;
	padding: 0;
  }
  .follow-me li a::before {
	background-color: #eee;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #333;
	display: inline-block;
	font-family: FontAwesome;
	font-size: 24px;
	height: 36px; /* Button height */
	line-height: 36px; /* Button height */
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	text-align: center;
	width: 36px; /* Button width */
  }
  .follow-me li a:hover::before {
	color: #fff;
  }

  .follow-me li a[href*="amazon.co.jp"]::before,
  .follow-me li a[href*="amazon.com"]::before,        { content: "\f270"; }
  .follow-me li a[href*="codepen.io"]::before         { content: "\f1cb"; }
  .follow-me li a[href*="delicious.com"]::before      { content: "\f1a5"; }
  .follow-me li a[href*="deviantart.com"]::before     { content: "\f1bd"; }
  .follow-me li a[href*="digg.com"]::before           { content: "\f1a6"; }
  .follow-me li a[href*="dribble.com"]::before        { content: "\f17d"; }
  .follow-me li a[href*="dropbox.com"]::before        { content: "\f16b"; }
  .follow-me li a[href*="facebook.com"]::before       { content: "\f09a"; }
  .follow-me li a[href*="feedly.com"]::before         { content: "\f09e"; }
  .follow-me li a[href*="flickr.com"]::before         { content: "\f16e"; }
  .follow-me li a[href*="foursquare.com"]::before     { content: "\f180"; }
  .follow-me li a[href*="github.com"]::before         { content: "\f09b"; }
  .follow-me li a[href*="plus.google.com"]::before    { content: "\f0d5"; }
  .follow-me li a[href*="b.hatena.ne.jp"]::before     { content: "\f027"; font-family: blogicon; }
  .follow-me li a[href*="instagram.com"]::before      { content: "\f16d"; }
  .follow-me li a[href*="last.fm"]::before            { content: "\f202"; }
  .follow-me li a[href*="linkedin.com"]::before       { content: "\f0e1"; }
  .follow-me li a[href*="nicovideo.jp"]::before       { content: "\f047"; font-family: blogicon; }
  .follow-me li a[href*="pinterest.jp"]::before      { content: "\f0d2"; }
  .follow-me li a[href*="getpocket.com"]::before      { content: "\f265"; }
  .follow-me li a[href*="reddit.com"]::before         { content: "\f1a1"; }
  .follow-me li a[href*="skype.com"]::before,
  .follow-me li a[href*="skype:"]::before             { content: "\f17e"; }
  .follow-me li a[href*="slideshare.net"]::before     { content: "\f1e7"; }
  .follow-me li a[href*="spotify.com"]::before        { content: "\f1bc"; }
  .follow-me li a[href*="steamcommunity.com"]::before { content: "\f1b6"; }
  .follow-me li a[href*="stumbleupon.com"]::before    { content: "\f1a4"; }
  .follow-me li a[href*="tumblr.com"]::before         { content: "\f173"; }
  .follow-me li a[href*="twitch.tv"]::before          { content: "\f1e8"; }
  .follow-me li a[href*="twitter.com"]::before        { content: "\f099"; }
  .follow-me li a[href*="vimeo.com"]::before          { content: "\f27d"; }
  .follow-me li a[href*="vine.co"]::before            { content: "\f1ca"; }
  .follow-me li a[href*="weibo.com"]::before          { content: "\f18a"; }
  .follow-me li a[href*="whatsapp.com"]::before       { content: "\f232"; }
  .follow-me li a[href*="wordpress.com"]::before,
  .follow-me li a[href*="wordpress.org"]::before      { content: "\f19a"; }
  .follow-me li a[href*="youtube.com"]::before        { content: "\f16a"; }
  .follow-me li a[href$="/feed"]::before              { content: "\f09e"; }
  .follow-me li a[href$="/subscribe"]::before         { content: "\f000"; font-family: blogicon; }
  .follow-me li a[href$="/subscribe"]::before         { content: "\f000"; font-family: blogicon; }
  .follow-me li a[href$="gmail.com"]::before          { content: "\f0e0"; }
  .follow-me li a[href$="japanesehors@redspottedwoodpecker-5"]::before      { content: "\e900"; font-family: 'icomoon'}
  
  .follow-me li a[href*="amazon.co.jp"]:hover::before,
  .follow-me li a[href*="amazon.com"]:hover::before,        { background-color: #ff9900; }
  .follow-me li a[href*="codepen.io"]:hover::before         { background-color: #000000; }
  .follow-me li a[href*="delicious.com"]:hover::before      { background-color: #3399ff; }
  .follow-me li a[href*="deviantart.com"]:hover::before     { background-color: #05cc47; }
  .follow-me li a[href*="digg.com"]:hover::before           { background-color: #000000; }
  .follow-me li a[href*="dribble.com"]:hover::before        { background-color: #ea4c89; }
  .follow-me li a[href*="dropbox.com"]:hover::before        { background-color: #007ee5; }
  .follow-me li a[href*="facebook.com"]:hover::before       { background-color: #3b5998; }
  .follow-me li a[href*="feedly.com"]:hover::before         { background-color: #6cc655; }
  .follow-me li a[href*="flickr.com"]:hover::before         { background-color: #0063dc; }
  .follow-me li a[href*="foursquare.com"]:hover::before     { background-color: #f94877; }
  .follow-me li a[href*="github.com"]:hover::before         { background-color: #181717; }
  .follow-me li a[href*="plus.google.com"]:hover::before    { background-color: #dc4e41; }
  .follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { background-color: #008fde; }
  .follow-me li a[href*="instagram.com"]:hover::before      { background-color: #b50b60; }
  .follow-me li a[href*="last.fm"]:hover::before            { background-color: #d51007; }
  .follow-me li a[href*="linkedin.com"]:hover::before       { background-color: #0077b5; }
  .follow-me li a[href*="nicovideo.jp"]:hover::before       { background-color: #eaeaea; }
  .follow-me li a[href*="pinterest.jp"]:hover::before      { background-color: #bd081c; }
  .follow-me li a[href*="getpocket.com"]:hover::before      { background-color: #ef3f56; }
  .follow-me li a[href*="reddit.com"]:hover::before         { background-color: #ff4500; }
  .follow-me li a[href*="skype.com"]:hover::before,
  .follow-me li a[href*="skype:"]:hover::before             { background-color: #00aff0; }
  .follow-me li a[href*="slideshare.net"]:hover::before     { background-color: #2d2d2d; }
  .follow-me li a[href*="spotify.com"]:hover::before        { background-color: #84bd00; }
  .follow-me li a[href*="steamcommunity.com"]:hover::before { background-color: #171a21; }
  .follow-me li a[href*="stumbleupon.com"]:hover::before    { background-color: #eb4929; }
  .follow-me li a[href*="tumblr.com"]:hover::before         { background-color: #36465d; }
  .follow-me li a[href*="twitch.tv"]:hover::before          { background-color: #6441a5; }
  .follow-me li a[href*="twitter.com"]:hover::before        { background-color: #55acee; }
  .follow-me li a[href*="vimeo.com"]:hover::before          { background-color: #1ab7ea; }
  .follow-me li a[href*="vine.co"]:hover::before            { background-color: #11b58a; }
  .follow-me li a[href*="weibo.com"]:hover::before          { background-color: #e6162d; }
  .follow-me li a[href*="whatsapp.com"]:hover::before       { background-color: #64d548; }
  .follow-me li a[href*="wordpress.com"]:hover::before,
  .follow-me li a[href*="wordpress.org"]:hover::before      { background-color: #21759b; }
  .follow-me li a[href*="youtube.com"]:hover::before        { background-color: #cd201f; }
  .follow-me li a[href$="/feed"]:hover::before              { background-color: #ffa500; }
  .follow-me li a[href$="/subscribe"]:hover::before         { background-color: #363636; }
  .follow-me li a[href$="gmail.com"]:hover::before         { background-color: #e92626; }
  .follow-me li a[href$="japanesehors@redspottedwoodpecker-5"]:hover::before         { background-color: #14c11d; }




/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 800px){
	body{
		font-size:14px;
	}
	
	#wrapper{
		width: 100%;
	}
	
	#content{
		width: 80%;
	}
	
	#sidebar{
		width: 12%;
		position: fixed;
		top: 0;
		right: 4%;
		background: rgb(84, 80, 78);
	}
	
  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}
	
	#sidebar h1{
		padding: 25px 0;
	}

	#mainnav li{
		font-size: 16px;
		padding: 8px 0;
	}
	
	#sns{
		margin-top: 20px;
	}
	
	#sns li{
		display: inline-block;
		padding-right: 10px;
	}

	#sns a:hover img{
		opacity: .8;
	}
	
	/* SEC03 BRAND
	-----------------*/
	.col4{
		text-align: center;
	}

	.col4 li{
		display: inline-block;
		width: 26%;
		padding: 0 3%;
		vertical-align: top;
		text-align: left;
	}
	
	#map iframe{
		height: 200px !important;
  }
	
  #footer{
		padding: 30px 10px 70px 0;
	}
}


@media only screen and (min-width: 641px){
	.col2 li{
		width: 60%;
		vertical-align: top;
	}
	.col2 li:first-child{
		width: 80%;
		padding-right: 4%;
	}
}

@media only screen and (max-width: 640px){
	.inner{
		font-size: 12px;
	}
	.innerL{
		font-size: 12px;
	}
	.innerS{
		width: 94%;
		padding-bottom: 30px;
		font-size: 10px;
	}
	.innerSS{
		width: 94%;
		padding-bottom: 30px;
		font-size: 12px;
	}
	.container {
		width: 95%;
		padding-bottom: 70%
	}
	#gallery li{
		float: none;
		width: 100%;
	}
	.article img{
		float: none;
		display: block;
		margin: 0 auto 20px;
	}
	#map iframe{
		width: 96% !important;
		left: 2%;
	}
}

@media only screen and (max-width: 799px){
	#sidebar{
		position: fixed;
		width: 100%;
		z-index:500;
	}
	
	#sidebarWrap{
		position: relative;
		width: 100%;
		height: 60px;
		background: rgb(147, 55, 55);
		border-bottom: 1px rgb(147, 55, 55);
	}
	
	#sidebar h1{
		text-align: center;
		padding-top: 15px;
	}
	
	#sidebar h1 img{
		width: auto !important;
		max-height: 25px;
	}
	
  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #fff;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #fff;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: -10px;
		z-index: 100;
	}

	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
	}

	#mainnav ul{
		border-bottom: 1px solid #ccc;
		background: rgb(147, 55, 55);
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display: block;
		padding: 15px 25px;
		border-bottom: 1px solid #ccc;
		color: #fff;
		font-weight: 600;
	}
	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#mainnav #sns li{
		display: inline-block;
	}
	#mainnav #sns li a{
		position: relative;
		display: inline-block;
		padding: 15px 10px 0;
		border: 0;
	}
	#mainnav #sns li a:before{
		border: 0;
	}
	.col4 li{
		margin: 0 auto 50px;
		display: block;
		text-align: center;
	}
	section h2{
		margin: 55px auto;
	}

	@font-face {
		font-family: 'icomoon';
		src:  url('icomoon/fonts/icomoon.eot?4r7hdt');
		src:  url('icomoon/fonts/icomoon.eot?4r7hdt#iefix') format('embedded-opentype'),
		  url('icomoon/fonts/icomoon.ttf?4r7hdt') format('truetype'),
		  url('icomoon/fonts/icomoon.woff?4r7hdt') format('woff'),
		  url('icomoon/fonts/icomoon.svg?4r7hdt#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
		font-display: block;
	  }
	  
	  [class^="icon-"], [class*=" icon-"] {
		/* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'icomoon' !important;
		speak: never;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
	  
		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	  }
	  
	  .icon-line:before {
		content: "\e900";
	  }
}