/*
Theme Name: MyTheme
Theme URI: https://example.com/
Author: Nenem HITONEMURI
Author URI: https://example.com/
Description: 自作WordPressテーマ
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mytheme
*/

@charset "utf-8";

*,*::before,*::after { box-sizing: inherit;}
html { margin: 0; padding: 0; box-sizing: border-box;}
details * { box-sizing: border-box;}
h1,h2,h3,h4,h5,img,p,ul,ol,li,dl,dt,dd { margin: 0; padding: 0;}
img { border: none; max-width: 100%;}

/* -------------------- */
/* カスタム用色変更欄 */
/* -------------------- */
:root{
	--background-color: #fefefe; /* 全体背景色 */
	--background-gray: #ebebeb; /* 白背景より少し濃い灰色、ボタンなどに */
	--mozi-color: #637071; /* メイン文字色 */
	--usu-mozi-color: #979797; /* ↑よりちょっと薄い文字色など */
	--siro-mozi-color: #fefefe; /* 濃い背景に乗せる白文字 */
	--link-iro: #358f96; /* リンク、カテゴリの色など */
	--link-hover-iro: #979797; /* リンクにマウス乗せたときの色と強調のマーカー色 */
	--blue: #358f96; /* 基本の青 */
	--darkblue: #45737f; /* 濃い青 */
	--lightblue: #e3ecec; /* 薄い水色 */
	--lightblue-2: #b9d1d1; /* lightblue内の青 */
	--content-color: #fafafa; /* 薄い水色の中のcontentの色 */
	--iconfont: "Material Icons Round"; /* アイコンフォントの名前 */
}

/********* フォント読み込み ***********************************************/
@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('fonts/MPLUSRounded1c-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('fonts/MPLUSRounded1c-Bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'ZenKakuGothic';
    src: url('fonts/ZenKakuGothicAntique-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'ZenKakuGothic';
    src: url('fonts/ZenKakuGothicAntique-Bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Josefin Sans';
    src: url('fonts/JosefinSans-Bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

/* 日付表示の調整 */
@font-face {
  font-family: "AdjustedNumbers";
  src: url(https://fonts.gstatic.com/s/notosansjp/v53/-F62fjtqLzI2JPCgQBnw7HFYwQgP-FVthw.woff2) format('woff2');
  size-adjust: 125%; /* 数字を1.75倍に拡大 */
  font-weight: 400;
  unicode-range: U+0030-0039; /* 数字 (0-9) のUnicode範囲 */
}

/********* 全体共通装飾 ***********************************************/
body {
	font-size: 15px;
	line-height: 1.6rem;
	font-family: "YakuHanRP","M PLUS Rounded 1c","メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--background-color);
	color: var(--mozi-color);
	overflow-wrap: break-word;
}

h1,h2,h3,h4,h5 {
	margin: 30px 0 10px;
	font-family: 'Josefin Sans', "ZenKakuGothic";
}

h1 {font-size: 180%;}
h2 {font-size: 160%;}
h3 {font-size: 140%;}
h4 {font-size: 130%;}
h5 {font-size: 120%;}
h6 {font-size: 100%;}

/* リンクの装飾 */
a {
	color: var(--link-iro);
	-webkit-transition: 0.24s ease-out;
    transition: 0.24s ease-out;
}
a:hover {
	color: var(--link-hover-iro);
	-webkit-transition: 0.24s ease-out;
    transition: 0.24s ease-out;
}

/* 自サイト外のリンクにexternal-linkアイコンを付与する */
a[href^="http"]:not([href*="out-at-sea.jp"])::after {
	font-family: "tabler-icons";
	content: '\ea99';
}

/********* ヘッダー・メイン・フッター ***********************************************/
/* ヘッダー */
header {
	padding: 3rem 0;
}

header .header {
	max-width: 80%;
	margin: 0 auto;
}

/* ヘッダーのサイトロゴ */
header .site-logo svg {
	max-width: 300px;
}

header .site-logo svg path {
	fill: var(--mozi-color);
}

/* ハンバーガーメニュー */
#menu-switch {
	display: none;
	position: absolute;
	right: 1em;
	top: 1em;
	padding: 26px 11px;
	z-index: 9999;
	cursor: pointer;
	user-select: none;
}

#menu-switch span {
	height: 3px;
	width: 30px;
	border-radius: 2px;
	background: #909c9d;
	position: relative;
	display: block;
	transition: all .2s ease-in-out;
}

#menu-switch span:before {
	top: -10px;
	visibility: visible;
}

#menu-switch span:after {
	top: 10px;
}

#menu-switch span:before, #menu-switch span:after {
	height: 3px;
	width: 30px;
	border-radius: 2px;
	background: #909c9d;
	position: absolute;
	content: "";
	transition: all .2s ease-in-out;
}

#menu-switch span:before {
	top: -10px;
	visibility: visible;
}

#menu-switch span:after {
	top: 10px;
}

#menu-switch span:before, #menu-switch span:after {
	height: 3px;
	width: 30px;
	border-radius: 2px;
	background: #909c9d;
	position: absolute;
	content: "";
	transition: all .2s ease-in-out;
}

#menu-switch.active span {
	background: transparent;
}

#menu-switch.active span:before {
	background: #fff;
	transform: rotate(45deg) translate(7px, 7px);
}

#menu-switch.active span:after {
	background: #fff;
	transform: rotate(-45deg) translate(7px, -7px);
}

#menu-background {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--blue);
    transition: 0.3s ease;
    z-index: 900;
    pointer-events: none;
}

#menu-background.active {
	opacity: 1.0;
}

/* メニューバー */
.menu-menu-container a {
	text-decoration: none;
}

/* PC表示(inactive) */
header .menu-menu-container ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-bottom: 30px;
	margin: 0 auto;
	margin: 2rem 0;
	font-size: 1rem;

}

