@charset "utf-8";
/*
|---------------------------------------------------------------
| ハルカスニッポン博覧会 ブランド共通
|---------------------------------------------------------------
*/
.e-bussanFairBrand {
    --ep-area-theme-color: var(--ep-theme-color);
    --ep-area-theme-foreground-color: var(--ep-theme-foreground-color);
}
.e-bussanFairBrand__abouts {
    display: block;
    width: 100%;
}
.e-bussanFairBrand__messages {
    display: block;
    width: 100%;
}

/*
 * MV
------------------------------------------------*/
.e-bussanFairBrand-mv {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.e-bussanFairBrand-mv__head {
    display: block;
    width: 100%;
}
.e-bussanFairBrand-mv__image {
    display: block;
    width: 100%;
}
.e-bussanFairBrand-mv__image img {
    display: block;
    width: 100%;
    height: auto;
}

.e-bussanFairBrand-area {
    width: 100%;
    display: flex;
    align-items: stretch;
    font-size: 1em;
    line-height: 1.25;
    border-top: 3px solid var(--ep-area-theme-color);
}
.e-bussanFairBrand-area__main {
    display: block;
    width: auto;
    flex: 0 0 auto;
    padding: 0.25em 0.5em;
    font-size: 1em;
    color: var(--ep-area-theme-foreground-color);
    background-color: var(--ep-area-theme-color);
}
.e-bussanFairBrand-area__text {
    display: block;
    width: 100%;
    padding: 0.25em 0.5em;
    flex-grow: 1;
    flex-basis: 0;
    font-size: 1em;
}

/*
 * About
------------------------------------------------*/
.e-bussanFairBrand-about {
    --ep-about-padding-x: 20px;
    --ep-about-gap-base: 20px;
    display: block;
    width: 100%;
    margin: 20px 0;
    padding: 0;
    font-size: 1em;
    overflow: hidden;
}
.e-bussanFairBrand-about__header {
    display: block;
    width: 100%;
    margin: 0 0 calc(var(--ep-about-gap-base) * 1.5);
    padding: 0;
}
.e-bussanFairBrand-about__body {
    display: block;
    width: 100%;
    padding: 0 var(--ep-about-padding-x);
}

.e-bussanFairBrand-about__body p {
    margin: 0 0 calc(var(--ep-about-gap-base) * 1);
}
.e-bussanFairBrand-about__body dl {
    margin: 0 0 var(--ep-about-dl-margin-bottom, calc(var(--ep-about-gap-base) * 1));
}
.e-bussanFairBrand-about__body dl dt {
    margin: 0 0 var(--ep-about-dt-margin-bottom, calc(var(--ep-about-gap-base) * 0.5));
    font-size: var(--ep-about-dt-font-size, 1em);
    font-weight: 700;
}
.e-bussanFairBrand-about__body dl dd {
    margin: 0 0 calc(var(--ep-about-gap-base) * 0.5);
    font-size: var(--ep-about-dd-font-size, 1em);
}

.e-bussanFairBrand-about-title {
    display: block;
    width: 100%;
    margin: 0 0 0.5em;
    padding: 0.55em 1.25em;
    font-size: 24px;
    line-height: 1.25;
    text-align: left;
    /* font-family: '游明朝', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ＭＳ 明朝', serif; */
    color: var(--ep-foreground-color);
    background-color: #F7F7F7;
}
@container (width < 750px) {
    .e-bussanFairBrand-about-title {
        text-align: center;
    }
}

.e-bussanFairBrand-about-images {
    width: 100%;
    margin: calc(var(--ep-about-gap-base) * 2) 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: clamp(10px, 2.4cqw, 20px);
}
.e-bussanFairBrand-about-images img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
}
@container (width > 750px) {
    .e-bussanFairBrand-about__body .e-bussanFairBrand-about-images {
        width: auto;
        margin-left: calc(-1 * var(--ep-about-padding-x));
        margin-right: calc(-1 * var(--ep-about-padding-x));
    }
}

