/* lineup 全体追加 */
.lineup_wrap {
	position: absolute;
	width: 100%;
	height: 100%;
}
.lineup_wrap .subtitle_wrap {
	position: fixed;
	z-index: 7;
	top: 50%;
	left: 50%;
	transition: .5s;
	transform: translate(-50%,-50%);
	opacity: 0;
}
/* btn */
.btn_lineup1, .btn_lineup2, .btn_lineup3, .btn_lineup4 {
	width: 120px;
	height: 36px;
	background: url(../img/top/btn_sec7_more.png) center center / contain no-repeat;
}
.btn_lineup1:hover,.btn_lineup2:hover, .btn_lineup3:hover, .btn_lineup4:hover {
	cursor: pointer;
	opacity: .7;
}
.btn_lineup_menu {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 72px;
    width: 75px;
    height: 13px;
    margin-top: -85px;
    background: url(../img/top/btn_lineup_back.png) center center / contain no-repeat;
}
.btn_lineup_menu:hover {
    opacity: .7;
    cursor: pointer;
}

/* wrap_menu */
#section7.step_menu .wrap_menu .subtitle_wrap {
	opacity: 1;
	margin-top: -10px;
}
.wrap_menu .subtitle_wrap .sub_title {
	width: 240px;
	height: 71px;
	background: url(../img/top/ti_lineup_menu.png) center center / contain no-repeat;
}

/* wrap_disposable */
.wrap_disposable {
	opacity: 0;
}
#section7.step1 .wrap_disposable {
	opacity: 1;
}
#section7.step1 .wrap_disposable .subtitle_wrap {
	opacity: 1;
}
.wrap_disposable .subtitle_wrap .sub_title {
	width: 	240px;
	height: 112px;
	background: url(../img/top/ti_lineup_disposable.png) center center / contain no-repeat;
}
#section7.step1 .wrap_disposable .standard .inner,
#section7.step1 .wrap_disposable .color .inner {
	opacity: 1;
}
#section7 .wrap_disposable .standard h3 {
	top: 50%;
    left: 72px;
    width: 148px;
    height: 116px;
    margin-top: -13px;
    background: url(../img/top/ti_lineup_disposable_standard.png) center center / contain no-repeat;
}
#section7 .wrap_disposable .color h3 {
	top: 50%;
    right: 74px;
    width: 107px;
    height: 114px;
    margin-top: -14px;
    background: url(../img/top/ti_lineup_disposable_color.png) center center / contain no-repeat;
}
#section7.step1 .wrap_disposable .lineup1 .inner{
	transition-delay: .1s !important;
}
#section7.step1 .wrap_disposable .lineup2 .inner{
	transition-delay: .2s !important;
}
#section7.step1 .wrap_disposable .lineup3 .inner{
	transition-delay: .3s !important;
}
#section7.step1 .wrap_disposable .lineup6 .inner{
	transition-delay: .4s !important;
}
#section7.step1 .wrap_disposable .lineup5 .inner{
	transition-delay: .5s !important;
}
#section7.step1 .wrap_disposable .lineup4 .inner{
	transition-delay: .6s !important;
}

