@charset "utf-8";

/*--------------------*/
/*フォント*/
/*--------------------*/

@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css");
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

/*--------------------*/
/*色*/
/*--------------------*/

:root {
    --color__main: #f9f9f9;
    --color__sabu: #edeff1;
    --color__sabu2: #c8ccd0;
    --color__sabu3: #899199;
    --color__sabu4: #4b535b;
    --color__text: #2c3238;
}

/*--------------------*/
/*他変数*/
/*--------------------*/

:root {
    /*基本文字サイズ*/
    /*このサイズを基準に多くのサイズが決まる*/
    --text: 15px;
    /*ページ横幅*/
    --page_width: 50rem;
    /*余白サイズ*/
    --space_xs: 0.25rem;
    --space_s: 0.5rem;
    --space_m: 1rem;
    --space_l: 2rem;
    --space_xl: 4rem;
    /*角丸サイズ*/
    --rounded: 0.25rem;
    /*フォント*/
    --font_family: "YakuHanJP", "BIZ UDGothic", sans-serif;
}


/*--------------------*/
/*ベタ打ち*/
/*--------------------*/

* {
    /*簡易リセットCSS*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*その他CSS*/
    line-height: 2em;
}

html {
    font-family: var(--font_family);
    font-size: var(--text);
    color: var(--color__text);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color__main);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1em;
    margin: 0 0 0.5em;
    font-weight: bold;
}

h1 {
    text-align: center;
    font-size: 1.6rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.3rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.15rem;
}

h6 {
    font-size: 1.10rem;
}

small {
    font-size: 0.75rem;
}

a {

    color: var(--color__sabu3);
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;

    &:visited {
        color: var(--color__sabu3);
    }

    &:hover {
        filter: brightness(0.9);
    }

}

img {
    /*画像下の空白が無くなる*/
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

ul, ol {
    /*リストがボックス内に収まる*/
    list-style-position: inside;
    /*改行したとき、行頭が「・」の右側で揃う*/
    padding-left: 1em;
    text-indent: -1em;
}

audio {
    /*line-heightの代用*/
    margin: 1rem 0;
}

strong {
    /*てがろぐ本体で生成される注意書きのデザインを変更*/
    color: var(--color__text);
    line-height: 2em;
    border-radius: var(--rounded);
    border: var(--color__sabu2) 1px solid;
    background-color: var(--color__sabu);
}

input[type=text], input[type=button], input[type=submit], input[type="file"], textarea, select {
    font-family: var(--font_family);
    color: var(--color__text);
}

input[type=button], input[type=submit], input[type="file"], select {
    padding: calc(var(--space_xs) / 2) var(--space_xs);
    border-radius: var(--rounded);
    border: var(--color__sabu2) 1px solid;
    background-color: var(--color__main);

    &:hover {
        filter: brightness(0.95);
    }

}

input[type=text] {
    border-radius: var(--rounded);
    border: var(--color__sabu2) 1px solid;
    background-color: var(--color__main);
}

input[type=button], input[type=submit] {

    &:hover {
        cursor: pointer;
    }
}

input[type="file"] {

    &:hover {
        cursor: pointer;
    }
}

textarea {
    padding: var(--space_m);
    border-radius: var(--rounded);
    border: var(--color__sabu2) 1px solid;
    background-color: var(--color__main);
}

hr {
    margin: var(--space_l) 0;
    border: none;
    border-top: var(--color__sabu2) 1px solid;
}

/*--------------------*/
/*ページサイズ*/
/*--------------------*/

header, main, nav.tools, footer {
    width: min(var(--page_width), calc(100% - 6rem));
}

/*--------------------*/
/*ヘッダー*/
/*--------------------*/

header {
    padding: var(--space_s);
    text-align: center;
    margin-top: var(--space_l);
    margin-bottom: var(--space_m);

    .site_title {
        color: var(--color__sabu4);
        margin-top: 0.2em;

        * {
            color: var(--color__sabu4);
            text-decoration: none;
        }

    }

    .sub_title {
        font-size: 1rem;
        color: var(--color__sabu2);
    }
    
    .header_icon {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 50%;
        margin-right: 1em;
    }

}

 hgroup {
 display: flex;
}

/*--------------------*/
/*メイン*/
/*--------------------*/

/*簡易投稿エリア*/

.postarea {
    width: 100%;
    margin-bottom: var(--space_xl);
}

.tegalogpost {
    width: 100%;
    min-height: 10rem;
    font-size: 16px; /* iPhoneでテキストエリアをタップしたときにニュッと拡大されるの防止 */
}

.line-control {
    margin-top: var(--space_s);
    margin-bottom: var(--space_s);
    letter-spacing: -0.4em; /* inline-blockのボタンの左に隙間があくの防止 */
}

.line-control span {
    margin-top: var(--space_xs);
}

input[type=submit].postbutton {
    padding: var(--space_s) var(--space_m);
    border-radius: calc(var(--space_s) * 3) / 50%;
}

.hashtagEasyInput {
    margin-right: var(--space_xs);
    padding: var(--space_s) var(--space_xs);
}

.changelink {
    display: none;
}

.decoBtns input[type=button] {
    margin-right: var(--space_xs);
}

.catChecks label {
    margin-right: var(--space_xs);
    font-size: 0.75rem;
    letter-spacing: 0; /* ↑のletter-spacingで表示が崩れるので再指定 */
}

/* 投稿する ボタンを右寄せ */
.submitcover {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space_m);
}

