@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ==================================
   記事用 ナンバー付きH2見出し
================================== */

.entry-content {
  counter-reset: mia-heading;
}

.entry-content h2.mia-heading {
  counter-increment: mia-heading;

  display: flex;
  align-items: center;
  gap: 12px;

  margin: 2.8em 0 1.3em;
  padding: 0;

  background: none;
  border: none;

  color: #253e59;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.5;
}

/* 01・02・03 の丸 */
.entry-content h2.mia-heading::before {
  content: counter(mia-heading, decimal-leading-zero);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  flex: 0 0 46px;

  box-sizing: border-box;
  border-radius: 50%;

  background: #527b9c;
  color: #ffffff;

  font-size: 15px;
  font-weight: 500;
}

/* 見出し右側の細い線 */
.entry-content h2.mia-heading::after {
  content: "";

  flex: 1;
  height: 1px;
  min-width: 25px;

  background: #aab9c5;
}

/* スマホ */
@media screen and (max-width: 600px) {

  .entry-content h2.mia-heading {
    gap: 9px;
    margin: 2.3em 0 1em;
    font-size: 1.1em;
  }

  .entry-content h2.mia-heading::before {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 12px;
  }
}

/* 汎用情報カード */
.entry-content .mia-info {
  margin: 2em 0;
  padding: 18px 22px;
  background: #f4f8fb;
  border-left: 4px solid #527b9c;
  border-radius: 6px;
}

.entry-content .mia-info p:first-child {
  margin-top: 0;
  margin-bottom: 10px;
  color: #253e59;
  font-size: 1.05em;
  font-weight: 700;
}

/* ==================================
   目次デザイン
================================== */

.entry-content .toc {
  background: #f7fafc;
  border: 1px solid #d6e2eb;
  border-radius: 8px;
  padding: 22px 26px;
}

/* 「目次」のタイトル */
.entry-content .toc-title {
  color: #253e59;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 目次のリンク */
.entry-content .toc a {
  color: #253e59;
  text-decoration: none;
}

/* 01・02などの番号 */
.entry-content .toc-list {
  color: #527b9c;
}

/* 項目同士を少しゆったり */
.entry-content .toc-list li {
  margin: 8px 0;
  line-height: 1.7;
}

/* 目次タイトルを「CONTENTS　目次」に */
.entry-content .toc-title {
  font-size: 0;
}

.entry-content .toc-title::before {
  content: "CONTENTS　目次";
  font-size: 16px;
  color: #253e59;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ==================================
   目次の開閉を矢印で表示
================================== */

/* 閉じているとき */
.entry-content .toc-title::after {
  content: "⌄";
  margin-left: 8px;
  color: #527b9c;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

/* 開いているとき */
.entry-content .toc-checkbox:checked + .toc-title::after {
  content: "⌃";
}

/* ==================================
   サイドバー文字サイズ・余白調整
================================== */

/* サイドバー全体の基本文字サイズ */
.sidebar {
  font-size: 14px;
}

/* カテゴリー・アーカイブなどのリスト */
.sidebar ul li {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* リスト内リンク */
.sidebar ul li a {
  font-size: 14px;
  line-height: 1.5;
}

/* プロフィール本文 */
.sidebar .author-box,
.sidebar .author-box p {
  font-size: 14px;
  line-height: 1.6;
}

/* サイドバーのリスト間隔をコンパクトに */
.sidebar ul li {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.4;
}

/* リンク自体の余白も調整 */
.sidebar ul li a {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.4;
}

/* ==================================
   トップナビの文字サイズ
================================== */

#navi .item-label {
  font-size: 14px;
}

/* トップメニューの横幅を少しコンパクトに */
#navi .navi-in > ul > li {
  width: 190px;
}

/* PCヘッダーを横長に調整 */
@media screen and (min-width: 769px) {
  #header {
    aspect-ratio: 3 / 1;
    background-size: cover;
    background-position: center 30%;
  }
}

/* ==================================
   PCヘッダー タイトルを左寄せ
================================== */

@media screen and (min-width: 769px) {

  #header .logo {
    text-align: left;
    margin-left: 4%;
    margin-right: auto;
  }

  #header .site-name-text {
    font-size: 28px;
  }
}

/* ==================================
   PCヘッダー タイトル＋英字サブタイトル
================================== */

@media screen and (min-width: 769px) {

  /* タイトル全体を左へ */
  #header .logo {
    text-align: left;
    margin-left: 4%;
    margin-right: auto;
	transform: translateY(-20px); 
  }

  /* 日本語タイトル */
  #header .site-name-text {
    display: inline-block;
    font-size: 28px;
    line-height: 1.5;
  }

  /* 英字サブタイトル */
  #header .site-name-text::after {
    content: "FINAL FANTASY XIV\A SCREENSHOTS · HOUSING · SLOW LIFE";
    white-space: pre;

    display: block;
    margin-top: 10px;
    padding-top: 8px;

    border-top: 1px solid rgba(255, 255, 255, 0.65);

    color: rgba(255, 255, 255, 0.9);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.15em;
  }
}

/* ==================================
   フッター コピーライト調整
================================== */

#footer .copyright {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 30px;

  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

/* ==================================
   PCヘッダー フェードスライドショー
================================== */

