@charset "utf-8";
html {
	font-size: 18px;
	@media screen and (max-width:1024px) { 
		font-size: 0.8rem;
	}
}
body {
	display: block;
	margin: 0.5rem;
	background-color: var(--root-bg);
	text-align:center;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	color: var(--main-color);
	line-height:2.0em;
	@media screen and (max-width:1024px) { 
		line-height:1.6em;
	}
}
img {
	max-width: 100%;
}
input, textarea{
	font-size: 1.25rem;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
input[type=checkbox] {
    width: 2.0rem;
    height: 2.0rem;
    vertical-align: middle;
}
select {
	padding: 0.75em;
    border-radius: 0.5em;
	font-size: 1.0em;
}
.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.radio-group label {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid var(--main-color);
	border-radius: 5px;
	cursor: pointer;
	transition: 0.2s;
}
.radio-group input[type="radio"] {
	display: none;
}
.radio-group input[type="radio"]:checked + label {
	background-color: var(--highlight-bg);
	border-color: var(--highlight-border);
	color: var(--highlight-color);
	font-weight: bold;
}
#background{
    background-image: var(--bgurl);
    filter: blur(3px);
    position: fixed;
    width: calc(100% - 1.0rem);
    height: calc(100% - 1.0rem);
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
	@media screen and (max-width:1024px) { 
		background-size: auto 100%;
	}
}
#header{
	width: 100%;
	aspect-ratio: 10 / 3;
}
#header > div, #header-ark > div{
    position: absolute;
    padding-top: 0.25rem;
    padding-left: 0.5rem;	
	background-color: var(--header-bg);
    color: var(--header-color);
    font-weight: bold;
    font-size: 1.5rem;
    -webkit-text-stroke-color: var(--header-stroke);
    -webkit-text-stroke-width: 1.5px;
	@media screen and (max-width:1024px) { 
		padding: 0;
		font-size: 0.80rem;
		-webkit-text-stroke-width: 0.6px;
	}
}
#header > img{
	width: 100%;
	aspect-ratio: 10 / 3;
    object-fit: cover;
	object-position: top left;
}
#header-ark{
	width: 100%;
	aspect-ratio: 5 / 1;
}
#header-ark > img{
	width: 100%;
	aspect-ratio: 5 / 1;
    object-fit: cover;
	object-position: top left;
}
#footer{
	min-height:7.0em;
	padding: 0.6rem;
	margin: 1.0rem 0.25rem 0.25rem 0.25rem;
	background-color: var(--main-bg-section);
	text-align: left;
}

