/* =========================================================
   Kuu / Ultimate Member UI（Register/Login）
   対象：body.page-id-20（登録）, body.page-id-19（ログイン）
   目的：
   - 背景は常に見える（Cocoonの白背景に負けない）
   - スマホの「上部の大きな空白」をCocoon構造前提で潰す
   - タイトル（登録/ログイン）完全非表示
   - 将来、ログインブロックを分離しても崩れにくい
   ========================================================= */


/* =========================================================
   0) 背景（最も堅い：body直貼りではなく固定レイヤー）
   - iOS/Android の背景挙動差を回避
   - Cocoonのラッパー背景に覆われない
   ========================================================= */

html,
body.page-id-20,
body.page-id-19 {
  min-height: 100%;
}

body.page-id-20,
body.page-id-19{
  background: #faf7f5; /* フォールバック */
}

/* 背景レイヤー（registerだけ画像） */
body.page-id-20::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;                 /* 本文の裏に固定 */
  background-image: url("/wp-content/themes/cocoon-child-master/images/register-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transform: translateZ(0);    /* モバイルの描画安定 */
}

/* スマホは少し上寄りにしたい場合（任意） */
@media (max-width: 768px){
  body.page-id-20::before{
    background-position: center top;
  }
}


/* =========================================================
   1) Cocoon側：白背景で「全面が覆われる」問題の最小対策
   - 必要最小限のラッパーだけ透過
   ========================================================= */

body.page-id-20 #container,
body.page-id-20 #content,
body.page-id-20 #content-in,
body.page-id-20 #main,
body.page-id-20 article.article,

body.page-id-19 #container,
body.page-id-19 #content,
body.page-id-19 #content-in,
body.page-id-19 #main,
body.page-id-19 article.article{
  background: transparent !important;
}


/* =========================================================
   2) スマホ上部の「大きな空白」対策（Cocoon構造前提）
   - 余白の犯人はだいたい #content / #content-in / #main / .article の
     margin/padding-top か、wrap由来の余白
   - まずページ限定で “上方向” を強制的にゼロに寄せる
   ========================================================= */

body.page-id-20 #content,
body.page-id-20 #content-in,
body.page-id-20 #main,
body.page-id-20 article.article,

body.page-id-19 #content,
body.page-id-19 #content-in,
body.page-id-19 #main,
body.page-id-19 article.article{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* wrap が余白を持つケースに備える（content-in が wrap クラス持ち） */
body.page-id-20 #content-in.wrap,
body.page-id-19 #content-in.wrap{
  padding-top: 0 !important;
}

/* entry-header を消しても残る余白を潰す */
body.page-id-20 .entry-header,
body.page-id-19 .entry-header{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* パンくずが上部に食い込む/間延びする場合の保険（必要なら） */
body.page-id-20 #breadcrumb,
body.page-id-19 #breadcrumb{
  margin-top: 0 !important;
}


/* =========================================================
   3) ページタイトル完全非表示（念のため二重）
   ========================================================= */

body.page-id-20 .entry-title,
body.page-id-20 h1.entry-title,
body.page-id-19 .entry-title,
body.page-id-19 h1.entry-title{
  display:none !important;
}


/* =========================================================
   4) 本文エリアの“ページ余白”（カード外側）
   ========================================================= */

body.page-id-20 .entry-content,
body.page-id-19 .entry-content{
  background: transparent !important;
  padding: 18px 14px !important;     /* スマホ基準でやや軽め */
}

/* PCは少し余裕 */
@media (min-width: 1024px){
  body.page-id-20 .entry-content,
  body.page-id-19 .entry-content{
    padding: 26px 18px !important;
  }
}


/* =========================================================
   5) UMフォーム：カード化
   ========================================================= */

body.page-id-20 .um,
body.page-id-19 .um{
  max-width: 520px;
  margin: 0 auto;

  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);

  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);

  padding: 22px 20px;
  box-sizing: border-box;
}

/* PCでフォームカードを少し下げて“余裕”を作る */
@media (min-width: 1024px){
  body.page-id-20 .um,
  body.page-id-19 .um{
    margin-top: 36px !important;
  }
}

