@charset "utf-8";

:root {
    --cat-color: #2D304D;
    --door-shadow: gray;
    --nano-white: rgba(247, 251, 254, 1);
    --bg-color: rgba(218, 236, 243, 1);
    --h2-color: #D788AF;
    --font-zen: 'Zen Maru Gothic', sans-serif;
    --diary-radius: 11px;
    --head-radius: 6px;
}

/* タイトル */
h1 {
    font-family: var(--font-zen);
    font-weight: 700;
    font-size: 1.7rem;
}

/* 見出し */
h2 {
    color: #fffef9;
    font-family: var(--font-zen);
    font-weight: 700;
    font-size: 1.4rem;
    background-color: var(--cat-color);
    border-radius: 20px;
    padding: 13px 1em;
    margin-bottom: 1.3rem;
}

/* 小見出し */
h3 {
    font-family: var(--font-zen);
    font-weight: 700;
    font-size: 1.3rem;
    border-bottom: 3px dotted var(--cat-color);
    margin-bottom: 0.5rem;
}

h4 {
    font-size: 1rem;
    font-weight: normal;
    border-bottom: 2px solid #ccc;
}

/* リンク */
.diary a {
    color:#20959D;
    text-decoration: underline;
}

.diary a:hover {
    transition-duration: 0.15s;
    opacity: 60%;
}

summary::-webkit-details-marker {
    /* Safariで表示されるデフォルトの三角形アイコンを消します */
    display: none;
  }

/* ---------------------カスタム--------------------- */
main {
    margin: 0 auto;
}

body {
    background-color: var(--bg-color);
    background-image: url(../img/bg/mainbg4.png);
    background-size: 330px;
}

.diarybox {
    width: fit-content;
    max-width: 100%;
    background-color: var(--nano-white);
    margin: 0 auto;
    padding: 2.5rem 2rem 2.5rem 2.5rem;
    border-radius: var(--diary-radius);
}

.diary {
    width: 960px;
    max-width: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 2.5rem;
}

.diary-head {
    width: 300px;
    max-width: 100%;
    margin: 20px auto 40px;
    text-align: center;
    color: var(--h2-color);
    padding: 0px 10px 5px;
    border-radius: var(--head-radius);
    border: 2px solid var(--h2-color);
    background-color: var(--nano-white);
    box-shadow: 1px 2px 5px var(--door-shadow);
}

.diary-head h1 {
    font-weight: 900;
    font-size: 2rem;
    margin-bottom: 5px;
}

.diary section article {
    margin-bottom: 450px;
}

.diary section article:last-child {
    margin-bottom: 0px;
}

/* 記事 */
.title {
    margin-bottom: 1.65rem;
}

.title h1 {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #ccc;
}

.time {
    color: #555;
    text-align: right;
}

time::before {
    content: '📅 ';
    font-family: Segoe UI Symbol;
}

/* あいさつ＆本文*/
.diary article section {
    line-height: 1.95;
}

.diary article section {
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.5rem;
}

.diary article section:last-of-type {
    margin-bottom: 4rem;
}

.diary article section p {
    margin-bottom: 2rem;
}

.diary article section img {
    max-width: 70%;
    border-radius: var(--head-radius);
}

/* コメント欄 */
.comment {
    font-size: 15px;
    padding: 0.8em 1em 1em;
    outline: 2px solid #ccc;
}

.comment h4 {
    font-size: 1em;
    font-weight: bold;
    border-bottom: none;
    margin-bottom: 1em;
}

.comment dl {
    line-height: 1.4;
}

.comment dt {
    font-weight: bold;
    color: #20959D;
    margin-bottom: 0.1em;
}

.mihomiho::before {
    content: '🦦';
}

.nayu::before {
    content: '🐌';
}

.millia::before {
    content: '🐱';
}
.kametaka::before{
    content: '🐢';
}
.aya::before{
content: '🐦‍🔥';
}

.commentTime {
    font-size: 0.9em;
    text-align: right;
}

.comment p {
    margin-top: 1.95rem;
    text-align: right;
}

/* ページ */
.page * {
    margin: 0 auto;
}

.page {
    margin-top: 150px;
}

.page ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.nashi{
    visibility: hidden;
}
/* アサイドエリア */
aside {
    font-size: 14px;
}

aside>div {
    margin-bottom: 2rem;
}

aside li,
h4 {
    line-height: 1.65;
}

#calendar * {
    margin: 0 auto;
}

/* ボタンレイアウト */
.link-btn-area {
    margin: 80px auto 40px;
}

@media (max-width: 800px) {
    body {
        background-size: 220px;
    }

    .diarybox {
        padding: 1rem;
    }

    .diary {
        display: block;
    }

    .diary-head {
        margin: 16px auto 40px;
    }

    .diary section article:last-of-type {
        margin-bottom: 0px;
    }

    .diary article section img {
        max-width: 100%;
    }

    .comment {
        font-size: 14px;
        padding: 0.8em 0.8em 1em;
    }

    .page {
        margin: 60px auto 36px;
    }

    #calendar {
        display: none;
    }

}