div.footer-site-title{
	border-bottom: 1px solid var(--main-color);
	text-align: center;
}
div.footer-content{
	padding: 0.6rem;
}
div.footer-copyright{
	font-size: 0.8rem;
    text-align: center;
    border-top: 1px dashed var(--main-color);
}
div.footer-topic{
    margin-bottom: 1em;
}
div.footer-topic-title{
    font-weight: bold;
}
div.maincontent{
	display:flex;
	display:-webkit-flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
div.maincontent-margin{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 15%;
	min-width: 275px;
	overflow: hidden; /* はみ出し部分を隠す */
    text-align: center; /* 広告を中央揃え */
	@media screen and (max-width:1024px) { 
		width: 100%;
		min-width: none;
	}
}
div.maincontent-content{
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	width: 70%;
	max-width: calc(100% - 550px);
	@media screen and (max-width:1024px) { 
		width: 100%;
		max-width: none;
	}
}
p, .asP {
	margin: 0;
	margin-bottom: 3.0em;
	&:last-child{
		margin-bottom: 0;
	}
}
table {
	border-collapse: collapse;
    border: 2px var(--main-border-table) solid;
	@media screen and (max-width:1024px) { 
		font-size: 0.8rem;
	}
}
table th, td{
	padding: 0.25em
}
table th{
    border-top: 2px var(--main-border-table) solid;
    border-bottom: 2px var(--main-border-table) solid;
}
table.border{
    border: 2px var(--main-border-table) solid;
}
table.border th{
    border: 2px var(--main-border-table) solid;
}
table.border td{
    border: 2px var(--main-border-table) solid;
}
th {
	background-color: var(--highlight-bg);
	color: var(--highlight-color);
}
th.listKansen-header{
	background-color: var(--root-bg);
	color: var(--main-color);
}
td{
	background-color: var(--root-bg);
	color: var(--main-color);
}
table tr:nth-child(odd) td {
    background: var(--main-bg-table-even-row-bg);
    color: var(--main-bg-table-even-row-color);
}
div.news-date{
	text-align:right;
	font-style:italic;
}
summary{
    margin-bottom: 0.5rem;
    padding: 0.25rem;
    text-align: center;
	border: 1px solid var(--main-color);
    border-radius: 0.25rem;
    background-color: var(--main-bg-deep);
	color: var(--main-color);
    font-weight: bold;
    text-decoration: underline;
}
details[open] summary.details-overview {
	display: none;
}
summary.details-overview{
	border: none;
    margin-bottom: auto;
    background: none;
    text-align: left;
	color: inherit;
    text-decoration: none;
}

/* 記事内トピック */
div.section{
	padding: 0.6rem;
	margin: 1.0rem 0.25rem 0.25rem 0.25rem;
	background: var(--main-bg-section);
	border-radius: 0.5rem;
	text-align: left;
	border-top: 0.5rem solid var(--main-color);
}
div.section-title{
	margin-bottom: 0.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 2.0rem;
    font-weight: bold;
	line-height: 2.5rem;
	text-align: center;
}
div.topic-box {
	margin-top: 0.5em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding-left: 0.5em;
	font-size: 1.0em;
	color: var(--main-color);
	text-align: left;
	line-height: 2.5rem;
}
div.topic-box a {
	color: inherit;
    font-style: normal;
    font-weight: bold;
}
div.topic-box a:visited {/*訪問後のリンク*/
	color: inherit;
    font-weight: bold;
}
h1, div.topic-box-title, div.body-title {
	/* コメントアウトしている部分はかつて吹き出しとしていた部分。念のため残す */
	border-radius: 0.5rem;
	/* margin: 0.5rem; */
	margin-top: 3.0rem;	/* モバイルで変更 */
	margin-bottom: 3.0rem;	/* モバイルで変更 */
	/* margin-left: 7.0rem; */	/* モバイルで変更 */
	padding: 0.5rem;
	font-size: 1.5em;
	font-weight: bold;
	text-align: left;
	position: relative;
	background-color: var(--highlight-bg);
	color: var(--highlight-color);
	&:before{
		border-radius: 0.5rem;
		/* content: ''; */
		display: inline-block;
		position: absolute;
		left: -7.0rem;
		top: calc(50% - 3.0rem);
		width: 6.0rem;
		height: 6.0rem;
		background-image: url(../img/NunnThumbnail/icon_0011.webp?date=20241111);
		background-size: contain;
		vertical-align: middle;
	}
	&:after{ /* https://mosya.dev/blog/clippath */
		position: absolute;
		/* content: ''; */
		top: calc(50% - 10px);
		left: -19px;
		background-color: var(--highlight-bg);
		width: 50px;
		height: 50px;
		clip-path: polygon(0 10px, 20px 0, 20px 20px);
	}
	@media screen and (max-width:1024px) { 
		margin-top: 1.5rem;	/* モバイルで変更 */
		margin-bottom: 1.5rem;	/* モバイルで変更 */
		/* margin-left: 4.5rem; */	/* モバイルで変更 */
		&:before{
			left: -4.5rem;
			top: calc(50% - 2.0rem);
			width: 4.0rem;
			height: 4.0rem;
		}
	}
}
div.topic-box-content {
	margin-top: 2em;
    padding: 0.5em;
    border-bottom: 1px dashed var(--main-color);
	&:last-child{
		border-bottom: none;
	}
}
div.topic-box-content-title {
    font-weight: bold;
    text-align: left;
    margin-bottom: 1.0em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;
    color: var(--main-color);
    font-size: 1.5em;
    border-left: 1.0em solid var(--main-color);
    border-bottom: 1px solid var(--main-color);
}
h2, div.body-title-small {
    margin-top: 1.0rem;
    margin-bottom: 1.0rem;
	padding-left: 1.0em;
	padding-right: 1.0em;
    font-weight: bold;
    text-align: left;
    color: var(--highlight-color);
    border-radius: 100vh 100vh 100vh 100vh;
    background: var(--highlight-bg);
	font-size: 1.0em;
}
h3{
	border-left: solid 0.5rem var(--main-color);
    margin: 1.0em 0 1.0em 0em;
    padding: 0 0 0 1.0em;
    background-color: var(--main-bg-deep);
    border-radius: 0.5em;
}
h4{
	margin: 1.0em 0 1.0em 0em;
	padding: 0.5em 0 0.5em 0;
	font-size: 1.0em;
	margin-block-start: 0;
	margin-block-end: 0;
	&::before{
		content: "・";
	}
}
div.ads-box {
	width:100%;
}
/* ボタン */
.btn, button, input[type=button], input[type=submit] {	/* https://web-dev.tech/front-end/css/3d-button/ */
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.25em 1.0em;
	background: var(--highlight-bg);
	color: var(--highlight-color) !important;
	border-radius: 4.0rem;
	border: 1px solid var(--highlight-border);
	cursor: pointer;
	font-weight: bold;
    text-decoration: none;
	font-size: 1.1em;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.btn:hover, button:hover, input[type=button]:hover, input[type=submit]:hover {
	background: var(--root-bg);
	color: var(--main-color) !important;
}
input[type=button]:disabled, input[type=submit]:disabled {
	border: none;
	background-color: var(--inactive-bg);
	color: var(--inactive-color) !important;
}
.btn-simple {
	display: inline-block;
	background: var(--button-simple-bg);
	color: var(--button-simple-color) !important;
	padding: 5px 10px;
	text-decoration: none;
	border-radius: 5px;
	margin: 5px 0;
}
.btn-simple:hover {
	background: var(--button-simple-bg-hover);
}
.colorPalette{
    --colorCode: "0,0,0,0";
    display: inline-block;
    margin: 0.25em;
    padding: 0 0.25em;
    background: rgba(var(--colorCode));
    border-radius: 1em;
    border: 0.2em solid var(--highlight-color);
	text-shadow: 3px 3px 5px black;
}
/* スピナー */
.spinner-container {
	position: relative;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	text-align: center;
    color: var(--highlight-color);
}
.spinner {
    width: 2.0em;
    height: 2.0em;
    border: 5px solid var(--highlight-bg);
    border-top-color: var(--highlight-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}
.spinner-text {
    font-size: 1.5em;
    color: var(--main-color);
    text-shadow: 0.25em 0.25em 1px var(--main-bg-deep);
    font-weight: bold;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* 広告表示 */
.fjm-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	justify-content: center;
	background: var(--highlight-bg);
	color: var(--highlight-color) !important;
	padding: 15px;
	border-radius: 10px;
}
.fjm-container-image img {
    width: 250px; /* 固定幅 */
    object-fit: contain; /* 画像が潰れないように調整 */
	border-radius: 5px;
}
.fjm-container-text {
    text-align: left;
    font-size: 0.8em;
    max-width: 250px; /* 画像と同じ幅で揃える */
}
.fjm-container-title {
    margin-bottom: 5px;
	font-weight: bold;
}
.fjm-container-source,
.fjm-container-caution {
	text-align: right;
}

/* 引用 */
.innyou, .quote {
	padding: 0.5em;
	border-radius: 0.5em;
	background-color: var(--quote-bg);
	color: var(--quote-color);
}
.quote {
	&:before {
		content:">>";
	}
}

/* テキストデコレーション */
.tsukkomi {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--main-accent-color);
}

.accent {
	background: var(--main-accent-bg);
    color: var(--main-accent-color);
    font-weight: bold;
    padding: 0.25rem;
    border-radius: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.red-bold{
    color: var(--main-accent-color);
    font-weight: bold;
}
/* 付箋デザイン */
.sectionCork{
	padding: 0.6rem;
	margin: 1.0rem 0.25rem 0.25rem 0.25rem;
	background-color: var(--fusen-board-bg);
	background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Cdefs%3E%3Cfilter id="feTurbulence" filterUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"%3E%3CfeTurbulence type="turbulence" baseFrequency="0.2" numOctaves="10" seed="3" stitchTiles="noStitch"/%3E%3C/filter%3E%3C/defs%3E%3Crect width="100" height="100" filter="url(%23feTurbulence)" fill="%2358a8b8"/%3E%3C/svg%3E');
	background-size: 100px 100px;
	color: var(--fusen-board-color);
	border: 10px solid var(--main-bg-deep);
	text-align: center;
	font-weight: bold;
}
.fusen {
	vertical-align: top;
	text-align: left;
	margin: 0 0 3.0em 1.0em;
    padding: 2em 2.2em;
    display: inline-block;
    position: relative;
    z-index: 0;
    width: 16em;
    height: 16em;
    color: var(--fusen-color);
	font-weight: normal;
    font-size: 0.8em;
    background-color: var(--fusen-bg0);
	--rotate: 2deg;
	--rotateTape: -2deg;
    -webkit-transform: rotate(var(--rotate));
    -moz-transform: rotate(var(--rotate));
    -o-transform: rotate(var(--rotate));
    -ms-transform: rotate(var(--rotate));
    transform: rotate(var(--rotate));
	box-shadow: 3px 13px 5px 0px var(--fusen-shadow);
	&::before{
		display: block;
		content: "";
		background: var(--fusen-tape-color);
		width: 60%;
		height: 28px;
		box-shadow: 0 1px 1px var(--fusen-shadow);
		border-radius: 6px/18px 0;
		position: absolute;
		top: -13px;
		left: 20%;
		-webkit-transform: rotate(var(--rotateTape));
		-moz-transform: rotate(var(--rotateTape));
		-o-transform: rotate(var(--rotateTape));
		-ms-transform: rotate(var(--rotateTape));
		transform: rotate(var(--rotateTape));
	}
    &::-webkit-scrollbar {
        width: 6px;
    }
    &::-webkit-scrollbar-track {
        background: transparent;
    }
    &::-webkit-scrollbar-thumb {
        background: var(--fusen-shadow);
        border-radius: 3px;
        &:hover {
            background: var(--fusen-shadow);
        }
    }
}

.fusen-bg0 {
    background-color: var(--fusen-bg0);
}
.fusen-bg1 {
    background-color: var(--fusen-bg1);
}
.fusen-bg2 {
    background-color: var(--fusen-bg2);
}
.fusen-bg3 {
    background-color: var(--fusen-bg3);
}
.fusen-content {
	display: block;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
    overflow-x: hidden;
    overflow-wrap: break-word;
	word-break: break-all;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}
/* ハンコ表示 */
.stamp-admin{
	content: '';
	display: inline-block;
	position: absolute;
	right: 1em;
	top: 1em;
	width: 2.0rem;
	height: 2.0rem;
	opacity: 0.4;
	background-image: url(../img/NunnThumbnail/stamp_0001.webp?date=20250227);
	background-size: contain;
	vertical-align: middle;
}

/* 画像アイコン付き */
.comment {
	display: inline-block;
	border-radius: 0.5rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	padding: 0.25rem;
	font-size: 1.0em;
	font-weight: bold;
	text-align: left;
	position: relative;
	margin-left: 4.5rem;
	background-color: var(--main-bg-deep);
	color: var(--main-color);
	&:before{
		border-radius: 0.5rem;
		content: '';
		display: inline-block;
		position: absolute;
		left: -4.5rem;
		top: calc(50% - 2.0rem);
		width: 4.0rem;
		height: 4.0rem;
		background-image: url(../img/NunnThumbnail/icon_0012.webp?date=20241111);
		background-size: contain;
		vertical-align: middle;
	}
	&:after{ /* https://mosya.dev/blog/clippath */
		position: absolute;
		content: '';
		top: calc(50% - 10px);
		left: -19px;
		background-color: var(--main-bg-deep);
		width: 50px;
		height: 50px;
		clip-path: polygon(0 10px, 20px 0, 20px 20px);
	}
	@media screen and (max-width:1024px) { 
		margin-top: 1.0rem;
		margin-bottom: 1.0rem;
		margin-left: 4.5rem;
		&:before{
			left: -4.0rem;
			top: calc(50% - 1.5rem);
			width: 3.0rem;
			height: 3.0rem;
		}
	}
}
.comment2{
	display: block;
	margin: 0;
	padding: 0;
	font-size: 0.8em;
	&:before{
		content: '>>';
	}
}

/* commentと画像が違うだけ。継承ができるようになったら書き換える */
.user-comment{
	display: inline-block;
	border-radius: 0.5rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	padding: 0.25rem;
	font-size: 1.0em;
	font-weight: bold;
	text-align: left;
	position: relative;
	margin-left: 4.5rem;
	background-color: var(--main-bg-deep);
	color: var(--main-color);
	&:before{
		border-radius: 0.5rem;
		content: '';
		display: inline-block;
		position: absolute;
		left: -4.5rem;
		top: calc(50% - 2.0rem);
		width: 4.0rem;
		height: 4.0rem;
		background-image: url(../img/NunnThumbnail/user.webp?date=20240115);
		background-size: contain;
		vertical-align: middle;
	}
	&:after{ /* https://mosya.dev/blog/clippath */
		position: absolute;
		content: '';
		top: calc(50% - 10px);
		left: -19px;
		background-color: var(--main-bg-deep);
		width: 50px;
		height: 50px;
		clip-path: polygon(0 10px, 20px 0, 20px 20px);
	}
	@media screen and (max-width:1024px) { 
		margin-top: 1.0rem;
		margin-bottom: 1.0rem;
		margin-left: 4.5rem;
		&:before{
			left: -4.0rem;
			top: calc(50% - 1.5rem);
			width: 3.0rem;
			height: 3.0rem;
		}
	}
}

/* バー */
.rate-bar{
	/* bgとcolorが逆だが、ここではバーがメインになるためこれはわざと */
	--rate-bar-width: 50;
	max-width: 97%;
	width: calc(var(--rate-bar-width) * 1%);
	background-color: var(--main-accent-color);
	color: var(--main-accent-bg);
	height: 24px;
	line-height: 24px;
	text-align: right;
	padding-right: 6px;
	font-weight: bold;
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
}

/* テキストデコレーション */
span.smallText{
	font-size: 0.8em;
	line-height:1.2em;
}

span.local-box{
	display: inline-block;
	border-radius: 0.5rem;
	border: solid;
	margin: 0.5rem;
	padding: 0.5rem;
}
  
span.inline-block{
	display: inline-block;
	border-radius: 1000px;
	border: dashed 2px;
	padding: 0 0.5rem 0 0.5rem;
	margin: 0.25rem;
	color: var(--highlight-color);
	font-weight: bold;
	background: var(--highlight-bg);
}
a > span.inline-block{
	color: inherit;
	font-weight: normal;
	background: transparent;
}
a:hover > span.inline-block{
    color: inherit;
	font-weight: bold;
}

.non-active{
	color: var(--inactive-color) !important;
	background-color: var(--inactive-bg) !important;
}

span.fukidashi {
	display: inline-block;
	border-radius: 0.5rem;
	border: solid;
	margin: 0.5rem;
	padding: 0.5rem;
}

/* 半角文字が改行されずはみ出る場合に使用 */
.break-word {
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}

/* 広告用 */
ins.adsbygoogle {
	min-width: 250px;
}

/* トップ固定 */
#page-changer-box{
	z-index: 99;
}

/* フレキシブルボックス */
div.flex-box{
	margin-top:0.5em;
	margin-bottom:0.5em;
	display:flex;
	display:-webkit-flex;
	flex-wrap: wrap;
	width: 100%;
	text-align: center;
}
div.flex-box-child{
	border: 1.0px double var(--main-border-table);
}

div.flex-card-box{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    width: 100%;
	/* justify-content:center; */
}
.flex-card-box-child{
    display: block;
    aspect-ratio: 16 / 9;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px dashed var(--main-color);
    border-top: 0.5rem solid var(--main-color);
    border-radius: 0.5rem;
    background: var(--root-bg);
	color: var(--main-text-overlay-color) !important;
	text-shadow: 1px 1px 4px var(--main-text-overlay-shadow) !important;
    width: 27em;
    padding: 0.5rem;
    font-size: 0.8em;
    text-decoration: unset;
    line-height: 1.7em;
    --bgurl: none;
	--blurVal: 0px;
    position: relative;
    z-index: 1;
	@media screen and (max-width:1024px) { 
		width: calc(100% - 2.0rem);
	}
	&:before{
		content: '';
		background-image: var(--bgurl);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		filter: blur(var(--blurVal));
		z-index: -1;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-color: var(--main-text-overlay-bg);
		background-blend-mode: color;
	}
}
div.flex-card-box-child-title{
    font-size: 1.1em;
    margin-bottom: 0.5em;
    border-bottom: 1px dotted var(--highlight-border);
    height: 3.0rem;
    overflow: hidden;
	text-align: center;
}

/* sticky */
.sticky-top{
	position: sticky;
	top:0;
	z-index: 2;
}
.sticky-left{
	position: sticky;
	left:0;
	z-index: 2;
}

/* モーダルウィンドウ */
#modal {
	display: none;
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100vh;
	background: var(--main-bg-modal);
	z-index: 99998;
}
#modal-canvas {
	display: block;
	margin-top: 1.0rem;
	margin-left: 1.0rem;
	width: calc(100% - 2rem);
	height: calc(100vh - 2rem);
	z-index: 99999;
	overflow-y: scroll;
	overflow-x: scroll;
}
img.modal-canvas-img {
	max-height: 100%;
}

