@charset "utf-8";

/* 【PC】1440px〜1919px
コンテンツ幅：1200px
+最大幅1440px
左右margin：60px

【タブレット】768px〜1023px
コンテンツ幅：768px
左右margin：40px

【スマホ】≦767px
コンテンツ幅：390px
375 / 393 / 430px は左右パディングで調整。可変フレックスで文字折り返し確認を。
左右margin：10px~20px

ファーストビュー高の目安：
PC 750px ／ SP 600–650px */


/* archive共通____________________________________________________________ */
.card {
    max-width: 500px;
    margin: 0 auto;
}

.thumbnail img{
    max-height: 262px;
}

.textbox {
    height: 120px;
}

/* タブレット */
@media screen and (min-width:768px) {
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* PC */
@media screen and (min-width:1440px) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid__case{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}


/* アート一覧____________________________________________________________ */
.textbox .flex:first-of-type {
    display: flex;
    gap: 5px;
}

.textbox .flex:first-of-type h4,
.textbox .flex:first-of-type p{
    font-size: 14px;
    font-weight: 500;
}

.textbox .flex:nth-of-type(2) {
    display: flex;
    justify-content: space-between;
}

.planname {
    font-size: 12px;
    color: #0B3C6F;
    background-color: #F5F5F5;
    border: solid 1px #0B3C6F;
    border-radius: 50px;
    padding: 0 8px;
    display: inline-block;
}

.size{
    font-size: 12px;
}


/* レンタル中ラベル */
.corner-label {
    position: relative;
}

/* ラベル部分 左上に表示 */
.corner-label::before {
    content: "";
    top: 0;
    left: 0;
    border-bottom: 5.3em solid transparent;
    border-left: 5.3em solid #F14949;
    position: absolute;
    z-index: 100;
}

.corner-label::after {
    content: "レンタル中";
    display: block;
    top: 25px;
    transform: rotate(-45deg);
    color: #fff;
    left: 0;
    position: absolute;
    z-index: 101;
    font-size: 13px;
    font-weight: 500;
}