/*
  Theme Name: Yaruohiroba 3rd
  Theme URI: https://example.com/
  Author: Yaruohiroba
  Description: やる夫広場用のシンプルなモバイルファーストWordPressテーマのたたき台
  Version: 1.2.8

  Text Domain: yaruohiroba-3rd
*/

/* Base reset */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
input,button,textarea,select{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
a{ text-decoration:none; }

/* Colors / base */
body{
  background:#e0f7fa; color:#111;
  font-family: system-ui,-apple-system,'Segoe UI',Roboto,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
}
li{ list-style:none; }

/* Header */
.header{
  display:flex; align-items:center; justify-content:space-between;
  background:#a0d8ef; width:100%; padding:0 .8rem;
}
.title{ color:#fff; margin:1rem; font-family:'Courier New', Courier, monospace; }
.nav-list{ display:flex; flex-wrap:wrap; gap:.6rem; padding:1rem; }
.nav-item{ background:#a0efde; border-radius:8px; font-weight:bold; padding:.6rem .8rem; }
.nav-item:hover{ background:#50b7e2; opacity:.9; }

/* Layout: mobile-first (1 column) */
.main{ display:block; width:100%; margin:0 auto; padding:0; }
.sidebar{ display:none; background:#fff; border-radius:8px; margin:2rem 0; padding:1rem; }
.mainbar{
  background:#fff; border-radius:8px;
  margin:1rem; padding:0;
  overflow-x:auto;           /* 狭い画面では横スクロールで守る */
  min-width:1024px;          /* ★ スマホはviewport固定で“実質1024px”確保 */
}

/* Boxes */
/* セクションの枠（500pxに収める） */
.main-wrapper{
  background:#fff;
  border:2px solid #008080;
  border-radius:8px;
  margin:1rem;
  max-height:500px;
  display:flex;             /* 見出し＋本文で縦レイアウト */
  flex-direction:column;
}

/* 見出しは常に上に表示（任意。外したければ position を削除） */
.main-wrapper > .post-box-header{
  background:#008080;
  color:#fff;
  border-bottom:2px solid #008080;
  font-size:1.25rem;
  padding:.5rem 1rem;
  border-radius:8px 8px 0 0;
  position:sticky; top:0; z-index:1;
}

/* 中身だけ縦スクロール（直下の post-box のみ） */
.main-wrapper > .post-box{
  display:flex;
  align-items:flex-start;
  padding:1rem;
  flex:1 1 auto;    /* 余白を全部ここに配分 */
  min-height:0;     /* flex子が正しく縮むために重要 */
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* リストの余白調整（main-wrapper の外に定義） */
ul.post-list{ padding:0; margin:0; }

/* いいねランキングだけ全表示（高さ制限＆スクロールを解除） */
.main-wrapper--auto{ 
  max-height:none;
}
.main-wrapper--auto > .post-box{
  overflow:visible;     /* スクロールさせない */
  flex:0 0 auto;        /* 伸び縮みさせず中身の高さに合わせる */
}


/* ▼ post-box 内の縦の余白を整える（汎用） */
.post-box-body > * + * { margin-top: 1rem; }      /* 直下の兄弟要素の間に1rem */
.post-list li + li    { margin-top: .5rem; }      /* リストなら少し控えめ */
.post-list li + li{
  border-top: 1px solid #e6eff2;  /* うっすら区切り線 */
  margin-top: .6rem;              /* 線と内容の間隔 */
}


/* ▼ ランキングの各エントリ間 */
.post { padding: 0; }
.post + .post {
  margin-top: .6rem;
  border-top: 1px solid #e6eff2;                  /* うっすら区切り線 */
}

/* ▼ 各エントリ内の余白と読みやすさ */
.post-content { margin-top: .5rem; line-height: 1.7; }
.post-content p + p { margin-top: .75rem; }       /* 段落間も広げる */
.post-title { margin-right: .5rem; padding: 2rem 0;}
.post-meta  { margin-left: .5rem; opacity: .8; }

/* （オプション）flex/gapで縦リスト化したい場合はこれでもOK
.New_contents { display: flex; flex-direction: column; gap: 12px; }
*/

.post-title-link {
  padding: 0;
  margin: 0;
}
/* ▼ランキングカードのクリックずれ防止＆タイトルの余白を縮める */
.post { 
  position: relative;
  isolation: isolate;          /* 兄弟要素との重なり事故を遮断 */
  background: transparent;
}
.post + .post { margin-top: .75rem; }

.post-header{
  display:flex; 
  align-items: baseline;
  justify-content: space-between;
  gap:.5rem;
  position: relative;
  z-index: 0;
}

/* タイトルの余白を削る＆可変幅にしてメタとバッティングしない */
.post-header .post-title,
.post-header h3.post-title{
  margin: 0 !important;        /* 余白をギュッと */
  padding: 0 !important;
  flex: 1 1 auto;              /* タイトルは可変幅 */
  min-width: 0;                /* 省略記号のために必要 */
  line-height: 1.4;
}

/* タイトルのリンクは1行で省略。クリックは最前面で確実に拾う */
.post-title a,
.post-title-link{
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  position: relative;
  z-index: 1;                  /* 下の要素より前面 */
}

/* メタは固定幅寄りにして折り返さない */
.post-header .post-meta{
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
  font-size: .9rem;
  opacity: .9;
}

/* 本文との間隔を少しだけ */
.post-content{ margin-top: .35rem; }














/* いいねランキングの各アイテムをボックス化 */
.like_ranking > .post-box{
  border:1px solid #008080;
  border-radius:10px;
  background:#fff;
  padding:12px 14px;
  margin:12px 0;              /* アイテム間の余白 */
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

/* 中身を横並びに（画像+本文） */
.like_ranking > .post-box > a{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

/* 画像と本文の幅調整（お好みで） */
.like_ranking > .post-box .post-img{ flex:0 0 120px; }
.like_ranking > .post-box .post-content{ flex:1; }
.like_ranking > .post-box:hover{ border-color:#50b7e2; box-shadow:0 2px 6px rgba(0,0,0,.06); }


.like_ranking .like-count{
  margin-top:.25rem;
  font-size:.9rem;
  color:#666;
}
.like_ranking .post-title{ margin-bottom:.1rem; }

.like-count {
  font-size: 1.2rem;
}

h3 .post-title {
  font-size: 1.2rem;

}






/* Single / AA（AAは幅を確保＆改行しない） */
.AA-area{
  margin:1rem 0; padding:2rem 1rem; background:#fff;
  font-size:16px; line-height:18px;
  font-family:"ＭＳ Ｐゴシック","MS PGothic","MS Pｺﾞｼｯｸ","MS Pゴシック",ＭＳＰゴシック,MSPゴシック,IPAMonaPGothic,"IPA モナー Pゴシック","IPA mona PGothic","IPA MONAPGOTHIC",Mona,Monapo,Saitamaar,sans-serif;
  white-space:pre; font-variant-ligatures:none;
  width:auto; min-width:1024px; /* ★ 基本は1024px。広い画面で1200pxに引き上げ */
}

.single-head {
  margin-left: 32px;
}
.post-meta {
  margin: 0;
}

.thread-thumbnail {
  border: 1px solid #333;
  max-height: 50%;
  max-width: 50%;
}

.thread-tags {
  font-size: 1.5rem;
}
.like-label{
  font-size: 1.5rem;
}

fav-button {
  font-size: 1.2rem;
  padding: 1rem;
}
.like-button {
  padding: 1rem;

}






/* Footer */
.footer{ display:flex; align-items:center; justify-content:space-between; background:#a0d8ef; padding:1rem; }



/*作者一覧*/
.author-list .page-title{ margin:1rem; }
.author-blocks{ margin:1rem; padding:0; list-style:none; }
.author-box{ margin:0 0 .75rem 0; }
.author-name{
  cursor:pointer; padding:.6rem .8rem; border:1px solid #cfd8dc;
  border-radius:6px; background:#f5f9ff; font-weight:600;
}
.author-name:hover{ background:#eaf2ff; }
.author-works{ margin:.5rem 0 0 1rem; padding-left:.5rem; border-left:2px solid #e0e0e0; }
.author-works li{ margin:.25rem 0; }
.author-count{ font-weight:400; font-size:.9em; margin-left:.25rem; }


/*作品一覧*/
.thread-area {
  padding: 2rem;
}

.thread-list-excerpt p {
  display: none;
}

.thread-list-title {
  margin:1rem 0;
}






/* 1440px〜：2カラム（1024 + 400 + 16 = 1440 相当） */
@media (min-width: 1440px){
  main.main{ display:flex; gap:3rem; align-items:flex-start; justify-content:center; }
  aside.sidebar{ display:block; width:400px; }
  .mainbar{
    flex:0 1 1024px;      /* メインは 1024px 基本 */
    min-width:1024px;     /* ← ここ 124px などのタイプミスが残ってないか要確認 */
    margin:2rem 0;
  }
  .AA-area{ min-width:1024px; }
}

/* 1732px〜：メインを 1200px に拡張（1300 + 400 + 32 ≈ 1732） */
@media (min-width: 1732px){
  main.main{ display:flex; gap:1rem; align-items:flex-start; justify-content:center; }
  aside.sidebar{ display:block; width:400px; }
  .mainbar{
    flex:0 1 1300px;
    min-width:1300px;
    margin:2rem 0;
  }
  .AA-area{ min-width:1200px; }
}



/* Small screens */
@media (max-width: 763px){
  .title{ font-size:1rem; margin:1rem; }
  .nav-item{ font-size:.75rem; }
}




.aa, .thread-body {  font-size: 16px;  font-family: "ＭＳ Ｐゴシック", "MS PGothic", "MS Pｺﾞｼｯｸ", "MS Pゴシック", ＭＳＰゴシック, MSPゴシック, IPAMonaPGothic, "IPA モナー Pゴシック", "IPA mona PGothic", "IPA MONAPGOTHIC", Mona, Monapo, Saitamaar, sans-serif;  line-height: 18px;  margin-bottom: 0;  padding: 0;  overflow: visible;  white-space: nowrap;}



  /* 3) ランキング欄の本文を非表示（影響大：必要に応じて範囲絞る） */  .post-content p { display: none; }


  pre.aa {    font-family: "MS PGothic","Osaka-Mono","Mona","IPA Mono",monospace;    font-size: 16px; white-space: pre; overflow-x: auto;    background-color: #f9f9f9; padding: 1em; border-radius: 5px;  }






/*作者一覧*/
.author-list .page-title{ margin:1rem; }
.author-blocks{ margin:1rem; padding:0; list-style:none; }
.author-box{ margin:0 0 .75rem 0; }
.author-name{
  cursor:pointer; padding:.6rem .8rem; border:1px solid #cfd8dc;
  border-radius:6px; background:#f5f9ff; font-weight:600;
}
.author-name:hover{ background:#eaf2ff; }
.author-works{ margin:.5rem 0 0 1rem; padding-left:.5rem; border-left:2px solid #e0e0e0; }
.author-works li{ margin:.25rem 0; }
.author-count{ font-weight:400; font-size:.9em; margin-left:.25rem; }





/*TOPへ*/
/* スムーススクロール */
html { scroll-behavior: smooth; }

/* 固定ヘッダー分のマージン（数値はサイトに合わせて調整） */
#top { scroll-margin-top: 72px; }
.admin-bar #top { scroll-margin-top: 104px; } /* WP管理バー考慮 */

/* 右下固定のTOPボタン（最小構成） */
.c-topbtn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
color: ;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: #0ea5e9;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);

  /* フェード表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.c-topbtn.is-show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}
@media (hover:hover){
  .c-topbtn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
}
.c-topbtn:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

/* iPhoneノッチの安全域（対応環境のみ適用） */
@supports (padding: max(0px)){
  .c-topbtn{
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}