@charset "UTF-8";

/* 共通部分
--------------------------------- */
html {
    font-size: 100%;
    overflow-y: scroll;
}
body {
    color: #303e55;
    background-color: #FBFAF5;
    /*font-family: "ＭＳ ゴシック", sans-serif;*/
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    letter-spacing: 0.09rem;
}
img {
    width: 127px; height: 180px;
    border: solid 1px #e0d9da;
}
a {
    color: #303e55;
    text-decoration-thickness: from-font;
}
a:visited{
    color: #998e91;
}
.wrapper{
    max-width: 700px;
    margin: 0 auto; /* コンテンツを中央に配置 */
    font-size: 0.9rem;
    margin-top: 100px;
}
hr {
    border-top: 1px solid #303e55;
}

/* サイト名 */
h1 {
    font-size: 1.6rem;
    width: 400px;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 1rem;
}

/* 各ページ見出し（二重線） */
h2 {
    font-size: 1rem;
    font-weight: lighter;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
    padding: 0 55px;
}
h2:before, h2:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 2.8px;
    border-top: solid 1px #303e55;
    border-bottom: solid 1px #303e55;
  }
  h2:before {
    left:0;
  }
  h2:after {
    right: 0;
  }
  .midashi {
    text-align: center;
}
/* 散文・詩タイトル */
  h3 {
    font-size: 1rem;
    font-weight: bolder;
    margin-top: 10px;
    margin-bottom: 20px;
}
/* 発行物タイトル */
h4 {
  font-size: 1rem;
  font-weight: ;
  color: #303e55;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dashed 1px #303e55;
}

/* ヘッダー
--------------------------------- */
.title a {
    text-decoration: none;
}
.title a:visited {
    color: #303e55;
}
.main-nav {
    display: flex;
    font-size: 1rem;
    margin-top: 50px;
    list-style: none;
    justify-content: space-around;
}
.main-nav a:visited {
    color: #303e55;
}

/* トップ
--------------------------------- */
.info ul {
    list-style: none;
}
.info li {
    margin-bottom: 50px;
}
.date {
    font-weight: bold;
}
summary {
	list-style-type: none;
}
summary::-webkit-details-marker {
	display: none;
}
summary:before {
	content: "▽　";
}
details[open] summary:before,
summary details[open] summary:before {
	content: "▼　";
}

/* プロフィール
--------------------------------- */
.prof {
    margin-bottom: 100px;
}
.list {
    text-indent: -1em;/*2行目以降の字下げ調整*/
    padding-left: 1em;/*2行目以降の字下げ調整*/
}
.listop {
    margin-top: 3px;
}
span {
    display: inline-block;/*画面幅に合わせて改行*/
    }

/* 散文
--------------------------------- */
.text li {
    margin-bottom: 20px;
}
.text p {
    margin-bottom: 20px;
}

/* 発行物
--------------------------------- */
article {/*紹介文*/
    width: 70%;
    margin-top: 20px;
}
aside {/*画像*/
    width: 25%;
    margin-top: 20px;
}
.book {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

/* フッター
--------------------------------- */
.fot {
    padding-top: 100px;
    padding-bottom: 30px;
}
.copy {
    font-size: 0.9rem;
    text-align: center;
}

/* スマホ版
--------------------------------- */
@media (max-width: 600px) {
    body {
        line-height: 1.5;
        letter-spacing: 0.09rem;
    }
    img {
        width: 100px; height: 141px;
    }
    .wrapper{
        max-width: 300px;
        margin: 0 auto; /* コンテンツを中央に配置 */
        font-size: 0.8rem;
        margin-top: 70px;
    }
    h1 {
        font-size: 1.05rem;
        width: 100%;
        letter-spacing: 0.6rem;
    }
    h2 {
        font-size: 0.85rem;
    }
    h3 {
        font-size: 0.85rem;
    }
    h4 {
        font-size: 0.85rem;
    }
    a {
        text-decoration-thickness: 1px;
    }
    .main-nav {
        font-size: 0.8rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 25px;
    }
    .main-nav li {
        margin: 0px 10px;
    }
    .listop {
        margin-top: 10px;
    }
    .text li {
        margin-bottom: 10px;
    }
    .book {
        flex-direction: column;/*画像と紹介文を縦に並べる*/
        margin-bottom: 5px;
    }
    article {
        margin-top: 30px;
        width: 100%;
    }
    aside {
        margin-top: 5px;
        width: 100%;
        text-align: center;
    }
    .copy {
        font-size: 0.65rem;
    }
}