/*
 Theme Name:   Twenty Seventeen Child
 Template:     twentyseventeen
 Version:      1.0.0
*/

/* カスタマイズはこの下に書く */
/* タイトル */
.has-header-image .site-branding .site-title a,
.has-header-video .site-branding .site-title a {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 2.5rem !important;
  color: #fff !important;
  text-shadow: 0 4px 18px rgba(0,0,0,0.85) !important; /* ←強めに */
  text-decoration: none !important;
}

/* サブタイトル */
.has-header-image .site-branding .site-description,
.has-header-video .site-branding .site-description {
  font-family: 'Dancing Script', cursive !important;
  font-weight: 300 !important;
  font-size: 1.3rem !important;
  color: #fff !important;
  text-shadow: 0 3px 12px rgba(0,0,0,0.75) !important; /* ←強めに */
}
/* --- サイドバーを細くする（PC表示） --- */
#secondary {
  flex: 0 0 20% !important;
  max-width: 20% !important;
}

#primary {
  flex: 0 0 75% !important;
  max-width: 75% !important;
}

/* --- リンク装飾 --- */
a {
  text-decoration: none !important;
  color: inherit; /* 本文の色に合わせる */
}

a:hover {
  text-decoration: none !important;
  color: #CFA5B4; /* くすみピンク */
}

/* --- メニュー（ナビゲーション）のリンク --- */
.main-navigation a {
  text-decoration: none !important;
  box-shadow: none !important;
}

.main-navigation a:hover {
  color: #CFA5B4 !important;
  text-decoration: none !important;
  box-shadow: none !important;

}

/* PC/タブレット：本文75%・サイドバー20%（右） */
@media screen and (min-width: 48em) {
  .has-sidebar #primary {
    width: 75% !important;
    float: left !important;
    margin-right: 2rem !important;
  }
  .has-sidebar #secondary {
    width: 20% !important;
    float: right !important;
  }
}

/* スマホ：縦並び（本文→サイドバー 全幅） */
@media screen and (max-width: 47.99em) {
  .has-sidebar #primary,
  .has-sidebar #secondary {
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
  }
  .has-sidebar #secondary { margin-top: 2rem !important; }
}

/* 見出しのブツ切れ対策 */
.widget .widget-title {
  word-break: keep-all;
  hyphens: auto;
}

/* --- フッター：ソーシャルボタンを完全統一 --- */

/* アイコン列（中央寄せ） */
.site-footer .social-navigation {
  float: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 12px !important;
}
.site-footer .social-navigation ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
  margin: 0; padding: 0;
}

/* 丸ボタン本体：ここに一本化（他の .menu には影響しない） */
.site-footer .social-navigation a {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 44px; height: 44px;              /* ← ここでサイズ統一 */
  border-radius: 50%;
  background: #f5f5f5;
  color: #333;
  line-height: 0 !important;              /* 行高の影響を排除 */
  padding: 0;                              /* 余白ゼロで中央に */
  transition: all .3s ease;
  position: relative;                      /* ::before 用の土台 */
}
.site-footer .social-navigation a:hover {
  background: #eabfc9; color: #fff;
}

/* SVGアイコン（メール/YouTube/Instagram等）を統一 */
.site-footer .social-navigation svg {
  display: block !important;
  width: 20px; height: 20px;              /* 見た目サイズを揃える */
  vertical-align: middle !important;
}

/* X / TikTok（Font Awesome 置換）の中央合わせ */
.site-footer .social-navigation a[href*="x.com"]::before,
.site-footer .social-navigation a[href*="twitter.com"]::before,
.site-footer .social-navigation a[href*="tiktok.com"]::before {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;                         /* SVGと同じ大きさ */
  line-height: 1;
}

/* SVGの微妙なベースライン差を吸収（上に1px寄せ） */
.site-footer .social-navigation a[href^="mailto"] svg,
.site-footer .social-navigation a[href*="youtube.com"] svg,
.site-footer .social-navigation a[href*="instagram.com"] svg {
  transform: translateY(1px);
}

/* クレジット文（Proudly…）中央 */
.site-footer .site-info { float:none !important; text-align:center !important; margin:0 !important; }

/* === 仕上げ：アイコンの上下位置補正 & X/TikTokをFAで置換 === */