/* 横長用 */
.over-width{
	width: 100%;
	overflow-x: scroll;
}

/* 縦書き */
.vertical{
	writing-mode: tb-rl;
	text-orientation: upright;
}

/* モバイル用 */
div.column2-box{
	display:flex;
	display:-webkit-flex;
	width: 100%;
}

.flexible-box>*{
	min-width: 0;
}

div.left-column{
	width: 70%;
}

div.right-column{
	width: 30%;
}

.tablesorter>thead>tr>th:after{
	content:"▼";
}

.news-body{
	text-align:left;
}

.ShipType-None{
	display: none;
}

.Rare-None{
	display: none;
}

.Country-None{
	display: none;
}

.news-img-box {
	position: relative;
	margin-top:0.5em;
	margin-bottom:0.5em;
}

div.img-text {
	position:absolute;
	top: 0;
	left: 0;
	margin-top: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	background-color: var(--main-text-overlay-bg);
	font-size: 0.8em;
	line-height: 1.5em;
	word-break: break-all;
}

.body-overview {
	margin-top: 0.5em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding-left: 0.5em;
	background-color: var(--highlight-bg);
	color: var(--highlight-color);
	font-size: 1.0em;
}

div.category {
	margin-top:0.25em;
	text-align:left;
	line-height:2.0em;
}

