@import url('https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+JP+N&family=Zen+Maru+Gothic&display=swap');



.wdxl-lubrifont-jp-n-regular {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-weight: 400;
  font-style: normal;
}



:root {
    /*トップページ：サムネイルの横幅*/
    --thumbnail-width: 150px;
    /*トップページ：サムネイルの縦幅*/
    --thumbnail-height: 150px;

    /*検索ページ：サムネイルの横幅*/
    --search-thumbnail-width: 100px;
    /*検索ページ：サムネイルの縦幅*/
    --search-thumbnail-height: 100px;

    /*サムネイルの色*/
    --thumbnail-back-color: #eee;
    --thumbnail-font-color: #999;

    /*タグ クラウドのバックカラー&文字色*/
    --tag-cloud-back-color: #a0a0a0;
    --tag-cloud-font-color: #fff;
    --tag-cloud-back-color-hover: #777;
    --tag-cloud-font-color-hover: #fff;

    /* 基本背景色 */
    --background-color: #f0f0f0;
    --base-back-color: #fff;


    /* 基本 文字色 */
    --base-text-color: #333;
    --base-light-color: #777;


.created_at
{
    display: none;
}

a{
    text-decoration: none; /* 元の下線を消す */
    border-bottom: 2px dotted #000; /* 点線を引く */
}

a:visited {
    color:#f0f0f0
    text-decoration: none; /* 元の下線を消す */
    border-bottom: 2px dotted #000; /* 点線を引く */
}


a:hover{
background-color: #000;
color:#fff
text-decoration: none;
}




body{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 2.0em;
    box-sizing: border-box;
    padding: 0em;
    margin: 0em;
    list-style-type: none;
    text-decoration:none;
}



    /* トップページ背景色 */
    --index-back-color: #fff;

    /* ヘッダー部背景色 */
    --header-back-color: var(--background-color);
 


    /* テキスト記事サムネイル用背景 */
    --background-text-thumb: url("../resource/text-back1.png");

    /* NSFW記事 サムネイル用背景 */
    --background-nsfw-thumb: url('../resource/nsfw.png');
}

/* ユーザー定義クラス 
　　トップページ・記事内で {s クラス名}~{/s} と記述することで、
　　<span class="user_クラス名">～</span>と同様の動作を行うことができます。

　　よく利用したい文字の色などのスタイルをクラスとして定義しておくと便利です。

    .user_から始まる名前でクラスを定義してください。
    たとえば.user_redクラスは {s red}～{/s}で使用できます。
*/
.user_red {
    color: #f00;
}

.user_green {
    color: #0f0;
}

.user_blue {
    color: #00f;
}

.user_bold {
    font-weight: 800;
}

/* 画像関連 */
.instraction-image {
    border-radius: 5px;
}

.view-image {
    border-radius: 5px;
    /* 好みに応じて有効化 サムネイルがくっきりします*/
    /* image-rendering: pixelated; */
}

/* グローバルヘッダー */
#global-header {
    background-color: #AAA;
    color: #fff;
}

#global-header a {
    color: #fff;
}

/* Markdown関連 */
ul.md {
    list-style: inside disc
}

ol.md {
    margin-left: 1.5em;
}

p.md {
    margin-bottom: 1em;
}

blockquote.md {
    border-left: 3px solid #CCC;
    padding-left: 1em;
}

code.md {
    background-color: #DDD;
    padding: 2px
}

pre.md code {
    display: block;
    overflow-x: scroll;
    background-color: #DDD;
    padding: 1em;
    border-radius: 5px;
    line-height: 1.3em;
    margin: 0.5em;
}

table.md {
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-radius: 5px;
    margin: 0.5em;
}

table.md td,
table.md th {
    border: 1px solid #ccc;
    padding: 10px;
}

table.md th {
    background-color: #f0f0f0;
    font-weight: bold;
}

/* 小説表示 */
.novel-body {
    font-size: 1em;
}

.novel-body-in {
    line-height: 200%;
}


<meta name="viewport" content="width=device-width, initial-scale=1">



.wrap{
max-width: 700px;
min-height: 100vh;
padding: 25px;
overflow: hidden;
margin: 50px auto 30px;
}

.wrap span{
display: inline-block;
margin-left: 10px;
    color: #888;
    font-size: .9em;

}


h1{
    font-family: "WDXL Lubrifont JP N", sans-serif;
    font-size: 30px;
    letter-spacing: 0.25em;
    line-height: 1.6em;
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #000000;
    }

/* 見出し */

h2 {
    font-family: "WDXL Lubrifont JP N", sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    display: inline-block;
    position: relative;
    transform: rotate(-5deg);
    padding: .3em .3em;
    border-left: 2px dotted rgba(0, 0, 0, .1);
    border-right: 2px dotted rgba(0, 0, 0, .1);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    background-color: #000;
    color: #ffffff;
}


h3{
    font-family: "WDXL Lubrifont JP N", sans-serif;
    font-weight: normal;
    font-size: 1.2em;
}

