@charset "UTF-8";

/* BRAND: brand pages only. */

.c-weak {
    font-size: 2.5rem;
    font-weight: 400;
}

@media only screen and (width<=767px) {
    .c-weak {
        font-size: 1.5rem;
    }
}

.c-weak.mofc{
    font-size: clamp(1.25rem, 1.0946rem + 0.663vw, 1.625rem);
}

/* .p-keyvisual__category */
.p-keyvisual__category.c-keyvisual {
    max-width: 1280px;
    height: auto;
    display: grid;
    grid-template-rows: unset;
    
}


@media screen and (min-width: 768px) {
.p-content__header {
    width: 100%;
}

.p-keyvisual__category.c-keyvisual {
    margin-inline: auto;
}
}

.p-keyvisual__category.c-keyvisual .c-keyvisual__image,
.p-keyvisual__category.c-keyvisual .c-keyvisual__caption {
    grid-area: 1/1;
}

@media screen and (width>=768px) {
.c-keyvisual__image {
    object-fit: cover;
    width: 100%;
}
}
@media screen and (width>=768px) and (width<=1280px){
.c-keyvisual__image{
    height: 400px;
}
}
@media screen and (width>=1280px){
.c-keyvisual__image{
    height: 520px !important;
}
}

.p-keyvisual__category.c-keyvisual .c-keyvisual__caption {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
    background: rgba(0,0,0,.35);
    margin-bottom: 0;
}


.p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title {
    color: #fff;
    text-shadow:
	rgba(0,0,0,0.4) 1px 1px 10px,rgba(0,0,0,0.4) -1px 1px 10px,
	rgba(0,0,0,0.4) 1px -1px 10px, rgba(0,0,0,0.4) -1px -1px 10px;
    width: calc(100% - 2rem);
    height: auto;
    margin: auto 0;
    display: block;
    line-height: 1.1;
}
@media only screen and (width <= 767px) {
    .p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title {
        margin-top: 25vw;
        line-height: 1.1;
        font-size: 6vw;
        font-weight: 400;
    }
     #brand-mofc .c-title.brand {
    line-height: 0;
  }

  #brand-mofc .c-title.brand > .c-text {
    line-height: 1.1;

  }

  #brand-mofc .c-title.brand > .c-text:last-child {
    display: block;
    width: 100%;
    line-height: 1.1;
  }


}

@media print,
screen and (width>=1280px) {
    .p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title {
        width: clamp(1152px, 1152px, 91vw);
    }
}

.c-title.brand .c-text{
    line-height: 1.1;
}

.c-text.brand{
    line-height: 2.5;
}

.p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title>.c-text+br+.c-text{
    font-size: 15vw;
    font-family: "circe", sans-serif;
    font-weight: 500;
}

.p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title>.c-text+br+.c-text+br+.c-text {
    line-height: 1.4;
    font-size: 5vw;
  font-family: Noto Sans JP, sans-serif;
  line-height: 1.4;
}

@media only screen and (width>=768px) and (width<=1279px) {
    .p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title>.c-text {
        font-size: 4vw;
    }

    .p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title>.c-text+br+.c-text {
        font-size: 12vw;
        font-weight: 400;
    }

    .p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title>.c-text+br+.c-text+br+.c-text {
        font-size: 3vw;
    }
}

@media print,
screen and (width>=1280px) {
    .p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title>.c-text {
        font-size: 48px;
        font-weight: 600;
    }

    .p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title>.c-text+br+.c-text {
        font-size: 150px;
        font-weight: 300;
    }

    .p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title>.c-text+br+.c-text+br+.c-text {
        font-size: clamp(1.5rem, 1.0856rem + 1.768vw, 2.5rem);
        font-weight: 350;
    }
}

.p-keyvisual__category.c-keyvisual .c-keyvisual__caption>.c-title>.c-text+br+.c-text sup {
    font-size: 50%;
    vertical-align: top;
}

/* p-contents-body */
.p-contents-body {
    width: calc(100% - 2rem);
}

.p-contents-body sup{
    font-size: .7em;
    vertical-align: super;
}

@media print,
screen and (width>=1280px) {
    .p-contents-body {
        width: clamp(1152px, 1152px, 91vw)
    }
}

.p-contents-body__content.brand{
    border-bottom: none;
    margin-top: 0;
}

.p-contents-body__content--title.no-space{
    margin-top: 1rem;
    padding-bottom: 0;
}

.p-contents-body__content--text {
    width: 100%;
}

/* decorative background */
.c-through {
    position: relative;
    width: 100vw;
    margin: 6.25rem calc(50% - 50vw) 0;
    overflow: hidden;
    isolation: isolate;
}

.c-through::before,
.c-through::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.c-through::before {
    z-index: -2;
    background-image: var(--through-background);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: blur(20px);
    transform: scale(1.08);
}

.c-through::after {
    z-index: -1;
    background-color: rgb(0 0 0 / 25%);
}

.c-through>img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1920px;
    height: auto;
    margin-inline: auto;
}

.c-through:has(>img[src*="mofc"]) {
    --through-background: url("../../../jp/assets/images/brand/mofc-img1.webp");
}

.c-through:has(>img[src*="rox"]) {
    --through-background: url("../../../jp/assets/images/brand/rox-img1.webp");
}

.c-through:has(>img[src*="msp"]) {
    --through-background: url("../../../jp/assets/images/brand/msp-img1.webp");
}

.c-through:has(>img[src*="ecobrass"]) {
    --through-background: url("../../../jp/assets/images/brand/ecobrass-img1.webp");
}

@media only screen and (width<=767px) {
    .c-through {
        margin-top: 13.3vw;
    }
}

/* Brand-series heading: aligned text with a full-viewport gradient below. */
h2.p-contents-body__main-title.c-through {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 6.25rem 0 0;
    padding: 0;
    overflow: visible;
    border-bottom: 0;
    isolation: auto;
}

h2.p-contents-body__main-title.c-through::after {
    content: "";
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100svw;
    height: 24px;
    margin: 24px auto 24px calc(50% - 50svw);
    background: linear-gradient(#0000001a 0%, #0000 100%);
    filter: none;
    transform: none;
    pointer-events: none;
    display: block;
}

h2.p-contents-body__main-title.c-through::before {
    content: none;
    display: none;
}

h2.p-contents-body__main-title.c-through>.c-inner {
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    display: block;
}

@media only screen and (width<=767px) {
    h2.p-contents-body__main-title.c-through {
        margin-top: 13.3vw;
    }
}


.p-contents-body__content--image {
    padding-top: 0;