/* ====================================================================
   NSG HappyNail v2 design overlay
   nailsalonguide.jp 本体 v2 (https://nailsalonguide.jp/css/v2.css) の
   デザイントークンを TCD chill (2014) に被せる上書き専用CSS。
   読み込みは mu-plugin nsg-happynail-v2css.php のゲート経由のみ。
   注意: 記事本文(.post)内のインラインstyle付き見出し(オレンジ枠H2等)は
   意図的に上書きしない。.post 内の h1-h6 には一切触れないこと。
   ==================================================================== */

:root{
  --bg:#fffafb; --paper:#fff; --soft:#fff3f6; --soft2:#fde7ed;
  --pink:#c96f87; --pink2:#a9516a; --pink3:#e7b6c3;
  --ink:#3f3237; --muted:#6f5f65; --muted2:#7d6d73; --line:#eadde1;
  --shadow:0 18px 55px rgba(87,49,62,.08); --shadow-s:0 8px 26px rgba(87,49,62,.05);
  --radius:20px; --radius-s:12px;
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;
  --serif:Georgia,"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}

/* ---- 全体: 背景・文字色・フォントスタック ---- */
body{
  background:var(--bg) !important;
  color:var(--ink) !important;
  font-family:var(--font) !important;
  letter-spacing:.01em;
}
button,input,select,textarea{font-family:var(--font) !important}
a:hover:not([style]){color:var(--pink2) !important}
hr{border-color:var(--line) !important}

/* ---- 最上部の説明バー(旧: 濃ピンク帯) ---- */
#site_description{background:var(--soft) !important;box-shadow:none !important}
#site_description h1{color:var(--muted) !important;font-weight:400 !important}
#site_description:after{display:none !important}

/* ---- ヘッダー: 白地+下1px罫線。濃ピンク帯・影画像を撤去 ---- */
#header_top_wrap{background:var(--bg) !important;border-bottom:1px solid var(--line) !important}
#header_top_wrap:after{display:none !important}
#header_top_wrap.fixed{background:rgba(255,250,251,.97) !important;opacity:1 !important;box-shadow:0 6px 20px rgba(87,49,62,.06) !important}
#header_top{background:transparent !important;box-shadow:none !important}
.mobile #header_top{background-color:transparent !important}
#header_logo a{color:var(--ink) !important;font-family:var(--serif) !important}

/* ---- PC グローバルナビ: 区切り線画像を消し、ホバーは淡ピンク+pink2 ---- */
/* テーマは幅600px固定+JSで等幅width(600/n)をliにインライン指定→7項目ではぶつ切りになる。
   staticな全幅flexにして全項目を読める幅で1行に並べる(右90pxはSNSアイコン逃げ) */
html:not(.mobile) #global_menu{
  background:none !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  margin:0 90px 0 0 !important;
}
html:not(.mobile) #global_menu > ul{display:flex !important;flex-wrap:wrap !important;align-items:center !important}
html:not(.mobile) #global_menu > ul > li{width:auto !important;flex:0 0 auto !important;min-width:0 !important}
/* スクロール固定ヘッダー時はロゴ(float左190px)が出るので、折り返さず縮めて…省略 */
html:not(.mobile) #header_top_wrap.fixed #global_menu{margin-left:200px !important}
html:not(.mobile) #header_top_wrap.fixed #global_menu > ul{flex-wrap:nowrap !important}
html:not(.mobile) #header_top_wrap.fixed #global_menu > ul > li{flex:0 1 auto !important}
html:not(.mobile) #global_menu li a{
  background:none !important;
  color:#5e4e54 !important;
  padding:0 12px !important;
  border-radius:10px !important;
  font-size:12px !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}
html:not(.mobile) #global_menu li a:hover{background:var(--soft) !important;color:var(--pink2) !important}
html:not(.mobile) #global_menu li.active_menu{background:transparent !important;border-radius:10px !important}
html:not(.mobile) #global_menu li.active_menu>a{background:var(--soft) !important;color:var(--pink2) !important}
/* PC サブメニュー: 白カード+影 */
html:not(.mobile) #global_menu ul ul{
  min-width:190px !important;
  background:var(--paper) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
}
html:not(.mobile) #global_menu ul ul li{width:auto !important;float:none !important}
html:not(.mobile) #global_menu ul ul a{
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:0 !important;
  height:auto !important;
  line-height:1.6 !important;
  padding:11px 18px !important;
  text-align:left !important;
  white-space:nowrap !important;
}
html:not(.mobile) #global_menu ul ul a:hover{background:var(--soft) !important;color:var(--pink2) !important}

