@charset "utf-8";

* {
	margin-block: 0;
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 0;
	scrollbar-width: thin;
}

html {
	box-sizing: border-box;
	block-size: max-content;
	min-block-size: 100%;
	text-orientation: upright;
	text-underline-position: left;
	text-size-adjust: 100%;
	font: medium/1.5 YuGothic, 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'Segoe UI Emoji', sans-serif;
	list-style: none;
	scrollbar-color: #4f9f8f #cfffdf;
	tab-size: 4;
}

html * {
	scrollbar-color: inherit;
	line-height: inherit;
	text-orientation: inherit;
	color: currentcolor;
	font-size: inherit;
	list-style: inherit;
}

div#canvasContainer {
	scrollbar-color: auto;
	line-height: normal;
	text-orientation: mixed;
	color: canvastext;
	font-size: small;
	list-style: revert;
}

body {
	block-size: 100%;
}

font[ size = '1' ] {
	font-size: x-small;
}
font[ size = '2' ] {
	font-size: small;
}
font[ size = '3' ] {
	font-size: medium;
}
font[ size = '4' ] {
	font-size: large;
}
font[ size = '5' ] {
	font-size: x-large;
}

pre {
	white-space: pre-wrap;
	word-break: break-all;
}

/*textarea {
	font-family: YuGothic, 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'Segoe UI Emoji', sans-serif;
}*/

code, blockquote, p.code, ol.code {
	tab-size: 4;
	line-height: 1.2;
	font-family: Consolas, YuGothic, 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'Segoe UI Emoji', monospace;
	text-orientation: sideways;
}

blockquote, p.code, ol.code {
	border: dashed 1px;
	padding: 0.5em;
}

a {
	text-orientation: mixed;
}

input, select {
/*	font-family: YuGothic, 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'Segoe UI Emoji', sans-serif;*/
	box-shadow: none;
}

h1 {
	position: relative;
	margin-block: 0 1.5em;
	margin-inline: 2.5%;
	padding-block: 0.5em 0.2em;
	padding-inline: 7%;
	border-block-end: double 3px;
	font-style: oblique;
	text-align: start;
	font-size: 200%;
	line-height: 1.0;
	font-family: YuMincho, 'Yu Mincho Medium', 'Yu Mincho', serif;
	font-feature-settings: 'palt';
}

ol.code {
	margin-block: 1em;
	margin-inline: calc( 1em + 12px ) 0;
}

ol.code li {
	display: flex;
}

ol.code li::before {
	counter-increment: line;
	content: counter( line );
	inline-size: 4ch;
	flex-shrink: 0;
	text-align: end;
	line-height: 1.2;
}

ol.code pre {
	box-sizing: border-box;
	border-inline-start: solid 1px;
	margin-inline-start: 1ch;
	padding-inline-start: 1ch;
}

rt, rp {
	font-size: calc( 0.5em );
	margin-block-end: -0.5em;
}

img {
	border-style: none;
	filter: drop-shadow( 6px 6px 4px #00000033 );
}

.cssList img
/* 互換維持 */, img[ src = "tr.gif" ] {
	filter: none;
}

footer nav h2 {
	display: none;
}

#sideMenu {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	position: fixed;
	inline-size: 46px;
	block-size: 100%;
	left: 0;
	top: 0;
		inset-inline-start: 0;
		inset-block-start: 0;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 600;
	text-align: start;
}
@media ( max-width: 640px ) and ( orientation: portrait ) {

	#sideMenu {
		flex-direction: row;
		inline-size: 100%;
		block-size: 32px;
		top: auto;
		bottom: 0;
			inset-block-start: auto;
			inset-block-end: 0;
		overflow-x: auto;
		overflow-y: hidden;
	}

}

