/*	.sns-icons
============================== */
div.sns-icons {
	background-color:hsla(0,0%,100%,0.7);
}
div.sns-icons aside {
	display:flex;
	justify-content:center;
	align-items:center;
}
div.sns-icons aside > h2, div.sns-icons aside > h3,
div.sns-icons aside > p {
	line-height:1.5;
	font-weight:bold;
	width:50%;
}
div.sns-icons ul li span, div.sns-icons ul li a {
	display:block;
}
div.sns-icons ul {
	display:flex;
	justify-content:left;
	width:50%;
}
div.sns-icons ul li a {
	position:relative;
	height:0;
	padding-top:100%;
	overflow:hidden;
	border-radius:50% 50%;
}
div.sns-icons ul li a span {
	background-size:300% 300%;
	background-image:url(/um/img/sns_logos.svg);
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.sns-icons ul li.tw a span {
	background-color:#1da1f2;
	background-position:left top;
}
div.sns-icons ul li.fb a span {
	background-color:#1877f2;
	background-position:center bottom;
}
div.sns-icons ul li.ln a span {
	background-color:#00b900;
	background-position:right top;
}
div.sns-icons ul li.ig a span {
	background-color:#cf2e92;
	background-position:center center;
}
div.sns-icons ul li.yt a span {
	background-color:#da1725;
	background-position:left center;
}
div.sns-icons ul li.tt a span {
	background-color:#000;
	background-position:right bottom;
}
@media all and (min-width: 768px) {
div.sns-icons {
	padding:25px 0;
}
div.sns-icons aside {
	max-width:640px;
	margin:0 auto;
}
div.sns-icons aside > h2, div.sns-icons aside > h3,
div.sns-icons aside > p {
	margin-right:32px;
}
div.sns-icons aside > h2, div.sns-icons aside > h3,
div.sns-icons aside > p {
	font-size:150%;
}
div.sns-icons ul li {
	width:calc((100% - 20*2px)/3);
}
div.sns-icons ul li:not(:last-child) {
	margin-right:20px;
}
}
@media all and (max-width: 767px) {
div.sns-icons {
	padding:15px 12px;
}
div.sns-icons aside > h2, div.sns-icons aside > h3,
div.sns-icons aside > p {
	font-size:3.5vw;
}
div.sns-icons ul li {
	width:calc((100% - 10*2px)/3);
}
div.sns-icons ul li:not(:last-child) {
	margin-right:10px;
}
}

/*	sns
============================== */
div.sns {
	background-color:hsla(202,89%,53%,0.9);
}
div.sns > aside section h3 {
	color:#fff;
	/**/
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	/**/
	line-height:1.25;
	margin-bottom:0.25em;
}
div.sns > aside section h3:before {
	content:"";
	display:inline-block;
	background-image:url(/um/img/sns_logos.svg);
}
div.sns > aside div.tw-outer section h3:before {
	background-position:left top;
}
.tw-inner {
	background-color:#fff;
}
@media all and (min-width: 768px) {
div.sns {
	padding:40px 0;
}
div.sns > aside {
	max-width:800px;
	margin:0 auto;
}
div.sns > aside section h3 {
	font-size:300%;
	margin-bottom:0.3em;
}
div.sns > aside section h3:before {
	width:84px;
	height:84px;
	background-size:252px 252px;
	margin-bottom:-0.5em;
}
}
@media all and (max-width: 767px) {
div.sns {
	padding:10px 0 20px;
}
div.sns > aside section h3 {
	font-size:250%;
}
div.sns > aside section h3:before {
	width:64px;
	height:64px;
	background-size:192px 192px;
	margin-bottom:-0.4em;
}
.tw-outer {
	margin:0 30px;
}
}


div.sns aside section p.copy {
	color:#ff6;
	line-height:1.5;
	margin-bottom:0.5em;
}
div.sns aside section p.copy > b {
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(0,0%,0%,0.1)), to(hsla(0,0%,0%,0.1)));
	background-image: linear-gradient(transparent 50%, hsla(0,0%,0%,0.1) 50%);
}
@media all and (min-width: 768px) {
div.sns aside section p.copy {
	font-size:200%;
}
}
@media all and (max-width: 767px) {
div.sns aside section p.copy {
	font-size:125%;
}
}