/* ---- スマホ開閉メニュー(白カード風) ---- */
.mobile #global_menu a,
.mobile #global_menu ul ul a,
.mobile #global_menu ul ul ul a,
.mobile #global_menu ul ul ul ul a{
  background-color:var(--paper) !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
}
.mobile #global_menu a:hover,
.mobile #global_menu ul ul a:hover,
.mobile #global_menu ul ul ul a:hover,
.mobile #global_menu ul ul ul ul a:hover{
  background-color:var(--soft) !important;
  color:var(--pink2) !important;
}

/* ---- スマホ menu ボタン: pill 化 ---- */
#header_top a.menu_button{
  color:var(--pink2) !important;
  border:1px solid var(--pink3) !important;
  background:var(--paper) !important;
  border-radius:999px !important;
  padding:0 14px !important;
}
#header_top a.menu_button:hover,
#header_top a.active{
  background:var(--pink2) !important;
  border-color:var(--pink2) !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* ---- SNSアイコン: 白抜き画像をピンクの丸チップに載せる ---- */
.social_link li a{
  background:var(--pink) !important;
  border-radius:999px !important;
  padding:6px !important;
  line-height:0 !important;
  opacity:1 !important;
}
.social_link li a:hover{background:var(--pink2) !important;opacity:1 !important}

/* ---- ロゴ帯: 2014年グラデーションを廃止してフラットに ---- */
#header_bottom_wrap{background:var(--bg) !important}
#logo_image img{mix-blend-mode:multiply}
#header_banner img{border-radius:var(--radius-s) !important}

/* ---- メインビジュアル ---- */
#main_image img{border-radius:var(--radius) !important;box-shadow:var(--shadow-s) !important}

/* ---- セクション見出し (LATEST ENTRIES / 関連記事 / アーカイブ名) ---- */
.headline1,#page_headline{
  font-family:var(--serif) !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  font-size:22px !important;
  letter-spacing:.02em !important;
  line-height:1.3 !important;
  margin:0 0 18px !important;
}
.headline1 span{color:var(--muted) !important;font-family:var(--font) !important;font-size:12px !important}

/* ---- 記事一覧: カード化(白背景・角丸・薄い影・余白) ---- */
.post_item{
  background:var(--paper) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-s) !important;
  padding:20px !important;
  margin:0 0 20px !important;
}
html:not(.mobile) .post_item .info{width:calc(100% - 324px) !important}
/* メタ情報: 日付バッジの右に回り込ませる。カテゴリ名が長いと float 同士が縦積みになり
   「2026」とカテゴリ名が重なるため、ul と li の float を解除して折り返せるようにする */
.post_item .meta{overflow:hidden !important}
.post_item .meta ul{
  float:none !important;
  width:auto !important;
  margin:0 0 0 62px !important;
  overflow:hidden !important;
  line-height:1.7 !important;
}
.post_item .meta ul li{
  float:none !important;
  display:inline-block !important;
  vertical-align:top !important;
  margin:0 10px 2px 0 !important;
  padding-left:18px !important;
}
.post_item .image img{border-radius:var(--radius-s) !important}
.post_item .title a{color:var(--ink) !important;font-weight:600 !important;text-decoration:none !important}
.post_item .title a:hover{color:var(--pink2) !important;text-decoration:none !important}
.post_item .desc{color:var(--muted) !important;line-height:1.8 !important}
.post_item ul li a{color:var(--muted) !important}
.post_item ul li a:hover{color:var(--pink2) !important;text-decoration:none !important}

/* ---- 日付バッジ ---- */
.post_date .date{background:var(--pink2) !important;border-radius:10px 10px 0 0 !important}
.post_date .month{background:var(--pink) !important;border-radius:0 0 10px 10px !important}

/* ---- さらに記事を表示する: pill ボタン ---- */
#load_post a{
  background:var(--pink2) !important;
  color:#fff !important;
  border-radius:999px !important;
  height:44px !important;
  line-height:44px !important;
  padding:0 30px !important;
  font-size:13px !important;
  box-shadow:var(--shadow-s) !important;
}
#load_post a:hover{background:var(--pink) !important}

/* ---- 記事ページ: タイトル・メタ・アイキャッチ ---- */
#post_title{color:var(--ink) !important;font-size:24px !important;font-weight:600 !important;line-height:1.45 !important}
#single_title_area .meta ul li{color:var(--muted) !important}
#single_title_area .meta ul li a{color:var(--muted) !important}
#single_title_area .meta ul li a:hover{color:var(--pink2) !important;text-decoration:none !important}
.post_image img{border-radius:var(--radius) !important;box-shadow:var(--shadow-s) !important}

/* ---- 記事本文: リンク色と行間のみ(見出しは過去記事の資産なので触らない)
       inline style付き要素は :not([style]) で除外し、!importantも使わない ---- */
