/* ==========================================================
   フロントページ
========================================================== */

/* ========================================
   10. ペンギン最新記事（しっぽ付き）
======================================== */

.latest-diary-character {
	display: flex;
	align-items: center;
	gap: 4px;
	width: min(100%, 680px);
	margin: 32px auto;
}

.latest-diary-penguin {
	flex: 0 0 128px;
	width: 128px !important;
	margin: 0 !important;
}

.latest-diary-penguin img {
	display: block;
	width: 128px !important;
	height: 128px !important;
	max-width: none !important;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.latest-diary-character > .wp-block-shortcode {
	flex: 1;
	min-width: 0;
	margin: 0;
}

.latest-diary-bubble {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	background: linear-gradient(
		to bottom,
		var(--color-white) 0%,
		#f7ffe7 100%
	);
	border-top: 2px solid var(--color-white);
	border-left: 2px solid var(--color-white);
	border-right: 2px solid var(--button-border-dark);
	border-bottom: 2px solid var(--button-border-dark);
	box-shadow: 1px 1px 0 rgba(55, 70, 38, 0.1);
}

.latest-diary-bubble::before,
.latest-diary-bubble::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
}

.latest-diary-bubble::before {
	top: 34px;
	left: -12px;
	border-top: 12px solid transparent;
	border-right: 12px solid var(--button-border-dark);
	border-bottom: 12px solid transparent;
}

.latest-diary-bubble::after {
	top: 36px;
	left: -9px;
	border-top: 10px solid transparent;
	border-right: 10px solid #f7ffe7;
	border-bottom: 10px solid transparent;
}

.latest-diary-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 7px;
	color: rgba(55, 65, 43, 0.75);
	font-size: 0.68rem;
	line-height: 1.3;
}

.latest-diary-category {
	display: inline-block;
	padding: 1px 5px;
	background: #e8f5bb;
	border: 1px solid #91a56b;
	font-size: 0.65rem;
	line-height: 1.3;
}

.latest-diary-text {
	margin: 0 0 8px;
	font-size: 0.88rem;
	line-height: 1.7;
}

.latest-diary-link {
	display: inline-block;
	color: var(--color-text);
	font-size: 0.72rem;
	line-height: 1.4;
	text-decoration: none;
}

.latest-diary-link:hover {
	text-decoration: underline;
}



/* ========================================
   トップページ：キャラクター案内
======================================== */

/* PC */
.top-guide {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: center;
	gap: 24px;
	width: 100%;
}

.top-guide-message {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 650px;
}

.top-guide-character {
	flex: 0 0 320px;
	width: 320px;
	margin: 0;
	line-height: 0;
}

.top-guide-character img {
	display: block;
	width: 320px;
	height: auto;
	max-width: none;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}


/* ========================================
   スマートフォン
======================================== */

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

	/* WordPressの横並び指定を上書き */
	.top-guide,
	.wp-block-group.top-guide,
	.wp-block-group.top-guide.is-layout-flex {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 16px;
	}

	/* はつめを上に表示 */
	.top-guide-character {
		order: -1;
		flex: 0 0 auto !important;
		width: 160px !important;
		max-width: 160px !important;
	}

	.top-guide-character img {
		width: 160px !important;
		height: auto !important;
		max-width: 160px !important;
	}

	/* 吹き出しを横いっぱいにする */
	.top-guide-message {
		order: 1;
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
}