header .menu-menu-container ul li:not(:first-child){
	margin-left: 20px;
}

header .menu-menu-container ul li::before{
	font-family: "tabler-icons";
	content: '\f014';
	margin-right: 3px;
	color: var(--link-iro);
}

header .menu-menu-container ul li a {
	font-weight: 500;
}

header .menu-menu-container ul li a:hover {
	text-decoration: underline;
}

/* スマホ表示(active) */
header .menu-menu-container.active ul {
	display: block;
	padding-right: 1.5rem;
}

header .menu-menu-container.active ul li {
	font-size: 1.2rem;
	margin-bottom: 10px;
}

header .menu-menu-container.active{
	right: 0;
	display: block;
	position: absolute;
	z-index: 990;
}

header .menu-menu-container.active li a,
header .menu-menu-container.active ul li::before {
	color: #fff !important;
}

/* ページの上に戻るボタン */
#page-top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	background: #b6b6b6;
	opacity: 0.8;
	border-radius: 50%;
	z-index: 9999;
}

#page-top a .hook {
	content: '';
	background-image: url('images/hook.svg');
	width: 25px;
	height: 30px;
	height: 39px;
	background-repeat: no-repeat;
	text-decoration: none;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

#page-top:hover {
	background: #949494;
	-webkit-transition: .2s;
    transition: .2s;
}

/* containerの上下の波装飾 */
/* containerの上 */
#wave-blue {
	position: relative;
	width: 100%;
	height: 17px;
	margin: 0 auto;
	background: url("images/wave-blue.svg");
	background-repeat: repeat-x;
}

#wave-blue:before{
	position: absolute;
	right: 25px;
	top: -30px;
	content:'';
	width: 50px;
	height: 50px;
	background-image: url("images/ship.svg");
}

/* footerの上 */
#wave-darkblue {
	position: absolute;   /* footerに対して絶対配置 */
	top: -16px;            /* footerの上端にくっつける */
	left: 0;
	width: 100%;
	height: 17px;
	background: url("images/wave-darkblue.svg") repeat-x;
	z-index: 1;           /* footerより上に表示したい場合は調整 */
}

/* パンくずリスト */
#breadcrumb {
	font-size: 0.8rem;
	min-width: 100%;
}

#breadcrumb ul {
	margin: 0;
	display: flex;
	list-style: none;
	min-width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
}

#breadcrumb ul li:not(:last-of-type)::after {
  content: "›";
  margin: 0.3em;
  color: #777;
}

#breadcrumb ul li:first-child{
	margin-left: 0;
}

/* メイン */
main {
	background-color: var(--lightblue);
	margin: 0;
}

/* container */
#container {
	max-width: 800px;
	margin: 0 auto;
	padding: 3rem 2rem 10rem 2rem;
}

#container h1 {
	text-align: center;
}

/* content */
.content { /* 背景が白 */
	padding: 2rem 2rem 4rem 2rem;
	margin: 2rem 0;
	background-color: var(--content-color);
	border-radius: 8px;
}

.content-transparent { /* 背景が透明(青貫通) */
	padding: 2rem 0;
	/* margin: 0 2rem 2rem 2rem; */
	margin-bottom: 2rem;
	background-color: transparent;
	border-radius: 8px;
}

#container .content h1 {
	text-align: left;
}

#container .content-transparent h1 {
	text-align: left;
}

.content .sub-content { /* 小見出しを見やすくする */
	margin-left: 10px;
}

.content .sub-content p { /* 小見出しを見やすくする */
	margin-left: 10px;
}

/* 再帰的に取得した階層表示時のスタイル */
ul.level-1 {
	list-style: none;
}

ul.level-2 {
	list-style: none;
	margin-left: 10px;
}

ul.level-3 {
	list-style: none;
	margin-left: 10px;
}

/* footer */
footer {
    background-color: var(--darkblue);
    color: var(--siro-mozi-color);
    padding: 4rem 2rem 1rem 2rem;
    position: relative; /* waveを適用するため */
}

/* フッターのサイトロゴ */
footer .site-logo svg {
	max-width: 150px;
}

footer .site-logo svg path {
	fill: var(--siro-mozi-color);
}

/* フッターのサイトマップ */
nav.footer-nav {
	max-width: 80%;
	margin: 0 auto;
}

nav.footer-nav .menu-menu-container ul {
	list-style: none;
}

nav.footer-nav .menu-menu-container ul li a {
	display: inline-block;
	border-bottom: 1px dotted;
	width: 200px;
	padding: 0.1rem 0;
}

nav.footer-nav .menu-menu-container ul li::before{
	font-family: "tabler-icons";
	content: '\f014';
	margin-right: 5px;
}

footer a {
	color: var(--siro-mozi-color);
	text-decoration: none;
}

footer a:hover{
	color: var(--siro-mozi-color);
}

footer p.credit {
	text-align: center;
	margin: 2rem 0;
	font-size: 0.9rem;
}

footer ul.icon-list {
	margin: 1rem;
	display: flex;
	gap: 1rem;
	list-style: none;
}

footer ul.icon-list svg {
	width: 1.3rem;
	height: 1.3rem;
}

footer ul.icon-list a {
	background: transparent;
	color: var(--siro-mozi-color);
	border-radius: 100px;
	padding: .5rem 0;
}
footer ul.icon-list a:hover {
	background: transparent;
}

/* dl, dd, dt */
dl {
	margin: 20px 10px;
}

dd {
    margin: 0 0 10px 7em;
    /* padding-left: 1em; */
}

dt {
    float: left;
    text-align: center;
    min-width: 5em;
    padding: 1px 9px;
    border-radius: 20px;
    height: auto;
    background: var(--lightblue);
}


/********* トップページ関連 ***********************************************/
/* 見出しのスタイル */
main .sec-h1-box {
	display: flex;
	align-items: flex-end;
}

