/*
==================================================
 TIBERIUS-CAESAR 2026
 Reach Custom Design
==================================================
*/


/* ==================================================
   01. BASIC
================================================== */

body {
  background: #f7f6f2;
  color: #252525;
}

a {
  color: inherit;
}


/* ==================================================
   02. BLOG HEADER
================================================== */

#blog-title {
  background: #1f2528;
  padding: 48px 20px 42px;
  text-align: center;
}

#blog-title #title {
  margin: 0;
  font-family:
    Georgia,
    "Times New Roman",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: 42px;
  font-weight: normal;
  letter-spacing: 0.12em;
}

#blog-title #title a {
  color: #ffffff;
  text-decoration: none;
}

#blog-title #blog-description {
  margin-top: 14px;
  color: #c9c9c5;
  font-size: 14px;
  letter-spacing: 0.1em;
}


/* ==================================================
   03. TOP PAGE CUSTOM AREA
================================================== */

/*
  tc-home はトップページだけ表示
*/

.tc-home {
  display: none;
}

.page-index .tc-home {
  display: block;
}


/* ==================================================
   04. GLOBAL NAVIGATION
================================================== */

.tc-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #deddd8;
  margin: 0;
  padding: 0;
}

.tc-nav a {
  display: block;
  padding: 16px 24px;
  color: #444444;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  border-right: 1px solid #e5e4df;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.tc-nav a:first-child {
  border-left: 1px solid #e5e4df;
}

.tc-nav a:hover {
  background: #1f2528;
  color: #ffffff;
}


/* ==================================================
   05. HERO
================================================== */

.tc-hero {
  background: #eceae3;
  padding: 95px 30px 90px;
}

.tc-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}

.tc-eyebrow {
  margin: 0 0 18px;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #777777;
}

.tc-hero h2 {
  margin: 0 0 30px;
  font-family:
    Georgia,
    "Times New Roman",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: 48px;
  line-height: 1.3;
  font-weight: normal;
  letter-spacing: 0.04em;
}

.tc-lead {
  margin: 0 0 30px;
  font-size: 20px;
  line-height: 2;
  letter-spacing: 0.08em;
}

.tc-description {
  max-width: 620px;
  margin: 0;
  color: #666666;
  font-size: 14px;
  line-height: 2;
}


/* ==================================================
   06. SECTION
================================================== */

.tc-section,
.tc-pickup {
  max-width: 1000px;
  margin: 0 auto;
  padding: 85px 30px;
}

.tc-section-title {
  margin-bottom: 38px;
}

.tc-section-title span {
  display: block;
  margin-bottom: 8px;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #888888;
}

.tc-section-title h2 {
  margin: 0;
  font-family:
    Georgia,
    "Times New Roman",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: 30px;
  line-height: 1.4;
  font-weight: normal;
}


/* ==================================================
   07. FEATURE CARDS
================================================== */

.tc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.tc-card {
  display: block;
  padding: 35px 30px 32px;
  background: #ffffff;
  border: 1px solid #e2e0da;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.tc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.07);
}

.tc-card-number {
  margin-bottom: 22px;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  color: #999999;
  font-size: 13px;
}

.tc-card h3 {
  margin: 0 0 18px;
  font-family:
    Georgia,
    "Times New Roman",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: 27px;
  font-weight: normal;
}

.tc-card p {
  margin: 0 0 28px;
  color: #666666;
  font-size: 13px;
  line-height: 1.9;
}

.tc-card span {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: #555555;
}


/* ==================================================
   08. PICK UP
================================================== */

.tc-pickup {
  border-top: 1px solid #dddcd6;
}

.tc-pickup-list {
  border-top: 1px solid #dddcd6;
}

.tc-pickup-list a {
  display: grid;
  grid-template-columns: 60px 1fr 150px;
  align-items: center;
  gap: 20px;
  padding: 22px 10px;
  border-bottom: 1px solid #dddcd6;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.tc-pickup-list a:hover {
  background: #f2f1ec;
}

