@charset "UTF-8";

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

/* ----- 共通：SNS アイコンのホバー演出（枠なしの単純拡大） -------------------- */
.account-list-item a img { transition: transform 0.4s ease; }
@media (hover: hover) {
	.account-list-item a:hover img { transform: scale(1.04); opacity: 1; }
}

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

.wrapper-account-area { background: var(--color-bg-subtle); width: 100%; max-width: 100%; }
.module-account-area .account-heading { font-size: 1.2em; margin-top: 0; margin-bottom: 30px; color: var(--color-primary); text-align: center; }
.account-area { padding-top: 0px; width: 100%; margin-left: auto; margin-right: auto;}
.account-area ul { padding-left: 0px; }

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

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

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

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

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

.prof-sns { border-top: 3px solid var(--color-white); border-bottom: 3px solid var(--color-white); margin-top: 2em; margin-bottom: 2em; }

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

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

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

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

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

.spread-txt {text-align: center; font-weight: 700; margin-top: 20px; margin-bottom: 0px;}
.spread-wrap { color:var(--color-primary); }
.spread-wrap h3::before {
	content: '\f1e0' / ''; font-family: "Font Awesome 5 Free"; font-weight: 900;
	font-size:inherit; margin-right: .5em;
}

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

/* <a> を inline のままにしておくと transform が効かないので block にする */
.spread-btn-card-container a { display: block; }
.spread-tw,.spread-fb,.spread-ln, .spread-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%;
	}

.spread-tw { color: var(--color-white); background: var(--color-black); }
.spread-fb { color: var(--color-white); background: #4267B2; }
.spread-ln { color: var(--color-white); background: #00b900; }
.spread-copy { color: var(--color-white); background: #008080; }

.twitter a::before,.spread-tw::before	{font-family: "FontAwesome"; content: "\e61a" / ""; margin-right:5px;}
.facebook a::before,.spread-fb::before	{font-family: "FontAwesome"; content: "\f09a" / ""; margin-right:5px;}
.spread-ln::before	{font-family: "FontAwesome"; content: "\f3c0" / ""; margin-right:5px;}
.spread-copy::before {font-family: "FontAwesome"; content: "\f0c1" / ""; margin-right:5px;}

.spread-tw:hover,.spread-tw:active, .spread-fb:hover,.spread-fb:active,
.spread-ln:hover,.spread-ln:active,.spread-copy:hover,spread-copy:active {color:var(--color-primary); background: var(--color-accent);}

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

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

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

.menu-account-area { padding-bottom: 60px; }
@media (max-width: 768px) {
    .menu-account-area { padding-bottom: 30px; }
}

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

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