/* UMヘッダー余白 */
body.page-id-20 .um .um-header,
body.page-id-19 .um .um-header{
  margin: 0 0 14px !important;
}

/* 設問間の余白 */
body.page-id-20 .um .um-field,
body.page-id-19 .um .um-field{
  margin-bottom: 18px !important;
}


/* =========================================================
   6) ラベル
   ========================================================= */

body.page-id-20 .um .um-field-label label,
body.page-id-19 .um .um-field-label label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,.80);
  letter-spacing: .02em;
  margin-bottom: 6px;
}

/* 必須マーク（UMは um-req / um-required が混在しうるので両対応） */
body.page-id-20 .um .um-field-label .um-req,
body.page-id-20 .um .um-field-label .um-required,
body.page-id-19 .um .um-field-label .um-req,
body.page-id-19 .um .um-field-label .um-required{
  color: #b5322b;
  font-weight: 700;
}


/* =========================================================
   7) 入力欄：高さ・角丸・枠・背景
   ========================================================= */

body.page-id-20 .um input[type="text"],
body.page-id-20 .um input[type="email"],
body.page-id-20 .um input[type="password"],
body.page-id-20 .um input[type="url"],
body.page-id-20 .um select,
body.page-id-19 .um input[type="text"],
body.page-id-19 .um input[type="email"],
body.page-id-19 .um input[type="password"],
body.page-id-19 .um input[type="url"],
body.page-id-19 .um select{
  width: 100% !important;
  height: 46px !important;
  padding: 0 12px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.02) !important;

  box-shadow: none !important;
  font-size: 15px !important;
  box-sizing: border-box;
}

/* プレースホルダー */
body.page-id-20 .um input::placeholder,
body.page-id-19 .um input::placeholder{
  color: rgba(0,0,0,.35) !important;
}

/* フォーカス */
body.page-id-20 .um input:focus,
body.page-id-20 .um select:focus,
body.page-id-19 .um input:focus,
body.page-id-19 .um select:focus{
  outline: none !important;
  border-color: rgba(181,50,43,.55) !important;
  box-shadow: 0 0 0 4px rgba(181,50,43,.10) !important;
  background: #fff !important;
}


/* =========================================================
   8) 見出し（あなたの好み〜）
   ========================================================= */

body.page-id-20 .um-form .um-form-section-title,
body.page-id-19 .um-form .um-form-section-title{
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,.72) !important;
  letter-spacing: .06em !important;

  margin: 26px 0 12px !important;
  padding-left: 10px;
  position: relative;
}

/* 左の細いアクセント（縦棒） */
body.page-id-20 .um-form .um-form-section-title::before,
body.page-id-19 .um-form .um-form-section-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 3px;
  height: 1.2em;
  border-radius: 99px;
  background: rgba(181,50,43,.55);
}


/* =========================================================
   9) 「好み」系のフィールドを“やわらかいカード”に（select / radio）
   ========================================================= */

/* 9) 「好み」系だけカード化（専用クラスに限定） */
body.page-id-20 .um .kuu-softcard,
body.page-id-19 .um .kuu-softcard{
  background: rgba(181,50,43,.04);
  border: 1px solid rgba(181,50,43,.10);
  border-radius: 14px;
  padding: 14px 14px 6px;
}

body.page-id-20 .um .kuu-softcard .um-field-label label,
body.page-id-19 .um .kuu-softcard .um-field-label label{
  font-size: 12px !important;
  color: rgba(0,0,0,.70) !important;
}



/* =========================================================
   10) ラジオ：ボタン風に押しやすく
   ========================================================= */

body.page-id-20 .um .um-field-radio .um-field-area,
body.page-id-19 .um .um-field-radio .um-field-area{
  padding-top: 6px;
}

body.page-id-20 .um .um-field-radio .um-field-area label,
body.page-id-19 .um .um-field-radio .um-field-area label{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 10px;
  border-radius: 12px;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);

  margin: 8px 0;
}

body.page-id-20 .um .um-field-radio input[type="radio"],
body.page-id-19 .um .um-field-radio input[type="radio"]{
  transform: scale(0.95);
}


/* =========================================================
   11) 送信ボタン（登録/ログイン）
   ========================================================= */