/*  ボタン群を改行したい */
.decoBtns {
    display: inline-block;
    margin-top: var(--space_s);
}

/* 画像段組み用の項目をちょっと離す */
.decoBtns.funcUIs :nth-child(4) {
    margin-left: var(--space_m);
}

/* 画像庫と管理画面へのリンク */
.quickpost_links {
    & .material-symbols-outlined {
        font-size: 1rem;
        color: var(--color__sabu2);
    }
    
    a {
        font-size:0.75rem;
        display: inline-flex;
        align-items:center;
        text-decoration: none;
    }
}


/*データセパレータ*/

.dateseparator {
    display: none;
}

/*記事*/

article.post {
    position: relative;
    margin: calc(var(--space_xl) * 2) 0;

    &:first-of-type {
        margin-top: 0;
    }

    &:last-of-type {
        margin-bottom: 0;
    }

    .header {
        display: flex;
        justify-content: right;
        gap: var(--space_m);
    }

    .footer {
        display: flex;
        justify-content: right;
        gap: var(--space_m);
    }

    .postdate {
        font-weight: bold;
    }
    
    .post_edit {
        & .material-symbols-outlined {
        font-size: 1.25rem;
        color: var(--color__sabu2);
        vertical-align: -4px;
    }
    }

}

/*固定投稿*/

.fixed {
    display: none;
}

.logstatus-fixed {

    .fixed {
        display: block;
        position: absolute;
        top: -1.25rem;
        right: 0;
        color: var(--color__sabu2);
    }

    & .material-symbols-outlined {
        font-size: 1.25rem;
        color: var(--color__sabu2);
    }

}

/*鍵付き投稿*/

.passkeybox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space_s);
    margin-bottom: var(--space_s);

    .passkeyguide, .passkeyinput, .submitcover {
        display: block;
        line-height: 1em;
    }

    .passkeyguide {
        width: 100%;
    }

    .passkeyinput {
        width: min(18rem ,100%);
        padding: var(--space_s);
        font-size: 1rem;
    }

    .passkeysubmit {
        padding: calc(var(--space_xs) / 2) var(--space_m);
    }

}

.locked {
    display: none;
}

.logstatus-lock {

    .locked {
        display: block;
        position: absolute;
        top: -1.25rem;
        right: 0;
        color: var(--color__sabu2);
    }

    & .material-symbols-outlined {
        font-size: 1.25rem;
        color: var(--color__sabu2);
    }
}

/*ページリスト*/

.pagenavi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: var(--space_m);
    margin: var(--space_xl) 0;

    .prev {
        text-align: right;
    }

    .pagelist {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space_s);

        a {
            display: block;
            width: 3rem;
            aspect-ratio: 1 / 1;
            padding: 1rem 0;
            box-sizing: border-box;
            overflow-x: visible;
            line-height: 1em;
            text-align: center;
            text-decoration: none;
            border-radius: 50%;
            border: var(--color__main) 1px solid;
        }

        a:hover {
            border: var(--color__sabu2) 1px solid;
        }

        .pagenumhere {
            background-color: var(--color__sabu);
        }

        .omitted {
            color: var(--color__sabu2);
        }

    }

    .next {
        text-align: left;
    }

}

/*個別投稿ページ*/

/* ユーティリティリンク */
.utilitylinks {
/*    display: none; */

    & ul {
        list-style: none;
    }
    
 /* さらにランダムに表示する の下に隙間をあける */
    & .urandom {
        padding-top : var(--space_m);
        padding-bottom: var(--space_xl);
    }   
    
 /* この投稿日時に関連する投稿： の表示を消す */
    & .udhead {
        display: none;
    }
  /* 日付まとめリンクの左の隙間を消す */
    & .datelinks {
    padding-left: 0;
    }
    
/* 時系列順に見る の表示を消す */
    .revlink {
        display: none;
    }

}

