@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600&display=swap'); /* 英数フォント */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;800&display=swap&subset=japanese'); /* 日妨譽侫⑤鵐 
千逅闥讎ц頌痕粮褥跫肚癇絎竢躁瘧癢蛯鶩肬銓〟齒辣〟㍗㍗齠跛蜴齠З アイコンフォント */

/* 変数 */



:root {
    --bg-color: #231f21;
    --main-font-color: #e6e6e6;  /*文字色*/
    --ac-color: #e5c1cd;    /*アクセントカラー*/
    --ac2-color: #dddddd;   /*アクセントカラー２*/
}

/* 全体装飾 */ 

* {
    margin: 0;
    padding: 0;
    
	letter-spacing: 0.1em;
}

body {
font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
    color: var(--main-font-color);}


a:link {
    color: #e2a0de;
    text-decoration: none;}
a:visited { color: var(--main-font-color); }
a:hover {
    color: var(--main-font-color);
    text-decoration: underline;}
 {
  position: relative;
}

.hover-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #333;
}

/* アンダーライン本体 */
.hover-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: currentColor;

  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* hover時 */
.hover-underline:hover::after {
  transform: translateX(-50%) scaleX(1);
}
    
.url {
	word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
}
hr{
border: none;
border-top: 1px solid;
margin: 0px 0px 13px 0px;
}

/* ヘッドライン */

.date{
padding: 0;
margin: 0:
text-align:center;
}
.category {
      display: inline-block;
      width: 4em;
      line-height: 1.1;
}
h1,h2,h3,h4,h5,h6{
	margin: 0.3em;
	padding: 0;
	text-align: left;
	display: block;
}


h1{
	margin: 0.3em 0.3em 0.3em 0;
	font-weight: bold;
	font-family: Georgia, 'Times New Roman', Times, serif;
}


h2{
	font-size: 1.2em;
	line-height: 1.5em;
}

/* 小技 */

.right{
	text-align: right;
}

.center{
	text-align: center;
}

.left{
	text-align: left;
}

.two-column{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 60px;}

/* タブレット、スマホでは１カラム */
@media screen and (max-width: 768px) {
	.two-column {
	  grid-template-columns: 1fr;
	}
  }

input{
	padding: 0 0.5em;
}


span.searchinputs{
	display: inline-block;
	margin: 0 0 0.3em 0;
}


.flex{
	display: flex;
	justify-content: flex-end;
}

a.btn{
	display: inline-block;
	margin: 0 0.25em;
	padding: 0 1em;
	flex-direction: row;
	background-color: var(--ac-color);
	text-decoration: none;
	color: var(--bg-color);
	text-align: center;
	line-height: 2em;
	border-radius: 1em;
	height: 2em;
}


a.btn:hover{
	background-color: var(--ac2-color);
	color: var(--ac-color);
}


/* フレーム */


main{
    margin: 10px;
    padding: 0;
}

li.update {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  font-size: 18px;
}





/* スマホ */
@media screen and (max-width: 520px) {
  .update {
    flex-flow: row wrap;
    grid: repeat(2, 2em) / auto-flow 3em;
    gap: 4px 9px;

font-size: 9px;

  }

  .update time{
    width: 3em;
    height: 1em;
  }

  .update > div{
    width: calc( 100% - 6em - 13px );
    height: 2em;
   
  }

  .update > span{
    width: 100%;
  }

}

@media (prefers-color-scheme: dark) {

  body {
    background-color: #231f21;
    color: #e6e6e6;
  }

  /* 通常リンク */
  a:link,
  a:visited {
    color: #e5c1cd;
  }

  /* ←ここを分離する */
  a:hover,
  a:active {
    color: #e6e6e6;
  }

}