main .sec-h1-box p {
	margin-left: 1.0vw;
	line-height: 300%;
	color: var(--usu-mozi-color);
}

main .sec-h1-box p::before {
	content: '/';
	margin-right: 4px;
}

/* informationなど、固定ページへのリンク */
main a.link-to-page {
	background: var(--usu-mozi-color);
	color: var(--siro-mozi-color);
	border-radius: 15px;
	padding: 1.5rem;
	display: block;
	align-items: center;
	text-decoration: none;
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
}

main a.link-to-page h1 {
	margin: 0;
	font-family: "M PLUS Rounded 1c";
	text-align: center !important;
}

main a.link-to-page:hover {
	background: var(--link-iro);
	color: var(--siro-mozi-color);
}

main .link-to-page p {
	margin-left: 20px;
}

/* 作品、新着イラストに共通のSwiperのスタイル */
.commonSwiper img {
	border-radius: 15px 15px 0px 0px;
}

/* Swiperの設定 */
.commonSwiper {
	overflow: visible !important;
	position: relative;
	max-width: 650px;
	width: 100%;
	background-color: var(--content-color);
	border-radius: 15px;
}

.commonSwiper .swiper-slide {
	width: 100%;
	height: 400px; /* 高さを固定 */
	max-width: 650px;
	border-radius: 15px 15px 0px 0px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.storiesSwiper .swiper-slide {
	height: 325px; /* 作品バナーの高さは325pxで固定 */
}

.commonSwiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* トリミングしてスライドを埋める */
	border-radius: 15px 15px 0 0;
	display: block;
}

.commonSwiper .swiper-slide p.post-date {
	font-family: "AdjustedNumbers","M PLUS Rounded 1c","メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	font-size: 0.9rem;
	position: absolute;
	bottom: 0;
	right: 0;
	/* margin: 0; */
	padding: 0.3rem 0.5rem;
	/* mix-blend-mode: difference; */
	/* backdrop-filter: blur(3px); */
}

.commonSwiper .swiper-navigation {
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--content-color);
	border-radius: 15px;
}

.commonSwiper .pagination {
	width: 20% !important;
	height: 20px;
	position: relative;
}

.commonSwiper .arrow {
	width: 100px;
	height: 20px;
	position: relative;
}

.commonSwiper .pagination .swiper-pagination {
	margin-left: 10px !important;
	text-align: left;
	position: absolute;
	top: 3px;
	bottom: 0;
	width: 200px;
}

.commonSwiper .swiper-pagination .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
}

.commonSwiper .swiper-pagination .swiper-pagination-bullet-active {
	background-color: var(--mozi-color);
	width: 15px;
	height: 15px;
}

.commonSwiper .swiper-button-prev::after {
	color: var(--mozi-color);
	font-size: 20px;
	height: 20px;
	font-weight: 900;
}

.commonSwiper .swiper-button-next::after {
	color: var(--mozi-color);
	font-size: 20px;
	height: 20px;
	font-weight: 900;
}

/* 複数投稿時の装飾 */
.matome {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgb(119 119 119 / 70%);
    font-size: 0.9em;
    padding: 3px 6px;
    border-radius: 3px;
    color: #fff;
}

/* 新着漫画・新着小説・新刊情報をまとめる部分 */
.latest-items {
	background: var(--content-color);
	-webkit-transition: 0.24s ease-out;
	transition: 0.24s ease-out;
	max-width: 650px;
	margin: 0 auto;
	padding: 1.5rem;
	border-radius: 15px;
	position: relative;
}

.latest-items p.comic-post-date,
.latest-items p.novel-post-date,
.latest-items p.news-date {
	font-size: 0.8rem;
	margin-left: 10px;
}

.latest-items a {
	display: flex;
	align-items: center;
	text-decoration: none;
	padding: 10px;
	color: var(--mozi-color);
	border-radius: 15px;
}

.latest-items a:hover {
	background: var(--lightblue);
	color: var(--link-iro);
}

.latest-items div:last-child {
	margin-top: 20px;
}

/* 新着漫画 */
.latest-items .latest-comic-nakami a:hover {
	background: var(--lightblue);
	color: var(--link-iro);
}

.latest-items .latest-comic-nakami .comic-thumbnail {
	width: 130px;
	border: 1px solid;
	border-radius: 15px;
	margin-right: 16px;
	display: block;
	overflow: hidden;
	position: relative;
}

.latest-items .latest-comic-nakami .comic-thumbnail img {
	width: 100%;
    display: block;
	-webkit-transition: 0.24s ease-out;
	transition: 0.24s ease-out;
}

.latest-items .latest-comic-nakami .comic-thumbnail img.blur {
	display: block;
	filter: blur(12px);
	transform: scale(1.05);   /* ぼかしによる端の欠け防止 */
}

.latest-items .latest-comic-nakami .comic-thumbnail.blur::before {
    font-family: "tabler-icons";
    content: '\eae2';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: var(--mozi-color);
    pointer-events: none;
	z-index: 2;
	opacity: 1.0;
	-webkit-transition: 0.24s ease-out;
	transition: 0.24s ease-out;
}

.latest-items .latest-comic-nakami a:hover .comic-thumbnail img.blur {
	filter: blur(0px);
}

.latest-items .latest-comic-nakami a:hover .comic-thumbnail.blur::before {
	opacity: 0;
}

.latest-items p.comic-title,
.latest-items p.novel-title,
.latest-items p.news-title {
	margin-right: 10px;
	font-weight: 500;
	font-size: 1rem;
	text-decoration: underline;
	font-family: 'ZenKakuGothic'
}

.latest-items p.novel-category:before {
	font-family: "tabler-icons";
	content: '\eea8';
	margin-right: 3px;
}

/* 新刊 */
.latest-items img.goods-img {
	height: 200px;
	border: 1px solid var(--usu-mozi-color);
	border-radius: 15px;
}