#navMenu {
	position: fixed;
	inline-size: 38px;
	block-size: 100%;
	left: 46px;
	top: 0;
		inset-inline-start: 46px;
		inset-block-start: 0;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 600;
	text-align: start;
	font-size: 75%;
}
@media ( max-width: 640px ) and ( orientation: portrait ) {

	#navMenu {
		block-size: calc( 100% - 46px );
		max-block-size: 132px;
		left: 0;
		top: auto;
		bottom: 46px;
			inset-inline-start: 0;
			inset-block-start: auto;
			inset-block-end: 46px;
	}

}

#sideMenu li {
	float: inline-start;
	inline-size: 32px;
	block-size: 32px;
}

#navMenu li {
	float: inline-start;
	inline-size: 24px;
	block-size: 24px;
}

#navMenu a, #sideMenu a {
	display: block;
	line-height: 1.0;
	white-space: nowrap;
}

#navMenu a {
	inline-size: 24px;
	block-size: 24px;
}

#sideMenu a {
	inline-size: 32px;
	block-size: 32px;
}

#navMenu a.inact img, #sideMenu a.inact img/* */, #navMenu img, #sideMenu img {
	opacity: 0.2;
}

#navMenu a img, #sideMenu a img {
	opacity: 0.7;
}

#sideMenu img[ src $= "menuicon_control" ] {
	border-radius: 0;
}

#sideMenu li:first-child, #navMenu li:first-child {
	margin-block-end: 12px;
}

#sideMenu img, #navMenu img {
	display: block;
}

#navMenu a img:hover, #sideMenu a img:hover {
	opacity: 1;
}

#navMenu a.inact img:hover, #sideMenu a.inact img:hover {
	opacity: 0.2;
}

.linkSeparater {
	display: none;
	visibility: hidden;
}

#mainLayer {
	scroll-behavior: smooth;
	inline-size: calc( 100% - 70px );
	block-size: 100%;
	block-size: fit-content;
	padding-block: 0;
	padding-inline: 70px 0;
	z-index: 550;
	text-align: center;
}
@media ( max-width: 640px ) and ( orientation: portrait ) {

	#mainLayer {
		inline-size: calc( 100% - 24px );
		block-size: calc( 100% - 46px );
		padding-block-end: 46px;
		padding-inline-start: 24px;
	}

}

.navi {
	padding-block: 1em;
	padding-inline: 1em;
	text-align: start;
	font-size: 125%;
}

hr {
	display: none;
}

#mainLayer a:hover::before {
	opacity: 1 !important;
}

input, textarea {
	padding-block: 1px;
	padding-inline: 1px;
	border: 1px solid;
	max-inline-size: 100%;
}

input[ type = "checkbox" ] {
	border: none;
}

.hover {
	cursor: default;
}