.post p{line-height:2}
.post a:not([style]),.custom-html-widget a:not([style]){color:var(--pink2)}
.post a:not([style]):hover,.custom-html-widget a:not([style]):hover{color:var(--pink)}
.post blockquote:not([style]){background:var(--soft) !important;border-radius:var(--radius-s) !important}
.post td:not([style]),.post th:not([style]){border-color:var(--line) !important}
.post th:not([style]){background:var(--soft) !important}

/* ---- 記事内ページ分割 ---- */
#post_pagination a,#post_pagination p{border-radius:8px !important}
#post_pagination p{background:var(--pink2) !important}
#post_pagination a:hover{background:var(--pink2) !important}

/* ---- 前後記事リンク ---- */
html:not(.mobile) #previous_next_post{background:none !important;border-top:1px solid var(--line) !important;padding:14px 0 0 !important}
#previous_next_post a{color:var(--muted) !important}
#previous_next_post a:hover{color:var(--pink2) !important;text-decoration:none !important}
.mobile #previous_next_post a{background-color:var(--soft) !important;border-radius:var(--radius-s) !important;color:var(--ink) !important}
.mobile #previous_next_post a:hover{background-color:var(--soft2) !important;color:var(--pink2) !important}

/* ---- 関連記事: 淡ピンクのカード ---- */
#related_post{background:var(--soft) !important;border-radius:var(--radius) !important;padding:18px 15px 6px !important}
#related_post .image img{border-radius:10px !important}
#related_post .title a{color:var(--ink) !important}
#related_post .title a:hover{color:var(--pink2) !important;text-decoration:none !important}
#related_post .post_date2{color:var(--pink2) !important;font-weight:600 !important}

/* ---- サイドバー: ウィジェットのカード化(白背景・角丸16px・薄い影) ---- */
.side_widget{
  background:var(--paper) !important;
  border-radius:16px !important;
  box-shadow:var(--shadow-s) !important;
  padding:18px !important;
  margin:0 0 20px !important;
  font-size:12px !important;
}
.side_widget.ad_widget1,.side_widget.ad_widget2{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
.ad_widget1 img,.ad_widget2 img{border-radius:var(--radius-s) !important}
.side_headline{
  background:none !important;
  color:var(--ink) !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  border-bottom:1px solid var(--line) !important;
  margin:0 0 14px !important;
  padding:0 0 12px !important;
  line-height:1.4 !important;
}
.side_widget li{background:none !important;padding:0 !important;margin:0 0 9px !important;line-height:1.7 !important}
.side_widget a{color:var(--ink) !important}
.side_widget a:hover{color:var(--pink2) !important;text-decoration:none !important}
.side_widget .textwidget img{border-radius:10px !important}

/* ---- 検索ウィジェット: 入力を丸く、ボタンをピンクに ---- */
.widget_search #s,.google_search #s{
  box-sizing:border-box !important;
  width:calc(100% - 44px) !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  box-shadow:none !important;
  height:36px !important;
  padding:0 14px !important;
  color:var(--ink) !important;
}
.widget_search #searchsubmit,.google_search #searchsubmit,
.widget_search #search-btn input,.google_search #search-btn input{
  background-color:var(--pink2) !important;
  border-radius:999px !important;
  width:36px !important;
  height:36px !important;
}
.widget_search #searchsubmit:hover,.google_search #searchsubmit:hover,
.widget_search #search-btn input:hover,.google_search #search-btn input:hover{background-color:var(--pink) !important}

/* ---- 新着占いウィジェット ---- */
.widget_post_list li{background:none !important;border-bottom:1px solid var(--line) !important;padding:0 0 10px !important;margin:0 0 10px !important}
.widget_post_list li.last,.widget_post_list li:last-child{border-bottom:0 !important}
.widget_post_list .image img{border-radius:10px !important}
.widget_post_list .title a{color:var(--ink) !important}
.widget_post_list .title a:hover{color:var(--pink2) !important;text-decoration:none !important}
.widget_post_list .post_date2{color:var(--pink2) !important;font-weight:600 !important}

/* ---- 人気記事 (WordPress Popular Posts) ---- */
.side_widget .wpp-list li{overflow:hidden !important;border-bottom:1px solid var(--line) !important;padding:0 0 12px !important;margin:0 0 12px !important}
.side_widget .wpp-list li:last-child{border-bottom:0 !important;margin-bottom:0 !important}
.side_widget .wpp-list img.wpp-thumbnail{border-radius:10px !important}
.side_widget .wpp-list a.wpp-post-title{color:var(--ink) !important;font-weight:600 !important}
.side_widget .wpp-list a.wpp-post-title:hover{color:var(--pink2) !important}
.side_widget .wpp-excerpt{color:var(--muted) !important}

