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

/*----------------------------------------------*/
/* サイト全体のスタイル */
/*----------------------------------------------*/
html {
    background: url(../images/bg_pat_02.png), #c2c2c2;
    background-repeat: repeat;
    background-size: 250px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    color: #1A1A1A;
}

nav *,
footer * {
    margin: 0;
    padding: 0;
}

main {
    background-color: #F2F2F2DD;
}

header,
footer {
    background-color: #1A1A1A;
    color: #f2f2f2;
}

header {
    padding-top: 1em;
    /* 背景画像（全体に表示） */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/bg_tailslab.png);
    background-position: center 0;
    background-size: cover;
    overflow: hidden;
    font-size: small;
}

footer {
    padding: 10px;
    font-size: x-small;
}

nav {
    background-color: darkorange;
    color: #f2f2f2;
    /* サイト上部に張り付き */
    position: sticky;
    top: 0;
    z-index: 999;
}

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

/* 区切り線のスタイル */
hr {
    border-width: 0.5px 0 0 0;
}

/*----------------------------------------------*/
/* テキストの影付け */
/*----------------------------------------------*/
body {
    /* text-shadow: 0 0 1.5px black; */
    text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 0.5);
}

a {
    text-shadow: none;
}

/*----------------------------------------------*/
/* テキストのセンター揃え */
/*----------------------------------------------*/
body {
    text-align: center;
}

article {
    text-align: left;
}

/*----------------------------------------------*/
/* テキストタグのスタイル */
/*----------------------------------------------*/
a,
a:visited {
    color: rgb(134, 87, 216);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* マウスホバーで拡大 */
a img:hover {
    transform: scale(1.05, 1.05);
    transition: 0.3s;
}

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

.s {
    font-size: small;
}

.m {
    font-size: medium;
}

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

.xxl {
    font-size: xx-large;
}

/* テキストの左右寄せ */
.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

/* フロート */
.float-right {
    float: right;
}

.float-left {
    float: left;
}

.float-clear {
    clear: both;
}

/* 引用のスタイル */
blockquote {
    background-color: #F2F2F2;
    padding: 1rem;
}

/*----------------------------------------------*/
/* レイアウト */
/*----------------------------------------------*/
body {
    /* 影つけ */
    box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.3);
    /* サイト全体を中央揃え */
    max-width: 960px;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* コンテンツエリアスタイル */
main {
    width: 100%;
    padding: 10px 40px;
}

/* ページタイトル（h1）のスタイル */
main>h1 {
    height: 2em;
}

/* サムネイル */
img.thumb {
    max-height: 200px;
    /* max-width: 250px; */
    border-radius: 20px;
}

/* 最大幅を親要素に合わせる */
img {
    max-width: 100%;
    max-height: 100%;
    /* アスペクト比を固定 */
    object-fit: cover;
}

/*----------------------------------------------*/
/* サムネイル */
/*----------------------------------------------*/
.thumbnail img {
    max-height: 200px;
}

.thumbnail.circle img {
    border-radius: 100%;
}

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

/*----------------------------------------------*/
/* ナビのメニューボタンスタイル */
/*----------------------------------------------*/
nav {
    text-align: center;
    padding: 0.5em;
}

nav ul {
    padding-inline-start: 0;
}

/* 横並びにする */
nav li {
    display: inline-block;
    list-style-type: none;
    padding: 0 0.75em;
}

nav a,
nav a:visited {
    color: inherit;
    text-decoration: none;
}

/* 区切り線 */
nav li:not(:first-child) {
    border-left: 1px solid white;
}

/*----------------------------------------------*/
/* ヘッダのボタンスタイル */
/*----------------------------------------------*/
.button {
    display: inline-block;
    margin: 10px;
}

.button>img {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
}

.tooltip {
    display: inline-block !important;
    position: relative !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tooltip-text {
    display: none !important;
    position: absolute !important;
    width: 200px;
    bottom: 50px;
    left: -90px;
    /* テキストを折り返さない */
    text-align: center;
    white-space: nowrap;
}

.tooltip:hover .tooltip-text {
    display: block !important;
}

/*----------------------------------------------*/
/* 吹き出しのスタイル */
/*----------------------------------------------*/
.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;
}

/*----------------------------------------------*/
/* CSSアニメーション */
/*----------------------------------------------*/
/* ぼよよん */
.bounce {
    animation: bounce 0.5s ease-in;
}

@keyframes bounce {
    0% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(0.9);
    }

    75% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* 横回転 */
.flip {
    display: grid;
    cursor: pointer;
}

.flip>* {
    grid-area: 1/1;
    transition: .7s;
    backface-visibility: hidden;
}

.flip .back {
    transform: rotateY(-180deg);
}

.flip-trigger:checked~.flip .front {
    transform: rotateY(180deg);
}

.flip-trigger:checked~.flip .back {
    transform: rotateY(0);
}

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

    /* ページ全体の余白を消す */
    body {
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: small;
    }

    /* コンテンツエリアスタイル */
    main {
        padding: 10px 10px;
    }

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

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

    /*----------------------------------------------*/
    /* ナビのメニューボタンスタイル */
    /*----------------------------------------------*/
    /* ナビを隠さない */
    nav {
        position: unset !important;
        height: auto;
    }

    /* メニューボタンの表示 */
    .menu-btn {
        display: none;
    }

    /* 縦並びにする */
    nav li {
        /* display: block; */
    }

    /* 区切り線 */
    nav li:not(:first-child) {
        /* border: none; */
        /* border-top: 1px solid white; */
    }
}

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