@charset "utf-8";

/* Table of Contents：
   -------------------
    ■事前設定部分 
        ▼カスタムプロパティ
        ▼Webフォント

    ■全体共通装飾
        ▼twemojiの装飾
        ▼リンクの装飾
    
	■ページ最上部(ヘッダ)領域
            ▼メディアクエリ設定（画面サイズが600px以下）

    ■段組構成
        ▼メディアクエリ設定（画面サイズが600px以下）
        ▼大外枠の装飾 
        ▼メイン段の装飾
        ▼サブ段の装飾
        
    ■メイン領域
        ▼見出し
        ▼メディアクエリ設定
        ▼テキストサイズ小
        ▼アコーディオンメニューの装飾
        ▼Profileの装飾
        ▼Bookmarkの装飾

    ■サブ領域
        ▼ハンバーガーメニューの設定
        ▼メインメニュー
        ▼てがろぐ埋め込みスキンの設定
        ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 
        ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像
        ▼埋め込み画像
        ▼埋め込み動画
	    ▼埋め込みTweet
        ▼カード型リンクの装飾

    ■ページ最下部(フッタ)領域 
    -------------------
*/

/* ============== */
/* ■事前設定部分 */
/* ============== */

/* ▼カスタムプロパティ */
:root {
    --base-color: #c0e1d7;
    /* ベースカラー */
    --main-color: #01a976;
    /* メインカラー */
    --sub-color-one: #ff817b;
    /* サブカラー 1 */
    --sub-color-two: #eeeae0;
    /* サブカラー 2 */
    --white: #f7f7f7;
    /* 白 */
    --black: #303030;
    /* 黒 */
    --gray: #B0B0B0;
}

/* ▼Webフォント */
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.0.1/dist/css/yakuhanjp.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");


/* inputボタンのリセットCSS */
input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
}

/* ============== */
/* ■全体共通装飾 */
/* ============== */

html {
    font-size: 100%;
}

body {
    font-family: "YakuHanJP", "Noto Sans JP", "メイリオ", Meiryo,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    margin: 0;
    height: 100vh;
    line-height: 1.7;
    background-color: var(--base-color);
    color: var(--black);
    position: relative;
    -webkit-text-size-adjust: 100%;
    /* 自動フォントサイズ調整を解除 */
}

/* -------------- */
/* ▼twemojiの装飾 */
/* -------------- */
img.emoji {
    height: 1rem;
    width: 1rem;
    margin: 0 .1rem 0 .1rem;
    vertical-align: -0.2rem;
}

.decorationE img.emoji {
    outline: none;
}

/* -------------- */
/* ▼リンクの装飾 */
/* -------------- */
a:link,
a:visited {
    text-decoration: none;
    color: var(--sub-color-one);
}

/* 未訪問リンク、既訪問リンク */
a:hover {
    color: var(--main-color);
}

/* ========================== */
/* ■ページ最上部(ヘッダ)領域 */
/* ========================== */
header {
    width: 100%;
    /* 横幅 */
    padding: 0.2rem 0 0.2rem;
    /* 内側の余白量 */
    background-color: var(--sub-color-two);
    /* 背景色 */
    color: var(--main-color);
    /* 文字色 */
    text-align: center;
    /* テキスト中央寄せ */
    border-bottom: 0.1rem solid var(--white);
    /* ボックス下線 */
}

header p {
    margin: 0.1rem;
    /* 外側の余白量 */
    font-size: 0.8rem;
    /* フォントサイズ */
}

header img {
    width: 20%;
    /* 画像サイズ */
    margin-top: 0.5rem;
    /* 上側余白の設定*/
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    header img {
        width: 40%;
        /* 画像サイズ */
        margin-top: 0.5rem;
        /* 上側余白の設定*/
    }
}

/* メニュー関連のリセットCSS */
button {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    border: 0;
    outline: 0;
    background: transparent;
    border-radius: 0;
    text-align: inherit;
}

/* デフォルトでは非表示 */
.btn {
    display: none;
    /* 通常時は非表示 */
}

