@charset "utf-8";

@media screen and ( min-width: 860px) {
    main#lp-product {
        margin-top: 110px;
        margin-bottom:0;
    }
}

@media screen and ( min-width: 1460px) {
    main#lp-product {
        margin-top: 80px;
        margin-bottom:0;
    }
}

#lp-product .container-fluid {
    padding:0 15px;

}

/* LP　基本の横幅 */
.lp-w-100 {
    margin-left:auto;
    margin-right:auto;
    width: calc( 100% - 60px);
    max-width: 1200px;
}

/* 全幅ブロック用 */
/* カバーブロック */
.wp-block-cover {
    width: calc( 100% + 30px );
    margin-left: -15px;
}

/* 全幅にするclass */
.wp-block-full {
    width: calc( 100% + 30px );
    margin-left: -15px;
}

/* youtube動画用 */
.wp-block-embed iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* 商品の説明ブロック　lp-pattern-3 */
.lp-pattern-3 .wp-block-image {
    width:100% ;
    height:auto;
    background:#fff;
}

/* 開発者の声 */
.voice-block-profile {
    line-height:1.6;
    padding-bottom:20px;
}

.voice-block-profile img {
    max-width:140px;
}

@media screen and ( min-width: 600px) {
    .innerblocks-wrap:has(.voice-block-profile) {
        display:flex;
        flex-wrap:wrap;
    }
    .voice-block-profile {
        flex-basis: 140px !important;
    }

    .voice-block-image {
        flex-basis:  50% !important;
        max-width: 300px;
        margin:20px auto 0;
    }

    .voice-block-text {
        flex-basis: calc( 100% - 140px) !important;
        padding-right:0 !important;
    }
}

@media screen and ( min-width: 960px) {
    .voice-block-profile {
        flex-basis: 160px !important;
    }

    .voice-block-image {
        flex-basis: 300px !important;
        max-width: 300px;
        margin:0 auto ;
    }

    .voice-block-text {
        flex-basis: calc( 100% - 160px - 300px) !important;
        padding-right: 30px !important;
    }
}

/* 使い方説明　スライダー*/
.lp-slider-slick .slick-track {
display: flex;
align-items: stretch;
}

.lp-slider-slick .slick-slide {
    background:#fff;
    border-radius:8px;
    margin:0 10px;
    padding:30px 30px 22px;
    height: auto;
    display:flex;
    justify-content:center;
}

.lp-slider-slick .slick-slide .desc-image {
    width:100%;
    aspect-ratio:4 / 3;
    margin-bottom:15px;
    border-radius:6px;
    overflow:hidden;
}

.lp-slider-slick .slick-slide .desc-image:has(a) {
    box-shadow: 0;
    transition:ease 0.2s;
}

.lp-slider-slick .slick-slide .desc-image:has(a):hover {
    box-shadow: 0 0 6px 3px rgb( 0 0 0 / 0.15);
}

.lp-slider-slick .slick-slide img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.lp-slider-slick .slick-slide h3 {
    font-size:20px;
}

.lp-slider-slick .slick-slide p {
    margin-bottom:0;
    font-size:0.875rem;
    line-height:1.6;
}

.lp-slider-slick .slick-dots li button:before {
    font-size: 26px !important;
}

.lp-slider-slick .slick-prev,
.lp-slider-slick .slick-next,
.lp-slider-slick .slick-prev:hover,
.lp-slider-slick .slick-next:hover,
.lp-slider-slick .slick-prev:focus,
.lp-slider-slick .slick-next:focus {
    background:rgba(0,0,0,.4);
    width:50px;
    height:50px;
    z-index:2;
}

.lp-slider-slick .slick-prev:before {
    content:'＜';
    font-weight:bold;
    position:relative;
    top:2px;
}

.lp-slider-slick .slick-next:before {
    content:'＞';
    font-weight:bold;
    position:relative;
    top:2px;
}