.categoryLink{
	margin:0.5em;
}

span.categoryItem {
	padding:0.25em 0.25em;
	padding-left:0.5em;
	padding-right:0.5em;
	border-radius:0.5em;
    border:1.0px dashed var(--main-color);
	line-height:3.0em;
}

img.news-img {
	max-width:100%;
	height:200px;
    border:1.0px solid var(--main-color);
    object-fit: contain;
}

img.news-img-nolink {
	max-width:100%;
    border:1.0px solid var(--main-color);
    object-fit: contain;
}

img.news-img-mosaic {
	filter: blur(12px);
}

img.news-img-mini {
	max-width:100%;
	height:120px;
    border:1.0px solid var(--main-color);
    object-fit: contain;
}

div.relation-news{
	text-align:left;
	padding-top:0.25em;
	padding-bottom:0.25em;
    border-top:1.0px dotted var(--main-color);
    overflow: hidden;
}

img.thumbnail{
	max-width:40%;
	height:120px;
    object-fit: contain;
    float: left;
}

div.relation-body{
    overflow: hidden;
}

.comment-form-box-content{
	width: 100%;
	max-width: 60em;
}

div.g-recaptcha{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

div.matome-item{
	border-top: 0.25em solid var(--highlight-border);
	border-radius: 0.50em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background-color: var(--highlight-bg);
    color: var(--highlight-color);
}

div.comment-log-box{
    border-bottom:1.0px dotted var(--main-color);
}

.insert{
    background-color: var(--main-bg-deep);
    color: var(--main-color);
	margin-left: 0.5em;
	margin-right: 0.5em;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	padding-left: 0.5em;
}
.inoreader-thumbnail{
	width: 280px;
	height: 180px;
	object-fit: cover;
}
.list{
    background-color: var(--main-bg-deep);
    color: var(--main-color);
	margin-left: 1.0em;
}

.code{
    background-color: var(--highlight-bg);
    color: var(--highlight-color);
	margin-top: 2.0em;
	margin-bottom: 2.0em;
	margin-left: 1.0em;
	padding-left: 1.0em;
	white-space: pre;
	overflow:auto;
	line-height: 1.5em;
}
.code br{
	display: none;
}
.separate-line{
	border-bottom: 1px dashed var(--main-color);
}
/* ページングボックス */
.pagelist{
	text-align: center;
}
.pagelist-overview{
	margin-top: 0.5rem;
}
.pagelist-items{
	margin-top: 0.5rem;
}
.pagelist-items-item {	/* リンクになっているページ送りボタン */
	padding: 0 0.75rem 0 0.75rem;
	display: inline-block;
    background-color: var(--highlight-bg);
    border: 1px solid var(--highlight-border);
    color: var(--highlight-color) !important;
    font-size: 0.8em;
}
span.pagelist-items-item {	/* リンクでないページ送りボタン */
    background-color: var(--main-bg-deep);
    color: var(--main-color) !important;
}
.pagelist-items-leftitem {
    border-radius: 50% 0 0 50%;
}
.pagelist-items-rightitem {
    border-radius: 0 50% 50% 0;
}
/* アズレン関連 */
.skill-red:before{
    color: #B00;
    content:"■";
}
.skill-blue:before{
    color: #00B;
    content:"■";
}
.skill-yellow:before{
    color: #F0E68C;
    content:"■";
}
.listKansen{
	overflow: scroll;
	table-layout: fixed;
	background-color:#222;
	border-collapse: collapse;
	counter-reset: rowCount;
}
.listKansen-header{
	position: sticky;
	top: 0;
	background-color:var(--main-bg-deep);
}
.listKansen th,.listKansen td{
	border:1px dotted var(--main-color);
	padding-left:0.25em;
	padding-right:0.25em;
}
.listKansen tbody tr{
	counter-increment: rowCount;
}
.listKansen tbody tr td:first-child::before{
	content: counter(rowCount);
}
.kansenList{
	text-align: left;
}
.kansenList-part{
	display: inline-block;
	margin-top: 0.1em;
	text-align: center;
	vertical-align: top;
	width: 100px;
	font-size: 0.8em;
}
.kansenList-part-row{
	display: block;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
}
.AzurenTopCreateNews-cell{
	width: 3.0em;
}
.AzurenKansenCreateNews-Overview-Total{
	width: 50%;
}
.AzurenKansenCreateNews-Overview-Img{
	max-width: 100%;
	height: auto;
}
.AzurenKansenCreateNews-Status-Total{
	width: 50%;
}
.AzurenKansenCreateNews-Weapon-Total{
	width: 50%;
}
.AzurenKansenCreateNews-Chart-Box{
	text-align: left;
}
.AzurenKansenCreateNews-Chart{
	display:inline-block;
	margin-top:0.5em;
}
.AzurenKansenCreateNews-Chart-Img{
	background-color: var(--highlight-bg);
	max-width: 100%;
	height: auto;
}
.AzurenKansenCreateNews-Skill-Total{
	width: 100%;
}
.AzurenKansenCreateNews-Skill-Img{
	max-width: 90%;
	height: auto;
}
.ListAzurenKansenCreateNews-Total{
	width: 100%;
}
.ListAzurenKansenCreateNews-header2{
	width: 8.0em;
}
.ListAzurenKansenCreateNews-cell2{
	width: 8.0em;
	text-align: center;
	word-break: break-all;
}
.ListAzurenKansenCreateNews-Drop-Total{
	margin-top:1.5em;
	width: 50%;
}
.ListAzurenSkillCreateNews-Total{
	display: table;
    border:1.0px solid var(--main-color);
	margin-top: 1.0em;
    width:100%;
}
.ListAzurenSkillCreateNews-skillName{
	display: table-cell;
	padding: 0.5em;
    border-right:1.0px dashed var(--main-color);
    width:5.0em;
	vertical-align: middle;
	text-align: left;
	font-weight:bold;
}
.ListAzurenSkillCreateNews-danmakuImg{
	display: table-cell;
	padding: 0.5em;
    width:20.0em;
    border-right:1.0px dashed var(--main-color);
	vertical-align: middle;
	text-align: center;
}
.ListAzurenSkillCreateNews-danmakuImg-Img{
	max-width: 100%;
	height: auto;
}
.ListAzurenSkillCreateNews-skillContent{
	display: table-cell;
	padding: 0.5em;
    border-right:1.0px dashed var(--main-color);
    width:20.0em;
	vertical-align: middle;
	text-align: left;
}
.ListAzurenSkillCreateNews-img{
	display: table-cell;
	padding: 0.5em;
	vertical-align: middle;
	text-align: left;
}
.ListAzurenSkillCreateNews-Graph{
	height:1.2em;
	background-color:#F00;
}
.RankingAzurenKansenCreateNews-Total{
	display: inline-block;
	vertical-align: top;
}
.inline-table{
	display: inline-block;
	vertical-align: top;
}

#backToTop{
	position: fixed;
	right: 0;
	bottom: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--button-footer-bg);
	color: var(--button-footer-color);
	opacity: 0.7;
	text-decoration: none !important;
	vertical-align: middle;
	z-index: 50;
}

