﻿/* 設定１つ  - 四辺すべてに適用 */
/* 設定２つ  - 上下 | 左右 */
/* 設定３つ  - 上 | 左右 | 下 */
/* 設定４つ  - 上 | 右 | 下 | 左 */

/* 濃い目のオレンジ　#EC7336 */
/* 黒文字 #333333 */


#datablk { /*kkcwebcom.css での定義を上書き （左右のmarginを0に）*/
    margin: 20px 0 !important;
}

.cpsd {
    display: flex;
    flex-wrap: nowrap;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0 auto;
    font-weight: 500;
    max-width: calc(1200px + 30px); /* 30px = imgの余白分 */
    justify-content: center;
}

    .cpsd > .outerbox {
        max-width: 900px;
    }
        .cpsd > .outerbox > .plist {
            width: 100%;
        }
            .cpsd > .outerbox > .plist > a {
                color: #0000ff;
            }
        .cpsd > .outerbox > .box {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            box-shadow: 3px 3px 8px rgba(0.3, 0.3, 0.3, 0.3);
            border-radius: 7px;
            margin-top: 10px;
        }

                .cpsd > .outerbox > .box > .photo {
                    position: relative;
                }

                    .cpsd > .outerbox > .box > .photo > img {
                        width: 400px;
                        border-start-start-radius: 5px;
                    }

                    .cpsd > .outerbox > .box > .photo > .pr {
                        position: absolute;
                        top: 0;
                        left: 0;
                        padding: 2px 5px;
                        background-color: #C0C0C0;
                        font-size: 10pt;
                        color: #ffffff;
                        border-start-start-radius: 5px;
                    }

                .cpsd > .outerbox > .box > .caption {
                    display: flex;
                    flex-direction: column;
                    min-width: 200px;
                    max-width: 400px;
                    padding: 10px;
                    align-content: space-between;
                }

                    .cpsd > .outerbox > .box > .caption > .title_box {
                        flex-grow: 1;
                    }

                        .cpsd > .outerbox > .box > .caption > .title_box > .hnnm {
                            margin-top: 20px;
                            line-height: 30px;
                            font-size: 18pt;
                        }

                    .cpsd > .outerbox > .box > .caption > .toi_box {
                    }

                        .cpsd > .outerbox > .box > .caption > .toi_box > .toi {
                            margin-left: 5px;
                            line-height: 25px;
                            font-size: 8pt;
                        }

                        .cpsd > .outerbox > .box > .caption > .toi_box > .toi_kinm {
                            margin-left: 10px;
                            line-height: 25px;
                            font-size: 10pt;
                            color: #000000;
                            text-decoration-skip-ink: none;
                        }

                        .cpsd > .outerbox > .box > .caption > .toi_box > .toi_addr {
                            margin-left: 10px;
                            line-height: 25px;
                            font-size: 10pt;
                        }

                        .cpsd > .outerbox > .box > .caption > .toi_box > .toi_tel {
                            margin-left: 10px;
                            line-height: 25px;
                            font-size: 10pt;
                        }
                            .cpsd > .outerbox > .box > .caption > .toi_box > .toi_tel >span  {
                                margin-right: 15px;
                            }

                        .cpsd > .outerbox > .box > .caption > .toi_box > .toi_url {
                            margin-left: 10px;
                            line-height: 25px;
                            font-size: 10pt;
                        }

                            .cpsd > .outerbox > .box > .caption > .toi_box > .toi_url > a {
                                color: #444444;
                                text-decoration: none;
                            }

                .cpsd > .outerbox > .box > .tagbox {
                    display: flex;
                    width: 100%;
                    min-height: 35px;
                    justify-content: space-between;
                    align-items: flex-start;
                    padding: 5px 10px;
                }

                    .cpsd > .outerbox > .box > .tagbox > .taglist {
                        display: flex;
                        flex-wrap: wrap;
                    }

                        .cpsd > .outerbox > .box > .tagbox > .taglist > .tag {
                            line-height: 20px;
                            font-size: 10pt;
                            color: #0000ff;
                            margin-right: 10px;
                            text-decoration: none;
                        }

                        .cpsd > .outerbox > .box > .tagbox > .taglist > .tag:hover {
                            text-decoration: underline;
                        }

                    .cpsd > .outerbox > .box > .tagbox > #btn_toi {
                        height: 30px;
                        background-color: #EC7336;
                        font-size: 12pt;
                        color: #ffffff;
                        padding: 5px 10px;
                        border-radius: 5px;
                        white-space: nowrap;
                        cursor: pointer;
                    }

                        .cpsd > .outerbox > .box > .tagbox > #btn_toi.disabled {
                            background-color: #777777;
                            color: #BBBBBB;
                            cursor: not-allowed;
                        }
/***************************************/
/**** 共通 *****************************/
/***************************************/
.mark { /*下付きレジスターマーク等*/
    vertical-align: sub;
    transform: translateY(0.25em);
}

@media (max-width: 1550px) {
}
