:root{--tc1: #606f75; --tc2: #4d595eee; --bar: #000; --txt: #eee; --sub: #aaa; --lnk: #eee;}

/* 基本 */
html{scroll-behavior: smooth;}
body{margin: 0; overflow: auto scroll;background: var(--tc1);color: var(--txt);overflow-x:hidden;
	text-align: center; font-size:small;line-height:200%;
	font-family:'Century Gothic','メイリオ', 'Meiryo', '游ゴシック', 'YuGothic', sans-serif;}
img{vertical-align:top;max-width: 100%;height: auto;object-fit:contain;clear: both;}
p{padding: 15px 15px 30px;overflow-wrap: break-word;}
hr{margin: 15px 0;border: dashed var(--bar);border-width: 1px 0 0;}




/* リンク */

a{color: #cff;text-shadow:0px 0px 3px #000,0px 0px 2px #000;}

a:hover, span.scrollTxt:hover{color: #fff;text-decoration: none;background-color: #000;
	text-shadow:1px 1px 2px #fa5,1px -1px 2px #fa5,-1px 1px 3px #fa5,-1px -1px 3px #fa5;}

p a:hover, table#me a:hover{border-radius:5px;}




/* 全体 */

div#d_top{width: clamp(70%, 950px, 100%);min-height: 100vh;height: 100%; display: inline-block;
	border-left: 1px solid var(--bar);border-right: 1px solid var(--bar);margin-bottom: -31px;
	box-shadow: 0px 0px 15px #000;
	}




/* ヘッダー */

header{width: 100%;height: max(calc(20vh + 60px + 75px), 80px);position: fixed;top: 0;z-index: -1;
	border-bottom: 1px solid var(--bar);
	}

header > div#title_s{width: 100%;height: 100%;
	background-size: cover;background-repeat: no-repeat;background-image: none;

	background-position: 50% 100%; opacity: 0;
	transition: none;
	position: relative;overflow: hidden;
	}

header > div#title_s.show{
	background-position: 50% var(--posY); /*JSの変数*/

	opacity: 1;
	transition: background 4s ease-in-out, opacity 2s ease;
	}

header > div#title_s::before {content: "";
	position: absolute;top: 0;left: 0;
	width: 100%; height: 100%;
	background: linear-gradient(to right, #707d85a8 0%, #fff0 50%, #707d85a8 100%);
	pointer-events: none;
	}




/* ヘッダーレイヤー */

div#d_head{display: flex;justify-content: start;flex-direction: row;align-items:center;white-space: nowrap;
	width: 100%;height: auto;
	transition:all 0.3s ease;
	}
div#d_head.compact{margin: 23px 0 -23px 0;}


/* ロゴ */

div#d_title{display: flex;justify-content: center;flex-direction: column;align-items:center;gap:0px;line-height: 130%;

	height: calc(20vh + 0px); aspect-ratio: 1 / 1;position: relative;
	margin: 45px 30px 30px 60px;

	white-space: nowrap;cursor: pointer;
	
	color: #fff; background: #000b;
	text-shadow:1px 1px 2px #000,1px -1px 2px #000,-1px 1px 3px #000,-1px -1px 3px #000;
	transition: all 0.3s ease;
	}
div#d_title:hover{background: #fff2;}

div#d_title span:first-of-type, nav div span:first-of-type{font-size:120%;font-family:'Yu Mincho','游明朝',serif;}
div#d_title span:last-of-type, nav div span:last-of-type{font-size: 50%;font-family:'Century Gothic',sans-serif;opacity:0.5;}


/* url */

div#d_head div.title-container{display: flex;width: calc(95% - 20vh - 75px);justify-content: center;overflow: hidden;
	}
div#d_head div.title-container span.title-text{white-space: nowrap; font-size: 50%;opacity: 0.7;
	text-shadow:1px 1px 2px #000,1px -1px 2px #000,-1px 1px 2px #000, -1px -1px 2px #000;
	user-select: none;
	}


/* メニューnav */

nav{display: flex;width: 100%;height: 0px;z-index: 500;
	position: sticky;top: 0;
	justify-content: start;align-items: start;flex-direction: row;
	}
nav div.menu_nav{display: flex;width: 100%;height: 100%;transform-origin: left;}

.menu_nav.compact{transform: scaleX(0); opacity: 0;transition: transform 0.3s ease, opacity 0.3s ease;}
.menu_nav:not(.compact){transform: scaleX(1); opacity: 1;transition: transform 0.3s ease, opacity 0.3s ease;}



nav div.menu_toggle{display: flex;justify-content: center;align-items:center;z-index: 501;
	min-width: 60px;min-height: 60px;
	font-size: 2.5em;cursor: pointer; color: #fff; background: #0009;
	transform: rotate(270deg);	
	transition: background 0.2s ease, transform 0.2s ease;

	text-shadow:1px 1px 2px #000;
	}
nav div.menu_toggle.compact{background: transparent;transform: rotate(0);}