/* ---- カレンダー ---- */
#wp-calendar td a{border-radius:8px !important}
#wp-calendar td a:hover{background:var(--pink2) !important}
#wp-calendar td#today{background:var(--pink3) !important;border-radius:8px !important}

/* ---- アーカイブ/カテゴリのプルダウン ---- */
.widget_archive select,.widget_categories select{border:1px solid var(--line) !important;border-radius:var(--radius-s) !important;background:var(--paper) !important}

/* ---- フッター: 暗色をやめて淡ピンク(#fff3f6系)に ---- */
#footer_bottom_wrap{
  background:var(--soft) !important;
  color:var(--ink) !important;
  border-top:1px solid var(--line) !important;
}
#footer_bottom_wrap:before{display:none !important}
#copyright{color:var(--muted) !important}
#copyright a{color:var(--muted) !important}
#copyright a:hover{color:var(--pink2) !important}
#footer_bottom .social_link{margin-top:7px !important}

/* ---- フォーム類: pill 化 ---- */
.wpcf7{background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:var(--radius-s) !important}
.wpcf7 input,.wpcf7 textarea{border:1px solid var(--line) !important;border-radius:8px !important}
.wpcf7 input.wpcf7-submit,.wpcf7 .wpcf7-previous{
  background-color:var(--pink2) !important;
  border-radius:999px !important;
  color:#fff !important;
}
.wpcf7 input.wpcf7-submit:hover,.wpcf7 .wpcf7-previous:hover{background-color:var(--pink) !important}
#submit_comment{
  background-color:var(--pink2) !important;
  border:1px solid var(--pink2) !important;
  color:#fff !important;
  border-radius:999px !important;
}
#submit_comment:hover{background-color:var(--pink) !important;border:1px solid var(--pink) !important}
#guest_info input:focus,#comment_textarea textarea:focus{border:1px solid var(--pink3) !important}

/* ==== 追補 20260905.3: 旧素材（2014年メインビジュアル・旧名義ロゴ画像）の置き換え ==== */

/* 1) メインビジュアル「エンジェルの館」を廃止し、明朝のタグラインへ */
#main_image{background:none !important;height:auto !important}
#main_image img{display:none !important}
#main_image::before{
  content:"毎朝7時、今日の運気に合うネイルを。";
  display:block;
  text-align:center;
  font-family:var(--serif);
  font-size:25px;
  letter-spacing:.08em;
  color:var(--ink);
  padding:42px 12px 12px;
}
#main_image::after{
  content:"オリジナルのオラクルカードと星の動きで占う、毎日のネイル占い";
  display:block;
  text-align:center;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted);
  padding:0 12px 38px;
}

/* 2) 旧ロゴ画像をテキストロゴへ（h2#logo_image のインラインstyle top/left は static化で無効に） */
#logo_image{position:static !important;width:auto !important;height:auto !important;margin:24px 0 !important}
#logo_image img{display:none !important}
#logo_image a{display:inline-block;text-decoration:none !important}
#logo_image a::before{
  content:"ハッピーネイル";
  display:block;
  font-family:var(--serif);
  font-size:31px;
  font-weight:500;
  letter-spacing:.05em;
  color:var(--ink);
  line-height:1.2;
}
#logo_image a::after{
  content:"presented by ネイルサロンガイド";
  display:block;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--pink2);
  margin-top:4px;
}

/* ==== 追補 20260905.4: PCはヒーローバナー画像（カードファン）、SPは明朝タグラインのまま ==== */
@media (min-width:641px){
  #main_image{
    background:url(https://nailsalonguide.jp/contents/happynail/wp-content/uploads/2026/09/hero_happynail_v2.jpg) left center/cover no-repeat !important;
    aspect-ratio:1000/330;
    border-radius:var(--radius);
    box-shadow:var(--shadow-s);
    overflow:hidden;
  }
  #main_image::before,
  #main_image::after{content:none !important}
  /* JSで挿入したリンク（バナー全体をクリック可能に） */
  #main_image a.nsg-hero-link{display:block;width:100%;height:100%}
}

/* スマホのロゴ：サイトタイトル全文が3行になるのでテキストロゴに置き換える */
@media (max-width:640px){
  #header_logo a{font-size:0 !important;line-height:0 !important;text-decoration:none !important}
  #header_logo a::before{
    content:"ハッピーネイル";
    display:block;
    font-family:var(--serif);
    font-size:21px;
    line-height:1.3;
    letter-spacing:.04em;
    color:var(--ink);
  }
  #header_logo a::after{
    content:"presented by ネイルサロンガイド";
    display:block;
    font-size:9px;
    line-height:1.4;
    letter-spacing:.1em;
    color:var(--pink2);
    margin-top:2px;
  }
}