/* 商品紹介　スライダー*/
.lp-main-item-slider-slick .slick-track {
    display: flex;
    align-items: stretch;
}

.lp-main-item-slider-slick .slick-slide {
    background:#fff;
    width: 100vw !important;
    height: auto;
    display:flex !important;
    justify-content:center;
}

.lp-main-item-slider-slick .block-main-item{
    background:#fff;
    border-radius:8px;
    margin:0 auto;
    padding:60px 15px 22px;
    max-width: 980px;
    height: auto;
    display:flex !important;
    justify-content:center;
}

.lp-main-item-slider-slick .slick-slide .main-item-photo,
.lp-main-item-slider-slick .slick-slide .main-item-description {
    width:50%;
}

.lp-main-item-slider-slick .slick-slide .main-item-description {
    padding-left: 15px;
}

.lp-main-item-slider-slick .main-item-photo {
    padding-right: 15px;
}

@media screen and ( max-width: 859.9px) {
    .lp-main-item-slider-slick .block-main-item{
        flex-wrap:wrap;
        padding-left:70px;
        padding-right:70px;
    }

    .lp-main-item-slider-slick .slick-slide .main-item-photo,
    .lp-main-item-slider-slick .slick-slide .main-item-description {
        width:100%;
    }

    .lp-main-item-slider-slick .slick-slide .main-item-description {
        padding-left: 0;
    }

    .lp-main-item-slider-slick .main-item-photo {
        padding-right: 0;
    }
}

@media screen and ( max-width: 767.9px) {
    .lp-main-item-slider-slick .block-main-item{
        flex-wrap:wrap;
        padding-left: 0;
        padding-right: 0;
    }

    .lp-main-item-slider-slick .slick-slide{
        flex-wrap:wrap;
        padding-left:30px;
        padding-right:30px;
    }
}

.lp-main-item-slider-slick .main-item-photo figure {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.lp-main-item-slider-slick .main-item-photo img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:500px;
    object-fit:contain;
}

@media screen and ( max-width: 767.9px) {
    .lp-main-item-slider-slick .main-item-photo img {
        max-height:300px;
    }
}


.lp-main-item-slider-slick .brand-name {
    margin:0 0 10px;
    font-size:1rem;
    font-weight: bold;
}

.lp-main-item-slider-slick .item-name {
    margin:0;
    font-size: 1.5rem;
    font-weight: bold;
    white-space: pre-wrap;
}

@media screen and ( max-width: 767.9px) {
    .lp-main-item-slider-slick .brand-name {
        font-size:0.875rem;
    }

    .lp-main-item-slider-slick .item-name {
        font-size: 1.25rem;
    }
}

.lp-main-item-slider-slick hr {
    margin:20px 0 30px;
    border-top:solid 1px #ccc !important;
}

.lp-main-item-slider-slick table {
    margin:40px 0;
    width:100%;
}

@media screen and ( max-width: 767.9px) {
    .lp-main-item-slider-slick table {
        margin:20px 0;
        font-size:0.8125rem;
    }
}

.lp-main-item-slider-slick table th {
    padding:4px 10px;
    width:120px;
    background:#ddd;
    white-space: pre-wrap;
}

.lp-main-item-slider-slick table td {
    padding:4px 10px;
    background:#efefef;
    line-height:1.4;
    white-space: pre-wrap;
}

.lp-main-item-slider-slick table tr+tr > * {
    border-top:solid 2px #fff;
}

.lp-main-item-slider-slick .slick-slide p {
    margin-bottom:0;
    font-size:0.875rem;
    line-height:1.6;
}

@media screen and ( max-width: 767.9px) {
    .lp-main-item-slider-slick .slick-slide p {
        font-size:0.8125rem;
        line-height:1.46;
    }
}

.lp-main-item-slider-slick .block-button-area {
    width:100%;
    display:flex;
    justify-content:center;
}

.lp-main-item-slider-slick .block-button-area .wp-block-button__link {
    height:40px;
    border-radius:4px;
}