.latest-items a.goods-link {
	display: inline-block;
	position: relative;
	max-width: 200px;
}

.latest-items a.goods-link p {
	display: none;
}

/* てがろぐの最新投稿エリア */
#content-memo a.tegalog-link {
	text-decoration: none;
	color: var(--mozi-color);
	display: inline-block;
}

.tegalog a {
	position: relative;
	border-radius: 0;
	padding: 15px;
}

.tegalog a:last-child {
	border-top: 1px solid var(--usu-mozi-color);
}

.tegalog p {
	text-align: right;
	margin-top: 10px;
}

.tegalog p:before {
	font-family: "tabler-icons";
	content: '\f318';
	margin-right: 5px;
}

.tegalog .tegalog-contents {
	width: 93%;
}

.tegalog .tegalog-contents:before {
	position: absolute;
	right: 0;
	top: 40%;
	font-family: "tabler-icons";
	content: '\ea61';
	font-size: 1.4rem;	
}

.latest-items .tegalog {
	margin-top: 0px!important;
}

/* 更新情報 */
.latest-items p.news-category:before {
	font-family: "tabler-icons";
	content: '\eea8';
	margin-right: 3px;
}

.latest-items a.rss {
	position: absolute;
	font-size: 25px;
	right: 5px;
	top: 5px;
	background: var(--lightblue);
}

/********* ギャラリーページ関連 ***********************************************/
/* popup */
/* モーダルのスタイル */
#modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0 0 0 / 70%); /* 背景色 */
    opacity: 0; /* 初期状態では透明 */
    visibility: hidden; /* 初期状態では不可視 */
    transition: opacity 0.5s, visibility 0.5s; /* アニメーション効果 */
}
#modal .modal-wrapper {
    position: relative;
    display: inline-block;
}

/* モーダルの画像スタイル */
#modal .modal-wrapper .modal-content {
    display: block;
    max-width: 80vw;
    max-height: 90vh;
}

/* モーダルの閉じるボタン */
#close {
    position: absolute;
    top: 5px;
    right: -35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* 画像遷移矢印 */
button#prevBtn {
	position: absolute;
	font-size: 50px;
	color: #fff;
	background: transparent;
	border: 0;
	padding: 0;
	top: 50%;
	left: -60px;
}

button#nextBtn {
	position: absolute;
	font-size: 50px;
	color: #fff;
	background: transparent;
	border: 0;
	padding: 0;
	top: 50%;
	right: -60px;
}

.nav-btn.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.popup-img  {
    /* flex-shrink: 0; */
    /* width: 150px; */
    /* height: 150px; */
    /* padding: 20px; */
    /* border: 1px solid #000; */
    cursor: pointer;
    transition: opacity 0.3s ;
}

.popup-img:hover {
    opacity: 0.7;
}

.popup-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* カテゴリ・タグ一覧 */
/* 初期状態：右に隠す */
#categories-and-tags.slide-panel {
    position: fixed;
    top: 0;
    right: -40%;
    width: 40%;
    height: 100%;
    padding: 1rem;
    background: var(--content-color);
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    overflow-y: auto;
    overflow-x: hidden;
    transition: right 0.3s ease;
    z-index: 999;
}

/* 表示状態 */
#categories-and-tags.slide-panel.active {
    right: 0;
}

/* 虫眼鏡ボタン */
.search-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 24px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
}

/* 半透明オーバーレイ */
.overlay {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
	transition: 0.3s ease;
    z-index: 900;
	pointer-events: none;
}

/* 表示状態 */
.overlay.active {
    opacity: 1.0;
	transition: 0.3s ease;
	pointer-events: auto;
}

/* カテゴリ一覧 */
.categories {
	padding-bottom: 20px;
}

/* 親カテゴリ */
.categories ul.level-1 {
	margin-left: 10px;
}

.categories ul.level-1 li {
	/* font-weight: 600; */
	margin-bottom: 10px;
}

/* 子カテゴリ */
.categories ul.level-2 li {
	margin-bottom: 10px;
}

.categories ul.level-2 li a {
	/* background: blue; */
	font-weight: normal;
	max-width: 110px;
    height: 20px;
    line-height: 20px;
    padding: 0 0.7em;
    border-radius: 10px;
	border:1px solid;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-decoration: none;
    -webkit-transition: .2s;
    transition: .2s;
	font-weight: 600;
}

.categories ul.level-2 li a:before {
	font-family: 'tabler-icons';
	content: '\ea39';
}

/* 孫カテゴリ */
.categories ul.level-3 li {
	display: inline-block;
	margin: 5px 5px 0 0;
}

.categories ul.level-3 li a {
	font-weight: normal;
}

.categories ul.level-3 li a:before {
	content: '';
}

/* タグクラウド */
.tagcloud ul {
	list-style: none;
	margin-left: 20px;
}

.tagcloud ul li {
	display: inline-block;
    margin-left: 5px;
}

.tagcloud ul li a {
	position: relative;
    max-width: 110px;
    height: 20px;
    line-height: 20px;
    padding: 0 0.7em;
    border-radius: 10px;
	border:1px solid;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-decoration: none;
    -webkit-transition: .2s;
    transition: .2s;
}

main .categories-single {
	padding: 2rem 0 3rem 0;
	width: 90%;
	margin: 0 auto;
}

main .categories-single h4 {
	margin: 20px 0 5px 0;
}

main .categories-single p {
	line-height: 2rem;
}

main .categories-single p a {
	padding: 0.1rem 0.5rem;
	text-decoration: none;
	border: 1px solid;
	border-radius: 30px;
	margin-right: 5px;
}

main .categories-single p.post-categories a:before {
	font-family: "tabler-icons";
	content: '\ea39';
	margin-right: 2px;
}

main .categories-single p.post-tags a:before {
	font-family: "tabler-icons";
	content: '\eabc';
	margin-right: 2px;
}