.e-bussanFairBrand-about-movie {
    --ep-about-dl-margin-bottom: calc(var(--ep-about-gap-base) * 2);
    width: 100%;
}
.e-bussanFairBrand-about-movie > dt {
    --ep-about-dt-font-size: 1.2em;
    --ep-about-dt-margin-bottom: calc(var(--ep-about-gap-base) * 1.25);
    text-align: center;
}
.e-bussanFairBrand-about-movie video,
.e-bussanFairBrand-about-movie iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 315;
    max-width: var(--ep-about-movie-width, 720px);
    margin: 0 auto;
}

/*
 * Message
------------------------------------------------*/
.e-bussanFairBrand-messages {
    --ep-message-theme-color: color-mix(in srgb, var(--ep-theme-color, #164a96), #fff 70%);
    --ep-message-image-frame-size: round(clamp(6px, 1.33vw, 10px), 1px);
    --ep-message-content-padding-y: 20px;
    --ep-message-content-padding-x: 15px;
    --ep-message-content-border-size: 2px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 3.58cqw, 30px);
}

.e-bussanFairBrand-message {
    width: 100%;
}
.e-bussanFairBrand-message__layout {
    --ep-message-gap: clamp(10px, 3.58cqw, 30px);
    --ep-message-overgap: clamp(50px, 11.9cqw, 100px);
    width: 100%;
}
.e-bussanFairBrand-message__layout__image {
    display: block;
    width: 100%;
    position: relative;
    z-index: 2;
}
.e-bussanFairBrand-message__layout__body {
    display: block;
    width: 100%;
}
@container (width > 750px) {
    .e-bussanFairBrand-message {
        --ep-message-title-align: flex-start;
    }
    .e-bussanFairBrand-message__layout {
        width: 100%;
        display: flex;
        gap: var(--ep-message-gap);
    }
    .e-bussanFairBrand-message__layout__image {
        width: auto;
        flex: 0 0 min(350px, 41.7cqw);
        max-width: (350px, 41.7cqw);
    }
    .e-bussanFairBrand-message__layout__body {
        width: 100%;
        flex-grow: 1;
        flex-basis: 0;
    }
}

.e-bussanFairBrand-message-image {
    display: block;
    width: 100%;
    border-style: solid;
    border-width: 0 var(--ep-message-image-frame-size) var(--ep-message-image-frame-size) 0;
    border-color: var(--ep-message-theme-color);
}
.e-bussanFairBrand-message-image img {
    display: block;
    width: 100%;
    height: auto;
}

.e-bussanFairBrand-message-title {
    width: 100%;
    padding: 0.5em 0;
    display: flex;
    flex-direction: column;
    align-items: var(--ep-message-title-align, center);
    gap: 0.25em;
    font-size: 1.25em;
}
.e-bussanFairBrand-message-title__badge {
    display: block;
    width: auto;
    flex: 0 0 auto;
    max-width: 100%;
    padding: 0.5em 0.75em;
    font-size: max(10px, 0.7em);
    line-height: 1;
    color: #ffffff;
    background: #111111;
}
.e-bussanFairBrand-message-title__main {
    display: block;
    font-size: 1em;
    font-weight: 700;
}

.e-bussanFairBrand-message-content {
    display: block;
    width: 100%;
    padding: var(--ep-message-content-padding-y) var(--ep-message-content-padding-x);
    border: var(--ep-message-content-border-size) solid var(--ep-message-theme-color);
}
@container (width > 750px) {
    .e-bussanFairBrand-message-content {
        width: auto;
        margin-left: calc(-1 * (var(--ep-message-overgap) + var(--ep-message-gap)));
        padding-left: calc(var(--ep-message-overgap) + var(--ep-message-gap) - var(--ep-message-content-border-size));
    }
}

.e-bussanFairBrand-message-content dl {
    font-size: 0.95em;
}
.e-bussanFairBrand-message-content dl dt {
    margin: 0 0 0.5em;
    font-size: 1em;
    font-weight: 700;
}
.e-bussanFairBrand-message-content dl dd {
    font-size: 1em;
}

/*
 * バイヤーのおすすめポイント！
------------------------------------------------*/
.e-bussanFairBrand-buyers {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.e-bussanFairBrand-buyer {
    --ep-buyer-message-border-color: #ccc;
    --ep-buyer-message-border-size: 2px;
    --ep-buyer-message-padding-y: 20px;
    --ep-buyer-message-padding-x: 20px;
    --ep-buyer-image-width: 120px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 var(--ep-container-padding-x, 15px);
    border-bottom: 4px solid #333333;
    font-size: 0.9em;
}
.e-bussanFairBrand-buyer__image {
    order: 1;
    position: relative;
    z-index: 2;
    margin-top: -30px;
}
.e-bussanFairBrand-buyer__image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: var(--ep-buyer-image-width);
    margin-left: auto;
}
.e-bussanFairBrand-buyer__content {
    display: block;
}

.e-bussanFairBrand-buyer-message {
    display: block;
    width: 100%;
    padding: var(--ep-buyer-message-padding-y) var(--ep-buyer-message-padding-x);
    border-style: solid;
    border-color: var(--ep-buyer-message-border-color);
    border-width: var(--ep-buyer-message-border-size) 0;
    background-image:
        linear-gradient(var(--ep-buyer-message-border-color)),
        linear-gradient(var(--ep-buyer-message-border-color)),
        linear-gradient(var(--ep-buyer-message-border-color)),
        linear-gradient(var(--ep-buyer-message-border-color));
    background-repeat: no-repeat;
    background-size:
        var(--ep-buyer-message-border-size) 10px,
        var(--ep-buyer-message-border-size) 10px,
        var(--ep-buyer-message-border-size) 10px,
        var(--ep-buyer-message-border-size) 10px;
    background-position:
        left top,
        right top,
        left bottom,
        right bottom;
    position: relative;
}
.e-bussanFairBrand-buyer-message::after {
    content: "";
    pointer-events: none;
    display: block;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-style: solid;
    border-width: var(--ep-border-width) var(--ep-border-width) 0 0;
    border-color: var(--ep-buyer-message-border-color);
    position: absolute;
    z-index: 1;
    top: 100%;
    right: calc(var(--ep-buyer-image-width) + 20px);
    border-width: round(calc(var(--ep-buyer-message-border-size) * 1.5), 1px) var(--ep-buyer-message-border-size);
    border-color: var(--ep-buyer-message-border-color) var(--ep-buyer-message-border-color) transparent transparent;
    transform: translateY(-50%) scale(-1, 1) rotate(190deg) skewY(-50deg);
}

.e-bussanFairBrand-buyer-message > * {
    position: relative;
    z-index: 2;
}
.e-bussanFairBrand-buyer-message dl {
    margin: 0;
}
.e-bussanFairBrand-buyer-message dl dt {
    font-weight: 700;
    margin: 0 0 0.5em;
}
.e-bussanFairBrand-buyer-message dl dd {
    font-weight: 400;
}
.e-bussanFairBrand-buyer-message dl dd {
    font-weight: 400;
}

.e-bussanFair-buyer-name {
    display: block;
    margin: 0.5em 0 0;
    text-align: left;
    font-size: max(10px, 0.85em);
}

@container (width > 750px) {
    .e-bussanFairBrand-buyer {
        width: 100%;
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        gap: 16px;
    }
    .e-bussanFairBrand-buyer__image {
        order: 1;
        align-self: flex-end;
        width: auto;
        flex: 0 0 18.75%;
        max-width: 150px;
    }
    .e-bussanFairBrand-buyer__image img {
        max-width: 100%;
    }
    .e-bussanFairBrand-buyer__content {
        width: 100%;
        flex-grow: 1;
        flex-basis: 0;
        padding: 0 0 20px;
    }
    .e-bussanFairBrand-buyer-message {
        border-width: 0 var(--ep-buyer-message-border-size);
        background-size:
            10px var(--ep-buyer-message-border-size),
            10px var(--ep-buyer-message-border-size),
            10px var(--ep-buyer-message-border-size),
            10px var(--ep-buyer-message-border-size);
        background-position:
            left top,
            right top,
            left bottom,
            right bottom;
    }
    .e-bussanFairBrand-buyer-message::after {
        top: 27.7%;
        left: 100%;
        right: auto;
        border-width: round(calc(var(--ep-buyer-message-border-size) * 1.5), 1px) var(--ep-buyer-message-border-size);
        border-color: var(--ep-buyer-message-border-color) var(--ep-buyer-message-border-color) transparent transparent;
        transform: translateX(-50%) rotate(100deg) skewY(-50deg);
    }
    .e-bussanFair-buyer-name {
        text-align: right;
    }
}