.tc-pickup-list span {
  color: #999999;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

.tc-pickup-list strong {
  font-size: 15px;
  font-weight: normal;
}

.tc-pickup-list small {
  color: #888888;
  text-align: right;
}


/* ==================================================
   09. ABOUT
================================================== */

.tc-about {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  margin: 0;
  padding: 85px max(30px, calc((100% - 1000px) / 2 + 30px));
  background: #eceae3;
}

.tc-about h2 {
  margin: 0;
  font-family:
    Georgia,
    "Times New Roman",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: 30px;
  line-height: 1.5;
  font-weight: normal;
}

.tc-about p {
  margin-top: 0;
  margin-bottom: 22px;
  color: #555555;
  font-size: 14px;
  line-height: 2;
}


/* ==================================================
   10. TOP PAGE LAYOUT
================================================== */

/*
  トップページではサイドバーを隠す。
  個別記事・アーカイブではReach標準レイアウトを使用。
*/

.page-index #box2 {
  display: none;
}

.page-index #main {
  width: 100%;
  margin: 0;
  padding: 0;
}


/*
  トップページに標準記事一覧を表示しない。
*/

.page-index #main-inner > *:not(.tc-home) {
  display: none !important;
}


/* ==================================================
   11. ARTICLE PAGE
================================================== */

.entry-title {
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    Georgia,
    serif;
  font-weight: normal;
}

.entry-content {
  line-height: 1.95;
}


/* ==================================================
   12. ARCHIVE PAGE
================================================== */

/*
  アーカイブだけはReachの標準構造を保ちつつ
  全体を中央配置する。
*/

.page-archive #content {
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-archive #content-inner {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ==================================================
   13. FROM THE ARCHIVE
================================================== */

.tc-archive {
  max-width: 1100px;
  margin: 90px auto 0;
  padding: 70px 60px;
  background: #eeece5;
  box-sizing: border-box;
  text-align: center;
}

.tc-archive .tc-section-title {
  margin-bottom: 28px;
}

.tc-archive-lead {
  max-width: 700px;
  margin: 0 auto 35px;
  color: #555555;
  font-size: 15px;
  line-height: 2;
}

.tc-archive-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-width: 250px;
  padding: 16px 28px;
  box-sizing: border-box;
  border: 1px solid #1f2528;
  color: #1f2528;
  background: #f7f6f2;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.12em;
  transition: all 0.25s ease;
}

.tc-archive-button span {
  font-size: 18px;
  line-height: 1;
}

.tc-archive-button:hover {
  background: #1f2528;
  color: #ffffff;
}


/* ==================================================
   14. POPULAR ARTICLES
================================================== */

.tc-popular {
  max-width: 1100px;
  margin: 90px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.tc-popular .tc-section-title {
  margin-bottom: 35px;
}

.tc-popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tc-popular-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 30px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e3e1db;
  color: #1f2528;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.tc-popular-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.tc-popular-number {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #b5b2aa;
  font-size: 28px;
  font-weight: 300;
}

.tc-popular-category {
  margin-bottom: 25px;
  color: #77736b;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.15em;
}

.tc-popular-card h3 {
  margin: 0;
  padding-right: 35px;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;
}

.tc-popular-more {
  margin-top: auto;
  padding-top: 25px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.12em;
}


/* ==================================================
   15. FIXED PAGES
   免責事項・プライバシーポリシー・お問い合わせ
================================================== */

/*
  固定ページは本文を読みやすい幅にする。
*/

.static-page-disclaimer #main,
.static-page-privacy-policy #main,
.static-page-contact #main {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto !important;
  padding: 60px 30px !important;
  box-sizing: border-box;
}

.static-page-disclaimer #main-inner,
.static-page-privacy-policy #main-inner,
.static-page-contact #main-inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto !important;
}

.static-page-disclaimer .entry-content,
.static-page-privacy-policy .entry-content,
.static-page-contact .entry-content {
  max-width: 800px;
  margin: 0 auto;
  color: #333333;
  font-size: 15px;
  line-height: 2;
}

.static-page-disclaimer .entry-content h2,
.static-page-privacy-policy .entry-content h2,
.static-page-contact .entry-content h2 {
  margin-top: 50px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dddddd;
  font-size: 22px;
  font-weight: 500;
}

.static-page-disclaimer .entry-content h3,
.static-page-privacy-policy .entry-content h3,
.static-page-contact .entry-content h3 {
  margin-top: 35px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
}


/* ==================================================
   16. FOOTER
================================================== */

#footer {
  background: #1f2528;
  color: #aaaaaa;
  padding: 45px 20px;
  text-align: center;
}

#footer a {
  color: #dddddd;
}


/* ==================================================
   17. CUSTOM FOOTER
================================================== */

.tc-footer {
  text-align: center;
  padding: 20px 20px 10px;
}

