@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); }

/* タッチ環境では JS（common.js 0-d）が個別4ボタンを隠して OS 共有メニュー用の
   1ボタン（.spread-btn-container--os）へ切り替える。display:flex が UA の
   [hidden] 既定（display:none）より強いため明示して打ち消す */
.spread-btn-container[hidden] { display: none; }

.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; }

/* タッチ標的の拡大（見た目は変えない）。ボタンの視覚高さは約35pxと Apple 推奨の
   44px より低く、実機で「中央付近でないと反応しない」事象が出たため、タッチ環境で
   単独表示される OS ボタンだけ当たり判定を四方へ 8px 広げる。押下中の
   translateY(2px) による上端タップの不発もこの拡大で吸収される。
   4ボタン格子は隣接ボタンと判定が重なるため広げない（マウス前提の PC 表示のみ）。 */
.spread-btn-container--os a { position: relative; }
.spread-btn-container--os a::after { content: ""; position: absolute; inset: -8px; }
.spread-tw,.spread-fb,.spread-ln, .spread-copy, .spread-os {
	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: #008700; }
.spread-copy { color: var(--color-white); background: #008080; }
.spread-os { color: var(--color-white); background: var(--color-primary); }

/* X は Font Awesome 6 で追加された字形（fa-x-twitter = \e61b）。\e6xx はレガシー互換ファミリー
   "FontAwesome" の unicode-range 外のため、ブランド用ファミリーを明示しないと豆腐になる。 */
.twitter a::before,.spread-tw::before	{font-family: "Font Awesome 6 Brands"; content: "\e61b"; content: "\e61b" / ""; margin-right:5px;}
.facebook a::before,.spread-fb::before	{font-family: "FontAwesome"; content: "\f09a"; content: "\f09a" / ""; margin-right:5px;}
.spread-ln::before	{font-family: "FontAwesome"; content: "\f3c0"; content: "\f3c0" / ""; margin-right:5px;}
.spread-copy::before {font-family: "FontAwesome"; content: "\f0c1"; content: "\f0c1" / ""; margin-right:5px;}
.spread-os::before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1e0"; content: "\f1e0" / ""; 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,
.spread-os:hover,.spread-os: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;
}