/* wrap_refill */
.wrap_refill {
	opacity: 0;
}
#section7.step2-1 .wrap_refill {
	opacity: 1;
}
#section7.step2-1 .wrap_refill.wrap_refill-2 {
	opacity: 0;
}
#section7.step2-2 .wrap_refill-2 {
	opacity: 1;
}
#section7.step2-1 .wrap_refill .subtitle_wrap,
#section7.step2-2 .wrap_refill .subtitle_wrap {
	opacity: 1;
}
#section7.step2-2 .wrap_refill .inner,
#section7.step2-1 .wrap_refill.wrap_refill-2 .inner,
#section7.step2-1 .wrap_refill-2 .inner {
	opacity: 0;
}
#section7.step2-1 .wrap_refill .inner,
#section7.step2-2 .wrap_refill-2 .inner {
	opacity: 1;
	position: relative;
	width: 100%;
    height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
}
#section7 .wrap_refill .subtitle_wrap {
	width: 214px;
    height: 29px;
    background: url(../img/top/ti_lineup_refill.png);
    background-size: contain;
    top: 79px;
    left: 181px;
    position: absolute;
}
#section7 .wrap_refill .sub_title {
	height: 90px;
    width: 266px;
    background: url(../img/top/ti_lineup_refill_price.png);
    background-size: contain;
    position: absolute;
    top: 30px;
    left: -10px;
    right: 0;
    margin: 0 auto;
}
#section7 .wrap_refill .btn_refill-next {
	top: calc(50% + 130px);
    left: 72px;
    width: 104px;
    height: 36px;
    background: url(../img/top/btn_sec7_next.png) center center / contain no-repeat;
}
#section7 .wrap_refill .btn_refill-prev {
	top: calc(50% + 130px);
    left: 72px;
    width: 104px;
    height: 36px;
    background: url(../img/top/btn_sec7_prev.png) center center / contain no-repeat;
}
.btn_refill-next:hover,
.btn_refill-prev:hover {
    cursor: pointer;
    opacity: .7;
}
.step2-1 .wrap_refill .lineup1 .inner,
.step2-2 .wrap_refill .lineup1 .inner{
	transition-delay: .1s !important;
}
.step2-1 .wrap_refill .lineup2 .inner,
.step2-2 .wrap_refill .lineup2 .inner{
	transition-delay: .2s !important;
}
.step2-1 .wrap_refill .lineup3 .inner,
.step2-2 .wrap_refill .lineup3 .inner{
	transition-delay: .3s !important;
}
.step2-1 .wrap_refill .lineup6 .inner,
.step2-2 .wrap_refill .lineup6 .inner{
	transition-delay: .4s !important;
}
.step2-1 .wrap_refill .lineup5 .inner,
.step2-2 .wrap_refill .lineup5 .inner{
	transition-delay: .5s !important;
}
.step2-1 .wrap_refill .lineup4 .inner,
.step2-2 .wrap_refill .lineup4 .inner{
	transition-delay: .6s !important;
}

/* wrap_crosscut */
.wrap_crosscut {
	opacity: 0;
}
#section7.step3 .wrap_crosscut {
	opacity: 1;
}
#section7.step3 .wrap_crosscut .subtitle_wrap {
	opacity: 1;
	z-index: 8;
	transition: 0s;
	margin-top: -190px;
}
.wrap_crosscut .subtitle_wrap .sub_title {
	width: 240px;
	height: 144px;
	background: url(../img/top/ti_lineup_crosscut.png) center center / contain no-repeat;
}
#section7 .wrap_crosscut .standard {
	width: 100%;
	z-index: 7;
}
/* #section7 .wrap_crosscut .standard h3 {
    top: 50%;
    left: 72px;
    width: 169px;
    height: 14px;
    margin-top: -207px;
    background: url(../img/top/ti_lineup_crosscut_standard.png) center center / contain no-repeat;
} */