nav div.menu_nav a{display: flex;width: 100%; min-height:60px; line-height: 120%;
	white-space: nowrap; cursor: pointer; text-decoration: none; 

	color: #fff; background: linear-gradient(to top, #0009 0, #0003 100%);

	justify-content: center;align-items:center;flex-direction: column; /* <a>内の配置 */
	border-left:1px solid #fff5;

	text-shadow:1px 1px 2px #000,1px -1px 2px #000,-1px 1px 3px #000,-1px -1px 3px #000;
	transition: background 0.3s ease;
	}

nav div.menu_nav a:hover{color: var(--lnk);background: #000;
	text-decoration: none;
	text-shadow:1px 1px 2px #fa5,1px -1px 2px #fa5,-1px 1px 3px #fa5,-1px -1px 3px #fa5;}

nav div.menu_nav a:nth-of-type(6):hover{background: #1DA1F2;} /*twitter*/
nav div.menu_nav a:nth-of-type(7):hover{background: #27a37c;} /*skeb*/





/* コンテンツ */

div#d_content{display: inline-block;width: 100%;
	min-height: calc(100vh - 20vh - 60px - 75px - 30px);height: auto;
	
	margin-top: 60px;
	
	padding: 0 0 30px;background: var(--tc2);white-space: normal;}

section#menu_me, section#menu_info, section#menu_log, div#il_out{display:none;}




/* ログメニュー */

div#log_head{display: flex;justify-content: center;align-items: flex-start;z-index: 1;

	flex-wrap: wrap;
	position: relative;top: 0;padding: 0 0 15px;gap: 0;margin-bottom: 45px;
	}

div#log_head > a{z-index: -1;}

div#log_head > a > span{display: inline-flex;justify-content: center;align-items: center;
	height: 60px;width: 60px;color: #fff;text-decoration: none;
	text-shadow:1px 1px 2px #000,1px -1px 2px #000,-1px 1px 2px #000,-1px -1px 2px #000;}

div#log_head > a > span::before{content: "";width: 60px;height: 60px;position: absolute;
	opacity: 0.3;z-index: -1;transition: opacity 0.3s ease;}

div#log_head > a:nth-last-child(10) > span::before{background: url("diary/painter_ori_nenga2026.jpg") center /cover;}
div#log_head > a:nth-last-child(9) > span::before{background: url("diary/painter_skeb24.jpg") center /cover;}
div#log_head > a:nth-last-child(8) > span::before{background: url("diary/painter_ori_nenga2024.jpg") center /cover;}
div#log_head > a:nth-last-child(7) > span::before{background: url("diary/painter_ff_viela18.jpg") center /cover;}
div#log_head > a:nth-last-child(6) > span::before{background: url("diary/painter_ff_aura8.jpg") center /cover;}
div#log_head > a:nth-last-child(5) > span::before{background: url("diary/painter_ff_aura4.jpg") center /cover;}
div#log_head > a:nth-last-child(4) > span::before{background: url("diary/painter_ori_nenga2020.jpg") center /cover;}
div#log_head > a:nth-last-child(3) > span::before{background: url("diary/painter_ff_viela2.jpg") center /cover;}
div#log_head > a:nth-last-child(2) > span::before{background: url("diary/painter_ori_succubus126.jpg") center /cover;}
div#log_head > a:nth-last-child(1) > span::before{background: url("diary/painter_ori_succubus98.jpg") center /cover;}

div#log_head > a:hover{background: #000;}
div#log_head > a:hover > span::before{opacity:1;}

div#log_head{margin:30px 0;}


hr + p a{padding: 15px 30px;text-decoration: none;}