@media screen and (max-width: 600px) {

    /**************** 以下、ハンバーガーボタンのスタイリング ****************/

    .btn {
        /* 600px以下では表示 */
        display: block;
        /* ボタンの配置位置  */
        position: fixed;
        top: 0.8rem;
        right: 1rem;
        /* ボタンの大きさ  */
        width: 3.2rem;
        height: 3.2rem;
        /* バーガーの線をボタン範囲の中心に配置 */
        display: flex;
        justify-content: center;
        align-items: center;
        /* 最前面に */
        z-index: 1000;
        /* ボタン背景設定 */
        background-color: var(--sub-color-two);
        border-radius: 10%;
    }

    /***** 真ん中のバーガー線 *****/
    .btn-line {
        /* 線の長さと高さ */
        width: 70%;
        height: 0.18rem;
        /* バーガー線の色 */
        background-color: var(--main-color);
        /* バーガー線の位置基準として設定 */
        position: relative;
        transition: .2s;
        display: block;
        /* ブロック要素にすることで幅を親要素にフィット */
    }

    /***** 上下のバーガー線 *****/
    .btn-line::before,
    .btn-line::after {
        content: "";
        /* 基準線と同じ大きさと色 */
        position: absolute;
        left: 0;
        /* 左端を基準に配置 */
        width: 100%;
        height: 100%;
        background-color: var(--main-color);
        transition: .2s;
    }

    .btn-line::before {
        /* 上の線の位置 */
        transform: translateY(-0.6rem);
    }


    .btn-line::after {
        /* 下の線の位置 */
        transform: translateY(0.6rem);
    }

    /***** メニューオープン時 *****/
    .btn-line.open {
        /* 真ん中の線を透明に */
        background-color: transparent;
    }

    .btn-line.open::before,
    .btn-line.open::after {
        content: "";
        transition: .2s;
    }

    .btn-line.open::before {
        /* 上の線を傾ける */
        transform: rotate(45deg);
    }

    .btn-line.open::after {
        /* 上の線を傾ける */
        transform: rotate(-45deg);
    }
}

/**************** ここまで、ハンバーガーボタンのスタイリング ****************/

/* ========= */
/* ■段組構成 */
/* ======== */

/* -------------- */
/* ▼大外枠の装飾 */
/* -------------- */
.contents {
    display: flex;
    /* フレックスボックスの指定 */
    justify-content: space-between;
    /* 水平方向のレイアウト*/
    width: 80%;
    /* 横幅 */
    margin: 0 auto;
    /* 外側の余白量 */
    padding: 0;
    /* 内側の余白量 */
}

/* ---------------- */
/* ▼メイン段の装飾 */
/* ---------------- */
.contents main {
    width: 68%;
    /* 横幅 */
    margin: 0 1rem;
}

.mainbox div p {
    font-size: 0.9rem;
    text-align: justify;
    overflow-wrap: break-word;
    letter-spacing: 0.5px;
}

