/* animation用 */
.order_inner {
    position: absolute;
    top:0px;
    left:8px;
    background: none;
    border: 0;
    box-shadow: inset 0 0 0 1px transparent;
    vertical-align: middle;
    width: 80px;
    height: 60px;
}
.order_inner.fix80{
    left:0px;
}
.order_inner::before, .order_inner::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 80px;
    height: 60px;
}
.order_inner.spin {
    padding: 0;
    width: 80px;
    height: 60px;
}

.extra_order_inner {
    position: absolute;
    top:12px;
    background: none;
    border: 0;
    box-shadow: inset 0 0 0 1px transparent;
    vertical-align: middle;
    width: 72px;
    height: 40px;
}
.extra_order_inner.fix80{
    left:4px;
}
.extra_order_inner::before, .extra_order_inner::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 36px;
    height: 20px;
}
.extra_order_inner.spin {
    padding: 0;
    width: 36px;
    height: 20px;
}

.extra_preference_inner {
    position: absolute;
    top:8px;
    background: none;
    border: 0;
    box-shadow: inset 0 0 0 1px transparent;
    vertical-align: middle;
    width: 40px;
    height: 24px;
}
.extra_preference_inner::before, .extra_preference_inner::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 40px;
    height: 24px;
}
.extra_preference_inner.spin {
    padding: 0;
    width: 40px;
    height: 24px;
}

.extra_preference_order_inner {
    position: absolute;
    top:7px;
    left:2px;
    background: none;
    border: 0;
    box-shadow: inset 0 0 0 1px transparent;
    vertical-align: middle;
    width: 36px;
    height: 20px;
}
.extra_preference_order_inner.fix80{
    left:0px;
}
.extra_preference_order_inner.fixSpicy{
    top:16px;
}
.extra_preference_order_inner::before, .extra_preference_order_inner::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 36px;
    height: 20px;
}
.extra_preference_order_inner.spin {
    padding: 0;
    width: 36px;
    height: 20px;
}

/* common */
.spin::before, .spin::after {
    top: 0;
    left: 0;
}
.spin::before{
    border:solid 2px transparent;
}
.spin.on::before{
    border:solid 2px #F00;
}
/*.spin:hover::before,*/.spin.hover::before{
    border-top-color: #F00;
    border-right-color: #F00;
    border-bottom-color: #F00;
    border-left-color: #F00;
    transition: border-top-color 0.05s linear, border-right-color 0.05s linear 0.05s,
              border-bottom-color 0.05s linear 0.1s, border-left-color 0.05s linear 0.15s;
}
.circle {
    border-radius: 100%;
    box-shadow: none;
}
.circle::before, .circle::after {
    border-radius: 100%;
}

/* brush circle */
.inner_position{
    position: absolute;
    width: 40px;
    height: 40px;
}
.inner_position.fix80{
    left:0px!important;
}
.inner_position.fixSpicy{
    top:0px;
}
.inner_position .brush_circle{
    display:block;
    position: relative;
    width: 40px;
    height: 40px;
}
.inner_position .brush_circle::before{
    position:absolute;
    top:40px;
    left:-15px;
    width:40px;
    height:0px;
    content:'';
    background-image:url('/img/circle_rev.png');
    background-size:40px 40px;
    background-repeat:no-repeat;
    background-position:-20px top;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    box-sizing: inherit;
}
.hover .inner_position .brush_circle::before{
    top:0px;
    left:-15px;
    height:40px;
    transition:all 0.1s;
}
.inner_position .brush_circle.on::before{
    top:0px;
    left:-15px;
    height:40px;
}
.inner_position .brush_circle::after{
    position:absolute;
    top:0px;
    left:25px;
    width:40px;
    height:0px;
    content:'';
    background-image:url('/img/circle.png');
    background-size:40px 40px;
    background-repeat:no-repeat;
    background-position:-20px top;
    box-sizing: inherit;
}
.hover .inner_position .brush_circle::after{
    height:40px;
    transition:all 0.1s;
    transition-delay: 0.1s;
}
.inner_position .brush_circle.on::after{
    height:40px;
}

