@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.block-sales-cmt{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}
.block-sales-cmt-itm-txt{
    flex-grow: 1;
    width:20em;
}
.block-sales-cmt-itm-video{
    width: 20em;
    aspect-ratio: 16/9;
    flex-grow: 1;
}

[data-accordion_container]{

}
[data-accordion_title]{
    display: flex;
    align-content: center;
}
[data-accordion_trigger]{
    font-family: 'Material Icons';
    display: flex;
    align-items: center;
    justify-content: space-between;
}
[data-accordion_trigger]::after{
    content: "add";
}
[data-accordion_container].active [data-accordion_trigger]::after{
    content: "remove";
}
[data-accordion_content]{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}
[data-accordion_content] > *{
    min-height: 0;
    overflow: hidden;
}
[data-accordion_container].active > [data-accordion_content]{
    grid-template-rows: 1fr;
}

/*svg*/
.svg-header-top_menu-arrow{
    aspect-ratio: 9.26/6.045;
    background-color: black;
    mask-image: url('../images/reci/header-top_menu-arrow.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.svg-nav-arrow{
    aspect-ratio: 6/3;
    background-image: url('../images/reci/nav-arrow.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.svg-contact-arrow{
    aspect-ratio: 5.024/7.376;
    mask-image: url('../images/reci/contact-arrow.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.svg-image-zoom{
    aspect-ratio: 18/18;
    background-image: url('../images/reci/image-zoom.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.svg-sumai_topics-arrow{
    aspect-ratio: 1/1;
    background-color: black;
    mask-image: url('../images/reci/sumai_topics-arrow.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}

/*sns icon*/
.icon-initia{
    aspect-ratio: 129/16;
    mask-image: url('../images/reci/icon-initia.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}


.icon-instagram{
    aspect-ratio: 19/19;
    mask-image: url('../images/reci/instagram.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.icon-facebook{
    aspect-ratio: 19/19;
    mask-image: url('../images/reci/facebook.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.icon-youtube{
    aspect-ratio: 80/56;
    mask-image: url('../images/reci/youtube.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.icon-note{
    aspect-ratio: 20/20;
    mask-image: url('../images/reci/note.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.icon-line{
    aspect-ratio: 21/21;
    mask-image: url('../images/reci/line.svg');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
.lower-icon{
    width: 100%;
    aspect-ratio: 202/65;
    background-image: url('../images/reci/lower-icon.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.sns-grid{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}
.sns-icon-list{
    display: flex;
    align-items: center;
}

/*print*/
.btn_print{
    font-size: 1.1rem;
    font-weight: 500;
    position: relative;
    height: 3rem;
    width: 11rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #373737;
    border-radius: 0.3rem;
    color: #fff;
    box-shadow: 0.3rem 0.3rem 0.1rem #ccccccb0;
}
.btn_print:after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: url('../images/reci/mapbtn_arrow.svg') 0 center no-repeat;
    background-size: 8px auto;
    height: 3rem;
    width: 20px;
}