ul.linkBar {
	display: flex;
	gap: 0.7em 1.3em;
	flex-wrap: wrap;
	justify-content: center;
	inline-size: max-content;
	max-inline-size: calc( 100% - 70px );
	margin-inline: auto;
	padding-block: 0.3em;
	padding-inline: 1.5em;
	border-radius: 1em;
	background: linear-gradient( #ffffff, #ffffff33 33%, #0000000d 67%, #00000000 );
	box-shadow: 6px 6px 8px #00000033;
	text-align: center;
	text-shadow:1px 1px 1px #ffffff, -1px -1px 1px #00000066;
	font-size: 80%;
	line-height: 1.4;
}

.headlineBox {
	border-radius: 2em;
	background: linear-gradient( #ffffff, #ffffff33 33%, #0000000d 67%, #00000000 );
	box-shadow: 6px 6px 8px rgba( 0, 0, 0, 0.2 );
	border-block-start: solid 1px #ffffff;
	border-inline-start: solid 1px #ffffff;
}

.contentBox {
	border-start-start-radius: 2em;
	border-end-end-radius: 2em;
}

/* -------------------------------------------------------------------------------- */

html {
	background: url( parts/02summer/lleaf ) repeat-y 0 0 fixed, url( parts/02summer/rleaf ) repeat-y 100% 0 fixed, url( parts/02summer/lleafshadow ) repeat-y 0 0 fixed, url( parts/02summer/ground ) repeat fixed;
}

a, .hover
/* 互換維持 */, .txlnk, .txttl, .bbsNotice li, .bbsNotice p {
	color: #3f9fdf;
}

a:visited, #rakugaki .author
/* 互換維持 */, .txstr {
	color: #00bf3f;
}

a:hover, label:hover, .hover:hover
/* 互換維持 */, label :hover {
	color: #5fffff;
}

hr, .inact, a.inact:visited, .inactButtonOnBase
/* 互換維持 */, .txpal {
	color: #aae4ca !important;
}

html/*, body, .regist, dl, ul, div, p, h1, .inputText, .inputSubmit, th, td, caption*/
/* 互換維持 */, .txnml, .txdoc {
	color: #4f9f8f;
}

::placeholder {
	color: inherit;
	opacity: 0.5;
}

.linkIndex {
	color: #ffffff;
}

h1 {
	text-shadow: 4px 4px 5.3px rgba( 0, 0, 0, 0.35 );
}

.l-index
/* 互換維持 */, #rakugaki hr {
	border-color: #aae4ca;
}

h1
/* 互換維持 */, .bbggnd, .bbglnk, .bbgpal {
	border-color: #4f9f8f;
}

input {
	border-color: #4f9f8f;
}

html, .regist, .inactButtonOnBase, .inputText, .inputSubmit
/* 互換維持 */, .bggnd, .bbggnd {
	background-color: #cfffdf;
}

/*.linkBar, .headlineBox,*/ #rakugaki .rakuBlock, .contentBox, #rakugaki .comments
/* 互換維持 */, .bglnk, .bbglnk, #rakugaki .tbody .commentsec div.marg, #rakugaki .tbody input, #rakugaki .tbody textarea {
	background-color: #ffffff;
}

.linkIndex {
	background: linear-gradient( #ffffff77, #ffffff33 33%, #0000000d 67%, #00000000 ), #4f9f8f;
}

/*.expl,*/
/* 互換維持 */ .bgpal, .bbgpal {
	background-color: #efffef;
}

/* -------------------------------------------------------------------------------- */

#rakugaki .picsec img {
	max-inline-size: 100%;
	block-size: auto;
}

#rakugaki table {
	margin-block: 2em;
	border-spacing: 0;
}

#rakugaki #size table{
	margin-inline: auto;
}

#rakugaki textarea {
	padding-block: 1em;
	padding-inline: 1em;
	inline-size: 42em;
	max-inline-size: 100%;
	line-height: 1.2 !important;
	box-shadow: 6px 6px 8px rgba( 0, 0, 0, 0.2 ) inset;
	border-radius: 1.5em;
	font-size: small;
}

#rakugaki textarea:focus {
	outline: none;
}

#rakugaki #headLink {
	text-align: center;
	margin-block-end: 1em;
}

#rakugaki #headLink p {
	margin-block-start: 1em;
}

#rakugaki .picsec table {
	max-inline-size: 100%;
}

#rakugaki textarea[ name = "setr" ] {
	inline-size: auto;
	padding-block: unset;
	padding-inline: unset;
}

#rakugaki #mainLayer {
	text-align: start;
}

#rakugaki h1 font {
	font-style: oblique;
	font-weight: bold;
}

#rakugaki form#adminLink {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
	justify-content: center;
	margin-block: 2em;
	margin-inline: auto;
}

#rakugaki form#adminLink button {
	inline-size: 10em;
	border-radius: 10em;
	background: none;
	backdrop-filter: blur( 4px );
	font-size: small;
}

#rakugaki button:not( [ disabled ] ):hover {
	color: #5fffff;
}

#rakugaki #mainLayer a[ href = '/' ]::before {
	content: '';
}