/* masonry関連 */
ul.illust-list {
	list-style: none;
	margin: 0 auto;
	width: 100%;
}

/* grid-sizer は高さなし、幅のみ指定 */
.illust-list li.grid-sizer {
    width: 32%; /* PC用 */
    height: 0;
    margin: 0;
    padding: 0;
}

/* アイテムだけに min-height を適用 */
.illust-list li.illust-item {
    display: block;
    width: 32%;
    /* min-height: 200px; */
    margin-bottom: 10px;
    break-inside: avoid;
}

ul.illust-list li img {
    border-radius: 15px;
	width: 100%;       /* liの幅に合わせる */
    height: auto;      /* 高さは自動で調整 */
    border-radius: 15px;
    display: block;
}

/* もっと表示するボタン */
#load-more {
	display: block;
	width: 300px;
	margin: 30px auto;
	padding: 0.5rem 1rem;
	border-radius: 50px;
	border: 1px solid var(--mozi-color);
	color: var(--mozi-color);
	background: none;
	cursor: pointer;
}

/* フェードイン：初期状態 */
.illust-item.fadein-init {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* フェードイン：表示状態 */
.illust-item.fadein-show {
  opacity: 1;
  transform: translateY(0);
}

/********* 作品紹介ページ関連 ***********************************************/
.stories {
	margin: 0 auto;
	text-align: center;
	max-width: 400px;
}

.stories .stories-nakami a {
	display: block;
	text-decoration: none;
	color: var(--mozi-color);
	padding: 1rem;
	border-radius: 15px;
	margin-bottom: 30px;
}

.stories .stories-nakami a:hover {
	background: var(--lightblue-2);
	color: var(--link-iro);
}

.stories .story-title {
	padding-bottom: 0;
}

.stories .story-title svg{
	max-width: 350px;
}


/********* 作品ページ共通の設定 ***********************************************/
/* 作品専用ヘッダー：情報少なめ */
header.story {
	padding: 2px;
	width: 100%;
	border-bottom: 1px solid var(--usu-mozi-color);
	position: fixed;
	background: #ffffff70;
	backdrop-filter: blur(2px);
	z-index: 999;
}

header.story .header {
	margin: 0 10px;
	max-width: 100%;
}

header.story .site-logo svg {
	max-width: 150px;
	position: absolute;
	top: -10%;
}

header.story nav {
	display: none;
}

/* main部分 */
main .story-logo {
	margin: 50px auto 30px;
	max-width: 90%;
}

main .story-logo svg {
	max-height: 300px;
}

main .story-logo-small {
	max-width: 90%;
	margin: 20px auto 30px;
}

main .story-logo-small svg {
	max-height: 200px;
}

main p.story-summary, p.story-summary2 {
	margin: 40px auto;
	line-height: 1.7rem;
	text-align: center;
}

main.muki .latest-items a, main.aquaverse .latest-items a {
	border: 1px solid;
	background: #ffffff70;
	backdrop-filter: blur(2px);
}

main .all-button a {
	display: block;
	text-align: center;
	width: 300px;
	margin: 30px auto;
	padding: 0.5rem 1rem;
	border-radius: 50px;
	border: 1px solid var(--mozi-color);
	color: var(--mozi-color);
	text-decoration: none;
	background: #ffffff70;
	backdrop-filter: blur(2px);
}

/* ページアニメーション用 */
/* スクロール時表示 fade-in */
.fade-in {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.fade-in.show {
    opacity: 1 !important;
}

/* スクロール時表示 下からふわっと表示 */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-up.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}


/* 無機物少女の展示ページ専用 */
.muki-novels ul {
	margin-left: 20px;
}

main.muki {
	background: transparent;
}

main.muki .latest-items {
	background: transparent;
}

main.muki .latest-comic-nakami {
	margin-top: 15px;
}

main.muki .latest-comic-nakami:first-child {
	margin-top: 0;
}

#bg-muki {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: -99;
}

#bg-muki .blue-circle1 {
	width: 400px;
	height: 400px;
	position: fixed;
	top: 20%;
	left: -150px;
	background: linear-gradient(45deg, #3876d1, #ceffce);
	border-radius: 50%;
	filter: blur(60px);
}

#bg-muki .blue-circle2 {
	width: 200px;
	height: 200px;
	position: fixed;
	top: 70%;
	right: -20px;
	background: linear-gradient(20deg, #3876d1, #ceffce);
	border-radius: 50%;
	filter: blur(40px);
}

main.muki .characters {
	display: flex;
	gap: 16px; /* 任意の余白 */
}

main.muki .characters a {
	position: relative;
	display: inline-block;
	width: 140px;
	height: 140px;
	overflow: hidden; /* 背景がはみ出さないように */
}

/* 背景（通常は非表示・小さく） */
main.muki .characters a::before {
	content: "";
	position: absolute;
	inset: 0; /* top, right, bottom, left: 0 と同義 */
	background-color: transparent;
	transform-origin: center;
	-webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
	z-index: 1;
	border-radius: 50%;
}

/* 画像のスタイル */
main.muki .characters a img {
	width: 140px;
	height: 140px;
	display: block;
	position: relative;
	z-index: 2; /* 背景より前に出す */
	filter: grayscale(100%) brightness(90%);
	-webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out;
}

/* ホバー時：背景が拡大、画像をカラーに */
main.muki .characters a:hover::before {
	transform: scale(1);
	-webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
	background-color: var(--hover-bg, #ff6666)
}

main.muki .characters a:hover img {
	filter: grayscale(0%) brightness(100%);
}

/* フッター */
footer.muki {
	background: transparent;
	position: relative;
}

#footer-muki-ue{
	position: relative;
	width: 100%;
	height: 150px;
	overflow: hidden;
	/* transform: translateY(2px); */
	mix-blend-mode: multiply;
	transform: translate3d(0,0,0);
}