h3:first-letter {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-size: 1.7em;
  font-weight: normal;
    display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
   text-shadow    : 
       1px  1px 0px #000000,
      -1px  1px 0px #000000,
       1px -1px 0px #000000,
      -1px -1px 0px #000000,
       1px  0px 0px #000000,
       0px  1px 0px #000000,
      -1px  0px 0px #000000,
       0px -1px 0px #000000;        /* 文字の影 */
;
}


h4 {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-weight: normal;
   font-size: 1.2em;
  border-bottom: solid 3px #0088ff;
  position: relative;
}

h4:after {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-size: 1.2em;
  font-weight: normal;
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ff9100;
  bottom: -3px;
  width: 30%;
}


/* 全てのブラウザ共通（Firefoxなど） */
summary {
  list-style: none;
}

/* Safari, Chrome, Edge（WebKit系） */
summary::-webkit-details-marker {
  display: none;
}



/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 20px;
overflow: hidden;
}


.section span{
display: inline-block;
font-family: 'Unica One', 'Noto Sans JP', sans-serif;
margin-left: 10px;
    color: #888;
    font-size: .9em;

}


.box{
   margin: 1em auto; /* 外側余白 */
   padding: 1em ; /* 内側余白 */
   background-color:#fff; /* 背景色 */
   max-width: 700px; /* 最大幅 */
}




.page{
font-family: 'Unica One', sans-serif;
text-align: center;
padding-top: 70px;
}

.page a{
font-family: 'Unica One', sans-serif;
padding: 0 10px;
}



/*INDEXページの幅変更*/
#index-base {max-width: 600px;}
 
/*個別の記事ページの幅の変更・角丸処理をなくして上下ピッチリにしたもの*/
#base {
max-width: 600px;
margin: 0 auto 0 auto;
display: flex;
min-height: calc(100vh - 3em);
flex-direction: column;
border-radius: 0px;
padding: 1em;
 }





/*バナーの位置調整*/
@media (min-width: 1200px) {
    #link_banner {
    width: 200px;
    position: relative;
    left: 380px;
    }
}


/*ヘッダー部分の幅も合わせる場合は以下も記述*/
#header {
max-width: 600px;
margin: 0 auto 0 auto;
}

#global-header {
max-width: 600px;
margin: 0 auto 0 auto;
background-color: var(--base-back-color);
color: #777;
}

/* 登録フォーム用 ver.5.6 over */

/* ▼基礎 */
:where(form.changeName){

	/* ★カスタム */
	--form-background: transparent; /* inputとselectの背景 */
	--form-color: inherit; /* inputとselectの文字色 */
	--form-padding: 2px; /* inputとselectの内側余白 */
	--form-border: 1px solid; /* inputとselectのボーダー */
	--form-border-radius: 3; /* inputとselectの角丸具合 */
	--form-focus-outline: 2px solid hsl(210 75% 80%); /* inputとselectのフォーカス時のアウトライン */

	--button-background: #111;  /* buttonの背景 */
	--button-color: #FFF;  /* buttonの文字色 */
	--button-padding: 3px;  /* buttonの内側余白 */
	--button-border: 0;  /* inputとselectの背景 */
	--button-border-radius: 10;  /* buttonの角丸具合 */
	--button-focus-outline: 2px solid hsl(210 75% 80%); /* buttonのフォーカス時のアウトライン */

	--layout-gap: .5em; /* 共通余白 */

	--btn-input: 'input'; /* 保存ボタンの文言 */
	--btn-reset: 'reset'; /* 削除ボタンの文言 */

	--message-bg: #000; /* JSのactionメッセージ背景 */
	--message-font: #fff; /* JSのactionメッセージ文字色 */
	--message-border: none; /* JSのactionメッセージボーダー */

	/* ★ベースCSS */

	width:fit-content; max-width: 100%; margin: .5rem 0; box-sizing: border-box;

	& :where(:is(fieldset,legend, ul, p, div)){
		margin:0; padding:0; border:none; background: transparent none;
		font-weight: normal; font-style: normal; box-sizing: border-box; 
	}

	& :where(fieldset){
		min-inline-size: 0;
	}

	& :where(legend){
		font-weight: 600;
		margin-bottom:var(--layout-gap, .5em);
	}

	& :where(:is(ul,li)){
		list-style: none; 
	}

	& :where(:is(input,select,option, button)){
		vertical-align: middle;
		font-size: 100%; font-family:inherit;
		max-width: 100%; line-height:1; box-sizing: border-box; 
	}

	& :where(:is(label, select, button, input[type="submit"])){
		cursor:pointer; 
	}

	& :is(input[type="text"], select){
		background: var(--form-background);
		color: var(--form-color);
		padding: var(--form-padding);
		border: var(--form-border);
		border-radius: var(--form-border-radius);
		&:is(:focus-visible, :active){ outline: var(--form-focus-outline); }
	}

	& button{
		touch-action:manipulation;
		background: var(--button-background);
		color: var(--button-color);
		padding: var(--button-padding);
		border: var(--button-border);
		border-radius: var(--button-border-radius);
		&:is(:focus-visible, :active){ outline: var(--button-focus-outline); }
	}

	& :where(.dream-noCookie){ 
		margin-bottom: .5em; font-size: small; 
	}

	& ul:not([class]){ 
		display: grid; gap: var(--layout-gap, .5em);
		align-items: center;
		&>li{
			display:flex; align-items: center; gap: 0 var(--layout-gap); 
			& label{ font-size:82%; line-height:1.2;  }
		}
	}

	& .process{
		margin-top: var(--layout-gap, .5em);
		display: flex; flex-flow: row nowrap;
		justify-content: center; align-items: center;
		gap: var(--layout-gap, .5em);
		&>li:first-child{ order: 1;}
		& button{ white-space: nowrap; }
	}

	& #dreamphp-save-message[popover]{
		position: fixed; inset: 2vw 0 auto; 
		margin:auto; padding: .5em; line-height:1; 
		background: var(--message-bg); color: var(--message-font); border: var(--message-border);
		animation: openAnimation .5s;
		&.dreamphp-message-close{
			 animation: closeAnimation .5s forwards; 
		}
	}

	&.dreamphp-action ul:not([class]){
		animation: .8s saveAnimation;
	}
}