.lp-main-item-slider-slick .block-button-area .wp-block-button__link:hover {
    color:#fff;
}

.lp-main-item-slider-slick .slick-dots li button:before {
    font-size: 26px !important;
}

.lp-main-item-slider-slick .slick-prev,
.lp-main-item-slider-slick .slick-next,
.lp-main-item-slider-slick .slick-prev:hover,
.lp-main-item-slider-slick .slick-next:hover,
.lp-main-item-slider-slick .slick-prev:focus,
.lp-main-item-slider-slick .slick-next:focus {
    background:rgba(0,0,0,.4);
    width:50px;
    height:50px;
    z-index:2;
}

.lp-main-item-slider-slick .slick-prev,
.lp-main-item-slider-slick .slick-prev:hover,
.lp-main-item-slider-slick .slick-prev:focus {
    height:120px;
    width:70px;
    background:none;
}

.lp-main-item-slider-slick .slick-prev:before {
    content:'';
    font-weight:bold;
    position:relative;
    top:30px;
    height:2px !important;
    width:80px !important;
    display:block;
    background:#ccc;
    transform:rotate(45deg);
}

.lp-main-item-slider-slick .slick-prev:after {
    content:'';
    font-weight:bold;
    position:relative;
    top:-28px;
    height:2px !important;
    width:80px !important;
    display:block;
    background:#ccc;
    transform:rotate(-45deg);
}

.lp-main-item-slider-slick .slick-next,
.lp-main-item-slider-slick .slick-next:hover,
.lp-main-item-slider-slick .slick-next:focus {
    height:120px;
    width:70px;
    background:none;
}

.lp-main-item-slider-slick .slick-next:before {
    content:'';
    font-weight:bold;
    position:relative;
    top:-27px;
    height:2px !important;
    width:80px !important;
    display:block;
    background:#ccc;
    transform:rotate(45deg);
}

.lp-main-item-slider-slick .slick-next:after {
    content:'';
    font-weight:bold;
    position:relative;
    top:27px;
    height:2px !important;
    width:80px !important;
    display:block;
    background:#ccc;
    transform:rotate(-45deg);
}

@media screen and ( max-width: 767.9px) {
    .lp-main-item-slider-slick .slick-prev,
    .lp-main-item-slider-slick .slick-prev:hover,
    .lp-main-item-slider-slick .slick-prev:focus {
        height:120px;
        width:30px;
        left:0;
        background:none;
    }

    .lp-main-item-slider-slick .slick-prev:before {
        content:'';
        font-weight:bold;
        position:relative;
        top:18px;
        left:-6px;
        height:2px !important;
        width:40px !important;
        display:block;
        background:#ccc;
        transform:rotate(60deg);
    }

    .lp-main-item-slider-slick .slick-prev:after {
        content:'';
        font-weight:bold;
        position:relative;
        top:-18px;
        left:-6px;
        height:2px !important;
        width:40px !important;
        display:block;
        background:#ccc;
        transform:rotate(-60deg);
    }

    .lp-main-item-slider-slick .slick-next,
    .lp-main-item-slider-slick .slick-next:hover,
    .lp-main-item-slider-slick .slick-next:focus {
        height:120px;
        width:40px;
        right: -14px !important;
        background:none;
    }

    .lp-main-item-slider-slick .slick-next:before {
        content:'';
        font-weight:bold;
        position:relative;
        top:-16px;
        right:-6px;
        height:2px !important;
        width:40px !important;
        display:block;
        background:#ccc;
        transform:rotate(60deg);
    }

    .lp-main-item-slider-slick .slick-next:after {
        content:'';
        font-weight:bold;
        position:relative;
        top:16px;
        right:-6px;
        height:2px !important;
        width:40px !important;
        display:block;
        background:#ccc;
        transform:rotate(-60deg);
    }
}

