/************************************************
 * user.css
 * Copyright © 2019 coffy
 * https://coffy.tailslab.net
 ************************************************/

/*----------------------------------------------*/
/* カラー設定 */
/*----------------------------------------------*/
html {
    background-color: #EEEEEE;
    color: #656565;
}

header {
    background-color: #4F4F4F;
}

/* 見出し・太字は濃いめ */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
    /* color: #4F4F4F; */
    color: #414141;
}

a h1 {
    color: darkorange !important;
}

/* 記事 */
nav,
article {
    background-color: #FAFAFA;
}

/* ナビゲーションエリアの見出し */
nav h2 {
    background-color: #4F4F4F;
    color: #FAFAFA;
}

/* タグ */
tags a,
tag a {
    background-color: #EEEEEE;
    color: #656565;
    /* border: 1px solid #656565; */
}

/*----------------------------------------------*/
/* ページ全体の共通スタイル */
/*----------------------------------------------*/
/* サイト横幅を固定 */
body {
    /* フォントサイズ小 */
    font-size: small;
    /* 禁則処理 */
    /* word-break: keep-all;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word; */
}

body .container {
    /* サイト全体を中央揃え */
    max-width: 1130px;
    margin-left: auto;
    margin-right: auto;
}

/* ヘッダーエリアスタイル */
header {
    /* 中央揃え */
    text-align: center;

    /* 上部張り付き */
    /* position: sticky; */
    top: 0;
    z-index: 1000;
}

header>* {
    /* 余白の削除 */
    margin: 0 !important;
}

header h1 {
    /* サイトタイトルは画像なのでサイズをリセット */
    font-size: 1em;
}