/* 1) 全SVGアイコンの上下位置をほんの少しだけ上げる */
.site-footer .social-navigation svg {
  transform: translateY(-1px); /* -1〜-2pxで微調整可 */
}

/* 2) X/TikTokをFont Awesomeのロゴに置換（鎖アイコンを隠す） */
.site-footer .social-navigation a[href*="x.com"],
.site-footer .social-navigation a[href*="twitter.com"],
.site-footer .social-navigation a[href*="tiktok.com"] {
  position: relative;
}

/* 既定のSVG（鎖アイコン）を非表示 */
.site-footer .social-navigation a[href*="x.com"] svg,
.site-footer .social-navigation a[href*="twitter.com"] svg,
.site-footer .social-navigation a[href*="tiktok.com"] svg {
  display: none !important;
}

/* Font Awesome Brands を中央に重ねる */
.site-footer .social-navigation a[href*="x.com"]::before,
.site-footer .social-navigation a[href*="twitter.com"]::before {
  content: "\e61b"; /* FA6 Brands: X */
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px; line-height: 1;
}
.site-footer .social-navigation a[href*="tiktok.com"]::before {
  content: "\e07b"; /* FA6 Brands: TikTok */
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px; line-height: 1;
}

/* --- SVGアイコンの縦位置を上に1〜2px持ち上げる --- */
.site-footer .social-navigation a[href^="mailto"] svg,
.site-footer .social-navigation a[href*="youtube.com"] svg,
.site-footer .social-navigation a[href*="instagram.com"] svg {
  transform: translateY(-4px); /* -1〜-3pxでお好みに調整 */
}

/* --- ソーシャルボタンの円位置を完全統一 --- */
.site-footer .social-navigation li {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.site-footer .social-navigation a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  line-height: 0 !important;
  background: #f5f5f5;
  color: #333;
  position: relative;
}

/* --- SVGアイコンの最終高さ合わせ（メール／YouTube／Instagram） --- */
/* まず全体をぐっと上げる */
.site-footer .social-navigation a[href^="mailto"] svg,
.site-footer .social-navigation a[href*="youtube.com"] svg,
.site-footer .social-navigation a[href*="instagram.com"] svg {
  transform: translateY(-10px);  /* -4〜-8px くらいで調整 */
}

/* --- フッターのクレジット文を中央に固定 --- */
.site-footer .site-info {
  float: none !important;
  display: block !important;
  text-align: center !important;
  margin: 8px 0 0 0 !important;  /* 上だけ少し余白をとる */
  font-size: 0.85em;             /* 少し控えめに */
}

/* --- フッター中央寄せを全ブラウザで安定化 --- */
.site-footer .wrap {
  display: flex;                 /* 子を縦に積む */
  flex-direction: column;
  align-items: center;           /* 中央に寄せる */
}

/* 子要素（アイコン列とクレジット）の状態を統一 */
.site-footer .wrap > .social-navigation,
.site-footer .wrap > .site-info {
  float: none !important;        /* 既定のfloatを排除 */
  display: block !important;
  width: 100%;
  text-align: center !important; /* テキストも中央 */
  margin: 0 !important;
}

/* アイコン列とクレジットの間隔だけ調整（お好みで） */
.site-footer .site-info { margin-top: 10px !important; }

/* --- Footer: Privacy Policy の文字崩れ修正 --- */
/* フッターのウィジェット内のリンクは改行させない */
.site-footer .widget a,
.site-footer a.privacy-policy-link {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: manual !important;
}

/* 位置も中央に（お好みで left/right に変更可） */
.site-footer .widget,
.site-footer .widget p {
  text-align: center !important;
  margin: 0 0 12px !important;  /* アイコンとの間隔を調整 */
}

/* テーマがfloatしている場合の保険 */
.site-footer .privacy-policy-link {
  float: none !important;
  display: inline-block !important;
}
/* --- Footer credit: Safariでも確実に中央 --- */
.site-footer .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;            /* 子を中央へ */
  text-align:center;             /* テキストも中央 */
}
.site-footer .wrap > .site-info{
  float:none !important;
  display:inline-block !important;  /* 要素自体を中央に据える */
  margin:10px auto 0 !important;    /* 左右autoで中央 */
  text-align:center !important;
  width:auto !important;
}
.site-footer .site-info p,
.site-footer .site-info .imprint{
  margin:0 !important;
  text-align:center !important;
}