#footer-muki-ue .footer-circle {
	position: absolute;
	top: 50px;
	right: -60%;
	width: 300%;
	height: 500px;
	background: #a4d5d3;
	border-radius: 50%;
	filter: blur(20px);
}

#footer-muki-bg {
	position: absolute;
	/* display: none; */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #77add3, #a4d5d3);
	mix-blend-mode: multiply;
	transform: translate3d(0,0,0);
	z-index: -80;
}

/* jsでクラス付与のタイミングが決まっている要素 */
/* container(本文) */
main.muki #container {
    opacity: 0;
    transition: opacity 1.5s ease;
}
main.muki #container.show {
    opacity: 1 !important;
}

/* ぼかし背景 */
#bg-muki {
	opacity: 0;
	transition: opacity 1s ease;
}
#bg-muki.show {
	opacity: 1 !important;
}

/* 作品のあらすじ */
main.muki p.story-summary {
	opacity: 0;
	transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
main.muki p.story-summary.show {
	opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 水宙の展示ページ専用 */
main.aquaverse {
	background: transparent;
	/* background: linear-gradient(0deg, #9fd3f8, #f3f9fe 30%); */
}

main.aquaverse .latest-items {
	background: transparent;
}

main.aquaverse .latest-comic-nakami {
	margin-top: 15px !important;
}

main.aquaverse .latest-comic-nakami:first-child {
	margin-top: 0;
}

#bg-aquaverse {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 0;
}

/* 点滅アニメーション */
@keyframes blinking {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

/* 左側 */
#bg-aquaverse .stars-1 {
	position: fixed;
	top: 5%;
	width: 50px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

#bg-aquaverse .stars-1 svg {
	width: 100%;
	height: auto;
	display: block;
	margin-top: 20px;
	filter: blur(0.3px);
	animation: blinking 1.8s ease-in-out infinite alternate;
}

#bg-aquaverse .stars-1 svg:nth-child(2) {
	animation-delay: 0.5s;
}

#bg-aquaverse .stars-1 svg:nth-child(4) {
	animation-delay: 1.5s;
}

#bg-aquaverse .stars-1 svg path {
	fill: var(--lightblue);
}

/* 右側 */
#bg-aquaverse .stars-2 {
	position: fixed;
	top: 5%;
	right: 0;
	width: 50px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

#bg-aquaverse .stars-2 svg {
	width: 100%;
	height: auto;
	display: block;
	margin-top: 20px;
	filter: blur(0.3px);
	animation: blinking 1.8s ease-in-out infinite alternate;
}

#bg-aquaverse .stars-2 svg:nth-child(2) {
	animation-delay: 1.5s;
}

#bg-aquaverse .stars-2 svg:nth-child(4) {
	animation-delay: 2.5s;
}

#bg-aquaverse .stars-2 svg path {
	fill: var(--lightblue);
}

/* 水宙概論(バナーなし) */
main.aquaverse ul.about-aquaverse {
	margin-top: 1rem;
	margin-left: 20px;
	/* list-style: none; */
	/* display: flex; */
	/* flex-wrap: wrap; */
	/* gap: 12px; */
}

main.aquaverse ul.about-aquaverse img {
	width: 300px;
	border-radius: 10px;
}

/* 特異点バナー */
main.aquaverse ul.singularity {
	margin-top: 1rem;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

main.aquaverse ul.singularity img {
	width: 300px;
	border-radius: 10px;
}

/* フッター */
footer.aquaverse {
	position: relative;
	background: #627b8e;
	z-index: 2;
}

#footer-aquaverse-ue {
	position: absolute;
	top: 1px;
	left: 0;
	width: 100%;
	overflow: visible;
	transform: translateY(-100%);
}

#footer-aquaverse-ue svg {
  display: block;
}

#footer-aquaverse-ue svg path {
	fill: #627b8e;
}

/* jsでクラス付与のタイミングが決まっている要素 */
/* container(本文) */
main.aquaverse #container {
    opacity: 0;
    transition: opacity 1.5s ease;
}
main.aquaverse #container.show {
    opacity: 1 !important;
}

/* 背景 */
#bg-aquaverse {
	opacity: 0;
	transition: opacity 1s ease;
}
#bg-aquaverse.show {
	opacity: 1 !important;
}

/* 作品のあらすじ */
main.aquaverse p.story-summary {
	opacity: 0;
	transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
main.aquaverse p.story-summary.show {
	opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 特異点ごとのあしらい */
/* キャラクター紹介 */
main.aquaverse .characters .chara {
	display: grid;
	padding: 10px;
	grid-template-columns: 100px;
	grid-template-rows: 20px 30px 50px;
	gap: 0px 10px;
}

main.aquaverse .characters .chara img{
	grid-row: 1 / 4;
	border-radius: 50%;
	border: 1px solid;
}

main.aquaverse .characters p.name {
	font-family: 'Zenkakugothic';
	font-size: 1rem;
	font-weight: 500;
	grid-row: 2 / 3;
}

main.aquaverse .characters p.yomi {
	grid-row: 1 / 2;
	font-size: 0.6rem;
}

main.aquaverse .characters p.sub {
	grid-column: 2 / 4;
}

/* 反逆の詐欺師 */
p.rumor {
	margin: 40px 0;
	font-style: italic;
}

p.rumor.arito{
	font-style: normal;
}

/********* 漫画表示ページ関連 ***********************************************/
/* 漫画専用ヘッダー：情報少なめ */
header.comic {
	display: none;
}

/* ビューワーメッセージ */
#swipe-message {
	position: absolute;
	top: calc(50vh - 43px);
	left: 50%;
	transform: translateX(-50%);
	padding: 20px;
	background: rgba(0,0,0,0.75);
	color: #fff;
	border-radius: 8px;
	font-size: 50px;
	opacity: 1;
	transition: opacity 0.3s ease;
	z-index: 9999;
}

#swipe-message.swipe-fade-out {
	opacity: 0;
}

