/*-----------------------------------------*/
#main_content.visid.w_100vw {
	overflow-x: clip;
}

#main_content.visid > div {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}


/*------------------------------------------ */
.visid img{
	height: auto;
}

.sub_cnt .txt {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.7;
}


@media screen and (min-width: 1024px) {
    .inner_bg_01 {
        padding: 60px 40px;
    }    
    .inner_bg_02 {
        padding: 60px 40px;
    }    

    .sub_cnt .txt {
        text-align: center;
    }
}

h3.title {
    text-align: center;
    margin-bottom: 20px;
}


@media screen and (min-width: 1024px) {
    .od1_lg {
        order: 1;
    }
    .od2_lg {
        order: 2;
    }
}



/* ----------------------------------------
  background
---------------------------------------- */

.inner_bg_01 {
    background-image: url(images/bg_01.png);
    background-size: cover;
    background-position: center;
    padding: 3rem 2rem;
    background-repeat: no-repeat;
}
.inner_bg_02 {
    position: relative;
    padding: 3rem 2rem;
}
.inner_bg_02:before {
    position: absolute;
    top: 20px;
    right: 0;
    width: 200px;
    height: 200px;
    content: "";
    background: url(images/bg_02_r.png)no-repeat;
    background-size: contain;
    z-index: -1;
}
.inner_bg_02:after {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 200px;
    height: 200px;
    content: "";
    background: url(images/bg_02_l.png)no-repeat;
    background-size: contain;
    z-index: -1;
}
.inner_bg_03 {
    background: #292929;
    padding: 3rem 2rem;
}

@media screen and (min-width: 480px) {
    .inner_bg_02:before {
        width: 300px;
        height: 300px;
    }
    .inner_bg_02:after {
        width: 300px;
        height: 300px;
    }
}

@media screen and (min-width: 768px) {
    .inner_bg_02:before {
        width: 440px;
        height: 440px;
        top: 160px;
    }
    .inner_bg_02:after {
        width: 440px;
        height: 440px;
        bottom: 140px;
    }
}

@media screen and (min-width: 1024px) {
    .inner_bg_01, .inner_bg_02, .inner_bg_03 {
        padding: 60px;
    }
}

@media screen and (min-width: 1280px) {
    .inner_bg_01, .inner_bg_02, .inner_bg_03 {
        padding: 80px 70px;
    }
}



/* ----------------------------------------
  balloon
---------------------------------------- */

.balloon {
    position: relative;
    margin-top: 32px;
    padding: 20px;
    border-radius: 16px;
    background-color: #000;
    color: #8eebfa;
    font-size: 16px;
    box-shadow: 0px 0px 15px 5px rgba(30, 137, 136, 0.3);
}
.balloon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-style: solid;
    border-width: 0 17px 24px 17px;
    border-color: transparent transparent #000;
    translate: -50% -100%;
}

@media screen and (min-width: 768px) {
    .balloon {
        padding: 30px;
        font-size: 17px;
    }
}

@media screen and (min-width: 1024px) {
    .balloon {
        padding: 40px;
        font-size: 18px;
        margin-top: 0;
    }    
    .balloon.right::after {
        top: 50%;
        left: 0;
        border-width: 17px 24px 17px 0;
        border-color: transparent #000 transparent transparent;
        translate: -100% -50%;
    }  
    .balloon.left::after {
        top: 50%;
        right: 0;
        border-width: 17px 0 17px 24px;
        border-color: transparent transparent transparent #000;
        translate: 100% -50%;
    }
}



/* ----------------------------------------
  product
---------------------------------------- */

.prod > div {
    background: #fff;
    padding: 15px;
}
.prod .img_area {
    text-align: center;
}
.prod .txt_area p.exp {
    margin-top: 15px;
    font-size: 16px;    
}
.prod a.btn_pro {
    position: relative;
    background: #e0002a;
    border-radius: 55px;
    color: #fff;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    display: block;
    font-size: 20px;
    line-height: 1.4;
    font-weight: bold;
    margin-top: 20px;
    transition: .2s;
}
.prod a.btn_pro:before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(100% - 7px);
    height: calc(100% - 7px);
    content: '';
    border: 2px solid #fff;
    border-radius: 55px;
}
.prod a.btn_pro:hover { 
    background-color: #c70025;
}

@media screen and (min-width: 768px) {
    .prod .txt_area p.exp {
        font-size: 17px;
        margin-top: 20px;
    }
}

@media screen and (min-width: 1024px) {
    .prod a.btn_pro {
        font-size: 28px;
        padding: 30px 20px;
    }
    .prod .txt_area p.exp {
        font-size: 18px;
    }
    .prod  .txt_area {
        padding: 0 20px 20px;
    }
}



/* ==================================================
	slider
================================================== */

.slider {
	display: none;
	

}
.slider.slick-initialized {
	display: block;
}

.slick-prev,
.slick-next {
	width: 30px;
	height: 30px;
	z-index: 1;
}
.slick-prev {
	left: 0;
}
.slick-next {
	right: 0;
}
.slick-prev::before,
.slick-next::before {
	display: inline-block;
	content: "\E90c";
	transition: .2s;
	font-family: HPIcons;
	color: #767676;
	font-size: 30px;
	opacity: 1;
}
.slick-prev::before {
	transform: rotate(90deg);
}
.slick-next::before {
	transform: rotate(270deg);
}
.slick-prev:hover::before,
.slick-next:hover::before {
	opacity: .7;
}
.slider .slick-dots {
	left: 0;
}

.slider .slick-slide {
	margin-right: 15px;
}
.slider .slick-list {
	padding-right: 15%;
}