@charset "utf-8";

/*
------------------------
/contact/
------------------------
*/

#container.directory-contact.file-index #main .image-area {
    max-width: 600px;
    width: 96%;
    margin: var(--wide-section-vertical-spacing) auto 0;
}


/*
------------------------
/contact/chat-room.php
/mypage/chat-room.php
------------------------
*/

#container.file-chat-room #main .order-information,
#container.file-chat-room #main form {
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    padding: 8px;
}

#container.file-chat-room #main .order-information {
    display: flex;
}

#container.file-chat-room #main .item-list:last-of-type {
    margin-bottom: 16px;
}

#container.file-chat-room #main form table {
    margin-bottom: 16px;
}

#container.file-chat-room #main form .js-input-area.textarea {
    display: block;
    margin-bottom: 8px;
}

#container.file-chat-room #main form .js-input-area.textarea textarea {
    margin-top: 0;
}

#container.file-chat-room #main form .image-area {
    max-width: 534px;
    margin-left: auto;
    margin-bottom: 8px;
}

#container.file-chat-room #main form .answer {
    position: relative;
    text-align: right;
}

#container.file-chat-room #main form .answer button[type="submit"] {
    display: inline-block;
}

#container.file-chat-room #main form .answer .analytics {
    left: initial;
    right: 0;
}

#container.file-chat-room #main .ease,
#container.file-chat-room #main .site {
    clear: both;
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    padding: 8px;
}

#container.file-chat-room #main .ease .content,
#container.file-chat-room #main .site .content {
    color: var(--content-font-color);
    background-color: var(--content-background-color);
    width: calc(60% - 107px);
    padding: 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    text-align: left;
}

#container.file-chat-room #main .ease .content>p,
#container.file-chat-room #main .site .content>p {
    padding: 8px 8px 0 0;
}

#container.file-chat-room #main .ease .content a,
#container.file-chat-room #main .site .content a {
    color: var(--link-font-color);
}

#container.file-chat-room #main .ease .content .image,
#container.file-chat-room #main .site .content .image {
    max-width: 180px;
    width: 100%;
}

#container.file-chat-room #main .ease .name,
#container.file-chat-room #main .site .name {
    clear: both;
    padding: 8px 16px 4px;
    line-height: 1;
}

#container.file-chat-room #main .ease .date,
#container.file-chat-room #main .site .date {
    margin-bottom: 8px;
    padding: 0 16px;
    font-size: 0.8em;
}

#container.file-chat-room #main .site .order-area,
#container.file-chat-room #main .content .image-item {
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    padding: 6px;
}

#container.file-chat-room #main .site .order-area dl {
    display: flex;
    flex-wrap: wrap;
    border: solid 1px var(--border-color);
    border-radius: 2px;
    padding: 6px;
    margin-bottom: 6px;
}

#container.file-chat-room #main .site .order-area dl dt {
    width: 110px;
}

#container.file-chat-room #main .site .order-area dl dd {
    width: calc(100% - 110px);
}

#container.file-chat-room #main .site .order-area .image-item {
    border-bottom: solid 1px var(--border-color);
}

#container.file-chat-room #main .site .order-area .image-item:last-of-type {
    border: none;
}

/* 商品詳細 */
#container.file-chat-room #main .content .image-item .list-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#container.file-chat-room #main .content .image-item .list-detail .square-area {
    width: 120px;
}

#container.file-chat-room #main .content .image-item .list-detail article {
    width: calc(100% - 128px);
    min-width: fit-content;
}

#container.file-chat-room #main .content .image-item .list-detail article .item-id span {
    margin-right: 6px;
}


/* right site */

#container.file-chat-room #main .site {
    text-align: right;
}

#container.file-chat-room #main .site .profile {
    width: 60px;
    height: 60px;
    margin-left: 15px;
    float: right;
}

#container.file-chat-room #main .site .content {
    position: relative;
    float: right;
}

#container.file-chat-room #main .site .content::before {
    content: "";
    position: absolute;
    right: -20px;
    top: 20px;
    border: 10px solid transparent;
    border-left: 10px solid var(--content-background-color);
}


/* left ease */

#container.file-chat-room #main .ease .profile {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    float: left;
}

#container.file-chat-room #main .ease .content {
    position: relative;
    float: left;
}

#container.file-chat-room #main .ease .content::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 20px;
    border: 10px solid transparent;
    border-right: 10px solid var(--content-background-color);
}


/* sp */

@media only screen and (max-width: 640px) {
    #container.file-chat-room #main .ease .content,
    #container.file-chat-room #main .site .content {
        width: calc(100% - 107px);
    }
}