/* ぱんくずリストスタイル */
breadcrumbs {
    /* padding: 1em 1.5em; */
    background-image: url(../images/icon_folder.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    text-indent: 2em;
    margin: 1em 1.5em;
}

/* 日付のスタイル */
time {
    background-image: url(../images/icon_schedule.png);
    background-repeat: no-repeat;
    background-size: 1em;
    padding-left: 1.25em;
    font-size: small;
}

/* コンテンツエリアスタイル */
main {
    width: 100%;
    padding: 0 1.5em;
}

/* フッターエリアスタイル */
footer {
    text-align: center;
    padding: 0.5em 1em;
}

/* フレームの最大幅を親要素に合わせる */
iframe {
    max-width: 100%;
    max-height: 100%;
}

/*----------------------------------------------*/
/* ナビゲーションエリアの共通スタイル */
/*----------------------------------------------*/
/* ナビゲーションエリアスタイル */
nav {
    width: 300px;
    position: relative;
    padding: 0 1.5em;
    margin: 1em 0;
}

nav *+p {
    margin: 0;
}

/* ナビゲーションの見出しスタイル */
nav h2 {
    padding: 0.2em;
    /* 幅いっぱいに広げる */
    margin-left: -1em;
    margin-right: -1em;
    text-align: center;
}

/* ナビゲーションの最初の見出し */
nav h2:first-child {
    margin-top: 0;
}

/* ナビゲーションの副見出しスタイル */
nav h3 {
    margin-top: 1em;
    margin-bottom: 0;
}

/* ナビゲーションエリアの副見出しアイコン */
nav h3 img {
    height: 2.5em;
}

/* ナビゲーションエリアのソーシャルアイコン */
nav .sosial img {
    height: 3em;
    border-radius: 50%;
}

/* 箇条書き */
ul,
nav ul {
    /* list-style-type: '»'; */
    padding-left: 1.25em;
    /* text-indent: 0.25em; */
}

/*----------------------------------------------*/
/* コンテンツエリア直下の見出しスタイル */
/*----------------------------------------------*/
/* 影付き巨大フォント */
main>h1 {
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
    /* margin: 2rem 0; */
    text-shadow: 0.3rem 0.3rem 0 rgba(0, 0, 0, 0.3);
}

main>h1::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background-color: black;
    background: -webkit-linear-gradient(left, transparent, #000 25%, #000 75%, transparent);
    background: -moz-linear-gradient(left, transparent, #000 25%, #000 75%, transparent);
    background: linear-gradient(left, transparent, #000 25%, #000 75%, transparent);
    background: -ms-linear-gradient(left, transparent, #000 25%, #000 75%, transparent);
}

/*----------------------------------------------*/
/* レイアウト関連 */
/*----------------------------------------------*/
/* 余白スタイル */
.margin {
    padding: 10px;
}

/* 中央揃え */
.layout-center {
    text-align: center;
}

/*----------------------------------------------*/
/* 記事直下の見出しスタイル */
/*----------------------------------------------*/
/* マグカップアイコン */
article h1 {
    /* font-weight: bold; */
    background-image: url(../images/coffy_cup.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    text-indent: 1.75em;
}

/*----------------------------------------------*/
/* イメージのスタイル */
/*----------------------------------------------*/
/* 最大幅を親要素に合わせる */
img {
    padding: 3px;
    max-width: 100%;
    max-height: 100%;
}

/* 丸いトリミング */
img.trim-circle {
    padding: 0;
    margin: 6px;
    background-color: white;
    border-radius: 50%;
}

img.size-30 {
    max-width: 30px;
    min-width: 30px;
}

img.size-50 {
    max-width: 50px;
    min-width: 50px;
}

img.size-80 {
    max-width: 80px;
    min-width: 80px;
}

img.size-100 {
    max-width: 104px;
    min-width: 104px;
}

img.size-120 {
    max-width: 128px;
    min-width: 128px;
}

/* サムネ指定の画像は親要素に合わせる */
.thumb img {
    object-fit: contain;
}

/*----------------------------------------------*/
/* 投稿のスタイル */
/*----------------------------------------------*/
article {
    word-break: break-all;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0.5rem 0;
    display: inline-block;
    width: 100%;
}

/* ページ要約文の投稿スタイル解除 */
description article {
    background: none;
    margin: 0;
    padding: 0;
}

/*----------------------------------------------*/
/* 吹き出しのスタイル */
/*----------------------------------------------*/
.balloon {
    position: relative;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem;
    background-color: white;
    display: inline-block;
    box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.1)
}

.balloon::before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: -14px;
    top: calc(50% - 14px);
    bottom: 14px;
    border-left: 14px solid white;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
}

/* 吹き出しを下向きにする */
.balloon.bottom::before {
    top: auto;
    left: auto;
    right: calc(50% - 14px);
    bottom: -14px;
    border-top: 14px solid white;
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
    border-bottom: none;
}

/* 吹き出しを左向きにする */
.balloon.left::before {
    top: calc(50% - 14px);
    left: -14px;
    right: 0;
    bottom: auto;
    border-top: 14px solid transparent;
    border-right: 14px solid white;
    border-left: none;
    border-bottom: 14px solid transparent;
}

/*----------------------------------------------*/
/* ページングエリアのスタイル */
/*----------------------------------------------*/
pager li {
    font-size: small;
    line-height: 1em;
}

pager ul::before {
    content: "«";
    display: inline-block;
}

pager ul::after {
    content: "»";
    display: inline-block;
}

/*----------------------------------------------*/
/* タグのスタイル */
/*----------------------------------------------*/
tags ul {
    list-style-type: none;
    padding: 0;
}

tags li {
    display: inline-block;
}

tags a,
tag a {
    display: inline-block;
    font-size: small;
    margin: 0.25em;
    padding: 0 0.5em;
    border-radius: 0.4em;
    text-decoration: none;
}

/*----------------------------------------------*/
/* テキストタグのスタイル */
/*----------------------------------------------*/
/* 注釈文字 */
small {
    font-size: x-small;
}

main h2 {
    font-size: x-large;
    line-height: 2em;
    border-bottom: 0.5px solid lightgray;
}

a {
    color: darkorange;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a img:hover {
    /* outline: 2px solid orange; */
    /* 拡大 */
    transform: scale(1.05, 1.05);
    transition: 0.3s;
}

/* フォントサイズM */
.xs {
    font-size: x-small;
}

.s {
    font-size: small;
}

.m {
    font-size: medium;
}

.l {
    font-size: large;
}

.xl {
    font-size: x-large;
}

/*----------------------------------------------*/
/* NEWアイコンの表示 */
/*----------------------------------------------*/
.new::after,
.update::after {
    display: inline-block;
    content: "";
    width: 50px;
    height: 14px;
    margin-left: 0.5rem;
}

.new::after {
    background: url(../images/new_icon.gif) no-repeat;
}

.update::after {
    background: url(../images/update_icon.gif) no-repeat;
}

/*----------------------------------------------*/
/* 矢印 */
/*----------------------------------------------*/
/* 右向き矢印 */
.next::before {
    content: '»';
    display: inline-block;
    margin-right: 0.5rem;
}

/* 左向き矢印 */
.prev::before {
    content: '«';
    display: inline-block;
    margin-right: 0.5rem;
}

/*----------------------------------------------*/
/* サムネイルエリアスタイル */
/*----------------------------------------------*/
/* 子要素をすべて固定サイズにする */
.gallery img {
    max-height: 15rem;
    max-width: 15rem;
}

/*----------------------------------------------*/
/* テーブルスタイル */
/*----------------------------------------------*/
table {
    border-collapse: collapse;
    white-space: nowrap;
}

table th {
    border-bottom: solid 2px lightgray;
}

table tr {
    border-bottom: solid 1px lightgray;
}

table th,
table td {
    padding: 0.15rem 1rem;
}

/*----------------------------------------------*/
/* 子要素 */
/*----------------------------------------------*/
.noborder * {
    border: none;
}

/*----------------------------------------------*/
/* メディアクエリ */
/*----------------------------------------------*/
/* ↓縦向きの場合のスタイル  */
@media screen and (orientation: portrait) {

    /* ページ全体の余白を消す */
    body {
        margin: 0;
        padding: 0;
    }

    /* ヘッダーエリアの最大化 */
    header {
        width: auto;
    }

    nav {
        margin: 0;
        box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.3);
    }

    /* フレックス解除 */
    .flexbox.responsive {
        display: block;
    }

    /* 記事を横幅いっぱいまで伸ばす */
    article {
        border-radius: 0;
        margin: 0.5rem -1rem;
        width: 100vw;
    }

    /* 吹き出しを下向きにする */
    .responsive>.balloon::before {
        top: auto;
        left: auto;
        right: calc(50% - 14px);
        bottom: -14px;
        border-top: 14px solid white;
        border-right: 14px solid transparent;
        border-left: 14px solid transparent;
        border-bottom: none;
    }
}

/* ↓幅800px以下の場合のスタイル  */
@media screen and (max-width: 899px) {}