/* 日記以外のアーカイブ一覧：投稿タイトルの先頭アイコン */
.archive-list-icon .wp-block-post-title a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.archive-list-icon .wp-block-post-title a::before {
  content: "";
  display: block;
  flex: 0 0 auto;

  width: 32px;
  height: 32px;

  background-image: url("https://fiasco.hippy.jp/ararano/wp-content/uploads/2026/07/hoshi_32.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  image-rendering: pixelated;
}


/* ========================================
   トップページ背景
======================================== */

.arara-home {

    background-color: #fbfaf3;

    background-image:

        /* Welcome付近を明るくする */
        linear-gradient(
            180deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.96) 8%,
            rgba(255,255,255,.75) 18%,
            rgba(255,255,255,0) 38%
        ),

        /* 右上の青緑 */
        radial-gradient(
            circle at 82% 35%,
            rgba(120,210,190,.12),
            transparent 48%
        ),

        /* 左下のクリーム */
        radial-gradient(
            circle at 15% 85%,
            rgba(248,229,170,.12),
            transparent 55%
        ),

        /* 超うすい格子（横線） */
        linear-gradient(
            rgba(90,150,120,.04) 1px,
            transparent 1px
        ),

        /* 超うすい格子（縦線） */
        linear-gradient(
            90deg,
            rgba(90,150,120,.04) 1px,
            transparent 1px
        );

    background-size:
        auto,
        auto,
        auto,
        12px 12px,
        12px 12px;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat;
}

@media (max-width: 600px) {

  .arara-home {
    background-color: #fbfaf3;

    background-image:

      linear-gradient(
        180deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.98) 10%,
        rgba(255,255,255,.86) 24%,
        rgba(255,255,255,0) 42%
      ),

      radial-gradient(
        circle at 78% 32%,
        rgba(120,210,190,.07),
        transparent 50%
      ),

      radial-gradient(
        circle at 18% 86%,
        rgba(248,229,170,.07),
        transparent 55%
      ),

      linear-gradient(
        rgba(90,150,120,.022) 1px,
        transparent 1px
      ),

      linear-gradient(
        90deg,
        rgba(90,150,120,.022) 1px,
        transparent 1px
      );

    background-size:
      auto,
      auto,
      auto,
      12px 12px,
      12px 12px;

    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat,
      repeat,
      repeat;
  }
}


/* ==========================================================
   てがろぐ最新ログ（MINI MEMO WINDOW）
========================================================== */

/* ==========================================================
   MINI MEMO WINDOW
   てがろぐ最新ログ
========================================================== */

.mini-memo-window {
  width: min(100%, 310px);
  margin: 44px 0 10px auto;

  color: #536a64;
  font-family:
    "BIZ UDPGothic",
    "Yu Gothic UI",
    "Meiryo",
    sans-serif;
  font-size: 10px;

  background: rgba(248, 250, 244, 0.72);

  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #8ea39a;
  border-bottom: 1px solid #8ea39a;

  box-shadow:
    1px 1px 0 rgba(55, 82, 75, 0.10),
    3px 3px 0 rgba(55, 82, 75, 0.05);
}


/* ----------------------------------------------------------
   タイトルバー
---------------------------------------------------------- */

.mini-memo-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  min-height: 22px;
  padding: 2px 5px 2px 7px;

  color: #58706a;
  background: #dfe8df;

  border-bottom: 1px solid #a4b5ad;
}