#backToTop::before{
	content:'▲';
	position: absolute;
	top: 0.5em;
	bottom: 0;
	right: 0;
	left: 0;
	font-size: 18px;
}

#special{
	min-height:7.0em;
}

a:link {/*未訪問のリンク*/
    color: inherit;
    font-style:normal;
}
a:visited {/*訪問後のリンク*/
    color: inherit;
}
a:hover{
    color: inherit;
	font-weight:bold;
}
/* アークナイツ用 */
.ark-header{
    background-color: var(--highlight-bg);
    color: #000;
    text-align: center;
}
.ark-cell{
    height: 3.0em;
    width: 3.03em;
    border: 1px solid var(--main-color);
    text-align: center;
}
.ark-player-point{
    background-color: #00F;
    text-align: center;
}
.ark-enemy-point{
    background-color: #F00;
	color: 000;
    text-align: center;
}
.ark-locatable-high{
    background-color: #0FF;
	color: 000;
    text-align: center;
}
.ark-locatable-low{
    background-color: #adff2f;
	color: 000;
    text-align: center;
}
.ark-object{
    background-color: #FF0;
	color: 000;
    text-align: center;
}
.ark-street{
    background-color: #556b2f;
	color: 000;
    text-align: center;
}
.ark-accent{
    font-weight: bold;
    text-decoration: underline;
}