@media screen and (min-width: 769px) {

  #header {
    position: relative;
    overflow: hidden;
    background-image: none !important;
  }

  #header .mia-header-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  #header .mia-header-slide {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center 30%;

    opacity: 0;
    transition: opacity 2s ease-in-out;
  }

  #header .mia-header-slide.is-active {
    opacity: 1;
  }

  /* タイトルを写真より前に出す */
  #header .logo {
    position: relative;
    z-index: 2;
  }
}

/* ==================================
   ヘッダー文字を読みやすくする
================================== */

@media screen and (min-width: 769px) {

  #header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.16) 30%,
      rgba(0, 0, 0, 0) 55%
    );

    pointer-events: none;
  }

  #header .logo {
    position: relative;
    z-index: 2;
  }

  #header .site-name-text {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  }
}

/* ==================================
   SCREENSHOT & SUPPORT
   コンパクト完成版
================================== */

.mia-footer-guide {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  margin: 25px 0 20px;
  padding: 20px 30px 19px;

  background:
    linear-gradient(
      rgba(251, 253, 255, 0.90),
      rgba(242, 248, 252, 0.90)
    ),
    url("https://hinacyocomia.com/wp-content/uploads/2026/09/miahousingfooterimg.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: 1px solid #9fc5df;
  border-radius: 10px;

  color: #253e59;
}


/* 月 */

.mia-footer-guide::before {
  content: "☾";
  display: block;

  margin-bottom: 3px;

  color: #527b9c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1;
  text-align: center;
}


/* タイトル */

.mia-footer-guide-header {
  position: relative;
  z-index: 1;

  margin-bottom: 17px;
  text-align: center;
}

.mia-footer-guide-title {
  color: #315f83;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.13em;
}

.mia-footer-guide-subtitle {
  margin-top: 4px;

  color: #527b9c;
  font-size: 14px;
  letter-spacing: 0.06em;
}


/* タイトル下のライン */

.mia-footer-guide-header::after {
  content: "◆";

  display: flex;
  align-items: center;
  justify-content: center;

  width: 58%;
  margin: 11px auto 0;

  color: #8fb8d5;
  font-size: 8px;

  background:
    linear-gradient(
      to right,
      #b8d3e5 0%,
      #b8d3e5 47%,
      transparent 47%,
      transparent 53%,
      #b8d3e5 53%,
      #b8d3e5 100%
    )
    center / 100% 1px no-repeat;
}


/* 各案内 */

.mia-footer-guide-item {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  gap: 13px;
}


/* アイコン */

.mia-footer-guide-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 50%;

  background: rgba(205, 226, 241, 0.88);

  color: #315f83;
  font-size: 17px;
  line-height: 1;
}


/* 文章 */

.mia-footer-guide-content {
  flex: 1;
  min-width: 0;
}

.mia-footer-guide-heading {
  margin-bottom: 3px;

  color: #253e59;
  font-size: 14px;
  font-weight: 700;
}

.mia-footer-guide-content p {
  margin: 0;

  color: #40566a;
  font-size: 14px;
  line-height: 1.65;
}


/* 中央の区切り線 */

.mia-footer-guide-divider {
  position: relative;
  z-index: 1;

  height: 1px;
  margin: 15px 0;

  background: #bfd6e6;
}

.mia-footer-guide-divider::after {
  content: "◆";

  position: absolute;
  top: 50%;
  left: 50%;

  padding: 0 7px;

  background: #f5f9fc;
  color: #8fb8d5;

  font-size: 8px;

  transform: translate(-50%, -50%);
}


/* ==================================
   スマホ
================================== */

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

  .mia-footer-guide {
    margin: 20px 0 16px;
    padding: 18px 14px 17px;
  }

  .mia-footer-guide::before {
    font-size: 19px;
  }

  .mia-footer-guide-title {
    font-size: 16px;
    letter-spacing: 0.08em;
  }

  .mia-footer-guide-subtitle {
    font-size: 13px;
  }

  .mia-footer-guide-header {
    margin-bottom: 15px;
  }

  .mia-footer-guide-header::after {
    width: 75%;
    margin-top: 9px;
  }

  .mia-footer-guide-item {
    gap: 9px;
  }

  .mia-footer-guide-icon {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
    font-size: 15px;
  }

  .mia-footer-guide-heading,
  .mia-footer-guide-content p {
    font-size: 14px;
  }

  .mia-footer-guide-content p {
    line-height: 1.6;
  }

  .mia-footer-guide-divider {
    margin: 13px 0;
  }
}

/* ==================================
   SCREENSHOT & SUPPORT
   スマホ改行・レイアウト調整
================================== */

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

  /* アイコン＋文章を縦方向へ */
  .mia-footer-guide-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 10px;
    align-items: center;
  }

  /* 見出しをアイコンの横へ */
  .mia-footer-guide-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .mia-footer-guide-content {
    display: contents;
  }

  .mia-footer-guide-heading {
    grid-column: 2;
    grid-row: 1;

    margin: 0;
    line-height: 1.5;
  }

  /* 本文はカードの横幅を広く使う */
  .mia-footer-guide-content p {
    grid-column: 1 / -1;
    grid-row: 2;

    margin-top: 8px;
    padding-left: 0;

    font-size: 14px;
    line-height: 1.8;
  }

  /* PC用に入れた強制改行をスマホでは解除 */
  .mia-footer-guide-content p br {
    display: none;
  }
}