.mini-memo-title {
  overflow: hidden;

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.mini-memo-buttons {
  flex-shrink: 0;

  color: #7b9189;
  font-family: monospace;
  font-size: 8px;

  opacity: 0.7;
}


/* ----------------------------------------------------------
   本文
---------------------------------------------------------- */

.mini-memo-body {
  padding: 7px 9px 8px;
}


.mini-memo-label {
  margin: 0 0 5px;

  color: #93a29d;
  font-size: 8px;
  letter-spacing: 0.08em;
}


/* ----------------------------------------------------------
   RSS
---------------------------------------------------------- */

.mini-memo-feed {
  display: grid;
  gap: 0;
}


.mini-memo-entry {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 5px;

  padding: 4px 2px;

  color: #526963;
  text-decoration: none;

  border-bottom: 1px dotted rgba(104, 133, 124, 0.35);
}


.mini-memo-entry:last-child {
  border-bottom: 0;
}


.mini-memo-entry:hover {
  color: #254f48;
  background: rgba(218, 232, 220, 0.45);
}


.mini-memo-date {
  color: #83958f;
  font-family: monospace;
  font-size: 8px;
}


.mini-memo-text {
  min-width: 0;

  overflow: hidden;

  font-size: 9px;
  line-height: 1.55;

  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ----------------------------------------------------------
   OPEN
---------------------------------------------------------- */

.mini-memo-more {
  display: block;

  margin-top: 5px;

  color: #708b83;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-align: right;
  text-decoration: none;
}


.mini-memo-more:hover {
  color: #315e55;
  text-decoration: underline;
}


/* ----------------------------------------------------------
   RSS取得失敗時
---------------------------------------------------------- */

.mini-memo-empty {
  margin: 4px 0;

  color: #8a9994;
  font-size: 8px;
}


/* ==========================================================
   MINI MEMO + CHARACTER
========================================================== */

.mini-memo-area {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 44px;
}


/* ----------------------------------------------------------
   ドット立ち絵：原寸（1倍）表示
---------------------------------------------------------- */

.mini-memo-character {
  flex-shrink: 0;
  width: auto;
}

.mini-memo-character img {
  display: block;

  /* 元画像のサイズをそのまま使う */
  width: auto;
  height: auto;
  max-width: none;

  image-rendering: pixelated;
}

/* 既存の窓側のmarginをここでは解除 */
.mini-memo-area .mini-memo-window {
  margin: 0;
}



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

  .mini-memo-area {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-top: 32px;
  }

  .mini-memo-character {
    width: auto;

    /* ★画像だけ中央寄せ */
    align-self: center;

    /* 前に入れてた右余白は不要 */
    margin-right: 0;
  }

}


/* ==========================================================
   トップページ：ページビューカウンター
========================================================== */

.ararano-counter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: fit-content;
	margin: 18px auto;
	padding: 5px 9px;
	color: #53675f;
	font-family: "MS Gothic", "DotGothic16", monospace;
	font-size: 11px;
	line-height: 1;
	background: rgba(245, 248, 238, 0.88);
	border: 1px solid rgba(81, 108, 94, 0.38);
	box-shadow: inset 1px 1px 0 #fff;
}

.ararano-counter__label {
	letter-spacing: 0.04em;
}

.ararano-counter__number {
	min-width: 6ch;
	padding: 3px 4px 2px;
	color: #d9efaa;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	background: #294f49;
	border: 1px inset #789188;
}

@media screen and (max-width: 600px) {
	.ararano-counter {
		margin-block: 14px;
	}
}


/* ==========================================================
   トップページ：コンテンツハブ
========================================================== */

.contents-hub {
	box-sizing: border-box;
	width: min(100%, 920px);
	margin: 36px auto;
	color: #183f3d;
	font-family: "MS PGothic", "ＭＳ Ｐゴシック", "DotGothic16", sans-serif;
}

.contents-hub *,
.contents-hub *::before,
.contents-hub *::after {
	box-sizing: border-box;
}

.contents-hub-heading {
	margin: 28px 0 18px;
	color: #174a49;
	font-family: "DotGothic16", "BIZ UDPGothic", sans-serif;
	font-size: 1rem;
	letter-spacing: 0.14em;
	text-align: center;
}

.contents-hub-heading span {
	color: #8cac63;
}