.tc-footer-title {
  margin-bottom: 10px;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 18px;
  letter-spacing: 0.12em;
}

.tc-footer-description {
  margin-bottom: 22px;
  color: #999999;
  font-size: 12px;
}

.tc-footer-links {
  margin-bottom: 25px;
}

.tc-footer-links a {
  display: inline-block;
  margin: 0 12px;
  color: #bbbbbb;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.tc-footer-links a:hover {
  color: #ffffff;
}

.tc-footer-copy {
  color: #777777;
  font-size: 10px;
}


/* ==================================================
   18. FOOTER LEGAL LINKS
================================================== */

.tc-footer-legal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 25px;
  margin-top: 25px;
  margin-bottom: 20px;
  font-size: 11px;
}

.tc-footer-legal a {
  color: #888888;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tc-footer-legal a:hover {
  color: #ffffff;
}


/* ==================================================
   19. MOBILE
================================================== */

@media screen and (max-width: 767px) {

  #blog-title {
    padding: 38px 20px;
  }

  #blog-title #title {
    font-size: 30px;
    letter-spacing: 0.08em;
  }

  #blog-title #blog-description {
    font-size: 11px;
    letter-spacing: 0.06em;
  }


  .tc-nav {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
  }

  .tc-nav a {
    flex: 0 0 auto;
    padding: 14px 18px;
    font-size: 11px;
  }


  .tc-hero {
    padding: 65px 24px;
  }

  .tc-hero h2 {
    font-size: 34px;
  }

  .tc-lead {
    font-size: 17px;
  }

  .tc-description {
    font-size: 13px;
  }


  .tc-section,
  .tc-pickup {
    padding: 60px 22px;
  }


  .tc-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .tc-card {
    padding: 28px 25px;
  }


  .tc-pickup-list a {
    grid-template-columns: 40px 1fr;
    gap: 12px;
  }

  .tc-pickup-list small {
    display: none;
  }


  .tc-about {
    display: block;
    padding: 60px 22px;
  }

  .tc-about > div:first-child {
    margin-bottom: 40px;
  }

  .tc-about h2 {
    font-size: 26px;
  }


  .tc-archive {
    margin-top: 60px;
    padding: 50px 25px;
  }

  .tc-archive-lead {
    font-size: 14px;
    line-height: 1.9;
  }

  .tc-archive-button {
    width: 100%;
    min-width: 0;
  }


  .tc-popular {
    margin: 60px auto;
    padding: 0 15px;
  }

  .tc-popular-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .tc-popular-card {
    min-height: 200px;
    padding: 25px;
  }


  .tc-footer-legal {
    gap: 10px 18px;
    padding: 0 15px;
    line-height: 1.8;
  }


  .static-page-disclaimer #main,
  .static-page-privacy-policy #main,
  .static-page-contact #main {
    padding: 40px 20px !important;
  }

  .static-page-disclaimer .entry-content,
  .static-page-privacy-policy .entry-content,
  .static-page-contact .entry-content {
    font-size: 14px;
    line-height: 1.9;
  }

}
/* ==========================================
   個別記事・固定ページ
   Reach標準レイアウト
   ========================================== */

.page-entry #content,
.page-static_page #content {
  width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-entry #content-inner,
.page-static_page #content-inner {
  width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-entry #wrapper,
.page-static_page #wrapper {
  width: 620px !important;
  float: left !important;
}

.page-entry #main,
.page-static_page #main {
  width: 620px !important;
}

.page-entry #box2,
.page-static_page #box2 {
  width: 320px !important;
  float: right !important;
}


/* ==========================================
   アーカイブ
   ========================================== */

.page-archive #content {
  width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-archive #content-inner {
  width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-archive #wrapper {
  width: 620px !important;
  float: left !important;
}

.page-archive #main {
  width: 620px !important;
}

.page-archive #box2 {
  width: 320px !important;
  float: right !important;
}
/* ==========================================
   個別記事のフッター位置を正常化
   ========================================== */

.page-entry #footer,
.page-static_page #footer,
.page-archive #footer {
  clear: both !important;
}
/* ==========================================
   カテゴリーページ
   ========================================== */

.page-category #content {
  width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-category #content-inner {
  width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.page-category #wrapper {
  width: 620px !important;
  float: left !important;
}

.page-category #main {
  width: 620px !important;
}

.page-category #box2 {
  width: 320px !important;
  float: right !important;
}