/*	sns icons
============================== */

div.sns-icons > aside {
	display:table;
	margin:0 auto;
}
div.sns-icons > aside > div {
	display:table-cell;
	width:50%;
	vertical-align:middle;
}
div.sns-icons > aside > div:first-child {
	width:60%;
}
div.sns-icons > aside > div:last-child {
	width:40%;
}
div.sns-icons > aside > div:first-child h2,
div.sns-icons > aside > div:first-child p {
	text-align:center;
	line-height:1.5;
}
div.sns-icons ul.icons li span, div.sns-icons ul.icons li a {
	display:block;
}
div.sns-icons ul {
	text-align:left;
	width:100%;
}
div.sns-icons ul.icons li {
	width:33.333333333333333%;
	float:left;
}
div.sns-icons ul.icons li span a {
	position:relative;
	height:0;
	padding-top:100%;
	overflow:hidden;
	border-radius:50% 50%;
}
div.sns-icons ul.icons li span a span {
	background-size:300% 300%;
	background-image:url(/um/img/sns_logos.svg?0);
}
div.sns-icons ul.icons li.tw span a span {
	background-color:#1da1f2;
	background-color:#000;
	background-position:left top;
}
div.sns-icons ul.icons li.fb span a span {
	background-color:#1877f2;
	background-position:center bottom;
}
div.sns-icons ul.icons li.ln span a span {
	background-color:#00b900;
	background-position:right top;
}
div.sns-icons ul.icons li.ig span a span {
	background-color:#cf2e92;
	background-position:center center;
}
div.sns-icons ul.icons li.yt span a span {
	background-color:#da1725;
	background-position:left center;
}
div.sns-icons ul.icons li.tt span a span {
	background-color:#000;
	background-position:right bottom;
}
div.sns-icons ul.icons li span a span {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
@media all and (min-width: 768px) {
div.sns-icons {
	padding:25px 0;
}
div.sns-icons > aside {
	width:540px;
}
div.sns-icons > aside > div:first-child h2 {
	font-size:150%;
}
div.sns-icons > aside > div:first-child p {
	font-size:83%;
}
div.sns-icons ul.icons li:nth-child(3n-2) > span {
	margin-right:12px;
}
div.sns-icons ul.icons li:nth-child(3n-1) > span {
	margin-left:6px;
	margin-right:6px;
}
div.sns-icons ul.icons li:nth-child(3n) > span {
	margin-left:12px;

}
}
@media all and (max-width: 767px) {
div.sns-icons {
	padding:15px 20px 15px 0;
}
div.sns-icons > aside {
	width:100%;
}
div.sns-icons > aside > div:first-child h2 {
	font-size:4.5vw;
}
div.sns-icons > aside > div:first-child p {
	font-size:2vw;
}
div.sns-icons ul.icons li:nth-child(3n-2) > span {
	margin-right:6px;
}
div.sns-icons ul.icons li:nth-child(3n-1) > span {
	margin-left:3px;
	margin-right:3px;
}
div.sns-icons ul.icons li:nth-child(3n) > span {
	margin-left:6px;

}
}

/*	sns
============================== */
div.sns {
	background-color:hsla(0,0%,100%, 0.8);
}
div.sns > aside section h3 {
	font-size:300%;
	font-family:'Damion';
	font-weight:normal;
	line-height:1.25;
	margin-bottom:0.2em;
}
div.sns > aside section h3:before {
	content:"";
	display:inline-block;
	background-image:url(/um/img/sns_logos_blk.svg?0);
	width:64px;
	height:64px;
	background-size:192px 192px;
	margin-bottom:-0.3em;
}
div.sns > aside div.tw-outer section h3:before {
	background-position:left top;
}
div.sns > aside div.ig-outer section h3:before {
	background-position:center center;
}
.tw-inner {
	background-color:#fff;
}
@media all and (min-width: 768px) {
div.sns {
	padding:20px 0 40px;
}
div.sns > aside {
	max-width:1080px;
	margin:0 auto;
	padding-top:30px;
}
div.sns > aside .tw-outer, div.sns > aside .ig-outer {
	width:50%;
}
div.sns aside .tw-outer {
	float:left;
}
div.sns aside .ig-outer {
	float:right;
}
div.sns aside .tw-outer > section {
	margin-right:15px;
}
div.sns aside .ig-outer > section {
	margin-left:15px;
}
}
@media all and (max-width: 767px) {
div.sns {
	padding:10px 0 25px;
}
div.sns > aside {
	padding-top:20px;
}
div.sns > aside section h3:before {
	width:64px;
	height:64px;
	background-size:192px 192px;
}
.tw-outer {
	margin:0 30px 25px;
}
.ig-outer {
	margin:0 20px;
}
}