@charset "utf-8";

@media (max-width: 767px) {
  .sp-hide {
    display: none;
  }
    body {
    	font-family: 'Noto Serif JP', sans-serif;
        line-height: 1.8;
        padding : 0;
        width: 100%;
        margin: 0;
        background-color: #fff;
    }
    heading {
    	position: fixed; left:2em; right:2em; top:0;
	    margin:0;
        background-color: #fff;
    }
    img {
        width:200px;
    }
    figure {
        text-align:center;
    }    
    main {
        padding-top:5em;
    }
}

@media (min-width: 768px) {
    .pc-hide {
        display: none;
    }
    body {
    	font-family: 'Noto Serif JP', sans-serif;
        line-height: 1.8;
        padding : 0;
        width: 50em;
        margin: 0 auto;
        background-color: #fff;
        font-weight: 500;
    }
    heading {
    	position: fixed; left:2em; right:2em; top:0;
	    margin:0;
        padding-left:1em;
        padding-right:1em;
        width: 50em;
        left: 50%; /* 左端を50%の位置に移動 */
        transform: translateX(-50%); /* 自身の幅の半分だけ左に戻す */
        background-color: #fff;
    }
    img {
        width:40%;
    }
    figure {
        text-align:center;
    }
    main {
        padding-top:6em;
    }
}

@media (min-width: 1367px) {
    body {
        font-size: 1.3em;
    }
}

body i{
	font-size:1em;
}

p {
	vertical-align: middle;
}

.back {
	bottom: 10px;
	right: 10px;
}
.w200 {
	font-weight: 200;
}
.w300 {
	font-weight: 300;
}
.w400 {
	font-weight: 400;
}
.w500 {
	font-weight: 500;
}
.w600 {
	font-weight: 600;
}
.w700 {
	font-weight: 700;
}
.w900 {
	font-weight: 900;
}

.size3 {
	font-size: 3em;
}

.size80p {
	font-size: 80%;
}

.preface {
	padding-top:2em;
}

.flex-right {
	margin-left: auto;
}

.text-align-right {
	text-align:right;
}

.text-align-center {
	text-align:center;
}

a {
	color:black;
}

.global-menu {
	margin-top:0;
	margin-bottom:0.4em;
	margin-left:0;
	margin-right:0;
    padding:0;
	text-align:center;
}

#articleIndex td {
    align-items: center; /* 上下中央揃え */
    font-weight:normal;
    text-align:left;
    padding-left:0.2em;
    padding-right:0.2em;
    padding-top:0.5em;
    padding-bottom:0.5em;
}

#articleIndex a {
	text-decoration: none;
}

.author {
    font-size:0.5em;
    font-style: italic;
}

.select-menu {
    border : 2px solid;
    margin-top:0;
	margin-bottom:0.4em;
	margin-left:0;
	margin-right:0;
    padding:0;
}

.heading-title {
	display:flex;
	align-items: center;
	justify-content: space-between;
	margin-top:0;
    padding:0;
}

.heading-menu {
	display:flex;
	align-items: flex-end;
	justify-content: space-between;
	margin:0;
    padding:0;
    border-bottom: 2px solid #000;
}

.heading-subtitle {
	font-weight: 700;
	font-size: 0.5em;
    font-style: italic;
    vertical-align: top
	margin:0;
	padding-top:0;
	padding-bottom:0;
	padding-left:0;
	padding-right:0;
}

#articleTags {
	text-align:center;
}

#articleTags span {
	padding-left:0.5em;
	padding-right:0.5em;
}

#ymSelecter,#categorySelecter {
	padding-right:0.4em;
}

.prev-next-full ,
.prev-next-buttonOnly {
  display: flex;
  justify-content: center; /* 要素を両端に配置 */
  align-items: center; /* 垂直方向の中央揃え */
  width:100%
}

.prev-next-prev{
  order:-1;
}

.prev-next-index{
  order:0;
}

.prev-next-next{
  order:1;
}

.prev-next-full a {
	text-decoration: none;
}

#indexButton {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.footer {
    border-top: 1px solid #000;
	text-align:center;
	margin-top:1em;
	margin-bottom:2em;
	margin-left:0;
	margin-right:0;
}

.current-menu {
    font-weight: 700;
}

.disable-menu {
    text-decoration: none;
    color:lightgray;
}

.prose p{
    text-align:center;
}

.prose img , .diary img {
  border: 5px solid #ccc; /* 薄いグレーの枠線 */
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); /* ほんのりとした影 */
}

.column img {
  border: 3px solid #ccc; /* 薄いグレーの枠線 */
}


.diary p{
    text-align:left;
}

.column p{
    text-align:left;
}

.text-icon {
  border: 1px solid #606060;
  padding: 0.1em;
  background-color: whitesmoke;
  font-family: 'Noto Sans JP';
  font-size:0.7em;
}

h1 {
	font-weight: 700;
	font-size: 2em;
	margin:0;
	padding-top:0;
	padding-bottom:0;
	padding-left:0;
	padding-right:0;
}

h1 a {
    text-decoration: none;
}

h2 {
	font-weight: 700;
	font-size: 1.2em;
	margin:0;
	margin-top:0;
	margin-bottom:0.4em;
	margin-left:0;
	margin-right:0;
	padding:0;
}

h3 {
	font-weight: 700;
	font-size: 1em;
}

h4 {
	font-weight: 500;
	font-size: 1em;
    text-decoration:underline;
}

main {
    margin:0;
    padding-bottom:2em;
    padding-left:2em;
    padding-right:2em;
    color:black;
}

select {
  -webkit-appearance: none; /* Safari, Chrome */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* 標準 */
  border:none;
  background-color: #fff;
}

ul {
    margin: 0;
    padding: 0;
}

ul li{
	display:flex;
}

li div {
	padding:0.2em;
}

table caption {
	text-align: left;
	font-weight: 700;
	font-size: 1em;
}

figcaption {
    font-family: 'Noto Sans JP';
    font-size:0.8em;
}

i {
    padding-right:0.2em;
}

/* ドロップダウン */
/* ドロップダウンの親コンテナ */
.dropdown-container {
  position: relative;
  width: 6em;
  /*font-family: sans-serif; */
}

/* ドロップダウンのヘッダー部分 */
.dropdown-header {
  padding: 0.2em;
 /* border: 1px solid #ccc; */
 /* background-color: #f9f9f9; */
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size:2em;
}

/* ドロップダウンリストのスタイル */
.options-list {
  display: none; /* JavaScriptで表示/非表示を切り替え */
  position: absolute;
  top: 100%; /* ヘッダーのすぐ下に配置 */
  left: 0;
  width: 100%;
  list-style: none; /* リストの&#9679;を非表示に */
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  /*border-top: none;*/
  background-color: white;
  z-index: 1000; /* 他の要素より手前に表示 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* リストアイテムのスタイル */
.options-list li {
  padding: 0.2em;
  cursor: pointer;
}

.options-list li:hover {
  background-color: #f0f0f0;
}