#swipe-message.swipe-hidden {
	opacity: 0;
}

#swipe-message .pc-view {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#swipe-message .pc-view p {
	font-size: 15px;
	text-align: center;
}

#swipe-message .smartphone-view {
	display: none;
}

main.comic {
	background-color: #333;
	padding-bottom: 2rem;
}

main.comic #container {
	padding: 0;
	max-width: 100%;
}

main.comic .comic-area {
	/* height: 100vh; */
	/* width: calc((100vh - 43px)*1.45); */
	margin: 0 auto;
	padding-top: 5px;
	position: relative;
}

main.comic .comic-area .img-single {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

main.comic .comic-area .img-single img {
    max-width: 70% !important;
    max-height: 100%; /* 高さ制限を追加 */
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
}


main.comic .comic-area .viewerSwiper {
	height: calc(100vh - 43px);
}

main.comic .comic-area .swiper-button-next,
main.comic .comic-area .swiper-button-prev 
{
	display: none;
}

main.comic .comic-area .swiper-pagination-progressbar {
	height: 8px;
	background: var(--background-gray);
	/* position: absolute; */
	position: static;
	/* width: calc((100vh - 43px)*1.45); */
	/* left: 0; */
	/* top: calc(100vh - 43px)!important; */
}

main.comic .comic-area .swiper-pagination-progressbar-fill {
	background-color: var(--usu-mozi-color);
    transform-origin: 100% 50% !important;
}

main.comic .comic-area .swiper-page-number {
	color: var(--siro-mozi-color);
	transform: translateY(8px);
}

main.comic h1.comic-title {
	width: fit-content;
	display: block;
	color: var(--siro-mozi-color);
}

main.comic .categories-single {
	color: var(--siro-mozi-color);
}

main.comic .categories-single p a {
	color: var(--siro-mozi-color);
}

main.comic .categories-single p.post-categories a:before {
	font-family: "tabler-icons";
	content: '\ea39';
	margin-right: 2px;
}

main.comic .categories-single p.post-tags a:before {
	font-family: "tabler-icons";
	content: '\eabc';
	margin-right: 2px;
}

/* 漫画のページネーション */
nav.comic-pagination {
	max-width: 800px;
	margin: 0 auto;
}

nav.comic-pagination ul.pagination-links {
	list-style: none;
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
}

nav.comic-pagination ul.pagination-links li {
	width: 40%;
	padding: 10px;
	border-radius: 30px;
	display: inline-block;
}

nav.comic-pagination ul.pagination-links li.parent-page {
	text-align: center;
	width: 20%;
}

nav.comic-pagination ul.pagination-links li.next-page {
	text-align: right;
}

nav.comic-pagination ul.pagination-links li a {
	display: block;
	padding: 12px 20px;
	border-radius: 2px;
	border: 1px solid var(--siro-mozi-color);
	text-decoration: none;
	color: var(--siro-mozi-color);
}

nav.comic-pagination ul.pagination-links li.empty a {
	background: none;
	border: 1px solid var(--background-gray);
	text-decoration: none;
	color: var(--usu-mozi-color);
}

nav.comic-pagination .comic-page-list {
	list-style: none;
	line-height: 1.7rem;
	display: block;
	margin: 0 auto;
	max-width: 90%;
}

nav.comic-pagination .comic-page-list li.current a {
	font-weight: bold;
	text-decoration: none;
	color: var(--mozi-color);
}

nav.comic-pagination .comic-page-list li.current:before {
	font-family: "tabler-icons";
	content: '\f6cc';
}

/********* 小説ページ関連 ***********************************************/
/* 小説シリーズごとのページ */
.content .novel-tree {
	margin-left: 20px;
	line-height: 1.8rem;
	list-style: none;
}

/* 小説専用ヘッダー：情報少なめ */
header.novel {
	padding: 10px 20px;
	border-bottom: 1px solid var(--usu-mozi-color);
	position: relative;
}

header.novel a {
	display:none;
}

header.novel nav {
	display: none;
}

header.novel h1.novel-title {
	margin: 0;
	text-align: center;
	font-size: 1.35rem;
}

main.novel-grandchild {
	background: var(--background-color);
	padding-bottom: 60px;
}

/* 小説本文部分 */
#novel-main {
    position: relative;
    font-size: 0.9rem;
    line-height: 2.2;
    width: 95%;
    display: block;
    margin: 0 auto;
	overflow: hidden;
}

#novel-main p {
	padding: 0 10px;
	overflow-wrap: break-word;
	display: block;
	word-wrap: break-word;
	line-break: strict;
	text-align: justify;
}

/* 縦書き */
#novel-main.tate {
    overflow-y: hidden;
    overflow-x: scroll;
    height: 550px;
}

#novel-main.tate p {
    -ms-writing-mode: tb-rl;
    padding: 10px 0;
    writing-mode: vertical-rl;
    line-height: 1.7em;
    /* text-orientation: upright; */
}

/* 横書き */
#novel-main.yoko {
    overflow-y: hidden;
    overflow-x: hidden;
    max-width: 700px;
}

#novel-main.yoko p {
    line-height: 1.9em;
}

/* 明朝体表示 */
#novel-main.mincho {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/* ゴシック体表示 */
#novel-main.gothic {
    font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 表示切り替えボタン */
#switch {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	background: #fff;
	display: block;
	height: 30px;
	width: 30px;
	box-sizing: border-box;
	text-align: center;
	font-weight: 600;
	padding: 0;
	border-radius: 6px;
	border: 1px solid #aaa;
	line-height: 28px;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-transition: .2s;
	transition: .2s;
}

#switch_active {
	position: absolute;
	z-index: 900;