.contents-hub-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.contents-hub-stage {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contents-hub-stage .contents-hub-grid {
	width: 100%;
}

.contents-hub-guide {
	order: -1;
	margin: 0;
	text-align: center;
}

.contents-hub-guide img {
	display: block;
	width: 160px;
	height: auto;
	margin: 0 auto;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.contents-hub-guide figcaption {
	margin: 3px 0 0;
	color: #587069;
	font-size: 10px;
	letter-spacing: 0.08em;
}

.contents-hub-card {
	min-width: 0;
	padding: 5px;
	background: #f4f4ee;
	border-top: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	border-right: 2px solid #41665f;
	border-bottom: 2px solid #41665f;
	box-shadow: 1px 1px 0 #163f3d, 3px 3px 0 rgba(22, 63, 61, 0.14);
}

.contents-hub-card h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 11px;
	color: #ffffff;
	font-family: "DotGothic16", "BIZ UDPGothic", sans-serif;
	font-size: 1rem;
	letter-spacing: 0.06em;
	background: linear-gradient(90deg, #174a49 0%, #317062 55%, #b6cf75 100%);
}

.contents-hub-card h3 img {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.contents-hub-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contents-hub-card li + li {
	border-top: 1px dotted #a4b3a8;
}

.contents-hub-card a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	min-height: 42px;
	padding: 8px 12px;
	color: #153f3c;
	font-size: 0.88rem;
	text-decoration: none;
}

.contents-hub-card a:hover {
	color: #ffffff;
	background: #147f73;
}

.contents-hub-card a:focus-visible {
	outline: 3px solid #b6cf75;
	outline-offset: -3px;
}

@media screen and (max-width: 700px) {
	.contents-hub {
		width: calc(100% - 24px);
		margin-block: 26px;
	}

	.contents-hub-grid {
		grid-template-columns: 1fr;
		gap: 13px;
	}

	.contents-hub-guide img {
		width: 130px;
	}
}


/* ==========================================================
   バナーリンク
========================================================== */

/* ==========================================================
   BANNER LINK SECTION
   素材サイト・サーチ・同盟など
========================================================== */

.banner-link-section {
	margin: 22px 0 0;
}


/* ----------------------------------------------------------
   見出し
---------------------------------------------------------- */

.banner-link-heading {
	display: flex;
	align-items: center;
	gap: 6px;

	min-height: 34px;
	padding: 5px 9px;

	color: #ffffff;

	font-family:
		"BIZ UDPGothic",
		"Yu Gothic UI",
		"Meiryo",
		sans-serif;

	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;

	background:
		linear-gradient(
			90deg,
			#17605d 0%,
			#397b70 55%,
			#a8c56f 100%
		);

	border-right: 2px solid #4c7269;
	border-bottom: 2px solid #4c7269;
}


/* 左の白い四角 */

.banner-link-heading__mark {
	display: block;
	flex-shrink: 0;

	width: 9px;
	height: 9px;

	background: #ffffff;

	border-top: 1px solid #dce9e1;
	border-left: 1px solid #dce9e1;
	border-right: 1px solid #76968b;
	border-bottom: 1px solid #76968b;
}


/* 見出し文字 */

.banner-link-heading__text {
	line-height: 1.3;
}


/* ==========================================================
   BANNER GRID
========================================================== */

.alliance-banner-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;

	gap: 4px !important;

	margin: 10px 0 24px !important;
	padding: 8px 0 !important;
}


/* ----------------------------------------------------------
   WordPress側のfigureを解除
---------------------------------------------------------- */

.alliance-banner-grid > figure,
.alliance-banner-grid .wp-block-image {
	flex: 0 0 auto !important;

	width: auto !important;
	margin: 0 !important;
}


/* ----------------------------------------------------------
   リンク
---------------------------------------------------------- */

.alliance-banner-grid a {
	display: block;

	width: fit-content;

	line-height: 0;
}


/* ----------------------------------------------------------
   バナー
---------------------------------------------------------- */

.alliance-banner-grid img {
	display: block;

	width: auto !important;
	height: auto !important;
	max-width: none !important;

	margin: 0 !important;
}


/* ----------------------------------------------------------
   hover
---------------------------------------------------------- */

.alliance-banner-grid a:hover img {
	transform: translate(-1px, -1px);

	filter: brightness(1.06);

	box-shadow:
		2px 2px 0 rgba(32, 63, 60, 0.22);
}


.alliance-banner-grid a:active img {
	transform: translate(1px, 1px);

	box-shadow: none;
}


/* ==========================================================
   MOBILE
========================================================== */

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

	.banner-link-heading {
		min-height: 32px;

		padding: 5px 7px;

		font-size: 11px;
	}

	.alliance-banner-grid {
		gap: 3px !important;
	}

}