/*
Theme Name: 100ku100you
Author: Katsutoshi Matsunaga
Author URI: https://grey-heron.ne.jp/
Description: A theme for 100ku100you.
Version: 1.0
License: GNU General Public License
*/

/* --------------------------------------------------------------
	Reset Default Browser CSS
-------------------------------------------------------------- */

html {
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

:focus {
    outline: 0;
}

body {
    line-height: 1;
    background-color: #fcfcfc;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    font-weight: normal;
    text-align: left;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: """";
}

a img {
    border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

table {
    border-collapse: collapse;
}

sup, sub {
    z-index: -1;
}



/* --------------------------------------------------------------
	Structure
-------------------------------------------------------------- */

html {
    font-size: 100%;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}

body>div:first-child {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main,
#content,
article {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    font-size: 1rem;
    color: #333;
    text-align: justify;
}

#content {
    max-width: 100%;
}

img {
    max-width: 100%;
    max-height: 100%;
}


/* --------------------------------------------------------------
	Contents
-------------------------------------------------------------- */

body {
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
    font-weight: 400;
    font-family: "RocknRoll One", "Noto Sans JP", sans-serif;
    color: #5858a7;
}

h1 {
    margin: 4.5rem auto 4.5rem;
    font-size: 2.2rem;
    text-align: center;
    letter-spacing: 0.1rem;
}

h2 {
    margin: 3.5rem 0 1.2rem;
    font-size: 1.4rem;
    text-align: left;
}

h3 {
    margin: 3rem 0 1.2rem;
    font-size: 1.2rem;
    text-align: left;
}

h4 {
    margin: 2rem 0 1.1rem;
    font-size: 1rem;
    text-align: left;
}

h1 span, h2 span, h3 span, h4 span {
    font-size: 1rem;
    font-weight: 400;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
    color: #000;
}

p {
    margin: 0 auto 1.8rem;
    font-size: 1rem;
    color: #000;
    text-align: justify;
    line-height: 1.8;
}

blockquote {
    margin: 1rem 0;
    padding: 0 30px;
    border: 1px solid #ddd;
    color: #555;
    background: #fcfcfc;
}

hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid #bbb;
    clear: both;
}

pre {
    padding: 10px 20px;
    border-left: 6px solid #ddd;
    background-color: #f5f5f5;
    overflow: auto;
    width: 90%;
}

span.italic,
em {
    font-style: italic;
}

span.bold,
strong {
    font-weight: bold;
}

sup {
    font-size: 0.7em;
    vertical-align: top;
    top: 0;
}

sub {
    font-size: 0.7em;
    vertical-align: bottom;
    top: -0.3rem;
}

b {
    font-weight: 600;
}

img.alignleft {
    display: inline-block;
    width: 48%;
    float: left;
    margin: 0.5rem 2.5rem 2rem 0;
}

img.alignright {
    display: inline-block;
    width: 48%;
    float: right;
    margin: 0.5rem 0 2rem 2.5rem;
}

li {
    margin: 0.5rem 0 0.5rem 2rem;
}

span.url-break {
    word-break: break-all;
}

span.nbsp_1 {
    padding-left: 1rem;
}

span.nbsp_2 {
    padding-left: 2rem;
}


/* --------------------------------------------------------------
	Link
-------------------------------------------------------------- */

a {
    text-decoration: none;
    box-shadow: none;
}

a:focus,
a:hover {
    outline: none;
    border: none;
}

a:link,
a:visited {
    color: #3b87d9;
}

a:hover,
a:active {
    color: #0000ff;
}

a:link img,
a:hover img,
a:active img,
a:visited img {
    border: none;
    outline: none !important;
}


/* --------------------------------------------------------------
	Header
-------------------------------------------------------------- */

header {
    margin: auto;
    padding: 0;
}

#branding {
    width: 100%;
    margin: 0 auto;
}

#header-content {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-image: url("../images/header-desktop.jpg");
    background-position: center center;
    background-repeat: repeat;
    will-change: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
}

#logo-group {
    position: relative;
    display: flex;
    margin: 0 auto;
    text-align: center;
}

#header-logo {
    position: relative;
    display: flex;
    width: 284px;
    height: 200px;
}

#header-text {
    margin: 0 auto;
    width: 1080px;
    height: 283px;
}

h1#site-title {
    padding: 0;
    text-align: left;
    font-size: 3.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1rem;
    font-family: "RocknRoll One", "Noto Sans JP", sans-serif;
}

h1#site-title a:link,
h1#site-title a:hover,
h1#site-title a:active,
h1#site-title a:visited {
    color: #fff;
    text-shadow: 0 0 4px #000;
}


/* --------------------------------------------------------------
	Navigation (メニュー)
-------------------------------------------------------------- */

/* 共通設定 */
#menu-desktop,
#menu-phone {
    width: 100%;
    height: 50px;
    background: #c9e5b7;
    border: none;
}

nav.navi {
    margin: 0 auto;
    width: 1000px;
}

.navi ul {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}

.navi ul a {
    display: block;
    color: #333;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
    padding: 17px 0;
    font-family: "RocknRoll One", "Noto Sans JP", sans-serif;
}

.navi ul li {
    position: relative;
    margin: 0;
    padding: 0;
}

.navi ul li:hover {
    background: #f6f6f6;
}

/* デスクトップメニュー */
#menu-desktop {
    background: linear-gradient(180deg, #f0f0f0 0%, #dddddd 60%, #cccccc 100%);
}

#menu-desktop > nav > ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
}

#menu-desktop > nav > ul > li {
    display: block;
    margin: 0;
    padding: 0;
    height: 50px;
    line-height: 50px;
    flex-grow: 0;
    text-align: center;
}

#menu-desktop > nav > ul li a {
    padding: 17px 2rem;
}

#menu-desktop .navi ul li:hover {
    background: linear-gradient(180deg, #dadada 0%, #c0c0c0 60%, #a0a0a0 100%);
}

#menu-desktop .navi ul li#search-wrap:hover {
    background: linear-gradient(180deg, #f0f0f0 0%, #dddddd 60%, #cccccc 100%);
}

#menu-desktop .navi ul li a:hover {
    color: #fff;
    text-shadow: 1px 1px #000;
}

/* デスクトップ - サブメニュー */
.navi ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #eaf7ec;
    padding: 0;
}

.navi ul ul li {
    float: none;
    width: 200px;
    border: 1px #c9e3cd solid;
    text-align: left;
}

.navi ul ul a {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.3;
    font-weight: 300;
    padding: 0 1rem;
    text-align: left;
    width: 168px;
    height: 100%;
    font-family: "RocknRoll One", "Noto Sans JP", sans-serif;
}

.navi ul li:hover > ul {
    display: block;
}

/* モバイルメニュー - 初期状態で非表示 */
#menu-phone {
    display: none;
}


/* --------------------------------------------------------------
	Footer
-------------------------------------------------------------- */

#colophon {
    margin-top: 3rem;
    padding: 1.6rem 0;
    background: linear-gradient(180deg, #f0f0f0 0%, #dddddd 60%, #cccccc 100%);
    border-top: 1px solid #ccc;
}

#site-info {
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
}

#colophon,
#site-info a:link,
#site-info a:visited {
    color: #333;
}

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

div#main {
    flex: 1;
}


/* --------------------------------------------------------------
	contents
-------------------------------------------------------------- */

p.haiku {
    font-size: 1.2rem;
    font-weight: 400;
    font-family: "RocknRoll One", "Noto Sans JP", sans-serif;
}

article p.haiku span {
    padding-left: 2rem;
}

div#content article img.vertical {
    width: 40%;
    float: right;
    margin: 1.2rem 0 4rem 3rem;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
}

div#content article img.horizontal {
    width: 50%;
    float: right;
    margin: 1.2rem 0 4rem 3rem;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
}

div#content article::after {
    content: "";
    display: block;
    clear: both;
}


/* --------------------------------------------------------------
	Archive
-------------------------------------------------------------- */

h1.cat-header,
h1.arc-header {
    margin: 4.5rem auto 3rem;
    text-align: center;
    letter-spacing: 0.1rem;
    font-weight: bold;
    font-size: 2.2rem;
    font-weight: 400;
    font-family: "RocknRoll One", "Noto Sans JP", sans-serif;
    color: #5858a7;
    pointer-events: none;
}

#cat-button {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}

#cat-button button {
    flex: 1 0 auto;
    min-width: 100px;
    padding: 0.7rem;
    margin: 0.5rem;
    background: linear-gradient(135deg, #fff 0%, #eef 40%, #dde 100%);
    box-shadow: 2px 2px 3px #bbb;
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #444;
    font-size: 18px;
    text-align: center;
    box-sizing: border-box;
}

.arc-table {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 3rem auto 0;
}

.arc-table li {
    flex: 1 0 auto;
    min-width: 100px;
    margin: 0.5rem;
    background: linear-gradient(135deg, #fff 0%, #eee 40%, #ddd 100%);
    box-shadow: 2px 2px 3px #bbb;
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #444;
    font-size: 18px;
    text-align: center;
    box-sizing: border-box;
}

.arc-table li a {
    display: block;
    padding: 1rem;
}

.arc-table li.cat-mark {
    background: linear-gradient(150deg, #aab 0%, #779 60%, #446 100%);
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}

.cat-button button:hover,
.cat-button button:focus,
.arc-table li:hover,
.arc-table li:focus,
.arc-table li.cat-mark:hover,
.arc-table li.cat-mark:focus {
    background: linear-gradient(150deg, #aba 0%, #797 60%, #464 100%);
}

.arc-table li a:link,
.arc-table li a:focus,
.arc-table li a:visited {
    color: #444;
}

.cat-button button:hover,
.cat-button button:focus,
.arc-table li a:hover,
.arc-table li.cat-mark a:link,
.arc-table li.cat-mark a:visited,
.arc-table li.cat-mark a:hover,
.arc-table li.cat-mark a:focus {
    color: #fff;
}

.cat-blank {
    opacity: 0;
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.div-line {
    margin: 0 auto;
    color: #444;
}

.div-line-2 {
    margin: 0.2rem auto;
    color: #444;
}

.vol-header {
    width: 40%;
    margin: 1.2rem auto -1.7rem;
}


/* --------------------------------------------------------------
	Search Page
-------------------------------------------------------------- */

body.search article p a {
    font-size: 1.3rem;
}

#search-wrap * {
    box-sizing: border-box;
}

li#search-wrap {
    width: 10rem;
}

#menu-desktop > nav > ul li#search-wrap {
    margin-left: 0;
}

.search-form {
    display: block;
    position: relative;
}

.search-form:before,
.search-field {
    position: absolute;
    top: 11px;
    right: 0;
    width: 30px;
    height: 30px;
    margin: 0;
    content: '';
    display: inline-block;
    opacity: 0.5;
    background-image: url("../images/search.png");
    background-size: contain;
    vertical-align: middle;
}

.search-form:before {
    z-index: 100;
    line-height: 30px;
    text-align: center;
}

.search-field {
    -webkit-appearance: none;
    border-radius: 4px;
    opacity: 0;
    z-index: 200;
    cursor: pointer;
    transition: all 0.3s ease-in;
    background-image: none;
    font-size: 1rem;
    color: #888;
    padding-left: 10px;
}

.search-field:focus {
    opacity: 1;
    width: 100%;
    cursor: text;
}

.search-form input[type="submit"] {
    display: none;
}

#search-results-page form input,
form.pagefind-ui__form::before,
button.pagefind-ui__search-clear {
    display: none !important;
}

#search-results-page form {
    width: 1080px;
}

p.pagefind-ui__message {
    display: block !important;
    font-weight: 400 !important;
    font-family: "RocknRoll One", "Noto Sans JP", sans-serif !important;
    color: #5858a7 !important;
    margin: 2.5rem auto 4.5rem !important;
    font-size: 2.2rem !important;
    text-align: center !important;
    letter-spacing: 0.1rem !important;
}

li.pagefind-ui__result {
    display: block !important;
    margin: 0.5rem 0 !important;
    padding: 0.5rem 4rem !important;
}

div.pagefind-ui__result-thumb {
    display: none;
}

p.pagefind-ui__result-title {
    font-family: "RocknRoll One", "Noto Sans JP", sans-serif;
    font-size: 1.4rem !important;
    margin-bottom: 1rem !important;
}

p.pagefind-ui__result-excerpt {
    font-size: 1rem !important;
    line-height: 1.2 !important;
}

a.pagefind-ui__result-link {
    text-decoration: none !important;
    color: #5858a7 !important;
}

#search-results-page mark {
    background: none !important;
    font-weight: 600 !important;
}

button.pagefind-ui__button {
    font-size: 1rem !important;
    font-weight: 600 !important;
    background: linear-gradient(180deg, #f0f0f0 0%, #dddddd 60%, #cccccc 100%) !important;
    border: 1px solid #999 !important;
    height: 3rem !important;
    display: block !important;
    margin: 2rem auto !important;
    width: calc(100% - 8rem) !important;
}


/* --------------------------------------------------------------
	Contact Form
-------------------------------------------------------------- */

#contact-form {
    width: 800px;
}

#contact-form div {
    margin-bottom: 2rem;
}

#contact-form label {
    display: inline-block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

#contact-form input,
#contact-form textarea,
#contact-form button {
    padding: 0.7rem 1.2rem;
    font-size: 1.1rem;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
    width: 100%;
    box-sizing: border-box;
}

#contact-form textarea {
    height: 10rem;
}

#contact-address {
    margin: 1.5rem 4rem 3rem;
}

#contact-address p {
    margin: 0.3rem 0;
}

#contact-address p img {
    width: 110px;
    margin-bottom: 0;
}


/* --------------------------------------------------------------
	Others
-------------------------------------------------------------- */

#sidebar {
    display: none;
}

a.post-edit-link {
    display: inline-block;
    margin-top: 2rem;
}

#error h1 {
    font-size: 2rem;
}

#error h1:before,
#error h1:after {
    content: "";
    display: inline-block;
    width: 180px;
    height: 180px;
    background-image: url("../images/logo.jpg");
    background-repeat: repeat;
    background-size: contain;
    vertical-align: middle;
}

#error h1:before {
    transform: translate(-3rem, 0);
}

#error h1:after {
    transform: translate(2rem, 0);
}

.grecaptcha-badge {
    visibility: hidden;
}


/* --------------------------------------------------------------
	glightbox
-------------------------------------------------------------- */

.goverlay {
    background: rgba(3, 3, 3, 0.9) !important;
}

button.gclose {
    display: none !important;
}

@keyframes customZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.gzoomIn {
    animation: customZoomIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

@keyframes customZoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

.gzoomOut {
    animation: customZoomOut 0.3s ease forwards !important;
}

.glightbox-container {
    transition: opacity 0.3s ease !important;
}

.glightbox-container.glightbox-closing {
    opacity: 0;
}


/* --------------------------------------------------------------
	Decoration
-------------------------------------------------------------- */

p em {
    color: #dd0000;
    font-weight: 400;
    font-style: normal;
}

span.italic {
    font-style: normal;
}


/* --------------------------------------------------------------
	Media Query - タブレット (1400px以下)
-------------------------------------------------------------- */

@media screen and (max-width: 1400px) {
    /* Header */
    #header-content {
        width: 100%;
        height: 0;
        padding-top: 20%;
        background-image: url("../images/header-tablet.jpg");
        background-position: center center;
        background-repeat: repeat;
        background-size: cover;
    }

    #logo-group {
        margin-top: -20%;
        width: 75%;
    }

    #header-text {
        width: 100%;
        height: auto;
    }

    h1#site-title {
        margin: 0;
        padding-top: 3.5rem;
        font-size: 3.5vw;
    }

    h1#site-title a {
        text-align: left;
    }

    /* Navigation */
    nav.navi {
        width: 95%;
    }

    #menu-desktop > nav > ul li a {
        padding: 17px 1.5rem;
    }

    #menu-desktop > nav > ul li#search-wrap {
        display: none;
    }

    /* Content */
    main,
    content {
        width: 100%;
    }

    article {
        width: 90%;
    }

    /* Contact Form */
    #contact-form {
        width: 600px;
    }

    /* Error Page */
    #error h1 {
        font-size: 1.2rem;
    }

    #error h1:before,
    #error h1:after {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    #cat-button,
    .arc-table,
    .div-line {
        width: 90%;
    }

    .div-line-2 {
        margin: 1rem auto;
        color: #444;
        width: 90%;
    }

    .vol-header {
        margin: 0 auto -2rem;
        width: 50%;
    }
}


/* --------------------------------------------------------------
	Media Query - モバイル (768px以下)
-------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    /* Header */
    #header-content {
        width: 100%;
        height: 0;
        padding-top: 45%;
        background-image: url("../images/header-phone.jpg");
        background-position: center center;
        background-repeat: repeat;
        background-size: cover;
    }

    #logo-group {
        margin-top: -30%;
    }

    h1#site-title {
        margin-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0;
        text-align: center;
        font-size: 8vw;
    }

    /* Navigation - デスクトップメニューを非表示 */
    #menu-desktop {
        display: none;
    }

    /* Navigation - モバイルメニューを表示 */
    #menu-phone {
        display: block;
        position: relative;
        z-index: 999;
        margin: 0 auto;
        width: 100%;
    }

    nav.navi {
        width: 100%;
    }

    /* モバイルメニュー基本設定 */
    #mobile-menu,
    #mobile-menu ul,
    #mobile-menu ul li,
    #mobile-menu ul li a {
        margin: 0 auto;
        padding: 0;
        border: 0;
        list-style: none;
        line-height: 1;
        display: block;
        position: relative;
        box-sizing: border-box;
        text-align: center;
    }

    #mobile-menu {
        width: 100%;
        color: #333;
    }

    /* トップレベルメニュー */
    #mobile-menu > ul > li > a {
        padding: 19px 1rem;
        cursor: pointer;
        z-index: 2;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
        background: #ddd;
    }

    #mobile-menu > ul > li > a:hover,
    #mobile-menu > ul > li.menu-active > a {
        color: #444;
        background: linear-gradient(180deg, #f0f0f0 0%, #dddddd 60%, #cccccc 100%);
    }

    #mobile-menu > ul > li:last-child > a {
        border-bottom: 1px solid #fff;
    }

    #mobile-menu > ul > li > a:hover > span::after,
    #mobile-menu > ul > li.menu-active > a > span::after {
        border-color: #fff;
    }

    #mobile-menu li.has-sub > a {
        background: linear-gradient(180deg, #f5f5f5 0%, #eeeeee 50%, #e1e1e1 100%);
        cursor: pointer;
        display: block;
    }

    /* サブメニュー */
    #mobile-menu ul ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, opacity 0.3s 0.1s;
        opacity: 0;
        background: #eff1f2;
    }

    #mobile-menu ul ul li,
    #mobile-menu ul ul a {
        line-height: 1;
        width: 100%;
    }

    #mobile-menu ul ul li a {
        cursor: pointer;
        border-bottom: 1px solid #fff;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        padding: 19px 50px;
        z-index: 1;
        text-decoration: none;
        text-align: center;
        font-size: 16px;
        color: #444;
        background: #eff1f2;
    }

    #mobile-menu ul ul li:hover > a,
    #mobile-menu ul ul li.menu-active > a {
        background: #ddd;
        color: #444;
    }

    /* アコーディオン開閉 */
    #mobile-menu li.has-sub.m-menu-open > ul {
        display: block;
        max-height: 500px;
        opacity: 1;
    }

    /* サブメニューの矢印アイコン */
    #mobile-menu ul ul li.has-sub > a::after {
        display: block;
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        right: 27px;
        z-index: 10;
        top: 20px;
        border-top: 1px solid #444;
        border-left: 1px solid #444;
        transform: rotate(-135deg);
    }

    #mobile-menu ul ul li.menu-active > a::after,
    #mobile-menu ul ul li > a:hover::after {
        border-color: #fff;
    }

    /* ネストされたサブメニュー */
    #mobile-menu ul ul ul li a {
        padding-left: 20px;
    }

    #mobile-menu > ul > li > ul > li:last-child > a {
        border-bottom: 0;
    }

    #mobile-menu > ul > li > ul > li > a {
        font-weight: 500;
    }

    #mobile-menu li.has-sub > ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, opacity 0.15s 0.15s;
        opacity: 0;
    }

    #mobile-menu li.has-sub.m-menu-open > ul {
        transition: max-height 0.5s ease-in-out, opacity 0.15s;
    }

    /* Content */

    article {
        width: 85%;
    }

    #main h1 {
        margin: 2.5rem auto 2rem;
        font-size: 1.2rem;
        font-weight: 600;
    }

    h1#entry-title a {
        font-size: 1.3rem;
        font-weight: 400;
    }

    p {
        margin: 0 auto 1.2rem;
    }

    div#content article img.vertical,
    div#content article img.horizontal {
        width: 100%;
        float: none;
        margin: 1.2rem 0 1.6rem 0;
        box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
        pointer-events: none;
    }

    p.haiku {
        font-size: 1.1rem;
        font-weight: 400;
    }

    /* Footer */
    #colophon {
        background: linear-gradient(180deg, #f0f0f0 0%, #dddddd 60%, #cccccc 100%);
        color: #666;
    }

    #site-info a:link,
    #site-info a:visited {
        color: #666;
    }

    /* Contact Form */
    #contact-form {
        width: 100%;
    }

    /* Archive */
    #cat-button button {
        min-width: 60px;
        padding: 0.5rem 0.4rem;
        margin: 0.4rem;
        background: linear-gradient(135deg, #fff 0%, #eef 40%, #dde 100%);
        box-shadow: 2px 2px 3px #bbb;
        border: 1px solid #ddd;
        border-radius: 8px;
        color: #444;
        font-size: 15px;
    }

    #cat-button,
    .arc-table {
        width: 100%;
        margin: 0 auto;
    }

    .arc-table li {
        min-width: 60px;
        margin: 0.4rem;
        border-radius: 8px;
        color: #444;
        font-size: 15px;
    }

    .arc-table li a {
        display: block;
        padding: 0.7rem 0.4rem;
    }

    #cat-button button.cat-blank,
    .arc-table li.cat-blank {
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    #cat-button button.cat-blank:nth-child(4),
    #cat-button button.cat-blank:nth-child(5),
    #cat-button button.cat-blank:nth-child(6),
    #cat-button button.cat-blank:nth-child(7),
    #cat-button button.cat-blank:nth-child(8),
    #cat-button button.cat-blank:nth-child(9),
    #cat-button button.cat-blank:nth-child(10),
    .arc-table li.cat-blank:nth-child(4),
    .arc-table li.cat-blank:nth-child(5),
    .arc-table li.cat-blank:nth-child(6),
    .arc-table li.cat-blank:nth-child(7),
    .arc-table li.cat-blank:nth-child(8),
    .arc-table li.cat-blank:nth-child(9),
    .arc-table li.cat-blank:nth-child(10) {
        display: none;
        pointer-events: none;
    }

    .div-line {
        margin: 1rem auto;
        color: #444;
    }

    .div-line-2 {
        margin: 1rem auto;
        color: #444;
    }

    .vol-header {
        margin: 0 auto 0.7rem;
        width: 50%;
    }
}