.showroom-container {
    --content-max-width: 850px;
    --marker-yellow: linear-gradient(transparent 55%, #f5f084 55%, #f5f084 85%, transparent 85%, transparent 100%);
    --border-radius: 30px;
}

.showroom-wrapper {
    font-size: 16px;
    line-height: 1.7;
    width: 100%;
    overflow: hidden;
}

.showroom-wrapper img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.showroom-top {
    position: relative;
    text-align: center;
}

.showroom-top img {
    width: 100%
}

.showroom-layout {
    background: url(../img/bg_lead.jpg?260428) center top 152px / 1120px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 50px 230px;
    flex-direction: column;
    gap: 30px;
}

.showroom-layout img {
    width: 600px;
}

.showroom-layout p {
    max-width: 720px;
    margin:auto;
    word-break:auto-phrase;
}

.showroom-main {
    background: #f3d4a6;
    position: relative;
    content: '';
    position: relative;
    inset: 0;
    background: url(../img/deco_main_1.png?z) center top 0px / 1120px no-repeat,
        url(../img/deco_main_2.png?z) center top 830px / 1120px no-repeat,
        url(../img/deco_main_3.png?z) center top 1670px / 1120px no-repeat,
        url(../img/deco_main_4.png?z) center top 2560px / 1120px no-repeat,
        url(../img/texture.png?z) top / 150px;
    background-blend-mode: multiply;
    margin-top: 0px;
    padding-top: 530px;
    padding-bottom: 50px;
}

.showroom-main:before {
    content:"";
    height: 200px;
    width:100%;
    background:url(../img/texture.png?z) top / 150px;
    mask: url(../img/wave.png) center top / 1120px , url(../img/bg_white.png) top 200px center / 100% 100% no-repeat;
    position: absolute;
    top: -200px;
}

.showroom-main section:first-child {
        margin-top: -510px;
}

.showroom-main section + section {
    margin-top:5em;
}

.showroom-main section h2 {
    height: 186px;
    background: url(../img/bg_title.png) center no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: "WDXL Lubrifont JP N", sans-serif;
    font-size: 46px;
    padding-bottom: 76px;
    box-sizing: border-box;
    margin-bottom: 10px;
    width: 823px;
    margin: 0 auto 10px;
    position:relative;
}

.showroom-main section h2:before {
    content:"";
    background-size:100%;
    position: absolute;
    width:100px;
}

.showroom-main section:nth-child(3) h2:before{
    background-image:url(../img/deco_title1.png);
    width: 17%;
    aspect-ratio:160/352;
    top: -42%;
    left: -2%;
    z-index: 3;
}

.showroom-main section:nth-child(1) h2:before,
.showroom-main section:nth-child(2) h2:before {
    background-image:url(../img/deco_title2.png);
    width: 22%;
    aspect-ratio:210/349;
    top: -37%;
    right: -3%;
}

.showroom-main section:nth-child(4) h2:before {
    background-image:url(../img/deco_title3.png);
    width: 18.5%;
    aspect-ratio:181/281;
    top: -19%;
    left: -0.1%;
}

.showroom-present {
    background: url(../img/deco_present.png?z) center bottom / 100% no-repeat, url(../img/deco_bg_present.png?z) center top 47px /1300px repeat-y, repeating-conic-gradient(from 0deg at 50% 50%, #d13535 0deg 12deg, #ce2626 12deg 24deg );
    padding: 70px 70px 25%;
}

.showroom-present h2 {
    text-align: center;
}

.showroom-present h2 img {
    width: 80%;
    max-width:400px;
}

.tw-present-product {
    display: flex;
    gap: 25px;
    margin: 1em auto 0;
    padding: 20px 0px;
    box-sizing: border-box;
    justify-content: center;
    /* align-items: center; */
    color: white;
    max-width: 900px;
}

.tw-present-product > div:first-child {
    width: 280px;
    padding: 10px;
    box-sizing: border-box;
    background: white;
    /* height: 100%; */
    display: flex;
}

.tw-present-product h3 {
    font-size:20px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: .5em;
}

.tw-present-product h3 a {
    color:#f3d70f;
    display: inline-block;
}

.tw-present-product > div:last-child {
    flex:1;
    word-break: auto-phrase;
}

.tw-present-product > div:last-child p:first-child {
    font-size:1.2em;
    word-break: auto-phrase;
}

.tw-present-product > div:last-child p + p {
    margin-top:1em;
}

.tw-present-detail {
    background: white;
    padding: 55px 40px 45px;
    margin: 45px auto 0px;
    position: relative;
    display: grid;
    justify-items: center;
    box-sizing: border-box;
    border-radius: var(--radius);
    max-width: 900px;
}

.tw-present-detail h3 {
    background: #271551;
    color:white;
    width:180px;
    height: 52px;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:30px;
    font-size:22px;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    margin: auto;
}

.tw-present-detail h3 + p {
    line-height: 2;
}

.tw-present-detail dl {
    display:flex;
    flex-wrap:wrap;
    --dtwidth: 119px;
    --dlgap: 2px;
    margin: 7px 0 0;
    gap: 20px var(--dlgap);
}

.tw-present-detail dt {
    width:var(--dtwidth);
    font-weight: bold;
}

.tw-present-detail dd {
    width: calc(100% - var(--dtwidth) - var(--dlgap));
}

.tw-present-detail dt,
.tw-present-detail dd {
    border-top: 1px dashed #f94e83;
    padding-top: 20px;
}

.tw-sns {
    margin: 1.5em 0;
}

.photo-wrapper {
    max-width: 660px;
    width: 100%;
    margin: auto;
    position: relative;
}

.photo-frame {
    padding: 28px 28px;
    background: url(../img/frame.png) center / 100% 100%;
    margin-bottom: 20px;
}

.slider-thumbnail .swiper-slide {
    opacity: .5;
    transition: opacity .5s;
    width: calc(100% / 4);
}

.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-slide img {
    height: auto;
    width: 100%;
    aspect-ratio: 733/487;
    background: #312a25;
}

.slider-thumbnail {
    margin: 20px 0;
}

.swiper-button-next:after, .swiper-button-prev:after {
    color: black;
    border: 1px solid black;
    --size: 71px;
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    font-size: 20px;
    border-radius: 50%;
    box-sizing: border-box;
}

.swiper-button-next, .swiper-button-prev {
    top: 29%;
    bottom: 50%;
}

.swiper-button-next {
    right: -65px;
}

.swiper-button-prev {
    left: -65px;
}

.swiper-button-next:after {
    padding-left: 4px;
}

.swiper-button-prev:after {
    padding-left: 0;
}

/* .showroom-present-details {
    color: white;
    max-width: 600px;
    margin: auto;
}

.showroom-present-details p:first-child {
    font-size:1.5em;
    border-bottom:1px solid white;
    margin-bottom:.7em;
    font-weight:bold;
}
 */
.showroom-map {
    background: #dce6cf;
}

.showroom-map h2 {
    text-align:center;
    font-size: 35px;
    border-bottom: 1px solid black;
    max-width: 900px;
    padding-bottom: 0.2em;
    margin: 0 auto 1em;
    font-family: arial;
}

.showroom-map > div {
    max-width: 1000px;
    margin: auto;
    padding: 50px 30px;
}

.showroom-map > div > div:last-child {
    margin: 40px auto 10px;
    max-width: 810px;
}

.showroom-map > div > div:last-child dl {
  display: grid;
  grid-template-columns: 154px 1fr;
  gap: 15px 10px;
}

.showroom-map > div > div:last-child dl {
    word-break:auto-phrase;
}

.showroom-map > div > div:last-child dl ul li {
    list-style-type:disc;
    margin-left:1.5em;
}

.showroom-map > div > div:last-child dl ul li + li {
    margin-top:.5em;
}

.showroom-map > div > div:last-child dl ul {
    /* margin-bottom:1em; */
}

.showroom-map > div > div:last-child dl.showroom-access {
  /* grid-template-columns: 150px 1fr; */
  /* gap:0; */
  display: block;
}

.showroom-map > div > div:last-child dl.showroom-access dt {
    margin:0em 0 .5em;;
    font-weight:bold;
}

.showroom-map > div > div:last-child dl.showroom-access * + dt {
    margin-top:1em;
}

.showroom-map > div > div:last-child dl.showroom-contact {
  grid-template-columns: 53px 1fr;
    gap:0;
}

.showroom-map > div > div:last-child dl dd svg {
    display:block;
    width:22px;
    float:left;
    margin-right:.4em;
}

.map-wrapper {
    max-width: 940px;
    margin: auto;
}

span.color-red {
    color: red;
}

.showroom-movie {
  max-width: 660px;
  margin: 40px auto 0px;
  aspect-ratio: 160/90;
  padding: 20px;
}

.showroom-movie iframe {
  width:100%;
  height:100%;
  vertical-align: bottom;
}


@media (max-width: 800px) {
    .showroom-wrapper {
    font-size:14px;
    }

    .showroom-layout {
        padding: 60px 30px 230px;
    }

    .showroom-layout {
        padding: 35px 20px calc(100px + 29% );
        background: url(../img/bg_lead_sp.jpg?260428) center top / 100%;
    }

    .showroom-main:before {
        --deco-height:56px;
        mask: url(../img/wave.png) center top / 130% var(--deco-height), url(../img/bg_white.png) top 200px center / 100% 100% no-repeat;
        height: var(--deco-height);
        top: calc(-1 * var(--deco-height));
    }
    .showroom-main {
        padding-top: 0;
        padding-bottom: 20px;
    }

    .showroom-main section:first-child h2 {
        margin-top: calc(-21% + -41px );
    }

    .showroom-main section h2 {
        height: auto;
        width: 100%;
        background-size: 100%;
        font-size: 8vw;
        padding-bottom: 10%;
    }

    .photo-wrapper {
        padding: 0px 20px 20px;
        width: auto;
    }
    .showroom-present {
        padding: 40px 20px 30%;
        background: url(../img/deco_present_sp.png?z) center bottom / 100% no-repeat, url(../img/deco_bg_present_sp.png?zz) center top 40px /112%, repeating-conic-gradient(from 0deg at 50% 50%, #d13535 0deg 12deg, #ce2626 12deg 24deg );
    }

    .showroom-main section:first-child {
        margin-top: calc(-26% + 50px);
    }
    .photo-frame {
        padding: 4%;
        margin: 0 20px;
    }

    .showroom-main section + section {
    margin-top: 1.5em;
    }
    .swiper-button-next, .swiper-button-prev {
        top: 0;
        padding-top: calc(32% - 24px);
    }
    .swiper-button-next {
        right: 5px;
    }

    .swiper-button-prev {
        left: 5px;
    }

    .swiper-button-next:after, .swiper-button-prev:after {
        --size: 35px;
        font-size: 16px;
    }

    .showroom-map > div {
        padding: 25px 20px 20px;
    }

    .showroom-map h2 {
        font-size: 18px;
        word-break: auto-phrase;
        line-height: 1.5;
        padding-bottom: .5em;
    }

    .showroom-map > div > div:last-child {
        margin-top:1em;
    }

    .showroom-map > div > div:last-child > dl {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .showroom-map > div > div:last-child > dl > dt {
        font-weight: bold;
        margin: 0.7em 0 0.4em;
    }

    .showroom-wrapper a {
    color:#795284;
    text-decoration:underline;
    display: inline;
    }

    .showroom-map > div > div:last-child dl.showroom-access {
      grid-template-columns: 85px 1fr;
      gap:0;
    }
    .showroom-map > div > div:last-child dl.showroom-contact {
      grid-template-columns: 45px 1fr;
      gap:0;
    }

    .tw-present {
        padding: 35px  var(--space) 23px;
        margin-bottom: 40px;
    }

    .tw-present-product h3 {
    font-size: 1.3em;
    margin-bottom: 0.6em;
    }
    
    .tw-present-detail dl {
        flex-direction: column;
        --dtwidth: 100%;
        gap: 10px var(--dlgap);
    }

    .tw-present-detail dd {
        width: 100%;
        border-top: none;
        padding-top: 0;
    }

    .tw-present-product {
    flex-direction: column;
    gap: 20px;
    margin-top: 5px;
    }
    
    .tw-present-product > div:first-child {
        width: 100%;
    }
    
    .tw-present-detail h3 {
        font-size: 20px;
        height: 39px;
        font-size: 18px;
        width: 140px;
        top: -17px;
    }

    .tw-present-detail {
    padding: 35px 20px 20px;
    margin-top: 1.2em;
    }

    .showroom-present h2 img {
    max-width: 220px;
    }

    .showroom-movie {
        margin: 0px auto 0px;
        padding:  0 20px 10px;
    }

}