.lp-main-item-slider-slick .slick-prev {
    left:-10px;
}

.lp-main-item-slider-slick .slick-next {
    right:0;
}

@media screen and ( min-width: 1260px) {
    .lp-main-item-slider-slick .slick-prev {
        left:calc( 50% - 600px );
    }

    .lp-main-item-slider-slick .slick-next {
        right:calc( 50% - 600px );
    }
}


/* イメージスライダー　*/
.lp-sliderimage-slick .slick-track {
    display: flex;
    align-items: stretch;
}

.lp-sliderimage-slick .slick-slide {
    background:#fff;
    padding:0 15px;
    height: auto;
    display:flex;
    justify-content:center;
    align-items:stretch;
}

.lp-sliderimage-slick .slick-slide img {
    margin:0 auto;
    width:auto;
    height:auto;
    max-width:1200px;
    max-height:460px;
}

.lp-sliderimage-slick .slick-dots li button:before {
    font-size: 26px !important;
}

.lp-sliderimage-slick .slick-prev,
.lp-sliderimage-slick .slick-next,
.lp-sliderimage-slick .slick-prev:hover,
.lp-sliderimage-slick .slick-next:hover,
.lp-sliderimage-slick .slick-prev:focus,
.lp-sliderimage-slick .slick-next:focus {
    background:rgba(0,0,0,.4);
    width:50px;
    height:50px;
    z-index:2;
}

.lp-sliderimage-slick .slick-prev{
    left:0;
}

.lp-sliderimage-slick .slick-next{
    right:0;
}

.lp-sliderimage-slick .slick-prev:before {
    content:'＜';
    font-weight:bold;
    position:relative;
    top:2px;
}

.lp-sliderimage-slick .slick-next:before {
    content:'＞';
    font-weight:bold;
    position:relative;
    top:2px;
}


/* 関連商品スライダー　*/
.lp-relatedslider-slick {
    @media (max-width: 1240px) {
        margin: 0 auto;
        width: 94vw;
    }
}

.lp-relatedslider-slick .slick-track {
    display: flex;
    align-items: stretch;
}

.lp-relatedslider-slick .slick-slide {
    background:#fff;
    padding:0 15px;
    height: auto;
    display:flex;
    justify-content:center;
    align-items:stretch;
}

.lp-relatedslider-slick a.desc-card {
    margin:0 0 10px;
    width:260px;
    display: block;
    border: solid 1px #ddd;
    border-radius: 8px;
    padding: 16px 16px 12px;
}

.lp-relatedslider-slick .ec-shelfGrid__item-image {
    margin-bottom:10px;
    height:180px;
}

.lp-relatedslider-slick .ec-shelfGrid__item-image img {
    margin:0 auto;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

.lp-relatedslider-slick .category-list {
    display: flex;
    align-items: center;
}

.lp-relatedslider-slick .category-brandname {
    font-weight: bold;
    color: #666;
}

.lp-relatedslider-slick p {
    margin:0;
    line-height:1.6;
    color:#300;
}

.lp-relatedslider-slick .slick-dots li button:before {
    font-size: 26px !important;
}

.lp-relatedslider-slick .slick-prev,
.lp-relatedslider-slick .slick-next,
.lp-relatedslider-slick .slick-prev:hover,
.lp-relatedslider-slick .slick-next:hover,
.lp-relatedslider-slick .slick-prev:focus,
.lp-relatedslider-slick .slick-next:focus {
    background:rgba(0,0,0,.4);
    width:50px;
    height:50px;
    z-index:2;
}

.lp-relatedslider-slick .slick-prev{
    left:0;
}

.lp-relatedslider-slick .slick-next{
    right:0;
}

.lp-relatedslider-slick .slick-prev:before {
    content:'＜';
    font-weight:bold;
    position:relative;
    top:2px;
}

.lp-relatedslider-slick .slick-next:before {
    content:'＞';
    font-weight:bold;
    position:relative;
    top:2px;
}