#rakugaki .tbody {
	margin-inline: auto;
	border-radius: 2em;
	background: linear-gradient( #ffffff, rgba( 255, 255, 255, 0.5 ) 33%, rgba( 255, 255, 255, 0.5 ) 67%, rgba( 255, 255, 255, 0 ) );
	box-shadow: 6px 6px 8px rgba( 0, 0, 0, 0.2 );
	border-block-start: solid 1px #ffffff;
	border-inline-start: solid 1px #ffffff;
	inline-size: min( 100%, calc( 701px + 4em ) );
	backdrop-filter: blur( 3px );
}

#rakugaki .tbody * {
	background: transparent;
}

#rakugaki .tbody col:nth-child( 2 ) {
	inline-size: 100%;
}

#rakugaki .pad8 h2 {
	font-size: large;
}

#rakugaki .tbody .picsec {
	padding-block: 0;
	padding-inline: 0.5em;
}

#rakugaki .tbody .commentsec {
	border-radius: 1.5em;
}

#rakugaki .comment {
	font-size: small;
}

#rakugaki strong {
	font-weight: bold;
}

#rakugaki table hr {
	display: block;
	block-size: 0;
	margin-block: 1em;
	border-block-style: solid none;
	border-inline-style: none;
	border-block-start-width: 1px;
}

#rakugaki .tbody hr {
	display: none;
}

#rakugaki input[ name = 'picW' ],#rakugaki  input[ name = 'picH' ] {
	width: 3em;
	font-size: small;
}

#rakugaki label {
	user-select: none;
	font-size: small;
}

#rakugaki #size button[ type = 'submit' ] {
	appearance: none;
	display: inline;
	border: none;
	background: transparent;
	overflow: visible;
	user-select: text;
	color: #3f9fdf;
	line-height: 1em;
	text-decoration: underline;
}

#rakugaki #size button[ type = 'submit' ]:hover {
	color: #5fffff;
	cursor: pointer;
}

#rakugaki #size button[ type = 'submit' ]:focus {
	outline: none;
}

#rakugaki textarea {
	font-size: 100%;
}

#rakugaki q::before, q::after {
	content: '';
}

#rakugaki .marg {
	margin-block: 8px;
	margin-inline: 1.5em;
}

#rakugaki .comments .marg {
	margin-block: 1em;
	margin-inline: 1em;
}

/*#rakugaki table.pad1 {
	inline-size: 100%;
}*/

#rakugaki .pad1 td {
	padding-block: 1px;
	padding-inline: 1px;
}

#rakugaki .pad2 td {
	padding-block: 2px;
	padding-inline: 2px;
}

#rakugaki .pad8 td {
	padding-block: 8px;
	padding-inline: 8px;
}

#rakugaki .pad0 td {
	padding-block: 0;
	padding-inline: 0;
}

#rakugaki p.comment {
	overflow-x: auto;
	overflow-y: hidden;
	margin-block: 8px;
	margin-inline: 8px 0;
	padding-block: 4px;
	padding-inline: 4px;
}

#rakugaki .nonebg {
	background-image: none;
}

#rakugaki .commentsec {
	background: transparent !important;
}

#rakugaki div.comment, #rakugaki .commentsec div.marg {
	margin-block: 0;
	margin-inline: 0;
	block-size: 100%;
	max-block-size: 700px;
	overflow: auto;
	padding-block: 0;
	padding-inline: 1.5em;
	border-radius: 1.5em;
	box-shadow: 6px 6px 8px rgba( 0, 0, 0, 0.2 ) inset;
}

#rakugaki del, #rakugaki .del {
	text-decoration: line-through;
}

#rakugaki #additionalHeader {
	inline-size: 32em;
	margin-block: 1em;
	margin-inline: 2.5%;
	padding-block: 0.5em;
	padding-inline: 1em;
	border-radius: 1.5em;
	background-color: rgba( 255, 255, 255, 0.7 );
	line-height: 1.2;
	font-size: 0.8rem;
}