span.log_title{display: block;color: #0005;margin: 0 5%;text-align: right;font-size: 30px;}
span.log_title::before{content: "≫";margin-right: 15px;}




/* イラストログサムネ */

section#menu_log img.i_thumb{width: 90px;height: 90px;object-fit: cover;transition: filter 0.3s ease;}
section#menu_log img.i_thumb:hover{filter: brightness(160%);}

section#menu_log div#log_main a:has(> img){display: inline-block;border-radius: 0;}

p.log_p{padding-right: 15px;padding-left: 15px;}




/* 自己紹介 */

table#a_me{display:inline-block;margin-top:30px;margin-left:15px;}

table#a_me tr td{vertical-align: top;padding: 4px 0;}

table#a_me tr:first-child td:first-child{vertical-align: middle;padding-right: 15px;}


table#a_me tr td:nth-last-child(2){text-align: right;padding-right: 8px;}

table#a_me tr td:last-child{text-align: left;font-weight: bold;color: #cff;text-shadow:0px 0px 3px #000,0px 0px 2px #000;}
table#a_me tr td:last-child span.gray{font-weight: normal;text-shadow:none;}

table#a_me + p{padding: 0 0 60px 15px;}


/* インフォ */
span.i_notice{display: inline-block;margin-top: 30px;padding: 15px;background: #7007;}
span.i_notice span:first-child{font-weight: bold;}



/* スクロール */

aside{width: 30px;height: 100vh;position: fixed;float: right;top:0;
	margin-left: -30px;z-index: 1000;
	display: inline-flex;justify-content: space-between;flex-direction: column;align-items: end;}

aside a{width: 30px;height: 30px;line-height: 30px;display: block;text-decoration: none;color: var(--lnk);
	transition: background 0.3s ease;}

aside a:hover{background: #000;}

aside a:nth-child(1):hover{text-decoration: overline;}
aside a:nth-child(2):hover{text-decoration: underline;}





/* フッター */

footer{width:100%;height:30px;font-size: 75%;border-top:1px solid var(--bar);clear: both;
	position: relative;bottom: 0;background: #0004;}






/* 黒枠 */

div#il_out{
	position:fixed;top:0;left:0;vertical-align: middle;
	background-color:rgba(0,0,0,0.7);z-index:1100;width:100%;height:100%;
	}

div#il_out div{width:100%;height:100%;cursor: pointer;}

div#il_out div > *{
	display:table-cell;position:absolute;top:50%;left:50%;vertical-align: middle;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	}
div#il_out div img{object-fit: contain;width: 95%;height: 95%;}






/* 引用文 */

.clap_c p > br + span{color: #fa5;
	font-weight: bold;font-style: italic;
	font-family: "游明朝", "游ゴシック", "YuGothic", sans-serif;padding:0 3px;}

.clap_c p > br + span{display: block;line-height: 120%;padding: 0 15px 0;margin: 0 5% 5px;}

.clap_c p > br + span:before, .clap_c p > br + span:after{content:"\"";}

.clap_c h2 + p > span:last-child{color: #aaa;font-weight: normal;font-style: normal;border: 0px;background: transparent;
	font-family:"Century Gothic","メイリオ", "Meiryo", "游ゴシック", "YuGothic", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
.clap_c h2 + p > span:last-child:before, .clap_c h2 + p > span:last-child:after{content: "";}
.clap_c h2 + p > br + span > br + br{line-height:0%;margin:0;padding:0;}

.red{color: #f54;}
.gray{color: var(--sub);font-size: 85%;}

.clap_c h2 + p > span:first-of-type, .clap_c h2 + p > span:last-of-type{
	display: block;border-top: 1px dotted #000;padding-top: 2em;}
.clap_c h2 + p > span + br {display: none;}






/* 段落 */

h1{text-align: right;font-size: clamp(25px, 10vw, 90px);font-weight: normal;line-height: 100%;color: #000;
	white-space: nowrap;text-transform:capitalize;
	margin: 0 5%;
	}
h1 + span{display: flex;justify-content: flex-end;font-size: 85%;color: #000;
	border-top: 1px dashed var(--bar);padding-right: 5%; position: relative; top: clamp(-12px,-1.2vw,-1px); margin-bottom: 30px;
	}

h2{text-align: left;font-size:100%;font-weight: normal;height: 30px;line-height: 30px;
	padding: 0 15px;margin: 0 5%;
	background: #0005; /*linear-gradient(to right, #0005 0, #0000 100%);*/
	border-left: 30px solid var(--bar);
	position: relative;
	}

span.s_min{display: inline-block;width: 50%;font-size: 85%;text-align: center;
	border-bottom:1px dotted #000;color: var(--sub);}
span.s_min:before{content: "≫ ";}




/* H2のスライドボタン */

div.btnWrapper {display: flex;justify-content: end;align-items: center;
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	}
span.scrollTxt {display: flex; justify-content: center; align-items: center;
	width: 30px; height: 30px; padding-bottom: 8px;

	cursor: pointer; user-select: none; text-decoration: none; color: #fff;
	transition: all 0.3s ease;
	}
span.scrollTxt::before {content: ""; width: 30px; height: 30px;
	position: absolute; top: 4px;
	z-index: -1;
	transition: background-color 0.3s ease;
	}
span.scrollTxt:hover::before {background-color: #000;}
span.scrollTxt:hover{background:transparent;}
span.scrollTxt.downTxt{transform:rotate(180deg);}



/* フェードイン */

#menu_note, #menu_log, #menu_me, #il_out, footer, #menu_info, #log_main{
	animation: fadein 1s ease 0s;-webkit-animation: fadein 0.3s ease 0s;}
@keyframes fadein {0% {display:none;opacity:0;}1% {display:block;opacity:0;}100% {display:block;opacity:1;}}
@-webkit-keyframes fadein {0% {display:none;opacity:0;}1% {display:block;opacity:0;}100% {display:block;opacity:1;}}



/* モバイル用 */

@media (max-width: 768px) {
	nav div.menu_nav a{writing-mode: vertical-rl; font-size: 85%;
		text-orientation: mixed;
		flex-direction: column-reverse;}
	div#d_head div.title-container{opacity:0;}

	header{height: max(calc(20vh + 60px), 80px);}
	div#d_head.compact{margin: 0;}
	div#d_title{margin:15px;height: calc(20vh - 30px);}

	table#a_me img{display: none;}
	p{word-break: auto-phrase;}
}