@charset "UTF-8";

#container>footer {
	padding: 80px 12px;
	width: 100%;
	color: #fff;
	background: rgba(76,76,76,0.6);
	box-sizing: border-box; 
	
	font-size: 13px;
	color: #606060;
	background: #e6e6e6;	

	/* border-bottom: #000 solid 8px; */
}

#container>footer.shv{
	background: rgba(0,0,0, .66) url('/assets/labo/verticalwriting/images/titlebg.jpg') no-repeat 0 0;
	background-blend-mode:multiply;
	background-size:  100% auto;
}


#container>footer p.cp {
  text-align: center;
  font-size: 10px; 
  line-height: 14px;
}

#container #footerNav {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-bottom: 12px; 
  margin-bottom: 20px;
 }

#container #footerNav li {
	margin-right: 8px;
	padding-right: 8px;
	border-right: #666 solid 1px; 
}
	
#container #footerNav li:last-child {
	margin: 0;
	padding: 0;
	border: 0; 
  }

#container #footerNav li a	  
#container #footerNav a, 
#container #footerNav a:link, 
#container #footerNav a:visited 
{
	height: 16px;
    color: #f3f3f3;
    font-size: 12px;
    line-height: 16px; 
}

#container footer.light #footerNav li a	  
#container footer.light #footerNav a, 
#container footer.light #footerNav a:link, 
#container footer.light #footerNav a:visited 
{
	height: 16px;
    color: unset;
    font-size: 12px;
    line-height: 16px; 
}

#snsBox {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin-bottom: 12px;
}

#snsBox {
	display: grid;
	grid-template-columns: repeat(4, 28px);
	grid-template-rows: 28px;
	grid-gap: 4px;
	margin-bottom: 12px;
}

#snsBox figure{
	
}

#container>footer #snsBox a {
	display: table;
	margin-right: 8px;
	width: 28px;
	height: 28px;
	color: #fff;
	border-radius: 50%; 
	box-sizing: content-box;
	box-shadow: 0 0px 4px 2px rgba(255,255,255,0.2);
 }

#container>footer #snsBox a i {
  display: table-cell;
  vertical-align: middle;
  text-align: center; }

#container>footer #snsBox a i.fa-2x {
  font-size: 1rem; }

#container>footer #snsBox a:last-child {
  margin-right: 0; }

/* LINE +++++++++++++++++++++++++++++++++++++++ */
#container>footer #snsBox a {
  position: relative;
  z-index: 11;
  display: table;
  width: 28px;
  height: 28px;
  background: #8d8d8d;
  border-radius: 50%; }



#container>footer p {
	font-size: 0.7rem; 
	text-align: center; 
 }
  
 #container>footer #snsBox.mono a {
  background-color: #424251; }
 }

/* Coloring */
#container>footer #snsBox.color a#fb {
  background: #1877f2; }

#container>footer #snsBox.color a#tw {
  background: #1DA1F2; }

#container>footer #snsBox.color a#in {
  background: #f50000;
  background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000); }
  
#container footer div#snsBox.mono a#li.line{
	background-image: url("/assets/svg/line.svg");	
	background-size: 64%;
	background-position: center;
	background-repeat: no-repeat;
}

#container>footer #snsBox a.facebook {
  background-image: url("/assets/shv/svg/facebook.svg");
  background-size: auto 50%;
  background-position: center;
	background-repeat: no-repeat;
  }

#container>footer #snsBox a.twitter {
  background-image: url("/assets/shv/svg/twitter.svg");
  background-size: 56%;
  background-position: center;
	background-repeat: no-repeat;
}

#container>footer #snsBox a.instagram {
  background-image: url("/assets/shv/svg/instagram.svg");
  background-size: 56%;
  background-position: center;
	background-repeat: no-repeat;
}

#container>footer #snsBox a.line {
  background-image: url("/assets/shv/svg/line.svg");
  background-size: auto 88%;
  background-position: center;
	background-repeat: no-repeat;
}


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

  #container>footer ul{
	flex: 0 0 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	  
  }
  
  #container>footer p a,
  #container>footer p a:visited,
  #container>footer p a:link 
  {
		margin: 0 auto;
		width: auto;
		font-size: 10px;
		line-height: 12px; 
	}

  #container>footer p.cp
  {
    font-size: 10px;
    margin: 0 auto;
    text-align: center;
    width: 100%; }

  #container>footer ul,
  #container>footer p {
    margin: 0 auto;
    text-align: center;
    width: 100%; } 
	
}

/*# sourceMappingURL=#container>footer.css.map */