#rakugaki #additionalHeader p {
	margin-block: 0.5em;
	font-size: smaller;
	color: #3f9fdf;
}

#rakugaki .bbggnd, #rakugaki .bbglnk, #rakugaki .bbgpal {
	border: 1px solid;
}

#rakugaki .bbsCaution {
	color: #ff0000;
}

#rakugaki .catLink {
	z-index: 10;
	position: absolute;
	block-size: 1.5em;
	inline-size: 40em;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-block-end: solid 2px #ffffff00;
	border-inline-end: solid 2px #ffffff00;
	border-radius: 1em;
	font-size: smaller;
	transition: all 0.2s
}

#rakugaki .catLink:hover {
	block-size: auto;
	block-size: calc-size( auto, size );
	z-index: 10;
	backdrop-filter: blur( 4px );
	background-color: #ffffff9f;
	border-block-end-color: #ffffffbf;
	border-inline-end-color: #ffffffbf;
}

#rakugaki .catLink li {
	text-align: end;
}

#rakugaki #headLink + table.pad2 {
	margin-inline: auto;
}

#rakugaki footer {
	margin-right:1em;
	text-align: end;
}

#rakugaki footer a {
	font-size: small;
}

#rakugaki nav h2 {
	display: none;
}

#rakugaki {

	div#canvasContainer {
		display: flex;
		position: relative;
		justify-content: center;
		gap: 10px;
	}

	div#exPalette {

		scrollbar-color: auto;

		button {
			box-shadow: -2px -2px 4px inset #0000003f;
			border-radius:0.5em;
		}

		textarea {
			border-radius: 0;
		}

	}

}

/* -------------------------------------------------------------------------------- */

#rakugaki .rakuBlock {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin-block: 2em;
	margin-inline: auto;
	inline-size: 97%;
	max-inline-size: calc( 600px + 48em );
	max-inline-size: max-content;
	border-radius: 2em;
	background: #ffffff;
	background: linear-gradient( #ffffff, rgba( 255, 255, 255, 0.2 ) 10%, rgba( 0, 0, 0, 0 ) 50%, rgba( 255, 255, 255, 0.2 ) 90%, #ffffff );
	box-shadow: 6px 6px 8px rgba( 0, 0, 0, 0.2 );
	border-block-start: solid 1px #ffffff;
	border-inline-start: solid 1px #ffffff;
	text-align: start;
	font-size: 80%;
	line-height: 1.5;
}

#rakugaki .artRight {
	flex-direction: row-reverse;
}

#rakugaki .rakuBlock header {
	display: flex;
	inline-size: 100%;
	padding-block: 0.5em;
	padding-inline: 0.5em;
	font-size: 141%;
	font-weight: normal;
	line-height: 1;
}

#rakugaki .artRight header {
	flex-direction: row-reverse;
	text-align: end;
}

#rakugaki .artLeft header {
	text-align: start;
}

#rakugaki .rakuBlock h2 {
	flex-grow: 1;
	font-weight: bold;
	font-size: 100%;
}

#rakugaki .rakuBlock h2.notitle {
	display: none;
}

#rakugaki .artRight h2 {
	margin-inline-start: 1em;
}

#rakugaki .artLeft h2 {
	margin-inline-end: 1em;
}

#rakugaki .artRight h2::after {
	content: ' ▼';
}

#rakugaki .artLeft h2::before {
	content: '▼ ';
}

#rakugaki .rakuBlock .number::before {
	content: '[';
}

#rakugaki .rakuBlock .number::after {
	content: ']';
}

#rakugaki .artInfo {
	max-inline-size: calc( 100% - 2em );
	padding-block: 0 1em;
	padding-inline: 1em;
	text-align: center;
}

#rakugaki .rakuBlock h3 {
	display: none;
}

#rakugaki .artInfo .picture {
	margin-block: 0 1em;
	margin-inline: 0;
}

#rakugaki .artInfo .picture img {
	max-inline-size: 100%;
	block-size: auto;
}