body.page-id-20 .um input[type="submit"],
body.page-id-19 .um input[type="submit"]{
  width: 100% !important;
  height: 50px !important;

  border-radius: 14px !important;
  border: none !important;

  background: #b5322b !important;
  color: #fff !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;

  margin-top: 6px;
  box-shadow: 0 10px 24px rgba(181,50,43,.22) !important;
}

@media (hover:hover){
  body.page-id-20 .um input[type="submit"]:hover,
  body.page-id-19 .um input[type="submit"]:hover{
    filter: brightness(.95);
  }
}

body.page-id-20 .um input[type="submit"]:active,
body.page-id-19 .um input[type="submit"]:active{
  transform: translateY(1px);
}


/* =========================================================
   12) 下部リンク（ログインはこちら等）
   ========================================================= */

body.page-id-20 .um .um-col-alt,
body.page-id-19 .um .um-col-alt{
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

body.page-id-20 .um .um-col-alt a,
body.page-id-19 .um .um-col-alt a{
  color: #b5322b;
  font-weight: 700;
  text-decoration: none;
}


/* =========================================================
   13) 余計な日付/メタ抑止（register/login だけ）
   ========================================================= */

body.page-id-20 .date-tags,
body.page-id-20 .post-meta,
body.page-id-20 .entry-date,
body.page-id-20 .article-date,
body.page-id-19 .date-tags,
body.page-id-19 .post-meta,
body.page-id-19 .entry-date,
body.page-id-19 .article-date{
  display: none !important;
}


/* /mypage（ID:797）だけ：日付・更新日・メタ情報を非表示 */
.page-id-797 .date-tags,
.page-id-797 .post-date,
.page-id-797 .post-update,
.page-id-797 time,
.page-id-797 .entry-date,
.page-id-797 .entry-meta {
  display: none !important;
}


/* =========================================================
   /mypage（ID:797）最小ダッシュボードUI
   ========================================================= */

/* コンテンツ幅と余白（テーマ差分に強くする） */
.page-id-797 .entry-content {
  max-width: 820px;
  margin: 0 auto;
}

/* ショートコードのラッパ */
.page-id-797 .md-mypage-min {
  margin-top: 20px;
}

/* 2つのリンクを“ボタン化” */
.page-id-797 .md-mypage-min__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* 共通ボタン */
.page-id-797 .md-mypage-min__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;           /* タップしやすい */
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid rgba(0,0,0,.12);
}

/* プライマリ（プロフィール編集） */
.page-id-797 .md-mypage-min__btn--primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* サブ（ログアウト） */
.page-id-797 .md-mypage-min__btn--ghost {
  background: #fff;
  color: #111;
}

/* ホバー（PC） */
@media (hover:hover) {
  .page-id-797 .md-mypage-min__btn:hover {
    opacity: .9;
  }
}

/* スマホでも横並び・中央寄せ */
.page-id-797 .md-mypage-min__actions {
  justify-content: center;
}


/* =========================================================
   /mypage/reviews（page-id-800）
   最小：横はみ出し根絶（長文 + ドロワー）
   ========================================================= */

/* 1) 日付/メタ非表示（必要なら残す） */
.page-id-800 .date-tags,
.page-id-800 .post-date,
.page-id-800 .post-update,
.page-id-800 time,
.page-id-800 .entry-date,
.page-id-800 .entry-meta {
  display: none !important;
}

/* 2) 目次（TOC）非表示（必要なら残す） */
.page-id-800 #toc,
.page-id-800 .toc {
  display: none !important;
}

/* 3) 本丸：長い連続文字を必ず折り返す（タイトル/本文） */
.page-id-800 .md-review-main,
.page-id-800 .md-review-meta-line,
.page-id-800 .md-review-title {
  min-width: 0 !important;
}

.page-id-800 .md-review-title,
.page-id-800 .md-review-title *,
.page-id-800 .md-review-text,
.page-id-800 .md-review-text *,
.page-id-800 .glsr-tag-value,
.page-id-800 .glsr-tag-value * {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* 4) 検証モードで横スクロールを作る“閉じたドロワー”を消す */
@media (max-width: 480px){
  .navi-menu-button #navi-menu-input:not(:checked) ~ #navi-menu-content{
    display:none !important;
  }
}