/*******************************/
/* 替え玉 
/*******************************/
.inner_position_extra{
    position: absolute;
    top:0px;
    left:2px;
    width: 36px;
    height: 36px;
}
.inner_position_extra .brush_circle{
    display:block;
    position: relative;
    width: 36px;
    height: 36px;
}
.inner_position_extra .brush_circle::before{
    position:absolute;
    top:36px;
    left:0px;
    width:18px;
    height:0px;
    content:'';
    background-image:url('/img/circle_rev.png');
    background-size:36px 36px;
    background-repeat:no-repeat;
    background-position:-18px top;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    box-sizing: inherit;
}
.inner_position_extra .brush_circle.hover::before{
    top:0px;
    height:70px;
    transition:all 0.1s;
}
.inner_position_extra .brush_circle.on::before{
    top:0px;
    height:36px;
}
.inner_position_extra .brush_circle::after{
    position:absolute;
    top:0px;
    left:18px;
    width:18px;
    height:0px;
    content:'';
    background-image:url('/img/circle.png');
    background-size:36px 36px;
    background-repeat:no-repeat;
    background-position:-18px top;
    box-sizing: inherit;
}
.inner_position_extra .brush_circle.hover::after{
    height:36px;
    transition:all 0.1s;
    transition-delay: 0.1s;
}
.inner_position_extra .brush_circle.on::after{
    height:36px;
}

.inner_position_extra_texture{
    position: absolute;
    top:0px;
    left:2px;
    width: 36px;
    height: 36px;
}
.inner_position_extra_texture .brush_circle{
    display:block;
    position: relative;
    width: 36px;
    height: 36px;
}
.inner_position_extra_texture .brush_circle::before{
    position:absolute;
    top:36px;
    left:0px;
    width:18px;
    height:0px;
    content:'';
    background-image:url('/img/circle_rev.png');
    background-size:36px 36px;
    background-repeat:no-repeat;
    background-position:-18px top;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    box-sizing: inherit;
}
.inner_position_extra_texture .brush_circle.hover::before{
    top:0px;
    height:36px;
    transition:all 0.1s;
}
.inner_position_extra_texture .brush_circle.on::before{
    top:0px;
    height:36px;
}
.inner_position_extra_texture .brush_circle::after{
    position:absolute;
    top:0px;
    left:17px;
    width:18px;
    height:0px;
    content:'';
    background-image:url('/img/circle.png');
    background-size:36px 36px;
    background-repeat:no-repeat;
    background-position:-18px top;
    box-sizing: inherit;
}
.inner_position_extra_texture .brush_circle.hover::after{
    height:36px;
    transition:all 0.1s;
    transition-delay: 0.1s;
}
.inner_position_extra_texture .brush_circle.on::after{
    height:36px;
}

.inner_position_preference{
    position: absolute;
    top:0px;
    left:7px;
    width: 36px;
    height: 36px;
}
.inner_position_preference .brush_circle{
    display:block;
    position: relative;
    width: 36px;
    height: 36px;
}
.inner_position_preference .brush_circle::before{
    position:absolute;
    top:18px;
    left:0px;
    width:18px;
    height:0px;
    content:'';
    background-image:url('/img/circle_rev.png');
    background-size:36px 36px;
    background-repeat:no-repeat;
    background-position:-18px top;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    box-sizing: inherit;
}
.inner_position_preference .brush_circle.hover::before{
    top:0px;
    height:36px;
    transition:all 0.1s;
}
.inner_position_preference .brush_circle.on::before{
    top:0px;
    height:36px;
}
.inner_position_preference .brush_circle::after{
    position:absolute;
    top:0px;
    left:18px;
    width:18px;
    height:0px;
    content:'';
    background-image:url('/img/circle.png');
    background-size:36px 36px;
    background-repeat:no-repeat;
    background-position:-18px top;
    box-sizing: inherit;
}
.inner_position_preference .brush_circle.hover::after{
    height:36px;
    transition:all 0.1s;
    transition-delay: 0.1s;
}
.inner_position_preference .brush_circle.on::after{
    height:36px;
}