/*--------------------*/
/*ナビゲーション*/
/*--------------------*/

/*てがろぐの各種機能をナビゲーションとしてまとめている*/

nav.tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space_xl);
    margin-bottom: var(--space_xl);

    .title {
        .site_title {
            font-size: 1.25rem;
            font-weight: bold;
            text-decoration: none;
            color: var(--color__text);

        }

        .sub_title {
            font-size: 0.75rem;
        }

    }

    .other {
        display: flex;
        flex-direction: column;
        gap: var(--space_l);
    }

    & h2 {
        font-size: 1rem;
    }

    & ul {
        list-style: none;

        .num {
            display: none;
        }
    }
}

/*検索*/
.search {
    .searchbox {
        line-height: 1em;
    }

    & span.searchinputs {
        display: flex;
        gap: var(--space_s);

        > * {
            display: block;
            flex-grow: 1;

            > * {
                display: block;
                width: 100%;
            }

        }

    }

}

/*複合検索*/
.complexsearch {
    & p.searchbox {
        display: flex;
        gap: var(--space_s);
        margin-bottom: var(--space_s);

        > * {
            display: block;
            flex-grow: 1;

            > * {
                display: block;
                width: 100%;
            }
        }
    }

    & ul {
        display: flex;
        flex-direction: column;
        gap: var(--space_s);
        list-style: none;
    }
}

/*カレンダー*/
div.calendar {
    & table.calendar {
        width: 100%;
        text-align: center;
    }
}

/*新着画像*/
.imagelist {

    .list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space_s);
    }

    .imagelistitem {
        display: block;
        width: calc((100% - var(--space_s))/2);
        height: auto;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 0.25rem;

        & a {
            display: block;
            width: 100%;
            height: 100%;
        }

        & img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

}

/*カテゴリー*/
.categoryarea {
    column-count: 2;

    ul {
        padding-left: 0;
        text-indent: 0;
        list-style: none;
    }

}

/*ハッシュタグ*/
.hashtag {
    ul {
        padding-left: 0;
        text-indent: 0;
        list-style: none;
    }

    ul.hashtaglist {
        li {
            display: inline-block;
            margin-right: var(--space_m);
        }

        li:last-child {
            margin-right: 0;
        }

    }

    .taglink {

        &::before {
            /*ハッシュタグ表示*/
            content: "#";
        }

    }
}

/*最近の投稿*/

.latestpostlist {
    padding-left: 0;
    text-indent: 0;

    .username {
        display: none;
    }
}

/* 年まとめ折りたたみ日付リスト */

.datelimit-expand {
    margin-left: var(--space_m);/* 折りたたみの中身に余白をつける */
    margin-bottom: var(--space_s);
    
    span.num{
    font-size: 0.75rem;
    color: var(--color__sabu3);
    }
}

.datelistlink span.year {
    display: none;/* 被っている年数表示を消す */
}

.datelimitsublist {
    column-count: 3;
}


/*--------------------*/
/*フッター*/
/*--------------------*/

footer {
    display: flex;
    justify-content: center;
    padding-top: var(--space_m);

    .settings {
        font-size: 1rem;
        
        a {
            text-decoration: none;
        }
    }

}

/*--------------------*/
/*汎用装飾*/
/*--------------------*/

/* B:太字(Bold) */
.decorationB {
    font-weight: bold;
}

/* D:削除(Delete) */
.decorationD {
    color: var(--color__sabu3);
    text-decoration: line-through var(--color__sabu3);
}

/* E:強調(Emphasis) */
.decorationE {
    background:linear-gradient(transparent 60%, var(--color__sabu2) 40%);
}

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

/* Q:引用(Quote) */
.decorationQ {
    margin: var(--space_m) 0;
    padding: var(--space_m);
    border: var(--color__sabu2) 1px solid;
    border-radius: var(--rounded);
    background-color: var(--color__sabu);
}

.decorationQ::before,
.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: underline var(--color__text);
}

/*続きを読む*/
.readmorebutton {
    display: block;
    width: fit-content;
    padding: var(--space_xs) var(--space_m);
    text-decoration: none;
    font-size: 1rem;
    border: var(--color__sabu2) 1px solid;
    border-radius: calc(1rem + var(--space_xs));
}

/*続きを読む（閉じるボタン）*/
/*
.readmoreclose {

}
*/

/*リスト*/

.decorationL {
    & + br {
        display: none;
    }
}