/* -------------- */
/* ▼サブ段の装飾 */
/* -------------- */
.contents aside {
    width: 26%;
    /* 横幅 */
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {

    /* ---------------- */
    /* ▼メイン段の装飾 */
    /* ---------------- */
    .contents {
        width: 100%;
    }

    .contents main {
        width: 95%;
        margin: 0 auto;
    }

    .contents aside {
        width: 80%;
    }
}

/* =========== */
/* ■メイン領域 */
/* ========== */
div.mainbox {
    margin: 0.8rem auto;
    padding: 1rem 2rem;
    background-color: var(--white);
    border-radius: 0.5rem;
}

/* ------- */
/* ▼見出し */
/* ------- */
h2 {
    margin: 0 0 1rem 0;
    padding-left: 2rem;
    background: linear-gradient(transparent 60%, var(--base-color) 60%);
}

h4 {
    border-left: solid 0.4rem var(--sub-color-one);
    padding: 0 1rem;
    margin: 0 0 1rem 1rem;
    font-size: 1.2rem;
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    h2 {
        margin: 0 0.85rem 1rem;
    }

    div.mainbox {
        padding: 1rem 0.7rem;
    }

    .mainbox div {
        margin: 0.85rem;
    }
}

/* ▼テキストサイズ小 */
.small {
    font-size: 0.8rem;
}

/* --------------------------- */
/* ▼アコーディオンメニューの装飾 */
/* -------------------------- */
/* デフォルトの矢印を削除する */
summary {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    left: 2rem;
    font-weight: bold;
}

summary::-webkit-details-marker {
    display: none;
}

/* +マークの表示 */
summary::before,
summary::after {
    position: absolute;
    top: 0.3rem;
    left: -1rem;
    width: 0.2rem;
    height: 0.9rem;
    border-radius: 0.2rem;
    background-color: var(--main-color);
    content: '';
}

summary::before {
    rotate: 90deg;
}

summary::after {
    transition: rotate .3s;
}

[open] summary::after {
    rotate: 90deg;
}

details p {
    margin-top: 0.2rem;
    padding: 0.5rem 0.75rem;
    border: dotted var(--main-color);
}

/* ------------- */
/* ▼Profileの装飾 */
/* ------------- */

/* ▼Waveboxの装飾 */
a .wavebox {
    display: inline-block;
}

.wavebox img {
    height: 1.9rem;
    vertical-align: middle;
}

/* --------------- */
/* ▼Bookmarkの装飾 */
/*--------------- */
.mainbox div p.bkm {
    margin-bottom: 0;
    text-align: left;
}

/* ========== */
/* ■サブ領域 */
/* ========== */

aside ul {
    list-style: none;
    /* リストスタイルの設定 */
    padding: 0 0.5rem 0.5rem 0.5rem;
    /* 内側の余白 */
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {

    /**************** 以下、メニューのスタイリング ****************/
    /* メニュー初期状態（画面外に移動させる） */
    .menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        height: 100%;
        background-color: var(--sub-color-two);
        transform: translateX(130%);
        /* 画面外へ移動 */
        transition: transform 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
        /* スライドのアニメーション */
        visibility: hidden;
        /* 見えなくする */
        opacity: 0;
        overflow: auto;
        /* メニュー内のスクロールを可能にする */
    }

    /* メニューオープン時（画面内に表示） */
    .menu.open {
        transform: translateX(0);
        /* 画面内へ移動 */
        visibility: visible;
        /* 表示 */
        opacity: 1;
    }

    /* 背景のスクロールを無効にする */
    body.no-scroll {
        overflow: hidden;
        /* スクロールを無効にする */
    }
}

/* ‥‥‥‥‥‥‥‥ */
/* ▼メインメニュー */
/* ‥‥‥‥‥‥‥ */
nav ul {
    background-color: var(--sub-color-two);
    /* 背景色 */
    border: double 0.3rem var(--base-color);
    /* 枠線 */
    margin-top: 0.5rem;
}

nav ul li {
    padding: 0.3rem 0.5rem 0 0.5rem;
    /* 内側の余白 */
    border-bottom: dotted 0.2rem var(--base-color);
    /* 下線 */
    font-size: 1.2rem;
    /* 文字サイズ */
}

nav a {
    display: block;
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    nav ul {
        margin: 4rem auto 0;
        /* 中央寄せ */
        width: 80%;
    }
}

/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▼てがろぐ埋め込みスキンの設定 */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
.newpost h3 {
    background-color: var(--sub-color-one);
    border-radius: 0.7rem 0.7rem 0 0;
    padding: 0.2rem 0.5rem;
    width: fit-content;
    margin-bottom: 0;
    text-align: center;
    color: var(--white);
    font-size: 1rem;
    font-weight: normal;
}

.umekomi {
    background-color: var(--white);
    padding: 0.4rem 0.7rem;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
    margin-top: 0;
    font-size: 0.8rem;
}

/* 日付境界バー非表示 */
.dateseparator {
    display: none;
}

/* 日付、カテゴリー表示設定 */
.oneloginfo {
    border-bottom: dotted 2px var(--base-color);
    padding-bottom: 0.1rem;
    margin-bottom: 0.3rem;
}

.date {
    color: var(--black);
    margin-right: 0.5rem;
}

.categoryname {
    color: var(--main-color);
}

.categorylink:not(:last-child) .categoryname::after {
    content: ",";
    padding-right: 0.2rem;
}


.date:hover,
.categoryname:hover {
    color: var(--sub-color-one);
}

/* 投稿表示設定 */
div .body {
    border-bottom: solid 1px var(--gray);
}

.embeddedimage {
    width: 100%;
    max-height: 200px;
    display: block;
    object-fit: cover;
}

.embeddedmovie {
    width: 100%;
}

.hitokoto-poweredby {
    display: block;
    text-align: right;
}

/* ---------------------------------------------------- */
/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：文字 */
/* ---------------------------------------------------- */
/* B:太字(Bold) */
.decorationB {
    font-weight: bold;
    /* 太字 */
}

/* D:削除(Delete) */
.decorationD {
    color: #888;
    /* 文字色 */
    text-decoration-line: line-through;
    /* 取り消し線 */
    text-decoration-color: var(--sub-color-one);
    /* 線の色 */
    text-decoration-style: double;
    /* 二重線にする */
}

/* E:強調(Emphasis) */
.decorationE {
    background: linear-gradient(transparent 60%, var(--base-color) 60%);
    /* 文字の下半分くらいにマーカーっぽい線を引く */
}

/* I:斜体(Italic) */
.decorationI {
    font-style: italic;
    /* 斜体 */
}

/* Q:引用(Quote) */
.decorationQ {
    margin: 1rem 0.3rem;
    /* 外側の余白(上→右→下→左) */
    padding: 0.1rem 0.7rem 0.7rem;
    /* 内側の余白(上下→左右) */
    border-left: 1rem double var(--base-color);
    /* 左端の枠線 */
    background-color: var(--sub-color-two);
    /* 背景色 */

    display: block;
    /* ※Ver 2.2.0以降必須の記述 */
}

.decorationQ::before {
    font-family: "Material Icons";
    content: "\e244";
    font-size: 1.5rem;
}

.decorationQ::after {
    content: "";
    /* 標準で付加されてしまう引用符を無効にする */
}

.decorationQ+br {
    display: none;
    /* 引用直後の改行を無効化する */
}

/* S:小文字(Small) */
.decorationS {
    font-size: 0.8em;
    /* 文字サイズ */
}

/* T:極小文字(Tiny) */
.decorationT {
    font-size: 0.6em;
    /* 文字サイズ */
}

/* U:下線(Underline) */
.decorationU {
    text-decoration-line: underline;
    /* 線位置 */
    text-decoration-style: double;
    /* 線種類 */
    text-decoration-color: var(--sub-color-one);
    /* 線配色 */
}

/* ---------------------------------------------------- */
/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像 */
/* この部分は、文字装飾領域内に含まれた画像を装飾するための記述です。 */
/* ---------------------------------------------------- */
/* B:太字(Bold)に含まれる画像に対する装飾 */
.decorationB img {
    box-shadow: 5px 5px 5px var(--base-color);
    /* 右下に影を付ける */
}

/* D:削除(Delete)に含まれる画像に対する装飾 */
.decorationD img {
    opacity: 0.5;
    /* 半透明にする */
}

/* E:強調(Emphasis)に含まれる画像に対する装飾 */
.decorationE img {
    outline: 8px ridge var(--base-color);
    /* 浮き上がる枠線を付加 */
}

/* I:斜体(Italic)に含まれる画像に対する装飾 */
.decorationI img {
    box-shadow: -5px 5px 5px var(--base-color);
    /* 左下に影を付ける */
}

/* Q:引用(Quote)に含まれる画像に対する装飾 */
.decorationQ img {
    vertical-align: middle;
    /* 行の上下方向で真ん中に寄せる */
}

/* S:小文字(Small)に含まれる画像に対する装飾 */
.decorationS img {
    border-radius: 15px;
    /* 半径15pxで角丸にする */
    vertical-align: middle;
    /* 行の上下方向で真ん中に寄せる */
}

/* T:極小文字(Tiny)に含まれる画像に対する装飾 */
.decorationT img {
    max-height: 75px;
    /* 高さを最大75pxに抑える */
    width: auto;
    /* 横幅は縦横比を維持する */
    vertical-align: middle;
    /* 行の上下方向で真ん中に寄せる */
}

/* U:下線(Underline)に含まれる画像に対する装飾 */
.decorationU img {
    box-shadow: 5px 5px 5px var(--base-color);
    /* 右下に影を付ける */
}

/* -------------- */
/* ▼埋め込み画像 */
/* -------------- */
/* ▽画像ボックス(FIGオプション指定時) */
.embeddedpictbox {
    margin: 0;
    /* 外側の余白を消す */
    padding: 0;
    /* 内側の余白を消す */
    display: inline-table;
    /* 横方向に並べる */
    border-collapse: collapse;
    /* displayをinline-tableにする場合に必要 */
    border: 1px solid var(--sub-color-two);
    /* 枠線 */
    vertical-align: top;
    /* 行内では上に寄せる */
}

/* キャプション */
.embeddedpictbox figcaption {
    display: table-caption;
    /* キャプションが画像幅から外に出ないようにする */
    caption-side: bottom;
    /* キャプションの位置(上にしたければtop) */
    font-size: 0.8em;
    /* 文字サイズ */
    text-align: center;
    /* センタリング */
    background-color: var(--sub-color-two);
    /* 背景色 */
}

/* 画像ボックスに含まれる画像 */
.embeddedpictbox img {
    vertical-align: middle;
}

/* ▽画像リンク */
.imagelink {
    display: inline-block;
    line-height: 1;
    /* 表示形態によっては画像の下に余計な空白が出るのを防ぐ対策 */
    vertical-align: inherit;
    /* 同上 */
}

/* ▽画像そのもの */
.embeddedimage {
    max-width: 100%;
    /* 横方向にはみ出ないようにする */
    max-height: 400px;
    /* 大きくなりすぎないようにする */
    width: auto;
    /* 画像サイズを固定したい場合はここに具体的なpx値を指定するのがお勧め */
    height: auto;
    /* 高さを固定したい場合を除いて、ここは auto のままにするのがお勧め */
    display: block;
    margin: 0.5rem auto;
}

/* ▽フラグ付き画像 (※設定や採用記法によって出力パターンが複数あるため、あらゆるパターンに対応させるべく同じスタイルを2重に指定しています。) */
figure.nsfw {
    overflow: hidden;
    /* ぼかし領域がfigureのボックスからはみ出ないようにする */
}

.imagelink.nsfw {
    overflow: hidden;
    /* ぼかし領域がfigureのボックスからはみ出ないようにする */
}

img.nsfw {
    filter: blur(9px);
    /* ぼかす */
}

/* -------------- */
/* ▼埋め込み動画 */
/* -------------- */
.embeddedmovie {
    display: inline-block;
    max-width: 100%;
    /* はみ出ないようにする */
}

/* --------------- */
/* ▼埋め込みTweet */
/* これはツイートが埋め込まれる処理「前」用の装飾です。実際に埋め込まれるツイートはTwitter側のiframeで装飾されますので、てがろぐ側では指定できません。(ただし横幅を制限することはできます。→後述) */
/* --------------- */
blockquote.twitter-tweet {
    background-color: #f8f8f8;
    border: 1px dashed #ddd;
    border-radius: 9px;
    margin: 0.3em 0;
    padding: 1em;
    font-size: 0.95em;
    color: #999;
    text-shadow: 1px 1px 1px #fff;
}

/* ▼埋め込みツイートの横幅を強制的に制限 */
div.twitter-tweet {
    max-width: 350px !important;
}


/* ---------------------- */
/* ▼カード型リンクの装飾 */
/* ---------------------- */
.cardlink {
    display: inline-block;
    width: 100%;
    max-width: 500px;
    /* 最大幅 (※横幅を制限したくない場合はこれを削除して下さい) */
    padding: 0 0.25em 0.5em 0;
    /* 内側の余白量 */
    font-size: 0.9rem;
    /* 文字サイズ */
    text-decoration: none;
    /* リンク文字の下線を消す */
    vertical-align: middle;
    /* 行内の上下方向では中央配置 */
}

/* ------------------------------------- */
/* リンクカードの装飾(サイズS/L共通部分) */
/* ※後述の「サイズS用の追記」や「サイズL用の追記」と合わせて、1つのカードデザインになります。 */
/* ------------------------------------- */
/* カード外枠 */
.cardlinkbox {
    border: 1px solid #ccc;
    /* 枠線 */
    border-radius: 7px;
    /* 角丸 */
    background-color: white;
    /* 背景色 */
    display: flex;
    /* 内部レイアウトのFlexbox化 */
}

/* (マウスが載ったとき) */
.cardlinkbox:hover {
    background-color: #f5fff5;
    /* 背景色 */
    border-color: #8c8;
    /* 枠線色 */
}

/* ▽リンクカード内の画像枠 (※読み込まれたog:imageは、この枠に《背景画像として》描画されます) */
.cardlinkimage {
    background-image: linear-gradient(-30deg, #8a8, #e0f0e0);
    /* プレースホルダ的な背景グラデーション(※og:imageの画像指定が読み込まれたら、この値は上書きされます) */
    background-size: cover;
    /* 背景画像で枠を埋める */
    background-position: center center;
    /* 背景画像を中央に寄せる */
    background-repeat: no-repeat;
    /* 背景画像を繰り返さない */
}

/* ▽リンクカード内のテキスト枠 */
.cardlinktextbox {
    display: flex;
    /* Flexbox化 */
    flex-direction: column;
    /* 子要素を縦方向に並べる */
    padding: 0.5em 1em;
    /* 内側の余白量 */
}

/* ▽リンクカードのテキスト枠内の3要素共通 */
.cardlinktitle,
.cardlinkdescription,
.cardlinkurl {
    /* ↓表示行数を制限するための準備 (※システム側では文字数は制限せずに「記述されている全文字」をHTMLに出力しますので、表示分量を制限したい場合はCSSで制御する必要があります。) */
    display: -webkit-box;
    /* -webkit-line-clampを使うために必要な記述1 ※A */
    -webkit-box-orient: vertical;
    /* -webkit-line-clampを使うために必要な記述2 ※A */
    overflow: hidden;
    /* 表示量を制限する場合に必須の記述 */
    /* ↓制限の仕様 */
    line-clamp: 1;
    /* 1行だけ見せる (将来的にはこれだけで実現可能かも) */
    -webkit-line-clamp: 1;
    /* 1行だけ見せる (今のブラウザにはこちらが必要で、そのためには上記「※A」も必要) */
    text-overflow: ellipsis;
    /* 省略記号(三点リーダー) */
}

/* リンクタイトル */
.cardlinktitle {
    padding-bottom: 0.25em;
    /* 内側下端の余白量 */
}

/* リンク概要文 */
.cardlinkdescription {
    line-height: 1.3;
    /* 行の高さ */
    color: #555;
    /* 文字色 */
    line-clamp: 2;
    /* (既存指定の上書き) 最大2行まで見せる */
    -webkit-line-clamp: 2;
    /* (既存指定の上書き) 最大2行まで見せる */
}

/* リンクドメイン */
.cardlinkurl {
    color: #999;
    /* 文字色 */
}

/* ----------------------------------- */
/* リンクカードの装飾(サイズS用の追記) */
/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
/* ----------------------------------- */
.cardsize-S {
    flex-direction: row;
    /* 画像とテキストは横に並べる(Flexbox) */
}

/* ▽リンクカード内の画像枠 */
.cardsize-S .cardlinkimage {
    min-width: 100px;
    /* 最小の横幅 */
    min-height: 100px;
    /* 最小の高さ */
    border-radius: 6px 0 0 6px;
    /* 左側だけ角丸 */
    flex-shrink: 0;
    /* 枠サイズを自動縮小させない */
}

/* ▽リンクカード内のテキスト枠 */
.cardsize-S .cardlinktextbox {
    border-left: 1px solid #ccc;
    /* 左側の枠線 */
    justify-content: center;
    /* Flexboxの上下方向での中央寄せ */
}

/* ▽リンクカードのテキスト枠内の3要素 */
.cardsize-S .cardlinktitle {
    order: 2;
}

/* タイトルは、2番目に表示 */
.cardsize-S .cardlinkdescription {
    order: 3;
}

/* 概要文　は、3番目に表示 */
.cardsize-S .cardlinkurl {
    order: 1;
}

/* ドメインは、1番上に表示 */

/* ----------------------------------- */
/* リンクカードの装飾(サイズL用の追記) */
/* 前述の「サイズS/L共通部分」と合わせて、1つのカードデザインになります。 */
/* ----------------------------------- */
.cardsize-L {
    flex-direction: column;
    /* 画像とテキストは縦に並べる(Flexbox) */
}

/* ▽リンクカード内の画像枠 */
.cardsize-L .cardlinkimage {
    aspect-ratio: 1.91 / 1;
    /* 画像枠の縦横比を指定= (横)1.91：(縦)1 */
    width: 100%;
    /* 横幅は枠最大に拡げる */
    height: auto;
    /* 高さは自動計算 */
    border-radius: 6px 6px 0 0;
    /* 上側だけ角丸 */
}

/* ▽リンクカード内のテキスト枠 */
.cardsize-L .cardlinktextbox {
    border-top: 1px solid #ccc;
    /* 上側の枠線 */
}

/* ▽リンクカードのテキスト枠内の3要素 */
.cardsize-L .cardlinktitle {
    font-weight: bold;
}

/* 太字 */
.cardsize-L .cardlinkdescription {
    min-height: 2.5em;
}

/* 内容量が少ない場合でも一定の高さを確保 */
.cardsize-L .cardlinkurl {
    border-top: 1px solid #ddd;
    /* 上側の枠線 */
    margin-top: 0.5em;
    /* 上側の枠線より上の余白量 */
    padding-top: 0.5em;
    /* 上側の枠線より下の余白量 */
    font-size: 0.75rem;
    /* 文字サイズ(小さめ) */
}

/* ▼メディアクエリ設定（画面サイズが600px以下） */
@media screen and (max-width: 600px) {
    div .newpost {
        margin: 0 auto;
        width: 85%;
    }
}

/* ========================== */
/* ■ページ最下部(フッタ)領域 */
/* ========================== */


/* End of file */