@keyframes saveAnimation {
	0% { opacity:0; }
	100%{ opacity:100%; }
}
@keyframes openAnimation {
	0% { opacity:0; transform: translateY(calc( -3em + 2vw)) }
	100%{ opacity:100%; transform: translateY(0) }
}
@keyframes closeAnimation {
	0% { opacity: 100%; transform: translateY(0) }
	100%{ opacity: 0; transform: translateY(calc( -3em + 2vw)) }
}
/* 提供既定デザイン ==================== */
div:has(form.changeName){

	/* ★カスタム */
	--form-width: 4em; /* レイアウトがflex時のinputやselectの横幅 */
	--label-width: 3em; /* ラベル位置がフォームの左or右のときのラベル横幅 */

	/* ★内容 */
	&.dreamphp-layout-flex{ 
		ul:not([class]){
			display:flex;flex-flow:row wrap;
			:is(input,select){ width:var(--form-width); }
		}
		&.dreamphp-position-center{
			ul:not([class]){justify-content:center}
		}
		&.dreamphp-position-right {
			ul:not([class]) { justify-content: end }
		}
	}
	&.dreamphp-layout-repeat form.changeName {
		width: auto;
		& ul:not([class]) {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(calc(var(--label-width, 3em) + 4em), 1fr));
			:is(input, select) { width: 100% }
		}
	}
	&.dreamphp-layout-1column ul:not([class]) {
		grid-template-columns: 1fr;
		:is(input, select) { width: 100% }
	}
	&.dreamphp-layout-2column ul:not([class]) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		:is(input, select) { width: 100% }
	}
	&.dreamphp-layout-3column ul:not([class]) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		:is(input, select) { width: 100% }
	}
	&.dreamphp-label-top ul:not([class])>li {
		flex-flow: column nowrap;
		align-items: start
	}
	&.dreamphp-label-bottom ul:not([class])>li {
		flex-flow: column-reverse nowrap;
		align-items: start
	}
	&.dreamphp-label-left ul:not([class])>li,
	&.dreamphp-label-right ul:not([class])>li {
		flex-flow: row nowrap; align-items: center;
		& label { width: var(--label-width, 4em); text-align: right }
		& :is(input, select) { flex: 1 1 5em }
	}
	&.dreamphp-label-right ul:not([class])>li {
		& label { order: 1; text-align: left }
	}
	&.dreamphp-process-center .process {
		justify-content: center
	}
	&.dreamphp-process-right .process {
		justify-content: flex-end
	}
	&.dreamphp-process-left .process {
		justify-content: flex-start
	}
	&.dreamphp-process-between .process {
		justify-content: space-between
	}
	&.dreamphp-process-column fieldset {
		display: grid; gap: 15px;
		grid-template-columns: 1fr fit-content(20%);
		align-items: end
	}
	&.dreamphp-position-left form {
		margin-left: 0;
		margin-right: auto
	}
	&.dreamphp-position-right form {
		margin-left: auto;
		margin-right: 0
	}
	&.dreamphp-position-center form {
		margin-left: auto;
		margin-right: auto
	}
	&.dreamphp-process-column fieldset legend, &.dreamphp-legend-hidden legend {
		position: fixed!important;
		top: 0;
		left: 0;
		width: 4px!important;
		height: 4px!important;
		opacity: 0!important;
		overflow: hidden!important;
		border: none!important;
		margin: 0;
		padding: 0;
		display: block!important;
		visibility: visible!important
	}
	&.dreamphp-button-editer {
		& ul.process button {
			span { display: none }
			&[value="input"]::before { content: var(--btn-input) }
			&[value="reset"]::before { content: var(--btn-reset) }
		}
	}
}