@charset "utf-8";
/* CSS Document */
.liquid {
	padding-top: 100px;
}
#about{
    width: 100%;
    padding-top: 100px;
    margin-bottom: 0px;
}
.headline {
	margin-bottom: 5.2083333333vw;
}
.headline_cn {
    color: #0c0e13;
    font-weight: 300;
    position: relative;
    font-size: 1rem;
    line-height: 18px;
    padding-left: 28px;
    margin-bottom: 24px;
}
.headline_cn:before {
    content: "";
    background: #e60012;
    position: absolute;
    left: 0;
    width: 12px;
    height: 12px;
    top: 4px;
}
._txt {
    will-change: transform, opacity;
    display: inline-block;
    opacity: 0;
    -ms-transform: translateY(80%);
    transform: translateY(80%);
    -webkit-clip-path: inset(0% 0% 0% 100%);
    clip-path: inset(0% 0% 0% 100%);
    transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-clip-path 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), clip-path 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), clip-path 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-clip-path 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-active ._txt {
    opacity: 1;
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}
.headline_en span{
	font-family: MI!important;
	font-size: 3.75rem;
	line-height: 3.75rem;
	color:#121212；
}
.top_about_figure {
	margin-bottom: 6.25vw;
}
.top_about_figure_img {
    opacity: 0;
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    transition: opacity 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s, transform 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s, -webkit-clip-path 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s;
    transition: clip-path 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s, opacity 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s, transform 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s;
    transition: clip-path 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s, opacity 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s, transform 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s, -webkit-clip-path 1s cubic-bezier(0.32, 0.95, 0.6, 1) .4s;
}
.is-active .top_about_figure_img {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
    -ms-transform: scale(1);
    transform: scale(1);
}
.top_about_ttl{
    width: 100%;
    box-sizing: border-box;
    font-size: 2.5rem;
    line-height: 1.5;
    margin-bottom: 80px;
    padding-left: 204px;
}
.in-ab-desc{
    width: 100%;
    box-sizing: border-box;
    font-size: 1.125rem;
    line-height: 48px;
    margin-bottom: 48px;
    padding-left: 204px;
    text-indent: 2em;
}
#about .btn {
    margin-left: 204px;
}
.btn {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.btn:before, .btn_link:before {
    content: "";
    position: absolute;
    top: 50%;
    background: #e60012;
    transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    left: 24px;
}
.btn:before {
    transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn_link {
    overflow: hidden;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative;
    z-index: 0;
    color: #0c0e13;
    letter-spacing: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #e4e4e9;
    padding: 20px 56px 20px 62px;
    border-radius:5px;
}
.btn_link_txt {
    color: inherit;
    position: relative;
    z-index: 1;
    font-weight: bold;
    transition: color .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) .1s;
    font-size: 1rem;
    line-height: 1;
}
.btn:hover:before {
    -ms-transform: scale(20);
    transform: scale(20);
	opacity: 0;
}
.medium .btn_link:hover:before {
    -ms-transform: scale(82);
    transform: scale(82);
}
.btn_link:hover .btn_link_txt {
    color: #fff;
}

#product{
	margin-top:5rem;
	padding-top:5rem;
	position: relative;
   	overflow: hidden;
	padding-bottom:5rem;
}
#product .in-pro{
	display: flex;
	justify-content: space-between;
}
#product .in-pro .left,
#product .in-pro .right{
	width:50%;
}
#product::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/pbg.png) center no-repeat;
	opacity: .8;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 1s ease-out;
	z-index: -1;
}

#product.active::before {
	transform: scaleX(1);
}
#product .in-pro .right img{
	mix-blend-mode: multiply;
}
#product .in-pro .left p{
	font-size:1.125rem;
	line-height: 2;
	margin:3rem 0;
}