/* スマホ用 */
@media screen and (max-width:1024px) { 
	div.column2-box{
		display:block;
		width: 100%;
	}
	div.left-column{
		width: 100%;
	}
	div.right-column{
		width: 100%;
	}

	/* 記事内トピック */
	div.topic-box {
		margin-left:0.0em;
		margin-right:0.0em;
		padding-left:0.25em;
	}

	.mobile-invisible{
		display: none;
	}
	
	/* アズレン関連 */
	.AzurenTopCreateNews-cell{
		width: 1.0em;
		word-break: break-all;
	}
	
	.AzurenKansenCreateNews-Overview-Total{
		width: 100%;
	}
	.AzurenKansenCreateNews-Status-Total{
		width: 100%;
	}
	.AzurenKansenCreateNews-Weapon-Total{
		width: 100%;
	}
	.ListAzurenKansenCreateNews-header{
		width: 1.0em;
		word-break: break-all;
	}
	.ListAzurenKansenCreateNews-cell{
		width: 1.0em;
		word-break: break-all;
	}
	.ListAzurenKansenCreateNews-header2{
		width: 8.0em;
		word-break: break-all;
	}
	.ListAzurenKansenCreateNews-cell2{
		width: 8.0em;
		word-break: break-all;
	}
	.ListAzurenKansenCreateNews-Drop-Total{
		width: 100%;
	}
	.ListAzurenSkillCreateNews-Total{
		display: block;
	    border:1.0px solid var(--main-color);
		margin-top: 1.0em;
	    width:100%;
	}
	.ListAzurenSkillCreateNews-skillName{
		display: block;
		box-sizing: border-box;
	    width: 100%;
	    border-left:none;
		background-color: var(--highlight-bg);
		color: var(--highlight-color);
	}
	.ListAzurenSkillCreateNews-danmakuImg{
		display: block;
		box-sizing: border-box;
	    width: 100%;
	    border-left:none;
	    border-bottom:1.0px dashed var(--main-color);
	}
	.ListAzurenSkillCreateNews-skillContent{
		display: block;
		box-sizing: border-box;
	    width: 100%;
	    border-left:none;
	    border-bottom:1.0px dashed var(--main-color);
	}
	.ListAzurenSkillCreateNews-img{
		display: block;
		box-sizing: border-box;
	    width: 100%;
	}
	.RankingAzurenKansenCreateNews-Total{
		display: block;
	}
}