/* =======================================

    socialmedia sp

======================================= */

@media screen and (max-width: 768px) {
	.sns-area .sns-list {
		max-width: 100%;
	}
	.sns-list .list-box .listL, .sns-list .list-box .listR{
		width: 100%;
		display: block;
	}
	.sns-list .list-box h2 {
		margin-top: 20px;
		font-size: 15px;
		line-height: 1.3em;
		margin-bottom: 5px;
	}
	.sns-list .list-box h3 {
		font-size: 12px;
		line-height: 1.3em;
	}
	.sns-list .list-box span {
		font-size: 10px;
		padding: 4px 7px;
		overflow: hidden;
	}
	.sns-list .list-box img {
		 /*width: 100%;*/
		margin-right: 0px;
		margin-bottom: 10px;
	}
	.sns-list .list-box .icons-list ul {
		clear: both;
		height: 250px;
	}
	.sns-list .list-box {
		padding-bottom: 20px;
	}
	.sns-list .list-box p {
		font-size: 12px;
		 /*max-width: 77%;*/
		margin-bottom: 0;
	}
	.sns-list .list-box .btn {
		width: 240px !important;
		display: block !important;
		margin: 10px auto !important;
		text-align: center !important;
		float: none;
	}
	.attention{
		text-align: right;
		margin: 35px 0 13px 0;
	}
	.list-box .btn img {
		width: 240px !important;
		display: block !important;
		margin: 0 auto !important;
	}
	img {
		max-width: 100%;
		height: auto;
	}

	.social table {
		max-width: 100%;
		border: none !important;
	}
	.social .ttl {
		font-size: 14px;
		line-height: 21px;
	}
	.social .facebookmark, .social .twittermark, .social .cymark, .social .youtubemark {
		display: list-item !important;
		width: 100% !important;
		padding: 10px;
		font-size: 20px;
		box-sizing: border-box;
		vertical-align: middle;
	}
	.social .facebookmark p, .social .twittermark p, .social .cymark p, .social .youtubemark p {
		display: inline-block;
		float: left;
		padding: 0;
		font-size: 18px;
	}
	.social tr, .social th, .social td {
		display:block;
	}
	/*ie9*/
	:root .social tr, :root .social th, :root .social td {
		display:block;
		float: left\0/;
		clear: both\0/;
	}
	.social th img {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
	.social th {
		height: 51px;
	}
	.social th, .social td {
		width: 100% !important;
		padding: 0 0 20px;
	}
	.social tr {
		border-bottom: none;
	}
	.social dl {
		display: block;
		width: 100%;
		clear: both;
		border-bottom: 1px dotted #bbb;
		padding: 20px 0;
	}
	.social dt {
		width: 15%;
		float: left;
		padding-right: 4%;
	}
	.social dd {
		width: 81%;
		float: left;
	}
	.social .icons {
		 /*padding: 0 15px;*/
		font-size: 13px;
		 /*background-color: transparent;*/
	}
	.sns-list .list-box {
		
	}
	.social .icons img {
		width: 40px;
		height: 40px;
		 /*margin-top: -5px;*/
	}
	.sns-list .icons-list img {
    		margin: 0 15px 0 0px;
		padding-top: 0;
	}
	.social .icons li {
		box-sizing: border-box;
		font-size: 13px;
		float: left;
		padding: 13px 0;
		width: 25%;
	 }
	.social .icons-list{
		padding: 10px 0px 10px 20px;
	}
	.social .icons-list li{
		text-align: left;
		padding: 10px 0;
	}
	.social .icons-list li:nth-child(2n+1) {
		width: 60%;
	}
	.social .icons-list li:nth-child(2n) {
		width: 40%;
	}
	.social table td img {
		width: 100%;
		height: auto;
	}

	.list-box .listL{
	text-align: center;
	}


	.social #facebook .f-url,
	.social #twitter .tw-url,
	.social #community .cy_url {
		border-bottom: none;
		padding: 0;
	}
	.social .cy_url .left {
		width: 100%;
		float: left;
		box-sizing: border-box;
	}
	.social .cy_url .right {
		width: 100%;
		float: left;
		box-sizing: border-box;
		border-bottom: 1px dotted #bbb;
/*		margin-bottom: 20px;*/
	}
	.social .yt_url .left {
		width: 100%;
		float: left;
		box-sizing: border-box;
	}

	.social .yt_url .right {
		width: 100%;
		float: left;
		box-sizing: border-box;
		border-bottom: 1px dotted #bbb;
/*		margin-bottom: 20px;*/
	}
	.social .sns-ttl {
		padding-top: 7px !important;
	}
	.social .txt {
		font-size: 13px;
		line-height: 20px;
	}
	.social .url {
		margin-bottom: 5px;
	}
	.mt-m {
		margin-top: -10px;
	}
	.social .f-url .left-last,
	.social .cy_url .left-last,
	.social .tw-url .left-last {
		border-bottom: 1px dotted #bbb;
	}
	.social dl.tw_url {
		padding: 20px 0 20px !important;
	}
	.link-pagetop {
		width: 100%;
		text-align: right;
		margin-top: -5px;
		display: block;
		text-decoration: underline;
		font-size: 12px!important;
	}
	.link-pagetop a {
		color: #000 !important;
	}
	#contents {
		margin-bottom: 10px;
	}
	.list-box .list-content .listL {
	width: 60%;
	margin-right: 15px;
	}
	.list-box .list-content .listR h2 {
	margin-top: 0;
	}
	.list-box  .list-content .listR h3{
	margin-bottom: 5px;
	}
	.list-box .list-content .listR img {
	width: 32px;
    	height: 32px;
	}


	.caution {
   	margin-top: 35px;
	}
}