@charset "UTF-8";

/* ==========================================================================
   SNS STYLES (sns.css)
   ========================================================================== */

/* ----- サイトトップのSNSアカウントモジュール -------------------- */

.wrapper-sns-account { background: none; width: 100%; max-width: 100%; }
.module-sns-account .sns-txt { font-size: 1.2em; margin-top: 0; margin-bottom: 30px; color: #003f88; text-align: center; }
.sns-account { padding-top: 0px; width: 85%; margin-left: auto; margin-right: auto;}
.sns-account ul { padding-left: 0px; }

.sns-account .sns-list { display: flex; flex-wrap: wrap; justify-content: center; list-style:none; gap:20px; }
.sns-account .sns-list-item-link { display: block; }
.sns-account .sns-icon {height: 60px; width: 60px;}

@media screen and (max-width: 768px) {
	.sns-account .sns-list { display: flex; flex-wrap: wrap; gap: 10px;
		justify-content: center; list-style:none; margin-top: 5px; margin-bottom: 10px;}
	.sns-account .sns-list-item-link { display: block; margin: 5px; }
	.sns-account .sns-icon {height: 45px; width: 45px; }
	}

/* ------ ハンバーガーメニュー内 ----- */

.menu-sns-account .sns-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; 
	margin-top:30px; margin-bottom: 0px; justify-content: left; }
.menu-sns-account .sns-list-item { margin-right: 5px; }
.menu-sns-account .sns-icon { height: 50px; width: 50px; }
@media screen and (max-width: 768px) { 
  .menu-sns-account .sns-icon { height: 40px; width: 40px; }
	} 

/* ------ プロフィール部分 ----- */

.prof-sns { border-top: 3px solid #fff; border-bottom: 3px solid #fff; margin-top: 2em; margin-bottom: 2em; }

.prof-sns ul { padding-left: 0px; }

.prof-sns .sns-list { display: flex; flex-wrap: wrap; justify-content: center; list-style:none; gap:20px; }
.prof-sns .sns-list-item-link { display: block; }
.prof-sns .sns-icon {height: 50px; width: 50px;}

@media screen and (max-width: 768px) {
	.prof-sns .sns-list { display: flex; flex-wrap: wrap; gap: 10px;
		justify-content: center; list-style:none; margin-top: 30px; margin-bottom: 30px;}
	.prof-sns .sns-list-item-link { display: block; margin: 5px; }
	.prof-sns .sns-icon {height: 45px; width: 45px; }
	}

/* ----- シェアボタン -------------------- */

.sns-share-wrap { margin-top: 60px; margin-bottom:0px; }
.share-btn-container { display: flex; flex-wrap: wrap; justify-content: center; list-style:none; padding-left: 0px; }

.share-txt {text-align: center; font-weight: 700; margin-top: 20px; margin-bottom: 0px;}
.sns-share-wrap { color:#003f88; }
.sns-share-wrap h3::before {
	content: '\f1e0'; font-family: "Font Awesome 5 Free"; font-weight: 900;
	font-size:inherit; margin-right: .5em;
}

.share-btn-card-container { width:24.3%; text-align:center; }
.share-btn-container li { margin-bottom:5px; margin-right:10px; }
.share-btn-container li:first-child { margin-right:10px; }
.share-btn-container li:last-child { margin-right:0px;}
@media screen and (max-width: 1120px) {
	.share-btn-card-container { width:49.4%; }
	.share-btn-container li:last-child { margin-right:0px;}
	.share-btn-container li:nth-child(2) { margin-right:0px; }
	.share-btn-container li:nth-child(3) { margin-right:10px; }
	}
@media screen and (max-width:1024px) {
	.share-btn-card-container { width:49%; }
	.share-btn-container li:last-child { margin-right:0px;}
	.share-btn-container li:nth-child(2) { margin-right:0px; }
	.share-btn-container li:nth-child(3) { margin-right:10px; }
	}
@media screen and (max-width: 768px) {
	.share-btn-card-container { width:47.5%; padding-bottom:4px;}
	.share-btn-container li { margin-right:5px; }
	.share-btn-container li:first-child { margin-right:6px; }
	.share-btn-container li:last-child { margin-right:0px;}
	.share-btn-container li:nth-child(2) { margin-left:6px; margin-right:0px; }
	.share-btn-container li:nth-child(3) { margin-left:0px; margin-right:6px; }
	.share-btn-container li:nth-child(4) { margin-left:6px; margin-right:0px; }
	}
	/*
	.share-btn-card-container { width:60%; }
	.share-btn-container li:first-child { margin-right:0px; }
	.share-btn-container li:last-child { margin-right:0px;}
	.share-btn-container li:nth-child(2) { margin-right:0px; }
	.share-btn-container li:nth-child(3) { margin-right:0px; }
	}
	*/

.twitter-share,.facebook-share,.line-share, .url-copy { 
	font-size:.9rem; letter-spacing: 0em; line-height:1.1rem; display: inline-block; white-space: nowrap;
	margin-top: 5px; padding: 8px 8px; text-decoration: none; width:100%; border-radius: 5px;
	}

.twitter-share { color: #ffffff; background: #000; }
.facebook-share { color: #ffffff; background: #4267B2; }
.line-share { color: #ffffff; background: #00b900; }
.url-copy { color: #ffffff; background: #008080; }

.twitter a::before,.twitter-share::before	{font-family: "FontAwesome"; content:"\e61a"; margin-right:5px;}
.facebook a::before,.facebook-share::before	{font-family: "FontAwesome"; content:"\f09a"; margin-right:5px;}
.line-share::before	{font-family: "FontAwesome"; content:"\f3c0"; margin-right:5px;}
.url-copy::before {font-family: "FontAwesome"; content:"\f0c1"; margin-right:5px;}

.twitter-share:hover,.twitter-share:active, .facebook-share:hover,.facebook-share:active,
.line-share:hover,.line-share:active,.url-copy:hover,url-copy:active {color:#003f88; background: #ffc000;}

/* ----- ヘッダーにSNSアイコンを配置 -------------------- */

/*
@media (min-width: 769px) {
	.menu-sns-account { display: none; }
	.header-sns-account { margin-top: 10px; display: block; position: absolute; right: 80px; }
}
@media (max-width: 768px) {
	.header-sns-account { display: none; }
	.menu-sns-account { margin-top: 20px; display: block; }
}
*/

.header-sns-account ul { padding-left:0px; }
.menu-sns-account ul { padding-left:5px; margin-bottom: 10px; }

.header-sns-list,.menu-sns-list { display: flex; list-style:none; margin-top: 0px; margin-bottom: 0px;}
.header-sns-list-item,.menu-sns-list-item { margin-right: 15px;}
.header-sns-list-item .sns-icon {height: 35px; width: 35px;}
.menu-sns-list-item .sns-icon {height: 50px; width: 50px;}
.header-sns-list-item:last-child,.menu-sns-list-item:last-child { margin-right: 0;}
.header-sns-list-item-link,.menu-sns-list-item-link { display: block; }

.header-sns-list-item a img:hover,.menu-sns-list-item a img:hover {
	border:none;
}
.header-sns-list-item a[target="_blank"]::after,.menu-sns-list-item a[target="_blank"]::after {
	content: none;
}