dl.decorationL {
    & dd {
        padding-left: 2rem;
    }
}

/*--------------------*/
/* 埋め込み画像 */
/*--------------------*/

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

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

img.nsfw {
    filter: blur(9px); /* ぼかす */
}
  
.imagelink {
    display: inline-block;
    overflow: hidden;
}

.embeddedpictbox {

    margin-bottom: var(--space_s);
    line-height: 1em;

    &:last-child {
        margin-bottom: 0;
    }

    /*
    .imagelink  {
    }
    */

    & figcaption{
        font-size: 0.75rem;
    }

    & + br {
        display: none;
    }
}

/*--------------------*/
/*レスポンシブ*/
/*--------------------*/

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

    .pagenavi {
        .prev > *, .next > * {
            display: none;
        }
    }

    nav.tools {
        grid-template-columns: none;
        grid-template-rows: auto;
    }

}

/*--------------------*/
/*自由装飾（画像複数カラム化）*/
/*--------------------*/

.deco-2column, .deco-3column, .deco-2column_m, .deco-3column_m {
    .imagelink {
        display: block;
    
        & + br {
            display: none;
        }
    }

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/*画像の二カラム化*/

.deco-2column {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_m) var(--space_s);
    margin-top: var(--space_s);

    & .imagelink {
        max-width: calc((100% - var(--space_s))/2);
        margin: 0;
        height: fit-content;
    }

    & .embeddedpictbox {
        max-width: calc((100% - var(--space_s))/2);
        margin: 0;
        height: fit-content;
        
        & .imagelink {
            max-width: 100%;
        }
    }
}

/*画像の三カラム化*/

.deco-3column {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space_m) var(--space_s);
    margin-top: var(--space_s);

    & .imagelink {
        max-width: calc((100% - 1rem)/3);
        margin: 0;
        height: fit-content;
    }

    & .embeddedpictbox {
        max-width: calc((100% - 1rem)/3);
        margin: 0;
        height: fit-content;

        & .imagelink {
            max-width: 100%;
        }
    }
    
}

/*二カラムmasonry版（敷き詰めるようなデザイン）*/
/*異なる画像幅の画像を並べるときはこちらを推奨*/

.deco-2column_m {
    display: block;
    column-count: 2;
    margin-top: var(--space_s);

    & .imagelink {
        max-width: 100%;
        break-inside: avoid;
        margin: 0 0 var(--space_s);
    }

    & .embeddedpictbox {
        max-width: 100%;
        break-inside: avoid;
        margin: 0 0 var(--space_s);

        .imagelink  {
            margin: 0;
        }
    }
}

/*三カラムmasonry版*/

.deco-3column_m {
    display: block;
    column-count: 3;
    margin-top: var(--space_s);

    & .imagelink {
        max-width: 100%;
        break-inside: avoid;
        margin: 0 0 var(--space_s);
    }

    & .embeddedpictbox {
        max-width: 100%;
        break-inside: avoid;
        margin: 0 0 var(--space_s);

        .imagelink  {
            margin: 0;
        }
    }
}

/*--------------------*/
/*その他*/
/*--------------------*/

.url {
    /*ＵＲＬがボックスから食み出ないように設定。*/
    /*ＵＲＬがボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    word-break: break-all;
}

.embeddedmovie{
    /*動画がボックスから食み出ないように設定。*/
    /*動画がボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    display: block;
    max-width:100%;
}

.embeddedmovie iframe{
    /*埋め込みコンテンツ（動画）がボックスから食み出ないように設定。*/
    /*埋め込みコンテンツ（動画）がボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    display: block;
    max-width:100%;
}

iframe.instagram-media {
    /*埋め込みコンテンツ（インスタ）がボックスから食み出ないように設定*/
    /*埋め込みコンテンツ（インスタ）がボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    max-width: 100% !important;
    min-width: initial !important;
}

.embeddedmusic iframe {
    /*埋め込みコンテンツ（音声）がボックスから食み出ないように設定。*/
    /*埋め込みコンテンツ（音声）がボックスから食み出ると、レスポンシブデザインが崩れることがある。*/
    max-width: 100% !important;
    min-width: initial !important;
}


/* てがろぐ v4.5.5以降 OGPカード用の公式配布CSS */
/* ---------------------- */
/* ▼カード型リンクの装飾 */
/* ---------------------- */

.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:var(--color__sabu);/* 背景色 */
border-color:var(--color__sabu2);/* 枠線色 */
}

/* ▽リンクカード内の画像枠 (※読み込まれた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;/* 文字サイズ(小さめ) */
}