#rakugaki .artInfo dl {
	margin-block: 0;
	margin-inline: 0;
}

#rakugaki .artInfo dt, #rakugaki .artInfo dd.mail, #rakugaki .artInfo dd.website {
	display: none;
}

#rakugaki .artInfo .author {
	/*color: #;*/
	font-size: 125%;
	font-weight: bold;
}

#rakugaki .artInfo dd, #rakugaki .artInfo li, #rakugaki .artInfo dt.mail, #rakugaki .artInfo dt.website {
	display: inline;
}

#rakugaki .artInfo dd.author::before, #rakugaki .artInfo dd.dateTime::before, #rakugaki .artInfo dd.tool::before {
	white-space: pre-wrap;
	content: '\a';
}

#rakugaki .comments {
	/*background-color: #ffefef;*/
	overflow-y: auto;
	margin-block: 0 1em;
	margin-inline: 1em;
	padding-block: 0.5em;
	padding-inline: 1.5em;
	max-inline-size: 42em;
	max-block-size: 650px;
	border-radius: 1.5em;
	box-shadow: -4px -4px 8px rgba( 0, 0, 0, 0.2 ) inset;
}

/*#rakugaki .artRight .comments {
	float: inline-start;
}

#rakugaki .artLeft .comments {
	float: inline-end;
}*/

#rakugaki .comments li {
	margin-block-end: 1.5em;
}

#rakugaki .comments dt, #rakugaki .comments dd.mail, #rakugaki .comments dd.website {
	display: none;
}

#rakugaki .comments dd, #rakugaki .comments dt.mail, #rakugaki .comments dt.website {
	display: inline;
}

#rakugaki .comments .author {
	/*color: #;*/
	font-size: 125%;
	font-weight: bold;
}

#rakugaki .comments p {
	overflow-x: auto;
	overflow-y: hidden;
	margin-block: 0.5em 0;
	margin-inline: 1em 0;
	max-inline-size: 40em;
}
* html #rakugaki .comments p {
	inline-size: 32em; /* max-width が効かない ie6 用 */
	overflow-y: auto; /* 最下行が横スクロールバーに隠れる ie6 用 */
}
*:first-child+html #rakugaki .comments p { overflow-y: auto; } /* 最下行が横スクロールバーに隠れる ie7 用 */

#rakugaki .footer {
	/*background-color: #ffefef;*/
	inline-size: 100%;
	padding-block: 0.5em;
	padding-inline: 1em;
	border-end-start-radius: 2em;
	border-end-end-radius: 2em;
}

#rakugaki .artRight .footer {
	text-align: end;
}

#rakugaki .artLeft .footer {
	text-align: start;
}

#rakugaki .authorSearch {
	display: inline-block;
	margin-inline-start: 0.2em;
	padding-block: 0.1em;
	padding-inline: 0.1em;
	border-radius: 0.6em;
	inline-size: 0.8em;
	block-size: 0.8em;
	box-shadow: inset 0.2em 0.2em 0.3em rgba( 255, 255, 255, 1 ), inset -0.2em -0.2em 0.3em rgba( 0, 0, 0, 0.2 );
	text-align: center;
	vertical-align: middle;
	font-size: 0.8em;
	line-height: 1;
	text-decoration: none;
}



@media ( max-width: 640px ) and ( orientation: portrait ) {

	#rakugaki .rakuBlock header {
		font-size: 1rem;
	}

	#rakugaki .rakuBlock .author {
		font-size: 0.89rem;
	}

	#rakugaki dd.id, #rakugaki dd.tool, #rakugaki dd.elapsedTime {
		display: none;
	}

	#rakugaki #size tr, #rakugaki #size td {
		display: block
	}

	#rakugaki .rakuBlock .picture img {
		max-width: 100%;
		height: auto;
	}

	#navMenu a img, #sideMenu a img {
		opacity: 1;
	}

}