/* cartridge */
#section7 .cartridge {
	position: absolute;
	z-index: 10;
	right: -15px;
	bottom: -20px;
	transition: .5s;
	opacity: 0;
}
#section7.step1 .wrap_disposable .circle_wrap,
#section7.step2 .wrap_refill .circle_wrap,
#section7.step2-1 .wrap_refill .circle_wrap,
#section7.step2-2 .wrap_refill .circle_wrap {
	opacity: 1;
}
#section7.end .cartridge {
	opacity: 0;
}
#section7 .cartridge .circle {
	position: relative;
	width: 190px;
	height: 190px;
	transition: .5s;
	border-radius: 9999px;
	background: url(../img/top/bg_sec7_perl_2.png) repeat 0 0;
	box-shadow: 10px 10px 10px 0 rgba(254, 99, 121, .3);
	transform: scale(.6);
}
#section7 .cartridge.on {
	right: 59px;
	bottom: 53px;
}
#section7 .cartridge.on .circle {
	width: 640px;
	transform: scale(1);
}
#section7 .cartridge .inner {
	height: 100%;
	background: url(../img/top/bg_sec7_cartridge_1.png) no-repeat right center;
}
#section7 .cartridge.on .inner {
	background-image: url(../img/top/bg_sec7_cartridge_2.png);
}
#section7 .cartridge .one,
#section7 .cartridge .three {
	width: 100%;
	height: 100%;
}
#section7 .cartridge .one {
	display: block;
	background: url(../img/top/img_sec7_cartridge_cl.png) no-repeat center center;
}
#section7 .cartridge.on .one {
	display: none;
}
#section7 .cartridge .three {
	display: none;
}
#section7 .cartridge.on .three {
	display: block;
	background: url(../img/top/img_sec7_cartridge_op.png) no-repeat center 26px;
	background-size: 580px 145px;
}

/* wrap_pen */
.wrap_pen {
	opacity: 0;
}
#section7.step4 .wrap_pen {
	opacity: 1;
}
#section7.step4 .wrap_pen .subtitle_wrap {
	opacity: 1;
	z-index: 8;
	top: 80px;
	left: 72px;
	transform: translate(0%, 0%);
	transition: 0s;
}
.wrap_pen .subtitle_wrap .sub_title {
	width: 220px;
	height: 112px;
	background: url(../img/top/ti_lineup_pen.png) center center / contain no-repeat;
}
#section7.step4 .wrap_pen .standard {
	width: 100%;
}
#section7 .wrap_pen .standard h3 {
	top: calc(112px + 70px + 60px);
	left: 72px;
	width: 168px;
	height: 14px;
	background: url(../img/top/ti_lineup_pen_standard.png) center center / contain no-repeat;
}
.step4 .wrap_pen .lineup10 .inner{
	transition-delay: 1.1s !important;
}
.step4 .wrap_pen .lineup11 .inner{
	transition-delay: .6s !important;
}
.step4 .wrap_pen .lineup12 .inner{
	transition-delay: .7s !important;
}
.step4 .wrap_pen .lineup13 .inner{
	transition-delay: .8s !important;
}
.step4 .wrap_pen .lineup14 .inner{
	transition-delay: .9s !important;
}
.step4 .wrap_pen .lineup15 .inner{
	transition-delay: 1s !important;
}

#section7.step2-1 .lineup16 .inner {
    -webkit-transition-delay: .45s;
    transition-delay: .45s!important;
}
#section7.step2-1 .lineup17 .inner {
    -webkit-transition-delay: .5s;
    transition-delay: .5s!important;
}
#section7.step2-1 .lineup18 .inner {
    -webkit-transition-delay: .55s;
    transition-delay: .55s!important;
}
#section7.step2-1 .lineup19 .inner {
    -webkit-transition-delay: .6s;
    transition-delay: .6s!important;
}
#section7.step2-1 .lineup20 .inner {
    -webkit-transition-delay: .65s;
    transition-delay: .65s!important;
}
#section7.step2-1 .lineup21 .inner {
    -webkit-transition-delay: .7s;
    transition-delay: .7s!important;
}
#section7.step2-1 .lineup22 .inner {
    -webkit-transition-delay: .75s;
    transition-delay: .75s!important;
}
#section7.step2-1 .lineup23 .inner {
    -webkit-transition-delay: .8s;
    transition-delay: .8s!important;
}
#section7.step2-1 .lineup24 .inner {
    -webkit-transition-delay: .85s;
    transition-delay: .85s!important;
}

/* end */
.end .subtitle_wrap {
	opacity: 0 !important;
}
#section7.end .standard .inner,
#section7.end .color .inner {
    opacity: 0 !important;
    transition-delay: 0s !important;
}