/* 	color: transparent!important; */
	top: 20px;
	right: 4%;
	background: #fff;
	display: block;
	height: 130px;
	width: 200px;
	box-sizing: border-box;
	text-align: center;
	font-weight: 600;
	padding: 0;
	border-radius: 6px;
	border: 1px solid #aaa;
	line-height: 28px;
	letter-spacing: normal;
}


/* 縦横表示切り替えボタン */
#switch_active ul {
	border: 1px solid #ccc;
	color: #333;
	width: fit-content;
	font-weight: 300;
	margin: 10px auto;
	/* display: none; */
	display: flex;
	justify-content: center;
	cursor: pointer;
}

#switch_active ul li{
	font-size: 0.9rem;
	list-style: none;
	display: inline-block;
	padding: 0 5px;
	cursor: pointer;
	text-align: center;
    -webkit-transition: .2s;
    transition: .2s;
}

#switch_active .switch_tateyoko li.current{
	background: #616972;
	color: #fff;
	cursor: default;
	
}

#switch_active .switch_font li.current{
	background: #616972;
	color: #fff;
	cursor: default;
}

#bg_switch {
	width: 0px;
	height: 0px;
}

#bg_switch.active {
	position: fixed;
	z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    background: #333;
	opacity: 0.6;
    /*丸のスタート位置と形状*/
	transform: scale(50);/*scaleをはじめは0に*/
	right:-50px;
    top:-50px;
    transition: all;/*0.6秒かけてアニメーション*/
}

/* 小説のページネーション */
nav.novel-pagination {
	max-width: 800px;
	margin: 0 auto;
}

nav.novel-pagination ul.pagination-links {
	list-style: none;
	display: flex;
	justify-content: space-between;
	margin: 20px 0;
}

nav.novel-pagination ul.pagination-links li {
	width: 40%;
	padding: 10px;
	border-radius: 30px;
	display: inline-block;
}

nav.novel-pagination ul.pagination-links li.parent-page {
	text-align: center;
	width: 20%;
}

nav.novel-pagination ul.pagination-links li.next-page {
	text-align: right;
}

nav.novel-pagination ul.pagination-links li a {
	display: block;
	padding: 12px 20px;
	border-radius: 2px;
	background: var(--background-gray);
	text-decoration: none;
}

nav.novel-pagination ul.pagination-links li.empty a {
	background: none;
	border: 1px solid var(--background-gray);
	text-decoration: none;
	color: var(--usu-mozi-color);
}

nav.novel-pagination .novel-page-list {
	list-style: none;
	line-height: 1.7rem;
	display: block;
	margin: 0 auto;
	max-width: 90%;
}

nav.novel-pagination .novel-page-list li.current a {
	font-weight: bold;
	text-decoration: none;
	color: var(--mozi-color);
}

nav.novel-pagination .novel-page-list li.current:before {
	font-family: "tabler-icons";
	content: '\f6cc';
}

/********* 通販ページ関連 ***********************************************/
main.shop .content .sub-content {
	padding-bottom: 50px;
}

main.shop .content .sub-content img {
    max-width: 280px !important;
    min-width: 130px !important;
	border: 1px solid;
	-webkit-transition: .2s;
    transition: .2s;
}

main.shop .content img:hover {
    opacity: .7;
    -webkit-transition: .2s;
    transition: .2s;
}

/* 本の情報 */
main.shop .content dl {
	margin: 20px 10px;
}

main.shop .content dd {
    margin: 0 0 10px 7em;
    /* padding-left: 1em; */
}

main.shop .content dt {
    float: left;
    text-align: center;
    min-width: 5em;
    padding: 1px 9px;
    border-radius: 20px;
    height: auto;
    background: var(--lightblue);
}

/********* informationページ関連 ***********************************************/
ul.permission, ul.ban {
	margin: 10px;
	list-style: none;
	position: relative;
}

ul.permission {
	background: #eaf9f2;
	border: 2px solid #bbe0d0;
	padding: 2rem 1rem 2rem 2rem;
	border-radius: 10px;
}

ul.ban {
	background: #faeeee;
	border: 2px solid #eaacac;
	padding: 2rem 1rem 2rem 2rem;
	border-radius: 10px;
}

ul.permission li::before {
	content: "\ea5e";
	font-family: 'tabler-icons';
	position: absolute;
	color: #37b97e;
	left: 10px;
}

ul.ban li::before {
	content: "\ea2e";
	font-family: 'tabler-icons';
	position: absolute;
	color: #d74a4a;
	left: 10px;
}

ul.icon-list {
	margin: 1rem;
	display: flex;
	gap: 1rem;
	list-style: none;
}

ul.icon-list svg {
	width: 1.8rem;
	height: 1.8rem;
}

ul.icon-list a {
	background: var(--blue);
	color: var(--siro-mozi-color);
	border-radius: 100px;
	padding: .8rem;
	align-items: center;
	display: flex;
	line-height: 0;
}
ul.icon-list a:hover {
	background: var(--lightblue-2);
}

ul.icon-list a:after {
	content: ''!important;
}

/********* パスワード保護投稿 ***********************************************/
#password-wrap {
	padding: 2rem;
}

#password-wrap h1.password-title {
	font-size: 3rem;
}

#password-wrap p.password-hint {
	text-align: center;
	margin: 0 auto;
	margin-top: 20px;
	width: fit-content;
	padding: 1rem;
	border: 1px solid var(--lightblue-2);
	border-radius: 15px;
	background: #ffffff70;
}

#password-wrap i.hint {
	text-align: center;
	display: block;
	margin: 0 auto;
	font-size: 2rem;
	color: var(--lightblue-2);
}

#password-wrap form {
	margin-top: 30px;
	text-align: center;
}

/********* 404エラー ***********************************************/
#container .page-error {
	text-align: center;
}

#container .page-error p {
	margin: 10px 0;
}

#container .page-error p i {
	font-size: 30px;
}